/* Components — composition per the operative renders (portfolio--rung2.html is the
   visual reference for this area). All values from tokens.css; logical properties
   only, so the X7 direction flip is structural. */

* { box-sizing: border-box; }

/* Shell (V5) */
.shell { display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-3) var(--sp-6);
  background: var(--surface); border-block-end: 1px solid var(--line); }
.wordmark { font-size: var(--fs-heading); font-weight: var(--w-semibold); color: var(--ink); }
.nav { display: flex; gap: var(--sp-4); flex: 1; }
.nav a { color: var(--ink-muted); text-decoration: none; padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-control); font-weight: var(--w-medium); }
.nav a.active { color: var(--accent); background: var(--surface-sunken); }
.lang-toggle { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-control);
  padding: var(--sp-1) var(--sp-3); cursor: pointer; color: var(--ink-muted); font-size: var(--fs-small); }

.page { max-width: 1080px; margin-inline: auto; padding: var(--sp-6); }

/* Strip counts (V13/L4) — awareness lives here, one loud count only */
.strip { display: flex; gap: var(--sp-2); margin-block-end: var(--sp-4); flex-wrap: wrap; }
.strip-count { border: 1px solid var(--line); background: var(--surface); border-radius: 999px;
  padding: var(--sp-1) var(--sp-3); cursor: pointer; font-size: var(--fs-small); color: var(--ink-muted); }
.strip-count.loud { border-color: var(--conf-low); color: var(--conf-low); background: var(--conf-low-wash); font-weight: var(--w-medium); }
.strip-count.active { outline: 2px solid var(--accent); }

/* Filter & lens bar (V11) */
.filterbar { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-block-end: var(--sp-4); }
.lens-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-control); overflow: hidden; }
.lens-toggle button { border: none; background: var(--surface); padding: var(--sp-1) var(--sp-3); cursor: pointer; color: var(--ink-muted); font-size: var(--fs-small); }
.lens-toggle button.on { background: var(--accent); color: var(--accent-ink); }
/* X43 (FB-3 / DJ-13=A) — the Monitor tab's live still-reading count badge: quiet, muted, low-contrast;
   never an alert-badge (R26). Present only while reading is underway; removed when it settles (E35). */
