/* Trust-and-measurement surfaces — /methodology and /metrics.
 *
 * The two routes are one system: Methodology is the constitutional explanation of how Stable Tape
 * measures, freezes, verifies and interprets the market; Metrics is the operational register of
 * what is measured today, at what status, from what source, on what cadence, and whether it enters
 * the frozen Daily Tape. They therefore share one stylesheet, so the pair cannot drift apart the
 * way two inline <style> blocks did.
 *
 * The grammar is the published-record family's, not a dashboard's: a 2px accent rule over the page
 * identity, hairline-ruled sections with small tracked headings, key/value registers instead of
 * panels, mono tabular figures, and status carried by a bordered stamp plus the word — never by
 * colour alone. It deliberately mirrors css/tape-history.css and css/tape-record.css rather than
 * the homepage Observatory composition, because these are reference documents, not readings.
 *
 * The `mx-*` and `meth-*` class vocabulary is preserved on purpose. css/tokens.css already wires
 * that vocabulary into the semantic type roles (LABEL FLOOR, SUPPORTING, METADATA) and into the
 * per-register badge inks, and scripts/test-contrast-accessibility.mjs and
 * scripts/test-copy-dedup.mjs both resolve those exact names. Renaming would silently drop the
 * pages out of the type floor and break the guards.
 *
 * Everything resolves through the shared semantic roles, so both routes follow the site-wide
 * System/Light/Dark selection with no per-theme literals of their own.
 */

/* ── Page frame ──────────────────────────────────────────────────────────────────────────────── */

body {
  background: var(--theme-surface-page);
  color: var(--theme-ink-primary);
  font-family: var(--sans);
  line-height: 1.55;
  margin: 0;
}

/* Width, gutter and box model come from the layout role registry in css/tokens.css, which claims
   `.mx-page` at (0,2,1) precisely so a page cannot quietly leave the shared spine. Only the block
   padding is set here. */
.mx-page {
  padding-block: 0;
}

.mx-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Page head ───────────────────────────────────────────────────────────────────────────────── */

/* The identity block, mirroring `.th-pagehead` and `.al-pagehead`: the accent rule above the
   eyebrow is what marks a page as part of the record family. */
/* The top clearance over the fixed navigation is the registry's, shared with every other route
   hero; only the closing edge belongs to this page. */
.mx-hero {
  padding-bottom: 0;
  border-bottom: 0;
}

.mx-hero-inner {
  border-top: 2px solid var(--theme-accent);
  padding-top: .8rem;
}

.mx-hero-eyebrow {
  margin: 0 0 .35rem;
  color: var(--theme-ink-muted);
  text-transform: uppercase;
}

/* Size, weight and family are the sitewide PAGE TITLE role in css/tokens.css, the same role
   /tape, /developers, /partners and /support resolve. This is the one serif display slot on the
   page, and it is deliberately not overridden here: a route may not redefine a shared role. */
.mx-hero-title {
  margin: 0;
  color: var(--theme-ink-primary);
}

/* The stamped status line under the identity, mirroring `.th-coverage` and `.al-status`: what this
   document is, and what it currently covers. */
.mx-hero-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin: .7rem 0 0;
  font-size: .82rem;
  color: var(--theme-ink-secondary);
  font-variant-numeric: tabular-nums lining-nums;
}

.mx-hero-sub {
  margin: .9rem 0 0;
  max-width: 62ch;
  font-size: .93rem;
  color: var(--theme-ink-secondary);
}

.mx-hero-sub a { color: var(--theme-ink-link); }

/* Contents. Both routes are long reference documents rather than readings — Methodology answers
   sixteen separate questions — so the sections are addressable from the head instead of only by
   scrolling. It is a plain ruled list of routes, in the manner of the archive's month rail, not a
   sticky widget: it prints, it works without JavaScript, and it never follows the reader. */
.mx-contents {
  margin: 1.4rem 0 0;
  padding: .9rem 0 0;
  border-top: 1px solid var(--theme-rule-subtle);
}

