/* ============================================================
   ERPForce v2 — v1 component redesigns
   Attio-compact metrics applied to existing inventory
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   AX — Advanced table (shared across Employees, Form Detail, Aging)
   ───────────────────────────────────────────────────────────── */

.ax-tb {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-6);
  height: 44px;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.ax-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  color: var(--text-primary);
}
.ax-count {
  display: inline-flex; align-items: center;
  height: 18px; padding: 0 var(--s-3);
  border-radius: var(--r-sm);
  background: var(--surface-muted);
  font-size: 11px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.ax-sep { color: var(--text-quaternary); font-size: 12px; }
.ax-lbl { font-size: 10px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; }

.ax-chips {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-6);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.ax-link {
  font-size: 11px; color: var(--text-brand); font-weight: 500;
  background: none; border: none; padding: var(--s-1) var(--s-2);
  transition: color var(--dur-fast);
}
/* Inline-link standardization (graduated from audit-fixes bucket B). The
   document “Show more lines” link shares the brand-link treatment. */
.ax-link,
.fd-line--more { color: var(--text-brand); font-weight: 500; transition: color var(--dur-fast); }
.ax-link:hover,
.fd-line--more:hover { color: var(--text-brand-strong); }
.ax-link:hover { text-decoration: underline; }

/* Bulk bar — slim soft-green strip */
.ax-bulk {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-2) var(--s-6);
  background: var(--green-50);
  border-bottom: 1px solid var(--green-200);
  color: var(--text-brand-strong);
  font-size: var(--text-sm);
  height: 30px;
}
.ax-bulk b { font-weight: 600; }
.ax-bulk-sep { width: 1px; height: 14px; background: var(--green-200); margin: 0 var(--s-1); }
.ax-bulk-btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 22px; padding: 0 var(--s-4);
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-brand-strong);
  font-size: var(--text-sm); font-weight: 500;
}
.ax-bulk-btn:hover { background: var(--green-100); }
.ax-bulk-btn.danger { color: var(--danger); }
.ax-bulk-btn.danger:hover { background: var(--danger-bg); }
.ax-bulk-btn svg { width: 11px; height: 11px; stroke-width: 1.8; }

/* Table */
.ax-tbl-wrap { overflow-x: auto; position: relative; }
/* Sticky header on long / horizontal scrolls (graduated from audit-fixes
   bucket B — keeps column titles in view, useful on mobile h-scroll). */
.ax-tbl thead { position: sticky; top: 0; z-index: 20; }
.ax-tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  min-width: 980px;
}
.ax-tbl thead th {
  height: 28px;
  padding: 0 var(--s-5);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-subtle);
  text-align: start;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  white-space: nowrap;
  letter-spacing: 0;
  text-transform: none;
}
.ax-tbl thead th .th-inner {
  display: inline-flex; align-items: center; gap: var(--s-3);
}
.ax-tbl thead th .col-ic {
  width: 12px; height: 12px;
  stroke-width: 1.75;
  color: var(--text-quaternary);
}
.ax-sort {
  display: inline-flex; flex-direction: column; line-height: 0; color: var(--n-200);
}
.ax-sort svg { width: 7px; height: 5px; stroke-width: 2.4; }
.ax-sort svg.active { color: var(--text-secondary); }

.ax-tbl tbody td {
  height: 30px;
  padding: 0 var(--s-5);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  white-space: nowrap;
}
.ax-tbl tbody tr:hover td { background: var(--surface-hover); }
.ax-tbl tbody tr.ax-sel td { background: var(--row-selected-bg); }
.ax-tbl tbody tr.ax-sel:hover td { background: var(--row-selected-bg-hover); }
.ax-tbl tbody tr.ax-sel td:first-of-type { box-shadow: inset 2px 0 0 var(--brand-green); }
.ax-tbl tbody tr:last-child td { border-bottom: 0; }

.ax-tbl .ax-grip { width: 24px; text-align: center; }
.ax-tbl .ax-grip svg { opacity: 0; }
.ax-tbl tr:hover .ax-grip svg { opacity: 1; }

.ax-id-link {
  color: var(--text-brand-strong);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
}
.ax-id-link:hover { text-decoration: underline; }
.ax-dim { color: var(--text-tertiary); }

.ax-person { display: inline-flex; align-items: center; gap: var(--s-4); }
.ax-person-meta { display: flex; flex-direction: column; gap: 0; line-height: 1.2; }
.ax-person-n { font-weight: 500; color: var(--text-primary); }
.ax-person-s { font-size: var(--text-2_5xs); color: var(--text-quaternary); }

.ax-prog { display: inline-flex; align-items: center; gap: var(--s-3); }
.ax-prog-bar {
  display: inline-block;
  width: 60px; height: 4px;
  border-radius: var(--r-sm);
  background: var(--surface-muted);
  overflow: hidden;
}
.ax-prog-bar > span {
  display: block; height: 100%;
  border-radius: var(--r-sm);
}
.ax-prog-n { font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; min-width: 28px; }

.ax-kebab {
  width: 20px; height: 20px;
  border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-quaternary);
}
.ax-kebab:hover { background: var(--surface-hover); color: var(--text-primary); }

.ax-group td {
  background: var(--surface-sunken);
  height: 24px; padding: 0 var(--s-6);
  font-size: var(--text-2_5xs); font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.ax-group-i { display: inline-flex; align-items: center; gap: var(--s-3); }
.ax-group-c { font-size: var(--text-3xs); padding: 0 var(--s-3); height: 14px; display: inline-flex; align-items: center; background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-sm); margin-inline-start: var(--s-2); font-weight: 600; color: var(--text-tertiary); text-transform: none; letter-spacing: 0; }

/* Footer */
.ax-foot {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-2) var(--s-6);
  background: var(--surface-sunken);
  border-top: 1px solid var(--border-subtle);
  font-size: 11px;
  color: var(--text-tertiary);
  height: 28px;
}
.ax-foot-meta { font-size: 11px; color: var(--text-tertiary); }
.ax-foot-meta b { color: var(--text-primary); font-weight: 500; font-variant-numeric: tabular-nums; }
.ax-page-pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 18px; padding: 0 var(--s-2) 0 var(--s-3);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  font-size: 11px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────
   SI — Smart Inbox
   ───────────────────────────────────────────────────────────── */

.si-grid {
  display: grid;
  grid-template-columns: 200px 340px 1fr;
  background: var(--surface-raised);
  border-top: 1px solid var(--border-subtle);
  height: 660px;
}

/* Sidebar */
.si-sb {
  background: var(--surface-sunken);
  border-inline-end: 1px solid var(--border-subtle);
  padding: var(--s-5) var(--s-4);
  overflow-y: auto;
  font-size: 12px;
}
.si-sec {
  font-size: var(--text-2xs); font-weight: 600;
  color: var(--text-quaternary);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: var(--s-5) var(--s-4) var(--s-3);
}
.si-item {
  display: flex; align-items: center; gap: var(--s-4);
  padding: 0 var(--s-4);
  height: 24px;
  width: 100%;
  border-radius: var(--r-md);
  font-size: 12px;
  color: var(--text-secondary);
}
.si-item:hover { background: var(--surface-hover); color: var(--text-primary); }
.si-item--active { background: var(--surface-raised); color: var(--text-primary); font-weight: 500; box-shadow: var(--shadow-xs); border: 1px solid var(--border-subtle); }
.si-item svg { width: 12px; height: 12px; color: var(--text-tertiary); stroke-width: 1.7; flex-shrink: 0; }
.si-item--active svg { color: var(--brand-green); }
.si-count {
  margin-inline-start: auto;
  font-size: 10px;
  color: var(--text-quaternary);
  padding: 0 var(--s-3);
  height: 14px;
  display: inline-flex; align-items: center;
  background: var(--surface-active);
  border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.si-count--rose { background: var(--danger-bg); color: var(--danger); }

.si-progress {
  margin: var(--s-7) var(--s-2) var(--s-4);
  padding: var(--s-5);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
}
.si-progress-head { display: flex; align-items: center; gap: var(--s-3); font-size: var(--text-2_5xs); font-weight: 600; color: var(--text-secondary); margin-bottom: var(--s-3); }
.si-progress-num { font-size: 20px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.018em; font-variant-numeric: tabular-nums; line-height: 1; }
.si-progress-num span { font-size: 11px; font-weight: 500; color: var(--text-tertiary); }
.si-progress-bar { margin-top: var(--s-3); height: 3px; background: var(--surface-muted); border-radius: var(--r-sm); overflow: hidden; }
.si-progress-bar > div { height: 100%; background: var(--brand-green); border-radius: var(--r-sm); }
.si-progress-meta { font-size: var(--text-2xs); color: var(--text-tertiary); margin-top: var(--s-3); }

/* Queue */
.si-queue {
  border-inline-end: 1px solid var(--border-subtle);
  overflow-y: auto;
  background: var(--surface-raised);
}
.si-qhead {
  position: sticky; top: 0;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  background: rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border-subtle);
  z-index: 2;
}
.si-qtitle { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.si-qmeta { font-size: 11px; color: var(--text-tertiary); }
.si-section {
  padding: var(--s-3) var(--s-6);
  font-size: 10px; font-weight: 600;
  color: var(--text-quaternary);
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
  border-top: 1px solid var(--border-subtle);
}

.si-q {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  position: relative;
}
.si-q:hover { background: var(--n-25); }
.si-q--active { background: var(--green-50); box-shadow: inset 2px 0 0 var(--brand-green); }
.si-q--unread::after {
  content: '';
  position: absolute;
  top: 14px; inset-inline-end: 12px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--info);
}