.lens-toggle button .mon-badge { display: inline-block; min-width: 18px; padding: 0 6px; margin-inline-start: 6px;
  border-radius: 999px; background: var(--accent-wash, #eaf1f8); color: var(--accent, #3b6ea5);
  font-size: var(--fs-tiny, 11px); font-weight: var(--w-medium, 600); text-align: center; vertical-align: middle; }
.lens-toggle button.on .mon-badge { background: rgba(255,255,255,.28); color: var(--accent-ink); }
.search { flex: 1; min-width: 180px; border: 1px solid var(--line); border-radius: var(--radius-control); padding: var(--sp-2) var(--sp-3); font: inherit; font-size: var(--fs-small); }
select.kind, select.sort { border: 1px solid var(--line); border-radius: var(--radius-control); padding: var(--sp-1) var(--sp-2); font: inherit; font-size: var(--fs-small); color: var(--ink-muted); background: var(--surface); }
.qf { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.qf-chip { border: 1px dashed var(--ink-subtle); background: var(--surface); border-radius: 999px;
  padding: var(--sp-1) var(--sp-3); cursor: pointer; font-size: var(--fs-small); color: var(--ink-muted); }
.qf-chip.active { border-style: solid; border-color: var(--accent); color: var(--accent); }
.imports-link { font-size: var(--fs-small); color: var(--accent); text-decoration: none; }
.clear { border: none; background: none; color: var(--accent); cursor: pointer; font-size: var(--fs-small); }

/* Contract list (V12) */
.list { display: flex; flex-direction: column; gap: var(--sp-2); }
.row { display: grid; grid-template-columns: 1fr 150px 170px 190px; gap: var(--sp-4); align-items: center;
  background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--elev-raised);
  padding: var(--sp-3) var(--sp-4); text-decoration: none; color: var(--ink); }
.row:hover { background: var(--surface-sunken); }
.row.attn { grid-template-columns: 1fr 150px 170px 190px; background: var(--conf-low-wash); box-shadow: 0 0 0 1px var(--conf-low); }
.row-name { font-weight: var(--w-medium); }
.row-name .guess { font-size: var(--fs-caption); color: var(--ink-subtle); font-weight: var(--w-regular); cursor: help; margin-inline-start: 3px; }
.row-ref { font-size: var(--fs-caption); color: var(--ink-subtle); margin-block-start: 2px; }
.row-kind { font-size: var(--fs-small); color: var(--ink-muted); }
.row-kind .unclassified { font-style: italic; color: var(--ink-subtle); }
.row-comp { font-size: var(--fs-caption); color: var(--ink-muted); }
.meter { display: block; block-size: 3px; background: var(--line); border-radius: 2px; margin-block-start: var(--sp-1); position: relative; overflow: hidden; }
.meter span { position: absolute; inset-block: 0; background: var(--accent); border-radius: 2px; }
.row-status { font-size: var(--fs-small); }
.row-fix { grid-column: 1 / -1; font-size: var(--fs-small); }
.attn-flag { color: var(--conf-low); font-weight: var(--w-medium); }
.fix-path { color: var(--accent); margin-inline-start: var(--sp-2); }
/* FB-4/FB-5: read-only reason chip — a distinct, segregated pattern naming WHY a row needs attention.
   Its own bordered pill (not fused into the flag), muted, non-interactive; the fix lives inside the contract. */
.reason-chip { display: inline-block; margin-inline-start: var(--sp-2); font-size: 11px; font-weight: var(--w-medium);
  color: var(--conf-low); background: #fdf3e6; border: 1px solid #f0d9b5; border-radius: 4px; padding: 1px 7px; cursor: default; }
.reason-chip + .reason-chip { margin-inline-start: var(--sp-1); }

/* FB-7/FB-8: the Monitor "needs you to act" demand — a not-settled family (open possible-duplicate)
   waiting on a steward's ruling. Deliberately DISTINCT from the amber needs-attention flag and from the
   passive still-reading row: a louder red demand, not a muted advisory (R27's "never conflated" + the
   design directive's "visually + mentally distinct"). PROVISIONAL form — the owed FULL ux-critique owns it. */
.row.act-now { grid-template-columns: 1fr 150px 170px 190px; background: rgba(122,74,74,.06); box-shadow: 0 0 0 1px var(--health-poor); }
.act-now-demand { margin-block-start: var(--sp-1); }
.act-flag { color: var(--health-poor); font-weight: var(--w-semibold); letter-spacing: .2px; }
.reason-chip.act { color: var(--health-poor); background: rgba(122,74,74,.08); border-color: rgba(122,74,74,.45); }

/* Status words + quiet dots (L15) — each state visibly distinct, never color-only */
.st { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--ink-muted); }
.st .dot { inline-size: 8px; block-size: 8px; border-radius: 50%; }
.st-read .dot { background: #9DBFA8; }          /* quiet green — NOT the reserved vouch-green (FND-2) */
.st-gaps .dot { background: var(--ink-subtle); }
.st-reading .dot { background: var(--accent); }
.st-couldnt .dot { background: var(--health-poor); }
.st .muted { color: var(--ink-subtle); font-size: var(--fs-caption); }
.pulse { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.empty { padding: var(--sp-12); text-align: center; color: var(--ink-muted); background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--elev-raised); }

/* Builder note — scaffolding marker, clearly not product */
.builder-note { margin-block-start: var(--sp-8); padding: var(--sp-4); border: 2px dashed var(--ink-subtle);
  border-radius: var(--radius-card); color: var(--ink-muted); background: repeating-linear-gradient(45deg, var(--surface), var(--surface) 12px, var(--surface-sunken) 12px, var(--surface-sunken) 24px); }

/* L4/R9 carve-out — the open-disputes count for a non-steward: a plain, non-interactive count (no filter affordance) */
.strip-count.static { cursor: default; background: transparent; border-color: transparent; color: var(--ink-muted); }
.strip-count.static:hover { background: transparent; }

/* ---------- Area 2 — the detail brick (V6 + V7, LG9/LG8) ---------- */
.cpage-head { padding: var(--sp-4) 0 var(--sp-2); }
.cpage-name { font-size: 22px; font-weight: 600; color: var(--ink); }
.cpage-ref { font-size: 13px; color: var(--ink-subtle); margin-block-start: 2px; }
.bricklist { display: grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); gap: var(--sp-3); margin-block-start: var(--sp-4); }
.brick { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: 2px; box-shadow: var(--elev-raised); }
.brick .label { font-size: 12px; color: var(--ink-muted); }
.brick .value { font-size: 16px; font-weight: 500; color: var(--ink); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.brick .dir { color: var(--ink-muted); font-weight: 400; }
.brick.expanded { grid-column: 1 / -1; }
.brick.absent .value, .muted-absent { color: var(--ink-subtle); font-weight: 400; }

/* R18 value-states — present-but-unreadable value shows its STATE, never bare, never fabricated.
   Rendered quietly (a distinct treatment from confidence + source-health); the drawing is design latitude. */
.vs-redacted, .vs-elsewhere { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.vs-bar { font-family: monospace; letter-spacing: -1px; color: var(--ink-subtle); background: var(--ink-subtle);
  border-radius: 3px; user-select: none; line-height: 1; }
.vs-pointer { color: var(--ink-muted); font-weight: 400; font-style: italic; }
.vs-tag { font-size: 11px; font-weight: var(--w-semibold); color: var(--ink-subtle);
  border: 1px solid var(--ink-subtle); border-radius: 10px; padding: 0 7px; opacity: .8; white-space: nowrap; }

/* trust cue — quiet high/medium (no color), the one loud amber cue for low */
.cue { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; color: var(--ink-subtle); }
.cue .g { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-subtle); }
.cue.med .g { opacity: .55; }
.pill-low { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  color: var(--conf-low); background: var(--conf-low-wash); border: 1px solid #EBCBA6; border-radius: 12px; padding: 2px 9px; }

/* steward vouch (RESERVED green) + the resting "protected" tag */
.steward-mark { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--steward-mark); }
.steward-mark .g { width: 8px; height: 8px; border-radius: 50%; background: var(--steward-mark); }
.protected-tag { font-size: 11px; color: var(--steward-mark); border: 1px solid var(--steward-mark); border-radius: 10px; padding: 0 7px; opacity: .85; }

.subhealth { font-size: 11px; color: var(--ink-subtle); display: inline-flex; align-items: center; gap: 4px; margin-block-start: 1px; }
.prov { font-size: 11.5px; color: var(--ink-subtle); margin-block-start: 2px; }
.prov.amended { color: var(--ink-muted); }
.disc { align-self: flex-end; margin-block-start: 4px; font-size: 11.5px; color: var(--accent); cursor: pointer; user-select: none; }

.detail { margin-block-start: var(--sp-3); padding-block-start: var(--sp-3); border-block-start: 1px solid var(--line);
  display: flex; flex-direction: column; gap: var(--sp-2); }
.drow { display: flex; gap: var(--sp-3); font-size: 13px; }
.drow .k { color: var(--ink-subtle); min-width: 132px; }
.drow .v { color: var(--ink-muted); }
.protected-promise { color: var(--steward-mark); }
.actions { display: flex; gap: var(--sp-2); margin-block-start: 4px; }
.btn { font-size: 13px; border-radius: var(--radius-control); padding: 6px 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--accent); font-weight: 500; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.edit-row { gap: var(--sp-2); }
.edit-input { font-size: 15px; padding: 5px 9px; border: 1px solid var(--accent); border-radius: var(--radius-control); min-width: 180px; }
.landing { font-size: 12.5px; margin-block-start: 4px; font-weight: 600; }
.landing.saved { color: var(--steward-mark); }
.landing.flagged { color: var(--ink-muted); }
.retired-line { color: var(--ink-subtle); text-decoration: line-through; text-decoration-color: var(--ink-subtle); }

/* ---------- Area 3 — contract page (V14 header · V15 type-map + groups · V16 not-found) ---------- */
.cpage-titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.cpage-name .guess { font-size: var(--fs-caption); color: var(--ink-subtle); font-weight: var(--w-regular); cursor: help; margin-inline-start: 3px; }
.open-original { white-space: nowrap; }                       /* L34 */
.cpage-state { font-size: var(--fs-small); color: var(--ink-muted); margin-block-start: var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } /* L32 */
.cpage-amended { font-size: var(--fs-small); color: var(--ink-muted); margin-block-start: var(--sp-1); font-style: italic; } /* L33 — convenience reading */

/* Page-state banner (L35) — plain, non-alarming, always names the next act */
.cpage-banner { margin-block: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-card);
  font-size: var(--fs-small); border: 1px solid var(--line); background: var(--surface-sunken); color: var(--ink-muted); }
.cpage-banner.awaiting { border-color: #EBCBA6; background: var(--conf-low-wash); color: var(--conf-low); }
.cpage-banner.withdrawn, .cpage-banner.purged { border-color: var(--line); }
.banner-fix { color: var(--accent); text-decoration: none; margin-inline-start: var(--sp-2); }
.band-stub { margin-block-start: var(--sp-3); }

/* Body layout — sticky type-map beside a co-present body (DJ-4) */
.cpage-body { display: flex; gap: var(--sp-6); align-items: flex-start; margin-block-start: var(--sp-4); }
.typemap { position: sticky; top: var(--sp-4); flex: 0 0 224px; max-height: calc(100vh - var(--sp-8)); overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--sp-3); }
.tm-title { font-size: var(--fs-caption); color: var(--ink-subtle); text-transform: uppercase; letter-spacing: .04em; margin-block-end: var(--sp-2); }
.tm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.tm-row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-control); cursor: pointer; font-size: var(--fs-small); }
.tm-row:hover { background: var(--surface-sunken); }
.tm-row.current { background: var(--surface-sunken); outline: 1px solid var(--accent); }
.tm-mark { inline-size: 16px; text-align: center; font-size: 12px; line-height: 1; }
.mk-read { color: var(--ink-subtle); }
.mk-shaky { color: var(--conf-low); }
.mk-person { color: var(--steward-mark); }
.mk-reading { color: var(--accent); }
.mk-failed { color: var(--health-poor); }
.mk-notfound { color: var(--ink-subtle); }
.mk-unread { color: var(--line); }
.tm-name { flex: 1; color: var(--ink); }
.tm-state { font-size: var(--fs-caption); color: var(--ink-subtle); }

