/* Bluegraph: an instrument in the dark. Near-black depths, data drawn as
   light, glass panels for readings, monospaced numbers. One dark design for
   every page. */

@font-face {
  font-family: "Public Sans";
  src: url(fonts/public-sans-latin.woff2) format("woff2");
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url(fonts/jetbrains-mono-latin.woff2) format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --stage-top: 78px; /* where a stage's panels start, below the floating bar */
  --bar-h: 61px;     /* the sticky bar's height, for what sticks below it */
  --bg: #05080f;
  --bg-2: #0a111d;
  --bg-3: #0f1828;
  --glass: linear-gradient(160deg, rgb(24 34 54 / 0.7), rgb(8 13 24 / 0.62));
  --line: rgb(255 255 255 / 0.08);
  --line-2: rgb(255 255 255 / 0.16);
  --ink: #e6ecf5;
  --ink-2: #a8b3c7;
  --ink-3: #7d889c;
  /* Chart marks: validated for colour-vision deficiency on --bg. */
  --total: #dfe6f0;
  --swell: #2b95d6;
  --wind: #c9821f;
  /* The same hues as light in the scene. */
  --swell-glow: #59bdf5;
  --wind-glow: #f2a444;
  --live: #6fd8a4;
  --current-glow: #7fe3b0;
  --sans: "Public Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: 32px;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body.ui {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--swell-glow); outline-offset: 2px; }

.skip {
  position: absolute; left: 12px; top: -40px; z-index: 20;
  background: var(--ink); color: var(--bg); padding: 6px 12px; border-radius: 6px;
}
.skip:focus { top: 12px; }

.glass {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 14px;
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.35);
}

