/* css/06-drive-panel.css — Drive panel, guidance strip, speed chip.
   Split from the index.html <style> block (REFACTOR-PLAN Phase 2). Load order = cascade order; do not reorder. */
/* ---------- THE DRIVE PANEL (left zone) -----------------------------------
   wave12. One glass surface for the whole driver-side column: a sticky head
   (guidance strip → status chips → filter chips) over one scrolling list of
   .inc-cards. Everything that used to float as its own card now lives inside
   this one border. */
.a11y-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* client pass (14 Sep): THE OUTER BOX IS GONE. The column was reading as a
   panel inside a panel inside a card -- the glass frame, the card, and the
   evidence plate each drew their own border. The cards keep their own glass
   and now float directly over the basemap; .dpanel is pure layout (flex
   column, scrolling body, gaps, padding, container query) with no surface of
   its own. .dpanel.ghost therefore becomes a no-op, and is kept only so the
   pointer-events rule below still has its hook. */
.dpanel{flex:1;min-height:0;display:flex;flex-direction:column;
  border-radius:var(--r);overflow:hidden;
  background:none;border:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:none}
.dp-head{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;
  padding:8px 10px 10px;border-bottom:0;background:none}
.dp-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:none;display:flex;flex-direction:column;gap:12px;padding:12px 10px;
  /* wave13 task 5: the list scrolls independently under the sticky guidance +
     filter block, and the cards size their labels off THIS column's width
     rather than the viewport's (the panel is 335 px at 1280 and ~240 px in
     split, which no viewport media query can tell apart). */
  container-type:inline-size;container-name:dpanel}
.dp-body::-webkit-scrollbar{display:none}

/* ---------- route guidance strip + speed chip (panel head, row 1) ---------- */
/* one ~64 px row: turn arrow, street name + sub, speed as a compact chip */
/* wave18 typography audit: the street is decision-critical and it was being
   ELLIPSISED. The strip is 412px wide and .txt only gets 190 of it (the gate
   chip and speed chip take 160), so "Sheikh Rashid Bin Saeed St" does not fit
   on one line at ANY size down to 15px — and "Sheikha Fatima Bint Mubarak St"
   is longer still. The street therefore gets a FIXED two-line box: always two
   lines tall, so a long name is never cut and a short one never makes the
   strip jump height while driving. Costs the scrolling card list 4px. */
/* revamp 5: the guidance strip is REMOVED FROM VIEW. The street name, the
   turn glyph and the progress hint are all gone from the screen (client, 13
   Sep); the block stays in the DOM, hidden, only because progressTick() still
   writes #navStreet/#navHint and the SCI bookkeeping reads them back. */
#guide{display:none}
.guide{display:flex;align-items:center;gap:10px;padding:0 2px;flex:0 0 auto;min-height:44px}
.guide .turnwrap{width:28px;height:28px;flex:none;color:var(--acc);display:grid;place-items:center}
.guide .i.turn{width:28px;height:28px;stroke:var(--acc);stroke-width:2.1}
.guide .txt{flex:1;min-width:0}
/* revamp task 2 — THE HEAD IS 62 px NOW, not 146. The old head spent a fixed
   two-line box on the street, a 46 px verification chip and a filter row on
   what is, during the inspection, a column whose ONE job is to show the live
   detection card and its two decisions in full without scrolling. The street
   is back to a single ellipsised line (it is a label here, not a turn
   instruction — the map is the navigation), the hint sits under it at caption
   weight, and the verification chip only exists in the verification phase
   (see renderNextStop). */
