/* ==========================================================================
   TRUST · METHODOLOGY APPARATUS — the published-rubric furniture for the two
   trust surfaces (/methodology, /about). The system carries the COMPACT score
   reference (the Ink Key) and the single-verdict box (the Assessment Box) but
   has no way to PUBLISH THE WHOLE 1–5 SCALE with a worked example per anchor,
   no honest coverage REGISTER (per-category denominators), and no VERSIONED
   CHANGELOG for a rubric that changes in the open. Those three are added here.

   Doctrine held: warm paper, no white/blue; mono for every numeral/threshold/
   version; grotesque furniture; the band inks come from the s2 score language
   (good myrtle · moderate ochre · poor brick); the rubric oxblood is identity
   only. Coverage is NEVER drawn in a band ink — a thin record is not a "poor"
   score, and the register's bar is single-ink so the two never blur.

   New components (merge back at harvest):
     .op-rubric        the published 1–5 scale, one anchor per row, each with a
                       worked example finding — the page's centrepiece.
     .op-register      the honest coverage register (per-category n/N + bar).
     .op-changelog     the versioned rubric history (changes in the open).
   Composes: .op-badge, .op-ink-key, .op-kicker, .op-stat (unchanged).
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   THE PUBLISHED RUBRIC — the 1–5 scale, set as an engraved plate. Best rides
   the top (higher = better, spine §6); each row is an anchor with its numeral,
   its band, the live badge a reader will meet on the site, what the number
   asserts, and a concrete worked example so the scale is checkable, not vibes.
   Each .op-rubric__row carries data-band so its ink resolves from the band
   contract; coloured ONLY in the left rail wash + numeral, never the prose.
   ────────────────────────────────────────────────────────────────────────── */
.op-rubric {
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  box-shadow: var(--shadow-raised);
  overflow: hidden;
}

.op-rubric__row {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  border-top: 1px solid var(--rule);
}
.op-rubric__row:first-child { border-top: 0; }

/* The anchor rail: the numeral, the band word, the live badge. Tinted with the
   band's ~12% wash so the rail whispers its colour without staining the prose. */
.op-rubric__anchor {
  display: grid;
  gap: var(--space-2xs);
  align-content: start;
  padding: var(--space-md);
  background: var(--bk-fill, var(--surface-sunken));
  border-right: 1px solid var(--rule);
  border-left: 3px solid var(--bk-line, var(--rule-strong));
}
.op-rubric__numeral {
  font-family: var(--font-data);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--bk-ink, var(--text));
}
.op-rubric__numeral small {
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  color: var(--text-muted);
}
.op-rubric__band {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--bk-ink, var(--text));
}
.op-rubric__anchor .op-badge { margin-top: var(--space-2xs); }

/* The body: what the number asserts, then a worked example. */
.op-rubric__body {
  padding: var(--space-md);
  display: grid;
  gap: var(--space-sm);
  align-content: start;
}
.op-rubric__title {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  margin: 0;
}
.op-rubric__def {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin: 0;
  max-width: var(--measure);
}

/* The worked example — a sunken offprint of a real-shaped finding. The place ·
   factor reads in serif italic; the source tally in mono; a quiet register tick
   marks it as evidence, not decoration. */
.op-rubric__example {
  background: var(--surface-sunken);
  border: 1px solid var(--rule-faint);
  border-left: 3px solid var(--rule-strong);
  border-radius: var(--radius-xs);
  padding: var(--space-sm) var(--space-md);
}
.op-rubric__example-label {
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-2xs);
}
.op-rubric__example-finding {
  font-family: var(--font-reading);
  font-style: italic;
  font-weight: var(--weight-medium);
  color: var(--text);
}
.op-rubric__example-body {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin: var(--space-3xs) 0 0;
}
.op-rubric__example-body [data-numeric] {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
}
.op-rubric__example-src {
  display: block;
  margin-top: var(--space-2xs);
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.op-rubric__example-src b {
  font-family: var(--font-data);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}

@media (max-width: 40rem) {
  .op-rubric__row { grid-template-columns: 1fr; }
  .op-rubric__anchor {
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    gap: var(--space-sm);
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .op-rubric__anchor .op-badge { margin-top: 0; margin-left: auto; }
}

/* ──────────────────────────────────────────────────────────────────────────
   THE COVERAGE REGISTER — honest coverage, per category, with its denominator
   (spine §7). The bar is SINGLE INK, never a band: a sparse record is not a bad
   score, and the register must never imply otherwise. A complete row earns a
   small filled register mark; a partial one reads its exact fraction in mono.
   ────────────────────────────────────────────────────────────────────────── */
.op-register {
  border-top: 1px solid var(--rule-strong);
}
.op-register__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8rem 5.5rem;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--rule-faint);
}
.op-register__name {
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  color: var(--text);
}
.op-register__name small {
  display: block;
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
/* the single-ink coverage track — NOT a score band */
.op-register__bar {
  position: relative;
  block-size: 0.5em;
  background: var(--surface-sunken);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xs);
  overflow: hidden;
}
.op-register__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  inline-size: var(--cov, 0%);
  background: var(--ink-secondary);
}
.op-register__count {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
  color: var(--text-secondary);
}
.op-register__count b {
  color: var(--text);
  font-weight: var(--weight-semibold);
}
/* a complete category gets a quiet filled register tick before its fraction */
.op-register__row[data-complete] .op-register__count::after {
  content: " ●";
  color: var(--positive);
}
.op-register__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.op-register__foot [data-numeric] {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-secondary);
}

