/* ============================================================
   Helm page patterns — v0  (Layer 4)
   Depends on tokens.css + primitives.css.

   Page-level layout classes for the case-file view, formalized from
   demos/case-file-page-sketch.html once Otto locked the case-file
   layout (specs/2026-05-28-case-file-v1.md, v2 — thesis narrowing).

   Scope boundary:
   - This file holds PAGE SCAFFOLDING only (the .cf-* case-file shell,
     the 2-column grid, the card chrome, and the Card 2 deadline-radar
     / Card 5 proposed-actions list patterns that exist only at page
     level).
   - It does NOT redefine composites. Card 3's timeline renders through
     .timeline + .event (composites.css); Card 4's confidence band
     renders through .delta (composites.css) — the cardinal-rule
     component. Do not introduce a second band/timeline here.

   Card map (Otto's locked 8-card layout):
     1 top-line status  → .cf-headline + .cf-status*
     2 deadline radar   → .cf-deadline-row*          (page pattern, here)
     3 timeline         → .timeline + .event         (composites.css)
     4 dollar picture   → .delta                     (composites.css)
     5 proposed actions → .cf-action*                (page pattern, here)
     6 funder dossier   → .cf-card + .funder-badge
     7 reconciliation-request history → .cf-card + list
     8 clean-record snapshot          → .cf-card + list
   ============================================================ */

/* ============================================================
   Page shell + Card 1 top-line status (page header, no card chrome)
   ============================================================ */

.cf-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-8) var(--page-pad) var(--space-20);
}

.cf-headline {
  padding-bottom: var(--space-6);
  border-bottom: var(--bw-rule) solid var(--color-ink);
  margin-bottom: var(--space-10);
}
.cf-funder-line {
  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);
}
.cf-status {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}
.cf-status-label {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-tight);
}

/* Status indicator = text label + a small DESATURATED filled circle.
   Never an emoji (editorial/legal-brief register, locked 2026-05-27).
   The dot modifier maps to case_state.status (Otto's case-file-v1 §1):
     --green  on-track
     --yellow approaching-deadline · overcharge-detected
     --red    lapsed-recovering · lapsed-defaulted
   The hexes are intentionally muted (not pure RGB) to read as ink, not
   alert UI. If these colors get reused outside the status dot, promote
   them to tokens.json first. */
.cf-status-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: 1px;
  margin-right: var(--space-2);
  border-radius: 50%;
}
.cf-status-dot--green  { background: #2D5016; }
.cf-status-dot--yellow { background: #8B6914; }
.cf-status-dot--red    { background: var(--color-warning); }
.cf-status-next {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  color: var(--color-ink);
}

/* Sustained-lapse signal ← reconciliation.<funder>.lapsed_cycle_count.
   Render only when >= 1. The thesis-critical trajectory indicator: how many
   consecutive reconciliation cycles have been missed without recovery.
   Tracked-caps (in register, not a notification badge). --alert at >= 2,
   which is the exited-to-collections boundary (pending Louie's ratify). */
.cf-status-lapsed {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--color-muted);
  padding-left: var(--space-3);
  border-left: var(--bw-hairline) solid var(--color-rule);
}
.cf-status-lapsed--alert {
  color: var(--color-warning);
  font-weight: var(--fw-medium);
  border-left-color: var(--color-warning);
}

/* ============================================================
   Two-column layout: primary stack (left) + supporting rail (right).
   Desktop-first at v1 (the case file is a desk surface); collapses to
   a single column below 980px with the rail flowing to the bottom.
   ============================================================ */

.cf-cols {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-10);
}
@media (max-width: 980px) {
  .cf-cols { grid-template-columns: 1fr; }
}
.cf-primary { display: flex; flex-direction: column; gap: var(--space-10); }
.cf-rail    { display: flex; flex-direction: column; gap: var(--space-8); }

/* ============================================================
   Shared section header (used by every card)
   ============================================================ */

.cf-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  gap: var(--space-3);
}
.cf-section-head h2 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-tight);
  margin: 0;
}
.cf-section-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--color-muted);
}

/* ============================================================
   Card shell — hairline border, no shadow
   --strong: promote to a full ink rule (used by the Card 4 dollar
   picture to carry emphasis without color, per the cardinal rule).
   ============================================================ */

.cf-card {
  padding: var(--space-5) var(--space-6);
  border: var(--bw-hairline) solid var(--color-rule);
  background: var(--color-paper);
}
.cf-card--strong { border: var(--bw-rule) solid var(--color-ink); }

/* ============================================================
   Card 2 — deadline radar
   A compact stacked list of upcoming deadlines (distinct from the
   standalone .deadline-card composite). "N days" is load-bearing.
   ============================================================ */

.cf-deadline-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-5);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-bottom: var(--bw-hairline) solid var(--color-rule);
}
.cf-deadline-row:last-child { border-bottom: 0; }
.cf-deadline-days {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: -0.02em;
}
.cf-deadline-days.warn { color: var(--color-warning); }
.cf-deadline-meta { font-size: var(--fs-body); }
.cf-deadline-meta-title { font-weight: var(--fw-medium); }
.cf-deadline-meta-sub {
  font-size: var(--fs-caption);
  color: var(--color-muted);
  margin-top: 2px;
}
.cf-deadline-action {
  font-size: var(--fs-caption);
  white-space: nowrap;
}

/* ============================================================
   Card 3 — timeline filter chips
   The timeline itself is the .timeline + .event composite; these are
   the page-level filter controls above it.
   ============================================================ */

.cf-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.cf-filter-chip {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--color-muted);
  padding: var(--space-1) var(--space-3);
  border: var(--bw-hairline) solid var(--color-rule);
  cursor: pointer;
}
.cf-filter-chip[aria-pressed="true"] {
  color: var(--color-ink);
  border-color: var(--color-ink);
}

/* ============================================================
   Card 5 — agent proposed actions (capped at 3 per Otto's spec)
   ============================================================ */

.cf-action {
  padding: var(--space-4) 0;
  border-bottom: var(--bw-hairline) solid var(--color-rule);
}
.cf-action:last-child { border-bottom: 0; }
.cf-action-title {
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-1);
}
.cf-action-why {
  font-size: var(--fs-small);
  color: var(--color-muted);
  margin-bottom: var(--space-3);
}
.cf-action-impact {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--color-muted);
  margin-bottom: var(--space-3);
}
.cf-action-row {
  display: flex;
  gap: var(--space-3);
}

/* ============================================================
   Right rail — compact card variants (Cards 6/7/8)
   ============================================================ */

.cf-rail .cf-card { padding: var(--space-4) var(--space-5); }
.cf-rail h3 {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-2);
}
.cf-rail-meta {
  font-size: var(--fs-caption);
  color: var(--color-muted);
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: var(--bw-hairline) dotted var(--color-rule);
}

/* ============================================================
   Print — the case file IS the legal exhibit (Paged.js + Chromium).
   Page @page rules + font/citation overrides live in tokens.css; the
   composites carry their own break-inside rules. Here we collapse the
   two-column grid to a single flow and keep cards from splitting.
   ============================================================ */

@media print {
  .cf-cols { grid-template-columns: 1fr; gap: var(--space-8); }
  .cf-card,
  .cf-deadline-row,
  .cf-action { break-inside: avoid; }
  .cf-filter-row { display: none; }  /* interactive chrome, not exhibit content */
}