/* F3 Peak City Stats — shared stylesheet (designer handoff 2026-09-26).
   Fonts load via <link> in each page; no @import (it blocks render). */

:root{
  --paper:#f5f0e4; --ink:#1a1a1a; --text:#404040;
  --green:#4a5e3a; --green-dark:#3a4d2d; --green-wash:rgba(74,94,58,.05);
  --muted:#8a7a60; --rule:#c8bfa8; --track:#ebe4d2; --gold:#c8a840;
  --display:'Barlow Condensed',sans-serif;
  --serif:'Lora',serif;
  --ui:'Open Sans',sans-serif;
  --col:900px; --gutter:24px;
  /* Tone scale: color encodes HEALTH, never direction or magnitude alone.
     good = healthy/growing, watch = borderline, alert = needs attention,
     none = not enough data to judge. */
  --tone-good:#4a5e3a; --tone-watch:#a8801a; --tone-alert:#9a5a3a; --tone-none:#8a7a60;
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--green-dark)}
.wrap{max-width:var(--col);margin:0 auto;padding-inline:var(--gutter);width:100%}

/* Shared label style: every small caps label on the page */
.label{font:600 11px/1 var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* Header */
.site-header{background:var(--ink);border-bottom:3px solid var(--green)}
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;min-height:52px}
.brand{display:flex;align-items:center;gap:12px;color:#fff}
.brand:hover{color:#fff}
.brand img{height:24px;display:block}
.brand span{font:800 15px/1 var(--display);letter-spacing:.2em;text-transform:uppercase}
.site-nav{display:flex;flex-wrap:wrap;gap:0 24px}
.site-nav a{font:600 11px/52px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:#fff}

main{flex:1;padding-top:56px;padding-bottom:72px}

/* Eyebrow strip above hero */
.eyebrow{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--rule);letter-spacing:.2em}

/* Hero */
.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));align-items:end;gap:8px 40px;padding:28px 0 32px;border-bottom:4px solid var(--ink)}
.hero-num{font:900 clamp(96px,20vw,184px)/.8 var(--display);letter-spacing:-.03em}
.hero-side{padding-bottom:6px}
.hero-kicker{font:800 28px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.hero-lede{margin:12px 0 0;font:400 16px/1.55 var(--serif);color:var(--text);max-width:34ch;text-wrap:pretty}

/* KPI row */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));border-bottom:2px solid var(--ink)}
.kpi{padding:24px}
.kpi:first-child{padding-left:0}
.kpi:last-child{padding-right:0}
.kpi + .kpi{border-left:1px solid var(--rule)}
.kpi-num{font:900 56px/.9 var(--display);letter-spacing:-.02em;display:flex;align-items:baseline;gap:10px}
.kpi-num small{font:700 18px/1 var(--display);letter-spacing:.06em;color:var(--muted)}
.kpi--accent .kpi-num{color:var(--green)}
.kpi .label{margin-top:10px}

/* Section flag */
.flag{display:flex;align-items:center;gap:12px;margin-top:56px}
.flag span{font:700 11px/1 var(--ui);letter-spacing:.22em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:5px 9px}
.flag::after{content:"";flex:1;height:2px;background:var(--ink)}

/* Dashboard index */
.dash-list{list-style:none;margin:0;padding:0}
.dash{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:6px 24px;align-items:baseline;padding:24px 8px 24px 0;border-bottom:1px solid var(--rule);color:var(--ink);transition:background .15s ease}
.dash:hover{background:var(--green-wash);color:var(--ink)}
.dash-idx{font:700 18px/1 var(--display);letter-spacing:.08em;color:var(--muted);font-variant-numeric:tabular-nums}
.dash-title{font:900 clamp(30px,5vw,40px)/.95 var(--display);letter-spacing:.01em;text-transform:uppercase}
.dash-desc{margin:10px 0 0;font:400 15px/1.55 var(--serif);color:var(--text);max-width:52ch;text-wrap:pretty}
.dash-meta{display:flex;align-items:baseline;gap:14px;white-space:nowrap}
.dash-meta .arrow{font:800 24px/1 var(--display);color:var(--green)}
@media (max-width:560px){
  .dash{grid-template-columns:28px minmax(0,1fr)}
  .dash-meta{grid-column:2}
  .kpis{grid-template-columns:1fr}
  .kpi{padding-left:0;padding-right:0}
  .site-nav a{line-height:36px}
  .kpi + .kpi{border-left:0;border-top:1px solid var(--rule)}
}

