/* css/19b-review.css — the full-screen review module (#review), shown between
   the End dialog and the #calc veil.

   The client asked for "a full screen which looks a bit like the re-rectify
   module, where the user sees the events on the left side and he can mark them
   as valid or invalid", so this screen is built out of the pieces the inspector
   already knows: the two-panel Verify shape (list left, one incident right),
   the .panel glass, and the SAME .inc-card component the Drive feed builds —
   only the hero card's proportions are restated here, because css/13 scopes its
   copy to #view-drive and this module lives outside it (and outside #app).

   It sits at 19b because it is an OVERLAY: after 19's boot/start/end overlays
   and before 20/21/22, so the two responsive files and the corrections file can
   still reach it, and 23-motion-policy / 25-perf-mode still come last.

   Z-LADDER: header 52 · .sheet 58 · .dlg 60 · #incSheet 62 · #review 70 ·
   .calcveil 80 · #edge 90. #review therefore covers the header, the dock and
   the confirm dialog it was opened from, and the #calc veil covers it on the
   way out. It is opaque on purpose — nothing is meant to be readable behind a
   screen that is asking for a verdict. */

#review{position:fixed;inset:0;z-index:70;background:var(--bg);color:var(--tx);
  display:flex;flex-direction:column;gap:12px;padding:14px 16px 16px;
  opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s}
#review[hidden]{display:none}
#review.on{opacity:1;visibility:visible}
/* opaque ground: there is nothing behind these panels to blur */
#review .panel{background:var(--glass);-webkit-backdrop-filter:none;backdrop-filter:none}

/* ---------- head: what this screen is, how far through it you are ---------- */
.rvw-head{flex:0 0 auto;display:flex;align-items:flex-start;gap:18px}
.rvw-ttl{min-width:0}
.rvw-ttl h2{margin:0;font-size:26px;font-weight:750;letter-spacing:-.03em;line-height:1.15}
.rvw-sub{margin:4px 0 0;color:var(--tx2);font-size:var(--fz-body);line-height:1.35;max-width:62ch}
/* the progress pair is the answer to "how much longer": a mono n/m and a bar.
   Right-aligned so it lands where the eye goes after the title, never between
   the title and the list. */
