/* =========================================================
   GlobeWarn — layout.css
   One A4-ish column over a faded live world map. Headlines
   first, the map right under them, everything else after.
   No colour is written here; all come from theme.css.
   ========================================================= */

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

/* Nothing on this page may push a neighbour or leave the screen: every
   container may shrink (min-width: 0), long words break rather than
   widen their parent, and the document never scrolls sideways. */
html, body { max-width: 100%; overflow-x: clip; }
img, svg, table { max-width: 100%; }

html {
  font-size: calc(17px * var(--scale));
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.45;
  min-height: 100vh;
  font-variant-numeric: tabular-nums;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* Keyboard users jump straight to the alerts. Visible only on focus. */
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 8px 12px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-weight: 600; transition: top 0.15s var(--ease); }
.skip:focus { top: 12px; outline: 2px solid var(--ink); }
.noscript { max-width: var(--content-max); margin: 16px auto; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); font-size: 1rem; line-height: 1.5; }

/* Jump targets stop below the sticky header, never under it. */
/* Cleared by the bar's real height, which the script measures and writes to
   --bar-total. The fallback is the old constant, so a jump still lands
   somewhere sensible if the script has not run yet. */
[id] { scroll-margin-top: calc(var(--bar-total, var(--bar-h)) + 14px); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--font-mono); font-size: 0.92em; }

/* ---------- Background: the map for the time the map is off-screen ----------
   The reading column sits over Europe and Africa, so the margins show
   the two regions the text hides: the Americas on the left, Asia-Pacific
   on the right. Every live alert is plotted here as well, sized by tier,
   with the night side of the planet drawn from the Sun's position — so a
   reader keeps the state of the world in peripheral vision while reading,
   and can see at a glance which half of the planet is in darkness.
   Hovering a headline lights its exact spot. When the real map scrolls
   into view this layer steps back, so nothing is ever shown twice at full
   strength. */
.bgmap {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  display: none;
  transition: opacity 0.4s var(--ease);
}
.bgmap svg { width: 100%; height: 100%; display: block; }
.bgmap .land { fill: var(--map-land-bg); stroke: none; }
.bgmap .night { fill: var(--map-night); }
.bgmap .grid { stroke: var(--map-grid); stroke-width: 0.6; fill: none; }
.bgmap .bgdot { opacity: 0.75; transition: opacity 0.25s var(--ease); }
.bgmap .bgdot--red { fill: var(--sev-red); }
.bgmap .bgdot--orange { fill: var(--sev-orange); }
.bgmap .bgdot--yellow { fill: var(--sev-yellow); opacity: 0.6; }
.bgmap .bgdot--green { fill: var(--sev-gray); opacity: 0.4; }
.bgmap.is-focused .bgdot { opacity: 0.18; }
.bgmap .bgdot.is-hot { opacity: 1; }
.bgmap .bgring { fill: none; stroke: var(--ink); stroke-width: 1.2; opacity: 0; vector-effect: non-scaling-stroke; }
.bgmap .bgring.is-on { opacity: 0.5; }
.bgmap.is-focused { opacity: 0.9; }
.bgmap.is-quiet { opacity: 0.2; }
@media (min-width: 1280px) {
  .bgmap { display: block; opacity: 0.7; }
  .bgmap::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--bg) 0%, transparent 11%, transparent 16%, var(--bg) 26%, var(--bg) 74%, transparent 84%, transparent 89%, var(--bg) 100%);
    opacity: 0.92;
  }
}
@media (prefers-reduced-motion: reduce) { .bgmap, .bgmap .bgdot { transition: none; } }

