:root {
    /* Scientific Color Palette */
    --primary-color: #1a5490;
    --primary-dark: #0d3d6b;
    --primary-light: #2b6bb5;
    --secondary-color: #2c7a9f;
    --accent-color: #f4a261;
    --success-color: #2ecc71;
    --warning-color: #f39c12;
    --danger-color: #e74c3c;
    --info-color: #3498db;
    
    /* Neutral Colors */
    --bg-primary: #fafbfc;
    --bg-secondary: #f0f3f6;
    --bg-tertiary: #e8ecf1;
    --surface: #ffffff;
    --border: #d4dce6;
    --border-light: #e8ecf1;
    
    /* Text Colors */
    --text-primary: #1a2332;
    --text-secondary: #5a6c7d;
    --text-tertiary: #8b9aa8;
    --text-inverse: #ffffff;

    /* Surfaces used by hover/secondary controls. These were REFERENCED but never
       defined — an undefined custom property with no fallback makes the whole
       declaration invalid, so `background: var(--surface-hover)` silently painted
       nothing. Same class of bug as var(--primary), which never existed either
       (the palette calls it --primary-color). */
    --surface-alt: #f1f3f5;
    --surface-hover: #e6eaee;
    /* Components that need the brand colour inside rgba() need its channels. */
    --primary-rgb: 26, 84, 144;   /* #1a5490 */
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15);
    
    /* Typography */
    --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
    /* Points at the sans stack on purpose. The ALL-APTOS pass retired serif from the
       UI, but it did so by re-opening :root ~5,800 lines below and overriding this
       token, so the declaration here still read 'Crimson Pro' while every element
       using var(--font-serif) rendered in Aptos — and index.html went on requesting
       Crimson Pro from Google Fonts for a face nothing could use. Same decision,
       stated once, where the token is defined. */
    --font-serif: var(--font-sans);
    --font-sans: 'Aptos', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica', sans-serif;
    
    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    display: flex;
    flex-direction: column;
    font-family: var(--font-sans);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
}

/* Header */
.main-header {
    flex-shrink: 0; /* Don't compress */
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    z-index: 1100; /* Above map overlays (1000) so toolbar buttons never get covered */
    box-shadow: var(--shadow-sm);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 5px var(--space-lg); /* 5px top/bottom padding */
    height: 36px; /* Reduced from 50px for compact design */
    max-width: 2000px;
    margin: 0 auto;
}

/* The nav holds 9 tabs (~765px). Nothing here could shrink, so below ~1280px the
   header simply overflowed and the account/settings/help buttons were pushed off the
   right edge (clipped, since body is overflow:hidden — they were unreachable). The
   nav is now the part that gives: it shrinks first and scrolls once it runs out of
   room, so the logo and the action buttons always stay put. */
.logo-section,
.header-actions {
    flex: 0 0 auto;
}

.header-actions {
    align-items: center;
}

.main-nav {
    flex: 0 1 auto;
    min-width: 0;                 /* without this a flex item refuses to shrink */
    overflow-x: auto;
    scrollbar-width: none;
}

.main-nav::-webkit-scrollbar {
    display: none;
}

.main-nav .nav-btn {
    flex: 0 0 auto;               /* shrink the strip, not the labels */
}

.logo-section {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.logo {
    font-family: var(--font-mono);
    font-size: 1.3rem; /* Reduced from 1.5rem */
    font-weight: 600;
    color: var(--primary-color);
    letter-spacing: -0.02em;
    margin: 0;
}

.tagline {
    font-family: var(--font-sans);
    font-size: 0.65rem; /* Reduced from 0.7rem */
    color: var(--text-secondary);
    margin: 0;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.main-nav {
    display: flex;
    gap: 0; /* Remove gap - buttons will be adjacent */
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px;
    background: var(--bg-secondary);
}

.nav-btn {
    font-family: var(--font-sans);
    padding: 4px 12px; /* Reduced for 26px height */
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.75rem; /* Smaller from 0.8rem */
    font-weight: 500;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
    position: relative;
    white-space: nowrap;
    height: 26px; /* Match toolbar buttons */
    display: flex;
    align-items: center;
}

.nav-btn:hover {
    background: var(--surface);
    color: var(--text-primary);
}

/* AI assistant nav is account-gated — dim it when logged out. */
.nav-btn-locked {
    opacity: 0.45;
    cursor: not-allowed;
}

.nav-btn.active {
    color: var(--primary-color);
    background: var(--surface);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.nav-btn.active::after {
    display: none; /* Remove underline indicator */
}

.header-actions {
    display: flex;
    gap: var(--space-sm);
}

.icon-btn {
    width: 26px; /* Match nav button height */
    height: 26px;
    border-radius: 4px; /* Smaller radius */
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.icon-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-1px);
}

.icon-btn svg {
    width: 16px; /* Smaller icon */
    height: 16px;
}

/* Container & Layout */
.container {
    flex: 1; /* Fill remaining height after header */
    display: flex;
    overflow: hidden;
}

/* Sidebar - Compact design */
.sidebar {
    width: 300px;
    min-width: 300px;
    max-width: 300px; /* Prevent growth */
    background: var(--surface);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    overflow-x: hidden;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    flex-grow: 0; /* Don't grow */
    position: relative;
    z-index: 950;
}

.sidebar.collapsed {
    width: 0;
    min-width: 0;
    border-right: none;
    overflow: hidden;
}

/* Main Content */
.main-content {
    flex: 1;
    background: var(--bg-primary);
    display: flex;
    overflow: hidden;
    position: relative;
    transition: all var(--transition-base);
}

.sidebar-header {
    padding: 8px 12px; /* Reduced from 10px var(--space-lg) */
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
}

.sidebar-header h2 {
    font-family: var(--font-sans); /* Use Aptos */
    font-size: 0.95rem; /* Reduced from 1.1rem */
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.collapse-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px; /* Reduced from var(--space-xs) */
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.collapse-btn:hover {
    background: var(--bg-secondary);
    color: var(--primary-color);
}

.control-section {
    padding: 4px 8px; /* Ultra-compact: was 8px 12px */
    border-bottom: 1px solid var(--border-light);
    animation: slideIn 0.3s ease;
}

.control-section h3 {
    font-family: var(--font-sans);
    font-size: 0.65rem; /* Match toolbar size */
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px; /* Reduced from 8px */
}

/* Search Box */
.search-box {
    position: relative;
    margin-bottom: 8px; /* Reduced from 10px */
}

.search-box input {
    width: 100%;
    padding: 6px 10px; /* Reduced from var(--space-sm) var(--space-md) */
    padding-right: 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: 0.8rem; /* Reduced from 0.875rem */
    background: var(--bg-secondary);
    transition: all var(--transition-fast);
}

.search-box input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(26, 84, 144, 0.1);
}

.search-box svg {
    position: absolute;
    right: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    pointer-events: none;
}

/* Site List */
.site-list {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Multi-Select Site Dropdown */
.site-multiselect {
    width: 100%;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 0.7rem;
    background: var(--surface);
    color: var(--text-primary);
    max-height: 180px;
    overflow-y: auto;
}

.site-multiselect option {
    padding: 4px;
    cursor: pointer;
}

.site-multiselect option:checked {
    background: var(--primary-color);
    color: white;
}

/* Selection Controls */
.selection-controls {
    display: flex;
    gap: 3px;
    margin-top: 5px;
}

.btn-compact {
    flex: 1;
    padding: 3px 6px;
    font-family: var(--font-sans); /* Explicitly Aptos */
    font-size: 0.65rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s;
    font-weight: 500;
}

.btn-compact:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.btn-compact svg {
    vertical-align: middle;
    margin-right: 2px;
}

.selection-mode {
    margin-top: 5px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.65rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 12px;
    height: 12px;
    cursor: pointer;
}

/* Layer Controls */
.layer-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.layer-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px;
    font-size: 0.7rem;
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.15s;
}

.layer-item:hover {
    background: var(--bg-secondary);
}

.layer-item input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.layer-upload {
    margin-top: 8px;
}

.remote-layer-add {
    margin-top: 8px;
    display: flex;
    gap: 3px;
}

.input-compact {
    flex: 1;
    padding: 4px 6px;
    font-size: 0.65rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface);
}

.input-compact:focus {
    outline: none;
    border-color: var(--primary-color);
}

.custom-layers {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.custom-layer-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px;
    background: var(--bg-secondary);
    border-radius: 3px;
    font-size: 0.65rem;
}

.custom-layer-item .layer-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-layer-item .layer-controls {
    display: flex;
    gap: 3px;
}

.custom-layer-item button {
    padding: 2px 4px;
    font-size: 0.6rem;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-secondary);
}

.custom-layer-item button:hover {
    color: var(--primary-color);
}

/* Keep old styles for backwards compatibility */
.site-item {
    padding: 5px 10px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: var(--surface);
}

.site-item:hover {
    border-color: var(--primary-light);
    background: var(--bg-secondary);
    transform: translateX(2px);
}

.site-item.selected {
    border-color: var(--primary-color);
    background: rgba(26, 84, 144, 0.05);
}

.site-name {
    font-family: var(--font-sans);
    font-size: 0.75rem; /* Reduced from 0.8rem */
    font-weight: 500;
    color: var(--text-primary);
    display: block;
    margin-bottom: 2px; /* Reduced from 3px */
}

.site-location {
    font-size: 0.65rem; /* Reduced from 0.7rem */
    color: var(--text-secondary);
    display: block;
    margin-top: 0; /* Remove default margin */
}

/* Parameter Grid */
.parameter-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px; /* Reduced from var(--space-sm) */
}

.param-checkbox {
    display: flex;
    align-items: center;
    padding: 6px 8px; /* Reduced from var(--space-sm) */
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: var(--surface);
}

.param-checkbox:hover {
    border-color: var(--primary-light);
    background: var(--bg-secondary);
}

.param-checkbox input[type="checkbox"] {
    margin-right: 8px; /* Reduced from var(--space-sm) */
    width: 16px; /* Reduced from 18px */
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.param-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
}

.param-name {
    font-family: var(--font-mono);
    font-size: 0.8rem; /* Reduced from 0.875rem */
    color: var(--text-primary);
}

.param-unit {
    font-size: 0.7rem; /* Reduced from 0.75rem */
    color: var(--text-tertiary);
}

/* Time Controls */
.time-controls {
    display: flex;
    flex-direction: column;
    gap: 6px; /* Ultra-compact: was var(--space-md) */
}

.select-input {
    width: 100%;
    padding: 4px 8px; /* Ultra-compact: was var(--space-sm) var(--space-md) */
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans); /* Match toolbar */
    font-size: 0.65rem; /* Match toolbar: was 0.875rem */
    background: var(--surface);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.select-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(26, 84, 144, 0.1); /* Smaller shadow */
}

.custom-range {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.custom-range span {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: center;
}

.date-input {
    width: 100%;
    padding: var(--space-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    background: var(--surface);
}

/* Layer Controls */
.layer-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.layer-checkbox {
    display: flex;
    align-items: center;
    padding: var(--space-sm);
    cursor: pointer;
}

.layer-checkbox input[type="checkbox"] {
    margin-right: var(--space-sm);
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
}

.layer-checkbox span {
    font-size: 0.875rem;
    color: var(--text-primary);
}

/* Threshold Controls */
.threshold-control {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.threshold-control label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.threshold-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

.threshold-input {
    padding: var(--space-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    background: var(--surface);
}

/* Map Controls Bar (top-right) */
/* Map Controls (Fit Bounds, Refresh) - moved to top-right */
/* Classification Controls - moved to top-left */
.classification-controls {
    position: absolute;
    top: 5px; /* Reduced from 10px */
    left: 5px; /* Reduced from 10px */
    display: none; /* Hidden by default — only shown when sidebar is collapsed */
    gap: 8px; /* Reduced from 12px */
    align-items: center;
    background: var(--surface);
    padding: 6px 10px; /* Reduced from 8px 12px */
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    z-index: 998;
    animation: slideInLeft 0.3s ease;
}

/* Show the toolbar (and panel button inside it) when sidebar is collapsed —
   but ONLY on the map view */
.sidebar.collapsed ~ .main-content[data-view="map"] .classification-controls {
    display: flex;
}

.control-group-inline {
    display: flex;
    align-items: center;
    gap: 6px; /* Reduced from 8px */
}

.toolbar-divider {
    width: 1px;
    height: 26px; /* Reduced from 30px to match smaller buttons */
    background: var(--border);
    margin: 0 4px;
}

.control-group-inline label {
    font-family: var(--font-sans); /* Use Aptos */
    font-size: 0.65rem; /* Reduced from 0.7rem */
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.select-input-compact {
    padding: 3px 20px 3px 8px; /* Reduced right padding for arrow */
    font-family: var(--font-sans);
    font-size: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235a6c7d' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center; /* Closer to edge */
    transition: all var(--transition-base);
    min-width: 85px; /* Reduced from 100px */
    height: 26px;
}

.select-input-compact:hover {
    border-color: var(--primary-color);
}

.select-input-compact:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(26, 84, 144, 0.1);
}

.toggle-btn {
    display: flex;
    align-items: center;
    gap: 3px; /* Reduced from 4px */
    padding: 3px 8px; /* Reduced from 4px 10px */
    font-family: var(--font-sans); /* Use Aptos */
    font-size: 0.65rem; /* Reduced from 0.7rem */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
    height: 26px; /* Reduced from 30px to match selects */
}


.toggle-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.toggle-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-inverse);
}

.toggle-btn svg {
    width: 14px; /* Reduced from 16px */
    height: 14px;
}

.view {
    display: none;
    width: 100%;
    height: 100%;
    animation: fadeIn 0.3s ease;
}

.view.active {
    display: flex;
    flex-direction: column;
}

/* Analysis Lab (rstats / WASM compute): results can run taller than the viewport
   (example output, tables, plots) — let the view scroll instead of clipping. */
#rstats-view {
    overflow-y: auto;
    padding-bottom: 32px;
}

/* Map view: no scroll */
#map-view {
    overflow: hidden;
    position: relative; /* Contain absolutely-positioned map overlays so they hide with the view */
}

/* All other views: scrollable */
#analytics-view,
#ai-view,
#library-view,
#marketplace-view,
#data-view {
    overflow-y: auto;
    overflow-x: hidden;
}

/* Hide map overlays and controls on non-map views */
/* Controls live in main-content (not inside view divs), so we use
   a data-view attribute on main-content set by the view switcher */
.main-content:not([data-view="map"]) .classification-controls,
.main-content:not([data-view="map"]) .map-overlay,
.main-content:not([data-view="map"]) .leaflet-control-container {
    display: none !important;
    pointer-events: none !important;
}

/* Also keep the old selectors as fallback */
#analytics-view .map-overlay,
#ai-view .map-overlay,
#library-view .map-overlay,
#marketplace-view .map-overlay,
#data-view .map-overlay,
#analytics-view .leaflet-control,
#ai-view .leaflet-control,
#library-view .leaflet-control,
#marketplace-view .leaflet-control,
#data-view .leaflet-control,
#analytics-view .classification-controls,
#ai-view .classification-controls,
#library-view .classification-controls,
#marketplace-view .classification-controls,
#data-view .classification-controls {
    display: none !important;
}
/* Map View */
.map-container {
    flex: 1;
    position: relative;
    min-height: 400px; /* Ensure container has minimum height for stable legend positioning */
}

/* Zoom controls - compact and aligned */
.leaflet-control-zoom {
    margin-left: 5px !important; /* Align with toolbar */
    margin-bottom: 5px !important; /* Match other controls */
    opacity: 0.9;
    transition: opacity 0.2s, margin 0.3s;
}

/* Adjust when sidebar is collapsed */
.sidebar.collapsed ~ .main-content .leaflet-control-zoom {
    margin-left: 15px !important;
}

.leaflet-control-zoom:hover {
    opacity: 1;
}

/* Smaller zoom buttons to match scale bar */
.leaflet-control-zoom a {
    width: 24px !important; /* Smaller to match scale bar */
    height: 24px !important;
    line-height: 22px !important;
    font-size: 16px !important;
}

/* Adjust scale bar when sidebar collapsed */
.sidebar.collapsed ~ .main-content .leaflet-control-scale {
    left: 15px !important;
}

/* Site Labels */
.site-label {
    border: none !important;
    background: none !important;
    pointer-events: none;
    z-index: 1000 !important; /* Ensure above markers */
}

.label-content {
    position: relative;
    display: inline-block;
}

.label-text {
    display: inline-block;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(26, 84, 144, 0.3);
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

/* Label positioning above marker */
.leaflet-marker-icon.site-label {
    margin-top: -35px !important; /* Move up significantly */
    z-index: 1000 !important;
}

/* Custom cyan cluster styling */
.marker-cluster-cyan {
    background-color: rgba(39, 197, 245, 0.6) !important; /* #27C5F5 with transparency */
}

.marker-cluster-cyan div {
    background-color: rgba(39, 197, 245, 0.8) !important;
    width: 30px;
    height: 30px;
    margin-left: 5px;
    margin-top: 5px;
    text-align: center;
    border-radius: 15px;
    font-family: var(--font-sans);
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marker-cluster-cyan span {
    line-height: 30px;
}
#map {
    width: 100%;
    height: 100%;
    margin-bottom: 0 !important; /* Remove any bottom margin */
    padding-bottom: 0 !important; /* Remove any bottom padding */
}

/* Reduce Leaflet attribution bar height */
.leaflet-control-attribution {
    padding: 2px 5px !important; /* Ultra-compact: was default padding */
    font-size: 10px !important;
    line-height: 1.2 !important;
    background: rgba(255,255,255,0.8) !important;
}

.map-legend {
    position: absolute;
    bottom: 25px; /* 5px above attribution (~20px tall) */
    right: 5px;
    background: var(--surface);
    padding: 5px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 200px;
    max-width: 260px;
    max-height: calc(100vh - 100px); /* Leave room at top for toolbar */
    overflow-y: auto;
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    z-index: 500;
    transition: all 0.3s ease;
}

.map-legend.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(20px);
}

.legend-header {
    margin-bottom: 3px; /* Reduced from 5px */
    padding-top: 0; /* No extra top padding */
}

.map-legend h4 {
    font-family: var(--font-serif);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1px 0; /* Reduced from 2px - tighter spacing */
}

.legend-subtitle {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 3px; /* Small gap before classes */
}

.legend-items {
    display: flex;
    flex-direction: column;
    gap: 3px; /* Reduced from 5px for ultra-compact */
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
}

.legend-marker {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    border: 2px solid white;
    flex-shrink: 0;
}

.legend-marker.size-indicator {
    border: 2px solid var(--text-secondary);
    background: transparent;
}

.legend-item span {
    font-size: 0.75rem;
    color: var(--text-primary);
    line-height: 1.2;
}

.legend-item .count {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-left: auto;
}

.legend-exceedance {
    margin: 5px 0; /* Reduced to 5px */
    padding: 4px 0;
    border-top: 2px solid #e74c3c;
    border-bottom: 2px solid #e74c3c;
    text-align: center;
}

