.access-map-page {
    display: grid;
    gap: 14px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.access-map-head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
}

.map-eyebrow {
    color: #a23b72;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.access-map-head h1 {
    margin-top: 4px;
    color: #17251c;
    font-family: "Lora", Georgia, serif;
    font-size: 36px;
    font-weight: 550;
    letter-spacing: 0;
    line-height: 1.08;
}

.map-intro {
    max-width: 770px;
    margin-top: 7px;
    color: #536159;
    font-size: 14px;
    line-height: 1.55;
}

.data-date {
    display: grid;
    justify-items: end;
    color: #59665e;
    font-size: 11px;
}

.data-date strong {
    margin-top: 2px;
    color: #203c2a;
    font-size: 14px;
}

.data-date small {
    max-width: 250px;
    margin-top: 4px;
    color: #8b5b18;
    text-align: right;
}

.map-workspace {
    display: grid;
    min-height: 78vh;
    overflow: hidden;
    border: 1px solid #c9d4cd;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 15px 38px rgba(31, 54, 39, .12);
}

.map-controls {
    z-index: 3;
    overflow-y: auto;
    border-bottom: 1px solid #d8e0dc;
    background: #fff;
}

.control-band {
    padding: 14px;
}

.control-band + .control-band {
    border-top: 1px solid #e2e8e4;
}

.control-label {
    display: block;
    margin-bottom: 7px;
    color: #637068;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.map-select,
.map-input {
    width: 100%;
    min-height: 44px;
    border: 1px solid #bfcac3;
    border-radius: 6px;
    background: #fff;
    padding: 8px 10px;
    color: #17251c;
    font-size: 14px;
}

.map-select:focus,
.map-input:focus {
    border-color: #247449;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(36, 116, 73, .12);
}

.place-combobox {
    position: relative;
}

.place-suggestions {
    position: absolute;
    top: calc(100% + 3px);
    right: 0;
    left: 0;
    z-index: 20;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid #7e9085;
    border-radius: 6px;
    background: #fff;
    padding: 3px;
    box-shadow: 0 12px 28px rgba(23, 37, 28, .2);
    list-style: none;
}

.place-suggestions[hidden] {
    display: none;
}

.place-suggestions li {
    display: grid;
    gap: 2px;
    border-radius: 4px;
    padding: 9px 10px;
    color: #243229;
    cursor: pointer;
}

.place-suggestions li:hover,
.place-suggestions li[aria-selected="true"] {
    background: #e3f0e7;
    outline: 2px solid #075ea8;
    outline-offset: -2px;
}

.place-suggestions strong {
    font-size: 13px;
}

.place-suggestions span {
    color: #5b6a61;
    font-size: 11px;
}

.search-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 7px;
}

.map-command {
    min-height: 42px;
    border: 1px solid #aebcb3;
    border-radius: 6px;
    background: #fff;
    color: #35513f;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.map-command:hover {
    background: #edf2ee;
}

.map-command.primary {
    border-color: #245f3a;
    background: #245f3a;
    color: #fff;
}

.map-command.primary:hover {
    background: #194c2d;
}

.mode-control {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
    border: 1px solid #bfcac3;
    border-radius: 6px;
}

.mode-control button {
    min-height: 42px;
    border: 0;
    border-right: 1px solid #d8e0dc;
    background: #fff;
    color: #49574e;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
}

.mode-control button:last-child {
    border-right: 0;
}

.mode-control button.active {
    background: #245f3a;
    color: #fff;
}

.toggle-list {
    display: grid;
    gap: 2px;
}

.toggle-row {
    display: flex;
    min-height: 34px;
    align-items: center;
    gap: 9px;
    color: #35433a;
    font-size: 13px;
}

.toggle-row input {
    width: 16px;
    height: 16px;
    accent-color: #247449;
}

.vehicle-adjust-toggle {
    margin-top: 10px;
    border-top: 1px solid #d8e0dc;
    padding-top: 9px;
    font-weight: 800;
}

.control-note {
    margin-top: 8px;
    color: #68766d;
    font-size: 12px;
    line-height: 1.45;
}

.context-explanation {
    margin-top: 9px;
    border-left: 3px solid #a23b72;
    background: #fcf4f8;
    padding: 8px 9px;
    color: #674457;
    font-size: 12px;
    line-height: 1.45;
}

.context-explanation-text {
    margin: 0;
}

/* Says which Census geography the active layer is drawn at. Set apart from the
   description so it reads as provenance rather than more prose. */
.context-resolution {
    margin: 6px 0 0;
    border-top: 1px solid rgba(162, 59, 114, .22);
    padding-top: 6px;
    color: #7a5468;
    font-size: 11px;
    font-weight: 600;
}

.population-summary {
    background: #f7faf8;
}

.summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.scenario-result {
    margin-top: 12px;
    border-top: 1px solid #d8e0dc;
    padding-top: 11px;
}

.scenario-result p,
.scenario-loading {
    margin: 5px 0 0;
    color: #5f6d64;
    font-size: 12px;
}

.impact-heading {
    margin-top: 7px;
    border-top: 1px solid #d8e0dc;
    padding-top: 7px;
}

.summary-grid div {
    min-width: 0;
}

.summary-grid strong {
    display: block;
    color: #203c2a;
    font-size: 17px;
    line-height: 1.2;
}

.summary-grid span {
    display: block;
    margin-top: 3px;
    color: #69766e;
    font-size: 12px;
    line-height: 1.3;
}

.legend {
    display: grid;
    gap: 7px;
    margin-top: 9px;
}

.legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #59665e;
    font-size: 12px;
    line-height: 1.35;
}

.legend-swatch {
    width: 19px;
    height: 10px;
    flex: 0 0 auto;
    border: 1px solid rgba(0, 0, 0, .22);
    border-radius: 2px;
    background: color-mix(in srgb, var(--legend-color, #247449) 38%, #eef1ef);
}

.context-swatch {
    background: color-mix(in srgb, var(--legend-color) 66%, #eef1ef);
}

.legend-marker {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #6b7280;
    box-shadow: 0 0 0 1px rgba(31, 41, 55, .35);
}

.snap-marker {
    background: #2563a6;
}

.wic-marker {
    border-color: #b83280;
    background: #6b7280;
}

.snap-wic-marker {
    border-color: #b83280;
    background: #2563a6;
}

.other-marker {
    background: #6b7280;
}

.legend-ring {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    border: 2px solid #b45309;
    border-radius: 50%;
}

.lila-swatch {
    border-color: #8c6512;
    background: rgba(240, 181, 55, .34);
}

.map-stage {
    position: relative;
    min-height: 64vh;
    background: #e7ece8;
}

#co-access-map {
    position: absolute;
    inset: 0;
}

.map-loading {
    position: absolute;
    top: 12px;
    left: 50%;
    z-index: 5;
    transform: translateX(-50%);
    border: 1px solid #c9d4cd;
    border-radius: 6px;
    background: rgba(255, 255, 255, .96);
    padding: 8px 11px;
    color: #35433a;
    font-size: 12px;
    box-shadow: 0 8px 20px rgba(31, 54, 39, .14);
}

.map-loading[hidden] {
    display: none;
}

.assessment-panel {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 5;
    width: min(380px, calc(100% - 24px));
    max-height: 56vh;
    overflow: auto;
    border: 1px solid #bfcac3;
    border-radius: 8px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 16px 36px rgba(31, 54, 39, .22);
}

.assessment-panel[hidden] {
    display: none;
}

.assessment-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 14px 10px;
}

.assessment-kicker {
    color: #6c786f;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.assessment-title {
    margin-top: 3px;
    color: #17251c;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
}

.assessment-close {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: #536159;
    font-size: 22px;
    cursor: pointer;
}

.assessment-body {
    padding: 0 14px 14px;
}

.assessment-summary {
    border-left: 4px solid #247449;
    background: #f1f7f3;
    padding: 10px;
    color: #35433a;
    font-size: 13px;
    line-height: 1.5;
}

.assessment-summary.uncovered {
    border-color: #bc4b31;
    background: #fff5f1;
}

.assessment-summary.unavailable {
    border-color: #8b6b2d;
    background: #fff9e9;
}

.assessment-notice {
    margin-top: 8px;
}

.assessment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

.assessment-chip {
    border-radius: 999px;
    background: #edf1ee;
    padding: 4px 7px;
    color: #425047;
    font-size: 12px;
    font-weight: 750;
}

.store-results {
    display: grid;
    gap: 7px;
    margin-top: 11px;
}

.result-store {
    border-top: 1px solid #e1e7e3;
    padding-top: 8px;
}

.result-store strong {
    display: block;
    color: #203c2a;
    font-size: 13px;
}

.result-store span,
.result-store a {
    display: block;
    color: #66736a;
    font-size: 12px;
    line-height: 1.4;
}

.store-result-title,
.store-result-line,
.store-result-link {
    display: block;
}

.store-result-link + .store-result-link {
    margin-top: 3px;
}

.qualification-line {
    color: #1f6038 !important;
    font-weight: 800;
}

.warning-line {
    color: #96351f !important;
}

.result-store a {
    color: #1769aa;
    text-decoration: none;
}

.assessment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 11px;
}

.save-consent {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 9px;
    width: 100%;
    margin-bottom: 4px;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    background: #f7fafc;
    padding: 11px;
    color: #3f4f45;
    font-size: 12px;
    line-height: 1.5;
}

