/* ============================================================================
   AFRICA 2036 INTELLIGENCE — an initiative by Orvantis Intelligence
   Design system.

   The visual thesis: this is an instrument, not a report and not a dashboard.
   Three rules govern everything below.

   1. Uncertainty is structural, not a footnote. Countries with thin evidence are
      literally rendered less resolved — a stipple overlay whose density tracks the
      confidence level. The map is only as sharp as the evidence behind it.
   2. Colour carries meaning or it does not appear. The three scenario hues are the
      only saturated colour in the system, so a hue always answers "which future is
      this?" Lens ramps are single-hue and neutral.
   3. Evidence and interpretation never look alike. Facts are set in the interface
      face; the platform's own readings are set in the serif and marked. A reader
      should be able to tell them apart from across the room.
   ============================================================================ */

@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-var.woff2') format('woff2-variations');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist-var.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/geist-mono-var.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* Ground — deep, faintly blue, never pure black: pure black kills the stipple. */
  --ink:      #0A0D11;
  --ink-1:    #10151A;
  --ink-2:    #161C23;
  --ink-3:    #1E262E;
  --rule:     #2A343E;
  --rule-soft:#1C242C;

  /* Text — warm archival paper against cold ground. */
  --bone:     #ECE7DB;
  --bone-2:   #B9B4A8;
  --bone-3:   #8D897F;   /* lifted from #837F76: at 11px it measured 4.30:1 on --ink-2, under the 4.5:1 bar */

  /* Scenario hues. Indigo dye, aurum, laterite earth.
     Chosen for luminance separation as well as hue, so the three remain
     distinguishable in greyscale and to colour-blind readers — and every scenario
     also carries a distinct glyph and label, never colour alone. */
  --momentum:     #7A9CCC;
  --momentum-ink: #16212F;
  --accel:        #D9A441;
  --accel-ink:    #2A2014;
  --disrupt:      #D06B50;   /* lifted from #C4573F: as 11–12px text it measured 4.43:1, under the 4.5:1 bar */
  --disrupt-ink:  #2A1712;

  --signal:   #79A794;   /* affirmative / verified */
  --warn:     #C98A3E;

  /* Lens ramp: neutral, single-hue, low → high. Never rainbow. */
  --lens-0: #141A20;
  --lens-1: #1F2C34;
  --lens-2: #2E4149;
  --lens-3: #455C60;
  --lens-4: #647A76;
  --lens-5: #8B9C8F;
  --lens-6: #B8C2AF;

  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --s0: 0.25rem; --s1: 0.5rem;  --s2: 0.75rem; --s3: 1rem;
  --s4: 1.5rem; --s5: 2rem;     --s6: 3rem;    --s7: 4.5rem; --s8: 7rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 620ms;
  --dur-fast: 260ms;

  --rail: 21rem;
  --hud: 3.25rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--rule) var(--ink); }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--accel); color: #14100A; }

:where(a) { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accel);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Type scale ─────────────────────────────────────────────────────────── */

.display {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.6rem, 7.5vw, 6.4rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0;
}
.display em { font-style: italic; font-weight: 300; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; margin: 0; line-height: 1.14; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.6rem); font-weight: 300; }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

.lede {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.9vw, 1.4rem);
  line-height: 1.5;
  color: var(--bone-2);
  font-weight: 300;
}

/* Label: the instrument's voice. Wide-tracked mono small caps. */
.label {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-3);
  display: block;
}
.label--tight { letter-spacing: 0.12em; }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.big-num {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
}

.muted { color: var(--bone-3); }
.small { font-size: 0.82rem; line-height: 1.5; }
.xsmall { font-size: 0.74rem; line-height: 1.45; }

/* ── Evidence classes — the most important rule in the system ────────────── */

/* An observed value with a source. Interface face, plain, unadorned. */
.ev-fact { font-family: var(--sans); }

