/*
 * Stable Tape reference routes - the shared convergence layer.
 *
 * One layer for /methodology, /sources and /transparency. These three are the
 * reference routes: they are read by someone who is about to rely on, quote or
 * check a published figure, so they are set in the same editorial register as
 * the Daily Stable Briefing rather than in a documentation register.
 *
 * This file converges presentation only. It states no fact. No rule here
 * changes ODS arithmetic, an M2 value or vintage, provider authority, the
 * fixing regime, a historical label, a source contract, a frozen record,
 * witness methodology or Structure methodology.
 *
 * LOAD ORDER. This file must load LAST, after tokens.css, nav.css, footer.css
 * and any route-specific sheet. On /methodology it also loads after
 * trust-register.css, which is shared with /metrics and must not be edited:
 * the overrides here are how that route converges without touching it.
 *
 * DARK MODE. There is not one dark rule in this file, and there must never be
 * one. Every colour below is a semantic role from tokens.css that is already
 * mapped in both :root (light) and :root[data-theme="dark"]. Dark is selected
 * by the data-theme attribute written by /js/theme-init.js, never by
 * prefers-color-scheme.
 */

/* ---- Page shell ---------------------------------------------------------- */

/*
 * The page measure, not the reading measure. Prose is held to a readable line
 * by ch caps on the individual elements below, which lets a register or a table
 * use the full spine while a sentence never does.
 */
.ref-page {
  max-width: var(--layout-box-page, 1328px);
  margin: 0 auto;
  padding: calc(var(--layout-nav-h) + clamp(1.5rem, 3vw, 2.75rem)) var(--layout-gutter) clamp(4rem, 8vw, 6rem);
  color: var(--theme-ink-primary);
}

/* ---- Opening ------------------------------------------------------------- */

.ref-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--theme-ink-secondary);
}

.ref-eyebrow-sep {
  color: var(--theme-ink-muted);
}

/*
 * The title is a sentence, not a label. It is capped at roughly 26 characters
 * a line: a title that runs the full width of a 1328px spine stops reading as
 * a sentence.
 */
.ref-title {
  margin: 0;
  max-width: 26ch;
  font-family: var(--serif-display, Georgia, serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: pretty;
  color: var(--theme-ink-primary);
}

.ref-standfirst {
  margin: 1.25rem 0 0;
  max-width: 48ch;
  font-size: clamp(1.02rem, 1.5vw, 1.15rem);
  line-height: 1.6;
  color: var(--theme-ink-secondary);
}

/* ---- Sections ------------------------------------------------------------ */

.ref-section {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--theme-rule-standard);
}

/*
 * The serif title on the left, the mono kicker pushed right, both on the same
 * baseline. Hierarchy comes from the rule above the block and from the register
 * beside it, not from type size.
 */
.ref-section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem 1rem;
}

.ref-section-head h2 {
  margin: 0;
  font-family: var(--serif-display, Georgia, serif);
  font-weight: 500;
  font-size: clamp(1.55rem, 3vw, 2rem);
  line-height: 1.15;
  color: var(--theme-ink-primary);
}

.ref-section-kicker {
  margin: 0;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
}

.ref-section-lede {
  margin: 1rem 0 0;
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--theme-ink-primary);
}

.ref-prose {
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.68;
  color: var(--theme-ink-primary);
  text-wrap: pretty;
}

/* ---- The mono label primitive -------------------------------------------- */

/*
 * One label register for every eyebrow, side-head, caption and clause on the
 * three routes. The reference pages previously carried five near-identical
 * variants at three different sizes and three different trackings.
 */
.ref-label {
  margin: 0;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--theme-ink-secondary);
}

.ref-label--strong {
  color: var(--theme-ink-primary);
}

/* ---- The provenance line ------------------------------------------------- */

/*
 * Asymmetric on purpose: subtle above, standard below. It sits under a block
 * that already carries its own heavy rule, and closes itself against the page.
 */
.ref-prov {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.55rem;
  margin: 1.5rem 0 0;
  padding: 0.75rem 0 0.85rem;
  border-top: 1px solid var(--theme-rule-subtle);
  border-bottom: 1px solid var(--theme-rule-standard);
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--theme-ink-muted);
}

.ref-prov-mark {
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--theme-ink-primary);
}

