/* ============================================================================
   redesign:web-WS5-weather — public/weather.css
   Weather (Today · Region · Airport · Flight · Windows · Ask) and everything that
   draws it: public/weather-ui.js, public/wx_render.js, public/weather-products.js.
   Loaded AFTER styles.css + shell.css + kit.css, so it builds on the --c-* tokens
   (a Day / Dusk / Night switch recolours every rule below with no JS) and on the
   kit's .blueprint / .btn / .seg / .sev-* classes. The .wx-* rules that used to
   live at the bottom of styles.css moved here (restyled).

   CONTENTS
     0  flight-category palette  --wx-cat-*  (a SEPARATE palette from severity)
     1  page, header, controls, grid
     2  station header, category chip, "now" cells
     3  meteogram (bars + bands), wind-barb row
     4  runway-wind dial, density-altitude card, fit bar, watch card
     5  route cross-section
     6  launch-window strip + driver cells
     7  SVG renderers: ribbon, window grid, matrix, region grid
     8  provenance dialog content
     9  Today / Region / Ask
   RULES THE CSS ENCODES
     - tokens only: the ONLY hex literals are the --wx-cat-* definitions in section 0
       (scripts/weather_ui_test.js asserts that, plus WCAG for every pair)
     - radius 0 on every blueprint object; 1px hairline; nothing animates, nothing flashes
     - caution as TEXT is --c-caution, never --c-caution-fill (2.2:1 at Day)
     - web type floor: 11px for UPPERCASE tracked labels/chips only, 12px for everything else
     - unknown / no data is a hatch or a dashed outline in ink-2 — never a colour, never green
   ============================================================================ */

/* ---- 0. Flight categories. VFR green / MVFR blue / IFR red / LIFR magenta: the aviation
   chart convention, and deliberately NOT the six severity colours (a VFR airport is not
   "satisfied", and IFR is not "blocking"). Values are literals so the two palettes can drift
   apart; weather_ui_test asserts text >= 4.5:1 on bg + surface and on-colour >= 4.5:1 on the fill,
   in Day, Dusk and Night. Must stay token-for-token identical across the system-dark block and
   the explicit Night block. */
:root,
:root[data-theme="day"],
:root[data-theme="light"] {
  --wx-cat-vfr: #357647;  --wx-cat-vfr-on: #f7f7f8;
  --wx-cat-mvfr: #416180; --wx-cat-mvfr-on: #f7f7f8;
  --wx-cat-ifr: #b23a2e;  --wx-cat-ifr-on: #f7f7f8;
  --wx-cat-lifr: #8e2f8f; --wx-cat-lifr-on: #f7f7f8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --wx-cat-vfr: #6fc98a;  --wx-cat-vfr-on: #121820;
    --wx-cat-mvfr: #94bce3; --wx-cat-mvfr-on: #121820;
    --wx-cat-ifr: #ec8276;  --wx-cat-ifr-on: #121820;
    --wx-cat-lifr: #dc96dc; --wx-cat-lifr-on: #121820;
  }
}
:root[data-theme="dusk"] {
  --wx-cat-vfr: #64b97d;  --wx-cat-vfr-on: #121820;
  --wx-cat-mvfr: #83a9ce; --wx-cat-mvfr-on: #121820;
  --wx-cat-ifr: #e97c6f;  --wx-cat-ifr-on: #121820;
  --wx-cat-lifr: #e08fd0; --wx-cat-lifr-on: #121820;
}
:root[data-theme="night"],
:root[data-theme="dark"] {
  --wx-cat-vfr: #6fc98a;  --wx-cat-vfr-on: #121820;
  --wx-cat-mvfr: #94bce3; --wx-cat-mvfr-on: #121820;
  --wx-cat-ifr: #ec8276;  --wx-cat-ifr-on: #121820;
  --wx-cat-lifr: #dc96dc; --wx-cat-lifr-on: #121820;
}
/* Put a cat-* class on any element: --cat (fill / edge / text on the page ground) and --cat-on (text ON the fill). */
.cat-VFR  { --cat: var(--wx-cat-vfr);  --cat-on: var(--wx-cat-vfr-on); }
.cat-MVFR { --cat: var(--wx-cat-mvfr); --cat-on: var(--wx-cat-mvfr-on); }
.cat-IFR  { --cat: var(--wx-cat-ifr);  --cat-on: var(--wx-cat-ifr-on); }
.cat-LIFR { --cat: var(--wx-cat-lifr); --cat-on: var(--wx-cat-lifr-on); }
/* neutral tones for hatch patterns (a pattern line takes its colour from --sev / --cat) */
.tone-ink2 { --sev: var(--c-ink-2); }
.tone-on-blocking { --sev: var(--c-on-blocking); }
.tone-on-caution { --sev: var(--c-on-caution); }
.tone-on-advisory { --sev: var(--c-on-advisory); }
.tone-on-satisfied { --sev: var(--c-on-satisfied); }
.tone-on-notAnswered, .tone-on-notTracked { --sev: var(--c-ink-2); }
/* the same chip the rest of the app uses for a flight category stays square (kit .fc) */
.fc { border-radius: 0; }