/* Footer */
.site-footer{border-top:2px solid var(--ink)}
.site-footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-top:20px;padding-bottom:20px;letter-spacing:.14em;line-height:1.4}

/* ============ CHILD PAGES (AO, PAX, FNG, Leaderboard, Who to Q) ============ */

/* Page head: eyebrow + title + subtitle (+ optional toggle) */
.page-head{padding-bottom:28px;border-bottom:4px solid var(--ink)}
.page-title{margin:28px 0 0;font:900 clamp(64px,12vw,112px)/.85 var(--display);letter-spacing:-.02em;text-transform:uppercase}
.page-sub{margin:16px 0 0;font:400 17px/1.55 var(--serif);color:var(--text);max-width:48ch;text-wrap:pretty}
.page-head-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-top:16px}
.page-head-row .page-sub{margin:0}

/* Section with thick underrule heading */
.section{margin-top:56px}
.section-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;border-bottom:2px solid var(--ink);padding-bottom:12px}
.section-head h2{margin:0;font:800 26px/1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.pair{margin-top:56px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:56px 48px}
.pair .section{margin-top:0}

/* Toggle (day filter, PAX/crew scope, AO picker) */
.toggle{display:inline-flex;border:2px solid var(--ink);max-width:100%;overflow-x:auto}
.toggle button{font:700 11px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;background:transparent;color:var(--ink);border:0;padding:8px 12px;cursor:pointer;white-space:nowrap;transition:background .1s ease}
.toggle button + button{border-left:1px solid var(--ink)}
.toggle button:hover{background:var(--green-wash)}
.toggle button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* Horizontal bar list: name | track | value. Top row gets .is-top (green). */
.bar-row{display:grid;grid-template-columns:110px minmax(0,1fr) 44px;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--rule)}
.bar-row--ranked{grid-template-columns:28px minmax(80px,140px) minmax(0,1fr) 44px}
.bar-rank{font:700 14px/1 var(--display);letter-spacing:.06em;color:var(--muted);font-variant-numeric:tabular-nums}
.bar-name{font:700 15px/1.1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.bar-track{height:8px;background:var(--track)}
.bar-fill{display:block;height:100%;background:var(--ink);transition:width .5s ease}
.bar-row.is-top .bar-fill{background:var(--green)}
.bar-val{font:800 20px/1 var(--display);text-align:right}

/* Vertical column chart (days, months, buckets). Tallest column gets .is-top. */
.cols{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;height:200px;padding-top:20px}
.col{display:flex;flex-direction:column;gap:8px;min-width:0}
.col-plot{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.col-val{font:800 18px/1 var(--display);text-align:center}
.col-bar{background:var(--ink);transition:height .5s ease}
.col.is-top .col-bar{background:var(--green)}
.col.is-future .col-bar{height:100%!important;background:transparent;border:1px dashed var(--rule)}
.col .label{text-align:center;letter-spacing:.08em}

/* Weekly strip (26 thin bars) + axis */
.strip{display:flex;align-items:flex-end;gap:3px;height:180px;padding-top:20px}
.strip span{flex:1;background:var(--ink)}
.strip span.is-top{background:var(--green)}
.axis{display:flex;justify-content:space-between;padding-top:10px;border-top:1px solid var(--ink)}

/* Simple text rows (trajectory, Who to Q, crew) */
.row{display:grid;grid-template-columns:minmax(0,1fr) auto 48px;gap:16px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--rule)}
.row-name{font:700 17px/1.1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.row-val{font:800 22px/1 var(--display);text-align:right}
.row-val.is-good{color:var(--green)}
.crew{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));column-gap:32px}
.crew .row{grid-template-columns:minmax(0,1fr) auto auto;padding:11px 0}
.streak{font:700 11px/1 var(--ui);letter-spacing:.1em;color:var(--green)}

/* FNG status stacked bar + legend */
.stack{display:flex;height:28px;margin-top:24px;border:2px solid var(--ink)}
.stack span + span{border-left:2px solid var(--ink)}
.legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px 32px;margin-top:20px}
.swatch{display:inline-block;width:12px;height:12px;border:1.5px solid var(--ink)}
.legend-num{font:800 28px/1 var(--display)}
.legend-num small{font:700 16px/1 var(--display);color:var(--muted)}

