/*
 * Aquia house identity: the component kit (system; identical under every skin).
 *
 * Framework-neutral classes, prefix "c-", for the minimum component set of
 * docs/4-layout-components.md §4.3 plus the long-document layout specified in
 * docs/research/documentation-pattern.md part C. Markup, states and notes
 * for each component: ../snippets/<name>/.
 *
 * Load order: fonts.css, system.css, skins/<name>/skin.css, base.css,
 * type.css, components.css. This file sets geometry, ground, borders and
 * states only. Text takes its family, size, weight and leading from exactly
 * one role class of type.css placed in the markup (rule T-8); the single
 * exception is .c-docs__prose, which dresses plain Markdown elements.
 *
 * Naming: .c-name, .c-name__part, .c-name--variant. State comes from native
 * attributes (:disabled, aria-disabled, aria-selected, aria-current,
 * aria-invalid, aria-busy, open), never from state classes.
 */

/* Component measures (--c-target, --c-lift, --c-sink, --c-nudge, --c-mark-rule,
   --c-field-pad, --c-term, --c-figure-max) are system tokens: system.json. */

/* Components that set display must still honour the hidden attribute. */
[class^='c-'][hidden],
[class*=' c-'][hidden] {
  display: none;
}

/* ── Shared state: loading is a hairline that draws once, never a spinner ── */

.c-loading-rule {
  /* Place inside any component with aria-busy="true", beside a sentence that
     says what is loading. Static and complete under reduced motion. */
  display: block;
  position: relative;
  height: var(--c-mark-rule);
  width: 100%;
  background: var(--rule);
}

.c-loading-rule::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: left center;
  animation: c-rule-draw var(--dur-draw) var(--ease) both;
}

@keyframes c-rule-draw {
  from {
    transform: scaleX(0);
  }
}

/* ── 1 · Button ────────────────────────────────────────────────────────── */

.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  position: relative;
  min-height: var(--c-target);
  padding: var(--space-3) var(--space-5);
  border: var(--border-strong);
  border-radius: var(--radius);
  background: var(--paper-raised);
  box-shadow: var(--edge);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--dur-quick) var(--ease),
    box-shadow var(--dur-quick) var(--ease),
    background-color var(--dur-quick) var(--ease);
}

.c-button:hover {
  transform: translateY(var(--c-lift));
  box-shadow: var(--edge-hover);
  background: var(--paper-2);
}

.c-button:active {
  transform: translateY(var(--c-sink));
  box-shadow: none;
}

.c-button__arrow {
  display: inline-block;
  transition: transform var(--dur-quick) var(--ease);
}

.c-button:hover .c-button__arrow {
  transform: translateX(var(--c-nudge));
}

.c-button:hover .c-button__arrow--down {
  transform: translateY(var(--c-nudge));
}

.c-button:hover .c-button__arrow--back {
  transform: translateX(calc(-1 * var(--c-nudge)));
}

.c-button.c-button--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper-raised);
}

.c-button.c-button--primary:hover {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
}

.c-button.c-button--on-dark {
  /* The one action of a dark band. */
  background: var(--on-dark);
  border-color: var(--on-dark);
  color: var(--dark);
  box-shadow: var(--edge-gold);
}

.c-button.c-button--on-dark:hover {
  background: var(--paper-raised);
  box-shadow: var(--edge-gold);
}

.c-button.c-button--on-dark:active {
  box-shadow: none;
}

.c-button[aria-pressed='true'] {
  /* Selected toggle: wash plus accent underline (K-7). */
  background: var(--accent-wash);
  box-shadow: 0 var(--c-mark-rule) 0 0 var(--accent);
}

.c-button.c-button:is(:disabled, [aria-disabled='true']) {
  background: var(--paper);
  border: var(--border);
  color: var(--ash);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

.c-button:is(:disabled, [aria-disabled='true']) .c-button__arrow {
  transform: none;
}

.c-button[aria-busy='true'] {
  cursor: progress;
}

.c-button[aria-busy='true'] .c-loading-rule {
  position: absolute;
  inset: auto 0 0 0;
}

.c-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

/* ── 2 · Link (inline links are .t-link; this is the standalone form) ──── */

.c-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--c-target);
}

.c-link:active {
  color: var(--ink);
}

.c-link[aria-current] {
  /* The page you are on: ink, still underlined, so it reads as "here". */
  color: var(--ink);
  text-decoration-thickness: var(--c-mark-rule);
}

.c-link__arrow {
  display: inline-block;
  text-decoration: none;
  transition: transform var(--dur-quick) var(--ease);
}

.c-link:hover .c-link__arrow {
  transform: translateX(var(--c-nudge));
}

.c-link:hover .c-link__arrow--back {
  transform: translateX(calc(-1 * var(--c-nudge)));
}

/* ── 3 · Opener: hairline, overline, heading ───────────────────────────── */

.c-opener {
  padding-top: var(--space-6);
  border-top: var(--border);
  margin-bottom: var(--space-7);
}

.c-opener--plain {
  /* Hero and page openers: nothing precedes them, so no hairline. */
  padding-top: 0;
  border-top: 0;
}

.c-opener > * + * {
  margin-top: var(--space-5);
}

/* ── 4 · Chip: kind, claim status and evidence status ───────────────────── */

.c-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  white-space: nowrap;
}

.c-chip__mark {
  /* The 8px square that carries the evidence level (docs 6.5). */
  flex: none;
  width: var(--space-2);
  height: var(--space-2);
  border: var(--stroke-line) solid transparent;
}

.c-chip__mark--built {
  background: var(--claim-built);
  border-color: var(--claim-built);
}

.c-chip__mark--measured {
  background: var(--claim-measured);
  border-color: var(--claim-measured);
}

.c-chip__mark--hypothesis {
  background: var(--paper);
  border-color: var(--accent);
}

.c-chip__mark--open {
  background: var(--paper);
  border-color: var(--ash);
  border-style: dashed;
}

/* Evidence status (C-11, docs 2.5): the same chip, one vocabulary per chip,
   never a claim level. The mark's form says how directly the fact is known
   (filled: a record; hollow: said of oneself; dashed: inferred; dotted:
   unknown), the word names it, and both are set in the status's token, which
   holds AA on both papers. */
.c-chip--observed {
  color: var(--evidence-observed);
}

.c-chip--tested {
  color: var(--evidence-tested);
}

.c-chip--asserted {
  color: var(--evidence-asserted);
}

.c-chip--inferred {
  color: var(--evidence-inferred);
}

.c-chip--self-declared {
  color: var(--evidence-self-declared);
}

.c-chip--unknown {
  color: var(--evidence-unknown);
}

.c-chip--observed > .c-chip__mark,
.c-chip--tested > .c-chip__mark,
.c-chip--asserted > .c-chip__mark {
  background: currentColor;
  border-color: currentColor;
}

.c-chip--inferred > .c-chip__mark,
.c-chip--self-declared > .c-chip__mark,
.c-chip--unknown > .c-chip__mark {
  background: transparent;
  border-color: currentColor;
}

.c-chip--inferred > .c-chip__mark {
  border-style: dashed;
}

.c-chip--unknown > .c-chip__mark {
  border-style: dotted;
}

.c-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ── 5 · Tabs and step strip ───────────────────────────────────────────── */

.c-tabs {
  display: grid;
  gap: var(--space-4);
}

.c-tabs__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border);
  border-left: var(--border);
}

.c-tabs__tab {
  all: unset;
  box-sizing: border-box;
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-1);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: var(--c-target);
  padding: var(--space-3);
  border-right: var(--border);
  border-bottom: var(--border);
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background-color var(--dur-quick) var(--ease);
}

.c-tabs__list > li {
  display: grid;
}

.c-tabs__tab:hover {
  background: var(--paper-2);
}

.c-tabs__tab:active {
  background: var(--accent-wash);
}

.c-tabs__tab:focus-visible {
  outline: var(--focus-ring);
  outline-offset: calc(-1 * var(--focus-offset));
}

.c-tabs__tab:is([aria-selected='true'], [aria-current]) {
  background: var(--paper-2);
}

.c-tabs__tab:is([aria-selected='true'], [aria-current])::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: var(--c-mark-rule);
  background: var(--accent);
}

.c-tabs__tab:not([aria-selected='true'], [aria-current]) .c-tabs__label {
  color: var(--ash);
}

.c-tabs__tab[aria-disabled='true'] {
  background: none;
  cursor: not-allowed;
}

.c-tabs__panel > * + * {
  margin-top: var(--space-4);
}

.c-tabs__panel:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.c-tabs__panel + .c-tabs__panel {
  /* Without JavaScript every panel is shown, one after the other. */
  padding-top: var(--space-4);
  border-top: var(--border);
}

.c-tabs[data-enhanced] .c-tabs__panel + .c-tabs__panel {
  padding-top: 0;
  border-top: 0;
}

