/* The read-page watermark (Daniel 2026-07-05): a light diagonal wordmark OVER
   the page, like the PDF's. It must survive the room cards' own backgrounds —
   the old z-index:-1 version sat BEHIND them and was invisible — so it paints
   above all content at a low-alpha gold that never competes with body copy.
   pointer-events:none keeps every click passing through; fixed position keeps
   it present at any scroll depth. Hidden for print (the PDF carries its own). */
body[data-view="read"]::after {
  content: "The Read Before";
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  transform: rotate(-28deg);
  font-family: var(--serif);
  font-variant: small-caps;
  font-size: clamp(48px, 9vw, 130px);
  font-weight: var(--fw-bold);
  letter-spacing: 0.28em;
  white-space: nowrap;
  text-align: center;
  color: rgba(168, 132, 44, 0.07);
  pointer-events: none;
  user-select: none;
  z-index: 40;
}

/* ---------- Report ---------- */

.report {
  display: grid;
  gap: 28px;
}

.report-body[data-layout="dossier"] {
  display: grid;
  gap: clamp(30px, 4vw, 48px);
}

/* Read-section anchors clear both sticky bars (.app-header + .read-header). */
.report-section {
  /* Match the one stack offset the page already uses
     (html scroll-padding-top:132px / 104px@560). */
  scroll-margin-top: 132px;
}

/* ---------- The walk: slot cards ---------- */

.gate-card {
  border-top: 0;
}

.gate-card:first-of-type {
  border-top: 2px solid var(--border-strong);
}

.gate-card:last-of-type {
  border-bottom: 2px solid var(--border-strong);
}

.gate-card {
  background: transparent;
  scroll-margin-top: 112px;
}

.phase-card-head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 18px 16px;
  position: relative;
}

/* Role and craft-score slugs: bigger + bold +
   inked so the shift in perspective is impossible to miss (Dan V2 cosmetic).
   Scoped to the phase head so shared .cl-label captions elsewhere stay quiet. */
.phase-card-head .cl-label {
  color: var(--ink);
  font-size: clamp(0.88rem, 1.35vw, 1rem);
  font-weight: var(--fw-bold);
}

/* The Attachments talent band (Dan UX #10, DECIDED): header chrome beside the
   role slug — the band is SHOWN here and never spoken in the room's prose, so
   gold sets it apart from the perspective label it sits next to. */
.phase-card-head .cl-label.talent-band {
  color: var(--gold);
}

.phase-card-head .cl-label.craft-score {
  color: var(--muted);
}

.phase-card-body {
  display: grid;
  gap: clamp(18px, 2.5vw, 28px);
  padding: 10px clamp(18px, 3vw, 34px) clamp(42px, 6vw, 68px);
}

.gate-card .gate-number {
  align-self: baseline;
}

/* An open phase's hung numeral firms to ink (it was gold — gold never paints text
   on paper). The reader's place in the walk reads as ink weight, not a gold tint. */
.gate-card .gate-number {
  color: var(--ink);
}

.gate-card .gate-name {
  align-self: baseline;
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--fs-h3);
  font-weight: var(--fw-reg);
}

.gate-card.locked {
  opacity: 0.82;
}

/* C1: the phase verdict is the headline — the kit stamp (.cl-stamp[data-disposition])
   landing at the top of the phase read. The stamp is a <p> here, so this only gives
   it block breathing room above the score line; size/skew/mobile-upright are the
   kit's (no bespoke verdict-stamp wrapper, no type re-declared). */
.gate-card .cl-stamp {
  margin: 6px 0 26px;
}

/* On narrow screens the phase name gets the full column; the status chip drops below it. */
@media (max-width: 560px) {
  /* The sticky bars shrink at this width — match the page's 104px stack offset. */
  .report-section {
    scroll-margin-top: 104px;
  }
  .phase-card-head {
    column-gap: 12px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
  }
}

.read-markdown {
  --v1-read-measure: 76ch;
  display: grid;
  gap: clamp(22px, 3vw, 34px);
  max-width: none;
  width: 100%;
}

.read-markdown > .cl-surface {
  display: grid;
  gap: clamp(14px, 2vw, 22px);
  padding: clamp(18px, 3vw, 30px);
}

.read-markdown > .cl-surface[data-depth="3"],
.read-markdown > .cl-surface[data-depth="4"] {
  background: transparent;
  border-left-color: var(--border);
  padding-bottom: clamp(12px, 2vw, 20px);
  padding-top: clamp(12px, 2vw, 20px);
}

.read-markdown .cl-heading {
  max-width: var(--v1-read-measure);
}

.read-markdown .cl-heading[data-depth="1"] {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-1);
}

.read-markdown .cl-heading[data-depth="2"] {
  font-size: var(--fs-body-lg);
  margin-bottom: var(--space-1);
}

.read-markdown .cl-heading[data-depth="3"] {
  color: var(--ink);
  font-size: var(--fs-body);
  margin-top: var(--space-1);
}

.read-markdown .cl-heading[data-depth="4"] {
  color: var(--muted);
  font-family: var(--brand);
  font-size: var(--fs-slug);
  letter-spacing: 0.08em;
  line-height: 1.3;
  margin-top: var(--space-2);
  text-transform: uppercase;
}

.read-markdown .cl-text {
  font-size: var(--fs-body-lg);
  line-height: 1.72;
  max-width: var(--v1-read-measure);
}

.phase-card-body > .read-markdown {
  gap: clamp(24px, 3vw, 38px);
}

