/* ══════════════════════════════════════════════════════
   Frontera Facts — Map Page Styles
   ══════════════════════════════════════════════════════ */


/* ── Full-viewport layout ── */

.map-page {
    display: flex;
    height: calc(100vh - var(--nav-h)); /* minus the sticky .site-nav (css/style.css:34) */
    height: calc(100dvh - var(--nav-h)); /* the VISIBLE viewport on a phone, so the legend sheet and the panel's foot sit above the browser's toolbar; a browser without dvh keeps the line above (round 3) */
    overflow: hidden;
    position: relative;
}

/* The bar is taller on this page (css/style.css .site-nav.site-nav--map: 56px,
   it holds the measure pill and the address search), so the token the height
   above subtracts follows it. <body class="ffa-map-body"> is set by
   page/page.map.php; the ≤600px block below sets the two-row bar's 157px. */
.ffa-map-body { --nav-h: 56px; }

/* Hide site footer on map page */
.map-page ~ footer,
.map-page ~ .site-footer {
    display: none !important;
}

/* The admin cache toolbar caches .load-data.enable-cache elements and this page
   has none — its data comes from /api/map/* through js/map.js — so the
   toolbar is hidden here. (The old map's stylesheet had a rule of its own for it.) */
.map-page ~ #cache-toolbar { display: none; }


/* ══════════════════════════════════════════════════════
   Map Area
   ══════════════════════════════════════════════════════ */

.map-area {
    flex: 1;
    position: relative;
    background: #e8e0d0;
}

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

/* ── Map loading indicators ── */

/* Full-area overlay shown during the initial init + first metric load */
.map-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;   /* above map tiles/controls, below panel + hamburger */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(232,224,208,0.55);
    pointer-events: none;
}

.map-loading-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.15);
    padding: 12px 18px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: var(--ink);
}

/* Compact pill for metric switches + overlay-layer fetches */
.map-loading-pill {
    position: absolute;
    top: 16px;   /* the map's top edge is clear now: the pill and the search are in the bar */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    display: none;
    align-items: center;
    gap: 8px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    padding: 6px 14px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-soft);
    pointer-events: none;
    white-space: nowrap;
}

.map-loading-pill.visible {
    display: inline-flex;
}

.map-loading-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0,0,0,0.12);
    border-top-color: var(--terracotta);
    border-radius: 50%;
    animation: overlay-spin 0.6s linear infinite;
    flex-shrink: 0;
}

/* ── The bar's control: the measure pill + the address search ──
   page/page.map.php builds .ffa-navbar and the header prints it in the nav
   row (css/style.css .site-nav--map .nav-slot centres it). One white pill:
   the measure (icon, name, caret) on the left behind a hairline divider, the
   address field and Go on the right. Nothing here is absolutely positioned
   over the map any more. */

.ffa-navbar {
    display: flex;
    align-items: center;
    gap: 0;
    width: min(720px, 100%);
    height: 46px;
    background: #FFFFFF;
    border-radius: 999px;
    box-shadow: 0 2px 12px rgba(44,36,24,.10);
    padding: 0 6px 0 6px;
}

/* Relative, not static: the result list below hangs from THIS box, under the
   field; static would anchor it to the whole bar. No z-index on the list — the
   bar is z-index 1200 (css/style.css) and the list is its descendant, so it
   paints over the map's panes, cards and panel. */
/* flex-basis 220px: the field keeps a usable width and the pill (flex: 0 1 auto, capped at
   46%) gives way first — with the pill at flex: none, a long measure name pushed Go past
   the card's edge between 601 and about 675px wide (the 2026-09-23 review). */
.map-search { position: relative; top: auto; left: auto; transform: none; width: auto; flex: 1 0 220px; min-width: 0; z-index: auto; }
.map-search .search-result { position: absolute; top: calc(100% + 10px); left: 0; right: 0; }

.map-search-wrap {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 999px;
    box-shadow: none;
    padding: 0 0 0 10px;
    gap: 8px;
}

.map-search-icon {
    color: var(--ink-soft);
    flex-shrink: 0;
}

#search-address {
    flex: 1;
    min-width: 0;   /* a text input's own minimum is ~150px; without this it cannot shrink and Go spills out of the card */
    background: none;
    border: none;
    outline: none;
    padding: 11px 0;
    font-size: 14px;
    font-family: 'DM Sans', sans-serif;
    color: var(--ink);
}

#search-address::placeholder {
    color: #aaa;
}

#search-btn {
    background: var(--terracotta);
    border: none;
    border-radius: 999px;   /* the pill's own round ends, inside the round bar */
    height: 34px;           /* inside the 46px bar: 6px of white above and below */
    padding: 0 14px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

#search-btn:hover {
    background: #b05840;
}

.search-result {
    display: none;
    margin-top: 6px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.12);
    padding: 10px 14px;
    font-family: 'DM Sans', sans-serif;
}

.search-result.visible {
    display: block;
}

.search-result-match {
    color: var(--ink);
    font-size: 13px;
    line-height: 1.4;
}

.search-result-notice {
    color: #8a6d1b;
    background: #fdf6e3;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
}

.search-result-error {
    color: var(--terracotta);
    font-size: 13px;
}

.search-result-loading {
    color: #999;
    font-size: 13px;
    font-style: italic;
}


/* Override Leaflet defaults to match brand */
.leaflet-popup-content-wrapper {
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    font-family: 'DM Sans', sans-serif;
}

.leaflet-popup-content {
    margin: 14px 16px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
}

.leaflet-popup-tip {
    box-shadow: none;
}

/* Tooltip styling */
.tract-tooltip {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    line-height: 1.4;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15) !important;
    border: none !important;
    color: var(--ink);
    background: white;
}

.tract-tooltip .tt-name {
    font-weight: 600;
    margin-bottom: 2px;
    font-size: 13px;
}

.tract-tooltip .tt-value {
    font-size: 14px;
    color: var(--ink);
}

.tract-tooltip .tt-rank {
    font-size: 11px;
    color: var(--ink-soft);
    margin-top: 1px;
}


/* ══════════════════════════════════════════════════════
   Legend
   ══════════════════════════════════════════════════════ */

.map-legend {
    position: absolute;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    background: white;
    border-radius: var(--radius);
    box-shadow: 0 2px 16px rgba(0,0,0,0.12);
    padding: 14px 16px 12px;
    min-width: 240px;
    max-width: 320px;
    max-height: calc(100% - 48px);   /* never taller than the map area */
    overflow-y: auto;
    font-family: 'DM Sans', sans-serif;
}

.legend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

/* ── Year selector (Phase C) ── */

.legend-year-select {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink);
    background: var(--sand);
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px 6px;
    cursor: pointer;
    outline: none;
    flex-shrink: 0;
}

.legend-year-select:focus {
    border-color: var(--terracotta);
}

.legend-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}

.legend-close {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--ink-soft);
    cursor: pointer;
    padding: 0 2px;
    display:none;
    line-height: 1;
}

.legend-bar-wrap {
    position: relative;
    margin-bottom: 8px;
}

/* ── Context markers on bar (Phase C) ── */

.legend-markers {
    display:none;
    position: relative;
    height: 10px;
    margin-top: 2px;
}


.legend-marker {
    position: absolute;
    top:-3px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid var(--ink);
    transform: translateX(-6px);
    z-index: 2;
    cursor: default;
}
.legend-marker::after {
    background:#000;
    content: '';
    position: absolute;
    top: 5px;
    left: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: translateY(-2px);
}

