/* D3 — Invoice Reconciler CSS.
   Lifted verbatim (with light cleanup) from the inline <style> block in
   design/source-2026-05-12/Invoice Reconciler.html. Money is the
   protagonist: tabular numerals are mandatory, sign is communicated by
   colour + column + parens, never one channel alone. */

:root {
  --money-fg:      var(--text-1);
  --money-zero-fg: var(--text-4);
  --over-fg:       var(--status-fail-fg);
  --over-bg:       var(--status-fail-bg);
  --over-bd:       var(--status-fail-bd);
  --under-fg:      var(--status-info-fg);
  --under-bg:      var(--status-info-bg);
  --under-bd:      var(--status-info-bd);
  --exact-fg:      var(--status-pass-fg);
}
[data-theme="dark"] {
  --money-fg:      var(--text-1);
  --money-zero-fg: var(--text-4);
}

.money {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  color: var(--money-fg);
  white-space: nowrap;
}
.money.zero  { color: var(--money-zero-fg); }
.money.over  { color: var(--over-fg); }
.money.under { color: var(--under-fg); }
.money.exact { color: var(--exact-fg); }
.money .sym  { font-weight: 400; opacity: 0.55; margin-right: 1px; }
.money .paren { opacity: 0.7; }

/* Two-column variance ledger — only one column is populated per row.
   This is the strongest possible visual differentiation: sign communicated
   by COLUMN POSITION, not just colour. Standard accounting convention. */
.var-cell {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
  white-space: nowrap;
  position: relative;
}
.var-cell.over  { color: var(--over-fg);  font-weight: 600; }
.var-cell.under { color: var(--under-fg); font-weight: 600; }
.var-cell.empty { color: var(--text-4); }

/* Row-level emphasis when |Δ$| > threshold */
tr.over-threshold td.var-cell.over  { background: var(--over-bg); }
tr.over-threshold td.var-cell.under { background: var(--under-bg); }
tr.over-threshold td:first-child    { box-shadow: inset 3px 0 0 currentColor; }
tr.over-threshold.over-row  td:first-child { color: var(--over-fg); }
tr.over-threshold.under-row td:first-child { color: var(--under-fg); }

/* Variance group header */
th.var-group {
  text-align: center !important;
  border-left: 1px solid var(--border-strong);
}
th.var-group + th.var-group { border-left: none; }
td.var-cell.over { border-left: 1px solid var(--border-default); }

/* Threshold chip — inline editable indicator */
.threshold-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-2);
  font-family: var(--font-sans);
}
.threshold-chip .label {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}
.threshold-chip .value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--text-1);
  font-weight: 600;
  background: var(--bg-surface-sunk);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  padding: 2px 10px;
}

/* Ledger strip — 5-column dual-sided summary at the top of the report */
.ledger-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr 1.2fr 1fr;
  gap: 1px;
  background: var(--border-default);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 16px;
}
.ledger-strip .ledger-kpi {
  background: var(--bg-surface);
  padding: 14px 18px;
  position: relative;
}
.ledger-strip .ledger-kpi .t-label {
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ledger-strip .ledger-kpi .value {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums lining-nums;
  margin-bottom: 4px;
}
.ledger-strip .ledger-kpi.accent-over .t-label,
.ledger-strip .ledger-kpi.accent-over .value { color: var(--over-fg); }
.ledger-strip .ledger-kpi.accent-under .t-label,
.ledger-strip .ledger-kpi.accent-under .value { color: var(--under-fg); }
.ledger-strip .ledger-kpi.accent-over::before,
.ledger-strip .ledger-kpi.accent-under::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}
.ledger-strip .ledger-kpi.accent-over::before  { background: var(--over-fg); }
.ledger-strip .ledger-kpi.accent-under::before { background: var(--under-fg); }

@media (max-width: 980px) {
  .ledger-strip { grid-template-columns: 1fr 1fr; }
}

/* Headline variance block — used on the variance-detail drill-down */
.headline-variance {
  border-radius: 6px;
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 1.2fr 1.2fr auto 1.5fr;
  gap: 32px;
  align-items: center;
  border: 1px solid var(--border-default);
  background: var(--bg-surface-sunk);
}
.headline-variance.over  { background: var(--over-bg);  border-color: var(--over-bd); }
.headline-variance.under { background: var(--under-bg); border-color: var(--under-bd); }
.headline-variance .eq   { font-size: 22px; color: var(--text-4); font-weight: 400; text-align: center; }
.headline-variance .big {
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.headline-variance .compare-value {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}