@font-face {
    font-family: 'Inter';
    src: url('InterVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;

    /* Type scale — mobile first */
    --text-xs:           10px;
    --text-sm:           11px;
    --text-base:         13px;
    --text-md:           14px;
    --text-lg:           15px;
    --text-xl:           18px;
    --text-2xl:          22px;
    --text-time:         22px;
    --text-temp-readout: 22px;

    --blue:  #3B82F6;
    --cyan:  #22D3EE;
    --amber: #FBBF24;
    --green: #34D399;
    --red:   #F87171;

    --text:       #F1F5F9;
    --text-dim:   #94A3B8;
    --text-quiet: rgba(148, 163, 184, 0.55);

    --panel-bg:            rgba(10, 18, 30, 0.22);
    --panel-bg-strong:     rgba(10, 18, 30, 0.42);
    --panel-border:        rgba(255, 255, 255, 0.05);
    --panel-border-strong: rgba(255, 255, 255, 0.09);

    --accent: var(--cyan);
    --blur: 18px;

    /* Legacy aliases — particle engines use these */
    --bg:           #050810;
    --accent-cyan:  var(--cyan);
    --accent-blue:  var(--blue);
    --success:      var(--green);
    --warning:      var(--amber);
    --danger:       var(--red);
    --text-primary: var(--text);
    --text-secondary: var(--text-dim);
    --text-muted:   var(--text-dim);
    --text-dim-ol:  var(--text-quiet);
    --panel:        var(--panel-bg);
    --border:       var(--panel-border);
    --r-sm: 0px; --r: 0px; --r-lg: 0px;
}

@media (min-width: 768px) {
    :root {
        --text-2xl:          28px;
        --text-time:         28px;
        --text-temp-readout: 28px;
    }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
button, a, input, [role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    width: 100%; height: 100%; overflow: hidden;
    background: #050810;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

/* ── Map ─────────────────────────────────────────────────────────────────── */
#map {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #050810;
}
#map canvas { image-rendering: auto; }

.nasa-night-layer canvas {
    filter: contrast(150%) brightness(1.2) saturate(1.2);
    image-rendering: pixelated;
}
.emodnet-layer canvas {
    mix-blend-mode: screen;
    filter: saturate(1.8) brightness(0.95);
}

/* ── Vignette overlay ────────────────────────────────────────────────────── */
.map-vignette {
    position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background:
        radial-gradient(ellipse 75% 60% at 50% 50%, transparent 35%, rgba(5,8,16,0.55) 100%),
        linear-gradient(180deg, rgba(5,8,16,0.25) 0%, transparent 20%, transparent 75%, rgba(5,8,16,0.45) 100%);
}

/* ── OL attribution ──────────────────────────────────────────────────────── */
.leaflet-control-attribution,
.ol-attribution {
    background: rgba(0,0,0,0.35) !important;
    color: rgba(255,255,255,0.4) !important;
    font-size: 9px !important;
    font-family: 'JetBrains Mono', monospace !important;
    backdrop-filter: blur(6px);
    border: none !important;
    padding: 2px 6px !important;
}
.ol-attribution a, .leaflet-control-attribution a { color: rgba(255,255,255,0.55) !important; }
.ol-zoom, .leaflet-control-zoom { display: none !important; }
.ol-attribution ul { list-style: none; padding: 0; }

/* ── Glass panel base ────────────────────────────────────────────────────── */
.glass {
    background: var(--panel-bg);
    backdrop-filter: blur(var(--blur)) saturate(130%);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(130%);
    border: 1px solid var(--panel-border);
    border-radius: 0;
}
.glass-strong {
    background: var(--panel-bg-strong);
    border-color: var(--panel-border-strong);
}

/* ── Text legibility on map ──────────────────────────────────────────────── */
.map-label {
    text-shadow:
        0 1px 3px rgba(0,0,0,0.85),
        0 0 20px rgba(0,0,0,0.5),
        0 2px 8px rgba(0,0,0,0.6);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOP-LEFT CONTROL CLUSTER
   ═══════════════════════════════════════════════════════════════════════════ */
.tl-cluster {
    position: absolute; bottom: 20px; right: 20px;
    display: flex; flex-direction: column; gap: 10px; z-index: 20;
}
.tl-cluster .brand {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
}
.tl-cluster .brand .logo {
    width: 24px; height: 24px; border-radius: 0;
    background: linear-gradient(135deg, var(--cyan), var(--blue));
    position: relative; flex-shrink: 0;
}
.tl-cluster .brand .logo::after {
    content: ''; position: absolute; inset: 5px; border-radius: 0;
    background: rgba(5,8,16,0.85);
}
.tl-cluster .brand .logo::before {
    content: ''; position: absolute; top: 9px; left: 9px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--cyan); z-index: 1; box-shadow: 0 0 8px var(--cyan);
}
.tl-cluster .brand h1 {
    margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
}
.tl-cluster .brand .sub {
    font-size: 9.5px; color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 0.12em; margin-top: 1px;
}

.ctrl-group { display: flex; flex-direction: row; overflow: hidden; width: 100%; }
.ctrl-btn {
    flex: 1; height: 42px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text); transition: background 0.15s;
    border-right: 1px solid var(--panel-border);
}
.ctrl-btn:last-child { border-right: none; }
.ctrl-btn:hover { background: rgba(255,255,255,0.06); }
.ctrl-btn.active { color: var(--cyan); }
.ctrl-btn svg { width: 18px; height: 18px; }
.ctrl-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }

.ctrl-pair {
    display: flex; overflow: hidden;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
}
.ctrl-pair button {
    flex: 1; padding: 10px 12px;
    color: var(--text-dim); transition: all 0.15s;
}
.ctrl-pair button + button { border-left: 1px solid var(--panel-border); }
.ctrl-pair button:hover { color: var(--text); }
.ctrl-pair button.active { color: var(--cyan); background: rgba(34,211,238,0.08); }
.ctrl-pair button:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   RIGHT SIDEBAR
   ═══════════════════════════════════════════════════════════════════════════ */
.sidebar {
    position: absolute; top: 20px; right: 20px;
    width: 340px; max-height: calc(100vh - 40px);
    display: flex; flex-direction: column; gap: 10px;
    z-index: 20;
    transition: transform 0.3s cubic-bezier(.3,0,.2,1);
}
.sidebar.hidden { transform: translateX(calc(100% + 30px)); }

/* Data panel — overview stats + rankings, desktop top-left */
.data-panel {
    position: absolute; top: 20px; left: 20px;
    width: 340px; max-height: calc(100vh - 78px); /* 20px top + 58px bottom clearance above scale bar */
    display: flex; flex-direction: column; gap: 10px;
    z-index: 20;
    transition: transform 0.3s cubic-bezier(.3,0,.2,1);
    overflow: hidden;
}
.data-panel.hidden { transform: translateX(calc(-100% - 30px)); }
body.tl-open .data-panel { max-height: calc(100vh - 20px - var(--tl-h, 86px)); }

