/* ==========================================================================
   Tropics section — interactive map page.
   Uses the site-wide theme variables from assets/css/style.css.
   ========================================================================== */

/* App-style page (this stylesheet only loads on the tropics map page):
   the map is position: fixed below the two headers, so in-flow content is
   just 94px tall — the document can never scroll, and iOS Safari's
   toolbar shenanigans can't displace anything. */
html, body {
    overflow: hidden;
    overscroll-behavior: none;
}

/* Page-scoped override: make the shared site header fixed too (same iOS
   pinch-zoom fix as .section-bar). Only applies here — this stylesheet loads
   only on the tropics page, and after the site stylesheet, so it wins. Safe
   because the app content sits at a fixed 94px offset; other pages keep the
   header sticky (they rely on it being in normal flow). */
.site-header { position: fixed; left: 0; right: 0; top: 0; }

/* Section bar between the site header and the map. Fixed (like .tropics-app)
   rather than sticky: on iOS, pinch-zooming then zooming out leaves
   position:sticky elements displaced above the viewport, while position:fixed
   ones (the map/app) reset correctly. */
.section-bar {
    position: fixed;
    top: 54px;
    left: 0;
    right: 0;
    z-index: 99; /* just under the site header's 100 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 1.25rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}
[data-theme="light"] .section-bar { background: var(--accent-soft); }
.section-bar-left { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }

/* Section switch: segmented pill (wide) / dropdown (narrow) */
.seg-toggle {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: inset 0 1px 2px rgba(16, 34, 56, 0.05);
}
.seg-toggle button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.3rem 0.75rem;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}
.seg-toggle button svg { width: 15px; height: 15px; flex: 0 0 auto; }
.seg-toggle button:hover:not(.active) { color: var(--text); }
.seg-toggle button.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 1px 4px rgba(16, 34, 56, 0.2);
}
.seg-select {
    display: none;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.28rem 1.6rem 0.28rem 0.6rem;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6b7d' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
}
/* Wide viewports: the segmented toggle already names the active section,
   so the heading text beside it is redundant. */
