/**
 * Stable Briefing Beta.
 *
 * Built on the shared theme tokens so the Briefing reads as the same publication
 * as the record it cites, and so light and dark are one definition rather than two.
 *
 * The chart styles below dress first-party SVG series of ALREADY-PUBLISHED values, authorised on
 * 7 September 2026. They set colour, size and spacing only: no rule here can add, move or invent a
 * data point, and the absence of a reading is expressed by the series itself, not by a decoration.
 */

.briefing-body {
  background: var(--theme-surface-page);
  color: var(--theme-ink-primary);
}

.briefing-page {
  max-width: var(--layout-box-page, 1328px);
  margin: 0 auto;
  padding: 2rem clamp(1.25rem, 4vw, 3.5rem) 4rem;
}

/* ---- Head ---------------------------------------------------------------- */

.briefing-eyebrow {
  margin: 0 0 0.5rem;
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
}

.briefing-beta {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.08rem 0.4rem;
  border: 1px solid var(--theme-rule-standard);
  border-radius: 2px;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--theme-ink-secondary);
}

.briefing-head h1 {
  margin: 0;
  font-family: var(--serif-display, Georgia, serif);
  font-size: clamp(1.7rem, 5.5vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.briefing-identity {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  align-items: center;
  margin: 0.85rem 0 0;
  font-size: 0.78rem;
  color: var(--theme-ink-muted);
}

.briefing-identity-item {
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.72rem;
}

.briefing-chip {
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--theme-rule-standard);
  border-radius: 2px;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--theme-ink-secondary);
  background: var(--theme-surface-inset);
}

.briefing-chip--withdrawn {
  border-color: var(--theme-rule-strong, var(--theme-rule-standard));
  color: var(--theme-ink-primary);
}

/* A record fixed under a superseded regime says so, so a reader never assumes
   the current cutoff applied to an older reading. */
.briefing-regime-note {
  margin: 0.9rem 0 0;
  padding: 0.55rem 0.75rem;
  border-left: 3px solid var(--theme-rule-strong);
  background: var(--theme-surface-inset);
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--theme-ink-secondary);
}

.briefing-lede {
  margin: 1rem 0 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--theme-ink-secondary);
}

.briefing-withdrawn {
  margin: 1.5rem 0 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--theme-rule-standard);
  border-left-width: 3px;
  border-radius: 3px;
  background: var(--theme-surface-inset);
}

.briefing-withdrawn p {
  margin: 0;
  line-height: 1.55;
  font-size: 0.92rem;
}

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

.briefing-section {
  margin: 2.75rem 0 0;
  padding: 1.75rem 0 0;
  border-top: 1px solid var(--theme-rule-standard);
}

.briefing-section h2 {
  margin: 0 0 0.5rem;
  font-family: var(--serif-display, Georgia, serif);
  font-size: 1.2rem;
  line-height: 1.3;
}

.briefing-section h3 {
  margin: 1.5rem 0 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
}

.briefing-section-lede {
  margin: 0 0 1.15rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--theme-ink-secondary);
}

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

/* Each figure carries its own border rather than relying on gaps over a tinted
   container. The number of figures varies with what the record publishes, so a
   row that does not fill must fall back to page ground, not to a coloured
   block where a figure would have been. */
.briefing-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.7rem;
}

.briefing-figure {
  padding: 1rem 1.05rem 1.1rem;
  background: var(--theme-surface-raised);
  border: 1px solid var(--theme-rule-standard);
  border-radius: 3px;
}

.briefing-figure-label {
  margin: 0 0 0.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
}

.briefing-figure-value {
  margin: 0;
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: clamp(1.05rem, 3.4vw, 1.3rem);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow-x: auto;
}

.briefing-figure-note {
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--theme-ink-muted);
}

/* ---- Facts --------------------------------------------------------------- */

.briefing-fact-list {
  margin: 0;
  padding: 0 0 0 1.2rem;
}

.briefing-fact-list li {
  margin: 0 0 0.7rem;
  line-height: 1.6;
}

.briefing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 1.35rem 0 0;
}

.briefing-btn {
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--theme-ink-primary);
  border-radius: 3px;
  background: var(--theme-ink-primary);
  color: var(--theme-ink-inverse);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.briefing-btn--secondary {
  background: transparent;
  color: var(--theme-ink-primary);
}