.side-head { padding: 14px 18px 12px; display: flex; flex-direction: column; gap: 8px; }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Clock block */
.side-clock { flex: 1; min-width: 0; }
.side-clock-time {
    font-size: var(--text-time); font-weight: 600; letter-spacing: -0.02em; line-height: 1;
    font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 6px;
}
.side-tz {
    font-size: 12px; font-weight: 400; letter-spacing: 0.06em;
    color: rgba(255,255,255,0.45); font-variant-numeric: normal;
}
.side-clock-date {
    font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.65);
    margin-top: 3px; letter-spacing: 0.01em;
}

/* Footer row: live indicator + station count */
.side-head-footer {
    display: flex; align-items: center; justify-content: space-between;
}
.side-live-ind {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--text-sm); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--text-dim);
}
.side-live-ind.sc-past   { color: var(--text-dim); }
.side-live-ind.sc-now    { color: var(--green); }
.side-live-ind.sc-future { color: var(--cyan); }
.side-live-sep { opacity: 0.4; margin: 0 2px; }
.side-live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; box-shadow: 0 0 8px currentColor;
    flex-shrink: 0; animation: pulse-dot 2s ease-out infinite;
}
.side-station-count {
    font-size: 10px;
    color: var(--text-dim); letter-spacing: 0.05em;
}
.side-station-count.sc-past   { color: var(--text-dim); }
.side-station-count.sc-now    { color: var(--green); }
.side-station-count.sc-future { color: var(--cyan); }

/* Unified layers panel (tabs + layer list in one glass card) */
.layers-panel {
    display: flex; flex-direction: column; overflow: hidden;
}

/* Mode tabs — sits inside .layers-panel, no own background */
.mode-tabs {
    display: flex; padding: 0; gap: 0;
    font-size: var(--text-md); text-transform: none; letter-spacing: 0;
    border-bottom: 1px solid var(--panel-border);
}
.mode-tabs button {
    flex: 1; padding: 12px 9px; color: var(--text);
    transition: all 0.2s; position: relative; font-weight: 400;
}
.mode-tabs button.active { color: var(--cyan); }
.mode-tabs button.active::after {
    content: ''; position: absolute; bottom: 0; left: 16%; right: 16%;
    height: 1px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan);
}
.mode-tabs button:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }

/* Layer list — sits inside .layers-panel, no own background */
.layer-list {
    padding: 4px 4px 6px;
    display: flex; flex-direction: column; gap: 0;
}
.layer-list .section {
    font-size: 10.5px;
    text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-quiet);
    padding: 10px 12px 4px;
}
.layers-section-hd {
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; user-select: none;
    padding-right: 10px;
}
.layers-section-hd:hover { color: var(--text-dim); }
.layer-row {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    border-radius: 0; cursor: pointer; transition: background 0.15s;
}
.layer-row:hover { background: rgba(255,255,255,0.03); }
.layer-row .ico { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--text-dim); flex-shrink: 0; }
.layer-row.on .ico { color: var(--cyan); }
.layer-row .nm { flex: 1; font-size: 14px; color: var(--text); font-weight: 400; }
.layer-row.on .nm { font-weight: 500; }
.layer-row .sw {
    width: 28px; height: 16px; background: rgba(255,255,255,0.08);
    border-radius: 0; position: relative; flex-shrink: 0; transition: background 0.2s;
}
.layer-row .sw::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--text-dim); transition: all 0.2s;
}
.layer-row.on .sw { background: rgba(34,211,238,0.35); }
.layer-row.on .sw::after { left: 14px; background: var(--cyan); box-shadow: 0 0 8px rgba(34,211,238,0.6); }

/* Scrollable sidebar body — wraps stats + rank sections as one unit */
.sidebar-body {
    overflow-y: auto; flex: 1; min-height: 0;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent;
    /* text shadow so all text reads over complex map backgrounds */
    text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.6);
}
.sidebar-body::-webkit-scrollbar { width: 4px; }
.sidebar-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

/* Stats panel — transparent, no independent scroll */
.stats {
    padding: 10px 14px;
    display: flex; flex-direction: column; gap: 8px;
}

.stat-hd { display: flex; align-items: baseline; justify-content: space-between; }
.stat-hd .nm { font-size: 15px; font-weight: 500; letter-spacing: -0.005em; }
.stat-hd .ts { font-size: 10px; color: var(--text-dim); }

.big-metric { display: flex; align-items: baseline; gap: 8px; margin: -2px 0 2px; flex-wrap: wrap; }
.big-metric-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 0.13em; color: var(--text-dim); width: 100%; margin-bottom: -6px; }
.big-metric .v { font-size: 44px; font-weight: 300; letter-spacing: -0.035em; line-height: 1; color: var(--cyan); font-variant-numeric: tabular-nums; }
.big-metric .u { font-size: 12px; color: var(--text-dim); }
.big-metric .delta { margin-left: auto; font-size: 10.5px; color: var(--text-dim); }
.big-metric .delta.up { color: var(--amber); }
.big-metric .delta.down { color: var(--blue); }

/* Sparkline — negative margins break out of .stats padding to fill sidebar edge-to-edge */
.spark-wrap { display: flex; flex-direction: column; gap: 6px; margin-left: -14px; margin-right: -14px; }
.spark-wrap .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.72); padding-left: 14px; }
.spark-wrap svg { width: 100%; height: 48px; display: block; }
.spark-wrap svg.chart-svg { height: auto; }

/* Metric grid */
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.metric-grid > div { padding: 10px 2px; display: flex; flex-direction: column; gap: 3px; border-bottom: 1px solid var(--panel-border); }
.metric-grid > div:nth-child(odd) { border-right: 1px solid var(--panel-border); padding-right: 14px; }
.metric-grid > div:nth-child(even) { padding-left: 14px; }
.metric-grid .k { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); }
.metric-grid .v { font-size: 18px; font-weight: 400; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.metric-grid .v .u { font-size: 11px; color: var(--text-dim); margin-left: 2px; font-weight: 400; }

/* Top-5 */
.top5 { display: flex; flex-direction: column; gap: 4px; }
.top5 .hd { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; }
.top5 .hd .t { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-dim); }
.top5 .hd .sel { font-size: 10px; color: var(--text-dim); cursor: pointer; }
.top5 .row { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 12px; cursor: pointer; border-radius: 0; }
.top5 .row:hover { background: rgba(255,255,255,0.04); padding-left: 4px; padding-right: 4px; }
.top5 .row .nm { flex: 1; color: var(--text); }
.top5 .row .bar { flex: 2; height: 2px; background: rgba(255,255,255,0.08); position: relative; }
.top5 .row .bar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--cyan); box-shadow: 0 0 6px rgba(34,211,238,0.5); }
.top5 .row .v { font-size: 11.5px; color: var(--text); font-variant-numeric: tabular-nums; min-width: 50px; text-align: right; }

/* Station name + star row on map label */
.station-name-row {
    display: flex; align-items: center; gap: 4px;
}
.station-star {
    width: 14px; height: 14px; padding: 0; flex-shrink: 0;
    color: rgba(255,255,255,0.35); transition: color 0.15s;
    display: flex; align-items: center; justify-content: center;
}
.station-star svg { width: 11px; height: 11px; }
.station-star:hover, .station.selected .station-star { color: var(--amber); }