/* ---------- Signature: the planet's pulse along the top edge ---------- */
.pulse {
  position: fixed; top: 0; left: 0; right: 0; height: 12px; z-index: 40;
  pointer-events: none; color: var(--ink);
}
.pulse svg { width: 100%; height: 100%; display: block; }
.pulse path { fill: none; stroke: currentColor; stroke-width: 0.8; stroke-linejoin: round; opacity: 0.55; }
.pulse.is-red path { stroke: var(--sev-red); opacity: 0.85; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar__inner {
  max-width: 1180px; margin: 0 auto; min-height: var(--bar-h);
  display: flex; align-items: center; gap: 10px; padding: 4px 14px; flex-wrap: wrap;
}
.brand {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em;
  font-size: 1.15rem; color: var(--ink); white-space: nowrap; flex: none;
  display: inline-flex; align-items: center;
}
/* "warn" carries the colour of a road-works cone — safety orange, one
   step deeper than the orange alert tier, adjusted per theme. */
.brand em, .hero__word em, .footerbar__brand em { font-style: normal; color: var(--cone); }
.brand:hover { text-decoration: none; }
/* Two rows, on purpose.

   Nine links do not fit beside the brand and the clock at this measure, so
   the bar was wrapping by accident: the nav took every pixel left over —
   which is why asking it to centre changed nothing, it had nothing to centre
   in — and the clock fell to a second row on the left.

   Now the rows are declared. The brand holds the left of the first row and
   the clock, the refresh pill and the language sit at its right. The nav
   takes a row of its own underneath and is centred against the whole bar,
   not against whatever space happened to be left. */
.topbar__spacer { flex: 1; order: 2; }
.brand { order: 1; }
.clock, .pill, .lang { order: 3; }
/* A row of its own, centred against the whole bar.

   Asking it to centre while it was a flex child between the brand and the
   clock did nothing: it took every pixel left over, so its contents already
   filled the space and there was nothing to centre in.

   On a narrow window the bar becomes a stack and the nav a dropped column;
   centring would put ragged links down the middle, so that case aligns to
   the start in the rule further down. */
.topnav {
  order: 4; flex: 1 0 100%;
  display: flex; align-items: center; justify-content: center;
  gap: 2px; min-width: 0; flex-wrap: wrap; padding-bottom: 2px;
}
.topnav__link {
  padding: 6px 9px; border-radius: 6px; font-size: 0.94rem; color: var(--ink-soft); white-space: nowrap;
}
.topnav__link:hover { background: var(--accent-wash); color: var(--ink); text-decoration: none; }
.topnav__more { position: relative; }
.topnav__more summary { list-style: none; cursor: pointer; }
.topnav__more summary::-webkit-details-marker { display: none; }
.topnav__submenu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift); padding: 6px; display: grid;
}
.clock {
  font-family: var(--font-mono); font-size: 0.88rem; color: var(--ink-soft); white-space: nowrap; flex: none;
  background: none; border: 1px solid transparent; border-radius: 999px; padding: 3px 9px; cursor: pointer;
}
.clock:hover { border-color: var(--line); background: var(--surface-alt); color: var(--ink); }
.clock[aria-expanded="true"] { border-color: var(--accent); color: var(--ink); }
.clock::after { content: " \25BE"; opacity: 0.55; }
.pill {
  font-size: 0.84rem; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 8px; white-space: nowrap; background: var(--surface); flex: none;
}
.pill.is-stale { border-color: var(--sev-orange); color: var(--sev-orange); }
.lang { position: relative; flex: none; }
.lang__btn {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px;
  border: 1px solid var(--line); background: var(--surface); border-radius: 999px; cursor: pointer;
  font-size: 0.86rem; font-weight: 600; letter-spacing: 0.04em;
}
.lang__menu {
  position: absolute; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift); min-width: 160px; z-index: 50;
}
.lang__menu li { padding: 8px 11px; border-radius: 6px; cursor: pointer; font-size: 0.96rem; }
.lang__menu li[aria-selected="true"] { background: var(--accent-wash); font-weight: 600; }
.topnav__toggle {
  display: none; width: 34px; height: 34px; border: 1px solid var(--line); background: var(--surface);
  border-radius: 8px; cursor: pointer; align-items: center; justify-content: center;
}

/* ---------- Page column ---------- */
.page,
.wrap {
  position: relative; z-index: 1;
  max-width: var(--content-max); margin: 0 auto; padding: 18px 16px 40px;
}

.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin: 10px 0 6px; }
.hero__mark { margin: 0; font-family: var(--font-display); line-height: 1; flex: 1 1 260px; min-width: 0; }
.hero__word { display: inline-block; position: relative; font-size: clamp(1.7rem, 6vw, 2.4rem); font-weight: 800; letter-spacing: -0.04em; }
.hero__sub { display: block; font-size: 0.95rem; font-weight: 500; color: var(--ink-soft); letter-spacing: 0.02em; margin-top: 6px; }
/* The tail is italic and not bold: the claim is the sentence, the
   cadence is the qualification. Weight would make them read as two
   claims of equal size. */
.hero__sub-note { font-style: italic; font-weight: 400; }
.hero__cadence { display: block; font-family: var(--font-mono); font-size: 0.84rem; color: var(--ink-faint); margin: 5px 0 0; letter-spacing: 0.01em; }
.counts { display: flex; gap: 8px; flex-wrap: wrap; flex: 0 1 auto; }
.count {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 10px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); cursor: pointer; text-decoration: none; color: var(--ink);
}
.count:hover { text-decoration: none; box-shadow: var(--shadow-soft); }
.count b { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; line-height: 1; }
.count span { font-size: 0.84rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.count--red b { color: var(--sev-red); }
.count--orange b { color: var(--sev-orange); }
.count--yellow b { color: var(--sev-yellow); }

.planet-line {
  margin: 12px 0 14px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); font-size: 1.08rem; line-height: 1.55;
  min-height: 3.2em;
}
.planet-line .date { display: block; font-family: var(--font-mono); font-size: 0.84rem; color: var(--ink-faint); margin-bottom: 4px; letter-spacing: 0.03em; }

.since {
  display: none; margin: 0 0 12px; padding: 9px 12px; font-size: 0.94rem;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); color: var(--ink-soft);
}
.since.is-on { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.since button { border: 0; background: none; color: var(--accent); cursor: pointer; padding: 0; }

/* ---------- Ended since the previous refresh ---------- */
.ended { margin: 0 0 12px; padding: 8px 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); font-size: 0.9rem; color: var(--ink-soft); }
.ended__head { font-size: 0.84rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--ink-faint); }
.ended__list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.ended__list li { display: flex; align-items: center; gap: 6px; }
.ended__list .glyph { width: 10px; height: 10px; opacity: 0.6; flex: none; }
.ended__list .mono { color: var(--ink-faint); margin-left: auto; }

/* ---------- Refresh diff: rows flash once ---------- */
@keyframes rowflash { 0% { background: var(--accent-wash); } 100% { background: transparent; } }
@keyframes rowflash-esc { 0% { background: var(--sev-red-wash); } 100% { background: transparent; } }
.row.is-fresh { animation: rowflash 2.4s var(--ease) 1; }
.row.is-escalated { animation: rowflash-esc 2.4s var(--ease) 1; border-left-color: var(--sev-red); }
@media (prefers-reduced-motion: reduce) { .row.is-fresh, .row.is-escalated { animation: none; } }