.briefing-btn:hover { opacity: 0.86; }

.briefing-btn:focus-visible {
  outline: 2px solid var(--theme-ink-primary);
  outline-offset: 2px;
}

.briefing-copy-status {
  font-size: 0.8rem;
  color: var(--theme-ink-muted);
}

.briefing-cite-preview {
  margin: 1rem 0 0;
  padding: 0.85rem 0.95rem;
  border: 1px dashed var(--theme-rule-standard);
  border-radius: 3px;
  background: var(--theme-surface-inset);
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--theme-ink-secondary);
  overflow-wrap: anywhere;
}

/* Off-screen rather than display:none, so the value stays selectable by the
   clipboard fallback in browsers without the async clipboard API. */
.briefing-hidden-source {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* ---- Press graphic ------------------------------------------------------- */

.briefing-card-link {
  display: block;
  border: 1px solid var(--theme-rule-standard);
  border-radius: 3px;
  overflow: hidden;
}

.briefing-card-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- Windows ------------------------------------------------------------- */

.briefing-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--theme-rule-standard);
  border-radius: 3px;
}

.briefing-window-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.briefing-window-table caption {
  padding: 0.6rem 0.75rem;
  text-align: left;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--theme-ink-muted);
  border-bottom: 1px solid var(--theme-rule-standard);
}

.briefing-window-table th,
.briefing-window-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--theme-rule-standard);
  white-space: nowrap;
}

.briefing-window-table thead th {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
  font-weight: 500;
}

.briefing-window-table tbody th {
  font-weight: 500;
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
}

.briefing-window-table tbody td {
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
}

.briefing-window-table tbody tr:last-child th,
.briefing-window-table tbody tr:last-child td {
  border-bottom: 0;
}

.briefing-window-table tr.is-current {
  background: var(--theme-surface-inset);
}

.briefing-window-gap,
.briefing-window-empty {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--theme-ink-muted);
}

/* ---- Omissions ----------------------------------------------------------- */

.briefing-omit-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--theme-rule-standard);
}

.briefing-omit-list li {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 1fr;
  gap: 0.35rem 1.1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--theme-rule-standard);
}

.briefing-omit-name {
  font-size: 0.8rem;
  font-weight: 500;
}

.briefing-omit-why {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--theme-ink-secondary);
}

/* ---- Provenance ---------------------------------------------------------- */

.briefing-link-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.briefing-link-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.6rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--theme-rule-standard);
}

.briefing-link-list li span {
  font-size: 0.8rem;
  color: var(--theme-ink-muted);
}

.briefing-scope-note {
  margin: 1.25rem 0 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--theme-ink-muted);
}

/* ---- Pager --------------------------------------------------------------- */

.briefing-pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 2.5rem 0 0;
  padding: 1.15rem 0 0;
  border-top: 1px solid var(--theme-rule-standard);
  font-size: 0.85rem;
}

.briefing-pager-link--next,
.briefing-pager-empty--next {
  margin-left: auto;
  text-align: right;
}

.briefing-pager-empty {
  color: var(--theme-ink-muted);
}

@media (max-width: 30rem) {
  .briefing-omit-list li {
    grid-template-columns: 1fr;
  }
}

/* ---- Daily Stable Briefing signup ---------------------------------------- */

/* The signup is deliberately quieter than the reading it sits under. On the
   homepage doorway that is a hard requirement: the form must never be the
   largest thing on a page whose subject is the Daily Tape. */

.briefing-signup {
  padding: 1.15rem 1.15rem 1.25rem;
  border: 1px solid var(--theme-rule-standard);
  border-radius: 4px;
  background: var(--theme-surface-inset);
}

.briefing-signup-heading {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
}

.briefing-signup-lede {
  margin: 0.5rem 0 0;
  max-width: 46ch;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--theme-ink-secondary);
}

.briefing-signup-lede--terse {
  margin-top: 0.25rem;
  color: var(--theme-ink-muted);
}

.briefing-signup-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem;
  margin: 0.95rem 0 0;
}

.briefing-signup-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.briefing-signup-field--email {
  flex: 1 1 16rem;
}

.briefing-signup-label {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
}

.briefing-signup-hint {
  text-transform: none;
  letter-spacing: 0;
}

.briefing-signup-input {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--theme-rule-strong);
  border-radius: 3px;
  background: var(--theme-surface-page);
  color: var(--theme-ink-primary);
  font: inherit;
  font-size: 0.9rem;
}

