/* widgets/reconcile-view — THE RECONCILE, as a live surface (Builder, 2026-08-08)

   Craig accepted the built view 8/8 21:47 ("All the renderings are fantastic. Go."). This is the
   Designer's stylesheet ported into the glass, with two changes and no third:

   1. EVERY CLASS IS PREFIXED `rv-`. The standalone page owned its whole document, so it could call
      things `.panel`, `.row`, `.label`, `.block`, `.step`, `.chip`. Dropped into index.html as-is,
      each of those would have collided with the app's own — `.row` alone appears across the floor,
      the popouts and the close band. A port that keeps the pretty names is a port that repaints
      half the app.

   2. THE COLORS ARE THE APP'S OWN TOKENS, ALIASED HERE, not the mockup's copies of them. The
      mockup hard-coded `--g700:#525854` etc. because it stood alone; every one of those hexes
      already exists in styles.css as `--motm-grey-700`. Aliasing rather than re-declaring means a
      firm.json palette override reaches this surface like it reaches every other one — a second
      copy of the palette is a palette that drifts.

   NO NEW WEBFONT. The mockup asked Google for JetBrains Mono; the app loads Fraunces + Inter and
   nothing else. The numeric face here is the system mono stack, so this surface adds zero external
   requests. (Inter ships 400/500/600 in this app — no 700 — so weights stop at 600.)

   COURT-HONEST COLOR: alarm ink (--motm-danger) appears on exactly one thing, the band for a close
   that cannot be signed off, which is the firm's own court — a reviewer's own sign-off is the one
   verdict this surface is entitled to be loud about. Everything else is meter ink. */