/* ---------- Ahead: the next seven days ---------- */
.ahead { margin: 0 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ahead__head { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px 6px; }
.ahead__head h2 { margin: 0; font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -0.01em; }
.ahead__head .n { flex: 1; font-family: var(--font-mono); font-size: 0.86rem; color: var(--ink-soft); }
.ahead__head button { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 3px 10px; font-size: 0.84rem; cursor: pointer; }
.ahead__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 0 14px 12px; }
.aday {
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer;
  padding: 7px 6px 6px; display: grid; gap: 2px; justify-items: center; text-align: center; color: var(--ink-soft);
}
.aday:hover { background: var(--surface-alt); }
.aday__d { font-size: 0.84rem; letter-spacing: 0.04em; text-transform: uppercase; }
.aday__n { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; line-height: 1; color: var(--ink); }
.aday--red { border-color: var(--sev-red); } .aday--red .aday__n { color: var(--sev-red); }
.aday--orange { border-color: var(--sev-orange); } .aday--orange .aday__n { color: var(--sev-orange); }
.aday--yellow { border-color: var(--sev-yellow); } .aday--yellow .aday__n { color: var(--sev-yellow); }
.aday--none .aday__n { color: var(--ink-faint); font-weight: 500; }
.aday[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.aday[aria-pressed="true"] .aday__n { color: var(--accent-ink); }
@media (max-width: 700px) { .ahead__days { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Region view tabs ---------- */
.regions { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.region {
  border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 5px 12px; cursor: pointer;
  font-size: 0.9rem; color: var(--ink-soft);
}
.region:hover { background: var(--surface-alt); color: var(--ink); }
.region[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.region .n { font-family: var(--font-mono); font-size: 0.84rem; margin-left: 5px; opacity: 0.8; }

/* ---------- Headline tiers ---------- */
.tier { margin: 0 0 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.tier__head {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  border-bottom: 1px solid var(--line); font-size: 0.88rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700;
}
.tier__head .n { font-family: var(--font-mono); font-weight: 400; letter-spacing: 0; color: var(--ink-soft); }
.tier__head .spacer { flex: 1; }
.tier__head button { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 3px 10px; font-size: 0.84rem; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 500; }
.tier--red .tier__head { color: var(--sev-red); background: var(--sev-red-wash); }
.tier--orange .tier__head { color: var(--sev-orange); background: var(--sev-orange-wash); }
.tier--yellow .tier__head { color: var(--sev-yellow); background: var(--sev-yellow-wash); }
.tier--green .tier__head { color: var(--sev-green); background: var(--sev-green-wash); }
.tier__empty { padding: 12px 14px; font-size: 1rem; color: var(--ink-soft); }
.rows { list-style: none; margin: 0; padding: 0; }
.row {
  display: grid; grid-template-columns: 22px minmax(38px, auto) minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 8px 14px; border-bottom: 1px solid var(--line); cursor: pointer; position: relative;
  border-left: 3px solid transparent; transition: background 0.15s var(--ease);
}
.row:last-child { border-bottom: 0; }
.row:hover, .row.is-hot { background: var(--surface-alt); }
.row.is-selected { border-left-color: var(--accent); background: var(--accent-wash); }
.row.is-hidden { display: none; }
.glyph { width: 16px; height: 16px; display: block; }
.glyph--red { fill: var(--sev-red); }
.glyph--orange { fill: var(--sev-orange); }
.glyph--yellow { fill: var(--sev-yellow); }
.glyph--green { fill: var(--sev-green); }
/* Hazard icons: drawn, never filled, so they take the colour of the text
   around them and stay legible in every theme and in print. */
.hzicon { width: 1.05em; height: 1.05em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hz { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 0.84rem; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: 4px; padding: 2px 6px; text-align: center; white-space: nowrap; }
.row__main { min-width: 0; overflow: hidden; }
.row__title { font-weight: 600; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__meta { font-size: 0.88rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__meta .src { font-family: var(--font-mono); font-size: 0.84rem; border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; margin-right: 6px; }
.row__meta .cd { font-family: var(--font-mono); font-size: 0.84rem; border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 5px; margin-right: 6px; color: var(--ink-soft); }
.row__meta .cd.is-urgent { border-color: var(--sev-red); color: var(--sev-red); font-weight: 700; }
.row__meta .cd.is-soon { border-color: var(--accent); color: var(--accent); }
.row__meta .cd.is-over { opacity: 0.65; }
.row__meta .mmi { font-family: var(--font-mono); font-size: 0.84rem; border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 5px; margin-right: 6px; color: var(--ink-soft); }
.row__meta .agree { font-size: 0.84rem; border: 1px solid var(--sev-green); color: var(--sev-green); border-radius: 4px; padding: 0 5px; margin-right: 6px; font-weight: 600; }
.row__meta .newtag { font-size: 0.84rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); border-radius: 4px; padding: 0 5px; margin-right: 6px; vertical-align: 1px; }
.row__time { font-family: var(--font-mono); font-size: 0.84rem; color: var(--ink-soft); text-align: right; white-space: nowrap; justify-self: end; }


/* ---------- Continent groups inside a tier ----------
   Name, count and the expander sit together on the left, in the order
   they are read: which continent, how many, what a press will do. The
   row stays quiet until the pointer is on it. */
.cgroup { border-bottom: 1px solid var(--line); }
.cgroup:last-child { border-bottom: 0; }
.cgroup__head {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 14px;
  background: var(--surface-alt); border: 0; border-bottom: 1px solid var(--line);
  cursor: pointer; text-align: left; font-size: 0.88rem; letter-spacing: 0.03em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft);
  flex-wrap: wrap; row-gap: 2px;
}
.cgroup__head:hover { background: var(--accent-wash); color: var(--ink); }
.cgroup__head .glyph { width: 11px; height: 11px; flex: none; }
.cgroup__name { flex: none; }
.cgroup__n { font-family: var(--font-mono); font-weight: 400; letter-spacing: 0; flex: none; }
.cgroup__more {
  font-family: var(--font-body); font-weight: 500; text-transform: none; letter-spacing: 0;
  font-size: 0.86rem; color: var(--accent); flex: none;
}
.cgroup__more::before { content: "\203A\00A0"; }
.cgroup__head[aria-expanded="true"] .cgroup__more::before { content: "\2039\00A0"; }
.cgroup__head[aria-expanded="true"] .cgroup__more:empty::before { content: ""; }
.cgroup__more:empty { display: none; }
.rows--in { border: 0; }
.rows--in .row:last-child { border-bottom: 0; }
.group .cgroup__head { padding-left: 8px; padding-right: 8px; }

/* ---------- Map ---------- */
.mapwrap {
  margin: 0 0 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line);
  overflow: hidden; position: relative;
}
@media (min-width: 1000px) and (min-height: 760px) {
  .mapwrap { position: sticky; bottom: 10px; z-index: 5; box-shadow: var(--shadow-lift); }
}
.map { width: 100%; height: 42vh; min-height: 300px; display: block; background: var(--surface); touch-action: none; cursor: grab; }
.map:active { cursor: grabbing; }
.map .land { fill: var(--map-land); stroke: var(--surface); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.map .night { fill: var(--map-night); pointer-events: none; }
.map .grid { stroke: var(--map-grid); fill: none; vector-effect: non-scaling-stroke; pointer-events: none; }
/* Event geometry from the source: areas washed in, buffers and tracks
   drawn as lines, all in the tier's colour. */
.geom { pointer-events: none; vector-effect: non-scaling-stroke; }
.geom--area, .geom--affected { fill: currentColor; fill-opacity: 0.18; stroke: currentColor; stroke-width: 1.2; }
.geom--buffer { fill: currentColor; fill-opacity: 0.08; stroke: currentColor; stroke-width: 1; stroke-dasharray: 4 3; }
.geom--line { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.geom--dot, .geom--point { fill: currentColor; fill-opacity: 0.8; stroke: none; }
.geom--red { color: var(--sev-red); }
.geom--orange { color: var(--sev-orange); }
.geom--yellow { color: var(--sev-yellow); }
.geom--green { color: var(--sev-green); }
.panel__geom { margin: 10px 0 0; font-size: 0.9rem; color: var(--ink-soft); }
.map .marker { cursor: pointer; }
.map .marker .shape { stroke: var(--surface); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.map .marker--red .shape { fill: var(--sev-red); }
.map .marker--orange .shape { fill: var(--sev-orange); }
.map .marker--yellow .shape { fill: var(--sev-yellow); }
.map .marker--green .shape { fill: var(--sev-green); }
.map .marker .ring { fill: none; stroke: var(--sev-red); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; }
.map .marker.is-hot .ring, .map .marker.is-selected .ring { opacity: 0.9; animation: ring 1.4s var(--ease) infinite; }
.map .marker--orange.is-hot .ring, .map .marker--orange.is-selected .ring { stroke: var(--sev-orange); }
.map .marker--yellow.is-hot .ring, .map .marker--yellow.is-selected .ring { stroke: var(--sev-yellow); }
.map .marker--green.is-hot .ring, .map .marker--green.is-selected .ring { stroke: var(--sev-green); }
.map .marker text { font-family: var(--font-mono); font-size: 14px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 0.8px; pointer-events: none; }
@keyframes ring { from { r: 6; opacity: 0.9; } to { r: 22; opacity: 0; } }
.map__bar {
  position: absolute; left: 10px; top: 10px; right: 52px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 2;
  max-height: 40%; overflow: auto; scrollbar-width: thin;
}
.chip { display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 90%, transparent);
  border-radius: 999px; padding: 4px 10px; font-size: 0.84rem; cursor: pointer; color: var(--ink-soft);
}
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.map__zoom { position: absolute; right: 10px; top: 10px; display: grid; gap: 4px; z-index: 2; }
.zoom-btn {
  width: 30px; height: 30px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-radius: 8px; cursor: pointer; display: grid; place-items: center;
}
.zoom-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.map__foot {
  display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 7px 12px; border-top: 1px solid var(--line); font-size: 0.84rem; color: var(--ink-faint); overflow-wrap: anywhere;
}
.map__tip {
  position: absolute; z-index: 3; pointer-events: none; display: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-lift);
  padding: 7px 10px; font-size: 0.86rem; max-width: min(280px, calc(100% - 24px));
}
.map__tip.is-on { display: block; }
.map__tip b { display: block; }
.map__chip {
  position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); z-index: 3; display: none;
  background: var(--ink); color: var(--bg); border-radius: 999px; padding: 7px 13px; font-size: 0.9rem;
  max-width: calc(100% - 24px); text-align: center;
}
.map__chip.is-on { display: block; }

/* ---------- Details panel ---------- */
.panel {
  position: fixed; top: calc(var(--bar-total, var(--bar-h)) + 12px); right: 12px; width: min(360px, calc(100vw - 24px)); max-height: calc(100vh - var(--bar-h) - 24px);
  overflow: auto; z-index: 35; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lift); padding: 16px 16px 18px; transform: translateX(16px); opacity: 0; visibility: hidden;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease), visibility 0s 0.25s;
}
.panel.is-open { transform: none; opacity: 1; visibility: visible; transition: transform 0.25s var(--ease), opacity 0.25s var(--ease); }
.panel__close { position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; border: 0; background: var(--surface-alt); border-radius: 8px; cursor: pointer; }
.panel__tag .hzicon--tag { width: 1.2em; height: 1.2em; }
.panel__tag { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.84rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin-bottom: 8px; }
.panel__tag .glyph { width: 12px; height: 12px; }
.panel__title { margin: 0 30px 4px 0; font-family: var(--font-display); font-size: 1.22rem; line-height: 1.25; letter-spacing: -0.01em; }
.panel__place { color: var(--ink-soft); font-size: 0.98rem; margin: 0 0 12px; }
.panel dl { margin: 0; display: grid; grid-template-columns: minmax(90px, 118px) minmax(0, 1fr); gap: 6px 10px; font-size: 0.94rem; }
.panel dt { color: var(--ink-faint); }
.panel dd { margin: 0; overflow-wrap: anywhere; }
.panel__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 8px; font-size: 0.94rem;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none;
}
.btn:hover { text-decoration: none; background: var(--surface-alt); }
.btn--small { padding: 4px 10px; font-size: 0.88rem; }
.btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn--primary:hover { background: var(--accent); filter: brightness(1.05); }
@media (max-width: 900px) {
  .panel {
    top: auto; right: 0; left: 0; bottom: 0; width: auto; max-height: 72vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; transform: translateY(20px);
  }
  .panel.is-open { transform: none; }
}

/* ---------- Ongoing (NASA EONET open events) ---------- */
.section { margin: 0 0 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.section__head { display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; padding: 12px 14px 4px; }
.section__head h2 { margin: 0; font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -0.01em; white-space: nowrap; }
.section__head .n { font-family: var(--font-mono); font-size: 0.86rem; color: var(--ink-soft); white-space: nowrap; }
.section__head .spacer { flex: 1; }
.section__note { padding: 0 14px 10px; font-size: 0.92rem; color: var(--ink-soft); }
.groups { padding: 0 14px 12px; display: grid; gap: 8px; }
.group summary { cursor: pointer; font-weight: 600; font-size: 1rem; padding: 6px 0; list-style: none; display: flex; gap: 8px; align-items: center; }
.group summary::-webkit-details-marker { display: none; }
.group summary .n { font-family: var(--font-mono); font-weight: 400; font-size: 0.86rem; color: var(--ink-soft); }
.group summary .glyph { width: 11px; height: 11px; flex: none; }
.group summary::before { content: "▸"; color: var(--ink-faint); font-size: 0.84rem; }
.group[open] summary::before { content: "▾"; }
.group .rows { border-top: 1px solid var(--line); }
.group .row { padding-left: 8px; padding-right: 8px; grid-template-columns: 22px 1fr auto; }

/* ---------- Folded card (Methodology): closed by default ---------- */
.section--fold > summary { list-style: none; cursor: pointer; padding-bottom: 12px; }
.section--fold > summary::-webkit-details-marker { display: none; }
.section--fold > summary::after { content: "\25BE"; margin-left: auto; color: var(--ink-faint); font-size: 0.9rem; }
.section--fold[open] > summary::after { content: "\25B4"; }
.section--fold > summary:hover h2 { color: var(--accent); }
.section--fold > summary .n { flex: 1; }

/* ---------- Data health / sources / methodology ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 0.94rem; display: block; overflow-x: auto; scrollbar-width: thin; }
/* The head and the body are each display:table inside a display:block
   table, which makes them two separate tables — so their columns were sized
   independently and the labels drifted away from the values under them.
   Fixed layout makes both compute the same widths, which is what puts a
   header back over its own column.

   No floor and no sideways scroll. The three right-hand columns hold fixed
   widths measured from their widest real content, and the source column
   takes whatever is left — so squeezing the window shortens the source
   description and nothing else moves. The gaps between columns stay equal
   because they are the cell padding, which is the same everywhere. */
.table thead, .table tbody {
  display: table; width: 100%; table-layout: fixed;
}

/* Nothing leaves its own cell. Without this a long value simply prints over
   the column beside it, which is what "29s15 min" was. */
.table th, .table td { overflow: hidden; text-overflow: ellipsis; }
/* Widths declared once and applied to both, because the head and the body
   are separate tables here and each would otherwise size its own columns. */
/* Measured, not guessed: the status word with its dot, "03:53 UTC · 29s ago"
   in the mono face, and "15 min" — each column wide enough for its own
   longest value and its own header, and no wider. The first column is
   whatever remains. */
.table th:first-child, .table td:first-child { width: auto; min-width: 0; }
.table th:nth-child(2), .table td:nth-child(2) { width: 5.5rem; }
.table th:nth-child(3), .table td:nth-child(3) { width: 12.5rem; }
.table th:nth-child(4), .table td:nth-child(4) { width: 5rem; }
.table th, .table td { text-align: left; padding: 7px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.table th { font-size: 0.84rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); font-weight: 600; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: var(--sev-gray); }
.dot.is-fresh { background: var(--sev-green); }
.dot.is-stale { background: var(--sev-orange); }
.dot.is-down { background: var(--sev-red); }
.dot.is-loading { background: var(--sev-blue); }
.prose { padding: 4px 14px 14px; font-size: 1rem; line-height: 1.55; }
.prose p { margin: 0 0 8px; }
.prose ul { margin: 0 0 8px; padding-left: 18px; }
.prose li { margin: 2px 0; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.9rem; padding: 0 14px 12px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend--hero { padding: 6px 2px 0; margin: 0 0 4px; color: var(--ink-soft); }

/* ---------- Side rails ---------- */
.rails { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
.rail {
  position: absolute; top: 50%; transform: translateY(-50%); display: grid; gap: var(--rail-gap); pointer-events: auto;
}
.rail--left { left: max(6px, calc((100vw - var(--content-max)) / 2 - var(--rail-size) - 14px)); }
.rail--right { right: max(6px, calc((100vw - var(--content-max)) / 2 - var(--rail-size) - 14px)); }
.rail button {
  width: var(--rail-size); height: var(--rail-size); border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-soft);
}
.rail button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.rail button svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.rail button:hover { background: var(--surface-alt); }
.rail button[aria-pressed="true"]:hover { background: var(--accent); }
.search {
  position: fixed; top: calc(var(--bar-total, var(--bar-h)) + 10px); left: 50%; transform: translateX(-50%); z-index: 36;
  width: min(520px, calc(100vw - 32px)); display: none;
}
.search.is-on { display: block; }
.search input {
  width: 100%; height: 40px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 14px; font: inherit;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lift);
}
@media (max-width: 1100px) {
  .rails { top: auto; bottom: 0; inset: auto 0 0 0; }
  .rail--left, .rail--right { left: auto; right: auto; }
  .rail { position: static; transform: none; grid-auto-flow: column; justify-content: center; gap: 8px; padding: 8px 0 max(8px, env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
  .rail--right { display: none; }
  .rail--left { display: grid; }
  .rail--left .mobile-only { display: grid; }
  .page, .wrap { padding-bottom: 80px; }
}
.rail .mobile-only { display: none; }

/* ---------- World clocks (wide screens only) ----------
   Four cities down each margin, on the same geography as the background
   map: Americas and Europe left, Asia and the Pacific right. The card
   dims when the sun is down there, takes the accent when the page is
   showing that city's time, and is outlined when it is the city nearest
   the hovered alert. They sit outside the control rails and never touch
   the reading column. */
.clocks {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 18;
  display: none; grid-auto-rows: min-content; gap: 6px; width: 132px;
}
.clocks--left { left: 20px; }
.clocks--right { right: 20px; }
@media (min-width: 1360px) and (min-height: 620px) { .clocks { display: grid; } }

.clock-card {
  display: grid; gap: 0; width: 100%; padding: 5px 8px 4px; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft); color: var(--ink); line-height: 1.12;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), opacity 0.3s var(--ease);
}
.clock-card:hover { background: var(--surface-alt); }
.clock-card__top { display: flex; align-items: center; gap: 6px; }
.clock-card__time { font-family: var(--font-mono); font-size: 1.16rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.clock-card__sun { width: 8px; height: 8px; border-radius: 50%; background: var(--sev-yellow); flex: none; margin-left: auto; }
.clock-card.is-night .clock-card__sun { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-faint); }
.clock-card.is-night { opacity: 0.7; }
.clock-card__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; }
.clock-card__city { font-size: 0.84rem; color: var(--ink-soft); white-space: nowrap; }
.clock-card__off { font-family: var(--font-mono); font-size: 0.84rem; color: var(--ink-faint); white-space: nowrap; }
.clock-card.is-near { border-color: var(--cone); box-shadow: var(--shadow-lift); opacity: 1; }
.clock-card[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); opacity: 1; }
.clock-card[aria-pressed="true"] .clock-card__city,
.clock-card[aria-pressed="true"] .clock-card__off { color: var(--accent-ink); opacity: 0.85; }
.clock-card[aria-pressed="true"].is-night .clock-card__sun { box-shadow: inset 0 0 0 1.5px var(--accent-ink); }
@media (prefers-reduced-motion: reduce) { .clock-card { transition: none; } }

/* ---------- Time-zone popover ----------
   Opens from the point that was pressed and grows from it. Thirty-odd
   world cities plus UTC and your own device, sorted west to east, with a
   filter field on top. The choice is written to this browser and used on
   every later visit. */
.tzpop {
  position: fixed; z-index: 70; width: 330px; max-width: calc(100vw - 24px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lift); padding: 6px; margin: 0;
  display: grid; grid-template-rows: auto auto minmax(0, 1fr);
  max-height: min(62vh, 560px);
  opacity: 0; transform: scale(0.92); transform-origin: var(--tz-origin, top left); visibility: hidden;
  transition: opacity 0.16s var(--ease), transform 0.18s var(--ease), visibility 0s 0.18s;
}
.tzpop.is-on { opacity: 1; transform: none; visibility: visible; transition: opacity 0.16s var(--ease), transform 0.18s var(--ease); }
.tzpop__head { padding: 5px 10px 6px; font-size: 0.84rem; color: var(--ink-faint); margin: 0; }
.tzpop__filter {
  width: 100%; height: 36px; margin: 0 0 4px; padding: 0 10px; font: inherit; font-size: 0.94rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink);
}
.tzpop__list { overflow: auto; scrollbar-width: thin; min-height: 0; }
.tzpop__item {
  display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 6px 10px; border: 0; border-radius: var(--radius-sm);
  background: none; cursor: pointer; text-align: left; color: var(--ink); font-size: 0.94rem;
}
.tzpop__item:hover, .tzpop__item.is-cursor { background: var(--surface-alt); }
.tzpop__item[aria-selected="true"] { background: var(--accent-wash); font-weight: 600; }
.tzpop__item[aria-selected="true"]::after { content: "\2713"; margin-left: 2px; color: var(--accent); }
.tzpop__item.is-hidden { display: none; }
.tzpop__name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tzpop__time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.tzpop__off { font-family: var(--font-mono); font-size: 0.84rem; color: var(--ink-faint); min-width: 72px; text-align: right; }
.tzpop__zone { font-family: var(--font-mono); font-size: 0.84rem; color: var(--ink-faint); margin-left: 4px; }
.tzpop__empty { padding: 8px 10px; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.4; }
.tzpop hr { border: 0; border-top: 1px solid var(--line); margin: 5px 4px; }
@media (prefers-reduced-motion: reduce) { .tzpop { transition: none; } }

/* ---------- Export menu ---------- */
.expop {
  position: fixed; z-index: 70; min-width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lift); padding: 6px; display: grid; gap: 2px;
  opacity: 0; transform: scale(0.94); transform-origin: var(--tz-origin, top left); visibility: hidden;
  transition: opacity 0.16s var(--ease), transform 0.18s var(--ease), visibility 0s 0.18s;
}
.expop.is-on { opacity: 1; transform: none; visibility: visible; transition: opacity 0.16s var(--ease), transform 0.18s var(--ease); }
.expop button { border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.94rem; color: var(--ink); }
.expop button:hover { background: var(--surface-alt); }
.expop button small { display: block; font-size: 0.84rem; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .expop { transition: none; } }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 60; opacity: 0; visibility: hidden;
  background: var(--ink); color: var(--bg); padding: 9px 15px; border-radius: 999px; font-size: 0.94rem; max-width: calc(100vw - 32px); text-align: center;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease), visibility 0s 0.25s;
}
.toast.is-on { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform 0.25s var(--ease), opacity 0.25s var(--ease); }
@media (max-width: 1100px) { .toast { bottom: 70px; } }

