/* /weather — the column over Kerrville.
 *
 * A vertical section through the air, read top to bottom: how saturated it is, how high the cloud base is,
 * how much energy the air carries, what the barometer is doing, what has already fallen, what is forecast,
 * and where it all ends up — the river. /radar is the plan view; this is the section.
 *
 * TWO DELIBERATE CHOICES:
 *
 * 1. The symbols are the WMO station model, not a weather icon set. A sky-cover circle filled in eighths, a
 *    wind barb where each full barb is ten knots, the present-weather glyphs from code table 4677. Every
 *    mark encodes a measured value, which a sun-behind-a-cloud icon does not, and it is the authentic
 *    vernacular of the subject rather than the one every weather page reaches for. Each glyph is paired with
 *    the plain reading in words, so nothing on the page depends on knowing the code.
 *
 * 2. Jade fields bracket the page — the sky near the top, the river at the end. They are the two ends of the
 *    column and the two things this publication exists to connect. Everything between them stays on the dark
 *    surface so the jade reads as emphasis and not as decoration.
 */
:root{
  --w-dry:#c9a86a;            /* caliche — dry air, dry rock */
  --w-wet:#3f93c9;            /* the Guadalupe — saturated air, water: fills, bars, the 2px rules */
  /* The same blue as TYPE is only 5.23:1 on the dark band. A fill and a word do not need the same colour to
   * read as the same thing — the label sits directly on its own rule — so the text takes a lighter step of
   * the same hue and the fill keeps the saturated one. */
  --w-wet-ink:#63b2e8;        /* 7.61:1 */
  /* Same split for the theta-e marker: the 3px rule stays on the site accent, the figure beside it takes a
   * lighter step of that accent so the only number naming Kerrville on the strip clears AAA too. */
  --w-here-ink:#24cda1;       /* 8.66:1, against --accent-bright's 6.89:1 */
  --w-sat:#1f6fb0;
  /* THE JADE FIELD IS INVERTED, and the measurements are why. A dark jade (#0d3a31) separates from the
   * page background by only 1.40:1 — too little for the block to read as a block, however legible its text
   * is. Getting real separation means crossing into the site's own accent, and there white text falls to
   * 2.29:1 while near-black ink rises to 7.39:1. So: bright field, dark ink. Band separation 6.89:1, text
   * 7.39:1, and it uses the site's existing --accent-bright and --on-accent rather than inventing a colour. */
  --w-jade:var(--accent-bright,#16b78f);
  --w-jade-2:rgba(2,20,15,.16);
  --w-jade-ink:var(--on-accent,#02140f);
  /* Secondary ink on the jade field. Was rgba(2,20,15,.82) = 5.54:1 — AA, and the single biggest block of
   * under-contrast type on the page, since the river band runs almost entirely in it (gauge names, the
   * notes, every label in the NOW strip). The field itself caps what is reachable: even solid #02140f only
   * reaches 7.39:1, so the ink is re-based on true black, where .87 alpha clears AAA at 7.18:1. The step
   * down from primary ink is now small, which is correct — on this field the hierarchy is carried by size
   * and weight, and there is no legibility left to spend on a tint. */
  --w-jade-ink-2:rgba(0,0,0,.87);     /* 7.18:1 */
  --w-jade-mark:#14527d;              /* 3.24:1 — a data mark, not text */
  --w-jade-warn:#8f1d1a;              /* 3.48:1 */
  --w-rule:rgba(255,255,255,.09);
  --w-rule-j:rgba(2,20,15,.22);
  --w-gut: clamp(16px, 5vw, 64px);
  /* NUMERALS ARE SET IN INTER, NOT THE SITE MONO. JetBrains Mono draws a dotted zero, which on a page whose
   * whole job is readouts turns every 0.00 into visual noise. Inter's zero is a plain oval, and
   * tabular-nums keeps the digits on a fixed advance so columns still line up — which was the only
   * functional reason to reach for a monospace here. The mono face stays on the word labels, which have
   * no digits in them. */
  --wx-num: var(--font-sans, "Inter", system-ui, sans-serif);
}
/* THE INK LADDER, RAISED — and scoped to this page only.
 *
 * Measured against the dark band (#17191b), the site's shared tokens land at 16.07:1 for --text, 6.54:1 for
 * --muted and 4.67:1 for --faint. The bottom two clear AA and nothing more, and on a page that is almost
 * entirely small readouts — eyebrows, unit suffixes, axis ends, captions, the notes under each chart — 4.67
 * is where type stops being quiet and starts being work to read.
 *
 * So both are lifted to AAA while keeping the three steps distinct and in order: 16.07 / 10.26 / 7.09. The
 * override lives on .wx, so every var(--muted) and var(--faint) inside the page picks it up and no other
 * page on the site is touched. The jade bands are unaffected: every element on them already overrides to
 * --w-jade-ink-2, which is measured against the bright field instead.
 * --wx-faint-note: this comment marks the change as applied.
 */
.wx{max-width:100%;margin:0;padding:0;
  --muted:#bdc8c4;   /* 10.26:1 on the dark band — body copy, bar labels, readout terms */
  --faint:#9ba7a3}   /* 7.09:1  — eyebrows, captions, units, axis ends, tick marks */
.wx-in{max-width:1180px;margin:0 auto;padding:0 var(--w-gut)}

/* ---- bands: solid blocks, full width ---------------------------------- */
.wx-band{padding:clamp(40px,6vw,86px) 0;border-bottom:1px solid var(--w-rule)}
.wx-band:last-child{border-bottom:0}
.wx-band.jade{background:var(--w-jade);border-bottom:0;color:var(--w-jade-ink)}
.wx-band.jade .wx-h{color:var(--w-jade-ink)}
.wx-band.jade .wx-say{color:var(--w-jade-ink-2)}
.wx-band.jade .wx-note{color:var(--w-jade-ink-2)}
.wx-band.jade .wx-read{border-top-color:var(--w-rule-j)}
.wx-band.jade .wx-read dt{color:var(--w-jade-ink-2)}
.wx-band.jade .wx-read dd{color:var(--w-jade-ink)}
/* The glyph legend inherits the band's ink via currentColor, so the same markup reads on either field. */
.wx-band.jade svg{color:var(--w-jade-ink)}
.wx-eyebrow{font-family:var(--font-mono);font-size:var(--fs-min);letter-spacing:var(--track-md);
  color:var(--faint);margin:0 0 12px}
.wx-band.jade .wx-eyebrow{color:var(--w-jade-ink-2)}
.wx-h{font-size:clamp(max(23px,var(--fs-min)),3.4vw,38px);line-height:var(--lh-snug);
  letter-spacing:var(--track-tighter);margin:0 0 12px;max-width:21ch}
.wx-say{font-size:clamp(max(16px,var(--fs-min)),1.55vw,19px);line-height:var(--lh-text);
  color:var(--muted);max-width:62ch;margin:0 0 24px}
.wx-say b{color:var(--text);font-weight:650}
.wx-band.jade .wx-say b{color:var(--w-jade-ink)}
.wx-note{color:var(--faint);font-size:var(--fs-min);line-height:var(--lh-base);max-width:66ch;margin:18px 0 0}
.wx-dead{color:var(--muted);font-size:var(--fs-min)}
.wx-band.jade .wx-dead{color:var(--w-jade-ink-2)}

/* ---- the station model ------------------------------------------------- */
.wx-plot{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,52px);align-items:flex-start}
.wx-model{flex:0 0 auto;background:var(--bg);border:1px solid var(--w-rule);
  border-radius:var(--radius-md);padding:14px 10px 10px}
.wx-band.jade .wx-model{background:rgba(2,20,15,.14);border-color:var(--w-rule-j)}
.wx-model figcaption{font-family:var(--wx-num);font-variant-numeric:tabular-nums;font-size:var(--fs-min);color:var(--faint);
  text-align:center;margin-top:6px}
.wx-band.jade .wx-model figcaption{color:var(--w-jade-ink-2)}

/* ---- the gap between air and dew point --------------------------------- */
.wx-gapwrap{flex:1 1 320px;min-width:280px}
.wx-gap{position:relative;height:clamp(150px,19vw,210px);background:var(--bg);
  border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--w-rule)}
.wx-fill{position:absolute;left:0;right:0;min-height:3px;
  background:linear-gradient(180deg,var(--w-wet),var(--w-sat));opacity:.6}
.wx-line{position:absolute;left:0;right:0;height:2px}
.wx-line span{position:absolute;right:12px;font-family:var(--wx-num);font-variant-numeric:tabular-nums;font-size:var(--fs-min);white-space:nowrap}
.wx-line.t{background:var(--w-dry)} .wx-line.t span{color:var(--w-dry);bottom:6px}
.wx-line.d{background:var(--w-wet)} .wx-line.d span{color:var(--w-wet-ink);top:6px}
.wx-spread{position:absolute;left:16px;font-family:var(--wx-num);font-variant-numeric:tabular-nums;
  font-size:clamp(26px,4.4vw,48px);font-weight:700;color:var(--text);line-height:1}
.wx-spread small{display:block;font-size:var(--fs-min);font-weight:500;color:var(--muted);
  letter-spacing:var(--track-sm);margin-top:6px}

/* ---- blocky bar rows (rain, river, anything proportional) -------------- */
.wx-bars{margin:22px 0 0}
.wx-bar{display:grid;grid-template-columns:minmax(110px,1.1fr) 3fr auto;gap:10px 14px;
  align-items:center;padding:7px 0}
.wx-bar + .wx-bar{border-top:1px solid var(--w-rule)}
.wx-band.jade .wx-bar + .wx-bar{border-top-color:var(--w-rule-j)}
.wx-bar dt,.wx-bar .lab{font-size:var(--fs-min);color:var(--muted);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wx-band.jade .wx-bar .lab{color:var(--w-jade-ink-2)}
.wx-track{height:18px;background:var(--bg);border-radius:2px;overflow:hidden;position:relative}
.wx-band.jade .wx-track{background:var(--w-jade-2)}
/* Caliche and river blue sit at 1.13:1 and 1.32:1 on the bright field — invisible. On jade the bars carry
   the band's own ink, with a deep blue and a deep red for the graded states, all at or above 3:1. */
.wx-band.jade .wx-fillbar{background:var(--w-jade-ink)}
.wx-band.jade .wx-fillbar.warn{background:var(--w-jade-mark)}
.wx-band.jade .wx-fillbar.full{background:var(--w-jade-warn)}
.wx-band.jade .wx-track.unrated{background:repeating-linear-gradient(135deg,
  rgba(2,20,15,.16) 0 5px, transparent 5px 10px)}
.wx-fillbar{height:100%;background:var(--w-wet)}
.wx-fillbar.warn{background:var(--w-dry)}
.wx-fillbar.full{background:#d9534f}
/* A gauge with no published discharge rating has no bar to draw. An empty track would read as "zero flow",
   which is the opposite of the truth, so it is hatched and labelled instead. */
.wx-track.unrated{background:repeating-linear-gradient(135deg,
  rgba(255,255,255,.05) 0 5px, transparent 5px 10px)}
.wx-val{font-family:var(--wx-num);font-variant-numeric:tabular-nums;font-size:var(--fs-min);color:var(--text);text-align:right;white-space:nowrap}
/* The trailing clause on a readout ("· 2.3 ft below action").
 *
 * It was held back with opacity:.62, which on the jade river band put it at 3.58:1 — a fail, and the only
 * one on the page that an audit reading colours alone cannot see, because the dimming lives in the opacity
 * and not in the colour. On the dark bands .72 is enough of a step and still clears AAA at 8.6:1. On the
 * jade band opacity is the wrong instrument altogether: that field tops out at 7.39:1 with FULL ink, so
 * there is no room to dim anything. There the clause keeps full strength and takes the secondary ink
 * instead, which is a step in colour rather than in transparency. */
.wx-val em{font-style:normal;opacity:.72}
.wx-band.jade .wx-val em{opacity:1;color:var(--w-jade-ink-2)}
/* Published flood-stage ticks sitting on the track: action, minor, moderate. */
.wx-mark{position:absolute;top:0;bottom:0;width:2px;background:rgba(2,20,15,.45)}
.wx-band:not(.jade) .wx-mark{background:rgba(255,255,255,.34)}
.wx-band.jade .wx-val{color:var(--w-jade-ink)}

/* ---- the strip of stations (theta-e) ----------------------------------- */
.wx-scale{position:relative;height:66px;margin:22px 0 8px;background:var(--bg);border-radius:var(--radius-sm)}
.wx-tick{position:absolute;top:16px;width:2px;height:20px;background:var(--faint);opacity:.5}
.wx-here{position:absolute;top:6px;width:3px;height:40px;background:var(--accent-bright)}
.wx-here b{position:absolute;left:8px;top:-2px;font-family:var(--wx-num);font-variant-numeric:tabular-nums;font-size:var(--fs-min);
  color:var(--w-here-ink);white-space:nowrap}
.wx-ends{display:flex;justify-content:space-between;font-family:var(--wx-num);font-variant-numeric:tabular-nums;font-size:var(--fs-min);color:var(--faint)}

/* ---- forecast: a block per period -------------------------------------- */
.wx-pops{display:flex;gap:4px;align-items:flex-end;height:120px;margin:20px 0 6px}
.wx-pop{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.wx-pop i{display:block;background:var(--w-wet);border-radius:2px 2px 0 0;min-height:3px}
.wx-pop.night i{background:var(--w-sat)}
.wx-pop b{font-family:var(--wx-num);font-variant-numeric:tabular-nums;font-size:var(--fs-min);color:var(--text);text-align:center;
  padding-bottom:4px;font-weight:600}
.wx-poplabs{display:flex;gap:4px}
.wx-poplabs span{flex:1 1 0;min-width:0;font-size:var(--fs-min);color:var(--faint);text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wx-per{border-top:1px solid var(--w-rule);padding:13px 0;display:grid;
  grid-template-columns:minmax(110px,160px) 1fr;gap:4px 20px}
.wx-per h4{margin:0;font-size:var(--fs-md);color:var(--text);font-weight:650}
.wx-per p{margin:0;color:var(--muted);font-size:var(--fs-base);line-height:var(--lh-copy);max-width:60ch}

/* ---- the pressure trace ------------------------------------------------ */
.wx-trace{width:100%;height:clamp(110px,14vw,170px);background:var(--bg);
  border:1px solid var(--w-rule);border-radius:var(--radius-md);display:block}

/* ---- readout rows ------------------------------------------------------ */
.wx-read{display:grid;grid-template-columns:1fr auto;gap:2px 18px;align-items:baseline;
  border-top:1px solid var(--w-rule);padding:10px 0}
.wx-read dt{color:var(--muted);font-size:var(--fs-min)}
.wx-read dd{margin:0;font-family:var(--wx-num);font-variant-numeric:tabular-nums;font-size:var(--fs-md);color:var(--text);text-align:right}
.wx-read dd em{font-style:normal;color:var(--faint);font-size:var(--fs-min)}

/* ---- the legend for the station model ---------------------------------- */
/* THE GLYPH LEGEND.
 *
 * It was written in --w-jade-ink-2 — the near-black ink made for the BRIGHT jade field — while the section it
 * actually sits in ("the ceiling") is a dark band. Near-black on #17191b is 1.06:1: the three labels were
 * invisible, and only turned up because a reader dragged a selection across them.
 *
 * The rule is the same one the rest of the page follows: dark bands take the page ink, and the jade ink is
 * applied by a .wx-band.jade override, never by default. The separator above it had the same fault — a jade
 * rule on a dark band — so it is paired the same way. */
.wx-key{display:flex;flex-wrap:wrap;gap:14px 26px;margin:20px 0 0;padding:14px 0 0;
  border-top:1px solid var(--w-rule)}
.wx-key div{display:flex;align-items:center;gap:9px;font-size:var(--fs-min);color:var(--muted)}
.wx-band.jade .wx-key{border-top-color:var(--w-rule-j)}
.wx-band.jade .wx-key div{color:var(--w-jade-ink-2)}

@media (max-width:640px){
  .wx-per{grid-template-columns:1fr}
  .wx-bar{grid-template-columns:1fr auto;grid-template-areas:"lab val" "trk trk"}
  .wx-bar .lab{grid-area:lab} .wx-val{grid-area:val} .wx-track{grid-area:trk}
}
@media (prefers-reduced-motion:no-preference){
  .wx-fill,.wx-line{transition:top .5s cubic-bezier(.4,0,.2,1),height .5s cubic-bezier(.4,0,.2,1)}
}


/* ---- the NOW strip: the first thing on the page ------------------------
   Time, temperature, precipitation, in that order, on the jade field so they read before anything else.
   Everything below this strip explains these three numbers; the strip itself explains nothing. */
.wx-now{padding:clamp(30px,4.5vw,60px) 0 clamp(26px,4vw,52px)}
.wx-nowgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,3vw,46px)}
.wx-nowcell{min-width:0}
.wx-big{font-family:var(--wx-num);font-variant-numeric:tabular-nums;font-weight:700;line-height:.92;letter-spacing:-.035em;
  font-size:clamp(32px,6.4vw,78px);color:var(--w-jade-ink);white-space:nowrap}
.wx-big small{font-size:.42em;font-weight:600;letter-spacing:0;margin-left:.08em}
.wx-nowlab{font-family:var(--font-mono);font-size:var(--fs-min);letter-spacing:var(--track-sm);
  color:var(--w-jade-ink-2);margin-top:10px}
.wx-nowsay{font-size:clamp(max(15px,var(--fs-min)),1.5vw,18px);line-height:var(--lh-text);
  color:var(--w-jade-ink-2);max-width:64ch;margin:clamp(20px,3vw,34px) 0 0;
  border-top:1px solid var(--w-rule-j);padding-top:16px}
.wx-nowsay b{color:var(--w-jade-ink);font-weight:650}
@media (max-width:720px){
  .wx-nowgrid{grid-template-columns:1fr 1fr}
  .wx-nowcell:first-child{grid-column:1 / -1}
}

/* the page mark, sitting above the three readouts on the jade field */
/* The GEOWeather wordmark. Named .wx-brand, NOT .wx-mark: that class was already taken, by the 2px vertical
 * tick the charts draw (position:absolute, top:0, bottom:0). Sharing it gave the wordmark absolute positioning
 * it never asked for, which lifted it out of the band and onto the navigation, and painted a stray full-height
 * rule down the page. Two different things must not share one class name. */
.wx-brand{font-family:var(--font-mono);font-size:var(--fs-min);letter-spacing:var(--track-md);
  text-transform:uppercase;color:var(--w-jade-ink-2);margin:0 0 clamp(14px,2.4vw,26px)}
.wx-brand b{color:var(--w-jade-ink);font-weight:700;letter-spacing:var(--track-sm)}

/* ===== THE ALERT HERO ==============================================================================
 *
 * Only on the page when the National Weather Service has something out for Kerr County, and then it is the
 * first thing above everything else — ahead of the clock and the temperature, because an alert outranks them.
 *
 * Text on the left, live radar on the right: the words say what was issued, the picture says where it is.
 * The whole band is one link to the radar page with this alert already open, so a reader who wants the detail
 * is one tap from it and never has to find the alert again on the other side.
 *
 * Two severities, two treatments. Minor and Moderate get an outline; Severe and Extreme get a filled rule and
 * a brighter ink. Nothing here blinks. */
.wx-alert{display:none;margin:0;border-bottom:1px solid var(--border)}
.wx-alert.on{display:block}
.wx-alert-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:0;
  max-width:1200px;margin:0 auto;text-decoration:none;color:inherit;align-items:stretch}
.wx-alert-text{padding:28px 24px 26px;display:flex;flex-direction:column;justify-content:center;gap:10px;
  border-left:4px solid var(--wxa-ink)}
.wx-alert-tag{display:flex;align-items:center;gap:9px;margin:0;
  font-family:var(--font-mono,ui-monospace,monospace);font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--wxa-ink)}
.wx-alert-tag i{width:9px;height:9px;border-radius:50%;background:var(--wxa-ink);flex:0 0 auto}
.wx-alert-h{margin:0;font-size:clamp(21px,3.1vw,33px);font-weight:800;line-height:1.18;
  letter-spacing:-.02em;color:var(--text,#f3f5f6);max-width:34ch}
.wx-alert-when{margin:0;font-size:15px;line-height:1.5;color:var(--muted,#9aa6ad);
  font-variant-numeric:tabular-nums}
.wx-alert-cta{margin:4px 0 0;font-family:var(--font-mono,ui-monospace,monospace);font-size:12.5px;
  font-weight:700;letter-spacing:.09em;color:var(--wxa-ink)}
.wx-alert-in:hover .wx-alert-cta{text-decoration:underline;text-underline-offset:4px}

/* Severity. The ink drives the rule, the tag, the dot and the call to action, so one variable retints the band. */
.wx-alert[data-sev="Minor"],.wx-alert[data-sev="Moderate"],.wx-alert[data-sev="Unknown"]{
  --wxa-ink:#ffc04d;background:linear-gradient(90deg,rgba(255,192,77,.10),rgba(255,192,77,.02) 60%)}
.wx-alert[data-sev="Severe"],.wx-alert[data-sev="Extreme"]{
  --wxa-ink:#ff8a68;background:linear-gradient(90deg,rgba(255,138,104,.14),rgba(255,138,104,.03) 60%)}

/* THE MINI RADAR.
 * A fixed-zoom slippy map built from positioned tiles — the same ESRI dark base and RainViewer frame the
 * /radar page uses, so the thumbnail and the full map are the same picture at two sizes. No map library:
 * this panel never pans or zooms, so all it needs is the tile arithmetic. */
.wx-alert-map{position:relative;overflow:hidden;min-height:190px;background:#0d1114;
  border-left:1px solid var(--border)}
.wx-alert-map img{position:absolute;width:256px;height:256px;max-width:none;
  image-rendering:auto;user-select:none;-webkit-user-drag:none}
.wx-alert-map .rv{opacity:.88}
.wx-alert-map .pin{position:absolute;width:13px;height:13px;margin:-7px 0 0 -7px;border-radius:50%;
  background:var(--wxa-ink);box-shadow:0 0 0 3px rgba(0,0,0,.55),0 0 14px var(--wxa-ink);z-index:4}
.wx-alert-map .lab{position:absolute;left:10px;bottom:9px;z-index:5;
  font-family:var(--font-mono,ui-monospace,monospace);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#cfd8dd;background:rgba(8,12,14,.74);padding:3px 8px;border-radius:4px}
.wx-alert-map .dead{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono,ui-monospace,monospace);font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:#6d7b83;text-align:center;padding:16px}

@media(max-width:820px){
  .wx-alert-in{grid-template-columns:1fr}
  .wx-alert-text{padding:22px 16px 20px}
  .wx-alert-map{min-height:168px;border-left:none;border-top:1px solid var(--border)}
}

/* The top bar's clock, temperature and alert chip are hidden here and only here. This page IS that readout at
 * full size — the alert as a hero, the time and temperature as the first thing under it — so repeating them
 * 60 pixels above would be the same three facts twice. This stylesheet loads on no other page. */
.topbar .live{display:none}