/* ==========================================================================
   Hinterland - design system

   Paper-toned canvas, system variable sans so it looks native and costs
   nothing to load, and an ink chrome accent. Colour is reserved almost
   entirely for the data: the interface spends none of it, so a hue on screen
   always means something.

   Chart palette, validated against the six colourblind-safety checks in both
   light and dark:
     diverging   blue #2a78d6  <->  red #cc2229, grey midpoint
     sequential  single-hue blue ramp, light -> dark
     categorical five fixed slots for sector groups, in fixed order
     status      good / warning / serious / critical, always with a label
   ========================================================================== */

:root {
  color-scheme: light;

  /* surfaces + ink */
  --surface-0: #f4f3ef;
  --surface-1: #fdfdfc;
  --surface-2: #faf9f6;
  --surface-sunk: #efeee9;
  --ink-1: #14130f;
  --ink-2: #4d4b45;
  /* Darkened from #7c7970, which measured 3.92:1 on --surface-0 and so
     failed AA for the small text it is used on - card notes, footers,
     stat hints, tab labels. This lands near 5.2:1 and stays recessive. */
  --ink-3: #6b6861;
  --line: #e4e1d9;
  --line-strong: #d3cfc4;

  /* Chrome accent. Deliberately ink rather than a hue: the diverging pair and
     the status colours already spend every colour this interface can afford,
     and a coloured accent on top of them competes with the data for meaning.
     Warm-biased to sit with the paper-toned ground rather than against it. */
  --brand: #1c1a17;
  --brand-deep: #000000;
  --brand-wash: #edebe4;
  --on-brand: #faf9f6;
  --wordmark-2: #8a867c;

  /* data: diverging (polarity) */
  --gain: #2a78d6;
  --gain-2: #5598e7;
  --gain-3: #86b6ef;
  --gain-4: #cde2fb;
  --mid: #f0efec;
  --loss-4: #f6d3d2;
  --loss-3: #e8938f;
  --loss-2: #dc5a55;
  --loss: #cc2229;

  /* data: sequential (magnitude) */
  --seq-1: #cde2fb;
  --seq-2: #9ec5f4;
  --seq-3: #6da7ec;
  --seq-4: #3987e5;
  --seq-5: #256abf;
  --seq-6: #184f95;
  --seq-7: #0d366b;

  /* data: categorical (five sector groups, fixed order) */
  --grp-1: #2a78d6;
  --grp-2: #eb6834;
  --grp-3: #1baf7a;
  --grp-4: #eda100;
  --grp-5: #e87ba4;

  /* data: neutral mark for ranked bars */
  --bar: #b9c9dc;
  --bar-ink: #2a78d6;

  /* status */
  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow-1: 0 1px 2px rgba(20, 19, 15, .04), 0 2px 8px rgba(20, 19, 15, .04);
  --shadow-2: 0 2px 6px rgba(20, 19, 15, .06), 0 12px 32px rgba(20, 19, 15, .10);

  --sans: "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui,
          -apple-system, "Helvetica Neue", Arial, sans-serif;
  --display: "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI",
             ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Consolas", monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface-0: #121211;
    --surface-1: #1a1a19;
    --surface-2: #201f1e;
    --surface-sunk: #0d0d0c;
    --ink-1: #ece9e1;
    --ink-2: #c3c2b7;
    --ink-3: #928f85;
    --line: #2e2e2b;
    --line-strong: #43423e;
    --brand: #f2f0ea;
    --brand-deep: #ffffff;
    --brand-wash: #2b2926;
    --on-brand: #1a1917;
    --wordmark-2: #8f8b80;
    --gain: #3987e5;
    --gain-2: #2a78d6;
    --gain-3: #256abf;
    --gain-4: #184f95;
    --mid: #383835;
    --loss-4: #6a2a27;
    --loss-3: #963a35;
    --loss-2: #bf4a43;
    --loss: #e05a52;
    --seq-1: #184f95;
    --seq-2: #256abf;
    --seq-3: #2a78d6;
    --seq-4: #3987e5;
    --seq-5: #5598e7;
    --seq-6: #86b6ef;
    --seq-7: #cde2fb;
    --grp-1: #3987e5;
    --grp-2: #d95926;
    --grp-3: #199e70;
    --grp-4: #c98500;
    --grp-5: #d55181;
    --bar: #33445a;
    --bar-ink: #5598e7;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .25);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .45);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-0: #121211;
  --surface-1: #1a1a19;
  --surface-2: #201f1e;
  --surface-sunk: #0d0d0c;
  --ink-1: #ece9e1;
  --ink-2: #c3c2b7;
  --ink-3: #928f85;
  --line: #2e2e2b;
  --line-strong: #43423e;
  --brand: #f2f0ea;
  --brand-deep: #ffffff;
  --brand-wash: #2b2926;
  --on-brand: #1a1917;
  --wordmark-2: #8f8b80;
  --gain: #3987e5;
  --gain-2: #2a78d6;
  --gain-3: #256abf;
  --gain-4: #184f95;
  --mid: #383835;
  --loss-4: #6a2a27;
  --loss-3: #963a35;
  --loss-2: #bf4a43;
  --loss: #e05a52;
  --seq-1: #184f95;
  --seq-2: #256abf;
  --seq-3: #2a78d6;
  --seq-4: #3987e5;
  --seq-5: #5598e7;
  --seq-6: #86b6ef;
  --seq-7: #cde2fb;
  --grp-1: #3987e5;
  --grp-2: #d95926;
  --grp-3: #199e70;
  --grp-4: #c98500;
  --grp-5: #d55181;
  --bar: #33445a;
  --bar-ink: #5598e7;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .25);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .45);
}

/* -------------------------------------------------------------- reset ---- */

* { box-sizing: border-box; }

html { font-size: 100%; }   /* the reader's own text size is the unit */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--surface-0);
  color: var(--ink-1);
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.011em;
  margin: 0;
  line-height: 1.22;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }

.num { font-variant-numeric: tabular-nums; }

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

::selection { background: var(--brand-wash); }

/* ------------------------------------------------------------- layout ---- */

#app {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  min-height: 0;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 40;
  flex-wrap: wrap;
}

.wordmark {
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: -.02em;
  display: flex;
  align-items: baseline;
  gap: 0;                 /* one word, not two: no gap between the halves */
  white-space: nowrap;
  user-select: none;
}
.wordmark .w1 { color: var(--brand); }
.wordmark .w2 { color: var(--wordmark-2); font-weight: 450; }
.wordmark .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand); display: inline-block;
  margin-left: 5px;
  transform: translateY(-1px);
}
.wordmark-sub {
  font-family: var(--sans);
  font-size: 0.7188rem;
  color: var(--ink-3);
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  border-left: 1px solid var(--line-strong);
  padding-left: 12px;
  margin-left: 4px;
  white-space: nowrap;
}

.topbar-spacer { flex: 1 1 auto; }

/* context chips: the place and the benchmark, always visible */
.chipset { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.8438rem;
  color: var(--ink-1);
  transition: background .18s var(--ease), border-color .18s var(--ease),
              transform .18s var(--ease);
  max-width: 320px;
}
.chip:hover { background: var(--surface-1); border-color: var(--line-strong); }
.chip:active { transform: scale(.985); }
.chip .k {
  font-size: 0.6562rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
  font-weight: 600;
}
.chip .v {
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip.is-place { border-color: var(--line-strong); }
.chip .caret { color: var(--ink-3); font-size: 0.625rem; }

.iconbtn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 10px;
  color: var(--ink-2);
  transition: background .18s var(--ease), color .18s var(--ease),
              transform .3s var(--ease-soft);
}
.iconbtn:hover { background: var(--surface-1); color: var(--ink-1); }
.iconbtn svg { width: 17px; height: 17px; }
#themeBtn:active { transform: rotate(40deg); }

/* The sound button states its own state: waves when on, a slash when off. */
#soundBtn .wave1, #soundBtn .wave2 { opacity: 0; transition: opacity .2s var(--ease); }
#soundBtn .mute { opacity: .85; transition: opacity .2s var(--ease); }
#soundBtn[aria-pressed="true"] { color: var(--ink-1); }
#soundBtn[aria-pressed="true"] .wave1 { opacity: .9; }
#soundBtn[aria-pressed="true"] .wave2 { opacity: .55; }
#soundBtn[aria-pressed="true"] .mute { opacity: 0; }

