/* ==========================================================================
   Predict Sea — Marine Weather Forecasts
   Full-screen map app: the canvas viewer is the background, all chrome
   floats above it as dark glass. Zero external dependencies: system fonts,
   inline SVG icons.
   Brand: navy #003399 · royal #1735DE · sky #0099FF
   ========================================================================== */

:root {
    --navy:       #003399;
    --royal:      #1735de;
    --sky:        #0099ff;
    --slate:      #5a6787;

    /* Light tokens (document pages: privacy / terms / status) */
    --bg:         #f2f5f9;
    --card:       #ffffff;
    --hover:      #f7fafd;
    --border:     #e2e9f2;
    --border-2:   #cfd9e6;
    --text:       #22304a;
    --text-2:     #5a6787;
    --text-3:     #5f6d85;   /* 4.8:1 on --bg, 5.2:1 on --card (AA for 11-12.5 px doc text) */
    --warn-bg:    #fff6e6;
    --warn-fg:    #8a5a00;

    /* Dark glass tokens (the app) */
    --glass:        rgba(10, 17, 31, .72);
    --glass-strong: rgba(9, 15, 28, .92);
    --glass-border: rgba(255, 255, 255, .10);
    --glass-hi:     rgba(255, 255, 255, .06);
    --ink:          #eef3fa;
    --ink-2:        #aab8cf;
    --ink-3:        #6c7d98;
    --accent:       var(--sky);
    --accent-2:     #33c6ff;
    --green:        #21b579;

    --radius:    14px;
    --radius-sm: 9px;
    --shadow-lg: 0 8px 30px rgba(2, 8, 20, .45);
    --t: .18s ease;

    /* Map chrome (design handoff "map chrome & point-forecast redesign") */
    --font-ui:   Barlow, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --chip:        rgba(9, 16, 26, .72);     /* floating chip over the map (+ blur 6px) */
    --chip-hover:  rgba(9, 16, 26, .88);
    --dock-bg:     rgba(7, 13, 21, .94);
    --drawer-bg:   rgba(7, 13, 21, .95);
    --timebar-bg:  #060c14;
    --hair:        rgba(255, 255, 255, .08);
    --hair-inner:  rgba(255, 255, 255, .07);
    --hair-cell:   rgba(255, 255, 255, .05);
    --ctl:         rgba(255, 255, 255, .06);
    --ctl-hover:   rgba(255, 255, 255, .12);
    --zebra:       rgba(255, 255, 255, .03);
    --ink-1:       #eaf3fb;
    --ink-sec:     #cfe0ee;
    --ink-pill:    #dbe7f2;
    --ink-ter:     #b9cadb;
    --ink-muted:   #8fa4b8;
    --ink-faint:   #7b91a7;
    --ink-label:   #61758a;
    --ink-accent:  #7fd0ff;
    --on-accent:   #04121f;
    --on-cell:     #08131f;
    --ink-dir:     #9fd6f5;
    --accent-solid:  rgba(0, 153, 255, .92);
    --accent-tint:   rgba(0, 153, 255, .16);
    --accent-border: rgba(0, 153, 255, .45);
    --accent-stripe: rgba(0, 153, 255, .10);
    --text-shadow-map: 0 1px 3px rgba(0, 0, 0, .7), 0 0 2px rgba(0, 0, 0, .85);
    --bar-h:     56px;                        /* top bar and timebar */
    --panel-h:   232px;                       /* meteogram dock (graph view) */
    --drawer-w:  340px;
    --ease: 120ms ease-out;

    color-scheme: light;
}

/* Bottom chrome height: the timebar, plus the point dock / sheet when open
   (both measured by app.js; a hidden panel measures 0). The drawer sits
   beside the map, not under it. */
:root { --bottom-h: calc(var(--dock-h, 56px) + var(--meteo-h, 0px)); }
body.layout-drawer { --bottom-h: var(--dock-h, 56px); }

/* Visually hidden, still read by assistive tech */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

* { box-sizing: border-box; }

/* The hidden attribute must always win over display rules on styled elements */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

body {
    background: var(--bg);
    color: var(--text);
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* The app page is a fixed, non-scrolling viewport; document pages scroll. */
body.app-body {
    height: 100dvh;
    overflow: hidden;
    background: #0b1424;
    color: var(--ink);
    color-scheme: dark;
    font-family: var(--font-ui);
}
/* Every number, coordinate, hour and model code is monospaced: columns align
   and the coordinate readout never jitters as the value changes */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #44536d; border-radius: 4px; }

.ico { width: 1.15em; height: 1.15em; fill: none; flex-shrink: 0; }

/* ==========================================================================
   Stage — the full-viewport canvas map
   ========================================================================== */
.stage {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: #ddeefb;
    touch-action: none;          /* pinch/drag handled by the viewer */
}
.stage.dragging { cursor: grabbing; }

/* ==========================================================================
   Glass chrome primitives
   ========================================================================== */
.glass {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    box-shadow: 0 2px 14px rgba(2, 8, 20, .35);
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    border-radius: var(--radius);
    color: var(--ink);
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    color: var(--ink-2);
    width: 34px;
    height: 34px;
    border-radius: 10px;
    cursor: pointer;
    transition: color var(--t), background var(--t);
}
.icon-btn:hover { color: #fff; background: var(--glass-hi); }
.icon-btn.round { border-radius: 50%; width: 40px; height: 40px; }
.icon-btn.sm { width: 28px; height: 28px; margin-right: -6px; }
.icon-btn.glass { color: var(--ink-2); }
.icon-btn.glass:hover { color: #fff; }
.icon-btn.active { color: var(--accent-2); }

/* Small text actions (point table: density / Copy / CSV / Link) */
.text-btn {
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    color: var(--ink-2);
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .3px;
    padding: 4px 9px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color var(--t), border-color var(--t);
}
.text-btn:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }
.menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
}
.icon-btn.active .ico use { fill: currentColor; }

/* Keyboard focus is always visible (mouse clicks don't paint the ring) */
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 6px; }
.timeline:focus-visible { outline-offset: 4px; }

/* Data freshness colouring — shared by chips, model pills and sub-labels */
.fresh-fresh .fdot, .model-btn.fresh-fresh::before { background: var(--green); }
.fresh-stale .fdot, .model-btn.fresh-stale::before { background: #f0a72c; }
.fresh-old .fdot,   .model-btn.fresh-old::before   { background: #e5484d; }
.fdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; box-shadow: 0 0 6px currentColor; }
.scope-sub.fresh-old, .meteo-sub.fresh-old { color: #ff9c9c; }
.scope-sub.fresh-stale, .meteo-sub.fresh-stale { color: #ffcf7a; }

/* ==========================================================================
   Top bar
   ========================================================================== */
/* Transparent 56 px band; every item is a 36 px chip. Nothing wraps: chips
   are fixed or intrinsic width with nowrap, so no label reflows over the map. */
.topbar {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    left: 0;
    right: 0;
    height: var(--bar-h);
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 40;
    pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.topbar-spacer { flex: 1; min-width: 0; pointer-events: none !important; }

.tchip {
    display: flex;
    align-items: center;
    height: 36px;
    border-radius: 18px;
    background: var(--chip);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--ink-1);
    white-space: nowrap;
    flex-shrink: 0;
    transition: background var(--ease);
}

.brand {
    gap: 9px;
    padding: 0 13px 0 10px;
    text-decoration: none;
}
.brand:hover { background: var(--chip-hover); }
/* Full Predict Sea lockup; the wordmark (slate in the print file) is lifted
   to the light ink so it reads on the dark chip. Phones show the mark only. */
.brand-logo { height: 20px; width: auto; aspect-ratio: 800 / 137.8; display: block; flex-shrink: 0; }
.brand-logo .brand-ink { fill: #dfe8f2; }
.brand-mark { width: 18px; height: 16px; display: none; flex-shrink: 0; }

.scope-pill {
    gap: 2px;
    padding: 0 14px 0 3px;
    min-width: 0;
    flex-shrink: 1;
}
.scope-pill .icon-btn { width: 30px; height: 30px; border-radius: 50%; color: var(--ink-ter); }
.scope-text { display: flex; flex-direction: column; gap: 2px; line-height: 1; min-width: 0; }
.scope-title { font: 600 13px/1 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scope-sub { font: 400 10.5px/1 var(--font-ui); color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Search / coordinate field: holds the open point's "lat, lon" as an editable value */
.searchbox {
    position: relative;
    gap: 10px;
    width: 330px;
    padding: 0 6px 0 14px;
    color: #8ba1b6;
    flex-shrink: 1;
    min-width: 0;
}
.searchbox > .ico { width: 14px; height: 14px; }
.searchbox:focus-within { background: var(--chip-hover); box-shadow: 0 0 0 1px var(--accent-border); }
.searchbox input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 0;
    height: 100%;
    font: 500 13px/1 var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--ink-1);
}
.searchbox input::placeholder { color: var(--ink-muted); font-family: var(--font-ui); font-size: 13px; }
.searchbox input::-webkit-search-cancel-button { display: none; }
.locate-btn {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 153, 255, .9);
    color: var(--on-accent);
    cursor: pointer;
    transition: filter var(--ease);
}
.locate-btn:hover { filter: brightness(1.15); }
.locate-btn .ico { width: 15px; height: 15px; }

.search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    min-width: 260px;
    background: var(--glass-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    max-height: min(340px, 50vh);
    overflow-y: auto;
    padding: 6px;
    z-index: 60;
}
.search-group {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 8px 10px 3px;
}
.search-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font: inherit;
    font-size: 13.5px;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
}
.search-item:hover, .search-item.active { background: rgba(0, 153, 255, .16); }
.search-item .ico { color: var(--accent); }
.search-item small { color: var(--ink-3); margin-left: auto; }
.search-empty { padding: 12px; font-size: 13px; color: var(--ink-3); text-align: center; }

/* Clock (top bar only: the meteogram marks its "nearest to now" column with
   the same class name and must not inherit this layout) */
.topbar .clock { padding: 0 14px; }
.cycle-clock { font: 600 12px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-1); }
.cycle-clock .sep { color: #5f7489; }
.cycle-clock .loc { color: var(--ink-ter); }
.cycle-date { display: none; }

/* Info + menu: 36 px circles */
.round-btn {
    width: 36px;
    justify-content: center;
    padding: 0;
    border: 0;
    color: var(--ink-sec);
    cursor: pointer;
}
.round-btn:hover, .round-btn[aria-expanded="true"] { background: var(--chip-hover); color: #fff; }
.round-btn .ico { width: 17px; height: 17px; }

/* Menu popover */
.menu-wrap { position: relative; flex-shrink: 0; }
.menu-pop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 250px;
    max-height: calc(100dvh - var(--bar-h) - 24px);
    overflow-y: auto;
    background: var(--glass-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 8px;
    z-index: 60;
}
.menu-pop a, .menu-pop .menu-item {
    display: block;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: var(--ink);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
}
.menu-pop a:hover, .menu-pop .menu-item:hover { background: rgba(0, 153, 255, .16); }
.menu-pop .menu-switch, .menu-pop #btnFullscreen { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; color: var(--ink); }
.menu-pop #btnFullscreen .ico { width: 15px; height: 15px; color: var(--ink-2); }
.menu-sep { height: 1px; background: var(--glass-border); margin: 6px 4px; }
.menu-note { padding: 3px 12px; font-size: 11px; color: var(--ink-3); }
.menu-note b { color: var(--ink-2); }
.menu-keys { display: flex; flex-wrap: wrap; gap: 3px 10px; line-height: 1.7; }
.menu-keys span { white-space: nowrap; }
.menu-note kbd {
    display: inline-block;
    min-width: 16px;
    padding: 0 4px;
    border: 1px solid var(--glass-border);
    border-bottom-width: 2px;
    border-radius: 4px;
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    color: var(--ink);
    background: rgba(255, 255, 255, .06);
}
/* Units & time: five labelled selects, folded under the menu item */
.units-form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; padding: 4px 12px 10px; }
.units-form label { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; font-weight: 700; color: var(--ink-3); letter-spacing: .3px; text-transform: uppercase; }
.units-form .select.sm { padding: 5px 24px 5px 9px; font-size: 12px; width: 100%; }

/* ==========================================================================
   Landing overlay
   ========================================================================== */
/* The landing overlay never blocks the map: it is fully interactive from the
   first second. Only the basin chips receive the pointer. */
.landing {
    position: fixed;
    inset: 0;
    z-index: 20;
    overflow: hidden;
    pointer-events: none;
}

/* Vignette so overlaid text always reads against the live map */
.landing::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(5, 10, 22, .62) 0%, rgba(5, 10, 22, .18) 26%, rgba(5, 10, 22, 0) 45%),
        linear-gradient(0deg, rgba(5, 10, 22, .66) 0%, rgba(5, 10, 22, .15) 22%, rgba(5, 10, 22, 0) 38%);
    transition: opacity .45s ease;
}
.landing .hero, .landing .basin-strip, .landing::before { transition: opacity .45s ease; }