/* Detail view star button (next to station name in sidebar) */
.detail-star {
    width: 28px; height: 28px; padding: 0; flex-shrink: 0;
    color: var(--text-quiet); transition: color 0.15s;
    display: flex; align-items: center; justify-content: center;
    margin-left: auto;
}
.detail-star svg { width: 22px; height: 22px; }
.detail-star:hover { color: var(--amber); }
.detail-star.on { color: var(--amber); }

/* Star in Top 5 rows */
.row-star {
    width: 18px; height: 18px; padding: 0; flex-shrink: 0;
    color: var(--text-quiet); transition: color 0.15s;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
}
.row-star svg { width: 11px; height: 11px; }
.top5 .row:hover .row-star { opacity: 1; }
.row-star.on { color: var(--amber); opacity: 1; }
.row-star:hover { color: var(--amber); }

/* Back to overview button */
.overview-back {
    display: flex; align-items: center; gap: 5px;
    font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--text-dim); padding: 0 0 14px;
    cursor: pointer; transition: color 0.15s;
}
.overview-back:hover { color: var(--cyan); }

/* Overview min/avg/max stat cells */
.metric-lbl {
    font-size: 9.5px;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--text-dim); margin-bottom: 2px;
}
.metric-val {
    font-size: 22px; font-weight: 400; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.metric-unit { font-size: 11px; color: var(--text-dim); margin-left: 1px; }
.metric-loc { font-size: 10px; color: var(--text-dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Sidebar toggle button — always visible */
.sidebar-toggle {
    position: absolute; top: 20px; right: 20px;
    width: 52px; height: 52px; z-index: 21;
    display: flex; align-items: center; justify-content: center;
    color: var(--cyan); border-radius: 0;
    background: rgba(0,0,0,0.35); backdrop-filter: blur(8px);
    transition: background 0.15s, color 0.15s;
}
.sidebar-toggle svg { width: 26px; height: 26px; stroke-width: 2; }
.sidebar-toggle:hover { background: rgba(0,0,0,0.55); color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   STATION LABELS ON MAP
   ═══════════════════════════════════════════════════════════════════════════ */
.station {
    position: absolute; pointer-events: auto;
    transform: translate(-50%, -50%); z-index: 8;
}
.station-inner {
    position: relative; display: flex; flex-direction: column;
    align-items: flex-start; gap: 3px; cursor: pointer; transition: transform 0.2s;
}
.station.right .station-inner { align-items: flex-end; }
.station:hover .station-inner { transform: scale(1.03); }

.station .pin {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 0 3px rgba(5,8,16,0.6), 0 0 12px var(--cyan);
    z-index: 2;
}
.station .ring {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 22px; height: 22px;
    border: 1px solid rgba(34,211,238,0.5); border-radius: 50%;
    animation: ring-pulse 3s ease-out infinite; pointer-events: none;
}
@keyframes ring-pulse {
    0%   { transform: translate(-50%,-50%) scale(0.6); opacity: 0.9; }
    100% { transform: translate(-50%,-50%) scale(2.6); opacity: 0; }
}
.station.selected .pin {
    background: var(--amber);
    box-shadow: 0 0 0 3px rgba(5,8,16,0.6), 0 0 14px var(--amber);
}
.station.selected .ring { border-color: rgba(251,191,36,0.6); }
/* Hide dot + ring when full callout is visible */
.station.full .pin,
.station.full .ring { display: none; }

/* All labels use full layout — consistent 44px clearance from pin */
.station.full.tl .station-inner { padding: 0 0 44px 44px; align-items: flex-start; }
.station.full.tr .station-inner { padding: 0 44px 44px 0; align-items: flex-end; }
.station.full.bl .station-inner { padding: 44px 0 0 44px; align-items: flex-start; }
.station.full.br .station-inner { padding: 44px 44px 0 0; align-items: flex-end; }
/* Selected: bigger clearance to match larger font */
.station.selected.full.tl .station-inner { padding: 0 0 56px 56px; }
.station.selected.full.tr .station-inner { padding: 0 56px 56px 0; }
.station.selected.full.bl .station-inner { padding: 56px 0 0 56px; }
.station.selected.full.br .station-inner { padding: 56px 56px 0 0; }

.station .temp-mini {
    font-size: 14px; color: var(--cyan);
    font-variant-numeric: tabular-nums; font-weight: 500;
}
.station .label {
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--text); opacity: 0.92;
}

/* Phenomenon (sky-state) icon on map station labels */
.station-phenom { display: flex; align-items: center; flex-shrink: 0; }
.station-phenom svg { width: 22px; height: 22px; }
.station .temp {
    font-size: var(--text-temp-readout); font-weight: 600; letter-spacing: -0.03em;
    line-height: 0.9; display: flex; align-items: baseline; color: var(--cyan);
}
.station.selected .temp { font-size: calc(var(--text-temp-readout) * 1.25); }
.station.selected .label { font-size: 12px; }
.station .temp .deg { font-size: 0.48em; margin-left: 2px; color: rgba(255,255,255,0.92); font-weight: 300; }
.station .temp .prim-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.55; margin-right: 4px; align-self: center; }
.station .sub {
    display: flex; gap: 10px;
    font-size: 12px; color: rgba(255,255,255,0.6);
    margin-top: 2px;
}
.station .sub strong { color: var(--cyan); font-weight: 600; font-size: 15px; }
.station .sub .unit { color: rgba(255,255,255,0.92); font-size: 12px; margin-left: 1px; }
.station.right .sub { justify-content: flex-end; }

/* ═══════════════════════════════════════════════════════════════════════════
   WARNINGS
   ═══════════════════════════════════════════════════════════════════════════ */
.warnings-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px 10px 12px; transition: all 0.2s;
    width: 100%;
}
.warnings-btn:hover { transform: translateY(-1px); background: var(--panel-bg-strong); }
.warnings-btn .icn { width: 20px; height: 20px; color: var(--amber); display: flex; align-items: center; justify-content: center; }
.warnings-btn .txt { font-size: 12px; font-weight: 500; color: var(--text); }
.warnings-btn .count {
    font-size: 10.5px;
    padding: 2px 7px; background: var(--amber); color: #0a0a0a;
    border-radius: 0; font-weight: 600;
}
.warnings-btn .count.pulse { animation: badge-pulse 1.8s ease-out infinite; }
@keyframes badge-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(251,191,36,0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(251,191,36,0); }
}

