/* ══════════════════════════════════════════════════════════════════════
   BULLETIN — Direction 3, taken from the study and made into a system.

   Premise: a civic notice board or a printed railway timetable. Two inks
   on cool newsprint, set by a jobbing printer who owned one condensed
   grotesque and one book serif.

   Two things carry this system, and both are easy to lose:

   1. THE PAIRING IS INVERTED. The display face is sans, the reading face
      is serif. That is the opposite of the house style, and it is the
      whole idea. Do not "fix" it.
   2. HIERARCHY LIVES IN RULE WEIGHT, not in size. 4px opens a section,
      2px opens a block, 1px separates a row. Adding a fourth weight, or
      reaching for a size jump where a rule would do, flattens it.

   Light and dark from one token set. Light is the resting state.
   ══════════════════════════════════════════════════════════════════════ */

/* Every tint below mixes `in oklab`, never `in oklch`. oklch interpolates
   HUE, so mixing an accent into a near-achromatic paper drags it all the
   way to the paper's nominal hue — the red tint and the mustard tint both
   came out blue. oklab mixes on the a/b axes and keeps the accent. */

/* ── 1 · colour ───────────────────────────────────────────────────── */
:root, [data-mode="light"] {
  --paper:       oklch(0.957 0.004 240);
  --surface:     oklch(0.984 0.002 240);
  --surface-2:   oklch(0.928 0.006 240);
  --ink:         oklch(0.200 0.008 250);
  --muted:       oklch(0.455 0.010 250);
  --faint:       oklch(0.536 0.009 250);
  --rule:        oklch(0.840 0.006 250);
  --rule-strong: oklch(0.200 0.008 250);   /* the heavy rule IS the ink */

  /* Halo drawn around map markers. It must be the LIGHT colour in BOTH
     modes: on a light basemap it separates a saturated pin from pale
     ground, and on a dark basemap it is the only thing giving the pin an
     edge. Using --paper here breaks in dark, where --paper is the ground. */
  --marker-halo: oklch(0.957 0.004 240);

  /* two inks and a middle. a1 is the one you reach for when something
     must be noticed; a2 is place and position; a3 is the middle band. */
  --a1: oklch(0.545 0.205 27);
  --a2: oklch(0.398 0.115 256);
  --a3: oklch(0.628 0.132 84);   /* darkened from .660 for 3:1 on paper */

  --on-a1: oklch(0.984 0.004 40);
  --on-a2: oklch(0.984 0.004 240);
  --on-a3: oklch(0.200 0.020 84);

  --tint-a1:  color-mix(in oklab, var(--a1) 11%, var(--paper));
  --tint-a2:  color-mix(in oklab, var(--a2) 11%, var(--paper));
  --tint-a3:  color-mix(in oklab, var(--a3) 18%, var(--paper));
  --tint-ink: color-mix(in oklab, var(--ink) 6%, var(--paper));

  --band-high: var(--a1);
  --band-mid:  var(--a2);
  --band-low:  var(--faint);
  --on-band-high: var(--on-a1);
  --on-band-mid:  var(--on-a2);

  --in:  var(--a2);
  --out: var(--a1);
  --in-tint:  color-mix(in oklab, var(--in) 12%, var(--paper));
  --band-fill: var(--in-tint);

  --w-red: var(--a1);
  --w-white: var(--a3);
  --w-orange: oklch(0.640 0.150 52);
  --w-rose: oklch(0.700 0.110 12);
  --w-sparkling: var(--a2);

  --focus: var(--a2);
  --pop-shadow: 5px 5px 0 var(--ink);
  --tile-filter: none;
}