@media (min-width: 721px) {
    #section-title { display: none; }
}
@media (max-width: 720px) {
    .seg-toggle { display: none; }
    .seg-select { display: block; }
    .section-bar h1 { display: none; } /* the dropdown carries the section */
}
#recon-live[hidden] { display: none; }
#recon-live-list { display: flex; flex-direction: column; gap: 0.4rem; }
/* Recon-section boxes: text column on the left, badges stacked right */
.recon-mission.rm-live-box { flex-direction: row; align-items: flex-start; gap: 0.5rem; }
.recon-mission.rm-live-box .rm-main { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.recon-mission.rm-live-box .rm-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0.3rem;
    flex: 0 0 auto;
}
.rm-storm { font-weight: 700; font-size: 0.86rem; }
.rm-status {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.08rem 0.4rem;
    border-radius: 5px;
    white-space: nowrap;
}
.rm-st-enroute { color: #b9670a; background: rgba(224,138,30,0.16); }
.rm-st-storm { color: #1f7a33; background: rgba(46,160,67,0.16); }
.rm-st-finished { color: #b3241f; background: rgba(209,51,46,0.15); }
.rm-st-upperair { color: #7c3aed; background: rgba(124,58,237,0.15); }
.rm-st-inflight { color: #1a68c4; background: rgba(26,104,196,0.15); }
.rm-tdr {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.1rem 0.42rem;
    border-radius: 5px;
    white-space: nowrap;
    color: var(--text);
    background: rgba(120,134,150,0.2);
}
.rm-tdr svg { width: 12px; height: 12px; flex: 0 0 auto; }
[data-theme="dark"] .rm-tdr { background: rgba(159,176,196,0.18); }
[data-theme="dark"] .rm-st-enroute { color: #f0a44e; }
[data-theme="dark"] .rm-st-storm { color: #63d67d; }
[data-theme="dark"] .rm-st-finished { color: #ff8f8a; }
[data-theme="dark"] .rm-st-upperair { color: #c4a2ff; }
[data-theme="dark"] .rm-st-inflight { color: #74b3fb; }

.section-bar h1 {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
/* Icon-button width (the horizontal room around the glyph) eases from 34px at
   >=600px viewports down to 30px at <=400px. */
.section-bar .icon-btn { width: clamp(30px, 2vw + 22px, 34px); height: 34px; }
/* .icon-btn sets display:flex, which overrides the [hidden] attribute. */
.section-bar .icon-btn[hidden] { display: none; }
.section-bar .icon-btn svg { width: 18px; height: 18px; }
/* Between-button margin shrinks linearly from 0.25rem at 700px to 0 at 500px. */
.section-bar .section-actions {
    display: flex;
    align-items: center;
    gap: clamp(0px, 2vw - 10px, 0.25rem);
}
.section-bar .icon-btn.text-btn {
    width: auto;
    /* left/right padding eases from 0.6rem at >=600px to 0.45rem at <=400px */
    padding: 0 clamp(0.45rem, 1.2vw + 2.4px, 0.6rem);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}
/* the bar's light-mode background IS --accent-soft, so the default
   icon-btn hover was invisible here */
.section-bar .icon-btn:hover { background: var(--accent); color: #fff; }
.section-bar .icon-btn.active { background: var(--accent); color: #fff; }

/* Instant tooltips for the section-action buttons (no native-title delay) */
.section-actions button[data-tip] { position: relative; }
.section-actions button[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 0.32rem 0.55rem;
    font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    z-index: 200;
    transition: opacity 0.05s ease;
}
.section-actions button[data-tip]:focus-visible::after { opacity: 1; }
/* only on devices with a real hover (not touch, where it sticks after a tap) */
@media (hover: hover) {
    .section-actions button[data-tip]:hover::after { opacity: 1; }
}

/* --- Edge colorbars ----------------------------------------------------------------
   Full-height strips on the right edge (desktop) / full-width strips at
   the bottom (mobile). Gradient direction + tick positioning swap per
   orientation via custom properties. --bars-w shifts the map controls
   left while any bar is visible. */

.tropics-app { --bars-w: 0px; }

.edge-bars {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 11;
    display: flex;
    flex-direction: row-reverse;
    gap: 0;
    pointer-events: none;
}
.edge-bar {
    pointer-events: auto;
    width: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.3rem;
    background: var(--bg-card);
    border: none;
    border-left: 1px solid var(--border);
}
.edge-bar .op-circle {
    flex: none;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--accent);
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--text);
    font: inherit;
    font-size: 0.66rem;
    font-weight: 700;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.edge-bar .op-circle:hover { background: var(--accent-soft); }
.edge-bar .iso-chip {
    flex: none;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--text-muted);
    font: inherit;
    font-size: 0.62rem;
    font-weight: 700;
    cursor: pointer;
}
.edge-bar .iso-chip.active { border-color: var(--accent); color: var(--accent); }
.edge-bar .bar-wrap {
    flex: 1;
    position: relative;
    align-self: stretch;
    min-height: 60px;
}
.edge-bar .bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 4px;
    width: 14px;
    border: 1px solid var(--border);
    border-radius: 7px;
    /* --grad holds the stop list; direction flips per orientation */
    background: linear-gradient(to top, var(--grad));
}
.edge-bar .bar-tick {
    position: absolute;
    left: 22px;
    bottom: var(--p);
    transform: translateY(50%);
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.05;
    text-align: center;
    color: var(--text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.edge-bar .bar-title {
    flex: none;
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--text-muted);
}

.op-pop {
    position: absolute;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.6rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
}
.op-pop[hidden] { display: none; }
.op-pop-label { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; }
.op-pop input[type="range"] { width: 110px; min-width: 0; accent-color: var(--accent); }

/* Map right-click context menu */
.ctx-menu {
    position: fixed;
    z-index: 10000;
    min-width: 168px;
    padding: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
}
.ctx-menu[hidden] { display: none; }
.ctx-item {
    display: block;
    width: 100%;
    padding: 0.4rem 0.7rem;
    text-align: left;
    border: none;
    border-radius: 5px;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}
.ctx-item:hover { background: var(--accent-soft); }
.ctx-item[hidden] { display: none; }

/* Save Forecast GIF modal */
#gif-modal .modal { max-width: 460px; }
#gif-modal .field-label { display: block; margin-bottom: 0.5rem; }
#gif-modal .dual-range { margin-bottom: 0.35rem; }
.gif-speed-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin: 1rem 0 0.4rem;
    font-size: 0.88rem;
}
.gif-speed-row input[type="number"] {
    width: 92px;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
}
.gif-progress { display: flex; align-items: center; gap: 0.6rem; margin: 0.6rem 0 0.2rem; }
.gif-progress[hidden] { display: none; }
.gif-progress-track {
    flex: 1;
    height: 7px;
    border-radius: 4px;
    background: var(--border);
    overflow: hidden;
}
.gif-progress-bar { height: 100%; width: 0; background: var(--accent); transition: width 0.15s; }
.gif-progress-text { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; }

@media (max-width: 720px) {
    .edge-bars {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        flex-direction: column-reverse;
    }
    .tropics-app { --bars-w: 0px !important; } /* controls stay put */
    .edge-bar {
        width: auto;
        flex-direction: row-reverse;
        gap: 0.5rem;
        padding: 0.3rem 0.5rem;
        height: 46px;
        border: none;
        border-top: 1px solid var(--border);
    }
    .edge-bar .bar-wrap { min-height: 0; align-self: stretch; }
    .edge-bar .bar {
        top: auto;
        left: 0;
        right: 0;
        bottom: 4px;
        width: auto;
        height: 12px;
        background: linear-gradient(to right, var(--grad));
    }
    .edge-bar .bar-tick {
        left: var(--p);
        bottom: 18px;
        transform: translateX(-50%);
    }
    .edge-bar .op-circle { width: 34px; height: 34px; }
}

/* --- Map loading pill -------------------------------------------------------------- */

.map-loading {
    position: absolute;
    left: 50%;
    bottom: 0.9rem;
    transform: translateX(-50%);
    z-index: 12;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: var(--shadow);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.map-loading[hidden] { display: none; }
.map-loading-spin {
    width: 12px;
    height: 12px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: map-loading-rot 0.8s linear infinite;
}
@keyframes map-loading-rot { to { transform: rotate(360deg); } }

/* --- Drawing toolbar --------------------------------------------------------------- */

.draw-toolbar {
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    max-width: calc(100vw - 1rem);
    flex-wrap: wrap;
    justify-content: center;
    padding: 0.3rem 0.45rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
}
.draw-toolbar[hidden] { display: none; }
.draw-toolbar button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.draw-toolbar button svg { width: 16px; height: 16px; }
.draw-toolbar button:hover { background: var(--accent-soft); color: var(--text); }
.draw-toolbar button.active { background: var(--accent); color: #fff; }
.draw-toolbar .draw-sep { width: 1px; height: 20px; background: var(--border); }
.draw-toolbar input[type="color"] {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}
.draw-toolbar select {
    padding: 0.2rem 0.3rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text);
    font: inherit;
    font-size: 0.78rem;
}
.draw-toolbar input[type="range"] {
    width: 70px;
    min-width: 0;
    accent-color: var(--accent);
}
.draw-op-val {
    font-size: 0.72rem;
    color: var(--text-muted);
    min-width: 2.4em;
    font-variant-numeric: tabular-nums;
}

/* drawing cursor + floating label input */
.tropics-app.drawing #map canvas { cursor: crosshair; }
.draw-text-input {
    position: absolute;
    z-index: 13;
    width: 160px;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text);
    font: inherit;
    font-size: 0.88rem;
    box-shadow: var(--shadow);
}
.draw-text-input[hidden] { display: none; }

.tropics-app {
    position: fixed;
    top: calc(54px + 40px); /* site header + section bar */
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

#map {
    position: absolute;
    inset: 0;
    background: var(--bg);
}

/* --- Floating panel -------------------------------------------------------- */

.map-panel {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 10;
    width: 315px;
    max-height: calc(100% - 2rem);
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.panel-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}
/* Title + collapse share one row; the back link sits on its own row above. */
.panel-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.panel-head h2 { font-size: 1rem; letter-spacing: -0.01em; }

.panel-collapse {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.panel-collapse:hover { background: var(--accent-soft); color: var(--text); }

.map-panel.collapsed .panel-body { display: none; }

.panel-head-actions { display: flex; align-items: center; gap: 0.15rem; }
.panel-head-actions svg { width: 15px; height: 15px; }

/* "Back to all storms/missions/seasons" up-navigation link above the title. */
.panel-back {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    align-self: flex-start;
    border: none;
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.1;
    padding: 0.15rem 0.4rem;
    margin-left: -0.4rem; /* pad the hover chip without shifting the text */
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease;
}
.panel-back:hover { background: var(--accent-soft); }
.panel-back-arrow { font-size: 1.1rem; line-height: 1; margin-top: -1px; }
.panel-back[hidden] { display: none; }
.panel-head-row h2 { flex: 1; }

.panel-body {
    overflow-y: auto;
    padding: 0.75rem 1rem 1rem;
}

.panel-loading {
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 0.5rem 0;
}

.panel-error { color: #d64545; font-size: 0.9rem; padding: 0.5rem 0; }

/* --- System list (overview) ------------------------------------------------ */

.sys-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    color: var(--text);
    font: inherit;
    transition: background 0.12s ease;
}
.sys-card:hover { background: var(--accent-soft); }

.sys-dot {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.45);
}

.sys-card .sys-name { font-weight: 600; font-size: 0.95rem; display: block; line-height: 1.3; }
.sys-card .sys-meta { color: var(--text-muted); font-size: 0.8rem; display: block; line-height: 1.3; }

/* --- Archive section ------------------------------------------------------- */
/* The basin toggle lives inside the panel, so it must stay visible even where
   the top-bar seg-toggle is hidden (narrow viewports). id+class outranks the
   narrow `.seg-toggle { display:none }`. */
#archive-panel .arch-basins:not([hidden]) {
    display: flex; flex-wrap: wrap; margin-bottom: 0.6rem; /* wraps for 5 basins */
}
/* [hidden] must win over the base `.seg-toggle { display:inline-flex }`, or the
   toggle stays visible (and inert) after a season is picked. */
#archive-panel .arch-basins[hidden] { display: none; }
#archive-panel .arch-basins button { font-size: 0.82rem; }
/* Browse / Search mode toggle: same in-panel visibility rules as the basins. */
#archive-panel .arch-mode-toggle:not([hidden]) {
    display: flex; margin-bottom: 0.6rem;
}
#archive-panel .arch-mode-toggle[hidden] { display: none; }
#archive-panel .arch-mode-toggle button { flex: 1; font-size: 0.82rem; }
/* Search & explore filter form */
.as-filters { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.6rem; }
.as-field { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.82rem; }
.as-field > span { font-weight: 600; color: var(--text-muted); }
.as-field input, .as-field select { width: 100%; }
.as-pair { display: flex; gap: 0.4rem; }
.as-pair input { flex: 1; min-width: 0; }
.as-render { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; }
#archive-panel .as-mode-toggle:not([hidden]) { display: flex; }
#archive-panel .as-mode-toggle button { flex: 1; font-size: 0.82rem; }
.as-segfilters {
    display: flex; flex-direction: column; gap: 0.5rem;
    padding-top: 0.5rem; margin-bottom: 0.5rem;
    border-top: 1px solid var(--border);
}
.as-seghdr { font-size: 0.82rem; font-weight: 700; color: var(--text); }
.as-spatial {
    display: flex; flex-direction: column; gap: 0.4rem;
    padding-top: 0.5rem; margin-bottom: 0.5rem;
    border-top: 1px solid var(--border);
}
.as-spatial-btns { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.as-btn {
    flex: 1; min-width: 64px; padding: 0.3rem 0.4rem;
    font-size: 0.8rem; border: 1px solid var(--border);
    background: var(--bg-card); color: var(--text);
    border-radius: 6px; cursor: pointer;
}
.as-btn:hover { border-color: var(--text-muted); }
.as-btn.active { background: var(--text); color: var(--bg-card); border-color: var(--text); }
.as-draw-hint { font-size: 0.78rem; color: var(--text-muted); min-height: 1em; }
.as-count { font-size: 0.84rem; font-weight: 600; color: var(--text); margin: 0.2rem 0 0; }
/* Season catalog as a compact table (header row + clickable rows). */
.arch-season-grid { display: flex; flex-direction: column; }
.arch-season-hdr,
.arch-season-row {
    display: grid;
    grid-template-columns: 1.25fr 0.9fr 0.9fr 0.9fr 1fr;
    gap: 0.25rem;
    align-items: center;
    padding: 0.4rem 0.55rem;
}
.arch-season-hdr {
    position: sticky;
    /* Cancel .panel-body's 0.75rem top padding so the header pins flush to the
     * panel top instead of 0.75rem below it when the list is scrolled. */
    top: -0.75rem;
    z-index: 1;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}
.arch-season-row {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font: inherit;
    font-size: 0.86rem;
    cursor: pointer;
    transition: background 0.12s ease;
}
.arch-season-row:hover { background: var(--accent-soft); }
.arch-season-row .arch-yr { font-weight: 700; }
.arch-season-hdr span:not(:first-child),
.arch-season-row span:not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.arch-season-hdr .arch-col { cursor: pointer; white-space: nowrap; }
.arch-season-hdr .arch-col:hover { color: var(--text); }
.arch-season-hdr .arch-col.active { color: var(--accent); }
/* Season summary box above the storm list. */
.arch-season-box {
    background: #eef1f5;
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    margin-bottom: 0.5rem;
    text-align: center;
}
[data-theme="dark"] .arch-season-box { background: #2a3444; }
.arch-season-title { font-weight: 700; font-size: 1.15rem; color: var(--text); }
.arch-season-stats {
    margin-top: 0.2rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.arch-season-ace {
    margin-top: 0.12rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}
/* id+class keeps this panel toggle visible where the narrow-viewport rule
   hides the top-bar seg-toggle (`.seg-toggle { display:none }`). */
#archive-panel .arch-view-toggle { display: inline-flex; margin-bottom: 0.6rem; }
.arch-fc-hint { margin-bottom: 0.6rem; }

/* Season timeline: the scrubber lives in the shared bottom loop bar; the panel
 * carries a hint plus a card per active storm (reusing .sys-card). */
.arch-tl-note { color: var(--text-muted); font-size: 0.85rem; margin: 0 0 0.5rem; }
/* Reanalysis vs. operational display: a vertical two-option segmented control
   (labels are long enough to want their own rows). */
.arch-tl-mode {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 3px;
    margin-bottom: 0.7rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: inset 0 1px 2px rgba(16, 34, 56, 0.05);
}
.arch-tl-mode button {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    text-align: left;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
    padding: 0.45rem 0.6rem;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}
.arch-tl-mode button small { font-size: 0.72rem; font-weight: 600; opacity: 0.8; }
.arch-tl-mode button:hover:not(.active) { color: var(--text); }
.arch-tl-mode button.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 1px 4px rgba(16, 34, 56, 0.2);
}
.arch-tl-cone-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    cursor: pointer;
    margin-bottom: 0.6rem;
}
.arch-tl-cone-row input { cursor: pointer; }
.arch-sst-inspect {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: -0.2rem 0 0.6rem 1.5rem; /* indented under the SST checkbox */
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.arch-sst-inspect svg { width: 15px; height: 15px; flex: 0 0 auto; }
.arch-sst-inspect:hover { color: var(--text); border-color: var(--accent); }
.arch-sst-inspect.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.arch-sst-inspect[hidden] { display: none; }
.arch-tl-active { display: flex; flex-direction: column; gap: 0.15rem; min-height: 1.1em; }

/* Storm catalog within a season: two rows per storm (name over the stat
 * columns), the category badge spanning both to their left. */
.arch-storm-grid { display: flex; flex-direction: column; }
.arch-storm-hdr {
    display: grid;
    grid-template-columns: 22px repeat(4, 1fr);
    column-gap: 0.4rem;
    align-items: center;
    padding: 0.3rem 0.5rem;
    position: sticky;
    /* Cancel .panel-body's 0.75rem top padding (see .arch-season-hdr). */
    top: -0.75rem;
    z-index: 1;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}
.arch-storm-hdr > span { text-align: left; }
.arch-storm-row {
    display: grid;
    grid-template-columns: 22px repeat(4, 1fr);
    column-gap: 0.4rem;
    row-gap: 0.1rem;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    padding: 0.4rem 0.5rem;
    transition: background 0.12s ease;
}
.arch-storm-row:hover { background: var(--accent-soft); }
.arch-cat-badge {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1;
    border: 1.5px solid rgba(0, 0, 0, 0.28);
}
.arch-storm-nm {
    grid-column: 2 / -1;
    grid-row: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: 0.9rem;
}
.arch-storm-row > .arch-v {
    grid-row: 2;
    text-align: left;
    white-space: nowrap;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.arch-season-head {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--accent);
    padding: 0.2rem 0.1rem 0.5rem;
}

.list-group-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 0.55rem 0 0.15rem 0.25rem;
}
.list-group-label:first-child { margin-top: 0; }

/* --- Detail view ------------------------------------------------------------- */

.back-btn {
    background: transparent;
    border: none;
    color: var(--accent);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0 0 0.6rem;
}
.back-btn:hover { color: var(--accent-hover); }

.detail-head {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.8rem;
}

.detail-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin-bottom: 0.15rem;
}
.detail-title h3 { font-size: calc(1.15rem + 1px); letter-spacing: -0.01em; }

.detail-sub { color: var(--text-muted); font-size: calc(0.82rem + 2px); text-align: center; }

.risk-badge {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    vertical-align: 1px;
}

.stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 0.75rem;
    margin-bottom: 0.4rem;
}

.stat .stat-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.stat .stat-value { font-size: 0.95rem; font-weight: 600; }

.formation-box {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.55rem 0.7rem;
    margin: 0.55rem 0 0.2rem;
}
.formation-box .stat-grid { margin-bottom: 0; }

.risk-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}
.risk-row-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.no-forecast-note {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-style: italic;
    margin: 0.4rem 0;
}

/* --- Panel sections (forecast / model controls) ----------------------------- */

.panel-section {
    border-top: 1px solid var(--border);
    margin-top: 0.75rem;
    padding-top: 0.75rem;
}

.check-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}
.check-row input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }

.field-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0.75rem 0 0.3rem;
}

.cycle-select {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
}

/* --- Detail sub-section tabs -------------------------------------------------- */

/* display:flex would otherwise defeat the hidden attribute */
.detail-tabs[hidden] { display: none; }
.detail-tabs-wrap[hidden] { display: none; }

.detail-tabs-wrap { position: relative; }
/* Mouse affordance: chevron buttons ride the edge fades. */
.tabs-arrow {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    padding: 0 0 2px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow);
    z-index: 2;
}
.tabs-arrow:hover { color: var(--text); border-color: var(--accent); }
.tabs-arrow-l { left: -6px; }
.tabs-arrow-r { right: -6px; }
.detail-tabs.fade-l ~ .tabs-arrow-l { display: flex; }
.detail-tabs.fade-r ~ .tabs-arrow-r { display: flex; }

.detail-tabs {
    display: flex;
    flex-wrap: nowrap; /* one line; the strip scrolls horizontally */
    gap: 2px;
    padding: 3px;
    margin-bottom: 0.75rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.detail-tabs::-webkit-scrollbar { display: none; }
/* Edge fades hint at off-screen tabs (classes synced from scroll). */
.detail-tabs.fade-r {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
}
.detail-tabs.fade-l {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 30px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 30px), transparent);
}
.detail-tabs.fade-l.fade-r {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 30px,
                                        #000 calc(100% - 30px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 30px,
                                #000 calc(100% - 30px), transparent);
}
.detail-tabs button {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.83rem;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    white-space: nowrap;
}
.detail-tabs button:hover { color: var(--text); }
/* selected tab in its own deeper blue, distinct from the accent used
   by buttons inside the tab panels */
:root { --tab-accent: #0d4f9e; }
[data-theme="dark"] { --tab-accent: #3572c9; }
.detail-tabs button.active { color: #fff; background: var(--tab-accent); }
.detail-tabs button.disabled { opacity: 0.4; cursor: default; pointer-events: none; }

/* --- Overview extras (track table / storm stats / ...) -------------------------- */

/* Expanded content (the table) gets a wider panel on desktop only —
   on mobile this must not out-rank the media query's width: auto */
@media (min-width: 721px) {
    .map-panel.wide { width: 423px; }
    /* SHIPS stacks six charts — give it more room, but never overflow the
       viewport on a narrow desktop window */
    .map-panel.ships-wide { width: 430px; max-width: calc(100vw - 2rem); }
}

.extras-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.extras-chips button {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.extras-chips button:hover { color: var(--text); border-color: var(--accent); }
.extras-chips button.active { color: #fff; background: var(--accent); border-color: var(--accent); }

.storm-stats {
    margin-top: 0.55rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.55rem 0.7rem;
}
.storm-stats .stat-grid { margin-bottom: 0; }

/* --- Track table ----------------------------------------------------------------- */

.track-table {
    margin-top: 0.55rem;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.track-table table {
    width: 100%;
    min-width: 430px; /* narrow panels scroll horizontally instead of crushing */
    border-collapse: collapse;
    font-size: 0.72rem;
}
.track-table th {
    position: sticky;
    top: 0;
    background: var(--bg);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    text-align: left;
    padding: 0.3rem 0.35rem;
    border-bottom: 1px solid var(--border);
}
.track-table td {
    padding: 0.25rem 0.35rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    white-space: nowrap;
}
.track-table td:last-child { white-space: normal; }
.track-table tbody tr { cursor: pointer; }
.track-table tbody tr:hover { background: var(--accent-soft); }
.track-table tbody tr.active { background: var(--accent-soft); }
.track-table tbody tr:last-child td { border-bottom: none; }

.ens-note { font-size: 0.76rem; color: var(--text-muted); margin-top: 0.55rem; }
#recon-live-empty { font-size: 0.95rem; margin-top: 0.9rem; }

/* Superensemble per-suite overlay toggle grid */
.super-suites {
    margin-top: 0.35rem;
    padding: 0.4rem 0.6rem 0.5rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.super-suite-row {
    display: grid;
    grid-template-columns: 1fr 58px 46px 40px;
    align-items: center;
    padding: 0.14rem 0;
}
.super-suite-head span,
.super-suite-head .col-toggle {
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    text-align: center;
}
.super-suite-head .col-toggle {
    border: none;
    background: transparent;
    font-family: inherit;
    padding: 2px 0;
    border-radius: 6px;
    cursor: pointer;
}
.super-suite-head .col-toggle:hover { background: var(--accent-soft); color: var(--text); }
.super-suite-head .col-toggle.off {
    text-decoration: line-through;
    opacity: 0.5;
}
.super-suite-row .s-name {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.88rem;
    font-weight: 600;
}
.super-suites .color-circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s;
}
.super-suites .color-circle:hover { transform: scale(1.15); }
.super-suites .color-input {
    position: absolute;
    opacity: 0;
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.super-suite-row input[type="checkbox"] {
    justify-self: center;
    width: 15px;
    height: 15px;
    accent-color: var(--accent);
    cursor: pointer;
}
.super-suite-row input[type="checkbox"]:disabled { opacity: 0.3; cursor: default; }

/* --- Ensembles tab: suite buttons ------------------------------------------------ */

.ens-group { margin-top: 0.75rem; }
.ens-group .mc-label { margin-bottom: 5px; }

.ens-btns { display: flex; flex-wrap: wrap; gap: 6px; }

.ens-btn {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.ens-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.ens-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
/* not available at the displayed cycle (click jumps to a cycle that has it) */
.ens-btn.unavailable {
    opacity: 0.4;
    border-style: dashed;
    color: var(--text-muted);
}
.ens-btn.unavailable:hover { background: var(--bg-card); }

#ens-display { margin-top: 0.8rem; }

/* MSLP colorbar: a legend-dock card; the ramp/tick styles are shared with
   the SST legend below. */
.legend-card .legend-ticks { margin-bottom: 0.6rem; }

/* --- Forecast Loop playback bar --------------------------------------------------- */

/* Glued to the viewport bottom, full width; the map area shrinks to sit
   above it (.loop-open) and is resized from JS when the bar toggles. */
.loop-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 49px;
    padding: 0 0.9rem;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08);
}
.loop-bar[hidden] { display: none; }
.tropics-app.loop-open { bottom: 49px; }

.loop-btn {
    width: 30px;
    height: 30px;
    flex: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
}
.loop-btn:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); }
.loop-btn:disabled { opacity: 0.35; cursor: default; }

.loop-bar input[type="range"] {
    flex: 1;
    min-width: 54px;
    accent-color: var(--accent);
}
.loop-preload {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.74rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}
.loop-preload[hidden] { display: none; }
.loop-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    animation: loop-spin 0.7s linear infinite;
}
@keyframes loop-spin { to { transform: rotate(360deg); } }
.loop-hour {
    flex: none;
    min-width: 115px;
    text-align: right;
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.loop-hour[hidden] { display: none; }

/* Storm-total loop valid time, floated over the top-center of the map */
#loop-valid {
    position: absolute;
    top: 0.9rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9; /* above the map, below the side panel (z 10) */
    padding: 0.3rem 0.95rem;
    border-radius: 11px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    font-size: 1.2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    white-space: nowrap;
    pointer-events: none;
}
#loop-valid[hidden] { display: none; }
.loop-bar select {
    flex: none;
    padding: 0.25rem 0.35rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text);
    font: inherit;
    font-size: 0.8rem;
}

/* Colormap stop editor (Forecast Loop settings modal) */
.lstyle-stop {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border);
}
.lstyle-stop:last-child { border-bottom: none; }
.lstyle-val {
    width: 72px;
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text);
    font: inherit;
    font-size: 0.84rem;
}
.lstyle-unit { font-size: 0.76rem; color: var(--text-muted); margin-right: auto; }
.lstyle-del {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
}
.lstyle-del:hover:not(:disabled) { background: var(--accent-soft); color: var(--text); }
.lstyle-del:disabled { opacity: 0.3; cursor: default; }
.lstyle-actions { display: flex; justify-content: space-between; }

.lstyle-move {
    width: 24px;
    height: 24px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
}
.lstyle-move:hover:not(:disabled) { background: var(--accent-soft); color: var(--text); }
.lstyle-move:disabled { opacity: 0.3; cursor: default; }

.lstyle-preview {
    height: 14px;
    margin: 0.4rem 0 0.5rem;
    border: 1px solid var(--border);
    border-radius: 7px;
}

.lstyle-save-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.5rem;
}
.lstyle-save-row input[type="text"],
.lstyle-save-row select {
    flex: 1;
    min-width: 0;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text);
    font: inherit;
    font-size: 0.84rem;
}
.lstyle-save-row .btn { flex: none; padding: 0.35rem 0.8rem; font-size: 0.82rem; }

