/* Goldberg Weather - Live. Loads after app.css and reuses its tokens, font and components. */
[hidden] { display: none !important; }
.pub-body { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* Header: the shared sticky .site-head in app.css; the stale notice is its freshness chip. */
.pub { padding-top: var(--s-5); padding-bottom: var(--s-6); }
.pub-h1 { font-size: var(--t-xl); line-height: 1.15; margin-bottom: var(--s-3); }
.pub-lede { max-width: 40rem; margin-bottom: var(--s-4); }
.pub-prose { max-width: 40rem; font-size: var(--t-md); line-height: 1.6; }
.pub-prose p { margin-bottom: var(--s-3); }
.pub-prose h2 { font-size: var(--t-lg); margin: var(--s-5) 0 var(--s-2); }
.pub-prose ul { padding-left: 1.1em; margin-bottom: var(--s-3); }

/* TL;DR: the one big element */
.pub-hero { max-width: 46rem; padding: var(--s-2) 0 var(--s-4); }
.pub-hero h1 { font-size: var(--t-2xl); line-height: 1.12; letter-spacing: -0.01em; margin-bottom: var(--s-3); }
.pub-summary { font-size: var(--t-md); line-height: 1.5; max-width: 40rem; }
.pub-summary p { margin-bottom: var(--s-3); }

/* Sections: hairline rule, generous air */
.pub-sec { border-top: 1px solid var(--rule); padding-top: var(--s-5); margin-top: var(--s-5); }
.pub-sec--first { margin-top: var(--s-4); }
.pub-sec > h2 { font-size: var(--t-xl); margin-bottom: var(--s-4); }
.pub-split { display: grid; gap: var(--s-5); }
.pub-split h2 { font-size: var(--t-lg); margin-bottom: var(--s-3); }
.pub-cards { display: grid; gap: var(--s-3); list-style: none; margin: 0; padding: 0; }
.pub-cards .card h3 { margin-bottom: var(--s-1); }
.pub-days .pub-day { padding: var(--s-3) var(--s-4); }
.pub-days .pub-day p { margin: var(--s-2) 0 0; }
.pub-more { margin-top: var(--s-2); font-size: var(--t-sm); }
.pub-more summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--link); }
.pub-pick { display: flex; gap: var(--s-2); align-items: flex-end; }
.pub-updates { max-width: 52rem; }
.pub-updates .when { flex: 0 0 10.5em; }
.pub-updates ul { margin: var(--s-1) 0 0; padding-left: 1.1em; }
.pub-foot { padding-top: var(--s-4); padding-bottom: var(--s-6); border-top: 1px solid var(--rule); max-width: 52rem; }

/* Place picker: one quiet row above the content */
.pub-pick { align-items: flex-end; flex-wrap: wrap; margin-bottom: var(--s-4); }
.pub-pick .field { min-width: 12rem; }

/* Notice: shown only when the data is late, missing or out of date */
.pub-notice { margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border: 1px solid var(--amber-ink); border-left-width: 4px; border-radius: var(--radius); background: var(--tint-amber); color: var(--ink); }
.pub-notice[data-state="missed"] { border-color: var(--nws); background: var(--tint-nws); }
.pub-notice[data-state="none"] { border-color: var(--line); background: transparent; }

/* Byline: who wrote the words above it. Automatic text is dashed so it never reads as Alex's. */
.pub-by { display: inline-block; margin: 0 0 var(--s-3); padding: 2px var(--s-3); border-radius: 999px; border: 1px solid var(--hold-ink); background: var(--tint-hold); color: var(--hold-ink); font-size: var(--t-sm); font-weight: 600; }
.pub-by[data-author="auto"], .pub-src[data-source="auto"] { border: 1px dashed var(--edge); background: transparent; color: var(--ink-muted); }
.pub-tldr { font-size: var(--t-lg); line-height: 1.4; max-width: 38rem; margin-bottom: var(--s-3); font-weight: 500; }
.pub-src { display: inline-block; margin: var(--s-2) 0 0; padding: 0 var(--s-2); border-radius: 999px; border: 1px solid var(--hold-ink); color: var(--hold-ink); font-size: var(--fs-1); font-weight: 600; }
.pub-count { font-size: var(--t-sm); font-weight: 500; color: var(--ink-muted); margin-left: var(--s-2); }
.pub-sub { font-size: var(--t-md); margin: var(--s-5) 0 var(--s-2); }
.pub-kind { margin: 0 0 2px; font-size: var(--t-sm); color: var(--ink-muted); }
.pub-intro { font-size: var(--t-lg); line-height: 1.45; font-weight: 500; }
.pub-watch-card p { margin: var(--s-1) 0 0; }
.chip--level-ended { background: var(--lv-none); color: var(--ink-muted); }