.ref-prov-sep {
  color: var(--theme-ink-disabled);
}

/* ---- The register -------------------------------------------------------- */

/*
 * A side-head and a statement. This is the shape the Briefing register and the
 * Transparency entry list had each grown independently; it is stated once here
 * so the three reference routes align on one grid.
 *
 * Below the desktop breakpoint the side-head stacks above its statement. No
 * rule reorders anything: DOM order is reading order and keyboard order at
 * every width.
 */
.ref-register {
  margin: 1.1rem 0 0;
  border-top: 2px solid var(--theme-rule-strong);
}

.ref-reg {
  padding: 1.15rem 0 1.25rem;
  border-bottom: 1px solid var(--theme-rule-subtle);
}

.ref-reg:last-child {
  border-bottom: 1px solid var(--theme-rule-standard);
}

.ref-reg-label {
  margin: 0 0 0.5rem;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--theme-ink-primary);
}

.ref-reg-sub {
  margin: 0.35rem 0 0;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.68rem;
  line-height: 1.6;
  color: var(--theme-ink-muted);
}

.ref-reg-statement {
  margin: 0;
  max-width: 66ch;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--theme-ink-primary);
  text-wrap: pretty;
}

.ref-reg-statement + .ref-reg-statement {
  margin-top: 0.7rem;
}

.ref-reg-clauses {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  margin: 0.8rem 0 0;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--theme-ink-secondary);
}

/* ---- Chips --------------------------------------------------------------- */

/*
 * The word carries the state. The colour is a second signal on top of the word
 * and never the first, so the register reads correctly in greyscale and to a
 * reader who cannot separate the hues.
 */
.ref-chip {
  align-self: start;
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--theme-ink-secondary);
}

.ref-chip--published {
  color: var(--theme-object-identity-ink);
}

.ref-chip--absent {
  color: var(--theme-ink-secondary);
}

.ref-chip--warning {
  color: var(--theme-status-warning-ink);
}

.ref-chip--muted {
  color: var(--theme-ink-muted);
}

/* ---- Tables -------------------------------------------------------------- */

/*
 * A wide table scrolls inside its own bordered box. The page itself must never
 * scroll sideways.
 */
.ref-table-scroll {
  overflow-x: auto;
  margin: 1.1rem 0 0;
  border: 1px solid var(--theme-rule-standard);
  border-radius: 3px;
}

.ref-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.ref-table caption {
  padding: 0.75rem 0.9rem;
  text-align: left;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
}

.ref-table th,
.ref-table td {
  padding: 0.7rem 0.9rem;
  text-align: left;
  border-top: 1px solid var(--theme-rule-subtle);
  white-space: nowrap;
}

.ref-table thead th {
  border-top: none;
  border-bottom: 1px solid var(--theme-rule-standard);
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
}

.ref-table tbody td {
  color: var(--theme-ink-primary);
  font-variant-numeric: tabular-nums;
}

/* A cell of prose is allowed to wrap, and to break a hash or a URL. */
.ref-table td.ref-cell-prose {
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 18rem;
  font-variant-numeric: normal;
}

/* ---- Figures ------------------------------------------------------------- */

/*
 * Every figure is set in the mono register with tabular numerals, so a column
 * of readings aligns on the decimal and a long figure scrolls within its own
 * cell rather than widening the page.
 */
.ref-figure {
  margin: 0;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
  overflow-x: auto;
}

/* ---- Links and controls -------------------------------------------------- */

.ref-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 1.9rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ref-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--theme-ink-link);
}

.ref-page a:focus-visible,
.ref-page summary:focus-visible {
  outline: 2px solid var(--theme-rule-focus, var(--theme-ink-link));
  outline-offset: 2px;
}

/* ---- Disclosure ---------------------------------------------------------- */

/* Native details/summary, so the disclosure works with no JavaScript. */
.ref-disclose {
  margin: 1.1rem 0 0;
  border-top: 1px solid var(--theme-rule-subtle);
}

.ref-disclose > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--theme-ink-primary);
}

.ref-disclose > summary::-webkit-details-marker {
  display: none;
}

.ref-disclose > summary::after {
  content: ' +';
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  opacity: 0.7;
}

.ref-disclose[open] > summary::after {
  content: ' \2212';
}

/* ---- Desktop ------------------------------------------------------------- */