.legend-marker--county   { border-bottom-color: var(--county-color); z-index:2; transform:scale(0.8); }
.legend-marker--county::after{ background:var(--county-color); }
.legend-marker--state    { border-bottom-color: var(--state-color); z-index:1;  }
.legend-marker--state::after{ background:var(--state-color); }
.legend-marker--national { border-bottom-color: var(--national-color); z-index:0; }
.legend-marker--national::after{ background:var(--national-color); transform:scale(1.2); }



/* ── Legend context dots ── */

.legend-ctx-dot--county   { background:  #bbb;}
.legend-ctx-dot--state    { background:  #bbb; }
.legend-ctx-dot--national { background:  #bbb;}

.legend-bar {
    display: flex;
    height: 14px;
    border-radius: 3px;
    overflow: hidden;
}

.legend-bar-step {
    flex: 1;
    height: 100%;
}

.legend-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 3px;
}

.legend-label {
    font-size: 10px;
    color: var(--ink-soft);
    text-align: center;
    flex: 1;
}
.legend-label:nth-of-type(1) {
    text-align:left;
}
.legend-label:nth-of-type(2) {
    visibility:hidden;
}
.legend-label:nth-of-type(3) {
    text-align:right;
}
div#legend-context::before{
    content:'Median Values';
    display:block;
    font-size:0.8rem;
    width:100%;
}
.legend-context {
    display: flex;
    gap: 3px 18px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid #ccc;
    margin-top: 4px;
}

.legend-ctx-item {
    font-size: 11px;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    gap: 4px;
}

.legend-ctx-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════
   Detail Panel (Phase 2 — basic scaffolding)
   ══════════════════════════════════════════════════════ */

.map-panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 400px;
    background: #FFFFFF;   /* white (owner's own edit, merged into round 3 on 2026-09-23); the spec's sand-at-half-strength ground, #F2EFE9 (spec 2026-09-23 §B.3), is retired */
    z-index: 1100;
    box-shadow: -4px 0 24px rgba(0,0,0,0.12);
    transform: translateX(100%);

    transition: transform 0.3s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.map-panel.open {
    transform: translateX(0);
}

/* The header is a 3-column grid so the title is optically centred whatever Back's width;
   z-index 3 puts the sticky header (and the foot) over the measure card's ▼ (z 2).
   (Spec 2026-09-23 §B.4.4's grid rule, edited into this kept rule in place.) */
.panel-header {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-columns: 1fr minmax(0, auto) 1fr;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(44,36,24,.08);
    background: #FFFFFF;
    z-index: 3;
}

.panel-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 26px;
    color: var(--ink-soft);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.panel-body {
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Shared color tokens for the floating map legend (bottom-right).
       NOT used by the detail panel card — that uses --ink / --ink-soft /
       --color-text-tertiary. Leaving these here so .legend-marker--*
       and .legend-ctx-dot--* keep working. ── */

:root {
    --county-color:#e3b2a4;
    --state-color:#c7664a;
    --national-color:#832a1a;
}


/* ── Land cover stacked bar (Phase C) ── */

.lc-bar {
    display: flex;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 12px;
}


.lc-segment {
    height: 100%;
    transition: opacity 0.15s;
    cursor: default;
    min-width: 2px;
}

.lc-segment:hover {
    opacity: 0.75;
}

/* The legend's layout (.lc-legend, -item, -dot sizes) is in the tract panel's
   card block below (spec 2026-09-23 §B.4.4); the colours stay here. */

/* ── Land cover default colors ── */

.lc-segment--pct_dark_rooftop,
.lc-legend-dot--pct_dark_rooftop       { background: #6E5A4B; }

.lc-segment--pct_light_rooftop,
.lc-legend-dot--pct_light_rooftop      { background: #CBBFAE; }

.lc-segment--pct_asphalt_road,
.lc-legend-dot--pct_asphalt_road       { background: #33383D; }

.lc-segment--pct_asphalt_parking,
.lc-legend-dot--pct_asphalt_parking    { background: #A9B7C6; }

.lc-segment--pct_tree_canopy,
.lc-legend-dot--pct_tree_canopy        { background: #7A9A6D; }

.lc-segment--pct_grass_turf,
.lc-legend-dot--pct_grass_turf         { background: #98c87a; }

.lc-segment--pct_bare_soil,
.lc-legend-dot--pct_bare_soil          { background: #D4A843; }

.lc-segment--pct_other_impervious,
.lc-legend-dot--pct_other_impervious   { background: #b85450; }


/* ══════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .map-area {
        width: 100%;
    }

    /* No offsets for the zoom stack or the loading pill here any more: the
       measure pill and the address search moved into the bar (spec 2026-09-23
       §A), so nothing floats over the map's top and Leaflet's own 10px margin
       and the loading pill's desktop top: 16px are right at every width. */

    .ffa-map-cards {
        bottom: 12px;
        right: 12px;
        left: 12px;
        width: auto;
        max-height: calc(100% - 24px);
    }

    .map-panel {
        width: 100%;
    }
}


/* ══════════════════════════════════════════════════════
   Overlay Layer Controls (the layers box, #ffa-layers)
   ══════════════════════════════════════════════════════ */

/* The divider and the collapsed "Overlay Layers" header the old dark sidebar
   drew above these toggles are gone: the layers box carries its own title, in
   the page's language, and _buildOverlayPanel() no longer builds either one.
   .overlay-section-body stays — the function still gives it .open at birth. */

.overlay-section-body {
    display: none;
    padding-bottom: 8px;
}

.overlay-section-body.open {
    display: block;
}

.overlay-group-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: rgba(255,255,255,0.4);
    padding: 10px 16px 4px;
    margin-top: 4px;
}

.overlay-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px 6px 20px;
    cursor: pointer;
    font-size: 13px;
    color: rgba(255,255,255,0.65);
    transition: background 0.12s, color 0.12s;
    user-select: none;
    position: relative;
}

.overlay-toggle:hover {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.9);
}

.overlay-toggle.active {
    color: #fff;
    background: rgba(255,255,255,0.08);
}

.overlay-swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.15s, transform 0.15s;
}

.overlay-toggle.active .overlay-swatch {
    opacity: 1;
    transform: scale(1.2);
}

.overlay-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.overlay-count {
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    flex-shrink: 0;
}

.overlay-spinner {
    display: none;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255,255,255,0.15);
    border-top-color: #C4654A;
    border-radius: 50%;
    animation: overlay-spin 0.6s linear infinite;
    flex-shrink: 0;
}

.overlay-toggle.loading .overlay-spinner {
    display: block;
}

.overlay-toggle.loading .overlay-count {
    display: none;
}

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


/* ══════════════════════════════════════════════════════
   Overlay Map Markers
   ══════════════════════════════════════════════════════ */

.overlay-marker {
    background: none !important;
    border: none !important;
}

.overlay-marker-inner {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.35);
    transition: transform 0.15s;
    cursor: pointer;
    line-height: 1;
}

.overlay-marker-inner:hover {
    transform: scale(1.25);
}


/* ══════════════════════════════════════════════════════
   Overlay Popups
   ══════════════════════════════════════════════════════ */

.overlay-popup .leaflet-popup-content-wrapper {
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

.overlay-popup .leaflet-popup-content {
    margin: 0;
    font-family: 'DM Sans', sans-serif;
}

.overlay-popup-content {
    padding: 12px 14px;
}

.overlay-popup-name {
    font-weight: 600;
    font-size: 15px;
    color: #2c3e50;
    margin-bottom: 4px;
    line-height: 1.3;
}

.overlay-popup-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

.overlay-popup-addr {
    font-size: 13px;
    color: #7f8c8d;
    margin-bottom: 4px;
}

.overlay-popup-rn {
    font-size: 11px;
    color: #95a5a6;
    margin-top: 6px;
    font-family: monospace;
}


/* ── PERC warning callout ── */

.overlay-popup-warning {
    background: #fef9e7;
    border-left: 3px solid #f39c12;
    padding: 8px 10px;
    margin-top: 8px;
    border-radius: 0 4px 4px 0;
    font-size: 12px;
    color: #856404;
    line-height: 1.5;
}


/* ── TCEQ compliance callout ── */

.overlay-popup-tceq {
    background: #fdf2f2;
    border-left: 3px solid #e74c3c;
    padding: 8px 10px;
    margin-top: 8px;
    border-radius: 0 4px 4px 0;
}

.overlay-popup-tceq-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #c0392b;
    margin-bottom: 6px;
}

.overlay-popup-tceq-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 8px;
    align-items: baseline;
}

.tceq-count {
    font-weight: 700;
    font-size: 14px;
    color: #c0392b;
    text-align: right;
}

.tceq-label {
    font-size: 12px;
    color: #666;
}


/* ── EPA ECHO Detailed Facility Report callout (Phase 5.2) ── */

.overlay-popup-echo {
    background: #fdf2f2;
    border-left: 3px solid #922b21;
    padding: 8px 10px;
    margin-top: 8px;
    border-radius: 0 4px 4px 0;
}

.overlay-popup-echo-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #922b21;
    margin-bottom: 6px;
}

.overlay-popup-echo-status {
    display: inline-block;
    padding: 3px 8px;
    margin-bottom: 8px;
    background: #fff;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    color: #922b21;
    line-height: 1.3;
}

.overlay-popup-echo-status--clean {
    color: #1e8449;
    background: #eafaf1;
}

.overlay-popup-echo-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3px 10px;
    font-size: 12px;
    align-items: baseline;
}