/* Right now: the current reading, then the next twelve hours as a strip that scrolls sideways */
.pub-now { display: grid; gap: var(--s-4); }
.pub-now > * { min-width: 0; }
.pub-obs-temp { font-size: 3rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; margin-bottom: var(--s-1); }
.pub-obs-text { font-size: var(--t-md); font-weight: 600; margin-bottom: var(--s-1); }
.pub-obs p { margin-top: 2px; }
.pub-obs-src { font-size: var(--t-sm); margin-top: var(--s-2); }
.pub-hours-wrap h3 { font-size: var(--t-md); margin-bottom: var(--s-2); }
.pub-hours { display: flex; list-style: none; margin: 0; padding: 0; overflow-x: auto; scroll-snap-type: x proximity; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius); }
.pub-hours:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pub-hours li { flex: 0 0 4.75rem; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--s-3) var(--s-2); text-align: center; scroll-snap-align: start; }
.pub-hours li + li { border-left: 1px solid var(--rule); }
.h-time { font-size: var(--t-sm); color: var(--ink-muted); }
.h-temp { font-size: var(--t-lg); font-weight: 700; }
.h-rain, .h-gust { font-size: var(--fs-1); color: var(--ink-muted); line-height: 1.25; }

/* Day cards: Now shows five short ones; Forecast gives each day more room */
.pub-day .dow { font-size: var(--t-md); }
.pub-day .temps { font-size: var(--t-xl); font-weight: 700; line-height: 1.15; margin: 0; }
.pub-day .temps .lo { font-size: var(--t-md); font-weight: 500; color: var(--ink-muted); }
.pub-day .facts { color: var(--ink-muted); font-size: var(--t-sm); margin-top: var(--s-1); }
.pub-day-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.pub-days--wide .pub-day { padding: var(--s-4); }

/* Day card folds: the models table with a colour dot per model (the chart colours, light and
   dark; a browser without light-dark() keeps the neutral dot), and the NWS gap chip */
.pub-models .table-scroll { margin-top: var(--s-2); }
.pub-models .pub-table th, .pub-models .pub-table td { padding: var(--s-1) 0.25rem; }
.pub-dot { display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: 0.375rem; border-radius: 50%; background: var(--ink-muted); }
/* BEGIN generated by tools/gen_model_assets.py: edit live/modelspec.py */
.pub-dot[data-model="HRRR"] { background: light-dark(#0087FF, #BDC6F3); }
.pub-dot[data-model="NAM"] { background: light-dark(#0909B4, #5A3FFF); }
.pub-dot[data-model="GFS"] { background: light-dark(#36996C, #B4FCA2); }
.pub-dot[data-model="ECMWF"] { background: light-dark(#7E36C6, #E136B4); }
.pub-dot[data-model="ECMWF AI"] { background: light-dark(#5A0975, #7E48CF); }
.pub-dot[data-model="ICON"] { background: light-dark(#5A2D1B, #C63F09); }
.pub-dot[data-model="GEM"] { background: light-dark(#485A12, #FFD800); }
.pub-dot[data-model="NBM"] { background: light-dark(#51873F, #489951); }
/* END generated */
.pub-gap { min-height: 0; }
.pub-deskno { max-width: 46rem; margin-bottom: var(--s-3); }

/* Live chart (charts.js renderLive): variable switch, model chips, shaded band */
.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); }
.pub-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.pub-table th, .pub-table td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--rule); text-align: left; white-space: nowrap; }
.pub-table thead th { color: var(--ink-muted); font-weight: 600; }
.pub-table tbody th { font-weight: 600; }
.pub-alerts .pub-alert { gap: var(--s-2) var(--s-3); }

/* Alerts and map. Level is always a word as well as a colour. */
.pub-sev { border-radius: 999px; padding: 0 var(--s-2); font-size: var(--t-sm); font-weight: 650; border: 1px solid var(--ink); }
.pub-sev[data-level="advisory"] { background: var(--tint-hold); border-color: var(--hold-ink); color: var(--hold-ink); }
.pub-sev[data-level="watch"] { background: var(--tint-amber); border-color: var(--amber-ink); color: var(--amber-ink); }
.pub-sev[data-level="warning"] { background: var(--nws); border-color: var(--nws); color: var(--paper); }
.map-frame .county { cursor: default; }
.map-frame .county[data-level="advisory"], .swatch[data-level="advisory"] { fill: var(--hold); background: var(--hold); }
.map-frame .county[data-level="warning"], .swatch[data-level="warning"] { fill: var(--nws); background: var(--nws); }
.map-frame .county[data-level="watch"], .swatch[data-level="watch"] { fill: var(--amber); background: var(--amber); }
.map-frame .county:hover { stroke-width: 1.25; }

@media (min-width: 760px) {
  .pub-cards { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
  .pub-days--wide { grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); }
  .pub-hero h1 { font-size: 2.75rem; }
  .pub-summary { font-size: var(--t-lg); }
  .pub-h1 { font-size: var(--t-2xl); }
  .pub-now { grid-template-columns: 15rem minmax(0, 1fr); align-items: start; }
  .pub-days:not(.pub-days--wide) { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
}
@media (min-width: 960px) {
  .pub-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* Breathing room under card grids and inside the watch card */
.pub-cards + p { margin-top: var(--s-3); }
.pub-watch-card h3 { margin-top: var(--s-2); }