/* ══════════════════════════════════════════════════════════════
   Global TC Archive — Styles
   Uses CSS variables from tc_radar_styles.css
   ══════════════════════════════════════════════════════════════ */

/* ── Active nav highlight ─────────────────────────────────── */
.ga-nav-active {
    color: var(--um-green) !important;
    background: rgba(244, 115, 33, 0.08) !important;
}

/* ── Tab bar ──────────────────────────────────────────────── */
.ga-tabs {
    display: flex;
    gap: 2px;
    padding: 6px 24px 0;
    background: var(--navy);
    border-bottom: 1px solid var(--border);
    position: relative;
    z-index: 1;
}
.ga-tab {
    padding: 10px 20px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--slate);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.01em;
}
.ga-tab:hover {
    color: var(--text);
    background: rgba(15, 22, 35,0.03);
}
.ga-tab.active {
    color: var(--um-green);
    border-bottom-color: var(--um-green);
}
/* Cross-page tab — TC Climatology lives on its own page, but is shown
   here in the tab strip so users discover the destination without
   leaving the tab metaphor. Styled subtly different so the navigation
   nature is visible (text-decoration: none keeps it from underlining
   like a default link). */
.ga-tab-link {
    text-decoration: none;
    color: var(--slate);
    background: transparent;
    border-bottom: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 20px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.2s;
    letter-spacing: 0.01em;
}
.ga-tab-link:hover {
    color: var(--text);
    background: rgba(15, 22, 35,0.03);
}

/* ── Tab content ──────────────────────────────────────────── */
.ga-tab-content {
    display: none;
}
.ga-tab-content.active {
    display: block;
}

/* ── Common elements ──────────────────────────────────────── */
.ga-spinner {
    width: 24px;
    height: 24px;
    /* slate-400 @ 40 % alpha — visible on both light and dark surfaces.
       Theme-aware var(--border) was too low-contrast on dark navy. */
    border: 3px solid rgba(148, 163, 184, 0.4);
    border-top-color: var(--cyan);
    border-radius: 50%;
    animation: ga-spin 0.8s linear infinite;
}
@keyframes ga-spin {
    to { transform: rotate(360deg); }
}

.ga-input {
    width: 100%;
    padding: 7px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    outline: none;
    transition: border-color 0.2s;
}
.ga-input:focus {
    border-color: var(--blue);
}
.ga-input-sm {
    padding: 5px 8px;
    font-size: 0.78rem;
}
.ga-input::placeholder {
    color: var(--text-dim);
}

.ga-select {
    width: 100%;
    padding: 7px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    outline: none;
    transition: border-color 0.2s;
    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 12 12'%3E%3Cpath fill='%238b9ec2' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}
.ga-select:focus {
    border-color: var(--blue);
}
.ga-select option {
    background: var(--navy);
    color: var(--text);
}

input[type="range"].ga-range {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: relative !important;
    pointer-events: auto !important;
    transform: none !important;
    top: auto !important;
    width: 100%;
    height: 4px;
    background: var(--surface);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    margin: 6px 0;
}
input[type="range"].ga-range::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    pointer-events: auto !important;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--um-green);
    cursor: pointer;
    border: 2px solid var(--navy);
    margin-top: -5px;
}
input[type="range"].ga-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--um-green);
    cursor: pointer;
    border: 2px solid var(--navy);
}

.ga-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    width: 100%;
}
.ga-btn-primary {
    background: var(--um-green);
    color: #ffffff;
}
.ga-btn-primary:hover { background: var(--um-green-deep); }
.ga-btn-secondary {
    background: var(--surface);
    color: var(--slate);
    border: 1px solid var(--border);
}
.ga-btn-secondary:hover { color: var(--text); border-color: var(--border-light); }
.ga-btn-ghost {
    background: transparent;
    color: var(--slate);
    padding: 6px 12px;
    width: auto;
}
.ga-btn-ghost:hover { color: var(--text); }
.ga-btn-sm {
    padding: 5px 12px;
    font-size: 0.78rem;
    width: auto;
}

.ga-select-sm {
    padding: 4px 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.76rem;
    cursor: pointer;
}

.mono {
    font-variant-numeric: tabular-nums;
}

.panel-badge {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--um-green);
    background: rgba(244, 115, 33,0.1);
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
    vertical-align: middle;
    transition: color 0.2s, background 0.2s;
}

/* Per-frame IR source badges */
.ir-source-mergir {
    color: #F47321;
    background: rgba(244, 115, 33,0.1);
}
.ir-source-gridsat {
    color: #facc15;
    background: rgba(250,204,21,0.1);
}
.ir-source-hursat {
    color: #6d28d9;
    background: rgba(167,139,250,0.1);
}
/* Pulsing border when frame fell back from preferred source */
.ir-source-fallback {
    border: 1px solid currentColor;
    animation: fallback-pulse 2s ease-in-out 1;
}
@keyframes fallback-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ── Toast ────────────────────────────────────────────────── */
.ga-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 24px;
    background: var(--surface-raised);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.82rem;
    font-weight: 500;
    z-index: 9999;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    animation: ga-toast-in 0.3s ease;
}
@keyframes ga-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ══════════════════════════════════════════════════════════════
   TAB 5: ENVIRONMENT — launch card for climatology_globe.html
   ══════════════════════════════════════════════════════════════
   The full ERA5 climatology globe lives on its own page so the
   vendored GC-ATLAS engine runs un-scoped (no #tab-environment
   prefix work, no CSS-variable remap fights, no flex layout
   conflicts with the outer Global Archive shell). This tab is a
   simple landing card with an "Open Climatology Globe →" button. */
