/**
 * WRF Viewer Stylesheet
 * Design System: "Observatory"
 * Refined scientific instrument meets atmospheric immersion
 */

/* ============================================
   DESIGN TOKENS & CUSTOM PROPERTIES
   ============================================ */

:root {
    /* Typography */
    --font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;

    /* Core palette - deep slate with warmth */
    --surface-primary: rgba(18, 22, 28, 0.92);
    --surface-secondary: rgba(28, 34, 42, 0.88);
    --surface-elevated: rgba(38, 46, 58, 0.85);
    --surface-glass: rgba(22, 28, 36, 0.78);

    /* Text hierarchy */
    --text-primary: rgba(248, 250, 252, 0.95);
    --text-secondary: rgba(203, 213, 225, 0.85);
    --text-tertiary: rgba(148, 163, 184, 0.7);
    --text-muted: rgba(100, 116, 139, 0.6);

    /* Accent colors - variable-specific */
    --accent-temp-warm: #f97316;
    --accent-temp-cold: #38bdf8;
    --accent-temp-neutral: #a3e635;
    --accent-wind: #06b6d4;
    --accent-rain: #3b82f6;
    --accent-precip: #8b5cf6;

    /* Filled controls that carry white text: 5.5:1 with #fff (AA).
       The brand blue #2f87ff stays for strokes, rings and non-text fills. */
    --accent-btn: #1e63d6;

    /* Interaction states */
    --focus-ring: rgba(56, 189, 248, 0.5);
    --hover-lift: rgba(255, 255, 255, 0.04);
    --active-press: rgba(0, 0, 0, 0.1);

    /* Atmospheric effects */
    --glow-warm: rgba(251, 146, 60, 0.15);
    --glow-cool: rgba(56, 189, 248, 0.12);
    --glow-neutral: rgba(148, 163, 184, 0.08);

    /* Shadows - layered depth */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-glow: 0 0 30px var(--glow-neutral);

    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-visible: rgba(255, 255, 255, 0.1);
    --border-accent: rgba(255, 255, 255, 0.15);

    /* Timing */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 120ms;
    --duration-normal: 200ms;
    --duration-slow: 350ms;

    /* Blur values */
    --blur-sm: 8px;
    --blur-md: 16px;
    --blur-lg: 28px;

    /* Floor clearance for the map furniture anchored on the left (variable
       catalog, level rail). The timebar's draggable readout rides 184px above
       the viewport floor and travels the full track width, so anything that
       reaches lower than this gets a corner clipped by it. */
    --furniture-bottom: 192px;
}

/* Google Fonts - loaded async for performance */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ============================================
   BASE STYLES
   ============================================ */

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-display);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    background: #0a0c10;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   MAP CONTAINER
   ============================================ */

#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

.startup-status-stack {
    position: fixed;
    z-index: 62;
    right: 14px;
    bottom: 118px;
    display: grid;
    justify-items: end;
    gap: 7px;
    max-width: min(340px, calc(100vw - 28px));
    pointer-events: none;
}

.startup-status-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 6px 7px 6px 12px;
    color: rgba(255,255,255,.86);
    background: rgba(17, 23, 32, .94);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.34);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    font-size: 11px;
    font-weight: 700;
    pointer-events: auto;
}

.startup-status-notice[hidden] { display: none; }
.startup-status-notice button {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid rgba(130,186,255,.55);
    border-radius: 9px;
    color: #fff;
    background: rgba(54,126,232,.8);
    font: inherit;
    cursor: pointer;
}

.particles-status {
    position: fixed;
    z-index: 22;
    right: 16px;
    bottom: calc(112px + env(safe-area-inset-bottom));
    display: none;
    max-width: min(300px, calc(100vw - 32px));
    padding: 8px 11px;
    color: rgba(255,255,255,.9);
    background: rgba(16,23,33,.92);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: 11px;
    font-weight: 700;
    pointer-events: none;
}

/* Subtle vignette overlay for atmospheric depth */
#map::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        ellipse 120% 100% at 50% 50%,
        transparent 50%,
        rgba(10, 12, 16, 0.3) 100%
    );
    z-index: 1;
}

/* ============================================
   HIDDEN LEGACY CONTROLS
   ============================================ */

.controls {
    display: none !important;
}

/* ============================================
   LEGEND - Refined vertical scale
   ============================================ */

.legend {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    /* Glassmorphism with depth */
    background: var(--surface-glass);
    backdrop-filter: blur(var(--blur-lg)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(1.4);

    padding: 14px 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg), var(--shadow-glow);

    /* Subtle inner highlight */
    background-image: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.04) 0%,
        transparent 40%
    );
}

/* Variable-specific legend glow */
.legend[data-variable="t2m"] {
    --shadow-glow: 0 0 40px rgba(251, 146, 60, 0.08);
}
.legend[data-variable="wind"] {
    --shadow-glow: 0 0 40px rgba(6, 182, 212, 0.1);
}
.legend[data-variable="rain_rate"],
.legend[data-variable="precip_accum"] {
    --shadow-glow: 0 0 40px rgba(59, 130, 246, 0.1);
}

.legend-units {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.legend-bar {
    display: flex;
    flex-direction: column;
    width: 44px;
    border-radius: 8px;
    overflow: hidden;

    /* Inset effect */
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.2),
        inset 0 2px 4px rgba(0, 0, 0, 0.15),
        0 1px 0 rgba(255, 255, 255, 0.05);
}

.legend-blocks {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.legend-block {
    position: relative;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    line-height: 1;

    /* Smoother color transitions between blocks */
    transition: transform var(--duration-fast) var(--ease-out-expo);
}

.legend-block:hover {
    transform: scaleX(1.08);
}

.legend-block + .legend-block {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.legend-label {
    position: relative;
    z-index: 1;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 0 8px rgba(0, 0, 0, 0.2);
    color: rgba(255, 255, 255, 0.95);
}

/* Thunderstorm legend - wider blocks for severity labels */
.legend[data-variable="thunderstorm"] {
    min-width: 160px;
}

.legend[data-variable="thunderstorm"] .legend-bar {
    width: 160px;
}

.legend[data-variable="thunderstorm"] .legend-block {
    height: 22px;
    justify-content: flex-start;
    padding: 0 10px;
}

.legend[data-variable="thunderstorm"] .legend-label {
    font-size: 10px;
    text-transform: none;
    letter-spacing: 0.2px;
    font-weight: 500;
    white-space: nowrap;
}

/* ============================================
   VARIABLE SELECTOR - Refined floating pills
   ============================================ */

.var-selector {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 3;
}

/* Main group pills */
.var-group {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;

    background: var(--surface-primary);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));

    border-radius: 24px;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-md);

    cursor: pointer;
    user-select: none;

    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;

    transition:
        background var(--duration-normal) var(--ease-out-expo),
        border-color var(--duration-normal) var(--ease-out-expo),
        box-shadow var(--duration-normal) var(--ease-out-expo),
        transform var(--duration-fast) var(--ease-out-expo);
}

.var-group:hover {
    background: var(--surface-secondary);
    border-color: var(--border-visible);
    transform: translateX(2px);
}

.var-group:active {
    transform: translateX(2px) scale(0.98);
}

/* Expanded state - variable-specific colors */
.var-group.expanded {
    color: var(--text-primary);
    font-weight: 600;
    border-color: var(--border-accent);
}

.var-group.expanded[data-group="temperature"] {
    background: linear-gradient(135deg,
        rgba(249, 115, 22, 0.2) 0%,
        rgba(234, 88, 12, 0.15) 100%);
    box-shadow: var(--shadow-md), 0 0 24px rgba(249, 115, 22, 0.12);
}

.var-group.expanded[data-group="wind"] {
    background: linear-gradient(135deg,
        rgba(6, 182, 212, 0.2) 0%,
        rgba(14, 165, 233, 0.15) 100%);
    box-shadow: var(--shadow-md), 0 0 24px rgba(6, 182, 212, 0.12);
}

.var-group.expanded[data-group="precipitation"] {
    background: linear-gradient(135deg,
        rgba(59, 130, 246, 0.2) 0%,
        rgba(99, 102, 241, 0.15) 100%);
    box-shadow: var(--shadow-md), 0 0 24px rgba(59, 130, 246, 0.12);
}

.var-group-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    transition: opacity var(--duration-fast), transform var(--duration-normal) var(--ease-spring);
}

.var-group:hover .var-group-icon {
    opacity: 1;
}

.var-group.expanded .var-group-icon {
    opacity: 1;
    transform: scale(1.1);
}

.var-group-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.var-group-label {
    white-space: nowrap;
    flex: 1;
}

.var-group-chevron {
    width: 14px;
    height: 14px;
    opacity: 0.5;
    transition: transform var(--duration-normal) var(--ease-out-expo), opacity var(--duration-fast);
}

.var-group:hover .var-group-chevron {
    opacity: 0.7;
}

.var-group-chevron svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.var-group.expanded .var-group-chevron {
    transform: rotate(90deg);
    opacity: 0.8;
}

/* Sub-item pills */
.var-subitem {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin-left: 28px;

    background: var(--surface-secondary);
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));

    border-radius: 18px;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);

    cursor: pointer;
    user-select: none;

    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 450;

    transition:
        background var(--duration-fast) var(--ease-out-expo),
        color var(--duration-fast),
        border-color var(--duration-fast),
        transform var(--duration-fast) var(--ease-out-expo);
}

.var-subitem:hover {
    background: var(--surface-elevated);
    color: var(--text-secondary);
    transform: translateX(3px);
}

.var-subitem.active {
    color: var(--text-primary);
    font-weight: 550;
    border-color: var(--border-accent);
}

/* Variable-specific active states */
.var-subitem.active[data-var="t2m"] {
    background: linear-gradient(135deg,
        rgba(249, 115, 22, 0.25) 0%,
        rgba(234, 88, 12, 0.18) 100%);
    box-shadow: var(--shadow-sm), 0 0 16px rgba(249, 115, 22, 0.15);
}

.var-subitem.active[data-var="wind"] {
    background: linear-gradient(135deg,
        rgba(6, 182, 212, 0.25) 0%,
        rgba(14, 165, 233, 0.18) 100%);
    box-shadow: var(--shadow-sm), 0 0 16px rgba(6, 182, 212, 0.15);
}

.var-subitem.active[data-var="rain_rate"] {
    background: linear-gradient(135deg,
        rgba(59, 130, 246, 0.25) 0%,
        rgba(99, 102, 241, 0.18) 100%);
    box-shadow: var(--shadow-sm), 0 0 16px rgba(59, 130, 246, 0.15);
}

.var-subitem.active[data-var="precip_accum"] {
    background: linear-gradient(135deg,
        rgba(139, 92, 246, 0.25) 0%,
        rgba(124, 58, 237, 0.18) 100%);
    box-shadow: var(--shadow-sm), 0 0 16px rgba(139, 92, 246, 0.15);
}

