/* The overview always fits its panel. Only the enlarged graph has an internal
   scroll area; district art sits behind the information in both presentations. */
.na-page .na-city{padding-top:8px;background:transparent;container-type:inline-size}
/* Inset the drawer's content once; the same city can move into an already
   padded decision panel without carrying the drawer's extra spacing. */
.na-page .na-city-drawer{--na-city-inset:clamp(12px,1.4vw,20px)}
.na-page .na-city-drawer>summary{padding-inline:var(--na-city-inset)}
.na-page .na-city-drawer>.na-city{padding-inline:var(--na-city-inset)}
.na-page .na-city-drawer>.na-tracks{padding:16px var(--na-city-inset) var(--na-city-inset)}
/* Give offer comparisons the table width; district resolution still brings the
   map beside its controls through the existing decision layout. */
.na-page:not(.resolving-city):not(.choosing-district) .na-table-surface{grid-template-columns:minmax(0,1fr)}
.na-page .na-city .na-board{display:block;width:100%;max-width:1312px;min-width:0;height:auto;max-height:none;margin-inline:auto}
.na-page .na-city .na-board-scroll{max-height:none;overflow:visible;background:transparent;border:0;scrollbar-gutter:auto}
.na-page .na-map-controls{gap:10px;padding:0 0 8px}
.na-page .na-map-caption{font-size:12px;line-height:1.4;color:#c2ccc2}
.na-page .na-map-expand{min-height:40px;padding:8px 12px;font-size:12px;background:#12212bda;border-color:#5c7179}
.na-city .na-sector{fill:#071016;stroke-width:1.5}
.na-city .na-sector-outline{stroke-width:1.5}
.na-city .na-district-image{opacity:1;filter:none}
.na-city .na-district.dark .na-district-image{filter:saturate(.6)}
.na-city .na-district-name{font:650 21px/1 var(--na-font);fill:#f7f8ef;stroke:#071016;stroke-width:1.4px;paint-order:stroke fill;letter-spacing:-.25px}
.na-city .na-district-number{font:650 17px var(--na-mono);stroke:none}
.na-city .na-district-tier{font:550 13px var(--na-mono);fill:#c4d0cd;stroke:none;letter-spacing:0}
.na-city .na-district-resource{font:700 23px var(--na-font);fill:#f8f8eb;stroke:none}
.na-city .na-district-output.blocked{opacity:.75}
.na-city .na-district-condition{font:500 13px var(--na-font);fill:#d0d9d0;stroke:none;letter-spacing:.6px}
.na-city .na-district-token{filter:drop-shadow(0 1px 2px #000)}
.na-city .na-exit{stroke:#a5bdbe;stroke-width:2;opacity:.85}
.na-city .na-root-label{font:650 14px var(--na-mono);fill:#b9d5d5;letter-spacing:1px;text-anchor:middle}
.na-city .na-district.target .na-sector,.na-city .na-district.target .na-sector-outline{stroke:#edf3c8;stroke-width:3;stroke-dasharray:4 3}
.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:4;stroke-dasharray:none}
.na-page .na-city .na-map-help{margin:5px 0 0;font-size:12px;line-height:1.5;color:#bfccc7}
.na-page .na-city .na-map-key{margin:8px 0;border:1px solid #71858b;border-radius:3px;background:#111c22;color:#edf2e5}
.na-page .na-city .na-map-key>summary{display:flex;align-items:center;gap:9px;min-height:44px;padding:10px 12px;list-style:none;font:650 14px/1.4 var(--na-font);color:#f5f7e9;background:#203039;cursor:pointer}
.na-page .na-city .na-map-key>summary::-webkit-details-marker{display:none}
.na-page .na-city .na-map-key>summary::before{content:'▸';color:#d9ee80;font-size:16px}
.na-page .na-city .na-map-key[open]>summary::before{content:'▾'}
.na-page .na-city .na-map-key>summary:hover{background:#293e48}
.na-page .na-city .na-map-key>summary:focus-visible{outline:2px solid var(--na-pink);outline-offset:3px}
.na-page .na-city .na-map-key[open]>summary{border-bottom:1px solid #53696f;margin-bottom:12px}
.na-page .na-city .na-map-key :is(.na-map-tiers,.na-map-resources){padding:0 12px 12px;font:550 13px/1.45 var(--na-font);color:#e5ecdf}
.na-page .na-city .na-map-key .na-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px 16px;padding:0 12px 14px;font:500 14px/1.45 var(--na-font);color:#edf2e5}
.na-page .na-city .na-map-key .na-legend>span{gap:8px;align-items:flex-start}
.na-page .na-city .na-map-key :is(.na-legend,.na-map-resources) .na-icon{width:22px;height:22px;flex-shrink:0}
.na-map-district-grid{display:none}
.na-city.is-expanded .na-map-district-grid{display:none}
.na-page .na-city .na-map-district-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;gap:7px 8px;min-width:0;min-height:0;margin:0;padding:12px;text-align:left;color:#f4f6ed;border:1px solid #50656b;border-top:3px solid var(--tier);border-radius:2px;background:linear-gradient(135deg,#061016e6,#06101680 50%,#061016ed),var(--district-scene) center/cover;box-shadow:none;white-space:normal}
.na-map-district-heading{grid-column:1/-1;display:flex;align-items:baseline;gap:7px;min-width:0}
.na-map-district-heading strong{font:650 18px/1.2 var(--na-font);color:#fcfcf4;text-shadow:0 1px 3px #000}
.na-map-district-number{font:600 12px var(--na-mono);color:var(--tier)}
.na-map-district-tier{margin-left:auto;font:500 10px var(--na-mono);color:#cfdbd3;flex-shrink:0}
.na-map-district-output{grid-column:1/-1;display:flex;gap:16px;min-height:22px}
.na-map-district-output>span{display:inline-flex;align-items:center;gap:5px;font:650 18px var(--na-font)}
.na-map-district-output b{color:#f5f7ec}
.na-map-district-output .blocked{opacity:.7;text-decoration:line-through;text-decoration-thickness:2px}
.na-map-district-output .na-icon{width:22px;height:22px;flex-shrink:0}
.na-map-district-tokens .na-icon{width:18px;height:18px;flex-shrink:0}
.na-map-district-tokens{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:3px;min-height:18px;font:500 11px var(--na-font);color:#d0dccf}
.na-map-district-exit{grid-column:1/-1;font:500 11px/1.3 var(--na-font);color:#c6dee0}
.na-page .na-city button.na-map-district-card.target{border-color:#d0df9b;border-top-color:var(--tier);cursor:pointer}
.na-page .na-city button.na-map-district-card.target:hover:not(:disabled),.na-page .na-city button.na-map-district-card.target:focus-visible{outline:2px solid var(--na-pink);outline-offset:1px;background:linear-gradient(135deg,#061016e6,#06101680 50%,#061016ed),var(--district-scene) center/cover;color:#f4f6ed;border-color:#d0df9b}
.na-page .na-city .na-map-district-card:is(.from,.involved){border-color:var(--na-amber);box-shadow:inset 0 0 0 1px var(--na-amber)}
.na-page .na-city .na-map-district-card.changed{animation:na-district-card-change 1.5s ease-out}
.na-page .na-city.is-expanded .na-board{width:100%;min-width:1550px;max-width:none;max-height:none}
.na-page .na-city.is-expanded .na-board-scroll{display:block;max-height:75dvh;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}

@container(max-width:900px){
 .na-page .na-city:not(.is-expanded) .na-board-scroll{display:none}
 .na-city:not(.is-expanded) .na-map-district-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
 .na-page .na-city .na-map-district-card{padding:7px 8px;gap:3px 6px;border-top-width:2px}
 .na-map-district-heading{gap:5px}
 .na-map-district-heading strong{font-size:14px;line-height:1.2}
 .na-map-district-number{font-size:10px}
 .na-map-district-tier{font-size:9px}
 .na-map-district-output{gap:13px;min-height:18px}
 .na-map-district-output>span{font-size:14px}
 .na-map-district-output .na-icon{width:18px;height:18px}
 .na-map-district-tokens{min-height:16px;font-size:10px}
 .na-map-district-tokens .na-icon{width:14px;height:14px}
 .na-map-district-exit{font-size:10px}
}
@media(max-width:700px){
 .na-page .na-map-controls{gap:8px}
 .na-page .na-map-expand{min-height:44px}
 .na-page .na-map-caption{font-size:11px}
}
@keyframes na-district-card-change{from{outline:3px solid #fff}to{outline:3px solid transparent}}
@media(prefers-reduced-motion:reduce){.na-page .na-city .na-map-district-card.changed{animation:none}}