/* wxdesk design system. Tokens first, then base, layout, components. See docs/design.md. */

@font-face {
  font-family: "Public Sans";
  src: url("/static/fonts/PublicSans-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  /* Palette (design review 2026-10-17). New names first, then the older names kept as aliases
     with the same values so existing rules and charts.js keep working. */
  --bg: #f4f6f8;
  --surface: #ffffff;
  --ink: #12263a;
  --muted: #53667a;
  --line: #d5dde5;
  --primary: #1f5f8b;
  --land: #e6e1d6;
  --water: #cfe2ee;
  --watch: #d98a00;
  --warning: #c62828;
  --advisory: #5b8db8;
  --caution: #b26a00;
  --on-watch: #12263a;
  --paper: #f4f6f8;
  --ink-muted: #53667a;
  --rule: #d5dde5;
  --edge: #7a8fa2;
  --link: #1f5f8b;
  --magenta: #b0177a;
  --amber: #d98e04;
  --amber-ink: #7a5000;
  --hold: #8db1cc;
  --hold-ink: #2b5a7d;
  --nws: #c62828;
  --ok: #1f6b45;
  --lv-none: #e9eef1;
  --tint-magenta: #f8e6f1;
  --tint-amber: #fbf0d8;
  --tint-hold: #e3eef6;
  --tint-nws: #fbe7e7;
  --tint-ok: #e3f2ea;
  --focus: #1f5f8b;

  --font: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-1: 0.75rem;
  --fs-2: 0.875rem;
  --fs-3: 1rem;
  --fs-4: 1.25rem;
  --fs-5: 1.625rem;
  --fs-6: 2.25rem;
  --t-sm: var(--fs-2);
  --t-md: var(--fs-3);
  --t-lg: var(--fs-4);
  --t-xl: var(--fs-5);
  --t-2xl: var(--fs-6);
  --sp-1: 8px;
  --sp-2: 12px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 40px;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 40px;
  --tap: 44px;
  --nav-h: 56px;
  --radius: 6px;
  --max: 1120px;
}

/* Theme. The dark tokens appear twice, once for "Auto with a dark device" and once for the forced
   Dark choice (data-theme set by static/js/theme.js). Keep the two blocks identical;
   tests/test_theme_switch.py compares them. A forced Light choice skips the media block. */
:root[data-theme="light"] {
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d1620;
    --surface: #15212e;
    --ink: #e8eef4;
    --muted: #9db0c2;
    --line: #263647;
    --primary: #6bb0de;
    --land: #1d2a33;
    --water: #0f2433;
    --paper: #0d1620;
    --ink-muted: #9db0c2;
    --rule: #263647;
    --edge: #5b7a92;
    --link: #6bb0de;
    --magenta: #f07ac0;
    --amber: #f2b33d;
    --amber-ink: #f2b33d;
    --hold: #3f6a89;
    --hold-ink: #8db9d8;
    --nws: #ff8a8a;
    --ok: #6fd1a0;
    --lv-none: #22364b;
    --tint-magenta: #3a1d33;
    --tint-amber: #3a2e14;
    --tint-hold: #172f43;
    --tint-nws: #3b1e22;
    --tint-ok: #16352a;
    --focus: #6bb0de;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1620;
  --surface: #15212e;
  --ink: #e8eef4;
  --muted: #9db0c2;
  --line: #263647;
  --primary: #6bb0de;
  --land: #1d2a33;
  --water: #0f2433;
  --paper: #0d1620;
  --ink-muted: #9db0c2;
  --rule: #263647;
  --edge: #5b7a92;
  --link: #6bb0de;
  --magenta: #f07ac0;
  --amber: #f2b33d;
  --amber-ink: #f2b33d;
  --hold: #3f6a89;
  --hold-ink: #8db9d8;
  --nws: #ff8a8a;
  --ok: #6fd1a0;
  --lv-none: #22364b;
  --tint-magenta: #3a1d33;
  --tint-amber: #3a2e14;
  --tint-hold: #172f43;
  --tint-nws: #3b1e22;
  --tint-ok: #16352a;
  --focus: #6bb0de;
}

/* Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-md) / 1.45 var(--font);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
h1,
h2,
h3 {
  line-height: 1.2;
  margin: 0 0 var(--s-2);
  font-weight: 650;
}
h1 {
  font-size: var(--t-xl);
}
h2 {
  font-size: var(--t-lg);
}
h3 {
  font-size: var(--t-md);
}
p {
  margin: 0 0 var(--s-3);
}
a {
  color: var(--link);
  text-underline-offset: 2px;
}
a:hover {
  text-decoration-thickness: 2px;
}
small,
.muted {
  color: var(--ink-muted);
  font-size: var(--t-sm);
}
img,
svg,
canvas {
  max-width: 100%;
}
hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--s-5) 0;
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: var(--s-2);
  top: -100px;
  background: var(--surface);
  padding: var(--s-2) var(--s-3);
  z-index: 50;
}
.skip:focus {
  top: var(--s-2);
}

/* Layout */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--s-4);
}
.page {
  padding-top: var(--s-4);
  padding-bottom: var(--s-5);
}
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
  margin-bottom: var(--s-4);
}
.page-head h1 {
  margin: 0;
}
.stack > * + * {
  margin-top: var(--s-4);
}
.section {
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  margin-top: var(--s-5);
}
.section > h2 {
  margin-bottom: var(--s-3);
}
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}
.grid-7-5 {
  display: grid;
  gap: var(--s-5);
}
@media (min-width: 960px) {
  .grid-7-5 {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }
}
.prose {
  max-width: 68ch;
  line-height: 1.55;
}
.prose ul,
.prose ol {
  padding-left: 1.25em;
}
.prose img {
  height: auto;
}

