:root {
    color-scheme: light;
    --surface-0:      #f4f4f2;
    --surface-1:      #fcfcfb;
    --surface-2:      #ffffff;
    --border:         #e4e3df;
    --text-primary:   #0b0b0b;
    --text-secondary: #52514e;
    --text-muted:     #8a8983;
    --series-1:       #2a78d6;  /* categorical slot 1: blue */
    --series-2:       #eb6834;  /* categorical slot 2: orange */
    --series-3:       #1baf7a;  /* categorical slot 3: aqua */
    --neutral-series:  #7a6fd0;  /* single global series (SFI), not a station */
    --grid:           #ececea;
    --good:     #0ca30c;
    --warning:  #fab219;
    --serious:  #ec835a;
    --critical: #d03b3b;
    --closed:   #c7c6c1;
    --pota-bg:  #e1f3df;  /* pastel green - parks */
    --pota-fg:  #227a3c;
    --sota-bg:  #f5ecd8;  /* pastel ochre - summits/rock */
    --sota-fg:  #8a5a1f;
    --brand-orange:      #d9722f;
    --brand-orange-halo: rgba(217, 114, 47, .22);
    --font-sans: -apple-system, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) {
      color-scheme: dark;
      --surface-0:      #101110;
      --surface-1:      #1a1b1a;
      --surface-2:      #202120;
      --border:         #303130;
      --text-primary:   #ffffff;
      --text-secondary: #c3c2b7;
      --text-muted:     #8d8c85;
      --series-1:       #3987e5;
      --series-2:       #d95926;
      --series-3:       #199e70;
      --neutral-series:  #9a8ff0;
      --grid:           #2a2b2a;
      --closed:   #46453f;
      --pota-bg:  #1c3322;
      --pota-fg:  #7fd99a;
      --sota-bg:  #362c19;
      --sota-fg:  #e0b56b;
      --brand-orange:      #f0a066;
      --brand-orange-halo: rgba(240, 160, 102, .16);
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --surface-0:      #101110;
    --surface-1:      #1a1b1a;
    --surface-2:      #202120;
    --border:         #303130;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #8d8c85;
    --series-1:       #3987e5;
    --series-2:       #d95926;
    --series-3:       #199e70;
    --neutral-series:  #9a8ff0;
    --grid:           #2a2b2a;
    --closed:   #46453f;
    --pota-bg:  #1c3322;
    --pota-fg:  #7fd99a;
    --sota-bg:  #362c19;
    --sota-fg:  #e0b56b;
    --brand-orange:      #f0a066;
    --brand-orange-halo: rgba(240, 160, 102, .16);
  }

  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--surface-0);
    font-family: var(--font-sans);
    color: var(--text-primary);
  }
  .page { max-width: 1080px; margin: 0 auto; padding: 24px 20px 40px; }

  .hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
  .hdr-title { position: relative; display: flex; align-items: center; gap: 16px; }
  .hdr .logo { border-radius: 13px; flex: none; }
  .hdr h1 { font-family: var(--font-sans); font-size: 26px; font-weight: 200; margin: 0; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-orange); }
  .hdr .tagline { font-size: 13.5px; color: var(--text-secondary); margin-top: 4px; }
  .hdr-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin-left: auto; }

  /* Line-art assets are pure dark strokes on transparent - flipping to
     white via filter:invert in dark mode is enough to keep them legible
     on both themes without shipping a second set of images. */
  .hdr-llama { display: block; height: 78px; width: auto; flex: none; position: relative; }
  .hdr-wave { display: block; height: 11px; width: 190px; max-width: 100%; margin: 5px 0; }
  @media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) .hdr-llama,
    :root:where(:not([data-theme="light"])) .hdr-wave { filter: invert(1); }
  }
  :root[data-theme="dark"] .hdr-llama,
  :root[data-theme="dark"] .hdr-wave { filter: invert(1); }

  /* Soft glow behind the logo only - not the whole page, so the data
     below stays flat and legible. */
  .hdr-halo {
    position: absolute; left: -30px; top: 50%; transform: translateY(-50%);
    width: 340px; height: 200px;
    background: radial-gradient(ellipse at center, var(--brand-orange-halo), transparent 72%);
    pointer-events: none; z-index: -1;
  }
  @media (max-width: 480px) {
    .hdr-llama { height: 56px; }
    .hdr-wave { width: 140px; }
    .hdr h1 { font-size: 19px; }
    .hdr-halo { width: 240px; height: 150px; left: -20px; }
    /* Every real phone falls under this breakpoint, so force the stacked
       layout explicitly here instead of relying on .hdr's flex-wrap to
       break the line organically - that depends on exact available width,
       which iOS's standalone home-screen web app mode (no browser chrome,
       different safe-area handling) can compute a few px differently than
       regular Safari, occasionally keeping .hdr-right on the title's row
       and defeating its margin-left:auto right-alignment. A fixed
       flex-direction:column here is immune to that, on any width class. */
    .hdr { flex-wrap: nowrap; flex-direction: column; align-items: stretch; }
    /* max-width caps this shrink-to-fit box at the header's own width - without
       it, a long unbroken line (e.g. the "Your locator: ..." note) sets the
       box's preferred width past the viewport instead of wrapping inside it. */
    .hdr-right { align-self: flex-end; margin-left: 0; max-width: 100%; }
    .hdr-locator { max-width: 100%; }
  }

  /* Stat strip: the "is this thing alive, and covering what" facts, spread
     across the full width instead of stacked small in the header corner. */
  .stat-strip {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    border-top: 1px solid var(--border); padding-top: 10px; margin-bottom: 20px;
    font-size: 12.5px; color: var(--text-secondary);
  }
  .stat-strip .stat-item { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
  .stat-strip .stat-sep { width: 1px; height: 13px; background: var(--border); flex: none; }
  .hdr-utility-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
  .version-link { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); text-decoration: none; }
  .version-link:hover { color: var(--text-primary); }
  .update-badge {
    padding: 1px 6px; border-radius: 999px; font-size: 10.5px; font-weight: 600;
    color: #7a5200; background: var(--warning); letter-spacing: .01em;
  }
  .theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; padding: 0;
    border: none; border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer;
  }
  .theme-toggle:hover { color: var(--text-primary); background: var(--surface-2); }
  .theme-toggle .theme-icon-moon { display: none; }
  .theme-toggle.is-dark .theme-icon-sun { display: none; }
  .theme-toggle.is-dark .theme-icon-moon { display: block; }
  .coverage-note { font-size: 11px; color: var(--text-muted); margin: -6px 0 14px 2px; }
  .live-clock { text-align: right; font-family: var(--font-mono); }
  .clock-utc { font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-secondary); letter-spacing: .01em; }
  .clock-date { font-size: 11px; font-weight: 500; color: var(--text-muted); letter-spacing: .03em; margin-top: 1px; font-family: var(--font-sans); }
  .clock-local { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-muted); margin-top: 3px; }
  .clock-tz { font-size: 0.68em; font-weight: 500; color: var(--text-muted); font-family: var(--font-sans); }
  .hdr-locator { font-size: 11px; color: var(--text-muted); margin-top: 3px; text-align: right; }
  .hdr-locator.is-far { color: var(--warning); font-weight: 600; }
  .clock-colon { animation: clock-blink 1s step-start infinite; }
  @keyframes clock-blink { 50% { opacity: .3; } }
  .data-updated { display: flex; align-items: center; gap: 5px; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
  .data-updated .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none; }

  /* Reload: no browser chrome/pull-to-refresh once this is added to the iOS
     home screen (standalone display-mode), so an explicit control is needed. */
  .reload-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; padding: 0; margin-left: 2px;
    border: none; border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer;
  }
  .reload-btn:hover { color: var(--text-primary); background: var(--surface-2); }
  .reload-btn svg { transition: transform .2s ease; }
  .reload-btn.spinning svg { animation: reload-spin .6s linear infinite; }
  @keyframes reload-spin { to { transform: rotate(360deg); } }

  /* Pull-to-refresh: manually reproduces the gesture, since iOS standalone
     web apps don't get Safari's native pull-to-refresh. */
  .ptr-indicator {
    position: fixed; top: 0; left: 50%; z-index: 1000;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted);
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    opacity: 0; pointer-events: none;
    transform: translate(-50%, -46px);
  }
  .ptr-indicator.ready { color: var(--good); }
  .ptr-indicator.refreshing svg { animation: reload-spin .6s linear infinite; }

  /* Hero: the answer to "is HF worth it right now" - MUF(D) + band chips per
     station, plus a square space-weather glance tile squeezed into the same
     row. Flex (not grid) so the square tile can hold a fixed size while the
     station cards share the rest of the width. */
  .hero-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
  .hero-card, .hero-sw-tile {
    background: var(--surface-1); border: 1px solid var(--border); border-top: 3px solid var(--hero-color, var(--series-1));
    border-radius: 10px; transition: opacity .15s ease, border-color .15s ease;
    text-decoration: none; color: inherit; cursor: pointer;
  }
  .hero-card:hover, .hero-sw-tile:hover { border-color: var(--hero-color, var(--neutral-series)); }
  .hero-card { flex: 1 1 230px; padding: 12px 16px; }
  .hero-card.dim { opacity: .35; }
  .hero-name { font-family: var(--font-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--hero-color, var(--text-primary)); margin-bottom: 2px; }
  .hero-distance { font-family: var(--font-sans); font-size: 10.5px; font-weight: 500; text-transform: none; letter-spacing: normal; color: var(--text-muted); margin-left: 7px; }
  .hero-value-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .hero-value { font-family: var(--font-mono); font-size: 32px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .hero-unit { font-size: 12px; color: var(--text-muted); margin-left: 3px; font-weight: 500; }
  .hero-sub { font-size: 10.5px; color: var(--text-muted); }
  .hero-spark { margin-top: 4px; height: 22px; width: 100%; display: block; }
  .hero-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }

  .hero-sw-tile {
    flex: 0 0 168px; border-top-color: var(--neutral-series);
    padding: 10px 14px; display: flex; flex-direction: column; gap: 4px;
  }
  .hero-sw-tile .sw-title { display: flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--neutral-series); margin-bottom: 2px; }
  .hero-sw-tile .sw-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font-size: 12px; }
  .hero-sw-tile .sw-row .k { color: var(--text-secondary); }
  .hero-sw-tile .sw-row .v-badge {
    display: inline-flex; align-items: baseline; gap: 4px; padding: 1px 7px; border-radius: 6px;
    font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .hero-sw-tile .sw-row .v-badge .rating { font-size: 9.5px; font-weight: 700; opacity: .85; }
  .band-legend-shared { display: flex; align-items: center; gap: 12px; font-size: 10.5px; color: var(--text-muted); flex-wrap: wrap; margin: 0 0 16px 2px; }
  .band-legend-shared .item { display: flex; align-items: center; gap: 4px; }
  .band-legend-shared .sw { width: 8px; height: 8px; border-radius: 3px; flex: none; }

  /* Ticker: more European MUF(D) readings as small pill chips, no charts -
     these stations only ever carry a single current value, never history. */
  .ticker-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 14px 2px; }
  .ticker-row .ticker-label { font-family: var(--font-mono); color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; font-weight: 650; font-size: 10px; margin-right: 2px; }
  .ticker-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--surface-1); border: 1px solid var(--border); border-radius: 999px;
    padding: 4px 10px; font-size: 11.5px; color: var(--text-primary); white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .ticker-chip .ticker-name { font-family: var(--font-mono); font-weight: 650; }
  .ticker-chip .ticker-country { color: var(--text-muted); font-size: 10px; font-weight: 650; letter-spacing: .02em; }
  .ticker-chip .ticker-value { color: var(--text-muted); }

  /* Secondary metrics: same tile look, smaller/quieter - de-emphasized by design */
  .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 8px; margin-bottom: 16px; }
  .tile { background: var(--surface-1); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; transition: opacity .15s ease, border-color .15s ease; }
  .tile.dim { opacity: .35; }
  .tile .label { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
  .tile .row { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; }
  .tile .value { font-family: var(--font-mono); font-size: 16px; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; }
  .tile .unit { font-size: 9.5px; color: var(--text-muted); margin-left: 2px; font-weight: 500; }
  .tile .delta { font-size: 10px; font-weight: 600; white-space: nowrap; }
  .tile .delta.up { color: var(--good); }
  .tile .delta.down { color: var(--critical); }
  .tile .delta.flat { color: var(--text-muted); }
  .tile .spark { margin-top: 5px; height: 16px; width: 100%; display: block; }
  .tile.time .value { font-size: 14px; }

  .section-title { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 13px; font-weight: 650; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin: 20px 0 8px; scroll-margin-top: 12px; }
  .section-title:first-of-type { margin-top: 4px; }
  .section-title svg { flex: none; }

  .map-cta {
    display: flex; align-items: center; gap: 10px; flex-wrap: baseline;
    background: var(--surface-1); border: 1px solid var(--border); border-radius: 9px;
    padding: 9px 14px; margin-bottom: 14px; text-decoration: none; color: inherit;
    transition: border-color .15s ease, background .15s ease;
  }
  .map-cta:hover { border-color: var(--neutral-series); background: var(--surface-2); }
  .map-cta-icon { flex: none; color: var(--neutral-series); display: flex; }
  .map-cta-title { font-size: 13px; font-weight: 650; color: var(--text-primary); white-space: nowrap; }
  .map-cta-title .ext-arrow { color: var(--neutral-series); font-weight: 650; }
  .map-cta-sub { font-size: 11.5px; color: var(--text-muted); }

  .chart-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px 8px; margin-bottom: 14px; }
  .chart-card .chead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; flex-wrap: wrap; gap: 8px; }
  .chart-card h2 { font-size: 13px; font-weight: 650; margin: 0; }
  .legend { display: flex; gap: 6px; flex-wrap: wrap; }
  .legend button {
    display: flex; align-items: center; gap: 6px; font: inherit; font-size: 11.5px; color: var(--text-secondary);
    background: none; border: 1px solid transparent; border-radius: 6px; padding: 3px 8px; cursor: pointer;
  }
  .legend button:hover { background: var(--surface-2); border-color: var(--border); }
  .legend button.hidden { opacity: .4; text-decoration: line-through; }
  .legend .swatch { width: 14px; height: 2px; border-radius: 1px; flex: none; }

  .chart-wrap { position: relative; }
  svg.chart { width: 100%; height: 190px; display: block; overflow: visible; touch-action: none; cursor: crosshair; }
  .gridline { stroke: var(--grid); stroke-width: 1; }
  .axis-label { fill: var(--text-muted); font-size: 10px; }
  .series-line { fill: none; stroke-width: 2; transition: opacity .15s ease; }
  .series-line.hidden { opacity: 0; }
  .crosshair { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 2 2; opacity: .6; }
  .hover-dot { r: 3.5; stroke: var(--surface-1); stroke-width: 2; }
  .hoverlayer { opacity: 0; transition: opacity .1s ease; pointer-events: none; }
  .hoverlayer.show { opacity: 1; }
  .tooltip-box { fill: var(--surface-2); stroke: var(--border); rx: 6; }
  .tooltip-text { font-size: 10.5px; fill: var(--text-secondary); }
  .tooltip-text.strong { fill: var(--text-primary); font-weight: 650; }
  .overlay-rect { fill: transparent; }

  /* Band opening chips, now shown inline inside each hero card */
  .band-chip {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; padding: 3px 7px; border-radius: 999px;
    font-family: var(--font-mono); font-size: 10px; font-weight: 650; color: #ffffff;
  }
  .disclaimer { font-size: 10.5px; color: var(--text-muted); margin-top: 10px; }

  /* POTA activator list */
  .pota-row { display: flex; align-items: center; gap: 10px; padding: 7px 0 7px 10px; border-bottom: 1px solid var(--border); border-left: 3px solid transparent; font-size: 12.5px; }
  .pota-row:last-child { border-bottom: none; }
  .pota-row.pota { border-left-color: var(--pota-fg); }
  .pota-row.sota { border-left-color: var(--sota-fg); }
  .pota-band { flex: none; }
  .network-tag { flex: none; font-family: var(--font-mono); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border: 1px solid transparent; border-radius: 4px; padding: 1px 4px; }
  .network-tag.pota { background: var(--pota-bg); color: var(--pota-fg); }
  .network-tag.sota { background: var(--sota-bg); color: var(--sota-fg); }
  .pota-call-wrap { display: flex; align-items: center; gap: 5px; flex: none; min-width: 92px; }
  .pota-profile-icon { display: flex; color: var(--text-muted); flex: none; }
  .pota-profile-icon:hover { color: var(--good); }
  .pota-call { font-weight: 650; color: inherit; text-decoration: none; }
  .pota-call:hover { text-decoration: underline; }
  .pota-park { color: var(--text-secondary); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pota-park .ref { color: var(--text-primary); font-weight: 600; text-decoration: none; }
  .pota-park .ref:hover { text-decoration: underline; }
  .pota-meta { flex: none; color: var(--text-muted); font-size: 11px; text-align: right; white-space: nowrap; }
  .pota-empty { color: var(--text-muted); font-size: 12.5px; padding: 8px 0; }

  /* On narrow screens, band-chip + network-tag + call + meta alone (even
     with .pota-park fully collapsed to 0) can be wider than the viewport,
     since none of them shrink - the row would silently overflow past the
     card edge with no way to scroll to it. Wrap the meta info onto its own
     line instead of fighting for space on the main line. */
  @media (max-width: 480px) {
    .pota-row { flex-wrap: wrap; row-gap: 2px; }
    .pota-park { flex-basis: 0; }
    .pota-meta { flex: 1 1 100%; text-align: left; padding-left: 42px; }
  }

  /* Filters: click a band/entity to narrow the list to just that selection
     (multiple selections within a group OR together); empty selection shows
     everything. Inclusion-style, unlike the exclusion-style chart legends
     above - filtering a list and toggling a chart series are different
     enough tasks to warrant different interactions. */
  .pota-filters { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
  .pota-filters button {
    display: flex; align-items: center; gap: 5px; font: inherit; font-size: 11px; color: var(--text-secondary);
    background: none; border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; cursor: pointer;
  }
  .pota-filters button:hover { background: var(--surface-2); }
  .pota-filters button.active { background: var(--text-primary); color: var(--surface-1); border-color: var(--text-primary); }
  .pota-filters .pota-filter-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 2px; }

  .pota-showmore {
    display: block; width: 100%; margin-top: 4px; padding: 7px 0; text-align: center;
    font: inherit; font-size: 12px; font-weight: 650; color: var(--text-secondary);
    background: none; border: none; border-top: 1px solid var(--border); cursor: pointer;
  }
  .pota-showmore:hover { color: var(--text-primary); }
  .pota-showmore.hidden { display: none; }

  .foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 10.5px; color: var(--text-muted); flex-wrap: wrap; gap: 6px; }
  .foot a { color: var(--text-muted); }
  .credit { margin-top: 4px; font-size: 10.5px; color: var(--text-muted); }
  .credit a { color: var(--text-muted); }

  .loading-state { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 40vh; color: var(--text-muted); font-size: 13px; }
  .loading-state .spin { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--neutral-series); border-radius: 50%; animation: reload-spin .7s linear infinite; }
  .error-state { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 40vh; color: var(--text-secondary); font-size: 13px; text-align: center; padding: 0 20px; }
  .error-state button {
    font: inherit; font-size: 12.5px; font-weight: 650; color: var(--text-primary);
    background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; padding: 6px 14px; cursor: pointer;
  }
  .error-state button:hover { background: var(--surface-2); }

  @media (max-width: 700px) {
    .kpi-row { grid-template-columns: repeat(2, 1fr); }
    .hero-sw-tile { flex-basis: 100%; }
  }