:root {
  --ink: #16181d;
  --ink-2: #3d434e;
  --ink-3: #5f6673;
  --line: #e2e5ea;
  --line-2: #eef0f4;
  --rule-strong: var(--ink-2);   /* the three table rules */
  --bg: #ffffff;
  --bg-2: #f7f8fa;
  --page: #f4f7fb;
  --card: #ffffff;
  --surface: #fcfdfe;      /* nested panes: figures, viewers */
  /* liquid glass: nav, its menu, and the up arrow */
  --glass-bg: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.16));
  --glass-menu: rgba(255,255,255,.9);
  --glass-button: rgba(255,255,255,.72);
  --glass-edge: rgba(255,255,255,.7);
  --glass-filter: blur(18px) saturate(190%) brightness(1.04);
  --glass-shadow: inset 0 1px 1px rgba(255,255,255,.95), inset 0 -1px 1px rgba(255,255,255,.4),
                  0 0 0 .5px rgba(16,24,40,.08), 0 8px 28px rgba(16,24,40,.10), 0 1px 3px rgba(16,24,40,.06);
  --glass-sheen: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,0) 38%, rgba(255,255,255,0) 72%, rgba(255,255,255,.22));
  --glass-pill: rgba(15,110,140,.12);
  --glass-pill-edge: inset 0 1px 1px rgba(255,255,255,.75), 0 1px 3px rgba(16,24,40,.08);
  --warn-ink: #5c3d00;
  --band: #fffaf0;
  --control: #ffffff;
  --hero: #0d3b52;        /* flat hero fill: deep rain-blue */
  --rule: #0f6e8c;        /* flat accent rule */
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 28px rgba(16,24,40,.05);
  --accent: #0b5a73;
  --accent-soft: #e6f1f5;
  --warn: #8a5a00;
  --warn-soft: #fdf6e7;
  --warn-line: #f0dfb6;
  --measure: 760px;      /* centred reading column inside each card */
  --maxw: 1120px;        /* one width for hero, nav, sections, footer */
  --maxw-wide: 1120px;
  --r: 12px;
  --r-card: 24px;
  --sans: "Hanken Grotesk", sans-serif;
  --mono: "JetBrains Mono", monospace;
  --accent-hover: rgba(15,110,140,.07);
  --accent-line: #c5dde6;
  --accent-tint: rgba(15,110,140,.10);
  --best-bg: var(--accent-soft);
  --hero-fg: #ffffff;
  --hero-muted: #c9dde7;
  --hero-faint: #b3cbd8;
  --hero-chip: rgba(255,255,255,.18);
  --hero-chip-line: rgba(255,255,255,.34);
  --on-accent: #ffffff;
  --frame-line: var(--line);
  --map-bg: #f4f1e8;          /* design-lint: ok basemap tan behind map frames (matches the map tiles), never a page background */
  --label-scrim: rgba(255,255,255,.82);
  --tag-bg: rgba(255,255,255,.88);
  --tag-ink: #16181d;
  --tag-muted: #4b5260;
  --handle-bg: #ffffff;
  --dot-line: #1b1b1b;
  --dot-dry: #ffffff;
  --dot-missing: #8a8a8a;
  --zoom-box: #c2185b;        /* outline of the 48 km zoom window, both themes */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 16px/1.65 var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.25; font-weight: 600; letter-spacing: -0.012em; margin: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.wrap-wide { max-width: var(--maxw-wide); margin: 0 auto; padding: 0 24px; }

/* Prose, notes and tables sit in one centred reading column so every left and
   right edge lines up. The case viewers opt out and use the full card, since
   the card is wide precisely to give the tiles room. */
section > .wrap > *,
section > .wrap-wide > *,
footer > .wrap > * { max-width: var(--measure); margin-inline: auto; }
/* Only the interactive viewers and their colourbar break out of the reading
   column; all other results content stays narrow. */
section > .wrap > .viewer, section > .wrap-wide > .viewer { max-width: none; }

/* Each section body is a card floating on the tinted page, RainODE style. */
section > .wrap, section > .wrap-wide {
  background: var(--card); border-radius: var(--r-card);
  padding: 34px 30px; box-shadow: var(--shadow);
}


/* ---------- nav ---------- */
.nav { position: sticky; top: 12px; z-index: 50; padding: 0 30px; }
.nav-in {
  display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap;
  max-width: var(--maxw-wide); margin: 0 auto; padding: 10px 30px;
  position: relative; isolation: isolate;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-edge);
  border-radius: 999px; box-shadow: var(--glass-shadow);
}
/* the sheen: a soft highlight across the top-left and a faint one at the bottom-right */
.nav-in::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--glass-sheen); pointer-events: none;
}
.nav-code { font-weight: 650; font-size: 14px; letter-spacing: 0.02em; white-space: nowrap; padding-right: 4px; }
.nav a {
  color: var(--ink-2); font-size: 13.5px; white-space: nowrap;
  padding: 6px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px;
}
.nav a svg { width: 14px; height: 14px; flex: none; opacity: .75; }
.nav a:hover { color: var(--ink); background: var(--accent-hover); text-decoration: none; }
.nav a.is-active { color: var(--accent); background: var(--glass-pill); box-shadow: var(--glass-pill-edge); font-weight: 600; }
.nav a.is-active svg { opacity: 1; }

/* ---------- hero ---------- */
.hero { text-align: center; padding: 22px 30px 8px; border-bottom: 0; }
.hero > .wrap {
  background: var(--hero); border-radius: var(--r-card);
  padding: 52px 30px 44px; box-shadow: var(--shadow); color: var(--hero-fg);
  max-width: var(--maxw-wide);
}
.hero .kicker {
  display: inline-block; text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 11.5px; font-weight: 600; color: var(--hero-fg);
  background: var(--hero-chip); border: 1px solid var(--hero-chip-line);
  padding: 6px 15px; border-radius: 999px;
}
.hero h1 {
  font-size: clamp(34px, 6vw, 52px);
  letter-spacing: -0.03em; margin: 12px 0 8px;
}
.hero .byline { font-size: 17px; color: var(--hero-fg); margin-top: 18px; font-weight: 500; }
.hero .affil { font-size: 15px; color: var(--hero-muted); margin-top: 3px; }
.hero .stamp { font-size: 13px; color: var(--hero-faint); margin-top: 16px; }