/* ---------- Footer ----------
   Line 1 keeps the ends: brand at the far left, links at the far right.
   Lines 2 and 3 (data, disclaimer) sit centred beneath. */
.footerbar { position: relative; z-index: 1; border-top: 1px solid var(--line); background: var(--surface); margin-top: 10px; }
.footerbar__inner {
  max-width: 1180px; margin: 0 auto; padding: 13px 14px 6px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 15px; font-size: 0.9rem;
}
.footerbar__inner a { color: var(--ink-soft); }
.footerbar__brand { font-family: var(--font-display); font-weight: 700; color: var(--ink) !important; display: inline-flex; align-items: center; }
.footerbar__brand em { font-style: normal; color: var(--cone); }
.footerbar__spacer { flex: 1; }
.footerbar__line2 {
  max-width: 1180px; margin: 0 auto; padding: 0 14px 16px; font-size: 0.84rem; color: var(--ink-faint);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 14px; text-align: center;
}
.footerbar__line2 span { white-space: nowrap; }
.footerbar__line2 span:last-child { white-space: normal; flex-basis: 100%; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .topnav { position: absolute; top: var(--bar-h); left: 0; right: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 8px; background: var(--surface); border-bottom: 1px solid var(--line); display: none; }
  .topnav.is-open { display: flex; }
  .topnav__toggle { display: inline-flex; }
  .clock { display: none; }
  .hero__word { font-size: 2rem; }
  .row__title { font-size: 1rem; }
  .row__meta { font-size: 0.88rem; }
  .row { grid-template-columns: 18px minmax(34px, auto) minmax(0, 1fr); gap: 8px; padding: 8px 10px; }
  .row__time { display: none; }
  .panel dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .panel dt { margin-top: 6px; }
  .map { height: 56vh; }
}

