/* Responsive rules extend the same ADS shell; public navigation is mobile-first in shell.css. */
@media (max-width:1180px){
  .detail-grid,.form-map-layout{grid-template-columns:1fr}
  .form-map-layout .map-card{position:static}
  .staff-topbar-context small{display:none}
}

/* Staff SideNav becomes an overlay drawer at tablet/mobile widths. */
@media (max-width:900px){
  :root{--app-page-gutter:var(--ds-space-200)}
  .console .workspace{margin-left:0}
  .sidebar{top:calc(var(--app-banner-height) + var(--app-topnav-height));width:min(344px,calc(100vw - var(--ds-space-200)));max-width:none;transform:translateX(-105%);visibility:hidden;box-shadow:var(--ds-shadow-overlay)}
  .drawer-open .sidebar{transform:translateX(0);visibility:visible}
  .drawer-open{overflow:hidden}
  #nav-close{display:inline-flex}
  .sidebar-head{padding-right:var(--ds-space-100)}
  .sidebar .nav-link{min-height:44px}
  .sidebar-bottom{padding-bottom:max(var(--ds-space-150),env(safe-area-inset-bottom))}
  .nav-backdrop{inset:calc(var(--app-banner-height) + var(--app-topnav-height)) 0 0}
  .staff-topbar-context,.staff-topbar-clock{display:none}
  .staff-topbar>.brand span:last-child,.staff-account-link span{display:none}
  .staff-topbar>.brand{max-width:none}

  main,.console main{padding:var(--ds-space-250) var(--ds-space-200)}
  .page-heading{gap:var(--ds-space-150)}
  .two-column,.operations-grid,.detail-grid,.form-map-layout,.account-layout{grid-template-columns:1fr}
  .form-grid,.permission-grid{grid-template-columns:1fr}
  .form-map-layout .map-card{position:static}
  .login-layout{grid-template-columns:1fr;gap:var(--ds-space-250);max-width:540px;margin:var(--ds-space-250) auto}
  .login-roles{display:none}
  body.live-page .workspace{left:0;margin-left:0}
}

@media (max-width:767px){
  .map-frame,.map-large .map-frame{height:470px}
  .map-toolbar{left:var(--ds-space-100);right:var(--ds-space-100);top:var(--ds-space-100)}
  .map-context{max-width:60%}
  .map-actions{gap:var(--ds-space-050)}
  .map-actions>.button{display:none}
  .layer-options{position:fixed;inset:auto var(--ds-space-100) var(--ds-space-100);width:auto;max-height:calc(100dvh - 104px);z-index:360}
  .map-frame:has(.layer-menu[open]){isolation:auto;overflow:visible;z-index:320}
  .maplibregl-ctrl-top-right{top:64px}
  .telemetry-row{grid-template-columns:30px minmax(0,1fr)}
  .telemetry-journey{grid-column:2}

  .table-wrap{overflow:visible}
  .table-wrap table,.table-wrap tbody,.table-wrap tr,.table-wrap td{display:block;width:100%}
  .table-wrap thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .table-wrap tr{padding:var(--ds-space-100) var(--ds-space-150);border-top:1px solid var(--ds-border)}
  .table-wrap tbody tr:first-child{border-top:0}
  .table-wrap td{display:grid;grid-template-columns:minmax(96px,.35fr) minmax(0,1fr);gap:var(--ds-space-100);padding:var(--ds-space-075) 0;border:0}
  .table-wrap td:before{content:attr(data-label);color:var(--ds-text-subtle);font:var(--ds-font-body-small);font-weight:var(--ds-font-weight-medium)}
  .table-wrap td[colspan]:before{display:none}.table-wrap td[colspan]{display:block}

  .demo-map-wrap .map-frame{height:calc(100dvh - 210px);min-height:480px}
}

/* Live operations map: each floating surface gets one reserved lane. */
@media (max-width:820px){
  .eoc-map-dock{left:var(--ds-space-100);top:var(--ds-space-100);flex-direction:row;width:calc(100% - 72px);max-width:none;overflow-x:auto;scrollbar-width:thin}
  .eoc-map-dock>button{min-width:max-content;min-height:40px;padding:0 var(--ds-space-100)}
  .ops-status-bar{left:var(--ds-space-100);right:var(--ds-space-100);top:112px;max-width:none;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
  .live-search-island{left:var(--ds-space-100);right:var(--ds-space-100);top:60px;width:auto}
  .live-list-island{left:var(--ds-space-100);right:var(--ds-space-100);top:176px;width:auto;max-height:calc(100% - 184px)}
  .live-intake-island{top:auto;bottom:var(--ds-space-100);max-height:min(76vh,calc(100% - 80px))}
  .live-intake-form{max-height:calc(min(76vh,calc(100% - 80px)) - 48px)}
  .live-compact-list{max-height:calc(100dvh - var(--app-banner-height) - var(--app-topnav-height) - 176px)}
  .context-sheet{left:var(--ds-space-100);right:var(--ds-space-100);top:auto;bottom:var(--ds-space-100);width:auto;max-height:58vh}
  .context-sheet-body{max-height:calc(58vh - 56px)}
  .context-recent{display:none}
  .operations-drawer{width:min(440px,100%)}
  .live-map-shell .map-toolbar{top:164px;right:var(--ds-space-100)}
  .live-map-shell .layer-options{position:fixed;inset:auto var(--ds-space-100) var(--ds-space-100);max-height:calc(100dvh - 112px)}
  .live-map-shell .maplibregl-ctrl-top-right{right:var(--ds-space-100)!important;bottom:108px!important}
  .live-map-shell .map-message{bottom:104px;max-width:calc(100% - 32px)}
  .live-map-shell .map-card>.telemetry{left:var(--ds-space-100);right:var(--ds-space-100);bottom:var(--ds-space-100);width:auto;max-height:28vh;transform:none}
  .live-map-shell .telemetry-list{max-height:calc(28vh - 48px);grid-template-columns:1fr}
  .live-map-shell:has(.live-list-island:not([hidden])) .map-toolbar,.live-map-shell:has(.context-sheet:not([hidden])) .map-toolbar{visibility:hidden}
  .live-map-shell:has(.live-list-island:not([hidden])) .telemetry,.live-map-shell:has(.context-sheet:not([hidden])) .telemetry,.live-map-shell:has(.operations-drawer.open) .telemetry{opacity:0;pointer-events:none}
}

@media (max-width:560px){
  .staff-topbar{padding-inline:var(--ds-space-100)}
  .staff-topbar>.brand .brand-mark{width:30px;height:30px}
  .staff-topbar .display-tools-button{padding-inline:var(--ds-space-100)}
  .staff-topbar .display-tools-panel{position:fixed;right:var(--ds-space-100);top:calc(var(--app-banner-height) + var(--app-topnav-height) + var(--ds-space-100));bottom:auto}
  .page-heading>.button,.page-heading>.button-row{width:100%}
  .page-heading>.button{justify-content:center}
  .detail-list{grid-template-columns:1fr;gap:var(--ds-space-025)}
  .detail-list dd{margin-bottom:var(--ds-space-100)}
  .dispatch-type-grid,.quick-incident-grid,.specific-dispatch{grid-template-columns:1fr}
  .place-category-grid,.operations-tabs{grid-template-columns:1fr 1fr}
  .operations-tabs{padding:0}.operations-tabs button{border-bottom:1px solid var(--ds-border)}
  .live-map-shell .map-card>.telemetry{max-height:26vh}
  .live-map-shell .telemetry-list{max-height:calc(26vh - 48px)}
  .live-map-shell .maplibregl-ctrl-top-right{bottom:var(--ds-space-500)!important}
  .live-map-shell .map-message{bottom:var(--ds-space-400);width:calc(100% - 16px);max-width:none}
  .context-sheet{max-height:62vh}.context-sheet-body{max-height:calc(62vh - 56px)}
}

@media (max-width:390px){
  .staff-topbar>.brand span:last-child{display:none}
  .staff-account-link{padding-inline:var(--ds-space-050)}
  .public-header .brand small{display:none}
  .eoc-map-dock{max-width:calc(100% - 56px);overflow-x:auto}
}

@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
html[data-reduce-motion="true"] *,html[data-reduce-motion="true"] *:before,html[data-reduce-motion="true"] *:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}