/* A control that plays something, rather than changing something. */
.playbtn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--surface-2);
  border-radius: 999px; padding: 3px 11px 3px 8px;
  font-size: 0.75rem; font-weight: 550; color: var(--ink-2);
  transition: background .16s var(--ease), color .16s var(--ease);
}
.playbtn:hover { background: var(--surface-1); color: var(--ink-1); }
.playbtn svg { width: 13px; height: 13px; }
.playbtn[hidden] { display: none; }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  font-size: 0.8438rem; font-weight: 550;
  transition: background .18s var(--ease), transform .12s var(--ease);
}
.btn:hover { background: var(--surface-1); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--brand); border-color: var(--brand); color: var(--on-brand);
}
.btn-primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink-1); }

/* -------------------------------------------------------------- tabs ----- */

.tabs {
  display: flex; gap: 2px;
  padding: 0 14px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative;
  padding: 11px 13px 12px;
  border: 0; background: none;
  font-size: 0.875rem; font-weight: 550;
  color: var(--ink-3);
  white-space: nowrap;
  transition: color .18s var(--ease);
}
.tab:hover { color: var(--ink-1); }
.tab[aria-selected="true"] { color: var(--ink-1); }
.tab[aria-selected="true"]::after {
  content: "";
  position: absolute; inset: auto 10px -1px 10px; height: 2px;
  background: var(--brand); border-radius: 2px 2px 0 0;
}

main {
  min-height: 0;
  overflow-y: auto;
  padding: 20px 20px 90px;
  scroll-behavior: smooth;
}
.wrap { max-width: 1320px; margin: 0 auto; }

/* -------------------------------------------------------------- cards ---- */

.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
@media (max-width: 1080px) {
  .g-main, .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .g2, .g3, .g4, .g-main { grid-template-columns: minmax(0, 1fr); }
}

.card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px 18px;
  min-width: 0;
  animation: rise .34s var(--ease-soft) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .card { animation: none; }
  /* animation-duration too, and the iteration count: .skel shimmers and
     the boot bar slide are both infinite loops, so resetting transitions
     alone left them running. */
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  html, main { scroll-behavior: auto !important; }
}

.card-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 4px; flex-wrap: wrap;
}
.card h3 { font-size: 0.9688rem; }
.card-note {
  color: var(--ink-3); font-size: 0.8438rem; line-height: 1.55;
  margin: 2px 0 12px;
  max-width: 66ch;                 /* see .prose - same reason */
}
.card-foot {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed var(--line);
  color: var(--ink-3); font-size: 0.8125rem; line-height: 1.55;
  max-width: 66ch;
}

.eyebrow {
  font-size: 0.6562rem; font-weight: 650;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3);
}

/* A caveat that has to be read before the numbers under it, not after.
   Warning-toned rather than error-toned: the analysis is still usable, it
   just cannot be read naively. */
.card-break {
  border-left: 3px solid var(--warning);
  background: color-mix(in srgb, var(--warning) 7%, var(--surface-1));
}
.card-break .card-note { color: var(--ink-1); max-width: 78ch; }

/* -------------------------------------------------------- hero numbers -- */

.hero { display: flex; flex-wrap: wrap; gap: 26px 40px; align-items: flex-end; }
.stat { min-width: 110px; }
.stat .v {
  font-family: var(--display);
  font-size: 2.125rem; font-weight: 640;
  letter-spacing: -.028em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.stat .v.sm { font-size: 1.5625rem; }
.stat .l { font-size: 0.7812rem; color: var(--ink-2); margin-top: 3px; }
.stat .h { font-size: 0.8125rem; color: var(--ink-3); margin-top: 1px; }
.stat .v.pos { color: var(--gain); }
.stat .v.neg { color: var(--loss); }

.gloss {
  margin-top: 14px; padding: 11px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 4px var(--radius-sm) var(--radius-sm) 4px;
  font-size: 0.8438rem; color: var(--ink-1); line-height: 1.6;
  max-width: 66ch;
}

/* ------------------------------------------------------------- tables --- */

.tbl-wrap { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }
table.data {
  width: 100%; border-collapse: collapse;
  font-size: 0.8125rem; font-variant-numeric: tabular-nums;
}
table.data th, table.data td {
  padding: 7px 9px; text-align: right;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.data th {
  font-size: 0.6875rem; font-weight: 650;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-3); text-align: right;
  border-bottom: 1px solid var(--line-strong);
  position: sticky; top: 0; background: var(--surface-1); z-index: 1;
}
table.data th:first-child, table.data td:first-child {
  text-align: left; white-space: normal; min-width: 150px;
}
table.data th.sortable { cursor: pointer; user-select: none; }
table.data th.sortable:hover { color: var(--ink-1); }
table.data th .arr { opacity: .45; font-size: 0.5625rem; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data tfoot td {
  font-weight: 650; border-top: 1px solid var(--line-strong);
  border-bottom: 0; background: var(--surface-2);
}
td.pos { color: var(--gain); }
td.neg { color: var(--loss); }
.swatch {
  display: inline-block; width: 9px; height: 9px;
  border-radius: 2px; margin-right: 7px;
  vertical-align: baseline;
}

/* -------------------------------------------------------------- flags --- */

.flag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.6562rem; font-weight: 650;
  padding: 1px 6px; border-radius: 5px;
  text-transform: uppercase; letter-spacing: .03em;
  border: 1px solid transparent;
}
.flag-weak { color: #8a5a00; background: rgba(250, 178, 25, .16); border-color: rgba(250, 178, 25, .4); }
.flag-withheld { color: #8f3b1c; background: rgba(236, 131, 90, .16); border-color: rgba(236, 131, 90, .4); }
.flag-missing { color: var(--ink-3); background: var(--surface-sunk); border-color: var(--line); }
.flag-ok { color: #06690a; background: rgba(12, 163, 12, .13); border-color: rgba(12, 163, 12, .35); }
:root[data-theme="dark"] .flag-weak,
:root:where(:not([data-theme="light"])) .flag-weak { color: #fab219; }
:root[data-theme="dark"] .flag-withheld,
:root:where(:not([data-theme="light"])) .flag-withheld { color: #ec835a; }
:root[data-theme="dark"] .flag-ok,
:root:where(:not([data-theme="light"])) .flag-ok { color: #4bd14b; }

/* ------------------------------------------------------------- charts --- */

.chart { width: 100%; display: block; overflow: visible; }
.chart text { font-family: var(--sans); fill: var(--ink-2); }
.chart .ax { font-size: 0.6562rem; fill: var(--ink-3); }
.chart .lbl { font-size: 0.7188rem; fill: var(--ink-2); }
.chart .val { font-size: 0.7188rem; fill: var(--ink-1); font-variant-numeric: tabular-nums; font-weight: 600; }
.chart .grid-line { stroke: var(--line); stroke-width: 1; }
.chart .zero-line { stroke: var(--line-strong); stroke-width: 1.5; }
.chart .bar { transition: opacity .16s var(--ease); }
.chart .row:hover .bar { opacity: .82; }
.chart .hit { fill: transparent; cursor: pointer; }

.legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin-top: 10px; font-size: 0.75rem; color: var(--ink-2);
}
.legend .item { display: inline-flex; align-items: center; gap: 6px; }
.legend .sw { width: 11px; height: 11px; border-radius: 3px; }

.tip {
  position: fixed; z-index: 90;
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-2);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 0.7812rem; line-height: 1.5;
  pointer-events: none; opacity: 0;
  transition: opacity .12s var(--ease);
  max-width: 280px;
}
.tip.on { opacity: 1; }
.tip b { font-weight: 650; }
.tip .r { display: flex; justify-content: space-between; gap: 14px; }
.tip .r span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }

/* --------------------------------------------------------------- map ---- */

.mapbox {
  position: relative;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  touch-action: none;
}
.mapbox svg { display: block; width: 100%; height: 100%; cursor: grab; }
.mapbox svg.dragging { cursor: grabbing; }
.mapbox .poly {
  stroke: var(--surface-1);
  stroke-width: .4;
  vector-effect: non-scaling-stroke;
  transition: fill .3s var(--ease);
}
.mapbox .poly.sel { stroke: var(--ink-1); stroke-width: 2; }
.mapbox .poly.hov { stroke: var(--ink-1); stroke-width: 1.4; }
.mapctl {
  position: absolute; top: 10px; right: 10px;
  display: flex; flex-direction: column; gap: 5px;
}
.mapctl button {
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--surface-1);
  box-shadow: var(--shadow-1);
  display: grid; place-items: center;
  font-size: 0.9375rem; line-height: 1; color: var(--ink-2);
}
.mapctl button:hover { color: var(--ink-1); }
.maplegend {
  position: absolute; bottom: 10px; left: 10px;
  background: color-mix(in srgb, var(--surface-1) 90%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 0.6875rem; color: var(--ink-2);
  max-width: 230px;
}
.maplegend .ramp { display: flex; height: 8px; border-radius: 3px; overflow: hidden; margin: 5px 0 3px; }
.maplegend .ramp i { flex: 1; }
.maplegend .ends { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.mapnote { position: absolute; bottom: 10px; right: 10px; font-size: 0.6562rem; color: var(--ink-3); }

/* ------------------------------------------------------- map peek ------- */

/* The preview strip under the map: enough to decide whether this is the place
   you meant, and the one control that commits to it. */
.peek {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 12px; padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  animation: rise .22s var(--ease-soft) both;
}
.peek { flex-direction: column; align-items: stretch; gap: 10px; }
.peek-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.peek-answer { font-size: 0.9688rem; line-height: 1.55; max-width: 64ch; }
.peek-distinct {
  font-size: 0.8125rem; color: var(--ink-2);
  border-left: 2px solid var(--line-strong); padding-left: 10px;
}
.peek-bar {
  display: flex; height: 9px; border-radius: 5px; overflow: hidden;
  background: var(--surface-sunk);
}
.peek-bar i { display: block; height: 100%; }
/* the 2px surface gap that keeps adjacent fills reading as separate objects */
.peek-bar i + i { box-shadow: -2px 0 0 0 var(--surface-2); }
.peek-barkey {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  font-size: 0.7188rem; color: var(--ink-3);
}
.peek-barkey span { display: inline-flex; align-items: center; gap: 5px; }
.peek-barkey i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

.peek-main { min-width: 0; flex: 1 1 180px; }
.peek-name { font-family: var(--display); font-size: 1.0625rem; font-weight: 620;
             letter-spacing: -.015em; }
.peek-sub { font-size: 0.7812rem; color: var(--ink-3); }
.peek-stats { display: flex; gap: 22px; flex-wrap: wrap; }
.peek-v { font-size: 1.0625rem; font-weight: 650; }
.peek-l { font-size: 0.7188rem; color: var(--ink-3); }
@media (max-width: 720px) {
  .peek { gap: 12px; }
  .peek-stats { gap: 16px; }
  .peek .btn { flex: 1 0 100%; justify-content: center; }
}

/* ------------------------------------------------------- picker sheet --- */

.scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20, 19, 15, .34);
  backdrop-filter: blur(2px);
  animation: fade .18s var(--ease) both;
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }

.sheet {
  position: fixed; z-index: 70;
  left: 50%; top: 64px; transform: translateX(-50%);
  width: min(620px, calc(100vw - 28px));
  max-height: min(70vh, 620px);
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: pop .22s var(--ease-soft) both;
}
@keyframes pop {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(.985); }
  to   { opacity: 1; transform: translateX(-50%); }
}
.sheet.wide { width: min(880px, calc(100vw - 28px)); }
.sheet-head {
  padding: 14px 16px 10px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
.sheet-head h3 { font-size: 0.9375rem; flex: 1; }
.sheet-body { overflow-y: auto; padding: 8px; }
.sheet-foot {
  padding: 10px 14px; border-top: 1px solid var(--line);
  background: var(--surface-2);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 0.7812rem; color: var(--ink-3);
}

.search {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface-2);
}
.search:focus { background: var(--surface-1); outline-offset: 0; }

.optlist { display: flex; flex-direction: column; }
.opt {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 9px;
  border: 0; background: none; text-align: left; width: 100%;
  transition: background .12s var(--ease);
}
.opt:hover { background: var(--surface-2); }
/* The keyboard cursor needs to be *seen*, not merely differ: as a bare
   surface-2 fill it measured 1.03:1 against the sheet behind it. */
.opt.cur {
  background: var(--brand-wash);
  box-shadow: inset 3px 0 0 var(--brand);
}
.opt[aria-selected="true"] { background: var(--brand-wash); }
.opt .nm { flex: 1; min-width: 0; font-weight: 550; }
.opt .nm small { display: block; font-weight: 400; color: var(--ink-3); font-size: 0.75rem; }
.opt .kind {
  font-size: 0.6562rem; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px;
}
.opt .sz { font-size: 0.75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.group-label {
  padding: 10px 11px 4px; font-size: 0.6562rem; font-weight: 650;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3);
}

/* ------------------------------------------------------------ controls -- */

.ctlrow {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: 14px;
}
.seg {
  display: inline-flex; padding: 2px;
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.seg button {
  border: 0; background: none; padding: 5px 11px;
  border-radius: 8px; font-size: 0.8125rem; font-weight: 550;
  color: var(--ink-3);
  transition: background .16s var(--ease), color .16s var(--ease);
}
.seg button[aria-pressed="true"] {
  background: var(--surface-1); color: var(--ink-1);
  box-shadow: var(--shadow-1);
}
.seg button:hover { color: var(--ink-1); }

.toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.8125rem; color: var(--ink-2); cursor: pointer;
  padding: 5px 10px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface-2);
}
.toggle input { accent-color: var(--brand); margin: 0; }

select.sel {
  padding: 6px 10px; border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2); font-size: 0.8125rem;
}