/* The platform's own reading. Serif, so it never reads as measurement. */
.reading-text {
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--bone);
  font-weight: 300;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s0);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.22em 0.5em;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--bone-3);
  line-height: 1.4;

  /* A chip carries two very different things: a one-word category, and a sentence
     describing what an entry affects. This used to be `white-space: nowrap`, which
     is invisible on the first and catastrophic on the second — a chip holding a
     full sentence had a min-content width of 1,623px, and because a flex container
     wraps between its items and never inside one, that single chip set the width of
     the whole document. /changes/ scrolled sideways by 623px at 1363px and by
     1,275px on a phone, and the text past the edge was unreachable.

     Wrapping normally gives both cases what they need with no modifier and no
     branch in the markup: a short chip still fits on one line and looks exactly as
     it did, and a long one wraps. `anywhere` rather than `break-word` because only
     `anywhere` reduces the min-content contribution, which is the property that
     actually stops the page from being widened — and it is what lets a bare hash or
     URL inside a chip break instead of pushing the layout open. */
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
  min-width: 0;
}
.chip--fact        { border-color: #33474A; color: #8FB0A6; }
.chip--planned     { border-color: #4A4230; color: #C0A570; }
.chip--funded      { border-color: #3E4A33; color: #9DB183; }
.chip--projection  { border-color: #38414E; color: #98A6BE; }
.chip--assumption  { border-color: #46404E; color: #AFA0BC; }
.chip--contested   { border-color: #513A34; color: #C58F7E; }
.chip--interpretation { border-color: #3D3A33; color: #A8A08C; font-style: normal; }
.chip--gap         { border-color: #3A3A3A; color: #7C7C7C; border-style: dashed; }

/* ── Scenario identity ──────────────────────────────────────────────────── */

[data-scenario='momentum']     { --sc: var(--momentum); --sc-ink: var(--momentum-ink); }
[data-scenario='acceleration'] { --sc: var(--accel);    --sc-ink: var(--accel-ink); }
[data-scenario='disruption']   { --sc: var(--disrupt);  --sc-ink: var(--disrupt-ink); }

/* ── Layout shell ───────────────────────────────────────────────────────── */

.shell { min-height: 100dvh; display: flex; flex-direction: column; }

.hud {
  position: sticky; top: 0; z-index: 60;
  height: var(--hud);
  display: flex; align-items: center; gap: var(--s4);
  padding: 0 var(--s4);
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule-soft);
}

.wordmark {
  font-family: var(--serif);
  font-size: 1.06rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--bone);
  display: flex; align-items: baseline; gap: 0.5em;
  white-space: nowrap;
}
.wordmark b { font-weight: 500; }
.wordmark .yr { font-family: var(--mono); font-size: 0.78em; color: var(--accel); letter-spacing: 0.06em; }

.hud nav { display: flex; gap: var(--s3); margin-left: auto; align-items: center; }
.hud nav a, .navbtn {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bone-3); text-decoration: none; padding: var(--s1) 0;
  background: none; border: 0; cursor: pointer; transition: color var(--dur-fast) var(--ease);
}
.hud nav a:hover, .navbtn:hover, .hud nav a[aria-current='page'] { color: var(--bone); }
.hud nav a[aria-current='page'] { box-shadow: inset 0 -1px 0 var(--accel); }

.skip {
  position: absolute; left: var(--s3); top: -4rem; z-index: 100;
  background: var(--accel); color: #14100A; padding: var(--s2) var(--s3);
  font-family: var(--mono); font-size: 0.75rem; text-decoration: none;
  transition: top var(--dur-fast) var(--ease);
}
.skip:focus { top: var(--s2); }

/* ── The Field: the map ─────────────────────────────────────────────────── */

/* The atlas is a fixed viewport frame: the rail scrolls inside itself and the map
   fills what is left. Without a bounded height here the 54-item list grows the grid
   row and the map collapses to nothing. */
/* `flex: 1 1 auto` rather than `flex: 1`: the shorthand `flex: 1` sets
   flex-basis to 0, which would override the height below and let the 54-item
   rail grow the row until the map collapsed. */
.field {
  position: relative;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  grid-template-rows: 100%;
  height: calc(100dvh - var(--hud));
  min-height: 0;
  overflow: hidden;
}

.rail {
  border-right: 1px solid var(--rule-soft);
  display: flex; flex-direction: column;
  min-height: 0;
  background: linear-gradient(180deg, var(--ink-1), var(--ink));
}
.rail__head { padding: var(--s4) var(--s4) var(--s3); border-bottom: 1px solid var(--rule-soft); }
.rail__scroll { overflow-y: auto; flex: 1; padding: var(--s2) 0 var(--s6); scrollbar-width: thin; }

.stage {
  position: relative;
  min-height: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

.map { width: 100%; height: 100%; display: block; }
.map__wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--s4); }

.c-shape {
  fill: var(--lens-1);
  stroke: var(--ink);
  stroke-width: 0.7;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.c-hit { fill: transparent; stroke: transparent; stroke-width: 6; cursor: pointer; }
.c-hit:focus-visible { outline: none; }

.c-grain { pointer-events: none; }

g.country.is-hover .c-shape,
g.country.is-active .c-shape { fill: var(--accel); }
g.country.is-active .c-outline { stroke: var(--bone); stroke-width: 1.6; }
g.country:focus-within .c-outline { stroke: var(--accel); stroke-width: 1.8; }

.c-outline { fill: none; stroke: transparent; stroke-width: 0; pointer-events: none; transition: stroke var(--dur-fast) var(--ease); }

.map.dimmed g.country:not(.is-match) { opacity: 0.22; }

.borders { fill: none; stroke: var(--ink); stroke-width: 0.55; opacity: 0.85; pointer-events: none; }
.coast   { fill: none; stroke: #47585F; stroke-width: 1.1; opacity: 0.75; pointer-events: none; }
.territory { fill: #171C20; stroke: #3A444A; stroke-width: 0.8; stroke-dasharray: 3 2.5; pointer-events: none; }

.micro-mark { fill: none; stroke: var(--bone-3); stroke-width: 1; pointer-events: none; opacity: 0.75; }
g.country.is-hover .micro-mark, g.country.is-active .micro-mark { stroke: var(--accel); opacity: 1; }

.maplabel {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em;
  fill: var(--bone-2); pointer-events: none; text-anchor: middle;
  paint-order: stroke; stroke: var(--ink); stroke-width: 2.6; stroke-linejoin: round;
}

/* Readout: a hairline leader and a typographic annotation, not a tooltip box. */
.readout {
  position: absolute; z-index: 20; pointer-events: none;
  padding: var(--s2) var(--s3);
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accel);
  max-width: 20rem;
  opacity: 0; transform: translateY(4px);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}
.readout.on { opacity: 1; transform: none; }
.readout__name { font-family: var(--serif); font-size: 1.15rem; line-height: 1.2; }
.readout__row { display: flex; justify-content: space-between; gap: var(--s3); font-size: 0.78rem; margin-top: var(--s1); }
.readout__row span:last-child { font-family: var(--mono); color: var(--bone); }

/* ── Controls: typographic, not widgets ─────────────────────────────────── */

.controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: var(--s3) var(--s5) var(--s4);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ink) 92%, transparent) 42%);
  display: flex; flex-direction: column; gap: var(--s3);
}

.scenario-switch { display: flex; gap: 0; align-items: stretch; border: 1px solid var(--rule); width: fit-content; }
.scenario-switch button {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: var(--s2) var(--s4);
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bone-3);
  border-right: 1px solid var(--rule);
  display: flex; align-items: center; gap: var(--s1);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.scenario-switch button:last-child { border-right: 0; }
.scenario-switch button:hover { color: var(--bone); }
.scenario-switch button[aria-pressed='true'] { color: var(--ink); background: var(--sc-b); }
.scenario-switch button[data-s='momentum']     { --sc-b: var(--momentum); }
.scenario-switch button[data-s='acceleration'] { --sc-b: var(--accel); }
.scenario-switch button[data-s='disruption']   { --sc-b: var(--disrupt); }
.sc-glyph { width: 9px; height: 9px; flex: none; }

/* Time spine — a ruled line, the way a chart baseline is ruled. */
.spine { display: flex; align-items: center; gap: var(--s4); }
.spine__track { position: relative; flex: 1; height: 2.6rem; display: flex; align-items: center; }
.spine__track::before { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: var(--rule); }
.spine__stops { position: relative; display: flex; justify-content: space-between; width: 100%; }
.spine__stop {
  appearance: none; background: var(--ink); border: 1px solid var(--rule); cursor: pointer;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em;
  color: var(--bone-3); padding: var(--s1) var(--s2);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.spine__stop:hover { color: var(--bone); }
.spine__stop[aria-pressed='true'] { color: var(--ink); background: var(--bone); border-color: var(--bone); }
.spine__stop[data-proj='true']::after { content: ''; }

.lens-row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.lens-select {
  appearance: none;
  background: var(--ink-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23837F76'/%3E%3C/svg%3E") no-repeat right var(--s2) center;
  border: 1px solid var(--rule); color: var(--bone);
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em;
  padding: var(--s1) var(--s5) var(--s1) var(--s2);
  border-radius: 0; cursor: pointer;
}
.lens-select:hover { border-color: var(--bone-3); }
optgroup { background: var(--ink-1); color: var(--bone-3); }
option { background: var(--ink-1); color: var(--bone); }

/* Legend */
.legend { display: flex; align-items: center; gap: var(--s2); font-family: var(--mono); font-size: 0.64rem; color: var(--bone-3); }
.legend__ramp { display: flex; height: 8px; width: 128px; border: 1px solid var(--rule); }
.legend__ramp i { flex: 1; }

/* ── Search & country list ──────────────────────────────────────────────── */

.search {
  width: 100%;
  background: var(--ink-2); border: 1px solid var(--rule); color: var(--bone);
  font-family: var(--sans); font-size: 0.92rem;
  padding: var(--s2) var(--s3);
  border-radius: 0;
}
.search::placeholder { color: var(--bone-3); }
/* A border-colour change is too quiet to be the only focus indicator on a
   text field — the launch audit could not detect it, and neither can a person
   glancing at the screen. The border still shifts; a ring is added on top. */
.search:focus-visible { border-color: var(--accel); outline: 2px solid var(--accel); outline-offset: 2px; }
.search:focus { border-color: var(--accel); }

.filters { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); }
.filters button {
  appearance: none; background: none; border: 1px solid var(--rule); cursor: pointer;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bone-3); padding: 0.3em 0.55em;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.filters button:hover { color: var(--bone); border-color: var(--bone-3); }
.filters button[aria-pressed='true'] { color: var(--ink); background: var(--bone-2); border-color: var(--bone-2); }

.clist { list-style: none; margin: 0; padding: 0; }
.clist li { border-bottom: 1px solid var(--rule-soft); }
.clist a {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--s2);
  padding: var(--s2) var(--s4); text-decoration: none; color: var(--bone-2);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.clist a:hover, .clist a:focus-visible { background: var(--ink-2); color: var(--bone); }
.clist a[aria-current='true'] { background: var(--ink-3); color: var(--bone); box-shadow: inset 2px 0 0 var(--accel); }
.clist .cname { font-size: 0.92rem; }
.clist .cval { font-family: var(--mono); font-size: 0.76rem; color: var(--bone-3); }
.clist .cmeta { grid-column: 1 / -1; display: flex; gap: var(--s2); align-items: center; }
.conf-dot { width: 5px; height: 5px; border-radius: 50%; flex: none; }
.conf-considered { background: var(--signal); }
.conf-moderate   { background: var(--warn); }
.conf-limited    { background: #8A6A5E; }
.conf-insufficient { background: #5A5A5A; }

/* ── Panels / chamber ───────────────────────────────────────────────────── */

.chamber {
  position: fixed; inset: 0; z-index: 70;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46rem);
  background: var(--ink);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.chamber.on { opacity: 1; pointer-events: auto; }

.chamber__map { position: relative; display: flex; align-items: center; justify-content: center; padding: var(--s6); overflow: hidden; }
.chamber__panel {
  overflow-y: auto; border-left: 1px solid var(--rule);
  background: var(--ink-1);
  transform: translateX(2.5rem); opacity: 0;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease);
}
.chamber.on .chamber__panel { transform: none; opacity: 1; }

.panel-pad { padding: var(--s5) var(--s6) var(--s8); }
@media (max-width: 900px) { .panel-pad { padding: var(--s4) var(--s4) var(--s7); } }

.close-x {
  position: absolute; top: var(--s3); right: var(--s3); z-index: 5;
  appearance: none; background: var(--ink-2); border: 1px solid var(--rule); color: var(--bone-2);
  width: 2.2rem; height: 2.2rem; cursor: pointer; font-size: 1rem; line-height: 1;
  display: grid; place-items: center;
}
.close-x:hover { color: var(--bone); border-color: var(--bone-3); }

section.block { margin-top: var(--s6); }
section.block > .label { margin-bottom: var(--s2); padding-bottom: var(--s1); border-bottom: 1px solid var(--rule-soft); }

/* ── The divergence chart (futures cone) ────────────────────────────────── */

.cone { width: 100%; height: auto; display: block; margin-top: var(--s3); }
.cone__band { opacity: 0.16; }
.cone__line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cone__line.momentum { stroke: var(--momentum); }
.cone__line.acceleration { stroke: var(--accel); }
.cone__line.disruption { stroke: var(--disrupt); }
.cone__line.is-muted { opacity: 0.3; stroke-width: 1.25; }
.cone__axis { stroke: var(--rule); stroke-width: 1; }
.cone__tick { font-family: var(--mono); font-size: 10px; fill: var(--bone-3); }
.cone__dot { r: 3.2; }
.cone__note { font-family: var(--mono); font-size: 10px; fill: var(--bone-2); }

/* ── Data tables ────────────────────────────────────────────────────────── */

.dtable { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.dtable th, .dtable td { text-align: left; padding: var(--s2) var(--s2) var(--s2) 0; border-bottom: 1px solid var(--rule-soft); vertical-align: baseline; }
.dtable th { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--bone-3); font-weight: 500; }
.dtable td.n { font-family: var(--mono); text-align: right; white-space: nowrap; }
.dtable tr:last-child td { border-bottom: 0; }
.yr { font-family: var(--mono); font-size: 0.7rem; color: var(--bone-3); }

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Reading cards ──────────────────────────────────────────────────────── */

.reading {
  padding: var(--s3) 0 var(--s3) var(--s3);
  border-left: 2px solid var(--rule);
  margin-bottom: var(--s3);
}
.reading[data-kind='risk']        { border-left-color: var(--disrupt); }
.reading[data-kind='opportunity'] { border-left-color: var(--signal); }
.reading[data-kind='driver']      { border-left-color: var(--momentum); }
.reading[data-kind='signal']      { border-left-color: var(--accel); }
.reading[data-kind='lever']       { border-left-color: var(--bone-3); }
/* align-items: flex-start, not center: once a chip is allowed to wrap onto two
   lines, centring makes the single-line chips beside it float in the middle of the
   row. Top-aligned, they read as a row of labels whatever their height. */
.reading__head { display: flex; gap: var(--s2); align-items: flex-start; margin-bottom: var(--s2); flex-wrap: wrap; min-width: 0; }
.reading__head > * { min-width: 0; }
.basis { margin-top: var(--s2); display: flex; flex-wrap: wrap; gap: var(--s1); }
.basis__item {
  font-family: var(--mono); font-size: 0.66rem; color: var(--bone-3);
  border: 1px dashed var(--rule); padding: 0.2em 0.45em;
}
.basis__item b { color: var(--bone-2); font-weight: 500; }

/* ── Misc ───────────────────────────────────────────────────────────────── */

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s4); }
.stat { border-top: 1px solid var(--rule); padding-top: var(--s2); }
.stat .label { margin-bottom: var(--s1); }

.pill-row { display: flex; flex-wrap: wrap; gap: var(--s1); }

.note {
  border: 1px solid var(--rule); border-left: 2px solid var(--bone-3);
  padding: var(--s3); font-size: 0.86rem; color: var(--bone-2); background: var(--ink-2);
}
.note--warn { border-left-color: var(--warn); }

.gap-note {
  border: 1px dashed var(--rule); padding: var(--s3);
  font-size: 0.86rem; color: var(--bone-3);
}

a.inline { color: var(--bone); text-decoration: underline; text-decoration-color: var(--bone-3); text-underline-offset: 3px; }
a.inline:hover { text-decoration-color: var(--accel); }

.btn {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase;
  border: 1px solid var(--rule); color: var(--bone-2); background: none;
  padding: var(--s2) var(--s3); cursor: pointer; text-decoration: none;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn:hover { color: var(--bone); border-color: var(--bone-3); }
.btn--key { border-color: var(--accel); color: var(--accel); }

.spark { display: block; width: 100%; height: 30px; }
.spark path { fill: none; stroke: var(--bone-3); stroke-width: 1.3; }

.loading { padding: var(--s6); text-align: center; color: var(--bone-3); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* ── Overture (the entry moment) ────────────────────────────────────────── */

/* ── The acquisition curtain ────────────────────────────────────────────── */
/* A loading state, nothing more. The introduction is the prologue below, which
   is built from live data and therefore cannot exist in static markup. */
.curtain {
  position: fixed; inset: 0; z-index: 88;
  display: grid; place-items: center; text-align: center;
  background: var(--ink);
  transition: opacity 800ms var(--ease), visibility 800ms;
}
.curtain.done { opacity: 0; visibility: hidden; pointer-events: none; }
.curtain__status { color: var(--bone-3); margin-top: var(--s2); }

/* ── The prologue ───────────────────────────────────────────────────────── */
/* One number, forked into three. Everything here is sized so the fork is the
   largest thing on the screen at the moment it appears — it is the argument. */
.pro {
  position: fixed; inset: 0; z-index: 92;
  display: grid; grid-template-rows: 1fr auto;
  opacity: 0; transition: opacity 600ms var(--ease);
  overscroll-behavior: contain;
}
.pro.in { opacity: 1; }
.pro__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(10,13,17,0.86) 0%, rgba(10,13,17,0.97) 62%, var(--ink) 100%);
  backdrop-filter: blur(2px);
}
.pro__stage {
  position: relative; display: grid; place-items: center;
  padding: var(--s6) var(--s4) var(--s4); overflow-y: auto;
}
.pro__beat {
  grid-area: 1 / 1; max-width: 54rem; width: 100%; text-align: center;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out), visibility 700ms;
}
.pro__beat.on { opacity: 1; visibility: visible; transform: none; }
.pro__kicker {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--bone-3); margin: 0 0 var(--s3);
}
.pro__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.1rem, 6.2vw, 4.4rem); line-height: 1.04;
  letter-spacing: -0.02em; margin: 0; color: var(--bone);
}
.pro__title em { font-style: italic; color: var(--accel); }
.pro__lede {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.05rem, 2.3vw, 1.5rem); line-height: 1.5;
  color: var(--bone-2); max-width: 40rem; margin: var(--s4) auto 0;
}
.pro__lede--sub { font-size: clamp(0.98rem, 1.9vw, 1.2rem); color: var(--bone-3); margin-top: var(--s3); }
.pro__fig { color: var(--bone); font-weight: 500; font-variant-numeric: tabular-nums; }
.pro__foot {
  font-size: 0.82rem; line-height: 1.6; color: var(--bone-3);
  max-width: 38rem; margin: var(--s5) auto 0;
  border-top: 1px solid var(--rule-soft); padding-top: var(--s3);
}
.pro__points {
  list-style: none; padding: 0; margin: var(--s5) auto 0; max-width: 40rem; text-align: left;
}
.pro__points li {
  padding: var(--s3) 0; border-bottom: 1px solid var(--rule-soft);
  font-size: 0.94rem; line-height: 1.6; color: var(--bone-2);
}
.pro__points li:last-child { border-bottom: 0; }
.pro__points b { color: var(--bone); font-weight: 500; }