.var-subitem-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity var(--duration-fast);
}

.var-subitem:hover .var-subitem-icon,
.var-subitem.active .var-subitem-icon {
    opacity: 1;
}

.var-subitem-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.var-subitem-label {
    white-space: nowrap;
}

/* Wind particles toggle */
.wind-toggle-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding: 8px 14px;

    background: var(--surface-secondary);
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));

    border-radius: 20px;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);

    font-size: 12px;
    color: var(--text-tertiary);
}

/* ============================================
   3D TERRAIN TOGGLE
   ============================================ */

.terrain-3d-toggle {
    position: absolute;
    top: 12px;
    right: 70px; /* Position to left of nav controls */

    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;

    background: var(--surface-primary);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));

    border-radius: 24px;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-md);

    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;

    z-index: 3;

    transition:
        background var(--duration-normal) var(--ease-out-expo),
        border-color var(--duration-normal) var(--ease-out-expo),
        box-shadow var(--duration-normal) var(--ease-out-expo);
}

.terrain-3d-toggle:hover {
    background: var(--surface-secondary);
    border-color: var(--border-visible);
}

.terrain-3d-toggle.active {
    background: linear-gradient(135deg,
        rgba(34, 197, 94, 0.2) 0%,
        rgba(22, 163, 74, 0.15) 100%);
    border-color: rgba(34, 197, 94, 0.4);
    box-shadow: var(--shadow-md), 0 0 24px rgba(34, 197, 94, 0.15);
    color: var(--text-primary);
}

.terrain-3d-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    transition: opacity var(--duration-fast), transform var(--duration-normal) var(--ease-spring);
}

.terrain-3d-toggle:hover .terrain-3d-icon {
    opacity: 1;
}

.terrain-3d-toggle.active .terrain-3d-icon {
    opacity: 1;
    transform: scale(1.1);
    color: #22c55e;
}

.terrain-3d-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.terrain-3d-label {
    white-space: nowrap;
}

/* Toggle switch styling for 3D terrain */
.terrain-3d-toggle .toggle-switch input:checked + .toggle-slider {
    background: #22c55e;
}

/* ============================================
   3D TERRAIN INFO INDICATOR - Pulsating hint
   ============================================ */

.terrain-info-indicator {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 2px;
    cursor: pointer;
    color: rgba(34, 197, 94, 0.9);
    transition: color var(--duration-fast), transform var(--duration-fast);
}

.terrain-info-indicator:hover {
    color: #22c55e;
    transform: scale(1.1);
}

.terrain-info-indicator svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    position: relative;
    z-index: 1;
}

/* Pulsating dot behind the icon */
.terrain-info-dot {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.25);
    animation: terrain-info-pulse 2s ease-in-out infinite;
}

@keyframes terrain-info-pulse {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.4);
        opacity: 0;
    }
}

/* Seen state - no pulsing, subtler appearance */
.terrain-info-indicator.seen {
    color: var(--text-tertiary);
}

.terrain-info-indicator.seen:hover {
    color: var(--text-secondary);
}

/* Hide the pulsating dot when seen */
.terrain-info-indicator.seen .terrain-info-dot {
    display: none;
}

/* ============================================
   3D TERRAIN ONBOARDING TOOLTIP
   ============================================ */

.terrain-onboarding {
    position: fixed;
    top: 60px;
    right: 70px;
    z-index: 1000;

    /* Initial state - hidden */
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
    transition:
        opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    pointer-events: none;
}

.terrain-onboarding.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.terrain-onboarding.dismissing {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
    transition:
        opacity 0.3s ease-out,
        transform 0.3s ease-out;
}

.terrain-onboarding-content {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    padding-right: 44px;

    background: linear-gradient(135deg,
        rgba(34, 197, 94, 0.15) 0%,
        rgba(22, 163, 74, 0.08) 100%);
    backdrop-filter: blur(var(--blur-lg)) saturate(1.5);
    -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(1.5);

    border-radius: 16px;
    border: 1px solid rgba(34, 197, 94, 0.3);

    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 0 40px rgba(34, 197, 94, 0.1);

    max-width: 320px;
}

/* Subtle shimmer effect */
.terrain-onboarding-content::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(
        120deg,
        transparent 30%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 70%
    );
    background-size: 200% 100%;
    animation: terrain-shimmer 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes terrain-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.terrain-onboarding-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;

    background: rgba(34, 197, 94, 0.2);
    border-radius: 12px;
    color: #4ade80;
}

.terrain-onboarding-icon svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.terrain-onboarding-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.terrain-onboarding-text strong {
    font-size: 15px;
    font-weight: 700;
    color: #86efac;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.terrain-onboarding-text p {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Dismiss button */
.terrain-onboarding-dismiss {
    position: absolute;
    top: 10px;
    right: 10px;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;

    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;

    color: var(--text-tertiary);
    cursor: pointer;

    transition:
        background var(--duration-fast),
        color var(--duration-fast),
        transform var(--duration-fast);
}

.terrain-onboarding-dismiss:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    transform: scale(1.05);
}

.terrain-onboarding-dismiss:active {
    transform: scale(0.95);
}

.terrain-onboarding-dismiss svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Arrow pointing to toggle */
.terrain-onboarding-arrow {
    position: absolute;
    top: -8px;
    right: 24px;

    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid rgba(34, 197, 94, 0.3);

    filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.1));
}

.terrain-onboarding-arrow::after {
    content: '';
    position: absolute;
    top: 2px;
    left: -9px;

    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid rgba(34, 197, 94, 0.12);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .terrain-3d-toggle {
        top: auto;
        bottom: 110px;
        right: 12px;
        padding: 8px 14px;
        font-size: 12px;
        /* 44px minimum touch target */
        min-height: 44px;
    }

    .terrain-3d-icon {
        width: 18px;
        height: 18px;
    }

    .terrain-onboarding {
        top: auto;
        bottom: 170px;
        right: 12px;
        left: 12px;
    }

    .terrain-onboarding-arrow {
        display: none;
    }

    .terrain-onboarding-content {
        max-width: none;
    }
}

@media (max-width: 480px) {
    .terrain-3d-toggle .terrain-3d-label {
        display: none;
    }

    .terrain-3d-toggle {
        padding: 10px 12px;
        border-radius: 50%;
    }

    .terrain-info-indicator {
        display: none;
    }
}

/* ============================================
   TOGGLE SWITCH - Refined styling
   ============================================ */

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgba(100, 116, 139, 0.4);
    border-radius: 20px;
    transition: background var(--duration-normal) var(--ease-out-expo);
}

.toggle-slider::before {
    content: "";
    position: absolute;
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background: var(--text-secondary);
    border-radius: 50%;
    transition:
        transform var(--duration-normal) var(--ease-spring),
        background var(--duration-normal);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--accent-wind);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(16px);
    background: white;
}

.toggle-switch input:focus-visible + .toggle-slider {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Smaller toggle for footer */
.wind-toggle-footer .toggle-switch {
    width: 32px;
    height: 18px;
}

.wind-toggle-footer .toggle-slider::before {
    height: 12px;
    width: 12px;
    left: 3px;
    bottom: 3px;
}

.wind-toggle-footer .toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(14px);
}

/* ============================================
   TIMEBAR DOCK - Bottom control panel
   ============================================ */

.timebar-dock {
    --play-btn-size: 48px;
    --dock-gap: 14px;

    position: absolute;
    left: 50%;
    bottom: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom));
    transform: translateX(-50%);

    display: flex;
    align-items: flex-end;
    gap: var(--dock-gap);

    width: min(
        calc(1100px + var(--play-btn-size) + var(--dock-gap)),
        calc(100% - 32px)
    );

    z-index: 3;
    pointer-events: none;
}

.timebar-dock > * {
    pointer-events: auto;
}

/* ============================================
   PLAY BUTTON - Refined circular control
   ============================================ */

.timebar-play-btn {
    position: relative;
    width: var(--play-btn-size);
    height: var(--play-btn-size);
    flex: 0 0 var(--play-btn-size);
    border-radius: 50%;
    border: none;

    /* Glassmorphism */
    background: var(--surface-primary);
    backdrop-filter: blur(var(--blur-lg)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(1.4);

    border: 1px solid var(--border-visible);
    box-shadow: var(--shadow-lg);

    color: var(--text-primary);
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    transition:
        background var(--duration-normal) var(--ease-out-expo),
        border-color var(--duration-normal),
        box-shadow var(--duration-normal),
        transform var(--duration-fast) var(--ease-spring);

    z-index: 3;
}

.timebar-play-btn:hover {
    background: var(--surface-secondary);
    border-color: var(--border-accent);
    transform: scale(1.06);
    box-shadow: var(--shadow-lg), 0 0 20px rgba(255, 255, 255, 0.05);
}

.timebar-play-btn:active {
    transform: scale(1.02);
}

.timebar-play-btn:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

.timebar-play-btn.playing {
    background: linear-gradient(135deg, var(--accent-wind) 0%, #0891b2 100%);
    border-color: transparent;
    box-shadow:
        var(--shadow-lg),
        0 0 32px rgba(6, 182, 212, 0.35);
}

.timebar-play-btn svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    transition: transform var(--duration-fast) var(--ease-spring);
}

.timebar-play-btn:hover svg {
    transform: scale(1.1);
}

/* ============================================
   TIMEBAR - Main timeline container
   ============================================ */

.timebar {
    position: relative;
    flex: 1 1 0;
    min-width: 0;

    --timebar-pad-x: 36px;
    --timebar-pad-bottom: 16px;
    --timebar-gap-y: 8px;
    --timebar-labels-height: 26px;
    --timebar-labels-margin-top: 6px;
    --track-height: 4px;
    --track-color: rgba(255, 255, 255, 0.1);
    --progress-color: rgba(255, 255, 255, 0.85);
    --thumb-marker-width: 6px;
    --thumb-marker-width-hover: 8px;
    --thumb-marker-height: 32px;
    --thumb-marker-height-hover: 38px;
    --now-frac: 0;
    --now-marker-width: 2px;
    --now-marker-color: rgba(251, 191, 36, 0.9);
    --now-marker-glow: rgba(251, 191, 36, 0.25);
    --tooltip-arrow-size: 7px;
    --tooltip-gap: 2px;
    --tooltip-edge-pad: 10px;
    --tooltip-nudge-y: 4px;
    --timebar-bg-height: 76px;

    padding: 10px var(--timebar-pad-x) var(--timebar-pad-bottom);
    color: var(--text-primary);
    z-index: 3;
    isolation: isolate;

    display: flex;
    flex-direction: column;
    gap: var(--timebar-gap-y);
}

/* Glassmorphism background with atmospheric gradient */
.timebar::before {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: var(--timebar-bg-height);

    /* Atmospheric gradient - shifts subtly with time of day */
    background: linear-gradient(to top,
        var(--surface-primary) 0%,
        var(--surface-primary) 60%,
        transparent 100%);
    backdrop-filter: blur(var(--blur-lg)) saturate(1.5);
    -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(1.5);

    border: 1px solid var(--border-subtle);
    border-radius: 18px;

    box-shadow:
        var(--shadow-lg),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);

    pointer-events: none;
    z-index: 0;
}