/*
 * The side-head grid. Above 900px the label moves out of the reading column
 * into its own gutter, which is what lets a reference page occupy the full
 * spine without the prose ever exceeding its measure.
 */
@media (min-width: 900px) {
  .ref-page {
    padding: calc(var(--layout-nav-h) + 42px) var(--layout-gutter) 96px;
  }

  .ref-masthead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30rem;
    column-gap: var(--layout-sidehead-gap);
    align-items: end;
  }

  .ref-eyebrow {
    grid-column: 1 / -1;
    margin: 0 0 13px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--theme-rule-strong);
  }

  .ref-title {
    grid-column: 1;
    max-width: none;
    font-size: clamp(3.5rem, 5vw, 4.75rem);
    letter-spacing: -0.021em;
    line-height: 0.95;
  }

  .ref-standfirst {
    grid-column: 2;
    max-width: none;
    margin: 0;
    padding-bottom: 6px;
  }

  .ref-section-head,
  .ref-reg {
    display: grid;
    grid-template-columns: var(--layout-sidehead) minmax(0, 66ch);
    column-gap: var(--layout-sidehead-gap);
    align-items: start;
  }

  .ref-section-head h2 {
    grid-column: 1;
  }

  .ref-section-kicker,
  .ref-section-lede {
    grid-column: 2;
  }

  .ref-reg-head {
    grid-column: 1;
    grid-row: 1;
  }

  .ref-reg-label {
    padding-top: 4px;
  }

  .ref-reg-body {
    grid-column: 2;
    grid-row: 1;
  }
}

/* ---- Mobile -------------------------------------------------------------- */

@media (max-width: 34rem) {
  .ref-title {
    max-width: none;
    font-size: clamp(1.75rem, 8vw, 2.2rem);
  }
}

@media (pointer: coarse) {
  .ref-links a {
    min-height: 48px;
  }
}

/* ==========================================================================
   ROUTE APPLICATION
   ==========================================================================
   The three reference routes each grew their own label register, their own
   section rhythm and their own table treatment. Below, each route's existing
   vocabulary is mapped onto the one frozen register above.

   No class is renamed and no markup is required to change: every rule here is
   an override that lands after the route's own stylesheet. That is deliberate.
   The route classes are sampled by name in the contrast gate and matched by
   literal regex in several preservation guards, so renaming them would drop
   the pages out of their own coverage.
   ========================================================================== */

/* ---- /methodology -------------------------------------------------------- */

/*
 * Methodology has no stylesheet of its own: it renders from trust-register.css,
 * which it shares with /metrics and which this lane must not edit. Everything
 * below is therefore an override, and it is scoped to .mx-page so that nothing
 * here could reach /metrics even if the sheet were ever loaded there.
 *
 * The one substantive change is the label register. trust-register.css sets the
 * section label in var(--sans) at weight 700; the frozen system sets every label
 * in mono at weight 500 with 0.11em tracking. Colour roles are left exactly as
 * they are, so the contrast gate measures the same ratios it measured before.
 */
.mx-page .mx-section-title,
.mx-page .mx-hero-eyebrow,
.mx-page .mx-contents-label,
.mx-page .mx-boundary-label,
.mx-page .mx-lens-label,
.mx-page .mx-cv-label {
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-weight: 500;
  letter-spacing: 0.11em;
}

/* A figure is set in the mono register and aligns on the decimal. */
.mx-page .mx-cv-val,
.mx-page .meth-table tbody td {
  font-variant-numeric: tabular-nums lining-nums;
}

/*
 * The label/value registers on this page are the same object as the register
 * above: a side-head and a statement, separated by a hairline, closing against
 * a standard rule.
 */
.mx-page .mx-cv {
  border-top: 2px solid var(--theme-rule-strong);
  border-bottom: 1px solid var(--theme-rule-standard);
}

/*
 * The register closes on its container, not on its cells. trust-register.css
 * already gives every .mx-cv-cell a border-top, so a border-bottom here drew a
 * second hairline immediately below the first at every row boundary of the
 * two-column grid. The closing rule therefore moves up to .mx-cv, which is the
 * same object .ref-register states once above: a strong rule opens the
 * register, a hairline separates each row, and a standard rule closes it.
 *
 * This corrects a defect that was already rendering on /methodology across 19
 * cells. It is fixed here rather than on the route because /metrics carries 17
 * more cells of the same object and shares this sheet from Slice E onward.
 */