.climgl-launch {
    padding: 32px 24px;
    display: flex;
    justify-content: center;
}
.climgl-launch-card {
    max-width: 760px;
    display: flex;
    gap: 28px;
    align-items: flex-start;
    padding: 28px 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.climgl-launch-icon {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(74, 155, 110, 0.08);
    border: 1px solid rgba(244, 115, 33, 0.25);
}
.climgl-launch-icon svg {
    width: 80px;
    height: 80px;
}
.climgl-launch-body {
    flex: 1;
    min-width: 0;
}
.climgl-launch-title {
    margin: 0 0 8px;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text);
}
.climgl-launch-lede {
    margin: 0 0 14px;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-dim);
}
.climgl-launch-bullets {
    margin: 0 0 20px;
    padding-left: 20px;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-dim);
}
.climgl-launch-bullets li {
    margin-bottom: 4px;
}
.climgl-launch-btn {
    display: inline-block;
    padding: 10px 20px;
    background: var(--blue);
    color: var(--navy);
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
    box-shadow: 0 0 0 0 rgba(244, 115, 33, 0);
}
.climgl-launch-btn:hover {
    background: var(--um-green);
    transform: translateY(-1px);
    box-shadow: 0 0 0 4px rgba(244, 115, 33, 0.18);
}

@media (max-width: 640px) {
    .climgl-launch-card {
        flex-direction: column;
        gap: 16px;
        padding: 20px;
    }
    .climgl-launch-icon { width: 72px; height: 72px; }
    .climgl-launch-icon svg { width: 56px; height: 56px; }
}

/* ══════════════════════════════════════════════════════════════
   TAB 1: STORM BROWSER
   ══════════════════════════════════════════════════════════════ */

.browser-layout {
    display: flex;
    height: calc(100vh - 52px - 42px); /* viewport minus topbar minus tabs */
}
.browser-map-wrap {
    flex: 1;
    position: relative;
    min-width: 0;
}
#storm-map {
    width: 100%;
    height: 100%;
    background: var(--navy);
}
.map-overlay-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--slate);
    font-size: 0.85rem;
    z-index: 500;
}

.browser-sidebar {
    width: 300px;
    min-width: 300px;
    background: var(--navy);
    border-left: 1px solid var(--border);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.sidebar-section {
    padding: 16px;
    border-bottom: 1px solid var(--border);
}
.sidebar-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.filter-label {
    display: block;
    font-size: 0.72rem;
    color: var(--text-dim);
    font-weight: 500;
    margin: 10px 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.basin-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.basin-chip {
    padding: 3px 10px;
    border-radius: 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--surface);
    color: var(--slate);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.15s;
}
.basin-chip:hover {
    border-color: var(--blue);
    color: var(--text);
}
.basin-chip.active {
    background: var(--blue);
    color: white;
    border-color: var(--blue);
}

.filter-row {
    display: flex;
    gap: 8px;
}
.filter-col {
    flex: 1;
}

.intensity-filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.intensity-scale {
    position: relative;
    height: 16px;
    margin: 0 7px;
}
.scale-tick {
    position: absolute;
    transform: translateX(-50%);
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-dim);
    letter-spacing: 0;
}
/* Intensity scale ticks (TD/TS/C1–C5) overlap below ~480 px because
   they're absolutely positioned at fixed percentages on a narrow
   container. Drop the "TD" label (rest stay legible at 0.78rem) and
   bump the others so they read on phone screens. */
@media (max-width: 480px) {
    .scale-tick { font-size: 0.78rem; }
    /* Hide TD (the second tick at 18%); it sits too close to TS (35%)
       to remain legible at the larger font on phone widths. */
    .intensity-scale .scale-tick:nth-child(2) { display: none; }
}
.range-value-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.range-label {
    font-size: 0.72rem;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}

.filter-actions {
    margin-top: 12px;
}

.filter-stats-section {
    padding: 12px 16px;
}
.filter-stats {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 0.82rem;
}
.stat-highlight {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--um-green);
    font-variant-numeric: tabular-nums;
}
.stat-of {
    color: var(--text-dim);
}
.stat-label-inline {
    color: var(--slate);
}

/* View toggle (cluster / tracks) */
.view-toggle {
    display: flex;
    gap: 4px;
    margin-top: 10px;
}
.view-toggle-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-dim);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.view-toggle-btn:hover {
    border-color: var(--blue);
    color: var(--text);
}
.view-toggle-btn.active {
    background: var(--blue);
    border-color: var(--blue);
    color: #ffffff;
}

/* Floating map storm card */
.map-storm-card {
    position: absolute;
    bottom: 16px;
    left: 16px;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--um-orange);
    border-radius: 10px;
    padding: 12px 14px 10px;
    min-width: 220px;
    max-width: 280px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 6px 22px var(--border-light);
    animation: ga-toast-in 0.25s ease;
}
.map-storm-card-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    color: var(--slate);
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}
.map-storm-card-close:hover {
    color: var(--text);
}
.map-storm-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-right: 18px;
}
.map-storm-card-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.map-storm-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    margin-bottom: 10px;
}
.map-card-stat {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
}
.map-card-stat-label {
    color: var(--text-dim);
    font-weight: 500;
}
.map-card-stat-value {
    color: var(--text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
}
.map-storm-card-btn {
    display: block;
    width: 100%;
    background: var(--um-green);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s, transform 0.1s;
    letter-spacing: 0.3px;
}
.map-storm-card-btn:hover {
    background: var(--um-green-deep);
    transform: translateY(-1px);
}
.map-storm-card-btn:active {
    transform: translateY(0);
}

/* Storm card (sidebar) */
.storm-card {
    animation: ga-toast-in 0.2s ease;
}
.storm-detail-pulse {
    animation: detail-btn-glow 2s ease-in-out 0.3s 3;
}
@keyframes detail-btn-glow {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 12px rgba(244, 115, 33, 0.5), 0 0 24px rgba(74, 155, 110, 0.25); }
}
.storm-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.storm-card-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.storm-card-meta {
    margin-bottom: 12px;
}
.card-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.78rem;
    border-bottom: 1px solid var(--border);
}
.card-row:last-child { border-bottom: none; }
.card-label {
    color: var(--slate);
    font-weight: 500;
}
.card-value {
    color: var(--text);
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   TAB 2: STORM DETAIL
   ══════════════════════════════════════════════════════════════ */

.detail-layout {
    padding: 16px 24px;
    max-width: 1600px;
    margin: 0 auto;
}
.detail-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.detail-header-row {
    display: flex;
    align-items: baseline;
    gap: 20px;
    flex-wrap: wrap;
}
.detail-back-btn { flex-shrink: 0; }
.detail-header-title-group {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}
.detail-storm-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.detail-storm-subtitle {
    font-size: 0.82rem;
    color: var(--slate);
}

.detail-grid {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 16px;
    margin-bottom: 16px;
}

.detail-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.panel-header h3 {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
    margin-right: auto;
}
/* Each toolbar group keeps its button + status pinned together;
   space-between would let the status text shove buttons around,
   so we use a flex group with a fixed gap instead. */
.panel-header > div { display: flex; align-items: center; gap: 6px; }

.chart-container {
    width: 100%;
    height: 350px;
}
.chart-tall {
    height: 380px;
}

.detail-map-panel {
    /* Let the map panel span full width when IR is active */
}
.detail-map-ir-row {
    display: flex;
    gap: 0;
}
.detail-map-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}
.detail-map-container {
    width: 100%;
    height: 450px;
    background: var(--navy);
}