@media (max-width: 720px) {
    .loop-bar { gap: 0.35rem; padding: 0 0.5rem; }
    .loop-hour { min-width: 0; font-size: 0.72rem; }
}
#ens-display .fc-row.disabled .check-row { opacity: 0.45; cursor: default; }
#ens-display .fc-row.disabled .check-row input { cursor: default; }

/* --- Fancy cycle picker (Models tab) --------------------------------------------- */

.fancy-cycle { width: 100%; }

.fancy-picker {
    display: flex;
    align-items: stretch;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.fancy-btn {
    background: linear-gradient(135deg, #84A5D1 0%, #B5CBE8 100%);
    color: #fff;
    border: none;
    width: 34px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}
[data-theme="dark"] .fancy-btn {
    background: linear-gradient(135deg, #5572A6 0%, #4A6996 100%);
}
.fancy-btn:hover:not(:disabled) { filter: brightness(1.08); }
.fancy-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.fancy-select {
    flex: 1;
    min-width: 0;
    padding: 0.35rem 0.4rem;
    border: none;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 0.88rem;
    text-align: center;
    cursor: pointer;
}
.fancy-select:focus { outline: none; background: var(--accent-soft); }

.fancy-scrollbar {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 5px;
    margin: 0.55rem 0 0.2rem;
    border-radius: 3px;
    background: var(--border);
    outline: none;
    cursor: pointer;
}
.fancy-scrollbar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #84A5D1 0%, #B5CBE8 100%);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
    cursor: pointer;
    transition: transform 0.15s ease;
}
.fancy-scrollbar::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #84A5D1 0%, #B5CBE8 100%);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
    cursor: pointer;
}
.fancy-scrollbar:hover::-webkit-slider-thumb { transform: scale(1.15); }
[data-theme="dark"] .fancy-scrollbar::-webkit-slider-thumb,
[data-theme="dark"] .fancy-scrollbar::-moz-range-thumb {
    background: linear-gradient(135deg, #5572A6 0%, #4A6996 100%);
}

/* --- Model category menu (Models tab) --------------------------------------------- */

.model-menu {
    width: 100%;
    margin-top: 0.6rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.model-menu .category-tabs {
    display: flex;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
.model-menu .category-tab,
.model-menu .category-tabs button {
    flex: 1;
    padding: 6px 3px;
    text-align: center;
    cursor: pointer;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
}
.model-menu .category-tabs button:hover { background: var(--accent-soft); }
.model-menu .category-tabs button.active {
    background: var(--bg-card);
    color: var(--text);
    border-bottom: 2px solid var(--accent);
}

.model-menu .items-list {
    padding: 8px 10px;
    max-height: 320px;
    overflow-y: auto;
}

.model-menu .item-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}
.model-menu .item-row:last-child { border-bottom: none; }

.model-menu .item-actions {
    display: flex;
    align-items: center;
    gap: 1px;
    margin-left: auto;
}
.model-menu .item-actions .info-btn { width: 24px; height: 24px; }
.model-menu .item-actions .info-btn svg { width: 15px; height: 15px; }
/* dim the action buttons with the row, but keep them clickable */
.model-menu .item-row.unavailable .item-actions { opacity: 0.55; }

/* Trend view: model locked, X returns to the normal Models view */
.trend-box {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.trend-box svg {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--text-muted);
}
.trend-box .trend-name {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.trend-box .trend-close { margin-left: auto; }

.trend-controls { margin-top: 0.6rem; }

/* Dual-handle range: two stacked transparent sliders over a drawn track;
   only the thumbs take pointer events. */
.dual-range { position: relative; height: 26px; }
.dual-range .dual-track,
.dual-range .dual-fill {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    border-radius: 2px;
}
.dual-range .dual-track { left: 0; right: 0; background: var(--border); }
.dual-range .dual-fill { background: var(--accent); }
.dual-range input[type="range"] {
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
}
.dual-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--accent);
    pointer-events: auto;
    cursor: pointer;
}
.dual-range input[type="range"]::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--accent);
    pointer-events: auto;
    cursor: pointer;
}
.dual-range input[type="range"]::-moz-range-track { background: transparent; }
.dual-range input[type="range"]:disabled::-webkit-slider-thumb { border-color: var(--border); }
.dual-range input[type="range"]:disabled::-moz-range-thumb { border-color: var(--border); }