@media print{
  .sidebar,.staff-topbar,.public-header,.page-footer,.display-tools,.button,form,.map-actions,.simulation-bar,.eoc-map-dock,.live-search-island,.operations-drawer,.demo-map-toolbar{display:none!important}
  .console .workspace{margin:0}body{background:var(--ds-surface);color:var(--ds-text)}.education-bar{position:static;background:var(--ds-surface);color:var(--ds-text)}.panel{background:var(--ds-surface);border-color:var(--ds-border-bold);break-inside:avoid}
  main,.console main{padding:0}.map-large .map-frame{height:330px}.telemetry-list{max-height:none;overflow:visible}
}

/* Kaithuna map/tool layout overrides. Keep icon tools clear of search, lists and telemetry. */
@media (max-width:820px){
  .eoc-map-dock{left:var(--ds-space-100);right:var(--ds-space-100);top:auto;bottom:var(--ds-space-100);width:auto;max-width:none;height:52px;flex-direction:row;align-items:center;justify-content:space-between;overflow:visible;padding:var(--ds-space-050)}
  .eoc-map-dock>button{min-width:42px;width:42px;height:42px;min-height:42px;padding:0;flex:0 0 42px}
  .eoc-map-dock>button[data-tooltip]::after{display:none}
  .dock-divider{width:1px;height:28px;margin:0 var(--ds-space-025)}
  .live-search-island{left:var(--ds-space-100);right:var(--ds-space-100);top:var(--ds-space-100);width:auto}
  .ops-status-bar{left:var(--ds-space-100);right:var(--ds-space-100);top:60px;max-width:none}
  .live-list-island{left:var(--ds-space-100);right:var(--ds-space-100);top:124px;width:auto;max-height:calc(100% - 192px)}
  .live-intake-island{top:auto;bottom:68px;width:auto;max-height:min(72vh,calc(100% - 144px))}
  .live-intake-form{max-height:calc(min(72vh,calc(100% - 144px)) - 48px)}
  .live-map-shell .map-toolbar{top:124px;right:var(--ds-space-100)}
  .live-map-shell .maplibregl-ctrl-top-right{right:var(--ds-space-100)!important;bottom:72px!important}
  .live-map-shell .map-message{bottom:72px}
  .live-map-shell .map-card>.telemetry{left:var(--ds-space-100);right:var(--ds-space-100);bottom:68px;width:auto;max-height:24vh;transform:none}
  .live-map-shell .telemetry-list{max-height:calc(24vh - 48px)}
}

@media (max-width:560px){
  .eoc-map-dock{gap:1px}
  .eoc-map-dock>button{width:38px;min-width:38px;height:40px;min-height:40px;flex-basis:38px}
  .eoc-map-dock .icon{width:17px;height:17px}
  .dock-count{right:-3px;top:-4px}
  .ops-status-bar{gap:var(--ds-space-050) var(--ds-space-100);overflow-x:auto;white-space:nowrap}
  .live-map-shell .map-card>.telemetry{display:none}
  .live-map-shell .maplibregl-ctrl-top-right{bottom:68px!important}
  .live-map-shell .map-message{bottom:68px}
}

@media (max-width:390px){
  .eoc-map-dock{left:4px;right:4px;bottom:4px;padding:3px}
  .eoc-map-dock>button{width:36px;min-width:36px;flex-basis:36px}
}

/* --------------------------------------------------------------------------
   Final map control layout — reset/layers always own the middle-right edge.
   This is intentionally independent of viewport width so embedded picker maps,
   public maps, demo maps and the live operations map all behave the same way.
   -------------------------------------------------------------------------- */
.map-frame{container-type:inline-size;container-name:kaithuna-map}