/* ---------- sections ---------- */
section { padding: 14px 30px; border-bottom: 0; }
section > .wrap > h2, section > .wrap-wide > h2 { font-size: 24px; letter-spacing: -0.02em; }
.lede { font-size: 17.5px; color: var(--ink-2); }
h3 { font-size: 19px; margin: 30px 0 10px; }
h4 { font-size: 16px; margin: 30px 0 10px; color: var(--ink-2); }


.muted { color: var(--ink-3); }
.small { font-size: 14px; }
figure { margin: 26px 0; background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 18px; padding: 18px; }
figure img { width: 100%; height: auto; border-radius: 10px; display: block; }
figcaption { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); margin-top: 12px; text-align: left; }
figcaption b { font-weight: 700; color: var(--ink); }

section.region-band > .wrap-wide {
  background: var(--band);
  border: 1px solid var(--warn-line);
}
.chip {
  display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line);
}
.chip-warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }

.callout {
  border: 1px solid var(--warn-line); background: var(--warn-soft);
  border-radius: var(--r); padding: 16px 18px; margin: 22px 0;
  font-size: 15px; color: var(--warn-ink);
}
.callout strong { color: var(--ink); }

/* Left-aligned prose: justified text left uneven gaps, worst in narrow columns. */
.lede, section p, .tnote, .callout, .todo, footer li {
  text-align: left; hyphens: manual;
}
figcaption { hyphens: none; }
.slot p, .slot h4 { text-align: center; hyphens: none; }
.panel-title, .viewer-meta, .clock { hyphens: none; }

/* ---------- tables ---------- */
/* Journal tables: three rules only (above the header, under the header, under the last row),
   no vertical lines and no row shading apart from the selected model. */
.tw { overflow-x: auto; margin: 18px 0; }
table { border-collapse: collapse; width: auto; max-width: 100%; font-size: 13px;
  margin-inline: auto;     /* auto width keeps them tight, auto margin centres them */
  border-top: 1.5px solid var(--rule-strong); border-bottom: 1.5px solid var(--rule-strong); }
thead { border-bottom: 1px solid var(--rule-strong); }
th, td { padding: 8px 14px; text-align: left; border: 0; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
/* cells wrap freely; only numeric values stay unbroken so digits never split */
td, th { overflow-wrap: break-word; }
thead th {
  font-weight: 600; color: var(--ink);    /* no uppercasing: "mm/3 h" is a unit */
  white-space: nowrap; vertical-align: bottom;
}
thead tr:first-child th:first-child { white-space: normal; }
/* A header over a group of columns gets its own short rule, broken between groups. */
thead th[colspan] { text-align: center;
  background: linear-gradient(var(--rule-strong), var(--rule-strong)) center bottom / calc(100% - 16px) 1px no-repeat; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Let the model name wrap to two lines so the metric headers keep their room. */
[data-summary] th:first-child, [data-summary] td:first-child { max-width: 11em; }
.dir { color: var(--ink-3); font-weight: 500; }
/* A bracketed qualifier or a unit moves to the next line whole, so a line
   never breaks after "(" or inside "mm/3 h". */
.nb { white-space: nowrap; }
td.num { white-space: nowrap; }
tbody tr.is-ref td { color: var(--ink-2); }
tbody tr.is-best td { background: var(--best-bg); }
tbody tr.is-best td:first-child { font-weight: 600; }
td .pending { color: var(--ink-3); }
.tnote { font-size: 13.5px; color: var(--ink-3); margin-top: 10px; }

/* ---------- todo ---------- */
.todo {
  font-size: 13.5px; color: var(--ink-3);
  border-left: 2px solid var(--line); padding: 4px 0 4px 14px;
  margin: 14px 0;
}
.todo b { color: var(--ink-2); font-weight: 600; }

/* ---------- viewer ---------- */
/* The case viewers sit in their own pane, like the figure blocks, so the
   interactive results read as a distinct object rather than loose controls. */
.viewer {
  margin: 22px 0 8px; padding: 18px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 18px;
}
/* Header row: case tabs on the left, layer chips on the right (they wrap under the tabs when narrow). */
.viewer-bar {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
  padding-bottom: 12px; border-bottom: 1px solid var(--line-2); margin-bottom: 10px;
}
.tabs { display: flex; gap: 4px; background: var(--bg-2); padding: 3px; border-radius: 7px; }
.tabs button {
  font: inherit; font-size: 13.5px; border: 0; background: none; cursor: pointer;
  padding: 6px 13px; border-radius: 5px; color: var(--ink-3);
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] {
  background: var(--control); color: var(--ink); font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 0 0 1px var(--line);
}
.viewer-meta { font-size: 13.5px; color: var(--ink-3); margin: 0 0 14px; }

/* Tiles always stay on a single row and share the width equally. Subgrid keeps
   every header and every map on a shared track, so panels stay aligned no
   matter how a long model name wraps. Tiles shrink to fit rather than
   scrolling, so the row is always complete on screen. */
.panels {
  display: grid; gap: 14px;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 6px;
}
.panel { min-width: 0; display: grid; grid-template-rows: subgrid; grid-row: span 2; }
.panel-head { display: flex; align-items: baseline; gap: 8px; padding-bottom: 7px;
  flex-wrap: wrap; align-content: flex-start; }
.panel-title { font-size: 13.5px; font-weight: 600; }
.frame {
  position: relative; aspect-ratio: 1; border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; background: var(--map-bg) center / 100% 100% no-repeat;
}
.frame img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: none;
}
.frame img.on { opacity: 1; }
.frame .cadence {
  position: absolute; right: 6px; bottom: 6px; z-index: 4;   /* above the station dots */
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em;
  background: var(--label-scrim); color: var(--tag-ink);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px;
}

/* controls */
.controls { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.btn {
  font: inherit; font-size: 13.5px; cursor: pointer;
  border: 1px solid var(--line); background: var(--control); color: var(--ink);
  border-radius: 6px; padding: 7px 12px; min-width: 40px;
}
.btn:hover { background: var(--bg-2); }
.btn-play { font-weight: 600; min-width: 74px; }
.scrub { flex: 1; accent-color: var(--accent); min-width: 160px; }
.clock {
  font-variant-numeric: tabular-nums; font-size: 13.5px; color: var(--ink-2);
  white-space: nowrap; min-width: 172px; text-align: right;
}
.speed { font: inherit; font-size: 13px; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; background: var(--control); }

.loading { font-size: 13px; color: var(--ink-3); margin-top: 10px; height: 16px; }
.loading:empty { display: none; }
.loading .bar { display: inline-block; width: 120px; height: 4px; background: var(--line); border-radius: 2px; vertical-align: middle; margin-right: 8px; overflow: hidden; }
.loading .bar i { display: block; height: 100%; background: var(--accent); width: 0; }

/* layer chips: right side of the viewer's header row */
.layer-toggles { display: flex; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; font-size: 13.5px; color: var(--ink-2); }

/* colourbar: one slim strip, bin edges under it, the unit at its right end; centred, under the controls */
.cbar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center;
  margin: 12px auto 0; max-width: 560px;
}
.cbar-strip {
  grid-column: 1; grid-row: 1;
  display: flex; height: 8px; border: 1px solid var(--line);
  border-radius: 2px; overflow: hidden;
}
.cbar-strip i { flex: 1; }
.cbar-unit { grid-column: 2; grid-row: 1; font-size: 11px; line-height: 1; color: var(--ink-3); white-space: nowrap; }

/* One tick per bin edge, sitting on the boundary between swatches. */
.cbar-ticks { grid-column: 1; grid-row: 2; position: relative; height: 15px; margin-top: 3px; }
.cbar-ticks span {
  position: absolute; top: 0; transform: translateX(-50%); line-height: 15px;
  font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cbar-ticks span.is-first { transform: none; }
.cbar-ticks span.is-last { transform: translateX(-100%); }

/* placeholder slots */
.slot {
  border: 1px dashed var(--line); border-radius: var(--r);
  background: repeating-linear-gradient(135deg, var(--surface) 0 10px, var(--bg-2) 10px 20px);
  padding: 30px 24px; text-align: center; color: var(--ink-3); margin: 18px 0;
}
.slot h4 { margin: 0 0 6px; color: var(--ink-2); }
.slot p { margin: 0 auto; font-size: 14px; max-width: 60ch; }

footer { padding: 14px 30px 60px; font-size: 14px; color: var(--ink-3); }
footer > .wrap { background: var(--card); border-radius: var(--r-card);
  padding: 30px; box-shadow: var(--shadow); max-width: var(--maxw-wide); }

#toTop {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--rule);   /* solid, so the arrow keeps its contrast over any content */
  color: var(--on-accent); font-size: 18px; line-height: 1;
  -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.65), inset 0 -2px 4px rgba(0,0,0,.08), 0 6px 18px rgba(16,24,40,.18);
  opacity: 0; pointer-events: none; transition: opacity .18s ease, background .18s ease;
}
#toTop.show { opacity: 1; pointer-events: auto; }
#toTop:hover, #toTop:focus-visible {
  background: var(--accent);
}
footer ol { padding-left: 20px; }
footer li { margin-bottom: 10px; }

