/* css/16-verify.css — the VERIFY desk.
   Rewritten in pass 23 (client): "Re-rectify" is Verify, the module is a list
   of incidents awaiting verification with a detail pane beside it — no map in
   the background, no Navigate button, no before/after compare, no Proof pane.
   Split from the index.html <style> block (REFACTOR-PLAN Phase 2).
   Load order = cascade order; do not reorder. */

/* ---------- the two-panel desk ---------- */
#view-verify{grid-column:1 / -1}
/* 380 px carries a full .inc-card row (64 px thumb + two lines + the KPI chip)
   without the class name ellipsising; the rest is the stage. */
.verify{grid-column:1 / -1;display:grid;grid-template-columns:380px minmax(0,1fr);gap:14px;min-height:0}
/* main is pointer-events:none (the map stage lives under it) — the two Verify
   panels are the interactive surface, so they opt back in and own their own
   stacking context above the scrim. Without this the whole screen was inert
   and every gesture landed on the basemap (verify-wave15). */
.verify>.panel{pointer-events:auto;position:relative;z-index:1}
.panel{background:var(--glass);border:1px solid var(--hair);border-radius:var(--r);min-height:0;display:flex;flex-direction:column;overflow:hidden;position:relative;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
#view-drive .panel{background:none;border:0;border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible}
.ptitle{padding:14px 16px 0;font-size:var(--fz-body);letter-spacing:.01em;text-transform:none;font-weight:700;color:var(--tx2)}

/* ---------- left: the queue ---------- */
.vlistpanel{display:flex;flex-direction:column}
/* the head is title + count on one baseline: the number is the first thing the
   inspector reads when he opens the module, so it is not buried in the list */
.vtop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:14px 16px 0}
.vtop .ptitle{padding:0;flex:1 1 auto;min-width:0}
.vcount{flex:0 0 auto;font-family:var(--mono);font-size:var(--fz-md);color:var(--tx2)}
/* The list is the scroller (flex:1 + min-height:0 on the chain, hidden bar per
   app style). overscroll-behavior:contain stops a wheel that reaches the end
   of the list from turning into a page/stage gesture. */