[data-mode="dark"] {
  --paper:       oklch(0.168 0.008 250);
  --surface:     oklch(0.208 0.009 250);
  --surface-2:   oklch(0.252 0.010 250);
  --ink:         oklch(0.948 0.003 250);
  --muted:       oklch(0.740 0.010 250);
  --faint:       oklch(0.592 0.010 250);
  --rule:        oklch(0.318 0.009 250);
  --rule-strong: oklch(0.948 0.003 250);
  --marker-halo: oklch(0.948 0.003 250);

  --a1: oklch(0.690 0.185 28);
  --a2: oklch(0.705 0.110 252);
  --a3: oklch(0.795 0.125 88);

  --on-a1: oklch(0.168 0.020 30);
  --on-a2: oklch(0.168 0.016 250);
  --on-a3: oklch(0.168 0.020 88);

  --tint-a1:  color-mix(in oklab, var(--a1) 20%, var(--paper));
  --tint-a2:  color-mix(in oklab, var(--a2) 20%, var(--paper));
  --tint-a3:  color-mix(in oklab, var(--a3) 22%, var(--paper));
  --tint-ink: color-mix(in oklab, var(--ink) 9%, var(--paper));

  --in-tint: color-mix(in oklab, var(--in) 22%, var(--paper));
  --w-white: var(--a3);
  --w-orange: oklch(0.760 0.140 55);
  --w-rose: oklch(0.780 0.095 12);

  --pop-shadow: 5px 5px 0 var(--a1);
  /* The basemap now has a real dark style (Esri Canvas Dark Gray), so no
     filter is needed. Inverting a light map was a stopgap and it looked it. */
  --tile-filter: none;
}

/* ── 2 · type — inverted pairing ──────────────────────────────────
   Barlow Condensed leads the display stack rather than Avenir Next
   Condensed: the system face is macOS-only, and on Windows the whole
   direction collapses into plain Helvetica. The system faces stay
   behind it as fallbacks. */
:root {
  --f-display: 'Barlow Condensed', 'Avenir Next Condensed', 'Helvetica Neue Condensed', 'Futura', sans-serif;
  --f-text:    'Source Serif 4', Charter, 'Iowan Old Style', Georgia, serif;
  --f-mono:    'IBM Plex Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  --t-display: clamp(40px, 5.6vw, 76px);
  --t-head:    clamp(21px, 2.3vw, 28px);
  --t-body:    15.5px;
  --t-data:    13px;
  --t-label:   11px;
  --t-micro:   10px;

  --track-label: 0.14em;
  --row: 32px;

  /* ── 3 · rules — the entire hierarchy ───────────────────────────── */
  --r-heavy: 4px;
  --r-mid:   2px;
  --hair:    1px;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 36px; --s7: 52px; --s8: 76px;
  --rad: 0px;
  --shell: 1240px;
  --wide: 1520px;
  --gutter: clamp(18px, 3.5vw, 44px);
}

/* ── base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f-text); font-size: var(--t-body); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
svg { display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
::selection { background: var(--tint-a3); }
:focus-visible { outline: var(--r-mid) solid var(--focus); outline-offset: 2px; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--surface-2); }
::-webkit-scrollbar-thumb { background: var(--muted); }
::-webkit-scrollbar-thumb:hover { background: var(--ink); }

.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell-wide { max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--s7); }
.section-tight { padding-block: var(--s6); }
.section + .section { border-top: var(--r-heavy) solid var(--rule-strong); }
.rule { border: 0; border-top: var(--hair) solid var(--rule); margin: 0; }

.label {
  font-family: var(--f-display); font-size: var(--t-label); font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted);
}
.caption { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--faint); letter-spacing: 0.04em; }

/* ── 4 · header ───────────────────────────────────────────────────── */
.sitehead {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: var(--r-heavy) solid var(--rule-strong);
}
.sitehead-inner {
  display: flex; align-items: baseline; gap: var(--s4);
  min-height: 52px; padding-block: var(--s3);
}
.mark {
  font-family: var(--f-display); font-size: 25px; font-weight: 700;
  letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap;
}
.xnav { display: flex; flex-wrap: wrap; gap: var(--s4); margin-left: auto; }
.xnav a {
  font-family: var(--f-display); font-size: 15px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  padding-block: 3px; border-bottom: var(--r-mid) solid transparent;
  transition: color .12s, border-color .12s;
}
.xnav a:hover { color: var(--ink); border-bottom-color: var(--muted); }
.xnav a[aria-current="page"] { color: var(--a1); border-bottom-color: var(--a1); }

