/* District choices and their live board share one decision surface. */
.na-page.choosing-district .na-table-surface{display:block}
.na-page.choosing-district .na-city-drawer{display:none}
.na-district-layout{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(280px,.9fr);gap:24px;align-items:start}
.na-district-map{min-width:0;position:sticky;top:calc(var(--na-toolbar-space,64px) + 12px)}
.na-district-controls{min-width:0}
.na-district-controls>.na-button-row{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px}
.na-district-controls .na-target-button{width:100%;min-height:48px;padding:12px 14px;text-align:left;white-space:normal;font-size:15px;line-height:1.45}
.na-district-map .na-scroll-hint{display:none}
.na-district-map .na-board-note{display:none}
@media(max-width:900px){
 .na-district-layout{grid-template-columns:1fr;gap:10px}
 .na-district-map{position:static}
 .na-district-controls>.na-button-row{grid-template-columns:repeat(2,minmax(0,1fr))}
 .na-district-controls .na-target-button{padding:12px;font-size:14px}
}
@media(max-width:420px){
 .na-district-controls>.na-button-row{grid-template-columns:1fr}
}

/* Keep the live map readable at its own scale instead of miniaturizing it. */
.na-page .na-city[id]{scroll-margin-top:calc(var(--na-toolbar-space,64px) + 12px)}
.na-page .na-city .na-board{width:100%;min-width:1000px;height:auto;max-height:none}
.na-page .na-city .na-board-scroll{max-height:min(68dvh,740px);overflow:auto;background:transparent;border:1px solid #71807980;scrollbar-width:auto;scrollbar-gutter:stable;overscroll-behavior:contain}
.na-page .na-city .na-board-scroll:focus-visible{outline:2px solid var(--na-pink);outline-offset:3px}
.na-board-ground{fill:#071017;fill-opacity:.14;stroke:#53696a;stroke-opacity:.5;stroke-width:1}
.na-city .na-sector{fill:transparent}
.na-city .na-district.dark .na-sector{fill:transparent}
.na-city .na-district-image{opacity:1}
.na-city .na-district.target.dark .na-district-image{filter:none}
.na-city .na-district.target .na-sector,.na-city .na-district.target .na-sector-outline{stroke:#edf3c8;stroke-width:6;stroke-dasharray:5 5}
.na-city .na-district.target:hover .na-sector-outline,.na-city .na-district.target:focus-visible .na-sector-outline{stroke:var(--na-pink);stroke-width:8;stroke-dasharray:none}
.na-city .na-district-heading{fill:#071018;fill-opacity:.66}
.na-city .na-district-info{fill:#071018;fill-opacity:.72}
.na-city .na-district-name{font-size:26px;fill:#fffdf0;stroke:#071018;stroke-width:2.5px;paint-order:stroke fill;letter-spacing:-.35px}
.na-city .na-district-number{font-size:22px;stroke:#071018;stroke-width:2px;paint-order:stroke fill}
.na-city .na-district-tier{font-size:16px;fill:#eef1e3;stroke:#071018;stroke-width:2px;paint-order:stroke fill}
.na-city .na-district-resource{font-size:26px;fill:#fffdf0;stroke:#071018;stroke-width:2px;paint-order:stroke fill}
.na-city .na-district-condition{font-size:18px;fill:#dbe5cc;stroke:#071018;stroke-width:2px;paint-order:stroke fill}
.na-city .na-district-token{color:#f1f4e8;filter:drop-shadow(0 1px 2px #000)}
.na-city .na-exit{stroke:#d2dbb1;stroke-width:3.5;opacity:.95}
.na-page .na-map-controls{gap:14px;padding-block:2px 12px}
.na-page .na-map-caption{max-width:none;font-size:13px;line-height:1.5;color:#d6dfce}
.na-page .na-map-expand{min-height:46px;padding:11px 15px;font-size:14px;background:#13202de6;border-color:#93a496;color:#f4f3e6}
.na-page .na-city .na-map-help{font-size:13px;color:#c3d0bd}
.na-page .na-city.is-expanded .na-board{min-width:1200px}
.na-page .na-city.is-expanded .na-board-scroll{max-height:min(78dvh,900px)}
@media(min-width:1120px){
 .na-page:not(.resolving-city):not(.choosing-district) .na-table-surface{grid-template-columns:minmax(360px,.9fr) minmax(640px,1.6fr);gap:24px}
}
@media(min-width:901px) and (max-width:1119px){
 .na-page:not(.resolving-city):not(.choosing-district) .na-table-surface{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:900px){
 .na-page .na-city .na-board-scroll{max-height:62dvh}
 .na-page .na-city .na-board{min-width:1000px}
 .na-page .na-city.is-expanded .na-board{min-width:1200px}
 .na-page .na-city.is-expanded .na-board-scroll{max-height:76dvh}
 .na-page .na-map-caption{font-size:12px}
}