/* Copyright (c) 2024-2026 Ultimate Underwriting LLC. All rights reserved. */
/* Verify tab (workspace/_tab_verify.html).
   Lived inline in the fragment until the debt ratchet counted it. The tab is
   swapped in by htmx, so its stylesheet has to be loaded by the PAGE — see the
   link in templates/base.html. */
.ws-verify,.ws-verify *{box-sizing:border-box}
.ws-verify{display:flex;flex-direction:column;gap:12px;padding:4px}
.wv-tally{display:flex;gap:8px;flex-wrap:wrap}
.wv-card{padding:14px 16px}
.wv-card-head{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:10px}
.wv-month{font-size:13px;font-weight:600;color:var(--text-primary);margin:0}
.wv-group{font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-secondary); margin:4px 0 2px}
/* min-width:0 on both: a grid item defaults to min-width:auto, so the long
   "not read" placeholder sized the input past its cell and painted it over the
   next field's value. Caught by rendering it, not by any test. */
.wv-field{display:flex;flex-direction:column;gap:4px;position:relative;min-width:0}
.wv-label{font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-secondary);}
.wv-input{width:100%;min-width:0;padding:7px 26px 7px 10px;border-radius:7px;
  text-overflow:ellipsis;
  border:1px solid var(--border-color,rgba(128,128,128,.28));
  background:var(--bg-input,rgba(128,128,128,.06));color:var(--text-primary);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  font-variant-numeric:tabular-nums}
.wv-input:focus{outline:2px solid var(--accent-primary);outline-offset:1px;
  border-color:transparent}
.wv-input[readonly]{opacity:.55;cursor:not-allowed}
.is-abstained .wv-input{border-style:dashed;border-color:var(--warning-mark)}
.is-abstained .wv-label{color:var(--warning)}
/* Saved state rides on the field, not a toast: twenty-five fields would be
   twenty-five toasts. */
.wv-state{position:absolute;right:8px;bottom:9px;width:12px;height:12px;
  font-size:11px;line-height:12px;text-align:center;opacity:0;
  transition:opacity .18s ease}
.wv-field[data-state] .wv-state{opacity:1}
.wv-field[data-state="saving"] .wv-state::after{content:"·";color:var(--text-muted)}
.wv-field[data-state="confirmed"] .wv-state::after{content:"✓";color:var(--success)}
.wv-field[data-state="corrected"] .wv-state::after{content:"✎";color:var(--warning)}
.wv-field[data-state="error"] .wv-state::after{content:"!";color:var(--danger)}
.wv-field[data-state="confirmed"] .wv-input{border-color:var(--success)}
.wv-field[data-state="corrected"] .wv-input{border-color:var(--warning-mark)}
/* A correction the evaluation does not take. Same ✎ (the corpus DID learn it)
   over a muted, dashed rule, because the deal did not move — the field used to
   look identical to one that changed a verdict. `failed` is the loud one: the
   corpus kept it and the deal did not, and that is worth retyping. */
.wv-field[data-reach="none"] .wv-input,
.wv-field[data-reach="partial"] .wv-input,
.wv-field[data-reach="superseded"] .wv-input{border-color:var(--text-muted);border-style:dashed}
.wv-field[data-reach="none"] .wv-state::after,
.wv-field[data-reach="superseded"] .wv-state::after{color:var(--text-muted)}
.wv-field[data-reach="failed"] .wv-input{border-color:var(--danger);border-style:dashed}
.wv-field[data-reach="failed"] .wv-state::after{content:"!";color:var(--danger)}
.wv-field[data-state="error"] .wv-input{border-color:var(--danger)}
.wv-more{margin-top:10px}
.wv-more summary{font-size:11.5px;color:var(--text-muted);cursor:pointer;
  padding:5px 0;user-select:none}
.wv-more summary:hover{color:var(--text-secondary)}
.wv-more .wv-grid{margin-top:8px}
.wv-empty{padding:22px;text-align:center;color:var(--text-muted);font-size:13px}
.wv-empty p{margin:8px 0 0}
@media (prefers-reduced-motion:reduce){.wv-state{transition:none}}

/* ── What revenue leaves out (per month) ─────────────────────────────────────
   The reviewer could see how much came out and under which reasons; this is
   which deposits, and the control to put one back. */
.wv-excluded > summary { display: flex; align-items: center; gap: 8px; }
.wv-exc-total { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.wv-exc-date { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-secondary); white-space: nowrap; }
/* The description is statement text and can be long; it must not push the
   amount or the button off the card. */
.wv-exc-desc { color: var(--text-primary); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wv-exc-locked { color: var(--text-muted); }
.wv-exc-note { margin-top: 6px; font-size: 11px; color: var(--text-muted); }
.wv-exc-note.is-bad { color: var(--danger); }

/* The table scrolls inside its own card rather than widening the page. */
.wv-excluded { overflow-x: auto; }


/* ── Revenue · 3-month avg, at the top ───────────────────────────────────────
   The engine's own figure, not recomputed here. One line that wraps. */
/* No frame of its own: the sticky bar is already the box (no box inside a box). */
.wv-avg { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.wv-avg-k { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-secondary); }
.wv-avg-v { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 18px; font-weight: 700;
    color: var(--text-primary); font-variant-numeric: tabular-nums; }
.wv-avg-unit { font-size: 11px; font-weight: 500; color: var(--text-muted); margin-left: 2px; }
.wv-avg-months { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; font-size: 12px; color: var(--text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
.wv-avg-ml { color: var(--text-muted); margin-right: 3px; }
.wv-avg-sep { color: var(--text-muted); }
.wv-avg-note { flex-basis: 100%; font-size: 11px; color: var(--text-muted); }

/* ── Sticky counter bar ──────────────────────────────────────────────────────
   The tally and the revenue average stay on screen while the reviewer scrolls
   through the month cards below (`.wv-head` itself scrolls away — it is read
   once). Opaque background on purpose: `.glass`'s translucency would let the
   month cards scroll through and the numbers become unreadable. */
.wv-sticky{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:8px 16px;margin:10px 0 14px;padding:10px 14px;border-radius:10px;
  background:var(--bg-card);border:1px solid var(--border-default);box-shadow:var(--shadow-card)}
@media (max-width:640px){.wv-sticky{padding:8px 10px}}

/* ── Buckets tab: the same field, sized for a table cell ─────────────────────
   Verify was folded into Buckets (2026-09-25). A figure the reviewer can fix
   sits in the bucket's own table instead of a second copy on month cards; the
   column header is its label, so the cell carries only the input and its mark. */
.ws-buckets{padding:0}
.wv-cell{display:block;min-width:96px;max-width:180px}
/* Right-aligned number columns keep the box against the right edge. */
:is(.text-right, .num) > .wv-cell{margin-left:auto}
.wv-cell .wv-input{padding:3px 20px 3px 6px;font-size:12px;text-align:right;border-radius:6px}
/* Text fields (bank name) read left to right; only numbers carry inputmode. */
.wv-cell .wv-input:not([inputmode]){text-align:left}
.ws-buckets td:first-child{white-space:nowrap}
.wv-cell .wv-state{right:6px;bottom:6px}

/* Phone (Joel 2026-09-25): the pinned bar keeps its two numbers — the tally and
   the 3-month average — and drops the month list and the explanation, which on
   a 390px screen turned a one-line bar into a third of the screen. */
@media (max-width:640px){
  .wv-sticky{margin:6px 0 10px;padding:6px 10px;gap:6px 10px}
  .wv-avg{gap:4px 10px}
  .wv-avg-months,.wv-avg-note{display:none}
  .wv-avg-v{font-size:15px}
}