.grp-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.grp { scroll-margin-top: var(--sp-4); }
.grp.focus { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius-card); }
.grp-head { font-size: var(--fs-small); font-weight: var(--w-semibold); color: var(--ink-muted); margin-block-end: var(--sp-2); }
.grp .bricklist { margin-block-start: 0; }
.inplace-state { padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); font-size: var(--fs-small); }
.failed-state { color: var(--health-poor); }
.fail-mark { font-weight: var(--w-semibold); }
.grp.failed .btn { margin-block-start: var(--sp-2); }

/* Not-found group (V16/L50-L52) — near the end, plain words, never bare */
.notfound-group { margin-block-start: var(--sp-4); }
.notfound-head { color: var(--ink-subtle); }
.absent-entry { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); margin-block-end: var(--sp-2); scroll-margin-top: var(--sp-4); }
.absent-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); cursor: pointer; }
.absent-label { font-size: var(--fs-small); color: var(--ink-muted); flex: 0 0 40%; }
.absent-val { font-size: var(--fs-small); color: var(--ink-subtle); flex: 1; }
.absent-entry .detail { margin: 0 var(--sp-4) var(--sp-3); }

/* ---------- Area 4 — the amendment change-story band (V9 / L36–L42) ---------- */
.band { margin-block: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.band.collapsed { color: var(--ink-subtle); font-size: var(--fs-small); font-style: italic; }
.band-title { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-subtle); margin-block-end: var(--sp-2); }
.band-track { display: flex; align-items: flex-start; gap: var(--sp-2); flex-wrap: wrap; }
.stop { flex: 0 1 200px; min-width: 168px; border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--sp-2) var(--sp-3); cursor: pointer; background: var(--surface); }
.stop:hover { background: var(--surface-sunken); }
.stop.root { border-inline-start: 3px solid var(--ink-subtle); }
.stop.amendment { border-inline-start: 3px solid var(--accent); }
.stop.unlinked { border-inline-start: 3px dashed var(--conf-low); background: var(--conf-low-wash); }
.stop.selected { outline: 2px solid var(--accent); outline-offset: 1px; }
.stop-head { font-size: var(--fs-caption); font-weight: var(--w-semibold); color: var(--ink-muted); }
.stop-name { font-size: var(--fs-small); color: var(--ink); margin-block: 2px; }
.stop-link { font-size: var(--fs-caption); margin-block-start: 2px; }
.stop-link.linked { color: var(--ink-subtle); }
.stop-link.unlinked { color: var(--conf-low); }
.stop-link .claim { color: var(--ink-subtle); }
.stop-impact { font-size: var(--fs-caption); color: var(--ink-muted); margin-block-start: var(--sp-1); }
.stop-impact.held { color: var(--conf-low); font-style: italic; }
.stop-impact .lowconf, .stop-receipt .lowconf { color: var(--conf-low); }
.stop-receipt { font-size: var(--fs-caption); color: var(--ink-muted); margin-block-start: var(--sp-2); padding-block-start: var(--sp-2); border-block-start: 1px dashed var(--line); }
.stop-doors { display: flex; flex-wrap: wrap; gap: 4px; margin-block-start: var(--sp-2); }
.btn.tiny { font-size: 11px; padding: 3px 8px; }
.stop-arrow { align-self: center; color: var(--ink-subtle); }
.band-hint { font-size: var(--fs-caption); color: var(--ink-subtle); margin-block-start: var(--sp-2); font-style: italic; }

