/*
 * Canary public site. It extends the dashboard's design system, loaded
 * before it (tokens.css, then ui.css), with the site's own layouts: the
 * claim, the evidence checker, the home page's bands and the pages built
 * from the docs.
 *
 * The site follows Material Design 3: a tonal colour scheme seeded on Canary
 * amber, the M3 type scale and shape scale, state layers, and M3 components
 * (top app bar, navigation indicator, filled and outlined buttons, chips,
 * filled cards, list items, data tables). The scheme and the component layer
 * are declared in this file, scoped to body.site; the dashboard keeps its own
 * mock. Every value is a token.
 */

/* Light scheme, from the same amber seed: primary tone 40, surfaces warm. */
body.site {
  color-scheme: light;
  --bg: #FFF8F3;
  --surface-low: #FFFFFF;
  --surface: #F8F0E7;
  --surface-high: #F2EAE1;
  --surface-highest: #ECE4DB;
  --surface-bright: #E0D8CF;
  --ink: #211A12;
  --ink-muted: #51453A;
  --rule: #D5C3B2;
  --rule-strong: #85736A;
  --primary: #8A5100;
  --on-primary: #FFFFFF;
  --primary-container: #FFDDB8;
  --on-primary-container: #2B1700;
  --secondary: #6E5C3F;
  --on-secondary: #FFFFFF;
  --secondary-container: #F8DFB9;
  --on-secondary-container: #271901;
  --tertiary: #4F6448;
  --on-tertiary: #FFFFFF;
  --tertiary-container: #D1E8C6;
  --on-tertiary-container: #0D1F0A;
  --error: #B3261E;
  --on-error: #FFFFFF;
  --error-container: #F9DEDC;
  --on-error-container: #410E0B;
  --canary: #8A5100;
  --on-canary: #FFFFFF;
  --canary-text: #8A5100;
  --perch: #211A12;
  /* The six taxonomy colours, tuned for the light surfaces. They are the
     product's own taxonomy, so M3's error role does not replace them. */
  --state-verified: #067A57;
  --state-resolved: #0B6E86;
  --state-unresolvable: #9A5B00;
  --state-unverified: #5A6472;
  --state-disputed: #B4500A;
  --state-compromised: #B3243E;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-xl: 16px;
  --radius-2xl: 28px;
  --radius-full: 999px;
  --text-xs: 0.6875rem;
  --text-s: 0.75rem;
  --text-m: 0.875rem;
  --text-l: 1rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --state-hover: 8%;
  --state-press: 12%;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body.site {
    color-scheme: dark;
    --bg: #121110;
    --surface-low: #0C0B0A;
    --surface: #1A1917;
    --surface-high: #1E1D1B;
    --surface-highest: #292724;
    --surface-bright: #34322E;
    --ink: #E9E2DA;
    --ink-muted: #D3C7B8;
    --rule: #4A453D;
    --rule-strong: #968E82;
    --primary: #FFB868;
    --on-primary: #46290B;
    --primary-container: #654019;
    --on-primary-container: #FFDDB8;
    --secondary: #E4C08F;
    --on-secondary: #422C0A;
    --secondary-container: #5B441C;
    --on-secondary-container: #FFDFAE;
    --tertiary: #C9C6A4;
    --on-tertiary: #32321A;
    --tertiary-container: #49482E;
    --on-tertiary-container: #E5E3C4;
    --error: #FFB4AB;
    --on-error: #690005;
    --error-container: #93000A;
    --on-error-container: #FFDAD6;
    --canary: #FFB868;
    --on-canary: #46290B;
    --canary-text: #FFB868;
    --perch: #FFB868;
    --shadow-chrome: 0 1px 3px rgba(0, 0, 0, 0.4);
  }
}
html[data-theme="dark"] body.site {
  color-scheme: dark;
  --bg: #121110;
  --surface-low: #0C0B0A;
  --surface: #1A1917;
  --surface-high: #1E1D1B;
  --surface-highest: #292724;
  --surface-bright: #34322E;
  --ink: #E9E2DA;
  --ink-muted: #D3C7B8;
  --rule: #4A453D;
  --rule-strong: #968E82;
  --primary: #FFB868;
  --on-primary: #46290B;
  --primary-container: #654019;
  --on-primary-container: #FFDDB8;
  --secondary: #E4C08F;
  --on-secondary: #422C0A;
  --secondary-container: #5B441C;
  --on-secondary-container: #FFDFAE;
  --tertiary: #C9C6A4;
  --on-tertiary: #32321A;
  --tertiary-container: #49482E;
  --on-tertiary-container: #E5E3C4;
  --error: #FFB4AB;
  --on-error: #690005;
  --error-container: #93000A;
  --on-error-container: #FFDAD6;
  --canary: #FFB868;
  --on-canary: #46290B;
  --canary-text: #FFB868;
  --perch: #FFB868;
  --shadow-chrome: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Header. Sticky, a hairline rule below, then the wordmark, the nav and
   the theme toggle. The site has no network badge. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  box-shadow: var(--shadow-chrome);
}
.site-header-row {
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "mark nav toggle";
}
/* Without these the three children auto-place, and the nav lands in the
   toggle's narrow column and wraps to three rows. */