/* Header and navigation: one sticky 56 px bar, a menu sheet of tiles, inline links from 1000 px. */
.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--nav-h);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  display: flex;
  align-items: center;
  height: 100%;
  gap: var(--sp-2);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--tap);
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: auto;
  color: var(--ink);
  font-weight: 700;
  font-size: var(--fs-4);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.brand span {
  color: var(--primary);
}
.brand:hover {
  text-decoration: underline;
}
.pub-live {
  flex: none;
  white-space: nowrap;
  border: 1px solid var(--primary);
  color: var(--primary);
  border-radius: 999px;
  padding: 0 var(--sp-2);
  font-size: var(--fs-1);
  font-weight: 650;
  line-height: 1.6;
}

/* Quiet freshness chip: a dot and a word. */
.site-head .freshness.freshness--chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-1);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.site-head .freshness.freshness--chip::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
}
.site-head .freshness.freshness--chip[data-state="late"]::before {
  background: var(--caution);
}
.site-head .freshness.freshness--chip[data-state="stale"]::before {
  background: var(--warning);
}

/* Inline links (wide screens) */
.nav-inline {
  display: none;
}
.nav-inline ul {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-inline a {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  height: var(--nav-h);
  padding: 0 var(--sp-2);
  color: var(--muted);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.nav-inline a:hover {
  color: var(--ink);
}
.nav-inline a[aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
  border-bottom-color: var(--primary);
}

/* Theme switch: three radios styled as a small segmented control. The bar copy shows from 1080 px,
   the menu-sheet copy below it. The radio is visually hidden but stays focusable, and its label
   shows the focus ring. */
.theme-switch {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.theme-switch__seg {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
}
.theme-switch label {
  position: relative;
  display: inline-flex;
}
.theme-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.theme-switch label > span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--muted);
  font-size: var(--fs-1);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.theme-switch label:hover > span {
  color: var(--ink);
}
.theme-switch input:checked + span {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--edge);
}
.theme-switch input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
}
.theme-switch--bar {
  display: none;
  flex: none;
}
.theme-switch--sheet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  max-width: 28rem;
  margin: var(--sp-3) auto 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.theme-switch__caption {
  color: var(--muted);
  font-size: var(--fs-2);
  font-weight: 600;
}
.theme-switch--sheet label > span {
  min-height: var(--tap);
  padding: 0 var(--sp-3);
  font-size: var(--fs-2);
}