.mx-contents-label {
  margin: 0 0 .5rem;
  color: var(--theme-ink-muted);
  text-transform: uppercase;
}

.mx-contents-list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: mx-contents;
}

.mx-contents-list li { counter-increment: mx-contents; }

.mx-contents-list a {
  color: var(--theme-ink-secondary);
  text-decoration: none;
  font-size: .85rem;
}

.mx-contents-list a::before {
  content: counter(mx-contents, decimal-leading-zero) '\2009';
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--theme-ink-muted);
}

.mx-contents-list a:hover {
  color: var(--theme-ink-link);
  text-decoration: underline;
}

/* ── Sections ────────────────────────────────────────────────────────────────────────────────── */

/* One rule, one rhythm, for every region of both pages. Mirrors `.th-page > section`. */
.mx-section {
  margin: var(--rhythm-section) 0 0;
  padding: 1.4rem 0 0;
  border-top: 1px solid var(--theme-rule-standard);
}

.mx-section-head {
  margin-bottom: var(--rhythm-title-content);
}

/* The section label is a real heading. It used to be a <div>, which left the whole section
   structure of both pages invisible to assistive technology: a screen reader saw one h1 followed
   by a flat run of card titles with no grouping. Styling is unchanged in kind — small, tracked,
   uppercase — so the visual hierarchy is the same one the record family uses. */
.mx-section-title {
  margin: 0 0 .35rem;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--theme-ink-secondary);
}

/* The lead section of each page carries the accent, exactly as `/tape/history` accents its own
   lead entry. Everything after it is secondary ink, so the page has one emphasis, not eight. */
.mx-section--lead > .mx-section-head > .mx-section-title { color: var(--theme-accent-hover); }

.mx-section-desc {
  margin: 0;
  max-width: var(--layout-measure-reading);
  font-size: .9rem;
  line-height: 1.6;
  color: var(--theme-ink-secondary);
}

.mx-section-desc a { color: var(--theme-ink-link); }

/* ── Entries ─────────────────────────────────────────────────────────────────────────────────── */

/* What used to be `.mx-card`: a floating panel with its own gradient, radius and border. It is now
   a ruled entry in a column, so a page of them reads as one document rather than a tray of tiles.
   The class name is kept because css/tokens.css scopes ink roles to it.
 *
 * css/tokens.css lists `.mx-card` among the deferred components with deliberately opaque dark
 * surfaces and pins 49 custom properties to their dark values there, so paper ink never lands on a
 * dark panel. /currencies still needs that. These two routes no longer have a panel at all — the
 * entry is transparent and sits on the page surface — so every pinned property is released back to
 * the active theme. Without this release the whole document renders dark ink on cream, at ratios
 * down to 1.04:1. Only the shared release belongs here; nothing is re-pointed at a literal. */
.mx-card {
  --theme-ink-primary: revert;
  --theme-ink-secondary: revert;
  --theme-ink-muted: revert;
  --theme-ink-link: revert;
  --theme-ink-link-hover: revert;
  --theme-rule-subtle: revert;
  --theme-rule-standard: revert;
  --theme-rule-focus: revert;
  --theme-focus-ring: revert;
  --st-bg: revert;
  --st-surface-1: revert;
  --st-surface-2: revert;
  --st-surface-3: revert;
  --st-border: revert;
  --st-grid: revert;
  --st-text: revert;
  --st-text-secondary: revert;
  --st-text-muted: revert;
  --st-blue: revert;
  --st-blue-strong: revert;
  --st-blue-mid: revert;
  --st-blue-soft: revert;
  --st-blue-surface: revert;
  --st-mint: revert;
  --st-mint-strong: revert;
  --st-mint-mid: revert;
  --st-mint-soft: revert;
  --st-red: revert;
  --st-red-strong: revert;
  --st-red-mid: revert;
  --st-red-soft: revert;
  --st-red-surface: revert;
  --st-amber: revert;
  --st-neutral: revert;
  --st-neutral-surface: revert;
  --bg: revert;
  --bg-deep: revert;
  --bg-card: revert;
  --bg-ui: revert;
  --border: revert;
  --border-hairline: revert;
  --text: revert;
  --text-secondary: revert;
  --text-muted: revert;
  --text-faint: revert;
  --label-muted: revert;
  --accent: revert;
  --accent-light: revert;
  --accent-dim: revert;

  display: block;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.mx-card + .mx-card {
  margin-top: var(--rhythm-section-compact);
  padding-top: 1.25rem;
  border-top: 1px solid var(--theme-rule-subtle);
}

.mx-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: .6rem .75rem;
  padding: 0;
}