.save-consent input {
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.save-consent a {
    color: #075ea8;
    font-weight: 700;
    text-decoration: underline;
}

.assessment-actions button:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.small-command {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    border: 1px solid #aebcb3;
    border-radius: 6px;
    background: #fff;
    padding: 0 10px;
    color: #285038;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.small-command.primary {
    border-color: #245f3a;
    background: #245f3a;
    color: #fff;
}

.map-empty {
    position: absolute;
    inset: 20px;
    z-index: 6;
    display: grid;
    place-items: center;
    border: 1px dashed #aebcb3;
    border-radius: 8px;
    background: rgba(255, 255, 255, .94);
    padding: 24px;
    text-align: center;
}

.map-empty h2 {
    color: #17251c;
    font-size: 20px;
}

.map-empty p {
    margin-top: 6px;
    color: #536159;
    font-size: 13px;
}

.map-methods {
    border-top: 1px solid #d8e0dc;
    padding-top: 10px;
    color: #5f6d64;
    font-size: 12px;
    line-height: 1.55;
}

.map-methods summary {
    cursor: pointer;
    color: #245f3a;
    font-weight: 800;
}

.map-methods p {
    margin-top: 8px;
}

.map-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-top: 1px solid #d8e0dc;
    padding: 18px 2px 4px;
}

.map-contact strong {
    display: block;
    color: #203c2a;
    font-size: 15px;
}

.map-contact span {
    display: block;
    margin-top: 3px;
    color: #5f6d64;
    font-size: 12px;
}

.map-contact a {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    border-radius: 6px;
    background: #245f3a;
    padding: 0 14px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.map-contact a:hover {
    background: #194c2d;
}

.accessible-store-list {
    border: 1px solid #c9d4cd;
    border-radius: 8px;
    background: #fff;
    padding: 18px;
}

.accessible-store-list[hidden] {
    display: none;
}

.accessible-store-list > header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.accessible-store-list h2 {
    margin-top: 3px;
    color: #17251c;
    font-size: 22px;
}

.store-list-status {
    margin-top: 10px;
    color: #4f5f55;
    font-weight: 750;
}

.store-list-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 1px;
    margin-top: 12px;
    border: 1px solid #d8e0dc;
    background: #d8e0dc;
}

.store-list-item {
    min-width: 0;
    background: #fff;
    padding: 13px;
}

.store-list-item .result-store {
    border: 0;
    padding: 0;
}

.store-list-item .small-command {
    margin-top: 9px;
}

.store-list-limit {
    padding: 12px;
    background: #fff9e9;
    color: #684f1f;
}

.maplibregl-popup-content {
    max-width: 285px;
    border-radius: 7px;
    padding: 12px;
}

.popup-title {
    color: #203c2a;
    font-size: 14px;
    font-weight: 800;
}

.popup-line {
    margin-top: 3px;
    color: #59665e;
    font-size: 12px;
    line-height: 1.4;
}

.popup-link {
    display: inline-block;
    margin-top: 7px;
    color: #1769aa;
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
}

.store-popup .popup-link {
    display: block;
}

.high-contrast-map .legend-swatch,
.high-contrast-map .legend-marker,
.high-contrast-map .legend-ring {
    border-width: 3px;
    border-color: #111827;
}

@media (min-width: 1050px) {
    .map-workspace {
        grid-template-columns: 304px minmax(0, 1fr);
    }

    .map-controls {
        max-height: 78vh;
        border-right: 1px solid #d8e0dc;
        border-bottom: 0;
    }
}

@media (max-width: 1049px) {
    .map-controls {
        max-height: none;
        overflow: visible;
    }

    .map-stage {
        min-height: 58vh;
    }
}

@media (max-width: 680px) {
    .access-map-head {
        align-items: start;
    }

    .data-date {
        justify-items: start;
    }

    .data-date small {
        text-align: left;
    }

    .access-map-head h1 {
        font-size: 30px;
    }

    .map-stage {
        min-height: 60vh;
    }

    .map-select,
    .map-input {
        font-size: 16px;
    }

    .assessment-panel {
        right: 8px;
        bottom: 8px;
        width: calc(100% - 16px);
        max-height: 50vh;
    }

    .maplibregl-popup {
        max-width: calc(100vw - 24px) !important;
    }
}

@media (forced-colors: active) {
    .legend-swatch,
    .legend-marker,
    .legend-ring {
        forced-color-adjust: none;
        border-color: CanvasText;
    }
}

/* ---------------------------------------------------------------------------
   Store popup (v8.8)
   The map JS emits .store-popup / .popup-* markup; none of it had styles
   before this release, so popups rendered as unspaced default blocks.
   --------------------------------------------------------------------------- */

