/* Amazon Flex Weather Tracker
   An operations-board look: hairlines, a tight 4px spacing scale, tabular figures, one accent,
   status colours only where they mean something. Type is IBM Plex Sans / Plex Mono with Barlow
   Condensed for the masthead and the big numbers, all served by this server. */

@font-face { font-family: "Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("vendor/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("vendor/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("vendor/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("vendor/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Cond"; font-style: normal; font-weight: 600; font-display: swap; src: url("vendor/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Cond"; font-style: normal; font-weight: 700; font-display: swap; src: url("vendor/barlow-condensed-latin-700-normal.woff2") format("woff2"); }

:root {
  --ground: #F2F3F5;
  --surface: #FFFFFF;
  --surface-2: #F7F8FA;
  --line: #E2E5E9;
  --line-2: #C7CCD3;
  --ink: #16191E;
  --muted: #5E6672;
  --accent: #1E4E8C;
  --bar: #14171C;
  --bar-ink: #F2F3F5;
  --bar-muted: #99A2AD;
  --bar-line: #2B3138;
  --open: #1A7A3E;
  --open-bg: #E3F3E8;
  --caution: #9B5A00;
  --caution-bg: #FAEFD8;
  --closed: #B3261E;
  --closed-bg: #FCE6E3;
  --closed-fill: #B3261E;
  --unknown: #6B7380;
  --unknown-bg: #ECEEF1;
  --land: #E7EAEE;
  --border-line: #FFFFFF;
  --sea: transparent;
  --tip-bg: #16191E;
  --tip-ink: #F2F3F5;
  --scrim: rgba(16, 19, 24, .48);
  --focus: #1E4E8C;
  --strike: #5A3FD1;
  --tornado: #C2410C;
  --display: "Barlow Cond", "Bahnschrift", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Plex Mono", ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --radius: 6px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0E1114; --surface: #171B20; --surface-2: #1D2228; --line: #2A3038; --line-2: #3B434D;
    --ink: #E7EAEE; --muted: #98A1AC; --accent: #8DB5E8;
    --bar: #0A0C0F; --bar-ink: #E7EAEE; --bar-muted: #8B949F; --bar-line: #2A3038;
    --open: #48B56D; --open-bg: rgba(72, 181, 109, .14); --caution: #E2A33D; --caution-bg: rgba(226, 163, 61, .14);
    --closed: #F16A5E; --closed-bg: rgba(241, 106, 94, .15); --closed-fill: #C4392D;
    --unknown: #8B949F; --unknown-bg: rgba(139, 148, 159, .14);
    --land: #242A32; --border-line: #0E1114; --tip-bg: #E7EAEE; --tip-ink: #0E1114; --scrim: rgba(0, 0, 0, .62);
    --focus: #8DB5E8; --strike: #AE95FF; --tornado: #F3904F;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0E1114; --surface: #171B20; --surface-2: #1D2228; --line: #2A3038; --line-2: #3B434D;
  --ink: #E7EAEE; --muted: #98A1AC; --accent: #8DB5E8;
  --bar: #0A0C0F; --bar-ink: #E7EAEE; --bar-muted: #8B949F; --bar-line: #2A3038;
  --open: #48B56D; --open-bg: rgba(72, 181, 109, .14); --caution: #E2A33D; --caution-bg: rgba(226, 163, 61, .14);
  --closed: #F16A5E; --closed-bg: rgba(241, 106, 94, .15); --closed-fill: #C4392D;
  --unknown: #8B949F; --unknown-bg: rgba(139, 148, 159, .14);
  --land: #242A32; --border-line: #0E1114; --tip-bg: #E7EAEE; --tip-ink: #0E1114; --scrim: rgba(0, 0, 0, .62);
  --focus: #8DB5E8; --strike: #AE95FF; --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 14px/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: 500 13px/1.2 var(--mono); letter-spacing: 0; }
.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; }

/* ---- 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: 1320px; margin: 0 auto; padding: 0 20px; min-height: 60px; display: flex; align-items: center; gap: 12px 28px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
.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 { margin: 0; display: flex; flex-direction: column; line-height: 1; }
.brand .kicker { font: 600 10.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--bar-muted); margin-bottom: 3px; }
.brand .word { font: 700 24px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.fresh { margin-left: auto; display: flex; align-items: baseline; 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; }
.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: var(--open); box-shadow: 0 0 0 3px rgba(72, 181, 109, .18); margin-right: 4px; vertical-align: 1px; }
.live-dot.stale { background: var(--caution); box-shadow: 0 0 0 3px rgba(226, 163, 61, .18); }
.live-dot.down { background: var(--closed); box-shadow: 0 0 0 3px rgba(241, 106, 94, .2); }
.bar-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.btn-bar { padding: 0 12px; min-height: 34px; border-radius: var(--radius); border: 1px solid var(--bar-line); background: transparent; color: var(--bar-ink); font-weight: 500; font-size: 13px; 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); }
.btn-bar.icon { padding: 0 8px; }
.btn-bar.donate { border-color: var(--bar-muted); }
.btn-bar.donate::before { content: "♥"; font-size: 12px; line-height: 1; }
.btn-bar.icon .ic { width: 16px; height: 16px; }
.btn-bar.primary:hover { opacity: .92; }

/* ---- Layout ---- */
.wrap { max-width: 1320px; margin: 0 auto; padding: 20px 20px 64px; display: grid; gap: 20px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; padding: 11px 16px; border-bottom: 1px solid var(--line); min-height: 46px; }
.panel-head h2 { margin: 0; font: 600 17px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.panel-head .hint { font-size: 12.5px; color: var(--muted); }
.banner { border: 1px solid var(--closed); background: var(--closed-bg); color: var(--ink); border-radius: 8px; 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: 13px; 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: 40; background: var(--tip-bg); color: var(--tip-ink); padding: 10px 14px; border-radius: var(--radius); font-size: 13px; max-width: min(540px, calc(100% - 32px)); box-shadow: 0 10px 30px rgba(0, 0, 0, .28); }
.badge { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.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; }

/* ---- Summary strip ---- */
.summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.tile { appearance: none; text-align: left; border: 0; border-left: 1px solid var(--line); background: transparent; padding: 14px 16px 12px; display: grid; gap: 4px; align-content: start; min-width: 0; position: relative; color: inherit; }
.tile:first-child { border-left: 0; }
.tile:hover { background: var(--surface-2); }
.tile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--swatch, var(--ink)); opacity: 0; }
.tile[aria-pressed="true"] { background: var(--surface-2); }
.tile[aria-pressed="true"]::after { opacity: 1; }
.tile-label { font: 600 11px/1.3 var(--body); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.tile-label::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--swatch, var(--muted)); flex: none; }
.tile-num { font: 700 42px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--num, var(--ink)); }
.tile-note { font-size: 12px; color: var(--muted); min-height: 1.5em; overflow-wrap: anywhere; }
.tile[data-level="closed"] { --swatch: var(--closed); --num: var(--closed); }
.tile[data-level="caution"] { --swatch: var(--caution); --num: var(--caution); }
.tile[data-level="open"] { --swatch: var(--open); --num: var(--open); }
.tile[data-level="all"] { --swatch: var(--line-2); }
.tile[data-level="lightning"] { --swatch: var(--strike); --num: var(--strike); }
.tile[data-level="risk"] { --swatch: var(--strike); }
.tile.hot { background: var(--closed-fill); color: #fff; --swatch: #fff; --num: #fff; }
.tile.hot .tile-label, .tile.hot .tile-note { color: rgba(255, 255, 255, .85); }
.tile.hot:hover { background: var(--closed-fill); }

/* ---- Map and side column ---- */
.split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.map-head { align-items: center; }
.home-pick { display: flex; gap: 6px; align-items: center; position: relative; }
.home-pick input { width: 240px; max-width: 100%; }
/* Autocomplete under the station boxes (the map's picker and the watched-station rows). */
.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: 13px; 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-weight: 600; color: var(--ink); }
.suggest .s-place { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest .s-addr { color: var(--ink); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-place .addr { white-space: normal; }
.layers { display: flex; gap: 4px 14px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--muted); margin-inline: auto 0; }
.layers label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.layers input { margin: 0; accent-color: var(--ink); }
.map-box { position: relative; padding: 8px 12px 4px; 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 .borders { fill: none; stroke: var(--border-line); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
#map .dot { stroke: var(--surface); stroke-width: .8; cursor: pointer; vector-effect: non-scaling-stroke; }
#map .dot.open { fill: var(--open); fill-opacity: .7; }
#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(--surface); 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; }
#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; }
.radar-bar { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; padding: 6px 16px 0; font-size: 12.5px; color: var(--muted); }
.radar-bar input[type="range"] { flex: 1 1 160px; min-width: 120px; margin: 0; accent-color: var(--accent); }
/* Fixed widths for the parts whose text changes as the loop plays, so the slider never changes length. */
.radar-bar .radar-time { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; 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: 30px; padding: 0 7px; }
.radar-bar .btn.small.icon .ic { width: 14px; height: 14px; }
.legend i.radar-key { width: 44px; height: 8px; border-radius: 2px; background: linear-gradient(90deg, #04e9e7, #019ff4, #0300f4, #02fd02, #01c501, #008e00, #fdf802, #e5bc00, #fd9500, #fd0000, #d40000, #bc0000, #f800fd, #9854c6); }
/* 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: 13px; }
.fc-day:first-child { border-top: 0; }
.fc-name { font-weight: 500; }
.fc-short { color: var(--muted); }
.fc-src { margin-top: 8px; }
@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; }
/* 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: 34px; }
.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: 13px; }
.admin-list { max-height: 260px; }
.admin-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13px; }
.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: 12.5px; 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: 13px; color: var(--muted); }
.health b { color: var(--ink); font-weight: 600; }
.map-empty { padding: 48px 16px; text-align: center; color: var(--muted); }
.lock-note { position: absolute; left: 12px; right: 12px; bottom: 8px; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 8px 12px; font-size: 12.5px; color: var(--muted); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.legend { display: flex; gap: 6px 16px; flex-wrap: wrap; padding: 6px 16px 12px; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 8px; height: 8px; 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); }
.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: 12.5px; line-height: 1.45; max-width: 270px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.tip .code { font-size: 13px; }
.side { display: grid; gap: 20px; min-width: 0; }
.list { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow: auto; }
.list li + li { border-top: 1px solid var(--line); }
.row-btn { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; width: 100%; text-align: left; padding: 10px 16px 10px 14px; background: none; border: 0; border-left: 3px solid var(--stripe, transparent); color: inherit; }
.row-btn:hover { background: var(--surface-2); }
#closedList .row-btn { --stripe: var(--closed); }
#lxList .row-btn { --stripe: var(--strike); }
#changeList .row-btn { --stripe: var(--line-2); }
.row-btn .where { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.row-btn .where .code { font-weight: 500; }
.row-btn .where span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; }
.row-btn .why { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); }
.row-btn .when { font: 500 12px/1.4 var(--mono); color: var(--muted); white-space: nowrap; }
.empty { padding: 18px 16px; color: var(--muted); margin: 0; font-size: 13px; }
.shift { font-weight: 600; font-size: 12.5px; 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: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; 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: 36px; 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: .8; }
.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: 34px; font-size: 13px; 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 12px; min-height: 36px; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-weight: 500; font-size: 13px; 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); }
.btn.primary:hover { opacity: .92; background: var(--ink); }
.btn.small { min-height: 30px; padding: 0 10px; font-size: 12.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: 500 13px/1.3 var(--mono); 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 12px; min-height: 36px; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 500; font-size: 13px; }
.link-btn:hover { border-color: var(--muted); }
.link-btn.primary { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.note { font-size: 12.5px; color: var(--muted); margin: 0; }
.note.mt { margin-top: 8px; }

/* ---- Account panel ---- */
.account-body { padding: 16px; display: grid; gap: 16px; }
.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-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; }
.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, ui-monospace, monospace); 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; }
.push-field .note { flex: 1 1 200px; }
.quiet-row input[type="time"] { min-height: 36px; 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: 13px; 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: 12.5px; }
.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: 13px; cursor: pointer; }
.auto-toggle input { margin: 0; accent-color: var(--ink); }
.plan-box { display: grid; gap: 10px; }
.plan-box > strong { font: 600 15px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.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 11px/1.3 var(--body); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.plan-price { font: 700 26px/1 var(--display); letter-spacing: .01em; }
.plan-price .muted { font: 400 12.5px/1.2 var(--body); }
.plan-card ul { margin: 2px 0 0; padding-left: 16px; font-size: 12.5px; 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: 13px; }
.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: 13px; font-weight: 500; color: var(--ink); list-style: none; display: flex; align-items: center; gap: 8px; }
.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: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; padding: 0 16px; }
.captcha-row .field.grow { flex: 1 1 140px; min-width: 140px; }
.captcha-img { width: 180px; height: 60px; border: 1px solid var(--line-2); border-radius: var(--radius); background: #f3f5f8; display: grid; place-items: center; overflow: hidden; font-size: 12px; color: #5E6672; }
.captcha-img svg { display: block; width: 180px; height: 60px; }
.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: 4px; font-size: 11.5px; 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: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; 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; letter-spacing: inherit; text-transform: inherit; color: inherit; }
th button[aria-sort]::after { content: " ↓"; }
th button[aria-sort="ascending"]::after { content: " ↑"; }
td { padding: 9px 14px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 13px; }
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: 12px; color: var(--muted); margin-top: 2px; }
.al-title { display: block; }
.al-group { display: block; font-size: 12px; color: var(--muted); }
.c-until, .c-lx { white-space: nowrap; }
.lx-hit { color: var(--strike); font-weight: 600; }
.risk-val { font-weight: 600; }
.risk-val.hi { color: var(--strike); }
.table-foot { margin: 0; padding: 12px 16px; font-size: 12.5px; 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: 36px; }
.star { background: none; border: 0; padding: 2px; margin-left: 4px; color: var(--line-2); vertical-align: -1px; line-height: 1; }
.star .ic { width: 15px; height: 15px; stroke-width: 1.8; }
.star:hover { color: var(--caution); }
.star.on { color: var(--caution); }
.star.on .ic { fill: currentColor; }
.c-code .star { margin-left: 6px; }