.mx-page .mx-cv-cell {
  min-width: 0;
}

/*
 * The two methodology tables scroll inside their own container, as the frozen
 * system requires and as the /metrics twin already does. trust-register.css
 * gives .mx-table-wrap a focus ring; .meth-table-wrap was never given the
 * matching treatment, so on a narrow screen these tables scrolled but could not
 * be reached or focused from the keyboard.
 */
.mx-page .meth-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--theme-rule-standard);
  border-radius: 3px;
}

.mx-page .meth-table-wrap:focus-visible {
  outline: 2px solid var(--theme-rule-focus, var(--theme-ink-link));
  outline-offset: 2px;
}

/* A formula is machine text: mono, tabular, and it breaks rather than widening
   the page. */
.mx-page .meth-formula-block,
.mx-page .mx-card-formula {
  font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: anywhere;
}

/* ---- /sources ------------------------------------------------------------ */

/*
 * Sources is already set on the shared type tokens, so only the tracking of the
 * label register differs from the frozen system. --type-label-ls is 0.13em
 * sitewide; the reference register is 0.11em. Nothing else is touched: the 29
 * selectors the contrast gate samples keep their colour roles and their sizes.
 */
.sources-eyebrow,
.sources-section-number,
.sources-section-label,
.sources-designated dt,
.sources-definitions dt,
.sources-treatment span,
.sources-history-class h3,
.sources-lineage-root,
.sources-matrix thead th,
.sources-matrix-role {
  letter-spacing: 0.11em;
}

/* ---- /transparency ------------------------------------------------------- */

/*
 * Transparency carried five near-identical label rules at three sizes and three
 * trackings. They are one register, so they are stated once.
 */