.trend-range-label {
    margin-top: 2px;
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.model-menu .color-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s;
}
.model-menu .color-circle:hover { transform: scale(1.1); }
.model-menu .color-circle.disabled { opacity: 0; pointer-events: none; }

.model-menu .color-input {
    position: absolute;
    opacity: 0;
    width: 24px;
    height: 24px;
    cursor: pointer;
}
.model-menu .color-input:disabled { pointer-events: none; }

.model-menu .item-label {
    flex: 1;
    cursor: pointer;
    user-select: none;
    font-size: 0.87rem;
    color: var(--text);
    transition: opacity 0.2s;
}
.model-menu .item-label.active { font-weight: 600; }
.model-menu .item-label.inactive { opacity: 0.25; }
.model-menu .item-row.unavailable .item-label {
    opacity: 0.25;
    cursor: not-allowed;
    text-decoration: line-through;
}

.model-menu .empty-state {
    padding: 16px 10px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* --- Models tab control system (redesigned) -------------------------------------- */

.mc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}
.mc-label,
.mc-field span {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.mc-mode { display: flex; margin-bottom: 0.7rem; }
.mc-mode button { flex: 1; text-align: center; }

/* Latest-data cycle view: anchor-cycle note + per-model run suffix */
.mc-latest-note {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: -0.2rem 0 0.7rem;
}
.model-menu .item-cyc {
    font-weight: 400;
    font-size: 0.74rem;
    color: var(--text-muted);
    margin-left: 0.35rem;
    white-space: nowrap;
}

.mc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
    margin-top: 0.7rem;
}
.mc-field span { margin-bottom: 3px; }
.mc-field .setting-select { width: 100%; font-size: 0.84rem; }

.mc-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-top: 0.55rem;
}
.mc-btn[hidden] { display: none; } /* display:flex beats hidden */
.mc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.42rem 0.2rem;
    border-radius: 9px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.mc-btn:hover { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.mc-btn.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.mc-btn svg { width: 14px; height: 14px; flex: 0 0 auto; }

.model-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.6rem;
}
.model-opt {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}
.model-opt .setting-select { font-size: 0.8rem; padding: 0.25rem 0.4rem; }

.model-styles-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.28rem 0.6rem;
    border-radius: 8px;
    cursor: pointer;
}
.model-styles-btn:hover { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.model-styles-btn svg { width: 14px; height: 14px; }

/* --- Model legend (map overlay, Models tab) ---------------------------------------- */

/* Raw/interp selector: pill chips (distinct from the sub-section tabs) */
.model-mode-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.info-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    flex: 0 0 auto;
}
.info-btn:hover { background: var(--accent-soft); color: var(--text); }
.info-btn svg { width: 17px; height: 17px; }

.mode-info-p { font-size: 0.9rem; line-height: 1.6; margin-bottom: 0.9rem; }
.mode-info-p:last-child { margin-bottom: 0; }

.model-options { flex-wrap: wrap; }
.model-opt input[type="checkbox"] { accent-color: var(--accent); }

/* --- Legend dock ------------------------------------------------------------------
   Contextual legends (model legend, MSLP colorbar, future cards) stack in
   one container: a column above the SST colorbar on desktop, a pill strip
   above the bottom sheet on narrow viewports. A collapsed card is just its
   title pill, so it never reserves phantom space. The SST/SSTA colorbar
   stays independent. */
.legend-dock {
    position: absolute;
    right: 1rem;
    bottom: 2.2rem;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    pointer-events: none; /* only the cards take events */
}

.legend-card {
    pointer-events: auto;
    width: 216px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.legend-card[hidden] { display: none; }
.legend-card.collapsed { width: auto; border-radius: 999px; }
.legend-card.collapsed .legend-card-body { display: none; }

.legend-card-head {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.35rem 0.7rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    cursor: pointer;
}
.legend-card-head:hover { background: var(--accent-soft); color: var(--text); }
.legend-card-head .legend-tog { font-size: 0.95rem; line-height: 1; }

.legend-card-body { padding: 0.2rem 0.7rem 0.55rem; }
.model-legend .legend-card-body { max-height: 220px; overflow-y: auto; }

.model-legend-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.14rem 0;
    font-size: 0.78rem;
    font-weight: 600;
}
.model-legend-row .legend-line {
    flex: 0 0 auto;
    width: 26px;
    height: 0;
}
.model-legend-empty { font-size: 0.75rem; color: var(--text-muted); padding: 0.2rem 0; }
.model-legend-row .legend-cyc { font-weight: 400; color: var(--text-muted); }

.legend-scale-title {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-top: 0.5rem;
}
.legend-scale {
    display: flex;
    height: 10px;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid var(--border);
    margin-top: 0.2rem;
}
.legend-scale span { flex: 1; }
.legend-scale-labels {
    display: flex;
    font-size: 0.62rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
}
.legend-scale-labels span { flex: 1; text-align: center; }
.legend-scale-edges { justify-content: space-between; }
.legend-scale-edges span { flex: 0 0 auto; }

/* When the SST legend is also visible (both bottom-right), stack above it. */


/* --- Model intensity chart drawer -------------------------------------------------- */

/* .modal.chart-modal: must out-rank the base .modal width defined later */
.modal.chart-modal { width: min(900px, calc(100vw - 3rem)); }
/* One toolbar band groups every chart control under a small label. */
.chart-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 0.6rem 1.2rem;
    padding: 0.55rem 0.8rem 0.65rem;
    margin: 0.15rem 0 0.65rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.chart-group[hidden] { display: none; }
.chart-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
}
.chart-group-label {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.chart-group-cycle { min-width: 240px; flex: 0 1 340px; }
.chart-group-cycle .fancy-cycle { width: 100%; }
/* the group's align-items: flex-start would collapse these to zero
   width (their children are absolutely positioned) */
.chart-group-cycle .dual-range,
.chart-group-cycle .trend-range-label { width: 100%; }
.chart-bt-opt { min-height: 28px; } /* baseline-aligns with the chip rows */
.chart-modal .modal-head { gap: 0.75rem; }

@media (max-width: 720px) {
    /* the cycle picker takes its own full row; the rest share one */
    .chart-group-cycle { flex: 1 1 100%; }
    .chart-toolbar { gap: 0.5rem 0.9rem; }
}
.chart-modal-body { position: relative; }
.chart-head-actions { display: flex; align-items: center; gap: 0.2rem; }
.chart-head-actions svg { width: 16px; height: 16px; }

.chart-flex { display: flex; gap: 0.7rem; }
.chart-body { flex: 1; min-width: 0; height: 400px; }
.chart-body svg { display: block; width: 100%; height: 100%; }

.chart-legend {
    flex: 0 0 150px;
    max-height: 400px;
    overflow-y: auto;
    padding: 0.3rem 0.2rem;
}
.chart-legend .model-legend-row { font-size: 0.85rem; }

@media (max-height: 560px) {
    .chart-body, .chart-legend { height: 216px; max-height: 216px; }
}

.chart-svg .grid-line { stroke: var(--border); stroke-width: 1; }
.chart-svg .tick-label { fill: var(--text-muted); font-size: 10.5px; font-family: inherit; }
.chart-svg .axis-title { fill: var(--text-muted); font-size: 10.5px; font-weight: 700; }
.chart-svg .hover-line { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-svg .series-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }

.chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.chart-tip {
    position: absolute;
    z-index: 13;
    pointer-events: none;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 0.4rem 0.6rem;
    font-size: 0.72rem;
    max-height: 216px;
    overflow: hidden;
}
.chart-tip .tip-h { font-weight: 700; margin-bottom: 0.15rem; }
.chart-tip .tip-row { display: flex; align-items: center; gap: 0.35rem; line-height: 1.45; }
.chart-tip .tip-chip { width: 10px; height: 3px; border-radius: 2px; flex: 0 0 auto; }
.chart-tip .tip-val { margin-left: auto; font-weight: 600; padding-left: 0.6rem; }

/* --- Model line-style settings modal ------------------------------------------------ */

/* Dropsonde detail modal: Skew-T + wind panel (left) and the lowest-100-hPa
 * table (right); stacks only when too narrow. The two-class selector must
 * out-rank the base `.modal { width: min(360px…) }` defined later. */
.modal.sonde-modal { width: min(1040px, calc(100vw - 2rem)); }
.sonde-body { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: flex-start; }
.sonde-chart-col { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.sonde-chart-wrap { width: 100%; }
#rsonde-skewt { display: block; touch-action: none; max-width: 100%; height: auto; }
.sonde-side { flex: 1 1 200px; min-width: 190px; }
.sonde-head-titles { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.sonde-sub { font-size: 0.8rem; color: var(--text-muted); }
.sonde-table-wrap { max-height: min(60vh, 520px); overflow: auto; }
.sonde-readout {
    min-height: 1.1em; font-size: 0.82rem; font-weight: 600;
    color: var(--text); font-variant-numeric: tabular-nums; text-align: center;
}
.sonde-btm { max-height: min(60vh, 520px); overflow: auto; }
.sonde-btm-hdr { font-size: 0.82rem; font-weight: 700; color: var(--text); margin: 0 0 0.3rem; }
.sonde-btm .sonde-table { width: 100%; }
/* compact rows — more will sit below this table later */
.sonde-btm .sonde-table th { padding: 0.1rem 0.5rem 0.15rem; }
.sonde-btm .sonde-table td { padding: 0.05rem 0.5rem; }
.sonde-inset { margin-top: 0.7rem; }
.sonde-inset[hidden] { display: none; }
.sonde-inset-hdr { font-size: 0.82rem; font-weight: 700; color: var(--text); margin: 0 0 0.3rem; }
.sonde-inset-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
#rsonde-map { display: block; max-width: 100%; border-radius: 8px; border: 1px solid var(--border); }
#rsonde-map[hidden] { display: none; }
.sonde-means { flex: 1 1 120px; min-width: 110px; display: flex; flex-direction: column; gap: 0.7rem; }
.sonde-mean { display: flex; flex-direction: column; gap: 0.1rem; }
.sonde-mean-lbl { font-size: 0.76rem; font-weight: 600; color: var(--text-muted); }
.sonde-mean-val { font-size: 0.92rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.sonde-alert-txt { font-size: 0.9rem; font-weight: 700; color: #ef4444; }
.sonde-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}
.sonde-table thead th {
    position: sticky;
    top: 0;
    background: var(--bg-card);
    font-weight: 700;
    line-height: 1.1;
    z-index: 1;
}
.sonde-table th, .sonde-table td {
    padding: 0.28rem 0.55rem;
    text-align: right;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.sonde-table th span { display: block; font-weight: 400; font-size: 0.7rem; color: var(--text-muted); }
.sonde-table tbody tr:hover { background: var(--border); }

.mstyle-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.32rem 0;
    border-bottom: 1px solid var(--border);
}
.mstyle-row:last-child { border-bottom: none; }
.mstyle-row .mstyle-name { flex: 1; font-size: 0.86rem; font-weight: 600; }
.mstyle-row.universal .mstyle-name { color: var(--text-muted); }
.mstyle-row input[type="color"] {
    width: 26px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
}
.mstyle-row select {
    padding: 0.2rem 0.3rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 0.78rem;
}
.mstyle-group-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0.7rem 0 0.15rem;
}

/* Line-styles sections as distinct cards (no tabs) */
.mstyle-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    padding: 0.1rem 0.8rem 0.5rem;
    margin-top: 0.65rem;
}
.mstyle-card:first-child { margin-top: 0.15rem; }
.mstyle-card .mstyle-group-label { margin: 0.55rem 0 0.1rem; }

/* --- Model picker -------------------------------------------------------------- */

.model-groups { margin-top: 0.6rem; }

.model-group-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0.7rem 0 0.2rem;
}
.model-group-label:first-child { margin-top: 0; }

.model-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.18rem 0.15rem;
    font-size: 0.87rem;
    cursor: pointer;
    user-select: none;
    border-radius: 6px;
}
.model-row:hover { background: var(--accent-soft); }
.model-row input { accent-color: var(--accent); cursor: pointer; }

