/* Mettle Labs / Disclosure Tracker
   Brand tokens are taken from mettlelabs.ai (see README). Every colour is a
   token on :root. The dark set is declared twice on purpose: once for the OS
   setting (unless the viewer forced light) and once for the manual toggle.
   No font shorthand is used below, so font-variant-numeric (tabular figures)
   is inherited by every number on the page. */

:root {
  /* type: the site's own stacks */
  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* shape, motion, measure */
  --radius: .5rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --wrap: min(100% - 3rem, 64rem);

  /* light (brand) */
  color-scheme: light;
  --bg: #faf9f6;
  --fg: #20201e;
  --muted: #6b675f;
  --soft: #efece4;
  --hover: #f6f4f0;
  --line: #e3dfd5;
  --line-2: #cfcabd;
  --accent: #b4532a;
  --accent-strong: #8f3b19;
  --on-accent: #faf9f6;
  --ring: #b4532a;
  /* severity: semantic, kept apart from the accent */
  --sev-high: #b4532a;
  --sev-high-bg: #f1e3db;
  --sev-high-ink: #8c3a18;
  --sev-med: #c58d04;
  --sev-med-bg: #efe3c6;
  --sev-med-ink: #6b4a00;
  /* pipeline: one-hue ramp, quiet to vivid */
  --pipe-1: #df9b81;
  --pipe-2: #cc7755;
  --pipe-3: #b4532a;
  --ribbon-a: .2;
  /* neutral series ink for nominal bars */
  --bar: #6b675f;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1a1a18;
    --fg: #ededea;
    --muted: #a3a097;
    --soft: #2a2a27;
    --hover: #20201e;
    --line: #33322e;
    --line-2: #4a4943;
    --accent: #d9693d;
    --accent-strong: #f08a5f;
    --on-accent: #1a1a18;
    --ring: #d9693d;
    --sev-high: #d9693d;
    --sev-high-bg: #3c281f;
    --sev-high-ink: #f0a07f;
    --sev-med: #e8b04a;
    --sev-med-bg: #3b3220;
    --sev-med-ink: #f0c978;
    --pipe-1: #8a4a31;
    --pipe-2: #b25a37;
    --pipe-3: #d9693d;
    --ribbon-a: .3;
    --bar: #a3a097;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1a1a18;
  --fg: #ededea;
  --muted: #a3a097;
  --soft: #2a2a27;
  --hover: #20201e;
  --line: #33322e;
  --line-2: #4a4943;
  --accent: #d9693d;
  --accent-strong: #f08a5f;
  --on-accent: #1a1a18;
  --ring: #d9693d;
  --sev-high: #d9693d;
  --sev-high-bg: #3c281f;
  --sev-high-ink: #f0a07f;
  --sev-med: #e8b04a;
  --sev-med-bg: #3b3220;
  --sev-med-ink: #f0c978;
  --pipe-1: #8a4a31;
  --pipe-2: #b25a37;
  --pipe-3: #d9693d;
  --ribbon-a: .3;
  --bar: #a3a097;
}

/* ---------- base ---------- */

[x-cloak] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.65;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: color .15s;
}
a:hover { color: var(--accent-strong); }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); }

.wrap { width: var(--wrap); margin-inline: auto; }

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

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: .5rem .75rem;
  background: var(--fg);
  color: var(--bg);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: .875rem;
  text-decoration: none;
}
.skip:focus { top: 1rem; color: var(--bg); }

.nojs { padding: 2rem 0; font-family: var(--sans); font-size: 1rem; }

/* ---------- header ---------- */

.top { border-bottom: 1px solid var(--line); }

.top .wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 1rem;
  min-height: 4.25rem;
}

.brand { display: flex; align-items: center; gap: .9rem; min-width: 0; }

.wordmark {
  color: var(--fg);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -.01em;
  text-decoration: none;
}
.wordmark:hover { color: var(--accent); }

.rule { width: 1px; height: 1.25rem; background: var(--line-2); }

.page {
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

.meta { display: flex; align-items: center; gap: .875rem; }

.asof {
  font-family: var(--sans);
  font-size: .875rem;
  color: var(--muted);
  white-space: nowrap;
}
.asof time { color: var(--fg); font-weight: 500; }

.toggle {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--fg);
  transition: background-color .15s, border-color .15s;
}
.toggle:hover { background: var(--soft); border-color: var(--line-2); }
.toggle svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- sections ---------- */

.section { margin-top: clamp(2rem, 4.5vw, 3.25rem); }

.hero { padding-top: clamp(2.25rem, 5.5vw, 4.5rem); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--muted);
}
.eyebrow::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 2px;
  background: var(--accent);
}

