/* radar hero strip (full width of the weather panel) */
  .wx-radar { margin: 0 0 2px; }
  .wx-radar[hidden] { display: none; }
  .wx-radar-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: #0c1a2e;
    box-shadow: inset 0 0 0 1px var(--panel-brd), inset 0 -40px 60px -30px rgba(0,0,0,0.6);
    cursor: crosshair;
  }
  .wx-radar-hint {
    position: absolute; left: 8px; top: 8px; z-index: 3;
    padding: 3px 8px; border-radius: 999px;
    font: 600 0.66rem/1.4 var(--mono); letter-spacing: 0.02em;
    color: #e8eef6;
    background: rgba(12,20,34,0.7);
    border: 1px solid rgba(255,255,255,0.16);
    pointer-events: none;
    transition: opacity 0.5s ease;
  }
  .wx-radar-stage.picked .wx-radar-hint { opacity: 0; }
  @media (max-width: 560px) { .wx-radar-hint { font-size: 0.58rem; left: 6px; top: 6px; } }
  .wx-radar-base,
  .wx-radar-frames img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .wx-radar-base { opacity: 0.85; }
  @media (prefers-color-scheme: dark) {
    .wx-radar-base { filter: invert(1) hue-rotate(190deg) brightness(1.1); opacity: 0.5; }
  }
  .wx-radar-frames img { opacity: 0; transition: opacity 0.12s linear; }
  .wx-radar-frames img.active { opacity: 1; }
  .wx-radar-pin {
    position: absolute;
    width: 12px; height: 12px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #ff5a5a;
    box-shadow: 0 0 0 3px rgba(255,90,90,0.35), 0 0 0 1px #fff inset;
  }
  .wx-radar-pin[hidden] { display: none; }
  .wx-radar-pin::after {
    content: "";
    position: absolute; inset: -6px;
    border-radius: 50%;
    border: 1px solid #ff5a5a;
    animation: radarPing 2.6s ease-out infinite;
  }
  @keyframes radarPing { from { transform: scale(0.5); opacity: 0.7; } to { transform: scale(2.4); opacity: 0; } }
  .wx-radar-loading {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font: 400 0.78rem/1 var(--mono);
    color: rgba(255,255,255,0.7);
    background: rgba(12,26,46,0.35);
  }
  .wx-radar-loading[hidden] { display: none; }
  .wx-radar-bar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
    font: 400 0.7rem/1 var(--mono);
    color: var(--ink-dim);
  }
  .wx-radar-row { display: flex; align-items: center; gap: 10px; }
  #wx-radar-play {
    flex-shrink: 0;
    width: 30px; height: 24px;
    font-size: 0.62rem;
    color: #10202e;
    background: var(--accent);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
  }
  #wx-radar-play:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
  #wx-radar-scrub { width: 100%; accent-color: var(--accent); }
  .wx-radar-time { flex: 1; color: var(--ink-soft); }
  .wx-radar-src { flex-shrink: 0; color: var(--ink-dim); text-decoration: none; border-bottom: 1px dotted currentColor; }
  .wx-radar-src:hover { color: var(--ink-soft); }
  @media (prefers-reduced-motion: reduce) {
    .wx-radar-pin::after { animation: none; }
  }

  /* weather panel body is a stack of full-width bands (current readout,
     CONDITIONS instruments, forecast strip); .wx-cols now only pairs the
     two one-liner data bubbles (air quality / rivers) side by side */
  .wx-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 14px;
  }
  @media (min-width: 620px) {
    .wx-cols { grid-template-columns: 1fr 1fr; align-items: start; gap: 14px 20px; }
  }

  /* --- weather ------------------------------------------------ */
  .wx-loc {
    font: 600 0.82rem/1.3 var(--mono);
    letter-spacing: 0.02em;
    color: var(--ink-soft);
    margin-bottom: 8px;
  }
  .wx-current {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }
  .wx-temp { font: 300 2.6rem/1 var(--sans); letter-spacing: -0.03em; }
  .wx-cond {
    font: 400 0.95rem/1.3 var(--sans);
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }
  .wx-cond-ico { font-size: 1.05rem; line-height: 1; }

  /* notable weather: make the condition + the panel dot obvious */
  .wx-current-notable {
    padding-left: 12px;
    border-left: 3px solid var(--wx-mood, var(--accent));
    border-radius: 2px;
  }
  .wx-mood-storm { --wx-mood: #ff8a3d; }
  .wx-mood-snow  { --wx-mood: #8fd0ff; }
  .wx-mood-rain  { --wx-mood: #5eb7ec; }
  .wx-mood-fog   { --wx-mood: #b9c4cf; }
  .wx-mood-wind  { --wx-mood: #7fd6c4; }

  .wx-mood-storm .wx-cond { color: #ffb454; font-weight: 700; }
  .wx-mood-snow  .wx-cond { color: #bfe4ff; font-weight: 700; }
  .wx-mood-rain  .wx-cond { color: #9fd3f2; font-weight: 600; }
  .wx-mood-fog   .wx-cond { font-style: italic; }
  .wx-mood-wind  .wx-cond { color: #a9e4d8; font-weight: 600; }

  .wx-mood-storm .wx-cond-ico,
  .wx-mood-snow  .wx-cond-ico,
  .wx-mood-rain  .wx-cond-ico,
  .wx-mood-wind  .wx-cond-ico { font-size: 1.3rem; }
  .wx-mood-storm .wx-cond-ico { animation: wxThrob 1.5s ease-in-out infinite; }

  #weather.wx-mood-storm h2 .dot,
  #weather.wx-mood-snow  h2 .dot,
  #weather.wx-mood-rain  h2 .dot,
  #weather.wx-mood-fog   h2 .dot,
  #weather.wx-mood-wind  h2 .dot {
    background: var(--wx-mood);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--wx-mood) 32%, transparent),
                0 0 12px 1px var(--wx-mood);
  }
  #weather.wx-mood-storm h2 .dot { animation: wxThrob 1.4s ease-in-out infinite; }

  @keyframes wxThrob {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.22); }
  }
  @media (prefers-reduced-motion: reduce) {
    .wx-mood-storm .wx-cond-ico,
    #weather.wx-mood-storm h2 .dot { animation: none; }
  }

  .wx-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
  }
  @media (max-width: 440px) {
    .wx-strip { grid-template-columns: repeat(3, 1fr); }
  }
  .wx-cell {
    text-align: center;
    padding: 8px 2px;
    background: rgba(9, 20, 37, 0.22);
    border: 1px solid var(--panel-brd);
    border-radius: 10px;
  }
  .wx-hr { font: 500 0.66rem/1 var(--mono); color: var(--ink-dim); }
  .wx-ic { font-size: 1.25rem; margin: 5px 0 3px; }
  .wx-tp { font: 600 0.95rem/1 var(--sans); }
  .wx-pr { font: 400 0.62rem/1 var(--mono); color: var(--accent-2); min-height: 0.8em; margin-top: 3px; }

  .wx-alert {
    border-radius: 12px;
    border: 1px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    margin-bottom: 14px;
    overflow: hidden;
  }
  .wx-alert.sev-severe, .wx-alert.sev-extreme {
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 20%, transparent);
  }
  /* civil / public-safety alert (AMBER, evacuation, shelter-in-place,
     hazmat...): always outranks weather, gets the loud treatment */
  .wx-alert.is-civil {
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 26%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 45%, transparent);
  }
  .wx-alert.is-civil .wx-alert-head { color: #fff; }
  .wx-alert-tag {
    display: inline-block;
    font: 700 0.56rem/1 var(--mono);
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--danger);
    border: 1px solid var(--danger); border-radius: 4px;
    padding: 2px 5px; margin-right: 7px; vertical-align: 1px;
  }
  .wx-alert-action {
    margin: 5px 0 3px;
    font: 700 0.72rem/1.3 var(--sans);
    color: var(--danger);
  }
  .wx-alert-head {
    display: block;
    width: 100%;
    text-align: left;
    font: 700 0.82rem/1.4 var(--sans);
    color: var(--ink);
    background: transparent;
    border: 0;
    padding: 11px 13px;
    cursor: pointer;
  }
  .wx-alert-head::after { content: " ▸"; color: var(--ink-soft); }
  .wx-alert-head.open::after { content: " ▾"; }
  .wx-alert-detail {
    padding: 0 13px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .wx-alert-detail[hidden] { display: none; }
  .wx-alert-item strong { display: block; font-size: 0.8rem; }
  .wx-alert-area { font: 400 0.72rem/1.3 var(--mono); color: var(--ink-soft); margin: 2px 0 6px; }
  .wx-alert-item p { margin: 0; font: 400 0.78rem/1.5 var(--sans); color: var(--ink-soft); white-space: pre-wrap; }

  /* lightning proximity - one contextual line under the alert, click to
     expand the ring breakdown (radar loop is already right below it) */
  .wx-lightning {
    margin: 8px 0 0; padding: 8px 11px;
    border: 1px solid color-mix(in srgb, #ffd27a 45%, var(--panel-brd));
    border-radius: 10px;
    background: color-mix(in srgb, #ffd27a 10%, transparent);
    font: 500 0.82rem/1.35 var(--mono); color: var(--ink);
  }
  .wx-lightning[hidden] { display: none; }
  .wx-lightning.wx-lx-close {
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 14%, transparent);
  }
  .wx-lx-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .wx-lightning.wx-lx-can-open .wx-lx-line { cursor: pointer; }
  .wx-lightning.wx-lx-can-open .wx-lx-src::after { content: " ▸"; color: var(--ink-dim); }
  .wx-lightning.wx-lx-open .wx-lx-src::after { content: " ▾"; }
  .wx-lx-line:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 4px; }
  .wx-lx-icon { font-size: 0.95rem; }
  .wx-lx-txt { flex: 1; min-width: 0; }
  .wx-lx-src { font: 400 0.66rem/1.4 var(--mono); color: var(--ink-dim); }
  .wx-lx-detail {
    margin-top: 6px; padding-top: 6px;
    border-top: 1px solid var(--panel-brd);
    font: 400 0.72rem/1.5 var(--mono); color: var(--ink-dim);
  }
  .wx-lx-detail[hidden] { display: none; }
  .wx-lx-plot { width: 116px; height: 116px; display: block; margin: 2px 0 4px; }
  .wx-lxp-ring { fill: none; stroke: var(--panel-brd); stroke-width: 1; stroke-dasharray: 2 3; }
  .wx-lxp-ring-o { stroke-dasharray: none; stroke: color-mix(in srgb, var(--ink-dim) 55%, transparent); }
  .wx-lxp-you { stroke: var(--ink-soft); stroke-width: 1.4; }
  .wx-lxp-n { fill: var(--ink-dim); font: 700 8px var(--mono); text-anchor: middle; }
  .wx-lxp-s { fill: #ffd27a; }
  .wx-lxp-s-fresh { fill: var(--danger); }
  .wx-lx-cap { font-size: 0.68rem; }

  .wx-controls { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
  .wx-controls button {
    font: 600 0.75rem/1 var(--sans);
    letter-spacing: 0.02em;
    color: #1a2b3c;
    background: var(--accent);
    border: 0;
    border-radius: 8px;
    padding: 9px 13px;
    cursor: pointer;
  }
  .wx-controls button.wx-ghost { color: var(--ink-soft); background: transparent; border: 1px solid var(--panel-brd); }
  .wx-controls button:disabled { opacity: 0.55; cursor: default; }
  .wx-controls button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

  .wx-form { margin-top: 12px; }
  .wx-form[hidden] { display: none; }
  .wx-form-label {
    display: block;
    font: 600 0.64rem/1 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 5px;
  }
  .wx-form-row { display: flex; gap: 8px; flex-wrap: wrap; }
  .wx-form input {
    flex: 1 1 12rem;
    min-width: 0;
    font: 400 0.9rem/1.4 var(--sans);
    color: var(--ink);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--panel-brd);
    border-radius: 8px;
    padding: 8px 10px;
  }
  .wx-form input::placeholder { color: var(--ink-dim); }
  .wx-form input:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }
  .wx-form button {
    font: 600 0.75rem/1 var(--sans);
    color: #1a2b3c;
    background: var(--accent);
    border: 0;
    border-radius: 8px;
    padding: 8px 13px;
    cursor: pointer;
  }
  .wx-form button.wx-ghost { color: var(--ink-soft); background: transparent; border: 1px solid var(--panel-brd); }
  .wx-form button:disabled { opacity: 0.55; cursor: default; }
  .wx-form-msg { margin: 8px 0 0; font: 400 0.76rem/1.4 var(--mono); color: var(--ink-dim); min-height: 1em; }
  .wx-form-msg.err { color: var(--danger); }
  /* air quality + rivers each float in their own bubble - a slight DARKEN,
     not a lighten, so text inside keeps its contrast floor */
  .wx-aqi, .wx-water {
    background: rgba(9, 20, 37, 0.24);
    border: 1px solid var(--panel-brd);
    border-radius: 14px;
    padding: 13px 15px;
  }
  @media (prefers-color-scheme: dark) {
    .wx-aqi, .wx-water { background: rgba(0, 0, 0, 0.22); }
  }
  .wx-bubble-h {
    flex-basis: 100%;
    font: 700 0.62rem/1 var(--mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 9px;
  }

  /* CONDITIONS: a full-width instrument band (wind / feels like /
     humidity) between the forecast strip and the data bubbles */
  .wx-inst {
    background: rgba(9, 20, 37, 0.24);
    border: 1px solid var(--panel-brd);
    border-radius: 14px;
    padding: 14px 16px;
    margin-top: 14px;
  }
  @media (prefers-color-scheme: dark) {
    .wx-inst { background: rgba(0, 0, 0, 0.22); }
  }
  .wx-inst[hidden] { display: none; }
  .wx-inst.muted {
    color: var(--ink-dim);
    font: 400 0.78rem/1.4 var(--mono);
  }
  .wx-inst-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 12px 8px;
  }
  .wx-gauge {
    flex: 0 1 150px;
    min-width: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }
  .wx-gauge svg {
    width: 92px;
    height: 92px;
    display: block;
    overflow: visible;
  }
  .wx-gauge-cap {
    font: 700 0.56rem/1 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }
  .wx-gauge-sub {
    font: 400 0.7rem/1.2 var(--mono);
    color: var(--ink-soft);
    text-align: center;
  }
  /* phones: keep all three dials on one row, let them shrink */
  @media (max-width: 560px) {
    .wx-inst-row { flex-wrap: nowrap; gap: 4px; }
    .wx-gauge { flex: 1 1 0; min-width: 0; }
    .wx-gauge svg { width: 100%; max-width: 88px; height: auto; }
    .wx-gauge-sub { font-size: 0.64rem; }
  }
  .wx-bubble-h::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--bubble-dot, var(--accent-2));
    margin-right: 7px;
    vertical-align: 1px;
  }

  .wx-aqi {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    font: 400 0.82rem/1.4 var(--sans);
  }
  .wx-aqi.muted { color: var(--ink-dim); font: 400 0.78rem/1.4 var(--mono); }
  .wx-aqi.muted .wx-bubble-h { color: var(--ink-dim); }
  .aqi-pill {
    font: 700 0.78rem/1 var(--mono);
    letter-spacing: 0.02em;
    color: #10202e;
    background: var(--aqi, var(--accent));
    border-radius: 999px;
    padding: 5px 9px;
  }
  .aqi-label { color: var(--ink); font-weight: 600; }
  .aqi-area { color: var(--ink-soft); }
  .aqi-src { color: var(--ink-dim); font: 400 0.66rem/1 var(--mono); margin-left: auto; }
  .aqi-src.modeled { color: var(--accent-2); }

  /* --- water / rivers -------------------------------------- */
  .wx-water[hidden] { display: none; }
  .wx-water .wtr-h::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #58b6e8;
    margin-right: 7px;
    vertical-align: 1px;
  }
  .wtr-h {
    font: 700 0.62rem/1 var(--mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 8px;
  }
  .wtr-warn {
    display: flex;
    gap: 6px;
    align-items: baseline;
    font: 600 0.8rem/1.4 var(--sans);
    color: var(--accent);
    margin-bottom: 8px;
  }
  .wtr-warn.sev { color: var(--danger); }
  .wtr-warn::before { content: "\26A0"; }

  .wtr-gauge { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
  .wtr-name { font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px dotted currentColor; }
  .wtr-name:hover { color: var(--accent-2); }
  .wtr-fig { font: 500 0.82rem/1.3 var(--mono); color: var(--ink); }
  .wtr-sub { font: 400 0.72rem/1.3 var(--mono); color: var(--ink-dim); }

  .wtr-arrow { display: inline-flex; width: 14px; height: 14px; vertical-align: -2px; }
  .wtr-arrow svg { width: 100%; height: 100%; }
  .wtr-arrow.rising { color: #ff9d3d; }
  .wtr-arrow.falling { color: #58b6e8; }
  .wtr-arrow.steady { color: var(--ink-dim); }
  .wtr-arrow.unknown { color: var(--ink-dim); opacity: 0.5; }
  .wtr-arrow.rising svg { animation: wtrUp 1.8s ease-in-out infinite; }
  .wtr-arrow.falling svg { animation: wtrDn 1.8s ease-in-out infinite; }
  @keyframes wtrUp { 0%,100% { transform: translateY(1px); } 50% { transform: translateY(-1.5px); } }
  @keyframes wtrDn { 0%,100% { transform: translateY(-1px); } 50% { transform: translateY(1.5px); } }

  .wtr-cat {
    font: 700 0.6rem/1 var(--mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 6px;
    border-radius: 999px;
    color: #10202e;
    background: var(--wtr-cat, #7fbf7f);
  }
  .wtr-more {
    margin-top: 8px;
    font: 400 0.74rem/1 var(--mono);
    color: var(--ink-soft);
    background: transparent;
    border: 0;
    padding: 2px 0;
    cursor: pointer;
  }
  .wtr-more::after { content: " \25B8"; }
  .wtr-more.open::after { content: " \25BE"; }
  .wtr-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
  .wtr-list[hidden] { display: none; }
  .wtr-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 7px; font-size: 0.78rem; }
  .wtr-src { margin: 10px 0 0; font: 400 0.66rem/1.4 var(--mono); color: var(--ink-dim); }
  .wx-water.muted { color: var(--ink-dim); font: 400 0.78rem/1.4 var(--mono); }

  .wx-station { margin: 14px 0 0; font: 400 0.78rem/1.4 var(--sans); }
  .wx-station a {
    color: var(--accent-2);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
  }
  .wx-station a:hover { color: var(--ink); }
  .wx-src { margin: 8px 0 0; font: 400 0.68rem/1.4 var(--mono); color: var(--ink-dim); }