.dallas-map-viewer {
    --dmap-ink: #24364b;
    --dmap-muted: #626b72;
    --dmap-line: #d8d4cc;
    --dmap-paper: #fbfaf7;
    --dmap-navy: #315b82;
    --dmap-orange: #c9793c;
    margin: 38px 0 0;
    padding: 26px;
    border: 1px solid #e5e0d7;
    border-radius: 5px;
    background: #f8f6f2;
    color: var(--dmap-ink);
}
.dallas-map-viewer--detail { margin-top: 30px; }
.dallas-map-viewer__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.dallas-map-viewer__eyebrow, .dallas-map-card__eyebrow {
    margin: 0 0 5px;
    color: #776c5f;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.dallas-map-viewer h2 { margin: 0 0 8px; color: #253952; }
.dallas-map-viewer__intro { max-width: 650px; margin: 0; color: #5c646a; font-size: .91rem; }
.dallas-map-viewer__controls {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 0;
    border-top: 1px solid var(--dmap-line);
    border-bottom: 1px solid var(--dmap-line);
}
.dallas-map-measures { display: flex; flex-wrap: wrap; gap: 10px 18px; min-width: 0; margin: 0; padding: 0; border: 0; }
.dallas-map-measures legend, .dallas-map-picker label {
    display: block;
    width: 100%;
    margin: 0 0 6px;
    color: #44515b;
    font-size: .76rem;
    font-weight: 700;
}
.dallas-map-measures label { display: inline-flex; align-items: flex-start; gap: 7px; color: #35434e; font-size: .83rem; line-height: 1.35; cursor: pointer; }
.dallas-map-measures input { accent-color: #315b82; margin: .16em 0 0; }
.dallas-map-picker { flex: 0 1 280px; min-width: 205px; }
.dallas-map-picker select { width: 100%; min-height: 42px; padding: 8px 30px 8px 10px; border: 1px solid #bcb7ae; border-radius: 3px; color: #263848; background: #fffefa; font: inherit; font-size: .83rem; }
.dallas-map-picker select:focus-visible, .dallas-map-measures input:focus-visible { outline: 3px solid #315b82; outline-offset: 2px; }
.dallas-map-viewer__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 270px); gap: 16px; margin-top: 16px; }
.dallas-map-canvas {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    border: 1px solid #d4d0c8;
    background: #eeece7;
    isolation: isolate;
}
.dallas-map-viewer--detail .dallas-map-canvas { height: 340px; }
.dallas-map-loading { position: absolute; inset: 0; z-index: 700; display: grid; place-items: center; color: #44515b; background: #eeece7; font-size: .95rem; pointer-events: none; }
.dallas-map-loading[hidden] { display: none; }
.dallas-map-viewer--detail .dallas-map-viewer__body { grid-template-columns: 1fr; }
.dallas-map-detail-caption { margin: 9px 0 0; font-size: .85rem; color: #5c646a; }
.dallas-map-geometry-pane { transition: opacity 300ms ease; }
.dallas-map-card {
    align-self: stretch;
    min-height: 200px;
    padding: 17px 16px;
    border: 1px solid #ded9d0;
    background: var(--dmap-paper);
}
.dallas-map-card h3 { margin: 0 0 11px; font-family: var(--font-serif, Georgia, serif); font-size: 1.17rem; font-weight: 500; line-height: 1.3; color: #253952; overflow-wrap: anywhere; }
.dallas-map-card__content { color: #46525b; font-size: .84rem; line-height: 1.5; }
.dallas-map-card__content p { margin: 0 0 9px; }
.dallas-map-card__content dl { display: grid; grid-template-columns: minmax(0, .8fr) 1.2fr; gap: 5px 10px; margin: 0; }
.dallas-map-card__content dt { color: #6b6a64; }
.dallas-map-card__content dd { margin: 0; color: #263848; font-weight: 600; overflow-wrap: anywhere; }
.dallas-map-card__content dt:nth-child(3),
.dallas-map-card__content dd:nth-child(4) { grid-column: 1 / -1; }
.dallas-map-card__content ul { margin: 8px 0 0; padding-left: 18px; }
.dallas-map-card__content li { margin: 0 0 3px; overflow-wrap: anywhere; }
.dallas-map-card__caption { margin: 10px 0 0; color: #74716b; font-size: .72rem; line-height: 1.4; }
.dallas-map-legend { margin-top: 17px; padding-top: 12px; border-top: 1px solid var(--dmap-line); }
.dallas-map-legend[hidden] { display: none; }
.dallas-map-legend__title { margin: 0 0 8px; color: #45515a; font-size: .75rem; font-weight: 700; }
.dallas-map-legend__steps { display: grid; gap: 8px; margin: 9px 0 0; padding: 0; list-style: none; }
.dallas-map-legend__step { display: grid; grid-template-columns: 13px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-width: 0; color: #59656c; font-size: .72rem; line-height: 1.35; }
.dallas-map-legend__count { color: #263848; font-weight: 600; font-variant-numeric: tabular-nums; }
.dallas-map-legend__swatch { flex: 0 0 13px; width: 13px; height: 13px; border: 1px solid rgba(36, 54, 75, .2); background: #315b82; }
.dallas-map-legend__note { margin: 7px 0 0; color: #686b6a; font-size: .7rem; }
.dallas-map-status, .dallas-map-attribution { margin: 9px 0 0; color: #686d70; font-size: .74rem; line-height: 1.45; }
.dallas-map-status:empty { display: none; }
.dallas-map-status[data-state="error"] { padding: 10px 12px; border-left: 3px solid #8b6e55; background: #f0ede7; color: #414c53; }
.dallas-map-attribution a { color: #354e68; }
.dallas-map-directory { margin-top: 16px; border-top: 1px solid var(--dmap-line); padding-top: 13px; }
.dallas-map-directory > summary, .dallas-map-directory__group > summary { color: #344b61; cursor: pointer; font-size: .87rem; font-weight: 600; }
.dallas-map-directory__groups { display: grid; gap: 9px; margin-top: 12px; }
.dallas-map-directory__group { padding: 10px 12px; border: 1px solid #e1ddd5; background: #fbfaf7; }
.dallas-map-directory__group summary span { margin-left: 5px; color: #71716d; font-size: .75rem; font-weight: 400; }
.dallas-map-directory__group ul { columns: 2; column-gap: 30px; max-height: 440px; overflow-y: auto; margin: 10px 0 0; padding-left: 19px; }
.dallas-map-directory__group li { break-inside: avoid; margin: 0 0 5px; font-size: .79rem; }
.dallas-map-directory__group a { overflow-wrap: anywhere; }
.dallas-map-viewer .leaflet-container { font: inherit; background: #eeece7; }
.dallas-map-viewer .leaflet-control-attribution { font-size: 10px; }
.dallas-map-popup { min-width: 190px; max-width: 275px; color: #334450; font: 13px/1.45 var(--font-sans, sans-serif); }
.dallas-map-popup strong { display: block; margin-bottom: 5px; color: #24384d; font-size: 14px; }
.dallas-map-popup p { margin: 4px 0; }
.dallas-map-popup ul { margin: 4px 0 0; padding-left: 18px; }
.dallas-map-popup li { overflow-wrap: anywhere; }
.dallas-map-viewer :focus-visible { outline: 3px solid #315b82; outline-offset: 2px; }
@media (max-width: 760px) {
    .dallas-map-viewer { padding: 18px; margin-top: 30px; }
    .dallas-map-viewer__body { grid-template-columns: 1fr; }
    .dallas-map-canvas { height: 500px; }
    .dallas-map-viewer--detail .dallas-map-canvas { height: 340px; }
    .dallas-map-card { min-height: 0; }
    .dallas-map-viewer__controls { align-items: stretch; flex-direction: column; }
    .dallas-map-picker { flex-basis: auto; width: 100%; }
}
@media (max-width: 480px) {
    .dallas-map-viewer { margin-right: -2px; margin-left: -2px; padding: 14px; }
    .dallas-map-canvas { height: 500px; }
    .dallas-map-viewer--detail .dallas-map-canvas { height: 340px; }
    .dallas-map-measures { display: grid; gap: 9px; }
    .dallas-map-directory__group ul { columns: 1; }
}