.si-ring {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: conic-gradient(var(--col) calc(var(--s) * 1%), var(--n-100) 0);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.si-ring::before {
  content: '';
  position: absolute; inset: 3px;
  background: var(--surface-raised);
  border-radius: 50%;
}
.si-ring-inner { position: relative; z-index: 1; text-align: center; line-height: 1; }
.si-ring-num { font-size: 11px; font-weight: 700; color: var(--col, var(--text-primary)); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.si-ring-lbl { font-size: var(--text-3xs); font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; margin-top: 1px; }

.si-q-body { min-width: 0; }
.si-q-top { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-1); }
.si-q-ago { font-size: var(--text-2_5xs); color: var(--text-tertiary); margin-inline-start: auto; }
.si-q-head { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); line-height: 1.35; margin-bottom: var(--s-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.si-q-sub { display: flex; align-items: center; gap: var(--s-3); font-size: var(--text-2_5xs); flex-wrap: wrap; }
.si-rec-id { color: var(--text-brand-strong); font-family: var(--font-mono); font-size: var(--text-2_5xs); font-weight: 500; }
.si-q-amt { font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* Detail */
.si-detail {
  overflow-y: auto;
  background: var(--surface-sunken);
  display: flex; flex-direction: column;
}
.si-hero {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--s-7);
  padding: var(--s-8);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-subtle);
  align-items: flex-start;
}
.si-hero .si-ring { width: 56px; height: 56px; }
.si-hero .si-ring::before { inset: 5px; }
.si-hero .si-ring-num { font-size: 17px; }
.si-hero .si-ring-lbl { font-size: var(--text-3xs); }
.si-hero-meta { min-width: 0; }
.si-hero-tags { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.si-hero-title { font-size: 16px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.014em; line-height: 1.3; margin-bottom: var(--s-3); }
.si-hero-sub { display: flex; align-items: center; gap: var(--s-3); font-size: var(--text-sm); color: var(--text-secondary); flex-wrap: wrap; }
.si-rec-amt { font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.si-hero-right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-2); }
.si-submitter { display: inline-flex; align-items: center; gap: var(--s-3); font-size: 11px; color: var(--text-secondary); }

.si-block {
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--s-7) var(--s-8);
}
.si-block-h {
  font-size: var(--text-2_5xs); font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: var(--s-5);
  display: flex; align-items: center; gap: var(--s-3);
}

.si-why-row {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: var(--s-5);
  align-items: flex-start;
  padding: var(--s-2) 0;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.si-why-row b { font-weight: 600; color: var(--text-primary); }
.si-why-bul {
  width: 14px; height: 14px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.si-why-bul.danger  { background: var(--danger-bg);  color: var(--danger); }
.si-why-bul.warn    { background: var(--warning-bg); color: var(--warning); }
.si-why-bul.info    { background: var(--info-bg);    color: var(--info); }
.si-why-bul.success { background: var(--success-bg); color: var(--success); }
.si-why-val { font-size: 11px; font-weight: 600; color: var(--text-primary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.si-why-val.danger  { color: var(--danger); }
.si-why-val.warn    { color: var(--warning); }
.si-why-val.success { color: var(--success); }

.si-chart {
  display: flex; align-items: flex-end;
  gap: var(--s-2);
  height: 60px;
  padding: 0 var(--s-2);
  position: relative;
}
.si-bar { flex: 1; background: var(--n-100); border-radius: 2px 2px 0 0; min-height: 2px; position: relative; }
.si-bar--this { background: linear-gradient(180deg, var(--danger), #8A1F28); }
.si-bar--this span {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-3xs); font-weight: 700;
  color: var(--danger);
  letter-spacing: .04em;
}
.si-mean { position: absolute; inset-inline: 0; border-top: 1px dashed var(--info); pointer-events: none; }
.si-mean-lbl { position: absolute; inset-inline-end: 0; transform: translateY(-50%); font-size: var(--text-3xs); color: var(--info); font-weight: 600; background: var(--surface-raised); padding: 0 var(--s-2); }
.si-axis { display: flex; justify-content: space-between; margin-top: var(--s-3); font-size: var(--text-3xs); color: var(--text-tertiary); }

.si-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5);
  margin-top: var(--s-6); padding-top: var(--s-5);
  border-top: 1px solid var(--border-subtle);
}
.si-stat-k { font-size: var(--text-2xs); font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; }
.si-stat-v { font-size: 13px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; margin-top: 1px; letter-spacing: -0.014em; }
.si-stat-v.danger { color: var(--danger); }

.si-action-bar {
  position: sticky; bottom: 0;
  padding: var(--s-5) var(--s-8);
  background: var(--surface-raised);
  border-top: 1px solid var(--border-subtle);
  display: flex; gap: var(--s-3);
}

/* ─────────────────────────────────────────────────────────────
   TM — Three-Way Match
   ───────────────────────────────────────────────────────────── */

.tm-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
}
.tm-stat {
  padding: var(--s-5) var(--s-7);
  border-inline-end: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: var(--s-1);
  align-items: flex-start;
  background: transparent;
  position: relative;
  /* hover affordance (graduated from audit-fixes bucket B) */
  cursor: pointer; transition: background var(--dur-fast);
}
.tm-stat:last-child { border-inline-end: 0; }
.tm-stat:hover { background: var(--surface-raised); }
.tm-stat--active { background: var(--surface-raised); }
.tm-stat--active::after {
  content: '';
  position: absolute;
  inset-inline: 0; bottom: -1px;
  height: 2px;
  background: var(--brand-green);
}
.tm-stat-k { font-size: var(--text-2xs); font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: var(--s-3); }
.tm-stat-dot { width: 6px; height: 6px; border-radius: 50%; }
.tm-stat-dot.success { background: var(--success); }
.tm-stat-dot.warning { background: var(--warning); }
.tm-stat-dot.info { background: var(--info); }
.tm-stat-dot.danger { background: var(--danger); }
.tm-stat-v { font-size: 18px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.018em; font-variant-numeric: tabular-nums; }
.tm-stat-v .unit { font-size: 11px; font-weight: 500; color: var(--text-tertiary); }
.tm-stat-meta { font-size: var(--text-sm); color: var(--text-tertiary); }

.tm-col-head {
  display: grid;
  grid-template-columns: 1fr 36px 1fr 36px 1fr 200px;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-subtle);
}
.tm-col-h {
  padding: var(--s-4) var(--s-7);
  display: flex; align-items: center; gap: var(--s-4);
}
.tm-col-num {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--surface-muted);
  color: var(--text-tertiary);
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.tm-col-title { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.tm-col-sub { font-size: var(--text-2xs); color: var(--text-tertiary); }
.tm-col-arrow { display: flex; align-items: center; justify-content: center; }

.tm-list { background: var(--surface-raised); }
.tm-row { border-bottom: 1px solid var(--border-subtle); }
.tm-row:hover { background: var(--n-25); }
.tm-row:last-child { border-bottom: 0; }

.tm-summary {
  display: grid;
  grid-template-columns: 1fr 36px 1fr 36px 1fr 200px;
  align-items: stretch;
}
.tm-doc {
  padding: var(--s-5) var(--s-7);
  display: flex; flex-direction: column; gap: var(--s-1);
}
.tm-doc-top { display: flex; align-items: center; gap: var(--s-3); font-size: var(--text-sm); color: var(--text-tertiary); }
.tm-doc-id { font-size: 12px; font-weight: 500; color: var(--text-brand-strong); font-family: var(--font-mono); }
.tm-doc-amt { font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.011em; font-variant-numeric: tabular-nums; margin-top: var(--s-1); }
.tm-doc-meta { font-size: var(--text-sm); color: var(--text-tertiary); margin-top: 1px; }
.tm-doc--empty {
  background: repeating-linear-gradient(45deg, var(--surface-sunken) 0 6px, var(--surface-muted) 6px 7px);
  align-items: center; justify-content: center;
  color: var(--text-tertiary);
  font-size: 11px; font-style: italic;
  text-align: center;
}
.tm-doc--empty a { color: var(--text-brand); font-style: normal; font-weight: 500; cursor: pointer; }

.tm-connector {
  display: flex; align-items: center; justify-content: center;
  position: relative;
  background: var(--surface-sunken);
}
.tm-c-ic {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface-raised);
  border: 1.5px solid var(--n-150);
  color: var(--text-quaternary);
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}
.tm-connector::before {
  content: ''; position: absolute;
  inset-inline: 0; top: 50%;
  height: 1px;
  background: var(--border-default);
  transform: translateY(-0.5px);
  z-index: 0;
}
.tm-row--clean .tm-c-ic { border-color: var(--success); color: var(--success); }
.tm-row--clean .tm-connector::before { background: var(--success); }
.tm-row--mismatch .tm-c-ic { border-color: var(--warning); color: var(--warning); background: var(--warning-bg); }
.tm-row--mismatch .tm-connector::before { background: var(--warning); }
.tm-row--partial .tm-c-ic { border-color: var(--info); color: var(--info); }
.tm-row--partial .tm-connector::before { background: repeating-linear-gradient(to right, var(--info) 0 4px, transparent 4px 8px); }
.tm-row--missing .tm-c-ic { border-style: dashed; }
.tm-row--missing .tm-connector::before { background: transparent; }

.tm-actions {
  display: flex; flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-7);
  background: var(--surface-sunken);
  border-inline-start: 1px solid var(--border-subtle);
}
.tm-delta { font-size: 11px; font-weight: 600; color: var(--danger); font-variant-numeric: tabular-nums; }
.tm-toggle svg { transition: transform var(--dur-fast); }
.tm-row--open .tm-toggle svg { transform: rotate(180deg); }

.tm-detail {
  display: none;
  padding: var(--s-7);
  background: var(--surface-sunken);
  border-top: 1px solid var(--border-subtle);
}
.tm-row--open .tm-detail { display: block; }
.tm-detail-h { font-size: var(--text-2_5xs); font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--s-4); }

.tm-lines {
  width: 100%;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  border-collapse: separate; border-spacing: 0;
  font-size: var(--text-sm);
  overflow: hidden;
}
.tm-lines thead th {
  height: 26px; padding: 0 var(--s-5);
  text-align: end;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 10px; font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.tm-lines thead th:first-child { text-align: start; }
.tm-lines tbody td {
  height: 30px; padding: 0 var(--s-5);
  text-align: end;
  border-bottom: 1px solid var(--border-subtle);
  font-variant-numeric: tabular-nums;
}
.tm-lines tbody td.tm-line-sku { text-align: start; color: var(--text-primary); }
.tm-lines tbody tr:last-child td { border-bottom: 0; }
.tm-line-err td { background: var(--warning-bg); background: rgba(254,241,221,0.4); }
.tm-line-delta { color: var(--danger); font-weight: 600; }
.tm-line-ok { color: var(--success); font-weight: 500; }

.tm-resol {
  display: flex; gap: var(--s-3);
  margin-top: var(--s-5);
  flex-wrap: wrap;
}

.tm-foot {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
  background: var(--surface-sunken);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-sm); color: var(--text-tertiary);
}
.tm-foot b { color: var(--text-primary); font-weight: 600; }

/* ─────────────────────────────────────────────────────────────
   FD — Form Detail (master + drawer)
   ───────────────────────────────────────────────────────────── */

.fd-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  background: var(--surface-raised);
  border-top: 1px solid var(--border-subtle);
  min-height: 540px;
}
.fd-left { border-inline-end: 1px solid var(--border-subtle); }
.fd-left .ax-tbl { min-width: auto; }