.maplibregl-popup-content {
    width: min(340px, calc(100vw - 40px));
    border: 1px solid #c9d4cd;
    border-radius: 10px;
    background: #fff;
    padding: 0;
    box-shadow: 0 14px 34px rgba(31, 54, 39, .20);
    overflow: hidden;
}

.maplibregl-popup-close-button {
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: #536159;
    font-size: 20px;
    line-height: 1;
}

.maplibregl-popup-close-button:hover {
    background: #edf2ee;
    color: #17251c;
}

.maplibregl-popup-close-button:focus-visible {
    outline: 2px solid #245f3a;
    outline-offset: 1px;
}

.store-popup {
    display: grid;
    gap: 10px;
    padding: 13px 14px 14px;
    color: #35433a;
    font-size: 13px;
    line-height: 1.5;
}

.popup-header {
    display: grid;
    gap: 3px;
    padding-right: 26px;
}

.popup-title {
    display: block;
    color: #17251c;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.popup-address {
    display: block;
    color: #59665e;
    font-size: 12px;
    line-height: 1.45;
}

.popup-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
}

.popup-badge {
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .02em;
}

.popup-badge-snap {
    background: #e4edf7;
    color: #1b4a7a;
}

.popup-badge-wic {
    background: #f8e6f0;
    color: #8a2560;
}

.popup-access-status {
    border-left: 3px solid #245f3a;
    border-radius: 0;
    background: #f1f7f3;
    padding: 7px 10px;
    color: #21402c;
    font-size: 12px;
    line-height: 1.45;
}

.popup-hours {
    display: grid;
    gap: 2px;
    border: 1px solid #dfe6e1;
    border-radius: 8px;
    background: #fafcfb;
    padding: 8px 10px;
}

.popup-hours strong {
    color: #4a5750;
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
}

.popup-hours span {
    color: #17251c;
    font-size: 13px;
    line-height: 1.45;
}

.popup-hours small {
    margin-top: 2px;
    color: #8a4708;
    font-size: 12px;
    line-height: 1.4;
}

.popup-hours.is-limited {
    border-color: #e2c9a6;
    background: #fdf7ee;
}

.popup-impact {
    display: grid;
    gap: 1px;
    border: 1px solid #dfe6e1;
    border-radius: 8px;
    background: #fafcfb;
    padding: 8px 10px;
}

.popup-impact strong {
    color: #17251c;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.15;
}

.popup-impact span {
    color: #59665e;
    font-size: 12px;
    line-height: 1.4;
}

.popup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.popup-action {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    border: 1px solid #aebcb3;
    border-radius: 6px;
    padding: 0 11px;
    color: #285038;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
}

.popup-action:hover {
    border-color: #245f3a;
    background: #edf2ee;
}

.popup-action:focus-visible {
    outline: 2px solid #245f3a;
    outline-offset: 1px;
}

.popup-details {
    border-top: 1px solid #e6ebe8;
    padding-top: 9px;
}

.popup-details > summary {
    color: #245f3a;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}

.popup-details > summary::-webkit-details-marker {
    display: none;
}

.popup-details > summary::before {
    content: "\25B8";
    display: inline-block;
    margin-right: 6px;
    transition: transform .15s ease;
}

.popup-details[open] > summary::before {
    transform: rotate(90deg);
}

.popup-details > summary:focus-visible {
    outline: 2px solid #245f3a;
    outline-offset: 2px;
}

.popup-details-body {
    display: grid;
    gap: 4px;
    margin-top: 8px;
}

.popup-line {
    display: block;
    color: #59665e;
    font-size: 12px;
    line-height: 1.45;
}

.popup-line.impact-heading {
    margin-top: 5px;
    color: #35433a;
}

.popup-line.impact-heading strong {
    color: #17251c;
    font-weight: 500;
}

.popup-link {
    color: #1769aa;
    font-size: 12px;
    text-decoration: none;
}

.popup-link:hover {
    text-decoration: underline;
}

.high-contrast-map .maplibregl-popup-content {
    border: 2px solid #111827;
    box-shadow: 0 14px 34px rgba(17, 24, 39, .34);
}

.high-contrast-map .store-popup,
.high-contrast-map .popup-address,
.high-contrast-map .popup-line,
.high-contrast-map .popup-impact span,
.high-contrast-map .popup-hours strong {
    color: #1f2937;
}

.high-contrast-map .popup-access-status {
    border-left-color: #14532d;
    background: #e8f2ea;
    color: #14311f;
}

.high-contrast-map .popup-hours,
.high-contrast-map .popup-impact {
    border-color: #9aa8a0;
}

.high-contrast-map .popup-hours.is-limited {
    border-color: #8a4708;
    background: #fdf1e2;
}

@media (max-width: 480px) {
    .maplibregl-popup-content {
        width: min(320px, calc(100vw - 28px));
    }

    .store-popup {
        padding: 12px 12px 13px;
    }
}