/* ── IR Map Overlay ──────────────────────────────────────── */

/* Toggle button in panel header */
.ir-toggle-btn {
    font-size: 0.72rem;
    padding: 3px 10px;
}
.ir-toggle-btn.active {
    background: var(--blue);
    color: #ffffff;
}

/* ── IR Vertical Colorbar Strip (right of map) ───────────── */
.ir-cbar-strip {
    flex-shrink: 0;
    width: 28px;
    height: 450px;  /* Match detail-map-container */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 2px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--border);
    border-left: none;
    border-radius: 0 6px 6px 0;
    gap: 2px;
    overflow: hidden;
}
.ir-cbar-strip canvas {
    flex: 1;
    width: 12px;
    min-height: 0;
    border-radius: 3px;
    border: 1px solid rgba(15, 22, 35,0.15);
    image-rendering: auto;
}
.ir-cbar-label-top,
.ir-cbar-label-bot {
    font-size: 0.48rem;
    color: rgba(180, 195, 220, 0.6);
    line-height: 1;
    white-space: nowrap;
}

/* ── IR Compact Playback Bar (below map) ─────────────────── */
.ir-bar {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    z-index: auto !important;
    display: block !important;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 8px;
    margin-top: 2px;
}
.ir-bar-row1 {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    min-height: 22px;
}
.ir-bar-row1 .ir-frame-info {
    font-size: 0.7rem;
    white-space: nowrap;
}
.ir-bar-slider {
    flex: 1;
    min-width: 60px;
}
.ir-bar-row1 .ir-datetime {
    font-size: 0.68rem;
    white-space: nowrap;
}
.ir-bar-row2 {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    flex-wrap: wrap;
}
.ir-cmap-label {
    font-size: 0.62rem;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-right: 2px;
}
.ir-bar-row2 .ir-cmap-btn {
    font-size: 0.65rem;
    padding: 1px 5px;
}
.ir-peak-btn {
    background: rgba(251,191,36,0.14);
    border: 1px solid rgba(251,191,36,0.4);
    color: #a16207;
    white-space: nowrap;
}
.ir-peak-btn:hover {
    background: rgba(251,191,36,0.28);
    border-color: rgba(251,191,36,0.65);
}

/* Legacy horizontal fallback classes (kept for tc_radar compat) */
.ir-map-controls:not(.ir-sidebar) {
    display: block !important;
    position: relative;
    background: var(--surface-raised);
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-top: 4px;
    overflow: visible;
}
.ir-map-info {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 0.78rem;
    flex-wrap: wrap;
    min-height: 0;
}
.ir-map-playback {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}
.ir-slider-row {
    margin-top: 4px;
    padding: 0 2px;
}
.ir-slider-row .ir-slider {
    width: 100%;
}
.ir-map-options {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.ir-step-btn {
    font-size: 0.65rem;
    padding: 2px 6px;
    line-height: 1;
}
.ir-opacity-btn {
    font-size: 0.68rem;
    padding: 2px 8px;
    min-width: 42px;
    text-align: center;
}
.ir-follow-btn {
    font-size: 0.85rem;
    padding: 2px 7px;
    line-height: 1;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.ir-follow-btn.active {
    opacity: 1;
    background: rgba(0, 180, 255, 0.25);
    border-color: rgba(0, 180, 255, 0.6);
}

/* Colormap selector row — own line below options */
.ir-cmap-row {
    margin-top: 4px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.ir-cmap-group {
    display: inline-flex;
    gap: 2px;
    flex-wrap: wrap;
}
.ir-cmap-btn {
    font-size: 0.7rem;
    padding: 2px 6px;
    line-height: 1;
    opacity: 0.5;
    transition: opacity 0.15s, background 0.15s;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.ir-cmap-btn.active {
    opacity: 1;
    background: rgba(0, 180, 255, 0.25);
    border-color: rgba(0, 180, 255, 0.6);
}

/* ── NEXRAD 88D Overlay ─────────────────────────────────────── */

#ga-nexrad-controls select {
    cursor: pointer;
}
#ga-nexrad-controls select:hover {
    border-color: rgba(34, 197, 94, 0.5);
}

#ir-gif-btn {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.3);
}
#ir-gif-btn:hover {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.5);
}

/* ── GIF Settings Panel ──────────────────────────────────── */
.gif-settings-panel {
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(0, 180, 255, 0.3);
    border-radius: 10px;
    padding: 16px 20px;
    width: 340px;
    max-width: 90vw;
}
@media (max-width: 480px) {
    .gif-settings-panel { padding: 12px 14px; }
}
.gif-settings-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
    text-align: center;
    letter-spacing: 0.03em;
}
.gif-settings-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.gif-settings-row > label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--slate);
    min-width: 85px;
    flex-shrink: 0;
}
.gif-settings-row select {
    flex: 1;
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 4px 8px;
    font-size: 0.72rem;
    font-family: inherit;
}
.gif-range-sliders {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}
.gif-range-sliders .ga-range {
    flex: 1;
    height: 4px;
}
.gif-range-lbl {
    font-size: 0.65rem;
    font-variant-numeric: tabular-nums;
    color: var(--slate);
    min-width: 24px;
    text-align: center;
}
.gif-range-sep {
    font-size: 0.65rem;
    color: var(--slate);
}
.gif-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.gif-toggle {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
}
.gif-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.gif-toggle-slider {
    position: absolute;
    inset: 0;
    background: rgba(15, 22, 35,0.1);
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.2s;
}
.gif-toggle-slider::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    left: 2px;
    bottom: 2px;
    background: #8899aa;
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}
.gif-toggle input:checked + .gif-toggle-slider {
    background: rgba(0, 180, 255, 0.3);
}
.gif-toggle input:checked + .gif-toggle-slider::before {
    transform: translateX(14px);
    background: var(--um-green);
}
.gif-toggle-label {
    font-size: 0.68rem;
    color: var(--slate);
}
.gif-frame-estimate {
    font-size: 0.68rem;
    color: var(--slate);
    text-align: center;
    margin: 8px 0 4px;
    font-variant-numeric: tabular-nums;
}
.gif-settings-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}
.gif-export-go {
    background: rgba(251, 191, 36, 0.15) !important;
    color: #fbbf24 !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
    font-weight: 700 !important;
}
.gif-export-go:hover {
    background: rgba(251, 191, 36, 0.25) !important;
}

