.city-shell{padding:1rem;max-width:none}.city-map-title{font-weight:700}.city-toolbar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.75rem}.city-toolbar button{min-width:2.4rem}.city-toolbar label{margin-left:.5rem}.city-layout{display:grid;grid-template-columns:minmax(0,1fr) 18rem;gap:1rem;min-height:68vh}.city-canvas-wrap{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:1rem;background:color-mix(in srgb,var(--bg) 88%,var(--accent) 12%);min-height:68vh}.city-map{display:block;width:100%;height:68vh;touch-action:none;cursor:grab}.city-map.is-dragging{cursor:grabbing}.city-quartier{fill:color-mix(in srgb,var(--bg) 86%,var(--accent) 14%);stroke:color-mix(in srgb,var(--accent) 65%,var(--border));stroke-width:2}.city-quartier-title{font-size:18px;font-weight:750;fill:var(--fg)}.city-street{fill:color-mix(in srgb,var(--fg) 13%,var(--bg));stroke:color-mix(in srgb,var(--fg) 24%,transparent);stroke-width:1}.city-street-line{stroke:color-mix(in srgb,var(--bg) 65%,var(--fg));stroke-width:2;stroke-dasharray:10 8}.city-street-title{font-size:13px;font-weight:650;fill:var(--fg)}.city-spot{fill:var(--accent);stroke:var(--bg);stroke-width:3;cursor:pointer;filter:drop-shadow(0 2px 3px rgb(0 0 0/.25))}.city-spot:hover,.city-node:focus .city-spot{stroke:var(--fg);stroke-width:4}.city-spot-title{font-size:11px;font-weight:650;fill:var(--fg);paint-order:stroke;stroke:var(--bg);stroke-width:3px;stroke-linejoin:round;pointer-events:none}.city-labels-off .city-spot-title{display:none}.city-inspector{border:1px solid var(--border);border-radius:1rem;padding:1rem;overflow:auto}.city-inspector h2{margin-top:0}.city-inspector dl{display:grid;grid-template-columns:auto 1fr;gap:.4rem .7rem}.city-inspector dt{font-weight:700}.city-inspector dd{margin:0;overflow-wrap:anywhere}.city-empty{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:2rem}.city-empty[hidden]{display:none}.city-directory,.city-planner{margin-top:1rem;border:1px solid var(--border);border-radius:.75rem;padding:.75rem}.city-directory-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}.city-directory article{border-left:3px solid var(--accent);padding-left:.75rem}.city-directory ul{padding-left:1.2rem}.city-planner-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}.city-planner form{display:grid;gap:.7rem;align-content:start}.city-planner label{display:grid;gap:.3rem}@media(max-width:800px){.city-layout{grid-template-columns:1fr}.city-canvas-wrap,.city-map{min-height:58vh;height:58vh}.city-inspector{min-height:8rem}}
.city-locality-search{display:flex;align-items:center;gap:.25rem;margin-inline-start:auto}.city-locality-search input[name="q"]{width:min(18rem,30vw)}
html.city-map-popup-mode,body.city-map-popup-mode{width:100%;height:100%;overflow:hidden}.city-map-popup-mode .topbar,.city-map-popup-mode .city-toolbar,.city-map-popup-mode .city-inspector,.city-map-popup-mode .city-directory,.city-map-popup-mode .city-planner{display:none}.city-map-popup-mode .city-shell{width:100%;height:100%;padding:0;overflow:hidden}.city-map-popup-mode .city-layout{display:block;width:100%;height:100%;min-height:0;overflow:hidden}.city-map-popup-mode .city-canvas-wrap{width:100%;height:100%;min-height:0;border:0;border-radius:0;overflow:hidden}.city-map-popup-mode .city-map{width:100%;height:100%;min-height:0}