.mode {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 32px; padding: 0 11px; align-self: center;
  border: var(--r-mid) solid var(--rule-strong);
  font-family: var(--f-display); font-size: var(--t-label); font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase;
  transition: background .12s, color .12s;
}
.mode:hover { background: var(--ink); color: var(--paper); }
.mode:hover .mode-dot { background: var(--paper); }
.mode-dot { width: 9px; height: 9px; background: var(--ink); }

/* ── 5 · display + reading ────────────────────────────────────────── */
.display {
  font-family: var(--f-display); font-size: var(--t-display);
  font-weight: 700; line-height: 0.94; letter-spacing: -0.015em;
  text-transform: uppercase; max-width: 16ch; text-wrap: balance;
}
.h2 {
  font-family: var(--f-display); font-size: var(--t-head); font-weight: 600;
  letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.14;
}
.lede {
  font-size: 17px; line-height: 1.52; color: var(--muted); max-width: 60ch;
  padding-top: var(--s4); border-top: var(--hair) solid var(--rule);
  text-wrap: pretty;
}
.prose { max-width: 64ch; }
.prose p + p { margin-top: var(--s4); }
.prose a { color: var(--a2); border-bottom: var(--hair) solid var(--a2); }
.prose a:hover { background: var(--a2); color: var(--on-a2); border-bottom-color: transparent; }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
  padding-bottom: var(--s2);
  border-bottom: var(--r-mid) solid var(--rule-strong);
  margin-bottom: var(--s5);
}

/* ── 6 · statistic tile row — framed cells under a heavy cap ─────── */
.stats {
  display: grid; grid-template-columns: repeat(var(--stat-cols, 4), minmax(0, 1fr));
  border-top: var(--r-heavy) solid var(--rule-strong);
  border-bottom: var(--hair) solid var(--rule);
}
.stat { padding: var(--s3) var(--s4) var(--s4) 0; border-right: var(--hair) solid var(--rule); }
.stat + .stat { padding-left: var(--s4); }
.stat:last-child { border-right: 0; }
.stat-k {
  font-family: var(--f-display); font-size: var(--t-label); font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--s2);
}
.stat-v {
  font-family: var(--f-display); font-size: clamp(34px, 3.8vw, 52px);
  font-weight: 700; line-height: 0.9; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-u { font-family: var(--f-mono); font-size: 0.3em; font-weight: 400; color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.stat-s { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--faint); margin-top: 7px; letter-spacing: 0.03em; }
.stat-v.is-out { color: var(--a1); }
.stat-v.is-in  { color: var(--a2); }
/* A tile that opens a section. Same cell; the press is signalled by a rule
   under it, never a wash — mustard on hover, red while its section is open. */
button.stat { display: block; width: 100%; text-align: left; transition: box-shadow .12s; }
button.stat:hover { box-shadow: inset 0 calc(-1 * var(--r-mid)) 0 var(--a3); }
button.stat[aria-expanded="true"] { box-shadow: inset 0 calc(-1 * var(--r-mid)) 0 var(--a1); }
button.stat:hover .stat-s, button.stat[aria-expanded="true"] .stat-s { color: var(--ink); }

/* ── 7 · controls ─────────────────────────────────────────────────── */
.controls {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3);
  padding: var(--s3) 0 var(--s4);
  border-bottom: var(--r-mid) solid var(--rule-strong);
}
.field { display: grid; gap: 5px; min-width: 0; }
.field-k {
  font-family: var(--f-display); font-size: var(--t-label); font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted);
}
.input, .select {
  min-height: 36px; padding: 5px 10px;
  background: var(--surface);
  border: var(--r-mid) solid var(--rule-strong);
  border-radius: var(--rad);
  font-family: var(--f-mono); font-size: var(--t-data); color: var(--ink);
}
.input { min-width: 240px; }
.select { min-width: 150px; appearance: none; padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 16px, calc(100% - 9px) 16px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.input::placeholder { color: var(--faint); }
.input:hover, .select:hover { background: var(--tint-ink); }
.input:focus-visible, .select:focus-visible { border-color: var(--a2); outline-offset: 0; }

.seg { display: flex; border: var(--r-mid) solid var(--rule-strong); }
.seg button {
  min-height: 36px; padding: 0 11px;
  font-family: var(--f-display); font-size: var(--t-label); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  border-right: var(--hair) solid var(--rule);
  transition: background .12s, color .12s;
}
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--tint-ink); color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.seg button[aria-pressed="true"]:hover { background: var(--a1); color: var(--on-a1); }

