/* Health Index explorer. Values are the handoff's (README §8), authored in oklch. */

@font-face { font-family: 'Fira Sans'; font-weight: 300; font-style: normal; font-display: swap; src: url(../fonts/FiraSans-300.woff2) format('woff2'); }
@font-face { font-family: 'Fira Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/FiraSans-400.woff2) format('woff2'); }
@font-face { font-family: 'Fira Sans'; font-weight: 400; font-style: italic; font-display: swap; src: url(../fonts/FiraSans-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Fira Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/FiraSans-500.woff2) format('woff2'); }
@font-face { font-family: 'Fira Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/FiraSans-600.woff2) format('woff2'); }
@font-face { font-family: 'Fira Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/FiraMono-400.woff2) format('woff2'); }
@font-face { font-family: 'Fira Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/FiraMono-500.woff2) format('woff2'); }

:root {
  --ink: oklch(0.24 0.03 165);
  --ink-strong: oklch(0.18 0.03 165);
  --tooltip: oklch(0.22 0.03 165);
  --page: oklch(0.985 0.004 150);
  --card: oklch(0.99 0.003 150);
  --brand: oklch(0.36 0.08 162);
  --link: oklch(0.40 0.09 162);
  --text-2: oklch(0.32 0.025 165);
  --text-2b: oklch(0.34 0.025 165);
  --text-3: oklch(0.42 0.025 165);
  --muted-1: oklch(0.45 0.02 165);
  --muted-2: oklch(0.48 0.02 165);
  --muted-3: oklch(0.50 0.02 165);
  --axis: oklch(0.55 0.02 165);
  --nat-line: oklch(0.58 0.02 165);
  --border: oklch(0.80 0.015 165);
  --rule: oklch(0.86 0.01 165);
  --rule-soft: oklch(0.88 0.01 165);
  --rule-table: oklch(0.90 0.008 165);
  --grid: oklch(0.91 0.007 165);
  --tab-bg: oklch(0.965 0.007 165);
  --row-hover: oklch(0.94 0.015 165);
  --ring-off: oklch(0.62 0.015 165);
  --print-bg: oklch(0.93 0.008 165);
  --print-row: oklch(0.955 0.012 165);
  --sans: 'Fira Sans', system-ui, sans-serif;
  --mono: 'Fira Mono', ui-monospace, monospace;
  --shadow-menu: 0 12px 32px -12px oklch(0.3 0.03 165 / 0.28);
}

body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: var(--ink); }
button { font-family: inherit; color: inherit; }
input::placeholder { color: oklch(0.55 0.015 165); }
.mono { font-family: var(--mono); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

@page { size: A4; margin: 9mm; }

/* Views: the explorer (screen) and the sheet. body.pv shows the sheet on screen. */
.sheet, .sheetbar { display: none; }
body.pv { background: var(--print-bg); }
body.pv .screen { display: none; }
body.pv .sheet, body.pv .sheetbar { display: flex; }
@media print {
  body { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .screen, .sheetbar { display: none !important; }
  /* Keep the 794px layout and scale it into A4's printable width (210mm less the 9mm
     margins, 726px) rather than letting it reflow narrower, which pushes the footer
     onto a second page. */
  .sheet { display: flex !important; width: 794px !important; zoom: 0.914; min-height: 0 !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; }
  .homing { display: none !important; }
}


/* ---------- shell */
.screen { max-width: 1400px; margin: 0 auto; padding: 26px 44px 40px; box-sizing: border-box; }
.hdr { display: flex; justify-content: space-between; align-items: center; gap: 20px 32px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--rule-soft); }
.hdr-brand { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.wordmark { font-weight: 600; font-size: 15px; letter-spacing: 0.01em; color: var(--brand); }
.hdr-title { font-size: 14px; color: var(--muted-2); }
.hdr-tools { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.textbtn { background: none; border: none; padding: 4px 0; cursor: pointer; color: var(--link); font-size: 13px; }
.hdr-tools .textbtn { display: flex; align-items: center; gap: 7px; }
.hdr-tools .textbtn:hover, .hdr-tools .textbtn[aria-expanded="true"] { color: var(--ink); }

.search { position: relative; width: 340px; max-width: 100%; }
.search-box { display: flex; align-items: center; gap: 10px; border-bottom: 1.5px solid var(--ink); padding: 6px 2px; }
.search-box svg { flex: none; }
.search-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: 400 15px var(--sans); color: var(--ink); padding: 2px 0; }
.keyhint { font: 400 11px var(--mono); color: oklch(0.55 0.015 165); border: 1px solid oklch(0.85 0.01 165); border-radius: 3px; padding: 1px 5px; }
.results { position: absolute; top: calc(100% + 6px); right: 0; width: 400px; max-width: 90vw; background: var(--card); border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow-menu); z-index: 30; padding: 6px; box-sizing: border-box; margin: 0; list-style: none; }
.result { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 5px; cursor: pointer; }
.result[aria-selected="true"] { background: var(--row-hover); }
.result-name { flex: 1; min-width: 0; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-name b { font-weight: 600; }
.result-via { color: var(--muted-2); }
.result-st { flex: none; font: 400 11.5px var(--mono); color: var(--muted-3); }
.noresults { padding: 10px; font-size: 14px; color: var(--muted-2); }
.pill { flex: none; min-width: 44px; text-align: center; box-sizing: border-box; height: 20px; padding: 0 6px; border-radius: 4px; font: 500 10.5px/20px var(--mono); letter-spacing: 0.04em; color: #fff; }

.loading { padding: 120px 0; font: 400 13px var(--mono); color: var(--muted-3); }

/* ---------- title block */
.title { display: flex; flex-direction: column; gap: 10px; padding-top: 30px; }
.title-row { display: flex; align-items: center; gap: 10px; position: relative; }
.typebtn { display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 8px 0 9px; border: none; border-radius: 5px; cursor: pointer; color: #fff; font: 500 11.5px/26px var(--mono); letter-spacing: 0.05em; }
.typebtn svg { display: block; }
.context { font-size: 15px; color: var(--muted-1); }
h1.name { margin: 0; font-weight: 500; font-size: 68px; line-height: 1.0; letter-spacing: -0.025em; text-wrap: balance; }
/* On a phone the share button keeps to the right of the name, which wraps instead, so
   the menu always opens leftward from the same corner. */
.name-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.name-row h1.name { min-width: 0; }

/* ---------- share */
.share { position: relative; flex: none; }
.share-name { display: none; margin-bottom: 2px; }
/* The header's Share always has the search to its right, at least as wide as the menu,
   and nothing to rely on to its left once the tools wrap under the title. */
.share-hdr .sharemenu { right: auto; left: 0; }
.sharebtn { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 15px 0 13px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; }
.sharebtn[aria-expanded="true"] { border-color: var(--ink); background: var(--tab-bg); }
/* A tap leaves :hover set on a touch screen until the next tap elsewhere. */
@media (hover: hover) { .sharebtn:hover { border-color: var(--ink); background: var(--tab-bg); } }
.sharemenu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 21; width: 320px; box-sizing: border-box; padding: 12px 14px 8px; display: flex; flex-direction: column; gap: 10px; background: var(--card); border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 14px 36px -14px oklch(0.3 0.03 165 / 0.3); }
.sharemenu-head .eyebrow { font-size: 11.5px; }
.sharemenu-link { display: flex; gap: 6px; }
.sharemenu-link input { flex: 1 1 auto; min-width: 0; height: 34px; box-sizing: border-box; padding: 0 9px; border: 1px solid var(--rule); border-radius: 5px; background: var(--page); color: var(--text-3); font: 400 12px var(--mono); }
.sharecopy { flex: none; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: none; border-radius: 5px; background: var(--ink); color: var(--page); font-size: 13px; font-weight: 500; cursor: pointer; }
.sharecopy:hover { background: var(--brand); }
.sharecopy.done { background: var(--brand); }
.sharemenu-items { display: flex; flex-direction: column; border-top: 1px solid var(--rule-soft); padding-top: 4px; }
.shareitem { display: flex; align-items: center; gap: 11px; padding: 8px 4px; border: none; border-radius: 5px; background: none; color: var(--ink); font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; }
.shareitem:hover { background: var(--row-hover); color: var(--ink); }
.shareglyph { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border-radius: 5px; background: var(--tab-bg); color: var(--ink); font: 600 12px/1 var(--sans); }
.menu-scrim { position: fixed; inset: 0; z-index: 20; }
.typemenu { position: absolute; top: 34px; left: 0; z-index: 21; width: 340px; background: var(--card); border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 14px 36px -14px oklch(0.3 0.03 165 / 0.3); padding: 10px 14px 12px; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; }
.typemenu-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 6px; }
.typemenu-head .eyebrow { font-size: 12px; }
.typemenu-head span:last-child { font-size: 11.5px; color: var(--muted-3); }
.typeitem { display: flex; align-items: center; gap: 12px; background: none; border: none; padding: 6px 0; cursor: pointer; text-align: left; width: 100%; }
.typeitem-pill { flex: none; width: 54px; box-sizing: border-box; text-align: center; height: 21px; border-radius: 4px; font: 500 10.5px/19px var(--mono); letter-spacing: 0.04em; border: 1px solid; }
.typeitem-label { flex: 1; font-size: 15px; }
.typeitem-count { font: 400 12px var(--mono); color: var(--muted-3); }
.typemenu-desc { font-size: 12.5px; line-height: 1.45; color: var(--muted-2); padding-top: 8px; border-top: 1px solid oklch(0.92 0.006 165); margin-top: 6px; text-wrap: pretty; }

/* ---------- hero */
.hero { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: stretch; padding-top: 18px; }
.hero-left { flex: 1 1 230px; max-width: 290px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 8px 0 10px; }
.intro { display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.intro p { margin: 0; }
.intro b { font-weight: 600; color: var(--ink); }
.legend { display: flex; flex-direction: column; gap: 12px; }
.legend-title { font-size: 13px; line-height: 1.4; color: oklch(0.40 0.025 165); }
.legend-title div { font-weight: 500; color: var(--ink); }
.legend-ramp { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; }
.legend-ramp li { display: flex; align-items: center; gap: 10px; }
.legend-ramp span:first-child { flex: none; width: 30px; height: 14px; }
.legend-ramp span:last-child { font: 400 11.5px var(--mono); color: oklch(0.38 0.02 165); }
.legend-keys { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; color: var(--text-3); }
.legend-keys > span { display: flex; align-items: center; gap: 10px; }
.zonekey { flex: none; width: 30px; display: flex; justify-content: center; }
.zonekey span { width: 12px; height: 12px; border-radius: 50%; border: 1.3px dashed oklch(0.30 0.03 165); background: oklch(0.24 0.03 165 / 0.06); }
.hero-map { flex: 3 1 640px; min-width: 0; }
.relative { position: relative; }
svg.chart { width: 100%; height: auto; display: block; overflow: visible; }

.tip { position: absolute; pointer-events: none; background: var(--tooltip); color: oklch(0.98 0.004 150); border-radius: 6px; padding: 8px 11px; display: flex; flex-direction: column; gap: 3px; white-space: nowrap; z-index: 6; }
.tip-title { font-size: 13.5px; font-weight: 500; }
.tip-line { font: 400 12px var(--mono); color: oklch(0.85 0.02 165); }
.tip-go { pointer-events: auto; cursor: pointer; }
.tip-act { margin-top: 4px; padding-top: 6px; border-top: 1px solid oklch(0.98 0.004 150 / 0.2); font-size: 13px; font-weight: 500; color: oklch(0.98 0.004 150); }
.tip-head { display: flex; align-items: center; gap: 8px; }
.tip-head .tip-pill { height: 16px; padding: 0 5px; border-radius: 3px; font: 500 9.5px/16px var(--mono); color: #fff; }
.tip-head .tip-name { font-size: 14px; font-weight: 500; }
.tip-row { display: flex; gap: 12px; font: 400 12px var(--mono); color: oklch(0.85 0.02 165); }

/* ---------- tabs and panel */
/* The tabs are stretched to one height below a 28px band, and the selected tab reaches
   up through the band, so it stands exactly 28px above the others whatever its larger
   type makes of its height. The hint sits in the band over the tabs after it, in line
   with the label of tab --j of --n (its 1px border and 14px padding in), the tabs being
   equal shares of the width less the gaps. */
.tabs-wrap { position: relative; }
.tabs { display: flex; align-items: stretch; gap: 6px; margin-top: 16px; padding-top: 28px; position: relative; z-index: 2; }
.tab { flex: 1 1 0; min-width: 0; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; margin-bottom: -1px; background: var(--tab-bg); border: 1px solid var(--border); border-radius: 10px 10px 0 0; box-sizing: border-box; container-type: inline-size; }
.tab[aria-selected="true"] { background: var(--page); border-bottom-color: var(--page); padding: 16px 16px 18px; margin-top: -28px; }
.tabs-hint { position: absolute; top: 0; height: 28px; right: 0; left: calc((100% - (var(--n) - 1) * 6px) / var(--n) * var(--j) + 6px * var(--j) + 15px); display: flex; align-items: center; gap: 8px; font-size: 13px; font-style: italic; color: var(--muted-2); pointer-events: none; }
.tabs-hint > span:first-child { flex: none; }
.tabs-hint-line { flex: none; width: 26px; height: 9px; background: linear-gradient(currentColor, currentColor) left center / calc(100% - 2px) 1.2px no-repeat; position: relative; }
.tabs-hint-line::after { content: ''; position: absolute; right: 1px; top: 50%; width: 6px; height: 6px; border-top: 1.2px solid currentColor; border-right: 1.2px solid currentColor; transform: translateY(-50%) rotate(45deg); }
.tab-label { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tab-val { font: 500 34px/1 var(--mono); letter-spacing: -0.03em; }
/* Sized to the tab: "High blood pressure" and "33.3%" are the widest a tab holds, and a
   narrow desktop tab is ~130px inside. */
.tab[aria-selected="true"] .tab-label { font-weight: 600; font-size: max(14px, min(16px, 10cqw)); }
.tab[aria-selected="true"] .tab-val { font-size: min(46px, 33cqw); }
.tab-val.na { color: var(--muted-3); }
.tab-delta { display: flex; align-items: baseline; gap: 5px; font: 400 13.5px var(--mono); min-height: 17px; white-space: nowrap; overflow: hidden; max-width: 100%; }
.tone-better { color: oklch(0.45 0.10 155); }
.tone-worse { color: oklch(0.50 0.15 28); }
.tone-muted { color: var(--muted-3); }
.tab-n { font-size: 12px; color: var(--muted-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.panel { border: 1px solid var(--border); border-radius: 0 0 12px 12px; padding: 32px 32px 44px; }
.panelgrid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px 56px; align-items: start; }
.rail { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 26px; border-top: 1.5px solid var(--ink); padding-top: 14px; }
.rail-head { display: flex; flex-direction: column; gap: 10px; }
h2.h2 { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; }
.body15 { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-2b); text-wrap: pretty; }
.basis { font: 400 12px/1.55 var(--mono); color: var(--muted-1); text-wrap: pretty; }
.rail-tab { display: flex; flex-direction: column; gap: 10px; }
.raillist { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.railitem { display: flex; gap: 10px; align-items: flex-start; background: none; border: none; padding: 0; text-align: left; cursor: pointer; width: auto; max-width: 100%; }
.dot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; box-sizing: border-box; border: 1.3px solid; }
.railitem.off { cursor: default; }
.railitem-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
.railitem-label { font-size: 14px; line-height: 1.4; white-space: nowrap; }
.railitem-note { font-size: 12px; line-height: 1.4; color: var(--muted-2); }

.rows { display: flex; flex-direction: column; gap: 56px; min-width: 0; }
.row { display: flex; flex-direction: column; gap: 22px; border-top: 1px solid var(--rule); padding-top: 14px; }
.row-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px 32px; }
.row-top .rowhead { flex: 1 1 320px; }
.rowhead { display: flex; flex-direction: column; gap: 6px; max-width: 720px; min-width: 0; }
.eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }
.ring { flex: none; width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box; border: 1.3px solid var(--ring-off); }
.head { font-size: 22px; line-height: 1.3; letter-spacing: -0.005em; text-wrap: balance; }
.sub { font-size: 14.5px; line-height: 1.45; color: var(--text-3); text-wrap: pretty; }
.seg-wrap { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.seg-wrap > span { font-size: 12px; color: var(--muted-2); }
.seg { display: flex; border: 1px solid var(--border); border-radius: 6px; padding: 2px; gap: 2px; }
.seg button { border: none; border-radius: 4px; padding: 6px 12px; font-size: 13.5px; white-space: nowrap; cursor: pointer; background: transparent; color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--page); }
.cmp-heads { display: grid; grid-template-columns: 45% 55%; align-items: baseline; }
.cmp-heads span { font-size: 14px; font-weight: 500; }
.cmp-heads span:first-child { padding-left: 4.6%; }
.gap6 { display: flex; flex-direction: column; gap: 6px; }
.chartnote { margin: -12px 0 0; max-width: 720px; font-size: 13px; line-height: 1.45; color: var(--muted-1); text-wrap: pretty; }


.methodnote { display: flex; gap: 12px; align-items: stretch; max-width: 720px; }
.methodnote > span { flex: none; width: 0; border-left: 1px dashed var(--axis); margin: 2px 4px; }
.methodnote div div:first-child { font-size: 13.5px; font-weight: 500; color: oklch(0.30 0.025 165); }
.methodnote div div:last-child { font-size: 14px; line-height: 1.5; color: var(--text-2b); text-wrap: pretty; }

/* ---------- about */
.about { padding: 60px 33px 12px; }
.about-left { display: flex; flex-direction: column; gap: 10px; border-top: 1.5px solid var(--ink); padding-top: 14px; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 26px 32px; }
.stat { display: flex; flex-direction: column; gap: 5px; }
.stat-label { font-size: 13px; color: var(--text-3); }
.stat-v { letter-spacing: -0.02em; }
.stat-v.mono { font: 400 26px/1.05 var(--mono); }
.stat-v.sans { font: 400 25px/1.05 var(--sans); }
.stat-sub { font-size: 12.5px; color: var(--muted-2); }
.pyr-wrap { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: flex-end; }
.pyr { flex: 1 1 420px; max-width: 600px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pyr-row, .pyr-headrow { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); }
.pyr-headrow { font-size: 12.5px; color: var(--text-3); padding-bottom: 2px; }
.pyr-headrow span:first-child { text-align: right; }
.pyr-row { align-items: center; height: 18px; }
.pyr-bar { position: relative; height: 14px; }
.pyr-bar.m { display: flex; justify-content: flex-end; }
.pyr-bar .fill { height: 100%; }
.pyr-bar .tick { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--ink); }
.pyr-label { text-align: center; font: 400 11px var(--mono); color: var(--text-3); }
.pyr-tip { position: absolute; bottom: calc(100% + 6px); z-index: 5; pointer-events: none; background: var(--tooltip); color: oklch(0.98 0.004 150); border-radius: 6px; padding: 7px 10px; display: flex; flex-direction: column; gap: 3px; white-space: nowrap; }
.pyr-tip span:first-child { font-size: 13px; font-weight: 500; }
.pyr-tip span:last-child { font: 400 11.5px var(--mono); color: oklch(0.85 0.02 165); }
.pyr-side { flex: 1 1 220px; max-width: 320px; display: flex; flex-direction: column; gap: 14px; }
.pyr-keys { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--text-3); }
.pyr-keys > span { display: flex; align-items: center; gap: 8px; }
.pyr-note { font-size: 14px; line-height: 1.5; color: var(--text-2b); text-wrap: pretty; }

/* ---------- footer */
.foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px 36px; padding: 28px 4px 0; font-size: 12px; line-height: 1.55; color: var(--muted-1); text-wrap: pretty; }
.foot-block { display: flex; flex-direction: column; gap: 6px; }
.foot-block div:first-child { font-weight: 500; color: oklch(0.30 0.025 165); }
.foot-bar { grid-column: 1 / -1; border-top: 1px solid var(--rule-table); padding-top: 12px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; }
.foot-bar .textbtn { font: inherit; }
a.wordmark, a.hdr-title { text-decoration: none; }
a.wordmark:hover, a.hdr-title:hover { color: var(--ink); }

/* ---------- the registration gate (handoff README §5.4, inline). The tabs, panel and
   About stay rendered under the card, blurred and inert, so nothing moves on unlock. */
.gate-zone { position: relative; }
.gated { transition: filter 0.6s ease, opacity 0.6s ease; }
.gated.on { filter: blur(7px); opacity: 0.6; max-height: 780px; overflow: hidden; user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 45%, transparent 100%); }
.gate-layer { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: flex; justify-content: center; padding: 96px 20px 0; pointer-events: none; }
.gate-card { pointer-events: auto; width: 100%; max-width: 540px; box-sizing: border-box; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 24px 60px -24px oklch(0.3 0.03 165 / 0.35); padding: 30px 32px 26px; display: flex; flex-direction: column; gap: 22px; }
.gate-top { display: flex; flex-direction: column; gap: 8px; }
.gate-head { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; }
.gate-sub { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-2b); text-wrap: pretty; }
.gate-form { display: flex; flex-direction: column; gap: 18px; }
.gate-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px 24px; }
.gate-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gate-field > span:first-child { font-size: 12.5px; color: var(--muted-1); }
.gate-field input { border: none; border-bottom: 1.5px solid var(--ink); border-radius: 0; outline: none; background: transparent; font: 400 16px var(--sans); color: var(--ink); padding: 6px 0; min-width: 0; width: 100%; box-sizing: border-box; }
.gate-field input:focus { border-bottom-color: var(--link); }
.gate-field input.bad { border-bottom-color: oklch(0.50 0.15 28); }
.gate-err { font-size: 12.5px; color: oklch(0.50 0.15 28); }
/* Off-screen, not display:none, which some form-filling bots skip. */
.gate-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.gate-consent { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13.5px; line-height: 1.45; color: var(--text-2); text-wrap: pretty; }
.gate-consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); cursor: pointer; }
.gate-foot { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding-top: 4px; }
.gate-btn { display: flex; align-items: center; gap: 10px; padding: 13px 22px; border: none; border-radius: 6px; background: var(--ink); color: var(--page); font-size: 15px; font-weight: 500; cursor: pointer; }
.gate-btn:hover { background: var(--brand); }
.gate-btn[disabled] { opacity: 0.7; cursor: progress; }
.gate-fine { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted-2); text-wrap: pretty; }
@media (max-width: 640px) { .gate-layer { padding: 40px 0 0; } .gate-card { padding: 24px 20px 22px; } }
@media (prefers-reduced-motion: reduce) { .gated { transition: none; } }
@media print { .gate-layer { display: none !important; } }