/* ── 6 · Aside note ────────────────────────────────────────────────────── */

.c-aside {
  max-width: var(--measure);
  padding-left: var(--space-5);
  border-left: var(--c-mark-rule) solid var(--rule-strong);
}

.c-aside > * + * {
  margin-top: var(--space-2);
}

/* ── 7 · Voice note ────────────────────────────────────────────────────── */

.c-voice {
  display: grid;
  gap: var(--space-3);
  max-width: var(--measure-narrow);
}

.c-voice > * {
  margin: 0;
}

/* ── 8 · Definition rows ───────────────────────────────────────────────── */

.c-definitions {
  display: grid;
  margin: 0;
  max-width: calc(var(--c-term) + var(--space-6) + var(--measure));
  border-bottom: var(--border);
}

.c-definitions__row {
  display: grid;
  gap: var(--space-2) var(--space-6);
  padding-block: var(--space-4);
  border-top: var(--border);
  align-items: baseline;
}

.c-definitions__row > :is(dt, dd) {
  margin: 0;
}

.c-definitions__row[aria-current] {
  background: var(--accent-wash);
  box-shadow: inset var(--c-mark-rule) 0 0 0 var(--accent);
  padding-inline: var(--space-4);
}

@media (min-width: 36rem) {
  .c-definitions__row {
    grid-template-columns: var(--c-term) minmax(0, 1fr);
  }
}

/* ── 9 · Figure frame ──────────────────────────────────────────────────── */

.c-figure {
  display: grid;
  gap: var(--space-3);
  width: 100%;
  max-width: var(--c-figure-max);
  margin: 0;
}

.c-figure__head {
  display: grid;
  gap: var(--space-1);
}

.c-figure__graphic {
  min-width: 0;
  padding: var(--space-4);
  border: var(--border);
  background: var(--paper-2);
}

.c-figure__graphic--bare {
  /* Drawn directly on the page's own paper. */
  padding: 0;
  border: 0;
  background: none;
}

.c-figure__graphic > svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.c-figure__graphic > * + * {
  margin-top: var(--space-3);
}

.c-figure__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) var(--space-5);
}

.c-figure__foot > .t-caption {
  flex: 1 1 18rem;
}

.c-figure[aria-invalid='true'] .c-figure__graphic {
  border-color: var(--signal);
  background: var(--signal-wash);
}

.c-figure__error {
  color: var(--signal);
}

/* ── 10 · Table ────────────────────────────────────────────────────────── */

.c-table-wrap {
  /* The table scrolls here, never the page. Make it focusable and named:
     tabindex="0" role="region" aria-labelledby="<title id>". */
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

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

.c-table--wide {
  width: max-content;
  min-width: 100%;
}

.c-table :is(th, td) {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: var(--border);
  text-align: left;
  vertical-align: baseline;
}

.c-table thead th {
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--rule-strong);
  vertical-align: bottom;
}

.c-table :is(th, td).c-table__num {
  padding-right: 0;
  padding-left: var(--space-4);
  text-align: right;
  white-space: nowrap;
}

.c-table tbody tr:hover > * {
  background-color: var(--paper-2);
}

.c-table tbody tr[aria-current] > *,
.c-table tbody tr[aria-selected='true'] > * {
  /* The one row the text discusses. */
  background-color: var(--accent-wash);
}

.c-table tbody tr:is([aria-current], [aria-selected='true']) > :first-child {
  box-shadow: inset var(--c-mark-rule) 0 0 0 var(--accent);
  padding-left: var(--space-3);
}

.c-table--zebra tbody tr:nth-child(even) > * {
  /* Only for tables longer than twelve rows (docs 6.4). */
  background-color: var(--paper-2);
}

.c-table--wide :is(th, td):first-child {
  /* Fixed first column. The opaque paper sits under the row's wash so that
     scrolled cells never show through. */
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: var(--paper);
  padding-right: var(--space-5);
}

.c-table--wide :is(th, td):first-child::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-right: var(--border);
}

.c-table--wide tbody tr:hover > :first-child::before {
  background-color: var(--paper-2);
}

.c-table--wide tbody tr:is([aria-current], [aria-selected='true']) > :first-child {
  background-color: var(--paper);
}

.c-table--wide tbody tr:is([aria-current], [aria-selected='true']) > :first-child::before {
  background-color: var(--accent-wash);
}

.c-table td.c-table__state {
  /* Empty, loading or error: one full-width cell holding a sentence. */
  padding: var(--space-5) 0;
}

.c-table__state > .c-loading-rule {
  margin-bottom: var(--space-3);
}

.c-table td.c-table__state--error {
  color: var(--signal);
}

/* ── 11 · Pull quote ───────────────────────────────────────────────────── */

.c-quote {
  margin: var(--space-7) 0;
}

.c-quote__source {
  display: block;
  margin-top: var(--space-4);
  padding-left: var(--space-5);
}

/* ── 12 · Form field ───────────────────────────────────────────────────── */

.c-field {
  display: grid;
  /* In a row of fields a taller neighbour must not stretch this one's input. */
  align-content: start;
  gap: var(--space-2);
  max-width: var(--measure-narrow);
}

.c-field__input {
  display: block;
  width: 100%;
  max-width: none;
  min-height: var(--c-target);
  margin: 0;
  padding: var(--c-field-pad);
  border: var(--border-strong);
  border-radius: var(--radius);
  background: var(--paper-raised);
  appearance: none;
  transition:
    background-color var(--dur-quick) var(--ease),
    border-color var(--dur-quick) var(--ease);
}

textarea.c-field__input {
  min-height: calc(3 * var(--c-target));
  resize: vertical;
}

.c-field__input::placeholder {
  color: var(--ash);
  opacity: 1;
}

.c-field__input:hover {
  background: var(--paper);
}

.c-field__input:active {
  background: var(--paper);
}

.c-field__input:read-only:not(:disabled, select) {
  /* Every select matches :read-only, since its value is chosen rather than
     typed, yet it is a live control: it keeps the input's ground. */
  background: var(--paper-2);
}

.c-field__input:disabled {
  background: var(--paper);
  border: var(--border);
  color: var(--ash);
  cursor: not-allowed;
}

.c-field__input[aria-invalid='true'] {
  border-color: var(--signal);
  background: var(--signal-wash);
}

.c-field__error {
  color: var(--signal);
}

.c-field__error:empty {
  display: none;
}

.c-field-set {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
  margin: 0;
  padding: 0;
  border: 0;
}

.c-field-set > .c-field {
  width: 100%;
}

/* ── 13 · Header ───────────────────────────────────────────────────────── */

.c-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-4) var(--gutter);
  border-bottom: var(--border);
}

.c-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--c-target);
}

.c-header__mark {
  flex: none;
  width: var(--space-6);
  height: var(--space-6);
  color: var(--accent);
  overflow: visible;
}

.c-header__nav {
  display: flex;
  flex-wrap: wrap;
  /* Narrower than the text gap it replaces: each link is at least a touch target wide. */
  gap: 0 var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-header__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--c-target);
  min-height: var(--c-target);
  border-bottom: var(--c-mark-rule) solid transparent;
  transition: color var(--dur-quick) var(--ease);
}

.c-header__link:active {
  color: var(--accent);
}

.c-header__link[aria-current] {
  border-bottom-color: var(--accent);
}

@media (max-width: 36rem) {
  .c-header__nav {
    /* Navigation wraps under the wordmark. */
    flex-basis: 100%;
  }
}

.c-skip {
  /* First focusable element of a page; visible only while focused. */
  position: absolute;
  left: var(--gutter);
  top: var(--space-2);
  z-index: 2;
  padding: var(--space-3) var(--space-4);
  border: var(--border-strong);
  border-radius: var(--radius);
  background: var(--paper-raised);
  text-decoration: none;
}

.c-skip:not(:focus-visible) {
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
}

/* ── 14 · Footer ───────────────────────────────────────────────────────── */

.c-footer {
  max-width: var(--page-max);
  margin: var(--space-section) auto 0;
  padding: var(--space-5) var(--gutter) var(--space-7);
  border-top: var(--border);
}

.c-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
}

.c-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.c-footer__mark {
  flex: none;
  width: var(--space-5);
  height: var(--space-5);
  color: var(--accent);
  overflow: visible;
}

.c-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
  margin: var(--space-5) 0 0;
  padding: var(--space-3) 0 0;
  border-top: var(--border);
  list-style: none;
}

.c-footer__legal a,
.c-footer__legal button {
  display: inline-flex;
  align-items: center;
  min-height: var(--c-target);
}