@media (max-width: 40rem) {
  .op-register__row { grid-template-columns: minmax(0, 1fr) 4.5rem; }
  .op-register__bar { display: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   THE CHANGELOG — the rubric is versioned and changes in the open. Mono version
   + date in the hang, the change in the read. Newest first.
   ────────────────────────────────────────────────────────────────────────── */
.op-changelog {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.op-changelog__entry {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--rule-faint);
}
.op-changelog__stamp {
  display: grid;
  gap: var(--space-3xs);
  align-content: start;
}
.op-changelog__ver {
  font-family: var(--font-data);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
}
.op-changelog__date {
  font-family: var(--font-data);
  font-size: var(--text-3xs);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.op-changelog__ver--current {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.op-changelog__ver--current::after {
  content: "Current";
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
}
.op-changelog__what {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin: 0;
}

@media (max-width: 40rem) {
  .op-changelog__entry { grid-template-columns: 1fr; gap: var(--space-2xs); }
}

/* ──────────────────────────────────────────────────────────────────────────
   Small shared furniture for these long-form trust pages.
   ────────────────────────────────────────────────────────────────────────── */

/* A section head: a ticked grotesque kicker + a serif sub-head, ruled. */
.op-section { margin-top: var(--space-2xl); }
.op-section__head {
  padding-top: var(--space-sm);
  border-top: 2px solid var(--rule-strong);
  margin-bottom: var(--space-lg);
}
.op-section__title {
  font-family: var(--font-reading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-2xs) 0 0;
}
.op-section__lede {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
  max-width: var(--measure);
  margin: var(--space-sm) 0 0;
  text-wrap: pretty;
}

/* The provenance + version-cartouche row that opens the methodology — stacks
   on a phone so the square seal never crushes the imprint sentence. */
.op-imprint-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-md);
  align-items: start;
  margin-top: var(--space-lg);
}
@media (max-width: 40rem) {
  .op-imprint-row { grid-template-columns: 1fr; }
  .op-imprint-row .op-version { justify-self: start; }
}

/* The framework-counts strip — stats laid on the page, ruled top and bottom. */
.op-counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--space-lg) var(--space-md);
  padding-block: var(--space-lg);
  border-block: 1px solid var(--rule);
}
.op-counts .op-stat__figure small { font-size: var(--text-md); }

/* A two-up of editorial promise cards (independence / openness). */
.op-promises {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-md);
}

/* The version cartouche that crowns the rubric — a stamped, square seal. */
.op-version {
  display: inline-grid;
  gap: 0.1em;
  padding: 0.5em 0.85em;
  background: var(--surface-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-xs);
  box-shadow: inset 0 0 0 1px var(--surface-raised), inset 0 0 0 2px var(--rule-faint);
}
.op-version__label {
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.op-version__value {
  font-family: var(--font-data);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
}
.op-version__value small {
  font-size: var(--text-2xs);
  font-weight: var(--weight-regular);
  color: var(--text-muted);
}

/* The editorial forward-motion strip — quiet, one line of "keep reading" doors,
   never a sales pitch (spine §4). */
.op-readon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.op-readon__door {
  display: grid;
  gap: var(--space-3xs);
  padding: var(--space-md);
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-raised);
  transition: var(--transition-ink), transform var(--duration-fast) var(--ease-standard);
}
.op-readon__door:hover { transform: translateY(-2px); border-color: var(--rule-strong); box-shadow: var(--shadow-page); }
.op-readon__door:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.op-readon__kicker {
  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);
}
.op-readon__title {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}
.op-readon__title::after { content: " \2192"; color: var(--accent); }
.op-readon__note {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}