@media (max-width: 900px) {
  .clock { min-width: 0; font-size: 12.5px; }
}


/* Indonesia keeps its own warm accent so the section reads as a different
   kind of content, not just a differently coloured card. */

/* Exhibit labels: tables numbered above, figures numbered below. Label and table share one
   centred grid column as wide as the table (at most the column), so the label never sets the
   width: it fills whatever the table leaves. */
.exhibit { display: grid; grid-template-columns: minmax(0, max-content); justify-content: center;
  margin-block: 20px 18px; }
.exhibit > .tw { margin: 0; }
.table-label {
  width: 0; min-width: 100%; margin: 0 0 8px; text-align: left;
  font-size: 13.5px; line-height: 1.5; font-weight: 400; color: var(--ink-2); hyphens: none;
}
.table-label b { font-weight: 700; color: var(--ink); }

/* ---------- dark theme ---------- */
:root { color-scheme: light; }
[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e7ebf2;
  --ink-2: #b7c0ce;
  --ink-3: #8a94a4;
  --line: #2b333f;
  --line-2: #232a34;
  --rule-strong: var(--ink-2);
  --bg-2: #1b212a;
  --page: #0f1318;
  --card: #161b22;
  --surface: #1b212a;
  --control: #1f2630;
  --glass-bg: linear-gradient(180deg, rgba(44,51,62,.62), rgba(22,27,34,.52));
  --glass-menu: rgba(27,33,42,.94);
  --glass-button: rgba(30,36,46,.72);
  --glass-edge: rgba(255,255,255,.14);
  --glass-filter: blur(18px) saturate(170%) brightness(.9);
  --glass-shadow: inset 0 1px 1px rgba(255,255,255,.18), inset 0 -1px 1px rgba(255,255,255,.05),
                  0 8px 28px rgba(0,0,0,.38);
  --glass-sheen: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,0) 38%, rgba(255,255,255,0) 72%, rgba(255,255,255,.06));
  --glass-pill: rgba(92,195,224,.18);
  --glass-pill-edge: inset 0 1px 1px rgba(255,255,255,.12), 0 1px 3px rgba(0,0,0,.25);
  --accent: #6fcde6;
  --accent-soft: #12303a;
  --hero: #0a2a3a;
  --rule: #5cc3e0;
  --accent-hover: rgba(92,195,224,.10);
  --accent-line: #1f4552;
  --accent-tint: rgba(92,195,224,.12);
  --best-bg: #14303a;
  --hero-fg: #f2f7fa;
  --hero-muted: #b9d0dc;
  --hero-faint: #a3bfcd;
  --on-accent: #0b1217;
  --frame-line: #333c49;
  --warn: #e0a93a;
  --warn-soft: #241d10;
  --warn-line: #4a3c1c;
  --warn-ink: #e8cf9a;
  --band: #1c1811;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 28px rgba(0,0,0,.38);
}
[data-theme="dark"] tbody tr.is-best td { background: var(--best-bg); }
[data-theme="dark"] .nav a:hover { background: var(--accent-tint); }
/* the maps carry their own light background, so keep their surround neutral */
[data-theme="dark"] .frame { border-color: var(--frame-line); }