.briefing-signup-input:focus-visible {
  outline: 2px solid var(--theme-ink-primary);
  outline-offset: 1px;
}

.briefing-signup-submit {
  flex: 0 0 auto;
}

.briefing-signup-optional {
  /* A flex child of .briefing-signup-form: it must claim its own row rather than sit beside the
     email field. It lives inside the form because inputs outside a form are never submitted. */
  flex: 1 0 100%;
  margin: 0.9rem 0 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--theme-rule-standard);
}

.briefing-signup-optional-lede {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--theme-ink-muted);
}

.briefing-signup-optional-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.6rem 0 0;
}

.briefing-signup-optional-fields .briefing-signup-field {
  flex: 1 1 12rem;
}

.briefing-signup-note {
  margin: 0.95rem 0 0;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--theme-ink-muted);
}

.briefing-signup--compact {
  padding: 0.95rem 1rem 1.05rem;
}

.briefing-signup--compact .briefing-signup-heading {
  font-size: 0.95rem;
}

@media (max-width: 30rem) {
  .briefing-signup-form {
    flex-direction: column;
    align-items: stretch;
  }

  .briefing-signup-submit {
    width: 100%;
  }
}

/* The Netlify Forms honeypot. Removed from layout and from the accessibility tree: it exists for
   bots, and a reader who can see or reach it will fill it and have their signup silently discarded.
   Not `display:none`, which some bots skip. */
.briefing-signup-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
 * Stable Briefing V2
 *
 * The hero gives ODS the page and lets the supporting figures sit under it, because ODS is the
 * reading this publication exists to state. Everything below is theme-token only, so the dark
 * rendering is the same file rather than a second design.
 * ======================================================================== */

.briefing-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.briefing-hero {
  border-top: 2px solid var(--theme-rule-strong);
  padding-top: 1.5rem;
}

.briefing-lead {
  margin: 0 0 1.75rem;
}

.briefing-lead-label {
  margin: 0;
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
}

.briefing-lead-value {
  margin: 0.15rem 0 0;
  font-family: var(--serif-display, Georgia, serif);
  font-size: clamp(3.2rem, 14vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--theme-ink-primary);
}

.briefing-lead-value--absent {
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  color: var(--theme-ink-muted);
}

.briefing-lead-unit {
  font-size: 0.45em;
  margin-left: 0.06em;
  letter-spacing: 0;
  color: var(--theme-ink-secondary);
}

.briefing-lead-sub {
  margin: 0.5rem 0 0;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--theme-ink-secondary);
  max-width: 34rem;
}

.briefing-lead-raw {
  margin: 0.35rem 0 0;
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.72rem;
  color: var(--theme-ink-muted);
}

/* ---- What changed -------------------------------------------------------- */

.briefing-changed-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--theme-rule-subtle);
}

.briefing-changed-list li {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--theme-rule-subtle);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--theme-ink-primary);
}

/* ---- Charts -------------------------------------------------------------- */

.briefing-panel {
  margin: 0 0 2.25rem;
  padding: 1.1rem 1.1rem 1.2rem;
  border: 1px solid var(--theme-rule-subtle);
  border-radius: 3px;
  background: var(--theme-chart-surface, var(--theme-surface-raised));
}

.briefing-panel-h {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: var(--theme-ink-primary);
}

.briefing-panel-note {
  margin: 0.35rem 0 1rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--theme-ink-muted);
  max-width: 40rem;
}

.briefing-chart-frame {
  display: flex;
  gap: 0.6rem;
  align-items: stretch;
}

.briefing-chart-scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 0 0 auto;
  padding: 0.1rem 0;
}

.briefing-chart-bound {
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.68rem;
  line-height: 1;
  color: var(--theme-ink-muted);
  white-space: nowrap;
}

.briefing-chart-plot {
  flex: 1 1 auto;
  min-width: 0;
}

.briefing-chart {
  display: block;
  width: 100%;
  height: 190px;
}

.briefing-chart-dates {
  display: flex;
  justify-content: space-between;
  margin: 0.3rem 0 0;
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.68rem;
  color: var(--theme-ink-muted);
}

/*
 * The absence line. Deliberately quiet: it states the count once and does not compete with the
 * series, because a break in the line is already the honest visual statement.
 */