/* ── Model Forecast Overlay ──────────────────────────────── */
.model-filter-btn {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--slate);
    transition: all 0.2s;
}
.model-filter-btn.active {
    background: rgba(116, 185, 255, 0.15);
    color: #1d4ed8;
    border-color: rgba(116, 185, 255, 0.4);
}
.model-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    padding: 2px 0 0;
}
.model-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    line-height: 1.4;
}
.model-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 3px;
    border-radius: 1px;
    flex-shrink: 0;
}
.model-forecast-track {
    pointer-events: none;
}

/* IR brightness temperature colorbar */
.ir-colorbar-row {
    margin-top: 5px;
    max-width: 100%;
}
#ir-colorbar-canvas {
    width: 100%;
    height: 10px;
    border-radius: 3px;
    border: 1px solid rgba(15, 22, 35,0.15);
    image-rendering: auto;
    display: block;
}
.ir-colorbar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    font-family: 'DM Sans', sans-serif;
    color: rgba(180, 195, 220, 0.65);
    padding-top: 2px;
    line-height: 1;
}

/* Loading spinner overlay on map */
.ir-map-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 810;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.ir-loading-text {
    color: var(--text-muted, #8899aa);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
    max-width: 220px;
    line-height: 1.4;
}

/* Info elements */
.ir-datetime {
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 0.78rem;
    white-space: nowrap;
}
.ir-frame-info {
    color: var(--slate);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    white-space: nowrap;
}
.ir-status {
    font-size: 0.72rem;
    color: var(--text-dim);
    margin-left: auto;
}
/* Leaflet image overlay for IR — crisp nearest-neighbor for sharp pixels.
   Combined with server-side NEAREST upscale (4x for 8km, 3x for 4km),
   this preserves clean pixel boundaries at all zoom levels. */
.ir-overlay-image {
    image-rendering: pixelated;
    image-rendering: crisp-edges;  /* Firefox fallback */
}

/* ══════════════════════════════════════════════════════════════
   TAB 3: CLIMATOLOGY
   ══════════════════════════════════════════════════════════════ */

.clim-layout {
    padding: 16px 24px;
    max-width: 1600px;
    margin: 0 auto;
}
.clim-header {
    margin-bottom: 16px;
}
.clim-header h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 4px;
}
.clim-subtitle {
    font-size: 0.82rem;
    color: var(--slate);
    margin: 0;
}

.clim-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.clim-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: 16px;
}
.clim-panel-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 8px;
}
.clim-panel-clickable {
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.clim-panel-clickable:hover {
    border-color: var(--blue);
    box-shadow: 0 0 0 1px var(--blue);
}

/* ══════════════════════════════════════════════════════════════
   ACE DRILL-DOWN MODAL
   ══════════════════════════════════════════════════════════════ */


/* CRITICAL: Force Leaflet containers to create their own stacking context.
   Without this, Leaflet sets marker z-indices based on latitude (can reach millions),
   and since .leaflet-container has position:relative but z-index:auto by default,
   those marker z-indices compete in the ROOT stacking context — above our modals.
   Setting z-index:0 contains all internal z-indices within the map. */
.leaflet-container {
    z-index: 0 !important;
}

.ace-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ace-fade-in 0.2s ease;
}
@keyframes ace-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ace-modal-content {
    background: var(--navy);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    width: 92vw;
    max-width: 1200px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
    animation: ace-slide-up 0.25s ease;
}
@keyframes ace-slide-up {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.ace-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.ace-modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.ace-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--slate);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.15s;
}
.ace-modal-close:hover {
    color: var(--text);
}

.ace-modal-body {
    padding: 16px 20px 20px;
}

.ace-basin-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.ace-basin-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ace-basin-chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.ace-chart-wrap {
    margin-bottom: 16px;
}

.ace-section-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 8px;
}
.ace-hint {
    font-weight: 400;
    font-size: 0.72rem;
    color: var(--text-dim);
    text-transform: none;
    letter-spacing: 0;
}

.ace-year-detail {
    border-top: 1px solid var(--border);
    padding-top: 16px;
    animation: ace-fade-in 0.2s ease;
}

.ace-year-table {
    margin-top: 12px;
    max-height: 320px;
    overflow-y: auto;
}
.ace-year-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}
.ace-year-table thead th {
    text-align: left;
    padding: 6px 10px;
    font-weight: 600;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.68rem;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--navy);
}
.ace-year-table tbody td {
    padding: 5px 10px;
    color: var(--text);
    border-bottom: 1px solid rgba(15, 22, 35,0.03);
}
.ace-year-table tbody tr:hover {
    background: rgba(15, 22, 35,0.03);
}
.ace-year-table .ace-bar-cell {
    position: relative;
    padding-left: 10px;
}
.ace-bar {
    display: inline-block;
    height: 14px;
    border-radius: 2px;
    min-width: 2px;
    vertical-align: middle;
}
.ace-storm-name {
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s;
}
.ace-storm-name:hover {
    color: var(--um-green);
}

