/* ===== DESIGN TOKENS (CSS Variables) – Dark grey theme ===== */
        :root {
            /* Primary – Dark grey */
            --color-primary: #71717a;
            --color-primary-dark: #52525b;
            --color-primary-light: #a1a1aa;
            --color-primary-bg: #27272a;

            /* Secondary */
            --color-secondary: #52525b;
            --color-secondary-dark: #3f3f46;
            --color-secondary-light: #71717a;

            /* Accent (muted) */
            --color-accent-orange: #a16207;
            --color-accent-red: #b91c1c;
            --color-accent-purple: #6b21a8;
            --color-accent-yellow: #a16207;
            --color-accent-cyan: #3f3f46;

            /* Neutral – Dark grey */
            --color-dark: #18181b;
            --color-dark-alt: #27272a;
            --color-gray-900: #fafafa;
            --color-gray-800: #e4e4e7;
            --color-gray-700: #d4d4d8;
            --color-gray-600: #a1a1aa;
            --color-gray-500: #71717a;
            --color-gray-400: #52525b;
            --color-gray-300: #3f3f46;
            --color-gray-200: #27272a;
            --color-gray-100: #18181b;
            --color-gray-50: #0d0d0d;
            --color-white: #fafafa;

            /* Backgrounds – Dark grey */
            --bg-primary: #1a1a1a;
            --bg-secondary: #252525;
            --bg-tertiary: #1e1e1e;
            --bg-dark: #0d0d0d;
            --bg-overlay: rgba(0, 0, 0, 0.75);

            /* Border Colors */
            --border-light: #3f3f46;
            --border-medium: #52525b;
            --border-dark: #71717a;

            /* Shadow Tokens */
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
            --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
            --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.2);
            --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.25);

            /* Border Radius */
            --radius-sm: 4px;
            --radius-md: 6px;
            --radius-lg: 8px;
            --radius-xl: 12px;
            --radius-full: 50%;

            /* Spacing Scale */
            --space-xs: 4px;
            --space-sm: 8px;
            --space-md: 12px;
            --space-lg: 16px;
            --space-xl: 20px;
            --space-2xl: 24px;

            /* Typography — civic-ledger rollout 2026-07-20: serif everywhere (fonts + palette only) */
            --font-family: var(--ms-serif, Charter, "Bitstream Charter", Cambria, "Palatino Linotype", Georgia, serif);
            --font-family-mono: var(--ms-serif, Charter, "Bitstream Charter", Cambria, "Palatino Linotype", Georgia, serif);

            --font-size-xs: 9px;
            --font-size-sm: 10px;
            --font-size-base: 11px;
            --font-size-md: 13px;
            --font-size-lg: 15px;
            --font-size-xl: 17px;
            --font-size-2xl: 19px;
            --toolbar-height: 48px;

            --font-weight-normal: 400;
            --font-weight-medium: 500;
            --font-weight-semibold: 600;
            --font-weight-bold: 700;
            --font-weight-extrabold: 800;

            /* Transitions */
            --transition-fast: 0.15s ease;
            --transition-base: 0.2s ease;
            --transition-slow: 0.3s ease;

            /* Z-Index Scale */
            --z-base: 1;
            --z-dropdown: 100;
            --z-sticky: 500;
            --z-overlay: 1000;
            --z-modal: 2000;
            --z-toast: 500000;
            --z-lightbox: 20000;
            --z-upload: 25000;
        }

        /* ===== DARK MODE OVERRIDES ===== */
        .dark-mode {
            /* GIS unification: dark palette converged to Eliot's design-system colors.
               2026-07-20 civic-ledger rollout: color-primary, bg-*, and border-* tokens
               retoned from cyan/slate onto navy/gold (fonts + palette only). Gray ramp,
               accent- and status colors are left as-is (neutral / semantic, not brand). */
            --color-primary: var(--cl-gold, #c9a962);
            --color-primary-dark: var(--cl-gold-deep, #8a6206);
            --color-primary-light: var(--cl-gold-2, #e9c66b);
            --bg-primary: var(--cl-navy-ink, #0a1826);
            --bg-secondary: var(--cl-navy-2, #142840);
            --bg-tertiary: var(--cl-navy-ink, #0a1826);
            --bg-dark: var(--cl-navy-ink, #0a1826);
            --bg-overlay: rgba(0, 0, 0, 0.85);

            --color-white: #f8fafc;
            --color-gray-900: #f1f5f9;
            --color-gray-800: #e2e8f0;
            --color-gray-700: #cbd5e1;
            --color-gray-600: #94a3b8;
            --color-gray-500: #64748b;
            --color-gray-400: #475569;
            --color-gray-300: #334155;
            --color-gray-200: #1e293b;
            --color-gray-100: #18181b;
            --color-gray-50: #020617;

            --color-dark: #f8fafc;
            --color-dark-alt: #e2e8f0;
            --border-light: rgba(233, 198, 107, 0.14);
            --border-medium: rgba(233, 198, 107, 0.20);
            --border-dark: rgba(233, 198, 107, 0.34);

            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
        }
        
        .light-mode {
            --bg-primary: #ffffff;
            --bg-secondary: #f8fafc;
            --bg-tertiary: #eef2f7;
            --bg-dark: #e2e8f0;
            --bg-overlay: rgba(15, 23, 42, 0.25);

            --color-white: #ffffff;
            --color-gray-900: #0f172a;
            --color-gray-800: #1e293b;
            --color-gray-700: #334155;
            --color-gray-600: #475569;
            --color-gray-500: #64748b;
            --color-gray-400: #94a3b8;
            --color-gray-300: #cbd5e1;
            --color-gray-200: #e2e8f0;
            --color-gray-100: #f1f5f9;
            --color-gray-50: #f8fafc;

            --color-dark: #0f172a;
            --color-dark-alt: #334155;
            --border-light: rgba(15, 23, 42, 0.12);
            --border-medium: rgba(15, 23, 42, 0.2);
            --border-dark: rgba(15, 23, 42, 0.35);

            --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
            --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.12);
            --shadow-lg: 0 4px 16px rgba(15, 23, 42, 0.16);
            --shadow-xl: 0 8px 32px rgba(15, 23, 42, 0.2);
        }

        /* ===== LIGHT MODE READABILITY TUNING ===== */
        .light-mode #toolbar {
            background: transparent;
            border-bottom: 1px solid transparent;
        }

        .light-mode .brand {
            background: transparent;
            color: #f8fafc;
        }

        .light-mode .navbar-sep {
            background: rgba(15, 23, 42, 0.3);
        }

        .light-mode #toolbar .btn-toggle {
            color: #111827;
            background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
            border-color: rgba(15, 23, 42, 0.22);
        }

        .light-mode #toolbar .btn-toggle:hover {
            color: #0f172a;
            background: linear-gradient(135deg, #cbd5e1 0%, #b6c2d1 100%);
            border-color: rgba(15, 23, 42, 0.3);
        }

        .light-mode #toolbar .btn-toggle.active,
        .light-mode #toolbar .btn-toggle.dock-mode-dock,
        .light-mode #toolbar .btn-toggle.dock-mode-popup,
        .light-mode #toolbar .btn-toggle.dock-mode-off,
        .light-mode #toolbar #clear-selection-btn {
            color: #f8fafc;
        }

        .light-mode #dock-content,
        .light-mode #dock-content p,
        .light-mode #dock-content li,
        .light-mode #dock-content span,
        .light-mode #dock-content .tab-body,
        .light-mode #dock-content .tab-body ul li,
        .light-mode #dock-content .parcel-tip,
        .light-mode #dock-content .assess-metric-label,
        .light-mode #dock-content .assess-value-cell,
        .light-mode #dock-content .assess-change-value,
        .light-mode #dock-content .assess-unit {
            color: #1f2937 !important;
        }

        .light-mode.fiscal-impact-active #toolbar #btn-fiscal-impact.active {
            background: linear-gradient(135deg, #0284c7 0%, #2563eb 52%, #0f766e 100%);
            border-color: rgba(2, 132, 199, 0.95);
            color: #f8fafc;
            box-shadow:
                0 0 0 1px rgba(2, 132, 199, 0.35),
                0 0 20px rgba(37, 99, 235, 0.42),
                var(--shadow-md);
        }

        .light-mode.fiscal-impact-active .map-layer-controls label.layer-toggle.fiscal-impact-active,
        .light-mode.fiscal-impact-active .map-layer-controls label.layer-toggle:has(#lot-rebalance-visual-toggle:checked),
        .light-mode.fiscal-impact-active .map-layer-controls label.layer-toggle:has(#lot-rebalance-visual-toggle) {
            color: #0b2f4a;
            background: linear-gradient(90deg, rgba(186, 230, 253, 0.95) 0%, rgba(219, 234, 254, 0.9) 100%);
            border-left-color: #0284c7;
        }

        .light-mode.fiscal-impact-active #dock-panel {
            background:
                linear-gradient(160deg, rgba(207, 250, 254, 0.98) 0%, rgba(219, 234, 254, 0.96) 48%, rgba(204, 251, 241, 0.94) 100%);
            border-left-color: rgba(14, 116, 144, 0.5);
            box-shadow:
                var(--shadow-xl),
                0 0 0 1px rgba(14, 116, 144, 0.22),
                0 0 22px rgba(6, 182, 212, 0.18);
        }

        .light-mode.fiscal-impact-active .map-search-container {
            background: linear-gradient(160deg, rgba(207, 250, 254, 0.98) 0%, rgba(186, 230, 253, 0.92) 46%, rgba(204, 251, 241, 0.9) 100%);
            border-color: rgba(14, 116, 144, 0.5);
            box-shadow:
                0 10px 20px rgba(15, 23, 42, 0.12),
                0 0 0 1px rgba(14, 116, 144, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.7);
        }

        .light-mode.fiscal-impact-active .map-search-container .search-input {
            background: linear-gradient(160deg, rgba(240, 249, 255, 0.96) 0%, rgba(224, 242, 254, 0.9) 100%);
            border-color: rgba(14, 116, 144, 0.44);
            color: #0c4a6e;
        }

        .light-mode.fiscal-impact-active .map-search-container .search-input::placeholder {
            color: rgba(12, 74, 110, 0.58);
        }

        .light-mode.fiscal-impact-active .lot-scenario-dashboard.command-center {
            border-color: rgba(14, 116, 144, 0.38);
            box-shadow:
                0 0 0 1px rgba(14, 116, 144, 0.16),
                0 12px 30px rgba(15, 23, 42, 0.2),
                0 0 18px rgba(37, 99, 235, 0.22);
        }

        /* Numeric Emphasis Utility */
        .numeric-emphasis {
            font-family: var(--font-family-mono);
            font-weight: 700;
            letter-spacing: -0.01em;
        }

        /* Dark Mode Toggle Component */
        .dark-mode-toggle-row {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: var(--space-sm) 0;
            border-bottom: 1px solid var(--border-light);
            margin-bottom: var(--space-sm);
        }

        .dark-mode-toggle-info {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            font-weight: 600;
            color: var(--color-gray-800);
        }

        .dark-mode-toggle-info svg {
            color: var(--color-primary);
        }

        /* Switch UI */
        .switch {
            position: relative;
            display: inline-block;
            width: 44px;
            height: 22px;
        }

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

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #e2e8f0;
            transition: .3s;
            border-radius: 34px;
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 2px;
            bottom: 2px;
            background-color: white;
            transition: .3s;
            border-radius: 50%;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        }

        input:checked+.slider {
            background-color: var(--color-primary);
        }

        input:focus+.slider {
            box-shadow: 0 0 1px var(--color-primary);
        }

        input:checked+.slider:before {
            transform: translateX(22px);
        }

        * {
            box-sizing: border-box;
        }

        :root {
            --app-vh: 100vh;
        }

        body,
        html {
            margin: 0;
            padding: 0;
            height: 100%;
            min-height: var(--app-vh, 100vh);
            overflow: hidden;
            font-family: var(--font-family);
            font-size: var(--font-size-base);
            color: var(--color-gray-800);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            -webkit-text-size-adjust: 100%; /* Prevent iOS text size adjustment */
            -ms-text-size-adjust: 100%;
            text-size-adjust: 100%;
            touch-action: auto;
        }

        #app-container {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            flex-direction: column;
        }

        /* ===== TOP TOOLBAR ===== */
        #toolbar {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: var(--toolbar-height);
            background: transparent;
            color: var(--color-white);
            display: flex;
            align-items: center;
            padding: 0 12px;
            box-shadow: none;
            z-index: var(--z-sticky);
            gap: 6px;
            overflow-x: auto;
            overflow-y: hidden;
            flex-wrap: nowrap;
            -webkit-overflow-scrolling: touch;
            border-bottom: none;
            justify-content: flex-start;
        }

        .toolbar-left,
        .toolbar-right {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }

        .toolbar-right {
            transition: transform 0.65s ease;
        }

        .navbar-sep {
            width: 1px;
            height: 16px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 1px;
            flex-shrink: 0;
            margin: 0 2px;
        }

        #toolbar::-webkit-scrollbar {
            height: 4px;
        }

        #toolbar::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 2px;
        }

        #toolbar>* {
            flex-shrink: 0;
        }

        button,
        [role="button"],
        .btn-toggle,
        .map-action-btn,
        .map-overlay-btn,
        .tab-btn {
            touch-action: manipulation;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        .btn-logout {
            background: rgba(231, 76, 60, 0.1);
            color: var(--color-accent-red);
            border: 1px solid rgba(231, 76, 60, 0.2);
        }

        .btn-logout:hover {
            background: var(--color-accent-red);
            color: white;
            border-color: var(--color-accent-red);
        }

        .brand {
            display: flex;
            align-items: center;
            font-weight: 600;
            font-size: 1rem;
            letter-spacing: 0.5px;
            color: #fff;
            text-decoration: none;
            overflow: hidden;
            margin-right: 2px;
            position: sticky;
            left: 0;
            background: transparent;
            z-index: 11;
            padding-right: 8px;
        }

        .brand-text {
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: clip;

            max-width: 320px;
            min-width: 0;
            opacity: 1;
            margin-left: 6px;
            transform: translateX(0);
            transition: max-width 0.65s ease, opacity 0.65s ease, margin-left 0.65s ease, transform 0.65s ease;
            pointer-events: none;
        }

        .brand--interactive {
            cursor: pointer;
        }

        #toolbar.nav-collapsed .brand {
            padding-right: 0;
        }

        #toolbar.nav-collapsed .brand-text {
            max-width: 0;
            opacity: 0;
            margin-left: 0;
            transform: translateX(-14px);
        }

        #toolbar.nav-collapsed .toolbar-right {
            transform: translateX(-6px);
        }

        #content-area {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            height: 100%;
            background: var(--bg-primary);
        }

        #map-row {
            display: flex;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            flex-grow: 1;
            width: 100%;
            min-height: 0;
            overflow: hidden;
            position: relative;
        }

        #map {
            flex-grow: 1;
            height: 100%;
            background: #1a1a1a;
            position: relative;
            min-width: 0;
            /* Allow shrinking */
            flex-basis: 0;
            /* Ensures proper space distribution */
        }

        /* Push OL zoom control below the floating toolbar */
        .ol-zoom {
            top: calc(var(--toolbar-height) + 10px) !important;
        }

        /* Multi-select toggle FAB — sits directly under the OL zoom control.
           Mobile only (the desktop command panel already exposes Tap Select, and
           desktop selection is always additive). Drives the same
           mobileTapKeepSelectingEnabled tap mode as the panel buttons, which the
           PWA shell hides on mobile — so this is the only way to flip it there. */
        #rich-multiselect-fab { display: none; }
        body.gpwa-on.gpwa-app-richmond #rich-multiselect-fab {
            position: absolute;
            top: calc(var(--toolbar-height) + 10px + 62px);
            left: calc(8px + env(safe-area-inset-left, 0px));
            z-index: 26;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            padding: 0;
            border-radius: 10px;
            border: 1.5px solid rgba(148, 163, 184, 0.35);
            background: rgba(15, 23, 42, 0.72);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            color: #94a3b8;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
            transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
        }
        body.gpwa-on.gpwa-app-richmond #rich-multiselect-fab:hover {
            background: rgba(30, 41, 59, 0.88);
            color: #e2e8f0;
            border-color: rgba(148, 163, 184, 0.6);
        }
        body.gpwa-on.gpwa-app-richmond #rich-multiselect-fab.is-active {
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            border-color: #60a5fa;
            color: #ffffff;
            box-shadow: 0 0 14px rgba(96, 165, 250, 0.35), 0 2px 8px rgba(0, 0, 0, 0.35);
        }
        #rich-multiselect-fab .rich-ms-badge {
            display: none;
            position: absolute;
            top: -5px;
            right: -5px;
            min-width: 16px;
            height: 16px;
            border-radius: 8px;
            background: #f59e0b;
            border: 1.5px solid #0f172a;
            color: #0f172a;
            font-size: 10px;
            font-weight: 800;
            line-height: 1;
            padding: 1px 3px;
            align-items: center;
            justify-content: center;
        }
        body.gpwa-on.gpwa-app-richmond #rich-multiselect-fab.has-count .rich-ms-badge { display: inline-flex; }

        /* ===== SELECTED LOTS (SMALL MAP OVERLAY, TOP-LEFT) ===== */
        .map-selection-overlay {
            position: absolute;
            top: var(--overlay-selection-top, calc(var(--toolbar-height) + 10px));
            left: calc(var(--overlay-selection-left, 50px) + env(safe-area-inset-left));
            z-index: 25;
            pointer-events: none;
            display: none;
            max-width: min(320px, calc(100% - 20px));
            padding: 10px 14px;
            border-radius: 14px;
            background: linear-gradient(155deg, rgba(15, 23, 42, 0.66) 0%, rgba(15, 23, 42, 0.46) 100%);
            border: 1px solid rgba(148, 163, 184, 0.34);
            backdrop-filter: blur(20px) saturate(165%);
            -webkit-backdrop-filter: blur(20px) saturate(165%);
            color: rgba(255, 255, 255, 0.92);
            font-size: 11px;
            font-weight: 700;
            line-height: 1.5;
            letter-spacing: 0.02em;
            box-shadow:
                0 12px 28px rgba(2, 6, 23, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.16);
            text-transform: uppercase;
            overflow: hidden;
            isolation: isolate;
        }

        .map-selection-overlay > * {
            position: relative;
            z-index: 1;
        }

        .light-mode .map-selection-overlay {
            background: linear-gradient(155deg, rgba(255, 255, 255, 0.86) 0%, rgba(241, 245, 249, 0.66) 100%);
            border-color: rgba(255, 255, 255, 0.88);
            color: rgba(15, 23, 42, 0.92);
            box-shadow:
                0 10px 24px rgba(15, 23, 42, 0.16),
                inset 0 1px 0 rgba(255, 255, 255, 0.84);
        }

        .light-mode .map-selection-overlay .muted {
            color: rgba(71, 85, 105, 0.8);
        }

        .light-mode .map-selection-overlay .strong {
            color: #0f172a;
        }

        .map-selection-overlay .overlay-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 3px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .map-selection-overlay .overlay-row:last-child {
            border-bottom: none;
        }

        .map-selection-overlay .overlay-label {
            color: rgba(255, 255, 255, 0.65);
            font-weight: 600;
            font-size: 10px;
        }

        .map-selection-overlay .overlay-value {
            color: #fff;
            font-weight: 800;
            font-size: 12px;
            font-family: var(--font-family-mono);
        }

        .map-selection-overlay .muted {
            color: rgba(255, 255, 255, 0.65);
            font-weight: 900;
            margin-left: 8px;
        }

        .map-selection-overlay .strong {
            color: #fff;
            font-weight: 950;
        }

        .lot-rebalance-overlay {
            position: absolute;
            z-index: 48;
            min-width: 280px;
            max-width: min(330px, calc(100vw - 24px));
            padding: 12px;
            border-radius: 14px;
            background: linear-gradient(160deg, rgba(15, 23, 42, 0.94) 0%, rgba(17, 24, 39, 0.86) 100%);
            border: 1px solid rgba(148, 163, 184, 0.4);
            color: rgba(241, 245, 249, 0.97);
            box-shadow: 0 16px 30px rgba(2, 6, 23, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(14px) saturate(150%);
            -webkit-backdrop-filter: blur(14px) saturate(150%);
            pointer-events: auto;
            display: none;
            font-size: 11px;
            line-height: 1.35;
            animation: lotOverlayAppear 170ms cubic-bezier(0.22, 1, 0.36, 1);
        }

        .lot-rebalance-overlay .lot-rebalance-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 10px;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: rgba(226, 232, 240, 0.95);
        }

        .lot-rebalance-overlay .lot-rebalance-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            border: 1px solid rgba(96, 165, 250, 0.35);
            background: rgba(37, 99, 235, 0.2);
            color: #bfdbfe;
            font-size: 10px;
            font-weight: 800;
            padding: 2px 8px;
        }

        .lot-rebalance-overlay .lot-rebalance-row {
            display: grid;
            grid-template-columns: minmax(70px, 1fr) auto auto auto;
            gap: 6px;
            align-items: center;
            margin-bottom: 6px;
        }

        .lot-rebalance-overlay .lot-rebalance-row:last-of-type {
            margin-bottom: 10px;
        }

        .lot-rebalance-overlay .lot-rebalance-label {
            font-weight: 700;
            color: rgba(203, 213, 225, 0.92);
            text-transform: uppercase;
            letter-spacing: 0.03em;
            font-size: 10px;
        }

        .lot-rebalance-overlay .lot-rebalance-value {
            font-family: var(--font-family-mono);
            font-weight: 800;
            color: #f8fafc;
            font-size: 12px;
            text-align: right;
            min-width: 62px;
        }

        .lot-rebalance-overlay .lot-rebalance-btn {
            width: 28px;
            height: 24px;
            border-radius: 8px;
            border: 1px solid rgba(148, 163, 184, 0.34);
            background: rgba(51, 65, 85, 0.65);
            color: #f8fafc;
            font-weight: 800;
            cursor: pointer;
            transition: transform var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
        }

        .lot-rebalance-overlay .lot-rebalance-btn:hover {
            transform: translateY(-1px);
            background: rgba(30, 64, 175, 0.6);
            border-color: rgba(147, 197, 253, 0.7);
        }

        .lot-rebalance-overlay .lot-rebalance-summary {
            border-top: 1px solid rgba(148, 163, 184, 0.28);
            margin-top: 8px;
            padding-top: 8px;
            display: flex;
            flex-direction: column;
            gap: 4px;
            font-size: 10px;
            color: rgba(203, 213, 225, 0.9);
        }

        .lot-rebalance-overlay .lot-rebalance-reset {
            margin-top: 8px;
            width: 100%;
            border-radius: 10px;
            border: 1px solid rgba(248, 113, 113, 0.45);
            background: rgba(127, 29, 29, 0.22);
            color: #fecaca;
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            padding: 6px 8px;
            cursor: pointer;
            transition: transform var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
        }

        .lot-rebalance-overlay .lot-rebalance-reset:hover {
            transform: translateY(-1px);
            background: rgba(153, 27, 27, 0.3);
            border-color: rgba(254, 202, 202, 0.65);
        }

        .light-mode .lot-rebalance-overlay {
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 245, 249, 0.9) 100%);
            border-color: rgba(148, 163, 184, 0.5);
            color: #0f172a;
            box-shadow: 0 14px 24px rgba(15, 23, 42, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.92);
        }

        .light-mode .lot-rebalance-overlay .lot-rebalance-title {
            color: #0f172a;
        }

        .light-mode .lot-rebalance-overlay .lot-rebalance-label {
            color: rgba(15, 23, 42, 0.72);
        }

        .light-mode .lot-rebalance-overlay .lot-rebalance-value {
            color: #0f172a;
        }

        .light-mode .lot-rebalance-overlay .lot-rebalance-btn {
            background: rgba(226, 232, 240, 0.9);
            color: #0f172a;
            border-color: rgba(148, 163, 184, 0.45);
        }

        .light-mode .lot-rebalance-overlay .lot-rebalance-summary {
            border-top-color: rgba(148, 163, 184, 0.4);
            color: rgba(15, 23, 42, 0.76);
        }

        .map-selection-overlay .scenario-legend {
            margin-top: 4px;
            display: inline-flex;
            gap: 8px;
            align-items: center;
            font-size: 9px;
            color: rgba(191, 219, 254, 0.9);
        }

        .map-selection-overlay .scenario-legend .legend-down {
            color: #22c55e;
        }

        .map-selection-overlay .scenario-legend .legend-up {
            color: #f97316;
        }

        .lot-scenario-dashboard {
            position: absolute;
            top: calc(var(--toolbar-height) + 76px);
            left: 50px;
            z-index: 1013;
            min-width: 320px;
            max-width: min(380px, calc(100vw - 24px));
            border-radius: 14px;
            border: 1px solid rgba(148, 163, 184, 0.34);
            background: linear-gradient(160deg, rgba(15, 23, 42, 0.95) 0%, rgba(17, 24, 39, 0.9) 100%);
            box-shadow: 0 14px 30px rgba(2, 6, 23, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.16);
            color: rgba(241, 245, 249, 0.96);
            backdrop-filter: blur(12px) saturate(130%);
            -webkit-backdrop-filter: blur(12px) saturate(130%);
            padding: 10px 12px;
            display: none;
            pointer-events: auto;
            font-size: 11px;
            line-height: 1.35;
        }

        .lot-scenario-dashboard .dash-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.045em;
            margin-bottom: 8px;
        }

        .lot-scenario-dashboard .dash-selection-label {
            font-size: 10px;
            color: rgba(191, 219, 254, 0.9);
            margin-bottom: 6px;
            text-transform: uppercase;
            letter-spacing: .035em;
            padding: 4px 8px;
            border-radius: 999px;
            border: 1px solid rgba(147, 197, 253, 0.36);
            background: rgba(30, 64, 175, 0.24);
            display: inline-flex;
            max-width: 100%;
        }

        .lot-scenario-dashboard .dash-section-title {
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .05em;
            color: rgba(191, 219, 254, 0.95);
            margin-bottom: 8px;
        }

        .lot-scenario-dashboard .dash-pills {
            display: inline-flex;
            border-radius: 999px;
            border: 1px solid rgba(148, 163, 184, 0.45);
            overflow: hidden;
        }

        .lot-scenario-dashboard .dash-pill {
            border: none;
            background: rgba(51, 65, 85, 0.68);
            color: rgba(226, 232, 240, 0.86);
            font-size: 10px;
            font-weight: 700;
            padding: 4px 8px;
            cursor: pointer;
        }

        .lot-scenario-dashboard .dash-pill.active {
            background: rgba(37, 99, 235, 0.55);
            color: #eff6ff;
        }

        .lot-scenario-dashboard .dash-section {
            border-top: 1px solid rgba(148, 163, 184, 0.26);
            padding-top: 8px;
            margin-top: 8px;
        }

        .lot-scenario-dashboard .dash-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6px 10px;
        }

        .lot-scenario-dashboard .dash-k {
            color: rgba(203, 213, 225, 0.86);
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 0.035em;
        }

        .lot-scenario-dashboard .dash-v {
            text-align: right;
            font-family: var(--font-family-mono);
            font-weight: 800;
            color: #f8fafc;
            font-size: 11px;
        }

        .lot-scenario-dashboard .dash-control-row {
            display: grid;
            grid-template-columns: 82px 30px 1fr 30px;
            gap: 8px;
            align-items: center;
            margin-bottom: 8px;
        }

        .lot-scenario-dashboard .dash-control-label {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            color: rgba(191, 219, 254, 0.9);
        }

        .lot-scenario-dashboard .dash-control-btn {
            width: 30px;
            height: 28px;
            border-radius: 8px;
            border: 1px solid rgba(148, 163, 184, 0.4);
            background: rgba(51, 65, 85, 0.7);
            color: #fff;
            font-weight: 800;
            cursor: pointer;
        }

        .lot-scenario-dashboard .dash-control-value {
            text-align: center;
            font-family: var(--font-family-mono);
            font-weight: 800;
            font-size: 12px;
        }

        .lot-scenario-dashboard .dash-reset {
            width: 100%;
            margin-top: 6px;
            border-radius: 9px;
            border: 1px solid rgba(248, 113, 113, 0.5);
            background: rgba(127, 29, 29, 0.24);
            color: #fecaca;
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            padding: 6px 8px;
            cursor: pointer;
        }

        .lot-scenario-dashboard .dash-control-input-row {
            grid-template-columns: 82px 1fr;
        }

        .lot-scenario-dashboard .dash-control-input {
            width: 100%;
            min-height: 30px;
            border-radius: 8px;
            border: 1px solid rgba(148, 163, 184, 0.4);
            background: rgba(15, 23, 42, 0.72);
            color: #f8fafc;
            font-size: 12px;
            font-weight: 700;
            padding: 6px 10px;
            outline: none;
            box-sizing: border-box;
        }

        .lot-scenario-dashboard .dash-control-input:focus {
            border-color: rgba(56, 189, 248, 0.85);
            box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
        }

        .lot-scenario-dashboard .dash-control-input:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .lot-scenario-dashboard .dash-control-hint {
            margin-top: 6px;
            font-size: 10px;
            color: rgba(191, 219, 254, 0.74);
        }

        .lot-scenario-dashboard.command-center {
            top: auto;
            bottom: var(--fiscal-command-bottom, 14px);
            left: var(--fiscal-command-left, 14px);
            right: var(--fiscal-command-right, 14px);
            width: auto;
            max-width: none;
            min-width: 0;
            padding: 0;
            overflow: hidden;
            border-radius: 16px;
            background:
                linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(15, 23, 42, 0.9) 100%),
                radial-gradient(circle at 30% 0%, rgba(37, 99, 235, 0.22), transparent 34%);
        }

        html.fiscal-impact-active .lot-scenario-dashboard.command-center {
            border: 1px solid rgba(56, 189, 248, 0.52);
            box-shadow:
                0 0 0 1px rgba(56, 189, 248, 0.22),
                0 12px 30px rgba(15, 23, 42, 0.45),
                0 0 24px rgba(37, 99, 235, 0.35);
        }

        html.fiscal-impact-active .lot-scenario-dashboard.command-center .command-shell {
            background:
                linear-gradient(180deg, rgba(2, 6, 23, 0.2) 0%, rgba(2, 6, 23, 0.05) 100%),
                radial-gradient(circle at 18% 0%, rgba(56, 189, 248, 0.16), transparent 48%);
        }

        .lot-scenario-dashboard .command-shell {
            position: relative;
            display: grid;
            grid-template-rows: auto auto auto minmax(0, 1fr) auto;
            max-height: var(--fiscal-command-max-height, min(62vh, 680px));
        }

        .lot-scenario-dashboard .command-resize-handle {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 6px;
            z-index: 3;
            cursor: ns-resize;
            border-radius: 16px 16px 0 0;
        }

        .lot-scenario-dashboard .command-resize-handle:hover {
            background: rgba(96, 165, 250, 0.22);
        }

        .lot-scenario-dashboard .command-resize-left-handle {
            position: absolute;
            top: 6px;
            left: 0;
            bottom: 0;
            width: 6px;
            z-index: 3;
            cursor: ew-resize;
        }

        .lot-scenario-dashboard .command-resize-left-handle:hover {
            background: rgba(96, 165, 250, 0.2);
        }

        .lot-scenario-dashboard .command-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            padding: 12px 14px;
            border-bottom: 1px solid rgba(148, 163, 184, 0.24);
            background: rgba(15, 23, 42, 0.7);
        }

        .lot-scenario-dashboard .command-title {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }

        .lot-scenario-dashboard .command-title strong {
            font-size: 13px;
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .lot-scenario-dashboard .command-title span {
            color: rgba(203, 213, 225, 0.82);
            font-size: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .lot-scenario-dashboard .command-actions {
            display: flex;
            gap: 8px;
            align-items: center;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .lot-scenario-dashboard .scenario-manager {
            display: inline-flex;
            gap: 6px;
            align-items: center;
            flex-wrap: wrap;
        }

        .lot-scenario-dashboard .scenario-select {
            min-width: 220px;
            border: 1px solid rgba(148, 163, 184, 0.34);
            background: rgba(30, 41, 59, 0.76);
            color: #e2e8f0;
            border-radius: 10px;
            padding: 6px 10px;
            font-size: 11px;
            font-weight: 700;
        }

        .lot-scenario-dashboard .command-btn {
            border: 1px solid rgba(148, 163, 184, 0.34);
            background: rgba(30, 41, 59, 0.76);
            color: rgba(241, 245, 249, 0.96);
            border-radius: 999px;
            padding: 6px 10px;
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .04em;
            cursor: pointer;
        }

        .lot-scenario-dashboard .command-btn.pin-active {
            border-color: rgba(56, 189, 248, 0.86);
            color: #e0f2fe;
            background: rgba(30, 64, 175, 0.45);
        }

        .lot-scenario-dashboard .command-kpis {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            border-bottom: 1px solid rgba(148, 163, 184, 0.24);
        }

        .lot-scenario-dashboard .command-kpi {
            padding: 10px 12px;
            border-right: 1px solid rgba(148, 163, 184, 0.18);
            background: rgba(15, 23, 42, 0.45);
            min-width: 0;
        }

        .lot-scenario-dashboard .command-kpi:last-child {
            border-right: none;
        }

        .lot-scenario-dashboard .command-kpi-label {
            font-size: 9px;
            color: rgba(148, 163, 184, 0.88);
            text-transform: uppercase;
            letter-spacing: .05em;
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .lot-scenario-dashboard .command-kpi-value {
            font-family: var(--font-family-mono);
            font-size: 18px;
            font-weight: 900;
            line-height: 1.05;
            color: #f8fafc;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .lot-scenario-dashboard .command-kpi-sub {
            margin-top: 3px;
            font-size: 9px;
            color: rgba(203, 213, 225, 0.7);
        }

        .lot-scenario-dashboard .command-kpi.neutral .command-kpi-value { color: #93c5fd; }
        .lot-scenario-dashboard .command-kpi.good .command-kpi-value { color: #22c55e; }
        .lot-scenario-dashboard .command-kpi.warn .command-kpi-value { color: #fb923c; }

        .lot-scenario-dashboard .command-controls-inline {
            padding: 8px 12px;
            border-top: 1px solid rgba(148, 163, 184, 0.18);
            border-bottom: 1px solid rgba(148, 163, 184, 0.18);
            background: rgba(15, 23, 42, 0.6);
        }

        .lot-scenario-dashboard .command-dollar-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(150px, 1fr));
            gap: 8px 12px;
            align-items: center;
        }

        .lot-scenario-dashboard .command-dollar-label {
            font-size: 10px;
            font-weight: 800;
            color: rgba(191, 219, 254, 0.92);
            text-transform: uppercase;
            letter-spacing: 0.04em;
            margin: 0;
        }

        .lot-scenario-dashboard .command-dollar-input {
            width: 100%;
        }

        .lot-scenario-dashboard .command-dollar-hint {
            grid-column: 1 / -1;
            font-size: 10px;
            color: rgba(191, 219, 254, 0.72);
            line-height: 1.25;
        }

        .scenario-impact-tooltip {
            min-width: 220px;
            max-width: 280px;
            border-radius: 12px;
            border: 1px solid rgba(96, 165, 250, 0.5);
            background: linear-gradient(160deg, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.84) 100%);
            color: #f8fafc;
            padding: 10px 12px;
            box-shadow: 0 16px 30px rgba(2, 6, 23, 0.5);
            font-size: 11px;
            line-height: 1.35;
        }

        .scenario-impact-tooltip .title {
            font-weight: 900;
            font-size: 12px;
            margin-bottom: 6px;
            letter-spacing: 0.02em;
        }

        .scenario-impact-tooltip .row {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 4px;
        }

        .scenario-impact-tooltip .label {
            color: rgba(191, 219, 254, 0.84);
            font-weight: 700;
        }

        .scenario-impact-tooltip .value {
            font-weight: 800;
            font-family: var(--font-family-mono);
        }

        .lot-scenario-dashboard .command-body {
            display: grid;
            grid-template-columns: minmax(220px, 0.9fr) minmax(300px, 1.4fr) minmax(240px, 1fr);
            min-height: 220px;
            overflow: hidden;
        }

        .lot-scenario-dashboard .command-panel {
            padding: 12px;
            border-right: 1px solid rgba(148, 163, 184, 0.18);
            overflow: auto;
        }

        .lot-scenario-dashboard .command-panel:last-child {
            border-right: none;
        }

        .lot-scenario-dashboard .command-panel-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 10px;
            font-size: 10px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: rgba(219, 234, 254, 0.96);
        }

        .lot-scenario-dashboard .impact-row {
            display: grid;
            grid-template-columns: minmax(66px, 1fr) auto;
            gap: 8px;
            align-items: center;
            padding: 7px 0;
            border-bottom: 1px solid rgba(148, 163, 184, 0.14);
        }

        .lot-scenario-dashboard .impact-row:last-child {
            border-bottom: none;
        }

        .lot-scenario-dashboard .impact-row.clickable {
            cursor: pointer;
        }

        .lot-scenario-dashboard .impact-row.clickable:hover {
            background: rgba(30, 41, 59, 0.42);
            border-radius: 8px;
        }

        .lot-scenario-dashboard .impact-id {
            font-weight: 900;
            color: #f8fafc;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .lot-scenario-dashboard .impact-meta {
            margin-top: 2px;
            color: rgba(203, 213, 225, 0.66);
            font-size: 9px;
        }

        .lot-scenario-dashboard .impact-delta {
            font-family: var(--font-family-mono);
            font-weight: 900;
            font-size: 11px;
            text-align: right;
        }

        .lot-scenario-dashboard .impact-delta.down { color: #22c55e; }
        .lot-scenario-dashboard .impact-delta.up { color: #fb923c; }

        .lot-scenario-dashboard .lot-tune-card {
            border: 1px solid rgba(148, 163, 184, 0.18);
            border-radius: 12px;
            background: rgba(15, 23, 42, 0.42);
            padding: 10px;
            margin-bottom: 10px;
        }

        .lot-scenario-dashboard .lot-tune-header {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            align-items: baseline;
            margin-bottom: 8px;
        }

        .lot-scenario-dashboard .lot-tune-id {
            font-weight: 900;
            color: #f8fafc;
            letter-spacing: .01em;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .lot-scenario-dashboard .pin-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 1px 5px;
            border-radius: 999px;
            border: 1px solid rgba(56, 189, 248, 0.5);
            background: rgba(37, 99, 235, 0.28);
            color: rgba(186, 230, 253, 0.95);
            font-size: 9px;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            line-height: 1.2;
        }

        .lot-scenario-dashboard .lot-tune-id.clickable {
            cursor: pointer;
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        .lot-scenario-dashboard .lot-tune-tax {
            font-family: var(--font-family-mono);
            font-size: 10px;
            font-weight: 900;
            color: rgba(191, 219, 254, 0.95);
            white-space: nowrap;
        }

        .lot-scenario-dashboard .lot-tune-tax.down { color: #22c55e; }
        .lot-scenario-dashboard .lot-tune-tax.up { color: #fb923c; }

        .lot-scenario-dashboard .lot-tune-row {
            display: grid;
            grid-template-columns: 78px 28px minmax(52px, 1fr) 28px;
            gap: 7px;
            align-items: center;
            margin-top: 7px;
        }

        .lot-scenario-dashboard .lot-tune-label {
            color: rgba(203, 213, 225, 0.82);
            font-size: 9px;
            font-weight: 800;
            letter-spacing: .04em;
            text-transform: uppercase;
        }

        .lot-scenario-dashboard .lot-tune-btn {
            border: 1px solid rgba(96, 165, 250, 0.36);
            border-radius: 8px;
            background: rgba(37, 99, 235, 0.18);
            color: #dbeafe;
            font-weight: 900;
            min-height: 26px;
            cursor: pointer;
        }

        .lot-scenario-dashboard .lot-tune-value {
            text-align: center;
            font-family: var(--font-family-mono);
            font-size: 10px;
            font-weight: 900;
            color: #f8fafc;
            padding: 5px 4px;
            border-radius: 8px;
            background: rgba(30, 41, 59, 0.58);
        }

        .lot-scenario-dashboard .lot-tune-reset {
            margin-top: 8px;
            width: 100%;
            border: 1px solid rgba(148, 163, 184, 0.28);
            border-radius: 9px;
            background: rgba(51, 65, 85, 0.62);
            color: rgba(226, 232, 240, 0.9);
            font-size: 10px;
            font-weight: 800;
            padding: 6px 8px;
            cursor: pointer;
        }

        .lot-scenario-dashboard .command-map-proxy {
            min-height: 100%;
            border-radius: 12px;
            border: 1px solid rgba(96, 165, 250, 0.26);
            background:
                radial-gradient(circle at 55% 45%, rgba(59, 130, 246, 0.28), transparent 30%),
                linear-gradient(145deg, rgba(15, 23, 42, 0.3), rgba(30, 41, 59, 0.72));
            padding: 12px;
            display: grid;
            align-content: space-between;
            gap: 12px;
        }

        .lot-scenario-dashboard .command-map-note {
            color: rgba(219, 234, 254, 0.88);
            font-weight: 800;
            font-size: 11px;
            line-height: 1.45;
        }

        .lot-scenario-dashboard .mini-chart {
            margin-bottom: 12px;
        }

        .lot-scenario-dashboard .mini-chart-label {
            display: flex;
            justify-content: space-between;
            font-size: 10px;
            color: rgba(203, 213, 225, 0.84);
            margin-bottom: 5px;
        }

        .lot-scenario-dashboard .mini-bar {
            height: 9px;
            border-radius: 999px;
            background: rgba(51, 65, 85, 0.82);
            overflow: hidden;
            border: 1px solid rgba(148, 163, 184, 0.18);
        }

        .lot-scenario-dashboard .mini-fill {
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, #38bdf8, #2563eb);
        }

        .lot-scenario-dashboard .mini-fill.good { background: linear-gradient(90deg, #34d399, #16a34a); }
        .lot-scenario-dashboard .mini-fill.warn { background: linear-gradient(90deg, #fbbf24, #f97316); }

        .lot-scenario-dashboard .command-tabs {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 8px 10px;
            border-top: 1px solid rgba(148, 163, 184, 0.2);
            background: rgba(15, 23, 42, 0.72);
            overflow-x: auto;
        }

        .lot-scenario-dashboard .command-tab {
            border: 1px solid rgba(148, 163, 184, 0.24);
            background: rgba(30, 41, 59, 0.7);
            color: rgba(226, 232, 240, 0.88);
            border-radius: 999px;
            padding: 6px 10px;
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .035em;
            cursor: pointer;
            white-space: nowrap;
        }

        .lot-scenario-dashboard .command-tab.active {
            background: rgba(37, 99, 235, 0.62);
            color: #eff6ff;
            border-color: rgba(147, 197, 253, 0.45);
        }

        .lot-scenario-dashboard.command-center-slid {
            left: auto !important;
            right: 6px !important;
            bottom: 14px !important;
            min-width: 44px;
            max-width: 44px;
            z-index: 1205;
            border-radius: 12px;
            border-color: rgba(96, 165, 250, 0.55);
            background: linear-gradient(180deg, rgba(15, 23, 42, 0.97) 0%, rgba(30, 41, 59, 0.95) 100%);
            box-shadow: 0 12px 22px rgba(2, 6, 23, 0.48);
        }

        .lot-scenario-dashboard .slide-shell {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
            padding: 8px 4px;
            min-height: 180px;
        }

        .lot-scenario-dashboard .slide-rail-btn {
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            border: 1px solid rgba(147, 197, 253, 0.6);
            background: linear-gradient(180deg, rgba(37, 99, 235, 0.58), rgba(30, 64, 175, 0.62));
            color: #eff6ff;
            border-radius: 10px;
            padding: 8px 6px;
            font-size: 10px;
            font-weight: 900;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            cursor: pointer;
            min-height: 148px;
            width: 32px;
        }

        .lot-scenario-dashboard .slide-rail-lot {
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            font-size: 9px;
            font-weight: 800;
            color: rgba(191, 219, 254, 0.9);
            letter-spacing: 0.04em;
            max-height: 170px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        @media (max-width: 768px) {
            .lot-scenario-dashboard {
                top: calc(var(--toolbar-height) + 64px);
                left: 10px;
                right: 10px;
                min-width: 0;
                max-width: none;
                width: auto;
                padding: 12px 12px 11px;
                border-radius: 12px;
                max-height: min(68vh, 560px);
                overflow-y: auto;
            }

            .lot-scenario-dashboard .dash-title {
                flex-wrap: wrap;
                gap: 8px 10px;
                margin-bottom: 10px;
            }

            .lot-scenario-dashboard .dash-title > span {
                font-size: 11px;
                line-height: 1.2;
            }

            .lot-scenario-dashboard .dash-pills {
                width: 100%;
            }

            .lot-scenario-dashboard .dash-pill {
                flex: 1 1 0;
                text-align: center;
                min-height: 34px;
                font-size: 11px;
                padding: 7px 10px;
            }

            .lot-scenario-dashboard .dash-selection-label {
                font-size: 10px;
                margin-bottom: 10px;
            }

            .lot-scenario-dashboard .dash-grid {
                gap: 8px 10px;
            }

            .lot-scenario-dashboard .dash-k {
                font-size: 10px;
                line-height: 1.2;
            }

            .lot-scenario-dashboard .dash-v {
                font-size: 12px;
            }

            .lot-scenario-dashboard .dash-section {
                margin-top: 10px;
                padding-top: 10px;
            }

            .lot-scenario-dashboard .dash-section-title {
                font-size: 10px;
                margin-bottom: 9px;
            }

            .lot-scenario-dashboard .dash-control-row {
                grid-template-columns: minmax(86px, 1fr) 38px minmax(66px, auto) 38px;
                gap: 8px;
                margin-bottom: 10px;
            }

            .lot-scenario-dashboard .dash-control-label {
                font-size: 11px;
            }

            .lot-scenario-dashboard .dash-control-btn {
                width: 38px;
                height: 36px;
                border-radius: 10px;
                font-size: 18px;
                line-height: 1;
            }

            .lot-scenario-dashboard .dash-control-value {
                font-size: 13px;
                padding: 6px 4px;
                border-radius: 8px;
                background: rgba(30, 41, 59, 0.44);
                border: 1px solid rgba(148, 163, 184, 0.3);
            }

            .lot-scenario-dashboard .dash-reset {
                min-height: 38px;
                margin-top: 8px;
                font-size: 11px;
                padding: 9px 10px;
            }

            .lot-scenario-dashboard .command-shell {
                max-height: var(--fiscal-command-max-height, min(72vh, 720px));
            }

            .lot-scenario-dashboard .command-header {
                align-items: flex-start;
                flex-direction: column;
                padding: 11px 12px;
            }

            .lot-scenario-dashboard .command-actions {
                width: 100%;
                justify-content: stretch;
            }

            .lot-scenario-dashboard .scenario-select {
                min-width: 0;
                width: 100%;
                flex: 1 1 100%;
            }

            .lot-scenario-dashboard .command-btn {
                flex: 1 1 auto;
                min-height: 34px;
            }

            .lot-scenario-dashboard .command-kpis {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .lot-scenario-dashboard .command-kpi {
                border-bottom: 1px solid rgba(148, 163, 184, 0.16);
            }

            .lot-scenario-dashboard .command-kpi-value {
                font-size: 16px;
            }

            .lot-scenario-dashboard .command-body {
                grid-template-columns: 1fr;
                overflow: auto;
            }

            .lot-scenario-dashboard .command-dollar-grid {
                grid-template-columns: repeat(2, minmax(110px, 1fr));
            }

            .lot-scenario-dashboard .command-panel {
                border-right: none;
                border-bottom: 1px solid rgba(148, 163, 184, 0.18);
                overflow: visible;
            }

            .lot-scenario-dashboard .command-map-proxy {
                min-height: 150px;
            }

            .lot-scenario-dashboard .command-tabs {
                padding: 8px;
            }
        }

        @media (max-width: 520px) {
            .lot-scenario-dashboard .dash-grid {
                grid-template-columns: minmax(0, 1fr);
                gap: 5px;
            }

            .lot-scenario-dashboard .dash-k {
                color: rgba(191, 219, 254, 0.9);
                margin-top: 3px;
            }

            .lot-scenario-dashboard .dash-v {
                text-align: left;
                margin-bottom: 3px;
            }

            .lot-scenario-dashboard .dash-control-row {
                grid-template-columns: minmax(82px, 1fr) 36px minmax(64px, auto) 36px;
            }
        }

        @keyframes lotOverlayAppear {
            0% {
                opacity: 0;
                transform: translateY(8px) scale(0.98);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        /* Dock panel: wider default width on right side, resizable */
        #dock-panel {
            position: fixed;
            top: var(--toolbar-height);
            right: 0;
            width: 40%;
            min-width: 320px;
            max-width: 60%;
            height: calc(var(--app-vh, 100vh) - var(--toolbar-height));

            /* Match .ol-popup styling */
            background: var(--bg-primary);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            box-shadow: var(--shadow-xl), 0 0 0 1px var(--border-light);
            border-left: 1px solid var(--border-light);

            display: none;
            flex-direction: column;
            z-index: 1200;
            flex-shrink: 0;
            resize: none;
            overflow-y: hidden;
            word-wrap: break-word;
            font-size: var(--font-size-sm);
            box-sizing: border-box;
            font-family: var(--font-family);
        }

        html.fiscal-impact-active #dock-panel {
            background:
                linear-gradient(160deg, rgba(7, 40, 61, 0.94) 0%, rgba(30, 58, 138, 0.88) 46%, rgba(15, 118, 110, 0.84) 100%);
            border-left: 1px solid rgba(34, 211, 238, 0.62);
            box-shadow:
                var(--shadow-xl),
                0 0 0 1px rgba(34, 211, 238, 0.28),
                0 0 32px rgba(37, 99, 235, 0.34);
        }

        #dock-panel.stack-dock-slide-in {
            animation: stackDockSlideInQuick 180ms cubic-bezier(0.22, 1, 0.36, 1);
        }

        @keyframes stackDockSlideInQuick {
            0% {
                opacity: 0;
                transform: translateX(28px);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes controlsDockedNudge {
            0% {
                transform: translateX(0);
            }
            35% {
                transform: translateX(-10px);
            }
            100% {
                transform: translateX(0);
            }
        }

        @keyframes controlsDockedGlow {
            0% {
                box-shadow: 0 0 0 0 rgba(34, 211, 238, 0);
            }
            40% {
                box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.24), 0 0 18px rgba(59, 130, 246, 0.28);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(34, 211, 238, 0);
            }
        }

        html.parcel-dock-visible #map-layer-controls,
        html.parcel-dock-visible .map-search-overlay,
        html.parcel-dock-visible #lot-scenario-dashboard.command-center {
            /* Never overlap the parcel dock: floor the right inset at the dock's
               effective width (40%, min 320px) + a clear gap, even before the JS
               measurement runs. JS sets --fiscal-command-right to the exact value. */
            right: max(var(--fiscal-command-right, 14px), calc(max(40%, 320px) + 20px));
            transition: right 0.26s ease, transform 0.26s ease, box-shadow 0.28s ease, filter 0.28s ease;
        }

        #map-layer-controls.controls-docked-cue {
            animation: controlsDockedNudge 430ms cubic-bezier(0.22, 1, 0.36, 1), controlsDockedGlow 460ms ease-out;
        }

        .map-search-overlay.controls-docked-cue,
        .map-search-container.controls-docked-cue {
            animation: controlsDockedNudge 430ms cubic-bezier(0.22, 1, 0.36, 1), controlsDockedGlow 460ms ease-out;
        }

        #lot-scenario-dashboard.command-center.controls-docked-cue,
        #lot-scenario-dashboard.command-center .command-shell.controls-docked-cue {
            animation: controlsDockedNudge 460ms cubic-bezier(0.22, 1, 0.36, 1), controlsDockedGlow 500ms ease-out;
        }

        @media (prefers-reduced-motion: reduce) {
            html.fiscal-impact-active #toolbar #btn-fiscal-impact.active,
            html.fiscal-impact-active #toolbar #btn-fiscal-impact.active .btn-text,
            html.fiscal-impact-active #toolbar #btn-fiscal-impact.active::before,
            html.fiscal-impact-active #toolbar #btn-fiscal-impact.active::after,
            #map-layer-controls.controls-docked-cue,
            .map-search-overlay.controls-docked-cue,
            .map-search-container.controls-docked-cue,
            #lot-scenario-dashboard.command-center.controls-docked-cue,
            #lot-scenario-dashboard.command-center .command-shell.controls-docked-cue {
                animation: none !important;
                transition: none !important;
            }
        }


        /* Compact dock content styles - apply to ALL browsers */
        #dock-panel .dock-header {
            padding: var(--space-md) var(--space-lg);
        }

        #dock-panel .dock-header h3 {
            font-size: var(--font-size-md);
        }

        #dock-panel .dock-close-btn {
            font-size: 16px;
            padding: var(--space-xs);
        }

        #dock-content .parcel-tip {
            padding: 4px;
        }

        #dock-content .parcel-header h3 {
            font-size: 12px;
            margin: 0;
        }

        #dock-content .parcel-header p {
            font-size: 9px;
            margin: 2px 0;
        }

        #dock-content .tab-header {
            flex-direction: column;
            gap: 2px;
        }

        #dock-content .tab-btn {
            font-size: 9px;
            padding: 6px 4px;
            width: 100%;
            text-align: center;
        }

        #dock-content .tab-body {
            padding: 6px;
        }

        #dock-content .tab-body h4 {
            font-size: 10px;
            margin: 4px 0;
        }

        #dock-content .tab-body ul li {
            font-size: 9px;
            padding: 3px 0;
        }

        #dock-content .grade-box {
            padding: 6px;
            margin: 4px 0;
        }

        #dock-content .grade-letter {
            font-size: 18px;
        }

        #dock-content .grade-rank {
            font-size: 9px;
        }

        #dock-content .popup-image-container {
            display: none;
        }

        .dock-header {
            padding: var(--space-lg) var(--space-xl);
            background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
            border-bottom: 1px solid var(--border-light);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
        }

        .dock-header h3 {
            margin: 0;
            font-size: var(--font-size-lg);
            font-weight: var(--font-weight-semibold);
            color: var(--color-dark-alt);
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }

        .dock-close-btn {
            background: none;
            border: none;
            font-size: 22px;
            cursor: pointer;
            color: var(--color-gray-400);
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-md);
            transition: all var(--transition-base);
        }

        .dock-header-actions {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .dock-maximize-btn {
            background: none;
            border: none;
            font-size: 19px;
            cursor: pointer;
            color: var(--color-gray-400);
            width: 32px;
            height: 32px;
            display: none;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-md);
            transition: all var(--transition-base);
        }

        @keyframes dockArrowPulseGlow {
            0% { box-shadow: 0 0 0 rgba(59, 130, 246, 0); }
            50% { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.24), 0 0 16px rgba(59, 130, 246, 0.52); }
            100% { box-shadow: 0 0 0 rgba(59, 130, 246, 0); }
        }

        .dock-maximize-btn.pulse-glow {
            animation: dockArrowPulseGlow 1.8s ease-in-out infinite;
        }

        .dock-maximize-btn:hover {
            background: var(--bg-secondary);
            color: var(--color-primary);
            transform: scale(1.08);
        }

        .dock-close-btn:hover {
            background: var(--bg-secondary);
            color: var(--color-accent-red);
            transform: scale(1.1);
        }

        /* Dock Resize Handle */
        .dock-resize-handle {
            position: absolute;
            left: -6px;
            top: 0;
            bottom: 0;
            width: 12px;
            background: transparent;
            cursor: ew-resize;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color-gray-400);
            font-size: 16px;
            letter-spacing: 0;
            writing-mode: vertical-lr;
            text-orientation: mixed;
            transition: all var(--transition-base);
            z-index: 100;
            user-select: none;
        }

        .dock-resize-handle::before {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 4px;
            height: 40px;
            background: var(--color-gray-400);
            border-radius: 2px;
            opacity: 0.5;
            transition: all var(--transition-base);
        }

        .dock-resize-handle:hover {
            background: rgba(52, 152, 219, 0.1);
        }
        
        .dock-resize-handle:hover::before {
            background: var(--color-primary);
            opacity: 1;
            height: 60px;
        }

        .dock-resize-handle:active {
            background: rgba(52, 152, 219, 0.2);
        }
        
        .dock-resize-handle:active::before {
            background: var(--color-primary);
            opacity: 1;
        }

        #dock-content,
        .stack-ranking-side-dock-body {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

        #dock-content .parcel-tip,
        .stack-ranking-side-dock-body .parcel-tip {
            max-height: none;
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

        #dock-content .tab-body,
        .stack-ranking-side-dock-body .tab-body {
            max-height: none;
            flex: 1;
            overflow-y: auto;
            min-height: 0;
        }

        #dock-content .popup-image-container,
        #dock-content .parcel-header,
        #dock-content .tab-header,
        .stack-ranking-side-dock-body .popup-image-container,
        .stack-ranking-side-dock-body .parcel-header,
        .stack-ranking-side-dock-body .tab-header {
            flex-shrink: 0;
        }

        #resize-handle {
            height: 8px;
            background-color: var(--bg-secondary);
            cursor: row-resize;
            flex: none;
            border-top: 1px solid var(--border-medium);
            border-bottom: 1px solid var(--border-medium);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 100;
        }

        #resize-handle:hover {
            background: linear-gradient(90deg, var(--color-gray-300), var(--color-gray-200));
        }

        #resize-handle::after {
            content: "⋯";
            color: var(--color-gray-500);
            font-size: 16px;
            line-height: 0;
            letter-spacing: 3px;
            font-weight: var(--font-weight-bold);
        }

        #data-table-container {
            height: 42dvh;
            max-height: 82dvh;
            min-height: 180px;
            display: flex;
            flex-direction: column;
            background: var(--bg-primary);
            border-top: 1px solid var(--border-medium);
            overflow: hidden;
        }

        #data-table {
            flex: 1;
            overflow: auto;
        }

        #table-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            padding: 4px 8px;
            border-bottom: 1px solid var(--border-light);
            background: var(--bg-secondary);
            flex-wrap: wrap;
        }

        .table-header-controls {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-left: auto;
            flex-wrap: wrap;
        }

        .table-header-title {
            font-size: 10px;
            font-weight: var(--font-weight-semibold);
            color: var(--color-gray-900);
            line-height: 1;
        }

        .table-clear-filters-btn {
            background: var(--bg-tertiary);
            color: var(--color-gray-800);
            border: 1px solid var(--border-medium);
            border-radius: var(--radius-md);
            padding: 3px 7px;
            font-size: 9px;
            font-weight: 700;
            cursor: pointer;
            white-space: nowrap;
            transition: all var(--transition-fast);
            line-height: 1.1;
        }

        .table-clear-filters-btn:hover {
            background: var(--color-gray-200);
            border-color: var(--border-dark);
        }

        .table-filter-toggle {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 10px;
            color: var(--color-gray-700);
            line-height: 1;
        }

        .table-filter-toggle .switch {
            flex-shrink: 0;
            width: 34px;
            height: 18px;
        }

        .table-filter-toggle .slider:before {
            width: 12px;
            height: 12px;
            left: 2px;
            bottom: 2px;
        }

        .table-filter-toggle input:checked+.slider:before {
            transform: translateX(16px);
        }

        .table-filter-toggle input:disabled + .slider {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .table-filter-count {
            color: var(--color-gray-500);
            font-variant-numeric: tabular-nums;
            font-size: 9px;
        }

        /* ===== FILTER TOGGLE BUTTON ===== */


        .logo-img {
            height: 30px;
            width: auto;
            margin-right: 0px;
            object-fit: contain;
        }

        /* ===== UNIFIED BUTTON SYSTEM ===== */
        .btn-toggle {
            background: linear-gradient(135deg, var(--color-gray-300) 0%, var(--color-gray-200) 100%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--color-white);
            padding: var(--space-sm) var(--space-md);
            border-radius: var(--radius-md);
            cursor: pointer;
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-semibold);
            transition: all var(--transition-base);
            white-space: nowrap;
            box-shadow: var(--shadow-sm);
            position: relative;
            overflow: hidden;
        }

        #toolbar .btn-toggle {
            padding: 4px 8px;
            height: 26px;
            font-size: 9.5px;
            letter-spacing: 0.05em;
            border-radius: 10px;
            gap: 5px;
            color: #e2e8f0;
        }

        .btn-toggle::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
            opacity: 0;
            transition: opacity var(--transition-base);
        }

        .btn-toggle:hover {
            background: linear-gradient(135deg, var(--color-gray-400) 0%, var(--color-gray-300) 100%);
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
            border-color: rgba(255, 255, 255, 0.15);
        }

        .btn-toggle:hover::before {
            opacity: 1;
        }

        .btn-toggle:active {
            transform: translateY(0);
            box-shadow: var(--shadow-sm);
        }

        #toolbar .btn-toggle.active {
            background: linear-gradient(160deg, rgba(201, 169, 98, 0.72) 0%, rgba(14, 165, 233, 0.56) 100%);
            border-color: rgba(186, 230, 253, 0.80);
            box-shadow: 0 10px 24px rgba(2, 132, 199, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.30);
            color: #0d1421;
        }

        .btn-toggle.active::before {
            opacity: 0.2;
        }

        /* Dock Mode Button States */
        #toolbar .btn-toggle.dock-mode-dock {
            background: linear-gradient(160deg, rgba(201, 169, 98, 0.72) 0%, rgba(14, 165, 233, 0.56) 100%);
            border-color: rgba(186, 230, 253, 0.80);
            color: #0d1421;
            box-shadow: 0 10px 24px rgba(2, 132, 199, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.30);
        }

        #toolbar .btn-toggle.dock-mode-popup {
            background: linear-gradient(160deg, rgba(201, 169, 98, 0.28) 0%, rgba(125, 211, 252, 0.10) 100%);
            border-color: rgba(125, 211, 252, 0.70);
        }

        #toolbar .btn-toggle.dock-mode-off {
            background: linear-gradient(160deg, rgba(100, 116, 139, 0.30) 0%, rgba(71, 85, 105, 0.16) 100%);
            border-color: rgba(148, 163, 184, 0.35);
            opacity: 0.85;
        }

        #clear-selection-btn {
            background: linear-gradient(135deg, #c0392b 0%, #a93226 100%) !important;
            border-color: rgba(192, 57, 43, 0.4) !important;
        }
        #clear-selection-btn:hover {
            background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
        }

        /* Slightly darker greyscale for TIF, COMPARE, STATS, RANKINGS, MORTGAGE, GROWTH */
        .btn-toggle.btn-toggle-nav-feature {
            background: linear-gradient(135deg, var(--color-gray-200) 0%, var(--color-gray-100) 100%);
            border: 2px solid rgba(255, 255, 255, 0.28);
        }
        .btn-toggle.btn-toggle-nav-feature:hover {
            background: linear-gradient(135deg, var(--color-gray-300) 0%, var(--color-gray-200) 100%);
            border-color: rgba(255, 255, 255, 0.35);
        }

        #toolbar #btn-fiscal-impact.active {
            background: linear-gradient(135deg, #0369a1 0%, #1d4ed8 48%, #0f766e 100%);
            border-color: rgba(34, 211, 238, 0.95);
            box-shadow:
                0 0 0 1px rgba(34, 211, 238, 0.4),
                0 0 22px rgba(37, 99, 235, 0.62),
                var(--shadow-md);
            color: #f8fafc;
        }

        html.fiscal-impact-active #toolbar #btn-fiscal-impact {
            border-color: rgba(34, 211, 238, 0.8);
        }

        /* Navbar button with icon and animated text */
        .btn-toggle {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .btn-toggle svg {
            flex-shrink: 0;
            width: 16px;
            height: 16px;
        }

        #toolbar .btn-toggle svg {
            width: 14px;
            height: 14px;
        }

        .btn-text {
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            max-width: 120px;
            opacity: 1;
            transition: max-width 0.8s ease-out, opacity 0.8s ease-out;
        }

        .btn-toggle:hover .btn-text {
            max-width: 120px !important;
            opacity: 1 !important;
        }

        @keyframes navbarGlowPulse {
            0% {
                box-shadow: var(--shadow-sm);
                filter: brightness(1);
            }
            40% {
                box-shadow: 0 0 0 2px rgba(113, 113, 122, 0.35), 0 0 20px rgba(113, 113, 122, 0.65), var(--shadow-lg);
                filter: brightness(1.12);
            }
            100% {
                box-shadow: var(--shadow-sm);
                filter: brightness(1);
            }
        }

        @keyframes navbarTextGlowPulse {
            0% {
                text-shadow: none;
            }
            40% {
                text-shadow: 0 0 10px rgba(244, 244, 245, 0.75);
            }
            100% {
                text-shadow: none;
            }
        }

        @keyframes fiscalImpactNavPulse {
            0% { filter: brightness(1); }
            50% { filter: brightness(1.14); }
            100% { filter: brightness(1); }
        }

        @keyframes fiscalImpactTextPulse {
            0%   { text-shadow: none; }
            50%  { text-shadow: 0 0 10px rgba(224, 242, 254, 0.88), 0 0 18px rgba(34, 211, 238, 0.5); }
            100% { text-shadow: none; }
        }

        /* Sonar ripple rings emitted from the impact button */
        @keyframes fiscalSonarRipple {
            0% {
                transform: translate(-50%, -50%) scale(0.55);
                opacity: 0.72;
            }
            100% {
                transform: translate(-50%, -50%) scale(2.8);
                opacity: 0;
            }
        }

        html.fiscal-impact-active #toolbar #btn-fiscal-impact.active {
            position: relative;
            overflow: visible;
        }

        html.fiscal-impact-active #toolbar #btn-fiscal-impact.active::before,
        html.fiscal-impact-active #toolbar #btn-fiscal-impact.active::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            border: 2px solid rgba(34, 211, 238, 0.65);
            pointer-events: none;
            transform: translate(-50%, -50%) scale(0.55);
            opacity: 0;
            animation: fiscalSonarRipple 2.1s ease-out infinite;
        }

        html.fiscal-impact-active #toolbar #btn-fiscal-impact.active::after {
            border-color: rgba(125, 211, 252, 0.45);
            animation-delay: 0.9s;
        }

        .btn-toggle.navbar-attention-glow {
            animation: navbarGlowPulse 0.95s ease-in-out 2;
        }

        .btn-toggle.navbar-attention-glow .btn-text {
            animation: navbarTextGlowPulse 0.95s ease-in-out 2;
        }

        html.fiscal-impact-active #toolbar #btn-fiscal-impact.active {
            animation: fiscalImpactNavPulse 1.65s ease-in-out infinite;
        }

        html.fiscal-impact-active #toolbar #btn-fiscal-impact.active .btn-text {
            animation: fiscalImpactTextPulse 1.65s ease-in-out infinite;
        }

        .btn-text.intro-done {
            max-width: 0;
            opacity: 0;
        }

        /* ===== USER PROFILE DROPDOWN ===== */
        #user-profile-nav {
            cursor: pointer;
            user-select: none;
            position: relative !important;
            z-index: 2147483647 !important;
            /* iOS touch fixes */
            -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
            touch-action: manipulation;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
        }

        #user-profile-nav:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.25);
        }

        #user-profile-dropdown {
            display: none;
            position: fixed !important;
            top: 0;
            left: 0;
            min-width: 190px;
            padding: 6px;
            background: rgba(15, 23, 42, 0.98);
            border: 2px solid rgba(255, 255, 255, 0.35);
            border-radius: 10px;
            box-shadow: var(--shadow-lg), 0 0 0 1px rgba(52, 152, 219, 0.2);
            z-index: 2147483647 !important;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        #user-profile-dropdown.user-profile-dropdown-open {
            display: block;
        }

        .user-profile-dropdown-header {
            display: flex;
            flex-direction: column;
            gap: 2px;
            padding: 10px 12px 10px 12px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.15);
            margin-bottom: 4px;
            pointer-events: none;
        }
        .user-profile-dropdown-header #user-email-display {
            font-size: 12px;
            font-weight: 600;
            color: #e2e8f0;
            max-width: 220px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .user-profile-dropdown-header #user-role-display {
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .user-profile-dropdown-item {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 12px;
            background: transparent;
            border: 0;
            border-radius: 8px;
            color: #fff;
            cursor: pointer;
            font-size: 12px;
            font-weight: 700;
            text-align: left;
            text-decoration: none;
            /* iOS touch fixes */
            -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
            touch-action: manipulation;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
        }

        .user-profile-dropdown-item:hover,
        .user-profile-dropdown-item:active {
            background: rgba(255, 255, 255, 0.08);
        }

        .user-profile-dropdown-item.logout {
            color: #ffb4aa;
        }

        .user-profile-dropdown-item.logout:hover,
        .user-profile-dropdown-item.logout:active {
            background: rgba(231, 76, 60, 0.18);
            color: #fff;
        }

        .user-profile-caret {
            opacity: 0.7;
            margin-left: 6px;
        }

        @keyframes navTextFade {

            0%,
            75% {
                max-width: 120px;
                opacity: 1;
            }

            100% {
                max-width: 0;
                opacity: 0;
            }
        }

        #zone-selector {
            background: linear-gradient(135deg, #3d3234 0%, #2a2526 100%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--color-white);
            padding: var(--space-sm) var(--space-md);
            border-radius: var(--radius-md);
            cursor: pointer;
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-medium);
            max-width: 150px;
            box-shadow: var(--shadow-sm);
            transition: all var(--transition-base);
        }

        #zone-selector option {
            background-color: var(--bg-primary);
            color: var(--color-gray-900);
        }

        #zone-selector:hover {
            background: linear-gradient(135deg, #3d566e 0%, #34495e 100%);
            border-color: rgba(255, 255, 255, 0.15);
            box-shadow: var(--shadow-md);
        }

        #zone-selector:focus {
            outline: none;
            border-color: var(--color-primary-light);
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.25);
        }


        .layer-toggle {
            display: flex;
            align-items: center;
            font-size: 0.9em;
            cursor: pointer;
            user-select: none;
            white-space: normal;
            color: var(--color-gray-700);
        }

        .layer-toggle input {
            margin-right: 0;
            cursor: pointer;
            width: 16px;
            height: 16px;
            accent-color: var(--color-primary);
            flex: 0 0 auto;
        }

        /* ===== MAP LAYER CONTROLS ===== */
        .map-layer-controls {
            position: absolute;
            top: var(--overlay-controls-top, calc(var(--toolbar-height) + var(--space-sm)));
            right: calc(var(--overlay-controls-right, var(--space-sm)) + env(safe-area-inset-right));
            left: auto;
            background: var(--bg-primary);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-radius: var(--radius-xl);
            padding: var(--space-md) var(--space-lg);
            box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-light);
            z-index: var(--z-modal);
            display: flex;
            flex-direction: column;
            gap: var(--space-sm);
            border: 1px solid var(--border-medium);
            width: 220px;
            max-height: calc(100% - var(--toolbar-height) - 16px);
            overflow-y: auto;
            transition: all var(--transition-slow);
        }

        /* Mobile landscape mode: compact controls */
        @media screen and (max-height: 500px) and (orientation: landscape) {
            .map-layer-controls {
                top: calc(var(--toolbar-height) + 6px);
                right: 10px;
                left: auto;
                padding: 8px 10px;
                width: auto;
                min-width: 160px;
                max-height: calc(var(--app-vh, 100vh) - var(--toolbar-height) - 24px);
                gap: 4px;
                font-size: 11px;
            }

            .map-layer-controls .controls-collapse-btn {
                padding: 4px 6px;
                font-size: 14px;
            }

            .map-layer-controls .btn-label {
                font-size: 11px;
                margin-left: 6px;
            }

            .map-layer-controls .layer-toggle {
                font-size: 11px;
                padding: 2px 0;
            }

            .map-layer-controls .layer-toggle input {
                width: 14px;
                height: 14px;
                margin-right: 6px;
            }

            .map-layer-controls .layer-color-dot {
                width: 8px;
                height: 8px;
                margin-right: 6px;
            }

            .map-layer-controls .map-layer-controls-header {
                font-size: 9px;
                margin-bottom: 2px;
                padding-bottom: 4px;
            }

            .map-layer-controls .basemap-switcher {
                gap: 2px;
            }

            .map-layer-controls .basemap-btn {
                padding: 4px 6px;
                font-size: 9px;
            }

            .map-layer-controls .map-action-btn {
                padding: 6px 8px;
                font-size: 10px;
            }

            .map-shortcuts {
                gap: 2px;
            }


            .map-layer-controls.collapsed {
                min-width: 0 !important;
                width: auto !important;
                padding: 4px !important;
            }
        }

        .map-layer-controls.collapsed {
            padding: 8px;
            width: auto;
            min-width: 0;
            max-height: none;
            overflow: visible;
            flex-direction: column;
            /* Keep vertical when collapsed */
            align-items: center;
        }

        .map-layer-controls.collapsed .controls-content {
            display: none;
        }

        .map-layer-controls.collapsed .controls-divider {
            display: none;
        }

        .map-layer-controls.collapsed .dark-mode-toggle-row {
            flex-direction: column;
            gap: 8px;
            padding: 8px 0;
        }

        .map-layer-controls.collapsed .dark-mode-toggle-info {
            gap: 0;
        }

        /* Shortcuts Container */
        .map-shortcuts {
            display: flex;
            flex-direction: column;
            gap: 4px;
            width: 100%;
        }

        .map-layer-controls.collapsed .map-shortcuts {
            display: none !important;
        }

        /* Button Label */
        .btn-label {
            margin-left: 10px;
            font-size: 13px;
            font-weight: 500;
            white-space: nowrap;
        }

        .map-layer-controls.collapsed .btn-label {
            display: none;
        }

        .controls-header-row {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
        }

        .controls-collapse-btn {
            background: var(--bg-secondary);
            border: 1px solid var(--border-light);
            cursor: pointer;
            padding: var(--space-sm) var(--space-md);
            color: var(--color-gray-600);
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-medium);
            line-height: 1;
            border-radius: var(--radius-md);
            transition: all var(--transition-base);
            display: flex;
            align-items: center;
            justify-content: flex-start;
            width: 100%;
            box-shadow: var(--shadow-sm);
        }

        #overlay-mobile-tap-mode-divider,
        #overlay-mobile-tap-mode-btn {
            display: none;
        }

        .mobile-selection-section {
            display: none;
        }

        .map-layer-controls.collapsed .controls-collapse-btn {
            width: auto;
            padding: var(--space-sm);
            justify-content: center;
        }

        .controls-collapse-btn:hover {
            background: var(--bg-primary);
            color: var(--color-primary);
            border-color: var(--color-primary);
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }

        .controls-collapse-btn:active {
            transform: translateY(0);
        }

        .map-layer-controls.collapsed #controls-collapse-btn {
            transform: rotate(180deg);
        }

        .map-layer-controls.collapsed #controls-collapse-btn:hover {
            transform: rotate(180deg) scale(1.1);
        }

        .controls-collapse-btn svg {
            transition: transform var(--transition-base);
        }

        /* Mobile: Collapse controls into single downward caret icon */
        @media (max-width: 768px), (max-height: 600px) {
            .map-layer-controls.collapsed {
                padding: 6px !important;
                width: auto !important;
                min-width: 0 !important;
                border-radius: 12px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
            }

            .map-layer-controls.collapsed .controls-header-row {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 6px !important;
            }

            /* Hide all buttons except collapse + clear selection when collapsed on mobile */
            .map-layer-controls.collapsed .controls-header-row > button:not(#controls-collapse-btn):not(#overlay-clear-selection-btn):not(#overlay-mobile-tap-mode-btn) {
                display: none !important;
            }

            .map-layer-controls:not(.collapsed) #overlay-mobile-tap-mode-divider,
            .map-layer-controls:not(.collapsed) #overlay-mobile-tap-mode-btn {
                display: none !important;
            }

            .map-layer-controls #overlay-mobile-tap-mode-btn {
                display: flex !important;
                width: auto !important;
                min-width: 116px !important;
                height: 30px !important;
                padding: 0 10px !important;
                border-radius: 8px !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 6px !important;
                background: var(--bg-primary) !important;
                border: 1px solid var(--border-medium) !important;
                color: var(--color-gray-700) !important;
                font-size: 10px !important;
                font-weight: 700 !important;
                letter-spacing: 0.03em !important;
                text-transform: uppercase !important;
                white-space: nowrap !important;
            }

            .map-layer-controls #overlay-mobile-tap-mode-btn .mobile-tap-mode-label {
                display: inline !important;
            }

            .mobile-selection-section {
                display: block !important;
                width: 100%;
            }

            .mobile-selection-section .mobile-selection-toggle-btn {
                width: 100% !important;
                justify-content: center !important;
                gap: 8px !important;
            }

            /* Keep clear selection visible in collapsed mobile overlay */
            .map-layer-controls.collapsed #overlay-clear-selection-btn {
                width: 36px !important;
                height: 36px !important;
                padding: 0 !important;
                border-radius: 50% !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
            }

            .map-layer-controls.collapsed #overlay-mobile-tap-mode-divider {
                display: block !important;
                width: 100% !important;
                height: 1px !important;
                background: var(--border-light) !important;
                margin: 4px 0 2px !important;
                opacity: 0.9 !important;
            }

            .map-layer-controls.collapsed #overlay-mobile-tap-mode-btn {
                width: 36px !important;
                height: 36px !important;
                min-width: 36px !important;
                padding: 0 !important;
                border-radius: 50% !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 0 !important;
            }

            .map-layer-controls.collapsed #overlay-mobile-tap-mode-btn .mobile-tap-mode-label {
                display: none !important;
            }

            .map-layer-controls.collapsed .mobile-selection-section {
                display: none !important;
            }

            .map-layer-controls.collapsed #overlay-mobile-tap-mode-btn.mobile-select-mode-on {
                border-color: rgba(34, 197, 94, 0.6) !important;
                color: #22c55e !important;
                background: rgba(34, 197, 94, 0.12) !important;
            }

            .map-layer-controls.collapsed #overlay-mobile-tap-mode-btn.mobile-select-mode-off {
                border-color: rgba(59, 130, 246, 0.6) !important;
                color: #60a5fa !important;
                background: rgba(59, 130, 246, 0.12) !important;
            }

            /* Make collapse button circular and show only downward caret */
            .map-layer-controls.collapsed #controls-collapse-btn {
                width: 36px !important;
                height: 36px !important;
                padding: 0 !important;
                border-radius: 50% !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                transform: rotate(0deg) !important;
                background: var(--bg-primary) !important;
                border: 2px solid var(--border-medium) !important;
                box-shadow: var(--shadow-md) !important;
            }

            .map-layer-controls.collapsed #controls-collapse-btn:hover {
                transform: rotate(0deg) scale(1.1) !important;
            }

            .map-layer-controls.collapsed #controls-collapse-btn svg {
                width: 20px !important;
                height: 20px !important;
            }

            /* Hide dark mode toggle and shortcuts when collapsed on mobile */
            .map-layer-controls.collapsed .dark-mode-toggle-row,
            .map-layer-controls.collapsed .map-shortcuts {
                display: none !important;
            }

            /* When expanded on mobile, show all controls */
            .map-layer-controls:not(.collapsed) {
                width: 90% !important;
                max-width: 300px !important;
                max-height: calc(var(--app-vh, 100vh) - 40px) !important;
            }
        }

        .controls-content {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        /* Geolocation Overlay */
        .geolocate-overlay {
            position: absolute;
            bottom: calc(var(--overlay-utility-bottom, 160px) + env(safe-area-inset-bottom));
            left: calc(20px + env(safe-area-inset-left));
            top: auto;
            right: auto;
            z-index: 1000;
        }

        .geolocate-btn {
            width: 36px;
            height: 36px;
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.07) 100%);
            backdrop-filter: blur(18px) saturate(165%);
            -webkit-backdrop-filter: blur(18px) saturate(165%);
            border: 1px solid rgba(148, 163, 184, 0.36);
            border-radius: var(--radius-md);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all var(--transition-base);
            box-shadow:
                0 8px 18px rgba(2, 6, 23, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            color: var(--color-gray-700);
        }

        .geolocate-btn:hover {
            background: linear-gradient(160deg, rgba(201, 169, 98, 0.22) 0%, rgba(125, 211, 252, 0.1) 100%);
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 12px 22px rgba(2, 132, 199, 0.25);
            border-color: rgba(201, 169, 98, 0.62);
            color: var(--color-primary);
        }

        .geolocate-btn:active {
            transform: translateY(0) scale(1);
        }

        .streetview-overlay {
            position: absolute;
            bottom: calc(var(--overlay-utility-bottom, 160px) + 40px + env(safe-area-inset-bottom));
            left: calc(20px + env(safe-area-inset-left));
            top: auto;
            right: auto;
            z-index: 1000;
        }

        .streetview-btn {
            width: 36px;
            height: 36px;
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.07) 100%);
            backdrop-filter: blur(18px) saturate(165%);
            -webkit-backdrop-filter: blur(18px) saturate(165%);
            border: 1px solid rgba(148, 163, 184, 0.36);
            border-radius: var(--radius-md);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all var(--transition-base);
            box-shadow:
                0 8px 18px rgba(2, 6, 23, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            color: var(--color-gray-700);
        }

        .streetview-btn:hover {
            background: linear-gradient(160deg, rgba(201, 169, 98, 0.22) 0%, rgba(125, 211, 252, 0.1) 100%);
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 12px 22px rgba(2, 132, 199, 0.25);
            border-color: rgba(201, 169, 98, 0.62);
            color: var(--color-primary);
        }

        .streetview-btn:active {
            transform: translateY(0) scale(1);
        }

        .streetview-btn.active {
            background: linear-gradient(160deg, rgba(201, 169, 98, 0.76) 0%, rgba(14, 165, 233, 0.56) 100%);
            color: #f8fafc;
            border-color: rgba(186, 230, 253, 0.88);
            box-shadow:
                0 10px 24px rgba(2, 132, 199, 0.34),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
        }

        .streetview-btn.active:hover {
            background: linear-gradient(160deg, rgba(201, 169, 98, 0.82) 0%, rgba(14, 165, 233, 0.62) 100%);
            opacity: 0.9;
        }

        .geolocate-btn svg,
        .streetview-btn svg {
            width: 18px;
            height: 18px;
            stroke-width: 1.85;
        }

        .light-mode .geolocate-btn svg,
        .light-mode .streetview-btn svg {
            stroke-width: 1.7;
        }

        .dark-mode .geolocate-btn svg,
        .dark-mode .streetview-btn svg {
            stroke-width: 2;
        }

        .layer-subgroup-label {
            font-size: 9px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            color: var(--color-gray-500);
            padding: 6px 0 3px 0;
            opacity: 0.7;
        }

        .map-layer-controls-header {
            font-size: 11px;
            font-weight: 700;
            color: var(--color-gray-500);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 2px;
            padding-bottom: 6px;
            border-bottom: 1px solid var(--border-light);
        }

        .map-layer-controls-header--with-icon {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .map-layer-controls-header--with-icon svg {
            width: 12px;
            height: 12px;
            color: var(--color-gray-500);
            flex: none;
        }

        .map-layer-controls .layer-toggle {
            padding: 4px 0;
            transition: color 0.2s;
        }

        .map-layer-controls .layer-toggle:hover {
            color: var(--color-primary);
        }

        .map-layer-controls label.layer-toggle.fiscal-impact-active,
        .map-layer-controls label.layer-toggle:has(#lot-rebalance-visual-toggle:checked),
        html.fiscal-impact-active .map-layer-controls label.layer-toggle:has(#lot-rebalance-visual-toggle) {
            color: #c7ecff;
            background: linear-gradient(90deg, rgba(14, 116, 144, 0.34) 0%, rgba(30, 64, 175, 0.2) 100%);
            border-left: 2px solid rgba(56, 189, 248, 0.9);
            border-radius: 8px;
            padding: 6px 8px;
            margin: 2px 0;
        }

        .map-layer-controls label.layer-toggle.fiscal-impact-active .layer-color-dot.fiscal-impact,
        .map-layer-controls label.layer-toggle:has(#lot-rebalance-visual-toggle:checked) .layer-color-dot.fiscal-impact,
        html.fiscal-impact-active .map-layer-controls label.layer-toggle:has(#lot-rebalance-visual-toggle) .layer-color-dot.fiscal-impact {
            box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.5), 0 0 8px rgba(56, 189, 248, 0.55);
        }

        .color-mode-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 0;
            font-size: 12px;
            color: var(--color-gray-600);
        }

        .toggle-switch {
            position: relative;
            width: 36px;
            height: 20px;
            background: var(--color-gray-300);
            border-radius: 10px;
            cursor: pointer;
            transition: background 0.3s;
        }

        .toggle-switch.active {
            background: var(--color-primary);
        }

        .toggle-switch::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 16px;
            height: 16px;
            background: var(--color-white);
            border-radius: 50%;
            transition: transform 0.3s;
            box-shadow: var(--shadow-sm);
        }

        .toggle-switch.active::after {
            transform: translateX(16px);
        }

        .layer-color-dot {
            width: 10px;
            height: 10px;
            border-radius: 3px;
            margin-right: 0;
            flex-shrink: 0;
        }

        .layer-toggle-label {
            min-width: 0;
            overflow-wrap: anywhere;
            word-break: break-word;
            line-height: 1.2;
            flex: 1 1 auto;
        }

        .layer-color-dot.parcels {
            background: linear-gradient(135deg, #2563eb 20%, #52525b 20%, #52525b 40%, #06b6d4 40%, #06b6d4 60%, #ca8a04 60%, #ca8a04 80%, #7c3aed 80%);
            border: 1px solid var(--border-medium);
        }

        .layer-color-dot.TIF {
            background-color: #2563eb;
            border: 1px solid #1e3a8a;
        }

        .layer-color-dot.amendment {
            background-color: #0ea5e9;
            border: 1px solid #0c4a6e;
        }

        .layer-color-dot.four-corners-1-amendment {
            background-color: #f59e0b;
            border: 1px solid #78350f;
        }

        .layer-color-dot.four-corners-2-amendment {
            background-color: #8b5cf6;
            border: 1px solid #4c1d95;
        }

        .layer-color-dot.v2 {
            background-color: #7d4a8a;
            border: 1px solid #8e44ad;
        }

        .layer-color-dot.lot-signals {
            background: linear-gradient(135deg, #22c55e 0%, #16a34a 45%, #ef4444 55%, #dc2626 100%);
            border: 1px solid #14532d;
        }

        .layer-color-dot.change-heatmap {
            background: linear-gradient(135deg, #fde68a 0%, #f97316 45%, #ef4444 100%);
            border: 1px solid #7f1d1d;
        }

        .layer-color-dot.fiscal-impact {
            background: linear-gradient(135deg, #38bdf8 0%, #2563eb 48%, #10b981 100%);
            border: 1px solid #0f3f6e;
        }

        /* Fully tax-exempt parcels — matches PIATaxExempt.COLOR (#db2777). */
        .layer-color-dot.tax-exempt {
            background-color: #db2777;
            border: 1px solid #831843;
        }

        /* Parcel count shown after a layer name, e.g. "Tax Exempt   59". */
        .layer-toggle-count {
            margin-left: auto;
            padding-left: 10px;
            font-size: 0.85em;
            font-variant-numeric: tabular-nums;
            color: var(--color-gray-500);
        }

        .layer-color-dot.historical-performance {
            background: linear-gradient(135deg, #1d4ed8 0%, #16a34a 48%, #f59e0b 76%, #dc2626 100%);
            border: 1px solid #1e3a8a;
        }

        .historical-performance-controls {
            margin: 4px 0 6px 24px;
            padding: 8px;
            border-radius: 8px;
            border: 1px solid rgba(14, 165, 233, 0.22);
            background: linear-gradient(180deg, rgba(15, 23, 42, 0.5) 0%, rgba(30, 41, 59, 0.35) 100%);
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .historical-performance-label {
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            font-weight: 700;
            color: var(--color-gray-400);
        }

        .historical-performance-select {
            width: 100%;
            border-radius: 7px;
            border: 1px solid var(--border-medium);
            background: var(--bg-primary);
            color: var(--color-gray-100);
            padding: 6px 7px;
            font-size: 11px;
            font-weight: 600;
        }

        .historical-performance-legend {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .historical-performance-legend-title {
            font-size: 10px;
            font-weight: 700;
            color: var(--color-gray-300);
        }

        .historical-performance-ramp {
            height: 14px;
            border-radius: 7px;
            border: 1px solid rgba(59, 130, 246, 0.5);
            background: linear-gradient(90deg, #1d4ed8 0%, #3b82f6 18%, #93c5fd 34%, #f8fafc 50%, #bbf7d0 66%, #facc15 82%, #dc2626 100%);
            position: relative;
        }

        .historical-performance-ramp span {
            position: absolute;
            top: 16px;
            transform: translateX(-50%);
            font-size: 9px;
            color: var(--color-gray-400);
            white-space: nowrap;
            font-weight: 600;
        }

        .historical-performance-ramp span:nth-child(1) { left: 0%; transform: translateX(0); }
        .historical-performance-ramp span:nth-child(2) { left: 25%; }
        .historical-performance-ramp span:nth-child(3) { left: 50%; }
        .historical-performance-ramp span:nth-child(4) { left: 76%; }
        .historical-performance-ramp span:nth-child(5) { left: 100%; transform: translateX(-100%); }

        .historical-performance-coverage {
            margin-top: 14px;
            font-size: 10px;
            color: var(--color-gray-400);
            font-weight: 600;
        }

        .group-layer-toggle-row {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 4px 0;
        }

        /* Color swatch — the <input type="color"> is overlaid at full opacity=0 */
        .group-layer-color-swatch {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 12px;
            height: 12px;
            border-radius: 3px;
            flex-shrink: 0;
            cursor: pointer;
            position: relative;
            border: 1px solid rgba(255,255,255,0.25);
            transition: transform 0.1s, box-shadow 0.1s;
        }
        .group-layer-color-swatch:hover {
            transform: scale(1.3);
            box-shadow: 0 0 0 2px rgba(255,255,255,0.35);
        }

        .group-layer-remove-btn {
            margin-left: auto;
            flex-shrink: 0;
            background: none;
            border: none;
            cursor: pointer;
            color: var(--color-gray-400, #94a3b8);
            padding: 2px 4px;
            border-radius: 4px;
            font-size: 11px;
            line-height: 1;
            opacity: 0;
            transition: opacity 0.15s, color 0.15s, background 0.15s;
        }
        .group-layer-toggle-row:hover .group-layer-remove-btn {
            opacity: 1;
        }
        .group-layer-remove-btn:hover {
            color: #ef4444;
            background: rgba(239, 68, 68, 0.1);
        }

        .parcel-legend {
            display: flex;
            flex-direction: column;
            gap: 4px;
            padding: 8px 0;
            margin-left: 24px;
            font-size: 11px;
        }

        .parcel-legend-item {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--color-gray-600);
        }

        .parcel-legend-color {
            width: 12px;
            height: 12px;
            border-radius: 2px;
            flex-shrink: 0;
        }

        .parcel-legend-color.other {
            background-color: #7d4a8a;
        }

        .basemap-switcher {
            display: flex;
            flex-direction: column;
            gap: 4px;
            padding: 4px 0;
        }

        .basemap-btn {
            flex: none;
            width: 100%;
            padding: var(--space-sm) var(--space-sm);
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-semibold);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border: 1px solid var(--border-medium);
            background: var(--bg-secondary);
            color: var(--color-gray-700);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all var(--transition-base);
            box-shadow: var(--shadow-sm);
        }

        .basemap-btn:hover {
            background: var(--bg-primary);
            border-color: var(--color-primary);
            color: var(--color-primary);
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }

        .basemap-btn.active {
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
            color: var(--color-white);
            border-color: var(--color-primary);
            box-shadow: 0 0 8px rgba(52, 152, 219, 0.4), var(--shadow-md);
        }

        .map-action-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-sm);
            padding: var(--space-sm) var(--space-md);
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            border: 1px solid var(--border-medium);
            background: var(--bg-secondary);
            color: var(--color-gray-900);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all var(--transition-base);
            width: 100%;
            box-shadow: var(--shadow-sm);
        }

        .map-action-btn:hover {
            background: var(--bg-primary);
            border-color: var(--color-primary);
            color: var(--color-primary);
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }

        .map-action-btn:active {
            transform: translateY(0);
            box-shadow: var(--shadow-sm);
        }

        .map-action-btn svg {
            width: 14px;
            height: 14px;
            transition: transform var(--transition-base);
        }

        .map-action-btn:hover svg {
            transform: scale(1.1);
        }

        .controls-divider {
            height: 1px;
            background: var(--border-light);
            margin: 4px 0;
        }

        /* iOS-style frosted glass theme for map controls */
        .map-layer-controls {
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.08) 100%);
            backdrop-filter: blur(22px) saturate(165%);
            -webkit-backdrop-filter: blur(22px) saturate(165%);
            border: 1px solid rgba(255, 255, 255, 0.28);
            box-shadow:
                0 14px 36px rgba(2, 6, 23, 0.24),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
        }

        .dark-mode .map-layer-controls {
            background: linear-gradient(160deg, rgba(15, 23, 42, 0.62) 0%, rgba(15, 23, 42, 0.42) 100%);
            border-color: rgba(148, 163, 184, 0.32);
            box-shadow:
                0 16px 40px rgba(2, 6, 23, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }

        .light-mode .map-layer-controls {
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.78) 0%, rgba(241, 245, 249, 0.58) 100%);
            border-color: rgba(255, 255, 255, 0.9);
            box-shadow:
                0 16px 34px rgba(15, 23, 42, 0.16),
                inset 0 1px 0 rgba(255, 255, 255, 0.75);
        }

        .map-layer-controls .controls-collapse-btn,
        .map-layer-controls .basemap-btn,
        .map-layer-controls .map-action-btn,
        .map-layer-controls .layer-toggle {
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 100%);
            border-color: rgba(148, 163, 184, 0.32);
            box-shadow:
                0 6px 14px rgba(2, 6, 23, 0.16),
                inset 0 1px 0 rgba(255, 255, 255, 0.16);
        }

        .map-layer-controls .layer-toggle {
            border: 1px solid rgba(148, 163, 184, 0.32);
            border-radius: 10px;
            padding: 6px 8px;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            gap: 8px;
            overflow: hidden;
        }

        .light-mode .map-layer-controls .controls-collapse-btn,
        .light-mode .map-layer-controls .basemap-btn,
        .light-mode .map-layer-controls .map-action-btn,
        .light-mode .map-layer-controls .layer-toggle {
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.82) 0%, rgba(248, 250, 252, 0.64) 100%);
            border-color: rgba(148, 163, 184, 0.34);
            box-shadow:
                0 4px 10px rgba(15, 23, 42, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.72);
        }

        .map-layer-controls .controls-collapse-btn:hover,
        .map-layer-controls .basemap-btn:hover,
        .map-layer-controls .map-action-btn:hover,
        .map-layer-controls .layer-toggle:hover {
            border-color: rgba(201, 169, 98, 0.6);
            background: linear-gradient(160deg, rgba(201, 169, 98, 0.2) 0%, rgba(125, 211, 252, 0.1) 100%);
            box-shadow:
                0 10px 20px rgba(2, 132, 199, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.22);
        }

        .map-layer-controls .basemap-btn.active {
            background: linear-gradient(160deg, rgba(201, 169, 98, 0.72) 0%, rgba(14, 165, 233, 0.56) 100%);
            border-color: rgba(186, 230, 253, 0.8);
            color: #f8fafc;
            box-shadow:
                0 10px 24px rgba(2, 132, 199, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
        }

        .map-layer-controls-header {
            color: rgba(226, 232, 240, 0.85);
            border-bottom-color: rgba(148, 163, 184, 0.35);
        }

        .light-mode .map-layer-controls-header {
            color: rgba(51, 65, 85, 0.86);
            border-bottom-color: rgba(148, 163, 184, 0.4);
        }

        .map-layer-controls .controls-divider {
            background: linear-gradient(90deg, rgba(148, 163, 184, 0.08) 0%, rgba(148, 163, 184, 0.45) 50%, rgba(148, 163, 184, 0.08) 100%);
        }

        /* Toolbar bar itself: fully transparent, no blur, no tint */
        #toolbar,
        .dark-mode #toolbar,
        .light-mode #toolbar,
        #toolbar.is-glass-scrolled,
        .dark-mode #toolbar.is-glass-scrolled,
        .light-mode #toolbar.is-glass-scrolled {
            background: transparent !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            border-bottom: none !important;
            box-shadow: none !important;
        }

        .user-profile-chip {
            background: linear-gradient(160deg, rgba(71, 85, 105, 0.9) 0%, rgba(51, 65, 85, 0.82) 100%);
            border: 1px solid rgba(148, 163, 184, 0.38);
            border-radius: 12px;
            box-shadow:
                0 6px 16px rgba(2, 6, 23, 0.24),
                inset 0 1px 0 rgba(255, 255, 255, 0.22);
        }

        /* GIS unification: canonical Eliot blue glass-pill for toolbar buttons */
        #toolbar .btn-toggle {
            background: linear-gradient(160deg, rgba(30, 64, 110, 0.48) 0%, rgba(15, 42, 80, 0.32) 100%);
            border: 1px solid rgba(201, 169, 98, 0.25);
            border-radius: 10px;
            -webkit-backdrop-filter: blur(26px) saturate(180%);
            backdrop-filter: blur(26px) saturate(180%);
            box-shadow:
                0 6px 18px rgba(2, 6, 23, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.28);
            text-shadow: 0 1px 1px rgba(2, 6, 23, 0.5);
        }

        .light-mode .user-profile-chip,
        .light-mode #toolbar .btn-toggle {
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 250, 252, 0.94) 100%) !important;
            border-color: rgba(71, 85, 105, 0.42) !important;
            box-shadow:
                0 8px 18px rgba(15, 23, 42, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.88);
        }

        /* Keep brand area transparent so only chips appear to float */
        .brand,
        .light-mode .brand,
        .dark-mode .brand {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
        }

        #toolbar .btn-toggle:hover,
        .user-profile-chip:hover,
        .brand--interactive:hover {
            border-color: rgba(201, 169, 98, 0.6) !important;
            background: linear-gradient(160deg, rgba(201, 169, 98, 0.2) 0%, rgba(125, 211, 252, 0.1) 100%) !important;
            box-shadow:
                0 10px 20px rgba(2, 132, 199, 0.24),
                inset 0 1px 0 rgba(255, 255, 255, 0.26);
        }

        .navbar-sep {
            background: linear-gradient(180deg, rgba(148, 163, 184, 0.08) 0%, rgba(148, 163, 184, 0.5) 50%, rgba(148, 163, 184, 0.08) 100%) !important;
        }

        .map-search-overlay {
            background: linear-gradient(160deg, rgba(15, 23, 42, 0.18) 0%, rgba(15, 23, 42, 0.08) 100%);
            border: 1px solid rgba(148, 163, 184, 0.28);
            border-radius: 16px;
            backdrop-filter: blur(18px) saturate(165%);
            -webkit-backdrop-filter: blur(18px) saturate(165%);
            box-shadow:
                0 10px 24px rgba(2, 6, 23, 0.24),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }

        .light-mode .map-search-overlay {
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.74) 0%, rgba(241, 245, 249, 0.58) 100%);
            border-color: rgba(255, 255, 255, 0.9);
            box-shadow:
                0 10px 22px rgba(15, 23, 42, 0.14),
                inset 0 1px 0 rgba(255, 255, 255, 0.75);
        }

        .map-search-container .search-input {
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%);
            border: 1px solid rgba(148, 163, 184, 0.36);
            border-radius: 12px;
            box-shadow:
                0 6px 14px rgba(2, 6, 23, 0.16),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }

        .map-search-container .search-input:focus {
            border-color: rgba(201, 169, 98, 0.68);
            box-shadow:
                0 0 0 2px rgba(201, 169, 98, 0.2),
                0 10px 20px rgba(2, 132, 199, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.26);
        }

        .light-mode .map-search-container .search-input {
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.88) 0%, rgba(248, 250, 252, 0.68) 100%);
            border-color: rgba(148, 163, 184, 0.36);
            color: #0f172a;
        }

        .map-search-overlay,
        .map-layer-controls,
        #toolbar {
            isolation: isolate;
        }

        .map-search-overlay > *,
        .map-layer-controls > *,
        #toolbar > * {
            position: relative;
            z-index: 1;
        }

        #user-profile-dropdown {
            background: linear-gradient(160deg, rgba(15, 23, 42, 0.78) 0%, rgba(15, 23, 42, 0.58) 100%);
            border: 1px solid rgba(148, 163, 184, 0.34);
            backdrop-filter: blur(24px) saturate(170%);
            -webkit-backdrop-filter: blur(24px) saturate(170%);
            box-shadow:
                0 16px 36px rgba(2, 6, 23, 0.48),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

        .light-mode #user-profile-dropdown {
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.92) 0%, rgba(241, 245, 249, 0.78) 100%);
            border-color: rgba(148, 163, 184, 0.34);
            box-shadow:
                0 14px 30px rgba(15, 23, 42, 0.16),
                inset 0 1px 0 rgba(255, 255, 255, 0.82);
        }

        .upload-modal-content,
        .stack-ranking-modal,
        .stack-ranking-side-dock,
        #user-profile-dropdown {
            overflow: visible;
            isolation: isolate;
        }

        .upload-modal-content > *,
        .stack-ranking-modal > *,
        .stack-ranking-side-dock > *,
        #user-profile-dropdown > * {
            position: relative;
            z-index: 1;
        }

        #upload-modal {
            background: rgba(2, 6, 23, 0.48);
            backdrop-filter: blur(10px) saturate(145%);
            -webkit-backdrop-filter: blur(10px) saturate(145%);
        }

        .upload-modal-content {
            background: linear-gradient(160deg, rgba(15, 23, 42, 0.72) 0%, rgba(15, 23, 42, 0.54) 100%);
            border: 1px solid rgba(148, 163, 184, 0.34);
            box-shadow:
                0 18px 40px rgba(2, 6, 23, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(24px) saturate(170%);
            -webkit-backdrop-filter: blur(24px) saturate(170%);
        }

        .light-mode .upload-modal-content {
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.92) 0%, rgba(241, 245, 249, 0.76) 100%);
            border-color: rgba(148, 163, 184, 0.32);
            box-shadow:
                0 16px 34px rgba(15, 23, 42, 0.16),
                inset 0 1px 0 rgba(255, 255, 255, 0.84);
        }

        .stack-ranking-modal,
        .stack-ranking-side-dock {
            background: linear-gradient(160deg, rgba(15, 23, 42, 0.72) 0%, rgba(15, 23, 42, 0.52) 100%) !important;
            border-color: rgba(148, 163, 184, 0.32) !important;
            box-shadow:
                0 18px 40px rgba(2, 6, 23, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
            backdrop-filter: blur(22px) saturate(170%);
            -webkit-backdrop-filter: blur(22px) saturate(170%);
        }

        .light-mode .stack-ranking-modal,
        .light-mode .stack-ranking-side-dock {
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.9) 0%, rgba(241, 245, 249, 0.72) 100%) !important;
            border-color: rgba(148, 163, 184, 0.32) !important;
            box-shadow:
                0 16px 34px rgba(15, 23, 42, 0.16),
                inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
        }

        .user-profile-dropdown-item {
            border: 1px solid rgba(148, 163, 184, 0.24);
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }

        .light-mode .user-profile-dropdown-item {
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.72) 0%, rgba(248, 250, 252, 0.52) 100%);
            border-color: rgba(148, 163, 184, 0.24);
        }

        /* Ensure toolbar buttons stay readable in light-mode glass theme */
        .light-mode #toolbar .btn-toggle,
        .light-mode #toolbar .btn-toggle .btn-text,
        .light-mode #toolbar .btn-toggle svg {
            color: #0f172a !important;
        }

        .light-mode #toolbar .btn-toggle.active,
        .light-mode #toolbar .btn-toggle.dock-mode-dock,
        .light-mode #toolbar .btn-toggle.dock-mode-popup,
        .light-mode #toolbar .btn-toggle.dock-mode-off,
        .light-mode #toolbar #clear-selection-btn {
            color: #0f172a !important;
            border-color: rgba(201, 169, 98, 0.48) !important;
        }

        /* iOS glass treatment for Parcel Details surfaces */
        #dock-panel,
        .ol-popup {
            /* GIS unification: solid Eliot dock color (#16202d), no glass blur */
            background: #16202d !important;
            border-color: rgba(255, 255, 255, 0.12) !important;
            box-shadow: -10px 0 40px rgba(0, 0, 0, 0.40) !important;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }

        .light-mode #dock-panel,
        .light-mode .ol-popup {
            background:
                radial-gradient(130% 110% at 0% 0%, rgba(201, 169, 98, 0.14) 0%, rgba(201, 169, 98, 0) 52%),
                radial-gradient(130% 120% at 100% 100%, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0) 58%),
                linear-gradient(162deg, rgba(255, 255, 255, 0.9) 0%, rgba(241, 245, 249, 0.72) 100%) !important;
            border-color: rgba(148, 163, 184, 0.34) !important;
            box-shadow:
                0 16px 34px rgba(15, 23, 42, 0.16),
                inset 0 1px 0 rgba(255, 255, 255, 0.88),
                inset 0 -1px 0 rgba(148, 163, 184, 0.14) !important;
        }

        #dock-content .parcel-tip-shell,
        #popup-content .parcel-tip-shell {
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
            border: 1px solid rgba(148, 163, 184, 0.3);
            box-shadow:
                0 10px 24px rgba(2, 6, 23, 0.24),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
            overflow: visible;
            backdrop-filter: blur(22px) saturate(175%);
            -webkit-backdrop-filter: blur(22px) saturate(175%);
        }

        .light-mode #dock-content .parcel-tip-shell,
        .light-mode #popup-content .parcel-tip-shell {
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.84) 0%, rgba(248, 250, 252, 0.66) 100%);
            border-color: rgba(148, 163, 184, 0.26);
            box-shadow:
                0 8px 20px rgba(15, 23, 42, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.78);
        }

        #dock-content .tab-header--parcel,
        #popup-content .tab-header--parcel {
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
            border-bottom-color: rgba(148, 163, 184, 0.32);
            backdrop-filter: blur(14px) saturate(150%);
            -webkit-backdrop-filter: blur(14px) saturate(150%);
        }

        .light-mode #dock-content .tab-header--parcel,
        .light-mode #popup-content .tab-header--parcel {
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.76) 0%, rgba(241, 245, 249, 0.6) 100%);
        }

        #dock-content .tab-body,
        #popup-content .tab-body,
        #dock-content .metric-row-card,
        #popup-content .metric-row-card,
        #dock-content .parcel-tax-history-panel,
        #popup-content .parcel-tax-history-panel {
            background:
                linear-gradient(165deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.035) 100%) !important;
            border-color: rgba(148, 163, 184, 0.24);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.13),
                inset 0 -1px 0 rgba(148, 163, 184, 0.12);
        }

        #dock-content,
        #popup-content {
            background: transparent !important;
        }

        /* Improve Parcel Details text contrast over translucent glass (dark mode) */
        .dark-mode #dock-content .tab-header--parcel .tab-btn,
        .dark-mode #popup-content .tab-header--parcel .tab-btn {
            color: rgba(226, 232, 240, 0.9) !important;
            text-shadow: 0 1px 0 rgba(2, 6, 23, 0.35);
        }

        .dark-mode #dock-content .tab-header--parcel .tab-btn.active,
        .dark-mode #popup-content .tab-header--parcel .tab-btn.active {
            color: #f8fafc !important;
        }

        .dark-mode #dock-content #tab-assess h4,
        .dark-mode #popup-content #tab-assess h4 {
            color: rgba(203, 213, 225, 0.92) !important;
        }

        .dark-mode #dock-content #tab-assess .assess-grid-header,
        .dark-mode #popup-content #tab-assess .assess-grid-header {
            color: rgba(173, 184, 201, 0.96) !important;
        }

        .dark-mode #dock-content #tab-assess .assess-metric-label,
        .dark-mode #popup-content #tab-assess .assess-metric-label {
            color: rgba(226, 232, 240, 0.96) !important;
        }

        .dark-mode #dock-content #tab-assess .assess-year-header,
        .dark-mode #popup-content #tab-assess .assess-year-header {
            color: rgba(203, 213, 225, 0.98) !important;
        }

        .dark-mode #dock-content #tab-assess [data-change-mode-toggle][aria-pressed="false"],
        .dark-mode #popup-content #tab-assess [data-change-mode-toggle][aria-pressed="false"] {
            color: rgba(186, 200, 220, 0.92) !important;
        }

        .dark-mode #dock-content #tab-assess [data-change-mode-toggle][aria-pressed="true"],
        .dark-mode #popup-content #tab-assess [data-change-mode-toggle][aria-pressed="true"] {
            color: #e6f6ff !important;
        }

        /* Stronger readability for assessment table text on glass */
        .dark-mode #dock-content #tab-assess .assess-grid-header,
        .dark-mode #popup-content #tab-assess .assess-grid-header,
        .dark-mode #dock-content #tab-assess .assess-year-header,
        .dark-mode #popup-content #tab-assess .assess-year-header,
        .dark-mode #dock-content #tab-assess .assess-metric-label,
        .dark-mode #popup-content #tab-assess .assess-metric-label {
            color: rgba(241, 245, 249, 0.96) !important;
            text-shadow: 0 1px 0 rgba(2, 6, 23, 0.34);
        }

        .dark-mode #dock-content #tab-assess .assess-metrics-list .assess-col-2024,
        .dark-mode #popup-content #tab-assess .assess-metrics-list .assess-col-2024 {
            color: rgba(226, 232, 240, 0.94) !important;
            font-weight: 760 !important;
            text-shadow: 0 1px 0 rgba(2, 6, 23, 0.34);
        }

        .dark-mode #dock-content #tab-assess .assess-metrics-list .assess-col-2025,
        .dark-mode #popup-content #tab-assess .assess-metrics-list .assess-col-2025 {
            color: #f8fafc !important;
            font-weight: 820 !important;
            text-shadow: 0 1px 0 rgba(2, 6, 23, 0.34);
        }

        .dark-mode #dock-content #tab-assess .assess-metrics-list .assess-change-value,
        .dark-mode #popup-content #tab-assess .assess-metrics-list .assess-change-value {
            text-shadow: 0 1px 0 rgba(2, 6, 23, 0.34);
            font-weight: 800 !important;
        }

        .dark-mode #dock-content #tab-assess .assess-metrics-list .assess-change-value[style*="color: #22c55e"],
        .dark-mode #popup-content #tab-assess .assess-metrics-list .assess-change-value[style*="color: #22c55e"] {
            color: #22e07a !important;
        }

        .dark-mode #dock-content #tab-assess .assess-metrics-list .assess-change-value[style*="color: #ef4444"],
        .dark-mode #popup-content #tab-assess .assess-metrics-list .assess-change-value[style*="color: #ef4444"] {
            color: #ff4d5e !important;
        }

        /* Micro-interaction polish: iOS-like motion + press states */
        #dock-content .tab-btn,
        #popup-content .tab-btn,
        #dock-content #tab-assess [data-change-mode-toggle],
        #popup-content #tab-assess [data-change-mode-toggle],
        .map-layer-controls .controls-collapse-btn,
        .map-layer-controls .map-action-btn,
        .map-layer-controls .basemap-btn,
        .map-layer-controls .layer-toggle {
            transition:
                transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 220ms ease,
                background 220ms ease,
                border-color 220ms ease,
                color 200ms ease;
            will-change: transform;
        }

        #dock-content .tab-btn:hover,
        #popup-content .tab-btn:hover,
        #dock-content #tab-assess [data-change-mode-toggle]:hover,
        #popup-content #tab-assess [data-change-mode-toggle]:hover,
        .map-layer-controls .controls-collapse-btn:hover,
        .map-layer-controls .map-action-btn:hover,
        .map-layer-controls .basemap-btn:hover,
        .map-layer-controls .layer-toggle:hover {
            transform: translateY(-1px);
        }

        #dock-content .tab-btn:active,
        #popup-content .tab-btn:active,
        #dock-content #tab-assess [data-change-mode-toggle]:active,
        #popup-content #tab-assess [data-change-mode-toggle]:active,
        .map-layer-controls .controls-collapse-btn:active,
        .map-layer-controls .map-action-btn:active,
        .map-layer-controls .basemap-btn:active,
        .map-layer-controls .layer-toggle:active {
            transform: translateY(0) scale(0.985);
        }

        #dock-content #tab-assess .assess-metrics-list .assess-row,
        #popup-content #tab-assess .assess-metrics-list .assess-row,
        .stack-ranking-side-dock-body #tab-assess .assess-metrics-list .assess-row {
            transition:
                transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 220ms ease,
                border-color 220ms ease;
        }

        #dock-content #tab-assess .assess-metrics-list .assess-row:hover,
        #popup-content #tab-assess .assess-metrics-list .assess-row:hover {
            transform: translateY(-1px);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.14),
                0 10px 18px rgba(2, 6, 23, 0.18) !important;
        }

        #dock-content #tab-assess .assess-metrics-list .assess-row:active,
        #popup-content #tab-assess .assess-metrics-list .assess-row:active {
            transform: scale(0.997);
        }

        @media (prefers-reduced-motion: reduce) {
            #dock-content .tab-btn,
            #popup-content .tab-btn,
            #dock-content #tab-assess [data-change-mode-toggle],
            #popup-content #tab-assess [data-change-mode-toggle],
            .map-layer-controls .controls-collapse-btn,
            .map-layer-controls .map-action-btn,
            .map-layer-controls .basemap-btn,
            .map-layer-controls .layer-toggle,
            #dock-content #tab-assess .assess-metrics-list .assess-row,
            #popup-content #tab-assess .assess-metrics-list .assess-row {
                transition: none !important;
                transform: none !important;
                animation: none !important;
            }
        }

        /* Typography pass for multi-selection (Group Summary) panel */
        #dock-content .multi-select-summary,
        #popup-content .multi-select-summary {
            font-family: "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
            letter-spacing: 0.01em;
            line-height: 1.28;
        }

        #dock-content .multi-select-summary h3,
        #popup-content .multi-select-summary h3 {
            font-family: "SF Pro Display", "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
            font-weight: 780 !important;
            letter-spacing: -0.012em !important;
        }

        #dock-content .multi-select-summary h4,
        #popup-content .multi-select-summary h4 {
            font-weight: 720 !important;
            letter-spacing: 0.055em !important;
        }

        #dock-content .multi-select-summary .numeric-emphasis,
        #popup-content .multi-select-summary .numeric-emphasis {
            font-family: "SF Pro Display", "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
            font-weight: 760 !important;
            letter-spacing: -0.01em;
        }

        #dock-content .multi-select-summary li span:first-child,
        #popup-content .multi-select-summary li span:first-child {
            font-weight: 620 !important;
        }

        #dock-content .multi-select-summary .summary-text-chip,
        #popup-content .multi-select-summary .summary-text-chip {
            display: inline-flex;
            align-items: center;
            padding: 3px 8px;
            border-radius: 8px;
            border: 1px solid rgba(148, 163, 184, 0.28);
            background: rgba(15, 23, 42, 0.2);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }

        #dock-content .multi-select-summary .summary-section-title,
        #popup-content .multi-select-summary .summary-section-title {
            color: rgba(226, 232, 240, 0.9) !important;
            font-weight: 760 !important;
            letter-spacing: 0.05em !important;
        }

        #dock-content .multi-select-summary .summary-town-row-label,
        #popup-content .multi-select-summary .summary-town-row-label {
            color: rgba(224, 231, 255, 0.95) !important;
            font-weight: 680 !important;
        }

        #dock-content .multi-select-summary .summary-town-pct,
        #popup-content .multi-select-summary .summary-town-pct {
            color: #eef2ff !important;
            font-weight: 800 !important;
            letter-spacing: -0.01em !important;
        }

        #dock-content .multi-select-summary .summary-town-meta,
        #popup-content .multi-select-summary .summary-town-meta {
            color: rgba(224, 231, 255, 0.84) !important;
            font-weight: 620 !important;
        }

        #dock-content .multi-select-summary .summary-total-assessed-label,
        #popup-content .multi-select-summary .summary-total-assessed-label {
            color: #ecfdf5 !important;
            font-weight: 820 !important;
            letter-spacing: 0.04em !important;
        }

        #dock-content .multi-select-summary .summary-total-assessed-value,
        #popup-content .multi-select-summary .summary-total-assessed-value {
            color: #f0fdf4 !important;
            font-weight: 900 !important;
            letter-spacing: -0.01em !important;
        }

        #dock-content .multi-select-summary .summary-subsection-title,
        #popup-content .multi-select-summary .summary-subsection-title {
            color: rgba(226, 232, 240, 0.9) !important;
            font-weight: 760 !important;
            letter-spacing: 0.055em !important;
        }

        #dock-content .multi-select-summary .summary-avg-label,
        #popup-content .multi-select-summary .summary-avg-label {
            color: rgba(203, 213, 225, 0.9) !important;
            font-weight: 640 !important;
        }

        #dock-content .multi-select-summary .summary-avg-value,
        #popup-content .multi-select-summary .summary-avg-value {
            color: rgba(241, 245, 249, 0.97) !important;
            font-weight: 760 !important;
            letter-spacing: -0.008em !important;
            text-shadow: 0 1px 0 rgba(2, 6, 23, 0.34);
        }

        #dock-content .multi-select-summary .summary-avg-total-label,
        #popup-content .multi-select-summary .summary-avg-total-label {
            color: #f1f5f9 !important;
            font-weight: 760 !important;
        }

        #dock-content .multi-select-summary .summary-avg-total-value,
        #popup-content .multi-select-summary .summary-avg-total-value {
            color: #f8fafc !important;
            font-weight: 820 !important;
            letter-spacing: -0.01em !important;
            text-shadow: 0 1px 0 rgba(2, 6, 23, 0.36);
        }

        #dock-content .multi-select-summary .summary-per-acre-label,
        #popup-content .multi-select-summary .summary-per-acre-label {
            font-weight: 760 !important;
            letter-spacing: 0.025em !important;
            text-shadow: 0 1px 0 rgba(2, 6, 23, 0.28);
        }

        #dock-content .multi-select-summary .summary-per-acre-value,
        #popup-content .multi-select-summary .summary-per-acre-value {
            font-weight: 840 !important;
            letter-spacing: -0.01em !important;
            text-shadow: 0 1px 0 rgba(2, 6, 23, 0.36);
        }

        .dark-mode #dock-content .multi-select-summary .summary-avg-value,
        .dark-mode #popup-content .multi-select-summary .summary-avg-value,
        .dark-mode #dock-content .multi-select-summary .summary-avg-total-value,
        .dark-mode #popup-content .multi-select-summary .summary-avg-total-value {
            color: #f8fafc !important;
        }

        .dark-mode #dock-content .multi-select-summary .summary-per-acre-value,
        .dark-mode #popup-content .multi-select-summary .summary-per-acre-value {
            color: #ffffff !important;
        }

        @media (max-width: 768px) {
            #dock-content .multi-select-summary,
            #popup-content .multi-select-summary {
                font-size: 14px;
                line-height: 1.24;
            }
        }

        #dock-content #tab-assess .assess-metrics-list .assess-row,
        #popup-content #tab-assess .assess-metrics-list .assess-row {
            background: linear-gradient(165deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%) !important;
            border-color: rgba(148, 163, 184, 0.22) !important;
            backdrop-filter: blur(16px) saturate(160%);
            -webkit-backdrop-filter: blur(16px) saturate(160%);
        }

        #dock-content #tab-assess .assess-metrics-list .assess-value-cell,
        #dock-content #tab-assess .assess-metrics-list .assess-change-value,
        #popup-content #tab-assess .assess-metrics-list .assess-value-cell,
        #popup-content #tab-assess .assess-metrics-list .assess-change-value,
        .stack-ranking-side-dock-body #tab-assess .assess-metrics-list .assess-value-cell,
        .stack-ranking-side-dock-body #tab-assess .assess-metrics-list .assess-change-value {
            background: linear-gradient(160deg, rgba(148, 163, 184, 0.13) 0%, rgba(148, 163, 184, 0.05) 100%) !important;
            border-color: rgba(148, 163, 184, 0.26) !important;
            backdrop-filter: blur(10px) saturate(150%);
            -webkit-backdrop-filter: blur(10px) saturate(150%);
        }

        #dock-content #tab-assess .assess-metrics-list .assess-col-2025,
        #popup-content #tab-assess .assess-metrics-list .assess-col-2025,
        .stack-ranking-side-dock-body #tab-assess .assess-metrics-list .assess-col-2025 {
            background: linear-gradient(160deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.06) 100%) !important;
            border-color: rgba(34, 197, 94, 0.35) !important;
        }

        #dock-content #tab-assess .assess-grid-header .assess-year-header,
        #popup-content #tab-assess .assess-grid-header .assess-year-header,
        .stack-ranking-side-dock-body #tab-assess .assess-grid-header .assess-year-header {
            backdrop-filter: blur(10px) saturate(145%);
            -webkit-backdrop-filter: blur(10px) saturate(145%);
        }

        .light-mode #dock-content .tab-body,
        .light-mode #popup-content .tab-body,
        .light-mode .stack-ranking-side-dock-body .tab-body {
            background:
                linear-gradient(165deg, rgba(255, 255, 255, 0.86) 0%, rgba(248, 250, 252, 0.72) 100%) !important;
            border-color: rgba(148, 163, 184, 0.22) !important;
        }

        #dock-content .parcel-header-surface:not([data-has-image="true"]),
        #popup-content .parcel-header-surface:not([data-has-image="true"]),
        .stack-ranking-side-dock-body .parcel-header-surface:not([data-has-image="true"]) {
            background:
                radial-gradient(120% 90% at 0% 0%, rgba(125, 211, 252, 0.26) 0%, rgba(125, 211, 252, 0) 56%),
                linear-gradient(160deg, rgba(30, 41, 59, 0.44) 0%, rgba(15, 23, 42, 0.26) 100%) !important;
            backdrop-filter: blur(14px) saturate(160%);
            -webkit-backdrop-filter: blur(14px) saturate(160%);
        }

        /* Slightly smaller Parcel Details typography */
        #dock-content .tab-btn,
        #popup-content .tab-btn,
        .stack-ranking-side-dock-body .tab-btn {
            font-size: 11.5px !important;
        }

        #dock-content .tab-header--parcel,
        #popup-content .tab-header--parcel,
        .stack-ranking-side-dock-body .tab-header--parcel {
            padding-left: 0 !important;
            padding-right: 0 !important;
            margin: 0 !important;
        }

        #dock-content .tab-header--parcel .tab-btn,
        #popup-content .tab-header--parcel .tab-btn,
        .stack-ranking-side-dock-body .tab-header--parcel .tab-btn {
            min-height: 34px !important;
            padding: 6px 3px !important;
            font-size: 9px !important;
            line-height: 1.05 !important;
            letter-spacing: 0.04em !important;
            white-space: nowrap !important;
            word-break: normal !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            margin: 0 !important;
            position: relative;
        }

        /* Dock rendering stability: keep glass at panel level, reduce per-row compositor churn. */
        #dock-panel {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        #dock-content {
            background: var(--bg-primary) !important;
            isolation: isolate;
            contain: none;
            overscroll-behavior: contain;
        }

        /* Impact mode: override dock interior background so the tint is visible throughout */
        html.fiscal-impact-active #dock-panel #dock-content {
            background: linear-gradient(180deg,
                rgba(7, 40, 61, 0.96) 0%,
                rgba(18, 40, 100, 0.92) 38%,
                rgba(10, 78, 72, 0.88) 100%) !important;
        }

        html.fiscal-impact-active #dock-panel .dock-header {
            background: rgba(4, 24, 44, 0.84) !important;
            border-bottom-color: rgba(34, 211, 238, 0.28) !important;
        }

        html.fiscal-impact-active #dock-panel #dock-content .tab-body {
            background: transparent !important;
            border-color: rgba(34, 211, 238, 0.12) !important;
        }

        html.fiscal-impact-active #dock-panel #dock-content .parcel-header-surface:not([data-has-image="true"]) {
            background:
                radial-gradient(110% 80% at 0% 0%, rgba(34, 211, 238, 0.22) 0%, rgba(34, 211, 238, 0) 54%),
                linear-gradient(160deg, rgba(7, 40, 61, 0.7) 0%, rgba(18, 40, 100, 0.5) 100%) !important;
        }

        html.fiscal-impact-active #dock-panel #dock-content .tab-btn.active {
            border-bottom-color: rgba(34, 211, 238, 0.9) !important;
            color: #7dd3fc !important;
        }

        /* Light mode impact dock interior */
        .light-mode.fiscal-impact-active #dock-panel #dock-content {
            background: linear-gradient(180deg,
                rgba(207, 250, 254, 0.98) 0%,
                rgba(219, 234, 254, 0.96) 45%,
                rgba(204, 251, 241, 0.94) 100%) !important;
        }

        .light-mode.fiscal-impact-active #dock-panel .dock-header {
            background: rgba(186, 230, 253, 0.92) !important;
            border-bottom-color: rgba(14, 116, 144, 0.32) !important;
        }

        .light-mode.fiscal-impact-active #dock-panel #dock-content .tab-body {
            background: transparent !important;
        }

        .light-mode.fiscal-impact-active #dock-panel #dock-content .tab-btn.active {
            border-bottom-color: #0284c7 !important;
            color: #0369a1 !important;
        }

        #dock-content .parcel-tip-shell {
            overflow: visible !important;
        }

        #dock-content .tab-content {
            contain: none;
            position: relative;
            z-index: 0;
        }

        /* Remove residual full-width seam artifacts in dock body rendering. */
        #dock-content .tab-body {
            box-shadow: none !important;
            border-color: transparent !important;
            background: var(--bg-primary) !important;
        }

        html.fiscal-impact-active #dock-panel #dock-content .tab-body {
            box-shadow: none !important;
            background: transparent !important;
        }

        #dock-content .tab-header--parcel {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            will-change: auto !important;
        }

        #dock-content #tab-assess .assess-metrics-list .assess-row,
        #dock-content #tab-assess .assess-metrics-list .assess-value-cell,
        #dock-content #tab-assess .assess-metrics-list .assess-change-value,
        #dock-content #tab-assess .assess-grid-header .assess-year-header {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            will-change: auto !important;
        }

        #dock-content .tab-btn,
        #dock-content #tab-assess [data-change-mode-toggle] {
            will-change: auto !important;
        }

        #dock-content .tab-btn:hover,
        #dock-content #tab-assess [data-change-mode-toggle]:hover,
        #dock-content #tab-assess .assess-metrics-list .assess-row:hover,
        #dock-content .tab-btn:active,
        #dock-content #tab-assess [data-change-mode-toggle]:active,
        #dock-content #tab-assess .assess-metrics-list .assess-row:active {
            transform: none !important;
        }

        #dock-content #tab-assess .assess-metrics-list .assess-row:hover {
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.14),
                0 4px 10px rgba(2, 6, 23, 0.12) !important;
        }

        #dock-content .tab-header--parcel .tab-btn:not(:first-child)::after,
        #popup-content .tab-header--parcel .tab-btn:not(:first-child)::after,
        .stack-ranking-side-dock-body .tab-header--parcel .tab-btn:not(:first-child)::after {
            content: "|";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(148, 163, 184, 0.72);
            font-size: 10px;
            font-weight: 700;
            line-height: 1;
            pointer-events: none;
        }

        #dock-content .tab-body,
        #popup-content .tab-body,
        .stack-ranking-side-dock-body .tab-body {
            font-size: 14px;
        }

        #dock-content .tab-body h4,
        #popup-content .tab-body h4,
        .stack-ranking-side-dock-body .tab-body h4 {
            font-size: 11px !important;
        }

        .light-mode #dock-content .parcel-header-surface:not([data-has-image="true"]),
        .light-mode #popup-content .parcel-header-surface:not([data-has-image="true"]),
        .light-mode .stack-ranking-side-dock-body .parcel-header-surface:not([data-has-image="true"]) {
            background:
                radial-gradient(120% 90% at 0% 0%, rgba(201, 169, 98, 0.14) 0%, rgba(201, 169, 98, 0) 56%),
                linear-gradient(160deg, rgba(255, 255, 255, 0.68) 0%, rgba(241, 245, 249, 0.48) 100%) !important;
        }

        /* Softer tab indicator + flatter liquid cards for Parcel Details */
        #dock-content .tab-btn.active,
        #popup-content .tab-btn.active,
        .stack-ranking-side-dock-body .tab-btn.active {
            box-shadow: inset 0 -2px 0 0 rgba(125, 211, 252, 0.65) !important;
            background: linear-gradient(160deg, rgba(201, 169, 98, 0.14) 0%, rgba(125, 211, 252, 0.07) 100%) !important;
        }

        #dock-content .tab-btn::before,
        #popup-content .tab-btn::before,
        .stack-ranking-side-dock-body .tab-btn::before {
            height: 2px;
            opacity: 0.75;
        }

        #dock-content .metric-row-card,
        #popup-content .metric-row-card,
        #dock-content .parcel-tax-history-panel,
        #popup-content .parcel-tax-history-panel,
        .stack-ranking-side-dock-body .metric-row-card,
        .stack-ranking-side-dock-body .parcel-tax-history-panel {
            border-color: rgba(148, 163, 184, 0.18) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.08),
                0 4px 12px rgba(2, 6, 23, 0.14) !important;
        }

        .light-mode #dock-content .metric-row-card,
        .light-mode #popup-content .metric-row-card,
        .light-mode #dock-content .parcel-tax-history-panel,
        .light-mode #popup-content .parcel-tax-history-panel,
        .light-mode .stack-ranking-side-dock-body .metric-row-card,
        .light-mode .stack-ranking-side-dock-body .parcel-tax-history-panel {
            border-color: rgba(148, 163, 184, 0.16) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.74),
                0 3px 10px rgba(15, 23, 42, 0.08) !important;
        }

        /* ===== HELP OVERLAY ===== */
        #shortcuts-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(15, 23, 42, 0.44);
            z-index: var(--z-toast);
            display: none;
            justify-content: center;
            align-items: flex-start;
            padding: 145px 24px 24px;
            animation: fadeIn var(--transition-base) ease;
        }

        #shortcuts-modal.show {
            display: flex;
        }

        .help-nav-annotations {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 1;
        }

        .help-nav-item {
            position: absolute;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            color: #ffffff;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.02em;
            text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
            max-width: 132px;
            text-align: center;
            line-height: 1.2;
        }

        .help-nav-item .help-arrow {
            font-size: 16px;
            line-height: 1;
        }

        .help-nav-item.glow .help-arrow,
        .help-nav-item.glow span:last-child {
            animation: helpArrowGlowPulse 0.8s ease-in-out 2;
        }

        @keyframes helpArrowGlowPulse {
            0% {
                opacity: 0.9;
                text-shadow: 0 0 0 rgba(201, 169, 98, 0);
                transform: translateY(0);
            }

            50% {
                opacity: 1;
                text-shadow: 0 0 12px rgba(201, 169, 98, 0.95), 0 0 22px rgba(59, 130, 246, 0.85);
                transform: translateY(-1px);
            }

            100% {
                opacity: 1;
                text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
                transform: translateY(0);
            }
        }

        .shortcuts-content {
            position: relative;
            z-index: 2;
            background: var(--bg-primary);
            border-radius: 14px;
            box-shadow: var(--shadow-xl);
            border: 1px solid var(--border-medium);
            width: min(860px, 94vw);
            max-height: min(72vh, 760px);
            overflow-y: auto;
            animation: modalSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            display: flex;
            flex-direction: column;
        }

        @keyframes modalSlideUp {
            from {
                opacity: 0;
                transform: translateY(24px) scale(0.98);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .shortcuts-header {
            padding: 18px 22px;
            border-bottom: 1px solid var(--border-light);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .shortcuts-header h2 {
            margin: 0;
            font-size: 20px;
            font-weight: 700;
            color: var(--color-dark-alt);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .shortcuts-header h2 svg {
            width: 22px;
            height: 22px;
            color: var(--color-primary);
        }

        .help-title-mobile {
            display: none;
        }

        .shortcuts-close {
            background: transparent;
            border: 1px solid var(--border-medium);
            border-radius: 8px;
            color: var(--color-gray-500);
            cursor: pointer;
            width: 34px;
            height: 34px;
            font-size: 24px;
            line-height: 1;
        }

        .shortcuts-close:hover {
            color: var(--color-gray-900);
            background: var(--bg-secondary);
        }

        .shortcuts-body {
            padding: 18px 20px;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
            align-content: start;
            flex: 1;
        }

        .shortcuts-column {
            display: grid;
            gap: 12px;
            align-content: start;
        }

        .shortcuts-section {
            border: 1px solid var(--border-light);
            border-radius: 10px;
            padding: 10px 12px;
        }

        .shortcuts-section-title {
            font-size: 11px;
            font-weight: 800;
            color: var(--color-gray-500);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin-bottom: 8px;
        }

        .shortcut-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 0;
        }

        .shortcut-desc {
            color: var(--color-gray-700);
            font-size: 13px;
            font-weight: 600;
        }

        .shortcut-keys {
            display: flex;
            gap: 4px;
            align-items: center;
        }

        .key {
            background: var(--bg-secondary);
            border: 1px solid var(--border-medium);
            border-radius: 4px;
            padding: 3px 7px;
            font-size: 12px;
            font-family: var(--font-family-mono);
            font-weight: 700;
            color: var(--color-gray-900);
            min-width: 24px;
            text-align: center;
        }

        .key-plus {
            color: var(--color-gray-400);
            font-size: 12px;
            font-weight: 700;
        }

        .shortcuts-footer {
            padding: 12px 16px 14px;
            border-top: 1px solid var(--border-light);
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: var(--color-gray-600);
        }

        .shortcuts-footer-mobile-text {
            display: none;
        }

        .help-dismiss-row {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 600;
            color: var(--color-gray-700);
            cursor: pointer;
            user-select: none;
        }

        .help-dismiss-row input {
            width: 15px;
            height: 15px;
            cursor: pointer;
        }

        @media (max-width: 880px) {
            .help-nav-item {
                display: none;
            }
        }

        @media (max-width: 980px) {
            #shortcuts-modal {
                padding: 76px 16px 16px;
                align-items: flex-start;
            }

            .shortcuts-content {
                width: min(620px, 94vw);
                max-height: 80vh;
            }

            .shortcuts-body {
                grid-template-columns: 1fr;
            }
        }

        .mobile-help-panel {
            display: none;
        }

        body.touch-device #shortcuts-modal .shortcuts-column {
            display: none;
        }

        body.touch-device #shortcuts-modal .shortcuts-body {
            grid-template-columns: 1fr;
            gap: 0;
        }

        body.touch-device #shortcuts-modal .help-title-desktop {
            display: none;
        }

        body.touch-device #shortcuts-modal .help-title-mobile {
            display: inline;
        }

        body.touch-device #shortcuts-modal .mobile-help-panel {
            display: grid;
            gap: 12px;
        }

        body.touch-device #shortcuts-modal .shortcuts-footer-desktop-text {
            display: none;
        }

        body.touch-device #shortcuts-modal .shortcuts-footer-mobile-text {
            display: block;
        }

        .mobile-help-card {
            border: 1px solid var(--border-light);
            border-radius: 12px;
            padding: 14px;
            background: var(--bg-secondary);
        }

        .mobile-help-card h3 {
            margin: 0 0 8px 0;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--color-gray-600);
        }

        .mobile-help-card p {
            margin: 0;
            color: var(--color-gray-700);
            font-size: 14px;
            line-height: 1.45;
            font-weight: 600;
        }

        .mobile-nav-swipe-demo {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: var(--color-dark-alt);
            font-weight: 700;
            padding: 10px 12px;
            border-radius: 10px;
            background: var(--bg-primary);
            border: 1px solid var(--border-light);
        }

        .mobile-nav-swipe-demo .mobile-nav-swipe-text {
            animation: scroll-hint-text-pulse 1.5s ease-in-out infinite;
        }

        .mobile-nav-swipe-demo .scroll-hint-hand {
            width: 22px;
            height: 22px;
        }

        .hint-text {
            color: var(--color-gray-500);
            font-size: 0.85em;
            margin-right: 20px;
            display: none;
            /* Hide by default, will rely on toast instead */
        }

        #file-name-display {
            font-style: italic;
            color: var(--color-gray-500);
            font-size: 0.9em;
        }

        .stats {
            margin-left: auto;
            font-size: 0.9em;
        }

        .toolbar-stats {
            display: none;
            align-items: center;
            gap: 8px;
        }

        .toolbar-stats-count {
            font-weight: 800;
            color: var(--color-primary);
            font-size: 14px;
        }

        .toolbar-stats-label {
            font-size: 10px;
            color: var(--color-gray-500);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .user-profile-chip {
            display: none;
            align-items: center;
            gap: 6px;
            margin-right: 8px;
            padding: 4px 8px;
            background: var(--bg-secondary);
            border-radius: 8px;
            border: 1px solid var(--border-light);
            flex-shrink: 0;
            position: relative;
        }

        .user-profile-avatar {
            width: 28px;
            height: 28px;
            background: var(--bg-tertiary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1.5px solid var(--border-medium);
            position: relative;
        }

        .user-profile-avatar svg {
            width: 14px;
            height: 14px;
            color: var(--color-gray-600);
        }

        .user-role-dot {
            position: absolute;
            bottom: -1px;
            right: -1px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            border: 1.5px solid var(--bg-primary);
            background: var(--color-primary-light);
        }

        .controls-divider-wide {
            width: 100%;
            margin: 6px 0;
        }

        .controls-divider-compact {
            width: 100%;
            margin: 4px 0;
        }

        .calc-chart-section--tight {
            padding-top: 10px;
        }

        .calc-chart-title--compact {
            margin-bottom: 5px;
        }

        .growth-scope-badge {
            display: inline-flex;
            align-items: center;
            margin-left: 10px;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            background: rgba(34, 197, 94, 0.18);
            border: 1px solid rgba(34, 197, 94, 0.45);
            color: #bbf7d0;
        }

        #row-count {
            font-weight: 800;
            color: var(--color-primary);
        }

        .ol-popup {
            position: absolute;
            background: var(--bg-primary);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            box-shadow: var(--shadow-xl), 0 0 0 1px var(--border-light);
            border-radius: var(--radius-xl);
            border: 1px solid var(--border-medium);
            bottom: 12px;
            left: -50px;
            min-width: 360px;
            z-index: 1000;
            overflow: hidden;
            pointer-events: auto;
            animation: popupSlideUp 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        /* Enable container-query based responsive popup internals */
        #popup-content {
            container-type: inline-size;
        }

        /* Enable container-query based responsive dock internals */
        #dock-content {
            container-type: inline-size;
        }

        @keyframes popupSlideUp {
            from {
                opacity: 0;
                transform: translateY(10px) scale(0.98);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .ol-popup-closer {
            text-decoration: none;
            position: absolute;
            top: var(--space-sm);
            right: var(--space-sm);
            color: var(--color-gray-400);
            font-size: 22px;
            font-weight: bold;
            cursor: pointer;
            z-index: 10000;
            line-height: 32px;
            width: 32px;
            height: 32px;
            text-align: center;
            border-radius: var(--radius-md);
            transition: all var(--transition-base);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .ol-popup-closer:hover {
            color: var(--color-accent-red);
            background-color: rgba(231, 76, 60, 0.1);
            transform: scale(1.1);
        }

        .ol-popup-docker {
            text-decoration: none;
            position: absolute;
            top: var(--space-sm);
            right: 44px;
            color: var(--color-gray-400);
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            z-index: 10000;
            line-height: 32px;
            width: 32px;
            height: 32px;
            text-align: center;
            border-radius: var(--radius-md);
            transition: all var(--transition-base);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .ol-popup-docker:hover {
            color: var(--color-primary);
            background-color: rgba(52, 152, 219, 0.1);
            transform: scale(1.1);
        }

        .parcel-tip {
            font-family: var(--font-family);
            background-color: var(--bg-tertiary);
            width: 100%;
            font-size: var(--font-size-sm);
            line-height: 1.5;
            display: flex;
            flex-direction: column;
        }

        /* ── Multi-payer section (condo/PUD/time-share/mobile-home/multi-tenant) ── */
        .mp-chip {
            display: inline-flex; align-items: center; gap: 5px;
            padding: 5px 11px; border-radius: 999px;
            font-size: 11px; font-weight: 800; letter-spacing: 0.03em;
            margin-bottom: 10px;
        }
        .mp-chip.pc-condo               { background: rgba(56,189,248,0.15); border: 1px solid rgba(56,189,248,0.4); color: #38bdf8; }
        .mp-chip.pc-time_share          { background: rgba(168,85,247,0.15); border: 1px solid rgba(168,85,247,0.4); color: #a855f7; }
        .mp-chip.pc-pud                 { background: rgba(20,184,166,0.15); border: 1px solid rgba(20,184,166,0.4); color: #14b8a6; }
        .mp-chip.pc-mobile_home_pad     { background: rgba(251,191,36,0.15); border: 1px solid rgba(251,191,36,0.4); color: #d97706; }
        .mp-chip.pc-multi_tenant_commercial { background: rgba(74,222,128,0.15); border: 1px solid rgba(74,222,128,0.4); color: #16a34a; }
        .mp-chip.pc-other               { background: rgba(148,163,184,0.12); border: 1px solid rgba(148,163,184,0.28); color: var(--color-gray-500); }
        .mp-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-light); }
        .mp-totals {
            display: grid; grid-template-columns: 1fr auto;
            gap: 4px 10px; margin-bottom: 12px;
            padding: 10px 12px;
            background: var(--bg-secondary); border-radius: 8px;
            border: 1px solid var(--border-light); font-size: 12px;
        }
        .mp-totals dt { color: var(--color-gray-500); font-weight: 500; }
        .mp-totals dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
        .mp-payers-hdr {
            font-size: 10px; font-weight: 800; text-transform: uppercase;
            letter-spacing: .06em; color: var(--color-gray-500); margin-bottom: 6px;
            display: flex; align-items: center; justify-content: space-between;
        }
        .mp-search {
            width: 100%; box-sizing: border-box;
            padding: 5px 9px; margin-bottom: 6px;
            background: var(--bg-secondary); border: 1px solid var(--border-light);
            border-radius: 6px; color: var(--color-gray-800); font: inherit; font-size: 11px;
            outline: none;
        }
        .mp-search:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb, 201, 169, 98),0.15); }
        .mp-payers-list {
            max-height: 280px; overflow-y: auto;
            border: 1px solid var(--border-light); border-radius: 8px;
            background: var(--bg-secondary);
        }
        .mp-payer-row {
            display: flex; align-items: center; gap: 6px;
            padding: 5px 10px; border-bottom: 1px solid var(--border-light);
            font-size: 11px; cursor: default; text-decoration: none; color: inherit;
        }
        .mp-payer-row:last-child { border-bottom: 0; }
        .mp-payer-row:hover { background: rgba(var(--color-primary-rgb, 201, 169, 98),0.07); }
        a.mp-payer-row { color: inherit; }
        .mp-payer-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
        .mp-payer-acct { color: var(--color-gray-400); white-space: nowrap; font-size: 10px; }
        .mp-payer-tax  { font-weight: 700; white-space: nowrap; min-width: 54px; text-align: right; color: var(--color-primary); font-variant-numeric: tabular-nums; }

        /* Tabulator Custom Styles */
        .tabulator {
            border: none;
            background-color: transparent;
        }

        .tabulator .tabulator-header {
            font-weight: 700;
            color: var(--color-dark);
            background-color: var(--bg-secondary);
            border-bottom: 1px solid var(--border-light);
        }

        .tabulator .tabulator-header .tabulator-col {
            background-color: var(--bg-secondary);
            border-right: 1px solid var(--border-light);
        }

        .tabulator-row {
            border-bottom: 1px solid var(--border-light);
            background-color: var(--bg-primary);
        }

        .tabulator-row.tabulator-selected {
            background-color: #fef3c7 !important;
            color: #92400e !important;
        }

        .tabulator-row.tabulator-selected:hover {
            background-color: #fde68a !important;
        }

        .tabulator-row.tabulator-selectable:hover {
            background-color: var(--bg-secondary);
            cursor: pointer;
        }

        .tabulator-row.tabulator-selected .tabulator-cell {
            border-right: 1px solid #fde68a;
        }

        /* Hide filters by default until class is added */
        .tabulator .tabulator-header .tabulator-header-filter {
            display: none;
        }

        .filters-visible .tabulator .tabulator-header .tabulator-header-filter {
            display: block;
        }

        .parcel-header {
            padding: var(--space-lg) var(--space-xl) var(--space-md) var(--space-xl);
            background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
            border-bottom: 1px solid var(--border-light);
        }

        .parcel-header h3 {
            margin: 0;
            color: var(--color-dark-alt);
            font-size: var(--font-size-md);
            font-weight: var(--font-weight-semibold);
            padding-right: 70px;
        }

        .parcel-header p {
            margin: var(--space-xs) 0 0 0;
            color: var(--color-gray-500);
            font-size: var(--font-size-base);
        }

        /* Enhanced Image Container Styles */
        .hidden {
            display: none !important;
        }

        .popup-image-container {
            width: 100%;
            height: 180px;
            overflow: hidden;
            background-color: var(--bg-secondary);
            position: relative;
            border-bottom: 1px solid var(--border-light);
            cursor: pointer;
        }

        .popup-image-container.no-image {
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #2563eb 0%, #52525b 100%);
        }

        .popup-image-container.no-image .no-image-text {
            color: rgba(255, 255, 255, 0.8);
            font-size: 12px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .popup-image-container.no-image .no-image-text svg {
            width: 16px;
            height: 16px;
            opacity: 0.7;
        }

        /* Image Loading States */
        .popup-image-wrapper {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .popup-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease, opacity 0.3s ease;
            opacity: 0;
        }

        .popup-img.loaded {
            opacity: 1;
        }

        .popup-img.hover {
            transform: scale(1.05);
        }

        /* Image Loading Spinner */
        .image-loader {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }

        .image-loader.hidden {
            display: none;
        }

        .image-spinner {
            width: 30px;
            height: 30px;
            border: 3px solid rgba(0, 0, 0, 0.1);
            border-top-color: #2563eb;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        .image-loader-text {
            font-size: 11px;
            color: #888;
        }

        /* Image Error State */
        .image-error {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: #f8f9fa;
            color: #999;
            gap: 8px;
        }

        .image-error.show {
            display: flex;
        }

        .image-error svg {
            width: 32px;
            height: 32px;
            opacity: 0.5;
        }

        .image-error span {
            font-size: 12px;
        }

        .image-error button {
            margin-top: 4px;
            padding: 4px 12px;
            font-size: 11px;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .image-error button:hover {
            background: #52525b;
        }

        /* View Full Image Button */
        .view-full-btn {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            border: none;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 11px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
            opacity: 0;
            transition: opacity 0.2s, background 0.2s;
        }

        .popup-image-container:hover .view-full-btn {
            opacity: 1;
        }

        .view-full-btn:hover {
            background: rgba(0, 0, 0, 0.9);
        }

        .view-full-btn svg {
            width: 14px;
            height: 14px;
        }

        .parcel-tip-shell {
            font-family: var(--font-family);
            background: var(--bg-primary);
            border-radius: 12px;
            box-shadow: var(--shadow-xl);
        }

        .parcel-header-surface {
            padding: 24px 20px 16px;
            color: #ffffff;
            position: relative;
            min-height: 100px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            cursor: pointer;
            background-size: cover;
            background-position: center;
        }

        .parcel-header-top-border {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: rgba(255, 255, 255, 0.1);
        }

        .popup-fullscreen-btn {
            position: absolute;
            top: 12px;
            right: 12px;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(4px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: #ffffff;
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }

        .popup-fullscreen-btn svg {
            width: 16px;
            height: 16px;
        }

        .parcel-header-meta-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 4px;
        }

        .parcel-feature-label {
            margin: 0;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.8);
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        }

        .parcel-feature-dot {
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--color-primary);
            box-shadow: 0 0 8px var(--color-primary);
        }

        .parcel-header-actions {
            display: flex;
            gap: 8px;
        }

        .popup-action-btn {
            transition: all 0.2s;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }

        .popup-action-btn-compact {
            backdrop-filter: blur(4px);
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            border-width: 1px;
            border-style: solid;
        }

        .popup-action-btn-compact svg {
            width: 12px;
            height: 12px;
        }

        .popup-action-btn-green.popup-action-btn-compact {
            background: rgba(34, 197, 94, 0.2);
            border-color: rgba(34, 197, 94, 0.4);
            color: #86efac;
        }

        .popup-action-btn-blue.popup-action-btn-compact {
            background: rgba(59, 130, 246, 0.2);
            border-color: rgba(59, 130, 246, 0.4);
            color: #93c5fd;
        }

        .tab-header--parcel {
            background: var(--bg-primary);
            border-bottom: 2px solid var(--border-light);
            border-radius: 12px 12px 0 0;
            display: flex;
            flex-direction: row;
            align-items: stretch;
            padding: 0;
            margin: 0;
        }

        .tab-header--parcel .tab-btn {
            flex: 1 1 0;
            width: auto;
            min-height: 34px;
            padding: 6px 3px;
            font-size: 9px;
            line-height: 1.05;
            letter-spacing: 0.04em;
            white-space: nowrap;
            word-break: normal;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 0;
        }

        .parcel-tip-shell.parcel-force-narrow .tab-header--parcel .tab-btn {
            min-height: 34px;
            padding: 6px 3px;
            font-size: 9px;
            line-height: 1.05;
            letter-spacing: 0.04em;
            white-space: nowrap;
            word-break: normal;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .tab-header--parcel .tab-btn:not(:first-child)::after {
            content: "|";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(148, 163, 184, 0.72);
            font-size: 10px;
            font-weight: 700;
            line-height: 1;
            pointer-events: none;
        }

        .parcel-tip-shell.parcel-force-narrow .parcel-header-meta-row {
            gap: 8px;
            flex-wrap: wrap;
        }

        #dock-content .tab-header--parcel,
        .stack-ranking-side-dock-body .tab-header--parcel {
            display: flex !important;
            flex-direction: row !important;
            gap: 0 !important;
            width: 100% !important;
        }

        #dock-content .tab-header--parcel .tab-btn,
        .stack-ranking-side-dock-body .tab-header--parcel .tab-btn {
            width: auto !important;
            flex: 1 1 0 !important;
        }

        .metric-grid-two {
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .metric-list-vertical {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .metric-row-card {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px;
            background: var(--bg-primary);
            border-radius: 10px;
            border: 1px solid var(--border-light);
            box-shadow: var(--shadow-sm);
        }

        .metric-row-card--spaced {
            margin-bottom: 12px;
        }

        .metric-row-main {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .metric-icon-box {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .metric-icon-box svg {
            width: 16px;
            height: 16px;
        }

        .metric-label {
            font-size: 14px;
            font-weight: 600;
            color: var(--color-gray-700);
        }

        .metric-value {
            font-size: 14px;
            font-weight: 700;
            color: var(--color-gray-900);
            text-align: right;
            max-width: 60%;
            line-height: 1.3;
        }

        .metric-value-secondary {
            font-size: 13px;
            font-weight: 600;
            color: var(--color-gray-800);
            text-align: right;
            max-width: 60%;
            line-height: 1.35;
        }

        /* ── Mobile: INFO-tab rows (Owner/Location/Address/etc.) ── */
        /* Hide the search FAB while the parcel dock is open so it
           doesn't overlap dock content rows at the bottom. */
        html.parcel-dock-visible .gpwa-fab {
            display: none !important;
        }

        @media (max-width: 768px) {
            /* ============================================================
               MOBILE ZEBRA ROWS — INFO tab (tab-owner) + VALUES tab (tab-assess)
               Replace bordered bubble cards with clean alternating-color rows.
               Desktop (>=769px) is byte-for-byte unchanged.
               ============================================================ */

            /* --- Tab body padding: zero out side padding so zebra bands
                   reach dock edges; rows add their own 13px internal gutter --- */
            #dock-content #tab-owner,
            #popup-content #tab-owner {
                padding-left: 0 !important;
                padding-right: 0 !important;
                padding-top: 4px !important;   /* TASK 1: was 8px */
                padding-bottom: 6px !important;
            }
            #dock-content #tab-assess,
            #popup-content #tab-assess {
                padding-left: 0 !important;
                padding-right: 0 !important;
                padding-top: 4px !important;   /* TASK 1: was 8px */
                padding-bottom: 4px !important;
            }

            /* --- metric-list-vertical: collapse gap; rows have their own
                   bottom border as the only divider --- */
            #dock-content #tab-owner .metric-list-vertical,
            #popup-content #tab-owner .metric-list-vertical {
                gap: 0 !important;
            }

            /* ---- INFO TAB: metric-row-card → flat zebra row ---- */
            #dock-content #tab-owner .metric-row-card,
            #popup-content #tab-owner .metric-row-card {
                /* Flatten: remove bubble chrome */
                background: transparent !important;
                border: none !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                /* Zebra base: hairline bottom separator */
                border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
                /* Stacked layout (value below label) */
                flex-direction: column !important;
                align-items: flex-start !important;
                gap: 2px !important;
                /* Full-width with internal gutter */
                padding: 7px 13px !important;   /* TASK 2: was 11px 13px */
                box-sizing: border-box !important;
                width: 100% !important;
                min-height: 38px !important;    /* TASK 2: was 44px; still tappable */
            }
            /* Alternating zebra fill: even rows get a subtle tint */
            #dock-content #tab-owner .metric-row-card:nth-child(even),
            #popup-content #tab-owner .metric-row-card:nth-child(even) {
                background: rgba(255, 255, 255, 0.04) !important;
            }
            /* Touch feedback: active tap highlight */
            #dock-content #tab-owner .metric-row-card:active,
            #popup-content #tab-owner .metric-row-card:active {
                background: rgba(255, 255, 255, 0.09) !important;
            }

            /* Flat icon: keep the icon but remove its heavy boxed background */
            #dock-content #tab-owner .metric-icon-box,
            #popup-content #tab-owner .metric-icon-box {
                background: transparent !important;
                box-shadow: none !important;
                width: 20px !important;
                height: 20px !important;
                border-radius: 4px !important;
            }

            /* Row main: full width */
            #dock-content #tab-owner .metric-row-main,
            #popup-content #tab-owner .metric-row-main {
                width: 100%;
                align-items: center;
            }

            /* Label: slightly muted */
            #dock-content #tab-owner .metric-label,
            #popup-content #tab-owner .metric-label {
                font-size: clamp(11px, 3vw, 13px) !important;
                color: rgba(203, 213, 225, 0.82) !important;
            }

            /* Value: full-width, left-aligned, wrapping — no truncation */
            #dock-content #tab-owner .metric-value,
            #dock-content #tab-owner .metric-value-secondary,
            #popup-content #tab-owner .metric-value,
            #popup-content #tab-owner .metric-value-secondary {
                max-width: 100% !important;
                width: 100% !important;
                text-align: left !important;
                white-space: normal !important;
                overflow-wrap: break-word !important;
                word-break: break-word !important;
                font-size: clamp(12px, 3.4vw, 14px) !important;
                line-height: 1.4 !important;
            }

            /* Exemptions data-value (inline flex) — also full-width, left-aligned */
            #dock-content #tab-owner .data-value,
            #popup-content #tab-owner .data-value {
                align-self: flex-start !important;
                font-size: clamp(12px, 3.4vw, 14px) !important;
            }

            /* Section headings inside tab-owner keep their left gutter */
            #dock-content #tab-owner h4,
            #popup-content #tab-owner h4 {
                padding-left: 13px !important;
                padding-right: 13px !important;
            }

            /* Flatten each assess-row: remove bubble chrome */
            #dock-content #tab-assess .assess-metrics-list .assess-row,
            #popup-content #tab-assess .assess-metrics-list .assess-row {
                background: transparent !important;
                border: none !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
                /* Keep fluid 4-column grid */
                display: grid !important;
                grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.85fr) !important;
                gap: 3px !important;
                padding: 6px 13px !important;   /* TASK 2: was 9px 13px */
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
                overflow: visible !important;
                align-items: center !important;
                min-height: 38px !important;    /* TASK 2: was 44px */
            }

            /* h4 section title inside tab-assess keeps gutter */
            #dock-content #tab-assess h4,
            #popup-content #tab-assess h4 {
                margin-left: 13px !important;
                margin-right: 13px !important;
            }

            /* Disable hover lift animations on touch; keep active tint only */
            #dock-content #tab-assess .assess-metrics-list .assess-row:hover,
            #popup-content #tab-assess .assess-metrics-list .assess-row:hover {
                transform: none !important;
                box-shadow: none !important;
            }
        }

        .popup-action-btn:active {
            transform: scale(0.98);
        }

        .popup-action-btn:focus-visible {
            outline: 2px solid rgba(255, 255, 255, 0.8);
            outline-offset: 1px;
        }

        .popup-action-btn-green:hover,
        .popup-action-btn-green:active {
            background: rgba(34, 197, 94, 0.4) !important;
            color: #ffffff !important;
        }

        .popup-action-btn-blue:hover,
        .popup-action-btn-blue:active {
            background: rgba(59, 130, 246, 0.4) !important;
            color: #ffffff !important;
        }

        .popup-action-btn-amber:hover,
        .popup-action-btn-amber:active {
            background: #f59e0b !important;
            color: #ffffff !important;
        }

        /* Touch devices don't have reliable hover states, so keep action buttons visible. */
        @media (hover: none), (pointer: coarse) {
            .view-full-btn {
                opacity: 1;
            }

            .set-default-btn {
                opacity: 1 !important;
            }
        }

        /* Image Counter Badge */
        .image-badge {
            position: absolute;
            top: 8px;
            left: 8px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .image-badge svg {
            width: 12px;
            height: 12px;
        }

        /* Media marker tooltip */
        .media-tooltip {
            position: absolute;
            background: var(--bg-primary);
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            padding: 0;
            z-index: 1500;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.2s;
            overflow: hidden;
            max-width: 200px;
        }

        .media-tooltip.show {
            opacity: 1;
        }

        .media-tooltip img {
            width: 200px;
            height: 150px;
            object-fit: cover;
            display: block;
        }

        .media-tooltip-label {
            padding: 8px 12px;
            font-size: 12px;
            font-weight: 600;
            color: var(--color-gray-800);
            background: var(--bg-secondary);
            border-top: 1px solid var(--border-light);
        }

        /* ===== LIGHTBOX MODAL ===== */
        #lightbox-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(2, 6, 14, 0.32);
            backdrop-filter: blur(2px);
            -webkit-backdrop-filter: blur(2px);
            z-index: var(--z-lightbox);
            display: none;
            justify-content: center;
            align-items: center;
            padding: 16px;
            box-sizing: border-box;
            animation: fadeIn var(--transition-slow) ease;
        }

        #lightbox-modal.show {
            display: flex;
        }

        .lightbox-content {
            position: relative;
            width: min(92vw, 860px);
            max-width: 860px;
            max-height: min(88vh, 780px);
            display: flex;
            flex-direction: column;
            align-items: center;
            background: linear-gradient(180deg, rgba(22, 32, 53, 0.98) 0%, rgba(14, 22, 38, 0.98) 100%);
            border: 1px solid rgba(148, 163, 184, 0.28);
            border-radius: 14px;
            padding: 14px;
            box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
            overflow: auto;
        }

        .lightbox-image-container {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 240px;
            background: rgba(3, 10, 22, 0.9);
            border-radius: 10px;
            border: 1px solid rgba(148, 163, 184, 0.2);
        }

        .lightbox-img {
            max-width: 100%;
            max-height: min(56vh, 560px);
            object-fit: contain;
            border-radius: 4px;
            box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .lightbox-img.loaded {
            opacity: 1;
        }

        .lightbox-loader {
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }

        .lightbox-loader.hidden {
            display: none;
        }

        .lightbox-spinner {
            width: 50px;
            height: 50px;
            border: 4px solid rgba(255, 255, 255, 0.2);
            border-top-color: #2563eb;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        .lightbox-loader-text {
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
        }

        .lightbox-close {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: var(--color-white);
            width: 48px;
            height: 48px;
            border-radius: var(--radius-full);
            font-size: 28px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all var(--transition-base);
            z-index: 10;
            box-shadow: var(--shadow-lg);
        }

        .lightbox-close:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: scale(1.1) rotate(90deg);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .lightbox-close:active {
            transform: scale(1);
        }

        .lightbox-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: var(--color-white);
            width: 56px;
            height: 56px;
            border-radius: var(--radius-full);
            cursor: pointer;
            display: none;
            align-items: center;
            justify-content: center;
            transition: all var(--transition-base);
            z-index: 10;
            box-shadow: var(--shadow-lg);
        }

        .lightbox-nav.visible {
            display: flex;
        }

        .lightbox-nav svg {
            width: 28px;
            height: 28px;
        }

        .lightbox-prev {
            left: 14px;
        }

        .lightbox-next {
            right: 14px;
        }

        .lightbox-nav:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-50%) scale(1.1);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .lightbox-nav:active {
            transform: translateY(-50%) scale(1);
        }

        .lightbox-counter {
            position: absolute;
            bottom: var(--space-xl);
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            padding: 8px 16px;
            border-radius: var(--radius-lg);
            color: rgba(255, 255, 255, 0.9);
            font-size: 14px;
            font-weight: 500;
            display: none;
            z-index: 10;
        }

        .lightbox-counter.visible {
            display: block;
        }

        @media (max-width: 768px) {
            .lightbox-nav {
                width: 44px;
                height: 44px;
            }

            .lightbox-nav svg {
                width: 22px;
                height: 22px;
            }

            .lightbox-prev {
                left: var(--space-sm);
            }

            .lightbox-next {
                right: var(--space-sm);
            }
        }

        .lightbox-info {
            margin-top: 16px;
            color: white;
            text-align: center;
        }

        .lightbox-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .lightbox-subtitle {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
        }

        .lightbox-actions {
            display: flex;
            gap: 12px;
            margin-top: 16px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .lightbox-btn {
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: var(--color-white);
            padding: var(--space-sm) var(--space-lg);
            border-radius: var(--radius-lg);
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-medium);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            transition: all var(--transition-base);
            box-shadow: var(--shadow-md);
        }

        .lightbox-btn:hover {
            background: rgba(255, 255, 255, 0.22);
            border-color: rgba(255, 255, 255, 0.35);
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        .lightbox-btn:active {
            transform: translateY(0);
        }

        .lightbox-btn svg {
            width: 16px;
            height: 16px;
            transition: transform var(--transition-base);
        }

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

        /* Photo Grid Styles */
        .photo-thumb {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .photo-thumb:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            z-index: 1;
        }
        .photo-thumb img {
            transition: transform 0.3s ease;
        }
        .photo-thumb:hover img {
            transform: scale(1.1);
        }

        /* Upload Modal Styles */
        #upload-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 25000;
            display: none;
            justify-content: center;
            align-items: center;
            animation: fadeIn 0.2s ease;
        }

        #upload-modal.show {
            display: flex;
        }

        .upload-modal-content {
            background: var(--bg-primary);
            border-radius: var(--radius-xl);
            width: 90%;
            max-width: 600px;
            max-height: 85vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: var(--shadow-xl);
        }

        .upload-modal-header {
            padding: 20px 24px;
            border-bottom: 1px solid var(--border-light);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .upload-modal-header h2 {
            margin: 0;
            font-size: 20px;
            color: var(--color-gray-900);
        }

        .upload-modal-close {
            background: none;
            border: none;
            font-size: 28px;
            color: #999;
            cursor: pointer;
            padding: 0;
            line-height: 1;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.2s;
        }

        .upload-modal-close:hover {
            background: var(--bg-secondary);
            color: var(--color-gray-800);
        }

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

        .upload-parcel-info {
            background: linear-gradient(135deg, #2563eb 0%, #52525b 100%);
            color: white;
            padding: 16px 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .upload-parcel-info .parcel-icon {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .upload-parcel-info .parcel-details {
            flex: 1;
        }

        .upload-parcel-info .parcel-lot {
            font-size: 18px;
            font-weight: 700;
        }

        #zone-selector {
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 100%);
            color: var(--color-gray-900);
            border: 1px solid rgba(148, 163, 184, 0.36);
            border-radius: 12px;
            padding: 9px 12px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all var(--transition-base), box-shadow 0.25s ease;
            box-shadow:
                0 6px 14px rgba(2, 6, 23, 0.16),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            min-width: 200px;
        }

        #zone-selector:hover {
            border-color: rgba(201, 169, 98, 0.62);
            background: linear-gradient(160deg, rgba(201, 169, 98, 0.2) 0%, rgba(125, 211, 252, 0.1) 100%);
            box-shadow:
                0 10px 20px rgba(2, 132, 199, 0.24),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
        }

        .map-search-overlay {
            position: absolute;
            bottom: calc(var(--overlay-search-bottom, 20px) + env(safe-area-inset-bottom));
            left: calc(var(--overlay-search-left, 20px) + env(safe-area-inset-left));
            z-index: 1012;
            display: flex;
            flex-direction: column;
            gap: 10px;
            pointer-events: auto;
            overflow: hidden;
            padding: 10px;
            transition: bottom 0.24s ease, transform 0.3s ease;
            will-change: transform;
        }

        .map-search-overlay-content {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding-right: 16px;
        }

        .map-search-overlay.collapsed {
            transform: translateX(calc(-100% + 18px));
        }

        /* ── Desktop: lock the search box to the bottom-left ──
           Touch-capable laptops were being detected as "mobile", so the dock /
           layout-sync code kept rewriting the overlay's inline `bottom` and the
           docked "nudge" wiggled it every time the dock opened — making the box
           jump around. On desktop widths we pin it bottom-left and disable those
           animations so it stays put. The collapse slide (transform) is kept. */
        @media (min-width: 769px) {
            .map-search-overlay {
                left: calc(20px + env(safe-area-inset-left)) !important;
                bottom: calc(20px + env(safe-area-inset-bottom)) !important;
                top: auto !important;
                right: auto !important;
                transition: transform 0.3s ease, box-shadow 0.28s ease !important;
                animation: none !important;
                will-change: auto !important;
            }
            .map-search-overlay.controls-docked-cue,
            .map-search-container.controls-docked-cue {
                animation: none !important;
            }
            html.parcel-dock-visible .map-search-overlay {
                transition: transform 0.3s ease, box-shadow 0.28s ease !important;
            }
        }

        .map-search-collapse-handle {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            width: 18px;
            border: 1px solid rgba(148, 163, 184, 0.44);
            border-left: none;
            border-radius: 0 10px 10px 0;
            background: linear-gradient(180deg, rgba(15, 23, 42, 0.66) 0%, rgba(15, 23, 42, 0.46) 100%);
            color: rgba(226, 232, 240, 0.96);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 13px;
            font-weight: 700;
            line-height: 1;
            padding: 0;
            transition: all 0.2s ease;
            box-shadow: 4px 0 12px rgba(2, 6, 23, 0.25);
            touch-action: manipulation;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            z-index: 3;
        }

        .map-search-collapse-handle:hover,
        .map-search-collapse-handle:focus-visible {
            color: #7dd3fc;
            border-color: rgba(201, 169, 98, 0.72);
            background: linear-gradient(180deg, rgba(2, 132, 199, 0.56) 0%, rgba(2, 132, 199, 0.36) 100%);
            outline: none;
        }

        .map-search-collapse-handle::after {
            content: attr(data-hint);
            position: absolute;
            left: calc(100% + 8px);
            top: 50%;
            transform: translateY(-50%);
            white-space: nowrap;
            background: rgba(15, 23, 42, 0.94);
            color: #e2e8f0;
            border: 1px solid rgba(148, 163, 184, 0.45);
            border-radius: 8px;
            font-size: 12px;
            font-weight: 600;
            padding: 5px 8px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.16s ease;
            box-shadow: 0 8px 16px rgba(2, 6, 23, 0.3);
            z-index: 2;
        }

        .map-search-collapse-handle:hover::after,
        .map-search-collapse-handle:focus-visible::after {
            opacity: 1;
        }

        .map-search-mobile-hint {
            position: absolute;
            left: 100%;
            top: 50%;
            transform: translate(12px, -50%);
            opacity: 0;
            pointer-events: none;
            z-index: 2;
            white-space: nowrap;
            background: linear-gradient(145deg, rgba(14, 116, 144, 0.95) 0%, rgba(3, 105, 161, 0.95) 100%);
            color: #f8fafc;
            border: 1px solid rgba(125, 211, 252, 0.65);
            border-radius: 9px;
            font-size: 12px;
            font-weight: 700;
            padding: 6px 10px;
            box-shadow: 0 10px 20px rgba(2, 132, 199, 0.25);
            transition: opacity 0.2s ease, transform 0.2s ease;
        }

        .map-search-mobile-hint.show {
            opacity: 1;
            transform: translate(8px, -50%);
            animation: mapHintPulse 0.85s ease-in-out 2;
        }

        @keyframes mapHintPulse {
            0%, 100% {
                transform: translate(8px, -50%) scale(1);
            }
            50% {
                transform: translate(8px, -50%) scale(1.05);
            }
        }

        @media (hover: none), (pointer: coarse) {
            .map-search-collapse-handle::after {
                display: none;
            }
        }

        .light-mode .map-search-collapse-handle {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(226, 232, 240, 0.9) 100%);
            color: #1e293b;
            border-color: rgba(148, 163, 184, 0.5);
        }

        .light-mode .map-search-collapse-handle:hover,
        .light-mode .map-search-collapse-handle:focus-visible {
            color: #0369a1;
            border-color: rgba(3, 105, 161, 0.68);
            background: linear-gradient(180deg, rgba(224, 242, 254, 0.95) 0%, rgba(186, 230, 253, 0.88) 100%);
        }

        .map-search-container {
            display: flex;
            align-items: center;
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 100%);
            border-radius: 13px;
            padding: 5px;
            box-shadow:
                0 8px 18px rgba(2, 6, 23, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(148, 163, 184, 0.36);
            min-width: 300px;
        }

        .map-search-container .search-input {
            border: 1px solid rgba(148, 163, 184, 0.34);
            padding: 8px 12px;
            font-size: 16px; /* Minimum 16px prevents iOS auto-zoom on focus */
            outline: none;
            flex: 1;
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 100%);
            color: var(--color-gray-900);
            touch-action: manipulation; /* Prevent double-tap zoom on iOS */
            border-radius: 10px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
        }

        .map-search-container .search-input::placeholder {
            color: rgba(148, 163, 184, 0.9);
            opacity: 1;
        }

        html.fiscal-impact-active .map-search-container {
            background: linear-gradient(160deg, rgba(6, 95, 70, 0.28) 0%, rgba(14, 116, 144, 0.34) 44%, rgba(30, 64, 175, 0.26) 100%);
            border-color: rgba(34, 211, 238, 0.68);
            box-shadow:
                0 10px 22px rgba(2, 6, 23, 0.28),
                0 0 0 1px rgba(34, 211, 238, 0.24),
                inset 0 1px 0 rgba(255, 255, 255, 0.24);
        }

        html.fiscal-impact-active .map-search-container .search-input {
            background: linear-gradient(160deg, rgba(15, 118, 110, 0.28) 0%, rgba(12, 74, 110, 0.42) 45%, rgba(30, 64, 175, 0.3) 100%);
            border-color: rgba(34, 211, 238, 0.62);
            color: #e6fffb;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.18),
                0 0 0 1px rgba(34, 211, 238, 0.16);
        }

        html.fiscal-impact-active .map-search-container .search-input::placeholder {
            color: rgba(165, 243, 252, 0.9);
        }

        html.fiscal-impact-active .map-search-container .search-input:focus {
            border-color: rgba(103, 232, 249, 0.95);
            box-shadow:
                0 0 0 2px rgba(34, 211, 238, 0.3),
                0 10px 20px rgba(14, 116, 144, 0.38),
                inset 0 1px 0 rgba(255, 255, 255, 0.26);
        }

        .dark-mode .map-search-container .search-input::placeholder {
            color: rgba(203, 213, 225, 0.78);
        }

        .light-mode .map-search-container .search-input::placeholder {
            color: rgba(71, 85, 105, 0.68);
        }

        .map-filter-controls {
            display: flex;
            gap: 8px;
            align-items: center;
            width: 100%;
        }

        .map-filter-controls #zone-selector {
            width: 100%;
        }

        .map-overlay-btn {
            background: var(--bg-primary);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-md);
            padding: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow-sm);
            transition: all var(--transition-base);
            color: var(--color-gray-700);
        }

        .map-overlay-btn:hover {
            background: var(--bg-secondary);
            transform: translateY(-1px);
        }

        .map-overlay-btn.active {
            background: var(--color-primary);
            color: white;
            border-color: var(--color-primary);
        }

        .map-overlay-btn svg {
            width: 18px;
            height: 18px;
        }

        .upload-dropzone {
            border: 2px dashed var(--border-medium);
            border-radius: var(--radius-xl);
            padding: 40px 20px;
            text-align: center;
            cursor: pointer;
            transition: all var(--transition-base);
            position: relative;
            background: var(--bg-secondary);
        }

        .upload-dropzone:hover {
            border-color: #2563eb;
            background: #f0f7ff;
        }

        .upload-dropzone.dragover {
            border-color: #2563eb;
            background: #dbeafe;
            transform: scale(1.01);
        }

        .upload-dropzone svg {
            color: #bbb;
            margin-bottom: 12px;
        }

        .upload-dropzone p {
            margin: 0 0 8px 0;
            color: #555;
            font-size: 15px;
        }

        .upload-dropzone .upload-hint {
            color: #999;
            font-size: 12px;
        }

        .upload-dropzone input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }

        .upload-preview-list {
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .upload-preview-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: var(--bg-secondary);
            border-radius: 8px;
            border: 1px solid var(--border-light);
        }

        .upload-preview-thumb {
            width: 60px;
            height: 60px;
            border-radius: 6px;
            object-fit: cover;
            flex-shrink: 0;
        }

        .upload-preview-info {
            flex: 1;
            min-width: 0;
        }

        .upload-preview-name {
            font-size: 14px;
            font-weight: 500;
            color: var(--color-gray-900);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .upload-preview-size {
            font-size: 12px;
            color: var(--color-gray-500);
            margin-top: 2px;
        }

        .upload-preview-remove {
            background: none;
            border: none;
            color: #e74c3c;
            cursor: pointer;
            padding: 8px;
            border-radius: 6px;
            transition: background 0.2s;
        }

        .upload-preview-remove:hover {
            background: rgba(231, 76, 60, 0.1);
        }

        .upload-modal-footer {
            padding: 16px 24px;
            border-top: 1px solid var(--border-light);
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            background: var(--bg-secondary);
        }

        .upload-cancel-btn {
            padding: 10px 20px;
            border: 1px solid var(--border-medium);
            background: var(--bg-primary);
            color: var(--color-gray-600);
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .upload-cancel-btn:hover {
            background: var(--bg-secondary);
            border-color: var(--color-gray-400);
        }

        .upload-submit-btn {
            padding: 10px 24px;
            border: none;
            background: linear-gradient(135deg, #2563eb, #52525b);
            color: white;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.2s;
        }

        .upload-submit-btn:hover:not(:disabled) {
            background: linear-gradient(135deg, #52525b, #3d181b);
            transform: translateY(-1px);
        }

        .upload-submit-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* ===== IMAGES GALLERY MODAL ===== */
        #images-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 25000;
            display: none;
            justify-content: center;
            align-items: center;
            animation: fadeIn 0.2s ease;
        }

        #images-modal.show {
            display: flex;
        }

        .images-modal-content {
            background: var(--bg-primary);
            border-radius: var(--radius-xl);
            width: 90%;
            max-width: 900px;
            max-height: 85vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: var(--shadow-xl);
        }

        .images-modal-header {
            padding: 20px 24px;
            border-bottom: 1px solid var(--border-light);
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
        }

        .images-modal-header h2 {
            margin: 0;
            font-size: 20px;
            font-weight: 700;
            color: var(--color-gray-900);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .images-modal-header h2 svg {
            width: 24px;
            height: 24px;
            color: var(--color-primary);
        }

        .images-modal-close {
            background: none;
            border: none;
            font-size: 28px;
            color: var(--color-gray-500);
            cursor: pointer;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-md);
            transition: all var(--transition-base);
        }

        .images-modal-close:hover {
            background: var(--bg-secondary);
            color: var(--color-accent-red);
            transform: scale(1.1);
        }

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

        .images-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 16px;
        }

        .image-card {
            position: relative;
            border-radius: var(--radius-lg);
            overflow: hidden;
            background: var(--bg-secondary);
            border: 1px solid var(--border-light);
            cursor: pointer;
            transition: all var(--transition-base);
        }

        .image-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
            border-color: var(--color-primary);
        }

        .image-card img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            display: block;
            transition: transform 0.3s ease;
        }

        .image-card:hover img {
            transform: scale(1.05);
        }

        .image-label {
            padding: 12px;
            font-size: 13px;
            font-weight: 600;
            color: var(--color-gray-800);
            background: var(--bg-primary);
            text-align: center;
            border-top: 1px solid var(--border-light);
        }

        @media (max-width: 768px) {

            .images-gallery {
                grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
                gap: 12px;
            }

            .image-card img {
                height: 120px;
            }

            .image-label {
                padding: 8px;
                font-size: 11px;
            }
        }

        .tab-header {
            display: flex;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-light);
        }

        /* ===== TAB NAVIGATION ===== */
        .tab-btn {
            flex: 1;
            padding: var(--space-md) var(--space-sm);
            border: none;
            background: transparent;
            cursor: pointer;
            font-weight: var(--font-weight-bold);
            color: var(--color-gray-600);
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            transition: all var(--transition-base);
            border-bottom: 3px solid transparent;
            position: relative;
        }

        .tab-btn::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
            transform: scaleX(0);
            transition: transform var(--transition-base);
        }

        .tab-btn:hover {
            background: linear-gradient(135deg, rgba(52, 152, 219, 0.08) 0%, rgba(82, 82, 91, 0.08) 100%);
            color: var(--color-primary);
            transform: translateY(-1px);
        }

        .tab-btn.active {
            color: var(--color-primary);
            background: linear-gradient(135deg, rgba(52, 152, 219, 0.12) 0%, rgba(82, 82, 91, 0.12) 100%);
            box-shadow: inset 0 -3px 0 0 var(--color-primary);
        }

        .tab-btn.active::before {
            transform: scaleX(1);
        }

        .tab-body {
            padding: var(--space-lg);
            overflow-y: auto;
            max-height: 280px;
            background: var(--bg-primary);
        }

        .tab-content {
            display: none;
            animation: fadeIn 0.3s;
        }

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

        /* Scrollable single-page mode for parcel dock/popup */
        .parcel-scroll-mode {
            max-height: none !important;
            overflow-y: visible !important;
        }

        /* Keep parcel details as a single dock scroll context. */
        #dock-content .tab-body.parcel-scroll-mode,
        #popup-content .tab-body.parcel-scroll-mode {
            overflow-y: visible !important;
            overflow-x: visible !important;
            flex: 0 0 auto !important;
            min-height: auto !important;
            max-height: none !important;
        }

        .parcel-scroll-mode .tab-content {
            display: block;
            animation: none;
        }

        .parcel-scroll-mode .tab-content + .tab-content {
            border-top: none;
            margin-top: 12px;
            padding-top: 12px;
        }

        /* Sticky tab bar in scroll mode — sticks to the top of the scrolling dock/popup container */
        #dock-content .tab-header--parcel,
        #popup-content .tab-header--parcel {
            position: sticky;
            top: 0;
            z-index: 20;
        }

        /* Tax history should grow when room is available */
        .parcel-tax-history-panel {
            background: var(--bg-primary);
            border: 1px solid var(--border-light);
            border-radius: 10px;
            padding: 12px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            min-height: 140px;
        }

        .tax-history-table-scroll {
            max-height: clamp(220px, 42vh, 560px);
            overflow: auto;
            border: 1px solid var(--border-light);
            border-radius: 8px;
        }

        .tax-history-table-scroll table {
            width: 100%;
            min-width: 100%;
            border-collapse: collapse;
        }

        #dock-content #tab-tax.active,
        .stack-ranking-side-dock-body #tab-tax.active {
            display: flex;
            flex-direction: column;
            min-height: 0;
            height: 100%;
        }

        #dock-content .parcel-tax-history-panel,
        .stack-ranking-side-dock-body .parcel-tax-history-panel {
            flex: 1;
            min-height: 0;
        }

        #dock-content .tax-history-table-scroll,
        .stack-ranking-side-dock-body .tax-history-table-scroll {
            flex: 1;
            min-height: 180px;
            max-height: none;
        }

        #dock-content #tab-tax,
        #popup-content #tab-tax {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        #dock-content #tab-tax h4,
        #popup-content #tab-tax h4 {
            margin: 0 12px 12px !important;
        }

        #dock-content #tab-tax .parcel-tax-history-panel,
        #popup-content #tab-tax .parcel-tax-history-panel {
            padding: 0 !important;
            border-left: none !important;
            border-right: none !important;
            border-radius: 0 !important;
            overflow: hidden;
        }

        #dock-content #tab-tax .tax-history-table-scroll,
        #popup-content #tab-tax .tax-history-table-scroll {
            border-left: none !important;
            border-right: none !important;
            border-radius: 0 !important;
            margin: 0 !important;
        }

        /* ===== GLOBAL ANIMATIONS ===== */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes fadeInScale {
            from {
                opacity: 0;
                transform: scale(0.95);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes shimmer {
            0% {
                background-position: -1000px 0;
            }

            100% {
                background-position: 1000px 0;
            }
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.7;
            }
        }

        /* Smooth scroll behavior */
        * {
            scroll-behavior: smooth;
        }

        /* Focus visible for accessibility */
        *:focus-visible {
            outline: 2px solid var(--color-primary);
            outline-offset: 2px;
        }

        .skip-link {
            position: absolute;
            top: -48px;
            left: 12px;
            z-index: 10000;
            background: #ffffff;
            color: #111827;
            border: 2px solid #111827;
            border-radius: 8px;
            padding: 8px 12px;
            font-weight: 700;
            text-decoration: none;
            transition: top 0.2s ease;
        }

        .skip-link:focus {
            top: 12px;
        }

        /* Reduce motion for accessibility */
        @media (prefers-reduced-motion: reduce) {

            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

        .parcel-tip h4 {
            margin: 0 0 var(--space-md) 0;
            color: var(--color-dark-alt);
            font-size: var(--font-size-md);
            font-weight: var(--font-weight-semibold);
            border-bottom: 1px solid var(--border-light);
            padding-bottom: var(--space-sm);
        }

        .grade-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(135deg, rgba(82, 82, 91, 0.08) 0%, rgba(82, 82, 91, 0.15) 100%);
            border: 1px solid rgba(82, 82, 91, 0.25);
            border-radius: var(--radius-lg);
            padding: var(--space-md);
            margin-bottom: var(--space-lg);
        }

        .grade-letter {
            font-size: 38px;
            font-weight: var(--font-weight-extrabold);
            color: var(--color-secondary-dark);
            line-height: 1;
            text-shadow: 0 2px 8px rgba(82, 82, 91, 0.2);
        }

        .grade-rank {
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            color: var(--color-gray-700);
            text-align: right;
        }

        .grade-rank strong {
            font-size: var(--font-size-md);
            font-weight: var(--font-weight-bold);
            color: var(--color-secondary-dark);
        }

        .parcel-tip ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        .parcel-tip li {
            margin-bottom: var(--space-sm);
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(0, 0, 0, 0.04);
            padding-bottom: var(--space-sm);
            transition: background var(--transition-fast);
        }

        .parcel-tip li:hover {
            background: rgba(52, 152, 219, 0.04);
            margin-left: calc(-1 * var(--space-sm));
            margin-right: calc(-1 * var(--space-sm));
            padding-left: var(--space-sm);
            padding-right: var(--space-sm);
            border-radius: var(--radius-sm);
        }

        .parcel-tip li:last-child {
            border-bottom: none;
        }

        .parcel-tip li span:first-child {
            color: var(--color-gray-700);
            font-size: var(--font-size-base);
        }

        .parcel-tip .score-value {
            font-weight: var(--font-weight-bold);
            color: var(--color-primary-dark);
            background: linear-gradient(135deg, rgba(52, 152, 219, 0.1) 0%, rgba(52, 152, 219, 0.15) 100%);
            padding: var(--space-xs) var(--space-sm);
            border-radius: var(--radius-sm);
            font-family: var(--font-family-mono);
            font-size: var(--font-size-base);
            border: 1px solid rgba(52, 152, 219, 0.2);
        }

        .parcel-tip .data-value {
            color: var(--color-dark-alt);
            font-weight: var(--font-weight-medium);
            text-align: right;
            max-width: 60%;
            font-size: var(--font-size-base);
        }

        .highlight-value {
            color: var(--color-accent-red);
            font-weight: var(--font-weight-bold);
        }

        /* Sales History Styles */
        .sales-history-container {
            max-height: 240px;
            overflow-y: auto;
        }

        .sales-stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-sm);
            margin-bottom: var(--space-md);
        }

        .sales-stat-box {
            background: linear-gradient(135deg, rgba(82, 82, 91, 0.08) 0%, rgba(82, 82, 91, 0.15) 100%);
            border: 1px solid rgba(82, 82, 91, 0.2);
            border-radius: var(--radius-md);
            padding: var(--space-md);
            text-align: center;
            transition: all var(--transition-base);
        }

        .sales-stat-box:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-sm);
        }

        .sales-stat-box.highlight {
            background: linear-gradient(135deg, rgba(52, 152, 219, 0.08) 0%, rgba(52, 152, 219, 0.15) 100%);
            border-color: rgba(124, 45, 50, 0.2);
        }

        .sales-stat-value {
            font-size: var(--font-size-lg);
            font-weight: var(--font-weight-bold);
            color: var(--color-secondary-dark);
            font-family: var(--font-family-mono);
        }

        .sales-stat-box.highlight .sales-stat-value {
            color: var(--color-primary-dark);
        }

        .sales-stat-label {
            font-size: var(--font-size-xs);
            color: var(--color-gray-600);
        }

        .sales-stat-label-text {
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: var(--font-weight-medium);
        }

        /* Superuser Profile Icon */
        #superuser-profile-icon {
            position: fixed;
            top: 20px;
            right: 80px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffa500 100%);
            border: 3px solid rgba(255, 215, 0, 0.5);
            box-shadow: 0 4px 20px rgba(255, 215, 0, 0.6), 0 0 40px rgba(255, 215, 0, 0.3);
            display: none;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 1001;
            animation: pulse-glow 2s ease-in-out infinite;
            position: relative;
        }

        #superuser-profile-icon.show {
            display: flex;
        }

        #superuser-profile-icon::before {
            content: '👑';
            font-size: 24px;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        }

        #superuser-profile-icon::after {
            content: '';
            position: absolute;
            top: -2px;
            right: -2px;
            width: 16px;
            height: 16px;
            background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
            border-radius: 50%;
            border: 2px solid white;
            animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
        }

        @keyframes pulse-glow {

            0%,
            100% {
                box-shadow: 0 4px 20px rgba(255, 215, 0, 0.6), 0 0 40px rgba(255, 215, 0, 0.3);
                transform: scale(1);
            }

            50% {
                box-shadow: 0 4px 30px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 215, 0, 0.5);
                transform: scale(1.05);
            }
        }

        @keyframes ping {

            75%,
            100% {
                transform: scale(2);
                opacity: 0;
            }
        }

        /* Welcome Animation Overlay */
        #superuser-welcome-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(10, 15, 26, 0.95) 0%, rgba(26, 35, 50, 0.95) 100%);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            z-index: 99999;
            display: none;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.5s ease-out;
        }

        #superuser-welcome-overlay.show {
            display: flex;
        }

        .welcome-content {
            text-align: center;
            color: white;
            animation: slideInUp 0.8s ease-out;
        }

        .welcome-crown {
            font-size: 120px;
            margin-bottom: 20px;
            animation: crownFloat 3s ease-in-out infinite, crownRotate 10s linear infinite;
            filter: drop-shadow(0 10px 30px rgba(255, 215, 0, 0.8));
        }

        .welcome-title {
            font-size: 3rem;
            font-weight: 800;
            background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffa500 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 10px;
            letter-spacing: 2px;
            text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
        }

        .welcome-subtitle {
            font-size: 1.5rem;
            color: #e2e8f0;
            margin-bottom: 10px;
            font-weight: 300;
            letter-spacing: 1px;
        }

        .welcome-role {
            font-size: 1.2rem;
            color: #94a3b8;
            margin-bottom: 40px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 3px;
        }

        .welcome-sparkles {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .sparkle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: #ffd700;
            border-radius: 50%;
            animation: sparkle 2s ease-in-out infinite;
            box-shadow: 0 0 10px #ffd700;
        }

        @keyframes crownFloat {

            0%,
            100% {
                transform: translateY(0) scale(1);
            }

            50% {
                transform: translateY(-20px) scale(1.1);
            }
        }

        @keyframes crownRotate {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes sparkle {

            0%,
            100% {
                opacity: 0;
                transform: scale(0);
            }

            50% {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* Superuser Badge in Toolbar */
        .superuser-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 165, 0, 0.2) 100%);
            border: 1px solid rgba(255, 215, 0, 0.4);
            border-radius: 20px;
            font-size: 0.875rem;
            font-weight: 600;
            color: #ffd700;
            text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
            box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
        }

        .superuser-badge::before {
            content: '👑';
            font-size: 1rem;
        }

        .sales-timeline {
            position: relative;
            padding-left: var(--space-xl);
        }

        .sales-timeline::before {
            content: '';
            position: absolute;
            left: var(--space-sm);
            top: var(--space-sm);
            bottom: var(--space-sm);
            width: 2px;
            background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-secondary) 100%);
            border-radius: 2px;
        }

        .sale-item {
            position: relative;
            padding: var(--space-md);
            margin-bottom: var(--space-sm);
            background: var(--bg-secondary);
            border-radius: var(--radius-md);
            border-left: 3px solid var(--color-primary);
            transition: all var(--transition-base);
        }

        .sale-item:hover {
            background: var(--bg-primary);
            transform: translateX(2px);
            box-shadow: var(--shadow-sm);
        }

        .sale-item:last-child {
            margin-bottom: 0;
        }

        .sale-item::before {
            content: '';
            position: absolute;
            left: -21px;
            top: 14px;
            width: 10px;
            height: 10px;
            background: var(--color-primary);
            border-radius: var(--radius-full);
            border: 2px solid var(--bg-primary);
            box-shadow: 0 0 0 2px var(--color-primary);
        }

        .sale-date {
            font-size: var(--font-size-sm);
            color: var(--color-gray-500);
            font-family: var(--font-family-mono);
            margin-bottom: var(--space-xs);
        }

        .sale-price {
            font-size: var(--font-size-md);
            font-weight: var(--font-weight-bold);
            color: var(--color-secondary);
            font-family: var(--font-family-mono);
        }

        .sale-price.no-price {
            color: var(--color-gray-400);
            font-style: italic;
            font-weight: var(--font-weight-normal);
        }

        .sale-parties {
            font-size: var(--font-size-sm);
            color: var(--color-gray-600);
            margin-top: var(--space-xs);
            line-height: 1.5;
        }

        .sale-parties strong {
            color: var(--color-gray-800);
        }

        .no-sales-message {
            text-align: center;
            padding: var(--space-xl);
            color: var(--color-gray-500);
            font-style: italic;
        }

        .no-sales-message svg {
            width: 36px;
            height: 36px;
            margin-bottom: var(--space-md);
            opacity: 0.4;
        }

        /* Sales Color Mode Legend */
        .sales-legend {
            display: flex;
            flex-direction: column;
            gap: var(--space-xs);
            padding: var(--space-sm) 0;
            margin-left: var(--space-2xl);
            font-size: var(--font-size-sm);
        }

        .sales-legend-item {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            color: var(--color-gray-600);
            transition: color var(--transition-fast);
        }

        .sales-legend-item:hover {
            color: var(--color-gray-900);
        }

        .sales-legend-color {
            width: 14px;
            height: 14px;
            border-radius: var(--radius-sm);
            flex-shrink: 0;
            box-shadow: var(--shadow-sm);
        }

        .sales-legend-color.recent {
            background: linear-gradient(135deg, #e74c3c, #c0392b);
        }

        .sales-legend-color.year {
            background: linear-gradient(135deg, #c9a227, #52525b);
        }

        .sales-legend-color.older {
            background: linear-gradient(135deg, #52525b, #229954);
        }

        .sales-legend-color.none {
            background: linear-gradient(135deg, #95a5a6, #7f8c8d);
        }

        /* Toast & Loader */
        #toast-container {
            position: fixed;
            top: 80px;
            right: 20px;
            z-index: var(--z-toast);
            display: flex;
            flex-direction: column;
            gap: 10px;
            pointer-events: none;
        }

        /* ===== TOAST NOTIFICATIONS ===== */
        .toast {
            background: var(--color-gray-900);
            color: var(--color-white);
            opacity: 0.75;
            padding: var(--space-lg) var(--space-xl);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-xl);
            display: flex;
            align-items: center;
            gap: var(--space-md);
            min-width: 300px;
            max-width: 420px;
            pointer-events: auto;
            animation: toastSlideIn var(--transition-slow) cubic-bezier(0.34, 1.56, 0.64, 1);
            transition: opacity var(--transition-slow), transform var(--transition-slow);
            border: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

        .toast.hiding {
            opacity: 0;
            transform: translateX(120%);
        }

        @keyframes toastSlideIn {
            from {
                opacity: 0;
                transform: translateX(120%) scale(0.9);
            }

            to {
                opacity: 0.75;
                transform: translateX(0) scale(1);
            }
        }

        .toast-icon {
            width: 24px;
            height: 24px;
            flex-shrink: 0;
        }

        .toast-content {
            flex: 1;
        }

        .toast-title {
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 2px;
        }

        .toast-message {
            font-size: 13px;
            opacity: 0.9;
        }

        .toast-close {
            background: none;
            border: none;
            color: white;
            opacity: 0.7;
            cursor: pointer;
            padding: 4px;
            font-size: 18px;
            line-height: 1;
        }

        .toast-close:hover {
            opacity: 1;
        }

        .toast.success {
            background: #38a169;
        }

        .toast.error {
            background: linear-gradient(135deg, #c0392b, #e74c3c);
        }

        .toast.warning {
            background: linear-gradient(135deg, #d35400, #e67e22);
        }

        .toast.info {
            background: linear-gradient(135deg, #2980b9, #3498db);
        }


        .layer-toggle.loading::after {
            content: "";
            display: inline-block;
            width: 12px;
            height: 12px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-top-color: white;
            border-radius: 50%;
            margin-left: 6px;
            animation: spin 0.8s linear infinite;
        }

        /* Narrow viewport: ensure full brand title fits */
        @media only screen and (max-width: 520px) {
            .brand {
                font-size: 0.95rem;
            }
            .brand-text {
                max-width: 260px;
            }
        }

        /* Mobile Layout Adjustments (Landscape) */
        @media only screen and (max-height: 600px) and (orientation: landscape) {
            #toolbar {
                height: 44px;
                padding: 0 10px;
            }

            .brand {
                font-size: 1.1em;
                white-space: nowrap;
            }

            .logo-img {
                height: 28px;
            }

            .btn-toggle {
                padding: 4px 8px;
                font-size: 0.8em;
            }

            #search-input {
                width: 140px;
                padding: 4px;
                font-size: 16px; /* Minimum 16px prevents iOS auto-zoom on focus */
            }

            .stats {
                display: none;
            }


            .map-layer-controls {
                top: 5px;
                left: 10px;
                right: auto;
                max-height: 80vh;
            }
        }


        /* ===== MORTGAGE CALCULATOR MODAL ===== */
        #mortgage-calc-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--bg-overlay);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: var(--z-toast);
            display: none;
            justify-content: center;
            align-items: center;
            animation: fadeIn var(--transition-base) ease;
        }

        #mortgage-calc-modal.show {
            display: flex;
        }

        .mortgage-calc-content {
            background: var(--bg-primary);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-xl);
            width: min(1360px, calc(100dvw - clamp(16px, 5vw, 144px) - env(safe-area-inset-left) - env(safe-area-inset-right)));
            max-width: calc(100dvw - clamp(16px, 5vw, 144px) - env(safe-area-inset-left) - env(safe-area-inset-right));
            height: calc(100dvh - clamp(16px, 4vh, 112px) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
            max-height: calc(100dvh - clamp(16px, 4vh, 112px) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
            overflow-y: auto;
            animation: modalSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .mortgage-calc-header {
            padding: var(--space-xl) var(--space-2xl);
            border-bottom: 1px solid var(--border-light);
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--bg-secondary);
        }

        .mortgage-calc-header h2 {
            margin: 0;
            font-size: var(--font-size-xl);
            font-weight: var(--font-weight-semibold);
            color: var(--color-dark-alt);
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }

        .mortgage-calc-header h2 svg {
            width: 24px;
            height: 24px;
            color: var(--color-primary);
        }

        .mortgage-calc-close {
            background: none;
            border: none;
            font-size: 28px;
            color: var(--color-gray-400);
            cursor: pointer;
            padding: var(--space-xs);
            line-height: 1;
            border-radius: var(--radius-md);
            transition: all var(--transition-base);
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .mortgage-calc-close:hover {
            background: var(--color-gray-50);
            color: var(--color-gray-900);
            transform: scale(1.1);
        }

        .mortgage-calc-body {
            padding: var(--space-2xl);
            display: flex;
            gap: var(--space-2xl);
            flex-wrap: wrap;
        }

        .calc-inputs-column {
            flex: 1;
            min-width: 240px;
        }

        .calc-results-column {
            flex: 3;
            min-width: 400px;
        }

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

        .calc-form-group label {
            display: block;
            font-weight: var(--font-weight-semibold);
            color: var(--color-gray-900);
            margin-bottom: var(--space-sm);
            font-size: var(--font-size-md);
        }

        .calc-form-group .label-subtitle {
            font-size: var(--font-size-sm);
            color: var(--color-gray-600);
            font-weight: var(--font-weight-normal);
            margin-left: var(--space-xs);
        }

        .calc-input-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }

        .calc-input-prefix,
        .calc-input-suffix {
            position: absolute;
            color: var(--color-gray-600);
            font-weight: var(--font-weight-medium);
            font-size: var(--font-size-md);
        }

        .calc-input-prefix {
            left: var(--space-md);
        }

        .calc-input-suffix {
            right: var(--space-md);
        }

        .calc-input {
            width: 100%;
            padding: var(--space-md) var(--space-lg);
            border: 1px solid var(--border-dark);
            border-radius: var(--radius-md);
            font-size: var(--font-size-md);
            font-family: var(--font-family);
            transition: all var(--transition-base);
            background: var(--bg-primary);
            color: var(--color-gray-900);
            box-shadow: var(--shadow-sm);
        }

        .calc-input.has-prefix {
            padding-left: 2.5rem;
        }

        .calc-input.has-suffix {
            padding-right: 2.5rem;
        }

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

        .calc-input:focus {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2), var(--shadow-md);
        }

        .calc-grid {
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        .calc-results {
            background: #2563eb;
            border-radius: var(--radius-lg);
            padding: var(--space-xl);
            margin-bottom: var(--space-xl);
            color: var(--color-white);
        }

        .calc-results h3 {
            margin: 0 0 var(--space-lg) 0;
            font-size: var(--font-size-xl);
            font-weight: var(--font-weight-bold);
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }

        .calc-results h3 svg {
            width: 24px;
            height: 24px;
        }

        .calc-result-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-lg);
        }

        .calc-result-item {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border-radius: var(--radius-md);
            padding: var(--space-lg);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .calc-result-label {
            font-size: var(--font-size-sm);
            opacity: 0.9;
            margin-bottom: var(--space-xs);
        }

        .calc-result-value {
            font-size: var(--font-size-2xl);
            font-weight: var(--font-weight-bold);
            font-family: var(--font-family-mono);
        }

        .calc-result-breakdown {
            margin-top: var(--space-lg);
            padding-top: var(--space-lg);
            border-top: 1px solid rgba(255, 255, 255, 0.2);
        }

        .calc-breakdown-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--space-sm) 0;
            font-size: var(--font-size-base);
        }

        .calc-breakdown-item .label {
            opacity: 0.9;
        }

        .calc-breakdown-item .value {
            font-weight: var(--font-weight-semibold);
            font-family: var(--font-family-mono);
        }

        .calc-info-box {
            background: var(--bg-secondary);
            border-left: 4px solid var(--color-primary);
            border-radius: var(--radius-md);
            padding: var(--space-lg);
            margin-top: var(--space-lg);
        }

        .calc-info-box p {
            margin: 0;
            color: var(--color-gray-700);
            font-size: var(--font-size-base);
            line-height: 1.6;
        }

        .calc-chart-section {
            background: var(--bg-primary);
            border-radius: var(--radius-lg);
            padding: var(--space-xl);
            border: 1px solid var(--border-medium);
        }

        .calc-chart-section h3 {
            margin: 0 0 var(--space-lg) 0;
            font-size: var(--font-size-lg);
            font-weight: var(--font-weight-semibold);
            color: var(--color-dark-alt);
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }

        .calc-chart-section h3 svg {
            width: 20px;
            height: 20px;
            color: var(--color-primary);
        }

        #mill-rate-chart {
            width: 100%;
            height: 450px;
            position: relative;
        }

        .chart-bar {
            transition: all var(--transition-base);
        }

        .chart-bar:hover {
            opacity: 0.8;
        }

        .chart-highlight {
            fill: var(--color-primary);
        }

        .chart-normal {
            fill: var(--color-gray-400);
        }

        .chart-text {
            font-family: var(--font-family);
            font-size: 14px;
            fill: var(--color-gray-700);
        }

        .chart-value-text {
            font-family: var(--font-family-mono);
            font-size: 12px;
            font-weight: var(--font-weight-semibold);
            fill: var(--color-gray-900);
        }

        .chart-axis-line {
            stroke: var(--color-gray-300);
            stroke-width: 1;
        }

        .chart-grid-line {
            stroke: var(--color-gray-200);
            stroke-width: 1;
            stroke-dasharray: 2, 2;
        }

        @media (max-width: 768px) {
            .mortgage-calc-body {
                flex-direction: column;
            }

            .calc-inputs-column,
            .calc-results-column {
                min-width: 100%;
            }

            .calc-result-grid {
                grid-template-columns: 1fr;
            }

            #mill-rate-chart {
                height: 250px;
            }
        }

        /* ===== GROWTH CALCULATOR MODAL ===== */
        #growth-calc-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--bg-overlay);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: var(--z-toast);
            display: none;
            justify-content: center;
            align-items: center;
            animation: fadeIn var(--transition-base) ease;
        }

        #growth-calc-modal.show {
            display: flex;
        }

        .growth-calc-content {
            background: var(--bg-primary);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-xl);
            width: min(1360px, calc(100dvw - clamp(16px, 5vw, 144px) - env(safe-area-inset-left) - env(safe-area-inset-right)));
            max-width: calc(100dvw - clamp(16px, 5vw, 144px) - env(safe-area-inset-left) - env(safe-area-inset-right));
            height: calc(100dvh - clamp(16px, 4vh, 112px) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
            max-height: calc(100dvh - clamp(16px, 4vh, 112px) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
            overflow-y: auto;
            animation: modalSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .growth-calc-header {
            padding: var(--space-xl) var(--space-2xl);
            border-bottom: 1px solid var(--border-light);
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #059669;
        }

        .growth-calc-header h2 {
            margin: 0;
            font-size: var(--font-size-xl);
            font-weight: var(--font-weight-bold);
            color: white;
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }

        .growth-calc-header h2 svg {
            width: 24px;
            height: 24px;
        }

        .growth-calc-close {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            font-size: 24px;
            color: white;
            cursor: pointer;
            padding: var(--space-xs);
            line-height: 1;
            border-radius: var(--radius-md);
            transition: all var(--transition-base);
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .growth-calc-close:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }

        .growth-calc-body {
            padding: var(--space-2xl);
        }

        .growth-inputs-row {
            display: flex;
            gap: var(--space-xl);
            margin-bottom: var(--space-xl);
            flex-wrap: wrap;
        }

        .growth-input-group {
            flex: 1;
            min-width: 180px;
        }

        .growth-input-group label {
            display: block;
            font-weight: var(--font-weight-semibold);
            color: var(--color-gray-700);
            margin-bottom: var(--space-sm);
            font-size: var(--font-size-sm);
        }

        .growth-input {
            width: 100%;
            padding: var(--space-md);
            border: 1px solid var(--border-dark);
            border-radius: var(--radius-md);
            font-size: var(--font-size-md);
            font-family: var(--font-family-mono);
            background: var(--bg-primary);
            color: var(--color-gray-900);
            transition: all var(--transition-base);
        }

        .growth-input:focus {
            outline: none;
            border-color: #22d3ee;
            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
        }

        .growth-actions-row {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-md);
            margin-bottom: var(--space-xl);
            align-items: flex-end;
        }

        .growth-action-btn {
            padding: 12px 20px;
            background: #22d3ee;
            color: white;
            border: none;
            border-radius: var(--radius-md);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

        .growth-action-btn:hover {
            filter: brightness(0.95);
            transform: translateY(-1px);
        }

        .growth-add-group-panel {
            background: var(--bg-secondary);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-lg);
            padding: var(--space-lg);
            margin-bottom: var(--space-xl);
        }

        .growth-add-group-title {
            margin: 0 0 var(--space-md) 0;
            font-size: var(--font-size-md);
            font-weight: var(--font-weight-semibold);
            color: var(--color-gray-800);
        }

        .growth-add-group-grid {
            display: grid;
            grid-template-columns: 1.6fr 1fr 1fr 1fr auto;
            gap: var(--space-md);
            align-items: end;
        }

        .growth-add-group-grid .growth-input-group {
            min-width: 0;
        }

        .growth-add-group-divider {
            border-top: 1px solid var(--border-light);
            margin: var(--space-lg) 0;
        }

        .growth-saved-group-row {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: var(--space-md);
            align-items: end;
        }

        .growth-saved-group-row select {
            width: 100%;
            padding: var(--space-md);
            border: 1px solid var(--border-dark);
            border-radius: var(--radius-md);
            font-size: var(--font-size-md);
            background: var(--bg-primary);
            color: var(--color-gray-900);
        }

        .growth-zones-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: var(--space-lg);
            margin-bottom: var(--space-xl);
        }

        .growth-zone-card {
            background: var(--bg-secondary);
            border-radius: var(--radius-lg);
            padding: var(--space-lg);
            border: 1px solid var(--border-light);
            transition: all var(--transition-base);
        }

        .growth-zone-card:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--color-primary);
        }

        .growth-zone-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-sm);
            margin-bottom: var(--space-md);
        }

        .growth-zone-title {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            min-width: 0;
        }

        .growth-zone-dot {
            width: 12px;
            height: 12px;
            border-radius: var(--radius-full);
        }


        .growth-zone-name {
            font-weight: var(--font-weight-bold);
            color: var(--color-gray-900);
            font-size: var(--font-size-md);
            overflow-wrap: anywhere;
        }

        .growth-zone-remove {
            border: 1px solid #fca5a5;
            color: #dc2626;
            background: #fef2f2;
            border-radius: var(--radius-sm);
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-semibold);
            cursor: pointer;
            padding: 4px 8px;
            display: none;
        }

        .growth-zone-card.is-custom .growth-zone-remove {
            display: inline-block;
        }

        .growth-zone-inputs {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-sm);
            margin-bottom: var(--space-sm);
        }

        .growth-zone-inputs .growth-zone-rate-input {
            grid-column: span 2;
        }

        .growth-zone-field-label {
            font-size: var(--font-size-xs);
            color: var(--color-gray-500);
            text-transform: uppercase;
            font-weight: var(--font-weight-semibold);
            margin-bottom: 4px;
        }

        .growth-zone-stats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-sm);
            margin-bottom: var(--space-md);
        }

        .growth-zone-stat {
            padding: var(--space-sm);
            background: var(--bg-primary);
            border-radius: var(--radius-sm);
        }

        .growth-zone-stat-label {
            font-size: var(--font-size-xs);
            color: var(--color-gray-500);
            text-transform: uppercase;
            font-weight: var(--font-weight-semibold);
        }

        .growth-zone-stat-value {
            font-size: var(--font-size-md);
            font-weight: var(--font-weight-bold);
            color: var(--color-gray-900);
            font-family: var(--font-family-mono);
        }

        .growth-zone-rate-input {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }

        .growth-zone-rate-input label {
            font-size: var(--font-size-sm);
            color: var(--color-gray-600);
            white-space: nowrap;
        }

        .growth-zone-rate-input input {
            width: 80px;
            padding: var(--space-sm);
            border: 1px solid var(--border-medium);
            border-radius: var(--radius-sm);
            font-size: var(--font-size-sm);
            font-family: var(--font-family-mono);
            text-align: center;
            background: var(--bg-primary);
            color: var(--color-gray-900);
        }

        .growth-zone-inputs input {
            width: 100%;
            padding: var(--space-sm);
            border: 1px solid var(--border-medium);
            border-radius: var(--radius-sm);
            font-size: var(--font-size-sm);
            font-family: var(--font-family-mono);
            background: var(--bg-primary);
            color: var(--color-gray-900);
        }

        .growth-zone-rate-input input:focus {
            outline: none;
            border-color: #22d3ee;
            box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
        }

        .growth-zone-future {
            margin-top: var(--space-md);
            padding: var(--space-md);
            background: rgba(16, 185, 129, 0.1);
            border-radius: var(--radius-md);
            border: 1px solid rgba(16, 185, 129, 0.3);
        }

        .growth-zone-future-label {
            font-size: var(--font-size-xs);
            color: #059669;
            text-transform: uppercase;
            font-weight: var(--font-weight-bold);
            margin-bottom: var(--space-xs);
        }

        .growth-zone-future-value {
            font-size: var(--font-size-lg);
            font-weight: var(--font-weight-extrabold);
            color: #059669;
            font-family: var(--font-family-mono);
        }

        .growth-zone-gain {
            font-size: var(--font-size-xs);
            color: #22d3ee;
            margin-top: var(--space-xs);
        }

        .growth-total-section {
            background: #059669;
            border-radius: var(--radius-lg);
            padding: var(--space-xl);
            color: white;
            margin-top: var(--space-xl);
        }

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

        .growth-total-title {
            font-size: var(--font-size-lg);
            font-weight: var(--font-weight-bold);
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }

        .growth-total-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: var(--space-lg);
        }

        .growth-total-item {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(8px);
            border-radius: var(--radius-md);
            padding: var(--space-lg);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .growth-total-label {
            font-size: var(--font-size-sm);
            opacity: 0.9;
            margin-bottom: var(--space-xs);
        }

        .growth-total-value {
            font-size: var(--font-size-2xl);
            font-weight: var(--font-weight-extrabold);
            font-family: var(--font-family-mono);
        }


        /* Combined Growth Chart Section */
        .combined-growth-chart-section {
            margin-top: 0;
            background: var(--bg-secondary);
            border-radius: var(--radius-lg);
            padding: var(--space-lg);
            border: 1px solid var(--border-light);
            width: 100%;
            box-sizing: border-box;
        }

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

        .combined-growth-chart-title {
            font-size: var(--font-size-lg);
            font-weight: var(--font-weight-bold);
            color: var(--color-gray-900);
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }

        .combined-growth-chart-title svg {
            color: #22d3ee;
        }

        .combined-growth-chart-container {
            height: 350px;
            background: var(--bg-primary);
            border-radius: var(--radius-md);
            padding: var(--space-md);
        }

        .growth-main-layout {
            display: grid;
            grid-template-columns: 220px minmax(0, 1fr);
            gap: var(--space-lg);
            align-items: start;
            margin-top: var(--space-xl);
        }

        .growth-left-controls {
            background: var(--bg-secondary);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-lg);
            padding: var(--space-md);
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
        }

        .growth-left-controls .growth-inputs-row {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--space-sm);
            margin: 0;
        }

        .growth-left-controls .growth-actions-row {
            margin: 0;
            display: flex;
        }

        .growth-left-controls .growth-action-btn {
            width: 100%;
            justify-content: center;
        }

        .growth-left-controls .growth-saved-group-row {
            grid-template-columns: 1fr;
        }

        .growth-left-controls .growth-saved-group-row .growth-action-btn {
            width: 100%;
        }

        .growth-right-panels {
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
            min-width: 0;
        }

        .growth-right-panels .growth-total-section {
            width: 100%;
            margin-top: 0;
            box-sizing: border-box;
        }

        .combined-growth-legend {
            display: flex;
            justify-content: center;
            gap: var(--space-lg);
            margin-top: var(--space-md);
            flex-wrap: wrap;
        }

        .combined-growth-legend-item {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
            font-size: var(--font-size-sm);
            color: var(--color-gray-700);
        }

        .combined-growth-legend-dot {
            width: 12px;
            height: 12px;
            border-radius: var(--radius-full);
        }

        .combined-growth-legend-dot.total { background: #059669; }

        .combined-growth-legend-item.toggle-item {
            cursor: pointer;
            padding: 4px 8px;
            border-radius: var(--radius-sm);
            transition: all 0.2s;
            border: 1px solid transparent;
        }

        .combined-growth-legend-item.toggle-item:hover {
            background: var(--bg-secondary);
            border-color: var(--border-light);
        }

        .combined-growth-legend-item.toggle-item input[type="checkbox"] {
            width: 14px;
            height: 14px;
            accent-color: #22d3ee;
            cursor: pointer;
            margin-right: 4px;
        }

        .combined-growth-legend-item.toggle-item:has(input:not(:checked)) {
            opacity: 0.5;
        }

        .combined-growth-legend-item.total-item {
            padding: 4px 8px;
            background: rgba(5, 150, 105, 0.1);
            border-radius: var(--radius-sm);
            border: 1px solid rgba(5, 150, 105, 0.3);
            font-weight: var(--font-weight-semibold);
        }

        @media (max-width: 768px) {

            .growth-main-layout {
                grid-template-columns: 1fr;
            }

            .growth-zones-grid {
                grid-template-columns: 1fr;
            }

            .growth-inputs-row {
                flex-direction: column;
            }

            .growth-add-group-grid {
                grid-template-columns: 1fr;
            }

            .growth-saved-group-row {
                grid-template-columns: 1fr;
            }

            .growth-zone-inputs {
                grid-template-columns: 1fr;
            }

            .growth-zone-inputs .growth-zone-rate-input {
                grid-column: span 1;
            }

            .growth-total-grid {
                grid-template-columns: 1fr;
            }
        }

        /* ===== SELECTION GROUPS MODAL ===== */
        #groups-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--bg-overlay);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: var(--z-toast);
            display: none;
            justify-content: center;
            align-items: center;
            animation: fadeIn var(--transition-base) ease;
        }

        #groups-modal.show {
            display: flex;
        }

        .groups-modal-content {
            background: var(--bg-primary);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-xl);
            max-width: 600px;
            width: 90%;
            max-height: 85vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            animation: modalSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .groups-modal-header {
            padding: var(--space-xl) var(--space-2xl);
            border-bottom: 1px solid var(--border-light);
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--bg-secondary);
        }

        .groups-modal-header h2 {
            margin: 0;
            font-size: var(--font-size-xl);
            font-weight: var(--font-weight-semibold);
            color: var(--color-dark-alt);
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }

        .groups-modal-header h2 svg {
            width: 24px;
            height: 24px;
            color: var(--color-primary);
        }

        .groups-modal-close {
            background: none;
            border: none;
            font-size: 28px;
            color: var(--color-gray-400);
            cursor: pointer;
            padding: var(--space-xs);
            line-height: 1;
            border-radius: var(--radius-md);
            transition: all var(--transition-base);
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .groups-modal-close:hover {
            background: var(--color-gray-50);
            color: var(--color-gray-900);
            transform: scale(1.1);
        }

        .groups-modal-body {
            padding: var(--space-2xl);
            overflow-y: auto;
            flex: 1;
        }

        .groups-save-section {
            background: #2563eb;
            border-radius: var(--radius-lg);
            padding: var(--space-xl);
            margin-bottom: var(--space-xl);
            color: var(--color-white);
        }

        .groups-save-section h3 {
            margin: 0 0 var(--space-md) 0;
            font-size: var(--font-size-lg);
            font-weight: var(--font-weight-semibold);
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }

        .groups-save-form {
            display: flex;
            gap: var(--space-md);
        }

        .groups-save-form input {
            flex: 1;
            padding: var(--space-sm) var(--space-md);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: var(--radius-md);
            background: rgba(255, 255, 255, 0.1);
            color: var(--color-white);
            font-size: var(--font-size-md);
        }

        .groups-save-form input::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }

        .groups-save-form button {
            padding: var(--space-sm) var(--space-lg);
            border: none;
            border-radius: var(--radius-md);
            background: rgba(255, 255, 255, 0.2);
            color: var(--color-white);
            font-weight: var(--font-weight-semibold);
            cursor: pointer;
            transition: all var(--transition-base);
        }

        .groups-save-form button:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .groups-list-section h3 {
            margin: 0 0 var(--space-md) 0;
            font-size: var(--font-size-lg);
            font-weight: var(--font-weight-semibold);
            color: var(--color-dark-alt);
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }

        .groups-list {
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
        }

        .group-card {
            background: var(--bg-secondary);
            border: 1px solid var(--border-medium);
            border-radius: var(--radius-lg);
            padding: var(--space-lg);
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all var(--transition-base);
        }

        .group-card:hover {
            border-color: var(--color-primary);
            box-shadow: var(--shadow-md);
        }

        .group-info h4 {
            margin: 0 0 var(--space-xs) 0;
            font-size: var(--font-size-md);
            font-weight: var(--font-weight-semibold);
            color: var(--color-dark-alt);
        }

        .group-info p {
            margin: 0;
            font-size: var(--font-size-sm);
            color: var(--color-gray-600);
        }

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

        .group-action-btn {
            padding: var(--space-sm) var(--space-md);
            border: 1px solid var(--border-medium);
            border-radius: var(--radius-md);
            background: var(--bg-primary);
            color: var(--color-gray-700);
            font-size: var(--font-size-sm);
            cursor: pointer;
            transition: all var(--transition-base);
            display: flex;
            align-items: center;
            gap: var(--space-xs);
        }

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

        .group-action-btn.delete:hover {
            border-color: var(--color-accent-red);
            color: var(--color-accent-red);
        }

        .group-action-btn svg {
            width: 14px;
            height: 14px;
        }

        .groups-empty {
            text-align: center;
            padding: var(--space-2xl);
            color: var(--color-gray-500);
        }

        .groups-import-section {
            margin-top: var(--space-xl);
            padding-top: var(--space-xl);
            border-top: 1px solid var(--border-light);
            display: flex;
            justify-content: center;
            gap: var(--space-md);
        }

        .groups-import-btn {
            padding: var(--space-sm) var(--space-lg);
            border: 1px solid var(--border-medium);
            border-radius: var(--radius-md);
            background: var(--bg-primary);
            color: var(--color-gray-700);
            font-size: var(--font-size-md);
            cursor: pointer;
            transition: all var(--transition-base);
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }

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

        .groups-import-btn svg {
            width: 16px;
            height: 16px;
        }

        /* ===== STACK RANKING MODAL ===== */
        .stack-ranking-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(8px);
            z-index: var(--z-modal);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px;
        }

        .stack-ranking-modal-overlay.dock-open {
            justify-content: flex-start;
            padding-right: clamp(340px, 40vw, 680px);
            background: rgba(0, 0, 0, 0.58);
            z-index: 1100 !important;
        }

        .stack-ranking-modal {
            background: var(--bg-primary);
            width: 100%;
            max-width: min(1480px, calc(100dvw - clamp(16px, 5vw, 144px) - env(safe-area-inset-left) - env(safe-area-inset-right)));
            height: 100%;
            max-height: calc(100dvh - clamp(16px, 4vh, 112px) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-xl);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border: 1px solid var(--border-light);
            transition: transform 0.28s ease;
        }

        .stack-ranking-layout {
            width: 100%;
            display: flex;
            height: calc(100dvh - clamp(16px, 4vh, 112px) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
            max-height: calc(100dvh - clamp(16px, 4vh, 112px) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
            align-items: stretch;
            justify-content: center;
            gap: 0;
        }

        .stack-ranking-modal-overlay.dock-open .stack-ranking-layout {
            justify-content: flex-start;
            max-width: calc(100vw - clamp(340px, 40vw, 680px));
        }

        .stack-ranking-layout.dock-open .stack-ranking-modal {
            transform: translateX(0);
        }

        body.stack-ranking-real-dock-open #dock-panel {
            z-index: 2201 !important;
            top: 12px !important;
            bottom: 12px !important;
            height: auto !important;
            max-height: calc(100dvh - 24px) !important;
        }

        body.stack-ranking-real-dock-open .stack-ranking-modal-overlay {
            z-index: 1100 !important;
        }

        .stack-ranking-side-dock {
            width: 0;
            opacity: 0;
            height: 100%;
            max-height: 100%;
            overflow: hidden;
            background: var(--bg-primary);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-xl);
            transform: translateX(40px);
            transition: width 0.3s ease, opacity 0.25s ease, transform 0.3s ease;
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        .stack-ranking-side-dock-resize-grip {
            display: none;
            align-items: center;
            justify-content: center;
            padding: 8px 0 4px;
            cursor: ns-resize;
            touch-action: none;
            -ms-touch-action: none;
            user-select: none;
            -webkit-user-select: none;
            background: linear-gradient(180deg, rgba(30, 41, 59, 0.5) 0%, rgba(30, 41, 59, 0.15) 100%);
            border-bottom: 1px solid var(--border-light);
        }

        .stack-ranking-side-dock-resize-grip-bar {
            width: 64px;
            height: 6px;
            border-radius: 999px;
            background: rgba(148, 163, 184, 0.8);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
        }

        .stack-ranking-side-dock.open {
            width: clamp(420px, 42vw, 760px);
            opacity: 1;
            transform: translateX(0);
            min-width: 420px;
            max-width: calc(100vw - 360px);
            resize: horizontal;
        }

        .stack-ranking-side-dock-header {
            background: #18181b;
            color: #fff;
            padding: 12px 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: 700;
            flex-shrink: 0;
        }

        .stack-ranking-side-dock-body {
            overflow: hidden;
            min-height: 0;
            flex: 1;
            display: flex;
            flex-direction: column;
        }


        .stack-ranking-header {
            background: #18181b;
            color: white;
            padding: 20px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
        }

        .stack-ranking-title-area {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .stack-ranking-icon {
            background: rgba(99, 102, 241, 0.2);
            padding: 10px;
            border-radius: 12px;
        }

        .stack-ranking-controls-shell {
            border-bottom: 1px solid var(--border-light);
            background: var(--bg-secondary);
        }

        .stack-ranking-controls-toggle {
            width: 100%;
            border: none;
            border-bottom: 1px solid var(--border-light);
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.94) 100%);
            color: #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 10px 14px;
            cursor: pointer;
            transition: background 0.2s ease, box-shadow 0.2s ease;
        }

        .stack-ranking-controls-toggle:hover {
            background: linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(30, 41, 59, 0.92) 100%);
        }

        .stack-ranking-controls-toggle-title {
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .stack-ranking-controls-toggle-meta {
            font-size: 11px;
            color: #94a3b8;
            flex: 1;
            text-align: right;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .stack-ranking-controls-toggle-chevron {
            font-size: 12px;
            color: #cbd5e1;
            line-height: 1;
        }

        .stack-ranking-controls-panel {
            max-height: 520px;
            overflow: hidden;
            transition: max-height 0.25s ease, opacity 0.22s ease;
            opacity: 1;
        }

        .stack-ranking-controls-panel.collapsed {
            max-height: 0;
            opacity: 0;
            pointer-events: none;
        }

        .stack-ranking-controls-toggle.is-collapsed {
            border-bottom-color: rgba(201, 169, 98, 0.45);
            box-shadow: inset 0 0 0 1px rgba(201, 169, 98, 0.22), 0 0 0 rgba(201, 169, 98, 0);
            animation: stackControlsCollapsedGlow 1.8s ease-in-out infinite;
        }

        .stack-ranking-controls-toggle.is-collapsed .stack-ranking-controls-toggle-title {
            color: #dbeafe;
            text-shadow: 0 0 10px rgba(201, 169, 98, 0.35);
        }

        .stack-ranking-controls-toggle.is-collapsed .stack-ranking-controls-toggle-meta {
            color: #93c5fd;
        }

        .stack-ranking-controls-toggle.is-collapsed .stack-ranking-controls-toggle-chevron {
            color: #bae6fd;
            text-shadow: 0 0 8px rgba(14, 165, 233, 0.4);
        }

        .stack-ranking-controls-toggle.is-collapsed.pulse-attention {
            animation: stackControlsCollapsedGlow 0.95s ease-in-out infinite;
            box-shadow: inset 0 0 0 1px rgba(201, 169, 98, 0.55), 0 0 26px rgba(201, 169, 98, 0.55);
        }

        .stack-ranking-controls-toggle.is-collapsed.pulse-attention .stack-ranking-controls-toggle-title {
            color: #f0f9ff;
            text-shadow: 0 0 18px rgba(14, 165, 233, 0.75);
        }

        .stack-ranking-controls-toggle.is-collapsed.pulse-attention .stack-ranking-controls-toggle-meta {
            color: #bae6fd;
        }

        @keyframes stackControlsCollapsedGlow {
            0% {
                box-shadow: inset 0 0 0 1px rgba(201, 169, 98, 0.14), 0 0 0 rgba(14, 165, 233, 0);
            }
            50% {
                box-shadow: inset 0 0 0 1px rgba(201, 169, 98, 0.45), 0 0 18px rgba(14, 165, 233, 0.35);
            }
            100% {
                box-shadow: inset 0 0 0 1px rgba(201, 169, 98, 0.14), 0 0 0 rgba(14, 165, 233, 0);
            }
        }

        .stack-ranking-controls {
            background: var(--bg-secondary);
            padding: 16px 24px;
            border-bottom: 1px solid var(--border-light);
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            align-items: center;
        }

        .stack-ranking-control-group {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .stack-ranking-control-group label {
            font-size: 12px;
            font-weight: 700;
            color: var(--color-gray-600);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .stack-ranking-control-group select,
        .stack-ranking-control-group input[type="number"],
        .stack-ranking-control-group input[type="text"] {
            background: var(--bg-primary);
            border: 1px solid var(--border-light);
            border-radius: 6px;
            padding: 8px 12px;
            font-size: 13px;
            color: var(--color-gray-900);
            outline: none;
            transition: border-color 0.2s;
        }

        .stack-ranking-control-group select:focus,
        .stack-ranking-control-group input[type="number"]:focus,
        .stack-ranking-control-group input[type="text"]:focus {
            border-color: var(--color-primary);
        }

        .stack-ranking-toggle-group {
            display: flex;
            background: var(--bg-primary);
            border: 1px solid var(--border-light);
            border-radius: 8px;
            overflow: hidden;
        }

        .stack-ranking-toggle-btn {
            padding: 8px 16px;
            font-size: 12px;
            font-weight: 600;
            border: none;
            background: transparent;
            color: var(--color-gray-600);
            cursor: pointer;
            transition: all 0.2s;
        }

        .stack-ranking-toggle-btn.active {
            background: var(--color-primary);
            color: white;
        }

        .stack-ranking-toggle-btn:hover:not(.active) {
            background: var(--bg-secondary);
        }

        .stack-ranking-body {
            flex: 1;
            overflow: auto;
            padding: 24px;
            background: var(--bg-secondary);
        }

        .stack-ranking-summary {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
            margin-bottom: 24px;
        }

        .stack-ranking-stat-card {
            background: var(--bg-primary);
            border: 1px solid var(--border-light);
            border-radius: 12px;
            padding: 16px;
            text-align: center;
        }

        .stack-ranking-stat-label {
            font-size: 11px;
            font-weight: 700;
            color: var(--color-gray-500);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 8px;
        }

        .stack-ranking-stat-value {
            font-size: 24px;
            font-weight: 800;
            color: var(--color-gray-900);
            font-family: var(--font-family-mono);
        }

        .stack-ranking-chart-container {
            background: var(--bg-primary);
            border: 1px solid var(--border-light);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 24px;
        }

        .stack-ranking-chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }

        .stack-ranking-chart-title {
            font-size: 14px;
            font-weight: 700;
            color: var(--color-gray-800);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .stack-ranking-bar-chart {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .stack-ranking-bar-row {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .stack-ranking-bar-rank {
            width: 32px;
            font-size: 12px;
            font-weight: 800;
            color: var(--color-gray-500);
            text-align: center;
            flex-shrink: 0;
        }

        .stack-ranking-bar-label {
            width: 140px;
            font-size: 12px;
            font-weight: 600;
            color: var(--color-gray-800);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex-shrink: 0;
        }

        .stack-ranking-bar-track {
            flex: 1;
            height: 28px;
            background: var(--bg-secondary);
            border-radius: 6px;
            overflow: hidden;
            position: relative;
            min-width: 0;
        }

        .stack-ranking-bar-fill {
            height: 100%;
            border-radius: 6px;
            transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 8px;
        }

        .stack-ranking-bar-exempt {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: 0 10px;
            font-size: 11px;
            font-weight: 700;
            color: var(--color-gray-500);
            font-style: italic;
            letter-spacing: 0.15px;
        }

        .stack-ranking-bar-value {
            font-size: 11px;
            font-weight: 700;
            color: white;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            white-space: nowrap;
        }

        .stack-ranking-bar-value-right,
        .stack-ranking-bar-value-outside {
            font-size: 11px;
            font-weight: 800;
            color: var(--color-gray-700);
            line-height: 1.1;
            letter-spacing: 0.2px;
            font-variant-numeric: tabular-nums;
            font-feature-settings: "tnum" 1;
            white-space: nowrap;
            text-align: right;
            width: 148px;
            flex: 0 0 148px;
        }

        .stack-ranking-group-section {
            background: var(--bg-primary);
            border: 1px solid var(--border-light);
            border-radius: 12px;
            margin-bottom: 16px;
            overflow: hidden;
        }

        .stack-ranking-group-header {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
            padding: 16px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            transition: background 0.2s;
        }

        .stack-ranking-group-header:hover {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
        }

        .stack-ranking-group-name {
            font-size: 15px;
            font-weight: 700;
            color: var(--color-gray-900);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .stack-ranking-group-count {
            font-size: 12px;
            font-weight: 600;
            color: var(--color-primary);
            background: rgba(99, 102, 241, 0.1);
            padding: 4px 10px;
            border-radius: 20px;
        }

        .stack-ranking-group-stats {
            display: flex;
            gap: 20px;
        }

        .stack-ranking-group-stat {
            text-align: right;
        }

        .stack-ranking-group-stat-label {
            font-size: 10px;
            font-weight: 600;
            color: var(--color-gray-500);
            text-transform: uppercase;
        }

        .stack-ranking-group-stat-value {
            font-size: 14px;
            font-weight: 800;
            color: var(--color-gray-900);
            font-family: var(--font-family-mono);
        }

        .stack-ranking-group-content {
            padding: 16px 20px;
            max-height: 400px;
            overflow-y: auto;
        }

        .stack-ranking-table {
            width: 100%;
            border-collapse: collapse;
        }

        .stack-ranking-table th {
            text-align: left;
            padding: 10px 12px;
            font-size: 11px;
            font-weight: 700;
            color: var(--color-gray-500);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-light);
            position: sticky;
            top: 0;
        }

        .stack-ranking-table th.sortable {
            cursor: pointer;
            transition: color 0.2s;
        }

        .stack-ranking-table th.sortable:hover {
            color: var(--color-primary);
        }

        .stack-ranking-table th.sorted {
            color: var(--color-primary);
        }

        .stack-ranking-table td {
            padding: 12px;
            font-size: 13px;
            color: var(--color-gray-800);
            border-bottom: 1px solid var(--border-light);
        }

        .stack-ranking-table tr:hover {
            background: var(--bg-secondary);
        }

        .stack-ranking-table .numeric {
            text-align: right;
            font-family: var(--font-family-mono);
            font-weight: 600;
        }

        .stack-ranking-table .rank-cell {
            font-weight: 800;
            color: var(--color-gray-500);
            width: 50px;
        }

        .stack-ranking-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 700;
        }

        .stack-ranking-badge.top {
            background: rgba(16, 185, 129, 0.15);
            color: #059669;
        }

        .stack-ranking-badge.bottom {
            background: rgba(239, 68, 68, 0.15);
            color: #dc2626;
        }

        .stack-ranking-legend {
            display: flex;
            gap: 16px;
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid var(--border-light);
        }

        .stack-ranking-legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            color: var(--color-gray-600);
        }

        .stack-ranking-legend-color {
            width: 16px;
            height: 16px;
            border-radius: 4px;
        }

        /* Stack ranking responsive behavior */
        @media (max-width: 1440px) {
            .stack-ranking-modal-overlay {
                padding: 12px;
            }

            .stack-ranking-layout {
                width: 100%;
                max-width: calc(100vw - 24px);
            }

            .stack-ranking-modal {
                min-width: 0;
                flex: 1 1 auto;
                max-width: none;
            }

            .stack-ranking-side-dock.open {
                width: clamp(380px, 40vw, 680px);
            }
        }

        @media (max-width: 1180px) {
            .stack-ranking-header {
                padding: 14px 16px;
            }

            .stack-ranking-controls-toggle {
                padding: 9px 12px;
            }

            .stack-ranking-controls {
                padding: 12px 14px;
                gap: 10px;
            }

            .stack-ranking-body {
                padding: 14px;
            }

            .stack-ranking-stat-value {
                font-size: 20px;
            }

            .stack-ranking-side-dock.open {
                width: clamp(340px, 44vw, 560px);
                min-width: 320px;
            }
        }

        @media (max-width: 1024px) {
            .stack-ranking-modal-overlay {
                padding: 8px;
            }

            .stack-ranking-layout {
                flex-direction: column;
                height: calc(var(--app-vh, 100vh) - 16px);
                max-height: calc(var(--app-vh, 100vh) - 16px);
                align-items: stretch;
                justify-content: flex-start;
            }

            .stack-ranking-modal {
                height: 58vh;
                max-height: none;
                width: 100%;
                border-radius: 12px;
            }

            .lot-scenario-dashboard.command-center-slid {
                left: auto !important;
                right: 6px !important;
                width: 44px;
                max-width: 44px;
            }

            .stack-ranking-side-dock {
                width: 100%;
                max-width: 100%;
                height: 0;
                border-radius: 12px;
                transform: translateY(10px);
                transition: height 0.28s ease, opacity 0.25s ease, transform 0.28s ease;
                resize: none;
            }

            .stack-ranking-side-dock.open {
                width: 100%;
                min-width: 0;
                max-width: 100%;
                height: 38vh;
                max-height: 38vh;
                transform: translateY(0);
                resize: vertical;
            }

            .stack-ranking-side-dock.open .stack-ranking-side-dock-resize-grip {
                display: flex;
            }
        }

        @media (max-width: 720px) {
            .stack-ranking-controls-toggle-meta {
                font-size: 10px;
            }

            .stack-ranking-title-area {
                gap: 10px;
            }

            .stack-ranking-icon {
                padding: 8px;
                border-radius: 10px;
            }

            .stack-ranking-control-group {
                width: 100%;
                flex-wrap: wrap;
                gap: 6px;
            }

            .stack-ranking-control-group label {
                min-width: 86px;
            }

            .stack-ranking-control-group select,
            .stack-ranking-control-group input[type="number"],
            .stack-ranking-control-group input[type="text"] {
                flex: 1 1 auto;
                min-width: 0;
            }

            .stack-ranking-toggle-group {
                width: 100%;
            }

            .stack-ranking-toggle-btn {
                flex: 1;
                padding: 8px 10px;
            }

            .stack-ranking-summary {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 10px;
            }

            .stack-ranking-chart-container {
                padding: 12px;
            }

            .stack-ranking-bar-label {
                width: 96px;
            }

            .stack-ranking-legend {
                flex-wrap: wrap;
                gap: 10px;
            }
        }

        @media (max-width: 768px) {

            .stack-ranking-modal {
                height: 100%;
                min-height: 0;
                max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
                display: flex;
                flex-direction: column;
            }

            .stack-ranking-body {
                min-height: 0;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }
        }

        /* Mobile Scroll Hint */
        #toolbar-scroll-hint {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: var(--toolbar-height);
            background: rgba(10, 15, 26, 0.7);
            z-index: 560;
            display: none;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            transition: opacity 0.5s ease;
        }

        .scroll-hint-animation {
            display: flex;
            align-items: center;
            gap: 10px;
            color: rgba(255, 255, 255, 0.9);
            font-weight: 500;
            font-size: 14px;
        }

        .scroll-hint-animation span {
            animation: scroll-hint-text-pulse 1.5s ease-in-out infinite;
        }

        .scroll-hint-hand {
            width: 24px;
            height: 24px;
            animation: swipe-hint 1.5s infinite ease-in-out;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        }

        @keyframes swipe-hint {
            0% {
                transform: translateX(10px);
                opacity: 0;
            }

            50% {
                opacity: 1;
            }

            100% {
                transform: translateX(-10px);
                opacity: 0;
            }
        }

        @keyframes scroll-hint-text-pulse {
            0%, 100% {
                opacity: 0.72;
            }
            50% {
                opacity: 1;
            }
        }

        #dock-content .parcel-tip {
            max-height: none !important;
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;
            border-radius: 0 !important;
            box-shadow: none !important;
            margin: 0 !important;
            background: transparent !important;
        }

        #dock-content .popup-image-container {
            height: 120px !important;
            min-height: 120px !important;
            display: block !important;
            flex: none !important;
        }

        #dock-content .parcel-header h3 {
            font-size: 16px;
        }

        /* Tabulator Custom Styles */
        .tabulator {
            border: none;
            background-color: transparent;
        }

        .tabulator .tabulator-header {
            font-weight: 700;
            color: var(--color-dark);
            background-color: var(--bg-secondary);
            border-bottom: 1px solid var(--border-light);
        }

        .tabulator .tabulator-header .tabulator-col {
            background-color: var(--bg-secondary);
            border-right: 1px solid var(--border-light);
        }

        .tabulator-row {
            border-bottom: 1px solid var(--border-light);
            background-color: var(--color-white);
        }

        .tabulator-row.tabulator-selected {
            background-color: #fef3c7 !important;
            color: #92400e !important;
        }

        .tabulator-row.tabulator-selected:hover {
            background-color: #fde68a !important;
        }

        .tabulator-row.tabulator-selectable:hover {
            background-color: var(--bg-secondary);
            cursor: pointer;
        }

        .tabulator-row.tabulator-selected .tabulator-cell {
            border-right: 1px solid #fde68a;
        }

        /* Hide filters by default until class is added */
        .tabulator .tabulator-header .tabulator-header-filter {
            display: none;
        }

        .filters-visible .tabulator .tabulator-header .tabulator-header-filter {
            display: block;
        }

        /* ===== MOBILE RESPONSIVE STYLES ===== */
        @media (max-width: 768px) {
            /* Keep all app modals fully reachable on mobile viewports */
            #upload-modal,
            #images-modal,
            #mortgage-calc-modal,
            #growth-calc-modal,
            #groups-modal,
            .stack-ranking-modal-overlay,
            #TIF-root > div {
                align-items: flex-start !important;
                padding-top: calc(8px + env(safe-area-inset-top)) !important;
                padding-right: calc(8px + env(safe-area-inset-right)) !important;
                padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
                padding-left: calc(8px + env(safe-area-inset-left)) !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch;
                box-sizing: border-box;
            }

            #shortcuts-modal {
                align-items: center !important;
                justify-content: center !important;
                padding: calc(14px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left)) !important;
                overflow-y: auto !important;
            }

            .shortcuts-content,
            .upload-modal-content,
            .images-modal-content,
            .mortgage-calc-content,
            .growth-calc-content,
            .groups-modal-content,
            .stack-ranking-modal,
            #TIF-root > div > div {
                width: min(100%, 1200px) !important;
                max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
                margin: 0 auto !important;
                box-sizing: border-box;
            }

            #lightbox-modal {
                padding: calc(10px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left)) !important;
                overflow-y: auto;
            }

            .lightbox-content {
                width: min(96vw, 760px);
                max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
                padding: 10px;
            }

            .lightbox-img {
                max-height: calc(52dvh - env(safe-area-inset-top));
            }

            .lightbox-close {
                position: fixed;
                top: calc(10px + env(safe-area-inset-top));
                right: calc(10px + env(safe-area-inset-right));
                z-index: 1;
            }

            /* Prevent iOS Safari auto-zoom on input focus (requires 16px minimum) */
            input[type="text"],
            input[type="search"],
            input[type="email"],
            input[type="number"],
            input[type="tel"],
            input[type="url"],
            input[type="password"],
            textarea,
            select {
                font-size: 16px !important;
                touch-action: manipulation; /* Prevent double-tap zoom */
            }

            /* Center popup on mobile screens */
            .ol-popup {
                position: fixed !important;
                top: 50% !important;
                left: calc(12px + env(safe-area-inset-left)) !important;
                right: calc(12px + env(safe-area-inset-right)) !important;
                transform: translateY(-50%) !important;
                bottom: auto !important;
                margin: 0 !important;
                width: auto !important;
                min-width: 0 !important;
                max-width: 100% !important;
                max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                z-index: 10000 !important;
                box-sizing: border-box !important;
                animation: none !important;   /* owner: no mobile animations */
            }
            
            @keyframes mobilePopupFadeIn {
                from {
                    opacity: 0;
                    transform: translateY(-50%) scale(0.95);
                }
                to {
                    opacity: 1;
                    transform: translateY(-50%) scale(1);
                }
            }

            /* TIF Impact Summary Bar: prevent overlap and ensure legibility on iPad portrait / narrow */
            .TIF-impact-summary-bar {
                box-sizing: border-box;
            }
            @media (orientation: portrait), (max-width: 1023px) {
                .TIF-impact-summary-bar .grid {
                    display: flex !important;
                    flex-direction: column !important;
                    align-items: center !important;
                    gap: 0.75rem !important;
                }
                .TIF-impact-summary-bar {
                    padding: 0.75rem 0.5rem !important;
                }
            }

            /* Ensure popup content is scrollable on mobile and doesn't overflow horizontally */
            .ol-popup .parcel-tip {
                max-height: calc(100dvh - 92px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
                overflow-y: auto;
                overflow-x: hidden;
                width: 100%;
                box-sizing: border-box;
            }
            
            /* Ensure all popup content respects container width */
            .ol-popup * {
                max-width: 100%;
                box-sizing: border-box;
            }
            
            /* Ensure images don't overflow */
            .ol-popup img {
                max-width: 100% !important;
                height: auto !important;
                object-fit: cover;
            }
            
            /* Ensure popup image container fits properly */
            .ol-popup .popup-image-container {
                width: 100% !important;
                max-width: 100% !important;
            }
            
            /* Ensure parcel header doesn't overflow */
            .ol-popup .parcel-header {
                width: 100%;
                max-width: 100%;
                word-wrap: break-word;
                overflow-wrap: break-word;
            }
            
            .ol-popup .parcel-header h3,
            .ol-popup .parcel-header p {
                max-width: 100%;
                overflow: visible;
                text-overflow: unset;
                white-space: normal;
            }

            /* Ensure summary header text can wrap and is never clipped */
            .ol-popup .parcel-header > div {
                flex-wrap: wrap;
                gap: 8px;
            }

            .ol-popup .parcel-header > div > div:first-child {
                min-width: 0;
                width: 100%;
            }

            /* Make docked panel use minimal height by default on mobile */
            #dock-panel {
                width: 100% !important;
                max-width: 100% !important;
                height: 20vh; /* Start at minimum until user manually resizes */
                min-height: 20vh;
                max-height: 80vh;
                position: fixed !important;
                top: auto !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                z-index: 9999 !important;
                border-top: 2px solid var(--border-medium) !important;
                border-left: none !important;
            }

            /* TASK 1: Hide maximize/minimize arrow — X close is sufficient on mobile */
            .dock-maximize-btn {
                display: none !important;
            }

            #dock-panel.mobile-maximized {
                height: calc(var(--app-vh, 100vh) - var(--toolbar-height) - 8px - env(safe-area-inset-bottom)) !important;
                max-height: calc(var(--app-vh, 100vh) - var(--toolbar-height) - 8px - env(safe-area-inset-bottom)) !important;
            }

            /* Stack all dock content vertically as a single scrollable column */
            #dock-content {
                display: flex !important;
                flex-direction: column !important;
                overflow-y: auto !important;
                height: 100% !important;
            }

            #dock-content .parcel-tip {
                display: flex !important;
                flex-direction: column !important;
                width: 100% !important;
            }

            /* Make tabs stack vertically */
            #dock-content .tab-header {
                flex-direction: column !important;
                width: 100% !important;
            }

            #dock-content .tab-btn {
                width: 100% !important;
                text-align: center !important;
                min-height: 62px !important;
                font-size: 10px !important;
                line-height: 1.08 !important;
                letter-spacing: 0.08em !important;
                white-space: normal !important;
                word-break: break-word !important;
                padding: 10px 6px !important;
            }

            #dock-content .tab-header--parcel {
                display: flex !important;
                flex-direction: row !important;
                gap: 0 !important;
            }

            #dock-content .tab-header--parcel .tab-btn {
                width: auto !important;
                flex: 1 1 0 !important;
                min-height: 34px !important;
                padding: 6px 3px !important;
                font-size: 9px !important;
                line-height: 1.05 !important;
                letter-spacing: 0.04em !important;
                white-space: nowrap !important;
                word-break: normal !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
            }

            #dock-content .tab-header--parcel .tab-btn:not(:first-child)::after {
                content: "|" !important;
                position: absolute !important;
                left: 0 !important;
                top: 50% !important;
                transform: translateY(-50%) !important;
                color: rgba(148, 163, 184, 0.72) !important;
                font-size: 10px !important;
                font-weight: 700 !important;
                line-height: 1 !important;
                pointer-events: none !important;
            }

            /* Ensure proper spacing for mobile dock */
            #dock-content .parcel-header {
                padding: 12px !important;
            }

            #dock-content .tab-body {
                padding: 10px !important;
                font-size: 14px !important;
            }

            #dock-content .tab-body h4 {
                font-size: 14px !important;
            }

            #dock-content .tab-body ul li {
                font-size: 13px !important;
                padding: 8px 0 !important;
            }

            /* Show image in dock on mobile */
            #dock-content .popup-image-container {
                display: block !important;
                height: 200px !important;
            }

            /* Improve dock header visibility on mobile */
            .dock-header {
                padding: 10px 12px !important;
                position: sticky !important;
                top: 0 !important;
                z-index: 10 !important;
                background: var(--bg-primary) !important;
            }

            /* Mobile dock resize handle */
            #dock-panel #resize-handle {
                display: none !important;
            }

            /* Create a visible drag handle at the top of mobile dock */
            #dock-panel::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 24px;
                background: var(--bg-secondary);
                border-top: 2px solid var(--border-medium);
                border-bottom: 1px solid var(--border-light);
                cursor: ns-resize;
                touch-action: none;
                z-index: 100;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            #dock-panel::after {
                content: '⋯';
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                height: 24px;
                color: var(--color-gray-500);
                font-size: 20px;
                font-weight: bold;
                line-height: 24px;
                pointer-events: none;
                z-index: 101;
            }

            /* Drag handle is the flex .dock-resize-handle child (legacy ::before/::after hidden below), so the header needs no top margin */
            #dock-panel .dock-header {
                margin-top: 0 !important;
            }
        }

        /* GIS command center: compact high-value actions on top of the map. */
        .gis-command-panel {
            position: absolute;
            left: calc(var(--overlay-command-left, 14px) + env(safe-area-inset-left));
            top: var(--overlay-command-top, calc(var(--toolbar-height) + 14px));
            width: min(360px, calc(100vw - 28px));
            max-height: var(--overlay-command-max-height, min(62vh, 680px));
            z-index: 430;
            padding: 12px;
            border-radius: 18px;
            border: 1px solid rgba(148, 163, 184, 0.32);
            background:
                radial-gradient(120% 120% at 0% 0%, rgba(201, 169, 98, 0.2) 0%, rgba(201, 169, 98, 0) 56%),
                linear-gradient(160deg, rgba(15, 23, 42, 0.72) 0%, rgba(15, 23, 42, 0.5) 100%);
            box-shadow:
                0 18px 38px rgba(2, 6, 23, 0.36),
                inset 0 1px 0 rgba(255, 255, 255, 0.14);
            color: rgba(248, 250, 252, 0.95);
            backdrop-filter: blur(22px) saturate(170%);
            -webkit-backdrop-filter: blur(22px) saturate(170%);
            pointer-events: auto;
            overflow-y: auto;
        }

        .light-mode .gis-command-panel {
            background:
                radial-gradient(120% 120% at 0% 0%, rgba(201, 169, 98, 0.16) 0%, rgba(201, 169, 98, 0) 56%),
                linear-gradient(160deg, rgba(255, 255, 255, 0.9) 0%, rgba(241, 245, 249, 0.74) 100%);
            border-color: rgba(148, 163, 184, 0.32);
            color: #0f172a;
            box-shadow:
                0 16px 32px rgba(15, 23, 42, 0.16),
                inset 0 1px 0 rgba(255, 255, 255, 0.82);
        }

        .gis-command-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 10px;
        }

        .gis-command-title-row {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
        }

        .gis-command-window-actions {
            display: flex;
            align-items: center;
            gap: 5px;
            flex: none;
        }

        .gis-command-window-btn,
        .gis-command-restore-btn {
            border: 1px solid rgba(148, 163, 184, 0.34);
            color: inherit;
            background: rgba(255, 255, 255, 0.09);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
            cursor: pointer;
            transition: transform 160ms ease, border-color 180ms ease, background 180ms ease, opacity 180ms ease;
        }

        .gis-command-window-btn {
            width: 24px;
            height: 24px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            font-weight: 800;
            line-height: 1;
        }

        .gis-command-window-btn:hover,
        .gis-command-window-btn:focus-visible,
        .gis-command-restore-btn:hover,
        .gis-command-restore-btn:focus-visible {
            border-color: rgba(201, 169, 98, 0.72);
            background: rgba(201, 169, 98, 0.2);
            outline: none;
            transform: translateY(-1px);
        }

        .gis-command-panel.is-hidden {
            display: none;
        }

        .gis-command-restore-btn {
            position: absolute;
            left: calc(var(--overlay-restore-left, 14px) + env(safe-area-inset-left));
            top: var(--overlay-restore-top, calc(var(--toolbar-height) + 56px));
            z-index: 431;
            display: none;
            align-items: center;
            gap: 6px;
            padding: 8px 11px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: rgba(248, 250, 252, 0.94);
            background:
                radial-gradient(120% 120% at 0% 0%, rgba(201, 169, 98, 0.2) 0%, rgba(201, 169, 98, 0) 56%),
                linear-gradient(160deg, rgba(15, 23, 42, 0.72) 0%, rgba(15, 23, 42, 0.5) 100%);
            backdrop-filter: blur(18px) saturate(165%);
            -webkit-backdrop-filter: blur(18px) saturate(165%);
        }

        .gis-command-restore-btn.is-visible {
            display: inline-flex;
        }

        .light-mode .gis-command-restore-btn,
        .light-mode .gis-command-window-btn {
            color: #0f172a;
            background: rgba(255, 255, 255, 0.72);
        }

        .gis-command-kicker {
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: rgba(125, 211, 252, 0.94);
        }

        .light-mode .gis-command-kicker {
            color: #0369a1;
        }

        .gis-command-title {
            margin-top: 3px;
            font-size: 15px;
            font-weight: 800;
            letter-spacing: -0.01em;
        }

        .gis-command-count {
            flex: none;
            min-width: 58px;
            padding: 6px 8px;
            border-radius: 12px;
            text-align: center;
            border: 1px solid rgba(125, 211, 252, 0.36);
            background: rgba(14, 165, 233, 0.15);
            font-variant-numeric: tabular-nums;
        }

        .gis-command-count strong {
            display: block;
            font-size: 18px;
            line-height: 1;
        }

        .gis-command-count span {
            display: block;
            margin-top: 2px;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(226, 232, 240, 0.76);
        }

        .light-mode .gis-command-count span {
            color: #475569;
        }

        .gis-command-stats {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
            margin-bottom: 10px;
        }

        .gis-command-stat {
            min-width: 0;
            padding: 8px;
            border-radius: 12px;
            border: 1px solid rgba(148, 163, 184, 0.26);
            background: rgba(255, 255, 255, 0.08);
        }

        .light-mode .gis-command-stat {
            background: rgba(255, 255, 255, 0.62);
        }

        .gis-command-stat-label {
            display: block;
            margin-bottom: 3px;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(203, 213, 225, 0.78);
        }

        .light-mode .gis-command-stat-label {
            color: #64748b;
        }

        .gis-command-stat-value {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 12px;
            font-weight: 800;
            font-variant-numeric: tabular-nums;
        }

        .gis-command-actions {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }

        .gis-command-actions .gis-command-action:first-child {
            grid-column: 1 / -1;
        }

        .gis-command-action {
            border: 1px solid rgba(148, 163, 184, 0.3);
            border-radius: 12px;
            padding: 8px 10px;
            color: inherit;
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.05) 100%);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
            cursor: pointer;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            transition: transform 160ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
        }

        .gis-command-action:hover,
        .gis-command-action:focus-visible {
            border-color: rgba(201, 169, 98, 0.72);
            background: linear-gradient(160deg, rgba(201, 169, 98, 0.26) 0%, rgba(125, 211, 252, 0.1) 100%);
            box-shadow: 0 10px 20px rgba(2, 132, 199, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18);
            outline: none;
            transform: translateY(-1px);
        }

        .gis-command-action:disabled {
            opacity: 0.48;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        /* Bulk-flag dropdown (apply one or more flags to all currently
           selected parcels via the bulk_parcels endpoint). */
        .gis-command-bulkflag { position: relative; grid-column: 1 / -1; }
        .gis-command-bulkflag > summary { list-style: none; cursor: pointer; text-align: center; }
        .gis-command-bulkflag > summary::-webkit-details-marker { display: none; }
        .gis-command-bulkflag[open] > summary { border-color: rgba(201, 169, 98, 0.72); background: linear-gradient(160deg, rgba(201, 169, 98, 0.26) 0%, rgba(125, 211, 252, 0.1) 100%); }
        .gis-command-bulkflag-pop {
            position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 10;
            padding: 12px; border-radius: 10px;
            background: rgba(15, 23, 42, 0.98); border: 1px solid rgba(148, 163, 184, 0.35);
            box-shadow: 0 16px 32px rgba(0,0,0,.45);
            display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow: auto;
        }
        .gis-command-bulkflag-pop label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: #e2e8f0; padding: 4px 6px; border-radius: 4px; cursor: pointer; text-transform: none; letter-spacing: 0; }
        .gis-command-bulkflag-pop label:hover { background: rgba(255,255,255,0.06); }
        .gis-command-bulkflag-pop input[type=checkbox] { accent-color: #c9a962; }
        .gis-command-bulkflag-hdr { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(148,163,184,0.9); margin-bottom: 4px; }
        .gis-command-bulkflag-sep { height: 1px; background: rgba(148,163,184,0.18); margin: 4px 0; }
        .gis-command-bulkflag-actions { display: flex; gap: 6px; margin-top: 8px; }
        .gis-command-bulkflag-actions .gis-command-action { flex: 1; }
        .gis-command-action--ghost { background: transparent; }
        .gis-command-bulkflag-status { font-size: 11px; color: rgba(148,163,184,0.9); margin-top: 6px; text-align: center; min-height: 14px; }

        @media (max-width: 768px), (max-height: 600px) {
            .gis-command-panel {
                top: auto;
                left: calc(var(--overlay-command-left-mobile, 10px) + env(safe-area-inset-left));
                right: calc(10px + env(safe-area-inset-right));
                bottom: var(--overlay-command-bottom, 84px);
                width: auto;
                padding: 10px;
            }

            .gis-command-restore-btn {
                top: auto;
                left: calc(var(--overlay-restore-left-mobile, 10px) + env(safe-area-inset-left));
                bottom: var(--overlay-restore-bottom, 84px);
            }

            .gis-command-stats {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .gis-command-stats .gis-command-stat:last-child {
                display: none;
            }
        }

        html.mobile-map-compact .map-layer-controls {
            max-width: min(190px, calc(100vw - 16px));
        }

        html.mobile-map-compact .map-search-overlay {
            max-width: min(320px, calc(100vw - 24px));
        }

        @supports (-webkit-touch-callout: none) {
            @media (max-width: 932px) {
                html.mobile-map-compact .map-search-overlay {
                    max-width: min(286px, calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)));
                    padding: 8px;
                }

                html.mobile-map-compact .map-search-container {
                    min-width: 0;
                }

                html.mobile-map-compact .map-search-container .search-input {
                    min-height: 40px;
                }

                html.mobile-map-compact .map-layer-controls {
                    top: calc(var(--overlay-controls-top, calc(var(--toolbar-height) + 10px)) + env(safe-area-inset-top));
                    max-height: min(46dvh, calc(100dvh - var(--toolbar-height) - 84px - env(safe-area-inset-bottom)));
                }

                html.mobile-map-compact .map-layer-controls:not(.collapsed) {
                    width: min(260px, calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)));
                }

                html.mobile-map-compact .gis-command-restore-btn {
                    padding: 10px 12px;
                    bottom: calc(var(--overlay-restore-bottom, 84px) + env(safe-area-inset-bottom));
                }

                html.mobile-map-compact .geolocate-overlay {
                    left: calc(10px + env(safe-area-inset-left));
                    bottom: calc(var(--overlay-utility-bottom, 112px) + env(safe-area-inset-bottom));
                }

                html.mobile-map-compact .streetview-overlay {
                    left: calc(10px + env(safe-area-inset-left));
                    bottom: calc(var(--overlay-utility-bottom, 112px) + 46px + env(safe-area-inset-bottom));
                }
            }
        }

        /* ═══════════════════════════════════════════════════════════════
           MOBILE REDESIGN — dock bottom-sheet + search overlay
           Scope: max-width 768px only. Desktop (≥769px) is unchanged.
           Design language: Eliot dark-glass — #0d1421 / #16202d surfaces,
           cyan #c9a962 accent, rounded corners, glass-morphism.
           ═══════════════════════════════════════════════════════════════ */

        /* ── Keyframes ── */
        @keyframes mobileSheetSlideUp {
            0%  { transform: translateY(100%); opacity: 0; }
            100%{ transform: translateY(0);    opacity: 1; }
        }

        /* ── Mobile dock: bottom-sheet ── */
        @media (max-width: 768px) {
            /* Reset the desktop right-panel geometry and become a bottom-sheet */
            #dock-panel {
                /* Geometry */
                top: auto !important;
                right: 0 !important;
                bottom: 0 !important;
                left: 0 !important;
                width: 100% !important;
                min-width: 0 !important;
                max-width: 100% !important;
                /* Definite height (not auto) so #dock-content's flex:1/overflow-y
                   actually scrolls — with height:auto the sheet sized to content and
                   clipped (the tabs + lower rows were cut off, nothing scrolled). */
                height: 62vh !important;
                min-height: 62vh !important;
                max-height: 88vh !important;

                /* Rounded top corners — rounded bottom stays flush to viewport */
                border-radius: 20px 20px 0 0 !important;
                border-left: none !important;
                border-top: 1px solid rgba(201, 169, 98, 0.22) !important;
                border-right: none !important;
                border-bottom: none !important;

                /* Eliot-matched dark-glass surface */
                background: #16202d !important;
                backdrop-filter: blur(20px) saturate(180%) !important;
                -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
                box-shadow:
                    0 -8px 32px rgba(0, 0, 0, 0.55),
                    0 -2px 0 rgba(201, 169, 98, 0.18),
                    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;

                /* Stack above map, below modals */
                z-index: 1200 !important;

                /* Flex column so header stays fixed and content scrolls */
                display: flex;
                flex-direction: column !important;
                overflow: hidden !important;
            }

            /* Fiscal-impact tint preserved on mobile */
            html.fiscal-impact-active #dock-panel {
                background:
                    linear-gradient(160deg, rgba(7, 40, 61, 0.96) 0%, rgba(30, 58, 138, 0.92) 46%, rgba(15, 118, 110, 0.88) 100%) !important;
                border-top-color: rgba(34, 211, 238, 0.55) !important;
                box-shadow:
                    0 -8px 32px rgba(0, 0, 0, 0.5),
                    0 -2px 0 rgba(34, 211, 238, 0.32),
                    0 0 32px rgba(37, 99, 235, 0.28) !important;
            }

            /* ── Grab / drag handle ── Hide the legacy 24px ::before/::after bar
               (duplicate of this handle), so the top is just a slim pill. */
            #dock-panel::before, #dock-panel::after { display: none !important; }
            .dock-resize-handle {
                position: relative !important;
                left: auto !important;
                right: auto !important;
                top: auto !important;
                bottom: auto !important;
                width: 100% !important;
                height: 16px !important;
                font-size: 0 !important;
                flex-shrink: 0 !important;
                cursor: ns-resize !important;
                background: transparent !important;
                border-bottom: none !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                writing-mode: horizontal-tb !important;
                touch-action: none !important;
            }

            /* The pill indicator */
            .dock-resize-handle::before {
                content: '' !important;
                position: static !important;
                transform: none !important;
                display: block !important;
                width: 40px !important;
                height: 4px !important;
                border-radius: 2px !important;
                background: rgba(148, 163, 184, 0.45) !important;
                opacity: 1 !important;
                transition: width 0.2s ease, background 0.2s ease !important;
            }

            .dock-resize-handle:hover::before,
            .dock-resize-handle:active::before {
                width: 56px !important;
                height: 4px !important;
                background: rgba(201, 169, 98, 0.7) !important;
            }

            /* ── Dock header: compact, touch-friendly ── */
            #dock-panel .dock-header,
            .dock-header {
                padding: 10px 16px 10px 16px !important;
                min-height: 44px !important;
                background: transparent !important;
                border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
                flex-shrink: 0 !important;
            }

            #dock-panel .dock-header h3,
            .dock-header h3 {
                font-size: 14px !important;
                font-weight: 700 !important;
                color: #e2e8f0 !important;
            }

            /* Close and maximize buttons — 44px touch targets */
            #dock-panel .dock-close-btn,
            .dock-close-btn {
                width: 44px !important;
                height: 44px !important;
                font-size: 18px !important;
                border-radius: 12px !important;
                color: rgba(148, 163, 184, 0.9) !important;
                background: rgba(255, 255, 255, 0.05) !important;
            }

            #dock-panel .dock-close-btn:hover,
            .dock-close-btn:hover {
                background: rgba(220, 38, 38, 0.18) !important;
                color: #fca5a5 !important;
            }

            /* TASK 1: maximize btn already display:none above; sizing rules also suppressed */
            /* #dock-panel .dock-maximize-btn sizing removed — hidden on mobile */

            .dock-header-actions {
                gap: 6px !important;
                /* Only the X remains; right-align it cleanly */
                justify-content: flex-end !important;
            }

            /* ── Tab header row: sticky so it doesn't scroll with content ──
               TASK 3: position:sticky resolves against #dock-content (the scroll
               container). #dock-panel has overflow:hidden but #dock-content sits
               between them, so sticky is correctly scoped to #dock-content.
               .parcel-tip-shell is overflow:visible (set below), so it does NOT
               trap sticky either. Background is solid so scrolled rows don't bleed
               through the bar. */
            #dock-content .tab-header,
            #dock-content .tab-header--parcel {
                /* Override the compact default that stacks tabs vertically */
                flex-direction: row !important;
                flex-wrap: nowrap !important;
                overflow-x: auto !important;
                /* NO -webkit-overflow-scrolling here — it breaks position:sticky on iOS Safari */
                scrollbar-width: none !important;
                position: sticky !important;
                top: 0 !important;
                z-index: 10 !important;
                /* TASK 3: solid opaque dark background — rows cannot bleed through */
                background: #16202d !important;
                backdrop-filter: none !important;   /* no blur needed over solid bg */
                -webkit-backdrop-filter: none !important;
                border-bottom: 1px solid rgba(201, 169, 98, 0.22) !important;
                padding: 0 4px !important;
                gap: 2px !important;
                flex-shrink: 0 !important;
            }

            /* Hide scrollbar on tab row (WebKit) */
            #dock-content .tab-header::-webkit-scrollbar,
            #dock-content .tab-header--parcel::-webkit-scrollbar {
                display: none !important;
            }

            /* Tab buttons: horizontally scrollable, touch-friendly */
            #dock-content .tab-btn {
                font-size: 10px !important;
                font-weight: 700 !important;
                padding: 10px 12px !important;
                white-space: nowrap !important;
                flex-shrink: 0 !important;
                width: auto !important;
                min-height: 40px !important;
                text-align: center !important;
                border-radius: 0 !important;
                letter-spacing: 0.04em !important;
                color: rgba(148, 163, 184, 0.85) !important;
                border-bottom: 2px solid transparent !important;
                transition: color 0.15s ease, border-bottom-color 0.15s ease !important;
            }

            #dock-content .tab-btn.active {
                color: #c9a962 !important;
                border-bottom-color: #c9a962 !important;
            }

            /* ── Dock content scrollable body ── */
            #dock-content {
                flex: 1 !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                /* NO -webkit-overflow-scrolling here — this is the dock scroll container,
                   and the legacy momentum flag makes the sticky tab bar (.tab-header--parcel)
                   scroll away instead of pinning on iOS. Momentum scroll is the iOS default
                   since iOS 13, so removing it costs nothing and lets sticky work. */
                min-height: 0 !important;
                padding-top: 0 !important;          /* TASK 1: kill any inherited top pad */
                padding-bottom: calc(var(--gpwa-h, 52px) + env(safe-area-inset-bottom, 16px) + 8px) !important;
            }

            /* Tab body inherits flex-scroll from parent; add padding */
            #dock-content .tab-body {
                padding: 6px 14px !important;       /* TASK 1+2: was 12px 14px; top trimmed */
            }

            /* TASK 1: Inline padding: 20px on tab bodies — override top only.
               tab-owner/tab-assess are further zeroed in the zebra block below.
               This covers tab-photos, tab-tax, tab-flags, and any future tab. */
            #dock-content #tab-photos,
            #dock-content #tab-tax,
            #dock-content #tab-flags,
            #dock-content [id^="tab-"] {
                padding-top: 4px !important;        /* TASK 1: override inline 20px top */
            }

            /* TASK 2: Tighten h4 heading margins inside tab bodies */
            #dock-content .tab-body h4,
            #dock-content #tab-owner h4,
            #dock-content #tab-assess h4 {
                margin-top: 6px !important;         /* TASK 2: tighter section gaps */
                margin-bottom: 4px !important;
            }

            /* Parcel header on mobile: more compact but still readable */
            #dock-content .parcel-header h3 {
                font-size: 15px !important;
            }

            #dock-content .parcel-header p {
                font-size: 11px !important;
            }

            /* Parcel tip padding */
            #dock-content .parcel-tip {
                padding: 0 !important;
            }

            /* TASK 1: parcel-tip-shell — ensure no overflow:hidden traps sticky */
            #dock-content .parcel-tip-shell {
                overflow: visible !important;       /* sticky resolves against #dock-content */
                padding: 0 !important;
                /* Drop backdrop-filter on mobile: this is the DIRECT PARENT of the sticky
                   tab bar, and pre-iOS-15.4 Safari had a compositor bug where a blur layer
                   on the sticky element's parent breaks position:sticky. The blur is
                   invisible here anyway (the shell sits inside the opaque dock). */
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }

            /* Images hidden (handled elsewhere, preserve) */
            #dock-content .popup-image-container {
                display: none !important;
            }

            /* stack-ranking real-dock on mobile: show above bottom-sheet */
            body.stack-ranking-real-dock-open #dock-panel {
                top: auto !important;
                height: auto !important;
                max-height: 68vh !important;
            }

            /* TASK 3: Dock close is now instant — no slide-out animation needed.
               JS no longer adds rio-dock--closing (see dockCloseBtn.onclick patch below),
               but keep this rule harmless in case something else triggers it. */
            #dock-panel.rio-dock--closing {
                animation: none !important;
                transform: none !important;
                transition: none !important;
                pointer-events: none !important;
            }

            /* TASK 3: No slide-in animation for the dock on mobile — appear in place */
            #dock-panel.stack-dock-slide-in {
                animation: none !important;
            }

            /* TASK 3: Suppress the obsolete "Swipe for more" hint overlay */
            .mobile-nav-swipe-demo {
                display: none !important;
            }
        }

        /* ── TASK: Group Summary zebra rows + bottom-gap fix (mobile only) ── */
        @media (max-width: 768px) {
            /* ── TASK 2: Bottom-gap fix ─────────────────────────────────────────
               Root cause A: the earlier block (line ~10829) sets min-height:20vh on
               #dock-panel; the iOS bottom-sheet block only sets height:auto, leaving
               min-height forcing a tall panel for short content.
               Root cause B: #dock-content padding-bottom ~94px was designed to clear
               the nav, but gis-pwa.css already lifts the whole panel above the nav
               via bottom:calc(var(--gpwa-h)+safe-area) — the big padding is dead space.
               Fix: override min-height → auto (content-sized), and reduce padding-bottom
               to 10px (just enough to keep the last row clear of the sheet's bottom
               edge; the sheet's own bottom offset already clears the nav entirely).
               Tall content (full parcel INFO) still scrolls within max-height:72vh set
               by the iOS block; the last row is safely above the nav because the whole
               panel sits above it at bottom:calc(--gpwa-h + safe-area). ────────── */
            #dock-panel {
                min-height: auto !important;   /* was 20vh in older mobile block — causes blank band for short content */
            }
            #dock-content {
                padding-bottom: 10px !important;   /* was ~94px; sheet bottom already clears nav via gis-pwa.css */
            }

            /* ── TASK 1: Group Summary / multi-select — flatten to zebra rows ──
               Desktop (>=769px) is byte-for-byte unchanged (all rules inside this
               @media block). We override the inline-styled bubble cards via class
               hooks added to the JS template literal (.ms-row, .ms-list, etc.).
               Inline styles take precedence over class rules at the same level, so
               we use !important to win the cascade. ─────────────────────────────

               Strategy:
               • Strip bubble border / border-radius / background / box-shadow on
                 every .ms-row card.
               • Apply zebra alternation via nth-child(even) on .ms-list.
               • Keep all colored NUMBER text (green/amber/blue) — only the boxes go.
               • Keep the % of Town Acreage sub-line (.summary-town-meta) below value.
               • Banner (.ms-banner) stays as a compact header but drops bubble chrome.
               • Averages grid collapses to single column (no room for side-by-side).
               • Per Acre items also flatten. ───────────────────────────────────── */

            /* Outer container: remove bubble card look */
            #dock-content .multi-select-summary,
            #popup-content .multi-select-summary {
                border-radius: 0 !important;
                box-shadow: none !important;
                background: transparent !important;
            }

            /* Banner: slim it down, remove heavy gradient blob look */
            #dock-content .multi-select-summary .ms-banner,
            #popup-content .multi-select-summary .ms-banner {
                padding: 10px 13px !important;
                border-radius: 0 !important;
            }

            /* Count badge: simpler on mobile */
            #dock-content .multi-select-summary .ms-count-badge,
            #popup-content .multi-select-summary .ms-count-badge {
                border-radius: 6px !important;
                padding: 4px 10px !important;
            }

            /* Body: remove side padding so rows reach edges */
            #dock-content .multi-select-summary .ms-body,
            #popup-content .multi-select-summary .ms-body {
                padding: 0 !important;
                background: transparent !important;
            }

            /* Section headings: small gutter */
            #dock-content .multi-select-summary .ms-section-heading,
            #popup-content .multi-select-summary .ms-section-heading {
                padding: 8px 13px 4px 13px !important;
                margin-bottom: 0 !important;
            }

            /* Main aggregate list: no gap — hairline separators do the dividing */
            #dock-content .multi-select-summary .ms-list,
            #popup-content .multi-select-summary .ms-list {
                gap: 0 !important;
                margin-bottom: 0 !important;
            }

            /* Every metric row: flat zebra treatment */
            #dock-content .multi-select-summary .ms-row,
            #popup-content .multi-select-summary .ms-row {
                background: transparent !important;
                border: none !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
                display: flex !important;
                justify-content: space-between !important;
                align-items: center !important;
                padding: 7px 13px !important;
                min-height: 38px !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }

            /* Zebra: even rows get a subtle tint */
            #dock-content .multi-select-summary .ms-list .ms-row:nth-child(even),
            #popup-content .multi-select-summary .ms-list .ms-row:nth-child(even) {
                background: rgba(255, 255, 255, 0.04) !important;
            }

            /* Value chips inside .ms-row: strip the bubble */
            #dock-content .multi-select-summary .ms-row .summary-text-chip,
            #popup-content .multi-select-summary .ms-row .summary-text-chip {
                background: transparent !important;
                border: none !important;
                border-radius: 0 !important;
                padding: 0 !important;
                font-weight: 700 !important;
            }

            /* Total Assessed Value row: keep green text, strip green box */
            #dock-content .multi-select-summary .ms-row--total,
            #popup-content .multi-select-summary .ms-row--total {
                border: none !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
            }
            #dock-content .multi-select-summary .ms-row--total .summary-total-assessed-value,
            #popup-content .multi-select-summary .ms-row--total .summary-total-assessed-value {
                background: transparent !important;
                border: none !important;
                border-radius: 0 !important;
                padding: 0 !important;
                font-size: 15px !important;
                /* color kept (inherits #166534 → green) */
            }

            /* % of Town Acreage: keep the sub-line, strip the purple wrapper box */
            #dock-content .multi-select-summary .ms-row .ms-pct-value,
            #popup-content .multi-select-summary .ms-row .ms-pct-value {
                background: transparent !important;
                border: none !important;
                border-radius: 0 !important;
                padding: 0 !important;
                text-align: right !important;
            }

            /* Town row label: mute the purple tint on mobile (keep text readable) */
            #dock-content .multi-select-summary .ms-row .summary-town-row-label,
            #popup-content .multi-select-summary .ms-row .summary-town-row-label {
                color: rgba(148, 163, 184, 0.9) !important;
            }
            #dock-content .multi-select-summary .ms-row .summary-town-row-label svg,
            #popup-content .multi-select-summary .ms-row .summary-town-row-label svg {
                stroke: rgba(148, 163, 184, 0.7) !important;
            }

            /* Averages section: collapse two-column grid to single column */
            #dock-content .multi-select-summary .ms-averages-grid,
            #popup-content .multi-select-summary .ms-averages-grid {
                display: block !important;
                padding: 0 !important;
            }
            #dock-content .multi-select-summary .ms-avg-list,
            #popup-content .multi-select-summary .ms-avg-list {
                gap: 0 !important;
            }
            #dock-content .multi-select-summary .ms-avg-row,
            #popup-content .multi-select-summary .ms-avg-row {
                padding: 7px 13px !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
                font-size: 13px !important;
            }
            #dock-content .multi-select-summary .ms-avg-list .ms-avg-row:nth-child(even),
            #popup-content .multi-select-summary .ms-avg-list .ms-avg-row:nth-child(even) {
                background: rgba(255, 255, 255, 0.04) !important;
            }

            /* Per Acre section: collapse to flat rows, strip bubble boxes */
            #dock-content .multi-select-summary .ms-per-acre-section,
            #popup-content .multi-select-summary .ms-per-acre-section {
                margin-top: 0 !important;
            }
            #dock-content .multi-select-summary .ms-acre-list,
            #popup-content .multi-select-summary .ms-acre-list {
                gap: 0 !important;
            }
            #dock-content .multi-select-summary .ms-acre-row,
            #popup-content .multi-select-summary .ms-acre-row {
                background: transparent !important;
                border: none !important;
                border-radius: 0 !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
                text-align: left !important;
                display: flex !important;
                justify-content: space-between !important;
                align-items: center !important;
                padding: 7px 13px !important;
                min-height: 38px !important;
            }
            #dock-content .multi-select-summary .ms-acre-list .ms-acre-row:nth-child(even),
            #popup-content .multi-select-summary .ms-acre-list .ms-acre-row:nth-child(even) {
                background: rgba(255, 255, 255, 0.04) !important;
            }
        }

        /* Owner request: never show the "Swipe to see more" toolbar hint overlay. */
        #toolbar-scroll-hint { display: none !important; }

        /* ── TASK: De-bubble pass 2 — flatten the remaining sporadic dock "bubbles"
           into clean full-width zebra rows (mobile only). Desktop (>=769px) is
           byte-for-byte unchanged: every rule lives inside @media (max-width:768px).
           Scope = the LIVE parcel dock template (generatePopupContent). We KEEP small
           icon squares, the parcel-ID title badge, photo thumbnails, and every
           functional onclick button (Add Photo / Edit / Save Flags / +Add / %Δ
           toggles / Save points). The dead #tab-analysis section never renders, so
           its grade-box / score-card markup is intentionally NOT targeted. ───────── */
        @media (max-width: 768px) {
            /* HEADER — transient "Checking Account…" pill → plain inline text */
            #dock-content [data-role="missing-account-pill"],
            #popup-content [data-role="missing-account-pill"] {
                background: transparent !important;
                border: none !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                padding: 0 !important;
                font-size: 10px !important;
            }

            /* VALUES — tax-exempt amber callout → flat hairline row (keep amber text) */
            #dock-content #tab-assess .assess-exempt-callout,
            #popup-content #tab-assess .assess-exempt-callout {
                background: transparent !important;
                border: none !important;
                border-radius: 0 !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
                padding: 8px 13px !important;
                margin-bottom: 0 !important;
                color: #d97706 !important;
            }

            /* VALUES — YR 2024 / YR 2025 column labels → plain colored text, no pill */
            #dock-content #tab-assess .assess-year-header,
            #popup-content #tab-assess .assess-year-header {
                background: transparent !important;
                border: none !important;
                border-radius: 0 !important;
                /* padding intentionally omitted — the template's runtime style-block sets
                   padding:4px 3px !important on these and wins on source order; that's fine. */
            }

            /* VALUES — %/Δ change-mode toggle wrapper → strip the pill box; the two
               toggle buttons inside (they have onclick) keep their own styling. */
            #dock-content #tab-assess .assess-changemode-wrap,
            #popup-content #tab-assess .assess-changemode-wrap {
                background: transparent !important;
                border: none !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                padding: 0 !important;
            }

            /* VALUES — 2025 Exemption Details rows → flat zebra rows (keep icon + colored value) */
            #dock-content #tab-assess .exempt-detail-row,
            #popup-content #tab-assess .exempt-detail-row {
                background: transparent !important;
                border: none !important;
                border-radius: 0 !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
                padding: 7px 13px !important;
                min-height: 38px !important;
            }
            #dock-content #tab-assess .exempt-detail-row:nth-child(even),
            #popup-content #tab-assess .exempt-detail-row:nth-child(even) {
                background: rgba(255, 255, 255, 0.04) !important;
            }

            /* TAX HISTORY — strip the framed card chrome; rows go edge-to-edge */
            #dock-content .parcel-tax-history-panel,
            #popup-content .parcel-tax-history-panel {
                background: transparent !important;
                border: none !important;
                border-radius: 0 !important;
                padding: 0 !important;
            }
            #dock-content .tax-history-table-scroll,
            #popup-content .tax-history-table-scroll {
                border: none !important;
                border-radius: 0 !important;
                border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
            }
            #dock-content #parcel-tax-history table,
            #popup-content #parcel-tax-history table {
                background: transparent !important;
            }

            /* FLAGS — collapse the 2-column category grid to a single column */
            #dock-content #parcel-feature-flags-container,
            #popup-content #parcel-feature-flags-container {
                grid-template-columns: 1fr !important;
                gap: 6px !important;
            }
            /* FLAGS — empty-state notice → flat */
            #dock-content #feature-flags-empty-state,
            #popup-content #feature-flags-empty-state {
                background: transparent !important;
                border: none !important;
                border-radius: 0 !important;
                padding: 8px 13px !important;
            }
            /* FLAGS — category cards (positive/negative/descriptive) → flat sections
               with just a top hairline; their colored heading row stays as a divider. */
            #dock-content [data-flag-category],
            #popup-content [data-flag-category] {
                background: transparent !important;
                border: none !important;
                border-radius: 0 !important;
                border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
                padding: 10px 0 4px !important;
                grid-column: auto !important;
            }
            /* FLAGS — checkbox rows → full-width zebra rows (kill the white pill) */
            #dock-content .feature-flag-checkbox,
            #popup-content .feature-flag-checkbox {
                background: transparent !important;
                border-radius: 0 !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
                padding: 9px 13px !important;
                min-height: 40px !important;
                transform: none !important;
            }
            #dock-content [data-flag-category] .feature-flag-checkbox:nth-of-type(even),
            #popup-content [data-flag-category] .feature-flag-checkbox:nth-of-type(even) {
                background: rgba(255, 255, 255, 0.04) !important;
            }
            #dock-content .feature-flag-checkbox:hover,
            #popup-content .feature-flag-checkbox:hover {
                background: rgba(255, 255, 255, 0.06) !important;
                transform: none !important;
            }
            /* FLAGS — "built-in" tag → plain muted text */
            #dock-content .feature-flag-builtin-tag,
            #popup-content .feature-flag-builtin-tag {
                background: transparent !important;
                border-radius: 0 !important;
                padding: 0 !important;
                color: #94a3b8 !important;
            }
            /* FLAGS — point-value editor rows → flat rows */
            #dock-content .feature-flag-point-row,
            #popup-content .feature-flag-point-row {
                background: transparent !important;
                border: none !important;
                border-radius: 0 !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
                padding: 7px 13px !important;
            }
        }

        /* ─────────────────────────────────────────────────────────────────
           OWNER REQUEST (2026-06-06): NO motion on mobile. Kill every entrance /
           pulse / slide / transition on phones — including the command-center
           load nudge/glow, the controls-docked cues, the gis-pwa bottom-sheet
           slides, toasts, and the navbar glow pulse. Uses animation-duration:0s
           (NOT animation:none) so any forwards-fill element still reaches its
           visible end state; the iOS-sheet vars are forced to 0ms so the few
           !important var-based sheet animations are instant too. No JS in this
           app waits on animationend/transitionend (verified) → safe. The handful
           of !important literal-duration mobile animations (mobilePopupFadeIn,
           mobileSheetSlideUp) are neutralised at their source above. ──────────── */
        @media (max-width: 768px) {
            :root {
                --ios-sheet-anim-in: 0ms linear !important;
                --ios-sheet-anim-out: 0ms linear !important;
            }
            *, *::before, *::after {
                animation-duration: 0s !important;
                animation-delay: 0s !important;
                animation-iteration-count: 1 !important;
                transition: none !important;
                scroll-behavior: auto !important;
            }
        }

        /* ── Mobile search overlay redesign ── */
        @media (max-width: 768px) {
            /* Bottom-left anchor → near-full-width, closer to bottom edge */
            .map-search-overlay {
                /* Span nearly full width with safe-area respect */
                left: calc(8px + env(safe-area-inset-left)) !important;
                right: calc(8px + env(safe-area-inset-right)) !important;
                bottom: calc(var(--overlay-search-bottom, 14px) + env(safe-area-inset-bottom)) !important;
                width: auto !important;
                max-width: none !important;

                /* Stronger glass on mobile */
                background: linear-gradient(160deg, rgba(13, 20, 33, 0.82) 0%, rgba(22, 32, 45, 0.76) 100%) !important;
                border: 1px solid rgba(201, 169, 98, 0.22) !important;
                border-radius: 16px !important;
                backdrop-filter: blur(20px) saturate(180%) !important;
                -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
                box-shadow:
                    0 8px 28px rgba(0, 0, 0, 0.45),
                    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;

                padding: 10px !important;
                gap: 8px !important;

                /* When dock is visible, shift upward so they don't overlap.
                   JS already writes --overlay-search-bottom; this is the fallback. */
                transition: bottom 0.26s ease, transform 0.28s ease !important;
            }

            /* Collapsed state: slide to the left edge but keep handle visible */
            .map-search-overlay.collapsed {
                transform: translateX(calc(-100% + 20px)) !important;
            }

            /* Search container: full width */
            .map-search-container {
                min-width: 0 !important;
                width: 100% !important;
                border-radius: 12px !important;
                padding: 4px !important;
                background: rgba(255, 255, 255, 0.07) !important;
                border: 1px solid rgba(148, 163, 184, 0.28) !important;
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
            }

            /* Input: thumb-friendly, 16px min to avoid iOS auto-zoom */
            .map-search-container .search-input {
                font-size: 16px !important;
                padding: 11px 14px !important;
                min-height: 44px !important;
                border-radius: 10px !important;
                width: 100% !important;
                color: #e2e8f0 !important;
                caret-color: #c9a962 !important;
                background: rgba(255, 255, 255, 0.06) !important;
                border-color: rgba(148, 163, 184, 0.26) !important;
            }

            /* Prominent cyan focus ring */
            .map-search-container .search-input:focus {
                border-color: #c9a962 !important;
                box-shadow:
                    0 0 0 2px rgba(201, 169, 98, 0.28),
                    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
                background: rgba(201, 169, 98, 0.06) !important;
                outline: none !important;
            }

            /* Zone / feature filter selector: full width, touch-friendly */
            .map-filter-controls #zone-selector,
            #zone-selector {
                min-height: 44px !important;
                font-size: 15px !important;
                padding: 10px 12px !important;
                border-radius: 10px !important;
                width: 100% !important;
                background: rgba(22, 32, 45, 0.88) !important;
                color: #e2e8f0 !important;
                border: 1px solid rgba(201, 169, 98, 0.22) !important;
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
            }

            /* Collapse handle: taller touch target */
            .map-search-collapse-handle {
                width: 22px !important;
                min-height: 52px !important;
                border-radius: 0 12px 12px 0 !important;
                font-size: 14px !important;
            }

            /* Mobile hint label */
            .map-search-mobile-hint {
                font-size: 12px !important;
                padding: 5px 9px !important;
            }

            /* Search result rows (if any are rendered as list children of the overlay) */
            .map-search-overlay .search-result-item,
            .map-search-overlay [role="option"],
            .map-search-overlay .result-row {
                min-height: 44px !important;
                padding: 10px 14px !important;
                border-radius: 10px !important;
                margin: 2px 0 !important;
                font-size: 13px !important;
                line-height: 1.35 !important;
                background: rgba(255, 255, 255, 0.05) !important;
                border: 1px solid rgba(148, 163, 184, 0.16) !important;
                cursor: pointer !important;
                transition: background 0.15s ease !important;
            }

            .map-search-overlay .search-result-item:hover,
            .map-search-overlay [role="option"]:hover,
            .map-search-overlay .result-row:hover,
            .map-search-overlay .search-result-item:focus,
            .map-search-overlay [role="option"]:focus,
            .map-search-overlay .result-row:focus {
                background: rgba(201, 169, 98, 0.12) !important;
                border-color: rgba(201, 169, 98, 0.35) !important;
                color: #e0f2fe !important;
                outline: none !important;
            }
        }

        /* Landscape phone: tighten the sheet height */
        @media (max-width: 768px) and (orientation: landscape) and (max-height: 500px) {
            #dock-panel {
                max-height: 80vh !important;
            }

            #dock-content .tab-btn {
                padding: 8px 10px !important;
                min-height: 36px !important;
            }

            .map-search-overlay {
                bottom: calc(8px + env(safe-area-inset-bottom)) !important;
                padding: 6px 8px !important;
            }
        }

        /* ── mobile-map-compact class (added by JS on phones) ─ preserve search width ── */
        @media (max-width: 768px) {
            html.mobile-map-compact .map-search-overlay {
                /* JS-set class: keep full-width behaviour, remove the old max-width cap */
                max-width: none !important;
            }
        }
        /* ── Data Table: bottom-sheet geometry on mobile ──
           CRITICAL: NO display property here — not display:flex, not display:none.
           toggleTable() owns display via tc.style.display inline style.
           Any display:flex !important here would permanently beat tc.style.display='none'.
           CSS only sets shape, position, z-index when the element IS displayed. */
        @media (max-width: 768px) {
            #data-table-container {
                position: fixed !important;
                left: 0 !important;
                right: 0 !important;
                /* Sit above the tab bar */
                bottom: calc(var(--gpwa-h, 52px) + env(safe-area-inset-bottom, 0px)) !important;
                width: 100% !important;
                box-sizing: border-box !important;

                /* Height: JS writes tc.style.height = '42vh' on first open.
                   Constrain here; min-height ensures AG-Grid column headers are visible.
                   NOTE: height has no !important so JS inline style (applyTableHeight) wins
                   during drag-resize. min-height matches JS minHeight=180 for the same reason. */
                height: 42vh;
                min-height: 180px;
                max-height: 82vh !important;

                /* iOS-style rounded top sheet */
                border-radius: 20px 20px 0 0 !important;
                border-top: 1px solid rgba(201, 169, 98, 0.22) !important;
                border-left: none !important;
                border-right: none !important;
                border-bottom: none !important;

                /* Dark-glass surface matching the dock */
                background: #16202d !important;
                backdrop-filter: blur(20px) saturate(180%) !important;
                -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
                box-shadow:
                    0 -8px 32px rgba(0, 0, 0, 0.55),
                    0 -2px 0 rgba(201, 169, 98, 0.18),
                    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;

                z-index: 1200 !important;

                /* flex-direction set here (display is NOT set — JS owns it) */
                flex-direction: column !important;
                overflow: hidden !important;
            }

            /* Table header: touch-friendly */
            #table-header {
                flex-shrink: 0 !important;
                padding: 10px 14px !important;
                min-height: 44px !important;
                border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
                background: transparent !important;
            }

            .table-header-title {
                font-size: 14px !important;
                font-weight: 700 !important;
                color: #e2e8f0 !important;
            }

            .table-header-controls {
                flex-wrap: wrap !important;
                gap: 6px !important;
            }

            /* AG-Grid fills remaining height */
            #data-table {
                flex: 1 !important;
                min-height: 0 !important;
                overflow: hidden !important;
            }

            /* Table exit-animation: JS adds this class for 260ms before display:none */
            #data-table-container.rio-table--closing {
                transform: translateY(110%) !important;
                transition: transform 260ms cubic-bezier(0.4, 0, 1, 1) !important;
                pointer-events: none !important;
            }
        }

        /* Sheet slide animations — defined outside @media for maximum browser compat */
        @keyframes rio-sheet-slide-up {
            from { transform: translateY(100%); }
            to   { transform: translateY(0); }
        }
        @keyframes rio-sheet-slide-down {
            from { transform: translateY(0); }
            to   { transform: translateY(110%); }
        }

        /* ═══════════════════════════════════════════════════════════════
           REACT MODAL → iOS BOTTOM SHEET  (mobile only, @media max-width:768px)
           ═══════════════════════════════════════════════════════════════
           Each React wrapper (TIF, TIF-Compare, Stats, Compare, Groups,
           Edit, TIF-Side-by-Side) renders two levels into its root div:
             #*-root > div        ← the full-screen backdrop overlay
             #*-root > div > div  ← the content panel card
           On mobile we restyle those two levels to become an iOS-style
           bottom sheet: backdrop covers the screen from the top, content
           panel anchors to the bottom with rounded top corners + handle.
           CONSTRAINTS:
           - No display property set here — React owns it (returns null when closed).
           - No changes to React internals, open/close functions, or data.
           - Desktop (> 768px) is byte-for-byte unchanged.
           - z-index stays at 300000 — React writes it via inline style; no override needed.
           ═══════════════════════════════════════════════════════════════ */
        @media (max-width: 768px) {

            /* ── Shared bottom-sheet variables ── */
            :root {
                --ios-sheet-radius: 22px;
                --ios-sheet-handle-w: 40px;
                --ios-sheet-handle-h: 4px;
                --ios-sheet-bg: var(--cl-navy-2, #142840);
                --ios-sheet-border: rgba(201, 169, 98, 0.20);
                --ios-sheet-shadow: 0 -8px 40px rgba(0, 0, 0, 0.60),
                                    0 -2px 0 rgba(201, 169, 98, 0.16),
                                    inset 0 1px 0 rgba(255, 255, 255, 0.06);
                /* TASK 3: No slide animations — sheets appear/disappear instantly */
                --ios-sheet-anim-in:  0ms linear;
                --ios-sheet-anim-out: 0ms linear;
            }

            /* TASK 3: Neutralize any hardcoded animation on each sheet content element
               so panels appear in place with no translate/slide (variables handle most,
               but some rules have hardcoded fallback durations — override all) */
            #TIF-root > div > div,
            #tif-compare-root > div > div,
            #stats-root > div > div,
            #compare-root > div > div,
            #groups-root > div > div,
            #edit-root > div > div,
            .stack-ranking-modal,
            .mortgage-calc-content,
            .growth-calc-content,
            .shortcuts-content,
            .lot-scenario-dashboard.command-center,
            .anchor-panel {
                animation: none !important;
                transform: none !important;
            }

            /* TASK 3: Also neutralize exit animations — classes still added by JS but
               motion is suppressed; pointer-events:none from JS class still applies */
            #TIF-root > div.rio-sheet--closing > div,
            #tif-compare-root > div.rio-sheet--closing > div,
            #stats-root > div.rio-sheet--closing > div,
            #compare-root > div.rio-sheet--closing > div,
            #groups-root > div.rio-sheet--closing > div,
            #edit-root > div.rio-sheet--closing > div,
            #mortgage-calc-modal.rio-modal--closing .mortgage-calc-content,
            #growth-calc-modal.rio-modal--closing .growth-calc-content,
            #shortcuts-modal.rio-modal--closing .shortcuts-content {
                animation: none !important;
                transform: none !important;
            }

            /* ── Backdrop overlay: full-screen, aligns content to bottom ─────── */
            #TIF-root > div,
            #tif-compare-root > div,
            #stats-root > div,
            #compare-root > div,
            #groups-root > div,
            #edit-root > div {
                /* Override the React inline MODAL_OVERLAY_STYLE + Tailwind classes */
                position: fixed !important;
                inset: 0 !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                z-index: 300000 !important;
                /* Slide content to bottom instead of centering */
                display: flex !important;
                flex-direction: column !important;
                align-items: stretch !important;
                justify-content: flex-end !important;
                /* Remove the uniform padding that shifts content inward */
                padding: 0 !important;
                /* Dim backdrop — slightly stronger for touch-friendliness */
                background: rgba(0, 0, 0, 0.68) !important;
                backdrop-filter: blur(6px) saturate(140%) !important;
                -webkit-backdrop-filter: blur(6px) saturate(140%) !important;
                overflow: hidden !important;
                box-sizing: border-box !important;
                /* Slide-up entrance animation on the overlay container */
                animation: none !important;
            }

            /* ── Content panel: iOS bottom sheet card ───────────────────────── */
            #TIF-root > div > div,
            #tif-compare-root > div > div,
            #stats-root > div > div,
            #compare-root > div > div,
            #groups-root > div > div,
            #edit-root > div > div {
                /* Reset React's centered-card geometry */
                position: relative !important;
                left: auto !important;
                top: auto !important;
                right: auto !important;
                bottom: auto !important;
                margin: 0 !important;
                transform: none !important;

                /* Full-width bottom sheet */
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;

                /* Height: tall enough to be useful; leaves top gap for backdrop tap */
                height: auto !important;
                min-height: 44vh !important;
                max-height: calc(92dvh - var(--gpwa-h, 52px) - env(safe-area-inset-bottom, 0px)) !important;

                /* iOS rounded top corners, flat bottom (hugs the screen edge) */
                border-radius: var(--ios-sheet-radius) var(--ios-sheet-radius) 0 0 !important;
                border-top: 1px solid var(--ios-sheet-border) !important;
                border-left: none !important;
                border-right: none !important;
                border-bottom: none !important;

                /* Dark-glass surface consistent with dock + table sheets */
                background: var(--ios-sheet-bg) !important;
                box-shadow: var(--ios-sheet-shadow) !important;
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;

                /* Flex column so inner scroll areas work */
                display: flex !important;
                flex-direction: column !important;
                overflow: hidden !important;

                /* Slide-up entrance */
                animation: rio-sheet-slide-up var(--ios-sheet-anim-in) both !important;
            }

            /* Drag handle pseudo-element on each content panel */
            #TIF-root > div > div::before,
            #tif-compare-root > div > div::before,
            #stats-root > div > div::before,
            #compare-root > div > div::before,
            #groups-root > div > div::before,
            #edit-root > div > div::before {
                content: '' !important;
                display: block !important;
                width: var(--ios-sheet-handle-w) !important;
                height: var(--ios-sheet-handle-h) !important;
                background: rgba(148, 163, 184, 0.40) !important;
                border-radius: 100px !important;
                margin: 10px auto 0 !important;
                flex-shrink: 0 !important;
                pointer-events: none !important;
            }

            /* Exit animation class — added by JS for 260ms before React unmounts */
            #TIF-root > div.rio-sheet--closing > div,
            #tif-compare-root > div.rio-sheet--closing > div,
            #stats-root > div.rio-sheet--closing > div,
            #compare-root > div.rio-sheet--closing > div,
            #groups-root > div.rio-sheet--closing > div,
            #edit-root > div.rio-sheet--closing > div {
                animation: rio-sheet-slide-down var(--ios-sheet-anim-out) both !important;
            }

            /* ── Safe-area clearance at bottom of sheet content ─────────────── */
            /* Inner scrollable areas (headers / scroll bodies from React) must
               pad enough to clear the iOS home indicator. */
            #TIF-root > div > div > *:last-child,
            #tif-compare-root > div > div > *:last-child,
            #stats-root > div > div > *:last-child,
            #compare-root > div > div > *:last-child,
            #groups-root > div > div > *:last-child,
            #edit-root > div > div > *:last-child {
                padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
            }

            /* ── Stack Rankings: already uses named classes; promote to bottom sheet ── */
            /*
             * StackRankingModal renders into #stack-ranking-root using its own CSS
             * classes (.stack-ranking-modal-overlay / .stack-ranking-modal).
             * The existing @media(max-width:768px) block (lines 10094–10121) already
             * sets align-items:flex-start; we upgrade those to full bottom-sheet here.
             * The outer overlay rule at line 9282 sets position:fixed/inset:0 —
             * those are correct; we only change alignment and padding.
             */
            .stack-ranking-modal-overlay {
                align-items: flex-end !important;
                justify-content: stretch !important;
                padding: 0 !important;
                /* Override padding-top that was pushing content from top */
                padding-top: 0 !important;
                padding-bottom: 0 !important;
                /* Keep the dark backdrop */
                background: rgba(0, 0, 0, 0.72) !important;
                overflow: hidden !important;
            }

            .stack-ranking-layout {
                width: 100% !important;
                max-width: 100% !important;
                flex-direction: column !important;
                height: auto !important;
                /* Sheet fills up to 92dvh minus tab bar */
                max-height: calc(92dvh - var(--gpwa-h, 52px) - env(safe-area-inset-bottom, 0px)) !important;
                min-height: 44vh !important;
                align-items: stretch !important;
                justify-content: flex-start !important;
            }

            .stack-ranking-modal {
                width: 100% !important;
                max-width: 100% !important;
                flex: 1 1 auto !important;
                height: 100% !important;
                max-height: none !important;
                min-height: 0 !important;
                /* iOS rounded top, flat bottom */
                border-radius: var(--ios-sheet-radius) var(--ios-sheet-radius) 0 0 !important;
                border-top: 1px solid var(--ios-sheet-border) !important;
                background: var(--ios-sheet-bg) !important;
                box-shadow: var(--ios-sheet-shadow) !important;
                /* Slide-up entrance */
                animation: rio-sheet-slide-up var(--ios-sheet-anim-in) both !important;
            }

            /* Drag handle for Stack Rankings (::before on .stack-ranking-modal) */
            .stack-ranking-modal::before {
                content: '' !important;
                display: block !important;
                width: var(--ios-sheet-handle-w) !important;
                height: var(--ios-sheet-handle-h) !important;
                background: rgba(148, 163, 184, 0.40) !important;
                border-radius: 100px !important;
                margin: 10px auto 0 !important;
                flex-shrink: 0 !important;
                pointer-events: none !important;
            }

            /* Override old ===MOBILE RESPONSIVE STYLES=== block rules that
               conflict with the bottom-sheet treatment (lines 10265–10296).
               Those rules set align-items:flex-start and padding on the overlay;
               the MOBILE REDESIGN block (later in the cascade) wins by source order. */
            #TIF-root > div {
                align-items: stretch !important;
                padding-top: 0 !important;
                padding-right: 0 !important;
                padding-bottom: 0 !important;
                padding-left: 0 !important;
                overflow-y: hidden !important;
            }

            #TIF-root > div > div {
                width: 100% !important;
                max-height: calc(92dvh - var(--gpwa-h, 52px) - env(safe-area-inset-bottom, 0px)) !important;
                margin: 0 !important;
            }

        } /* end @media (max-width: 768px) — REACT MODAL iOS SHEET */

        /* ═══════════════════════════════════════════════════════════════
           INLINE MODAL → iOS BOTTOM SHEET  (mobile only, @media max-width:768px)
           ═══════════════════════════════════════════════════════════════
           Modals in this section are vanilla JS modals (show/hide via
           classList.add/remove('show') or style.display).  They follow
           the same two-level pattern as the React modals:
             #*-modal           ← full-screen backdrop overlay
             .*-content         ← inner content card
           On mobile we restyle both levels into an iOS bottom sheet.

           CONSTRAINTS:
           - NO display property on any overlay — JS owns display via
             .show / style.display. Only geometry + surface + animation.
           - Desktop (> 768px) unchanged — all rules inside @media.
           - z-index hierarchy preserved (var(--z-toast) = 500000 for
             mortgage/growth/shortcuts; stays above dock at 1200).
           ═══════════════════════════════════════════════════════════════ */
        @media (max-width: 768px) {

            /* ══════════════════════════════════════════════════════════
               MORTGAGE CALCULATOR  (#mortgage-calc-modal / .mortgage-calc-content)
               ══════════════════════════════════════════════════════════ */

            /*
             * Override the old MOBILE RESPONSIVE STYLES at lines 10262-10296
             * which set align-items:flex-start + padding on the overlay.
             * This block is later in the cascade → wins by source order.
             * CRITICAL: display is NOT set here — JS adds/removes .show.
             */
            #mortgage-calc-modal {
                /* Anchor content to the bottom edge */
                align-items: flex-end !important;
                justify-content: stretch !important;
                padding: 0 !important;
                overflow: hidden !important;
                /* Dim backdrop */
                background: rgba(0, 0, 0, 0.68) !important;
                backdrop-filter: blur(6px) saturate(140%) !important;
                -webkit-backdrop-filter: blur(6px) saturate(140%) !important;
            }

            .mortgage-calc-content {
                /* Reset the desktop centered-card geometry */
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
                margin: 0 !important;

                /* Bottom-sheet height */
                height: auto !important;
                min-height: 44vh !important;
                max-height: calc(92dvh - var(--gpwa-h, 52px) - env(safe-area-inset-bottom, 0px)) !important;

                /* iOS rounded top corners, flat bottom */
                border-radius: var(--ios-sheet-radius, 22px) var(--ios-sheet-radius, 22px) 0 0 !important;
                border-top: 1px solid var(--ios-sheet-border, rgba(201, 169, 98, 0.20)) !important;
                border-left: none !important;
                border-right: none !important;
                border-bottom: none !important;

                /* Dark-glass surface */
                background: var(--ios-sheet-bg, #13192a) !important;
                box-shadow: var(--ios-sheet-shadow,
                    0 -8px 40px rgba(0, 0, 0, 0.60),
                    0 -2px 0 rgba(201, 169, 98, 0.16),
                    inset 0 1px 0 rgba(255, 255, 255, 0.06)) !important;

                /* Flex column for internal scroll areas */
                display: flex !important;
                flex-direction: column !important;
                overflow: hidden !important;

                /* Slide-up entrance */
                animation: rio-sheet-slide-up var(--ios-sheet-anim-in, 260ms cubic-bezier(0.22, 1, 0.36, 1)) both !important;
            }

            /* Drag handle */
            .mortgage-calc-content::before {
                content: '' !important;
                display: block !important;
                width: var(--ios-sheet-handle-w, 40px) !important;
                height: var(--ios-sheet-handle-h, 4px) !important;
                background: rgba(148, 163, 184, 0.40) !important;
                border-radius: 100px !important;
                margin: 10px auto 0 !important;
                flex-shrink: 0 !important;
                pointer-events: none !important;
            }

            /* Safe-area clearance at bottom of scrollable body */
            .mortgage-calc-content > *:last-child {
                padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
            }

            /* Exit animation */
            #mortgage-calc-modal.rio-modal--closing .mortgage-calc-content {
                animation: rio-sheet-slide-down var(--ios-sheet-anim-out, 260ms cubic-bezier(0.40, 0, 1, 1)) both !important;
            }

            /* ══════════════════════════════════════════════════════════
               GROWTH CALCULATOR  (#growth-calc-modal / .growth-calc-content)
               ══════════════════════════════════════════════════════════ */

            #growth-calc-modal {
                align-items: flex-end !important;
                justify-content: stretch !important;
                padding: 0 !important;
                overflow: hidden !important;
                background: rgba(0, 0, 0, 0.68) !important;
                backdrop-filter: blur(6px) saturate(140%) !important;
                -webkit-backdrop-filter: blur(6px) saturate(140%) !important;
            }

            .growth-calc-content {
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
                margin: 0 !important;

                height: auto !important;
                min-height: 44vh !important;
                max-height: calc(92dvh - var(--gpwa-h, 52px) - env(safe-area-inset-bottom, 0px)) !important;

                border-radius: var(--ios-sheet-radius, 22px) var(--ios-sheet-radius, 22px) 0 0 !important;
                border-top: 1px solid var(--ios-sheet-border, rgba(201, 169, 98, 0.20)) !important;
                border-left: none !important;
                border-right: none !important;
                border-bottom: none !important;

                background: var(--ios-sheet-bg, #13192a) !important;
                box-shadow: var(--ios-sheet-shadow,
                    0 -8px 40px rgba(0, 0, 0, 0.60),
                    0 -2px 0 rgba(201, 169, 98, 0.16),
                    inset 0 1px 0 rgba(255, 255, 255, 0.06)) !important;

                display: flex !important;
                flex-direction: column !important;
                overflow: hidden !important;

                animation: rio-sheet-slide-up var(--ios-sheet-anim-in, 260ms cubic-bezier(0.22, 1, 0.36, 1)) both !important;
            }

            .growth-calc-content::before {
                content: '' !important;
                display: block !important;
                width: var(--ios-sheet-handle-w, 40px) !important;
                height: var(--ios-sheet-handle-h, 4px) !important;
                background: rgba(148, 163, 184, 0.40) !important;
                border-radius: 100px !important;
                margin: 10px auto 0 !important;
                flex-shrink: 0 !important;
                pointer-events: none !important;
            }

            .growth-calc-content > *:last-child {
                padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
            }

            #growth-calc-modal.rio-modal--closing .growth-calc-content {
                animation: rio-sheet-slide-down var(--ios-sheet-anim-out, 260ms cubic-bezier(0.40, 0, 1, 1)) both !important;
            }

            /* ══════════════════════════════════════════════════════════
               SHORTCUTS / HELP OVERLAY  (#shortcuts-modal / .shortcuts-content)
               ══════════════════════════════════════════════════════════ */
            /*
             * Shortcuts is an info panel — on touch devices the keyboard
             * shortcuts column is already hidden (body.touch-device rules).
             * Converting it to a bottom sheet makes it reachable without
             * scrolling the whole viewport.
             * The .help-nav-annotations div is position:fixed/inset:0 itself
             * (pointer-events:none), so it doesn't affect sheet layout.
             */
            #shortcuts-modal {
                align-items: flex-end !important;
                justify-content: stretch !important;
                /* The old mobile rule set align-items:center + padding;
                   override the padding as well */
                padding: 0 !important;
                overflow: hidden !important;
                background: rgba(0, 0, 0, 0.68) !important;
                backdrop-filter: blur(6px) saturate(140%) !important;
                -webkit-backdrop-filter: blur(6px) saturate(140%) !important;
            }

            .shortcuts-content {
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
                margin: 0 !important;

                /* Shortcuts is shorter — 70dvh is plenty */
                height: auto !important;
                min-height: 30vh !important;
                max-height: calc(70dvh - var(--gpwa-h, 52px) - env(safe-area-inset-bottom, 0px)) !important;

                border-radius: var(--ios-sheet-radius, 22px) var(--ios-sheet-radius, 22px) 0 0 !important;
                border-top: 1px solid var(--ios-sheet-border, rgba(201, 169, 98, 0.20)) !important;
                border-left: none !important;
                border-right: none !important;
                border-bottom: none !important;

                background: var(--ios-sheet-bg, #13192a) !important;
                box-shadow: var(--ios-sheet-shadow,
                    0 -8px 40px rgba(0, 0, 0, 0.60),
                    0 -2px 0 rgba(201, 169, 98, 0.16),
                    inset 0 1px 0 rgba(255, 255, 255, 0.06)) !important;

                display: flex !important;
                flex-direction: column !important;
                overflow: hidden !important;

                animation: rio-sheet-slide-up var(--ios-sheet-anim-in, 260ms cubic-bezier(0.22, 1, 0.36, 1)) both !important;
            }

            .shortcuts-content::before {
                content: '' !important;
                display: block !important;
                width: var(--ios-sheet-handle-w, 40px) !important;
                height: var(--ios-sheet-handle-h, 4px) !important;
                background: rgba(148, 163, 184, 0.40) !important;
                border-radius: 100px !important;
                margin: 10px auto 0 !important;
                flex-shrink: 0 !important;
                pointer-events: none !important;
            }

            .shortcuts-content > *:last-child {
                padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
            }

            /* Shortcuts body needs to scroll when taller than sheet */
            .shortcuts-body {
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch !important;
            }

            /* The shortcuts-body and mobile-help-panel need to fill the sheet */
            .shortcuts-content .shortcuts-header {
                flex-shrink: 0 !important;
            }

            #shortcuts-modal.rio-modal--closing .shortcuts-content {
                animation: rio-sheet-slide-down var(--ios-sheet-anim-out, 260ms cubic-bezier(0.40, 0, 1, 1)) both !important;
            }

            /* ══════════════════════════════════════════════════════════
               FISCAL IMPACT COMMAND CENTER
               (.lot-scenario-dashboard.command-center)
               ══════════════════════════════════════════════════════════
               The fiscal panel is NOT an overlay — it's a self-contained
               positioned panel that JS shows/hides via style.display and
               innerHTML.  There is no backdrop wrapper, so we cannot do
               the standard two-level sheet treatment.

               Instead: promote the panel itself to a full-width bottom
               sheet, sitting above the nav bar (z-index already 1200+).
               The existing top/left/right/bottom mobile values at lines
               2000-2005 (inside @media max-width:768px) are overridden
               here because MOBILE REDESIGN appears later in cascade.

               CRITICAL: NO display property — JS owns display.
               The command-resize-handle at the top of .command-shell
               becomes the drag affordance (already present).
               ══════════════════════════════════════════════════════════ */
            .lot-scenario-dashboard.command-center {
                /* Unset the line-2000 top/left/right/bottom offsets */
                top: auto !important;
                left: 0 !important;
                right: 0 !important;
                bottom: calc(var(--gpwa-h, 52px) + env(safe-area-inset-bottom, 0px)) !important;

                /* Full-width bottom sheet */
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                box-sizing: border-box !important;

                /* iOS sheet chrome */
                border-radius: var(--ios-sheet-radius, 22px) var(--ios-sheet-radius, 22px) 0 0 !important;
                border-top: 1px solid var(--ios-sheet-border, rgba(56, 189, 248, 0.20)) !important;
                border-left: none !important;
                border-right: none !important;
                border-bottom: none !important;
                background: var(--ios-sheet-bg, #13192a) !important;
                box-shadow: var(--ios-sheet-shadow,
                    0 -8px 40px rgba(0, 0, 0, 0.60),
                    0 -2px 0 rgba(56, 189, 248, 0.16),
                    inset 0 1px 0 rgba(255, 255, 255, 0.06)) !important;

                /* Slide-up entrance on activation */
                animation: rio-sheet-slide-up var(--ios-sheet-anim-in, 260ms cubic-bezier(0.22, 1, 0.36, 1)) both !important;

                /* Remove the padding that the base .lot-scenario-dashboard rule set */
                padding: 0 !important;
                overflow: hidden !important;
            }

            /* Drag handle pseudo-element above the command-header */
            .lot-scenario-dashboard.command-center::before {
                content: '' !important;
                display: block !important;
                width: var(--ios-sheet-handle-w, 40px) !important;
                height: var(--ios-sheet-handle-h, 4px) !important;
                background: rgba(148, 163, 184, 0.40) !important;
                border-radius: 100px !important;
                margin: 10px auto 4px !important;
                flex-shrink: 0 !important;
                pointer-events: none !important;
            }

            /* .command-shell fills the sheet and scrolls internally */
            .lot-scenario-dashboard.command-center .command-shell {
                max-height: calc(72dvh - var(--gpwa-h, 52px) - env(safe-area-inset-bottom, 0px)) !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch !important;
            }

            /* Restore padding inside the command-header (was on outer panel) */
            .lot-scenario-dashboard.command-center .command-header {
                padding: 8px 14px 10px !important;
            }

            /* Safe-area clearance at sheet bottom */
            .lot-scenario-dashboard.command-center .command-body,
            .lot-scenario-dashboard.command-center .command-shell > *:last-child {
                padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
            }

            /* Suppress the left resize handle — no horizontal resize on mobile */
            .lot-scenario-dashboard.command-center .command-resize-left-handle {
                display: none !important;
            }

            /* ══════════════════════════════════════════════════════════
               ANCHOR / CRITICAL-LOTS PANEL  (.anchor-panel)
               ══════════════════════════════════════════════════════════
               anchor-props.css positions .anchor-panel as a left-docked
               floating panel (position:fixed; top:50%; left:60px;
               transform:translateY(-50%)).  On mobile that collides with
               the toolbar and dock.  Override here (later in cascade)
               to a bottom sheet with the same iOS chrome.

               The [hidden] attribute hides it — JS uses panel.hidden=true/false.
               We do NOT override display here; [hidden] { display:none }
               is a UA rule that beats any stylesheet rule except !important.
               Since anchor-props.css already has .anchor-panel[hidden]
               { display:none } we are safe: our sheet geometry only applies
               when the panel is visible (hidden attribute absent).
               ══════════════════════════════════════════════════════════ */
            .anchor-panel,
            .pm-panel {
                /* Override the left-dock position from anchor-props.css / parcel-markers.css.
                   .pm-panel (Critical Lots) was left:60px;width:312px → overflowed the screen
                   on narrow phones; give it the same full-width iOS bottom-sheet as the anchor panel. */
                top: auto !important;
                left: 0 !important;
                right: 0 !important;
                bottom: calc(var(--gpwa-h, 52px) + env(safe-area-inset-bottom, 0px)) !important;
                transform: none !important;
                margin-top: 0 !important;   /* cancel .pm-panel--critical_lot's 30px nudge on mobile */

                /* Full-width bottom sheet */
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;

                /* Height: enough room to fill fields */
                height: auto !important;
                max-height: calc(72dvh - var(--gpwa-h, 52px) - env(safe-area-inset-bottom, 0px)) !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch !important;

                /* iOS sheet chrome */
                border-radius: var(--ios-sheet-radius, 22px) var(--ios-sheet-radius, 22px) 0 0 !important;
                border-top: 1px solid var(--ios-sheet-border, rgba(201, 169, 98, 0.20)) !important;
                border-left: none !important;
                border-right: none !important;
                border-bottom: none !important;
                background: var(--ios-sheet-bg, #13192a) !important;
                box-shadow: var(--ios-sheet-shadow,
                    0 -8px 40px rgba(0, 0, 0, 0.60),
                    0 -2px 0 rgba(201, 169, 98, 0.16),
                    inset 0 1px 0 rgba(255, 255, 255, 0.06)) !important;

                /* z-index: anchor-props.css sets 8500; keep that — it's above
                   the gpwa nav (1302) and dock (1200) */
                /* Entrance animation */
                animation: rio-sheet-slide-up var(--ios-sheet-anim-in, 260ms cubic-bezier(0.22, 1, 0.36, 1)) both !important;
            }

            /* Drag handle above the anchor / critical-lots panel header */
            .anchor-panel::before,
            .pm-panel::before {
                content: '' !important;
                display: block !important;
                width: var(--ios-sheet-handle-w, 40px) !important;
                height: var(--ios-sheet-handle-h, 4px) !important;
                background: rgba(148, 163, 184, 0.40) !important;
                border-radius: 100px !important;
                margin: 10px auto 0 !important;
                flex-shrink: 0 !important;
                pointer-events: none !important;
            }

            /* Safe-area clearance at anchor / critical-lots panel bottom */
            .anchor-panel__body > *:last-child,
            .pm-panel__body > *:last-child {
                padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
            }

            /* Override the old MOBILE RESPONSIVE STYLES block that set
               align-items:flex-start + padding on mortgage/growth overlays.
               That block is at lines 10262–10275; our block wins by cascade. */
            #upload-modal,
            #images-modal {
                /* Upload and images modals are fine with flex-start scroll;
                   they have their own gis-pwa.css treatment. Leave as-is. */
            }

        } /* end @media (max-width: 768px) — INLINE MODAL iOS SHEET */

        /* ═══════════════════════════════════════════════════════════════
           END MOBILE REDESIGN
           ═══════════════════════════════════════════════════════════════ */

        .modeled-override-banner {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin: 0 0 12px;
            padding: 10px 12px;
            border: 1px solid rgba(245, 158, 11, 0.48);
            border-radius: 10px;
            background: rgba(245, 158, 11, 0.12);
            color: var(--color-gray-800);
            font-size: 12px;
            line-height: 1.35;
        }

        .modeled-override-banner strong {
            flex: 0 0 auto;
        }

        .assess-grid-header.is-modeled .assess-year-header[data-modeled-column] {
            border-color: rgba(245, 158, 11, 0.55) !important;
            background: rgba(245, 158, 11, 0.14) !important;
            color: #b45309 !important;
        }

        .modeled-fy-label {
            display: block;
            margin-top: 2px;
            font-size: 9px;
            line-height: 1.1;
        }

        .dark-mode .modeled-override-banner {
            background: rgba(245, 158, 11, 0.16);
            color: #f8fafc;
        }

        .dark-mode .assess-grid-header.is-modeled .assess-year-header[data-modeled-column] {
            color: #fbbf24 !important;
        }

        @media (max-width: 768px), (pointer: coarse) {
            .modeled-override-banner {
                flex-direction: column;
                gap: 2px;
            }
        }