.briefing-chart-absence {
  margin: 0.7rem 0 0;
  font-size: 0.76rem;
  color: var(--theme-ink-muted);
}

.briefing-table-details {
  margin: 0.9rem 0 0;
}

.briefing-table-details summary {
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--theme-ink-link);
  padding: 0.3rem 0;
}

.briefing-table-details summary:focus-visible {
  outline: 2px solid var(--theme-focus-ring);
  outline-offset: 2px;
}

.briefing-table-details[open] summary {
  margin-bottom: 0.5rem;
}

/* ---- Use this edition ---------------------------------------------------- */

.briefing-pack {
  margin: 1.6rem 0 0;
  padding: 0.9rem 1rem;
  border: 1px dashed var(--theme-rule-standard);
  border-radius: 3px;
  background: var(--theme-surface-inset);
}

.briefing-pack-h {
  margin: 0 0 0.35rem;
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--theme-ink-secondary);
}

.briefing-pack-note {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--theme-ink-muted);
}

/* ---- Reference and quiet sections --------------------------------------- */

.briefing-meta-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.briefing-meta-table th,
.briefing-meta-table td {
  text-align: left;
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--theme-rule-subtle);
  vertical-align: top;
}

.briefing-meta-table th {
  font-weight: 500;
  color: var(--theme-ink-muted);
  white-space: nowrap;
}

.briefing-meta-table td {
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.78rem;
  color: var(--theme-ink-primary);
  overflow-wrap: anywhere;
}

.briefing-quiet-line {
  margin: 0 0 0.6rem;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--theme-ink-secondary);
}

.briefing-quiet-line:last-child {
  margin-bottom: 0;
}

/* ---- 390px ---------------------------------------------------------------
 * The chart keeps a usable height rather than collapsing with its aspect ratio, and the axis
 * labels are HTML so they never shrink with the drawing.
 * ------------------------------------------------------------------------ */

@media (max-width: 30rem) {
  .briefing-page {
    padding: 1.75rem 1rem 3rem;
  }

  .briefing-panel {
    padding: 0.9rem 0.75rem 1rem;
  }

  .briefing-chart {
    height: 150px;
  }

  .briefing-chart-frame {
    gap: 0.45rem;
  }

  .briefing-chart-bound,
  .briefing-chart-dates {
    font-size: 0.66rem;
  }

  .briefing-actions .briefing-btn {
    flex: 1 1 100%;
  }
}

/* ---- Distribution pack ---------------------------------------------------
 * The open state is a single primary action plus the verification line. The
 * archive size sits inside the control because a reader deciding whether to
 * pull 0.5 MB on mobile should not have to hunt for it.
 * ------------------------------------------------------------------------ */

.briefing-pack--open {
  border-style: solid;
  border-color: var(--theme-rule-standard);
  background: var(--theme-surface-raised);
}

.briefing-pack-actions {
  margin: 0.9rem 0 0;
}

.briefing-btn--pack {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  text-decoration: none;
}

.briefing-pack-size {
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.72rem;
  opacity: 0.75;
}

.briefing-pack-verify {
  margin: 0.9rem 0 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--theme-ink-muted);
}

.briefing-pack-verify code {
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

@media (max-width: 30rem) {
  .briefing-btn--pack {
    width: 100%;
    justify-content: center;
  }
}

/* ---- The approved treatment ----------------------------------------------
 * Ported from the frozen Distribution Pack design. Three things only: more air
 * between the record and what follows it, one clear primary action, and an
 * inventory that stays shut until a reader opens the part they came for.
 *
 * The spacing deltas are the design's own: hero top 40 -> 48, provenance rule
 * 28 -> 44 below the hero, action row 26 -> 36 above with a 12px gap, and the
 * inventory rows at 26/28 rather than sharing a bar with everything else.
 * ------------------------------------------------------------------------ */

.briefing-cadence {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--theme-ink-muted);
}

.briefing-section {
  margin-top: 3.5rem;
  padding-top: 2.25rem;
}

.briefing-use .briefing-actions {
  margin-top: 2.25rem;
  gap: 0.75rem;
}

.briefing-btn--primary {
  font-weight: 600;
}

.briefing-btn-spec {
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.72rem;
  opacity: 0.75;
}

a.briefing-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  text-decoration: none;
}

.briefing-actions-sub {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
}

