/* Benchmark page, on top of style.css (shared tokens, nav, theme button).
   Series colours: one fixed hue per method, validated with the dataviz palette checker against --surface-solid in both
   modes (adjacent pairs): --s1 ours, --s2 "rain stays put", --s3 "rain moves, unchanged", --s4 reference model, --s5 spare.
   Explainer squares: --hit, --miss, --fa (each also has its own shape). */
:root { --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #a06ae0;
        --hit: #3987e5; --miss: #e0a96a; --fa: #d55181; --rain: #3987e5; }
:root[data-theme='light'] { --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #8f5ad6;
                            --hit: #2a78d6; --miss: #c97a12; --fa: #c63d72; --rain: #2a78d6; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) { --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #8f5ad6;
                            --hit: #2a78d6; --miss: #c97a12; --fa: #c63d72; --rain: #2a78d6; }
}

/* the site's content width and gutter (style.css --wrap), as every other page: the h1 never moves between pages */
.page { max-width: var(--wrap); margin: 0 auto; padding: 28px var(--gutter-r) 0 var(--gutter-l); }
.page h1 { font-size: 30px; font-weight: 650; letter-spacing: -0.015em; margin: 8px 0 6px; }
.page h2 { font-size: 23px; font-weight: 650; letter-spacing: -0.015em; margin: 0 0 6px; }
.page h3 { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.page p { margin: 0 0 10px; }
.lede { color: var(--text-dim); max-width: 64ch; font-size: 16px; }
.note { color: var(--text-dim); font-size: 13.5px; max-width: 72ch; }
.view-note:empty { display: none; }
/* sections: a rule and air above each, a title, then a subtitle set apart from body text */
.bench { margin-top: 52px; padding-top: 30px; border-top: 1px solid var(--border); }
.page .sub { font-size: 15.5px; line-height: 1.5; color: var(--text-dim); max-width: 62ch; margin: 0 0 16px; }

/* formulas: one look everywhere (callouts, explainer cells, worked numbers) */
.math { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .92em; font-variant-numeric: tabular-nums;
        color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.formula { display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 4px; padding: 10px 14px; border-radius: 10px;
           background: color-mix(in srgb, var(--accent) 8%, var(--surface-solid)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
           font-size: 14.5px; font-variant-numeric: tabular-nums; color: var(--text); max-width: 100%; }
.formula .lhs { font-weight: 700; color: var(--accent); }
.formula .eq { color: var(--text-dim); }
.formula .frac { display: inline-flex; flex-direction: column; align-items: stretch; text-align: center; }
.formula .frac > span:first-child { padding: 0 4px 3px; border-bottom: 1.5px solid currentColor; }
.formula .frac > span:last-child { padding: 3px 4px 0; }

/* ---------- charts ---------- */
.bench .controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 2px; }
.bench .seg { display: inline-flex; flex-wrap: wrap; gap: 2px; background: color-mix(in srgb, var(--text) 4%, transparent);
              border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.bench .seg button { padding: 5px 13px; border-radius: 999px; color: var(--text-dim); font-size: 13.5px; font-weight: 500; min-height: 34px;
                     white-space: nowrap; border: 1px solid transparent; transition: background-color .15s, color .15s, border-color .15s; }
.bench .seg button:hover { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }
.bench .seg button.on, .bench .seg button.on:hover { background: color-mix(in srgb, var(--accent) 15%, var(--surface-solid));
                                                      color: color-mix(in srgb, var(--accent) 75%, var(--text));
                                                      border-color: color-mix(in srgb, var(--accent) 38%, transparent); font-weight: 600; }
/* what the selected metric means: a callout, not body text */
.callout { margin: 12px 0 10px; padding: 9px 12px 9px 14px; max-width: 72ch; border-radius: 0 10px 10px 0;
           background: var(--surface-2); border-left: 3px solid var(--accent); font-size: 13.5px; }
.callout-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 2px; }
.callout-head b { font-weight: 650; font-size: 14px; }
.callout .math { white-space: normal; }
.page .callout p { margin: 0; color: var(--text-dim); }
.chart { position: relative; min-height: 120px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.chart svg:focus { outline: none; }
.chart svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.chart .empty { display: flex; align-items: center; justify-content: center; height: 200px; border: 1px dashed var(--border); border-radius: 8px; padding: 0 16px; text-align: center; }
.tip { position: absolute; top: 6px; pointer-events: none; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 12px;
       padding: 9px 12px; font-size: 12.5px; line-height: 1.55; min-width: 170px; box-shadow: var(--shadow); z-index: 2; }
.tip > .note:first-child { font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 3px; }
.tip .row { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.tip .row b { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.tip .note { font-size: 12px; }
.key { display: inline-block; width: 16px; height: 0; border-top: 3px solid; border-radius: 2px; flex: none; }
.key.dash { border-top-style: dashed; }
/* legend: tidy chips (colour dot, bold name, one-line description); click to show or hide a series */
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; margin: 0; }
.legend button { display: inline-flex; align-items: baseline; gap: 6px; border: 0; border-radius: 999px; padding: 5.5px 8px; background: none;
                 font-size: 13px; min-height: 32px; color: var(--text); transition: opacity .15s, background-color .15s; }
.legend button:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.legend button b { font-weight: 600; }
.legend button small { color: var(--text-faint); font-size: 12px; }
.legend button small::before { content: '· '; }
.legend .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); align-self: center; }
.legend .dot.ring { background: transparent; border: 2px solid var(--c); box-shadow: none; }
.legend button[aria-pressed='false'] { opacity: .45; }
.legend button[aria-pressed='false'] b { text-decoration: line-through; }
/* a small kicker over each section title, in the hero's style */
.page .kicker { font-size: 12px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 2px; }
.bench h2 { font-size: 26px; letter-spacing: -0.015em; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
th, td { text-align: right; padding: 5px 8px; border-bottom: 1px solid var(--border); }
th:first-child, td:first-child { text-align: left; white-space: nowrap; }
th { font-weight: 600; color: var(--text-dim); }

/* ---------- chart + its explainer, side by side; details behind a discreet "i" ---------- */
.bench-body { margin-top: 6px; }
/* the explainer reads as on phones on every width: title, one paragraph, then the picture, in one column of a
   comfortable width (side by side, the text was a narrow strip and the picture a flat band) */
.bench-side { display: block; max-width: 720px; margin: 18px 0 0; }
/* how it's computed: folded; open, its formulas side by side, the text under them at full width */
details.more.how-computed { max-width: none; }
details.how-computed .formulas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 14px; }
details.how-computed .formulas .formula { display: flex; margin: 0; white-space: nowrap; overflow-x: auto; }
details.how-computed p { max-width: 90ch; }
.bench-main { min-width: 0; }
.bench-side { min-width: 0; }
.bench-side h3 { font-size: 17px; margin: 12px 0 6px; }
.page .bench-side .side-text { font-size: 15px; color: var(--text-dim); line-height: 1.55; margin: 0 0 14px; max-width: 64ch; }
.bench-side .nb-out { padding: 16px 18px; }
.page .thr-note { font-size: 14px; color: var(--text); margin: 8px 0 0; min-height: 1.4em; }
.bench .seg.thr button { display: inline-flex; align-items: center; gap: 6px; }
.bench .seg.thr button small { font-size: 11.5px; color: inherit; font-variant-numeric: tabular-nums; }
.chip { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 18%, transparent); }
.callout-head .tech { font-size: 12px; color: var(--text-faint); }
details.more { margin: 14px 0 0; max-width: 72ch; font-size: 13.5px; color: var(--text-dim); }
details.more summary { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; cursor: pointer; color: var(--text-dim); font-size: 13px; list-style: none; padding: 4px 0; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary:hover { color: var(--text); }
details.more summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
details.more .i { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; border: 1px solid currentColor; font: italic 600 11px/1 Georgia, serif; }
details.more[open] summary { color: var(--text); }
details.more > :not(summary) { margin: 8px 0 0; }
details.more p { font-size: 13.5px; }
.ex-state { font-size: 13px; font-weight: 600; color: var(--text); margin: 0 0 8px !important; font-variant-numeric: tabular-nums; }
.tl .fc > i { background: var(--surface-2); border: 1px solid var(--border); }
.tl .fc > i.y { background: color-mix(in srgb, var(--rain) 55%, transparent); border-color: var(--rain); }
.bench-side .tl { grid-template-columns: minmax(0, 1fr); }
.bench-side .tl .lbl { margin-top: 4px; }

/* ---------- explainer pieces (formerly the "How we score" notebook cells) ---------- */
.bench { counter-reset: nb; }
.nb { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px 28px; padding: 22px 0; border-top: 1px dashed var(--border); }
.bench .sub + .nb { border-top: 0; padding-top: 4px; }
.nb-text h3 { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.nb-text h3::before { counter-increment: nb; content: counter(nb); flex: none; display: grid; place-items: center; width: 24px; height: 24px;
                      border-radius: 50%; background: var(--accent); color: var(--bg); font-size: 12.5px; font-weight: 700; }
.nb-text p { font-size: 14.5px; max-width: 46ch; }
.nb-text b { font-weight: 600; }
.nb-out { background: var(--surface-solid); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 4px 10px 10px 4px; padding: 14px 16px; min-width: 0; }


.ex-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.ex-fig { margin: 0; min-width: 0; }
.ex-fig figcaption { font-size: 12.5px; color: var(--text-dim); margin-bottom: 4px; }
.ex-fig svg { display: block; width: 100%; height: auto; }
.ex-ctl { display: grid; grid-template-columns: auto minmax(0, 1fr) 3.5em; align-items: center; gap: 4px 10px; margin: 12px 0 4px; font-size: 13.5px; }
.ex-ctl label { color: var(--text-dim); }
.ex-ctl output { font-variant-numeric: tabular-nums; text-align: right; color: var(--text); }
.ex-ctl input[type='range'] { width: 100%; accent-color: var(--accent); min-height: 32px; margin: 0; }
.ex-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--text-dim); margin: 10px 0 6px; }
.ex-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ex-legend svg { width: 14px; height: 14px; flex: none; }
.ex-legend b { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; }
.ex-score { font-size: 13.5px; font-variant-numeric: tabular-nums; margin: 6px 0 0; }
.ex-score div { display: flex; flex-wrap: wrap; gap: 0 8px; padding: 3px 0; border-top: 1px solid var(--border); }
.ex-score div:first-child { border-top: 0; }
.ex-score dt { color: var(--text-dim); min-width: 7.5em; }
.ex-score dd { margin: 0; }
.ex-score dd b { font-weight: 600; color: var(--text); }


/* airport timeline */
.tl { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); align-items: center; gap: 4px 8px; }
.tl .lbl { font-size: 12.5px; color: var(--text-dim); line-height: 1.2; }
.tl .boxes { display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); gap: 2px; }
.tl .boxes > * { height: 34px; border-radius: 3px; display: grid; place-items: center; font-size: 11px; }
.tl .obs > i { background: var(--surface-2); border: 1px solid var(--border); }
.tl .obs > i.y { background: var(--rain); border-color: var(--rain); }
.tl .fc > button { background: var(--surface-2); border: 1px solid var(--border); padding: 0; }
.tl .fc > button[aria-pressed='true'] { background: color-mix(in srgb, var(--rain) 55%, transparent); border-color: var(--rain); }
.tl .fc > button:hover { border-color: var(--text-dim); }
.tl .res > i { height: 22px; font-style: normal; font-weight: 700; }
.tl .res > i.hit { color: var(--hit); } .tl .res > i.miss { color: var(--miss); } .tl .res > i.fa { color: var(--fa); }
.tl .times { display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); font-size: 11px; color: var(--text-faint); }
.tl .times span { grid-column: span 6; }