/* Season track map inside ACE year detail */
#ace-season-map {
    height: 380px;
    border-radius: 8px;
    margin-bottom: 14px;
    background: var(--surface-raised);
    border: 1px solid var(--border);
}
.ace-track-label {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    white-space: nowrap;
}
.ace-track-label span {
    font-size: 10px;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    text-shadow: 0 0 4px rgba(0,0,0,0.18), 0 0 8px rgba(0,0,0,0.18);
    pointer-events: none;
}

/* ── IR Tb hover tooltip ────────────────────────────────────── */
.ir-tb-tooltip .leaflet-popup-content-wrapper {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(244, 115, 33, 0.40);
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.10);
    padding: 0;
}
.ir-tb-tooltip .leaflet-popup-tip {
    display: none;
}
.ir-tb-tooltip .leaflet-popup-content {
    margin: 5px 9px;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--text);
}
:root[data-theme="dark"] .ir-tb-tooltip .leaflet-popup-content-wrapper {
    background: rgba(10, 14, 26, 0.88);
    border-color: rgba(244, 115, 33, 0.25);
}
:root[data-theme="dark"] .ir-tb-tooltip .leaflet-popup-content {
    color: #e0e0e0;
}
.ir-tb-val {
    color: var(--text);
    font-weight: 600;
}
.ir-tb-sep {
    color: var(--slate);
    margin: 0 1px;
}
.ir-tb-coord {
    color: var(--slate);
    font-size: 0.72rem;
}
/* NEXRAD readout inside the IR Tb hover tooltip — theme-aware so it has
   contrast in both light and dark modes (was hard-coded light green). */
.ir-tb-nexrad {
    color: var(--um-green);
    font-weight: 600;
}
.ir-tb-nexrad-sep {
    color: var(--um-green);
    margin: 0 1px;
}