@media (max-width: 1100px) {
  .panelgrid { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; }
  .raillist { flex-direction: row; flex-wrap: wrap; column-gap: 28px; }
}

/* ---------- print sheet */
.sheetbar { position: sticky; top: 0; z-index: 40; justify-content: center; align-items: center; gap: 24px; flex-wrap: wrap; padding: 11px 20px; background: var(--ink); color: oklch(0.96 0.005 150); font-size: 13.5px; }
.sheetbar button { border-radius: 5px; cursor: pointer; font-size: 13px; }
.sheetbar .back { background: none; border: 1px solid oklch(0.6 0.02 165); padding: 5px 12px; color: oklch(0.96 0.005 150); }
.sheetbar .print { background: oklch(0.96 0.005 150); border: none; padding: 6px 13px; color: var(--ink); font-weight: 500; }
.sheet { width: 794px; min-height: 1123px; margin: 28px auto 48px; padding: 21px 34px 14px; box-sizing: border-box; background: #fff; box-shadow: 0 1px 2px oklch(0.3 0.03 165 / 0.1), 0 22px 50px -22px oklch(0.3 0.03 165 / 0.35); flex-direction: column; justify-content: space-between; gap: 5px; color: var(--ink); font-size: 11.5px; line-height: 1.45; }
.sh-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 7px; border-bottom: 1.5px solid var(--ink); font-size: 10.5px; color: oklch(0.40 0.025 165); }
.sh-top > span:first-child { display: flex; gap: 10px; align-items: baseline; }
.sh-top b { font-weight: 600; font-size: 12px; color: var(--brand); }
.sh-id { display: flex; flex-direction: column; gap: 5px; }
.sh-id-row { display: flex; align-items: center; gap: 8px; }
.sh-pill { height: 17px; padding: 0 6px; border-radius: 3px; font: 500 9.5px/17px var(--mono); letter-spacing: 0.05em; color: #fff; }
.sh-context { font-size: 11.5px; color: var(--text-3); }
.sh-name { font-size: 28px; font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; }
.sh-lede { font-size: 12px; color: var(--text-2b); text-wrap: pretty; }
.sh-measure { border-top: 1px solid var(--rule); padding-top: 7px; font-size: 10.5px; line-height: 1.45; color: oklch(0.40 0.025 165); text-wrap: pretty; }
.sh-measure b { font-size: 12.5px; font-weight: 500; color: var(--ink); }
.sh-grid { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 22px; align-items: start; }
.sh-col { display: flex; flex-direction: column; gap: 6px; }
.sh-legend { display: flex; flex-direction: column; gap: 4px; }
.sh-legend-title { font-size: 10px; color: oklch(0.40 0.025 165); }
.sh-legend-title b { font-weight: 500; color: var(--ink); }
.sh-legend-ramp { display: flex; gap: 2px; }
.sh-legend-ramp > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sh-legend-ramp > div span:first-child { height: 8px; }
.sh-legend-ramp > div span:last-child { font: 400 8.5px var(--mono); color: oklch(0.40 0.02 165); white-space: nowrap; }
.sh-table-row { display: grid; grid-template-columns: minmax(0, 1.75fr) 0.7fr 1.15fr 1.05fr 0.7fr; gap: 8px; }
.sh-table-head { padding: 6px 8px 5px; border-bottom: 1px solid var(--ink); font-size: 9.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-1); }
.sh-table-body { align-items: baseline; padding: 3px 8px; border-bottom: 1px solid var(--rule-table); }
.sh-table-body.on { background: var(--print-row); }
.sh-table-body.on .sh-label { font-weight: 600; }
.sh-label { font-size: 12px; white-space: nowrap; }
.sh-pop { font: 400 9px var(--mono); color: var(--muted-2); }
.sh-val { font: 500 15px/1 var(--mono); letter-spacing: -0.02em; text-align: right; }
.sh-val.na { color: var(--muted-3); }
.sh-delta { font: 400 10px var(--mono); white-space: nowrap; }
.sh-rank { font: 400 10.5px var(--mono); }
.sh-nat { font: 400 10.5px var(--mono); text-align: right; color: oklch(0.40 0.02 165); }
.right { text-align: right; }
.sh-tnote { font-size: 9.5px; color: var(--muted-1); padding: 6px 8px 0; text-wrap: pretty; }
.sh-block { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--rule); padding-top: 8px; }
.sh-eyebrow { font-size: 9.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-1); }
.sh-head { font-size: 14.5px; line-height: 1.3; text-wrap: balance; }
.sh-head-s { font-size: 12px; line-height: 1.3; text-wrap: balance; }
.sh-sub { font-size: 10px; color: oklch(0.40 0.025 165); }
.sh-cmp-heads { display: grid; grid-template-columns: 45% 55%; align-items: baseline; padding-top: 4px; font-size: 10.5px; font-weight: 500; }
.sh-cmp-heads span:first-child { padding-left: 4.6%; }
.sh-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; }
.sh-note9 { font-size: 9px; line-height: 1.35; color: oklch(0.40 0.025 165); text-wrap: pretty; }
.sh-note9 b { font-weight: 500; color: var(--ink); }
.sh-small { font-size: 9.5px; color: var(--text-3); text-wrap: pretty; }
.sh-sex-row { display: grid; grid-template-columns: minmax(0, 1.6fr) 1fr 1fr; gap: 6px; }
.sh-sex-head { padding: 2px 0 3px; border-bottom: 1px solid var(--ink); font-size: 9px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-1); }
.sh-sex-body { align-items: baseline; padding: 2px 0; border-bottom: 1px solid var(--rule-table); }
.sh-sex-body > span:first-child { font-size: 11px; white-space: nowrap; }
.sh-sex-body .v { text-align: right; font: 400 12px var(--mono); }
.sh-sex-body .v span { font-size: 9px; color: var(--muted-3); }
.sh-stub { display: flex; gap: 8px; align-items: flex-start; border-top: 1px solid var(--rule); padding-top: 8px; }
.sh-stub .ring { width: 7px; height: 7px; margin-top: 3px; border-width: 1.2px; }
.sh-stub-body { display: flex; flex-direction: column; gap: 2px; }
.sh-stub-note { font-size: 11px; color: var(--text-2b); }
.sh-stub-why { font-size: 9.5px; color: var(--muted-2); text-wrap: pretty; }
.sh-about { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--rule); padding-top: 8px; margin-top: 4px; }
.sh-about-title { font-size: 13px; font-weight: 500; }
.sh-about-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 26px; }
.sh-about-head { font-size: 11.5px; line-height: 1.35; text-wrap: balance; }
.sh-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
.sh-stat { display: flex; flex-direction: column; gap: 1px; }
.sh-stat span:first-child { font-size: 9.5px; color: var(--text-3); }
.sh-stat span:last-child { font-size: 13.5px; line-height: 1.15; letter-spacing: -0.02em; }
.sh-stat .mono { font-family: var(--mono); }
.sh-pyr-head { font-size: 10.5px; padding-bottom: 3px; text-wrap: balance; }
.sh-pyr-row, .sh-pyr-headrow { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); }
.sh-pyr-headrow { font-size: 9.5px; color: var(--text-3); }
.sh-pyr-headrow span:first-child { text-align: right; }
.sh-pyr-row { align-items: center; height: 8px; }
.sh-pyr-row .pyr-bar { height: 6.5px; }
.sh-pyr-row .pyr-bar .tick { top: -1.5px; bottom: -1.5px; width: 1.5px; }
.sh-pyr-row .pyr-label { font-size: 8.5px; }
.sh-foot { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; border-top: 1px solid var(--rule); font-size: 8.5px; line-height: 1.4; color: var(--text-3); text-wrap: pretty; }
.sh-foot-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 4px; border-top: 1px solid var(--rule-table); }
.sh-foot-bar > span:first-child { flex: 1; min-width: 0; font-size: 10px; color: oklch(0.30 0.025 165); }
.sh-foot-bar a { color: var(--brand); font-family: var(--mono); font-size: 9.5px; }
.sh-foot-bar > span:last-child { flex: none; white-space: nowrap; font-family: var(--mono); font-size: 8.5px; }