.fd-right {
  background: var(--surface-sunken);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.fd-rh {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-7);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-subtle);
}

.fd-hero {
  padding: var(--s-8) var(--s-8) var(--s-7);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-subtle);
}
.fd-id { font-size: var(--text-2xs); color: var(--text-tertiary); margin-bottom: var(--s-2); }
.fd-amt {
  font-size: 24px; font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.022em;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s-4);
}
.fd-amt span { color: var(--text-tertiary); font-weight: 500; }
.fd-meta { display: flex; align-items: center; gap: var(--s-4); }

.fd-fields {
  background: var(--surface-raised);
  padding: var(--s-2) var(--s-8);
  border-bottom: 1px solid var(--border-subtle);
}
.fd-field {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--border-subtle);
  align-items: center;
}
.fd-field:last-child { border-bottom: 0; }
.fd-fk { color: var(--text-tertiary); }
.fd-fv { color: var(--text-primary); }
.fd-fv .row { gap: var(--s-2); }

.fd-block {
  background: var(--surface-raised);
  padding: var(--s-6) var(--s-8);
  border-bottom: 1px solid var(--border-subtle);
}
.fd-block-h {
  font-size: var(--text-2xs); font-weight: 600; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: var(--s-4);
  display: flex; align-items: center;
}
.fd-block-meta { font-size: var(--text-2_5xs); color: var(--text-quaternary); margin-inline-start: auto; text-transform: none; letter-spacing: 0; font-weight: 400; }
.fd-block-b { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.5; }
.fd-block-b b { color: var(--text-primary); font-weight: 600; }

.fd-lines { display: flex; flex-direction: column; }
.fd-line {
  display: grid;
  grid-template-columns: 1fr 100px 70px;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
  align-items: center;
}
.fd-line:last-child { border-bottom: 0; }
.fd-line span:nth-child(2) { font-family: var(--font-mono); font-size: var(--text-2_5xs); color: var(--text-tertiary); text-align: end; }
.fd-line-amt { font-weight: 500; color: var(--text-primary); font-variant-numeric: tabular-nums; text-align: end; }
.fd-line--more {
  grid-template-columns: 1fr;
  padding: var(--s-3) 0;
  color: var(--text-brand);
  font-size: 11px;
  text-align: center;
  cursor: pointer;
}

.fd-action {
  position: sticky; bottom: 0;
  padding: var(--s-5) var(--s-8);
  background: var(--surface-raised);
  border-top: 1px solid var(--border-subtle);
  display: flex; gap: var(--s-3);
  margin-top: auto;
}

/* ─────────────────────────────────────────────────────────────
   KB — Kanban
   ───────────────────────────────────────────────────────────── */

.kb-board {
  display: flex; gap: var(--s-4);
  padding: var(--s-6);
  background: var(--surface-sunken);
  overflow-x: auto;
  overflow-y: hidden;
  /* Fill the frame's remaining height so the sunken canvas reaches the footer */
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
}
.kb-col {
  flex: 0 0 280px;
  min-width: 280px;
  background: var(--surface-canvas);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3);
  /* Column owns the frame height; its body scrolls, header stays put */
  min-height: 0;
  transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.kb-col--over {
  border-color: var(--brand-green);
  background: var(--green-50);
  box-shadow: inset 0 0 0 1px var(--brand-green);
}
.kb-col-head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-2) var(--s-3);
  font-size: var(--text-sm);
  flex-shrink: 0;
}
.kb-col-dot { width: 7px; height: 7px; border-radius: 50%; }
.kb-col-name { font-weight: 600; color: var(--text-primary); }
.kb-col-count {
  font-size: 10px; color: var(--text-tertiary);
  padding: 0 var(--s-3); height: 14px;
  display: inline-flex; align-items: center;
  background: var(--surface-muted);
  border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
/* Scrollable card area inside each column */
.kb-col-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-1);
  margin: -2px;
  scrollbar-width: thin;
}
.kb-col-body::-webkit-scrollbar { width: 8px; }
.kb-col-body::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }
.kb-card {
  position: relative;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast), opacity var(--dur-fast), background var(--dur-fast);
}
.kb-card:hover { border-color: var(--border-default); box-shadow: 0 1px 3px -1px rgba(0,0,0,.08); background: var(--n-25); }
.kb-card:active { cursor: grabbing; }
/* Drag grip — appears on hover, hints the card is draggable */
.kb-card-grip {
  position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 9px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-quaternary);
  opacity: 0;
  cursor: grab;
  transition: opacity var(--dur-fast);
}
.kb-card:hover .kb-card-grip { opacity: .7; }
.kb-card-grip svg { width: 13px; height: 13px; stroke-width: 1.6; transform: rotate(90deg); }
.kb-card--dragging {
  opacity: .45;
  border-color: var(--brand-green);
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.22);
  transform: scale(.99);
}
.kb-card-h { display: flex; align-items: center; gap: var(--s-3); }
.kb-card-n { font-size: 12px; font-weight: 500; color: var(--text-primary); }
.kb-card-r { font-size: var(--text-2_5xs); color: var(--text-tertiary); }
.kb-card-foot { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

/* Drop placeholder shown in the hovered column */
.kb-drop-hint {
  flex-shrink: 0;
  height: 34px;
  border: 1.5px dashed var(--brand-green);
  border-radius: var(--r-sm);
  background: var(--green-50);
  color: var(--text-brand);
  font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}

.kb-add {
  margin-top: var(--s-1);
  padding: var(--s-3);
  background: transparent;
  border: 1px dashed var(--border-default);
  border-radius: var(--r-sm);
  font-size: 11px;
  color: var(--text-tertiary);
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  flex-shrink: 0;
}
.kb-add:hover { color: var(--text-brand); border-color: var(--green-300); }

/* ─────────────────────────────────────────────────────────────
   CAL — Calendar
   ───────────────────────────────────────────────────────────── */

.cal-grid { background: var(--surface-raised); }
.cal-heads {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
}
.cal-head {
  padding: var(--s-3) var(--s-5);
  font-size: 10px; font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cal-cells {
  display: grid; grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 90px;
}
.cal-cell {
  padding: var(--s-3) var(--s-4);
  border-inline-end: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: var(--s-2);
  background: var(--surface-raised);
}
.cal-cell:nth-child(7n) { border-inline-end: 0; }
.cal-cell--dim { background: var(--surface-sunken); color: var(--text-quaternary); }
.cal-cell--today { background: var(--green-50); }
/* Calendar drag-and-drop reschedule */
.cal-cell--over {
  background: var(--green-50) !important;
  box-shadow: inset 0 0 0 2px var(--brand-green);
}
.cal-chip { transition: opacity var(--dur-fast), transform var(--dur-fast); }
.cal-chip:hover { filter: brightness(.97); }
.cal-chip:active { cursor: grabbing; }
.cal-num {
  font-size: var(--text-2xs); font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
.cal-cell--dim .cal-num { color: var(--text-quaternary); }
.cal-cell--today .cal-num {
  background: var(--color-action);
  color: var(--color-on-action);
  border-radius: 50%;
  font-weight: 600;
}
.cal-evs { display: flex; flex-direction: column; gap: var(--s-1); }
.cal-ev {
  padding: 1px var(--s-3);
  border-radius: var(--r-xs);
  font-size: var(--text-2xs);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-ev--slate  { background: var(--tag-slate-bg);  color: var(--tag-slate-fg); }
.cal-ev--green  { background: var(--tag-green-bg);  color: var(--tag-green-fg); }
.cal-ev--blue   { background: var(--tag-blue-bg);   color: var(--tag-blue-fg); }
.cal-ev--purple { background: var(--tag-purple-bg); color: var(--tag-purple-fg); }
.cal-ev--amber  { background: var(--tag-amber-bg);  color: var(--tag-amber-fg); }
.cal-ev--rose   { background: var(--tag-rose-bg);   color: var(--tag-rose-fg); }
/* +N more chip (6.3) — sibling of .cal-evs so the pill clip never hides it.
   Tap opens the day sheet; no event is silently dropped on mobile. */
.cal-more {
  align-self: flex-start;
  margin-top: auto;
  padding: 1px var(--s-3);
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-2xs);
  font-weight: 600;
  border-radius: var(--r-xs);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.cal-more:hover { background: var(--surface-sunken); color: var(--text-primary); }
.cal-more:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }

/* ─────────────────────────────────────────────────────────────
   AG — Aging buckets
   ───────────────────────────────────────────────────────────── */

.ag-buckets {
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-subtle);
}
.ag-bucket {
  padding: var(--s-7);
  border-inline-end: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: var(--s-2);
  align-items: flex-start;
  position: relative;
  background: var(--surface-raised);
  text-align: start;
  /* hover affordance (graduated from audit-fixes bucket B) */
  cursor: pointer; transition: background var(--dur-fast);
}
.ag-bucket:last-child { border-inline-end: 0; }
.ag-bucket:hover { background: var(--n-25); }
.ag-bucket--active { background: var(--n-25); }
.ag-bucket--active::after {
  content: '';
  position: absolute;
  inset-inline: 0; bottom: -1px;
  height: 2px;
  background: var(--brand-green);
}
.ag-bar { width: 32px; height: 3px; border-radius: 2px; }
.ag-label { font-size: 11px; font-weight: 500; color: var(--text-tertiary); margin-top: var(--s-2); }
.ag-amt { font-size: 20px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.018em; font-variant-numeric: tabular-nums; }
.ag-pct { font-size: var(--text-2xs); color: var(--text-tertiary); }


/* ─────────────────────────────────────────────────────────────
   AT — Audit Trail Browser
   ───────────────────────────────────────────────────────────── */

.at-filter {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  font-size: var(--text-sm);
}
.at-filter .ax-lbl { margin-inline-start: var(--s-2); }
.at-filter .ax-lbl:first-child { margin-inline-start: 0; }

.at-banner {
  display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-5) var(--s-7);
  background: linear-gradient(180deg, var(--green-50), var(--surface-raised));
  border-bottom: 1px solid var(--border-subtle);
}
.at-banner-ic {
  width: 26px; height: 26px;
  border-radius: var(--r-md);
  background: var(--color-action);
  color: var(--color-on-action);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.at-banner-ic svg { width: 13px; height: 13px; stroke-width: 2; }
.at-banner-t { flex: 1; }
.at-banner-h { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.at-banner-s { font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }

.at-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  background: var(--surface-raised);
  min-height: 480px;
}
.at-feed { border-inline-end: 1px solid var(--border-subtle); }
.at-feed-day {
  padding: var(--s-4) var(--s-7);
  font-size: var(--text-2xs); font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--surface-sunken);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.at-feed-day:first-child { border-top: 0; }

.at-event {
  display: grid;
  grid-template-columns: 60px 22px 1fr auto;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-7);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12px;
  align-items: flex-start;
}
.at-event:last-child { border-bottom: 0; }
.at-event:hover { background: var(--n-25); }
.at-time { color: var(--text-tertiary); font-variant-numeric: tabular-nums; font-size: var(--text-sm); padding-top: 1px; }
.at-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin-top: 1px;
}
.at-dot.created { background: var(--success-bg); color: var(--success); }
.at-dot.edited  { background: var(--info-bg); color: var(--info); }
.at-dot.approved{ background: var(--green-100); color: var(--green-700); }
.at-dot.rejected{ background: var(--danger-bg); color: var(--danger); }
.at-dot.deleted { background: var(--danger-bg); color: var(--danger); }
.at-dot.viewed  { background: var(--surface-muted); color: var(--text-tertiary); }
.at-dot svg { width: 10px; height: 10px; stroke-width: 2; }

