/* Forecast Antarctica — the Forecast Network design system, polar cut
 *
 * Sibling to 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 vocabulary, because there are no roads.
 *   - The panel is polar blue. The accent that Forecast Canada spends in
 *     Trans-Canada green is spent here in expedition orange — the Big Red parka,
 *     the station buildings, the survival bags: the one colour that is always
 *     findable against snow.
 *   - There is no route shield. Its slot carries a station-flag chip naming the
 *     model grid, and the mark is an emperor penguin.
 *   - Exit chips are WAYPOINTS. Distances are km. Wind defaults to knots, the unit
 *     the U.S. and New Zealand programs fly and forecast in.
 *   - The paper is cool rather than warm: snow, not newsprint.
 */

:root {
  --paper: #e5e8eb;
  --paper2: #d9dee3;
  --card: #ffffff;
  --ink: #111820;
  --ink2: #3d4854;
  --mut: #7b8793;
  --line: #c3cad1;
  --line2: #e1e5e9;

  /* Polar blue — the panel and the site's primary note. */
  --sign: #0b4a85;
  --sign-dk: #062f58;
  --sign-tx: #ffffff;
  --sign-sub: #cfe5f7;

  /* Expedition orange — every working accent. */
  --orange: #ea5a1a;
  --orange-dk: #b8410c;
  --orange-sub: #ffd9c4;

  --ice: #7cc6e0;
  --sea: #1f6fa8;
  --gold: #f4a817;

  --figure: #08111b;
  --figure-line: #1f3346;
  --figure-tx: #e3ecf3;
  --figure-mut: #8fa6ba;

  --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: #111820; color: #c6cfd7; border-bottom: 3px solid var(--orange);
  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(--orange-sub); text-decoration: none; }
.util a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--orange); }
@media (max-width: 720px) { .util .mono .long { display: none; } }
@media (max-width: 560px) {
  .util .lnks { gap: 11px; }
  .util a.n-hemisphere, .util a.n-ross, .util a.n-peninsula, .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);
}
/* a faint 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(120% 60% at 85% -10%, rgba(124, 198, 224, .28), transparent 60%),
    radial-gradient(80% 50% at 10% 120%, rgba(90, 220, 170, .12), 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: rgba(255, 255, 255, .95); border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25), 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(--orange); 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(--orange-sub); font-weight: 900; margin-right: 3px; }
.mm:hover { background: #fff; color: var(--sign); text-decoration: none; }
.mm:hover b { color: var(--orange); }

/* ── 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(--orange) 0 18px, transparent 18px 34px); }
.rule h2 { margin: 0; color: var(--orange-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(--orange); }
.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(--orange-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(--orange); 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(--orange); 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(--orange); }

.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(--orange); color: #fff; border-color: var(--orange); }
.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(--orange); 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(--orange); stroke: #fff; stroke-width: 1.6; }
.herostage .stn.summer circle.dot { fill: #fff; stroke: var(--orange); }
.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: #0d1620; 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(--orange-dk); }
.herostage .feat { font: italic 500 15px var(--atlas-font); fill: #2f5877; 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(8, 17, 27, .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(--orange-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 ───────────────────────────────────────────
   McMurdo and the Pole both keep a post of arrows pointing at home towns with
   the distance painted on. 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(--orange); }
.arrow.wd { background: #7a5a2d; }
.arrow .km { font: 800 12px var(--mono-font); color: var(--sign-sub); white-space: nowrap; }
.arrow.or .km { color: #fff1e8; }
.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(--orange); }

.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(8, 17, 27, .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(--orange-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(--orange-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(8, 17, 27, .82); color: #fff; font-family: var(--font); border-radius: 3px; }
.ol-control button:hover, .ol-control button:focus { background: var(--orange); 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(8, 17, 27, .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(8, 17, 27, .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(--orange); }
.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(--orange); 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(--orange);
  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(--orange-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(--orange-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(8, 17, 27, .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(8, 17, 27, .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(--orange); 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(8, 17, 27, .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(--orange);
  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(--orange); stroke-width: 2.2; stroke-linejoin: round; }
.pp-chart .area { fill: var(--orange); 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(--orange-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(--orange-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(--orange); color: #fff; padding: 5px 10px; border-radius: 3px; font-weight: 800; font-size: 11.5px; letter-spacing: .04em; }
.measure-tip { background: rgba(8,17,27,.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(234, 90, 26, .05); }
.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.year { background: var(--orange); color: #fff; }
.kind.pole { background: var(--gold); color: #1a1200; }
.kind.gateway { background: var(--sign); color: #fff; }

.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(--orange); stroke-width: 1.5; stroke-dasharray: 3 3; }
.mg-night { fill: rgba(11, 74, 133, .06); }
.mg-hover { stroke: var(--ink); stroke-width: 1; opacity: .5; }
.mg-tip { position: absolute; pointer-events: none; background: rgba(8,17,27,.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(--orange); 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(--orange); 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 blue, orange stays orange. 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: #0b1219; --paper2: #070d13; --card: #121c26; --ink: #e6edf3; --ink2: #aebccb;
    --mut: #75879a; --line: #263545; --line2: #1a2632; --sign: #0d4f8e; --sign-dk: #083662;
    --orange-dk: #ff8a52; --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(18, 28, 38, .96); }
}
:root[data-theme="dark"] {
  --paper: #0b1219; --paper2: #070d13; --card: #121c26; --ink: #e6edf3; --ink2: #aebccb;
  --mut: #75879a; --line: #263545; --line2: #1a2632; --sign: #0d4f8e; --sign-dk: #083662;
  --orange-dk: #ff8a52; --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(18, 28, 38, .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(--orange); border-color: var(--orange-dk); color: #fff; }
.tl-transport #tl-prev, .tl-transport #tl-next { font-size: 18px; line-height: 1; padding: 3px 10px 6px; }