/* ═══════════════════════════════════════════════════════════════════════════
   The reports (Atlas, rebuild Phase 6): a club, a city, a site, an operator.

   One stylesheet for the four. Each report used to carry its own copy of
   `.kpi-*`, `.detail-*`, `.panel` and the buttons in an inline <style> — four
   copies of one design, drifting. The class names are kept, because the
   templates' gating logic is written around them and the leak tests read that
   markup; what they look like is here, in Atlas: text first, sections split
   by hairlines rather than cards inside cards, no all-caps labels, figures in
   tabular DM Sans, the place's name in Bricolage.
   ═══════════════════════════════════════════════════════════════════════════ */

.detail-page { max-width: 1120px; margin: 0 auto; padding: var(--s-6) var(--s-6) var(--s-10); color: var(--ink); }

.detail-breadcrumb { font-size: var(--step--1); color: var(--ink-3); margin-bottom: var(--s-3); }
.detail-breadcrumb a { color: var(--court); text-decoration: none; }
.detail-breadcrumb a:hover { text-decoration: underline; }
.detail-breadcrumb__sep { color: var(--hairline-strong); margin: 0 var(--s-2); }

.detail-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; padding-bottom: var(--s-5); border-bottom: 1px solid var(--hairline); }
.detail-header__who { display: flex; align-items: center; gap: var(--s-4); }
.detail-avatar { width: 64px; height: 64px; border-radius: var(--r-m); object-fit: cover; }
.detail-title { font-family: var(--font-display); font-size: var(--step-5); font-weight: 650; letter-spacing: -0.015em; line-height: var(--lh-tight); color: var(--ink); margin: 0; }
.detail-subtitle { color: var(--ink-2); font-size: var(--step-0); margin: var(--s-2) 0 0; }
.detail-subtitle a { color: var(--court); text-decoration: none; font-weight: 500; }
.detail-actions, .detail-header > div:last-child { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.beta-pill { display: none; }

/* The key figures: a row of stats split by hairlines, not a strip of boxes. */
.kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: var(--s-6) 0 var(--s-2); border-bottom: 1px solid var(--hairline); }
.kpi-cell { padding: 0 var(--s-4) var(--s-5) 0; position: relative; }
.kpi-cell + .kpi-cell { padding-left: var(--s-4); border-left: 1px solid var(--hairline); }
.kpi-label { font-size: var(--step--1); color: var(--ink-3); margin-bottom: var(--s-1); font-weight: 400; text-transform: none; letter-spacing: 0; }
.kpi-value { font-family: var(--font-ui); font-variant-numeric: tabular-nums; font-size: var(--step-3); font-weight: 650; color: var(--ink); line-height: 1.1; }
.kpi-value[style*="color"] { color: var(--ink) !important; }
.kpi-sub { font-size: var(--step--1); color: var(--ink-3); margin-top: var(--s-1); }
.kpi-sparkline { display: none; }

.section-heading, .section-title { font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; color: var(--ink); margin: var(--s-10) 0 var(--s-4); }
.detail-grid { display: grid; grid-template-columns: 3fr 2fr; gap: var(--s-6); align-items: start; }
.detail-grid > * { min-width: 0; }
.panel { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-l); padding: var(--s-5); }
.panel-label { font-size: var(--step--1); color: var(--ink-2); font-weight: 500; margin: 0 0 var(--s-3); text-transform: none; letter-spacing: 0; }
.panel .panel-label ~ .panel-label { margin-top: var(--s-5); }

.report-map { height: 380px; border-radius: var(--r-m); overflow: hidden; background: var(--chalk); }
#venue-map, #city-map, #sf-map, #operator-map { height: 380px; }
.chart-wrap { position: relative; height: 140px; }

/* Score and distance bars. */
.sb-row, .radial-row, .pd-row { display: grid; grid-template-columns: 9rem 1fr 4.5rem; gap: var(--s-3); align-items: center; margin: var(--s-2) 0; font-size: var(--step-0); }
.sb-name, .radial-label, .pd-label { color: var(--ink-2); }
.sb-bar, .radial-bar, .pd-bar { height: 8px; background: var(--chalk-2); border-radius: var(--r-xs); overflow: hidden; }
.sb-bar > div, .radial-bar > div, .pd-bar > div { height: 100%; border-radius: var(--r-xs); background: var(--turf-3) !important; }
.sb-value, .radial-value, .pd-value { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }

/* Tables. */
.detail-table { width: 100%; border-collapse: collapse; font-size: var(--step-0); }
.detail-table thead th { text-align: left; padding: var(--s-2) var(--s-3); color: var(--ink-3); font-size: var(--step--1); font-weight: 500; text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--hairline-strong); }
.detail-table tbody td { padding: var(--s-3); border-bottom: 1px solid var(--hairline); }
.detail-table tbody tr:hover { background: var(--chalk); cursor: pointer; }
.detail-table .right { text-align: right; font-variant-numeric: tabular-nums; }
.mobile-card-list { display: none; }
.mobile-card { border-bottom: 1px solid var(--hairline); padding: var(--s-3) 0; cursor: pointer; }
.mobile-card__title { font-weight: 600; color: var(--ink); margin-bottom: var(--s-1); }
.mobile-card__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1) var(--s-3); font-size: var(--step--1); color: var(--ink-3); }
.mobile-card__grid strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* This against its peers: the city, the benchmark. */
.peer-grid, .benchmark-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 0.8fr; gap: var(--s-2) var(--s-5); font-size: var(--step-0); align-items: baseline; }
.peer-grid__hdr, .benchmark-grid__hdr { font-size: var(--step--1); color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.peer-grid .num, .benchmark-grid .num { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.peer-grid .num span, .benchmark-grid .num span { color: var(--ink-2) !important; }

/* Buttons: the Atlas three. */
.btn-primary, .btn-secondary, .btn-disabled { display: inline-flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-4); height: 40px; border-radius: var(--r-m); font: 600 var(--step-0)/1 var(--font-ui); text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.btn-primary { background: var(--court); color: #fff; }
.btn-primary:hover { background: var(--court-hover); }
.btn-secondary { background: var(--paper); color: var(--ink); border-color: var(--hairline-strong); }
.btn-secondary:hover { border-color: var(--ink); }
.btn-disabled { display: none; }
.action-footer { margin-top: var(--s-8); display: flex; gap: var(--s-3); flex-wrap: wrap; padding-top: var(--s-5); border-top: 1px solid var(--hairline); }
.save-btn { background: none; border: 1px solid var(--hairline-strong); border-radius: var(--r-m); height: 40px; padding: 0 var(--s-3); cursor: pointer; color: var(--ink-3); }
.save-btn.saved { color: var(--signal); }

/* The locked half: the Atlas lock, one veil, one door. */
.gated-block { position: relative; margin-top: var(--s-6); border: 1px solid var(--hairline); border-radius: var(--r-l); overflow: hidden; background: var(--paper); }
.gated-block__content { filter: blur(3px); opacity: 0.5; padding: var(--s-5); min-height: 200px; }
.gated-block__veil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0.9)); }
.gated-block__cta { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-6); text-align: center; }
.gated-block__cta-title { font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; color: var(--ink); }
.gated-block__cta-sub { color: var(--ink-2); max-width: 46ch; line-height: var(--lh-prose); }
.gated-block__cta-btn { display: inline-flex; align-items: center; height: 40px; padding: 0 var(--s-4); border-radius: var(--r-m); background: var(--court); color: #fff; font-weight: 600; text-decoration: none; margin-top: var(--s-2); }

/* Operator report. */
.op-venues-wrap { overflow-x: auto; }
.op-venues { width: 100%; border-collapse: collapse; font-size: var(--step-0); }
.op-venues th { text-align: left; color: var(--ink-3); font-weight: 500; font-size: var(--step--1); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--hairline-strong); }
.op-venues td { padding: var(--s-3); border-bottom: 1px solid var(--hairline); font-variant-numeric: tabular-nums; }
.op-pill { display: inline-block; padding: 2px var(--s-2); border-radius: var(--r-s); font-size: var(--step--1); font-weight: 500; background: var(--chalk-2); color: var(--ink-2); }
.op-pill--green { background: var(--turf-wash); color: var(--turf-5); }
.op-pill--blue { background: var(--court-wash); color: var(--court); }
.op-disclaimer { color: var(--ink-3); font-size: var(--step--1); margin-top: var(--s-3); line-height: var(--lh-prose); }