/* Menu: a details element, so it opens without JavaScript. */
.menu {
  flex: none;
}
.menu > summary {
  flex: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 var(--sp-1);
  border-radius: var(--radius);
  color: var(--ink);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.menu > summary::-webkit-details-marker {
  display: none;
}
.menu > summary:hover,
.menu[open] > summary {
  background: var(--bg);
}
.menu-icon {
  flex: none;
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.menu-label {
  display: none;
}
.menu-sheet {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  padding: var(--sp-3) var(--sp-3) var(--sp-4);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 12px 24px rgb(0 0 0 / 0.14);
}
.menu[open] > .menu-sheet {
  animation: sheet-in 140ms ease-out;
}
@keyframes sheet-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-1);
  max-width: 28rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.menu-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 64px;
  padding: 6px 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--fs-2);
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
}
.menu-tile svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--primary);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.menu-tile:hover {
  border-color: var(--primary);
}
.menu-tile[aria-current="page"] {
  border-color: var(--primary);
  box-shadow: inset 0 -3px 0 var(--primary);
  font-weight: 700;
}
.menu-badge,
.pub-badge {
  min-width: 1.4em;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--warning);
  color: #fff;
  font-size: var(--fs-1);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.menu-badge {
  position: absolute;
  top: 4px;
  right: 4px;
}

/* Active alerts: directly under the header, amber for a watch, red for a warning. */
.alert-bar {
  display: block;
  padding: var(--sp-1) 0;
  background: var(--watch);
  color: var(--on-watch);
  font-size: var(--fs-2);
  font-weight: 600;
  text-decoration: none;
}
.alert-bar[data-level="warning"] {
  background: var(--warning);
  color: #fff;
}
.alert-bar:hover .alert-bar__text {
  text-decoration: underline;
}
.alert-bar .wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 32px;
}
.alert-bar strong {
  flex: none;
}
.alert-bar__text {
  min-width: 0;
}
@media (max-width: 439px) {
  .site-head .pub-live {
    display: none;
  }
}
@media (max-width: 399px) {
  .brand {
    font-size: var(--fs-3);
  }
}
.alert-bar:focus-visible {
  outline-color: var(--ink);
  outline-offset: -3px;
}

@media (min-width: 760px) {
  .menu-label {
    display: inline;
  }
  .menu {
    position: relative;
  }
  .menu-sheet {
    left: auto;
    right: 0;
    width: 26rem;
    border: 1px solid var(--line);
    border-radius: 0 0 var(--radius) var(--radius);
  }
}

/* Header budget (checked at 760, 768, 900, 1024 px by tools/screenshots.py): six inline links need
   about 1000 px next to the brand (public, with a two-digit alert badge), chip and menu button. The bar theme control needs about 1080 px,
   and the public header drops its menu button only then. Below those widths the links and the
   control live in the menu sheet. */
@media (min-width: 1000px) {
  .nav-inline {
    display: block;
  }
}
@media (min-width: 1080px) {
  .theme-switch--bar {
    display: block;
  }
  .theme-switch--sheet {
    display: none;
  }
  .site-head--public .menu {
    display: none;
  }
}

/* Chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375em;
  min-height: 1.75rem;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  border: 1px solid var(--edge);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.chip--level-none {
  background: var(--lv-none);
  color: var(--ink-muted);
}
.chip--level-hold {
  background: var(--tint-hold);
  border-color: var(--hold-ink);
  color: var(--hold-ink);
}
.chip--level-watch {
  background: var(--tint-amber);
  border-color: var(--amber-ink);
  color: var(--amber-ink);
}
.chip--level-post_now {
  background: var(--magenta);
  border-color: var(--magenta);
  color: var(--paper);
}
.chip--nws {
  background: var(--tint-nws);
  border-color: var(--nws);
  color: var(--nws);
}
.chip--urgent {
  background: var(--nws);
  border-color: var(--nws);
  color: var(--paper);
}
.chip--state-idea {
  background: var(--tint-hold);
  border-color: var(--hold-ink);
  color: var(--hold-ink);
}
.chip--state-drafting,
.chip--state-late,
.chip--state-pending {
  background: var(--tint-amber);
  border-color: var(--amber-ink);
  color: var(--amber-ink);
}
.chip--state-published,
.chip--state-ready,
.chip--state-active {
  background: var(--tint-ok);
  border-color: var(--ok);
  color: var(--ok);
}
.chip--state-skipped,
.chip--state-ended {
  background: var(--lv-none);
  border-color: var(--edge);
  color: var(--ink-muted);
}
.chip--state-failed {
  background: var(--tint-magenta);
  border-color: var(--magenta);
  color: var(--magenta);
}
.chip .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

/* Confidence pips: n of 3 filled, with the word beside them */
.pips {
  display: inline-flex;
  align-items: center;
  gap: 0.375em;
  font-size: var(--t-sm);
  font-weight: 600;
  white-space: nowrap;
}
.pips i {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: transparent;
}
.pips[data-n="1"] i:nth-child(-n + 1),
.pips[data-n="2"] i:nth-child(-n + 2),
.pips[data-n="3"] i:nth-child(-n + 3) {
  background: var(--ink);
}

/* Desk versus official */
.badge-vs {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
}
.badge-vs[data-vs="higher"],
.badge-vs[data-vs="lower"],
.badge-vs[data-vs="earlier"] {
  color: var(--magenta);
}
.badge-vs[data-vs="agree"] {
  color: var(--ok);
}

/* Freshness detail on Home. The header chip is the loud-free signal; this is the quiet detail. */
.freshness {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-left: 4px solid var(--ok);
  background: var(--surface);
  font-size: var(--fs-2);
  font-weight: 500;
}
.freshness[data-state="late"] {
  border-left-color: var(--caution);
}
.freshness[data-state="missed"] {
  border-left-color: var(--warning);
}
.freshness strong {
  white-space: nowrap;
}
.freshness small {
  color: inherit;
  font-weight: 400;
}

/* Alert strip: official NWS products, always labelled */
.alert-strip {
  border-left: 6px solid var(--nws);
  background: var(--tint-nws);
  padding: var(--s-3) var(--s-4);
}
.alert-strip a {
  color: var(--nws);
  font-weight: 600;
}

/* Cards: only for units you can open (day cards, threats) */
.card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  color: inherit;
  text-decoration: none;
}
a.card:hover {
  border-color: var(--ink);
}
.daycards {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(132px, 220px);
  gap: var(--s-2);
  overflow-x: auto;
  padding-bottom: var(--s-2);
  scroll-snap-type: x proximity;
}
.daycard {
  scroll-snap-align: start;
  padding: 0;
}
.daycard > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-3);
  min-height: var(--tap);
}
.daycard > summary::-webkit-details-marker {
  display: none;
}
.daycard .dow {
  font-weight: 650;
}
.daycard .temps {
  font-size: var(--t-xl);
  font-weight: 300;
  line-height: 1.1;
  margin: var(--s-1) 0;
}
.daycard .temps span {
  color: var(--ink-muted);
}
.daycard .facts {
  font-size: var(--t-sm);
  color: var(--ink-muted);
}
.daycard .more {
  padding: 0 var(--s-3) var(--s-3);
  font-size: var(--t-sm);
  max-width: 34ch;
}
.daycard[open] {
  grid-column: span 2;
}