/* NEXRAD min/max value labels on the map */
.nexrad-extrema-label {
    background: rgba(15, 22, 35, 0.85);
    color: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    white-space: nowrap;
}
.nexrad-extrema-label:before {
    border-top-color: rgba(15, 22, 35, 0.85) !important;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .detail-grid {
        grid-template-columns: 1fr;
    }
    .clim-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .ace-modal-content {
        width: 98vw;
        max-height: 95vh;
    }
    .ace-modal-body {
        padding: 12px;
    }
    .ace-year-table table {
        font-size: 0.7rem;
    }
    .ace-year-table thead th,
    .ace-year-table tbody td {
        padding: 4px 6px;
    }
    .browser-layout {
        flex-direction: column;
        height: auto;
    }
    .browser-map-wrap {
        height: 50vh;
    }
    .browser-sidebar {
        width: 100%;
        min-width: auto;
        border-left: none;
        border-top: 1px solid var(--border);
    }
    .ga-tabs {
        padding: 0 12px;
        overflow-x: auto;
    }
    .ga-tab {
        padding: 8px 14px;
        white-space: nowrap;
        font-size: 0.78rem;
    }
    .detail-layout,
    .clim-layout {
        padding: 12px;
    }
    .topbar-stats {
        display: none;
    }

    /* ── IR colorbar strip: hide on mobile (colorbar goes in bar) ── */
    .ir-cbar-strip {
        display: none !important;
    }
    .ir-bar-row1 {
        flex-wrap: wrap;
        gap: 4px;
    }
    .ir-bar-row1 .ga-btn-sm {
        min-height: 32px;
        min-width: 32px;
    }
    .ir-bar-row2 {
        flex-wrap: wrap;
    }

    /* Legacy horizontal IR controls (tc_radar compat) */
    .ir-map-controls:not(.ir-sidebar) {
        padding: 6px 8px;
    }
    .ir-map-info {
        font-size: 0.7rem;
        gap: 4px;
    }
    .ir-map-playback {
        flex-wrap: wrap;
        gap: 6px;
    }
    .ir-map-playback .ga-btn-sm {
        min-height: 32px;
        min-width: 32px;
        padding: 4px 10px;
        font-size: 0.82rem;
    }
    .ir-step-btn {
        min-height: 32px;
        min-width: 32px;
        padding: 4px 8px !important;
        font-size: 0.75rem !important;
    }
    .ir-datetime {
        font-size: 0.7rem;
        width: 100%;
        margin-top: 2px;
    }
    .ir-slider-row {
        margin-top: 6px;
    }
    .ir-slider-row .ir-slider {
        width: 100%;
        height: 24px;
        -webkit-appearance: none;
    }
    .ir-map-options {
        gap: 4px;
        margin-top: 6px;
    }
    .ir-map-options .ga-btn-sm {
        min-height: 32px;
        min-width: 36px;
        padding: 4px 8px;
    }

    /* Colormap buttons: scrollable row on mobile */
    .ir-cmap-row {
        margin-top: 6px;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .ir-cmap-row::-webkit-scrollbar {
        display: none;
    }
    .ir-cmap-group {
        flex-wrap: nowrap;
        gap: 4px;
    }
    .ir-cmap-btn {
        min-height: 28px;
        min-width: 36px;
        padding: 4px 8px;
        font-size: 0.68rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Colorbar stays full-width */
    .ir-colorbar-row {
        margin-top: 6px;
    }
    .ir-colorbar-labels {
        font-size: 0.55rem;
    }

    /* Detail map height for mobile */
    .detail-map-container {
        height: 300px;
    }

    /* Panel header on mobile: wrap overlay toggles (IR/MW/Models/Ground Radar/Recon)
       onto multiple rows so they aren't clipped by .detail-panel's overflow:hidden. */
    .panel-header {
        flex-wrap: wrap;
        row-gap: 6px;
        padding: 10px 12px;
    }
    .panel-header h3 {
        flex-basis: 100%;
        margin-right: 0;
    }
    .panel-header > div {
        flex-wrap: wrap;
    }

    /* Detail header compact */
    .detail-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .detail-storm-title {
        font-size: 1.1rem;
    }

    /* Chart height on mobile */
    .chart-container {
        height: 260px;
    }
}

@media (max-width: 420px) {
    /* Extra-small phones: hide nav labels, keep logo */
    .topbar-nav a {
        font-size: 0.65rem;
        padding: 6px 6px;
    }
    .ir-map-playback .ga-btn-sm {
        padding: 4px 8px;
        font-size: 0.75rem;
    }
    .ir-datetime {
        font-size: 0.62rem;
    }
    .detail-map-container {
        height: 250px;
    }
    .chart-container {
        height: 220px;
    }
}

/* ── Leaflet overrides for dark theme ─────────────────────── */
.leaflet-popup-content-wrapper {
    background: var(--surface-raised);
    color: var(--text);
    border-radius: var(--radius);
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    border: 1px solid var(--border);
}
.leaflet-popup-tip {
    background: var(--surface-raised);
    border: 1px solid var(--border);
}
.leaflet-popup-content {
    margin: 10px 14px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    line-height: 1.5;
}
.leaflet-popup-close-button {
    color: var(--slate) !important;
}
.leaflet-popup-close-button:hover {
    color: var(--text) !important;
}

/* Marker cluster override for dark theme */
.marker-cluster-small {
    background-color: rgba(74, 155, 110,0.3);
}
.marker-cluster-small div {
    background-color: rgba(74, 155, 110,0.6);
    color: white;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.marker-cluster-medium {
    background-color: rgba(244, 115, 33,0.3);
}
.marker-cluster-medium div {
    background-color: rgba(244, 115, 33,0.6);
    color: white;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.marker-cluster-large {
    background-color: rgba(251,191,36,0.3);
}
.marker-cluster-large div {
    background-color: rgba(251,191,36,0.6);
    color: white;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Track polyline tooltip */
.track-tooltip {
    background: var(--surface-raised) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 4px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.78rem !important;
    padding: 4px 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

/* Intensity legend on map */
.ga-legend {
    background: var(--surface-raised);
    padding: 10px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    font-size: 0.72rem;
    line-height: 1.8;
    color: var(--text);
}
.ga-legend h4 {
    margin: 0 0 6px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ga-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ga-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid rgba(15, 22, 35,0.2);
    flex-shrink: 0;
}

/* ── Climatology Stats Tables (shared by all modal drill-downs) ── */
.clim-stats-table {
    background: rgba(15, 22, 35,0.02);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px;
    margin-top: 16px;
    overflow-x: auto;
}
.clim-stats-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}
.clim-stats-table thead tr {
    border-bottom: 1px solid var(--border);
}
.clim-stats-table th {
    text-align: right;
    padding: 6px 8px;
    color: var(--slate);
    font-weight: 500;
    white-space: nowrap;
}
.clim-stats-table th:first-child {
    text-align: left;
}
.clim-stats-table td {
    padding: 5px 8px;
    color: var(--text);
    text-align: right;
    border-bottom: 1px solid rgba(15, 22, 35,0.03);
}
.clim-stats-table td:first-child {
    text-align: left;
    font-weight: 500;
}
.clim-stats-table .mono {
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
}

/* ── Detail header actions ─────────────────────────────────── */
.detail-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.ga-btn-accent {
    background: var(--um-green);
    color: #ffffff;
    border: none;
}
.ga-btn-accent:hover { background: var(--um-green-deep); }
.ga-btn-radar {
    background: var(--um-orange);
    color: #ffffff;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ga-btn-radar:hover { background: var(--um-orange-deep); }
.ga-btn-xs {
    font-size: 0.68rem;
    padding: 2px 8px;
    border-radius: 4px;
    width: auto;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}
.ga-btn-xs:hover {
    background: var(--surface-raised);
    border-color: var(--border-light);
}
.ga-btn-xs.active,
.ga-sonde-pv-btn.active,
.ga-sonde-color-btn.active,
.ga-sonde-view-btn.active {
    background: var(--um-green-tint);
    color: var(--um-green);
    border-color: var(--um-green);
}

/* ── Flight-level panel buttons (Time Series / X-Sec / Radial) ──
   Theme-aware accents + visible outlines so the action buttons read
   on both light and dark surfaces. */
.ga-fl-panel-btn {
    font-size: 9px;
    border-width: 1px;
    border-style: solid;
}
#ga-fl-btn-ts {
    color: #1d4ed8;
    border-color: rgba(29, 78, 216, 0.45);
    background: rgba(29, 78, 216, 0.06);
}
#ga-fl-btn-ts:hover { background: rgba(29, 78, 216, 0.14); }
#ga-fl-btn-xsec,
#ga-fl-btn-radial {
    color: #15803d;
    border-color: rgba(21, 128, 61, 0.45);
    background: rgba(21, 128, 61, 0.06);
}
#ga-fl-btn-xsec:hover,
#ga-fl-btn-radial:hover { background: rgba(21, 128, 61, 0.14); }
[data-theme="dark"] #ga-fl-btn-ts {
    color: #93c5fd;
    border-color: rgba(147, 197, 253, 0.45);
    background: rgba(147, 197, 253, 0.10);
}
[data-theme="dark"] #ga-fl-btn-ts:hover { background: rgba(147, 197, 253, 0.20); }
[data-theme="dark"] #ga-fl-btn-xsec,
[data-theme="dark"] #ga-fl-btn-radial {
    color: #86efac;
    border-color: rgba(134, 239, 172, 0.45);
    background: rgba(134, 239, 172, 0.10);
}
[data-theme="dark"] #ga-fl-btn-xsec:hover,
[data-theme="dark"] #ga-fl-btn-radial:hover { background: rgba(134, 239, 172, 0.20); }

/* Color-by buttons (Wind / Temp / Td / θe) — bump outline visibility */
.ga-fl-color-btn {
    font-size: 9px;
    border-color: var(--border-light);
}
[data-theme="dark"] .ga-fl-color-btn {
    border-color: rgba(255, 255, 255, 0.18);
}

/* Catch-all dark-mode overrides for legacy inline color hexes used across
   FL/NEXRAD/Sonde labels and headings. The inline styles can't be removed
   without touching every site, so we override by attribute-selector. */
[data-theme="dark"] [style*="color:#1d4ed8"],
[data-theme="dark"] [style*="color: #1d4ed8"] {
    color: #93c5fd !important;
}
[data-theme="dark"] [style*="color:#15803d"],
[data-theme="dark"] [style*="color: #15803d"] {
    color: #86efac !important;
}

/* ── Flight-level tooltip (higher z-index than IR hover) ──── */
.ga-fl-tooltip {
    z-index: 1000 !important;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
}
.ga-fl-barb { pointer-events: none; }

/* ── Compare tab ───────────────────────────────────────────── */
.compare-layout { padding: 16px; }
.compare-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.compare-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--white);
    margin: 0;
}
.compare-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}
.compare-align-group {
    display: flex;
    align-items: center;
    gap: 4px;
}
.compare-align-label {
    font-size: 0.72rem;
    color: var(--slate);
    margin-right: 4px;
}
.compare-align {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--slate);
}
.compare-align.active {
    background: var(--blue);
    color: #ffffff;
    border-color: var(--blue);
}