/* Progressive disclosure. Shut by default; the summary is the whole hit area. */
.briefing-disclose {
  margin: 1.75rem 0 0;
  border-top: 1px solid var(--theme-rule-subtle, var(--theme-rule-standard));
}

.briefing-disclose > summary {
  padding: 0.9rem 0;
  font-size: 0.85rem;
  color: var(--theme-ink-secondary);
  cursor: pointer;
  list-style: none;
}

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

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

.briefing-disclose[open] > summary::after { content: ' 3'; }

.briefing-disclose > summary:hover { color: var(--theme-ink-primary); }

.briefing-disclose > summary:focus-visible {
  outline: 2px solid var(--theme-ink-primary);
  outline-offset: 2px;
}

/* The pack inventory: three intent rows, any number of them open at once. */
.briefing-intents {
  margin: 1.4rem 0 0;
}

.briefing-intent {
  border-top: 1px solid var(--theme-rule-standard);
}

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

.briefing-intent-summary {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 1.6rem 0 1.75rem;
  cursor: pointer;
  list-style: none;
}

.briefing-intent-summary::-webkit-details-marker { display: none; }

.briefing-intent-summary:focus-visible {
  outline: 2px solid var(--theme-ink-primary);
  outline-offset: 2px;
}

.briefing-intent-n {
  flex: none;
  width: 1.75rem;
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.72rem;
  color: var(--theme-ink-muted);
}

.briefing-intent-name {
  flex: 1 1 auto;
  font-family: var(--serif-display, Georgia, serif);
  font-size: 1.15rem;
  line-height: 1.2;
}

.briefing-intent-summary:hover .briefing-intent-name { color: var(--theme-link, inherit); }

.briefing-intent-count {
  flex: none;
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.72rem;
  color: var(--theme-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.briefing-intent-desc {
  margin: 0 0 0.9rem 2.65rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--theme-ink-secondary);
}

.briefing-intent-files {
  margin: 0 0 1.75rem 2.65rem;
  padding: 0;
  list-style: none;
}

.briefing-intent-files li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--theme-rule-subtle, var(--theme-rule-standard));
  font-size: 0.82rem;
}

.briefing-intent-fmt {
  flex: none;
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.68rem;
  color: var(--theme-ink-muted);
  letter-spacing: 0.08em;
}

/* ---- Mobile: share-first, and every action a full-width 48px target ------ */
@media (max-width: 30rem) {
  .briefing-use .briefing-actions .briefing-btn {
    flex: 1 1 100%;
    justify-content: center;
    min-height: 48px;
    align-items: center;
  }

  .briefing-intent-desc,
  .briefing-intent-files {
    margin-left: 0;
  }

  .briefing-intent-summary {
    flex-wrap: wrap;
    padding: 1.4rem 0 1.5rem;
  }

  .briefing-intent-count {
    width: 100%;
    padding-left: 2.65rem;
  }
}



/* ==========================================================================
   THE CONVERGENCE LAYER
   --------------------------------------------------------------------------
   The Briefing composed as the Distribution Pack composes it: an oxide-dot
   eyebrow, a fact as the headline, the share actions inside the opening block,
   the lead graphic beside them, then the record strip on a heavy rule.

   Everything below is scoped to the Briefing's own classes. No rule here
   reaches nav, footer, the theme control or any other surface, and every colour
   resolves through a theme token so light, dark and the system default are one
   definition rather than three.
   ========================================================================== */

/* ---- The opening block --------------------------------------------------- */

/*
 * Two columns on a wide viewport, and DOM order is already reading order:
 * headline, lede, actions, then the graphic. The mobile rule below does not
 * reorder anything, it only stops the columns, so keyboard order and reading
 * order stay identical at every width.
 */
.briefing-open {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 0 clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding: 0 0 2rem;
}

.briefing-open-lead { min-width: 0; }
.briefing-open-aside { min-width: 0; }

/* The oxide dot is the record's identity mark. It is decorative: the eyebrow
   text carries the same information in words. */
.briefing-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--theme-object-identity-ink);
  flex: none;
}

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

.briefing-eyebrow-date { color: var(--theme-ink-secondary); }
.briefing-eyebrow-sep { color: var(--theme-ink-muted); }