body.site .site-header-row .wordmark { grid-area: mark; }
body.site .site-header-row .nav { grid-area: nav; }
body.site .site-header-row .theme-toggle { grid-area: toggle; }
@media (max-width: 899px) {
  .site-header-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "mark toggle"
      "nav nav";
  }
}
/* At 360px the four links keep one row and the toggle keeps one line: the
   links drop a size and lose most of their padding, and the toggle stops
   wrapping its label. */
@media (max-width: 479px) {
  .site-header-row .nav ul { gap: var(--space-1) 10px; }
  .site-header-row .nav a {
    font-size: var(--text-xs);
    padding-inline: 6px;
  }
  .site-header-row .theme-toggle { white-space: nowrap; }
}
/* The brand sits beside the wordmark, so nothing pushes it off its perch. */
.site-header .wordmark { margin-right: 0; }

/* A page below a link, such as a recorded run below the runs index, marks
   that link more quietly than the page it names. */
.site-header .nav a[aria-current="true"] { border-bottom-color: var(--rule-strong); }

.nobr { white-space: nowrap; }

/* Page titles. The mock's display type, with no perch. */
.page-title {
  font-size: var(--text-4xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-wrap: balance;
}

/* Home: the claim */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  padding-top: var(--space-6);
}
/* The numbered spine and the rule that runs out of it. The hero opens the
   document, so its number sits on the same line as a hairline that carries
   the eye across the page. */
.hero-mark {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
}
.hero-rule {
  flex: 1 1 auto;
  height: var(--rule-width);
  background: var(--rule);
}
.band-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.hero-claim {
  max-width: 26ch;
  margin: 0;
  font-size: clamp(2.375rem, 1.1rem + 4.4vw, 4rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
/* The claim carries one amber phrase, the way the mock marks its headline. */
.hero-claim .hl { color: var(--canary-text); }
.hero-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-4);
}
.hero-lede { font-size: var(--text-l); max-width: 48ch; margin: 0; }
.hero-conditions {
  max-width: 42ch;
  padding-left: var(--space-4);
  border-left: 2px solid var(--canary);
}
.hero-conditions p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--ink-muted);
}

@media (min-width: 900px) {
  .hero { gap: var(--space-6); }
  .hero-foot {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--space-7);
    align-items: start;
  }
}

/* Home: the evidence checker, the one thing on the page to use. A 12px
   panel on the inset surface, the amber voice across the top, then the
   drop target, the samples and the report. */

.checker {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--space-7);
  background: var(--surface-low);
  border: var(--rule-width) solid var(--rule);
  border-radius: var(--radius-2xl);
  scroll-margin-top: var(--space-5);
}
/* The checker's head. The mock opens the console with a label row over a
   hairline, not a filled band, so amber stays a label colour here; the large
   amber fills are the network badge, the update bar, the primary action and
   the drawing's canary check box. */
.checker-bar {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-5);
  padding: var(--space-4) var(--space-5) var(--space-3);
  background: none;
  border-bottom: var(--rule-width) solid var(--rule);
}
.checker-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--canary-text);
}
.checker-bar .checker-privacy {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--ink-muted);
}
/* The checker script reveals these: the live sentences, the loading line
   and the build line. Until it runs they stay out of sight, whatever
   display another rule gives them. */
.checker [hidden] { display: none; }
.checker-main {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  padding: var(--space-5) var(--space-4);
}
.checker-intro { max-width: 58ch; }

.drop {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 96px;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-l);
  text-align: center;
  font-weight: 600;
  cursor: pointer;
}
.drop:hover { border-color: var(--canary); }
.drop-label { display: inline-flex; align-items: center; gap: var(--space-2); }
.drop-label .icon { transform: rotate(180deg); }
/* The input covers the whole drop zone, so a click or a dropped file lands
   on it, and it keeps its own focus. */
.drop-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.drop:focus-within { outline: 2px solid var(--canary); outline-offset: 2px; }
.drop:has(:disabled) { color: var(--ink-muted); cursor: not-allowed; }
.drop:has(:disabled):hover { border-color: var(--rule-strong); }
.drop:has(:disabled) .drop-input { cursor: not-allowed; }