/* ---- 1. Page, header, controls, grid */
.wx-page { container: wx / inline-size; max-width: var(--content-max); }
.wx-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 16px; flex-wrap: wrap; }
.wx-head-main { min-width: 0; flex: 1 1 360px; }
.wx-head .hl { margin-bottom: 0; }
.wx-head .seg-wrap { margin: 0; flex: 0 1 auto; }
.wx-body { margin-top: 18px; }
.wx-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.wx-controls .field { margin: 0; }
.wx-controls .wx-ident-in { max-width: 130px; text-transform: uppercase; }
.wx-controls .wx-opt { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wx-controls .wx-opt .seg-wrap { margin: 0; padding: 0; }
.wx-opt-lab { font: 600 11px/1 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-2); }
.wx-card { padding: 14px; }
.wx-card + .wx-card { margin-top: 18px; }
.wx-grid2 { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); margin-top: 18px; align-items: start; }
@container wx (min-width: 920px) { .wx-grid2 { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); } }
.wx-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.wx-stack > * + * { margin-top: 18px; }
.wx-h { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; margin: 0 0 6px; }
.wx-h h6 { margin: 0; font: 600 13px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-2); }
.wx-note { font-size: 12px; color: var(--c-ink-3); }
.wx-p { font-size: 13px; color: var(--c-ink-2); margin: 4px 0 0; }
.wx-p b { color: var(--c-ink); }
.wx-attribution { margin: 14px 0 0; font-size: 12px; color: var(--c-ink-3); }
.wx-sources { margin-top: 14px; }
.wx-sources .prov-footer { margin-top: 0; }
.wx-linkbtn {
  position: relative; appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--c-accent-ink);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.wx-linkbtn::before { content: ""; position: absolute; inset: -12px -6px; }
.wx-raw { white-space: pre-wrap; overflow-wrap: anywhere; margin: 10px 0 0; padding: 8px 10px; font: 13px/1.4 var(--font-body); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 0; }
.wx-pre { white-space: pre-wrap; margin: 0; font-size: 12px; }
.wx-scroll { overflow-x: auto; overflow-y: hidden; max-width: 100%; padding-bottom: 2px; scrollbar-width: thin; }
.wx-clickable { cursor: pointer; }
.wx-clickable:hover { filter: brightness(1.18); }
@media (max-width: 767.98px) { .wx-controls .wx-opt { margin-left: 0; } }