/* The fork. Three branches, each in its scenario hue, ordered fastest to slowest
   so the eye reads a spread rather than a ranking. */
.pro__fork {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s3); margin: var(--s5) auto 0; max-width: 46rem;
}
.pro__branch {
  display: flex; flex-direction: column; gap: 0.35rem; align-items: center;
  padding: var(--s4) var(--s2);
  border-top: 2px solid var(--sc); background: linear-gradient(180deg, var(--sc-ink) 0%, transparent 90%);
}
.pro__branch[data-s="momentum"]     { --sc: var(--momentum); --sc-ink: var(--momentum-ink); }
.pro__branch[data-s="acceleration"] { --sc: var(--accel);    --sc-ink: var(--accel-ink); }
.pro__branch[data-s="disruption"]   { --sc: var(--disrupt);  --sc-ink: var(--disrupt-ink); }
.pro__branch-name {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sc);
}
.pro__branch .pro__fig { font-family: var(--sans); font-size: clamp(1.1rem, 3.2vw, 1.9rem); }
.pro__branch-note { font-size: 0.74rem; color: var(--bone-3); }
.pro[data-beat="fork"] .pro__branch { animation: forkIn 800ms var(--ease-out) backwards; }
.pro[data-beat="fork"] .pro__branch:nth-child(1) { animation-delay: 120ms; }
.pro[data-beat="fork"] .pro__branch:nth-child(2) { animation-delay: 300ms; }
.pro[data-beat="fork"] .pro__branch:nth-child(3) { animation-delay: 480ms; }
@keyframes forkIn { from { opacity: 0; transform: translateY(16px) scaleY(0.94); } to { opacity: 1; transform: none; } }