/* Storm chips bar */
.compare-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    min-height: 28px;
}
.compare-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text);
    background: var(--border);
    border: 1px solid var(--border-light);
    cursor: default;
}
.compare-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.compare-chip-remove {
    cursor: pointer;
    opacity: 0.5;
    font-size: 0.8rem;
    margin-left: 2px;
}
.compare-chip-remove:hover { opacity: 1; }

/* Empty state (now hosts the search panel) */
.compare-empty {
    padding: 24px 20px;
    color: var(--slate);
}

/* Compare search panel */
.compare-search-panel { max-width: 600px; margin: 0 auto; text-align: left; }
.compare-search-title { font-size: 1rem; color: var(--white); margin: 0 0 4px; font-weight: 700; }
.compare-search-hint { font-size: 0.78rem; color: var(--slate); margin: 0 0 14px; opacity: 0.8; }
.compare-search-row { margin-bottom: 10px; }
.compare-filter-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.compare-filter-label { font-size: 0.75rem; color: var(--slate); min-width: 36px; }
.compare-basin-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.compare-filter-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; align-items: start; }
.compare-filter-cell label { display: block; font-size: 0.7rem; color: var(--slate); margin-bottom: 2px; }
.compare-range-inputs { display: flex; align-items: center; gap: 4px; }
.compare-range-inputs span { color: var(--slate); font-size: 0.8rem; }
.compare-result-count { font-size: 0.72rem; color: var(--slate); margin-left: auto; }

/* Search results list */
.compare-search-results {
    max-height: 320px; overflow-y: auto; margin-top: 10px;
    border: 1px solid var(--border); border-radius: 8px;
}
.compare-result-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 12px; cursor: pointer; transition: background 0.15s;
    border-bottom: 1px solid rgba(15, 22, 35,0.03);
    font-size: 0.78rem;
}
.compare-result-row:last-child { border-bottom: none; }
.compare-result-row:hover { background: rgba(15, 22, 35,0.04); }
.compare-result-row.added { opacity: 0.45; cursor: default; }
.compare-result-row.added:hover { background: transparent; }
.compare-result-name { font-weight: 600; color: var(--white); min-width: 90px; }
.compare-result-meta { font-size: 0.72rem; color: var(--slate); font-variant-numeric: tabular-nums; }
.basin-badge-sm {
    background: var(--border); padding: 1px 5px; border-radius: 3px;
    font-size: 0.65rem; font-weight: 600; letter-spacing: 0.03em;
}
.cat-label-sm { font-size: 0.62rem; opacity: 0.7; }
.compare-result-add {
    margin-left: auto; font-size: 0.7rem; padding: 3px 10px;
    border-radius: 6px; border: 1px solid var(--blue); color: var(--blue);
    background: transparent; cursor: pointer; white-space: nowrap; transition: background 0.15s;
}
.compare-result-add:hover { background: rgba(244, 115, 33,0.1); }
.compare-result-add.added { border-color: var(--slate); color: var(--slate); cursor: default; }
.compare-result-add.added:hover { background: transparent; }
.compare-result-empty { text-align: center; padding: 24px; color: var(--slate); font-size: 0.8rem; }

/* Inline search (when storms already selected) */
.compare-search-inline {
    background: rgba(15, 22, 35,0.02); border: 1px solid var(--border);
    border-radius: 10px; padding: 14px; margin-bottom: 14px;
}
.compare-search-inline .compare-search-title { font-size: 0.9rem; margin-bottom: 8px; }
.compare-search-inline .compare-search-results { max-height: 220px; }

/* Stats table */
.compare-stats-table {
    width: 100%;
    overflow-x: auto;
    padding: 12px 16px;
}
.compare-stats-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}
.compare-stats-table th {
    text-align: left;
    color: var(--slate);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}
.compare-stats-table th:hover { color: var(--blue); }
.compare-stats-table td {
    padding: 6px 10px;
    color: var(--white);
    border-bottom: 1px solid rgba(15, 22, 35,0.03);
    font-variant-numeric: tabular-nums;
    font-size: 0.74rem;
}
.compare-stats-table td:first-child {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
}

/* ── Side-by-side IR Comparison ───────────────────────────── */
.compare-ir-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 12px;
}
.compare-ir-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.compare-ir-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    text-align: center;
    padding: 4px 0;
}
.compare-ir-map-wrap {
    position: relative;
    width: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
}
.compare-ir-map {
    width: 100%;
    height: 350px;
    background: var(--navy);
}
.compare-ir-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}
.compare-ir-datetime {
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--slate);
    margin-left: auto;
}
.compare-ir-intensity {
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    text-align: center;
    padding: 2px 0;
    min-height: 1.2em;
}
.compare-ir-intensity .cmp-wind {
    font-weight: 700;
}
.compare-ir-intensity .cmp-pres {
    color: var(--slate);
    margin-left: 8px;
}
.compare-ir-intensity .cmp-cat {
    font-size: 0.68rem;
    font-weight: 600;
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 3px;
    display: inline-block;
}
#compare-ir-colorbar {
    width: 100%;
    height: 10px;
    border-radius: 3px;
    border: 1px solid rgba(15, 22, 35,0.15);
    display: block;
}
@media (max-width: 768px) {
    .compare-ir-grid {
        grid-template-columns: 1fr;
    }
    .compare-ir-map {
        height: 250px;
    }
    .compare-ir-controls {
        flex-wrap: wrap;
    }
    .compare-ir-controls .ga-btn-sm {
        min-height: 32px;
    }
}
@media (max-width: 480px) {
    .compare-ir-map { height: 200px; }
    .compare-ir-label { font-size: 0.78rem; }
}