/* ---------- logo, theme toggle, rights ---------- */
.nav-logo { width: 22px; height: 22px; object-fit: contain; flex: none; }
[data-theme="dark"] .nav-logo { content: url("assets/dilab-d-white.png"); }

#themeToggle {
  margin-left: auto; flex: none; cursor: pointer;
  width: 32px; height: 32px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--control); color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
}
#themeToggle:hover { color: var(--ink); border-color: var(--ink-3); }
#themeToggle svg { width: 16px; height: 16px; }
#themeToggle .icon-moon { display: none; }
[data-theme="dark"] #themeToggle .icon-sun { display: none; }
[data-theme="dark"] #themeToggle .icon-moon { display: inline; }

.hero-logo {
  display: block; width: 52px; height: 52px; object-fit: contain;
  margin: 0 auto 24px;   /* block, so it centres and the gap actually applies */
}

.rights {
  max-width: none; text-align: center; margin: 22px auto 0;
  font-size: 12.5px; color: var(--ink-3); hyphens: none;
}
.rights + .rights { margin-top: 6px; }

/* ---------- comparison chart ---------- */
.chart-fig { padding: 20px 18px 14px; }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-tick { font-size: 11px; fill: var(--ink-3); }
.chart-axis { font-size: 12px; fill: var(--ink-2); font-weight: 600; }
.chart-bar { cursor: pointer; transition: opacity .12s ease; }
.chart-bar:hover { opacity: .78; }

.chart-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; justify-content: center; }
.chart-legend button {
  font: inherit; font-size: 12.5px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); background: var(--control); color: var(--ink-2);
  border-radius: 999px; padding: 5px 12px; /* design-lint: ok pill-shaped legend filter chips (DESIGN.md) */
}
.chart-legend button:hover { color: var(--ink); }
.chart-legend button.is-off { color: var(--ink-3); text-decoration: line-through; }
.chart-legend button.is-off i { opacity: .42; }
.chart-legend i { width: 10px; height: 10px; border-radius: 2px; flex: none; }

.chart-tip {
  position: absolute; pointer-events: none; z-index: 5;
  transform: translate(12px, -50%);
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow); padding: 8px 11px;
  font-size: 12.5px; line-height: 1.45; white-space: nowrap;
  opacity: 0; transition: opacity .1s ease;
}
.chart-tip.on { opacity: 1; }


.chart-target { font-size: 11px; fill: var(--ink-2); font-weight: 600; }

.chart-controls {
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  justify-content: center; margin-bottom: 14px;
}
.chart-picker { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-3); }
.chart-picker select {
  font: inherit; font-size: 12.5px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--control); padding: 5px 8px;
}
.chart-totals { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-2); text-align: center; }
.chart-dot { cursor: pointer; }
.chart-dot:hover { r: 5; }

ol.points { padding-left: 22px; }
ol.points li { margin-bottom: 12px; }
ol.points li::marker { color: var(--ink-3); font-weight: 600; }

/* Ghana and the Philippines share the warm "not validated" treatment. */

