/* Map/header boundary only. Production dashboard and mobile sheet are untouched.
   Native header positioning recovered from Grid commit 487a067b. */
@media (min-width:981px) {
  html body .header[data-grid-shell] {position:relative!important;display:flex!important;align-items:center!important;min-width:0!important;overflow:visible!important}
  html body .header[data-grid-shell] .brand {position:static!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;display:block!important;opacity:1!important;visibility:visible!important;margin:0!important}
  html body .header[data-grid-shell] .brand img {width:100%!important;height:100%!important;display:block!important;object-fit:contain!important;object-position:left center!important;opacity:1!important;visibility:visible!important}
  html body .header[data-grid-shell] .search {position:relative!important;right:auto!important;left:auto!important;top:auto!important;bottom:auto!important;transform:none!important;z-index:3!important;order:0!important;margin:0!important}
  html body .header[data-grid-shell] .search input {height:42px!important;padding:0 36px 0 40px!important;border-radius:13px!important;font-size:13px!important}
  html body .header[data-grid-shell] .search svg {left:13px!important;top:12px!important;width:18px!important;height:18px!important}
  html body .header[data-grid-shell] .clear-search {right:7px!important;top:7px!important;width:28px!important;height:28px!important}
  html body .header[data-grid-shell] .map-instruction {display:none!important}
}
/* Preserve the 470px finished rail at narrow desktop widths. Use two fixed
   header rows rather than squeeze controls underneath the sidebar or offscreen. */
@media (min-width:981px) and (max-width:1279px) {
  html body .header[data-grid-shell] {display:grid!important;grid-template-columns:146px minmax(0,1fr)!important;grid-template-rows:36px 36px!important;grid-template-areas:"grid-brand grid-search" "grid-brand grid-controls"!important;gap:3px 12px!important;padding:6px 14px 3px 474px!important}
  html body .header[data-grid-shell] .grid-condition-brand-stack {grid-area:grid-brand!important;width:146px!important;align-self:stretch!important;justify-content:flex-end!important}
  html body .header[data-grid-shell] .brand {width:146px!important;height:50px!important}
  html body .header[data-grid-shell] .search {grid-area:grid-search!important;width:100%!important;max-width:330px!important;min-width:0!important;height:36px!important;justify-self:start!important}
  html body .header[data-grid-shell] .search input {height:34px!important;font-size:11px!important}
  html body .header[data-grid-shell] .search svg {top:8px!important}
  html body .header[data-grid-shell] .clear-search {top:3px!important}
  html body .header[data-grid-shell] .grid-condition-control {grid-area:grid-controls!important;width:100%!important;align-self:start!important}
  .header[data-grid-shell] .grid-condition-toggle {height:30px;font-size:11px;padding:0;gap:5px}
  .header[data-grid-shell] .grid-condition-options {gap:5px}
  .header[data-grid-shell] .grid-condition-view-wrap {flex:0 1 138px;min-width:104px;max-width:138px}
  .header[data-grid-shell] .grid-condition-view {height:30px;font-size:11px;padding:0 20px 0 7px}
  .header[data-grid-shell] .grid-condition-timeframe-label {top:32px;font-size:9px}
  .header[data-grid-shell] .grid-condition-about {margin-top:2px}
  .header[data-grid-shell] .grid-condition-about summary {width:24px;height:24px}
  .header[data-grid-shell] .grid-condition-lighthouse-toggle {font-size:10px;height:20px;padding:0}
  .header[data-grid-shell] .grid-condition-custom {position:absolute;top:-39px;right:0}
  .header[data-grid-shell] .grid-condition-date {height:34px;width:108px}
  html body .header[data-grid-shell][data-grid-custom="1"] .search {width:calc(100% - 116px)!important;min-width:100px!important}
}
/* Mobile gets a dedicated map toolbar, not controls on top of the search/logo.
   Its extra height is taken from the MAP canvas, never from the finished sheet. */