/* The sample pair: where it comes from, the two buttons, which byte the
   copy changes, and the two files. */
.checker-samples {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: var(--rule-width) solid var(--rule);
}
.sample-source { font-size: var(--text-s); font-weight: 600; max-width: 58ch; }
.checker-tries { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.checker-tries .btn { font-size: var(--text-m); min-height: 44px; padding-inline: var(--space-4); }
.tamper-note { font-size: var(--text-s); color: var(--ink-muted); max-width: 58ch; }
.checker-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.checker-downloads .download { font-family: var(--font-sans); }
.checker-privacy { font-size: var(--text-s); color: var(--ink-muted); }
.checker-build { font-size: var(--text-xs); color: var(--ink-muted); overflow-wrap: anywhere; }

.checker-result {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-5) var(--space-4);
  background: var(--surface);
  border-top: var(--rule-width) solid var(--rule);
  border-radius: 0 0 calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px);
}
.checker-pending {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-3);
  font-size: var(--text-s);
  font-weight: 600;
  border: var(--rule-width) solid var(--rule-strong);
  border-radius: var(--radius-m);
}
.checker-pending .icon { width: 18px; height: 18px; }
.checker-steps-intro { font-size: var(--text-s); color: var(--ink-muted); }
.checker-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: vstep;
  border-top: var(--rule-width) solid var(--rule);
  font-size: var(--text-s);
}
/* Pair the steps once there is room, as the mock does: eight rows in one
   column is a list, eight in two is a report. */
@media (min-width: 900px) {
  .checker-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-7);
  }
}
.checker-steps li {
  counter-increment: vstep;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  padding-block: 7px;
  border-bottom: var(--rule-width) solid var(--rule);
}
.checker-steps li::before {
  content: counter(vstep);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.checker-noscript {
  grid-column: 1 / -1;
  padding: var(--space-3) var(--space-4);
  border-top: var(--rule-width) solid var(--rule-strong);
}

/* Registration marks: two 10px elbows just outside the console's corners, the
   way a drawing frames a detail it wants the eye to find. */
.checker::before,
.checker::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
}
.checker::before {
  top: -5px;
  left: -5px;
  border-top: var(--rule-width) solid var(--rule-strong);
  border-left: var(--rule-width) solid var(--rule-strong);
}
.checker::after {
  right: -5px;
  bottom: -5px;
  border-right: var(--rule-width) solid var(--rule-strong);
  border-bottom: var(--rule-width) solid var(--rule-strong);
}

/* The run band's three commands sit in one console with a lamp row, instead of
   three boxes stacked. The commands lose their own frames inside it. */
body.site .run-steps {
  margin: var(--space-5) 0 0;
  padding: var(--space-4);
  list-style: none;
  background: var(--surface-low);
  border: var(--rule-width) solid var(--rule);
  border-radius: var(--radius-xl);
}
body.site .run-steps::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  margin: 2px 0 var(--space-4) 2px;
  border-radius: 50%;
  background: var(--rule-strong);
  box-shadow: 10px 0 0 0 var(--rule-strong), 20px 0 0 0 var(--rule-strong);
}
body.site .run-steps > li + li { margin-top: var(--space-4); }
body.site .run-steps .command {
  margin-top: 0;
  max-width: none;
  padding: 0;
  background: none;
  border: 0;
}
body.site .run-steps .run-placeholder { margin-top: var(--space-2); }

@media (min-width: 900px) {
  .checker-bar { padding: var(--space-3) var(--space-6); }
  .checker-main, .checker-result { padding: var(--space-6); }
}

/* Home: bands. Each opens with a mono eyebrow label in canary amber, a
   rule, and one line on the right; the body sits under it. */

.band {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--space-8);
  /* The spine: one hairline down the left of every band, with the band's
     number sitting inside it, so the page reads as a numbered document. */
  padding-left: var(--space-5);
  border-left: var(--rule-width) solid var(--rule);
}
.band-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: var(--rule-width) solid var(--rule);
}
.band-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--canary-text);
}
.band-note {
  max-width: 44ch;
  font-size: var(--text-s);
  color: var(--ink-muted);
  text-align: right;
}
.band-body {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  max-width: 52rem;
  min-width: 0;
  margin-top: var(--space-5);
}
@media (max-width: 719px) {
  .band-note { text-align: left; }
}