/* Context/focus information stays in the quiet top-left lane. */
.map-card:not(.map-mode-demo) .map-toolbar{
  left:var(--ds-space-150);right:auto;top:var(--ds-space-150);width:auto;
  max-width:min(360px,calc(100% - 120px));display:block;z-index:38
}
.map-card:not(.map-mode-demo) .map-toolbar .map-context{max-width:min(360px,100%)}
.demo-map-toolbar{
  left:var(--ds-space-150);right:auto;top:var(--ds-space-150);
  max-width:min(560px,calc(100% - 120px));z-index:38
}

/* Project map actions are a single vertical rail at the middle-right edge. */
.map-edge-actions{
  position:absolute;right:var(--ds-space-150);top:50%;z-index:46;
  display:flex;flex-direction:column;align-items:center;gap:var(--ds-space-050);
  transform:translateY(-50%);pointer-events:auto
}
.map-edge-actions .layer-menu{position:relative}
.map-edge-actions .layer-options{
  left:auto;right:calc(100% + var(--ds-space-100));top:50%;
  width:min(320px,calc(100vw - 112px));max-height:min(72vh,420px);
  transform:translateY(-50%)
}

/* MapLibre navigation owns top-right. Scale/attribution remain at the bottom. */
.map-card .maplibregl-ctrl-top-right{top:var(--ds-space-150);right:var(--ds-space-150)}
.map-card .maplibregl-ctrl-top-left{top:var(--ds-space-150);left:var(--ds-space-150)}
.map-card .maplibregl-ctrl-bottom-left{left:var(--ds-space-150);bottom:var(--ds-space-100)}
.map-card .maplibregl-ctrl-bottom-right{right:var(--ds-space-100);bottom:var(--ds-space-100)}

/* Operations uses the same right-edge action lane instead of competing with
   search/status islands across the top of the map. */
.live-map-shell .map-toolbar{left:auto;right:auto;top:auto;width:auto;max-width:none}
.live-map-shell .map-context{display:none}
.live-map-shell .map-edge-actions{right:var(--ds-space-150);top:50%;z-index:48}
.live-map-shell .maplibregl-ctrl-top-right{
  top:var(--ds-space-150)!important;right:var(--ds-space-150)!important;bottom:auto!important
}
.live-map-shell .maplibregl-ctrl-bottom-left{left:var(--ds-space-150);bottom:var(--ds-space-100)}
.live-map-shell .maplibregl-ctrl-bottom-right{right:var(--ds-space-100);bottom:var(--ds-space-100)}

/* On compact screens the layers sheet becomes a bottom sheet, but its trigger
   remains on the middle-right edge so it never returns to the crowded top row. */
@media (max-width:767px){
  .map-card:not(.map-mode-demo) .map-toolbar{left:var(--ds-space-100);top:var(--ds-space-100);max-width:calc(100% - 72px)}
  .demo-map-toolbar{left:var(--ds-space-100);top:var(--ds-space-100);max-width:calc(100% - 72px)}
  .map-edge-actions,.live-map-shell .map-edge-actions{right:var(--ds-space-100);top:50%}
  .map-edge-actions .layer-options,
  .live-map-shell .map-edge-actions .layer-options{
    position:fixed;left:var(--ds-space-100);right:var(--ds-space-100);top:auto;bottom:var(--ds-space-100);
    width:auto;max-height:calc(100dvh - 104px);transform:none;z-index:360
  }
  .map-frame:has(.layer-menu[open]){isolation:auto;overflow:visible;z-index:320}
  .map-card .maplibregl-ctrl-top-right{top:var(--ds-space-100);right:var(--ds-space-100)}
  .live-map-shell .maplibregl-ctrl-top-right{top:var(--ds-space-100)!important;right:var(--ds-space-100)!important;bottom:auto!important}
}

/* Very short/narrow embedded map cards keep the rail comfortably inside the map. */
@container kaithuna-map (max-width:420px){
  .map-edge-actions{right:var(--ds-space-100)}
  .map-icon-control{width:38px;height:38px;min-height:38px}
  .demo-focus-readout{display:none!important}
}