.color-chip {
    flex: 0 0 auto;
    width: 14px;
    height: 4px;
    border-radius: 2px;
}

.model-count { color: var(--text-muted); font-size: 0.78rem; margin-left: auto; }

details.model-extra summary {
    font-size: 0.8rem;
    color: var(--text-muted);
    cursor: pointer;
    margin-top: 0.5rem;
}

.model-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.55rem;
}
.model-actions button {
    background: transparent;
    border: none;
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}
.model-actions button:hover { color: var(--accent-hover); }

/* --- MapLibre chrome theming ---------------------------------------------------- */

/* maplibre-gl.css pins the map container to Helvetica; popups and controls
   inherit from it, so restore the site font here. */
.maplibregl-map {
    font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
}

.maplibregl-popup-content {
    background: var(--bg-card);
    color: var(--text);
    border-radius: 10px;
    box-shadow: var(--shadow);
    padding: 0.6rem 0.8rem;
    font-family: inherit;
}
.maplibregl-popup-tip { border-top-color: var(--bg-card) !important; border-bottom-color: var(--bg-card) !important; }
.maplibregl-popup-close-button { color: var(--text-muted); font-size: 1.1rem; right: 4px; top: 2px; }

/* hover tooltips must never intercept the pointer (an invisible or
   adjacent popup otherwise blocks hovering the features beneath it) */
.map-tooltip, .map-tooltip * { pointer-events: none !important; }
.map-tooltip .maplibregl-popup-content { padding: 0.4rem 0.65rem; font-size: 0.9rem; font-weight: 600; }
.map-tooltip .tip-title { font-weight: 700; }
.map-tooltip .tip-sub { font-weight: 400; font-size: 0.85rem; color: var(--text-muted); }
.map-tooltip .tip-center { text-align: center; }
.map-tooltip .tip-strong { font-weight: 700; color: var(--text); }
.map-tooltip .tip-cat { margin: 0.1rem 0 0.15rem; }
.map-tooltip .tip-gap { margin-top: 0.45rem; }

.map-tooltip .tip-more {
    font-size: 0.72rem;
    font-style: italic;
    color: var(--accent);
    margin-top: 0.2rem;
}
.obs-popup .maplibregl-popup-content {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    max-height: 45vh;
    overflow-y: auto;
}
.obs-popup .tip-title { font-weight: 700; margin-bottom: 0.25rem; }
.obs-popup .tip-sub { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }
.obs-popup .tip-strong { font-weight: 700; color: var(--text); }

.maplibregl-ctrl-attrib { font-size: 0.68rem; }

/* Popup content produced by the data pipeline (forecast point labels) */
.fcst-popup { font-size: 0.85rem; line-height: 1.45; }

/* --- Data overlay control + legend ----------------------------------------------- */

.layer-control[hidden] { display: none; } /* display:flex beats hidden */

.layer-control {
    position: absolute;
    top: 1rem;
    right: 3.6rem;
    z-index: 10;
    display: flex;
    padding: 3px;
    gap: 2px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
}

.layer-control button {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.layer-control button:hover { color: var(--text); background: var(--accent-soft); }
.layer-control button.active { color: #fff; background: var(--accent); }

/* In-panel variant: same pill design, but in normal flow (no float/shadow). */
.layer-control.inline {
    position: static;
    display: inline-flex;
    z-index: auto;
    box-shadow: none;
}
.layer-control.inline[hidden] { display: none; }

.layer-control .probe-btn {
    display: flex;
    align-items: center;
    border-left: 1px solid var(--border);
    border-radius: 0 7px 7px 0;
    margin-left: 2px;
    padding: 0.25rem 0.5rem;
}
.layer-control .probe-btn[hidden] { display: none; }
.layer-control .probe-btn svg { width: 15px; height: 15px; }

.sst-legend {
    pointer-events: auto; /* dock child; the dock itself takes no events */
    width: 216px;
    padding: 0.5rem 0.7rem 0.9rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
}

.sst-legend .legend-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
}
.sst-legend .legend-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
}
.sst-legend .legend-collapse {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
}
.sst-legend .legend-collapse:hover { background: var(--accent-soft); color: var(--text); }
.sst-legend .legend-body { margin-top: 0.35rem; }
.sst-legend .legend-body[hidden] { display: none; }

.sst-legend .iso-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}
.sst-legend .iso-row input { accent-color: var(--accent); cursor: pointer; }

.legend-card .legend-bar,
.sst-legend .legend-bar {
    height: 10px;
    border-radius: 5px;
    border: 1px solid var(--border);
}

.legend-card .legend-ticks,
.sst-legend .legend-ticks {
    position: relative;
    height: 0.9rem;
    margin-top: 0.15rem;
    font-size: 0.68rem;
    color: var(--text-muted);
}
.legend-card .legend-ticks span,
.sst-legend .legend-ticks span {
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
}

.legend-opacity {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.55rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}
.legend-opacity input[type="range"] {
    flex: 1;
    min-width: 0; /* ranges refuse to shrink below intrinsic width otherwise */
    accent-color: var(--accent);
    height: 4px;
    cursor: pointer;
}
.legend-opacity .op-val { min-width: 2.2em; text-align: right; }


/* --- Settings modal -------------------------------------------------------------- */

.modal-backdrop[hidden] { display: none; }

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 16, 24, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: modal-fade 0.15s ease;
}

.modal {
    width: min(360px, calc(100vw - 2rem));
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    animation: modal-pop 0.18s ease;
}

@keyframes modal-fade { from { opacity: 0; } }
@keyframes modal-pop { from { opacity: 0; transform: scale(0.96) translateY(6px); } }

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.15rem 0.7rem;
    border-bottom: 1px solid var(--border);
}
.modal-head h3 { font-size: 1.05rem; letter-spacing: -0.01em; }

/* Information modal: a single rendered description for the current view. */
.info-modal { width: min(560px, calc(100vw - 2rem)); }
.info-body {
    max-height: min(70vh, 560px);
    overflow-y: auto;
    padding: 1rem 1.25rem 1.2rem;
}
.info-body p { margin: 0 0 0.7rem; line-height: 1.5; color: var(--text); }
.info-body p:last-child { margin-bottom: 0; }
.info-body ul { margin: 0 0 0.7rem; padding-left: 1.2rem; line-height: 1.5; }
.info-body li { margin: 0.15rem 0; }
.info-body a { color: var(--accent); }
.info-body code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.85em;
    background: var(--accent-soft);
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
}

.modal-close {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}
.modal-close:hover { background: var(--accent-soft); color: var(--text); }

/* Labeled Save-Image button in a chart modal's header (icon + text, bordered). */
.chart-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 28px;
    padding: 0 0.6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}
.chart-save-btn:hover {
    background: var(--accent-soft);
    color: var(--text);
    border-color: var(--accent);
}

/* Buttons default to the browser's system font (font-family isn't inherited on
 * <button>). Force the app font on the ones that miss it — the chart Save Image
 * button, the Generate GIF button, and the colormap-creator modal buttons. */
.chart-save-btn,
.btn {
    font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.modal-body { padding: 0.75rem 1.15rem 1rem; }

.modal-wide { width: min(504px, calc(100vw - 2rem)); }
.modal-sub { font-size: 0.78rem; color: var(--text-muted); margin-top: 1px; }
.modal-scroll { max-height: 65vh; overflow-y: auto; }
.discussion-text { font-size: 0.9rem; line-height: 1.6; }

.discussion-btn {
    display: block;
    width: 100%;
    margin-top: 0.6rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.discussion-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.formation-box .discussion-btn { background: var(--bg-card); margin-top: 0.55rem; }
.formation-box .discussion-btn:hover { background: var(--accent-soft); }

.modal-actions { margin-top: 0.9rem; text-align: right; }
.modal-actions .btn { padding: 0.45rem 1.1rem; font-size: 0.88rem; }
#inactive-text { font-size: 0.92rem; }

.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    cursor: pointer;
    user-select: none;
}
.setting-row + .setting-row,
.setting-row + .setting-group,
.setting-group + .setting-row,
.setting-group + .setting-group { border-top: 1px solid var(--border); padding-top: 0.35rem; }

/* Settings categories: tab strip on top (narrow) / left rail (wide) */
.settings-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.6rem 1.15rem 0;
}
.settings-tabs button {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.35rem 0.7rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.settings-tabs button:hover { color: var(--text); background: var(--accent-soft); }
.settings-tabs button.active { color: #fff; background: var(--accent); }
.settings-pane[hidden] { display: none; }

@media (min-width: 721px) {
    .settings-modal { width: min(500px, calc(100vw - 2rem)); }
    .settings-layout { display: flex; align-items: stretch; }
    .settings-tabs {
        flex: 0 0 118px;
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        padding: 0.9rem 0 0.9rem 0.9rem;
        border-right: 1px solid var(--border);
        margin-right: 0.15rem;
    }
    .settings-tabs button { text-align: left; }
    .settings-layout .modal-body { flex: 1 1 auto; min-width: 0; }
}

.setting-subrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 0 0.55rem 0.9rem;
    cursor: pointer;
    user-select: none;
}
.setting-subrow.disabled { opacity: 0.45; pointer-events: none; }
.setting-row.disabled { opacity: 0.45; pointer-events: none; }
.msize-row { display: flex; align-items: center; gap: 0.6rem; }
.msize-row .op-val { min-width: 5.6em; text-align: right; }

/* Settings profiles (Profiles tab): two-line cards that fit the narrow
   settings body — name + date on top, actions beneath */
.settings-pane[data-pane="profiles"] { padding-top: 0.35rem; }
.prof-row {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.45rem 0.6rem 0.5rem;
    margin-bottom: 0.5rem;
    max-width: 100%;
    transition: border-color 0.15s;
}
.prof-row:hover { border-color: var(--accent); }
.prof-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    min-width: 0;
}
.prof-head .fav-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.prof-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.45rem;
}
.prof-actions .mc-btn { padding: 0.24rem 0.7rem; font-size: 0.75rem; }
.prof-spacer { flex: 1; }

/* Background colors: one section, two exclusive choices (Blue Marble OR
   custom fills) — rows deliberately carry no divider borders. */