.c-footer__legal button {
  /* "Cookie settings" when it opens a dialog: a button that reads as a link. */
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.c-footer__licence {
  max-width: var(--measure);
  margin-top: var(--space-3);
}

.c-footer__licence > * + * {
  margin-top: var(--space-2);
}

/* ── 15 · Dark band ────────────────────────────────────────────────────── */

.c-band {
  /* Exception surface: at most one per page, never for reading. Always used
     with the .on-dark class of type.css on the same element. */
  background: var(--dark);
  color: var(--on-dark);
  padding-block: var(--space-section);
}

.c-band__inner {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.c-band__inner > .t-overline + * {
  margin-top: calc(var(--space-3) - var(--space-5));
}

/* ── 16 · Chapter row ──────────────────────────────────────────────────── */

.c-chapter {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-7);
  border-top: var(--border);
}

.c-chapter__picture {
  margin: 0;
  aspect-ratio: 4 / 3;
  border: var(--border);
  background: var(--paper-2);
  overflow: hidden;
}

.c-chapter__picture > :is(img, svg) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-chapter__picture--empty {
  /* No picture yet: the inset stays, with a sentence saying what will come. */
  display: grid;
  place-content: center;
  padding: var(--space-5);
}

.c-chapter__copy {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  align-content: center;
}

.c-chapter__index {
  color: var(--gold-text);
}

.c-chapter__name {
  color: var(--accent);
  margin-top: calc(var(--space-3) - var(--space-4));
}

.c-chapter[aria-current] {
  background: var(--accent-wash);
  box-shadow: inset var(--c-mark-rule) 0 0 0 var(--accent);
  padding-inline: var(--space-5);
}

@media (min-width: 56rem) {
  .c-chapter {
    grid-template-columns: 5fr 6fr;
    gap: var(--space-8);
    align-items: center;
  }

  .c-chapter:nth-of-type(even) > .c-chapter__picture,
  .c-chapter--flip > .c-chapter__picture {
    order: 2;
  }
}

/* ── 17 · Docs layout: one long document ───────────────────────────────── */

.c-docs {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.c-docs__header,
.c-docs__body {
  display: grid;
  grid-template-columns: [text] minmax(0, 1fr);
  column-gap: var(--col-gap);
}

.c-docs__header {
  padding-block: var(--space-7);
  border-bottom: var(--border);
}

.c-docs__header > * {
  grid-column: text;
}

.c-docs__header > .t-title + .t-lead {
  margin-top: var(--space-5);
}

.c-docs__body:not(:has(.c-docs__toc--fold)) {
  /* With contents, the narrow disclosure sits directly under the header's hairline. */
  padding-top: var(--space-7);
}

.c-docs__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-6);
}

.c-docs__printline {
  /* Canonical URL and print date: paper only. */
  display: none;
}

/* Contents */

.c-docs__toc--rail {
  display: none;
}

.c-docs__toc--fold {
  grid-column: text;
  margin-bottom: var(--space-7);
  border-bottom: var(--border);
}

.c-docs__toc-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--c-target);
  cursor: pointer;
  list-style: none;
}

.c-docs__toc-summary::-webkit-details-marker {
  display: none;
}

.c-docs__toc-summary::after {
  content: '+';
  color: var(--ash);
}

details[open] > .c-docs__toc-summary::after {
  content: '\2212';
}

.c-docs__toc-list,
.c-docs__toc-list ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-docs__toc-list {
  border-left: var(--border);
}

.c-docs__toc-list ol a {
  padding-left: calc(2 * var(--space-4));
}

.c-docs__toc-list a {
  display: flex;
  align-items: center;
  min-height: var(--c-target);
  margin-left: -1px;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  border-left: var(--c-mark-rule) solid transparent;
  overflow-wrap: anywhere;
}

.c-docs__toc-list a:active {
  color: var(--accent);
}

.c-docs__toc-list a:focus-visible {
  outline-offset: calc(-1 * var(--focus-offset));
}

.c-docs__toc-list a[aria-current] {
  background: var(--accent-wash);
  border-left-color: var(--accent);
  color: var(--ink);
}

.c-docs__toc-list li:has(> ol [aria-current]) > a {
  color: var(--ink);
}

.c-docs__toc-label {
  margin-bottom: var(--space-3);
}

.c-docs__toc-empty {
  padding-block: var(--space-3);
}

/* Reading column */

.c-docs__prose {
  grid-column: text;
  display: grid;
  grid-template-columns: [text] minmax(0, var(--measure));
  column-gap: var(--col-gap);
  align-items: start;
  min-width: 0;
}

.c-docs__prose > * {
  grid-column: text;
  min-width: 0;
  margin-block: 0;
}

.c-docs__prose > * + * {
  margin-top: var(--space-5);
}

.c-docs__prose :is(h2, h3, h4)[id],
.c-docs__prose [id]:is(details, figure) {
  scroll-margin-top: var(--space-5);
}

.c-docs__prose > h2 {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border);
  text-wrap: balance;
}

.c-docs__prose > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.c-docs__prose > h3 {
  margin-top: var(--space-7);
  text-wrap: balance;
}

.c-docs__prose > h4 {
  margin-top: var(--space-6);
}

.c-docs__prose > h3 + *,
.c-docs__prose > .t-overline + h2 {
  margin-top: var(--space-4);
}

.c-docs__prose > h4 + * {
  margin-top: var(--space-2);
}

.c-docs__prose > .t-overline:has(+ h2) {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border);
}

.c-docs__prose > .t-overline + h2 {
  padding-top: 0;
  border-top: 0;
}

.c-docs__prose :is(p, li) {
  text-wrap: pretty;
}

.c-docs__prose :is(ul, ol):not([class]) {
  padding-left: var(--space-5);
}

.c-docs__prose li + li {
  margin-top: var(--space-2);
}

.c-docs__prose :is(p, li, dd) a:not([class]) {
  /* Plain Markdown links take the link role. */
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.c-docs__prose :is(p, li, dd) a:not([class]):hover {
  color: var(--accent-soft);
  text-decoration-thickness: var(--c-mark-rule);
}

.c-docs__prose dfn {
  font-style: italic; /* a term at the moment it is defined (docs 3.5) */
}

.c-docs__prose > blockquote:not([class]) {
  /* The quote role, for Markdown that cannot carry a class. */
  margin-block: var(--space-7);
  padding-left: var(--space-5);
  border-left: var(--c-mark-rule) solid var(--accent);
  font: italic var(--w-regular) var(--step-2) / var(--lh-ui) var(--font-display);
  text-wrap: balance;
}

.c-docs__prose :not(pre) > code:not([class]) {
  padding: 0 var(--space-1);
  border-radius: var(--radius);
  background: var(--paper-2);
  font-family: var(--font-mono);
  /* A long identifier breaks rather than widening the page at 320px. */
  overflow-wrap: anywhere;
}

.c-docs__prose > pre {
  padding: var(--space-4);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--paper-2);
  font: var(--w-regular) var(--step--1) / var(--lh-body) var(--font-mono);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.c-docs__prose > :is(figure, .c-quote) {
  margin-block: var(--space-7);
}

/* Mathematics: KaTeX output rendered at build time, or native MathML. */

.c-docs__prose :is(.katex-display, math[display='block']) {
  margin: var(--space-5) 0;
  padding-block: var(--space-1);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}

.c-docs__prose .katex {
  color: inherit;
}

.c-docs__prose .katex-display .tag {
  font-family: var(--font-mono);
  color: var(--ash);
}

/* Expandable pieces of text */

.c-expand {
  border-block: var(--border);
}

.c-expand + .c-expand {
  margin-top: 0;
  border-top: 0;
}

.c-expand__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--c-target);
  padding-block: var(--space-4);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--dur-quick) var(--ease);
}

.c-expand__summary::-webkit-details-marker {
  display: none;
}

.c-expand__summary::after {
  content: '+';
  flex: none;
  color: var(--ash);
  font: var(--w-regular) var(--step-0) / var(--lh-ui) var(--font-mono);
}

.c-expand[open] > .c-expand__summary::after {
  content: '\2212';
}

.c-expand__summary:hover,
.c-expand__summary:active {
  background: var(--paper-2);
}

.c-expand__body {
  padding-bottom: var(--space-5);
  max-width: var(--measure);
}

.c-expand__body > * + * {
  margin-top: var(--space-4);
}

.c-expand-group > .c-button {
  margin-bottom: var(--space-4);
}

/* Margin note */

.c-docs__note {
  max-width: var(--measure);
  padding-left: var(--space-5);
  border-left: var(--c-mark-rule) solid var(--rule-strong);
}

/* Citations and references */

.c-cite {
  font-variant-numeric: tabular-nums lining-nums;
  scroll-margin-top: var(--space-7);
}

.c-cite:target,
.c-refs__item:target {
  /* Arrival cue: static, no fade. */
  background: var(--accent-wash);
}

.c-refs {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border);
}

.c-refs__list {
  margin: var(--space-5) 0 0;
  padding-left: var(--space-6);
}

.c-refs__list > li::marker {
  color: var(--ash);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
}

.c-refs__item {
  scroll-margin-top: var(--space-7);
  padding-left: var(--space-2);
}

