/* GENERATED by .claude/design/pages-build/mk_draw_cf2.py: the /draw page's own CSS (layer pgpage, scoped to main) then the CF2 re-skin (layer pg). */
@layer pgpage {

    /* ============================================
       CSS Variables - Brand Colors
       ============================================ */
    main {
        --primary-color: #005F6E;
        --secondary-color: #6e0f31;
        --accent-color: #ED8B00;
        --accent-color-dark: #C57300;
        --success-color: #1ABC9C;
        --success-color-dark: #16A085;
        --dark-color: #1A171B;
        --neutral-1: #999967;
        --neutral-2: #CCCCCC;
        --neutral-3: #CCCC9A;
        --dark-navy-1: #0a0f1a;
        --dark-navy-2: #141c2e;
        --dark-navy-3: #1a2540;

        /* Map-specific */
        --map-panel-bg: rgba(255, 255, 255, 0.97);
        --map-panel-border: rgba(0, 95, 110, 0.2);
        --map-radius-fill: rgba(26, 188, 156, 0.15);
        --map-radius-stroke: #1ABC9C;
        --map-draw-fill: rgba(237, 139, 0, 0.2);
        --map-draw-stroke: #ED8B00;
    }


    @keyframes drawLine {
        0% {
            stroke-dashoffset: 2500;
            opacity: 0;
        }
        10% {
            opacity: 1;
        }
        100% {
            stroke-dashoffset: 0;
            opacity: 1;
        }
    }


    @keyframes pulse-glow {
        0%, 100% { box-shadow: 0 4px 20px rgba(26, 188, 156, 0.4); }
        50% { box-shadow: 0 4px 30px rgba(26, 188, 156, 0.7); }
    }


    @keyframes subtle-glow {
        0%, 100% { box-shadow: 0 0 6px rgba(110, 15, 49, 0.3); }
        50% { box-shadow: 0 0 12px rgba(110, 15, 49, 0.5); }
    }


    @keyframes shimmer-sweep {
        0% { left: -100%; }
        100% { left: 100%; }
    }


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

    @keyframes lvShimmer { to { background-position: -200% 0; } }


    @keyframes queuePulse {
        0%, 100% { opacity: 0.3; transform: scale(0.8); }
        50% { opacity: 1; transform: scale(1.3); }
    }


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


    /* The overlay panel now opens from the LEFT, so it slides in from the
       left rather than reusing the travel-time panel's rightward motion. */
    @keyframes ovSlideIn {
        from { opacity: 0; transform: translateX(-20px); }
        to   { opacity: 1; transform: translateX(0); }
    }


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


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

        @keyframes mcRmSpin { to { transform: rotate(360deg); } }
@scope (main) {


    .mono {
        font-family: 'JetBrains Mono', monospace;
    }


    @media (min-width: 992px) {
        .topNav-navbar {
            min-height: 80px;
        }
        #navbarNavDropdown {
            min-height: 40px;
        }
    }


    /* Staggered animation delays for each line */
    .fl1 { animation-delay: 0s; }

    .fl2 { animation-delay: 0.15s; }

    .fl3 { animation-delay: 0.3s; }

    .fl4 { animation-delay: 0.45s; }

    .fl5 { animation-delay: 0.6s; }

    .fl6 { animation-delay: 0.75s; }

    .fl7 { animation-delay: 0.9s; }

    .fl8 { animation-delay: 1.05s; }

    .fl9 { animation-delay: 1.2s; }

    .fl10 { animation-delay: 1.35s; }

    .fl11 { animation-delay: 1.5s; }

    .fl12 { animation-delay: 1.65s; }

    .fl13 { animation-delay: 1.8s; }

    .fl14 { animation-delay: 1.95s; }

    .fl15 { animation-delay: 2.1s; }

    .fl16 { animation-delay: 2.25s; }

    .fl17 { animation-delay: 2.4s; }

    .fl18 { animation-delay: 2.55s; }

    .fl19 { animation-delay: 2.7s; }

    .fl20 { animation-delay: 2.85s; }

    .fl21 { animation-delay: 3s; }


    /* Secondary fan delays - starts after primary completes (~5s) */
    .fs1 { animation-delay: 5s; }

    .fs2 { animation-delay: 5.12s; }

    .fs3 { animation-delay: 5.24s; }

    .fs4 { animation-delay: 5.36s; }

    .fs5 { animation-delay: 5.48s; }

    .fs6 { animation-delay: 5.6s; }

    .fs7 { animation-delay: 5.72s; }

    .fs8 { animation-delay: 5.84s; }

    .fs9 { animation-delay: 5.96s; }

    .fs10 { animation-delay: 6.08s; }

    .fs11 { animation-delay: 6.2s; }

    .fs12 { animation-delay: 6.32s; }

    .fs13 { animation-delay: 6.44s; }

    .fs14 { animation-delay: 6.56s; }

    .fs15 { animation-delay: 6.68s; }

    .fs16 { animation-delay: 6.8s; }


    .shp-uid-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.3rem 0.75rem;
        background: rgba(26, 188, 156, 0.15);
        border: 1px solid rgba(26, 188, 156, 0.4);
        color: var(--success-color);
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.7rem;
        font-weight: 500;
        letter-spacing: 0.03em;
        border-radius: 100px;
        cursor: pointer;
        transition: all 0.2s;
    }


    .shp-uid-pill:hover {
        background: rgba(26, 188, 156, 0.25);
        border-color: rgba(26, 188, 156, 0.6);
    }


    .shp-uid-pill i {
        font-size: 0.65rem;
    }


    @media (max-width: 768px) {
        .eco-hero {
            padding: 2rem 0 1.75rem;
        }
        .eco-hero-title {
            font-size: 1.75rem;
        }
        .eco-hero-meta {
            gap: 1rem;
        }
    }


    /* ============================================
       MAP CONTAINER
       ============================================ */
    .map-section {
        padding: 2rem 0;
        background: #f8f9fa;
    }


    .map-container-wrapper {
        position: relative;
        height: clamp(600px, calc(75vh - 50px), 850px);
        background: #f5f5f5;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }


    #map {
        width: 100%;
        height: 100%;
    }


    /* ============================================
       DATA SECTIONS
       ============================================ */
    .data-section {
        padding: 3rem 0;
        background: #fff;
    }


    .data-section:nth-child(even) {
        background: #f8f9fa;
    }


    .section-header {
        margin-bottom: 2rem;
    }


    .section-title {
        font-family: var(--f);
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--dark-color);
        margin: 0 0 0.5rem 0;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }


    .section-title i {
        color: var(--primary-color);
    }


    .section-subtitle {
        color: rgba(0, 0, 0, 0.5);
        font-size: 0.9rem;
        margin: 0;
    }


    /* Stats Cards */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }


    .stat-card {
        background: #fff;
        border: 1px solid rgba(0, 95, 110, 0.1);
        border-radius: 12px;
        padding: 1.5rem;
        transition: all 0.2s;
    }


    .stat-card:hover {
        border-color: var(--primary-color);
        box-shadow: 0 4px 15px rgba(0, 95, 110, 0.1);
    }


    .stat-card-icon {
        width: 40px;
        height: 40px;
        background: rgba(0, 95, 110, 0.1);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary-color);
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }


    .stat-card-value {
        font-family: 'JetBrains Mono', monospace;
        font-size: 1.75rem;
        font-weight: 700;
        color: var(--dark-color);
        line-height: 1;
        margin-bottom: 0.25rem;
    }


    .stat-card-label {
        font-size: 0.8rem;
        color: rgba(0, 0, 0, 0.5);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }


    .stat-card-change {
        font-size: 0.75rem;
        margin-top: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }


    .stat-card-change.positive {
        color: var(--success-color);
    }


    .stat-card-change.negative {
        color: var(--secondary-color);
    }


    /* Land Use Stacked Bar */
    .lu-bar {
        display: flex;
        height: 28px;
        border-radius: 6px;
        overflow: visible;
        background: #f0f0f0;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
    }

    .lu-bar-clip {
        display: flex;
        height: 28px;
        border-radius: 6px;
        overflow: hidden;
        width: 100%;
    }

    .lu-seg {
        height: 100%;
        transition: opacity 0.2s, filter 0.2s;
        min-width: 2px;
        position: relative;
        cursor: default;
    }

    .lu-bar:hover .lu-seg { opacity: 0.65; filter: saturate(0.7); }

    .lu-bar:hover .lu-seg:hover { opacity: 1; filter: saturate(1) brightness(1.08); }

    .lu-bar-clip:hover .lu-seg { opacity: 0.65; filter: saturate(0.7); }

    .lu-bar-clip:hover .lu-seg:hover { opacity: 1; filter: saturate(1) brightness(1.08); }

    .lu-seg::after {
        content: attr(data-tip);
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        background: var(--dark-color);
        color: #fff;
        font-size: 0.7rem;
        font-family: var(--f);
        padding: 4px 10px;
        border-radius: 5px;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.15s;
        z-index: 10;
    }

    .lu-bar:hover .lu-seg:hover::after { opacity: 1; }

    .lu-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 2px 0;
        margin-top: 10px;
    }

    .lu-legend-item {
        display: inline-flex;
        align-items: center;
        margin-right: 14px;
        font-size: 0.76rem;
        color: #555;
        white-space: nowrap;
    }

    .lu-swatch {
        width: 10px;
        height: 10px;
        border-radius: 2px;
        margin-right: 5px;
        flex-shrink: 0;
    }

    .lu-legend-pct {
        color: #999;
        margin-left: 3px;
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.7rem;
    }


    /* Distance Ruler */
    .dr-wrap {
        background: #fff;
        border: 1px solid rgba(0, 95, 110, 0.1);
        border-radius: 12px;
        padding: 1.25rem 1.25rem 0.75rem;
        position: relative;
    }

    .dr-ruler {
        position: relative;
        height: 78px;
        margin: 14px 10px 0 10px;
        overflow: visible;
    }

    .dr-line {
        position: absolute;
        top: 18px;
        left: 0;
        right: 0;
        height: 3px;
        background: #e8ecef;
        border-radius: 2px;
    }

    .dr-line-fill {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--primary-color), #1ABC9C);
        width: 0;
        transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .dr-ruler.animated .dr-line-fill { width: 100%; }


    /* Origin marker */
    .dr-origin {
        position: absolute;
        top: 12px;
        left: -4px;
        z-index: 5;
        opacity: 0;
        transition: opacity 0.5s ease 0.2s;
    }

    .dr-ruler.animated .dr-origin { opacity: 1; }

    .dr-origin-dot {
        width: 11px;
        height: 11px;
        background: var(--primary-color);
        border: 2.5px solid #fff;
        border-radius: 50%;
        box-shadow: 0 0 0 2px var(--primary-color), 0 0 10px rgba(0,95,110,0.25);
    }

    .dr-origin-label {
        position: absolute;
        top: -16px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.58rem;
        color: var(--primary-color);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }


    /* Tick marks */
    .dr-tick {
        position: absolute;
        top: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        opacity: 0;
        transform: translateX(-50%) translateY(8px);
        transition: opacity 0.5s ease, transform 0.5s ease;
        z-index: 3;
    }

    .dr-ruler.animated .dr-tick {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    .dr-tick-dot {
        --dot-scale: 1;
        --dot-ring: #7B2D4E;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        border: 2.5px solid #fff;
        box-shadow: 0 0 0 1.5px var(--dot-ring);
        position: relative;
        top: 12px;
        z-index: 2;
        transform: scale(var(--dot-scale));
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .dr-tick:hover .dr-tick-dot {
        transform: scale(calc(var(--dot-scale) * 1.4));
        box-shadow: 0 0 0 2px var(--dot-ring), 0 0 8px rgba(0,0,0,0.15);
    }

    .dr-tick-line {
        width: 1.5px;
        height: 14px;
        background: rgba(0, 95, 110, 0.25);
        margin-top: 7px;
        transition: background 0.2s;
    }

    .dr-tick:hover .dr-tick-line,
    .dr-tick.active .dr-tick-line {
        background: rgba(0, 95, 110, 0.5);
    }

    .dr-tick-dist {
        font-size: 0.62rem;
        color: #999;
        font-weight: 500;
        margin-top: 2px;
        white-space: nowrap;
        transition: color 0.2s;
    }

    .dr-tick:hover .dr-tick-dist,
    .dr-tick.active .dr-tick-dist {
        color: #666;
    }

    .dr-tick-val {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.68rem;
        font-weight: 700;
        color: var(--dark-color);
        margin-top: 1px;
        white-space: nowrap;
        line-height: 1;
    }


    /* Hover detail card (appears above tick) */
    .dr-detail {
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%) translateY(4px) scale(0.96);
        background: var(--dark-color);
        color: #fff;
        border-radius: 8px;
        padding: 8px 12px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s, transform 0.2s;
        z-index: 20;
        font-size: 0.7rem;
        line-height: 1.5;
        box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    }

    .dr-detail::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: var(--dark-color);
    }

    .dr-tick:hover .dr-detail {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }

    .dr-detail-row {
        display: flex;
        justify-content: space-between;
        gap: 14px;
    }

    .dr-detail-label { color: rgba(255,255,255,0.6); }

    .dr-detail-value { font-family: 'JetBrains Mono', monospace; font-weight: 600; }


    /* Active/touch state — mirrors hover for mobile tap */
    .dr-tick.active .dr-detail {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }

    .dr-tick.active .dr-tick-dot {
        transform: scale(calc(var(--dot-scale) * 1.4));
        box-shadow: 0 0 0 2px var(--dot-ring), 0 0 8px rgba(0,0,0,0.15);
    }


    /* Edge-aware hover cards — prevent clipping at left/right */
    .dr-tick.dr-edge-l .dr-detail {
        left: 0;
        transform: translateX(0) translateY(4px) scale(0.96);
    }

    .dr-tick.dr-edge-l:hover .dr-detail,
    .dr-tick.dr-edge-l.active .dr-detail {
        transform: translateX(0) translateY(0) scale(1);
    }

    .dr-tick.dr-edge-l .dr-detail::after { left: 12px; }


    .dr-tick.dr-edge-r .dr-detail {
        left: auto;
        right: 0;
        transform: translateX(0) translateY(4px) scale(0.96);
    }

    .dr-tick.dr-edge-r:hover .dr-detail,
    .dr-tick.dr-edge-r.active .dr-detail {
        transform: translateX(0) translateY(0) scale(1);
    }

    .dr-tick.dr-edge-r .dr-detail::after { left: auto; right: 12px; }


    /* Insight line below ruler */
    .dr-insight {
        text-align: center;
        font-size: 0.7rem;
        color: #999;
        margin-top: 6px;
    }

    .dr-insight strong { color: var(--dark-color); font-weight: 600; }


    /* Hint fade transition */
    .dr-hint { transition: opacity 0.8s ease; }


    /* Population section mobile overrides */
    @media (max-width: 576px) {
        .stats-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 0.75rem;
        }
        .stat-card {
            padding: 1rem;
        }
        .stat-card-value {
            font-size: 1.35rem;
        }
        .stat-card-icon {
            width: 32px;
            height: 32px;
            font-size: 0.9rem;
            margin-bottom: 0.6rem;
        }
        .lu-seg::after {
            font-size: 0.62rem;
            padding: 3px 7px;
        }
        .dr-wrap { padding: 1rem 0.75rem 0.5rem; }
        .dr-ruler { height: 66px; margin: 10px 4px 0; }
        .dr-tick-val { font-size: 0.6rem; }
        .dr-tick-dist { font-size: 0.54rem; }
        .dr-detail { font-size: 0.64rem; padding: 6px 10px; }
        .dr-origin-label { font-size: 0.5rem; }
        .dr-insight { font-size: 0.62rem; }
    }


    /* Data Tables */
    .data-table-wrapper {
        background: #fff;
        border: 1px solid rgba(0, 95, 110, 0.1);
        border-radius: 12px;
        overflow: hidden;
    }


    .data-table {
        width: 100%;
        border-collapse: collapse;
    }


    .data-table th {
        background: #f8f9fa;
        padding: 1rem;
        text-align: left;
        font-weight: 600;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--dark-color);
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }


    .data-table td {
        padding: 1rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        font-size: 0.9rem;
    }


    .data-table tr:last-child td {
        border-bottom: none;
    }


    .data-table tr:hover {
        background: rgba(0, 95, 110, 0.02);
    }


    /* Land Use Chart */
    .chart-container {
        background: #fff;
        border: 1px solid rgba(0, 95, 110, 0.1);
        border-radius: 12px;
        padding: 1.5rem;
    }


    /* Location Summary Box */
    .location-summary {
        background: linear-gradient(135deg, rgba(0, 95, 110, 0.05) 0%, rgba(26, 188, 156, 0.08) 100%);
        border: 1px solid rgba(0, 95, 110, 0.15);
        border-radius: 12px;
        padding: 1.25rem;
        margin-bottom: 2rem;
    }


    .location-summary-title {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--primary-color);
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }


    .location-summary-text {
        font-size: 0.95rem;
        color: #444;
        line-height: 1.6;
    }


    .location-summary-text strong {
        color: var(--primary-color);
    }


    /* Geographic Swiper */
    .geo-swiper {
        padding-bottom: 3rem;
    }


    .geo-swiper .swiper-slide {
        height: auto;
    }


    .geo-card {
        background: #fff;
        border: 1px solid rgba(0, 95, 110, 0.12);
        border-radius: 12px;
        padding: 1.25rem;
        height: 100%;
        transition: all 0.2s;
    }


    .geo-card:hover {
        border-color: var(--primary-color);
        box-shadow: 0 4px 15px rgba(0, 95, 110, 0.1);
    }


    .geo-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }


    .geo-card-title {
        font-size: 1rem;
        font-weight: 600;
        color: var(--dark-color);
        margin: 0;
    }


    .geo-card-badge {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.7rem;
        font-weight: 500;
        padding: 0.25rem 0.5rem;
        background: rgba(26, 188, 156, 0.1);
        color: var(--success-color);
        border-radius: 4px;
    }


    .geo-card-stat {
        display: flex;
        justify-content: space-between;
        padding: 0.4rem 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    }


    .geo-card-stat:last-child {
        border-bottom: none;
    }


    .geo-card-label {
        font-size: 0.8rem;
        color: rgba(0, 0, 0, 0.5);
    }


    .geo-card-value {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--dark-color);
    }


    .geo-card-link {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        margin-top: 0.75rem;
        font-size: 0.8rem;
        color: var(--primary-color);
        text-decoration: none;
        transition: color 0.2s;
    }


    .geo-card-link:hover {
        color: var(--success-color);
    }


    /* Geo pill toggle */
    .geo-pills {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 1.25rem;
    }

    .geo-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.45rem 1rem;
        border-radius: 100px;
        font-size: 0.82rem;
        font-weight: 600;
        cursor: pointer;
        border: 1.5px solid rgba(0, 95, 110, 0.2);
        background: transparent;
        color: #666;
        transition: all 0.25s ease;
        white-space: nowrap;
        outline: none;
    }

    .geo-pill:hover { border-color: var(--primary-color); color: var(--primary-color); }

    .geo-pill.active {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: #fff;
    }

    .geo-pill i { font-size: 0.75rem; }

    .geo-pill .pill-count {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.65rem;
        font-weight: 500;
        padding: 0.1rem 0.45rem;
        border-radius: 100px;
        background: rgba(0,0,0,0.08);
    }

    .geo-pill.active .pill-count {
        background: rgba(255,255,255,0.25);
        color: #fff;
    }

    .geo-panel { display: none; }

    .geo-panel.active { display: block; }


    .geo-swiper .swiper-pagination-bullet {
        background: var(--primary-color);
    }


    .geo-swiper .swiper-pagination-bullet-active {
        background: var(--success-color);
    }


    /* Processing Overlay */
    .processing-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(255, 255, 255, 0.9);
        z-index: 1000;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 1rem;
    }


    .processing-overlay.active {
        display: flex;
    }


    .processing-spinner {
        width: 48px;
        height: 48px;
        border: 3px solid rgba(0, 95, 110, 0.2);
        border-top-color: var(--primary-color);
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }


    .processing-text {
        color: var(--dark-color);
        font-weight: 500;
    }


    /* Mapbox overrides for brand consistency */
    .mapboxgl-ctrl-group {
        background: #fff;
        border: 1px solid var(--map-panel-border);
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }


    .mapboxgl-ctrl-group button {
        background: transparent;
        border-bottom: 1px solid var(--map-panel-border);
        width: 36px;
        height: 36px;
    }


    .mapboxgl-ctrl-group button:last-child {
        border-bottom: none;
    }


    .mapboxgl-ctrl-group button:hover {
        background: rgba(0, 95, 110, 0.1);
    }


    .mapboxgl-ctrl-attrib {
        background: rgba(255, 255, 255, 0.9);
        font-size: 10px;
    }


    .mapboxgl-ctrl-attrib a {
        color: var(--primary-color);
    }


    /* ============================================
       CUSTOM DRAW TOOLBAR
       ============================================ */
    .draw-toolbar {
        position: absolute;
        top: 1rem;
        right: 1rem;
        display: flex;
        flex-direction: column;
        gap: 2px;
        z-index: 10;
    }


    .draw-btn {
        width: 40px;
        height: 40px;
        background: #fff;
        border: 1px solid var(--map-panel-border);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--dark-color);
        font-size: 1rem;
        transition: all 0.2s;
        position: relative;
    }


    .draw-btn:hover {
        background: rgba(0, 95, 110, 0.1);
        border-color: var(--primary-color);
        color: var(--primary-color);
    }


    .draw-btn.active {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: #fff;
    }


    .draw-btn[data-tooltip]:hover::after {
        content: attr(data-tooltip);
        position: absolute;
        right: 48px;
        background: var(--dark-color);
        color: #fff;
        padding: 0.4rem 0.6rem;
        border-radius: 4px;
        font-size: 0.7rem;
        white-space: nowrap;
        pointer-events: none;
    }


    .draw-toolbar-divider {
        height: 1px;
        background: var(--map-panel-border);
        margin: 4px 0;
    }


    /* ============================================
       DRAW INFO MODAL
       ============================================ */
    #drawInfoModal .modal-content {
        border: none;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    }


    #drawInfoModal .modal-header {
        background: linear-gradient(135deg, var(--dark-navy-1) 0%, var(--dark-navy-2) 50%, var(--dark-navy-3) 100%);
        border-bottom: 2px solid var(--success-color);
        padding: 1.5rem 1.75rem;
        position: relative;
        overflow: hidden;
    }


    #drawInfoModal .modal-header::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(26, 188, 156, 0.12) 0%, transparent 70%);
        pointer-events: none;
    }


    #drawInfoModal .modal-header .modal-title {
        font-family: var(--f);
        font-weight: 700;
        font-size: 1.15rem;
        color: #fff;
        letter-spacing: 0.02em;
    }


    #drawInfoModal .modal-header .modal-title i {
        color: var(--success-color);
        margin-right: 0.5rem;
    }


    #drawInfoModal .modal-body {
        padding: 1.75rem;
        max-height: 65vh;
        overflow-y: auto;
    }


    .info-section {
        margin-bottom: 1.75rem;
    }


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


    .info-section-label {
        font-size: 0.62rem;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: #a1a1aa;
        font-weight: 700;
        margin-bottom: 0.75rem;
    }


    .info-card {
        display: flex;
        gap: 1rem;
        padding: 1rem 1.15rem;
        border-radius: 12px;
        border: 1px solid #f0f0f0;
        margin-bottom: 0.5rem;
        transition: all 0.2s ease;
        background: #fff;
    }


    .info-card:hover {
        border-color: rgba(0, 95, 110, 0.25);
        box-shadow: 0 2px 12px rgba(0, 95, 110, 0.06);
    }


    .info-card-icon {
        flex-shrink: 0;
        width: 42px;
        height: 42px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
    }


    .info-card-icon.icon-point { background: rgba(0, 95, 110, 0.1); color: var(--primary-color); }

    .info-card-icon.icon-radial { background: rgba(26, 188, 156, 0.12); color: var(--success-color); }

    .info-card-icon.icon-polygon { background: rgba(237, 139, 0, 0.12); color: var(--accent-color); }

    .info-card-icon.icon-travel { background: rgba(110, 15, 49, 0.1); color: var(--secondary-color); }