/* Subtle top highlight */
.timebar::after {
    content: '';
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: calc(var(--timebar-bg-height) - 2px);
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.06) 20%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.06) 80%,
        transparent 100%);
    border-radius: 18px 18px 0 0;
    pointer-events: none;
    z-index: 0;
}

/* Track wrapper */
.timebar .track-wrap {
    position: relative;
    flex: 1;
    padding-top: 40px;
}

/* Slider track */
.timebar input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: var(--track-height);
    background: var(--track-color);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

/* Progress fill - Chrome/Safari */
.timebar input[type="range"]::-webkit-slider-runnable-track {
    height: var(--track-height);
    background: linear-gradient(to right,
        var(--progress-color) 0%,
        var(--progress-color) var(--progress, 0%),
        var(--track-color) var(--progress, 0%),
        var(--track-color) 100%);
    border-radius: 2px;
}

/* Slider thumb - Chrome/Safari */
.timebar input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--thumb-marker-width);
    height: var(--thumb-marker-height);
    border-radius: 999px;

    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(255, 255, 255, 0.8) 100%);
    border: none;

    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.25),
        0 0 16px rgba(255, 255, 255, 0.3);

    cursor: grab;
    transition:
        box-shadow var(--duration-fast),
        height var(--duration-fast) var(--ease-spring),
        width var(--duration-fast) var(--ease-spring),
        margin-top var(--duration-fast) var(--ease-spring);
    margin-top: calc((var(--track-height) - var(--thumb-marker-height)) / 2);
}

.timebar input[type="range"]::-webkit-slider-thumb:hover {
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.15),
        0 2px 12px rgba(0, 0, 0, 0.3),
        0 0 24px rgba(255, 255, 255, 0.4);
    width: var(--thumb-marker-width-hover);
    height: var(--thumb-marker-height-hover);
    margin-top: calc((var(--track-height) - var(--thumb-marker-height-hover)) / 2);
}

.timebar input[type="range"]::-webkit-slider-thumb:active {
    cursor: grabbing;
}

/* Slider thumb - Firefox */
.timebar input[type="range"]::-moz-range-thumb {
    width: var(--thumb-marker-width);
    height: var(--thumb-marker-height);
    border-radius: 999px;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(255, 255, 255, 0.8) 100%);
    border: none;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.25),
        0 0 16px rgba(255, 255, 255, 0.3);
    cursor: grab;
}

/* Progress fill - Firefox */
.timebar input[type="range"]::-moz-range-track {
    height: var(--track-height);
    background: var(--track-color);
    border-radius: 2px;
}

.timebar input[type="range"]::-moz-range-progress {
    background: var(--progress-color);
    height: var(--track-height);
    border-radius: 2px 0 0 2px;
}

/* "Now" marker - gentle pulsing glow */
.timebar .now-marker {
    position: absolute;
    top: calc(100% - var(--timebar-bg-height));
    bottom: calc(
        var(--timebar-pad-bottom) +
        var(--timebar-labels-height) +
        var(--timebar-gap-y) +
        var(--timebar-labels-margin-top)
    );
    left: calc(
        var(--timebar-pad-x) +
        (var(--thumb-marker-width) / 2) +
        (100% - (2 * var(--timebar-pad-x)) - var(--thumb-marker-width)) * var(--now-frac, 0)
    );
    width: var(--now-marker-width);
    transform: translateX(-50%);
    border-radius: 999px;

    background: linear-gradient(to bottom,
        transparent 0%,
        var(--now-marker-color) 12%,
        var(--now-marker-color) 88%,
        transparent 100%);

    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.1),
        0 0 20px var(--now-marker-glow);

    opacity: 0.9;
    pointer-events: none;
    z-index: 1;

    /* Gentle breathing pulse - slow and meditative */
    animation: now-marker-pulse 4s ease-in-out infinite;
}

@keyframes now-marker-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(0, 0, 0, 0.1),
            0 0 16px var(--now-marker-glow);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(0, 0, 0, 0.08),
            0 0 28px var(--now-marker-glow),
            0 0 40px rgba(251, 191, 36, 0.12);
    }
}

.timebar .now-marker.out-of-range {
    opacity: 0.3;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    animation: none; /* No pulse when out of range */
}

/* ============================================
   TOOLTIP - Refined time display
   Information hierarchy: day/date secondary, time primary
   ============================================ */

.timebar .tooltip {
    position: absolute;
    left: 0;
    --tooltip-shift-y: calc(-100% - var(--tooltip-arrow-size) - var(--tooltip-gap) + var(--tooltip-nudge-y, 0px));
    --tooltip-arrow-offset: 0px;

    transform: translate(-50%, var(--tooltip-shift-y));
    display: flex;
    align-items: center;
    gap: 0;

    /* Refined glassmorphism with layered depth */
    background:
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0.03) 0%,
            transparent 50%),
        var(--surface-primary);
    backdrop-filter: blur(var(--blur-lg)) saturate(1.3);
    -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(1.3);

    color: var(--text-primary);
    padding: 10px 12px;
    border-radius: 14px;

    /* Refined border - subtle gradient effect */
    border: 1px solid var(--border-visible);
    box-shadow:
        var(--shadow-md),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);

    /* Smooth tracking */
    transition:
        left 0.05s ease-out,
        top 0.05s ease-out,
        opacity var(--duration-fast);

    pointer-events: auto;
    cursor: grab;
    user-select: none;
    touch-action: none;
    z-index: 3;
}

.timebar .tooltip:hover {
    border-color: var(--border-accent);
}

.timebar .tooltip:active {
    cursor: grabbing;
    transform: translate(-50%, var(--tooltip-shift-y)) scale(0.98);
}

/* Tooltip content layout */
.timebar .tooltip .tooltip-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 2px;
    white-space: nowrap;
}

.timebar .tooltip .tooltip-date {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    line-height: 1.1;
}

.timebar .tooltip .tooltip-time {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.timebar-run-chip {
    display: block;
    margin-top: 1px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: rgba(148, 163, 184, .78);
    text-align: center;
}

.timebar .tooltip .tooltip-actions {
    display: flex;
    align-items: center;
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid var(--border-subtle);
}

/* Timezone toggle - refined pill */
.timebar .tooltip .tooltip-tz-toggle {
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);

    background: rgba(255, 255, 255, 0.04);
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 20px;

    cursor: pointer;
    user-select: none;
    transition:
        background var(--duration-fast),
        color var(--duration-fast),
        border-color var(--duration-fast),
        transform var(--duration-fast) var(--ease-spring);
}

.timebar .tooltip .tooltip-tz-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    border-color: var(--border-visible);
}

.timebar .tooltip .tooltip-tz-toggle:active {
    transform: scale(0.95);
}

.timebar .tooltip .tooltip-tz-toggle:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.timebar .tooltip .tooltip-tz-toggle.active {
    background: linear-gradient(135deg,
        rgba(6, 182, 212, 0.9) 0%,
        rgba(8, 145, 178, 0.85) 100%);
    border-color: transparent;
    color: white;
    box-shadow: 0 0 14px rgba(6, 182, 212, 0.3);
}

/* Tooltip arrow - refined with matching border */
.timebar .tooltip::after {
    content: '';
    position: absolute;
    bottom: calc(-1 * var(--tooltip-arrow-size));
    left: calc(50% + var(--tooltip-arrow-offset) + 4px);
    transform: translateX(-50%);

    /* Arrow shape */
    border-left: var(--tooltip-arrow-size) solid transparent;
    border-right: var(--tooltip-arrow-size) solid transparent;
    border-top: var(--tooltip-arrow-size) solid var(--surface-primary);

    /* Soften the arrow */
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}

/* Arrow border overlay - creates bordered arrow effect */
.timebar .tooltip::before {
    content: '';
    position: absolute;
    bottom: calc(-1 * var(--tooltip-arrow-size) - 1px);
    left: calc(50% + var(--tooltip-arrow-offset) + 4px);
    transform: translateX(-50%);

    border-left: calc(var(--tooltip-arrow-size) + 1px) solid transparent;
    border-right: calc(var(--tooltip-arrow-size) + 1px) solid transparent;
    border-top: calc(var(--tooltip-arrow-size) + 1px) solid var(--border-visible);

    z-index: -1;
}

/* ============================================
   DAY LABELS - Below timeline
   ============================================ */

.timebar .labels {
    position: relative;
    height: var(--timebar-labels-height);
    margin-top: var(--timebar-labels-margin-top);
}

.timebar .labels .day-label {
    position: absolute;
    transform: translateX(-50%);

    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary);

    padding: 5px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);

    cursor: pointer;
    white-space: nowrap;
    transition:
        background var(--duration-fast),
        color var(--duration-fast),
        transform var(--duration-fast) var(--ease-spring);
}

.timebar .labels .day-label:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    transform: translateX(-50%) scale(1.02);
}

.timebar .labels .day-label.active {
    background: rgba(6, 182, 212, 0.15);
    color: var(--accent-wind);
    font-weight: 600;
}

.timebar .labels .day-label.today {
    color: #4ade80;
}

.timebar .labels .day-label.weekend {
    color: rgba(251, 191, 36, 0.85);
}

/* Day separator ticks */
.timebar .day-ticks {
    position: absolute;
    left: var(--timebar-pad-x);
    right: var(--timebar-pad-x);
    top: calc(100% - var(--timebar-bg-height));
    bottom: calc(
        var(--timebar-pad-bottom) +
        var(--timebar-labels-height) +
        var(--timebar-gap-y) +
        var(--timebar-labels-margin-top)
    );
    pointer-events: none;
}

.timebar .day-ticks span {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(255, 255, 255, 0.15) 30%,
        rgba(255, 255, 255, 0.15) 70%,
        transparent 100%);
    transform: translateX(-50%);
}

/* ============================================
   PRELOAD PROGRESS INDICATOR
   ============================================ */

.preload-progress {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 14px);
    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    background: var(--surface-primary);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));

    padding: 12px 18px;
    border-radius: 14px;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-md);

    z-index: 4;
    min-width: 180px;
    pointer-events: none;
}

.preload-progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.preload-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-wind), #22d3ee);
    border-radius: 2px;
    transition: width var(--duration-fast) ease-out;
}