/* Entry titles resolve the shared SUBSECTION TITLE role, as they did before, so a metric entry here
   is set at the same scale as a report title or a partner heading. Only colour is asserted. */
.mx-card-title {
  margin: 0;
  color: var(--theme-ink-primary);
}

.mx-card-body {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: .75rem 0 0;
}

/* An entry with no title of its own sits directly under the section heading, which already
   supplies the separation. */
.mx-card > .mx-card-body:first-child { padding-top: 0; }

.mx-card-desc {
  margin: 0;
  max-width: var(--layout-measure-reading);
  color: var(--theme-ink-secondary);
}

.mx-card-desc a,
.mx-card-note a { color: var(--theme-ink-link); }

.mx-card-desc strong { color: var(--theme-ink-primary); }

/* Fine print: the qualification that travels with an entry. Flat, ruled on its leading edge, never
   a boxed warning — an unavailable or research metric is a state, not a failure. */
.mx-card-note {
  max-width: var(--layout-measure-reading);
  margin: 0;
  padding: 0 0 0 .7rem;
  border-left: 2px solid var(--theme-rule-standard);
  color: var(--theme-ink-muted);
}

.mx-card-note--warn { border-left-color: var(--theme-status-warning-ink); }

.mx-card-link {
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--theme-ink-link);
  text-decoration: none;
}

.mx-card-link:hover { color: var(--theme-ink-link-hover); text-decoration: underline; }

.mx-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
}

/* ── Status stamps ───────────────────────────────────────────────────────────────────────────── */

/* The canonical status vocabulary of docs/design/contemporary-benchmark-programme.md section 8,
   rendered the way the record family renders it: a border, static type and the word itself. Colour
   is a second channel only — remove it entirely and every status is still readable, which is what
   the print rules below rely on. */
.mx-badge {
  display: inline-block;
  padding: .16rem .48rem;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-family: var(--mono);
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.35;
}

.mx-badge-dot { display: none; }

/* LIVE and FROZEN are the two production registers, so both take the accent border and the
   positive ink. FROZEN replaces the former "Daily", which named a cadence where a status belonged
   and sat outside the published vocabulary. */
.mx-badge--live,
.mx-badge--bootstrap {
  color: var(--theme-status-positive-ink);
  border-color: var(--theme-accent);
  background: var(--theme-accent-surface);
}

/* Research beta: a published reading with quality gates. Dashed, so it can never be mistaken for a
   canonical stamp in a screenshot. */
.mx-badge--beta {
  color: var(--theme-ink-link);
  border-style: dashed;
  border-color: currentColor;
  background: transparent;
}

/* Research: a defined methodology and no public reading. */
.mx-badge--research {
  color: var(--theme-status-warning-ink);
  border-style: dashed;
  background: var(--theme-status-warning-surface);
}

/* Planned: named and scoped, no complete methodology. Deliberately the quietest register — a
   planned metric is not a broken one. */
.mx-badge--planned,
.mx-badge--context {
  color: var(--theme-status-neutral-ink);
  border-style: dotted;
  background: transparent;
}

/* ── Key/value registers ─────────────────────────────────────────────────────────────────────── */

/* The archive-coverage pattern from `/tape/history`: a label, a figure, a hairline. This is the
   page's principal quantitative device and replaces the former nested value panels. */