/* ---- 2. Station header, category chip, "now" cells */
.wx-stn { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.wx-stn-line { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.wx-ident { font: 600 34px/1 var(--font-heading); letter-spacing: .01em; color: var(--c-ink); }
.wx-stn-name { font-size: 13px; color: var(--c-ink-2); }
.wx-obs { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; margin-top: 4px; font-size: 13px; color: var(--c-ink-2); }
.wx-obs .wx-age { color: var(--c-ink-2); }
.wx-catchip {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; box-sizing: border-box; margin: 0;
  font: 600 16px/1 var(--font-heading); letter-spacing: .1em; text-transform: uppercase;
  color: var(--cat-on, var(--c-ink)); background: var(--cat, var(--c-ink-3)); border: 0; border-radius: 0;
}
.wx-catchip::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: currentColor; } /* the category dot (a glyph, like the shell's status dots — the chip itself stays square) */
button.wx-catchip { cursor: pointer; }
button.wx-catchip::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--kit-hit); transform: translateY(-50%); }
.wx-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 12px; margin-top: 14px; }
.wx-cell {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; margin: 0; padding: 6px 0 0; text-align: left;
  font: inherit; color: inherit; background: none; border: 0; border-top: 2px solid var(--cat, var(--sev, var(--c-line-control))); border-radius: 0;
}
button.wx-cell.tap { cursor: pointer; }
button.wx-cell.tap:hover { background: var(--c-hover-row); }
.wx-cell-k { font: 600 11px/1.2 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-2); }
.wx-cell-v { font: 600 24px/1.1 var(--font-heading); color: var(--c-ink); overflow-wrap: anywhere; }
.wx-cell-sub { font-size: 12px; line-height: 1.3; color: var(--c-ink-2); overflow-wrap: anywhere; }
.wx-cells.lg { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.wx-cells.lg .wx-cell-v { font-size: 18px; }
.wx-cells.lg .wx-cell-sub { font-size: 12px; }
.wx-drivers { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.wx-drv { min-width: 0; }
.wx-drv-v { font-size: 13px; line-height: 1.4; color: var(--c-ink); overflow-wrap: anywhere; }

/* ---- 3. Meteogram (bars + bands) and the wind-barb row. --gut is the left label column shared by
   the plot, the hour row and the wind row so every hour lines up. */
.wx-mg { min-width: 560px; --gut: 56px; }
.wx-gx { display: grid; grid-template-columns: var(--gut) minmax(0, 1fr); }
.wx-gx-l { font: 600 11px/1.25 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-2); display: flex; align-items: center; padding-right: 6px; }
.wx-mg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 16px; flex-wrap: wrap; margin-top: 18px; }
.wx-mg-head h6 { margin: 0; font: 600 13px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-2); }
.wx-mg-head .wx-opt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wx-mg-head .seg-wrap { margin: 0; padding: 0; }
.wx-mg-yax { position: relative; height: 190px; }
.wx-mg-yax span { position: absolute; right: 6px; transform: translateY(50%); font: 500 12px/1 var(--font-heading); color: var(--c-ink-3); }
.wx-mg-plot { position: relative; height: 190px; border-left: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.wx-mg-ref { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--c-line); pointer-events: none; }
.wx-mg-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.wx-mg-col { position: relative; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer; }
.wx-mg-col:hover { background: var(--c-hover-row); }
.wx-mg-col:focus-visible { outline-offset: -2px; }
.wx-mg-ceil { position: absolute; left: 2px; right: 2px; bottom: 0; height: var(--h, 0); background: var(--cat, var(--c-ink-3)); opacity: .85; }
.wx-mg-ceil.unof { background: transparent; border: 2px dashed var(--cat); border-bottom: 0; opacity: 1; box-sizing: border-box; }
.wx-mg-ceil.none { height: 150px; background: color-mix(in srgb, var(--c-ink-3) 12%, transparent); border: 1px dashed var(--c-ink-3); border-bottom: 0; opacity: 1; box-sizing: border-box; }
.wx-mg-nodata {
  position: absolute; left: 2px; right: 2px; bottom: 0; height: 150px; box-sizing: border-box; border: 1px dashed var(--c-unknown);
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--c-unknown) 28%, transparent) 0 3px, transparent 3px 7px);
}
.wx-mg-cat { position: absolute; left: 2px; right: 2px; top: 0; height: 7px; background: var(--cat, var(--c-ink-3)); }
.wx-mg-cat.unof { background: repeating-linear-gradient(90deg, var(--cat) 0 4px, transparent 4px 7px); }
.wx-mg-cat.derived { opacity: .7; }
.wx-mg-cat.gap { background: repeating-linear-gradient(45deg, var(--c-unknown) 0 2px, transparent 2px 5px); opacity: .6; }
.wx-mg-dis { position: absolute; left: 50%; top: 11px; width: 6px; height: 6px; margin-left: -3px; border: 1.5px solid var(--c-caution); transform: rotate(45deg); box-sizing: border-box; }
.wx-mg-vis { position: absolute; left: 2px; right: 2px; bottom: var(--v, 0); height: 2px; background: var(--c-ink); }
.wx-mg-vis.unof { background: repeating-linear-gradient(90deg, var(--c-ink) 0 4px, transparent 4px 7px); }
.wx-mg-etd { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--c-accent); pointer-events: none; }
.wx-mg-etdlbl { position: absolute; top: 14px; transform: translateX(6px); font: 600 11px/1 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent-ink); pointer-events: none; white-space: nowrap; }
.wx-mg-hours { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin-top: 6px; }
.wx-mg-hours span { text-align: center; font: 500 12px/1 var(--font-heading); color: var(--c-ink-3); white-space: nowrap; }
.wx-mg-hours span.etd { color: var(--c-accent-ink); font-weight: 600; }
.wx-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: var(--c-ink-2); }
.wx-legend > span { display: inline-flex; align-items: center; }
.wx-sw { display: inline-block; width: 10px; height: 10px; margin-right: 5px; box-sizing: border-box; background: var(--cat, var(--sev, transparent)); }
.wx-sw.k-gated { background: repeating-linear-gradient(45deg, var(--c-blocking) 0 2px, color-mix(in srgb, var(--c-blocking) 35%, var(--c-bg)) 2px 4px); }
.wx-sw.k-lowconf { border: 1.5px dashed var(--c-ink-2); background: none; }
.wx-sw.k-nodata { border: 1px dashed var(--c-unknown); background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--c-unknown) 35%, transparent) 0 2px, transparent 2px 4px); }
.wx-sw.dashed { border: 2px dashed var(--c-ink-2); background: none; }
.wx-sw.line { height: 2px; background: var(--c-ink); }
.wx-sw.dot { border: 1.5px solid var(--c-caution); transform: rotate(45deg); width: 7px; height: 7px; background: none; }
/* bands variant */
.wx-bd-grid { display: grid; grid-template-columns: var(--gut) minmax(0, 1fr); gap: 4px 0; align-items: stretch; }
.wx-bd-lab { font: 600 11px/1.2 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-2); display: flex; align-items: center; padding-right: 6px; }
.wx-bd-row { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; }
.wx-bd-row.hrs span { text-align: center; font: 500 12px/16px var(--font-heading); color: var(--c-ink-3); height: 16px; }
.wx-bd-row.hrs span.etd { color: var(--c-accent-ink); font-weight: 600; border-left: 2px solid var(--c-accent); }
.wx-bd { display: grid; place-items: center; min-width: 0; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; cursor: pointer; font: 600 14px/1 var(--font-heading); box-sizing: border-box; background: var(--cat, transparent); color: var(--cat-on, var(--c-ink)); }
.wx-bd.unof { background: transparent; color: var(--c-ink); border: 2px dashed var(--cat); }
.wx-bd.none { background: transparent; color: var(--c-ink-2); border: 1px dashed var(--c-ink-3); }
.wx-bd.gap { color: var(--c-ink-2); border: 1px dashed var(--c-unknown); background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--c-unknown) 28%, transparent) 0 3px, transparent 3px 7px); }
.wx-bd-row.wind .wx-bd { height: 38px; background: none; color: var(--c-ink); border: 1px solid var(--c-line-2); font-size: 13px; align-content: center; }
.wx-bd-row.wind .wx-bd.gap { border: 1px dashed var(--c-unknown); background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--c-unknown) 28%, transparent) 0 3px, transparent 3px 7px); }
.wx-bd-row.wind .wx-bd.unof { border: 1px dashed var(--c-ink-2); }
.wx-bd small { display: block; font: 500 12px/1 var(--font-heading); color: var(--c-ink-2); margin-top: 1px; }
.wx-bd:hover { filter: brightness(1.12); }
/* wind-barb row */
.wx-wind { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--c-line-2); }
.wx-wr-row { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.wx-wr { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; margin: 0; padding: 2px 0; border: 0; border-radius: 0; background: none; color: var(--c-ink); font: inherit; cursor: pointer; }
.wx-wr:hover { background: var(--c-hover-row); }
.wx-wr-v { font: 600 12px/1 var(--font-heading); }
.wx-wr-g { font: 500 12px/1 var(--font-heading); color: var(--c-ink-2); }
.wx-wr-gap { height: 26px; line-height: 26px; color: var(--c-unknown); font-size: 12px; }
.wx-barb { display: block; width: 26px; height: 26px; max-width: 100%; overflow: visible; }
.wx-barb.unof { opacity: .6; }
.wx-barb-line { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wx-barb-solid { fill: currentColor; stroke: currentColor; stroke-width: 1; stroke-linejoin: round; }
.wx-barb-g { pointer-events: none; }

/* ---- 4. Runway-wind dial, density-altitude card, fit bar, watch card */
.wx-rwy { display: flex; gap: 14px 16px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.wx-dial { flex: 0 0 auto; width: 128px; height: 128px; display: block; }
.d-ring, .d-ring2 { fill: none; stroke: var(--c-ink-3); stroke-width: 1; }
.d-ring2 { stroke-dasharray: 2 3; }
.d-tick { stroke: var(--c-ink-3); stroke-width: 1; }
.d-n { fill: var(--c-ink-2); font: 600 12px var(--font-heading); letter-spacing: .1em; }
.d-rwy { fill: var(--c-map); stroke: var(--c-ink-3); stroke-width: 1; }
.d-rwy.best { stroke: var(--c-ink); stroke-width: 1.4; }
.d-lbl { fill: var(--c-ink); font: 600 12px var(--font-heading); }
.d-wind { fill: none; stroke: var(--c-accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.wx-rbars { flex: 1 1 170px; display: grid; gap: 8px; min-width: 0; }
.wx-rbar { display: grid; grid-template-columns: 44px minmax(40px, 1fr); gap: 2px 8px; align-items: center; }
.wx-rbar b { font: 600 15px/1 var(--font-heading); }
.wx-rbar > span { grid-column: 1 / -1; font-size: 12px; line-height: 1.3; color: var(--c-ink-2); }
.wx-rbar.sev-blocking > span { color: var(--c-ink); }
.wx-track { height: 6px; background: var(--c-line-2); position: relative; }
.wx-track > i { position: absolute; inset: 0 auto 0 0; width: var(--w, 0); background: var(--sev, var(--c-ink-3)); }
.wx-rbar.nodata .wx-track { background: repeating-linear-gradient(90deg, var(--c-line) 0 4px, transparent 4px 7px); }
.wx-rwy-sel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wx-rwy-sel select { width: auto; max-width: 220px; min-height: 34px; font-size: 13px; }
.wx-rwy-sel label { margin: 0; }
.wx-kv2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.wx-kv2 .k { font: 600 11px/1.2 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-2); }
.wx-big { font: 600 26px/1.1 var(--font-heading); color: var(--c-ink); }
.wx-big small { font: 400 13px var(--font-body); color: var(--c-ink-2); margin-left: 3px; }
.wx-fit { position: relative; height: 10px; margin-top: 12px; background: var(--c-line-2); }
.wx-fit > i { position: absolute; inset: 0 auto 0 0; width: var(--w, 0); background: var(--sev, var(--c-ink-3)); }
.wx-fit > b { position: absolute; top: -4px; bottom: -4px; left: var(--w, 0); width: 2px; background: var(--c-ink); }
.wx-fit-cap { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; font-size: 12px; color: var(--c-ink-2); }
.wx-perf-tbl { margin-top: 8px; }
.wx-watch .wx-watch-row { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin-top: 10px; }
.wx-watch-toggle { margin: 0; }

/* ---- 5. Route cross-section */
.wx-route-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 14px; flex-wrap: wrap; }
.wx-route-title { font: 600 28px/1.1 var(--font-heading); color: var(--c-ink); }
.wx-route-sub { font-size: 13px; color: var(--c-ink-2); margin-top: 4px; }
.wx-xsec-scroll { overflow-x: auto; overflow-y: hidden; max-width: 100%; margin-top: 6px; scrollbar-width: thin; }
.wx-xsec-svg { display: block; width: 100%; min-width: 620px; height: auto; }
.xs-grid { stroke: var(--c-line-2); stroke-width: 1; }
.xs-axis { stroke: var(--c-line); stroke-width: 1; }
.xs-tick { stroke: var(--c-ink-3); stroke-width: 1; }
.xs-t { font: 600 12px var(--font-heading); letter-spacing: .04em; fill: var(--c-ink-2); }
.xs-t3 { font: 500 12px var(--font-heading); fill: var(--c-ink-3); }
.xs-t-plan { fill: var(--c-accent-ink); letter-spacing: .08em; }
.xs-t-frz { fill: var(--c-blocking); letter-spacing: .08em; }
.xs-t-wpt { fill: var(--c-ink); }
.xs-terrain { fill: color-mix(in srgb, var(--c-ink-3) 35%, transparent); }
.xs-ground { fill: none; stroke: var(--c-ink-2); stroke-width: 1.5; }
.xs-obst { fill: none; stroke: var(--c-ink-2); stroke-width: 1.2; stroke-dasharray: 4 3; }
.xs-obst-dot { fill: var(--c-ink-2); }
.xs-cloud { fill: color-mix(in srgb, var(--cat, var(--c-ink-3)) 32%, transparent); }
.xs-cloud.guid { fill: color-mix(in srgb, var(--cat, var(--c-ink-3)) 14%, transparent); }
.xs-cbase { stroke: var(--cat, var(--c-ink-3)); stroke-width: 2.4; }
.xs-cbase.guid { stroke-dasharray: 6 4; stroke-width: 1.8; }
.xs-ga { fill: color-mix(in srgb, var(--c-caution) 18%, transparent); stroke: var(--c-caution); stroke-width: 1; stroke-dasharray: 4 3; }
.xs-frz { fill: none; stroke: var(--c-blocking); stroke-width: 1.4; stroke-dasharray: 6 4; }
.xs-plan { fill: none; stroke: var(--c-accent); stroke-width: 2.6; stroke-linejoin: round; }
.xs-plan-dot { fill: var(--c-bg); stroke: var(--c-accent); stroke-width: 2; }
.xs-pirep { fill: var(--c-advisory); stroke: var(--c-ink); stroke-width: 1; }

/* ---- 6. Launch-window strip */
.wx-stripwrap { position: relative; min-width: calc(var(--n) * 14px); padding-bottom: 56px; margin-top: 14px; }
.wx-strip { display: flex; align-items: flex-end; gap: 2px; height: 120px; border-bottom: 1px solid var(--c-line); }
.wx-sb {
  position: relative; flex: 1 1 0; min-width: 0; height: var(--h, 10%); margin: 0; padding: 0; border: 0; border-radius: 0; cursor: pointer;
  background: var(--sev, var(--c-ink-3)); opacity: .7; box-sizing: border-box;
}
.wx-sb.inbest { opacity: 1; }
.wx-sb:hover { outline: 1px solid var(--c-ink-2); }
.wx-sb.k-lowconf { background: transparent; border: 1.5px dashed var(--c-ink-2); border-bottom: 0; opacity: 1; }
.wx-sb.k-lowconf.inbest { border-color: var(--c-ink); }
.wx-sb.k-nodata { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--c-unknown) 35%, transparent) 0 3px, transparent 3px 7px); border: 1px dashed var(--c-unknown); opacity: 1; }
.wx-sb.k-gated { background: repeating-linear-gradient(45deg, var(--c-blocking) 0 3px, color-mix(in srgb, var(--c-blocking) 35%, var(--c-bg)) 3px 6px); opacity: .92; }
.wx-sb.k-gated .g { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); line-height: 0; padding: 1px; color: var(--c-on-blocking); background: var(--c-blocking); }
.wx-strip-axis { position: absolute; left: 0; right: 0; top: 126px; height: 18px; }
.wx-strip-axis span { position: absolute; font: 500 12px/1 var(--font-heading); letter-spacing: .04em; color: var(--c-ink-3); white-space: nowrap; }
.wx-strip-best { position: absolute; top: 148px; height: 22px; border-top: 2px solid var(--c-accent); box-sizing: border-box; }
.wx-strip-best span { display: block; padding-top: 3px; font: 600 11px/1 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent-ink); white-space: nowrap; }
.wx-route-head .tag-outline { height: 30px; }