/* Once the user starts exploring (zoom / pan), the copy melts away */
body.explored .landing::before,
body.explored .landing .hero,
body.explored .landing .basin-strip { opacity: 0; }
body.explored .landing .basin-strip { pointer-events: none; }
/* The faded hero must not swallow taps or hover on the map beneath it
   (its hint row and chips opt back into pointer events while visible) */
body.explored .landing .hero-hint, body.explored .landing .hero-meta .chip-btn { pointer-events: none; }

/* Hero copy overlaid on the live map */
.hero {
    position: absolute;
    left: clamp(18px, 5vw, 72px);
    bottom: clamp(84px, 16vh, 150px);
    max-width: 560px;
    z-index: 2;
    pointer-events: none;
}
.hero h1 {
    margin: 0 0 12px;
    font-size: 34px;
    line-height: 1.04;
    letter-spacing: -1.4px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 18px rgba(2, 8, 20, .55);
}
.hero p {
    margin: 0 0 14px;
    max-width: 470px;
    color: #dbe6f5;
    font-size: clamp(13.5px, 1.25vw, 15.5px);
    line-height: 1.55;
    text-shadow: 0 1px 10px rgba(2, 8, 20, .6);
}
.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 14px;
}
/* Stat line: plain text separated by dots; only the Data Saver toggle is a control */
.hero-meta { gap: 4px 0; align-items: center; }
.hero-meta .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #dbe6f5;
    white-space: nowrap;
    text-shadow: 0 1px 8px rgba(2, 8, 20, .6);
}
.hero-meta .chip + .chip::before { content: "·"; color: var(--ink-3); margin: 0 9px; }
.hero-meta .chip b { color: #fff; font-weight: 800; }
.hero-meta .chip-btn {
    pointer-events: auto;           /* the hero itself lets the map through */
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    color: #e8f2ff;
    background: rgba(10, 17, 31, .55);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    padding: 5px 12px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-shadow: none;
    transition: border-color var(--t), background var(--t);
}
.hero-meta .chip-btn::before { display: none; }
.hero-meta .chip-btn:hover { border-color: var(--accent); }
.hero-meta .chip-btn[aria-pressed="true"] { border-color: var(--green); background: rgba(33, 181, 121, .18); }
.hero-meta .chip-btn .ico { width: 15px; height: 15px; color: var(--accent-2); }
.hero-meta .chip-btn[aria-pressed="true"] .ico { color: var(--green); }
.hero-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 8px rgba(2, 8, 20, .7);
    pointer-events: auto;
}
.hint-item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.hero-hint .ico { width: 19px; height: 19px; color: var(--accent-2); animation: bob 2.2s ease-in-out infinite; }
.hint-item:nth-child(2) .ico { animation-delay: .4s; }
.hint-item:nth-child(3) .ico { animation-delay: .8s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (max-width: 1366px) { .hero h1 { font-size: 28px; } }

/* Basin quick-strip (bottom): full coverage on any screen */
.basin-strip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: max(14px, env(safe-area-inset-bottom));
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    padding: 4px 14px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
    z-index: 2;
}
.basin-strip::-webkit-scrollbar { display: none; }
.basin-strip { pointer-events: auto; }
@media (min-width: 900px) { .basin-strip { justify-content: safe center; -webkit-mask-image: none; mask-image: none; } }
.basin-chip { scroll-snap-align: start; }
.basin-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    padding: 8px 14px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color var(--t), transform var(--t), background var(--t);
    white-space: nowrap;
}
.basin-chip:hover { border-color: var(--bc, var(--accent)); transform: translateY(-2px); background: var(--glass-strong); }
.basin-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bc, var(--accent)); box-shadow: 0 0 7px var(--bc, var(--accent)); }

/* ==========================================================================
   Forecast chrome — present in the DOM at all times, faded in whenever
   body.chrome is set (region/basin views always; the world view once the
   user starts exploring, Windy-style).
   ========================================================================== */
#forecastUI > * {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .35s ease, visibility .35s ease;
}
body.chrome #forecastUI > * {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
/* The layer rail is usable on the pristine landing (a first tap on a layer
   is a natural way in); the rest of the chrome stays faded until exploring */
body:not(.chrome) #forecastUI .param-rail { visibility: visible; opacity: .8; pointer-events: auto; }

/* Layer pills — a bare list on the left edge: no panel, no border, no card.
   Labelled pills on wide windows, 36 px icon circles below 1400 px (and on
   the pristine landing, where the hero copy shares the left edge). The list
   scrolls inside the band between the top bar and the bottom chrome. */
.param-rail {
    position: fixed;
    left: 14px;
    top: calc(env(safe-area-inset-top, 0px) + 72px);
    max-height: calc(100dvh - 72px - var(--bottom-h, 56px) - 16px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    /* room for the active pill's focus ring inside the scroller */
    padding: 2px 4px 2px 2px;
    margin: -2px 0 0 -2px;
    z-index: 30;
}
.param-rail::-webkit-scrollbar { display: none; }
.param-btn, .pill-disclosure {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    flex-shrink: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 15px;
    background: var(--chip);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--ink-pill);
    font: 500 13px/1 var(--font-ui);
    letter-spacing: .01em;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
}
.param-btn .ico, .pill-disclosure .ico { width: 17px; height: 17px; display: none; }
.param-btn:hover:not(:disabled), .pill-disclosure:hover { background: var(--chip-hover); color: #fff; }
.param-btn.active {
    background: var(--accent-solid);
    color: var(--on-accent);
    font-weight: 600;
}
.param-btn.active:hover:not(:disabled) { background: var(--accent-solid); color: var(--on-accent); filter: brightness(1.08); }
.param-btn:disabled { opacity: .35; cursor: not-allowed; }

/* "Overlays ›" disclosure: the multi-select overlay set lives behind it */
.pill-disclosure { margin-top: 4px; color: var(--ink-muted); }
.pill-disclosure .chev { display: block; width: 13px; height: 13px; margin: 0 -4px 0 -3px; transition: transform var(--ease); }
.pill-disclosure[aria-expanded="true"] { color: var(--ink-pill); }
.pill-disclosure[aria-expanded="true"] .chev { transform: rotate(90deg); }
.ov-count {
    min-width: 17px; height: 17px; padding: 0 5px; margin-left: -2px;
    border-radius: 9px; background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent-border);
    font: 600 10px/17px var(--font-mono); color: var(--ink-accent); text-align: center;
}
.overlay-group { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding-left: 12px; }
/* A pressed overlay reads as pressed: accent tint + inset ring + dot */
.param-btn.chart-btn.active {
    background: rgba(9, 16, 26, .8);
    color: var(--ink-accent);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--accent-border);
}
.param-btn.chart-btn.active::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-right: -4px;
    border-radius: 50%;
    background: var(--accent-2);
    box-shadow: 0 0 6px var(--accent-2);
}

/* Icon mode: 36 px circles, labels move to tooltips (title) */
@media (max-width: 1399px) {
    .param-rail { gap: 5px; }
    .param-btn, .pill-disclosure { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 18px; color: var(--ink-ter); }
    .param-btn > span, .pill-disclosure > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .param-btn .ico, .pill-disclosure .ico:not(.chev) { display: block; }
    .pill-disclosure .chev { position: absolute; right: -1px; bottom: 1px; width: 11px; height: 11px; margin: 0; color: var(--ink-muted); }
    .overlay-group { padding-left: 0; }
    .param-btn.chart-btn.active::after { position: absolute; top: 3px; right: 3px; margin: 0; }
    .ov-count { position: absolute; top: -3px; right: -4px; min-width: 15px; height: 15px; padding: 0 3px; font-size: 9px; line-height: 15px; }
}
body:not(.chrome) .param-btn, body:not(.chrome) .pill-disclosure { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 18px; color: var(--ink-ter); }
body:not(.chrome) .param-btn > span, body:not(.chrome) .pill-disclosure > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body:not(.chrome) .param-btn .ico, body:not(.chrome) .pill-disclosure .ico:not(.chev) { display: block; }
body:not(.chrome) .pill-disclosure { display: none; }      /* overlays never draw under the hero */
body:not(.chrome) .param-btn.active { color: var(--on-accent); }