.btn {
  min-height: 36px; padding: 0 13px;
  border: var(--r-mid) solid var(--rule-strong); border-radius: var(--rad);
  font-family: var(--f-display); font-size: var(--t-label); font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase;
  transition: background .12s, color .12s;
}
.btn:hover { background: var(--ink); color: var(--paper); }

.result {
  font-family: var(--f-mono); font-size: var(--t-label);
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted);
  padding-block: var(--s3);
}
.result b { color: var(--a1); font-weight: 400; }

/* ── 8 · dense sortable table — the timetable ─────────────────────
   overflow stays visible on desktop: any non-visible overflow turns
   .tablewrap into a scrollport and kills the sticky column heads */
.tablewrap { border-top: var(--r-heavy) solid var(--rule-strong); }
.dt { width: 100%; border-collapse: collapse; font-family: var(--f-mono); font-size: var(--t-data); }
.dt thead th {
  position: sticky; top: 52px; z-index: 5;
  background: var(--paper);
  padding: 0; text-align: left; vertical-align: bottom; white-space: nowrap;
  border-bottom: var(--r-mid) solid var(--rule-strong);
}
.dt th button {
  display: inline-flex; align-items: center; gap: 5px;
  width: 100%; min-height: 30px; padding: 8px 10px 6px 0;
  font-family: var(--f-display); font-size: var(--t-label); font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--muted); text-align: left; transition: color .12s;
}
.dt thead th + th button { padding-left: 10px; }
.dt th button:hover { color: var(--a1); }
.dt th .arrow {
  width: 7px; height: 7px; opacity: 0; flex: none;
  border-left: var(--r-mid) solid currentColor; border-bottom: var(--r-mid) solid currentColor;
  transform: rotate(-45deg) translateY(-1px);
}
.dt th[aria-sort]:not([aria-sort="none"]) button { color: var(--a1); }
.dt th[aria-sort]:not([aria-sort="none"]) .arrow { opacity: 1; }
.dt th[aria-sort="ascending"] .arrow { transform: rotate(135deg) translateY(-1px); }

.dt tbody td {
  height: var(--row); padding: 5px 10px 5px 0;
  border-bottom: var(--hair) solid var(--rule);
  vertical-align: middle; font-variant-numeric: tabular-nums;
}
.dt tbody td + td { padding-left: 10px; }
/* Row state is a RULE, never a wash. Any tint dark enough to see behind
   a light-mode row lowers the contrast of the 10px .faint and .n cells
   below their resting value — hover would make the row harder to read
   than leaving it alone. A left edge costs nothing, and promoting the
   dim cells to full ink raises contrast instead of lowering it. */