.pro__doors {
  display: grid; gap: var(--s2); margin: var(--s5) auto 0; max-width: 34rem; text-align: left;
}
.pro__door {
  display: block; width: 100%; text-align: left; text-decoration: none;
  background: var(--ink-1); border: 1px solid var(--rule); border-radius: 2px;
  padding: var(--s3) var(--s4); cursor: pointer; font: inherit; color: var(--bone-2);
  transition: border-color 200ms var(--ease), background 200ms var(--ease), transform 200ms var(--ease);
}
.pro__door:hover, .pro__door:focus-visible { border-color: var(--accel); background: var(--ink-2); transform: translateX(2px); }
.pro__door b { display: block; color: var(--bone); font-weight: 500; margin-bottom: 0.2rem; }
.pro__door span { display: block; font-size: 0.82rem; color: var(--bone-3); line-height: 1.5; }

.pro__bar {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  flex-wrap: wrap;
  padding: var(--s3) var(--s4) var(--s4);
  border-top: 1px solid var(--rule-soft);
}
.pro__dots { display: flex; gap: 0.5rem; }
.pro__dot {
  width: 26px; height: 3px; padding: 0; border: 0; cursor: pointer;
  background: var(--rule); transition: background 260ms var(--ease);
}
.pro__dot.on { background: var(--accel); }
.pro__dot:focus-visible { outline: 2px solid var(--accel); outline-offset: 3px; }
.pro__acts { display: flex; gap: 0.5rem; flex-wrap: wrap; }

@media (max-width: 640px) {
  .pro__fork { grid-template-columns: 1fr; gap: 0.5rem; max-width: 22rem; }
  .pro__branch { flex-direction: row; justify-content: space-between; padding: var(--s2) var(--s3); }
  .pro__bar { justify-content: center; }
}

/* Reduced motion: every beat is present at once, nothing moves, nothing advances
   on its own. The sequence becomes a page, which is a legitimate way to read it. */
@media (prefers-reduced-motion: reduce) {
  .pro { grid-template-rows: 1fr auto; }
  .pro__stage { display: block; max-width: 54rem; margin: 0 auto; }
  .pro__beat {
    opacity: 1; visibility: visible; transform: none; grid-area: auto;
    padding-bottom: var(--s6); margin-bottom: var(--s5);
    border-bottom: 1px solid var(--rule-soft); transition: none;
  }
  .pro__beat:last-child { border-bottom: 0; }
  .pro__branch, .pro__door, .pro, .curtain { animation: none !important; transition: none !important; }
}

/* ── The guided journey ─────────────────────────────────────────────────── */
/* Anchored, never modal: the instrument stays fully usable underneath, because a
   tour you cannot interrupt is a video, and this is not a video. */
.tour {
  position: fixed; z-index: 86;
  left: var(--s4); bottom: var(--s4); width: min(26rem, calc(100vw - 2 * var(--s4)));
  opacity: 0; transform: translateY(12px);
  transition: opacity 380ms var(--ease), transform 380ms var(--ease);
}
.tour.in { opacity: 1; transform: none; }
.tour__card {
  background: var(--ink-1); border: 1px solid var(--rule);
  border-left: 3px solid var(--accel);
  padding: var(--s4); box-shadow: 0 18px 48px rgba(0,0,0,0.55);
}
.tour__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.tour__x {
  background: none; border: 0; color: var(--bone-3); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0.2rem 0.35rem;
}
.tour__x:hover { color: var(--bone); }
.tour__title { font-size: 1.1rem; margin: var(--s2) 0 0; color: var(--bone); font-weight: 500; }
.tour__body { font-size: 0.86rem; line-height: 1.62; color: var(--bone-2); margin: var(--s2) 0 var(--s3); }
.tour__rail { height: 2px; background: var(--rule-soft); overflow: hidden; }
.tour__fill { display: block; height: 100%; width: 0; background: var(--accel); }
.tour__acts { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: var(--s3); }

@media (max-width: 720px) {
  .tour { left: 0; right: 0; bottom: 0; width: auto; }
  .tour__card { border-left: 0; border-top: 3px solid var(--accel); }
}
@media (prefers-reduced-motion: reduce) {
  .tour, .tour__fill { transition: none !important; }
}

/* ── The scenario skin ──────────────────────────────────────────────────── */
/* Selecting a future changes the temperature of the whole instrument, not just a
   chip. `--sc` is the active scenario hue; anything that wants to answer "which
   future is this?" reads it. Pace differs too: Acceleration settles fastest,
   Disruption slowest, so the interface itself has a tempo. */
:root { --sc: var(--momentum); --sc-ink: var(--momentum-ink); --sc-pace: 1; }
:root[data-scenario="momentum"]     { --sc: var(--momentum); --sc-ink: var(--momentum-ink); --sc-pace: 1; }
:root[data-scenario="acceleration"] { --sc: var(--accel);    --sc-ink: var(--accel-ink);    --sc-pace: 0.72; }
:root[data-scenario="disruption"]   { --sc: var(--disrupt);  --sc-ink: var(--disrupt-ink);  --sc-pace: 1.5; }

