/* Doppler's Outlook: shared site styles */
:root {
  --bg: #eaeef1;
  --panel: #fbfcfd;
  --ink: #15202a;
  --muted: #5a6a77;
  --line: #d3dbe2;
  --chip: #e1e7ec;
  --accent: #c2661a;
  --accent-soft: #f5e2cf;
  --ocean: #c9d7e1;
  --land: #ebe7db;
  --border: #8d9ba6;
  --coast: #6c7c89;
  --iso: #1d2934;
  --cone: #ffffff;
  --live: #d63030;
  --cat-d: #3f7fd0;
  --cat-s: #d99a12;
  --cat-h: #d8402f;
  --cat-m: #8b2fb5;
  --f-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d151d; --panel: #141f29; --ink: #e2e9ef; --muted: #8a9baa; --line: #243341; --chip: #1c2935;
    --accent: #eb9a48; --accent-soft: #392818; --ocean: #0f2738; --land: #252f2a; --border: #5d6e7b;
    --coast: #7a8b99; --iso: #e8eef2; --cone: #e8eef2; --live: #ff5a5a; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d151d; --panel: #141f29; --ink: #e2e9ef; --muted: #8a9baa; --line: #243341; --chip: #1c2935;
  --accent: #eb9a48; --accent-soft: #392818; --ocean: #0f2738; --land: #252f2a; --border: #5d6e7b;
  --coast: #7a8b99; --iso: #e8eef2; --cone: #e8eef2; --live: #ff5a5a; color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 14px; line-height: 1.5; }
.page { max-width: 1320px; margin: 0 auto; padding-inline: 16px; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tag { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); white-space: nowrap; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.link { color: var(--accent); font-weight: 600; text-decoration: none; font-size: 13px; }
.link:hover { text-decoration: underline; }
h2.sec { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 26px; line-height: 1.1; letter-spacing: .01em; }
.sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.muted { color: var(--muted); }
.loading { color: var(--muted); font-size: 13px; padding: 12px 0; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 4px; border: 1px solid var(--line); background: var(--panel); text-decoration: none; font-weight: 600; font-size: 13px; cursor: pointer; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; flex: none; }

/* Top bar */
.topbar { background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; }
.topbar .page { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding-block: 10px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.brand svg { width: 28px; height: 28px; color: var(--accent); }
.brand b { font-family: var(--f-display); font-weight: 700; font-size: 26px; letter-spacing: .04em; line-height: 1; white-space: nowrap; }
.brand b span { color: var(--accent); }
.nav { display: flex; gap: 2px; overflow-x: auto; flex: 1 1 auto; min-width: 0; }
.nav a { padding: 6px 7px; border-radius: 4px; text-decoration: none; color: var(--muted); font-weight: 500; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); background: var(--chip); }
.watch { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 4px; background: var(--ink); color: var(--panel); text-decoration: none; font-weight: 600; font-size: 13px; white-space: nowrap; }
.watch.is-live .dot { background: var(--live); }
.theme-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: -8px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--ink); cursor: pointer; }
.theme-btn:hover, .theme-btn:focus-visible { background: var(--chip); }
.theme-btn svg { width: 17px; height: 17px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.is-live .dot, .livepill .dot { animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 60%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none !important; } }

/* Notice */
.notice { margin-top: 16px; padding: 10px 14px; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent-soft); font-size: 13px; }

/* Alert ticker */
.ticker { border-bottom: 1px solid var(--line); }
.ticker .page { display: flex; gap: 8px 18px; align-items: center; flex-wrap: wrap; padding-block: 9px; font-size: 13px; }
.ticker strong { font-weight: 600; }
.ticker .item { display: inline-flex; align-items: center; }

footer { border-top: 1px solid var(--line); }
footer .page { display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; padding-block: 18px 28px; font-size: 12px; color: var(--muted); }
footer nav { display: flex; gap: 16px; flex-wrap: wrap; }
footer a { text-decoration: none; }
footer a:hover { color: var(--ink); }

/* Ad banner above the footer (added by common.js only when AdSense is set up) */
.ad-slot { display: flex; flex-direction: column; gap: 4px; min-height: 120px; padding-block: 16px 24px; }
.ad-slot:has(ins[data-ad-status="unfilled"]) { display: none; }   /* no ad to show: no empty box */
.ad-label { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; }

/* Plain text pages (privacy policy) */
.prose { max-width: 72ch; padding-block: 28px 48px; font-size: 15px; }
.prose h1 { font-family: var(--f-display); font-weight: 700; font-size: 44px; line-height: 1; margin: 0 0 4px; }
.prose h2 { font-size: 17px; margin: 28px 0 6px; }
.prose p, .prose li { color: var(--ink); }
.prose ul { padding-left: 20px; }
.prose li + li { margin-top: 6px; }