.st-tr-eyebrow,
.st-tr-label,
.st-tr-beta-eyebrow,
.st-tr-effect-label,
.st-tr-outcomes dt {
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* A state is a word, not a reading: the record-effect value stays in the
   reading face so it can never be scanned as a figure. */
.st-tr-effect-value {
  font-variant-numeric: normal;
}
/* ---- /metrics ------------------------------------------------------------ */

/*
 * Metrics is the register twin of /methodology. It shares trust-register.css
 * and it shares the .mx-page spine, so the six label rules above already reach
 * it: adding this sheet to the route is most of the convergence. What follows
 * is only what the methodology block could not state, because it named the
 * .meth-* half of a pair whose .mx-* half lives here.
 *
 * The header comment on the methodology block claims its .mx-page scope means
 * "nothing here could reach /metrics even if the sheet were ever loaded there".
 * That was never true: .mx-page is metrics' own spine class, on both the hero
 * and the body. The rules did reach it, and reaching it is correct. The claim
 * is corrected rather than the scope.
 *
 * As in Slice D, no colour role and no font-size is touched anywhere in this
 * file, so the contrast gate measures the same ratios it measured before.
 */

/*
 * The register's scroll container, stated once. trust-register.css gives
 * .meth-table-wrap and .mx-table-wrap the same overflow and nothing else; the
 * methodology block above then gave only .meth-table-wrap the container border
 * the frozen system requires. Its twin gets it here, so the two routes present
 * one object. The focus ring is already on .mx-table-wrap in trust-register.css
 * and is deliberately not restated.
 */
.mx-page .mx-table-wrap {
  border: 1px solid var(--theme-rule-standard);
  border-radius: 3px;
}

/*
 * The metrics-only half of the label register. These are the side-heads,
 * stamps and column heads that /methodology has no counterpart for, so the
 * six-selector rule above never named them. Same mono register, same weight,
 * same tracking.
 */
.mx-page .mx-scroll-hint,
.mx-page .mx-badge,
.mx-page .mx-active-label,
.mx-page .mx-lens-source,
.mx-page .mx-card-source,
.mx-page .mx-layer-table thead th,
.mx-page .mx-layer-table .mx-lt-cadence,
.mx-page .mx-layer-table td.mx-lt-status,
.mx-page .mx-velocity-kicker,
.mx-page .mx-velocity-fact-label {
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-weight: 500;
  letter-spacing: 0.11em;
}

/*
 * A figure aligns on the decimal wherever one is read against another: down a
 * register column, and between the two halves of the velocity readout.
 */
.mx-page .mx-layer-table tbody td,
.mx-page .mx-velocity-value,
.mx-page .mx-velocity-fact-value {
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---- /developers --------------------------------------------------------- */

/*
 * Developers has no stylesheet of its own; it renders from a page-local style
 * block. Every rule below is therefore scoped to .dev-hero or .dev-shell, the
 * page's two wrappers, because its class names are the most generic on the
 * site: .register, .section and .code-block would otherwise reach four other
 * routes.
 *
 * The class names themselves are matched by literal regex throughout
 * test-developer-api-docs.mjs, which re-derives every documented field from the
 * function source. Not one is renamed here.
 */
.dev-hero .dev-hero-eyebrow,
.dev-hero .addr-label,
.dev-shell .section-eyebrow,
.dev-shell .register,
.dev-shell .code-lang,
.dev-shell .jump-strip a,
.dev-shell .iface-table thead th,
.dev-shell .fields-table thead th,
.dev-shell .field-type,
.dev-shell .ew-preview-label,
.dev-shell .ew-code-label,
.dev-shell .ew-fact-title,
.dev-shell .agent-use-title {
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-weight: 500;
  letter-spacing: 0.11em;
}

/* A route, a field and a sample are machine text, and they break rather than
   widening the page. */
.dev-shell .iface-route,
.dev-shell .field-name,
.dev-shell .endpoint-route,
.dev-shell .install-cmd {
  font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: anywhere;
}

/* ---- /reports ------------------------------------------------------------ */

/*
 * Two vocabularies, one publication. The index grew a .report-sec family and
 * the dated report grew a near-identical .report-section family, with no shared
 * rule between them. They are not merged here, because a dated report is a
 * frozen artefact and its markup is reproduced by generate-monthly-report.mjs.
 * They are set in one register instead.
 */
.report-sec-eyebrow,
.report-kicker,
.report-latest-figure-label,
.report-hero-meta .report-pill,
.report-figure-label,
.report-section .report-table thead th {
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-weight: 500;
  letter-spacing: 0.11em;
}

/*
 * A monthly report is read by someone checking one month against another, so
 * every figure it states aligns on the decimal.
 */
.report-latest-figure-value,
.report-figure-value,
.report-section .report-table td {
  font-variant-numeric: tabular-nums lining-nums;
}

/* The archive scrolls inside its own container at every width, as the frozen
   system requires of any table. */
.report-section .report-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--theme-rule-standard);
  border-radius: 3px;
}

/* ---- /alerts ------------------------------------------------------------- */

/*
 * The alert history is a register of files, and it is the one route in this
 * slice that reached production carrying no webfont at all. It was set in the
 * system stack while every other page on the site, converged or not, loaded
 * Fraunces and IBM Plex. The three font lines added to the route's head are the
 * same three Slice D added to /transparency for the same reason.
 *
 * The ledger's own class names are matched by literal regex in
 * test-alerts-route.mjs, which reads the delivery statuses out of the markup.
 * None is renamed.
 */
.alerts-shell .alerts-eyebrow,
.alerts-shell .alerts-section-label,
.alerts-shell .alerts-meta,
.alerts-shell .alerts-ledger-status,
.alerts-shell .alerts-ledger-surface,
.alerts-shell .alerts-legend-code,
.alerts-shell .alert-card__kicker,
.alerts-shell .alert-card__id,
.alerts-shell .alert-pill {
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-weight: 500;
  letter-spacing: 0.11em;
}

