/* css/20-responsive-split.css — responsive: split-screen.
   Split from the index.html <style> block (REFACTOR-PLAN Phase 2). Load order = cascade order; do not reorder. */
/* ---------- responsive: split-screen (≈640 wide beside Google Maps) --------
   Composed as the prototype's split: the guidance banner with its speed chip
   across the top, the camera grid and the decision on the driver's left, the
   map keeping its boundary in the right column. */
@media (max-width: 900px) and (orientation: landscape){
  :root{--header-h:44px;--dock-h:58px;--toast-zone:70px}
  /* the rail keeps its gradient and both logos; the logos shrink and the
     SECTOR label drops so "12 · Al Nahyan" still fits on one row. */
  header{padding:0 12px;gap:8px}
  .brand img{height:20px}
  .famsmark img{height:14px}
  #hpSector .cap{display:none}
  .hinst{gap:8px}
  .hpill{padding:0 11px;font-size:var(--fz-body);gap:8px}
  #clock{font-size:var(--fz-body)}
  main{grid-template-columns:minmax(0,1fr) 240px;grid-template-rows:minmax(0,1fr);
    gap:10px;padding:8px 10px calc(var(--dock-h) + 4px);
    padding-bottom:var(--dock-clear,calc(var(--dock-h) + 4px))}
  #view-drive .zl{grid-column:1;grid-row:1}
  #view-drive .zm{grid-column:2;grid-row:1}
  /* at 640 the toast keeps its two wave9 slots (dedicated top strip off-Drive,
     measured map slot on Drive, see positionToast()) — just tighter: the
     non-Drive strip is narrower and the font drops a size. The old
     bottom-above-dock slot is gone (verify-wave9). */
  .toast{max-width:min(420px,calc(100vw - 32px));font-size:var(--fz-body)}
  .dp-head{padding:7px 8px 9px;gap:7px}
  .dp-body{padding:12px 8px;gap:12px}
  .guide{gap:8px;min-height:48px}
  .guide b{font-size:var(--fz-md-lg)}
  .guide span.hint{font-size:var(--fz-meta)}
  .spdchip{padding:5px 8px}
  .spdchip .big{font-size:var(--fz-md)}
  /* the gate keeps a word at this width, just the short one */
  .gate{font-size:var(--fz-meta);gap:6px;padding:6px 9px;max-width:none}
  .gate i{width:7px;height:7px}
  #gateTxt{display:none}
  #gateShort{display:inline!important}
  .nextstop{padding:5px 10px;min-height:46px}
  .nextstop b{font-size:var(--fz-meta)}
  /* wave13 split-screen: the SAME card, only the thumb steps down. The
     horizontal padding stays 14 px and the labels stay on the buttons. */
  .inc-card .top{grid-template-columns:84px minmax(0,1fr);gap:10px;padding:12px 14px 0}
  .inc-card .thumb{width:84px;height:84px}
  .inc-card .cls{font-size:var(--fz-md-lg)}
  .inc-card .cardfoot{padding:10px 14px 12px}
  .inc-card .acts{gap:8px}
  .tab{height:48px;font-size:var(--fz-body)}
  /* revamp 11: in split the map's middle zone is a 240 px column, so the three
     tiles stack instead of sitting in a row, and each collapses to one line —
     label left, value right. The sub-lines and the score bar go: at 240 px the
     tile has room for the fact, not for its footnote. */
  .hudstats{flex-direction:column;gap:6px;top:8px;right:8px;left:auto;
    width:calc(100% - 16px);max-width:none}
  /* the four-row grid css/13 gives the tiles is a landscape instrument; in
     split each tile is one line, so it goes back to being a flex row. */
  .hstat{display:flex;width:100%;min-height:0;padding:7px 10px;gap:8px;border-radius:12px;
    flex-direction:row;align-items:center;justify-content:space-between}
  /* css/13's #hsCov{width:140px} fix for the 112 px landscape tile is an id
     selector, so it would otherwise outrank .hstat{width:100%} above here too
     -- restate it so the split layout keeps all three tiles the same width. */
  #hsCov{width:100%}
  .hstat .hl{flex:1 1 auto;font-size:9.5px;letter-spacing:.08em}
  .hstat .hv{font-size:19px}
  .hstat .hv#cov{font-size:16px}
  .hstat .hs,.hstat .hbar{display:none}
  .hstat .hrow{min-height:0;gap:7px;flex:0 0 auto}
  .hring,.hring svg{width:28px;height:28px}
  .cams{gap:6px}
  /* 640 wide: the car pane gives back a few points so the four stills stay
     readable; the wedges scale with the box, so nothing else has to change */
  #view-cams .camwrap{grid-template-columns:35% minmax(0,1fr);gap:8px}
  #view-cams .cams{gap:8px}
  .carpane{padding:8px 8px 6px}
  /* the car pane is ~200px wide here: the four wedge labels only fit across it
     at a tighter size, and two of them share the top edge */
  .carfov .fov .lbl{font-size:9px;letter-spacing:.05em}
  .carlegend{letter-spacing:.08em}
  .tile .side,.tile .standin{display:none}
  .tile .stillhint{display:none}
  .tile .playg{width:38px;height:38px}
  .tile .playg .i{width:15px;height:15px}
  .tile .lab{font-size:var(--fz-cap);padding:4px 7px;top:6px;left:6px}
  /* revamp 11: the zoom pair goes, the simulation-speed control stays — a
     demo run at 640 px still has to be able to speed up. */
  .mapctl .iconbtn:nth-child(3),.mapctl .iconbtn:nth-child(4){display:none}
  .mapctl .iconbtn{width:48px;height:48px;border-radius:14px}
  /* pass 23: the rail's bottom inset is NOT overridden here — the 12 px stage
     inset css/10 sets is right at 640 too (the stage already clears the dock,
     and the 3-button column never reaches the centred icon-only dock). */
  .attrib{display:none}
  .dock .item{padding:0 14px;height:48px;font-size:0;gap:0}
  .dock .item svg{width:22px;height:22px}
  .dock .item.end .opt{display:none}
  /* at 640x604 the full-screen sheet drops to a single column: media
     stacked (frame ~40vh, clip ~25vh) then the meta grid, actions pinned
     to the bottom — same treatment as portrait. */
  #incSheet .box{flex-direction:column;padding:10px 14px 12px;gap:6px}
  #incSheet .media{flex:0 0 30vh;height:30vh}
  #incSheet .side{flex:1 1 auto;height:auto;gap:6px;min-height:0}
  #incSheet .facts{grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:6px}
  #incSheet .fact{padding:4px 8px}
  #incSheet .sacts{gap:10px}
  #incSheet .sacts .btn{height:48px;min-height:48px}
  #incSheet .shead h3{font-size:var(--fz-card-lg)}
  /* split-screen 640: the Inbox keeps the same full-screen layout, the gutters
     tighten and the three filter chips scroll horizontally instead of squeezing */
  #inboxSheet .ihead,#inboxSheet .ifilt{padding:0 12px}
  #inboxSheet .ilist{padding:6px 12px 20px}
  #inboxSheet .ihead h3{font-size:var(--fz-ttl)}
  #inboxSheet .ifilt .tab{flex:0 0 auto;min-width:104px;padding:0 12px}
  .cams,.verify,.sector,#view-cams .camwrap{grid-row:1 / -1}
  /* split-screen 640: the pass list is not dropped any more (wave15 — that is
     what made items unreachable at narrow widths). It becomes a horizontal
     strip of the same cards above the stage: still scrollable, still
     selectable, still the same component. */
  /* pass 23: the queue keeps its horizontal strip, plus the visit-route foot
     under it; the stage stacks its evidence plate over the locator. */
  .verify{grid-template-columns:1fr;grid-template-rows:188px minmax(0,1fr)}
  .verify>.vlistpanel{grid-row:1}
  .verify>.vstage{grid-row:2}
  .verify>.vlistpanel .vtop{padding:10px 12px 0}
  .verify>.vlistpanel .vlist{flex-direction:row;overflow-x:auto;overflow-y:hidden;
    padding:8px 12px 12px;touch-action:pan-x}
  .verify>.vlistpanel .vlist .card{flex:0 0 260px;width:260px}
  .verify>.vlistpanel .vgrouph{flex:0 0 auto;align-self:center;padding:0 6px;writing-mode:horizontal-tb}
  .verify>.vlistpanel .vfoot{padding:8px}
  .verify>.vlistpanel .vroute{min-height:48px}
  .verify .vstage{padding:12px 12px 14px;gap:10px}
  .verify .vdmid{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 164px}
  .verify .vacts .btn{min-height:52px;height:52px;font-size:var(--fz-md)}
  /* split-screen 640: KPI tiles go 2x2, the map hero keeps 38% of what is
     left and the breakdown card scrolls under it */
  /* 2x2 KPI tiles need 2 x ~80px; 144px clipped both subtitle lines */
  .sector{grid-template-columns:minmax(0,1fr);grid-template-rows:168px 34% minmax(0,1fr);margin-bottom:8px}
  .sector>.skpistrip{grid-column:1;grid-row:1}
  .sector>.secmap{grid-column:1;grid-row:2}
  .sector>.sbreak{grid-column:1;grid-row:3}
  .kpis{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
  .kpi{padding:6px 12px}
  .kpi .val{font-size:var(--fz-ttl)}
  .kpi .delta{font-size:var(--fz-meta)}
  .sm-legend{gap:4px 10px;font-size:var(--fz-cap);padding:6px 10px;bottom:10px;inset-inline-start:10px}
  .sseg{margin:10px 10px 8px}
  .sensorplan{display:none}
  .startwrap{grid-template-columns:1fr;padding:12px;padding-top:calc(12px + var(--header-h))}
  .startmap::after{background:linear-gradient(180deg,rgba(7,10,11,.9),rgba(7,10,11,.6) 60%,rgba(7,10,11,.85))}
  /* split screen: the summary stacks and scrolls - the "no scrolling" promise
     is a 1280x604 promise, and 640 px of width cannot hold four heroes */
  .sumwrap{padding:0 12px 12px;padding-top:calc(var(--header-h) + 8px);gap:10px;overflow-y:auto;
    scrollbar-width:none}
  .sumwrap::-webkit-scrollbar{display:none}
  .sumhead{flex-wrap:wrap;gap:6px 12px}
  .sumhead h2{font-size:21px}
  .sumchips{justify-content:flex-start}
  .sumchips .c{padding:4px 10px;gap:6px}
  .sumchips .c i{font-size:11px}
  .sumchips .c b{font-size:14px}
  .sumheroes{grid-template-columns:repeat(4,1fr);gap:8px}
  .sumheroes .t{min-height:0;padding:9px 6px;gap:5px;border-radius:var(--r-sm)}
  .sumheroes .t .v{font-size:38px}
  .sumheroes .t .l{font-size:12px}
  .sumheroes .t .s{display:none}
  .gring,.gring svg{width:72px;height:72px}
  .gring circle{stroke-width:6}
  .gring .pc b{font-size:22px}
  .gring .pc i{font-size:10px}
  /* the half-circle compliance gauge steps down one notch here too */
  .hgring{width:130px;height:78px}
  .hgring svg{width:130px;height:78px}
  .hgring path{stroke-width:9}
  .hgring .hgend{font-size:11px}
  .hgring .hgpc{padding-bottom:16px}
  .hgring .hgpc b{font-size:24px}
  .hgring .hgpc i{font-size:12px}
  .sumband{grid-template-columns:1fr;gap:8px;flex:0 0 auto}
  .sumcard{padding:10px 12px;gap:8px;border-radius:var(--r-sm)}
  .srows .r{padding:5px 0;font-size:14px}
  .slegend .lg{font-size:13px}
  .bl .k{font-size:15px}
  .bl b{font-size:22px}
  /* the band stacks and the wrap scrolls here, so the map is a fixed slab
     rather than a flex child fighting the list for a height neither has */
  .kgh b{font-size:20px}
  #endMapCard{padding:8px 10px}
  .endmapbox{height:190px;min-height:0;flex:0 0 auto}
  .emleg{gap:3px 9px;padding:4px 8px}
  .emleg>span{font-size:12px}
  /* the wrap scrolls here, so the single action sticks to the bottom edge
     instead of hiding under the fold */
  .sumfoot{position:sticky;bottom:0;padding:8px 0 0;margin-top:auto;
    background:linear-gradient(rgba(7,10,11,0),var(--bg) 45%)}
  .sumfoot .btn{min-width:0;flex:1 1 auto;height:50px;min-height:50px;font-size:17px}
  .sheet{padding-top:calc(var(--header-h) + 6px)}
  .seg button{min-width:56px;padding:0 10px}
  .toast{font-size:var(--fz-body)}
}