/* ---- Status pill: a dot and a word ---- */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.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: 600 11.5px/1.3 var(--body); letter-spacing: .09em; text-transform: uppercase; color: var(--ink); }
.method p, .method ul { margin: 0 0 8px; color: var(--muted); max-width: 62ch; font-size: 13px; }
.method ul { padding-left: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { font-size: 12px; padding: 2px 8px; border-radius: 4px; background: var(--closed-bg); color: var(--closed); }

/* ---- Detail sheet ---- */
dialog.sheet { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(480px, 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, .18); overflow: auto; overscroll-behavior: contain; }
dialog.sheet::backdrop { background: var(--scrim); }
.sheet-head { position: sticky; top: 0; z-index: 1; background: var(--surface); border-bottom: 1px solid var(--line); padding: calc(16px + env(safe-area-inset-top, 0px)) 20px 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sheet-head h2 { margin: 0; font: 700 32px/1 var(--display); letter-spacing: .03em; }
.sheet-head h2:focus { outline: none; }
.sheet-head .place { margin: 4px 0 0; color: var(--muted); }
.close-btn { flex: none; width: 34px; height: 34px; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--surface); font-size: 18px; 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: 18px; }
.sheet-body > * { min-width: 0; }
.sheet h3 { margin: 0 0 8px; font: 600 11.5px/1.3 var(--body); letter-spacing: .09em; text-transform: uppercase; color: var(--ink); }
.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0; }
.facts dt { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.alerts { display: grid; gap: 10px; }
.alert-card { border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 6px; }
.alert-card.lv-closed { border-left-color: var(--closed); }
.alert-card.lv-caution { border-left-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: 12px; color: var(--muted); }
.alert-card .ac-title { font-weight: 600; }
.alert-card .ac-msg { margin: 0; color: var(--muted); font-size: 13px; }
.alert-card .ac-time { font: 500 12px/1.4 var(--mono); color: var(--muted); }
.links { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- Modals ---- */
dialog.modal { margin: auto; width: min(460px, calc(100% - 32px)); border: 1px solid var(--line-2); border-radius: 10px; padding: 0; background: var(--surface); color: var(--ink); box-shadow: 0 20px 50px rgba(0, 0, 0, .28); }
dialog.modal::backdrop { background: var(--scrim); }
.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: 600 19px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; }
.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; }