/* ---- 7. SVG renderers (ribbon, window grid, matrix, region grid) */
.wx-ribbon-scroll, .wx-grid-scroll { overflow-x: auto; overflow-y: hidden; border: 1px solid var(--c-line); border-radius: 0; background: var(--c-surface); padding: 4px 0; scrollbar-width: thin; }
.wx-ribbon-svg, .wx-grid-svg { display: block; color: var(--c-ink); }
.wx-ribbon-svg text, .wx-grid-svg text { font-family: var(--font-heading); user-select: none; }
.wx-ribbon-legend { margin-top: 8px; font-size: 12px; color: var(--c-ink-2); }
.wx-r-grid, .wx-g-col { stroke: var(--c-line); stroke-width: 1; stroke-opacity: .5; }
.wx-r-lane-rule { stroke: var(--c-line); stroke-width: 1; stroke-opacity: .6; }
.wx-r-tick { stroke: var(--c-line); stroke-width: 1; stroke-opacity: .5; }
.wx-r-axis { fill: var(--c-ink-2); }
.wx-r-rowlbl { fill: var(--c-ink-2); font-weight: 600; }
.wx-r-rowlbl.strong { fill: var(--c-ink); font-weight: 700; }
.wx-r-val { fill: var(--c-ink); font-weight: 600; }
.wx-r-nodata, .wx-r-gap-dot { fill: var(--c-unknown); }
.wx-r-gap { stroke: var(--c-unknown); stroke-width: 2; }
.wx-r-now { stroke: var(--c-accent); stroke-width: 1.5; }
.wx-r-nowlbl, .wx-best-lbl { fill: var(--c-accent-ink); font-weight: 600; letter-spacing: .08em; }
.wx-best-bar { fill: var(--c-accent); fill-opacity: .28; }
.fc-cell { fill: var(--cat, var(--c-ink-3)); }
.fc-cell.unof { fill: none; stroke: var(--cat); stroke-width: 1.5; stroke-dasharray: 3 2; }
.fc-cell.gap { stroke: var(--c-unknown); stroke-width: .75; }
.wx-env-band { fill: var(--c-accent); fill-opacity: .16; }
.wx-env-line { fill: none; stroke: var(--c-accent); stroke-width: 1.75; }
.wx-disagree-dot { fill: var(--c-caution); }
.wx-pb-precip { fill: var(--c-advisory); }
.wx-pb-conv { fill: var(--c-caution); }
.wx-pb-none { fill: var(--c-unknown); fill-opacity: .5; }
.hatch-line { stroke: var(--sev, var(--cat, var(--c-ink-2))); }
.hatch-gap-bg { fill: var(--c-unknown); fill-opacity: .18; }
.hatch-gap-line { stroke: var(--c-unknown); stroke-width: 2; stroke-opacity: .6; }
/* six-state grid cell: filled = solid + on-colour glyph; hollow (not tracked) = dashed; plain (no data) = grey hatch */
.wx-gc.filled { fill: var(--sev); fill-opacity: .9; }
.wx-gc.hollow { fill: none; stroke: var(--sev); stroke-width: 1.5; stroke-dasharray: 3 2; }
.wx-gc.plain { stroke: var(--sev); stroke-width: .75; }
.wx-gc-glyph.filled { color: var(--sev-on); }
.wx-gc-glyph.hollow, .wx-gc-glyph.plain { color: var(--sev-text); }
.wx-gc-glyph.hollow { color: var(--c-nottracked); }
.wx-sc { fill: var(--c-surface); stroke: var(--c-line); stroke-width: 1; }
.wx-sc-glyph { color: var(--sev-text); }
.wx-flight-retime { margin-top: 10px; }
.wx-flight-retime input[type="range"] { accent-color: var(--c-accent-solid); }
.wx-flight-retime .row { display: flex; }