.phase-card-body > .read-markdown > .cl-surface {
  border-left-color: var(--border-strong);
}

.read-markdown .cl-list {
  gap: var(--space-2);
  list-style: disc;
  max-width: var(--v1-read-measure);
  padding-left: var(--space-5);
}

.read-markdown ol.cl-list {
  list-style: decimal;
}

.read-markdown .cl-list > li {
  color: var(--body);
  font-family: var(--serif);
  line-height: 1.68;
  padding-left: var(--space-1);
}

.read-markdown .cl-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-collapse: separate;
  border-radius: var(--radius);
  border-spacing: 0;
  display: table;
  margin: var(--space-2) 0 0;
  overflow: hidden;
}

.read-markdown .cl-table th,
.read-markdown .cl-table td {
  min-width: 0;
  padding: var(--space-3);
}

.read-markdown .cl-table th {
  background: color-mix(in srgb, var(--surface) 72%, var(--gold-wash) 28%);
  border-bottom: 1px solid var(--border-strong);
}

.read-markdown .cl-table td {
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

.read-markdown .cl-table td:last-child,
.read-markdown .cl-table th:last-child {
  border-right: 0;
}

@media (max-width: 720px) {
  .read-markdown {
    max-width: none;
  }

  .read-markdown .cl-table {
    display: block;
  }

  .read-markdown .cl-table thead {
    display: none;
  }

  .read-markdown .cl-table tbody,
  .read-markdown .cl-table tr,
  .read-markdown .cl-table td {
    display: block;
    width: 100%;
  }

  .read-markdown .cl-table tr {
    border-bottom: 1px solid var(--border-strong);
    padding: var(--space-2) 0;
  }

  .read-markdown .cl-table tr:last-child {
    border-bottom: 0;
  }

  .read-markdown .cl-table td {
    border: 0;
    padding: var(--space-1) var(--space-3);
  }
}

/* Phase number as a hung mono drop-figure — the rail reads like a script's scene index. */
.gate-number {
  align-items: start;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--faint);
  display: block;
  font-family: var(--brand);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  grid-row: span 3;
  height: auto;
  justify-content: start;
  line-height: 1;
  width: auto;
}

/* Shared mono score/registration line. report-market.js + upload-intake.js emit
   this (some as a bare <p>, some as a .cl-text co-class), so it keeps the full mono
   role here; the read's gate/plan rows ride it as a .cl-text co-class. */
.score-line {
  color: var(--faint);
  font-family: var(--brand);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  margin: 0 0 10px;
}

/* ---------- Decision box ---------- */

.decision-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* ---------- Read-v2 view chrome (read/read-view.js) ----------
   The projection renders as one document into #read-root: header -> Producer
   close once complete -> revealed Room cards -> the one frontier control
   (nothing below it) -> closing actions -> proofread. */

/* The read header block: format eyebrow, title, then the payload's distinct
   declared-genre / engine-lane / declared-budget facts. */
.read-head-meta { align-items: baseline; color: var(--muted); }
.read-head-meta .cl-text { margin: 0; }

.read-producer-summary {
  border-bottom: 2px solid var(--border-strong);
  display: grid;
  gap: clamp(18px, 2.5vw, 28px);
  padding-bottom: clamp(28px, 4vw, 46px);
}

/* THE CLOSING BEAT (#read-final) — the one section after the last revealed room:
   eyebrow (the room that made the call) + "The final call" heading, the BIG
   terminal stamp in its disposition tone, the editor's topline, the quiet
   walk-complete chrome line, then the single gold PDF download affordance.
   Proofread renders below it when present, matching the PDF's content. */
.read-final {
  border-top: 2px solid var(--border-strong);
  display: grid;
  gap: clamp(18px, 2.5vw, 28px);
  padding-top: clamp(22px, 3vw, 34px);
}
.read-final-head { display: grid; gap: 6px; }
.read-final-head .cl-heading { margin: 0; }
/* The terminal stamp lands larger than a room stamp — it is THE call. */
.read-final .cl-stamp { font-size: 1.9rem; margin: 4px 0 8px; }
.read-complete-copy { max-width: 66ch; }
/* The gold affordance uses a feature hook over the shared button. */
.cl-btn.read-final-download {
  border-color: var(--gold);
  color: var(--gold);
  justify-self: start;
}
.cl-btn.read-final-download:hover { background: var(--gold-wash); }

.read-ranked-notes,
.read-proofread {
  border-top: 2px solid var(--border-strong);
  display: grid;
  gap: clamp(18px, 2.5vw, 28px);
  padding-top: clamp(22px, 3vw, 34px);
}

.read-ranked-list {
  display: grid;
  gap: clamp(18px, 2.5vw, 28px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.read-ranked-list > li {
  border-top: 1px solid var(--border);
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-4);
}

.read-ranked-list > li:first-child {
  border-top: 0;
  padding-top: 0;
}

.read-ranked-source {
  color: var(--muted);
  font-family: var(--brand);
  font-size: var(--fs-slug);
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.read-ranked-source span {
  color: var(--gold);
}

.read-proofread-pages {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}

.read-proofread-page {
  display: grid;
  gap: var(--space-2);
}

.read-proofread-page .cl-heading {
  margin: 0;
}

.read-proofread-list {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.read-proofread-list li {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.read-proofread-list code {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--ink);
  font-family: var(--brand);
  font-size: 0.95em;
  padding: 2px 6px;
}