.dt tbody tr { transition: box-shadow .1s, color .1s; }
.dt tbody tr:hover { box-shadow: inset 3px 0 0 var(--a3); }
.dt tbody tr:focus-visible { outline: var(--r-mid) solid var(--focus); outline-offset: -2px; }
.dt tbody tr.is-open { box-shadow: inset 3px 0 0 var(--a1); }
.dt tbody tr:hover > .n,
.dt tbody tr:hover > .dim,
.dt tbody tr:hover > .faint,
.dt tbody tr.is-open > .n,
.dt tbody tr.is-open > .dim,
.dt tbody tr.is-open > .faint { color: var(--ink); }
.dt .n { color: var(--faint); font-size: var(--t-micro); width: 44px; }
.dt .r { text-align: right; }
.num-cell { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.dt .dim { color: var(--muted); }
.dt .faint { color: var(--faint); font-size: var(--t-micro); }
.dt .name {
  font-family: var(--f-display); font-size: 15px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.dt td a { transition: color .12s; }
.dt td a:hover { color: var(--a1); }
.dt .wrapcell { font-family: var(--f-text); font-size: 13.5px; max-width: 28ch;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.detail-row td { background: var(--surface-2); border-bottom: var(--r-mid) solid var(--rule-strong);
                 padding: var(--s4) 0; height: auto; }
.detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
          gap: var(--s5); padding-right: var(--s4); }
.detail-k { font-family: var(--f-display); font-size: var(--t-label); font-weight: 600;
            letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.detail-v { font-family: var(--f-text); font-size: 14px; }
.detail-v.num { font-family: var(--f-mono); font-size: var(--t-data); }

.band {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; padding: 1px 6px;
  font-family: var(--f-mono); font-size: var(--t-data); font-variant-numeric: tabular-nums;
}
.band.high { background: var(--a1); color: var(--on-a1); }
.band.mid  { background: var(--a3); color: var(--on-a3); }
.band.low  { color: var(--faint); box-shadow: inset 0 0 0 1px var(--rule); }

.state {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-display); font-size: var(--t-label); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.state::before { content: ''; width: 8px; height: 8px; flex: none; }
.state.in::before  { background: var(--in); }
.state.out::before { background: var(--out); }
.state.in  { color: var(--a2); }
.state.out { color: var(--a1); }

.tag {
  display: inline-block; padding: 0 6px; background: var(--tint-ink);
  font-family: var(--f-mono); font-size: var(--t-micro);
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 6px; height: 6px; display: block; box-shadow: inset 0 0 0 1px var(--rule); }
.dots i.on { background: var(--a2); box-shadow: none; }

/* ── 9 · collapsible ──────────────────────────────────────────────── */
.folds { border-top: var(--r-heavy) solid var(--rule-strong); }
.fold { border-bottom: var(--hair) solid var(--rule); }
.fold > h3 { margin: 0; }
.fold-btn {
  width: 100%; display: flex; align-items: center; gap: var(--s3);
  min-height: 48px; padding: var(--s3) 0; text-align: left; transition: color .12s;
}
.fold-btn:hover { color: var(--a1); }
.fold-btn:hover .chev { border-color: var(--a1); }
.chev {
  width: 9px; height: 9px; flex: none;
  border-right: var(--r-mid) solid var(--ink); border-bottom: var(--r-mid) solid var(--ink);
  transform: rotate(-45deg); transition: transform .17s;
}
.fold.is-open .chev { transform: rotate(45deg); }
.fold-t { font-family: var(--f-display); font-size: 18px; font-weight: 600;
          letter-spacing: 0.09em; text-transform: uppercase; }
.fold-m { margin-left: auto; font-family: var(--f-mono); font-size: var(--t-label);
          letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); }
.fold-body { display: none; padding-bottom: var(--s5); }
.fold.is-open .fold-body { display: block; }

/* ── 10 · Leaflet — a printed plate ───────────────────────────────── */
.mapwrap { position: relative; border-block: var(--r-mid) solid var(--rule-strong); background: var(--surface-2); }
.map { height: clamp(360px, 46vh, 520px); background: var(--surface-2); }
.leaflet-container { background: var(--surface-2) !important; font-family: var(--f-text); outline: none; }
.leaflet-tile-pane { filter: var(--tile-filter); }
.leaflet-pane, .leaflet-top, .leaflet-bottom { z-index: 5; }

.leaflet-bar, .leaflet-control-zoom {
  border: var(--r-mid) solid var(--rule-strong) !important; box-shadow: none !important; border-radius: 0 !important;
}
.leaflet-bar a, .leaflet-control-zoom a {
  background: var(--paper) !important; color: var(--ink) !important;
  border-bottom: var(--hair) solid var(--rule) !important;
  width: 30px !important; height: 30px !important; line-height: 30px !important;
  font-family: var(--f-display) !important; font-weight: 600 !important;
}
.leaflet-bar a:hover, .leaflet-control-zoom a:hover { background: var(--ink) !important; color: var(--paper) !important; }
.leaflet-bar a:last-child { border-bottom: 0 !important; }
.leaflet-control-attribution {
  background: var(--paper) !important; color: var(--faint) !important;
  font-family: var(--f-mono) !important; font-size: var(--t-micro) !important; padding: 2px 7px !important;
}
.leaflet-control-attribution a { color: var(--muted) !important; }
.leaflet-control-scale-line {
  background: var(--paper) !important; border-color: var(--ink) !important; color: var(--muted) !important;
  font-family: var(--f-mono) !important; font-size: var(--t-micro) !important;
}

/* square markers — the printer had rules and blocks, not pins */
.mk { box-sizing: border-box; }
.mk-i {
  display: block; width: 100%; height: 100%;
  background: var(--a2); border: var(--r-mid) solid var(--paper);
  transition: transform .12s;
}
.mk-i.high { background: var(--a1); }
.mk-i.mid  { background: var(--a2); }
.mk-i.low  { background: var(--paper); border-color: var(--ink); }
.mk:hover .mk-i { transform: scale(1.35); }
.mk.is-active .mk-i { background: var(--ink); border-color: var(--a1); transform: scale(1.4); }

/* the one flourish in the whole system: a hard offset shadow, the way a
   two-colour press drops a second impression slightly off-register */
.leaflet-popup-content-wrapper {
  background: var(--paper) !important; color: var(--ink) !important;
  border: var(--r-mid) solid var(--rule-strong) !important;
  border-radius: 0 !important; box-shadow: var(--pop-shadow) !important;
}
.leaflet-popup-content { margin: 0 !important; padding: var(--s3) var(--s4) !important; width: 234px !important; line-height: 1.5 !important; }
.leaflet-popup-tip { background: var(--paper) !important; border: var(--r-mid) solid var(--rule-strong) !important; box-shadow: none !important; }
.leaflet-popup-close-button { color: var(--muted) !important; padding: 7px 8px 0 0 !important; font-family: var(--f-display) !important; }
.leaflet-popup-close-button:hover { color: var(--a1) !important; background: none !important; }
.pop-k { font-family: var(--f-display); font-size: var(--t-label); font-weight: 600;
         letter-spacing: var(--track-label); text-transform: uppercase; color: var(--a2); }
.pop-n { font-family: var(--f-display); font-size: 22px; font-weight: 700;
         letter-spacing: 0.01em; text-transform: uppercase; line-height: 1.02; margin: 4px 0 var(--s3); }
.pop-dl { display: flex; gap: var(--s4); margin: 0; padding: var(--s2) 0;
          border-block: var(--hair) solid var(--rule); }
.pop-dl div { display: grid; gap: 1px; }
.pop-dl dt { font-family: var(--f-display); font-size: var(--t-micro); font-weight: 600;
             color: var(--faint); text-transform: uppercase; letter-spacing: 0.1em; }
.pop-dl dd { margin: 0; font-family: var(--f-mono); font-size: var(--t-data); font-variant-numeric: tabular-nums; }
.pop-note { font-size: 14px; color: var(--muted); margin-top: var(--s2); }

.legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5);
  padding: var(--s3) 0; border-bottom: var(--hair) solid var(--rule);
}
.legend-k { font-family: var(--f-display); font-size: var(--t-label); font-weight: 600;
            letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.legend-i { display: inline-flex; align-items: center; gap: 8px;
            font-family: var(--f-mono); font-size: var(--t-label); color: var(--muted); }
.legend-i b { width: 10px; height: 10px; display: block; }
.legend-i .k-high { background: var(--a1); }
.legend-i .k-mid  { background: var(--a2); }
.legend-i .k-low  { background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); }
.legend-n { color: var(--faint); font-variant-numeric: tabular-nums; }
.map-fallback {
  display: grid; place-content: center; gap: var(--s2); text-align: center;
  height: 100%; padding: var(--s5); color: var(--muted);
  font-family: var(--f-mono); font-size: var(--t-data);
}

