/* The day page's own sheet. The globe's stylesheet is a viewport — body is one screen
   tall and never scrolls, because the globe is the page — and this is a document that
   runs down a whole day. The tokens and the header are repeated from there rather than
   imported, so that neither page can change the other's layout by accident; the two
   are meant to look like one site, not to be one file. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-var.056e4e2459.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400.c36f509c0a.woff2') format('woff2');
}

:root {
  color-scheme: dark;
  --bg: #04060c;
  --ink: #e8f0fb;
  --dim: #7d8ea6;
  --line: #2a3a55;
  --accent: #5aa9ff;
  --sel: #13233d;
  --dot: #ff9a6a;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --pad: max(16px, env(safe-area-inset-left));
  /* The sky over the hour being read; the script sets it as the reader scrolls. */
  --sky: #04060c;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* The sticky strip and the fixed dock both cover the page's edges; the script measures
   them so a scrolled-to hour and a focused row land in the open, not under either. */
html { scroll-padding-top: calc(var(--strip-h, 70px) + 48px); scroll-padding-bottom: var(--dock-h, 0px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.35 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

#sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .7; pointer-events: none; }
/* The top of the window takes the colour of the hour in view, faintly. */
#horizon {
  position: fixed; inset: 0 0 auto 0; height: 46vh; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, var(--sky) 0%, transparent 100%);
  opacity: .55; transition: background .8s;
}

.label { font: 500 .62rem var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.pill {
  display: inline-flex; align-items: center; gap: .4em; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px; background: #0a1220; color: var(--ink);
  font: 400 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}
.pill:hover { border-color: var(--accent); background: #13233d; }

/* ---- header: the globe page's band, in flow ---- */
header.top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
  padding: max(22px, env(safe-area-inset-top)) var(--pad) 0;
}
#readout { margin: 0; display: grid; gap: 14px; font-family: var(--mono); }
#readout div { display: grid; gap: 3px; }
#readout dt { color: var(--dim); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; }
#readout dd { margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
/* The wordmark, rule for rule as the globe page draws it (styles.css h1 / .orb), so the
   two pages read as one site. */
h1 {
  --track: .34em;
  margin: 0; font-size: clamp(19px, 2.6vw, 26px); font-weight: 300;
  letter-spacing: var(--track); text-indent: var(--track); text-transform: uppercase; white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 14px rgba(0, 0, 0, 0.7);
}
h1 a { text-decoration: none; color: inherit; }
h1 a:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 4px; }
h1 b { font-weight: 600; color: var(--accent); }
@media (max-width: 700px) { h1 { --track: .26em; } }
@media (max-width: 344px) { h1 { font-size: 16px; } }
h1 .orb {
  --cap: .698em;
  display: inline-block; width: var(--cap); height: var(--cap); vertical-align: baseline;
  margin-left: 0; margin-right: var(--track); color: var(--accent);
}
header.top .site-nav { justify-self: end; display: flex; gap: .5rem; }
header.top .site-nav .pill[aria-current] { border-color: var(--accent); color: var(--accent); }
/* The country chooser: the page's country, opening every country shown, each a link to its
   news (countrymenu.js — the globe's Latest panel draws the same). */