/*
 * The headline is a sentence, not a label, so it is set at reading rhythm and
 * capped at roughly 22 characters a line: a fact-led headline that runs the full
 * width of a 1328px spine stops being readable as a sentence.
 */
.briefing-headline {
  margin: 1rem 0 0;
  max-width: 22ch;
  font-family: var(--serif-display, Georgia, serif);
  font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.022em;
  text-wrap: pretty;
  color: var(--theme-ink-primary);
}

.briefing-open .briefing-lede {
  margin: 1.3rem 0 0;
  max-width: 48ch;
}

.briefing-actions--open { margin-top: 1.9rem; }

.briefing-open-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  margin: 1rem 0 0;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- The lead graphic ---------------------------------------------------- */

/*
 * The frame declares the asset's real 16:9 ratio, so the box never reserves the
 * wrong shape and the provenance stamp along the foot of the image is never
 * cropped away. object-fit is deliberately absent: the image is shown whole or
 * not at all.
 */
.briefing-lead-figure { margin: 0.35rem 0 0; }

.briefing-lead-graphic {
  display: block;
  border: 1px solid var(--theme-rule-standard);
  background: var(--theme-surface-inset);
  line-height: 0;
}

.briefing-lead-graphic:hover { border-color: var(--theme-ink-link); }

.briefing-lead-graphic:focus-visible {
  outline: 2px solid var(--theme-rule-focus);
  outline-offset: 2px;
}

.briefing-lead-graphic img {
  display: block;
  width: 100%;
  height: auto;
}

.briefing-lead-caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin: 0.6rem 0 0;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
}

.briefing-lead-formats { display: flex; gap: 0.4rem; }

.briefing-fmt {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 0.6rem;
  border: 1px solid var(--theme-rule-interactive);
  color: var(--theme-ink-primary);
  text-decoration: none;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
}

.briefing-fmt:hover { color: var(--theme-ink-link); border-color: var(--theme-ink-link); }

.briefing-lead-open {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
}

/* ---- The record strip ---------------------------------------------------- */

/*
 * One object, four cells, on a heavy rule. The first cell is wider because the
 * supply figure is the longest string on the strip and must not be the one that
 * wraps.
 */
.briefing-strip {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1fr;
  gap: 1.25rem 2rem;
  border-top: 2px solid var(--theme-rule-strong);
  padding: 1.35rem 0 0;
  margin: 0.75rem 0 0;
}

.briefing-strip-cell { min-width: 0; }

.briefing-strip-label {
  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);
}

.briefing-strip-value {
  margin: 0.55rem 0 0;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--theme-ink-primary);
}

.briefing-strip-value--serif {
  font-family: var(--serif-display, Georgia, serif);
  font-weight: 500;
  font-size: clamp(2rem, 3vw, 2.9rem);
  line-height: 0.95;
  letter-spacing: -0.028em;
}

.briefing-strip-value--mono {
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/*
 * A state is a word, not a number. It is set in the label register so it can
 * never be mistaken for a reading, and it is allowed to wrap.
 */
.briefing-strip-value--state {
  margin-top: 0.85rem;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--theme-ink-secondary);
}

.briefing-strip-value--positive { color: var(--theme-status-positive-ink); }
.briefing-strip-value--negative { color: var(--theme-status-negative-ink); }
.briefing-strip-value--absent { color: var(--theme-ink-muted); }

.briefing-strip-note {
  margin: 0.7rem 0 0;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--theme-ink-secondary);
}

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

.briefing-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);
}

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

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

/* ---- Section heads ------------------------------------------------------- */

.briefing-section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem 1rem;
}

.briefing-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);
}

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

/*
 * A side-head, a statement, a chip. The chip is never the only carrier of the
 * state: the statement beside it says the same thing in words, so the register
 * survives greyscale, a colour-blind reader and a screen reader alike.
 */
.briefing-register {
  margin: 1.1rem 0 0;
  border-top: 2px solid var(--theme-rule-strong);
}

.briefing-reg {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr) auto;
  gap: 0 2.5rem;
  align-items: start;
  padding: 1.15rem 0 1.25rem;
  border-bottom: 1px solid var(--theme-rule-subtle);
}

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

.briefing-reg-head { min-width: 0; }

.briefing-reg-label {
  margin: 0;
  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);
}

.briefing-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);
}

.briefing-reg-body { min-width: 0; }

.briefing-reg-statement {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--theme-ink-primary);
  max-width: 62ch;
  text-wrap: pretty;
}