.preload-progress-text {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Shimmer animation */
.preload-progress.loading .preload-progress-fill {
    background: linear-gradient(90deg,
        var(--accent-wind) 0%,
        #22d3ee 50%,
        var(--accent-wind) 100%);
    background-size: 200% 100%;
    animation: preload-shimmer 1.8s ease-in-out infinite;
}

@keyframes preload-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Preparing state */
.timebar-play-btn.preparing {
    animation: preparing-pulse 1.2s ease-in-out infinite;
}

@keyframes preparing-pulse {
    0%, 100% { box-shadow: var(--shadow-lg); }
    50% { box-shadow: var(--shadow-lg), 0 0 24px rgba(6, 182, 212, 0.3); }
}

/* Buffering spinner */
.timebar-play-btn.buffering {
    position: relative;
}

.timebar-play-btn.buffering::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--accent-wind);
    animation: buffering-spin 0.9s linear infinite;
    pointer-events: none;
}

@keyframes buffering-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================
   LAYER LOADING SPINNER
   ============================================ */

.layer-loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;

    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--duration-normal),
        visibility var(--duration-normal);

    background: var(--surface-glass);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));

    padding: 24px;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
}

.layer-loading-spinner.visible {
    opacity: 1;
    visibility: visible;
}

.spinner-ring {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--accent-wind);
    animation: spinner-rotate 1s linear infinite;
}

@keyframes spinner-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================
   HOVER TOOLTIP - Value display on map hover
   ============================================ */

.hover-tooltip {
    position: absolute;
    pointer-events: none;
    z-index: 10;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;

    background: var(--surface-primary);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));

    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    white-space: nowrap;

    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-md);

    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--duration-fast),
        visibility var(--duration-fast);
}

.hover-tooltip-value {
    line-height: 1.1;
}

.hover-tooltip-elevation {
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.1;
}

.hover-tooltip.visible {
    opacity: 1;
    visibility: visible;
}

/* Variable-specific tooltip accents */
.hover-tooltip[data-variable="t2m"] {
    border-color: rgba(249, 115, 22, 0.3);
    box-shadow: var(--shadow-md), 0 0 12px rgba(249, 115, 22, 0.1);
}

.hover-tooltip[data-variable="wind"] {
    border-color: rgba(6, 182, 212, 0.3);
    box-shadow: var(--shadow-md), 0 0 12px rgba(6, 182, 212, 0.1);
}

.hover-tooltip[data-variable="rain_rate"],
.hover-tooltip[data-variable="precip_accum"] {
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: var(--shadow-md), 0 0 12px rgba(59, 130, 246, 0.1);
}

/* ============================================
   MAPLIBRE POPUP - Custom dark theme
   ============================================ */

.maplibregl-popup-content {
    background: var(--surface-primary);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));

    color: var(--text-primary);
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);

    font-size: 13px;
    line-height: 1.6;
    min-width: 300px;
}

.maplibregl-popup-content strong {
    color: var(--accent-temp-warm);
    font-weight: 600;
}

.maplibregl-popup-tip {
    border-top-color: var(--surface-primary);
}

.maplibregl-popup-close-button {
    color: var(--text-tertiary);
    font-size: 20px;
    padding: 4px 10px;
    transition: color var(--duration-fast);
}

.maplibregl-popup-close-button:hover {
    background: var(--hover-lift);
    color: var(--text-primary);
}

.popup-coords {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
}

.popup-timestamp {
    font-size: 11px;
    color: var(--accent-wind);
    margin-top: 4px;
}

/* ============================================
   POPUP SPARKLINE - Inline time series chart
   ============================================ */

.popup-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
}

.popup-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.popup-var-name {
    color: var(--text-secondary);
    font-weight: 500;
}

.popup-value {
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

/* Sparkline container */
.popup-sparkline-container {
    position: relative;
    width: 100%;
    height: 80px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    overflow: hidden;
}

/* Loading state */
.popup-sparkline-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--accent-wind);
    border-radius: 50%;
    animation: popup-spin 0.8s linear infinite;
}

@keyframes popup-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Error state */
.popup-sparkline-error {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    font-size: 11px;
}

/* Sparkline SVG */
.sparkline {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.sparkline-grid line {
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 1;
}

/* Y-axis min/max labels */
.sparkline-axis-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    dominant-baseline: middle;
    opacity: 0.9;
}

.sparkline-axis-max {
    dominant-baseline: hanging;
}

.sparkline-axis-min {
    dominant-baseline: auto;
}

/* Line chart - stroke color set by JavaScript gradient */
.sparkline-path {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Area fill - set by JavaScript gradient */
.sparkline-area {
    /* Fill set dynamically via JS */
}

/* Bar chart styles - colors are set by JavaScript based on value */
.sparkline-bar {
    opacity: 0.85;
    transition: opacity var(--duration-fast);
}

.sparkline-bar:hover {
    opacity: 1;
}

/* Current timestep marker - glowing white circle */
.sparkline-current {
    fill: white;
    stroke: rgba(0, 0, 0, 0.3);
    stroke-width: 2;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}

/* Hover interaction elements */
.sparkline-hover-line {
    stroke: rgba(255, 255, 255, 0.4);
    stroke-width: 1;
    stroke-dasharray: 2 2;
    pointer-events: none;
}

.sparkline-hover-dot {
    fill: white;
    stroke: rgba(0, 0, 0, 0.2);
    stroke-width: 1.5;
    pointer-events: none;
}

/* Hover value tooltip - positioned to clear close button */
.popup-sparkline-hover {
    position: absolute;
    top: 4px;
    right: 28px;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;

    padding: 6px 10px;
    border-radius: 6px;

    background: var(--surface-primary);
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));

    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);

    font-size: 11px;
    pointer-events: none;

    opacity: 0;
    transition: opacity var(--duration-fast);
}

.popup-sparkline-hover.visible {
    opacity: 1;
}

.popup-hover-value {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.popup-hover-time {
    color: var(--text-tertiary);
    font-size: 10px;
}

/* Footer refinement */
.popup-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid var(--border-subtle);
}

/* ============================================
   HILLSHADE BLEND MODES
   ============================================ */

.hillshade-blend-wrapper {
    position: absolute;
    inset: 0;
    pointer-events: none;
    isolation: isolate;
}

.hillshade-blend-wrapper.blend-multiply { mix-blend-mode: multiply; }
.hillshade-blend-wrapper.blend-soft-light { mix-blend-mode: soft-light; }
.hillshade-blend-wrapper.blend-overlay { mix-blend-mode: overlay; }
.hillshade-blend-wrapper.blend-hard-light { mix-blend-mode: hard-light; }
.hillshade-blend-wrapper.blend-screen { mix-blend-mode: screen; }

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .var-selector {
        top: 10px;
        left: 10px;
    }

    .var-group {
        padding: 8px 14px;
        font-size: 12px;
    }

    .var-subitem {
        margin-left: 20px;
        padding: 6px 12px;
        font-size: 11px;
    }

    .legend {
        right: 12px;
        padding: 10px 12px 14px;
    }

    .legend-bar {
        width: 38px;
    }

    .legend-block {
        height: 18px;
    }
}

@media (max-width: 600px) {
    .timebar-dock {
        --play-btn-size: 44px;
        --dock-gap: 10px;
        width: calc(100% - 16px);
        bottom: 12px;
    }

    .timebar {
        --timebar-pad-x: 20px;
        --timebar-bg-height: 70px;
    }

    .timebar-play-btn svg {
        width: 20px;
        height: 20px;
    }

    .timebar .tooltip {
        padding: 8px 10px;
    }

    .timebar .tooltip .tooltip-date {
        font-size: 10px;
    }

    .timebar .tooltip .tooltip-time {
        font-size: 14px;
    }

    .timebar .tooltip .tooltip-actions {
        margin-left: 10px;
        padding-left: 10px;
    }

    .timebar .tooltip .tooltip-tz-toggle {
        height: 22px;
        padding: 0 9px;
    }
}

@media (max-height: 600px) {
    .legend {
        padding: 8px 10px 12px;
        max-height: 65vh;
        overflow-y: auto;
    }

    .legend-bar {
        width: 36px;
    }

    .legend-block {
        height: 16px;
        font-size: 9px;
    }
}

/* ============================================
   REDUCED MOTION PREFERENCES
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   ATTRIBUTION FOOTER
   ============================================ */

.attribution {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

    background: var(--surface-primary);
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));

    color: var(--text-tertiary);
    padding: 6px 16px;
    font-size: 11px;
    border-radius: 8px 8px 0 0;
    border: 1px solid var(--border-subtle);
    border-bottom: none;

    z-index: 1;
    text-align: center;
}

.attribution a {
    color: var(--accent-wind);
    text-decoration: none;
    transition: color var(--duration-fast);
}

.attribution a:hover {
    color: #22d3ee;
    text-decoration: underline;
}

/* ============================================
   INFO TEXT
   ============================================ */

.info {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 8px;
}

/* Legacy label/select styling (hidden but kept for compatibility) */
label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-secondary);
}

select, input[type="range"] {
    width: 100%;
    padding: 6px;
    border: 1px solid var(--border-visible);
    border-radius: 6px;
    font-size: 13px;
    background: var(--surface-secondary);
    color: var(--text-primary);
}

/* ============================================
   SETTINGS MENU - Language selector
   ============================================ */

.settings-menu {
    position: absolute;
    top: 12px;
    right: 290px; /* Position to left of 3D terrain toggle */
    z-index: 10;
}

.settings-btn {
    width: 42px;
    height: 42px;
    padding: 10px;

    background: var(--surface-primary);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));

    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    box-shadow: var(--shadow-md);

    color: var(--text-secondary);
    cursor: pointer;

    transition: all var(--duration-normal) var(--ease-out-expo);
}

.settings-btn:hover {
    background: var(--surface-secondary);
    border-color: var(--border-visible);
    color: var(--text-primary);
}

.settings-btn.active {
    background: var(--surface-secondary);
    border-color: var(--border-visible);
    color: var(--text-primary);
}

.settings-btn svg {
    width: 100%;
    height: 100%;
}

.settings-panel {
    position: absolute;
    top: 48px;
    right: 0;
    z-index: 10;

    min-width: 180px;
    padding: 14px;

    background: var(--surface-glass);
    backdrop-filter: blur(var(--blur-lg));
    -webkit-backdrop-filter: blur(var(--blur-lg));

    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--duration-normal) var(--ease-out-expo);
}

