/* ============================================================
   /stats/ pages (hub, Condo Index, rankings). Loads after site.css +
   services.css; builds on the .k-* kit, page-scoped as .st-*.
   Behaviors: assets/stats-pages.js. Generator: scripts/data/build-stats-pages.mjs
   ============================================================ */

/* ---------- hero: data hero without a photo, terminal grid + the index line ---------- */
.st-hero { background:
  repeating-linear-gradient(to right, var(--term-line) 0 1px, transparent 1px 96px),
  repeating-linear-gradient(to bottom, var(--term-line) 0 1px, transparent 1px 96px),
  var(--term-bg); }
.st-hero .k-hero-in { min-height: 0; padding-top: clamp(28px, 4.5vh, 52px); padding-bottom: clamp(30px, 4.5vh, 48px); }
/* top-anchored in px: a late web-font reflow changes the hero height, and a bottom-anchored line would shift (CLS) */
.st-hero-line { position: absolute; left: 0; right: 0; top: clamp(150px, 26vh, 230px); height: 300px; z-index: -1; pointer-events: none; opacity: .5; }
.st-hero-line svg { width: 100%; height: 100%; display: block; }
.st-hero-line path { fill: none; stroke: var(--amber); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
/* "At a glance" (2026-10-13): the answer-first summary under the hero CTAs (the hub: under the lede), from
   scripts/lib/glance.mjs; same look as building.css .b-glance on the condo pages */
.st-hero .b-glance { position: relative; margin-top: 20px; max-width: 44em; padding-left: 14px; border-left: 2px solid var(--amber); font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.82); text-wrap: pretty; }
.st-hero .b-glance-k { display: block; margin-bottom: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.st-hero .b-glance-src { color: rgba(255,255,255,.66); }
@media (max-width: 700px) { .st-hero .b-glance { margin-top: 16px; font-size: 13px; } }
.st-hero-line path.a { fill: url(#st-hero-g); stroke: none; }
.st-hero .k-asof a { color: inherit; text-underline-offset: 2px; }
.st-hero .k-kpi .d small { opacity: .8; }
.st-hero .k-hero-side .k-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-hero .k-kpi .d { white-space: normal; }
.st-chart .k-legend [hidden] { display: none; }

/* ---------- explorer controls ---------- */
.st-ctl { display: flex; flex-wrap: wrap; align-items: end; gap: 14px 22px; margin-bottom: 16px; }
.st-field { display: grid; gap: 6px; min-width: 0; }
.st-field > span, .st-field legend { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--k-dim); }
.st-select { appearance: none; -webkit-appearance: none; min-width: 230px; max-width: 100%; padding: 11px 40px 11px 16px; border: 1px solid var(--k-line-2); border-radius: 999px; background: var(--k-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23101114' stroke-width='1.6'/%3E%3C/svg%3E") right 15px center / 12px no-repeat; font: 600 14px/1.2 'Sora', 'Sora Fallback', sans-serif; color: var(--k-text); cursor: pointer; }
.st-select:focus-visible { outline: 2px solid var(--k-focus); outline-offset: 2px; }
.st-seg { border: 0; padding: 0; margin: 0; min-width: 0; }
.st-seg-row { display: flex; flex-wrap: wrap; gap: 6px; }
.st-seg label { position: relative; }
.st-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.st-seg label span { display: inline-flex; align-items: center; min-height: 40px; padding: 9px 15px; border: 1px solid var(--k-line-2); border-radius: 999px; background: var(--k-field); font-size: 13px; font-weight: 600; color: var(--k-text); cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.st-seg label span:hover { border-color: var(--ink); }
.st-seg input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.st-seg input:checked + span::before { content: ''; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--amber); }
.st-seg input:focus-visible + span { outline: 2px solid var(--k-focus); outline-offset: 2px; }

/* ---------- chart box: fixed height, so redraws never shift the page ---------- */
.st-chart .k-chart-head { align-items: center; }
.st-plot-wrap { position: relative; }
.st-plot { height: 340px; }
.st-plot svg { width: 100%; height: 100%; }
.st-plot-ctl { position: absolute; inset: 0; border-radius: 8px; cursor: crosshair; }
.st-plot-ctl:focus-visible { outline: 2px solid var(--k-focus); outline-offset: 4px; }
.st-chart .st-bar { fill: var(--k-s1); }
.st-chart .st-cross-l { stroke: var(--k-dim); stroke-width: 1; stroke-dasharray: 3 3; }
.st-plot-wrap .k-tip { white-space: normal; min-width: 150px; text-align: left; }
.st-tip-n, .st-tip-b { color: #A9AEB6; font-weight: 600; }
.st-chart-note { margin-top: 10px; font-size: 12px; color: var(--k-dim); min-height: 1.5em; }
.st-chart .k-chart-table { margin-top: 14px; }
.st-chart .k-chart-table .k-table-wrap { max-height: 420px; overflow: auto; }
.st-csv[hidden] { display: none !important; }
.st-t12 { min-width: 860px; }
.st-t12 th:first-child, .st-t12 td:first-child { position: sticky; left: 0; z-index: 1; background: var(--k-surface); white-space: nowrap; }
.st-t12 tbody tr:hover td:first-child { background: var(--k-surface); }

/* ---------- neighborhood comparison (on the dark slab) ---------- */
.st-hoods { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 40px; }
.st-hood { display: grid; grid-template-columns: minmax(0, 176px) minmax(0, 1fr) 76px 64px; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--k-line); text-decoration: none; color: var(--k-text); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.st-hood .l { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-hood .l small { display: block; font-size: 11px; font-weight: 600; color: var(--k-dim); }
.st-hood .t { height: 8px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.st-hood .t i { display: block; height: 100%; width: var(--w); border-radius: 99px; background: var(--k-s2); }
.st-hood.is-all .t i { background: var(--amber); }
.st-hood .v { text-align: right; font-weight: 800; }
.st-hood .d { text-align: right; font-size: 12px; font-weight: 700; }
.st-hood .d.up { color: var(--k-good); } .st-hood .d.down { color: var(--k-bad); } .st-hood .d.na { color: var(--k-dim); font-weight: 600; }
a.st-hood:hover .l { color: var(--amber); }
.st-hood.is-off .v { font-size: 11.5px; font-weight: 600; color: var(--k-dim); }

/* ---------- methodology + cite ---------- */
.st-method { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 48px; }
.st-method dl { display: grid; gap: 16px; }
.st-method dt { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--k-accent); }
.st-method dd { margin-top: 4px; font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); }
.st-method dd b { color: var(--ink); }
.st-cite { position: relative; margin-top: clamp(28px, 4vw, 40px); padding: clamp(20px, 2.6vw, 28px); border-radius: var(--radius); background: var(--ink); color: #fff; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: center; }
.st-cite::before, .st-cite::after { content: ''; position: absolute; width: 14px; height: 14px; border-color: var(--amber); border-style: solid; }
.st-cite::before { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
.st-cite::after { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }
.st-cite-k { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.st-cite p { margin-top: 8px; font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.88); overflow-wrap: anywhere; }
.st-cite-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.st-cite .btn { padding: 11px 18px; font-size: 13.5px; }

/* ---------- rankings ---------- */
.st-rk-bar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px 24px; margin-bottom: 18px; }
.st-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px; margin: -4px; }
.st-tabs::-webkit-scrollbar { display: none; }
.st-tab { flex: none; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 16px; border: 1px solid var(--k-line-2); border-radius: 12px; background: var(--k-field); font: 700 13.5px/1.25 'Sora', 'Sora Fallback', sans-serif; color: var(--k-text); cursor: pointer; text-align: left; }
.st-tab small { font-size: 11.5px; font-weight: 600; color: var(--k-dim); }
.st-tab:hover { border-color: var(--ink); }
.st-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.st-tab[aria-selected="true"] small { color: var(--amber); }
.st-tab:focus-visible { outline: 2px solid var(--k-focus); outline-offset: 2px; }
.st-rk-panel { display: none; }
.st-rk-panel.on, .no-js .st-rk-panel { display: block; }
.no-js .st-rk-panel + .st-rk-panel { margin-top: 48px; }
.st-rk-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: end; margin-bottom: 14px; }
.st-rk-head h2 { font-size: clamp(1.25rem, 2vw, 1.55rem); letter-spacing: -.02em; }
.st-rk-head p { margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: var(--k-dim); max-width: 55.73em; }
.st-rk-head .k-asof { white-space: nowrap; }
.st-rk .k-table td { vertical-align: middle; padding-block: 10px; }
.st-rk tr[hidden] { display: none !important; }
.js .st-rk-panel:not(.show-all):not(.is-filtered) tbody tr:nth-child(n+51) { display: none; }
.st-rk.is-loading tbody { opacity: .55; transition: opacity .2s ease; }
.st-rank { width: 56px; font: 800 15px/1 'Sora', 'Sora Fallback', sans-serif; color: var(--k-dim); font-variant-numeric: tabular-nums; }
.st-rk tbody tr:nth-child(-n+3) .st-rank { color: var(--k-accent); }
.st-rank-m { display: none; min-width: 30px; margin-right: 6px; font-weight: 800; color: var(--k-accent); font-variant-numeric: tabular-nums; }
.st-rk .st-v { font-weight: 800; font-size: 15px; color: var(--k-text); white-space: nowrap; }
.st-rk .k-td-main small { display: block; margin-top: 2px; }
.st-chip { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 99px; background: var(--k-flat-bg); font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: var(--k-dim); vertical-align: 1px; white-space: nowrap; }
.st-more { margin-top: 14px; }
.st-more[hidden] { display: none; }
.st-empty[hidden] { display: none; }
.st-empty { padding: 18px; border: 1px dashed var(--k-line-2); border-radius: 12px; font-size: 14px; color: var(--k-dim); }

/* ---------- hub ---------- */
.st-hub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.st-door { position: relative; display: flex; flex-direction: column; min-height: 220px; padding: 22px; border: 1px solid var(--k-line); border-radius: var(--radius); background: var(--k-surface); text-decoration: none; color: var(--k-text); transition: border-color .15s ease, transform .15s ease; }
.st-door:hover { border-color: var(--ink); transform: translateY(-2px); }
.st-door .k { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--k-accent); }
.st-door h2, .st-door h3 { margin-top: 10px; font-size: 1.2rem; letter-spacing: -.02em; }
.st-door p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--k-dim); }
.st-door .go { margin-top: auto; padding-top: 16px; font-size: 13.5px; font-weight: 700; }
.st-door .go .arr { display: inline-block; color: var(--k-accent); transition: transform .15s ease; }
.st-door:hover .go .arr { transform: translateX(4px); }
.st-door.is-ink { background: var(--ink); border-color: var(--ink); color: #fff; --k-dim: #A9AEB6; --k-accent: var(--amber); }
.st-door .k-spark { margin-top: 14px; height: 36px; }
.st-door.is-lead { grid-column: span 2; }

@media (max-width: 980px) {
  .st-hoods, .st-method { grid-template-columns: minmax(0, 1fr); }
  .st-hub { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .st-door.is-lead { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .st-plot { height: 260px; }
  .st-select { min-width: 0; width: 100%; }
  .st-ctl .st-field { width: 100%; }
  .st-seg-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 3px; margin: -3px; }
  .st-seg-row::-webkit-scrollbar { display: none; }
  .st-seg label span { white-space: nowrap; }
  /* phones keep the bar (the section says the bars are scaled): it runs under the name, full width (ux 10-13) */
  .st-hood { grid-template-columns: minmax(0, 1fr) 72px 58px; row-gap: 7px; }
  .st-hood .t { grid-column: 1 / -1; grid-row: 2; height: 6px; }
  .st-cite { grid-template-columns: minmax(0, 1fr); }
  .st-hub { grid-template-columns: minmax(0, 1fr); }
  .st-rk-head { grid-template-columns: minmax(0, 1fr); }
  .st-rk .k-table:not(.is-scroll) td.st-rank { display: none; }
  .st-rk .k-table:not(.is-scroll) tr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; padding: 11px 13px; margin-bottom: 8px; }
  .st-rk .k-table:not(.is-scroll) td { font-size: 13px; padding-block: 0; }  /* the desktop 10px cell padding doubled the card's row gap (ux 10-13) */
  .st-rk .k-table:not(.is-scroll) td::before { font-size: 9.5px; letter-spacing: .06em; }
  .st-rk .k-table:not(.is-scroll) td.k-td-main small { font-size: 11.5px; }
  .js .st-rk-panel:not(.show-all):not(.is-filtered) tbody tr:nth-child(n+26) { display: none; }
  .st-rank-m { display: inline-block; }
}
@media (prefers-reduced-motion: reduce) {
  .st-door, .st-door .go .arr, .st-seg label span { transition: none; }
  .st-door:hover { transform: none; }
}
@media print {
  .st-ctl, .st-plot-ctl, .st-cite-btns, .lead-band, #site-header, #site-footer, .ep-dock { display: none !important; }
}