.mx-cv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.mx-cv-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .35rem 1rem;
  min-width: 0;
  padding: .55rem 0;
  border-top: 1px solid var(--theme-rule-subtle);
  background: transparent;
}

.mx-cv-label {
  display: block;
  margin: 0;
  color: var(--theme-ink-muted);
  text-transform: uppercase;
}

/* The register rows are a <dl>, so the browser's default dd indent has to go or every figure sits
   40px in from its own rule. */
.mx-cv dt,
.mx-cv dd,
.meth-def-list dt,
.meth-def-list dd { margin-inline-start: 0; }

.mx-cv dd { margin: 0; }

.mx-cv-val {
  font-family: var(--mono);
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--theme-ink-primary);
  font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: anywhere;
}

.mx-cv-val--accent { color: var(--theme-ink-link); }

.mx-card-source {
  color: var(--theme-ink-muted);
  overflow-wrap: anywhere;
}

/* ── Formulas ────────────────────────────────────────────────────────────────────────────────── */

/* A formula is quoted material, so it is set on a rule like a quotation rather than inside a tinted
   chip. `white-space: normal` plus `overflow-wrap` is what keeps a long expression inside a 320px
   viewport instead of forcing the page sideways. */
.mx-card-formula,
.meth-formula-block {
  display: block;
  width: auto;
  max-width: var(--layout-measure-reading);
  margin: 0;
  padding: .5rem 0 .5rem .7rem;
  border: 0;
  border-left: 2px solid var(--theme-accent);
  border-radius: 0;
  background: transparent;
  font-family: var(--mono);
  font-size: .84rem;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--theme-ink-primary);
  white-space: normal;
  overflow-wrap: anywhere;
}

.meth-formula-text {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 500;
  color: var(--theme-ink-primary);
  overflow-wrap: anywhere;
}

.meth-formula-op { color: var(--theme-accent-hover); }

.meth-formula-note {
  margin: .4rem 0 0;
  color: var(--theme-ink-muted);
}

/* ── Source ledger ───────────────────────────────────────────────────────────────────────────── */

.meth-sources {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.meth-source-row {
  padding: .85rem 0;
  border: 0;
  border-top: 1px solid var(--theme-rule-subtle);
  border-radius: 0;
  background: transparent;
}

.meth-source-name {
  font-family: var(--sans);
  font-weight: 650;
  color: var(--theme-ink-primary);
  overflow-wrap: anywhere;
}

.meth-source-name a { color: var(--theme-ink-link); }

.meth-source-detail {
  margin-top: .25rem;
  max-width: var(--layout-measure-reading);
  font-size: .88rem;
  line-height: 1.55;
  color: var(--theme-ink-secondary);
}

.meth-source-meta {
  margin-top: .35rem;
  color: var(--theme-ink-muted);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* ── Lists ───────────────────────────────────────────────────────────────────────────────────── */

.meth-limits {
  list-style: none;
  max-width: var(--layout-measure-reading);
  padding: 0;
  margin: 0;
}

.meth-limits > li {
  position: relative;
  padding: .55rem 0 .55rem 1rem;
  border-top: 1px solid var(--theme-rule-subtle);
  color: var(--theme-ink-secondary);
  font-size: .9rem;
  line-height: 1.6;
}

.meth-limits > li::before {
  content: '';
  position: absolute;
  top: 1.1rem;
  left: 0;
  width: .4rem;
  border-top: 1px solid var(--theme-accent);
}

.meth-limits > li strong { color: var(--theme-ink-primary); }

.mx-data-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.mx-data-list li {
  position: relative;
  padding-left: 1rem;
  color: var(--theme-ink-secondary);
  line-height: 1.55;
}

.mx-data-list li::before {
  content: '·';
  position: absolute;
  left: .25rem;
  color: var(--theme-ink-muted);
}

/* ── Signal method ───────────────────────────────────────────────────────────────────────────── */

.signal-method-steps,
.signal-method-ladder {
  list-style: none;
  margin: 0;
  padding: 0;
}

.signal-method-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

.signal-method-steps li {
  padding: .7rem 0 0;
  border-top: 2px solid var(--theme-accent);
  background: transparent;
}

.signal-method-steps strong,
.signal-method-steps span { display: block; }
.signal-method-steps strong { color: var(--theme-ink-primary); font-size: .85rem; font-weight: 650; }
.signal-method-steps span { margin-top: .25rem; color: var(--theme-ink-secondary); font-size: .8rem; line-height: 1.5; }

.signal-method-ladder-title {
  margin: 0 0 .55rem;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--theme-ink-secondary);
}

.signal-method-ladder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2.5rem;
  counter-reset: signal-rule;
}

