/* ProofReadout — the homepage proof beat's real readout (S83 dark single-accent).
 * ONE anonymized engine readout per view: the result + the indictment held above
 * the fold (the hook), the reasoning WITHHELD and revealed on scroll via the
 * foundation .reveal primitive (reuse, not a parallel mechanic — foundation-
 * motion.css:127-137). Lime stays scarce: the single kicker tag is the only
 * accent; the verdict figure earns weight by SCALE, not hue (the ProofVignette
 * doctrine it replaces). data-signal-zone feeds the live-signal dwell, same as
 * the vignettes before it. Honesty: real engine output, company anonymized — no
 * named customer named or implied.
 * Canonical: components/primitives/ProofReadout/ProofReadout.css */

.proof-readout {
  /* Frame aligns its left edge with .beat__inner (the eyebrow + title above) so the
   * readout reads left, like every other beat — the prose inside is capped at
   * --measure, never the centered-column feel that fights the page's editorial voice. */
  max-width: var(--content-max);
  margin: 0 auto;
  padding-block: var(--space-section);
}

/* ── Lime kicker — the SINGLE accent in the readout ─────────────────────────── */
.proof-readout__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0 0 var(--space-lg);
  color: var(--lime);
  font-family: "JetBrains Mono", monospace;
  font-size: var(--fs-mono-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.proof-readout__tag::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--lime);
  display: inline-block;
}

/* ── HOOK — the result + the indictment (ALWAYS visible; what's withheld is below) */
.proof-readout__verdict {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0;
}
.proof-readout__layer {
  font-family: "JetBrains Mono", monospace;
  font-size: var(--fs-subhead);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-2);
}
.proof-readout__score {
  font-family: "JetBrains Mono", monospace;
  font-size: var(--fs-display);          /* the datum earns scale, not hue */
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  font-weight: 700;
  color: var(--text);
}
.proof-readout__scale {
  font-family: "JetBrains Mono", monospace;
  font-size: var(--fs-subhead);
  font-weight: 700;
  color: var(--text-3);
}
.proof-readout__against {
  margin: var(--space-2xs) 0 0;
  max-width: var(--measure);
  font-family: "JetBrains Mono", monospace;
  font-size: var(--fs-mono-label);
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.proof-readout__killer {
  margin: var(--space-lg) 0 0;
  max-width: var(--measure);
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.5rem);   /* ~24px@375 → 40px desktop — punchy, reads as a sentence */
  line-height: 1.2;
  letter-spacing: var(--tracking-display);
  font-weight: 600;
  color: var(--text);
  text-wrap: balance;
}

/* ── REASONING — withheld → revealed on scroll. Two staggered .reveal blocks (the
 *    pull-open): the taste read rises first (--soft, gentler 1rem), then the
 *    pattern (base 1.75rem). The hairline is the gate where the withheld reasoning
 *    begins. Motion is pure CSS scroll-timeline (.reveal); reduced-motion / no
 *    scroll-timeline support → blocks render fully present at rest. ───────────── */
.proof-readout__reasoning {
  max-width: var(--measure);             /* divider + prose share the reading column */
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);                  /* generous gap → the two blocks rise distinctly, conducted */
}
.proof-readout__line {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--fs-subhead);
  line-height: var(--lh-subhead);
  color: var(--text-2);
}
.proof-readout__beat {
  display: block;
  margin-bottom: var(--space-2xs);
  font-family: "JetBrains Mono", monospace;
  font-size: var(--fs-mono-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-3);                  /* dim mono kicker — keeps lime scarce (tag only) */
}

/* ── HANDOFF — into the funnel (a real anchor, never a button) ──────────────── */
.proof-readout__bridge {
  margin: var(--space-xl) 0 0;
  max-width: var(--measure);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-3);
}
.proof-readout__cta {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--lime);
  padding-bottom: 1px;
  /* time-based transition echoes the forge tempo via the SHARED global tokens */
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.proof-readout__cta:hover,
.proof-readout__cta:focus-visible {
  color: var(--lime);
}