.pull {
  margin: var(--space-2) 0 0;
  padding: var(--space-1) 0 var(--space-1) var(--space-5);
  border-left: 2px solid var(--canary);
}
.pull p {
  max-width: 34ch;
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.how-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.how-steps li {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding-top: var(--space-3);
  border-top: var(--rule-width) solid var(--ink);
}
.how-n {
  font-family: var(--font-mono);
  font-size: var(--text-l);
  font-weight: 700;
  line-height: 1;
  color: var(--canary-text);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 720px) {
  .how-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.states-intro { margin-top: var(--space-4); font-weight: 600; }
.state-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--rule-width) solid var(--rule);
}
.state-grid li {
  display: grid;
  gap: var(--space-1);
  align-content: start;
  padding-block: var(--space-3);
  border-bottom: var(--rule-width) solid var(--rule);
}
.state-grid p { font-size: var(--text-s); color: var(--ink-muted); }
@media (min-width: 720px) {
  .state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
}
.band-body .lower-bound { margin-top: var(--space-2); max-width: none; }

.more { font-weight: 700; }

.band-body .facts { margin-top: 0; }
.proves dd { display: block; }

.limits tbody th { font-weight: 700; color: var(--ink); }
@media (min-width: 720px) {
  .limits tbody th { width: 36%; }
  .limits td { min-width: 24ch; }
}
@media (max-width: 719px) {
  .limits tbody td { padding-top: 0; }
}

.run-steps {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: run;
}
.run-steps li {
  counter-increment: run;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: start;
}
.run-steps li::before {
  content: counter(run);
  padding-top: var(--space-3);
  color: var(--canary-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.run-steps .command { margin-top: 0; max-width: none; }
/* A command wraps at every width, so no part of it hides under the copy
   button or past the edge. */
.run-steps .command pre { white-space: pre-wrap; overflow-wrap: anywhere; padding-block: 3px; }
.run-steps var { font-style: italic; font-weight: 700; }
.run-steps .run-placeholder {
  grid-column: 2;
  margin-top: var(--space-2);
  color: var(--ink-muted);
  font-size: var(--text-s);
}
/* On a phone the command takes the full width, with the copy button under
   it. */
@media (max-width: 719px) {
  .run-steps .command { flex-direction: column; align-items: stretch; }
  .run-steps .copy-btn { align-self: flex-end; }
}
.run-note { color: var(--ink-muted); font-size: var(--text-s); }

/* Pages built from the docs */

.doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6) var(--space-7);
  padding-top: var(--space-5);
}
.toc {
  padding: var(--space-4);
  border: var(--rule-width) solid var(--rule);
  border-radius: var(--radius-l);
}
.toc-title { margin-bottom: var(--space-2); font-size: var(--text-s); color: var(--ink-muted); }
.toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.toc a {
  display: block;
  padding: 3px 0;
  font-size: var(--text-s);
  font-weight: 600;
  text-decoration: none;
}
.toc a:hover { text-decoration: underline; }
@media (min-width: 1040px) {
  .doc.has-toc {
    grid-template-columns: 13rem minmax(0, 1fr);
    grid-template-areas:
      "head head"
      "toc body";
  }
  .doc.has-toc .doc-head { grid-area: head; }
  .doc.has-toc .doc-body { grid-area: body; }
  .doc.has-toc .toc {
    grid-area: toc;
    position: sticky;
    top: var(--space-6);
    align-self: start;
    max-height: calc(100vh - 2 * var(--space-6));
    overflow-y: auto;
    padding: 0 0 0 var(--space-4);
    border: 0;
    border-left: var(--rule-width) solid var(--rule);
    border-radius: 0;
  }
}

.doc-body { min-width: 0; max-width: 52rem; }
.doc-body > * { margin-block: 0; }
.doc-body > * + * { margin-top: var(--space-4); }
.doc-body p,
.doc-body li { max-width: 68ch; }
.doc-body h2 {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: var(--rule-width) solid var(--rule);
}
.doc-body h3 {
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: var(--rule-width) solid var(--rule);
}
.doc-body h2 + h3 { margin-top: var(--space-5); padding-top: 0; border-top: 0; }
/* A doc's own rule already separates what follows it. */
.doc-body hr + :is(h2, h3) { margin-top: 0; padding-top: 0; border-top: 0; }
.doc-body :is(h2, h3) + * { margin-top: var(--space-3); }
.doc-body :is(h2, h3) { scroll-margin-top: var(--space-6); }
/* A heading reached by its link wears Canary's marker. */
.doc-body :is(h2, h3):target {
  text-decoration-line: underline;
  text-decoration-color: var(--canary);
  text-decoration-thickness: 0.4em;
  text-underline-offset: -0.2em;
  text-decoration-skip-ink: none;
}
.doc-body ul,
.doc-body ol { padding-left: 1.4em; }
.doc-body li + li { margin-top: var(--space-2); }
.doc-body li > p + p { margin-top: var(--space-2); }
.doc-body code {
  padding: 0 4px;
  font-size: 0.875em;
  background: var(--surface);
  border: var(--rule-width) solid var(--rule);
  border-radius: var(--radius-s);
  overflow-wrap: anywhere;
}
.doc-body pre {
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
  font-size: var(--text-s);
  line-height: 1.6;
  background: var(--surface-low);
  border: var(--rule-width) solid var(--rule);
  border-radius: var(--radius-m);
}
.doc-body pre code { padding: 0; font-size: inherit; background: none; border: 0; }
.doc-body blockquote {
  margin-inline: 0;
  padding: var(--space-1) 0 var(--space-1) var(--space-5);
  border-left: 2px solid var(--canary);
}
.doc-body blockquote p { font-size: var(--text-l); font-weight: 600; line-height: 1.4; }
.doc-body hr { margin-block: var(--space-6); border: 0; border-top: var(--rule-width) solid var(--rule); }
.doc-body th,
.doc-body td { min-width: 9ch; }
.doc-body td code,
.doc-body th code { white-space: nowrap; }
.doc-table { max-width: none; }