.overlay-popup-echo-label {
    color: #666;
}

.overlay-popup-echo-value {
    font-weight: 600;
    color: #2c3e50;
    text-align: right;
}

.overlay-popup-echo-demo {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #f0d8d8;
}

.overlay-popup-echo-demo-title {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #888;
    margin-bottom: 4px;
}

.leaflet-container .overlay-popup-echo-link {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 10px;
    background: #922b21;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.overlay-popup-echo-link:hover {
    background: #7b241c;
    color: #fff;
    text-decoration: none;
}


/* ── Per-violation timeline list (Phase 5.5) ── */

.overlay-popup-violations-placeholder {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #f0d8d8;
    font-size: 11px;
    font-style: italic;
    color: #888;
}

.overlay-popup-violations {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #f0d8d8;
}

.overlay-popup-violations-list {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
}

.overlay-popup-violation {
    padding: 5px 0;
    font-size: 11.5px;
    line-height: 1.4;
    border-bottom: 1px dotted #f0d8d8;
    color: #555;
}

.overlay-popup-violation:last-child {
    border-bottom: none;
}

.overlay-popup-violation--active {
    color: #2c3e50;
}

.overlay-popup-violation-statute {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 2px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #fff;
    background: #888;
    vertical-align: 2px;
}

.overlay-popup-violation-statute.statute-rcra { background: #c0392b; }
.overlay-popup-violation-statute.statute-caa  { background: #d68910; }
.overlay-popup-violation-statute.statute-cwa  { background: #2980b9; }
.overlay-popup-violation-statute.statute-sdwa { background: #16a085; }

.overlay-popup-violation-code {
    font-family: 'DM Mono', 'SF Mono', Consolas, monospace;
    font-size: 10.5px;
    color: #922b21;
    font-weight: 600;
}

.overlay-popup-violation-desc {
    color: inherit;
}

.overlay-popup-violation-date {
    display: block;
    font-size: 10px;
    color: #888;
    font-style: italic;
    margin-top: 1px;
}

.overlay-popup-violation-link {
    color: #922b21;
    text-decoration: none;
    font-weight: 700;
}

.overlay-popup-violation-link:hover {
    color: #7b241c;
}

.overlay-popup-violations-more {
    margin-top: 6px;
    font-size: 10px;
    font-style: italic;
    color: #888;
    text-align: center;
}

.overlay-popup-violations-empty,
.overlay-popup-violations-error {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #f0d8d8;
    font-size: 11px;
    font-style: italic;
    color: #888;
}


/* ── Source Attribution ── */

.legend-source {
    font-size: 11px;
    color: #999;
    font-style: italic;
    margin-top: 8px;
}

/* The tract panel's source line (.panel-source, -agency, -link) is in the card
   block below (spec 2026-09-23 §B.4.4). */


/* ══════════════════════════════════════════════════════
   Panel Metric Card — the bar (shared with the tract popup's mini bar)
   ══════════════════════════════════════════════════════ */

.panel-card-bar-wrap {
    position: relative;
    margin: 18px 0 14px;
}

.panel-card-bar {
    position: relative;
    height: 12px;
    border-radius: 3px;
    overflow: visible;
}

/* .panel-card-tract (the ▼ above the bar) is in the card block below. */

.panel-card-tick {
    position: absolute;
    top: 0;
    width: 1.5px;
    height: 100%;
    background: var(--ink);
    opacity: 0.6;
    transform: translateX(-0.75px);
    pointer-events: none;
    display:none;
}

/* Mini ranking bar inside the tract click popup — reuses the panel's
   .panel-card-bar / .panel-card-tract visuals with popup-fit margins */
.leaflet-popup-content .popup-card-bar-wrap {
    margin: 20px 0 6px;
    min-width: 220px;
}

/* ══════════════════════════════════════════════════════
   Legend "About this measure" card
   ══════════════════════════════════════════════════════ */

.legend-about {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #ccc;
}

.legend-about[hidden] { display: none; }

.legend-about-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 4px 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.legend-about-toggle:hover { color: var(--ink); }

.legend-about-toggle-icon {
    transition: transform 0.18s ease;
    font-size: 18px;
}

.legend-about-toggle[aria-expanded="true"] .legend-about-toggle-icon {
    transform: rotate(-180deg);
}

.legend-about-body[hidden] { display: none; }

.legend-about-body {
    margin-top: 8px;
    /* Long AI summaries used to push the collapse toggle off the top of
       the screen (legend is bottom-anchored) — cap and scroll instead. 20vh
       since round 3, so that with the layers rows open too (their own 20vh
       cap) both cards fit a 1024×768 window without the cards themselves
       having to scroll (spec §1 arithmetic, measured in the browser review:
       legend 256 + 154 + gap 12 + layers head 65 + 154 = 641 under the
       wrapper's 664 cap; 25vh gave 717 and both cards scrolled). */
    max-height: 20vh;
    overflow-y: auto;
}

/* The measure's own description, first in the body (js/map-picker.js writes it
   on ffmap:metric; the AI summary under it is js/map.js's). */
.legend-about-desc {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink);
}
.legend-about-desc[hidden] { display: none; }

.legend-about-summary {
    font-size: 12px;
    line-height: 1.55;
    color: var(--ink);
    margin: 0 0 10px;
    font-weight: 300;
}

.legend-about-patterns {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.legend-about-pattern {
    border-left: 3px solid var(--county-color);
    padding: 6px 8px;
    background: #fafafa;
    border-radius: 0 4px 4px 0;
}

.legend-about-pattern-header {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 4px;
    font-size: 11px;
}

.legend-about-pattern-category {
    color: var(--ink-soft);
    text-transform: lowercase;
}

.legend-about-pattern-text {
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink);
    margin-bottom: 4px;
}

.legend-about-pattern-lead {
    display: block;
    font-size: 11px;
    color: var(--ink-soft);
    line-height: 1.45;
}


/* ── The tract panel's cards (spec 2026-09-23 §B: the owner's mockups) ── */
.panel-back { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 500; color: var(--navy); padding: 6px 4px; flex: none; }
.panel-back-chev { font-size: 22px; line-height: 1; }
/* .panel-header: the 3-column grid rule is EDITED into the kept rule in place
   (the "Detail Panel" section above), keeping position: sticky; top: 0 — no second selector. */
.panel-back { justify-self: start; }
.panel-close { justify-self: end; }
.panel-title-wrap { min-width: 0; text-align: center; }
.panel-sub { font-size: 12px; color: var(--color-text-tertiary); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-sub[hidden] { display: none; }

.panel-card { background: #FFFFFF; border-radius: var(--radius); padding: 16px; box-shadow: 0 2px 14px rgba(44,36,24,.06); }
.panel-card-h { font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.panel-group { display: flex; flex-direction: column; gap: 10px; }
.panel-h { font-size: 18px; font-weight: 600; color: var(--ink); margin: 6px 4px 0; }
.panel-lead { font-size: 14px; line-height: 1.45; color: var(--color-text-tertiary); margin: -6px 4px 0; }
.panel-lead:empty { display: none; }
.panel-note { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; line-height: 1.45; color: var(--color-text-tertiary); padding: 0 4px; }
.panel-note svg { flex: none; margin-top: 2px; }

/* The picture card: the PNG edge to edge at the top, the chip over its foot */
.panel-card--visual { padding: 0; overflow: hidden; }
.panel-image-wrap { position: relative; }
.panel-image { display: block; width: 100%; }
.panel-image-chip { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(44,36,24,.72); color: #FFFFFF; font-size: 12px; font-weight: 500; }
.panel-card--visual .panel-landcover { padding: 14px 16px 16px; }
/* .lc-bar: EDIT the kept rule in place to height 14px, radius 999px, margin-bottom 12px (no second selector). */
.lc-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.lc-legend-item { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ink); line-height: 1.4; min-width: 0; }
.lc-legend-dot { width: 10px; height: 10px; border-radius: 999px; flex: none; margin-top: 4px; }
.lc-legend-l { flex: 1 1 auto; min-width: 0; }   /* wraps: "Other impervious" is borderline at 375 wide */
.lc-legend-v { font-weight: 600; font-variant-numeric: tabular-nums; }

/* The measure card */
.panel-metric-name { font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.panel-metric-value { font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; color: var(--ink); margin-top: 4px; }
.panel-card-rank { font-size: 13px; color: var(--color-text-tertiary); margin-top: 4px; }
/* .panel-card-bar-wrap: EDIT the kept rule in place to margin 18px 0 14px (no second selector). */
.panel-card-tract { position: absolute; top: -12px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 10px solid var(--ink); transform: translateX(-6px); pointer-events: none; z-index: 2; }
/* The three cells on ONE navy-soft ground with white dividers, not three sand tiles
   (owner's own edit, merged into round 3 on 2026-09-23). */
.panel-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; background: var(--navy-soft); border-radius: 10px; }
.panel-cell { padding: 10px 8px; text-align: center; min-width: 0; border-right: 1px solid #fff; }
.panel-cell-l { display: block; font-size: 12px; color: var(--color-text-tertiary); }
.panel-cell-v { display: block; font-size: 17px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 2px; }
.panel-source { font-size: 12px; line-height: 1.5; color: var(--color-text-tertiary); margin-top: 14px; }
.panel-source-agency { font-weight: 600; }
.panel-source-link { color: var(--terracotta); text-decoration: none; margin-left: 4px; }
.panel-source-link:hover { text-decoration: underline; }

/* Cards with an icon tile at the left */
.panel-card--notable, .panel-env-item, .panel-card--context { display: flex; gap: 12px; align-items: flex-start; }
.panel-card-main { flex: 1 1 auto; min-width: 0; }
.panel-tile { flex: none; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.panel-card--notable { background: #FBF1EC; }
.panel-tile--notable { background: #F5DED3; color: var(--terracotta); border-radius: 999px; }
.panel-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--terracotta); }
.panel-notable-reason { font-size: 17px; line-height: 1.4; color: var(--ink); margin-top: 4px; }
.panel-notable-narrative { font-size: 14px; line-height: 1.5; color: var(--ink); margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(44,36,24,.1); }

.panel-env-list { display: flex; flex-direction: column; gap: 10px; }
.panel-env-icon { background: var(--sand); }
.panel-env-badge { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; line-height: 1.3; }
.panel-env-badge.conf-strong      { background: var(--brick); color: #FFFFFF; }
.panel-env-badge.conf-directional { background: #FBE4DE; color: var(--brick); }
.panel-env-badge.conf-suggestive  { background: #E3EEF3; color: var(--navy); }
.panel-env-badge.conf-unknown     { background: var(--sand); color: var(--ink-soft); }
.panel-env-title { font-size: 15px; font-weight: 600; color: var(--ink); margin-top: 6px; }
.panel-env-pattern { font-size: 14px; line-height: 1.5; color: var(--ink); margin-top: 4px; }
.panel-env-lead { display: flex; gap: 8px; align-items: flex-start; background: #F4F6F8; border-radius: 10px; padding: 12px; margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.panel-env-lead svg { flex: none; margin-top: 2px; color: var(--color-text-tertiary); }

.panel-echo-list { display: flex; flex-direction: column; gap: 10px; }
.panel-echo-header { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.panel-echo-name { font-size: 15px; font-weight: 600; color: var(--ink); min-width: 0; }
.panel-echo-distance { flex: none; font-size: 12px; color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.panel-echo-status { font-size: 13px; color: var(--brick); margin-top: 2px; }
.panel-echo-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12px; color: var(--color-text-tertiary); }
.panel-echo-stats strong { color: var(--ink); }
.panel-echo-link { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--terracotta); text-decoration: none; }
.panel-echo-link:hover { text-decoration: underline; }

.panel-tile--context { background: var(--navy-soft); color: var(--navy); border-radius: 999px; }
.panel-narrative { font-size: 14px; line-height: 1.6; color: var(--ink); }

/* The foot, stuck to the panel's bottom edge; the body scrolls under the header and over it */
.panel-foot { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--navy-soft); color: var(--navy); font-size: 15px; font-weight: 600; text-decoration: none; border-top: 1px solid rgba(44,36,24,.08); }
.panel-foot:hover { background: #DFE6EE; }
/* While it is still inside #panel-body (between the swap and the move) it must not stick there. */
#panel-body .panel-foot { position: static; }

/* ── Location-focus deep-link: toggle chip + pin label ───────── */
.map-radius-toggle-wrap { margin: 10px 10px 0 0; }
.map-radius-toggle {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .7rem;
    background: var(--warmwhite, #FDFBF7);
    color: var(--ink, #2C2418);
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    font-family: inherit; font-weight: 600; font-size: .8rem; line-height: 1;
    cursor: pointer;
}
.map-radius-toggle.is-off { opacity: .7; }
/* checkbox-style indicator: empty square when off, filled + checkmark when on (driven by aria-pressed) */
.map-radius-toggle .mrt-check {
    width: 14px; height: 14px; flex: 0 0 auto; box-sizing: border-box;
    border: 1.5px solid var(--ink-soft, #5C5040);
    border-radius: 3px; background: transparent; position: relative;
}
.map-radius-toggle[aria-pressed="true"] .mrt-check {
    background: var(--ink, #2C2418); border-color: var(--ink, #2C2418);
}
.map-radius-toggle[aria-pressed="true"] .mrt-check::after {
    content: ''; position: absolute; left: 4px; top: 1px;
    width: 4px; height: 7px;
    border: solid var(--warmwhite, #FDFBF7); border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.leaflet-tooltip.location-focus-label {
    background: rgba(253, 251, 247, .94);
    border: 1px solid rgba(0,0,0,.12);
    color: var(--ink, #2C2418);
    font-family: inherit; font-weight: 600; font-size: .72rem; line-height: 1.2;
    padding: 1px 6px; border-radius: 5px; box-shadow: none;
}
.leaflet-tooltip.location-focus-label::before { display: none; }   /* drop the arrow for a clean chip */


/* ══════════════════════════════════════════════════════
   Apple-way slice 4 — the picker, the applied state and the
   two sections below the hero
   ══════════════════════════════════════════════════════

   The vocabulary here is a port of docs/design/apple/src/picker.css with every
   class prefixed ffa-picker-, as spec §3's mapping table requires. It lives in
   this stylesheet and NOT in css/ffa.css on purpose: it is the map's alone.
   The eight .c-* tints of the mockup are not ported — the catalog's own
   topic.color drives the tints, through js/map-icons.js.                      */


/* ── The picker modal (src/picker-body.html, src/search-body.html) ── */

/* No display property: the root ships hidden and JS toggles el.hidden, which a
   display rule here would defeat. position:fixed escapes .map-page's
   overflow:hidden, and .map-page carries no transform, so it really does. */
#ffa-picker {
    position: fixed;
    inset: 0;
    z-index: 3000;
    font-family: 'DM Sans', sans-serif;
    color: var(--ink);
}

.ffa-picker-pill[hidden],
.ffa-picker-pop[hidden],
.legend-index-method[hidden] {
    display: none;
}

.ffa-picker-dim {
    position: absolute;
    inset: 0;
    background: rgba(29, 26, 22, .42);
}

.ffa-picker-modal {
    position: absolute;
    left: 50%;
    top: 64px;
    transform: translateX(-50%);
    width: min(1040px, calc(100% - 48px));
    max-height: calc(100% - 128px);
    overflow-y: auto;
    box-sizing: border-box;
    background: var(--warmwhite);
    border-radius: 30px;
    padding: 32px 36px 36px;
    display: flex;
    flex-direction: column;
    gap: 26px;
    box-shadow: 0 30px 80px rgba(29, 26, 22, .35);
}

.ffa-picker-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ffa-picker-sbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    height: 56px;
    padding: 0 18px;
    box-sizing: border-box;
    background: rgba(44, 36, 24, .07);
    border-radius: 16px;
}

.ffa-picker-sbar:focus-within {
    background: #FFFFFF;
    box-shadow: inset 0 0 0 2px var(--accent);
}

.ffa-picker-sbar-i {
    display: flex;
    flex: none;
    color: var(--color-text-tertiary);
}
.ffa-picker-sbar-i svg { width: 22px; height: 22px; }
.ffa-picker-sbar:focus-within .ffa-picker-sbar-i { color: var(--accent); }

.ffa-picker-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 20px;
    color: var(--ink);
}
.ffa-picker-input::placeholder { color: var(--color-text-tertiary); }

.ffa-picker-kbd {
    flex: none;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    border: 1px solid rgba(44, 36, 24, .18);
    border-radius: 6px;
    padding: 2px 7px;
}

.ffa-picker-done {
    flex: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    background: rgba(44, 36, 24, .08);
    border-radius: 999px;
    padding: 14px 20px;
}
.ffa-picker-done:hover { background: rgba(44, 36, 24, .14); }

.ffa-picker-body {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.ffa-picker-sec {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    margin: 0;
}


/* ── Chips ── */

.ffa-picker-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ffa-picker-chip {
    border: 0;
    cursor: pointer;
    font-family: inherit;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
    background: rgba(44, 36, 24, .06);
}
.ffa-picker-chip:hover { background: rgba(44, 36, 24, .12); }
.ffa-picker-chip--on { background: var(--ink); color: var(--warmwhite); }
.ffa-picker-chip--on:hover { background: var(--ink); }


/* ── Browse by folder ── */

.ffa-picker-browse,
.ffa-picker-recent {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ffa-picker-folders {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.ffa-picker-folder {
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0;
}

.ffa-picker-folder-box {
    width: 96px;
    height: 96px;
    box-sizing: border-box;
    border-radius: 26px;
    background: #EFE9DD;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 10px;
}
.ffa-picker-folder:hover .ffa-picker-folder-box { background: #E6DECE; }

.ffa-picker-folder-box--one { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.ffa-picker-folder-box--ghost {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    background: transparent;
    border: 2px dashed #C9BFAD;
}
.ffa-picker-folder-box--ghost .ffa-picker-mini { color: var(--color-text-tertiary); }

.ffa-picker-mini {
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--warmwhite);
}
.ffa-picker-mini svg { width: 16px; height: 16px; }
.ffa-picker-folder-box--one .ffa-picker-mini { border-radius: 16px; }
.ffa-picker-folder-box--one .ffa-picker-mini svg,
.ffa-picker-folder-box--ghost .ffa-picker-mini svg { width: 30px; height: 30px; }

.ffa-picker-folder-l {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
    text-align: center;
    color: var(--ink);
}
.ffa-picker-folder-c {
    font-size: 12px;
    color: var(--color-text-tertiary);
    text-align: center;
}


/* ── Recents ── */

.ffa-picker-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.ffa-picker-tile {
    border: 0;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #FFFFFF;
    border-radius: 18px;
    padding: 14px 16px;
    box-shadow: 0 1px 4px rgba(44, 36, 24, .06);
}
.ffa-picker-tile:hover { box-shadow: 0 2px 10px rgba(44, 36, 24, .12); }

.ffa-picker-tile-i,
.ffa-picker-result-i {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--warmwhite);
    background: var(--color-text-tertiary);
}
.ffa-picker-tile-i svg,
.ffa-picker-result-i svg { width: 22px; height: 22px; }

.ffa-picker-tile-b,
.ffa-picker-result-b {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ffa-picker-tile-t,
.ffa-picker-result-t {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.2;
    color: var(--ink);
}
.ffa-picker-tile-s,
.ffa-picker-result-s {
    font-size: 12px;
    color: var(--color-text-tertiary);
    margin-top: 2px;
}


/* ── The search state: results on the left, preview on the right ── */

.ffa-picker-search {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.ffa-picker-col,
.ffa-picker-also {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.ffa-picker-col { gap: 18px; }

.ffa-picker-results {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 340px;
    overflow-y: auto;
}

.ffa-picker-result {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    cursor: pointer;
}
.ffa-picker-result--on { background: rgba(61, 107, 133, .1); }


/* ── The preview card, the mockup's .pop ── */

.ffa-picker-pop {
    box-sizing: border-box;
    background: var(--warmwhite);
    border-radius: 22px;
    box-shadow: 0 16px 50px rgba(29, 26, 22, .25);
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ffa-picker-preview .ffa-picker-pop {
    background: #FFFFFF;
    border-radius: 22px;
    padding: 26px 28px;
    gap: 16px;
    box-shadow: 0 2px 14px rgba(44, 36, 24, .06);
}

.ffa-picker-pop-i {
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--warmwhite);
    background: var(--color-text-tertiary);
}
.ffa-picker-pop-i svg { width: 26px; height: 26px; }

.ffa-picker-pop-t {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.12;
    margin: 0;
}
.ffa-picker-pop-d {
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0;
}

/* The description line while /api/map/metric is in flight (js/map-picker.js
   lineHtml()). It stands where the preview card's dashed .ffa-ph box used to be
   — a 120px placeholder for a tiny map that was never built, so it rendered
   empty and the owner asked for it to go. When the tiny map IS built it gets its
   own task, its own markup and its own rule; nothing here is kept warm for it.
   The selector is named nowhere in this file on purpose: ffa/t4_map.php asserts
   its plain absence, so even a mention in prose would go red. */
.ffa-picker-pop-wait { color: var(--color-text-tertiary); }
@keyframes ffa-spin { to { transform: rotate(360deg) } }
.ffa-picker-pop-wait svg { animation: ffa-spin .9s linear infinite }
@media (prefers-reduced-motion: reduce) { .ffa-picker-pop-wait svg { animation: none } }

/* An index's "What it's for" and "How it's calculated" (js/map-picker.js
   aboutBlockHtml()). The label reuses .ffa-picker-cell-l below, so the card
   carries one micro-label type and no new colour; only the spacing under it and
   the paragraph's own type are new here. A measure's card renders neither. */
.ffa-picker-pop-about {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ffa-picker-pop-ab {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0;
}

.ffa-picker-pop-cells {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.ffa-picker-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ffa-picker-cell-l {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text-tertiary);
}
.ffa-picker-cell-v {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.ffa-picker-pop-go {
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--warmwhite);
    background: var(--ink);
    border-radius: 999px;
    padding: 13px 20px;
    text-align: center;
}
.ffa-picker-pop-go:hover { background: #423A30; }


/* ── The measure pill, the left half of the bar's control (src/applied-body.html) ──
   Inside .ffa-navbar now (the white pill is the bar's, above), so this half
   carries no ground, no shadow and no position of its own: a hairline on its
   right divides it from the address field. */

.ffa-picker-pill {
    position: static;
    transform: none;
    z-index: auto;
    box-shadow: none;
    background: none;
    padding: 0 12px 0 0;
    gap: 10px;
    border: 0;
    border-right: 1px solid rgba(44,36,24,.12);
    margin-right: 10px;
    flex: 0 1 auto;   /* may shrink: the field's 220px basis comes first (see .map-search) */
    max-width: 46%;
    display: flex;
    align-items: center;
    /* A <button> since round 3 (spec 2026-09-23 §3): the UA's border, colour, font,
       centring and cursor undone so it looks like the pill it replaced. */
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    font-family: 'DM Sans', sans-serif;
}

.ffa-picker-pill-i {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--warmwhite);
    background: var(--color-text-tertiary);
}
.ffa-picker-pill-i svg { width: 18px; height: 18px; }

.ffa-picker-pill-t {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* The "{topic} · {year}" sub-line: the bar has one line, so it is not shown at
   any width. js/map-picker.js still fills it (and its hidden flag); the name
   and the picker carry the same facts. */
.ffa-picker-pill-s { display: none; }

/* The caret: a 28×28 round span on the old Change pill's wash, decorative since
   round 3 — the pill itself is the button, and the contract's change string is
   the pill's title. */
.ffa-picker-pill-go {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    color: var(--ink);
    background: rgba(44, 36, 24, .08);
    border-radius: 999px;
    padding: 0;
}
.ffa-picker-pill-go svg { display: block; }
.ffa-picker-pill:hover .ffa-picker-pill-go { background: rgba(44, 36, 24, .16); }
.ffa-picker-pill:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; border-radius: 999px; }


/* ── The legend and the layers box, stacked bottom-right ── */

.ffa-map-cards {
    position: absolute;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    width: 300px;
    max-width: calc(100% - 48px);
    max-height: calc(100% - 48px);
    overflow: visible;   /* the wrapper scrolled until round 3, which clipped both cards' shadows; each card is its own scroll box now (the comment must not spell the old value: t4 regexes the block, comments included) */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

/* The card itself keeps every id and class _renderLegend() reaches for; only
   its placement moves into the wrapper above. Since round 3 it is its own scroll
   box that may shrink under the wrapper's cap (an element's overflow clips its
   children, never its own shadow): the About body below carries its own 20vh cap,
   so in the normal case only that body scrolls; a card the cap squeezes further
   scrolls as a whole instead of spilling out of its box. */
.ffa-map-cards .map-legend {
    position: static;
    bottom: auto;
    right: auto;
    min-width: 0;
    max-width: none;
    max-height: none;
    overflow-y: auto;
    flex: 0 1 auto;
    min-height: 0;
}

.legend-index-method {
    display: inline-block;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--accent);
    text-decoration: none;
}
.legend-index-method:hover { text-decoration: underline; }


/* ── The layers box ── */

.ffa-layers {
    flex: none;
    background: white;
    border-radius: var(--radius);
    box-shadow: 0 2px 16px rgba(0, 0, 0, .12);
    padding: 12px 8px 8px;
    font-family: 'DM Sans', sans-serif;
}

/* The same shape as the legend (round 3): the card is its own scroll box under the
   wrapper's cap, and its rows are capped and scroll under the head — the owner's
   own suggestion for the box. No display here: the box ships hidden and
   _buildOverlayPanel() un-hides it. */
.ffa-map-cards .ffa-layers { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
.ffa-map-cards .ffa-layers-body { max-height: 20vh; overflow-y: auto; }

/* The head is a <button> now (page/page.map.php:263), so the UA's own
   background, border, font and centred text all have to be undone before the
   row below can look like the card title it replaced. Same reset the legend's
   "About this measure" toggle does at .legend-about-toggle. */
.ffa-layers-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    padding: 0 8px 6px;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.ffa-layers-title {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
}

/* The count once the catalog lands, the shipped sentence before it. Second row
   of the flex, under the title, in the micro-label type .ffa-label uses
   (css/ffa.css:178) — the style the title itself carried before the head grew
   a second line. */
.ffa-layers-sub {
    flex-basis: 100%;
    order: 3;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
}

/* Two 10px strokes meeting in a point — a chevron with no glyph and no image,
   so it inherits the head's colour and needs no new one. Down when the body is
   closed, flipped up when it is open. */
.ffa-layers-chev {
    flex: none;
    width: 10px;
    height: 10px;
    margin-left: 8px;
    border-right: 2px solid var(--color-text-tertiary);
    border-bottom: 2px solid var(--color-text-tertiary);
    transform: rotate(45deg);
    transform-origin: 60% 60%;
    transition: transform .18s ease;
}

.ffa-layers-head[aria-expanded="true"] .ffa-layers-chev {
    transform: rotate(45deg) rotate(180deg);
}

.ffa-layers-body[hidden] { display: none; }

/* The .overlay-* rules above are white-on-dark — they were written for the old
   dark sidebar. Restated here in the legend's dark-on-white palette, and only
   the four things that carry color: the group label, the row, its count and the
   spinner. Everything else (layout, the swatch, the loading swap) still comes
   from the originals. */
.ffa-layers .overlay-section-body { padding-bottom: 0; }

.ffa-layers .overlay-group-label {
    color: var(--color-text-tertiary);
    padding: 10px 8px 4px;
}

.ffa-layers .overlay-toggle {
    color: var(--ink-soft);
    padding: 6px 8px;
    border-radius: 8px;
}
.ffa-layers .overlay-toggle:hover {
    background: rgba(44, 36, 24, .06);
    color: var(--ink);
}
.ffa-layers .overlay-toggle.active {
    background: rgba(44, 36, 24, .09);
    color: var(--ink);
}

.ffa-layers .overlay-count { color: var(--color-text-tertiary); }

.ffa-layers .overlay-spinner {
    border-color: rgba(44, 36, 24, .15);
    border-top-color: var(--terracotta);
}


/* ── The share control, under the zoom buttons ──
   A Leaflet control (js/map.js mounts #ffa-share topleft), so .leaflet-bar
   gives it the zoom stack's border, radius and shadow and it moves with the
   zoom stack wherever Leaflet puts it. The button is the zoom anchors' 30×30.
   The bubble sits to its right and is the only text. */
.ffa-share { position: relative; }
.ffa-share[hidden] { display: none; }

.ffa-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 2px;   /* the zoom anchors' own; 4px would show the bar's corners through */
    cursor: pointer;
    color: var(--ink);
    background: #FFFFFF;
    font-family: inherit;
}
.ffa-share-btn:hover { background: #F4F4F4; }
.ffa-share-btn svg { display: block; }

.ffa-share-toast {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    background: rgba(253, 251, 247, .95);
    border-radius: 999px;
    padding: 8px 14px;
    box-shadow: 0 4px 24px rgba(44, 36, 24, .14);
}
/* Empty until a copy: the span stays in the DOM so its role="status" text is
   announced when js/map-picker.js writes it. */
.ffa-share-toast:empty { display: none; }

/* ── The Layers button (phone only) and the Places & hazards sheet it opens ──
   ≥601px the box sits under the legend as before and this button is hidden.
   ≤600px the box leaves the bottom sheet (which then holds the legend alone) and
   opens from this button as a sheet over the map, with its rows open. */
.ffa-layers-ctl { position: relative; }
.ffa-layers-ctl[hidden] { display: none; }
.ffa-layers-ctl-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 2px; cursor: pointer; color: var(--ink); background: #FFFFFF; font-family: inherit; }
.ffa-layers-ctl-btn:hover { background: #F4F4F4; }
.ffa-layers-ctl-btn[aria-expanded="true"] { background: var(--ink); color: var(--warmwhite); }
@media (min-width: 601px) { .ffa-layers-ctl { display: none; } }

/* The sheet's own close (page/page.map.php #ffa-layers-done): the open sheet
   can cover the Layers button on a short screen, so it carries a Done of its
   own — a right-aligned pill at its top, 13px/600 on the 8% ink wash the
   caret and the old Change pill wear. Shown only while the sheet is open. */
.ffa-layers-done { display: none; }

@media (max-width: 600px) {
    .ffa-map-cards .ffa-layers { display: none; }
    .ffa-map-cards .ffa-layers.is-open {
        display: block; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1150;
        max-height: 60vh; overflow-y: auto;
    }
    .ffa-layers.is-open .ffa-layers-done {
        display: block; margin: 0 4px 8px auto; padding: 6px 14px;
        border: 0; border-radius: 999px; cursor: pointer;
        font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink);
        background: rgba(44, 36, 24, .08);
    }
    .ffa-layers.is-open .ffa-layers-done:hover { background: rgba(44, 36, 24, .16); }
}


/* ── The tract sheet's second bar: the county, same scale as the tract ── */

.panel-card-county {
    display: none;   /* off (owner's own edit, merged into round 3 on 2026-09-23); the rule's other declarations stay for the day it comes back */
    align-items: center;
    gap: 10px;
    margin: -8px 0 18px;
    font-size: 13px;
}
.panel-card-county-l {
    flex: none;
    color: var(--color-text-tertiary);
}
.panel-card-county-bar {
    position: relative;
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: rgba(44, 36, 24, .08);
}
.panel-card-county-mark {
    position: absolute;
    top: -2px;
    width: 3px;
    height: 12px;
    border-radius: 999px;
    background: #B5AC9C;
    transform: translateX(-1.5px);
}


/* ══════════════════════════════════════════════════════
   The two sections below the hero (src/map-body.html:64-98) — RETIRED
   ══════════════════════════════════════════════════════ */

/* Their markup came out of page/page.map.php (plan 2026-09-14 Task 2): the
   owner asked for a page that is the fullscreen map and nothing else. Nothing
   below is reached by any element on any page; the rules are kept,
   unreferenced, because each pass that touched this file was scoped to other
   rules (the 2026-09-14 pass to the footer-hide rule and the phone block, the
   2026-09-22 polish to the share button, which removed the band's one pill
   that was still reached); deleting them is its own small task, not a side
   effect of either. */

.ffa-map-sec { padding: 140px 0 120px; }

.ffa-map-sec-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}
.ffa-map-sec-head .ffa-h2 { max-width: 820px; }
.ffa-map-sec-head .ffa-lead { max-width: 660px; }

.ffa-map-steps { margin-top: 72px; }

.ffa-map-step {
    background: var(--sand);
    box-shadow: none;
    gap: 14px;
}
.ffa-map-step-n {
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -.04em;
    color: var(--accent);
    line-height: 1;
}
.ffa-map-step-h {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0;
}
.ffa-map-step .ffa-body { font-size: 17px; margin: 0; }

.ffa-map-share { padding: 120px 0; }

.ffa-map-share-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px;
    align-items: center;
}

.ffa-map-share-ph {
    height: 420px;
    border-radius: 32px;
    background: var(--ffa-card-dark);
    border-color: #4A443B;
    color: #B9AF9E;
}
.ffa-map-share-ph .ffa-ph-tag { background: var(--ffa-ink-dark); color: #B9AF9E; }
.ffa-map-share-ph .ffa-ph-cap { color: #B9AF9E; }

.ffa-map-share-body {
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-items: flex-start;
}


/* ── Narrower than the desktop artboard ── */

@media (max-width: 900px) {
    .ffa-map-sec { padding: 96px 0 80px; }
    .ffa-map-steps { margin-top: 48px; grid-template-columns: minmax(0, 1fr); }
    .ffa-map-share { padding: 80px 0; }
    .ffa-map-share-inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .ffa-map-share-ph { height: 260px; }
    .ffa-picker-search { grid-template-columns: minmax(0, 1fr); }
    .ffa-picker-folders { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Phone: the picker is a bottom sheet (src/pickerphone-body.html) ── */

@media (max-width: 600px) {
    /* The two-row bar (css/style.css .site-nav.site-nav--map at ≤600px): logo
       row 48 + row gap 8 + the control (a two-row card here, below: 6 + 34 +
       4 + 40 + 6 = 90) + bottom padding 10 + the 1px border = 157px. Measured
       at 375 wide in the 2026-09-23 browser review: 157. MEASURE again before
       changing any of those parts. */
    .ffa-map-body { --nav-h: 157px; }

    /* The owner's phone mock (2026-09-22, image 2): the measure on its own row
       over the address field, inside one rounded card. Side by side, the name
       was cut to "Media…" beside the field (the 2026-09-23 browser review). The
       pill loses its right hairline and takes the first row, the caret at its
       end; the field and Go take the second, full width. */
    .ffa-navbar { flex-wrap: wrap; height: auto; border-radius: 18px; padding: 6px; gap: 4px 0; }
    .ffa-picker-pill { max-width: none; width: 100%; border-right: 0; margin-right: 0; padding: 0 4px; }
    .ffa-picker-pill-t { flex: 1 1 auto; min-width: 0; }
    .ffa-picker-pill-go { margin-left: auto; }
    .map-search { flex-basis: 100%; }
    /* Until the first measure lands the pill is hidden; keep its row's height so the
       bar is 157px from the first paint and .map-page (calc(100dvh - --nav-h)) neither
       leaves a strip nor overlaps — a hidden row made the bar 119px for those seconds. */
    .ffa-navbar .ffa-picker-pill[hidden] { display: flex; visibility: hidden; }

    .ffa-picker-modal {
        left: 0;
        right: 0;
        bottom: 0;
        top: calc(var(--nav-h) + 8px);   /* the sheet starts under the two-row bar */
        transform: none;
        width: auto;
        max-height: none;
        border-radius: 22px 22px 0 0;
        padding: 12px 20px 20px;
        gap: 14px;
        background: #F2EDE4;
    }

    .ffa-picker-body { gap: 18px; }
    .ffa-picker-sbar { height: 46px; font-size: 16px; }
    .ffa-picker-input { font-size: 16px; }
    .ffa-picker-kbd { display: none; }
    .ffa-picker-done { padding: 10px 16px; }

    .ffa-picker-folders { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
    .ffa-picker-folder-box { width: 84px; height: 84px; border-radius: 22px; background: #FFFFFF; }
    .ffa-picker-folder-l { font-size: 13px; }

    /* Recents become a grouped table, the phone artboard's .group / .row */
    .ffa-picker-tiles {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        background: #FFFFFF;
        border-radius: 12px;
        overflow: hidden;
    }
    .ffa-picker-tile {
        border-radius: 0;
        box-shadow: none;
        border-bottom: 1px solid rgba(44, 36, 24, .08);
        min-height: 44px;
    }
    .ffa-picker-tile:last-child { border-bottom: 0; }
    .ffa-picker-tile-i { width: 34px; height: 34px; border-radius: 10px; }
    .ffa-picker-tile-i svg { width: 18px; height: 18px; }

    .ffa-picker-results { max-height: none; }

    /* ── The phone's bottom sheet — the 2026-09-14 review's one defect ──
       At 375×812 the legend card and the Layers box covered the whole map: the
       ≤768px block gives .ffa-map-cards left/right insets but leaves it
       max-height: calc(100% - 24px), which is the whole map area. Below 600px
       the cards become a short sheet pinned to the bottom edge instead. Since
       the /map-2 chrome (spec 2026-09-23 §A) that sheet holds the LEGEND
       ALONE: the Places & hazards box leaves it and opens from the Layers
       button in the map's left stack (the rules at .ffa-layers-ctl above).

       THE ARITHMETIC, since there is no browser here (the owner confirms on a
       phone at runbook §4). Everything below is measured from the top of the
       VIEWPORT. The measure pill and the address search are IN THE BAR now —
       the two-row nav (css/style.css .site-nav.site-nav--map at ≤600px):

         bar          y    0 — 157   logo + menu row 48, row gap 8, the
                                       control as a two-row card 90 (6 + the
                                       measure row 34 + 4 + the field row 40
                                       + 6), bottom padding 10, border 1
                                       (--nav-h: 157px above; .map-page
                                       starts at y 157; measured 157 in the
                                       2026-09-23 browser review)
         — nothing floats over the map's top: from y 157 to the top of the
           sheet is clear map, with the zoom / share / Layers stack at the
           top left on Leaflet's own 10px margin.

         sheet        bottom: 12, so its bottom edge is y 800.
           Its top edge is 812 - 12 - (its height), and its height is the
           SMALLER of what the legend actually needs and the 40vh cap:

             natural  ≈200 (legend, with the medians hidden below and the
                      About card collapsed — round 3 brought it back on the
                      phone), top edge y ≈600
             capped   40vh of 812 = 324.8px, so top edge y 475.2

           So the natural height is what sets the top edge today (200 < 324.8)
           and the cap is the guarantee for the days it is not — a long source
           line, a big-text setting, a legend with more rows.

         TARGET: the top edge at or below 58% of the viewport, i.e. y ≥ 0.58
         × 812 = 470.96, so that ≥470px of screen is map above the sheet.
         475.2 ≥ 470.96 — met in the capped worst case, and met with room
         (600) in the natural one. The cap stays 40vh (42vh misses the target
         by 12px: 812 - 12 - 341.04 = 458.96).

         NO HORIZONTAL OVERFLOW: every box on this page is positioned by insets,
         not by a width — the sheet and the open Layers sheet are left: 12 /
         right: 12 / width: auto, and the bar's control is width: min(720px,
         100%) of a full-width row. Nothing carries a min-width wider than the
         screen: the legend's own min-width: 240px is already undone by
         .ffa-map-cards .map-legend, and max-width: none below undoes the
         wrapper's calc(100% - 48px), which would otherwise clamp the sheet to
         327px and leave it off-centre. document.body.scrollWidth therefore
         equals innerWidth. */

    .ffa-map-cards {
        top: auto;
        bottom: 12px;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        max-height: 40vh;
        overflow: visible;   /* the legend card scrolls itself under the cap (round 3) */
        gap: 8px;
    }

    /* Room for the About body once the reader opens it (round 3, spec §4): its
       toggle flips aria-expanded (js/map.js). A browser without :has() keeps the
       40vh cap above and the legend card scrolls. On a phone the card is the ONE
       scroller — the two body caps from the desktop rules are undone here so there
       is no scroller inside a scroller; the Layers sheet (.is-open below) scrolls
       as one, as it did. */
    .ffa-map-cards:has(.legend-about-toggle[aria-expanded="true"]) { max-height: 60vh; }
    .ffa-map-cards .legend-about-body { max-height: none; overflow: visible; }
    .ffa-map-cards .ffa-layers-body { max-height: none; overflow: visible; }

    /* The tract panel is the whole screen on a phone (owner 2026-09-23, spec §5): over
       the two-row bar, fixed to the viewport so its sticky foot sits above the
       browser's own toolbar. The bar's pill and search do nothing useful while a
       tract is open, and the panel's header already carries Back and ×. z-index 1300:
       over the bar (css/style.css .site-nav.site-nav--map, 1200), under the picker
       (#ffa-picker, 3000). position: fixed escapes .map-page's overflow: hidden
       because .map-page carries no transform (the fact #ffa-picker relies on too). */
    .map-panel { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: auto; z-index: 1300; }

    /* The card order is the DOM's — the legend, then the Layers box, which is
       display: none at this width until the Layers button opens it as its own
       fixed sheet — and the wrapper is already a column, so nothing here
       re-orders anything. */

    /* Compact legend on a phone. The county's median values stay hidden — tapping
       a tract opens .map-panel, which carries them. The About card is BACK here
       since round 3 (spec 2026-09-23 §4): a phone had no other place to read what
       a measure is (the picker's preview card sits under the whole results list).
       It ships collapsed, so it costs the sheet one row until the reader opens it;
       open, the sheet grows to 60vh (the :has() rule above) and the card scrolls. */
    .ffa-map-cards .legend-context { display: none; }
}

/* ══════════════════════════════════════════════════════
   Privacy · Terms at the foot of the menu (slice L1, spec 2026-09-28-map-cutover §4.4)
   ══════════════════════════════════════════════════════ */

/* This page hides the site footer (the rule near the top of this file), so the footer's legal
   line moves to the bottom of the bar's menu: page/template.header.php prints it in map mode
   only, and only once the site is open. The menu's own rules are css/style.css's (.nav-menu,
   .nav-menu .nav-lang); this sets the one line under the EN/ES pills — the same hairline above
   it that the pills have, and the footer's small, quiet type. */
.nav-menu .nav-menu-legal { margin: 8px 0 0; padding: 10px 12px 4px; border-top: 1px solid rgba(44,36,24,.08); font-size: 12px; color: var(--ink-soft); }
.nav-menu .nav-menu-legal a { color: inherit; text-decoration: none; }
.nav-menu .nav-menu-legal a:hover { color: var(--ink); text-decoration: underline; }