.at-body { min-width: 0; }
.at-actor { display: inline-flex; align-items: center; gap: var(--s-3); font-weight: 500; color: var(--text-primary); }
.at-action { color: var(--text-secondary); }
.at-rec {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-brand-strong);
  padding: 1px var(--s-3);
  background: var(--green-50);
  border-radius: var(--r-xs);
  margin: 0 var(--s-2);
}
.at-changes { margin-top: var(--s-2); display: flex; flex-direction: column; gap: var(--s-2); font-size: 11px; }
.at-change {
  display: grid; grid-template-columns: 100px 1fr;
  gap: var(--s-4);
  padding: var(--s-2) var(--s-4);
  background: var(--surface-sunken);
  border-radius: var(--r-xs);
}
.at-change-k { color: var(--text-tertiary); }
.at-change-v { display: flex; align-items: center; gap: var(--s-3); }
.at-from { color: var(--text-tertiary); text-decoration: line-through; text-decoration-color: var(--n-300); }
.at-arrow { color: var(--text-quaternary); }
.at-to { color: var(--text-primary); font-weight: 500; }
.at-event .at-meta { font-size: 11px; color: var(--text-tertiary); text-align: end; white-space: nowrap; }
.at-event .at-ip { font-family: var(--font-mono); }

.at-side { padding: var(--s-7); background: var(--surface-sunken); display: flex; flex-direction: column; gap: var(--s-7); }
.at-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
}
.at-card-h {
  padding: var(--s-4) var(--s-6);
  font-size: var(--text-2_5xs); font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border-subtle);
}
.at-stat-row {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center;
  padding: var(--s-3) var(--s-6);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
  gap: var(--s-3);
}
.at-stat-row:last-child { border-bottom: 0; }
.at-stat-row .l { display: flex; align-items: center; gap: var(--s-3); }
.at-stat-row .n { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-primary); }

.at-integrity {
  padding: var(--s-6);
  background: var(--green-50);
  border: 1px solid var(--green-200);
  border-radius: var(--r-md);
  display: flex; gap: var(--s-5);
  align-items: flex-start;
}
.at-integrity .check {
  width: 22px; height: 22px;
  background: var(--color-action);
  color: var(--color-on-action);
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.at-integrity .check svg { width: 12px; height: 12px; stroke-width: 2.4; }
.at-integrity-h { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.at-integrity-s { font-size: 11px; color: var(--text-secondary); margin-top: var(--s-1); line-height: 1.5; }

/* ─────────────────────────────────────────────────────────────
   CF — Cash-Flow Timeline
   ───────────────────────────────────────────────────────────── */

.cf-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-subtle);
}
.cf-stat {
  padding: var(--s-6) var(--s-7);
  border-inline-end: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: var(--s-1);
  /* hover affordance (graduated from audit-fixes bucket B) */
  cursor: pointer; transition: background var(--dur-fast);
}
.cf-stat:last-child { border-inline-end: 0; }
.cf-stat-k {
  font-size: var(--text-2xs); font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: .04em;
}
.cf-stat-v {
  font-size: 18px; font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.018em;
  font-variant-numeric: tabular-nums;
}
.cf-stat-v.neg { color: var(--danger); }
.cf-stat-s { font-size: var(--text-sm); color: var(--text-tertiary); }

.cf-chart-wrap {
  background: var(--surface-raised);
  padding: 18px 18px var(--s-4);
}
.cf-chart {
  position: relative;
  height: 200px;
  border-bottom: 1px solid var(--border-default);
  border-inline-start: 1px solid var(--border-default);
}
.cf-zero {
  position: absolute; inset-inline: 0; top: 50%;
  border-top: 1px solid var(--border-default);
}
.cf-min {
  position: absolute; inset-inline: 0;
  border-top: 1.5px dashed var(--warning);
}
.cf-min-lbl {
  position: absolute; inset-inline-end: 0; transform: translateY(-50%);
  background: var(--warning-bg); color: var(--warning);
  padding: 1px var(--s-3);
  font-size: var(--text-3xs); font-weight: 600;
  border-radius: var(--r-xs);
  white-space: nowrap;
}
.cf-bars {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: var(--s-2);
  padding: 0 var(--s-2);
}
.cf-day {
  position: relative;
  display: flex; flex-direction: column;
  justify-content: center;
  align-items: center;
}
.cf-bar-up, .cf-bar-down {
  position: absolute;
  inset-inline: 18%;
  border-radius: 2px;
}
.cf-bar-up { background: var(--green-400); bottom: 50%; }
.cf-bar-down { background: var(--danger); top: 50%; opacity: .82; }
.cf-bar-up.draft, .cf-bar-down.draft { opacity: .42; background: var(--n-300); }

.cf-line {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cf-axis {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: var(--s-2);
  padding: var(--s-2);
  font-size: var(--text-2xs);
  color: var(--text-tertiary);
  text-align: center;
}
.cf-axis span.today { color: var(--text-primary); font-weight: 600; }
.cf-axis span.warn { color: var(--warning); font-weight: 600; }

.cf-legend {
  display: flex; align-items: center; gap: var(--s-8);
  padding: var(--s-5) var(--s-8);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 11px;
  color: var(--text-tertiary);
}
.cf-legend .li { display: inline-flex; align-items: center; gap: var(--s-3); }
.cf-legend .sw { width: 10px; height: 10px; border-radius: 2px; }

.cf-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--surface-raised); border-top: 1px solid var(--border-subtle); }
.cf-bottom > div { padding: var(--s-7); }
.cf-bottom > div:first-child { border-inline-end: 1px solid var(--border-subtle); }

.cf-pay-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-xs);
  font-size: var(--text-sm);
  margin-bottom: var(--s-1);
  /* hover affordance (graduated from audit-fixes bucket B) */
  transition: background var(--dur-fast);
}
.cf-pay-row:hover { background: var(--surface-hover); }
.cf-pay-row .grip { color: var(--text-quaternary); cursor: grab; }
.cf-pay-row .grip svg { width: 10px; height: 10px; }
.cf-pay-row .id { font-family: var(--font-mono); font-size: var(--text-2_5xs); color: var(--text-brand-strong); }
.cf-pay-row .vendor { color: var(--text-primary); margin-inline-start: var(--s-2); }
.cf-pay-row .amt { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-primary); }

.cf-ai {
  padding: var(--s-6);
  background: var(--ai-bg);
  border: 1px solid var(--ai-bg-strong);
  border-radius: var(--r-md);
  display: grid; grid-template-columns: 18px 1fr;
  gap: var(--s-5);
  margin-top: var(--s-4);
}
.cf-ai-ic { color: var(--ai-fg); }
.cf-ai-ic svg { width: 14px; height: 14px; stroke-width: 2; }
.cf-ai-h { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); margin-bottom: var(--s-2); }
.cf-ai-b { font-size: 11px; color: var(--text-secondary); line-height: 1.5; }
.cf-ai-actions { display: flex; gap: var(--s-3); margin-top: var(--s-4); }

/* ─────────────────────────────────────────────────────────────
   PV — Pivot
   ───────────────────────────────────────────────────────────── */

.pv-config {
  display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-4) var(--s-6);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.pv-config .ax-lbl:first-child { margin-inline-start: 0; }
.pv-group {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 22px;
  padding: 0 var(--s-2) 0 var(--s-4);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  font-size: 11px;
  color: var(--text-primary);
}
.pv-group .gx { width: 14px; height: 14px; display: grid; place-items: center; color: var(--text-quaternary); border-radius: var(--r-xs); }
.pv-group .gx:hover { background: var(--surface-active); color: var(--text-primary); }
.pv-group .gx svg { width: 8px; height: 8px; stroke-width: 2.4; }

.pv-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-subtle);
}
.pv-stat { padding: var(--s-5) var(--s-7); border-inline-end: 1px solid var(--border-subtle); }
.pv-stat:last-child { border-inline-end: 0; }
.pv-stat-k { font-size: var(--text-2xs); font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; }
.pv-stat-v { font-size: 16px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.014em; font-variant-numeric: tabular-nums; margin-top: var(--s-1); }

.pv-tbl {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.pv-tbl thead th {
  height: 28px; padding: 0 var(--s-5);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 11px; font-weight: 500;
  color: var(--text-tertiary);
  white-space: nowrap;
  text-align: end;
}
.pv-tbl thead th:first-child {
  text-align: start;
  position: sticky; inset-inline-start: 0;
  background: var(--surface-raised);
  z-index: 1;
  border-inline-end: 1px solid var(--border-subtle);
}
.pv-tbl thead th.month-h { text-align: center; }
.pv-tbl thead th.total-h { background: var(--surface-sunken); border-inline-start: 1px solid var(--border-default); }

.pv-tbl tbody td {
  height: 28px; padding: 0 var(--s-5);
  border-bottom: 1px solid var(--border-subtle);
  text-align: end;
  color: var(--text-primary);
  white-space: nowrap;
}
.pv-tbl tbody td:first-child {
  text-align: start;
  position: sticky; inset-inline-start: 0;
  background: var(--surface-raised);
  z-index: 1;
  border-inline-end: 1px solid var(--border-subtle);
  color: var(--text-primary);
}
.pv-tbl tbody tr:hover td { background: var(--n-25); }
.pv-tbl tbody tr:hover td:first-child { background: var(--n-25); }
.pv-tbl tbody td.total-c { background: var(--surface-sunken); font-weight: 600; border-inline-start: 1px solid var(--border-default); }
.pv-tbl tbody tr.subtotal td { background: var(--green-50); font-weight: 600; color: var(--text-brand-strong); }
.pv-tbl tbody tr.subtotal td:first-child { background: var(--green-50); color: var(--text-brand-strong); }
.pv-tbl tbody tr.grand td {
  background: var(--n-100);
  font-weight: 700;
  border-top: 2px solid var(--border-default);
  border-bottom: 0;
}
.pv-tbl tbody tr.grand td:first-child { background: var(--n-100); }

.pv-bar {
  display: inline-block;
  height: 2px;
  background: var(--brand-green);
  border-radius: 1px;
  vertical-align: middle;
  margin-inline-end: var(--s-3);
  min-width: 4px;
}

.pv-group-row td {
  background: var(--surface-sunken) !important;
  font-size: var(--text-2_5xs); font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--border-subtle);
}
.pv-group-row td:first-child { background: var(--surface-sunken) !important; }