/* Ruled rows: runs, drafts, alerts */
.rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--rule);
  min-height: var(--tap);
}
.rows .row:first-child {
  border-top: 0;
}
.row .when {
  color: var(--ink-muted);
  font-size: var(--t-sm);
  min-width: 9.5em;
}
.row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  flex: 1 1 100%;
}
@media (min-width: 760px) {
  .row-meta {
    flex: 0 1 auto;
  }
}
.row .grow {
  flex: 1 1 14em;
}

/* Tables scroll inside their own container */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  max-width: 100%;
}
.table-scroll table {
  border-collapse: collapse;
  width: 100%;
  min-width: 36rem;
  font-size: var(--t-sm);
}
/* Two-column key/value tables fit a phone without scrolling. */
.table-scroll--kv table {
  min-width: 0;
}

.table-scroll th,
.table-scroll td {
  text-align: left;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  white-space: nowrap;
}
.table-scroll th {
  font-weight: 650;
  background: var(--surface);
}
.table-scroll tbody tr:last-child td {
  border-bottom: 0;
}
.table-scroll .num {
  text-align: right;
}
.table-scroll td.wrap-cell {
  white-space: normal;
  min-width: 14em;
}
tr.unavailable td {
  color: var(--magenta);
  font-weight: 600;
}

/* Table cards. Below 760 px each row is a stacked card whose cells are labelled by data-label.
   From 760 px the first column sticks and a soft edge shows where the table keeps scrolling. */
.table-cards {
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left center / 36px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, transparent) right center / 36px 100% no-repeat local,
    linear-gradient(to right, color-mix(in srgb, var(--ink) 16%, transparent), transparent) left center / 12px 100% no-repeat scroll,
    linear-gradient(to left, color-mix(in srgb, var(--ink) 16%, transparent), transparent) right center / 12px 100% no-repeat scroll;
}
.table-cards:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
@media (min-width: 760px) {
  .table-cards th:first-child,
  .table-cards td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--rule);
  }
  .table-cards td small,
  .table-cards td .compare__note {
    display: block;
  }
  .compare td {
    white-space: normal;
    min-width: 13em;
  }
}
@media (max-width: 759.98px) {
  .table-cards {
    overflow: visible;
    border: 0;
    background: none;
  }
  .table-cards table,
  .table-cards tbody {
    display: block;
    min-width: 0;
  }
  .table-cards thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .table-cards tr {
    display: block;
    margin-bottom: var(--s-3);
    background: var(--surface);
    border: 1px solid var(--edge);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .table-cards th[scope="row"] {
    display: block;
    padding: var(--s-2) var(--s-3);
    border-bottom: 1px solid var(--rule);
    background: color-mix(in srgb, var(--ink) 5%, var(--surface));
    white-space: normal;
  }
  .table-cards td {
    display: grid;
    grid-template-columns: 7.5em minmax(0, 1fr);
    gap: var(--s-2);
    align-items: baseline;
    white-space: normal;
    min-width: 0;
    padding: var(--s-2) var(--s-3);
  }
  .table-cards td::before {
    content: attr(data-label);
    color: var(--ink-muted);
    font-size: var(--t-sm);
  }
  .table-cards td[colspan]::before {
    content: attr(data-label);
  }
  .table-cards td.wrap-cell {
    min-width: 0;
  }
  .table-cards td:empty {
    display: none;
  }
  .table-cards tbody tr:last-child td {
    border-bottom: 1px solid var(--rule);
  }
  .table-cards td:last-child {
    border-bottom: 0;
  }
}
.compare th[scope="row"] {
  white-space: nowrap;
}
.compare__day {
  font-weight: 650;
}
.compare__flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-2);
  margin-top: var(--s-1);
}
.compare__note {
  display: block;
  color: var(--ink-muted);
  margin-top: 2px;
}
@media (max-width: 759.98px) {
  .compare td > * {
    grid-column: 2;
  }
  .compare td::before {
    grid-column: 1;
    grid-row: 1 / span 4;
    align-self: start;
  }
}
tr.source-silent th,
tr.source-silent td {
  background: var(--tint-nws);
  color: var(--nws);
  font-weight: 650;
  white-space: normal;
}
tr.source-silent td {
  color: var(--ink);
  font-weight: 400;
}

