/* Inter (SIL Open Font License, docs/vendor/fonts/Inter-LICENSE.txt), served from this site so
   no visitor data goes to a font service. One variable file per script covers weights 400-900. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("vendor/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("vendor/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tokens: adapted from a forest-and-lime reference system; map class colours are kept
   clear of the interface greens so the legend never competes with the chrome. */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #e8ebe6;
  --wash: #e2f6d5;
  --ink: #163300;
  --text: #454745;
  --muted: #6a6c6a;
  --line: rgba(14, 15, 12, 0.14);
  --accent: #9fe870;
  --on-accent: #163300;
  --danger: #cb272f;
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.08);

  /* Map colours: the Okabe-Ito palette (colour-blind safe, free to use). The ten classes are
     lighter and darker mixes of their group's colour. Map colours sit on satellite imagery,
     not on the page, so both themes share them. */
  --c-agriculture: #e69f00;
  --c-vegetation: #009e73;
  --c-built: #d55e00;
  --c-water: #0072b2;
  --c-changed: #cc79a7;
  --c-lowconf: #f0e442;   /* confidence layer: opacity carries the value */
  --c-invalid: #8c8c8c;   /* cloud, shadow or missing data: neutral, outside the palette */
  --c-AnnualCrop: #f0c566;
  --c-PermanentCrop: #e69f00;
  --c-Pasture: #ac7700;
  --c-Forest: #006b4e;
  --c-HerbaceousVegetation: #66c5ab;
  --c-Residential: #d55e00;
  --c-Industrial: #8f3f00;
  --c-Highway: #e69e66;
  --c-SeaLake: #0072b2;
  --c-River: #56b4e9;

  /* Space backdrop behind the globe, the same in both themes. Text placed straight on the
     night sky (the hero on wide screens) uses the on-space colours. */
  --space: #03050a;
  --star: #ffffff;
  --star-warm: #fff1d2;
  --star-cool: #d6e8ff;
  --on-space-ink: #e2f6d5;
  --on-space-text: #c3d3bb;

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-card: 28px;
  --r-field: 10px;
  --r-pill: 9999px;
}
/* Dark: the forest-and-lime identity moved onto the night sky. */
:root[data-theme="dark"] {
  --bg: #03050a;
  --surface: #0a120d;
  --surface-2: #142219;
  --wash: #183319;
  --ink: #e2f6d5;
  --text: #c3d3bb;
  --muted: #8da38f;
  --line: rgba(226, 246, 213, 0.16);
  --on-accent: #0d2100;
  --danger: #ff8b8f;
  --shadow: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
/* The first screen is the map app; the page scrolls on to the sections below it. */
body {
  position: relative;
  display: flow-root;   /* keeps the sections' top margin inside the body */
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.006em;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.map-wrap { position: absolute; top: 0; left: 0; right: 0; height: 100vh; height: 100svh; z-index: 0; overflow: hidden; background: var(--space); }
/* Stars sit behind the transparent map canvases; app.js draws them. */
#stars { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#map, #map-after { position: absolute; inset: 0; background: transparent; }
#map-after[hidden] { display: none; }
#map-after, #map-after * { pointer-events: none; }
.maplibregl-ctrl-attrib { display: none; }

/* ---------- split view handle: 44px touch strip with a thin visible line ---------- */
.split-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; z-index: 1; width: 44px;
  transform: translateX(-50%); cursor: ew-resize; touch-action: none; outline: none;
}
.split-handle[hidden] { display: none; }
.split-line {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%);
  background: var(--surface); box-shadow: 0 0 0 1px var(--line);
}
.split-knob {
  position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px var(--ink);
}
.split-knob::before, .split-knob::after {
  content: ""; position: absolute; top: 12px; bottom: 12px; width: 2px; border-radius: 1px; background: var(--ink);
}
.split-knob::before { left: 15px; } .split-knob::after { right: 15px; }
.split-handle:focus-visible .split-knob,
.split-handle.dragging .split-knob { box-shadow: 0 0 0 2px var(--ink), 0 0 0 5px var(--accent); }
.split-tag {
  position: absolute; top: calc(50% + 30px); padding: 3px 10px; white-space: nowrap;
  border-radius: var(--r-pill); background: var(--surface); color: var(--ink);
  box-shadow: 0 0 0 1px var(--line); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.split-tag.before { right: calc(50% + 8px); }
.split-tag.after { left: calc(50% + 8px); }

/* ---------- map legend: sits above the source credit, clear of the panels ---------- */
.legend {
  position: absolute; left: 24px; bottom: 44px; z-index: 2; max-width: 400px;
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 6px 12px; list-style: none;
  font-size: 12px; font-weight: 500; color: var(--ink); pointer-events: none;
  background: var(--surface); border-radius: var(--r-field); box-shadow: 0 0 0 1px var(--line);
}
.legend[hidden] { display: none; }

/* Current year of the time-lapse, large in the map corner beside the left panel. */
.map-year {
  position: absolute; top: 84px; left: 448px; z-index: 2; padding: 2px 16px; pointer-events: none;
  font-weight: 900; font-size: 56px; line-height: 1.1; letter-spacing: -0.035em; color: var(--ink);
  font-variant-numeric: tabular-nums; background: var(--surface); border-radius: 16px; box-shadow: 0 0 0 1px var(--line);
}
.map-year[hidden] { display: none; }
.legend li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend .swatch { width: 10px; height: 10px; }
.legend li[data-key="lowconf"] { white-space: normal; align-items: flex-start; }
.legend li[data-key="lowconf"] .swatch { margin-top: 3px; }
.legend li.off { color: var(--muted); }
.legend li.off .swatch { opacity: 0.4; }

/* ---------- top bar ---------- */
.topbar {
  position: absolute; inset: 0 0 auto 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 24px; pointer-events: none;
}
.section-links { display: flex; gap: 8px; }
.section-links .pill-button { font-size: 14px; white-space: nowrap; }
.topbar > * { pointer-events: auto; }
.wordmark {
  font-weight: 900; font-size: 22px; letter-spacing: -0.03em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  background: var(--surface); padding: 6px 16px; border-radius: var(--r-pill);
  box-shadow: 0 0 0 1px var(--line);
}
.topbar-tools { display: flex; gap: 8px; }

/* ---------- shared controls ---------- */
.pill-button {
  border: 0; border-radius: var(--r-pill); padding: 11px 24px;
  font-weight: 500; cursor: pointer; background: var(--surface-2); color: var(--ink);
}
.pill-button.primary { background: var(--accent); color: var(--on-accent); width: 100%; font-weight: 600; }
.pill-button.primary:disabled { opacity: 0.6; cursor: progress; }
.pill-button.ghost, .pill-select {
  background: var(--surface); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink); padding: 8px 16px;
}
.pill-select { border: 0; border-radius: var(--r-pill); cursor: pointer; }