/* ═════════════════════════════════════════════════════════════
   RC — Reconciliation (v2 · focused decision queue)
   ═════════════════════════════════════════════════════════════ */

.rc-hero-bar {
  padding: var(--s-8) var(--s-10);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-subtle);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 28px;
  align-items: center;
}
.rc-hero-l { display: flex; flex-direction: column; gap: var(--s-2); }
.rc-hero-t { font-size: 14px; font-weight: 600; letter-spacing: -0.011em; color: var(--text-primary); }
.rc-hero-s { font-size: var(--text-sm); color: var(--text-tertiary); }
.rc-hero-prog {
  margin-top: var(--s-4);
  height: 5px;
  background: var(--surface-muted);
  border-radius: 3px;
  overflow: hidden;
}
.rc-hero-prog > span {
  display: block;
  height: 100%;
  background: var(--brand-green);
  border-radius: 3px;
  transition: width var(--dur-base) var(--ease-out);
}
.rc-hero-r { display: flex; gap: var(--s-16); }
.rc-hero-stat { display: flex; flex-direction: column; gap: var(--s-1); }
.rc-hero-stat-k {
  font-size: var(--text-2xs); font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: .04em;
}
.rc-hero-stat-v {
  font-size: 20px; font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.rc-hero-stat-v.danger { color: var(--danger); }
.rc-hero-stat-s { font-size: var(--text-2_5xs); color: var(--text-tertiary); }

.rc-tabs-bar {
  display: flex; align-items: center;
  padding: 0 var(--s-8);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-subtle);
}
.rc-tab2 {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  font-size: 12px;
  color: var(--text-tertiary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  transition: color var(--dur-fast);
}
.rc-tab2:hover { color: var(--text-secondary); }
.rc-tab2.active { color: var(--text-primary); font-weight: 500; border-bottom-color: var(--brand-green); }
.rc-tab2 .c {
  font-size: 10px; font-weight: 600;
  padding: 0 var(--s-3); height: 14px;
  display: inline-flex; align-items: center;
  background: var(--surface-muted); color: var(--text-tertiary);
  border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
}
.rc-tab2.active .c { background: var(--green-100); color: var(--green-700); }

.rc-list2 {
  padding: var(--s-7);
  background: var(--surface-sunken);
  display: flex; flex-direction: column;
  gap: var(--s-5);
}

.rc-item2 {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.rc-item2:hover { border-color: var(--border-default); }
.rc-item2:focus-within { border-color: var(--green-300); box-shadow: var(--shadow-focus); }
.rc-item2--done {
  opacity: .68;
  border-color: var(--border-subtle);
  background: var(--n-25);
}
.rc-item2--done:hover { opacity: 1; }

.rc-it-head {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: var(--s-6);
  padding: var(--s-6) var(--s-8);
  align-items: flex-start;
}
.rc-it-ic {
  width: 24px; height: 24px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.rc-it-ic svg { width: 12px; height: 12px; stroke-width: 2; }
.rc-it-ic--sugg { background: var(--ai-bg);      color: var(--ai-fg); }
.rc-it-ic--disc { background: var(--warning-bg); color: var(--warning); }
.rc-it-ic--bank { background: var(--info-bg);    color: var(--info); }
.rc-it-ic--book { background: var(--surface-muted); color: var(--text-tertiary); }
.rc-it-ic--done { background: var(--success-bg); color: var(--success); }

.rc-it-meta { min-width: 0; }
.rc-it-cat {
  font-size: 10px; font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: var(--s-1);
}
.rc-it-cat.matched { color: var(--success); }
.rc-it-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.008em;
  line-height: 1.3;
}
.rc-it-title .matched-to {
  font-weight: 400;
  color: var(--text-tertiary);
  font-size: 12px;
  margin-inline-start: var(--s-2);
}
.rc-it-sub {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: 11px; color: var(--text-tertiary);
  margin-top: var(--s-2);
  flex-wrap: wrap;
}
.rc-it-sub b { font-weight: 600; color: var(--text-primary); }
.rc-it-sub .ref {
  font-family: var(--font-mono); font-size: var(--text-2_5xs);
  color: var(--text-brand-strong);
}
.rc-it-sub .delta { color: var(--warning); font-weight: 600; }

.rc-it-amt {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  letter-spacing: -0.011em;
  white-space: nowrap;
  text-align: end;
}
.rc-it-amt.in { color: var(--success); }
.rc-it-amt.warn { color: var(--warning); }

.rc-it-body {
  padding-block: 0 var(--s-7); padding-inline: 56px var(--s-8);
  display: flex; flex-direction: column; gap: var(--s-5);
}

/* AI suggestion card */
.rc-sugg-card {
  background: var(--ai-bg);
  border: 1px solid var(--ai-bg-strong);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-6);
}
.rc-sugg-card-h {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--text-2_5xs); font-weight: 600;
  color: var(--ai-fg);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: var(--s-4);
}
.rc-sugg-card-h svg { width: 10px; height: 10px; stroke-width: 2; }
.rc-sugg-card-h .conf {
  margin-inline-start: auto;
  font-size: var(--text-sm);
  color: var(--ai-fg);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rc-sugg-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-4) var(--s-5);
  background: var(--surface-raised);
  border-radius: var(--r-sm);
}
.rc-sugg-row .ttl { font-size: 12.5px; color: var(--text-primary); font-weight: 500; letter-spacing: -0.008em; }
.rc-sugg-row .meta {
  display: flex; gap: var(--s-3); align-items: center;
  font-size: var(--text-2_5xs); color: var(--text-tertiary);
  margin-top: var(--s-1);
}
.rc-sugg-row .ref { font-family: var(--font-mono); color: var(--text-brand-strong); }
.rc-sugg-row .amt { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); letter-spacing: -0.008em; }
.rc-sugg-why {
  font-size: var(--text-sm); color: var(--text-secondary);
  margin-top: var(--s-4);
  display: flex; align-items: flex-start; gap: var(--s-3);
  line-height: 1.5;
}
.rc-sugg-why svg { width: 11px; height: 11px; stroke-width: 2; color: var(--ai-fg); flex-shrink: 0; margin-top: 1px; }
.rc-sugg-why b { font-weight: 600; color: var(--text-primary); }

/* Bank-vs-books comparison */
.rc-compare2 {
  display: grid;
  grid-template-columns: 1fr 28px 1fr;
  gap: var(--s-3);
  align-items: stretch;
}
.rc-compare-side {
  padding: var(--s-5) var(--s-6);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
}
.rc-compare-side .k {
  font-size: var(--text-3xs); font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: var(--s-2);
}
.rc-compare-side .v {
  font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  letter-spacing: -0.011em;
}
.rc-compare-side .v.warn { color: var(--warning); }
.rc-compare-side .s {
  font-size: var(--text-2_5xs); color: var(--text-tertiary);
  margin-top: var(--s-1);
  display: flex; align-items: center; gap: var(--s-2);
  flex-wrap: wrap;
}
.rc-compare-side .s .ref { font-family: var(--font-mono); color: var(--text-brand-strong); }
.rc-compare-vs {
  display: grid; place-items: center;
  color: var(--text-quaternary);
}
.rc-compare-vs svg { width: 14px; height: 14px; stroke-width: 1.6; }

/* Plain-language explainer */
.rc-explain {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  padding: var(--s-4) var(--s-6);
  background: var(--surface-sunken);
  border-inline-start: 2px solid var(--ai-bg-strong);
  border-start-end-radius: var(--r-md); border-end-end-radius: var(--r-md);
  display: flex; align-items: flex-start; gap: var(--s-4);
  line-height: 1.5;
}
.rc-explain svg { width: 11px; height: 11px; stroke-width: 2; color: var(--ai-fg); flex-shrink: 0; margin-top: var(--s-1); }
.rc-explain b { color: var(--text-primary); font-weight: 600; }
.rc-explain.warn { border-inline-start-color: var(--warning); }
.rc-explain.warn svg { color: var(--warning); }

.rc-it-actions {
  display: flex; align-items: center; gap: var(--s-3);
  padding-block: var(--s-5); padding-inline: 56px var(--s-8);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-raised);
  flex-wrap: wrap;
}
.rc-item2--done .rc-it-actions { display: none; }
.rc-it-alt {
  font-size: 11px; color: var(--text-tertiary);
  margin-inline-start: auto;
}
.rc-it-alt-link {
  color: var(--text-brand);
  background: none; border: none; padding: 0;
  font-size: 11px;
  cursor: pointer;
}
.rc-it-alt-link:hover { text-decoration: underline; }

.rc-empty {
  padding: var(--s-16);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  color: var(--text-tertiary);
}
.rc-empty-ic {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success);
  display: grid; place-items: center;
  margin-bottom: var(--s-2);
}
.rc-empty-ic svg { width: 16px; height: 16px; stroke-width: 2.4; }
.rc-empty-h { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.rc-empty-s { font-size: var(--text-sm); color: var(--text-tertiary); max-width: 320px; line-height: 1.5; }

.rc-foot2 {
  display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-5) var(--s-8);
  background: var(--surface-raised);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
}
.rc-foot2 .l { color: var(--text-tertiary); }
.rc-foot2 .l b { color: var(--text-primary); font-weight: 600; }
.rc-foot2 .btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }



/* ═════════════════════════════════════════════════════════════
   RCP — Reconciliation (v2.1 · paired-row side-by-side)
   ═════════════════════════════════════════════════════════════ */