.eyebrow {
  margin: 0 0 8px;
  font: 600 11px/1.3 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Segmented control: links or buttons, the current one lit. */
.seg {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.03);
}
.seg > a, .seg > button, .ctl__btn {
  border: 0;
  background: none;
  color: var(--ink-2);
  font: 500 12px/1 var(--sans);
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.seg > :hover, .ctl__btn:hover { color: var(--ink); }
.seg > [aria-pressed="true"], .seg > [aria-current] {
  background: rgb(255 255 255 / 0.13);
  color: var(--ink);
}
.ctl__btn { border: 1px solid var(--line); background: rgb(255 255 255 / 0.03); }

/* --- top bar -------------------------------------------------------------- */

/* The bar's words share one baseline, whatever their size; the mark is
   centred on the name beside it. */
.bar {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: baseline; gap: 28px;
  padding: 12px var(--gutter);
  background: rgb(5 8 15 / 0.82);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* Over a full-bleed scene the bar floats on a fade instead. */
.ui--stage .bar {
  position: absolute; left: 0; right: 0; padding-top: 14px; padding-bottom: 14px;
  border-bottom: 0; background: linear-gradient(to bottom, rgb(5 8 15 / 0.9), rgb(5 8 15 / 0));
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.bar__brand {
  display: flex; align-items: baseline; gap: 9px;
  font-weight: 600; letter-spacing: 0.01em; text-decoration: none;
}
.bar__brand span { order: 1; }
.bar__mark { display: block; width: 22px; height: 22px; align-self: center; }
.bar__nav { display: flex; gap: 20px; }
.bar__nav a { color: var(--ink-2); text-decoration: none; font-size: 13px; }
.bar__nav a:hover, .bar__nav a[aria-current] { color: var(--ink); }
.bar__units { margin-left: auto; }

/* --- stage ---------------------------------------------------------------- */

.stage {
  position: relative;
  height: 100svh;
  min-height: 680px;
  max-height: 1100px;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 60%, #0b1526 0%, var(--bg) 70%);
}
.stage__scene { position: absolute; inset: 0; }
.stage__scene canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.stage__scene canvas:active { cursor: grabbing; }
.stage__labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.hud { position: absolute; z-index: 2; margin: 0; }
.stage__left {
  position: absolute; z-index: 2; top: var(--stage-top); left: var(--gutter); bottom: var(--spine-space, 180px); width: min(340px, 30vw);
  display: flex; flex-direction: column; gap: 14px; pointer-events: none;
}
.stage__left .hud { position: static; }
.hud--id { pointer-events: none; }
.hud--legend { margin-top: auto; }
.hud__key { margin: 0; display: flex; flex-direction: column; gap: 3px; font: 11px var(--mono); color: var(--ink-2); }
.hud--legend { text-shadow: 0 1px 3px rgb(0 0 0 / 0.9), 0 0 12px rgb(5 8 15 / 0.9); }

/* The location chart. */
.locator { margin: 0; padding: 10px 12px 10px; pointer-events: auto; }
.locator svg { display: block; width: 100%; height: auto; overflow: hidden; border-radius: 6px; background: rgb(3 6 12 / 0.55); }
.locator path, .locator circle { vector-effect: non-scaling-stroke; }
.locator__grid { fill: none; stroke: rgb(255 255 255 / 0.06); }
.locator__land { fill: rgb(154 172 199 / 0.2); fill-rule: evenodd; stroke: rgb(201 211 226 / 0.7); stroke-width: 1; stroke-linejoin: round; }
.locator__ring { fill: none; stroke: rgb(255 255 255 / 0.18); stroke-dasharray: 2 3; }
.locator__shore { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 4 3; }
.locator__halo { fill: rgb(255 255 255 / 0.12); }
.locator__station { fill: #fff; filter: drop-shadow(0 0 4px #fff); }
.locator text { font: 8.5px var(--mono); fill: var(--ink-3); }
.locator__ringlabel { fill: var(--ink-2); }
.locator__north { font-family: var(--sans); font-weight: 600; fill: var(--ink-2); text-anchor: end; }
.locator figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; margin-top: 7px; font-size: 12px; color: var(--ink); }
.locator__credit { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.locator__near { display: block; margin-top: 1px; color: var(--ink-2); }
.locator__town { fill: #e8d9b0; }
.locator .locator__townname {
  font: 500 9.5px var(--sans); fill: #eadfc2; letter-spacing: 0.01em;
  paint-order: stroke; stroke: rgb(5 8 15 / 0.85); stroke-width: 2.5px; stroke-linejoin: round;
}
.hud--id h1 {
  margin: 0 0 10px;
  font: 300 clamp(30px, 3.3vw, 48px)/1.04 var(--sans);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hud__meta { margin: 0 0 14px; font: 12px/1.5 var(--mono); color: var(--ink-2); }
.card__more { display: inline-block; margin-top: 10px; font-size: 12px; color: var(--ink-2); text-underline-offset: 3px; }
.card__more:hover { color: var(--ink); }
.hud__when { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 12px var(--mono); }
.hud__note { margin: 8px 0 0; max-width: 40ch; font-size: 11.5px; color: var(--ink-3); }
.hud__note a { color: var(--ink-2); white-space: nowrap; pointer-events: auto; }
.when__tag {
  font: 600 9px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 5px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink-2);
}
.when__tag--live { color: var(--live); border-color: rgb(111 216 164 / 0.45); }
.when__tag--stale { color: var(--wind-glow); border-color: rgb(242 164 68 / 0.45); }
.hud__whenrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.when__tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
/* On a station page the badges take their own row under the time. */
.hud__whenrow .hud__when { flex-direction: column; align-items: flex-start; gap: 10px; }
/* The badges keep within the title's column, above the map, wrapping
   whole where it is narrow. */
.when__time, .when__tag { white-space: nowrap; }
/* A badge like the spectrum's that links to the station's Wave
   Intelligence, in its own violet. */
.when__tag.when__tag--link {
  display: inline-flex; align-items: center; gap: 5px; pointer-events: auto; text-decoration: none;
  color: #bca8ff; border-color: rgb(176 149 255 / 0.5); transition: border-color 0.15s, background 0.15s;
}
.when__tag--link span { letter-spacing: 0; transition: translate 0.2s; }
.when__tag.when__tag--link:hover { border-color: rgb(176 149 255 / 0.85); background: rgb(176 149 255 / 0.1); color: #d6caff; }
.when__tag--link:hover span { translate: 2px 0; }
.when__tag--live::before {
  content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 5px;
  border-radius: 50%; background: var(--live); vertical-align: 1px;
  box-shadow: 0 0 8px var(--live);
}
.stage[data-state="loading"] .hud__when { color: var(--ink-3); animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: 0.45; } }

/* The readings rail: every metric at the cursor time. */
.hud--rail {
  top: var(--stage-top); right: var(--gutter); width: 344px;
  max-height: calc(100% - var(--stage-top) - var(--spine-space, 180px)); overflow-y: auto; scrollbar-width: thin;
  padding: 14px 16px 12px;
}
.hud__title {
  margin: 0;
  font: 600 10.5px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
.rail__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.rail__stamp { margin: 0; font: 11px var(--mono); color: var(--ink-2); }
.rail__group { padding: 7px 0 3px; border-top: 1px solid var(--line); }
.rail__group h2 {
  display: flex; justify-content: space-between; margin: 0 0 2px;
  font: 600 10px/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.rail__time { font: 10px var(--mono); letter-spacing: 0; text-transform: none; }
.rail__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 60px; align-items: center; gap: 10px;
  width: calc(100% + 12px); margin: 0 -6px; padding: 3px 6px;
  border: 0; border-radius: 6px; background: none; text-align: left; cursor: pointer; color: var(--ink);
}
.rail__row:hover { background: rgb(255 255 255 / 0.05); }
.rail__label { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail__label i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--c); }
.rail__value { font: 12px/1.25 var(--mono); text-align: right; white-space: nowrap; color: var(--ink-2); }
.rail__value b { font-weight: 500; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.rail__value small { display: block; max-width: 26ch; margin-left: auto; font-size: 10.5px; color: var(--ink-3); white-space: normal; }
.rail__none { color: var(--ink-3); }
.rail__row--hero .rail__label { font-size: 13px; color: var(--ink); }
.rail__row--hero .rail__value b { font: 300 32px/1 var(--sans); letter-spacing: -0.02em; }
.rail__row--swell { --c: var(--swell); }
.rail__row--wind { --c: var(--wind); }
.rail__spark { width: 60px; height: 20px; overflow: visible; }
.rail__line { fill: none; stroke: var(--c, var(--total)); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: 0.75; }
.rail__dot { fill: none; stroke: var(--c, var(--total)); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rail__dial { width: 20px; height: 20px; justify-self: end; margin-right: 20px; overflow: visible; }
.rail__dial circle { fill: none; stroke: var(--line-2); }
.rail__north { stroke: var(--ink-3); stroke-width: 1.5; }
.rail__needle { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.rail__foot { display: grid; gap: 4px; margin: 6px 0 0; padding-top: 8px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-3); }
.rail__foot a { color: var(--ink); text-underline-offset: 3px; }

.ctl { display: flex; align-items: center; gap: 8px; }
.ctl__label {
  font: 600 10px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.spine__tools { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 18px; }
.key { white-space: nowrap; }
.key i { display: inline-block; width: 14px; height: 2px; margin-right: 7px; vertical-align: 3px; background: var(--total); border-radius: 1px; }
.key--swell i { background: var(--swell-glow); box-shadow: 0 0 6px var(--swell-glow); }
.key--wind i { background: var(--wind-glow); box-shadow: 0 0 6px var(--wind-glow); }
/* A current chevron, pointing the way the water goes. */
.key--current i { width: 6px; height: 6px; margin: 0 9px 0 3px; vertical-align: 1px; background: none; border: solid var(--current-glow); border-width: 1.5px 1.5px 0 0; border-radius: 0; rotate: 45deg; }

/* Labels pinned to the scene. JS sets transform to the projected point. */
.tag {
  position: absolute; left: 0; top: 0; will-change: transform;
  font: 11px/1.2 var(--mono); color: var(--ink-2); white-space: nowrap;
}
.tag--cardinal { translate: -50% -50%; font: 600 16px var(--sans); color: var(--ink); text-shadow: 0 0 10px rgb(0 0 0 / 0.9); }
.tag--degree { translate: -50% -50%; font-size: 11px; color: var(--ink-2); text-shadow: 0 0 6px rgb(0 0 0 / 0.9); }
/* Readings pinned over the moving sea: see-through, unblurred, so the sea
   and the buoy show through; the text keeps a shadow to stay legible. Each
   title takes a washed tint of its system's colour in the scene. */
.tag--mark {
  translate: -50% -50%;
  z-index: 1;
  display: grid; gap: 1px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgb(8 13 24 / 0.38);
  border: 1px solid rgb(255 255 255 / 0.1);
  color: var(--ink);
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.9), 0 0 8px rgb(0 0 0 / 0.55);
}
.tag--mark::before {
  content: ""; position: absolute; top: -1px; left: 8px; right: 8px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c) 20%, var(--c) 80%, transparent);
}
.tag--mark b { font: 600 10px/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--t); }
.tag--swell { --c: var(--swell-glow); --t: #a3d8f7; }
.tag--wind { --c: var(--wind-glow); --t: #f5c994; }
.tag--ink { --c: var(--total); --t: #c9d3e1; }
/* The current's label rides a particle, just right of its dot: light
   text, no panel. */
.tag--drift { translate: 9px -50%; display: flex; gap: 6px; align-items: baseline; color: var(--ink-2); text-shadow: 0 1px 2px rgb(0 0 0 / 0.95), 0 0 6px rgb(5 8 15 / 0.95), 0 0 12px rgb(5 8 15 / 0.8); }
.tag--drift b { font: 600 9.5px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: #a9e9c9; }
.tag--drift span { font-size: 10.5px; }
/* The buoy: its hull sits on the sea at the point, above every reading. */
.tag--buoy { z-index: 2; display: flex; align-items: flex-end; gap: 6px; translate: -14px -24px; color: var(--ink); }
.tag--buoy svg { width: 28px; height: 28px; flex: none; filter: drop-shadow(0 0 5px rgb(255 255 255 / 0.7)); transform-origin: 14px 23.8px; }
.tag--buoy span { padding: 2px 6px; border-radius: 4px; background: rgb(5 8 15 / 0.72); }

/* --- spine ---------------------------------------------------------------- */

.spine { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: 22px; padding: 10px 18px 24px; }
.spine__head { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.spine__play {
  display: grid; place-items: center; width: 28px; height: 28px; flex: none;
  border: 1px solid var(--line-2); border-radius: 50%; background: rgb(255 255 255 / 0.05); cursor: pointer;
}
.spine__play svg { width: 14px; height: 14px; fill: var(--ink); }
.spine__play[aria-pressed="true"] { background: rgb(255 255 255 / 0.14); }
.spine__legend { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font: 11px var(--mono); color: var(--ink-2); }
.spine__scale { color: var(--ink-3); }
.key--total i { background: var(--total); }
.spine__track { position: relative; height: 56px; cursor: ew-resize; touch-action: none; }
.spine__track:focus-visible { outline-offset: 6px; border-radius: 4px; }
.spine__plot { display: block; width: 100%; height: 100%; overflow: visible; }
.spine__plot path { fill: none; vector-effect: non-scaling-stroke; }
.spine__plot .grid { stroke: var(--line); }
.spine__plot .grid--day { stroke: var(--line-2); }
.spine__plot .base { stroke: var(--line-2); }
.spine__plot .fill { fill: rgb(223 230 240 / 0.06); stroke: none; }
.spine__plot .line { stroke-width: 1.5; stroke-linejoin: round; }
.spine__plot .line--total { stroke: var(--total); }
.spine__plot .line--swell { stroke: var(--swell); }
.spine__plot .line--wind { stroke: var(--wind); }
.spine__plot .cursor { stroke: var(--ink); stroke-width: 1.5; }
.spine__ticks span {
  position: absolute; bottom: -17px; translate: -50% 0;
  font: 10px var(--mono); color: var(--ink-3); white-space: nowrap;
}
.spine__ticks .day { color: var(--ink-2); }
.spine__flag {
  position: absolute; top: -4px; translate: 8px -100%;
  padding: 2px 6px; border-radius: 4px; background: var(--bg-3); border: 1px solid var(--line-2);
  font: 11px var(--mono); white-space: nowrap; pointer-events: none;
}
.spine__flag--end { translate: calc(-100% - 8px) -100%; }

.stage__message { position: absolute; z-index: 3; left: 50%; top: 44%; translate: -50% -50%; width: min(460px, 86vw); }
.stage__message p {
  margin: 0; padding: 16px 20px; border-radius: 12px; text-align: center;
  background: rgb(10 17 29 / 0.85); border: 1px solid var(--line-2); color: var(--ink-2);
}
.stage__message:empty { display: none; }

/* A tide gauge's scene is its tide chart, between the panels. */
.stage[data-state="tide"] { height: auto; min-height: 760px; }
.stage[data-state="tide"] :is(.spine, .hud--legend) { display: none; }
.stage[data-state="tide"] .hud--rail { max-height: none; }
.stage__scene .tide__canvas { position: absolute; inset: 0; cursor: crosshair; touch-action: pan-y; }

/* A station without spectra has no scene: only its name, the message and
   the charts. */
.stage[data-state="nospectra"] { height: auto; min-height: 620px; }
.stage[data-state="nospectra"] :is(.spine, .hud--legend) { display: none; }
.stage[data-state="nospectra"] .hud--rail { max-height: none; }

/* --- deck ----------------------------------------------------------------- */

.deck { max-width: 1480px; margin: 0 auto; padding: 56px var(--gutter) 32px; }
.deck__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.deck__head h2 { margin: 0; font: 300 30px/1.1 var(--sans); letter-spacing: -0.015em; }
.deck__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 24px; }
.deck__links { display: flex; gap: 14px; margin: 0; font-size: 13px; color: var(--ink-3); }
.ranges > a, .rail__ranges > button { font: 600 11.5px/1 var(--mono); letter-spacing: 0.02em; }
/* Time controls (chart ranges, analysis windows) wear one gentle accent, a
   periwinkle no data series uses, so they are easy to find and are not taken
   for the metric chips. */
.ranges, .rail__ranges { --tint: 154 168 255; background: rgb(var(--tint) / 0.07); border-color: rgb(var(--tint) / 0.3); }
.ranges > a, .rail__ranges > button { color: rgb(174 186 255 / 0.85); }
.ranges > a:hover, .rail__ranges > button:hover { color: #e3e7ff; background: rgb(var(--tint) / 0.1); }
.ranges > [aria-current], .rail__ranges > [aria-current] {
  background: rgb(var(--tint) / 0.26); color: #f1f3ff;
  box-shadow: inset 0 0 0 1px rgb(var(--tint) / 0.5);
}
[data-range][aria-busy] { animation: breathe 0.9s ease-in-out infinite; }
.rail__ranges { display: flex; width: 100%; margin: 0 0 10px; }
.rail__ranges > button { flex: 1; padding: 6px 0; font-size: 10.5px; }
.deck__links a { color: var(--ink-2); }
.deck__chips { display: flex; flex-wrap: wrap; gap: 12px 22px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
/* The chart picker: a column per group, labels aligned along the top,
   hairlines between; the sea a grid of height, period and direction
   against sea, swell and wind sea. */
.deck__chips:has(.pick__group) { display: flex; flex-wrap: wrap; align-items: stretch; gap: 18px 0; padding-bottom: 22px; }
.pick__group { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 0 30px; border-left: 1px solid var(--line); }
.pick__group:first-child { padding-left: 0; border-left: 0; }
.pick__label { margin: 0 0 8px; font: 600 10px/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.pick {
  --c: var(--total);
  display: inline-flex; align-items: center; gap: 9px; padding: 3px 0;
  border: 0; background: none; color: var(--ink-2); font: 13px/1.35 var(--sans); cursor: pointer; text-align: left; white-space: nowrap;
}
.pick i {
  flex: none; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--c) 55%, transparent); background: none; transition: background 0.12s, box-shadow 0.12s;
}
.pick:hover { color: var(--ink); }
.pick:hover i { border-color: var(--c); }
.pick[aria-pressed="true"] { color: var(--ink); }
.pick[aria-pressed="true"] i { background: var(--c); border-color: var(--c); box-shadow: 0 0 7px color-mix(in srgb, var(--c) 55%, transparent); }
.pick:disabled { color: var(--ink-3); opacity: 0.5; cursor: not-allowed; }
.pick:disabled i, .pick:disabled[aria-pressed="true"] i { background: none; box-shadow: none; border-style: dashed; border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.pick__items { display: flex; flex-direction: column; gap: 2px; }
.pick__items--two { display: grid; grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: 30px; row-gap: 2px; }
.pick--swell { --c: var(--swell-glow); }
.pick--wind { --c: var(--wind-glow); }
.pick__grid { display: grid; grid-template-columns: auto repeat(3, 64px); align-items: center; row-gap: 2px; margin-bottom: 4px; }
.pick__col { font: 11px var(--mono); color: var(--ink-3); text-align: center; padding-bottom: 4px; }
.pick__col.pick--swell { color: color-mix(in srgb, var(--swell-glow) 80%, var(--ink-3)); }
.pick__col.pick--wind { color: color-mix(in srgb, var(--wind-glow) 80%, var(--ink-3)); }
.pick__row { padding-right: 18px; font-size: 13px; color: var(--ink-2); }
.pick--cell { justify-content: center; padding: 5px 0; }
.pick--cell i { width: 11px; height: 11px; }
.pick__all {
  align-self: flex-start; margin-left: auto; padding: 4px 12px;
  border: 1px solid var(--line-2); border-radius: 999px; background: none; color: var(--ink-2); font: 12px var(--sans); cursor: pointer;
}
.pick__all:hover { color: var(--ink); border-color: rgb(255 255 255 / 0.3); }
.chips__group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chips__label { font: 600 10px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-right: 4px; }
.chip {
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line-2); background: none; color: var(--ink-2);
  font: 500 12.5px/1 var(--sans); cursor: pointer;
}
.chip i { width: 7px; height: 7px; margin-right: 7px; opacity: 0.35; }
.chip[aria-pressed="true"] { background: rgb(255 255 255 / 0.1); border-color: rgb(255 255 255 / 0.28); color: var(--ink); }
.chip[aria-pressed="true"] i { opacity: 1; }
.chip:disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.chip--swell { --c: var(--swell); }
.chip--wind { --c: var(--wind); }
.chip--all i { display: none; }

.deck__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); grid-auto-flow: row dense; align-items: start; gap: 14px; }
.deck__empty { color: var(--ink-3); }
.card {
  padding: 14px 16px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--bg-2), rgb(10 17 29 / 0.4));
}
.card h3 i, .chip i {
  display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%;
  background: var(--c, var(--total)); vertical-align: 1px;
}
.card--total { --c: var(--total); }
.card--swell { --c: var(--swell); }
.card--wind { --c: var(--wind); }
.card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.card h3 { margin: 0; font: 600 13px/1.3 var(--sans); }
.card h3 i { width: 7px; height: 7px; }
.card__unit { margin-left: 8px; font: 400 11px var(--mono); color: var(--ink-3); }
.card__read { margin: 0; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.card__value { font: 500 18px/1 var(--mono); font-variant-numeric: tabular-nums; }
.card__at { font: 10.5px var(--mono); color: var(--ink-3); }
.card__note { margin: 4px 0 0; font-size: 11.5px; color: var(--ink-3); }
.card__plot { position: relative; height: 96px; margin-left: 38px; cursor: crosshair; }
.card__plot--tall { height: 180px; }
.card__plot--polar { height: auto; margin: 4px 0 6px; display: grid; place-items: center; cursor: default; }
/* The spectra's band: the spectrogram over two of three columns, the
   directional spectrum in the third at the same height, on the same columns
   as the cards below; the spectrogram's plot stretches to fill. */
.deck__band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; margin-bottom: 14px; }
.deck__band > [data-key="spectrogram"] { grid-column: span 2; }
.deck__band[hidden] { display: none; }
.deck__band--one { grid-template-columns: minmax(0, 1fr); }
.deck__band--one > [data-key="spectrogram"] { grid-column: auto; }
.deck__band .card { display: flex; flex-direction: column; }
.deck__band .card__plot--tall { flex: 1; height: auto; min-height: 200px; }
.deck__band .card__plot--polar { flex: 1; align-content: center; }
.card--flash { animation: flash 1.4s ease-out; }
@keyframes flash { 0% { border-color: rgb(255 255 255 / 0.6); box-shadow: 0 0 0 3px rgb(255 255 255 / 0.12); } }
.card__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.card__plot path { fill: none; vector-effect: non-scaling-stroke; }
.card__plot .grid { stroke: var(--line); }
.card__plot .grid--v { stroke-dasharray: 2 4; }
.card__plot .zero { stroke: var(--line-2); }
.card__plot .line { stroke: var(--c); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.card__plot .area { fill: color-mix(in srgb, var(--c) 10%, transparent); stroke: none; }
.card__plot .dots { stroke: var(--c); stroke-width: 4; stroke-linecap: round; }
.card__plot .dots--dense { stroke-width: 2; opacity: 0.8; }
.card__plot .bars { stroke-width: 3; }
.card__plot .bars--up { stroke: var(--c); }
.card__plot .bars--down { stroke: var(--ink-3); }
.card__plot .cross { stroke: var(--ink-2); stroke-width: 1; }
.card__plot .marker { stroke: var(--c); stroke-width: 9; stroke-linecap: round; }
.card__plot .sep { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.7; }
.card__canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 2px; }
.card__y span {
  position: absolute; left: -38px; width: 32px; translate: 0 -50%; text-align: right;
  font: 10px var(--mono); color: var(--ink-3);
}
.card__x { position: relative; height: 18px; margin-left: 38px; }
.card__x span { position: absolute; top: 5px; translate: -50% 0; font: 10px var(--mono); color: var(--ink-3); white-space: nowrap; }

.foot {
  max-width: 1480px; margin: 0 auto; padding: 24px var(--gutter) 40px;
  display: flex; justify-content: space-between; gap: 24px;
  border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3);
}
.foot p { margin: 0; max-width: 70ch; }
.foot__start { display: grid; gap: 12px; }
/* A credit for the engine a page runs on, in the owner's own artwork. */
.foot__credit { display: flex; align-items: center; gap: 10px; }
.foot__credit a { display: inline-flex; opacity: 0.85; transition: opacity 0.15s; }
.foot__credit a:hover { opacity: 1; }
.foot__credit img { display: block; width: 70px; height: auto; }
.foot__end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 28px; line-height: 1.5; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.foot__nav a { color: var(--ink-2); }
.gxp { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); text-decoration: none; white-space: nowrap; }
.gxp:hover { color: var(--ink-2); }
.gxp img { display: block; width: 13px; height: 13px; flex: none; }

/* --- content pages -------------------------------------------------------- */

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.page { max-width: 1480px; margin: 0 auto; padding: 40px var(--gutter) 56px; }
.page__head h1 { margin: 0 0 10px; font: 300 clamp(32px, 3.4vw, 46px)/1.05 var(--sans); letter-spacing: -0.02em; }
.page__sub { margin: 0; font: 12.5px/1.5 var(--mono); color: var(--ink-2); }

.field {
  display: flex; align-items: center; gap: 10px; min-width: min(360px, 100%);
  padding: 0 14px; height: 38px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgb(255 255 255 / 0.04); color: var(--ink-3);
}
.field:focus-within { border-color: rgb(255 255 255 / 0.35); color: var(--ink-2); }
.field input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font: 14px var(--sans); }
.field input::placeholder { color: var(--ink-3); }

/* The stations list. */
.list__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 28px 0 16px; }
.list__regions { display: flex; flex-wrap: wrap; gap: 6px; }
.list__regions .chip { text-decoration: none; }
.list__kinds { margin-top: 8px; }
.list__kinds .chip svg { width: 13px; height: 13px; margin: -2px 6px 0 -3px; }
.st__kind svg { width: 12px; height: 12px; margin: 0 6px 0 -1px; vertical-align: -1px; opacity: 0.75; }
.chip[aria-current] { background: rgb(255 255 255 / 0.1); border-color: rgb(255 255 255 / 0.28); color: var(--ink); }
.chip__count { margin-left: 7px; font: 11px var(--mono); color: var(--ink-3); }
.chip[aria-current] .chip__count { color: var(--ink-2); }
.list__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 12px 0; border-top: 1px solid var(--line); }
.list__count { margin: 0; font: 12px var(--mono); color: var(--ink-3); }
.list__sort { display: flex; align-items: center; gap: 10px; }
.list__empty { padding: 40px 0; color: var(--ink-2); text-align: center; }