.signal-method-ladder li {
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  gap: 0 .5rem;
  padding: .6rem 0;
  border: 0;
  border-top: 1px solid var(--theme-rule-subtle);
  background: transparent;
  counter-increment: signal-rule;
}

.signal-method-ladder li::before {
  content: counter(signal-rule, decimal-leading-zero);
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--theme-ink-muted);
  font-variant-numeric: tabular-nums;
}

.signal-method-ladder strong,
.signal-method-ladder span { grid-column: 2; display: block; }
.signal-method-ladder strong { color: var(--theme-ink-primary); font-size: .85rem; font-weight: 650; }
.signal-method-ladder span { margin-top: .1rem; color: var(--theme-ink-secondary); font-size: .8rem; line-height: 1.45; }

.signal-method-transition { margin-top: 1rem; }

/* ── Definition lists ────────────────────────────────────────────────────────────────────────── */

.meth-def-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2.5rem;
  margin: 0;
}

.meth-def-list > div {
  padding: .8rem 0;
  border-top: 1px solid var(--theme-rule-subtle);
  min-width: 0;
}

.meth-def-list dt {
  font-family: var(--sans);
  font-weight: 650;
  color: var(--theme-ink-primary);
}

.meth-def-list dd {
  margin: .2rem 0 0;
  color: var(--theme-ink-secondary);
  font-size: .88rem;
  line-height: 1.6;
}

.meth-def-list dd a { color: var(--theme-ink-link); }

/* ── Citation ────────────────────────────────────────────────────────────────────────────────── */

.meth-citation {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem 1rem;
  max-width: var(--layout-measure-reading);
  padding: .8rem 0 .8rem .7rem;
  border: 0;
  border-left: 2px solid var(--theme-rule-standard);
  border-radius: 0;
  background: transparent;
  font-family: var(--mono);
  font-size: .8rem;
  line-height: 1.6;
  color: var(--theme-ink-secondary);
  overflow-wrap: anywhere;
}

.meth-citation > span { min-width: 0; }

.meth-citation button {
  position: static;
  flex-shrink: 0;
  min-height: 2rem;
  padding: 0 .7rem;
  border: 1px solid var(--theme-rule-standard);
  border-radius: 3px;
  background: transparent;
  color: var(--theme-ink-link);
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.meth-citation button:hover { border-color: var(--theme-rule-focus); }

/* ── Boundary note ───────────────────────────────────────────────────────────────────────────── */

.mx-boundary {
  max-width: var(--layout-measure-reading);
  padding: .1rem 0 .1rem .8rem;
  border: 0;
  border-left: 2px solid var(--theme-accent);
  border-radius: 0;
  background: transparent;
}

.mx-boundary-label {
  margin: 0 0 .35rem;
  color: var(--theme-accent-hover);
  text-transform: uppercase;
}

.mx-boundary p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.65;
  color: var(--theme-ink-secondary);
}

.mx-boundary p a { color: var(--theme-ink-link); }

/* ── Tables ──────────────────────────────────────────────────────────────────────────────────── */

.meth-table-wrap,
.mx-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

/* The register's scroll container is focusable so the four fields past the fold are reachable by
   keyboard as well as by touch, and it is described by the instruction below rather than being
   given a role — a named region here would add a landmark to a page whose landmark set is asserted
   elsewhere. */