.segmented {
  display: flex; padding: 4px; gap: 2px;
  background: var(--surface-2); border-radius: var(--r-pill);
}
.segmented button {
  flex: 1; border: 0; background: transparent; cursor: pointer;
  border-radius: var(--r-pill); padding: 8px 12px; font-weight: 500; color: var(--text);
  white-space: nowrap;
}
.segmented button[aria-selected="true"] { background: var(--accent); color: var(--on-accent); }
.segmented.small button { padding: 6px 10px; font-size: 14px; }
.segmented button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- layout ---------- */
.stage {
  position: absolute; top: 68px; left: 0; right: 0; height: calc(100vh - 108px); height: calc(100svh - 108px); z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  padding: 8px 24px 0; pointer-events: none;
}
.left { width: min(400px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 20px; }
.left > *, .results { pointer-events: auto; }

.hero h1 {
  margin: 0; color: var(--on-space-ink); font-weight: 900;
  font-size: clamp(44px, 5vw, 72px); line-height: 0.9; letter-spacing: -0.035em;
  text-wrap: balance;
}
.hero p { margin: 16px 0 0; max-width: 34ch; color: var(--on-space-text); font-size: 18px; }
.hero[hidden] { display: none; }

.card {
  background: var(--surface); border-radius: var(--r-card);
  box-shadow: 0 0 0 1px var(--line), var(--shadow);
}
.controls { padding: 20px; display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 2; }

.search { position: relative; }
.search input, .fields input {
  width: 100%; padding: 12px 16px; background: var(--surface);
  border: 1px solid var(--muted); border-radius: var(--r-field);
}
.search input:focus, .fields input:focus { border-color: var(--ink); outline: none; box-shadow: inset 0 0 0 1px var(--ink); }
.suggestions {
  position: absolute; z-index: 5; left: 0; right: 0; top: 52px; margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border-radius: 16px; box-shadow: 0 0 0 1px var(--line), var(--shadow);
  max-height: 320px; overflow: auto;
}
.suggestions li { padding: 10px 12px; border-radius: var(--r-field); cursor: pointer; }
.suggestions li small { display: block; color: var(--muted); font-size: 14px; }
.suggestions li:hover, .suggestions li[aria-selected="true"] { background: var(--wash); }
.suggestions li.empty { cursor: default; color: var(--muted); }

.options { display: flex; flex-direction: column; gap: 14px; }
.options[hidden] { display: none; }
.hint { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.hint.place { color: var(--ink); font-weight: 500; }
.label, .field-head label, .size span { display: block; font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.fields.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { position: relative; min-width: 0; }
.field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.text-button {
  border: 0; background: none; padding: 2px 0; margin-bottom: 6px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
  white-space: nowrap;
}
.text-button[aria-expanded="true"] { text-decoration-thickness: 2px; }
.date-list {
  position: absolute; z-index: 5; left: 0; top: calc(100% + 6px); width: max(100%, 240px); padding: 6px;
  background: var(--surface); border-radius: 16px; box-shadow: 0 0 0 1px var(--line), var(--shadow);
  max-height: 280px; overflow: auto;
}
.fields.two .field:last-child .date-list { left: auto; right: 0; }
.date-list[hidden] { display: none; }
.date-list ul { margin: 0; padding: 0; list-style: none; }
.date-list button {
  width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 10px;
  border: 0; border-radius: var(--r-field); background: none; cursor: pointer; text-align: left;
  color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.date-list button small { color: var(--muted); font-size: 13px; }
.date-list button:hover, .date-list button:focus-visible, .date-list button[aria-current="true"] { background: var(--wash); }
.date-list .empty { margin: 0; padding: 8px 10px; font-size: 14px; color: var(--muted); }
.date-list .empty.error { color: var(--danger); }
.fields[hidden] { display: none; }
.row { display: flex; gap: 16px; align-items: flex-end; justify-content: space-between; }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.status-row[hidden] { display: none; }
.status { margin: 0; font-size: 14px; color: var(--muted); }
.pill-button.small { padding: 6px 16px; font-size: 14px; flex: none; }
.pill-button[hidden] { display: none; }
.status.error { color: var(--danger); }

/* ---------- results ---------- */
/* Wider on large screens; scrolls on its own and keeps the wheel from spilling to the page. */
.results {
  width: clamp(420px, 34vw, 520px); max-height: 100%; overflow-y: auto; padding: 24px;
  scrollbar-gutter: stable; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 18px;
}
.results[hidden] { display: none; }
.sheet-head, .sheet-body { display: flex; flex-direction: column; gap: 18px; }
.grabber {
  display: none; width: 100%; height: 36px; align-items: center; justify-content: center;
  border: 0; background: none; cursor: pointer; flex: none;
}
.grabber i { width: 40px; height: 4px; border-radius: var(--r-pill); background: var(--muted); }
.results h2 { margin: 0; color: var(--ink); font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; }
.results .meta { margin: 4px 0 0; font-size: 14px; color: var(--muted); }

.figure { margin: 0; }
.figure strong {
  display: block; color: var(--ink); font-weight: 900;
  font-size: 56px; line-height: 0.9; letter-spacing: -0.035em;
}
.figure span { display: block; margin-top: 6px; color: var(--ink); font-weight: 500; }

.bars { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.bars .head { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.bars .name { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; }
.swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.track { height: 8px; border-radius: var(--r-pill); background: var(--surface-2); margin-top: 6px; overflow: hidden; }
.track i { display: block; height: 100%; border-radius: var(--r-pill); }
.delta { font-variant-numeric: tabular-nums; }

table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
th, td { text-align: right; padding: 7px 0; border-bottom: 1px solid var(--line); font-weight: 400; }
th:first-child, td:first-child { text-align: left; }
thead th { color: var(--muted); }
tbody td:first-child { color: var(--ink); font-weight: 500; }
td .name { display: inline-flex; align-items: center; gap: 8px; }
td .trend { display: block; margin-left: 20px; color: var(--muted); font-size: 13px; font-weight: 400; }
details summary { cursor: pointer; color: var(--ink); font-weight: 500; font-size: 14px; }

.transitions { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; }
.transitions li { display: flex; justify-content: space-between; gap: 12px; }
.subhead { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--ink); }

.notice.prior { display: grid; gap: 6px; }
.notice.prior p { margin: 0; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.notice { margin: 0; padding: 12px 14px; border-radius: var(--r-field); background: var(--wash); color: var(--ink); font-size: 14px; }
.limits { margin: 0; font-size: 13px; color: var(--muted); }

.sides { display: grid; gap: 6px; margin-top: 12px; font-size: 14px; }
.sides[hidden] { display: none; }
.sides p { margin: 0; display: flex; justify-content: space-between; gap: 12px; }
.sides span { color: var(--muted); }
.sides strong { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.sides .hint { display: block; margin-top: 2px; }

/* ---------- over-time chart ---------- */
.chart { position: relative; border-radius: var(--r-field); }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font); }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.chart .axis.muted { fill: var(--muted); opacity: 0.6; text-decoration: line-through; }
.chart .gap { fill: var(--surface-2); opacity: 0.6; }
.chart .pick { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .series { stroke-width: 2; stroke-linecap: round; }
.chart .faded { opacity: 0.35; }
.chart .end { font-size: 10px; font-weight: 600; }
.chart .hit { fill: transparent; cursor: pointer; }
.chart-tip {
  position: absolute; bottom: calc(100% + 6px); z-index: 2; display: grid; gap: 2px; min-width: 170px;
  padding: 8px 10px; font-size: 13px; color: var(--ink); background: var(--surface);
  border-radius: var(--r-field); box-shadow: 0 0 0 1px var(--line), var(--shadow); pointer-events: none;
}
.chart-tip[hidden] { display: none; }
.chart-tip .meta { margin: 0; font-size: 12px; }
.chart-tip .row { display: flex; align-items: center; gap: 6px; }
.chart-tip .row b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
table.years th .swatch { display: inline-block; }

.player { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-pill); background: var(--surface-2); }
.player[hidden] { display: none; }
.player .pill-button { min-width: 96px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--ink); }
.player input[type="range"] { flex: 1; min-width: 0; accent-color: var(--ink); }
.player .speed { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink); }
.player .pill-select { padding: 5px 10px; font-size: 14px; }

.range { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink); }
.range input { flex: 1; accent-color: var(--ink); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- sections below the map ---------- */
.scroll-cue {
  position: absolute; top: calc(100vh - 38px); top: calc(100svh - 38px); right: 24px; z-index: 2;
  display: flex; align-items: center; gap: 8px; padding: 6px 16px; border: 0; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--ink); background: var(--surface);
  border-radius: var(--r-pill); box-shadow: 0 0 0 1px var(--line); white-space: nowrap;
}
.scroll-cue::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg);
}
.sections { position: relative; z-index: 1; margin-top: 100vh; margin-top: 100svh; background: var(--bg); border-top: 1px solid var(--line); }
/* Wide and close to the screen edges; the gutter grows a little with the screen. */
.section {
  max-width: 1680px; margin: 0 auto; padding: 56px clamp(16px, 3vw, 48px);
  display: flex; flex-direction: column; gap: 24px;
}
.section + .section { border-top: 1px solid var(--line); }
.section h2 { margin: 0; color: var(--ink); font-size: clamp(32px, 4vw, 48px); font-weight: 900; letter-spacing: -0.035em; line-height: 1; }
.section-body { display: flex; flex-direction: column; gap: 16px; }
.section-body .meta { margin: 0; font-size: 14px; color: var(--muted); }
.filter { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--ink); }