/* ------------------------------------------------------------- brief ---- */

.prose { max-width: 66ch; font-size: 0.9688rem; line-height: 1.72; }
.prose p { margin: 0 0 1.05em; }
.prose p.lede { font-size: 1.0625rem; color: var(--ink-1); }
.prose .cav {
  font-size: 0.8438rem; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
/* Where the reader has got to. As a bare --brand-wash fill this measured
   1.17:1 against the page, which is to say it marked nothing: a reader
   following along had no way to see the position the code was tracking. The
   bar down the side does the work, so the tint can stay gentle. */
.reading {
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  box-shadow: inset 3px 0 0 var(--brand);
  border-radius: 3px;
  padding-left: 9px;
  margin-left: -12px;
  scroll-margin: 96px;
}
@media (prefers-reduced-motion: reduce) {
  .reading { transition: none; }
}
/* The reader control, while it is running. */
.iconbtn.is-on {
  background: var(--brand);
  color: var(--on-brand);
}

/* --------------------------------------------------------- empty/skel -- */

.empty {
  padding: 56px 24px; text-align: center; color: var(--ink-3);
  display: grid; gap: 8px; place-items: center;
}
.empty .big { font-family: var(--display); font-size: 1.1875rem; color: var(--ink-2); }
.empty svg { width: 46px; height: 46px; opacity: .5; }

.skel {
  background: linear-gradient(90deg, var(--surface-sunk) 25%,
              var(--surface-2) 37%, var(--surface-sunk) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s linear infinite;
  border-radius: 6px;
}
@keyframes shimmer { from { background-position: 100% 0 } to { background-position: 0 0 } }

.boot {
  position: fixed; inset: 0; z-index: 200;
  background: var(--surface-0);
  display: grid; place-items: center; gap: 0;
  transition: opacity .35s var(--ease);
}
.boot.gone { opacity: 0; pointer-events: none; }
.boot .inner { text-align: center; display: grid; gap: 14px; justify-items: center; }
.boot .bar { width: 190px; height: 3px; background: var(--surface-sunk); border-radius: 3px; overflow: hidden; }
.boot .bar i { display: block; height: 100%; width: 30%; background: var(--brand); border-radius: 3px;
               animation: slide 1.15s var(--ease) infinite; }
@keyframes slide { from { transform: translateX(-110%) } to { transform: translateX(400%) } }
.boot .msg { font-size: 0.8125rem; color: var(--ink-3); min-height: 1.4em; }

/* ------------------------------------------------------- phone layout -- */

.bottomnav { display: none; }

@media (max-width: 720px) {
  body { font-size: 0.9688rem; }

  /* Two rows, not three: identity and actions on the first, the two context
     chips across the second. Left to wrap on its own the header ate 270px
     before any content appeared. */
  .topbar { padding: 7px 12px 9px; gap: 8px; row-gap: 8px; }
  .wordmark { font-size: 0.875rem; order: 1; }
  .wordmark-sub { display: none; }
  .topbar-spacer { order: 2; }
  #exportBtn { order: 3; padding: 6px 12px; }
  #themeBtn { order: 4; width: 32px; height: 32px; }
  .chipset { order: 5; flex: 1 0 100%; gap: 6px; }
  .chip {
    flex: 1 1 0; min-width: 0; max-width: none;
    font-size: 0.8125rem; padding: 5px 10px; gap: 6px;
  }
  .chip .k { white-space: nowrap; font-size: 0.625rem; }
  main { padding: 14px 12px 96px; }
  .tabs { display: none; }
  .card { padding: 14px 15px 16px; border-radius: 12px; }
  .tbl-wrap { margin: 0 -15px; padding: 0 15px; }

  /* Stacked one per row, five hero numbers ran a thousand pixels deep and the
     reader had to scroll to compare two figures that belong side by side. Two
     columns, with the headline number spanning both. */
  .hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 14px;
    align-items: start;
  }
  .stat { min-width: 0; }
  .stat .v { font-size: 1.4375rem; }
  .stat .v.sm { font-size: 1.25rem; }
  .stat .l { font-size: 0.75rem; }
  .stat .h { font-size: 0.7188rem; }
  .hero .stat:first-child { grid-column: 1 / -1; }
  .hero .stat:first-child .v { font-size: 2.0625rem; }

  .bottomnav {
    display: grid;
    /* Sized to however many buttons are VISIBLE: a neighbourhood hides
       Change and Population, and a hard-coded column count either wraps
       the last button onto a second row or leaves gaps. */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    position: fixed; inset: auto 0 0 0; z-index: 50;
    background: color-mix(in srgb, var(--surface-1) 94%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    padding: 5px 4px calc(5px + env(safe-area-inset-bottom));
  }
  .bottomnav button {
    border: 0; background: none;
    display: grid; justify-items: center; gap: 2px;
    padding: 5px 2px; border-radius: 10px;
    font-size: 0.6562rem; font-weight: 600; color: var(--ink-3);
    transition: color .16s var(--ease), background .16s var(--ease);
  }
  .bottomnav button svg { width: 21px; height: 21px; }
  .bottomnav button[aria-selected="true"] { color: var(--brand); }
  .bottomnav button:active { background: var(--surface-2); }

  /* Rows instead of hover charts: a phone has no cursor. */
  .sectorrow {
    display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
    padding: 11px 2px; border-bottom: 1px solid var(--line);
    align-items: center;
  }
  .sectorrow .nm { font-weight: 550; font-size: 0.9062rem; }
  .sectorrow .meta { font-size: 0.7812rem; color: var(--ink-3); }
  .sectorrow .big { font-variant-numeric: tabular-nums; font-weight: 650; font-size: 1rem; }
  .sectorrow .track { grid-column: 1 / -1; height: 5px; background: var(--surface-sunk); border-radius: 3px; overflow: hidden; margin-top: 4px; }
  .sectorrow .track i { display: block; height: 100%; border-radius: 3px; background: var(--bar-ink); }

  .sheet { top: auto; bottom: 0; left: 0; transform: none;
           width: 100vw; max-height: 86vh;
           border-radius: 16px 16px 0 0; border-bottom: 0; }
  @keyframes pop { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
  .prose { font-size: 1.0312rem; }
}

.desktop-only { }
@media (max-width: 720px) { .desktop-only { display: none !important; } }
.phone-only { display: none; }
@media (max-width: 720px) { .phone-only { display: block; } }

/* ------------------------------------------------------------- print --- */

@media print {
  .topbar, .tabs, .bottomnav, .mapctl, .btn, .iconbtn { display: none !important; }
  body { background: #fff; }
  main { overflow: visible; padding: 0; }
  .card { break-inside: avoid; border-color: #ccc; box-shadow: none; }
}

/* ============================================================ learning ==
   The plain-English layer. Every rule here follows the dyslexia review:
   sentence case (no text-transform), plain sentences at a readable size and
   measure in full-strength ink, and nothing that carries meaning by colour
   alone. A faded term is quieter, never hidden.                           */

.explain { margin: 4px 0 14px; max-width: 70ch; }
.explain-plain {
  margin: 0 0 8px; font-size: 1rem; line-height: 1.6;
  color: var(--ink-1); letter-spacing: .005em;
}
.explain.is-faded .explain-plain {
  font-size: 0.875rem; color: var(--ink-2); margin: 6px 0 0;
}

.term-chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 5px 12px 5px 14px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface-1); color: var(--ink-1);
  font: inherit; font-size: 0.9062rem; font-weight: 560;
  cursor: pointer; margin: 0 6px 6px 0;
  transition: background .12s var(--ease), border-color .12s var(--ease);
}
.term-chip:hover { background: var(--surface-2); border-color: var(--ink-3); }
.term-chip[aria-expanded="true"] {
  background: var(--brand-wash); border-color: var(--brand);
}
.explain.is-faded .term-chip { font-size: 0.9688rem; }
.term-i {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid currentColor; font-size: 0.75rem; font-weight: 700;
  color: var(--ink-2);
}

.explain-more {
  margin: 6px 0 4px; padding: 12px 16px;
  border-left: 3px solid var(--brand);
  background: var(--surface-2); border-radius: 0 6px 6px 0;
  max-width: 66ch;
}
.layers { margin: 0; }
.layers dt {
  font-size: 0.8438rem; font-weight: 650; color: var(--ink-2); margin-top: 10px;
}
.layers dt:first-child { margin-top: 0; }
.layers dd { margin: 2px 0 0; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-1); }

.layer-actions { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; }
.linkbtn {
  background: none; border: 0; padding: 6px 0; min-height: 36px;
  font: inherit; font-size: 0.9062rem; font-weight: 560;
  color: var(--ink-1); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer;
}

/* --- the Learn tab --------------------------------------------------- */

.mmap { display: grid; gap: 12px; margin-top: 4px; }
.mrow { padding: 12px 0; border-top: 1px solid var(--line); }
.mrow:first-child { border-top: 0; padding-top: 4px; }
.mq { margin: 0 0 8px; font-size: 1rem; font-weight: 600; line-height: 1.45; }

.lentry { border-top: 1px solid var(--line); padding: 4px 0; }
.lentry:first-of-type { border-top: 0; }
.lentry > summary {
  list-style: none; cursor: pointer; padding: 10px 0;
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
}
.lentry > summary::-webkit-details-marker { display: none; }
.lname { font-size: 1rem; font-weight: 640; }
.laka { font-weight: 450; color: var(--ink-2); }
.lplain { grid-column: 1 / -1; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-1); max-width: 66ch; }
.lentry[open] > summary { padding-bottom: 6px; }
.lentry .layers { padding: 4px 0 2px 14px; border-left: 3px solid var(--line-strong); max-width: 66ch; }
.lexample { font-size: 0.9375rem; line-height: 1.55; margin: 12px 0 0; max-width: 66ch; }
.lsource { font-size: 0.8438rem; color: var(--ink-2); margin: 8px 0 0; }

.lbadge {
  align-self: start; font-size: 0.7812rem; font-weight: 600;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line-strong); color: var(--ink-2);
}
/* Status is carried by the WORD; the fill only reinforces it. */
.lbadge-learned, .lbadge-known { background: var(--brand-wash); color: var(--ink-1); border-color: var(--brand); }
.lbadge-meeting { background: var(--surface-2); }