.rv-root {
  /* the mockup's local names → the app's canonical tokens */
  --rv-ink: var(--motm-charcoal, #1a1d1c);
  --rv-g900: var(--motm-grey-900, #2c302e);
  --rv-g700: var(--motm-grey-700, #525854);
  --rv-g500: var(--motm-grey-500, #8a918d);
  --rv-g300: var(--motm-grey-300, #d4d8d6);
  --rv-g100: var(--motm-grey-100, #f1f3f2);
  --rv-g50: var(--motm-grey-50, #f8faf9);
  --rv-success: var(--motm-success, #2e7d4f);
  --rv-warning: var(--motm-warning, #b87a14);
  --rv-info: var(--motm-info, #2c5e8f);
  --rv-danger: var(--motm-danger, #a53939);
  --rv-warn-deep: #5c4a1e;
  --rv-warn-tint: #fdf6e6;
  --rv-warn-line: #e6cf9a;
  --rv-danger-tint: #fbeeee;
  --rv-danger-line: #e2b4b4;
  --rv-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  color: var(--rv-ink);
  font-size: var(--fs-body, 13.5px);
}
.rv-root * { box-sizing: border-box; }
.rv-label {
  font-size: var(--fs-label, 11px); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; line-height: 1.2;
}

/* ── the picker: which close is on the screen ─────────────────────────────── */
.rv-seg { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.rv-seg button {
  appearance: none; border: 1px solid var(--rv-g300); background: var(--rv-g50);
  border-radius: var(--radius-md, 8px); padding: 11px 16px; cursor: pointer; text-align: left;
  font: inherit; color: inherit; display: flex; align-items: center; gap: 12px;
  transition: border-color .14s, background .14s, box-shadow .14s; min-width: 300px;
}
.rv-seg button:hover { border-color: var(--signal); background: #fff; }
.rv-seg button[aria-pressed="true"] {
  border-color: var(--canopy); background: #fff;
  box-shadow: 0 0 0 2px var(--signal-tint), var(--shadow-sm);
}
.rv-seg .rv-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; background: var(--rv-g300); }
.rv-seg button[aria-pressed="true"] .rv-dot.ok { background: var(--action); }
.rv-seg button[aria-pressed="true"] .rv-dot.ex { background: var(--rv-warning); }
.rv-seg .rv-who b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.rv-seg .rv-who span { display: block; font-size: 11.5px; color: var(--rv-g700); margin-top: 2px; }
.rv-seg .rv-verd {
  margin-left: auto; font-size: var(--fs-label, 11px); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--rv-g500); white-space: nowrap; padding-left: 14px;
}
.rv-seg button[aria-pressed="true"] .rv-verd.ok { color: var(--action-deep); }
.rv-seg button[aria-pressed="true"] .rv-verd.ex { color: var(--rv-warning); }
.rv-seg button[aria-pressed="true"] .rv-verd.bad { color: var(--rv-danger); }

/* ── the derivation strip: the screen's own arithmetic, shown ─────────────── */
.rv-derive {
  background: var(--rv-g50); border: 1px solid var(--rv-g300); border-radius: var(--radius-lg, 12px);
  padding: 16px 20px 17px; margin-bottom: 22px;
}
.rv-derive > .rv-label { color: var(--rv-g500); margin-bottom: 12px; }
.rv-drow { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; }
.rv-step {
  background: #fff; border: 1px solid var(--rv-g300); border-radius: var(--radius-md, 8px);
  padding: 9px 13px; min-width: 148px;
}
.rv-step .k {
  font-size: 10.5px; color: var(--rv-g700); letter-spacing: .04em; text-transform: uppercase;
  font-weight: 600; margin-bottom: 4px;
}
.rv-step .v { font-family: var(--rv-mono); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
/* The empty box, styled so it cannot be mistaken for a number. DMS's first-pass difference reads
   "not recorded" here, and a tier-2 close's difference reads "not known" — same treatment, because
   they are the same claim: we do not have it, so we are not printing one. */
.rv-step .v.na {
  font-family: inherit; font-size: 12.5px; color: var(--rv-danger); font-weight: 600; font-style: italic;
}
.rv-op { align-self: center; font-size: 17px; color: var(--rv-g500); font-weight: 300; }
.rv-out { background: var(--canopy); border-color: var(--canopy); }
.rv-out .k { color: var(--action-line); }
.rv-out .v { color: #fff; }
.rv-out.ex { background: var(--rv-warn-deep); border-color: var(--rv-warn-deep); }
.rv-out.ex .k { color: #f0d492; }
.rv-out.bad { background: #6d2020; border-color: #6d2020; }
.rv-out.bad .k { color: #f3c4c4; }
.rv-foot { font-size: 11.5px; color: var(--rv-g700); margin-top: 12px; line-height: 1.5; max-width: 1000px; }
.rv-foot b { color: var(--rv-g900); font-weight: 600; }

/* ── the tie-out band ─────────────────────────────────────────────────────── */
.rv-tieout {
  background: var(--canopy); border-radius: var(--radius-lg, 12px); padding: 22px 26px;
  margin-bottom: 22px; display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
}
.rv-tieout.ex { background: var(--rv-warn-deep); }
.rv-tieout.bad { background: #6d2020; }
.rv-tieout .rv-big { flex-shrink: 0; }
.rv-tieout .rv-big .rv-label { color: var(--action-line); margin-bottom: 8px; }
.rv-tieout.ex .rv-big .rv-label { color: #f0d492; }
.rv-tieout.bad .rv-big .rv-label { color: #f3c4c4; }
.rv-tieout .rv-big .v {
  font-family: var(--rv-mono); font-size: 52px; font-weight: 600; color: #fff; line-height: .95;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
/* A verdict with no number behind it must not be set in 52px numerals — it is a sentence. */
.rv-tieout .rv-big .v.na { font-family: 'Fraunces', Georgia, serif; font-size: 30px; letter-spacing: 0; line-height: 1.1; }
.rv-tieout .rv-big .cap { font-size: 12.5px; color: var(--brand-line-pale, #cfe3d3); margin-top: 9px; font-weight: 500; max-width: 330px; line-height: 1.45; }
.rv-tieout.ex .rv-big .cap { color: #e6d3a8; }
.rv-tieout.bad .rv-big .cap { color: #eec4c4; }
.rv-tieout .rv-eq { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rv-tieout .rv-cell { min-width: 126px; }
.rv-tieout .rv-cell .rv-label { color: #8fb39d; margin-bottom: 6px; }
.rv-tieout.ex .rv-cell .rv-label { color: #bfa877; }
.rv-tieout.bad .rv-cell .rv-label { color: #cc9999; }
.rv-tieout .rv-cell .v { font-family: var(--rv-mono); font-size: 20px; font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }
.rv-tieout .rv-cell .v.na { font-family: inherit; font-size: 13px; font-style: italic; opacity: .85; }
.rv-tieout .rv-op { font-size: 22px; color: #6d9683; font-weight: 300; }
.rv-tieout .rv-verdict { margin-left: auto; text-align: right; flex-shrink: 0; }
.rv-stamp {
  display: inline-flex; align-items: center; gap: 9px; background: var(--action); color: #fff;
  padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
}
.rv-tieout.ex .rv-stamp { background: #c9982f; color: #3a2c08; }
.rv-tieout.bad .rv-stamp { background: #e8d0d0; color: #6d2020; }
.rv-tieout .rv-verdict p { font-size: 12px; color: var(--brand-line-pale, #cfe3d3); margin-top: 11px; max-width: 290px; line-height: 1.5; }
.rv-tieout.ex .rv-verdict p { color: #e6d3a8; }
.rv-tieout.bad .rv-verdict p { color: #eec4c4; }

/* ── the A-frame: statement left, our template right, threads between ─────── */
.rv-screen {
  background: #fff; border: 1px solid var(--rv-g300); border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-md); padding: 24px 26px 28px; margin-bottom: 22px;
}
.rv-panels { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 112px minmax(0,1fr); align-items: start; }
.rv-threads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; }
.rv-threads path { fill: none; stroke-linecap: round; transition: stroke-width .15s, opacity .15s; }
.rv-panel { position: relative; z-index: 1; min-width: 0; }
.rv-phead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding: 0 2px; }
.rv-phead .rv-label { color: var(--rv-g500); }
.rv-phead .rv-note { font-size: 11.5px; color: var(--rv-g700); }

/* the statement, as the bank sent it */
.rv-paper { background: #fff; border: 1px solid var(--rv-g300); border-radius: var(--radius-md, 8px); box-shadow: 0 2px 10px rgba(26,29,28,.07); overflow: hidden; }
.rv-paper .rv-ph { padding: 14px 16px; border-bottom: 2px solid var(--rv-ink); display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.rv-paper .rv-bank { display: flex; align-items: center; gap: 9px; }
.rv-paper .rv-tri { width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 15px solid var(--rv-success); }
.rv-paper .rv-bank b { font-size: 15px; font-weight: 600; letter-spacing: .02em; }
.rv-paper .rv-acct { text-align: right; font-size: 10.5px; color: var(--rv-g700); line-height: 1.5; }
.rv-paper .rv-acct b { font-family: var(--rv-mono); color: var(--rv-ink); font-size: 11.5px; }
.rv-paper .rv-ptitle { padding: 11px 16px; text-align: center; border-bottom: 1px solid var(--rv-g300); background: var(--rv-g50); }
.rv-paper .rv-ptitle b { font-size: 12px; font-weight: 600; letter-spacing: .04em; display: block; }
.rv-paper .rv-ptitle span { font-size: 11px; color: var(--rv-g700); }
.rv-sum { padding: 9px 16px; }
.rv-sum .rv-srow { display: flex; justify-content: space-between; gap: 14px; font-size: 12px; padding: 3px 0; color: var(--rv-g900); }
.rv-sum .rv-srow .a { font-family: var(--rv-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.rv-sum .rv-srow.tot { border-top: 1px solid var(--rv-ink); margin-top: 5px; padding-top: 6px; font-weight: 600; }
.rv-sum .rv-srow.tot .a { font-size: 13.5px; }
.rv-scrollbox { max-height: 498px; overflow-y: auto; border-top: 1px solid var(--rv-g300); }
.rv-sect { font-size: var(--fs-micro, 10px); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; background: var(--rv-g100); color: var(--rv-g900); padding: 5px 16px; border-bottom: 1px solid var(--rv-g300); position: sticky; top: 0; z-index: 2; }
.rv-sline { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; padding: 0 16px; align-items: center; height: 30px; font-size: 12px; border-bottom: 1px solid var(--rv-g100); transition: background .12s; }
.rv-sline .d { font-family: var(--rv-mono); font-size: 11px; color: var(--rv-g700); }
.rv-sline .t { color: var(--rv-g900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-sline .a { font-family: var(--rv-mono); font-weight: 500; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rv-sline.pos .a { color: var(--rv-success); }
.rv-sline.hl { background: var(--signal-tint); }
.rv-sline.dim { opacity: .28; }

/* the bank's own daily balance table */
.rv-ckpt { border-top: 1px solid var(--rv-g300); padding: 11px 16px 13px; background: var(--rv-g50); }
.rv-ckpt .rv-label { color: var(--rv-g500); margin-bottom: 8px; }
.rv-ckpt .rv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 3px 10px; }
.rv-ckpt .rv-c { display: flex; justify-content: space-between; gap: 6px; font-size: 10.5px; font-family: var(--rv-mono); font-variant-numeric: tabular-nums; }
.rv-ckpt .rv-c span:first-child { color: var(--rv-g500); }
.rv-ckpt .rv-c span:last-child { font-weight: 500; }
.rv-ckpt .rv-said { font-size: 11px; color: var(--action-deep); margin-top: 9px; font-weight: 600; }

/* our reconcile — the same shape on every client */
.rv-tpl { background: #fff; border: 1px solid var(--rv-g300); border-radius: var(--radius-md, 8px); box-shadow: 0 2px 10px rgba(26,29,28,.07); overflow: hidden; }
.rv-tpl .rv-th { display: grid; grid-template-columns: 74px 1fr 104px 104px; gap: 10px; padding: 8px 16px; background: var(--canopy); color: #fff; font-size: var(--fs-micro, 10px); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.rv-tpl .rv-th .r { text-align: right; }
.rv-trow { display: grid; grid-template-columns: 74px 1fr 104px 104px; gap: 10px; padding: 12px 16px; align-items: start; border-bottom: 1px solid var(--rv-g100); transition: background .12s; }
.rv-trow .d { font-family: var(--rv-mono); font-size: 11px; color: var(--rv-g700); padding-top: 2px; line-height: 1.45; }
.rv-trow .what b { display: block; font-size: 13px; font-weight: 600; line-height: 1.35; margin-bottom: 3px; }
.rv-trow .what span { display: block; font-size: 11.5px; color: var(--rv-g700); line-height: 1.5; }
.rv-trow .a { font-family: var(--rv-mono); font-weight: 500; font-size: 13px; text-align: right; padding-top: 1px; font-variant-numeric: tabular-nums; }
.rv-trow.in .a { color: var(--rv-success); }
.rv-trow .st { text-align: right; }
.rv-chip { display: inline-block; font-size: var(--fs-micro, 10px); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.rv-chip.ok { background: var(--action-tint); color: var(--action-deep); border: 1px solid var(--action-line); }
.rv-chip.wash { background: #e8f0f7; color: var(--rv-info); border: 1px solid #b9d2e6; }
.rv-chip.ex { background: var(--rv-warn-tint); color: var(--rv-warning); border: 1px solid var(--rv-warn-line); }
.rv-trow.washrow { background: #f7fafc; }
.rv-trow.exrow { background: var(--rv-warn-tint); }
.rv-trow.exrow .what b { color: var(--rv-warn-deep); }
.rv-trow .declared { display: block; font-size: 10.5px; color: var(--rv-warning); margin-top: 6px; font-weight: 600; font-style: italic; }
.rv-trow.hl { background: var(--signal-tint); }
.rv-trow.dim { opacity: .28; }
.rv-tfoot { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 16px; background: var(--rv-g50); border-top: 2px solid var(--rv-ink); gap: 14px; }
.rv-tfoot .l { font-size: 12px; font-weight: 600; }
.rv-tfoot .v { font-family: var(--rv-mono); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rv-tfoot .v.na { font-family: inherit; font-size: 12.5px; font-style: italic; color: var(--rv-danger); }

/* the empty panel — a close with nothing to draw says so IN the frame, not instead of it */
.rv-blank { border: 1px dashed var(--rv-g300); border-radius: var(--radius-md, 8px); background: var(--rv-g50); padding: 26px 20px; text-align: center; }
.rv-blank .rv-label { color: var(--rv-g500); margin-bottom: 8px; }
.rv-blank p { font-size: 12.5px; line-height: 1.6; color: var(--rv-g700); max-width: 460px; margin: 0 auto; }

/* teach cards */
.rv-teach { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.rv-tcard { background: var(--rv-g50); border: 1px solid var(--rv-g300); border-radius: var(--radius-md, 8px); padding: 13px 15px; border-left: 3px solid var(--rv-g300); }
.rv-tcard.info { background: #f4f8fb; border-left-color: var(--rv-info); }
.rv-tcard.warn { background: var(--rv-warn-tint); border-left-color: var(--rv-warning); }
.rv-tcard .rv-label { color: var(--rv-g700); margin-bottom: 6px; }
.rv-tcard p { font-size: 12px; line-height: 1.6; color: var(--rv-g900); }
.rv-tcard p b, .rv-tcard p .n { font-weight: 600; }
.rv-tcard p .n { font-family: var(--rv-mono); }

/* ── the unexplained band — ALWAYS drawn, even at $0.00 ───────────────────── */
.rv-unex { border-radius: var(--radius-lg, 12px); padding: 17px 22px; margin-bottom: 22px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; border: 1px solid var(--action-line); background: var(--action-tint); }
.rv-unex.bad { border-color: var(--rv-danger-line); background: var(--rv-danger-tint); }
.rv-unex .rv-amt { font-family: var(--rv-mono); font-size: 30px; font-weight: 600; color: var(--action-deep); line-height: 1; font-variant-numeric: tabular-nums; }
.rv-unex.bad .rv-amt { color: var(--rv-danger); }
.rv-unex .rv-amt.na { font-family: 'Fraunces', Georgia, serif; font-size: 22px; }
.rv-unex .rv-who .rv-label { color: var(--action-deep); margin-bottom: 6px; }
.rv-unex.bad .rv-who .rv-label { color: var(--rv-danger); }
.rv-unex .rv-who p { font-size: 12.5px; line-height: 1.55; color: var(--rv-g900); max-width: 820px; }
.rv-unex .rv-who p b { font-weight: 600; }
.rv-unex .rv-blockers { margin: 8px 0 0; padding-left: 18px; }
.rv-unex .rv-blockers li { font-size: 12.5px; line-height: 1.55; color: var(--rv-g900); margin-bottom: 4px; }

/* ── corrections rail ─────────────────────────────────────────────────────── */
.rv-block { background: #fff; border: 1px solid var(--rv-g300); border-radius: var(--radius-lg, 12px); box-shadow: var(--shadow-md); padding: 24px 26px 26px; margin-bottom: 22px; }
.rv-corrhead { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.rv-corrhead h3 { font-family: 'Fraunces', Georgia, serif; font-size: 23px; font-weight: 500; }
.rv-corrhead .rv-note { font-size: 12px; color: var(--rv-g700); }
.rv-tally { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.rv-tally .t { background: #fff; border: 1px solid var(--rv-g300); border-radius: var(--radius-md, 8px); padding: 9px 14px; min-width: 168px; }
.rv-tally .t .k { font-size: 10.5px; color: var(--rv-g700); letter-spacing: .04em; text-transform: uppercase; font-weight: 600; margin-bottom: 4px; }
.rv-tally .t .v { font-family: var(--rv-mono); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rv-tally .t.agree { border-color: var(--action-line); background: var(--action-tint); }
.rv-tally .t.agree .v { color: var(--action-deep); }
.rv-tally .t.disagree { border-color: var(--rv-danger-line); background: var(--rv-danger-tint); }
.rv-tally .t.disagree .v { color: var(--rv-danger); }
.rv-fixlist { display: grid; gap: 14px; }
.rv-fix { background: #fff; border: 1px solid var(--rv-g300); border-radius: var(--radius-lg, 12px); overflow: hidden; box-shadow: var(--shadow-sm); }
.rv-fix .rv-fh { display: flex; align-items: center; gap: 13px; padding: 13px 18px; background: var(--rv-warn-tint); border-bottom: 1px solid var(--rv-warn-line); }
.rv-fix .rv-fh .n { width: 26px; height: 26px; border-radius: 50%; background: var(--rv-warning); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.rv-fix .rv-fh h4 { font-size: 15px; font-weight: 600; flex: 1; line-height: 1.3; }
.rv-fix .rv-fh .rv-amt { font-family: var(--rv-mono); font-size: 16px; font-weight: 600; color: var(--rv-warn-deep); font-variant-numeric: tabular-nums; }
.rv-fix .rv-fb { padding: 16px 18px 18px; display: grid; gap: 13px; }
.rv-qa .rv-label { color: var(--rv-g500); margin-bottom: 5px; }
.rv-qa p { font-size: 12.5px; line-height: 1.62; color: var(--rv-g900); }
.rv-ba { display: flex; align-items: stretch; gap: 13px; flex-wrap: wrap; }
.rv-ba .side { flex: 1; min-width: 200px; border-radius: var(--radius-md, 8px); padding: 10px 13px; border: 1px solid var(--rv-g300); background: var(--rv-g50); }
.rv-ba .side.was { border-color: var(--rv-danger-line); background: var(--rv-danger-tint); }
.rv-ba .side.now { border-color: var(--action-line); background: var(--action-tint); }
.rv-ba .side .rv-label { color: var(--rv-g700); margin-bottom: 5px; }
.rv-ba .side .v { font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.rv-ba .rv-arrow { align-self: center; font-size: 19px; color: var(--rv-g500); }
.rv-rec { background: var(--rv-g50); border: 1px solid var(--rv-g300); border-radius: var(--radius-md, 8px); padding: 10px 13px; font-size: 11.5px; line-height: 1.6; color: var(--rv-g700); }
.rv-rec b { color: var(--rv-g900); display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.rv-proof { background: var(--canopy); color: #fff; border-radius: var(--radius-md, 8px); padding: 14px 17px 16px; }
.rv-proof b.h { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--action-line); margin-bottom: 8px; }
.rv-proof ol { margin: 0; padding-left: 19px; }
.rv-proof li { font-size: 12px; line-height: 1.62; color: #dbe9df; margin-bottom: 7px; }
.rv-proof li:last-child { margin-bottom: 0; }
.rv-proof.missing { background: var(--rv-danger-tint); border: 1px solid var(--rv-danger-line); }
.rv-proof.missing b.h { color: var(--rv-danger); }
.rv-proof.missing p { font-size: 12.5px; color: var(--rv-danger); font-weight: 600; line-height: 1.55; }

/* ── provenance + reviewer ────────────────────────────────────────────────── */
.rv-prov { display: flex; gap: 18px; flex-wrap: wrap; padding: 11px 16px; background: var(--rv-g50); border: 1px solid var(--rv-g300); border-radius: var(--radius-md, 8px); margin-bottom: 14px; }
.rv-prov .rv-pitem { font-size: 11.5px; color: var(--rv-g700); line-height: 1.5; }
.rv-prov .rv-pitem b { color: var(--rv-g900); font-weight: 600; margin-right: 6px; }
.rv-prov .rv-pitem.warn { color: var(--rv-warning); }
.rv-prov .rv-pitem.warn b { color: var(--rv-warn-deep); }
.rv-prov .rv-pitem .rv-ns { font-style: italic; color: var(--rv-g500); }

.rv-state { padding: 22px 20px; font-size: 12.5px; line-height: 1.6; color: var(--rv-g700); }
.rv-state.err { color: var(--rv-danger); }

/* ── it reads at 1440 AND on a phone ──────────────────────────────────────── */
@media (max-width: 1200px) {
  /* Below the two-panel width the threads have nowhere honest to run, so they are not drawn.
     The C-state does not lose its meaning: a row the bank never saw still carries its own
     "No bank line" chip and its declaration, which is the same fact the mid-air thread draws. */
  .rv-panels { grid-template-columns: 1fr; gap: 22px; }
  .rv-threads { display: none; }
  .rv-teach { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .rv-screen { padding: 14px 12px 18px; }
  .rv-block { padding: 16px 14px 18px; }
  .rv-derive { padding: 13px 14px 14px; }
  .rv-step { min-width: 128px; flex: 1 1 128px; }
  .rv-tieout { padding: 17px 16px; gap: 18px; }
  .rv-tieout .rv-big .v { font-size: 38px; }
  .rv-tieout .rv-verdict { margin-left: 0; text-align: left; }
  .rv-tieout .rv-verdict p { max-width: none; }
  .rv-seg button { min-width: 0; width: 100%; }
  /* The template is a four-column grid at desk width; on a phone the status chip drops under the
     amount rather than crushing the description to two words a column. */
  .rv-tpl .rv-th { grid-template-columns: 58px 1fr 92px; }
  .rv-tpl .rv-th span:last-child { display: none; }
  .rv-trow { grid-template-columns: 58px 1fr 92px; }
  .rv-trow .st { grid-column: 2 / -1; text-align: left; margin-top: 6px; }
  .rv-scrollbox { max-height: 340px; }
  .rv-unex { padding: 14px 16px; gap: 14px; }
}

/* The picker's quiet tier: an account this screen holds no lines for. Neutral ink on purpose —
   see the note over segHTML(). A grey dot and a lowercase label read as "nothing here yet",
   which is what is true; the verdict words live inside the panel with their blockers. */
.rv-seg button[data-rv-shows="0"] { opacity: .82; }
.rv-seg button[data-rv-shows="0"] .rv-verd {
  text-transform: none; letter-spacing: 0; font-weight: 500; font-style: italic;
  color: var(--rv-g500); font-size: 11.5px;
}
.rv-seg button[data-rv-shows="0"]:hover { opacity: 1; }
.rv-segnote {
  margin: -4px 0 14px; font-size: 11.5px; line-height: 1.5; color: var(--rv-g700);
  padding: 9px 13px; background: var(--rv-g50);
  border: 1px solid var(--rv-g300); border-left: 3px solid var(--rv-g300);
  border-radius: var(--radius-md, 8px);
}