/* Maps (SVG, drawn with D3) */
svg.map { display: block; width: 100%; height: auto; max-width: 100%; background: var(--ocean); }
.map .land { fill: var(--land); stroke: var(--border); stroke-width: .6; }
.map .state { fill: none; stroke: var(--border); stroke-width: .5; }
.map .grat { fill: none; stroke: var(--iso); stroke-opacity: .1; stroke-width: .8; }
.map .cone { fill: var(--cone); fill-opacity: .45; stroke: var(--iso); stroke-opacity: .55; stroke-width: 1.2; }
.map .track { fill: none; stroke: var(--iso); stroke-width: 2; }
.map .past { fill: none; stroke: var(--iso); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; }
.map .pt { stroke: var(--panel); stroke-width: 2; }
.map .pt-letter { fill: #fff; font: 700 12px var(--f-body); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.map .lbl { fill: var(--ink); font: 500 13px var(--f-mono); paint-order: stroke; stroke: var(--panel); stroke-width: 4px; stroke-linejoin: round; }
.map .twoarea { fill: #e2a51c; fill-opacity: .25; stroke: #e2a51c; stroke-width: 1.5; stroke-dasharray: 5 4; }

/* Home: lead */
main.home { display: flex; flex-direction: column; gap: 32px; padding-block: 22px 40px; }
.lead { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.track-card { overflow: hidden; }
.track-head { padding: 18px 20px 14px; display: flex; flex-direction: column; gap: 10px; }
.kicker { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
.livepill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--live); }
.livepill .dot { background: var(--live); }
.storm-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.storm-tabs button { border: 1px solid var(--line); background: var(--panel); border-radius: 99px; padding: 3px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.storm-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.track-head h1 { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(34px, 5vw, 52px); line-height: .95; letter-spacing: .005em; text-wrap: balance; }
.track-head h1 .cat { font-size: .5em; vertical-align: middle; margin-left: 10px; padding: 2px 8px; border-radius: 4px; background: var(--cat-h); color: #fff; letter-spacing: .04em; }
.track-head p { margin: 0; max-width: 62ch; color: var(--muted); font-size: 15px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0; }
.stats div { padding: 10px 20px; display: flex; flex-direction: column; border-right: 1px solid var(--line); min-width: 0; }
.stats div:last-child { border-right: 0; }
.stats dt { font-size: 11px; color: var(--muted); }
.stats dd { margin: 0; font-family: var(--f-mono); font-size: 16px; font-weight: 500; }
.stats dd small { font-size: 12px; color: var(--muted); }
.track-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 12px 20px 16px; }
.keys { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.keys span { display: inline-flex; align-items: center; gap: 6px; }
.keys i { width: 16px; height: 16px; border-radius: 50%; display: inline-grid; place-items: center; font-style: normal; font-size: 9px; font-weight: 700; color: #fff; }
.keys .ln { width: 18px; height: 0; border-top: 3px solid; border-radius: 0; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.quiet { padding: 28px 20px; display: flex; flex-direction: column; gap: 10px; }
.quiet h1 { margin: 0; font-family: var(--f-display); font-size: 40px; line-height: 1; }

.outlooks { display: flex; flex-direction: column; }
.outlooks .sec-h { padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.hl { display: flex; flex-direction: column; gap: 3px; padding-block: 12px; border-bottom: 1px solid var(--line); text-decoration: none; }
.hl:hover h3 { color: var(--accent); }
.hl h3 { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.hl p { margin: 0; font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hl .meta { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--muted); }
.cat-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* Home: briefing + local */
.brief-row { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.brief { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.brief-controls { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.tabs { display: flex; gap: 4px; padding: 3px; background: var(--chip); border-radius: 6px; width: fit-content; max-width: 100%; overflow-x: auto; }
.tabs button { border: 0; background: none; padding: 6px 14px; border-radius: 4px; cursor: pointer; font-weight: 500; color: var(--muted); white-space: nowrap; }
.tabs button[aria-selected="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.layers { display: flex; gap: 6px; flex-wrap: wrap; }
.layers button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--panel); border-radius: 99px; padding: 3px 10px; font-size: 12.5px; cursor: pointer; color: var(--muted); }
.layers button[aria-pressed="true"] { color: var(--ink); border-color: var(--muted); }
.layers button[aria-pressed="false"] .sw { opacity: .25; }
.legend { display: flex; gap: 4px 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; }
.brief-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 24px; align-items: start; }
.brief-item { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 2px 10px; font-size: 13.5px; align-content: start; }
.brief-item .sw { margin: 5px 0 0; }
.brief-item b { font-weight: 600; }
.brief-item p { grid-column: 2; margin: 0; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.source { font-size: 11.5px; color: var(--muted); }

.local { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.loc-row { display: flex; gap: 8px; }
.loc-row select { flex: 1; min-width: 0; padding: 7px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
.loc-row .btn { padding: 7px 10px; }
.now { display: flex; align-items: center; gap: 16px; }
.now .temp { font-family: var(--f-display); font-weight: 700; font-size: 64px; line-height: .9; }
.now .temp sup { font-size: 26px; vertical-align: top; }
.now .sky { font-size: 15px; font-weight: 500; }
.now .feels { font-size: 12.5px; color: var(--muted); }
.obs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 0; }
.obs div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.obs dt { color: var(--muted); font-size: 12.5px; }
.obs dd { margin: 0; font-family: var(--f-mono); font-size: 13px; text-align: right; }
.days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; background: var(--chip); border-radius: 4px; font-size: 12px; text-align: center; }
.day b { font-weight: 600; }
.day .hilo { font-family: var(--f-mono); font-size: 12.5px; }
.day .pop { color: var(--cat-d); font-family: var(--f-mono); font-size: 11px; min-height: 1.4em; }

.fb { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.fb-frame { border-radius: 6px; overflow: hidden; background: #fff; min-height: 120px; }
.fb-frame iframe { display: block; border: 0; width: 100%; }
.fb-frame.fb-posts { background: none; border-radius: 0; display: flex; flex-direction: column; gap: 16px; max-height: 620px; overflow-y: auto; }
.fb-post { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.fb-post:last-child { border-bottom: 0; padding-bottom: 0; }
.fb-img { position: relative; border-radius: 6px; overflow: hidden; background: #0c1a26; display: grid; place-items: center; }
.fb-img img { display: block; width: 100%; max-height: 300px; object-fit: cover; }
.fb-img .play { position: absolute; width: 48px; height: 48px; border-radius: 50%; background: rgba(10,15,20,.65); display: grid; place-items: center; }
.fb-img .play svg { width: 18px; height: 18px; fill: #fff; margin-left: 3px; }
.fb-text { margin: 0; font-size: 14px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.fb-post:hover .fb-text { color: var(--accent); }
.fb-time { margin: 0; font-size: 12px; color: var(--muted); }
.fbfollow { justify-content: center; }
.fbfollow svg { width: 18px; height: 18px; color: #1877f2; }

/* Home: tools */
.tools { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.tool { padding: 14px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; position: relative; }
a.tool:hover { border-color: var(--accent); }
.tool svg { width: 26px; height: 26px; color: var(--accent); }
.tool b { font-family: var(--f-display); font-size: 19px; font-weight: 600; line-height: 1.1; }
.tool span { font-size: 12.5px; color: var(--muted); }
.tool .tag { position: absolute; top: 12px; right: 12px; }
.tool.soon { opacity: .6; }

/* Home: videos */
.videos { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.vid { display: flex; flex-direction: column; gap: 8px; text-decoration: none; min-width: 0; }
.thumb { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 6px; overflow: hidden; display: grid; place-items: center; background: #0c1a26; }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb .play { position: relative; width: 48px; height: 48px; border-radius: 50%; background: rgba(10,15,20,.65); display: grid; place-items: center; }
.thumb .play svg { width: 18px; height: 18px; fill: #fff; margin-left: 3px; }
.thumb .badge { position: absolute; left: 8px; top: 8px; background: var(--live); color: #fff; font-weight: 700; font-size: 11px; letter-spacing: .06em; padding: 1px 6px; border-radius: 3px; }
.vid h3 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; text-wrap: balance; overflow-wrap: anywhere; }
.vid:hover h3 { color: var(--accent); }
.vid p { margin: 0; font-size: 12px; color: var(--muted); }

@media (max-width: 1100px) {
  .tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .lead, .brief-row { grid-template-columns: minmax(0, 1fr); }
  .videos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .videos .vid:first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats div:nth-child(2) { border-right: 0; }
  .stats div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .brief-body { grid-template-columns: minmax(0, 1fr); }
  .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .videos { grid-template-columns: minmax(0, 1fr); }
  .track-head, .brief, .local, .fb { padding-inline: 14px; }
}

/* Storm page */
.h1link { color: inherit; text-decoration: none; }
.h1link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
main.storm-page { display: flex; flex-direction: column; gap: 20px; padding-block: 22px 40px; }
.storm-head { padding: 18px 20px 0; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.storm-head h1 { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(36px, 5.5vw, 60px); line-height: .95; text-wrap: balance; }
.storm-head h1 .cat { font-size: .45em; vertical-align: middle; margin-left: 12px; padding: 2px 8px; border-radius: 4px; color: #fff; letter-spacing: .04em; }
.storm-head .headline { margin: 0; max-width: 70ch; color: var(--muted); font-size: 16px; }
.storm-head .stats { margin: 4px -20px 0; border-bottom: 0; }
.stats-5 { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.6fr); }
.stats .dist { font-family: var(--f-body); font-size: 14px; }
a.storm-tab { border: 1px solid var(--line); background: var(--panel); border-radius: 99px; padding: 3px 12px; font-size: 12.5px; font-weight: 600; text-decoration: none; }
a.storm-tab[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.storm-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.map-panel { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.map-panel svg.map { border-radius: 4px; }
.card-pad { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.card-pad p { margin: 0; }
.card-pad h3 { margin: 8px 0 0; font-size: 15px; }
.keymsg { border-color: var(--accent); }
.keymsg ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.sw.grad { width: 60px; }
.map .ens-member { fill: none; stroke-width: 1; stroke-opacity: .35; vector-effect: non-scaling-stroke; }
.map .ens-mean { fill: none; stroke-width: 3.2; stroke-opacity: .95; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sw.ens { width: 18px; height: 0; border-radius: 0; border-top: 3px solid; background: none; vertical-align: 3px; }
.sw.dash { width: 18px; height: 0; border-radius: 0; border-top: 2px dashed; background: none; vertical-align: 3px; }
.table-wrap { overflow-x: auto; }
table.fcst { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fcst th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 6px 8px; border-bottom: 2px solid var(--ink); white-space: nowrap; }
.fcst td { padding: 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.fcst td small { color: var(--muted); }
.ptag { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 700; margin-right: 8px; vertical-align: -4px; }
svg.chart { display: block; width: 100%; height: auto; max-width: 100%; }
.chart .axis text { fill: var(--muted); font: 12px var(--f-mono); }
.chart .axis path, .chart .axis line { stroke: var(--line); }
.chart .axis-title { fill: var(--muted); font: 11px var(--f-body); }
.chart .band-lbl { fill: var(--muted); font: 600 11px var(--f-body); letter-spacing: .04em; }
.chart .pt-val { fill: var(--ink); font: 600 12px var(--f-mono); paint-order: stroke; stroke: var(--panel); stroke-width: 3px; }
.discussion p { max-width: 80ch; }
.discussion details { display: flex; flex-direction: column; gap: 10px; }
.discussion details p { margin-top: 10px; }
.discussion summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.discussion .source a { color: var(--muted); }
@media (max-width: 900px) {
  .storm-grid { grid-template-columns: minmax(0, 1fr); }
  .stats-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-5 div { border-bottom: 1px solid var(--line); }
  .stats-5 div:nth-child(2n) { border-right: 0; }
  .stats-5 div:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
}

/* Zoomable storm map */
.map-wrap { position: relative; border-radius: 4px; overflow: hidden; }
#stormMap path { vector-effect: non-scaling-stroke; }
#stormMap.zoomed { cursor: grab; }
#stormMap.zoomed:active { cursor: grabbing; }
.zoom-ctl { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--panel); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.zoom-ctl button { width: 34px; height: 34px; border: 0; background: var(--panel); font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink); }
.zoom-ctl button + button { border-top: 1px solid var(--line); }
.zoom-ctl button:hover { background: var(--chip); }
.zoom-ctl .save-img { display: grid; place-items: center; }
.zoom-ctl .save-img.busy { cursor: progress; opacity: .5; }.zoom-hint { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10, 15, 20, .45); color: #fff; font-weight: 600; font-size: 15px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.zoom-hint.show { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .zoom-hint { transition: none; } }

/* Intensity chart with model guidance */
.int-grid { display: flex; flex-direction: column; gap: 16px; }
.chart-wrap { position: relative; min-width: 0; }
.chart .guide { stroke: var(--muted); stroke-dasharray: 3 3; }
.chart-tip { position: absolute; top: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font-size: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.15); pointer-events: none; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
.chart-tip div { display: flex; align-items: center; gap: 6px; }
.chart-tip .mono { margin-left: auto; padding-left: 10px; }
.model-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 20px; font-size: 13px; align-items: start; }
.model-legend > .ml-row:first-child, .ml-actions { grid-column: 1 / -1; }
.ml-group { display: flex; flex-direction: column; gap: 2px; }
.ml-row { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 4px; text-align: left; }
button.ml-row { border: 0; background: none; cursor: pointer; color: var(--ink); }
button.ml-row:hover { background: var(--chip); }
button.ml-row[aria-pressed="false"] { color: var(--muted); }
button.ml-row[aria-pressed="false"] .ml-swatch { opacity: .25; }
.ml-swatch { display: inline-block; width: 16px; height: 4px; border-radius: 2px; flex: none; }
.ml-swatch.official { height: 5px; background: var(--ink); }
.ml-actions { display: flex; gap: 12px; }
.ml-actions button { border: 0; background: none; padding: 0; color: var(--accent); font-weight: 600; font-size: 12.5px; cursor: pointer; }
.intensity .source { margin: 0; max-width: 90ch; }


/* Model tracks legend on the storm map */
.ml-maplist { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; flex-basis: 100%; }
.ml-maplist > span { display: inline-flex; align-items: center; gap: 5px; }
.ml-maplist b { color: var(--ink); font-weight: 600; }
.ml-row small { font-size: 11px; margin-left: 2px; }

/* Collapsible long text on the storm page */
.clamp { display: flex; flex-direction: column; gap: 10px; max-height: 340px; overflow: hidden; position: relative; }
.clamp:not(.fits):not(.open)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(to bottom, transparent, var(--panel)); pointer-events: none; }
.clamp.fits, .clamp.open { max-height: none; }
.clamp-btn { align-self: flex-start; border: 0; background: none; padding: 0; color: var(--accent); font-weight: 600; font-size: 13px; cursor: pointer; }
.clamp-btn:hover { text-decoration: underline; }

/* Forecast trends */
.trends .sec-h { align-items: center; }
.trend-summary { margin: 0; font-size: 15px; font-weight: 500; max-width: 80ch; }
.trend-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.trend-grid figure { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.trend-grid svg { border-radius: 4px; }
#trendMap path { vector-effect: non-scaling-stroke; }
.chart .thresh { stroke: var(--muted); stroke-dasharray: 4 4; stroke-opacity: .6; }
.run-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.run-strip button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--panel); border-radius: 99px; padding: 3px 10px; font-size: 12.5px; cursor: pointer; }
.run-strip button:hover, .run-strip button:focus-visible { border-color: var(--run); }
@media (max-width: 900px) { .trend-grid { grid-template-columns: minmax(0, 1fr); } }

/* Severe page */
.stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sev-controls { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tabs button:disabled { opacity: .4; cursor: default; }
#sevMap path { vector-effect: non-scaling-stroke; }
.sw.hatch { background: repeating-linear-gradient(45deg, var(--ink) 0 1.5px, transparent 1.5px 5px); border: 1px solid var(--ink); }
.sw.dot { border-radius: 50%; }
.item-list { display: flex; flex-direction: column; gap: 12px; }
.sv-item { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.sv-item:last-child { border-bottom: 0; padding-bottom: 0; }
.sv-item.sub { padding-left: 18px; padding-bottom: 8px; }
.item-group { display: flex; flex-direction: column; gap: 8px; }
.item-h { display: flex; align-items: center; gap: 4px; }
.sv-item p { margin: 0; font-size: 13px; }
.pds { background: var(--live); color: #fff; font-size: 11px; padding: 1px 5px; border-radius: 3px; letter-spacing: .04em; }
.link-btn { align-self: flex-start; border: 0; background: none; padding: 0; color: var(--accent); font-weight: 600; font-size: 12.5px; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.rep-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.rep-filter button { border: 1px solid var(--line); background: var(--panel); border-radius: 99px; padding: 3px 12px; font-size: 12.5px; cursor: pointer; color: var(--muted); }
.rep-filter button[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
table.reports td { white-space: normal; vertical-align: top; }
table.reports td:first-child, table.reports td:nth-child(2) { white-space: nowrap; }
.rep-comment { color: var(--muted); font-size: 12.5px; max-width: 46ch; }
@media (max-width: 900px) { .stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tabs button small { font-size: 11px; color: var(--muted); margin-left: 2px; }
.ol-text { display: flex; flex-direction: column; gap: 10px; }
.ol-text p { margin: 0; }

/* Site menu with drop-downs */
.nav { overflow: visible; }
.nav-item { position: relative; }
.nav-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 7px; border: 0; border-radius: 4px; background: none; color: var(--muted); font-weight: 500; cursor: pointer; white-space: nowrap; }
.nav-btn svg { width: 10px; height: 6px; transition: transform .15s; }
.nav-btn:hover, .nav-item.open .nav-btn, .nav-item.active .nav-btn { color: var(--ink); background: var(--chip); }
.nav-item.open .nav-btn svg { transform: rotate(180deg); }
.nav-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; flex-direction: column; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.18); z-index: 30; }
.nav-menu a { padding: 8px 10px; border-radius: 4px; text-decoration: none; color: var(--ink); white-space: nowrap; }
.nav-menu a:hover, .nav-menu a:focus-visible { background: var(--chip); }
.nav-item.open .nav-menu { display: flex; }
@media (hover: hover) and (min-width: 761px) {
  .nav-item:hover .nav-menu { display: flex; }
  .nav-item:hover .nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
}
.menu-toggle { display: none; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); font-weight: 600; cursor: pointer; margin-left: auto; }
.menu-toggle svg { width: 18px; height: 13px; }
@media (prefers-reduced-motion: reduce) { .nav-btn svg { transition: none; } }
@media (max-width: 760px) {
  .menu-toggle { display: inline-flex; }
  .topbar .nav { display: none; order: 10; flex-basis: 100%; flex-direction: column; gap: 2px; padding-block: 6px; }
  body.menu-open .topbar .nav { display: flex; }
  .nav-item .nav-btn { display: none; }
  .nav-menu { display: flex; position: static; box-shadow: none; border: 0; padding: 0; min-width: 0; background: none; }
  .nav-item::before { content: attr(data-label); display: block; padding: 10px 10px 2px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .nav-menu a, .nav > a { padding: 9px 10px; }
  .nav-menu a { padding-left: 22px; }
}

/* Rain & Snow page */
.section-tabs { display: flex; gap: 0; border-top: 1px solid var(--line); margin: 6px -20px 0; overflow-x: auto; }
.section-tabs button { flex: 1 1 0; padding: 12px 16px; border: 0; border-right: 1px solid var(--line); background: none; font-family: var(--f-display); font-size: 19px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; }
.section-tabs button:last-child { border-right: 0; }
.section-tabs button[aria-selected="true"] { color: var(--ink); background: var(--accent-soft); box-shadow: inset 0 -3px 0 var(--accent); }
#wpcMap path { vector-effect: non-scaling-stroke; }
.map-loading { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--panel) 60%, transparent); font-weight: 600; }
.qpf-bar { display: flex; flex: 1 1 100%; max-width: 640px; }
.qpf-bar span { flex: 1; height: 12px; position: relative; }
.qpf-bar i { position: absolute; top: 14px; left: 0; font-style: normal; font-family: var(--f-mono); font-size: 10.5px; color: var(--muted); }
.qpf-bar + span { margin-top: 16px; }
.glance { display: flex; flex-direction: column; }
.glance button { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 8px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; color: var(--ink); }
.glance button:hover { background: var(--chip); }
.glance button[aria-pressed="true"] { background: var(--accent-soft); }
.glance button b { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; }

/* Satellite page */
.sat-storms { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 16px; }
.sat-storms:empty { display: none; }
.sat-storms button { border: 1px solid var(--line); background: var(--panel); border-radius: 99px; padding: 4px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.sat-storms button:hover { border-color: var(--accent); }
.sat-panel { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.sat-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; }
.sat-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sat-field select { padding: 7px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); min-width: 240px; max-width: 100%; }
.sat-hd { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; padding-bottom: 8px; cursor: pointer; }
.sat-stage { position: relative; display: grid; place-items: center; background: #05080b; border-radius: 4px; min-height: 240px; overflow: hidden; }
#satCanvas { display: block; max-width: 100%; height: auto; }
.sat-status { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(10, 15, 20, .8); color: #fff; padding: 6px 12px; border-radius: 4px; font-size: 13px; max-width: calc(100% - 28px); text-align: center; }
.sat-player { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sat-player .ctl { width: 36px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); cursor: pointer; color: var(--ink); }
.sat-player .ctl svg { width: 16px; height: 16px; fill: currentColor; }
.sat-player .ctl.play { background: var(--accent); border-color: var(--accent); color: #fff; }
#satFrame { flex: 1 1 200px; min-width: 0; accent-color: var(--accent); }
.sat-time { font-size: 13px; min-width: 20ch; }
.sat-speed { display: inline-flex; align-items: center; gap: 6px; }
.sat-speed select { padding: 5px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
@media (max-width: 600px) { .sat-field select { min-width: 0; width: 100%; } .sat-field { flex: 1 1 100%; } }

/* Models page */
.mv-page { padding-block: 16px 28px; display: flex; flex-direction: column; gap: 16px; }
.mv-runs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.mv-run { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel); cursor: pointer; font-size: 13px; }
.mv-run:hover { border-color: var(--muted); }
.mv-run[aria-pressed="true"] { border-color: var(--ink); }
.mv-pill { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 99px; background: var(--chip); color: var(--muted); }
.mv-pill.live { background: var(--accent-soft); color: var(--accent); }
.mv-grid { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px; align-items: start; }
.mv-rail { padding: 16px; display: flex; flex-direction: column; gap: 20px; }
.mv-sec { display: flex; flex-direction: column; gap: 8px; }
.mv-sec .source { margin: 0; }
.mv-models { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mv-models .chip { border: 1px solid var(--line); background: var(--panel); border-radius: 4px; padding: 6px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; line-height: 1.25; }
.mv-models .chip b { font-family: var(--f-mono); font-size: 13px; font-weight: 500; }
.mv-models .chip small { font-size: 11px; color: var(--muted); }
.mv-models .chip:hover { border-color: var(--muted); }
.mv-models .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.mv-models .chip[aria-pressed="true"] small { color: inherit; opacity: .75; }
.mv-group { display: flex; flex-direction: column; gap: 1px; }
.mv-group + .mv-group { margin-top: 8px; }
.mv-group h3 { margin: 0 0 2px; }
.prod { text-align: left; border: 0; background: none; padding: 5px 8px; border-radius: 4px; cursor: pointer; }
.prod:hover { background: var(--chip); }
.prod[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.mv-viewer { display: flex; flex-direction: column; min-width: 0; }
.mv-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 6px 16px; flex-wrap: wrap; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); }
.mv-head h1 { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 30px; line-height: 1.05; text-wrap: balance; }
.mv-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0; font-size: 12.5px; color: var(--muted); }
.mv-meta b { color: var(--ink); font-weight: 500; }
.mv-stage { aspect-ratio: 1000 / 620; background: var(--ocean); border-radius: 0; }
.mv-stage > svg, .mv-stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mv-stage .mv-base, .mv-stage .mv-canvas { pointer-events: none; }
.mv-canvas { transform-origin: 0 0; }
svg.map.mv-top { background: none; touch-action: pan-x pan-y; }
.mv-top.zoomed { cursor: grab; }
.mv-top.zoomed:active { cursor: grabbing; }
.mv-top path { vector-effect: non-scaling-stroke; }
.mv-line { fill: none; stroke: var(--border); stroke-width: .8; stroke-linejoin: round; }
.mv-line.thin { stroke-width: .45; stroke-opacity: .8; }
.mv-iso { fill: none; stroke: var(--iso); stroke-width: 1.1; stroke-opacity: .8; stroke-linecap: round; }
.mv-iso.thick { stroke-width: 2.4; stroke-opacity: .95; }
.mv-hl text { text-anchor: middle; paint-order: stroke; stroke: var(--panel); stroke-width: 3px; stroke-linejoin: round; }
.mv-hl-l { font: 700 30px var(--f-display); }
.mv-hl-v { font: 500 12px var(--f-mono); }
.mv-hl.hi text { fill: #2161c4; }
.mv-hl.lo text { fill: #c42e2e; }
:root[data-theme="dark"] .mv-hl.hi text { fill: #6ea8ff; }
:root[data-theme="dark"] .mv-hl.lo text { fill: #ff7272; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mv-hl.hi text { fill: #6ea8ff; }
  :root:not([data-theme="light"]) .mv-hl.lo text { fill: #ff7272; }
}
.mv-readout { position: absolute; left: 10px; top: 10px; max-width: calc(100% - 70px); background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 3px 8px; font-size: 12px; pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,.18); }

.mv-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mv-panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.mv-panels[data-mode="side"], .mv-panels[data-mode="cons"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mv-panels[data-mode="side"] .mv-head h1, .mv-panels[data-mode="diff"] .mv-head h1, .mv-panels[data-mode="cons"] .mv-head h1 { font-size: 24px; }
.mv-panels[data-mode="side"] .mv-meta, .mv-panels[data-mode="cons"] .mv-meta { align-items: flex-start; }
.mv-panels[data-mode="side"] .mv-head, .mv-panels[data-mode="cons"] .mv-head { align-items: flex-start; }
.mv-rail select { width: 100%; padding: 7px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
.mv-about h3 { margin: 12px 0 0; font-size: 15px; }
.mv-about .hot { color: #c42e2e; font-weight: 600; }
.mv-about .cold { color: #2161c4; font-weight: 600; }
.mv-controls { display: flex; align-items: center; gap: 8px; padding: 10px 16px; flex-wrap: wrap; }
.mv-controls .ctl { width: 36px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); cursor: pointer; color: var(--ink); }
.mv-controls .ctl:hover { border-color: var(--muted); }
.mv-controls .ctl svg { width: 16px; height: 16px; fill: currentColor; }
.mv-controls .ctl.play { background: var(--accent); border-color: var(--accent); color: #fff; }
.mv-controls input[type="range"] { flex: 1 1 200px; min-width: 0; accent-color: var(--accent); }
.mv-fhread { font-size: 13px; min-width: 5ch; text-align: right; }
.mv-legend { padding: 4px 16px 14px; display: flex; flex-direction: column; gap: 6px; }
.mv-bar { display: flex; height: 12px; border-radius: 2px; margin-bottom: 14px; max-width: 720px; position: relative; }
.mv-bar span { flex: 1; position: relative; }
.mv-bar i { position: absolute; top: 15px; left: 0; font-style: normal; font-family: var(--f-mono); font-size: 10.5px; color: var(--muted); }
.mv-bar.grad span { border-radius: 2px; }
.mv-bar .tick { left: 0; transform: translateX(-50%); }
.mv-legend .source { min-height: 1.4em; }

.mv-about { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.mv-about p { color: var(--ink); max-width: 70ch; }
.mv-about a { color: var(--accent); font-weight: 600; }

@media (max-width: 1180px) { .mv-panels[data-mode="side"], .mv-panels[data-mode="cons"] { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .mv-grid { grid-template-columns: minmax(0, 1fr); }
  .mv-rail { flex-direction: row; flex-wrap: wrap; gap: 14px 24px; }
  .mv-sec:first-child { flex: 0 1 260px; }
  .mv-sec:last-child { flex: 1 1 320px; }
  #products { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 16px; }
  .mv-group + .mv-group { margin-top: 0; }
  .mv-about { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .mv-head h1 { font-size: 24px; }
  .mv-meta { align-items: flex-start; }
  .mv-hl-l { font-size: 26px; }
}

/* Models page: point forecast chart. Series colors follow a fixed, validated order (light and dark steps). */
:root { --s-gfs: #2a78d6; --s-ecmwf: #eb6834; --s-hrrr: #1baf7a; --s-nam: #eda100; --s-cmc: #e87ba4; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --s-gfs: #3987e5; --s-ecmwf: #d95926; --s-hrrr: #199e70; --s-nam: #c98500; --s-cmc: #d55181; }
}
:root[data-theme="dark"] { --s-gfs: #3987e5; --s-ecmwf: #d95926; --s-hrrr: #199e70; --s-nam: #c98500; --s-cmc: #d55181; }
.mv-point { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.mv-point-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 20px; flex-wrap: wrap; }
.mv-point-head p { margin: 2px 0 0; }
.mv-point-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mv-pt-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; }
.mv-pt-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mv-pt-legend .muted { color: var(--muted); }
.mv-key { display: inline-block; width: 16px; height: 0; border-top: 2px solid; border-radius: 2px; }
.mv-chart-wrap { position: relative; }
.mv-chart { display: block; width: 100%; height: auto; touch-action: pan-y; }
.mv-chart text { fill: var(--muted); font: 11px var(--f-mono); }
.mv-chart .row-title { fill: var(--ink); font: 600 12px var(--f-body); }
.mv-chart .grid line { stroke: var(--line); }
.mv-chart .axis .domain, .mv-chart .axis line { stroke: var(--line); }
.mv-chart .series { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mv-chart .ref { stroke: var(--muted); stroke-dasharray: 2 3; }
.mv-chart .maptime { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; }
.mv-chart .maptime-label { fill: var(--accent); font-weight: 600; }
.mv-chart .cross { stroke: var(--ink); stroke-opacity: .5; }
.mv-chart .hit { fill: transparent; cursor: crosshair; }
.mv-tip { position: absolute; top: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font-size: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.18); pointer-events: none; z-index: 2; }
.mv-tip table { border-collapse: collapse; }
.mv-tip th, .mv-tip td { padding: 1px 6px; text-align: right; white-space: nowrap; }
.mv-tip th { font-weight: 500; color: var(--muted); font-size: 11px; }
.mv-tip td:first-child, .mv-tip th:first-child { text-align: left; padding-left: 0; }
.mv-tip td b { font-weight: 600; }
.mv-tip .when { font-weight: 600; margin-bottom: 4px; }
.mv-pt-table summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--accent); }
.mv-pt-table .tabs { margin: 10px 0; }
.mv-table-scroll { overflow-x: auto; max-height: 420px; overflow-y: auto; }
.mv-table-scroll table { border-collapse: collapse; font-size: 12.5px; min-width: 100%; }
.mv-table-scroll th, .mv-table-scroll td { padding: 4px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.mv-table-scroll th:first-child, .mv-table-scroll td:first-child { text-align: left; }
.mv-table-scroll thead th { position: sticky; top: 0; background: var(--panel); font-weight: 600; }
.mv-point-mark circle.ring { fill: none; stroke: var(--panel); stroke-width: 4; }
.mv-point-mark circle.dot { fill: var(--accent); stroke: var(--ink); stroke-width: 1.5; }
.mv-share { display: inline-flex; gap: 6px; margin-left: 8px; }
.mv-share .btn { padding: 7px 10px; }
@media (max-width: 600px) { .mv-share { margin-left: 0; width: 100%; } .mv-share .btn { flex: 1; justify-content: center; } }

/* Hurricane Models page (hurricane.html): reuses the Models page layout (.mv-*) */
.hm-stats { position: absolute; left: 10px; bottom: 10px; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 4px 9px; font-size: 12px; pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.hm-stats b { font-weight: 600; }
.map .hm-track { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map .hm-track.halo { stroke: var(--panel); stroke-width: 5; stroke-opacity: .8; }
.map .hm-dot { stroke: var(--ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.mv-rail .prod:disabled { opacity: .4; cursor: default; }
.mv-models .chip:disabled { opacity: .45; cursor: default; }
.mv-rail .tabs { width: 100%; }
.mv-rail .tabs button { flex: 1; padding: 6px 8px; }

/* Tropical development odds (genesis.html). Band colors: multi-hue ramp (teal > green > yellow > orange > magenta) so each level is distinct. */
:root { --gp-1: #1a9aa8; --gp-2: #4fa83a; --gp-3: #d9a400; --gp-4: #e0561a; --gp-5: #c4127a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --gp-1: #2fc4d0; --gp-2: #7ed957; --gp-3: #ffd23f; --gp-4: #ff8a2b; --gp-5: #ff3d9a; }
}
:root[data-theme="dark"] { --gp-1: #2fc4d0; --gp-2: #7ed957; --gp-3: #ffd23f; --gp-4: #ff8a2b; --gp-5: #ff3d9a; }
.map .gen-band { fill-opacity: .8; stroke-width: .8; vector-effect: non-scaling-stroke; }
.map .gen-nhc { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.map .gen-track { fill: none; stroke-width: 1.2; stroke-opacity: .55; vector-effect: non-scaling-stroke; }
.map .gen-gfs { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 7 4; vector-effect: non-scaling-stroke; }
.gen-watch { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gen-watch li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; align-items: start; }
.gen-swatch { width: 14px; height: 14px; border-radius: 3px; margin-top: 3px; }
.gen-parts { font-size: 13px; color: var(--muted); }
.gen-parts b { color: var(--ink); font-weight: 500; }
#genMap path { vector-effect: non-scaling-stroke; }

/* Models page: consensus spread bands (one-hue ramp, validated against land and ocean in both themes) */
:root { --sp-1: #b473d1; --sp-2: #9b57b7; --sp-3: #823c9e; --sp-4: #691d85; --sp-5: #52006d; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --sp-1: #9752b4; --sp-2: #ae70ca; --sp-3: #c68ee0; --sp-4: #dfacf6; --sp-5: #f7caff; }
}
:root[data-theme="dark"] { --sp-1: #9752b4; --sp-2: #ae70ca; --sp-3: #c68ee0; --sp-4: #dfacf6; --sp-5: #f7caff; }
.mv-models .chip:disabled { opacity: .4; cursor: not-allowed; }
.mv-ptype-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.mv-ptype-legend .pt-row { display: inline-flex; align-items: center; gap: 6px; }
.mv-ptype-legend .pt-sw { display: inline-flex; border-radius: 2px; overflow: hidden; }
.mv-ptype-legend .pt-sw i { display: block; width: 14px; height: 12px; }
/* Storm page: ensemble intensity plumes */
.chart .ens-range { fill-opacity: .16; stroke: none; }
.chart .ens-line { fill: none; stroke-width: 1; stroke-opacity: .22; }
.chart .ens-avg { fill: none; stroke-width: 2.5; stroke-dasharray: 6 4; stroke-opacity: .95; }
.ml-swatch.ens-band { opacity: .55; }
.ml-note { grid-column: 1 / -1; margin: 4px 0 0; font-size: 12px; max-width: 70ch; }

/* Tropical outlook: NHC areas of interest */
.aoi { gap: 14px; }
.aoi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.aoi-basin { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.aoi-basin > h3 { margin: 0; }
.aoi-card { border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.aoi-card p { margin: 0; }
.aoi-top { display: flex; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; align-items: flex-start; }
.aoi-top h3 { margin: 0 0 4px; font-family: var(--f-display); font-size: 22px; line-height: 1.1; }
.aoi-chances { display: flex; gap: 8px; }
.aoi-chance { display: flex; flex-direction: column; align-items: center; min-width: 70px; padding: 4px 8px; border-radius: 4px; border: 1px solid var(--line); line-height: 1.2; }
.aoi-chance span { font-size: 11px; color: var(--muted); }
.aoi-chance b { font-size: 20px; font-weight: 600; }
.aoi-chance small { font-size: 11px; }
.aoi-chance.low { border-color: #e2b11c; box-shadow: inset 0 3px 0 #e2b11c; }
.aoi-chance.med { border-color: #ee8a2a; box-shadow: inset 0 3px 0 #ee8a2a; }
.aoi-chance.high { border-color: #d63030; box-shadow: inset 0 3px 0 #d63030; }
.aoi-odds { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.gen-sub { margin: 4px 0 -4px; }
.map .gen-motion { fill: none; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.gen-empty { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: calc(100% - 32px);
  display: flex; flex-direction: column; gap: 4px; padding: 10px 16px; text-align: center; pointer-events: none;
  background: color-mix(in srgb, var(--panel) 88%, transparent); border: 1px solid var(--line); border-radius: 6px; }
.gen-empty[hidden] { display: none; }
.gen-empty b { color: var(--ink); font-weight: 600; font-size: 15px; }
.gen-empty span { color: var(--muted); font-size: 13px; }
.map .gen-x { font: 700 26px var(--f-body); fill: #e2b11c; paint-order: stroke; stroke: var(--panel); stroke-width: 3px; }
@media (max-width: 900px) { .aoi-grid { grid-template-columns: minmax(0, 1fr); } }

/* Hurricane Hunters (recon) on the storm page */
.map .recon-seg { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.map .recon-high { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-dasharray: 5 4; }
.map .recon-fix circle { fill: var(--panel); stroke: var(--ink); stroke-width: 1.6; }
.map .recon-fix path { stroke: var(--ink); stroke-width: 1.4; }
.map .recon-plane path { fill: var(--ink); stroke: var(--panel); stroke-width: 1.2; }
.map-tip { top: 0; left: 0; z-index: 2; }
.sw.recon-high-key { border-color: var(--muted); }
.recon-fix-key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.6px solid var(--ink); background: var(--panel); flex: none; }
.recon-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
.recon-pill .dot { background: var(--accent); animation: pulse 1.8s infinite; }
.recon-status .dot { display: inline-block; margin-right: 8px; vertical-align: 1px; background: var(--accent); animation: pulse 1.8s infinite; }
.recon-card .recon-latest { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 -20px; }
.recon-card details summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.recon-table td { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .recon-pill .dot, .recon-status .dot { animation: none; } }
.recon-card h3 { margin: 6px 0 0; font-size: 14px; }
.recon-flights { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.recon-flights button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; }
.recon-flights button:hover { border-color: var(--muted); }
.recon-flights button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.recon-flights .rf-name { font-weight: 600; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; }
.recon-flights .rf-name small { font-weight: 400; color: var(--muted); font-size: 12px; }
.recon-flights .rf-meta { font-size: 12px; color: var(--muted); }
.recon-flights .dot { background: var(--accent); animation: pulse 1.8s infinite; }
.recon-flight { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.recon-flight div:nth-child(2) { border-right: 0; }
.recon-flight div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.map .recon .dim { opacity: .12; }
@media (prefers-reduced-motion: reduce) { .recon-flights .dot { animation: none; } }
.recon-flights .rf-check { width: 13px; height: 13px; border: 1.5px solid var(--muted); border-radius: 3px; flex: none; }
.recon-flights [aria-pressed="true"] .rf-check { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--panel); }
.recon-compare small { font-size: 11.5px; }

/* Travel page */
.fcat { display: inline-block; min-width: 46px; padding: 1px 6px; border-radius: 3px; background: var(--c); color: #fff; font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; text-align: center; letter-spacing: .03em; }
.fcat.big { font-size: 15px; padding: 4px 10px; min-width: 64px; }
.dtag { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 3px; background: var(--chip); color: var(--ink); white-space: nowrap; }
.dtag.stop, .dtag.closure { background: var(--live); color: #fff; }
.dtag.gdp { background: var(--accent); color: #fff; }
.item-h .ap-link { margin-right: 6px; }
#trMap path { vector-effect: non-scaling-stroke; }
#trMap.zoomed { cursor: grab; }
.ap-mark { cursor: pointer; outline: none; }
.ap-mark .ap-ring { fill: none; stroke: var(--ink); stroke-width: 2.4; }
.ap-mark .ap-sel { fill: none; stroke: var(--accent); stroke-width: 2.4; }
.ap-mark:hover .ap-lbl, .ap-mark:focus-visible .ap-lbl, .ap-mark.sel .ap-lbl { font-weight: 700; }
.ap-mark:focus-visible .ap-sel, .ap-mark:focus-visible circle:last-of-type { stroke: var(--accent); }
.map .ap-lbl { font-size: 11.5px; }
.map .ap-delay { font-weight: 700; fill: var(--live); }
.sw.dot.ring { background: none; border: 2px solid var(--ink); }
.ap-pick { display: inline-flex; align-items: center; gap: 8px; }
.ap-pick select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); max-width: 260px; }
#apDetail { display: flex; flex-direction: column; gap: 14px; }
.ap-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ap-head h3 { margin: 0; font-family: var(--f-display); font-size: 28px; line-height: 1.05; }
.ap-head p { margin: 2px 0 0; font-size: 13px; }
.ap-storm { padding: 8px 12px; border: 1px solid var(--accent); background: var(--accent-soft); border-radius: 4px; font-size: 13px; }
.ap-delays { padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; }
.ap-now { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; }
.ap-now .now { align-items: flex-start; }
.ap-sub { margin: 4px 0 0 !important; font-size: 16px !important; }
.ap-sub small { font-weight: 400; font-size: 12.5px; }
.cat-strip { position: relative; display: flex; height: 14px; border-radius: 3px; overflow: hidden; margin-bottom: 18px; overflow: visible; }
.cat-strip span { height: 100%; min-width: 2px; }
.cat-strip span:first-child { border-radius: 3px 0 0 3px; }
.cat-strip span:last-of-type { border-radius: 0 3px 3px 0; }
.cat-strip i { position: absolute; top: 17px; transform: translateX(-50%); font-style: normal; font-family: var(--f-mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.cat-strip i::before { content: ""; position: absolute; left: 50%; top: -5px; height: 4px; border-left: 1px solid var(--muted); }
table.taf td { vertical-align: top; }
table.taf tr.sub td { background: color-mix(in srgb, var(--chip) 55%, transparent); font-size: 12.5px; }
.ap-raw summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--accent); }
.ap-raw pre { margin: 8px 0 0; padding: 10px 12px; background: var(--chip); border-radius: 4px; font-family: var(--f-mono); font-size: 12px; white-space: pre-wrap; word-break: break-word; }
.small-print { font-size: 13px; }
#worstList .ap-link b { gap: 6px; }
@media (max-width: 760px) {
  .ap-now { grid-template-columns: minmax(0, 1fr); }
  .ap-pick, .ap-pick select { width: 100%; max-width: none; }
}
.d-row { display: flex; flex-direction: column; gap: 2px; }
.d-row .item-h { gap: 6px; flex-wrap: wrap; }
.d-row b { font-size: 13px; }
.sv-item > .item-h + .d-row, .d-row + .d-row { margin-top: 4px; }

/* Night Sky page */
.sky-loc { min-width: min(100%, 300px); }
.sky-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sky-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; min-width: 0; }
.sky-card p { font-size: 13.5px; font-weight: 500; }
.sky-card small { font-size: 12px; }
.q-chip { display: inline-block; padding: 2px 10px; border-radius: 3px; font-family: var(--f-display); font-size: 20px; font-weight: 700; letter-spacing: .02em; line-height: 1.2; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.moon-ico { line-height: 0; }
.sky-wrap { border: 1px solid var(--line); border-radius: 4px; }
table.sky-grid { border-collapse: separate; border-spacing: 1px; font-family: var(--f-mono); font-size: 11.5px; min-width: 100%; }
.sky-grid th, .sky-grid td { padding: 3px 2px; text-align: center; min-width: 30px; white-space: nowrap; }
.sky-grid thead th { font-weight: 500; color: var(--muted); font-size: 11px; vertical-align: bottom; line-height: 1.2; }
.sky-grid thead th small { display: block; color: var(--ink); font-weight: 600; font-family: var(--f-body); }
.sky-grid thead th.day-start { border-left: 2px solid var(--line); }
.sky-grid tbody th { position: sticky; left: 0; z-index: 1; background: var(--panel); text-align: left; padding: 3px 10px 3px 8px; font: 600 12px var(--f-body); color: var(--ink); }
.sky-grid tbody th .sub { font-weight: 400; color: var(--muted); padding-left: 10px; }
.sky-grid tr.sum td { font-weight: 600; height: 26px; }
.sky-grid tr.minor td { font-size: 10.5px; height: 18px; padding-block: 1px; }
.sky-grid tr.gap th, .sky-grid tr.gap td { border-top: 6px solid var(--panel); }
.sky-grid td.plain { color: var(--muted); }
.sky-legend .sw { margin-right: 4px; }
.sky-legend > span:not(:first-child) { margin-right: 2px; }
.map .city-mark { cursor: pointer; outline: none; }
.map .ap-sel { fill: none; stroke: var(--accent); stroke-width: 2.6; }
.city-mark:focus-visible circle:last-of-type, .city-mark:hover circle:last-of-type { stroke: var(--accent); stroke-width: 2.4; }
#auroraMap path { vector-effect: non-scaling-stroke; }
#auroraMap.zoomed { cursor: grab; }
.map .viewline { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 7 5; }
.map .viewline-lbl { font-size: 12px; }
.sun-pics { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.sun-pics figure { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.sun-pics img { width: 100%; height: auto; border-radius: 50%; background: #000; aspect-ratio: 1; }
.sun-pics figcaption { font-size: 12px; color: var(--muted); }
.sun-pics figcaption b { display: block; color: var(--ink); font-size: 12.5px; }
.sw-text summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--accent); }
.sw-text pre { margin: 6px 0 0; padding: 8px 10px; background: var(--chip); border-radius: 4px; font-family: var(--f-mono); font-size: 11.5px; white-space: pre-wrap; word-break: break-word; }
.g-badge { display: inline-block; padding: 0 7px; border-radius: 3px; color: #fff; font-family: var(--f-mono); font-weight: 600; font-size: 12px; }
.g-badge.g1 { background: #ee7d14; } .g-badge.g2 { background: #e0531f; } .g-badge.g3 { background: #d63a3a; } .g-badge.g4 { background: #b8246a; } .g-badge.g5 { background: #7d2a9e; }
table.scales td, table.regions td { white-space: nowrap; }
table.scales th { white-space: normal; line-height: 1.25; }
.flare { font-family: var(--f-mono); font-weight: 600; padding: 0 5px; border-radius: 3px; color: #fff; background: #e0531f; }
.flare.X { background: #b8246a; }
#space h3 { margin: 6px 0 -4px; }
#space h3 small { font-weight: 400; font-size: 12.5px; }
@media (max-width: 1100px) { .sky-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sky-cards, .sun-pics { grid-template-columns: minmax(0, 1fr); } .sun-pics img { max-width: 260px; margin-inline: auto; } }

/* Storm recaps (recap.html) */
main.recap-page { display: flex; flex-direction: column; gap: 20px; padding-block: 22px 40px; }
.badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 1px 7px; border-radius: 3px; white-space: nowrap; }
.storm-head h1 .badge { font-size: .45em; vertical-align: middle; margin-left: 12px; padding: 2px 8px; border-radius: 4px; letter-spacing: .04em; }
.recap-map path { vector-effect: non-scaling-stroke; }
.recap-map.zoomed { cursor: grab; }
.recap-map.zoomed:active { cursor: grabbing; }
.map .seg { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.map .seg.post { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 2 5; }
.map .rpt { stroke: var(--panel); stroke-width: 1.5; }
.map .rpt.post { fill: var(--panel); stroke: var(--muted); }
.map .peak-star { fill: #fff; pointer-events: none; }
.map .lbl.small { font-size: 11.5px; }
.map .hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; }
.map .season-track { cursor: pointer; transition: opacity .15s; }
.map .season-track.dim { opacity: .18; }
.peak-key { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); margin-right: 6px; flex: none; }
.recap-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.recap-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
a.recap-card:hover { border-color: var(--muted); }
.recap-card .rc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.recap-card h3 { margin: 0; font-family: var(--f-display); font-size: 24px; line-height: 1; }
.recap-card .meta { font-size: 13px; color: var(--muted); }
dl.mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 0; padding-top: 8px; border-top: 1px solid var(--line); }
dl.mini dt { font-size: 11px; color: var(--muted); }
dl.mini dd { margin: 0; font-family: var(--f-mono); font-size: 14px; }
.recap-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.recap-steps li { display: grid; grid-template-columns: 10px 1fr; gap: 0 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.recap-steps li:last-child { border-bottom: 0; }
.recap-steps .sw { margin: 6px 0 0; }
.recap-steps time { grid-column: 2; font-size: 12px; color: var(--muted); }
.strength-bars { display: flex; flex-direction: column; gap: 6px; }
.strength-bars div { display: grid; grid-template-columns: 120px minmax(0, 1fr) 64px; align-items: center; gap: 8px; font-size: 13px; }
.strength-bars i { display: block; height: 10px; border-radius: 2px; min-width: 3px; }
.strength-bars .mono { text-align: right; }
.best-track summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.best-track .table-wrap { margin-top: 10px; max-height: 480px; overflow-y: auto; }
.best-track tr.muted td { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .map .season-track { transition: none; } }
/* Storm recaps: how good were the forecasts? */
.verify-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.verify-fc { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.verify-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fc-step { display: flex; align-items: center; gap: 8px; }
.fc-step input { flex: 1; accent-color: var(--accent); }
.fc-step .btn { padding: 4px 12px; font-size: 18px; line-height: 1; }
.fc-label { margin: 0; font-size: 13.5px; }
.map .fc-all { fill: none; stroke: var(--iso); stroke-opacity: .14; stroke-width: 1.2; }
.map .fc-track { fill: none; stroke: var(--iso); stroke-width: 2.5; stroke-dasharray: 6 4; }
.map .fc-miss { fill: none; stroke: var(--live); stroke-width: 1.6; }
.map .fc-pt { fill: var(--panel); stroke: var(--iso); stroke-width: 2; }
.verify-tbl th:not(:first-child), .verify-tbl td:not(:first-child) { text-align: right; }
.verify-tbl td { padding: 6px 8px; }
.verify-tbl td.best { background: var(--accent-soft); font-weight: 600; }
.verify-tbl td.few { opacity: .45; }
.verify-tbl tr.ofcl td { font-weight: 600; }
.verify-tbl tr.baseline td { color: var(--muted); font-style: italic; }
.verify-tbl tr.late td:first-child { font-style: italic; }
.verify-tbl tfoot td { color: var(--muted); font-size: 12px; border-bottom: 0; }
@media (max-width: 900px) { .verify-grid { grid-template-columns: minmax(0, 1fr); } }
/* Storm recaps: Hurricane Hunters */
.recon-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 0 -20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.recon-strip div { display: flex; flex-direction: column; padding: 10px 20px; border-right: 1px solid var(--line); min-width: 0; }
.recon-strip div:last-child { border-right: 0; }
.recon-strip dt { font-size: 11px; color: var(--muted); }
.recon-strip dd { margin: 0; font-size: 16px; font-weight: 500; }
.recon-strip small { font-size: 12px; color: var(--muted); }
@media (max-width: 600px) { .recon-strip div { border-right: 0; border-bottom: 1px solid var(--line); } }
/* the right-hand column's last card stretches to the bottom of the row, so a shorter column leaves no hole */
.recap-page .storm-grid { align-items: stretch; }
.recap-page .storm-grid > aside.stack > :last-child { flex: 1 1 auto; }
.recon-recap details summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 13px; }
.recon-flights { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px 20px; font-size: 13px; }
.chart .recon-pt { fill: var(--panel); stroke: var(--ink); stroke-width: 1.6; }
.recon-pt-key { display: inline-block; width: 9px; height: 9px; transform: rotate(45deg); border: 1.6px solid var(--ink); background: var(--panel); margin-right: 7px; flex: none; }
.legend .recon-fix-key { margin-right: 6px; }
/* Storm recaps: landfalls and the advisory timeline */
.map .landfall path { fill: var(--ink); stroke: var(--panel); stroke-width: 1.5; }
.landfall-key { display: inline-block; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid var(--ink); margin-right: 6px; flex: none; }
.chart .ww-lbl { font-size: 12px; fill: var(--ink); letter-spacing: 0; }
.ww-steps li span:not(.sw) { font-size: 13.5px; }
.adv-table td.adv-head { white-space: normal; min-width: 280px; }

/* Ocean page (ocean.html) */
.oc-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 4px -20px 0; border-top: 1px solid var(--line); }
.oc-tile { display: flex; flex-direction: column; gap: 1px; padding: 10px 20px 12px; border: 0; border-right: 1px solid var(--line); background: none; text-align: left; cursor: pointer; color: var(--ink); min-width: 0; }
.oc-tile:last-child { border-right: 0; }
.oc-tile:hover { background: var(--chip); }
.oc-tile[aria-pressed="true"] { background: var(--accent-soft); box-shadow: inset 0 -3px 0 var(--accent); }
.oc-tile .nm { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.oc-tile .val { font-family: var(--f-mono); font-size: 18px; font-weight: 500; }
.oc-tile .val small { font-size: 12.5px; margin-left: 6px; }
.oc-tile .rk { font-size: 12px; color: var(--muted); }
.oc-tile .rk b { color: var(--ink); font-weight: 600; }
.oc-warm { color: #b8321f; }
.oc-cool { color: #2161c4; }
:root[data-theme="dark"] .oc-warm { color: #ff8a70; }
:root[data-theme="dark"] .oc-cool { color: #6ea8ff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .oc-warm { color: #ff8a70; }
  :root:not([data-theme="light"]) .oc-cool { color: #6ea8ff; }
}
.oc-opts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.oc-select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); max-width: 100%; }
#ocTop .oc-spot circle.ring { fill: none; stroke: var(--panel); stroke-width: 4; }
#ocTop .oc-spot circle.dot { fill: var(--accent); stroke: var(--ink); stroke-width: 1.5; }
#ocTop { cursor: crosshair; }
#ocTop.zoomed { cursor: grab; }
.oc-player { padding-top: 2px; }
.oc-legend { display: flex; flex-direction: column; gap: 6px; }
.oc-legend-head { display: flex; justify-content: space-between; align-items: center; gap: 6px 16px; flex-wrap: wrap; }
.oc-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; }
.oc-check input { accent-color: var(--accent); margin: 0; }
.oc-bar { position: relative; height: 12px; border-radius: 2px; margin-bottom: 18px; }
.oc-bar i { position: absolute; top: 15px; transform: translateX(-50%); font-style: normal; font-family: var(--f-mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.oc-bar i::before { content: ''; position: absolute; left: 50%; top: -5px; height: 4px; border-left: 1px solid var(--muted); }
.oc-bar .fuel { position: absolute; top: -3px; bottom: -3px; border-left: 2px solid var(--ink); }
.oc-spot-vals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); margin: 0; }
.oc-spot-vals div { padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
.oc-spot-vals dt { font-size: 11px; color: var(--muted); }
.oc-spot-vals dd { margin: 0; font-family: var(--f-mono); font-size: 16px; }
.oc-records { gap: 12px; }
.oc-records .tabs { width: auto; }
.chart .oc-yr { fill: none; stroke: var(--muted); stroke-width: 1; stroke-opacity: .28; }
.chart .oc-last { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-opacity: .55; }
.chart .oc-cur { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.chart .oc-cur.prelim { stroke-dasharray: 3 3; }
.chart .oc-norm { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 6 4; }
.chart .oc-lbl { font: 600 12px var(--f-body); paint-order: stroke; stroke: var(--panel); stroke-width: 3px; }
.chart .oc-dot { fill: var(--accent); stroke: var(--panel); stroke-width: 2; }
.chart .grid line { stroke: var(--line); }
.chart .grid path { display: none; }
.sw.line { width: 18px; height: 0; border-radius: 0; border-top: 2.5px solid; background: none; vertical-align: 3px; }
@media (max-width: 900px) {
  .oc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-tile { border-bottom: 1px solid var(--line); }
  .oc-tile:nth-child(2n) { border-right: 0; }
  .oc-tile:last-child { grid-column: 1 / -1; border-bottom: 0; }
}
.map .oc-sphere { fill: var(--ocean); }
.map .oc-lake { fill: var(--ocean); stroke: none; }
.oc-box { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 5 4; }
.oc-player input[type="range"] { flex: 1 1 200px; min-width: 0; accent-color: var(--accent); }

/* Local forecast page */
.local-page {
  --s-temp: #eb6834; --s-dew: #1baf7a; --s-rain: #2a78d6; --s-wind: #6250d6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .local-page { --s-temp: #d95926; --s-dew: #199e70; --s-rain: #3987e5; --s-wind: #9085e9; }
}
:root[data-theme="dark"] .local-page { --s-temp: #d95926; --s-dew: #199e70; --s-rain: #3987e5; --s-wind: #9085e9; }
.lc-head { overflow: visible; }
.lc-top { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.lc-search { position: relative; display: flex; gap: 6px; flex: 0 1 440px; min-width: 0; }
.lc-search input { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
.lc-search .btn { padding: 7px 10px; }
.lc-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 4; margin: 0; padding: 4px; list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.18); max-height: 320px; overflow-y: auto; }
.lc-results li { display: flex; flex-direction: column; padding: 7px 10px; border-radius: 4px; cursor: pointer; }
.lc-results li small { color: var(--muted); font-size: 12px; }
.lc-results li[data-i]:hover, .lc-results li[aria-selected="true"] { background: var(--chip); }
.lc-results li.muted { cursor: default; font-size: 13px; }
.lc-now { display: flex; align-items: center; gap: 18px; }
.lc-temp { font-family: var(--f-display); font-weight: 700; font-size: clamp(64px, 9vw, 92px); line-height: .85; }
.lc-temp sup { font-size: .38em; vertical-align: top; }
.lc-sky { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lc-cond { font-size: 20px; font-weight: 600; line-height: 1.2; }
.lc-alertline { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; align-items: center; }
.lc-chip { display: inline-flex; align-items: center; padding: 3px 10px 3px 8px; border: 1px solid var(--c); border-radius: 99px; font-size: 13px; font-weight: 600; text-decoration: none; background: color-mix(in srgb, var(--c) 12%, var(--panel)); }
.lc-chip:hover { background: color-mix(in srgb, var(--c) 24%, var(--panel)); }
.lc-clear { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.lc-clear svg { color: #2f9e44; }
.lc-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.lc-alerts { border-color: var(--muted); }
.lc-alert { display: flex; flex-direction: column; gap: 4px; padding: 2px 0 12px 14px; border-left: 5px solid var(--c); border-bottom: 1px solid var(--line); }
.lc-alert:last-child { border-bottom: 0; padding-bottom: 2px; }
.lc-alert .item-h b { font-size: 16px; }
.lc-alert p { margin: 0; font-size: 13.5px; max-width: 85ch; }
.lc-alert details p { margin-top: 8px; }
.lc-alert summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 13px; }
.lc-legend { margin-bottom: 6px; }
.sw.lc-night-sw { background: var(--chip); outline: 1px solid var(--line); }
.lc-chart .lc-night { fill: var(--chip); opacity: .7; }
.lc-chart .lc-midnight { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 3; }
.lc-chart .lc-grid { stroke: var(--line); stroke-width: 1; }
.lc-chart .lc-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lc-chart .lc-line.dash { stroke-width: 1.6; stroke-dasharray: 5 4; }
.lc-chart .lc-dot { stroke: var(--panel); stroke-width: 2; }
.lc-chart .lc-hit { outline: none; }
.lc-chart .lc-hit:focus-visible { stroke: var(--accent); stroke-width: 2; }
.lc-tip { min-width: 210px; }
.lc-tip > .muted { margin-bottom: 2px; max-width: 220px; }
.lc-hrtable { max-height: 560px; overflow-y: auto; }
.lc-hrtable td.lc-wrap { white-space: normal; min-width: 140px; }
.lc-hrtable thead th { position: sticky; top: 0; background: var(--panel); }
.lc-dayrow th { text-align: left; font-family: var(--f-display); font-size: 17px; font-weight: 700; padding: 12px 8px 4px; border-bottom: 1px solid var(--line); background: var(--panel); }
.lc-week { display: flex; flex-direction: column; }
.lc-day { border-bottom: 1px solid var(--line); }
.lc-day:last-child { border-bottom: 0; }
.lc-day summary { display: grid; grid-template-columns: 74px minmax(0, 1fr) 42px 36px minmax(70px, 150px) 36px; gap: 12px; align-items: center; padding: 10px 2px; cursor: pointer; list-style: none; }
.lc-day summary::-webkit-details-marker { display: none; }
.lc-day summary:hover .lc-dtext { color: var(--ink); }
.lc-dname { display: flex; flex-direction: column; line-height: 1.2; }
.lc-dname b { font-size: 15px; }
.lc-dname small { color: var(--muted); font-size: 12px; }
.lc-dtext { font-size: 13.5px; color: var(--muted); }
.lc-dpop { color: var(--s-rain); font-size: 13px; text-align: right; }
.lc-dlo { color: var(--muted); text-align: right; }
.lc-dhi { font-weight: 600; }
.lc-range { position: relative; height: 6px; border-radius: 3px; background: var(--chip); }
.lc-range i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--s-temp); }
.lc-dbody { padding: 0 2px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; max-width: 80ch; }
.lc-dbody p { margin: 0; }
.lc-facts { margin: 0; display: flex; flex-direction: column; }
.lc-facts > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.lc-facts > div:last-child { border-bottom: 0; }
.lc-facts dt { color: var(--muted); font-size: 12.5px; padding-top: 1px; }
.lc-facts dd { margin: 0; font-weight: 500; display: flex; flex-direction: column; }
.lc-facts dd small { font-weight: 400; color: var(--muted); font-size: 12.5px; }
svg.lc-sunarc { display: block; width: 100%; max-width: 280px; margin: 0 auto 4px; }
.lc-sunarc .lc-horizon { stroke: var(--border); }
.lc-sunarc .lc-path { fill: none; stroke: var(--border); stroke-dasharray: 3 4; }
.lc-sunarc .lc-sun { fill: #f2b01e; stroke: var(--panel); stroke-width: 2; }
.lc-more { display: flex; flex-direction: column; }
.lc-more a { padding: 7px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 500; }
.lc-more a:last-child { border-bottom: 0; }
.lc-more a:hover { color: var(--accent); }
@media (max-width: 900px) {
  .lc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lc-stats div:nth-child(3n) { border-right: 0; }
  .lc-stats div:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .lc-search { flex-basis: 100%; }
  .lc-search .btn span { display: none; }
  .lc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-stats div { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-inline: 14px; }
  .lc-stats div:nth-child(2n) { border-right: 0; }
  .lc-stats div:nth-last-child(-n+2) { border-bottom: 0; }
  .lc-head { padding-inline: 14px; }
  .lc-head .stats { margin-inline: -14px; }
  .lc-day summary { grid-template-columns: 56px minmax(0, 1fr) 36px 32px 32px; gap: 8px; }
  .lc-day .lc-range { display: none; }
  .lc-dtext { font-size: 12.5px; }
}