.rvw-prog{margin-left:auto;flex:0 0 auto;text-align:right;min-width:124px;padding-top:2px}
.rvw-prog b{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.rvw-bar{margin-top:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.rvw-bar i{display:block;height:100%;width:0;background:var(--acc);border-radius:999px;
  transition:width .3s var(--ease)}
.rvw-keep{flex:0 0 auto;height:44px;min-height:44px;padding:0 18px;font-size:var(--fz-body);
  background:rgba(255,255,255,.07);border:1px solid var(--hair2);color:var(--tx)}
.rvw-keep[hidden]{display:none}

/* ---------- body: the Verify shape, restated so it owns its own grid -------- */
.rvw-body{flex:1 1 auto;min-height:0;display:grid;
  grid-template-columns:340px minmax(0,1fr);gap:14px}
.rvw-listpanel{display:flex;flex-direction:column;min-height:0}
/* same rhythm as .vlist in css/16: flex scroller, hidden bar, contained
   overscroll so a wheel that reaches the end does not become a page gesture */
.rvw-list{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}
.rvw-list::-webkit-scrollbar{display:none}
#rvList .inc-card{flex:0 0 auto;min-height:48px;cursor:pointer;text-align:left}
#rvList .inc-card:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* the selected row is the one on the stage: an accent rule, not a fill, so the
   card's own severity colour still reads */
#rvList .rvw-row.rowfocus{border-color:rgba(34,200,130,.55);background:rgba(34,200,130,.07)}
/* a row that has been dealt with steps back but stays legible (and keeps its
   Undo inside the 4 s window) — it is the record of the work, not a ghost */
#rvList .rvw-decided{opacity:.62;cursor:default}
#rvList .rvw-decided:hover{opacity:.8}
/* the left rows carry no decisions (the stage decides), so an emptied foot
   must not leave 14 px of padding behind */
#rvList .cardfoot:empty{display:none}

/* ---------- the escape, in the list foot, under the queue it describes ------
   Never a neutral "finish anyway": the button names its own count, and one tap
   only ARMS it — the label and the hint both change to say what the second tap
   will do, and it disarms itself after 5 s. */
.rvw-foot{flex:0 0 auto;padding:10px 12px 12px;border-top:1px solid var(--hair);
  display:flex;flex-direction:column;gap:6px}
.rvw-leave{align-self:stretch;height:44px;min-height:44px;border-radius:12px;
  font-size:var(--fz-body);font-weight:600;
  background:rgba(255,255,255,.05);border:1px solid var(--hair2);color:var(--tx2)}
.rvw-leave[hidden]{display:none}
.rvw-leave.armed{border-color:var(--crit);color:var(--crit);background:rgba(255,90,95,.10)}
.rvw-hint{margin:0;color:var(--tx3);font-size:var(--fz-meta);line-height:1.35}
.rvw-hint[hidden]{display:none}

/* ---------- the stage: one incident, one decision -------------------------- */
.rvw-stage{display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px;padding:14px 16px 18px}
.rvw-shead{min-width:0}
.rvw-shead h3{margin:0;font-size:var(--fz-ttl);font-weight:750;letter-spacing:-.025em;line-height:1.2}
.rvw-ssub{margin-top:3px;color:var(--tx2);font-size:var(--fz-body);line-height:1.3}
.rvw-ssub[hidden]{display:none}
.rvw-host{min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain}
.rvw-host::-webkit-scrollbar{display:none}
.rvw-host[hidden]{display:none}

/* THE HERO SHAPE, restated for a host outside #view-drive (mirrors css/13's
   #cardSlot / #vhero block). The plate is capped by --ev-cap and honours the
   cap by SHRINKING the frame, never cropping it, so the two 56 px decisions
   can never be pushed out of reach. */
#rvStage .rvw-card{--ev-cap:min(220px,30vh);padding:14px;background:rgba(10,15,17,.62)}
#rvStage .rvw-card .top{display:flex;flex-direction:column;gap:9px;padding:0}
#rvStage .rvw-card button.thumb{width:100%;min-width:100%;height:auto;aspect-ratio:auto;
  max-height:var(--ev-cap);border-radius:12px;margin-bottom:0;background:transparent;
  display:flex;justify-content:center;align-items:flex-start}
#rvStage .rvw-card button.thumb:disabled{opacity:1;cursor:default}
#rvStage .rvw-card button.thumb img{position:static;display:block;width:auto;max-width:100%;
  height:auto;max-height:var(--ev-cap);object-fit:contain;border-radius:12px}
#rvStage .rvw-card button.thumb img.evbg{display:none}
#rvStage .rvw-card button.thumb svg{width:44px;height:44px;margin:26px auto;display:block}
#rvStage .rvw-card .body{display:grid;grid-template-columns:minmax(0,1fr) fit-content(58%);
  grid-template-rows:auto auto auto auto;align-items:center;column-gap:10px;row-gap:6px;width:100%}
#rvStage .rvw-card .clsrow{grid-column:1;grid-row:1;min-width:0;margin:0;align-items:center}
#rvStage .rvw-card .cls{font-size:27px;font-weight:800;line-height:1.14;letter-spacing:-.022em;
  -webkit-line-clamp:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rvStage .rvw-card .clsic{width:26px;height:26px;margin-top:2px}
#rvStage .rvw-card .sevrow{display:contents}
#rvStage .rvw-card .sevrow .sev{grid-column:2;grid-row:1;justify-self:end;font-size:16px;padding:4px 11px}
#rvStage .rvw-card .sevrow .kpichip{grid-column:1/-1;grid-row:2;justify-self:stretch;max-width:100%;
  display:flex;align-items:baseline;gap:9px;padding:0;border:0;background:none;border-radius:0}