h1 {
  max-width: 21ch;
  margin-top: 1rem;
  font-size: clamp(2.125rem, 1.2rem + 3.6vw, 3.5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.018em;
  text-wrap: balance;
}

.lead {
  max-width: 40rem;
  margin-top: 1.25rem;
  font-size: clamp(1.125rem, 1.02rem + .5vw, 1.375rem);
  line-height: 1.5;
  text-wrap: pretty;
}

/* ---------- stat tiles ---------- */

.bento {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

.tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  min-width: 0;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .15s, background-color .15s;
}
.tile:hover { border-color: var(--line-2); background: var(--soft); }

.tile.is-s { grid-column: span 2; }
.tile.is-m { grid-column: span 3; }

.tile dt {
  display: grid;
  gap: .125rem;
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.3;
}
.tile .note { font-size: .8125rem; font-weight: 400; color: var(--muted); }

.tile dd {
  font-family: var(--sans);
  font-size: clamp(2.5rem, 1.9rem + 2.2vw, 3.25rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
}
.tile.is-lead dd { color: var(--accent); }

/* the focal point */
.tile-hero {
  position: relative;
  grid-column: 1 / span 4;
  grid-row: 1 / span 2;
  gap: 1.75rem;
  min-height: 18rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-color: transparent;
  background: var(--accent);
  color: var(--on-accent);
  contain: paint;
  overflow: clip;
}
.tile-hero:hover { background: var(--accent); border-color: transparent; }
.tile-hero > * { position: relative; z-index: 1; }
.tile-hero dt { font-size: 1.0625rem; }
.tile-hero dd { font-size: inherit; font-weight: 400; letter-spacing: 0; }

.tile-hero::before,
.tile-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.tile-hero::before {
  top: -38%;
  right: -26%;
  width: 82%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgb(255 255 255 / .30), transparent);
}
.tile-hero::after {
  bottom: -46%;
  left: -24%;
  width: 88%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgb(0 0 0 / .18), transparent);
}

.hero-num {
  display: block;
  font-size: clamp(6.5rem, 3.4rem + 11vw, 11.5rem);
  font-weight: 500;
  line-height: .8;
  letter-spacing: -.055em;
  margin-left: -.04em;
}

.dots {
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  gap: .5rem;
  max-width: 22rem;
  margin-top: 1.5rem;
}
.dots i {
  aspect-ratio: 1;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.dots i.on { background: currentColor; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
  margin-top: .875rem;
  font-family: var(--sans);
  font-size: .8125rem;
  line-height: 1.3;
}
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.legend b { font-weight: 600; }
.legend i {
  width: .625rem;
  height: .625rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.legend i.on { background: currentColor; }

/* ---------- panels ---------- */

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

.panel {
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.pair .panel { display: flex; flex-direction: column; }

.panel-head { margin-bottom: 1.5rem; }
.panel-head h2 {
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.3;
}
.panel-head p {
  margin-top: .25rem;
  font-family: var(--sans);
  font-size: .875rem;
  line-height: 1.45;
  color: var(--muted);
}

/* ---------- pipeline ---------- */

.pipe {
  --band: clamp(6.5rem, 4rem + 9vw, 11rem);
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  grid-template-rows: auto auto var(--band);
}

.stage {
  display: grid;
  grid-row: span 3;
  grid-template-rows: auto auto var(--band);
  grid-template-rows: subgrid;
  grid-template-columns: 1rem minmax(0, 1fr);
  min-width: 0;
}

.stage-label {
  grid-column: 1 / -1;
  align-self: end;
  padding-right: .75rem;
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--muted);
}

.stage-num {
  grid-column: 1 / -1;
  margin: .375rem 0 1rem;
  font-family: var(--sans);
  font-size: clamp(2.5rem, 1.5rem + 3.6vw, 3.75rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.035em;
}
.stage:last-child .stage-num { color: var(--accent); }

.pillar {
  grid-column: 1;
  grid-row: 3;
  align-self: center;
  height: calc(var(--f) * 100%);
  border-radius: 4px;
  background: var(--c);
}
.stage:last-child .pillar { box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px var(--accent); }

.ribbon {
  grid-column: 2;
  grid-row: 3;
  align-self: stretch;
  width: calc(100% + 2px);
  height: 100%;
  margin-left: -1px;
  fill: var(--c);
  fill-opacity: var(--ribbon-a);
}

.pipe-note {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--muted);
}
.pipe-note b { font-weight: 600; color: var(--accent); }

/* ---------- severity: one to-scale stacked column ---------- */

.sev-high { --tint: var(--sev-high-bg); --ink: var(--sev-high-ink); --mark: var(--sev-high); }
.sev-medium { --tint: var(--sev-med-bg); --ink: var(--sev-med-ink); --mark: var(--sev-med); }

.gauge { display: flex; flex: 1; justify-content: center; gap: 1rem; min-height: 14rem; }

.gauge-scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  font-family: var(--sans);
  font-size: .75rem;
  line-height: 1;
  color: var(--muted);
}

.gauge-bar { display: flex; flex-direction: column-reverse; gap: 2px; width: 1.5rem; }
.gauge-seg { display: block; background: var(--mark); transition: filter .15s; }
.gauge-seg:last-child { border-radius: 4px 4px 0 0; }
.gauge-seg:hover { filter: brightness(1.1); }

.gauge-rows { display: flex; flex-direction: column-reverse; gap: 2px; flex: 0 1 15rem; min-width: 0; }
.gauge-row { display: flex; align-items: center; gap: .875rem; min-height: 0; }
.gauge-row::before { content: ""; flex: none; width: 1.5rem; height: 1px; background: var(--line-2); }

.seg-num {
  font-family: var(--sans);
  font-size: clamp(2.5rem, 1.9rem + 2.2vw, 3.25rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  height: 1.5rem;
  padding: 0 .5625rem 0 .5rem;
  border-radius: 6px;
  background: var(--tint);
  color: var(--ink);
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

/* signal bars: redundant, non-colour cue for level */
.sig { display: inline-flex; align-items: flex-end; gap: 2px; height: .6875rem; }
.sig i { width: 3px; border-radius: 1px; background: currentColor; opacity: .3; }
.sig i:nth-child(1) { height: .3125rem; }
.sig i:nth-child(2) { height: .5rem; }
.sig i:nth-child(3) { height: .6875rem; }
.sev-high .sig i { opacity: 1; }
.sev-medium .sig i:nth-child(-n + 2) { opacity: 1; }

/* ---------- ecosystems: to-scale bars ---------- */

.bars { display: grid; gap: 1.0625rem; }
.bar-row { display: grid; gap: .375rem; }

.bar-label { font-size: 1rem; line-height: 1.3; }
.bar-label small {
  margin-left: .375rem;
  font-family: var(--sans);
  font-size: .8125rem;
  color: var(--muted);
}

.bar-track {
  position: relative;
  height: .875rem;
  border-radius: 0 4px 4px 0;
  background: var(--soft);
}

.bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--v) / var(--t) * 100%);
  border-radius: 0 4px 4px 0;
  background: var(--bar);
  transition: background-color .15s;
}