/* ---- 8. Provenance dialog content (inside the kit's .kit-dialog) */
.wx-pp-scroll { overflow-x: auto; margin-top: 10px; }
.wx-pp-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.wx-pp-table th, .wx-pp-table td { padding: 5px 8px; border-bottom: 1px solid var(--c-line-2); text-align: left; white-space: nowrap; }
.wx-pp-table .wx-pp-ep { white-space: normal; overflow-wrap: anywhere; color: var(--c-ink-2); font-size: 12px; }
.wx-pp-note { margin-top: 8px; padding: 8px 10px; font-size: 13px; background: var(--c-surface); border-left: 3px solid var(--c-line-control); }
.wx-pp-gap { border-left-color: var(--c-unknown); border-left-style: dashed; }
.wx-pp-unofficial { border-left-color: var(--c-advisory); }
.wx-pp-disagree { border-left-color: var(--c-caution); }
.wx-pp-conditional { border-left-color: var(--c-caution); }
.wx-pp-el { margin: 0 0 8px; border: 1px solid var(--c-line); border-radius: 0; padding: 0 10px 10px; }
.wx-pp-el > summary { cursor: pointer; padding: 8px 0; list-style-position: inside; }
.wx-pp-el > summary .sub { margin-left: 6px; }
/* legacy fallback box (only when kit.js did not load) */
.wx-modal { position: fixed; inset: 0; z-index: 1000; background: var(--c-backdrop); display: flex; align-items: flex-start; justify-content: center; padding: 44px 16px; overflow: auto; }
.wx-modal-box { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 0; max-width: 640px; width: 100%; padding: 18px 20px; box-shadow: var(--shadow-lg); }
.wx-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.wx-modal-head h3 { margin: 0; }