.rcp-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-subtle);
}
.rcp-stat {
  padding: var(--s-6) var(--s-8);
  border-inline-end: 1px solid var(--border-subtle);
}
.rcp-stat:last-child { border-inline-end: 0; }
.rcp-stat-k { font-size: var(--text-2xs); font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; }
.rcp-stat-v { font-size: 18px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.018em; font-variant-numeric: tabular-nums; margin-top: var(--s-1); }
.rcp-stat-v.danger { color: var(--danger); }
.rcp-stat-v .unit { font-size: 11px; color: var(--text-tertiary); font-weight: 500; }
.rcp-stat-s { font-size: var(--text-2_5xs); color: var(--text-tertiary); margin-top: 1px; }

.rcp-progress {
  display: flex; align-items: center; gap: var(--s-6);
  padding: var(--s-4) var(--s-8);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
}
.rcp-progress .lbl { font-weight: 600; color: var(--text-primary); }
.rcp-progress .bar {
  flex: 1; height: 6px;
  background: var(--surface-muted);
  border-radius: 3px; overflow: hidden;
  display: flex;
}
.rcp-progress .bar > span { display: block; height: 100%; }
.rcp-progress .bar > .matched { background: var(--brand-green); }
.rcp-progress .bar > .sugg    { background: var(--info); }
.rcp-progress .bar > .disc    { background: var(--warning); }
.rcp-progress .bar > .unm     { background: var(--danger); }
.rcp-progress .meta { font-variant-numeric: tabular-nums; color: var(--text-tertiary); }

.rcp-tabs {
  display: flex; align-items: center;
  padding: 0 var(--s-8);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-subtle);
  gap: 0;
}
.rcp-tab {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  font-size: 12px;
  color: var(--text-tertiary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
}
.rcp-tab:hover { color: var(--text-secondary); }
.rcp-tab.active { color: var(--text-primary); font-weight: 500; border-bottom-color: var(--brand-green); }
.rcp-tab .c {
  font-size: 10px; font-weight: 600;
  padding: 0 var(--s-3); height: 14px;
  display: inline-flex; align-items: center;
  background: var(--surface-muted); color: var(--text-tertiary);
  border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
}
.rcp-tab.active .c { background: var(--green-100); color: var(--green-700); }

/* Column header */
.rcp-head {
  display: grid;
  grid-template-columns: 1fr 64px 1fr 110px;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 10px; font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: .04em;
}
.rcp-head > div { padding: var(--s-4) var(--s-7); }
.rcp-head .col-bank, .rcp-head .col-ledger {
  display: flex; align-items: center; gap: var(--s-3);
}
.rcp-head .col-bank svg, .rcp-head .col-ledger svg {
  width: 11px; height: 11px; stroke-width: 1.8;
}
.rcp-head .col-bank .amt, .rcp-head .col-ledger .amt {
  margin-inline-start: auto;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-primary);
  font-weight: 700;
  text-transform: none; letter-spacing: 0;
}
.rcp-head .col-match { text-align: center; }
.rcp-head .col-action { text-align: end; }

/* Section banner inside the table */
.rcp-section {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-7);
  background: var(--surface-sunken);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-2_5xs); font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: .04em;
}
.rcp-section .c {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  padding: 0 var(--s-3); height: 14px;
  display: inline-flex; align-items: center;
  border-radius: var(--r-sm);
  font-size: var(--text-3xs); font-weight: 600;
  letter-spacing: 0; text-transform: none;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.rcp-section .right { margin-inline-start: auto; font-size: var(--text-2_5xs); color: var(--text-tertiary); font-weight: 500; text-transform: none; letter-spacing: 0; }

/* Paired row */
.rcp-row {
  display: grid;
  grid-template-columns: 1fr 64px 1fr 110px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-raised);
  position: relative;
}
.rcp-row:hover { background: var(--n-25); }
.rcp-row::before {
  content: '';
  position: absolute;
  inset-inline-start: 0; top: 0; bottom: 0;
  width: 2px;
}
.rcp-row--matched::before { background: transparent; }
.rcp-row--sugg::before    { background: var(--info); }
.rcp-row--disc::before    { background: var(--warning); }
.rcp-row--unm::before     { background: var(--danger); }
.rcp-row--matched         { opacity: .68; }
.rcp-row--matched:hover   { opacity: 1; }

.rcp-side {
  padding-block: var(--s-5); padding-inline: var(--s-8) var(--s-7);
  display: flex; flex-direction: column; gap: var(--s-1);
  min-width: 0;
  border-inline-end: 1px solid var(--border-subtle);
}
.rcp-side--ledger { border-inline-end: 0; }
.rcp-side-top {
  display: flex; align-items: baseline; gap: var(--s-4);
  font-size: 12px;
}
.rcp-side-date {
  font-size: 11px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  min-width: 50px;
  flex-shrink: 0;
}
.rcp-side-desc {
  color: var(--text-primary);
  font-weight: 500;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1;
}
.rcp-side-amt {
  font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  letter-spacing: -0.008em;
  margin-inline-start: auto;
  white-space: nowrap;
}
.rcp-side-amt.in { color: var(--success); }
.rcp-side-amt.diff { color: var(--warning); }
.rcp-side-ref {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
  padding-inline-start: 58px;
}

.rcp-side-empty {
  padding-block: var(--s-7); padding-inline: var(--s-8) var(--s-7);
  background:
    repeating-linear-gradient(45deg,
      transparent 0 6px,
      var(--surface-sunken) 6px 7px);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  color: var(--text-tertiary);
  font-style: italic;
  border-inline-end: 1px solid var(--border-subtle);
}
.rcp-side--ledger.rcp-side-empty { border-inline-end: 0; }

/* Middle indicator column */
.rcp-mid {
  background: var(--surface-sunken);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: var(--s-3);
  gap: var(--s-1);
  border-inline-end: 1px solid var(--border-subtle);
  border-inline-start: 1px solid var(--border-subtle);
}
.rcp-mid-ic {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
}
.rcp-mid-ic svg { width: 11px; height: 11px; stroke-width: 2.4; }
.rcp-row--matched .rcp-mid-ic { background: var(--success-bg); color: var(--success); }
.rcp-row--sugg    .rcp-mid-ic { background: var(--info-bg);    color: var(--info); }
.rcp-row--disc    .rcp-mid-ic { background: var(--warning-bg); color: var(--warning); }
.rcp-row--unm     .rcp-mid-ic { background: var(--danger-bg);  color: var(--danger); }
.rcp-mid-note {
  font-size: var(--text-3xs);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}
.rcp-row--sugg .rcp-mid-note { color: var(--info); }
.rcp-row--disc .rcp-mid-note { color: var(--warning); }
.rcp-row--unm  .rcp-mid-note { color: var(--danger); }
.rcp-row--matched .rcp-mid-note { color: var(--text-quaternary); }

/* Action cell */
.rcp-act {
  padding: var(--s-4) var(--s-7);
  display: flex; flex-direction: column;
  align-items: stretch; justify-content: center;
  gap: var(--s-2);
}
.rcp-act-status {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  text-align: end;
  color: var(--text-quaternary);
}
.rcp-row--matched .rcp-act-status { color: var(--success); }
.rcp-act-btns { display: flex; gap: var(--s-2); justify-content: flex-end; flex-wrap: wrap; }
.rcp-act-btns .btn { padding: 0 var(--s-4); height: 22px; font-size: 11px; }
.rcp-act-btns .btn svg { width: 11px; height: 11px; stroke-width: 1.8; }

/* Footer reuses .rc-foot2 / btn from earlier */
.rcp-legend {
  display: flex; align-items: center; gap: var(--s-8);
  padding: var(--s-5) var(--s-8);
  background: var(--surface-sunken);
  border-top: 1px solid var(--border-subtle);
  font-size: 11px;
  color: var(--text-tertiary);
}
.rcp-legend .li { display: inline-flex; align-items: center; gap: var(--s-3); }
.rcp-legend .sw { width: 10px; height: 10px; border-radius: 2px; }
.rcp-legend .actions { margin-inline-start: auto; display: flex; gap: var(--s-3); }


/* ═════════════════════════════════════════════════════════════
   AX-EX — Data Table extensions (complex ERP)
   Density · frozen cols · groups · subtotals · agg footer · heatmap
   ═════════════════════════════════════════════════════════════ */

/* Density modes — apply on parent <table class="ax-tbl ax-tbl--compact"> */
.ax-tbl--compact tbody td { height: 26px; padding: 0 var(--s-4); }
.ax-tbl--compact thead th { height: 24px; padding: 0 var(--s-4); }
.ax-tbl--cozy tbody td { height: 36px; padding: 0 var(--s-6); }
.ax-tbl--cozy thead th { height: 32px; padding: 0 var(--s-6); }

/* Frozen columns — sticky left + right */
.ax-tbl-scroll {
  overflow-x: auto;
  overflow-y: visible;
  background: var(--surface-raised);
  position: relative;
}
.ax-tbl-scroll .ax-tbl { min-width: max-content; }

/* Refined scrollbars — replace the chunky native bar with a slim, subtle one */
.ax-tbl-scroll { scrollbar-width: thin; scrollbar-color: var(--border-default) transparent; }
.ax-tbl-scroll::-webkit-scrollbar { width: 12px; height: 12px; }
.ax-tbl-scroll::-webkit-scrollbar-track { background: transparent; }
.ax-tbl-scroll::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.ax-tbl-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-quaternary); background-clip: padding-box; border: 3px solid transparent; }
.ax-tbl-scroll::-webkit-scrollbar-corner { background: transparent; }

.ax-tbl .frz-l {
  position: sticky; inset-inline-start: 0; z-index: 2;
  background: var(--surface-raised);
  box-shadow: 1px 0 0 var(--border-subtle);
}
.ax-tbl thead th.frz-l { background: var(--surface-raised); z-index: 3; }
.ax-tbl tbody tr:hover td.frz-l { background: var(--surface-hover); }
.ax-tbl tbody tr.ax-sel td.frz-l { background: var(--row-selected-bg); }
.ax-tbl tbody tr.ax-sel:hover td.frz-l { background: var(--row-selected-bg-hover); }

.ax-tbl .frz-r {
  position: sticky; inset-inline-end: 0; z-index: 2;
  background: var(--surface-raised);
  box-shadow: -1px 0 0 var(--border-subtle);
  text-align: end;
}
.ax-tbl thead th.frz-r { background: var(--surface-raised); z-index: 3; }
.ax-tbl tbody tr:hover td.frz-r { background: var(--surface-hover); }
.ax-tbl tbody tr.ax-sel td.frz-r { background: var(--row-selected-bg); }
.ax-tbl tbody tr.ax-sel:hover td.frz-r { background: var(--row-selected-bg-hover); }