.bg-choice-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.3rem 0;
    margin-left: 0.75rem;
    cursor: pointer;
    user-select: none;
}
.bg-custom .cfg-row { margin-left: 0.75rem; }
.bg-or {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0.25rem 0 0.25rem 0.75rem;
}
.bg-or::before, .bg-or::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--border);
}
.bg-custom {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-bottom: 0.65rem; /* breathing room above the next group's divider */
    transition: opacity 0.15s;
}
.bg-custom.disabled { opacity: 0.4; pointer-events: none; }
.setting-sub-name { font-size: 0.85rem; color: var(--text-muted); }

.setting-name { display: block; font-weight: 600; font-size: 0.92rem; line-height: 1.35; }
.setting-desc { display: block; color: var(--text-muted); font-size: 0.8rem; line-height: 1.35; }

.setting-color {
    width: 40px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    flex: 0 0 auto;
}

.setting-row-static { cursor: default; }

/* NHC percentile tables */
.pct-note { font-size: 0.78rem; color: var(--text-muted); margin: 0.15rem 0 0.75rem; }
.pct-group-title {
    font-size: 0.8rem;
    font-weight: 700;
    margin: 0.9rem 0 0.35rem;
}
.pct-group-title:first-of-type { margin-top: 0.2rem; }
.pct-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.pct-table th {
    background: var(--bg);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    text-align: left;
    padding: 0.32rem 0.5rem;
    border-bottom: 1px solid var(--border);
}
.pct-table td {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--border);
}
.pct-table tr:last-child td { border-bottom: none; }
.pct-table .pct-rank { font-weight: 700; }

/* Grand Ensemble membership table */
#grand-members { margin-top: 0.55rem; }
#grand-members[hidden] { display: none; }
.gm-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 0.4rem;
}
.pct-table th.gm-num, .pct-table td.gm-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.pct-table .gm-sub td {
    background: var(--bg);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.pct-table .gm-total td { font-weight: 700; }
.gm-dets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.1rem 0;
}
.gm-det-chip {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    border: 1px solid var(--border);
}
.gm-det-chip.in {
    color: #2ea043;
    background: rgba(46, 160, 67, 0.12);
    border-color: rgba(46, 160, 67, 0.45);
}
/* Grand Ensemble display controls: labeled blocks with joined
   rectangular button groups (softly rounded outer corners only) */
.gd-block { margin-top: 0.6rem; }
.gd-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.gd-head .field-label { margin: 0; }
.gd-block > .field-label { margin: 0 0 0.3rem; }
.gd-head + .box-group { margin-top: 0.3rem; }
.gd-sub { margin-top: 0.45rem; }
.gd-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0.85rem 0 0.3rem;
}

.box-group {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-card);
}
.box-group button {
    flex: 1 1 0;
    min-width: 0;
    border: none;
    border-left: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.42rem 0.2rem;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.box-group button:first-child { border-left: none; }
.box-group button[hidden] { display: none; }
.box-group button:hover:not(:disabled):not(.active) { color: var(--text); background: var(--accent-soft); }
.box-group button.active { color: #fff; background: var(--accent); }
.box-group button.active:hover { background: var(--accent-hover); }
.box-group button:disabled { opacity: 0.45; cursor: default; }

/* Recon mission-view toggle boxes (non-upper-air): Dropsondes / VDMs / HDOBs.
   One box per row; its sub-control opens to the RIGHT on the same row as one
   connected unit, so it is visually tied to that box and the dropdowns get the
   full remaining panel width. */
.recon-tbox-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.15rem 0 0.55rem;
}
.recon-tbox-row[hidden] { display: none; }
.recon-tcard {
    display: flex;
    align-items: stretch;
}
.recon-tcard[hidden] { display: none; } /* out-rank display:flex (upper-air VDMs) */
.recon-tbox {
    flex: 0 0 96px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #eef1f5;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.45rem 0.3rem;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
[data-theme="dark"] .recon-tbox { background: #212c3a; }
.recon-tbox:hover:not(.active):not(:disabled) { color: var(--text); border-color: var(--accent); }
.recon-tbox.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.recon-tbox.active:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.recon-tbox:disabled { opacity: 0.45; cursor: default; }

/* The attached sub-control: shares the active box's accent border and flows out
   of its right edge (flat left corners) so the two read as one control. */
.recon-tcard:has(.recon-tsub:not([hidden])) .recon-tbox {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.recon-tsub {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    border: 1px solid var(--accent);
    border-left: none;
    border-radius: 0 8px 8px 0;
    margin-left: -1px;
    padding: 0.3rem 0.4rem;
    background: var(--bg-card);
}
.recon-tsub[hidden] { display: none; }
/* A select sitting directly in a sub (Dropsondes) fills its width; the HDOBs
   dropdown + settings gear share the sub via .recon-obs-ctl. Both selects use
   .setting-select so they look identical. */
.recon-tsub > .setting-select {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    font-size: 0.8rem;
    margin: 0;
}
.recon-obs-ctl {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 1 1 auto;
    min-width: 0;
}
.recon-obs-ctl .setting-select {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    font-size: 0.8rem;
    margin: 0;
}
.recon-obs-ctl .mini-gear { flex: 0 0 auto; }
/* VDM label font-size slider relocated inline into the VDMs sub. */
.recon-tsub > .mstyle-row {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    gap: 0.4rem;
}
.recon-tsub > .mstyle-row .mstyle-name { font-size: 0.76rem; white-space: nowrap; }
.recon-tsub > .mstyle-row .fstyle-range { flex: 1 1 auto; min-width: 0; }

/* Dropsondes sub stacks the dropdown over the (optional) pressure-level block. */
.recon-sonde-sub { flex-direction: column; align-items: stretch; gap: 0.35rem; }
.recon-plevel { display: flex; flex-direction: column; gap: 0.35rem; }
.recon-plevel[hidden] { display: none; }
.recon-plevel-row { display: flex; align-items: center; gap: 0.4rem; }
.recon-plevel-row input[type="range"] { flex: 1 1 auto; min-width: 0; accent-color: var(--accent); }
.recon-plevel-lbl {
    flex: 0 0 auto;
    min-width: 3.4em;
    text-align: right;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}
.recon-plevel-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--text);
    cursor: pointer;
}

.rchart-modal {
    width: fit-content;
    min-width: min(560px, calc(100vw - 2rem));
    max-width: min(1080px, calc(100vw - 2rem));
}
#rchart-canvas { display: block; margin: 0 auto; }
#rchart-canvas[hidden] { display: none; }
#tdr-canvas { display: block; margin: 0 auto; }
#tdr-canvas[hidden] { display: none; }

/* TDR modal controls: two tidy rows of labeled fields */
.tdr-controls { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 0.5rem; }
.tdr-ctl-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.4rem;
    align-items: flex-end;
}
.tdr-field { display: flex; flex-direction: column; gap: 0.3rem; }
.tdr-field-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.tdr-field-inline { flex-direction: row; align-items: center; gap: 0.6rem; }
.tdr-cmap { width: fit-content; }
.tdr-cmap button { flex: 0 0 auto; padding: 0.34rem 0.85rem; font-size: 0.8rem; white-space: nowrap; }
.tdr-slider { flex: 1 1 190px; min-width: 160px; }
.tdr-slider-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.2rem;
}
.tdr-slider-head span:first-child {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.tdr-slider-head span:last-child {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.tdr-slider input[type="range"] { width: 100%; margin: 0; }

/* SHIPS intensity guidance tab */
.ships-titlebox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #e9edf2;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.85rem;
}
[data-theme="dark"] .ships-titlebox { background: #2a3444; }
.ships-title {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text);
    line-height: 1.1;
}
.ships-init {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    margin-top: 0.15rem;
}
.ships-pos {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    margin-top: 0.2rem;
}
.ships-block { margin-bottom: 1.1rem; }
.ships-block-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}
.ships-canvas { display: block; width: 100%; }
/* RI probability table — one row per threshold, three narrow columns */
.ships-ri-table {
    border-collapse: collapse;
    width: 100%;
    font-variant-numeric: tabular-nums;
}
.ships-ri-table th,
.ships-ri-table td {
    border: 1px solid var(--border);
    padding: 0.16rem 0.5rem;
    text-align: center;
    font-size: 0.76rem;
    white-space: nowrap;
    line-height: 1.35;
}
.ships-ri-table thead th {
    background: #8CBCE1;
    color: #16283a;
    font-weight: 700;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.ships-ri-table tbody th {
    text-align: left;
    font-weight: 600;
    color: var(--text);
}
.ships-ri-table tbody td { font-weight: 700; color: var(--text); }
.ships-ri-table td.ships-ri-r.hot { color: var(--accent); }
/* first column snug to the threshold text, share the rest between the two
   value columns so the table stays narrow */
.ships-ri-table td.ships-ri-p,
.ships-ri-table td.ships-ri-r { width: 4rem; }
/* Attributes grid */
.ships-attrs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.5rem 0.8rem;
}
.ships-attr { display: flex; flex-direction: column; gap: 0.1rem; }
.ships-attr-k {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.ships-attr-v {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.rback-actions { justify-content: stretch; gap: 0.5rem; }
.rback-actions .btn { flex: 1; }

.rc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.rc-head .field-label { margin-bottom: 0; }

#recon-subtabs { margin-bottom: 0.7rem; }
#recon-subtabs[hidden] { display: none; } /* display:flex beats hidden */
#recon-total[hidden], #recon-missions-view[hidden] { display: none; }

/* Recon tab: mission explorer header */
#recon-mission-head {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg);
    padding: 0.55rem 2rem 0.6rem; /* room for the absolute close button */
    margin-bottom: 0.6rem;
}
#recon-mission-head[hidden] { display: none; }
#recon-mission-close {
    position: absolute;
    top: 0.3rem;
    right: 0.35rem;
}
.rm-head-txt {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.1rem;
    min-width: 0;
}
#recon-mission-title { font-weight: 700; font-size: 1.14rem; line-height: 1.2; }
#recon-mission-time {
    font-weight: 700;
    font-size: 0.88rem;
    line-height: 1.3;
    color: var(--text-muted);
}
#recon-mission-metrics:not(:empty) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.1rem 0.45rem;
    margin-top: 0.5rem;
    line-height: 1.25;
}
.rm-head-metrics-lbl {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}
.rm-head-metrics-val { font-size: 0.9rem; }
#recon-mission-badges:not(:empty) {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.45rem;
}
/* the LIVE badge's list-layout margin-left:auto would break centering here */
#recon-mission-badges .rm-live { margin-left: 0; }
#recon-overview[hidden] { display: none; }

/* Recon tab: mission list */
#recon-missions { display: flex; flex-direction: column; gap: 0.4rem; }
.recon-mission {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg-card);
    padding: 0.5rem 0.6rem;
    font: inherit;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.recon-mission:hover { border-color: var(--accent); background: var(--accent-soft); }