/* ── Compare Mode Toggle ─────────────────────────────────── */
.compare-mode-btn {
    font-size: 0.7rem;
    padding: 2px 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--slate);
    cursor: pointer;
    transition: all 0.2s;
}
.compare-mode-btn.active {
    background: rgba(0, 180, 255, 0.2);
    color: var(--um-green);
    border-color: var(--um-green);
}

/* ── MW Compare Panel ────────────────────────────────────── */
.compare-mw-product-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 0.78rem;
    color: var(--slate);
}
.compare-mw-product-row select {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 3px 8px;
    font-size: 0.75rem;
    font-family: inherit;
}
.compare-mw-overpass-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
}
.compare-mw-overpass-row select {
    flex: 1;
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 3px 6px;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    min-width: 0;
}
.compare-mw-status {
    font-size: 0.68rem;
    color: var(--slate);
    white-space: nowrap;
}
#compare-mw-colorbar {
    width: 100%;
    height: 10px;
    border-radius: 3px;
    border: 1px solid rgba(15, 22, 35,0.15);
    display: block;
}
@media (max-width: 768px) {
    .compare-mw-overpass-row select {
        font-size: 0.65rem;
    }
}

/* ── Analog Finder modal ──────────────────────────────────── */
.analog-weights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: rgba(15, 22, 35,0.02);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}
.analog-weight-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.analog-weight-row label {
    font-size: 0.74rem;
    color: var(--slate);
    min-width: 110px;
    white-space: nowrap;
}
.analog-weight-row input[type="range"] {
    position: relative;    /* override global position:absolute from tc_radar_styles */
    pointer-events: auto;  /* override global pointer-events:none */
    -webkit-appearance: auto;
    appearance: auto;
    flex: 1;
    accent-color: var(--blue);
    height: 4px;
}
.aw-val {
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--blue);
    min-width: 14px;
    text-align: center;
}

/* Basin filter chips */
.analog-basin-filter {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
}
.analog-filter-label {
    font-size: 0.74rem;
    color: var(--slate);
    margin-right: 4px;
}

/* Results list */
.analog-results {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.analog-results table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.76rem;
}
.analog-results th {
    position: sticky;
    top: 0;
    background: var(--navy);
    color: var(--slate);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    z-index: 1;
}
.analog-results td {
    padding: 7px 8px;
    color: var(--white);
    border-bottom: 1px solid rgba(15, 22, 35,0.03);
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
}
.analog-results td:nth-child(2) {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
}
.analog-results tr:hover {
    background: rgba(74, 155, 110,0.06);
}
.analog-results input[type="checkbox"] {
    accent-color: var(--blue);
}
.analog-score-bar {
    display: inline-block;
    height: 6px;
    border-radius: 3px;
    background: var(--blue);
    opacity: 0.7;
    vertical-align: middle;
    margin-left: 4px;
}

/* Footer */
.analog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.analog-footer span {
    font-size: 0.76rem;
    color: var(--slate);
}

/* ── Forecast Scorecard ─────────────────────────────────── */
.scorecard-panel {
    grid-column: 1 / -1;
    /* Scorecard + Environment panels are toggled via display:none→''.
       A CSS animation replays each time the element re-enters the flow,
       so the panel slides/fades in instead of snapping open abruptly. */
    animation: ga-panel-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ga-panel-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .scorecard-panel { animation: none; }
}
.scorecard-content {
    padding: 8px 0;
}
.scorecard-tabs {
    display: flex;
    gap: 4px;
    padding: 0 12px 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}
.scorecard-tab {
    background: rgba(15, 22, 35,0.04);
    border: 1px solid rgba(15, 22, 35,0.1);
    color: var(--slate);
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
}
.scorecard-tab:hover {
    background: var(--border);
}
.scorecard-tab.active {
    background: rgba(251,191,36,0.15);
    border-color: rgba(251,191,36,0.4);
    color: #fbbf24;
}
.scorecard-table-wrap {
    overflow-x: auto;
    padding: 0 12px;
}
.scorecard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}
.scorecard-table th {
    background: rgba(15, 22, 35,0.03);
    color: var(--slate);
    font-weight: 500;
    padding: 6px 8px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    font-size: 0.78rem;
}
.scorecard-table td {
    padding: 5px 8px;
    text-align: center;
    border-bottom: 1px solid rgba(15, 22, 35,0.06);
    color: var(--text);
}
.scorecard-table tr:hover td {
    background: rgba(15, 22, 35,0.03);
}
.scorecard-model-col {
    text-align: left !important;
    white-space: nowrap;
    min-width: 120px;
}
.scorecard-n-col {
    color: var(--slate) !important;
    font-size: 0.75rem;
}
.scorecard-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: middle;
}
.scorecard-tech {
    color: var(--slate);
    font-size: 0.72rem;
}
.scorecard-val {
    min-width: 48px;
}
.scorecard-best {
    color: #0f8a4f !important;
    font-weight: 700;
}
.scorecard-pos-bias {
    color: #d83a3a !important;
}
.scorecard-neg-bias {
    color: #2563eb !important;
}
:root[data-theme="dark"] .scorecard-best   { color: #34d399 !important; }
:root[data-theme="dark"] .scorecard-pos-bias { color: #f87171 !important; }
:root[data-theme="dark"] .scorecard-neg-bias { color: #60a5fa !important; }
.scorecard-official-row {
    background: rgba(255, 71, 87, 0.06) !important;
}
.scorecard-official-row td {
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 71, 87, 0.15);
}
.scorecard-separator td {
    height: 3px;
    padding: 0;
    background: rgba(255, 71, 87, 0.2);
    border: none;
}

/* ── SHIPS Environmental Section ────────────────────────── */
.ships-section {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.ships-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px 8px;
}
.ships-var-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 12px 10px;
}
.ships-var-btn {
    background: rgba(15, 22, 35,0.04);
    border: 1px solid rgba(15, 22, 35,0.15);
    color: var(--slate);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
}
.ships-var-btn:hover {
    background: var(--border);
}
.ships-var-btn.active {
    font-weight: 600;
}