/* Version 06.2: one full-bleed map canvas, with a measured overlay grid.
   This module owns map geometry. The live map engine replaces only .map-stage. */
#mapPanel.map-surface{display:block;position:relative;isolation:isolate;min-height:320px;overflow:hidden;background:#222;border-color:#414141;container-type:size}
#mapPanel>.map-canvas{position:absolute;inset:0;width:100%;height:100%;min-height:0;overflow:hidden;z-index:0}
#mapPanel .map-stage{inset:0;width:100%;height:100%}
#mapPanel #terrainMap{display:block;width:100%;height:100%}
.map-hud{position:absolute;inset:12px 12px 0;z-index:2;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;pointer-events:none;min-width:0;min-height:0}
.map-hud>*{min-width:0;min-height:0}
#mapPanel .map-topbar{position:static;inset:auto;display:flex;align-items:start;justify-content:space-between;flex-wrap:nowrap;gap:12px;padding:0;background:none;border:0;pointer-events:none}
#mapPanel .map-property-label,#mapPanel .map-top-actions,#mapPanel .timeline-panel,#mapPanel .map-inspector{
 background:rgba(12,12,12,.78);border:1px solid rgba(255,255,255,.19);box-shadow:0 5px 22px #0004,inset 0 1px 0 #ffffff0d;
 -webkit-backdrop-filter:blur(18px) saturate(115%);backdrop-filter:blur(18px) saturate(115%);border-radius:12px;pointer-events:auto
}
#mapPanel .map-property-label{flex:0 1 260px;min-width:0;padding:6px 12px 9px}
#mapPanel #mapProperty{max-width:none;min-height:32px;font-size:14px;padding:2px 22px 2px 0}
#mapPanel #mapSubtitle{display:block;font:8px/1.5 var(--mono);color:#bebebe;letter-spacing:.3px}
#mapPanel .map-top-actions{flex:0 0 auto;padding:4px;gap:6px;align-items:center}
#mapPanel .map-time{background:none;border:0;max-width:110px;font-size:9px;padding:6px;white-space:nowrap;color:#ddd}
#mapPanel .map-top-actions .icon-button{width:36px;height:36px;background:transparent;border:0;border-radius:8px}
#mapPanel .property-overview-button{min-height:36px;padding:5px 8px;color:#ccc}
#mapPanel .map-top-actions button:hover{background:#ffffff12;color:#fff}
.map-middle{display:grid;grid-template-columns:minmax(0,1fr) 50px;align-items:start;gap:10px;min-height:0;overflow:hidden}
#mapPanel .compass{position:static;grid-column:2;justify-self:end;width:44px;max-height:100%;overflow:hidden;align-self:start;color:#fff;text-shadow:0 1px 4px #000;pointer-events:none}
#mapPanel .compass svg{width:40px;height:40px;filter:drop-shadow(0 2px 4px #0008)}
#mapPanel .compass small{font-size:8px;color:#ddd;line-height:1.5}
#mapPanel .map-inspector{grid-column:1;grid-row:1;position:static;max-width:260px;width:100%;max-height:100%;overflow:auto;padding:12px;align-self:start;margin:0}
#mapPanel .map-inspector p{font-size:11px;line-height:1.6}
#mapPanel .map-inspector strong{font-size:13px}
/* One bottom-edge menu. Forecast is ABOVE the toolbar, so its controls never lift. */
.map-dock{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-items:end;gap:0;min-width:0;pointer-events:none}
#mapPanel .map-toolbar{grid-column:1;grid-row:2;display:flex;align-items:center;gap:10px;position:relative;inset:auto;margin:0 -12px;width:calc(100% + 24px);min-height:52px;padding:6px 12px;border:0;border-top:1px solid #ffffff24;border-radius:0;background:rgba(10,10,10,.92);box-shadow:0 -5px 24px #0003;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);pointer-events:auto}
#mapPanel .map-controls{display:flex;flex:1 1 auto;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:12px;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:2px;scrollbar-width:none;pointer-events:auto}
#mapPanel .map-controls::-webkit-scrollbar{display:none}
#mapPanel .layer-controls{display:flex;flex:0 0 auto;align-items:center;flex-wrap:nowrap;gap:4px;min-width:0;max-width:none;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;overflow:visible}
#mapPanel .layer-chip{flex:0 0 auto;scroll-snap-align:start;min-height:36px;font-size:10px;padding:7px 10px;border-radius:7px;border:1px solid transparent;background:transparent;color:#c5c5c5;white-space:nowrap}
#mapPanel .layer-chip.on{border-color:#ffd24a5c;background:#ffd24a13;color:var(--accent)}
#mapPanel .layer-chip[data-layer=wind].on{color:#eee;border-color:#ffffff40;background:#ffffff09}
#mapPanel .layer-chip[data-layer=thermal].on{color:var(--thermal);border-color:#e8a68c66;background:#e8a68c0d}
#mapPanel .layer-chip:hover{background:#ffffff16}
#mapPanel .zoom-controls{display:flex;order:3;flex:0 0 auto;align-items:center;gap:2px;padding:0 0 0 10px;margin:0;border:0;border-left:1px solid #ffffff20;border-radius:0;background:none;box-shadow:none;backdrop-filter:none}
#mapPanel .zoom-controls .icon-button{width:36px;height:36px;border:0;background:transparent;border-radius:7px;color:#ddd;scroll-snap-align:end}
#mapPanel .zoom-controls .icon-button:hover{background:#ffffff16}
#mapPanel .map-footnote{display:flex;order:2;flex:0 0 auto;align-items:center;gap:10px;position:static;margin:0 0 0 auto;padding:0;max-width:none;font:8px/1.5 var(--mono);color:#989898;text-shadow:none;white-space:nowrap;pointer-events:none}
#mapPanel .map-footnote>span:first-child{max-width:none}
#mapPanel #mapZoom{white-space:nowrap}
#mapPanel .forecast-toggle{display:flex;flex:0 0 auto;align-items:center;justify-content:center;gap:7px;margin:0;min-height:36px;padding:7px 10px;border:1px solid #ffffff80;border-radius:7px;font-size:10px;color:#f2f2f2;background:#ffffff04;white-space:nowrap;font-weight:500}
#mapPanel .forecast-toggle svg{width:15px;height:15px}
#mapPanel .forecast-toggle .forecast-chevron{width:12px;height:12px;transform:rotate(-90deg)}
#mapPanel .forecast-toggle[aria-expanded=true]{background:#ffd24a13;border-color:#ffd24a66;color:var(--accent);font-weight:400}
#mapPanel .forecast-toggle[aria-expanded=true] .forecast-chevron{transform:rotate(90deg)}
/* Compact time explorer: no heading row, stacked cards or internal vertical scroll. */
#mapPanel #timelinePanel{grid-column:1;grid-row:1;width:min(100%,740px);max-width:100%;min-width:0;min-height:0;max-height:none;margin:0 0 6px;overflow:hidden;align-self:end;border-radius:10px}
#mapPanel #timelinePanel:not(.mobile-open){display:none}
#mapPanel #timelineBody{display:grid;grid-template-columns:96px 88px minmax(0,1fr) repeat(4,32px);grid-template-areas:'date hour reading now play info close' 'scrub scrub scrub scrub scrub scrub scrub' 'days days days days days days days';grid-template-rows:32px 28px 24px;align-items:center;gap:4px 6px;padding:8px 10px;min-width:0;overflow:visible}
#mapPanel #timelineBody>*{min-width:0;margin:0}
#mapPanel #timelineBody .forecast-day-jump{grid-area:date}
#mapPanel #timelineBody .forecast-hour-jump{grid-area:hour}
#mapPanel #timelineBody label select{display:block;width:100%;min-width:0;height:32px;min-height:32px;margin:0;padding:4px 5px;border:1px solid #ffffff80;border-radius:6px;background:#ffffff06;color:#f2f2f2;font:11px var(--mono);font-weight:500}
#mapPanel #timelineBody .forecast-readout{grid-area:reading;padding:0 4px;overflow:hidden;white-space:nowrap;color:#ddd;line-height:1.35}
#mapPanel #timelineBody .readout-main{display:flex;align-items:baseline;gap:9px}
#mapPanel #timelineBody .readout-main strong{font:16px var(--mono);color:var(--accent)}
#mapPanel #timelineBody .readout-main>span{font-size:10px;overflow:hidden;text-overflow:ellipsis}
#mapPanel #timelineBody .forecast-readout small{display:block;font:8px/1.5 var(--mono);color:#aaa}
#mapPanel #timelineBody .forecast-now{grid-area:now}
#mapPanel #timelineBody .forecast-play{grid-area:play}
#mapPanel #timelineBody .forecast-info{grid-area:info}
#mapPanel #timelineBody .forecast-close{grid-area:close}
#mapPanel #timelineBody>button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;min-height:32px;padding:0;border:1px solid #ffffff80;border-radius:6px;background:#ffffff04;font:9px var(--mono);color:#f2f2f2;font-weight:500}
#mapPanel #timelineBody>button:hover{border-color:#ffd24a80;color:var(--accent);background:#ffd24a0a}
#mapPanel #timelineBody>button svg{width:15px;height:15px}
#mapPanel #timelineBody .forecast-scrubber{grid-area:scrub;display:flex;align-items:center;height:28px;min-width:0;padding:0 2px}
#mapPanel #timeSlider{display:block;width:100%;height:28px;min-height:28px;margin:0;padding:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:ew-resize;touch-action:pan-y}
#mapPanel #timeSlider::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--progress),#535353 var(--progress),#535353 100%)}
#mapPanel #timeSlider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:16px;margin-top:-6.5px;border:2px solid #111;border-radius:3px;background:var(--accent);box-shadow:0 0 0 1px var(--accent)}
#mapPanel #timeSlider::-moz-range-track{height:3px;border-radius:3px;background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--progress),#535353 var(--progress),#535353 100%)}
#mapPanel #timeSlider::-moz-range-thumb{width:9px;height:13px;border:2px solid #111;border-radius:3px;background:var(--accent);box-shadow:0 0 0 1px var(--accent)}
#mapPanel #daySelector{grid-area:days;display:flex;align-items:center;gap:4px;margin:0;padding:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none}
#mapPanel #daySelector::-webkit-scrollbar{display:none}
#mapPanel #daySelector .day-button{display:flex;justify-content:center;align-items:center;flex:1 0 43px;min-width:0;min-height:24px;height:24px;padding:3px 4px;gap:4px;border-color:transparent;scroll-snap-align:start;border-radius:4px}
#mapPanel #daySelector .day-button.active{border-color:#ffd24a60;background:#ffd24a0d}
#mapPanel #daySelector .day-name,#mapPanel #daySelector .day-date{display:inline;font:8px/1 var(--mono);letter-spacing:0;color:inherit}
@supports not (backdrop-filter:blur(1px)){
 #mapPanel .map-property-label,#mapPanel .map-top-actions,#mapPanel .timeline-panel,#mapPanel .map-inspector{background:#151515f2}
}
@media(min-width:768px){
 main{grid-template-rows:44px minmax(320px,1fr) 28px}
 .field-wire{grid-row:3}
}
#mapWorkspace[open]{grid-template-rows:auto minmax(320px,1fr);grid-template-areas:'toolbar toolbar' 'map agent'}
@media(max-width:1023px){
 #mapWorkspace[open]{grid-template-areas:'toolbar' 'map';grid-template-rows:auto minmax(320px,1fr)}
  #mapWorkspace[open].agent-view,body.forecast-expanded #mapWorkspace[open].agent-view{grid-template-areas:'toolbar' 'agent';grid-template-rows:auto minmax(250px,1fr)}
}
@media(max-width:767px){
 .app-header{height:60px;min-height:60px;padding-top:6px;padding-bottom:6px}
 main{padding:8px 10px}.action-launcher{margin-bottom:6px}.action-grid{padding:0 0 2px}
 .mobile-property{padding:0;border:0;margin-bottom:6px}.property-rail{padding-bottom:3px}
 .home-view-tabs{padding:3px;margin-bottom:8px}
 #homeWorkspace>#mapPanel.map-surface{height:max(280px,calc(100svh - 320px - env(safe-area-inset-bottom,0px)));min-height:280px}
 #mapWorkspace #mapPanel.map-surface{height:100%;min-height:320px}
 #mapPanel .map-hud{inset:8px 8px 0;gap:8px}
 #mapPanel .map-topbar{gap:8px}
 #mapPanel .map-property-label{padding:0 8px;border-radius:10px;flex:1 1 auto}
 #mapPanel #mapProperty{font-size:16px;min-height:44px;padding-right:20px}
 #mapPanel #mapSubtitle,#mapPanel .property-overview-button{display:none}
 #mapPanel .map-top-actions{padding:0 2px;gap:0;border-radius:10px}
 #mapPanel .map-top-actions .icon-button{width:44px;height:44px}
 #mapPanel .map-time{display:block;padding:3px;font-size:8px;max-width:74px}
 #mapPanel .map-toolbar{margin-inline:-8px;width:calc(100% + 16px);padding:6px 8px;min-height:56px;gap:7px}
 #mapPanel .map-controls{gap:9px}
 #mapPanel .layer-controls{flex:0 0 auto;padding:0;gap:3px}
 #mapPanel .layer-chip{min-height:44px;padding:7px 9px;font-size:11px}
 #mapPanel .zoom-controls{order:2;padding-left:8px;gap:0}
 #mapPanel .zoom-controls .icon-button{width:44px;height:44px}
 #mapPanel .map-footnote{order:3;font-size:8px;margin-left:0}
 #mapPanel .forecast-toggle{width:44px;height:44px;min-height:44px;padding:0}
 #mapPanel .forecast-toggle>.forecast-label,#mapPanel .forecast-toggle>.forecast-chevron{display:none}
 #mapPanel .forecast-toggle svg{width:19px;height:19px}

}
@media(prefers-contrast:more){
 #mapPanel .map-property-label,#mapPanel .map-top-actions,#mapPanel .timeline-panel,#mapPanel .map-inspector{background:#101010;border-color:#aaa;backdrop-filter:none}
}

