/*
 * 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 same rules hold as the dashboard. Dark ground first, 1px hairline
 * rules, radii of 2 to 12px, no gradients or shadows except the sticky
 * chrome. Canary amber is Canary's own voice and is never a state colour.
 * Every value comes from a token in tokens.css.
 */

/* 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";
}
@media (max-width: 899px) {
  .site-header-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "mark toggle"
      "nav nav";
  }
}
/* Four links fit one row at 360px when they step down a size. */
@media (max-width: 479px) {
  .site-header-row .nav ul { gap: var(--space-1) 14px; }
  .site-header-row .nav a { font-size: var(--text-s); }
}
/* 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);
}
.hero-claim {
  max-width: 40ch;
  font-size: clamp(2.125rem, 1.35rem + 3.3vw, 3.5rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.hero-lede { font-size: var(--text-l); max-width: 56ch; }
.hero-conditions { color: var(--ink-muted); max-width: 56ch; }

@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas:
      "claim claim"
      "lede conditions";
    column-gap: var(--space-7);
    row-gap: var(--space-6);
  }
  .hero-claim { grid-area: claim; }
  .hero-lede { grid-area: lede; }
  .hero-conditions {
    grid-area: conditions;
    align-self: start;
    padding-left: var(--space-5);
    border-left: var(--rule-width) solid var(--rule);
  }
}

/* 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 {
  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-xl);
  scroll-margin-top: var(--space-5);
}
.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-3) var(--space-4);
  background: var(--canary);
  color: var(--on-canary);
  border-bottom: var(--rule-width) solid var(--on-canary);
  border-radius: calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px) 0 0;
}
.checker-title { font-size: var(--text-xl); }
.checker-bar .checker-privacy { color: var(--on-canary); font-weight: 600; }
/* 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 {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: vstep;
  border-top: var(--rule-width) solid var(--rule);
  font-size: var(--text-s);
}
.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);
}

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