.briefing-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 --------------------------------------------------------------- */

/*
 * Four states, four words. The colour is a second signal on top of the word and
 * never the first: PUBLISHED and NOT PUBLISHED are legible as different states
 * with every colour stripped out.
 */
.briefing-chip--published { color: var(--theme-object-identity-ink); }
.briefing-chip--absent { color: var(--theme-ink-secondary); }
.briefing-chip--notadmitted { color: var(--theme-status-warning-ink); }
.briefing-chip--unknown { color: var(--theme-status-warning-ink); }
.briefing-chip--other { color: var(--theme-ink-muted); }

.briefing-chip--published,
.briefing-chip--absent,
.briefing-chip--notadmitted,
.briefing-chip--unknown,
.briefing-chip--other {
  align-self: start;
  border-color: currentColor;
  white-space: nowrap;
}

/* ---- Buttons ------------------------------------------------------------- */

/*
 * There is one primary action and it is filled. `.briefing-btn` already states
 * both its ink and its ground, so the secondary variant only has to hollow it
 * out. Every control clears a 44px target.
 */
.briefing-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  text-decoration: none;
}

.briefing-btn--primary { text-decoration: none; }

.briefing-btn-spec {
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* ---- The close: next edition beside the signup --------------------------- */

.briefing-close {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 clamp(2rem, 5vw, 3.5rem);
  align-items: start;
  border-top: 2px solid var(--theme-rule-strong);
  padding-top: 2rem;
}

.briefing-next-h {
  margin: 0.9rem 0 0;
  max-width: 22ch;
  font-family: var(--serif-display, Georgia, serif);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.014em;
  color: var(--theme-ink-primary);
}

.briefing-next-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  margin: 1rem 0 0;
  font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.briefing-next-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.briefing-close-signup { min-width: 0; }
.briefing-close-signup .briefing-signup { margin-top: 0; }

/* ==========================================================================
   MOBILE RECOMPOSITION
   --------------------------------------------------------------------------
   The page recomposes rather than shrinking. Columns stop, the strip becomes a
   two-up block with the supply figure spanning it, and the register's side-head
   moves above its statement. No rule reorders anything: DOM order is reading
   order and keyboard order at every width.
   ========================================================================== */

@media (max-width: 60rem) {
  .briefing-open,
  .briefing-close {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem 0;
  }

  .briefing-open-aside { order: 0; }

  .briefing-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.5rem;
  }

  .briefing-strip-cell--supply {
    grid-column: 1 / -1;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--theme-rule-subtle);
  }

  .briefing-reg {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem 1rem;
  }

  .briefing-reg-body { grid-column: 1 / -1; }
}

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

  .briefing-strip { grid-template-columns: minmax(0, 1fr); }

  .briefing-strip-cell--supply { border-bottom: 0; padding-bottom: 0; }

  /* A full-width control is easier to hit than a 44px one crowded beside two
     others, and the primary stays first in the column. */
  .briefing-actions--open .briefing-btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }

  .briefing-lead-caption { font-size: 0.65rem; }
}

/* ---- The two-column reading block ---------------------------------------- */

/*
 * "What changed" beside the short chart, as the design opens the reading. They
 * are one thought: the sentences say what moved, the chart shows the shape of
 * the fixings those sentences come from. Below 60rem they stack, sentences
 * first, because the sentences are the load-bearing half.
 */
.briefing-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 clamp(2rem, 4vw, 3rem);
  align-items: start;
}

.briefing-duo > .briefing-section { min-width: 0; }

.briefing-section--panel { padding-top: 0; }
.briefing-section--panel .briefing-panel { margin-bottom: 0; }

@media (max-width: 60rem) {
  .briefing-duo { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ---- Touch targets ------------------------------------------------------- */

/*
 * The mono link line and the "open the graphic" line are controls, not prose, so
 * they take the 44px target the rest of the controls take. The format chips keep
 * the 32px height the design draws them at on a mouse, and grow to a real target
 * where the pointer is a finger: density where it is safe, reach where it is not.
 */
.briefing-open-links a,
.briefing-lead-open a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

@media (pointer: coarse) {
  .briefing-fmt { min-height: 44px; padding: 0 0.85rem; }

  .briefing-open-links a,
  .briefing-lead-open a { min-height: 48px; }
}