/* Countries stroke in, then fill resolves — an instrument acquiring focus. */
.map.acquiring .c-shape { fill: transparent; }
.map.acquiring .coast, .map.acquiring .borders { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 1500ms var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ── Static pages (briefs, method, guide, process) ──────────────────────── */

.doc { max-width: 46rem; margin: 0 auto; padding: var(--s7) var(--s4) var(--s8); }
.doc--wide { max-width: 64rem; }
.doc h2 { margin-top: var(--s7); }
.doc h3 { margin-top: var(--s5); }
.doc p, .doc li { color: var(--bone-2); }
.doc p { max-width: 40em; }
/* A source register is full of bare URLs and content hashes — single tokens with
   no space in 90 characters. There is no break opportunity in one, so on a phone it
   pushes the page open by however much it overhangs. `anywhere` gives the browser
   permission to break inside the token when, and only when, it does not fit; a URL
   that fits is still never broken. Applied to the link and code elements rather
   than to prose, so ordinary words keep normal hyphenation-free wrapping. */
.doc a, .doc code, .ev a, .ev code, .briefing a { overflow-wrap: anywhere; }
.doc, .doc > *, .ev, .ev > * { min-width: 0; }
.doc ul, .doc ol { padding-left: 1.15rem; }
.doc li { margin-bottom: var(--s1); }
.doc code { font-family: var(--mono); font-size: 0.88em; background: var(--ink-2); padding: 0.12em 0.35em; border: 1px solid var(--rule-soft); }
.doc pre { background: var(--ink-2); border: 1px solid var(--rule-soft); padding: var(--s3); overflow-x: auto; font-size: 0.8rem; }
.doc pre code { background: none; border: 0; padding: 0; }

footer.foot {
  border-top: 1px solid var(--rule-soft);
  padding: var(--s6) var(--s4);
  color: var(--bone-3); font-size: 0.82rem;
}
footer.foot .inner { max-width: 64rem; margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between; }
footer.foot a { color: var(--bone-2); }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  /* On narrow screens the map leads and the list sits beneath it, both scrolling
     within one page rather than two independent panes.
     The stage becomes a column so the controls sit *below* the map in normal flow
     at full width — as a centred flex child they would overflow both edges. */
  .field { grid-template-columns: 1fr; grid-template-rows: auto auto; height: auto; min-height: 0; overflow: visible; }
  .rail { border-right: 0; border-top: 1px solid var(--rule-soft); order: 2; }
  .rail__scroll { overflow: visible; }
  .stage { order: 1; display: flex; flex-direction: column; min-height: 0; }
  .map__wrap { position: relative; inset: auto; flex: 1 1 auto; min-height: 52dvh; padding: var(--s3); }
  .controls { width: 100%; min-width: 0; }
  .lens-row > * { min-width: 0; }
  .legend { flex-wrap: wrap; }
  .chamber { grid-template-columns: 1fr; grid-template-rows: 34dvh 1fr; }
  .chamber__panel { border-left: 0; border-top: 1px solid var(--rule); transform: translateY(2rem); }
  .chamber.on .chamber__panel { transform: none; }
  .controls { position: static; background: var(--ink-1); border-top: 1px solid var(--rule-soft); padding: var(--s3) var(--s4); }
}
@media (max-width: 760px) {
  .hud { gap: var(--s2); padding: 0 var(--s3); }
  /* Six routes will not fit at 390px. Rather than hide any of them behind a menu,
     the bar scrolls — every destination stays one swipe away and keyboard order
     is unchanged. */
  .hud nav {
    gap: var(--s3); min-width: 0; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(90deg, transparent, #000 12px);
  }
  .hud nav::-webkit-scrollbar { display: none; }
  .hud nav a, .navbtn { font-size: 0.62rem; letter-spacing: 0.1em; white-space: nowrap; }
  .wordmark { flex: none; }

  /* The scenario switch and the year stops stack instead of sharing a row. */
  .spine { flex-wrap: wrap; gap: var(--s2); align-items: stretch; }
  .spine__track { flex: 1 1 100%; min-width: 0; }
  .scenario-switch { width: 100%; }
  .scenario-switch button { flex: 1; justify-content: center; padding: var(--s2) var(--s1); font-size: 0.58rem; letter-spacing: 0.06em; }
  .spine__stop { flex: 1; text-align: center; }
}

/* ── Reduced motion: kill everything significant ────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .overture .display, .overture .lede, .overture .label { opacity: 1; animation: none; }
  .map.acquiring .coast, .map.acquiring .borders { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .map.acquiring .c-shape { fill: var(--lens-1); }
  .chamber__panel { transform: none; }
}

/* ── Print: the brief should print as a document ────────────────────────── */

@media print {
  :root { --ink: #fff; --bone: #111; --bone-2: #333; --bone-3: #666; --rule: #ccc; --rule-soft: #e5e5e5; }
  body { background: #fff; color: #111; }
  .hud, .controls, .rail, .close-x, .btn, .skip { display: none !important; }
  .chamber { position: static; display: block; opacity: 1; }
  .doc { padding: 0; max-width: none; }
  a { text-decoration: none; color: #111; }
}

/* ═══ SECOND EDITION ══════════════════════════════════════════════════════════
   Structural forces, the research record, and lived-experience vignettes.
   All three follow the established rule: measured values in the interface face,
   this platform's judgement in the serif, provenance always adjacent. */

/* ── Structural forces ──────────────────────────────────────────────────── */

.forces { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); }
.force {
  border: 1px solid var(--rule-soft);
  border-left: 2px solid var(--rule);
  padding: var(--s3);
  background: var(--ink-2);
}
.force[data-level='binding']  { border-left-color: var(--disrupt); background: color-mix(in srgb, var(--disrupt) 6%, var(--ink-2)); }
.force[data-level='material'] { border-left-color: var(--warn); }
.force[data-level='supportive'] { border-left-color: var(--signal); }
.force__head { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s2); }
.force__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.force__name { font-family: var(--sans); font-size: 0.92rem; font-weight: 500; letter-spacing: 0; margin: 0; flex: 1; min-width: 8rem; }

/* ── Research record ────────────────────────────────────────────────────── */

.rsrc {
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.rsrc:last-child { border-bottom: 0; }
.rsrc.is-stale { opacity: 0.72; }
.rsrc__head { display: flex; gap: var(--s1); flex-wrap: wrap; align-items: center; }

/* AI profile dimensions. Same rhythm as a research item, but a distinct class:
   a dimension is an assessment, not a cited document, and conflating the two
   would let the profile inflate the count of documents actually read. */
.dim { padding: var(--s3) 0; border-bottom: 1px solid var(--rule-soft); }
.dim:last-child { border-bottom: 0; }
.dim__head { display: flex; gap: var(--s1); flex-wrap: wrap; align-items: center; }

/* ── Lived experience ───────────────────────────────────────────────────── */

.vigs { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s3); }
.vig {
  border: 1px solid var(--rule-soft);
  border-top: 2px solid var(--sc, var(--accel));
  padding: var(--s4);
  background: linear-gradient(180deg, var(--ink-2), var(--ink-1));
}
.vig__who {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bone-3); font-weight: 500; margin: 0 0 var(--s2);
}
.vig__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--s3); margin-top: var(--s3); }
.vig__excluded {
  margin-top: var(--s3); padding-top: var(--s2);
  border-top: 1px dashed var(--rule);
}

/* ── Onboarding ─────────────────────────────────────────────────────────── */

.orient {
  position: fixed; inset: 0; z-index: 85;
  display: grid; place-items: center; padding: var(--s4);
  background: color-mix(in srgb, var(--ink) 90%, transparent);
  backdrop-filter: blur(6px);
}
.orient[hidden] { display: none; }
.orient__card {
  max-width: 42rem; width: 100%;
  background: var(--ink-1); border: 1px solid var(--rule);
  padding: var(--s6);
  max-height: 86dvh; overflow-y: auto;
}
.orient__list { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; gap: var(--s3); }
.orient__list li { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--s3); align-items: baseline; }
.orient__list b {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accel); font-weight: 500;
}
.orient__list span { font-size: 0.88rem; color: var(--bone-2); line-height: 1.55; }
@media (max-width: 620px) {
  .orient__card { padding: var(--s4); }
  .orient__list li { grid-template-columns: 1fr; gap: var(--s0); }
}