.doc-source {
  margin-top: var(--space-8) !important;
  padding-top: var(--space-4);
  border-top: var(--rule-width) solid var(--rule);
  font-size: var(--text-s);
  color: var(--ink-muted);
}
.doc-source a { color: var(--ink-muted); }

/* Jump lists: a doc's own index of the page. */

.jump-set {
  display: grid;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-4);
  background: var(--surface);
  border: var(--rule-width) solid var(--rule);
  border-radius: var(--radius-l);
}
@media (min-width: 720px) {
  .jump-set:has(.jump + .jump) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.jump-label { margin-bottom: var(--space-1); font-size: var(--text-s); font-weight: 700; }
.jump-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--space-4);
  margin: 0;
  padding: 0 !important;
  list-style: none;
  font-size: var(--text-s);
}
.doc-body .jump-list li + li { margin-top: 0; }
.jump-list a { display: inline-block; padding-block: 3px; }

/* Drawings of the docs' diagrams. Boxes carry 1px rules; the dashed ones
   come after v1, and canary check speaks in Canary's colour. */

.flow { margin-inline: 0; }
.doc-body .flow ol { padding-left: 0; }
.doc-body .flow li + li { margin-top: 0; }

.flow-lanes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 720px) {
  .flow-lanes { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}
.flow-lane-title {
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.flow-steps { margin: 0; list-style: none; }
.flow-steps + .flow-steps { margin-top: var(--space-6); }
.flow-node {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--space-2);
  max-width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: var(--rule-width) solid var(--rule-strong);
  border-radius: var(--radius-m);
}
.flow-name { font-weight: 700; }
.doc-body .flow-name code { padding: 0; font-size: 0.95em; background: none; border: 0; }
.flow-note { font-size: var(--text-s); color: var(--ink-muted); }
.flow-store { border-color: var(--ink); }
/* canary check is Canary itself, so it speaks in Canary's colour. */
.flow-main { background: var(--canary); color: var(--on-canary); border-color: var(--on-canary); }
.flow-main .flow-note { color: var(--on-canary); }
.flow-ref { color: var(--ink-muted); border-color: var(--rule); }
.flow-pair { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.flow-stack { flex-direction: column; align-items: flex-start; }
.flow-edge {
  position: relative;
  margin: 0 0 0 18px;
  padding: var(--space-2) 0 14px var(--space-4);
  font-size: var(--text-s);
  color: var(--ink-muted);
  border-left: var(--rule-width) solid var(--ink);
}
.flow-edge::after {
  content: "";
  position: absolute;
  left: -5px;
  bottom: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--ink);
}
.flow-later .flow-node:not(.flow-ref) { border-style: dashed; }
.flow-later .flow-edge { border-left-style: dashed; }

.checks-start { margin: 0 0 var(--space-2); }
.checks { margin: 0; list-style: none; counter-reset: check; border-top: var(--rule-width) solid var(--rule); }
.checks .checks { counter-reset: none; margin-top: var(--space-2); border-top: 0; }
.check {
  position: relative;
  display: grid;
  gap: 6px;
  padding: var(--space-3) 0 var(--space-3) 2.75rem;
  border-bottom: var(--rule-width) solid var(--rule);
  counter-increment: check;
}
.check::before {
  content: counter(check);
  position: absolute;
  left: 0;
  top: var(--space-3);
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  font-family: var(--font-mono);
  font-size: var(--text-s);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--canary-text);
  border: var(--rule-width) solid var(--rule-strong);
  border-radius: var(--radius-s);
}
.check-q { font-weight: 700; }
.check-exit { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-3); font-size: var(--text-s); }
.check-if { color: var(--ink-muted); }
.check-ok .badge { vertical-align: -3px; }
.check-group {
  margin-block: var(--space-3);
  padding: var(--space-3) 0 0 var(--space-4);
  border-left: 2px solid var(--rule-strong);
}
.check-group-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.check-group .check:last-child { border-bottom: 0; }

