/* HailIntel design system v2 — "Ops Console". Single source of truth for
   tokens/base/components; every page loads this one file. The @layer ORDER
   is declared inline in each page's <head> (`@layer vendor, tokens, base,
   components, page;`) BEFORE this file, so this file only fills layers,
   never re-orders them.
   CACHE CONTRACT: /assets/* and /vendor/* are served immutable — bump the
   `?v=` query on the <link>/<script> in every page when you edit this file.
   For `!important` inside layers the order INVERTS (earlier layers win) —
   never add `!important` here outside print/reduced-motion/forced-colors.
   TOKEN LOCK: --sev-*, --band-*, --sev-proj30/60, --hazard-*, --sev-warn are
   BYTE-IDENTICAL to v1 and gate test/contrast.test.ts — change only with
   that test open. Accent (volt) never colors data, ever. */

/* ================================ TOKENS ================================ */
@layer tokens {
  :root {
    /* ---- primitives: never referenced by components directly ---- */
    --slate-950:#0a0e13; --slate-900:#10151c; --slate-850:#161d26; --slate-700:#232c38;
    --slate-500:#5f6f85; --slate-300:#8b98a5; --slate-100:#e6ebf0;
    --volt-400:#ccff00; --volt-900:#2a3300;

    /* ---- semantic: dark (default) surfaces + ink + the one accent ---- */
    --color-bg:var(--slate-950); --color-surface:var(--slate-900); --color-surface-2:var(--slate-850);
    --color-border:var(--slate-700); --color-border-strong:var(--slate-500);
    --color-ink:var(--slate-100); --color-ink-muted:var(--slate-300);
    --color-accent:var(--volt-400); --color-accent-ink:#0a0e13;
    --color-danger:#ff6b6b; --color-ok:#51cf66;
    /* danger bg is a fixed mid-tone red in both themes; only a near-black
       ink clears 4.5:1 against it either way — not the same token as
       accent-ink, which is tuned to the (theme-varying) accent instead */
    --color-danger-ink:var(--slate-950);
    /* badge text-on-fill inks: literal values test/contrast.test.ts hardcodes
       for badge-Extreme (#fff on sev-3) / badge-High (#111 on sev-2) */
    --badge-ink-light:#fff; --badge-ink-dark:#111;
    /* print is always literal black-on-white paper, independent of theme —
       the one place components may reference non-token color by design */
    --print-bg:#fff; --print-ink:#000; --print-ink-muted:#444;
    /* back-compat aliases: not-yet-migrated page <style> blocks and inline
       styles still read --color-brand/-ink; test/contrast.test.ts asserts
       these exact names too — keep both live, never drop. */
    --color-brand:var(--color-accent); --color-brand-ink:var(--color-accent-ink);
    /* not part of the v2 three-tier set — kept only because .badge-Medium/
       .warn and test/contrast.test.ts still read --color-caution(-ink). */
    --color-caution:#f2c200; --color-caution-ink:#111;

    /* ---- data severity: UNCHANGED byte-for-byte from v1. Locked by
       test/contrast.test.ts. Accent NEVER colors data. ---- */
    --sev-1:#ffe066; --sev-2:#f0810f; --sev-3:#c92a2a;
    --sev-mesh:#845ef7;
    /* graduated hail-path swath ramp (broadcast style, small→large stone):
       gray → cyan → blue → indigo → violet → magenta → red. Keys match the
       nine MESH band_in values produced by the GDAL lanes (0.75…4.0). Map
       fills only (non-text); hue ordering carries the size story. */
    --band-075:#9aa4ad; --band-100:#22b8cf; --band-125:#339af0;
    --band-150:#3b5bdb; --band-175:#5f3dc4; --band-200:#862e9c;
    --band-250:#c2255c; --band-300:#f0399d; --band-400:#d90429;
    --sev-proj30:#12b886; --sev-proj60:#1c7ed6;
    /* hazard warnings: SVR dashed red, TOR solid magenta — line STYLE (not
       hue alone) separates them, and neither reuses the accent color. */
    --hazard-svr:#e03131; --hazard-tor:#d6336c;
    --sev-warn:var(--hazard-svr); /* legacy alias */
    --hazard-outline:#111; /* stroke around data points, theme-tuned */

    /* ---- scales ---- */
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
    --fs-2xs:.6875rem; --fs-xs:.75rem; --fs-sm:.8125rem; --fs-md:.9375rem;
    --fs-lg:1.125rem; --fs-xl:1.375rem; --fs-2xl:1.75rem; --fs-3xl:2.125rem;
    /* fluid display type for hero numerals (path-card headline, radar
       reading, kpi/report values) — one clamp per tier, ratio-derived */
    --display-1:clamp(1.75rem, 1.55rem + .9vw, 2.25rem);
    --display-2:clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
    --display-3:clamp(2.75rem, 1.9rem + 4vw, 5rem);
    /* legacy aliases: pre-v2 rules read --space-*/--text-* — repoint them at
       the new scale so nothing silently reflows before markup migrates */
    --space-1:var(--sp-1); --space-2:var(--sp-2); --space-3:var(--sp-3);
    --space-4:var(--sp-4); --space-5:var(--sp-5); --space-6:var(--sp-6); --space-7:var(--sp-7);
    --text-xs:var(--fs-xs); --text-sm:var(--fs-sm); --text-md:var(--fs-md);
    --text-lg:var(--fs-lg); --text-xl:var(--fs-xl); --text-2xl:var(--fs-2xl);

    /* radius LOCK: only two radii + a pill exist anywhere in the system.
       10/12/14/22px are banned — everything below snaps to these three. */
    --r-1:4px; --r-2:8px; --r-full:999px;
    --radius-xs:var(--r-1); --radius-sm:var(--r-1); --radius-md:var(--r-2); --radius-full:var(--r-full);

    /* z scale — no literal z-index anywhere outside this list (vendor
       fullscreen control uses z-index:99999 fixed, its own top plane) */
    --z-map:0; --z-overlay:10; --z-panel:20; --z-nav:30; --z-drawer:40; --z-toast:50;

    /* elevation — no other box-shadow declarations anywhere in the system */
    --elev-1:0 1px 2px rgb(4 8 12 / .5);
    --elev-2:0 8px 24px rgb(4 8 12 / .45);
    --elev-3:0 16px 48px rgb(4 8 12 / .5);

    /* motion */
    --motion-fast:120ms; --motion-med:200ms; --ease:cubic-bezier(.16,1,.3,1);

    --font-sans:-apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --control-h:36px; --target-min:24px;
    --inset-b:calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    --focus-ring:0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);

    /* shell dimensions */
    --topbar-h:56px; --sidenav-w:208px;

    color-scheme:dark;
    accent-color:var(--color-accent);
  }
  /* OPT-IN light theme. HailIntel is a dark-locked ops console (the brief);
     the page must NOT flip to light just because the OS is light — that was
     the "split-brain theming" the red team rejected (A10). So light is an
     explicit [data-theme="light"] opt-in, not a prefers-color-scheme auto.
     The values are real and contrast-validated so the toggle can ship later.
     Accent is DEEPENED here: raw volt (#ccff00, L≈.86) cannot hit 4.5:1 as
     text or as a fill-with-dark-ink on a slate-50 canvas — test/contrast.test.ts
     computes the "brand as text"/"brand as button" gate per theme. */
  :root[data-theme="light"] {
    --color-bg:#f4f6f8; --color-surface:#ffffff; --color-surface-2:#eaeef2;
    --color-border:#d7dde3; --color-border-strong:#6b7684;
    --color-ink:#1a2028; --color-ink-muted:#4b5563;
    --color-accent:#4d6600; --color-accent-ink:#ffffff;
    --color-brand:var(--color-accent); --color-brand-ink:var(--color-accent-ink);
    --hazard-outline:#111;
  }
}

