/* =====================================================================
   LaQuest Payroll — SCREEN-BODY RESKIN (approved demo parity)
   ---------------------------------------------------------------------
   The shell adopted the new design (lq-tokens / lq-shell), but the screen
   BODIES still rendered with the old component CSS (flat cards, flat solid
   buttons, old spacing). This sheet loads LAST and re-skins the classes the
   screens ACTUALLY render (`.btn--primary`, `.card`, `.page-head`, `.stat`,
   `.table`, `.field`, `.badge`, `.banner`, `.empty`, `.crumb`, …) to the
   approved demo language, built on the --lq-* tokens so light + dark stay
   in step with the shell. PRESENTATION ONLY — no markup or logic changes,
   so the anchor stays byte-identical and the gate stays green.
   ===================================================================== */

/* ---------- Buttons: soft gradient-pill primary + secondary/ghost ---------- */
/* Base pill (covers both the BEM `.btn--*` screens and the dot-modifier `.btn.pri` ones). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--lq-space-2);
  font-family: var(--lq-font-ui); font-size: var(--lq-text-small); font-weight: var(--lq-weight-semibold);
  padding: 0 var(--lq-space-5, 20px); height: 42px; border-radius: var(--lq-radius-pill);
  border: 1px solid var(--lq-border); background: var(--lq-surface-card); color: var(--lq-ink-primary);
  cursor: pointer; white-space: nowrap; box-shadow: none;
  transition: transform var(--lq-duration-fast) var(--lq-ease-standard),
    box-shadow var(--lq-duration-base) var(--lq-ease-standard), filter var(--lq-duration-fast) var(--lq-ease-standard),
    background var(--lq-duration-fast) var(--lq-ease-standard), border-color var(--lq-duration-fast) var(--lq-ease-standard);
}
.btn:hover:not(:disabled):not(.dis) { border-color: var(--lq-border-strong); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--lq-accent-tint); }
.btn svg { width: 16px; height: 16px; }

.btn--primary, .btn.pri {
  color: #fff; border-color: transparent;
  background: var(--lq-accent); /* cobalt — the action colour */
  box-shadow: 0 6px 16px -8px rgba(30, 54, 201, .5);
}
.btn--primary:hover:not(:disabled):not(.dis), .btn.pri:hover:not(:disabled):not(.dis) {
  filter: brightness(1.06); color: #fff;
  box-shadow: 0 8px 20px -6px rgba(30, 54, 201, .5), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn--primary:active, .btn.pri:active { filter: brightness(.96); }

.btn--secondary { background: var(--lq-surface-card); color: var(--lq-ink-primary); border-color: var(--lq-border-strong); }
.btn--secondary:hover:not(:disabled) { border-color: var(--lq-accent); color: var(--lq-accent); background: var(--lq-accent-tint); }

.btn--ghost, .btn.ghost { background: transparent; color: var(--lq-ink-secondary); border-color: transparent; }
.btn--ghost:hover:not(:disabled), .btn.ghost:hover:not(:disabled) { background: var(--lq-surface-subtle); color: var(--lq-ink-primary); }

.btn--danger, .btn.solid-danger { color: #fff; background: var(--lq-danger-deep); border-color: transparent; }
.btn--danger:hover:not(:disabled), .btn.solid-danger:hover:not(:disabled) { filter: brightness(1.05); color: #fff; }
.btn.danger { color: var(--lq-danger-text); background: var(--lq-danger-tint); border-color: var(--lq-danger-border); }
.btn.danger:hover:not(:disabled) { background: var(--lq-danger-tint); filter: brightness(.97); }
.btn--success { color: #fff; background: var(--lq-success-deep); border-color: transparent; }
.btn--success:hover:not(:disabled) { filter: brightness(1.05); color: #fff; }

.btn--sm, .btn.sm { height: 34px; padding: 0 var(--lq-space-4); font-size: var(--lq-text-caption); }
.btn--sm svg, .btn.sm svg { width: 14px; height: 14px; }
.btn--block, .btn.blk { width: 100%; }
.btn:disabled, .btn.dis { opacity: .5; cursor: not-allowed; box-shadow: none !important; filter: none !important; transform: none !important; }

/* ---------- Cards / panels: demo radius + soft depth ---------- */
.card {
  background: var(--lq-surface-card); border: 1px solid var(--lq-border);
  border-radius: var(--lq-radius-lg); box-shadow: var(--lq-shadow-sm);
  transition: box-shadow var(--lq-duration-base) var(--lq-ease-standard), border-color var(--lq-duration-base) var(--lq-ease-standard);
}
.card:hover { box-shadow: var(--lq-shadow-md); }
.card.flat, .card.flat:hover { box-shadow: none; }
.card__head { border-color: var(--lq-border); }
.card__title { color: var(--lq-ink-primary); font-weight: var(--lq-weight-semibold); }
.card__sub { color: var(--lq-ink-muted); font-size: var(--lq-text-caption); }
.card__foot { border-color: var(--lq-border); }

/* ---------- Page head + section labels + breadcrumb ---------- */
.page-head h1 { color: var(--lq-ink-primary); font-weight: var(--lq-weight-semibold); letter-spacing: -0.01em; text-wrap: balance; }
.page-head p { color: var(--lq-ink-muted); }
.section-label { color: var(--lq-ink-muted); font-weight: var(--lq-weight-semibold); text-transform: uppercase; letter-spacing: .06em; font-size: var(--lq-text-caption); }
.crumb { color: var(--lq-ink-muted); font-size: var(--lq-text-caption); }
.crumb a, .crumb .c { color: var(--lq-ink-secondary); cursor: pointer; }
.crumb a:hover, .crumb .c:hover { color: var(--lq-accent); }
.crumb__here { color: var(--lq-ink-primary); font-weight: var(--lq-weight-medium); }

/* ---------- Stat tiles (register / KPIs) ---------- */
.stat {
  background: var(--lq-surface-card); border: 1px solid var(--lq-border); border-radius: var(--lq-radius-md);
  box-shadow: var(--lq-shadow-sm); padding: var(--lq-space-4);
}
.stat__label { color: var(--lq-ink-muted); font-weight: var(--lq-weight-medium); letter-spacing: .05em; }
.stat__value { color: var(--lq-ink-primary); font-weight: var(--lq-weight-semibold); font-variant-numeric: var(--lq-num); }
.stat--lead .stat__value { color: var(--lq-accent); }
.stat__glyph { color: var(--lq-ink-muted); }

/* ---------- Tables (register, GL, reports, filings, anomaly) → demo .reg finish ----------
   Clean HORIZONTAL rows (no vertical grid lines), uppercase sticky header on a subtle fill,
   zebra even rows, accent-tint hover. Applies to every .table/.gtable screen at once. */
.table, .gtable { font-variant-numeric: var(--lq-num); border-collapse: collapse; }
.table th, .table td, .gtable th, .gtable td { border: none; border-bottom: 1px solid var(--lq-border); padding: var(--lq-space-3) var(--lq-space-4); }
.table thead th, .gtable thead th {
  background: var(--lq-surface-subtle); color: var(--lq-ink-secondary); font-weight: var(--lq-weight-medium);
  font-size: var(--lq-text-caption); text-transform: uppercase; letter-spacing: .03em; text-align: left;
  border-bottom: 1px solid var(--lq-border-strong);
}
.table td, .gtable td { color: var(--lq-ink-primary); }
.table tbody tr:nth-child(even) td, .gtable tbody tr:nth-child(even) td { background: var(--lq-surface-app); }
.table tbody tr:hover td, .gtable tbody tr:hover td { background: var(--lq-accent-tint); }
.table-wrap { border: 1px solid var(--lq-border); border-radius: var(--lq-radius-md); overflow-x: auto; overflow-y: hidden; max-width: 100%; }
.cell-strong { font-weight: var(--lq-weight-semibold); }
tr.gl-total td, tr.gl-total { background: var(--lq-surface-subtle); }
tr.gl-total td:hover, .table tbody tr.gl-total:hover td { background: var(--lq-surface-subtle); }

/* ---------- Inputs / selects / fields → demo .form-input finish ---------- */
.input, .select, .inp {
  border: 1px solid var(--lq-border-strong); border-radius: var(--lq-radius-sm); background: var(--lq-surface-app);
  color: var(--lq-ink-primary); font-family: var(--lq-font-ui);
}
.input:focus, .select:focus, .inp:focus, .input:focus-within {
  outline: none; border-color: var(--lq-accent); box-shadow: 0 0 0 3px var(--lq-accent-tint);
}
.field__label, .field label { color: var(--lq-ink-secondary); font-weight: var(--lq-weight-medium); font-size: var(--lq-text-caption); }

/* ---------- Full-width search box → demo .search-box-lg ---------- */
.search-box-lg { border: 1px solid var(--lq-border-strong); background: var(--lq-surface-card); box-shadow: var(--lq-shadow-sm); border-radius: var(--lq-radius-sm); height: 46px; }
/* Compact search in the Employees action row (design-system tokens). */
.search-box-sm { border: 1px solid var(--lq-border-strong); background: var(--lq-surface-card); border-radius: var(--lq-radius-sm); height: 38px; }
.search-box-sm:focus-within { border-color: var(--lq-accent); box-shadow: 0 0 0 3px var(--lq-accent-tint); }
.emp-filter-btn.is-active { border-color: var(--lq-accent); color: var(--lq-accent); }
.emp-filter-btn.is-active::after { background: var(--lq-accent); }

/* ---------- Settings nav list → demo settings-list finish ---------- */
.settings-nav a.active, .subitem.on { background: var(--lq-accent-tint); color: var(--lq-accent); font-weight: var(--lq-weight-semibold); }
.settings-nav a:hover, .subitem:hover { background: var(--lq-surface-subtle); }

/* ---------- Tabs (employee detail, etc.) → demo .tab-btn accent underline ---------- */
.emptab.is-active { color: var(--lq-accent); border-bottom-color: var(--lq-accent); font-weight: var(--lq-weight-semibold); }
.emptab:hover { color: var(--lq-ink-primary); }

/* ---------- Run-payroll stepper node rail → demo run-progress-steps tint ---------- */
.step.current .step__dot { background: var(--lq-accent); border-color: var(--lq-accent); }
.step.done .step__dot, .step.done .step__track::after { background: var(--lq-success); }
.step.done .step__dot { border-color: var(--lq-success-text); }
.step.current .step__label, .step.done .step__label { color: var(--lq-ink-primary); }

/* ---------- Badges + status pills ---------- */
.badge { border-radius: var(--lq-radius-pill); font-weight: var(--lq-weight-semibold); font-size: 11px; border: 1px solid transparent; }
.badge--soft { background: var(--lq-surface-subtle); color: var(--lq-ink-secondary); }
.badge--ok, .badge--success { background: var(--lq-success-tint); color: var(--lq-success-text); border-color: var(--lq-success-border); }
.badge--warn, .badge--warning { background: var(--lq-warning-tint); color: var(--lq-warning-text); border-color: var(--lq-warning-border); }
.badge--danger { background: var(--lq-danger-tint); color: var(--lq-danger-text); border-color: var(--lq-danger-border); }
.badge--primary, .badge--blue { background: var(--lq-accent-tint); color: var(--lq-accent); }
.badge .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 4px; flex-shrink: 0; }
.pstat { border-radius: var(--lq-radius-pill); font-weight: var(--lq-weight-medium); }
.pstat--green { color: var(--lq-success-text); } .pstat--green .pstat__dot { background: var(--lq-success); }
.pstat--amber { color: var(--lq-warning-text); } .pstat--amber .pstat__dot { background: var(--lq-warning); }
.pstat--red { color: var(--lq-danger-text); } .pstat--red .pstat__dot { background: var(--lq-danger); }
.pstat--blue { color: var(--lq-accent); } .pstat--blue .pstat__dot { background: var(--lq-accent); }
.pill-neutral { background: var(--lq-surface-subtle); color: var(--lq-ink-secondary); border-radius: var(--lq-radius-pill); }

/* ---------- Banners + inline notes ---------- */
.banner { border-radius: var(--lq-radius-md); border: 1px solid var(--lq-border); }
.banner.info, .banner--info { background: var(--lq-accent-tint); border-color: var(--lq-accent-tint); color: var(--lq-accent-active); }
.banner.warn, .banner--warn { background: var(--lq-warning-tint); border-color: var(--lq-warning-border); color: var(--lq-warning-text); }
.banner.bad, .banner--danger { background: var(--lq-danger-tint); border-color: var(--lq-danger-border); color: var(--lq-danger-text); }
.banner.ok, .banner--success { background: var(--lq-success-tint); border-color: var(--lq-success-border); color: var(--lq-success-text); }
.samplebar, .sdl-note { background: var(--lq-surface-subtle); border-radius: var(--lq-radius-md); color: var(--lq-ink-secondary); }
/* Filing Autopilot — Rejection-Shield status banner + inline shield issues */
.autopilot-banner { display: flex; align-items: flex-start; gap: var(--lq-space-3); padding: var(--lq-space-4);
  margin-bottom: var(--lq-space-4); border: 1px solid var(--lq-border); border-radius: var(--lq-radius-md);
  background: var(--lq-surface-card); box-shadow: var(--lq-shadow-sm); font-size: var(--lq-text-small); color: var(--lq-ink-secondary); }
.autopilot-banner svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: inherit; }
.autopilot-banner--warn { border-color: var(--lq-warning-border); }
.autopilot-banner--warn svg { color: var(--lq-warning-text); }
.autopilot-banner b { color: var(--lq-ink-primary); font-weight: var(--lq-weight-semibold); }
.autopilot-banner__body { display: flex; flex-direction: column; gap: var(--lq-space-2); min-width: 0; }
.autopilot-banner__sum { display: flex; flex-wrap: wrap; gap: var(--lq-space-2); }
.filing-issues { display: block; margin-top: 3px; font-size: var(--lq-text-caption); color: var(--lq-danger-text); white-space: normal; }
/* Payroll Calendar — highlight the run's current period row */
.is-current-period > td { background: var(--lq-accent-tint); }
.is-current-period > td:first-child { box-shadow: inset 3px 0 0 var(--lq-accent); }
/* Pay Types catalog — Ariane's Add Pay Type form sections + flag grids */
.ptc-sec { padding: var(--lq-space-4) 0; border-top: 1px solid var(--lq-border); }
.ptc-sec:first-of-type { border-top: none; }
.ptc-sec__hd { display: flex; align-items: baseline; gap: var(--lq-space-3); margin-bottom: var(--lq-space-3); flex-wrap: wrap; }
.ptc-sec__hd h4 { margin: 0; font-size: var(--lq-text-body); font-weight: var(--lq-weight-semibold); color: var(--lq-ink-primary); }
.ptc-sec__hd span { font-size: var(--lq-text-caption); color: var(--lq-ink-muted); }
.ptc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lq-space-2) var(--lq-space-4); }
.ptc-check { display: flex; align-items: center; gap: var(--lq-space-2); font-size: var(--lq-text-small); color: var(--lq-ink-secondary); cursor: pointer; }
.ptc-check input { width: 15px; height: 15px; accent-color: var(--lq-accent); flex-shrink: 0; }

/* ---------- Empty states ---------- */
.empty h3, .empty h4 { color: var(--lq-ink-primary); font-weight: var(--lq-weight-semibold); }
.empty p, .muted { color: var(--lq-ink-muted); }
.empty .ic, .empty__icon { background: var(--lq-accent-tint); border-radius: var(--lq-radius-md); color: inherit; border: none; }

/* ---------- Menus + modals ---------- */
.menu-pop, .modal, .modal .modal, .modal-backdrop .modal { background: var(--lq-surface-card); border: 1px solid var(--lq-border); border-radius: var(--lq-radius-lg); box-shadow: var(--lq-shadow-lg); }
.menu-item:hover, .menu-item.is-active { background: var(--lq-surface-subtle); }
.menu-item.is-active { color: var(--lq-accent); }

/* ---------- Body canvas + generic text colour, to match the shell ---------- */
.lq-content .muted { color: var(--lq-ink-muted); }

/* ---------- Tabs (Approvals Pending/History, etc.) → demo .tab-btn ---------- */
.tabs { display: flex; gap: var(--lq-space-2); border-bottom: 1px solid var(--lq-border); margin-bottom: var(--lq-space-4); }
.tab-btn { background: none; border: none; padding: var(--lq-space-3) var(--lq-space-4); font-size: var(--lq-text-small); font-weight: var(--lq-weight-medium);
  color: var(--lq-ink-secondary); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit; }
.tab-btn[aria-selected="true"] { color: var(--lq-accent); border-bottom-color: var(--lq-accent); font-weight: var(--lq-weight-semibold); }

/* ---------- Demo list components (Government Filing, Settings, audit) ---------- */
.lq-card { background: var(--lq-surface-card); border: 1px solid var(--lq-border); border-radius: var(--lq-radius-md); box-shadow: var(--lq-shadow-sm); }
/* A bare section heading/subtitle placed directly in an .lq-card (e.g. Government
   Filing's Deadline radar / Remittance / Filing history) aligns to the same content
   edge as the full-bleed table below it (cell padding = --lq-space-4), with even
   vertical rhythm above and below. */
.lq-card > .card__title { padding: var(--lq-space-4) var(--lq-space-4) 0; }
.lq-card > .card__sub { padding: 0 var(--lq-space-4); }
.lq-card > .tscroll:last-child, .lq-card > .table-wrap:last-child { padding-bottom: var(--lq-space-2); }
.lq-list { list-style: none; margin: 0; padding: 0; }
.lq-row { display: flex; align-items: center; gap: var(--lq-space-3); width: 100%; text-align: left; background: none; border: none;
  border-bottom: 1px solid var(--lq-border); padding: var(--lq-space-3) var(--lq-space-4); min-height: 56px; color: inherit;
  transition: background var(--lq-duration-fast) var(--lq-ease-standard); }
.lq-list li:last-child .lq-row { border-bottom: none; }
.lq-row.is-static { cursor: default; }
.lq-row .txt { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.lq-row .label { font-size: var(--lq-text-body); font-weight: var(--lq-weight-medium); color: var(--lq-ink-primary); }
.lq-row .secondary { font-size: var(--lq-text-caption); color: var(--lq-ink-muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lq-row-actions { display: inline-flex; gap: var(--lq-space-2); flex-shrink: 0; align-items: center; }
.date-badge { width: 48px; height: 52px; border-radius: var(--lq-radius-sm); background: var(--lq-nav-compliance-tint); color: var(--lq-nav-compliance);
  display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1.1; }
.date-badge .d { font-size: var(--lq-text-h3); font-weight: var(--lq-weight-bold); font-variant-numeric: var(--lq-num); }
.date-badge .m { font-size: 10px; font-weight: var(--lq-weight-semibold); letter-spacing: .05em; }
.agency-chip { display: inline-flex; align-items: center; font-size: 10px; font-weight: var(--lq-weight-semibold); padding: 2px 8px;
  border-radius: var(--lq-radius-pill); letter-spacing: .03em; margin-right: var(--lq-space-2); }
.lq-card-head { padding: var(--lq-space-4) var(--lq-space-4) var(--lq-space-3); border-bottom: 1px solid var(--lq-border); display: flex; align-items: center; justify-content: space-between; gap: var(--lq-space-3); flex-wrap: wrap; }
.lq-card-head h3 { font-size: var(--lq-text-h3); margin: 0; }
.lq-row .icn { width: 36px; height: 36px; border-radius: var(--lq-radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--icn-tint, var(--lq-surface-subtle)); color: var(--icn-color, var(--lq-ink-secondary)); }
.lq-row .icn svg { width: 18px; height: 18px; }
.lq-row .chev { color: var(--lq-ink-muted); flex-shrink: 0; } .lq-row .chev svg { width: 18px; height: 18px; }
.lq-row:hover:not(.is-static) { background: var(--lq-surface-subtle); cursor: pointer; }
/* Approvals list-row extras (demo parity): right-aligned amount, blocking line, on-row actions */
.lq-row .value { font-size: var(--lq-text-small); color: var(--lq-ink-secondary); text-align: right; flex-shrink: 0; white-space: nowrap; }
.lq-row .value.strong { font-weight: var(--lq-weight-semibold); color: var(--lq-ink-primary); }
.lq-row .value.num { font-variant-numeric: var(--lq-num); }
.lq-row .blocking-line { font-size: var(--lq-text-caption); color: var(--lq-ink-muted); margin-top: 2px; white-space: normal; }
.lq-row .blocking-line strong { color: var(--lq-warning-text); font-weight: var(--lq-weight-semibold); }
.lq-row .row-actions { display: flex; gap: var(--lq-space-2); flex-shrink: 0; }
.lq-row .appr-right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--lq-space-2); flex-shrink: 0; align-self: flex-start; }
/* Approval rows: primary line = bold title + muted meta INLINE (demo), Blocking on line 2.
   Reverts the shared column stacking of .lq-row .txt for these rows only. */
.lq-row.appr-row .txt { display: block; }
.lq-row.appr-row .label { margin-right: var(--lq-space-2); }
.lq-row.appr-row .secondary { display: inline; white-space: normal; }

/* ---------- Run payroll PIPELINE pill row (clickable stage nav) → demo .step-btn ---------- */
.run-pills { display: flex; gap: var(--lq-space-2); margin-bottom: var(--lq-space-4); flex-wrap: wrap; }
.run-pills .step-btn { display: flex; align-items: center; gap: var(--lq-space-2); border: 1px solid var(--lq-border); background: var(--lq-surface-card);
  border-radius: var(--lq-radius-pill); padding: 6px 14px 6px 6px; font-size: var(--lq-text-small); font-weight: var(--lq-weight-medium); color: var(--lq-ink-secondary);
  cursor: pointer; font-family: inherit; transition: background var(--lq-duration-fast) var(--lq-ease-standard), border-color var(--lq-duration-fast) var(--lq-ease-standard); }
.run-pills .step-btn .num { width: 24px; height: 24px; aspect-ratio: 1; flex-shrink: 0; border-radius: 50%; background: var(--lq-surface-subtle); color: var(--lq-ink-muted);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: var(--lq-weight-semibold); flex-shrink: 0; }
.run-pills .step-btn .num svg { width: 13px; height: 13px; }
/* completed = green pill + checkmark */
.run-pills .step-btn.is-done { border-color: var(--lq-success-border); background: var(--lq-success-tint); color: var(--lq-success-text); }
.run-pills .step-btn.is-done .num { background: var(--lq-success-deep); color: #fff; }
/* current stage = blue filled number */
.run-pills .step-btn.is-current { border-color: var(--lq-accent); color: var(--lq-ink-primary); background: var(--lq-accent-tint); }
.run-pills .step-btn.is-current .num { background: var(--lq-accent); color: #fff; }
/* the pill you are VIEWING gets a focus ring */
.run-pills .step-btn[aria-selected="true"] { box-shadow: 0 0 0 3px var(--lq-accent-tint); border-color: var(--lq-accent); }
.run-pills .step-btn:hover { border-color: var(--lq-border-strong); }

/* Stage panel (demo .step-panel) + confirm rows (Post / Disburse) */
.step-panel { background: var(--lq-surface-card); border: 1px solid var(--lq-border); border-radius: var(--lq-radius-lg); padding: var(--lq-space-6); box-shadow: var(--lq-shadow-sm); }
.confirm-rows { display: flex; flex-direction: column; gap: 0; margin: var(--lq-space-4) 0 0; border: 1px solid var(--lq-border); border-radius: var(--lq-radius-md); overflow: hidden; }
.confirm-row { display: flex; justify-content: space-between; padding: var(--lq-space-3) var(--lq-space-4); font-size: var(--lq-text-small); border-bottom: 1px solid var(--lq-border); background: var(--lq-surface-card); }
.confirm-row:last-child { border-bottom: none; }
.confirm-row:nth-child(even) { background: var(--lq-surface-app); }
.confirm-row .v { font-weight: var(--lq-weight-semibold); font-variant-numeric: var(--lq-num); }
.confirm-row .v.muted { color: var(--lq-ink-muted); font-weight: var(--lq-weight-regular); }
.confirm-row.control { background: var(--lq-accent-tint); }
.confirm-row.control .v { color: var(--lq-accent); font-size: var(--lq-text-h3); }

/* Post confirmation — control-figure reconciliation grid */
.cf-wrap { min-width: 0; }
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--lq-border); border: 1px solid var(--lq-border); border-radius: var(--lq-radius-md); overflow: hidden; }
.cf-cell { background: var(--lq-surface-card); padding: var(--lq-space-3) var(--lq-space-4); display: flex; flex-direction: column; gap: 2px; }
.cf-cell__l { font-size: var(--lq-text-caption); color: var(--lq-ink-muted); text-transform: uppercase; letter-spacing: .04em; }
.cf-cell__v { font-size: var(--lq-text-h3); font-weight: var(--lq-weight-semibold); font-variant-numeric: tabular-nums; text-align: right; }
.cf-cell--lead { grid-column: 1 / -1; background: var(--lq-accent-tint); }
.cf-cell--lead .cf-cell__v { color: var(--lq-accent); font-size: var(--lq-text-h2, 24px); }
.cf-ack { display: flex; gap: var(--lq-space-2); align-items: flex-start; margin-top: var(--lq-space-4); font-size: var(--lq-text-small); line-height: 1.4; cursor: pointer; }
.cf-ack input { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; }