#rvStage .rvw-card .kpichip .kl{font-size:12px;letter-spacing:.12em;color:var(--tx3);font-weight:800}
#rvStage .rvw-card .kpichip .kv{font-size:20px;font-weight:650;color:var(--tx);line-height:1.22}
#rvStage .rvw-card .status{grid-column:1/-1;grid-row:3;justify-self:start;text-align:start;margin:0;
  white-space:nowrap;flex-wrap:nowrap;min-width:0;max-width:100%;overflow:hidden;font-size:16px;line-height:1.3}
#rvStage .rvw-card .meta{grid-column:1/-1;grid-row:4;min-width:0;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;margin:0;font-size:15px;line-height:1.3}
#rvStage .rvw-card .cardfoot{padding:0;margin-top:12px}
#rvStage .rvw-card .acts{flex-wrap:nowrap;gap:10px}
#rvStage .rvw-card .acts .btn{height:56px;min-height:56px;font-size:19px;font-weight:800;flex:1 1 0}
/* Invalid is a real decision here, not a quiet secondary: on this screen the
   two verdicts are equally likely and must look equally tappable. */
#rvStage .rvw-card .acts .btn.invalid{background:var(--crit);color:#fff;border:none}
#rvStage .rvw-card .cardfoot .statusbar{height:56px;font-size:16px}

/* ---------- the queue is empty: ONE primary action ------------------------- */
.rvw-done{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;height:100%;text-align:center;padding:8px}
.rvw-done[hidden]{display:none}
.rvw-done>svg{width:44px;height:44px;color:var(--acc);stroke:var(--acc);stroke-width:2.4}
.rvw-done b{font-size:24px;font-weight:750;letter-spacing:-.02em}
.rvw-done span{color:var(--tx2);font-size:var(--fz-body)}
#rvDone{min-width:280px;height:56px;min-height:56px;font-size:19px;font-weight:800;
  margin-top:8px;padding:0 26px}

/* ---------- 640x604 split: one column, the stage first --------------------- */
@media (max-width:900px) and (orientation:landscape){
  #review{padding:10px 12px 12px;gap:10px}
  .rvw-ttl h2{font-size:20px}
  .rvw-sub{display:none}
  .rvw-prog{min-width:96px}
  .rvw-prog b{font-size:19px}
  .rvw-keep{height:40px;min-height:40px;padding:0 12px}
  .rvw-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:10px}
  .rvw-stage{order:-1;padding:12px 12px 14px;gap:8px}
  .rvw-ssub{display:none}
  .rvw-listpanel{max-height:26vh}
  .rvw-list{padding:10px 10px 16px;gap:8px}
  #rvStage .rvw-card{--ev-cap:min(130px,20vh);padding:12px}
  #rvStage .rvw-card .cls{font-size:20px}
  #rvStage .rvw-card .clsic{width:20px;height:20px}
  #rvStage .rvw-card .kpichip .kv{font-size:16px}
  #rvStage .rvw-card .acts .btn{height:52px;min-height:52px;font-size:var(--fz-md-lg)}
  .rvw-done b{font-size:19px}
  #rvDone{min-width:220px;height:52px;min-height:52px;font-size:var(--fz-md-lg)}
}

/* ---------- 604x1280 portrait: stacked, the stage still first -------------- */
@media (orientation:portrait){
  .rvw-head{flex-wrap:wrap;gap:10px}
  .rvw-ttl{flex:1 1 100%;order:1}
  .rvw-prog{order:2;margin-left:0;text-align:left;flex:1 1 auto}
  .rvw-keep{order:3;margin-left:auto}
  .rvw-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .rvw-stage{order:-1}
  .rvw-listpanel{max-height:38vh}
  #rvStage .rvw-card{--ev-cap:min(300px,26vh)}
}

@media (prefers-reduced-motion:reduce){
  #review,.rvw-bar i{transition:none}
}