/* Recorded runs and other short pages */

.page-intro { display: grid; gap: var(--space-4); max-width: 60ch; padding-top: var(--space-5); }
.page-intro .error-links { margin-top: var(--space-2); }

/* The runs index: one panel per run, newest first. */
.run-list { margin: var(--space-7) 0 0; padding: 0; list-style: none; }
.run-card + .run-card { margin-top: var(--space-6); }
.run-card article {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface);
  border: var(--rule-width) solid var(--rule);
  border-radius: var(--radius-l);
}
.run-card-head { display: grid; gap: var(--space-2); }
.run-card-head h2 { font-size: var(--text-2xl); }
.run-card-head .status-line { padding: 0; }
.run-ran { max-width: 64ch; color: var(--ink-muted); }
.run-checks {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--rule-width) solid var(--rule);
}
.run-checks > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-3);
  border-bottom: var(--rule-width) solid var(--rule);
}
.run-check-label { font-weight: 700; }
.run-findings { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.run-findings a { font-weight: 700; }
.run-open .btn { text-decoration: none; font-size: var(--text-m); min-height: 44px; padding-inline: var(--space-4); }
.run-sha { display: grid; gap: 2px; max-width: none; font-size: var(--text-s); color: var(--ink-muted); }

/* Recorded run pages. The site shows the dashboard as it stood after a
   run, framed so it can't pass for a live one: a banner in the dashboard's
   sample-data colours that opens every page and has no close button, then
   the dashboard's own header and page. */
.rec-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-5);
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius-m);
}
.rec-banner p { max-width: none; font-weight: 600; }
.rec-banner strong { font-weight: 800; }
.rec-banner a { color: var(--bg); font-weight: 700; white-space: nowrap; }
.rec-banner a:focus-visible { outline-color: var(--bg); }

.rec-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  max-width: none;
  margin-top: var(--space-5);
  font-size: var(--text-s);
  font-weight: 600;
}
.rec-crumbs a { color: var(--ink-muted); }
.rec-sep { color: var(--ink-muted); }

/* The dashboard's header, as canary ui drew it, minus its live parts. */
.rec-head {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--rule-width) solid var(--rule);
}
.rec-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
  border: var(--rule-width) solid var(--rule);
  border-radius: var(--radius-m);
}
.rec-bar .nav ul { gap: var(--space-1) var(--space-5); }
.rec-bar .net-badge { justify-self: auto; }
.rec-head .status-line { padding: 0; }
.rec-source { max-width: none; font-size: var(--text-s); color: var(--ink-muted); }
.rec-source a { color: var(--ink); }
.rec-sha {
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
  word-break: break-all;
}
.rec-part-intro { max-width: 68ch; font-weight: 600; }
.rec-page { margin-top: var(--space-6); }

/* Act 5 and any later check in the same run, on the run's overview. */
.rec-part {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: var(--rule-width) solid var(--rule-strong);
}
.section.rec-part > h2 { margin-bottom: 0; }
.rec-part-lede { font-size: var(--text-l); max-width: 60ch; }
.rec-counts,
.run-counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rec-counts li,
.run-counts li { display: inline-flex; align-items: baseline; gap: var(--space-2); }
.rec-counts .count-n,
.run-counts .count-n { font-size: var(--text-m); font-variant-numeric: tabular-nums; }
.rec-plain { font-weight: 700; }

.rec-files { display: grid; gap: var(--space-4); }
.section.rec-files > h2 { margin-bottom: 0; }
.rec-files-intro { display: grid; gap: var(--space-2); }
.rec-files-table th,
.rec-files-table td { vertical-align: top; }
.rec-files-table tbody th { font-weight: 400; white-space: nowrap; }
.rec-files-table tbody th code { font-size: var(--text-s); }
.rec-files-table td:last-child { min-width: 22ch; }
.rec-clone { color: var(--ink-muted); font-size: var(--text-s); }
.rec-files .command pre { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 719px) {
  .rec-files-table tbody th { white-space: normal; overflow-wrap: anywhere; }
}

/* Footer */

.site-footer { border-top: var(--rule-width) solid var(--rule); margin-top: var(--space-8); }
.site-footer-row { display: grid; gap: var(--space-3); padding-block: var(--space-6) var(--space-7); }
.footer-framing { font-size: var(--text-s); font-weight: 700; color: var(--ink-muted); }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-s);
  color: var(--ink-muted);
}