.bar-val {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(.5rem, -50%);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}

.bar-row:hover .bar-fill { background: var(--fg); }

.axis {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  padding-top: .5rem;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: .75rem;
  line-height: 1;
  color: var(--muted);
}

/* ---------- findings table ---------- */

.table-panel { padding: 0; }

.table-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.75rem) 1.25rem;
}
.table-head .panel-head { margin: 0; }

.filter {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--sans);
  font-size: .8125rem;
  color: var(--muted);
}
.filter [role="group"] {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.filter button {
  height: 1.875rem;
  padding: 0 .875rem;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--fg);
  transition: background-color .15s, color .15s;
}
.filter button:hover { background: var(--soft); }
.filter button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }

.tbl { width: 100%; border-collapse: separate; border-spacing: 0; }

.tbl th, .tbl td {
  padding: 1rem;
  text-align: left;
  vertical-align: baseline;
  border-top: 1px solid var(--line);
}
.tbl thead th {
  padding-block: .75rem;
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--muted);
  background: var(--soft);
}
.tbl th:first-child, .tbl td:first-child { padding-left: clamp(1.25rem, 3vw, 1.75rem); }
.tbl th:last-child, .tbl td:last-child { padding-right: clamp(1.25rem, 3vw, 1.75rem); }

/* shrink-to-fit columns; the issue column takes the rest */
.c-proj, .c-sev, .c-ref { width: 1%; white-space: nowrap; }
.c-sev { padding-right: 1.5rem; }

.tbl tbody th { font-weight: 500; }
.tbl tbody tr { transition: background-color .15s; }
.tbl tbody tr:hover { background: var(--hover); }
.tbl tbody th:first-child {
  box-shadow: inset 3px 0 0 var(--mark);
  transition: box-shadow .15s;
}
.tbl tbody tr:hover th:first-child { box-shadow: inset 6px 0 0 var(--mark); }

.c-issue { min-width: 16rem; line-height: 1.5; }
.code {
  font-family: var(--mono);
  font-size: .875em;
  padding: .075em .3em;
  border-radius: 4px;
  background: var(--soft);
  white-space: nowrap;
}
.tbl tbody tr:hover .code { background: var(--line); }
.variant { color: var(--muted); font-size: .9375rem; }