@media (max-width:980px) {
  html body .header[data-grid-shell] {height:calc(var(--header-h) + 44px)!important;grid-template-rows:calc(var(--header-h) - 8px)!important;align-content:start!important;overflow:visible!important}
  html body .header[data-grid-shell][data-grid-custom="1"] {height:calc(var(--header-h) + 82px)!important}
  html body .header[data-grid-shell] .grid-condition-brand-stack {display:contents!important}
  html body .header[data-grid-shell] .brand {grid-area:brand!important;position:static!important;transform:none!important;margin:0!important}
  html body .header[data-grid-shell] .search {grid-area:search!important;position:relative!important;top:auto!important;right:auto!important;transform:none!important}
  .header[data-grid-shell] .grid-condition-lighthouse-toggle {position:absolute;left:12px;top:calc(var(--header-h) + 5px);bottom:auto;height:30px;padding:0;gap:5px}
  html body .header[data-grid-shell] .grid-condition-control {position:absolute!important;left:91px!important;right:8px!important;top:calc(var(--header-h) + 5px)!important;bottom:auto!important;width:auto!important;max-width:none!important;margin:0!important}
  .header[data-grid-shell] .grid-condition-bar,.header[data-grid-shell] .grid-condition-lower-row {justify-content:flex-start;gap:5px}
  .header[data-grid-shell] .grid-condition-toggle {height:30px;padding:0;gap:5px}
  .header[data-grid-shell] .grid-condition-options {justify-content:flex-start;flex:1 1 auto;gap:5px}
  .header[data-grid-shell] .grid-condition-view-wrap {min-width:102px;flex:1 1 135px;max-width:165px}
  .header[data-grid-shell] .grid-condition-view {height:30px;font-size:10.5px}
  .header[data-grid-shell] .grid-condition-timeframe-label {display:none!important}
  .header[data-grid-shell] .grid-condition-custom {position:absolute;top:37px;left:65px;right:34px}
  .header[data-grid-shell] .grid-condition-date {width:100%;height:30px;font-size:11px}
  .header[data-grid-shell] .grid-condition-about {margin-top:1px}
  .header[data-grid-shell] .grid-condition-about summary {width:26px;height:26px}
  .header[data-grid-shell] .grid-condition-about>div {right:0;width:min(310px,calc(100vw - 20px));z-index:60}
  .header[data-grid-shell] .grid-condition-lighthouse-label,.header[data-grid-shell] .grid-condition-toggle-label {font-size:0}
  .header[data-grid-shell] .grid-condition-lighthouse-label::after {content:"Lights";font-size:11px}
  .header[data-grid-shell] .grid-condition-toggle-label::after {content:"Grid";font-size:11px}
  .map-stage[data-grid-shell] #map {top:var(--grid-toolbar-inset,44px)!important}
  .map-stage[data-grid-shell] .grid-condition-player {top:auto;bottom:calc(var(--grid-sheet-occlusion,50%) + 8px);right:0;transform:none;width:min(296px,calc(100% - 12px));padding:9px 12px;max-height:var(--grid-player-space,340px);overflow-y:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;row-gap:0;border-radius:12px 0 0 12px}
  .map-stage[data-grid-shell] .grid-condition-mode-label {grid-column:1 / -1;font-size:8px;margin-bottom:4px}
  .map-stage[data-grid-shell] .grid-condition-state {grid-column:1;grid-row:2;font-size:18px;align-self:center;margin:0}
  .map-stage[data-grid-shell] .grid-condition-time-block {grid-column:2;grid-row:2;text-align:right;margin:0}
  .map-stage[data-grid-shell] .grid-condition-date-label {font-size:10px}
  .map-stage[data-grid-shell] .grid-condition-replay-clock {font-size:19px;margin-top:2px}
  .map-stage[data-grid-shell] .grid-condition-charge {grid-column:1 / -1;font-size:13px;margin:5px 0 0}
  .map-stage[data-grid-shell] .grid-condition-average {grid-column:1 / -1;font-size:11px;margin:3px 0 0}
  .map-stage[data-grid-shell] .grid-condition-average-multiple {font-size:12px}
  .map-stage[data-grid-shell] .grid-condition-timeline-wrap {grid-column:1 / -1;margin-top:5px;padding-top:7px}
  .map-stage[data-grid-shell] .grid-condition-status {grid-column:1 / -1;font-size:13px;line-height:1.25;margin:5px 0 6px;min-height:0}
  .map-stage[data-grid-shell] .grid-condition-transport {grid-column:1 / -1;grid-template-columns:32px 1fr 32px;gap:6px}
  .map-stage[data-grid-shell] .grid-condition-transport.is-live {grid-template-columns:1fr}
  .map-stage[data-grid-shell] .grid-condition-transport button {height:30px;font-size:12px}
  .map-stage[data-grid-shell] .grid-condition-retry {grid-column:1 / -1}
}