* { margin: 0; padding: 0; box-sizing: border-box; }
        /* MAP.1: body font + palette now cascade from benchmark.css. */
        #map { width: 100vw; height: calc(100vh - 52px); position: absolute; top: 52px; left: 0; }

        /* P3.1 Level-of-detail label visibility. Low-zoom views should not
           paint every signal / parcel / substation label over the basemap.
           The applyLOD() JS helper sets data-zoom-bucket on #map on zoomend. */
        #map[data-zoom-bucket="continental"] .signal-label,
        #map[data-zoom-bucket="continental"] .parcel-owner-label { display: none !important; }
        #map[data-zoom-bucket="regional"] .signal-marker-expected .signal-label,
        #map[data-zoom-bucket="regional"] .parcel-owner-label { display: none !important; }
        /* At metro+ all signal labels are visible. */

        /* -- P5.3 a11y baseline ------------------------------------------
           Visible focus rings on everything interactive, plus a
           prefers-reduced-motion opt-out for auto-refresh transitions. */
        :focus-visible {
            outline: 2px solid var(--terracotta);
            outline-offset: 2px;
        }
        /* Keep focus visible even on buttons that reset default outlines */
        button:focus-visible, a:focus-visible,
        select:focus-visible, input:focus-visible, textarea:focus-visible {
            outline: 2px solid var(--terracotta) !important;
            outline-offset: 2px;
            box-shadow: none;
        }
        @media (prefers-reduced-motion: reduce) {
            * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
        }
        .sr-only {
            position: absolute !important; width: 1px; height: 1px; padding: 0;
            margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
            white-space: nowrap; border: 0;
        }

        /* -- P5.2 Consistency: button variants + label pill tiers -------
           Three reusable button variants that should be adopted wherever
           ad-hoc inline button styles appear today. Existing buttons are
           NOT rewritten overnight (too risky on a 400 KB JS file) but new
           UI should reach for these classes. */
        /* MORNING.1: Benchmark action-button vocabulary. Primary = --ink /
           --ground (not terracotta). Destructive = --terracotta. Neither
           uses a pill radius — 0px only. Small-caps Inter labels, no
           gradients, no shadows. */
        .btn-primary, .btn-secondary, .btn-tertiary, .btn-destructive {
            font: 500 11px/1.2 Inter, "Helvetica Neue", Arial, sans-serif;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            padding: 8px 16px;
            border-radius: 0;
            cursor: pointer;
            transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
        }
        .btn-primary { background: var(--ink); color: var(--ground); border: 1px solid var(--ink); }
        .btn-primary:hover { background: transparent; color: var(--ink); }
        .btn-destructive { background: var(--terracotta); color: var(--ground); border: 1px solid var(--terracotta); }
        .btn-destructive:hover { background: var(--oxide); border-color: var(--oxide); }
        .btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
        .btn-secondary:hover { background: var(--ink); color: var(--ground); }
        .btn-tertiary { background: transparent; color: var(--stone); border: 1px solid transparent; }
        .btn-tertiary:hover { background: var(--paper); color: var(--ink); }

        /* Three label-pill tiers. Use with color set inline via
           style="background:..." so category colors still apply, but
           size/weight come from these shared classes. */
        .label-anchor  { font: 700 14px/1 sans-serif; padding: 3px 8px; border-radius: 4px; color: #fff; }
        .label-cluster { font: 600 12px/1 sans-serif; padding: 2px 6px; border-radius: 3px; color: #fff; }
        .label-signal  { font: 500 11px/1 sans-serif; padding: 1px 5px; border-radius: 3px; color: #fff; }

        /* P3.2 Cluster priority badge — replaces the old URGENT/HIGH dots
           that were keyed to an integer priority column. Red is reserved
           for disqualifying signals elsewhere in the UI; priority uses a
           neutral dark background that scales with priority tier. */
        .cluster-priority-badge {
            display: inline-block;
            font-size: 9px;
            font-weight: 700;
            padding: 1px 5px;
            margin-right: 5px;
            border-radius: 3px;
            letter-spacing: 0.4px;
            text-transform: uppercase;
            vertical-align: middle;
            color: #fff;
            background: #64748b;
        }
        .cluster-priority-badge.cluster-priority-high   { background: var(--ink); }
        .cluster-priority-badge.cluster-priority-med    { background: #475569; }
        .cluster-priority-badge.cluster-priority-low    { background: #94a3b8; }

        /* BRAND.8: sidebar header — disc + FILTERS label. Replaces the
           redundant "MRP Site Intelligence" serif (wordmark already lives
           in the top nav). */
        .sidebar-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding-bottom: 10px;
            margin-bottom: 12px;
            border-bottom: 1px solid var(--ink-30);
        }
        .sidebar-header .disc-terracotta {
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--terracotta);
            flex: 0 0 auto;
        }
        .sidebar-header__label {
            font-family: Inter, system-ui, sans-serif;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--stone);
        }

        /* Controls panel */
        .controls {
            position: absolute;
            top: 165px;  /* MAP.2c: corrected for containing-block mismatch. Sidebar is a
                            body child (body-y frame); readout is a .leaflet-container child
                            (container frame starting at body-y 52). Readout bottom lands at
                            body-y 157 -> sidebar needs >= 157 + 8 gap = 165 to clear it. */
            right: 10px;
            z-index: 1000;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.2);
            padding: 16px;
            width: 280px;
            max-height: calc(100vh - 20px);
            overflow-y: auto;
        }
        .controls h2 {
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 12px;
            color: #1a1a2e;
            border-bottom: 2px solid var(--terracotta);
            padding-bottom: 6px;
        }
        .controls h3 {
            font-size: 12px;
            font-weight: 600;
            margin: 10px 0 6px 0;
            color: #555;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .control-group { margin-bottom: 12px; }
        .control-group label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            cursor: pointer;
            padding: 3px 0;
        }
        .control-group label:hover { color: var(--terracotta); }
        .control-group input[type="checkbox"] { accent-color: var(--terracotta); }
        .control-group select, .control-group input[type="range"] {
            width: 100%;
            padding: 4px 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 13px;
        }
        .score-display {
            text-align: center;
            font-weight: 600;
            color: var(--terracotta);
            font-size: 14px;
        }
        .legend {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 8px;
        }
        .legend-item {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 11px;
        }
        .legend-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 1px solid rgba(0,0,0,0.3);
        }
        .stats {
            font-size: 12px;
            color: #666;
            border-top: 1px solid #eee;
            padding-top: 8px;
            margin-top: 8px;
        }
        .stats div { padding: 2px 0; }
        .stats span { font-weight: 600; color: #333; }

        /* Collapsible sections */
        .controls details { margin-bottom: 8px; }
        .controls details[open] { margin-bottom: 12px; }
        .section-summary {
            font-size: 12px;
            font-weight: 600;
            color: #555;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            cursor: pointer;
            padding: 4px 0;
            list-style: none;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .section-summary::-webkit-details-marker { display: none; }
        .section-summary::before {
            content: '▶';
            font-size: 8px;
            transition: transform 0.15s;
        }
        details[open] > .section-summary::before {
            transform: rotate(90deg);
        }
        .section-summary:hover { color: var(--terracotta); }

        /* Cluster selector cards */
        .cluster-list {
            max-height: 320px;
            overflow-y: auto;
            border: 1px solid #eee;
            border-radius: 6px;
            background: #fafafa;
        }
        .cluster-card:last-child { border-bottom: none; }
        .cluster-card:hover { background: #f8f9fa; }
        .cluster-card.active {
            background: var(--paper);
            border-left-color: var(--terracotta) !important;
        }
        .cluster-card.suppressed {
            opacity: 0.55;
            background: #f8f8f8;
        }
        .cluster-card-name {
            font-weight: 700;
            font-size: 12px;
            color: #1a1a2e;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
            position: relative;
        }
        .cluster-card-name[title]:hover::after {
            content: attr(title);
            position: absolute;
            left: 0;
            top: 100%;
            background: #333;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 11px;
            white-space: nowrap;
            z-index: 1000;
            pointer-events: none;
            max-width: 350px;
            white-space: normal;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }
        .cluster-card-stats {
            display: flex;
            gap: 4px;
            margin-top: 3px;
            flex-wrap: wrap;
            align-items: center;
        }
        .cluster-tier-pill {
            display: inline-block;
            padding: 1px 6px;
            border-radius: 8px;
            font-size: 10px;
            font-weight: 700;
            color: white;
        }
        .cluster-meta {
            font-size: 10px;
            color: #888;
            margin-top: 2px;
        }
        .cluster-sort-row {
            display: flex;
            gap: 4px;
            margin-bottom: 6px;
            align-items: center;
        }
        .cluster-sort-row select {
            flex: 1;
            padding: 3px 6px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 11px;
        }
        .cluster-all-btn {
            display: block;
            width: 100%;
            padding: 6px;
            background: none;
            border: 1px dashed #ccc;
            border-radius: 4px;
            cursor: pointer;
            font-size: 11px;
            color: #888;
            margin-bottom: 4px;
            text-align: center;
        }
        .cluster-all-btn:hover { border-color: var(--terracotta); color: var(--terracotta); }
        .cluster-all-btn.active {
            background: var(--paper);
            border-color: var(--terracotta);
            color: var(--terracotta);
            font-weight: 600;
        }
        .parcel-owner-label {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            color: #333;
            font-size: 10px;
            font-weight: 600;
            text-shadow: 1px 1px 2px white, -1px -1px 2px white, 1px -1px 2px white, -1px 1px 2px white;
            white-space: nowrap;
            pointer-events: none !important;
            padding: 0 !important;
        }
        .cluster-tooltip {
            background: white !important;
            border: 1px solid var(--terracotta) !important;
            border-radius: 4px !important;
            padding: 6px 10px !important;
            font-size: 12px !important;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
        }

        /* Cluster filter chips */
        .cluster-filters {
            display: flex;
            gap: 4px;
            margin-bottom: 6px;
            flex-wrap: wrap;
        }
        /* MAP.1: Benchmark chip treatment. No pill radius, no pink, no
           color transition — ink active state against ground background. */
        .cluster-filter-chip {
            padding: 6px 12px;
            border-radius: 0;
            font-family: Inter, "Helvetica Neue", Arial, sans-serif;
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            cursor: pointer;
            border: 1px solid var(--stone);
            background: transparent;
            color: var(--ink);
            user-select: none;
            transition: none;
        }
        .cluster-filter-chip.active,
        .cluster-filter-chip[aria-pressed="true"] {
            background: var(--ink);
            color: var(--ground);
            border-color: var(--ink);
        }
        .cluster-filter-chip:hover:not(.active) {
            border-color: var(--ink);
        }

        /* Cluster stats bar */
        .cluster-stats-bar {
            display: none;
            background: #1a1a2e;
            color: #fff;
            border-radius: 6px;
            padding: 8px 10px;
            margin-bottom: 6px;
            font-size: 11px;
            position: relative;
        }
        .cluster-stats-bar .stats-name {
            font-weight: 700;
            font-size: 12px;
            margin-right: 24px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .cluster-stats-bar .stats-row {
            display: flex;
            gap: 8px;
            margin-top: 3px;
            align-items: center;
        }
        .cluster-stats-bar .stats-close {
            position: absolute;
            top: 4px;
            right: 8px;
            background: none;
            border: none;
            color: #fff;
            cursor: pointer;
            font-size: 16px;
            opacity: 0.7;
        }
        .cluster-stats-bar .stats-close:hover { opacity: 1; }

        /* Redesigned cluster cards */
        .cluster-card {
            padding: 8px 10px;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            transition: background 0.15s;
            border-left: 3px solid #999;
            background: #fff;
            position: relative;
        }
        .cluster-card-header {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .cluster-card-score {
            min-width: 28px;
            height: 22px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 800;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        /* MORNING.1: gear glyph swapped for small-caps "Edit" text.
           Benchmark-compliant inline button (no icon, no radius). */
        .cluster-card-gear {
            flex-shrink: 0;
            background: transparent;
            border: none;
            cursor: pointer;
            color: var(--stone);
            font: 500 10px/1.2 Inter, system-ui, sans-serif;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            padding: 2px 4px;
            border-radius: 0;
            transition: color 0.12s ease;
        }
        .cluster-card-gear:hover { color: var(--ink); background: transparent; }
        .cluster-tier-bar {
            display: flex;
            height: 4px;
            border-radius: 2px;
            overflow: hidden;
            margin-top: 4px;
            background: #eee;
        }
        .cluster-tier-bar > div { height: 100%; }
        .cluster-card-loading {
            position: absolute;
            top: 8px;
            right: 8px;
            font-size: 12px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        .loading-spinner {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #888;
            font-size: 12px;
        }
        .loading-spinner::before {
            content: '';
            display: inline-block;
            width: 14px;
            height: 14px;
            border: 2px solid #ddd;
            border-top-color: var(--terracotta);
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
        }

        /* Inline cluster detail panel */
        .cluster-detail-inline {
            display: none;
            background: #f8f9fa;
            border-top: 1px solid #eee;
            padding: 8px;
            font-size: 12px;
        }
        .cluster-detail-inline.open { display: block; }
        .cdi-tabs {
            display: flex;
            gap: 2px;
            margin-bottom: 8px;
            border-bottom: 1px solid #ddd;
        }
        .cdi-tab {
            padding: 4px 10px;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            border: none;
            background: none;
            color: #888;
            border-bottom: 2px solid transparent;
            transition: all 0.15s;
        }
        .cdi-tab.active { color: var(--terracotta); border-bottom-color: var(--terracotta); }
        .cdi-tab:hover:not(.active) { color: #555; }
        .cdi-tab-content { display: none; }
        .cdi-tab-content.active { display: block; }
        .cdi-field { margin-bottom: 6px; }
        .cdi-field label { font-size: 10px; text-transform: uppercase; color: #888; display: block; margin-bottom: 2px; }
        .cdi-field input, .cdi-field select {
            width: 100%; padding: 4px 6px; border: 1px solid #ddd; border-radius: 3px; font-size: 12px;
        }
        .cdi-btn {
            padding: 4px 10px;
            font-size: 11px;
            font-weight: 600;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            color: #fff;
        }
        .cdi-btn-blue { background: #3498db; }
        .cdi-btn-green { background: #27ae60; }
        .cdi-btn-red { background: var(--terracotta); }
        .cdi-btn-dark { background: #2c3e50; }
        .cdi-btn:hover { opacity: 0.85; }

        /* Anchor signal highlight */
        .anchor-highlight-ring {
            border: 3px solid #ff0;
            border-radius: 50%;
            background: rgba(255,255,0,0.15);
            animation: anchor-pulse 1.5s ease-in-out infinite;
            pointer-events: none;
            position: absolute;
            z-index: 900;
        }
        @keyframes anchor-pulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,0,0.6); }
            50% { box-shadow: 0 0 0 12px rgba(255,255,0,0); }
        }

        /* Popup styling */
        .scorecard-popup { min-width: 280px; }
        .scorecard-popup h4 {
            margin: 0 0 8px 0;
            font-size: 14px;
            color: #1a1a2e;
        }
        .scorecard-popup table {
            width: 100%;
            border-collapse: collapse;
            font-size: 12px;
        }
        .scorecard-popup td {
            padding: 3px 6px;
            border-bottom: 1px solid #eee;
        }
        .scorecard-popup td:first-child {
            font-weight: 600;
            color: #555;
            width: 40%;
        }
        .tier-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 700;
            color: white;
        }
        /* BRAND.7: tier badges use status palette per spec §3.
           Tier 1 (anchor infra) = terracotta (accent signal).
           Tier 2 (operations support) = ochre (waiting / ancillary).
           Tier 3 (community/commercial) = soybean (positive, not urgent). */
        .tier-1 { background: var(--terracotta); }
        .tier-2 { background: var(--ochre); }
        .tier-3 { background: var(--soybean); }
        .flag { font-size: 11px; margin: 2px 0; }
        /* BRAND.7: flag colors use status palette per spec §3.
           Red flag = rust (quieter than --terracotta so accent stays unique).
           Green flag = soybean (positive signal, not SaaS-green).
           Yellow flag = ochre (caution/waiting). */
        .flag-red { color: var(--rust); }
        .flag-green { color: var(--soybean); }
        .flag-yellow { color: var(--ochre); }

        .loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2000;
            background: white;
            padding: 20px 40px;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            font-size: 16px;
            display: none;
        }

        /* --- Signal markers --- */
        .signal-marker {
            display: flex;
            flex-direction: column;
            align-items: center;
            pointer-events: auto;
        }
        .signal-dot {
            border-radius: 50%;
            border: 3px solid white;
            box-shadow: 0 2px 8px rgba(0,0,0,0.4);
        }
        .signal-marker-confirmed .signal-dot {
            width: 22px;
            height: 22px;
            background: var(--terracotta);
            animation: pulse-confirmed 2s ease-in-out infinite;
        }
        .signal-marker-expected .signal-dot {
            width: 16px;
            height: 16px;
            background: #f39c12;
        }
        .signal-label {
            white-space: nowrap;
            font-size: 12px;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 4px;
            margin-top: 2px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.3);
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .signal-marker-confirmed .signal-label {
            background: var(--terracotta);
            color: white;
            font-size: 13px;
        }
        .signal-marker-expected .signal-label {
            background: #f39c12;
            color: white;
            font-size: 11px;
        }
        @keyframes pulse-confirmed {
            0%, 100% { box-shadow: 0 0 0 0 rgba(233,69,96,0.6), 0 2px 8px rgba(0,0,0,0.4); }
            50% { box-shadow: 0 0 0 10px rgba(233,69,96,0), 0 2px 8px rgba(0,0,0,0.4); }
        }

        /* Parcel anchor chip */
        .anchor-parcel-chip {
            background: #e8f4fd;
            border: 1px solid #b3d9f5;
            border-radius: 12px;
            padding: 2px 8px;
            font-size: 11px;
            color: #1a5276;
        }

        /* Signal context menu */
        .signal-ctx-menu {
            position: fixed;
            z-index: 3000;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 6px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.18);
            min-width: 180px;
            padding: 4px 0;
            font-size: 12px;
        }
        .signal-ctx-menu .ctx-item {
            padding: 8px 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: background 0.1s;
        }
        .signal-ctx-menu .ctx-item:hover { background: #f0f8ff; }
        .signal-ctx-menu .ctx-item .ctx-icon { width: 16px; text-align: center; }
        .signal-ctx-menu .ctx-sep { height: 1px; background: #eee; margin: 4px 0; }

        /* Assign-to-parcel mode banner */
        .assign-mode-banner {
            position: fixed;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--terracotta);
            color: white;
            padding: 8px 20px;
            border-radius: 6px;
            z-index: 2500;
            font-size: 13px;
            font-weight: 600;
            box-shadow: 0 4px 12px rgba(233,69,96,0.4);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .assign-mode-banner button {
            background: rgba(255,255,255,0.2);
            color: white;
            border: 1px solid rgba(255,255,255,0.4);
            padding: 4px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 11px;
        }

        /* Cluster priority indicator */
        .cluster-priority-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 4px;
            flex-shrink: 0;
        }
        /* BRAND.7: cluster-priority dots use status palette.
           0 (neutral/none) = transparent.
           1 (medium/watching) = ochre (caution tier).
           2 (high/anchor-backed) = terracotta (the accent). */
        .cluster-priority-0 { background: transparent; }
        .cluster-priority-1 { background: var(--ochre); }
        .cluster-priority-2 { background: var(--terracotta); }

        /* Signal popup enhancements */
        .signal-popup { min-width: 300px; }
        .signal-popup h4 {
            margin: 0 0 8px 0;
            font-size: 15px;
            color: #1a1a2e;
        }
        .signal-popup .conf-badge {
            display: inline-block;
            padding: 2px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 700;
            color: white;
        }
        /* BRAND.7: signal-confidence badges use status palette.
           Confirmed = terracotta (positive, highest-urgency confirmation).
           Expected = ochre (plausible, waiting for confirmation).
           Strategic potential = stone (weak signal, marginalia register). */
        .conf-confirmed { background: var(--terracotta); }
        .conf-expected { background: var(--ochre); }
        .conf-strategic_potential { background: var(--stone); }
        .signal-popup .source-box {
            background: #f8f9fa;
            border-left: 3px solid #ddd;
            padding: 6px 10px;
            margin-top: 8px;
            font-size: 12px;
            color: #555;
        }
        .signal-popup .source-box a { color: #3498db; }
        .signal-popup .meta-row {
            font-size: 12px;
            color: #777;
            padding: 3px 0;
        }

        /* Signal status badges */
        .status-badge {
            display: inline-block;
            padding: 1px 8px;
            border-radius: 10px;
            font-size: 10px;
            font-weight: 700;
            color: white;
        }
        .status-new { background: #3498db; }
        .status-verified { background: #27ae60; }
        .status-stale { background: #95a5a6; }

        /* Signal Inbox panel */
        .signal-inbox-panel {
            position: absolute;
            top: 10px;
            left: 360px;
            z-index: 1000;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.2);
            width: 380px;
            max-height: calc(100vh - 20px);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .signal-inbox-header {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            border-bottom: 2px solid #3498db;
            gap: 8px;
        }
        .signal-inbox-header h3 {
            flex: 1;
            font-size: 14px;
            font-weight: 700;
            color: #1a1a2e;
            margin: 0;
        }
        .signal-inbox-filters {
            padding: 8px 16px;
            border-bottom: 1px solid #eee;
            display: flex;
            gap: 8px;
        }
        .signal-inbox-filters select {
            flex: 1;
            padding: 4px 6px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 12px;
        }
        .signal-inbox-list { overflow-y: auto; flex: 1; }
        .inbox-card {
            padding: 10px 16px;
            border-bottom: 1px solid #eee;
            border-left: 3px solid transparent;
            transition: background 0.15s;
        }
        .inbox-card:hover { background: #f8f9fa; }
        .inbox-card-title {
            font-weight: 700;
            font-size: 12px;
            color: #1a1a2e;
            margin-bottom: 2px;
        }
        .inbox-card-meta {
            font-size: 11px;
            color: #777;
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin: 2px 0;
        }
        .inbox-card-actions {
            display: flex;
            gap: 4px;
            margin-top: 6px;
        }
        .inbox-card-actions button {
            padding: 2px 8px;
            border: none;
            border-radius: 3px;
            font-size: 11px;
            cursor: pointer;
            font-weight: 600;
        }
        .inbox-btn-verify { background: #27ae60; color: white; }
        .inbox-btn-stale { background: #95a5a6; color: white; }
        .inbox-btn-zoom { background: #3498db; color: white; }
        .inbox-btn-supersede { background: #e74c3c; color: white; }
        .inbox-badge {
            background: #3498db;
            color: white;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 700;
        }

        /* Pipeline panel */
        .pipeline-panel {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 1000;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.2);
            width: 340px;
            max-height: calc(100vh - 20px);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .pipeline-header {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            border-bottom: 2px solid var(--terracotta);
            gap: 8px;
        }
        .pipeline-header h3 {
            flex: 1;
            font-size: 14px;
            font-weight: 700;
            color: #1a1a2e;
            margin: 0;
        }
        .pipeline-count-badge {
            background: var(--terracotta);
            color: white;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 700;
        }
        .pipeline-close {
            background: none;
            border: none;
            font-size: 18px;
            cursor: pointer;
            color: #999;
            padding: 0 4px;
        }
        .pipeline-close:hover { color: var(--terracotta); }
        .pipeline-list { overflow-y: auto; flex: 1; }
        .pipeline-card {
            padding: 10px 16px;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            transition: background 0.15s;
            border-left: 3px solid transparent;
        }
        .pipeline-card:hover { background: #f8f9fa; }
        .pipeline-card-active { background: var(--paper); border-left-color: var(--terracotta); }
        .pipeline-card-apn { font-weight: 700; font-size: 12px; color: #1a1a2e; }
        .pipeline-card-owner { font-size: 12px; color: #555; margin-top: 2px; }
        .pipeline-card-meta {
            display: flex;
            gap: 6px;
            margin-top: 4px;
            font-size: 11px;
            color: #777;
            flex-wrap: wrap;
        }
        .pipeline-card-notes {
            font-size: 11px;
            color: #888;
            margin-top: 4px;
            font-style: italic;
            max-height: 30px;
            overflow: hidden;
        }
        .pipeline-stage-badge {
            display: inline-block;
            padding: 1px 6px;
            border-radius: 8px;
            font-size: 10px;
            font-weight: 700;
            color: white;
        }
        .pipeline-parcel { animation: pipeline-pulse 2s ease-in-out infinite; }
        @keyframes pipeline-pulse {
            0%, 100% { stroke-opacity: 1; }
            50% { stroke-opacity: 0.4; }
        }

        /* Opportunity group in pipeline panel */
        .opp-group { border-bottom: 2px solid var(--terracotta); }
        .opp-group-header {
            padding: 10px 16px;
            cursor: pointer;
            background: #f8f9fa;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .opp-group-header:hover { background: #f0f0f5; }
        .opp-group-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .opp-group-name {
            font-weight: 700;
            font-size: 13px;
            color: #1a1a2e;
        }
        .opp-group-meta {
            font-size: 11px;
            color: #777;
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .opp-group-actions {
            display: flex;
            gap: 6px;
            padding: 0 16px 8px 16px;
            background: #f8f9fa;
        }
        .opp-group-actions button {
            font-size: 11px;
            padding: 3px 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: white;
            cursor: pointer;
        }
        .opp-group-actions button:hover { background: var(--terracotta); color: white; border-color: var(--terracotta); }
        .opp-group-parcels { display: none; }
        .opp-group.expanded .opp-group-parcels { display: block; }
        .opp-group .pipeline-card { padding-left: 28px; }
        .opp-parcel-remove {
            position: absolute;
            right: 10px;
            top: 10px;
            z-index: 10;
            font-size: 14px;
            color: #999;
            cursor: pointer;
            padding: 4px 6px;
            line-height: 1;
            border-radius: 4px;
        }
        .opp-parcel-remove:hover { color: #fff; background: var(--terracotta); }
        .opp-add-from-map {
            padding: 6px 16px 10px 28px;
            background: #fcfcfc;
            border-bottom: 1px solid #eee;
        }
        .opp-add-from-map button {
            font-size: 11px;
            padding: 4px 10px;
            border: 1px solid #3498db;
            border-radius: 4px;
            background: #3498db;
            color: white;
            cursor: pointer;
        }
        .opp-add-from-map button:hover { background: #2980b9; }
        .opp-add-from-map button.active { background: var(--terracotta); border-color: var(--terracotta); }
        .opp-add-from-map .hint {
            font-size: 10px;
            color: #888;
            margin-top: 3px;
        }
        .opp-children { margin: 6px 0 4px 12px; border-left: 3px solid #8e44ad33; padding-left: 10px; }
        .opp-child-card { padding: 6px 8px; margin: 3px 0; background: #faf5ff; border-radius: 4px; border: 1px solid #e8d5f5; }
        .opp-child-card:hover { background: #f0e6f6; }
        /* Assign-to-opportunity dropdown in popup */
        .assign-opp-container select {
            padding: 4px 6px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 12px;
            width: 100%;
            margin-bottom: 6px;
        }
        .assign-opp-container button {
            padding: 5px 12px;
            border: none;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            background: #3498db;
            color: white;
        }

        /* Individual parcels separator */
        .pipeline-section-header {
            padding: 8px 16px;
            background: #f0f0f5;
            font-size: 11px;
            font-weight: 700;
            color: #888;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* Multi-select bar */
        .selection-bar {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1000;
            background: #1a1a2e;
            color: white;
            padding: 10px 20px;
            border-radius: 24px;
            display: none;
            align-items: center;
            gap: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            font-size: 13px;
        }
        .selection-bar button {
            padding: 8px 16px;
            border: 1px solid var(--ink);
            border-radius: 0;
            cursor: pointer;
            font: 500 11px/1.2 Inter, system-ui, sans-serif;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        /* MORNING.1: primary action buttons all go through --ink; the
           destructive class is the only terracotta call-to-action. */
        .selection-bar .btn-create,
        .selection-bar .btn-pipeline {
            background: var(--ink);
            color: var(--ground);
            border: 1px solid var(--ink);
            border-radius: 0;
        }
        .selection-bar .btn-create:hover,
        .selection-bar .btn-pipeline:hover {
            background: transparent;
            color: var(--ink);
        }
        .selection-bar .btn-clear {
            background: transparent;
            color: var(--ink);
            border: 1px solid var(--stone);
            border-radius: 0;
        }
        .selection-bar .btn-clear:hover {
            border-color: var(--ink);
        }

        /* Opportunity modal */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            z-index: 2000;
            display: none;
            align-items: center;
            justify-content: center;
        }
        .modal-overlay.active { display: flex; }
        .modal {
            background: white;
            border-radius: 12px;
            padding: 24px;
            width: 440px;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 8px 40px rgba(0,0,0,0.3);
        }
        .modal h3 {
            margin: 0 0 16px 0;
            font-size: 16px;
            color: #1a1a2e;
            border-bottom: 2px solid var(--terracotta);
            padding-bottom: 8px;
        }
        .modal label {
            display: block;
            font-size: 12px;
            font-weight: 600;
            color: #555;
            margin: 10px 0 4px 0;
        }
        .modal input, .modal textarea, .modal select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 13px;
        }
        .modal textarea { resize: vertical; min-height: 60px; }
        .modal .parcel-summary {
            background: #f8f9fa;
            border-radius: 6px;
            padding: 8px 12px;
            margin-bottom: 12px;
            font-size: 12px;
        }
        .modal .parcel-summary div { padding: 2px 0; color: #555; }
        .modal .btn-row { display: flex; gap: 8px; margin-top: 16px; }
        .modal .btn-row button {
            flex: 1;
            padding: 10px;
            border: none;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
        }
        .modal .btn-submit { background: var(--ink); color: var(--ground); border: 1px solid var(--ink); border-radius: 0; }
        .modal .btn-submit:hover { background: transparent; color: var(--ink); }
        .modal .btn-cancel { background: #eee; color: #555; }

        /* Inline edit form in pipeline */
        .opp-edit-form {
            padding: 8px 16px;
            background: #fffbe6;
            border-bottom: 1px solid #f5d660;
        }
        .opp-edit-form label {
            display: block;
            font-size: 11px;
            font-weight: 600;
            color: #666;
            margin: 6px 0 2px 0;
        }
        .opp-edit-form input, .opp-edit-form select, .opp-edit-form textarea {
            width: 100%;
            padding: 4px 6px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 12px;
        }
        .opp-edit-form .btn-row { display: flex; gap: 4px; margin-top: 8px; }
        .opp-edit-form button {
            padding: 4px 10px;
            border: none;
            border-radius: 4px;
            font-size: 11px;
            cursor: pointer;
        }
        .opp-edit-form .btn-save { background: var(--ink); color: var(--ground); border: 1px solid var(--ink); border-radius: 0; }
        .opp-edit-form .btn-save:hover { background: transparent; color: var(--ink); }
        .opp-edit-form .btn-cancel { background: #eee; color: #555; }

        /* Selected parcel highlight */
        .selected-parcel {
            stroke: #27ae60 !important;
            stroke-width: 4 !important;
            stroke-dasharray: 6 3 !important;
        }

        /* Cursor states — override Leaflet's inline grab cursor */
        .leaflet-container:not(.pan-mode) { cursor: default !important; }
        .leaflet-container .leaflet-interactive { cursor: pointer !important; }
        .leaflet-container.cursor-crosshair { cursor: crosshair !important; }
        .leaflet-container.cursor-crosshair .leaflet-interactive { cursor: crosshair !important; }
        .leaflet-container.cursor-crosshair:active { cursor: crosshair !important; }
        .leaflet-dragging .leaflet-container { cursor: grabbing !important; }
        .leaflet-dragging .leaflet-container .leaflet-interactive { cursor: grabbing !important; }
        /* Pan mode — hand cursor, no parcel selection */
        .leaflet-container.pan-mode { cursor: grab !important; }
        .leaflet-container.pan-mode:active { cursor: grabbing !important; }
        .leaflet-container.pan-mode .leaflet-overlay-pane,
        .leaflet-container.pan-mode .leaflet-marker-pane,
        .leaflet-container.pan-mode .leaflet-shadow-pane,
        .leaflet-container.pan-mode .leaflet-interactive { pointer-events: none !important; cursor: grab !important; }
        .leaflet-container.pan-mode .leaflet-tile-pane,
        .leaflet-container.pan-mode .leaflet-tile-pane * { cursor: grab !important; }
        .pan-mode-badge {
            position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
            background: rgba(0,0,0,0.8); color: #fff; padding: 6px 16px; border-radius: 20px;
            font-size: 13px; font-weight: 600; z-index: 10000; display: none;
            letter-spacing: 0.5px;
        }
        .pan-mode-badge.active { display: block; }

        /* Portfolio panel */
        .portfolio-panel {
            position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
            z-index: 1001; background: #fff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            width: 520px; max-height: 85vh; display: none; flex-direction: column; font-size: 13px;
        }
        .portfolio-panel .pp-header {
            display: flex; justify-content: space-between; align-items: center;
            padding: 12px 16px; border-bottom: 2px solid #1a1a2e;
        }
        .portfolio-panel .pp-header h3 { color: #1a1a2e; font-size: 15px; }
        .portfolio-panel .pp-tabs {
            display: flex; border-bottom: 1px solid #eee; background: #fafafa;
        }
        .portfolio-panel .pp-tab {
            flex: 1; padding: 8px; text-align: center; cursor: pointer;
            font-size: 12px; font-weight: 600; color: #888; border-bottom: 2px solid transparent;
        }
        .portfolio-panel .pp-tab.active { color: var(--terracotta); border-bottom-color: var(--terracotta); }
        .portfolio-panel .pp-content {
            overflow-y: auto; padding: 12px; max-height: calc(85vh - 100px);
        }
        .pp-card {
            background: #f8f9fa; border-radius: 6px; padding: 10px 12px;
            margin-bottom: 8px; border-left: 3px solid var(--terracotta);
        }
        .pp-card-header {
            display: flex; justify-content: space-between; align-items: center; cursor: pointer;
        }
        .pp-card-name { font-weight: 700; font-size: 13px; color: #1a1a2e; }
        .pp-card-meta { font-size: 11px; color: #777; margin-top: 3px; }
        .pp-card-actions { display: flex; gap: 4px; }
        .pp-card-actions button {
            background: none; border: 1px solid #ccc; border-radius: 3px; padding: 1px 6px;
            cursor: pointer; font-size: 10px; color: #555;
        }
        .pp-card-actions button.delete { color: var(--terracotta); border-color: var(--terracotta); }
        .pp-card-detail { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px solid #ddd; font-size: 11px; }
        .pp-card.expanded .pp-card-detail { display: block; }
        .pp-metric { display: inline-block; margin-right: 12px; }
        .pp-metric-val { font-weight: 700; color: #1a1a2e; }
        .pp-sub-list { margin: 6px 0; }
        .pp-sub-item {
            padding: 3px 6px; background: #fff; border-radius: 3px; margin-bottom: 3px;
            display: flex; justify-content: space-between; align-items: center;
        }
        .pp-btn-create {
            width: 100%; padding: 8px; background: var(--ink); color: var(--ground); border: 1px solid var(--ink);
            border-radius: 0; cursor: pointer; font-weight: 500; margin-bottom: 8px;
            font: 500 11px/1.2 Inter, system-ui, sans-serif;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .pp-btn-create:hover { background: transparent; color: var(--ink); }
        .pp-btn-sm {
            background: #3498db; color: #fff; border: none; border-radius: 3px;
            padding: 3px 8px; cursor: pointer; font-size: 10px; font-weight: 600;
        }
        .pp-btn-sm.green { background: #27ae60; }

        /* Generic modal for portfolio forms */
        .pp-modal-overlay {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.5); z-index: 2000; display: none;
            justify-content: center; align-items: center;
        }
        .pp-modal {
            background: #fff; border-radius: 8px; padding: 20px; width: 440px;
            max-height: 80vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,0.3);
        }
        .pp-modal h3 { margin-bottom: 12px; color: #1a1a2e; }
        .pp-modal label { display: block; font-size: 11px; font-weight: 600; color: #555; margin: 8px 0 3px; }
        .pp-modal input, .pp-modal select, .pp-modal textarea {
            width: 100%; padding: 6px 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 12px;
        }
        .pp-modal .btn-row { display: flex; gap: 8px; margin-top: 12px; justify-content: flex-end; }
        .pp-modal .btn-row button {
            padding: 8px 16px; border-radius: 0; cursor: pointer; border: 1px solid var(--ink);
            font: 500 11px/1.2 Inter, system-ui, sans-serif;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .pp-modal .btn-cancel { background: transparent; color: var(--stone); border-color: var(--stone); }
        .pp-modal .btn-cancel:hover { color: var(--ink); border-color: var(--ink); }
        .pp-modal .btn-submit { background: var(--ink); color: var(--ground); border-color: var(--ink); }
        .pp-modal .btn-submit:hover { background: transparent; color: var(--ink); }
        /* Job toast notifications */
        #toast-container {
            position: fixed;
            top: 12px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10000;
            display: flex;
            flex-direction: column;
            gap: 8px;
            pointer-events: none;
        }
        .job-toast {
            pointer-events: auto;
            background: #1a1a2e;
            color: #fff;
            border-radius: 8px;
            padding: 12px 16px;
            min-width: 300px;
            max-width: 420px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            font-size: 13px;
            transition: opacity 0.4s, transform 0.4s;
            opacity: 1;
        }
        .job-toast.fade-out { opacity: 0; transform: translateY(-20px); }
        .job-toast .toast-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
        }
        .job-toast .toast-type {
            font-weight: 700;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--terracotta);
        }
        .job-toast .toast-target { font-weight: 600; }
        .job-toast .toast-progress-bar {
            height: 4px;
            background: #333;
            border-radius: 2px;
            overflow: hidden;
            margin-top: 6px;
        }
        .job-toast .toast-progress-fill {
            height: 100%;
            background: #27ae60;
            border-radius: 2px;
            transition: width 0.3s ease;
            width: 0%;
        }
        .job-toast .toast-status {
            font-size: 11px;
            color: #aaa;
            margin-top: 4px;
        }
        .job-toast.completed .toast-type { color: #27ae60; }
        .job-toast.failed .toast-type { color: var(--terracotta); }

        /* MAP.3a: tone-match the CARTO Positron basemap toward --ground so
           it reads as "old blueline rolled flat" rather than generic gray.
           Filter applied ONLY to the tile pane — overlay pane (clusters,
           parcels, linework) must render unfiltered. */
        .leaflet-tile-pane {
            filter: sepia(0.35) hue-rotate(-8deg) saturate(0.55) brightness(1.05);
        }

        /* MAP.3b: concentric terracotta cluster centroid markers, placed
           over the cluster buffer polygons. Strip div-icon chrome so only
           the SVG reads. */
        .mrp-cluster {
            background: none !important;
            border: none !important;
            box-shadow: none !important;
        }

        /* =============================================================
           MAP.4 — sidebar form controls, action buttons, slider, selects
           ============================================================= */

        /* Shared chip vocabulary: infrastructure presets + any future
           filter-chips inherit from .cluster-filter-chip (MAP.1) via this
           .chip class. Transparent/ink/paper, small-caps, 0 radius. */
        .chip, .infra-chip, .layer-chip, [class*="filter-chip"] {
            background: transparent;
            color: var(--ink);
            border: 1px solid var(--stone);
            border-radius: 0;
            padding: 6px 12px;
            font-family: Inter, "Helvetica Neue", Arial, sans-serif;
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            cursor: pointer;
            transition: none;
            user-select: none;
        }
        .chip:hover, .infra-chip:hover, .layer-chip:hover {
            border-color: var(--ink);
        }
        .chip.is-active, .chip.active,
        .infra-chip.is-active, .layer-chip.is-active,
        [class*="filter-chip"][aria-pressed="true"] {
            background: var(--ink);
            color: var(--ground);
            border-color: var(--ink);
        }

        /* Custom <select>: thin-rule borders, --ink chevron inline SVG. */
        .controls select {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background: var(--ground);
            border: 1px solid var(--stone);
            border-radius: 0;
            padding: 6px 28px 6px 10px;
            font-family: Inter, sans-serif;
            font-size: 12px;
            color: var(--ink);
            cursor: pointer;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%230D2238' stroke-width='1'/></svg>");
            background-repeat: no-repeat;
            background-position: right 10px center;
        }
        .controls select:focus,
        .controls select:focus-visible {
            outline: 1px solid var(--ink);
            outline-offset: -1px;
        }

        /* Score slider: 1px --stone track, 10px terracotta thumb. */
        .controls input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            background: transparent;
            width: 100%;
        }
        .controls input[type="range"]::-webkit-slider-runnable-track {
            height: 1px;
            background: var(--stone);
        }
        .controls input[type="range"]::-moz-range-track {
            height: 1px;
            background: var(--stone);
        }
        .controls input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 10px;
            height: 10px;
            background: var(--terracotta);
            border: none;
            border-radius: 50%;
            margin-top: -4px;
            cursor: pointer;
        }
        .controls input[type="range"]::-moz-range-thumb {
            width: 10px;
            height: 10px;
            background: var(--terracotta);
            border: none;
            border-radius: 50%;
            cursor: pointer;
        }

        .slider-ticks {
            display: flex;
            justify-content: space-between;
            font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
            font-size: 11px;
            color: var(--stone);
            margin-top: 4px;
            font-feature-settings: "tnum" 1;
        }
        .slider-ticks span:nth-child(even) {
            opacity: 0.5;
        }

        /* Checkboxes: minimal scrub, terracotta accent. */
        .controls input[type="checkbox"],
        .controls input[type="range"],
        input[type="range"] { accent-color: var(--terracotta); }

        /* Benchmark action buttons: primary (ink) + destructive (terracotta).
           Primary reverses to ground-on-transparent on hover. */
        .btn-primary,
        button.primary,
        .controls button.action {
            background: var(--ink);
            color: var(--ground);
            border: 1px solid var(--ink);
            border-radius: 0;
            padding: 8px 16px;
            font-family: Inter, sans-serif;
            font-size: 11px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            cursor: pointer;
            transition: background-color 0.12s ease, color 0.12s ease;
        }
        .btn-primary:hover,
        button.primary:hover,
        .controls button.action:hover {
            background: transparent;
            color: var(--ink);
        }

        .btn-destructive,
        button.destructive,
        .btn-delete {
            background: var(--terracotta);
            color: var(--ground);
            border: 1px solid var(--terracotta);
            border-radius: 0;
            padding: 8px 16px;
            font-family: Inter, sans-serif;
            font-size: 11px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            cursor: pointer;
        }
        .btn-destructive:hover,
        button.destructive:hover,
        .btn-delete:hover {
            background: var(--oxide);
            border-color: var(--oxide);
        }

        /* =============================================================
           MAP.2a — cartographic marginalia (scale + compass)
           Readout top-right held for MAP.2b — collides with .controls
           sidebar; see FOLLOWUP.md. Readout CSS below is staged but
           its DOM is not injected in this phase.
           ============================================================= */

        /* Scale bar: Leaflet's built-in L.control.scale, restyled.
           Ink on ground, stone hairline, open-top classic cartographic bar,
           mono numeric label. */
        .leaflet-control-scale {
            margin: 12px !important;
        }
        .leaflet-control-scale-line {
            background: var(--ground);
            border: 1px solid var(--stone);
            border-top: none;
            color: var(--ink);
            font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
            font-size: 11px;
            line-height: 1;
            padding: 4px 6px 2px;
            border-radius: 0;
            box-shadow: none;
            text-align: left;
            text-shadow: none;
            font-feature-settings: "tnum" 1;
        }

        /* Compass rose — bottom-right overlay inside .leaflet-container.
           Pointer-events: none so the compass doesn't intercept map drag. */
        .map-compass {
            position: absolute;
            bottom: 12px;
            right: 12px;
            z-index: 1000;
            background: var(--ground);
            border: 1px solid var(--stone);
            padding: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            pointer-events: none;
            border-radius: 0;
            box-shadow: none;
        }
        .map-compass__label {
            font-family: Inter, system-ui, sans-serif;
            font-size: 10px;
            font-weight: 500;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--ink);
        }

        /* MAP.2b: cursor-coordinate readout. Option 3 (stacked with sidebar)
           — flush under the topnav, right-aligned and same width as .controls
           so the two form a single right-margin column. Pointer-events none
           so the readout doesn't intercept map drag. */
        .map-readout {
            position: absolute;
            top: 52px;
            right: 10px;
            width: 280px;
            z-index: 1000;
            background: var(--ground);
            border: 1px solid var(--stone);
            padding: 8px 12px;
            box-sizing: border-box;
            pointer-events: none;
            border-radius: 0;
            box-shadow: none;
        }
        .map-readout__label {
            font-family: Inter, system-ui, sans-serif;
            font-size: 10px;
            font-weight: 500;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--stone);
            margin-bottom: 4px;
        }
        .map-readout__coords {
            font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
            font-size: 12px;
            line-height: 1.4;
            color: var(--ink);
            white-space: nowrap;
            font-feature-settings: "tnum" 1;
        }
        .map-readout__sep {
            color: var(--stone);
        }