/* A clear cartographic surface with restrained, consistent controls. */
html[data-theme=day]{--map-surface:#fcfdf8;--map-ink:#254b46;--map-border:#aebfb4;--map-active:#e0eddf;--map-shadow:0 3px 12px #173c3320,0 1px 2px #173c3310}
html[data-theme=night]{--map-surface:#223a40;--map-ink:#eef5ed;--map-border:#567177;--map-active:#35575b;--map-shadow:0 3px 14px #07151955,0 1px 2px #07151944}
html body #app header{background:var(--map-surface);color:var(--map-ink);border-bottom:1px solid var(--map-border);box-shadow:0 2px 12px #173c3310}
html body #app header .topnav{background:var(--map-surface);border-color:var(--map-border)}
html body #app header .nav-button{color:var(--map-ink)}
html body #app header .nav-button.active{background:var(--map-active);color:var(--map-ink);box-shadow:inset 0 0 0 1px var(--map-border)}
html body #app header .atmosphere-toggle,html body #app aside>.hud-layer{background:var(--map-surface)!important;color:var(--map-ink)!important;border-color:var(--map-border)!important;box-shadow:var(--map-shadow)}
html body #app aside>.hud-layer{min-height:44px}
html body #app aside>.hud-layer.active{background:var(--map-active)!important;border-color:#739589!important}
html body #app aside>.hud-layer b{color:inherit;opacity:.85}
html body #app :is(.city-hall-discovery,.close-place-icon,.news-map-pin){background:var(--map-surface);color:var(--map-ink);border:1px solid var(--map-border);box-shadow:var(--map-shadow)}
html body #app .city-hall-discovery{border-radius:14px}
html body #app :is(.discovery-choice,.discovery-menu>.government-head,.map-step-back){box-shadow:var(--map-shadow);border-color:var(--map-border)}
html body #app .discovery-choice{border-radius:14px;background:var(--map-surface)}
html body #app .discovery-choice strong{font-weight:500;line-height:1.3}
html body #app .map-step-back{border-radius:12px}
html body #app #map:after{background:none!important}
html body #app .grain{opacity:.008;pointer-events:none}
html body #app .mapboxgl-ctrl-attrib{font-size:11px;background:#fcfdf8d9;color:#425d58;border-radius:6px 0 0 0}
html body #app :is(.hud-layer,.close-place-icon,.city-hall-discovery,.news-map-pin,.discovery-choice):focus-visible{outline:3px solid #3f8c91;outline-offset:2px}
@media(hover:hover){html body #app aside>.hud-layer:hover{background:var(--map-active)!important}html body #app :is(.close-place-icon,.city-hall-discovery,.news-map-pin):hover{background:var(--map-active);box-shadow:0 5px 16px #173c3333}}
@media(prefers-reduced-motion:reduce){html body #app :is(.hud-layer,.discovery-choice){transition:none;transform:none}}
/* News opens a second, horizontal level without covering the map with a feed. */
html body #app #discovery-tray:has(.news-subnav){width:var(--news-row-width,260px)!important;max-width:calc(100% - 16px)!important}
html body #app #discovery-tray:has(.news-subnav)>.government-head,html body #app #discovery-tray:has(.news-subnav) .discovery-choice{width:140px;box-sizing:border-box}
html body #app #discovery-tray .news-subnav{display:flex;flex-flow:row nowrap;gap:7px;width:100%;overflow-x:auto;overscroll-behavior-x:contain;padding:3px 0 7px;scrollbar-width:thin;scroll-snap-type:x proximity}
html body #app #discovery-tray .news-subnav button{flex:0 0 auto;min-height:44px;scroll-snap-align:start;padding:10px 14px;background:var(--map-surface);color:var(--map-ink);border:1px solid var(--map-border);border-radius:999px;box-shadow:var(--map-shadow);font:inherit;font-size:14px;white-space:nowrap;cursor:pointer;touch-action:manipulation}
html body #app #discovery-tray .news-subnav button:focus-visible{outline:3px solid #3f8c91;outline-offset:-3px}
@media(max-width:700px){html body #app #discovery-tray:has(.news-subnav)>.government-head,html body #app #discovery-tray:has(.news-subnav) .discovery-choice{width:112px}}

/* Shared visual system: all exploration surfaces use the same theme tokens. */
html{--map-surface:#fcfdf8;--map-ink:#254b46;--map-border:#aebfb4;--map-active:#e0eddf;--map-shadow:0 3px 12px #173c3320,0 1px 2px #173c3310;--map-radius:14px;--map-gap:8px;--map-muted:#526b64;--map-soft:#edf2ec;--map-accent:#477d72;--map-focus:#367f88}
html[data-theme=night]{--map-muted:#b7cbc5;--map-soft:#2c454b;--map-accent:#91bbae;--map-focus:#8dd3d9;color-scheme:dark}
html[data-theme=day]{color-scheme:light}
html body #app :is(.map-step,.journey-active-detail,.living-panel,.downtown-film,.hud-search,.representative-pin,.discovery-place-label,.downtown-place-label){background:var(--map-surface)!important;color:var(--map-ink)!important;border-color:var(--map-border)!important;box-shadow:var(--map-shadow);border-radius:var(--map-radius)}
html body #app #discovery-tray{color:var(--map-ink);--ink:var(--map-ink);--mint:var(--map-accent)}
html body #app #discovery-tray :is(h2,h3,strong,span,p,button,a,small,li,th,td,dt,dd),html body #app .map-step-copy *{color:inherit!important}
html body #app :is(.map-step-copy,.place-profile,.city-hall-profile,.news-profile,.news-compact,.information-set){color:var(--map-ink)!important}
html body #app #discovery-tray .government-head{background:var(--map-surface);color:var(--map-ink);border-color:var(--map-border);border-radius:var(--map-radius);box-shadow:var(--map-shadow)}
html body #app #discovery-tray .government-head h2{font-size:14px;font-weight:600}
html body #app #discovery-tray .government-close{min-height:44px;min-width:44px;background:transparent;border:0;box-shadow:none}
html body #app #discovery-tray .discovery-choices{gap:var(--map-gap)}
html body #app #discovery-tray .discovery-choice{flex-direction:row;justify-content:flex-start;min-height:56px;padding:12px;gap:10px;text-align:left;background:var(--map-surface);border-color:var(--map-border);border-radius:var(--map-radius);transform:none}
html body #app #discovery-tray .discovery-choice b{display:flex;align-items:center;justify-content:center;flex:0 0 21px;font-size:21px;color:var(--map-accent)!important}
html body #app #discovery-tray .discovery-choice strong{font-size:14px;line-height:1.35;font-weight:500;overflow-wrap:anywhere}
html body #app #discovery-tray .news-subnav{gap:8px;flex-wrap:wrap;overflow:visible;box-sizing:border-box;padding:2px 0 6px}
html body #app #discovery-tray .news-subnav button{padding:10px 12px}
html body #app :is(.map-step-back,.map-detail-back,.mobile-map-menu,.ward-tour-resume){background:var(--map-surface)!important;color:var(--map-ink)!important;border-color:var(--map-border)!important;min-height:44px!important;border-radius:12px;font-size:14px!important;box-shadow:var(--map-shadow)}
html body #app :is(.map-step-options button,.city-hall-profile button,.news-profile button,.news-compact button,.information-set button,.profile-link,.downtown-film button){background:var(--map-soft);color:var(--map-ink);border:1px solid var(--map-border);border-radius:10px;min-height:44px;font-family:inherit;font-size:14px;line-height:1.45;box-sizing:border-box;touch-action:manipulation}
html body #app .map-step{padding:16px}
html body #app .map-step h2{font-size:20px;line-height:1.3;margin:0 0 12px;font-weight:600;letter-spacing:-.02em}
html body #app .map-step p{line-height:1.5}
html body #app :is(.map-step-copy,.place-profile,.reddit-discussion)>p{font-size:16px;line-height:1.55}
html body #app #discovery-tray :is(.news-meta,.news-note,.discussion-meta,.set-note,.profile-credit,.hall-kicker,.ward-tour-source){color:var(--map-muted)!important;font-size:13px;line-height:1.45}
html body #app :is(.hall-grid,.map-step-options){gap:8px}
html body #app :is(.profile-tags span,.hall-budget-row){background:var(--map-soft);border-radius:10px}
html body #app :is(.hall-bar,.set-bar){background:var(--map-soft)}
html body #app :is(.hall-bar i,.set-bar i){background:var(--map-accent)}
html body #app :is(.hall-org-line,.hall-org-advisers,.hall-org>.hall-grid,.information-set th,.information-set td,.set-source){border-color:var(--map-border)}
html body #app :is(.news-select select,.hall-year select,.hud-search input){background:var(--map-surface);color:var(--map-ink)!important;border-color:var(--map-border);font-size:16px}
html body #app .hud-search :is(.hud-result,.hud-result small){color:var(--map-ink)!important}
html body #app :is(.map-search-toggle,.music-toggle,.movement-toggle,.mirble-feedback-button,.ward-council-icon){background:var(--map-surface)!important;color:var(--map-ink)!important;border-color:var(--map-border)!important;box-shadow:var(--map-shadow);min-height:44px}
html body #app .downtown-tour-pin span{background:var(--map-surface);color:var(--map-ink);border-color:var(--map-border)}
html body #app .downtown-film :is(p,h2,a,span,figcaption){color:inherit}
html body #app .downtown-film .downtown-scrub{accent-color:var(--map-accent)}
html body #app .downtown-film .downtown-back{background:transparent;border:0;box-shadow:none}
html body #app .mapboxgl-ctrl-attrib{background:var(--map-surface);color:var(--map-muted)}
html body #app #discovery-tray:has(.place-profile){background:var(--map-surface)!important;border-color:var(--map-border);box-shadow:var(--map-shadow);border-radius:18px}
html body #app #discovery-tray:has(.place-profile)>.map-step{background:var(--map-surface)!important;box-shadow:none}
html body #app #discovery-tray:has(.place-profile)>.map-step-back{border-color:var(--map-border)!important;box-shadow:none}
html body #app .place-profile .profile-photo{background:var(--map-soft)}
html body #app .map-step:has(.place-profile) h2{font-size:22px!important}
html body #app :is(button,a,input,select,textarea):focus-visible{outline:3px solid var(--map-focus)!important;outline-offset:2px}
html body #app button:disabled{opacity:.55;cursor:default}
/* Dialogs use the same palette without affecting their open/closed behavior. */
html body :is(.mirble-feedback-dialog,.demo-profile-dialog){background:var(--map-surface);color:var(--map-ink);border-color:var(--map-border);border-radius:18px}
html body :is(.mirble-feedback-dialog,.demo-profile-dialog) :is(input,select,textarea,button){background:var(--map-soft);color:var(--map-ink);border-color:var(--map-border)}
html body :is(.mirble-feedback-dialog,.demo-profile-dialog) :is(p,label,small,span){color:inherit}
@media(hover:hover){
 html body #app #discovery-tray .discovery-choice:hover,html body #app :is(.map-step-options button,.city-hall-profile button,.news-profile button,.news-compact button,.information-set button,.profile-link,.news-subnav button):hover{background:var(--map-active);border-color:var(--map-accent)}
}
@media(max-width:700px){
 html body #app #discovery-tray .discovery-choice{min-height:52px;padding:10px;gap:8px}
 html body #app #discovery-tray .discovery-close-head .government-close{white-space:normal;text-align:left}
 html body #app .map-step{padding:12px}
 html body #app .map-step h2{font-size:18px}
 html body #app .map-step-back{white-space:normal!important;text-overflow:clip!important}
 html body #app header .nav-button{font-size:14px;padding:7px 8px}
 html body #app .map-step:has(.reddit-discussion) .map-step-options{display:grid;grid-template-columns:1fr;overflow:visible}
 html body #app .map-step:has(.reddit-discussion) .map-step-options button{max-width:none;width:100%;min-height:44px}
 html body #app .map-step:has(.reddit-discussion) .map-choice-pager{display:none!important}
}

html[data-theme=night] body #app header .nav-button.active{background:var(--map-active);color:var(--map-ink);box-shadow:inset 0 0 0 1px var(--map-border)}

/* City overview: growth is the main visual entry, followed by today's measures. */
html body #app .overview{inset:64px 0 0;padding:24px;place-items:start center;background:color-mix(in srgb,var(--map-surface) 45%,transparent);backdrop-filter:none}
html body #app .overview-card{width:min(960px,100%);box-sizing:border-box;padding:28px;border:1px solid var(--map-border);border-radius:20px;background:var(--map-surface);color:var(--map-ink);box-shadow:var(--map-shadow)}
html body #app .overview h1{font-size:clamp(36px,5vw,54px);line-height:1.1;margin:10px 0}
html body #app .overview :is(.overview-kicker,.overview-sub,.overview-source,.stat span){color:var(--map-muted)}
html body #app .overview-sub{font-size:16px;line-height:1.5}
html body #app .overview-timelapse{display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:100%;min-height:200px;margin-top:24px;padding:24px;text-align:left;background:var(--map-active);color:var(--map-ink);border:1px solid var(--map-border);border-radius:16px;font:inherit;cursor:pointer}
html body #app .overview-timelapse:disabled{cursor:wait;opacity:.65}
html body #app .overview-film-dates{font-size:clamp(30px,5vw,48px);font-weight:500;letter-spacing:-.04em}
html body #app .overview-film-dates>span{font-weight:400;color:var(--map-accent)}
html body #app .overview-film-title{font-size:22px;font-weight:600}
html body #app .overview-film-title>span{font-size:16px;margin-right:8px}
html body #app .overview-film-detail{font-size:16px;line-height:1.4}
html body #app .overview-film-status{font-size:14px;text-decoration:underline;text-underline-offset:3px}
html body #app .overview-film-note{font-size:13px;color:var(--map-muted);margin:8px 2px 0}
html body #app .overview .stats-grid{margin-top:24px;gap:1px;grid-template-columns:repeat(4,minmax(0,1fr));border-color:var(--map-border);background:var(--map-border)}
html body #app .overview .stat{min-height:100px;padding:18px;background:var(--map-surface)}
html body #app .overview .stat strong{font-size:28px;color:var(--map-ink)}
html body #app .overview .stat span{font-size:14px;line-height:1.4}
html body #app .overview-action{background:var(--map-accent);border-color:var(--map-accent);color:var(--map-surface);min-height:44px;font-size:16px}
html body #app .overview-source{font-size:12px;line-height:1.5}
html body.mode-overview #app aside{opacity:0;visibility:hidden;pointer-events:none}
html body.cinematic-active #app :is(.overview,.mirble-feedback-button,.close-place-icon,.city-hall-discovery,.downtown-tour-pin,.map-control-dock,.mobile-map-menu,.ward-tour-resume){display:none!important}
html body #app .cinematic-actions button{min-height:44px;font-size:14px;touch-action:manipulation}
@media(max-width:700px){
 html body #app .overview{inset:56px 0 0;padding:12px}
 html body #app .overview-card{padding:18px}
 html body #app .overview-timelapse{padding:18px;min-height:200px;margin-top:18px;gap:10px}
 html body #app .overview-film-title{font-size:20px}
 html body #app .overview .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:20px}
 html body #app .overview .stat{padding:14px;min-height:96px}
 html body #app .cinematic-actions{top:12px;right:12px;left:12px;justify-content:flex-end;flex-wrap:wrap}
 html body #app .cinematic-status{top:72px;font-size:12px;white-space:nowrap}
}

html body #app .city-stat-card .city-stat-fact{padding:12px 0;border-bottom:1px solid var(--map-border)}
html body #app .city-stat-card .city-stat-value{display:block;font-size:32px;line-height:1.2;font-weight:600;letter-spacing:-.03em}
html body #app .city-stat-card .city-stat-fact p{font-size:16px;margin:6px 0 0}
html body #app .city-stat-card .city-stat-source{font-size:13px;line-height:1.45;color:var(--map-muted)!important;margin:12px 0}

/* Property inspection follows the selected point, clear of bottom controls. */
html body #app .hud-bottom.point-inspector{position:absolute;left:var(--inspection-left)!important;top:var(--inspection-top)!important;right:auto!important;bottom:auto!important;width:var(--inspection-width)!important;max-width:none!important;max-height:var(--inspection-height)!important;box-sizing:border-box;overflow:auto;z-index:35;padding:14px 52px 14px 14px;background:var(--map-surface)!important;color:var(--map-ink)!important;border:1px solid var(--map-border);border-radius:14px;box-shadow:var(--map-shadow);font-size:16px;line-height:1.45}
html body #app .hud-bottom.point-inspector:not([hidden]){display:block}
html body #app .hud-bottom.point-inspector :is(strong,p,a,button){color:inherit!important}
html body #app .hud-bottom.point-inspector p{font-size:14px;line-height:1.5;margin:6px 0 0;overflow-wrap:anywhere}
html body #app .hud-bottom.point-inspector>button{position:absolute;right:4px;top:4px;width:44px;height:44px;margin:0;padding:0;float:none;font-size:24px}
html body #app.property-inspection #discovery-tray{visibility:hidden!important;pointer-events:none!important}

html body #app .stat-search-dialog{width:min(520px,calc(100% - 24px));max-height:calc(100dvh - 40px);box-sizing:border-box;padding:20px;border:1px solid var(--map-border);border-radius:18px;background:var(--map-surface);color:var(--map-ink);box-shadow:var(--map-shadow);overflow:auto}
.stat-search-dialog::backdrop{background:#152b354d}
.stat-search-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.stat-search-head h2{font-size:22px;line-height:1.3;margin:0}
.stat-search-head button{flex:none;width:44px;height:44px;font-size:24px;border:0;background:transparent;color:inherit;cursor:pointer}
.stat-search-dialog label{display:block;font-size:14px;margin-bottom:6px}
.stat-search-dialog input{box-sizing:border-box;width:100%;min-height:48px;font:inherit;font-size:16px;border:1px solid var(--map-border);border-radius:10px;padding:10px 12px;color:var(--map-ink);background:var(--map-soft)}
.stat-search-note,.stat-search-status{font-size:13px;line-height:1.5;color:var(--map-muted)}
.stat-search-results{display:grid;gap:8px}
.stat-search-results button{display:flex;flex-direction:column;gap:5px;text-align:left;min-height:44px;padding:12px;border:1px solid var(--map-border);border-radius:12px;background:var(--map-soft);color:inherit;font:inherit;cursor:pointer}
.stat-search-results button strong{font-size:16px}.stat-search-results button span{font-size:20px}.stat-search-results button small{font-size:12px;line-height:1.4;color:var(--map-muted)}
@media(max-width:700px){html body #app .stat-search-dialog{margin:12px auto;padding:16px;max-height:calc(100dvh - 24px)}}

html body #app #discovery-tray .news-subnav button{max-width:100%;white-space:normal;text-align:left;overflow-wrap:anywhere}

.stat-search-controls{display:flex;align-items:stretch;gap:8px}.stat-search-controls input{flex:1;min-width:0}.stat-search-controls .stat-search-submit{flex:none;min-height:48px;padding:10px 16px;border:1px solid var(--map-accent);border-radius:10px;background:var(--map-active);color:var(--map-ink);font:inherit;font-size:16px;font-weight:600;cursor:pointer}
/* Compact school facts; the existing journey supplies Back and map focus. */
.school-profile{font-size:16px;line-height:1.5;overflow-wrap:anywhere}
.school-facts{display:grid;gap:4px;padding:10px 12px;border-left:3px solid var(--map-border);background:var(--map-active);border-radius:8px}
.school-facts span,.school-address{font-size:14px}
.school-facts strong{font-size:18px}
.school-links{display:grid;gap:8px}
.school-links .profile-link{display:flex;align-items:center;min-height:44px;margin:0;padding:9px 12px;box-sizing:border-box}
.school-source{font-size:13px;line-height:1.45;opacity:.8}
.location-photo-action{min-height:44px;padding:10px 16px;border:1px solid var(--map-border);border-radius:14px;background:var(--map-active);color:var(--map-ink);font:inherit;margin-top:12px;cursor:pointer}
.location-photo-dialog{width:min(480px,calc(100vw - 28px));max-height:calc(100dvh - 40px);padding:20px;box-sizing:border-box;border:1px solid var(--map-border);border-radius:22px;background:var(--map-surface);color:var(--map-ink);box-shadow:var(--map-shadow);overflow:auto}
.location-photo-dialog::backdrop{background:#16362c70}
.photo-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.photo-heading h2{font-size:22px;margin:0}.photo-close{font-size:26px!important;min-width:44px}
.photo-place{font-weight:600}.photo-note{font-size:14px;line-height:1.5}
.photo-form{display:grid;gap:14px}.photo-form label{display:grid;gap:6px;font-size:16px}.photo-form label span{font-size:14px}.photo-pickers{display:flex;flex-wrap:wrap;gap:8px}
.location-photo-dialog :is(button,input,textarea){font:inherit;font-size:16px;color:var(--map-ink);border:1px solid var(--map-border);border-radius:12px;background:var(--map-surface);padding:10px;box-sizing:border-box;min-width:0}
.location-photo-dialog button{min-height:44px;cursor:pointer}.location-photo-dialog button:disabled{opacity:.5;cursor:default}.location-photo-dialog :is(input,textarea){max-width:100%;width:100%}
.photo-form .photo-permission{display:flex;align-items:flex-start;gap:10px;line-height:1.4}.photo-permission input{width:22px;height:22px;flex:none;margin:0}.photo-submit{background:var(--map-active)!important;font-weight:600!important}
.photo-preview,.photo-saved img{width:100%;max-height:250px;object-fit:contain;border-radius:12px;background:var(--map-active)}
.photo-status{font-size:14px;line-height:1.5}.photo-mine{border-top:1px solid var(--map-border);padding-top:12px}.photo-mine h3{font-size:16px;margin:0 0 10px}.photo-list{font-size:14px}.photo-saved{border-bottom:1px solid var(--map-border);padding:8px 0}.photo-saved button{margin:0 8px 8px 0}.photo-saved p{overflow-wrap:anywhere}
.location-photo-dialog [hidden]{display:none!important}