/* ---------------------------------------------------------------------------
 * Material 3 components.
 *
 * These rules come last so they restyle the components above to Material 3:
 * the type scale, the shape scale, the state layers and the M3 component
 * shapes (top app bar, navigation indicator, filled and outlined buttons,
 * chips, filled cards, list items, data tables). Layout rules above are kept.
 * ------------------------------------------------------------------------- */

body.site {
  font-family: var(--font-sans);
  font-size: var(--text-m);
  line-height: 1.45;
  letter-spacing: 0.01em;
}

/* Top app bar: surface, 64px, no shadow, title in title-large. */
.site-header {
  min-height: 64px;
  background: var(--surface);
  box-shadow: none;
  border-bottom: var(--rule-width) solid var(--rule);
}
.site-header-row { align-items: center; }
body.site .site-header .wordmark {
  font-size: var(--text-xl);
  font-weight: 400;
  letter-spacing: 0;
}
body.site .site-header .wordmark::after { background: var(--primary); height: 2px; }

/* Navigation: M3 navigation indicator for the current destination, state
   layer on hover, label-large type. */
body.site .nav ul { gap: var(--space-1); }
body.site .nav a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-inline: 12px;
  border: 0;
  border-radius: var(--radius-full);
  font-size: var(--text-s);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}
body.site .nav a:hover { background: color-mix(in srgb, var(--primary) var(--state-hover), transparent); color: var(--ink); }
body.site .nav a[aria-current="page"],
body.site .nav a[aria-current="true"] {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  border-bottom: 0;
}

/* Buttons: M3 outlined by default, filled for the one primary action, text for
   the copy controls. 40px tall, fully rounded, label-large. */
body.site .btn {
  min-height: 40px;
  padding: 0 24px;
  border: var(--rule-width) solid var(--rule-strong);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--primary);
  font-family: var(--font-sans);
  font-size: var(--text-m);
  font-weight: 500;
  letter-spacing: 0.02em;
}
body.site .btn:hover {
  background: color-mix(in srgb, var(--primary) var(--state-hover), transparent);
  border-color: var(--primary);
}
body.site .btn:active { background: color-mix(in srgb, var(--primary) var(--state-press), transparent); }
body.site .btn-filled {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
body.site .btn-filled:hover { background: color-mix(in srgb, var(--primary) 92%, var(--on-primary)); }
body.site .btn-text,
body.site .copy-btn {
  min-height: 32px;
  padding: 0 12px;
  border-color: transparent;
  background: transparent;
}
body.site .btn-text:hover,
body.site .copy-btn:hover { background: color-mix(in srgb, var(--primary) var(--state-hover), transparent); }
body.site .btn-small { min-height: 32px; padding: 0 16px; }

/* Chips: the state badges and the sample sources. 32px tall, 8px corner. */
body.site .badge {
  min-height: 32px;
  padding: 0 12px;
  border: var(--rule-width) solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius: var(--radius-m);
  background: color-mix(in srgb, currentColor 12%, transparent);
  font-family: var(--font-sans);
  font-size: var(--text-s);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Filled card for the checker console; filled text field for the drop zone. */
.checker {
  background: var(--surface-high);
  border: 0;
  border-radius: var(--radius-l);
  padding: var(--space-2);
}
.checker-bar { padding: var(--space-4) var(--space-4) var(--space-3); border-bottom: 0; }
body.site .checker-title {
  font-family: var(--font-sans);
  font-size: var(--text-s);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}
body.site .checker-bar .checker-privacy { font-family: var(--font-sans); color: var(--ink-muted); }
.checker-main { padding: var(--space-2) var(--space-4) var(--space-4); }
body.site .drop,
body.site .checker .drop {
  border: var(--rule-width) solid var(--rule);
  border-radius: var(--radius-m);
  background: var(--surface);
  padding: var(--space-6) var(--space-4);
}
body.site .checker .drop:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) var(--state-hover), var(--surface)); }
body.site .checker-result { padding: var(--space-2) var(--space-4) var(--space-4); }
body.site .checker-steps li { padding-block: 10px; border-bottom: var(--rule-width) solid var(--rule); }
body.site .checker-verdict,
body.site .verdict-banner {
  background: var(--surface);
  border: var(--rule-width) solid var(--rule);
  border-radius: var(--radius-m);
}

/* List items and data tables, M3 spacing and type. */
body.site th {
  font-family: var(--font-sans);
  font-size: var(--text-s);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}
body.site td, body.site th { padding: 12px 16px; }
body.site table { border-radius: var(--radius-m); }

/* Band heads: the number becomes an M3 label above a title-medium heading,
   and the hairline spine goes. */