/* --- chip rows and the "what do people do here" card --------------- */
.chiprow { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 10px 0 0; }
.chiprow-label { font-size: 0.875rem; color: var(--ink-2); margin: 0 10px 6px 0; }
.subh { font-size: 1rem; font-weight: 640; margin: 0 0 6px; line-height: 1.35; }
.bars { margin: 6px 0 4px; }

/* ================================================================ quiz ==
   Phone-first, one question per screen. Sizes follow the dyslexia review:
   stems at 20px in the sans face with no negative tracking, options at
   least 56px tall and 17px, sentence case throughout, and right/wrong shown
   by WORD and an ink icon - never by green and red alone, and never with
   this tool's red, which already means "shrank".                         */

.quiz-wrap { max-width: 640px; margin: 0 auto; padding-bottom: 88px; }
.qtop { display: flex; justify-content: space-between; align-items: center; margin: 2px 0 14px; }
.qcount { font-size: 0.9062rem; color: var(--ink-2); }
.qchip {
  display: inline-block; margin: 0 0 10px; padding: 4px 11px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: 0.875rem; color: var(--ink-2); background: var(--surface-2);
}
.qstem {
  font-family: var(--sans, inherit); font-size: 1.25rem; font-weight: 640;
  line-height: 1.4; letter-spacing: 0; margin: 0 0 16px; max-width: 34ch;
}
.qconf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.qconf-l { font-size: 0.875rem; color: var(--ink-2); width: 100%; }
.qconf-b {
  min-height: 40px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface-1);
  font: inherit; font-size: 0.9375rem; color: var(--ink-1); cursor: pointer;
}
.qconf-b[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }

.qopts { display: grid; gap: 10px; }
.qopt {
  display: flex; align-items: center; gap: 14px; width: 100%;
  min-height: 56px; padding: 12px 16px; text-align: left;
  border: 1.5px solid var(--line-strong); border-radius: 12px;
  background: var(--surface-1); color: var(--ink-1);
  font: inherit; font-size: 1.0625rem; line-height: 1.35; cursor: pointer;
}
button.qopt:hover { border-color: var(--ink-3); background: var(--surface-2); }
.qkey {
  flex: none; display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--ink-3); font-size: 0.875rem; font-weight: 700; color: var(--ink-2);
}
.qlabel { flex: 1; }
.qmark { flex: none; font-size: 1.25rem; font-weight: 700; color: var(--ink-1); }
.qopts.is-answered .qopt { cursor: default; opacity: .6; }
.qopts.is-answered .qopt.is-right { opacity: 1; border-color: var(--ink-1); border-width: 2.5px;
  background: var(--brand-wash); }
.qopts.is-answered .qopt.is-chosen { opacity: 1; border-color: var(--ink-1); border-width: 2px; }
.qtag { display: table; margin-top: 6px; font-size: 0.875rem; font-weight: 700; padding: 2px 10px;
  border-radius: 999px; border: 1.5px solid currentColor; white-space: nowrap; }

.qcard { margin-top: 18px; padding: 16px 18px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.qverdict { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 1.1875rem; font-weight: 700; }
.qvicon {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--ink-1); color: var(--surface-1); font-size: 1rem;
}
.qverdict.is-wrong .qvicon { background: transparent; color: var(--ink-1); border: 2px solid var(--ink-1); }
.qsentence { font-size: 1.0625rem; line-height: 1.55; margin: 0 0 12px; max-width: 60ch; }
.qsource { font-size: 0.875rem; color: var(--ink-2); margin: 10px 0 0; }
.qmore { margin-top: 12px; }
.qmore > summary { cursor: pointer; font-size: 0.9688rem; font-weight: 600; min-height: 40px; display: flex; align-items: center; }
.qmore-p { font-size: 1rem; line-height: 1.55; margin: 6px 0; max-width: 60ch; }
.qmisread { display: block; margin-top: 10px; }

.qpic { margin: 6px 0 4px; }
.qbars { display: grid; gap: 7px; }
.qbar-row { display: grid; grid-template-columns: minmax(0, 11em) 1fr auto; gap: 10px; align-items: center; font-size: 0.9375rem; }
.qbar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qbar-t { height: 12px; background: var(--surface-sunk); border-radius: 6px; overflow: hidden; }
.qbar-t i { display: block; height: 100%; background: var(--ink-2); border-radius: 6px; }
.qbar-v { font-variant-numeric: tabular-nums; color: var(--ink-2); min-width: 3.2em; text-align: right; }
.qpic-note { font-size: 0.875rem; color: var(--ink-2); margin: 6px 0 0; }

.qnextbar { margin: 16px 0 4px; }
.qnext { width: 100%; min-height: 54px; font-size: 1.0625rem; justify-content: center; }