.help-btn {
  appearance: none; background: none; border: 1px solid var(--rule); color: var(--bone-3);
  width: 1.6rem; height: 1.6rem; border-radius: 50%; cursor: pointer; flex: none;
  font-family: var(--mono); font-size: 0.7rem; line-height: 1; display: grid; place-items: center;
}
.help-btn:hover { color: var(--bone); border-color: var(--bone-3); }

/* The chamber sits over the atlas controls, so it carries its own. */
.ch-controls {
  display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center;
  margin-top: var(--s4); padding: var(--s2) 0;
  border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft);
}
.ch-controls .spine__stop { padding: var(--s1) var(--s2); font-size: 0.7rem; }

/* Source-register filter bar. Progressive enhancement — the table is complete
   without it, so nothing here is required for the register to be readable. */
.filterbar { margin: 1.25rem 0 1rem; }
.filterbar label { display: block; margin-bottom: 0.35rem; }
.filterbar input[type="search"] {
  width: 100%; max-width: 30rem; padding: 0.6rem 0.75rem;
  background: var(--ink-2, #141A20); color: var(--bone);
  border: 1px solid var(--rule-soft); border-radius: 2px;
  font-family: var(--sans); font-size: 0.9rem;
}
.filterbar input[type="search"]:focus-visible { outline: 2px solid var(--gold, #D9A441); outline-offset: 2px; }
.filterbar [data-count] { display: inline-block; margin-top: 0.5rem; }
.filterbar button { cursor: pointer; font: inherit; }

/* ── Why this matters — the decision layer ──────────────────────────────── */
/* Seven questions, and the unanswerable ones must not look like the answered
   ones. That difference is the only reason this block has its own styling. */
.dec { display: grid; gap: var(--s3); margin-top: var(--s4); }
.dec__q {
  border-left: 2px solid var(--sc, var(--accel));
  padding: var(--s2) 0 var(--s2) var(--s3);
}
.dec__q.is-unanswered { border-left-color: var(--rule); }
.dec__head { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.dec__label {
  margin: 0; font-size: 0.82rem; font-weight: 500; color: var(--bone);
  font-family: var(--sans); letter-spacing: 0.01em;
}
.dec__text { margin: 0.5rem 0 0; font-size: 0.92rem; line-height: 1.66; color: var(--bone-2); }
.dec__list { margin: 0.5rem 0 0; padding-left: 1.05rem; }
.dec__list li { font-size: 0.9rem; line-height: 1.62; color: var(--bone-2); margin-bottom: 0.5rem; }
.dec__list li:last-child { margin-bottom: 0; }
.block--lead { border-top: 2px solid var(--sc, var(--accel)); padding-top: var(--s4); }

/* ── Scenario character ─────────────────────────────────────────────────── */
/* A growth rate is not a future. This block carries what each scenario is good
   at and what it costs, so no scenario can be read as simply the good one. */
.sch {
  margin-top: var(--s4); padding: var(--s4);
  background: linear-gradient(180deg, var(--sc-ink) 0%, transparent 70%);
  border-top: 2px solid var(--sc);
}
.sch[data-scenario="momentum"]     { --sc: var(--momentum); --sc-ink: var(--momentum-ink); }
.sch[data-scenario="acceleration"] { --sc: var(--accel);    --sc-ink: var(--accel-ink); }
.sch[data-scenario="disruption"]   { --sc: var(--disrupt);  --sc-ink: var(--disrupt-ink); }
.sch__one {
  font-family: var(--serif); font-size: 1.06rem; line-height: 1.5;
  color: var(--bone); margin: 0 0 var(--s3); font-style: italic;
}
.sch__row { display: grid; grid-template-columns: 11rem 1fr; gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--rule-soft); }
.sch__k {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sc); padding-top: 0.2rem;
}
.sch__v { margin: 0; font-size: 0.88rem; line-height: 1.62; color: var(--bone-2); }
@media (max-width: 640px) {
  .sch__row { grid-template-columns: 1fr; gap: 0.3rem; }
  .dec__q { padding-left: var(--s2); }
}

/* ── Shareable cards ────────────────────────────────────────────────────── */
/* Each card is a self-contained argument. The provenance strip is not a footer
   in the decorative sense — it is the part that makes the card safe to share, so
   it is styled to survive being screenshotted along with everything above it. */
.doc--cards { max-width: 58rem; }
.cards { display: grid; gap: var(--s5); margin-top: var(--s5); }
/* A grid item's automatic minimum size is its content's min-content width, so the
   scenario table inside a card — min-content 384px — was setting the track to
   434px and pushing /cards/<iso>/ 68px off a 390px phone, despite the table
   already sitting in a scroll wrapper. min-width: 0 lets the card shrink and hands
   the overflow to .card__tablewrap, which is what it is for. */
.cards > *, .card { min-width: 0; }
.card__tablewrap { min-width: 0; max-width: 100%; }
.card {
  --sc: var(--accel); --sc-ink: var(--accel-ink);
  background: linear-gradient(180deg, var(--ink-1) 0%, var(--ink) 78%);
  border: 1px solid var(--rule); border-top: 3px solid var(--sc);
  padding: var(--s5);
}
.card--force    { --sc: var(--disrupt); --sc-ink: var(--disrupt-ink); }
.card--ai       { --sc: var(--momentum); --sc-ink: var(--momentum-ink); }
.card--creative { --sc: var(--signal); }
.card--horizon  { --sc: var(--bone-2); }
.card__kicker {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--sc); margin: 0 0 var(--s2);
}
.card__title {
  font-family: var(--serif); font-weight: 300; letter-spacing: -0.015em;
  font-size: clamp(1.8rem, 4.4vw, 2.8rem); line-height: 1.08; margin: 0; color: var(--bone);
}
.card__title--sm { font-size: clamp(1.25rem, 2.8vw, 1.7rem); line-height: 1.24; }
.card__stand { font-size: 0.95rem; line-height: 1.66; color: var(--bone-2); margin: var(--s3) 0 0; }
.card__level { font-family: var(--mono); font-size: 0.72rem; color: var(--sc); margin: var(--s2) 0 0; }
.card__k {
  display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bone-3); margin-bottom: 0.35rem;
}
.card__tablewrap { overflow-x: auto; margin: var(--s4) 0 0; }
.card__table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.card__table th, .card__table td { padding: 0.6rem 0.6rem 0.6rem 0; text-align: left; border-bottom: 1px solid var(--rule-soft); }
.card__table thead th {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--bone-3); font-weight: 400;
}
.card__table tbody th { font-weight: 400; color: var(--bone-2); }
.card__now { color: var(--bone-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.card__now span { font-size: 0.72rem; color: var(--bone-3); }
.card__span { color: var(--bone); font-variant-numeric: tabular-nums; white-space: nowrap; }
.card__method, .card__src { font-size: 0.76rem; line-height: 1.6; color: var(--bone-3); margin: var(--s3) 0 0; }
.card__frame { font-size: 0.84rem; color: var(--bone-2); margin: var(--s3) 0 0; }
.card__why, .card__excl { margin-top: var(--s4); padding: var(--s3); background: var(--ink-2); border-left: 2px solid var(--sc); }
.card__why p, .card__excl p { margin: 0; font-size: 0.86rem; line-height: 1.62; color: var(--bone-2); }
.card__why ul { margin: 0; padding-left: 1.05rem; }
.card__why li { font-size: 0.84rem; line-height: 1.58; color: var(--bone-2); margin-bottom: 0.4rem; }
.card__gap { margin-top: var(--s4); padding: var(--s3); border: 1px dashed var(--rule); color: var(--bone-2); font-size: 0.88rem; }
.card__hz { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s4); }
.card__hz p { margin: 0; font-size: 0.86rem; line-height: 1.62; color: var(--bone-2); }
.card__states { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--s2); margin-top: var(--s4); }
.card__state { padding: var(--s3); background: var(--ink-2); border-top: 2px solid var(--rule); }
.card__state[data-state="measured"]   { border-top-color: var(--signal); }
.card__state[data-state="documented"] { border-top-color: var(--accel); }
.card__state[data-state="inferred"]   { border-top-color: var(--momentum); }
.card__state b { display: block; font-size: 1.5rem; color: var(--bone); font-variant-numeric: tabular-nums; }
.card__state span { display: block; font-size: 0.76rem; color: var(--bone-2); margin: 0.15rem 0 0.3rem; }
.card__state em { display: block; font-size: 0.68rem; line-height: 1.45; color: var(--bone-3); font-style: normal; }