.recon-mission.live {
    border-color: #2ea043;
    box-shadow: inset 3px 0 0 #2ea043;
}
.rm-row1 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}
.rm-id {
    font-weight: 700;
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rm-badge {
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.08rem 0.32rem;
    border-radius: 5px;
    color: #fff;
    background: #6b7c90;
}
.rm-badge.rm-noaa { background: #1668c7; }
.rm-badge.rm-noaa9 { background: #7c3aed; }
.rm-badge.rm-usaf { background: #5b6b7d; }
.rm-live {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 0.66rem;
    font-weight: 700;
    color: #2ea043;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.rm-live::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2ea043;
    animation: rm-pulse 1.4s ease-in-out infinite;
}
@keyframes rm-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
.rm-phase { font-size: 0.8rem; color: var(--text-muted); line-height: 1.25; }
.rm-row2 { font-size: 0.8rem; color: var(--text-muted); line-height: 1.25; }
/* the two info lines sit tighter than the title gap */
.rm-phase { margin-bottom: -0.14rem; }
.rm-row2 b { color: var(--text); font-weight: 700; }

/* Correlation matrix modal */
.corr-modal {
    width: fit-content;
    min-width: min(720px, calc(100vw - 2rem));
    max-width: min(1240px, calc(100vw - 2rem));
}
.corr-scatter-modal {
    width: fit-content;
    max-width: min(640px, calc(100vw - 2rem));
}
#corr-scatter-canvas {
    display: block;
    margin: 0 auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}
#corr-scatter-modal .ens-note { margin-top: 0.5rem; text-align: center; }
.corr-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.1rem;
    margin-bottom: 0.6rem;
}
.corr-controls label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
}
.corr-controls #corr-save { margin-left: auto; }
.corr-cycle-ctl {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 168px;
}
.corr-cycle-ctl span {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.corr-cycle-ctl input[type="range"] { width: 100%; margin: 0; }
/* natural size, panning instead of shrinking on narrow viewports */
.corr-scroll {
    overflow: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}
#corr-canvas {
    display: block;
    margin: 0 auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}
#corr-canvas[hidden] { display: none; }
.corr-readout {
    min-height: 1.2em;
    margin-top: 0.4rem;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}
.corr-interp {
    white-space: pre-line;
    min-height: 2.6em;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    line-height: 1.35;
}

.gm-det-chip.out {
    color: var(--text-muted);
    text-decoration: line-through;
    opacity: 0.7;
}

#overview-options {
    display: flex;
    justify-content: center;
    /* .panel-body already pads 0.75rem above; match it below the pill so
       the control sits vertically centered between panel top and divider */
    padding: 0 0.25rem 0.75rem;
    margin-bottom: 0.45rem;
    border-bottom: 1px solid var(--border);
}
#overview-options[hidden] { display: none; }

/* Overview forecast controls */
.forecast-btn { width: 100%; }
/* Mode pill centered in the section; slightly tighter buttons and a wrap
   fallback so Off / Official Forecast / Grand Ensemble fits the panel */
#forecast-mode {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: fit-content;
    margin: 0 auto;
}
#forecast-mode button { padding: 0.25rem 0.5rem; }
#forecast-controls { margin-top: 0.55rem; }
#forecast-controls[hidden] { display: none; }
.fc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.18rem 0;
}
/* display:flex would otherwise defeat the hidden attribute */
.fc-row[hidden] { display: none; }
.mini-gear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    flex: 0 0 auto;
}
.mini-gear:hover { background: var(--accent-soft); color: var(--text); }
.mini-gear svg { width: 14px; height: 14px; }

.fstyle-range { flex: 1; accent-color: var(--accent); height: 4px; cursor: pointer; }
.mstyle-row .op-val, .setting-subrow .op-val { font-size: 0.78rem; color: var(--text-muted); min-width: 2.4em; text-align: right; }

/* Boundary lines: three side-by-side boxes — name, color, toggle each */
.bnd-grid {
    display: flex;
    gap: 0.5rem;
    margin: 0.2rem 0 0.3rem 0.75rem;
}
.bnd-box {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.45rem 0.25rem;
}
.bnd-name { font-size: 0.78rem; font-weight: 600; color: var(--text); }
.bnd-ctls { display: flex; align-items: center; gap: 0.5rem; }

.cat-colors-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.35rem;
    padding: 0 0 0.55rem;
}
.cat-colors-grid label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
}
.cat-colors-grid input[type="color"] {
    width: 100%;
    height: 24px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
}

.setting-restore-row { justify-content: flex-end; }

/* Named color palettes (category / background settings blocks) */
.cfg-row { display: flex; align-items: center; gap: 0.4rem; }
.cfg-row[hidden] { display: none; }
.cfg-select { flex: 1; min-width: 0; }
.cfg-name {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font: inherit;
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
    border-radius: 7px;
}
.cfg-name:focus { outline: none; border-color: var(--accent); }
.cfg-del {
    flex: 0 0 auto;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.2rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
}
.cfg-del svg { width: 14px; height: 14px; }
.cfg-del:hover { color: #c0392b; background: var(--accent-soft); }
.cfg-del[hidden] { display: none; }
.cfg-save {
    flex: 0 0 auto;
    border: 1px solid var(--accent);
    background: none;
    color: var(--accent);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.26rem 0.7rem;
    border-radius: 7px;
    cursor: pointer;
}
.cfg-save:hover { background: var(--accent); color: #fff; }
/* Keep the restore link clearly apart from the Save button */
.cfg-row .setting-restore { margin-left: auto; }
.setting-restore {
    border: none;
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}
.setting-restore:hover { color: var(--accent-hover); }

.setting-select {
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
}
.setting-row.disabled { opacity: 0.45; pointer-events: none; }
.msize-row { display: flex; align-items: center; gap: 0.6rem; }
.msize-row .op-val { min-width: 5.6em; text-align: right; }

/* Settings profiles (Profiles tab): two-line cards that fit the narrow
   settings body — name + date on top, actions beneath */
.settings-pane[data-pane="profiles"] { padding-top: 0.35rem; }
.prof-row {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.45rem 0.6rem 0.5rem;
    margin-bottom: 0.5rem;
    max-width: 100%;
    transition: border-color 0.15s;
}
.prof-row:hover { border-color: var(--accent); }
.prof-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    min-width: 0;
}
.prof-head .fav-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.prof-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.45rem;
}
.prof-actions .mc-btn { padding: 0.24rem 0.7rem; font-size: 0.75rem; }
.prof-spacer { flex: 1; }
/* Storm-total panel selects fill the panel width */
.rtot-select { display: block; width: 100%; }

/* Toggle switch */
.switch { position: relative; flex: 0 0 auto; width: 40px; height: 22px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--border);
    transition: background 0.15s ease;
    pointer-events: none;
}
.switch .slider::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease;
}
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(18px); }
.switch input:focus-visible + .slider { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Touch-device SST probe target ---------------------------------------------- */

.probe-target {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.probe-target[hidden] { display: none; }
.probe-target svg {
    width: 34px;
    height: 34px;
    color: var(--text);
    filter: drop-shadow(0 0 2px var(--bg-card));
}
.probe-readout {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 11px;
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: var(--shadow);
    white-space: nowrap;
}

/* --- Mobile -------------------------------------------------------------------- */

@media (max-width: 720px) {
    .map-panel {
        top: auto;
        left: 0.5rem;
        right: 0.5rem;
        bottom: 0.5rem;
        width: auto;
        max-height: 46dvh;
    }
    /* modals center on the viewport (the backdrop covers the headers
       too), with a small margin all around */
    .modal-backdrop { padding: 0.75rem; }
    .modal {
        max-height: calc(100dvh - 1.5rem);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    /* one scroll region: the body flexes to the remaining height and
       scrolls; .modal-scroll's own 65vh cap would fight the flex height */
    .modal-head { flex: none; }
    .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .modal-scroll { max-height: none; }
    .settings-modal .settings-layout {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }
    .settings-modal .settings-tabs { flex: none; }

    /* legend dock: top-down stack in the upper-left corner; cards start
       collapsed and open one at a time (accordion, enforced in JS) */
    .legend-dock {
        top: 0.5rem;
        left: 0.5rem;
        right: auto;
        bottom: auto;
        flex-direction: column;
        align-items: flex-start;
    }
    .legend-card { width: auto; }
    .legend-card:not(.collapsed) { width: min(216px, calc(100vw - 1rem)); }
    .legend-dock .sst-legend { width: min(216px, calc(100vw - 1rem)); }
}

/* ==========================================================================
   Edge-bar layout offsets — MUST stay last: everything the bars displace
   (map controls, legend dock, the app area, sheet and loop bar on mobile)
   is shifted here, after all of their own positioning rules.
   ========================================================================== */

.tropics-app .maplibregl-ctrl-top-right { right: var(--bars-w, 0px); }
.layer-control { right: calc(3.6rem + var(--bars-w, 0px)); }
.legend-dock { right: calc(1rem + var(--bars-w, 0px)); }

@media (max-width: 720px) {
    /* stack: map / menu / hour slider / colorbars (viewport bottom) */
    .tropics-app { bottom: var(--bars-h, 0px); }
    .tropics-app.loop-open { bottom: calc(49px + var(--bars-h, 0px)); }
    .loop-bar { bottom: var(--bars-h, 0px); }
}

/* --- Lite Viewer (static-image storm summary) --------------------------- */
#lite-viewer {
    position: absolute;
    inset: 0;
    z-index: 15;                 /* above the map and its panel */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg);
}
#lite-viewer[hidden] { display: none; }
.lite-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 0.55rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.lite-back {
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.33rem 0.7rem;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}
.lite-back:hover { background: var(--accent-soft); }

/* "Set Lite View as default" pill: right side of the section bar, lite only
   (the section-actions icon cluster is hidden there, freeing that edge). */
.lite-default-btn {
    display: none;
    margin-left: auto;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}
body.lite-active .lite-default-btn { display: inline-block; }
.lite-default-btn:hover { background: var(--accent-soft); }
.lite-default-btn.active { color: var(--accent); border-color: var(--accent); }

/* Favorite views: modal + view box */
.fav-modal { max-width: 720px; width: calc(100vw - 32px); }
.fav-active-row[hidden] { display: none; }
.fav-active-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.83rem;
    color: var(--text);
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: 10px;
    padding: 0.5rem 0.7rem;
    margin-bottom: 0.8rem;
}
.fav-active-text b { color: var(--accent); }

/* Create-new-view section: filled panel so it reads as its own section */
.fav-save-card {
    border: 1px solid var(--border);
    background: var(--bg);
    border-radius: 10px;
    padding: 0.65rem 0.7rem 0.55rem;
    margin-bottom: 1rem;
}
.fav-save-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.fav-save-row .fav-name-input { flex: 1 1 150px; }
.fav-save-row .fav-cat-input { flex: 0 1 160px; }
.fav-name-input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
}
.fav-name-input:focus { outline: none; border-color: var(--accent); }
.fav-name-input.invalid, .fav-name-input.invalid:focus { border-color: #c0392b; }
.fav-save-cta {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.fav-save-cta:disabled { opacity: 0.45; cursor: not-allowed; }
.fav-hint { font-size: 0.75rem; color: var(--text-muted); margin: 0.45rem 0 0; }

/* Category filter chips */
.fav-cats { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.6rem; }
.fav-cats button {
    border: 1px solid var(--border);
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0.16rem 0.6rem;
    border-radius: 999px;
    cursor: pointer;
}
.fav-cats button:hover { border-color: var(--accent); color: var(--text); }
.fav-cats button.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Saved-view cards */
.fav-list-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.45rem;
}
.fav-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.55rem;
}
.fav-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s;
}
.fav-card:hover { border-color: var(--accent); }
.fav-card.active { border-color: var(--accent); }