/* ---- 9. Today / Region / Ask */
.wx-hazard-item { padding: 8px 0; border-bottom: 1px solid var(--c-line-2); display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.wx-hazard-item:last-child { border-bottom: none; }
.wx-scrubber-row { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; flex-wrap: wrap; }
.wx-scrubber-row input[type=range] { flex: 1; min-width: 160px; accent-color: var(--c-accent-solid); }
.wx-national-map { position: relative; }
.wx-forecast-banner, .wx-live-banner {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 5px 10px; box-sizing: border-box;
  font: 600 12px/1.2 var(--font-heading); letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--c-line-control); border-radius: 0;
}
.wx-forecast-banner { background: transparent; color: var(--c-caution); border-color: var(--c-caution); border-left-width: 3px; }
.wx-live-banner { background: var(--c-accent-tint); color: var(--c-accent-ink); border-color: var(--c-accent); }
.wx-region-mode-row, .wx-ask-mode-row { margin-bottom: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.wx-afd-text { white-space: pre-wrap; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 0; padding: 10px 12px; font: 13px/1.45 var(--font-body); margin-top: 6px; max-height: 320px; overflow-y: auto; }
.wx-camera-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 8px; }
.wx-camera-item img { width: 100%; border-radius: 0; display: block; border: 1px solid var(--c-line); }
.wx-camera-item .sub { margin-top: 4px; }
.wx-ask-fallback-banner { display: flex; gap: 8px; align-items: flex-start; background: transparent; border: 1px solid var(--c-caution); border-left-width: 3px; color: var(--c-caution); border-radius: 0; padding: 10px 12px; margin-bottom: 10px; font-size: 13px; line-height: 1.45; }
.wx-ask-fallback-banner b { color: inherit; }
/* a verified narrative sits in the plain card; only a structured fallback gets the dashed/tinted treatment, so the two never look alike */
.wx-ask-response-fallback { border: 1px dashed var(--c-caution); border-radius: 0; padding: 10px 12px; background: color-mix(in srgb, var(--c-caution-fill) 6%, transparent); }
.wx-ask-prose h4.wx-ask-heading { margin: 14px 0 4px; font: 600 13px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-2); }
.wx-ask-prose h4.wx-ask-heading:first-child { margin-top: 0; }
.wx-ask-prose p.wx-ask-p { margin: 4px 0; line-height: 1.55; }
.wx-ask-prose ul.wx-ask-list { margin: 4px 0 4px 18px; padding: 0; line-height: 1.55; }
.wx-ask-response { min-width: 0; }
.wx-ask-turn { margin-top: 10px; }
.wx-ask-q { margin-bottom: 8px; }
.wx-ask-a { margin-top: 2px; }
.wx-ask-disclaimer { margin-top: 10px; font-style: italic; }
#wx_rwy_table table, #wx_da_perf_table table { width: 100%; }