.mx-table-wrap:focus-visible {
  outline: 2px solid var(--theme-focus-ring);
  outline-offset: 2px;
}

/* The register is the one element on either route that scrolls sideways, and on a narrow screen its
   last three columns — source, cadence and frozen-record inclusion — sit entirely past the fold
   with nothing to suggest they exist. A line of ordinary type on the page's own rhythm: not a card,
   a pill, a badge, an icon or a callout.
 *
 * Hidden by default and revealed below the width at which the six columns stop fitting. The
 * register's natural width is 805px, so it overflows its container continuously from 320px and the
 * fit point measures at 869/870px — a boundary that moves by a sub-pixel with the scrollbar. The
 * rule is therefore bound to the 900px breakpoint the rest of this file already uses, erring on the
 * side of showing it: a redundant line above a table that just fits costs a reader nothing, whereas
 * a missing one above a table that scrolls hides three columns. Above 900px it never scrolls and
 * the instruction is never shown. It is excluded from print, where nothing scrolls. */
.mx-scroll-hint {
  display: none;
}

@media (max-width: 899.98px) {
  .mx-scroll-hint {
    display: block;
    max-width: var(--layout-measure-reading);
    margin: 0 0 .5rem;
    font-family: var(--sans);
    font-size: .8rem;
    line-height: 1.5;
    color: var(--theme-ink-muted);
  }
}

.meth-table,
.mx-layer-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .86rem;
}

.meth-table th,
.meth-table td,
.mx-layer-table th,
.mx-layer-table td {
  text-align: left;
  vertical-align: top;
  padding: .65rem 1.25rem .65rem 0;
  border-bottom: 1px solid var(--theme-rule-subtle);
  line-height: 1.5;
}

.meth-table thead th,
.mx-layer-table thead th {
  font-family: var(--mono);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
  border-bottom: 1px solid var(--theme-rule-standard);
  white-space: nowrap;
}

.meth-table tbody td,
.mx-layer-table tbody td { color: var(--theme-ink-secondary); }

.meth-table tbody td:first-child,
.mx-layer-table .mx-lt-product {
  color: var(--theme-ink-primary);
  font-weight: 650;
}

/* The register's benchmark names are links to the surfaces they describe. They used to be painted
   with the surrounding ink and no underline, which made a whole column of destinations
   indistinguishable from plain text. */
.mx-layer-table .mx-lt-product a {
  color: var(--theme-ink-link);
  text-decoration: underline;
  text-underline-offset: .18em;
}

.mx-layer-table .mx-lt-product a:hover { color: var(--theme-ink-link-hover); }

.mx-layer-table .mx-lt-frozen,
.mx-layer-table .mx-lt-cadence {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--theme-ink-secondary);
  white-space: nowrap;
}

.mx-layer-table td.mx-lt-status { white-space: nowrap; }

/* The metric name is the row's handle: it never wraps mid-word, and it holds a column wide enough
   to stay one or two lines at every width the table is scrolled to. */
.mx-layer-table .mx-lt-product {
  min-width: 9.5rem;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.mx-layer-note {
  max-width: var(--layout-measure-reading);
  margin-top: 1rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--theme-ink-secondary);
}

.mx-layer-note a { color: var(--theme-ink-link); }

/* ── Lens grid (supply comparisons, supporting layers, roadmap) ──────────────────────────────── */

.mx-lenses {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 2.5rem;
}

.mx-lens {
  min-width: 0;
  padding: .9rem 0 1.1rem;
  border: 0;
  border-top: 1px solid var(--theme-rule-subtle);
  border-radius: 0;
  background: transparent;
}

.mx-lens-label {
  margin: 0 0 .4rem;
  color: var(--theme-ink-muted);
  text-transform: uppercase;
}

/* Held below the section heading's 12.48px (.78rem) so the guard in
   scripts/test-contrast-accessibility.mjs — "Metrics formula remains subordinate to its section
   heading" — stays true, and so a formula never competes with the structure around it. */