.legend-exceedance-text {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    color: #e74c3c;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Detail Panel
 *
 * Stacking order (the layers that actually collide):
 *   1000–1010  map overlays (legend, geocode, hints)
 *   1200       right-rail panels (fund-site, districts, forecast, my-water)
 *   1500       this panel — above the map chrome, BELOW modals
 *   2000       .modal
 *  10000+      toasts, tooltips, guided tour
 *
 * This used to be 9999, which put it above every modal: opening a site while
 * the Layers or Query Builder dialog was up painted the detail panel straight
 * through the dialog. `.main-content` has no z-index, so it is not a stacking
 * context and this value competes at the root — it must stay under 2000.
 */
.detail-panel {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    width: 400px !important;
    height: calc(100vh - 140px) !important; /* Fixed height based on viewport */
    max-height: 800px !important;
    background: #f5f7fa !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
    overflow: hidden !important; /* Hide overflow on container */
    display: flex !important;
    flex-direction: column !important;
    border: 3px solid #1a5490 !important;
    z-index: 1500 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
}

.detail-panel:not(.hidden) {
    animation: none !important;
}

.detail-header {
    padding: 5px 12px !important; /* Match modal header: was 0.5rem 0.75rem */
    background: linear-gradient(135deg, #1a5490, #0d3d6b) !important;
    color: white !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    min-height: 32px !important; /* Reduced from 40px */
    cursor: move; /* draggable handle (see _makeDetailPanelMovable) */
}
.detail-header .close-btn { cursor: pointer; }

/* Corner grip to resize the detail panel. */
.detail-resize-grip {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    z-index: 10000;
    background: linear-gradient(135deg, transparent 45%, rgba(26,84,144,0.55) 45%, rgba(26,84,144,0.55) 60%, transparent 60%, transparent 70%, rgba(26,84,144,0.55) 70%);
    border-bottom-right-radius: 10px;
}

.detail-header h3 {
    font-size: 0.85rem !important; /* Match modal h2 */
    margin: 0 !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;
}

.detail-content {
    padding: 3px 8px !important; /* Match modal body: was 0.75rem */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1 !important;
    background: white !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important; /* Ultra-compact: was 0.4rem */
    position: relative !important;
}

/* Scroll indicator - shows gradient at bottom when scrollable */
.detail-content::after {
    content: '';
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.95));
    pointer-events: none;
    z-index: 10;
}

/* Custom scrollbar for better visibility */
.detail-content::-webkit-scrollbar {
    width: 8px;
}

.detail-content::-webkit-scrollbar-track {
    background: #f0f3f6;
    border-radius: 4px;
}

.detail-content::-webkit-scrollbar-thumb {
    background: #8b9aa8;
    border-radius: 4px;
}

.detail-content::-webkit-scrollbar-thumb:hover {
    background: #5a6c7d;
}

.site-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important; /* Ultra-compact: was 0.5rem */
    flex-shrink: 0 !important;
    margin-bottom: 5px !important; /* 5px standard gap to next section */
}

.info-row {
    display: flex !important;
    justify-content: space-between !important;
    padding: 3px 0 !important; /* Ultra-compact: was 0.5rem 0 */
    border-bottom: 1px solid #e8ecf1 !important;
}

.detail-panel.hidden {
    display: none;
}

.detail-header {
    padding: var(--space-lg);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--text-inverse);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.detail-header h3 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 600;
}

.close-btn {
    background: rgba(255, 255, 255, 0.85);
    border: none;
    color: #1a3a5c;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    font-weight: 700;
}

.close-btn:hover {
    background: #ffffff;
    color: #e74c3c;
}

.detail-content {
    padding: var(--space-lg);
    overflow-y: auto;
    flex: 1;
}

.site-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.info-row {
    display: flex !important;
    justify-content: space-between !important;
    padding: 0.1rem 0 !important; /* Ultra-tight - reduced from 0.15rem */
    border-bottom: none !important;
    align-items: center !important;
    line-height: 1.2 !important; /* Tighter line height */
}

.info-label {
    font-size: 0.75rem !important; /* Smaller - was 0.8rem */
    color: #5a6c7d !important;
    font-weight: 500 !important;
}

.info-value {
    font-family: var(--font-sans) !important; /* Aptos: was IBM Plex Mono */
    font-size: 0.75rem !important; /* Smaller - was 0.8rem */
    font-weight: 600 !important;
    color: #1a2b3c !important;
}

.info-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.info-value {
    font-family: var(--font-sans); /* Aptos: was var(--font-mono) */
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Per-reading age annotation (Latest Readings rows). Muted grey by
   default; amber when >1d and ≤7d; red+bold when >7d. Lets a user spot
   stale sensors at a glance instead of assuming every value came from
   the same instant — which the prior single top timestamp implied. */
.info-age {
    margin-left: 6px !important;
    font-size: 0.7rem !important;
    font-weight: 400 !important;
    color: #8b9aa8 !important;
}
.info-age.stale-mild { color: #d68910 !important; }
.info-age.stale-bad  { color: #c0392b !important; font-weight: 600 !important; }

.quick-chart {
    min-height: 250px;
    margin-bottom: var(--space-lg);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
}

/* Chart Controls */
/* Chart Controls */
.chart-controls {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px; /* Reduced from 1rem */
    margin: 5px 0; /* Reduced from 1.5rem - 5px standard */
    padding: 5px; /* Reduced from 1rem - 5px standard */
    background: #f0f3f6 !important;
    border-radius: 8px;
    visibility: visible !important;
}

.control-group {
    display: flex !important;
    flex-direction: column;
    gap: 3px; /* Ultra-compact: was 0.25rem */
}

.control-group label {
    font-family: var(--font-sans); /* Use Aptos: was IBM Plex Mono */
    font-size: 0.65rem; /* Match other labels: was 0.75rem */
    font-weight: 600;
    color: #5a6c7d;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block !important;
}

.quick-chart {
    /* Container height must cover the 240px Vega plot area PLUS axis
       labels, title, legend, and inner padding (~60-80px total). 250px
       was clipping the x-axis date labels. 330px leaves comfortable
       room for the smoothed-line + threshold-overlay layout. */
    min-height: 330px !important;
    margin-bottom: 5px !important;
    background: #f0f3f6 !important;
    border-radius: 8px;
    padding: 0.5rem !important;
    display: block !important;
    visibility: visible !important;
    overflow: hidden;
}

/* Ensure Vega SVG fits inside without overflowing onto button */
.quick-chart canvas,
.quick-chart svg,
.quick-chart > div {
    max-width: 100% !important;
}

/* Button below quick chart — always visible, never obscured */
#detailed-analysis-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    position: relative;
    z-index: 1;
}

/* Buttons */
.btn {
    padding: 3px 8px; /* Ultra-compact */
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: 0.75rem; /* Compact size */
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

.btn-primary {
    background: var(--primary-color);
    color: var(--text-inverse);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-large {
    padding: var(--space-md) var(--space-xl);
    font-size: 1rem;
}

/* Analytics View */
.analytics-header {
    flex-shrink: 0; /* Fixed height based on content */
    padding: var(--space-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.analytics-header h2 {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

.analytics-controls {
    display: flex;
    gap: var(--space-md);
}

/* Title + current-site chip group (keeps heading and chip together on the
   left while .analytics-controls stays right via space-between). */
.analytics-title-group {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

/* Clickable site chip — opens the existing manual-selection search modal. */
.analytics-site-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-primary);
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.analytics-site-chip:hover {
    background: #eef3f7;
    border-color: #2775b6;
}
.analytics-site-chip svg { opacity: 0.55; flex-shrink: 0; }

.analytics-grid {
    padding: var(--space-xl);
    padding-bottom: 80px; /* Extra space at bottom */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}

.chart-container {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
}

.chart-header h3 {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.chart-select {
    padding: var(--space-xs) var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    background: var(--surface);
}

/* AI View */
.ai-container {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    min-height: 100%; /* Allow to grow beyond viewport */
}

.ai-header {
    padding: var(--space-xl);
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--text-inverse);
    text-align: center;
}

.ai-header h2 {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.ai-description {
    font-size: 1rem;
    opacity: 0.9;
}

.ai-chat {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.ai-message {
    display: flex;
    gap: var(--space-md);
    animation: slideIn 0.3s ease;
}

.ai-message.user {
    flex-direction: row-reverse;
}

.message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.ai-message.user .message-avatar {
    background: var(--primary-color);
    color: var(--text-inverse);
}

.message-content {
    flex: 1;
    max-width: 70%;
}

.ai-message.user .message-content {
    text-align: right;
}

.message-content p {
    padding: var(--space-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    font-size: 0.95rem;
    line-height: 1.6;
}

.ai-message.user .message-content p {
    background: var(--primary-color);
    color: var(--text-inverse);
}

.message-content ul {
    margin: var(--space-md) 0;
    padding-left: var(--space-xl);
}

.message-content li {
    margin: var(--space-sm) 0;
    font-size: 0.9rem;
}

.ai-input-container {
    padding: var(--space-xl);
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.ai-suggestions {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
}

.suggestion-chip {
    padding: var(--space-xs) var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.suggestion-chip:hover {
    background: var(--primary-color);
    color: var(--text-inverse);
    border-color: var(--primary-color);
}

.ai-input-box {
    display: flex;
    gap: var(--space-md);
    align-items: flex-end;
}

#ai-input {
    flex: 1;
    padding: var(--space-md);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    font-family: var(--font-sans);
    font-size: 1rem;
    resize: none;
    max-height: 120px;
    transition: all var(--transition-fast);
}

#ai-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(26, 84, 144, 0.1);
}

.send-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--text-inverse);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
}

.send-btn:hover {
    background: var(--primary-dark);
    transform: scale(1.05);
}

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

/* Export View */
.export-container {
    padding: var(--space-2xl);
    max-width: 1200px;
    margin: 0 auto;
}

.export-container h2 {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: var(--space-xl);
    color: var(--text-primary);
}

.export-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}

.export-section {
    background: var(--surface);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.export-section h3 {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--space-lg);
    color: var(--text-primary);
}

.form-group {
    margin-bottom: var(--space-lg);
}

.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

.checkbox-label {
    display: flex;
    align-items: center;
    font-weight: 400;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    margin-right: var(--space-sm);
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
}

.api-endpoint {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin: var(--space-lg) 0;
}

.api-endpoint code {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--primary-color);
}

.copy-btn {
    padding: var(--space-xs) var(--space-md);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.copy-btn:hover {
    background: var(--primary-color);
    color: var(--text-inverse);
    border-color: var(--primary-color);
}

.link {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color var(--transition-fast);
}

.link:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(5px);
}

.loading-overlay.hidden {
    display: none;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--border);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.loading-overlay p {
    margin-top: var(--space-lg);
    font-family: var(--font-mono);
    color: var(--text-secondary);
}

/* Notification Toast */
.notification {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: var(--surface);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border);
    min-width: 300px;
    z-index: 10000;
    animation: slideInRight 0.3s ease;
}

.notification.hidden {
    display: none;
}

.notification-content {
    font-size: 0.875rem;
    color: var(--text-primary);
}

/* Utility Classes */
.hidden {
    display: none !important;
}

/* reopen-sidebar visibility is controlled via .classification-controls above */

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* Responsive Design */
@media (max-width: 1400px) {
    .analytics-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .header-content {
        flex-wrap: wrap;
        height: auto;
        padding: var(--space-md);
    }
    
    .main-nav {
        width: 100%;
        order: 3;
        margin-top: var(--space-md);
    }
    
    /* The sidebar is absolute here, but .container was `position: static`, so its
       `height: 100%` resolved against the VIEWPORT rather than the container — and
       since the sidebar starts below the header, it overhung the fold by exactly the
       header's height (137px on a phone, where the header wraps). That bottom strip
       was unreachable: the sidebar scrolls internally, but its own box ended off-
       screen. Making .container the containing block and pinning top/bottom bounds it
       to the space it actually occupies. */
    .container {
        position: relative;
    }

    .sidebar {
        position: absolute;
        z-index: 999;
        top: 0;
        bottom: 0;
        height: auto;          /* top+bottom define the height; no 100% overshoot */
        box-shadow: var(--shadow-xl);
    }

    /* NOTE: the mobile overrides for the bottom bars, floating panels and toasts are
       NOT here — they live in the consolidated block at the END of this file, because
       their base rules are defined further down and would otherwise win on source
       order at equal specificity. */

    .detail-panel {
        width: 100%;
        max-width: 100%;
        left: 0;
        right: 0;
        top: 0;
        border-radius: 0;
    }

    .export-grid {
        grid-template-columns: 1fr;
    }
}

/* Leaflet Overrides */
.leaflet-popup-content-wrapper {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
}

.leaflet-popup-content {
    font-family: var(--font-sans);
    font-size: 0.875rem;
}

.leaflet-control-zoom a {
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border) !important;
}

/* Custom Marker Styles */
.custom-marker {
    /* Ensure marker container doesn't interfere with hover */
    pointer-events: none;
}

.custom-marker .marker-dot {
    pointer-events: all;
    transition: all 0.3s ease; /* Smooth transitions for color and size changes */
    position: relative;
    
    /* Marker appearance */
    border: 1px solid black;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    cursor: pointer;
}

/* Fade out animation for removing markers */
.marker-removing .marker-dot {
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s ease;
}

/* Selected marker highlight (single selection) */
.marker-selected .marker-dot {
    border: 3px solid #3498db !important; /* Bright blue border */
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.3), 0 2px 8px rgba(0,0,0,0.3) !important;
    z-index: 1000 !important;
}

/* Highlighted marker (multi-selection) - MORE VISIBLE */
.marker-highlighted .marker-dot {
    border: 4px solid #e74c3c !important; /* THICK RED border */
    box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.6), 0 0 20px rgba(231, 76, 60, 0.4), 0 4px 12px rgba(0,0,0,0.5) !important;
    z-index: 999 !important;
    transform: scale(1.25); /* More prominent: was 1.1 */
}

/* Also target the parent directly */
.marker-highlighted {
    z-index: 999 !important;
}

.custom-marker.marker-highlighted .marker-dot {
    border: 4px solid #e74c3c !important; /* THICK RED - very visible */
    box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.6), 0 0 20px rgba(231, 76, 60, 0.4), 0 4px 12px rgba(0,0,0,0.5) !important;
    transform: scale(1.25); /* More prominent */
}

/* Time Slider Styles */
/* ==================== TIME SLIDER ==================== */
.time-slider-container {
    position: fixed;
    bottom: 0;
    left: 300px; /* Match current sidebar width */
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border-top: 2px solid var(--primary-color);
    padding: 8px 20px;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    z-index: 900;
    transition: left 0.3s ease, transform 0.3s ease;
}

/* When sidebar is collapsed, extend full width */
body.sidebar-collapsed .time-slider-container,
.sidebar.collapsed ~ .main-content .time-slider-container {
    left: 0;
}

.time-slider-container.hidden {
    transform: translateY(100%);
}

/* Push map up when slider is active - MINIMUM GAP */
body.time-slider-active #map {
    bottom: 42px; /* Reduced from 44px - trying to eliminate gray bar */
}

/* Scale bar - 5px right of zoom control */
.leaflet-control-scale {
    position: absolute !important;
    left: 5px !important;
    bottom: 5px !important;
    margin: 0 !important;
    margin-left: 34px !important; /* 5px + 24px zoom + 5px gap = 34px */
    transform: none !important;
}

/* Attribution - bottom right */
.leaflet-bottom.leaflet-right {
    bottom: 5px !important; /* Match other controls */
    right: 5px !important; /* Consistent border offset */
}

/* When time slider is active, maintain positioning */
body.time-slider-active .leaflet-control-scale {
    bottom: 5px !important;
    left: 5px !important;
    margin-left: 34px !important; /* Match main positioning */
    transform: none !important;
}

body.time-slider-active .leaflet-bottom.leaflet-right {
    bottom: 5px !important;
}

/* Push legend up when time slider is active */
body.time-slider-active .map-legend {
    bottom: 100px; /* Increased to give more space above time slider */
}

