/* 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); }

/* 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); }

.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-summary { font-size: var(--t-lg); }
  .pub-h1 { font-size: var(--t-2xl); }
  .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); }

/* Icons on a tinted sky card: lighter strokes so they read on the gradient. */
.sky { --ic-rain: #9bcbff; --ic-snow: #eaf3ff; --ic-cloud: #e6ecf3; --ic-storm: #b4c0ce; --ic-cloud-edge: #dbe9fb; --ic-wind: #dbe9fb; --ic-fog: #dbe9fb; color: var(--sky-ink); }
.wx-ic { display: inline-block; flex: none; vertical-align: middle; }

/* Landing (v3a): the sky-tinted Now card, the watch column and the week row */
.lv-row { display: grid; gap: var(--s-4); margin-bottom: var(--s-5); }
.lv-row > * { min-width: 0; }
.lv-now { --sky-a: var(--sky-clear-a); --sky-b: var(--sky-clear-b); background: linear-gradient(160deg, var(--sky-a), var(--sky-b)); border-radius: 16px; padding: var(--s-4) var(--s-5); }
.lv-now.sky-overcast { --sky-a: var(--sky-over-a); --sky-b: var(--sky-over-b); }
.lv-now.sky-storm { --sky-a: var(--sky-storm-a); --sky-b: var(--sky-storm-b); }
.lv-now.sky-night { --sky-a: var(--sky-night-a); --sky-b: var(--sky-night-b); }
.lv-hero { display: flex; align-items: center; gap: var(--s-4); }
.lv-hero-ic { width: 64px; height: 64px; }
.lv-hero-text { min-width: 0; }
.lv-hero-text p { margin: 0; }
.lv-tag { font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .06em; }
.lv-temp { font-size: clamp(44px, 9vw, 64px); font-weight: 700; line-height: 1.05; }
.lv-stale { opacity: .75; }
.lv-obs { font-size: var(--t-sm); margin-top: 2px; }
.lv-hilo { font-size: var(--t-sm); margin-top: var(--s-1); font-weight: 600; }
.lv-head { font-size: var(--t-lg); font-weight: 650; line-height: 1.25; margin: var(--s-3) 0 0; padding-top: var(--s-3); border-top: 1px solid rgba(255, 255, 255, .35); }
.lv-by { display: inline-block; margin: var(--s-2) 0 0; padding: 1px var(--s-2); border: 1px solid rgba(255, 255, 255, .7); border-radius: 999px; font-size: var(--fs-1); }
.lv-by[data-author="auto"] { border-style: dashed; }
.lv-h2 { font-size: var(--fs-2); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); margin-bottom: var(--s-2); }
.lv-watch { display: grid; gap: var(--s-2); }
.lv-watch .pub-watch-card, .lv-none, .lv-county { border: 0; border-left: 4px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: none; padding: var(--s-3); }
.lv-watch .pub-watch-card { border-left-color: var(--amber); background: var(--tint-amber); }
.lv-watch .pub-watch-card[data-level="hold"], .lv-watch .pub-watch-card[data-level="ended"] { border-left-color: var(--hold); background: var(--tint-hold); }
.lv-watch .pub-watch-card[data-level="post_now"] { border-left-color: var(--warning); background: var(--tint-nws); }
.lv-watch .pub-watch-card h3 { margin-top: var(--s-1); font-size: var(--t-md); }
.lv-none { margin: 0; color: var(--ink-muted); background: var(--lv-none); }
.lv-county { margin: var(--s-2) 0 0; font-size: var(--t-sm); background: var(--lv-none); }
.lv-county[data-level="warning"] { border-left-color: var(--warning); background: var(--tint-nws); }
.lv-county[data-level="watch"] { border-left-color: var(--watch); background: var(--tint-amber); }
.lv-county[data-level="advisory"] { border-left-color: var(--advisory); background: var(--tint-hold); }
.lv-week { margin-bottom: var(--s-5); }
.lv-scroll { position: relative; display: block; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--radius); }
.lv-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lv-days { display: flex; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.lv-days li { flex: 0 0 calc((100% - 3 * var(--s-2)) / 4); scroll-snap-align: start; min-width: 0; }
.lv-days a { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); padding: var(--s-3) var(--s-1); height: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); text-decoration: none; text-align: center; }
.lv-days a:hover { border-color: var(--primary); }
.lv-days a[aria-current="date"] { box-shadow: 0 0 0 2px var(--primary) inset; border-color: var(--primary); }
.lv-dow { font-size: var(--fs-2); font-weight: 600; }
.lv-noic { width: 40px; height: 40px; }
.lv-temps b { font-size: var(--t-md); }
.lv-temps small { font-size: var(--fs-2); color: var(--ink-muted); }
.lv-hint { margin: var(--s-1) 0 0; text-align: right; font-size: var(--fs-1); }
.lv-week .pub-deskno { margin-top: var(--s-3); }
.lv-note { margin-top: var(--s-3); }
.lv-note summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--link); }
@media (min-width: 760px) {
  .lv-row { grid-template-columns: 3fr 2fr; gap: var(--s-4); align-items: start; }
  .lv-hero-ic { width: 92px; height: 92px; }
  .lv-scroll { overflow: visible; }
  .lv-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .lv-days li { flex: none; }
  .lv-hint { display: none; }
}