.mx-lens-formula {
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--theme-ink-secondary);
  overflow-wrap: anywhere;
}

.mx-lens-formula > span { color: var(--theme-ink-muted); }

.mx-lens-source {
  margin-top: .45rem;
  color: var(--theme-ink-muted);
  overflow-wrap: anywhere;
}

.mx-lenses-note {
  max-width: var(--layout-measure-reading);
  margin-top: 1.1rem;
  color: var(--theme-ink-muted);
}

/* ── Unavailable states ──────────────────────────────────────────────────────────────────────── */

/* An unavailable input states its reason in words on a dotted rule. It is deliberately not a
   red-edged alert: nothing here has failed, the data contract simply does not exist yet. */
.mx-unavail {
  max-width: var(--layout-measure-reading);
  padding: .1rem 0 .1rem .8rem;
  border: 0;
  border-left: 2px dotted var(--theme-rule-standard);
  border-radius: 0;
  background: transparent;
  color: var(--theme-ink-muted);
}

.mx-unavail strong { color: var(--theme-ink-secondary); font-weight: 650; }

.mx-active-grid,
.mx-flow-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2.5rem;
}

.mx-active-half {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  min-width: 0;
  padding: .9rem 0 0;
  border-top: 1px solid var(--theme-rule-subtle);
}

.mx-active-label {
  color: var(--theme-ink-muted);
  text-transform: uppercase;
}

.mx-provider-list {
  color: var(--theme-ink-secondary);
  line-height: 1.7;
}

/* ── Velocity readout ────────────────────────────────────────────────────────────────────────── */

.mx-velocity-module {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 0 2.5rem;
  align-items: start;
}

.mx-velocity-readout {
  min-height: 0;
  padding: .9rem 0 0;
  border: 0;
  border-top: 1px solid var(--theme-rule-subtle);
  border-radius: 0;
  background: transparent;
}

.mx-velocity-kicker {
  margin: 0 0 .3rem;
  color: var(--theme-ink-muted);
  text-transform: uppercase;
}

/* A research-beta figure must never be the loudest number on a page that also carries the
   production benchmark. It was set at up to 76px in a serif display face — larger than anything on
   the DDD entry above it — which is exactly the screenshot-confusion failure the design programme
   bans. It is now a mono figure at subsection scale: legible, precise, and plainly subordinate. */
.mx-velocity-value {
  font-family: var(--mono);
  font-size: var(--type-subsection-title-size);
  font-weight: 500;
  line-height: 1.2;
  color: var(--theme-ink-primary);
  font-variant-numeric: tabular-nums lining-nums;
}

.mx-velocity-label {
  margin-top: .25rem;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
}

.mx-velocity-line {
  margin: .7rem 0 0;
  max-width: var(--layout-measure-reading);
  font-size: .9rem;
  line-height: 1.55;
  color: var(--theme-ink-secondary);
}

.mx-velocity-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.mx-velocity-fact {
  min-width: 0;
  padding: .55rem 0;
  border-top: 1px solid var(--theme-rule-subtle);
  background: transparent;
}

.mx-velocity-fact--wide { grid-column: 1 / -1; }

.mx-velocity-fact-label {
  display: block;
  margin-bottom: .2rem;
  color: var(--theme-ink-muted);
  text-transform: uppercase;
}

.mx-velocity-fact-value {
  display: block;
  color: var(--theme-ink-secondary);
  font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: anywhere;
}

/* Both of these carried a hard-coded pale mint (rgba(167,243,208,.72)) that the page's dark-only
   card scoping never re-themed, so on paper they measured 1.10:1 — a plain WCAG AA failure for the
   one sentence that tells a reader the figure above is not production. */