table.rankings th, table.rankings td { padding-left: 10px; vertical-align: middle; }
table.rankings th:first-child, table.rankings td:first-child { padding-left: 0; }
table.rankings th:nth-child(2), table.rankings td:nth-child(2) { text-align: left; }
table.rankings th { vertical-align: bottom; }
table.rankings td small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
table.rankings tbody tr { cursor: pointer; }
table.rankings tbody tr:hover { background: var(--wash); }
.sort { border: 0; background: none; padding: 0; font: inherit; color: var(--ink); font-weight: 600; cursor: pointer; }
.row-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.tag {
  display: inline-block; padding: 1px 8px; border-radius: var(--r-pill); background: var(--surface-2);
  color: var(--ink); font-size: 12px; font-weight: 500;
}
/* Examples: Turkey on its own row, then the continents two by two (three cards each). */
.story-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.tag.warn { background: var(--wash); color: var(--danger); }
table.rankings td .tag { margin: 2px 4px 0 0; }
.story-group { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.story-group.wide { grid-column: 1 / -1; }
.story-group .stories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.story-group.wide .stories { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.story-group h3 { margin: 8px 0 0; color: var(--ink); font-size: 20px; font-weight: 700; letter-spacing: -0.015em; }
.story-open .tag { margin-left: 6px; }
.stories { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.story { display: flex; flex-direction: column; gap: 8px; }
.story p { margin: 0; font-size: 14px; }
.story-open {
  display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 0 0 14px; border: 0; cursor: pointer;
  text-align: left; color: var(--ink); background: var(--surface-2); border-radius: var(--r-card); overflow: hidden;
}
.story-open img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--line); }
.story-open strong { padding: 0 16px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.story-open .meta { padding: 0 16px; margin: 0; font-size: 14px; color: var(--muted); }
.story-open:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.sources { font-size: 13px; color: var(--muted); }
.sources a, .story-text a { color: var(--ink); }
.story-text p { margin: 0 0 6px; font-size: 14px; }
.lead { margin: 0; font-size: 17px; color: var(--ink); max-width: 70ch; }
.flow { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.flow li { position: relative; display: grid; align-content: start; gap: 6px; padding: 14px; border-radius: 20px; background: var(--surface-2); font-size: 14px; }
.flow li strong { color: var(--ink); }
/* Connector from each step to the next: a short line and an arrowhead. */
.flow li + li::before { content: ""; position: absolute; left: -19px; top: 50%; width: 12px; height: 2px; background: var(--ink); }
.flow li + li::after {
  content: ""; position: absolute; left: -9px; top: calc(50% - 4px);
  border-left: 6px solid var(--ink); border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.decisions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.decisions p:not(.subhead) { margin: 0; font-size: 14px; }
.group-list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 14px; }
.group-list li { display: flex; gap: 10px; }
.group-list .name { display: inline-flex; align-items: center; gap: 6px; min-width: 150px; flex: none; color: var(--ink); font-weight: 500; }
.limits-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.unavailable { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; }
.unavailable li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.unavailable li span:last-child { color: var(--muted); text-align: right; }

/* ---------- map furniture ---------- */
.pin { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px #163300, 0 0 0 5px rgba(255,255,255,.9); }
.credit {
  /* Anchored to the bottom of the first screen; grows upwards if it wraps. */
  position: absolute; left: 24px; top: calc(100vh - 8px); top: calc(100svh - 8px); transform: translateY(-100%); z-index: 1;
  padding: 3px 10px; max-width: 60vw;
  font-size: 12px; color: var(--muted); background: var(--surface); border-radius: var(--r-pill);
  box-shadow: 0 0 0 1px var(--line); pointer-events: none;
}

@media (max-width: 1100px) {
  .section-links { display: none; }
  /* Tablets: one group per row; the four steps as a 2 x 2 grid without connectors. */
  .story-groups { grid-template-columns: 1fr; }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .flow li + li::before, .flow li + li::after { display: none; }
}

/* ---------- small screens: the globe stays on top, panels become a sheet ---------- */
@media (max-width: 860px) {
  body { overflow: visible; padding-bottom: var(--sheet-peek, 0px); }
  /* The map sits above the scrolling form so the globe always keeps its share of the screen. */
  .map-wrap { position: sticky; inset: auto; top: 0; height: 46vh; height: 46svh; z-index: 3; }
  .topbar { z-index: 5; }
  .stage { z-index: auto; }   /* no stacking context, so the fixed sheet can rise above the map */
  .segmented.small button { padding: 6px 8px; }
  .legend { left: 8px; bottom: 8px; max-width: calc(100% - 16px); }
  .topbar { position: fixed; }
  .section-links, .scroll-cue { display: none; }
  .sections { margin-top: 0; }
  .section { padding: 32px 16px; scroll-margin-top: 46svh; }   /* clear of the sticky map */
  /* Each group is a strip that scrolls sideways and snaps to cards, edge to edge. */
  .story-group .stories, .story-group.wide .stories {
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: min(64vw, 280px); gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 0 -16px; padding: 0 16px 4px; scroll-padding: 0 16px; scrollbar-width: none;
  }
  .story-group .stories::-webkit-scrollbar { display: none; }
  .story { scroll-snap-align: start; }
  .story-open strong { padding: 0 12px; font-size: 15px; }
  .story-open .meta { padding: 0 12px; font-size: 12px; }
  table.rankings { font-size: 13px; }
  .decisions { grid-template-columns: 1fr; }
  .flow li + li::before { left: 50%; top: -19px; width: 2px; height: 12px; }
  .flow li + li::after { left: calc(50% - 4px); top: -9px; border: 5px solid transparent; border-top: 6px solid var(--ink); border-bottom: 0; }
  .group-list .name { min-width: 120px; }
  .map-year { top: 60px; left: auto; right: 8px; font-size: 32px; padding: 0 12px; border-radius: 12px; }
  .topbar { padding: 12px 16px; }
  .stage { position: relative; inset: auto; height: auto; flex-direction: column; padding: 24px 16px 16px; gap: 16px; pointer-events: auto; background: var(--bg); }
  /* Below the map the hero sits on the page, not on the sky. */
  .hero h1 { color: var(--ink); }
  .hero p { color: var(--text); }
  .wordmark { font-size: 17px; padding: 6px 12px; }
  .pill-button.ghost, .pill-select { padding: 6px 10px; font-size: 14px; }
  .left, .results { width: 100%; max-height: none; }
  .hero h1 { font-size: clamp(40px, 12vw, 56px); }
  .credit { position: static; transform: none; max-width: none; margin: 0 16px 16px; display: inline-block; border-radius: 12px; }

  /* Results become a bottom sheet: closed shows the head, open stops at 60% so the globe keeps 40%. */
  .results {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 4;
    max-height: 60vh; max-height: 60dvh; padding: 0; gap: 0;
    overflow: hidden; overflow: clip;   /* clip: focus inside the body must not scroll the sheet itself */
    border-radius: var(--r-card) var(--r-card) 0 0;
    transform: translateY(calc(100% - var(--sheet-peek, 0px)));
    transition: transform 0.25s ease;
  }
  .results.open { transform: none; }
  .results.dragging { transition: none; }
  .grabber { display: flex; }
  .sheet-head { gap: 8px; padding: 0 16px 14px; touch-action: none; cursor: grab; }
  .sheet-head .figure strong { font-size: 44px; }
  .sheet-body { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 4px 16px 24px; }
}
/* Phones: the steps stack with downward connectors; the continent column gives way (the filter stays). */
@media (max-width: 600px) {
  .flow { grid-template-columns: 1fr; }
  .flow li + li::before, .flow li + li::after { display: block; }
  table.rankings .col-continent { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }