/* Adaptive map and viewport safe areas. */
html{scrollbar-gutter:stable}
:root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}
body{padding:var(--safe-top) var(--safe-right) 0 var(--safe-left)}
input[type=search],.session-picker select{font-size:16px}
.app>nav{height:auto;min-height:77px;padding:10px max(16px,var(--safe-right)) max(10px,var(--safe-bottom)) max(16px,var(--safe-left))}
.app>nav button{min-height:52px}
main{padding-bottom:calc(105px + var(--safe-bottom))}
.app>footer{padding-bottom:calc(100px + var(--safe-bottom))}
.modal .sheet{top:auto;max-height:92vh;max-height:92dvh;padding-bottom:max(24px,var(--safe-bottom))}
.close{width:44px;height:44px}
.map-workspace{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start;min-width:0}
.map-board,.map-sidebar{min-width:0}
.map-caption{display:flex;align-items:center;justify-content:space-between;gap:8px;max-width:none;width:100%;margin:0 0 8px;min-height:44px}
.map-caption strong{font-size:13px;min-width:0;overflow-wrap:anywhere;line-height:1.5}
.map-tools{display:flex;gap:4px;flex-shrink:0}
.map-tools .quiet{min-width:44px;min-height:44px;padding:8px;font-size:12px;border:1px solid var(--line);border-radius:8px;background:#fff;white-space:nowrap}
.map-tools .quiet[aria-pressed=true]{background:var(--ink);color:#fff}
.map-viewport{width:100%;height:420px;max-width:none;max-height:none;margin:0;border-radius:14px;background:#101713;overflow:hidden;overscroll-behavior:contain;touch-action:pan-x pan-y;scroll-behavior:auto;scrollbar-width:thin}
.map-stage{position:relative;min-width:100%;min-height:100%;display:grid;place-items:center}
.map-viewport canvas{display:block;max-width:none;max-height:none;flex:none;touch-action:pan-x pan-y}
.map-viewport.is-zoomed{overflow:auto;scrollbar-gutter:stable;cursor:grab}.map-viewport.is-dragging{cursor:grabbing;user-select:none}
.map-help{font-size:10px;line-height:1.6;color:var(--muted);margin:8px 0 0}
.map-sidebar .notice{margin-top:0}
.map-legend{max-width:none;margin:0;gap:10px;justify-content:flex-start}
.map-legend label{margin-left:0;min-height:44px}
.map-legend input{width:18px;height:18px;margin:0 4px 0 0}
.map-picker,#mapSelected{max-width:none;margin:12px 0 0}
.map-picker select{font-size:16px;min-height:44px;padding:8px 30px 8px 8px;appearance:none;-webkit-appearance:none;background:transparent;text-overflow:ellipsis}
.map-picker{position:relative}
.map-picker::after{content:"";position:absolute;right:23px;bottom:30px;width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);pointer-events:none}
#mapSelected>strong{display:block;overflow-wrap:anywhere}
.map-sidebar .footnote{overflow-wrap:anywhere}
body.map-mode main{padding-top:16px;padding-bottom:20px}
body.map-mode #mapPage>.section-heading{margin-bottom:12px}
body.map-mode .map-intro{margin:0 0 8px;font-size:12px}
.map-workspace.is-expanded{position:fixed;inset:0;z-index:30;overflow:auto;padding:max(12px,var(--safe-top)) max(12px,var(--safe-right)) max(12px,var(--safe-bottom)) max(12px,var(--safe-left));background:var(--paper);overscroll-behavior:contain}
.map-workspace.is-expanded .map-caption{position:relative}
@media(min-width:800px){
 .app>nav{min-height:54px;height:54px;padding:4px}
 .app>nav button{min-height:44px}
 main{padding-bottom:40px}.app>footer{padding-bottom:32px}
 .modal{align-items:center;padding:24px max(24px,var(--safe-right)) max(24px,var(--safe-bottom)) max(24px,var(--safe-left))}
 .modal .sheet{max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);border-radius:20px}
}
@media(min-width:900px){
 .map-workspace{grid-template-columns:minmax(0,1fr) 280px;gap:24px}
 .map-sidebar{padding:16px;border:1px solid var(--line);border-radius:14px;background:#fff}
 .map-sidebar .map-picker{padding:12px}
 .map-sidebar .map-legend{flex-wrap:wrap}
 .map-workspace.is-expanded{grid-template-columns:minmax(0,1fr) 280px}
}
@media(max-width:799px){
 body.map-mode header{height:72px;padding-top:10px;padding-bottom:10px}
 body.map-mode .web-topline{display:none}
 body.map-mode .eyebrow{display:none}
 body.map-mode #mapPage h1{font-size:22px}
 .map-caption{align-items:flex-start;flex-wrap:wrap}
 .map-caption strong{flex:1;align-self:center}
 .map-tools{margin-left:auto}
}
@media(max-height:550px) and (orientation:landscape){
 body.map-mode header{height:54px;padding-top:6px;padding-bottom:6px}
 body.map-mode .brand img{width:36px;height:36px}
 body.map-mode .brand>span.wordmark{font-size:18px}
 body.map-mode .web-topline,body.map-mode #mapPage>.section-heading,body.map-mode .map-intro{display:none}
 body.map-mode main{padding-top:6px}
 body.map-mode .app>nav{min-height:58px;padding-top:4px;padding-bottom:max(4px,var(--safe-bottom))}
 body.map-mode .app>nav button{min-height:42px}
 body.map-mode .map-caption{margin-bottom:6px}
 .map-workspace{gap:12px}
 .map-help{font-size:9px}
}
@media(min-width:800px) and (max-height:550px){
 body.map-mode header{padding-right:360px}
 body.map-mode header .connection{margin-left:8px;font-size:10px}
 body.map-mode .app>nav{top:4px;height:46px;min-height:46px;width:300px;padding:2px}
 body.map-mode .app>nav button{min-height:40px}
}
@media(max-width:359px){
 .map-tools .quiet{padding-left:5px;padding-right:5px}
 .map-caption strong{font-size:11px}
 .map-help{font-size:9px}
}
@media(prefers-reduced-motion:reduce){.map-workspace *{scroll-behavior:auto}}