/* Six tabs stop fitting well before a phone, and from a tablet down the strip scrolls
   sideways. A scrolling folder-tab row slides past the panel it belongs to and severs
   the two, so here the tabs stop being tabs: a carousel of whole cards, the selected
   one outlined, above a panel that is a card in its own right. */
@media (max-width: 980px) {
  .tabs { align-items: stretch; gap: 8px; margin-top: 36px; margin-bottom: 14px; padding-top: 0; padding-bottom: 2px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  /* The strip is a carousel here, so the hint is a line above it, pointing along it. */
  .tabs-hint { top: -24px; height: 18px; left: auto; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab, .tab[aria-selected="true"] { flex: 1 0 128px; scroll-snap-align: center; padding: 10px 12px 12px; gap: 5px; margin-top: 0; margin-bottom: 0; border-radius: 10px; }
  .tab[aria-selected="true"] { background: var(--card); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
  .tab-label, .tab[aria-selected="true"] .tab-label { white-space: normal; line-height: 1.25; min-height: 2.5em; font-size: 13.5px; }
  .tab-val, .tab[aria-selected="true"] .tab-val { font-size: 28px; }
  .tab-delta { font-size: 12px; white-space: normal; line-height: 1.25; }
  .tab-n { white-space: normal; font-size: 11.5px; }
  .panel { border-radius: 12px; }
}

/* ---------- phones. The charts switch to their stacked, pixel-size drawings at the
   container width config.NARROW names, which this breakpoint lands under. */
.cmp-head { font-size: 14px; font-weight: 500; padding-top: 6px; }
.legend-scale { display: none; flex-direction: column; gap: 4px; padding: 0 14px 0 10px; }
.legend-scale > div:first-child { display: flex; height: 14px; }
.legend-scale > div:first-child span { flex: 1; }
.legend-scale > div:last-child { position: relative; height: 14px; font: 400 11px var(--mono); color: oklch(0.38 0.02 165); }
.legend-scale > div:last-child span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.map-zone { padding: 0 16px; text-align: right; font-size: 12.5px; font-weight: 500; color: oklch(0.30 0.03 165); }
.trend-key { display: flex; flex-wrap: wrap; gap: 4px 18px; padding-bottom: 6px; font-size: 13px; color: var(--text-3); }
.trend-key span { display: flex; align-items: center; gap: 7px; }
.trend-readout { top: 0; left: 0; right: 0; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 6px 10px; white-space: normal; }
@media (max-width: 640px) {
  /* clip, not hidden: a tooltip near the edge is cut rather than widening the page,
     and no scroll container is made to break the tabs' and rail's positioning. */
  .screen { padding: 16px 16px 32px; overflow-x: clip; }
  .hdr { gap: 10px; padding-bottom: 14px; }
  .hdr-tools { width: 100%; }
  .search { width: 100%; }
  .results { left: 0; right: 0; width: auto; max-width: none; }
  /* The sheet is a fixed 794px A4 page, and there is no keyboard to press "/" on. */
  .hdr-tools .textbtn, .keyhint { display: none; }
  .title { padding-top: 20px; }
  h1.name { font-size: clamp(36px, 11vw, 68px); overflow-wrap: anywhere; }
  .share-hdr { display: none; }
  .share-name { display: block; }
  .sharebtn { padding: 0 11px; }
  .sharemenu { width: min(320px, calc(100vw - 32px)); }
  .typemenu { width: min(340px, calc(100vw - 32px)); }

  /* Intro, then the map, then its legend: the legend reads against the map. A grid,
     not a flex column, which sizes the map's box off the SVG's 300x150 fallback. */
  .hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .hero-left { display: contents; }
  .intro { order: 1; }
  .hero-map { order: 2; margin: 0 -16px; }
  .legend { order: 3; gap: 10px; }
  .legend-ramp { display: none; }
  .legend-scale { display: flex; }
  .legend-keys { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; }

  .tabs { margin: 36px -16px 12px; padding: 0 16px 2px; scroll-padding-inline: 16px; }
  .panel { padding: 20px 16px 32px; }
  .rows { gap: 44px; }
  .head { font-size: 20px; }
  .seg { flex-wrap: wrap; max-width: 100%; }
  .seg button { white-space: normal; text-align: left; }

  .about { padding: 44px 0 8px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  .stat-v.mono { font-size: 22px; }
  .stat-v.sans { font-size: 21px; }
  .pyr { flex-basis: 100%; }
  .foot { grid-template-columns: minmax(0, 1fr); padding-top: 24px; }
}