.info-card-icon.icon-join { background: rgba(110, 15, 49, 0.1); color: var(--secondary-color); }

    .info-card-icon.icon-report { background: rgba(0, 95, 110, 0.1); color: var(--primary-color); }

    .info-card-icon.icon-pro { background: linear-gradient(135deg, rgba(237, 139, 0, 0.15), rgba(237, 139, 0, 0.05)); color: var(--accent-color); }


    .info-card-body {
        flex: 1;
        min-width: 0;
    }


    .info-card-title {
        font-weight: 600;
        font-size: 0.88rem;
        color: var(--dark-color);
        margin-bottom: 0.2rem;
    }


    .info-card-desc {
        font-size: 0.78rem;
        color: #71717a;
        line-height: 1.5;
        margin: 0;
    }


    .info-flow-steps {
        display: flex;
        align-items: flex-start;
        gap: 0;
        padding: 0.5rem 0;
    }


    .info-flow-step {
        flex: 1;
        text-align: center;
        position: relative;
        padding: 0 0.25rem;
    }


    .info-flow-step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 18px;
        right: -2px;
        width: calc(100% - 40px);
        height: 2px;
        background: linear-gradient(90deg, var(--success-color), rgba(26, 188, 156, 0.2));
        transform: translateX(50%);
    }


    .info-flow-num {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary-color), var(--success-color));
        color: #fff;
        font-weight: 700;
        font-size: 0.82rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.5rem;
        box-shadow: 0 2px 8px rgba(0, 95, 110, 0.2);
    }


    .info-flow-text {
        font-size: 0.72rem;
        color: #52525b;
        line-height: 1.4;
        font-weight: 500;
    }


    .info-pro-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        background: linear-gradient(135deg, var(--accent-color), var(--accent-color-dark));
        color: #fff;
        padding: 0.2rem 0.6rem;
        border-radius: 20px;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }


    .info-tip {
        background: rgba(26, 188, 156, 0.06);
        border: 1px solid rgba(26, 188, 156, 0.15);
        border-left: 3px solid var(--success-color);
        border-radius: 8px;
        padding: 0.85rem 1rem;
        font-size: 0.78rem;
        color: #3f3f46;
        line-height: 1.55;
    }


    .info-tip i {
        color: var(--success-color);
        margin-right: 0.35rem;
    }


    /* Map Style Selector */
    .map-style-selector {
        position: absolute;
        top: 1rem;
        left: 1rem;
        z-index: 10;
    }


    .map-style-select {
        background: #fff;
        border: 1px solid var(--map-panel-border);
        border-radius: 6px;
        padding: 0.5rem 2rem 0.5rem 0.75rem;
        font-family: var(--f);
        font-size: 0.8rem;
        color: var(--dark-color);
        cursor: pointer;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 8px center;
    }


    .map-style-select:focus {
        outline: none;
        border-color: var(--primary-color);
    }


    .fullscreen-toggle {
        position: absolute;
        top: 1rem;
        left: 1rem;
        z-index: 10;
        width: 36px;
        height: 36px;
        background: #fff;
        border: 1px solid var(--map-panel-border);
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        color: var(--text-color);
        transition: all 0.2s ease;
        padding: 0;
    }

    .fullscreen-toggle svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .fullscreen-toggle:hover {
        background: var(--light-gray);
    }

    .fullscreen-toggle .fs-compress { display: none; }

    .fullscreen-toggle.is-fullscreen .fs-expand { display: none; }

    .fullscreen-toggle.is-fullscreen .fs-compress { display: block; }


    /* Complete the 2 x 2 group: fullscreen/search, layers/help. */
    .map-help-btn {
        position: absolute;
        top: calc(1rem + 36px + 0.4rem);
        left: calc(1rem + 36px + 0.5rem);
        z-index: 10;
        width: 36px;
        height: 36px;
        border-radius: 6px;
        color: var(--text-color);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .map-help-btn[data-tooltip]:hover::after {
        left: 44px;
        right: auto;
    }


    /* Search Toggle and Geocoder */
    .search-toggle-container {
        position: absolute;
        top: 1rem;
        left: calc(1rem + 36px + 0.5rem); /* clear of the icon stack */
        z-index: 10;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }


    .search-toggle-btn {
        width: 36px;
        height: 36px;
        border-radius: 6px;
        border: 1px solid var(--map-panel-border);
        background: #fff;
        color: var(--text-color);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        transition: all 0.2s ease;
    }


    .search-toggle-btn:hover {
        background: var(--light-gray);
    }


    .search-toggle-btn.active {
        background: var(--primary-color);
        color: #fff;
        border-color: var(--primary-color);
    }


    .geocoder-container {
        z-index: 10;
    }


    .geocoder-container .mapboxgl-ctrl-geocoder {
        min-width: 260px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        border: 1px solid var(--map-panel-border);
        border-radius: 6px;
        font-family: var(--f);
    }


    .geocoder-container .mapboxgl-ctrl-geocoder input {
        font-size: 0.85rem;
    }


    /* Floating Submit Button */
    .floating-submit-btn {
        position: absolute;
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        background: linear-gradient(135deg, var(--success-color) 0%, var(--success-color-dark) 100%);
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 0.85rem 1.5rem;
        font-family: var(--f);
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 4px 20px rgba(26, 188, 156, 0.4);
        display: flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.2s;
    }


    .floating-submit-btn:hover {
        transform: translateX(-50%) translateY(-2px);
        box-shadow: 0 6px 25px rgba(26, 188, 156, 0.5);
    }


    .btn-glow-cta {
        border: 2px solid var(--secondary-color);
        animation: subtle-glow 3s ease-in-out infinite;
    }


    .btn-glow-cta:hover {
        animation: none;
        box-shadow: 0 0 14px rgba(110, 15, 49, 0.45);
    }


    /* Full Analysis progress button */
    .btn-analysis-progress {
        position: relative;
        overflow: hidden;
        background: linear-gradient(135deg, var(--primary-color), #00838f);
        border: none;
        animation: none;
    }


    .btn-analysis-progress::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
        animation: shimmer-sweep 1.8s ease-in-out infinite;
    }


    .btn-analysis-progress .progress-bar-inner {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 3px;
        background: var(--success-color);
        border-radius: 0 2px 0 0;
        transition: width 0.4s ease;
    }


    .analysis-msg-enter {
        animation: msgSlideIn 0.35s ease forwards;
    }


    /* ==================================================================
       LATEST-ESTIMATE LOGIN GATE
       Anonymous visitors get Census-vintage figures only; the latest
       population estimate is never written to the DOM. Anything that
       shimmers below is a deliberate placeholder - there is no real
       value hidden behind it.
       ================================================================== */
    .locked-value {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        vertical-align: middle;
    }

    .locked-value .lv-shimmer {
        display: inline-block;
        width: 5.5ch;
        height: 1.1em;
        border-radius: 5px;
        background: linear-gradient(90deg,
            rgba(0, 95, 110, 0.08) 25%,
            rgba(0, 95, 110, 0.18) 50%,
            rgba(0, 95, 110, 0.08) 75%);
        background-size: 200% 100%;
        animation: lvShimmer 2.2s ease-in-out infinite;
    }

    @media (prefers-reduced-motion: reduce) {
        .locked-value .lv-shimmer { animation: none; background: rgba(0, 95, 110, 0.10); }
    }


    .lock-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        color: var(--primary-color);
        background: rgba(0, 95, 110, 0.07);
        border: 1px solid rgba(0, 95, 110, 0.18);
        border-radius: 999px;
        padding: 0.18rem 0.6rem;
        cursor: pointer;
        white-space: nowrap;
        transition: background 0.15s ease, border-color 0.15s ease;
    }

    .lock-chip:hover,
    .lock-chip:focus-visible {
        background: rgba(0, 95, 110, 0.13);
        border-color: rgba(0, 95, 110, 0.32);
    }

    .lock-chip i { font-size: 0.62rem; }


    /* Qualitative growth line that replaces the numeric change line */
    .stat-card-change.stat-card-change--qual {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
        color: #777;
    }

    .stat-card-change--qual .qual-note {
        font-size: 0.7rem;
        color: #999;
    }


    /* Consolidated sign-in ask (sits inside the summary panel) */
    .signin-ask {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1.25rem;
        margin-top: 1.1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(0, 95, 110, 0.14);
    }

    .signin-ask-title {
        font-weight: 600;
        font-size: 0.92rem;
        color: var(--primary-color);
        line-height: 1.35;
    }

    .signin-ask-body {
        font-size: 0.83rem;
        color: #5a6a70;
        margin-top: 2px;
        line-height: 1.5;
    }

    .signin-ask-actions {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        flex-shrink: 0;
    }

    .btn-signin-primary {
        background: var(--primary-color);
        color: #fff;
        border: 0;
        border-radius: 8px;
        padding: 0.55rem 1.25rem;
        font-weight: 600;
        font-size: 0.86rem;
        white-space: nowrap;
        cursor: pointer;
    }

    .btn-signin-primary:hover { background: #004a56; color: #fff; }

    .btn-signin-secondary {
        font-weight: 600;
        font-size: 0.86rem;
        color: var(--primary-color);
        text-decoration: none;
        padding: 0.55rem 0.6rem;
        white-space: nowrap;
        cursor: pointer;
    }

    .btn-signin-secondary:hover { color: #004a56; text-decoration: underline; }


    /* Locked footer row inside the Growth Insights card */
    .insights-locked-footer {
        margin-top: 0.85rem;
        padding-top: 0.7rem;
        border-top: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.76rem;
        color: #888;
    }


    @media (max-width: 768px) {
        .signin-ask { flex-direction: column; align-items: stretch; }
        .signin-ask-actions { flex-direction: column; align-items: stretch; gap: 0.5rem; }
        .btn-signin-primary, .btn-signin-secondary { width: 100%; text-align: center; }
    }


    /* ── Surrounds map builder launcher ─────────────────────────────────
       Visual language matches the launcher on the area pages
       (newAreaHTML.php) so the same feature reads the same everywhere. */
    .as-surr-launch {
        display: flex; align-items: center; gap: 1rem;
        padding: 1rem 1.25rem; border-radius: 12px; cursor: pointer;
        background: linear-gradient(135deg, #0e1a1f 0%, #1c2d35 100%);
        border: 1px solid rgba(255, 255, 255, 0.08);
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .as-surr-launch:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    }

    .as-surr-launch-icon {
        width: 46px; height: 46px; flex-shrink: 0; border-radius: 11px;
        display: flex; align-items: center; justify-content: center;
        background: rgba(26, 188, 156, 0.15); border: 1px solid #1ABC9C;
        color: #1ABC9C; font-size: 1.15rem;
    }

    .as-surr-launch-copy { flex: 1; min-width: 0; }

    .as-surr-launch-copy strong {
        display: block; color: #fff; font-size: 1rem; margin-bottom: 2px;
    }

    .as-surr-launch-copy span {
        display: block; color: #8a9ba3; font-size: 0.82rem; line-height: 1.5;
    }

    /* Must out-specify `.as-surr-launch-copy span { display: block }` above,
       or the pill stretches to the full width of the card. */
    .as-surr-launch-copy .as-surr-pro {
        display: inline-block; margin-left: 8px; vertical-align: 2px;
        font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em;
        text-transform: uppercase; padding: 2px 8px; border-radius: 100px;
        background: rgba(237, 139, 0, 0.16); color: #ED8B00;
        border: 1px solid rgba(237, 139, 0, 0.45);
    }

    /* The card is the only launcher — it dims while the scope token mints. */
    .as-surr-launch.is-busy { opacity: 0.65; pointer-events: none; transform: none; }

    .as-surr-note {
        margin-top: 0.5rem; font-size: 0.76rem; color: #8a9ba3; line-height: 1.5;
    }

    @media (max-width: 575px) {
        .as-surr-launch { flex-direction: column; align-items: flex-start; }
        .as-surr-launch-copy span { font-size: 0.8rem; }
    }


    /* Population limit banner */
    .pop-limit-banner {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        background: linear-gradient(135deg, #fff8e1, #fff3cd);
        border: 1px solid #ffc107;
        border-left: 4px solid #f59e0b;
        border-radius: 8px;
        padding: 1rem 1.25rem;
        margin-top: 1rem;
        animation: msgSlideIn 0.35s ease forwards;
    }


    .pop-limit-banner i {
        color: #f59e0b;
        font-size: 1.25rem;
        margin-top: 2px;
        flex-shrink: 0;
    }


    .pop-limit-banner .pop-limit-text {
        color: #92400e;
        font-size: 0.9rem;
        line-height: 1.5;
    }


    .pop-limit-banner .pop-limit-text strong {
        color: #78350f;
    }


    .btn-pop-limited {
        background: #e5e7eb;
        color: #9ca3af;
        border: 1px solid #d1d5db;
        cursor: not-allowed;
        opacity: 0.7;
        animation: none;
        box-shadow: none;
    }


    /* Queue stage (waiting for server to pick up job) */
    .btn-analysis-queue {
        position: relative;
        overflow: hidden;
        background: linear-gradient(135deg, #92400e, #b45309);
        border: none;
        animation: none;
    }


    .btn-analysis-queue::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
        animation: shimmer-sweep 2.5s ease-in-out infinite;
    }


    .btn-analysis-queue .progress-bar-inner {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 3px;
        background: rgba(255, 255, 255, 0.45);
        border-radius: 0 2px 0 0;
        transition: width 0.8s ease;
    }


    .queue-pulse {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #fbbf24;
        margin-right: 8px;
        vertical-align: middle;
        animation: queuePulse 1.4s ease-in-out infinite;
    }


    .floating-submit-btn {
        animation: pulse-glow 2s ease-in-out infinite;
    }


    .floating-submit-btn:hover {
        animation: none;
    }


    /* ============================================
       RADIUS SLIDER PANEL
       ============================================ */
    .radius-panel {
        position: absolute;
        top: calc(1rem + 72px + 0.8rem);
        left: 1rem;
        background: var(--map-panel-bg);
        border: 1px solid var(--map-panel-border);
        border-radius: 10px;
        padding: 0.6rem 0.75rem;
        z-index: 10;
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        display: none;
        min-width: 340px;
    }


    .radius-panel.active {
        display: block;
    }


    .radius-panel-title {
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--dark-color);
        margin-bottom: 0.4rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.4rem;
    }


    .radius-panel-title-text {
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }


    .radius-panel-title i {
        color: var(--primary-color);
    }


    .radius-panel-close {
        background: transparent;
        border: none;
        color: #666;
        font-size: 1.15rem;
        cursor: pointer;
        line-height: 1;
        padding: 2px 6px;
        margin: -2px -4px -2px 0;
        border-radius: 4px;
        flex-shrink: 0;
    }


    .radius-panel-close:hover {
        color: var(--dark-color);
        background: rgba(0, 0, 0, 0.06);
    }


    .radius-panel-close:focus-visible {
        outline: 2px solid #005F6E;
        outline-offset: 1px;
    }


    .radius-control {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }


    .radius-btn {
        width: 36px;
        height: 36px;
        border: 1px solid var(--map-panel-border);
        border-radius: 6px;
        background: #fff;
        color: var(--primary-color);
        font-size: 1.1rem;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s ease;
        flex-shrink: 0;
        user-select: none;
    }


    .radius-btn:hover {
        background: var(--primary-color);
        color: #fff;
        border-color: var(--primary-color);
    }


    .radius-btn:active {
        transform: scale(0.93);
    }


    .radius-slider {
        flex: 1;
        -webkit-appearance: none;
        appearance: none;
        height: 6px;
        background: rgba(0, 95, 110, 0.15);
        border-radius: 3px;
        outline: none;
    }


    .radius-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 18px;
        height: 18px;
        background: var(--primary-color);
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0, 95, 110, 0.3);
    }


    .radius-slider::-moz-range-thumb {
        width: 18px;
        height: 18px;
        background: var(--primary-color);
        border-radius: 50%;
        cursor: pointer;
        border: none;
        box-shadow: 0 2px 6px rgba(0, 95, 110, 0.3);
    }


    .radius-value {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-color);
        min-width: 55px;
        text-align: center;
    }


    /* ============================================
       REFERENCE POINT PROMPT
       ============================================ */
    .ref-point-prompt {
        position: absolute;
        bottom: 5rem;
        left: 50%;
        transform: translateX(-50%);
        background: #fff;
        border: 1px solid var(--map-panel-border);
        border-radius: 12px;
        padding: 1rem 1.25rem;
        z-index: 15;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
        display: flex;
        align-items: center;
        gap: 1rem;
        max-width: 420px;
        animation: slideUp 0.3s ease-out;
    }


    .ref-point-prompt-icon {
        width: 44px;
        height: 44px;
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--success-color) 100%);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1.2rem;
        flex-shrink: 0;
    }


    .ref-point-prompt-content {
        flex: 1;
        min-width: 0;
    }


    .ref-point-prompt-title {
        font-family: var(--f);
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--dark-color);
        margin-bottom: 0.25rem;
    }


    .ref-point-prompt-text {
        font-size: 0.8rem;
        color: rgba(0, 0, 0, 0.6);
        line-height: 1.4;
    }


    .ref-point-prompt-actions {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        flex-shrink: 0;
    }


    .ref-point-btn {
        padding: 0.5rem 0.9rem;
        border-radius: 6px;
        font-family: var(--f);
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        white-space: nowrap;
    }


    .ref-point-btn-primary {
        background: var(--primary-color);
        color: #fff;
    }


    .ref-point-btn-primary:hover {
        background: var(--success-color);
    }


    .ref-point-btn-secondary {
        background: #f0f0f0;
        color: var(--dark-color);
    }


    .ref-point-btn-secondary:hover {
        background: #e0e0e0;
    }


    @media (max-width: 480px) {
        .ref-point-prompt {
            flex-direction: column;
            text-align: center;
            max-width: calc(100vw - 2rem);
            bottom: 4rem;
        }

        .ref-point-prompt-actions {
            flex-direction: row;
            width: 100%;
        }

        .ref-point-btn {
            flex: 1;
        }
    }


    /* ============================================
       PLANNING OVERLAYS PANEL  (zoning + cadastre)
       Deliberately reuses the .tt-panel geometry and chrome so the map has one
       panel language, not two.
       ============================================ */
    /* Sits directly under the fullscreen toggle, continuing the left-hand
       stack: style select (38px), fullscreen (36px), then this. */
    .ov-toggle-btn {
        position: absolute;
        top: calc(1rem + 36px + 0.4rem);
        left: 1rem;
        z-index: 10;
        width: 36px;
        height: 36px;
        background: #fff;
        border: 1px solid var(--map-panel-border);
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        color: var(--text-color);
        transition: all 0.2s ease;
        padding: 0;
        font-size: 0.95rem;
    }

    .ov-toggle-btn:hover {
        background: rgba(0, 95, 110, 0.1);
        border-color: var(--primary-color);
        color: var(--primary-color);
    }

    .ov-toggle-btn.active {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: #fff;
    }

    .ov-toggle-btn[data-tooltip]:hover::after {
        content: attr(data-tooltip);
        position: absolute;
        left: 44px;
        background: var(--dark-color);
        color: #fff;
        padding: 0.4rem 0.6rem;
        border-radius: 4px;
        font-size: 0.7rem;
        white-space: nowrap;
        pointer-events: none;
        z-index: 20;
    }


    .ov-panel {
        position: absolute;
        top: 1rem;
        left: calc(1rem + 44px);
        width: 320px;
        max-height: calc(100% - 2rem);
        display: flex;
        flex-direction: column;
        background: var(--map-panel-bg);
        border: 1px solid var(--map-panel-border);
        border-radius: 10px;
        z-index: 12;
        backdrop-filter: blur(10px);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
        overflow: hidden;
        animation: ovSlideIn 0.25s ease-out;
        font-family: var(--f);
    }


    .ov-panel-head {
        background: var(--dark-color);
        padding: 0.75rem 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 0 0 auto;
    }


    .ov-panel-head h4 {
        margin: 0;
        color: #fff;
        font-size: 0.9rem;
        font-weight: 600;
        letter-spacing: -0.01em;
    }


    .ov-panel-head h4::before {
        content: '';
        display: inline-block;
        width: 3px;
        height: 14px;
        background: var(--accent-color);
        margin-right: 8px;
        vertical-align: middle;
    }


    .ov-panel-close {
        background: none;
        border: none;
        color: rgba(255, 255, 255, 0.6);
        cursor: pointer;
        font-size: 0.85rem;
        padding: 4px;
        transition: color 0.15s;
    }


    .ov-panel-close:hover { color: #fff; }


    .ov-panel-body {
        padding: 0.85rem 1rem 1rem;
        overflow-y: auto;
        flex: 1 1 auto;
    }


    /* --- one row per overlay ------------------------------------------- */
    .ov-row + .ov-row {
        margin-top: 0.6rem;
        padding-top: 0.6rem;
        border-top: 1px solid var(--map-panel-border);
    }


    .ov-row-head {
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }


    .ov-row-title {
        flex: 1;
        min-width: 0;
    }


    .ov-row-title b {
        display: block;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--dark-color);
        line-height: 1.2;
    }


    .ov-row-title span {
        display: block;
        font-size: 0.68rem;
        color: #6b7280;
        line-height: 1.3;
        margin-top: 1px;
    }


    /* Switch. Built from a checkbox so it stays keyboard-operable. */
    .ov-switch { position: relative; width: 38px; height: 21px; flex: 0 0 auto; }

    .ov-switch input {
        position: absolute; inset: 0; opacity: 0; margin: 0;
        width: 100%; height: 100%; cursor: pointer; z-index: 2;
    }

    .ov-switch i {
        position: absolute; inset: 0; border-radius: 21px;
        background: #cbd5e1; transition: background 0.2s;
    }

    .ov-switch i::after {
        content: ''; position: absolute; top: 2px; left: 2px;
        width: 17px; height: 17px; border-radius: 50%;
        background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
        transition: transform 0.2s;
    }

    .ov-switch input:checked + i { background: var(--primary-color); }

    .ov-switch input:checked + i::after { transform: translateX(17px); }

    .ov-switch input:focus-visible + i {
        outline: 2px solid var(--accent-color); outline-offset: 2px;
    }

    .ov-switch input:disabled { cursor: not-allowed; }

    .ov-switch input:disabled + i { background: #e5e7eb; }


    /* Per-overlay detail, revealed only when that overlay is on */
    .ov-detail { margin-top: 0.55rem; display: none; }

    .ov-row.on .ov-detail { display: block; }


    .ov-opacity {
        display: flex; align-items: center; gap: 0.5rem;
        font-size: 0.68rem; color: #6b7280;
    }

    .ov-opacity input[type=range] {
        flex: 1; height: 4px; -webkit-appearance: none; appearance: none;
        background: #e2e8f0; border-radius: 2px; outline: none; cursor: pointer;
    }

    .ov-opacity input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none; appearance: none;
        width: 14px; height: 14px; border-radius: 50%;
        background: var(--primary-color); cursor: pointer;
    }

    .ov-opacity input[type=range]::-moz-range-thumb {
        width: 14px; height: 14px; border: none; border-radius: 50%;
        background: var(--primary-color); cursor: pointer;
    }


    /* --- legend, which doubles as the class filter ----------------------- */
    .ov-legend { margin-top: 0.5rem; }


    .ov-legend-hint {
        font-size: 0.64rem; color: #9ca3af; margin-bottom: 0.35rem;
    }


    .ov-swatches { display: flex; flex-wrap: wrap; gap: 3px; }


    .ov-sw {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 2px 7px 2px 4px;
        border: 1px solid var(--map-panel-border);
        border-radius: 20px; background: #fff;
        font-size: 0.63rem; color: var(--dark-color);
        cursor: pointer; user-select: none;
        transition: opacity 0.15s, border-color 0.15s;
    }

    .ov-sw i {
        width: 10px; height: 10px; border-radius: 3px;
        border: 1px solid rgba(0,0,0,0.15); flex: 0 0 auto;
    }

    .ov-sw:hover { border-color: var(--primary-color); }

    /* Muted rather than hidden: a filtered-out class must still be findable. */
    .ov-sw.off { opacity: 0.32; }


    .ov-legend-actions {
        display: flex; gap: 0.4rem; margin-top: 0.45rem;
    }

    .ov-mini {
        flex: 1; padding: 3px 0; font-size: 0.64rem;
        border: 1px solid var(--map-panel-border); border-radius: 5px;
        background: #fff; color: #6b7280; cursor: pointer;
        transition: all 0.15s;
    }

    .ov-mini:hover {
        border-color: var(--primary-color); color: var(--primary-color);
    }


    .ov-note {
        margin-top: 0.5rem; font-size: 0.63rem; line-height: 1.4;
        color: #9ca3af;
    }

    .ov-note b { color: #6b7280; font-weight: 600; }


    /* Shown when the current view has no data for an overlay */
    .ov-warn {
        margin-top: 0.45rem; padding: 0.4rem 0.55rem;
        background: rgba(237, 139, 0, 0.1);
        border-left: 2px solid var(--accent-color);
        border-radius: 3px; font-size: 0.65rem; color: #92400e;
        line-height: 1.35;
    }


    /* --- click popup ------------------------------------------------------ */
    .ov-pop .mapboxgl-popup-content {
        padding: 0; border-radius: 8px; overflow: hidden;
        box-shadow: 0 6px 24px rgba(0,0,0,0.18);
        font-family: var(--f);
        min-width: 210px;
    }

    .ov-pop .mapboxgl-popup-close-button {
        color: rgba(255,255,255,0.75); font-size: 1.1rem;
        padding: 2px 7px; right: 2px; top: 1px;
    }

    .ov-pop .mapboxgl-popup-close-button:hover {
        background: none; color: #fff;
    }

    .ov-pop-head {
        background: var(--dark-color); color: #fff;
        padding: 0.5rem 1.6rem 0.5rem 0.75rem;
    }

    .ov-pop-code {
        font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em;
        line-height: 1.1;
    }

    .ov-pop-name {
        font-size: 0.7rem; opacity: 0.82; margin-top: 1px; line-height: 1.25;
    }

    .ov-pop-body { padding: 0.55rem 0.75rem 0.65rem; }

    .ov-pop-cls {
        display: inline-flex; align-items: center; gap: 5px;
        font-size: 0.68rem; color: var(--dark-color); font-weight: 600;
    }

    .ov-pop-cls i {
        width: 10px; height: 10px; border-radius: 3px;
        border: 1px solid rgba(0,0,0,0.15);
    }

    .ov-pop-meta {
        margin-top: 0.4rem; font-size: 0.65rem; color: #6b7280;
        line-height: 1.4;
    }

    .ov-pop-meta b { color: var(--dark-color); font-weight: 600; }


    @media (max-width: 768px) {
        .ov-panel {
            right: 0.5rem; left: 0.5rem; width: auto;
            top: auto; bottom: 0.5rem; max-height: 58%;
        }
    }


    /* ============================================
       TRAVEL TIME INLINE PANEL
       ============================================ */
    .tt-panel {
        position: absolute;
        top: 1rem;
        right: calc(1rem + 44px);
        width: 340px;
        background: var(--map-panel-bg);
        border: 1px solid var(--map-panel-border);
        border-radius: 10px;
        z-index: 12;
        backdrop-filter: blur(10px);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
        overflow: hidden;
        animation: ttSlideIn 0.25s ease-out;
        font-family: var(--f);
    }


    /* --- development controls: a segmented picker, one at a time ---------- */
    .ov-seg { display: flex; gap: 3px; margin-top: 0.5rem; }

    .ov-seg button {
        flex: 1; padding: 5px 2px; font-size: 0.66rem; line-height: 1.15;
        border: 1px solid var(--map-panel-border); border-radius: 6px;
        background: #fff; color: #6b7280; cursor: pointer;
        transition: all 0.15s;
    }

    .ov-seg button b { display: block; font-weight: 600; color: var(--dark-color); }

    .ov-seg button:hover { border-color: var(--primary-color); }

    .ov-seg button.on {
        background: var(--primary-color); border-color: var(--primary-color);
        color: rgba(255,255,255,0.85);
    }

    .ov-seg button.on b { color: #fff; }


    /* graduated legend for the numeric controls */
    .ov-ramp { margin-top: 0.5rem; }

    .ov-ramp-bar {
        height: 9px; border-radius: 3px;
        border: 1px solid rgba(0,0,0,0.12);
    }

    .ov-ramp-ticks {
        display: flex; justify-content: space-between;
        font-size: 0.6rem; color: #6b7280; margin-top: 3px;
    }


    .ov-state-tag {
        font-size: 0.58rem; font-weight: 600; letter-spacing: 0.03em;
        color: var(--primary-color); background: rgba(0,95,110,0.09);
        border-radius: 3px; padding: 1px 5px; margin-left: 5px;
        vertical-align: middle;
    }


    /* --- richer popup: a table of controls ------------------------------- */
    .ov-pop-rows { margin-top: 0.5rem; border-top: 1px solid #e5e7eb; }

    .ov-pop-row {
        display: flex; justify-content: space-between; gap: 0.75rem;
        padding: 3px 0; font-size: 0.68rem; border-bottom: 1px solid #f1f3f5;
    }

    .ov-pop-row:last-child { border-bottom: none; }

    .ov-pop-row span { color: #6b7280; }

    .ov-pop-row b { color: var(--dark-color); font-weight: 600; text-align: right; }

    .ov-pop-none { color: #b0b7bf; font-weight: 500; }

    .ov-pop-lot {
        margin-top: 0.5rem; padding-top: 0.45rem;
        border-top: 1px solid #e5e7eb;
        font-size: 0.68rem; color: var(--dark-color);
    }

    .ov-pop-lot b { font-weight: 700; }

    .ov-pop-lot .ov-pop-wait { color: #9ca3af; font-weight: 400; }

    /* The street address is the line a person actually recognises, so it leads
       the lot block and the lot/plan sits under it as the reference. */
    .ov-pop-addr {
        font-size: 0.74rem; font-weight: 700; line-height: 1.3;
        color: var(--dark-color); margin-bottom: 0.1rem;
    }

    .ov-pop-units {
        font-weight: 500; font-size: 0.62rem; color: #7b8794;
        white-space: nowrap;
    }

    /* Named buildings within one strata scheme. */
    .ov-pop-bldg {
        font-size: 0.65rem; font-weight: 600; color: #4a90b8;
        line-height: 1.3; margin-bottom: 0.12rem;
    }

    /* The one ACTION in the popup, so it reads as a button rather than another
       line of data: full width under the facts, with a clear affordance. Uses
       the same accent as the rest of the panel rather than a new colour. */
    .ov-pop-sales {
        display: flex; align-items: center; justify-content: center; gap: 0.3rem;
        width: 100%; margin-top: 0.4rem; padding: 0.32rem 0.5rem;
        border: 1px solid var(--primary-color, #005F6E); border-radius: 3px;
        background: transparent; color: var(--primary-color, #005F6E);
        font-family: inherit; font-size: 0.66rem; font-weight: 600;
        line-height: 1.2; cursor: pointer;
        transition: background 0.12s ease, color 0.12s ease;
    }

    .ov-pop-sales:hover,
    .ov-pop-sales:focus-visible {
        background: var(--primary-color, #005F6E); color: #fff; outline: none;
    }

    .ov-pop-sales[disabled] { opacity: 0.55; cursor: progress; }

    .ov-pop-sales i { font-size: 0.62rem; }


    /* The mesh block is the join key into everything else we hold, so it is
       shown as a value to be read and copied, not as prose. */
    .ov-pop-mb {
        margin-top: 0.18rem;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 0.63rem; color: #6b7280; letter-spacing: 0.01em;
    }

    /* Panel-level version of the popup's note: says which rows are missing and
       why, so a state with less data reads as a known limit rather than a bug. */
    .ov-state-note {
        margin: 0 0 0.5rem; padding: 0.45rem 0.6rem;
        background: #f3f6f9; border-left: 3px solid #9fb3c4; border-radius: 3px;
        font-size: 0.66rem; line-height: 1.45; color: #55636f;
    }

    .ov-state-note b { color: var(--dark-color); }

    /* Full CC BY wording. The map credit is deliberately terse so it fits on
       one line; this is where the licence is actually stated. */
    .ov-sources {
        margin-top: 0.6rem; padding-top: 0.5rem;
        border-top: 1px solid #e5e7eb;
        font-size: 0.6rem; line-height: 1.5; color: #7b8794;
    }

    .ov-sources b { display: block; color: #55636f; margin-bottom: 0.12rem; }

    .ov-sources a { color: #4a90b8; text-decoration: underline; }

    /* A row whose data does not exist here: legible, obviously inactive. */
    .ov-row-off { opacity: 0.5; }

    .ov-row-off .ov-switch { pointer-events: none; }


    /* --- group titles ------------------------------------------------------
       The panel now carries four kinds of thing (basemap, national data,
       state planning, boundaries). Without banding it reads as one long list
       of unrelated switches; the rule above each title is what makes it scan
       as four groups rather than eleven rows. */
    .ov-group-title {
        margin: 0.85rem 0 0.45rem; padding-top: 0.65rem;
        border-top: 1px solid var(--map-panel-border);
        font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em;
        text-transform: uppercase; color: #9ca3af;
    }

    .ov-group-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }

    /* the title already draws the separator, so the row under it must not */
    .ov-group-title + .ov-row { border-top: none; padding-top: 0; margin-top: 0; }


    /* --- basemap chips: an exclusive choice that stays compact ----------- */
    .ov-choices { display: flex; flex-wrap: wrap; gap: 4px; }

    .ov-choice { position: relative; flex: 1 1 auto; }

    .ov-choice input {
        position: absolute; inset: 0; opacity: 0; margin: 0;
        width: 100%; height: 100%; cursor: pointer; z-index: 2;
    }

    .ov-choice span {
        display: block; text-align: center; padding: 4px 9px;
        border: 1px solid var(--map-panel-border); border-radius: 6px;
        background: #fff; font-size: 0.66rem; color: #6b7280;
        user-select: none; transition: all 0.15s;
    }

    .ov-choice:hover span { border-color: var(--primary-color); color: var(--primary-color); }

    .ov-choice input:checked + span {
        background: var(--primary-color); border-color: var(--primary-color);
        color: #fff; font-weight: 600;
    }

    .ov-choice input:focus-visible + span {
        outline: 2px solid var(--accent-color); outline-offset: 1px;
    }


    /* --- stacked radios (population underlay) ---------------------------- */
    .ov-radios { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 2px; }

    .ov-radio {
        position: relative; display: flex; align-items: flex-start;
        gap: 0.5rem; padding: 4px 6px; border-radius: 6px; cursor: pointer;
    }

    .ov-radio:hover { background: rgba(0, 95, 110, 0.05); }

    .ov-radio input {
        position: absolute; inset: 0; opacity: 0; margin: 0;
        width: 100%; height: 100%; cursor: pointer; z-index: 2;
    }

    .ov-radio-dot {
        flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px;
        border-radius: 50%; border: 2px solid #cbd5e1; background: #fff;
        transition: border 0.15s;
    }

    .ov-radio input:checked + .ov-radio-dot { border: 4px solid var(--primary-color); }

    .ov-radio input:focus-visible + .ov-radio-dot {
        outline: 2px solid var(--accent-color); outline-offset: 2px;
    }

    .ov-radio-text b {
        display: block; font-size: 0.72rem; font-weight: 600;
        color: var(--dark-color); line-height: 1.25;
    }

    .ov-radio-text span { display: block; font-size: 0.62rem; color: #9ca3af; line-height: 1.3; }


    /* Sign-in gated option: legible, obviously locked, not clickable. */
    .ov-radio.ov-lock { opacity: 0.55; }

    .ov-radio.ov-lock input { cursor: not-allowed; }

    .ov-lock-ic { display: none; font-size: 0.55rem; color: #9ca3af; margin-left: 4px; }

    .ov-radio.ov-lock .ov-lock-ic { display: inline; }


    /* Shown instead of the controls table where a state does not map them.
       "not published" is a different answer from "no control". */
    .ov-pop-note {
        margin-top: 0.5rem; padding: 0.4rem 0.55rem;
        background: #f3f4f6; border-radius: 4px;
        font-size: 0.64rem; color: #6b7280; line-height: 1.4;
    }

    .ov-pop-her {
        margin-top: 0.45rem; padding: 0.35rem 0.5rem;
        background: rgba(200, 60, 60, 0.08);
        border-left: 2px solid #c83c3c; border-radius: 3px;
        font-size: 0.65rem; color: #7f1d1d; line-height: 1.35;
    }


    .tt-panel-head {
        background: var(--dark-color);
        padding: 0.75rem 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }


    .tt-panel-head h4 {
        margin: 0;
        color: #fff;
        font-size: 0.9rem;
        font-weight: 600;
        letter-spacing: -0.01em;
    }


    .tt-panel-head h4::before {
        content: '';
        display: inline-block;
        width: 3px;
        height: 14px;
        background: var(--accent-color);
        margin-right: 8px;
        vertical-align: middle;
    }


    .tt-panel-close {
        background: none;
        border: none;
        color: rgba(255,255,255,0.6);
        cursor: pointer;
        font-size: 0.85rem;
        padding: 4px;
        transition: color 0.15s;
    }


    .tt-panel-close:hover {
        color: #fff;
    }


    .tt-panel-body {
        padding: 1rem;
    }


    /* Location display */
    .tt-loc {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid rgba(0, 95, 110, 0.15);
        margin-bottom: 0.75rem;
    }


    .tt-loc-icon {
        width: 32px;
        height: 32px;
        background: rgba(0, 95, 110, 0.08);
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary-color);
        flex-shrink: 0;
    }


    .tt-loc-name {
        font-weight: 600;
        color: var(--dark-color);
        font-size: 0.85rem;
        line-height: 1.3;
    }


    .tt-loc-meta {
        font-size: 0.68rem;
        color: #a1a1aa;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-top: 2px;
    }


    /* Geocoder row */
    .tt-geocoder-row {
        margin-bottom: 0.75rem;
    }


    .tt-geocoder-row .mapboxgl-ctrl-geocoder {
        min-width: 100%;
        width: 100%;
        max-width: 100%;
        box-shadow: none;
        border: 1px solid rgba(0, 95, 110, 0.2);
        border-radius: 6px;
        font-family: var(--f);
    }


    .tt-geocoder-row .mapboxgl-ctrl-geocoder input {
        font-size: 0.82rem;
    }


    /* Labels */
    .tt-label {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #a1a1aa;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }


    /* Mode buttons */
    .tt-modes {
        display: flex;
        gap: 0.4rem;
        margin-bottom: 0.75rem;
    }


    .tt-mode {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.3rem;
        padding: 0.6rem 0.4rem;
        background: rgba(0, 95, 110, 0.04);
        border: 2px solid transparent;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.12s ease;
    }


    .tt-mode:hover {
        background: rgba(0, 95, 110, 0.08);
    }


    .tt-mode.on {
        background: rgba(0, 95, 110, 0.06);
        border-color: var(--primary-color);
    }


    .tt-mode img {
        width: 24px;
        height: 24px;
        opacity: 0.5;
        transition: opacity 0.12s;
    }


    .tt-mode:hover img, .tt-mode.on img {
        opacity: 1;
    }


    .tt-mode span {
        font-size: 0.68rem;
        font-weight: 600;
        color: #52525b;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }


    .tt-mode.on span {
        color: var(--primary-color);
    }


    /* Duration select */
    .tt-time {
        margin-bottom: 0.75rem;
    }


    .tt-time select {
        width: 100%;
        padding: 0.6rem 0.75rem;
        border: 1px solid rgba(0, 95, 110, 0.2);
        border-radius: 6px;
        font-size: 0.82rem;
        font-family: inherit;
        color: var(--dark-color);
        background: #fff;
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
    }


    .tt-time select:focus {
        outline: none;
        border-color: var(--primary-color);
    }


    /* Generate button */
    .tt-btn {
        width: 100%;
        padding: 0.7rem;
        background: var(--primary-color);
        color: #fff;
        border: none;
        border-radius: 6px;
        font-size: 0.82rem;
        font-weight: 600;
        font-family: inherit;
        cursor: pointer;
        transition: background 0.12s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }


    .tt-btn:hover {
        background: #004d5a;
    }


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


    .tt-btn.done {
        background: var(--success-color);
    }


    /* Output area */
    .tt-output {
        margin-top: 0.5rem;
    }


    .tt-err {
        background: #fef2f2;
        border: 1px solid #fecaca;
        border-radius: 6px;
        padding: 0.6rem;
        color: #991b1b;
        font-size: 0.78rem;
    }


    /* Mobile responsive */
    @media (max-width: 576px) {
        .tt-panel {
            right: 0.5rem;
            left: 0.5rem;
            width: auto;
            top: 3.5rem;
        }
    }


    /* Disabled draw button state */
    .draw-btn.point-required { opacity: 0.5; }


    .draw-btn.disabled {
        opacity: 0.4;
        cursor: not-allowed;
        pointer-events: none;
    }


    /* ============================================
       FLOATING CONTROL PANELS
       ============================================ */
    .map-panel {
        position: absolute;
        background: var(--map-panel-bg);
        border: 1px solid var(--map-panel-border);
        border-radius: 12px;
        padding: 1rem;
        z-index: 10;
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        min-width: 280px;
        max-width: 320px;
    }


    .map-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--map-panel-border);
    }


    .map-panel-title {
        font-family: var(--f);
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--dark-color);
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }


    .map-panel-title i {
        color: var(--primary-color);
        font-size: 0.9rem;
    }


    .map-panel-close {
        background: transparent;
        border: none;
        color: rgba(0, 0, 0, 0.4);
        cursor: pointer;
        padding: 0.25rem;
        line-height: 1;
        transition: color 0.2s;
    }


    .map-panel-close:hover {
        color: var(--accent-color);
    }


    /* Info Panel */
    .info-panel {
        top: 1rem;
        right: 1rem;
    }


    /* School Info Panel */
    .school-panel {
        top: 1rem;
        right: 1rem;
        max-width: 360px;
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }


    .school-panel .map-panel-title {
        font-size: 0.85rem;
        line-height: 1.3;
    }


    .school-panel .school-info-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0.35rem 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        gap: 0.5rem;
    }


    .school-panel .school-info-row:last-child {
        border-bottom: none;
    }


    .school-panel .school-info-label {
        color: rgba(0, 0, 0, 0.5);
        font-size: 0.72rem;
        white-space: nowrap;
        flex-shrink: 0;
    }


    .school-panel .school-info-value {
        color: var(--primary-color);
        font-size: 0.78rem;
        font-weight: 500;
        text-align: right;
    }


    .school-panel .school-catchment-note {
        margin-top: 0.5rem;
        padding: 0.4rem 0.6rem;
        background: rgba(26, 188, 156, 0.08);
        border-radius: 6px;
        font-size: 0.72rem;
        color: #1ABC9C;
        text-align: center;
    }


    .school-panel .school-no-catchment {
        margin-top: 0.5rem;
        padding: 0.4rem 0.6rem;
        background: rgba(0, 0, 0, 0.03);
        border-radius: 6px;
        font-size: 0.72rem;
        color: rgba(0, 0, 0, 0.4);
        text-align: center;
    }


    .info-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.4rem 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }


    .info-row:last-child {
        border-bottom: none;
    }


    .info-label {
        color: rgba(0, 0, 0, 0.5);
        font-size: 0.75rem;
    }


    .info-value {
        color: var(--primary-color);
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.8rem;
        font-weight: 500;
    }


    /* Instructions Panel */
    .instructions-panel {
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%);
        min-width: 400px;
        text-align: center;
    }


    .instructions-panel .map-panel-header {
        justify-content: center;
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0.5rem;
    }


    .instruction-steps {
        display: flex;
        gap: 1.5rem;
        justify-content: center;
    }


    .instruction-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
    }


    .step-icon {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(0, 95, 110, 0.1);
        border: 1px solid rgba(0, 95, 110, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary-color);
        font-size: 0.85rem;
        margin-bottom: 0.25rem;
    }


    .step-text {
        color: rgba(0, 0, 0, 0.6);
        font-size: 0.7rem;
        max-width: 80px;
        line-height: 1.3;
    }


    /* Action Buttons */
    .map-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.6rem 1rem;
        border-radius: 6px;
        font-family: var(--f);
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        border: none;
    }


    .map-btn-primary {
        background: linear-gradient(135deg, var(--success-color) 0%, var(--success-color-dark) 100%);
        color: #fff;
        box-shadow: 0 4px 12px rgba(26, 188, 156, 0.3);
    }


    .map-btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(26, 188, 156, 0.4);
    }


    .map-btn-secondary {
        background: #fff;
        border: 1px solid var(--map-panel-border);
        color: var(--dark-color);
    }


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


    .map-btn-accent {
        background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-color-dark) 100%);
        color: #fff;
        box-shadow: 0 4px 12px rgba(237, 139, 0, 0.3);
    }


    .map-btn-accent:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(237, 139, 0, 0.4);
    }


    .panel-actions {
        display: flex;
        gap: 0.5rem;
        margin-top: 1rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--map-panel-border);
    }


    .panel-actions .map-btn {
        flex: 1;
    }


    /* Toast Notifications */
    .map-toast {
        position: fixed;
        bottom: 2rem;
        right: 2rem;
        background: #fff;
        border: 1px solid var(--map-panel-border);
        border-radius: 8px;
        padding: 0.75rem 1rem;
        color: var(--dark-color);
        font-size: 0.85rem;
        z-index: 1000;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        transform: translateY(100px);
        opacity: 0;
        transition: all 0.3s ease;
    }


    .map-toast.show {
        transform: translateY(0);
        opacity: 1;
    }


    .map-toast.success {
        border-color: var(--success-color);
    }


    .map-toast.success i {
        color: var(--success-color);
    }


    .map-toast.error {
        border-color: #dc3545;
        background: #fff5f5;
        color: #dc3545;
        font-weight: 600;
    }


    .map-toast.error i {
        color: #dc3545;
    }


    /* Mobile Responsive */
    @media (max-width: 768px) {
        html {
            overflow-x: hidden;
        }

        body {
            -webkit-overflow-scrolling: touch;
        }

        .map-container-wrapper {
            height: calc(100vh - 160px);
            min-height: 400px;
        }

        .map-panel {
            min-width: auto;
            max-width: calc(100vw - 2rem);
            width: calc(100vw - 2rem);
            left: 1rem;
            right: 1rem;
            transform: none;
        }

        .info-panel,
        .school-panel {
            top: auto;
            bottom: 1rem;
            right: 1rem;
            left: 1rem;
        }

        .instructions-panel {
            display: none;
        }

        .map-hero-content {
            flex-direction: column;
            align-items: flex-start;
        }

        .instruction-steps {
            flex-wrap: wrap;
        }
    }


    /* Mobile Navigation (from template) */
    @media (max-width: 991px) {
        .topNav-navbar {
            min-height: 70px;
        }
        #navbarNavDropdown { position: fixed; top: 85px; left: 0; right: 0; bottom: 0; width: 100%; height: calc(100vh - 85px); max-height: calc(100vh - 85px); background: white; z-index: 1040; display: none; overflow-y: auto; overflow-x: hidden; padding: 0; margin: 0; border: none; transform: none; transition: none; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        #navbarNavDropdown.show { display: block; }
        body.dark-mode #navbarNavDropdown { background: #1a1a1a; }
        #navbarNavDropdown .navbar-nav { flex-direction: column; width: 100%; margin: 0; padding: 0; }
        #navbarNavDropdown .nav-item { width: 100%; margin: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
        body.dark-mode #navbarNavDropdown .nav-item { border-bottom-color: rgba(255, 255, 255, 0.08); }
        #navbarNavDropdown .nav-link { padding: 18px 20px; font-size: 17px; color: var(--text-color, #333); display: flex; justify-content: space-between; align-items: center; }
    }


    /* Loading State */
    .map-loading {
        position: absolute;
        inset: 0;
        background: #f5f5f5;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 100;
        transition: opacity 0.5s ease;
    }


    .map-loading.hidden {
        opacity: 0;
        pointer-events: none;
    }


    .map-loading-spinner {
        width: 48px;
        height: 48px;
        border: 3px solid rgba(0, 95, 110, 0.2);
        border-top-color: var(--primary-color);
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }


    .map-loading-text {
        margin-top: 1rem;
        color: rgba(0, 0, 0, 0.5);
        font-size: 0.85rem;
    }

    

        /* Mode-driven visibility */
        .multi-only { display: none; }


        /* Multi Check info button over the map (multi mode only) */
        .mc-mapinfo-btn { display: none; }


        /* Dock mode labels ("Single Area" / "Multi Check") must NOT stay slid out over the page (disruptive).
           They flash briefly on a mode change (JS toggles #cfaDock.cfa-mode-flash) then collapse; hover still reveals. */
        #cfaDock .cfa-dock-node--mode.active .cfa-dock-label { opacity: 0; transform: translateY(-50%) translateX(10px); pointer-events: none; }

        #cfaDock .cfa-dock-node--mode:hover .cfa-dock-label,
        #cfaDock .cfa-dock-node--mode:focus-visible .cfa-dock-label { opacity: 1; transform: translateY(-50%) translateX(0); }

        #cfaDock.cfa-mode-flash .cfa-dock-node--mode.active .cfa-dock-label { opacity: 1; transform: translateY(-50%) translateX(0); }



        /* ===== Shape Joiner (draw2 test) ===== */
        .sj-panel {
            display: none;
            position: absolute;
            top: 70px;
            left: 70px;
            z-index: 25;
            width: min(360px, calc(100vw - 24px));
            max-height: min(72vh, calc(100vh - 90px));
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 8px 28px rgba(0,0,0,0.18);
            border: 1px solid rgba(0,95,110,0.18);
            overflow: hidden;
            font-family: inherit;
            flex-direction: column;
        }

        .sj-panel.open { display: flex; }

        .sj-head {
            display: flex; align-items: center; justify-content: space-between;
            padding: 0.7rem 0.9rem; background: #005F6E; color: #fff;
            flex-shrink: 0;
        }

        .sj-head h4 { margin: 0; font-size: 0.95rem; font-weight: 700; }

        .sj-head .sj-close {
            background: transparent; border: none; color: #fff; font-size: 1.2rem;
            cursor: pointer; line-height: 1; padding: 2px 6px;
        }

        .sj-body {
            padding: 0;
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
        }

        .sj-scroll {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 0.75rem 0.9rem 0.45rem;
            -webkit-overflow-scrolling: touch;
        }

        .sj-footer {
            flex-shrink: 0;
            padding: 0.55rem 0.9rem 0.85rem;
            border-top: 1px solid #e6ecee;
            background: #fff;
            box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
        }

        .sj-hint { font-size: 0.75rem; color: #666; margin: 0 0 0.6rem; line-height: 1.35; }

        .sj-fs-hint {
            display: flex; align-items: center; gap: 0.35rem; width: 100%;
            margin: 0 0 0.6rem; padding: 0.35rem 0.55rem;
            border: 1px solid #d8e2e4; border-radius: 6px; background: #f7fafb;
            color: #005F6E; font: inherit; font-size: 0.72rem; cursor: pointer;
            text-align: left;
        }

        .sj-fs-hint:hover { background: #eef5f6; border-color: #9ebcc1; }

        .sj-fs-hint:focus-visible { outline: 2px solid #005F6E; outline-offset: 1px; }

        .sj-types { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 0.55rem; }

        .sj-type {
            border: 1px solid #c9d5d8; background: #f4f7f8; color: #005F6E;
            border-radius: 999px; padding: 3px 10px; font-size: 0.72rem; font-weight: 700;
            cursor: pointer;
        }

        .sj-type.on { background: #005F6E; color: #fff; border-color: #005F6E; }

        .sj-search-wrap { position: relative; margin-bottom: 0.55rem; }

        .sj-search {
            width: 100%; border: 1px solid #c9d5d8; border-radius: 8px;
            padding: 0.45rem 0.65rem; font-size: 0.85rem; box-sizing: border-box;
        }

        .sj-search:focus { outline: none; border-color: #005F6E; box-shadow: 0 0 0 2px rgba(0,95,110,0.15); }

        .sj-suggest {
            display: none; position: absolute; left: 0; right: 0; top: 100%;
            background: #fff; border: 1px solid #c9d5d8; border-radius: 8px;
            max-height: 220px; overflow-y: auto; z-index: 30;
            box-shadow: 0 6px 16px rgba(0,0,0,0.12);
        }

        .sj-suggest.open { display: block; }

        .sj-suggest button {
            display: block; width: 100%; text-align: left; border: none; background: #fff;
            padding: 0.45rem 0.65rem; font-size: 0.8rem; cursor: pointer;
            border-bottom: 1px solid #f0f0f0;
        }

        .sj-suggest button:hover { background: #eef6f7; }

        .sj-suggest .sj-meta { color: #888; font-size: 0.7rem; margin-left: 6px; }

        .sj-chips { display: flex; flex-wrap: wrap; gap: 5px; min-height: 28px; margin-bottom: 0.55rem; }

        .sj-chip {
            display: inline-flex; align-items: center; gap: 5px;
            background: #e8f3f5; color: #005F6E; border-radius: 999px;
            padding: 3px 8px 3px 10px; font-size: 0.72rem; font-weight: 600;
        }

        .sj-chip button {
            border: none; background: transparent; color: #005F6E; cursor: pointer;
            font-size: 0.85rem; line-height: 1; padding: 0 2px;
        }

        .sj-actions { display: flex; gap: 6px; }

        .sj-actions button {
            flex: 1; border: none; border-radius: 8px; padding: 0.5rem 0.6rem;
            font-size: 0.8rem; font-weight: 700; cursor: pointer;
        }

        .sj-join { background: #005F6E; color: #fff; }

        .sj-join:disabled { opacity: 0.45; cursor: not-allowed; }

        .sj-clear { background: #f0f0f0; color: #444; }

        .sj-status { font-size: 0.72rem; color: #666; margin-top: 0.4rem; min-height: 1.1em; }

        .sj-adj { margin-top: 0.65rem; border-top: 1px solid #ead9df; padding-top: 0.55rem; }

        .sj-adj-title { font-size: 0.72rem; font-weight: 700; color: #6e0f31; margin-bottom: 0.35rem; }

        .sj-adj-list { display: flex; flex-wrap: wrap; gap: 0.35rem; max-height: none; }

        .sj-adj-list button { border: 1px solid #c9a0ad; background: #fff; color: #4a0a22; border-radius: 999px; padding: 0.2rem 0.55rem; font-size: 0.72rem; cursor: pointer; }

        .sj-adj-list button:hover, .sj-adj-list button:focus { background: #6e0f31; color: #fff; outline: none; }

        .sj-adj-state { font-size: 0.7rem; color: #777; min-height: 1em; }

        .sj-adj-state.err { color: #b00020; }

        .draft-banner { display: none; position: absolute; left: 50%; transform: translateX(-50%); bottom: 5.5rem; z-index: 12; background: #005F6E; color: #fff; padding: 0.55rem 0.9rem; border-radius: 10px; font-size: 0.85rem; box-shadow: 0 4px 14px rgba(0,0,0,0.25); max-width: min(92vw, 420px); text-align: center; }

        .draft-banner.on { display: block; }

        .draft-banner .db-actions { margin-top: 0.35rem; display: flex; gap: 0.4rem; justify-content: center; flex-wrap: wrap; }

        .draft-banner button { border: 0; border-radius: 8px; padding: 0.3rem 0.7rem; font-weight: 700; cursor: pointer; }

        .draft-banner .db-pick { background: #ED8B00; color: #fff; }

        .draft-banner .db-discard { background: #fff; color: #005F6E; }

        .sj-badge {
            display: none; position: absolute; top: -4px; right: -4px;
            background: #ED8B00; color: #fff; font-size: 0.65rem; font-weight: 800;
            border-radius: 999px; min-width: 16px; height: 16px; line-height: 16px; text-align: center;
            padding: 0 4px;
        }

        #btnShapeJoin { position: relative; background: #6e0f31; border-color: #6e0f31; color: #fff; }

        #btnShapeJoin.active { box-shadow: 0 0 0 2px rgba(110,15,49,0.35); }


        /* Muted styling for raw-count metric rows (scale with catchment size — not directly comparable) */
        .mc-metric-label .mc-count-tag { font-size: 0.66rem; color: #9aa7ac; font-weight: 600; margin-left: 5px; text-transform: uppercase; letter-spacing: .04em; }

        .mc-cell-text .mc-cell-val { font-size: 0.8rem; font-weight: 600; }


        /* Major Infrastructure Projects swiper */
        .mc-infra-seg { margin-top: 18px; }

        .mc-infra-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }

        .mc-infra-chip { background: #eef4f5; color: #18343a; border: 1px solid rgba(0,95,110,0.15); border-radius: 20px; padding: 5px 12px; font-size: 0.78rem; font-weight: 600; }

        .mc-infra-scope { font-size: 0.72rem; font-weight: 500; color: #7a8a8f; margin-left: 6px; }

        .mc-infra-swiper { padding: 4px 0 32px; }

        .mc-infra-swiper .swiper-slide { width: 250px; height: auto; }

        .mc-infra-card { background: #fff; border: 1px solid rgba(0,95,110,0.14); border-radius: 12px; height: 100%; display: flex; flex-direction: column; box-shadow: 0 4px 14px rgba(0,0,0,0.05); transition: transform .15s, box-shadow .15s; cursor: pointer; overflow: hidden; }

        .mc-infra-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,0.12); }

        .mc-infra-card:focus-visible { outline: 2px solid #1ABC9C; outline-offset: 2px; }

        .mc-infra-img { position: relative; height: 128px; background: linear-gradient(135deg, #dfe7ea, #c2d0d4); overflow: hidden; }

        .mc-infra-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

        .mc-infra-body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; }

        .mc-infra-badge { position: absolute; top: 8px; left: 8px; font-size: 0.58rem; font-weight: 700; padding: 3px 9px; border-radius: 10px; color: #fff; text-transform: uppercase; letter-spacing: .4px; background: #64748b; z-index: 1; }

        .mc-infra-badge.stage-construction { background: #059669; }
 .mc-infra-badge.stage-approved { background: #2563eb; }

        .mc-infra-badge.stage-proposed { background: #7c3aed; }
 .mc-infra-badge.stage-planning { background: #d97706; }

        .mc-infra-badge.stage-assessment { background: #ea580c; }
 .mc-infra-badge.stage-completed { background: #64748b; }

        .mc-infra-val { position: absolute; bottom: 8px; right: 8px; font-size: 0.78rem; font-weight: 800; color: #fff; background: rgba(0,0,0,0.6); padding: 2px 9px; border-radius: 6px; white-space: nowrap; backdrop-filter: blur(3px); z-index: 1; }

        .mc-infra-name { font-size: 0.85rem; font-weight: 700; color: #18343a; line-height: 1.3; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

        .mc-infra-desc { font-size: 0.72rem; color: #5a6b70; line-height: 1.4; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }

        .mc-infra-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.66rem; color: #7a8a8f; }

        .mc-infra-meta span { background: #f4f7f8; border-radius: 5px; padding: 2px 6px; white-space: nowrap; }

        /* Infra detail popup */
        .mc-infra-modal-overlay { position: fixed; inset: 0; background: rgba(10,20,28,0.62); z-index: 100000; display: flex; align-items: flex-start; justify-content: center; padding: 40px 18px; overflow: auto; opacity: 0; transition: opacity .2s; }

        .mc-infra-modal-overlay.active { opacity: 1; }

        .mc-infra-modal { background: #fff; border-radius: 14px; max-width: 560px; width: 100%; margin: auto; box-shadow: 0 30px 80px rgba(0,0,0,0.45); transform: scale(.96); transition: transform .2s; overflow: hidden; }

        .mc-infra-modal-overlay.active .mc-infra-modal { transform: scale(1); }

        .mc-infra-modal-img { position: relative; height: 210px; background: linear-gradient(135deg, #dfe7ea, #c2d0d4); overflow: hidden; }

        .mc-infra-modal-img img { width: 100%; height: 100%; object-fit: cover; }

        .mc-infra-modal-img .mc-infra-val { bottom: 12px; right: 12px; font-size: 0.9rem; padding: 3px 11px; }

        .mc-infra-modal-img .mc-infra-badge { top: 12px; left: 12px; }

        .mc-infra-modal-close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(0,0,0,0.55); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; z-index: 2; }

        .mc-infra-modal-close:hover { background: rgba(0,0,0,0.78); }

        .mc-infra-modal-body { padding: 18px 22px 22px; }

        .mc-infra-modal-title { font-size: 1.2rem; font-weight: 800; color: #18343a; margin-bottom: 10px; line-height: 1.25; }

        .mc-infra-modal-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }

        .mc-infra-mtag { font-size: 0.7rem; background: rgba(0,95,110,0.08); color: #005F6E; border-radius: 20px; padding: 4px 11px; font-weight: 600; }

        .mc-infra-modal-desc { font-size: 0.85rem; line-height: 1.6; color: #42525a; margin-bottom: 18px; }

        .mc-infra-modal-links { display: flex; flex-wrap: wrap; gap: 8px; }

        .mc-infra-mlink { font-size: 0.75rem; font-weight: 600; color: #005F6E; border: 1px solid rgba(0,95,110,0.3); border-radius: 8px; padding: 7px 12px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: background .15s, color .15s; }

        .mc-infra-mlink:hover { background: #005F6E; color: #fff; }

        /* Run-confirm / generating modal */
        .mc-run-modal-overlay { position: fixed; inset: 0; background: rgba(10,20,28,0.62); z-index: 100001; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity .2s; }

        .mc-run-modal-overlay.active { opacity: 1; }

        .mc-run-modal { background: #fff; border-radius: 16px; max-width: 480px; width: 100%; box-shadow: 0 30px 80px rgba(0,0,0,0.45); transform: scale(.96); transition: transform .2s; overflow: hidden; }

        .mc-run-modal-overlay.active .mc-run-modal { transform: scale(1); }

        .mc-rm-pane { padding: 26px 26px 22px; text-align: center; }

        .mc-rm-icon { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, #005F6E, #1ABC9C); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; margin: 0 auto 14px; }

        .mc-rm-title { font-size: 1.2rem; font-weight: 800; color: #18343a; margin-bottom: 6px; }

        .mc-rm-sub { font-size: 0.85rem; color: #5a6b70; line-height: 1.5; margin-bottom: 16px; }

        .mc-rm-list { list-style: none; margin: 0 0 14px; padding: 0; text-align: left; max-height: 190px; overflow: auto; }

        .mc-rm-list li { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border: 1px solid rgba(0,95,110,0.12); border-radius: 8px; margin-bottom: 6px; font-size: 0.85rem; color: #18343a; }

        .mc-rm-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }

        .mc-rm-name { font-weight: 600; }

        .mc-rm-pop { margin-left: auto; font-weight: 500; color: #7a8a8f; font-size: 0.78rem; white-space: nowrap; }

        .mc-rm-skip { text-align: left; background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.3); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; }

        .mc-rm-skip-h { font-size: 0.8rem; font-weight: 700; color: #b45309; margin-bottom: 5px; }

        .mc-rm-skip ul { margin: 0; padding-left: 18px; font-size: 0.75rem; color: #7a6a4a; line-height: 1.5; }

        .mc-rm-cost { font-size: 0.92rem; color: #18343a; margin-bottom: 18px; display: flex; align-items: center; justify-content: center; gap: 8px; }

        .mc-rm-cost i { color: #ED8B00; }

        .mc-rm-actions { display: flex; gap: 10px; }

        .mc-rm-btn { flex: 1; padding: 12px; border-radius: 10px; font-size: 0.92rem; font-weight: 700; cursor: pointer; border: 1px solid; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }

        .mc-rm-cancel { background: #fff; color: #5a6b70; border-color: rgba(0,0,0,0.18); }

        .mc-rm-cancel:hover { background: #f4f6f7; }

        .mc-rm-go { background: linear-gradient(135deg, #005F6E, #1ABC9C); color: #fff; border-color: transparent; }

        .mc-rm-go:hover { filter: brightness(1.07); }

        .mc-rm-loading { padding: 44px 26px; }

        .mc-rm-spinner { width: 48px; height: 48px; border-radius: 50%; border: 4px solid rgba(0,95,110,0.15); border-top-color: #005F6E; margin: 0 auto 18px; animation: mcRmSpin .8s linear infinite; }

        .mc-rm-hint { font-size: 0.75rem; color: #9aa7ac; margin-top: 10px; line-height: 1.5; }


        /* Overall name row */
        .mc-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 4px 0 14px; }

        .mc-name-label { font-size: 0.85rem; font-weight: 600; color: #18343a; display: inline-flex; align-items: center; gap: 6px; }

        .mc-name-label i { color: var(--primary-color, #005F6E); }

        .mc-name-input { flex: 1 1 280px; min-width: 200px; padding: 8px 12px; border: 1px solid rgba(0,95,110,0.25);
            border-radius: 8px; font-size: 0.9rem; color: #18343a; background: #fff; }

        .mc-name-input:focus { outline: none; border-color: var(--primary-color, #005F6E); box-shadow: 0 0 0 3px rgba(0,95,110,0.12); }

        .mc-name-hint { flex: 1 1 100%; font-size: 0.75rem; color: #6b7c83; }


        /* Per-shape optional name input on each level row */
        .mc-level-cname { width: 150px; max-width: 38vw; padding: 5px 9px; border: 1px solid rgba(0,95,110,0.2);
            border-radius: 6px; font-size: 0.8rem; color: #18343a; background: #fff; }

        .mc-level-cname:focus { outline: none; border-color: var(--primary-color, #005F6E); box-shadow: 0 0 0 2px rgba(0,95,110,0.12); }


        /* Clear button */
        .mc-clear-btn { appearance: none; display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px;
            background: #fff; color: #b23b3b; border: 1px solid rgba(178,59,59,0.4); border-radius: 8px;
            font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; }

        .mc-clear-btn:hover { background: #fbeaea; border-color: #b23b3b; }


        /* Tab bar */
        .mc-tabs-wrap { background: #fff; border-bottom: 1px solid rgba(0,95,110,0.12); position: relative; z-index: 5; }

        .mc-tabs { display: flex; gap: 4px; padding: 0; }

        .mc-tab { appearance: none; background: transparent; border: none; border-bottom: 3px solid transparent;
            padding: 14px 22px; font-size: 0.95rem; font-weight: 600; color: #6b7c83; cursor: pointer; display: flex; align-items: center; gap: 8px; }

        .mc-tab:hover { color: var(--primary-color, #005F6E); }

        .mc-tab.active { color: var(--primary-color, #005F6E); border-bottom-color: var(--primary-color, #005F6E); }

        .mc-tab .mc-tab-badge { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
            background: var(--accent-color, #ED8B00); color: #fff; padding: 2px 6px; border-radius: 10px; }


        /* Multi section + panel */
        .mc-section { padding: 1.5rem 0 2.5rem; }

        .mc-panel { background: #fff; border: 1px solid rgba(0,95,110,0.12); border-radius: 14px; padding: 1.25rem 1.4rem; box-shadow: 0 4px 18px rgba(0,0,0,0.04); }

        .mc-panel-title { font-weight: 700; font-size: 1.05rem; color: var(--dark-color, #18343a); display: flex; align-items: center; gap: 9px; margin-bottom: .25rem; }

        .mc-panel-sub { font-size: .82rem; color: #7a8a90; margin-bottom: 1rem; }

        .mc-center-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 1rem; }

        .mc-geocoder { flex: 1 1 280px; min-width: 240px; }

        .mc-geocoder .mapboxgl-ctrl-geocoder { width: 100%; max-width: none; box-shadow: none; border: 1px solid #d8e0e2; }

        .mc-center-chip { font-size: .82rem; color: #2c3e44; background: #eef5f6; border-radius: 8px; padding: 7px 12px; display: inline-flex; align-items: center; gap: 7px; }

        .mc-center-chip i { color: var(--primary-color, #005F6E); }

        .mc-coord-input { display: flex; gap: 6px; align-items: center; }

        .mc-coord-input input { padding: 7px 10px; border: 1px solid #d8e0e2; border-radius: 8px; font-size: .82rem; width: 180px; }

        .mc-add-btn:disabled { opacity: .45; cursor: not-allowed; }


        /* Level rows */
        .mc-levels { display: flex; flex-direction: column; gap: 8px; margin-bottom: 1rem; }

        .mc-level { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #f8fafb; border: 1px solid #e7eef0; border-radius: 10px; padding: 9px 12px; }

        .mc-level-color { width: 14px; height: 14px; border-radius: 4px; flex: 0 0 auto; }

        .mc-level-name { font-weight: 600; font-size: .88rem; color: #2c3e44; min-width: 110px; }

        .mc-level-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

        .mc-level-controls input[type="number"] { width: 64px; padding: 4px 7px; border: 1px solid #cfd9db; border-radius: 6px; font-size: .82rem; }

        .mc-level-controls select { padding: 4px 7px; border: 1px solid #cfd9db; border-radius: 6px; font-size: .82rem; }

        .mc-level-unit { font-size: .8rem; color: #7a8a90; }

        .mc-level-remove { margin-left: auto; appearance: none; background: transparent; border: none; color: #b94b5e; cursor: pointer; font-size: .9rem; padding: 4px 6px; }

        .mc-level-status { margin-left: 8px; }

        .mc-badge { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }

        .mc-badge.pending    { background: #eceff1; color: #607078; }

        .mc-badge.checking   { background: #fff3e0; color: #c57300; }

        .mc-badge.generating { background: #fff3e0; color: #c57300; }

        .mc-badge.analysing  { background: #e3f2fd; color: #1565c0; }

        .mc-badge.done       { background: #e8f5e9; color: #2e7d32; }

        .mc-badge.error      { background: #fdecea; color: #c0392b; }


        .mc-add-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1rem; }

        .mc-add-btn { appearance: none; background: #fff; border: 1px dashed #b9c8cc; color: var(--primary-color, #005F6E); border-radius: 8px; padding: 7px 12px; font-size: .82rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }

        .mc-add-btn:hover { border-color: var(--primary-color, #005F6E); background: #f3f9fa; }

        .mc-add-btn.mc-active { background: var(--primary-color, #005F6E); color: #fff; border-style: solid; border-color: var(--primary-color, #005F6E); }


        .mc-run-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; border-top: 1px solid #eef2f3; padding-top: 1rem; }

        .mc-run-btn { appearance: none; background: var(--primary-color, #005F6E); color: #fff; border: none; border-radius: 10px; padding: 12px 26px; font-size: .96rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; }

        .mc-run-btn:hover { filter: brightness(1.05); }

        .mc-run-btn:disabled { opacity: .55; cursor: not-allowed; }

        .mc-run-note { font-size: .78rem; color: #8a99a0; }

        .mc-gate-note { font-size: .85rem; color: #c0392b; background: #fdecea; border-radius: 8px; padding: 9px 13px; }


        /* Dashboard */
        .mc-dash { margin-top: 1.5rem; }

        .mc-table-wrap { overflow-x: auto; background: #fff; border: 1px solid rgba(0,95,110,0.12); border-radius: 14px; }

        .mc-table { width: 100%; border-collapse: collapse; font-size: .85rem; min-width: 720px; }

        .mc-table th, .mc-table td { padding: 11px 14px; text-align: right; border-bottom: 1px solid #eef2f3; white-space: nowrap; }

        .mc-table th:first-child, .mc-table td:first-child { text-align: left; }

        .mc-table thead th { background: #f5f9fa; font-size: .68rem; text-transform: uppercase; letter-spacing: .5px; color: #5a6b71; font-weight: 700; }

        .mc-table tbody tr:last-child td { border-bottom: none; }

        .mc-table .mc-lvl-dot { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 7px; vertical-align: middle; }

        .mc-table a.mc-report-link { color: var(--primary-color, #005F6E); font-weight: 600; text-decoration: none; }

        .mc-table a.mc-report-link:hover { text-decoration: underline; }

        .mc-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }

        .mc-chart-card { background: #fff; border: 1px solid rgba(0,95,110,0.12); border-radius: 14px; padding: 1rem 1.1rem; }

        .mc-chart-title { font-weight: 600; font-size: .9rem; color: var(--dark-color, #18343a); margin-bottom: .5rem; display:flex; align-items:center; gap:7px; }

        @media (max-width: 900px) { .mc-charts { grid-template-columns: 1fr; } }


        /* Insight chips */
        .mc-insights { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }

        .mc-insight { display: flex; align-items: flex-start; gap: 8px; background: #eef5f6; border-left: 3px solid var(--primary-color, #005F6E); border-radius: 8px; padding: 9px 13px; font-size: .82rem; color: #2c3e44; flex: 1 1 280px; max-width: 360px; }

        .mc-insight i { color: var(--primary-color, #005F6E); margin-top: 2px; }


        /* Transposed comparison table */
        .mc-ttable-wrap { max-height: 78vh; overflow: auto; background: #fff; border: 1px solid rgba(0,95,110,0.12); border-radius: 14px; }

        .mc-ttable { width: 100%; border-collapse: collapse; font-size: .84rem; }

        .mc-ttable th, .mc-ttable td { padding: 9px 13px; text-align: right; border-bottom: 1px solid #eef2f3; white-space: nowrap; }

        .mc-ttable thead th { position: sticky; top: 0; background: var(--primary-color, #005F6E); color: #fff; z-index: 2; font-size: .74rem; text-transform: uppercase; letter-spacing: .4px; }

        .mc-ttable thead th.mc-corner { left: 0; z-index: 3; text-align: left; }

        .mc-ttable td.mc-metric-label { position: sticky; left: 0; background: #fff; text-align: left; z-index: 1; font-weight: 500; color: #2c3e44; }

        .mc-ttable .mc-lvl-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }

        .mc-col-name { display: block; }

        .mc-col-status { display: block; font-size: .6rem; font-weight: 600; text-transform: uppercase; opacity: .85; margin-top: 3px; }

        .mc-col-link { display: inline-block; margin-top: 4px; font-size: .68rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: #cdeef0; text-decoration: underline; }

        .mc-col-link:hover { color: #fff; }

        .mc-col-link i { font-size: .62rem; }

        .mc-grp-row td { background: #f2f7f8; font-weight: 700; color: var(--primary-color, #005F6E); text-transform: uppercase; font-size: .7rem; letter-spacing: .5px; cursor: pointer; text-align: left; position: sticky; left: 0; }

        .mc-grp-row .mc-grp-caret { display: inline-block; width: 12px; transition: transform .15s; }

        .mc-grp-row.collapsed .mc-grp-caret { transform: rotate(-90deg); }

        .mc-metric-label .mc-star { color: var(--accent-color, #ED8B00); margin-left: 5px; font-size: .68rem; }

        .mc-cell-val { font-variant-numeric: tabular-nums; }

        .mc-cell.best { background: rgba(26,188,156,0.09); }

        .mc-cell.best .mc-cell-val { font-weight: 800; color: var(--primary-color, #005F6E); }

        .mc-pci { display: block; height: 4px; width: 46px; margin: 3px 0 0 auto; border-radius: 2px; background: #e7eef0; position: relative; }

        .mc-pci > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--primary-color, #005F6E); }

        .mc-charts-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 16px; }

        @media (max-width: 1100px) { .mc-charts-3 { grid-template-columns: 1fr; } }

        .mc-dash-foot { font-size: .72rem; color: #8a99a0; margin-top: 10px; line-height: 1.5; }


        /* Dashboard toolbar: report links + CSV */
        .mc-dash-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }

        .mc-reportlinks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 auto; }

        .mc-rl-label { font-size: .8rem; font-weight: 600; color: #5a6b71; display: inline-flex; align-items: center; gap: 6px; }

        .mc-rl-btn { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1.5px solid #cfd9db; border-radius: 20px; padding: 6px 13px; font-size: .8rem; font-weight: 600; color: #2c3e44; text-decoration: none; }

        .mc-rl-btn:hover { background: #f3f9fa; color: var(--primary-color, #005F6E); }

        .mc-rl-btn i { font-size: .66rem; color: var(--primary-color, #005F6E); }

        .mc-csv-btn { appearance: none; background: var(--primary-color, #005F6E); color: #fff; border: none; border-radius: 8px; padding: 8px 15px; font-size: .82rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }

        .mc-csv-btn:hover { filter: brightness(1.06); }


        /* Sector segments */
        .mc-seg { background: #fff; border: 1px solid rgba(0,95,110,0.12); border-radius: 14px; padding: 1.1rem 1.2rem 1.3rem; margin-bottom: 16px; box-shadow: 0 3px 14px rgba(0,0,0,.03); }

        .mc-seg-module { border-color: rgba(237,139,0,0.35); }

        .mc-seg-head { font-weight: 700; font-size: 1.02rem; color: var(--dark-color, #18343a); display: flex; align-items: center; gap: 9px; margin-bottom: .9rem; }

        .mc-seg-head i { color: var(--primary-color, #005F6E); }

        .mc-seg-module .mc-seg-head i { color: var(--accent-color, #ED8B00); }

        .mc-seg-modbadge { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; background: var(--accent-color, #ED8B00); color: #fff; padding: 2px 8px; border-radius: 10px; margin-left: 4px; }

        .mc-seg-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }

        .mc-seg-table { overflow-x: auto; border: 1px solid #eef2f3; border-radius: 10px; }

        .mc-seg-ttable { font-size: .82rem; }

        .mc-seg-ttable thead th { position: static; top: auto; }

        .mc-seg-charts { min-width: 0; }

        .mc-chart-card { background: #fcfdfd; border: 1px solid #eef2f3; border-radius: 10px; padding: .6rem .7rem .3rem; }

        .mc-chart-swiper { padding-bottom: 28px; }

        .mc-chart-swiper .swiper-slide { height: auto; }

        .mc-chart-swiper .swiper-pagination { bottom: 2px; }

        .mc-chart-swiper .swiper-pagination-bullet-active { background: var(--primary-color, #005F6E); }

        .mc-chart-swiper .swiper-button-prev, .mc-chart-swiper .swiper-button-next { color: var(--primary-color, #005F6E); top: 46%; transform: scale(.5); }

        .mc-chart-slot { min-height: 300px; }

        /* Local Schools & Transport detail card */
        .mc-local-sub { font-weight: 500; font-size: .74rem; color: #6b7c80; margin-left: 8px; }

        .mc-local-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

        @media (min-width: 900px) { .mc-local-grid { grid-template-columns: 1fr 1fr; } }

        .mc-local-panel { min-width: 0; border: 1px solid #eef2f3; border-radius: 10px; padding: .7rem .8rem; background: #fcfdfd; }

        .mc-local-ptitle { font-weight: 700; font-size: .82rem; color: var(--dark-color, #18343a); display: flex; align-items: center; gap: 7px; margin-bottom: .55rem; }

        .mc-local-ptitle i { color: var(--primary-color, #005F6E); }

        .mc-loc-scroll { max-height: 320px; overflow-y: auto; }

        .mc-loc-table { width: 100%; border-collapse: collapse; font-size: .8rem; }

        .mc-loc-table thead th { position: sticky; top: 0; background: #f4f8f9; text-align: left; font-weight: 600; color: #4a5d62; padding: 6px 8px; border-bottom: 1px solid #e3eaec; white-space: nowrap; z-index: 1; }

        .mc-loc-table td { padding: 6px 8px; border-bottom: 1px solid #f0f4f5; vertical-align: top; }

        .mc-loc-table tbody tr:last-child td { border-bottom: 0; }

        .mc-loc-name { font-weight: 600; color: #233; }

        .mc-loc-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

        .mc-loc-routes { color: #6b7c80; font-size: .74rem; }

        .mc-mode-badge { display: inline-block; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #fff; padding: 2px 7px; border-radius: 9px; white-space: nowrap; }

        .mc-loc-empty { font-size: .8rem; color: #6b7c80; padding: 10px 4px; }

        /* ── In-page section dock — styled by the shared publicNav.css #cfaDock (identical to salesTrends).
           draw2-specific tuning only: a divider above the section nodes, and the desktop right gutter the
           dock occupies in place of the mode tabs. The dock also carries the Single/Multi mode toggles
           (markup built in JS at the end of <body>, exactly like publicNav.js does for salesTrends). ── */
        #cfaDock .cfa-dock-sep { display: block; width: 30px; height: 1px; margin: 8px auto 10px; background: rgba(26,188,156,0.30); }

        /* divider between the Single/Multi mode pills and the section pills in the mobile bar */
        #mobileBottomNav .mc-pill-sep { flex: 0 0 auto; align-self: center; width: 1px; height: 20px; margin: 0 3px; background: rgba(0,0,0,0.14); }

        /* The dock replaces the mode tabs on desktop. It is position:fixed so it FLOATS over the content —
           no main padding-right (that narrowed the full-bleed result sections and showed a grey/white seam). */
        @media (min-width: 1200px) { .mc-tabs-wrap { display: none; } }
}
}
@layer pg {
@scope (main) {
.as-surr-launch-copy .as-surr-pro,
.eco-hero-badge,
.geo-pill,
.geo-pill .pill-count,
.lock-chip,
.shp-uid-pill,
.sj-adj-list button,
.sj-badge,
.sj-chip,
.sj-type { border-radius: var(--r-1); }
}
}
@layer pg {
html[data-theme="dark"] main .map-section { background: var(--alt); }
html[data-theme="dark"] main .map-container-wrapper { background: var(--alt); }
html[data-theme="dark"] main .data-section { background: var(--surface); }
html[data-theme="dark"] main .data-section:nth-child(even) { background: var(--alt); }
html[data-theme="dark"] main .section-title i { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .stat-card { background: var(--surface); }
html[data-theme="dark"] main .stat-card-icon { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .lu-legend-item { color: var(--fg-2); }
html[data-theme="dark"] main .lu-legend-pct { color: var(--fg-2); }
html[data-theme="dark"] main .dr-wrap { background: var(--surface); }
html[data-theme="dark"] main .dr-origin-label { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .dr-tick-dist { color: var(--fg-2); }
html[data-theme="dark"] main .dr-tick:hover .dr-tick-dist { color: #bababa; }
html[data-theme="dark"] main .dr-tick.active .dr-tick-dist { color: #bababa; }
html[data-theme="dark"] main .dr-insight { color: var(--fg-2); }
html[data-theme="dark"] main .data-table-wrapper { background: var(--surface); }
html[data-theme="dark"] main .data-table th { background: var(--alt); }
html[data-theme="dark"] main .location-summary-title { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .location-summary-text { color: #ababab; }
html[data-theme="dark"] main .location-summary-text strong { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .geo-card { background: var(--surface); }
html[data-theme="dark"] main .geo-card-link { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .geo-pill { color: #bababa; }
html[data-theme="dark"] main .geo-pill:hover { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .mapboxgl-ctrl-group { background: var(--surface); }
html[data-theme="dark"] main .mapboxgl-ctrl-attrib a { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .draw-btn { background: var(--surface); }
html[data-theme="dark"] main .draw-btn:hover { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .info-card { background: var(--surface); }
html[data-theme="dark"] main .info-card-icon.icon-point { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .info-card-icon.icon-report { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .info-card-desc { color: #bfbfc3; }
html[data-theme="dark"] main .info-flow-text { color: #b1b1b5; }
html[data-theme="dark"] main .info-tip { color: #a9a9ac; }
html[data-theme="dark"] main .map-style-select { background: var(--surface); }
html[data-theme="dark"] main .fullscreen-toggle { background: var(--surface); }
html[data-theme="dark"] main .search-toggle-btn { background: var(--surface); }
html[data-theme="dark"] main .lock-chip { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .stat-card-change.stat-card-change--qual { color: var(--fg-2); }
html[data-theme="dark"] main .stat-card-change--qual .qual-note { color: var(--fg-2); }
html[data-theme="dark"] main .signin-ask-title { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .signin-ask-body { color: #b5bcbf; }
html[data-theme="dark"] main .btn-signin-secondary { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .btn-signin-secondary:hover { color: #8caeb3; }
html[data-theme="dark"] main .pop-limit-banner .pop-limit-text { color: #cea993; }
html[data-theme="dark"] main .pop-limit-banner .pop-limit-text strong { color: #c2a493; }
html[data-theme="dark"] main .radius-panel-title i { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .radius-panel-close { color: #bababa; }
html[data-theme="dark"] main .radius-btn { background: var(--surface); color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .radius-value { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .ref-point-prompt { background: var(--surface); }
html[data-theme="dark"] main .ov-toggle-btn { background: var(--surface); }
html[data-theme="dark"] main .ov-toggle-btn:hover { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .ov-row-title span { color: #bcc0c6; }
html[data-theme="dark"] main .ov-opacity { color: #bcc0c6; }
html[data-theme="dark"] main .ov-sw { background: var(--surface); }
html[data-theme="dark"] main .ov-mini { background: var(--surface); color: #bcc0c6; }
html[data-theme="dark"] main .ov-mini:hover { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .ov-note b { color: #bcc0c6; }
html[data-theme="dark"] main .ov-warn { color: #cea993; }
html[data-theme="dark"] main .ov-pop-meta { color: #bcc0c6; }
html[data-theme="dark"] main .ov-seg button { background: var(--surface); color: #bcc0c6; }
html[data-theme="dark"] main .ov-ramp-ticks { color: #bcc0c6; }
html[data-theme="dark"] main .ov-state-tag { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .ov-pop-rows { border-top-color: var(--hair); }
html[data-theme="dark"] main .ov-pop-row span { color: #bcc0c6; }
html[data-theme="dark"] main .ov-pop-lot { border-top-color: var(--hair); }
html[data-theme="dark"] main .ov-pop-sales { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .ov-pop-mb { color: #bcc0c6; }
html[data-theme="dark"] main .ov-state-note { color: #b3b9be; }
html[data-theme="dark"] main .ov-sources { border-top-color: var(--hair); }
html[data-theme="dark"] main .ov-sources b { color: #b3b9be; }
html[data-theme="dark"] main .ov-choice span { background: var(--surface); color: #bcc0c6; }
html[data-theme="dark"] main .ov-choice:hover span { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .ov-radio-dot { border-color: var(--hair); background: var(--surface); }
html[data-theme="dark"] main .ov-pop-note { background: var(--alt); color: #bcc0c6; }
html[data-theme="dark"] main .ov-pop-her { color: #c59999; }
html[data-theme="dark"] main .tt-loc-icon { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .tt-mode span { color: #b1b1b5; }
html[data-theme="dark"] main .tt-mode.on span { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .tt-time select { background: var(--surface); }
html[data-theme="dark"] main .tt-err { color: #d19898; }
html[data-theme="dark"] main .map-panel-title i { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .school-panel .school-info-value { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .info-value { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .step-icon { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .map-btn-secondary { background: var(--surface); }
html[data-theme="dark"] main .map-btn-secondary:hover { background: var(--alt); color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .map-toast { background: var(--surface); }
html[data-theme="dark"] main .map-toast.error { color: #efa4ab; }
html[data-theme="dark"] main .map-toast.error i { color: #efa4ab; }
html[data-theme="dark"] main .map-loading { background: var(--alt); }
html[data-theme="dark"] main .sj-panel { background: var(--surface); }
html[data-theme="dark"] main .sj-footer { background: var(--surface); }
html[data-theme="dark"] main .sj-hint { color: #bababa; }
html[data-theme="dark"] main .sj-fs-hint { color: #8cb7be; }
html[data-theme="dark"] main .sj-type { color: #8cb7be; }
html[data-theme="dark"] main .sj-suggest { background: var(--surface); }
html[data-theme="dark"] main .sj-suggest button { background: var(--surface); }
html[data-theme="dark"] main .sj-chip { color: #8cb7be; }
html[data-theme="dark"] main .sj-chip button { color: #8cb7be; }
html[data-theme="dark"] main .sj-clear { color: #ababab; }
html[data-theme="dark"] main .sj-status { color: #bababa; }
html[data-theme="dark"] main .sj-adj-title { color: #be93a2; }
html[data-theme="dark"] main .sj-adj-list button { background: var(--surface); color: #ae919c; }
html[data-theme="dark"] main .sj-adj-state { color: var(--fg-2); }
html[data-theme="dark"] main .sj-adj-state.err { color: #db8c9b; }
html[data-theme="dark"] main .draft-banner .db-discard { background: var(--surface); color: #8cb7be; }
html[data-theme="dark"] main .mc-infra-chip { color: #97a4a6; }
html[data-theme="dark"] main .mc-infra-card { background: var(--surface); }
html[data-theme="dark"] main .mc-infra-name { color: #97a4a6; }
html[data-theme="dark"] main .mc-infra-desc { color: #b5bcbf; }
html[data-theme="dark"] main .mc-infra-modal { background: var(--surface); }
html[data-theme="dark"] main .mc-infra-modal-title { color: #97a4a6; }
html[data-theme="dark"] main .mc-infra-mtag { color: #8cb7be; }
html[data-theme="dark"] main .mc-infra-modal-desc { color: #aab1b5; }
html[data-theme="dark"] main .mc-infra-mlink { color: #8cb7be; }
html[data-theme="dark"] main .mc-run-modal { background: var(--surface); }
html[data-theme="dark"] main .mc-rm-title { color: #97a4a6; }
html[data-theme="dark"] main .mc-rm-sub { color: #b5bcbf; }
html[data-theme="dark"] main .mc-rm-list li { color: #97a4a6; }
html[data-theme="dark"] main .mc-rm-skip-h { color: #ddb290; }
html[data-theme="dark"] main .mc-rm-skip ul { color: #c3bcae; }
html[data-theme="dark"] main .mc-rm-cost { color: #97a4a6; }
html[data-theme="dark"] main .mc-rm-cancel { background: var(--surface); color: #b5bcbf; }
html[data-theme="dark"] main .mc-name-label { color: #97a4a6; }
html[data-theme="dark"] main .mc-name-label i { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .mc-name-input { color: #97a4a6; background: var(--surface); }
html[data-theme="dark"] main .mc-name-hint { color: #bcc4c7; }
html[data-theme="dark"] main .mc-level-cname { color: #97a4a6; background: var(--surface); }
html[data-theme="dark"] main .mc-clear-btn { background: var(--surface); color: #dca7a7; }
html[data-theme="dark"] main .mc-tabs-wrap { background: var(--surface); }
html[data-theme="dark"] main .mc-tab { color: #bcc4c7; }
html[data-theme="dark"] main .mc-tab:hover { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .mc-tab.active { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .mc-panel { background: var(--surface); }
html[data-theme="dark"] main .mc-center-chip { color: #a0a8ab; }
html[data-theme="dark"] main .mc-center-chip i { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .mc-level-name { color: #a0a8ab; }
html[data-theme="dark"] main .mc-level-remove { color: #e0aeb7; }
html[data-theme="dark"] main .mc-badge.pending { color: #b7bfc2; }
html[data-theme="dark"] main .mc-badge.analysing { color: #96bae3; }
html[data-theme="dark"] main .mc-badge.done { color: #a1c4a3; }
html[data-theme="dark"] main .mc-badge.error { color: #e3a6a0; }
html[data-theme="dark"] main .mc-add-btn { background: var(--surface); color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .mc-gate-note { color: #e3a6a0; }
html[data-theme="dark"] main .mc-table-wrap { background: var(--surface); }
html[data-theme="dark"] main .mc-table thead th { color: #b5bcbf; }
html[data-theme="dark"] main .mc-table a.mc-report-link { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .mc-insight { color: #a0a8ab; }
html[data-theme="dark"] main .mc-insight i { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .mc-ttable-wrap { background: var(--surface); }
html[data-theme="dark"] main .mc-ttable td.mc-metric-label { background: var(--surface); color: #a0a8ab; }
html[data-theme="dark"] main .mc-grp-row td { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .mc-rl-label { color: #b5bcbf; }
html[data-theme="dark"] main .mc-rl-btn { background: var(--surface); color: #a0a8ab; }
html[data-theme="dark"] main .mc-rl-btn:hover { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .mc-rl-btn i { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .mc-seg { background: var(--surface); }
html[data-theme="dark"] main .mc-seg-head i { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .mc-local-sub { color: #bcc4c6; }
html[data-theme="dark"] main .mc-local-ptitle i { color: color-mix(in srgb, var(--teal) 40%, white); }
html[data-theme="dark"] main .mc-loc-table thead th { color: #aeb6b8; }
html[data-theme="dark"] main .mc-loc-name { color: #9ca3a3; }
html[data-theme="dark"] main .mc-loc-routes { color: #bcc4c6; }
html[data-theme="dark"] main .mc-loc-empty { color: #bcc4c6; }
}
@layer pg {
html[data-theme="dark"] main .data-table th { color: var(--ink); }
html[data-theme="dark"] main .dr-insight strong { color: var(--ink); }
html[data-theme="dark"] main .dr-tick-val { color: var(--ink); }
html[data-theme="dark"] main .draw-btn { color: var(--ink); }
html[data-theme="dark"] main .geo-card-label { color: var(--fg-2); }
html[data-theme="dark"] main .geo-card-title { color: var(--ink); }
html[data-theme="dark"] main .geo-card-value { color: var(--ink); }
html[data-theme="dark"] main .info-card-title { color: var(--ink); }
html[data-theme="dark"] main .info-label { color: var(--fg-2); }
html[data-theme="dark"] main .map-btn-secondary { color: var(--ink); }
html[data-theme="dark"] main .map-loading-text { color: var(--fg-2); }
html[data-theme="dark"] main .map-panel-close { color: var(--fg-2); }
html[data-theme="dark"] main .map-panel-title { color: var(--ink); }
html[data-theme="dark"] main .map-style-select { color: var(--ink); }
html[data-theme="dark"] main .map-toast { color: var(--ink); }
html[data-theme="dark"] main .ov-pop-addr { color: var(--ink); }
html[data-theme="dark"] main .ov-pop-cls { color: var(--ink); }
html[data-theme="dark"] main .ov-pop-lot { color: var(--ink); }
html[data-theme="dark"] main .ov-pop-meta b { color: var(--ink); }
html[data-theme="dark"] main .ov-pop-row b { color: var(--ink); }
html[data-theme="dark"] main .ov-radio-text b { color: var(--ink); }
html[data-theme="dark"] main .ov-row-title b { color: var(--ink); }
html[data-theme="dark"] main .ov-seg button b { color: var(--ink); }
html[data-theme="dark"] main .ov-state-note b { color: var(--ink); }
html[data-theme="dark"] main .ov-sw { color: var(--ink); }
html[data-theme="dark"] main .processing-text { color: var(--ink); }
html[data-theme="dark"] main .radius-panel-close:hover { color: var(--ink); }
html[data-theme="dark"] main .radius-panel-title { color: var(--ink); }
html[data-theme="dark"] main .ref-point-btn-secondary { color: var(--ink); }
html[data-theme="dark"] main .ref-point-prompt-text { color: var(--fg-2); }
html[data-theme="dark"] main .ref-point-prompt-title { color: var(--ink); }
html[data-theme="dark"] main .school-panel .school-info-label { color: var(--fg-2); }
html[data-theme="dark"] main .school-panel .school-no-catchment { color: var(--fg-2); }
html[data-theme="dark"] main .section-subtitle { color: var(--fg-2); }
html[data-theme="dark"] main .section-title { color: var(--ink); }
html[data-theme="dark"] main .stat-card-label { color: var(--fg-2); }
html[data-theme="dark"] main .stat-card-value { color: var(--ink); }
html[data-theme="dark"] main .step-text { color: var(--fg-2); }
html[data-theme="dark"] main .tt-loc-name { color: var(--ink); }
html[data-theme="dark"] main .tt-time select { color: var(--ink); }
}
@layer pg {
html:not([data-theme="dark"]) main #drawInfoModal .modal-header .modal-title i { color: color-mix(in srgb, var(--mint) 55%, var(--ink)); }
html:not([data-theme="dark"]) main .as-surr-launch-copy .as-surr-pro { color: var(--orange-ink); }
html:not([data-theme="dark"]) main .as-surr-launch-copy span { color: var(--fg-3); }
html:not([data-theme="dark"]) main .as-surr-launch-icon { color: color-mix(in srgb, var(--mint) 55%, var(--ink)); }
html:not([data-theme="dark"]) main .as-surr-note { color: var(--fg-3); }
html:not([data-theme="dark"]) main .btn-pop-limited { color: var(--fg-3); }
html:not([data-theme="dark"]) main .dr-insight { color: var(--fg-3); }
html:not([data-theme="dark"]) main .dr-tick-dist { color: var(--fg-3); }
html:not([data-theme="dark"]) main .eco-breadcrumb a { color: color-mix(in srgb, var(--mint) 55%, var(--ink)); }
html:not([data-theme="dark"]) main .eco-hero-meta-item .coords-badge { color: color-mix(in srgb, var(--mint) 55%, var(--ink)); }
html:not([data-theme="dark"]) main .eco-hero-meta-item i { color: color-mix(in srgb, var(--mint) 55%, var(--ink)); }
html:not([data-theme="dark"]) main .geo-card-badge { color: color-mix(in srgb, var(--mint) 55%, var(--ink)); }
html:not([data-theme="dark"]) main .geo-card-link:hover { color: color-mix(in srgb, var(--mint) 55%, var(--ink)); }
html:not([data-theme="dark"]) main .info-card-icon.icon-join { color: var(--orange-ink); }
html:not([data-theme="dark"]) main .info-card-icon.icon-radial { color: color-mix(in srgb, var(--mint) 55%, var(--ink)); }
html:not([data-theme="dark"]) main .info-card-icon.icon-travel { color: var(--orange-ink); }
html:not([data-theme="dark"]) main .info-tip i { color: color-mix(in srgb, var(--mint) 55%, var(--ink)); }
html:not([data-theme="dark"]) main .lu-legend-pct { color: var(--fg-3); }
html:not([data-theme="dark"]) main .map-toast.success i { color: color-mix(in srgb, var(--mint) 55%, var(--ink)); }
html:not([data-theme="dark"]) main .mc-rm-cost i { color: var(--orange-ink); }
html:not([data-theme="dark"]) main .ov-group-title { color: var(--fg-3); }
html:not([data-theme="dark"]) main .ov-legend-hint { color: var(--fg-3); }
html:not([data-theme="dark"]) main .ov-lock-ic { color: var(--fg-3); }
html:not([data-theme="dark"]) main .ov-note { color: var(--fg-3); }
html:not([data-theme="dark"]) main .ov-pop-lot .ov-pop-wait { color: var(--fg-3); }
html:not([data-theme="dark"]) main .ov-radio-text span { color: var(--fg-3); }
html:not([data-theme="dark"]) main .school-panel .school-catchment-note { color: color-mix(in srgb, var(--mint) 55%, var(--ink)); }
html:not([data-theme="dark"]) main .shp-uid-pill { color: color-mix(in srgb, var(--mint) 55%, var(--ink)); }
html:not([data-theme="dark"]) main .stat-card-change--qual .qual-note { color: var(--fg-3); }
html:not([data-theme="dark"]) main .stat-card-change.negative { color: var(--orange-ink); }
html:not([data-theme="dark"]) main .stat-card-change.positive { color: color-mix(in srgb, var(--mint) 55%, var(--ink)); }
}
@layer pg {
@scope (main) {


    /* Mapbox overrides for brand consistency */
    .mapboxgl-ctrl-group {
        background: #fff !important;
        border: 1px solid var(--map-panel-border) !important;
        border-radius: 8px !important;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    }


    .mapboxgl-ctrl-group button {
        background: transparent !important;
        border-bottom: 1px solid var(--map-panel-border) !important;
        width: 36px !important;
        height: 36px !important;
    }


    .mapboxgl-ctrl-group button:last-child {
        border-bottom: none !important;
    }


    .mapboxgl-ctrl-group button:hover {
        background: rgba(0, 95, 110, 0.1) !important;
    }


    .mapboxgl-ctrl-attrib {
        background: rgba(255, 255, 255, 0.9) !important;
        font-size: 10px !important;
    }


    .mapboxgl-ctrl-attrib a {
        color: var(--primary-color) !important;
    }


    .btn-glow-cta {
        border: 2px solid var(--secondary-color) !important;
        animation: subtle-glow 3s ease-in-out infinite;
    }


    /* Full Analysis progress button */
    .btn-analysis-progress {
        position: relative;
        overflow: hidden;
        background: linear-gradient(135deg, var(--primary-color), #00838f) !important;
        border: none !important;
        animation: none !important;
    }


    .btn-pop-limited {
        background: #e5e7eb !important;
        color: #9ca3af !important;
        border: 1px solid #d1d5db !important;
        cursor: not-allowed !important;
        opacity: 0.7 !important;
        animation: none !important;
        box-shadow: none !important;
    }


    /* Queue stage (waiting for server to pick up job) */
    .btn-analysis-queue {
        position: relative;
        overflow: hidden;
        background: linear-gradient(135deg, #92400e, #b45309) !important;
        border: none !important;
        animation: none !important;
    }


    .tt-geocoder-row .mapboxgl-ctrl-geocoder {
        min-width: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        box-shadow: none;
        border: 1px solid rgba(0, 95, 110, 0.2);
        border-radius: 6px;
        font-family: 'DM Sans', sans-serif;
    }
@media (max-width: 768px) {


        .map-panel {
            min-width: auto;
            max-width: calc(100vw - 2rem);
            width: calc(100vw - 2rem);
            left: 1rem !important;
            right: 1rem !important;
            transform: none !important;
        }
}
}
}
@layer pg {


    /* Analysis hand-off (layout stability): from Submit until the results land, #singleResults holds a
       viewport-sized footprint so the footer is already out of view when the results insert. Released by
       releaseAnalysisReserve() when the processing overlay closes. */
    body.analysis-pending #singleResults { min-height: 130vh; }

        body.mode-multi .multi-only { display: block; }

        body.mode-multi .single-only { display: none !important; }

        /* In multi mode, hide the single-draw map widgets (the multi panel drives the map) */
        body.mode-multi #drawToolbar,
        body.mode-multi #radiusPanel,
        body.mode-multi #ttPanel,
        body.mode-multi #refPointPrompt,
        body.mode-multi #floatingSubmit { display: none !important; }

        body.mode-multi .mc-mapinfo-btn { display: flex; }
}
@layer pgpage {





#cfaDockWrap {
    position: fixed; top: calc(50% + 12px); right: 14px; width: 72px; z-index: 1028;
    padding: 16px 0; border-radius: 36px;
    background: radial-gradient(140% 60% at 50% 0%, rgba(26,188,156,0.14), transparent 60%),
                linear-gradient(170deg, rgba(9,15,23,0.94) 0%, rgba(17,29,41,0.92) 55%, rgba(21,35,51,0.90) 100%);
    -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(26,188,156,0.22);
    box-shadow: 0 18px 48px rgba(4,10,18,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
    transform: translateY(-50%) translateX(calc(100% + 70px));
    transition: transform .55s cubic-bezier(.22,.8,.3,1);
    max-height: calc(100vh - 118px); display: flex; flex-direction: column; align-items: stretch;
}

#cfaDockWrap.cfa-dock-in { transform: translateY(-50%) translateX(0); }

#cfaDock { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0; padding: 0; }

.cfa-dock-node {
    position: relative; width: 72px; height: 34px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; padding: 0; cursor: pointer;
}

.cfa-dock-node i {
    font-size: 16px; line-height: 1; color: rgba(255,255,255,0.6);
    transition: color .22s ease, transform .2s ease; pointer-events: none;
}

.cfa-dock-node:hover i, .cfa-dock-node:focus-visible i { color: #1ABC9C; transform: scale(1.16); }

.cfa-dock-node.active i { color: #ED8B00; transform: scale(1.2); }

.cfa-dock-node:focus-visible { outline: 2px solid rgba(26,188,156,0.6); outline-offset: -6px; border-radius: 5px; }

.cfa-dock-label {
    position: absolute; right: 84px; top: 50%; transform: translateY(-50%) translateX(10px);
    opacity: 0; pointer-events: none; white-space: nowrap;
    font-family: 'Raleway', sans-serif; font-weight: 600; font-size: .72rem; letter-spacing: .11em; text-transform: uppercase;
    color: rgba(255,255,255,0.92);
    background: linear-gradient(165deg, rgba(13,22,32,0.96) 0%, rgba(17,29,41,0.96) 100%);
    border: 1px solid rgba(26,188,156,0.25); border-right: 2px solid #ED8B00; border-radius: 5px;
    padding: 7px 13px; box-shadow: 0 10px 24px rgba(4,10,18,0.4);
    transition: opacity .2s ease, transform .2s ease;
}

.cfa-dock-label .cfa-dock-num { color: rgba(237,139,0,0.9); margin-right: 7px; font-size: .85em; font-variant-numeric: tabular-nums; }

.cfa-dock-node:hover .cfa-dock-label, .cfa-dock-node:focus-visible .cfa-dock-label, .cfa-dock-node.active .cfa-dock-label {
    opacity: 1; transform: translateY(-50%) translateX(0);
}
@media (max-height: 829px) { .cfa-dock-node { height: 30px; } #cfaDockWrap { padding: 12px 0; }}
@media (max-width: 1199px) { #cfaDockWrap { display: none !important; }}
@media (prefers-reduced-motion: reduce) { #cfaDockWrap { transition: none; }}
@media (min-width: 1200px) {
    
    #mobileBottomNav.mobile-bottom-nav { display: none !important; }}
@media (max-width: 1199px) {
    #mobileBottomNav.mobile-bottom-nav {
        position: fixed; top: 69px; left: 0; right: 0; bottom: auto; z-index: 1029; display: none;
        background: rgba(255,255,255,0.96);
        -webkit-backdrop-filter: saturate(180%) blur(8px); backdrop-filter: saturate(180%) blur(8px);
        border-bottom: 1px solid rgba(0,0,0,0.08); box-shadow: 0 6px 18px rgba(0,0,0,0.06); padding: 0;
    }
    #mobileBottomNav.mobile-bottom-nav.show { display: block; }
    #mobileBottomNav .nav-scroll-container {
        display: flex; gap: 6px; padding: 12px 12px 9px;
        overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;
    }
    #mobileBottomNav .nav-scroll-container::-webkit-scrollbar { display: none; }
    #mobileBottomNav .nav-link {
        display: inline-flex; flex-direction: row; align-items: center; gap: 6px; flex-shrink: 0; min-width: 0;
        padding: 9px 14px 7px; background: transparent; border: 1px solid rgba(0,0,0,0.1); border-radius: 999px;
        color: #475569; scroll-snap-align: center;
        transition: background-color .15s ease, color .15s ease, border-color .15s ease;
    }
    #mobileBottomNav .nav-link i { font-size: 11px; margin: 0; opacity: 0.6; }
    #mobileBottomNav .nav-link span {
        font-family: 'Raleway', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .02em;
        text-transform: none; white-space: nowrap;
    }
    #mobileBottomNav .nav-link.active { background: #ED8B00; color: #fff; border-color: #ED8B00; box-shadow: 0 2px 6px rgba(237,139,0,0.25); }
    #mobileBottomNav .nav-link.active i { opacity: 1; color: #fff; }}
}

@layer pg {
/* /draw on the CF2 shell: the re-skin (layer pg). The page's own (converted) CSS sits under this in layer pgpage. */
  /* the hero is a tool header here, not a landing hero: smaller title (it changes with the area name and can be long) so the map starts higher */
  .pg-draw-hero .pg-h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); line-height: 1.05; overflow-wrap: anywhere; }
  .pg-draw-hero .pg-sub { font-size: clamp(.9375rem, .85rem + .4vw, 1.0625rem); max-inline-size: 46rem; }
  .pg-draw-hero .pg-meta { margin-block-start: var(--s-3); }
  .pg-draw-hero .pg-meta .eco-hero-badge { background: var(--orange); color: var(--navy-9); border-color: transparent; font-weight: var(--w-strong); }
  .pg-draw-hero .coords-badge { font-family: ui-monospace, "JetBrains Mono", monospace; font-size: .8125rem; }
  .pg-draw-hero .shp-uid-pill { cursor: pointer; }
  /* the page was wider than a phone once results are in (the same on the old page): clip it, nothing is lost (carousels scroll inside their own boxes) */
  .pg-main { overflow-x: clip; }
  .pg-draw-hero .pg-meta .eco-hero-badge, .pg-draw-hero .pg-meta .eco-hero-badge * { color: var(--navy-9); }
  /* dark theme: cards with an inline white background, and teal text set inline, follow the theme (an inline style needs !important in a layer to lose to it) */
  html[data-theme="dark"] main [style*="background: #fff"], html[data-theme="dark"] main [style*="background:#fff"], html[data-theme="dark"] main [style*="background: white"], html[data-theme="dark"] main [style*="background-color: #fff"] { background: var(--surface) !important; }
  html[data-theme="dark"] main [style*="color: var(--primary-color)"], html[data-theme="dark"] main [style*="color:var(--primary-color)"] { color: color-mix(in srgb, var(--teal) 40%, white) !important; }
  html[data-theme="dark"] main [style*="border: 2px solid var(--primary-color)"] { border-color: color-mix(in srgb, var(--teal) 40%, white) !important; }
  .pg-draw-hero #badgeText { color: var(--navy-9); }
  html[data-theme="dark"] main [style*="var(--dark-color)"] { color: var(--ink) !important; }
  html[data-theme="dark"] main [style*="#005F6E" i] { color: color-mix(in srgb, var(--teal) 40%, white) !important; }
  html[data-theme="dark"] main [style*="background: #f8f9fa" i], html[data-theme="dark"] main [style*="background:#f8f9fa" i] { background: var(--alt) !important; }
  html[data-theme="dark"] main [style*="color: #444" i], html[data-theme="dark"] main [style*="color:#444" i] { color: var(--fg-2) !important; }
  html[data-theme="dark"] main .signin-ask-body { color: var(--fg-2); }
  html:not([data-theme="dark"]) main [style*="color: #999"], html:not([data-theme="dark"]) main [style*="color:#999"] { color: var(--fg-3) !important; }
  .pg-draw-hero .pg-meta .eco-hero-badge #badgeText { color: var(--navy-9) !important; }
  html:not([data-theme="dark"]) main [style*="color: #1ABC9C" i], html:not([data-theme="dark"]) main [style*="color:#1ABC9C" i], html:not([data-theme="dark"]) main [style*="color: var(--success-color)"] { color: color-mix(in srgb, var(--mint) 55%, var(--ink)) !important; }
  html:not([data-theme="dark"]) main [style*="color: #ED8B00" i], html:not([data-theme="dark"]) main [style*="color:#ED8B00" i], html:not([data-theme="dark"]) main [style*="color: var(--secondary-color)"] { color: var(--orange-ink) !important; }
  html[data-theme="dark"] main [style*="color: rgba(0, 0, 0"], html[data-theme="dark"] main [style*="color:rgba(0,0,0"] { color: var(--fg-2) !important; }
  html[data-theme="dark"] main [style*="rgba(0,0,0"] { color: var(--fg-2) !important; }

}