.card__foot { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--rule); }
.card__prov { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: var(--s2); }
.card__chip {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--rule); padding: 0.2rem 0.45rem; color: var(--bone-3);
}
.card__chip--considered { border-color: var(--signal); color: var(--signal); }
.card__chip--moderate   { border-color: var(--accel); color: var(--accel); }
.card__chip--limited, .card__chip--insufficient { border-color: var(--disrupt); color: var(--disrupt); }
.card__cond { font-size: 0.72rem; line-height: 1.55; color: var(--bone-3); margin: 0 0 0.4rem; }
.card__back { margin: 0 0 0.4rem; font-size: 0.8rem; }
.card__back a { color: var(--sc); }
.card__attr { font-size: 0.68rem; color: var(--bone-3); margin: 0; }
.card__attr b { color: var(--bone-2); font-weight: 500; }
@media (max-width: 640px) {
  .card { padding: var(--s4); }
  .card__hz { grid-template-columns: 1fr; }
}

/* ── Direct-arrival orientation ─────────────────────────────────────────── */
/* Most visits to a country brief arrive from a shared link. These two elements
   exist so a first-time arrival can locate themselves without going elsewhere. */
.whereami {
  font-size: 0.76rem; color: var(--bone-3); margin-bottom: var(--s4);
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline;
}
.whereami a { color: var(--bone-3); text-decoration: none; border-bottom: 1px solid var(--rule); }
.whereami a:hover { color: var(--bone); border-color: var(--accel); }
.whereami b { color: var(--bone-2); font-weight: 400; }
.orient-strip {
  margin-top: var(--s4); padding: var(--s3) var(--s4);
  border: 1px solid var(--rule-soft); border-left: 2px solid var(--accel);
  background: var(--ink-1);
}
.orient-strip p { margin: 0; font-size: 0.83rem; line-height: 1.6; color: var(--bone-3); }
.orient-strip b { color: var(--bone-2); }
.orient-strip__links { margin-top: 0.5rem !important; }

/* ── Entry by intention ─────────────────────────────────────────────────── */
/* Nobody arrives wanting "a platform". They arrive wanting one of eight things,
   and closed-by-default keeps the country search as the primary action. */
.ways { margin-top: var(--s3); border-top: 1px solid var(--rule-soft); padding-top: var(--s2); }
.ways summary {
  cursor: pointer; font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-3);
  list-style: none; padding: 0.25rem 0;
}
.ways summary::-webkit-details-marker { display: none; }
.ways summary::before { content: '+ '; color: var(--accel); }
.ways[open] summary::before { content: '− '; }
.ways summary:hover, .ways summary:focus-visible { color: var(--bone); }
.ways__list { list-style: none; padding: 0; margin: var(--s2) 0 0; display: grid; gap: 0.1rem; }
.ways__list a {
  display: block; padding: 0.4rem 0; font-size: 0.8rem; color: var(--bone-2);
  text-decoration: none; border-bottom: 1px solid var(--rule-soft);
}
.ways__list a:hover, .ways__list a:focus-visible { color: var(--accel); }


/* ── Focus, contrast and touch targets ─────────────────────────────────── */
/* The launch audit found nine controls that could be focused without showing
   it — the country search and every entry-by-intention link. A keyboard user who
   cannot see where they are is not navigating, they are guessing. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accel);
  outline-offset: 2px;
  border-radius: 1px;
}
/* Touch targets. The audit measured the help button at 26px and the region
   filters at 21px on a phone — accurate enough with a mouse, not with a thumb. */
@media (pointer: coarse) {
  .help-btn, .filters button, .lens-select, .scenario-switch button, .spine__stops button {
    min-height: 34px;
  }
  .filters button { padding-inline: 0.7rem; }
  .ways__list a { padding-block: 0.55rem; }
}
.help-btn { min-height: 32px; min-width: 32px; }

/* ── Attribution on the atlas ───────────────────────────────────────────── */
/* Kept out of the way of the instrument — the map and the list are the working
   surface — but present, because the most-visited page cannot be the one that
   does not say who made it. */
.shell-foot {
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--rule-soft);
  background: var(--ink);
  font-size: 0.72rem; line-height: 1.6; color: var(--bone-3);
}
.shell-foot p { margin: 0; }
.shell-foot b { color: var(--bone-2); font-weight: 500; }
.shell-foot a { color: var(--bone-3); }
.shell-foot a:hover, .shell-foot a:focus-visible { color: var(--accel); }
.shell-foot__note { margin-top: 0.3rem !important; }

/* ── Two corrections found by looking at the finished screen ────────────── */
/* The guided journey announces each step to screen readers through a live
   region. There was no .sr-only rule in this stylesheet, so that announcement
   was being painted on top of the interface for everyone. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}
/* `.btn` sets a display value, which outranks the `hidden` attribute's UA rule —
   so the journey's Replay control was visible from step one, when it belongs
   only on the last. Anything hidden must actually be hidden. */
[hidden] { display: none !important; }

/* Decision answers are lists of separate statements, not one long sentence. */
.card__hz ul, .card__excl ul { margin: 0; padding-left: 1.05rem; }
.card__hz li, .card__excl li { font-size: 0.84rem; line-height: 1.58; color: var(--bone-2); margin-bottom: 0.4rem; }

/* ── Indicator definitions ──────────────────────────────────────────────── */
/* A short label is not a definition. "Account ownership" says nothing about the
   denominator or whether mobile money counts, and for several countries that
   second question is worth tens of percentage points. The issuing body's own
   words are one click away from every figure in the register. */
.defn { margin-top: 0.35rem; }
.defn summary {
  cursor: pointer; list-style: none;
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bone-3);
}
.defn summary::-webkit-details-marker { display: none; }
.defn summary::before { content: '+ '; color: var(--accel); }
.defn[open] summary::before { content: '− '; }
.defn summary:hover, .defn summary:focus-visible { color: var(--bone); }
.defn p { margin: 0.4rem 0 0; font-size: 0.76rem; line-height: 1.55; color: var(--bone-3); max-width: 40rem; }
.defn__official { color: var(--bone-2) !important; }
.defn b { color: var(--bone-2); }

/* ── Institutional instrument ───────────────────────────────────────────── */
/* Everything here is scoped under .inst or the sub-navigation, so a specialised
   product area cannot restyle the 54-country platform by accident. The
   instrument deliberately borrows the platform's existing components — dtable,
   chip, note, label — and adds only the few things it genuinely needs: a
   sub-navigation, a question heading, an evidence list and a timeline. A second
   visual language for the same evidence would teach the reader twice. */

.subnav {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2);
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--rule-soft);
  background: var(--ink-1);
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em;
}
.subnav__mark {
  color: var(--bone-2); letter-spacing: 0.14em; text-transform: uppercase;
  font-size: 0.6rem; margin-right: var(--s1);
}
.subnav a { color: var(--bone-3); text-decoration: none; padding: 0.35rem 0; }
.subnav a:hover { color: var(--bone); }
.subnav a[aria-current='page'] { color: var(--gold); }
.subnav__back { margin-left: auto; color: var(--bone-2) !important; }

