/*
 * Bill reconciliation card — sits between the bill details panel and
 * the line items section on `bills/show`. Surfaces whether the sum of
 * `bill_lines.amount_cents` matches `bill.gross_amount` within the
 * 1-cent drift threshold (the same invariant `apply_lines!` enforces
 * at extraction time).
 *
 * Two visual states, named by the CEO (2026-05-12) for this surface:
 *   --balanced → `green-300` background  (reconciled within 1¢)
 *   --drifted  → `yellow-300` background (more than 1¢ off)
 *
 * The CEO is the design system author; these specific colours were
 * authorized for this specific card. Do not generalize either token
 * into a state-indicator alias without re-consulting.
 */

@layer components {
  .bill-reconciliation {
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
  }

  .bill-reconciliation--balanced {
    background: var(--color-green-300);
  }

  .bill-reconciliation--drifted {
    background: var(--color-yellow-300);
  }

  .bill-reconciliation__title {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-heading);
    margin: 0 0 0.5rem;
  }

  .bill-reconciliation__figures {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0;
  }

  .bill-reconciliation__figure {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  .bill-reconciliation__figure dt {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-body);
  }

  .bill-reconciliation__figure dd {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-heading);
    margin: 0;
  }
}