/* Demand rhythm: weekday × hour, on the occupancy ramp. */
.dr-caption { color: var(--ink-3); font-size: var(--step--1); margin: calc(var(--s-4) * -1) 0 var(--s-4); }
.dr-grid { display: grid; grid-template-columns: 1.75rem repeat(var(--hours), minmax(0, 1fr)); gap: 2px; font-size: 10px; color: var(--ink-3); }
.dr-grid__cell { aspect-ratio: 1.4; border-radius: 2px; background: var(--chalk-2); }
.dr-grid__cell.is-peak { box-shadow: inset 0 0 0 1px rgba(11,27,59,0.18); }
.dr-grid__day { align-self: center; }
.dr-grid__hour { text-align: center; }
.dr-pressure-bar { height: 10px; border-radius: var(--r-xs); background: var(--chalk-2); overflow: hidden; margin: var(--s-2) 0; }
.dr-pressure-bar > span { display: block; height: 100%; background: var(--occ-4); }

@media (max-width: 768px) {
  .detail-page { padding: var(--s-4) var(--s-4) var(--s-10); }
  .detail-title { font-size: var(--step-4); }
  .kpi-strip { grid-template-columns: 1fr 1fr; }
  .kpi-cell, .kpi-cell + .kpi-cell { padding: var(--s-3) var(--s-3) var(--s-3) 0; border-left: 0; border-bottom: 1px solid var(--hairline); }
  .detail-grid { grid-template-columns: 1fr; }
  #venue-map, #city-map, #sf-map, #operator-map, .report-map { height: 280px; }
  .detail-table { display: none; }
  .mobile-card-list { display: block; }
  .peer-grid, .benchmark-grid { grid-template-columns: 1fr 1fr; }
  .peer-grid__hdr, .benchmark-grid__hdr { display: none; }
  .sb-row, .radial-row, .pd-row { grid-template-columns: 6rem 1fr 3.5rem; }
  .dr-grid { font-size: 8px; }
}

@media print {
  .action-footer, .detail-actions, .save-btn, .gated-block__cta-btn { display: none !important; }
  .detail-page { padding: 0; }
}

/* The score, on the Turf ramp (the workspace's badge). */
.ws__score { display: inline-block; min-width: 2.5rem; padding: 2px var(--s-2); border-radius: var(--r-xs); text-align: center; font-variant-numeric: tabular-nums; background: var(--chalk-2); color: var(--ink-2); }
.ws__score[data-band="1"] { background: var(--turf-1); color: #fff; }
.ws__score[data-band="2"] { background: var(--turf-2); color: #fff; }
.ws__score[data-band="3"] { background: var(--turf-3); color: #fff; }
.ws__score[data-band="4"] { background: var(--turf-4); color: #fff; }
.ws__score[data-band="5"] { background: var(--turf-5); color: #fff; }

/* Legend marks (the workspace's), for the site map. */
.ws__mark { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--mark); margin-right: 6px; vertical-align: -1px; }
.ws__mark--square { border-radius: 2px; }

/* The investment snapshot (partials/_site_economics_card.html). */
.econ { display: grid; gap: var(--s-4); }
.econ .a-stats { gap: var(--s-4); }
.econ__bar { height: 8px; border-radius: 999px; background: var(--ink-3); overflow: hidden; }
.econ__margin { display: block; height: 100%; background: var(--turf-4); }
.econ__swatch--margin { background: var(--turf-4); border-radius: 2px; }
.econ__swatch--opex { background: var(--ink-3); border-radius: 2px; }
.econ__note { font-size: var(--step--1); color: var(--ink-3); margin: 0; }
.econ .a-btn { justify-self: start; }
.econ__legend { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }