/* css/22-layout-corrections.css — wave-5 corrections, 604px height budget, optical alignment.
   Split from the index.html <style> block (REFACTOR-PLAN Phase 2). Load order = cascade order; do not reorder. */
/* ---------- wave-5 layout corrections after the first screenshot pass ------ */
/* the camera wall needs a real box in its one host */
.vssframe{width:100%;height:100%;border:0;border-radius:12px;background:#000}
#camhost{flex:1;min-height:0;min-width:0;display:flex}
#camhost>#cams{flex:1;min-height:0}
/* the gate pill keeps its full label; the next-stop value takes what is left */
.gate{max-width:none;flex:0 0 auto}
.nextstop{flex:1;min-width:0}
.nextstop .cap{display:none}
/* verify pass (client, 14 Sep): the next-incident row replaced the .nextstop
   chip in #gstat; it sizes itself (css/06). The decision card in #vhero gets
   the same solid glass as the #cardSlot hero in perf mode (css/25 names only
   #cardSlot; this stays with the other panel corrections rather than in 25). */
body.perf #view-drive #vhero .inc-card,
body.perf .nextrow{background:var(--glass-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
/* a two-column fact for the GPS pair */
#incSheet .fact.wide{grid-column:span 2}
/* the sensor plan view reads as a vehicle, not a white blob: keep the vector's
   own internal contrast and lift it to the cockpit's greys */
.sensorplan .plan img{width:60px;filter:grayscale(1) brightness(1.45) contrast(.9)}

/* the Sector stage stays readable under its tiles */
/* pass 23: the Sector screen (dormant) no longer shows the map either — css/02
   hides it off Drive — so there is nothing left for the scrim to dim and a
   veil over the flat token surface would only mute the panels. */
body[data-view="sector"] #scrim{opacity:0}


/* ---------- the 604 px height budget on Drive -----------------------------
   460 px of column for the guidance banner, the decision, the filter row and a
   scrolling list. Everything below is measured against that, not chosen.
   The pile-up action shares the filter row rather than taking a band of its
   own, and list rows carry their two decisions as 48 px icon buttons so a row
   is 72 px instead of 150 px. The full-width Valid / Invalid pair lives on the
   card and in the details sheet, where there is room for the labels. */
.tabsrow{display:flex;gap:8px;flex:0 0 auto;align-items:stretch}
.tabsrow .tabs{flex:1;min-width:0}
.tabsrow .pileup{width:48px;flex:0 0 48px;height:44px;padding:0;font-size:0;gap:0;border-radius:12px}
.tabsrow .pileup svg{width:20px;height:20px}
/* wave12 replaced every rule that used to live here. The old corrections
   absolutely-positioned the row's 58 px action pair into a 132 px padding
   reservation, re-padded .card .top / .status / .acts for the floating-card
   composition and re-sized .thumb and the speed dial — all of which the single
   .inc-card grid and the .dpanel head now own outright. Only the filter-row
   geometry above survives. The list's bottom mask goes too: .dp-body is the
   panel's one scroller, so the fade belongs to it — it is the shared
   .scrollmore treatment at the foot of this file now (final review F5), which
   only fades while there IS something below and pads the list so the last row
   is never cut when it is scrolled to the end. */

/* the sensor plan view is a caption, not a hero: 96 px tall with visible cones */
.sensorplan{padding:10px 14px;gap:14px}
.sensorplan .plan{width:96px;height:96px}
.sensorplan .plan img{width:46px}
.sensorplan .plan .cone4{background:
    conic-gradient(from -32deg at 50% 50%, rgba(34,200,130,.52), rgba(34,200,130,0) 64deg, rgba(34,200,130,0) 360deg),
    conic-gradient(from 58deg  at 50% 50%, rgba(34,200,130,.40), rgba(34,200,130,0) 64deg, rgba(34,200,130,0) 360deg),
    conic-gradient(from 148deg at 50% 50%, rgba(34,200,130,.52), rgba(34,200,130,0) 64deg, rgba(34,200,130,0) 360deg),
    conic-gradient(from 238deg at 50% 50%, rgba(34,200,130,.40), rgba(34,200,130,0) 64deg, rgba(34,200,130,0) 360deg)}
/* on the streaming tile the detection box is the subject; the idle reticle goes */
/* the decorative perception-ROI frame is a MINI-WALL cue: on a tile promoted
   to the whole pane it is a meaningless giant rectangle over the picture the
   inspector actually came to read. */
#camhost .cams.streaming .tile.streaming::after{display:none}

/* ---------- optical alignment (wave3-visual §7) ---------- */
#startBtn svg,.btn svg use[href="#i-play"]{transform:translateX(1px)}
.guide .i.turn{transform:translateY(-.5px)}


/* =====================================================================
   FINAL REVIEW FIXES (14 Sep) — the independent QA/UX pass.
   Everything below is a correction to a shipped surface, so it lives here
   rather than in the file that owns the area: keeping it in one block makes
   the pass reviewable and reversible.
   ===================================================================== */

/* ---------- F5 / UX#2: one "there is more" affordance for every list ------
   The Drive feed, the Verify queue, the review gate, the summary's status
   list and the Start screen's task list all ended at a hard edge that cut the
   last row through the middle with no scrollbar, no fade and no chevron. Two
   parts: bottom padding so the last row always clears the edge when the list
   is scrolled to the end, and a 30 px fade that only appears while there IS
   something below (JS toggles .is-more — scrollMoreSync in index.html). */
.scrollmore{padding-bottom:30px}
.scrollmore.is-more{
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 32px),rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 32px),rgba(0,0,0,0) 100%)}
/* F4: the Start screen's action block is pinned under the task list, so the
   list's own bottom padding has to clear it — otherwise row 4 is sliced by the
   scroll edge the instant the Start button fades in. */
.startbody.scrollmore{padding-bottom:34px}
/* F5: the summary's status list was overflow:hidden and rendered only the
   first five of eight rows. It scrolls now, with the same affordance. */
.srows.scrollmore{overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain}
.srows.scrollmore::-webkit-scrollbar{display:none}
/* pass 23: the Verify queue's own 12 px fade is gone with the rewrite — the
   shared .scrollmore affordance on #vlist is the only one now. */

/* ---------- F6: the Start screen's map markers stay under the card --------
   #startmap is a MapLibre map inside #start, and a marker element carries
   z-index:20 — higher than .startwrap's 2, and #startmap made no stacking
   context of its own, so the vehicle puck painted over the readiness card.
   isolation scopes the markers to the map they belong to. */
.startmap{isolation:isolate;z-index:0}

/* ---------- F7: the verification capture card fits the viewport -----------
   .vcap is centred inside the MAP zone, which at 640 is a 240 px column hard
   against the right edge — "Verified · Incident closed" ran off the screen. */
.vcap{max-width:calc(100vw - 24px)}
.vcap .txt b,.vcap .txt span{overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media (max-width: 900px) and (orientation: landscape){
  .vcap{left:auto;right:8px;transform:none}
}

/* ---------- F12: the map must not bleed through the camera gutters --------
   The cameras pane is transparent, so the live map under it showed as a
   red/green sliver in the 12 px gap between the tiles — the vehicle puck. The
   tile grid gets its own opaque ground. */
#view-cams .cams{background:var(--bg);border-radius:var(--r-sm)}

/* ---------- F13: the camera legend reads live state ----------------------- */
.carlegend.live{color:var(--acc);border-color:rgba(34,200,130,.45)}

/* ---------- F15: Settings — Save is the primary, Cancel is the quiet one ---
   Save was the accent fill only once it was enabled; in the sheet's resting
   state it was a grey slab beside a bright outlined Cancel, which read as an
   inverted hierarchy. Disabled Save now keeps the primary's shape and colour
   at a lower intensity, and Cancel steps back to a hairline ghost. */
.ctlfoot .close{border-color:var(--hair);color:var(--tx2);font-weight:600}
.ctlfoot .close:hover{color:var(--tx);border-color:var(--hair2)}
.ctlfoot .save[disabled]{background:rgba(34,200,130,.16);color:var(--acc);
  border:1px solid rgba(34,200,130,.45);opacity:1}

/* ---------- F16: the camera stills keep their whole frame at 640 ----------
   At 640 a resting tile is 195x220 — taller than wide — against a ~2:1 source
   frame, so object-fit:cover threw away a third of the picture and cut the
   confidence chips through the middle of a glyph. The resting tiles take the
   FRAME's proportions instead and centre as a pair of rows in the pane: whole
   pictures, no dead band inside the tile, and nothing clipped. The promoted
   (streaming) tile still fills the pane, so it is excluded. */
@media (max-width: 900px) and (orientation: landscape){
  #view-cams .cams:not(.streaming){grid-template-rows:auto auto;align-content:center}
  #view-cams .cams:not(.streaming) .tile{aspect-ratio:2 / 1;min-height:0}
  .tile:not(.streaming) .still{object-fit:contain;background:#0B1012}
  /* the perception reticle is a cue on a filled tile, not a frame around a
     letterboxed one */
  #view-cams .tile:not(.streaming)::after{display:none}
}

/* ---------- F10 / UX#5: the incident sheet's two columns ------------------
   1. The ✕ is anchored to the sheet's own top-right corner (it is a child of
      .box now, not of the title row).
   2. The media pane reads as a PANEL, so the frame/clip control in its corner
      reads as belonging to it rather than floating in a black gutter — at 640
      the frame letterboxes inside a full-width pane and the toggle looked
      detached from everything.
   3. Valid/Invalid come up under the content instead of being pushed to the
      bottom of the column by ~150 px of void.
   4. The process pane's ring is centred in the column, not pinned 20 px from
      the left edge of a very tall empty one. */
#incSheet .sclose{position:absolute;top:12px;right:14px;z-index:9;
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  color:var(--tx);background:rgba(10,16,18,.72);border:1px solid var(--hair2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* the evidence pane's ground was #050807 — all but the sheet's own black, so
   at 640 (where the frame letterboxes inside a full-width pane) the panel had
   no visible bounds and its corner control read as floating in a void. --s1
   is the cockpit's first surface step: enough to see the pane, not enough to
   compete with the picture in it. */
#incSheet .media{background:var(--s1)}
#incSheet .sacts{margin-top:22px}
#incSheet #incProc .procpane{justify-content:center;padding:0 16px}
/* client pass (14 Sep): the sheet's pane carries the same big type as the
   card's -- 28 px title, 20 px "{esp} · SLA n h" -- and wraps rather than
   ellipsising, so the ESP name and the hours are always fully readable. */
#incSheet #incProc .proctx b{font-size:28px}
#incSheet #incProc .proctx span{font-size:20px;font-weight:600;white-space:normal}

/* ---------- F4: the Start screen's fourth task row --------------------------
   The action block is pinned under the task list (it always was), but at
   604 px the list's content ran 70 px past its own scroll edge, so row 4 was
   permanently sliced in half right where the Start button begins — it read as
   an overlap, not as a list with more below. Two answers, both applied: the
   card is compacted so all four rows and the route caption fit without
   scrolling, and .scrollmore above gives the list its fade + clearance for the
   heights where they still do not. */
.startcard{padding:18px}
.startcard .startbody{gap:10px}
.startcard .avatar{width:42px;height:42px;border-radius:13px}
.startcard h2{font-size:var(--fz-ttl)}
.startcard .tasks{gap:6px;margin:2px 0 0}
.startcard .task{padding:7px 10px}
.startcard .task small{font-size:var(--fz-meta)}
.startcard .startacts{gap:10px}

/* ---------- pass 23: the Start card as the HOME module --------------------
   Home now carries the dock, which costs the readiness card ~72 px of height
   at 604 — enough to slice a second task row out of the list F4 had just
   finished fitting. The card is compacted a further notch when it is hosted as
   a view (never on the taller portrait layout, which already fits all four):
   tighter frame, one-step-smaller title, a 52 px primary that is still well
   over the 44 px touch minimum. Nothing is removed — the rows that still fall
   past the edge keep .scrollmore's fade, which homeShow() re-syncs on entry. */
@media (min-width:900px) and (max-height:700px){
  #start.asview .startcard{padding:14px 16px}
  #start.asview .startcard .startbody{gap:8px}
  #start.asview .startcard h2{font-size:var(--fz-ttl);line-height:1.1}
  #start.asview .startcard .who{gap:10px}
  #start.asview .startcard .avatar{width:38px;height:38px;border-radius:12px}
  #start.asview .startcard .big{height:52px}
  #start.asview .startcard .startacts{gap:8px}
  #start.asview .startcard .tasks{gap:4px}
  #start.asview .startcard .task{padding:5px 10px}
  /* the list's own bottom padding exists to clear the pinned action block; the
     compacted card's gap already does most of that work */
  #start.asview .startbody.scrollmore{padding-bottom:16px}
}