.local-layout {
    padding: 1.5rem clamp(1rem, 4vw, 2.5rem);
    height: 100%;
}

.local-panels {
    display: grid;
    grid-template-columns: minmax(300px, 380px) 1fr;
    gap: 1.5rem;
    align-items: stretch;
    /* Fills the shell's central area; the map takes the remaining height. */
    height: 100%;
    min-height: 420px;
}

/* When the map is disabled, the controls take the full width. */
.local-layout--no-map .local-panels {
    grid-template-columns: minmax(0, 620px);
    justify-content: center;
}

.local-controls {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.25rem;
    background: var(--surface, rgba(34, 34, 34, 0.86));
    border: 1px solid var(--border, rgba(180, 178, 169, 0.28));
    border-radius: 0.9rem;
}

.local-header {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.local-title {
    margin: 0;
    font-size: 1.6rem;
}

.local-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-weight: 600;
}

.local-field select {
    padding: 0.6rem 0.7rem;
    border-radius: 0.6rem;
    border: 1px solid var(--border, rgba(180, 178, 169, 0.28));
    background: var(--surface-strong, rgba(28, 28, 28, 0.96));
    color: var(--text, #ece9df);
    font-size: 1rem;
}

.local-field select:disabled {
    opacity: 0.6;
}

/* Filterable combobox (replaces the native dropdown for long lists). */
.combobox {
    position: relative;
}

.combobox__native {
    display: none;
}

.combobox__input {
    width: 100%;
    padding: 0.6rem 0.7rem;
    border-radius: 0.6rem;
    border: 1px solid var(--border, rgba(180, 178, 169, 0.28));
    background: var(--surface-strong, rgba(28, 28, 28, 0.96));
    color: var(--text, #ece9df);
    font-size: 1rem;
}

.combobox__input:disabled {
    opacity: 0.6;
}

.combobox__list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 40;
    margin: 0;
    padding: 0.25rem;
    list-style: none;
    max-height: 50vh;
    overflow-y: auto;
    background: var(--surface-strong, rgba(28, 28, 28, 0.98));
    border: 1px solid var(--border, rgba(180, 178, 169, 0.28));
    border-radius: 0.6rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.combobox__list[hidden] {
    display: none;
}

.combobox__option {
    padding: 0.45rem 0.6rem;
    border-radius: 0.4rem;
    cursor: pointer;
}

.combobox__option:hover,
.combobox__option.is-active {
    background: rgba(184, 130, 58, 0.28);
}

.combobox__empty {
    padding: 0.45rem 0.6rem;
    color: var(--muted, #b7b3a8);
}

.combobox__clear {
    color: var(--muted, #b7b3a8);
    font-style: italic;
    border-bottom: 1px solid var(--border, rgba(180, 178, 169, 0.28));
    border-radius: 0;
    margin-bottom: 0.15rem;
}

.local-footer {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.local-footer .button {
    margin-top: 0;
    flex: 1 1 auto;
    text-decoration: none;
}

.button.ghost {
    background: transparent;
    border: 1px solid var(--border, rgba(180, 178, 169, 0.28));
    color: var(--text, #ece9df);
}

.local-map {
    border: 1px solid var(--border, rgba(180, 178, 169, 0.28));
    border-radius: 0.9rem;
    background: var(--surface, rgba(34, 34, 34, 0.86));
    overflow: hidden;
    min-height: 420px;
    display: flex;
}

#brMap {
    width: 100%;
    height: 100%;
    min-height: 420px;
    display: block;
}

.state-shape {
    fill: rgba(236, 233, 223, 0.06);
    stroke: rgba(183, 179, 168, 0.45);
    stroke-width: 0.75px;
    vector-effect: non-scaling-stroke;
    transition: fill 0.2s ease;
}

.state-shape:hover {
    fill: rgba(184, 130, 58, 0.28);
    cursor: pointer;
}

.muni-shape {
    fill: rgba(184, 130, 58, 0.12);
    stroke: rgba(183, 179, 168, 0.5);
    stroke-width: 0.6px;
    vector-effect: non-scaling-stroke;
    transition: fill 0.15s ease;
}

.muni-shape:hover {
    fill: rgba(184, 130, 58, 0.32);
    cursor: pointer;
}

.muni-shape.is-selected {
    fill: var(--accent, #b8823a);
    stroke: var(--text, #ece9df);
    stroke-width: 1.2px;
}

/* Floating tooltip that follows the pointer over the map. */
.map-tooltip {
    position: fixed;
    z-index: 60;
    pointer-events: none;
    padding: 0.28rem 0.55rem;
    border-radius: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text, #ece9df);
    background: rgba(20, 20, 20, 0.92);
    border: 1px solid var(--border, rgba(180, 178, 169, 0.35));
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    white-space: nowrap;
}

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

@media (max-width: 820px) {
    .local-panels {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .local-map {
        min-height: 340px;
    }

    #brMap {
        min-height: 340px;
    }
}