/* Observation / storm overlay buttons: a small "stale" tag when the file is
   past its shelf life (buoys > 1 h) */
.param-btn .ov-stale {
    font-size: 8.5px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .3px;
    padding: 1px 4px;
    border-radius: 999px;
    background: #f0a72c;
    color: #2b1a00;
    pointer-events: none;
}
.param-btn.chart-btn.stale.active::after { background: #f0a72c; box-shadow: 0 0 6px #f0a72c; }
@media (max-width: 1399px) { .param-btn .ov-stale { position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); font-size: 7.5px; padding: 0 3px; } }

/* Storm chip: "N active systems" in the dock (and its hero twin) */
.storm-chip { box-shadow: inset 0 0 0 1px rgba(255, 143, 32, .55); color: #ffd39a; background: rgba(255, 143, 32, .12); }
.storm-chip:hover { color: #fff; background: rgba(255, 143, 32, .22); }
.storm-chip.stale { box-shadow: inset 0 0 0 1px rgba(240, 167, 44, .5); color: #ffcf7a; background: rgba(240, 167, 44, .1); }
.hero-meta .chip-storm.stale { border-color: rgba(240, 167, 44, .5); color: #ffcf7a; background: rgba(240, 167, 44, .1); }
.hero-meta .chip-storm { border-color: rgba(255, 143, 32, .55); background: rgba(255, 143, 32, .14); }
.hero-meta .chip-storm .ico { color: #ffb15c; }

/* Buoy report / storm details popover */
.ov-pop {
    position: fixed;
    left: 50%;
    top: 40%;
    width: min(340px, calc(100vw - 28px));
    max-height: min(520px, calc(100vh - var(--bottom-h, 56px) - 90px));
    overflow: auto;
    background: var(--glass-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 10px 12px 9px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--ink-2);
    z-index: 36;
}
.ov-pop .ovp-head { display: flex; align-items: flex-start; gap: 8px; }
.ov-pop .ovp-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ov-pop .ovp-title b { color: #fff; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.ov-pop .ovp-sub { font-size: 10.5px; color: var(--ink-3); }
.ov-pop .ovp-close { flex-shrink: 0; width: 28px; height: 28px; margin: -4px -6px 0 0; }
.ov-pop .ovp-time { margin: 5px 0 6px; font-size: 11.5px; color: var(--ink); font-weight: 600; }
.ov-pop .ovp-time i { color: #ffcf7a; font-style: normal; }
.ov-pop .ovp-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ov-pop .ovp-table th { text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--ink-3); padding: 2px 6px 3px 0; }
.ov-pop .ovp-table thead th:not(:first-child) { text-transform: none; letter-spacing: 0; font-size: 10.5px; color: var(--ink-2); }
.ov-pop .ovp-table td { padding: 3px 6px 3px 0; border-top: 1px solid var(--glass-border); color: #fff; font-weight: 600; vertical-align: top; }
.ov-pop .ovp-table tbody th { border-top: 1px solid var(--glass-border); vertical-align: top; text-transform: none; letter-spacing: 0; font-size: 11.5px; color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.ov-pop .ovp-table td.ovp-model { color: var(--accent-2); }
.ov-pop .ovp-table.storm td small { display: block; font-size: 10px; color: var(--ink-3); font-weight: 500; }
.ov-pop .ovp-table.storm tr.sel td { background: rgba(0, 153, 255, .12); }
.ov-pop .ovp-kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 2px 0 8px; }
.ov-pop .ovp-kv span { font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .3px; font-weight: 700; align-self: center; }
.ov-pop .ovp-kv b { color: #fff; }
.ov-pop .ovp-ens { display: flex; align-items: center; gap: 7px; margin: 8px 0 2px; font-size: 11.5px; color: var(--ink); cursor: pointer; }
.ov-pop .ovp-ens input { margin: 0; accent-color: var(--accent); }
.ov-pop .ovp-note { margin-top: 7px; font-size: 10.5px; color: var(--ink-3); }
.ov-pop .ovp-attrib { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--glass-border); font-size: 10px; color: var(--ink-3); }
.tc-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; border: 1px solid rgba(10, 18, 30, .8); vertical-align: -1px; }
@media (max-width: 560px) {
    /* Phone: a sheet above the dock and the rail, full width */
    .ov-pop {
        left: 14px !important;
        right: 14px;
        top: auto !important;
        bottom: calc(var(--bottom-h, 56px) + 12px);
        width: auto;
        max-height: min(52vh, 420px);
    }
}

/* Third-party overlay attribution (required by ODbL / GEBCO terms): bottom
   right, just above the bottom chrome (timebar, plus the dock when open) */
.web-credit {
    position: fixed;
    right: 16px;
    bottom: calc(var(--bottom-h, 56px) + 8px);
    max-width: min(420px, 50vw);
    font-size: 9.5px;
    color: var(--ink-ter);
    background: var(--chip);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 6px;
    padding: 3px 8px;
    z-index: 29;
    text-align: right;
    line-height: 1.3;
}
body.meteo-open.layout-dock .web-credit { bottom: calc(var(--bottom-h, 56px) + 30px); }   /* clear of the dock scrim */
body.meteo-open.layout-drawer .web-credit { right: calc(var(--drawer-w) + 16px); max-width: min(420px, calc(100vw - var(--drawer-w) - 90px)); }

/* Timebar — full width, 56 px: transport · day bands + playhead · models, UTC, units */
.dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
    padding: 0 16px env(safe-area-inset-bottom, 0px);
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--timebar-bg);
    border-top: 1px solid var(--hair);
    z-index: 35;
}

.playback { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.dock-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 30px;
    border-radius: 6px;
    border: 0;
    background: none;
    color: var(--ink-muted);
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
}
.dock-btn .ico { width: 13px; height: 13px; }
.dock-btn:hover:not(:disabled) { color: #fff; background: var(--ctl); }
.dock-btn:disabled { opacity: .35; cursor: not-allowed; }
.dock-btn.play {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--on-accent);
    background: var(--accent);
}
.dock-btn.play .ico { width: 12px; height: 12px; }
.dock-btn.play:hover:not(:disabled) { background: var(--accent); color: var(--on-accent); filter: brightness(1.15); }

/* Track: day bands, 6/12-hourly ticks, wall-clock line and the playhead.
   Positions are proportional to valid time; the range input underneath
   keeps keyboard stepping and assistive-tech semantics, the pointer is
   handled on the track (app.js) so a drag follows real time. */
.tl-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
    height: 38px;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.tl-days {
    position: absolute;
    inset: 0;
    display: flex;
    border-radius: 6px;
    overflow: hidden;
}
.tl-days span {
    flex-shrink: 0;
    min-width: 0;
    height: 100%;
    padding: 4px 0 0 8px;
    border-left: 1px solid rgba(255, 255, 255, .12);
    font: 600 10px/1 var(--font-ui);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    white-space: nowrap;
    overflow: hidden;
}
.tl-days span:nth-child(odd) { background: var(--zebra); }
.tl-ticks { position: absolute; left: 0; right: 0; bottom: 4px; height: 9px; pointer-events: none; }
.tl-ticks span {
    position: absolute;
    transform: translateX(-50%);
    font: 400 9px/1 var(--font-mono);
    color: var(--ink-label);
    white-space: nowrap;
}
.tl-head {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: var(--accent);
    pointer-events: none;
    z-index: 2;
}
.tl-chip {
    position: absolute;
    top: -6px;
    left: 1px;
    transform: translateX(-50%);
    padding: 3px 7px;
    border-radius: 5px;
    background: var(--accent);
    font: 600 10px/1 var(--font-mono);
    color: var(--on-accent);
    white-space: nowrap;
}
/* Wall-clock "now" line (left = now / run length) */
.tl-now {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    margin-left: -1px;
    border-left: 2px dotted rgba(234, 243, 251, .55);
    pointer-events: none;
    z-index: 1;
}
.tl-wrap:has(.timeline:focus-visible) .tl-chip { box-shadow: 0 0 0 2px var(--timebar-bg), 0 0 0 4px var(--accent-2); }
.tl-wrap.disabled { cursor: not-allowed; opacity: .5; }
/* The input fills the track invisibly: focus + arrow keys, no pointer */
.timeline {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
}
.time-select { display: none; }

.select {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, .07) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='%23aab8cf' stroke-width='2.4' stroke-linecap='round'/></svg>") no-repeat right 9px center / 13px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 7px 28px 7px 11px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
}
.select:focus { outline: 0; border-color: var(--accent); }
.select option { background: #101a2c; color: var(--ink); }
/* Right cluster: jump chips, model chips | UTC, units */
.tb-right { display: flex; align-items: center; gap: 5px; flex-shrink: 0; min-width: 0; }
.tb-div { width: 1px; height: 22px; margin: 0 4px; background: rgba(255, 255, 255, .12); flex-shrink: 0; }

/* Model chips: 6 px radius, freshness dot before the name */
.model-switch { position: relative; display: flex; align-items: center; gap: 5px; flex-shrink: 1; min-width: 0; }
.model-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 0;
    background: var(--ctl);
    font: 600 11px/1 var(--font-ui);
    color: var(--ink-ter);
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
    white-space: nowrap;
}
.model-btn:hover { background: var(--ctl-hover); color: #fff; }
.model-btn.active, .model-btn.active:hover { background: var(--accent); color: var(--on-accent); }
.model-btn::before {
    content: "";
    display: inline-block;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--ink-3);
}
.model-btn.active::before { box-shadow: 0 0 0 1.5px rgba(4, 18, 31, .55); }
.model-btn.fresh-old { opacity: .7; }
.model-btn.active.fresh-old { opacity: 1; }

/* About the models (from the (i) button in the top bar) */
.model-info {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + var(--bar-h) + 4px);
    right: 14px;
    width: min(520px, calc(100vw - 28px));
    max-height: calc(100dvh - var(--bar-h) - var(--bottom-h, 56px) - 24px);
    overflow-y: auto;
    background: var(--glass-strong);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 10px 14px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--ink-2);
    z-index: 61;
}
.model-info b { color: var(--ink); }
.model-info .mi-row { display: flex; gap: 10px; padding: 3px 0; }
.model-info .mi-row > b { flex: 0 0 84px; }
.model-info .mi-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--glass-border); }
.model-info .mi-legend .fdot { margin-right: 4px; }
.model-info .mi-close { position: absolute; top: 6px; right: 6px; }

