/* ============================================================
   Helm composite components — v0
   Depends on tokens.css + primitives.css.

   Product-specific components built from primitives, shaped against
   TA's substrate (specs/2026-05-28-substrate.md, 6 event families:
   tx/contract/letter/deadline/agent/funder) + Otto's case-file-v1
   spec (specs/2026-05-28-case-file-v1.md, layout LOCKED 2026-05-28).

   These were prototyped in demos/composites-sketches.html +
   demos/case-file-page-sketch.html and extracted here once Otto
   locked the case-file layout. The visual shapes are stable; data
   binding (which event payload field maps to which slot) lands when
   TA's case_state projection ships in week 2.

   Naming: descriptive-hyphenated for composites (case-file-event,
   deadline-card, delta, funder-badge). Page-level patterns (.cf-*
   case-file layout) live in patterns.css — week-3 work.
   ============================================================ */

/* ============================================================
   Case-file event card + timeline
   Generic discriminated shape for all 6 event families. Vertically
   stacked into a chronology. Discriminated by the .event-kind label,
   not a background-color stripe.
   ============================================================ */

.timeline {
  position: relative;
  padding-left: var(--space-8);
  border-left: var(--bw-hairline) solid var(--color-rule);
}

.event {
  position: relative;
  padding: var(--space-6) 0 var(--space-6) var(--space-4);
  border-bottom: var(--bw-hairline) solid var(--color-rule);
}
.event:first-child { padding-top: 0; }
.event:last-child  { border-bottom: 0; }

.event::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-8) - 4px);
  top: var(--space-6);
  width: 7px;
  height: 7px;
  background: var(--color-ink);
}
.event:first-child::before { top: 0; }

.event-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.event-time {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--color-muted);
  letter-spacing: 0;
}
.event-kind {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--color-muted);
}
.event-actor {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--color-subtle);
}
.event-actor::before { content: "by "; }

.event-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.event-body p { margin: 0; }
.event-body p + p { margin-top: var(--space-2); }

.event-amount {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-medium);
}
.event-amount.warning { color: var(--color-warning); }

/* Kind-specific accent: left dot color only, no other chrome.
   warning = deadline.missed / tx.marked_disputed / destructive
   funder  = funder.* family (citation-blue dot) */
.event--warning::before  { background: var(--color-warning); }
.event--warning .event-kind { color: var(--color-warning); }
.event--funder::before   { background: var(--color-citation); }
.event--funder .event-kind { color: var(--color-citation); }

/* ============================================================
   Deadline card
   For deadline.* events. "X days until" is the load-bearing element.
   --urgent variant (≤7 days, Designer rule) flips border to warning.
   ============================================================ */

.deadline-card {
  padding: var(--space-5) var(--space-6);
  border: var(--bw-hairline) solid var(--color-ink);
  background: var(--color-paper);
}
.deadline-card--urgent {
  border-color: var(--color-warning);
  border-left-width: var(--bw-rule);
}

.deadline-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}
.deadline-days {
  font-family: var(--font-mono);
  font-size: 36px;
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  line-height: 1;
  letter-spacing: -0.02em;
}
.deadline-card--urgent .deadline-days { color: var(--color-warning); }
.deadline-days-suffix {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--color-muted);
}
.deadline-date {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--color-muted);
}
.deadline-title {
  font-size: var(--fs-lead);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-tight);
  margin: var(--space-3) 0 var(--space-2);
}
.deadline-consequence {
  font-size: var(--fs-body);
  color: var(--color-muted);
  margin-bottom: var(--space-3);
}

/* ============================================================
   Confidence-band display (delta)
   The cardinal rule made visible: NEVER a single dollar number.
   Always low / mid / high with applied clauses + ambiguities.
   For compute_*@v* tool outputs only.
   ============================================================ */

.delta {
  padding: var(--space-6);
  border: var(--bw-rule) solid var(--color-ink);
  background: var(--color-paper);
}
.delta-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-5);
  gap: var(--space-4);
}
.delta-title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-tight);
  margin: 0;
}
.delta-method {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--color-muted);
}
.delta-band {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  align-items: end;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.delta-band-col {
  text-align: center;
  padding: var(--space-4) var(--space-3);
  border-top: var(--bw-hairline) solid var(--color-rule);
}
.delta-band-col--mid {
  border-top: var(--bw-rule) solid var(--color-ink);
}
.delta-band-label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-2);
}
.delta-band-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  letter-spacing: -0.02em;
}
.delta-band-col--mid .delta-band-value {
  font-size: var(--fs-h2);
}
.delta-clauses,
.delta-ambiguities {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--bw-hairline) solid var(--color-rule);
}
.delta-section-label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-2);
}

/* ============================================================
   Funder behavior badge
   Per Louie's funder.* family. Inline-typographic chip surfacing
   aggregated cross-customer funder patterns. Citation-blue (these
   are leverage facts, kin to citations). Distinct from .badge.
   ============================================================ */

.funder-badge {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: var(--bw-hairline) solid var(--color-citation);
  color: var(--color-citation);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
}
.funder-badge-count {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
}
.funder-badge-count::before { content: "\00d7"; opacity: 0.6; } /* × */

/* ============================================================
   Debit ledger — the evidence table
   Renders compute_letter_evidence_pack@v1.debits[]. One row per
   observed debit. Builds on the primitives `table` (legal-style,
   column rules, no zebra). Rows classified above_reconciled_rate
   are the leverage ("the teeth"): they carry a warning left-rule +
   warning classification label + warning delta cell — accent, not
   fill, to hold the editorial register. Each row cites its
   source event (source_event_id) so every line traces to the log.
   ============================================================ */

.ledger { width: 100%; }

/* classification label (above_reconciled_rate | at_reconciled_rate | unknown_baseline) */
.ledger-class {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
}

/* the teeth: above-reconciled-rate rows */
.ledger tr.over td:first-child { border-left: var(--bw-rule) solid var(--color-warning); }
.ledger tr.over .ledger-class { color: var(--color-warning); font-weight: var(--fw-medium); }
.ledger td.over { color: var(--color-warning); }   /* the per-row delta-vs-reconciled cell */

/* source-event citation — the "cite the record" affordance (kin to .cite) */
.ledger-src {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--color-citation);
  text-decoration: none;
}
.ledger-src::before { content: "#"; opacity: 0.6; }

/* totals / overcharge-to-date row: a strong rule above, like a sum line */
.ledger tfoot td {
  border-top: var(--bw-rule) solid var(--color-ink);
  font-weight: var(--fw-semibold);
}

/* ============================================================
   Print
   All composites print as legal-exhibit content. The timeline
   left-rule + dots survive Paged.js. Funder badges keep their
   border (they're evidence, not decoration — unlike .icon). The
   ledger's over-row warning rule prints (it's the evidence).
   ============================================================ */

@media print {
  .delta,
  .deadline-card {
    break-inside: avoid;
  }
  .event {
    break-inside: avoid;
  }
  .ledger tr { break-inside: avoid; }
}