.settings-panel.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.settings-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.settings-label {
    display: block;
    margin-bottom: 4px;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.settings-language-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lang-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;

    background: var(--surface-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;

    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: left;

    transition: all var(--duration-fast) ease;
}

.lang-btn:hover {
    background: var(--surface-elevated);
    color: var(--text-primary);
    border-color: var(--border-visible);
}

.lang-btn.active {
    background: rgba(6, 182, 212, 0.15);
    border-color: var(--accent-wind);
    color: var(--text-primary);
}

.lang-btn .lang-flag {
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    min-width: 24px;
}

.lang-btn.active .lang-flag {
    color: var(--accent-wind);
}

.lang-btn .lang-name {
    font-weight: 500;
}

/* Wind units: four short labels, so a 2x2 grid rather than the language
   column. The rule marks where one setting ends and the next begins. */
.settings-section + .settings-section {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
}

.settings-unit-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.unit-btn {
    padding: 9px 6px;

    background: var(--surface-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;

    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;

    transition: all var(--duration-fast) ease;
}

.unit-btn:hover {
    background: var(--surface-elevated);
    color: var(--text-primary);
    border-color: var(--border-visible);
}

.unit-btn.active {
    background: rgba(6, 182, 212, 0.15);
    border-color: var(--accent-wind);
    color: var(--text-primary);
    font-weight: 600;
}

/* Settings menu responsive */
@media (max-width: 768px) {
    .settings-menu {
        top: auto;
        bottom: 170px; /* Above terrain toggle */
        right: 12px;
    }

    .settings-btn {
        /* 44px minimum touch target */
        width: 44px;
        height: 44px;
        padding: 10px;
    }

    .settings-panel {
        top: auto;
        bottom: 44px;
        right: 0;
    }
}

@media (max-width: 480px) {
    .settings-menu {
        bottom: 180px;
    }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE UX IMPROVEMENTS
   Map-first, controls on-demand design for touch devices
   ═══════════════════════════════════════════════════════════ */

/* Mobile-only UI elements should never show unstyled on desktop (e.g. after resize). */
.legend-collapse-btn,
.var-selector-pill,
.var-selector-drawer,
.var-selector-backdrop,
.swipe-hint,
.catalog-mobile-nav,
.catalog-category-index {
    display: none;
}

/* --- Collapsible Legend with Side Arrow --- */
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) {
    .legend {
        transition: transform 0.3s var(--ease-out-expo);
    }

    .legend.collapsed {
        transform: translateX(calc(100% - 44px));
    }

    .legend-collapse-btn {
        position: absolute;
        left: -44px;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;  /* Touch target minimum */
        height: 52px;
        padding: 0;

        background: var(--surface-primary);
        backdrop-filter: blur(var(--blur-md));
        -webkit-backdrop-filter: blur(var(--blur-md));

        border: 1px solid var(--border-subtle);
        border-right: none;
        border-radius: 10px 0 0 10px;

        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;

        color: var(--text-secondary);
        box-shadow: var(--shadow-sm);

        transition: all var(--duration-normal) var(--ease-out-expo);

        /* Ensure button is clickable even though it's outside parent bounds */
        z-index: 10;
        pointer-events: auto;
    }

    .legend-collapse-btn:hover,
    .legend-collapse-btn:active {
        background: var(--surface-secondary);
        color: var(--text-primary);
    }

    .legend-collapse-btn svg {
        width: 16px;
        height: 16px;
        transition: transform 0.3s var(--ease-out-expo);
    }

    .legend.collapsed .legend-collapse-btn svg {
        transform: rotate(180deg);
    }

    /* Ensure legend has proper stacking for the collapse button */
    .legend {
        overflow: visible;
    }

    /* MapLibre controls - increase touch target to 44px minimum */
    .maplibregl-ctrl-group button {
        width: 44px;
        height: 44px;
    }

    .maplibregl-ctrl-group button + button {
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    /* Make compass easier to tap */
    .maplibregl-ctrl-compass {
        width: 44px;
        height: 44px;
    }

    /* Adjust icon size within larger buttons */
    .maplibregl-ctrl-icon {
        background-size: 24px;
    }
}

/* ========================================================================== */
/* Full-data v2 catalog and forecast inspector                                */
/* ========================================================================== */

.var-selector.layer-catalog {
    position: absolute;
    z-index: 24;
    top: 16px;
    left: 16px;
    bottom: var(--furniture-bottom);
    width: 300px;
    display: block;
    pointer-events: none;
}

.var-selector.layer-catalog.catalog-open {
    z-index: 56;
}

.layer-catalog-backdrop,
.catalog-drag-handle {
    display: none;
}

.catalog-collapse { display: none; }
.catalog-kbd { display: none; }

.layer-catalog-trigger {
    display: none;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    max-width: min(82vw, 310px);
    padding: 8px 12px;
    color: #fff;
    background: rgba(17, 23, 32, .88);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 14px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, .32);
    backdrop-filter: blur(18px) saturate(1.25);
    pointer-events: auto;
    cursor: pointer;
}

.catalog-trigger-icon,
.catalog-trigger-icon svg {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}

.catalog-trigger-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
    text-align: left;
}

.catalog-trigger-copy strong,
.catalog-trigger-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalog-trigger-copy strong { font-size: 13px; }
.catalog-trigger-copy small { color: rgba(255,255,255,.62); font-size: 10px; font-weight: 600; }
.catalog-trigger-chevron {
    margin-left: auto;
    opacity: .7;
    transition: transform .18s ease;
}
.layer-catalog.catalog-open .catalog-trigger-chevron { transform: rotate(180deg); }

.layer-catalog-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #f6f8fb;
    background: linear-gradient(160deg, rgba(20, 27, 38, .94), rgba(12, 17, 25, .9));
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
    backdrop-filter: blur(20px) saturate(1.2);
    pointer-events: auto;
}

.catalog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 6px;
}

.catalog-header > div { display: grid; gap: 2px; }
.catalog-header strong { font-size: 13px; letter-spacing: .01em; }
.catalog-header small { display: none; color: rgba(255,255,255,.56); font-size: 11px; }
.catalog-close {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: rgba(255,255,255,.08);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.catalog-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 12px 10px;
    padding: 0 11px;
    min-height: 42px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 12px;
    background: rgba(255,255,255,.06);
}

.catalog-search {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: #fff;
    background: transparent;
    font: inherit;
}
.catalog-search::placeholder { color: rgba(255,255,255,.45); }

.catalog-search-clear {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin-right: -7px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    color: rgba(255,255,255,.75);
    background: rgba(255,255,255,.08);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.catalog-search-clear[hidden],
.catalog-mobile-nav[hidden],
.catalog-category-index[hidden],
.catalog-search-results[hidden],
.catalog-view-map[hidden],
.catalog-context-controls[hidden],
.catalog-section[hidden] {
    display: none !important;
}

.catalog-context-controls {
    display: grid;
    gap: 8px;
    margin: 0 12px 10px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(80, 156, 255, .1);
    border: 1px solid rgba(104, 169, 255, .22);
}

.catalog-control-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: rgba(255,255,255,.72);
}

