@import url('brand.css');
@import url('console-core.css');
@import url('theme-greenstreet.css');

/* ============================================================
   Green Street intake — design system (facelift-v04, amended)
   Ops-console reference class: cool surfaces, single emerald
   accent (#3CA87E exact brand green, frozen), semantic-only
   status color, system type stack (no third-party font fetch).
   ============================================================ */

/* DEMO strip — clear but refined */
.banner { background: var(--warnred); color: #fff; text-align: center; padding: 7px 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* engraved hairline signature (security-document motif) */
.engrave { height: 5px; margin-top: 16px; border-top: 1px solid var(--hairline);
  background: repeating-linear-gradient(90deg, var(--green-deep) 0 1px, transparent 1px 5px); opacity: .4; }

/* shared layout */
.wrap { max-width: 1000px; margin: 0 auto; padding: 22px 22px 64px; }
.wrap > .brand-logo { margin-bottom: 6px; }
h1 { font-family: var(--display); font-weight: 600; font-size: 21px; margin: 6px 0 2px; }
h2 { font-family: var(--display); font-weight: 600; font-size: 17px; margin: 26px 0 8px; }
h3 { font-weight: 600; font-size: 12.5px; margin: 16px 0 4px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em; }
.note { background: var(--green-tint); color: #34433c; padding: 10px 14px; border-radius: 8px; font-size: 13.5px; }
.note.small, .small { font-size: 12px; }
.muted { color: var(--muted); }
.error { color: var(--red); font-weight: 600; }
.back { color: var(--green-deep); text-decoration: none; font-weight: 600; }
.back:hover { text-decoration: underline; }
.npi { color: var(--warnred); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.req { color: var(--red); font-weight: 700; }  /* required-field marker (Tier-1) */

/* internal auto-fill tool */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin: 16px 0; }
label { display: flex; flex-direction: column; font-size: 12px; color: #445; gap: 4px; }
input, select { padding: 8px; border: 1px solid var(--hairline); border-radius: 7px; font-size: 13px;
  font-family: var(--sans); background: #fff; }
.scenario { max-width: 460px; font-size: 14px; margin-bottom: 8px; }
.preview { background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px; padding: 14px; margin: 14px 0; }
.prevhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.preview img { width: 100%; border: 1px solid var(--hairline); border-radius: 6px; }

/* submitted receipt: one green block (walk fix 2026-08-14) */
.note.receipt p, .note.receipt ul { margin: 0 0 8px; }
.note.receipt > :last-child { margin-bottom: 0; }
.note.receipt ul { padding-left: 20px; }

/* ---------- client portal ---------- */
/* facelift-v04 Phase 3 (CSS-only): cool console ground; the phone-card flow
   and all mechanics are unchanged. Portal buttons keep generous touch
   sizing (>=44px targets) against the core's compact console buttons. */
body.portal { background: var(--paper); }
body.portal .row button, body.portal button.primary, body.portal .fields ~ button,
body.portal a.btnlink { padding: 12px 18px; font-size: 14px;
  font-weight: 700; border-radius: 8px; }
.phone { max-width: 432px; margin: 16px auto; background: var(--surface); min-height: 84vh;
  border-radius: 22px; border: 1px solid var(--hairline);
  box-shadow: 0 24px 50px -24px rgba(20,36,28,.35), 0 2px 6px rgba(20,36,28,.06);
  overflow: hidden; }
.phead { padding: 22px 24px 0; }
.phead strong, .phead span { display: none; }     /* replaced by .brand-logo */
.phead .engrave { margin-top: 18px; }
.step { display: none; padding: 22px 24px 30px; }
.step.active { display: block; }
.step h2 { font-size: 21px; font-weight: 800; margin: 2px 0 10px; }
.eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--green-deep); }
.fields { display: grid; gap: 12px; margin: 16px 0; }
.fields label { font-size: 12px; }
.hint { font-size: 11.5px; color: var(--muted); margin: -1px 0 1px; }
/* Prominent photo-capture tips -- a strong callout so clients actually read them
   and take a clean, readable shot (a better photo means a better barcode read). */
.photo-tips { background: var(--green-tint); border: 1.5px solid var(--green);
  border-radius: 10px; padding: 12px 16px; margin: 14px 0; }
.photo-tips-h { font-size: 13px; font-weight: 800; color: var(--green-deep);
  text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; }
.photo-tips ul { margin: 0; padding-left: 20px; }
.photo-tips li { font-size: 14px; line-height: 1.55; color: #243f33; margin: 4px 0; }
.photo-tips li b { color: var(--green-deep); }
/* three-part date fieldsets (v04 Fix 1): reset the browser fieldset chrome so
   the group sits flush with its sibling fields; single row that may wrap on
   narrow viewports; parts sized like the surrounding inputs */
fieldset.date-parts { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.date-parts legend { padding: 0; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.date-row { display: flex; gap: 8px; flex-wrap: wrap; }
.date-part { display: flex; flex-direction: column; font-size: 11px; color: var(--muted, #666); gap: 2px; }
.date-part select, .date-part input { min-height: 38px; }
.date-part input[name$="_d"] { width: 3.5em; }
.date-part input[name$="_y"] { width: 5em; }
fieldset.date-parts.invalid select, fieldset.date-parts.invalid input { border-color: var(--red); }

/* $ affordance on the three money fields (v04 Fix 4): display-only prefix,
   input padded so typed digits never sit under the symbol */
.money-wrap { position: relative; display: block; }
.money-wrap .money-prefix { position: absolute; left: 9px; top: 50%;
  transform: translateY(-50%); color: var(--muted, #888); pointer-events: none;
  font-size: 13px; }
.money-wrap input { width: 100%; padding-left: 22px; box-sizing: border-box; }
input.invalid { border-color: var(--red); background: #fdecec; }
.field-error { display: block; font-size: 11px; color: var(--red); font-weight: 600; margin-top: 3px; }
/* beneficiaries repeatable rows (v03 P3; two tiers scope-gap-builds B3) */
.bene-row { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
.bene-row input { flex: 1; min-width: 0; }
/* suffix match: hits bene_pct AND cbene_pct with one rule */
.bene-row input[name$="bene_pct"] { flex: 0 0 56px; }
/* 44px touch target (flag 12 batch) -- the visual stays light, the target
   doesn't */
.bene-remove { flex: 0 0 auto; padding: 6px 10px;
  min-width: 44px; min-height: 44px; }
.bene-h { font-weight: 700; font-size: 14px; margin: 16px 0 2px; }
.bene-h .muted { font-weight: 400; }
/* other-documents upload stub (v03 P4) */
.docs-upload { margin-top: 16px; padding-top: 12px; border-top: 1px solid #e4e4e4; }
.docs-h { font-weight: 700; font-size: 14px; margin: 0 0 2px; }
.doc-list { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.row { display: flex; gap: 10px; margin-top: 14px; }
.row button { flex: 1; }
button.primary, .primary { width: 100%; }
/* Persistent step-level Back: a light, left-aligned nav button present on every
   screen after the first (capture steps put it below their own action buttons). */
.backrow { margin-top: 16px; }
.backrow button { width: auto; padding: 8px 14px; font-size: 13px; }
.cambtn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  width: 100%; margin-top: 10px; background: #fff; color: var(--green-deep); border: 1px solid var(--green);
  border-radius: 8px; padding: 11px 16px; font-size: 14px; font-weight: 700; }
.cambtn:hover { background: var(--green-tint); }
.cambtn[hidden] { display: none; }  /* hidden must beat the inline-flex above */
.capwrap img { width: 100%; border: 1px solid var(--hairline); border-radius: 10px; }
.assure { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--mono);
  font-size: 10.5px; color: var(--muted); margin-top: 14px; }

/* confirm low-confidence highlight */
.lowconf input { border-color: var(--amber); background: #fdf7e8; }
.lowconf::after { content: "please confirm"; color: #946700; font-size: 10px; font-weight: 700; }
.lc-key { background: #fdf7e8; border-bottom: 2px solid var(--amber); padding: 0 2px; }

/* segmented progress */
/* item C: the whole-flow progress bar (the per-segment .progress/#seg-bar
   pair is torn down). .seg-count survives the teardown: the two beneficiary
   Allocated readouts still carry it. */
#flow-progress { margin: 6px 0 10px; }
.flowbar { height: 5px; background: var(--hairline); border-radius: 3px; overflow: hidden; }
.flowbar .bar { height: 100%; width: 0; background: var(--green-btn); transition: width .2s; }
.flow-count { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.seg-count { font-size: 12px; color: var(--muted); margin: 8px 0 2px; }

/* decode progress state (addendum v04 Fix A): spinner ring + centered note.
   No [hidden] override here -- console-core.css's global guard wins over the
   flex display (the cascade contract is test-pinned). */
.working { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0; }
.spinner { width: 1em; height: 1em; border: 2px solid var(--hairline); border-top-color: var(--ink, #333);
  border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* reduced motion: a UNIFORM static ring -- a one-dark-quadrant ring reads as frozen */
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; border-top-color: var(--hairline); } }

/* decode-fail fallback: ONE green box holding message + tips (addendum v04 Fix B) */
.fb-box { margin: 12px 0; }
.fb-box #fb-note { margin: 0; }
.fb-tips { margin: 6px 0 0; padding-left: 20px; font-size: 12px; }

/* decode-fail illustration */
.license-illo { display: flex; justify-content: center; margin: 18px 0; }
.lic-card { width: 230px; height: 140px; border: 1.5px solid var(--green-deep); border-radius: 12px;
  position: relative; background: #fbfcfa; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; }
.lic-side { position: absolute; top: 8px; left: 10px; font-size: 10px; color: var(--muted); letter-spacing: .08em; }
.lic-barcode { width: 170px; height: 46px; border: 1px solid var(--ink);
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, #fff 2px 4px, var(--ink) 4px 7px, #fff 7px 9px); }
.lic-cap { font-size: 11px; color: var(--green-deep); font-weight: 700; }

/* review summary + thumbnails */
#review-summary table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
#review-summary th { text-align: left; color: var(--muted); font-weight: 600; padding: 6px; width: 46%;
  vertical-align: top; border-bottom: 1px solid var(--hairline); }
#review-summary td { padding: 6px; border-bottom: 1px solid var(--hairline); }
.thumbs { display: flex; gap: 10px; margin: 14px 0; }
.thumbs figure { flex: 1; margin: 0; font-size: 11px; color: var(--muted); }
.thumbs img { width: 100%; border: 1px solid var(--hairline); border-radius: 8px; cursor: zoom-in; }
/* Sam 2026-08-13 walk: the two bene actions read as one button when abutted */
#bene-sample { margin-left: 20px; }
/* item D (purge-modal-doc-previews-v05): review-screen document thumbnails */
.doc-figs { list-style: none; padding: 0; margin: 6px 0; }
.doc-figs li { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
img.doc-thumb { object-fit: cover; border: 1px solid var(--hairline);
                border-radius: 4px; cursor: zoom-in; flex: none; }
#overlay { position: fixed; inset: 0; background: rgba(16,24,20,.88); display: flex; align-items: center;
  justify-content: center; padding: 20px; z-index: 50; cursor: zoom-out; }
#overlay[hidden] { display: none; }
#overlay img { max-width: 100%; max-height: 100%; border-radius: 6px; }

/* ---------- staff: review queue ---------- */
/* Status chips: pill anatomy, wash + border + semantic ink; five distinct
   hue families (created grey, link_sent blue, submitted amber, approved
   green-wash, needs_info red) -- never color alone next to the button green. */
.badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600;
  padding: 2px 9px; border-radius: 999px; text-transform: capitalize; white-space: nowrap;
  border: 1px solid transparent; }
.badge.client_submitted { background: var(--amber-wash); color: #806600; border-color: #e3d28f; }
.badge.approved { background: var(--green-tint); color: #1e7b4d; border-color: #c5e2d2; }
.badge.needs_info { background: var(--red-wash); color: var(--red); border-color: #ecc9c6; }
.badge.created { background: #eff2f6; color: var(--muted); border-color: var(--hairline); }
.badge.link_sent { background: #e2ecf6; color: #2a5a86; border-color: #ccd6ea; }
.linkcell { font-size: 12px; }
.linkcell form { margin: 2px 0 0; }
.expired { color: var(--red); font-weight: 700; }
table.queue { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 16px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 6px; overflow: hidden; }
table.queue th, table.queue td { text-align: left; padding: 8px 12px; font-size: 13.5px; vertical-align: middle; }
table.queue td { border-bottom: 1px solid var(--line-soft); }
table.queue tr:last-child td { border-bottom: 0; }
table.queue thead th { background: #fbfcfe; color: var(--muted); font-size: 11.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--hairline); }
table.queue tbody tr:hover { background: var(--green-tint); }
.flagcount { color: #8a6d00; font-weight: 700; }
.clean { color: var(--green-deep); font-weight: 700; }
.qact { white-space: nowrap; }   /* stays a table-cell so its border aligns with the row */
.qact a.back { vertical-align: middle; }
.qact form { display: inline-block; margin: 0 0 0 16px; vertical-align: middle; }
button.approve { background: var(--green-btn); padding: 7px 15px; font-size: 13px; }
button.approve:hover { background: var(--green-deep); }
button.approve.big { font-size: 16px; padding: 12px 30px; }

/* ---------- staff: review detail ---------- */
.review-detail h1 { display: flex; align-items: center; gap: 12px; }
.flags { background: #fdf7e8; border: 1px solid #f0e0b8; border-radius: 8px; padding: 11px 14px; margin: 12px 0; }
.flags.clean { background: var(--green-tint); border-color: #cfe6da; }
.flags ul { margin: 6px 0 0; padding-left: 18px; }
.ftag { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 1px 6px; border-radius: 8px; margin-right: 4px; }
.ftag.missing { background: #f7dcdf; color: var(--red); }
.ftag.verify { background: #fdf3d6; color: #8a6d00; }
.ftag.image { background: #e7ece9; color: var(--green-deep); }
.actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 0; }
.actions form { margin: 0; }
/* item B (purge-modal-doc-previews-v05, flag A): full-width Documents
   section below .rev-cols -- pages render readable, not sidebar-squeezed. */
.doc-previews { margin: 18px 0; }
.doc-previews .doc-fig { margin: 0 0 18px; }
.doc-previews .doc-pages { display: flex; flex-direction: column; gap: 10px;
                           margin: 8px 0; }
.doc-previews .doc-pages img { max-width: 100%; border: 1px solid var(--hairline);
                               border-radius: 6px; }
.doc-previews .doc-download { font-weight: 600; }
/* item A (purge-modal-doc-previews-v05): purge trigger far right; danger
   reuses the purge red (#7a1020). */
.actions .purge-open-form { margin-left: auto; }
.ghost.danger, a.ghost.danger { color: #7a1020; border-color: #7a1020; }
/* .modal: styled for the purge dialog only -- reuse is extracted at the
   SECOND modal, not before. Must stay legible in the degraded no-JS state
   (`open` attribute = non-modal: no ::backdrop, rendered inline). */
.modal { border: 1px solid #7a1020; border-radius: 8px; padding: 16px 20px;
         max-width: 34em; background: var(--surface, #fff); }
.modal::backdrop { background: rgba(20, 24, 22, 0.55); }
.modal h2 { margin: 0 0 8px; font-size: 17px; color: #7a1020; }
.modal form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.modal .purge-cancel { text-decoration: none; padding: 5px 12px; }
@media (max-width: 760px) { .modal[open] { width: 100%; max-width: none; } }
.sendback { display: flex; gap: 8px; }
.sendback input { min-width: 240px; }
.buildlink { margin-top: 14px; }
.buildlink a { font-weight: 700; font-size: 14px; }
/* SSN mask + audited reveal (Task 7) */
.ssn-cell { display: flex; gap: 8px; align-items: center; }
.ssn-cell input { flex: 1; }
.ssn-cell .ssn-reveal { width: auto; padding: 5px 12px; font-size: 12px; }
/* client-link panel */
.copyrow { display: flex; gap: 8px; margin: 12px 0; }
.copyrow input { flex: 1; font-family: var(--mono); font-size: 13px; }
.copyrow button { width: auto; }
textarea.msg { width: 100%; font-family: var(--mono); font-size: 13px; padding: 12px;
  border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface);
  color: var(--ink); resize: vertical; }
/* quick-draft form */
.quicknew table { width: 100%; border-collapse: collapse; font-size: 13px; }
.quicknew th { text-align: left; color: var(--muted); font-weight: 600; padding: 6px 8px; width: 30%; }
.quicknew td { padding: 6px 8px; }
.quicknew input, .quicknew select { width: 100%; }
.rev-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-top: 10px; }
.rev-fields table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rev-fields th { text-align: left; color: var(--muted); font-weight: 600; padding: 4px 6px; width: 45%; vertical-align: top; }
.rev-fields td { padding: 4px 6px; }
.rev-fields td input { width: 100%; padding: 5px 7px; font-size: 12.5px; }
/* Read-only by default: render like plain text so a field can't be changed by
   accident. "Edit fields" removes readonly and the normal input border returns. */
.rev-fields td input[readonly] { border-color: transparent; background: transparent;
  padding-left: 0; cursor: default; }
/* Flagged-field highlight: make the exact row a flag points to findable on scroll,
   not just listed up top. Reuses the .ftag pill colors (verify=amber, missing=red). */
.rev-fields tr.flag-row th { border-left: 3px solid #d8a800; }
.rev-fields tr.flag-row.missing th { border-left-color: var(--red); }
.rev-fields tr.flag-row th, .rev-fields tr.flag-row td { background: #fdf7e8; }
.rev-fields tr.flag-row.missing th, .rev-fields tr.flag-row.missing td { background: #fcecee; }
.rev-fields tr.flag-row th .ftag { margin-left: 6px; vertical-align: middle; }
.rev-edit-actions { display: flex; gap: 10px; margin-top: 14px; }
.rev-edit-actions button { width: auto; }
.rev-edit-hint { margin-bottom: 6px; }
.rev-imgs img { width: 100%; border: 1px solid var(--hairline); border-radius: 8px; cursor: zoom-in; }
.rev-imgs figcaption { font-size: 12px; color: var(--muted); margin-bottom: 4px; }

/* ---------- staff: Redtail record + packet ---------- */
.status-line { background: var(--green-tint); border-radius: 8px; padding: 9px 13px; font-size: 13px; }
.rt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px; margin: 12px 0; }
.rt-section table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rt-section th { text-align: left; color: var(--muted); font-weight: 600; padding: 3px 6px; width: 48%; vertical-align: top; }
.rt-section td { padding: 3px 6px; }
.packet { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 12px 0; }
.pform { background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px; padding: 13px; }
.pform img { width: 100%; border: 1px solid var(--hairline); border-radius: 6px; margin-top: 6px; }
button.gate { background: var(--amber); margin: 10px 0; }
button.gate:hover { background: #946700; }
button.gate.gated { background: #8a8f8a; cursor: default; }
.gate-note { background: #fdf7e8; border: 1px solid #f0e0b8; border-radius: 8px; padding: 11px 14px;
  font-size: 13px; margin: 4px 0 16px; }
.gate-note[hidden] { display: none; }

/* downstream actions */
table.actions-list { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; margin: 10px 0; }
table.actions-list th { text-align: left; color: var(--muted); font-weight: 600; padding: 9px 13px; width: 34%;
  vertical-align: top; border-bottom: 1px solid var(--hairline); background: #f7f9f6; }
table.actions-list td { padding: 9px 13px; border-bottom: 1px solid var(--hairline); }

/* form-version badges */
table.versions { width: 100%; border-collapse: collapse; font-size: 12px; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; margin: 10px 0; }
table.versions th { text-align: left; background: #f1f4f0; color: var(--muted); font-weight: 600; padding: 8px 11px;
  font-size: 11px; letter-spacing: .03em; text-transform: uppercase; }
table.versions td { padding: 8px 11px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
table.versions code { font-size: 11px; color: var(--green-deep); }
table.versions .secrow { background: #fafcfb; }
.vstale { color: var(--red); font-weight: 700; }
.autotag { font-size: 9px; font-weight: 700; text-transform: uppercase; background: #e7ece9; color: var(--green-deep);
  padding: 1px 6px; border-radius: 8px; margin-left: 4px; }

/* ===== facelift-v04 Phase 2: staff card sections (console anatomy) =====
   Scoped to .main (the app frame) so the client portal is untouched. */
.main .wrap > .note.small, .main .wrap > p.note.small,
.main .wrap #sb-scope > .note.small, .main .wrap #sb-scope > p.note.small {
  background: transparent; padding: 4px 0; border-radius: 0; }
.main h2 { font-size: 12px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em; margin: 26px 0 8px; }
.main .rev-fields, .main .rev-imgs, .main .quicknew, .main .rt-section,
.main .sendback-card, .main .copypanel {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 6px; padding: 14px 16px; }
.main .rev-fields td input { background: transparent; }
.main .flags { border-radius: 6px; }
.main .status-line { border-radius: 6px; border: 1px solid #cfe6da; }
.main .gate-note { border-radius: 6px; }
.main .preview, .main .pform { border-radius: 6px; }
.main table.actions-list, .main table.versions { border-radius: 6px; }
.main .actions { background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 6px; padding: 12px 16px; }
.main textarea.msg { border-radius: 6px; }
.main .copyrow input { border-radius: 6px; }

@media (max-width: 760px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .rev-cols, .rt-grid, .packet { grid-template-columns: 1fr; }
}

/* Needs-info highlighting -- hoisted from portal.html's conditional <style>
   block (staff-edit-parity commit 1) so gate-added highlights paint on EVERY
   page, not only kick-back renders. Also used by the staff detail screen. */
.needs-info-banner { background: #fdf6e7; border: 1px solid #e4c26b; border-radius: 8px;
                     padding: .7em .9em; margin: .8em 0; font-size: .95em; }
.needs-info-banner b { display: block; margin-bottom: .25em; }
input.needs-info-field, select.needs-info-field {
  border-color: #c89a3a; box-shadow: 0 0 0 2px rgba(200, 154, 58, .25); }

/* Staff detail selects (staff-edit-parity commit 3). Disabled = the read-only
   state; it must LOOK read-only like the readonly inputs do -- grey text and
   a dropdown arrow would read as broken, so pin color (both properties:
   WebKit ignores plain color on disabled controls), full opacity, and drop
   the native chrome. */
.rev-fields td select { width: 100%; }
.main .rev-fields td select { background: transparent; }
.main .rev-fields td select:disabled {
  color: var(--ink, #1c2b26); -webkit-text-fill-color: var(--ink, #1c2b26);
  opacity: 1; appearance: none; -webkit-appearance: none; border-color: transparent; }
.main .rev-fields td input.invalid { background: #fdecec; }

/* Staff money display (staff-edit-parity commit 6): the JS-built .money-wrap
   inside the detail table needs the same $-prefix padding as the portal's,
   in BOTH states -- the wrap persists while the input toggles readonly. */
.rev-fields td .money-wrap input { padding-left: 22px; }
.rev-fields td .money-wrap input[readonly] { padding-left: 22px; }

/* Confetti (scope-gap-builds A2): the submitted-screen celebration. The
   container is fixed, click-through, and short-lived (portal.js removes it
   on a timer); pieces ride the theme tokens so a firm restyle carries them.
   Reduced motion never creates the container at all (portal.js early-return
   -- the one source pin), so no motion query is needed here. */
.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden;
  z-index: 40; }
.confetti i { position: absolute; top: -14px; width: 8px; height: 12px;
  background: var(--accent, #3ca87e); border-radius: 2px;
  animation: confetti-fall 1.6s ease-in forwards; }
/* Sam-tuned shade cycle (8/13 phase walk): the full token family, greens
   deep-to-wash plus both ambers -- later rules win where multiples collide,
   which is what varies the mix. */
.confetti i:nth-child(2n) { background: var(--accent-btn, #2e8e68); }
.confetti i:nth-child(3n) { background: var(--amber, #b07d12);
  border-radius: 50%; width: 7px; height: 7px; }
.confetti i:nth-child(4n) { background: var(--accent-deep, #22795a); }
.confetti i:nth-child(5n) { background: var(--accent-wash, #eaf5ef);
  width: 6px; height: 10px; }
.confetti i:nth-child(6n) { background: var(--chrome, #1e5443); }
.confetti i:nth-child(7n) { background: var(--amber-wash, #fcf6d4);
  width: 6px; height: 9px; }
@keyframes confetti-fall {
  to { transform: translateY(105vh) rotate(540deg); opacity: 0.25; }
}

/* Retained client documents (scope-gap-builds C6) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  border: 0; }
/* per-file status rows: the retry control keeps a 44px touch target (S20) */
.doc-list .doc-retry { min-width: 44px; min-height: 44px; }
.doc-list .doc-st { color: var(--muted); }
.doc-list .doc-st.failed { color: var(--red); font-weight: 600; }

/* kickback-flow-progress item A: the send-back picker box. */
/* kickback-picker-ui v04: send-back MODE styles (the checkbox box is gone).
   .sb-selected never relies on color alone (checkmark glyph); the toolbar
   chip region caps at ~2 rows with internal scroll; in-mode body padding is
   the toolbar's CAPPED MAX height (fixed constant, no measuring). */
.sb-toolbar { position: sticky; bottom: 0; z-index: 40; background: var(--surface);
  border-top: 2px solid var(--hairline); padding: 8px 12px; margin: 12px -8px 0; }
.sb-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 60px; overflow-y: auto; margin-bottom: 6px; }
.sb-chip { font-size: 12px; padding: 3px 9px; border: 1px solid var(--green-btn); border-radius: 12px;
  background: transparent; color: inherit; cursor: pointer; }
.sb-chip::after { content: " \2715"; color: var(--muted); }
.sb-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sb-controls .sb-count { font-size: 13px; color: var(--muted); white-space: nowrap; }
.sb-controls input[name="note"] { flex: 1; min-width: 180px; }
.sb-error-mirror { color: #a33; font-size: 13px; }
/* mode-frame v04: dim everything outside the lit #sb-scope window. The
   overlay swallows stray clicks (nav rail etc.); exit stays explicit
   (Cancel/Esc). Amber = the mode accent (reuses the theme --amber token). */
body.sendback-mode::before { content: ""; position: fixed; inset: 0;
  background: rgba(15, 26, 21, .45); z-index: 60;
  animation: sb-dim-in .18s ease-out; }
@keyframes sb-dim-in { from { opacity: 0; } to { opacity: 1; } }
body.sendback-mode .actions { display: none; }
body.sendback-mode #sb-scope { position: relative; z-index: 61; background: var(--paper);
  margin-right: 48px; border: 2px solid var(--amber); border-radius: 10px;
  padding: 0 16px 16px; }
body.sendback-mode #sb-toolbar { position: sticky; top: 0; bottom: auto;
  margin: 0 -16px 12px; padding: 8px 16px; border-top: 0;
  border-bottom: 2px solid var(--amber); background: var(--surface);
  z-index: 5; border-radius: 8px 8px 0 0; }
/* entry-window guard: until the arm timer stamps data-armed, the whole
   toolbar (pre-populated chips included) ignores pointers -- an entry
   double-click can neither fire Send nor silently deselect a chip. */
body.sendback-mode #sb-toolbar:not([data-armed]) { pointer-events: none; }
/* exit cooldown: blocks a Cancel double-click from landing on the restored
   Approve/link/Purge row; the entry button is exempt (re-entry is safe). */
.actions.sb-cooldown { pointer-events: none; }
.actions.sb-cooldown #sb-enter { pointer-events: auto; }
body.sendback-mode #sb-chips { height: 60px; overflow-y: auto; }
body.sendback-mode #sb-chips:empty::before { content: "Nothing selected yet";
  color: var(--muted); font-size: 12.5px; }
body.sendback-mode [data-sb-field], body.sendback-mode [data-sb-image],
body.sendback-mode [data-sb-doc], body.sendback-mode [data-sb-bene],
body.sendback-mode tr[id^="row-"] { scroll-margin-top: 200px; }
/* lit-but-inert de-emphasis (doc previews deliberately stay full opacity:
   staff consult them to decide document send-backs) */
body.sendback-mode .reqdocs-box, body.sendback-mode .buildlink,
body.sendback-mode .rev-edit-actions, body.sendback-mode p.last-note { opacity: .45; }
.sb-mode-badge { font-weight: 700; font-size: 12.5px; padding: 4px 10px;
  border: 2px solid var(--amber); border-radius: 999px; color: var(--ink);
  white-space: nowrap; max-width: 40ch; overflow: hidden; text-overflow: ellipsis;
  display: inline-block; /* required for the spec'd max-width/ellipsis to apply */ }
body.sendback-mode .sb-error-mirror { display: none; }
@media (max-width: 860px) {
  body.sendback-mode #sb-scope { margin-right: 12px; }
}
body.sendback-mode [data-sb-field], body.sendback-mode [data-sb-image],
body.sendback-mode [data-sb-doc], body.sendback-mode [data-sb-bene] { cursor: pointer; }
body.sendback-mode .sb-excluded { opacity: .45; }
.sb-selected { outline: 2px solid var(--green-btn); outline-offset: -1px; }
tr.sb-selected th::before, figure.sb-selected figcaption::before,
p.sb-doc-row.sb-selected::before, div[data-sb-bene].sb-selected h3::before,
div[data-sb-bene].sb-selected .sb-bene-empty::before {
  content: "\2713 "; color: var(--green-btn); font-weight: 700; }
body.sendback-mode tr.sb-suggested th::after, body.sendback-mode figure.sb-suggested figcaption::after,
body.sendback-mode p.sb-doc-row.sb-suggested::after {
  content: " suggested"; font-size: 11px; color: var(--muted);
  border: 1px solid var(--hairline); border-radius: 8px; padding: 0 5px; margin-left: 4px; }
#sb-doc-rows .sb-doc-row { min-height: 44px; display: flex; align-items: center;
  border: 1px solid var(--hairline); border-radius: 6px; padding: 4px 10px; margin: 4px 0; }