/* Warnings panel — opens upward from the tl-cluster top edge */
.warnings-panel {
    position: absolute; bottom: 100%; right: 0; z-index: 20;
    margin-bottom: 8px;
    width: 320px; max-height: 50vh; overflow-y: auto;
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.warnings-panel::-webkit-scrollbar { width: 4px; }
.warn-card {
    padding: 10px 14px; border-radius: 0;
    background: rgba(251,191,36,0.08);
    border-left: 3px solid var(--amber);
}
.warn-card.lv3, .warn-card.lv4, .warn-card.critical {
    border-left-color: var(--red); background: rgba(248,113,113,0.08);
}
.warn-card .w-header {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.warn-card .w-title {
    display: flex; align-items: center; gap: 7px;
    color: var(--amber); font-size: 12px; font-weight: 500;
}
.warn-card.lv3 .w-title, .warn-card.lv4 .w-title, .warn-card.critical .w-title { color: var(--red); }
.warn-card .w-title svg { width: 13px; height: 13px; flex-shrink: 0; }
.warn-card .w-area { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.warn-card .w-time {
    font-size: 10px;
    color: var(--text-quiet); margin-top: 5px; letter-spacing: 0.03em;
}

/* ── Rank widget (bottom-right, content-sized) ────────────────────────────── */
.rank-widget {
    position: absolute; bottom: 72px; right: 20px; z-index: 14;
    display: inline-flex; gap: 8px;
    pointer-events: auto; align-items: flex-start;
}
/* Inline variant: now renders as plain ov-metric sections — no wrapper needed */
.rank-col {
    width: max-content; min-width: 0; padding: 9px 12px;
    border-radius: 0;
    background: rgba(6,12,24,0.62);
    border: 1px solid rgba(255,255,255,0.07);
    backdrop-filter: blur(10px);
}
.rank-title {
    font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.16em; color: rgba(255,255,255,0.75);
    margin-bottom: 8px; padding-bottom: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    display: flex; align-items: center; gap: 5px; white-space: nowrap;
}
.rank-title-icon { opacity: 0.55; display: flex; }
.rank-title-icon svg { width: 12px; height: 12px; }
.rank-rows { display: flex; flex-direction: column; gap: 1px; }
.rank-row {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 4px; background: none; border: none; cursor: pointer;
    color: var(--text); text-align: left; transition: background 0.12s;
    border-radius: 0; white-space: nowrap;
}
.rank-row:hover { background: rgba(255,255,255,0.06); }
.rank-row:hover .rank-name { color: var(--cyan); }
.rank-n {
    font-size: 10px;
    color: rgba(255,255,255,0.5); width: 12px; flex-shrink: 0; text-align: right;
}
.rank-name { font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.9); }
.rank-val {
    font-size: 13px; font-weight: 600;
    margin-left: 6px;
}
.rank-col.windiest .rank-val { color: #7dd3fc; }
.rank-col.warmest  .rank-val { color: #f87171; }
.rank-col.coldest  .rank-val { color: #93c5fd; }
/* Inline section value colours */
.rank-val--wind { color: #7dd3fc; }
.rank-val--warm { color: #f87171; }
.rank-val--cold { color: #93c5fd; }
/* Inline rank section rows: same 3-col grid as ov-cols so rank-val = MAX column */
.rank-section .rank-rows { margin-top: 4px; }
.rank-section .rank-row  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; padding: 3px 0; background: none; border: none; cursor: pointer; color: var(--text); text-align: left; width: 100%; transition: background 0.12s; border-radius: 0; }
.rank-section .rank-row:hover { background: rgba(255,255,255,0.06); }
.rank-section .rank-row:hover .rank-name { color: var(--cyan); }
.rank-section .rank-left { display: flex; align-items: center; gap: 6px; grid-column: 1 / span 2; overflow: hidden; min-width: 0; }
.rank-section .rank-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rank-section .rank-val  { font-size: 13px; font-weight: 600; text-align: right; }

/* Scale line */
.scale-line {
    position: absolute; bottom: 40px; left: 20px; z-index: 15;
    font-size: 10px;
    color: var(--text-dim);
    display: flex; align-items: center; gap: 8px; pointer-events: none;
}
.scale-line .bar {
    height: 10px; min-width: 20px; transition: width 0.2s;
    border-left: 1px solid var(--text-dim);
    border-right: 1px solid var(--text-dim);
    border-bottom: 1px solid var(--text-dim);
}

/* Watermark — desktop only, bottom-right, same height as scale line */
.map-watermark {
    display: none;
    position: absolute; bottom: 16px; left: 20px; z-index: 15;
    align-items: center; gap: 6px;
    pointer-events: none;
    color: var(--text-dim);
    font-size: 10px;
    letter-spacing: 0.04em;
}
.map-watermark-logo {
    width: 16px; height: 16px; object-fit: contain; opacity: 0.7;
}
@media (min-width: 900px) {
    .map-watermark { display: flex; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIMELINE
   ═══════════════════════════════════════════════════════════════════════════ */
.tl-wrap {
    position: absolute; left: 50%; bottom: 0;
    transform: translateX(-50%);
    z-index: 20;
    width: min(1000px, calc(100vw - 380px));
    display: flex; flex-direction: column; align-items: center; gap: 0;
}

/* Arrow toggle button — sits above the panel, centred */
.tl-arrow {
    align-self: center;
    display: flex; align-items: center; justify-content: center;
    width: 64px; height: 36px;
    border-radius: 0;
    color: var(--text-dim); cursor: pointer;
    font-size: 18px; transition: color 0.15s;
    z-index: 1;
}
.tl-arrow:hover { color: var(--cyan); }
.tl-arrow-chev { display: inline-block; transition: transform 0.25s; }
.tl-arrow-chev.up { transform: rotate(180deg); }

/* Panel — flat bottom, single-row layout */
.tl-panel {
    width: 100%;
    padding: 8px 14px 10px;
    border-radius: 0;
}

/* Single row: [▶] [speeds] [track] [time] [OTSE] */
.tl-row { display: flex; align-items: center; gap: 8px; }
.tl-playbtn {
    /* bleeds into panel padding: top 8px, bottom 10px, left 14px — touches all three edges */
    align-self: stretch;
    height: auto;
    width: 56px;
    margin: -8px 0 -10px -14px;
    border-radius: 0;
    background: var(--cyan); color: #050810;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: background 0.15s;
}
.tl-playbtn:hover { background: rgba(34,211,238,0.82); }
.tl-playbtn svg { width: 16px; height: 16px; }
.tl-speed {
    font-size: 10px;
    color: var(--text-dim); padding: 4px 7px; border-radius: 0;
    cursor: pointer; text-transform: uppercase; letter-spacing: 0.08em; flex-shrink: 0;
}
.tl-speed.active { color: var(--cyan); background: rgba(34,211,238,0.12); }
.tl-speed-cycle { min-width: 36px; text-align: center; }
.tl-time-big { font-size: 20px; font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; flex-shrink: 0; margin-bottom: 8px; }
.tl-live {
    /* bleeds into panel padding: top 8px, bottom 10px, right 14px — touches all three edges */
    align-self: stretch;
    height: auto;
    margin: -8px -14px -10px 0;
    padding: 0 18px;
    display: flex; align-items: center;
    border-radius: 0; color: var(--text-dim);
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
    border: none;
    border-top: 1px solid var(--panel-border);
    border-left: 1px solid var(--panel-border);
    border-right: 1px solid var(--panel-border);
    transition: all 0.15s; flex-shrink: 0;
}
.tl-live:hover { color: var(--green); border-color: rgba(52,211,153,0.4); }
.tl-live.now { color: var(--green); border-color: rgba(52,211,153,0.4); background: rgba(52,211,153,0.08); }

.tl-track { position: relative; height: 40px; cursor: pointer; flex: 1; min-width: 0; }
.tl-track .axis { position: absolute; left: 0; right: 0; top: 20px; height: 1px; background: rgba(255,255,255,0.1); }
.tl-track .tick { position: absolute; top: 14px; width: 1px; height: 6px; background: rgba(255,255,255,0.15); }
.tl-track .tick.major { height: 10px; top: 12px; background: rgba(255,255,255,0.3); }
.tl-track .tick.now-line { background: rgba(34,211,238,0.6); height: 18px; top: 9px; width: 2px; }
.tl-track .tick-lbl { position: absolute; top: 28px; font-size: 9px; color: var(--text-quiet); transform: translateX(-50%); }
.tl-track .fill { position: absolute; left: 0; top: 19px; height: 3px; background: linear-gradient(90deg, rgba(34,211,238,0.2), var(--cyan)); border-radius: 0; }
.tl-track .handle { position: absolute; top: 8px; width: 3px; height: 24px; background: var(--cyan); border-radius: 0; box-shadow: 0 0 12px var(--cyan); transform: translateX(-50%); }
.tl-track .handle::after { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }

/* ── Overview metrics (sidebar) ──────────────────────────────────────────── */
.ov-header { display: flex; align-items: center; gap: 8px; padding: 2px 0 6px; }
.ov-title { font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.ov-count { font-size: 12px; color: rgba(255,255,255,0.6); flex: 1; }
.ov-collapse-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    color: var(--cyan); border-radius: 0; transition: color 0.15s, background 0.15s; flex-shrink: 0; }
.ov-collapse-btn svg { width: 22px; height: 22px; }
.ov-collapse-btn:hover { color: var(--text); background: rgba(255,255,255,0.08); }

.ov-metric { padding: 5px 0; border-top: 1px solid var(--panel-border); }
.ov-metric:first-of-type { border-top: none; }
.ov-metric-name {
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; color: rgba(255,255,255,0.75);
    margin-bottom: 3px;
}
.ov-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; }
.ov-col { display: flex; flex-direction: column; align-items: flex-start; padding: 1px 0; }
.ov-col.center { align-items: center; }
.ov-col:last-child { align-items: flex-end; }
.ov-col[role="button"] { cursor: pointer; }
.ov-col[role="button"]:hover .ov-val { text-decoration: underline; text-underline-offset: 2px; }
.ov-col-lbl { font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 1px; }
.ov-val { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ov-val.avg { font-size: 16px; color: var(--cyan); }
.ov-val.min { color: rgba(255,255,255,0.9); }
.ov-val.max { color: rgba(255,255,255,0.9); }
.ov-unit { font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.55); margin-left: 1px; }
.ov-loc { font-size: 10.5px; color: rgba(255,255,255,0.6); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }

/* ── 30-day chart in detail view ─────────────────────────────────────────── */
.chart-section { margin-top: 10px; margin-left: -14px; margin-right: -14px; }
.chart-section .lbl { padding-left: 14px; }
.chart-title { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.72); margin-bottom: 6px; }
.chart-svg { display: block; overflow: visible; }
.chart-empty { font-size: 12px; color: var(--text-dim); padding: 8px 0; text-align: center; }

/* ── Station circles on map ──────────────────────────────────────────────── */
.st-circles-container { position: absolute; inset: 0; pointer-events: none; }
.st-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(96, 165, 250, 0.10);
    border: 1.5px solid rgba(96, 165, 250, 0.40);
    cursor: pointer; pointer-events: all;
    animation: st-breathe 2.8s ease-in-out infinite;
}
.st-circle--lg { width: 26px; height: 26px; margin-left: -13px;   margin-top: -13px; }
.st-circle--md { width: 18px; height: 18px; margin-left: -9px;    margin-top: -9px;  opacity: 0.80; }
.st-circle--sm {
    width: 16px; height: 16px; margin-left: -8px; margin-top: -8px;
    background: rgba(96, 165, 250, 0.18);
    border: 1.5px solid rgba(96, 165, 250, 0.62);
    animation: st-breathe-zoom 2.2s ease-in-out infinite;
}
@keyframes st-breathe-zoom {
    0%, 100% { box-shadow: 0 0 5px 1px rgba(96,165,250,0.28); opacity: 0.78; }
    50%       { box-shadow: 0 0 11px 3px rgba(96,165,250,0.55); opacity: 1; }
}
.st-circle:hover {
    background: rgba(96, 165, 250, 0.22);
    border-color: rgba(96, 165, 250, 0.75);
}
@keyframes st-breathe {
    0%, 100% { box-shadow: 0 0 6px rgba(96,165,250,0.18); opacity: 0.65; }
    50%       { box-shadow: 0 0 16px rgba(96,165,250,0.45); opacity: 1; }
}

/* ── Sidebar head row ────────────────────────────────────────────────────── */
.side-head-row { display: flex; align-items: flex-start; gap: 8px; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE SHEET
   ═══════════════════════════════════════════════════════════════════════════ */
.mobile-hud { display: none; }

@media (max-width: 900px) {
    /* ── Mobile Tab Bar ── */
    .mob-tabs {
        position: absolute; top: 0; left: 0; right: 0;
        display: flex; align-items: stretch; justify-content: center; gap: 6px;
        z-index: 28;
        pointer-events: none; /* container must not eat taps from layer panel below */
    }
    .mob-tab {
        padding: 8px 28px; font-size: 16px; font-weight: 600;
        color: rgba(255,255,255,0.35); letter-spacing: 0.04em;
        border-bottom: 2px solid transparent;
        transition: color 0.15s, border-color 0.15s;
        pointer-events: auto;
        background: var(--panel-bg);
        backdrop-filter: blur(var(--blur)) saturate(130%);
        -webkit-backdrop-filter: blur(var(--blur)) saturate(130%);
        border-left: 1px solid var(--panel-border);
        border-right: 1px solid var(--panel-border);
        border-top: 1px solid var(--panel-border);
    }
    .mob-tab.active { color: var(--cyan); border-bottom-color: var(--cyan); }

    /* ── Mobile Layer Panel ── */
    .mob-layer-panel {
        position: absolute; top: 0; z-index: 27;
        display: flex; flex-direction: column; gap: 0;
        border-radius: 0;
        overflow: hidden;
    }
    .mob-layer-panel--left  { left: 0; border-radius: 0; }
    .mob-layer-panel--right { right: 0; border-radius: 0; }
    .mob-layer-row {
        display: flex; align-items: center; gap: 8px;
        padding: 8px 12px; cursor: pointer;
        transition: background 0.15s;
    }
    .mob-layer-panel--right .mob-layer-row { flex-direction: row-reverse; }
    .mob-layer-row:hover { background: rgba(255,255,255,0.06); }
    .mob-lyr-nm { font-size: 15px; color: var(--text-dim); transition: color 0.15s; white-space: nowrap; }
    .mob-layer-row.on .mob-lyr-nm { color: var(--text); }
    .mob-lyr-ic { color: rgba(255,255,255,0.3); transition: color 0.15s; flex-shrink: 0; }
    .mob-lyr-ic svg { width: 16px; height: 16px; display: block; }
    .mob-layer-row.on .mob-lyr-ic { color: var(--cyan); }

    /* ── Mobile Menu (bottom-right) ── */
    .mob-menu-wrap {
        position: absolute; right: 0;
        bottom: env(safe-area-inset-bottom, 0px);
        z-index: 27;
        display: flex; flex-direction: column; align-items: stretch;
        background: var(--panel-bg);
        backdrop-filter: blur(var(--blur)) saturate(130%);
        -webkit-backdrop-filter: blur(var(--blur)) saturate(130%);
        border-top: 1px solid var(--panel-border);
        border-left: 1px solid var(--panel-border);
        transition: bottom 0.3s cubic-bezier(.2,.8,.2,1);
    }
    body.tl-open .mob-menu-wrap { bottom: calc(var(--tl-h, 86px) - 36px); }
    .mob-menu-wrap .ctrl-pair { font-size: 10.5px; }
    .mob-menu-wrap .ctrl-pair button { padding: 12px 14px; }

    /* ── Sidebar as mobile panel ── */
    .sidebar {
        display: none; /* hidden by default; mob-panel overrides */
    }
    .sidebar.mob-panel {
        display: flex;
        position: absolute;
        width: 76vw; max-width: 280px;
        top: 52px; /* sits flush below the tab bar */
        bottom: var(--tl-h, 36px); /* set by TimelineBar via offsetHeight measurement */
        overflow: visible; /* allow toggle tab to stick out */
        z-index: 26;
        transition: transform 0.3s cubic-bezier(.2,.8,.2,1);
        flex-direction: column;
        border: none; gap: 0;
    }
    body.tl-open .sidebar.mob-panel { bottom: var(--tl-h, 86px); }
    .sidebar.mob-panel--left  { left: 0; transform: translateX(-100%); }
    .sidebar.mob-panel--right { right: 0; transform: translateX(100%); }
    .sidebar.mob-panel:not(.hidden) { transform: translateX(0); }
    /* Inner content area */
    .sidebar.mob-panel .sidebar-body {
        flex: 1; overflow-y: auto; padding: 10px 12px;
        background: var(--panel-bg);
        backdrop-filter: blur(var(--blur)) saturate(130%);
        -webkit-backdrop-filter: blur(var(--blur)) saturate(130%);
        border: 1px solid rgba(255,255,255,0.08);
    }
    .sidebar.mob-panel--left  .sidebar-body { border-radius: 0; border-left: none; }
    .sidebar.mob-panel--right .sidebar-body { border-radius: 0; border-right: none; }
    /* Toggle tab that sticks out at the edge */
    .mob-panel-toggle {
        position: absolute; top: 50%; transform: translateY(-50%);
        width: 36px; height: 64px; z-index: 1;
        display: flex; align-items: center; justify-content: center;
        background: var(--panel-bg);
        backdrop-filter: blur(var(--blur)) saturate(130%);
        -webkit-backdrop-filter: blur(var(--blur)) saturate(130%);
        border: 1px solid var(--panel-border);
        color: var(--text-dim); cursor: pointer;
        transition: color 0.15s;
    }
    .mob-panel-toggle:hover { color: var(--cyan); }
    .mob-panel-toggle svg { width: 16px; height: 16px; }
    .sidebar.mob-panel--left  .mob-panel-toggle { right: -36px; border-radius: 0; border-left: none; }
    .sidebar.mob-panel--right .mob-panel-toggle { left: -36px; border-radius: 0; border-right: none; }
    /* Hide desktop-only sidebar elements on mobile panel */
    .sidebar.mob-panel .side-head,
    .sidebar.mob-panel .layers-panel { display: none; }
    /* Compact sidebar content for narrow panel */
    .sidebar.mob-panel .stats { padding: 0; }
    .sidebar.mob-panel .ov-metric-name { font-size: 9px; }
    .sidebar.mob-panel .ov-val { font-size: 18px; }
    .sidebar.mob-panel .ov-loc { font-size: 9px; }
    /* Align rank rows with ov-cols grid: hide rank number so station names start at same
       left edge as MIN column; rank-val stays in col 3 to align with MAX column */
    .sidebar.mob-panel .rank-n { display: none; }
    .sidebar.mob-panel .rank-section .rank-val { display: block; width: 100%; }
    .sidebar.mob-panel .stat-hd .nm { font-size: 15px; }
    .sidebar.mob-panel .big-metric .v { font-size: 36px; }
    .sidebar.mob-panel .top5 { font-size: 11px; }
    .sidebar.mob-panel .top5 .row { padding: 4px 0; }
    /* Hamburger always above the open sidebar */
    .sidebar-toggle { display: none; }

    /* Hide entire tl-cluster on mobile (zoom+GPS move to bottom-right) */
    .tl-cluster { display: none; }
    .ctrl-btn { width: 38px; height: 38px; }
    .ctrl-btn svg { width: 16px; height: 16px; }

    /* Timeline: border-to-border, true screen bottom */
    .tl-wrap {
        width: 100%; left: 0; transform: none; bottom: 0;
    }
    /* Pad panel content above home indicator */
    .tl-panel {
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }

    /* Warnings: hidden on mobile */
    .warnings-btn, .warnings-panel { display: none !important; }

    /* ── OL rotate/compass button — moved to bottom-right above GPS/menu row ── */
    .ol-rotate {
        position: absolute !important;
        top: auto !important; left: auto !important;
        right: 12px !important;
        bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
        transition: bottom 0.3s cubic-bezier(.2,.8,.2,1), opacity 0.2s !important;
    }
    body.tl-open .ol-rotate {
        /* buttons bottom = tl-h - 36; buttons top = tl-h - 36 + 88 = tl-h + 52; +8 gap */
        bottom: calc(var(--tl-h, 86px) + 60px) !important;
    }
    .ol-rotate button {
        width: 40px !important; height: 40px !important;
        background: var(--panel-bg) !important;
        backdrop-filter: blur(var(--blur)) saturate(130%) !important;
        -webkit-backdrop-filter: blur(var(--blur)) saturate(130%) !important;
        border: 1px solid var(--panel-border) !important;
        border-radius: 0 !important;
        color: var(--text-dim) !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        margin: 0 !important;
    }

    /* Scale: sit at the bottom edge; lifts when timeline opens */
    .scale-line {
        left: 12px; right: auto;
        bottom: 8px;
        transition: bottom 0.3s cubic-bezier(.2,.8,.2,1);
    }
    body.tl-open .scale-line { bottom: calc(var(--tl-h, 86px) - 36px + 4px); }

    .mobile-hud {
        display: flex; flex-direction: column;
        position: absolute; left: 0; right: 0; bottom: 0;
        z-index: 25; pointer-events: none;
    }
    .mobile-hud > * { pointer-events: auto; }

    .mob-sheet {
        border-radius: 0;
        background: var(--panel-bg-strong);
        backdrop-filter: blur(22px) saturate(150%);
        -webkit-backdrop-filter: blur(22px) saturate(150%);
        border-top: 1px solid var(--panel-border-strong);
        box-shadow: 0 -20px 40px rgba(0,0,0,0.3);
        max-height: 85vh;
        display: flex; flex-direction: column;
        transition: transform 0.3s cubic-bezier(.2,.8,.2,1);
    }
    .mob-sheet.collapsed { transform: translateY(calc(100% - 40px)); }
    .mob-handle {
        width: 44px; height: 4px; background: rgba(255,255,255,0.25);
        border-radius: 0; margin: 16px auto 20px; cursor: grab;
    }
    .mob-hero { padding: 6px 20px 16px; }
    .mob-hero .nm {
        display: flex; align-items: center; gap: 10px;
        font-size: 13px; color: var(--text-dim);
        text-transform: uppercase; letter-spacing: 0.14em;
    }
    .mob-hero .nm .live { color: var(--green); display: flex; align-items: center; gap: 5px; font-size: 10px; }
    .mob-hero .nm .live::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
    .mob-hero .mega {
        font-size: 88px; font-weight: 200; line-height: 0.9;
        letter-spacing: -0.04em; color: var(--cyan);
        font-variant-numeric: tabular-nums; margin-top: 4px;
        display: flex; align-items: baseline;
    }
    .mob-hero .mega .deg { font-size: 0.3em; color: var(--text); opacity: 0.55; margin-left: 2px; font-weight: 300; }
    .mob-hero .sub { font-size: 14px; color: var(--text-dim); margin-top: 2px; }

    .mob-body { overflow-y: auto; padding: 0 16px 24px; flex: 1; scrollbar-width: none; }
    .mob-body::-webkit-scrollbar { display: none; }

    .mob-sheet .mob-tabs {
        display: flex; padding: 4px; gap: 4px; margin: 0 16px 14px;
        background: rgba(255,255,255,0.05); border-radius: 0;
        font-size: 10px;
        text-transform: uppercase; letter-spacing: 0.1em;
    }
    .mob-sheet .mob-tabs button { flex: 1; padding: 8px; border-radius: 0; color: var(--text-dim); }
    .mob-sheet .mob-tabs button.active { background: rgba(34,211,238,0.15); color: var(--cyan); }

    .mob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .mob-cell {
        background: rgba(255,255,255,0.03); border: 1px solid var(--panel-border);
        border-radius: 0; padding: 12px 14px;
        display: flex; flex-direction: column; gap: 4px;
    }
    .mob-cell .k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); }
    .mob-cell .v { font-size: 22px; font-weight: 400; color: var(--text); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
    .mob-cell .v .u { font-size: 12px; color: var(--text-dim); margin-left: 3px; font-weight: 400; }
    .mob-cell.wide { grid-column: 1 / -1; }

    .mob-hour-strip { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
    .mob-hour-strip::-webkit-scrollbar { display: none; }
    .mob-hour-cell {
        flex-shrink: 0; width: 52px; display: flex; flex-direction: column;
        align-items: center; gap: 6px; padding: 10px 4px; border-radius: 0;
        background: rgba(255,255,255,0.03);
    }
    .mob-hour-cell.now { background: rgba(34,211,238,0.1); border: 1px solid rgba(34,211,238,0.25); }
    .mob-hour-cell .h { font-size: 10px; color: var(--text-dim); }
    .mob-hour-cell .tmp { font-size: 16px; font-weight: 400; }
    .mob-hour-cell.now .tmp { color: var(--cyan); }

    .mob-stations { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 14px; scrollbar-width: none; }
    .mob-stations::-webkit-scrollbar { display: none; }
    .mob-station-chip {
        flex-shrink: 0; padding: 8px 14px; border-radius: 0;
        background: rgba(255,255,255,0.06); border: 1px solid transparent;
        font-size: 12px; color: var(--text);
        display: flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer;
    }
    .mob-station-chip.active { background: rgba(34,211,238,0.15); border-color: rgba(34,211,238,0.3); color: var(--cyan); }
    .mob-station-chip .t { color: var(--text-dim); }
    .mob-station-chip.active .t { color: var(--cyan); }

    .mob-bottom-bar {
        display: flex; padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); gap: 6px;
        justify-content: space-around;
        background: rgba(10,18,30,0.82); backdrop-filter: blur(20px);
        border-top: 1px solid var(--panel-border);
    }
    .mob-bottom-bar button {
        display: flex; flex-direction: column; align-items: center; gap: 3px;
        padding: 6px 10px; color: var(--text-dim);
        font-size: 9.5px;
        text-transform: uppercase; letter-spacing: 0.1em;
    }
    .mob-bottom-bar button.active { color: var(--cyan); }
    .mob-bottom-bar button svg { width: 20px; height: 20px; }

    .station .temp { font-size: var(--text-xl); }
    .station .sub { font-size: 10px; }
    .station .sub strong { font-size: 12px; }
    .station .label { font-size: 10px; }
    .station.full .station-inner { padding: 0 0 36px 0 !important; align-items: center !important; }
}

@media (max-width: 480px) {
    .mob-hero .mega { font-size: 72px; }
}

/* ── Portrait-only: layers below tab bar ────────────────────────────── */
@media (max-width: 900px) and (orientation: portrait) {
    .mob-layer-panel { top: 45px; }
}

/* ── Mobile landscape: tighten timebar and sidebar to remove bottom gap ──── */
@media (max-width: 900px) and (orientation: landscape) {
    .tl-panel {
        padding-top: 5px;
        padding-bottom: 5px; /* override safe-area padding; landscape has no home bar */
    }
    /* adjust play/OTSE button bleed to match landscape panel padding (5px vs 8px/10px) */
    .tl-playbtn { margin-top: -5px; margin-bottom: -5px; }
    .tl-live    { margin-top: -5px; margin-bottom: -5px; }
    /* tl-wrap raised above panels so panels can extend into arrow zone without covering timeline controls */
    .tl-wrap { z-index: 30; }
    .sidebar.mob-panel {
        top: 0; /* full height in landscape — tab bar is z-index 28, above panel z-index 26 */
        bottom: 0; /* extend to screen edge when closed; arrow is centered so panels on sides don't overlap it */
    }
    body.tl-open .sidebar.mob-panel {
        /* extend to tl-panel top (not tl-wrap top); tl-wrap z-index:30 keeps controls visible above panel */
        bottom: calc(var(--tl-h, 86px) - 36px);
    }
    .mob-menu-wrap {
        bottom: 0px; /* no home bar in landscape */
    }
    body.tl-open .mob-menu-wrap {
        bottom: calc(var(--tl-h, 50px) - 36px);
    }
    .scale-line {
        bottom: 4px; /* arrow is centered; scale at left:12px doesn't conflict */
    }
    body.tl-open .scale-line {
        bottom: calc(var(--tl-h, 50px) - 36px + 4px);
    }
    .ol-rotate {
        bottom: 88px !important; /* no safe-area offset needed in landscape */
    }
    body.tl-open .ol-rotate {
        bottom: calc(var(--tl-h, 50px) + 60px) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════════════════ */
:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}
button:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ring, .side-head .status-row .live::before,
    .mob-hero .nm .live::before, .warnings-btn .count.pulse {
        animation: none;
    }
    .mob-sheet { transition: none; }
}

/* Backdrop filter fallback */
@supports not (backdrop-filter: blur(1px)) {
    .glass, .mob-sheet {
        background: rgba(10, 18, 30, 0.85) !important;
        backdrop-filter: none !important;
    }
}

/* ── Night Layer Picker ───────────────────────────────────────────────────── */
.night-picker {
    position: relative;
    border-radius: 0;
    overflow: visible;
    min-width: 160px;
}
.night-picker-head {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 7px 10px;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    font-size: 11px;
    border-radius: 0;
    transition: background 0.15s;
}
.night-picker-head:hover { background: rgba(255,255,255,0.06); }
.night-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-dim);
    flex-shrink: 0;
}
.night-current {
    flex: 1;
    text-align: left;
    color: var(--cyan);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.night-chev { display: flex; width: 14px; height: 14px; color: var(--text-dim); transition: transform 0.2s; flex-shrink: 0; }
.night-chev svg { width: 14px; height: 14px; }
.night-chev.open { transform: rotate(180deg); }

.night-picker-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--panel-bg-strong);
    backdrop-filter: blur(var(--blur));
    border: 1px solid var(--panel-border);
    border-radius: 0;
    overflow: hidden;
    z-index: 200;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.night-opt {
    display: block;
    width: 100%;
    padding: 9px 12px;
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 12px;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.night-opt:hover { background: rgba(255,255,255,0.07); color: var(--text); }
.night-opt.active { color: var(--cyan); background: rgba(34,211,238,0.08); }

/* ── Night layer visual enhancement ─────────────────────────────────────────
   Softens Level-8 upscaling artefacts (blurry blocks) and enhances city glow.
   Applied to the OL layer container so it affects the whole tile canvas.     */
.night-layer {
    filter: blur(1.2px) brightness(1.25) contrast(1.1) saturate(1.35);
    /* bilinear upscaling already applied by canvas; blur smooths tile seams   */
}
/* At low zoom levels tiles are native res — dial back the blur               */
@media (max-resolution: 1dppx) {
    .night-layer { filter: blur(0.6px) brightness(1.2) contrast(1.1) saturate(1.3); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEME
   ═══════════════════════════════════════════════════════════════════════════ */
html.light {
    --text:       #1E293B;
    --text-dim:   #64748B;
    --text-quiet: rgba(100, 116, 139, 0.65);

    --panel-bg:            rgba(255, 255, 255, 0.55);
    --panel-bg-strong:     rgba(255, 255, 255, 0.78);
    --panel-border:        rgba(0, 0, 0, 0.07);
    --panel-border-strong: rgba(0, 0, 0, 0.12);

    --bg: #E8EEF4;
}

html.light body {
    background: #E8EEF4;
    color: var(--text);
}

html.light #map {
    background: #C8D8E8;
}

html.light .map-vignette {
    background: none;
}

html.light .ol-attribution {
    background: rgba(255,255,255,0.55) !important;
    color: rgba(0,0,0,0.45) !important;
}

html.light .glass {
    background: var(--panel-bg);
    border-color: var(--panel-border);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

html.light .glass-strong {
    background: var(--panel-bg-strong);
    border-color: var(--panel-border-strong);
}

html.light .layers-panel {
    background: rgba(255, 255, 255, 0.62) !important;
}

html.light .ctrl-btn:hover { background: rgba(0,0,0,0.05); }
html.light .layer-row:hover { background: rgba(0,0,0,0.03); }

html.light .ctrl-pair button.active { background: rgba(34,211,238,0.12); }

html.light .mob-sheet {
    background: var(--panel-bg-strong);
    border-top-color: var(--panel-border-strong);
    box-shadow: 0 -20px 40px rgba(0,0,0,0.12);
}

html.light .mob-handle { background: rgba(0,0,0,0.18); }
html.light .mob-tab { color: rgba(0,0,0,0.35); }
html.light .mob-cell { background: rgba(0,0,0,0.03); border-color: var(--panel-border); }
html.light .mob-bottom-bar { background: rgba(232,238,244,0.88); border-top-color: var(--panel-border); }

html.light .station .pin {
    box-shadow: 0 0 0 3px rgba(232,238,244,0.7), 0 0 12px var(--cyan);
}
html.light .station.selected .pin {
    box-shadow: 0 0 0 3px rgba(232,238,244,0.7), 0 0 14px var(--amber);
}

html.light .timeline-collapsed:hover { background: var(--panel-bg-strong); }
html.light .warnings-panel { box-shadow: 0 4px 20px rgba(0,0,0,0.1); }

html.light .night-picker-list {
    background: var(--panel-bg-strong);
    border-color: var(--panel-border-strong);
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
html.light .night-opt:hover { background: rgba(0,0,0,0.05); }

/* ═══════════════════════════════════════════════════════════════════════════
   CITY WIDGETS — OL overlay labels for major stations
   ═══════════════════════════════════════════════════════════════════════════ */

.city-widget {
    position: relative;
    background: var(--panel-bg);
    backdrop-filter: blur(18px) brightness(0.65) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) brightness(0.65) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    padding: 6px 11px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    overflow: hidden;
    transform: translate(-50%, -120%);
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.08);
    white-space: nowrap;
}
html.light .city-widget {
    background: rgba(226, 238, 250, 0.82);
    border-color: rgba(0, 0, 0, 0.12);
}

.widget-content { position: relative; z-index: 2; text-align: center; }
.widget-name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.widget-data {
    font-size: 17px;
    font-weight: 600;
    margin-top: 1px;
    font-variant-numeric: tabular-nums;
    color: var(--accent-cyan);
}
.widget-wind {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 1px;
}

.widget-fx { position: absolute; inset: 0; z-index: 1; border-radius: inherit; overflow: hidden; }

.fx-wind {
    background: repeating-linear-gradient(
        90deg, transparent 0, transparent 14px,
        rgba(34, 211, 238, 0.55) 14px, rgba(34, 211, 238, 0.55) 24px
    );
    background-size: 200% 100%;
    animation: wSlide 0.5s linear infinite;
    opacity: 0.10;
}
.fx-rain {
    background: repeating-linear-gradient(
        180deg, transparent 0, transparent 9px,
        rgba(96, 165, 250, 0.70) 9px, rgba(96, 165, 250, 0.70) 14px
    );
    background-size: 100% 200%;
    animation: rFall 0.35s linear infinite;
    opacity: 0.25;
}
@keyframes wSlide { from { background-position: 0% 0; } to { background-position: 100% 0; } }
@keyframes rFall  { from { background-position: 0 -100%; } to { background-position: 0 0%; } }