.guide b{display:block;-webkit-line-clamp:none;
  font-size:var(--fz-card);font-weight:700;letter-spacing:-.02em;line-height:1.25;
  height:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.guide span.hint{display:block;margin-top:1px;font-size:var(--fz-meta);color:var(--tx3);
  letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Speed is NOT the hero (wave-5 client direction) and as of wave12 it is not a
   gauge either: a 52 px arc told the driver nothing the numeral did not, and it
   cost the strip the width the street name needed. One tabular chip. */
.spdchip{display:none!important}.guide .turnwrap{display:none!important}
.spdchip-off{flex:0 0 auto;display:inline-flex;align-items:baseline;gap:4px;
  padding:6px 10px;border-radius:12px;background:rgba(255,255,255,.06);
  border:1px solid var(--hair)}
.spdchip .dial{display:none}
.spdchip .rdg{display:inline-flex;align-items:baseline;gap:4px;min-width:0}
.spdchip .big{font-family:var(--mono);font-size:var(--fz-md-lg);font-weight:700;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.spdchip .unit{font-size:var(--fz-cap);letter-spacing:.1em;color:var(--tx3);font-weight:700;text-transform:uppercase}
/* row 2: ONE conditional chip — the next verification pass. When there is
   nothing to verify the row is `hidden` and costs the list no height at all. */
.gstat{display:flex;align-items:center;gap:8px;min-height:46px;min-width:0;flex-wrap:nowrap;overflow:hidden}
.ring .track{fill:none;stroke:rgba(238,244,242,.22);stroke-linecap:round}
.ring .arc{fill:none;stroke-linecap:round}
/* THE glow exception (1 of 3): a restrained halo on the 20–30 km/h active band */
#bandArc{transition:none}
body[data-gate="active"] #bandArc{filter:drop-shadow(0 0 6px var(--acc-glow))}
.gate{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;
  background:var(--acc-dim);color:var(--acc);font-size:var(--fz-body);font-weight:700;line-height:1.25;
  max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* wave13 fix 3: in the guidance row the gate is a compact dot chip that must
   never steal width from the street name — it shrinks before .txt does not,
   so it is flex:0 0 auto and its copy is allowed to ellipsise. */
.guide .gate{flex:0 0 auto;max-width:44%}
/* THE glow exception (2 of 3): the perception gate dot */
.gate i{width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.gate.paused{background:rgba(255,209,102,.12);color:var(--minor)}
.gate.fast{background:rgba(255,90,95,.12);color:var(--crit)}
#gateShort{text-transform:uppercase;letter-spacing:.06em}
/* wave12: the verification state is a CHIP beside the gate chip, not a label
   competing for the guidance card's second row. The copy is a count, not a
   distance ("Nothing to verify" / "3 to verify"), which is what stopped it
   truncating to "No verification a…" in a 340 px column. */
.nextstop{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  min-height:46px;box-sizing:border-box;
  background:var(--acc-dim);border:1px solid transparent;
  min-width:0;flex:1 1 auto;line-height:1;text-align:start;
  transition:transform .16s var(--ease)}
.nextstop:active{transform:scale(.985)}
.nextstop svg{width:13px;height:13px;stroke-width:2.2;flex:0 0 auto;stroke:var(--tx3)}
.nextstop b{font-size:var(--fz-body);font-weight:700;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nextstop.due{background:var(--acc-dim);border-color:transparent}
.nextstop.due svg{stroke:var(--acc)}
.nextstop.due b{color:var(--acc)}
/* ---- verify pass (client, 14 Sep): the NEXT-INCIDENT ROW ------------------
   "Next · Bulky waste #48211 · 2 m" as a chip left a lot of empty space below
   it. The row is now a CARD in the head — the same glass as the feed cards
   under it — with the incident's own evidence as a 64x44 thumbnail, two lines
   of text ("Next · class · #id" / "m · done/n verified") and a chevron: the
   upcoming stop as a row the inspector can tap for its details (vOpenTarget).
   Under 80 m to the stop (.due) line 1 turns accent. The 'done' state ("Verification
   complete · end the inspection") is line 1 alone: no thumbnail, no sub-line. */
.nextrow{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;
  min-height:60px;padding:8px;border-radius:12px;
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--hair);box-shadow:var(--sh);
  color:var(--tx);text-align:start;line-height:1.2;cursor:pointer;
  transition:transform .16s var(--ease),border-color .16s var(--ease)}
.nextrow:active{transform:scale(.985)}
.nextrow .nsimg{flex:0 0 auto;width:64px;height:44px;border-radius:8px;object-fit:cover;
  background:rgba(0,0,0,.35);display:block}
.nextrow .nsimg[hidden]{display:none}
.nextrow .nstx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.nextrow b{display:block;font-size:15px;font-weight:700;color:var(--tx);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.nextrow .nssub{display:block;font-size:13px;font-weight:600;color:var(--tx2);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.nextrow .nssub[hidden]{display:none}
.nextrow .ct[hidden]{display:none}
.nextrow .chev{flex:0 0 auto;width:16px;height:16px;stroke:var(--tx3);stroke-width:2.2}
.nextrow.due{border-color:rgba(34,200,130,.45)}
.nextrow.due b{color:var(--acc)}
.nextrow.due .chev{stroke:var(--acc)}
.nextrow.done{min-height:48px}
.nextrow.done b{white-space:normal;color:var(--tx)}
/* the basemap-source chip: informational, same pill language as the gate, in
   the "watch" amber rather than a fourth colour. No glow — the gate dot is
   already one of the three sanctioned ones. */
.offmap{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:999px;
  background:rgba(255,209,102,.12);color:var(--minor);font-size:var(--fz-meta);font-weight:700;
  line-height:1;white-space:nowrap;flex:0 0 auto}
.offmap svg{width:13px;height:13px;stroke-width:2.2;flex:0 0 auto}
/* The banner's second row is gate + chip + next stop in ~340 px. When the chip
   is up the gate drops to the short label it already carries for split screen,
   which is what keeps "Verify in 1.4 km" from ellipsising to "Ve…". */
/* wave12: the gate and the basemap chip share the status ROW below the
   guidance strip now, so the offmap state is toggled on the row, not the
   strip — .guide keeps the class for anything already listening. */
.gstat.offmap-on .gate,.guide.offmap-on .gate{font-size:var(--fz-meta);gap:6px;padding:6px 9px}
.guide.gate-short #gateTxt{display:none}
.guide.gate-short #gateShort{display:inline!important}
.gstat.offmap-on #gateTxt,.guide.offmap-on #gateTxt{display:none}
.gstat.offmap-on #gateShort,.guide.offmap-on #gateShort{display:inline}



/* The filter tabs are already hidden on Drive (13-coverage, client pass), but
   the ROW they sit in still took the head's 8 px flex gap. With both it and
   #gstat gone the head is exactly padding + one 44 px guidance row. */
#view-drive .tabsrow{display:none}

/* ---------- pass 23 (client): the VISIT ROUTE CTA ----------
   These rules used to serve #verifyCta, the overlay that offered to start a
   verification pass by itself — "we do not need that overlay at all because
   it's just confusing the UX UI for the user while he's driving". They now
   serve #visitCta, which is the inspector's OWN queue: it exists only while
   the visit list he built on the Verify desk has something in it, so the
   driving screen is clean by default. Same full-width HUD button under the
   head, same --info blue that already means "awaiting verification" on the
   pins, the trail legend and the nav route — so the colour itself says what
   the next step is about. It is the only glowing element on the panel while
   it is up. */
.vcta{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;
  height:52px;padding:0 14px;border-radius:var(--r-sm);
  background:rgba(77,163,255,.14);border:1px solid rgba(77,163,255,.55);
  color:var(--info);font-size:var(--fz-btn);font-weight:700;line-height:1;
  text-align:start;cursor:pointer;
  transition:transform .18s var(--ease),background .18s var(--ease);
  animation:vctaPulse 2.4s var(--ease) infinite}
.vcta[hidden]{display:none}
.vcta:active{transform:scale(.985);background:rgba(77,163,255,.22)}
.vcta .i{width:19px;height:19px;stroke-width:2.2;stroke:var(--info);flex:0 0 auto}
.vcta .lab{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vcta .num{flex:0 0 auto;min-width:26px;height:26px;padding:0 8px;border-radius:13px;
  display:grid;place-items:center;font-family:var(--mono);font-size:var(--fz-meta);
  font-weight:800;background:rgba(77,163,255,.22);color:#CFE6FF}
@keyframes vctaPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(77,163,255,0)}
  50%    {box-shadow:0 0 18px -2px rgba(77,163,255,.45)}
}
@media (prefers-reduced-motion: reduce){
  .vcta{animation:none;box-shadow:none}
}


/* ---------- revamp 5: the head that collapses, and the panel that vanishes --
   With the guidance strip deleted the head is empty for the whole inspection
   pass -- it only ever carries the verification CTA or the next-stop chip. An
   empty head still cost 18 px of padding, a gradient and a hairline, which
   read as the top of a broken frame, so `.void` takes it out of the layout
   completely. paintHeadVoid() owns the class. */
.dp-head.void{padding:0;border-bottom:0;background:none;gap:0}
/* ...and when the head is void AND nothing has been detected yet, the panel
   itself is not there: no glass, no hairline, no shadow, no blur. The 3D
   basemap runs clean from edge to edge and the FIRST thing the inspector ever
   sees on this side is the detection card arriving. The frame fades back in
   with that card (300 ms) rather than snapping on under it. */
/* the fade is DELAYED BY THE CARD'S OWN STAGGER (.28 s) on the way IN, so the
   glass resolves underneath the card as it slides rather than lighting an
   empty box 300 ms ahead of it; on the way OUT it goes immediately (the delay
   is declared on the framed state, so only that direction waits). */
.dpanel{transition:background .3s var(--ease) .28s,border-color .3s var(--ease) .28s,box-shadow .3s var(--ease) .28s}
.dpanel.ghost{background:transparent;border-color:transparent;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;transition-delay:0s}
.dpanel.ghost .dp-body{pointer-events:none}
/* ...and the panel is only ever as TALL as what it holds. Stretched to the
   column it left a 90 px tail of empty glass under the last card, which is the
   same "frame around nothing" the ghost state exists to kill. It still caps at
   the column height, so a long feed scrolls exactly as before. */
.dpanel{flex:0 1 auto;max-height:100%}
@media (prefers-reduced-motion: reduce){ .dpanel{transition:none} }
/* the verification chip's right-hand progress counter ("2/4") -- mono, quiet,
   sitting on the chip's trailing edge behind a hairline divider. */
.nextstop{justify-content:flex-start}
.nextstop b{flex:1 1 auto}
.nextstop .ct{flex:0 0 auto;margin-inline-start:8px;padding-inline-start:9px;
  border-inline-start:1px solid var(--hair2);
  font-family:var(--mono);font-size:var(--fz-meta);font-weight:700;
  color:var(--tx3);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.nextstop .ct[hidden]{display:none}
.nextstop.due .ct{color:var(--acc)}