.c-refs__item + .c-refs__item {
  margin-top: var(--space-4);
}

.c-refs__item > * {
  display: block;
  max-width: var(--measure);
}

.c-refs__item > a {
  overflow-wrap: anywhere;
}

.c-refs__back > a {
  /* Small adjacent links: each is a full touch target (rule A-4). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--c-target);
  min-height: var(--c-target);
}

.c-refs__empty {
  margin-top: var(--space-5);
}

/* The same result for GFM footnotes, which Markdown renderers emit unaided. */

.c-docs__prose sup:has(> [data-footnote-ref]) {
  font-size: inherit;
  vertical-align: baseline;
}

.c-docs__prose [data-footnote-ref]::before {
  content: '[';
}

.c-docs__prose [data-footnote-ref]::after {
  content: ']';
}

.c-docs__prose [data-footnote-backref] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--c-target);
  min-height: var(--c-target);
}

.c-docs__prose [data-footnote-ref],
.c-docs__prose [data-footnotes] li {
  scroll-margin-top: var(--space-7);
}

.c-docs__prose [data-footnote-ref]:target,
.c-docs__prose [data-footnotes] li:target {
  background: var(--accent-wash);
}

.c-docs__prose > [data-footnotes] {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border);
}

.c-docs__prose [data-footnotes] li::marker {
  color: var(--ash);
  font-family: var(--font-mono);
}

.c-docs__close {
  /* The closing "Back to …" link after the references. */
  margin-top: var(--space-7);
}

@media (max-width: 36rem) {
  .c-docs__actions > .c-button {
    width: 100%;
  }
}

@media (min-width: 60rem) {
  .c-docs__header,
  .c-docs__body {
    grid-template-columns: [rail] var(--col-margin) [text] minmax(0, 1fr);
  }

  .c-docs__toc--fold {
    display: none;
  }

  .c-docs__body.c-docs__body {
    padding-top: var(--space-7);
  }

  .c-docs__toc--rail {
    display: block;
    grid-column: rail;
    align-self: start;
    position: sticky;
    top: var(--space-5);
    max-height: calc(100dvh - 2 * var(--space-5));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .c-docs__toc--rail .c-docs__toc-list a {
    min-height: 0;
  }

  .c-docs__toc--rail .c-docs__actions {
    /* The persistent copy of the actions, at the foot of the rail. */
    flex-direction: column;
    align-items: stretch;
    margin-top: var(--space-5);
    padding: var(--space-5) var(--space-1) var(--space-2);
    border-top: var(--border);
  }

  .c-docs__close {
    display: none;
  }

  /* No contents (no sections): the text starts at the rail's left edge. */
  .c-docs__body:not(:has(.c-docs__toc--rail)) > .c-docs__prose {
    grid-column: rail / -1;
  }
}

@media (min-width: 76rem) {
  .c-docs__header,
  .c-docs__body {
    grid-template-columns: [rail] var(--col-margin) [text] minmax(0, var(--measure)) [note] var(--col-margin);
    justify-content: start;
  }

  .c-docs__header > .c-docs__actions {
    grid-column: text / -1;
  }

  .c-docs__prose {
    grid-column: text / -1;
    grid-template-columns: [text] minmax(0, var(--measure)) [note] var(--col-margin);
  }

  .c-docs__prose > .c-docs__wide {
    /* Wide tables, figures and formulas run through the note column. */
    grid-column: text / -1;
    max-width: none;
  }

  .c-docs__prose > .c-docs__note {
    grid-column: note;
    padding-left: 0;
    padding-top: var(--space-2);
    border-left: 0;
    border-top: var(--stroke-hair) solid var(--rule-strong);
  }
}

/* ── 18 · Clock dock: the subject's time in one row ────────────────────── */

/*
 * The one row that holds an instrument's
 * position in time (docs 4.6 and 7.6; rules L-10, M-11, C-6, F-13). Tokens only;
 * class prefix c-clock.
 *
 * The dock is a single row: 56px on a desktop, 52px on a phone. From 36rem of its
 * own width (a container query, not the device) it holds the keys, the readout, the
 * rail and the speed, the rail taking the width that is left; from 60rem the readout
 * gives the long date and the day index. Below 36rem it shows play, the date and the
 * time, and opens the rail, the window and the speed above that row. The parts that
 * belong to the workspace (the event list, the caption, the key and the time sheet)
 * sit above the dock in the markup, so the dock is the last thing, at the foot.
 */

.c-clock {
  /* Component measures with no system token (P-2: named once, here). */
  --c-clock-row: calc(var(--c-target) + var(--space-3)); /* 56px: the dock's one row on a desktop */
  --c-clock-row-phone: calc(var(--c-target) + var(--space-2)); /* 52px: the same row on a phone */
  --c-clock-list-max: 24rem; /* the event list and the day table scroll inside themselves above this height */

  container: c-clock / inline-size;
  display: grid;
  gap: var(--space-3);
}

/* L-10: in an instrument workspace the dock stays at the foot of the window, one row on
   paper with a hairline; the time sheet it opens stays just above it. */
.c-clock--sticky .c-clock__bar {
  position: sticky;
  bottom: 0;
  z-index: 1;
}

.c-clock--sticky .c-clock__sheet {
  position: sticky;
  bottom: var(--c-clock-row);
  z-index: 1;
  max-height: calc(10 * var(--c-target));
  overflow-y: auto;
}

/* ── The dock: one row ── */

.c-clock__bar {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-areas: 'keys face rail side';
  align-items: center;
  column-gap: var(--space-3);
  min-height: var(--c-clock-row);
  padding-inline: var(--space-2);
  border-top: var(--border);
  background: var(--paper);
}

.c-clock__keys {
  grid-area: keys;
  display: flex;
  gap: var(--space-1);
}

.c-clock__key.c-button {
  /* A square key: the button's rectangle, edge, lift and sink (K-3), without the label padding. */
  min-width: var(--c-target);
  padding: 0;
}

.c-clock__icon {
  /* L-9: a 20px line icon in the button's ink, never filled. */
  display: block;
  width: calc(var(--space-4) + var(--space-1));
  height: calc(var(--space-4) + var(--space-1));
  fill: none;
  stroke: currentColor;
  stroke-width: var(--stroke-line);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.c-clock__glyph {
  /* Play morphs into pause in the response duration: two edges of the triangle swing into the second bar. */
  d: path('M7 4L7 16M7 4L15 10M7 16L15 10');
  transition: d var(--dur-quick) var(--ease);
}

.c-clock__key[data-playing='true'] .c-clock__glyph {
  d: path('M7 4L7 16M13 4L13 16M13 16L13 4');
}

.c-clock__face {
  grid-area: face;
  min-width: 0;
}

.c-clock__readout {
  /* Two lines inside the row: the mode and the date, then the time, the zone and the day, or what playback aggregates. */
  display: grid;
  align-content: center;
  justify-items: start;
  min-width: 0;
  min-height: var(--c-target);
  margin: 0;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius);
  background: none;
  text-align: left;
}

button.c-clock__readout {
  cursor: pointer;
  transition: background-color var(--dur-quick) var(--ease);
}

button.c-clock__readout:hover {
  background: var(--paper-2);
}

button.c-clock__readout[aria-expanded='true'] {
  /* Selected (K-7): the sheet it opened is showing. */
  background: var(--accent-wash);
  box-shadow: 0 var(--c-mark-rule) 0 0 var(--accent);
}

.c-clock__top,
.c-clock__line {
  display: flex;
  align-items: center;
  gap: 0 var(--space-2);
  white-space: nowrap;
}

.c-clock__line {
  gap: 0 var(--space-3);
}

.c-clock__mode {
  flex: none;
}

.c-clock__date {
  /* Up to 60rem the short date; the long one from there. */
  display: none;
}

.c-clock__date.c-clock__date--short {
  display: inline;
}

.c-clock__day {
  display: none;
}

.c-clock[data-playing='true'] :is(.c-clock__zone, .c-clock__day) {
  /* While playing, the second line says what each frame aggregates instead. */
  display: none;
}

.c-clock__side {
  grid-area: side;
  position: relative;
}

.c-clock__speed.c-button {
  gap: var(--space-2);
  padding-inline: var(--space-3);
  white-space: nowrap;
}

.c-clock__caret {
  color: var(--ash);
}

.c-clock__speeds {
  /* The named speeds, above the key: a popover (L-3). */
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--space-2));
  z-index: 2;
  display: grid;
  min-width: max-content;
  max-height: calc(8 * var(--c-target));
  overflow-y: auto;
  padding-block: var(--space-1);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--paper-raised);
  box-shadow: var(--shadow-float);
}

.c-clock__speed-option {
  min-height: var(--c-target);
  padding: 0 var(--space-4);
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-quick) var(--ease);
}

.c-clock__speed-option:hover {
  background: var(--paper-2);
}