/* ── 11 · trend charts — each draw is a printed bar ───────────────── */
.chartgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: var(--s5) var(--s5);
}
.chart { display: grid; gap: var(--s2); padding-top: var(--s2);
         border-top: var(--r-mid) solid var(--rule-strong); }
.chart.is-out { border-top-color: var(--a1); }
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.chart-t { font-family: var(--f-display); font-size: 14px; font-weight: 600;
           letter-spacing: 0.08em; text-transform: uppercase; }
.chart-u { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--faint); white-space: nowrap; }
.chart-read { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.chart-v { font-family: var(--f-display); font-size: 32px; font-weight: 700;
           line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.chart-v.out { color: var(--a1); }
.chart-d { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--faint); text-align: right; line-height: 1.35; }
.chart-ref { display: flex; justify-content: space-between; gap: var(--s3); align-items: center;
             font-family: var(--f-mono); font-size: var(--t-micro); color: var(--faint);
             padding-top: 5px; border-top: var(--hair) solid var(--rule); }

.tc { width: 100%; height: auto; background: var(--surface); }
.tc-band { fill: var(--band-fill); }
.tc-edge { stroke: var(--a2); stroke-width: 1; stroke-dasharray: 5 3; }
.tc-base { stroke: var(--ink); stroke-width: 2; }
.tc-line { fill: none; stroke: var(--ink); stroke-width: 2; }
.tc-dot  { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; }
.tc-dot.out { fill: var(--a1); stroke: var(--a1); }
.tc-dot.last { stroke-width: 2.4; }
.tc-col { fill: var(--ink); }
.tc-col.out { fill: var(--a1); }
.tc-col.last { fill: var(--a2); }
.tc-col.last.out { fill: var(--a1); }

.spark { width: 62px; height: 17px; }
.spark path { fill: none; stroke: var(--muted); stroke-width: 1.4; }
.spark.out path { stroke: var(--a1); }

.key { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); padding: var(--s3) 0;
       border-block: var(--hair) solid var(--rule); }