.inst .dim { margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 1px solid var(--rule-soft); }
.inst .dim:first-of-type { border-top: 0; }
.inst .dim__q { margin: 0.3rem 0 var(--s3); max-width: 46rem; }
.inst .page-head { margin-bottom: var(--s4); }
.inst .notes { margin: var(--s2) 0 0; padding-left: 1.1rem; max-width: 46rem; }
.inst .notes li { font-size: 0.86rem; line-height: 1.62; color: var(--bone-2); margin-bottom: 0.5rem; }
.inst .qs { margin: var(--s2) 0 0; padding-left: 1.4rem; max-width: 46rem; }
.inst .qs li { font-size: 0.9rem; line-height: 1.6; color: var(--bone-2); margin-bottom: 0.6rem; }
.inst .qs b { color: var(--bone); }

.inst .ctys { list-style: none; margin: var(--s3) 0 0; padding: 0;
  display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.inst .cty { border: 1px solid var(--rule-soft); padding: var(--s3); }
.inst .cty h3 { margin-bottom: 0.35rem; }
.inst .cty a { color: var(--bone); text-decoration: none; }
.inst .cty a:hover { color: var(--gold); }

.inst .ev { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.inst .ev > li { border-left: 2px solid var(--rule); padding-left: var(--s3); margin-bottom: var(--s3); max-width: 46rem; }
.inst .ev p { margin: 0 0 0.4rem; font-size: 0.88rem; line-height: 1.6; }

.inst .tl__group { margin-top: var(--s4); }
.inst .tl { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.inst .tl__item { border-left: 2px solid var(--rule); padding-left: var(--s3); margin-bottom: var(--s3); max-width: 46rem; }
.inst .tl__item p { margin: 0 0 0.35rem; font-size: 0.88rem; line-height: 1.6; }
.inst .tl__date { font-family: var(--mono); font-size: 0.72rem; color: var(--bone-2); }

.inst .pair { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--rule-soft); }
.inst .pair p { margin: 0 0 0.4rem; font-size: 0.86rem; }

@media (max-width: 40rem) {
  .subnav { padding: var(--s2); font-size: 0.66rem; }
  .subnav__back { margin-left: 0; width: 100%; }
}
/* The shared table removes the rule under the last row's cells but not under its
   row header, which only became visible once a table ended with an empty cell. */
.inst .dtable tr:last-child th { border-bottom: 0; }
.inst .dtable + p, .inst .dtable + .ev, .inst .dtable ~ .muted { margin-top: var(--s3); }
.inst .ev, .inst .tl { margin-top: var(--s3); }

/* ── Institutional instrument: command, lab, compare, signals, briefing ──── */
/* Scoped under .inst so a specialised product area can never restyle the
   54-country platform by accident. */

.inst .cmd { border: 1px solid var(--rule-soft); padding: var(--s3); margin: var(--s3) 0 var(--s4); }
.inst .cmd__row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: end; margin-bottom: var(--s2); }
.inst .cmd__row:last-of-type { margin-bottom: 0; }
.inst .cmd label {
  display: flex; flex-direction: column; gap: 0.3rem; flex: 1 1 12rem; min-width: 0;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bone-3);
}
.inst .cmd select, .inst .cmd input[type='search'] {
  font: inherit; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0;
  text-transform: none; color: var(--bone);
  background: var(--ink-1); border: 1px solid var(--rule); padding: 0.55rem 0.6rem;
  min-height: 44px; width: 100%; border-radius: 0;
}
.inst .cmd select:focus-visible, .inst .cmd input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.inst .cmd .btn { min-height: 44px; }

.inst .cmd__table th a { color: var(--bone); text-decoration: none; }
.inst .cmd__table th a:hover { color: var(--gold); }
.inst .cmd__table tbody tr[hidden] { display: none; }

.inst .sc-table th[scope='colgroup'] { text-align: center; border-bottom: 1px solid var(--rule-soft); }

.inst .lever { border-top: 1px solid var(--rule-soft); padding-top: var(--s3); margin-top: var(--s4); max-width: 46rem; }
.inst .lever h2 { font-size: clamp(1.1rem, 2vw, 1.4rem); }
.inst .lever p { margin: 0 0 0.5rem; }

.inst .sigs > li[hidden] { display: none; }
.inst .sigs > li { margin-bottom: var(--s3); }

.inst .path { list-style: none; margin: var(--s3) 0 0; padding: 0; counter-reset: none; }
.inst .path > li { border-left: 2px solid var(--rule); padding-left: var(--s3); margin-bottom: var(--s3); max-width: 46rem; }
.inst .path h2 { font-size: clamp(1.05rem, 1.8vw, 1.3rem); margin-bottom: 0.3rem; }

.inst .briefing { border: 1px solid var(--rule-soft); padding: var(--s4); max-width: 48rem; }
.inst .briefing h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 0.4rem; }
.inst .briefing h3 {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bone-3); margin: var(--s4) 0 var(--s2);
}
.inst .briefing p, .inst .briefing li { max-width: 42rem; }
.inst .briefing__foot { margin-top: var(--s4); padding-top: var(--s2); border-top: 1px solid var(--rule-soft); }

@media (max-width: 40rem) {
  .inst .cmd { padding: var(--s2); }
  .inst .cmd label { flex: 1 1 100%; }
  .inst .briefing { padding: var(--s3); border: 0; }
}

/* Print: the briefing is a deliverable, so it must survive being printed or
   saved as a PDF without the navigation, controls and chrome around it. */
@media print {
  .hud, .subnav, .foot, .no-print, .skip { display: none !important; }
  body { background: #fff; color: #111; }
  .inst .briefing { border: 0; padding: 0; max-width: none; }
  .inst .briefing h3 { color: #444; }
  .inst .briefing p, .inst .briefing li, .inst .briefing .muted, .inst .briefing .xsmall { color: #222 !important; }
  .inst .briefing a { color: #111; text-decoration: underline; }
  .inst .briefing a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.7em; word-break: break-all; }
  .briefing__foot { border-top: 1px solid #bbb; }
  @page { margin: 18mm; }
}

/* ── Homepage: institutional entry point ────────────────────────────────── */
/* Weighted to be findable without competing with the atlas. It is a band below
   the flagship experience, not an item in the primary navigation — adding a
   seventh header link would crowd the mobile navigation and dilute the product
   the visitor came for. */
.forinst { border-top: 1px solid var(--rule-soft); background: var(--ink-1); padding: var(--s5) var(--s3); }
.forinst__inner { max-width: 46rem; margin: 0 auto; }
.forinst h2 { margin: 0.3rem 0 var(--s2); font-size: clamp(1.5rem, 3.2vw, 2.3rem); font-weight: 300; }
.forinst__lede { font-size: 0.95rem; line-height: 1.62; color: var(--bone-2); margin: 0 0 var(--s3); }
.forinst__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0 0 var(--s2); font-size: 0.82rem; }
.forinst__note { font-size: 0.74rem; line-height: 1.5; color: var(--bone-3); margin: 0; }
@media (max-width: 40rem) { .forinst { padding: var(--s4) var(--s2); } }
/* The command table's country links were 13px tall on a phone — a real tap
   target below the 24px minimum, not an inline link inside a sentence. Making
   them block-level with padding costs a little row height and buys a control
   somebody can actually hit. */
.inst .cmd__table th a { display: inline-block; padding: 0.55rem 0; min-height: 24px; }
.inst .subnav a { min-height: 24px; display: inline-flex; align-items: center; }
.inst .briefing__focus { color: var(--gold); }
.inst .briefing h4 { font-size: 0.95rem; margin: var(--s3) 0 0.3rem; color: var(--bone-2); }
.inst .lever__h { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-3); margin: var(--s2) 0 0.3rem; }