/* Timeline quick-jumps (Now / +24h / +3d / +7d) */
.jump-chips { display: flex; gap: 3px; margin-right: 6px; }
.jump-chip {
    border: 0;
    background: transparent;
    color: var(--ink-muted);
    font: 600 11px/1 var(--font-mono);
    padding: 7px 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: color var(--ease), background var(--ease);
}
.jump-chip:hover { color: #fff; background: var(--ctl); }

/* Timebar chips: UTC · units · spread · storms */
.dock-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: var(--ctl);
    border-radius: 6px;
    padding: 7px 10px;
    font: 600 11px/1 var(--font-ui);
    color: var(--ink-ter);
    cursor: pointer;
    text-decoration: none;
    transition: color var(--ease), background var(--ease);
    white-space: nowrap;
    flex-shrink: 0;
}
.dock-chip.mono { font-family: var(--font-mono); }
.dock-chip:hover { color: #fff; background: var(--ctl-hover); }
.dock-chip.active { background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent-border); color: var(--ink-accent); }

/* Toggle switch (Data Saver) */
.switch { user-select: none; }
.switch input { display: none; }
.switch .slider {
    width: 32px;
    height: 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    position: relative;
    flex-shrink: 0;
    transition: background var(--t);
}
.switch .slider::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    transition: transform var(--t);
}
.switch input:checked + .slider { background: var(--green); }
.switch input:checked + .slider::after { transform: translateX(14px); }

/* Legend — a 12 px vertical scale on the right edge, ticks to its left.
   Unit, ramp and ticks follow the active layer (render.js LUT), never a
   per-layer hardcode. Ticks are in DOM order min→max; the column reverses. */
.legend {
    position: fixed;
    right: 16px;
    top: calc(env(safe-area-inset-top, 0px) + 78px);
    z-index: 29;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    pointer-events: none;
}
.legend-ticks {
    height: 196px;
    margin-top: 15px;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    align-items: flex-end;
    font: 500 10.5px/1 var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--ink-1);
    text-shadow: var(--text-shadow-map);
    white-space: nowrap;
}
.legend-ticks span { height: 0; display: flex; align-items: center; }
/* A slim translucent backing keeps the labels >= 4.5:1 over a bright field
   (land, the warm end of a ramp) where the text shadow alone can't */
.legend-ticks { box-sizing: content-box; padding: 7px 4px; margin-top: 8px !important; margin-right: -3px; border-radius: 6px; background: rgba(7, 13, 21, .66); }
body.layout-drawer .legend-ticks, body.layout-sheet .legend-ticks { margin-top: 6px !important; margin-right: 0; margin-left: -3px; }
.legend-unit { box-sizing: content-box; padding: 2px 4px; margin: -2px 0; border-radius: 4px; background: rgba(7, 13, 21, .66); }
.legend-col { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.legend-unit {
    height: 10px;
    font: 600 10px/1 var(--font-ui);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-1);
    text-shadow: var(--text-shadow-map);
    white-space: nowrap;
}
.legend-grad {
    width: 12px;
    height: 196px;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}
.legend-note {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: flex; align-items: center; gap: 6px;
    font-size: 9.5px; color: var(--ink-1); text-shadow: var(--text-shadow-map); white-space: nowrap;
}
.eez-dash { display: inline-block; width: 22px; border-top: 2px dashed rgba(160, 160, 170, .8); }

/* Zoom controls: 34 px circles under the legend */
.zoombox {
    position: fixed;
    right: 16px;
    top: calc(env(safe-area-inset-top, 0px) + 300px);
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 30;
}
body.legend-off .zoombox { top: calc(env(safe-area-inset-top, 0px) + 78px); }

/* Picked-point marker: white dot with an accent halo */
.point-marker {
    position: fixed;
    z-index: 26;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(0, 153, 255, .55), 0 3px 10px rgba(0, 0, 0, .5);
    pointer-events: none;
}

/* Saved-spot pins on screen (the snapshot draws its own copies); names show
   once the view is basin-scale or closer (.named, set by positionFavPins) */
.fav-pins { position: fixed; inset: 0; z-index: 25; pointer-events: none; }
.fav-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    border: 0;
    background: none;
    color: #ffd166;
    cursor: pointer;
    pointer-events: auto;
    filter: drop-shadow(0 1px 3px rgba(2, 8, 20, .8));
}
.fav-pin .ico { width: 16px; height: 16px; }
.fav-pin-name {
    display: none;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(2, 8, 20, .9);
    white-space: nowrap;
}
.fav-pins.named .fav-pin-name { display: inline; }
.fav-pin.open { opacity: .35; }
.fav-badge {
    margin-left: 5px;
    min-width: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--warn, #ffb020);
    color: #1a1200;
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
}

/* Inline name / group row for a new saved spot */
.fav-row { display: flex; align-items: center; gap: 6px; padding: 0 2px 8px; }
.fav-input {
    flex: 1 1 160px;
    min-width: 0;
    height: 28px;
    padding: 0 9px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: var(--ink);
    font: inherit;
    font-size: 12.5px;
}
.fav-input.sm { flex: 0 1 110px; }
.fav-input:focus { outline: none; border-color: var(--accent); }

/* Wave sub-mode (combined / primary swell) under the Waves tab */
.rail-sub { display: flex; gap: 3px; padding: 0 4px 4px; }
.rail-sub button {
    flex: 1;
    padding: 2px 4px;
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    background: none;
    color: var(--ink-3);
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}
.rail-sub button.active { color: var(--accent-2); border-color: var(--accent); background: rgba(0, 153, 255, .12); }

/* ==========================================================================
   Watch list board (#/watch) — full-height sheet over the map
   ========================================================================== */
.watch {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    background: var(--glass-strong);
    color: var(--ink);
    padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.watch-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 2px 8px; border-bottom: 1px solid var(--glass-border); }