.key-i { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--muted); }
.key-i b { font-weight: 400; color: var(--ink); }
.key-sw { width: 18px; height: 12px; display: block; flex: none; }
.key-sw.band { background: var(--band-fill); box-shadow: inset 0 2px 0 var(--a2), inset 0 -2px 0 var(--a2); }
.key-sw.dot-in  { width: 10px; height: 10px; background: var(--in); }
.key-sw.dot-out { width: 10px; height: 10px; background: var(--out); }
.key-sw.line { height: 0; border-top: var(--r-mid) solid var(--ink); }

/* ── 12 · homepage index rows ─────────────────────────────────────── */
.index { border-top: var(--r-mid) solid var(--rule-strong); }
.index-row {
  display: grid; grid-template-columns: 16ch minmax(0, 1fr) auto;
  gap: var(--s5); align-items: baseline;
  padding: var(--s4) 0; border-bottom: var(--hair) solid var(--rule);
  transition: background .12s;
}
a.index-row:hover { box-shadow: inset 3px 0 0 var(--a3); }
a.index-row:hover .index-n { color: var(--a1); }
a.index-row:hover .index-d, a.index-row:hover .index-c { color: var(--ink); }
.index-n { font-family: var(--f-display); font-size: 22px; font-weight: 700;
           letter-spacing: 0.02em; text-transform: uppercase; transition: color .12s; }
.index-d { color: var(--muted); font-size: 14.5px; }
.index-c { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.04em;
           color: var(--faint); text-align: right; white-space: nowrap; }

.pagefoot { border-top: var(--r-heavy) solid var(--rule-strong); padding-block: var(--s4) var(--s7); }
.pagefoot p { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--faint); max-width: 78ch; letter-spacing: 0.03em; }
.pagefoot p + p { margin-top: var(--s2); }

/* ── 13 · reflow ──────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat:nth-child(3n) { border-right: 0; }
  .stat:nth-child(n+4) { border-top: var(--hair) solid var(--rule); }
  .tablewrap { overflow-x: auto; }
  .dt thead th { position: static; }
}
@media (max-width: 720px) {
  .sitehead-inner { flex-wrap: wrap; gap: var(--s2); }
  .xnav { margin-left: 0; gap: var(--s3); order: 3; width: 100%; }
  .mode { margin-left: auto; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { border-right: 0; padding-left: 0 !important; border-top: var(--hair) solid var(--rule); }
  .stat:nth-child(odd) { border-right: var(--hair) solid var(--rule); }
  .stat:nth-child(even) { padding-left: var(--s4) !important; }
  .index-row { grid-template-columns: 1fr auto; gap: var(--s2) var(--s3); }
  .index-d { grid-column: 1 / -1; }
  .input { min-width: 0; width: 100%; }
  .field-search { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }