/* Shared map-page template. Keep page CSS for domain-specific visualizations only.
   Exceptions: workspace has a pinned basemap footer; history has a map timeline. */
:root { --ui-panel-width:352px; --ui-panel:#0d1e2b; --ui-card:#102736; --ui-border:#345767; --ui-text:#d3e6ef; --ui-muted:#a2bdcc; --ui-accent:#35c6e8; color-scheme:dark; }
body .ui-stage { height:calc(100dvh - 64px); min-height:400px; }
body .ui-panel { box-sizing:border-box; width:var(--ui-panel-width); flex:0 0 var(--ui-panel-width); min-width:0; max-width:none; height:100%; max-height:none; margin:0; border:0; border-right:1px solid var(--ui-border); border-radius:0; background:var(--ui-panel); backdrop-filter:none; color:var(--ui-text); font:400 14px/1.5 var(--sans); }
body #layer-panel.ui-panel { width:var(--ui-panel-width); flex-basis:var(--ui-panel-width); background:var(--ui-panel); border-color:var(--ui-border); }
body .workspace.ui-stage { margin-top:64px; }
body .sim-stage.ui-stage { display:flex; }
body .sim-stage .ui-panel { position:relative; top:auto; left:auto; padding:24px 20px; overflow-y:auto; }
body .sim-stage #sim-map { left:var(--ui-panel-width); top:0; }
body .sim-stage.panel-collapsed #sim-map { left:0; }
body .ex.ui-stage { min-height:400px; }
body .ex .ui-panel { padding:24px 20px; overflow-y:auto; }
body .ex .ex-map { min-width:0; height:100%; }
body .ui-panel .ui-panel-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:0 0 24px; padding:0; }
body #layer-panel .ui-panel-header { padding:24px 20px; margin:0; }
body .ui-panel .ui-panel-title { font:600 24px/1.2 var(--sans); color:#f0f7fb; margin:0; letter-spacing:-.3px; }
body .ui-panel .ui-eyebrow { font:600 11px/1.5 var(--sans); letter-spacing:.13em; color:var(--ui-muted); margin:0 0 8px; text-transform:uppercase; }
body .ui-panel .ui-header-actions { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
body .ui-panel .units { border:1px solid var(--ui-border); border-radius:6px; }
body .ui-panel .units button { font:600 12px/1.2 var(--sans); padding:7px 9px; min-height:30px; color:var(--ui-muted); }
body .ui-panel .units button.on { background:#225362; color:#fff; }
body .ui-panel :is(.sim-collapse,.icon-button,.ui-collapse) { width:32px; height:32px; padding:5px; border:1px solid var(--ui-border); border-radius:6px; background:transparent; color:var(--ui-muted); cursor:pointer; }
body .ui-panel :is(input:not([type=checkbox]):not([type=range]),select) { min-width:0; min-height:36px; background:#0c2330; border:1px solid var(--ui-border); border-radius:6px; padding:7px 9px; font:400 14px/1.3 var(--sans); color:var(--ui-text); }
body .ui-panel :is(input[type=checkbox],input[type=range]) { accent-color:var(--ui-accent); }
body .ui-panel input[type=checkbox]:not([role=switch]) { width:16px; height:16px; flex:0 0 auto; }
body .ui-panel :is(.hint,.hintrow,.source-details p,.catalog-about,.landfall-summary,.sub,.future-note) { font:400 13px/1.6 var(--sans); color:var(--ui-muted); }
body .ui-panel :is(.fg>label,.fg-head label,.filter-row label,.control-row label,.check-row,.filter-options label,summary) { font-size:14px; line-height:1.5; color:var(--ui-text); }
body .ui-panel :is(.layer-card,.history-filter,.fg) { background:var(--ui-card); border:1px solid var(--ui-border); border-radius:10px; }
body .ui-panel .fg { padding:14px; margin:0 0 16px; }
body .ui-panel .history-filter { margin:0 0 16px; padding:14px; }
body .ui-panel .history-filter legend { font-size:14px; font-weight:600; }
body .ui-panel #sim-info { font-size:14px; line-height:1.6; }
body .ui-panel #sim-info .nm { font:600 24px/1.2 var(--sans); }
body .ui-panel .sim-legend span { font-size:12px; }
body .ui-panel .layer-name strong { font-size:16px; }
body .ui-panel :is(button,input,select,a,summary):focus-visible { outline:2px solid var(--ui-accent); outline-offset:3px; }
body .ui-panel input[aria-invalid=true] { border-color:#ff8e82; }
body .ui-panel .sub { max-width:none; margin:0 0 20px; }
body .ui-panel .feed-toolbar { margin-top:0; }
body .ui-stage .sim-scrub { left:calc(var(--ui-panel-width) + 16px); right:16px; bottom:16px; transform:none; width:auto; max-width:850px; flex-wrap:wrap; background:var(--ui-panel); border-color:var(--ui-border); }
body .ui-stage.panel-collapsed .sim-scrub { left:16px; }
body .ui-stage #scrub-read { min-width:0; white-space:normal; font-size:12px; }
body .ui-stage .sim-reopen, .ui-reopen { font:600 14px var(--sans); border:1px solid var(--ui-border); border-radius:8px; padding:9px 12px; color:var(--ui-text); background:var(--ui-panel); }
.ui-reopen { position:absolute; z-index:6; top:16px; left:16px; cursor:pointer; }
body .ex.panel-collapsed .ui-panel { display:none; }
body .ui-stage [hidden] { display:none!important; }
@media(max-width:760px) {
 body .ui-stage { min-height:540px; }
 body .sim-stage.ui-stage,body .ex.ui-stage { flex-direction:column; }
 body .sim-stage .ui-panel,body .ex .ui-panel { width:100%; height:44%; flex:0 0 44%; max-height:none; border-right:0; border-bottom:1px solid var(--ui-border); padding:20px; }
 body .sim-stage #sim-map { left:0; top:44%; }
 body .sim-stage.panel-collapsed #sim-map { top:0; }
 body .ex .ex-map { height:56%; min-height:0; flex:1; }
 body .ui-stage .sim-scrub { left:12px; right:12px; bottom:12px; }
 body .workspace.ui-stage { flex-direction:column; }
 body .workspace #layer-panel.ui-panel { position:relative; top:auto; bottom:auto; width:100%; height:44%; flex:0 0 44%; box-shadow:none; border-right:0; border-bottom:1px solid var(--ui-border); }
 body .workspace .map-surface { min-height:0; }
}

body .ui-panel .ui-collapse svg { width:20px; height:20px; }
body .ui-panel :is(.btn,.feed-toolbar button,.map-actions button,.pagination button,.sim-official a) { font:600 13px/1.4 var(--sans); min-height:34px; padding:7px 10px; border:1px solid var(--ui-border); border-radius:6px; background:#173444; color:var(--ui-text); }
body .ui-panel .btn:not(.ghost) { background:#225362; }