/* ENC Weather Level III workstation preview 1.9.23 — presentation only. */
:root{--ws-bg:#07111b;--ws-raised:#0d1e2d;--ws-pane:#102638;--ws-border:#29465b;--ws-label:#8db3c9;--ws-accent:#35b9e5;--ws-text:#e8f4ff}
html,body{min-height:100%;background:var(--ws-bg);color:var(--ws-text)}
.ws-workstation header{padding:10px 14px;min-height:69px;border-bottom:1px solid #31566e;background:linear-gradient(105deg,#0c2336,#112c40 60%,#0c2336);display:flex;align-items:center;flex-wrap:wrap;gap:9px 16px}
.ws-workstation header strong{font-size:17px;letter-spacing:.03em}
.ws-workstation header small{font-size:10px;color:var(--ws-label)}
.ws-workstation header .ws-header-nav{display:flex;gap:7px;order:1;margin-left:auto}
.ws-workstation header .ws-site-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap;order:2}
.ws-workstation header .ws-site-actions .toolbar{margin:0;display:flex;align-items:center;padding:0;gap:7px;background:none;border:0}
.ws-workstation header .ws-site-actions .toolbar span{display:none}
.ws-workstation header button{font-size:11px;padding:7px 9px}
.ws-workstation #mode{display:flex;gap:5px}
.ws-workstation #mode button{min-width:0;white-space:nowrap}
.ws-workstation #site{min-width:150px;max-width:220px}
.ws-workstation button,.ws-workstation select{border-color:#395e77;background:#18364b}
.ws-workstation button:hover{background:#245472}
.ws-workstation button.active{background:#1d6b93;border-color:#5bd3fa}
.ws-workstation main{max-width:none;margin:0;padding:0;display:flex;flex-direction:column;min-height:calc(100dvh - 69px)}
.ws-workstation .ws-shell{display:grid;grid-template-columns:264px minmax(0,1fr) 312px;align-items:stretch;gap:0;min-height:0;flex:1}
.ws-workstation .ws-sidebar{background:#0c1e2d;border-right:1px solid var(--ws-border);min-width:0;max-height:calc(100dvh - 196px);min-height:540px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#3b617a #0c1e2d}
.ws-heading{display:flex;flex-direction:column;gap:3px;padding:13px 14px 10px;border-bottom:1px solid #244359}
.ws-heading strong{font-size:12px;letter-spacing:.05em;text-transform:uppercase}
.ws-heading small{color:var(--ws-label);font-size:10px}
.ws-group{border-bottom:1px solid #243e52;background:#0c1e2d}
.ws-group>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:11px 13px;cursor:pointer;color:#d9edfb;font-size:12px;font-weight:700;letter-spacing:.01em;user-select:none}
.ws-group>summary::-webkit-details-marker{display:none}
.ws-group>summary::after{content:'+';font-size:15px;color:#81b5d0}
.ws-group[open]>summary::after{content:'−'}
.ws-group>summary:hover{background:#15334a}
.ws-group-body{padding:1px 3px 8px}
.ws-workstation .ws-sidebar .toolbar{background:transparent;border:0;padding:7px 9px 4px;border-radius:0;margin:0;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ws-sidebar .toolbar button,.ws-sidebar .toolbar select{font-size:11px;padding:6px 7px;max-width:100%;min-width:0}
.ws-sidebar .toolbar button{white-space:normal}
.ws-sidebar label{font-size:11px;line-height:1.4;color:#c0d8e7;cursor:pointer}
.ws-sidebar label:has(input[type="checkbox"]){width:100%;display:flex;align-items:center;gap:6px}
.ws-sidebar input[type="checkbox"]{accent-color:var(--ws-accent)}
.ws-workstation #spcDay,.ws-workstation #spcHazardSelect,.ws-workstation #warningSelect{width:100%;max-width:100%}
.ws-sidebar #warningStatus,.ws-sidebar #fieldStatus,.ws-sidebar #activeStatus,.ws-sidebar #spcStatus,.ws-sidebar #spcHazardStatus{font-size:10px;line-height:1.45;min-width:0;flex-basis:100%;color:#86acc2}
.ws-sidebar-note{font-size:10px;color:#7f9fb1;padding:14px 13px;line-height:1.5}
.ws-workstation .ws-canvas{background:#07121c;min-width:0;min-height:0;display:flex;flex-direction:column}
.ws-map-heading{min-height:44px;border-bottom:1px solid #263f52;background:#0a1d2d;padding:8px 13px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.ws-map-heading strong{display:block;font-size:12px;letter-spacing:.03em}
.ws-map-heading span{font-size:10px;color:#85aabe}
.ws-detail-status{max-width:55%;text-align:right;min-width:0}
.ws-workstation #detailStatus{font-size:10px;line-height:1.3;color:#88b6d0}
.ws-workstation #panels{padding:7px;display:grid;gap:7px;flex:1;grid-auto-rows:minmax(0,1fr)}
.ws-workstation .panel{border-radius:5px;border-color:#38566b;background:#091b2a;min-width:0;min-height:0}
.ws-workstation .panelhead{min-height:38px;padding:5px 7px;gap:6px;background:#10293d}
.ws-workstation .panelhead .ptitle{font-size:10px;width:43px}
.ws-workstation .panelhead select{font-size:11px;padding:6px 5px;max-width:100%}
.ws-workstation .panelhead button{font-size:10px;padding:6px 7px}
.ws-workstation #panels:not(.four) .map{height:clamp(450px,calc(100dvh - 274px),1000px);min-height:450px}
.ws-workstation #panels.four .map{height:clamp(230px,calc((100dvh - 336px)/2),550px);min-height:230px}
.ws-workstation #panels.four[class*=max] .map{height:clamp(450px,calc(100dvh - 274px),1000px);min-height:450px}
.ws-workstation .readout{font-size:10px;padding:6px 8px;min-height:28px}
.ws-workstation .ws-inspector{background:#0b1e2c;border-left:1px solid var(--ws-border);min-width:0;max-height:calc(100dvh - 196px);min-height:540px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#3b617a #0b1e2c;padding:0 9px 13px}
.ws-inspector-head{padding:12px 4px 10px;border-bottom:1px solid #29475d;margin-bottom:9px;display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.ws-inspector-label strong{display:block;font-size:12px;letter-spacing:.03em}
.ws-inspector-label small{display:block;font-size:10px;line-height:1.45;color:var(--ws-label);margin-top:3px}
.ws-workstation #wsCloseDetails{font-size:10px;padding:5px 7px}
.ws-inspector-empty{text-align:center;padding:80px 14px 16px;color:#86a9bd}
.ws-inspector-empty[hidden]{display:none}
.ws-inspector-empty-icon{font-size:38px;color:#3d7290;margin-bottom:12px}
.ws-inspector-empty strong{font-size:12px;color:#c4dce9}
.ws-inspector-empty p{font-size:11px;line-height:1.6}
/* Dock existing fixed inspectors; honor their existing hidden state. */
.ws-workstation #wsInspector [role="dialog"]{position:relative!important;inset:auto!important;top:auto!important;right:auto!important;left:auto!important;bottom:auto!important;width:100%!important;max-width:none!important;max-height:none!important;margin:0 0 10px!important;overflow:visible!important;box-shadow:none!important;padding:12px!important;border-radius:6px!important;background:#10293b!important;border:1px solid #365b73!important;z-index:auto!important}
.ws-workstation #wsInspector [role="dialog"][hidden]{display:none!important}
.ws-workstation #wsInspector [role="dialog"] h2{font-size:14px!important;line-height:1.3}
.ws-workstation #wsInspector [role="dialog"] dl{grid-template-columns:minmax(70px,38%) minmax(0,1fr)!important}
.ws-workstation #wsInspector [role="dialog"] dd{overflow-wrap:anywhere!important}
.ws-workstation #wsInspector #cityEtaPopup{display:flex;flex-direction:column;max-height:min(75dvh,850px)!important;min-height:0!important}
.ws-workstation #wsInspector #cityEtaPopup[hidden]{display:none!important}
.ws-workstation #wsInspector #cityEtaRows{min-height:70px;max-height:48dvh;overflow:auto}
.ws-workstation .ws-bottom{background:#0b2030;border-top:1px solid #3c5f76;padding:7px 13px 8px;min-height:112px;display:flex;flex-direction:column;gap:3px}
.ws-workstation #timelineBar{background:none;border:0;padding:2px 0;margin:0;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.ws-workstation #timelineBar button{font-size:11px;padding:6px 8px}
.ws-workstation #timelineBar label{font-size:10px}
.ws-workstation #historyIndex{max-width:none!important;min-width:110px;flex:1}
.ws-workstation #timeReadout{font-size:11px!important;white-space:normal}
.ws-workstation #historyLoadStatus{font-size:10px!important}
.ws-workstation #speed{font-size:11px;padding:5px}
.ws-workstation #status{font-size:10px;line-height:1.4;margin:2px 1px;color:#91b4c9;max-height:40px;overflow:auto}
.ws-workstation #hcaLegend,.ws-workstation #spcLegend,.ws-workstation #spcHazardLegend{margin:5px 0 0;flex-shrink:0}
.ws-workstation .ws-about{font-size:10px;color:#7ea0b2;margin-top:2px}
.ws-workstation .ws-about>summary{cursor:pointer;padding:4px 2px}
.ws-workstation .ws-about .note{font-size:10px;line-height:1.6;color:#8eb4c9}
/* Storm controls are created by original JS, then moved into this sidebar. */
.ws-workstation #wsStormGroup #stormEtaBox{margin:3px 6px 8px;background:#102b40;border-color:#35556a}
.ws-workstation #wsStormGroup #stormEtaBox>summary{font-size:11px;line-height:1.4;padding:9px}
.ws-workstation #wsStormGroup #stormEtaControls{gap:6px;padding:7px 8px}
.ws-workstation #wsStormGroup #stormEtaControls label{min-width:93px}
.ws-workstation #wsStormGroup #stormEtaControls input{font-size:11px;width:100%;max-width:104px}
.ws-workstation #wsStormGroup #stormEtaControls button{font-size:10px;padding:7px}
.ws-workstation #wsStormGroup #stormTrackBox{margin:6px;padding:8px}
.ws-workstation #wsStormGroup .storm-eta-map-options{padding:8px;gap:8px}
.ws-workstation #wsStormGroup .storm-eta-map-options label{width:auto}
.ws-workstation #wsStormGroup #stormSavedBox{margin:7px}
.ws-workstation #wsStormGroup #stormSavedBox button{font-size:10px}
/* Graceful smaller workstations: right inspector becomes an on-demand drawer. */
@media(max-width:1150px){
 .ws-workstation .ws-shell{grid-template-columns:250px minmax(0,1fr)}
 .ws-workstation .ws-inspector{position:fixed;right:0;top:0;bottom:0;z-index:2300;width:min(360px,93vw);max-height:100dvh;min-height:0;box-shadow:-12px 0 26px #000a;transform:translateX(105%);transition:transform .18s ease}
 .ws-workstation.ws-details-open .ws-inspector{transform:translateX(0)}
 .ws-workstation #wsCloseDetails{background:#245a7b}
}
@media(min-width:781px){
 .ws-workstation.ws-layers-collapsed .ws-sidebar{display:none}
 .ws-workstation.ws-layers-collapsed .ws-shell{grid-template-columns:minmax(0,1fr) 312px}
}
@media(min-width:781px) and (max-width:1150px){
 .ws-workstation.ws-layers-collapsed .ws-shell{grid-template-columns:minmax(0,1fr)}
}
@media(min-width:1151px){
 .ws-workstation #wsCloseDetails{display:none}
 .ws-workstation.ws-hide-inspector .ws-inspector{display:none}
 .ws-workstation.ws-hide-inspector .ws-shell{grid-template-columns:264px minmax(0,1fr)}
 .ws-workstation.ws-hide-inspector.ws-layers-collapsed .ws-shell{grid-template-columns:minmax(0,1fr)}
}

@media(max-width:780px){
 .ws-workstation header{padding:8px 10px;gap:6px 9px}
 .ws-workstation header strong{font-size:14px}
 .ws-workstation header .ws-site-actions{order:3;width:100%}
 .ws-workstation header .ws-site-actions .toolbar{flex:1}
 .ws-workstation header .ws-site-actions .toolbar label{display:none}
 .ws-workstation #site{min-width:100px;width:40%;flex:1}
 .ws-workstation .ws-shell{grid-template-columns:minmax(0,1fr)}
 .ws-workstation .ws-sidebar{position:fixed;top:0;bottom:0;left:0;z-index:2290;width:min(300px,92vw);max-height:100dvh;min-height:0;box-shadow:12px 0 26px #000a;transform:translateX(-105%);transition:transform .18s ease}
 .ws-workstation.ws-layers-open .ws-sidebar{transform:translateX(0)}
 .ws-workstation #panels:not(.four) .map{height:clamp(410px,60dvh,780px);min-height:410px}
 .ws-workstation #panels.four .map{height:300px;min-height:250px}
 .ws-workstation #timelineBar{gap:5px}
 .ws-workstation #historyIndex{flex-basis:50%}
 .ws-workstation .ws-bottom{padding:6px 10px}
 .ws-workstation .ws-map-heading{padding:7px 9px}
 .ws-workstation .ws-map-heading .ws-detail-status{max-width:48%}
}
@media(prefers-reduced-motion:reduce){.ws-workstation .ws-sidebar,.ws-workstation .ws-inspector{transition:none}}