/* Leaderboard year grid — the four-level key */
.heat{overflow-x:auto}
.heat-inner{min-width:600px}
.heat-row{display:grid;grid-template-columns:120px repeat(12,minmax(0,1fr));gap:3px;padding:3px 0}
.heat-row > .bar-name{line-height:28px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell{height:28px;display:flex;align-items:center;justify-content:center;font:800 14px/1 var(--display)}
.cell--low{background:var(--track);color:var(--muted)}   /* 1–5 posts */
.cell--mid{background:var(--rule);color:var(--ink)}      /* 6–11 posts */
.cell--noq{background:var(--gold);color:var(--ink)}      /* 12+ posts, no Q */
.cell--done{background:var(--green);color:#fff}          /* 12+ posts and a Q */
.cell--future{border:1px solid var(--rule)}

/* Data tables */
.table-wrap{overflow-x:auto;margin-top:4px}
.table{width:100%;border-collapse:collapse}
.table th{font:700 11px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px 12px 10px 0;border-bottom:1px solid var(--ink);white-space:nowrap}
.table td{font:400 15px/1.3 var(--ui);padding:11px 12px 11px 0;border-bottom:1px solid var(--rule)}
.table td:first-child{font:700 16px/1.1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.table tr:hover td{background:var(--green-wash)}
.table .num{text-align:right;font-variant-numeric:tabular-nums}

/* ============ EXTENSIONS (features kept beyond the handoff) ============ */

.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.toggle button:focus-visible{outline-offset:-4px}

/* Loading / error / empty states (f3ShowLoading, f3ShowError, f3ShowEmpty) */
.status{padding:40px 0;text-align:center}
.status--error{color:var(--tone-alert)}
.empty-state{color:var(--muted);font-style:italic;font-weight:400}

/* Tone scale */
.tone-good{color:var(--tone-good);font-weight:600}
.tone-watch{color:var(--tone-watch);font-weight:600}
.tone-alert{color:var(--tone-alert);font-weight:600}
.tone-none{color:var(--tone-none);font-weight:400}

/* Section-head controls: toggles + date range sit together on the right */
.section-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.range{display:inline-flex;align-items:center;gap:8px}
.range input[type=date]{font:400 14px/1 var(--ui);color:var(--ink);background:transparent;border:1px solid var(--rule);border-radius:0;padding:6px 8px}
.range input[type=date]:focus{border-color:var(--green);outline:none}
.section-note{margin-top:10px}

/* ApexCharts: reserve height before render (no layout shift), keep fonts on-system */
.chart{min-height:280px;margin-top:12px}
.apexcharts-tooltip{border-radius:0!important;box-shadow:none!important;border:1px solid var(--ink)!important}
.apexcharts-legend-series{cursor:pointer}

/* Sortable table headers (f3MakeSortable) */
.table th[data-sort]{cursor:pointer;user-select:none}
.table th[data-sort]:hover{color:var(--ink)}
.table th[data-sort] .th-tail::after{content:"\00a0\21C5";opacity:.4}
.table th[data-sort].asc .th-tail::after{content:"\00a0\2191";opacity:1;color:var(--green)}
.table th[data-sort].desc .th-tail::after{content:"\00a0\2193";opacity:1;color:var(--green)}

/* PAX name links (table -> detail page) */
.pax-link{color:var(--ink)}
.pax-link:hover{color:var(--green);text-decoration:underline}
/* Tables fit their column instead of scrolling: headers wrap to a second
   line, text cells wrap, and only numbers and dates hold to one line. */
.table th{white-space:normal;vertical-align:bottom;line-height:1.35;letter-spacing:.06em;padding-right:8px}
.table th .info-dot{margin-left:-2px}
.table th .th-tail,.tail{white-space:nowrap}  /* last word + ⓘ (+ sort arrow) never split: f3ThLabel in JS, .tail in HTML */
.table td{padding-right:8px;vertical-align:top}
.table td:first-child{min-width:7em}
.table td.num,.table td.nowrap{white-space:nowrap}
.table td.table-note{font:400 14px/1.4 var(--ui);color:var(--text);min-width:180px}

/* AO page */
#chart-daily-attendance{min-height:460px}
.ao-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));column-gap:40px}
.ao-card{padding:20px 0;border-bottom:1px solid var(--rule)}
.ao-card-title{margin:0;font:800 22px/1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.ao-card-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin:16px 0}
.ao-card-stats dd{margin:6px 0 0;font:800 20px/1.1 var(--display);letter-spacing:.02em;overflow-wrap:anywhere}
.ao-card-stats dd .empty-state{font:italic 400 14px/1.3 var(--ui)}
.ao-spark-row{padding-top:12px;border-top:1px solid var(--rule);margin-bottom:14px}
.ao-spark-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}
.ao-spark{display:block;width:100%;height:34px;fill:currentColor;opacity:.8}
.ao-trend{font:700 11px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.ao-core-list{margin:8px 0 0;font:400 14px/1.5 var(--ui);color:var(--text)}

/* FNG status stack: segment + swatch colors */
.stack--done{background:var(--green)}
.stack--dev{background:var(--ink)}
.stack--pending{background:var(--track)}
.stack--ghost{background:var(--rule)}
.legend .swatch{vertical-align:-1px}
.legend-num{margin-top:8px}

/* Leaderboard: month progress under the KPI */
.lb-month-bar{height:4px;background:var(--track);margin-top:12px}
.lb-month-bar span{display:block;height:100%;background:var(--ink);transition:width .5s ease}

/* Leaderboard: habit cards, one per PAX (kept beyond the handoff) */
.lb-pax-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));column-gap:32px}
.lb-pax-card{padding:16px 0;border-bottom:1px solid var(--rule)}
.lb-pax-name{font:700 17px/1.1 var(--display);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.lb-dot-row{display:flex;gap:3px;margin-bottom:10px}
.lb-dot{width:10px;height:10px;background:var(--track);border:1px solid var(--rule)}
.lb-dot.partial{background:var(--rule)}
.lb-dot.filled-nq{background:var(--gold);border-color:var(--gold)}
.lb-dot.filled{background:var(--green);border-color:var(--green)}
.lb-dot.is-current{outline:1.5px solid var(--ink);outline-offset:1px}
.lb-mini-bar-track{height:4px;background:var(--track);margin-bottom:8px}
.lb-mini-bar-fill{height:100%;max-width:100%;background:var(--ink);transition:width .5s ease}
.lb-progress-line{display:flex;justify-content:space-between;align-items:center;gap:8px;font:600 11px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lb-progress-count{font:800 16px/1 var(--display);letter-spacing:.02em;color:var(--ink)}
.lb-progress-count.lb-complete{color:var(--green)}
.lb-status-tag{font:700 11px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;padding:3px 6px;white-space:nowrap}
.lb-status-done{background:var(--green);color:#fff}
.lb-status-needsq{background:var(--gold);color:var(--ink)}
.lb-status-track{border:1px solid var(--ink);color:var(--ink)}
.lb-status-behind{border:1px solid var(--rule);color:var(--ink)}
.lb-status-ghost{border:1px solid var(--rule);color:var(--muted)}
.lb-streak-badge{display:inline-flex;align-items:center;gap:4px;margin-top:10px;font:700 11px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--green)}

/* Leaderboard: year grid adds a streak column and a Q marker to the handoff's heat */
.heat{margin-top:12px}
.heat-inner{min-width:680px}
.heat-row{grid-template-columns:120px repeat(12,minmax(0,1fr)) 52px}
.heat-head .label{text-align:center;letter-spacing:.08em;padding-bottom:6px}
.heat-head .label:first-child{text-align:left}
.heat-streak{font:700 14px/28px var(--display);text-align:center;color:var(--muted)}
.cell.has-q{box-shadow:inset 0 -3px 0 var(--green)}
.heat-key{display:flex;flex-wrap:wrap;gap:6px 14px;letter-spacing:.08em}
.heat-key span{display:inline-flex;align-items:center;gap:6px}
.heat-key .cell{display:inline-block;width:12px;height:12px}

/* Who to Q: AO picker strip + selected AO */
.ao-picker{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:20px 0;border-bottom:2px solid var(--ink)}
.select{font:700 15px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:transparent;border:2px solid var(--ink);border-radius:0;padding:8px 12px;min-width:min(100%,260px)}
.ao-picker #params-note{margin-left:auto;letter-spacing:.1em}
.w2q-ao{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-top:40px}
.w2q-ao-name{margin:0;font:900 clamp(40px,7vw,64px)/.9 var(--display);letter-spacing:-.01em;text-transform:uppercase}

/* PAX detail: posting rhythm (one square per week) */
.rhythm-wrap{display:flex;flex-wrap:wrap;gap:16px 20px;align-items:flex-end;margin-top:20px}
.rhythm-month{display:flex;flex-direction:column;align-items:center;gap:6px}
.rhythm-month-label{font:600 10px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rhythm-dots{display:flex;gap:3px}
.rhythm-dot{display:inline-block;width:15px;height:15px;border:1px solid var(--rule)}
.rhythm-dot.p1{background:var(--rule)}
.rhythm-dot.p2{background:#8a9a78;border-color:#8a9a78}
.rhythm-dot.p3{background:var(--green);border-color:var(--green)}
.rhythm-dot.has-q{outline:2px solid var(--gold);outline-offset:1px}
.rhythm-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px}
.rhythm-legend > span{display:inline-flex;align-items:center;gap:8px}
.rhythm-legend .rhythm-dot{width:12px;height:12px}
.table tr.is-muted td{color:var(--muted)}

/* Info-dot (ⓘ) tooltips: f3InfoDot + f3InitInfoDots in data.js */
.info-dot{display:inline-block;margin:-4px -4px -4px 2px;padding:4px;border:0;background:none;color:var(--muted);font:400 13px/1 var(--ui);letter-spacing:0;text-transform:none;vertical-align:middle;cursor:help}
.info-dot:hover,.info-dot:focus-visible{color:var(--green)}
.tip-pop{position:absolute;z-index:100;max-width:min(280px,calc(100vw - 16px));padding:8px 10px;background:var(--ink);color:var(--paper);font:400 13px/1.4 var(--ui);letter-spacing:.01em;text-transform:none;text-align:left;pointer-events:none}
.tip-toggle{display:inline-flex;align-items:center;gap:6px}

/* Stacked-card tables: under 800px the wide AO/PAX/FNG tables become one card
   per row (name on top, fields as label/value pairs) instead of scrolling.
   Labels come from data-label, set by f3StackLabels. */
@media (max-width:800px){
  .table--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .table--stack,.table--stack tbody{display:block}
  .table--stack tr{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px 16px;padding:16px 0;border-bottom:1px solid var(--rule)}
  .table--stack td,.table--stack td.num,.table--stack td.nowrap{display:block;padding:0;border:0;min-width:0;text-align:left;white-space:normal}
  .table--stack td::before{content:attr(data-label);display:block;margin-bottom:5px;font:600 11px/1.2 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .table--stack td:first-child{grid-column:1/-1;font-size:20px}
  .table--stack td:first-child::before{content:none}
  .table--stack td.table-note{grid-column:1/-1;min-width:0}
  .table--stack tr:hover td{background:none}
}

/* Mission metrics: journey bars, three-list follow-ups */
.bar-row--wide{grid-template-columns:minmax(0,1.3fr) minmax(60px,1fr) 56px;align-items:center}
.bar-row--wide .bar-name{text-transform:none;letter-spacing:.02em;font-size:17px}
.bar-row--wide .bar-name .label{display:block;margin-top:4px}
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:32px 40px;margin-top:8px}
.list-head{margin:16px 0 4px;font:800 18px/1.1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.row .row-val{white-space:nowrap}
/* Narrow follow-up columns: the label drops under the name so long names never collide */
.trio .row{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}
.trio .row .row-name{overflow-wrap:anywhere}
.trio .row .label{grid-column:1;grid-row:2}
.trio .row .row-val{grid-column:2;grid-row:1/span 2;align-self:center}
.kpi .label{line-height:1.45}  /* two-line KPI labels need air; the handoff .label is line-height 1 */
.bar-row--wide .bar-name .label a{color:var(--green)}

/* Side-by-side sections: header rules line up. The note label wraps on the
   right instead of dropping under the title, and subgrid gives both headers
   in a row the same height (a shorter one sits on the shared bottom edge). */
.pair > .section{display:grid;grid-template-rows:subgrid;grid-row:span 2;align-content:start}
.pair .section-head{flex-wrap:nowrap;align-items:flex-end;align-self:end}
.pair .section-head h2{flex:0 0 auto}  /* the title keeps its line; the note wraps */
.pair .section-head > .label{flex:0 1 auto;min-width:0;text-align:right;line-height:1.4}

/* Who to Q: Site Q candidates. A stacked row puts the facts under the name
   (the trio lists use the same shape); a quiet divider starts past Site Qs. */
.row--stacked{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}
.row--stacked .row-name{overflow-wrap:anywhere}
.row--stacked .label{grid-column:1;grid-row:2;line-height:1.5}
.row--stacked .row-val{grid-column:2;grid-row:1/span 2;align-self:center}
.w2q-divider{padding:20px 0 8px;border-bottom:1px solid var(--rule)}

/* PAX: Potential Cotters, collapsed by default. The summary is the section
   head with a +/− marker; the native disclosure keeps it keyboard and
   screen-reader friendly with no script. */
.cotters > summary{cursor:pointer;list-style:none}
.cotters > summary::-webkit-details-marker{display:none}
.cotters > summary::after{content:"+";font:800 26px/1 var(--display);margin-left:12px;color:var(--ink)}
.cotters[open] > summary::after{content:"\2212"}
.cotters > summary:hover h2{color:var(--green)}
.cotters > summary > .label{margin-left:auto}