@container (max-width:760px){
 #mapPanel .map-footnote{order:4;margin-left:0}
 #mapPanel .zoom-controls{order:3;margin-left:auto}
}
@supports not (backdrop-filter:blur(1px)){#mapPanel .map-toolbar{background:#111}}
@media(prefers-contrast:more){#mapPanel .map-toolbar{background:#101010;border-color:#aaa;backdrop-filter:none}}

/* Compact composition is based on actual map width, including an open Boone pane. */
@container (max-width:620px){
 #mapPanel #timelineBody{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px 44px;grid-template-areas:'date hour now play' 'reading scrub scrub info';grid-template-rows:44px 44px;padding:6px;gap:4px}
 #mapPanel #timelineBody label select{height:44px;min-height:44px;padding:4px;font-size:16px;letter-spacing:-.4px}
 #mapPanel #timelineBody>button{width:44px;height:44px;min-height:44px;font-size:11px}
 #mapPanel #timelineBody>button svg{width:17px;height:17px}
 #mapPanel #timelineBody .forecast-close,#mapPanel #daySelector{display:none}
 #mapPanel #timelineBody .forecast-readout{padding:0 2px;line-height:1.2}
 #mapPanel #timelineBody .readout-main{display:block}
 #mapPanel #timelineBody .readout-main strong{display:block;font-size:13px;line-height:1.2}
 #mapPanel #timelineBody .readout-main>span{display:block;font-size:10px;line-height:1.2}
 #mapPanel #timelineBody .readout-gust,#mapPanel #timelineBody .readout-rain{display:none}
 #mapPanel #timelineBody .forecast-readout small{font-size:8px;line-height:1.3}
 #mapPanel #timelineBody .forecast-scrubber,#mapPanel #timeSlider{height:44px;min-height:44px}
}
@media(max-width:767px){
 #mapPanel #timelineBody{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px 44px;grid-template-areas:'date hour now play' 'reading scrub scrub info';grid-template-rows:44px 44px;padding:6px;gap:4px}
 #mapPanel #timelineBody label select{height:44px;min-height:44px;padding:4px;font-size:16px;letter-spacing:-.4px}
 #mapPanel #timelineBody>button{width:44px;height:44px;min-height:44px;font-size:11px}
 #mapPanel #timelineBody>button svg{width:17px;height:17px}
 #mapPanel #timelineBody .forecast-close,#mapPanel #daySelector{display:none}
 #mapPanel #timelineBody .forecast-readout{padding:0 2px;line-height:1.2}
 #mapPanel #timelineBody .readout-main{display:block}
 #mapPanel #timelineBody .readout-main strong{display:block;font-size:13px;line-height:1.2}
 #mapPanel #timelineBody .readout-main>span{display:block;font-size:10px;line-height:1.2}
 #mapPanel #timelineBody .readout-gust,#mapPanel #timelineBody .readout-rain{display:none}
 #mapPanel #timelineBody .forecast-readout small{font-size:8px;line-height:1.3}
 #mapPanel #timelineBody .forecast-scrubber,#mapPanel #timeSlider{height:44px;min-height:44px}
}