/* Numeric column alignment */
.ax-tbl td.num, .ax-tbl th.num { text-align: end; font-variant-numeric: tabular-nums; }
.ax-tbl td.num { font-weight: 500; }
.ax-tbl td.num-strong { font-weight: 600; }
.ax-tbl td.num-muted { color: var(--text-tertiary); font-weight: 400; }

/* Group header rows (collapsible) */
.ax-grp {
  background: var(--surface-sunken);
  cursor: pointer;
}
.ax-grp td {
  height: 28px; padding: 0 var(--s-5);
  background: var(--surface-sunken);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky; inset-inline-start: 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.ax-grp:hover td { background: var(--n-75); }
.ax-grp-inner { display: inline-flex; align-items: center; gap: var(--s-3); }
.ax-grp-chev { width: 12px; height: 12px; color: var(--text-tertiary); transition: transform var(--dur-fast); }
.ax-grp-chev svg { width: 12px; height: 12px; stroke-width: 2; }
.ax-grp.collapsed .ax-grp-chev { transform: rotate(-90deg); }
.ax-grp-count {
  font-size: 10px; font-weight: 600;
  padding: 0 var(--s-3); height: 14px;
  display: inline-flex; align-items: center;
  background: var(--surface-active);
  color: var(--text-tertiary);
  border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
}
.ax-grp-agg { color: var(--text-tertiary); font-weight: 500; font-size: 11px; }
.ax-grp-agg b { color: var(--text-primary); font-variant-numeric: tabular-nums; font-weight: 600; margin-inline-start: var(--s-1); }

/* Subtotal row */
.ax-sub td {
  height: 28px;
  background: var(--green-50) !important;
  border-top: 1px solid var(--green-200);
  border-bottom: 1px solid var(--green-200);
  font-weight: 600;
  color: var(--text-brand-strong);
}

/* Aggregate footer */
.ax-tbl tfoot td {
  height: 30px;
  background: var(--surface-sunken);
  border-top: 1px solid var(--border-default);
  border-bottom: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  padding: 0 var(--s-5);
  position: sticky; bottom: 0; z-index: 1;
  white-space: nowrap;
}
.ax-tbl tfoot td.frz-l { background: var(--surface-sunken); }
.ax-tbl tfoot td.frz-r { background: var(--surface-sunken); }
.ax-tbl tfoot td .agg-lbl {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-quaternary);
  margin-inline-start: var(--s-3);
  text-transform: none;
  letter-spacing: 0;
}
.ax-tbl tfoot td.num .agg-lbl { margin-inline-start: var(--s-2); }

/* Heatmap cells — used for margin, score, performance */
.ax-heat {
  display: inline-flex; align-items: center; justify-content: flex-end;
  min-width: 48px; padding: 1px var(--s-3);
  border-radius: var(--r-xs);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.ax-heat--g3 { background: var(--green-100); color: var(--green-700); }
.ax-heat--g2 { background: var(--green-50);  color: var(--green-700); }
.ax-heat--g1 { color: var(--green-700); }
.ax-heat--n  { color: var(--text-tertiary); }
.ax-heat--a1 { color: var(--warning); }
.ax-heat--a2 { background: var(--warning-bg); color: var(--warning); }
.ax-heat--r1 { background: var(--danger-bg);  color: var(--danger); }
.ax-heat--r2 { background: #F5C7CB; color: #8A1F28; }

/* Date cell with overdue / today / upcoming subtle indicators */
.ax-date { display: inline-flex; align-items: center; gap: var(--s-2); }
.ax-date .ax-date-rel { font-size: var(--text-2_5xs); color: var(--text-tertiary); }
.ax-date.overdue { color: var(--danger); font-weight: 500; }
.ax-date.overdue .ax-date-rel { color: var(--danger); }
.ax-date.today { color: var(--warning); font-weight: 500; }
.ax-date.due-soon .ax-date-rel { color: var(--warning); }

/* Priority dot (4.5) — grayscale-survivable: shape, not hue alone.
   The label text (High/Medium/Low) always renders beside the dot in every
   consumer, so meaning never depends on colour. The dot is reinforcement and
   is itself differentiated by FILL STYLE so it survives grayscale / forced
   colours even when seen alone:
     high   = solid          ●
     medium = solid + ring   ◉
     low    = hollow outline  ○
     none   = hollow, faint   ◌
   Dot-only contexts must add an sr-only label (see .sr-only below). */
.ax-prio { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--text-sm); }
.ax-prio-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  box-sizing: border-box; border: 1.5px solid transparent;
}
.ax-prio-dot.high   { background: var(--danger); }
.ax-prio-dot.medium { background: var(--warning); box-shadow: inset 0 0 0 1.5px var(--surface-raised); }
.ax-prio-dot.low    { background: transparent; border-color: var(--info); }
.ax-prio-dot.none   { background: transparent; border-color: var(--n-300); width: 6px; height: 6px; }
/* Forced-colors: keep the shape distinction (system colours flatten hue). */
@media (forced-colors: active) {
  .ax-prio-dot.high   { background: CanvasText; border-color: CanvasText; }
  .ax-prio-dot.medium { background: CanvasText; box-shadow: inset 0 0 0 1.5px Canvas; }
  .ax-prio-dot.low,
  .ax-prio-dot.none   { background: Canvas; border-color: CanvasText; }
}

/* sr-only — visually-hidden companion text for any colour/shape-only signal
   used WITHOUT a visible label (e.g. a dot-only priority cell). (4.5) */
.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;
}

/* Currency cell */
.ax-cur-row { font-variant-numeric: tabular-nums; }
.ax-cur-row .ax-cur-code {
  font-size: var(--text-3xs); color: var(--text-tertiary);
  font-weight: 500;
  margin-inline-end: var(--s-2);
  text-transform: uppercase;
}

/* Hover-revealed row actions */
.ax-tbl tbody tr .ax-row-act {
  opacity: 0;
  display: inline-flex;
  gap: var(--s-1);
  transition: opacity var(--dur-fast);
}
.ax-tbl tbody tr:hover .ax-row-act { opacity: 1; }
.ax-row-act-btn {
  width: 20px; height: 20px;
  border-radius: var(--r-xs);
  display: grid; place-items: center;
  color: var(--text-quaternary);
}
.ax-row-act-btn:hover { background: var(--surface-active); color: var(--text-primary); }
.ax-row-act-btn svg { width: 11px; height: 11px; stroke-width: 1.8; }

/* AI column marker */
.ax-col-ai {
  display: inline-flex; align-items: center;
  height: 14px; padding: 0 var(--s-2);
  margin-inline-start: var(--s-1);
  background: var(--ai-bg); color: var(--ai-fg);
  border-radius: var(--r-xs);
  font-size: var(--text-3xs); font-weight: 700;
  letter-spacing: .04em;
}

/* Sparkline cell */
.ax-spark {
  display: inline-flex; align-items: flex-end;
  gap: 1.5px;
  height: 16px;
}
.ax-spark span {
  width: 3px;
  background: var(--n-200);
  border-radius: 1px;
}
.ax-spark span.up   { background: var(--green-400); }
.ax-spark span.down { background: var(--n-300); }
.ax-spark span.last { background: var(--brand-green); }

/* Tag stack */
.ax-tags { display: inline-flex; gap: var(--s-2); align-items: center; }
.ax-tags .more {
  font-size: 10px; color: var(--text-tertiary);
  background: var(--surface-muted);
  padding: 0 var(--s-3); height: 16px;
  border-radius: var(--r-xs);
  display: inline-flex; align-items: center;
  font-weight: 500;
}

/* Tab views — saved views row */
.ax-views {
  display: flex; align-items: center;
  padding: 0 var(--s-6);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-subtle);
  gap: 1px;
}
.ax-view {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none; border-top: 0; border-inline-start: 0; border-inline-end: 0;
}
.ax-view:hover { color: var(--text-secondary); }
.ax-view.active { color: var(--text-primary); font-weight: 500; border-bottom-color: var(--brand-green); }
.ax-view .c {
  font-size: 10px; font-weight: 600;
  padding: 0 var(--s-3); height: 14px;
  display: inline-flex; align-items: center;
  background: var(--surface-muted); color: var(--text-tertiary);
  border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
}
.ax-view.active .c { background: var(--green-100); color: var(--green-700); }
.ax-views-add {
  margin-inline-start: var(--s-3);
  color: var(--text-tertiary);
  font-size: 12px;
  width: 22px; height: 22px;
  border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
}
.ax-views-add:hover { background: var(--surface-hover); color: var(--text-primary); }
.ax-views-tail {
  margin-inline-start: auto;
  display: flex; align-items: center; gap: var(--s-3);
  font-size: 11px; color: var(--text-tertiary);
}

/* ─────────────────────────────────────────────────────────────
   Toolbar view selector — dropdown trigger in top bar
   ───────────────────────────────────────────────────────────── */
.ax-view-trig {
  display: inline-flex; align-items: center; gap: var(--s-3);
  height: 24px;
  padding: 0 var(--s-2) 0 var(--s-4);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
  position: relative;
}
.ax-view-trig:hover { background: var(--surface-hover); }
.ax-view-trig.open { background: var(--surface-hover); border-color: var(--border-strong); }
.ax-view-trig > svg.ic { width: 11px; height: 11px; stroke-width: 1.8; color: var(--text-tertiary); }
.ax-view-trig > .chev { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-xs); color: var(--text-tertiary); }
.ax-view-trig > .chev svg { width: 10px; height: 10px; stroke-width: 2; }
.ax-view-trig .star {
  width: 12px; height: 12px;
  color: var(--brand-green);
  stroke-width: 2;
  fill: var(--brand-green);
  fill-opacity: .12;
}

.ax-view-pop {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  width: 280px;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  padding: var(--s-2);
  display: none;
}
.ax-view-trig.open + .ax-view-pop { display: block; }

.ax-view-pop-search {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  margin-bottom: var(--s-1);
  border-bottom: 1px solid var(--border-subtle);
}
.ax-view-pop-search svg { width: 11px; height: 11px; stroke-width: 1.8; color: var(--text-tertiary); }
.ax-view-pop-search input {
  border: 0; outline: none; background: transparent;
  width: 100%; padding: var(--s-2) 0;
  font-size: 12px; color: var(--text-primary);
}
.ax-view-pop-search input::placeholder { color: var(--text-quaternary); }