header.top .site-nav .country-menu { position: relative; }
header.top .site-nav .country-toggle {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 999px; background: #0a1220; color: var(--ink);
  font: 400 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
header.top .site-nav .country-toggle:hover, header.top .site-nav .country-toggle[aria-expanded="true"] { border-color: var(--accent); background: #13233d; }
header.top .site-nav .country-toggle:focus-visible, header.top .site-nav .country-list a:focus-visible, header.top .site-nav .country-list button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
header.top .site-nav .country-toggle .caret { color: var(--dim); }
header.top .site-nav .country-list {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; min-width: 12rem; max-height: 60vh; overflow-y: auto;
  margin: 0; padding: 4px; list-style: none;
  border: 1px solid var(--line); border-radius: 10px; background: #0a1220; box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}
header.top .site-nav .country-list[hidden] { display: none; }
header.top .site-nav .country-list a, header.top .site-nav .country-list button {
  display: flex; align-items: center; gap: .6em; width: 100%; min-height: 44px; padding: 0 10px;
  border: 0; border-radius: 6px; background: transparent; color: var(--ink); text-align: left; text-decoration: none;
  font: 400 .9rem var(--sans, inherit); cursor: pointer;
}
header.top .site-nav .country-list a:hover, header.top .site-nav .country-list button:hover { background: #13233d; }
header.top .site-nav .country-list [aria-current="true"], header.top .site-nav .country-list [aria-pressed="true"] { color: var(--accent); }
header.top .site-nav .country-list [aria-current="true"]::after, header.top .site-nav .country-list [aria-pressed="true"]::after { content: '✓'; margin-left: auto; }
header.top .site-nav .flag { display: block; width: 22px; height: auto; border-radius: 2px; flex: none; }
/* The site's pages (countrymenu.js `siteNav`): the chooser's disclosure, opening from the left
   where it sits — on a phone a ☰ and a list, wider the row of pills it always was. */
header.top .site-nav .section-menu .country-toggle svg { width: 16px; height: 16px; }
header.top .site-nav .section-list { right: auto; left: 0; }
header.top .site-nav .section-list [aria-current="page"] { color: var(--accent); }
header.top .site-nav .section-list [aria-current="page"]::after { content: '✓'; margin-left: auto; }
@media (min-width: 700px) {
  header.top .site-nav .section-menu .country-toggle { display: none; }
  /* `!important` against the page-wide `[hidden]` rule: the disclosure's wiring keeps the
     list hidden while closed, and wider than a phone the list is the row, open or not. */
  header.top .site-nav .section-list, header.top .site-nav .section-list[hidden] {
    display: flex !important; gap: .5rem; position: static; min-width: 0; max-height: none; overflow: visible;
    padding: 0; border: 0; background: none; box-shadow: none;
  }
  header.top .site-nav .section-list a.pill {
    display: inline-flex; width: auto; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px;
    background: #0a1220; font: 400 11px/1 var(--mono);
  }
  header.top .site-nav .section-list a.pill:hover { border-color: var(--accent); background: #13233d; }
  header.top .site-nav .section-list a.pill[aria-current] { border-color: var(--accent); }
  header.top .site-nav .section-list [aria-current="page"]::after { content: none; }
}
@media (max-width: 699px) {
  header.top { grid-template-columns: 1fr auto; }
  header.top h1 { grid-column: 1 / -1; grid-row: 1; justify-self: center; margin-bottom: .9rem; }
  #readout { grid-auto-flow: column; gap: 1.2rem; }
  /* The nav does not fit beside the readout: it takes its own row under it — ☰, the country
     chooser and the globe, one line on a phone. */
  header.top .site-nav { grid-column: 1 / -1; justify-self: stretch; justify-content: center; flex-wrap: wrap; margin-top: .9rem; }
}
/* The pills need the same rows sooner: four of them with the country chooser squeezed the
   readout and met the wordmark with no gap at 860 and 1024px, and since the newspaper's pill
   the three pages and the globe do too, chooser or not. With the chooser the nav is ~455px and
   the wordmark grows with the window: measured, they touch up to 1250px and stand 27px apart
   at 1300, so the row holds from there. */
@media (min-width: 700px) and (max-width: 1299px) {
  header.top { grid-template-columns: 1fr auto; }
  header.top h1 { grid-column: 1 / -1; grid-row: 1; justify-self: center; margin-bottom: .9rem; }
  header.top #readout { grid-auto-flow: column; gap: 1.2rem; }
  header.top .site-nav { grid-column: 1 / -1; justify-self: stretch; justify-content: center; margin-top: .9rem; }
}

/* ---- the day's heading and the arc ---- */
.day { padding: 1.4rem var(--pad) 0; max-width: 1180px; margin: 0 auto; }
.day .kicker { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: baseline; }
.day h2 { margin: .25rem 0 0; font: 300 clamp(1.4rem, 4.5vw, 2.1rem)/1.15 var(--sans); letter-spacing: -.01em; }
.day h2 b { font-weight: 500; }
.day .under { margin: .35rem 0 0; font: 400 .7rem var(--mono); color: var(--dim); }
#arc { display: block; width: 100%; height: 88px; margin-top: 1rem; overflow: visible; cursor: pointer; }
#arc rect.hour { fill: transparent; }
#arc rect.hour:hover, #arc rect.hour.on { fill: rgba(90, 169, 255, .12); }
#arc .bar { fill: var(--accent); opacity: .85; pointer-events: none; }
#arc .bar.quiet { opacity: .35; }
#arc .sun { fill: #ffd27a; }
#arc .now { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 3; }
#arc .count, #arc .tick { font: 400 9px var(--mono); fill: var(--ink); text-anchor: middle; pointer-events: none; }
#arc .tick { fill: var(--dim); text-anchor: start; letter-spacing: .1em; }
.arc-legend {
  display: flex; justify-content: space-between; margin-top: .3rem;
  font: 400 .62rem var(--mono); color: var(--dim); letter-spacing: .12em; text-transform: uppercase;
}

/* ---- the strip: days, the calendar, search — sticky ----
   The nav is the box that sticks and keeps its unstuck height (the script holds it);
   the band inside is what is drawn, and what a phone shrinks once it is stuck. Below a
   shrunken band the nav is empty and lets touches through. */
.strip { position: sticky; top: 0; z-index: 5; margin-top: 1rem; pointer-events: none; }
.strip .band {
  pointer-events: auto;
  background: linear-gradient(rgba(4, 7, 14, .96), rgba(4, 7, 14, .86));
  backdrop-filter: blur(6px); border-bottom: 1px solid var(--line);
}
.strip .in { max-width: 1180px; margin: 0 auto; padding: .55rem var(--pad); display: flex; gap: .5rem; align-items: center; }
.strip .days-row { min-width: 0; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
.strip .days-row::-webkit-scrollbar { display: none; }
#days { display: flex; gap: .5rem; }
.strip .tools { flex: none; display: flex; gap: .5rem; align-items: center; }
@media (max-width: 700px) {
  .strip .in { flex-wrap: wrap; row-gap: .5rem; }
  .strip .days-row { flex-basis: 100%; }
  .strip .tools { flex: 1 1 100%; min-width: 0; }
  .strip .tools .spacer { display: none; }
  .strip .cal input { width: 7rem; }
  .strip .tools .chip { flex: 0 1 auto; min-width: 0; }
  .strip .chip #filter-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .strip .tools #q { flex: 1 1 5rem; width: auto; min-width: 0; }
}
.strip .chip {
  flex: none; display: inline-flex; align-items: center; gap: .5em; min-height: 2.2rem; padding: 0 .8em;
  border: 1px solid var(--accent); border-radius: 999px; background: var(--sel); color: var(--accent);
  font: 400 .8rem var(--sans);
}
.strip .chip:hover { background: #1a2f52; }
.daybtn {
  flex: none; display: grid; justify-items: center; gap: 1px; min-width: 3.9rem;
  padding: .35rem .55rem .3rem; border: 1px solid var(--line); border-radius: .7rem;
  color: var(--ink); font-family: var(--mono); text-decoration: none; transition: border-color .2s, background .2s;
}
.daybtn .n { font-size: 1.05rem; line-height: 1; }
.daybtn .w { font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.daybtn svg { width: 2.6rem; height: .5rem; }
.daybtn svg rect { fill: var(--dim); opacity: .55; }
.daybtn:hover, .daybtn:focus-visible, .strip .cal:hover, .strip .cal:focus-within { border-color: var(--accent); background: #0d1a2e; outline: none; }
.daybtn[aria-current] { background: var(--sel); border-color: var(--accent); }
.daybtn[aria-current] .w { color: var(--accent); }
.daybtn[aria-current] svg rect { fill: var(--accent); opacity: .9; }
.strip .cal { flex: none; display: grid; justify-items: center; gap: 1px; padding: .35rem .55rem .3rem; border: 1px solid var(--line); border-radius: .7rem; cursor: pointer; transition: border-color .2s, background .2s; }
.strip .cal input { outline: none; }
.strip .cal input { background: transparent; border: 0; color: var(--ink); font: 400 .8rem var(--mono); width: 8.2rem; }
.strip .cal input::-webkit-calendar-picker-indicator { filter: invert(.8); cursor: pointer; }
.strip .spacer { flex: 1; }
.strip #q {
  flex: none; background: transparent; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink); padding: .45em .9em; font: 400 .8rem var(--sans); width: 9.5rem;
}
.strip #q::placeholder { color: var(--dim); }
/* Smaller type on a phone once the strip is stuck to the top and shares the screen with
   the rows and the dock; at the top of the page it is full size. After the rules it
   overrides: same specificity, so the later one wins. The nav keeps its unstuck height
   (the script holds it) so shrinking the band moves nothing below it. */
@media (max-width: 700px) {
  body.docked .strip .in { padding-top: .25rem; padding-bottom: .25rem; row-gap: .25rem; }
  body.docked .daybtn { min-width: 3rem; gap: 0; padding: .15rem .35rem .12rem; border-radius: .5rem; }
  body.docked .daybtn .n { font-size: .78rem; }
  body.docked .daybtn .w { font-size: .42rem; letter-spacing: .1em; }
  body.docked .daybtn svg { width: 1.8rem; height: .3rem; }
  body.docked .strip .cal { gap: 0; padding: .12rem .4rem .1rem; border-radius: .5rem; }
  body.docked .strip .cal .label { font-size: .44rem; }
  body.docked .strip .cal input { font-size: .64rem; width: 5.6rem; }
  body.docked .strip #q { font-size: .64rem; padding: .25em .8em; }
  body.docked .strip .chip { font-size: .64rem; min-height: 1.5rem; }
}

/* ---- body grid ---- */
main {
  max-width: 1180px; margin: 0 auto; padding: 0 var(--pad) 4rem;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem;
}
@media (min-width: 1000px) {
  main { grid-template-columns: minmax(0, 1fr) 300px; }
  aside { position: sticky; top: 84px; align-self: start; }
}
body.docked main { padding-bottom: 7rem; }
#feed .note { font: 400 .8rem var(--mono); color: var(--dim); padding: 2rem 0; }

/* ---- a day's timeline heading: the topic page's, shared */
.timeline-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 2rem; }
.timeline-head h3 { margin: 0; font-size: 1.1rem; font-weight: 400; }
.dayhead { display: flex; gap: .8rem; align-items: baseline; margin: 1.6rem 0 .2rem; font: 400 .62rem var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.dayhead .t { color: var(--ink); font-size: .8rem; letter-spacing: .06em; }
.dayhead .sky { margin-left: auto; color: var(--accent); }

/* ---- the day's topics, above the rows (the topics page's row, without its wave) ---- */
.column { min-width: 0; }
#day-topics:empty, #day-topics.empty { display: none; }
.day-topic.hide { display: none; }
#day-topics { margin-bottom: 1.5rem; }
#day-topics .list-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem 0 .6rem; border-bottom: 1px solid var(--line); }
#day-topics .list-head a { text-decoration: none; }
/* The ways on from the day's topics: wrapping as words, never leaving a separator behind. */
#day-topics .list-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem 1.2rem; }
.day-topics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
@media (max-width: 700px) { .day-topics { grid-template-columns: 1fr; } }
.day-topic { overflow-wrap: anywhere; position: relative; isolation: isolate; cursor: pointer; padding: .9rem .5rem; margin: 0 -.5rem; border-bottom: 1px solid var(--line); transition: background .15s; }
/* The whole card is its headline's link, lit and outlined as a topics-page row is. */
.day-topic:hover, .day-topic:has(:focus-visible) { background: color-mix(in srgb, var(--tint, var(--accent)) 22%, rgba(232, 240, 251, .06)); }
.day-topic h3 a::after { content: ''; position: absolute; inset: 0; }
.day-topic:has(h3 a:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 3px; }
.day-topic h3 a:focus-visible { outline: none; }
.day-topics:not(.narrowed) .day-topic:last-child:nth-child(odd), .day-topic.wide { grid-column: 1 / -1; }
.day-topic h3 { font: 500 1.05rem/1.5 var(--sans); margin: 0 0 .2rem; }
.day-topic h3 a { text-decoration: none; }
/* Positioned for their dots, the points would paint over the card's link; clicks go through. */
.day-topic .points { list-style: none; margin: .4rem 0 0; padding: 0; pointer-events: none; }
.day-topic .points li { font-size: .92rem; line-height: 1.55; padding: .35rem 0 .35rem 1rem; position: relative; }
.day-topic .points li::before { content: ''; position: absolute; left: 0; top: .95rem; width: .35rem; height: .35rem; border-radius: 50%; background: var(--accent); }

/* ---- "you were last here" ---- */
.since {
  display: flex; align-items: center; gap: .8rem; margin: 1.2rem 0 .2rem;
  color: var(--dim); font: 400 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.since::before, .since::after {
  content: ''; flex: 1; height: 1px; opacity: .7;
  background: repeating-linear-gradient(90deg, var(--accent) 0 4px, transparent 4px 9px);
}
.since b { color: var(--accent); font-weight: 400; }

/* ---- hour sections ---- */
section.hour { position: relative; padding-left: 14px; margin-top: .9rem; }
section.hour::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 2px; z-index: 1;
  background: var(--tint, var(--line)); box-shadow: 0 0 14px var(--tint, transparent); opacity: .9;
}
section.hour > h3 {
  position: sticky; top: var(--strip-h, 70px); z-index: 4; margin: 0 0 0 -14px; padding: .55rem .5rem .4rem 14px;
  background: color-mix(in srgb, var(--tint, var(--line)) 32%, rgb(4, 7, 14)); display: flex; align-items: baseline; gap: .8rem;
  /* The gutter bar runs on through the heading, which would otherwise sit over it. */
  box-shadow: inset 4px 0 0 0 var(--tint, var(--line));
}
section.hour > h3 .t { font: 400 1rem var(--mono); letter-spacing: .06em; }
section.hour > h3 .c { font: 400 .62rem var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
section.hour > h3 .sky { font: 400 .62rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--tint, var(--dim)) 55%, var(--ink)); margin-left: auto; }
section.hour.empty { display: none; }
ul.rows { list-style: none; margin: 0; padding: 0; }
ul.rows li {
  display: grid; grid-template-columns: 3.3rem minmax(0, 1fr); column-gap: .6rem;
  margin-left: -14px; padding: .55rem .5rem .55rem 14px; border-top: 1px solid rgba(42, 58, 85, .55);
  transition: background .15s;
}
/* The row being pointed at, or holding focus, takes a wash of its hour's sky — over a
   faint light, so a night hour, whose sky is the page's own black, still shows it. */
ul.rows li:hover, ul.rows li:has(:focus-visible) { background: color-mix(in srgb, var(--tint, var(--accent)) 22%, rgba(232, 240, 251, .06)); }
ul.rows li:first-child { border-top: 0; }
ul.rows li { position: relative; isolation: isolate; cursor: pointer; }
ul.rows a::after { content: ''; position: absolute; inset: 0; }
ul.rows .where, ul.rows .opened { position: relative; z-index: 1; }
/* The count sits above the link overlay so it is not a link's text; it is not a target
   either, so a press on it goes through to the row's link. */
ul.rows .opened { pointer-events: none; }
ul.rows li.since-row { cursor: default; }
ul.rows li.since-row:hover { background: transparent; }
ul.rows li:has(a:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 3px; }
ul.rows a:focus-visible { outline: none; }
ul.rows li.hide { display: none; }
ul.rows time { font: 400 .78rem var(--mono); color: var(--dim); padding-top: .15em; }
ul.rows a { text-decoration: none; font-size: 1rem; line-height: 1.35; }
/* The row lights as a whole (below); its headline and province keep their colours. */
/* The outlet and the province are text in the row's language, so they take the
   headline's face; the mono face is for the clock and the count, which are figures. */
ul.rows .meta { display: flex; flex-wrap: wrap; gap: 0 .5rem; margin-top: .2rem; font: 400 .8rem var(--sans); color: var(--dim); }
ul.rows .where { color: var(--accent); padding: 0; font: inherit; }
ul.rows .where::before { content: '·'; margin-right: .5rem; color: var(--dim); }
ul.rows .where:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
ul.rows .opened { margin-left: auto; opacity: .7; font-family: var(--mono); font-size: .72rem; }
/* The same three breaths the globe's panel takes for a new row — as a wash over the
   row only, no ring: the rows here share their edges, and a ring drawn on one cut the
   gutter bar and the row above it. */
ul.rows li.arrived { animation: arrived 1.2s ease-in-out 3; }
@keyframes arrived {
  from { background: transparent; }
  50% { background: rgba(90, 169, 255, .2); }
  to { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { ul.rows li.arrived { animation: none; box-shadow: inset 2px 0 0 var(--accent); } }

.foot { display: flex; justify-content: space-between; margin-top: 2.5rem; }
.credit {
  margin: 3rem auto 0; max-width: 1180px; padding: 0 var(--pad);
  font: 400 .66rem var(--mono); color: var(--dim); letter-spacing: .06em; text-align: center;
}

/* ---- the side panel ---- */
aside .box { border: 1px solid var(--line); border-radius: .9rem; padding: .9rem 1rem; margin-top: 1.2rem; background: rgba(4, 7, 14, .5); }
aside .box h4 { margin: 0 0 .6rem; font: 500 .62rem var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
aside .kv { display: grid; grid-template-columns: 1fr auto; gap: .3rem .8rem; font-size: .86rem; }
aside .kv .v { font: 400 .8rem var(--mono); color: var(--dim); }
aside .bars button {
  display: grid; grid-template-columns: 7.5rem 1fr 2.4rem; gap: .5rem; align-items: center;
  width: 100%; padding: .15rem .4rem; margin: .1rem -.4rem; border-radius: .4rem; text-align: left; font-size: .84rem;
  transition: background .15s;
}
aside .bars button:hover { background: var(--sel); }
aside .bars button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
aside .bars button:hover, aside .bars button:focus-visible, aside .bars button[aria-pressed='true'] { color: var(--accent); }
aside .bars button[aria-pressed='true'] { background: var(--sel); }
aside .bars i { display: block; height: 6px; border-radius: 3px; background: var(--accent); opacity: .8; }
aside .bars .v { font: 400 .74rem var(--mono); color: var(--dim); text-align: right; }
aside .bars .unplaced i { background: var(--line); }
aside .bars .unplaced { cursor: default; }
/* The desk boxes repeat the country box's figures; phones hide the desk boxes instead. */
@media (min-width: 1000px) {
  aside .box.country .kv { display: none; }
}
@media (max-width: 999px) {
  aside { order: -1; }
  aside .box.desk { display: none; }
  aside .box.country { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; align-items: center; }
  /* Beside a 9rem map the two halves of the caption cannot share a line: one each. */
  .map .cap { flex-direction: column; gap: .15rem; }
  .map svg { max-height: 190px; }
  /* Beside the figures a wide country would be a strip; it takes the row, figures below. */
  aside .box.country.wide { grid-template-columns: 1fr; }
}

/* ---- the country: province outlines with a dot per province heard from ---- */
.map svg { display: block; width: 100%; height: auto; max-height: 300px; overflow: visible; }
.map .province { fill: #0b1526; stroke: #2a3a55; stroke-width: 1; vector-effect: non-scaling-stroke; }
.map .point-core { fill: #29445f; stroke: #6d8bad; stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: fill .3s, r .3s; }
/* The halo is drawn over the r=16 hit circle and is wider; taking taps, even unseen, it handed a
   dot's click to its neighbour (Selangor's to Putrajaya, Bangkok's to Nakhon Nayok). */
.map .point-halo { stroke: var(--accent); stroke-width: 1.2; vector-effect: non-scaling-stroke; fill: rgba(90, 169, 255, .07); opacity: 0; transition: opacity .3s; pointer-events: none; }
.map .geo-point { cursor: pointer; }
.map .geo-point.active .point-core { fill: #a7d1ff; stroke: #c5e1ff; }
.map .geo-point.active .point-halo { opacity: 1; }
.map .geo-point.focused .point-core, .map .geo-point:hover .point-core { fill: #fff; stroke: #fff; }
.map .geo-point.focused .point-halo { opacity: 1; stroke: #fff; }
.map .map-label { fill: #cbe3ff; font: 22px var(--sans); paint-order: stroke; stroke: var(--bg); stroke-width: 6px; pointer-events: none; }
.map .map-water { font: italic 15px var(--sans); letter-spacing: .14em; fill: #344963; pointer-events: none; }
.map .cap { display: flex; justify-content: space-between; margin-top: .4rem; font: 400 .62rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #6f86a5; }
.map .cap b { color: #bbd6f5; font-weight: 400; }

/* ---- the dock: the arc, folded, once the top one has scrolled away ---- */
#dock {
  position: fixed; z-index: 40; bottom: 0; left: 0; right: 0;
  background: rgba(10, 17, 30, .94); backdrop-filter: blur(18px); border-top: 1px solid #3a557a;
  padding: 10px 0 max(8px, env(safe-area-inset-bottom)); box-shadow: 0 -14px 40px rgba(4, 6, 12, .5);
  transform: translateY(110%); transition: transform .35s ease;
}
#dock.show { transform: none; }
#dock .in { max-width: 1180px; margin: 0 auto; padding: 0 var(--pad); }
#dock .t { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
#dock .t .label span { color: #677e9d; }
#dock .t output { font: 400 .75rem var(--mono); color: #bddbff; white-space: nowrap; }
#dock .t .right { display: flex; align-items: baseline; gap: .8rem; }
#to-top { font: 500 .62rem var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); padding: .2em .6em; border: 1px solid var(--line); border-radius: 999px; }
#to-top:hover, #to-top:focus-visible { border-color: var(--accent); background: var(--sel); outline: none; }
#dock .track { position: relative; height: 38px; }
#dock svg { width: 100%; height: 38px; display: block; }
#dock .bar { fill: #41658e; transition: fill .16s; }
#dock .bar.past { fill: #5a8dc4; }
#dock .bar.sel { fill: #bddfff; }
#dock .base { fill: #293950; }
#dock .na { fill: url(#hatch); }
#dock .band { opacity: .85; }
#dock .head { position: absolute; top: 0; bottom: -3px; width: 1px; background: #c2ddff; pointer-events: none; box-shadow: 0 0 9px rgba(90, 169, 255, .4); }
#dock .head::before { content: ''; position: absolute; width: 5px; height: 5px; left: -2px; top: -3px; border-radius: 50%; background: #d7e9ff; }
#dock input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; appearance: none; -webkit-appearance: none; cursor: ew-resize; background: transparent; }
#dock input[type=range]::-webkit-slider-runnable-track { height: 38px; background: transparent; }
#dock input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 38px; background: transparent; border: 0; }
#dock input[type=range]::-moz-range-track { height: 38px; background: transparent; }
#dock input[type=range]::-moz-range-thumb { width: 20px; height: 38px; background: transparent; border: 0; }
#dock .ticks { display: flex; justify-content: space-between; color: #7890af; font: 400 9px var(--mono); margin-top: 5px; }
@media (max-width: 699px) {
  #dock { padding-top: 6px; }
  #dock .t { margin-bottom: 3px; }
  #dock .t .label span { display: none; }
  #dock .t .label { font-size: .52rem; }
  #dock .t output { font-size: .58rem; }
  #to-top { font-size: .52rem; padding: 0 .55em; min-height: 22px; }
  #dock .track, #dock svg, #dock input[type=range]::-webkit-slider-runnable-track, #dock input[type=range]::-webkit-slider-thumb, #dock input[type=range]::-moz-range-track, #dock input[type=range]::-moz-range-thumb { height: 32px; }
  #dock .ticks { font-size: 8px; margin-top: 2px; }
}