@media (max-width: 420px) {
  .row { grid-template-columns: 18px minmax(0, 1fr); }
  .row .hz { display: none; }
  .cgroup__head { font-size: 0.84rem; }
}

/* ---------- Contrast preference ----------
   A reader whose system asks for more contrast gets the High Contrast
   palette without touching the theme button, unless they have already
   chosen a theme themselves (data-theme-choice is then set). */
@media (prefers-contrast: more) {
  html:not([data-theme-choice]) {
    --bg: #FFFFFF; --surface: #FFFFFF; --surface-alt: #F2F2F2;
    --ink: #000000; --ink-soft: #1A1A1A; --ink-faint: #333333;
    --accent: #0000D6; --accent-ink: #FFFFFF; --accent-wash: #E6E6FF; --accent-2: #006B5E;
    --line: #6B6B6B; --line-strong: #3A3A3A; --cone: #B23A00;
    --map-land: #BFBFBF; --map-land-bg: #B0B0B0; --map-night: rgba(0,0,0,0.28); --map-grid: rgba(0,0,0,0.10);
  }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .map .marker .ring { animation: none !important; }
  .panel, .toast, .row { transition: none !important; }
}

/* ---------- Print: Home prints as a one-page situation report ---------- */
@media print {
  .bgmap, .pulse, .rails, .clocks, .tzpop, .expop, .search, .panel, .toast, .topnav__toggle, .lang, .map__bar, .map__zoom, .since, .tier__head button, .regions, #ahead-clear { display: none !important; }
  .section--fold > summary::after { content: ""; }
  .section--fold { break-inside: avoid; }
  .ahead, .cgroup__head { break-inside: avoid; }
  .topbar { position: static; }
  .page, .wrap { max-width: none; padding: 0; }
  .mapwrap { position: static; box-shadow: none; break-inside: avoid; }
  .map { height: 300px; }
  .tier, .section { break-inside: avoid; box-shadow: none; }
  a::after { content: ""; }
  body { background: #fff; color: #000; }
}

/* ---------- Hero post-it ----------
   A note stuck beside the title for the first seconds of a visit, then gone.

   It floats: absolutely positioned against the word, so it takes no space in
   the layout and moves nothing when it leaves. Placed inline it pushed the
   heading around and read as part of the page rather than as something stuck
   on top of it.

   One line, never wrapped. A note that breaks into a paragraph is a
   paragraph.

   Margin stays zero. The one space between it and the word is in the offset
   instead — 0.6rem, about the width of a space at the title's size — because
   a margin on an absolutely positioned element fights the offset rather than
   adding to it, and the two together are a thing nobody can reason about
   later.

   Padding is zero too, and line-height is 1: the yellow ends where the text
   ends, with no border and no rounding. Elsewhere on this page text needs
   room to breathe inside a box, and that rule is right for cards a reader
   sits with. This is a strip of colour behind eight words for a few seconds,
   and the ask was explicit twice.

   Its colours are fixed rather than themed. A post-it is a physical object —
   the same yellow with the same dark ink in every theme, which also stops
   the dark theme putting pale text on yellow.

   It disappears rather than fading to nothing and staying: visibility is
   hidden at the end, so it stops being a target for the keyboard and the
   screen reader as soon as it stops being visible. */
.postit {
  position: absolute;
  left: calc(100% + 0.6rem);
  top: 50%;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  transform: translateY(-50%) rotate(-2.5deg);
  transform-origin: left center;
  background: #FFE86B;
  color: #1B2530;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  border-radius: 0;
  box-shadow: 0 1px 2px rgba(11, 31, 51, 0.28),
              0 6px 14px rgba(11, 31, 51, 0.14);
  pointer-events: none;
  z-index: 5;
  animation: postit-life 12s linear forwards;
}

/* Solid to 7s, gone by 12s. */
@keyframes postit-life {
  0%, 58.34% { opacity: 1; visibility: visible; }
  99.9%      { opacity: 0; visibility: visible; }
  100%       { opacity: 0; visibility: hidden; }
}

/* Reduced motion: it still appears and still leaves, but it does not fade —
   a request for less movement is not a request for less information. */
@media (prefers-reduced-motion: reduce) {
  .postit { animation: postit-life 12s steps(1, end) forwards; }
}

/* Too narrow to sit beside the word, so it goes above it rather than below.
   Below is where the permanent tagline sits, and a floating note would have
   covered it for twelve seconds — the same mistake as deleting it, with a
   timer on it. There is room above: the page pads 18px and the hero adds
   10px, against a note about 15px tall with no padding and no leading. */
@media (max-width: 900px) {
  .postit {
    left: 0;
    top: auto;
    bottom: calc(100% + 3px);
    transform: rotate(-2.5deg);
  }
}

/* ---------- Touch ----------
   Two controls sit at about 26px tall, which is fine under a cursor and
   fiddly under a thumb. They grow only where the pointer is coarse, so the
   desktop layout is untouched — a phone gets a bigger target, a mouse gets
   the same page it had.

   The rest measure 33px and up. WCAG's minimum is 24px; these clear it, and
   enlarging every link on the page would loosen a layout that reads well. */
@media (pointer: coarse) {
  .ahead__head button,
  .tier__head button {
    padding: 8px 10px;
    min-height: 40px;
  }

  .group summary { min-height: 40px; }
}

/* ---------- The table on a narrow window ----------
   The three fixed columns come to 23rem. Below about 26rem of card the
   source column would have nothing left, so columns are dropped rather than
   squeezed — a squeezed column shows a truncated timestamp, which is worse
   than no timestamp.

   "Every" goes first: every row now reads 15 min, and the line under the
   heading already says so. "Last fetch" goes next, leaving the two columns
   that answer the only question this card exists for — which source, and is
   it answering. */
@media (max-width: 600px) {
  .table th:nth-child(4), .table td:nth-child(4) { display: none; }
}

@media (max-width: 460px) {
  .table th:nth-child(3), .table td:nth-child(3) { display: none; }
}

/* ---------- Coordinates, as a control ----------
   The position in the panel subtitle is the thing you press to copy it. A
   reader who wants the coordinates looks where they are printed, not at a
   button under the facts — so the printed value is the button, and the two
   other places that carried it have gone.

   It looks like the text it replaced: same size, same colour, no chrome,
   with a dotted underline as the only sign it does something. A full button
   in the middle of a sentence would read as a different kind of thing. */
.coordbtn {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: copy;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.coordbtn:hover { color: var(--accent); }

.coordbtn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}