/* Flex Weather Tracker
   A dispatch-board look: the map first, station codes set like a departure board, statuses in plain words, hairlines
   rather than boxes, one highlight colour for the search, status colours only where they mean something. Type is
   Archivo (one variable font: every weight and width) with JetBrains Mono for codes and times, served by this server. */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("vendor/archivo-latin-wdth-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("vendor/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("vendor/jetbrains-mono-latin-600-normal.woff2") format("woff2"); }

:root {
  --ground: #F3F4F5;
  --surface: #FFFFFF;
  --surface-2: #F5F6F7;
  --line: #E1E4E8;
  --line-2: #C5CBD2;
  --ink: #15181C;
  --muted: #59606A;
  --accent: #1E4E8C;
  --hi: #C27C00;
  --bar: #0F1214;
  --flex-blue: #0578FF;   /* the Amazon Flex app's blue, for the wordmark: drivers place the site at a glance */
  --bar-ink: #ECEAE5;
  --bar-muted: #A0A6AB;
  --bar-line: #262C30;
  --bar-line-2: #3A4146;
  --find-bg: #181D20;
  --open: #1A7A3E;
  --open-bg: #E3F3E8;
  --caution: #8F5600;
  --caution-bg: #FAEFD8;
  --closed: #B3261E;
  --closed-bg: #FCE6E3;
  --closed-fill: #B3261E;
  --unknown: #6B7380;
  --unknown-bg: #ECEEF1;
  --land: #E6E9EC;
  --map-bg: #F7F8F9;
  --border-line: #FFFFFF;
  --sea: transparent;
  --overlay: rgba(255, 255, 255, .95);
  --tip-bg: #15181C;
  --tip-ink: #F2F3F5;
  --scrim: rgba(16, 19, 24, .48);
  --focus: #1E4E8C;
  --strike: #5A3FD1;
  --tornado: #C2410C;
  --body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --radius: 8px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0B0D0E; --surface: #121617; --surface-2: #191E20; --line: #23282B; --line-2: #3A4146;
    --ink: #E8E6E1; --muted: #9AA0A5; --accent: #8DB5E8; --hi: #F5B700;
    --bar: #0B0D0E; --bar-ink: #E8E6E1; --bar-muted: #9AA0A5; --bar-line: #23282B; --bar-line-2: #3A4146; --find-bg: #15191B;
    --open: #4CC274; --open-bg: rgba(76, 194, 116, .14); --caution: #F5B700; --caution-bg: rgba(245, 183, 0, .13);
    --closed: #FF6B5F; --closed-bg: rgba(255, 91, 79, .14); --closed-fill: #C4392D;
    --unknown: #8C9196; --unknown-bg: rgba(140, 145, 150, .14);
    --land: #1A1F22; --map-bg: #0E1214; --border-line: #0B0D0E; --overlay: rgba(18, 22, 23, .94);
    --tip-bg: #E8E6E1; --tip-ink: #0B0D0E; --scrim: rgba(0, 0, 0, .62);
    --focus: #8DB5E8; --strike: #B49CFF; --tornado: #F3904F;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0B0D0E; --surface: #121617; --surface-2: #191E20; --line: #23282B; --line-2: #3A4146;
  --ink: #E8E6E1; --muted: #9AA0A5; --accent: #8DB5E8; --hi: #F5B700;
  --bar: #0B0D0E; --bar-ink: #E8E6E1; --bar-muted: #9AA0A5; --bar-line: #23282B; --bar-line-2: #3A4146; --find-bg: #15191B;
  --open: #4CC274; --open-bg: rgba(76, 194, 116, .14); --caution: #F5B700; --caution-bg: rgba(245, 183, 0, .13);
  --closed: #FF6B5F; --closed-bg: rgba(255, 91, 79, .14); --closed-fill: #C4392D;
  --unknown: #8C9196; --unknown-bg: rgba(140, 145, 150, .14);
  --land: #1A1F22; --map-bg: #0E1214; --border-line: #0B0D0E; --overlay: rgba(18, 22, 23, .94);
  --tip-bg: #E8E6E1; --tip-ink: #0B0D0E; --scrim: rgba(0, 0, 0, .62);
  --focus: #8DB5E8; --strike: #B49CFF; --tornado: #F3904F;
  color-scheme: dark;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body { background: var(--ground); color: var(--ink); font: 400 15px/1.5 var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; padding-bottom: env(safe-area-inset-bottom, 0px); }
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.code { font: 600 13px/1.2 var(--mono); letter-spacing: .03em; }
.ic { width: 1em; height: 1em; vertical-align: -.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic-tornado { color: var(--tornado); }
.num { font-variant-numeric: tabular-nums; }
/* A station's code, set like a departure board. */
.code-tile { flex: none; font: 600 13px/1 var(--mono); letter-spacing: .06em; padding: 5px 7px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink); }
.tx-closed { color: var(--closed); }
.tx-caution { color: var(--caution); }
.tx-open { color: var(--open); }
.tx-lx { color: var(--strike); }
.tx-unknown { color: var(--muted); }

/* ---- Masthead ---- */
.bar { position: sticky; top: 0; z-index: 20; background: var(--bar); color: var(--bar-ink); padding-top: env(safe-area-inset-top, 0px); border-bottom: 1px solid var(--bar-line); }
.bar-inner { max-width: 1600px; margin: 0 auto; padding: 10px 20px; min-height: 68px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }.wordmark { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; line-height: 1; white-space: nowrap; }   /* (the tagline under the name: the bar keeps one row, in Spanish too) */
/* The name in white on the Flex app's blue (the colours only: no Amazon mark, and every page says the site is independent
   of Amazon). White on #0578FF is 4.1:1, enough for large bold type only, so the small tagline stays on the dark bar. */
.wm-name { font: 800 23px/1 var(--display); font-stretch: 125%; letter-spacing: -.01em; background: var(--flex-blue); color: #FFFFFF; padding: 7px 11px 8px; border-radius: 8px; }
.wm-sub { font: 500 12px/1 var(--mono); color: var(--bar-muted); }
/* The admin pages keep their own masthead: a mark and two lines. */
.mark { width: 34px; height: 34px; border-radius: 7px; background: var(--bar-ink); color: var(--bar); display: grid; place-items: center; flex: none; }
.mark .ic { width: 20px; height: 20px; stroke-width: 2.2; }
.brand h1:not(.wordmark) { margin: 0; display: flex; flex-direction: column; line-height: 1; }
.brand .kicker { font: 500 12px/1 var(--mono); color: var(--bar-muted); margin-bottom: 4px; }
.brand .word { font: 800 22px/1 var(--display); font-stretch: 115%; }
.fresh { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; white-space: nowrap; font: 500 12.5px/1.3 var(--mono); color: var(--bar-muted); }
#freshText { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Two short lines beside the search (the reports' time; this page's snapshot and refresh), so the bar keeps one row; one
   line, joined by a dot, where the bar stacks (max-width: 1100px). */
.fresh-a, .fresh-b { display: block; overflow: hidden; text-overflow: ellipsis; }
.fresh-b { padding-left: 12px; margin-top: 3px; }
.fresh strong { color: var(--bar-ink); font-weight: 500; }
/* The reload action for a page whose ads did not load: it never shrinks or clips; the text beside it truncates instead.
   A 24px tap target (WCAG 2.5.8) without changing the bar's height: the padding is taken back by the margin. */
.fresh-btn { flex: none; min-height: 24px; padding: 2px 6px; margin: -2px 0; border: 0; background: none; font: inherit; color: var(--bar-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #4CC274; box-shadow: 0 0 0 3px rgba(76, 194, 116, .2); margin-right: 4px; vertical-align: 1px; }
.live-dot.stale { background: #F5B700; box-shadow: 0 0 0 3px rgba(245, 183, 0, .2); }
.live-dot.down { background: #FF6B5F; box-shadow: 0 0 0 3px rgba(255, 91, 79, .22); }
.bar-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.btn-bar { padding: 0 14px; min-height: 44px; border-radius: var(--radius); border: 1px solid var(--bar-line-2); background: transparent; color: var(--bar-ink); font-weight: 500; font-size: 14.5px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; line-height: 1; white-space: nowrap; }
.btn-bar:hover { border-color: var(--bar-muted); }
.btn-bar[disabled] { opacity: .55; cursor: default; }
.btn-bar.primary { background: var(--bar-ink); color: var(--bar); border-color: var(--bar-ink); font-weight: 600; }
.btn-bar.icon { padding: 0; width: 44px; justify-content: center; }
.btn-bar.donate { border-color: var(--bar-muted); }
.btn-bar.donate::before { content: "♥"; font-size: 12px; line-height: 1; }
.btn-bar.icon .ic { width: 18px; height: 18px; }
/* The one-tap language switch: on phones only, where the Settings gear (and its language choice) is folded into the menu. */
.lang-btn { display: none; padding: 0 10px; font-weight: 600; letter-spacing: .04em; }
.btn-bar.primary:hover { opacity: .92; }

/* ---- The search: codes, cities, streets and ZIPs ---- */
.find { position: relative; flex: 1 1 360px; max-width: 640px; min-width: 0; }
.find-field { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 12px 0 14px; background: var(--find-bg); border: 1.5px solid var(--bar-line-2); border-radius: 10px; color: var(--bar-ink); }
.find-field:focus-within { border-color: #F5B700; box-shadow: 0 0 0 3px rgba(245, 183, 0, .16); }
.find-field > .ic { width: 19px; height: 19px; color: var(--bar-muted); }
#find { flex: 1 1 auto; min-width: 0; min-height: 0; height: 100%; padding: 0; background: transparent; border: 0; outline: none; box-shadow: none; color: var(--bar-ink); font: 500 17px/1 var(--body); }
#find:focus { box-shadow: none; border: 0; }
#find::placeholder { color: var(--bar-muted); opacity: 1; }
.find-key { font: 500 12px/1 var(--mono); color: var(--bar-muted); border: 1px solid var(--bar-line-2); border-radius: 5px; padding: 4px 8px; }
.find-field:focus-within .find-key { display: none; }
.find-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; max-height: min(72vh, 540px); overflow: auto; padding: 6px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 18px 44px rgba(0, 0, 0, .34); }
.find-group { font: 500 11.5px/1 var(--mono); color: var(--muted); padding: 10px 10px 6px; }
.find-group + .find-opt { margin-top: 0; }
.find-opt { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.find-opt[aria-selected="true"], .find-opt:hover { background: var(--surface-2); }
.find-opt[aria-selected="true"] { box-shadow: inset 0 0 0 1px var(--line-2); }
.find-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; font-weight: 500; }
.find-sub { font-size: 12.5px; font-weight: 400; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find-state { flex: none; max-width: 46%; text-align: right; font-size: 13.5px; font-weight: 600; }
.find-ic { width: 20px; height: 20px; color: var(--muted); }
.find-hint { margin-top: 6px; padding: 8px 10px 4px; border-top: 1px solid var(--line); font: 500 11.5px/1.3 var(--mono); color: var(--muted); }

/* ---- Layout ---- */
.wrap { max-width: 1600px; margin: 0 auto; padding: 16px 20px 64px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); min-height: 50px; }
.panel-head h2 { margin: 0; font: 700 18px/1.15 var(--display); font-stretch: 108%; }
.panel-head .hint { font-size: 13px; color: var(--muted); }
.link-quiet { background: none; border: 0; padding: 6px 0; min-height: 32px; color: var(--muted); font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; }
.link-quiet:hover { color: var(--ink); }
.banner { border: 1px solid var(--closed); background: var(--closed-bg); color: var(--ink); border-radius: 10px; padding: 12px 16px; }
.banner strong { color: var(--closed); }
.status-line { margin: 0; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 13.5px; line-height: 1.4; }
/* The live region stays in the document while it has nothing to say (out of the grid's flow and visually collapsed,
   never display:none), so a screen reader hears the sentence when it is set rather than a region appearing with text. */
.status-line.quiet { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 70; background: var(--tip-bg); color: var(--tip-ink); padding: 11px 15px; border-radius: var(--radius); font-size: 14px; max-width: min(560px, calc(100% - 32px)); box-shadow: 0 10px 30px rgba(0, 0, 0, .28); overflow-wrap: anywhere; }
/* A link in a toast (the sign-in offer) in the toast's own ink: a browser's default blue is unreadable on the dark tip. */
.toast a { color: inherit; text-decoration: underline; font-weight: 600; }
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 5px; font-size: 12.5px; font-weight: 600; }
.badge.free { background: var(--unknown-bg); color: var(--unknown); }
.badge.supporter { background: var(--caution-bg); color: var(--caution); }
.badge.ultra { background: var(--closed-bg); color: var(--closed); }
.plan-card.ultra { border-color: var(--closed); }
.note.ending { color: var(--caution); font-weight: 600; }

/* ---- Right now: one sentence, and the filters ---- */
.now { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.now-line { flex: 1 1 420px; min-width: 0; margin: 0; font-size: 18px; font-weight: 500; line-height: 1.35; }
.now-line strong { font-weight: 700; }
.now-line .code { font-size: 15px; }
.now-line .muted { font-size: 15px; font-weight: 400; }
/* A button that reads as a word in a sentence (the station code in the first sentence, "Use my location"): no chrome,
   the sentence's own font, an underline to say it can be pressed. */
.linklike { appearance: none; display: inline; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; cursor: pointer; }
.linklike:hover { text-decoration-color: currentColor; }
.now-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.tile { appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 500 14.5px/1 var(--body); }
.tile:hover { border-color: var(--muted); }
.tile-label { display: inline-flex; align-items: center; gap: 8px; }
.tile-label::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--swatch, var(--muted)); flex: none; }
.tile-num { font: 600 13.5px/1 var(--mono); font-variant-numeric: tabular-nums; }
.tile[data-level="closed"] { --swatch: var(--closed); }
.tile[data-level="caution"] { --swatch: var(--caution); }
.tile[data-level="open"] { --swatch: var(--open); }
.tile[data-level="lightning"] { --swatch: var(--strike); }
.tile[data-level="risk"] { --swatch: var(--strike); }
.tile[data-level="all"] .tile-label::before { display: none; }
.tile.hot { border-color: var(--closed); background: var(--closed-bg); color: var(--closed); font-weight: 600; }
.tile[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); --swatch: currentColor; }
.tile.hot[aria-pressed="true"] { background: var(--closed-fill); border-color: var(--closed-fill); color: #fff; }
/* The filters in use (the Stations box's and the top search's place), beside the tiles: a chip each with its own
   remove button, and "Clear all filters". On its own row under the tiles whenever there is one. */
.active-filters { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.af-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.af-chips { display: contents; }
.af-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; max-width: 100%; padding: 0 2px 0 12px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-2); font-size: 14px; }
.af-k { flex: none; color: var(--muted); white-space: nowrap; }
.af-v { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-chip .chip-x { flex: none; width: 34px; height: 34px; padding: 0; }
.chip-x { width: 36px; height: 36px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); display: grid; place-items: center; }
.chip-x:hover { color: var(--ink); background: var(--surface); }
.chip-x .ic { width: 16px; height: 16px; }

/* ---- Map and side column ---- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 16px; align-items: start; }
/* The left column: the map, and the stations under it, beside the lists. */
.main-col { display: grid; gap: 16px; min-width: 0; }
.map-panel { overflow: hidden; }
.map-box { position: relative; background: var(--map-bg); overflow: hidden; }
#map { display: block; width: 100%; height: auto; touch-action: none; cursor: grab; }
#map:active { cursor: grabbing; }
#map .sea { fill: var(--sea); }
#map .land path { fill: var(--land); }
#map .land .world-land { fill-rule: evenodd; }   /* the big lakes are holes in it */
#map .borders { fill: none; stroke: var(--border-line); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
#map .dot { stroke: var(--map-bg); stroke-width: .8; cursor: pointer; vector-effect: non-scaling-stroke; }
#map .dot.open { fill: var(--open); fill-opacity: .75; }
#map .dot.caution { fill: var(--caution); }
#map .dot.closed { fill: var(--closed); stroke-width: 1.6; }
#map .dot.unknown { fill: var(--unknown); }
#map .dot.lx { stroke: var(--strike); stroke-width: 2; }
#map .dot.risk { stroke: var(--map-bg); stroke-width: .8; }
#map .dot.dim { fill-opacity: .14; stroke-opacity: .2; }
#map .tornado { fill: var(--tornado); cursor: pointer; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .45)); animation: tornado 1.4s ease-in-out infinite alternate; }
@keyframes tornado { from { opacity: .7; } to { opacity: 1; } }
#map .tracks { display: none; }
#map .strikes path { fill: none; stroke: var(--strike); stroke-linecap: round; stroke-width: 2.4; vector-effect: non-scaling-stroke; }
/* The lightning tiles' strikes (renderLx): drawn in bins by age, the oldest faint, the newest full and a little larger. */
#map .lx path { fill: none; stroke: var(--strike); stroke-linecap: round; stroke-width: 2.4; vector-effect: non-scaling-stroke; }
#map .lx path.fresh { stroke-width: 3.6; }
#map .focus-ring { fill: none; stroke: var(--ink); stroke-width: 2.5; pointer-events: none; vector-effect: non-scaling-stroke; }
#map .you { fill: var(--accent); stroke: var(--surface); stroke-width: 2.5; pointer-events: none; vector-effect: non-scaling-stroke; }
#map .ring { fill: none; stroke: var(--closed); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: ring 2.6s ease-out infinite; pointer-events: none; vector-effect: non-scaling-stroke; }
@keyframes ring { from { opacity: .85; transform: scale(1); } to { opacity: 0; transform: scale(2.8); } }
#map .radar image { opacity: .74; pointer-events: none; }
/* The world view's clouds (lib/sat.js: white, more opaque the colder the tops): grey on the light map, where white would vanish. */
#map .sat image { pointer-events: none; }
:root[data-theme="light"] #map .sat image { filter: brightness(.55); }
@media (prefers-color-scheme: light) { :root:not([data-theme]) #map .sat image { filter: brightness(.55); } }
/* The base map's tiles (USGS The National Map, through this server), turned dark with the page. Below the street
   zooms (.relief) they are the terrain's shading alone, laid over the land colour inside the states. */
#map .tiles image { pointer-events: none; }
#map .tiles.relief { clip-path: url(#landClip); mix-blend-mode: multiply; opacity: .7; }
/* Dark: the street map inverted; the relief inverted and strengthened, its slopes lightening the dark land. */
:root[data-theme="dark"] #map .tiles { filter: url(#tileDark); }
:root[data-theme="dark"] #map .tiles.relief { filter: url(#reliefDark); mix-blend-mode: screen; opacity: .5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #map .tiles { filter: url(#tileDark); }
  :root:not([data-theme="light"]) #map .tiles.relief { filter: url(#reliefDark); mix-blend-mode: screen; opacity: .5; }
}
/* CARTO's street map beyond North America: its own light and dark styles (no filter), and its credit in the bottom
   right corner as CARTO's terms ask (visible, legible, never behind a click); the radar bar moves up clear of it. Natural
   Earth's coarse borders give way to the map's own there. */
#map .tiles-world image { pointer-events: none; }
#map.carto-on .world-borders { display: none; }
.map-attrib { position: absolute; right: 0; bottom: 0; z-index: 3; padding: 2px 8px; border-top-left-radius: 6px; background: var(--overlay); color: var(--ink); font-size: 11px; line-height: 1.4; }
.map-attrib a { color: inherit; }
.map-box.attrib-on .map-bars { bottom: 28px; }
/* The map's own controls, over its corners. */
.map-layers { position: absolute; top: 12px; left: 12px; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px; }
.toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 8px; background: var(--overlay); border: 1px solid var(--line-2); color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; }
.toggle input { margin: 0; width: 16px; height: 16px; accent-color: var(--ink); }
.map-tools { position: absolute; top: 12px; right: 12px; z-index: 3; display: flex; flex-direction: column; gap: 6px; }
/* Your local time, top centre (under the layer buttons on a phone); nothing to press, so the map drags through it. */
.map-clock { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 8px; background: var(--overlay); border: 1px solid var(--line-2); color: var(--ink); font: 500 13px/1 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.map-clock .mc-label { color: var(--muted); font: 500 12px/1 var(--body); }
.map-clock time:empty { display: none; }
.tool { width: 44px; height: 44px; padding: 0; border-radius: 8px; background: var(--overlay); border: 1px solid var(--line-2); color: var(--ink); display: grid; place-items: center; }
.tool:hover { border-color: var(--muted); }
.tool .ic { width: 18px; height: 18px; }
/* The bars under the map, stacked in its bottom left corner: the lightning replay over the radar loop. */
.map-bars { position: absolute; left: 12px; right: 68px; bottom: 12px; z-index: 3; display: flex; flex-direction: column; gap: 6px; }
.map-bars > [hidden] { display: none; }
.radar-bar { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; padding: 8px 12px; background: var(--overlay); border: 1px solid var(--line-2); border-radius: 10px; font-size: 13px; color: var(--muted); }
.radar-bar input[type="range"] { flex: 1 1 160px; min-width: 120px; margin: 0; accent-color: var(--hi); }
.lx-bar input[type="range"] { accent-color: var(--strike); }
/* The replay's key: a strike fades from full to faint over its half hour. */
.lx-bar .lx-fade { display: inline-block; width: 42px; height: 6px; border-radius: 3px; vertical-align: middle; background: linear-gradient(90deg, var(--strike), transparent); }
/* Fixed widths for the parts whose text changes as the loop plays, so the slider never changes length. */
.radar-bar .radar-time { font: 500 12.5px/1.3 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); min-width: 27ch; }
.radar-bar .muted .radar-loading { display: inline-block; min-width: 10ch; }
/* The model's forecast frames are drawn fainter than observed radar: a forecast, not a measurement. */
#map image.ahead { opacity: .62; }
.radar-bar .btn.small.icon { min-width: 40px; min-height: 40px; padding: 0 10px; border-radius: 20px; }
.radar-bar .btn.small.icon .ic { width: 15px; height: 15px; }
.map-empty { padding: 48px 16px; text-align: center; color: var(--muted); }
.lock-note { position: absolute; left: 12px; right: 68px; top: 60px; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; background: var(--overlay); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 8px 12px; font-size: 13.5px; color: var(--muted); }
.legend { display: flex; gap: 6px 16px; flex-wrap: wrap; padding: 10px 16px 4px; font-size: 13px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.legend i.sw-closed { background: var(--closed); }
.legend i.sw-caution { background: var(--caution); }
.legend i.sw-open { background: var(--open); }
.legend i.strike-key { width: 6px; height: 6px; background: var(--strike); }
.legend i.tornado-key { width: 0; height: 0; border-radius: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 9px solid var(--tornado); }
.map-credit { margin: 0; padding: 2px 16px 12px; font-size: 12px; color: var(--muted); }
.tip { position: absolute; z-index: 5; pointer-events: none; background: var(--tip-bg); color: var(--tip-ink); border-radius: var(--radius); padding: 8px 10px; font-size: 13px; line-height: 1.45; max-width: 280px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.tip .code { font-size: 13px; }
/* Station forecast (details sheet) */
.fc-hours { display: flex; gap: 4px; overflow-x: auto; padding: 4px 0 6px; scrollbar-width: thin; }
.fc-h { display: grid; justify-items: center; gap: 3px; min-width: 46px; padding: 6px 2px; border-radius: 8px; background: var(--surface-2); font-size: 12px; color: var(--muted); }
.fc-h .ic, .fc-day .ic { width: 20px; height: 20px; color: var(--ink); }
.fc-temp { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.fc-pop { font-size: 11px; min-height: 1.2em; color: var(--muted); }
.fc-pop.wet { color: var(--accent); font-weight: 600; }
.fc-days { display: grid; }
.fc-day { display: grid; grid-template-columns: minmax(84px, 110px) 20px minmax(60px, 76px) minmax(56px, 72px) 1fr; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.fc-day:first-child { border-top: 0; }
.fc-name { font-weight: 500; }
.fc-short { color: var(--muted); }
.fc-src { margin-top: 8px; }
.fc-src a { color: inherit; }
/* Outside the US and Canada: the national weather service's warnings, and the next hours minute by minute */
.fc-warnings { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; gap: 6px; }
.fc-warnings li { padding: 8px 10px; border-radius: 8px; border-left: 3px solid var(--warn, #d97706); background: var(--surface-2); font-size: 13.5px; line-height: 1.45; }
/* The warning's level, as the national services colour them: yellow, red, purple, and black-purple for the gravest */
.fc-warnings li.lvl-advisory { border-left-color: #e0b400; }
.fc-warnings li.lvl-warning { border-left-color: #e0362c; }
.fc-warnings li.lvl-danger { border-left-color: #a02cd8; }
.fc-warnings li.lvl-emergency { border-left-color: #5b0f8a; border-left-width: 5px; }
.fc-disclaimer { font-size: 12px; }
.fc-soon, .fc-obs { display: flex; align-items: center; gap: 6px; }
.fc-soon .ic, .fc-obs .ic { width: 18px; height: 18px; flex: none; }
.fc-soon.wet, .fc-obs.wet { color: var(--accent); font-weight: 600; }
/* The wind each hour: direction and speed, gusts after a "g"; strong gusts stand out */
.fc-wind { font-size: 10.5px; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.fc-wind.gusty { color: var(--accent); font-weight: 600; }
@media (max-width: 480px) { .fc-day { grid-template-columns: 78px 20px 1fr; } .fc-day .fc-pop, .fc-day .fc-short { grid-column: 3; } }
/* The station-change ad */
.change-ad { margin: 12px 0; min-height: 90px; }
.change-ad:empty { display: none; }

/* ---- The side column: rows of stations ---- */
.side { display: grid; gap: 16px; min-width: 0; }
.list { list-style: none; margin: 0; padding: 0; max-height: 380px; overflow: auto; }
.list li + li { border-top: 1px solid var(--line); }
.row-btn { display: grid; gap: 6px; width: 100%; text-align: left; padding: 12px 16px; background: none; border: 0; color: inherit; }
.row-btn:hover { background: var(--surface-2); }
.row-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.row-place { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.row-meta { flex: none; }
.row-dist { font: 500 12px/1 var(--mono); color: var(--muted); white-space: nowrap; }
.row-state { flex: none; max-width: 54%; text-align: right; font-size: 13.5px; font-weight: 600; color: var(--muted); }
li.lv-closed .row-state { color: var(--closed); }
li.lv-caution .row-state { color: var(--caution); }
li.lv-open .row-state { color: var(--open); }
li.lv-lx .row-state { color: var(--strike); }
.row-why { font-size: 13px; color: var(--muted); }
/* The next hour, a strip from now to +60 minutes: the posted level, and the lightning clock underneath. */
.tl { display: block; width: 100%; height: 10px; }
.tl-track { fill: var(--line); }
.tl-closed { fill: var(--closed); }
.tl-caution { fill: var(--caution); }
.tl-unknown { fill: var(--unknown); }
.tl-lx { fill: var(--strike); }
.tl-scale { display: flex; justify-content: space-between; padding: 6px 16px 12px; font: 500 11px/1 var(--mono); color: var(--muted); }
.empty { padding: 16px; color: var(--muted); margin: 0; font-size: 14px; }
.shift { font-weight: 600; font-size: 13px; color: var(--ink); }
.shift .to-closed { color: var(--closed); }
.shift .to-caution { color: var(--caution); }
.shift .to-open { color: var(--open); }

/* ---- Forms and buttons ---- */
.controls { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: end; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.field { display: grid; gap: 5px; min-width: 0; }
/* A select is as wide as its longest option unless told otherwise; on a phone that is wider than the screen. */
.field select { min-width: 0; max-width: 100%; }
.field-label { font-size: 13px; font-weight: 600; color: var(--muted); }
input:not([type="checkbox"]), select { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 6px 10px; min-height: 40px; max-width: 100%; color: var(--ink); }
input:not([type="checkbox"]):focus, select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(30, 78, 140, .18); }
input::placeholder { color: var(--muted); opacity: .85; }
.field.grow { flex: 1 1 220px; }
.field.grow input { width: 100%; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; flex-wrap: wrap; }
.seg button { border: 0; background: var(--surface); padding: 0 12px; min-height: 40px; font-size: 14px; font-weight: 500; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; min-height: 40px; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-weight: 500; font-size: 14px; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--muted); background: var(--surface-2); }
.btn.primary { background: var(--ink); color: var(--surface); border-color: var(--ink); font-weight: 600; }
.btn.primary:hover { opacity: .92; background: var(--ink); }
.btn.small { min-height: 34px; padding: 0 11px; font-size: 13.5px; }
.btn[disabled] { opacity: .55; cursor: default; }
.alert-form { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: end; padding: 14px 16px; }
.alert-form .alert-msg { flex-basis: 100%; min-height: 1.5em; }
.alerts-fine { padding: 12px 16px; margin: 0; border-top: 1px solid var(--line); }
.code-btn { background: none; border: 0; padding: 0; font: 600 13.5px/1.3 var(--mono); letter-spacing: .03em; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.code-btn:hover { text-decoration-color: currentColor; }
.link-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; min-height: 44px; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 500; font-size: 14px; }
.link-btn:hover { border-color: var(--muted); }
.link-btn.primary { background: var(--ink); color: var(--surface); border-color: var(--ink); font-weight: 600; }
.link-btn.primary.on .ic { fill: currentColor; }
/* Sharing: a closed station's share stands out (it is the one most worth sending), and each closed row carries its own. */
.link-btn.share-closed { background: var(--closed-fill); border-color: var(--closed-fill); color: #fff; font-weight: 600; }
.link-btn.share-closed:hover { border-color: var(--closed-fill); filter: brightness(1.08); }
.list li.has-share { display: flex; align-items: stretch; }
.list li.has-share .row-btn { flex: 1; min-width: 0; }
.row-share { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; border: 0; border-left: 1px solid var(--line); background: none; color: var(--closed); cursor: pointer; }
.row-share:hover { background: var(--closed-bg); }
.share-hello { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); font-size: 14px; }
.share-hello > span { flex: 1 1 220px; }
/* The donations banner over the map (server.js DONATE_BANNER): one line on a wide screen, the button under the words on a
   phone. Closed, it stays away until the next day (the head's script sets data-donate before the page is drawn). */
.donate-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px 12px; padding: 8px 8px 8px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); font-size: 14px; line-height: 1.4; }
.donate-banner > .ic { width: 18px; height: 18px; color: var(--closed); fill: currentColor; stroke: none; }
.donate-banner > p { margin: 0; min-width: 0; }
.donate-banner > p span { color: var(--muted); }
.donate-banner > .chip-x:hover { background: var(--surface-2); }
@media (max-width: 720px) {
  /* A phone: the heart beside the words and the close button at their right, the button on its own row under the words. */
  .donate-banner { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; }
  .donate-banner > .ic { margin-top: 1px; }
  .donate-banner > .chip-x { grid-column: 3; grid-row: 1; margin: -6px 0 -6px; }
  .donate-banner > .btn { grid-column: 2 / 4; justify-self: start; }
}
:root[data-donate="off"] .donate-banner { display: none; }
.note { font-size: 13.5px; color: var(--muted); margin: 0; }
.note.mt { margin-top: 8px; }

/* ---- Account panel ---- */
.account-body { padding: 16px; display: grid; gap: 16px; }
/* The way to the Scan & Go tracker (/tracker), a paid perk. */
.sg-promo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface-2); }
.sg-promo p { margin: 0; flex: 1 1 260px; }
.sg-promo .note { display: block; margin-top: 3px; }
.account-body > p { margin: 0; max-width: 70ch; }
.account-row { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.watch-editor { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: end; }
.watch-editor .alert-msg { flex-basis: 100%; }
.watch-editor .field > .note { max-width: 40ch; }   /* the radius explanation wraps under its select instead of widening the row */
.watch-list { display: grid; gap: 8px; }
.watch-row { display: flex; gap: 8px; align-items: center; position: relative; }
.watch-row input[data-i] { flex: 1 1 200px; }
/* Autocomplete under the watched-station boxes. */
.suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin-top: 4px; max-height: 280px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: 0 12px 30px rgba(0, 0, 0, .18); }
.suggest [role="option"] { display: grid; gap: 2px; padding: 8px 10px; cursor: pointer; font-size: 13.5px; border-top: 1px solid var(--line); }
.suggest [role="option"]:first-child { border-top: 0; }
.suggest [role="option"][aria-selected="true"], .suggest [role="option"]:hover { background: var(--surface-2); }
.suggest .s-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.suggest .s-code { font: 600 13px/1.2 var(--mono); color: var(--ink); }
.suggest .s-place { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest .s-addr { color: var(--ink); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-place .addr { white-space: normal; }
.row-alert { white-space: nowrap; }
.quiet-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.push-field { flex-basis: 100%; }
/* Purchase notice / receipt */
.receipt { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 10px 0 14px; font-size: 14px; }
.receipt dt { color: var(--muted); }
.receipt dd { margin: 0; font-family: var(--mono); word-break: break-all; }
@media print {
  body * { visibility: hidden; }
  #noticeDialog, #noticeDialog * { visibility: visible; }
  #noticeDialog { position: absolute; left: 0; top: 0; border: 0; box-shadow: none; }
  #noticeDialog .btn, #noticeDialog .close-btn { display: none; }
}
/* /account: the same app rendered without ads, showing only the account panel and the notices. */
.account-page main.wrap > :not(#alertsPanel):not(#banner):not(#adblockBar):not(#toast) { display: none !important; }
.account-page #alertsPanel { margin-top: 16px; }
.account-page .find { display: none; }
.push-field .note { flex: 1 1 200px; }
.quiet-row input[type="time"] { min-height: 40px; width: 8.5em; }
.history { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.history li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 4px 10px; align-items: baseline; font-size: 13.5px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.history .when { font: 500 12px/1.4 var(--mono); color: var(--muted); }
.history .muted { font-size: 13px; }
.credits-box { border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.credits-box .note { flex-basis: 100%; }
.auto-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.auto-toggle input { margin: 0; accent-color: var(--ink); }
.plan-box { display: grid; gap: 10px; }
.plan-box > strong { font: 700 17px/1.1 var(--display); font-stretch: 108%; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.plan-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: grid; gap: 6px; align-content: start; background: var(--surface); }
.plan-card.current { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.plan-card.pass { background: var(--surface-2); }
.plan-card .btn[disabled] { opacity: .45; }
.plan-card strong { font: 600 13px/1.3 var(--body); color: var(--muted); }
.plan-price { font: 800 26px/1 var(--display); font-stretch: 105%; }
.plan-price .muted { font: 400 13px/1.2 var(--body); }
.plan-card ul { margin: 2px 0 0; padding-left: 16px; font-size: 13px; color: var(--muted); line-height: 1.55; }
.plan-card .btn { justify-self: start; margin-top: 6px; }
.account-sub { display: grid; gap: 10px; padding-top: 10px; }
.device-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.device-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 13.5px; }
.device-list li > span:first-child { flex: 1 1 160px; }
.sec-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.sec-row strong { min-width: 140px; }
.link-channel { border-top: 1px solid var(--line); padding-top: 12px; }
.link-channel summary { cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ink); list-style: none; display: flex; align-items: center; gap: 8px; min-height: 32px; }
.link-channel summary::-webkit-details-marker { display: none; }
.link-channel summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; margin-left: 2px; }
.link-channel[open] summary::before { transform: rotate(45deg); }
.link-channel .alert-form { padding: 10px 0 0; }
.captcha-row { display: grid; gap: 8px; padding: 0 16px; }
.puzzle-foot { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
/* The picture puzzle (lib/puzzle.js draws it; public/app.js puzzleWidget runs it). */
.puzzle { display: grid; gap: 8px; min-height: 60px; user-select: none; -webkit-user-select: none; }
.pz-prompt { margin: 0; font-weight: 600; }
.pz-wait { margin: 0; font-size: 13px; }
.pz-stage, .pz-grid { position: relative; width: 100%; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.pz-grid { aspect-ratio: 1 / 1; }
.pz-bg { display: block; width: 100%; height: 100%; pointer-events: none; }
.pz-piece { position: absolute; left: 0; height: auto; cursor: grab; touch-action: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); }
.puzzle.dragging .pz-piece, .puzzle.dragging .pz-handle { cursor: grabbing; }
.pz-track { position: relative; width: 100%; height: 40px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--line-2); }
.pz-handle { position: absolute; top: 2px; left: 0; height: 34px; min-width: 40px; border-radius: 17px; border: 1px solid var(--accent); background: var(--accent); color: var(--surface); font-size: 18px; cursor: grab; touch-action: none; }
.pz-handle:focus-visible { outline: 3px solid var(--hi, #F5B700); outline-offset: 2px; }
.pz-cells { position: absolute; inset: 0; display: grid; }
.pz-cell { border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; position: relative; border-radius: 4px; }
.pz-cell:hover { background: rgba(255, 255, 255, .12); }
.pz-cell:focus-visible { outline: 3px solid var(--hi, #F5B700); outline-offset: -3px; }
.pz-cell[aria-pressed="true"] { box-shadow: inset 0 0 0 4px var(--accent); background: rgba(30, 78, 140, .18); }
.pz-cell[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 4px; right: 6px; width: 22px; height: 22px; border-radius: 11px; background: var(--accent); color: #fff; font-size: 14px; line-height: 22px; text-align: center; }
.email-hint { margin: 0 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.alert-form .email-hint { margin: 0; flex-basis: 100%; }
.mail-paused { margin: 10px 0; padding: 10px 12px; border: 1px solid #C9851A; border-left-width: 4px; border-radius: var(--radius); background: rgba(245, 183, 0, .1); }
.mail-paused p { margin: 4px 0; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.report-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 8px; background: var(--surface-2); }
.report-box h3 { margin: 0; }
.report-badge { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; border-radius: 5px; font-size: 12px; font-weight: 600; background: var(--closed-bg); color: var(--closed); margin-left: 6px; white-space: nowrap; }
.report-badge.open { background: var(--open-bg); color: var(--open); }
.tornado-flag { color: var(--tornado); margin-left: 4px; }
.tornado-note { color: var(--tornado); }

/* ---- Table ---- */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface); }
th button { background: none; border: 0; padding: 0; font: inherit; color: inherit; min-height: 28px; }
th button[aria-sort]::after { content: " ↓"; }
th button[aria-sort="ascending"]::after { content: " ↑"; }
td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 14px; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--surface-2); }
tbody tr.lv-closed td:first-child { box-shadow: inset 3px 0 0 var(--closed); }
tbody tr.lv-caution td:first-child { box-shadow: inset 3px 0 0 var(--caution); }
.tags { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.al-title { display: block; }
.al-group { display: block; font-size: 12.5px; color: var(--muted); }
.c-until, .c-lx { white-space: nowrap; }
.lx-hit { color: var(--strike); font-weight: 600; }
/* The 20-minute line for a storm forming over the station (no ground strike near yet, a sign aloft): the list's row and
   the sheet's note carry the class; the note is marked at its edge. */
li.forming .row-why { color: var(--ink); }
p.note.forming { border-left: 3px solid var(--strike); padding-left: 8px; }
/* The checkpoint ladder's strip on the station sheet: nine checkpoints from 10 to 6 miles, the ones the storm's
   lightning has crossed filled in, the distances at either end. */
.rings { display: flex; align-items: center; gap: 5px; margin: 4px 0 0; }
.rings i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--strike); box-sizing: border-box; }
.rings i.on { background: var(--strike); }
.rings-label { font: 500 11px/1 var(--mono); color: var(--muted); }
.risk-val { font-weight: 600; }
.risk-val.hi { color: var(--strike); }
.table-foot { margin: 0; padding: 12px 16px; font-size: 13px; color: var(--muted); }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); }
.pager .note { min-width: 9ch; text-align: center; font-variant-numeric: tabular-nums; }
.pager-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 40px; }
.star { background: none; border: 0; padding: 4px; margin-left: 4px; color: var(--line-2); vertical-align: -2px; line-height: 1; }
.star .ic { width: 16px; height: 16px; stroke-width: 1.8; }
.star:hover { color: var(--caution); }
.star.on { color: var(--caution); }
.star.on .ic { fill: currentColor; }
/* "Show on the map": in the most-closed board. */
.pin { background: none; border: 0; padding: 4px; margin-left: 2px; color: var(--muted); vertical-align: -2px; line-height: 1; cursor: pointer; }
.pin .ic { width: 16px; height: 16px; }
.pin:hover, .pin:focus-visible { color: var(--accent); }
.c-code .star { margin-left: 6px; }

/* ---- Most closed stations ---- */
.board .c-rank { width: 3ch; color: var(--muted); font-variant-numeric: tabular-nums; }
.board .c-num, .board-counts .c-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.board tr.board-row.sel td { background: var(--surface-2); }
.board tr.board-row.sel td:first-child { box-shadow: inset 3px 0 0 var(--closed); }
.board tbody tr.board-detail { cursor: default; }
.board tbody tr.board-detail:hover { background: none; }
.board tr.board-detail > td { background: var(--surface-2); padding: 4px 14px 14px; }
.board-box { display: grid; gap: 8px; max-width: 760px; }
.board-box p { margin: 0; font-size: 13.5px; line-height: 1.45; }
.board-counts th, .board-counts td { padding: 6px 10px; font-size: 13px; background: none; white-space: nowrap; }
.board-counts tbody th { text-align: left; color: var(--muted); font-weight: 600; }
.board-counts tbody tr { cursor: default; }
.board-counts tbody tr:hover { background: none; }
/* A station's closure history: years by months, darker the more it closed; a dot marks a month partly unwatched. */
#dPast { display: grid; gap: 8px; }
#dPast .note { margin: 0; }
.past-grid { display: grid; grid-template-columns: 42px repeat(12, minmax(0, 1fr)); gap: 3px; align-items: center; }
.past-mh { text-align: center; font-size: 11px; font-weight: 600; color: var(--muted); }
.past-mh .m3 { display: none; }
.past-y { font-size: 12px; font-weight: 600; line-height: 1.15; }
.past-y small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.past-none { text-align: center; color: var(--line-2); font-size: 12px; }
.past-cell { position: relative; min-width: 0; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; cursor: pointer; }
.past-cell.lv0 { color: var(--muted); }
.past-cell.lv1 { background: var(--closed-bg); border-color: transparent; }
.past-cell.lv2 { background: var(--closed-bg); background: color-mix(in srgb, var(--closed) 38%, var(--surface)); border-color: transparent; }
.past-cell.lv3 { background: var(--closed); background: color-mix(in srgb, var(--closed) 68%, var(--surface)); border-color: transparent; color: #fff; }
.past-cell.lv4 { background: var(--closed); border-color: transparent; color: #fff; font-weight: 700; }
.past-cell.sel { outline: 2px solid var(--ink); outline-offset: 1px; }
.past-cell.part::after { content: ''; position: absolute; top: 3px; right: 3px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .7; }
.past-month p { margin: 0; font-size: 13.5px; line-height: 1.45; }
.past-list { list-style: none; margin: 6px 0 0; padding: 0; }
.past-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
@media (min-width: 721px) { .past-mh .m1 { display: none; } .past-mh .m3 { display: inline; } }

/* ---- Status pill: a dot and a word ---- */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; line-height: 1.25; white-space: nowrap; }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.pill.closed { color: var(--closed); }
.pill.caution { color: var(--caution); }
.pill.open { color: var(--open); }
.pill.unknown { color: var(--unknown); }
.pill .ovr { font-weight: 500; opacity: .85; }

/* ---- Method ---- */
.method { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px 28px; padding: 18px 16px 22px; }
.method h3 { margin: 0 0 6px; font: 700 15.5px/1.3 var(--display); color: var(--ink); }
.method p, .method ul { margin: 0 0 8px; color: var(--muted); max-width: 62ch; font-size: 14px; }
.method ul { padding-left: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { font-size: 12.5px; padding: 3px 8px; border-radius: 5px; background: var(--closed-bg); color: var(--closed); }

/* ---- Detail sheet ---- */
dialog.sheet { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(460px, 100%); max-width: 100%; height: 100%; max-height: none; border: 0; border-left: 1px solid var(--line); padding: 0; background: var(--surface); color: var(--ink); box-shadow: -16px 0 40px rgba(0, 0, 0, .2); overflow: auto; overscroll-behavior: contain; }
dialog.sheet::backdrop { background: var(--scrim); }
/* Beside the map (a station shown on the map): under the bar, no backdrop, the page behind still usable. */
dialog.sheet.beside { z-index: 15; top: var(--bar-h, 68px); height: calc(100% - var(--bar-h, 68px)); }
.sheet-head { position: sticky; top: 0; z-index: 1; background: var(--surface); border-bottom: 1px solid var(--line); padding: calc(14px + env(safe-area-inset-top, 0px)) 20px 14px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; }
dialog.sheet.beside .sheet-head { padding-top: 12px; }
.sheet-back { flex-basis: 100%; display: inline-flex; align-items: center; gap: 4px; justify-content: flex-start; min-height: 32px; padding: 0; background: none; border: 0; color: var(--muted); font-size: 14px; }
.sheet-back:hover { color: var(--ink); }
.sheet-back .ic { width: 16px; height: 16px; }
.sheet-title { flex: 1 1 auto; min-width: 0; }
.sheet-head h2 { margin: 0; font: 600 30px/1 var(--mono); letter-spacing: .05em; }
.sheet-head h2:focus { outline: none; }
.sheet-head .place { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.close-btn { flex: none; width: 40px; height: 40px; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--surface); font-size: 19px; line-height: 1; color: var(--muted); }
.close-btn:hover { color: var(--ink); border-color: var(--muted); }
/* One column pinned to the sheet's width: a wide child (the hour strip) scrolls inside it instead of
   stretching the column, which would lay every paragraph out wider than a phone screen. */
.sheet-body { padding: 16px 20px calc(28px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.sheet-body > * { min-width: 0; }
.sheet h3 { margin: 0 0 8px; font: 700 15.5px/1.3 var(--display); font-stretch: 105%; color: var(--ink); }
/* The station's status, big, and the next hour under it. */
.d-status { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface-2); }
.d-status:has(.pill.closed) { border-color: var(--closed); background: var(--closed-bg); }
.d-status:has(.pill.caution) { border-color: var(--caution); }
#dStatus .pill { font-size: 22px; font-weight: 700; white-space: normal; }
#dStatus .pill::before { width: 12px; height: 12px; }
#dStatus .note { font-size: 14px; color: var(--ink); }
.d-next:empty { display: none; }
/* Other stations near a closed one: a row each (code, place, distance, status), the ones in the visitor's window pressable. */
.nearby { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); }
.nearby li + li { border-top: 1px solid var(--line); }
.nearby .row-btn, .nearby .row-plain { box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; }
.nearby .pill { flex: none; }
.d-next-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.d-next .tl-scale { padding: 6px 0 0; }
.d-next .note { margin-top: 8px; }
.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0; }
.facts dt { font-size: 13px; font-weight: 600; color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.alerts { display: grid; gap: 10px; }
.alert-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 6px; }
.alert-card.lv-closed { border-color: var(--closed); }
.alert-card.lv-caution { border-color: var(--caution); }
.alert-card .ac-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.alert-card .ac-group { font-size: 12.5px; color: var(--muted); }
.alert-card .ac-title { font-weight: 600; }
.alert-card .ac-msg { margin: 0; color: var(--muted); font-size: 13.5px; }
.alert-card .ac-time { font: 500 12px/1.4 var(--mono); color: var(--muted); }
.links { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- Modals ---- */
/* The site menu: a drawer from the left, over a shade; Esc, the close button or a tap on the shade closes it. */
.menu-btn { flex: none; }
dialog.drawer { position: fixed; inset: 0 auto 0 0; margin: 0; width: min(320px, 86vw); max-width: 100%; height: 100%; max-height: none; border: 0; border-right: 1px solid var(--line-2); padding: 0 0 env(safe-area-inset-bottom, 0px); background: var(--surface); color: var(--ink); box-shadow: 16px 0 40px rgba(0, 0, 0, .3); overflow: auto; overscroll-behavior: contain; }
dialog.drawer::backdrop { background: var(--scrim); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 12px 18px; border-bottom: 1px solid var(--line); }
.drawer-title { font: 800 19px/1 var(--display); font-stretch: 115%; }
.drawer-nav { display: grid; padding: 4px 8px 20px; }
.nav-group { margin: 16px 10px 4px; font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.drawer-nav a, .drawer-nav button { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--radius); background: none; color: var(--ink); font: inherit; font-size: 15px; text-align: left; text-decoration: none; cursor: pointer; }
.drawer-nav a[hidden], .drawer-nav button[hidden] { display: none; }
.drawer-nav a:hover, .drawer-nav button:hover { background: var(--surface-2); }
.drawer-nav a:focus-visible, .drawer-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.drawer-nav .ic { flex: none; width: 18px; height: 18px; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  dialog.drawer[open] { animation: drawer-in .18s ease-out; }
  @keyframes drawer-in { from { transform: translateX(-100%); } }
}
/* A section jumped to from the menu lands below the sticky top bar, not under it. */
main .panel { scroll-margin-top: calc(var(--bar-h, 68px) + 12px); }
dialog.modal { margin: auto; width: min(460px, calc(100% - 32px)); border: 1px solid var(--line-2); border-radius: 12px; padding: 0; background: var(--surface); color: var(--ink); box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
dialog.modal::backdrop { background: var(--scrim); }
/* Sign in with Google / Apple at the top of the sign-in dialog: each in its provider's own look (their brand guides ask
   for it), light or dark with the page. Plain links to the server; no provider script is ever loaded. */
.oauth-row { display: grid; gap: 10px; padding: 14px 16px 0; }
.oauth-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid; border-radius: var(--radius); font: 500 15px/1 var(--body); text-decoration: none; }
.oauth-btn:hover { filter: brightness(.95); }
.oauth-btn.google { background: #FFFFFF; color: #1F1F1F; border-color: #747775; }
.oauth-btn.apple { background: #000000; color: #FFFFFF; border-color: #000000; }
.oauth-logo { width: 18px; height: 18px; flex: none; }
.oauth-btn.apple .oauth-logo { width: 15px; height: 18px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .oauth-btn.google { background: #131314; color: #E3E3E3; border-color: #8E918F; }
  :root:not([data-theme="light"]) .oauth-btn.apple { background: #FFFFFF; color: #000000; border-color: #FFFFFF; }
}
:root[data-theme="dark"] .oauth-btn.google { background: #131314; color: #E3E3E3; border-color: #8E918F; }
:root[data-theme="dark"] .oauth-btn.apple { background: #FFFFFF; color: #000000; border-color: #FFFFFF; }
.oauth-or { display: flex; align-items: center; gap: 10px; margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.oauth-or::before, .oauth-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.oauth-tag { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; font-size: 13.5px; color: var(--muted); }
/* One plan's checkout (#checkoutDialog): each way to pay is a row to tap, grouped under PayPal, Stripe / Link and Crypto. */
#checkoutDialog { width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; }
.checkout-price { padding: 14px 16px 0; margin: 0; font: 700 22px/1.2 var(--display); }
.checkout-group { padding: 12px 16px 4px; }
.checkout-group h3 { margin: 0 0 6px; font: 600 13px/1.3 var(--body); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.checkout-group > .note { margin: 0 0 8px; }
.checkout-opts { display: grid; gap: 8px; }
.checkout-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "desc price"; align-items: center; gap: 2px 12px; width: 100%; padding: 11px 14px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-align: left; text-decoration: none; font: inherit; cursor: pointer; }
.checkout-opt:hover { border-color: var(--ink); background: var(--surface-2); }
.checkout-opt[disabled] { opacity: .5; cursor: default; }
.co-name { grid-area: name; font-weight: 600; font-size: 15px; }
.co-desc { grid-area: desc; font-size: 13px; color: var(--muted); }
.co-price { grid-area: price; font: 600 14px/1 var(--mono); }
#checkoutOpts { padding-bottom: 12px; }
/* The plans after a new account is made (#welcomeDialog): wide enough for the cards side by side, scrolling when tall. */
dialog.modal.wide { width: min(1080px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; }
.welcome-plans { padding: 12px 16px 0; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font: 700 19px/1.1 var(--display); font-stretch: 108%; }
.modal-body { padding: 4px 0 8px; }
.modal-body > .note { padding: 12px 16px 0; }
.modal-body .alert-form { padding: 12px 16px; }
.modal-body .alert-msg { padding: 0 16px 8px; }
.modal-body > .puzzle { padding: 12px 16px 0; }

/* ---- Bitcoin checkout ---- */
.btc-body { padding: 12px 16px 16px; display: grid; gap: 12px; }
.btc-body > .note { padding: 0; }
.btc-amount { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.btc-amount > span:first-child { font: 700 28px/1 var(--mono); font-variant-numeric: tabular-nums; }
.btc-qr { justify-self: center; width: 232px; height: 232px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 6px; }
.btc-qr svg { display: block; width: 100%; height: 100%; }
.btc-address-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btc-address { flex-basis: 100%; font: 500 12.5px/1.5 var(--mono); word-break: break-all; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; user-select: all; }
.btc-status { margin: 0; font-weight: 600; font-size: 14px; }
.btc-status.paid { color: var(--open); }
.btc-status.seen { color: var(--caution); }
.btc-status.underpaid, .btc-status.expired { color: var(--closed); }
.btc-open { display: grid; gap: 6px; }
.btc-open button { justify-self: start; }
.plan-card .plan-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.admin-page .sub-head { font: 600 14px/1.3 var(--body); margin: 14px 0 4px; }
.plan-box .card-plan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface-2); font-size: 13.5px; color: var(--muted); }
.plan-box .card-plan strong { font: inherit; font-weight: 600; color: var(--ink); }
.card-plan-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.card-plan-actions .btn { margin-top: 0; }
/* The checkout screen's Recurring / One time switch (public/app.js openCheckout), between the card and PayPal ways to pay and crypto. */
.checkout-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 16px 4px; }
.mode-switch { display: inline-grid; grid-auto-flow: column; padding: 3px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface-2); }
.mode-switch button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 600 13.5px/1 var(--body); cursor: pointer; }
.mode-switch button::before { content: ""; width: 9px; height: 9px; border: 1.5px solid currentColor; border-radius: 50%; box-sizing: border-box; }
.mode-switch button[aria-checked="true"] { background: var(--ink); color: var(--surface); }
.mode-switch button[aria-checked="true"]::before { background: currentColor; }
.mode-switch button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.checkout-mode .note { margin: 0; flex: 1 1 200px; }
.mode-badge { margin-left: 8px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-2); font: 700 11px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); vertical-align: middle; }
.mode-badge.recurring { border-color: var(--ink); color: var(--ink); }
.modal-head .mode-badge { margin-left: auto; }
/* A kept 3-day pass: the bar on the home page, the plans box's list, and the countdown before it starts. */
.pass-ready { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--ink); border-radius: 10px; background: var(--surface-2); font-size: 14px; }
.pass-ready > span { flex: 1 1 220px; }
.plan-queue { display: grid; gap: 6px; font-size: 13.5px; color: var(--muted); }
.plan-queue > span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.plan-queue .btn { margin-top: 0; }
#passDialog { width: min(440px, calc(100% - 32px)); }
.pass-body { padding: 14px 16px 16px; }
.pass-warn { margin: 0 0 12px; font-size: 15px; line-height: 1.45; }
.pass-count { margin: 0 0 14px; font: 700 26px/1.2 var(--display); font-variant-numeric: tabular-nums; }
.pass-actions { display: flex; justify-content: flex-end; gap: 8px; }
.pass-actions .btn { margin-top: 0; }
.plan-card .plan-actions .btn { margin-top: 0; }

/* ---- Plain pages (unsubscribe, errors) ---- */
.msg-page { max-width: 640px; padding-top: 40px; }
.msg-body { padding: 16px; }
.msg-body p { margin: 0 0 12px; }

/* ---- Page footer: the disclaimer and the links every page needs (privacy, about, contact) ---- */
.site-foot { display: grid; gap: 6px; padding: 0 4px; font-size: 13px; color: var(--muted); }
.site-foot p { margin: 0; max-width: 90ch; }
.site-foot a { color: inherit; }
.site-foot a:hover { color: var(--ink); }
.link-btn-inline { border: 0; padding: 0; background: none; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.link-btn-inline:hover { color: var(--ink); }
/* The cookie prompt: a bar along the bottom until the visitor answers; "Cookie choices" in the footer brings it back. */
.cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line-2); box-shadow: 0 -8px 24px rgba(0, 0, 0, .25); }
.cookie-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.cookie-text { margin: 0; flex: 1 1 320px; font-size: 14px; }
.cookie-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* reCAPTCHA's floating badge stays out of the way; the notice in the sign-in dialog carries the required credit. */
.grecaptcha-badge { visibility: hidden; }

/* ---- Long-form pages (the privacy policy): one readable column in a panel ---- */
.doc-page { max-width: 780px; padding-top: 28px; }
.doc { padding: 6px 18px 22px; }
.doc h3 { margin: 22px 0 6px; font: 700 15.5px/1.3 var(--display); color: var(--ink); }
.doc h3:first-child { margin-top: 12px; }
.doc p, .doc li { color: var(--muted); font-size: 14.5px; max-width: 72ch; }
.doc p { margin: 0 0 10px; }
.doc ul { margin: 0 0 10px; padding-left: 20px; }
.doc li { margin: 0 0 4px; }
.doc table { border-collapse: collapse; width: 100%; margin: 4px 0 12px; font-size: 13.5px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.doc th { color: var(--ink); font-weight: 600; }
.doc .updated { font-size: 12.5px; color: var(--muted); }
.doc .link-btn { margin-top: 8px; }

/* ---- Admin dashboard ---- */
.admin-page .brand .mark { font-size: 20px; }
.admin-form { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; padding: 14px 16px; }
.admin-form input, .admin-form select, .admin-actions input, .admin-actions select { min-height: 36px; }
.admin-table-wrap { overflow-x: auto; }
.admin tr.pick { cursor: pointer; }
.admin tr.pick:hover td { background: var(--surface-2); }
.admin tr.sel td { background: var(--surface-2); font-weight: 500; }
.admin-detail { padding: 6px 16px 4px; }
.admin-detail .receipt { grid-template-columns: max-content minmax(0, 1fr); }
.admin-detail .receipt dd { font-family: inherit; word-break: normal; }
.admin-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px 24px; padding-bottom: 8px; }
.admin-cols h3 { margin: 8px 0 4px; font-size: 13.5px; }
.admin-list { max-height: 260px; }
.admin-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13.5px; }
.house-list { max-height: none; }
.house-list .house-item { align-items: center; justify-content: flex-start; }
.house-list .house-item > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.house-thumb { flex: 0 0 auto; width: 120px; max-height: 64px; object-fit: contain; border: 1px solid var(--line-2); border-radius: 4px; background: var(--surface-2); display: grid; place-items: center; font-size: 12px; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 10px 14px; padding: 12px 16px; border-top: 1px solid var(--line); align-items: end; }
.admin .btn.danger { border-color: var(--closed); color: var(--closed); }
.admin-log { list-style: none; margin: 0; padding: 8px 16px; font-size: 13px; color: var(--muted); display: grid; gap: 4px; max-height: 220px; overflow: auto; }
.health { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 12px 16px; font-size: 13.5px; color: var(--muted); }
.health b { color: var(--ink); font-weight: 600; }
/* Closure model dashboard */
.md-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.md-seg .btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.md-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; padding: 14px 16px 4px; }
.md-kpi { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--surface-2); min-width: 0; }
.md-kpi-v { font: 600 26px/1.1 var(--mono); }
.md-kpi-l { font-size: 13px; font-weight: 600; margin-top: 2px; }
.md-kpi-s { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.md-cols { padding: 6px 16px 12px; }
.md-pad { padding: 10px 16px 0; }
.md-tag { display: inline-block; padding: 1px 7px; border-radius: 5px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.md-tag.ok { background: var(--open-bg); color: var(--open); }
.md-tag.warn { background: var(--caution-bg); color: var(--caution); }
.md-tag.bad { background: var(--closed-bg); color: var(--closed); }
.md-tag.muted { background: var(--surface-2); color: var(--muted); }
.md-call.bad { color: var(--closed); }
.md-call.warn { color: var(--caution); }
.md-why { color: var(--muted); max-width: 420px; }
.md-detail-row > td { background: var(--surface-2); }
.md-detail { padding: 4px 0 8px; }
.md-detail h3 { margin: 10px 0 4px; font-size: 13.5px; }
.md-verdict { margin: 4px 0 6px; font-size: 14px; }
.md-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 8px 24px; align-items: start; }
.md-chip { margin: 10px 0 0; }
.md-chip canvas { width: 246px; max-width: 100%; height: auto; border: 1px solid var(--line-2); border-radius: 6px; image-rendering: pixelated; display: block; }
.md-chip figcaption { font-size: 12.5px; color: var(--muted); margin-top: 4px; max-width: 246px; }
.md-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 12px; margin: 0; font-size: 13px; }
.md-dl dt { color: var(--muted); }
.md-dl dd { margin: 0; }
.md-metars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.md-metars li.md-hit { color: var(--closed); }
.md-metars code { display: block; font-family: var(--mono); font-size: 12px; color: var(--muted); word-break: break-word; margin-top: 1px; }

/* ---- Hidden while the lightning-risk model is untrained ---- */
.tile[data-level="risk"], .panel[aria-labelledby="riskH"], th:has(> button[data-sort="risk"]), td.c-risk,
#seg button[data-level="risk"], section:has(> #dRisk) { display: none !important; }

/* ---- Responsive ---- */
@media (max-width: 1240px) {
  .split { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (max-width: 1000px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .list { max-height: none; }
  /* One column: the stations near you and your own (once there are some) above the map, the lists below it, and the
     stations table after the lists. */
  .side, .main-col { display: contents; }
  #nearPanel { order: -2; }
  .split:has(#favList .row-btn) #favPanel { order: -1; }
  #tablePanel { order: 1; }
}
/* The top bar keeps one row down to 1101px: the gaps and the search narrow, the search's "/" hint goes, Donate keeps its
   heart alone (its name stays for screen readers). Below that the search and the times take rows of their own. */
@media (max-width: 1360px) {
  .bar-inner { gap: 10px 14px; }
  .find { flex-basis: 260px; }
}
@media (max-width: 1180px) {
  .bar-inner { gap: 10px; }
  .find { flex-basis: 220px; }
  .find-key { display: none; }   /* (the "/" shortcut still works; its hint gives the placeholder room) */
  .bar-actions .donate { font-size: 0; gap: 0; width: 44px; padding: 0; justify-content: center; }
  .bar-actions .donate::before { font-size: 14px; }
}
@media (max-width: 1100px) {
  .bar-inner { gap: 8px 12px; padding: 10px 16px; }
  .find { order: 5; flex-basis: 100%; max-width: none; }
  .fresh { order: 6; flex-basis: 100%; margin-left: 0; }
  .fresh-a, .fresh-b { display: inline; }
  .fresh-b { padding-left: 0; margin-top: 0; }
  .fresh-b::before { content: "\00a0\00b7\00a0"; }
  .bar-actions { margin-left: auto; }
  .bar-actions .donate { font-size: 14.5px; gap: 6px; width: auto; padding: 0 14px; }
}
@media (max-width: 720px) {
  /* A phone's top bar keeps the menu, the name, the language switch, the account and refresh: Donate and Settings are
     in the menu. */
  .bar-actions .donate, #settingsBtn { display: none; }
  .lang-btn { display: inline-flex; }
  .wrap { padding: 12px 12px 56px; gap: 12px; }
  .wm-name { font-size: 20px; }
  .wm-sub { display: none; }
  .now-line { font-size: 16.5px; }
  /* Vertical padding on an inline element widens what a thumb can hit (a 22px line plus 22px comes to 44px) without
     changing the line's height. */
  .linklike { padding: 11px 0; }
  .tile { min-height: 40px; padding: 0 12px; font-size: 14px; }
  /* The radar bar and the note under the map on a phone: below it, not over it. */
  .map-bars { position: static; gap: 0; }
  .radar-bar { border: 0; border-top: 1px solid var(--line); border-radius: 0; }
  .lock-note { position: static; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
  /* The map is short on a phone: its buttons in a row at the top beside the layers (a touch screen pinches to zoom, so
     it has no zoom buttons). */
  .map-tools { top: 8px; right: 8px; flex-direction: row; gap: 4px; }
  .map-layers { top: 8px; left: 8px; }
  .map-clock { top: 52px; left: 8px; transform: none; min-height: 30px; padding: 0 10px; font-size: 12.5px; }
  .tool { width: 40px; height: 40px; }
  .toggle { min-height: 36px; padding: 0 10px; font-size: 13.5px; }
  /* The filters in one row that scrolls sideways, not three rows above the map. */
  .now { min-width: 0; }
  /* (6px inside it above and below, given back by the margin: room for a tile's focus ring, which the scroller clips.) */
  .now-filters { flex: 1 1 100%; min-width: 0; max-width: calc(100% + 24px); flex-wrap: nowrap; overflow-x: auto; margin: -4px -12px; padding: 6px 12px; scrollbar-width: none; }
  .now-filters::-webkit-scrollbar { display: none; }
  .tile { flex: none; }
  thead { display: none; }
  table, tbody, tr, td { display: block; }
  tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  td { padding: 0; border: 0; }
  tbody tr.lv-closed, tbody tr.lv-caution { box-shadow: inset 3px 0 0 var(--stripe); }
  tbody tr.lv-closed { --stripe: var(--closed); }
  tbody tr.lv-caution { --stripe: var(--caution); }
  tbody tr.lv-closed td:first-child, tbody tr.lv-caution td:first-child { box-shadow: none; }
  td.c-code { grid-column: 1; grid-row: 1; }
  td.c-status { grid-column: 2; grid-row: 1; }
  td.c-place, td.c-alert, td.c-lx, td.c-risk, td.c-until { grid-column: 1 / -1; }
  td.c-lx:not(:empty)::before { content: "Lightning "; color: var(--muted); }
  td.c-lx { white-space: normal; }
  td.c-until:not(:empty)::before { content: "Advisory window ends "; color: var(--muted); }
  td.c-until { white-space: normal; }
  /* The most-closed board has four short columns and stays a table (and so does its counts table). */
  .board, .board-counts { display: table; }
  .board thead, .board-counts thead { display: table-header-group; }
  .board tbody, .board-counts tbody { display: table-row-group; }
  .board tr, .board-counts tr { display: table-row; padding: 0; border: 0; }
  .board th, .board td { display: table-cell; padding: 8px 10px; border-bottom: 1px solid var(--line); }
  .board-counts th, .board-counts td { display: table-cell; padding: 5px 8px; border-bottom: 1px solid var(--line); }
  .board tr.board-detail > td { padding: 4px 10px 12px; }
}
@media (max-width: 600px) {
  dialog.sheet { inset: auto 0 0 0; width: 100%; height: auto; max-height: 90%; border-left: 0; border-top: 1px solid var(--line); border-radius: 14px 14px 0 0; box-shadow: 0 -16px 40px rgba(0, 0, 0, .24); }
  dialog.sheet.beside { top: auto; height: auto; max-height: 55%; }   /* the map stays in view above it */
  .sheet-head { padding-top: 12px; }
  .sheet-head h2 { font-size: 26px; }
  /* The 12-hour strip on a phone: two rows of six, nothing to swipe sideways for. */
  .fc-hours { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; overflow: visible; }
  .fc-h { min-width: 0; padding: 6px 0; }
  .find-state { max-width: 40%; font-size: 13px; }
}
@media (pointer: coarse) {
  #zoomIn, #zoomOut { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #map .ring { animation: none; opacity: .45; transform: scale(1.8); }
  #map .tornado { animation: none; }
  .link-channel summary::before { transition: none; }
}