.panel-interval { margin-top: 5px; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Keep comparisons readable on phones without widening the page. */
@media (max-width: 700px) {
  .nav { top: 0; padding: 0 10px; }
  .nav-in { flex-wrap: nowrap; overflow-x: auto; padding: 8px; gap: 4px; border-radius: 14px; }
  .nav-in > * { flex-shrink: 0; }
  .hero { padding: 12px 10px 8px; }
  .hero > .wrap { padding: 30px 18px; }
  .hero h1 { font-size: clamp(26px, 7vw, 36px); }
  section { padding-inline: 10px; }
  section > .wrap, section > .wrap-wide { padding: 24px 16px; border-radius: 16px; }
  .panels { grid-auto-columns: min(82vw, 320px); scroll-snap-type: x proximity; }
  .panel { scroll-snap-align: start; }
  .controls { flex-wrap: wrap; gap: 10px; }
  .scrub { order: 2; flex-basis: 100%; min-width: 0; }
  .clock { margin-left: auto; }
  .loading { height: auto; min-height: 20px; }
  .tw table { min-width: 600px; }
  .btn, .speed { min-height: 44px; }
  .panel-interval { color: var(--ink-3); }
}
@media (max-width: 700px) {
  .tabs { max-width: 100%; min-width: 0; overflow-x: auto; flex-shrink: 1; }
  .tabs button { flex-shrink: 0; }
  .panels { grid-auto-columns: min(100%, 320px); }
}

/* Desktop labels, with compact icon navigation on phones. */
.nav { margin-bottom: 16px; }
.nav-in { gap: 6px; padding: 8px 18px; }
.nav a { width: auto; min-height: 36px; padding: 6px 9px; justify-content: center; }
.nav a svg { width: 16px; height: 16px; }
.nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-brand { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; max-width: 0; overflow: hidden; opacity: 0; transform: translateX(-6px); transition: max-width 260ms ease, opacity 220ms ease, transform 260ms ease; }
.nav.past-header .nav-brand { max-width: 160px; opacity: 1; transform: translateX(0); }
.nav-logo, .nav-code { display: block; }
.nav.past-header .nav-logo { display: block; width: 22px; height: 22px; }
.nav.past-header .nav-code { display: block; font-size: 14px; padding-right: 8px; }
.hero .hero-logo { display: block; width: 44px; height: 44px; margin: 0 auto 14px; }
.hero > .wrap { padding: 34px 30px; }
.hero .byline { font-size: 12px; margin-top: 12px; }
@media (max-width: 700px) {
  .nav { margin-bottom: 10px; }
  .nav-in { padding: 6px 8px; gap: 2px; }
  .nav-label { display: none; }
  .nav a { width: 30px; min-height: 36px; padding: 7px; }
  .nav.past-header .nav-code { font-size: 13px; padding-right: 6px; }
  .hero { padding-top: 10px; }
  .hero > .wrap { padding: 22px 16px; }
  .hero .hero-logo { width: 36px; height: 36px; margin-bottom: 10px; }
  .hero .kicker { font-size: 10px; padding: 3px 9px; }
  .hero h1 { font-size: 30px; margin: 8px 0 6px; }
  .hero .byline { font-size: 11px; margin-top: 8px; }
  .hero .affil { font-size: 12px; }
  .hero .stamp { font-size: 11px; margin-top: 8px; }
}

@media (max-width: 700px) {
  .nav { top: 8px; padding-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-brand { transition: none; }
}

.nav a.nav-brand { padding: 0; min-height: 44px; justify-content: flex-start; border-radius: 0; background: transparent; }
.nav-tests { position: relative; }
.nav-tests summary { display: flex; align-items: center; gap: 6px; padding: 6px 9px; min-height: 36px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; list-style: none; }
.nav-tests summary::-webkit-details-marker { display: none; }
.nav-tests summary svg { width: 16px; height: 16px; }
.tests-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 155px; padding: 6px; background: var(--glass-menu); border: 1px solid var(--glass-edge); border-radius: 14px; box-shadow: var(--glass-shadow); }
.nav .tests-menu a { display: flex; justify-content: flex-start; width: 100%; }
#themeToggle { border: 0; background: transparent; flex: 0 0 32px; }
@media (max-width: 700px) {
  .nav { top: 4px; padding-top: 4px; }
  .nav-in { padding: 3px 6px; gap: 0; overflow: visible; }
  .nav a, .nav-tests summary { width: 26px; min-height: 30px; padding: 5px; }
  .nav a.nav-brand { width: auto; gap: 4px; }
  .nav.past-header .nav-logo { width: 16px; height: 16px; }
  .nav.past-header .nav-code { font-size: 12px; padding-right: 4px; }
  #themeToggle { width: 28px; height: 28px; flex-basis: 28px; margin-left: auto; }
}

/* Keep the brand highlight around the code, not the logo. */
.nav a.nav-brand:hover, .nav a.nav-brand.is-active { background: transparent; box-shadow: none; }
.nav-brand .nav-code { border-radius: 999px; padding: 3px 8px; }
.nav-brand:hover .nav-code, .nav-brand.is-active .nav-code { background: var(--accent-soft); color: var(--accent); }
.layer-toggles { gap: 8px; align-items: center; }
.layer-toggles button { font: inherit; font-size: 12px; border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; background: var(--accent-soft); color: var(--accent); cursor: pointer; } /* design-lint: ok pill-shaped layer filter chips (DESIGN.md) */
.layer-toggles button.is-off { background: transparent; color: var(--ink-3); }
.layer-toggles button:disabled { cursor: default; }
/* Every tile has the same square map, regardless of label length. */
.panels { grid-template-rows: auto auto; align-items: start; }
.panel .frame { width: 100%; min-width: 0; height: auto; aspect-ratio: 1; align-self: start; }
@media (max-width: 700px) {
  .panels { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; grid-template-rows: none; overflow: visible; gap: 16px 10px; }
  .panel { grid-row: auto; grid-template-rows: auto auto; align-content: start; }
  .panel-head { min-height: 56px; gap: 3px 6px; }
  .panel-title { font-size: 11px; overflow-wrap: anywhere; }
  .panel-title .nb { white-space: normal; }
  .panel-interval { font-size: 9px; }
}

/* Tile selection and controls. */
.tabs { flex-wrap: wrap; overflow: visible; }
.panel-head { align-content: flex-end; align-items: flex-end; }
.panels { grid-auto-columns: minmax(0, 320px); justify-content: start; }
.btn-play { min-width: 40px; }
@media (max-width: 700px) {
  .tabs { overflow: visible; }
  .layer-toggles { margin-left: 0; justify-content: flex-start; }
  .panels { grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 200px)); }
  .panel-head { align-content: flex-end; }
  .controls .clock { order: 0; flex-basis: 100%; margin: 0; text-align: left; }
  .controls .scrub { order: 1; flex-basis: 100%; }
  .controls .btn, .controls .speed { order: 2; }
  .chart-svg { min-height: 260px; }
}

.nav-tests summary { border-radius: 999px; }
.nav-tests summary:hover { color: var(--ink); background: var(--accent-soft); }
.nav-tests summary.is-active, .nav-tests[open] summary { color: var(--accent); background: var(--glass-pill); box-shadow: var(--glass-pill-edge); font-weight: 600; }
.nav-tests summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Sources uses the same phone gutters and card padding as report sections. */
@media (max-width: 700px) {
  footer { padding-inline: 10px; }
  footer > .wrap { padding: 24px 16px; border-radius: 16px; }
}

@media (max-width: 700px) {
  section > .wrap > h2, section > .wrap-wide > h2 { font-size: 21px; }
  h3 { font-size: 18px; }
}

