/* Forecast Arctic — the Forecast Network design system, north-polar cut
 *
 * Sibling to the southern polar site, Forecast Eagle, Forecast Canada and
 * weather.city, and readable as one network: Overpass / Overpass Mono, the
 * guide-sign panel, the chips, the card grid, the rule headings, the timeline,
 * and model imagery in a dark figure inset. EB Garamond Italic is the atlas
 * voice, as it is on every Forecast Network map.
 *
 * What changes is the light.
 *   - The panel is arctic night, the blue of the sky over the ice in December.
 *     The accent that Forecast Canada spends in Trans-Canada green and Forecast
 *     the southern site in expedition orange is spent here in aurora green — the one
 *     colour everybody who has wintered up here remembers.
 *   - There is no route shield. Its slot carries a chip naming the model grid
 *     (ECMWF · 0.1° · 1 H, CAPS · 3 KM), and the mark is a polar bear.
 *   - Exit chips are WAYPOINTS. Distances are km. Wind defaults to km/h.
 *   - The paper is cold: sea ice under an overcast, not newsprint.
 */

:root {
  --paper: #e6eaec;
  --paper2: #d8dfe2;
  --card: #ffffff;
  --ink: #0f1a20;
  --ink2: #3a4852;
  --mut: #74848e;
  --line: #c1cbd0;
  --line2: #e0e6e9;

  /* Arctic night — the panel and the site's primary note. */
  --sign: #0c3550;
  --sign-dk: #07223a;
  --sign-tx: #ffffff;
  --sign-sub: #cde3ef;

  /* Aurora green — every working accent. */
  --accent: #138a5e;
  --accent-dk: #0c6a47;
  --accent-sub: #bdf3d8;
  --aurora: #3fd18f;

  --ice: #9fd6e8;
  --sea: #1b5f8c;
  --gold: #f4c430;

  --figure: #061521;
  --figure-line: #1b3547;
  --figure-tx: #e1edf2;
  --figure-mut: #8aa5b5;

  --shadow: 0 6px 22px rgba(10, 30, 50, .09);
  --shadow-hi: 0 10px 26px rgba(10, 30, 50, .15);

  --font: 'Overpass', Helvetica, Arial, sans-serif;
  --mono-font: 'Overpass Mono', ui-monospace, monospace;
  --atlas-font: 'EB Garamond', Garamond, Georgia, serif;
  --maxw: 1100px;

  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper); color: var(--ink); font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }
code { font-family: var(--mono-font); font-size: .92em; background: var(--line2); padding: 1px 4px; border-radius: 3px; }

.mono { font-family: var(--mono-font); font-variant-numeric: tabular-nums; }
.atlas { font-family: var(--atlas-font); font-style: italic; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }
.wrap-wide { max-width: 1560px; margin: 0 auto; padding: 0 18px; }
[hidden] { display: none !important; }
.dim { color: var(--ink2); }
.faint { color: var(--mut); }
.prose p { font-size: 14.5px; font-weight: 600; line-height: 1.6; color: var(--ink2); margin: 0 0 12px; }
.prose p:last-child { margin-bottom: 0; }
.prose a, a.inl { color: var(--sea); font-weight: 800; }

/* ── utility bar ─────────────────────────────────────────── */
.util {
  background: #081a26; color: #c6d3da; border-bottom: 3px solid var(--accent);
  position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 8px rgba(0, 0, 0, .25);
}
.util .bar {
  max-width: 1560px; margin: 0 auto; padding: 0 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 34px; flex-wrap: wrap;
}
.util .brand { display: flex; align-items: center; gap: 8px; }
.util .brand img { width: 20px; height: 20px; display: block; }
.util .mono { font-size: 11px; letter-spacing: .06em; }
.util .lnks { display: flex; gap: 15px; flex-wrap: wrap; }
.util a { color: #e8edf1; font-weight: 700; font-size: 11px; letter-spacing: .06em; }
.util a:hover, .util a[aria-current="page"] { color: var(--accent-sub); text-decoration: none; }
.util a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--aurora); }
@media (max-width: 720px) { .util .mono .long { display: none; } }
@media (max-width: 560px) {
  .util .lnks { gap: 11px; }
  .util a.n-hemisphere, .util a.n-home { display: none; }
}