/* ================================= BASE ================================= */
@layer base {
  * { box-sizing:border-box; margin:0; }
  html { color-scheme:dark; }
  body {
    font:var(--fs-md)/1.5 var(--font-sans);
    background:var(--color-bg); color:var(--color-ink);
  }
  button { font:inherit; color:inherit; }
  a { color:var(--color-accent); }
  /* restored with priority: page/component CSS toggles display on the same
     elements the [hidden] attribute targets, which silently defeats it */
  [hidden] { display:none !important; }
  ::selection { background:var(--color-accent); color:var(--color-accent-ink); }
  /* transparent outline repaints as Highlight under forced-colors, where the
     box-shadow ring is stripped — never plain outline:none */
  :focus-visible {
    outline:2px solid transparent; outline-offset:2px;
    box-shadow:var(--focus-ring); border-radius:var(--r-1);
  }
  @media (forced-colors: active) {
    :focus-visible { outline:2px solid ButtonText !important; }
  }
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  /* tabular numerals everywhere a number can change shape mid-read */
  :where(.kpi-value, .kpi-line .count, .bignum, .path-kpi strong, .path-stat strong,
    .path-radar-value strong, .risk-row .pct, .bars .bar .v, .report-row,
    .donut-legend .row, .path-math-metrics, #frame-label) {
    font-variant-numeric:tabular-nums;
  }
  @media (prefers-reduced-motion: reduce) {
    * { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  }
}

/* ============================== COMPONENTS =============================== */
@layer components {

  /* ---- (a) buttons ---- */
  .btn {
    display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-1);
    padding:var(--sp-2) var(--sp-4); border-radius:var(--r-1); border:0;
    background:var(--color-accent); color:var(--color-accent-ink); font-weight:700; cursor:pointer;
    font-size:var(--fs-sm); min-height:var(--control-h); text-decoration:none;
    letter-spacing:.02em; text-transform:uppercase;
    transition:filter var(--motion-fast) var(--ease), background-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
  }
  @media (hover:hover) { .btn:hover { filter:brightness(1.1); } }
  .btn:active { transform:translateY(1px); filter:brightness(.92); }
  .btn:disabled, .btn[aria-busy="true"], .btn.busy { opacity:.55; cursor:not-allowed; filter:none; }
  .btn[aria-busy="true"]::after, .btn.busy::after {
    content:""; width:1em; height:1em; border-radius:50%;
    border:2px solid currentColor; border-top-color:transparent;
    animation:btn-spin .7s linear infinite;
  }
  @keyframes btn-spin { to { transform:rotate(360deg); } }
  .btn-ghost { background:transparent; color:var(--color-accent); border:1px solid var(--color-border-strong); }
  @media (hover:hover) { .btn-ghost:hover { filter:none; background:color-mix(in srgb, var(--color-accent) 8%, transparent); border-color:var(--color-accent); } }
  .btn-danger { background:var(--color-danger); color:var(--color-danger-ink); }
  @media (hover:hover) { .btn-danger:hover { filter:brightness(1.1); } }
  .btn-block { width:100%; justify-content:center; font-weight:800; min-height:44px; }
  /* labeled section separator: a hairline rule with an optional centered label —
     .sep with text renders "── LABEL ──"; empty .sep is a plain divider line. */
  .sep { display:flex; align-items:center; gap:var(--sp-3); color:var(--color-ink-muted); font-size:var(--fs-2xs); letter-spacing:.16em; text-transform:uppercase; font-weight:700; }
  .sep::before, .sep::after { content:""; flex:1; height:1px; background:var(--color-border); }
  /* one close button everywhere: 36px square, r-1, ghost-on-surface. Also
     covers the three legacy id/class close controls until markup migrates. */
  .btn-close, #panel-close, .path-card-close, .replay-close {
    width:36px; height:36px; min-height:0; padding:0; border-radius:var(--r-1);
    border:1px solid var(--color-border); background:var(--color-surface-2); color:var(--color-ink);
    font-size:18px; line-height:1; cursor:pointer; display:grid; place-items:center;
    transition:background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
  }
  /* the path drawer's close stays pinned top-right while its content scrolls */
  .path-card-close { position:sticky; top:0; justify-self:end; z-index:2; }
  @media (hover:hover) {
    .btn-close:hover, #panel-close:hover, .path-card-close:hover, .replay-close:hover {
      background:var(--color-bg); border-color:var(--color-ink-muted);
    }
  }
  .quiet-link {
    background:none; border:0; padding:var(--sp-1); cursor:pointer; text-align:center;
    color:var(--color-ink-muted); font-size:var(--fs-xs); text-decoration:none; display:block; width:100%;
  }
  @media (hover:hover) { .quiet-link:hover { color:var(--color-accent); } }

  /* ---- (b) forms ---- */
  .input, .select, .textarea {
    padding:var(--sp-2) var(--sp-3); border-radius:var(--r-1);
    border:1px solid var(--color-border-strong); background:var(--color-bg); color:var(--color-ink);
    font:1rem/1.4 var(--font-sans); min-height:var(--control-h); /* 16px kills iOS focus-zoom */
    transition:border-color var(--motion-fast) var(--ease);
  }
  /* custom-styled select: no native caret, one inline chevron drawn from the ink
     token, room reserved on the right for it. Consistent across every browser. */
  .select {
    appearance:none; -webkit-appearance:none; -moz-appearance:none; cursor:pointer;
    padding-inline-end:calc(var(--sp-5) + var(--sp-2));
    background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:calc(100% - 16px) center, calc(100% - 11px) center;
    background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
    color:var(--color-ink);
  }
  .select::-ms-expand { display:none; }
  .textarea { min-height:calc(var(--control-h) * 2); resize:vertical; }
  .input:disabled, .select:disabled, .textarea:disabled { opacity:.55; }
  .input:user-invalid, .select:user-invalid, .textarea:user-invalid { border-color:var(--hazard-svr); }
  /* form-field focus: no accent color, no ring — just a subtle neutral border
     brighten so keyboard focus stays visible (WCAG 2.4.7) without a green edge */
  .input:focus, .input:focus-visible,
  .select:focus, .select:focus-visible,
  .textarea:focus, .textarea:focus-visible {
    outline:none; border-color:var(--color-ink-muted); box-shadow:none;
  }
  /* address autocomplete dropdown — position:fixed, placed under #addr by JS */
  .ac-menu {
    position:fixed; z-index:1000; margin:0; padding:4px; list-style:none;
    max-height:min(340px, 60vh); overflow-y:auto;
    background:var(--color-surface); border:1px solid var(--color-border-strong);
    border-radius:var(--r-2); box-shadow:var(--elev-3);
  }
  .ac-item {
    padding:9px 11px; border-radius:var(--r-1); cursor:pointer; font-size:var(--fs-sm);
    color:var(--color-ink); line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .ac-item.is-active { background:var(--color-surface-2); }
  label { display:grid; gap:var(--sp-1); font-size:var(--fs-sm); color:var(--color-ink-muted); }
  .form-msg { font-size:var(--fs-sm); min-height:1.2em; color:var(--color-ink-muted); }
  .form-msg.ok, #msg.ok { color:var(--color-ok); }
  .form-msg.err, #msg.err { color:var(--color-danger); }
  .hint { font-size:var(--fs-xs); color:var(--color-ink-muted); }
  .agree, .agree-row { display:flex; gap:var(--sp-2); align-items:flex-start; font-size:var(--fs-xs); color:var(--color-ink-muted); margin-top:var(--sp-2); }
  .agree input, .agree-row input { margin-top:2px; }
  .agree a, .agree-row a { color:var(--color-accent); }

  /* ---- (c) cards: one recipe, several names until markup migrates ---- */
  .card, .card-tight, .rail-card, .insight-card, .dash-card, .auth-card, .warn-card, .report-card, .kpi-card {
    background:var(--color-surface); border:1px solid var(--color-border);
    border-radius:var(--r-2); padding:var(--sp-5);
  }
  .card-tight { padding:var(--sp-4); }
  .rail-card, .insight-card, .dash-card { display:grid; gap:var(--sp-3); padding:var(--sp-4); }
  .auth-card { padding:var(--sp-6); box-shadow:var(--elev-2); }
  .report-card { background:color-mix(in srgb, var(--color-surface) 92%, var(--color-bg)); padding:var(--sp-4); }
  .kpi-card { padding:var(--sp-4); min-height:132px; display:flex; flex-direction:column; justify-content:space-between; }
  .warn-card {
    border-inline-start:4px solid var(--hazard-svr); padding:var(--sp-2) var(--sp-3);
    font-size:var(--fs-sm); cursor:pointer; text-align:start; color:var(--color-ink); width:100%;
    transition:border-color var(--motion-fast) var(--ease), background-color var(--motion-fast) var(--ease);
  }
  @media (hover:hover) { button.warn-card:hover { background:color-mix(in srgb, var(--color-surface) 92%, var(--color-ink)); border-color:var(--color-border-strong); } }
  .warn-card.tor { border-inline-start-color:var(--hazard-tor); }
  .warn-card.quiet { border-inline-start-color:var(--color-border-strong); cursor:default; }
  .warn-card b { display:block; }
  .warn-card .meta { color:var(--color-ink-muted); font-size:var(--fs-xs); }
  .warn-card .strike { margin-top:var(--sp-1); font-size:var(--fs-xs); }
  .warn-card .strike span { color:var(--sev-proj60); }
  /* reusable floating-glass recipe (app.js composes "surface path-card") */
  .surface {
    background:color-mix(in srgb, var(--color-surface-2) 86%, transparent);
    border:1px solid var(--color-border); border-radius:var(--r-2);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    box-shadow:var(--elev-2); color:var(--color-ink);
  }

  /* ---- (d) badges / pills ---- */
  .badge, .pill, .chip {
    display:inline-flex; align-items:center; gap:6px; padding:2px var(--sp-2); border-radius:var(--r-full);
    font-size:var(--fs-xs); font-weight:700;
    /* visible fallback: an unknown tier must never render invisibly */
    border:1px solid var(--color-border-strong); color:var(--color-ink);
  }
  .badge-hot, .count.hot, .kpi-line .count.hot { background:color-mix(in srgb, var(--sev-3) 26%, transparent); color:var(--color-danger); border-color:transparent; }
  .badge-ok, .chip.verified { background:color-mix(in srgb, var(--color-ok) 20%, transparent); color:var(--color-ok); border-color:color-mix(in srgb, var(--color-ok) 45%, var(--color-border)); }
  /* hail-score / confidence severity tiers (JS-generated: `badge badge-${tier}`) */
  .badge-Extreme { background:var(--sev-3); color:var(--badge-ink-light); border-color:transparent; }
  .badge-High { background:var(--sev-2); color:var(--badge-ink-dark); border-color:transparent; }
  .badge-Medium { background:var(--color-caution); color:var(--color-caution-ink); border-color:transparent; }
  .badge-Low { background:var(--color-border); color:var(--color-ink); border-color:transparent; }
  .badge-None { background:transparent; border:1px solid var(--color-border); color:var(--color-ink-muted); }
  .count {
    display:inline-block; min-width:30px; text-align:center; padding:1px 8px;
    border-radius:var(--r-full); font-weight:800; font-size:var(--fs-xs);
    background:color-mix(in srgb, var(--color-accent) 20%, transparent); color:var(--color-accent);
  }

  /* ---- (e) seg tabs (role=tablist) ---- */
  .seg {
    display:flex; gap:4px; padding:4px; margin-bottom:var(--sp-5);
    background:color-mix(in srgb, var(--color-bg) 72%, var(--color-surface));
    border:1px solid var(--color-border); border-radius:var(--r-2);
  }
  .seg button, .seg [role="tab"] {
    flex:1; min-height:38px; border:1px solid transparent; border-radius:var(--r-1); cursor:pointer;
    background:transparent; color:var(--color-ink-muted); font-weight:700; font-size:var(--fs-sm);
    transition:background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
  }
  .seg button[aria-selected="true"], .seg [role="tab"][aria-selected="true"] {
    background:var(--color-surface); color:var(--color-accent);
    box-shadow:var(--elev-1); border-color:var(--color-border);
  }

  /* ---- (f) toast ---- */
  .toast {
    position:absolute; top:var(--sp-3); left:50%; transform:translateX(-50%);
    z-index:var(--z-toast); max-width:min(90%, 480px);
    background:var(--color-surface); border:1px solid var(--color-border);
    border-radius:var(--r-2); padding:var(--sp-3) var(--sp-4);
    font-size:var(--fs-sm); box-shadow:var(--elev-3);
  }

  /* ---- (g) map chrome: popup skin, legal pill, legend, detect-card, kpi-line ---- */
  .maplibregl-popup-content {
    background:var(--color-surface); color:var(--color-ink); border:1px solid var(--color-border);
    border-radius:var(--r-2); font-size:var(--fs-sm); padding:var(--sp-3); max-width:280px;
  }
  .maplibregl-popup-content .remarks {
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere;
  }
  .maplibregl-popup-close-button { color:var(--color-ink); width:var(--target-min); height:var(--target-min); }
  .maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color:var(--color-surface); }
  .maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color:var(--color-surface); }
  /* Zoom controls: no ring after a mouse click (our layered rule otherwise beats
     the vendor's :not(:focus-visible) suppression). Keyboard focus still rings. */
  .maplibregl-ctrl-group button:focus { box-shadow:none; }
  .maplibregl-ctrl-group button:focus-visible { box-shadow:var(--focus-ring); }
  /* clears space for the replay control on the opposite corner from the
     legal pill — map-legal owns bottom-right exclusively */
  .maplibregl-ctrl-bottom-left { margin-bottom:34px; }
  .popup-path-btn { margin-top:var(--sp-2); width:100%; }

  /* ---- hail-report popup: the premium card shown on a map-point click.
     The MapLibre wrapper is neutralized so this card IS the popup. ---- */
  .hail-popup-shell .maplibregl-popup-content { background:none; border:0; border-radius:0; padding:0; box-shadow:none; max-width:none; }
  .hail-popup-shell .maplibregl-popup-tip { display:none; }
  .hail-popup {
    --hp-accent:var(--color-accent);
    --hp-accent-bright:color-mix(in srgb, var(--color-accent) 82%, #fff);
    --hp-accent-dark:color-mix(in srgb, var(--color-accent) 84%, #000);
    --hp-danger:var(--color-danger);
    position:relative; overflow:hidden; isolation:isolate;
    width:min(384px, calc(100vw - 28px)); padding:var(--sp-4); color:var(--color-ink);
    background:var(--color-surface-2);
    border:1px solid var(--color-border); border-radius:var(--r-2); box-shadow:var(--elev-3);
    animation:hail-popup-enter 240ms var(--ease) both;
  }
  .hail-popup::after { display:none; }
  /* Floating report card: centered inside the map region, draggable by its header,
     always above the tiles + controls so it never overlaps the cards below. */
  .hail-popup--floating {
    position:absolute; z-index:30; margin:0; left:0; top:0;
    box-shadow:var(--elev-3), 0 0 0 1px var(--color-border);
  }
  .hail-popup--floating .hail-popup__header { cursor:move; touch-action:none; }
  .hail-popup__glow { display:none; }
  .hail-popup__header { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-3); }
  .hail-popup__title-group { display:flex; align-items:center; gap:var(--sp-3); min-width:0; }
  .hail-popup__icon {
    display:grid; place-items:center; flex:none; width:48px; height:48px; border-radius:var(--r-2); color:var(--hp-accent);
    background:linear-gradient(145deg, color-mix(in srgb, var(--hp-accent) 11%, transparent), color-mix(in srgb, var(--hp-accent) 2%, transparent));
    border:1px solid color-mix(in srgb, var(--hp-accent) 22%, transparent);
    box-shadow:inset 0 1px 0 rgb(255 255 255 / .05), 0 10px 24px rgb(0 0 0 / .24);
  }
  .hail-popup__icon svg { width:26px; height:26px; }
  .hail-popup__eyebrow { display:flex; align-items:center; gap:7px; margin-bottom:5px; color:var(--color-ink-muted); font-size:var(--fs-2xs); font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
  .hail-popup__live-dot { width:7px; height:7px; border-radius:50%; background:var(--hp-accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--hp-accent) 12%, transparent); }
  .hail-popup__title-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
  .hail-popup__title { margin:0; color:var(--color-ink); font-size:var(--fs-xl); font-weight:800; line-height:1.1; letter-spacing:-.03em; }
  .hail-popup__severity {
    display:inline-flex; align-items:center; gap:5px; min-height:24px; padding:3px 9px;
    color:var(--hp-danger); background:color-mix(in srgb, var(--hp-danger) 12%, transparent);
    border:1px solid color-mix(in srgb, var(--hp-danger) 26%, transparent); border-radius:var(--r-full);
    font-size:var(--fs-2xs); font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  }
  .hail-popup__severity svg { width:13px; height:13px; }
  .hail-popup--moderate .hail-popup__severity { color:var(--sev-2); background:color-mix(in srgb, var(--sev-2) 12%, transparent); border-color:color-mix(in srgb, var(--sev-2) 26%, transparent); }
  .hail-popup--extreme .hail-popup__severity { color:color-mix(in srgb, var(--hp-danger) 60%, #fff); background:color-mix(in srgb, var(--hp-danger) 22%, transparent); border-color:color-mix(in srgb, var(--hp-danger) 46%, transparent); box-shadow:0 0 16px color-mix(in srgb, var(--hp-danger) 16%, transparent); }
  .hail-popup__close {
    display:grid; place-items:center; flex:none; width:36px; height:36px; padding:0; cursor:pointer; color:var(--color-ink-muted);
    background:color-mix(in srgb, #fff 2.5%, transparent); border:1px solid var(--color-border); border-radius:var(--r-1);
    transition:color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
  }
  .hail-popup__close svg { width:18px; height:18px; }
  .hail-popup__close:hover { color:var(--color-ink); background:color-mix(in srgb, #fff 6%, transparent); border-color:var(--color-border-strong); transform:rotate(4deg); }
  .hail-popup__close:focus-visible, .hail-popup__cta:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
  .hail-popup__content {
    display:grid; gap:var(--sp-3); margin-top:var(--sp-4); padding:var(--sp-3);
    background:color-mix(in srgb, #fff 2%, transparent); border:1px solid var(--color-border); border-radius:var(--r-2);
  }
  .hail-popup__detail { display:grid; grid-template-columns:22px minmax(0,1fr); align-items:flex-start; gap:10px; color:var(--hp-accent); }
  .hail-popup__detail svg { width:18px; height:18px; margin-top:2px; }
  .hail-popup__detail > div { display:flex; min-width:0; flex-direction:column; gap:3px; }
  .hail-popup__detail span { color:var(--color-ink-muted); font-size:var(--fs-2xs); font-weight:720; letter-spacing:.07em; text-transform:uppercase; }
  .hail-popup__detail strong { overflow:hidden; color:var(--color-ink); font-size:var(--fs-md); font-weight:620; line-height:1.35; text-overflow:ellipsis; }
  .hail-popup__source-row { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-top:var(--sp-3); }
  .hail-popup__source { display:inline-flex; align-items:center; gap:6px; color:var(--color-ink-muted); font-size:var(--fs-xs); font-weight:620; }
  .hail-popup__source svg { width:15px; height:15px; color:var(--hp-accent); }
  .hail-popup__source strong { color:var(--color-ink); font-weight:760; }
  .hail-popup__verified {
    display:inline-flex; align-items:center; gap:5px; padding:4px 9px; color:var(--color-ok);
    background:color-mix(in srgb, var(--color-ok) 8%, transparent); border:1px solid color-mix(in srgb, var(--color-ok) 20%, transparent); border-radius:var(--r-full);
    font-size:var(--fs-2xs); font-weight:700;
  }
  .hail-popup__verified svg { width:14px; height:14px; }
  .hail-popup__cta {
    display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:40px; margin-top:var(--sp-3);
    padding:8px var(--sp-3); cursor:pointer; color:var(--color-accent-ink);
    background:var(--hp-accent); border:0; border-radius:var(--r-1);
    font-family:inherit; font-size:var(--fs-sm); font-weight:750; letter-spacing:.02em;
    transition:filter var(--motion-fast) var(--ease);
  }
  .hail-popup__cta:hover { filter:brightness(1.05); }
  .hail-popup__cta:active { transform:translateY(0); }
  /* simple inline arrow, not a boxed "button-inside-a-button" */
  .hail-popup__cta-icon { display:inline-grid; place-items:center; color:currentColor; transition:transform var(--motion-fast) var(--ease); }
  .hail-popup__cta-icon svg { width:16px; height:16px; }
  .hail-popup__cta:hover .hail-popup__cta-icon { transform:translateX(2px); }
  @keyframes hail-popup-enter { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
  @media (prefers-reduced-motion: reduce) { .hail-popup, .hail-popup__close, .hail-popup__cta, .hail-popup__cta-icon { animation:none; transition:none; } }

  .map-legal {
    position:absolute; inset-block-end:0; inset-inline-end:0; z-index:var(--z-overlay);
    max-width:calc(100% - var(--sp-4)); padding:var(--sp-1) var(--sp-3);
    background:color-mix(in srgb, var(--color-surface) 88%, transparent);
    color:var(--color-ink-muted); font-size:var(--fs-xs); line-height:1.4;
    border:1px solid var(--color-border); border-inline-end:0; border-block-end:0;
    border-start-start-radius:var(--r-2);
  }
  .map-legal a { color:var(--color-accent); }

  .legend {
    margin-top:var(--sp-2); padding-top:var(--sp-2);
    border-top:1px solid var(--color-border); font-size:var(--fs-xs);
    background:transparent; border-inline:0; border-block-end:0; box-shadow:none;
  }
  .legend .dot { display:inline-block; border-radius:50%; margin-inline-end:var(--sp-1); vertical-align:middle; }
  .legend label { display:flex; align-items:center; gap:var(--sp-1); margin-top:var(--sp-1); cursor:pointer; min-height:var(--target-min); }

  /* ---- KPI tile: the overview's headline metrics (stat tiles, not charts) ---- */
  .kpi-tile {
    background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--r-2);
    padding:var(--sp-4); display:grid; align-content:space-between; gap:var(--sp-2); min-width:0;
  }
  .kpi-label { font-size:var(--fs-2xs); letter-spacing:.1em; text-transform:uppercase; color:var(--color-ink-muted); font-weight:700; }
  .kpi-label em { font-style:normal; color:var(--color-ink-muted); font-weight:500; text-transform:none; letter-spacing:0; }
  .kpi-num { font-size:2rem; line-height:1; font-weight:800; color:var(--color-ink); font-variant-numeric:tabular-nums; }
  .kpi-num.hot { color:var(--sev-3); }
  .kpi-foot { font-size:var(--fs-xs); color:var(--color-ink-muted); }
  .kpi-foot-btn { background:none; border:0; padding:0; text-align:start; cursor:pointer; color:var(--color-accent); font-size:var(--fs-xs); }
  .kpi-foot-btn:disabled { color:var(--color-ink-muted); cursor:default; }
  /* ---- featured hail-card: the "Hail reports · 7 days" hero with a full
     bar chart (y-axis ticks, gridlines, weekday axis) + storm-ember glow.
     It's a button that opens the full report. Palette scoped to tokens. ---- */
  .hail-card {
    --hc-orange:var(--sev-2);
    --hc-orange-light:color-mix(in srgb, var(--sev-2) 62%, #fff);
    --hc-orange-dark:color-mix(in srgb, var(--sev-2) 60%, #000);
    --hc-green:var(--color-ok);
    position:relative; overflow:hidden; isolation:isolate;
    display:flex; flex-direction:column; min-width:0; gap:var(--sp-3);
    padding:var(--sp-5);
    font:inherit; text-align:start; cursor:pointer; -webkit-appearance:none; appearance:none;
    color:var(--color-ink);
    background:linear-gradient(160deg, var(--color-surface-2) 0%, var(--color-surface) 60%);
    border:1px solid var(--color-border); border-radius:var(--r-2);
    box-shadow:var(--elev-2);
    transition:border-color var(--motion-med) var(--ease), box-shadow var(--motion-med) var(--ease), transform var(--motion-med) var(--ease);
  }
  @media (hover:hover) { .hail-card:hover { transform:translateY(-4px); border-color:color-mix(in srgb, var(--hc-orange) 44%, var(--color-border)); box-shadow:var(--elev-3); } }
  .hail-card:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
  .hail-card:active { transform:translateY(-1px); }
  /* storm-ember glow, top-right — approximates the reference's lightning cloud */
  .hail-card__ember {
    position:absolute; z-index:-1; top:-70px; right:-60px; width:min(58%, 380px); height:300px;
    pointer-events:none;
    background:
      radial-gradient(52% 60% at 62% 42%, color-mix(in srgb, var(--hc-orange) 46%, transparent) 0%, transparent 68%),
      radial-gradient(38% 46% at 78% 30%, color-mix(in srgb, var(--hc-orange-light) 40%, transparent) 0%, transparent 60%),
      radial-gradient(70% 80% at 70% 20%, color-mix(in srgb, var(--hc-orange-dark) 34%, transparent) 0%, transparent 72%);
    filter:blur(18px); opacity:.9; mix-blend-mode:screen;
  }
  .hail-card > *:not(.hail-card__ember) { position:relative; }
  .hail-card__header { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-3); }
  .hail-card__brand { display:flex; align-items:center; gap:var(--sp-3); min-width:0; }
  .hail-card__icon {
    display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:var(--r-2);
    color:var(--hc-orange);
    background:color-mix(in srgb, var(--hc-orange) 14%, transparent);
    border:1px solid color-mix(in srgb, var(--hc-orange) 30%, transparent);
  }
  .hail-card__icon svg { width:24px; height:24px; }
  .hail-card__titles { min-width:0; }
  .hail-card__eyebrow, .hail-card__period { margin:0; }
  .hail-card__eyebrow { color:var(--color-ink); font-size:var(--fs-lg); font-weight:800; line-height:1.1; letter-spacing:.02em; text-transform:uppercase; }
  .hail-card__period { margin-top:2px; color:var(--color-ink-muted); font-size:var(--fs-sm); font-weight:550; }
  .hail-card__status {
    display:inline-flex; align-items:center; gap:7px; min-height:28px; padding:5px 12px; flex:none;
    color:color-mix(in srgb, var(--hc-green) 74%, var(--color-ink));
    background:color-mix(in srgb, var(--hc-green) 11%, transparent);
    border:1px solid color-mix(in srgb, var(--hc-green) 24%, transparent); border-radius:var(--r-full);
    font-size:var(--fs-sm); font-weight:700; letter-spacing:.02em;
  }
  .hail-card__status.stale { color:var(--color-ink-muted); background:transparent; border-color:var(--color-border); }
  .hail-card__status-dot { width:8px; height:8px; border-radius:50%; background:var(--hc-green); box-shadow:0 0 0 4px color-mix(in srgb, var(--hc-green) 14%, transparent); }
  .hail-card__status.stale .hail-card__status-dot { background:var(--color-ink-muted); box-shadow:none; }
  .hail-card__metric { display:flex; flex-direction:column; gap:var(--sp-1); }
  .hail-card__value {
    display:block; margin:0; color:var(--color-ink);
    font-size:clamp(3rem, 6vw, 4.2rem); font-weight:800; line-height:.9; letter-spacing:-.045em;
    font-variant-numeric:tabular-nums;
  }
  .hail-card__change { display:inline-flex; align-items:center; gap:8px; color:var(--hc-green); }
  .hail-card__change.down { color:var(--sev-2); }
  .hail-card__change-arrow { width:20px; height:20px; flex:none; transition:transform var(--motion-fast) var(--ease); }
  .hail-card__change.down .hail-card__change-arrow { transform:rotate(180deg); }
  .hail-card__change span { font-size:var(--fs-lg); font-weight:800; }
  .hail-card__change small { color:var(--color-ink-muted); font-size:var(--fs-sm); font-weight:500; white-space:nowrap; }
  /* chart: [ y-axis | plot ] over [ · | x-axis ] */
  .hail-chart {
    flex:1 1 auto; min-height:150px; display:grid;
    grid-template-columns:26px 1fr; grid-template-rows:1fr 22px; column-gap:10px;
  }
  .hail-chart__yaxis { grid-area:1 / 1; position:relative; }
  .hail-chart__yaxis span {
    position:absolute; right:0; transform:translateY(50%); line-height:1;
    color:var(--color-ink-muted); font-size:var(--fs-2xs); font-weight:600; font-variant-numeric:tabular-nums;
  }
  .hail-chart__plot { grid-area:1 / 2; position:relative; min-width:0; }
  .hail-chart__grid { position:absolute; inset:0; pointer-events:none; }
  .hail-chart__grid span {
    position:absolute; left:0; right:0; height:0;
    border-top:1px dashed color-mix(in srgb, var(--color-border-strong) 46%, transparent);
  }
  .hail-chart__bars { position:absolute; inset:0; display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); align-items:end; gap:clamp(6px, 1.4vw, 16px); }
  .hail-chart__bar {
    position:relative; display:block; width:100%; height:var(--height, 4%); min-height:4px; align-self:end;
    background:linear-gradient(180deg, var(--hc-orange-light) 0%, var(--hc-orange) 52%, var(--hc-orange-dark) 100%);
    border-radius:7px 7px 3px 3px;
    box-shadow:0 8px 20px color-mix(in srgb, var(--hc-orange) 16%, transparent), inset 0 1px 0 rgb(255 255 255 / .26);
    transform-origin:bottom;
    animation:hail-bar-enter 700ms cubic-bezier(.2,.8,.2,1) var(--delay, 0ms) both;
    transition:filter var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
  }
  .hail-chart__bar--peak { box-shadow:0 12px 28px color-mix(in srgb, var(--hc-orange) 26%, transparent), inset 0 1px 0 rgb(255 255 255 / .32); }
  @media (hover:hover) { .hail-chart__bar:hover { filter:brightness(1.12); transform:translateY(-3px); } }
  .hail-chart__xaxis { grid-area:2 / 2; display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); align-items:center; gap:clamp(6px, 1.4vw, 16px); }
  .hail-chart__xaxis span {
    overflow:hidden; color:var(--color-ink-muted); font-size:var(--fs-2xs); font-weight:650; letter-spacing:.04em;
    text-align:center; text-overflow:ellipsis; white-space:nowrap; text-transform:uppercase;
  }
  .hail-chart__xaxis span.peak { color:var(--hc-orange); }
  .hail-card__footer {
    display:flex; align-items:center; gap:var(--sp-3); margin-top:auto;
    padding-top:var(--sp-4); border-top:1px solid var(--color-border);
  }
  .hail-card__peak-icon {
    display:grid; place-items:center; flex:none; width:38px; height:38px; border-radius:var(--r-full);
    color:var(--hc-orange); background:color-mix(in srgb, var(--hc-orange) 12%, transparent);
  }
  .hail-card__peak-icon svg { width:20px; height:20px; }
  .hail-card__peak { min-width:0; margin-right:auto; }
  .hail-card__peak p { margin:0; color:var(--color-ink-muted); font-size:var(--fs-sm); font-weight:550; }
  .hail-card__peak strong { display:block; color:var(--color-ink); font-size:var(--fs-md); font-weight:750; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .hail-card__cta {
    display:inline-flex; align-items:center; gap:8px; flex:none; padding:9px 14px; border-radius:var(--r-2);
    color:var(--color-ink); font-size:var(--fs-sm); font-weight:700; white-space:nowrap;
    background:color-mix(in srgb, var(--color-ink) 5%, transparent);
    border:1px solid var(--color-border);
    transition:background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
  }
  .hail-card__cta svg { width:17px; height:17px; color:var(--hc-orange); }
  .hail-card__cta-arrow { color:var(--color-ink-muted); font-size:var(--fs-md); line-height:1; }
  @media (hover:hover) { .hail-card:hover .hail-card__cta { background:color-mix(in srgb, var(--hc-orange) 16%, transparent); border-color:color-mix(in srgb, var(--hc-orange) 36%, transparent); } }
  @keyframes hail-bar-enter { from { opacity:0; transform:scaleY(0); } to { opacity:1; transform:scaleY(1); } }
  @media (prefers-reduced-motion: reduce) { .hail-card, .hail-chart__bar, .hail-card__cta { transition:none; } .hail-chart__bar { animation:none; } }

  /* ---- severe-card: the "Severe ≥ 2\"" hero — big red count over total, a
     progress bar, and a 3-stat footer. Red scoped to the severity token. ---- */
  .severe-card {
    --sv-red:var(--sev-3);
    --sv-red-bright:color-mix(in srgb, var(--sev-3) 55%, #fff);
    --sv-red-dark:color-mix(in srgb, var(--sev-3) 62%, #000);
    position:relative; overflow:hidden; isolation:isolate;
    display:flex; flex-direction:column; gap:var(--sp-3); min-width:0;
    padding:var(--sp-5); color:var(--color-ink);
    background:
      radial-gradient(circle at 18% 30%, color-mix(in srgb, var(--sv-red) 10%, transparent), transparent 30%),
      linear-gradient(150deg, var(--color-surface-2) 0%, var(--color-surface) 60%);
    border:1px solid var(--color-border); border-radius:var(--r-2); box-shadow:var(--elev-2);
    transition:border-color var(--motion-med) var(--ease), box-shadow var(--motion-med) var(--ease), transform var(--motion-med) var(--ease);
  }
  @media (hover:hover) { .severe-card:hover { transform:translateY(-4px); border-color:color-mix(in srgb, var(--sv-red) 40%, var(--color-border)); box-shadow:var(--elev-3); } }
  .severe-card__ambient {
    position:absolute; z-index:-1; top:-110px; left:-80px; width:310px; height:310px;
    pointer-events:none; border-radius:var(--r-full);
    background:color-mix(in srgb, var(--sv-red) 16%, transparent); filter:blur(60px);
  }
  .severe-card > *:not(.severe-card__ambient) { position:relative; }
  .severe-card__header { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-3); }
  .severe-card__brand { display:flex; align-items:center; gap:var(--sp-3); min-width:0; }
  .severe-card__icon {
    display:grid; place-items:center; flex:none; width:52px; height:52px; border-radius:var(--r-2);
    color:var(--sv-red-bright);
    background:linear-gradient(150deg, color-mix(in srgb, #fff 5%, transparent), color-mix(in srgb, var(--sv-red) 10%, transparent));
    border:1px solid color-mix(in srgb, var(--sv-red) 26%, transparent);
    box-shadow:inset 0 1px 0 rgb(255 255 255 / .06), 0 10px 24px rgb(0 0 0 / .2);
  }
  .severe-card__icon svg { width:28px; height:28px; }
  .severe-card__title { margin:0; color:var(--color-ink); font-size:var(--fs-2xl); font-weight:800; line-height:1; letter-spacing:-.03em; text-transform:uppercase; }
  .severe-card__period { display:flex; align-items:center; gap:8px; margin:8px 0 0; color:var(--color-ink-muted); font-size:var(--fs-sm); font-weight:650; letter-spacing:.06em; text-transform:uppercase; }
  .severe-card__period-dot { width:8px; height:8px; border-radius:50%; background:var(--sv-red); box-shadow:0 0 0 4px color-mix(in srgb, var(--sv-red) 12%, transparent); }
  .severe-card__badge {
    display:inline-flex; align-items:center; gap:8px; flex:none; min-height:32px; padding:6px 13px;
    color:var(--sv-red-bright); background:color-mix(in srgb, var(--sv-red) 10%, transparent);
    border:1px solid color-mix(in srgb, var(--sv-red) 30%, transparent); border-radius:var(--r-full);
    font-size:var(--fs-sm); font-weight:750;
  }
  .severe-card__badge svg { width:17px; height:17px; }
  .severe-card__metric { display:flex; align-items:flex-end; gap:var(--sp-4); flex:1 1 auto; min-width:0; padding:var(--sp-3) 0 var(--sp-2); }
  .severe-card__number {
    flex:none; padding-inline:.04em;
    color:var(--sv-red); font-size:clamp(4rem, 10vw, 7rem); font-weight:820; line-height:.82; letter-spacing:-.04em;
    font-variant-numeric:tabular-nums;
    background:linear-gradient(180deg, var(--sv-red-bright) 0%, var(--sv-red) 48%, var(--sv-red-dark) 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 12px 24px color-mix(in srgb, var(--sv-red) 16%, transparent));
  }
  .severe-card__copy { display:flex; align-items:baseline; gap:10px; min-width:0; padding-bottom:10px; color:var(--color-ink-muted); white-space:nowrap; }
  .severe-card__copy span { font-size:clamp(1rem, 2.4vw, 1.5rem); font-weight:520; }
  .severe-card__copy strong { color:var(--color-ink); font-size:clamp(2.4rem, 6vw, 4rem); font-weight:760; line-height:1; letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
  .severe-card__progress { position:relative; width:100%; height:3px; overflow:hidden; background:color-mix(in srgb, var(--color-border-strong) 55%, transparent); border-radius:var(--r-full); }
  .severe-card__progress-value {
    height:100%; border-radius:inherit;
    background:linear-gradient(90deg, var(--sv-red-bright), var(--sv-red-dark));
    box-shadow:0 0 16px color-mix(in srgb, var(--sv-red) 50%, transparent);
    transform-origin:left; animation:severe-progress-in 700ms var(--ease) both;
  }
  .severe-card__footer {
    display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:var(--sp-3);
    margin-top:var(--sp-2); padding:var(--sp-3);
    background:color-mix(in srgb, #fff 2%, transparent);
    border:1px solid var(--color-border); border-radius:var(--r-2);
  }
  .severe-card__stat { display:flex; align-items:center; gap:var(--sp-2); min-width:0; }
  .severe-card__stat-icon {
    display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:var(--r-full);
    color:var(--sv-red); background:color-mix(in srgb, #fff 2.5%, transparent);
    border:1px solid var(--color-border);
  }
  .severe-card__stat-icon svg { width:22px; height:22px; }
  .severe-card__stat > div:last-child { display:flex; min-width:0; flex-direction:column; gap:3px; }
  .severe-card__stat strong { overflow:hidden; color:var(--sv-red-bright); font-size:var(--fs-sm); font-weight:780; line-height:1.1; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
  .severe-card__stat span { overflow:hidden; color:var(--color-ink-muted); font-size:var(--fs-xs); font-weight:550; text-overflow:ellipsis; white-space:nowrap; }
  .severe-card__divider { width:1px; height:52px; background:linear-gradient(180deg, transparent, var(--color-border-strong), transparent); }
  @keyframes severe-progress-in { from { opacity:0; transform:scaleX(0); } to { opacity:1; transform:scaleX(1); } }
  @media (max-width: 620px) {
    .severe-card__footer { grid-template-columns:1fr; }
    .severe-card__divider { width:100%; height:1px; background:linear-gradient(90deg, transparent, var(--color-border-strong), transparent); }
    .severe-card__metric { flex-direction:column; align-items:flex-start; gap:var(--sp-2); }
    .severe-card__copy { padding-bottom:0; }
  }
  @media (prefers-reduced-motion: reduce) { .severe-card, .severe-card__progress-value { transition:none; animation:none; } }

  /* ---- largest-card: the "Largest hail" hero — a huge silver hailstone size
     over radar rings, with a located footer. Blue scoped to --sev-proj60. ---- */
  .largest-card {
    --lg-blue:var(--sev-proj60);
    --lg-blue-light:color-mix(in srgb, var(--sev-proj60) 52%, #fff);
    --lg-blue-dark:color-mix(in srgb, var(--sev-proj60) 60%, #000);
    position:relative; overflow:hidden; isolation:isolate;
    display:flex; flex-direction:column; gap:var(--sp-3); min-width:0;
    padding:var(--sp-5); color:var(--color-ink);
    background:
      radial-gradient(circle at 16% 8%, color-mix(in srgb, var(--lg-blue) 12%, transparent), transparent 26%),
      radial-gradient(circle at 72% 52%, color-mix(in srgb, var(--lg-blue) 8%, transparent), transparent 32%),
      linear-gradient(150deg, var(--color-surface-2) 0%, var(--color-surface) 60%);
    border:1px solid var(--color-border); border-radius:var(--r-2); box-shadow:var(--elev-2);
    transition:border-color var(--motion-med) var(--ease), box-shadow var(--motion-med) var(--ease), transform var(--motion-med) var(--ease);
  }
  @media (hover:hover) { .largest-card:hover { transform:translateY(-4px); border-color:color-mix(in srgb, var(--lg-blue) 42%, var(--color-border)); box-shadow:var(--elev-3); } }
  .largest-card__ambient { position:absolute; z-index:-1; right:-90px; bottom:40px; width:260px; height:260px; pointer-events:none; border-radius:var(--r-full); background:color-mix(in srgb, var(--lg-blue) 12%, transparent); filter:blur(70px); }
  .largest-card__radar { position:absolute; z-index:-1; top:46%; left:50%; width:400px; height:400px; pointer-events:none; transform:translate(-50%, -50%); }
  .largest-card__radar span { position:absolute; inset:50% auto auto 50%; border:1px solid color-mix(in srgb, var(--lg-blue) 16%, transparent); border-radius:50%; transform:translate(-50%, -50%); }
  .largest-card__radar span:nth-child(1) { width:120px; height:120px; }
  .largest-card__radar span:nth-child(2) { width:210px; height:210px; }
  .largest-card__radar span:nth-child(3) { width:300px; height:300px; }
  .largest-card__radar span:nth-child(4) { width:390px; height:390px; }
  .largest-card > *:not(.largest-card__ambient):not(.largest-card__radar) { position:relative; }
  .largest-card__header { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-3); }
  .largest-card__brand { display:flex; align-items:center; gap:var(--sp-3); min-width:0; }
  .largest-card__icon {
    display:grid; place-items:center; flex:none; width:52px; height:52px; border-radius:var(--r-2); color:var(--lg-blue-light);
    background:linear-gradient(145deg, color-mix(in srgb, var(--lg-blue) 14%, transparent), color-mix(in srgb, var(--lg-blue) 3%, transparent));
    border:1px solid color-mix(in srgb, var(--lg-blue) 34%, transparent);
    box-shadow:inset 0 1px 0 rgb(255 255 255 / .08), 0 0 24px color-mix(in srgb, var(--lg-blue) 12%, transparent);
  }
  .largest-card__icon svg { width:28px; height:28px; }
  .largest-card__eyebrow { margin:0 0 4px; color:var(--color-ink-muted); font-size:var(--fs-2xs); font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
  .largest-card__title { margin:0; color:var(--color-ink); font-size:var(--fs-xl); font-weight:800; line-height:1; letter-spacing:-.03em; text-transform:uppercase; }
  .largest-card__accent-line { display:block; width:56px; height:3px; margin-top:9px; border-radius:var(--r-full); background:linear-gradient(90deg, var(--lg-blue-light), var(--lg-blue), transparent); box-shadow:0 0 12px color-mix(in srgb, var(--lg-blue) 30%, transparent); }
  .largest-card__info {
    display:grid; place-items:center; flex:none; width:34px; height:34px; color:var(--color-ink-muted); text-decoration:none;
    background:color-mix(in srgb, #fff 2.5%, transparent); border:1px solid color-mix(in srgb, var(--lg-blue) 26%, transparent); border-radius:var(--r-full);
    transition:color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
  }
  .largest-card__info svg { width:18px; height:18px; }
  .largest-card__info:hover { color:var(--color-ink); background:color-mix(in srgb, var(--lg-blue) 10%, transparent); border-color:color-mix(in srgb, var(--lg-blue) 42%, transparent); transform:translateY(-1px); }
  .largest-card__info:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
  .largest-card__metric { position:relative; display:grid; place-items:center; flex:1 1 auto; min-height:0; }
  .largest-card__value {
    display:flex; align-items:flex-start; color:var(--color-ink);
    font-size:clamp(3.4rem, 8vw, 5.2rem); font-weight:850; line-height:.8; letter-spacing:-.06em; font-variant-numeric:tabular-nums;
    background:linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--lg-blue-light) 40%, #fff) 46%, color-mix(in srgb, var(--lg-blue-light) 70%, #fff) 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 10px 22px rgb(0 0 0 / .3));
  }
  .largest-card__value sup { margin-top:.14em; margin-left:.04em; font-size:.34em; font-weight:800; line-height:1; letter-spacing:-.02em; }
  .largest-card__value[data-empty="true"] sup { display:none; }
  .largest-card__signal { position:absolute; right:16%; bottom:6px; left:16%; display:flex; align-items:center; }
  .largest-card__signal-line { flex:1; height:1px; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--lg-blue) 55%, transparent)); }
  .largest-card__signal-line:last-child { background:linear-gradient(90deg, color-mix(in srgb, var(--lg-blue) 55%, transparent), transparent); }
  .largest-card__signal-dot { width:8px; height:8px; border-radius:50%; background:var(--lg-blue-light); box-shadow:0 0 0 5px color-mix(in srgb, var(--lg-blue) 10%, transparent), 0 0 16px color-mix(in srgb, var(--lg-blue) 60%, transparent); }
  .largest-card__location {
    display:grid; grid-template-columns:44px minmax(0, 1fr) 96px; align-items:center; gap:var(--sp-3);
    padding:var(--sp-2) var(--sp-3); border:1px solid var(--color-border); border-radius:var(--r-2);
    background:linear-gradient(145deg, color-mix(in srgb, #fff 3%, transparent), color-mix(in srgb, #fff 1%, transparent));
  }
  /* glossy teardrop map-marker (classic pin) with a soft glow beneath */
  .largest-card__pin { position:relative; display:grid; place-items:center; width:44px; height:48px; }
  .largest-card__pin::after {
    content:""; position:absolute; bottom:3px; left:50%; width:22px; height:7px; transform:translateX(-50%);
    border-radius:50%; background:color-mix(in srgb, var(--lg-blue) 55%, transparent); filter:blur(5px); opacity:.7;
  }
  .largest-card__pin i {
    position:relative; width:30px; height:30px; margin-top:-4px; transform:rotate(-45deg);
    background:linear-gradient(135deg, var(--lg-blue-light) 0%, var(--lg-blue) 52%, var(--lg-blue-dark) 100%);
    border-radius:50% 50% 50% 0;
    box-shadow:inset 2px -2px 5px rgb(0 0 0 / .22), inset -2px 2px 5px rgb(255 255 255 / .45), 0 6px 14px color-mix(in srgb, var(--lg-blue) 40%, transparent);
  }
  .largest-card__pin i::before {
    content:""; position:absolute; top:50%; left:50%; width:11px; height:11px; transform:translate(-50%, -50%);
    border-radius:50%; background:radial-gradient(circle at 40% 35%, #fff, color-mix(in srgb, #fff 55%, var(--lg-blue-light)));
    box-shadow:inset 0 1px 2px rgb(0 0 0 / .2);
  }
  .largest-card__loc-copy { display:flex; min-width:0; flex-direction:column; gap:4px; }
  .largest-card__loc-copy span { color:var(--lg-blue-light); font-size:var(--fs-2xs); font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
  .largest-card__loc-copy strong { overflow:hidden; color:var(--color-ink); font-size:var(--fs-md); font-weight:720; letter-spacing:-.02em; text-overflow:ellipsis; white-space:nowrap; }
  /* a tilted, dot-textured tile shaped like a landmass (state), with a glowing
     point — evokes a mini locator map without a real tile request */
  /* the actual state silhouette (from us-states.svg), injected + wired to the
     largest-hail report's state, with a glow dot at its centroid */
  .largest-card__mini-map { position:relative; width:100%; height:56px; display:grid; place-items:center; }
  .largest-card__mini-map svg { display:block; width:100%; height:100%; overflow:visible; }
  .largest-card__mini-map .hm-state { fill:color-mix(in srgb, var(--lg-blue) 26%, var(--color-surface)); stroke:var(--lg-blue-light); stroke-width:1; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 5px color-mix(in srgb, var(--lg-blue) 55%, transparent)); }
  .largest-card__mini-map .hm-dot { fill:#fff; filter:drop-shadow(0 0 5px color-mix(in srgb, var(--lg-blue) 90%, transparent)); }
  @media (max-width: 620px) {
    .largest-card__location { grid-template-columns:44px minmax(0, 1fr); }
    .largest-card__mini-map { display:none; }
  }
  @media (prefers-reduced-motion: reduce) { .largest-card, .largest-card__info { transition:none; } }

  /* ---- active-state-card: the "Most active state" hero — a big state code
     over radar rings, a state pill, and a US map with the active state lit.
     Blue scoped to --sev-proj60. ---- */
  .active-state-card {
    --as-blue:var(--sev-proj60);
    --as-blue-light:color-mix(in srgb, var(--sev-proj60) 50%, #fff);
    --as-blue-dark:color-mix(in srgb, var(--sev-proj60) 58%, #000);
    position:relative; overflow:hidden; isolation:isolate;
    display:flex; flex-direction:column; gap:var(--sp-3); min-width:0;
    padding:var(--sp-5); color:var(--color-ink);
    background:
      radial-gradient(circle at 16% 8%, color-mix(in srgb, var(--as-blue) 12%, transparent), transparent 26%),
      radial-gradient(circle at 55% 52%, color-mix(in srgb, var(--as-blue) 8%, transparent), transparent 32%),
      linear-gradient(150deg, var(--color-surface-2) 0%, var(--color-surface) 60%);
    border:1px solid var(--color-border); border-radius:var(--r-2); box-shadow:var(--elev-2);
    transition:border-color var(--motion-med) var(--ease), box-shadow var(--motion-med) var(--ease), transform var(--motion-med) var(--ease);
  }
  @media (hover:hover) { .active-state-card:hover { transform:translateY(-4px); border-color:color-mix(in srgb, var(--as-blue) 42%, var(--color-border)); box-shadow:var(--elev-3); } }
  .active-state-card__ambient { position:absolute; z-index:-1; right:-90px; bottom:90px; width:260px; height:260px; pointer-events:none; border-radius:var(--r-full); background:color-mix(in srgb, var(--as-blue) 12%, transparent); filter:blur(70px); }
  .active-state-card > *:not(.active-state-card__ambient) { position:relative; }
  .active-state-card__header { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-3); }
  .active-state-card__heading { display:flex; align-items:center; gap:var(--sp-3); min-width:0; }
  .active-state-card__icon {
    display:grid; place-items:center; flex:none; width:52px; height:52px; border-radius:var(--r-2); color:#f5fbff;
    background:radial-gradient(circle at center, color-mix(in srgb, var(--as-blue) 20%, transparent), transparent 55%), linear-gradient(145deg, color-mix(in srgb, var(--as-blue) 16%, transparent), color-mix(in srgb, var(--as-blue) 3%, transparent));
    border:1px solid color-mix(in srgb, var(--as-blue) 40%, transparent);
    box-shadow:inset 0 1px 0 rgb(255 255 255 / .08), 0 0 24px color-mix(in srgb, var(--as-blue) 14%, transparent);
  }
  .active-state-card__icon svg { width:28px; height:28px; }
  .active-state-card__eyebrow { margin:0 0 3px; color:var(--color-ink-muted); font-size:var(--fs-2xs); font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
  .active-state-card__title { margin:0; color:var(--color-ink); font-size:var(--fs-lg); font-weight:800; line-height:1; letter-spacing:-.03em; text-transform:uppercase; }
  .active-state-card__subtitle { margin:5px 0 0; color:var(--color-ink-muted); font-size:var(--fs-xs); font-weight:520; }
  .active-state-card__accent-line { display:block; width:64px; height:3px; margin-top:9px; border-radius:var(--r-full); background:linear-gradient(90deg, var(--as-blue-light), var(--as-blue), transparent); box-shadow:0 0 12px color-mix(in srgb, var(--as-blue) 30%, transparent); }
  .active-state-card__info {
    display:grid; place-items:center; flex:none; width:34px; height:34px; color:var(--color-ink-muted); text-decoration:none;
    background:color-mix(in srgb, #fff 2.5%, transparent); border:1px solid color-mix(in srgb, var(--as-blue) 28%, transparent); border-radius:var(--r-full);
    transition:color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
  }
  .active-state-card__info svg { width:17px; height:17px; }
  .active-state-card__info:hover { color:var(--color-ink); background:color-mix(in srgb, var(--as-blue) 10%, transparent); border-color:color-mix(in srgb, var(--as-blue) 42%, transparent); transform:translateY(-1px); }
  .active-state-card__info:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
  .active-state-card__main { position:relative; display:flex; flex-direction:column; align-items:center; flex:1 1 auto; min-height:0; padding-top:var(--sp-4); }
  .active-state-card__radar { position:absolute; top:8px; left:50%; width:300px; height:300px; pointer-events:none; transform:translateX(-50%); }
  .active-state-card__radar span { position:absolute; inset:50% auto auto 50%; border:1px solid color-mix(in srgb, var(--as-blue) 14%, transparent); border-radius:50%; transform:translate(-50%, -50%); }
  .active-state-card__radar span:nth-child(1) { width:100px; height:100px; }
  .active-state-card__radar span:nth-child(2) { width:170px; height:170px; }
  .active-state-card__radar span:nth-child(3) { width:235px; height:235px; }
  .active-state-card__radar span:nth-child(4) { width:300px; height:300px; border-style:dotted; border-width:2px; }
  .active-state-card__state-code {
    position:relative; z-index:2; color:var(--color-ink);
    font-size:clamp(3rem, 7vw, 4.4rem); font-weight:850; line-height:.8; letter-spacing:-.07em;
    background:linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--as-blue-light) 40%, #fff) 44%, color-mix(in srgb, var(--as-blue-light) 72%, #fff) 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 10px 22px rgb(0 0 0 / .3));
  }
  .active-state-card__state-pill {
    position:relative; z-index:3; display:inline-flex; align-items:center; gap:8px; margin-top:var(--sp-3); padding:7px 14px;
    color:var(--color-ink); border-radius:var(--r-full);
    background:linear-gradient(180deg, color-mix(in srgb, #fff 4.5%, transparent), color-mix(in srgb, #fff 1.5%, transparent));
    border:1px solid color-mix(in srgb, var(--as-blue) 46%, transparent);
    box-shadow:0 0 0 4px color-mix(in srgb, var(--as-blue) 5%, transparent), inset 0 1px 0 rgb(255 255 255 / .05);
    font-size:var(--fs-sm); font-weight:720;
  }
  .active-state-card__state-pill svg { width:17px; height:17px; color:var(--as-blue-light); }
  .active-state-card__map { position:relative; z-index:2; width:100%; max-width:320px; margin-top:var(--sp-3); }
  .active-state-card__map svg { display:block; width:100%; height:auto; overflow:visible; }
  /* AK/HI overlap the contiguous-US crop box in the lower-left — hide them so
     the cropped map stays clean (hail data is contiguous-US only anyway) */
  .active-state-card__map svg #ak, .active-state-card__map svg #hi { display:none; }
  .active-state-card__map svg path { fill:color-mix(in srgb, var(--as-blue) 8%, var(--color-surface)); stroke:color-mix(in srgb, var(--as-blue) 22%, transparent); stroke-width:1; transition:fill var(--motion-med) var(--ease); }
  .active-state-card__map svg path.hm-active { fill:var(--as-blue); stroke:var(--as-blue-light); stroke-width:1.5; filter:drop-shadow(0 0 8px color-mix(in srgb, var(--as-blue) 70%, transparent)); }
  .active-state-card__map .hm-pulse { fill:none; stroke:color-mix(in srgb, var(--as-blue) 30%, transparent); stroke-width:2; }
  .active-state-card__map .hm-pulse--0 { opacity:.8; } .active-state-card__map .hm-pulse--1 { opacity:.5; } .active-state-card__map .hm-pulse--2 { opacity:.28; }
  .active-state-card__map .hm-dot { fill:var(--as-blue-light); filter:drop-shadow(0 0 8px color-mix(in srgb, var(--as-blue) 80%, transparent)); }
  .active-state-card__footer {
    display:grid; grid-template-columns:44px minmax(0, 1fr) auto; align-items:center; gap:var(--sp-3);
    padding:var(--sp-2) var(--sp-3); border:1px solid var(--color-border); border-radius:var(--r-2);
    background:linear-gradient(145deg, color-mix(in srgb, #fff 3%, transparent), color-mix(in srgb, #fff 1%, transparent));
  }
  .active-state-card__more {
    display:grid; place-items:center; width:44px; height:44px; color:var(--as-blue); border-radius:var(--r-full);
    background:linear-gradient(145deg, color-mix(in srgb, var(--as-blue) 12%, transparent), color-mix(in srgb, var(--as-blue) 2%, transparent));
    border:1px solid color-mix(in srgb, var(--as-blue) 40%, transparent);
  }
  .active-state-card__more svg { width:22px; height:22px; }
  .active-state-card__report-count { display:flex; align-items:baseline; gap:10px; min-width:0; }
  .active-state-card__report-count strong { color:var(--as-blue); font-size:clamp(2.2rem, 6vw, 3.2rem); font-weight:840; line-height:1; letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
  .active-state-card__report-count span { color:var(--color-ink-muted); font-size:var(--fs-2xs); font-weight:780; letter-spacing:.1em; text-transform:uppercase; }
  .active-state-card__trend { color:var(--as-blue-dark); display:grid; place-items:center; }
  .active-state-card__trend svg { width:30px; height:30px; }
  @media (max-width: 620px) { .active-state-card__footer { grid-template-columns:44px minmax(0, 1fr); } .active-state-card__trend { display:none; } }
  @media (prefers-reduced-motion: reduce) { .active-state-card, .active-state-card__info, .active-state-card__more { transition:none; } }

  /* ---- warn-card: "Active warnings" alert hero. Calm by default; when live
     warnings exist (.is-active) it turns red and the radar pulses. ---- */
  .warn-card {
    --wc-red:var(--sev-3);
    --wc-red-light:color-mix(in srgb, var(--sev-3) 52%, #fff);
    --wc-ok:var(--color-ok);
    position:relative; overflow:hidden; isolation:isolate;
    display:flex; flex-direction:column; gap:var(--sp-3); min-width:0;
    padding:var(--sp-5); color:var(--color-ink);
    background:linear-gradient(150deg, var(--color-surface-2) 0%, var(--color-surface) 60%);
    border:1px solid var(--color-border); border-radius:var(--r-2); box-shadow:var(--elev-2);
    transition:border-color var(--motion-med) var(--ease), box-shadow var(--motion-med) var(--ease), transform var(--motion-med) var(--ease);
  }
  .warn-card.is-active { background:radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--wc-red) 10%, transparent), transparent 30%), linear-gradient(150deg, var(--color-surface-2) 0%, var(--color-surface) 60%); border-color:color-mix(in srgb, var(--wc-red) 30%, var(--color-border)); }
  @media (hover:hover) { .warn-card:hover { transform:translateY(-4px); box-shadow:var(--elev-3); } }
  .warn-card > * { position:relative; }
  .warn-card__header { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-3); }
  .warn-card__brand { display:flex; align-items:center; gap:var(--sp-3); min-width:0; }
  .warn-card__icon {
    display:grid; place-items:center; flex:none; width:52px; height:52px; border-radius:var(--r-2); color:var(--color-ink-muted);
    background:color-mix(in srgb, #fff 4%, transparent); border:1px solid var(--color-border);
    transition:color var(--motion-med) var(--ease), border-color var(--motion-med) var(--ease), background var(--motion-med) var(--ease);
  }
  .warn-card.is-active .warn-card__icon { color:var(--wc-red-light); background:color-mix(in srgb, var(--wc-red) 12%, transparent); border-color:color-mix(in srgb, var(--wc-red) 34%, transparent); box-shadow:0 0 22px color-mix(in srgb, var(--wc-red) 16%, transparent); }
  .warn-card__icon svg { width:28px; height:28px; }
  .warn-card__eyebrow { margin:0 0 3px; color:var(--color-ink-muted); font-size:var(--fs-2xs); font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
  .warn-card__title { margin:0; color:var(--color-ink); font-size:var(--fs-lg); font-weight:800; line-height:1; letter-spacing:-.03em; text-transform:uppercase; }
  .warn-card__accent-line { display:block; width:64px; height:3px; margin-top:9px; border-radius:var(--r-full); background:linear-gradient(90deg, var(--color-border-strong), transparent); }
  .warn-card.is-active .warn-card__accent-line { background:linear-gradient(90deg, var(--wc-red-light), var(--wc-red), transparent); box-shadow:0 0 12px color-mix(in srgb, var(--wc-red) 30%, transparent); }
  .warn-card__info { display:grid; place-items:center; flex:none; width:34px; height:34px; color:var(--color-ink-muted); text-decoration:none; background:color-mix(in srgb, #fff 2.5%, transparent); border:1px solid var(--color-border); border-radius:var(--r-full); transition:color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease); }
  .warn-card__info svg { width:17px; height:17px; }
  .warn-card__info:hover { color:var(--color-ink); border-color:var(--color-border-strong); transform:translateY(-1px); }
  .warn-card__info:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
  .warn-card__main { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1 1 auto; min-height:0; gap:var(--sp-3); }
  .warn-radar { position:absolute; top:50%; left:50%; width:250px; height:250px; pointer-events:none; transform:translate(-50%, -50%); }
  .warn-radar span { position:absolute; inset:50% auto auto 50%; border:1px solid color-mix(in srgb, var(--color-border-strong) 55%, transparent); border-radius:50%; transform:translate(-50%, -50%); }
  .warn-radar span:nth-child(1) { width:90px; height:90px; } .warn-radar span:nth-child(2) { width:160px; height:160px; } .warn-radar span:nth-child(3) { width:230px; height:230px; }
  .warn-card.is-active .warn-radar span { border-color:color-mix(in srgb, var(--wc-red) 22%, transparent); }
  .warn-card.is-active .warn-radar span:nth-child(1) { animation:warn-pulse 2.4s var(--ease) infinite; }
  .warn-card__count { position:relative; z-index:1; color:var(--color-ink-muted); font-size:clamp(3.4rem, 8vw, 5rem); font-weight:850; line-height:.8; letter-spacing:-.06em; font-variant-numeric:tabular-nums; }
  .warn-card.is-active .warn-card__count { color:var(--wc-red); background:linear-gradient(180deg, var(--wc-red-light), var(--wc-red)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 10px 22px color-mix(in srgb, var(--wc-red) 18%, transparent)); }
  .warn-card__status { position:relative; z-index:1; display:inline-flex; align-items:center; gap:7px; padding:5px 13px; border-radius:var(--r-full); font-size:var(--fs-sm); font-weight:750; color:var(--wc-ok); background:color-mix(in srgb, var(--wc-ok) 10%, transparent); border:1px solid color-mix(in srgb, var(--wc-ok) 24%, transparent); }
  .warn-card.is-active .warn-card__status { color:var(--wc-red-light); background:color-mix(in srgb, var(--wc-red) 11%, transparent); border-color:color-mix(in srgb, var(--wc-red) 28%, transparent); }
  .warn-card__status-dot { width:8px; height:8px; border-radius:50%; background:var(--wc-ok); box-shadow:0 0 0 4px color-mix(in srgb, var(--wc-ok) 14%, transparent); }
  .warn-card.is-active .warn-card__status-dot { background:var(--wc-red); box-shadow:0 0 0 4px color-mix(in srgb, var(--wc-red) 16%, transparent); }
  .warn-card__status.offline { color:var(--color-ink-muted); background:transparent; border-color:var(--color-border); }
  .warn-card__status.offline .warn-card__status-dot { background:var(--color-ink-muted); box-shadow:none; }
  .warn-card__foot {
    display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) var(--sp-3); border:1px solid var(--color-border); border-radius:var(--r-2);
    background:linear-gradient(145deg, color-mix(in srgb, #fff 3%, transparent), color-mix(in srgb, #fff 1%, transparent));
  }
  .warn-card__foot-icon { display:grid; place-items:center; flex:none; width:38px; height:38px; border-radius:var(--r-full); color:var(--color-ink-muted); background:color-mix(in srgb, #fff 2.5%, transparent); border:1px solid var(--color-border); }
  .warn-card.is-active .warn-card__foot-icon { color:var(--wc-red-light); }
  .warn-card__foot-icon svg { width:19px; height:19px; }
  .warn-card__foot-copy { min-width:0; }
  .warn-card__foot-copy p { margin:0; color:var(--color-ink-muted); font-size:var(--fs-2xs); font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
  .warn-card__foot-copy strong { display:block; color:var(--color-ink); font-size:var(--fs-md); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  @keyframes warn-pulse { 0% { opacity:.9; transform:translate(-50%,-50%) scale(.9); } 70% { opacity:0; transform:translate(-50%,-50%) scale(1.9); } 100% { opacity:0; } }

  /* ---- paths-card: "Projected paths" storm-nowcast hero (blue). ---- */
  .paths-card {
    --pc-blue:var(--sev-proj60);
    --pc-blue-light:color-mix(in srgb, var(--sev-proj60) 50%, #fff);
    position:relative; overflow:hidden; isolation:isolate;
    display:flex; flex-direction:column; gap:var(--sp-3); min-width:0;
    padding:var(--sp-5); color:var(--color-ink);
    background:radial-gradient(circle at 16% 8%, color-mix(in srgb, var(--pc-blue) 10%, transparent), transparent 26%), linear-gradient(150deg, var(--color-surface-2) 0%, var(--color-surface) 60%);
    border:1px solid var(--color-border); border-radius:var(--r-2); box-shadow:var(--elev-2);
    transition:border-color var(--motion-med) var(--ease), box-shadow var(--motion-med) var(--ease), transform var(--motion-med) var(--ease);
  }
  @media (hover:hover) { .paths-card:hover { transform:translateY(-4px); border-color:color-mix(in srgb, var(--pc-blue) 42%, var(--color-border)); box-shadow:var(--elev-3); } }
  .paths-card > * { position:relative; }
  .paths-card__header { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-3); }
  .paths-card__brand { display:flex; align-items:center; gap:var(--sp-3); min-width:0; }
  .paths-card__icon { display:grid; place-items:center; flex:none; width:52px; height:52px; border-radius:var(--r-2); color:var(--pc-blue-light); background:linear-gradient(145deg, color-mix(in srgb, var(--pc-blue) 16%, transparent), color-mix(in srgb, var(--pc-blue) 3%, transparent)); border:1px solid color-mix(in srgb, var(--pc-blue) 38%, transparent); box-shadow:inset 0 1px 0 rgb(255 255 255 / .08), 0 0 24px color-mix(in srgb, var(--pc-blue) 12%, transparent); }
  .paths-card__icon svg { width:28px; height:28px; }
  .paths-card__eyebrow { margin:0 0 3px; color:var(--color-ink-muted); font-size:var(--fs-2xs); font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
  .paths-card__title { margin:0; color:var(--color-ink); font-size:var(--fs-lg); font-weight:800; line-height:1; letter-spacing:-.03em; text-transform:uppercase; }
  .paths-card__subtitle { margin:5px 0 0; color:var(--color-ink-muted); font-size:var(--fs-xs); font-weight:520; }
  .paths-card__accent-line { display:block; width:64px; height:3px; margin-top:9px; border-radius:var(--r-full); background:linear-gradient(90deg, var(--pc-blue-light), var(--pc-blue), transparent); box-shadow:0 0 12px color-mix(in srgb, var(--pc-blue) 30%, transparent); }
  .paths-card__info { display:grid; place-items:center; flex:none; width:34px; height:34px; color:var(--color-ink-muted); text-decoration:none; background:color-mix(in srgb, #fff 2.5%, transparent); border:1px solid color-mix(in srgb, var(--pc-blue) 28%, transparent); border-radius:var(--r-full); transition:color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease); }
  .paths-card__info svg { width:17px; height:17px; }
  .paths-card__info:hover { color:var(--color-ink); border-color:color-mix(in srgb, var(--pc-blue) 42%, transparent); transform:translateY(-1px); }
  .paths-card__info:focus-visible, .paths-card__cta:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
  .paths-card__main { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1 1 auto; min-height:0; gap:var(--sp-2); }
  .paths-card__compass { position:relative; width:150px; height:150px; display:grid; place-items:center; margin-bottom:var(--sp-2); }
  .paths-card__compass::before, .paths-card__compass::after { content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border:1px solid color-mix(in srgb, var(--pc-blue) 16%, transparent); border-radius:50%; }
  .paths-card__compass::before { width:150px; height:150px; } .paths-card__compass::after { width:96px; height:96px; }
  .paths-card__arrow { position:relative; z-index:1; width:64px; height:64px; color:var(--pc-blue-light); transform:rotate(0deg); transition:transform var(--motion-slow) var(--ease); filter:drop-shadow(0 0 10px color-mix(in srgb, var(--pc-blue) 55%, transparent)); }
  .paths-card__arrow svg { width:100%; height:100%; }
  .paths-card__count { position:relative; z-index:1; color:var(--color-ink); font-size:clamp(2.6rem, 6vw, 3.8rem); font-weight:850; line-height:.85; letter-spacing:-.05em; font-variant-numeric:tabular-nums; background:linear-gradient(180deg, #fff, color-mix(in srgb, var(--pc-blue-light) 55%, #fff)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
  .paths-card__meta { position:relative; z-index:1; color:var(--color-ink-muted); font-size:var(--fs-sm); font-weight:650; }
  .paths-card__meta b { color:var(--pc-blue-light); font-weight:800; }
  .paths-card__cta {
    display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); width:100%; min-height:48px; padding:8px 10px 8px var(--sp-4); cursor:pointer;
    color:var(--color-ink); font:inherit; font-size:var(--fs-sm); font-weight:750; text-align:start;
    background:color-mix(in srgb, var(--pc-blue) 10%, transparent); border:1px solid color-mix(in srgb, var(--pc-blue) 30%, transparent); border-radius:var(--r-2);
    transition:background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
  }
  .paths-card__cta:hover:not(:disabled) { background:color-mix(in srgb, var(--pc-blue) 18%, transparent); border-color:color-mix(in srgb, var(--pc-blue) 44%, transparent); }
  .paths-card__cta:disabled { color:var(--color-ink-muted); background:color-mix(in srgb, #fff 2%, transparent); border-color:var(--color-border); cursor:default; }
  .paths-card__cta-icon { display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:var(--r-1); color:var(--pc-blue-light); background:color-mix(in srgb, var(--pc-blue) 14%, transparent); }
  .paths-card__cta-icon svg { width:17px; height:17px; }
  @media (prefers-reduced-motion: reduce) { .warn-card, .paths-card, .warn-card__icon, .paths-card__arrow, .paths-card__cta { transition:none; } .warn-card.is-active .warn-radar span { animation:none; } }

  .detect-card {
    position:absolute; top:var(--sp-3); inset-inline-start:var(--sp-3); z-index:var(--z-overlay);
    width:min(272px, calc(100% - 24px)); max-height:calc(100% - 24px); overflow:auto;
    padding:var(--sp-4); border-radius:var(--r-2);
    background:color-mix(in srgb, var(--color-surface-2) 86%, transparent);
    border:1px solid var(--color-border);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    box-shadow:var(--elev-2);
  }
  .detect-card h2 { font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--color-ink); margin-bottom:var(--sp-2); }
  .kpi-line {
    display:flex; align-items:center; gap:var(--sp-2); min-height:34px;
    font-size:var(--fs-sm); color:var(--color-ink);
  }
  .kpi-line .icon { width:22px; height:22px; border-radius:var(--r-1); display:grid; place-items:center; background:color-mix(in srgb, var(--color-accent) 16%, transparent); }
  .kpi-line .count { margin-inline-start:auto; }

  /* mutual exclusion: only one panel-tier overlay owns the map at a time —
     the detection HUD yields whenever a bigger overlay is open */
  body:has(#panel.open) .detect-card,
  body:has(.replay-panel.open) .detect-card,
  main:has(.path-card) .detect-card { display:none; }

  /* ---- (h) THE BIG ONE: path-card / report / kpi-grid / replay / path-math,
     re-tokenized to the dark theme. Same class names + structural rules;
     only colors/radii/shadows moved off literals onto tokens. ---- */

  /* right slide-in drawer (not a floating popup): docks to the map's right edge,
     full height, slides + fades in from the right. Sized as a readout panel. */
  .path-card {
    position:absolute; inset-block:0; inset-inline-end:0;
    width:min(440px, 100%); max-width:100%; overflow:auto;
    padding:var(--sp-5); font-size:var(--fs-md); z-index:var(--z-panel);
    display:grid; gap:var(--sp-4); align-content:start; color:var(--color-ink);
    background:color-mix(in srgb, var(--color-surface-2) 96%, transparent);
    border:0; border-inline-start:1px solid var(--color-border); box-shadow:var(--elev-3);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    transform:translateX(100%); opacity:0;
    transition:transform var(--motion-med) var(--ease), opacity var(--motion-med) var(--ease);
  }
  .path-card.open { transform:translateX(0); opacity:1; }
  @media (prefers-reduced-motion: reduce) { .path-card { transition:none; } }
  .path-card h2, .path-card h3 { margin:0; color:var(--color-ink); letter-spacing:0; }
  .path-card h2 { font-size:1.75rem; line-height:1; font-weight:850; padding-inline-end:72px; overflow-wrap:anywhere; }
  .path-card h3 { font-size:var(--fs-sm); line-height:1.2; font-weight:850; text-transform:uppercase; }
  .path-card p { margin:0; }
  .path-card-header { display:grid; gap:var(--sp-3); align-items:start; padding:0 72px 0 0; background:transparent; border:0; }
  .path-meta-row { display:flex; align-items:flex-start; gap:var(--sp-3); color:var(--color-ink-muted); font-size:var(--fs-sm); line-height:1.28; }
  .path-location-row { font-size:var(--fs-sm); }
  .path-icon { width:28px; min-width:28px; height:28px; display:inline-grid; place-items:center; color:var(--color-ink-muted); font-weight:850; line-height:1; font-size:20px; }
  .path-icon .icon { width:20px; height:20px; }
  .path-section {
    border:1px solid var(--color-border); border-radius:var(--r-2); padding:var(--sp-4);
    background:color-mix(in srgb, var(--color-surface) 60%, transparent); display:grid; gap:var(--sp-4);
  }
  .path-section-title { display:flex; align-items:center; gap:var(--sp-3); }
  .path-section-note, .path-card-note { color:var(--color-ink-muted); font-size:var(--fs-md); line-height:1.5; }
  .path-empty { background:color-mix(in srgb, var(--color-surface) 40%, transparent); }
  .path-empty p { color:var(--color-ink-muted); line-height:1.45; }

  /* radar alert section: sev-2 (amber/orange) tint */
  .path-radar-card {
    border-color:color-mix(in srgb, var(--sev-2) 45%, var(--color-border));
    background:linear-gradient(180deg, color-mix(in srgb, var(--sev-2) 14%, var(--color-surface)), var(--color-surface));
    box-shadow:inset 4px 0 0 var(--sev-2);
  }
  .path-radar-card h3, .path-radar-card .path-icon-alert { color:var(--sev-2); }
  .path-icon-alert { color:var(--color-accent-ink); background:var(--sev-2); border-radius:var(--r-1); border:1px solid color-mix(in srgb, var(--sev-2) 70%, black); font-size:18px; }
  .path-radar-value { display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap; color:var(--sev-2); }
  .path-radar-value strong { font-size:2.25rem; line-height:.92; font-weight:850; letter-spacing:0; }
  .path-radar-value span { max-width:170px; color:var(--sev-2); font-size:var(--fs-md); line-height:1.12; }
  .path-confidence-badge {
    justify-self:start; display:inline-flex; align-items:center; min-height:36px;
    padding:5px 16px; border-radius:var(--r-full); border:1px solid color-mix(in srgb, var(--sev-2) 34%, transparent);
    color:var(--sev-2); background:color-mix(in srgb, var(--color-surface) 74%, transparent); font-size:var(--fs-xs); font-weight:850;
    text-transform:uppercase; letter-spacing:0;
  }
  .path-projected-alert {
    display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4);
    border:1px solid color-mix(in srgb, var(--sev-2) 45%, var(--color-border)); border-radius:var(--r-2);
    background:color-mix(in srgb, var(--sev-2) 14%, var(--color-surface)); color:var(--sev-2); font-weight:800;
  }

  /* physics section: neutral ink, accent-colored figures */
  .path-physics-card { background:color-mix(in srgb, var(--color-surface) 70%, transparent); border-color:var(--color-border); }
  .path-physics-card h3, .path-icon-physics { color:var(--color-accent); }
  .path-physics-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--sp-5); }
  .path-stat { display:grid; gap:var(--sp-2); min-width:0; }
  .path-stat + .path-stat { border-inline-start:1px solid var(--color-border); padding-inline-start:var(--sp-5); }
  .path-stat span { color:var(--color-ink-muted); font-size:var(--fs-md); }
  .path-stat strong { color:var(--color-accent); font-size:1.5rem; line-height:1.05; overflow-wrap:anywhere; }

  /* impact estimate: sev-mesh (violet) section frame, per-kpi accent */
  .path-impact-section { background:color-mix(in srgb, var(--sev-mesh) 8%, var(--color-surface)); border-color:color-mix(in srgb, var(--sev-mesh) 32%, var(--color-border)); }
  .path-impact-section h3, .path-icon-impact { color:var(--sev-mesh); }
  .path-kpi-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--sp-3); }
  .path-kpi {
    min-height:88px; border:1px solid var(--color-border); border-radius:var(--r-2); padding:var(--sp-4);
    display:grid; align-content:center; justify-items:center; text-align:center; gap:3px;
    background:var(--color-surface); color:var(--color-ink);
  }
  .path-kpi span { color:var(--color-ink-muted); font-size:var(--fs-sm); font-weight:750; text-transform:uppercase; }
  .path-kpi strong { font-size:1.375rem; line-height:1.05; color:var(--color-ink); overflow-wrap:anywhere; }
  .path-kpi small { color:var(--color-ink); font-size:var(--fs-md); line-height:1; }
  .path-kpi-wind { background:color-mix(in srgb, var(--sev-2) 12%, var(--color-surface)); border-color:color-mix(in srgb, var(--sev-2) 40%, var(--color-border)); }
  .path-kpi-wind span { color:var(--sev-2); }
  .path-kpi-energy { background:color-mix(in srgb, var(--sev-mesh) 12%, var(--color-surface)); border-color:color-mix(in srgb, var(--sev-mesh) 40%, var(--color-border)); }
  .path-kpi-energy span, .path-kpi-energy strong { color:var(--sev-mesh); }
  .path-kpi-severity { background:color-mix(in srgb, var(--sev-1) 14%, var(--color-surface)); border-color:color-mix(in srgb, var(--sev-1) 45%, var(--color-border)); }
  .path-kpi-severity span { color:var(--sev-1); }

  /* likelihood: color-ok tint */
  .path-likelihood-card { background:color-mix(in srgb, var(--color-ok) 8%, var(--color-surface)); border-color:color-mix(in srgb, var(--color-ok) 32%, var(--color-border)); }
  .path-likelihood-card h3, .path-icon-likelihood { color:var(--color-ok); }
  .path-likelihood-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .path-likelihood-item { display:grid; justify-items:center; text-align:center; gap:var(--sp-2); min-width:0; padding:0 var(--sp-3); border-inline-start:1px solid var(--color-border); }
  .path-likelihood-item:first-child { border-inline-start:0; }
  .path-likelihood-item > span { color:var(--color-ink-muted); font-size:var(--fs-md); }
  .path-status { display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); font-size:var(--fs-md); color:var(--color-ink); }
  .path-status .path-icon { width:28px; min-width:28px; height:28px; border-radius:var(--r-full); font-size:18px; border:2px solid currentColor; }
  .path-status-good .path-icon { color:var(--color-ok); }
  .path-status-warn .path-icon { color:var(--sev-2); }
  .path-status-bad .path-icon { color:var(--color-danger); }

  .path-legend-section { padding-top:var(--sp-4); padding-bottom:var(--sp-4); border-color:transparent; background:transparent; }
  .path-legend-section .path-section-title h3 { color:var(--color-ink); font-size:var(--fs-sm); }
  .path-legend-section .path-icon { color:var(--color-ink-muted); }
  .path-disclaimer {
    display:grid; grid-template-columns:32px minmax(0, 1fr); gap:var(--sp-3);
    padding-top:var(--sp-4); border-top:1px solid var(--color-border); color:var(--color-ink-muted);
    font-size:var(--fs-md); line-height:1.45;
  }
  .path-disclaimer .path-icon { width:32px; min-width:32px; height:32px; border:2px solid var(--color-border-strong); border-radius:var(--r-full); color:var(--color-ink-muted); font-style:normal; }

  /* graduated swath ramp (legend + hail-path card) */
  .band-ramp-wrap { margin-top:var(--sp-2); }
  .band-ramp-label { color:var(--color-ink-muted); }
  .band-ramp { display:flex; margin-top:2px; }
  .band-chip { display:inline-block; width:14px; height:10px; }
  .band-ramp .band-chip:first-child { border-radius:var(--r-1) 0 0 var(--r-1); }
  .band-ramp .band-chip:last-child { border-radius:0 var(--r-1) var(--r-1) 0; }
  .band-ramp-ends { display:flex; justify-content:space-between; width:126px; color:var(--color-ink-muted); font-size:10px; }
  .band-ramp-card { flex-wrap:wrap; gap:var(--sp-2); }
  .band-chip-labeled {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    min-width:74px; min-height:32px; padding:4px 10px; border-radius:var(--r-full);
    color:var(--badge-ink-light); font-weight:750; font-size:var(--fs-sm);
    border:1px solid rgb(255 255 255 / .34); box-shadow:var(--elev-1);
  }
  .band-chip-labeled .band-chip { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

  /* strike-forecast math readout, moved to bottom-LEFT: bottom-right is
     reserved exclusively for .map-legal / ODbL attribution */
  .path-math {
    position:absolute; bottom:calc(var(--sp-2) + env(safe-area-inset-bottom, 0px) + var(--sp-4)); inset-inline-start:var(--sp-3);
    width:min(300px, calc(100% - 24px)); padding:var(--sp-2) var(--sp-3); font-size:var(--fs-xs); z-index:var(--z-overlay);
    display:none;
  }
  .path-math.open { display:block; }
  .path-math h2 { font-size:var(--fs-sm); margin-bottom:var(--sp-1); }
  .path-math-row { display:grid; grid-template-columns:42px minmax(92px, 1fr) 70px; align-items:center; gap:var(--sp-2); margin-top:var(--sp-2); }
  .path-math-bars { display:grid; gap:4px; min-width:0; }
  .path-math-track { display:block; height:8px; border-radius:var(--r-full); background:color-mix(in srgb, var(--color-border) 70%, transparent); overflow:hidden; }
  .path-math-track-intensity { height:5px; }
  .path-math-fill { display:block; width:100%; height:100%; border-radius:inherit; transform:scaleX(var(--scale, .05)); transform-origin:left center; }
  .path-math-reach { background:linear-gradient(90deg, var(--sev-proj30), var(--sev-proj60)); }
  .path-math-reach.lead-30 { background:var(--sev-proj30); }
  .path-math-reach.lead-60 { background:var(--sev-proj60); }
  .path-math-intensity { background:linear-gradient(90deg, var(--sev-1), var(--sev-2), var(--sev-3)); }
  .path-math-metrics { display:grid; justify-items:end; gap:1px; line-height:1.15; }
  .path-math-confidence { color:var(--color-ink-muted); font-size:10px; text-transform:uppercase; letter-spacing:.04em; }
  .path-math-note { margin-top:var(--sp-1); color:var(--color-ink-muted); }
  .path-math-formula { color:var(--color-ink); }

  /* hail replay panel: a solid .card, docked top-left INSIDE the map box (the
     detect-card yields to it via :has()). Clipped by main.mapzone's overflow. */
  .replay-panel {
    position:absolute; top:var(--sp-3); inset-inline-start:var(--sp-3);
    width:min(340px, calc(100% - 24px)); z-index:var(--z-panel);
    display:none;
  }
  .replay-panel.open { display:grid; gap:var(--sp-3); }
  .replay-head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); }
  .replay-head h2 { font-size:var(--fs-md); margin:0; }
  .replay-dates { display:flex; gap:var(--sp-2); }
  .replay-dates .input { flex:1; min-width:0; }
  .replay-slider { width:100%; min-height:var(--target-min); accent-color:var(--color-accent); }
  .replay-controls { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
  .replay-readout { margin-inline-start:auto; text-align:end; font-size:var(--fs-sm); line-height:1.3; }
  .replay-readout .mut { display:block; }
  .replay-ctrl-btn { font-size:15px; }
  /* replay toggle lives in the sidebar, accent-colored (it's an action) */
  /* Hail replay is a filled yellow CTA button (not a plain nav link) */
  .sidenav-link.replay-nav {
    margin:var(--sp-2) var(--sp-2) 0; padding:10px var(--sp-3); border-radius:var(--r-2);
    background:var(--color-accent); color:var(--color-accent-ink); font-weight:800;
    letter-spacing:.02em; box-shadow:0 6px 16px color-mix(in srgb, var(--color-accent) 24%, transparent);
    transition:background var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
  }
  .sidenav-link.replay-nav .icon { color:var(--color-accent-ink); }
  @media (hover:hover) { .sidenav-link.replay-nav:hover { background:color-mix(in srgb, var(--color-accent) 88%, #fff); color:var(--color-accent-ink); transform:translateY(-1px); } }
  .sidenav-link.replay-nav[aria-pressed="true"] { background:color-mix(in srgb, var(--color-accent) 78%, #000); color:var(--color-accent-ink); box-shadow:none; }
  /* map-layer toggles relocated into the sidebar (overview only; hidden if empty) */
  .sidenav-toggles { display:flex; flex-direction:column; gap:6px; padding:var(--sp-2) var(--sp-3); margin-top:var(--sp-1); }
  .sidenav-toggles:empty { display:none; }
  .sidenav-toggles-title { color:var(--color-ink-muted); font-size:var(--fs-2xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
  .sidenav-toggle { display:flex; align-items:center; gap:8px; color:var(--color-ink-muted); font-size:var(--fs-sm); cursor:pointer; min-height:28px; }
  .sidenav-toggle input { accent-color:var(--color-accent); width:16px; height:16px; flex:none; }
  .sidenav-toggle:hover { color:var(--color-ink); }

  /* report panel (#panel composes "card"; this owns layout/typography only) */
  #panel {
    position:absolute; top:var(--sp-3); inset-inline-end:var(--sp-3); width:min(560px, calc(100% - 24px));
    max-height:calc(100% - var(--sp-5)); overflow:auto; display:none; z-index:var(--z-panel);
    padding:var(--sp-5); box-shadow:var(--elev-2);
  }
  #panel.open { display:block; }
  #panel h2 { font-size:var(--fs-md); margin:0; overflow-wrap:anywhere; }
  #panel .big { font-size:var(--fs-2xl); color:var(--color-accent); font-weight:800; }
  #panel ul { list-style:none; margin-top:var(--sp-2); padding:0; }
  #panel li { padding:var(--sp-2) 0; border-top:1px solid var(--color-border); font-size:var(--fs-xs); }
  #panel .disclaimer a, #panel .agree a { color:var(--color-accent); }
  #lead, .watch-row {
    margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--color-border);
    display:flex; flex-wrap:wrap; gap:var(--sp-2);
  }
  #lead .input, .watch-row .input { flex:1; min-width:0; }

  .report-shell { display:grid; gap:var(--sp-5); }
  .report-header { display:grid; grid-template-columns:56px minmax(0, 1fr); gap:var(--sp-4); align-items:start; padding-inline-end:48px; }
  .report-pin, .report-icon {
    width:48px; height:48px; border-radius:var(--r-full); display:grid; place-items:center;
    background:color-mix(in srgb, var(--color-accent) 18%, var(--color-surface));
    border:1px solid color-mix(in srgb, var(--color-accent) 32%, var(--color-border));
    color:var(--color-accent); font-size:24px; flex:0 0 auto;
  }
  .report-title { font-size:var(--display-1); line-height:1.08; font-weight:800; letter-spacing:0; overflow-wrap:anywhere; }
  .report-subtitle { margin-top:var(--sp-2); color:var(--color-ink-muted); font-size:var(--fs-lg); line-height:1.35; overflow-wrap:anywhere; }
  .report-meta { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-4); }
  .report-section { display:grid; gap:var(--sp-3); padding-top:var(--sp-5); border-top:1px solid var(--color-border); }
  .report-info-card { display:flex; gap:var(--sp-4); align-items:flex-start; }
  .report-info-list { display:grid; gap:var(--sp-2); margin-top:var(--sp-3); color:var(--color-ink-muted); font-size:var(--fs-sm); }
  .report-info-list div { padding-top:0; border-top:0; }
  .kpi-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--sp-3); }
  .kpi-label { color:var(--color-ink-muted); font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
  .kpi-value { margin-top:var(--sp-2); font-size:var(--display-2); line-height:1; font-weight:850; letter-spacing:0; color:var(--color-ink); overflow-wrap:anywhere; }
  .kpi-value-size { font-size:var(--display-2); }
  .kpi-note { margin-top:var(--sp-2); color:var(--color-ink-muted); font-size:var(--fs-sm); line-height:1.4; }
  .kpi-highlight {
    background:linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 14%, var(--color-surface)), var(--color-surface));
    border-color:color-mix(in srgb, var(--color-accent) 38%, var(--color-border));
  }
  .kpi-highlight .kpi-label, .kpi-highlight .kpi-value { color:var(--color-accent); }
  .report-table { overflow:hidden; padding:0; }
  .report-table-title { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-4) var(--sp-4) var(--sp-3); }
  .report-table-title h3 { font-size:var(--fs-lg); line-height:1.2; }
  .report-row, .report-table-head {
    display:grid; grid-template-columns:minmax(116px, 1.2fr) minmax(64px, .7fr) minmax(76px, .8fr) minmax(62px, .7fr) 24px;
    align-items:center; gap:var(--sp-3);
  }
  .report-table-head {
    min-height:36px; padding:0 var(--sp-4); color:var(--color-ink-muted);
    font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border);
    background:color-mix(in srgb, var(--color-bg) 42%, transparent);
  }
  .report-rows { display:grid; padding:var(--sp-2); gap:var(--sp-1); }
  .report-row { min-height:56px; padding:0 var(--sp-2); border-radius:var(--r-1); font-size:var(--fs-sm); transition:background var(--motion-fast) var(--ease); }
  @media (hover:hover) { a.report-row:hover, button.report-row:hover { background:color-mix(in srgb, var(--color-accent) 8%, transparent); } }
  .report-row:focus-visible { background:color-mix(in srgb, var(--color-accent) 8%, transparent); }
  .report-chevron { color:var(--color-accent); justify-self:end; font-size:20px; line-height:1; }
  .report-footnote { padding:0 var(--sp-4) var(--sp-4); color:var(--color-ink-muted); font-size:var(--fs-sm); line-height:1.45; }
  .report-warning-card {
    display:flex; gap:var(--sp-3); align-items:flex-start;
    background:color-mix(in srgb, var(--sev-2) 8%, var(--color-surface)); border-color:color-mix(in srgb, var(--sev-2) 36%, var(--color-border));
  }
  .report-warning-card .report-icon { width:40px; height:40px; font-size:20px; background:color-mix(in srgb, var(--sev-2) 12%, transparent); color:var(--sev-2); border-color:color-mix(in srgb, var(--sev-2) 40%, var(--color-border)); }
  .report-actions { display:flex; gap:var(--sp-2); flex-wrap:wrap; }

  /* ---- (i) auth / dashboard (account.html) ---- */
  .brand-block { text-align:center; margin-bottom:var(--sp-5); }
  .brand-mark, .brand-dot {
    width:56px; height:56px; margin:0 auto var(--sp-3); border-radius:50%;
    background:radial-gradient(circle at 50% 42%, var(--color-accent) 0 34%, transparent 36%),
               radial-gradient(circle, color-mix(in srgb, var(--color-accent) 30%, transparent) 0 100%);
    border:1px solid color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
  }
  .brand-block .name { font-size:var(--fs-2xl); font-weight:800; letter-spacing:.3px; color:var(--color-ink); }
  .brand-block .name span { color:var(--color-accent); }
  .brand-block .tagline { margin-top:2px; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--color-ink-muted); }
  .under-card { display:block; text-align:center; margin-top:var(--sp-4); color:var(--color-ink-muted); font-size:var(--fs-sm); text-decoration:none; }
  @media (hover:hover) { .under-card:hover { color:var(--color-accent); } }

  .dash-head { display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; }
  .avatar {
    width:52px; height:52px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
    background:color-mix(in srgb, var(--color-accent) 20%, var(--color-surface));
    border:1px solid color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
    color:var(--color-accent); font-weight:800; font-size:22px;
  }
  .dash-head .who { flex:1; min-width:0; }
  .dash-head .who .nm { font-size:var(--fs-lg); font-weight:800; color:var(--color-ink); overflow-wrap:anywhere; }
  .dash-head .who .em { font-size:var(--fs-sm); color:var(--color-ink-muted); overflow-wrap:anywhere; }
  .dash-card h2 { font-size:var(--fs-md); color:var(--color-ink); letter-spacing:.02em; text-transform:uppercase; }
  .dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
  @media (max-width:720px) { .dash-grid { grid-template-columns:1fr; } }
  .dash-actions { display:flex; gap:var(--sp-2); flex-wrap:wrap; }

  .orders { display:grid; gap:var(--sp-2); }
  .order-row {
    display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--sp-3); align-items:center;
    padding:var(--sp-3) var(--sp-4); border:1px solid var(--color-border); border-radius:var(--r-2);
    background:color-mix(in srgb, var(--color-bg) 45%, var(--color-surface));
    transition:border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
  }
  @media (hover:hover) { .order-row:hover { border-color:color-mix(in srgb, var(--color-accent) 45%, var(--color-border)); background:color-mix(in srgb, var(--color-accent) 5%, var(--color-surface)); } }
  .order-row .addr { font-weight:700; color:var(--color-ink); overflow-wrap:anywhere; }
  .order-row .meta { margin-top:2px; color:var(--color-ink-muted); font-size:var(--fs-xs); }

  /* alert row — a link/button row, never a bare div; hover is a surface
     tint only (no translateY on non-interactive-feeling list rows) */
  .alert-row {
    display:flex; gap:var(--sp-3); align-items:flex-start; padding:var(--sp-2); border-radius:var(--r-1);
    border:1px solid transparent; text-decoration:none; color:inherit; width:100%; text-align:start; background:transparent; cursor:pointer;
    transition:background-color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
  }
  @media (hover:hover) { .alert-row:hover { border-color:var(--color-border); background:var(--color-surface-2); } }
  .alert-row:focus-visible { border-color:var(--color-border); background:var(--color-surface-2); }
  .alert-ico { width:30px; height:30px; border-radius:var(--r-1); display:grid; place-items:center; font-size:14px; flex:0 0 auto; }
  .alert-row--warn .alert-ico, .alert-ico.warn { background:color-mix(in srgb, var(--sev-3) 24%, transparent); color:var(--sev-3); }
  .alert-row--rep .alert-ico, .alert-ico.rep { background:color-mix(in srgb, var(--sev-2) 24%, transparent); color:var(--sev-2); }
  .alert-row .t { font-size:var(--fs-sm); font-weight:700; color:var(--color-ink); line-height:1.25; overflow-wrap:anywhere; }
  .alert-row .s { font-size:var(--fs-xs); color:var(--color-ink-muted); }
  .alert-row .when { margin-inline-start:auto; font-size:var(--fs-xs); color:var(--color-ink-muted); white-space:nowrap; }

  /* ---- (j) chart primitives ---- */
  .donut-wrap { display:grid; grid-template-columns:120px minmax(0,1fr); gap:var(--sp-3); align-items:center; }
  .donut-legend { display:grid; gap:var(--sp-2); font-size:var(--fs-sm); }
  .donut-legend .row { display:flex; align-items:center; gap:var(--sp-2); }
  .donut-legend .row b { margin-inline-start:auto; }
  .dl-dot { width:10px; height:10px; border-radius:50%; }

  .insight-card h2 { font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--color-ink); }
  .insight-card h2 .sub { display:block; margin-top:2px; letter-spacing:0; text-transform:none; font-weight:600; color:var(--color-ink-muted); }
  .rail-card h2 { display:flex; align-items:baseline; gap:var(--sp-2); font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--color-ink); }
  .rail-card h2 .sub { margin-inline-start:auto; letter-spacing:0; text-transform:none; font-weight:600; font-size:var(--fs-xs); color:var(--color-ink-muted); }
  .bignum { font-size:var(--display-2); line-height:1; font-weight:850; color:var(--color-ink); }
  .bignum small { display:block; margin-top:4px; font-size:var(--fs-xs); font-weight:600; color:var(--color-ink-muted); }

  .risk-row { display:grid; grid-template-columns:22px minmax(0,1fr) 44px; gap:var(--sp-2); align-items:center; font-size:var(--fs-sm); }
  .risk-row .rank { width:22px; height:22px; border-radius:var(--r-1); display:grid; place-items:center; background:color-mix(in srgb, var(--color-bg) 55%, var(--color-surface)); border:1px solid var(--color-border); font-size:var(--fs-xs); font-weight:800; }
  .risk-row .pct { text-align:end; font-weight:800; }
  .risk-bar { grid-column:2 / 4; height:5px; border-radius:var(--r-full); background:color-mix(in srgb, var(--color-border) 60%, transparent); overflow:hidden; }
  .risk-bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--sev-1), var(--sev-2), var(--sev-3)); transform-origin:left; }

  .insight-line { display:flex; gap:var(--sp-3); align-items:flex-start; font-size:var(--fs-sm); color:var(--color-ink); line-height:1.35; }
  .insight-line .ico { width:26px; height:26px; border-radius:50%; border:1px solid var(--color-border); display:grid; place-items:center; font-size:12px; color:var(--color-accent); flex:0 0 auto; }

  .bars { display:flex; align-items:flex-end; gap:6px; height:110px; }
  .bars .bar { flex:1; display:grid; align-content:end; justify-items:center; gap:4px; min-width:0; height:100%; }
  .bars .bar i { display:block; width:100%; border-radius:var(--r-1) var(--r-1) 0 0; background:var(--sev-2); min-height:2px; }
  .bars .bar .v { font-size:var(--fs-xs); font-weight:800; }
  .bars .bar .d { font-size:10px; color:var(--color-ink-muted); white-space:nowrap; }

  .empty-note { color:var(--color-ink-muted); font-size:var(--fs-sm); }
  .empty-note.error { color:var(--color-danger); }

  .skeleton { position:relative; overflow:hidden; background:color-mix(in srgb, var(--color-border) 40%, transparent); border-radius:var(--r-1); min-height:14px; }
  .skeleton-row { min-height:14px; }
  .skeleton-card { min-height:52px; }
  @media (prefers-reduced-motion: no-preference) {
    .skeleton::after {
      content:""; position:absolute; inset:0; transform:translateX(-100%);
      background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-ink) 8%, transparent), transparent);
      animation:shimmer 1.4s infinite;
    }
    @keyframes shimmer { to { transform:translateX(100%); } }
  }
  @media (prefers-reduced-motion: reduce) {
    .skeleton::after { content:none; }
  }

  /* ---- (k) shell: full-height sidenav (owns the brand) at the left; the topbar,
     content, and footer are all in the right column, edged by the sidenav. ---- */
  body.shell {
    min-height:100dvh; display:grid;
    grid-template-rows:var(--topbar-h) 1fr auto;
    grid-template-columns:var(--sidenav-w) minmax(0,1fr);
    grid-template-areas:"sidenav topbar" "sidenav content" "sidenav footer";
    background:var(--color-bg);
  }
  .shell-content { grid-area:content; min-width:0; }
  /* Desktop collapse: fold the sidenav column to 0 so the map/content goes full
     width. Mobile (<=1024px) uses the top-strip layout below, where collapse is
     off and the toggle is hidden. */
  @media (min-width:1025px) {
    body.shell { transition:grid-template-columns 200ms var(--ease); }
    body.shell.nav-collapsed { grid-template-columns:0 minmax(0,1fr); }
    body.shell.nav-collapsed #sidenav { border-inline-end-color:transparent; }
  }
  .nav-toggle {
    flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border:1px solid var(--color-border); border-radius:var(--r-1);
    background:transparent; color:var(--color-ink-muted); cursor:pointer;
    transition:color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
  }
  @media (hover:hover) { .nav-toggle:hover { color:var(--color-ink); border-color:var(--color-border-strong); } }
  .nav-toggle:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
  .nav-toggle .icon { width:18px; height:18px; }
  /* topbar brand shows only on mobile (the sidebar/drawer owns it on desktop) */
  .topbar-brand { display:none; align-items:center; text-decoration:none; }
  .topbar-brand .brand-os { font:800 15px/1 var(--font-mono); letter-spacing:-.02em; white-space:nowrap; color:var(--color-accent); }
  .topbar-brand .brand-os i { font-style:normal; color:color-mix(in srgb, var(--color-accent) 52%, var(--color-ink-muted)); }
  /* mobile drawer scrim — hidden until the drawer opens under 1024px */
  #nav-scrim { position:fixed; inset:0; z-index:1199; background:rgb(4 8 12 / .55); opacity:0; visibility:hidden; transition:opacity .22s var(--ease), visibility .22s; }

  .icon { width:16px; height:16px; flex:0 0 auto; stroke-width:0; }
  .icon-lg { width:20px; height:20px; }

  .brand { display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-lg); font-weight:800; letter-spacing:.3px; text-decoration:none; color:var(--color-ink); }
  .brand img { width:24px; height:24px; display:block; }
  .brand span { color:var(--color-accent); }
  /* wordmark is one flex item so "Claims" + "10x" sit tight (no flex gap between them) */
  .brand-wm { font-weight:inherit; }

  /* Apple-style bar: brand hard-left, the control cluster + account grouped
     hard-right (no dead centre gap). One control height, one radius, tight gaps. */
  #topbar {
    grid-area:topbar; display:flex; gap:var(--sp-3); align-items:center; flex-wrap:nowrap;
    padding:0 var(--sp-4); height:var(--topbar-h); min-height:var(--topbar-h);
    background:var(--color-surface); border-bottom:1px solid var(--color-border);
    position:sticky; top:0; z-index:var(--z-nav);
    --ctl-h:36px;
  }
  /* the search cluster fills the full topbar width; the address input grows to
     take all the space the other controls + account icon don't use */
  #topbar [data-shell-slot] { flex:1 1 auto; min-width:0; display:flex; align-items:center; flex-wrap:nowrap; gap:var(--sp-2); }
  #topbar [data-shell-slot] form { flex:1 1 auto; min-width:0; display:flex; align-items:center; flex-wrap:nowrap; gap:var(--sp-2); }
  #topbar [data-shell-slot] .input { flex:1 1 auto; min-width:120px; }
  #topbar [data-shell-slot] #dol { flex:0 0 auto; width:auto; }
  #topbar [data-shell-slot] .btn, #topbar [data-shell-slot] .select { flex:0 0 auto; white-space:nowrap; }
  /* uniform control height + radius across the whole bar (Apple consistency) */
  #topbar .input, #topbar .select, #topbar .btn {
    height:var(--ctl-h); min-height:var(--ctl-h); border-radius:var(--r-1);
    font-size:var(--fs-sm);
  }
  #topbar .btn { padding-inline:var(--sp-4); }
  #topbar .select { padding-inline:var(--sp-3) calc(var(--sp-5) + 2px); }
  .topbar-account {
    flex:0 0 auto; width:var(--ctl-h); height:var(--ctl-h); border-radius:var(--r-1);
    display:grid; place-items:center; color:var(--color-ink-muted);
    border:1px solid var(--color-border); background:var(--color-surface-2);
    transition:border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
  }
  .topbar-account .icon { width:18px; height:18px; }
  @media (hover:hover) { .topbar-account:hover { color:var(--color-ink); border-color:var(--color-border-strong); } }
  .topbar-account[aria-current="page"] { color:var(--color-accent); border-color:color-mix(in srgb, var(--color-accent) 45%, var(--color-border)); }

  #sidenav {
    grid-area:sidenav; display:flex; flex-direction:column;
    padding:0; overflow:hidden;
    background:var(--color-surface); border-inline-end:1px solid var(--color-border);
  }
  /* brand block sits at the sidebar top, matched to the topbar height + border
     so the two align across the seam */
  .sidenav-brand {
    flex:0 0 auto; display:flex; align-items:center; gap:var(--sp-2);
    height:var(--topbar-h); padding:0 var(--sp-4);
    font-size:var(--fs-lg); font-weight:800; letter-spacing:.3px; color:var(--color-ink);
    text-decoration:none;
  }
  .sidenav-brand img { width:26px; height:26px; display:block; }
  .sidenav-brand span { color:var(--color-accent); }
  /* WEATHER_OS // AI masthead: terminal-mono wordmark in the volt accent, sized
     to fill the 208px sidenav. Words carry the full accent; the _ and // tics are
     dimmed one step so the lockup reads without shouting. */
  .sidenav-brand--os { letter-spacing:0; }
  .sidenav-brand--os .brand-os {
    letter-spacing:-.02em; white-space:nowrap;
    color:var(--color-accent);
  }
  .sidenav-brand--os .brand-os i {
    font-style:normal;
    color:color-mix(in srgb, var(--color-accent) 52%, var(--color-ink-muted));
  }
  .sidenav-links {
    flex:1 1 auto; min-height:0; overflow-y:auto;
    display:flex; flex-direction:column; gap:2px; padding:var(--sp-3) var(--sp-2);
  }
  .sidenav-link {
    display:flex; align-items:center; gap:var(--sp-3); min-height:40px;
    padding:0 var(--sp-3); border:0; border-radius:var(--r-1);
    background:transparent; color:var(--color-ink-muted); font-size:var(--fs-sm); font-weight:600;
    text-decoration:none; cursor:pointer; text-align:start; position:relative;
    transition:background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
  }
  @media (hover:hover) { .sidenav-link:hover { background:color-mix(in srgb, var(--color-accent) 9%, transparent); color:var(--color-ink); } }
  .sidenav-link[aria-current="page"] {
    background:color-mix(in srgb, var(--color-accent) 16%, transparent); color:var(--color-accent);
    box-shadow:inset 2px 0 0 var(--color-accent);
  }
  .sidenav-sep { margin:var(--sp-3) var(--sp-3) var(--sp-1); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--color-ink-muted); }
  .sidenav-promo {
    margin:var(--sp-4) var(--sp-2) 0; padding:var(--sp-4); border-radius:var(--r-2);
    background:linear-gradient(160deg, color-mix(in srgb, var(--color-accent) 14%, var(--color-surface-2)), var(--color-surface-2));
    border:1px solid color-mix(in srgb, var(--color-accent) 22%, var(--color-border));
  }
  .sidenav-promo-title { font-size:var(--fs-sm); font-weight:800; color:var(--color-ink); }
  .sidenav-promo p { margin-top:var(--sp-1); font-size:var(--fs-xs); line-height:1.4; color:var(--color-ink-muted); }
  .sidenav-promo-btn { width:100%; margin-top:var(--sp-3); min-height:36px; justify-content:center; }
  /* bottom group sits under the (flex-grown) nav links: sources then the CTA */
  .sidenav-bottom { flex:0 0 auto; padding-bottom:0; }
  .sidenav-bottom .sidenav-promo { margin:var(--sp-3) var(--sp-2) 0; }
  /* data-source attribution strip — linked wordmark chips (nominative "data from") */
  /* sidebar sources link (the seal showcase lives on /legal) */
  /* the sources strip and the shell footer share the grid's bottom edge; give
     them the SAME height + border-box so their top borders and content line up */
  .sidenav-sources-link { margin-top:var(--sp-3); min-height:42px; box-sizing:border-box; padding:0 var(--sp-3); border-top:1px solid var(--color-border); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); text-decoration:none; }
  .sidenav-sources-link .src-label { font-size:var(--fs-2xs); letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--color-ink-muted); }
  .sidenav-sources-link .src-arrow { color:var(--color-ink-muted); transition:transform var(--motion-fast) var(--ease); }
  @media (hover:hover) { .sidenav-sources-link:hover .src-label { color:var(--color-ink); } .sidenav-sources-link:hover .src-arrow { color:var(--color-accent); transform:translateX(2px); } }
  .sidenav-sources { margin-top:var(--sp-4); padding:var(--sp-4) var(--sp-3) var(--sp-3); border-top:1px solid var(--color-border); display:grid; gap:var(--sp-2); }
  .src-label { font-size:var(--fs-2xs); letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--color-ink-muted); text-decoration:none; }
  @media (hover:hover) { .src-label:hover { color:var(--color-ink); } }
  .src-chips { display:flex; flex-wrap:wrap; gap:6px; }
  .src-chip {
    display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:var(--r-1);
    border:1px solid var(--color-border); background:var(--color-surface-2);
    font-size:var(--fs-2xs); font-weight:700; letter-spacing:.02em; color:var(--color-ink-muted);
    text-decoration:none; white-space:nowrap;
    transition:border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
  }
  @media (hover:hover) { .src-chip:hover { color:var(--color-ink); border-color:var(--color-border-strong); } }
  .sidenav-foot { margin-top:auto; padding:var(--sp-3); font-size:var(--fs-2xs); line-height:1.5; color:var(--color-ink-muted); }

  #shell-footer {
    grid-area:footer; display:flex; gap:var(--sp-4); align-items:center; flex-wrap:wrap;
    min-height:42px; box-sizing:border-box;
    padding:var(--sp-2) var(--sp-4); background:var(--color-surface);
    border-top:1px solid var(--color-border); color:var(--color-ink-muted); font-size:var(--fs-xs);
  }
  #shell-footer a { color:var(--color-ink); text-decoration:none; }
  #shell-footer a:hover { text-decoration:underline; }
  /* swapped sides: status sits left, the links get pushed to the right */
  #shell-footer .status { order:0; margin-inline-start:0; display:flex; gap:var(--sp-2); align-items:center; white-space:nowrap; }
  #shell-footer .foot-links { order:1; margin-inline-start:auto; }
  #shell-footer .status .led { width:8px; height:8px; border-radius:50%; background:var(--color-ink-muted); }
  #shell-footer .status .led.ok { background:var(--color-accent); box-shadow:0 0 6px var(--color-accent); }

  /* legacy footer element (pre-shell pages) reuses the same recipe */
  footer:not(#shell-footer) {
    display:flex; gap:var(--sp-4); align-items:center; flex-wrap:wrap;
    padding:var(--sp-2) var(--sp-4); background:var(--color-surface);
    border-top:1px solid var(--color-border); color:var(--color-ink-muted); font-size:var(--fs-xs);
  }
  footer:not(#shell-footer) a { color:var(--color-accent); text-decoration:none; }
  footer:not(#shell-footer) a:hover { text-decoration:underline; }
  footer:not(#shell-footer) .status { margin-inline-start:auto; display:flex; gap:var(--sp-2); align-items:center; white-space:nowrap; }
  footer:not(#shell-footer) .status .led { width:8px; height:8px; border-radius:50%; background:var(--color-ink-muted); }
  footer:not(#shell-footer) .status .led.ok { background:var(--color-accent); box-shadow:0 0 6px var(--color-accent); }
  footer:not(#shell-footer) .pulse { width:8px; height:8px; border-radius:50%; background:var(--color-ink-muted); animation:pulse 2s infinite; }
  @keyframes pulse { 50% { opacity:.35; } }

  /* native <dialog>: visibility is driven by the [open] attribute showModal()
     sets, NOT a legacy .open class (which left the modal invisible + the page
     inert — re-audit F-A). ::backdrop dims the inert background. */
  .drawer, #alerts-drawer {
    position:fixed; inset-block:0; inset-inline-end:0; inset-inline-start:auto;
    width:min(400px, 100%); max-width:100%; height:100%; max-height:100%; z-index:var(--z-drawer);
    margin:0; background:var(--color-surface); border:0; border-inline-start:1px solid var(--color-border);
    padding:var(--sp-5); display:none; flex-direction:column; gap:var(--sp-3); overflow:auto;
    box-shadow:var(--elev-3); color:var(--color-ink);
  }
  .drawer[open], #alerts-drawer[open], .drawer.open, #alerts-drawer.open { display:flex; }
  #alerts-drawer::backdrop, .drawer::backdrop { background:rgb(4 8 12 / .55); }
  .drawer:focus-visible, #alerts-drawer:focus-visible { box-shadow:var(--elev-3), var(--focus-ring); }
  .drawer h2, #alerts-drawer h2 { font-size:var(--fs-md); }
  .drawer form, #alerts-drawer form { display:grid; gap:var(--sp-3); }

  /* ── Mobile shell (<=1024px), sismo911 pattern ──
     Single-column: sticky topbar (hamburger + brand) → content → footer. The
     full sidebar becomes a LEFT slide-in drawer opened by the hamburger, over a
     scrim; it keeps its vertical layout (brand, nav, subscribe, sources) and the
     current dark tokens. Closes on scrim tap / nav-link tap / Escape. */
  @media (max-width:1024px) {
    /* clip the off-screen drawer so it never creates sideways scroll */
    html, body { overflow-x:clip; max-width:100%; }
    body.shell { grid-template-columns:minmax(0, 1fr); grid-template-rows:var(--topbar-h) 1fr auto; grid-template-areas:"topbar" "content" "footer"; }
    #shell-footer { min-width:0; }
    .nav-toggle { display:inline-flex; }
    .topbar-brand { display:inline-flex; }
    #sidenav {
      position:fixed; top:0; left:0; bottom:0; z-index:1200;
      width:min(17rem, calc(100vw - 3rem));
      transform:translateX(-100%); transition:transform .22s var(--ease);
      border-inline-end:1px solid var(--color-border); box-shadow:2px 0 24px rgb(0 0 0 / .35);
    }
    body.nav-open #sidenav { transform:none; }
    body.nav-open #nav-scrim { opacity:1; visibility:visible; }
    body.nav-open { overflow:hidden; }
  }
  @media (prefers-reduced-motion: reduce) { #sidenav, #nav-scrim { transition:none; } }
  /* topbar stacks below ~640px: give the search its own full-width row */
  @media (max-width:640px) {
    #topbar {
      height:auto; min-height:0; padding:var(--sp-2) var(--sp-3);
      flex-wrap:wrap; row-gap:var(--sp-2); position:static;
    }
    .topbar-account { order:0; margin-inline-start:auto; }
    #topbar [data-shell-slot] { order:1; flex-basis:100%; margin-inline-start:0; max-width:none; min-width:0; flex-wrap:wrap; }
    #topbar [data-shell-slot] .input { flex:1 1 100%; }
    #topbar [data-shell-slot] .btn, #topbar [data-shell-slot] .select { flex:1 1 auto; }
  }

  /* ---- shared utilities used by app.js/dashboard.js/account.js ---- */
  .mut { color:var(--color-ink-muted); font-size:var(--fs-xs); }
  .grow-full { flex-basis:100%; }
  .warn { font-size:var(--fs-xs); color:var(--color-ink); background:color-mix(in srgb, var(--sev-2) 24%, var(--color-surface-2)); padding:var(--sp-1) var(--sp-2); border-radius:var(--r-1); margin:var(--sp-2) 0; }
  .list { display:grid; gap:var(--sp-2); }
  .disclaimer {
    font-size:var(--fs-xs); color:var(--color-ink); line-height:1.5; margin-top:var(--sp-3);
    padding:var(--sp-2); border:1px solid var(--color-border); border-radius:var(--r-1);
    background:color-mix(in srgb, var(--color-accent) 6%, transparent);
  }
  .no-print { } /* marker only — see @media print below */

  .table-scroll { overflow-x:auto; }
  .table-scroll table { min-width:560px; }

  /* long-form content pages (terms/privacy/methodology/research/legal) */
  .prose { max-width:760px; margin-inline:auto; padding:var(--sp-5) var(--sp-4); }
  .prose.prose-wide { max-width:820px; }
  .prose h1 { font-size:var(--fs-xl); }
  .prose h2 { font-size:var(--fs-lg); margin-top:var(--sp-6); font-weight:700; }
  .prose p, .prose ul { margin:var(--sp-3) 0; }
  .prose li { margin:var(--sp-2) 0; }
  .prose a { color:var(--color-accent); }
  .prose .mut, .prose .updated, .prose .note { color:var(--color-ink-muted); font-size:var(--fs-sm); }
  .prose table { border-collapse:collapse; width:100%; font-size:var(--fs-sm); }
  .prose th, .prose td { text-align:start; padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--color-border); vertical-align:top; }
  .prose code { font:var(--fs-xs) var(--font-mono); background:var(--color-surface); padding:1px 4px; border-radius:var(--r-1); }
  .prose .caps { text-transform:uppercase; font-weight:700; }

  /* print = the report panel only: white page, full height, no chrome.
     Interactive widgets opt out via .no-print at creation time. */
  @media print {
    header, footer, #topbar, #shell-footer, #sidenav, .rail, .insight-row, .detect-card,
    .legend, .path-math, .toast, #map, #panel-close, .no-print, .maplibregl-popup, #alerts-drawer {
      display:none !important;
    }
    body { background:var(--print-bg); color:var(--print-ink); height:auto; display:block; }
    .content, .shell-content { display:block; padding:0; }
    main { position:static; border:0; }
    #panel {
      display:block !important; position:static; width:100%; max-height:none; overflow:visible;
      border:0; background:var(--print-bg); color:var(--print-ink); box-shadow:none;
    }
    #panel .big { color:var(--print-ink); }
    .mut { color:var(--print-ink-muted); }
  }
}

/* ---- ad-card: a sponsor slot on the overview. roof10x's real brand (volt on
   near-black) scoped locally so no external hex leaks into the token layer.
   Kept flat and simple — a solid dark panel, no glow blob, no glossy CTA. The
   "Sponsored" label + roundel logo keep it distinct from HailIntel chrome. */
@layer components {
  .ad-card {
    --r10x-volt:#ccff00; --r10x-ink:#0c0f0f;
    position:relative; overflow:hidden; display:flex; flex-direction:column; gap:var(--sp-2);
    padding:var(--sp-4); min-width:0; text-decoration:none; color:#f3f6ea;
    background:var(--r10x-ink);
    border:1px solid color-mix(in srgb, var(--r10x-volt) 20%, var(--color-border)); border-radius:var(--r-2);
    transition:border-color var(--motion-fast) var(--ease);
  }
  @media (hover:hover) { .ad-card:hover { border-color:color-mix(in srgb, var(--r10x-volt) 45%, transparent); } }
  .ad-card:focus-visible { outline:2px solid var(--r10x-volt); outline-offset:2px; }
  .ad-card__label { align-self:flex-end; color:color-mix(in srgb, var(--r10x-volt) 55%, #cfd3c2); font-size:var(--fs-2xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
  .ad-card__body { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-2); flex:1 1 auto; min-height:0; text-align:center; }
  .ad-card__logo { width:60px; height:60px; border-radius:var(--r-full); }
  .ad-card__wordmark { margin:2px 0 0; font-size:var(--fs-xl); font-weight:800; letter-spacing:-.02em; line-height:1; color:#fff; }
  .ad-card__wordmark span { color:var(--r10x-volt); }
  .ad-card__tagline { margin:0; color:#a9af9d; font-size:var(--fs-xs); line-height:1.5; max-width:260px; }
  .ad-card__cta {
    display:inline-flex; align-items:center; justify-content:center; gap:6px; align-self:stretch; min-height:40px; padding:8px var(--sp-4);
    color:var(--r10x-ink); font-size:var(--fs-sm); font-weight:800; letter-spacing:.01em; border-radius:var(--r-2);
    background:var(--r10x-volt);
    transition:filter var(--motion-fast) var(--ease);
  }
  @media (hover:hover) { .ad-card:hover .ad-card__cta { filter:brightness(1.05); } }
  .ad-card__cta-arrow { font-size:var(--fs-md); line-height:1; }
  @media (prefers-reduced-motion: reduce) { .ad-card, .ad-card__cta { transition:none; } }
}