.watch-head > .ico { width: 22px; height: 22px; color: var(--accent-2); }
.watch-title { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.watch-name { font-size: 16px; font-weight: 800; }
.watch-sub { font-size: 11px; color: var(--ink-3); }
.watch-head .icon-btn { width: auto; padding: 0 9px; border: 1px solid var(--glass-border); border-radius: 999px; }
.watch-head .icon-btn .lbl { display: inline; margin-left: 4px; font-size: 11px; font-weight: 800; }
.watch-notify { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.watch-notify .ico { width: 14px; height: 14px; }
.watch-notify.active { color: var(--green); border-color: rgba(33, 181, 121, .5); }
.watch-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 8px 0; }
.watch-foot { font-size: 11px; color: var(--ink-3); padding-top: 6px; border-top: 1px solid var(--glass-border); }
.watch-empty, .watch-note { padding: 28px 12px; text-align: center; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.watch-note { display: flex; align-items: center; justify-content: center; gap: 10px; }
.wl-scroll { overflow-x: auto; }
.wl-table { border-collapse: separate; border-spacing: 0 3px; width: 100%; min-width: 980px; font-size: 12px; font-variant-numeric: tabular-nums; }
.wl-table th { font-size: 9.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: var(--ink-3); padding: 2px 5px; text-align: center; white-space: nowrap; }
.wl-h1 th { border-bottom: 1px solid var(--glass-border); }
.wl-h2 th { font-size: 9px; }
.wl-th-name { text-align: left !important; }
.wl-table td { padding: 3px 5px; text-align: center; vertical-align: middle; background: rgba(255, 255, 255, .03); }
.wl-table td:first-child { border-radius: 8px 0 0 8px; text-align: left; }
.wl-table td:last-child { border-radius: 0 8px 8px 0; }
.wl-row { cursor: pointer; }
.wl-row:hover td { background: rgba(0, 153, 255, .12); }
.wl-row.wl-red td { box-shadow: inset 0 0 0 1px rgba(229, 72, 77, .55); background: rgba(229, 72, 77, .13); }
.wl-row.wl-amber td { box-shadow: inset 0 0 0 1px rgba(240, 167, 44, .45); background: rgba(240, 167, 44, .10); }
.wl-row.wl-green td { box-shadow: inset 0 0 0 1px rgba(33, 181, 121, .30); background: rgba(33, 181, 121, .07); }
.wl-row.wl-none td { color: var(--ink-3); }
.wl-name { display: flex; align-items: center; gap: 6px; min-width: 150px; }
.wl-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); flex-shrink: 0; }
.wl-red .wl-dot, .wl-dot.red { background: #e5484d; box-shadow: 0 0 6px rgba(229, 72, 77, .8); }
.wl-amber .wl-dot, .wl-dot.amber { background: #f0a72c; }
.wl-green .wl-dot, .wl-dot.green { background: var(--green); }
.wl-in {
    height: 26px; padding: 0 7px; min-width: 0;
    border: 1px solid transparent; border-radius: 6px;
    background: transparent; color: var(--ink); font: inherit; font-size: 12px; font-weight: 700;
}
.wl-in:hover { border-color: var(--glass-border); }
.wl-in:focus { outline: none; border-color: var(--accent); background: rgba(255, 255, 255, .06); }
.wl-in-name { width: 150px; }
.wl-in-group { width: 84px; text-align: center; font-weight: 600; color: var(--ink-2); }
.wl-open { background: none; border: 0; color: var(--ink-2); font: inherit; font-size: 11.5px; cursor: pointer; white-space: nowrap; text-decoration: underline dotted; }
.wl-open:hover { color: #fff; }
.wl-v { border-radius: 4px; font-weight: 700; min-width: 34px; }
.wl-nodata { text-align: left !important; color: var(--ink-3); font-size: 11.5px; }
.wl-first { white-space: nowrap; font-size: 11px; line-height: 1.3; }
.wl-first b { color: #ffb4b6; }
.wl-ok { color: var(--ink-3); }
.wl-badge { display: inline-block; min-width: 30px; padding: 2px 6px; border-radius: 999px; font-size: 10.5px; font-weight: 800; color: #fff; background: rgba(255, 255, 255, .10); }
.wl-act { white-space: nowrap; }
.wl-btn { width: 24px; height: 24px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--ink-3); font-size: 10px; cursor: pointer; }
.wl-btn:hover { color: #fff; border-color: var(--glass-border); }
.wl-btn.wl-del:hover { color: #ff8a8e; }
.wl-edit td { background: rgba(0, 153, 255, .08); border-radius: 8px !important; }
.wl-form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; }
.wl-form label { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); }
.wl-num { width: 62px; text-align: right; border-color: var(--glass-border); background: rgba(255, 255, 255, .06); }
.wl-hint { font-size: 10.5px; color: var(--ink-3); }
.watch-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 10.5px; color: var(--ink-3); padding: 8px 2px 0; }
.watch-legend .wl-dot { margin-left: 8px; }
.wl-print-head { font-size: 11px; color: #3d4a63; padding: 0 0 8px; }
@media (max-width: 720px) {
    .watch-head .text-btn { font-size: 10px; padding: 4px 7px; }
    .watch-notify > span:last-child { display: none; }
    .wl-table { min-width: 860px; font-size: 11px; }
    .wl-in-name { width: 120px; }
}

/* ==========================================================================
   Point forecast — meteogram strip
   ========================================================================== */
/* Three layouts from the window width (body.layout-*, set by app.js):
     dock    ≥ 1100 px  full-width meteogram dock above the timebar
     drawer  700–1099   340 px right-hand drawer, time running down the rows
     sheet   < 700      the drawer's content as a 55 vh bottom sheet
   Nothing overlaps: the dock + timebar own the bottom band, the pills,
   legend and zoom are top-anchored above it. */
.meteo {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--dock-h, 56px);
    height: var(--panel-h);
    z-index: 34;
    display: grid;
    grid-template-columns: 226px minmax(0, 1fr) 128px;
    grid-template-areas: "summary main tabs";
    align-items: stretch;
    background: var(--dock-bg);
    border-top: 1px solid var(--hair);
    color: var(--ink-1);
}
/* Scrim so the map doesn't collide with the dock's top edge */
.meteo::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 26px;
    background: linear-gradient(180deg, rgba(7, 13, 21, 0), rgba(7, 13, 21, .88));
    pointer-events: none;
}
/* Table and Compare may grow the dock — never past 300 px */
.meteo[data-view="table"], .meteo.comparing { height: 300px; }
/* Focus lands on the panel itself after a search pick / deep link: no ring
   around the whole panel, the next Tab shows one */
.meteo:focus { outline: none; }

/* a. Summary — coordinate, run age, headline, metric grid */
.meteo-summary {
    grid-area: summary;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 0 20px;
    border-right: 1px solid var(--hair-inner);
}
.ms-head { display: flex; align-items: flex-start; gap: 6px; }
.meteo-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.meteo-coords { font: 600 15px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-1); white-space: nowrap; }
.meteo-sub { font: 400 11px/1.1 var(--font-ui); color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-btn {
    position: relative;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .07);
    color: var(--ink-ter);
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
}
.mini-btn .ico { width: 12px; height: 12px; }
.mini-btn:hover { background: var(--ctl-hover); color: #fff; }
#btnFav.active { color: #ffd166; }
#btnFav.active .ico use { fill: currentColor; }
.mini-btn .fav-badge { position: absolute; top: -6px; right: -8px; margin: 0; }
.ms-headline { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ms-big { font: 600 38px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-1); flex-shrink: 0; }
.ms-big-sub { font: 500 13px/1.1 var(--font-ui); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ms-grid { display: flex; flex-wrap: wrap; column-gap: 18px; row-gap: 8px; }
.ms-cell { display: flex; flex-direction: column; gap: 2px; }
.ms-k { font: 600 9px/1 var(--font-ui); letter-spacing: .12em; color: var(--ink-label); text-transform: uppercase; }
.ms-v { font: 500 12px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-sec); white-space: nowrap; }
.ms-v.fresh-stale { color: #ffcf7a; }

/* d. View tabs — Graph / Table / Compare / Export (List on the drawer) */
.meteo-tabs {
    grid-area: tabs;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 0 16px;
    border-left: 1px solid var(--hair-inner);
}
.view-tab {
    width: 100%;
    padding: 7px 0;
    border: 0;
    border-radius: 7px;
    background: var(--ctl);
    font: 600 11px/1 var(--font-ui);
    letter-spacing: .06em;
    color: var(--ink-ter);
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
}
.view-tab:hover { background: var(--ctl-hover); color: #fff; }
.view-tab[aria-pressed="true"], .view-tab[aria-expanded="true"] {
    background: var(--accent-tint);
    box-shadow: inset 0 0 0 1px var(--accent-border);
    color: var(--ink-accent);
}
#viewList { display: none; }
.density-btn { display: none; width: 100%; border-radius: 7px; }
.meteo[data-view="table"]:not(.comparing) .density-btn { display: block; }
.export-wrap { position: relative; }
.export-pop {
    position: absolute;
    right: calc(100% + 8px);
    bottom: 0;
    width: 170px;
    padding: 6px;
    background: var(--glass-strong);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 5;
}
.export-pop .menu-item { padding: 8px 10px; border-radius: 7px; color: var(--ink); font-size: 12.5px; font-weight: 600; }
.export-pop .menu-item:hover { background: rgba(0, 153, 255, .16); }

/* b + c. Main area: graph, table, list or agreement */
.meteo-main { grid-area: main; position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.meteo-main .fav-row {
    position: absolute;
    left: 8px; right: 8px; top: 8px;
    z-index: 6;
    padding: 6px 8px;
    border-radius: 9px;
    background: var(--glass-strong);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-lg);
}
.meteo-body { position: relative; flex: 1; min-height: 0; }
.meteo-graph, .meteo-strip, .meteo-list { display: none; }
.meteo[data-view="graph"] .meteo-graph { display: flex; }
.meteo[data-view="table"] .meteo-strip { display: flex; }
.meteo[data-view="list"] .meteo-list { display: flex; }
.meteo.comparing .meteo-graph, .meteo.comparing .meteo-strip, .meteo.comparing .meteo-list { display: none; }

/* Meteogram: axis gutter + horizontally scrolling columns (3 h steps) */
.meteo-graph { height: 100%; }
.mg-axis {
    flex: 0 0 72px;
    display: flex;
    flex-direction: column;
    padding: 24px 8px 14px 0;
    font: 600 9px/1 var(--font-ui);
    letter-spacing: .08em;
    color: var(--ink-2);
    text-transform: uppercase;
    text-align: right;
    white-space: nowrap;
}
.mg-axis span { display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0; gap: 4px; }
.mg-axis b { font-weight: 600; }
.mg-axis small { font: 500 9px/1 var(--font-mono); letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
/* Wind band: name + unit, then a key for the bar and the gust line */
.mg-axis .ax-w { flex-direction: column; align-items: flex-end; justify-content: center; gap: 5px; }
.mg-axis .ax-w > span { height: auto; }
.ax-key { display: flex; align-items: center; gap: 4px; font: 500 8.5px/1 var(--font-ui); font-style: normal; letter-spacing: .02em; text-transform: none; color: var(--ink-muted); }
.ax-key i { display: inline-block; width: 8px; }
.ax-key .k-bar { height: 8px; border-radius: 2px 2px 0 0; background: #2596b8; }
.ax-key .k-gust { height: 0; border-top: 2px solid rgba(255, 255, 255, .55); }
.mg-axis .ax-w { height: 104px; } .mg-axis .ax-v { height: 44px; } .mg-axis .ax-r { height: 20px; } .mg-axis .ax-d { height: 18px; }
/* overflow-y hidden + 10 px bottom padding: the scrollbar never covers the DIR row */
.mg-scroll {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) rgba(255, 255, 255, .04);
}
.mg-scroll::-webkit-scrollbar { height: 6px; }
.mg-scroll::-webkit-scrollbar-track { background: rgba(255, 255, 255, .04); }
.mg-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 3px; }
.mg-track { display: flex; min-width: 100%; height: 210px; }
.mg-col {
    flex: 1 0 40px;
    display: flex;
    flex-direction: column;
    padding-top: 6px;
    border-left: 1px solid var(--hair-cell);
    cursor: pointer;
}
.mg-col.day { border-left-color: rgba(255, 255, 255, .18); }
.mg-col.night { background: rgba(4, 10, 18, .28); }
.mg-col:hover { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .035); }
.mg-col.now { box-shadow: inset 0 0 0 999px rgba(0, 153, 255, .12); }
.mg-col.past .mg-b, .mg-col.past .mg-wb, .mg-col.past .mg-rb { filter: saturate(.55) brightness(.8); }
.mg-h { height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; }
.mg-day { font: 600 9px/1 var(--font-ui); letter-spacing: .08em; color: var(--ink-accent); text-transform: uppercase; }
.mg-hr { font: 500 10px/1 var(--font-mono); color: #93a8bc; }
.mg-col.clock .mg-hr { color: var(--ink-1); font-weight: 600; }
.mg-w { position: relative; height: 104px; flex-shrink: 0; }
.mg-g, .mg-b { position: absolute; bottom: 0; left: 50%; width: 16px; margin-left: -8px; }
.mg-g { border-top: 2px solid rgba(255, 255, 255, .55); }
.mg-b { border-radius: 3px 3px 0 0; }
.mg-v {
    position: absolute;
    left: 0; right: 0; bottom: 2px;
    text-align: center;
    font: 600 10px/1 var(--font-mono);
    color: var(--on-cell);
}
.mg-v.out { color: var(--ink-sec); }
.mg-v.lt, .dl-badge.lt { color: var(--ink-1); }
.mg-wv { position: relative; height: 44px; flex-shrink: 0; border-top: 1px solid var(--hair-inner); }
.mg-wb { position: absolute; bottom: 0; left: 50%; width: 22px; margin-left: -11px; opacity: .85; }
.mg-wl { position: absolute; left: 0; right: 0; top: 4px; text-align: center; font: 500 9px/1 var(--font-mono); color: #a8c6dc; }
.mg-r { position: relative; height: 20px; flex-shrink: 0; border-top: 1px solid var(--hair-inner); }
.mg-rb { position: absolute; bottom: 0; left: 50%; width: 8px; margin-left: -4px; background: #4f7fe0; }
.mg-d { height: 18px; flex-shrink: 0; display: grid; place-items: center; color: var(--ink-dir); }
.mg-d .ico { width: 12px; height: 12px; }

/* Hover tooltip: the full parameter set for one step */
.meteo-tip {
    position: fixed;
    z-index: 60;
    min-width: 150px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--glass-strong);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-lg);
    pointer-events: none;
    font: 500 11.5px/1.45 var(--font-mono);
    color: var(--ink-sec);
}
.meteo-tip b { display: block; margin-bottom: 3px; font-weight: 600; color: var(--ink-1); }
.meteo-tip .tt-row { display: flex; justify-content: space-between; gap: 14px; white-space: nowrap; }
.meteo-tip .tt-row span:first-child { font: 600 9.5px/1.9 var(--font-ui); letter-spacing: .1em; color: var(--ink-label); text-transform: uppercase; }

/* Drawer / sheet list: time running down the rows */
.meteo-list { flex-direction: column; height: 100%; }
.dl-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 26px;
    padding: 0 16px;
    background: var(--zebra);
    font: 600 9px/1 var(--font-ui);
    letter-spacing: .12em;
    color: var(--ink-label);
    text-transform: uppercase;
    white-space: nowrap;
}
.dl-rows { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.dl-row {
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 16px;
    border-bottom: 1px solid var(--hair-cell);
    cursor: pointer;
}
.dl-row:hover { background: rgba(255, 255, 255, .04); }
.dl-row.day { background: var(--accent-stripe); }
.dl-row.now { box-shadow: inset 3px 0 0 var(--accent); background: rgba(0, 153, 255, .12); }
.dl-row.past { opacity: .6; }
.dl-t { flex: 0 0 46px; display: flex; align-items: baseline; gap: 3px; font: 500 12px/1 var(--font-mono); color: var(--ink-sec); white-space: nowrap; }
.dl-tag { font: 600 9px/1 var(--font-ui); letter-spacing: .06em; color: var(--ink-accent); }
.dl-w { flex: 0 0 74px; display: flex; align-items: center; gap: 6px; }
.dl-d { flex: 0 0 54px; display: flex; align-items: center; gap: 5px; font: 500 10px/1 var(--font-mono); color: var(--ink-dir); }
.dl-d .ico { width: 13px; height: 13px; }
.dl-v { flex: 0 0 62px; display: flex; align-items: center; gap: 6px; }
.dl-a { flex: 1; text-align: right; font: 500 12px/1 var(--font-mono); color: var(--ink-sec); white-space: nowrap; }
.dl-head .dl-t, .dl-head .dl-d, .dl-head .dl-a { font: inherit; color: inherit; }
.dl-badge {
    min-width: 26px;
    padding: 3px 5px;
    border-radius: 4px;
    text-align: center;
    font: 600 11px/1 var(--font-mono);
    color: var(--on-cell);
}
.dl-v .dl-badge { min-width: 28px; }
.dl-sub { font: 400 10px/1 var(--font-mono); color: var(--ink-faint); white-space: nowrap; }

/* Drawer (700–1099 px) and bottom sheet (< 700 px): one column —
   header (summary + segmented control), column header, rows */
body.layout-drawer .meteo, body.layout-sheet .meteo {
    display: flex;
    flex-direction: column;
    height: auto;
    background: var(--drawer-bg);
    border-top: 0;
}
body.layout-drawer .meteo {
    left: auto;
    top: 0;
    width: var(--drawer-w);
    border-left: 1px solid var(--hair);
}
body.layout-sheet .meteo {
    top: auto;
    height: 55dvh;
    border-top: 1px solid var(--hair);
    border-radius: 12px 12px 0 0;
}
body.layout-drawer .meteo::before, body.layout-sheet .meteo::before { display: none; }
body.layout-drawer .meteo-summary, body.layout-sheet .meteo-summary {
    flex-shrink: 0;
    gap: 10px;
    padding: 14px 16px 0;
    border-right: 0;
}
body.layout-drawer .ms-big, body.layout-sheet .ms-big { font-size: 34px; }
body.layout-drawer .ms-grid, body.layout-sheet .ms-grid { display: none; }
body.layout-drawer .meteo-tabs, body.layout-sheet .meteo-tabs {
    flex-shrink: 0;
    flex-direction: row;
    gap: 5px;
    padding: 12px 16px 12px;
    border-left: 0;
    border-bottom: 1px solid var(--hair-inner);
}
body.layout-drawer .meteo-tabs > *, body.layout-sheet .meteo-tabs > * { flex: 1; }
body.layout-drawer #viewList, body.layout-sheet #viewList { display: block; }
body.layout-drawer #viewTable, body.layout-sheet #viewTable, body.layout-drawer .density-btn, body.layout-sheet .density-btn { display: none; }
body.layout-drawer .export-pop, body.layout-sheet .export-pop { right: 0; bottom: auto; top: calc(100% + 6px); }
body.layout-drawer .meteo-main, body.layout-sheet .meteo-main { flex: 1; }
body.layout-drawer .mg-track, body.layout-sheet .mg-track { height: 210px; }
body.layout-drawer .meteo-graph, body.layout-sheet .meteo-graph { height: auto; padding-top: 8px; }

/* Windy-style detail strip: sticky label rail + day-grouped value columns */
.meteo-strip {
    align-items: stretch;
    height: 100%;
    overflow: auto;
    scrollbar-width: thin;
    padding: 6px 10px 2px 0;
}
.mlabels {
    position: sticky;
    left: 0;
    z-index: 2;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: #0a111b;
    padding-left: 8px;
    padding-right: 8px;
    font: 600 9.5px/1 var(--font-ui);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-2);
    text-align: right;
    white-space: nowrap;
}
/* One line per row label: name + unit side by side, never wrapped */
.mlabels span { height: 26px; display: flex; align-items: center; justify-content: flex-end; gap: 4px; white-space: nowrap; }
.mlabels small { font: 500 9px/1 var(--font-mono); letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
.mlabels .ml-time { height: 18px; }
.mlabels .ml-sky { height: 22px; }
.mlabels .ml-dir { height: 30px; }
.mlabels .ml-dir.wd { color: #7cc9f2; }
.mlabels .ml-dir.vd { color: #4ecfb4; }
.mlabels .ml-pres { height: 22px; }

.mday { flex-shrink: 0; }
.mday + .mday { border-left: 1px solid rgba(255, 255, 255, .14); }
.mday-head {
    font-size: 11px;
    font-weight: 800;
    color: var(--ink-2);
    padding: 2px 0 3px 7px;
    white-space: nowrap;
    position: sticky;
    left: var(--lw, 60px);
}
.mday-cols { display: flex; }

.mcol {
    display: flex;
    flex-direction: column;
    width: 40px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--ink);
    cursor: pointer;
    border-radius: 6px;
    outline-offset: -2px;
}
@media (min-width: 900px) { .mcol { width: 44px; } }
.mcol.day { width: 72px; }
.mcol:hover { background: rgba(255, 255, 255, .09); }
.mcol.now { outline: 2px solid var(--accent); background: rgba(0, 153, 255, .10); }
/* Columns already behind the wall clock fade; the one nearest now is marked */
.mcol.past > span { opacity: .55; }
.mcol.clock .mc-time { color: var(--ink); font-weight: 800; }
.mcol.clock .mc-time::before {
    content: "";
    display: inline-block;
    border: 4px solid transparent;
    border-top: 5px solid var(--accent-2);
    margin-right: 3px;
    vertical-align: 1px;
}

.mcol > span {
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.mc-time { height: 18px !important; font-size: 11px !important; color: var(--ink-2); }
.mc-sky { height: 22px !important; }
.mc-sky .ico { width: 15px; height: 15px; }
.mc-sky .sun { color: #ffcf4d; }
.mc-sky .part { color: #d9c98f; }
.mc-sky .over { color: #9fb0c6; fill: currentColor; }
.mc-sky .over use { fill: currentColor; }
.mc-dir { height: 30px !important; flex-direction: column; gap: 0; line-height: 1; }
.mc-dir.wd { color: #7cc9f2; }     /* wind arrows echo the wind row */
.mc-dir.vd { color: #4ecfb4; }     /* wave arrows echo the wave row */
.mc-dir .ico { width: 14px; height: 14px; }
.mc-cp { font-size: 11px; font-weight: 800; letter-spacing: .2px; }   /* compass point in text, not only in the SVG title */
.mc-wind, .mc-wave, .mc-sm { margin: 1px 1px; border-radius: 4px; }
.mc-sm { height: 20px !important; font-size: 11px !important; color: var(--ink-2); }
.mlabels .ml-sm { height: 20px; }
.mc-pres { height: 22px !important; font-size: 11px !important; color: var(--ink-2); gap: 2px; }
.mc-tend { font-size: 11px; font-weight: 800; color: var(--ink-2); }
/* Daily summary: one wide column per day, the day head is the label */
.meteo-strip.daily .mday-head { position: static; }

/* Model agreement panel (inside the point forecast) */
.compare { height: 100%; overflow: auto; padding: 8px 12px 8px 10px; overscroll-behavior: contain; }
.cmp-lbl { background: #0a111b !important; }
.cmp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 0 2px 5px; }
.cmp-title { font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-2); }
/* Metric tabs (Wind / Gust / Dir / Waves / Pressure): chips like the dock's */
.cmp-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.cmp-tab {
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, .06);
    color: var(--ink-2);
    cursor: pointer;
    line-height: 1.2;
}
.cmp-tab:hover:not(:disabled) { color: #fff; background: var(--glass-hi); }
.cmp-tab.active { background: var(--accent); border-color: transparent; color: #fff; }
.cmp-tab:disabled { opacity: .4; cursor: not-allowed; }
.cmp-legend { margin-left: auto; font-size: 9.5px; color: var(--ink-2); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.cmp-legend .ag { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-left: 6px; }
.ag.hi, .cmp-ag.hi { background: rgba(33, 181, 121, .8); }
.ag.md, .cmp-ag.md { background: rgba(240, 167, 44, .85); }
.ag.lo, .cmp-ag.lo { background: rgba(229, 72, 77, .85); }
.cmp-grid {
    display: grid;
    grid-template-columns: 64px repeat(var(--n), minmax(30px, 1fr));
    gap: 2px 1px;
    overflow-x: auto;
    align-items: center;
}
.cmp-grid > span { font-size: 10px; font-variant-numeric: tabular-nums; text-align: center; height: 20px; display: flex; align-items: center; justify-content: center; }
.cmp-lbl { font-weight: 800; font-size: 9px !important; letter-spacing: .3px; text-transform: uppercase; color: var(--ink-2); justify-content: flex-start !important; padding-right: 6px; position: sticky; left: 0; background: var(--glass-strong); }
.cmp-t { font-size: 10px !important; color: var(--ink); white-space: nowrap; line-height: 1.1; height: 22px !important; }
.cmp-t.day { border-left: 1px solid rgba(255, 255, 255, .16); }
.cmp-t.clock { color: var(--ink); font-weight: 800; box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .55); }
.cmp-note .dock-chip { font-size: 11px; }
.cmp-v { border-radius: 4px; font-weight: 700; }
.cmp-ag { border-radius: 4px; font-weight: 800; color: #fff; }
.cmp-summary { margin-top: 7px; font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.cmp-note { font-size: 11.5px; color: var(--ink-3); padding: 6px 2px; display: flex; align-items: center; gap: 8px; }

.meteo-note {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 12.5px;
    color: var(--ink-3);
    padding: 0 30px;
}
/* "Load / + days 4-7" offer: a small chip in flow under the strip, right-aligned,
   so it never covers a column on a narrow screen */
.meteo-note.more {
    inset: auto 12px 16px auto;
    justify-content: flex-end;
    padding: 0;
    z-index: 4;
}
.meteo-note.more .dock-chip { font-size: 11px; padding: 5px 11px; }
.meteo-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(9, 15, 28, .4);
    border-radius: var(--radius-sm);
}
.meteo-est { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.spin.sm { width: 26px; height: 26px; border-width: 3px; }
.zoombox button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 17px;
    background: var(--chip);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--ink-pill);
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
}
.zoombox button .ico { width: 16px; height: 16px; }
.zoombox #zoomReset .ico { width: 14px; height: 14px; }
.zoombox button:hover { background: var(--chip-hover); color: #fff; }

.explore-pill {
    position: fixed;
    left: 14px;
    top: 74px;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 13px;
    border-radius: 999px;
    cursor: pointer;
    color: var(--ink);
}
.explore-pill:hover { border-color: var(--accent); }
.explore-pill .ico { color: var(--accent); }

/* ==========================================================================
   Shared floating bits
   ========================================================================== */
.banners {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + var(--bar-h) + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 45;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(520px, calc(100vw - 28px));
}
.banner {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.banner-info { background: rgba(6, 42, 78, .9); color: #bfe1ff; border: 1px solid rgba(0, 153, 255, .35); }
.banner-warn { background: rgba(70, 46, 4, .9); color: #ffd98f; border: 1px solid rgba(240, 167, 44, .4); }
.banner-close {
    margin-left: auto;
    background: none;
    border: 0;
    color: inherit;
    opacity: .6;
    cursor: pointer;
    display: flex;
    padding: 3px;
}
.banner-close:hover { opacity: 1; }
.btn-link {
    background: none;
    border: 0;
    color: inherit;
    font-weight: 800;
    text-decoration: underline;
    cursor: pointer;
    font-size: 12.5px;
}

.hover-tip {
    position: fixed;
    pointer-events: none;
    transform: translate(14px, -34px);
    background: var(--glass-strong);
    border: 1px solid var(--glass-border);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 6px 11px;
    border-radius: 9px;
    white-space: nowrap;
    z-index: 35;
    box-shadow: var(--shadow-lg);
}
.hover-tip .tip-ll { display: block; margin-top: 2px; font: 500 10.5px/1.2 var(--font-mono); color: var(--ink-muted); }

.chart-loading {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 25;
    pointer-events: none;
}
.spin {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 4px solid rgba(0, 153, 255, .2);
    border-top-color: var(--accent);
    animation: spin .8s linear infinite;
    filter: drop-shadow(0 2px 8px rgba(2, 8, 20, .5));
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--bottom-h, 56px) + 18px);
    transform: translateX(-50%);
    background: var(--glass-strong);
    border: 1px solid var(--glass-border);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    padding: 11px 20px;
    border-radius: 999px;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 100;
    animation: toast-in .25s ease;
    max-width: calc(100vw - 40px);
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* ---- 1100–1399 px: dock layout, layer pills as icons (rules with the rail) ---- */

/* ---- Drawer (700–1099 px) and sheet (< 700 px) chrome ---- */
body.layout-drawer .param-rail, body.layout-sheet .param-rail { left: 12px; top: calc(env(safe-area-inset-top, 0px) + 68px); margin-left: -2px; }
/* The legend moves left, just right of the icon column, clear of the drawer:
   10 × 150 bar, unit above it, ticks on its right */
body.layout-drawer .legend, body.layout-sheet .legend {
    right: auto;
    left: 60px;
    top: calc(env(safe-area-inset-top, 0px) + 68px);
    flex-direction: row-reverse;
    justify-content: flex-end;
}
body.layout-drawer .legend-ticks, body.layout-sheet .legend-ticks { height: 150px; margin-top: 13px; align-items: flex-start; font-size: 9px; }
body.layout-drawer .legend-col, body.layout-sheet .legend-col { gap: 4px; }
body.layout-drawer .legend-unit, body.layout-sheet .legend-unit { height: 9px; font-size: 9px; }
body.layout-drawer .legend-grad, body.layout-sheet .legend-grad { width: 10px; height: 150px; border-radius: 5px; }
body.layout-drawer .legend-note, body.layout-sheet .legend-note { right: auto; left: 0; }
body.layout-drawer .zoombox { top: calc(env(safe-area-inset-top, 0px) + 68px); }
body.layout-drawer.meteo-open .zoombox { right: calc(var(--drawer-w) + 16px); }

/* Top bar stops short of the drawer; chips shrink to 34 px */
body.layout-drawer.meteo-open .topbar { right: calc(var(--drawer-w) + 12px); }
body.layout-drawer .topbar, body.layout-sheet .topbar { gap: 8px; padding: 0 12px; }
body.layout-drawer .tchip, body.layout-sheet .tchip { height: 34px; border-radius: 17px; }
body.layout-drawer .brand, body.layout-sheet .brand { gap: 8px; padding: 0 12px 0 9px; }
body.layout-drawer .brand-mark, body.layout-sheet .brand-mark { width: 16px; height: 15px; }
body.layout-drawer .brand-logo, body.layout-sheet .brand-logo { height: 18px; }
body.layout-drawer .searchbox, body.layout-sheet .searchbox { width: auto; flex: 1; max-width: 260px; min-width: 120px; gap: 8px; padding: 0 6px 0 12px; }
body.layout-drawer .searchbox input, body.layout-sheet .searchbox input { font-size: 12px; }
body.layout-drawer .locate-btn, body.layout-sheet .locate-btn { width: 24px; height: 24px; }
body.layout-drawer .topbar .clock, body.layout-sheet .topbar .clock { padding: 0 12px; }
body.layout-drawer .cycle-clock, body.layout-sheet .cycle-clock { font-size: 11px; }
body.layout-drawer .cycle-clock .sep, body.layout-drawer .cycle-clock .loc,
body.layout-sheet .cycle-clock .sep, body.layout-sheet .cycle-clock .loc { display: none; }
body.layout-drawer #btnModelInfo, body.layout-sheet #btnModelInfo { display: none; }
body.layout-drawer .round-btn, body.layout-sheet .round-btn { width: 34px; }
body.layout-drawer .scope-sub, body.layout-sheet .scope-sub { display: none; }
body.layout-drawer .topbar-spacer, body.layout-sheet .topbar-spacer { flex: 1 1 0; }
@media (max-width: 900px) {
    body.layout-drawer.meteo-open .brand-logo { display: none; }
    body.layout-drawer.meteo-open .brand-mark { display: block; }
    body.layout-drawer.meteo-open .topbar .clock { display: none; }
}
body.layout-drawer.meteo-open .banners { left: calc((100vw - var(--drawer-w)) / 2); width: min(520px, calc(100vw - var(--drawer-w) - 28px)); }

/* Timebar: play only; right cluster reduces to the active model and UTC */
body.layout-drawer .dock, body.layout-sheet .dock { gap: 12px; padding-left: 14px; padding-right: 14px; }
body.layout-drawer .dock-btn.step, body.layout-sheet .dock-btn.step,
body.layout-drawer .jump-chips, body.layout-sheet .jump-chips,
body.layout-drawer #btnUnits, body.layout-sheet #btnUnits,
body.layout-drawer .tb-div, body.layout-sheet .tb-div { display: none; }
body.layout-drawer .tl-wrap, body.layout-sheet .tl-wrap { height: 36px; }
body.layout-drawer .tl-days span, body.layout-sheet .tl-days span { font-size: 9px; letter-spacing: .09em; padding: 4px 0 0 7px; }
body.layout-drawer .tl-chip, body.layout-sheet .tl-chip { top: -5px; padding: 3px 6px; }
/* Model picker: the active chip opens the list above the timebar (drawer,
   sheet, and dock windows under 1400 px where the chips would starve the track) */
@media (max-width: 1399px) {
    .jump-chips { display: none; }
    body.layout-dock .model-cur { display: inline-flex; background: var(--accent); color: var(--on-accent); }
    body.layout-dock .model-switch { display: none; }
    body.layout-dock .model-switch.expanded {
        display: flex; position: absolute; right: 14px; bottom: calc(100% + 8px);
        flex-direction: column; align-items: stretch; gap: 4px;
        max-height: calc(100dvh - var(--bar-h) - 120px); overflow-y: auto; padding: 6px;
        background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 10px;
        box-shadow: var(--shadow-lg); z-index: 5;
    }
}
body.layout-sheet .tl-ticks, body.layout-sheet .storm-chip { display: none !important; }
.model-cur {
    display: none;
    align-items: center;
    gap: 5px;
    border: 0;
    border-radius: 6px;
    padding: 7px 10px;
    font: 600 11px/1 var(--font-ui);
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
}
.model-cur:hover { filter: brightness(1.12); }
.model-cur .ico { width: 10px; height: 10px; transition: transform var(--ease); }
.model-cur[aria-expanded="true"] .ico { transform: rotate(180deg); }
body.layout-drawer .model-cur, body.layout-sheet .model-cur { display: inline-flex; background: rgba(0, 153, 255, .9); color: var(--on-accent); }
body.layout-drawer .model-switch, body.layout-sheet .model-switch { display: none; }
body.layout-drawer .model-switch.expanded, body.layout-sheet .model-switch.expanded {
    display: flex;
    position: absolute;
    right: 14px;
    bottom: calc(100% + 8px);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    max-height: calc(100dvh - var(--bar-h) - 120px);
    overflow-y: auto;
    padding: 6px;
    background: var(--glass-strong);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    z-index: 5;
}

/* ---- Phones (< 700 px) ---- */
body.layout-sheet .zoombox { display: none; }                 /* touch: pinch to zoom */
@media (pointer: coarse) and (max-width: 1099px) { .zoombox { display: none; } }
body.layout-sheet .param-rail, body.layout-sheet .legend { top: calc(env(safe-area-inset-top, 0px) + 64px + var(--banner-h, 0px)); }
body.layout-sheet .param-rail { max-height: calc(100dvh - 64px - var(--banner-h, 0px) - var(--bottom-h, 56px) - 12px); }
body.layout-sheet .banners { top: calc(env(safe-area-inset-top, 0px) + var(--bar-h) + 2px); }
/* On the pristine landing the hero and basin strip own the bottom third */
body.layout-sheet:not(.chrome) .param-rail { max-height: calc(100dvh - 64px - var(--banner-h, 0px) - 360px); }
body.layout-sheet .brand-logo { display: none; }
body.layout-sheet .brand-mark { display: block; }
body.layout-sheet .brand { padding: 0; width: 34px; justify-content: center; }
/* With the sheet up the one-time safety notice would leave the list one
   row tall: fold it while the panel is open; stale / offline warnings stay */
body.layout-sheet.meteo-open #bannerSafety { display: none; }
@media (max-width: 900px) {
    .hero { left: 18px; right: 18px; bottom: 110px; }
    .hero h1 { font-size: 28px; }
    .hero p { display: none; }
    .hero-meta { display: none; }
    .hero-hint { font-size: 14px; gap: 4px 14px; }
}
@media (min-width: 700px) {
    /* The hero shares the left edge with the landing's icon column */
    .hero { left: max(72px, clamp(18px, 5vw, 72px)); }
}

/* Touch: controls reach 40 px, chips 36 px; the timebar stays 56 px */
@media (pointer: coarse) {
    .icon-btn, .icon-btn.sm { min-width: 40px; min-height: 40px; }
    .tchip, body.layout-drawer .tchip, body.layout-sheet .tchip { height: 40px; border-radius: 20px; }
    .scope-pill .icon-btn { width: 40px; height: 40px; }
    .scope-pill { padding-left: 0; }
    .searchbox, body.layout-drawer .searchbox, body.layout-sheet .searchbox { padding-right: 0; }
    body.layout-sheet .brand { width: 40px; }
    body.layout-sheet .searchbox { width: 40px; flex-basis: 40px; }
    .mini-btn { width: 40px; height: 40px; border-radius: 20px; }
    .mini-btn .ico { width: 14px; height: 14px; }
    .ms-head { align-items: center; }
    .dock-btn.play { width: 40px; height: 40px; }
    .dock-btn.step { width: 40px; height: 40px; }
    .view-tab { min-height: 40px; }
    .round-btn, body.layout-drawer .round-btn, body.layout-sheet .round-btn { width: 40px; height: 40px; border-radius: 20px; }
    .locate-btn, body.layout-drawer .locate-btn, body.layout-sheet .locate-btn { width: 40px; height: 40px; }
    .jump-chip, .model-btn, .dock-chip { min-height: 36px; }
    .model-cur, body.layout-drawer .model-cur, body.layout-sheet .model-cur { min-height: 40px; }
    .param-btn, .pill-disclosure { min-height: 36px; }
    .switch { min-height: 44px; }
    .mcol { width: 44px; }
    .text-btn { min-height: 36px; }
    .basin-chip { min-height: 44px; }
    .zoombox button { width: 40px; height: 40px; border-radius: 20px; }
    .search-item { min-height: 44px; }
    .dl-row { height: 40px; }
    /* Banner dismiss (15 px icon, 21 px box) and links, compare metric tabs,
       watch-board spot links: 32 px hit boxes without growing the banner */
    .banner-close { padding: 8px; margin: -5px -5px -5px auto; }
    .btn-link { min-height: 32px; display: inline-flex; align-items: center; }
    .cmp-tab { min-height: 32px; }
    .wl-open { min-height: 32px; }
}

@media (max-width: 560px) {
    /* Top bar: mark-only brand, ellipsised scope, search collapsed to its icon */
    .scope-pill { min-width: 0; flex: 1 1 auto; }
    .scope-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body.layout-sheet .searchbox { width: 34px; flex: 0 0 34px; min-width: 0; padding: 0; justify-content: center; cursor: pointer; }
    .searchbox > .ico { pointer-events: none; }
    .searchbox input, .searchbox .locate-btn { display: none; }
    body.search-open.layout-sheet .searchbox { position: absolute; left: 12px; right: 12px; top: 11px; width: auto; max-width: none; flex: none; padding: 0 6px 0 12px; justify-content: flex-start; z-index: 2; }
    body.search-open .searchbox input { display: block; }
    body.search-open .searchbox .locate-btn { display: grid; }
    body.search-open .search-results { left: 0; right: 0; min-width: 0; }
    .topbar .clock { display: none; }
    .lbl-long { display: none; }
    /* Compact table rows */
    .mcol > span, .mlabels span { height: 24px; }
    .mc-dir, .mlabels .ml-dir { height: 26px !important; }
    .zone-pill { font-size: 11.5px; padding: 6px 11px; }
}

/* Motion: honour the OS setting (the hint icons bob, panels slide, spinners spin) */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Print — white page, lineage header, legend and full point table
   ========================================================================== */
.print-only { display: none; }
@media print {
    .topbar, .dock, .param-rail, .zoombox, .banners, .toast, .landing, .explore-pill,
    .hover-tip, .chart-loading, .web-credit, .mini-btn, .meteo-tabs, .meteo-graph, .meteo-list, .meteo-tip,
    .cmp-head .text-btn, .cmp-tab:not(.active), .model-info,
    .meteo-loading, .meteo-note, .ov-pop, #bannerSafety { display: none !important; }
    .meteo-summary { display: block; padding: 8px 12px 4px; border: 0; }
    .ms-headline, .ms-grid { display: none; }
    .meteo-sub { color: #3d4a63; }
    .meteo::before { display: none; }
    .meteo-main, .meteo-body { display: block; }
    .meteo .meteo-strip { display: flex !important; height: auto; padding: 0; }
    .compare { height: auto; overflow: visible; }
    /* The active metric prints as plain text (the title alone shows a unit) */
    .cmp-tab.active { all: unset; font: inherit; font-size: 10px; font-weight: 800; text-transform: uppercase; color: #3d4a63; }
    .print-only { display: block !important; }
    html, body, body.app-body { height: auto; overflow: visible; background: #fff; color: #22304a; }
    #printHeader {
        padding: 10px 12px 8px;
        font-size: 11px;
        line-height: 1.5;
        border-bottom: 1px solid #cfd9e6;
        break-inside: avoid;
    }
    #printHeader .ph-row { display: flex; gap: 10px; }
    #printHeader .ph-row b { flex: 0 0 72px; color: #003399; }
    #printHeader .ph-row span { overflow-wrap: anywhere; }
    .stage { position: relative; height: 60vh; inset: auto; break-inside: avoid; }
    .legend {
        position: static;
        display: flex;
        margin: 6px 12px;
        color: #22304a;
    }
    .legend-unit, .legend-ticks, .legend-note { color: #5a6787; text-shadow: none; }
    .legend-note { position: static; margin-left: 10px; }
    .legend-grad, .mcol > span, .cmp-v, .cmp-ag, .ag { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .meteo, body.layout-drawer .meteo, body.layout-sheet .meteo {
        position: static;
        display: block;
        transform: none;
        width: 100%;
        height: auto;
        max-height: none;
        break-inside: avoid;
        background: #fff;
        border-color: #cfd9e6;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        color: #22304a;
        animation: none;
    }
    .meteo-coords, .mcol, .cmp-summary { color: #22304a; }
    .meteo-sub, .mlabels, .mday-head, .mc-time, .mc-sm, .mc-pres, .mc-tend, .cmp-lbl, .cmp-t, .cmp-note { color: #3d4a63; }
    .mlabels, .mday-head, .cmp-lbl { background: #fff; position: static; }
    .mday + .mday { border-left-color: #cfd9e6; }
    .meteo-strip { overflow: visible; flex-wrap: wrap; }
    .meteo-strip .mday { display: block; }
    .mday-cols { flex-wrap: wrap; }
    .mcol.past > span { opacity: 1; }
    .mcol.now { outline-color: #003399; }
    /* Up to 31 valid-time columns on an A4 portrait page: no 30 px column
       floor, smaller numerals, so the last forecast days are not cut off */
    .cmp-grid { overflow: visible; grid-template-columns: 64px repeat(var(--n), minmax(0, 1fr)); }
    .cmp-grid > span { font-size: 7.5px; }
    .cmp-t { font-size: 7px !important; }
    .cmp-t.clock { color: #22304a; box-shadow: inset 0 -2px 0 rgba(0, 51, 153, .6); }
    .point-marker { display: none !important; }   /* screen-positioned; the snapshot draws the pin instead */
    .fav-pins, .fav-row { display: none !important; }
    /* Watch list: the board is the page */
    .watch { display: none; }
    body.watch-open > :not(#watchPanel) { display: none !important; }
    body.watch-open .watch { display: block; position: static; background: #fff; color: #22304a; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; }
    body.watch-open .watch-head .text-btn, body.watch-open .watch-head .icon-btn, body.watch-open .watch-notify { display: none !important; }
    body.watch-open .watch-body { overflow: visible; }
    body.watch-open .wl-scroll { overflow: visible; }
    body.watch-open .wl-table { min-width: 0; color: #22304a; }
    body.watch-open .wl-table th, body.watch-open .watch-sub, body.watch-open .watch-foot, body.watch-open .watch-legend, body.watch-open .wl-open, body.watch-open .wl-in-group { color: #3d4a63; }
    body.watch-open .wl-table td, body.watch-open .wl-in { background: #fff; color: #22304a; }
    body.watch-open .wl-row.wl-red td { background: #fde8e9; }
    body.watch-open .wl-row.wl-amber td { background: #fff3dc; }
    body.watch-open .wl-row.wl-green td { background: #e6f6ee; }
    body.watch-open .wl-first b { color: #a3282c; }
    body.watch-open .wl-act, body.watch-open .wl-edit { display: none !important; }
    body.watch-open .wl-v, body.watch-open .wl-badge { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    body.watch-open .wl-badge { color: #fff; }
}

/* ==========================================================================
   Standalone document pages (privacy / terms / status) — light theme
   ========================================================================== */
.doc-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 36px 22px 60px;
}
.doc-page h1 { color: var(--navy); font-size: 26px; margin: 8px 0 4px; }
.doc-page h2 { color: var(--navy); font-size: 17px; margin: 28px 0 8px; }
.doc-page p, .doc-page li { color: var(--text-2); font-size: 14.5px; line-height: 1.7; }
.doc-page .doc-updated { color: var(--text-3); font-size: 12.5px; }
.doc-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--slate);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 14px;
}
.doc-back:hover { color: var(--navy); }
.doc-note {
    background: var(--warn-bg);
    color: var(--warn-fg);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 13.5px;
    line-height: 1.6;
}