.ref { font-family: var(--mono); font-size: .875rem; }
.ext {
  display: inline-block;
  width: .75em;
  height: .75em;
  margin-left: .3em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .15s;
}
a:hover .ext { transform: translate(1px, -1px); }

/* ---------- footer ---------- */

.foot {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding: 1.75rem 0 clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--line);
}
.foot-note { max-width: 44rem; font-size: 1rem; line-height: 1.6; text-wrap: pretty; }
.foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  margin-top: 1.5rem;
  font-family: var(--sans);
  font-size: .875rem;
  color: var(--muted);
}
.foot-row a { font-weight: 500; }
.foot-links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.copy { margin-top: .5rem; font-family: var(--sans); font-size: .875rem; color: var(--muted); }

/* ---------- motion (opt-in) ---------- */

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } }
@keyframes grow-x { from { width: 0; } }
@keyframes grow-y { from { transform: scaleY(0); } }
@keyframes ember-a { 0%, 100% { transform: translate(0) scale(1); } 50% { transform: translate(6%, -9%) scale(1.18); } }
@keyframes ember-b { 0%, 100% { transform: translate(0) scale(1.12); } 50% { transform: translate(-8%, 7%) scale(.94); } }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .rise { animation: rise .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
  .bar-fill { animation: grow-x .9s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms + 300ms); }
  .gauge-seg { transform-origin: bottom; animation: grow-y .9s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms + 300ms); }
  .pillar { animation: grow-y .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 120ms + 350ms); }
  .ribbon { animation: fade .9s var(--ease) both; animation-delay: calc(var(--i, 0) * 120ms + 500ms); }
  .tbl tbody tr { animation: fade .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
  .tile-hero::before { animation: ember-a 24s ease-in-out infinite; }
  .tile-hero::after { animation: ember-b 30s ease-in-out infinite; }
}

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .tile-hero { grid-column: 1 / -1; grid-row: auto; min-height: 16rem; }
  .tile.is-s { grid-column: span 4; }
  .tile.is-m { grid-column: span 6; }
}

@media (max-width: 760px) {
  .pair { grid-template-columns: minmax(0, 1fr); }
  .gauge { min-height: 13rem; }
}

/* below this the table (about 800px at minimum) becomes a list of cards */
@media (max-width: 920px) {
  .tbl, .tbl tbody { display: block; }
  .tbl thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: clip;
    clip-path: inset(50%);
  }
  .tbl tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .375rem .875rem;
    align-items: center;
    padding: 1rem clamp(1.25rem, 3vw, 1.75rem);
    border-top: 1px solid var(--line);
    box-shadow: inset 3px 0 0 var(--mark);
  }
  .tbl tbody tr:hover { box-shadow: inset 6px 0 0 var(--mark); }
  .tbl th, .tbl td, .tbl tbody th:first-child, .tbl tbody tr:hover th:first-child {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
  .tbl tbody th { grid-column: 1; font-size: 1.0625rem; }
  .c-sev { grid-column: 2; grid-row: 1; justify-self: start; }
  .c-issue { grid-column: 1 / -1; min-width: 0; }
  .c-ref { grid-column: 1 / -1; white-space: normal; }
  .ref { overflow-wrap: anywhere; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
}

@media (max-width: 560px) {
  .top .wrap { row-gap: .125rem; padding-block: .75rem; }
  .meta { display: contents; }
  .asof { grid-column: 1 / -1; grid-row: 2; }
  .toggle { grid-column: 2; grid-row: 1; }
  .rule { display: none; }
  .brand { gap: .75rem; }
  .page { font-size: .875rem; }

  .bento { gap: .75rem; }
  .tile.is-s, .tile.is-m { grid-column: span 6; }
  .tile:last-child { grid-column: 1 / -1; }
  .tile { padding: 1rem; }

  .pipe { --band: 6.25rem; }
  .stage-num { margin-bottom: .75rem; }
  .stage-label { font-size: .8125rem; padding-right: .5rem; }

  .panel-head { margin-bottom: 1.25rem; }
  .filter { width: 100%; justify-content: space-between; }
}

/* ---------- accessibility + print ---------- */

@media (forced-colors: active) {
  .bar-fill, .gauge-seg, .pillar, .ribbon, .dots i.on, .legend i.on, .sig i { forced-color-adjust: none; }
  .tile-hero { border: 1px solid CanvasText; }
}

@media print {
  .toggle, .skip, .filter { display: none; }
  .rise, .bar-fill, .gauge-seg, .pillar, .ribbon, .tbl tbody tr { animation: none; }
  .tile-hero::before, .tile-hero::after { display: none; }
  .tbl tbody tr { break-inside: avoid; }
}