/* ---- 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(--display); letter-spacing: .01em; 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: 13px; }
.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; }
.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; }

/* ---- "Your stations": starred stations with their status, coloured by level ---- */
#favList li.lv-closed .why { color: var(--closed); font-weight: 600; }
#favList li.lv-caution .why { color: var(--caution); font-weight: 600; }
#favList li.lv-open .why { color: var(--open, var(--muted)); }

/* ---- Page footer: the disclaimer and the links every page needs (privacy, about, contact) ---- */
.site-foot { display: grid; gap: 6px; padding: 0 4px; font-size: 12.5px; color: var(--muted); }
.site-foot p { margin: 0; max-width: 90ch; }
.site-foot a { color: inherit; }
.site-foot a:hover { color: var(--ink); }

/* 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: 600 12px/1.3 var(--body); letter-spacing: .09em; text-transform: uppercase; color: var(--ink); }
.doc h3:first-child { margin-top: 12px; }
.doc p, .doc li { color: var(--muted); font-size: 13.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: 13px; }
.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: 12px; color: var(--muted); }
.doc .link-btn { margin-top: 8px; }

/* ---- 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: 1100px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .bar-inner { flex-wrap: wrap; padding: 10px 16px; gap: 8px 16px; }
  .fresh { order: 3; flex-basis: 100%; margin-left: 0; }
  .bar-actions { margin-left: auto; }
}
@media (max-width: 900px) {
  .summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile { border-top: 1px solid var(--line); }
  .tile:nth-child(-n + 3) { border-top: 0; }
  .tile:nth-child(3n + 1) { border-left: 0; }
}
@media (max-width: 720px) {
  .wrap { padding: 16px 16px 56px; gap: 16px; }
  .brand .word { font-size: 21px; }
  .tile-num { font-size: 36px; }
  .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile:nth-child(-n + 3) { border-top: 1px solid var(--line); }
  .tile:nth-child(-n + 2) { border-top: 0; }
  .tile:nth-child(3n + 1) { border-left: 1px solid var(--line); }
  .tile:nth-child(2n + 1) { border-left: 0; }
  .tile[data-level="all"] { grid-column: span 2; }
  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; }
  .list { max-height: none; }
}
@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: 12px 12px 0 0; box-shadow: 0 -16px 40px rgba(0, 0, 0, .22); }
  .sheet-head { padding-top: 14px; }
  .sheet-head h2 { font-size: 28px; }
  /* 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; }
}
@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; }
}