.alerts-shell .alert-card__date,
.alerts-shell .alert-card__meta {
  font-variant-numeric: tabular-nums lining-nums;
}
/* ==========================================================================
   CONTRAST REMEDIATION
   ==========================================================================

   /reports, the dated report and /alerts reached production with text at up to
   1.01:1 on the light canvas, which is invisible. The cause is one block in
   tokens.css: a scoped compatibility treatment that holds .report-card,
   .report-figure, .report-pill and .alerts-panel to the FORMER DARK colour
   aliases, so that "paper ink never lands on a dark panel". Its own comment
   calls it temporary legibility treatment rather than a redesign.

   The treatment is now inverted on these routes, because the panels it protects
   no longer render dark. Measured on the light canvas: .report-card and
   .report-figure composite to fully transparent over #F6F3EC paper, and
   .alerts-panel renders #FAF8F3, which is lighter than the page. Dark-mapped
   ink at #F3F5F7 and #A8B0BA is then painted onto near-white paper.

   These rules return the affected components to page-level theming, and drop
   the two hardcoded rgba(17,21,28,...) fills that have no light counterpart, so
   a chip becomes an outlined object exactly as .ref-chip above already is.

   tokens.css is NOT edited. That block is shared with /issuers, /partners,
   /metrics and the code blocks, and unpicking it belongs to its own lane. No
   page markup is edited either: this sheet loads after every page's own
   <style>, which is what keeps the frozen dated report intact.

   No font-size, weight, tracking, spacing or layout changes. No figure, date,
   label or sentence changes.
   ========================================================================== */

/*
 * Return the locked components to the page's own theme roles. Each alias takes
 * `inherit`, which resolves to the value the page already computed on the
 * ancestor, so light stays light and dark stays dark with no value restated
 * here and nothing to drift from tokens.css.
 */
.report-sec .report-card,
.report-figure,
.report-hero-meta .report-pill,
.alerts-shell .alerts-panel {
  --theme-ink-primary: inherit;
  --theme-ink-secondary: inherit;
  --theme-ink-muted: inherit;
  --theme-ink-link: inherit;
  --theme-ink-link-hover: inherit;
  --theme-rule-subtle: inherit;
  --theme-rule-standard: inherit;
  --text: inherit;
  --text-secondary: inherit;
  --text-muted: inherit;
  --text-faint: inherit;
  --label-muted: inherit;
  --accent: inherit;
  --accent-light: inherit;
  --border: inherit;
  --border-hairline: inherit;
}

/* The two remaining dark fills. Outlined in both themes, like every other chip
   in this sheet. */
.report-hero-meta .report-pill,
.related-grid a {
  background: transparent;
  border-color: var(--theme-rule-standard);
}

/*
 * Three registers that were set in the disabled ink role. A column head and a
 * figure label are read, not decorative, so they take the secondary role. This
 * is the one correction that also applies in dark, where .report-table th
 * measured 3.25:1.
 */
.report-section .report-table th,
.report-figure .report-figure-label,
.report-sec .report-kicker {
  color: var(--theme-ink-secondary);
}


/* ---- the legacy accent eyebrow, the last light-mode failure ---------------- */

/*
 * Five registers across three routes were still set in the legacy --accent,
 * which resolves to a fixed blue that measures 3.70:1 on the paper canvas at
 * 10 to 11px. That is a real AA failure for small text, and it is the same
 * defect on every one of them, so it is corrected once rather than per route.
 *
 * An eyebrow is a label, so it takes the label role the register above already
 * uses. The card's call to action is a link, so it takes the link role rather
 * than the label role: it is the one of the five that a reader is meant to
 * click, and flattening it into label ink would remove the only affordance
 * saying so.
 *
 * Correction. The earlier .alerts-shell .alerts-eyebrow rule DOES match: <main>
 * itself carries .alerts-shell, so .alerts-hero is a descendant of it and the
 * selector resolves to two elements. It was never the nesting. That rule sets
 * only the type register, never a colour, so the eyebrow kept the legacy accent
 * regardless of matching.
 *
 * What hid it was the measurement, not the markup. The gate that reported these
 * routes clear did not apply element opacity. At opacity 1 the accent reads
 * 5.75:1 and passes; at the 0.78 these cards set, it reads 3.70:1 and fails.
 * Any later contrast check on this sheet must composite cumulative opacity, or
 * it will report this same class of failure as passing.
 */
.report-sec-eyebrow,
.alerts-hero .alerts-eyebrow,
.dev-hero .dev-hero-eyebrow {
  color: var(--theme-ink-secondary);
}

/*
 * The card's own rule also sets opacity: 0.78 on this span, which composites the
 * ink back towards the paper and costs the contrast the colour above restores.
 * Measured, the colour alone still lands at 3.68:1. Opacity is the carrier of the
 * failure here, so it is the thing corrected; nothing else about the element
 * changes, and no other element's opacity is touched.
 */
.report-latest-card .report-latest-cta {
  color: var(--theme-ink-link);
  opacity: 1;
}