.c-clock__speed-option[aria-pressed='true'] {
  /* The speed in use (K-7). */
  background: var(--accent-wash);
  box-shadow: inset var(--c-mark-rule) 0 0 0 var(--accent);
}

.c-clock__more {
  grid-area: more;
  display: none;
}

/* ── The rail, compressed into the row ── */

.c-clock__rail {
  grid-area: rail;
  position: relative;
  min-width: 0;
}

.c-clock__note {
  /* The value under the pointer or at the index, and the window: shown on hover, focus and drag. A popover (L-3). */
  position: absolute;
  left: 0;
  bottom: calc(100% + var(--space-2));
  z-index: 2;
  max-width: 100%;
  margin: 0;
  padding: var(--space-1) var(--space-2);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--paper-raised);
  box-shadow: var(--shadow-float);
  white-space: pre-line;
  pointer-events: none;
}

.c-clock__stage {
  position: relative;
  min-height: calc(2 * var(--space-5));
  touch-action: pan-y;
}

.c-clock__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.c-clock__scrub {
  /* The rail is one slider: its value text is the date and minute of the index. */
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  cursor: col-resize;
}

.c-clock__bracket {
  /* The window's left bracket, a slider of its own. 44px to touch; 24px on a fine pointer (A-4). */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--c-target);
  margin-left: calc(var(--c-target) / -2);
  border-radius: var(--radius);
  cursor: ew-resize;
  touch-action: none;
}

@media (pointer: fine) {
  .c-clock__bracket {
    width: var(--c-target-dense);
    margin-left: calc(var(--c-target-dense) / -2);
  }
}

@media (any-pointer: coarse) {
  .c-clock__bracket {
    width: var(--c-target);
    margin-left: calc(var(--c-target) / -2);
  }
}

.c-clock__leader {
  /* The leader line from the gold index to the readout: a hairline, as every annotation (F-7). */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.c-clock__leader path {
  fill: none;
  stroke: var(--rule-strong);
  stroke-width: var(--stroke-hair);
}

/* Drawing: time off in paper-2, the heartbeat on the sequential ramp, ink marks, one gold index. */

.c-clock__off {
  fill: var(--paper-2);
}

.c-clock__cell[data-step='1'] {
  fill: var(--data-seq-1);
}

.c-clock__cell[data-step='2'] {
  fill: var(--data-seq-2);
}

.c-clock__cell[data-step='3'] {
  fill: var(--data-seq-3);
}

.c-clock__cell[data-step='4'] {
  fill: var(--data-seq-4);
}

.c-clock__cell[data-step='5'] {
  fill: var(--data-seq-5);
}

.c-clock__cell--none {
  /* Not recorded: hatched in ash hairline, never the lightest step (F-13). */
  stroke: var(--rule-strong);
  stroke-width: var(--stroke-hair);
}

.c-clock__hatch {
  fill: none;
  stroke: var(--ash);
  stroke-width: var(--stroke-hair);
}

.c-clock__base,
.c-clock__tick {
  stroke: var(--ash);
  stroke-width: var(--stroke-hair);
}

.c-clock__tick--minor {
  stroke: var(--rule-strong);
}

.c-clock__marker {
  fill: var(--ink);
}

.c-clock__marker[data-current] {
  /* The step the reader is on: the latest event at or before the index. */
  fill: var(--accent);
}

.c-clock__pulse {
  /* A replay highlight: an outline that fades with the record's time, never a change of fill. */
  fill: none;
  stroke: var(--accent);
  stroke-width: var(--stroke-hair);
}

.c-clock__wash {
  fill: var(--accent-wash);
}

.c-clock__bracket-mark {
  fill: none;
  stroke: var(--ink);
  stroke-width: var(--stroke-line);
}

.c-clock__index {
  stroke: var(--gold);
  stroke-width: var(--stroke-line);
}

.c-clock__dot {
  fill: var(--gold);
}

.c-clock__lens-frame {
  /* The lens: the visible range of a zoomed rail, framed on the whole record. */
  fill: var(--accent-wash);
  stroke: var(--accent);
  stroke-width: var(--stroke-hair);
}

/* ── Above the dock: the caption, the key, the time sheet and the event list ── */

.c-clock__foot {
  display: grid;
  gap: var(--space-2);
}

.c-clock__say {
  max-width: var(--measure);
  min-height: calc(2 * var(--space-5));
  margin: 0;
  padding-left: var(--space-4);
  border-left: var(--c-mark-rule) solid var(--rule-strong);
}

.c-clock__key-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
}

.c-clock__swatch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.c-clock__swatch > svg {
  width: var(--space-4);
  height: auto;
}

.c-clock__sheet {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-2);
  border-top: var(--border);
  background: var(--paper);
  scroll-margin-bottom: var(--c-clock-row);
}

.c-clock__set {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.c-clock__set > legend {
  margin-bottom: var(--space-3);
  padding: 0;
}

.c-clock__fields {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3) var(--space-4);
}

.c-clock__fields > .c-field {
  flex: 1 1 10rem;
  max-width: var(--c-term);
}

.c-clock__lanes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
}

.c-clock__lane {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--c-target);
  cursor: pointer;
}

.c-clock__lane > input {
  width: var(--space-4);
  height: var(--space-4);
  margin: 0;
  accent-color: var(--accent);
}

.c-clock__mark {
  flex: none;
  width: calc(var(--space-2) + var(--space-1));
  height: auto;
  overflow: visible;
}

.c-clock__table {
  max-height: var(--c-clock-list-max);
  overflow-y: auto;
}

.c-clock__events > .c-expand__summary {
  padding-block: var(--space-2);
}

.c-clock__list {
  max-height: var(--c-clock-list-max);
  margin: 0 0 var(--space-3);
  padding: 0;
  overflow-y: auto;
  list-style: none;
  border-top: var(--border);
}

.c-clock__list > li + li {
  margin-top: 0;
}

.c-clock__step {
  display: grid;
  grid-template-columns: minmax(10rem, auto) auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--c-target);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-bottom: var(--border);
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-quick) var(--ease);
}

.c-clock__step:hover {
  background: var(--paper-2);
}

.c-clock__step[aria-current='step'] {
  /* Selected (K-7): wash and a 2px accent rule on the left. */
  background: var(--accent-wash);
  box-shadow: inset var(--c-mark-rule) 0 0 0 var(--accent);
}

.c-clock__empty {
  padding: var(--space-3);
}

/* ── Without the script, loading, error ── */

.c-clock__fallback {
  margin: 0;
}

.c-clock__fallback > .c-loading-rule {
  margin-bottom: var(--space-2);
}

.c-clock__error {
  color: var(--signal);
}

.c-clock__hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A simulated reduced-motion state (a page's switch sets data-reduced): nothing eases, as base.css does for the system setting. */
[data-reduced='true'] .c-clock *,
[data-reduced='true'] .c-clock *::before,
[data-reduced='true'] .c-clock *::after {
  transition: none;
  animation: none;
}

/* ── From 60rem: the long date and the day index ── */

@container c-clock (min-width: 60rem) {
  .c-clock__date {
    display: inline;
  }

  .c-clock__date.c-clock__date--short {
    display: none;
  }

  .c-clock__day {
    display: inline;
  }
}

/* ── The phone: play, the date and the time; the rest opens above that row ── */

@container c-clock (max-width: 35.99rem) {
  .c-clock__bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      'rail rail rail'
      'side side side'
      'keys face more';
    column-gap: var(--space-1);
    min-height: var(--c-clock-row-phone);
    padding-inline: var(--space-1);
  }

  .c-clock:not([data-expanded='true']) .c-clock__bar {
    grid-template-areas: 'keys face more';
  }

  .c-clock__mode,
  .c-clock__zone,
  .c-clock__day,
  .c-clock__state,
  .c-clock__key--step,
  .c-clock__side,
  .c-clock__rail {
    display: none;
  }

  .c-clock__readout {
    /* The date and the time on one line, so the row keeps its height; they wrap only on the narrowest screens. */
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    align-content: center;
    column-gap: var(--space-2);
    padding-inline: var(--space-1);
  }

  .c-clock__more {
    display: inline-flex;
  }

  .c-clock:not([data-expanded='true']) .c-clock__foot {
    /* Collapsed, the caption is still spoken: out of sight, not out of the page. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .c-clock[data-expanded='true'] .c-clock__bar {
    row-gap: var(--space-2);
    padding-top: var(--space-2);
  }

  .c-clock[data-expanded='true'] :is(.c-clock__rail, .c-clock__side) {
    display: block;
  }

  .c-clock[data-expanded='true'] .c-clock__state:not([hidden]) {
    display: inline;
  }

  .c-clock[data-expanded='true'] .c-clock__more .c-clock__icon {
    transform: rotate(180deg);
  }

  /* The time sheet replaces the brackets and the lens, which are too small to drag precisely here. */
  .c-clock__bracket,
  .c-clock__lens {
    display: none;
  }

  .c-clock__step {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .c-clock__step > .t-small {
    grid-column: 1 / -1;
  }
}

/* ── 19 · Range: a slider with a rectangle thumb ───────────────────────── */

.c-range {
  /* A native range input: a hairline track and a rectangular thumb, never a
     round one. The whole row is the 44px target; the keyboard is the
     browser's (arrows, Page Up and Down, Home and End); the focus ring comes
     from base.css. A component that draws marks under the thumb sets its
     width in --c-range-thumb, so both read one value. */
  display: block;
  width: 100%;
  min-height: var(--c-target);
  margin: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
}

.c-range::-webkit-slider-runnable-track {
  height: var(--c-mark-rule);
  background: var(--rule-strong);
}

.c-range::-moz-range-track {
  height: var(--c-mark-rule);
  background: var(--rule-strong);
}

.c-range::-webkit-slider-thumb {
  box-sizing: border-box;
  width: var(--c-range-thumb, var(--space-4));
  height: var(--space-5);
  margin-top: calc((var(--c-mark-rule) - var(--space-5)) / 2);
  border: var(--border-strong);
  border-radius: var(--radius);
  background: var(--accent);
  box-shadow: var(--edge);
  appearance: none;
  transition:
    background-color var(--dur-quick) var(--ease),
    box-shadow var(--dur-quick) var(--ease);
}

.c-range::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--c-range-thumb, var(--space-4));
  height: var(--space-5);
  border: var(--border-strong);
  border-radius: var(--radius);
  background: var(--accent);
  box-shadow: var(--edge);
  transition:
    background-color var(--dur-quick) var(--ease),
    box-shadow var(--dur-quick) var(--ease);
}