/* Quiet full-width dividers beneath main section headings. */
section > .wrap > h2, section > .wrap-wide > h2 {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

/* Bracketed references and stable navigation with pop-out help. */
.references { list-style: none; counter-reset: reference; padding-left: 2em; }
.references li { counter-increment: reference; position: relative; }
.references li::before { content: "[" counter(reference) "]"; position: absolute; left: -2em; }
.nav-help { position: fixed; z-index: 100; pointer-events: none; padding: 5px 9px; border-radius: 6px; background: var(--ink); color: var(--page); font-size: 12px; max-width: calc(100vw - 16px); box-shadow: 0 2px 8px #0002; }

/* The nav reaches a little past the cards on each side, and stays on one line. */
.nav { padding-inline: 18px; }
.nav-in { max-width: calc(var(--maxw-wide) + 24px); flex-wrap: nowrap; }
@media (min-width: 701px) and (max-width: 960px) {
  .nav-in { gap: 0; padding-inline: 12px; }
  .nav a, .nav-tests summary { padding-inline: 7px; font-size: 13px; }
}
@media (min-width: 701px) and (max-width: 780px) {
  .nav a, .nav-tests summary { padding-inline: 4px; font-size: 12.5px; }
}
@media (max-width: 700px) {
  .nav { padding-inline: 4px; }
  #toTop { right: 14px; bottom: 14px; width: 44px; height: 44px; }
}

/* The published copy shows its full name in the nav; it fits only on wide screens. */
.nav.past-header .nav-brand:has(.nav-code-long) { max-width: 260px; }
@media (max-width: 960px) {
  .nav.past-header .nav-code.nav-code-long { display: none; }
}

/* Compact tables. Rows use a tighter line height than the prose. On phones, text tables fit the
   screen; only tables whose unbroken numbers are wider than the screen scroll sideways. */
table { line-height: 1.45; }
th, td { padding: 6px 12px; }
@media (max-width: 700px) {
  .tw table { min-width: 0; font-size: 12.5px; }
  th, td { padding: 6px 8px; }
  thead th, thead th.num { white-space: normal; }   /* headers may wrap on phones so fewer tables scroll */
}

/* ---------- before/after sliders ---------- */
.compare-fig { padding: 16px; }
.compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.compare-frame {
  --pos: 50%; position: relative; aspect-ratio: 1; overflow: hidden;
  border: 1px solid var(--line); border-radius: 10px; background: var(--map-bg);
  cursor: ew-resize; user-select: none; -webkit-user-select: none;
  touch-action: pan-y;                     /* vertical swipes still scroll the page */
}
.compare-side { position: absolute; inset: 0; background: center / 100% 100% no-repeat; }
.compare-side img { width: 100%; height: 100%; display: block; border-radius: 0; pointer-events: none; }
.compare-side.is-lo { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px;
  background: var(--handle-bg); box-shadow: 0 0 0 1px rgba(16,24,40,.3), 0 0 6px rgba(16,24,40,.25); pointer-events: none;
}
/* a round knob with bold chevrons, so it reads as something to drag */
.compare-handle::after {
  content: "\2039\2009\203A"; position: absolute; top: 50%; left: 50%; width: 38px; height: 38px;
  transform: translate(-50%, -50%); display: grid; place-items: center; padding-bottom: 2px; box-sizing: border-box;
  border-radius: 50%; background: var(--handle-bg); color: var(--accent); font-size: 24px; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 1px rgba(16,24,40,.15), 0 2px 8px rgba(16,24,40,.35);
}
.compare-tag {
  position: absolute; top: 8px; padding: 2px 7px; border-radius: 6px; pointer-events: none;
  background: var(--tag-bg); color: var(--tag-ink); font-size: 11.5px; font-weight: 600;
  transition: opacity .15s ease;
}
.compare-tag.is-hidden { opacity: 0; }
.compare-tag.is-left { left: 8px; }
.compare-tag.is-right { right: 8px; }
.compare-res { font-weight: 500; color: var(--tag-muted); }
.compare-range { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.compare-frame:has(.compare-range:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.compare-cap { margin-top: 7px; font-size: 12.5px; color: var(--ink-3); text-align: center; hyphens: none; }
.compare-cbar { margin-top: 16px; }
[data-theme="dark"] .compare-frame { border-color: var(--frame-line); }
@media (max-width: 700px) {
  .compare-fig { padding: 10px; }
  .compare-grid { gap: 10px; }
  .compare-tag { top: 5px; padding: 1px 5px; font-size: 10px; }
  .compare-tag.is-left { left: 5px; }
  .compare-tag.is-right { right: 5px; }
  .compare-res { display: none; }
  .compare-handle::after { width: 30px; height: 30px; font-size: 19px; }
  .compare-cap { font-size: 11px; }
}
/* The slider figure uses the full card width, like the case viewers; wide screens show all four in one row. */
section > .wrap > .compare-fig { max-width: none; }
@media (min-width: 1000px) {
  .compare-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Ensemble FSS threshold-by-scale grid: cells are shaded inline by app.js. */
.fss-grid td, .fss-grid th { text-align: center; font-variant-numeric: tabular-nums; }
.fss-grid td:first-child, .fss-grid th:first-child { text-align: left; white-space: nowrap; }
.fss-grid td.num { cursor: default; }
.fss-grid td:last-child, .fss-grid th:last-child { padding-right: 12px; }   /* shaded cells keep their inner space */


/* Collapsible supplementary sections. */
details.supp { border: 1px solid var(--line); border-radius: var(--r); margin: 14px 0; background: var(--card); }
details.supp > summary { cursor: pointer; padding: 14px 18px; font-weight: 600; list-style: none; display: flex; gap: 10px; align-items: baseline; }
details.supp > summary::-webkit-details-marker { display: none; }
details.supp > summary::before { content: '\25B8'; color: var(--ink-3); transition: transform .15s; }
details.supp[open] > summary::before { transform: rotate(90deg); }
details.supp > summary .supp-id { color: var(--accent); min-width: 2.2em; }
details.supp > summary .supp-note { font-weight: 400; color: var(--ink-3); font-size: 14px; }
details.supp > .supp-body { padding: 0 18px 18px; }
/* Key findings: label column and finding, thin rules between rows (no accent rail). */
.key-results { list-style: none; padding: 0; margin: 20px auto 22px; border-top: 1px solid var(--line); }
.key-results li { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 4px 20px;
  margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); line-height: 1.55; }
.key-results .kr-label { font-weight: 650; color: var(--ink); }
.key-results .kr-text { color: var(--ink-2); }
@media (max-width: 700px) { .key-results li { grid-template-columns: minmax(0, 1fr); } }

/* Native-grid web frames: crisp cells over the per-case basemap. */
.frame.is-native img, .compare-side.is-native img { image-rendering: pixelated; image-rendering: crisp-edges; }
.frame { position: relative; }

/* Station points over case panels, and the per-station cumulative chart. */
.station-dots { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.station-dots circle { fill: var(--dot-dry); stroke: var(--dot-line); stroke-width: 0.9; vector-effect: non-scaling-stroke; pointer-events: auto; }
.station-dots circle.is-dry { fill: var(--dot-dry); }
.station-dots circle.is-missing { fill: none; stroke: var(--dot-missing); stroke-width: 0.8; }
/* the 48 km zoom panels have only a few large dots: a slightly heavier outline */
.frame.is-zoom .station-dots circle { stroke-width: 1.4; }
.layer-toggles .station-toggle { border-style: dashed; }
.station-chart { margin-top: 14px; position: relative; }
.station-chart .legend-item { display: inline-flex; align-items: center; gap: 6px; margin: 0 12px 4px 0; font-size: 13px; }
.station-chart .legend-item i { width: 14px; height: 3px; display: inline-block; border-radius: 2px; }

/* ---------- tap targets (DESIGN.md section 8): every control at least 44 x 44 px ---------- */
.nav a, .nav-tests summary { min-height: 44px; min-width: 44px; justify-content: center; }
#themeToggle { width: 44px; height: 44px; flex-basis: 44px; }
.tabs button, .btn, .speed, .chart-legend button, .layer-toggles button, .chart-picker select { min-height: 44px; }
.btn, .layer-toggles button { min-width: 44px; }
.scrub { height: 44px; }
.hero .affil a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 700px) {
  .nav { padding: 4px 4px 0; }
  .nav-in { padding: 0 2px; gap: 0; justify-content: space-between; flex-wrap: nowrap; }
  .nav a.nav-brand { display: none; }
  .nav a, .nav-tests summary { width: 44px; min-width: 44px; min-height: 44px; padding: 0; }
  #themeToggle { width: 44px; height: 44px; flex-basis: 44px; margin-left: 0; }
}

/* ---------- station panels: AWS panel (Korea) and 48 km zoom panels (Indonesia) ---------- */
.frame.is-zoom { background-image: none; }
.zoom-inner { position: absolute; background: center / 100% 100% no-repeat; }
.zoom-inner img { image-rendering: pixelated; image-rendering: crisp-edges; }
.zoom-box { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.zoom-box rect { fill: none; stroke: var(--zoom-box); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
/* Up to five panels share one row on wide screens. Six panels (full area, then the
   48 km zoom) wrap into two rows of three, one row per area. */
@media (min-width: 701px) {
  .panels:has(> .panel:nth-child(6)) { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; grid-auto-columns: auto; gap: 18px 14px; }
  .panels:has(> .panel:nth-child(6)) > .panel { grid-row: auto; grid-template-rows: auto auto; align-content: start; }
}

/* Station chart: vertical line at the viewer's current time */
.chart-now { stroke: var(--accent); stroke-width: 2; pointer-events: none; }
h2 + .key-results { border-top: 0; margin-top: 4px; }

/* ---------- Title block, compact (2026-10-20): author, affiliation and date on one line ---------- */
.hero > .wrap { padding: 26px 32px 24px; }
.hero .hero-logo { width: 32px; height: 32px; margin: 0 auto 10px; }
.hero h1 { margin: 10px 0 0; }
.hero .byline, .hero .affil, .hero .stamp { display: inline-block; margin: 12px 0 0; font-size: 14px; font-weight: 500; color: var(--hero-muted); }
@media (max-width: 700px) {
  .hero > .wrap { padding: 20px 16px 18px; }
  .hero .byline, .hero .affil, .hero .stamp { font-size: 12.5px; margin-top: 8px; }
}

/* ---------- Supplement: boxes span the card like the main viewers; text and tables keep the reading width ---------- */
section > .wrap-wide > details.supp { max-width: none; margin: 14px 0; }
details.supp > .supp-body > * { max-width: var(--measure); margin-inline: auto; }
details.supp > .supp-body > .viewer { max-width: none; }

/* ---------- Section bar, slim (2026-10-20): 44 px bar; links keep a 44 px tap area by overlapping the bar's padding ---------- */
@media (min-width: 701px) {
  .nav-in { padding-block: 6px; }
  .nav a, .nav-tests summary, #themeToggle { margin-block: -6px; }
  #themeToggle { border-color: transparent; background: transparent; }
  #themeToggle:hover { background: var(--accent-hover); border-color: transparent; }
}

/* ---------- Section bar highlight (2026-10-20): one style for every bar item, drawn as a pill inset 6 px
   from the bar's edges, so the 44 px tap area never shows edge to edge. Hover = light tint;
   current section and open menu = glass pill. ---------- */
.nav a, .nav-tests summary, #themeToggle { position: relative; isolation: isolate; background: transparent !important; box-shadow: none !important; }
.nav a::before, .nav-tests summary::before, #themeToggle::before {
  content: ""; position: absolute; inset: 6px 0; z-index: -1; border-radius: 999px; transition: background .15s;
}
#themeToggle::before { inset: 6px; }
.nav a.nav-brand { padding-inline: 8px; }
.nav a:hover::before, .nav-tests summary:hover::before, #themeToggle:hover::before { background: var(--accent-hover); }
.nav a.is-active::before, .nav-tests summary.is-active::before, .nav-tests[open] summary::before {
  background: var(--glass-pill); box-shadow: var(--glass-pill-edge);
}
.nav a.nav-brand.is-active::before { background: transparent; box-shadow: none; }
.nav-brand:hover .nav-code, .nav-brand.is-active .nav-code { background: transparent; color: inherit; }
@media (prefers-reduced-motion: reduce) { .nav a::before, .nav-tests summary::before, #themeToggle::before { transition: none; } }

/* ---------- Phone shapes match the wide layout (2026-10-20): pill-shaped bar, 24 px cards ---------- */
@media (max-width: 700px) {
  .nav-in { border-radius: 999px; padding-inline: 6px; }
  section > .wrap, section > .wrap-wide { border-radius: var(--r-card); }
}
/* Narrow phones (360 px): the internal page's eight 44 px bar items need the full width */
@media (max-width: 380px) {
  .nav { padding-inline: 0; }
  .nav-in { padding-inline: 0; }
}

/* ---------- Charts are drawn for 760 px; never stretch them wider (2026-10-21), so text and lines keep their size ---------- */
.chart-svg { max-width: 760px; margin-inline: auto; }
.chart-now { vector-effect: non-scaling-stroke; }

/* Colour scale on phones: every other number, so labels do not collide */
@media (max-width: 700px) { .cbar-ticks span:nth-child(even) { visibility: hidden; } }

/* Table footnotes: directly under the table, small, left-aligned with it */
.table-note { max-width: var(--measure); margin: -6px auto 18px; font-size: 13px; line-height: 1.5; color: var(--ink-2); text-align: left; }
.table-note sup { font-size: 0.75em; margin-right: 2px; }
.exhibit .table-note { max-width: none; margin: 8px 0 0; width: 0; min-width: 100%; }  /* takes the table's width, never widens it */

/* ---------- Logos (2026-10-21): full DI Lab logo in the title block; the D mark stays in the sticky bar ---------- */
.hero-logo-link { display: flex; width: fit-content; align-items: center; min-height: 44px; margin: 0 auto 10px; }
.hero .hero-logo { display: block; width: auto; height: 34px; margin: 0; }
@media (max-width: 700px) { .hero .hero-logo { height: 28px; } }
.nowrap { white-space: nowrap; }
.hero .stamp { display: block; margin-top: 4px; }
.rights a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.rights a:hover { color: var(--ink); }

/* ---------- Section bar (2026-10-21): on wide screens the tabs sit centred; the brand and theme switch hold the ends ---------- */
@media (min-width: 1000px) {
  .nav-in { justify-content: center; padding-inline: 170px; }
  .nav a.nav-brand { position: absolute; left: 18px; top: 0; bottom: 0; margin-block: 0; }
  #themeToggle { position: absolute; right: 12px; top: 0; bottom: 0; margin: auto 0; }
  .nav a.lang-toggle { position: absolute; right: 56px; top: 0; bottom: 0; height: 44px; margin: auto 0; }
}
/* 701-999 px: the tabs sit centred between the brand and the right-hand group (language link, if any, and theme switch) */
@media (min-width: 701px) and (max-width: 999px) {
  .nav-in > .nav-brand + * { margin-left: auto; }
  .nav-in > :nth-last-child(2):not(.lang-toggle),
  .nav-in > :nth-last-child(3):has(+ .lang-toggle) { margin-right: auto; }
  #themeToggle { margin-left: 0; }
}
/* 701-960 px: with the language link the bar is full, so the brand shows the D mark only */
@media (min-width: 701px) and (max-width: 960px) {
  .nav-in:has(.lang-toggle) .nav-brand .nav-code { display: none; }
}

/* ---------- Footer logo (2026-10-21): between the credit line and the copyright line ---------- */
.footer-logo { display: flex; width: fit-content; align-items: center; min-height: 44px; margin: 14px auto 0; }
.footer-logo img { display: block; width: auto; height: 28px; }
.footer-logo .logo-dark { display: none; }
[data-theme="dark"] .footer-logo .logo-light { display: none; }
[data-theme="dark"] .footer-logo .logo-dark { display: block; }
.footer-logo + .rights { margin-top: 6px; }

/* ---------- Back to top (2026-10-21): glass, resting on the right edge of the cards ---------- */
#toTop {
  right: calc(max(30px, (100% - var(--maxw-wide)) / 2) + 14px);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--glass-button); color: var(--ink);
  -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow);
}
#toTop svg { width: 20px; height: 20px; }
#toTop:hover, #toTop:focus-visible { background: var(--glass-button); color: var(--accent); }
#toTop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 700px) { #toTop { right: 24px; } }

/* ---------- References (2026-10-21): collapsed by default; citation links open the list ---------- */
details.refs > summary { display: flex; align-items: baseline; gap: 10px; min-height: 44px; padding-top: 10px; cursor: pointer;
  list-style: none; font-size: 19px; font-weight: 600; color: var(--ink); }
details.refs > summary::-webkit-details-marker { display: none; }
details.refs > summary::before { content: '\25B8'; color: var(--ink-3); transition: transform .15s; }
details.refs[open] > summary::before { transform: rotate(90deg); }
details.refs > summary .supp-note { font-size: 14px; font-weight: 400; color: var(--ink-3); }
details.refs > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
details.refs > .references { margin-top: 10px; }
@media (max-width: 700px) { details.refs > summary { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { details.refs > summary::before { transition: none; } }

/* ---------- Korean version (2026-10-21): IBM Plex Sans KR for Hangul next to Hanken Grotesk; Korean words never break mid-word ---------- */
html:lang(ko) { --sans: "Hanken Grotesk", "IBM Plex Sans KR", sans-serif; }
html:lang(ko) body { word-break: keep-all; }

/* ---------- Touch and phone bar (2026-10-21) ---------- */
/* No grey square on tap; keyboard focus keeps its outline. */
html { -webkit-tap-highlight-color: transparent; }
/* The public page's phone bar names the current section: its item widens from the icon to icon + name. */
@media (max-width: 700px) {
  .nav-expand .nav-label { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
    font-size: 13px; transition: max-width .25s ease, opacity .2s ease; }
  .nav-expand a, .nav-expand .nav-tests summary { gap: 0; transition: padding .25s ease, gap .25s ease; }
  .nav-expand a.is-active, .nav-expand .nav-tests summary.is-active { width: auto; padding: 0 12px; gap: 6px; }
  .nav-expand a.is-active .nav-label, .nav-expand .nav-tests summary.is-active .nav-label { max-width: 110px; opacity: 1; }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .nav-expand .nav-label, .nav-expand a, .nav-expand .nav-tests summary { transition: none; }
}

/* ---------- Language switch (2026-10-21): "English | 한국어" with the current language highlighted; the whole control
   links to the other language. Narrower bars show "EN | 한". ---------- */
.nav a.lang-toggle { gap: 0; padding-inline: 10px; white-space: nowrap; font-family: "Hanken Grotesk", "IBM Plex Sans KR", sans-serif; }
.lang-toggle .lang-sep { margin-inline: 6px; color: var(--ink-3); }
.lang-toggle .is-current { color: var(--accent); font-weight: 600; }
.lang-toggle .lang-short { display: none; }
@media (min-width: 1100px) {
  .nav-in:has(.lang-toggle) { padding-inline: 200px; }
}
@media (max-width: 1099px) {
  .lang-toggle .lang-long { display: none; }
  .lang-toggle .lang-short { display: inline; }
}
@media (max-width: 700px) {
  .nav a.lang-toggle { width: auto; min-width: 44px; padding-inline: 4px; font-size: 12px; }
  .lang-toggle .lang-sep { margin-inline: 3px; }
}