.ax-view-pop-sec {
  font-size: var(--text-3xs); font-weight: 600;
  color: var(--text-quaternary);
  text-transform: uppercase; letter-spacing: .04em;
  padding: var(--s-4) var(--s-4) var(--s-2);
}
.ax-view-pop-item {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  width: 100%;
  background: none;
  border: 0;
  text-align: start;
}
.ax-view-pop-item:hover { background: var(--surface-hover); color: var(--text-primary); }
.ax-view-pop-item.active { background: var(--green-50); color: var(--text-primary); font-weight: 500; }
.ax-view-pop-item > .ic {
  width: 14px; height: 14px; flex-shrink: 0;
  color: var(--text-tertiary);
  stroke-width: 1.8;
}
.ax-view-pop-item.active > .ic { color: var(--brand-green); }
.ax-view-pop-item .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-view-pop-item .c {
  font-size: 10px; color: var(--text-tertiary);
  padding: 0 var(--s-3); height: 14px;
  display: inline-flex; align-items: center;
  background: var(--surface-muted);
  border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.ax-view-pop-item.active .c { background: var(--green-100); color: var(--green-700); }
.ax-view-pop-item .kbd { margin-inline-start: var(--s-2); }
.ax-view-pop-item.tick::after {
  content: '';
  width: 10px; height: 10px;
  background: no-repeat center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A8A56' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 12 9 18 21 6'/%3E%3C/svg%3E");
  margin-inline-start: auto;
}
.ax-view-pop-sep {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--s-2) -4px;
}
.ax-view-pop-foot {
  display: flex; gap: var(--s-2);
  padding: var(--s-2) var(--s-2) var(--s-1);
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--s-1);
}
.ax-view-pop-foot button {
  flex: 1;
  font-size: 11px;
  color: var(--text-secondary);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  background: none;
  display: inline-flex; align-items: center; gap: var(--s-3);
  cursor: pointer;
}
.ax-view-pop-foot button:hover { background: var(--surface-hover); color: var(--text-primary); }
.ax-view-pop-foot button svg { width: 11px; height: 11px; stroke-width: 1.8; }

/* ─────────────────────────────────────────────────────────────
   Footer-row view pills (single-row footer)
   ───────────────────────────────────────────────────────────── */
.ax-foot-pill {
  display: inline-flex; align-items: center; gap: var(--s-3);
  height: 22px;
  padding: 0 var(--s-5);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.ax-foot-pill:hover { background: var(--surface-hover); color: var(--text-primary); }
.ax-foot-pill.active {
  background: var(--green-50);
  color: var(--text-brand-strong);
  font-weight: 600;
}
.ax-foot-pill .c {
  font-size: 10px;
  color: var(--text-quaternary);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.ax-foot-pill.active .c { color: var(--green-700); opacity: .7; }
.ax-foot-pill .star {
  width: 9px; height: 9px;
  stroke-width: 2;
  color: var(--brand-green);
  fill: var(--brand-green);
  fill-opacity: .15;
}
.ax-foot-pill .dirty {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--warning);
}

.ax-foot-pill-add {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  background: transparent;
  border: 1px dashed var(--border-default);
  color: var(--text-tertiary);
  cursor: pointer;
}
.ax-foot-pill-add:hover { color: var(--text-brand); border-color: var(--green-300); border-style: solid; }
.ax-foot-pill-add svg { width: 10px; height: 10px; stroke-width: 2; }

.ax-foot-divider {
  width: 1px;
  height: 16px;
  background: var(--border-subtle);
  margin: 0 var(--s-2);
}

.ax-foot-save {
  display: inline-flex; align-items: center; gap: var(--s-3);
  height: 22px;
  padding: 0 var(--s-5);
  font-size: var(--text-sm);
  font-weight: 500;
  background: var(--color-action);
  color: var(--color-on-action);
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 1px 2px rgba(20,78,50,.16);
}
.ax-foot-save:hover { background: var(--color-action-hover); }
.ax-foot-save svg { width: 10px; height: 10px; stroke-width: 2.2; }
.ax-foot-save[disabled] {
  background: var(--surface-muted);
  color: var(--text-quaternary);
  cursor: default;
  box-shadow: none;
}
.ax-sheets {
  display: flex; align-items: stretch;
  background: var(--surface-sunken);
  border-top: 1px solid var(--border-subtle);
  padding: 0 var(--s-3);
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.ax-sheets::-webkit-scrollbar { display: none; }

.ax-sheet-nav {
  display: inline-flex; align-items: center; gap: 1px;
  padding: var(--s-2) var(--s-1);
  flex-shrink: 0;
}
.ax-sheet-nav button {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-xs);
  color: var(--text-quaternary);
  background: none;
  cursor: pointer;
}
.ax-sheet-nav button:hover { background: var(--surface-hover); color: var(--text-primary); }
.ax-sheet-nav button svg { width: 11px; height: 11px; stroke-width: 1.8; }

.ax-sheet-sep {
  width: 1px;
  margin: var(--s-3) var(--s-2);
  background: var(--border-subtle);
  flex-shrink: 0;
}

.ax-sheet {
  display: inline-flex; align-items: center; gap: var(--s-3);
  height: 24px;
  padding: 0 var(--s-6);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  cursor: pointer;
  white-space: nowrap;
  border-inline-end: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
  margin-top: var(--s-2);
  position: relative;
  flex-shrink: 0;
}
.ax-sheet:first-of-type { border-inline-start: 1px solid var(--border-subtle); }
.ax-sheet:hover { color: var(--text-secondary); background: var(--surface-hover); }
.ax-sheet.active {
  color: var(--text-primary);
  font-weight: 500;
  background: var(--surface-raised);
  border-top: 1.5px solid var(--brand-green);
  border-bottom: 1px solid var(--surface-raised);
  margin-top: var(--s-2);
  margin-bottom: -1px;
  z-index: 1;
  padding: 0 var(--s-7);
  height: 23px;
}
.ax-sheet.active::after {
  content: '';
  position: absolute;
  inset-inline: -1px;
  bottom: -1px;
  height: 1px;
  background: var(--surface-raised);
}
.ax-sheet .star {
  width: 10px; height: 10px;
  color: var(--brand-green);
  stroke-width: 2;
  fill: var(--brand-green);
  fill-opacity: .15;
  flex-shrink: 0;
}
.ax-sheet .c {
  font-size: var(--text-3xs); font-weight: 600;
  padding: 0 var(--s-2); height: 13px;
  display: inline-flex; align-items: center;
  background: var(--surface-muted);
  color: var(--text-tertiary);
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.ax-sheet.active .c { background: var(--green-100); color: var(--green-700); }
.ax-sheet .dirty {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--warning);
  flex-shrink: 0;
}

.ax-sheet-add {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 0 var(--s-5);
  height: 24px;
  margin-top: var(--s-2);
  font-size: 11px;
  color: var(--text-tertiary);
  background: none;
  cursor: pointer;
  border-radius: var(--r-xs);
  flex-shrink: 0;
}
.ax-sheet-add:hover { color: var(--text-brand); background: var(--surface-hover); }
.ax-sheet-add svg { width: 10px; height: 10px; stroke-width: 2; }

.ax-sheets-meta {
  margin-inline-start: auto;
  display: inline-flex; align-items: center; gap: var(--s-4);
  padding: 0 var(--s-5);
  font-size: var(--text-2_5xs); color: var(--text-quaternary);
  flex-shrink: 0;
}
.ax-sheets-meta .kbd { font-size: var(--text-3xs); }


/* ═════════════════════════════════════════════════════════════
   Folded from audit-fixes.css — bucket A (T3a · Wave 4)
   ─────────────────────────────────────────────────────────────
   The px / type / radius / stroke snapping that used to override
   these composites from audit-fixes.css is now applied at each
   selector's SOURCE above (RTL prerequisite met, Wave 3). Two
   cross-cutting snaps have no single source rule to edit, so they
   are folded here verbatim — behaviour-identical — letting
   audit-fixes.css shrink toward deletion. CI guards that file's
   line count only ever decreases (docs/packaging.md §8).
   The dead `.tm-c-ic svg` stroke override and the no-op
   `.at-dot svg` / `.rc-it-ic svg` (already stroke-width:2) were
   dropped outright.
   ═════════════════════════════════════════════════════════════ */

/* Tabular numerals across composite meta / labels / numeric cells. */
.ax-tb, .ax-foot, .ax-foot-meta, .ax-chips, .ax-bulk,
.at-event, .at-time, .at-meta, .at-change, .at-changes, .at-feed-day,
.cf-pay-row, .cf-axis, .cf-legend, .cf-stat-s, .cf-stat-k, .cf-ai-h, .cf-ai-b,
.tm-doc-top, .tm-doc-meta, .tm-foot, .tm-stat-k, .tm-stat-meta, .tm-col-title, .tm-col-sub,
.si-q-ago, .si-q-head, .si-q-sub, .si-rec-id, .si-progress-meta, .si-section, .si-sec,
.si-block-h, .si-why-row, .si-stat-k, .si-stat-v,
.fd-id, .fd-field, .fd-block-h, .fd-block-b, .fd-line,
.kb-card-r, .kb-col-head, .kb-card-n,
.cal-head, .cal-num, .cal-ev, .ag-label, .ag-pct,
.rc-it-cat, .rc-it-title, .rc-it-sub, .rc-hero-stat-k, .rcp-stat-k, .pv-stat-k,
.pv-tbl, .pv-tbl thead th, .pv-tbl tbody td {
  font-variant-numeric: tabular-nums;
}

/* Avatar size lock — xs avatars render at 18px in dense composite rows. */
.ax-person .av,
.kb-card .av,
.at-stat-row .av,
.fd-fv .av,
.si-submitter .av { width: 18px; height: 18px; font-size: 9px; }


/* ═════════════════════════════════════════════════════════════
   RTL overrides — Wave 3 (Procurement · logical-property pass)
   ─────────────────────────────────────────────────────────────
   Everything above uses logical properties and is direction-clean
   on its own. The handful of declarations below have NO logical
   equivalent — box-shadow offset-x and inset accent rails — so they
   are mirrored explicitly under [dir="rtl"]. Keep this list short:
   if you reach for a new physical prop in a composite, prefer a
   logical one first (see docs/foundations.md → RTL cheat-sheet).
   ═════════════════════════════════════════════════════════════ */

/* Row-selection accent rail — leading inline edge */
[dir="rtl"] .ax-tbl tbody tr.ax-sel td:first-of-type { box-shadow: inset -2px 0 0 var(--brand-green); }
[dir="rtl"] .si-q--active { box-shadow: inset -2px 0 0 var(--brand-green); }

/* Frozen-column hairline dividers — flip the shadow offset-x */
[dir="rtl"] .ax-tbl .frz-l { box-shadow: -1px 0 0 var(--border-subtle); }
[dir="rtl"] .ax-tbl .frz-r { box-shadow: 1px 0 0 var(--border-subtle); }