/* Change-marking (L40) — the details an amendment changed light up in the map + groups */
.tm-row.changed { background: var(--conf-low-wash); }
.tm-row.changed .tm-name { font-weight: var(--w-medium); }
.grp.changed > .grp-head { color: var(--accent); }
.changed-badge { font-size: var(--fs-caption); font-weight: var(--w-regular); color: var(--accent); background: var(--surface-sunken); border-radius: 10px; padding: 0 var(--sp-2); margin-inline-start: var(--sp-2); }
.prov.trace { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.prov.trace:hover { color: var(--accent); }

/* Parent picker overlay (L42) */
.picker-overlay { position: fixed; inset: 0; background: rgba(26,29,33,.28); display: flex; align-items: center; justify-content: center; z-index: 50; }
.picker { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--elev-overlay); padding: var(--sp-4); inline-size: min(420px, 92vw); display: flex; flex-direction: column; gap: var(--sp-3); }
.picker-title { font-weight: var(--w-semibold); color: var(--ink); }
.picker-list { list-style: none; margin: 0; padding: 0; max-block-size: 40vh; overflow: auto; display: flex; flex-direction: column; gap: 1px; }
.picker-list li { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-control); cursor: pointer; font-size: var(--fs-small); color: var(--ink); }
.picker-list li:hover { background: var(--surface-sunken); }

/* ---------- Area 5 — the evidence moment (V4 · V8 / L60–L67) ---------- */
.ev-overlay { position: fixed; inset: 0; background: rgba(26,29,33,.34); display: flex; align-items: center; justify-content: center; z-index: 60; padding: var(--sp-6); }
.ev-modal { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--elev-overlay); inline-size: min(1040px, 96vw); max-block-size: 90vh; overflow: auto; }
.ev-route { max-width: 1180px; margin-inline: auto; }
.ev-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-block-end: 1px solid var(--line); }
.ev-prov { font-size: var(--fs-small); color: var(--ink-muted); }        /* L60 — "Reading from …", the document, not the reading */
.ev-actions { display: flex; gap: var(--sp-2); }
.ev-body { display: flex; gap: var(--sp-4); padding: var(--sp-4); align-items: flex-start; }
.ev-doc { flex: 1 1 auto; min-width: 0; }                                 /* DJ-5 — the document dominates */
.ev-rail { flex: 0 0 300px; display: flex; flex-direction: column; gap: var(--sp-3); }  /* DJ-5 — the slim rail */
.ev-rail-title { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-subtle); }
.ev-rail .bricklist { grid-template-columns: 1fr; margin-block-start: 0; }
.ev-rail .brick.expanded { grid-column: auto; }
.ev-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ev-chip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 2px 10px; cursor: pointer; font-size: var(--fs-caption); color: var(--ink-muted); }
.ev-chip.on { border-color: var(--accent); color: var(--accent); font-weight: var(--w-medium); }
.ev-doors { display: flex; gap: var(--sp-2); }