/* Compact horizontal layout */
.time-slider-content {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Date Display - Left side */
.time-slider-date-display {
    font-family: var(--font-sans); /* Changed from mono to match buttons */
    font-size: 0.85rem; /* Reduced slightly */
    font-weight: 600;
    color: var(--primary-color);
    white-space: nowrap;
    min-width: 200px;
}

/* Button Group - Middle */
.time-slider-button-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.time-control-btn {
    width: 26px; /* Reduced from 32px to match toolbar */
    height: 26px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: white;
    color: var(--primary-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.time-control-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.time-speed-select {
    padding: 4px 8px; /* Reduced padding */
    height: 26px; /* Match toolbar buttons */
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: 0.75rem; /* Reduced to match toolbar */
    background: white;
    cursor: pointer;
}

.time-jump-btn {
    padding: 4px 8px; /* Reduced padding */
    height: 26px; /* Match toolbar buttons */
    border: 1px solid var(--border);
    border-radius: 4px;
    background: white;
    color: var(--text-primary);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.75rem; /* Reduced to match toolbar */
    font-weight: 500;
    transition: all 0.2s ease;
}

.time-jump-btn:hover {
    background: var(--primary-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Slider Track - Right side, takes remaining space */
.time-slider-track-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px; /* Small gap between sparkline and slider */
}

/* Sparkline canvas above slider */
.time-slider-sparkline {
    width: 100%;
    height: 20px; /* Compact sparkline */
    display: block;
}

.time-slider-range {
    width: 100%;
    height: 4px; /* Reduced from 6px for smaller profile */
    border-radius: 2px; /* Smaller radius */
    background: linear-gradient(to right, var(--primary-light), var(--primary-color));
    border: 1px solid rgba(26, 84, 144, 0.3);
    outline: none;
    -webkit-appearance: none;
}

/* Firefox track */
.time-slider-range::-moz-range-track {
    width: 100%;
    height: 6px; /* Reduced from 8px */
    border-radius: 3px;
    background: linear-gradient(to right, var(--primary-light), var(--primary-color));
    border: 1px solid rgba(26, 84, 144, 0.3); /* Add subtle border */
}

/* Slider Thumb - COMPACT 12px */
.time-slider-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px; /* Reduced from 16px for compact design */
    height: 14px;
    border-radius: 50%;
    background: #1a5490;
    cursor: pointer;
    border: 2px solid white; /* Thinner border */
    box-shadow: 0 0 0 1px #1a5490, 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.time-slider-range::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 0 0 1px #1a5490, 0 3px 6px rgba(0, 0, 0, 0.4);
}

.time-slider-range::-moz-range-thumb {
    width: 14px; /* Reduced from 16px for compact design */
    height: 14px;
    border-radius: 50%;
    background: #1a5490;
    cursor: pointer;
    border: 2px solid white; /* Thinner border */
    box-shadow: 0 0 0 1px #1a5490, 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.time-slider-range::-moz-range-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 0 0 1px #1a5490, 0 3px 6px rgba(0, 0, 0, 0.4);
}

/* Exceedance states - graduated by severity */
/* Low severity: 1-4 sites exceeding (light red) */
.time-slider-range.exceedance-low {
    background: linear-gradient(to right, #ffdddd, #ffaaaa) !important;
    border-color: #ff8888 !important;
}

.time-slider-range.exceedance-low::-moz-range-track {
    background: linear-gradient(to right, #ffdddd, #ffaaaa) !important;
    border-color: #ff8888 !important;
}

.time-slider-range.exceedance-low::-webkit-slider-thumb {
    background: #ff8888 !important;
    box-shadow: 0 0 0 1px #ff8888, 0 2px 6px rgba(255, 136, 136, 0.4) !important;
}

.time-slider-range.exceedance-low::-moz-range-thumb {
    background: #ff8888 !important;
    box-shadow: 0 0 0 1px #ff8888, 0 2px 6px rgba(255, 136, 136, 0.4) !important;
}

/* Medium severity: 5-9 sites exceeding (medium red) */
.time-slider-range.exceedance-medium {
    background: linear-gradient(to right, #ffaaaa, #ff6666) !important;
    border-color: #ff4444 !important;
}

.time-slider-range.exceedance-medium::-moz-range-track {
    background: linear-gradient(to right, #ffaaaa, #ff6666) !important;
    border-color: #ff4444 !important;
}

.time-slider-range.exceedance-medium::-webkit-slider-thumb {
    background: #ff4444 !important;
    box-shadow: 0 0 0 1px #ff4444, 0 2px 6px rgba(255, 68, 68, 0.4) !important;
}

.time-slider-range.exceedance-medium::-moz-range-thumb {
    background: #ff4444 !important;
    box-shadow: 0 0 0 1px #ff4444, 0 2px 6px rgba(255, 68, 68, 0.4) !important;
}

/* High severity: 10+ sites exceeding (dark red) */
.time-slider-range.exceedance-high {
    background: linear-gradient(to right, #ff6666, #e74c3c) !important;
    border-color: #c0392b !important;
}

.time-slider-range.exceedance-high::-moz-range-track {
    background: linear-gradient(to right, #ff6666, #e74c3c) !important;
    border-color: #c0392b !important;
}

.time-slider-range.exceedance-high::-webkit-slider-thumb {
    background: #c0392b !important;
    box-shadow: 0 0 0 1px #c0392b, 0 2px 6px rgba(192, 57, 43, 0.4) !important;
}

.time-slider-range.exceedance-high::-moz-range-thumb {
    background: #c0392b !important;
    box-shadow: 0 0 0 1px #c0392b, 0 2px 6px rgba(192, 57, 43, 0.4) !important;
}

/* Date display turns red when exceedance detected */
.time-slider-date-display.exceedance-text {
    color: #e74c3c !important;
    font-weight: 700;
}

/* Settings Modal */
.settings-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.3s ease;
}

.settings-modal.hidden {
    opacity: 0;
    pointer-events: none;
}

.settings-content {
    background: white;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px; /* Reduced from 20px */
    border-bottom: 1px solid var(--border);
}

.settings-header h3 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1rem; /* Reduced from 1.25rem */
    color: var(--primary-color);
}

.settings-body {
    padding: 12px; /* Reduced from 20px */
    overflow-y: auto;
}

.settings-section {
    margin-bottom: 12px; /* Reduced from 24px */
}

.settings-section h4 {
    margin: 0 0 8px 0; /* Reduced from 12px */
    font-family: var(--font-sans);
    font-size: 0.85rem; /* Reduced from 1rem */
    color: var(--text-primary);
    font-weight: 600;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px; /* Reduced from 12px */
}

.setting-item label {
    font-size: 0.75rem; /* Reduced from 0.9rem */
    color: var(--text-secondary);
}

.setting-input {
    width: 80px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.9rem;
}

.settings-section .btn {
    width: 100%;
    margin-top: 8px;
}

/* Hover Tooltip */
.hover-tooltip {
    position: fixed;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.75rem;
    font-family: var(--font-mono);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10001;
    pointer-events: none;
    white-space: nowrap;
    transition: opacity 0.15s ease;
    min-width: 140px;
}

.hover-tooltip.hidden {
    opacity: 0;
}

.tooltip-content {
    line-height: 1.4;
}

.tooltip-site-id {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 4px;
    font-size: 0.7rem;
}

.tooltip-value-large {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.tooltip-sparkline {
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tooltip-value {
    color: var(--text-secondary);
    font-size: 0.7rem;
}

.tooltip-value span {
    color: var(--text-primary);
    font-weight: 500;
}

.custom-marker:hover .marker-dot {
    transform: scale(1.2);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 1000 !important;
}

/* Ensure Leaflet marker container allows hover to work */
.leaflet-marker-icon {
    transition: none !important;
}

.leaflet-marker-icon.custom-marker {
    overflow: visible !important;
}

/* ==================== QUERY BUILDER ==================== */
.query-builder-content {
    max-width: 600px; /* Reduced from 700px */
    width: 90vw; /* Responsive */
}

.query-section {
    margin-bottom: 8px; /* Reduced from 15px */
    padding: 5px; /* Reduced from 12px to 5px - ultra compact! */
    background: var(--bg-secondary);
    border-radius: var(--radius-sm); /* Smaller radius */
}

.query-section h3 {
    margin: 0 0 5px 0; /* Reduced from 8px */
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.sql-input {
    width: 100%;
    min-height: 60px; /* Reduced from 80px */
    padding: 8px; /* Reduced from 10px */
    font-family: var(--font-mono);
    font-size: 0.75rem; /* Reduced from 0.85rem - match SQL bar */
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    resize: vertical;
    background: var(--surface);
    color: var(--text-primary);
}

.sql-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.divider-text {
    text-align: center;
    margin: 15px 0; /* Reduced from 20px */
    color: var(--text-tertiary);
    font-weight: 500;
    font-size: 0.75rem; /* Added - match SQL bar */
    position: relative;
}

.divider-text::before,
.divider-text::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 45%;
    height: 1px;
    background: var(--border);
}

.divider-text::before {
    left: 0;
}

.divider-text::after {
    right: 0;
}

#query-rules {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Reduced from 8px */
    margin-bottom: 5px; /* Reduced from 12px */
}

.query-rule {
    display: flex;
    gap: 5px; /* Reduced from 6px */
    align-items: center;
    padding: 5px; /* Reduced from 8px to 5px */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.query-rule select,
.query-rule input {
    padding: 4px 6px; /* Reduced from 5px 8px */
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.75rem; /* Reduced from 0.85rem - match SQL bar */
    background: var(--surface);
    color: var(--text-primary);
    height: 28px; /* Match SQL bar input height */
}

.query-rule select:focus,
.query-rule input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.query-rule .field-select {
    flex: 1;
    min-width: 110px; /* Slightly reduced */
}

.query-rule .operator-select {
    width: 70px; /* Reduced from 80px */
}

.query-rule .value-input {
    flex: 1;
    min-width: 90px; /* Slightly reduced */
}

.query-rule .remove-rule {
    padding: 4px 8px;
    background: var(--danger-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem; /* Reduced from 0.8rem */
    height: 28px;
}

.query-rule .remove-rule:hover {
    background: #c0392b;
}

.query-rule .logic-operator {
    padding: 4px 8px;
    background: var(--primary-light);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem; /* Added - match SQL bar */
    font-weight: 600;
}

.query-rule .logic-operator:hover {
    background: var(--primary-color);
    color: white;
}

.query-actions {
    display: flex;
    gap: 5px; /* Reduced to match query rule gap */
    margin-top: 5px; /* Reduced from 12px */
}

.query-actions .btn {
    font-size: 0.65rem; /* Match control panel btn-compact */
    padding: 3px 8px; /* Match control panel */
}

.query-results {
    margin-top: 8px; /* Reduced from 15px */
    padding: 5px; /* Reduced from 12px - match query-section */
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.query-results h3 {
    margin: 0 0 8px 0; /* Reduced from 10px */
    font-size: 0.75rem; /* Reduced from 0.9rem - match SQL bar */
    color: var(--text-secondary);
    font-weight: 600;
}

#query-results-preview {
    font-family: var(--font-mono);
    font-size: 0.75rem; /* Reduced from 0.85rem - match SQL bar */
    color: var(--text-primary);
    min-height: 32px; /* Reduced from 40px */
    padding: 8px; /* Reduced from 10px */
    background: var(--surface);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.query-result-count {
    font-weight: 600;
    color: var(--primary-color);
}

/* Query Buttons Side by Side */
.query-buttons {
    display: flex;
    gap: 5px;
}

.query-buttons .btn-compact {
    flex: 1;
}

/* SQL Query Bar (Map Overlay) */
.sql-query-bar {
    position: fixed;
    bottom: 0;
    left: 300px; /* Match current sidebar width */
    right: 0;
    background: linear-gradient(to bottom, rgba(255, 240, 220, 0.98), rgba(255, 235, 210, 0.98));
    backdrop-filter: blur(10px);
    border-top: 2px solid #ff9800;
    padding: 4px 20px;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    transition: transform 0.3s ease, left 0.3s ease;
    height: 36px;
}

/* Adjust when sidebar is collapsed */
.sidebar.collapsed ~ .main-content .sql-query-bar,
body.sidebar-collapsed .sql-query-bar {
    left: 0;
}

.sql-query-bar.hidden {
    transform: translateY(100%);
}

.sql-query-content {
    display: flex;
    align-items: center;
    gap: 10px; /* Reduced from 12px */
    max-width: 1400px;
    margin: 0 auto;
    height: 100%;
}

.sql-query-content label {
    font-weight: 600;
    color: #d35400; /* Orange text for label */
    white-space: nowrap;
    font-size: 0.75rem; /* Match control panel button size */
}

.sql-query-input {
    flex: 1;
    padding: 4px 10px; /* Reduced padding */
    height: 28px; /* Fixed height */
    border: 1px solid #ff9800;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.75rem; /* Smaller font - match control panel */
    background: white; /* White input, not orange */
    color: var(--text-primary);
}

.sql-query-input:focus {
    outline: none;
    border-color: #f57c00; /* Darker orange on focus */
    box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.2);
}

.btn-sm {
    padding: 4px 12px; /* Smaller padding */
    font-size: 0.75rem; /* Match control panel */
    height: 28px; /* Match input height */
}

/* Adjust time slider when SQL bar is visible */
body.sql-bar-visible .time-slider-container {
    bottom: 40px; /* Reduced from 60px - SQL bar is now only 36px tall */
}

/* Modal Base Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.modal.hidden {
    display: none;
}

.modal-content {
    background: white;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    font-family: var(--font-sans); /* Aptos - consistent with rest of UI */
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 12px; /* Ultra-compact vertical: was 8px */
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}

.modal-header h2 {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.close-btn:hover {
    background: var(--danger-color);
    color: white;
}

.modal-body {
    padding: 3px 8px; /* Ultra-compact vertical: 3px, horizontal stays 8px */
}

/* ==================== V086 NEW STYLES ==================== */

/* Button Block Style */
.btn-block {
    width: 100%;
    padding: 4px 8px; /* Ultra-compact: was 8px 12px */
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px; /* Reduced from 8px */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-sans); /* Explicitly Aptos */
    font-size: 0.65rem; /* Match toolbar: was 0.85rem */
    font-weight: 500;
}

.btn-block:hover {
    background: var(--primary-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-block svg {
    flex-shrink: 0;
    width: 12px; /* Smaller icons */
    height: 12px;
}

/* Toggle Group */
.toggle-group {
    display: flex;
    flex-direction: column;
    gap: 4px; /* Reduced from 8px */
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 6px; /* Reduced from 8px */
    font-family: var(--font-sans); /* Explicitly Aptos */
    font-size: 0.65rem; /* Match toolbar: was 0.85rem */
    cursor: pointer;
    padding: 2px 0; /* Reduced from 4px */
}

.toggle-label input[type="checkbox"] {
    width: 14px; /* Slightly smaller: was 16px */
    height: 14px;
    cursor: pointer;
}

.toggle-label span {
    user-select: none;
}

/* Manual Selection Modal */
.manual-selection-content {
    max-width: 500px;
    width: 90vw;
}

.modal-search-box {
    position: relative;
    margin-bottom: 12px;
}

.modal-search-box input {
    width: 100%;
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.modal-search-box svg {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
}

/* Spatial selection: "add sites by watershed" picker */
.modal-watershed-select {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt, rgba(0, 0, 0, 0.02));
}

.modal-watershed-select label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.modal-watershed-select select {
    flex: 1 1 180px;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    background: var(--surface, #fff);
    color: var(--text-primary);
}

.modal-watershed-hint {
    flex: 1 1 100%;
    font-size: 0.78rem;
    color: var(--text-tertiary);
    min-height: 1em;
}

.site-checkbox-list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px;
    margin-bottom: 12px;
}

.site-checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px; /* Ultra-compact vertical: was 6px */
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}

.site-checkbox-item:hover {
    background: var(--bg-secondary);
}

.site-checkbox-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.modal-selection-controls {
    display: flex;
    gap: 5px;
    margin-bottom: 12px;
}

.modal-filter-toggle {
    margin-bottom: 12px;
}

.modal-thresholds {
    margin-bottom: 8px; /* Reduced from 12px */
    padding: 3px 12px; /* Vertical 3px, horizontal 12px */
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.modal-thresholds h3 {
    margin: 0 0 4px 0; /* Reduced from 8px */
    font-size: 0.85rem;
    font-weight: 600;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
}

/* Layers Modal */
.layers-content {
    max-width: 550px;
    width: 90vw;
}

.layers-section {
    margin-bottom: 8px; /* Reduced from 16px */
    padding: 3px 12px; /* Vertical 3px, horizontal 12px */
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.layers-section h3 {
    margin: 0 0 4px 0; /* Reduced from 10px */
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.layer-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 3px; /* Reduced from 6px */
}

.layer-checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px; /* Vertical 3px: was 6px */
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}

.layer-checkbox-item:hover {
    background: var(--surface);
}

.layer-checkbox-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.upload-controls, .remote-layer-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-full {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.input-full:focus {
    outline: none;
    border-color: var(--primary-color);
}

.custom-layers-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.custom-layer-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.custom-layer-item button {
    padding: 2px 8px;
    background: var(--danger-color);
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.75rem;
}

.custom-layer-item button:hover {
    background: #c0392b;
}

/* Compact labels for control panel */
.time-controls label {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 2px;
    display: block;
}

/* Disabled toggle label styling */
.toggle-label input[type="checkbox"]:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.toggle-label:has(input[type="checkbox"]:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
}

.toggle-label:has(input[type="checkbox"]:disabled) span {
    color: var(--text-tertiary);
}

/* Highlight Filter to Selected when enabled (not disabled) */
#filter-toggle-label:not(:has(input[type="checkbox"]:disabled)) span {
    font-weight: 700; /* Bold */
    color: var(--primary-color); /* Blue to draw attention */
}

/* ==================== MODE TOGGLE (Basic/Advanced) ==================== */
.mode-toggle-group {
    display: flex;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.mode-btn {
    padding: 3px 10px;
    font-size: 0.65rem;
    font-family: var(--font-sans);
    font-weight: 500;
    background: var(--surface);
    color: var(--text-secondary);
    border: none;
    border-right: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.15s;
}

.mode-btn:last-child {
    border-right: none;
}

.mode-btn:hover {
    background: var(--primary-light);
    color: var(--primary-color);
}

.mode-btn.active {
    background: var(--primary-color);
    color: white;
    font-weight: 600;
}

/* Hide advanced controls in basic mode */
.basic-mode .advanced-control {
    display: none !important;
}

/* ==================== USER OPERATION MODES (#14) ==================== */
/* Declarative tiering: a body class (mode-basic|mode-moderate|mode-advanced)
   hides anything tagged with a higher [data-min-mode] than the active tier. */
body.mode-basic    [data-min-mode="moderate"],
body.mode-basic    [data-min-mode="advanced"],
body.mode-moderate [data-min-mode="advanced"] {
    display: none !important;
}
/* Legacy advanced-only controls (classification method/#classes etc.) show
   only in advanced mode. */
body:not(.mode-advanced) .advanced-control {
    display: none !important;
}

/* Mode switcher (3-segment control at the top of the control panel) */
.mode-switcher {
    display: flex;
    flex-shrink: 0;          /* sidebar is a flex column — don't let it squeeze this to ~0 */
    min-height: 30px;        /* guarantee a visible height regardless of flex pressure */
    margin: 6px 10px 12px;
    border: 1px solid var(--border, #dde4e9);
    border-radius: 6px;
    overflow: hidden;
}
.mode-switcher button {
    flex: 1;
    /* !important to beat the global `button {padding/font-size !important}` reset */
    padding: 6px 4px !important;
    font-size: 0.74rem !important;
    line-height: 1.2 !important;
    min-height: 28px;
    background: #f5f7fa;
    border: none;
    cursor: pointer;
    color: #5a6c7d;
    transition: background 0.12s, color 0.12s;
}
.mode-switcher button + button { border-left: 1px solid var(--border, #dde4e9); }
.mode-switcher button:hover { background: #e9eef3; }
.mode-switcher button.active { background: #2775b6; color: #fff; font-weight: 600; }
/* Discoverability caption under the switcher */
#mode-switcher-hint { flex-shrink: 0; margin: 0 10px 12px; font-size: 0.7rem; color: #8b9aa8; line-height: 1.35; }

/* First-run "choose your experience" prompt (P3) */
.mode-firstrun-overlay {
    position: fixed; inset: 0; z-index: 5000;
    background: rgba(20, 30, 45, 0.55);
    display: flex; align-items: center; justify-content: center;
}
.mode-firstrun {
    background: #fff; border-radius: 10px; padding: 22px 24px;
    max-width: 440px; width: 90%; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.mode-firstrun h2 { margin: 0 0 4px; font-size: 1.1rem; color: #1a2b3c; }
.mode-firstrun p { margin: 0 0 14px; font-size: 0.85rem; color: #5a6c7d; }
.mode-firstrun-options { display: flex; flex-direction: column; gap: 8px; }
.mode-firstrun-options button {
    text-align: left; padding: 10px 14px; border: 1px solid #dde4e9;
    border-radius: 8px; background: #f8fafc; cursor: pointer;
}
.mode-firstrun-options button:hover { border-color: #2775b6; background: #eef5fb; }
.mode-firstrun-options strong { display: block; font-size: 0.92rem; color: #1a2b3c; }
.mode-firstrun-options span { font-size: 0.78rem; color: #5a6c7d; }

/* ==================== FIRST-TIME USER HINT ==================== */
.first-time-hint {
    position: absolute;
    /* Below the geocode bar (top:12px + ~31px tall), not on top of it. Both are
       centred in the same column, so at top:20px this banner ran straight through
       the search input. */
    top: 54px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    pointer-events: none;
    animation: slideDown 0.4s ease-out;
}

.hint-content {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: all;
    font-size: 0.85rem;
}

.hint-icon {
    font-size: 1.5rem;
}

.hint-text {
    margin: 0;
}

.hint-text strong {
    font-weight: 600;
}

.hint-text em {
    font-style: italic;
    color: #ffd700;
}

.hint-close {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    font-size: 1rem;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    margin-left: 10px;
}

.hint-close:hover {
    background: rgba(255,255,255,0.3);
}

.first-time-hint.hidden {
    display: none;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ==================== BASEMAP SELECTOR ==================== */
.basemap-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}

.basemap-option {
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.basemap-option:hover {
    border-color: var(--primary-light);
    transform: translateY(-2px);
}

.basemap-option input[type="radio"] {
    display: none;
}

.basemap-option input[type="radio"]:checked + .basemap-preview {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.basemap-preview {
    display: flex;
    flex-direction: column;
    padding: 12px;
    background: var(--bg-secondary);
    border: 2px solid var(--border);
    border-radius: 6px;
    transition: all 0.2s;
    min-height: 70px;
    justify-content: center;
}

.basemap-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.basemap-desc {
    font-size: 0.7rem;
    color: var(--text-tertiary);
}

/* ==================== PROGRESSIVE DISCLOSURE ==================== */
.advanced-filters-section {
    margin-top: 12px;
}

.advanced-filters-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.advanced-filters-toggle:hover {
    background: var(--surface);
    color: var(--primary-color);
}

.advanced-filters-toggle .chevron {
    transition: transform 0.2s;
}

.advanced-filters-toggle.expanded .chevron {
    transform: rotate(180deg);
}

.advanced-filters-content {
    margin-top: 8px;
    animation: slideDown 0.3s ease-out;
}

.advanced-filters-content.hidden {
    display: none;
}

/* Auth & User Management Styles */
.btn-sm {
    padding: 2px 6px;
    font-size: 0.75rem;
}

.admin-only {
    background: #fff5f5;
    border-radius: 4px;
    padding: 8px;
}

#admin-users-list {
    background: white;
}

.user-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 8px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.85rem;
}

.user-list-item:hover {
    background: #f8f9fa;
}

.user-info {
    flex: 1;
}

.user-name {
    font-weight: 600;
    color: #2c3e50;
}

.user-email {
    font-size: 0.75rem;
    color: #7f8c8d;
}

.user-role-badge {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 5px;
}

.user-role-badge.admin {
    background: #e74c3c;
    color: white;
}

.user-role-badge.publisher {
    background: #3498db;
    color: white;
}

.user-role-badge.user {
    background: #95a5a6;
    color: white;
}

.user-actions {
    display: flex;
    gap: 3px;
}

.user-action-btn {
    padding: 2px 6px;
    font-size: 0.7rem;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    background: #ecf0f1;
    color: #2c3e50;
}

.user-action-btn:hover {
    background: #bdc3c7;
}

.user-action-btn.danger {
    background: #fadbd8;
    color: #c0392b;
}

.user-action-btn.danger:hover {
    background: #e74c3c;
    color: white;
}


/* User Name Badge - positioned left of account button */
/* In the flex flow, NOT absolutely positioned.
   It used to be `position:absolute; right:165px` — a hand-counted offset ("3 buttons +
   gaps"), measured from the PAGE edge because no ancestor is positioned. Being out of
   flow, it took no space, so nothing could make room for it: below ~1500px it simply
   overlapped the nav (46px at 1440, 85px at 1280). As a flex item it just sits before
   the icon buttons and pushes them along. The ellipsis keeps a long display name from
   blowing the header apart. */
#user-name-badge {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.85rem;
    pointer-events: none;
}

/* Adjust header-actions for name positioning */
.header-actions {
    position: relative;
}

/* Role Request Styles */
.user-only {
    background: #f8f9fa;
    border-radius: 4px;
    padding: 8px;
}

.badge {
    background: #e74c3c;
    color: white;
    padding: 1px 5px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    margin-left: 3px;
}

.filter-btn {
    padding: 3px 8px;
    font-size: 0.75rem;
    border: 1px solid #e8ecf1;
    background: white;
    border-radius: 3px;
    cursor: pointer;
    font-family: var(--font-sans);
}

.filter-btn.active {
    background: #3498db;
    color: white;
    border-color: #3498db;
}

.filter-btn:hover:not(.active) {
    background: #f8f9fa;
}

.request-item {
    border: 1px solid #e8ecf1;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 5px;
    background: white;
}

.request-item.pending {
    border-left: 3px solid #f39c12;
}

.request-item.approved {
    border-left: 3px solid #27ae60;
}

.request-item.denied {
    border-left: 3px solid #e74c3c;
}

.request-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.request-user {
    font-weight: 600;
    color: #2c3e50;
}

.request-date {
    font-size: 0.7rem;
    color: #95a5a6;
}

.request-reason {
    font-size: 0.8rem;
    color: #555;
    margin: 5px 0;
    padding: 5px;
    background: #f8f9fa;
    border-radius: 3px;
}

.request-actions {
    display: flex;
    gap: 5px;
    margin-top: 5px;
}

.request-status {
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
}

.request-status.pending {
    background: #fff3cd;
    color: #856404;
}

.request-status.approved {
    background: #d4edda;
    color: #155724;
}

.request-status.denied {
    background: #f8d7da;
    color: #721c24;
}

/* Library Styles */
.mode-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    border: 2px solid #e8ecf1;
    border-radius: 4px;
    margin-bottom: 5px;
    cursor: pointer;
    transition: all 0.2s;
}

.mode-option:hover {
    background: #f8f9fa;
    border-color: #3498db;
}

.mode-option input[type="radio"] {
    margin-top: 2px;
}

.mode-option input[type="radio"]:checked + .mode-details {
    color: #2c3e50;
}

.mode-option:has(input:checked) {
    background: #e3f2fd;
    border-color: #3498db;
}

.mode-details {
    flex: 1;
}

.mode-title {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 2px;
}

.mode-desc {
    font-size: 0.7rem;
    color: #666;
}

.library-card {
    border: 1px solid #e8ecf1;
    border-radius: 4px;
    padding: 12px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
}

.library-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.library-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.library-card-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: #2c3e50;
    margin-bottom: 3px;
}

.library-card-desc {
    font-size: 0.75rem;
    color: #666;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.library-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7rem;
    color: #95a5a6;
}

.library-card-badges {
    display: flex;
    gap: 3px;
}

.mode-badge {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.mode-badge.live {
    background: #d4edda;
    color: #155724;
}

.mode-badge.snapshot {
    background: #fff3cd;
    color: #856404;
}

.mode-badge.static {
    background: #e8ecf1;
    color: #495057;
}

.type-badge {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    background: #3498db;
    color: white;
}

.tag {
    display: inline-block;
    padding: 2px 6px;
    background: #ecf0f1;
    border-radius: 3px;
    font-size: 0.65rem;
    margin-right: 3px;
    color: #666;
}

/* Marketplace Styles */
.marketplace-card {
    border: 1px solid #e8ecf1;
    border-radius: 4px;
    padding: 12px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.marketplace-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-3px);
}

.marketplace-card.featured {
    background: white;
    border: 2px solid #ffd700;
}

.marketplace-card-author {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.author-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #3498db;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
}

.author-name {
    font-size: 0.7rem;
    color: #666;
    font-weight: 600;
}

.marketplace-card-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: #2c3e50;
    margin-bottom: 5px;
}

.marketplace-card-desc {
    font-size: 0.75rem;
    color: #666;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.marketplace-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
    font-size: 0.7rem;
    color: #95a5a6;
}

.marketplace-stats {
    display: flex;
    gap: 8px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 2px;
}

.featured-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #ffd700;
    color: #856404;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 600;
}

/* Library & Marketplace View Padding */
#library-view,
#marketplace-view {
    padding-left: 20px;
}

/* ===== v095: Layer Panel & Compact Interface ===== */

/* Smaller Buttons (50-75% height) */
button, .btn, .nav-btn, .mode-btn, .toggle-btn {
    padding: 4px 10px !important;  /* Was 8px 16px */
    font-size: 0.8rem !important;
    height: auto;
}

.btn-sm {
    padding: 2px 6px !important;
    font-size: 0.75rem !important;
}

/* Map Overlays (Panels on map) */
.map-overlay {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
}

.map-overlay * {
    pointer-events: auto;
}

.map-overlay-left {
    top: 10px;
    left: 10px;
}

.map-overlay-right {
    /* Offsets are relative to .map-container now that the broken nesting (which
       ejected these overlays to <body>) is repaired — 12px insets from the map's
       top edge, level with the geocode bar, rather than 40px down from the page. */
    top: 12px;
    right: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

/* Overlay Toggle Buttons */
.overlay-toggle-btn {
    background: white;
    border: none;
    padding: 6px 10px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #2c3e50;
    transition: all 0.2s;
}

.overlay-toggle-btn:hover {
    background: #f8f9fa;
    box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}

.overlay-toggle-btn svg {
    flex-shrink: 0;
}

.overlay-buttons-group {
    display: flex;
    gap: 5px;
    background: white;
    padding: 3px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.overlay-buttons-group .overlay-toggle-btn {
    box-shadow: none;
    padding: 5px 8px;
}

/* Overlay Panels */
.overlay-panel {
    background: white;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    margin-top: 5px;
    min-width: 280px;
    max-width: 350px;
    max-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    transition: all 0.3s;
}

.overlay-panel.hidden {
    display: none;
}

/* Panel Header */
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 2px solid #e8ecf1;
    background: #f8f9fa;
    border-radius: 4px 4px 0 0;
}

.panel-header h3 {
    font-size: 0.9rem;
    margin: 0;
    color: #2c3e50;
}

.close-panel-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #95a5a6;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.close-panel-btn:hover {
    color: #c0392b;
}

/* Panel Body */
.panel-body {
    /* flex:1 == flex-basis:0, which collapses to ~padding height inside the
       position:absolute map overlays (no defined height context) — that
       squished the legend accordion to ~10px and overlapped its cards.
       flex:1 1 auto sizes the body to its content; min-height:0 lets it
       scroll within the panel's max-height instead of overflowing. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 10px;
}

.panel-body::-webkit-scrollbar {
    width: 6px;
}

.panel-body::-webkit-scrollbar-track {
    background: #f0f0f0;
}

.panel-body::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 3px;
}

/* Panel Footer */
.panel-footer {
    padding: 8px 12px;
    border-top: 1px solid #e8ecf1;
    background: #f8f9fa;
    border-radius: 0 0 4px 4px;
}

/* Layer Management Footer */
.layer-management-footer {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid #e8ecf1;
    background: #f8f9fa;
}

.layer-management-footer button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #2c3e50;
    background: white;
    border: 1px solid #dde4e9;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.layer-management-footer button:hover {
    background: #f0f4f8;
    border-color: #3498db;
    color: #3498db;
}

.layer-management-footer button svg {
    flex-shrink: 0;
}

/* Remove Layer Section */
.layer-remove-section {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #f0f0f0;
}

.layer-remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 4px 8px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #e74c3c;
    background: transparent;
    border: 1px solid #fadbd8;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.layer-remove-btn:hover {
    background: #fee;
    border-color: #e74c3c;
    color: #c0392b;
}

.layer-remove-btn svg {
    flex-shrink: 0;
}

/* Layer Item */
.layer-item {
    background: white;
    border: 1px solid #e8ecf1;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 8px;
    transition: all 0.2s;
}

.layer-item:hover {
    border-color: #3498db;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.layer-item.active {
    border-color: #3498db;
    background: #e3f2fd;
}

/* Layer Header (Name + Controls) */
.layer-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.layer-name {
    flex: 1;
    font-weight: 600;
    font-size: 0.8rem;
    color: #2c3e50;
}

.layer-toggle {
    width: 16px;
    height: 16px;
    border: 2px solid #95a5a6;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

.layer-toggle.active {
    background: #27ae60;
    border-color: #27ae60;
}

.layer-toggle.active::after {
    content: '✓';
    position: absolute;
    top: -2px;
    left: 2px;
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
}

/* Layer Control Buttons */
.layer-controls {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}

.layer-control-btn {
    background: #f8f9fa;
    border: 1px solid #e8ecf1;
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
    transition: all 0.2s;
    flex: 1;
    justify-content: center;
}

.layer-control-btn:hover {
    background: #e3f2fd;
    border-color: #3498db;
}

.layer-control-btn.active {
    background: #3498db;
    color: white;
    border-color: #3498db;
}

.layer-control-btn svg {
    width: 10px;
    height: 10px;
}

/* Layer Sliders */
.layer-slider-group {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.layer-slider-label {
    font-size: 0.7rem;
    color: #666;
    width: 50px;
    flex-shrink: 0;
}

.layer-slider {
    flex: 1;
    height: 3px;
    -webkit-appearance: none;
    background: #e8ecf1;
    border-radius: 2px;
    outline: none;
}

.layer-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    background: #3498db;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
}

.layer-slider::-webkit-slider-thumb:hover {
    background: #2980b9;
    transform: scale(1.2);
}

.layer-slider::-moz-range-thumb {
    width: 10px;
    height: 10px;
    background: #3498db;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.layer-slider-value {
    font-size: 0.7rem;
    color: #2c3e50;
    font-weight: 600;
    width: 35px;
    text-align: right;
    flex-shrink: 0;
}

/* Symbology Section (Expandable) */
.layer-symbology {
    border-top: 1px solid #e8ecf1;
    margin-top: 6px;
    padding-top: 6px;
    display: none;
}

.layer-symbology.expanded {
    display: block;
}

.symbology-section {
    margin-bottom: 8px;
}

.symbology-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 3px;
    display: block;
}

.symbology-options {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.symbology-option {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.7rem;
}

.symbology-option input[type="radio"] {
    width: 12px;
    height: 12px;
}

.symbology-select {
    width: 100%;
    padding: 4px 6px;
    font-size: 0.75rem;
    border: 1px solid #e8ecf1;
    border-radius: 3px;
    background: white;
}

/* Legend Section (in panel) */
/* Stacked-accordion legend: one collapsible card per visible layer.
   No own max-height/overflow — .panel-body already scrolls; a nested scroll
   container clipped the lower cards in the narrow legend panel. */
.legend-accordion {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.legend-card {
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    flex: 0 0 auto;   /* keep each card at its natural height — never shrink/overlap in the column */
}
.legend-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    cursor: pointer;
    background: var(--surface);
    user-select: none;
}
.legend-card-header:hover { background: #f1f5f8; }
.legend-card-header:focus-visible { outline: 2px solid var(--primary-light); outline-offset: -2px; }
/* Chevron reads as an interactive toggle: primary color + rotates to point
   right when collapsed (single glyph, CSS-driven — no textContent swap). */
.legend-card-chevron {
    font-size: 0.7rem;
    color: var(--primary-color);
    width: 10px;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
.legend-card.legend-collapsed .legend-card-chevron { transform: rotate(-90deg); }
/* Collapsed header reads as a clickable button-bar (vs. a flat title) so it's
   obvious the card can be re-expanded. */
.legend-card.legend-collapsed .legend-card-header { background: #eef3f8; }
.legend-card.legend-collapsed .legend-card-header:hover { background: #e1ebf5; }
.legend-card-title {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary, #2c3e50);
    line-height: 1.25;
    word-break: break-word;
}
.legend-card-mini { display: none; align-items: center; gap: 3px; flex-shrink: 1; max-width: 52px; overflow: hidden; }
/* A COLLAPSED card shows ONLY the chevron + the layer name (the swatch preview
   is intentionally hidden). Earlier attempts kept the preview and tried to
   reserve width for the name via flex-shrink/min-width, but in the narrow
   (~200px) legend panel the name still got squeezed to nothing — leaving a
   minimized card with no readable label and no obvious way to re-expand it.
   Hiding the preview gives the name the full header width: it can't be
   squeezed out, so a collapsed card is always identifiable and clickable. */
.legend-card.legend-collapsed .legend-card-mini { display: none; }
.legend-card.legend-collapsed .legend-card-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
}
.legend-card-body { padding: 6px 10px 8px; }
.legend-card.legend-collapsed .legend-card-body { display: none; }
.legend-sub { color: var(--text-secondary, #95a5a6); font-size: 0.72rem; margin: 2px 0; }

.legend-section {
    padding: 8px;
}

.legend-section h4 {
    font-size: 0.85rem;
    margin-bottom: 3px;
    color: #2c3e50;
}

.legend-subtitle {
    font-size: 0.7rem;
    color: #95a5a6;
    display: block;
    margin-bottom: 8px;
}

.legend-items-new {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.legend-item-new {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
}

.legend-color-new {
    width: 20px;
    height: 14px;
    border-radius: 2px;
    flex-shrink: 0;
}

.legend-label-new {
    color: #2c3e50;
}

/* Compact Time Slider (50% size) */
#time-slider {
    width: 100px !important;  /* Was 200px */
    height: 3px !important;   /* Was 6px */
}

#time-slider::-webkit-slider-thumb {
    width: 10px !important;   /* Was 20px */
    height: 10px !important;
}

#time-slider::-moz-range-thumb {
    width: 10px !important;
    height: 10px !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .overlay-panel {
        min-width: 240px;
        max-width: calc(100vw - 40px);
    }
    
    .map-overlay-left,
    .map-overlay-right {
        top: 5px;
    }
    
    .map-overlay-left {
        left: 5px;
    }
    
    .map-overlay-right {
        right: 5px;
    }
}

/* ===== v095b: Layer Control Sections ===== */

.layer-control-section {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e8ecf1;
}

.layer-control-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 4px;
}

.layer-control-select {
    width: 100%;
    padding: 6px 8px;
    font-size: 0.8rem;
    border: 1px solid #e8ecf1;
    border-radius: 3px;
    background: white;
    cursor: pointer;
}

.layer-control-select:focus {
    outline: none;
    border-color: #3498db;
}

/* ===== v096: Wider Panel & Compact Symbology ===== */

/* Wider overlay panel */
.overlay-panel {
    min-width: 350px !important;
    max-width: 450px !important;
}

/* Compact symbology bar (inline like old toolbar) */
.symbology-bar {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 4px;
    margin-top: 8px;
}

.symbology-bar select {
    flex: 1;
    min-width: 100px;
    padding: 4px 6px;
    font-size: 0.75rem;
    border: 1px solid #e8ecf1;
    border-radius: 3px;
}

.symbology-bar label {
    font-size: 0.7rem;
    color: #666;
    font-weight: 600;
}

/* Layer item compact layout */
.layer-item-compact {
    background: white;
    border: 1px solid #e8ecf1;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 10px;
}

.layer-item-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
    padding: 2px 0;
    cursor: pointer;
    border-radius: 4px;
}

.layer-item-header:hover {
    background: #f8f9fa;
}

.layer-expand-icon {
    font-size: 0.7rem;
    transition: transform 0.2s;
}

.layer-expand-icon.expanded {
    transform: rotate(90deg);
}

.layer-item-content {
    display: none;
    padding: 6px 0 0 24px;
}

.layer-item-content.expanded {
    display: block;
}

/* Inline sliders (side by side) */
.layer-sliders-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 6px;
    overflow: visible;
}

.layer-slider-compact {
    display: flex;
    align-items: center;
    gap: 8px;
}

.layer-slider-compact label {
    font-size: 0.75rem;
    color: #666;
    white-space: nowrap;
    min-width: 50px;
}

.layer-slider-compact input[type="range"] {
    flex: 1;
    min-width: 100px;
    height: 4px;
    -webkit-appearance: none;
    background: #e8ecf1;
    border-radius: 2px;
    outline: none;
    pointer-events: all;
    cursor: pointer;
}

/* Smaller slider thumbs (50% size) */
.layer-slider-compact input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: #3498db;
    border-radius: 50%;
    cursor: grab;
    transition: all 0.2s;
    pointer-events: all;
}

.layer-slider-compact input[type="range"]::-webkit-slider-thumb:hover {
    background: #2980b9;
    transform: scale(1.2);
}

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

.layer-slider-compact input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #3498db;
    border-radius: 50%;
    cursor: grab;
    border: none;
    pointer-events: all;
}

.layer-slider-compact input[type="range"]::-moz-range-thumb:active {
    cursor: grabbing;
}

.layer-slider-compact .value {
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 40px;
    text-align: right;
    color: #2c3e50;
}

/* Reduced symbology padding */
.symbology-section-box {
    border: 2px solid #e8ecf1;
    border-radius: 6px;
    padding: 6px;
    background: #fafbfc;
    margin-top: 6px;
}

.symbology-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.symbology-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.symbology-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.symbology-field label {
    font-size: 0.7rem;
    color: #666;
    font-weight: 500;
}

.symbology-field select {
    font-size: 0.8rem;
    padding: 4px 6px;
    border: 1px solid #dde4e9;
    border-radius: 4px;
    background: white;
    color: #2c3e50;
}

/* Tighter item spacing */
.layer-item-compact {
    background: white;
    border: 1px solid #e8ecf1;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 3px;
    transition: all 0.2s;
}

.layer-parameter-select {
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e8ecf1;
}

.layer-parameter-select label {
    display: block;
    font-size: 0.7rem;
    color: #666;
    font-weight: 500;
    margin-bottom: 3px;
}

.layer-parameter-select select {
    width: 100%;
    padding: 6px 8px;
    font-size: 0.85rem;
    border: 1px solid #dde4e9;
    border-radius: 4px;
    background: white;
    color: #2c3e50;
}

/* Tooltips */
.tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #95a5a6;
    color: white;
    font-size: 0.65rem;
    font-weight: bold;
    margin-left: 4px;
    cursor: help;
    transition: all 0.2s;
}

.tooltip-icon:hover {
    background: #3498db;
    transform: scale(1.1);
}

/* Prevent accidental drag on layer content */
.layer-item-content {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

.layer-item-content input[type="range"] {
    pointer-events: all;
    cursor: pointer;
}

.layer-item-content input[type="range"]::-webkit-slider-thumb {
    pointer-events: all;
}

.layer-item-content input[type="range"]::-moz-range-thumb {
    pointer-events: all;
}

.layer-item-content select {
    pointer-events: auto;
}

/* Disable dragging for layer content elements */
.layer-item-compact.expanded {
    pointer-events: auto;
}

.layer-drag-handle {
    cursor: move;
    cursor: grab;
    padding: 2px 4px;
    color: #95a5a6;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.layer-drag-handle:active {
    cursor: grabbing;
}

/* Make drag handle more visible */
.layer-item-compact:hover .layer-drag-handle {
    color: #7f8c8d;
}

/* Ensure layer content doesn't interfere with drag */
.layer-item-content {
    pointer-events: auto;
}

.layer-item-content * {
    pointer-events: auto;
}

/* Prevent overflow */
.overlay-panel {
    overflow-x: hidden !important;
}

/* Ensure no horizontal scroll on layer items */
.layer-item-compact {
    overflow: hidden;
}
/* ============================================
   COLLAPSIBLE SECTIONS - Phase 1
   ============================================ */

/* Section Header - Clickable to expand/collapse */
.collapsible-section .section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
    border-radius: 4px;
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
}

.collapsible-section .section-header:hover {
    background-color: #f5f7fa;
}

.collapsible-section .section-header h3 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    flex: 1;
}

/* Expand/Collapse Icon */
.section-expand-icon {
    font-size: 0.7rem;
    transition: transform 0.2s;
    color: #7f8c8d;
    flex-shrink: 0;
}

.section-expand-icon.expanded {
    transform: rotate(0deg);
}

/* When collapsed, rotate icon */
.section-content.collapsed + .section-header .section-expand-icon,
.collapsible-section .section-header .section-expand-icon:not(.expanded) {
    transform: rotate(-90deg);
}

/* Section Content - Collapsible */
.section-content {
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 1;
}

.section-content.expanded {
    max-height: 2000px; /* Large enough for content */
    opacity: 1;
}

.section-content.collapsed {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

/* Layer Count Badge */
.layer-count {
    font-size: 0.75rem;
    color: #7f8c8d;
    background: #ecf0f1;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
}

/* ============================================
   LAYERS IN SIDEBAR (not overlay)
   ============================================ */

/* Remove overlay styles - layers are now in sidebar */
#layer-panel-container {
    display: none; /* Hide old overlay container */
}

/* Layer items in sidebar */
#layers-list {
    margin-bottom: 8px;
}

.layer-item-compact {
    background: white;
    border: 1px solid #e8ecf1;
    border-radius: 6px;
    padding: 6px 8px;
    margin-bottom: 3px;
    transition: all 0.2s;
}

.layer-item-compact:hover {
    border-color: #3498db;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Layer Header */
.layer-item-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
    padding: 2px 0;
    cursor: pointer;
    border-radius: 4px;
}

.layer-item-header:hover {
    background: #f8f9fa;
}

/* Drag Handle */
.layer-drag-handle {
    cursor: move;
    cursor: grab;
    padding: 2px 4px;
    color: #95a5a6;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.layer-drag-handle:active {
    cursor: grabbing;
}

.layer-item-compact:hover .layer-drag-handle {
    color: #7f8c8d;
}

/* Expand Icon */
.layer-expand-icon {
    font-size: 0.7rem;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.layer-expand-icon.expanded {
    transform: rotate(90deg);
}

/* Layer Toggle (Visibility) */
.layer-toggle {
    width: 16px;
    height: 16px;
    border: 2px solid #bdc3c7;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    position: relative;
}

.layer-toggle.active {
    background: #3498db;
    border-color: #3498db;
}

.layer-toggle.active::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 10px;
    font-weight: bold;
}

/* Layer Name */
.layer-name {
    flex: 1;
    font-weight: 600;
    font-size: 0.8rem;
    color: #2c3e50;
}

/* Layer Content (Expandable) */
.layer-item-content {
    display: none;
    padding: 6px 0 0 24px;
}

.layer-item-content.expanded {
    display: block;
}

/* ============================================
   LAYER MANAGEMENT FOOTER (in sidebar)
   ============================================ */

.layer-management-footer {
    display: flex;
    gap: 6px;
    padding: 8px 0;
    border-top: 1px solid #e8ecf1;
    margin-top: 8px;
}

.layer-management-footer button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 8px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #2c3e50;
    background: white;
    border: 1px solid #dde4e9;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.layer-management-footer button:hover {
    background: #f0f4f8;
    border-color: #3498db;
    color: #3498db;
}

.layer-management-footer button svg {
    flex-shrink: 0;
}

/* ============================================
   SELECTION BUTTONS (Updated styling)
   ============================================ */

.selection-buttons {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}

.selection-buttons .btn-compact {
    flex: 1;
    padding: 6px 4px;
    font-size: 0.75rem;
}

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

.sidebar {
    overflow-y: auto;
    overflow-x: hidden;
}

/* Compact spacing for sidebar sections */
.control-section {
    margin-bottom: 8px;
}

.control-section:last-child {
    margin-bottom: 0;
}

/* ============================================
   ANIMATION & TRANSITIONS
   ============================================ */

.section-content {
    transition: max-height 0.25s ease-in-out, 
                opacity 0.25s ease-in-out,
                padding 0.25s ease-in-out;
}

.section-expand-icon {
    transition: transform 0.2s ease-in-out;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.collapsed {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.expanded {
    max-height: none;
    opacity: 1;
}

/* ============================================
   QUICK SYMBOLOGY & ADVANCED BUTTON - Phase 1b
   ============================================ */

.quick-symbology {
    margin-bottom: 6px;
}

.quick-symbology label {
    display: block;
    font-size: 0.7rem;
    color: #666;
    font-weight: 500;
    margin-bottom: 3px;
}

.quick-symbology-select {
    width: 100%;
    padding: 6px 8px;
    font-size: 0.85rem;
    border: 1px solid #dde4e9;
    border-radius: 4px;
    background: white;
    color: #2c3e50;
}

.layer-advanced-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    margin-top: 8px;
    margin-bottom: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #3498db;
    background: white;
    border: 1px solid #3498db;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.layer-advanced-btn:hover {
    background: #ebf5fb;
    border-color: #2980b9;
    color: #2980b9;
}

.layer-advanced-btn svg {
    flex-shrink: 0;
}

/* ============================================
   ADVANCED LAYER MODAL
   ============================================ */

.advanced-layer-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}

.advanced-layer-modal.active {
    display: flex;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.modal-content-wrapper {
    position: relative;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e8ecf1;
    background: #f8f9fa;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3e50;
}

.modal-close-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #7f8c8d;
    transition: all 0.2s;
}

.modal-close-btn:hover {
    background: #e8ecf1;
    color: #2c3e50;
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid #e8ecf1;
    background: #f8f9fa;
}

/* Modal Tabs */
.modal-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e8ecf1;
}

.modal-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: #7f8c8d;
    transition: all 0.2s;
}

.modal-tab:hover {
    color: #2c3e50;
    background: #f8f9fa;
}

.modal-tab.active {
    color: #3498db;
    border-bottom-color: #3498db;
}

.modal-tab svg {
    flex-shrink: 0;
}

.modal-tab-content {
    display: none;
}

.modal-tab-content.active {
    display: block;
}

/* Modal Sections */
.modal-section {
    margin-bottom: 24px;
}

.modal-section h4 {
    margin: 0 0 12px 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #2c3e50;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #2c3e50;
    margin-bottom: 6px;
}

.form-control {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.9rem;
    border: 1px solid #dde4e9;
    border-radius: 4px;
    background: white;
    color: #2c3e50;
}

.form-control-range {
    width: 100%;
}

.help-text {
    margin: 4px 0 0 0;
    font-size: 0.8rem;
    color: #7f8c8d;
}

.range-value {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #3498db;
}

/* Color Scheme Grid */
.color-scheme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.color-scheme-option {
    padding: 12px;
    border: 2px solid #e8ecf1;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.color-scheme-option:hover {
    border-color: #3498db;
    background: #f8f9fa;
}

.color-scheme-option.selected {
    border-color: #3498db;
    background: #ebf5fb;
}

.color-scheme-preview {
    display: flex;
    height: 30px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.color-scheme-preview span {
    flex: 1;
}

.color-scheme-option > span {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #2c3e50;
}

/* Selection Method Buttons */
.selection-method-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.selection-method-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    background: white;
    border: 2px solid #e8ecf1;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.selection-method-btn:hover:not(.disabled) {
    border-color: #3498db;
    background: #ebf5fb;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.selection-method-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.selection-method-btn span {
    font-size: 0.9rem;
    font-weight: 600;
    color: #2c3e50;
}

.selection-method-btn small {
    font-size: 0.75rem;
    color: #7f8c8d;
}

.selection-summary {
    padding: 16px;
    background: #f8f9fa;
    border: 1px solid #e8ecf1;
    border-radius: 6px;
}

.selection-summary p {
    margin: 0 0 12px 0;
    color: #7f8c8d;
}

/* Modal Buttons */
.btn-primary {
    padding: 10px 20px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary:hover {
    background: #2980b9;
}

.btn-secondary {
    padding: 10px 20px;
    background: white;
    color: #2c3e50;
    border: 1px solid #dde4e9;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background: #f8f9fa;
    border-color: #bdc3c7;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.8rem;
}


/* ============================================
   SECTION HELPER TEXT - Phase 1c
   ============================================ */

.section-help-text {
    margin: 0 0 8px 0;
    padding: 6px 10px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #7f8c8d;
    background: #f8f9fa;
    border-left: 3px solid #3498db;
    border-radius: 3px;
}


/* ============================================
   TYPOGRAPHY SYSTEM - Phase 1d
   Standardized font hierarchy for control panel
   ============================================ */

/* Level 1: Section Headers (Layers, View, Time) */
.control-section h3,
.collapsible-section .section-header h3 {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    letter-spacing: 0.3px;
}

/* Level 2: Sub-Headers (Layer names, field labels) */
.layer-name,
.layer-parameter-select label,
.layer-slider-compact label,
.quick-symbology label {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
}

/* Level 3: Body Text (Dropdowns, values, help text) */
.layer-parameter-select select,
.quick-symbology select,
.layer-slider-compact .value,
.section-help-text {
    font-size: 0.8rem !important;
    font-weight: 400 !important;
}

/* Level 4: Small Text (Badges, button labels) */
.layer-count,
.selection-buttons .btn-compact,
.toggle-label span {
    font-size: 0.75rem !important;
    font-weight: 400 !important;
}

/* Compact Section Spacing */
.control-section {
    margin-bottom: 6px !important;
}

.collapsible-section .section-header {
    padding: 6px 0 !important;
}

.section-content {
    padding-top: 6px;
}

/* Compact Layer Item Spacing */
.layer-item-compact {
    padding: 6px 8px !important;
    margin-bottom: 4px !important;
}

.layer-item-header {
    padding: 3px 0 !important;
}

.layer-item-content {
    padding: 6px 0 0 20px !important;
}

/* Compact Layer Controls */
.layer-parameter-select {
    margin-bottom: 6px !important;
    padding-bottom: 6px !important;
}

.layer-parameter-select label {
    margin-bottom: 3px !important;
}

.layer-sliders-row {
    margin-bottom: 6px !important;
}

.quick-symbology {
    margin-bottom: 6px !important;
}

.quick-symbology label {
    margin-bottom: 3px !important;
}

.layer-advanced-btn {
    margin-top: 6px !important;
    margin-bottom: 4px !important;
    padding: 6px 10px !important;
    font-size: 0.8rem !important;
}

.layer-remove-section {
    margin-top: 4px !important;
    padding-top: 4px !important;
}

.layer-remove-btn {
    padding: 4px 8px !important;
    font-size: 0.75rem !important;
}

/* Section Help Text Compact */
.section-help-text {
    margin: 0 0 6px 0 !important;
    padding: 4px 8px !important;
    line-height: 1.3 !important;
}

/* Selection Buttons */
.selection-buttons {
    margin-bottom: 6px !important;
}

/* Toggle Group Compact */
.toggle-group {
    gap: 6px;
}

.toggle-label {
    margin-bottom: 0 !important;
    font-size: 0.8rem !important;
}

/* Time Controls Compact */
.time-controls select {
    font-size: 0.8rem !important;
    padding: 6px 8px !important;
}

.custom-range {
    margin-top: 6px !important;
}


/* ─── COMPACT DESIGN PASS ──────────────────────────────────────────────────
   Reduces oversized view headers, section headers, and general spacing
   to match the compact aesthetic throughout the app.
   ───────────────────────────────────────────────────────────────────────── */

/* View header h2s (Analytics, AI, Export) — were 1.75–2rem */
.analytics-header h2,
.ai-header h2,
.export-container h2,
.library-header h2,
.marketplace-header h2 {
    font-size: 1.1rem !important;
    font-weight: 600;
}

/* View header description text */
.ai-description {
    font-size: 0.75rem !important;
}

/* View header padding — was var(--space-xl) which is large */
.analytics-header,
.ai-header {
    padding: 10px 16px !important;
}

.export-container {
    padding: var(--space-lg) !important;
}

/* Section/panel h3 subheadings */
.chart-header h3,
.export-section h3,
.detail-header h3,
.panel-header h3 {
    font-size: 0.8rem !important;
    font-weight: 600;
}

/* Sidebar collapsible section headers */
.collapsible-section .section-header h3 {
    font-size: 0.7rem !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* General body/form text in views */
.ai-description,
.export-section p,
.library-description,
.marketplace-description {
    font-size: 0.75rem !important;
}

/* btn-large — bring it in line */
.btn-large {
    font-size: 0.8rem !important;
    padding: 6px 14px !important;
}

/* Analytics grid padding */
.analytics-grid {
    padding: var(--space-md) !important;
    gap: var(--space-md) !important;
}

/* ─── ALL-APTOS FONT PASS ──────────────────────────────────────────────────
   Replace all serif (Crimson Pro) and decorative mono usage with Aptos.
   Mono kept only for code/SQL inputs where fixed-width is functional.
   ───────────────────────────────────────────────────────────────────────── */

/* (The serif token now points at sans where it is defined, at the top of this file.) */

/* Logo: was mono — switch to Aptos bold */
.logo {
    font-family: var(--font-sans) !important;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Param names, legend text, chart headers — switch to Aptos */
.param-name,
.legend-subtitle,
.legend-item .count,
.legend-exceedance-text,
.chart-header h3 {
    font-family: var(--font-sans) !important;
}

/* Code/SQL inputs — keep mono (functional) */
.sql-input,
textarea.sql-query,
.code-block,
pre,
code {
    font-family: var(--font-mono) !important;
}

/* Everything else that slipped through with font-mono */
.param-value,
.stat-value,
.tooltip-value,
.tooltip-value-large {
    font-family: var(--font-sans) !important;
}

/* ─── LEGEND COMPACT ────────────────────────────────────────────────────────
   Narrow the legend panel and tighten item layout.
   ───────────────────────────────────────────────────────────────────────── */

#legend-panel {
    min-width: 140px !important;
    max-width: 160px !important;
}

/* Remove the auto margin that creates giant gap between label and count */
.legend-item {
    gap: 5px;
}

.legend-item .count {
    margin-left: 4px !important; /* was: auto — which caused the big gap */
    white-space: nowrap;
}

.legend-item span {
    font-size: 0.7rem;
}

.legend-marker {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0;
}

/* ─── LEGEND WIDTH CORRECTION ───────────────────────────────────────────────
   Slightly wider than the previous over-compact pass to prevent line wrapping.
   ───────────────────────────────────────────────────────────────────────── */
#legend-panel {
    min-width: 180px !important;
    max-width: 200px !important;
}

/* ─── BASEMAP SECTION ────────────────────────────────────────────────────────*/

.basemap-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}

.basemap-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 2px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.65rem;
    color: var(--text-secondary);
    font-family: var(--font-sans);
}

.basemap-tile:hover {
    border-color: var(--primary-color);
    color: var(--text-primary);
}

.basemap-tile.active {
    border-color: var(--primary-color);
    background: rgba(var(--primary-rgb, 41,128,185), 0.08);
    color: var(--primary-color);
    font-weight: 600;
}

.basemap-thumb {
    width: 100%;
    height: 36px;
    border-radius: 3px;
    background-size: cover;
    background-position: center;
}

/* Thumbnail color previews (CSS-only, no images needed) */
.basemap-thumb-streets  { background: linear-gradient(135deg, #e8e8e8 0%, #f5f5f0 40%, #d4e8c2 70%, #b8d4b8 100%); }
.basemap-thumb-light    { background: linear-gradient(135deg, #f8f8f8 0%, #efefef 50%, #e8e8e8 100%); }
.basemap-thumb-dark     { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); }
.basemap-thumb-satellite{ background: linear-gradient(135deg, #2d5016 0%, #1a3a0a 30%, #3d6b22 60%, #1c4a0e 100%); }
.basemap-thumb-topo     { background: linear-gradient(135deg, #c8b89a 0%, #a8c890 30%, #98b880 60%, #d4c4a0 100%); }
.basemap-thumb-none     { background: repeating-linear-gradient(45deg, #f0f0f0, #f0f0f0 4px, #ffffff 4px, #ffffff 8px); }

/* Basemap opacity row */
.basemap-opacity-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.65rem;
    color: var(--text-secondary);
}

.basemap-opacity-row input[type="range"] {
    flex: 1;
    height: 3px;
}

.basemap-opacity-row span {
    min-width: 30px;
    text-align: right;
    font-size: 0.65rem;
}

/* Empty state for rasters */
.empty-state-msg {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-style: italic;
    padding: 6px 0;
    margin: 0;
}

/* Raster count badge — match vector layer-count style */
.raster-count {
    font-size: 0.75rem;
    color: #7f8c8d;
    background: #ecf0f1;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANALYTICS VIEW — AquaFrame v105
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Toolbar ────────────────────────────────────────────────────────────── */
.analytics-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         12px 20px 10px;
    border-bottom:   1px solid var(--border);
    flex-shrink:     0;
    gap:             12px;
    flex-wrap:       wrap;
}

.analytics-controls {
    display:     flex;
    gap:         8px;
    flex-wrap:   wrap;
    align-items: center;
}

.analytics-btn {
    display:     flex;
    align-items: center;
    gap:         5px;
    font-size:   0.75rem !important;
    padding:     5px 10px !important;
    height:      30px;
    white-space: nowrap;
}

.restore-count {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    background:       #e74c3c;
    color:            white;
    border-radius:    10px;
    font-size:        0.6rem;
    font-weight:      700;
    min-width:        16px;
    height:           16px;
    padding:          0 4px;
    margin-left:      2px;
}

.restore-count:empty { display: none; }

/* ── Chart Grid ─────────────────────────────────────────────────────────── */
#analytics-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   16px;
    padding:               16px 20px;
    overflow-y:            auto;
    flex:                  1;
}

@media (max-width: 900px) {
    #analytics-grid { grid-template-columns: 1fr; }
}

/* Auto-reflow: 1 chart = full width, 3 charts = 2+1 */
#analytics-grid:has(.chart-card:only-child) .chart-card { grid-column: 1 / -1; }
#analytics-grid:has(.chart-card:nth-child(3):last-child) .chart-card:last-child { grid-column: 1 / -1; }

/* ── Chart Card ─────────────────────────────────────────────────────────── */
.chart-card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 8px;
    display:       flex;
    flex-direction: column;
    min-height:    280px;
    overflow:      hidden;
    transition:    box-shadow 0.15s;
}

.chart-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

/* ── Chart Card Header ──────────────────────────────────────────────────── */
.chart-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         8px 10px;
    border-bottom:   1px solid var(--border);
    gap:             8px;
    flex-shrink:     0;
    flex-wrap:       wrap;
}

.chart-header-left {
    display:     flex;
    align-items: center;
    gap:         6px;
    flex:        1;
    min-width:   0;
}

.chart-icon { font-size: 0.9rem; }

.chart-title {
    font-size:     0.78rem;
    font-weight:   600;
    color:         var(--text-primary);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    margin:        0;
}

.chart-header-controls {
    display:     flex;
    align-items: center;
    gap:         4px;
    flex-shrink: 0;
}

.chart-select {
    font-size:     0.68rem;
    padding:       3px 6px;
    border:        1px solid var(--border);
    border-radius: 4px;
    background:    var(--surface);
    color:         var(--text-secondary);
    cursor:        pointer;
    height:        24px;
}

.chart-action-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           24px;
    height:          24px;
    border:          none;
    border-radius:   4px;
    background:      transparent;
    color:           var(--text-secondary);
    cursor:          pointer;
    transition:      all 0.15s;
    padding:         0;
    flex-shrink:     0;
}

.chart-action-btn:hover { background: var(--surface-hover); color: var(--text-primary); }

.chart-dismiss-btn:hover { color: #e74c3c !important; }
.chart-save-btn:hover    { color: #27ae60 !important; }

/* ── Chart Body ─────────────────────────────────────────────────────────── */
.chart-body {
    flex:       1;
    min-height: 220px;
    position:   relative;
    padding:    4px;
}

.chart-body > div:first-child {
    width:  100%;
    height: 100%;
}

/* ── Loading / Error states ─────────────────────────────────────────────── */
.chart-loading,
.chart-error {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    height:          100%;
    min-height:      180px;
    gap:             8px;
    color:           var(--text-secondary);
    font-size:       0.75rem;
}

.chart-spinner {
    width:            24px;
    height:           24px;
    border:           2px solid var(--border);
    border-top-color: var(--primary-color);
    border-radius:    50%;
    animation:        spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.chart-error { color: #c0392b; }
.chart-error-icon { font-size: 1.5rem; }
.chart-error p { margin: 0; font-weight: 600; }
.chart-error small { color: var(--text-secondary); text-align: center; max-width: 200px; }

.chart-demo-badge {
    position:      absolute;
    top:           8px;
    right:         8px;
    background:    rgba(243, 156, 18, 0.15);
    color:         #e67e22;
    border:        1px solid rgba(243,156,18,0.3);
    border-radius: 4px;
    font-size:     0.6rem;
    font-weight:   600;
    padding:       2px 6px;
    pointer-events: none;
}

/* ── Analytics empty state ──────────────────────────────────────────────── */
.analytics-empty-state {
    grid-column:     1 / -1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         40px;
    color:           var(--text-secondary);
    font-size:       0.8rem;
    text-align:      center;
}

/* ── Analytics modal overlay ────────────────────────────────────────────── */
.analytics-modal-overlay {
    position:         fixed;
    inset:            0;
    background:       rgba(0,0,0,0.45);
    z-index:          10000;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    opacity:          0;
    transition:       opacity 0.2s;
}

.analytics-modal-overlay.visible { opacity: 1; }

.analytics-simple-dialog {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 10px;
    width:         90%;
    max-height:    85vh;
    overflow:      hidden;
    display:       flex;
    flex-direction: column;
    box-shadow:    0 8px 32px rgba(0,0,0,0.18);
    transform:     translateY(4px);
    transition:    transform 0.2s;
}

.analytics-modal-overlay.visible .analytics-simple-dialog { transform: translateY(0); }

.analytics-modal-body {
    overflow-y: auto;
    padding:    16px 20px;
    flex:       1;
}

.modal-footer {
    display:         flex;
    justify-content: flex-end;
    gap:             8px;
    padding:         12px 20px;
    border-top:      1px solid var(--border);
    flex-shrink:     0;
}

/* ── Save / Create form ─────────────────────────────────────────────────── */
.save-recipe-form { display: flex; flex-direction: column; gap: 14px; }

.form-group { display: flex; flex-direction: column; gap: 4px; }

.form-group label {
    font-size:   0.72rem;
    font-weight: 600;
    color:       var(--text-primary);
}

.form-hint {
    font-size:   0.65rem;
    color:       var(--text-secondary);
    font-weight: 400;
    margin-left: 4px;
}

.form-input {
    padding:       6px 8px;
    border:        1px solid var(--border);
    border-radius: 5px;
    font-size:     0.75rem;
    font-family:   var(--font-sans);
    color:         var(--text-primary);
    background:    var(--bg-primary);
    transition:    border-color 0.15s;
}

.form-input:focus {
    outline:      none;
    border-color: var(--primary-color);
}

.form-textarea {
    resize:     vertical;
    min-height: 64px;
}

.form-select { cursor: pointer; }

.form-divider {
    height:     1px;
    background: var(--border);
    margin:     4px 0;
}

/* Radio group */
.radio-group { display: flex; flex-direction: column; gap: 6px; }

.radio-option {
    display:     flex;
    align-items: flex-start;
    gap:         8px;
    cursor:      pointer;
    font-size:   0.72rem;
    color:       var(--text-secondary);
    line-height: 1.4;
}

.radio-option input { margin-top: 2px; flex-shrink: 0; }
.radio-option strong { color: var(--text-primary); }

/* MOI section */
.moi-section { }

.moi-disabled { opacity: 0.7; }

.toggle-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
    font-size:       0.75rem;
}

.toggle-switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-track {
    position:      absolute;
    inset:         0;
    background:    var(--border);
    border-radius: 20px;
    cursor:        pointer;
    transition:    background 0.2s;
}
.toggle-track::before {
    content:          '';
    position:         absolute;
    width:            14px;
    height:           14px;
    left:             3px;
    top:              3px;
    background:       white;
    border-radius:    50%;
    transition:       transform 0.2s;
}
.toggle-switch input:checked + .toggle-track { background: var(--primary-color); }
.toggle-switch input:checked + .toggle-track::before { transform: translateX(16px); }
.toggle-switch input:disabled + .toggle-track { cursor: not-allowed; opacity: 0.6; }

.server-required-badge {
    display:          inline-block;
    background:       rgba(149,165,166,0.2);
    color:            var(--text-secondary);
    border:           1px solid var(--border);
    border-radius:    4px;
    font-size:        0.6rem;
    padding:          1px 5px;
    margin-left:      6px;
    vertical-align:   middle;
}

.moi-note {
    font-size:   0.68rem;
    color:       var(--text-secondary);
    margin:      6px 0 0;
    line-height: 1.5;
}

.modal-subtitle {
    font-size:     0.75rem;
    color:         var(--text-secondary);
    margin:        0 0 10px;
}

/* ── Restore picker ─────────────────────────────────────────────────────── */
.restore-items-list { display: flex; flex-direction: column; gap: 8px; }

.restore-item {
    display:     flex;
    align-items: center;
    gap:         8px;
    cursor:      pointer;
    padding:     8px 10px;
    border:      1px solid var(--border);
    border-radius: 6px;
    font-size:   0.75rem;
    transition:  background 0.15s;
}

.restore-item:hover { background: var(--surface-hover); }

.restore-item-icon { font-size: 1rem; }

.restore-item-name { font-weight: 500; color: var(--text-primary); }

.btn-sm { padding: 4px 10px !important; font-size: 0.7rem !important; }


/* ── Analytics chart sizing fixes ──────────────────────────────────────── */

/* Give chart body explicit height so Plotly has something to measure */
.chart-body {
    flex:       1 !important;
    height:     300px !important;
    min-height: 280px !important;
    position:   relative;
    padding:    4px;
    overflow:   hidden;
}

.chart-body > div {
    width:  100% !important;
    height: 100% !important;
}

/* Action buttons — make sure SVGs are visible (not zero-size) */
.chart-action-btn svg {
    display:      block;
    width:        14px !important;
    height:       14px !important;
    stroke:       currentColor;
    fill:         none;
    stroke-width: 2;
    flex-shrink:  0;
}

.chart-action-btn {
    width:  26px !important;
    height: 26px !important;
}

/* Chart card: don't let grid row collapse */
.chart-card {
    min-height: 320px !important;
}


/* ── Analytics chart sizing — FINAL OVERRIDE (v134 hard-fix) ────────────── */
/* The previous version of this block used `overflow: visible !important`
   on both the card and the body so Vega's x-axis labels wouldn't get
   clipped. But that let any tall SVG paint past the card boundary into
   the next row — the long-running vertical-overlap bug.
   Fix: bump card height so a 290-tall chart plus axes/title/legend fits
   comfortably, give the body room for axis labels via padding-bottom,
   and switch overflow back to hidden so nothing can escape. */
.analytics-grid .chart-card {
    min-height:     520px !important;
    height:         520px !important;
    max-height:     520px !important;
    display:        flex !important;
    flex-direction: column !important;
    overflow:       hidden !important;
    contain:        layout paint;
    isolation:      isolate;
    position:       relative;
    box-sizing:     border-box;
}

/* Header is fixed height */
.analytics-grid .chart-card .chart-header {
    flex-shrink: 0 !important;
    height:      auto !important;
}

/* Body fills remaining card space. min-height: 0 lets flex actually
   shrink; padding-bottom keeps axis labels off the bottom edge. */
.analytics-grid .chart-card .chart-body {
    flex:        1 1 auto !important;
    height:      0 !important;
    min-height:  0 !important;
    padding:     0 0 8px 0 !important;
    position:    relative !important;
    background:  transparent !important;
    overflow:    hidden !important;
}

/* Plotly div fills the body */
.analytics-grid .chart-card .chart-body > div:first-child {
    width:  100% !important;
    height: 100% !important;
}

/* Demo badge — small pill in corner, doesn't affect layout */
.chart-demo-badge {
    position:      absolute !important;
    top:           6px !important;
    left:          6px !important;
    right:         auto !important;
    z-index:       10;
    font-size:     0.58rem !important;
    padding:       1px 5px !important;
    background:    rgba(243, 156, 18, 0.12) !important;
    color:         #c87f00 !important;
    border:        1px solid rgba(243,156,18,0.25) !important;
    border-radius: 4px !important;
    pointer-events: none;
}


/* ── Chart body explicit white background (v108 fix) ───────────────────── */
.analytics-grid .chart-card .chart-body {
    background: #ffffff !important;
}

/* ── Force Plotly backgrounds white — override any Plotly defaults ──────── */
/* Plotly renders into .js-plotly-plot > .plot-container > .svg-container > svg */
.chart-body .js-plotly-plot,
.chart-body .plot-container,
.chart-body .svg-container,
.chart-body .svg-container svg {
    background: #ffffff !important;
}

/* The main-svg rect that Plotly uses as paper background */
.chart-body .main-svg {
    background: #ffffff !important;
}


/* ── Plotly background nuclear override (v110) ──────────────────────────── */
/* Plotly renders a <rect> as paper bg inside SVG — target it directly.
   The class .bg is what Plotly uses for the paper background rect.       */
.chart-body .main-svg .bg {
    fill: #ffffff !important;
}

/* Inner plot area */
.chart-body .main-svg .cartesianlayer .bg {
    fill: #fafbfc !important;
}

/* Wrapper divs Plotly creates */
.chart-body .js-plotly-plot,
.chart-body .plot-container,
.chart-body .svg-container {
    background: #ffffff !important;
    border-radius: 0 0 6px 6px;
}


/* ── Demo badge — text only, no background fill that bleeds ────────────── */
.chart-demo-badge {
    position:       absolute !important;
    top:            6px !important;
    left:           6px !important;
    right:          auto !important;
    width:          fit-content !important;
    max-width:      80px !important;
    background:     none !important;
    border:         none !important;
    color:          #e67e22 !important;
    font-size:      0.6rem !important;
    font-weight:    700 !important;
    padding:        0 !important;
    z-index:        10;
    pointer-events: none;
    text-shadow:    0 0 3px #fff, 0 0 3px #fff;
}


/* Vega-Lite chart sizing v119 */
.chart-body .vega-embed { width: 100% !important; display: block !important; }
.chart-body .vega-embed canvas,
.chart-body .vega-embed svg { display: block !important; max-width: 100% !important; }
.chart-body .vega-embed details { display: inline-block !important; }
.chart-body .vega-embed .vega-actions { display: block !important; }

/* Vega sizing v120 */
.chart-body .vega-embed { width: 100% !important; display: block !important; }
.chart-body .vega-embed canvas, .chart-body .vega-embed svg { display: block !important; max-width: 100% !important; }
.chart-body .vega-embed details { display: inline-block !important; }
.chart-body .vega-embed .vega-actions { display: block !important; }

/* Vega-Lite hover tooltip: left-align label + value columns. vega-tooltip's
   default theme right-aligns the key column, which reads raggedly against the
   values; force both columns left so the table lines up cleanly. */
#vg-tooltip-element.vg-tooltip td.key,
#vg-tooltip-element.vg-tooltip td.value,
.vg-tooltip td.key,
.vg-tooltip td.value { text-align: left !important; }

/* ── §44 Fund-a-Site ─────────────────────────────────────────────────────── */
/* Utilities launchers (the old .fund-site-launch green gradient buttons).
   They were five bold saturated-green blocks stacked in View Controls, which made
   them the loudest thing in the sidebar despite being occasional errands. Quiet
   grey now, and sized/typed to match .toggle-label (0.65rem) so the panel reads as
   one list rather than a control list plus a wall of buttons.
   The !important on font-size/padding is not decorative: a global
   `button, .btn, … { padding: 4px 10px !important; font-size: 0.8rem !important; }`
   rule (see "Smaller Buttons" above) otherwise wins regardless of specificity. */
.utility-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.utility-launch {
    width: 100%;
    text-align: left;
    padding: 5px 8px !important;
    font-family: var(--font-sans);
    /* Match what .toggle-label ACTUALLY renders at. Its first rule says 0.65rem, but a
       later `.toggle-label { font-size: 0.8rem !important }` wins — so 0.8rem is the
       real size of every other item in View Controls. */
    font-size: 0.8rem !important;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--surface-alt, #f1f3f5);
    border: 1px solid var(--border, #e2e7ec);
    border-radius: 5px;
    cursor: pointer;
    transition: background var(--transition-fast, .12s), border-color var(--transition-fast, .12s);
}

.utility-launch:hover {
    background: var(--surface-hover, #e6eaee);
    border-color: var(--text-tertiary, #b6bfc8);
}

.fund-site-panel {
    position: fixed; top: 84px; right: 18px; z-index: 1200;
    width: 360px; max-width: calc(100vw - 36px); max-height: calc(100vh - 110px);
    display: flex; flex-direction: column;
    background: #fff; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,0.22);
    border: 1px solid #e3e8ee;
}
.fund-site-panel.hidden { display: none; }
.fund-site-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-bottom: 1px solid #eef1f5;
}
.fund-site-head h3 { margin: 0; font-size: 0.98rem; }
.fund-site-body { padding: 12px 14px; overflow-y: auto; }
.fund-site-intro { margin: 0 0 11px; font-size: 0.8rem; color: #4a5b6e; line-height: 1.45; }
.fund-site-search { display: flex; gap: 6px; margin-bottom: 10px; }
.fund-site-search input {
    flex: 1; padding: 8px 10px; border: 1px solid #cfd8e3; border-radius: 6px; font-size: 0.85rem;
}
.fund-site-go {
    padding: 8px 12px; border: none; border-radius: 6px; cursor: pointer;
    background: #2e9e5b; color: #fff; font-weight: 600; font-size: 0.82rem; white-space: nowrap;
}
.fund-site-go:hover { filter: brightness(1.06); }
.fund-loading, .fund-error { font-size: 0.84rem; color: #4a5b6e; padding: 8px 2px; }
.fund-error { color: #b23b3b; }

.fund-rec { border: 1px solid #e3e8ee; border-radius: 8px; padding: 11px 12px; background: #f8fbf9; }
.fund-rec-title { font-size: 0.92rem; }
.fund-rec-ord { font-size: 0.72rem; color: #6b7a8d; margin-left: 4px; }
.fund-rec-sub { font-size: 0.74rem; color: #6b7a8d; margin: 2px 0 9px; }
.fund-rec-grid { display: grid; grid-template-columns: 1fr; gap: 6px; }
.fund-kv {
    display: flex; justify-content: space-between; gap: 10px;
    font-size: 0.8rem; padding: 5px 8px; background: #fff; border-radius: 5px; border: 1px solid #eef1f5;
}
.fund-kv span { color: #5a6b7e; } .fund-kv b { color: #243b53; text-align: right; }
.fund-cta {
    margin-top: 11px; width: 100%; padding: 10px; cursor: pointer;
    background: linear-gradient(135deg, #2e9e5b, #1f7d46); color: #fff;
    border: none; border-radius: 7px; font-size: 0.9rem; font-weight: 700;
}
.fund-cta:hover { filter: brightness(1.06); }
.fund-disclaim { margin-top: 9px; font-size: 0.68rem; color: #7a8a99; line-height: 1.4; }

.fund-alts { margin-top: 13px; }
.fund-alts-head { font-size: 0.76rem; font-weight: 600; color: #5a6b7e; margin-bottom: 6px; }
.fund-alt {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
    width: 100%; text-align: left; cursor: pointer; margin-bottom: 5px;
    padding: 7px 9px; border: 1px solid #e7ebf0; border-radius: 6px; background: #fff;
}
.fund-alt:hover { background: #f1f6f3; border-color: #c9e2d3; }
.fund-alt-name { font-size: 0.82rem; font-weight: 600; color: #243b53; }
.fund-alt-meta { font-size: 0.7rem; color: #74859a; }

/* §44 Fund-a-Site — watershed land-cover (LULC) bar */
.fund-lulc { margin-top: 11px; }
.fund-lulc-head { font-size: 0.74rem; font-weight: 600; color: #5a6b7e; margin-bottom: 5px; }
.fund-lulc-bar {
    display: flex; width: 100%; height: 16px; border-radius: 4px; overflow: hidden;
    border: 1px solid #e3e8ee; background: #eef1f5;
}
.fund-lulc-bar span { display: block; height: 100%; }
.fund-lulc-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; }
.fund-lulc-leg { font-size: 0.7rem; color: #5a6b7e; display: inline-flex; align-items: center; gap: 4px; }
.fund-lulc-leg i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.fund-lulc-loading { margin-top: 11px; font-size: 0.74rem; color: #8a98a8; font-style: italic; }

/* §44 Fund-a-Site — priority weight sliders */
.fund-weights { margin: 4px 0 10px; border: 1px solid #e7ebf0; border-radius: 6px; padding: 4px 9px; }
.fund-weights > summary { cursor: pointer; font-size: 0.78rem; color: #5a6b7e; font-weight: 600; padding: 4px 0; }
.fund-weights-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; margin: 6px 0 2px; }
.fund-weight { display: flex; flex-direction: column; gap: 1px; }
.fund-weight label { font-size: 0.7rem; color: #5a6b7e; }
.fund-weight input[type=range] { width: 100%; accent-color: #2e9e5b; }
.fund-weights-note { font-size: 0.67rem; color: #8a98a8; font-style: italic; margin-top: 4px; }

/* §39 Legislative District Water Quality — scorecard panel (reuses .fund-site-* head/body/intro/search) */
.district-wq-panel {
    position: fixed; top: 84px; right: 18px; z-index: 1200;
    width: 372px; max-width: calc(100vw - 36px); max-height: calc(100vh - 110px);
    display: flex; flex-direction: column;
    background: #fff; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,0.22);
    border: 1px solid #e3e8ee;
}
.district-wq-panel.hidden { display: none; }
.district-wq-panel .fund-site-go { background: #6c4bd1; }
.dwq-browse { margin: 2px 0 10px; border: 1px solid #e7ebf0; border-radius: 6px; padding: 4px 9px; }
.dwq-browse > summary { cursor: pointer; font-size: 0.78rem; color: #5a6b7e; font-weight: 600; padding: 4px 0; }
.dwq-browse-row { display: flex; gap: 6px; margin: 6px 0 3px; }
.dwq-browse-row select {
    flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid #cfd8e3; border-radius: 6px; font-size: 0.8rem;
}
.dwq-loading, .dwq-error { font-size: 0.84rem; color: #4a5b6e; padding: 8px 2px; }
.dwq-error { color: #b23b3b; }

.dwq-tabs { display: flex; gap: 5px; margin: 4px 0 10px; }
.dwq-tabs:empty { display: none; }
.dwq-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 6px 4px; cursor: pointer; border: 1px solid #e2e2ee; border-radius: 6px;
    background: #f7f6fb; font-size: 0.76rem; font-weight: 600; color: #5a5170;
}
.dwq-tab small { font-size: 0.64rem; font-weight: 500; color: #8a86a0; }
.dwq-tab.active { background: #6c4bd1; color: #fff; border-color: #6c4bd1; }
.dwq-tab.active small { color: #e6defb; }

.dwq-rep { display: flex; gap: 10px; align-items: center; padding: 10px 11px; border: 1px solid #e9e5f6;
    border-radius: 8px; background: #f8f6fd; margin-bottom: 10px; }
.dwq-rep-none { background: #f6f7f9; border-color: #eceff3; }
.dwq-rep-photo { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15); }
.dwq-rep-name { font-size: 0.9rem; font-weight: 700; color: #2a2342; }
.dwq-rep-sub { font-size: 0.72rem; color: #7a728f; margin: 1px 0 4px; }
.dwq-rep-note { font-size: 0.72rem; color: #8a98a8; }
.dwq-rep-contacts { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.74rem; }
.dwq-rep-contacts a { color: #6c4bd1; text-decoration: none; }
.dwq-rep-contacts a:hover { text-decoration: underline; }
.dwq-party { font-size: 0.68rem; font-weight: 700; padding: 1px 6px; border-radius: 10px; vertical-align: middle; }
.dwq-party-r { background: #fde7e7; color: #b23b3b; }
.dwq-party-d { background: #e3edfb; color: #2563a8; }
.dwq-party-i, .dwq-party-l { background: #eee9d9; color: #8a6d2f; }

.dwq-section-h { font-size: 0.74rem; font-weight: 700; color: #5a5170; text-transform: uppercase;
    letter-spacing: 0.03em; margin: 12px 0 6px; }
.dwq-src { font-size: 0.62rem; font-weight: 600; color: #9088a3; text-transform: none; letter-spacing: 0;
    background: #efecf7; padding: 1px 5px; border-radius: 8px; margin-left: 4px; }
.dwq-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.dwq-metric { background: #fbfbfd; border: 1px solid #ecedf3; border-radius: 6px; padding: 7px 8px; text-align: center; }
.dwq-metric-v { font-size: 0.98rem; font-weight: 700; color: #243b53; line-height: 1.15; }
.dwq-metric-l { font-size: 0.66rem; color: #6b7a8d; margin-top: 2px; line-height: 1.25; }
.dwq-metric-sub { color: #9aa6b3; }
.dwq-unit { font-size: 0.66rem; font-weight: 500; color: #8a98a8; }
.dwq-trend { font-size: 0.84rem; font-weight: 700; }
.dwq-exc-hi { color: #c0392b; } .dwq-exc-mid { color: #d98a1f; } .dwq-exc-lo { color: #2e9e5b; }

.dwq-actions { display: flex; gap: 6px; margin: 13px 0 0; }
.dwq-btn { flex: 1; padding: 9px; cursor: pointer; border: 1px solid #d8d3ea; border-radius: 7px;
    background: #fff; color: #5a5170; font-size: 0.8rem; font-weight: 600; }
.dwq-btn:hover { background: #f4f1fb; }
.dwq-btn-primary { background: linear-gradient(135deg, #7a5bd6, #5a3bbf); color: #fff; border: none; }
.dwq-btn-primary:hover { filter: brightness(1.06); }
.dwq-disclaim { margin-top: 10px; font-size: 0.66rem; color: #8a98a8; line-height: 1.45; }
.dwq-muted { color: #9aa6b3; }

/* ===== §45 Behind the Scenes ===== */
#behind-scenes-view { overflow: auto; }
.bs-wrap { max-width: 1080px; margin: 0 auto; padding: 18px 20px 60px; }
.bs-loading, .bs-error { padding: 30px; color: #4a5b6e; font-size: 0.9rem; }
.bs-error { color: #b23b3b; }
.bs-head h2 { margin: 0 0 4px; font-size: 1.35rem; color: #1f2d3d; }
.bs-sub { margin: 0 0 16px; color: #5a6b7e; font-size: 0.88rem; line-height: 1.5; max-width: 760px; }

/* diagram */
.bs-diagram-card { border: 1px solid #e3e8ee; border-radius: 12px; background: #fbfcfe; padding: 12px 14px 8px; margin-bottom: 18px; }
.bs-diagram-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.bs-diagram-head b { font-size: 0.92rem; color: #243b53; }
.bs-diagram-sub { font-size: 0.76rem; color: #8a98a8; margin-left: 6px; }
.bs-diagram { width: 100%; overflow-x: auto; }
.bs-svg { width: 100%; height: auto; min-width: 760px; display: block; }
.bs-btn { padding: 5px 11px; border: 1px solid #d6dce4; border-radius: 6px; background: #fff; cursor: pointer;
    font-size: 0.78rem; color: #4a5b6e; }
.bs-btn:hover { background: #f1f4f8; }

.bs-node-box { fill: #fff; stroke: #cdd6e0; stroke-width: 1.4; transition: filter .15s; }
.bs-node-icon { font-size: 15px; }
.bs-node-title { font-size: 12.5px; font-weight: 700; fill: #243b53; }
.bs-node-sub { font-size: 9.5px; fill: #8090a0; }
.bs-clickable .bs-node-box { cursor: pointer; }
.bs-clickable:hover .bs-node-box { filter: drop-shadow(0 2px 5px rgba(0,0,0,0.18)); stroke-width: 2; }
/* node kind accents (left border via stroke color) */
.bs-k-source  .bs-node-box { stroke: #16a3b8; }
.bs-k-process .bs-node-box { stroke: #e08a1e; }
.bs-k-store   .bs-node-box { stroke: #5b6bd6; }
.bs-k-serve   .bs-node-box { stroke: #2e9e5b; }
.bs-k-client  .bs-node-box { stroke: #8b5cf6; }

.bs-edge { fill: none; }
.bs-edge-fwd { stroke: #c3cdd8; stroke-width: 1.6; }
.bs-edge-rev { stroke: #e3b778; stroke-width: 1.4; stroke-dasharray: 4 4; }
.bs-edge-label { font-size: 9px; fill: #98a4b2; }
.bs-token-fwd { fill: #2e9e5b; }
.bs-token-rev { fill: #e0922a; }

.bs-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 2px 4px; font-size: 0.72rem; color: #6b7a8d; }
.bs-legend span { display: inline-flex; align-items: center; gap: 5px; }
.bs-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; border: 1.5px solid; background: #fff; }
.bs-k-source.bs-dot { border-color: #16a3b8; } .bs-k-process.bs-dot { border-color: #e08a1e; }
.bs-k-store.bs-dot { border-color: #5b6bd6; } .bs-k-serve.bs-dot { border-color: #2e9e5b; }
.bs-k-client.bs-dot { border-color: #8b5cf6; }
.bs-dash { width: 16px; height: 0; border-top: 2px dashed #e3b778; display: inline-block; }

/* level toggle */
.bs-levelbar { display: flex; align-items: center; gap: 12px; margin: 6px 0 16px; flex-wrap: wrap; }
.bs-levellabel { font-size: 0.78rem; font-weight: 600; color: #5a6b7e; }
.bs-levels { display: inline-flex; border: 1px solid #d6dce4; border-radius: 8px; overflow: hidden; }
.bs-levels button { padding: 6px 14px; border: none; background: #fff; cursor: pointer; font-size: 0.8rem;
    color: #5a6b7e; border-right: 1px solid #eceff3; }
.bs-levels button:last-child { border-right: none; }
.bs-levels button.active { background: #4a5b9e; color: #fff; }
.bs-levelhint { font-size: 0.74rem; color: #8a98a8; }

/* entries */
.bs-group { margin-bottom: 22px; }
.bs-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bs-group-icon { font-size: 1.3rem; }
.bs-group-title { font-size: 1.02rem; font-weight: 700; color: #1f2d3d; }
.bs-group-blurb { font-size: 0.76rem; color: #8a98a8; }
.bs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.bs-card { border: 1px solid #e6eaef; border-radius: 10px; background: #fff; padding: 13px 14px; display: flex; flex-direction: column; }
.bs-card-head { display: flex; align-items: flex-start; gap: 10px; }
.bs-card-icon { font-size: 1.25rem; line-height: 1.2; }
.bs-card-titles { flex: 1; min-width: 0; }
.bs-card-title { font-size: 0.92rem; font-weight: 700; color: #243b53; }
.bs-card-summary { font-size: 0.74rem; color: #7a8a99; margin-top: 1px; line-height: 1.35; }
.bs-type { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    padding: 2px 7px; border-radius: 10px; white-space: nowrap; }
.bs-type-dataset { background: #e7f3f5; color: #14808f; }
.bs-type-model   { background: #efeafa; color: #6243c0; }
.bs-type-method  { background: #fdf0e2; color: #b9741a; }
.bs-type-feature { background: #e8f1ea; color: #2b8552; }
.bs-type-evidence { background: #fbeef0; color: #a8405a; }
.bs-card-body { font-size: 0.82rem; color: #41526a; line-height: 1.5; margin: 10px 0 0; }
.bs-card-body code { background: #f1f4f8; padding: 0 4px; border-radius: 3px; font-size: 0.92em;
    color: #44506a; word-break: break-word; }
.bs-card-body b { color: #2a3b50; }
.bs-card-body .bs-p { margin: 0 0 8px; }
.bs-card-body .bs-p:last-child { margin-bottom: 0; }
.bs-links { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.bs-link { font-size: 0.7rem; padding: 2px 7px; border-radius: 6px; background: #f4f6f9; color: #4a5b9e;
    text-decoration: none; border: 1px solid #e6eaef; }
.bs-link:hover { background: #ebeff6; }
.bs-link-static { color: #6b7a8d; cursor: default; }
.bs-related { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 8px; }
.bs-related-l { font-size: 0.68rem; color: #9aa6b3; margin-right: 2px; }
.bs-rel { font-size: 0.7rem; padding: 2px 8px; border-radius: 12px; background: #fff; border: 1px solid #e2e6ec;
    color: #5a6b7e; cursor: pointer; }
.bs-rel:hover { background: #f4f6f9; border-color: #ccd5df; }
@keyframes bsFlash { 0% { box-shadow: 0 0 0 3px rgba(74,91,158,0.5); } 100% { box-shadow: 0 0 0 3px rgba(74,91,158,0); } }
.bs-flash { animation: bsFlash 1.3s ease-out; }

/* Citable published figures on a KB card — the same list the Watershed Journey
   quotes from, so a number and its source can never disagree between the two. */
.bs-figs { margin-top: 11px; border-top: 1px solid #eef1f5; padding-top: 8px; }
.bs-figs > summary { font-size: 0.72rem; font-weight: 600; color: #4a5b9e; cursor: pointer;
    list-style: none; }
.bs-figs > summary::-webkit-details-marker { display: none; }
.bs-figs > summary::before { content: '▸ '; color: #9aa6b3; }
.bs-figs[open] > summary::before { content: '▾ '; }
.bs-fig-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex;
    flex-direction: column; gap: 7px; }
/* Cap the value column: a long value like "Group 2A — probably carcinogenic" would
   otherwise be squeezed into a sliver by `auto` in a narrow card. */
.bs-fig { display: grid; grid-template-columns: minmax(70px, 38%) 1fr; gap: 9px;
    align-items: baseline; }
.bs-fig-v { font-size: 0.78rem; font-weight: 700; color: #2a3b50; white-space: nowrap; }
.bs-fig-t { font-size: 0.74rem; color: #5a6b7e; line-height: 1.45; }
.bs-fig-s { display: block; font-size: 0.68rem; color: #9aa6b3; margin-top: 1px; }
.bs-fig-s a { color: #6b7fae; }
.bs-fig-vin { color: #b3bcc6; }

/* ===== §46a Nitrate Forecast panel (reuses .district-wq-panel chrome) ===== */
#forecast-panel .fund-site-go { background: #4a7fb5; }
.fc-loading, .fc-error { font-size: 0.84rem; color: #4a5b6e; padding: 8px 2px; }
.fc-error { color: #b23b3b; }
.fc-intro { margin: 0 0 8px; font-size: 0.82rem; color: #4a5b6e; line-height: 1.45; }
.fc-asof { font-size: 0.72rem; color: #8a98a8; margin-bottom: 12px; }
.fc-tiles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.fc-tile { border-radius: 9px; padding: 11px 6px; text-align: center; border: 1px solid #e3e8ee; }
.fc-tile-n { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.fc-tile-l { font-size: 0.7rem; font-weight: 600; margin-top: 4px; }
.fc-t-rising { background: #fdecec; border-color: #f3cccc; } .fc-t-rising .fc-tile-n, .fc-t-rising .fc-tile-l { color: #c0392b; }
.fc-t-steady { background: #f2f4f6; border-color: #e2e7ec; } .fc-t-steady .fc-tile-n, .fc-t-steady .fc-tile-l { color: #6b7a8d; }
.fc-t-falling { background: #e9f5ee; border-color: #c9e6d4; } .fc-t-falling .fc-tile-n, .fc-t-falling .fc-tile-l { color: #2e9e5b; }
.fc-sec-h { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin: 12px 0 6px; }
.fc-up { color: #c0392b; } .fc-down { color: #2e9e5b; }
.fc-mover { padding: 7px 9px; border: 1px solid #eef1f5; border-radius: 7px; margin-bottom: 5px; background: #fff; }
.fc-mover-site { font-size: 0.84rem; font-weight: 600; color: #243b53; }
.fc-mover-meta { font-size: 0.72rem; color: #74859a; margin-top: 1px; }
.fc-mover-chg { font-weight: 700; }
.fc-disclaim { margin-top: 11px; font-size: 0.68rem; color: #8a98a8; line-height: 1.45; }

/* §46a alerts — follow a site/watershed/district from the forecast panel */
.fc-mover { display: flex; align-items: center; gap: 8px; }
.fc-mover-main { flex: 1 1 auto; min-width: 0; }
.fc-follow-mover { flex: 0 0 auto; font-size: 0.68rem; font-weight: 600; color: #2b6cb0;
  background: #eef4fb; border: 1px solid #d4e3f5; border-radius: 6px; padding: 3px 7px;
  cursor: pointer; white-space: nowrap; }
.fc-follow-mover:hover { background: #dcebfb; background: #e0edfb; border-color: #b9d3ee; }
.fc-alerts { margin-top: 16px; padding-top: 13px; border-top: 1px solid #e7ecf1; }
.fc-alerts-h { font-size: 0.86rem; font-weight: 800; color: #243b53; }
.fc-alerts-intro { font-size: 0.72rem; color: #74859a; margin: 4px 0 9px; line-height: 1.45; }
.fc-alerts-target { position: relative; }
.fc-input { width: 100%; box-sizing: border-box; font-size: 0.82rem; padding: 7px 9px;
  border: 1px solid #d3dbe4; border-radius: 7px; color: #243b53; }
.fc-input:focus { outline: none; border-color: #6ba0d8; box-shadow: 0 0 0 2px rgba(107,160,216,.2); }
.fc-target-results { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 3px);
  background: #fff; border: 1px solid #d3dbe4; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.12);
  max-height: 220px; overflow-y: auto; }
.fc-target-grp { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: #97a5b5; padding: 6px 10px 3px; }
.fc-target-opt { font-size: 0.8rem; color: #2d3e50; padding: 6px 10px; cursor: pointer; }
.fc-target-opt:hover { background: #eef4fb; }
.fc-target-none { font-size: 0.78rem; color: #8a98a8; padding: 8px 10px; }
.fc-target-chosen { font-size: 0.8rem; color: #2d3e50; background: #f1f6fb; border: 1px solid #d9e6f3;
  border-radius: 7px; padding: 7px 9px; display: flex; align-items: center; gap: 8px; }
.fc-target-chosen strong { font-weight: 700; flex: 1 1 auto; }
.fc-target-chosen button { flex: 0 0 auto; border: none; background: none; color: #7388a0;
  cursor: pointer; font-size: 0.9rem; line-height: 1; }
.fc-alerts-form { margin-top: 9px; }
.fc-check { display: block; font-size: 0.78rem; color: #2d3e50; margin: 4px 0; cursor: pointer; }
.fc-check input { margin-right: 6px; vertical-align: middle; }
.fc-email-row { display: flex; gap: 7px; margin-top: 8px; }
.fc-email-row .fc-input { flex: 1 1 auto; }
.fc-subscribe { flex: 0 0 auto; font-size: 0.82rem; font-weight: 700; color: #fff;
  background: #2b6cb0; border: none; border-radius: 7px; padding: 7px 15px; cursor: pointer; }
.fc-subscribe:hover { background: #245d99; }
.fc-subscribe:disabled { opacity: .6; cursor: default; }
.fc-alerts-msg { font-size: 0.76rem; margin-top: 8px; line-height: 1.4; }
.fc-alerts-msg.fc-ok { color: #2e9e5b; }
.fc-alerts-msg.fc-err { color: #c0392b; }

/* §46b "My Water" report panel */
.mw-intro { font-size: 0.8rem; color: #5a6b7d; line-height: 1.5; margin: 0 0 11px; }
.mw-search { display: flex; gap: 7px; }
.mw-search input { flex: 1 1 auto; box-sizing: border-box; font-size: 0.85rem; padding: 8px 10px;
  border: 1px solid #d3dbe4; border-radius: 7px; color: #243b53; }
.mw-search input:focus { outline: none; border-color: #6ba0d8; box-shadow: 0 0 0 2px rgba(107,160,216,.2); }
.mw-go { flex: 0 0 auto; font-size: 0.85rem; font-weight: 700; color: #fff; background: #2b6cb0;
  border: none; border-radius: 7px; padding: 8px 16px; cursor: pointer; }
.mw-go:hover { background: #245d99; }
.mw-geo { margin-top: 8px; font-size: 0.78rem; color: #2b6cb0; background: #eef4fb; border: 1px solid #d4e3f5;
  border-radius: 7px; padding: 6px 11px; cursor: pointer; }
.mw-geo:hover { background: #e0edfb; }
.mw-results { margin-top: 10px; }
.mw-loading { font-size: 0.82rem; color: #74859a; }
.mw-error { font-size: 0.82rem; color: #c0392b; }
.mw-place { font-size: 0.78rem; font-weight: 700; color: #5a6b7d; text-transform: uppercase;
  letter-spacing: .03em; margin-bottom: 9px; }
.mw-verdict { border-radius: 11px; padding: 16px; text-align: center; margin-bottom: 14px; }
.mw-v-above { background: #fdecec; border: 1px solid #f3cccc; }
.mw-v-below { background: #e9f5ee; border: 1px solid #c9e6d4; }
.mw-v-none  { background: #f2f4f6; border: 1px solid #e2e7ec; }
.mw-v-big { font-size: 2.4rem; font-weight: 800; line-height: 1; color: #243b53; }
.mw-v-above .mw-v-big { color: #c0392b; } .mw-v-below .mw-v-big { color: #2e9e5b; }
.mw-v-none .mw-v-big { font-size: 1.1rem; }
.mw-v-unit { font-size: 1rem; font-weight: 600; color: #74859a; }
.mw-v-tag { font-size: 0.85rem; font-weight: 700; margin-top: 6px; }
.mw-v-above .mw-v-tag { color: #c0392b; } .mw-v-below .mw-v-tag { color: #2e9e5b; }
.mw-v-sub { font-size: 0.72rem; color: #74859a; margin-top: 6px; line-height: 1.4; }
.mw-sec { margin-bottom: 13px; }
.mw-sec-h { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: #8294a6; margin-bottom: 5px; }
.mw-line { font-size: 0.84rem; color: #2d3e50; }
.mw-muted { font-size: 0.74rem; color: #74859a; margin-top: 2px; }
.mw-fc { font-size: 0.84rem; }
.mw-fc-dir { font-weight: 800; }
.mw-fc-meta { color: #74859a; font-size: 0.78rem; }
.mw-dist { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid #eef1f5;
  border-radius: 7px; margin-bottom: 5px; background: #fff; }
.mw-dist-l { flex: 1 1 auto; min-width: 0; }
.mw-dist-name { font-size: 0.8rem; font-weight: 600; color: #243b53; }
.mw-dist-rep { font-size: 0.72rem; color: #74859a; margin-top: 1px; }
.mw-dist-rep a { color: #2b6cb0; }
.mw-dist-exc { flex: 0 0 auto; text-align: center; font-size: 1.05rem; font-weight: 800; color: #c0392b; line-height: 1; }
.mw-dist-exc span { display: block; font-size: 0.58rem; font-weight: 600; color: #97a5b5; text-transform: uppercase; }
.mw-share { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; }
.mw-share-btn { font-size: 0.8rem; font-weight: 700; color: #2b6cb0; background: #eef4fb;
  border: 1px solid #d4e3f5; border-radius: 7px; padding: 7px 13px; cursor: pointer; }
.mw-share-btn:hover { background: #e0edfb; }
.mw-share-alt { color: #5a6b7d; background: #f2f4f6; border-color: #e2e7ec; }
.mw-share-msg { font-size: 0.76rem; margin-top: 7px; }
.mw-share-msg.mw-ok { color: #2e9e5b; } .mw-share-msg.mw-err { color: #c0392b; }
.mw-disclaim { margin-top: 12px; font-size: 0.68rem; color: #8a98a8; line-height: 1.45; }

/* §46c landing/story hero */
.landing-overlay { position: fixed; inset: 0; z-index: 5000; overflow-y: auto;
  background: linear-gradient(160deg, #0b3d5c 0%, #145a8a 45%, #1f7fb0 100%);
  color: #fff; display: flex; align-items: center; justify-content: center;
  animation: landingIn .35s ease; }
@keyframes landingIn { from { opacity: 0; } to { opacity: 1; } }
.landing-overlay.landing-leaving { opacity: 0; transition: opacity .28s ease; }
body.landing-open { overflow: hidden; }
.landing-inner { max-width: 760px; padding: 48px 28px; text-align: center; }
.landing-brand { font-size: 0.78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #bfe0f2; opacity: .9; }
.landing-title { font-size: clamp(1.9rem, 5vw, 3.1rem); font-weight: 800; line-height: 1.08;
  margin: 14px 0 12px; }
.landing-sub { font-size: clamp(0.95rem, 2.4vw, 1.18rem); line-height: 1.5; color: #e3f0f8;
  max-width: 38rem; margin: 0 auto; }
.landing-stats { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 28px 0 6px; }
.landing-stat { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  border-radius: 13px; padding: 16px 22px; min-width: 130px; backdrop-filter: blur(2px); }
.landing-stat-n { font-size: 2.1rem; font-weight: 800; line-height: 1; }
.landing-stat-n span { font-size: 1rem; font-weight: 600; opacity: .85; }
.landing-stat-l { font-size: 0.74rem; margin-top: 6px; color: #d6e9f4; line-height: 1.3; }
.landing-stat-alert { background: rgba(229,87,77,.22); border-color: rgba(255,170,160,.4); }
.landing-stat-alert .landing-stat-n { color: #ffd9d4; }
.landing-updated { font-size: 0.72rem; color: #bfe0f2; margin-bottom: 4px; min-height: 1em; }
.landing-cta { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; margin: 22px 0 6px; }
.landing-btn { font-size: 0.92rem; font-weight: 700; color: #fff; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3); border-radius: 9px; padding: 12px 20px; cursor: pointer;
  transition: background .15s; }
.landing-btn:hover { background: rgba(255,255,255,.26); }
.landing-btn-primary { color: #0b3d5c; background: #fff; border-color: #fff; }
.landing-btn-primary:hover { background: #eaf4fb; }
.landing-story { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 30px auto 0;
  max-width: 40rem; list-style: none; padding: 0; }
.landing-step { flex: 1 1 12rem; font-size: 0.78rem; line-height: 1.4; color: #e3f0f8; text-align: left;
  background: rgba(255,255,255,.07); border-radius: 9px; padding: 11px 13px; }
.landing-step span { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem;
  height: 1.4rem; border-radius: 50%; background: rgba(255,255,255,.22); font-weight: 800; font-size: 0.72rem;
  margin-right: 7px; }
.landing-skip { margin-top: 26px; font-size: 0.82rem; color: #cfe6f3; background: none; border: none;
  text-decoration: underline; cursor: pointer; }
.landing-skip:hover { color: #fff; }
.landing-step { animation: landingStep .5s ease both; }
.landing-step:nth-child(1) { animation-delay: .08s; }
.landing-step:nth-child(2) { animation-delay: .18s; }
.landing-step:nth-child(3) { animation-delay: .28s; }
@keyframes landingStep { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .landing-inner { padding: 32px 18px; } .landing-stat { min-width: 104px; padding: 12px 16px; } }
/* Respect reduced-motion: no overlay fade, no leaving transition, no step/stat motion. */
@media (prefers-reduced-motion: reduce) {
  .landing-overlay, .landing-overlay.landing-leaving { animation: none; transition: none; }
  .landing-step { animation: none; }
}

/* ===== Watershed Explorer (quiz view) ===== */
#quiz-view { height: 100%; padding: 0 !important; }
.wx-wrap { display: flex; height: 100%; min-height: 520px; }
.wx-map { flex: 1; height: 100%; min-width: 0; background: #dfe6ec; }
.wx-side { width: 380px; flex: none; background: var(--surface, #fff); border-left: 1px solid var(--border, #e2e7ec); display: flex; flex-direction: column; overflow: hidden; }
.wx-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border, #e2e7ec); }
.wx-head h2 { margin: 0; font-size: 17px; color: var(--primary-color, #1a5490); }
.wx-score { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-secondary, #5c6b7a); font-size: 14px; }
.wx-body { flex: 1; overflow: auto; padding: 18px; }
.wx-intro { font-size: 13.5px; line-height: 1.55; color: var(--text-secondary, #5c6b7a); margin: 0 0 14px; }
.wx-chips { display: flex; flex-direction: column; gap: 8px; }
.wx-chip { text-align: left; padding: 11px 14px; border: 1px solid var(--border, #e2e7ec); border-radius: 8px; background: #f7f9fb; font-size: 13.5px; font-weight: 600; color: var(--text-primary, #1a2332); cursor: pointer; font-family: inherit; }
.wx-chip:hover { border-color: var(--primary-color, #1a5490); background: #eef4fa; }
.wx-hint { font-size: 12px; color: #8b9aa8; margin: 14px 0 0; }
.wx-loading, .wx-err { font-size: 13.5px; color: var(--text-secondary, #5c6b7a); padding: 20px 0; }
.wx-err { color: #b03a2e; }
.wx-spin { display: inline-block; width: 13px; height: 13px; border: 2px solid var(--border, #e2e7ec); border-top-color: var(--primary-color, #1a5490); border-radius: 50%; animation: wx-spin 1s linear infinite; vertical-align: -1px; margin-right: 4px; }
@keyframes wx-spin { to { transform: rotate(360deg); } }
.wx-basin-tag { font-size: 12px; font-weight: 700; color: var(--primary-color, #1a5490); background: #eef4fa; border-radius: 6px; padding: 6px 10px; margin-bottom: 14px; }
.wx-q-n { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #8b9aa8; font-weight: 700; }
.wx-prompt { font-size: 15px; font-weight: 600; line-height: 1.45; margin: 6px 0 14px; color: var(--text-primary, #1a2332); }
.wx-choices { display: flex; flex-direction: column; gap: 8px; }
.wx-opt { text-align: left; padding: 11px 13px; border: 1px solid var(--border, #e2e7ec); border-radius: 8px; background: #fff; font-size: 13.5px; cursor: pointer; font-family: inherit; color: var(--text-primary, #1a2332); }
.wx-opt:hover:not(:disabled) { border-color: var(--primary-color, #1a5490); }
.wx-opt.right { background: #e8f6ec; border-color: #16a34a; }
.wx-opt.wrong { background: #fdecea; border-color: #dc2626; }
.wx-compass { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.wx-dir { padding: 10px 0; border: 1px solid var(--border, #e2e7ec); border-radius: 7px; background: #fff; font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; }
.wx-dir:hover:not(:disabled) { border-color: var(--primary-color, #1a5490); }
.wx-dir.right { background: #e8f6ec; border-color: #16a34a; }
.wx-dir.wrong { background: #fdecea; border-color: #dc2626; }
.wx-clickhint { font-size: 13.5px; color: var(--primary-color, #1a5490); font-weight: 600; padding: 8px 0; }
.wx-feedback:empty { display: none; }
.wx-verdict { font-weight: 700; font-size: 14px; margin-top: 14px; }
.wx-verdict.ok { color: #16a34a; }
.wx-verdict.no { color: #dc2626; }
.wx-note { font-size: 12.5px; color: var(--text-secondary, #5c6b7a); margin-top: 4px; }
.wx-explain { font-size: 13.5px; line-height: 1.55; color: var(--text-secondary, #5c6b7a); margin-top: 8px; }
.wx-next { margin-top: 14px; padding: 10px 16px; border: 0; border-radius: 8px; background: var(--primary-color, #1a5490); color: #fff; font-weight: 600; font-size: 13.5px; cursor: pointer; font-family: inherit; }
.wx-next:hover { background: var(--primary-dark, #123f6c); }
.wx-lc { margin-top: 12px; }
.wx-lc-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; font-size: 12.5px; margin-bottom: 7px; }
.wx-lc-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; }
.wx-summary { text-align: center; padding: 20px 0; }
.wx-summary-score { font-size: 34px; font-weight: 800; color: var(--primary-color, #1a5490); }
.wx-summary p { font-size: 14px; color: var(--text-secondary, #5c6b7a); margin: 8px 0 16px; }
@media (max-width: 760px) { .wx-wrap { flex-direction: column; } .wx-side { width: auto; border-left: 0; border-top: 1px solid var(--border, #e2e7ec); } .wx-map { min-height: 260px; } }

/* ==========================================================================
   MOBILE OVERRIDES — must stay at the END of this file.
   These target elements (.time-slider-container, .sql-query-bar, the floating
   right-rail panels) whose base rules are defined LATER than the main
   `@media (max-width: 768px)` block above. At equal specificity the last rule
   wins, so putting them up there silently lost — the time slider stayed 300px
   from the left and rendered ~75px wide on a phone. Keep them here.
   ========================================================================== */
@media (max-width: 768px) {
    /* The sidebar is an out-of-flow overlay at this width, so the map spans the
       full screen and the bottom bars must too. `left: 300px` is the desktop
       sidebar width; on a 375px phone it left the time slider ~75px wide —
       narrower than the 200px its date display alone requires. */
    .time-slider-container,
    .sql-query-bar {
        left: 0;
    }

    /* A 360–372px panel pinned 18px from the right does not fit a 375px screen.
       Span the width and cap the height so the map stays partly visible. */
    .fund-site-panel,
    .district-wq-panel {
        left: 8px;
        right: 8px;
        width: auto;
        max-width: none;
        max-height: calc(100vh - 120px);
    }

    /* min-width:300px + right:30px needs 360px — it overhung a 375px screen and
       landed on top of the time slider. */
    .notification {
        left: 10px;
        right: 10px;
        bottom: 10px;
        min-width: 0;
    }
}

/* The nav holds 9 view tabs (~580px of them). At 375px it was `flex-wrap: nowrap`
   with `overflow-x: visible`, so Marketplace, Quiz and Behind the Scenes simply ran
   off the edge with no way to reach them — three views unreachable on a phone.
   Wrapping would push an already-137px header taller, so make it swipeable instead. */
@media (max-width: 768px) {
    .main-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;              /* the tabs are the affordance, not a bar */
    }

    .main-nav::-webkit-scrollbar {
        display: none;
    }

    .main-nav .nav-btn,
    .main-nav button {
        flex: 0 0 auto;                     /* don't squeeze tabs into unreadable slivers */
    }
}

/* Raindrop travel readout (js/map-maplibre.js builds the element).
   Bottom-centre of the map: the top-centre lane belongs to the geocode search bar,
   which this used to sit underneath and overlap by ~21px. Scale bar (bottom-left)
   and attribution (bottom-right) leave the centre free.
   `bottom` lives here so the time slider can push it up when that bar is open. */
.raindrop-hud {
    bottom: 28px;
}

body.time-slider-active .raindrop-hud,
body.sql-bar-visible .raindrop-hud {
    bottom: 78px;   /* clear the bottom bar rather than sit behind it */
}

/* Add Layer, now standalone between the layer accordions and Utilities. */
.add-layer-standalone {
    padding: 6px var(--space-md, 12px) 10px;
}

.add-layer-standalone .add-layer-btn {
    width: 100%;
    justify-content: center;
}

/* ── QA adjudication (added 2026-08-26) ───────────────────────────────────
   A reading the instrument could not actually make is shown, not hidden: a
   missing row is indistinguishable from a sensor that was never installed.
   The row states there is no valid reading and carries what the instrument
   reported, in brackets, so a researcher can see both numbers.

   These selectors live in the END-OF-FILE block on purpose — this stylesheet
   is source-ordered and a late-defined .info-value elsewhere would otherwise
   win over them. */
.info-value.qa-invalid {
    color: #b3261e;
    font-weight: 600;
}
.info-value.qa-invalid .qa-reported {
    color: #6b7780;
    font-weight: 400;
    font-style: italic;
    margin-left: 4px;
}
@media (prefers-color-scheme: dark) {
    .info-value.qa-invalid { color: #e8867c; }
    .info-value.qa-invalid .qa-reported { color: #8a97a1; }
}
.tooltip-value.tooltip-invalid { color: #e8867c; font-weight: 600; }
.tooltip-value .tooltip-reported { color: #b9c2c8; font-weight: 400; font-style: italic; }
/* A stopped sensor: the last value stands, the note says it stopped. */
.info-value .qa-dead {
    color: #8c5a00;
    font-weight: 600;
    font-size: 0.82em;
    margin-left: 5px;
    white-space: nowrap;
}
@media (prefers-color-scheme: dark) { .info-value .qa-dead { color: #d8a643; } }

/* ── Header icon buttons: undo the blanket button padding (added 2026-08-28) ──
   `button, .btn, .nav-btn, ... { padding: 4px 10px !important }` (the v095
   compact-interface rule, ~line 3947) also matches .icon-btn, which is a fixed
   26px square. 26px - 2px border - 20px horizontal padding left 4px of content
   box, so the 16px SVG rendered 4x16 and the Account / guided-tour / Help
   buttons read as three empty boxes on desktop and mobile alike.

   Overriding here rather than editing the blanket rule keeps that rule doing its
   job for real text buttons. It needs !important to beat one, and it has to sit
   in the END-OF-FILE block because this stylesheet is source-ordered. */
.icon-btn {
    padding: 0 !important;
    flex: 0 0 auto;
}
.icon-btn svg {
    flex: 0 0 auto;
}

/* ── Station health badge (site popup + detail panel) ──────────────────────
   Added 2026-09-08. In the END-OF-FILE block on purpose: this sheet is
   source-ordered and a later rule wins, so new selectors that must not be
   overridden by the 321 !important declarations above belong here. */
.site-health {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.04);
    border-left: 3px solid #7f8c8d;
    font-size: 0.8rem;
    line-height: 1.45;
}
.site-health--now   { border-left-color: #c0392b; background: rgba(192, 57, 43, 0.07); }
.site-health--days  { border-left-color: #d68910; background: rgba(214, 137, 16, 0.07); }
.site-health--watch { border-left-color: #b7950b; background: rgba(183, 149, 11, 0.07); }
.site-health--ok    { border-left-color: #1e8449; background: rgba(30, 132, 73, 0.06); }
.site-health__dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
.site-health__label { font-weight: 600; }
.site-health__stale { color: #8b9aa8; font-size: 0.72rem; margin-left: 4px; }
.site-health__headline { margin-top: 4px; color: #34495e; }
.site-health__reasons {
    margin: 6px 0 0 0;
    padding-left: 16px;
    color: #5a6c7d;
}
.site-health__reasons li { margin: 2px 0; }
.site-health__more { color: #8b9aa8; font-style: italic; }

/* The detail panel sits on a dark surface in some themes; keep the text
   readable there without reaching for !important. */
#site-info .site-health { background: rgba(255, 255, 255, 0.06); }
#site-info .site-health__headline { color: inherit; }
#site-info .site-health__reasons { color: inherit; opacity: 0.85; }

/* ── Latest Readings: dormant channels + burst spread ──────────────────────
   Added 2026-09-08. End-of-file block, same reason as above. */
.info-dormant {
    margin-top: 6px;
    font-size: 0.8rem;
}
.info-dormant > summary {
    cursor: pointer;
    color: #7a8894;
    padding: 4px 0;
    list-style: revert;
}
.info-dormant > summary:hover { color: #1a5490; }
.info-dormant__hint { color: #9aa7b2; font-weight: 400; }
.info-dormant .info-row { opacity: 0.82; }
.info-spread {
    color: #8b9aa8;
    font-weight: 400;
    font-size: 0.78rem;
    margin-left: 4px;
}