.stations { width: 100%; border-collapse: collapse; }
.stations thead th {
  position: sticky; top: var(--bar-h); z-index: 1;
  padding: 10px 12px; background: var(--bg); border-bottom: 1px solid var(--line-2);
  font: 600 10px/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); text-align: left;
}
.stations thead th span { font: 10px var(--mono); letter-spacing: 0; text-transform: none; }
.stations th.num, .stations td.num { text-align: right; }
.stations__group th {
  padding: 22px 12px 8px; text-align: left;
  font: 600 11px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2);
}
.stations__group span { margin-left: 8px; font: 11px var(--mono); letter-spacing: 0; color: var(--ink-3); }
.st { border-top: 1px solid var(--line); cursor: pointer; }
.st[hidden], .stations[hidden] { display: none; }
.st:hover { background: rgb(255 255 255 / 0.035); }
.st > th, .st > td { padding: 10px 12px; vertical-align: middle; font-weight: 400; }
.st > th { position: relative; text-align: left; }
.st__link { display: grid; gap: 2px; color: inherit; text-decoration: none; }
.st__link::after { content: ""; position: absolute; inset: 0; }
.st__link:focus-visible { outline: none; }
.st:has(.st__link:focus-visible) { outline: 2px solid var(--swell-glow); outline-offset: -2px; }
.st__name { font-size: 14px; color: var(--ink); }
.st__id { font: 11px var(--mono); color: var(--ink-3); }
.st td b { font: 500 14px var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.st td small { display: block; font: 10.5px var(--mono); color: var(--ink-3); }
.st__none { color: var(--ink-3); }
.st__waves { display: grid; grid-template-columns: auto 80px; grid-template-rows: auto auto; column-gap: 12px; justify-content: end; align-items: center; }
.st__waves b { grid-column: 1; }
.st__waves small { grid-column: 1; }
.st__spark { grid-column: 2; grid-row: 1 / span 2; width: 80px; height: 22px; overflow: visible; }
.st__spark path { fill: none; stroke: var(--total); stroke-width: 1.2; opacity: 0.8; vector-effect: non-scaling-stroke; }
.st__age { white-space: nowrap; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.status--good i { background: var(--live); box-shadow: 0 0 8px var(--live); }
.status--warn i { background: var(--wind-glow); }
.status--off i { background: transparent; border: 1.5px solid var(--ink-3); }

/* --- landing page ----------------------------------------------------------- */

.stage--home { background: radial-gradient(ellipse at 50% 55%, #0a1424 0%, var(--bg) 65%); }
.stage--home .stage__left { width: min(390px, 32vw); }
.stage--home .stage__left > * { flex-shrink: 0; }
.stage--home .hud--id h1 { font-size: clamp(30px, 2.75vw, 42px); text-wrap: balance; }
.home__lede { margin: 0 0 12px; max-width: 38ch; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.home__count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 10px; }
.home__count b {
  font: 500 26px/1.15 var(--mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  color: #d9efff; filter: drop-shadow(0 0 14px rgb(89 189 245 / 0.35));
  background: linear-gradient(100deg, #f2f9ff 10%, #bfe3fb 60%, #93cdf3); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.home__count span { font-size: 12.5px; color: var(--ink-2); }
.field--hud { pointer-events: auto; min-width: 0; width: 100%; background: rgb(8 13 24 / 0.7); backdrop-filter: blur(8px); }
.home__regions { display: flex; flex-wrap: wrap; gap: 6px; pointer-events: auto; }
.home__regions .chip { text-decoration: none; background: rgb(8 13 24 / 0.6); }
.key--column i { width: 3px; height: 12px; border-radius: 1px; background: #bfe6ff; box-shadow: 0 0 6px #bfe6ff; vertical-align: -1px; margin-right: 10px; }
.key--ramp i { width: 22px; height: 4px; background: linear-gradient(90deg, #1d5a92, #dff4ff); box-shadow: none; }
.kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; pointer-events: auto; }
.kind {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 7px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgb(8 13 24 / 0.6); color: var(--ink); font: 11px/1.2 var(--mono); cursor: pointer;
}
.kind svg { width: 14px; height: 14px; flex: none; }
.kind .chip__count { margin-left: 0; }
.kind:hover { border-color: rgb(255 255 255 / 0.32); }
.kind[aria-pressed="false"] { color: var(--ink-3); border-style: dashed; background: none; }
.kind[aria-pressed="false"] svg { opacity: 0.35; }

/* Each kind of notable reading has its own colour, on its title and on the
   station leading it (and on a station's column on the globe while pointed
   at); the stations after it stay in plain ink. */
.notable--seas { --tint: 82 194 240; }
.notable--period { --tint: 181 141 255; }
.notable--wind { --tint: 241 159 69; }
.notable--pressure { --tint: 245 119 157; }
.notable--surge { --tint: 53 201 160; }
.notable--water { --tint: 214 201 107; }
.notable .rail__group h3 {
  margin: 0 0 2px; font: 600 10px/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase;
  color: rgb(var(--tint, 125 136 156));
}
.notable__item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 10px;
  margin: 0 -6px; padding: 4px 6px; border-radius: 6px; color: var(--ink); text-decoration: none;
}
.notable__item:hover, .notable__item:focus-visible { background: rgb(var(--tint, 255 255 255) / 0.09); }
.notable__name { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notable__value { text-align: right; white-space: nowrap; font: 12px var(--mono); }
.notable__value b { font-weight: 500; font-size: 13.5px; }
.notable__item:first-of-type .notable__name { color: color-mix(in oklab, rgb(var(--tint, 230 236 245)) 60%, white); }
.notable__item:first-of-type .notable__value b { color: color-mix(in oklab, rgb(var(--tint, 230 236 245)) 78%, white); }
.notable__value small { margin-left: 6px; font-size: 10.5px; color: var(--ink-3); }

.tip {
  position: absolute; left: 0; top: 0; z-index: 4; width: 250px; padding: 12px 14px; pointer-events: none;
  will-change: transform;
}
/* A card opened by a tap can itself be tapped. */
.tip--tap { pointer-events: auto; cursor: pointer; }
.tip--tap .tip__go { color: var(--ink-2); }
.tip__name { margin: 0; font-size: 14px; }
.tip__id { margin: 2px 0 8px; font: 11px var(--mono); color: var(--ink-3); }
.tip dl { margin: 0 0 8px; display: grid; gap: 3px; }
.tip dl div { display: grid; grid-template-columns: 56px 1fr; }
.tip dt { font-size: 12px; color: var(--ink-2); }
.tip dd { margin: 0; font: 12px var(--mono); }
.tip__go { margin: 0; font-size: 11.5px; color: var(--ink-3); }

.regions { padding-top: 48px; }
.regions__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.region {
  display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px;
  background: linear-gradient(180deg, var(--bg-2), rgb(10 17 29 / 0.4)); color: var(--ink); text-decoration: none;
}
.region:hover { border-color: var(--line-2); }
.region h3 { margin: 0; font: 500 16px/1.3 var(--sans); }
.region__count { margin: 2px 0 12px; font: 11.5px var(--mono); color: var(--ink-3); }
.region dl { margin: 0; display: grid; gap: 6px; }
.region dl div { display: grid; grid-template-columns: 110px 1fr; align-items: baseline; }
.region dt { font-size: 12.5px; color: var(--ink-2); }
.region dd { margin: 0; font: 12px var(--mono); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.region dd b { font-weight: 500; font-size: 14px; color: var(--ink); }

/* --- wave intelligence ------------------------------------------------------ */

.wi__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 24px; }
.wi__head .page__sub a { color: var(--ink-2); }
.wi__status { margin: 18px 0 0; font: 12.5px var(--mono); color: var(--ink-2); }
.wi__spine { position: sticky; top: var(--bar-h); z-index: 3; margin: 22px 0 18px; }
.wi__h { margin: 0 0 12px; font: 600 11px/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.wi__h span { font: 12px var(--mono); letter-spacing: 0; text-transform: none; color: var(--ink); }
.wi__systems { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.wi__system {
  position: relative;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px;
  background: linear-gradient(180deg, var(--bg-2), rgb(10 17 29 / 0.4));
}
/* A system's colour runs along the card's top edge as a hairline, straight
   and clear of the rounded corners, fading at its ends. */
.wi__system::before {
  content: ""; position: absolute; top: -1px; left: 14px; right: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c) 16%, var(--c) 84%, transparent);
}
.wi__system p { margin: 0; font: 12px/1.5 var(--mono); color: var(--ink-2); }
.wi__kind { display: flex; align-items: center; gap: 8px; font: 600 12.5px var(--sans) !important; color: var(--ink) !important; }
.wi__kind i, .wi__source i, .wi__barlabel i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; display: inline-block; }
.wi__trend { margin-left: auto; font: 10.5px var(--mono); color: var(--ink-3); }
.wi__hs { margin: 6px 0 4px !important; font-size: 13px !important; }
.wi__hs b { font: 300 30px/1 var(--sans); color: var(--ink); letter-spacing: -0.02em; }
.wi__muted { color: var(--ink-3) !important; font-size: 11.5px !important; }
.wi__crossing { margin: 12px 0 0; font-size: 13px; color: var(--ink-2); }
.wi__crossing .status { margin-right: 8px; color: var(--ink); }
.wi__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 14px; margin-top: 14px; }
.wi__card { margin: 0; }
.wi__wide { margin-top: 14px; }
.wi__card canvas { display: block; margin: 6px auto 4px; }
.wi__plot { position: relative; margin-bottom: 6px; }
.wi__plot .card__plot { cursor: crosshair; }
.wi__unit { position: absolute; top: -2px; right: 0; z-index: 1; }
.wi__subhead { margin-top: 18px; }
.card__plot .track { fill: none; stroke: var(--c); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.card__plot .track--minor { stroke-width: 1; opacity: 0.55; }
.card__plot .fit {
  fill: none; stroke: #fff; stroke-width: 2.5; stroke-dasharray: 1 6; stroke-linecap: round; vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px var(--c));
}
.wi__none { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-size: 12px; color: var(--ink-3); }
.card__plot .stack { fill: color-mix(in srgb, var(--c) 55%, transparent); stroke: var(--c); stroke-width: 1; vector-effect: non-scaling-stroke; }
.card__plot .crossband { fill: color-mix(in srgb, var(--wind-glow) 55%, transparent); }
.wi__sources { display: grid; gap: 10px; margin-top: 8px; }
.wi__source { padding-left: 0; }
.wi__source p { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.wi__source p:first-child { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.wi__bar { display: grid; grid-template-columns: 150px 1fr 40px; align-items: center; gap: 10px; margin: 8px 0; }
.wi__barlabel { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
.wi__bartrack { position: relative; height: 8px; border-radius: 4px; background: rgb(255 255 255 / 0.05); }
.wi__barfill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--c); }
.wi__mark { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--ink-3); }
.wi__barvalue { font: 12px var(--mono); text-align: right; }
.wi__scale { display: flex; justify-content: space-between; margin: 2px 50px 0 160px; font: 10px var(--mono); color: var(--ink-3); }
.wi__scale span:nth-child(2) { position: relative; left: -8%; }
.wi__method { margin-top: 28px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-2); font-size: 13.5px; }
.wi__method summary { cursor: pointer; color: var(--ink); }
.wi__method p { max-width: 80ch; }


/* Compare: up to four stations, each in its own colour. The stage is the
   globe with the stations' columns, the line-up rail and the timeline. */
.cmp__lede { margin: 0 0 12px; max-width: 36ch; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.stage--compare .hud__meta { color: var(--ink); }
.cmp__h { margin: 0 0 10px; font: 600 11px/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.cmp__h span { margin-left: 6px; font: 12px var(--mono); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.cmp__add { position: relative; pointer-events: auto; }
.cmp__add input:disabled { cursor: not-allowed; }
.cmp__results { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; max-height: 330px; overflow: auto; background: rgb(10 17 29 / 0.97); }
.cmp__results li { display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.cmp__results li[aria-selected="true"] { background: rgb(255 255 255 / 0.09); }
.cmp__results b { font: 600 12.5px var(--mono); }
.cmp__results span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.cmp__results small { font: 11px var(--mono); color: var(--ink-3); white-space: nowrap; }
.cmp__results .cmp__nomatch { cursor: default; color: var(--ink-3); }
.cmp__notice { margin: 0; font-size: 13px; color: var(--wind-glow); pointer-events: auto; }
.cmp__near { pointer-events: auto; }
.cmp__near:empty { display: none; }
.cmp__nearlist { display: flex; flex-wrap: wrap; gap: 6px; }
.cmp__nearlist .chip { gap: 8px; max-width: 100%; background: rgb(8 13 24 / 0.7); backdrop-filter: blur(8px); }
.cmp__nearlist .chip b { font: 600 12px var(--mono); color: var(--ink); }
.cmp__nearlist .chip span:not(.chip__count) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.key--arc i { background: linear-gradient(90deg, #20a39a, #9a7ae0); }
.cmp__ids i, .cmp__reads i, .cmp__ends i, .cmp__table i { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; }

/* The line-up: a card per station, then a place for each still to add. */
.cmp__rail { width: 360px; }
.cmp__stations { list-style: none; margin: 0; padding: 0; }
.cmp__stations[aria-busy] { opacity: 0.7; }
.cmp__card, .cmp__station { padding: 9px 0 6px; border-top: 1px solid var(--line); }
.cmp__cardhead, .cmp__station { display: flex; align-items: center; gap: 8px; }
.cmp__name { display: flex; align-items: baseline; gap: 9px; flex: 1; min-width: 0; text-decoration: none; }
.cmp__name i {
  align-self: center; flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 10px var(--c);
}
.cmp__name b { font: 600 13px var(--mono); }
.cmp__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-size: 13px; }
.cmp__name:hover span { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cmp__meta { margin: 2px 0 4px 18px; font: 11px/1.45 var(--mono); color: var(--ink-3); }
.cmp__meta span { display: block; color: var(--ink-2); }
.cmp__card .rail__row { margin-left: 12px; width: calc(100% - 6px); }
.cmp__card .rail__row--hero .rail__value b { font-size: 24px; }
.cmp__card .rail__line { opacity: 0.9; }
.cmp__empty { margin: 4px 0 6px 18px; font: 11px var(--mono); color: var(--ink-3); }
.cmp__remove {
  display: grid; place-items: center; flex: none; width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 6px; background: none; color: var(--ink-3); font-size: 16px; line-height: 1; cursor: pointer; text-decoration: none;
}
.cmp__remove:hover { background: rgb(255 255 255 / 0.08); color: var(--ink); }
.cmp__slot {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 8px 0 0; padding: 10px 12px;
  border: 1px dashed rgb(255 255 255 / 0.16); border-radius: 10px; background: none;
  font: 12.5px var(--sans); color: var(--ink-3); text-align: left; cursor: pointer;
}
.cmp__slot span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-2); font-size: 13px; line-height: 1; }
.cmp__slot:hover { border-color: rgb(255 255 255 / 0.3); color: var(--ink-2); }
.stage[data-count="4"] .cmp__slot { display: none; }
/* With nothing compared yet, the stage offers the examples and says only
   how to add a station. */
.stage--compare .spine:empty { display: none; }
.stage[data-count="0"] .hud__key > span:not(:last-child) { display: none; }
.cmp__starts { pointer-events: auto; }
.stage:not([data-count="0"]) .cmp__starts { display: none; }
.cmp__starts div { display: flex; flex-wrap: wrap; gap: 6px; }
.cmp__starts a { gap: 8px; text-decoration: none; background: rgb(8 13 24 / 0.7); backdrop-filter: blur(8px); }
.cmp__starts a i { width: 7px; height: 7px; margin: 0; border-radius: 50%; opacity: 1; }
.cmp__stations li + li .cmp__slot { margin-top: 6px; padding: 7px 12px; }

/* Each compared station's label, hung from the top of its column. */
.tag--cmp {
  display: inline-flex; align-items: baseline; gap: 6px; translate: -50% calc(-100% - 8px);
  padding: 3px 8px; border-radius: 6px;
  background: rgb(5 8 15 / 0.72); border: 1px solid rgb(255 255 255 / 0.12);
  color: var(--ink); text-shadow: none;
}
.tag--cmp b { display: inline-flex; align-items: center; gap: 6px; font: 600 11px var(--mono); }
.tag--cmp b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.tag--cmp .tag__v { font: 11px var(--mono); color: var(--ink-2); }
.tag--cmp .tag__v:empty { display: none; }
/* A label lifted clear of another keeps a leader down to its column. */
.tag--cmp.tag--lifted::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: calc(var(--lift) + 8px);
  background: linear-gradient(var(--c), transparent); opacity: 0.7;
}
.spine__plot .line--station { stroke: var(--c); stroke-width: 1.6; }
.key--station i { background: var(--c); box-shadow: 0 0 6px var(--c); }
.spine__metric { font: 11px var(--mono); color: var(--ink-2); }

/* Storms placed by their swell. */
.storm__meta, .storms__lede { margin: 6px 0 0; max-width: 36ch; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.hud--id .eyebrow a { color: inherit; text-decoration: none; pointer-events: auto; }
.hud--id .eyebrow a:hover { color: var(--ink); }
.storm__rail { width: 360px; }
.storm__list { list-style: none; margin: 0; padding: 0; }
.storm__list > li { border-top: 1px solid var(--line); }
.storm__member { padding: 9px 0 7px; transition: background 0.15s; }
.storm__name { display: flex; align-items: baseline; gap: 9px; text-decoration: none; }
.storm__name i { align-self: center; flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #6f7d93; }
.storm__member--reached .storm__name i { background: #8fcaf2; border-color: #8fcaf2; box-shadow: 0 0 8px #8fcaf2; }
.storm__member--on .storm__name i { background: #fff; border-color: #fff; }
.storm__name b { font: 600 13px var(--mono); }
.storm__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-size: 13px; }
.storm__name:hover span { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.storm__line { margin: 2px 0 0 17px; font: 11px/1.45 var(--mono); color: var(--ink-3); }
.storm__member--reached .storm__arrival { color: var(--ink-2); }
.storm__item { display: grid; gap: 2px; padding: 10px 6px; margin: 0 -6px; border-radius: 8px; text-decoration: none; }
.storm__item b { font: 500 14px var(--sans); color: var(--ink); }
.storm__item span { font: 11.5px var(--mono); color: var(--ink-2); }
.storm__item small { font: 11px var(--mono); color: var(--ink-3); }
.storm__item:hover, .storm__item--on { background: rgb(255 255 255 / 0.05); }
.storm__empty { margin: 8px 0; font-size: 13px; color: var(--ink-3); }
.wi__badges { margin: 10px 0 0; }
/* The badge to Storms, in the storms' own rose. */
.when__tag.when__tag--storms { color: #f7a3bd; border-color: rgb(245 119 157 / 0.5); }
.when__tag.when__tag--storms:hover { color: #ffd0de; border-color: rgb(245 119 157 / 0.85); background: rgb(245 119 157 / 0.1); }
.hud__meta a { color: var(--ink); pointer-events: auto; text-underline-offset: 3px; }
.storm__front { display: inline-flex; align-items: center; gap: 6px; margin-left: 14px; }
.storm__front i { width: 14px; height: 2px; border-radius: 1px; background: var(--c); box-shadow: 0 0 6px var(--c); }
.key--storm i { width: 9px; height: 9px; border-radius: 50%; background: #f5779d; box-shadow: 0 0 8px #f5779d; vertical-align: 0; }
.tag--storm {
  translate: -50% calc(-100% - 16px); padding: 3px 8px; border-radius: 6px;
  background: rgb(5 8 15 / 0.72); border: 1px solid rgb(245 119 157 / 0.45);
  font: 600 10px/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: #f7a3bd;
}

.cmp { padding-top: 8px; }
.cmp__deck { max-width: none; padding: 48px 0 0; }
.cmp__deck .card__head { margin-bottom: 6px; }
.cmp__deck .deck__cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 540px), 1fr)); }
.cmp__deck .card__plot { height: 132px; }
.cmp__deck .card__plot .enddot { stroke: var(--c); stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 4px var(--c)); }
.cmp__reads { display: flex; flex-wrap: wrap; gap: 4px 16px; min-height: 20px; margin: 0 0 10px; }
.cmp__reads span { display: inline-flex; align-items: center; gap: 7px; font: 500 16px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.cmp__reads i { width: 8px; height: 8px; }
.cmp__deck .card__plot, .cmp__deck .card__x { margin-right: 58px; }
.cmp__ends { position: absolute; top: 0; bottom: 0; left: calc(100% + 8px); width: 54px; pointer-events: none; }
.cmp__ends span { position: absolute; left: 0; translate: 0 -50%; display: inline-flex; align-items: center; gap: 4px; font: 10px var(--mono); color: var(--ink-2); white-space: nowrap; }
.cmp__ends i { width: 6px; height: 6px; }
.card__plot .halo { stroke: var(--bg-2); stroke-width: 4.5; stroke-linejoin: round; stroke-linecap: round; }
.cmp__readings { margin-top: 44px; }
.cmp__scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.cmp__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cmp__table th, .cmp__table td { padding: 8px 16px; border-bottom: 1px solid var(--line); text-align: left; }
.cmp__table td { font: 500 13px var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.cmp__table thead th { text-align: right; vertical-align: bottom; font: 600 12.5px var(--mono); white-space: nowrap; }
.cmp__table thead th small { display: block; max-width: 22ch; margin: 3px 0 0 auto; overflow: hidden; text-overflow: ellipsis; font: 400 11.5px var(--sans); color: var(--ink-3); }
.cmp__table tbody th { font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.cmp__table tbody th span { margin-left: 8px; font: 11px var(--mono); color: var(--ink-3); }
.cmp__table .grp th { padding-top: 18px; font: 600 10px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.cmp__report td { font-weight: 400; color: var(--ink-3); font-size: 11.5px; }
.cmp__table td.cmp__bar {
  background: linear-gradient(to left, color-mix(in srgb, var(--c) 22%, transparent) calc(var(--f) * 100%), transparent 0) no-repeat;
  background-size: calc(100% - 16px) 5px; background-position: right 8px bottom 3px;
}
.cmp__table tbody:last-child tr:last-child > * { border-bottom: 0; }
.cmp__examples { margin-top: 48px; }
.cmp__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 12px; }
.cmp__example {
  display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, var(--bg-2), rgb(10 17 29 / 0.4));
  text-decoration: none;
}
.cmp__example:hover { border-color: var(--line-2); background: linear-gradient(180deg, var(--bg-3), rgb(10 17 29 / 0.5)); }
.cmp__mini { display: block; width: 100%; height: 118px; margin-bottom: 6px; border-radius: 8px; background: radial-gradient(120% 100% at 50% 40%, rgb(20 34 56 / 0.5), transparent 75%), rgb(3 6 12 / 0.55); }
.cmp__example b { font: 600 14.5px var(--sans); }
.cmp__note { font-size: 12.5px; color: var(--ink-2); }
.cmp__ids { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: auto; padding-top: 4px; font: 11.5px var(--mono); color: var(--ink-2); }
.cmp__ids span { display: inline-flex; align-items: center; gap: 6px; }
.cmp__ids i { width: 7px; height: 7px; }
.cmp__example small { font: 11px var(--mono); color: var(--ink-3); }

/* The reference. */
.ref__lede { max-width: 70ch; margin: 14px 0 0; font-size: 15px; color: var(--ink-2); }
.ref__body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 48px; margin-top: 36px; align-items: start; }
.ref__toc { position: sticky; top: calc(var(--bar-h) + 19px); font-size: 13px; }
.ref__tochead { margin: 0 0 10px; font: 600 10.5px/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.ref__toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ref__toc ol ol { margin: 7px 0 2px 12px; gap: 5px; }
.ref__toc a { color: var(--ink-2); text-decoration: none; }
.ref__toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ref__main { max-width: 900px; min-width: 0; }
.ref__section { padding-bottom: 20px; scroll-margin-top: 80px; }
.ref__section + .ref__section { padding-top: 28px; border-top: 1px solid var(--line); }
.ref__section h2 { margin: 0 0 12px; font: 300 28px/1.15 var(--sans); letter-spacing: -0.015em; }
.ref__section > p, .ref__section li { max-width: 72ch; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
.ref__section a { color: var(--ink); }
.ref__group { margin-top: 28px; scroll-margin-top: 80px; }
.ref__group h3 { margin: 0; font: 600 11px/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.ref__source { margin: 4px 0 10px; font-size: 12.5px; color: var(--ink-3); }
.ref__list { margin: 0; border-top: 1px solid var(--line); }
.ref__entry { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 6px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
.ref__entry:target { background: linear-gradient(90deg, rgb(89 189 245 / 0.07), transparent 70%); }
.ref__entry dt { display: flex; flex-wrap: wrap; align-items: baseline; align-content: start; gap: 4px 10px; }
.ref__name { font: 600 14px/1.35 var(--sans); flex-basis: 100%; }
.ref__entry code { font: 600 11.5px var(--mono); color: var(--ink); padding: 2px 6px; border: 1px solid var(--line-2); border-radius: 5px; }
.ref__unit { font: 11.5px var(--mono); color: var(--ink-3); }
.ref__entry dd { margin: 0; }
.ref__entry dd p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.ref__entry .ref__note { margin-top: 6px; font-size: 13px; color: var(--ink-3); }
.ref__chart { display: inline-block; margin-top: 8px; font: 12px var(--mono); color: var(--swell-glow) !important; text-decoration: none; }
.ref__chart:hover { text-decoration: underline; text-underline-offset: 3px; }
.ref__formula { margin: 12px 0 !important; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; font: 14px/1.5 var(--mono) !important; color: var(--ink) !important; overflow-x: auto; white-space: nowrap; max-width: none !important; }
.ref__steps { margin: 16px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.ref__steps > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 6px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ref__steps dt { font: 600 14px/1.4 var(--sans); }
.ref__steps dd { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.ref__refs { margin-top: 18px; font-size: 13px; color: var(--ink-2); }
.ref__refs summary { cursor: pointer; color: var(--ink); }
.ref__refs ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.ref__refs li { font-size: 13px !important; }
.ref__facts { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
/* The data files: a sample query, and each table's columns, folded. */
.ref__code { margin: 14px 0 16px; padding: 12px 16px; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: rgb(3 6 12 / 0.5); font: 12.5px/1.6 var(--mono); color: var(--ink-2); }
.ref__table { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.ref__table:first-of-type { margin-top: 20px; }
.ref__table summary { cursor: pointer; display: flex; gap: 12px; align-items: baseline; }
.ref__table summary code { flex: none; min-width: 16ch; font: 500 13px var(--mono); color: var(--ink); }
.ref__table summary span { font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.ref__table .ref__units td:last-child { font: 13px/1.5 var(--sans); }
.ref__table .ref__units th code { font: 500 12.5px var(--mono); }
.ref__scroll { overflow-x: auto; margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; }
.ref__units { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ref__units th, .ref__units td { padding: 9px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.ref__units td { font: 13px var(--mono); color: var(--ink-2); }
.ref__units thead th { font: 600 10.5px/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.ref__units tbody th { font-weight: 500; }
.ref__units tr:last-child > * { border-bottom: 0; }

/* About. */
.about__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 32px 0 0; max-width: 1100px; }
.about__stats > div { padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, var(--bg-2), rgb(10 17 29 / 0.4)); }
.about__stats dt { font-size: 12.5px; color: var(--ink-3); }
.about__stats dd { margin: 6px 0 0; font: 300 34px/1 var(--sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.about__body { max-width: 1100px; margin-top: 36px; }
.about__row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 8px 32px; padding: 24px 0; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.about__row h2 { margin: 0; font: 600 11px/1.6 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.about__row p { max-width: 70ch; margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.about__row p:last-child { margin-bottom: 0; }
.about__row a { color: var(--ink); }
.about__pages { margin: 0; display: grid; gap: 10px; }
.about__pages > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 4px 20px; }
.about__pages dt { font: 600 14px/1.55 var(--sans); }
.about__pages dd { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.about__sent { color: var(--live) !important; }
.form { display: grid; gap: 12px; max-width: 640px; margin-top: 14px; }
.form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form label { display: grid; gap: 6px; }
.form label > span { font-size: 12.5px; color: var(--ink-3); }
.form input, .form textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px;
  background: rgb(255 255 255 / 0.03); color: var(--ink); font: 14px/1.45 var(--sans);
}
.form textarea { resize: vertical; min-height: 120px; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--swell-glow); outline-offset: 1px; border-color: transparent; }
.form__error { margin: 0 !important; color: var(--wind-glow) !important; }
.form__send {
  justify-self: start; padding: 9px 20px; border: 1px solid rgb(255 255 255 / 0.28); border-radius: 999px;
  background: rgb(255 255 255 / 0.1); color: var(--ink); font: 500 13.5px var(--sans); cursor: pointer;
}
.form__send:hover { background: rgb(255 255 255 / 0.16); }

/* Not found. */
.missing { max-width: 760px; padding-top: 72px; min-height: 60vh; }
.missing h1 { margin: 0 0 12px; font: 300 clamp(32px, 3.4vw, 46px)/1.05 var(--sans); letter-spacing: -0.02em; }
.missing__search { margin-top: 28px; max-width: 460px; }
.missing__search .field { width: 100%; }
.missing__links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 22px 0 0; font-size: 14px; }
.missing__links a { color: var(--ink-2); }
.missing__links a:hover { color: var(--ink); }

/* --- admin portal ------------------------------------------------------------ */

.admin__head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 18px; }
.admin__head h1 { margin: 4px 0 6px; font: 300 clamp(28px, 3vw, 40px)/1.1 var(--sans); }
.admin__tabs { display: flex; flex-wrap: wrap; gap: 4px 22px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.admin__tabs a { padding: 10px 0 11px; color: var(--ink-2); text-decoration: none; font-size: 13.5px; border-bottom: 2px solid transparent; }
.admin__tabs a:hover { color: var(--ink); }
.admin__tabs a[aria-current] { color: var(--ink); border-bottom-color: rgb(154 168 255); }
.admin__ranges { display: inline-flex; margin-bottom: 18px; }
.admin__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.admin__tile {
  display: block; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line-2);
  background: rgb(255 255 255 / 0.03); color: var(--ink); text-decoration: none;
}
a.admin__tile:hover { border-color: rgb(255 255 255 / 0.3); }
.admin__tile--good { border-color: rgb(111 216 164 / 0.35); }
.admin__tile--warn { border-color: rgb(242 164 68 / 0.45); }
.admin__tile--bad { border-color: rgb(245 119 157 / 0.55); background: rgb(245 119 157 / 0.06); }
.admin__label { margin: 0; font: 600 10px/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.admin__value { margin: 6px 0 2px; font: 500 22px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.admin__tile--good .admin__value { color: var(--live); }
.admin__tile--warn .admin__value { color: var(--wind-glow); }
.admin__tile--bad .admin__value { color: #f5779d; }
.admin__note { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.admin__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.admin__panel { margin: 0; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line-2); min-width: 0; }
.admin__panel--wide { grid-column: 1 / -1; }
.admin__chart { margin-bottom: 16px; }
.admin__panel h2 { margin: 0; font: 600 11px/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.admin__kv { margin: 10px 0 0; display: grid; gap: 6px; }
.admin__kv > div { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 12px; font-size: 13px; }
.admin__kv dt { color: var(--ink-3); }
.admin__kv dd { margin: 0; font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
.admin__items { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13px; }
.admin__items li { padding-left: 14px; position: relative; }
.admin__items li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.admin__items .tone--warn::before { background: var(--wind-glow); }
.admin__items .tone--bad::before { background: #f5779d; }
.admin__items a { color: inherit; }
.admin__scroll { margin-top: 10px; overflow-x: auto; max-height: 560px; overflow-y: auto; }
.admin__table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.admin__table th { position: sticky; top: 0; background: var(--bg-3); text-align: left; font: 600 10px/1.4 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding: 7px 10px; }
.admin__table td { padding: 6px 10px; border-top: 1px solid var(--line); vertical-align: top; }
.admin__table .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin__table a { color: var(--ink); }
.tone--good { color: var(--live); }
.tone--warn { color: var(--wind-glow); }
.tone--bad { color: #f5779d; }
.tone--muted { color: var(--ink-3); }
.admin__chart svg { display: block; width: 100%; height: auto; margin-top: 10px; }
.admin__grid-lines { fill: none; stroke: rgb(255 255 255 / 0.07); }
.admin__axis { font: 10px var(--mono); fill: var(--ink-3); }
.admin__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12px; color: var(--ink-2); }
.admin__legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.bar--browser { fill: #52c2f0; background: #52c2f0; }
.bar--search-bot { fill: #b58dff; background: #b58dff; }
.bar--ai-bot { fill: #f5779d; background: #f5779d; }
.bar--other-bot { fill: #f19f45; background: #f19f45; }
.bar--tool { fill: #d6c96b; background: #d6c96b; }
.bar--unknown { fill: #7d889c; background: #7d889c; }
.admin--login { max-width: 420px; }
.admin__login { display: grid; gap: 10px; margin-top: 18px; padding: 18px; border-radius: 12px; border: 1px solid var(--line-2); }
.admin__login label { font-size: 12.5px; color: var(--ink-2); }
.admin__login .field { width: 100%; padding: 10px 12px; font: 14px var(--mono); color: var(--ink); background: rgb(8 13 24 / 0.7); }
.admin__login button { justify-self: start; }
.admin__error { margin: 0; color: #f5779d; font-size: 13px; }

/* --- smaller screens ------------------------------------------------------ */

@media (max-height: 860px) and (min-width: 721px) {
  .hud__note { display: none; }
}
@media (max-height: 760px) and (min-width: 721px) {
  .locator { display: none; }
  .stage--home .hud__key { display: none; }
}
@media (max-height: 900px) and (min-width: 721px) {
  .stage--home .home__lede { display: none; }
}
/* Below 1000 px tall each notable reading lists its two leading stations,
   so the rail fits above the timeline without scrolling. */
@media (max-height: 1000px) and (min-width: 721px) {
  .notable .notable__item:nth-of-type(3) { display: none; }
}
/* Below 820 px, only the leading station (water keeps warmest and coldest). */
@media (max-height: 820px) and (min-width: 721px) {
  .notable .rail__group:not(.notable--water) .notable__item:nth-of-type(n+2) { display: none; }
}

@media (max-width: 1100px) and (min-width: 721px) {
  .spine__tools .ctl__label { display: none; }
}
/* Narrower than the bar's one line, the sections take a row of their own
   under the name, scrolling sideways on a phone, with room for a finger. */
@media (max-width: 1100px) {
  :root { --stage-top: 112px; --bar-h: 92px; }
  .bar {
    display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "brand . units" "nav nav nav";
    align-items: center; row-gap: 4px;
  }
  .bar__brand { grid-area: brand; }
  .bar__units { grid-area: units; margin-left: 0; }
  .bar__nav {
    grid-area: nav; gap: 4px 22px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    white-space: nowrap; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--gutter), #000 calc(100% - 28px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--gutter), #000 calc(100% - 28px), transparent);
  }
  .bar__nav::-webkit-scrollbar { display: none; }
  .bar__nav a { padding: 8px 0; font-size: 14px; }
  .bar__nav a[aria-current] { box-shadow: inset 0 -1.5px 0 var(--ink-2); }
}

/* A station without spectra has no sea to draw: on a wider screen its stage
   closes up round what it has (title and note, map, rail) rather than
   leaving an empty scene with the note floating over the panels. */
@media (min-width: 721px) {
  .stage[data-state="nospectra"] {
    height: auto; min-height: 0; max-height: none; overflow: visible;
    display: grid; grid-template-columns: minmax(0, 1fr) 344px; align-items: start; gap: 18px 32px;
    padding: var(--stage-top) var(--gutter) 40px;
  }
  .stage[data-state="nospectra"] :is(.stage__scene, .stage__labels, .spine, .hud--legend) { display: none; }
  .stage[data-state="nospectra"] .stage__left { display: contents; }
  .stage[data-state="nospectra"] .hud--id { grid-column: 1; grid-row: 1; }
  .stage[data-state="nospectra"] .stage__message { position: static; translate: none; width: auto; max-width: 460px; grid-column: 1; grid-row: 2; }
  .stage[data-state="nospectra"] .stage__message p { text-align: left; }
  .stage[data-state="nospectra"] .locator { grid-column: 1; grid-row: 3; width: min(100%, 460px); }
  .stage[data-state="nospectra"] .hud--rail { position: static; grid-column: 2; grid-row: 1 / span 3; width: auto; max-height: none; }
}
@media (min-width: 1400px) {
  .stage[data-state="nospectra"] { grid-template-columns: minmax(0, 1fr) minmax(0, 460px) 344px; }
  .stage[data-state="nospectra"] .locator { grid-column: 2; grid-row: 1 / span 3; }
  .stage[data-state="nospectra"] .hud--rail { grid-column: 3; }
}

@media (max-width: 720px) {
  :root { --gutter: 16px; }
  .page { padding-top: 28px; }
  .stations thead { display: none; }
  .stations, .stations tbody, .st, .stations__group, .stations__group th { display: block; }
  .st { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; padding: 12px 4px; }
  .st > th { grid-column: 1 / -1; padding: 0; }
  .st > td { padding: 0; text-align: left !important; }
  .st > td::before { content: attr(data-label); display: block; font: 600 9.5px/1.4 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
  .st__waves { display: block; }
  .st__spark { display: none; }
  .stations__group th { padding-left: 4px; }
  :root { --stage-top: 104px; --bar-h: 88px; }
  .bar { padding-top: 10px; padding-bottom: 6px; }
  .stage { height: auto; min-height: 0; max-height: none; overflow: visible; display: flex; flex-direction: column; background: var(--bg); }
  .stage__scene { position: relative; height: 64svh; min-height: 380px; order: 0; }
  .stage__labels { bottom: auto; height: max(64svh, 380px); }
  .hud { position: static; }
  .hud--id { position: absolute; top: var(--stage-top); left: var(--gutter); right: var(--gutter); max-width: none; }
  .hud--id h1 { font-size: 26px; }
  .hud__meta { margin-bottom: 8px; }
  .stage--home .home__lede { display: none; }
  .home__count b { font-size: 22px; }
  .hud__note { display: none; }
  .stage__left { display: contents; }
  .stage__left .hud--id { position: absolute; top: var(--stage-top); left: var(--gutter); right: var(--gutter); }
  .field--hud, .home__regions { margin: 12px var(--gutter) 0; width: auto; }
  .field--hud { order: 1; }
  .home__regions { order: 1; }
  .list__sort { max-width: 100%; min-width: 0; }
  .list__sort .seg { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .hud--rail, .spine, .locator, .hud--legend { width: auto; max-height: none; margin: 12px var(--gutter) 0; }
  .spine { position: relative; left: auto; right: auto; bottom: auto; order: 1; }
  .spine__head { flex-wrap: wrap; }
  .spine__tools { margin-left: 0; justify-content: flex-start; }
  .hud--legend { order: 2; }
  .hud--rail { order: 3; }
  .locator { order: 4; }
  .stage[data-state="nospectra"], .stage[data-state="tide"] { min-height: 0; }
  .stage[data-state="tide"] .stage__left .hud--id,
  .stage[data-state="nospectra"] .stage__left .hud--id { position: static; order: -1; padding: var(--stage-top) var(--gutter) 0; }
  .stage[data-state="tide"] .stage__scene { height: 400px; min-height: 0; }
  .stage[data-state="nospectra"] :is(.stage__scene, .stage__labels) { display: none; }
  .stage[data-state="nospectra"] .stage__message { position: static; translate: none; width: auto; margin: 4px var(--gutter) 0; order: 0; }
  .stage[data-state="nospectra"] .stage__message p { text-align: left; }
  /* A storm's title and figures read above its globe, not over it; the
     list below names every buoy, so the globe keeps only the storm's label. */
  .stage--storm .stage__left .hud--id, .stage--storms .stage__left .hud--id { position: static; order: -1; padding: var(--stage-top) var(--gutter) 0; }
  .stage--storm .tag { display: none; }
  .ctl { flex-wrap: wrap; }
  .tag--degree { display: none; }
  .tag--mark span, .tag--drift span { display: none; }
  .deck { padding-top: 36px; }
  .deck__head { flex-direction: column; align-items: start; }
  .foot { flex-direction: column; }
  .stage--compare .cmp__lede { display: none; }
  .cmp__rail { width: auto; }
  .card__head { flex-wrap: wrap; row-gap: 6px; }
  .deck__chips:has(.pick__group) { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 18px; }
  .pick__group, .pick__group:first-child { padding: 0; border: 0; }
  .pick__group--sea { grid-column: 1 / -1; }
  .pick__grid { grid-template-columns: auto repeat(3, 64px); }
  .pick__all { grid-column: 1 / -1; justify-self: start; margin-left: 0; }
  .card__head > div { flex: 1 1 100%; }
  .ref__body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .about__stats { grid-template-columns: 1fr 1fr; }
  .about__row, .about__pages > div, .form__pair, .ref__entry, .ref__steps > div { grid-template-columns: minmax(0, 1fr); }
  .ref__toc { position: static; }
  .card__x span:nth-child(even) { display: none; }
  .cmp__deck { padding-top: 36px; }
  .cmp__table th, .cmp__table td { padding: 8px 10px; }
  .admin__grid { grid-template-columns: minmax(0, 1fr); }
  .admin__head { flex-direction: column; align-items: start; }
}
@media (max-width: 1100px) {
  .deck__band { grid-template-columns: minmax(0, 1fr); }
  .deck__band > [data-key="spectrogram"] { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .stage[data-state="loading"] .hud__when { animation: none; }
}

/* --- washed pages ------------------------------------------------------------
   Query and the Wave Intelligence index sit on a washed field, sectioned
   into panels, with a spec sheet of what the page holds beside the title. */

.wash {
  --panel: linear-gradient(180deg, rgb(19 29 47 / 0.62), rgb(11 18 31 / 0.62));
  --panel-line: rgb(170 190 225 / 0.11);
  background:
    radial-gradient(1100px 520px at 82% -8%, rgb(43 149 214 / 0.10), transparent 70%),
    radial-gradient(900px 560px at -6% 38%, rgb(176 149 255 / 0.06), transparent 70%),
    radial-gradient(1200px 700px at 60% 110%, rgb(32 163 154 / 0.05), transparent 70%),
    linear-gradient(180deg, #080d18 0%, #070b15 55%, var(--bg) 100%);
}
.wash__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 28px 48px; align-items: end; }
.wash__head h1 { margin: 0 0 12px; font: 300 clamp(32px, 3.4vw, 46px)/1.05 var(--sans); letter-spacing: -0.02em; }
.wash__lede { max-width: 66ch; margin: 0; font-size: 14.5px; line-height: 1.65; color: #aeb9cc; }
.wash__lede a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: rgb(143 202 242 / 0.5); }
.spec {
  margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  border: 1px solid var(--panel-line); border-radius: 14px; background: var(--panel); overflow: hidden;
}
.spec > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 16px; border-bottom: 1px solid rgb(170 190 225 / 0.07); }
.spec > div:nth-child(odd) { border-right: 1px solid rgb(170 190 225 / 0.07); }
.spec > div:nth-last-child(-n + 2) { border-bottom: 0; }
.spec dt { font: 600 10px/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: #7f8ba1; white-space: nowrap; }
.spec dd { margin: 0; font: 12px/1.35 var(--mono); color: #d3dbe8; text-align: right; }
.spec a { color: #d3dbe8; text-underline-offset: 3px; text-decoration-color: rgb(211 219 232 / 0.35); }
.panel { position: relative; border: 1px solid var(--panel-line); border-radius: 16px; background: var(--panel); }
.panel__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 14px 18px 0; }
.panel__h { margin: 0; font: 600 10.5px/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: #8c98ad; }
.panel__hint { margin: 0; font-size: 12px; color: #6f7b90; }
@media (max-width: 1100px) {
  .wash__head { grid-template-columns: minmax(0, 1fr); }
  .spec { max-width: 620px; }
}
@media (max-width: 720px) {
  /* The spec in two columns, each label above its value. */
  .spec > div { display: block; padding: 8px 12px; }
  .spec dd { margin-top: 3px; text-align: left; font-size: 11.5px; }
}

/* --- wave intelligence index ------------------------------------------------
   The network's latest analysis: the spec sheet beside the title, then one
   panel of stations a page at a time, each with its systems drawn as a small
   wave rose (petals from where each system comes, north up). */

.wii__list { margin-top: 30px; scroll-margin-top: calc(var(--bar-h) + 12px); }
.wii__bar { align-items: center; justify-content: space-between; gap: 12px 18px; padding-top: 16px; }
.wii__views > a { display: inline-flex; align-items: baseline; }
.wii__views .chip__count { margin-left: 6px; }
.wii__views > [aria-current] .chip__count { color: var(--ink-2); }
.wii__search { flex: 0 1 340px; }
.wii__search .field { width: 100%; }
.wii__note { max-width: 86ch; margin: 12px 18px 0; font-size: 13px; line-height: 1.55; color: #8f9bb0; }
.wii__regions { margin: 14px 18px 0; }
.wii__key {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 16px 18px 0; padding-top: 12px;
  border-top: 1px solid rgb(170 190 225 / 0.07); font-size: 12px; line-height: 1.5; color: #7f8ba1;
}
.wii__key svg { width: 26px; height: 26px; flex: none; }
.wii__key > span:nth-child(2) { flex: 1 1 420px; max-width: 80ch; }
.wii__keys { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; }
.key--stormdot i { width: 7px; height: 7px; border-radius: 50%; background: #f7a3bd; box-shadow: none; vertical-align: 0; }

.wii__table { width: calc(100% - 12px); margin: 4px 6px 0; }
.wii .stations thead th { position: static; background: none; }
.wii .st:hover { background: rgb(255 255 255 / 0.03); }
.wii .st > th, .wii .st > td { padding: 9px 12px; }
.wii__station { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 1px; align-items: center; }
.wii__station .st__name, .wii__station .st__id { grid-column: 2; }
.wii__station .st__name { align-self: end; }
.wii__station .st__id { align-self: start; }
.wii__glyph { grid-row: 1 / span 2; width: 44px; height: 44px; overflow: visible; }
.wii__ring { fill: rgb(255 255 255 / 0.015); stroke: rgb(201 211 226 / 0.2); stroke-width: 1; }
.wii__glyph--stale .wii__ring { stroke-dasharray: 2 3; }
.wii__north { stroke: rgb(201 211 226 / 0.55); stroke-width: 1.2; }
.wii__petal { stroke-width: 1; stroke-linejoin: round; }
.wii__petal--swell { fill: rgb(89 189 245 / 0.34); stroke: #7fcdf8; }
.wii__petal--wind { fill: rgb(242 164 68 / 0.34); stroke: #f5b561; }
.wii__stormdot { fill: #f7a3bd; stroke: #0a111e; stroke-width: 1.2; }
.wii__table td { font: 12.5px var(--mono); color: var(--ink-2); }
.wii__table td small { display: block; margin-top: 3px; font: 11px var(--mono); color: var(--ink-3); }
.wii__big { font: 500 13.5px var(--sans); color: var(--ink); }
.wii__cross { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); }
.wii__cross svg { width: 16px; height: 16px; flex: none; overflow: visible; }
.wii__cross path { stroke: #c9b8ff; stroke-width: 1.5; stroke-linecap: round; transform-origin: 8px 12px; transform: rotate(calc(var(--a) / 2)); }
.wii__cross circle { fill: #c9b8ff; }
.wii__cross path + path { transform: rotate(calc(var(--a) / -2)); }
.wii__systems { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.wii__sys { display: grid; grid-template-columns: 7px 88px 7ch 4.5ch 4ch auto; align-items: baseline; column-gap: 8px; white-space: nowrap; }
.wii__sys i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); transform: translateY(-1px); }
.wii__sys--swell { --c: var(--swell-glow); }
.wii__sys--wind { --c: var(--wind-glow); }
.wii__kind { color: var(--ink); font-family: var(--sans); }
.wii__table .wii__sys small { display: inline; margin: 0; }
.wii__more { padding-left: 15px; color: var(--ink-3); font-size: 11px; }
.wii__table .wii__storm { margin: 0; }
.wii__crestcol { width: 42%; }
.wii__crest { display: grid; grid-template-columns: 1fr 40px; align-items: center; gap: 10px; --c: var(--swell-glow); }
.wii__crest b { text-align: right; font-weight: 500; color: var(--ink); }
.wii__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px;
  padding: 14px 18px 16px; border-top: 1px solid rgb(170 190 225 / 0.07);
}

/* Pages of a list: previous, the pages near the one shown, next. */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pager[hidden] { display: none; }
.pager > * { min-width: 30px; padding: 7px 9px; border-radius: 999px; font: 12px/1 var(--mono); text-align: center; color: var(--ink-2); text-decoration: none; }
.pager > a:hover { color: var(--ink); background: rgb(255 255 255 / 0.05); }
.pager > a[aria-current] { color: var(--ink); background: rgb(255 255 255 / 0.12); }
.pager > .pager__step { padding: 7px 12px; font: 500 12px/1 var(--sans); }
.pager > [aria-disabled] { color: var(--ink-3); opacity: 0.45; }
.pager > .pager__gap { min-width: 0; padding: 7px 2px; color: var(--ink-3); }

@media (max-width: 720px) {
  .wii__bar { padding: 12px 12px 0; }
  .wii__views { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .wii__search { flex: 1 1 100%; }
  .wii__note, .wii__regions, .wii__key { margin-left: 12px; margin-right: 12px; }
  /* The regions scroll sideways in a row rather than stacking. */
  .wii__regions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .wii__regions .chip { flex: none; }
  .wii__table { width: calc(100% - 8px); margin: 4px 4px 0; }
  .wii .st { grid-template-columns: minmax(0, 1fr); padding: 12px 8px; }
  .wii .st > th, .wii .st > td { padding: 0; }
  .wii .st > td:empty { display: none; }
  .wii__crestcol { width: auto; }
  .wii__foot { padding: 12px; }
  /* Previous, the page shown, and next. */
  .pager > a:not([aria-current], .pager__step), .pager > .pager__gap { display: none; }
}

/* --- query -------------------------------------------------------------------
   The spec beside the title, the tables in a panel at the left, the input
   (examples, editor, actions) as one lit panel, the result in its own.
   Each table has a washed colour of its own: its dot and name in the rail,
   the examples that read it, and its name in the editor. */

.query {
  --t-stations: #c9d3e2;
  --t-observations: #8fc4f2;
  --t-wave_summaries: #b8a6f4;
  --t-water_levels: #e3c08a;
  --t-tide_predictions: #efd8ae;
  --t-water_quality: #b3d98c;
  --t-currents: #8ee0b8;
  --t-daily: #f0a98f;
  --t-storms: #f59bb5;
  --t-storm_members: #f5c3d3;
  --t-latest: #e6dc9a;
}
[data-table="stations"] { --t: var(--t-stations); }
[data-table="observations"] { --t: var(--t-observations); }
[data-table="wave_summaries"] { --t: var(--t-wave_summaries); }
[data-table="water_levels"] { --t: var(--t-water_levels); }
[data-table="tide_predictions"] { --t: var(--t-tide_predictions); }
[data-table="water_quality"] { --t: var(--t-water_quality); }
[data-table="currents"] { --t: var(--t-currents); }
[data-table="daily"] { --t: var(--t-daily); }
[data-table="storms"] { --t: var(--t-storms); }
[data-table="storm_members"] { --t: var(--t-storm_members); }
[data-table="latest"] { --t: var(--t-latest); }

/* The head: the title and what it is, and the spec sheet beside them. */

.q__body { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 22px; margin-top: 30px; align-items: start; }
.q__main { grid-column: 2; grid-row: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }

/* The input: lit a little more than the rest, with a hairline of light
   along its top, clear of the corners. */
.q__input {
  background: linear-gradient(180deg, rgb(24 39 63 / 0.78), rgb(13 23 40 / 0.78));
  border-color: rgb(143 202 242 / 0.2);
  box-shadow: 0 24px 70px -40px rgb(43 149 214 / 0.55);
}
.q__input::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(143 202 242 / 0.75) 30%, rgb(184 166 244 / 0.6) 70%, transparent);
}
.q__examples { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px 14px; }
.q__example {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px;
  border: 1px solid rgb(170 190 225 / 0.12); border-radius: 999px;
  background: color-mix(in srgb, var(--t, #c9d3e2) 5%, rgb(255 255 255 / 0.02));
  font: 500 12.5px/1.2 var(--sans); color: #b9c4d6; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.q__example i { width: 6px; height: 6px; border-radius: 50%; background: var(--t, #c9d3e2); flex: none; opacity: 0.9; }
.q__example:hover { color: var(--ink); border-color: color-mix(in srgb, var(--t, #c9d3e2) 45%, transparent); background: color-mix(in srgb, var(--t, #c9d3e2) 10%, transparent); }

/* The editor: a well within the input panel. The textarea lies over a
   highlighted copy of its text: same font, same box. */
.q__editor { position: relative; margin: 0 18px; border: 1px solid rgb(170 190 225 / 0.12); border-radius: 12px; background: linear-gradient(180deg, rgb(9 16 30 / 0.78), rgb(7 13 25 / 0.78)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03); overflow: hidden; }
.q__editor:focus-within { border-color: rgb(143 202 242 / 0.45); }
.q__hl, .q__sql {
  margin: 0; padding: 14px 16px; border: 0;
  font: 13.5px/1.65 var(--mono); letter-spacing: 0; tab-size: 2; white-space: pre; word-wrap: normal;
}
.q__hl { position: absolute; inset: 0; overflow: hidden; pointer-events: none; color: #dfe6f0; }
.q__sql {
  position: relative; display: block; width: 100%; min-height: 12em; resize: none; overflow: auto;
  background: transparent; color: transparent; caret-color: var(--ink); outline: none;
}
.q__sql::selection { background: rgb(89 189 245 / 0.28); color: transparent; }
.q__hl .k { color: #86b9e0; }
.q__hl .f { color: #c3b1f5; }
.q__hl .s { color: #ecc58f; }
.q__hl .n { color: #a6e3c6; }
.q__hl .c { color: #6c788d; font-style: italic; }
.q__hl .t { color: var(--t-latest); }
.q__hl .t--stations { color: var(--t-stations); }
.q__hl .t--observations { color: var(--t-observations); }
.q__hl .t--wave_summaries { color: var(--t-wave_summaries); }
.q__hl .t--water_levels { color: var(--t-water_levels); }
.q__hl .t--tide_predictions { color: var(--t-tide_predictions); }
.q__hl .t--water_quality { color: var(--t-water_quality); }
.q__hl .t--currents { color: var(--t-currents); }
.q__hl .t--daily { color: var(--t-daily); }
.q__hl .t--storms { color: var(--t-storms); }
.q__hl .t--storm_members { color: var(--t-storm_members); }

.q__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 18px 14px; }
.q__run {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px;
  border: 1px solid rgb(143 202 242 / 0.55); border-radius: 999px;
  background: linear-gradient(180deg, rgb(89 189 245 / 0.22), rgb(89 189 245 / 0.1));
  font: 600 13px/1 var(--sans); color: #e3f3ff; cursor: pointer;
}
.q__run:hover:not(:disabled) { background: linear-gradient(180deg, rgb(89 189 245 / 0.3), rgb(89 189 245 / 0.16)); }
.q__run:disabled { opacity: 0.45; cursor: default; }
.q__run kbd { font: 11px var(--mono); color: rgb(227 243 255 / 0.6); }
.q__status { flex: 1 1 240px; margin: 0; font: 12.5px/1.45 var(--mono); color: #9aa6ba; }
.q__status[data-tone="bad"] { color: #f0a9a9; }
.q__status[data-tone="good"] { color: #b9d8c8; }
.query[data-state="loading"] .q__status, .query[data-state="running"] .q__status { animation: breathe 1.6s ease-in-out infinite; }
.q__tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.q__history { position: relative; }
.q__history summary { list-style: none; display: inline-block; }
.q__history summary::-webkit-details-marker { display: none; }
.q__past {
  position: absolute; z-index: 5; right: 0; top: calc(100% + 6px); width: min(560px, 86vw); max-height: 360px; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none; border: 1px solid var(--panel-line); border-radius: 12px;
  background: linear-gradient(180deg, rgb(22 33 52 / 0.97), rgb(12 19 32 / 0.97)); box-shadow: 0 20px 50px -20px rgb(0 0 0 / 0.8);
}
.q__past button {
  display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; text-align: left;
  font: 12px/1.4 var(--mono); color: #aeb9cc; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.q__past button:hover { background: rgb(255 255 255 / 0.06); color: var(--ink); }

/* The result. */
.q__rhead { padding-bottom: 12px; border-bottom: 1px solid rgb(170 190 225 / 0.08); align-items: center; }
.q__count { margin: 0; font: 12.5px var(--mono); color: #d3dbe8; }
.q__downloads { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.q__downloads .panel__h { margin: 0 4px 0 0; }
.q__table { max-height: 640px; overflow: auto; border-radius: 0 0 16px 16px; }
.q__table table { width: max-content; min-width: 100%; border-collapse: collapse; font: 12.5px/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.q__table th {
  position: sticky; top: 0; z-index: 1; padding: 10px 16px; text-align: left; white-space: nowrap;
  background: #111b2c; border-bottom: 1px solid rgb(170 190 225 / 0.12); font: 600 11.5px var(--mono); color: #dfe6f0;
}
.q__table td { padding: 7px 16px; border-bottom: 1px solid rgb(170 190 225 / 0.05); color: #b3bfd1; white-space: nowrap; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; }
.q__table tbody tr:nth-child(even) td { background: rgb(255 255 255 / 0.018); }
.q__table tbody tr:hover td { background: rgb(143 202 242 / 0.06); color: #dfe6f0; }
.q__table tr:last-child td { border-bottom: 0; }
.q__table .num { text-align: right; }
.q__null { color: #6c788d; }
.q__table td a { color: #d3dbe8; text-underline-offset: 3px; text-decoration-color: rgb(211 219 232 / 0.35); }

.q__chart { display: grid; gap: 14px; padding: 16px 18px 18px; }
.q__chartnote, .q__empty { margin: 0; font-size: 12.5px; color: #7f8ba1; }
.q__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font: 12px var(--mono); color: #b3bfd1; }
.q__more { color: #7f8ba1; }
.q__card { background: rgb(3 7 14 / 0.4); border-color: rgb(170 190 225 / 0.08); }
.q__card .card__plot { height: 120px; }
.q__bars { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.q__bars li { display: grid; grid-template-columns: minmax(80px, 26ch) minmax(0, 1fr) 7ch; align-items: center; gap: 12px; font: 12px var(--mono); }
.q__bar-label { color: #b3bfd1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q__bar-track { position: relative; height: 12px; border-radius: 2px; background: rgb(255 255 255 / 0.025); }
.q__bar { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: linear-gradient(90deg, rgb(143 196 242 / 0.55), rgb(143 196 242 / 0.85)); }
.q__bar--neg { background: rgb(170 180 200 / 0.45); }
.q__bar-value { text-align: right; color: #dfe6f0; }

/* The tables. */
.q__rail { grid-column: 1; grid-row: 1; position: sticky; top: calc(var(--bar-h) + 16px); max-height: calc(100vh - var(--bar-h) - 32px); overflow-y: auto; padding-bottom: 8px; }
.q__rail .panel__head { padding-bottom: 10px; }
.q__tdef { margin: 0 8px; border-radius: 10px; transition: background 0.15s; }
.q__tdef + .q__tdef { margin-top: 2px; }
.q__tdef[open] { background: color-mix(in srgb, var(--t) 7%, transparent); }
.q__tdef summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; }
.q__tdef summary::-webkit-details-marker { display: none; }
.q__tdef summary:hover { background: color-mix(in srgb, var(--t) 6%, transparent); }
.q__tdef summary i { width: 7px; height: 7px; border-radius: 50%; background: var(--t); flex: none; box-shadow: 0 0 8px color-mix(in srgb, var(--t) 60%, transparent); }
.q__tdef summary code { flex: 1; font: 500 13px var(--mono); color: var(--t); }
.q__rows { font: 11px var(--mono); color: #7f8ba1; }
.q__about { margin: 0 10px 8px 27px; font-size: 12.5px; line-height: 1.5; color: #95a1b5; }
.q__about code { font: 12px var(--mono); color: #c3cddc; }
.q__cols { margin: 0 10px 8px 27px; padding: 0; list-style: none; display: grid; gap: 1px; }
.q__cols li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.q__col { padding: 2px 0; border: 0; background: none; font: 12px var(--mono); color: #bcc7d8; cursor: pointer; text-align: left; }
.q__col:hover { color: var(--t); text-decoration: underline; text-underline-offset: 3px; }
.q__unit { font: 11px var(--mono); color: #7f8ba1; white-space: nowrap; }
.q__noscript { color: var(--ink-2); }

/* No keyboard shortcut to show on a touch screen. */
@media (hover: none) {
  .q__run kbd { display: none; }
}
@media (max-width: 1100px) {
}
@media (max-width: 900px) {
  .q__body { grid-template-columns: minmax(0, 1fr); }
  .q__main, .q__rail { grid-column: 1; grid-row: auto; }
  .q__rail { position: static; max-height: none; overflow: visible; }
  .q__tools { margin-left: 0; }
  .q__downloads { margin-left: 0; }
  .q__bars li { grid-template-columns: minmax(70px, 16ch) minmax(0, 1fr) 6ch; }
}
@media (max-width: 720px) {
  /* The examples scroll sideways in a row rather than stacking. */
  .q__examples { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .q__example { flex: none; }
  .q__editor { margin: 0 12px; }
  .q__hl, .q__sql { font-size: 13px; padding: 12px; }
}