.mx-velocity-provenance,
.mx-velocity-beta-note {
  font-family: var(--mono);
  color: var(--theme-ink-muted);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.mx-velocity-beta-note { color: var(--theme-status-warning-ink); }

/* ── Links and focus ─────────────────────────────────────────────────────────────────────────── */

/* Only the elements that actually carry unbreakable strings — routes, hashes, series identifiers,
   formulas and source names — are allowed to break inside a word. A blanket rule on every link
   fractured ordinary metric names down the middle of the word in the narrow register column. */
.mx-page a:focus-visible,
.mx-page button:focus-visible,
.mx-hero a:focus-visible {
  outline: 2px solid var(--theme-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

.mx-page code {
  font-family: var(--mono);
  overflow-wrap: anywhere;
}

/* ── Responsive ──────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .signal-method-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .mx-lenses { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
  .mx-velocity-module { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

@media (max-width: 640px) {
  /* Deliberate mobile recomposition rather than a squeeze: every paired grid becomes one ruled
     column, so each row keeps its full label and figure instead of wrapping into a narrow well. */
  .mx-cv,
  .meth-def-list,
  .signal-method-steps,
  .signal-method-ladder,
  .mx-lenses,
  .mx-active-grid,
  .mx-flow-grid,
  .mx-velocity-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .mx-cv-cell {
    display: block;
  }

  .mx-cv-cell .mx-cv-val { margin-top: .15rem; }

  .mx-velocity-fact--wide { grid-column: auto; }

  .meth-citation { flex-direction: column; }

  /* The register is genuinely wide. It scrolls inside its own container rather than pushing the
     document sideways, and the guard below asserts the document itself never overflows. The width
     is set so every column stays usable when scrolled, rather than compressing the metric name
     into a two-character ribbon. */
  .mx-layer-table { min-width: 54rem; }

  .signal-method-steps li { border-top-width: 1px; }
}

/* ── Print ───────────────────────────────────────────────────────────────────────────────────── */

/* Neither route had any print treatment at all, so a printed copy carried the fixed navigation, the
   theme selector, the signup form and the footer, and lost every destination. The rules below
   mirror css/tape-history.css and css/tape-record.css: the chrome and the controls go, the
   document stays, and the routes that make a claim checkable are printed beside their text. */
@media print {
  body {
    background: #fff;
    color: #000;
    font-size: 10.5pt;
  }

  nav.nav,
  .nav-overlay,
  .site-footer,
  .signup-block,
  .skip-link,
  form,
  button,
  select,
  /* Paper does not scroll. */
  .mx-scroll-hint {
    display: none !important;
  }

  .mx-page {
    max-width: none;
    padding: 0;
  }

  .mx-hero { padding: 0; }

  .mx-hero-inner { border-top-width: 2pt; }

  .mx-hero-title { font-size: 22pt; }

  .mx-section {
    margin-top: 1.4rem;
    padding-top: .9rem;
    break-inside: auto;
    page-break-inside: auto;
  }

  .mx-card,
  .mx-cv-cell,
  .mx-lens,
  .meth-source-row,
  .meth-def-list > div,
  .meth-limits > li,
  .mx-velocity-fact,
  .signal-method-ladder li,
  .mx-layer-table tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Status survives the loss of colour: the border style already distinguishes the registers, and
     the word is printed regardless. */
  .mx-badge {
    color: #000 !important;
    border-color: #000 !important;
    background: transparent !important;
  }

  .mx-card-formula,
  .meth-formula-block,
  .mx-boundary,
  .mx-card-note,
  .mx-unavail,
  .meth-citation {
    border-left-color: #666 !important;
    background: transparent !important;
  }

  .meth-table-wrap,
  .mx-table-wrap { overflow: visible; }

  .mx-layer-table { min-width: 0; font-size: 8pt; }

  /* Useful destinations survive the loss of the link. `text-transform: none` matters: several of
     these links are set in uppercase, and a printed route a reader cannot retype is not a
     destination. */
  .mx-page a[href^="/"]::after,
  .mx-page a[href^="http"]::after {
    content: ' (' attr(href) ')';
    font-family: var(--mono);
    font-size: 8pt;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #444;
    overflow-wrap: anywhere;
  }

  /* The citation already prints its own URL; do not print it twice. */
  .meth-citation a::after { content: '' !important; }
}