.qstrands { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.qstrand { font-size: 0.9062rem; padding: 5px 11px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.qset { display: grid; gap: 10px; margin: 6px 0; }
.qhome { font-size: 0.9375rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 720px) {
  .qbar-row { grid-template-columns: minmax(0, 8em) 1fr auto; }
}

/* --- the timeline ------------------------------------------------------ */
.timeline { margin-top: 18px; }
.tl-item { border-top: 1px solid var(--line); }
.tl-item > summary { display: grid; grid-template-columns: 8.5em 1fr 16px; gap: 4px 16px; align-items: baseline;
  padding: 12px 0; min-height: 48px; cursor: pointer; list-style: none; }
.tl-item > summary::-webkit-details-marker { display: none; }
.tl-item > summary::after { content: '+'; color: var(--ink-3); font-size: 1.25rem; line-height: 1; }
.tl-item[open] > summary::after { content: '−'; }
.tl-item .tl-body { padding: 0 0 14px 0; }
.tl-item .tl-title { margin: 0; }
.tl-date { font-size: 0.9062rem; font-weight: 640; color: var(--ink-2); padding-top: 2px; }
.tl-title { font-size: 1.0312rem; font-weight: 650; margin: 0 0 4px; }
.tl-fact { font-size: 0.9688rem; line-height: 1.55; margin: 0; max-width: 62ch; }
.tl-also { font-size: 0.9375rem; line-height: 1.55; margin: 8px 0 0; padding: 8px 12px; background: var(--surface-2); border-left: 3px solid var(--line-strong); max-width: 62ch; }
.tl-also-k { font-weight: 650; }
.tl-src { font-size: 0.875rem; color: var(--ink-2); margin: 6px 0 0; }
.tl-src a { color: var(--ink-1); }
@media (max-width: 720px) { .tl-item > summary { grid-template-columns: 1fr 16px; } .tl-item .tl-date { grid-column: 1; } .tl-item .tl-title { grid-column: 1; } .tl-item > summary::after { grid-column: 2; grid-row: 1 / span 2; align-self: center; } }

/* the closing reading on every analysis card: what it means here, then terms */
.teach { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.teach-says { margin: 0 0 8px; }

/* ------------------------------------------------------------ phone home
   Dyslexia-friendly by construction: 17px body, 1.55 line height, short
   lines, left-aligned, no italics, no capitals-only text beyond the small
   eyebrow, every action a full-width target of at least 52px. */
.home-card { padding: 18px 18px 16px; }
.home-name { font-family: var(--display); font-size: 1.875rem; line-height: 1.15; margin: 2px 0 14px; }
.home-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
.home-btn { min-height: 52px; justify-content: center; gap: 10px; font-size: 1.0625rem; font-weight: 600; white-space: nowrap; }
.home-btn svg { width: 20px; height: 20px; flex: none; }
.home-btn:disabled { opacity: .6; }
.home-msg { margin-top: 12px; font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
.home-msg.is-warn { padding: 10px 12px; border-radius: 10px; background: var(--brand-wash); color: var(--ink-1); }
.home-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
  background: var(--surface-sunk); border-radius: 12px; margin: 4px 0 14px; }
.home-seg button { min-height: 44px; border: 0; border-radius: 9px; background: transparent;
  font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.home-seg button[aria-selected="true"] { background: var(--surface-1); color: var(--ink-1);
  box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.home-answer { font-size: 1.125rem; line-height: 1.55; margin: 0 0 14px; color: var(--ink-1); max-width: 34em; }
.home-answer .homenote { display: block; margin-top: 8px; font-size: 1rem; color: var(--ink-2); }
.home-small { font-size: 0.9375rem; line-height: 1.5; color: var(--ink-3); margin: 10px 0 4px; }
.hbars { display: grid; gap: 12px; }
.hbar-top { display: flex; justify-content: space-between; gap: 12px; font-size: 1rem; }
.hbar-nm { font-weight: 600; }
.hbar-v { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.hbar .track { height: 10px; background: var(--surface-sunk); border-radius: 5px; overflow: hidden; margin-top: 5px; }
.hbar .track i { display: block; height: 100%; border-radius: 5px; background: var(--bar-ink); }
.home-glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 14px; }
.hg-v { font-family: var(--display); font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.hg-l { font-size: 0.875rem; line-height: 1.4; color: var(--ink-2); margin-top: 2px; }
.home-qs { display: grid; gap: 8px; }
.home-q { display: grid; grid-template-columns: 40px 1fr 20px; align-items: center; gap: 12px;
  min-height: 60px; padding: 10px 12px; text-align: left; font: inherit; color: var(--ink-1);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.home-q:active { background: var(--brand-wash); }
.hq-i { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-wash); }
.hq-i svg, .hq-go svg { width: 22px; height: 22px; }
.hq-go { color: var(--ink-3); }
.hq-q { display: block; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.hq-a { display: block; font-size: 0.875rem; color: var(--ink-2); line-height: 1.4; margin-top: 2px; }
.home-more { margin: 4px 0 8px; }
.home-more > summary { min-height: 52px; display: flex; align-items: center; padding: 0 16px;
  font-size: 1rem; font-weight: 600; cursor: pointer; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface-1); list-style: none; }
.home-more > summary::after { content: '+'; margin-left: auto; font-size: 1.375rem; color: var(--ink-3); }
.home-more[open] > summary::after { content: '−'; }
.home-more > .grid { margin-top: 12px; }

/* Long card explanations fold on a phone: the first sentence stays, the
   rest is one tap away (panels.js card()). */
.note-more > summary { font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); cursor: pointer;
  min-height: 40px; display: flex; align-items: center; list-style: none; }
.note-more > summary::before { content: '+ '; white-space: pre; }
.note-more[open] > summary::before { content: '− '; }
.pick-here { width: 100%; margin-top: 10px; }

.note-more > summary::-webkit-details-marker, .home-more > summary::-webkit-details-marker { display: none; }


/* ------------------------------------------------ home: the question first */
.home-col { max-width: 720px; width: 100%; margin: 0 auto; display: grid; gap: 14px; }
.home-q1 { font-family: var(--display); font-size: 1.75rem; line-height: 1.2;
  font-weight: 640; margin: 4px 0 14px; letter-spacing: -0.01em; }
.home-landing { padding: 28px 22px 22px; }
.home-landing .home-q1 { font-size: 2rem; margin-top: 0; }
.home-lede { font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); margin: 0 0 18px; }
.place-link { font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 5px; text-decoration-color: var(--line-strong); }
.place-link:hover { text-decoration-color: var(--ink-1); }
.home-search { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px;
  padding: 0 16px; font: inherit; font-size: 1.0625rem; color: var(--ink-2); text-align: left;
  background: var(--surface-1); border: 1.5px solid var(--line-strong); border-radius: 14px; cursor: pointer; }
.home-search:hover { border-color: var(--ink-2); }
.home-search svg { width: 22px; height: 22px; flex: none; color: var(--ink-1); }
.home-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 10px; }
.home-link { display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  font-size: 0.9688rem; color: var(--ink-2); }
.home-link svg { width: 18px; height: 18px; }
.home-try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px;
  font-size: 0.9375rem; color: var(--ink-3); }
.home-chip { min-height: 40px; padding: 0 14px; font: inherit; font-size: 0.9375rem; color: var(--ink-1);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 20px; cursor: pointer; }
.home-else .card-head h3 { font-size: 1.0625rem; }
.home-learnline { max-width: 720px; margin: 6px auto 20px; font-size: 0.9688rem;
  color: var(--ink-2); text-align: center; line-height: 1.6; }
.home-more { max-width: 720px; width: 100%; margin: 0 auto; }
.home-more[open] { max-width: none; }
@media (max-width: 720px) {
  .home-q1 { font-size: 1.5625rem; }
  .home-landing .home-q1 { font-size: 1.8125rem; }
}

.peek-hint { margin: 12px 2px 2px; font-size: 1rem; color: var(--ink-2); line-height: 1.5; }
.peek-q { font-size: 0.8125rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

body.is-landing .chipset, body.is-landing #exportBtn { display: none; }

/* On a phone the legend moves to the top-left and shrinks, off the dense
   south, where the tapping happens. */
@media (max-width: 720px) {
  .maplegend { top: 10px; bottom: auto; padding: 6px 8px; font-size: 0.7188rem; max-width: 62%; }
}

/* ---------------------------------------------- learning engine v3 */
.qpart { font-size: 0.9375rem; color: var(--ink-2); margin: 12px 0 0; }
.qlesson { padding: 6px 0 4px; }
.qlesson-n { font-size: 0.8125rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
.qlesson-t { font-family: var(--display); font-size: 1.625rem; line-height: 1.2; margin: 6px 0 4px; }
.qlesson-ask { font-size: 1.0625rem; color: var(--ink-2); margin: 0 0 14px; line-height: 1.5; }
.qlesson-pts { margin: 0; padding-left: 1.1em; display: grid; gap: 10px; }
.qlesson-pts li { font-size: 1.0625rem; line-height: 1.55; }
.qlesson-note { font-size: 0.9375rem; color: var(--ink-3); margin: 16px 0 0; }
.qgrow { display: flex; align-items: baseline; gap: 12px; margin: 12px 0; }
.qgrow-v { font-family: var(--display); font-size: 2.125rem; font-variant-numeric: tabular-nums; line-height: 1; }
.qgrow-l { font-size: 0.9375rem; color: var(--ink-2); line-height: 1.4; }
.qopened { font-size: 1rem; padding: 10px 12px; border-radius: 10px; background: var(--brand-wash); margin: 10px 0; }
.qhub-top { display: grid; gap: 6px; margin: 4px 0 14px; }
.qhub-top .btn { min-height: 52px; font-size: 1.0625rem; justify-content: center; }
.qhub-sub { font-size: 0.9375rem; color: var(--ink-2); margin: 0; }
.qhub-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; margin: 6px 0 10px; }
.qhub-nums > div { display: grid; gap: 4px; }
.qchart { display: flex; align-items: flex-end; gap: 4px; height: 56px; margin: 8px 0 2px; }
.qchart-b { flex: 1; max-width: 22px; background: var(--seq-3); border-radius: 3px 3px 0 0; }
.qchart-b.is-today { background: var(--seq-5); }
.qchart-l { font-size: 0.8438rem; color: var(--ink-3); margin: 0 0 6px; }
.qideas { display: grid; gap: 8px; }
.qidea { border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.qidea > summary { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center;
  padding: 12px 14px; cursor: pointer; list-style: none; min-height: 56px; }
.qidea > summary::-webkit-details-marker { display: none; }
.qidea-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; background: var(--brand-wash); }
.qidea.is-locked { opacity: .62; }
.qidea-title { display: block; font-size: 1.0312rem; font-weight: 650; line-height: 1.3; }
.qidea-s { display: block; font-size: 0.875rem; color: var(--ink-2); margin-top: 2px; }
.qidea-bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 7px; }
.qidea-bar { display: block; height: 7px; border-radius: 3px; background: var(--surface-sunk); overflow: hidden; }
.qidea-bar.is-shut { background: repeating-linear-gradient(135deg, var(--surface-sunk) 0 3px, transparent 3px 6px); }
.qidea-key { display: block; font-size: 0.7812rem; color: var(--ink-3); margin-top: 3px; }
.qidea-bar i { display: block; height: 100%; background: var(--seq-4); border-radius: 3px; }
.qidea-body { padding: 0 14px 14px 60px; }
.qidea-ask { font-size: 0.9688rem; color: var(--ink-2); margin: 0 0 10px; }
.qidea-h { font-size: 0.8125rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin: 14px 0 6px; }
.qidea-facts { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; font-size: 0.9688rem; line-height: 1.5; }
.qsettings { margin-top: 16px; }
.qsettings > summary { font-size: 0.9375rem; font-weight: 600; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
@media (max-width: 720px) { .qidea-body { padding-left: 14px; } }


/* hidden means hidden: .iconbtn{display:grid} was un-hiding the stop button */
[hidden] { display: none !important; }

/* ---------------------------------------------- quiz: its own screen */
body.quiz-mode .topbar, body.quiz-mode #nav, body.quiz-mode .tabs { display: none; }
body.quiz-mode main { padding-bottom: 24px; }
.qbar { display: grid; grid-template-columns: 48px 1fr auto auto; align-items: center; gap: 10px;
  margin: 0 0 16px; }
.qback { width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface-1); color: var(--ink-1); display: grid; place-items: center; cursor: pointer; }
.qback svg { width: 22px; height: 22px; }
.qprog { height: 8px; border-radius: 4px; background: var(--surface-sunk); overflow: hidden; }
.qprog i { display: block; height: 100%; background: var(--ink-2); border-radius: 4px; }
.qprog-t { font-size: 0.9375rem; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qbar .qstop { min-height: 48px; font-size: 1rem; }
.qline { display: flex; align-items: flex-start; gap: 10px; }
.qline > .qopt, .qline > .qstem, .qline > .qverdict, .qline > .qlesson-t, .qline > .qlesson-p { flex: 1; min-width: 0; }
.qspk { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink-1); display: grid; place-items: center; cursor: pointer; }
.qspk svg { width: 20px; height: 20px; }
.qopts .qline { align-items: center; }
.qlesson-pts li.qline { list-style: none; margin-left: -1.1em; }
.qlesson-pts li.qline .qlesson-p::before { content: '• '; }
.qconf { margin: 12px 0 4px; }
.qpaused { padding-top: 12px; }
.quiz-wrap .qnextbar .btn { width: 100%; min-height: 54px; font-size: 1.0625rem; justify-content: center; }
.qverdict span:last-child { line-height: 1.35; }

/* ---------------------------------------------- answer-first screens */
.eyebrow-s { font-size: 0.875rem; color: var(--ink-2); margin: 0 0 6px; }
.screen-q { font-family: var(--display); font-size: 1.625rem; line-height: 1.2; margin: 0 0 12px; }
.answer-p { font-size: 1.125rem; line-height: 1.55; margin: 0 0 12px; max-width: 36em; }
.answer-p:last-child { margin-bottom: 0; }
.chart-says { font-size: 1rem; line-height: 1.5; color: var(--ink-1); margin: 10px 0 0; }

/* change over time */
.chg-host { width: 100%; }
.chg-chart { display: block; overflow: visible; }
.chg-grid { stroke: var(--line); stroke-width: 1; }
.chg-base { stroke: var(--line-strong); stroke-width: 1.5; }
.chg-seam { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 5 4; }
.chg-ax { font-size: 0.8125rem; fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.chg-line { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.chg-line.is-me { stroke: var(--gain); }
.chg-line.is-on { stroke: var(--ink-3); stroke-width: 2.2; }
.chg-dot.is-me { fill: var(--gain); stroke: var(--surface-1); stroke-width: 2; }
.chg-dot.is-on { fill: var(--ink-3); stroke: var(--surface-1); stroke-width: 2; }
.chg-dot.is-hollow { fill: var(--surface-1); stroke-width: 2.5; }
.chg-dot.is-me.is-hollow { stroke: var(--gain); }
.chg-dot.is-on.is-hollow { stroke: var(--ink-3); }
.chg-lab { font-size: 0.875rem; font-weight: 650; }
.chg-lab.is-me { fill: var(--ink-1); }
.chg-lab.is-on { fill: var(--ink-2); }
.chg-rows { display: grid; gap: 4px; }
.chg-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas:
  "name spark ends" "word word word"; align-items: center; gap: 2px 12px; padding: 10px 0;
  border-bottom: 1px solid var(--line); }
.chg-row:last-child { border-bottom: 0; }
.chg-name { grid-area: name; font-size: 1.0312rem; font-weight: 600; }
.chg-row > svg { grid-area: spark; }
.chg-ends { grid-area: ends; font-size: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chg-arrow { color: var(--ink-3); margin: 0 4px; }
.chg-word { grid-area: word; font-size: 0.9062rem; color: var(--ink-2); }
.chg-spark { overflow: visible; }
.chg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.chg-list { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; font-size: 1.0312rem; line-height: 1.45; }
.chg-sub { color: var(--ink-2); font-size: 0.9062rem; }
.chg-events { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; font-size: 1.0312rem; line-height: 1.45; }
@media (max-width: 720px) { .chg-cols { grid-template-columns: 1fr; } }

/* ---------------------------------------------- navigation v2 */
.titlebar { display: grid; gap: 4px; margin: 0 0 4px; }
.tb-back { display: inline-flex; align-items: center; gap: 4px; justify-self: start;
  min-height: 44px; padding: 0 10px 0 2px; margin-left: -4px; border: 0; background: none;
  color: var(--ink-2); font: inherit; font-size: 1rem; cursor: pointer; border-radius: 10px; }
.tb-back svg { width: 22px; height: 22px; }
.tb-back:hover { color: var(--ink-1); background: var(--surface-2); }
.tb-title { font-family: var(--display); font-size: 1.6875rem; line-height: 1.2; margin: 0; font-weight: 640; }
.tb-ref { justify-self: start; min-height: 40px; padding: 0 12px; margin-top: 6px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface-1); color: var(--ink-1);
  font: inherit; font-size: 0.9375rem; cursor: pointer; }
.menu { display: grid; gap: 6px; padding: 4px 0 8px; }
.menu-i { text-align: left; min-height: 52px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink-1); font: inherit; font-size: 1.0625rem; cursor: pointer; }
#menuBtn svg { width: 20px; height: 20px; }
@media (max-width: 720px) {
  /* the header: name, place, listen, more - nothing else */
  #exportBtn, #themeBtn, #soundBtn, #benchChip { display: none !important; }
  .wordmark { order: 1; }
  .topbar-spacer { order: 2; }
  #readBtn { order: 3; }
  #readStopBtn { order: 4; }
  #menuBtn { order: 5; }
  #readBtn, #readStopBtn, #menuBtn { width: 44px; height: 44px; }
  .chip { font-size: 0.9375rem; padding: 7px 12px; }
  .chip .k { font-size: 0.75rem; }
  .bottomnav button { font-size: 0.8125rem; }
  .tb-title { font-size: 1.5625rem; }
}
@media (max-width: 720px) {
  .chipset { order: 6 !important; }
}

/* what is it known for */
.kn-rows { display: grid; gap: 14px; }
.kn-top { display: flex; justify-content: space-between; gap: 12px; font-size: 1.0625rem; }
.kn-name { font-weight: 600; }
.kn-v { font-variant-numeric: tabular-nums; font-weight: 700; }
.kn-track { height: 10px; border-radius: 5px; background: var(--surface-sunk); margin-top: 6px; overflow: hidden; }
.kn-track i { display: block; height: 100%; border-radius: 5px; background: var(--bar-ink); }
.kn-sub { font-size: 0.9062rem; color: var(--ink-2); margin-top: 4px; }
.cmp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ctl-lead { flex: 1 0 100%; font-size: 0.9375rem; color: var(--ink-2); }

/* ---------------------------------------------- reading floor
   The design review measured drill-down text at 10.5-14.5px on a phone,
   against 17-20px on Home and the quiz. The British Dyslexia Association's
   guidance and WCAG 1.4.4 point the same way: body 17px, secondary 15px,
   nothing below 13px (chart labels only). And no capitals-only labels:
   whole words in capitals lose their shape, which is how many dyslexic
   readers recognise them. */
.eyebrow, .qlesson-n, .qidea-h, .peek-q, .picker-group, .optlist .grp,
.sheet .eyebrow, .brief .eyebrow { text-transform: none !important; letter-spacing: 0 !important; }
@media (max-width: 720px) {
  body { font-size: 1.0625rem; }
  .card h3 { font-size: 1.125rem; }
  .card-note, .gloss, .explain-plain, .peek-answer, .prose, .tl-fact { font-size: 1rem; }
  .card-foot, .qsource, .home-small { font-size: 0.9375rem; }
  .stat .l { font-size: 0.9375rem; }
  .stat .h { font-size: 0.875rem; }
  .sectorrow .nm { font-size: 1.0312rem; }
  .sectorrow .meta, .meta { font-size: 0.9062rem; }
  .eyebrow { font-size: 0.9062rem; font-weight: 650; }
  .seg button, .sel, .btn { font-size: 0.9688rem; }
  .term-chip { font-size: 0.9375rem; }
  table.data { font-size: 0.9062rem; }
  .ax, .chart text { font-size: 0.8125rem; }
}
.wordmark-sub, table.data th, .flag, .opt .kind, .group-label { text-transform: none !important; letter-spacing: 0 !important; }
.group-label { font-size: 0.875rem; }
.opt .kind { font-size: 0.8125rem; }
.opt .nm small, .opt .sz { font-size: 0.875rem; }
.flag { font-size: 0.7812rem; }
table.data th { font-size: 0.8125rem; }
@media (max-width: 720px) { .opt { min-height: 52px; font-size: 1.0312rem; } .search { font-size: 1.0625rem; } }


/* ---------------------------------------------- audit 5, 24 Sept
   Measured on a phone at 375x812. Every number in design/audits/
   2026-09-24-phone-ux.md. */

/* F4: the dimmed option's letter failed AA in both themes (3.05:1 light,
   4.32:1 dark). The letter is how a reader re-finds the option they chose,
   so the row keeps full opacity and recedes by colour instead. */
.qopts.is-answered .qopt { opacity: 1; }
.qopts.is-answered .qopt:not(.is-right):not(.is-chosen) { color: var(--ink-2); border-color: var(--line); }
.qopts.is-answered .qopt:not(.is-right):not(.is-chosen) .qkey { color: var(--ink-2); border-color: var(--ink-3); }

/* F7: options were set at line-height 1.35 against the 1.5 the British
   Dyslexia Association asks for; the stem at 1.4. */
.qopt, .qlabel { line-height: 1.5; }
.qstem { line-height: 1.5; }

@media (max-width: 480px) {
  /* F5 and F6: the speaker button beside an option took 44px of a 375px
     screen, leaving the label 220px and 14.7 characters a line. Under the
     row instead, it gives the words the width back. */
  .qopts .qline { display: block; }
  .qopts .qline .qspk { margin: 6px 0 0 42px; }
  .qask .qline { align-items: flex-start; }
  .qstem { max-width: 40ch; }

  /* F8: three of five bar labels were clipped with an ellipsis. */
  /* the label and its number share a line, the bar sits under them: the
     name is readable in full and the row is two lines, not three */
  .qbar-row { grid-template-columns: 1fr auto; gap: 2px 10px; }
  .qbar-l { white-space: normal; overflow: visible; grid-column: 1; grid-row: 1; }
  .qbar-v { grid-column: 2; grid-row: 1; }
  .qbar-t { grid-column: 1 / -1; grid-row: 2; }
}

/* F2: the answer screen was 1,000px against an 812px fold, so the primary
   action sat below it. Next stays in the flow - a button pinned over the
   card's own text is the fault this replaced - and the screen gets shorter
   instead: no chip once answered, a one-line confidence row, tighter marked
   options. */
.qask.is-answered .qstem { font-size: 1.125rem; }
.qconf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 2px; }
.qconf-l { flex: 0 0 auto; margin: 0; }
.qopts.is-answered .qopt { min-height: 48px; padding-top: 8px; padding-bottom: 8px; }
.qopts.is-answered .qtag { margin-top: 4px; }

/* quiet mode: the controls leave the layout rather than sitting there dead */
body.is-quiet #soundBtn, body.is-quiet #readBtn, body.is-quiet #readStopBtn,
body.is-quiet .qspk, body.is-quiet .playbtn { display: none !important; }
.menu-sub { display: block; font-size: 0.875rem; color: var(--ink-2); margin-top: 2px; }

/* ---------------------------------------------------------- the locator map
   Figure and ground first: water is the tinted field, land the lighter
   figure, which is the way round a reader expects and the way round the
   first version had it backwards. Everything else is hierarchy - the place
   the question asks about is the only thing drawn at full strength. */
.locmap { margin: 10px 0 0; }
.lm-svg { display: block; width: 100%; height: auto; border-radius: 10px;
  border: 1px solid var(--line); }
.lm-water { fill: #dfe6ea; }
/* where the people are (400 per sq km, StatCan's own rule) and the county
   lines: the ground the question stands on, drawn quietly under it */
.lm-urban { fill: #e7e0d2; stroke: none; }
/* the county a question is about: the shape, not a pin in the middle of it */
.lm-here { fill: rgba(28, 26, 23, 0.05); stroke: #ada597;
  stroke-width: 1.8; stroke-linejoin: round; }
.lm-here.is-subject { fill: rgba(28, 26, 23, 0.10); stroke: var(--ink-2);
  stroke-width: 2.5; }
.lm-county { fill: none; stroke: #c6c0b2; stroke-width: 1.3;
  stroke-linejoin: round; stroke-linecap: round; }
.lm-ctext { fill: #8d8677; font-size: 25px; font-family: var(--sans);
  letter-spacing: 0.16em; }
.lm-land { fill: var(--surface-2); stroke: #9cadb5; stroke-width: 1.8;
  stroke-linejoin: round; }

/* reference cities: present, quiet, hollow */
.lm-adot { fill: none; stroke: var(--ink-3); stroke-width: 3; }
.lm-atext { fill: var(--ink-3); font-size: 27px; font-family: var(--sans);
  paint-order: stroke; stroke: var(--surface-2); stroke-width: 5px;
  stroke-linejoin: round; }

/* hydrography: italic, as it has been on reference maps for two centuries */
.lm-wtext { fill: #5d7c8a; font-size: 30px; font-style: italic;
  font-family: var(--sans); letter-spacing: 0.06em; }

/* the places the question is about */
.lm-ring { fill: none; stroke: var(--surface-2); stroke-width: 4; }
.lm-dot { fill: var(--ink-2); }
.lm-dot.is-sub { fill: var(--brand); }
.lm-ring.is-sub { stroke: var(--surface-2); stroke-width: 5; }
.lm-text { fill: var(--ink-1); font-size: 31px; font-weight: 600;
  font-family: var(--sans); paint-order: stroke; stroke: var(--surface-2);
  stroke-width: 7px; stroke-linejoin: round; }
.lm-text.is-sub { font-size: 36px; font-weight: 700; }
.lm-flow { fill: none; stroke: var(--brand); stroke-width: 4;
  stroke-dasharray: 10 8; opacity: .8; }

/* scale bar and key map: how far, and where in the province */
.lm-scale-l { stroke: var(--ink-2); stroke-width: 3; }
.lm-scale-t { fill: var(--ink-2); font-size: 26px; font-family: var(--sans);
  paint-order: stroke; stroke: var(--surface-2); stroke-width: 5px; }
.lm-key-water { fill: #dfe6ea; stroke: var(--line-strong); stroke-width: 2; }
.lm-key-land { fill: var(--surface-2); stroke: #9fb0b8; stroke-width: 1.5; }
.lm-key-box { fill: none; stroke: var(--brand); stroke-width: 3; }

.lm-cap { margin: 6px 2px 0; font-size: 0.9375rem; line-height: 1.5;
  color: var(--ink-2); }

@media (prefers-color-scheme: dark) {
  /* In the dark theme the land was var(--surface-1) against water at
     #1d2a31 - four points of lightness apart, so a whole district of
     northern Ontario read as lake. Land is lifted and water dropped until
     the two are plainly different values, which is the one thing a map of
     a lake-covered province cannot get wrong. */
  :root:not([data-theme="light"]) .lm-water { fill: #0b141a; }
  :root:not([data-theme="light"]) .lm-land { fill: #36332c; stroke: #5d7885; }
  :root:not([data-theme="light"]) .lm-wtext { fill: #7fa3b2; }
  :root:not([data-theme="light"]) .lm-atext,
  :root:not([data-theme="light"]) .lm-text,
  :root:not([data-theme="light"]) .lm-scale-t { stroke: var(--surface-1); }
  :root:not([data-theme="light"]) .lm-ring { stroke: var(--surface-1); }
  :root:not([data-theme="light"]) .lm-key-water { fill: #0b141a; }
  :root:not([data-theme="light"]) .lm-key-land { fill: #36332c; stroke: #5d7885; }
  :root:not([data-theme="light"]) .lm-urban { fill: #423c30; }
  :root:not([data-theme="light"]) .lm-here { fill: rgba(242, 240, 234, 0.09);
    stroke: #8d8577; }
  :root:not([data-theme="light"]) .lm-county { stroke: #635c4a; }
  :root:not([data-theme="light"]) .lm-ctext { fill: #8a8372; }
}
:root[data-theme="dark"] .lm-water { fill: #0b141a; }
:root[data-theme="dark"] .lm-land { fill: #36332c; stroke: #5d7885; }
:root[data-theme="dark"] .lm-wtext { fill: #7fa3b2; }
:root[data-theme="dark"] .lm-atext,
:root[data-theme="dark"] .lm-text,
:root[data-theme="dark"] .lm-scale-t { stroke: var(--surface-1); }
:root[data-theme="dark"] .lm-ring { stroke: var(--surface-1); }
:root[data-theme="dark"] .lm-key-water { fill: #0b141a; }
:root[data-theme="dark"] .lm-key-land { fill: #36332c; stroke: #5d7885; }
:root[data-theme="dark"] .lm-urban { fill: #423c30; }
:root[data-theme="dark"] .lm-here { fill: rgba(242, 240, 234, 0.09);
  stroke: #8d8577; }
:root[data-theme="dark"] .lm-county { stroke: #635c4a; }
:root[data-theme="dark"] .lm-ctext { fill: #8a8372; }


/* Births minus deaths: bars hanging from a zero line, not hollow boxes
   standing on the floor of the chart (Robert's phone, 24 Sept). */
.qnat { margin-top: 4px; }
.qnat-bars { display: flex; gap: 10px; height: 52px; align-items: flex-start;
  border-top: 1.5px solid var(--line-strong); }
.qnat:not(.is-down) .qnat-bars { align-items: flex-end;
  border-top: 0; border-bottom: 1.5px solid var(--line-strong); }
.qnat-col { flex: 1; display: flex; flex-direction: column; align-items: center; }
.qnat-bar { display: block; width: 22px; background: var(--ink-2);
  border-radius: 0 0 4px 4px; }
.qnat:not(.is-down) .qnat-bar { border-radius: 4px 4px 0 0; }
.qnat-labels { display: flex; gap: 10px; margin-top: 5px; }
.qnat-v { font-size: 0.8125rem; font-variant-numeric: tabular-nums;
  color: var(--ink-1); font-weight: 600; }
.qnat-y { font-size: 0.8125rem; color: var(--ink-3); }

/* The story behind the number: why a place looks the way it does. Quieter
   than the figure it explains, and never a second highlight competing with
   it - the card already has one. */
.qstory { margin: 8px 0 0; font-size: 1.0625rem; line-height: 1.55;
  color: var(--ink-2); }
.qstory-more { margin: 0 0 10px; }
.qstory-p { margin: 0 0 8px; font-size: 1.0625rem; line-height: 1.55;
  color: var(--ink-2); }

/* An answered option is not a button any more: it needs a readable row, not
   a 48px tap target, and the four of them were pushing Next off the screen. */
.qopts.is-answered .qopt { padding-top: 9px; padding-bottom: 9px; }
.qconf { margin-top: 10px; }
.qconf-l { margin-bottom: 2px; }