.catalog-level-control {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.catalog-level-control > legend {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.catalog-level-heading,
.catalog-level-picker {
    display: none;
}

.catalog-segments { display: flex; gap: 4px; }
.catalog-segments button,
.catalog-level-select {
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 9px;
    color: #fff;
    background: rgba(255,255,255,.08);
}
.catalog-segments button.active { background: var(--accent-btn); border-color: #6aa7ff; }

.catalog-quick-chips {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 0 12px 10px;
}
.catalog-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    max-width: 46%;
    padding: 0 11px;
    border: 0;
    border-radius: 9px;
    color: rgba(203, 213, 225, .85);
    background: rgba(255, 255, 255, .06);
    font: inherit;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.catalog-chip:hover { background: rgba(255, 255, 255, .1); }
.catalog-chip-favorites { color: #facc15; background: rgba(250, 204, 21, .12); font-weight: 600; }

.catalog-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 0 8px 12px;
}

.catalog-section {
    margin: 3px 0;
    border-radius: 12px;
    overflow: clip;
}

.catalog-section > summary,
.catalog-section > h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 40px;
    margin: 0;
    padding: 7px 10px;
    color: rgba(255,255,255,.68);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.catalog-section > summary::-webkit-details-marker { display: none; }
.catalog-section > summary span:last-child { opacity: .55; font-variant-numeric: tabular-nums; }

.catalog-search-results {
    display: grid;
    align-content: start;
    gap: 2px;
}

.catalog-search-heading {
    padding: 5px 10px 8px;
    color: rgba(255,255,255,.62);
    font-size: 11px;
    font-weight: 700;
}

.catalog-result-category {
    overflow: hidden;
    color: #8fc2ff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalog-search-empty {
    display: grid;
    justify-items: center;
    gap: 5px;
    padding: 34px 18px;
    color: rgba(255,255,255,.54);
    text-align: center;
}

.catalog-search-empty strong { color: rgba(255,255,255,.86); font-size: 14px; }
.catalog-search-empty span { max-width: 260px; font-size: 11px; }

.catalog-product-row {
    display: grid;
    grid-template-columns: 1fr 44px;
    align-items: stretch;
    min-height: 44px;
    margin: 2px 0;
    border-radius: 11px;
}
.catalog-product-row:hover { background: rgba(255,255,255,.07); }
.catalog-product-row.active {
    background: linear-gradient(90deg, rgba(51, 126, 232, .4), rgba(51, 126, 232, .12));
    box-shadow: inset 3px 0 #68a9ff;
}

.catalog-product-select {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 7px 6px 7px 10px;
    border: 0;
    color: inherit;
    text-align: left;
    background: transparent;
}
.catalog-product-select > span:last-child { display: grid; min-width: 0; gap: 2px; }
.catalog-product-select strong { overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.catalog-product-copy { min-width: 0; }
.catalog-product-title { display: flex; align-items: center; gap: 7px; min-width: 0; }
.catalog-product-title strong { min-width: 0; white-space: nowrap; }
.catalog-product-title em {
    flex: 0 0 auto;
    padding: 2px 6px;
    color: #bcd9ff;
    background: rgba(83, 154, 255, .18);
    border: 1px solid rgba(106, 169, 255, .3);
    border-radius: 999px;
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.2;
}
.catalog-product-select small {
    overflow: hidden;
    color: rgba(255,255,255,.48);
    font-size: 10px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.catalog-product-icon,
.catalog-product-icon svg { width: 22px; height: 22px; }

.catalog-favorite {
    min-width: 44px;
    min-height: 44px;
    border: 0;
    color: rgba(255,255,255,.55);
    background: transparent;
    font-size: 18px;
}
.catalog-favorite.active { color: #ffd45c; }

.layer-catalog-trigger:focus-visible,
.catalog-close:focus-visible,
.catalog-search-wrap:focus-within,
.catalog-product-select:focus-visible,
.catalog-favorite:focus-visible,
.catalog-segments button:focus-visible,
.catalog-level-option:focus-visible,
.catalog-section > summary:focus-visible {
    outline: 2px solid #8fc2ff;
    outline-offset: 2px;
}

.catalog-footer {
    display: grid;
    gap: 8px;
    padding: 10px 12px 12px;
    border-top: 1px solid rgba(255,255,255,.09);
}
.catalog-footer > label { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }

.catalog-view-map {
    min-height: 46px;
    width: 100%;
    border: 1px solid #82baff;
    border-radius: 12px;
    color: #fff;
    background: var(--accent-btn);
    box-shadow: 0 6px 18px rgba(37, 107, 207, .28), inset 0 1px rgba(255,255,255,.18);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.forecast-inspector.maplibregl-popup {
    z-index: 23;
    width: min(380px, calc(100vw - 32px));
}
.forecast-inspector.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.forecast-inspector.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.forecast-inspector.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
    border-bottom-color: rgba(16, 23, 33, .94);
}
.forecast-inspector.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.forecast-inspector.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.forecast-inspector.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
    border-top-color: rgba(16, 23, 33, .94);
}
.forecast-inspector.maplibregl-popup-anchor-left .maplibregl-popup-tip {
    border-right-color: rgba(16, 23, 33, .94);
}
.forecast-inspector.maplibregl-popup-anchor-right .maplibregl-popup-tip {
    border-left-color: rgba(16, 23, 33, .94);
}
.forecast-inspector .maplibregl-popup-content {
    box-sizing: border-box;
    padding: 17px;
    color: #f7f9fc;
    background: rgba(16, 23, 33, .94);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 18px;
    box-shadow: 0 18px 55px rgba(0,0,0,.38);
    backdrop-filter: blur(20px) saturate(1.2);
}
.forecast-inspector .popup-header { display: flex; align-items: center; gap: 8px; padding-right: 24px; }
.forecast-inspector .popup-weather-icon { width: 36px; height: 36px; object-fit: contain; }
.forecast-inspector .popup-description { margin: 6px 0 9px; color: rgba(255,255,255,.56); font-size: 11px; line-height: 1.35; }

.forecast-point-marker {
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    pointer-events: none;
    background: #2f87ff;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow:
        0 0 0 4px rgba(47, 135, 255, .28),
        0 2px 8px rgba(0, 0, 0, .55);
}

.new-run-banner {
    position: fixed;
    z-index: 60;
    top: 14px;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translateX(-50%);
    padding: 8px 9px 8px 14px;
    color: #fff;
    background: rgba(18, 26, 37, .96);
    border: 1px solid rgba(108, 174, 255, .45);
    border-radius: 13px;
    box-shadow: 0 12px 35px rgba(0,0,0,.35);
}
.new-run-banner button { min-height: 34px; padding: 0 12px; border: 0; border-radius: 9px; color: #fff; background: var(--accent-btn); }

@media (min-width: 769px) and (min-height: 501px) {
    .layer-catalog .catalog-close { display: none; }
    .layer-catalog .catalog-collapse {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 11px;
        color: rgba(255, 255, 255, .78);
        background: rgba(255, 255, 255, .06);
        font-size: 18px;
        cursor: pointer;
    }
    .layer-catalog .catalog-collapse:hover { background: rgba(255, 255, 255, .1); }
    .catalog-kbd {
        display: inline-block;
        padding: 2px 7px;
        border: 1px solid rgba(255, 255, 255, .15);
        border-radius: 6px;
        color: rgba(148, 163, 184, .78);
        font-family: var(--font-mono);
        font-size: 10px;
        white-space: nowrap;
    }
    .layer-catalog.catalog-collapsed .layer-catalog-panel { display: none; }
    .layer-catalog.catalog-collapsed { bottom: auto; }
    .layer-catalog.catalog-collapsed .layer-catalog-trigger { display: flex; }
    #level-rail-dock {
        position: absolute;
        left: 332px;   /* 16 + 300 panel + 16 gutter */
        top: 16px;
        bottom: var(--furniture-bottom);
        transform: none;
        display: flex;
        align-items: center;
        z-index: 24;
        pointer-events: auto;
    }
    #level-rail-dock.rail-collapsed-dock { left: 16px; }
    .level-rail {
        display: flex;
        flex-direction: column;
        align-items: center;
        -webkit-user-select: none;
        user-select: none;
        max-height: 100%;
        box-sizing: border-box;
        gap: 8px;
        padding: 12px 11px;
        color: rgba(248, 250, 252, .95);
        background: linear-gradient(160deg, rgba(20, 27, 38, .94), rgba(12, 17, 25, .9));
        border: 1px solid rgba(255, 255, 255, .15);
        border-radius: 15px;
        box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
        backdrop-filter: blur(20px) saturate(1.2);
    }
    .level-rail-unit, .level-rail-alt {
        font-family: var(--font-mono);
        font-size: 10px;
        color: rgba(148, 163, 184, .78);
        text-align: center;
    }
    .level-rail-track {
        position: relative;
        height: min(340px, calc(100vh - 300px));
        width: 58px;
        cursor: grab;
        touch-action: none;
    }
    .level-rail-track:focus-visible { outline: 2px solid #8fc2ff; outline-offset: 3px; border-radius: 8px; }
    .level-rail-ramp {
        position: absolute;
        left: 4px;
        top: 0;
        bottom: 0;
        width: 7px;
        border-radius: 4px;
        background: linear-gradient(to bottom, rgba(139, 92, 246, .55), rgba(59, 130, 246, .5) 55%, rgba(249, 115, 22, .55));
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
    }
    .level-rail-tick {
        position: absolute;
        left: 15px;
        display: flex;
        align-items: center;
        gap: 6px;
        transform: translateY(-50%);
    }
    .level-rail-tick i { width: 9px; height: 1.5px; background: rgba(255, 255, 255, .4); }
    .level-rail-tick b {
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 500;
        color: rgba(148, 163, 184, .78);
    }
    .level-rail-tick.active i { background: rgba(255, 255, 255, .9); }
    .level-rail-tick.active b {
        padding: 1px 7px;
        border-radius: 7px;
        color: #fff;
        background: var(--accent-btn);
        font-weight: 600;
    }
    .level-rail-thumb {
        position: absolute;
        left: 0;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: #fff;
        transform: translate(0, -50%);
        box-shadow: 0 0 0 3px var(--accent-btn), 0 4px 12px rgba(0, 0, 0, .5);
        pointer-events: none;
    }
    /* The rail replaces the grid picker on desktop; mobile keeps the grid. */
    .catalog-level-picker { display: none; }
    .catalog-level-control .catalog-level-heading { margin-bottom: 0; }
    .timebar-dock {
        left: 16px;
        right: 16px;
        width: auto;
        transform: none;
    }
}

@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) {
    .startup-status-stack {
        right: max(8px, env(safe-area-inset-right));
        bottom: max(80px, calc(70px + env(safe-area-inset-bottom)));
        left: max(8px, env(safe-area-inset-left));
        justify-items: center;
        max-width: none;
    }

    body.layer-catalog-open {
        overflow: hidden;
    }

    .layer-catalog-backdrop {
        position: fixed;
        z-index: 54;
        inset: 0;
        display: block;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        background: rgba(5, 9, 15, .42);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        transition: opacity .2s ease, visibility .2s ease;
    }

    .layer-catalog-backdrop.visible {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    .var-selector.layer-catalog {
        top: max(12px, env(safe-area-inset-top));
        left: 12px;
        right: auto;
        bottom: auto;
        width: auto;
    }
    .layer-catalog-trigger {
        display: flex;
        min-width: min(230px, calc(100vw - 112px));
        max-width: min(78vw, 330px);
        padding: 7px 11px;
    }
    .layer-catalog-panel {
        position: fixed;
        z-index: 1;
        right: max(8px, env(safe-area-inset-right));
        bottom: max(8px, env(safe-area-inset-bottom));
        left: max(8px, env(safe-area-inset-left));
        width: auto;
        max-width: calc(100dvw - max(16px, env(safe-area-inset-left)) - max(16px, env(safe-area-inset-right)));
        height: min(88dvh, 760px, calc(var(--catalog-visual-height, 100dvh) - 16px));
        max-height: calc(var(--catalog-visual-height, 100dvh) - 16px);
        border-radius: 24px;
        transform: translateY(calc(100% + 20px));
        opacity: 0;
        visibility: hidden;
        transition: transform .26s cubic-bezier(.2, .8, .2, 1), opacity .18s ease, visibility .26s;
    }
    .layer-catalog.catalog-open .layer-catalog-panel {
        transform: translateY(var(--catalog-drag-y, 0));
        opacity: 1;
        visibility: visible;
    }

    .layer-catalog-panel.catalog-dragging { transition: none; }

    .catalog-drag-handle {
        display: flex;
        flex: 0 0 24px;
        align-items: center;
        justify-content: center;
        touch-action: none;
        cursor: grab;
    }

    .catalog-drag-handle > span {
        width: 42px;
        height: 5px;
        border-radius: 999px;
        background: rgba(255,255,255,.32);
    }

    .catalog-header { flex: 0 0 auto; padding: 2px 14px 9px 16px; }
    .catalog-search-wrap { min-height: 44px; }
    .catalog-search {
        font-size: 16px;
        line-height: 1.25;
    }
    .catalog-search-clear {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        margin-right: -9px;
        touch-action: manipulation;
    }

    .catalog-mobile-nav {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        gap: 10px;
        min-height: 42px;
        margin: -2px 12px 8px;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(255,255,255,.09);
    }

    .catalog-mobile-back {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        min-height: 40px;
        padding: 0 8px 0 3px;
        border: 0;
        border-radius: 9px;
        color: #9dc9ff;
        background: transparent;
        font: inherit;
        font-size: 12px;
        font-weight: 700;
    }

    .catalog-mobile-back span { font-size: 28px; font-weight: 400; line-height: .8; }
    .catalog-mobile-nav > strong {
        min-width: 0;
        overflow: hidden;
        color: rgba(255,255,255,.9);
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .catalog-category-index {
        display: grid;
        align-content: start;
        gap: 5px;
        padding: 2px 2px 8px;
    }

    .catalog-category-button {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto 24px;
        align-items: center;
        gap: 8px;
        min-height: 58px;
        padding: 8px 9px 8px 12px;
        border: 1px solid transparent;
        border-radius: 13px;
        color: rgba(255,255,255,.84);
        background: rgba(255,255,255,.035);
        font: inherit;
        text-align: left;
        touch-action: manipulation;
    }

    .catalog-category-button > span:first-child { display: grid; min-width: 0; gap: 1px; }
    .catalog-category-button strong {
        overflow: hidden;
        font-size: 13px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .catalog-category-button small { color: #8fc2ff; font-size: 9px; font-weight: 700; }
    .catalog-category-button.current {
        border-color: rgba(104, 169, 255, .28);
        background: linear-gradient(90deg, rgba(51, 126, 232, .22), rgba(51, 126, 232, .06));
    }
    .catalog-category-count {
        min-width: 26px;
        color: rgba(255,255,255,.48);
        font-size: 11px;
        font-variant-numeric: tabular-nums;
        text-align: right;
    }
    .catalog-category-chevron { color: rgba(255,255,255,.5); font-size: 27px; line-height: 1; }

    .catalog-context-controls {
        gap: 9px;
        margin-bottom: 9px;
        padding: 9px;
    }

    .catalog-control-group {
        align-items: stretch;
    }

    .catalog-level-control {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
        gap: 9px;
        width: 100%;
    }

    .catalog-level-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .catalog-level-heading > span {
        color: rgba(255,255,255,.74);
        font-size: 11px;
        font-weight: 700;
    }

    .catalog-level-heading output {
        display: grid;
        justify-items: end;
        gap: 1px;
    }

    .catalog-level-heading output strong {
        color: #fff;
        font-size: 13px;
        font-variant-numeric: tabular-nums;
    }

    .catalog-level-heading output small {
        color: rgba(255,255,255,.54);
        font-size: 9px;
        font-weight: 600;
    }

    .catalog-level-select { display: none; }

    .catalog-level-picker {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
        gap: 6px;
        width: 100%;
    }

    .catalog-level-option {
        min-width: 44px;
        min-height: 44px;
        padding: 0 5px;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 10px;
        color: rgba(255,255,255,.76);
        background: rgba(255,255,255,.065);
        font: inherit;
        font-variant-numeric: tabular-nums;
        cursor: pointer;
        transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
    }

    .catalog-level-option:active { transform: scale(.96); }
    .catalog-level-option.active {
        color: #fff;
        background: var(--accent-btn);
        border-color: #8ec1ff;
        box-shadow: 0 5px 14px rgba(37, 107, 207, .32), inset 0 1px rgba(255,255,255,.18);
    }

    .catalog-scroll {
        min-width: 0;
        padding-bottom: 8px;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .catalog-section > summary,
    .catalog-section > h3 { display: none; }
    .catalog-search-results { padding: 0 2px 8px; }
    .catalog-result-category { font-size: 9px; }
    .catalog-section > summary { min-height: 44px; }
    .catalog-product-row { min-height: 54px; }
    .catalog-chip { min-height: 44px; }
    .catalog-product-select, .catalog-favorite, .catalog-close, .catalog-mobile-back,
    .catalog-segments button, .catalog-level-select { min-width: 44px; min-height: 44px; }
    .catalog-footer { flex: 0 0 auto; }
    .forecast-inspector.maplibregl-popup {
        position: fixed !important;
        top: auto !important;
        right: 8px !important;
        bottom: max(78px, calc(66px + env(safe-area-inset-bottom))) !important;
        left: 8px !important;
        transform: none !important;
        width: auto;
    }
    .forecast-inspector .maplibregl-popup-tip { display: none; }
    .forecast-inspector .maplibregl-popup-content {
        min-width: 0;
        max-height: min(52vh, 460px);
        overflow-y: auto;
        border-radius: 20px;
    }
    .new-run-banner { top: max(10px, env(safe-area-inset-top)); width: calc(100vw - 104px); }
}

@media (orientation: landscape) and (max-height: 500px) {
    .layer-catalog-panel {
        top: max(8px, env(safe-area-inset-top));
        right: max(8px, env(safe-area-inset-right));
        bottom: max(8px, env(safe-area-inset-bottom));
        left: auto;
        width: min(430px, calc(100vw - max(16px, env(safe-area-inset-left)) - max(16px, env(safe-area-inset-right))));
        height: auto;
        max-height: none;
        border-radius: 20px;
        transform: translateX(calc(100% + 20px));
    }

    .layer-catalog.catalog-open .layer-catalog-panel { transform: translateX(0); }
    .catalog-drag-handle { display: none; }
    .catalog-header { padding: 8px 10px 5px 13px; }
    .catalog-header small { display: none; }
    .catalog-search-wrap { min-height: 38px; margin: 0 9px 6px; }
    .catalog-context-controls { margin: 0 9px 6px; padding: 7px; }
    .catalog-level-control { gap: 6px; }
    .catalog-level-heading output { display: flex; align-items: baseline; gap: 6px; }
    .catalog-level-picker {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 2px;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }
    .catalog-level-picker::-webkit-scrollbar { display: none; }
    .catalog-level-option { flex: 0 0 52px; min-height: 42px; scroll-snap-align: center; }
    .catalog-scroll { padding-bottom: 4px; }
    .catalog-product-row { min-height: 48px; }
    .catalog-footer { padding: 6px 10px 7px; }
}

@media (orientation: portrait) and (max-width: 768px) and (max-height: 640px) {
    .catalog-context-controls { padding: 7px; }
    .catalog-level-control { gap: 6px; }
    .catalog-level-heading output { display: flex; align-items: baseline; gap: 6px; }
    .catalog-level-picker {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 2px;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }
    .catalog-level-picker::-webkit-scrollbar { display: none; }
    .catalog-level-option { flex: 0 0 54px; scroll-snap-align: center; }
    .catalog-product-row { min-height: 50px; }
    .catalog-footer { padding-top: 7px; padding-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .layer-catalog-panel,
    .layer-catalog-backdrop,
    .catalog-trigger-chevron,
    .catalog-level-option {
        transition: none;
    }
}

/* --- Auto-hide Controls on Inactivity --- */
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) {
    /*
     * Faded controls remain clickable (no pointer-events: none).
     * Tapping a faded control resets the idle timer and restores full opacity.
     * This avoids a UX dead-end where users can't interact with controls.
     */
    body.mobile-controls-faded .var-selector,
    body.mobile-controls-faded .var-selector-pill,
    body.mobile-controls-faded .legend,
    body.mobile-controls-faded .settings-menu,
    body.mobile-controls-faded .terrain-3d-toggle {
        opacity: 0.2;
        transition: opacity 0.4s ease;
    }

    body.mobile-controls-faded .timebar-dock {
        opacity: 0.25;
        transition: opacity 0.4s ease;
    }

    /* Keep play button more visible */
    body.mobile-controls-faded .timebar-play-btn {
        opacity: 0.6;
    }

    /* Restore on interaction - still works because pointer-events is auto */
    body.mobile-controls-faded .legend:hover,
    body.mobile-controls-faded .legend:focus-within,
    body.mobile-controls-faded .var-selector-pill:hover,
    body.mobile-controls-faded .var-selector-pill:focus-within,
    body.mobile-controls-faded .timebar-dock:hover,
    body.mobile-controls-faded .timebar-dock:focus-within {
        opacity: 1;
    }
}

/* --- Mobile Variable Selector Pill & Drawer --- */
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) {
    /* Hide original var-selector on mobile */
    .var-selector {
        display: none !important;
    }

    /* Collapsed pill trigger */
    .var-selector-pill {
        position: fixed;
        top: calc(12px + env(safe-area-inset-top));
        left: calc(12px + env(safe-area-inset-left));
        padding: 10px 14px;

        background: var(--surface-primary);
        backdrop-filter: blur(var(--blur-md));
        -webkit-backdrop-filter: blur(var(--blur-md));

        border: 1px solid var(--border-subtle);
        border-radius: 12px;
        box-shadow: var(--shadow-md);

        display: flex;
        align-items: center;
        gap: 10px;

        cursor: pointer;
        z-index: 3;

        transition: all var(--duration-normal) var(--ease-out-expo);
    }

    .var-selector-pill:hover,
    .var-selector-pill:active {
        background: var(--surface-secondary);
        border-color: var(--border-visible);
    }

    .var-selector-pill .pill-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        color: var(--text-tertiary);
    }

    .var-selector-pill .pill-icon svg {
        width: 16px;
        height: 16px;
    }

    .var-selector-pill .pill-label {
        font-size: 13px;
        font-weight: 600;
        color: var(--text-primary);
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .var-selector-pill .pill-chevron {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 14px;
        height: 14px;
        color: var(--text-tertiary);
        transition: transform 0.2s;
    }

    .var-selector-pill .pill-chevron svg {
        width: 12px;
        height: 12px;
    }

    .var-selector-pill.open .pill-chevron {
        transform: rotate(180deg);
    }

    /* Full drawer */
    .var-selector-drawer {
        display: block;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 300px;
        max-width: 85vw;

        background: var(--surface-glass);
        backdrop-filter: blur(var(--blur-lg));
        -webkit-backdrop-filter: blur(var(--blur-lg));

        border-right: 1px solid var(--border-subtle);
        box-shadow: var(--shadow-xl);

        transform: translateX(-100%);
        transition: transform 0.3s var(--ease-out-expo);

        z-index: 100;
        overflow-y: auto;
        padding: 20px;
        padding-top: calc(60px + env(safe-area-inset-top)); /* Space for close button + notch */
    }

    .var-selector-drawer.open {
        transform: translateX(0);
    }

    .var-selector-drawer .drawer-header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        padding: calc(16px + env(safe-area-inset-top)) 20px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--border-subtle);
        background: var(--surface-glass);
    }

    .var-selector-drawer .drawer-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
        letter-spacing: 0.3px;
    }

    .var-selector-drawer .drawer-close {
        /* 44px minimum touch target */
        width: 44px;
        height: 44px;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-secondary);
        transition: all var(--duration-fast);
    }

    .var-selector-drawer .drawer-close:hover {
        background: var(--surface-secondary);
        color: var(--text-primary);
    }

    .var-selector-drawer .drawer-close svg {
        width: 18px;
        height: 18px;
    }

    /* Style var groups inside drawer - 44px minimum touch targets */
    .var-selector-drawer .var-group {
        margin-bottom: 4px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .var-selector-drawer .var-subitem {
        margin-left: 28px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Backdrop */
    .var-selector-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
        z-index: 99;
    }

    .var-selector-backdrop.visible {
        opacity: 1;
        pointer-events: auto;
    }

    body.mobile-var-menu-open {
        overflow: hidden;
        overscroll-behavior: none;
    }
}

/* Hide mobile compact timebar by default (shown via media query on mobile) */
.timebar-compact-display {
    display: none;
}

/* --- Compact Timebar --- */
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) {
    .timebar-dock.compact {
        height: auto;
        min-height: 52px;
        padding: 8px 14px;
    }

    .timebar-dock.compact .timebar {
        display: none;
    }

    .timebar-compact-display {
        display: none;
        align-items: center;
        gap: 14px;
        width: 100%;
    }

    .timebar-dock.compact .timebar-compact-display {
        display: flex;
    }

    .timebar-compact-display .compact-time {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        padding: 6px 10px;
        border-radius: 8px;
        transition: background var(--duration-fast);
    }

    .timebar-compact-display .compact-time:hover {
        background: var(--surface-secondary);
    }

    .timebar-compact-display .compact-date {
        font-size: 11px;
        font-weight: 600;
        color: var(--text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .timebar-compact-display .compact-hour {
        font-size: 16px;
        font-weight: 700;
        color: var(--text-primary);
        font-variant-numeric: tabular-nums;
    }

    .timebar-compact-display .compact-expand {
        color: var(--text-tertiary);
        font-size: 12px;
        opacity: 0.6;
    }

    .timebar-compact-display .compact-nav {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .timebar-compact-display .compact-nav-btn {
        width: 44px;   /* Touch target minimum */
        height: 44px;  /* Touch target minimum */
        padding: 0;
        background: var(--surface-secondary);
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-secondary);
        transition: all var(--duration-fast);
    }

    .timebar-compact-display .compact-nav-btn:hover,
    .timebar-compact-display .compact-nav-btn:active {
        background: var(--surface-elevated);
        color: var(--text-primary);
    }

    .timebar-compact-display .compact-nav-btn svg {
        width: 14px;
        height: 14px;
    }

    /* Swipe hint indicator */
    .swipe-hint {
        display: block;
        position: fixed;
        bottom: calc(80px + env(safe-area-inset-bottom));
        left: 50%;
        transform: translateX(-50%);
        padding: 8px 16px;
        background: var(--surface-glass);
        backdrop-filter: blur(var(--blur-md));
        border: 1px solid var(--border-subtle);
        border-radius: 20px;
        font-size: 12px;
        color: var(--text-secondary);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
        z-index: 5;
    }

    .swipe-hint.visible {
        opacity: 1;
    }

    /* Fix attribution overlap with timebar */
    .maplibregl-ctrl-attrib {
        bottom: calc(70px + env(safe-area-inset-bottom)) !important;
    }

    /* Ensure pill has minimum touch target height */
    .var-selector-pill {
        min-height: 44px;
    }
}

/* --- Landscape Mobile Layout --- */
@media (orientation: landscape) and (max-height: 500px) {
    .var-selector-pill {
        top: calc(8px + env(safe-area-inset-top));
        left: calc(8px + env(safe-area-inset-left));
        padding: 8px 12px;
    }

    .var-selector-pill .pill-label {
        font-size: 12px;
        max-width: 100px;
    }

    .timebar-dock {
        left: 8px;
        bottom: 8px;
        width: auto;
        min-width: 200px;
        max-width: 50vw;
        transform: none;
    }

    .timebar-dock.compact {
        min-height: 40px;
        padding: 6px 10px;
    }

    .timebar-compact-display .compact-hour {
        font-size: 14px;
    }

    .timebar-compact-display .compact-nav-btn {
        /* Keep 44px minimum touch target even in landscape */
        width: 44px;
        height: 44px;
    }

    .legend {
        /* In landscape, position from top instead of centered to prevent overflow */
        top: 8px;
        transform: none;
        max-height: calc(100vh - 80px); /* Account for timebar at bottom */
        overflow-y: auto;
        padding: 6px 8px 10px;
    }

    .legend-blocks {
        /* Make blocks container scrollable */
        max-height: calc(100vh - 130px);
        overflow-y: auto;
    }

    .legend-block {
        height: 12px;
        min-height: 12px;
        font-size: 8px;
    }

    .legend-collapse-btn {
        /* 44px minimum touch target in both dimensions */
        height: 44px;
        width: 44px;
        left: -44px;
    }

    /* Hide non-essential controls in landscape */
    .terrain-3d-toggle,
    .settings-menu,
    .terrain-onboarding {
        display: none !important;
    }

    /* Adjust map controls */
    .maplibregl-ctrl-top-right {
        top: 8px;
        right: 8px;
    }

    /* Keep 44px minimum touch targets in landscape too */
    .maplibregl-ctrl-group button {
        width: 44px;
        height: 44px;
    }
}

/* --- Small Phones (iPhone SE, etc.) --- */
@media (max-width: 375px) {
    .var-selector-pill {
        padding: 8px 12px;
    }

    .var-selector-pill .pill-label {
        max-width: 100px;
        font-size: 12px;
    }

    .var-selector-drawer {
        width: 100%;
        max-width: 100%;
    }

    .legend {
        padding: 8px 10px 12px;
    }

    .legend-block {
        height: 16px;
        font-size: 9px;
    }

    .timebar-dock.compact {
        padding: 6px 10px;
    }

    .timebar-compact-display .compact-hour {
        font-size: 14px;
    }
}

/* ═══════════════════════════════════════════════════════════
   ACCESSIBILITY: Focus Visible States
   Ensures keyboard users can see which element is focused
   ═══════════════════════════════════════════════════════════ */

.var-group:focus-visible,
.var-subitem:focus-visible,
.settings-btn:focus-visible,
.legend-collapse-btn:focus-visible,
.terrain-3d-toggle:focus-visible,
.compact-nav-btn:focus-visible,
.drawer-close:focus-visible,
.lang-btn:focus-visible,
.unit-btn:focus-visible,
.legend-drag-handle:focus-visible,
.var-selector-pill:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE: Freely Draggable Legend
   The legend can be repositioned anywhere on screen via drag
   ═══════════════════════════════════════════════════════════ */

/* Hide drag handle on desktop (must come before mobile media query) */
.legend-drag-handle {
    display: none;
}

@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) {
    /* Override the old collapse-based positioning */
    .legend.legend-floating {
        position: fixed;
        top: auto;
        right: auto;
        bottom: auto;
        transform: none;
        z-index: 10;
        touch-action: none;
        user-select: none;
    }

    /* Hide the old collapse button when in floating mode */
    .legend.legend-floating .legend-collapse-btn {
        display: none !important;
    }

    /* Drag handle at the top of the legend */
    .legend-drag-handle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(100% + 28px); /* Account for legend's 14px padding on each side */
        height: 32px;
        margin: -14px -14px 8px -14px;
        padding: 0;
        border: none;
        background: var(--surface-elevated);
        cursor: grab;
        touch-action: none;
        border-radius: 16px 16px 0 0;
        border-bottom: 1px solid var(--border-subtle);
        transition: background var(--duration-fast);
    }

    .legend-drag-handle:hover {
        background: var(--surface-secondary);
    }

    .legend-drag-handle:active {
        cursor: grabbing;
        background: var(--surface-primary);
    }

    /* Drag grip indicator (horizontal pill) */
    .legend-drag-grip {
        width: 36px;
        height: 5px;
        background: var(--text-secondary);
        border-radius: 3px;
        opacity: 0.6;
        transition: opacity var(--duration-fast);
    }

    .legend-drag-handle:hover .legend-drag-grip {
        opacity: 0.9;
    }

    /* Active dragging state */
    .legend.legend-dragging {
        opacity: 0.9;
        box-shadow: var(--shadow-lg), 0 0 40px rgba(0, 0, 0, 0.4);
    }

    .legend.legend-dragging .legend-drag-handle {
        cursor: grabbing;
    }

    /* Adjust legend padding to account for drag handle */
    .legend.legend-floating {
        padding-top: 14px;
    }

    /* ─────────────────────────────────────────────────────────
       Hide Button (X icon in drag handle)
       ───────────────────────────────────────────────────────── */
    .legend-hide-btn {
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        padding: 0;
        border: none;
        background: transparent;
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-tertiary);
        transition: all var(--duration-fast);
    }

    .legend-hide-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        color: var(--text-primary);
    }

    .legend-hide-btn:active {
        background: rgba(255, 255, 255, 0.15);
        transform: translateY(-50%) scale(0.95);
    }

    .legend-hide-btn svg {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        stroke-width: 2.5;
    }

    /* Make drag handle relative for absolute positioning of hide button */
    .legend-drag-handle {
        position: relative;
    }

    /* ─────────────────────────────────────────────────────────
       Legend Hidden State
       ───────────────────────────────────────────────────────── */
    .legend.legend-hidden {
        opacity: 0;
        visibility: hidden;
        transform: scale(0.95);
        pointer-events: none;
        transition: all 0.25s var(--ease-out-expo);
    }

    /* ─────────────────────────────────────────────────────────
       Show Legend Button (floating, appears when legend hidden)
       ───────────────────────────────────────────────────────── */
    .legend-show-btn {
        position: fixed;
        bottom: calc(160px + env(safe-area-inset-bottom));
        right: 12px;
        z-index: 10;

        width: 44px;
        height: 44px;
        padding: 0;
        border: none;

        background: var(--surface-glass);
        backdrop-filter: blur(var(--blur-lg)) saturate(1.4);
        -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(1.4);

        border-radius: 12px;
        border: 1px solid var(--border-subtle);
        box-shadow: var(--shadow-md);

        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;

        color: var(--text-secondary);

        /* Hidden by default */
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        pointer-events: none;
        transition: all 0.25s var(--ease-out-expo);
    }

    .legend-show-btn.visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .legend-show-btn:hover {
        background: var(--surface-secondary);
        color: var(--text-primary);
        border-color: var(--border-visible);
    }

    .legend-show-btn:active {
        transform: scale(0.95);
    }

    .legend-show-btn svg {
        width: 22px;
        height: 22px;
        fill: currentColor;
    }
}

/* Hide show button on desktop */
.legend-show-btn {
    display: none;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE: Improved Compact Time Display Readability
   Add text shadow/outline so text is visible against any map colors
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) {
    /* Improved text readability for compact date/hour in dock */
    .timebar-dock.compact .timebar-compact-display .compact-date,
    .timebar-dock.compact .timebar-compact-display .compact-hour {
        /* Strong text shadow for visibility against any map background */
        text-shadow:
            0 1px 2px rgba(0, 0, 0, 0.9),
            0 0 8px rgba(0, 0, 0, 0.8),
            0 0 16px rgba(0, 0, 0, 0.5);
    }

    .timebar-dock.compact .timebar-compact-display .compact-hour {
        /* Slightly larger and bolder for better visibility */
        font-weight: 800;
        letter-spacing: 0.5px;
    }

    .timebar-dock.compact .timebar-compact-display .compact-date {
        /* Slightly larger weight for date as well */
        font-weight: 700;
    }

    /* Add subtle background to time display area for contrast */
    .timebar-dock.compact .timebar-compact-display .compact-time {
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-radius: 10px;
        padding: 8px 14px;
    }
}

/* v2 compatibility overrides must follow the legacy mobile selector rules. */
.legend.categorical {
    min-width: 158px;
}

.legend.categorical .legend-bar {
    width: 158px;
}

.legend.categorical .legend-block {
    min-height: 22px;
    height: 22px;
    justify-content: flex-start;
    padding: 0 10px;
}

.legend.categorical .legend-label {
    font-size: 10px;
    white-space: nowrap;
}

@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) {
    .var-selector.layer-catalog {
        display: block !important;
    }

    .layer-catalog-trigger {
        display: flex !important;
    }

    body.mobile-controls-faded .var-selector.layer-catalog.catalog-open {
        opacity: 1;
    }

    .legend.categorical {
        min-width: min(136px, 38vw);
    }

    .legend.categorical .legend-bar {
        width: min(136px, 38vw);
    }

    .legend.categorical .legend-block {
        min-height: 17px;
        height: 17px;
        padding: 0 8px;
    }

    .legend.categorical .legend-label {
        font-size: 9px;
    }

    .legend-show-btn.visible {
        display: flex;
    }
}