/* V8 — the source render: a facsimile signed page, the real passage highlighted (R5) */
.src-page { border: 1px solid var(--line); border-radius: var(--radius-card); background: #FCFCFB; padding: var(--sp-6); min-block-size: 360px; box-shadow: var(--elev-raised); }
.src-loc { font-size: var(--fs-caption); color: var(--ink-subtle); margin-block-end: var(--sp-4); text-transform: uppercase; letter-spacing: .03em; }
.src-lines { display: flex; flex-direction: column; gap: var(--sp-3); }
.src-filler { display: block; block-size: 9px; border-radius: 3px; background: var(--surface-sunken); }
.src-pass { margin: 0; padding: var(--sp-2) var(--sp-3); background: #FBEFD8; border-inline-start: 3px solid var(--conf-low); border-radius: 3px; font-size: var(--fs-small); color: var(--ink); }
.src-pass.sel { background: #F7E2B8; box-shadow: 0 0 0 2px #E8C98C; }       /* the selected passage, emphasized (L62) */
.src-caption { margin-block-start: var(--sp-4); font-size: var(--fs-caption); color: var(--ink-subtle); font-style: italic; }

/* X22 — the honest fetch wait: the page's shape filling in, never a blank frame */
.src-skeleton { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); padding: var(--sp-6); min-block-size: 360px; display: flex; flex-direction: column; gap: var(--sp-4); }
.src-skeleton span { display: block; block-size: 12px; border-radius: 3px; background: linear-gradient(90deg, var(--surface-sunken), var(--line), var(--surface-sunken)); background-size: 200% 100%; animation: shimmer 1.3s ease-in-out infinite; }
.src-skeleton span:nth-child(2) { width: 88%; } .src-skeleton span:nth-child(3) { width: 94%; } .src-skeleton span:nth-child(4) { width: 70%; } .src-skeleton span:nth-child(5) { width: 82%; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* L66 / X23 — the honest "can't open this document" panel */
.src-error { border: 1px solid #E8C98C; border-radius: var(--radius-card); background: var(--conf-low-wash); padding: var(--sp-6); min-block-size: 360px; display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; justify-content: center; }
.src-error-msg { font-weight: var(--w-semibold); color: var(--conf-low); }
.src-error-reason { font-size: var(--fs-small); color: var(--ink-muted); }

@media (max-width: 720px) { .ev-body { flex-direction: column; } .ev-rail { flex-basis: auto; inline-size: 100%; } }

/* ---------- Area 6 — the intake wizard (V3 / L68–L77, L83) ---------- */
.intake-wrap { max-width: 760px; margin-inline: auto; }
.intake-h1 { font-size: var(--fs-display); font-weight: var(--w-semibold); margin: var(--sp-4) 0 var(--sp-1); }
.intake-lead { color: var(--ink-muted); margin: 0 0 var(--sp-6); }
.intake-gate { padding: var(--sp-12); text-align: center; color: var(--ink-muted); background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--elev-raised); }

/* L68/L69 — the dropzone: one door for one file or a thousand */
.drop { border: 2px dashed #C7CDD4; border-radius: var(--radius-card); background: var(--surface-sunken); text-align: center; padding: var(--sp-8) var(--sp-6); cursor: pointer; }
.drop:hover { border-color: var(--accent); }
.drop-icon { inline-size: 34px; block-size: 34px; border-radius: var(--radius-control); background: #EAEEF3; margin: 0 auto var(--sp-2); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 18px; }
.drop-big { font-size: var(--fs-heading); font-weight: var(--w-semibold); color: var(--ink); margin-block-end: var(--sp-1); }
.drop .browse { color: var(--accent); font-weight: var(--w-medium); text-decoration: underline; }
.drop-sub { font-size: var(--fs-small); color: var(--ink-muted); }
.drop-floor { font-size: var(--fs-caption); color: var(--ink-subtle); margin-block-start: var(--sp-2); }

/* L70/L71/L72 — the per-file transfer queue */
.qhead { display: flex; justify-content: space-between; align-items: baseline; margin: var(--sp-4) var(--sp-1) var(--sp-2); }
.qhead .qt { font-size: var(--fs-small); font-weight: var(--w-semibold); }
.qhead .qc { font-size: var(--fs-caption); color: var(--ink-subtle); }
.q { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; background: var(--surface); }
.qrow { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-block-end: 1px solid var(--line); font-size: var(--fs-small); }
.qrow:last-child { border-block-end: none; }
.qrow.failrow { background: var(--conf-low-wash); }
.qrow.heldrow { background: #F0F1F3; }
.qrow .fic { inline-size: 22px; block-size: 26px; border-radius: 3px; background: #EDF0F3; border: 1px solid var(--line); flex: 0 0 auto; }
.qrow .fn { flex: 1 1 auto; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qrow .state { font-size: var(--fs-small); white-space: nowrap; display: inline-flex; align-items: center; gap: var(--sp-2); }
.qrow .state.reading { color: var(--accent); }         /* FND-2: "in and reading" is active → accent, never vouch-green */
.qrow .state.held { color: var(--ink-muted); }         /* already-held reads neutral — not error, not success */
.qrow .state.fail { color: var(--conf-low); font-weight: var(--w-semibold); }
.qrow .state.pending { color: var(--ink-subtle); }
.qrow .state .dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.qrow .state .stlbl { color: var(--ink-subtle); }
.track { inline-size: 92px; block-size: 6px; background: #E7EBEF; border-radius: 3px; overflow: hidden; }
.track .fill { display: block; block-size: 100%; inline-size: 40%; background: var(--accent); border-radius: 3px; animation: xfer 1s ease-in-out infinite; }
@keyframes xfer { 0% { margin-inline-start: -40%; } 100% { margin-inline-start: 100%; } }
.retry { border: 1px solid #E0B58A; background: var(--surface); color: var(--conf-low); border-radius: var(--radius-control); padding: 3px 10px; font-size: var(--fs-caption); font-weight: var(--w-medium); cursor: pointer; }
.keep-dropping { font-size: var(--fs-caption); color: var(--ink-subtle); margin-block-start: var(--sp-3); }

/* L73 — the handoff release (neutral-calm, never vouch-green — FND-2) */
.release { background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--sp-4) var(--sp-6); margin-block-end: var(--sp-4); }
.release-h { font-size: var(--fs-heading); font-weight: var(--w-semibold); margin-block-end: var(--sp-1); }
.release-check { display: inline-flex; align-items: center; justify-content: center; inline-size: 26px; block-size: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 15px; margin-inline-end: var(--sp-2); vertical-align: -6px; }
.release-p { color: var(--ink-muted); margin: 0; font-size: var(--fs-small); }
.release-line { margin-block-start: var(--sp-2); color: var(--ink-subtle); }

/* L74/L75 — the reconciliation ledger */
.ledger { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.tally { flex: 1; min-inline-size: 150px; border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--sp-3) var(--sp-4); background: var(--surface); }
.tally.fail { border-color: #E7CBA8; background: var(--conf-low-wash); }
.tally.held { border-color: #DADCE0; background: #F0F1F3; }
.tally-n { font-size: 25px; font-weight: var(--w-semibold); line-height: 1; color: var(--ink); }
.tally.fail .tally-n { color: var(--conf-low); }
.tally-l { font-size: var(--fs-small); color: var(--ink-muted); margin-block-start: var(--sp-1); }
.tally-exp { font-size: var(--fs-caption); color: var(--accent); margin-block-start: var(--sp-2); cursor: pointer; text-decoration: underline; }
.sumline { font-size: var(--fs-caption); color: var(--ink-subtle); text-align: center; margin-block-start: var(--sp-3); }
.ledger-exp { border: 1px solid var(--line); border-radius: var(--radius-card); margin-block-start: var(--sp-3); overflow: hidden; }
.ledger-exp .le-head { background: var(--surface-sunken); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-caption); color: var(--ink-muted); border-block-end: 1px solid var(--line); }
.ledger-exp ul { list-style: none; margin: 0; padding: 0; }
.ledger-exp li { padding: var(--sp-2) var(--sp-3); border-block-end: 1px solid var(--line); font-size: var(--fs-small); display: flex; justify-content: space-between; gap: var(--sp-3); align-items: center; }
.ledger-exp li:last-child { border-block-end: none; }
.ledger-exp li a { color: var(--accent); text-decoration: none; }
.le-note { color: var(--ink-subtle); font-size: var(--fs-caption); }
.le-reason { color: var(--conf-low); font-size: var(--fs-caption); }

/* L83 — terminal disposition for a file that won't transfer */
.dispbox { margin-block-start: var(--sp-3); border: 1px solid #E7CBA8; background: var(--conf-low-wash); border-radius: var(--radius-card); padding: var(--sp-3) var(--sp-4); }
.disp-title { font-size: var(--fs-small); font-weight: var(--w-semibold); color: var(--conf-low); margin-block-end: var(--sp-2); }
.disp-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.disp-btn { border: 1px solid #C9CDD2; background: var(--surface); color: var(--ink-muted); border-radius: var(--radius-control); padding: 3px 10px; font-size: var(--fs-caption); cursor: pointer; }
.disp-note { font-size: var(--fs-caption); color: var(--ink-subtle); margin-block-start: var(--sp-2); }

.intake-actions { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin-block-start: var(--sp-6); }
.btn.ghost { background: var(--surface); color: var(--conf-low); border-color: #E0B58A; }
.export-done { font-size: var(--fs-small); color: var(--steward-mark); margin-block-start: var(--sp-2); }
.btn.link { background: none; border: none; color: var(--accent); text-decoration: underline; padding: var(--sp-2) var(--sp-1); cursor: pointer; }

/* ---------- Area 7 — your imports (V22) + the import summary (V21 / L85–L93) ---------- */
.imports-wrap { max-width: 760px; margin-inline: auto; }
.imports-h1 { font-size: 20px; font-weight: var(--w-semibold); margin: var(--sp-4) 0 var(--sp-1); }
.imp-sub { color: var(--ink-subtle); font-size: var(--fs-small); margin: 0 0 var(--sp-4); }
.crumb { font-size: var(--fs-caption); color: var(--ink-subtle); margin: var(--sp-4) 0 var(--sp-3); }
.crumb a { color: var(--accent); text-decoration: none; }
.imp-head { margin: var(--sp-4) 0 var(--sp-4); }
.imp-title { font-size: var(--fs-small); font-weight: var(--w-semibold); color: var(--ink-muted); }
.imp-meta { font-size: var(--fs-caption); color: var(--ink-subtle); margin-block-start: 2px; }
.il-empty { padding: var(--sp-12); text-align: center; color: var(--ink-muted); background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--elev-raised); }

/* V22 — the imports list */
.il { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; background: var(--surface); }
.il-row { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); border-block-end: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.il-row:last-child { border-block-end: none; }
.il-row:hover { background: var(--surface-sunken); }
.il-row .fic, .ifile .fic { inline-size: 20px; block-size: 24px; border-radius: 3px; background: #EDF0F3; border: 1px solid var(--line); flex: 0 0 auto; }
.il-main { flex: 1; }
.il-t { font-weight: var(--w-medium); font-size: var(--fs-small); }
.il-m { font-size: var(--fs-caption); color: var(--ink-subtle); margin-block-start: 2px; }
.il-state { font-size: var(--fs-small); color: var(--ink-muted); white-space: nowrap; }
.il-reading { color: var(--accent); }
.il-chev { color: var(--ink-subtle); }

/* V21 — the verdict hero (DJ-10 = B) */
.verdict { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--sp-6); box-shadow: var(--elev-raised); }
.verdict-status { display: flex; align-items: center; gap: var(--sp-3); margin-block-end: var(--sp-2); }
.verdict-icon { inline-size: 30px; block-size: 30px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 16px; background: #E8EEF5; color: var(--accent); } /* FND-2: accent, never the reserved vouch-green */
.verdict-h { font-size: var(--fs-display); font-weight: var(--w-semibold); margin: 0; line-height: 1.25; }
.verdict-sub { color: var(--ink-muted); margin: 2px 0 0; font-size: var(--fs-small); }
.count { margin-block-start: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-card); font-size: var(--fs-small); color: var(--ink); display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.count.short { background: var(--conf-low-wash); border-color: #F0C9A0; }
.count-lead { font-weight: var(--w-semibold); color: var(--conf-low); }
.count-cta { color: var(--accent); cursor: pointer; text-decoration: underline; }
.count-input { border: 1px solid var(--accent); border-radius: var(--radius-control); padding: 4px 8px; font: inherit; font-size: var(--fs-small); inline-size: 220px; max-inline-size: 100%; }

/* V21 — the reconciliation tally */
.tallywrap { margin-block-start: var(--sp-4); }
.tally-head { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-subtle); margin-block-end: var(--sp-2); }
.tally { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tchip { display: inline-flex; align-items: center; gap: var(--sp-2); border: 1px solid var(--line); border-radius: 20px; padding: 5px 13px; background: var(--surface); font-size: var(--fs-small); color: var(--ink-muted); }
.tchip.attn { border-color: #E7CBA8; background: var(--conf-low-wash); }
.tchip .tn { font-weight: var(--w-semibold); color: var(--ink); }
.tdot { inline-size: 8px; block-size: 8px; border-radius: 50%; flex: 0 0 auto; }
.tdot.read { background: #93A2AE; }        /* neutral — settled, NOT vouch-green (FND-2) */
.tdot.gaps { background: var(--conf-low); }
.tdot.fail { background: var(--health-poor); }
.tdot.reading { background: var(--accent); }
.tdot.held { background: #C3C8CE; }
.tdot.wd, .tdot.pg { background: var(--ink-subtle); }

/* V21 — the files as one group */
.grp-h { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-subtle); margin: var(--sp-6) 2px var(--sp-2); }
.ifiles { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; background: var(--surface); }
.ifile { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-block-end: 1px solid var(--line); font-size: var(--fs-small); text-decoration: none; color: var(--ink); }
.ifile:last-child { border-block-end: none; }
.ifile:hover { background: var(--surface-sunken); }
.ifile .fn { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ifile-st { font-size: var(--fs-caption); color: var(--ink-muted); white-space: nowrap; }
.ifile-st.gaps { color: var(--conf-low); }
.ifile-st.fail { color: var(--health-poor); }
.ifile-st.reading { color: var(--accent); }

/* ---------- Area 8 — danger zone (V17) · consequence gate (V10) · dispute context (L58/L59) · signpost (L78) ---------- */

/* L56 — a routine in-context act; visibly ordinary, off the danger zone */
.cpage-routine { margin-block-start: var(--sp-3); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.routine-note { font-size: var(--fs-caption); color: var(--ink-subtle); }

/* L58/L59 / X20 — the steward dispute-resolution context (only here, R9 carve-out) */
.dispute-ctx { margin-block: var(--sp-3); border: 1px solid #E0B58A; border-radius: var(--radius-card); background: var(--conf-low-wash); padding: var(--sp-3) var(--sp-4); }
.dctx-title { font-size: var(--fs-small); font-weight: var(--w-semibold); color: var(--conf-low); margin-block-end: var(--sp-2); }
.dctx-row { border-block-start: 1px solid #EBCBA6; padding-block: var(--sp-2); }
.dctx-row:first-of-type { border-block-start: none; }
.dctx-target { font-size: var(--fs-body); color: var(--ink); }
.dctx-note { font-size: var(--fs-small); color: var(--ink-muted); margin-block: 2px var(--sp-2); }
.dctx-notetext { font-style: italic; }
.dctx-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
/* the disputed brick's mark — steward context only; a routing marker, never a trust downgrade (R9) */
.brick.disputed { box-shadow: inset 3px 0 0 var(--conf-low); }
.disputed-tag { font-size: 10.5px; color: var(--conf-low); font-weight: var(--w-semibold); }

/* L47/L54 — a fact retired by hand: muted, struck, kept on file */
.grp.retired-group { opacity: .96; }
.retired-head { color: var(--ink-subtle); }
.brick.retired-hand { background: var(--surface-sunken); border-style: dashed; }
.retired-val { text-decoration: line-through; color: var(--ink-subtle); }
.retired-tag { font-size: 10.5px; color: var(--ink-subtle); font-weight: var(--w-semibold); }

/* V17 / L55 / L84 / X36 — the segregated, grant-gated danger zone (CV15). Warm, striped, unmistakable;
   never green (LG8 reserves green for person-vouch). Sits at the page foot, walled off. */
.danger-zone { margin-block-start: var(--sp-12); border: 1px solid var(--health-poor); border-radius: var(--radius-card);
  background: repeating-linear-gradient(135deg, #FBF3F1, #FBF3F1 10px, #F8ECEA 10px, #F8ECEA 20px); padding: var(--sp-4); }
.dz-head { font-size: var(--fs-small); font-weight: var(--w-semibold); color: var(--health-poor); }
.dz-sub { font-size: var(--fs-small); color: var(--ink-muted); margin-block: 2px var(--sp-3); }
.dz-docs { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); overflow: hidden; }
.dz-doc { border-block-end: 1px solid var(--line); }
.dz-doc:last-child { border-block-end: none; }
.dz-doc-row { display: flex; align-items: baseline; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); cursor: pointer; }
.dz-doc-row:hover { background: var(--surface-sunken); }
.dz-doc.sel > .dz-doc-row { background: var(--surface-sunken); }
.dz-doc.gone .dz-doc-name { color: var(--ink-subtle); text-decoration: line-through; }
.dz-doc-name { flex: 1; font-size: var(--fs-small); color: var(--ink); }
.dz-doc-meta { font-size: var(--fs-caption); color: var(--ink-subtle); white-space: nowrap; }
.dz-acts { display: flex; gap: var(--sp-3); padding: 0 var(--sp-4) var(--sp-3); }
.dz-acts .btn { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: start; }
.dz-acts .btn small { font-weight: 400; font-size: 10.5px; color: var(--ink-muted); }
.btn.dz-retract { border-color: #E0B58A; }
.btn.dz-purge { border-color: var(--health-poor); color: var(--health-poor); }
.btn.dz-purge small { color: var(--health-poor); }
.btn.danger-door { border-color: #E0B58A; color: var(--conf-low); }

/* V10 / L57 / X19 — the consequence gate: the one deliberate pause. Above everything. */
.gate-overlay { position: fixed; inset: 0; background: rgba(26,29,33,.42); display: flex; align-items: center; justify-content: center; z-index: 70; padding: var(--sp-6); }
.gate { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--elev-overlay); inline-size: min(460px, 94vw); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); border-block-start: 4px solid var(--conf-low); }
.gate.purge { border-block-start-color: var(--health-poor); }
.gate-head { font-size: var(--fs-heading); font-weight: var(--w-semibold); color: var(--ink); }
.gate-object { font-size: var(--fs-body); font-weight: var(--w-medium); color: var(--ink); padding: var(--sp-2) var(--sp-3); background: var(--surface-sunken); border-radius: var(--radius-control); }
.gate-consequence { font-size: var(--fs-small); color: var(--ink-muted); line-height: var(--lh-body); margin-block: var(--sp-1) var(--sp-2); }
.gate-label { font-size: var(--fs-caption); color: var(--ink-muted); margin-block-start: var(--sp-1); }
.gate-input, .gate-reason { font-family: inherit; font-size: var(--fs-small); border: 1px solid var(--line); border-radius: var(--radius-control); padding: var(--sp-2); color: var(--ink); background: var(--surface); }
.gate-reason { min-block-size: 56px; resize: vertical; }
.gate-error { font-size: var(--fs-small); color: var(--health-poor); }
.gate-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-block-start: var(--sp-3); }
.gate-confirm[disabled] { opacity: .45; cursor: not-allowed; }
.gate-confirm.purge:not([disabled]) { background: var(--health-poor); border-color: var(--health-poor); }
.gate-confirm.retract:not([disabled]), .gate-confirm.retire:not([disabled]) { background: var(--conf-low); border-color: var(--conf-low); }

/* L78 — the retired-family signpost: a plain page onward, never a void */
.signpost-page { max-inline-size: 720px; }
.retired-name { color: var(--ink-muted); }
.signpost { margin-block-start: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.signpost p { margin: 0 0 var(--sp-3); color: var(--ink); }
.signpost-homes { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ---------- Area 9 — possible-duplicate filter row (L94) · compare (V23/L95) · ruling (L96/L97) ---------- */
/* L94 — the flagged row's candidate line, under the steward "Possible duplicates" filter */
.row.dupe { cursor: pointer; }
.dupe-line { color: var(--ink-muted); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.dupe-line b { color: var(--ink); font-weight: var(--w-medium); }
.dupe-more { color: var(--ink-subtle); }
.rconf { font-size: var(--fs-caption); color: var(--ink-muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px var(--sp-2); white-space: nowrap; }

.crumb-back { display: inline-block; margin-block: var(--sp-2); color: var(--accent); text-decoration: none; font-size: var(--fs-small); }
.screenlabel { font-size: var(--fs-caption); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-subtle); margin: var(--sp-3) 0 var(--sp-2); }

/* V23 · DJ-11 = A — the compare bar + two co-equal panes */
.cmpbar { background: var(--surface); border: 1px solid var(--line); border-end-start-radius: 0; border-end-end-radius: 0;
  border-start-start-radius: var(--radius-card); border-start-end-radius: var(--radius-card); border-block-end: none;
  padding: var(--sp-3) var(--sp-4); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.cmpt { font-size: var(--fs-body); font-weight: var(--w-semibold); }
.cmpstep { font-size: var(--fs-caption); color: var(--ink-subtle); }
.cmpconf { font-size: var(--fs-caption); color: var(--ink-muted); border: 1px solid var(--line); border-radius: 999px; padding: 3px var(--sp-3); }
.panes { display: flex; border: 1px solid var(--line); border-block-end: none; }
.pane { flex: 1; min-inline-size: 0; padding: var(--sp-3) var(--sp-4); border-inline-end: 1px solid var(--line); background: var(--surface); }
.pane:last-child { border-inline-end: none; }
.pn { font-size: var(--fs-body); font-weight: var(--w-semibold); margin: 0 0 var(--sp-2); }
.pn-held { font-weight: var(--w-regular); color: var(--ink-subtle); font-size: var(--fs-caption); }
.idfacts { list-style: none; margin: 0 0 var(--sp-3); padding: 0; font-size: var(--fs-small); color: var(--ink-muted); }
.idfacts li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 3px 0; border-block-end: 1px dotted var(--line); }
.idfacts li:last-child { border-block-end: none; }
.idfacts .k { color: var(--ink-subtle); }
.idfacts .v { color: var(--ink); text-align: end; }
.docmini { border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-sunken); block-size: 110px; padding: var(--sp-3); overflow: hidden; }
.docmini .ln { display: block; block-size: 7px; background: #DCDFE3; border-radius: 3px; margin: 6px 0; }
.docmini .ln.sh { inline-size: 55%; }
.docmini .ln.mid { inline-size: 82%; }

/* the doors — nothing is removed here (X41) */
.doors { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line); border-start-start-radius: 0; border-start-end-radius: 0;
  border-end-start-radius: var(--radius-card); border-end-end-radius: var(--radius-card); background: var(--surface); flex-wrap: wrap; }
.doornote { font-size: var(--fs-caption); color: var(--ink-subtle); margin-inline-start: auto; max-inline-size: 340px; line-height: var(--lh-body); }

/* L97 — the keep-which choice */
.choice { background: var(--surface); border: 1px solid var(--line); border-block-start: none;
  border-end-start-radius: var(--radius-card); border-end-end-radius: var(--radius-card); padding: var(--sp-4) var(--sp-5); }
.choice h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-heading); }
.choice > p { margin: 0 0 var(--sp-3); color: var(--ink-muted); font-size: var(--fs-small); }
.keeprow { display: flex; gap: var(--sp-3); }
.kc { flex: 1; min-inline-size: 0; border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--sp-3) var(--sp-4); }
.kc .kt { font-weight: var(--w-semibold); font-size: var(--fs-small); }
.kc .km { font-size: var(--fs-caption); color: var(--ink-subtle); margin-block-start: 3px; }
.keepbtn { margin-block-start: var(--sp-3); inline-size: 100%; }
.erase-line { font-size: var(--fs-small); color: var(--ink-muted); margin: var(--sp-4) 0 0; }
.erase-link { color: var(--health-poor); text-decoration: underline; cursor: pointer; }
.erase-link.on { font-weight: var(--w-semibold); }
.erase-on { color: var(--health-poor); }
.cmp-back-choice { margin-block-start: var(--sp-3); }

.cmp-done { text-align: center; padding: var(--sp-12) var(--sp-4); }
.cmp-done h2 { font-size: var(--fs-heading); margin: 0 0 var(--sp-2); }
.cmp-done p { color: var(--ink-muted); margin: 0 0 var(--sp-4); }

/* the gate, worn for a duplicate removal (reuses the shared V10 gate; purge branch stays red) */
.gate.dupe-purge { border-block-start-color: var(--health-poor); }
.gate-confirm.dupe-purge:not([disabled]) { background: var(--health-poor); border-color: var(--health-poor); }

/* "Open both side by side" — the two documents together (DJ-11b = A, the E39/U6 floor) */
.cmp-both { inline-size: min(940px, 96vw); }
.cmp-both-head { display: flex; justify-content: space-between; align-items: center; font-weight: var(--w-semibold); margin-block-end: var(--sp-3); }
.fac-cols { display: flex; gap: var(--sp-4); }
.fac-col { flex: 1; min-inline-size: 0; }
.fac-h { font-weight: var(--w-semibold); font-size: var(--fs-small); margin-block-end: 2px; }
.fac-cap { font-size: var(--fs-caption); color: var(--ink-subtle); margin-block-end: var(--sp-2); }
.fac-page { border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); padding: var(--sp-4); block-size: 360px; overflow-y: auto; }
.fac-ln { font-size: var(--fs-small); color: var(--ink); line-height: 1.7; margin: 0 0 var(--sp-3); }