:root {
    --bg: #0a0f1c;
    --bg-2: #101827;
    --panel: #131c2e;
    --panel-2: #1a2540;
    --line: #24304a;
    --ink: #e9eef7;
    --ink-2: #9fb0cc;
    --ink-3: #6b7c9a;
    --accent: #4dd0e1;
    --warn: #ffb547;
    --danger: #ff5c6c;
    --ok: #7ee787;
    --lowell: #ff5c6c;
    --karina: #ffb547;
    --kauai: #4dd0e1;
    --font-sans: 'Satoshi', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); }
  body { min-height: 100vh; }
  a { color: var(--accent); text-decoration: none; }
  a:hover { text-decoration: underline; }

  /* ---------- header ---------- */
  header.top {
    display: flex; align-items: center; justify-content: space-between;
    padding: calc(14px + env(safe-area-inset-top)) calc(22px + env(safe-area-inset-right)) 14px calc(22px + env(safe-area-inset-left));
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #0e1524 0%, #0a0f1c 100%);
    position: sticky; top: 0; z-index: 500;
  }
  .brand { display: flex; align-items: center; gap: 12px; }
  .brand-mark { width: 32px; height: 32px; }
  .brand h1 { font-size: 16px; margin: 0; letter-spacing: 0.02em; font-weight: 700; }
  .brand .sub { font-size: 11px; color: var(--ink-3); font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
  /* On narrow phones (≤ 480px), tighten letter-spacing so the four-source
   * sub-line (CPHC · NHC · NWS Honolulu · County of Kauaʻi) fits on one
   * line without wrapping "County of Kauaʻi" underneath. */
  @media (max-width: 480px) {
    .brand .sub { letter-spacing: 0.02em; }
    .top-actions { flex-wrap: wrap; width: 100%; }
    .brand { min-width: 0; }
    .brand-mark { flex-shrink: 0; }
  }
  .top-actions { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--ink-2); font-family: var(--font-mono); }
  .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(126,231,135,0.7); animation: pulse 2s infinite; display: inline-block; margin-right: 6px; }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(126,231,135,0.7);} 70% {box-shadow: 0 0 0 10px rgba(126,231,135,0);} 100% {box-shadow: 0 0 0 0 rgba(126,231,135,0);} }
  button.refresh {
    background: var(--panel-2); color: var(--ink); border: 1px solid var(--line);
    padding: 6px 12px; border-radius: 6px; font-family: var(--font-mono); font-size: 11px; cursor: pointer;
  }
  button.refresh:hover { border-color: var(--accent); color: var(--accent); }

  /* ---------- town selector bar ---------- */
  .town-bar {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 22px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-3);
  }
  .location-field { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .town-bar-label { flex-shrink: 0; font-size: 12px; }
  .town-bar select {
    background: var(--panel-2); color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 6px 28px 6px 12px;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.04em;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4 L5 7 L8 4' stroke='%239fb0cc' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    min-width: 200px;
  }
  .town-bar select:hover, .town-bar select:focus {
    border-color: var(--accent);
    outline: none;
  }
  @media (max-width: 640px) {
    .location-field { flex: 1; flex-direction: column; align-items: stretch; gap: 5px; }
    .location-field:first-child { flex: 0 0 34%; }
    .town-bar {
      padding: 10px 16px;
      gap: 10px;
      font-size: 10px;
    }
    .town-bar select {
      flex: 1;
      min-width: 0;
      padding: 8px 28px 8px 10px;
      font-size: 12px;
    }
  }

  /* ---------- alert banner ---------- */
  .alert-bar {
    padding: 10px 22px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em;
    text-transform: uppercase; display: flex; gap: 16px; align-items: center;
  }
  /* Legacy color-key classes retained for the alert log (log entries still use
     GREEN/YELLOW/ORANGE/RED for change tracking). The alert-bar itself now uses
     the descriptor classes below. */
  .alert-bar.GREEN     { background: #10281a; color: var(--ok);     border-bottom: 1px solid #1d4d33; }
  .alert-bar.YELLOW    { background: #2a2312; color: var(--warn);   border-bottom: 1px solid #5a4820; }
  .alert-bar.ORANGE    { background: #3a1e12; color: #ff9048;       border-bottom: 1px solid #6b3820; }
  .alert-bar.RED       { background: #3a1220; color: var(--danger); border-bottom: 1px solid #6a1e2e; animation: flash 1.6s infinite; }

  /* NEW: descriptor severity scale. Chip text = what the forecast means at this town.
     Same warm gradient (green → yellow → orange → red → purple) so the intensity is
     still readable at a glance, but the word does the semantic work. */
  .alert-bar.NORMAL    { background: #10281a; color: #bbf7d0;       border-bottom: 1px solid #1d4d33; }
  .alert-bar.ELEVATED  { background: #2a2312; color: #fef3c7;       border-bottom: 1px solid #5a4820; }
  .alert-bar.HAZARDOUS { background: #3a1e12; color: #fed7aa;       border-bottom: 1px solid #6b3820; }
  .alert-bar.SEVERE    { background: #3a1220; color: #fecaca;       border-bottom: 1px solid #6a1e2e; animation: flash 1.6s infinite; }
  .alert-bar.EXTREME   { background: #45123f; color: #f5d0fe;       border-bottom: 1px solid #6d1963; animation: flash 1.6s infinite; }

  @keyframes flash { 0%,100%{opacity:1;} 50%{opacity:0.75;} }

  /* Chip element inside the alert-bar. Tappable button opens the severity popover. */
  .alert-label {
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(0,0,0,0.35);
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255,255,255,0.4);
    border: none;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    flex-shrink: 0;
  }
  .alert-label:hover { background: rgba(0,0,0,0.55); }
  .alert-label:focus-visible { outline: 2px solid rgba(255,255,255,0.5); outline-offset: 2px; }

  /* Compact flood one-liner. Mobile-only: sits just above the wind-radii legend
     so the flood risk is visible without scrolling. Desktop keeps the full
     rainfall panel in the sidebar and hides this strip via media query below. */
  .flood-oneliner {
    padding: 8px 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-2);
  }
  .flood-oneliner-label {
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 3px;
    background: rgba(0,0,0,0.35);
    white-space: nowrap;
    /* Tappable: opens the severity popover, same as the top chip. */
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255,255,255,0.4);
    border: none;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
  }
  .flood-oneliner-label:hover { background: rgba(0,0,0,0.55); }
  .flood-oneliner-label:focus-visible { outline: 2px solid rgba(255,255,255,0.5); outline-offset: 2px; }
  .flood-oneliner-msg {
    flex: 1;
    line-height: 1.35;
  }
  /* Small subtle "Data as of X · next update Y" line used under storm cards,
     rainfall panel, and wind chart. Low-contrast on purpose — it's meta. */
  .data-as-of {
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.02em;
    color: var(--ink-3);
  }

  /* Flood scale — cool tones. Wind uses warm yellow/orange/red so the two hazards
     read as independent. Only moderate/high/extreme are shown on mobile. */
  .flood-oneliner.flood-moderate { background: #12314a; color: #93c5fd; border-bottom-color: #1e3a5f; }
  .flood-oneliner.flood-high     { background: #0e2438; color: #22d3ee; border-bottom-color: #1e3a5f; }
  .flood-oneliner.flood-extreme  { background: #0b2f3a; color: #67e8f9; border-bottom-color: #164e5a; animation: flash 1.6s infinite; }
  /* Aftermath: past-tense observed rainfall from NWS HFO gauges. Muted informational
     tone (slate + ink-2) so it does not read like an active alert; no animation. */
  .flood-oneliner.flood-aftermath { background: #1e293b; color: #cbd5e1; border-bottom-color: #334155; }
  .flood-oneliner.flood-aftermath .flood-oneliner-label { background: rgba(0,0,0,0.35); color: #cbd5e1; }

  /* Desktop hides the mobile flood strip — the sidebar rainfall panel covers it. */
  @media (min-width: 901px) {
    #flood-oneliner { display: none !important; }
  }

  /* ---------- layout ---------- */
  main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 0;
    /* 108px = header+alert+discovery; 36px = wind-field legend strip below alert */
    height: calc(100vh - 108px - 36px);
    min-height: 700px;
  }
  @media (max-width: 1100px) {
    main { grid-template-columns: 1fr; height: auto; min-height: 0; }
    #map { height: 55vh; min-height: 380px; }
    aside { border-left: none; border-top: 1px solid var(--line); max-height: none; }
    header.top { flex-wrap: wrap; gap: 10px; padding: calc(12px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 12px calc(14px + env(safe-area-inset-left)); }
    .brand h1 { font-size: 15px; }
    /* Chip inline with message on mobile: no flex-wrap, tighter gap, smaller font,
       reduced side padding. Message shrinks/wraps under itself, chip stays fixed size. */
    .alert-bar { padding: 10px 14px; font-size: 11px; flex-wrap: nowrap; gap: 10px; align-items: flex-start; }
    .alert-bar .alert-label { margin-top: 1px; }
    .alert-bar #alert-msg { line-height: 1.4; min-width: 0; }
  }

  #map { width: 100%; height: 100%; background: #0a0f1c; }

  /* Wind-field legend — horizontal strip below map, out of the way of the storms. */
  .map-legend {
    flex: 0 0 auto;
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 6px 14px;
    padding: 8px 14px;
    background: var(--bg-2);
    border-top: 1px solid var(--line);
    font-size: 11px; color: var(--ink-2); line-height: 1.4;
  }
  .map-legend .legend-title {
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-3); margin-right: 4px;
  }
  .map-legend .legend-row { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
  .legend-swatch {
    display: inline-block; width: 14px; height: 10px;
    border-radius: 2px; flex-shrink: 0;
    opacity: 0.9;
  }
  .legend-swatch.legend-swatch-dash {
    background: transparent;
    border: 1px dotted var(--ink-3);
    height: 8px;
  }
  @media (max-width: 640px) {
    .map-legend { font-size: 10px; padding: 8px 12px; gap: 4px 10px; }
    .map-legend .legend-title { flex-basis: 100%; margin-bottom: 2px; }
  }

  aside {
    background: var(--bg-2); border-left: 1px solid var(--line);
    overflow-y: auto; padding: 0;
  }

  /* ---------- storm cards ---------- */
  .storm-card { border-bottom: 1px solid var(--line); padding: 18px 20px; }
  .storm-card h2 {
    margin: 0 0 4px 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em;
    display: flex; align-items: center; gap: 10px;
  }
  .storm-swatch { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
  .cat-tag {
    display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 10px;
    font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  }
  .cat-5 { background: #3a1220; color: var(--danger); }
  .cat-4 { background: #3a1e12; color: #ff9048; }
  .cat-3 { background: #2a2312; color: var(--warn); }
  .cat-2 { background: #1a2a3a; color: #4dd0e1; }
  .cat-1 { background: #10281a; color: var(--ok); }
  .cat-ts { background: #1a1a2a; color: var(--ink-2); }
  .storm-meta { color: var(--ink-3); font-size: 11px; font-family: var(--font-mono); margin-top: 2px; }

  .kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 14px; }
  .kv { }
  .kv .k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-family: var(--font-mono); margin-bottom: 2px; }
  .kv .v { font-size: 15px; color: var(--ink); font-family: var(--font-mono); font-weight: 500; }
  .kv .v small { color: var(--ink-3); font-size: 11px; margin-left: 4px; font-weight: 400; }

  .approach {
    margin-top: 14px; padding: 12px; background: var(--panel); border: 1px solid var(--line);
    border-radius: 6px;
  }
  .approach h4 { margin: 0 0 6px 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-family: var(--font-mono); font-weight: 500; }
  .approach .big { font-size: 22px; font-family: var(--font-mono); font-weight: 500; color: var(--kauai); }
  .approach .sub2 { font-size: 12px; color: var(--ink-2); margin-top: 2px; }

  .radii-mini { margin-top: 12px; }
  .radii-mini table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11px; }
  .radii-mini th { color: var(--ink-3); text-align: right; font-weight: 500; padding: 3px 4px; border-bottom: 1px solid var(--line); }
  .radii-mini td { text-align: right; padding: 3px 4px; color: var(--ink); }
  .radii-mini th:first-child, .radii-mini td:first-child { text-align: left; color: var(--ink-2); }

  /* ---------- forecast strip ---------- */
  .forecast-strip { overflow-x: auto; margin-top: 12px; padding-bottom: 4px; }
  .forecast-strip table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11px; }
  .forecast-strip th { padding: 4px 6px; color: var(--ink-3); font-weight: 500; text-align: right; border-bottom: 1px solid var(--line); }
  .forecast-strip td { padding: 4px 6px; text-align: right; color: var(--ink); }
  .forecast-strip th:first-child, .forecast-strip td:first-child { text-align: left; }
  .forecast-strip tr:hover td { background: rgba(77, 208, 225, 0.05); }

  /* ---------- Kauai panel ---------- */
  #kauai-panel { padding: 18px 20px; border-bottom: 1px solid var(--line); }
  #kauai-panel h3 { margin: 0 0 12px 0; font-size: 13px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--kauai); font-weight: 500; }
  .kauai-block { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); line-height: 1.55; white-space: pre-wrap; max-height: 420px; overflow-y: auto; background: var(--panel); padding: 12px; border-radius: 6px; border: 1px solid var(--line); scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
  .kauai-block::-webkit-scrollbar { width: 8px; }
  .kauai-block::-webkit-scrollbar-track { background: transparent; }
  .kauai-block::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
  .kauai-block::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

  /* ---------- chart ---------- */
  #wind-chart-wrap { padding: 18px 20px; border-bottom: 1px solid var(--line); }
  #wind-chart-wrap h3 { margin: 0 0 4px 0; font-size: 13px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); font-weight: 500; }
  #wind-chart-wrap .chart-sub { margin: 0 0 12px 0; font-size: 11px; font-family: var(--font-mono); color: var(--ink-3); letter-spacing: 0.04em; }
  .chart-box { position: relative; width: 100%; height: 220px; }
  #wind-chart { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

  /* ---------- install banner ---------- */
  #install-banner {
    display: none;
    position: fixed; left: 10px; right: 10px; bottom: 10px;
    background: linear-gradient(180deg, #1c2b46 0%, #0f1626 100%);
    border: 1px solid rgba(126, 231, 231, 0.5);
    border-radius: 16px; padding: 16px 18px;
    z-index: 1200;
    box-shadow: 0 16px 50px rgba(0,0,0,0.65), 0 0 0 1px rgba(0,0,0,0.4);
    color: var(--ink);
    max-width: 520px; margin: 0 auto;
  }
  #install-banner.show { display: block; animation: slideup 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
  @keyframes slideup { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  #install-banner .ib-row { display: flex; align-items: center; gap: 14px; }
  #install-banner .ib-icon {
    width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  }
  #install-banner .ib-body { flex: 1; min-width: 0; }
  #install-banner .ib-title { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
  #install-banner .ib-sub { font-size: 12.5px; color: var(--ink-2); margin: 3px 0 0 0; line-height: 1.4; }
  #install-banner button.ib-cta {
    background: var(--accent); color: #0a0f1c; border: none; border-radius: 10px;
    padding: 10px 16px; font-weight: 700; font-size: 13px; cursor: pointer;
    font-family: inherit; letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(126, 231, 231, 0.25);
  }
  #install-banner button.ib-cta:active { transform: translateY(1px); }
  #install-banner button.ib-close {
    background: transparent; color: var(--ink-3); border: none;
    font-size: 22px; cursor: pointer; padding: 4px 8px; line-height: 1;
    border-radius: 8px;
  }
  #install-banner button.ib-close:active { background: rgba(255,255,255,0.05); }
  #install-banner .ib-steps {
    display: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 13.5px; color: var(--ink); line-height: 1.6;
  }
  #install-banner.expanded .ib-steps { display: block; }
  #install-banner .ib-steps ol { margin: 0; padding-left: 22px; }
  #install-banner .ib-steps li { margin-bottom: 8px; }
  #install-banner .ib-steps li:last-child { margin-bottom: 0; }
  /* Accurate iOS Share icon — blue, prominent, matches Safari's toolbar */
  #install-banner .ib-share-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; vertical-align: -6px; margin: 0 2px;
    color: #0a84ff;
    background: rgba(10, 132, 255, 0.12); border-radius: 5px;
  }
  #install-banner .ib-share-icon svg { width: 14px; height: 14px; display: block; }
  /* Highlight action words in steps */
  #install-banner .ib-steps strong { color: var(--ink); font-weight: 600; }
  #install-banner .ib-hint {
    display: block; margin-top: 10px; padding: 8px 10px;
    background: rgba(126, 231, 231, 0.08); border-radius: 6px;
    font-size: 12px; color: var(--ink-2); line-height: 1.5;
  }

  /* ---------- About modal ---------- */
  .modal-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(5, 10, 20, 0.88);
    z-index: 2147483000; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto;
  }
  .modal-backdrop.show { display: flex; }
  .modal {
    background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
    max-width: 640px; width: 100%; padding: 28px 30px 26px;
    color: var(--ink);
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  }
  .modal h2 { margin: 0 0 14px 0; font-size: 22px; font-weight: 700; }
  .modal h3 { margin: 22px 0 8px 0; font-size: 14px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-2); font-weight: 500; }
  .modal p { margin: 8px 0; font-size: 14px; line-height: 1.6; color: var(--ink); }
  .modal ul { margin: 8px 0; padding-left: 20px; font-size: 14px; line-height: 1.6; }
  .modal .disclaimer-box {
    background: rgba(255, 92, 108, 0.08); border: 1px solid rgba(255, 92, 108, 0.35);
    border-radius: 8px; padding: 12px 14px; font-size: 13px; color: var(--ink); line-height: 1.55;
    margin: 14px 0;
  }
  .modal .disclaimer-box strong { color: var(--danger); }
  .modal .close-x {
    float: right; background: transparent; color: var(--ink-2); border: none;
    font-size: 24px; cursor: pointer; line-height: 1; padding: 0;
  }
  .modal a { color: var(--accent); }
  .top-actions .about-btn {
    background: transparent; color: var(--ink-2); border: 1px solid var(--line);
    border-radius: 6px; padding: 4px 10px; font-size: 11px; cursor: pointer;
    font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em;
  }
  .top-actions .about-btn:hover { color: var(--ink); border-color: var(--ink-3); }

  /* ---------- footer expanded ---------- */
  .footer-tiny {
    padding: 16px 22px 24px; font-size: 11px; color: var(--ink-3);
    font-family: var(--font-mono); letter-spacing: 0.02em; line-height: 1.7;
    border-top: 1px solid var(--line); background: var(--bg-2);
  }
  .footer-tiny .disclaim {
    display: block; margin-top: 8px; padding: 10px 12px;
    background: rgba(255, 92, 108, 0.06); border-left: 3px solid var(--danger);
    color: var(--ink-2); font-size: 11px; line-height: 1.55;
  }
  .footer-tiny .disclaim strong { color: var(--danger); }
  .footer-tiny a { color: var(--ink-2); }
  .footer-tiny a:hover { color: var(--accent); }

  /* ---------- alert log ---------- */
  #alert-log { padding: 18px 20px; }
  #alert-log h3 { margin: 0 0 10px 0; font-size: 13px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); font-weight: 500; }
  .log-entry { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-family: var(--font-mono); font-size: 11px; align-items: baseline; }
  .log-entry .t { color: var(--ink-3); flex-shrink: 0; width: 108px; }
  .log-entry .l { flex-shrink: 0; width: 78px; font-weight: 700; letter-spacing: 0.02em; }
  .log-entry .l.NORMAL   { color: var(--ok); }
  .log-entry .l.ELEVATED { color: var(--warn); }
  .log-entry .l.HAZARDOUS{ color: #ff9048; }
  .log-entry .l.SEVERE   { color: var(--danger); }
  .log-entry .l.EXTREME  { color: #ff3860; }
  .log-entry .m { color: var(--ink-2); }
  .log-entry .log-src { color: var(--ink-3); margin-left: 6px; text-decoration: underline dotted; }
  .log-entry .log-src:hover { color: var(--ink-2); }

  /* ---------- leaflet ---------- */
  .leaflet-container { background: #0a0f1c; }
  .leaflet-control-attribution { background: rgba(10,15,28,0.7) !important; color: var(--ink-3) !important; font-size: 10px !important; }
  .leaflet-control-attribution a { color: var(--ink-2) !important; }
  .leaflet-tile { filter: brightness(0.55) contrast(1.05) hue-rotate(180deg) invert(0.92); }

  .storm-icon {
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-weight: 700; font-size: 11px; color: #0a0f1c;
    border-radius: 50%; border: 0; box-shadow: 0 0 20px currentColor;
  }
  /* Hover cards contain no controls and must not intercept the town mouse target. */
  .town-popup { pointer-events: none; }
  .storm-label {
    background: rgba(10,15,28,0.85); border: 1px solid var(--line); border-radius: 4px;
    padding: 4px 8px; color: var(--ink); font-family: var(--font-mono); font-size: 10px;
    white-space: nowrap; transform: translate(12px, -16px);
  }

  .footer-tiny { padding: 10px 22px; text-align: center; font-size: 10px; color: var(--ink-3); font-family: var(--font-mono); border-top: 1px solid var(--line); }

  /* ---------- SEO town-guide + nearby-towns sections ---------- */
  .town-guide-section {
    padding: 32px 22px;
    border-top: 1px solid var(--line);
    background: var(--bg-2);
  }
  .town-guide-inner {
    max-width: 1100px; margin: 0 auto;
  }
  .town-guide-section h2 {
    margin: 0 0 20px 0;
    font-size: 20px; font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .town-guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
  }
  .town-guide-item {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px 18px;
  }
  .town-guide-item-full { grid-column: 1 / -1; }
  .town-guide-item h3 {
    margin: 0 0 8px 0;
    font-size: 12px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--kauai);
    font-weight: 500;
  }
  .town-guide-item p {
    margin: 0 0 8px 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink);
  }
  .town-guide-item p:last-child { margin-bottom: 0; }
  .town-guide-item .town-guide-source {
    font-size: 11.5px; color: var(--ink-3); margin-top: 10px;
    padding-top: 10px; border-top: 1px dashed var(--line);
  }
  .town-guide-item .town-guide-source a { color: var(--ink-2); }
  .town-guide-item .town-guide-source a:hover { color: var(--accent); }
  .town-guide-disclaimer {
    margin: 20px 0 0 0;
    padding: 12px 14px;
    background: rgba(255,183,71,0.06);
    border-left: 3px solid var(--warn);
    font-size: 12px; color: var(--ink-2);
    line-height: 1.55;
  }

  .nearby-section {
    padding: 28px 22px;
    border-top: 1px solid var(--line);
    background: var(--bg);
  }
  .nearby-inner { max-width: 1100px; margin: 0 auto; }
  .nearby-section h2 {
    margin: 0 0 6px 0;
    font-size: 16px; font-weight: 600;
    color: var(--ink);
  }
  .nearby-section .nearby-sub {
    margin: 0 0 16px 0;
    font-size: 13px; color: var(--ink-3);
  }
  .nearby-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
  }
  .nearby-town-link {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    text-decoration: none;
    transition: border-color 0.15s ease;
  }
  .nearby-town-link:hover {
    border-color: var(--accent);
    text-decoration: none;
  }
  .nearby-town-link .nt-name {
    font-size: 13px; color: var(--ink); font-weight: 500;
  }
  .nearby-town-link .nt-dist {
    font-size: 11px; font-family: var(--font-mono); color: var(--ink-3);
  }
  .all-towns-details {
    margin-top: 8px;
    font-size: 12px;
    color: var(--ink-3);
  }
  .all-towns-details summary {
    cursor: pointer;
    padding: 6px 0;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-2);
  }
  .all-towns-details summary:hover { color: var(--accent); }
  .all-towns-list {
    list-style: none; padding: 8px 0 0 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 6px 14px;
  }
  .all-towns-list a {
    font-size: 13px; color: var(--ink-2);
  }
  .all-towns-list a[aria-current="page"] { color: var(--accent); font-weight: 600; }

  @media (max-width: 640px) {
    .town-guide-section, .nearby-section { padding: 22px 14px; }
    .town-guide-section h2 { font-size: 17px; }
    .town-guide-item { padding: 14px; }
    .nearby-grid { grid-template-columns: 1fr 1fr; }
  }

  /* ---------- Rainfall panel ---------- */
  #rainfall-panel { margin-top: 12px; }
  #rainfall-panel h3 {
    margin: 0 0 4px 0;
    font-size: 13px; font-weight: 600;
    color: var(--ink);
  }
  #rainfall-sub {
    font-size: 11px; color: var(--ink-3);
    margin-bottom: 10px;
  }
  .rainfall-loading {
    padding: 12px 14px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 12px; color: var(--ink-3);
  }
  .rainfall-panel-content {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 12px;
  }
  .rainfall-flood-badge {
    display: flex; flex-direction: column; gap: 4px;
    padding: 10px 12px;
    border-radius: 4px;
    margin-bottom: 12px;
  }
  .rainfall-badge-label {
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.08em;
  }
  .rainfall-badge-msg {
    font-size: 12px; line-height: 1.4;
    font-weight: 500;
  }
  .rainfall-totals {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 10px;
  }
  .rainfall-total {
    text-align: center;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 8px 4px;
  }
  .rainfall-total .rt-num {
    font-size: 15px; font-weight: 700;
    font-family: var(--font-mono);
    color: var(--ink);
    letter-spacing: -0.02em;
  }
  .rainfall-total .rt-label {
    font-size: 9.5px; color: var(--ink-3);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
    line-height: 1.2;
  }
  .rainfall-peak {
    font-size: 11.5px; color: var(--ink-2);
    padding: 6px 8px;
    background: var(--bg-2);
    border-radius: 4px;
    margin-bottom: 10px;
  }
  .rainfall-peak strong { color: var(--ink); font-weight: 600; }
  .rainfall-bars {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 3px;
    align-items: end;
    height: 82px;
    padding: 6px 4px 4px 4px;
    background: var(--bg-2);
    border-radius: 4px;
    margin-bottom: 10px;
  }
  .rainfall-bar-col {
    display: flex; flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
  }
  .rainfall-bar-wrap {
    flex: 1;
    display: flex; align-items: flex-end;
    width: 100%;
    justify-content: center;
  }
  .rainfall-bar {
    width: 100%; max-width: 12px;
    border-radius: 2px 2px 0 0;
    min-height: 2px;
    transition: opacity 0.15s;
  }
  .rainfall-bar:hover { opacity: 0.7; cursor: help; }
  .rainfall-bar.bar-light    { background: #64748b; }
  .rainfall-bar.bar-moderate { background: #06b6d4; }
  .rainfall-bar.bar-heavy    { background: #f59e0b; }
  .rainfall-bar-label {
    font-size: 8px;
    color: var(--ink-3);
    font-family: var(--font-mono);
    margin-top: 2px;
    line-height: 1;
    white-space: nowrap;
  }
  .rainfall-context {
    font-size: 11px; color: var(--ink-2);
    padding: 8px 10px;
    background: rgba(245, 158, 11, 0.08);
    border-left: 3px solid #f59e0b;
    border-radius: 2px;
    line-height: 1.5;
    margin-bottom: 8px;
  }
  .rainfall-source {
    font-size: 10.5px; color: var(--ink-3);
    font-family: var(--font-mono);
  }
  .rainfall-source a { color: var(--ink-3); }
  .rainfall-source a:hover { color: var(--accent); }

  @media (max-width: 560px) {
    .rainfall-totals { grid-template-columns: repeat(2, 1fr); }
    .rainfall-bar-label { font-size: 7px; }
  }

/* ---------- About origin block ---------- */
.about-origin {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin: 24px 0 28px 0;
  padding: 20px;
  background: linear-gradient(135deg, rgba(77,208,225,0.06), rgba(126,231,231,0.04));
  border: 1px solid rgba(77,208,225,0.25);
  border-radius: 14px;
}
.about-origin-photo {
  flex: 0 0 150px;
}
.about-origin-photo img {
  display: block;
  width: 150px;
  height: auto;
  border-radius: 14px;
  background: #fff;
  padding: 6px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.45);
  transform: rotate(-3deg);
}
.about-origin-body {
  flex: 1;
  min-width: 0;
}
.about-origin-body h3 {
  color: var(--ink-1);
  font-size: 17px;
  letter-spacing: 0.01em;
}
.about-origin-body p {
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 8px 0;
}
.about-origin-body p strong {
  color: #7ee7e7;
  letter-spacing: 0.01em;
}
@media (max-width: 560px) {
  .about-origin {
    flex-direction: column;
    align-items: center;
    text-align: left;
    gap: 16px;
    padding: 18px;
  }
  .about-origin-photo {
    flex: 0 0 auto;
  }
  .about-origin-photo img {
    width: 140px;
    height: auto;
  }
  .about-origin-body {
    text-align: left;
  }
}

  /* ---------- severity popover ----------
     Tap the alert chip (top or flood one-liner) → modal opens with the full
     5-tier scale. Current level row is highlighted in its own color band.
     Footer legend at page bottom shows the same table without highlight. */
  .sev-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    /* Above Leaflet map layers (which top out around z 400) and above the mobile
       flood-oneliner (z 5). Popover is z + 1. */
    z-index: 9000;
    display: none;
    animation: sev-fade 0.15s ease;
  }
  .sev-backdrop.open { display: block; }
  @keyframes sev-fade { from { opacity: 0; } to { opacity: 1; } }

  .sev-popover {
    position: fixed;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9001;
    width: min(92vw, 520px);
    max-height: 90vh;
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    display: none;
    animation: sev-pop 0.18s ease;
  }
  .sev-popover.open { display: block; }
  @keyframes sev-pop {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
  }

  .sev-popover-title {
    padding: 12px 16px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .sev-popover-close {
    color: var(--ink-3);
    font-size: 22px;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 6px;
  }
  .sev-popover-close:hover { color: var(--ink); }

  .sev-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
  }
  .sev-table th {
    text-align: left;
    padding: 8px 10px;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 500;
    border-bottom: 1px solid var(--line);
    background: var(--bg-2);
  }
  .sev-table td {
    padding: 10px;
    font-size: 12px;
    color: var(--ink-2);
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    line-height: 1.35;
  }
  .sev-table tr:last-child td { border-bottom: none; }

  /* Chip cells inside the popover / footer legend */
  .sev-chip {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .sev-chip.NORMAL    { background: #10281a; color: #bbf7d0; }
  .sev-chip.ELEVATED  { background: #2a2312; color: #fef3c7; }
  .sev-chip.HAZARDOUS { background: #3a1e12; color: #fed7aa; }
  .sev-chip.SEVERE    { background: #3a1220; color: #fecaca; }
  .sev-chip.EXTREME   { background: #45123f; color: #f5d0fe; }

  /* Highlighted row (matches chip color band) */
  .sev-table tr.current-NORMAL    { background: #10281a; }
  .sev-table tr.current-NORMAL td { color: #bbf7d0; }
  .sev-table tr.current-ELEVATED    { background: #2a2312; }
  .sev-table tr.current-ELEVATED td { color: #fef3c7; }
  .sev-table tr.current-HAZARDOUS    { background: #3a1e12; }
  .sev-table tr.current-HAZARDOUS td { color: #fed7aa; }
  .sev-table tr.current-SEVERE    { background: #3a1220; }
  .sev-table tr.current-SEVERE td { color: #fecaca; }
  .sev-table tr.current-EXTREME    { background: #45123f; }
  .sev-table tr.current-EXTREME td { color: #f5d0fe; }
  .sev-table tr.current-NORMAL td:first-child,
  .sev-table tr.current-ELEVATED td:first-child,
  .sev-table tr.current-HAZARDOUS td:first-child,
  .sev-table tr.current-SEVERE td:first-child,
  .sev-table tr.current-EXTREME td:first-child { font-weight: 700; }

  /* Footer legend block (always at page bottom, no highlight) */
  .sev-footer-legend {
    max-width: 900px;
    margin: 24px auto 8px auto;
    padding: 16px 20px;
    border-top: 1px solid var(--line);
    background: var(--bg);
  }
  .sev-footer-legend h3 {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 12px 0;
    font-weight: 500;
  }
  .sev-footer-legend .foot-note {
    margin-top: 12px;
    color: var(--ink-3);
    font-size: 10.5px;
    line-height: 1.5;
    font-family: var(--font-mono);
  }

/* ============================================
   NWS Active Alerts — one-liner rows
   Approved design (mobile-alerts mockup): compact rows inserted directly
   above the wind alert-bar (Hurricane Warning) and directly above the flood
   one-liner (Flash Flood Warning). Each row starts with the current Kilo ʻino
   chip label (EXTREME, HAZARDOUS, MODERATE, etc.) as an inline prefix, then
   "NWS: A [EVENT] is in effect for this area →". Tap scrolls to the panel
   below with the supporting data.
   ============================================ */
.nws-oneliner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  text-decoration: none;
  color: #e6edf3;
  border-bottom: 1px solid #1a2436;
  transition: background 0.15s ease;
  background: rgba(220,38,38,0.15);
  border-left: 3px solid #dc2626;
}
.nws-oneliner:hover { background: rgba(220,38,38,0.22); }
.nws-oneliner-icon { flex: 0 0 auto; display: flex; align-items: center; }
.nws-oneliner-msg {
  font-size: 12px;
  color: #fecaca;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.35;
  flex: 1;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.nws-oneliner-msg .prefix {
  background: rgba(0,0,0,0.35);
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 6px;
  font-weight: 700;
  letter-spacing: 0.06em;
  display: inline-block;
}

/* NWS full alert card — placed above the panel that supports the alert.
   Tapping the matching NWS one-liner scrolls the user to this card. */
.nws-full-card {
  background: #1a1010;
  border: 1px solid rgba(220, 38, 38, 0.45);
  border-left: 4px solid #dc2626;
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 16px 0;
  scroll-margin-top: 12px;
  color: #f3e6e6;
}
.nws-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.nws-card-icon { flex: 0 0 auto; }
.nws-card-badge {
  background: #000;
  color: #f5c518;
  border: 1px solid rgba(245, 197, 24, 0.5);
  padding: 2px 8px;
  border-radius: 3px;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.nws-card-title {
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  letter-spacing: 0.02em;
}
.nws-card-headline {
  margin: 4px 0 10px 0;
  color: #fca5a5;
  font-size: 13px;
  line-height: 1.45;
}
/* Polygon coverage clarifier — sits between the NWS headline and the raw
   "LOCATIONS AFFECTED" bulletin text. Uses a warm-neutral tone so it reads as
   an interpretive aid, not an official NWS field. */
.nws-card-coverage {
  margin: 0 0 12px 0;
  padding: 8px 10px;
  border-left: 3px solid #f5c518;
  background: rgba(245, 197, 24, 0.08);
  color: #f2e6b2;
  font-size: 12.5px;
  line-height: 1.5;
}
.nws-card-coverage-label {
  color: #f5c518;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10.5px;
  margin-right: 4px;
}
.nws-card-summary {
  margin: 8px 0 10px 0;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 6px;
  color: #e5e5e5;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  max-height: 320px;
  overflow-y: auto;
}
.nws-card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 10px 0;
  font-size: 12px;
}
.nws-card-meta-row { display: flex; gap: 8px; align-items: baseline; }
.nws-card-meta-label {
  color: #a8a8a8;
  min-width: 84px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nws-card-meta-value { color: #f3e6e6; }
.nws-card-link {
  display: inline-block;
  margin-top: 6px;
  color: #93c5fd;
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid rgba(147, 197, 253, 0.4);
  padding-bottom: 1px;
}
.nws-card-link:hover { color: #bfdbfe; border-bottom-color: #bfdbfe; }

/* ============================================
   Aftermath state — post-storm phase
   ============================================ */
/* Aftermath state renders three sibling cards — the yellow-striped banner
 * (Card A), the mono-labeled "What [town] experienced" impact grid (Card
 * B), and the County of Kauaʻi realtime conditions card (Card C) that
 * sits further down the page. All three share the same panel background,
 * border, and radius so the group reads as one system. */
.aftermath-banner {
  position: relative;
  background: #101827;
  border: 1px solid #24304a;
  border-left: 4px solid #facc15;
  border-radius: 10px;
  padding: 14px 16px 16px;
  margin: 10px 12px 0;
  color: #e9eef7;
  font-family: var(--font-body);
}
.aftermath-banner-inner {
  max-width: 900px;
  margin: 0 auto;
}
/* Chip row: filled yellow dot + "AFTERMATH" (yellow, mono, uppercase),
 * followed by the muted storm name. Sits above the title. */
.aftermath-chip-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.aftermath-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid rgba(250, 204, 21, 0.55);
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.08);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #facc15;
  font-weight: 600;
}
.aftermath-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #facc15;
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.18);
}
.aftermath-chip-storm {
  font-size: 12px;
  color: #9fb0cc;
  font-weight: 400;
}
.aftermath-title {
  font-family: var(--font-display, var(--font-body));
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin: 0 0 6px 0;
}
.aftermath-line {
  font-size: 12px;
  color: #cbd5e1;
  line-height: 1.5;
  margin-bottom: 12px;
}
/* Disclosure button variant of .aftermath-line: subline text ends with a
 * yellow triangle that toggles the nested impact grid. Full-width tap
 * target, no card chrome. */
button.aftermath-disclose {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 12px 0;
  cursor: pointer;
  /* Inherit only the family/weight/style from parent, but keep the
   * .aftermath-line font-size (12px). Using `font: inherit` here was
   * resetting font-size back to the body default (16px) because the button
   * selector has higher specificity than .aftermath-line. */
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
  font-size: 12px;
  line-height: 1.5;
  color: #cbd5e1;
}
button.aftermath-disclose:focus-visible { outline: 2px solid #facc15; outline-offset: 3px; border-radius: 4px; }
.aftermath-disclose-inline {
  color: #ffffff;
  white-space: nowrap;
}
.aftermath-disclose-label { color: #ffffff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.5); text-underline-offset: 2px; }
.aftermath-disclose-tri {
  display: inline-block;
  color: #ffffff;
  font-size: 10px;
  transition: transform 0.15s ease;
}
button.aftermath-disclose[aria-expanded="true"] .aftermath-disclose-tri { transform: rotate(90deg); }

/* Inline impact grid nested inside the aftermath banner (revealed by the
 * disclosure triangle). No card chrome — just spacing + a hairline divider
 * above so it reads as part of the banner. */
.aftermath-impact-inline {
  margin: 4px 0 12px 0;
  padding-top: 12px;
  border-top: 1px solid rgba(159, 176, 204, 0.15);
}
.aftermath-impact-inline[hidden] { display: none; }
/* Yellow CTA button: outlined pill scrolling to Card C on tap. Full-width
 * on mobile, comfortable target height, arrow pinned to the right edge. */
.aftermath-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: rgba(250, 204, 21, 0.06);
  border: 1px solid rgba(250, 204, 21, 0.55);
  border-radius: 8px;
  color: #facc15;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.aftermath-cta:hover { background: rgba(250, 204, 21, 0.11); border-color: rgba(250, 204, 21, 0.75); }
.aftermath-cta:focus-visible { outline: 2px solid #facc15; outline-offset: 3px; }
.aftermath-cta-label { flex: 1 1 auto; }
.aftermath-cta-arrow { flex: 0 0 auto; font-size: 15px; line-height: 1; }

/* Card B: "What [town] experienced" impact grid. Same panel treatment as
 * the aftermath banner but no yellow stripe; 2×2 grid of mono-labeled
 * stats with hairline dividers between rows. */
.aftermath-impact-card {
  background: #101827;
  border: 1px solid #24304a;
  border-radius: 10px;
  padding: 14px 16px 14px;
  margin: 10px 12px 0;
  color: #e9eef7;
  font-family: var(--font-body);
}
.aftermath-impact-inner { max-width: 900px; margin: 0 auto; }
.aftermath-impact-title {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin-bottom: 4px;
}
.aftermath-impact-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #9fb0cc;
  margin-bottom: 12px;
}
.aftermath-impact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.impact-cell {
  min-width: 0;
}
.impact-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7c9a;
  margin-bottom: 4px;
}
.impact-value {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 2px;
}
.impact-value-unit {
  font-weight: 400;
  color: #9fb0cc;
}
.impact-caption {
  font-size: 11px;
  color: #9fb0cc;
  line-height: 1.4;
}
.impact-caption-extra {
  margin-top: 2px;
  color: #7a8ba6;
}

/* Card C: County of Kauaʻi realtime conditions. Rendered near the storm
 * panel so the CTA scroll reveals a distinct destination. */
.aftermath-county-card {
  background: #101827;
  border: 1px solid #24304a;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 12px 12px 0;
  color: #e9eef7;
  /* Clear iOS status bar + safe-area inset + generous breathing room so the
   * section header ("REALTIME CONDITIONS REPORTED BY THE COUNTY OF KAUAʻI")
   * lands fully below the notch when the aftermath CTA scrolls here. */
  scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 96px);
}
.county-card-inner { max-width: 900px; margin: 0 auto; }
.county-card-header {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #facc15;
  font-weight: 600;
  margin-bottom: 8px;
}

.aftermath-hazards-title {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fbbf24;
}
.aftermath-hazards {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.aftermath-hazards li {
  font-size: 12px;
  color: #fde68a;
  padding: 4px 8px;
  background: rgba(251, 191, 36, 0.08);
  border-left: 2px solid #fbbf24;
  border-radius: 0 3px 3px 0;
}
.aftermath-hazards li strong {
  color: #fef3c7;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.aftermath-foot {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

/* Collapse storm panel while in aftermath. Tap to expand.
 * max-height accommodates a two-line storm title (e.g. "Tropical Depression
 * Fourteen-E") plus the advisory metadata line and generous bottom padding
 * so descenders and tags never clip. Padding is relative so 60px → 96px
 * absolute wraps two-line titles safely at 320px viewport width. */
#storm-cards.storm-collapsed .storm-card {
  max-height: 96px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  opacity: 0.72;
  padding-right: 100px; /* reserve space for the "Tap to expand" chip */
  padding-bottom: 16px;
}
#storm-cards.storm-collapsed .storm-card::after {
  content: "Tap to expand →";
  position: absolute;
  right: 12px;
  top: 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  white-space: nowrap;
}
/* When collapsed we ONLY want the storm title (h2) + advisory metadata
 * (.storm-meta) visible. Hide every other direct child so a two-line title
 * has room to breathe without colliding with the "Tap to expand" chip. */
#storm-cards.storm-collapsed .storm-card > *:not(h2):not(.storm-meta) {
  display: none;
}
/* On narrow phones there simply isn't room for a two-line title AND the
 * "Tap to expand" chip on the same row. Move the chip to the bottom-right
 * so the storm title has the full width. */
@media (max-width: 480px) {
  #storm-cards.storm-collapsed .storm-card {
    padding-right: 20px;
    padding-bottom: 32px;
  }
  #storm-cards.storm-collapsed .storm-card::after {
    top: auto;
    bottom: 10px;
    right: 12px;
  }
}
/* Per-card expand: tapping a collapsed card opens ONLY that card so the
 * other storm stays collapsed and reachable without scrolling past a full
 * storm body. */
#storm-cards.storm-collapsed .storm-card.storm-card-expanded {
  max-height: none;
  overflow: visible;
  opacity: 1;
  padding-right: 20px;
  padding-bottom: 18px;
}
#storm-cards.storm-collapsed .storm-card.storm-card-expanded::after {
  content: none;
}
/* Restore every hidden child once the user taps to expand. Uses `revert` so
 * each element falls back to its base display value (block for div, flex for
 * h2, etc.) rather than forcing `display: block` on everything. */
#storm-cards.storm-collapsed .storm-card.storm-card-expanded > *:not(h2):not(.storm-meta) {
  display: revert;
}

/* Official aftermath conditions block (verified data from primary source). */
.aftermath-official {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.aftermath-official li {
  font-size: 12px;
  color: #fecaca;
  padding: 4px 8px;
  background: rgba(239, 68, 68, 0.08);
  border-left: 2px solid #ef4444;
  border-radius: 0 3px 3px 0;
  line-height: 1.45;
}
.aftermath-source-row {
  margin-top: 8px;
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}
.aftermath-source-link {
  font-size: 12px;
  color: #93c5fd;
  text-decoration: none;
  border-bottom: 1px solid rgba(147, 197, 253, 0.4);
  padding-bottom: 1px;
}
.aftermath-source-link:hover { color: #bfdbfe; border-bottom-color: #bfdbfe; }
.aftermath-source-time {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

/* (Legacy <details> disclosure removed — County conditions now render as a
 * dedicated card lower on the page, reached via the yellow CTA button in
 * the aftermath banner.) */

/* ---------- Formation-area tile (CPHC Tropical Weather Outlook) ----------
 * Pre-classified systems CPHC is watching. Not yet named storms. Styled to
 * match the surrounding dark app: same panel color, ink colors, mono meta
 * line, and card-inside-card treatment mirroring the storm card's .approach
 * block. */
#formation-areas { padding: 0; }
#formation-areas:empty { display: none; }
.form-area-wrap {
  border-bottom: 1px solid var(--line);
  padding: 18px 20px;
  background: var(--panel);
}
.form-area-wrap h3 {
  margin: 0 0 6px;
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
}
.form-area-wrap .form-area-sub {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.45;
}
.form-area-wrap .form-area-sub a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(77, 208, 225, 0.35);
}
.form-area-wrap .form-area-sub a:hover {
  border-bottom-color: var(--accent);
}
.form-area {
  display: block;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-3);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 0 0 10px;
  background: var(--bg-2);
  color: var(--ink);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.form-area:hover, .form-area:focus {
  background: var(--panel-2);
  border-color: var(--ink-3);
  outline: none;
}
.form-area:last-child { margin-bottom: 0; }
.form-area-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.form-area-distance {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--ink-3);
  margin: 0 0 10px;
  letter-spacing: 0.02em;
}
.form-area-probs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 8px;
}
.form-area-prob {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 10px;
  font-family: var(--font-mono);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.form-area-prob strong { font-weight: 700; font-size: 12px; }
.form-area-prob-low    { background: #1a1a2a; color: var(--ink-2); }
.form-area-prob-medium { background: #2a2312; color: var(--warn); }
.form-area-prob-high   { background: #3a1220; color: var(--danger); }
.form-area-desc {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 8px 0 0;
}

/* Severity accent stripe on the left border (based on max prob). */
.form-area[data-max-cat="Medium"] { border-left-color: var(--warn); }
.form-area[data-max-cat="High"]   { border-left-color: var(--danger); }