/* Home and Live data heading: title with the point picker beside it. */
.point-pick {
  display: flex;
  align-items: end;
  gap: var(--s-2);
}
@media (min-width: 760px) {
  .point-pick {
    margin-left: auto;
  }
}
.section--first {
  border-top: 0;
  margin-top: var(--s-3);
  padding-top: 0;
}
.obs-line {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
}
.obs-line__temp {
  flex: none;
  font-size: var(--t-2xl);
  font-weight: 300;
  line-height: 1;
}
.chart.chart--live {
  height: auto;
  min-height: 320px;
  background: none;
  border: 0;
  padding: 0;
}
.chart--live .live-canvas {
  height: 320px;
}
/* Live chart controls (charts.js renderLive); the public site has the same rules in public.css */
.live-ctl,
.live-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.live-seg,
.live-chip {
  min-height: var(--tap);
  padding: 0 var(--s-4);
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.live-seg[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}
.live-chip {
  min-height: 36px;
  padding: 0 var(--s-3);
}
.live-chip[aria-pressed="false"] {
  opacity: 0.55;
  text-decoration: line-through;
}
.live-chip[aria-pressed="true"] {
  border-color: var(--ink);
}
.live-seg:focus-visible,
.live-chip:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.live-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  display: inline-block;
}
.live-chip--band::before {
  content: "";
  width: 1.1rem;
  height: 0.7rem;
  border-radius: 2px;
  background: var(--ink);
  opacity: 0.18;
}
.live-note {
  min-height: 1.4em;
  font-size: var(--t-sm);
  margin-top: var(--s-2);
}
pre.afd {
  white-space: pre-wrap;
  max-height: 60vh;
  overflow: auto;
}

/* Key/value lists */
.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--s-1) var(--s-4);
  margin: 0;
}
.kv dt {
  color: var(--ink-muted);
}
.kv dd {
  margin: 0;
}

/* Forms and buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 var(--s-4);
  border-radius: var(--radius);
  border: 1px solid var(--edge);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover {
  border-color: var(--ink);
}
.btn--primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.btn--danger {
  border-color: var(--magenta);
  color: var(--magenta);
}
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  font-size: var(--t-sm);
  color: var(--ink-muted);
}
.field input,
.field select,
.field textarea,
select.field-control,
input.field-control {
  min-height: var(--tap);
  padding: 0 var(--s-3);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  max-width: 100%;
}
.field textarea {
  padding: var(--s-2) var(--s-3);
  min-height: 6rem;
}
.check {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--tap);
}
.check input {
  width: 1.375rem;
  height: 1.375rem;
  accent-color: var(--ink);
}
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: flex-end;
  margin-bottom: var(--s-4);
}
.pager {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-4);
}

/* Disclosure */
details.disclosure {
  border-top: 1px solid var(--rule);
}
details.disclosure > summary {
  min-height: var(--tap);
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
}
details.disclosure[open] > summary {
  margin-bottom: var(--s-2);
}
pre {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s-3);
  font-size: var(--t-sm);
  margin: 0;
}