/* ---------- hero: Nimbo ---------- */
.hero { padding: 6px 0 4px; position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero .badge { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 14px; padding: 7px 14px 7px 11px; border-radius: 999px; font-size: 14.5px;
               font-weight: 600; color: var(--text); background: var(--surface-solid); border: 1px solid var(--border);
               box-shadow: 0 1px 8px color-mix(in srgb, var(--s1) 14%, transparent); }
.hero .badge .dot { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(120deg, var(--s1), #b05cc4);
                    box-shadow: 0 0 0 4px color-mix(in srgb, var(--s1) 18%, transparent); }
.hero .badge b { font-weight: 800; }
.hero .lede { margin-left: auto; margin-right: auto; }
.hero .cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 6px 0 0; }
.scroll-cue { display: none; }
/* the scoreboard's head: the shared page-head look (site.css), left-aligned, not a full-screen opening */
.page .hero.board-head { min-height: 0; display: block; text-align: left; padding: 28px 0 28px; border-bottom: 1px solid var(--border); }
.page .hero.board-head::before { display: none; }
.page .hero.board-head h1 { font-size: clamp(32px, 4.4vw, 46px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 600; margin: 0 0 12px; max-width: none; }
.page .hero.board-head .lede { font-size: 19px; margin: 0 0 20px; max-width: 64ch; }
.page .hero.board-head .lede b { font-weight: 600; }
.page .hero.board-head .cta { justify-content: flex-start; }
.nowrap { white-space: nowrap; }
.how-works { margin-top: 36px; }
.how-works h2 { margin: 0; }
/* desktop: the opening fills the screen, centred, over two soft glows in the model's colours; a cue to scroll */
@media (min-width: 761px) {
  .hero { min-height: calc(100svh - var(--nav-h) - 28px); display: flex; flex-direction: column; align-items: center; justify-content: center;
          text-align: center; padding: 0 0 56px; }
  .hero::before { content: ''; position: absolute; inset: -10% 0; z-index: -1; pointer-events: none;
                  background: radial-gradient(40% 45% at 28% 38%, color-mix(in srgb, var(--s1) 22%, transparent), transparent 70%),
                              radial-gradient(38% 42% at 74% 62%, color-mix(in srgb, #b05cc4 18%, transparent), transparent 70%); filter: blur(10px); }
  .page .hero h1 { font-size: clamp(48px, 6.2vw, 84px); line-height: 1.02; letter-spacing: -0.035em; max-width: 18ch; margin: 0 0 20px; text-wrap: balance; }
  .page .hero .badge { font-size: 16px; margin-bottom: 22px; }
  .page .hero .lede { font-size: 19px; max-width: 52ch; margin: 0 auto; }
  .page .hero .facts { width: 100%; margin: 34px auto 26px; }
  .page .hero .cta { justify-content: center; }
  .scroll-cue { display: block; position: absolute; bottom: 14px; left: 50%; width: 26px; height: 40px; margin-left: -13px; border-radius: 13px;
                border: 1.5px solid var(--text-faint); }
  .scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--text-faint);
                     animation: cue 1.8s ease-in-out infinite; }
  .how-works { margin-top: 24px; }
}
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue span { animation: none; } }
.hero .eyebrow { font-size: 12px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 6px 0 4px; }
.hero h1 { font-size: 38px; line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 12px; max-width: 20ch; }
.hero h1 .hl { background: linear-gradient(90deg, var(--s1), var(--fa)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede b { color: var(--text); }
.steps { list-style: none; padding: 0; margin: 22px 0 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.steps li { background: var(--surface-solid); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px 14px; display: grid;
            grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; }
.steps .step-art { grid-column: 1 / -1; margin: 0 0 10px; border-radius: 8px; background: var(--surface-2); padding: 6px; aspect-ratio: 16 / 10;
                   display: flex; align-items: center; justify-content: center; }
.steps .step-art svg { display: block; width: 100%; height: 100%; }
.steps li { align-content: start; }
.steps .step-n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--bg); font-size: 12px; font-weight: 700; }
.steps li > b { font-size: 16px; font-weight: 650; }
.page .steps p { grid-column: 1 / -1; margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-dim); }
.page .steps p b { color: var(--text); font-weight: 600; }
.facts { list-style: none; padding: 0; margin: 22px auto 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 720px;
         border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
         background: linear-gradient(135deg, color-mix(in srgb, var(--s1) 10%, var(--surface-solid)), var(--surface-solid) 60%); }
.facts li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 12px 16px; text-align: center; }
.facts li + li { border-left: 1px solid var(--border); }
.facts b { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums;
           background: linear-gradient(120deg, var(--s1), #b05cc4 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.facts span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; text-wrap: balance; }
.page .versus { font-size: 16px; max-width: 64ch; color: var(--text-dim); }
.page .versus b { color: var(--text); }

/* numbers that count to their new value flash briefly when they really change */
@keyframes bump { 0% { color: var(--accent); transform: scale(1.12); } 100% { transform: scale(1); } }
.bump { display: inline-block; animation: bump .45s ease-out; }

/* airport explainer: one scenario at a time */
.scn { margin: 0 0 8px; }
.scn.in { animation: scn-in .5s ease-out; }
@keyframes scn-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.page .scn-name { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 0; color: var(--text); }
.page .scn-say { font-size: 13px; color: var(--text-dim); margin: 2px 0 0; min-height: 2.6em; }
.air-tl { display: block; width: 100%; height: auto; overflow: visible; }
.air-score { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; color: var(--text-dim); font-size: 13px; opacity: .8; transition: opacity .3s; }  /* faded while the playhead runs, still 4.5:1 */
.air-score.done { opacity: 1; }
.air-score .big { font-size: 26px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.air-score .big { transition: color .3s; }
.air-arrow { font-size: 13px; min-width: 1em; }
.air-bar { flex: 1; max-width: 220px; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; align-self: center; }
.air-bar i { display: block; height: 100%; width: 0; border-radius: 4px; transition: width .4s cubic-bezier(.2, .7, .2, 1), background-color .3s; }

/* tablets: three cards side by side are too narrow (titles wrap word by word, tiny pictures); one card per row, the
   picture on the left */
@media (min-width: 601px) and (max-width: 900px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps li { grid-template-columns: 240px auto minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: center; column-gap: 10px; }
  .steps .step-art { grid-column: 1; grid-row: 1 / span 2; margin: 0 10px 0 0; align-self: start; }
  .page .steps p { grid-column: 2 / -1; align-self: start; }
}
@media (max-width: 900px) {
  .bench-side { grid-template-columns: minmax(0, 1fr); }
  .bench-side > .nb-out { grid-column: 1; grid-row: auto; }
}
@media (max-width: 760px) {
  .page { padding-top: 20px; }
  .bench .seg button { padding: 5px 9px; font-size: 13px; }
  .page h1 { font-size: 26px; }
  .page h2 { font-size: 21px; }
  .bench { margin-top: 40px; padding-top: 24px; }
  /* formulas fit the phone: the name on its own line above the fraction, smaller type, no sideways scroll */
  .formula, details.how-computed .formulas .formula { display: flex; font-size: 13px; padding: 10px 12px; flex-wrap: wrap; justify-content: center;
                                                     gap: 8px; white-space: normal; overflow-x: visible; }
  .formula .lhs { flex-basis: 100%; text-align: left; }
  .formula .frac { min-width: 0; }
  details.how-computed .formulas { grid-template-columns: minmax(0, 1fr); }
  .nb { grid-template-columns: minmax(0, 1fr); padding: 18px 0; }
  .nb-out { padding: 12px; }
  .tl { grid-template-columns: minmax(0, 1fr); }
  .tl .lbl { margin-top: 4px; }
  .tl .boxes { gap: 1px; }
}

/* phones: each button group on one line, except the zones (two rows); level buttons stack value under name */
@media (max-width: 600px) {
  .hero h1 { font-size: 29px; }
  .legend button small { display: none; }  /* one line of names on phones; the description stays in the desktop legend */
  .steps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* phones: the picture across the whole card, number + title + text under it (no dead space beside a small picture) */
  .steps li { padding: 10px 12px 14px; }
  .page .steps p { margin-top: 4px; font-size: 14px; }
  .facts b { font-size: 28px; }
  .facts li { padding: 14px 6px 12px; }
  .bench .controls { flex-direction: column; align-items: stretch; }
  .bench .seg { flex-wrap: nowrap; display: flex; }
  .bench .seg button { flex: 1 1 0; min-width: 0; padding: 4px 6px; font-size: 12.5px; justify-content: center; }
  .bench .controls > * { min-width: 0; max-width: 100%; }
  /* the zones wrap onto a second row: a sideways-scrolling row hid East and Far North with nothing to say they were there */
  .bench .seg.seg-wrap { flex-wrap: wrap; border-radius: 18px; }
  .math { white-space: normal; }
  .bench .seg.seg-wrap button { flex: 1 0 auto; }
  .bench .seg.thr button { flex-wrap: wrap; row-gap: 0; column-gap: 5px; line-height: 1.15; padding: 5px 4px; }
  .bench .seg.thr button small { flex-basis: 100%; text-align: center; font-size: 10.5px; }
  .page .scn-name { font-size: 19px; }
}

/* ---------- results at a glance (round 3: the simple view) ---------- */
.glance { margin-top: 40px; }
.records { display: grid; gap: 10px; margin: 16px 0 6px; }
.rec { display: grid; grid-template-columns: 6em minmax(0, 1fr); align-items: center; gap: 18px; padding: 16px 18px; border-radius: 14px;
       text-decoration: none; color: var(--text); background: var(--surface-solid); border: 1px solid var(--border); transition: border-color .15s; }
.rec:hover { border-color: color-mix(in srgb, var(--s1) 55%, var(--border)); }
.rec-score { display: flex; flex-direction: column; align-items: flex-start; }
.rec-score b { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--text); }
.rec-score b small { font-size: 17px; font-weight: 600; color: var(--text-faint); letter-spacing: 0; }
.rec-score span { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.rec-body { display: grid; gap: 2px; min-width: 0; }
.rec-title { font-size: 17px; font-weight: 700; }
.rec-what { font-size: 13.5px; color: var(--text-dim); }
.rec-days { display: grid; grid-template-columns: repeat(39, minmax(0, 1fr)); gap: 3px; margin-top: 10px; }
.rec-days i, .rec-key i { display: block; aspect-ratio: 1; border-radius: 3px; }
.rec-days i.w, .rec-key i.w { background: var(--s1); }
.rec-days i.l, .rec-key i.l { background: color-mix(in srgb, var(--s3) 75%, var(--surface-solid)); }
/* light theme: the pale mix fell to 2.2:1 on the white card; darkened to 3:1 or more */
:root[data-theme='light'] :is(.rec-days, .rec-key) i.l { background: color-mix(in srgb, var(--s3) 85%, var(--text)); }
@media (prefers-color-scheme: light) { :root:not([data-theme]) :is(.rec-days, .rec-key) i.l { background: color-mix(in srgb, var(--s3) 85%, var(--text)); } }
.rec-key { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 12.5px; color: var(--text-faint); }
.rec-key i { width: 11px; }
.rec-key i.l { margin-left: 12px; }
.records.play .rec-days i { animation: pop .3s cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(var(--i) * 22ms); }
@keyframes pop { from { transform: scale(0); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .records.play .rec-days i { animation: none; } }
@media (max-width: 600px) {
  .rec { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 14px; }
  .rec-score { flex-direction: row; align-items: baseline; gap: 8px; }
  .rec-score b { font-size: 28px; }
  .rec-days { grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 4px; }
}
.page .chart-cap { font-size: 13px; color: var(--text-faint); margin: 0 0 4px; }
.page .chart-cap:empty { display: none; }
details.explore { margin-top: 10px; }
details.explore > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 500;
                            color: var(--text-dim); padding: 6px 12px 6px 10px; min-height: 36px; border-radius: 999px; border: 1px solid var(--border); }
details.explore > summary::-webkit-details-marker { display: none; }
details.explore > summary::before { content: ''; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
                                    transform: rotate(-45deg); transition: transform .2s; margin-right: 2px; }
details.explore[open] > summary::before { transform: rotate(45deg); }
details.explore > summary:hover, details.explore[open] > summary { color: var(--text); border-color: var(--text-faint); }
details.explore > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
details.explore > .controls:first-of-type { margin-top: 14px; }

/* changing a setting never moves the page: every text that changes with it keeps the height of its longest version
   (caption above the chart, the level's stake, the score's definition, the note), so the chart and the buttons stay put */
.page .chart-cap { line-height: 1.45; min-height: 1.45em; }
.page .thr-note { line-height: 1.45; min-height: 2.9em; }
.bench .metric-def.callout { min-height: 6.6em; }
.bench .view-note { min-height: 2.9em; }
.bench .view-note:empty { display: block; }
@media (max-width: 760px) {
  .page .chart-cap { min-height: 2.9em; }
  .bench .metric-def.callout { min-height: 7.6em; }
}

/* explainers on wider screens: the words inside the picture box read at body size, like on phones */
@media (min-width: 761px) {
  .bench-side .ex-state { font-size: 15.5px; margin-top: 4px !important; }
  .bench-side .ex-legend { font-size: 14px; gap: 6px 18px; }
  .bench-side .ex-legend svg { width: 16px; height: 16px; }
  .bench-side .ex-score { font-size: 15px; }
  .bench-side .ex-score div { padding: 6px 0; }
  .bench-side .ex-fig figcaption { font-size: 14px; }
}

/* hit-score explainer: one map, the forecast laid on the rain that fell, the fraction filling in under it */
:root { --fcst: var(--s5); }
.ex-map { max-width: 460px; margin: 0 auto; }
.ex-map svg { display: block; width: 100%; height: auto; }
.ex-eq { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; margin-top: 12px; padding: 12px;
         border-radius: 10px; background: var(--surface-2); font-size: 14.5px; font-variant-numeric: tabular-nums; }
.ex-eq .lhs { font-weight: 700; }
.ex-eq .frac { display: inline-flex; flex-direction: column; align-items: stretch; text-align: center; }
.ex-eq .frac > span:first-child { padding: 0 6px 4px; border-bottom: 1.5px solid currentColor; }
.ex-eq .frac > span:last-child { padding: 4px 6px 0; }
.ex-eq .n-hit, .ex-eq .n-miss, .ex-eq .n-fa { display: inline-block; min-width: 1.4em; font-weight: 800; }
/* the counts in their square's colour, mixed towards the text colour: 4.5:1 or more in both themes (raw: 3.0 to 4.4) */
.ex-eq .n-hit { color: color-mix(in srgb, var(--hit) 70%, var(--text)); } .ex-eq .n-miss { color: color-mix(in srgb, var(--miss) 70%, var(--text)); }
.ex-eq .n-fa { color: color-mix(in srgb, var(--fa) 70%, var(--text)); }
.ex-eq .ex-res { font-size: 22px; font-weight: 800; min-width: 2.2em; }
@media (max-width: 600px) { .ex-eq { font-size: 13px; gap: 6px; } .ex-eq .lhs { flex-basis: 100%; text-align: center; } }

/* Headline figures (benchmark.js): three big claims, the day records under them */
.glance .big { list-style: none; padding: 0; margin: 22px 0 34px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.glance .big li { display: flex; flex-direction: column; gap: 6px; padding: 20px 18px 18px; border-radius: 16px; background: var(--surface-solid);
                  border: 1px solid var(--border); }
.glance .big b { white-space: nowrap; font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
                 background: linear-gradient(120deg, var(--s1), #b05cc4 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.glance .big .what { font-size: 15.5px; font-weight: 650; line-height: 1.3; color: var(--text); }
.glance .big .src { margin-top: auto; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--text-faint); }
.glance .rec-h { margin: 0; font-size: 17px; }
.glance .rec-sub { margin: 4px 0 0; font-size: 14px; color: var(--text-dim); }
@media (max-width: 700px) {
  .glance .big { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .glance .big li { padding: 16px 16px 14px; gap: 4px; }
  .glance .big b { font-size: 42px; }
}