/* ==========================================================================
   COMPONENTS · REPORT (the offprint reading model) — linked AFTER offprint.css.
   This is the layout of the editorial reading model designed on the report page:
   the three-movement section rhythm, two-way citation backlinks, the end-of-
   sample coda, and a clearly-labelled MOCKUP state switcher. Everything else is
   composed from the base system (sidenote, dropcap, standfirst, prose,
   reference-list, assessment-box, paywall) and the M1 systems (s1, s2).

   No new score primitive, no fork of the vocabulary — only the reading-order
   furniture the base components do not themselves carry. All values are tokens.
   ========================================================================== */

/* — The reading frame sits a little off the top of the page, like a sheet
     lifted from a bound volume. The apparatus object owns the margin reserve. — */
.rp-finding { padding-block: var(--space-lg) var(--space-2xl); }

/* --------------------------------------------------------------------------
   SECTION HEADS — the three movements (Research summary · Detailed analysis ·
   Implications). The base .op-prose styles a bare > h2 with a top rule, but the
   reading model wants a small-caps register kicker ABOVE a serif title, grouped
   under one rule. This composes .op-kicker + a serif title into that unit, and
   because it is a wrapper (not a bare > h2) it overrides the prose default
   cleanly rather than fighting it.
   -------------------------------------------------------------------------- */
.rp-head {
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 2px solid var(--rule-strong);
}
.op-prose > .rp-head:first-child { margin-top: var(--space-sm); }
.rp-head__title {
  font-family: var(--font-reading);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  margin: var(--space-2xs) 0 0;
}

/* --------------------------------------------------------------------------
   CITATION BACKLINK — the apparatus reads both ways. A marker drops the reader
   to its reference; the reference returns them to the exact line they left. A
   quiet mono glyph in the hang, the accent only on hover.
   -------------------------------------------------------------------------- */
.op-references__back {
  font-family: var(--font-data);
  font-size: 0.9em;
  text-decoration: none;
  color: var(--text-muted);
  margin-left: 0.3em;
}
.op-references__back:hover { color: var(--accent); }
/* the reference a marker jumps to flashes, then the eye can walk back up */
.op-references__item:target .op-references__back { color: var(--accent); }

/* --------------------------------------------------------------------------
   THE EVIDENCE FIGURE where the statistic is a "lower-is-better" clinical rate
   (mortality, infection): it must NOT borrow a score band, because the score
   language is "higher = better". Kept in plain ink, labelled as a rate, so it
   never reads as a 0.9 verdict. (Composition rule, enforced by not setting
   data-band on these — documented here for the harvest.)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   END-OF-SAMPLE CODA — only on the free /sample read. The piece was given in
   full; this is the one quiet, editorial ask at the foot (D4: single report +
   lifetime are the heroes). Restraint is the conversion strategy — no urgency.
   -------------------------------------------------------------------------- */
.rp-coda {
  margin-top: var(--space-2xl);
  padding: var(--space-lg) var(--space-md);
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.rp-coda__title {
  font-family: var(--font-reading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-2xs) 0 0;
}
.rp-coda__note {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  max-width: var(--measure-narrow);
}
.rp-coda__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
/* mono ledger of what the reader could read next — names left, counts mono */
.rp-coda__more {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--rule-faint);
  display: grid;
  gap: 0.1rem;
  max-width: var(--measure-narrow);
}
.rp-coda__more a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0.25em 0;
  border-top: 1px solid var(--rule-faint);
  font-family: var(--font-furniture);
  font-size: var(--text-sm);
  color: var(--text);
  text-decoration: none;
}
.rp-coda__more a:first-child { border-top: 0; }
.rp-coda__more a:hover { color: var(--accent); }
.rp-coda__more b {
  flex: none;
  font-family: var(--font-data);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   MOCKUP STATE SWITCHER — NOT part of the product. A clearly-labelled dev aid
   so the operator can flip between the full /sample read and the walked-into
   paywall state and judge both by eye. Pinned, mono, faint; hidden in print.
   -------------------------------------------------------------------------- */
.rp-statebar {
  position: fixed;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.5rem;
  background: var(--surface-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-pop);
}
.rp-statebar__label {
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.rp-statebar a {
  font-family: var(--font-data);
  font-size: var(--text-3xs);
  text-decoration: none;
  color: var(--text-secondary);
  padding: 0.2em 0.45em;
  border: 1px solid var(--rule);
  border-radius: var(--radius-xs);
}
.rp-statebar a:hover { color: var(--accent); border-color: var(--rule-strong); }
.rp-statebar a[aria-current="true"] {
  background: var(--surface-inverse);
  color: var(--text-inverse);
  border-color: var(--surface-inverse);
}
@media print { .rp-statebar { display: none; } }