.band {
  padding-left: 0;
  border-left: 0;
  margin-top: var(--space-8);
}
.band-num {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--primary);
}
body.site .band-label {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
body.site .band-note { font-family: var(--font-sans); color: var(--ink-muted); }
.hero-rule { display: none; }
body.site .hero-mark { margin-bottom: var(--space-3); }

/* Hero: M3 display type on the surface, the lede in body-large, and the
   conditions as a filled card. */
.hero { padding-top: var(--space-8); }
.hero-claim {
  max-width: 22ch;
  font-size: clamp(2.25rem, 1rem + 4.6vw, 4rem);
  font-weight: 400;
  line-height: 1.09;
  letter-spacing: -0.01em;
}
body.site .hero-lede { font-size: var(--text-l); color: var(--ink); }
.hero-conditions {
  padding: var(--space-4);
  border-left: 0;
  border-radius: var(--radius-m);
  background: var(--surface);
}
body.site .hero-conditions p { font-family: var(--font-sans); font-size: var(--text-m); line-height: 1.5; color: var(--ink-muted); }

/* The run band's console, in M3 surface tones. */
body.site .run-steps {
  background: var(--surface);
  border: var(--rule-width) solid var(--rule);
  border-radius: var(--radius-l);
  padding: var(--space-4);
}

/* The console's label row: number and title together on the left, the privacy
   note pushed to the right, the way an M3 card header reads. */
body.site .checker-bar { justify-content: flex-start; }
body.site .checker-bar .checker-privacy { margin-left: auto; }

/* ---------------------------------------------------------------------------
 * Material 3 layout: use the window.
 *
 * The site sat in a 72rem column with a fixed measure on every band, so a wide
 * window showed a narrow ribbon of content and a lot of dead surface. M3 lays
 * content out by window class instead: wider margins, a band head in its own
 * column once there is room, tables that fill the grid, and an app bar that
 * reads as one.
 * ------------------------------------------------------------------------- */

body.site .wrap {
  max-width: 96rem;
  padding-inline: clamp(20px, 3vw, 56px);
}
body.site .band-body { max-width: none; }
body.site table { width: 100%; }
body.site .table-wrap { max-width: none; }

/* App bar: a taller bar with a title-large wordmark, tabs with the M3 primary
   indicator for the current page, and the toggle as an outlined pill. */
body.site .site-header { min-height: 72px; }
body.site .site-header .wordmark {
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}
body.site .nav ul { gap: var(--space-6); }
body.site .nav a {
  min-height: 48px;
  padding-inline: 0;
  border-radius: 0;
  border-bottom: 3px solid transparent;
  font-size: var(--text-m);
  letter-spacing: 0.01em;
  color: var(--ink-muted);
}
body.site .nav a:hover {
  background: none;
  color: var(--ink);
  border-bottom-color: var(--rule);
}
body.site .nav a[aria-current="page"],
body.site .nav a[aria-current="true"] {
  background: none;
  color: var(--primary);
  border-bottom-color: var(--primary);
}
body.site .theme-toggle { min-height: 40px; padding-inline: 16px; }

/* Once there is room, the band head takes its own column and the body fills
   the rest of the grid, so tables and cards use the window. */
@media (min-width: 1100px) {
  body.site .band {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    column-gap: var(--space-8);
    align-items: start;
  }
  body.site .band-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    position: sticky;
    top: 96px;
  }
  body.site .band-note { text-align: left; max-width: 34ch; }
  body.site .band-body { grid-column: 2; }
  body.site .hero-claim { max-width: 30ch; }
  body.site .hero-foot {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    column-gap: var(--space-8);
  }
}

/* Doc pages: the body uses the column instead of a 52rem cap, which is what
   pushed the six-state and limits tables into a hidden scroll. Prose keeps its
   measure through the p/li rules. The table of contents sticks below the app
   bar rather than behind it. */
body.site .doc-body { max-width: none; }
@media (min-width: 1040px) {
  body.site .doc.has-toc .toc {
    top: 88px;
    max-height: calc(100vh - 120px);
  }
}

/* One number for the app bar, so nothing can hide behind it. The bar is held
   to the M3 72px exactly (it was 85px, which left the doc contents 3px behind
   it), sits above everything that scrolls, and every sticky element clears its
   bottom edge by 16px. */
body.site .site-header {
  min-height: 72px;
  z-index: 30;
}
body.site .site-header-row {
  min-height: 72px;
  padding-block: 0;
  align-items: center;
}
body.site .toc,
body.site .band-head { top: 88px; }
@media (min-width: 1040px) {
  body.site .doc.has-toc .toc {
    top: 88px;
    max-height: calc(100vh - 104px);
  }
}