.c-range:hover::-webkit-slider-thumb {
  background: var(--accent-soft);
  box-shadow: var(--edge-hover);
}

.c-range:hover::-moz-range-thumb {
  background: var(--accent-soft);
  box-shadow: var(--edge-hover);
}

.c-range:active::-webkit-slider-thumb {
  /* Pressed: the printed edge drops, as a key's does (K-3). */
  box-shadow: none;
}

.c-range:active::-moz-range-thumb {
  box-shadow: none;
}

.c-range:disabled {
  cursor: not-allowed;
}

.c-range:disabled::-webkit-slider-runnable-track {
  background: var(--rule);
}

.c-range:disabled::-moz-range-track {
  background: var(--rule);
}

.c-range:disabled::-webkit-slider-thumb {
  /* K-5: --rule border, no edge; the paper shows through, never a lowered opacity. */
  border: var(--border);
  background: var(--paper);
  box-shadow: none;
}

.c-range:disabled::-moz-range-thumb {
  border: var(--border);
  background: var(--paper);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  /* base.css stops transitions on elements and ::before/::after; the thumb is
     another pseudo-element, so the same stop is repeated here (A-5). */
  .c-range::-webkit-slider-thumb {
    transition: none;
  }

  .c-range::-moz-range-thumb {
    transition: none;
  }
}

/* ── 20 · Scale: one parameter on a linear scale ───────────────────────── */

.c-scale {
  /* One setting, as a fieldset: its value in its unit on a linear scale,
     the default as a labelled notch, the preset's value as a hollow mark,
     the difference from the preset as a bracket with words. The
     drawing is inset by half a thumb at both ends, so each mark sits under
     the thumb's centre at its value. Positions arrive as unitless fractions,
     0 at the lower limit and 1 at the upper: --c-scale-at, --c-scale-from,
     --c-scale-to. */
  --c-range-thumb: var(--space-4);
  --c-scale-inset: calc(var(--c-range-thumb) / 2);
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  max-width: var(--measure);
  margin: 0;
  padding: 0;
  border: 0;
}

.c-scale__legend {
  /* Floated, it is not the fieldset's "rendered legend" but a plain grid
     item, so the gap and the selected wash take it in like any other part. */
  float: left;
  padding: 0;
}

.c-scale__figure {
  /* The limits beside the track's ends, the default's label above it, the
     difference below it: one row per label, so no two labels can collide. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    '. above .'
    'min track max'
    '. below .';
  align-items: center;
  column-gap: var(--space-2);
  min-width: 0;
}

.c-scale__lane {
  display: flex;
  min-width: 0;
  margin: 0;
  padding-inline: var(--c-scale-inset);
}

.c-scale__lane--default {
  grid-area: above;
}

.c-scale__lane--difference {
  grid-area: below;
}

.c-scale__limit {
  white-space: nowrap;
}

.c-scale__limit--min {
  grid-area: min;
}

.c-scale__limit--max {
  grid-area: max;
}

.c-scale__tag {
  /* The point at a given fraction of the label's width sits at the same
     fraction of the lane: centred mid-track, flush at the ends, never out. */
  position: relative;
  left: calc(var(--c-scale-at, 0) * 100%);
  max-width: 100%;
  transform: translateX(calc(var(--c-scale-at, 0) * -100%));
}

.c-scale__track {
  grid-area: track;
  position: relative;
  min-width: 0;
  min-height: var(--c-target);
}

.c-scale__line,
.c-scale__tick,
.c-scale__notch,
.c-scale__preset,
.c-scale__marker,
.c-scale__bracket,
.c-scale__track > .c-loading-rule {
  position: absolute;
}

.c-scale__line {
  /* The axis, drawn by the scale in every state; the slider's own track is clear. */
  inset: calc(50% - var(--c-mark-rule) / 2) 0 auto;
  height: var(--c-mark-rule);
  background: var(--rule-strong);
}

.c-scale__tick,
.c-scale__notch,
.c-scale__preset,
.c-scale__marker {
  left: calc(var(--c-scale-inset) + var(--c-scale-at, 0) * (100% - 2 * var(--c-scale-inset)));
}

.c-scale__tick {
  /* Round values, outside the track: a 4px ash hairline below it (docs 6.3). */
  top: calc(50% + var(--c-mark-rule) / 2);
  height: var(--space-1);
  border-left: var(--stroke-hair) solid var(--ash);
  transform: translateX(-50%);
}

.c-scale__notch {
  /* The default: a notch from the track up to its label. */
  top: 0;
  height: calc(50% - var(--c-mark-rule) / 2);
  border-left: var(--c-mark-rule) solid var(--ash);
  transform: translateX(-50%);
}

.c-scale__preset,
.c-scale__marker {
  top: 50%;
  width: var(--c-range-thumb);
  height: var(--space-5);
  border: var(--border-strong);
  border-radius: var(--radius);
  transform: translate(-50%, -50%);
}

.c-scale__preset {
  /* The preset's value: the thumb's outline, hollow. */
  background: var(--paper-raised);
}

.c-scale__marker {
  /* The value as served, where the thumb will be; the script puts the slider in its place. */
  background: var(--accent);
  box-shadow: var(--edge);
}

.c-scale__bracket {
  /* The difference, from the preset's value to the value, under both marks. */
  top: calc(50% + var(--space-5) / 2);
  left: calc(var(--c-scale-inset) + var(--c-scale-from, 0) * (100% - 2 * var(--c-scale-inset)));
  width: calc((var(--c-scale-to, 0) - var(--c-scale-from, 0)) * (100% - 2 * var(--c-scale-inset)));
  height: var(--space-2);
  border: var(--c-mark-rule) solid var(--accent);
  border-top: 0;
}

.c-scale__track > .c-loading-rule {
  /* Loading: the axis itself draws once. */
  inset: calc(50% - var(--c-mark-rule) / 2) var(--c-scale-inset) auto;
  width: auto;
}

.c-scale__range {
  /* Positioned, so it lies over the marks and takes every pointer. */
  position: relative;
}

.c-scale .c-scale__range::-webkit-slider-runnable-track {
  background: transparent;
}

.c-scale .c-scale__range::-moz-range-track {
  background: transparent;
}

.c-scale__entry {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  min-width: 0;
}

.c-scale__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.c-scale__field.c-field__input {
  width: var(--space-9);
}

.c-scale__field:user-invalid {
  /* Without the script the browser still refuses a value off the limits or the step. */
  border-color: var(--signal);
  background: var(--signal-wash);
}

.c-scale__status {
  /* Read out when a typed value or Reset settles; the slider speaks for itself. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.c-scale[aria-current] {
  /* Selected (K-7): the parameter the reader has open elsewhere. */
  padding: var(--space-3) var(--space-4);
  background: var(--accent-wash);
  box-shadow: inset var(--c-mark-rule) 0 0 0 var(--accent);
}

.c-scale[aria-busy='true'] {
  cursor: progress;
}

.c-scale:disabled :is(.c-scale__legend .t-ui, .c-scale__entry > label) {
  color: var(--ash);
}

.c-scale:disabled .c-scale__line {
  background: var(--rule);
}