/* ── station strip — the second tier, as Canada's province strip ── */
.stnbar { background: var(--sign-dk); color: var(--sign-sub); border-bottom: 1px solid rgba(0, 0, 0, .25); }
.stnbar .bar {
  max-width: 1560px; margin: 0 auto; padding: 5px 18px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.stnbar .lbl { font: 700 9px var(--mono-font); letter-spacing: .14em; color: rgba(255, 255, 255, .55); white-space: nowrap; }
.stnbar .lnks { display: flex; gap: 3px; flex-wrap: wrap; }
.stnbar a { font: 800 11px var(--font); color: #fff; padding: 2px 7px; border-radius: 3px; white-space: nowrap; }
.stnbar a:hover { background: rgba(255, 255, 255, .18); text-decoration: none; }
.stnbar a[aria-current="page"] { background: #fff; color: var(--sign-dk); }

/* ── guide-sign panel ───────────────────────────────────── */
.sign {
  background: var(--sign); border-radius: 10px; color: var(--sign-tx);
  padding: 26px 24px 24px; position: relative; overflow: hidden;
  box-shadow: inset 0 0 0 4px var(--sign), inset 0 0 0 6px rgba(255, 255, 255, .9), var(--shadow-hi);
}
/* an aurora across the panel — the only ornament on the site */
.sign::before {
  content: ""; position: absolute; inset: 6px; border-radius: 6px; pointer-events: none;
  background:
    radial-gradient(60% 45% at 78% -8%, rgba(63, 209, 143, .30), transparent 70%),
    radial-gradient(40% 35% at 96% 10%, rgba(120, 160, 255, .16), transparent 70%),
    radial-gradient(90% 40% at 30% -20%, rgba(63, 209, 143, .12), transparent 70%),
    radial-gradient(80% 50% at 10% 120%, rgba(159, 214, 232, .10), transparent 60%);
}
.sign > * { position: relative; }
.sign a { color: #fff; }
.signhead { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.signhead .mark {
  width: 74px; height: 74px; flex: none; display: grid; place-items: center;
  background: var(--sign-dk); border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 0 0 6px rgba(63, 209, 143, .35), 0 4px 14px rgba(0, 0, 0, .25);
}
.signhead .mark img { width: 62px; height: 62px; display: block; }
.word { font-weight: 900; font-size: clamp(28px, 5.4vw, 52px); line-height: .92; letter-spacing: -.02em; margin: 0; }
.word .yl { color: var(--ice); }
.tag { margin: 8px 0 0; font-weight: 700; font-size: clamp(13px, 2.2vw, 16px); color: var(--sign-sub); letter-spacing: .01em; }

/* Station-flag chip: where a route shield would be, the grid you are reading. */
.flag {
  background: #fff; color: var(--sign-dk); border-radius: 3px; flex: none;
  padding: 0 0 6px; text-align: center; line-height: 1; min-width: 86px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .2); overflow: hidden;
}
.flag .a { display: block; background: var(--accent); color: #fff; font-size: 8.5px; font-weight: 800; letter-spacing: .18em; padding: 4px 8px 3px; }
.flag .b { display: block; font-size: 22px; font-weight: 900; letter-spacing: .02em; padding: 5px 10px 1px; }
.flag .c { display: block; font: 700 8.5px var(--mono-font); letter-spacing: .12em; color: var(--ink2); }

.exits { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; align-items: center; }
.exits .lbl { font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--sign-sub); }
.mm {
  background: rgba(255, 255, 255, .1); border: 1.5px solid rgba(255, 255, 255, .6);
  border-radius: 5px; padding: 6px 12px; font-family: inherit; font-weight: 700;
  font-size: 12px; letter-spacing: .03em; cursor: pointer; color: #fff;
}
.mm b { color: var(--accent-sub); font-weight: 900; margin-right: 3px; }
.mm:hover { background: #fff; color: var(--sign); text-decoration: none; }
.mm:hover b { color: var(--accent); }

/* ── section rule ───────────────────────────────────────── */
section { padding: 26px 0 4px; }
.rule { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.rule .ln { height: 3px; flex: 1; background: repeating-linear-gradient(90deg, var(--accent) 0 18px, transparent 18px 34px); }
.rule h2 { margin: 0; color: var(--accent-dk); font-size: 15px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; white-space: nowrap; }
.rule .sub { color: var(--mut); font-size: 11px; font-weight: 700; letter-spacing: .06em; }
@media (max-width: 560px) { .rule { flex-wrap: wrap; } .rule .ln { min-width: 40px; } }

/* ── cards and panels ───────────────────────────────────── */
.card-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; display: block; color: inherit; box-shadow: var(--shadow);
  transition: transform .14s, box-shadow .14s;
}
a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hi); text-decoration: none; }
.card .chead {
  background: var(--sign); color: #fff; padding: 9px 14px; font-weight: 900; letter-spacing: .04em;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.card .chead.or { background: var(--accent); }
.card .chead.sea { background: var(--sea); }
.card .chead.ink { background: #26323e; }
.card .chead .k { font: 700 10px var(--mono-font); letter-spacing: .1em; color: var(--sign-sub); }
.card .chead.or .k { color: var(--accent-sub); }
.card .cbody { padding: 14px; }
.card h3 { margin: 0 0 5px; font-size: 17px; font-weight: 900; letter-spacing: -.01em; }
.card p { margin: 0; color: var(--ink2); font-size: 13.5px; font-weight: 600; line-height: 1.5; }
.card .thumb { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--figure); }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 16px; box-shadow: var(--shadow); }

/* ── controls ───────────────────────────────────────────── */
.btn {
  cursor: pointer; border: 1px solid var(--line); background: var(--card); color: var(--ink2);
  border-radius: 3px; font-family: var(--font); font-weight: 700; font-size: 11.5px;
  letter-spacing: .02em; padding: 7px 12px; line-height: 1.3;
}
.btn:hover { border-color: var(--accent); color: var(--ink); }
.btn.on, .btn[aria-pressed="true"] { background: var(--sign); color: #fff; border-color: var(--sign-dk); }
.btn:disabled { opacity: .45; cursor: default; }
select, input[type="text"], input[type="search"] {
  background: var(--card); border: 1px solid var(--line); color: var(--ink);
  border-radius: 3px; padding: 6px 9px; font-family: var(--font); font-weight: 700; font-size: 12px;
}
select:focus, input:focus, .btn:focus-visible, .seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
label, .lab { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
input[type="range"] { accent-color: var(--accent); }

.seg { display: inline-flex; flex-wrap: nowrap; }
.seg button { font: 700 11px var(--mono-font); background: var(--card); color: var(--ink2); border: 1px solid var(--line); border-left-width: 0; padding: 5px 8px; cursor: pointer; }
.seg button:first-child { border-left-width: 1px; border-radius: 4px 0 0 4px; }
.seg button:last-child { border-radius: 0 4px 4px 0; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.seg.primary button.on { background: var(--sign); border-color: var(--sign-dk); }

.badge { display: inline-block; padding: 3px 9px; border-radius: 3px; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.badge-live { background: var(--accent); color: #fff; }
.badge-ice { background: var(--sign); color: #fff; }
.badge-soon { background: var(--line2); color: var(--mut); border: 1px solid var(--line); }
.badge-live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #fff; margin-right: 5px; vertical-align: 1px; animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .25; } }

/* ── hero plate (front page) ────────────────────────────── */
.herostage {
  position: relative; background: var(--figure); border-radius: 10px; overflow: hidden;
  border: 1px solid var(--figure-line); box-shadow: var(--shadow-hi);
}
.herostage svg { display: block; width: 100%; height: auto; }
.herostage .stn { cursor: pointer; }
.herostage .stn circle.dot { fill: var(--accent); stroke: #fff; stroke-width: 1.6; }
.herostage .stn.town circle.dot { fill: var(--ink); stroke: #fff; }
.herostage .stn.research circle.dot { fill: var(--accent); stroke: #fff; }
.herostage .stn.pole circle.dot { fill: var(--gold); stroke: #fff; }
.herostage .stn:hover circle.dot, .herostage .stn:focus circle.dot { r: 7; }
.herostage .stn text { font: 800 12px var(--font); fill: #0b161d; paint-order: stroke; stroke: rgba(255, 255, 255, .85); stroke-width: 3.2px; stroke-linejoin: round; }
.herostage .stn text.val { font: 800 11.5px var(--mono-font); fill: var(--accent-dk); }
.herostage .feat { font: italic 500 15px var(--atlas-font); fill: #2c4d63; letter-spacing: .08em; paint-order: stroke; stroke: rgba(255,255,255,.55); stroke-width: 2.4px; }
.herostage .feat.sea { fill: #e8f3fb; stroke: rgba(10,40,70,.35); font-size: 17px; letter-spacing: .22em; }
.herohint {
  position: absolute; left: 12px; bottom: 12px; pointer-events: none; max-width: 300px;
  background: rgba(6, 21, 33, .88); color: var(--figure-tx); border: 1px solid var(--figure-line);
  border-radius: 6px; padding: 8px 11px; font-size: 12px; font-weight: 700; line-height: 1.4;
  opacity: 0; transition: opacity .15s;
}
.herohint.on { opacity: 1; }
.herohint b { font-size: 14px; color: #fff; }
.herohint .v { font-family: var(--mono-font); color: var(--accent-sub); }
.herometa { position: absolute; right: 12px; top: 12px; }
.legendrow { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--ink2); align-items: center; }
.legendrow .sw { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: -1px; margin-right: 5px; border: 1.6px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.unitrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── the signpost ───────────────────────────────────────────
   Longyearbyen's signpost, and the striped pole every North Pole expedition
   plants for its photograph, point at home towns with the distance painted on.
   The Arctic Ocean has no roads, so this is the site's route sign. */
.signpost { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.post { position: relative; padding: 14px 0 10px 26px; }
.post::before { content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: 8px; border-radius: 2px;
  background: repeating-linear-gradient(180deg, #c9302c 0 16px, #f2f2f2 16px 32px); box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.post .top { position: relative; margin: 0 0 10px 6px; font: 900 13px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.arrow {
  position: relative; display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  margin: 0 0 7px; padding: 6px 22px 6px 12px; color: #fff; font-weight: 900; font-size: 13px;
  background: var(--sign); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  box-shadow: 0 2px 0 rgba(0,0,0,.15); max-width: 360px;
}
.arrow.l { padding: 6px 12px 6px 22px; clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); margin-left: -8px; }
.arrow.or { background: var(--accent); }
.arrow.wd { background: #7a5a2d; }
.arrow .km { font: 800 12px var(--mono-font); color: var(--sign-sub); white-space: nowrap; }
.arrow.or .km { color: #e4fff1; }
.arrow.wd .km { color: #f3e3c6; }

/* ── explorer ───────────────────────────────────────────── */
.explorer { max-width: 1560px; margin: 0 auto; padding: 14px 18px 28px; }
.titlebar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; }
.titlebar h1 { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -.01em; }
.titlebar .init { font: 700 11px var(--mono-font); color: var(--mut); letter-spacing: .04em; }
.domtabs { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.dom-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 12px; line-height: 1.15; }
.dom-btn .n { font-size: 13px; font-weight: 900; letter-spacing: -.01em; }
.dom-btn .r { font: 700 9.5px var(--mono-font); color: var(--mut); letter-spacing: .06em; }
.dom-btn.on .r { color: var(--sign-sub); }
.dom-btn.stale { opacity: .45; }
.toolbar {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 11px 13px; margin-bottom: 12px; box-shadow: var(--shadow);
}
.toolbar .group { display: flex; flex-direction: column; gap: 5px; }
.toolbar .group > div { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.fields { display: flex; gap: 4px; flex-wrap: wrap; }
.fields .btn { padding: 6px 10px; }
.switch { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink2); cursor: pointer; }
.switch input { accent-color: var(--accent); }

.stage-wrap { position: relative; border: 1px solid var(--figure-line); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); background: var(--figure); }
.stage { position: relative; width: 100%; height: min(76vh, 900px); min-height: 420px; background: var(--figure); }
@media (max-width: 640px) { .stage { height: 68vh; min-height: 360px; } }
.stage-overlay {
  position: absolute; z-index: 5; pointer-events: none;
  background: rgba(6, 21, 33, .86); border: 1px solid var(--figure-line);
  border-radius: 5px; padding: 7px 11px; color: var(--figure-tx);
}
.ov-valid { left: 10px; top: 10px; }
.ov-valid .big { font: 900 17px var(--font); letter-spacing: -.01em; color: #fff; }
.ov-valid .sm { font: 700 10.5px var(--mono-font); color: var(--figure-mut); letter-spacing: .03em; margin-top: 2px; }
.ov-valid .fh { color: var(--accent-sub); }
.ov-probe { right: 10px; top: 10px; text-align: right; min-width: 140px; }
.ov-probe .v { font: 900 16px var(--font); color: #fff; }
.ov-probe .xy { font: 700 10px var(--mono-font); color: var(--figure-mut); }
.ov-legend { left: 10px; bottom: 30px; right: auto; padding: 8px 11px 6px; min-width: 260px; max-width: min(460px, calc(100% - 20px)); }
.ov-legend .t { display: flex; justify-content: space-between; gap: 10px; font: 800 11px var(--font); letter-spacing: .04em; margin-bottom: 5px; }
.ov-legend .t .u { font-family: var(--mono-font); color: var(--accent-sub); }
.ov-legend canvas { display: block; width: 100%; height: 12px; border-radius: 2px; }
.ov-legend .ticks { position: relative; height: 13px; margin-top: 2px; font: 700 9.5px var(--mono-font); color: var(--figure-mut); }
.ov-legend .ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.ov-loading { left: 50%; top: 50%; transform: translate(-50%, -50%); font: 800 12px var(--mono-font); letter-spacing: .08em; }
.windcanvas { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

/* OpenLayers chrome, in the network's clothes */
.ol-control button { background: rgba(6, 21, 33, .82); color: #fff; font-family: var(--font); border-radius: 3px; }
.ol-control button:hover, .ol-control button:focus { background: var(--accent); outline: none; }
.ol-control { background: transparent; }
.ol-zoom { top: auto; bottom: 36px; left: auto; right: 10px; }
.ol-full-screen { top: auto; bottom: 94px; right: 10px; }
.ol-scale-line { background: rgba(6, 21, 33, .78); left: auto; right: 10px; bottom: 8px; border-radius: 3px; }
.ol-scale-line-inner { border-color: #e3ecf3; color: #e3ecf3; font: 700 10px var(--font); }
.ol-attribution { right: auto; left: 10px; bottom: 6px; max-width: calc(100% - 160px); }
.ol-attribution.ol-uncollapsible { background: rgba(6, 21, 33, .7); border-radius: 3px; }
.ol-attribution ul { color: #b6c6d3; font: 600 9.5px var(--font); text-shadow: none; }
.ol-attribution a { color: #fff; }
.ol-attribution li:not(:last-child)::after { content: " · "; }
.stage .ov-legend ~ .ol-viewport .ol-attribution { display: none; }

/* timeline */
.timeline {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  margin-top: 12px; background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 14px 9px; box-shadow: var(--shadow);
}
.tl-side { display: flex; flex-direction: column; gap: 5px; }
.tl-lab { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.tl-transport { display: flex; align-items: center; gap: 5px; }
.tl-transport .btn { min-width: 36px; font-size: 13px; padding: 5px 8px; }
.tl-track { flex: 1 1 340px; min-width: 240px; display: flex; flex-direction: column; }
.tl-track input[type="range"] { width: 100%; margin: 0; }
.tl-ticks { position: relative; height: 23px; margin: 3px 9px 0; pointer-events: none; }
.tl-ticks .tk { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.tl-ticks .tk i { width: 1px; height: 5px; background: var(--line); display: block; }
.tl-ticks .tk span { font: 700 8.5px var(--mono-font); color: var(--mut); white-space: nowrap; line-height: 1; margin-top: 3px; }
.tl-ticks .tk.day i { height: 9px; width: 2px; background: var(--accent); }
.tl-ticks .tk.day span { color: var(--ink2); font-weight: 800; }
.tl-buffer { height: 2px; margin: 2px 9px 0; border-radius: 2px; background: var(--line2); overflow: hidden; transition: opacity .4s ease .3s; }
.tl-buffer::before { content: ""; display: block; height: 100%; width: var(--pct, 0%); background: var(--accent); transition: width .15s linear; }
.tl-buffer.full { opacity: 0; }
.tl-count { font: 900 13px var(--mono-font); color: var(--ink); }
.tl-hint { margin-top: 7px; font-size: 11px; font-weight: 700; color: var(--mut); }

/* ── explorer: the deck, the map options drawer ──────────────
   Forecast Eagle's arrangement: on a wide screen the drawer is a column beside
   the map (MAP OPTIONS folds it away); below 1180 px it floats over the page as
   a sheet, and on a phone it docks to the bottom edge. */
.cycle-nav { display: flex; gap: 4px; align-items: center; }
.cycle-nav select { max-width: 190px; }
.cycle-nav .btn { padding: 5px 8px; }
.deck { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
.deck.closed { grid-template-columns: minmax(0, 1fr); }
.deck.closed .drawer { display: none; }
.deck-main { min-width: 0; }
.stage-box { margin: 0 auto; }
.drawer {
  background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--accent);
  border-radius: 8px; box-shadow: var(--shadow); padding: 2px 13px 12px;
  position: sticky; top: 44px; max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); overflow: auto;
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 0 7px; border-bottom: 1px solid var(--line2); }
.drawer-head span { font-size: 10.5px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-dk); }
.drawer .group { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line2); }
.drawer .group:last-child { border-bottom: 0; }
.drawer .group > div { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.drawer select { font-size: 11px; padding: 5px 7px; max-width: 100%; }
.drawer .btn { font-size: 11px; padding: 5px 9px; }
.drawer .opts { display: grid !important; grid-template-columns: 1fr 1fr; }
.drawer .opts[hidden] { display: none !important; }
.drawer .note { font-size: 10.5px; font-weight: 700; color: var(--mut); line-height: 1.4; }
.drawer .note b { color: var(--ink2); }
.drawer .note .nw { white-space: nowrap; }
.drawer .note.err { color: var(--accent-dk); }
.overlay-box { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.overlay-box .lab { width: 100%; font-size: 9px; }
.small { font-size: 10.5px; color: var(--mut); }
.drawer-backdrop { display: none; }
@media (max-width: 1180px) {
  .deck, .deck.closed { display: block; }
  .drawer, .deck.closed .drawer {
    display: none; position: fixed; z-index: 121; top: auto; right: 12px; bottom: 12px;
    width: min(420px, calc(100vw - 24px)); max-height: 72vh; max-height: 72dvh;
    box-shadow: 0 -10px 44px rgba(0, 0, 0, .35);
  }
  .drawer.open, .deck.closed .drawer.open { display: block; }
  .drawer-backdrop.on { display: block; position: fixed; inset: 0; z-index: 120; background: rgba(6, 21, 33, .45); }
}
@media (max-width: 700px) {
  .drawer, .deck.closed .drawer {
    left: 0; right: 0; bottom: 0; width: auto; border-radius: 12px 12px 0 0;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .toolbar { gap: 10px; padding: 9px 10px; }
  .fields { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: calc(100vw - 44px); padding-bottom: 2px; }
  .fields::-webkit-scrollbar { display: none; }
  .fields .btn { white-space: nowrap; }
  .domtabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .dom-btn { flex: none; }
  .tl-hint { display: none; }
}

/* swipe divider */
.swipe { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.swipe-line { position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(6, 21, 33, .5); }
.swipe-handle {
  position: absolute; top: 50%; left: var(--x, 50%); transform: translate(-50%, -50%); pointer-events: auto;
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; background: var(--accent); color: #fff;
  font: 900 15px var(--font); cursor: ew-resize; box-shadow: 0 2px 10px rgba(0, 0, 0, .4); touch-action: none;
}
.swipe-tag { position: absolute; top: 88px; font: 800 10px var(--mono-font); letter-spacing: .06em; color: #fff; background: rgba(6, 21, 33, .82); padding: 3px 7px; border-radius: 3px; white-space: nowrap; }
.swipe-tag.l { right: calc(100% - var(--x, 50%) + 10px); }
.swipe-tag.r { left: calc(var(--x, 50%) + 10px); }
.ov-coords { left: 50%; transform: translateX(-50%); bottom: 8px; padding: 3px 9px; font-size: 10px; color: var(--figure-mut); white-space: nowrap; }
@media (max-width: 700px) { .ov-coords { display: none; } }
.tl-frames { font-size: 10.5px; font-weight: 700; color: var(--mut); }

/* point panel: a time series wherever you click */
.point-panel {
  margin-top: 12px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 8px; padding: 12px 14px; box-shadow: var(--shadow);
}
.pp-head { display: flex; align-items: flex-end; gap: 12px 22px; flex-wrap: wrap; margin-bottom: 6px; }
.pp-title { display: flex; flex-direction: column; gap: 2px; min-width: 190px; }
.pp-place { font-size: 17px; font-weight: 900; letter-spacing: -.01em; }
.pp-what { font-size: 10.5px; font-weight: 700; color: var(--mut); letter-spacing: .06em; text-transform: uppercase; }
.pp-v { font: 900 26px var(--mono-font); color: var(--sign); line-height: 1; letter-spacing: -.02em; }
:root[data-theme="dark"] .pp-v { color: var(--ice); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pp-v { color: var(--ice); } }
.pp-t { font: 700 10.5px var(--mono-font); color: var(--mut); margin-top: 3px; }
.pp-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pp-tools a.btn { text-decoration: none; }
.pp-chart { width: 100%; height: 150px; display: block; cursor: pointer; }
.pp-chart .ax { stroke: var(--line); stroke-width: 1; }
.pp-chart .grid { stroke: var(--line2); stroke-width: 1; }
.pp-chart .ln { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; }
.pp-chart .area { fill: var(--accent); opacity: .1; }
.pp-chart .cur { stroke: var(--sign); stroke-width: 1.5; stroke-dasharray: 3 3; }
.pp-chart .dot { fill: var(--sign); stroke: #fff; stroke-width: 1.5; }
.pp-chart text { font: 700 9.5px var(--mono-font); fill: var(--mut); }
.pp-chart .zero { stroke: var(--ink2); stroke-width: 1; stroke-dasharray: 2 3; }

/* facts: a mileage-marker strip */
.facts { display: flex; flex-wrap: wrap; margin-top: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); }
.fact { padding: 10px 20px; border-left: 1px solid var(--line2); flex: 1 1 150px; }
.fact:first-child { border-left: 0; }
.fact .k { font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--mut); }
.fact .v { font-size: 15px; font-weight: 900; margin-top: 3px; white-space: nowrap; }

/* ── atlas (full window) ────────────────────────────────── */
body.atlas-page { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.atlas-main { position: relative; flex: 1; min-height: 0; background: var(--figure); }
.atlas-main .map { position: absolute; inset: 0; }
.apanel {
  position: absolute; z-index: 10; top: 12px; left: 12px; width: 290px; max-height: calc(100% - 70px);
  overflow: auto; background: rgba(255, 255, 255, .96); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: var(--shadow-hi); padding: 12px 13px;
}
.apanel h1 { margin: 0; font-size: 19px; font-weight: 900; letter-spacing: -.01em; display: flex; gap: 8px; align-items: center; }
.apanel h1 img { width: 28px; height: 28px; }
.apanel .sub { font: italic 500 14px var(--atlas-font); color: var(--ink2); margin: 2px 0 10px; }
.apanel h3 { margin: 12px 0 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-dk); border-top: 1px solid var(--line2); padding-top: 10px; }
.apanel .row { display: flex; flex-wrap: wrap; gap: 3px 12px; }
.apanel .collapse { display: none; }
@media (max-width: 640px) {
  .apanel { width: auto; right: 12px; max-height: 50%; }
  .apanel.shut > :not(.phead) { display: none; }
  .apanel .collapse { display: inline-block; margin-left: auto; }
}
.phead { display: flex; align-items: center; gap: 8px; }
.search { position: relative; }
.search input { width: 100%; }
.search ul { list-style: none; margin: 2px 0 0; padding: 0; position: absolute; left: 0; right: 0; z-index: 3; background: var(--card); border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--shadow-hi); max-height: 260px; overflow: auto; }
.search li { padding: 6px 9px; font-size: 12.5px; font-weight: 700; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
.search li .k { font: 700 9.5px var(--mono-font); color: var(--mut); text-transform: uppercase; }
.search li.on, .search li:hover { background: var(--line2); }
.readout { position: absolute; z-index: 9; right: 12px; top: 12px; }
.readout .ll { font: 800 13px var(--mono-font); color: #fff; }
.readout .xy { font: 700 10px var(--mono-font); color: var(--figure-mut); }
.readout .el { font: 700 10.5px var(--mono-font); color: var(--accent-sub); }
.popup {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-hi);
  min-width: 220px; max-width: 280px; overflow: hidden; transform: translate(-50%, calc(-100% - 14px)); position: relative;
}
.popup::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; background: var(--card); transform: translateX(-50%) rotate(45deg); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.popup .chead { background: var(--sign); color: #fff; padding: 7px 11px; font-weight: 900; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.popup .chead .x { background: none; border: 0; color: #fff; cursor: pointer; font-size: 16px; line-height: 1; padding: 0; }
.popup .pb { padding: 9px 11px 11px; font-size: 12.5px; font-weight: 600; color: var(--ink2); line-height: 1.45; }
.popup .pb .now { font: 800 13px var(--mono-font); color: var(--ink); margin: 5px 0; }
.popup .pb a.go { display: inline-block; margin-top: 6px; background: var(--accent); color: #fff; padding: 5px 10px; border-radius: 3px; font-weight: 800; font-size: 11.5px; letter-spacing: .04em; }
.measure-tip { background: rgba(6,21,33,.9); color: #fff; font: 800 11.5px var(--mono-font); padding: 3px 7px; border-radius: 3px; white-space: nowrap; transform: translate(10px, -50%); }

/* ── stations ───────────────────────────────────────────── */
.stn-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.stn-table th { text-align: left; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); padding: 6px 8px; border-bottom: 2px solid var(--line); }
.stn-table td { padding: 7px 8px; border-bottom: 1px solid var(--line2); font-weight: 700; }
.stn-table td.n a { font-weight: 900; color: var(--ink); }
.stn-table td.m { font-family: var(--mono-font); white-space: nowrap; }
.stn-table tr:hover td { background: rgba(19, 138, 94, .06); }
.tablewrap { overflow-x: auto; }
.kind { display: inline-block; font: 800 9px var(--mono-font); letter-spacing: .08em; padding: 2px 5px; border-radius: 2px; background: var(--line2); color: var(--ink2); text-transform: uppercase; }
.kind.research { background: var(--accent); color: #fff; }
.kind.pole { background: var(--gold); color: #1a1200; }
.kind.airfield { background: var(--sign); color: #fff; }
.kind.town { background: var(--line2); color: var(--ink); }

.stnhead { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: stretch; }
@media (max-width: 820px) { .stnhead { grid-template-columns: 1fr; } }
.stnhead .sign { display: flex; flex-direction: column; justify-content: space-between; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; }
.facts div { display: flex; flex-direction: column; }
.facts .k { font: 700 9px var(--mono-font); letter-spacing: .14em; color: var(--sign-sub); text-transform: uppercase; }
.facts .v { font: 900 18px var(--font); }
.facts .v small { font: 700 11px var(--mono-font); color: var(--sign-sub); }
.locator { border-radius: 10px; overflow: hidden; border: 1px solid var(--figure-line); min-height: 240px; position: relative; background: var(--figure); }
.locator .map { position: absolute; inset: 0; }
.nowgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.nowcell { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; box-shadow: var(--shadow); }
.nowcell .k { font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.nowcell .v { font: 900 24px var(--font); letter-spacing: -.02em; margin-top: 2px; }
.nowcell .v small { font: 700 12px var(--mono-font); color: var(--ink2); margin-left: 2px; }
.nowcell .s { font: 700 10.5px var(--mono-font); color: var(--ink2); margin-top: 2px; }
.meteo { background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 8px 6px 4px; }
.meteo svg { display: block; width: 100%; height: auto; overflow: visible; }
.meteo text { font-family: var(--font); }
.mg-title { font: 900 10px var(--font); letter-spacing: .12em; text-transform: uppercase; fill: var(--ink2); }
.mg-axis { font: 700 9.5px var(--mono-font); fill: var(--mut); }
.mg-grid { stroke: var(--line2); stroke-width: 1; }
.mg-day { stroke: var(--line); stroke-width: 1; }
.mg-now { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 3; }
.mg-night { fill: rgba(12, 53, 80, .07); }
.mg-hover { stroke: var(--ink); stroke-width: 1; opacity: .5; }
.mg-tip { position: absolute; pointer-events: none; background: rgba(6,21,33,.92); color: #fff; border-radius: 5px; padding: 7px 10px; font: 700 11px var(--mono-font); line-height: 1.5; white-space: nowrap; z-index: 5; }
.mg-tip b { font-family: var(--font); font-size: 12px; }
.sunnote { font-size: 13.5px; font-weight: 700; color: var(--ink2); }
.sunnote b { color: var(--ink); }

/* ── footer, skip link ──────────────────────────────────── */
.site-footer { border-top: 3px solid var(--accent); margin-top: 44px; padding: 18px 0 34px; color: var(--ink2); font-size: 12px; font-weight: 600; background: var(--paper2); line-height: 1.6; }
.site-footer a { color: var(--sign); font-weight: 800; }
.site-footer .fam { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--accent); color: #fff; padding: 9px 14px; z-index: 200; font-weight: 800; }
.skip:focus { left: 0; }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ══ dark ═══════════════════════════════════════════════════
   The polar night: ink ground, the panel stays night blue, the aurora brightens. The
   atlas swaps to its night plate through polar.js, which reads the same query
   (or the explicit theme set on <html data-theme>). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #07111a; --paper2: #040b11; --card: #0f1c27; --ink: #e4eef2; --ink2: #aabdc8;
    --mut: #71889a; --line: #213646; --line2: #172837; --sign: #0e3d5c; --sign-dk: #07223a;
    --accent: #179a69; --accent-dk: #3fd18f; --shadow: 0 6px 22px rgba(0,0,0,.35); --shadow-hi: 0 10px 26px rgba(0,0,0,.5);
    color-scheme: dark;
  }
  :root:not([data-theme="light"]) .apanel { background: rgba(15, 28, 39, .96); }
}
:root[data-theme="dark"] {
  --paper: #07111a; --paper2: #040b11; --card: #0f1c27; --ink: #e4eef2; --ink2: #aabdc8;
  --mut: #71889a; --line: #213646; --line2: #172837; --sign: #0e3d5c; --sign-dk: #07223a;
  --accent: #179a69; --accent-dk: #3fd18f; --shadow: 0 6px 22px rgba(0,0,0,.35); --shadow-hi: 0 10px 26px rgba(0,0,0,.5);
  color-scheme: dark;
}
:root[data-theme="dark"] .apanel { background: rgba(15, 28, 39, .96); }

/* ol.css pins the uncollapsible attribution bottom-right with a longer selector */
.ol-attribution.ol-uncollapsible { left: 10px; right: auto; bottom: 6px; border-radius: 3px; }
.atlas-main .ol-attribution.ol-uncollapsible { left: auto; right: 150px; }
.btn-go { background: var(--sign); color: #fff; border-color: var(--sign-dk); font-weight: 900; }
.btn-go:hover { background: var(--accent); border-color: var(--accent-dk); color: #fff; }
.tl-transport #tl-prev, .tl-transport #tl-next { font-size: 18px; line-height: 1; padding: 3px 10px 6px; }

/* dark: the chart and timeline accents read on the dark card */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .herostage .stn text.val { fill: #1b7a55; }
}
.fh-note { color: var(--accent-sub); }

/* the station page's facts sit on the panel: none of the explorer strip's card */
.sign .facts { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
@media (max-width: 560px) { .rule h2 { white-space: normal; line-height: 1.25; } }
/* dark: links in the footer and prose read in ice blue, not panel blue */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-footer a, :root:not([data-theme="light"]) .prose a,
  :root:not([data-theme="light"]) a.inl { color: var(--ice); }
}
:root[data-theme="dark"] .site-footer a, :root[data-theme="dark"] .prose a, :root[data-theme="dark"] a.inl { color: var(--ice); }
/* until (or wherever) the relief tiles are missing, the atlas shows sea, not the dark figure */
.atlas-main, .locator { background: #bfd4e1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .atlas-main, :root:not([data-theme="light"]) .locator { background: var(--figure); } }
:root[data-theme="dark"] .atlas-main, :root[data-theme="dark"] .locator { background: var(--figure); }