/* css/21-responsive-narrow-portrait.css — responsive: very narrow + portrait.
   Split from the index.html <style> block (REFACTOR-PLAN Phase 2). Load order = cascade order; do not reorder. */
/* ---------- responsive: very narrow (<560) — one column, boundary strip ---- */
@media (max-width: 560px) and (orientation: landscape){
  main{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 104px}
  #view-drive .zl{grid-column:1;grid-row:1}
  #view-drive .zm{grid-column:1;grid-row:2;min-height:96px}
  .cams,.verify,.sector,#view-cams .camwrap{grid-row:1 / -1}
}
/* ---------- responsive: portrait (detached screen) ------------------------
   Composed as its own cockpit, in the client's order: guidance (with the speed
   chip) → a clear window of city → the decision → dock. */
@media (orientation: portrait){
  :root{--header-h:44px;--dock-h:74px;--toast-zone:74px}
  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)}
  /* the fifth row is the Project Officer message. It is `auto`, and the card
     is display:none while there is nothing to read, so the row collapses to
     zero and the map keeps the whole middle of the screen. */
  main{grid-template-columns:1fr;grid-template-rows:auto minmax(120px,1fr) minmax(0,1.15fr);
    gap:10px;padding:10px 14px calc(var(--dock-h) + 6px);
    padding-bottom:var(--dock-clear,calc(var(--dock-h) + 6px))}
  /* wave12 portrait — the same panel, unpacked into the portrait cockpit's own
     order: guidance strip + filters on top, the clear window of city (which is
     where positionToast() drops Drive's toast), then the scrolling list of
     standard cards above the dock. .dpanel and .zl both go display:contents so
     the panel's two halves take real grid rows. */
  #view-drive .zl,#view-drive .dpanel{display:contents}
  /* client pass (14 Sep): no panel chrome in portrait either -- the cards
     float over the map exactly as they do at 1280. */
  #view-drive .dp-head{grid-row:1;border-bottom:0;border-radius:var(--r);
    border:0;background:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;padding:10px 12px}
  #view-drive .zm{grid-row:2}
  #view-drive .dp-body{grid-row:3;border-radius:var(--r);
    border:0;background:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;padding:12px}
  .guide b{font-size:var(--fz-ttl)}
  .guide .turnwrap,.guide .i.turn{width:32px;height:32px}
  .spdchip .big{font-size:var(--fz-card-lg)}
  /* the strip is 56 px now, not a 120 px card, so portrait keeps it — with
     permission to wrap onto a second line at 604 px wide. */
  /* revamp 11: three 112 px tiles fit a 604 px portrait stage unchanged */
  .hudstats{gap:7px}
  /* in portrait, Drive's toast still drops into the clear window of city
     between the camera wall and the map furniture (verify-wave3 §4) — now
     measured off .zm by positionToast() instead of a hard-coded 46%, so it
     tracks wherever the map row actually lands. Off Drive it keeps the
     dedicated top strip; portrait just needs a tighter width and font. */
  .toast{max-width:min(420px,calc(100vw - 32px));font-size:var(--fz-body)}
  /* portrait has the width for a taller thumb and a bigger decision row; the
     card is otherwise identical to landscape and split (wave13 task 1) */
  .inc-card .cls{font-size:var(--fz-card-lg)}
  .inc-card .acts .btn{height:56px;min-height:56px;font-size:var(--fz-md-lg)}
  .inc-card .top{grid-template-columns:104px minmax(0,1fr)}
  .inc-card .thumb{width:104px;height:104px}
  /* pass 23: portrait lays the rail out as a ROW on the right. Its bottom
     inset is NOT overridden — css/10's 12 px stage inset holds, which puts the
     row on the bottom edge of the map with the Re-center pill beside it in the
     centre channel. */
  .mapctl{flex-direction:row}
  .mapctl .iconbtn:nth-child(3),.mapctl .iconbtn:nth-child(4){display:none}
  .attrib{display:none}
  .dock{bottom:16px}
  .dock .item{height:56px;padding:0 15px;font-size:0;gap:0}
  .dock .item svg{width:23px;height:23px}
  /* portrait 604x1280: full-screen single column — media stacked (frame
     ~40vh, clip ~25vh), then the meta grid, actions pinned to the bottom. */
  #incSheet .box{flex-direction:column;padding:14px 16px 16px;gap:10px}
  #incSheet .media{flex:0 0 38vh;height:38vh}
  #incSheet .side{flex:1 1 auto;height:auto;gap:10px}
  #incSheet .sacts{margin-top:auto}
  /* portrait: the Inbox is the same full-screen view; chips scroll sideways */
  #inboxSheet .ihead,#inboxSheet .ifilt{padding:0 14px}
  #inboxSheet .ilist{padding:6px 14px 22px}
  #inboxSheet .ifilt .tab{flex:0 0 auto;min-width:112px;padding:0 12px}
  #vignette{background:
    radial-gradient(82% 32% at 50% 56%, rgba(7,10,11,0) 22%, rgba(7,10,11,.44) 66%, rgba(7,10,11,.88) 100%),
    linear-gradient(180deg, rgba(7,10,11,.88) 0, rgba(7,10,11,.32) 30%, rgba(7,10,11,0) 40%),
    linear-gradient(0deg, rgba(7,10,11,.88) 0, rgba(7,10,11,.34) 22%, rgba(7,10,11,0) 32%)}
  .cams,.verify,.sector,#view-cams .camwrap{grid-row:1 / -1}
  /* portrait stacks the two panes: the car plan on top, the wall below */
  #view-cams .camwrap{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(170px,30%) minmax(0,1fr)}
  #view-cams .cams{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
  .verify{grid-template-columns:1fr;grid-template-rows:32% minmax(0,1fr)}
  /* portrait stacks: the list is a normal vertical scroller again (undoes the
     640-wide horizontal strip when both queries match) */
  .verify>.vlistpanel .vlist{flex-direction:column;overflow-x:hidden;overflow-y:auto;
    padding:12px 12px 20px;touch-action:pan-y}
  .verify>.vlistpanel .vlist .card{flex:0 0 auto;width:auto}
  .verify>.vlistpanel .vgrouph{align-self:stretch;padding:10px 4px 2px}
  .verify>.vlistpanel .vfoot{padding:10px 12px}
  /* pass 23: 604 wide / 3 buttons is ~185 px each — well past the 52 px target
     and wide enough for "Add to visit list", so the row stays 3-up. */
  .verify .vdmid{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 176px}
  .verify .vacts .btn{min-height:54px;height:54px;font-size:var(--fz-md)}
  /* portrait: KPI strip 2x2, map hero ~38% of the remaining height, the
     breakdown card scrolls below it — nothing under the dock */
  /* 2x2 KPI tiles need 2 x 90px; 168px clipped both subtitle lines */
  .sector{grid-template-columns:minmax(0,1fr);grid-template-rows:188px 36% minmax(0,1fr);margin-bottom:10px}
  .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:12px 16px}
  .kpi .val{font-size:var(--fz-hero)}
  .startwrap{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;padding:14px;padding-top:calc(14px + var(--header-h))}
  .startcard{grid-row:2}
  .startmap::after{background:linear-gradient(180deg,rgba(7,10,11,.85),rgba(7,10,11,.35) 40%,rgba(7,10,11,.92))}
  /* portrait: one column, scrolling, with the action pinned under it */
  .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:26px}
  .sumchips{justify-content:flex-start}
  .sumheroes{grid-template-columns:repeat(2,1fr);gap:10px}
  .sumheroes .t{min-height:0;padding:12px 8px}
  .sumheroes .t .v{font-size:52px}
  /* the half-circle gauge shares a hero cell here, so it scales with it */
  .hgring{width:168px;height:100px}
  .hgring svg{width:168px;height:100px}
  .hgring path{stroke-width:10}
  .hgring .hgpc{padding-bottom:21px}
  .hgring .hgpc b{font-size:32px}
  .sumband{grid-template-columns:1fr;gap:10px;flex:0 0 auto}
  /* portrait has the width to give the map a taller slab than split does */
  .endmapbox{height:240px;min-height:0;flex:0 0 auto}
  /* 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}
  .sensorplan{display:none}
}