.c-scale:disabled .c-scale__marker {
  border: var(--border);
  background: var(--paper);
  box-shadow: none;
}

.c-scale:disabled .c-scale__bracket {
  border-color: var(--rule-strong);
}

/* ── 21 · Inspector: the record the reader opened ───────────────────────── */

/* The inspector of an instrument workspace (docs 4.6; L-4, K-7, C-11). It
   places the kit's parts and adds none of its own: definition rows for the
   facts, an evidence chip (section 4) for each fact's status, links, buttons,
   the table and the loading rule. One markup, three places: with the script
   and room for it (the figure column still wider than --measure), a rail
   beside the figure; with less room, after the figure, opening as a sheet at
   the foot of the window when a record is chosen; without the script, a
   static section after the figure. The layout writes which of rail and flow
   applies in --c-inspector-place and snippets/inspector/behaviour.js reads
   it, so the breakpoint is written once, here. */

.c-inspector-layout {
  container: c-inspector-layout / inline-size;
}

.c-inspector-layout__grid {
  --c-inspector-place: flow;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7) var(--space-5);
  align-items: start;
}

.c-inspector-layout__figure {
  min-width: 0;
}

.c-inspector-layout__figure > .c-figure {
  /* The figure column holds figures, not lines of text: they fill it (docs 4.6). */
  max-width: none;
}

.c-inspector-layout__figure .c-table :is(th, td):first-child {
  /* Room for the focus ring of the names, which the scroll region would clip. */
  padding-left: var(--space-2);
}

/* 53rem of room leaves the figure column (53 − --space-5 − --col-margin =
   38.4rem) wider than --measure, so the inspector can stand beside it; the
   docs layout's wide column (--measure + --col-gap + --col-margin = 53.5rem)
   is enough. Only with the script: without it nothing can be chosen, so the
   record reads as a section after the figure. */
@container c-inspector-layout (min-width: 53rem) {
  .c-inspector-layout[data-enhanced] .c-inspector-layout__grid {
    --c-inspector-place: rail;
    grid-template-columns: minmax(0, 1fr) var(--col-margin);
  }
}

.c-inspector {
  /* A size container takes no width from its content, so it takes the full
     width of its place, and in the flow no more than definition rows (4.3);
     where its place sizes to its content, it is as wide as a rail. */
  container: c-inspector / inline-size;
  contain-intrinsic-inline-size: var(--col-margin);
  width: 100%;
  min-width: 0;
  max-width: calc(var(--c-term) + var(--space-6) + var(--measure));
  padding-top: var(--space-2);
  border-top: var(--border);
}

.c-inspector__panel {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.c-inspector__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  min-height: var(--c-target);
}

.c-inspector__title,
.c-inspector__name {
  /* Their heading level follows the page, and base.css resets only h1 to h4. */
  margin: 0;
}

.c-inspector__status {
  /* Read aloud, not shown ("Showing Harbour map, object."): the tiles already
     show it. Hidden as .c-skip is. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.c-inspector__body {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  min-width: 0;
}

.c-inspector__tile {
  /* A record tile: a hairline rectangle on paper. Never a card: no fill, no
     shadow, no hierarchy made by boxes (docs 4.6, L-7). */
  display: grid;
  gap: var(--space-2);
  align-content: start;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: var(--border);
  border-radius: var(--radius);
}

/* Facts: definition rows (section 8), the term over its value in a rail or on
   a phone, beside it where the inspector has room. */

.c-inspector__facts.c-definitions {
  max-width: none;
  border-bottom: 0;
}

.c-inspector__facts .c-definitions__row {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
  padding-block: var(--space-3);
}

@container c-inspector (min-width: 36rem) {
  .c-inspector__facts .c-definitions__row {
    grid-template-columns: var(--c-term) minmax(0, 1fr);
    gap: var(--space-2) var(--space-6);
  }
}

.c-inspector__fact {
  /* The value, then its evidence chip; they part onto two lines when narrow. */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  min-width: 0;
  overflow-wrap: anywhere;
}

.c-inspector__related,
.c-inspector__actions {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-inspector__related > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
}

.c-inspector__actions {
  gap: var(--space-3);
}

.c-inspector__actions > li {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

/* Loading and error take the place of the record, in words (K-4). */

.c-inspector__state {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-3);
}

.c-inspector__state--error {
  /* Signal text, a signal hairline and the signal wash (docs 2.4). */
  padding: var(--space-3) var(--space-4);
  border: var(--border);
  border-color: var(--signal);
  border-radius: var(--radius);
  background: var(--signal-wash);
}

.c-inspector__error {
  color: var(--signal);
}

.c-inspector__pick {
  /* A name in the figure, made a button by the script. It reads as a link
     (.c-link.t-link), because choosing it only shows; aria-current turns it ink. */
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.c-inspector__sheet {
  /* The same panel at the foot of the window: a native modal dialog, allowed
     the popover shadow (L-3) as the consent kit's dialog is. */
  container: c-inspector / inline-size;
  position: fixed;
  inset: auto 0 0;
  width: 100%;
  max-width: none;
  max-height: calc(100dvh - var(--space-8));
  margin: 0;
  padding: 0 var(--gutter) var(--space-6);
  border: 0;
  border-top: var(--border-strong);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-float);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.c-inspector__sheet[open] {
  /* It rises into place once, as a response (M-3); under reduced motion
     base.css removes the rise and the sheet is simply there. */
  animation: c-inspector-rise var(--dur-quick) var(--ease);
}

@keyframes c-inspector-rise {
  from {
    transform: translateY(100%);
  }
}

.c-inspector__sheet::backdrop {
  background: var(--rule-strong);
}

.c-inspector__sheet .c-inspector__panel {
  max-width: calc(var(--c-term) + var(--space-6) + var(--measure));
}

.c-inspector__sheet .c-inspector__bar {
  /* Title and Close stay in reach while a long record scrolls under them. */
  position: sticky;
  top: 0;
  z-index: 1;
  padding-block: var(--space-3);
  border-bottom: var(--border);
  background: var(--paper);
}

/* ── 22 · Company row ──────────────────────────────────────────────────── */

/* The items a reader keeps ("My notebooks") as rows in the manner of the
   chapter row, never cards (docs 4.3, 4.6; L-7, K-2, K-7, F-13, A-4): a
   miniature heartbeat wall, the name as the row's one link, the facts, what
   it takes to open the item, and small row actions, with search and sort
   above and one sentence on a first visit. A row is a hairline above and
   nothing around it: no border box, no ground, no shadow, no radius.
   Selected (K-7) adds the wash and a 2px accent rule on the left, inside the
   row's own padding, so nothing shifts and the walls stay aligned. The
   list's own width chooses the composition (a container query): from 40rem
   the wall stands in a column beside the copy; below that it sits above the
   name. Markup, data and behaviour: snippets/company-row/. */

.c-companies {
  /* Component measures with no system token (P-2: named once, here). */
  --c-company-wall: 12.5rem; /* the miniature wall: 200px at the root size, one viewBox unit a pixel */
  --c-company-fact: 7rem; /* least width of a fact; two still fit side by side at 320px */

  container: c-companies / inline-size;
}

/* The tools: search, sort, and what is shown, in words. */

.c-companies__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-3);
}

.c-companies__tools > .c-field {
  flex: 1 1 var(--c-term);
}

.c-companies__status {
  margin: 0 0 var(--space-5);
}