/* County map: the one bold element, framed like a chart neatline */
.countymap {
  margin: 0;
}
.map-frame {
  border: 2px solid var(--ink);
  background: var(--water);
  line-height: 0;
}
.map-frame svg {
  display: block;
  width: 100%;
  height: auto;
}
.map-frame .water {
  fill: var(--water);
}
.map-frame .county {
  fill: var(--lv-none);
  stroke: var(--ink);
  stroke-width: 1.25;
  stroke-linejoin: round;
  cursor: pointer;
}
.map-frame .county[data-level="hold"] {
  fill: var(--hold);
}
.map-frame .county[data-level="watch"] {
  fill: var(--amber);
}
.map-frame .county[data-level="post_now"] {
  fill: url(#hatch-post);
}
.map-frame .county:hover,
.map-frame .county.is-picked {
  stroke-width: 3;
}
.map-frame .county.is-picked {
  stroke: var(--link);
}
.map-frame .land {
  fill: var(--land);
  stroke: var(--rule, #9aa8b2);
  stroke-width: 0.75;
  stroke-linejoin: round;
}
.map-frame .map-label {
  font-size: 22px;
  font-weight: 600;
  fill: var(--ink-muted, var(--ink));
  stroke: var(--paper);
  stroke-width: 4px;
  paint-order: stroke;
  text-anchor: middle;
  pointer-events: none;
}
.map-frame .map-label.water-label {
  font-style: italic;
  font-weight: 400;
}
.map-frame .map-label.pin-label {
  text-anchor: start;
  fill: var(--ink);
}
.map-frame .map-pin {
  fill: var(--link);
  stroke: var(--paper);
  stroke-width: 3;
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  margin: var(--s-3) 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-sm);
}
.legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.swatch {
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid var(--ink);
  background: var(--lv-none);
  flex: none;
}
.swatch[data-level="hold"] {
  background: var(--hold);
}
.swatch[data-level="watch"] {
  background: var(--amber);
}
.swatch[data-level="post_now"] {
  background: repeating-linear-gradient(45deg, var(--magenta) 0 4px, var(--paper) 4px 6px);
}
.county-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
}
.county-chip {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.county-chip[open] {
  grid-column: 1 / -1;
}
.county-chip summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: 0 var(--s-3);
  cursor: pointer;
  list-style: none;
}
.county-chip summary::-webkit-details-marker {
  display: none;
}
.county-chip summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.county-chip .detail {
  padding: 0 var(--s-3) var(--s-3);
  max-width: 60ch;
}

/* Charts */
.chart {
  position: relative;
  width: 100%;
  height: 260px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s-2);
}
.chart canvas {
  width: 100% !important;
}
.chart[data-state="loading"]::after,
.chart[data-state="error"]::after {
  content: attr(data-msg);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink-muted);
}
@media (min-width: 960px) {
  .chart {
    height: 340px;
  }
}

/* Empty states */
.empty {
  padding: var(--s-5) 0;
  max-width: 48ch;
}
.empty p {
  margin-bottom: var(--s-3);
}

/* Media */
figure.post-figure {
  margin: var(--s-4) 0;
}
figure.post-figure img {
  display: block;
  width: 100%;
  height: auto;
}
figure.post-figure figcaption {
  color: var(--ink-muted);
  font-size: var(--t-sm);
  margin-top: var(--s-1);
}
.gif-wrap {
  position: relative;
}
.gif-toggle {
  margin-top: var(--s-2);
}

/* HTMX and toast */
.htmx-request {
  opacity: 0.7;
}
.htmx-added {
  opacity: 0;
}
.htmx-settling {
  transition: opacity 120ms ease-out;
}
.htmx-error {
  position: fixed;
  left: var(--s-4);
  right: var(--s-4);
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--s-4));
  max-width: 28rem;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--tint-nws);
  color: var(--ink);
  border: 1px solid var(--nws);
  border-radius: var(--radius);
  z-index: 70;
}
.htmx-error[hidden] {
  display: none;
}
.htmx-error span {
  flex: 1;
}
.htmx-error__close {
  min-height: var(--tap);
  padding: 0 var(--s-3);
  background: transparent;
  color: var(--link);
  border: 0;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
@media (min-width: 760px) {
  .htmx-error {
    bottom: var(--s-4);
    left: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
.gif-wrap img {
  display: block;
  height: auto;
}