.vlist{flex:1 1 auto;display:flex;flex-direction:column;gap:10px;padding:12px 12px 20px;
  overflow-y:auto;overflow-x:hidden;min-height:0;scrollbar-width:none;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.vlist::-webkit-scrollbar{display:none}
.vlist .card{flex:0 0 auto;min-height:48px;text-align:left}
.vlist .card.verifiable{cursor:pointer}
.vlist .card:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* the second group: still with the ESP, so lcVerify() would refuse it. Muted
   and inert — information, not a control the inspector can waste a tap on. */
.vgrouph{flex:0 0 auto;padding:10px 4px 2px;font-size:var(--fz-meta);letter-spacing:.08em;
  text-transform:uppercase;color:var(--tx3);font-weight:700}
.vlist .card.waiting{opacity:.62;cursor:default;pointer-events:none}
/* "On the visit list" — the one piece of state a row carries that is NOT
   lifecycle, so it borrows the --info blue the whole visit path is drawn in. */
.vchip{flex:0 0 auto;font-size:var(--fz-meta);font-weight:700;padding:3px 8px;border-radius:999px;
  background:rgba(77,163,255,.16);color:var(--info);white-space:nowrap}
.vempty{display:grid;place-items:center;padding:24px 12px;font-size:var(--fz-body);color:var(--tx3);text-align:center}

/* ---------- left foot: the visit route leaves from here too ---------- */
.vfoot{flex:0 0 auto;padding:12px;border-top:1px solid var(--hair);display:grid;gap:6px}
.vroute{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 14px;
  border-radius:var(--r-sm);background:rgba(77,163,255,.16);border:1px solid rgba(77,163,255,.55);
  color:var(--info);font-size:var(--fz-btn);font-weight:700;line-height:1.15;text-align:start;cursor:pointer;
  transition:transform .16s var(--ease),background .16s var(--ease)}
.vroute:active{transform:scale(.985);background:rgba(77,163,255,.24)}
.vroute .i{width:19px;height:19px;stroke-width:2.2;stroke:currentColor;flex:0 0 auto}
.vroute .lab{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vroute .num{flex:0 0 auto;font-family:var(--mono);min-width:26px;height:26px;padding:0 7px;border-radius:13px;
  display:grid;place-items:center;font-size:var(--fz-meta);font-weight:800;background:rgba(77,163,255,.22)}
/* genuinely disabled, and visibly so: the affordance stays on screen (that is
   how the inspector learns the visit list exists) but it cannot be pressed. */
.vroute.off,.vroute:disabled{opacity:.42;filter:grayscale(.6);cursor:default;
  background:rgba(255,255,255,.04);border-color:var(--hair);color:var(--tx3)}
.vroute.off .num,.vroute:disabled .num{background:rgba(255,255,255,.06)}
.vfhint{font-size:var(--fz-meta);color:var(--tx3);text-align:center;line-height:1.3}

/* ---------- right: the selected incident ---------- */
/* three rows: head · (evidence + locator) · decisions. Only the middle row
   flexes, so the 56 px decision row keeps its height at 604 and the evidence
   plate gives up the difference. */
.vstage{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;padding:14px 16px 18px}
.vdhead h3{margin:0;font-size:var(--fz-ttl);font-weight:750;letter-spacing:-.025em}
.vdsub{margin-top:3px;font-size:var(--fz-body);color:var(--tx2)}
.vdchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.vdchips .chip{font-size:var(--fz-meta);font-weight:700;padding:5px 10px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--hair);color:var(--tx2);white-space:nowrap}
.vdchips .chip.kpi{font-family:var(--mono);color:var(--tx)}
.vdchips .chip.sla{font-family:var(--mono)}
.vdchips .chip.sla.late{color:#FF8A8E;border-color:rgba(240,68,56,.45)}
.vdmid{display:grid;grid-template-columns:minmax(0,1.35fr) 300px;gap:14px;min-height:0}

/* the evidence plate at its TRUE aspect ratio: the inspector is judging a
   photograph, so no fixed box and no cover crop — the image is fitted whole
   inside a letterboxed well. */
.vevid{margin:0;display:flex;flex-direction:column;gap:8px;min-height:0}
.vevidbox{flex:1 1 auto;min-height:0;display:grid;place-items:center;background:#0B1012;
  border:1px solid var(--hair);border-radius:var(--r-sm);overflow:hidden}
#vEvidImg{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
#vEvidImg[hidden]{display:none}
.vevidcap{flex:0 0 auto;font-size:var(--fz-meta);color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* THE LOCATOR — a contained component, not the background map returning. */
.vloc{display:flex;flex-direction:column;gap:8px;min-height:0}
.vloch{margin:0;font-size:var(--fz-cap);letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);font-weight:700}
.vlocmap{flex:1 1 auto;min-height:170px;border-radius:var(--r-sm);overflow:hidden;
  border:1px solid var(--hair);background:#0A0F11;position:relative}
.vlocmap canvas{position:absolute;inset:0;width:100%;height:100%}
/* no coordinate for this record: the well stays, emptied, so the pane's
   geometry does not jump between rows */
.vlocmap.off{opacity:.35}
.vlocfoot{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px}
#vLocDist{font-family:var(--mono);font-size:var(--fz-md);color:var(--tx)}
.vlocleg{display:flex;gap:12px;font-size:var(--fz-meta);color:var(--tx3);white-space:nowrap}
.vlocleg i{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:5px}
.vlocleg i.veh{background:#EEF4F2}
.vlocleg i.inc{background:#4DA3FF}

/* ---------- the three decisions, one row ---------- */
.vacts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.vacts .btn{min-height:56px;height:56px;min-width:0}
.vacts .btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vacts .btn:disabled{opacity:.45;cursor:default}
.vacts .btn.visit{background:rgba(255,255,255,.05);border:1px solid var(--hair2);color:var(--tx)}
.vacts .btn.visit.on{background:rgba(77,163,255,.18);border-color:rgba(77,163,255,.55);color:var(--info)}
/* nothing selected: the head still reads as an instruction, the rest recedes */
.vstage.empty .vdmid,.vstage.empty .vacts{opacity:.4}

/* a notification that carries evidence (the ESP's rectification photo) shows
   it small: enough to recognise the site, not enough to be a viewer. */
.msgthumb{display:block;width:76px;height:44px;object-fit:cover;border-radius:8px;border:1px solid var(--hair);margin:6px 0 2px}

/* pass 23: no map behind Verify — its own opaque token surface (see css/02). */
.verify{background:var(--bg)}