.c-companies__say {
  /* The live region the walls speak through: read aloud, not shown, since
     the line under the wall shows the same words. Hidden as .c-skip is. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The key, one for the list (F-13). */

.c-companies__key {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.c-companies__key > p {
  max-width: var(--measure);
  margin: 0;
}

.c-companies__steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-companies__steps > li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.c-companies__swatch {
  display: block;
  flex: none;
  width: var(--space-5);
  height: auto;
}

/* The list: rows under hairlines, as the chapter row (L-7). */

.c-companies__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: var(--border);
}

.c-companies__list > li {
  margin: 0;
}

.c-company {
  /* A row, not a card: one hairline above, no box, no ground, no shadow. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3) var(--space-6);
  padding: var(--space-5) var(--space-3);
  border-top: var(--border);
}

.c-company[aria-current] {
  /* Selected (K-7): the item open in the workspace now. "Open now" says it in words. */
  background: var(--accent-wash);
  box-shadow: inset var(--c-mark-rule) 0 0 0 var(--accent);
}

.c-company[aria-busy='true'] .c-company__busy {
  cursor: progress;
}

/* The miniature wall: the item's heartbeat, one row of at most five steps. */

.c-company__wall {
  display: grid;
  gap: var(--space-1);
  align-content: start;
  width: min(100%, var(--c-company-wall));
}

.c-company__beat {
  display: block;
  width: 100%;
  height: auto;
  /* The ring of the cell in hand stands just outside the cell, the first
     and last cells included. */
  overflow: visible;
}

.c-company__busiest {
  /* The busiest period; while the wall has the keyboard, the cell in hand. */
  margin: 0;
}

.c-company__cell[data-step='1'] {
  fill: var(--data-seq-1);
}

.c-company__cell[data-step='2'] {
  fill: var(--data-seq-2);
}

.c-company__cell[data-step='3'] {
  fill: var(--data-seq-3);
}

.c-company__cell[data-step='4'] {
  fill: var(--data-seq-4);
}

.c-company__cell[data-step='5'] {
  fill: var(--data-seq-5);
}

.c-company__cell--none {
  /* Not available: paper, a hairline and ash hatching, never the lightest step (F-13). */
  fill: var(--paper);
  stroke: var(--rule-strong);
  stroke-width: var(--stroke-hair);
}

.c-company__hatch {
  fill: none;
  stroke: var(--ash);
  stroke-width: var(--stroke-hair);
  pointer-events: none;
}

.c-company__halo {
  /* Paper under the ring, so it reads against the darkest step. */
  fill: none;
  stroke: var(--paper);
  stroke-width: calc(var(--c-mark-rule) + 2 * var(--stroke-line));
  pointer-events: none;
}

.c-company__ring {
  /* The cell in hand (F-13): the focus ring's colour and 2px width. */
  fill: none;
  stroke: var(--focus);
  stroke-width: var(--c-mark-rule);
  pointer-events: none;
}

/* The copy: name, state in words, facts, actions. */

.c-company__copy {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  min-width: 0;
}

.c-company__name {
  /* The heading level follows the page; base.css resets only h1 to h4. */
  margin: 0;
  overflow-wrap: anywhere;
}

.c-company__link {
  /* The row's one link: it opens the item. A 44px target (A-4). */
  display: inline-flex;
  align-items: center;
  min-height: var(--c-target);
}

.c-company__link[aria-current] {
  /* The item open now: ink, still underlined, as a current link is (K-6). */
  color: var(--ink);
  text-decoration-thickness: var(--c-mark-rule);
}

.c-company__link:not([href]) {
  /* An item no reader here can open (K-5): no link, ash, the reason beside it. */
  color: var(--ash);
  text-decoration: none;
  cursor: not-allowed;
}

.c-company__here,
.c-company__error,
.c-company__why {
  max-width: var(--measure);
  margin: 0;
}

.c-company__error {
  /* Error (K-4): in words, in signal, beside the name it concerns. */
  color: var(--signal);
}

.c-company__busy {
  /* Loading (K-4): a hairline that draws once, and a sentence. */
  display: grid;
  gap: var(--space-2);
  max-width: var(--measure);
}

.c-company__busy > p {
  margin: 0;
}

.c-company__facts {
  /* Label over value; a grid, so each fact keeps its column from row to row. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--c-company-fact), 1fr));
  gap: var(--space-3) var(--space-4);
  margin: 0;
}

.c-company__fact {
  display: grid;
  gap: var(--space-1);
  align-content: start;
  min-width: 0;
}

.c-company__fact > :is(dt, dd) {
  margin: 0;
  overflow-wrap: anywhere;
}

.c-company__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Row actions (A-4, docs 4.6): 44px by default; 24px on a fine pointer; 44px
   again wherever a coarse pointer is present, so a laptop with a touch screen
   keeps the large target. The rectangle, edge, lift and sink stay the
   button's (K-3). */
.c-company__action.c-button {
  min-height: var(--c-target);
  padding: var(--space-2) var(--space-3);
}

@media (pointer: fine) {
  .c-company__action.c-button {
    min-height: var(--c-target-dense);
    padding-block: 0;
  }
}

@media (any-pointer: coarse) {
  .c-company__action.c-button {
    min-height: var(--c-target);
    padding-block: var(--space-2);
  }
}

.c-company__hidden {
  /* The item's name inside each action, for assistive technology only ("Rename Ipsum Studio"). */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* After the list: no match, the table on demand, the first visit. */

.c-companies__none {
  /* Empty after a search (K-4): a sentence and a way back, in the list's place. */
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  padding-block: var(--space-5);
  border-block: var(--border);
}

.c-companies__none > p {
  margin: 0;
}

.c-companies__numbers.c-expand {
  /* The list's closing hairline is the top of the table's disclosure: one rule, not two. */
  border-top: 0;
}

.c-companies__numbers .c-expand__body {
  /* The table is wider than the measure and scrolls inside its own region. */
  max-width: none;
}

.c-companies__numbers .c-expand__body > p {
  max-width: var(--measure);
}

.c-companies__first {
  /* Empty, on a first visit (K-4): what will appear, and one action. */
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--border);
}

.c-companies__first > p {
  margin: 0;
}

/* From 40rem of list: the wall in a column beside the copy. */

@container c-companies (min-width: 40rem) {
  .c-company {
    grid-template-columns: var(--c-company-wall) minmax(0, 1fr);
  }

  .c-company__wall {
    /* Level with the middle of the name's 44px line. */
    padding-top: var(--space-3);
  }
}

/* ── Print: ink on the reader's own paper, no chrome ───────────────────── */

@page {
  /* Page geometry is physical: the one place where lengths are not tokens. */
  size: A4;
  margin: 20mm 18mm;
}

@media print {
  html,
  body,
  .c-band {
    background: none;
  }

  .c-skip,
  .c-header__nav,
  .c-footer__top > :not(.c-footer__brand),
  .c-footer__legal,
  .c-docs__actions,
  .c-docs__toc--fold,
  .c-docs__close,
  .c-refs__back,
  .c-expand-group > .c-button,
  .c-button,
  .c-loading-rule,
  .c-inspector__sheet,
  .c-companies__tools,
  .c-company__why,
  [data-consent-banner] {
    display: none;
  }

  .c-docs,
  .c-header,
  .c-footer {
    max-width: none;
    padding-inline: 0;
  }

  .c-docs__header,
  .c-docs__body,
  .c-docs__prose {
    display: block;
  }

  .c-docs__printline {
    display: block;
    margin-top: var(--space-5);
  }

  .c-docs__prose > :not(.c-docs__wide) {
    /* Single column at the text measure; wide items take the page width. */
    max-width: var(--measure);
  }

  .c-docs__toc-list a {
    min-height: 0;
  }

  .c-docs__toc--rail {
    /* The contents as a plain list in flow, then a page break. */
    display: block;
    position: static;
    max-height: none;
    overflow: visible;
    break-after: page;
  }

  .c-docs__toc-list a[aria-current] {
    background: none;
    border-left-color: transparent;
  }

  .c-docs__prose > .c-docs__note {
    padding: 0 0 0 var(--space-5);
    border-top: 0;
    border-left: var(--c-mark-rule) solid var(--rule-strong);
  }

  /* Expandables print open, with or without the script. */
  .c-expand::details-content {
    content-visibility: visible;
    display: block;
  }

  .c-expand__summary::after {
    content: none;
  }

  /* Washes and insets are dropped; hairlines stay. */
  .c-figure__graphic,
  .c-chapter__picture,
  .c-cite:target,
  .c-refs__item:target,
  .c-tabs__tab,
  .c-table tbody tr > *,
  .c-table--wide tbody tr > :first-child::before,
  .c-docs__prose > pre,
  .c-docs__prose code {
    background: none;
  }

  .c-table-wrap,
  .c-docs__prose :is(.katex-display, math[display='block']),
  .c-docs__prose > pre {
    overflow: visible;
  }

  .c-docs__prose > pre {
    white-space: pre-wrap;
  }

  .c-table--wide {
    width: 100%;
  }

  .c-table--wide :is(th, td):first-child {
    position: static;
  }

  .c-tabs__panel[hidden] {
    /* A tour prints as its sequence of steps. */
    display: block;
  }

  .c-inspector-layout[data-enhanced] .c-inspector-layout__grid {
    /* The inspector prints after the figure, as it reads without the script. */
    grid-template-columns: minmax(0, 1fr);
  }

  .c-band {
    color: var(--ink);
    padding-block: var(--space-6);
    border-block: var(--border);
  }

  .c-band.on-dark * {
    /* The ground is not printed, so the type returns to ink. */
    color: var(--ink);
  }

  a,
  .t-link,
  .c-cite {
    color: var(--ink);
  }

  .c-cite {
    text-decoration: none;
  }

  :is(h1, h2, h3, h4),
  .t-figure-title,
  .c-figure__head,
  .c-expand__summary {
    break-after: avoid;
  }

  .c-figure,
  .c-table,
  .c-quote,
  .c-aside,
  .c-voice,
  .c-refs__item,
  .c-definitions__row,
  .c-inspector__tile,
  .c-chapter,
  .c-company,
  .katex-display,
  math[display='block'] {
    break-inside: avoid;
  }

  p,
  li {
    orphans: 3;
    widows: 3;
  }
}