/* Title band: distinct background, name + row actions */
.fav-card-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    background: var(--accent-soft);
    padding: 0.4rem 0.7rem;
    border-bottom: 1px solid var(--border);
}
.fav-card.active .fav-card-head { background: var(--accent); }
.fav-card.active .fav-card-head .fav-name { color: #fff; }
.fav-card.active .fav-card-head .fav-mini { color: rgba(255,255,255,0.85); }
.fav-card.active .fav-card-head .fav-mini:hover { color: #fff; background: rgba(255,255,255,0.18); }
.fav-name {
    font-weight: 600;
    font-size: 0.87rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.fav-badge {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    white-space: nowrap;
}
.fav-badge-sub {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fav-meta { font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; }
.fav-cat-tag {
    font-size: 0.68rem;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.08rem 0.45rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Drag-to-rearrange */
.fav-card[draggable="true"] .fav-card-head { cursor: grab; }
.fav-card.dragging { opacity: 0.45; }
.fav-card.drop-before { box-shadow: -3px 0 0 0 var(--accent); }
.fav-card.drop-after { box-shadow: 3px 0 0 0 var(--accent); }
.fav-row-btns { margin-left: auto; display: flex; gap: 0.15rem; flex: 0 0 auto; }
.fav-mini {
    border: none;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.72rem;
    cursor: pointer;
    padding: 0.2rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
}
.fav-mini svg { width: 14px; height: 14px; }
.fav-mini:hover { color: var(--text); background: var(--bg-card); }
.fav-del:hover, .fav-del.armed { color: #c0392b; }
.fav-del.armed { font-weight: 700; }

/* Body: badge + saved date on one line, then the load control */
.fav-card-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    padding: 0.45rem 0.6rem 0.5rem;
    min-width: 0;
    flex: 1;
}
.fav-card-loadrow {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    margin-top: auto;
}
.fav-card-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    min-width: 0;
}
.fav-card-body .fav-target { width: 100%; min-width: 0; }
.fav-load-btn {
    width: 100%;
    justify-content: center;
    padding-top: 0.28rem;
    padding-bottom: 0.28rem;
}
.fav-none { font-size: 0.78rem; color: var(--text-muted); }
.fav-current {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent);
    text-align: center;
    padding: 0.2rem 0;
}
.fav-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.83rem;
    line-height: 1.5;
    padding: 1.2rem 0 0.8rem;
}
.fav-empty-star { display: block; font-size: 1.5rem; color: var(--accent); opacity: 0.5; }

/* View-box Save button */
/* Replaces the storm-detail tab strip while a favorite view is active */
.fav-view-box[hidden] { display: none; }
.fav-view-box {
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}
.fav-view-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.4rem 0.4rem 0.7rem;
}
.fav-view-note {
    font-size: 0.73rem;
    line-height: 1.35;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.45); /* a lighter shade of the box blue */
    padding: 0.3rem 0.7rem 0.35rem;
}
[data-theme="dark"] .fav-view-note { background: rgba(255, 255, 255, 0.06); }

/* Same session-only reminder at the top of the settings modal */
.fav-settings-note {
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text);
    background: var(--accent-soft);
    border-bottom: 1px solid var(--border);
    padding: 0.45rem 1rem;
}
.fav-settings-note .fav-chip-star { color: var(--accent); margin-right: 0.25rem; }
.fav-settings-note[hidden] { display: none; }
.fav-view-box .fav-chip-star { color: var(--accent); }
.fav-view-name {
    font-weight: 600;
    font-size: 0.87rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.fav-view-exit { flex: 0 0 auto; }

.fav-view-save {
    flex: 0 0 auto;
    border: 1px solid var(--accent);
    background: none;
    color: var(--accent);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.12rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.fav-view-save:hover { background: var(--accent); color: #fff; }

/* Edit-view modal */
.fav-edit-modal { max-width: 340px; width: calc(100vw - 32px); }
.fav-edit-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.7rem;
}
.fav-edit-label .fav-name-input,
.fav-edit-label .setting-select { display: block; width: 100%; margin-top: 0.25rem; }
#fav-edit-newcat { width: 100%; margin: -0.35rem 0 0.7rem; }
.fav-edit-err {
    font-size: 0.76rem;
    color: #c0392b;
    margin: -0.45rem 0 0.7rem;
}

/* Unsaved-changes prompt */
.fav-confirm-modal { max-width: 380px; width: calc(100vw - 32px); }
.fav-confirm-text { font-size: 0.88rem; margin: 0 0 0.9rem; }
.fav-confirm-btns { display: flex; gap: 0.5rem; justify-content: flex-end; }
.lite-storms { display: flex; flex-wrap: wrap; gap: 0.4rem; flex: 1; }
.lite-storm-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.33rem 0.75rem;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}
.lite-storm-chip:hover { color: var(--text); }
.lite-storm-chip.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.lite-storm-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; flex: 0 0 auto; }
.lite-body {
    max-width: 1360px;
    margin: 0 auto;
    padding: 1rem 0.9rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.lite-empty { text-align: center; color: var(--text-muted); padding: 3rem 1rem; font-weight: 600; }
/* Home view has no back button / chips — hide the sticky header entirely */
#lite-viewer.lite-home .lite-head { display: none; }
/* Home: grouped storm list left of the overview map (wide); stacked with
   the map on top when narrow. The list gets the larger share of the width. */
.lite-home-cols { display: flex; gap: 1.1rem; align-items: flex-start; }
/* full-width boxes in a narrow list column, beside the wider map */
.lite-home-list { flex: 0 0 320px; display: flex; flex-direction: column; }
.lite-home-map { flex: 1; min-width: 0; }
.lite-home-map .lite-img { max-width: 100%; } /* overview fills its column */
/* Storm boxes: white (dark-mode card), borderless, larger text */
.lite-home-list .sys-card {
    background: var(--bg-card);
    border-color: transparent;
    margin-bottom: 0.45rem;
    padding: 0.6rem 0.8rem;
}
.lite-home-list .sys-card:hover { background: var(--accent-soft); }
.lite-home-list .sys-name { font-size: 1.1rem; }
.lite-home-list .sys-meta { font-size: 0.88rem; }
@media (max-width: 800px) {
    .lite-home-cols { flex-direction: column; }
    .lite-home-list { order: 2; flex: none; width: 100%; }
    .lite-home-map { order: 1; width: 100%; }
}
/* Lite Viewer storm nav in the section bar — narrow viewports only. */
.lite-nav { display: none; align-items: center; gap: 0.35rem; }
.lite-nav-back {
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font: inherit;
    font-size: 1.05rem;
    line-height: 1;
    padding: 0.22rem 0.55rem;
    border-radius: 7px;
    cursor: pointer;
}
.lite-nav-back:hover { background: var(--accent); color: #fff; }
.lite-nav #lite-storm-select { max-width: 46vw; }
@media (max-width: 720px) {
    /* Section-actions are hidden in the Lite Viewer, so let the left group span
       the bar and push the back arrow + storm picker to the right edge. */
    body.lite-active .section-bar-left { flex: 1 1 auto; }
    .lite-nav:not([hidden]) { display: flex; margin-left: auto; }
    #lite-viewer .lite-head { display: none; }
}
/* Storm detail header: name + latest update (left) and intensity stats
   (right); centered and stacked on narrow viewports. */
.lite-storm-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}
.lite-storm-name {
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--text);
}
.lite-storm-cat { margin-top: 0.3rem; }
.lite-storm-cat .risk-badge { font-size: 0.92rem; padding: 0.14rem 0.62rem; }
.lite-storm-update {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 0.2rem;
    font-variant-numeric: tabular-nums;
}
.lite-storm-stats { display: flex; flex-direction: column; gap: 0.22rem; min-width: 230px; }
.lite-stat { display: flex; justify-content: space-between; gap: 1rem; }
.lite-stat-k {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.lite-stat-v {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 800px) {
    .lite-storm-head { flex-direction: column; align-items: center; text-align: center; }
    .lite-storm-stats { min-width: 0; }
    .lite-stat { justify-content: center; gap: 0.5rem; }
}
.lite-title { font-size: 1.15rem; font-weight: 800; color: var(--text); margin: 0.2rem 0; }
.lite-sub { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.4rem; }
.lite-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-card);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.lite-card-head {
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--border);
}
.lite-card-body { padding: 0.8rem; }
.lite-toggle { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.6rem; }
.lite-toggle button {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.28rem 0.7rem;
    border-radius: 7px;
    cursor: pointer;
}
.lite-toggle button:hover { color: var(--text); }
.lite-toggle button.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.lite-toggle .lite-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.28rem 0.42rem;
    color: var(--accent);
}
.lite-toggle .lite-info-btn svg { width: 16px; height: 16px; }
.lite-toggle .lite-info-btn:hover {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}
.lite-img {
    display: block;
    width: 100%;
    /* a lone image (single-item grid or a toggle card) shouldn't balloon on
       wide viewports — cap it and keep it centered; two-up columns are
       already narrower than this, so they're unaffected */
    max-width: 760px;
    height: auto;
    margin: 0 auto;
    border-radius: 8px;
    background: var(--bg);
    cursor: zoom-in;
}
/* A lone image in a storm section (single toggle panel — not the two-up panels,
   which sit inside .lite-two) is capped a touch smaller, trimming its maximum
   height. The home overview keeps its full-width fill. */
#lite-viewer:not(.lite-home) .lite-card-body > .lite-panel .lite-img {
    max-width: 700px;
}
.lite-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 0.9rem;
}
.lite-grid figure { margin: 0; }
/* Grand-ensemble card: all three side by side above 1100px, single-image
   toggle below it. Two-class selectors so they beat the base .lite-grid /
   .lite-panel display rules regardless of source order. */
.lite-grid.lite-triple-wide { display: none; }
@media (min-width: 1100px) {
    .lite-grid.lite-triple-wide { display: grid; grid-template-columns: repeat(3, 1fr); }
    .lite-panel.lite-triple-narrow { display: none; }
}
/* two side-by-side blocks (toggle panels or figures) that stack on narrow */
.lite-two { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.lite-two > * { flex: 1 1 300px; min-width: 0; margin: 0; }
.lite-panel { display: flex; flex-direction: column; position: relative; }
/* While the image is still loading, reserve space and show a spinner in place
   of an empty section. */
.lite-panel.lite-loading { min-height: 220px; }
.lite-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38px;
    height: 38px;
    margin: -19px 0 0 -19px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: loop-spin 0.8s linear infinite;
}
.lite-grid figcaption,
.lite-two figcaption {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    margin-top: 0.4rem;
    text-align: center;
}
/* In the Lite Viewer, hide the map action buttons (SST/draw/settings) and
   the colorbars (which otherwise peek out below the overlay's mobile strip). */
body.lite-active .section-actions { display: none; }
body.lite-active .edge-bars { display: none; }
@media (max-width: 720px) {
    body.lite-active .tropics-app { bottom: 0; }
}


/* --- Docked side menu (Settings -> Website) ------------------------------
   The floating panel glues to the left viewport edge at full map height and
   the map shrinks beside it. Desktop only: the phone layout keeps its
   bottom-sheet panel. --dock-w tracks the panel's width variants. */
@media (min-width: 721px) {
    body.panel-docked .tropics-app { --dock-w: 315px; }
    body.panel-docked .tropics-app:has(.map-panel.wide) { --dock-w: 423px; }
    body.panel-docked .tropics-app:has(.map-panel.ships-wide) { --dock-w: 430px; }
    body.panel-docked .tropics-app:has(.map-panel.dock-hidden) { --dock-w: 0px; }
    body.panel-docked #map { left: var(--dock-w); }
    body.panel-docked .map-panel {
        top: 0;
        left: 0;
        bottom: 0;
        border-radius: 0;
        border-top: none;
        border-left: none;
        border-bottom: none;
        box-shadow: none;
        max-height: none;
    }
    body.panel-docked .map-panel.dock-hidden { display: none; }
    body.panel-docked .tropics-app:has(.map-panel.dock-hidden) #panel-reopen {
        display: flex;
    }
}
#panel-reopen {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 10;
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-card);
    color: var(--text);
    box-shadow: var(--shadow);
    cursor: pointer;
}
#panel-reopen svg { width: 19px; height: 19px; }
#panel-reopen:hover { background: var(--accent-soft); }