/*
 * parts.css  (design system v5, shared parts)
 * Built 11 November 2026 by the shared builder from design/v5/tokens/tokens.css. Link tokens.css and fonts.css first.
 * Every colour, radius, shadow, duration, easing and type value is a token. Layout sizes with no token are written as
 * calc() of --p-space-* tokens (listed in BUILD-NOTES.md, spec gaps). No new custom properties are declared here.
 * No gradient, filter, blend mode, mask, scroll snap, prefers-color-scheme or url(). Theme switches only by data-theme.
 * Inside a dark scope every pale panel, chip, document or button carries its own data-theme="light" in the markup.
 * Sections: 0 base, 1 type bindings, 2 panel, well, card, 3 chip, 4 step row, trace line, 5 thread and source line,
 * 6 sign-off, 7 request record, 8 document page, 9 system panel, key row, access-record row, 10 mark cell,
 * 11 Pause chip, fiction caption, 12 glyph, 13 actions and link, 14 nav, footer, 15 fields, 16 heading block, 17 phone.
 */

/* 0. Base ------------------------------------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
li { list-style: none; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
svg { display: block; flex: none; fill: currentColor; }   /* an svg with no fill of its own paints in the text colour, never the browser's black */

/* Focus: 2 px solid, offset 3 px, the focus-ring role (light #0071D9, dark #3D9EFF). Shown at once, never animated. */
:focus-visible,
.is-focus {
  outline: var(--p-border-width-focus) solid var(--color-focus-ring);
  outline-offset: var(--c-focus-offset);
  transition: none;
}

/* 1. Type bindings (the same values as the .type-* classes in tokens.css; phone values in section 17) ------------- */
.panel__title {
  font-family: var(--type-title-family); font-weight: var(--type-title-weight);
  font-size: var(--type-title-size-web-desktop); line-height: var(--type-title-line-height-web-desktop);
  letter-spacing: var(--type-title-tracking-web-desktop);
}
.trace-line, .step-row__trace, .key-row__detail, .system-row__name, .system-panel__line, .request-record__ask,
.signoff__role, .panel-text, .nav__wordmark {
  font-family: var(--type-panel-family); font-weight: var(--type-panel-weight);
  font-size: var(--type-panel-size-web-desktop); line-height: var(--type-panel-line-height-web-desktop);
  letter-spacing: var(--type-panel-tracking-web-desktop); font-variant-numeric: tabular-nums;
}
.step-row__name, .key-row__name, .system-panel__name, .signoff__state, .request-record__answer, .field__label {
  font-family: var(--type-panel-strong-family); font-weight: var(--type-panel-strong-weight);
  font-size: var(--type-panel-strong-size-web-desktop); line-height: var(--type-panel-strong-line-height-web-desktop);
  letter-spacing: var(--type-panel-strong-tracking-web-desktop); font-variant-numeric: tabular-nums;
}
.doc__title {
  font-family: var(--type-document-title-family); font-weight: var(--type-document-title-weight);
  font-size: var(--type-document-title-size-web-desktop); line-height: var(--type-document-title-line-height-web-desktop);
  letter-spacing: var(--type-document-title-tracking-web-desktop);
}
.doc__letterhead, .doc__line, .record-row {
  font-family: var(--type-document-line-family); font-weight: var(--type-document-line-weight);
  font-size: var(--type-document-line-size-web-desktop); line-height: var(--type-document-line-line-height-web-desktop);
  letter-spacing: var(--type-document-line-tracking-web-desktop); font-variant-numeric: tabular-nums;
}
.fiction-caption, .caption, .field__help, .field__error, .nav__link, .footer__link, .heading-block__proof, .heading-block__caption, .text-link--caption {
  font-family: var(--type-caption-family); font-weight: var(--type-caption-weight);
  font-size: var(--type-caption-size-web-desktop); line-height: var(--type-caption-line-height-web-desktop);
  letter-spacing: var(--type-caption-tracking-web-desktop);
}
.chip, .pause-chip {
  font-family: var(--type-chip-family); font-weight: var(--type-chip-weight);
  font-size: var(--type-chip-size-web-desktop); line-height: var(--type-chip-line-height-web-desktop);
  letter-spacing: var(--type-chip-tracking-web-desktop);
}
.btn {
  font-family: var(--type-action-family); font-weight: var(--type-action-weight);
  font-size: var(--type-action-size-web-desktop); line-height: var(--type-action-line-height-web-desktop);
  letter-spacing: var(--type-action-tracking-web-desktop);
}
.field__control {
  font-family: var(--type-body-family); font-weight: var(--type-body-weight);
  font-size: var(--type-body-size-web-desktop); line-height: var(--type-body-line-height-web-desktop);
  letter-spacing: var(--type-body-tracking-web-desktop);
}
.heading-block__line {
  font-family: var(--type-lead-family); font-weight: var(--type-lead-weight);
  font-size: var(--type-lead-size-web-desktop); line-height: var(--type-lead-line-height-web-desktop);
  letter-spacing: var(--type-lead-tracking-web-desktop);
}
.heading-block__headline--1 {
  font-family: var(--type-display-1-family); font-weight: var(--type-display-1-weight);
  font-size: var(--type-display-1-size-web-desktop); line-height: var(--type-display-1-line-height-web-desktop);
  letter-spacing: var(--type-display-1-tracking-web-desktop);
}
.heading-block__headline--2 {
  font-family: var(--type-display-2-family); font-weight: var(--type-display-2-weight);
  font-size: var(--type-display-2-size-web-desktop); line-height: var(--type-display-2-line-height-web-desktop);
  letter-spacing: var(--type-display-2-tracking-web-desktop);
}
.heading-block__headline--3 {
  font-family: var(--type-display-3-family); font-weight: var(--type-display-3-weight);
  font-size: var(--type-display-3-size-web-desktop); line-height: var(--type-display-3-line-height-web-desktop);
  letter-spacing: var(--type-display-3-tracking-web-desktop);
}

/* 2. Panel shell, well, card ----------------------------------------------------------------------------------- */
/* L3 panel: white on both grounds, radius 14 (12 phone), lifted at height 1. DEC 79: one edge cue per surface, so the panel keeps its
   shadow and its 1 px border is transparent (it keeps its place, so nothing moves). Elevation only where something sits above. */
.panel {
  position: relative; z-index: var(--z-panel);
  background: var(--color-surface-panel); color: var(--color-text-primary);
  border: var(--p-border-width-hairline) solid transparent;
  border-radius: var(--p-radius-panel);
  padding: var(--space-panel-pad);
  box-shadow: var(--elevation-paper);
}
.panel--raised { z-index: var(--z-panel-current); box-shadow: var(--shadow-raised); }        /* P2: the current step panel */
.panel--overlay { z-index: var(--z-overlay); box-shadow: var(--shadow-overlay); }             /* P4: the pop-up panel */
.panel--hover {
  transition: box-shadow var(--p-duration-short) var(--p-easing-out), transform var(--p-duration-short) var(--p-easing-out);
}
.panel--hover:hover, .panel--hover.is-hover {
  box-shadow: var(--shadow-raised);
  transform: translateY(calc(var(--p-distance-hover) * -1));
}
.panel__title + * { margin-block-start: var(--p-space-3); }
.is-inactive { opacity: var(--opacity-inactive-light); }                                      /* passed or not-yet-current */

/* L1 well: recessed area; panels sit on a 12 px sub-grid inside it. */
.well {
  position: relative; z-index: var(--z-well);
  background: var(--color-surface-well); color: var(--color-text-primary);
  border-radius: var(--p-radius-well);
  padding: var(--space-well-inset);
}
.well--stack { display: grid; gap: var(--space-bento-gap); }
/* L4 inner card: raised fill, radius 8, no border, no shadow. */
.card {
  background: var(--color-surface-raised); color: var(--color-text-primary);
  border-radius: var(--p-radius-inner);
  padding: var(--p-space-3);
}

/* 3. Chip ------------------------------------------------------------------------------------------------------ */
/* Every chip carries data-chip. 28 high, 0 12 padding, pill, 13 / 500, at most 220 x 36. Plain = opaque white over flat. */
.chip {
  position: relative; z-index: var(--z-chip);
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-block-size: var(--c-chip-height); max-block-size: var(--c-chip-max-height); max-inline-size: var(--c-chip-max-width);
  padding: var(--p-space-1) var(--c-chip-pad-x);
  border-radius: var(--p-radius-pill);
  border: var(--p-border-width-hairline) solid var(--color-chip-border);
  background: var(--color-surface-panel); color: var(--color-text-primary);
  box-shadow: none;   /* DEC 79: a chip on a flat ground is flat; its 1 px edge is its one edge cue (no border and shadow together) */
  transition: box-shadow var(--p-duration-micro) var(--p-easing-out);
}
.chip--glass {                                     /* over imagery only: 12 px backdrop blur, nothing else may blur */
  background: var(--color-chip-glass);
  backdrop-filter: var(--blur-chip); -webkit-backdrop-filter: var(--blur-chip);
}
.chip--blue { background: var(--color-source-fill); }          /* blue-100, near-black text (light only) */
.chip--accent { background: var(--color-accent); color: var(--p-color-neutral-900); }   /* ring blue, near-black text (light only) */
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-chip-gap); }

/* 4. Step row, trace line -------------------------------------------------------------------------------------- */
.step-row {
  display: flex; align-items: center; gap: var(--p-space-3);
  min-block-size: calc(var(--p-space-6) + var(--p-space-2));
  padding: var(--p-space-2) var(--p-space-3);
  border-radius: var(--p-radius-inner);
  color: var(--color-text-primary);
}
.step-row__name { flex: none; min-inline-size: var(--p-space-8); }
.step-row__trace { flex: 1 1 auto; min-inline-size: 0; color: var(--color-text-secondary); }
/* 8 px square marker: outline = not started, filled = the step is current or finished. Words always sit beside it. */
.marker {
  flex: none; display: block;
  inline-size: var(--p-space-2); block-size: var(--p-space-2);
  border: var(--p-border-width-hairline) solid var(--color-line-ui);
  background: transparent;
}
.step-row--idle { opacity: var(--opacity-inactive-light); }
.step-row--active { background: var(--color-surface-raised); }
.step-row--active .marker { background: var(--color-text-primary); border-color: var(--color-text-primary); }
.step-row--done { opacity: var(--opacity-inactive-light); }
.step-row--done .marker { background: var(--color-text-secondary); border-color: var(--color-text-secondary); }
.marker--sealed { background: transparent; border-color: var(--color-line-ui); }
.trace-line { color: var(--color-text-secondary); }
.trace-list { display: grid; gap: var(--p-space-1); }

/* 5. Thread and source line ------------------------------------------------------------------------------------ */
/* The thread: a plain 1.5 px ring-blue line, right angles only, no arrowhead, no end dot, no blend. */
.thread { display: block; flex: 1 1 auto; inline-size: auto; block-size: 0; border: 0 solid var(--color-accent); border-block-start-width: var(--p-border-width-line); }
.thread--vertical { flex: none; inline-size: 0; block-size: var(--p-space-7); border-block-start-width: 0; border-inline-start-width: var(--p-border-width-line); }
.thread--elbow { flex: none; inline-size: var(--p-space-8); block-size: var(--p-space-6); border-block-start-width: 0; border-inline-start-width: var(--p-border-width-line); border-block-end-width: var(--p-border-width-line); }
.thread-row { display: flex; align-items: center; gap: var(--p-space-3); }
/* A source line is a document line: cited = blue-100, being read = blue-200, settled = white with a 1.5 px blue edge. */
.source-line {
  display: flex; align-items: baseline; gap: var(--p-space-3);
  padding: var(--p-space-1) var(--p-space-2);
  border: var(--p-border-width-line) solid transparent;
  border-radius: var(--p-radius-doc);
  background: var(--color-source-fill); color: var(--color-text-primary);
  font-family: var(--type-document-line-family); font-weight: var(--type-document-line-weight);
  font-size: var(--type-document-line-size-web-desktop); line-height: var(--type-document-line-line-height-web-desktop);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--p-duration-medium) var(--p-easing-in-out);
}
.source-line .doc__no { color: var(--color-text-secondary); }
.source-line--reading { background: var(--color-reading-fill); }
.source-line--settled { background: var(--color-surface-sheet); border-color: var(--color-accent); }

/* 6. Sign-off panel -------------------------------------------------------------------------------------------- */
/* Waiting: person fill (blue-100 on light, blue-900 on dark). Signed: white, tick.
   DEC 79: the 2 px ring-blue rail on the rounded edge is gone (a status rail on a card is a kit idiom); the person is marked by the
   person's square before the state words, the same mark as the person's stop on a route. */
.signoff {
  display: grid; gap: var(--p-space-2); align-content: start;
}
.signoff--waiting .signoff__head::before {
  content: ""; flex: none; inline-size: var(--size-mark); block-size: var(--size-mark); background: var(--color-text-primary);
}
.signoff--waiting { background: var(--color-person-fill); }
.signoff__head { display: flex; align-items: center; gap: var(--p-space-2); }
.signoff__role { color: var(--color-text-secondary); }
.tick { flex: none; inline-size: var(--p-space-4); block-size: var(--p-space-4); color: var(--color-accent); }

/* 7. Request record -------------------------------------------------------------------------------------------- */
/* A statement, not a chat: no bubble tail, no caret, no avatar, no send control. */
.request-record { display: grid; gap: var(--p-space-2); }
.request-record__ask { display: flex; align-items: flex-start; gap: var(--p-space-2); color: var(--color-text-secondary); }
.request-record__answer { color: var(--color-text-primary); }
.request-record__state { display: flex; align-items: center; gap: var(--p-space-2); color: var(--color-text-secondary); }

/* 8. Document page --------------------------------------------------------------------------------------------- */
/* A page: title in the serif at 15, lines in the sans at 13, tabular. A document is always light.
   DEC 79: shape by role, paper is a cut sheet (radius 2) lifted at height 1, with no drawn border. */
.doc {
  background: var(--color-surface-sheet); color: var(--color-text-primary);
  border-radius: var(--radius-paper);
  padding: var(--p-space-5);
  box-shadow: var(--elevation-paper);
  display: grid; gap: var(--p-space-3); align-content: start;
}
.doc__letterhead { color: var(--color-text-secondary); }
.doc__title { color: var(--color-text-primary); }
.doc__lines { display: grid; }
.doc__line {
  display: grid; grid-template-columns: var(--p-space-6) minmax(0, 1fr) auto; gap: var(--p-space-3); align-items: baseline;
  padding: var(--p-space-2) var(--p-space-2);
  border-block-end: var(--p-border-width-hairline) solid var(--color-line-hairline);
}
.doc__line--plain { grid-template-columns: minmax(0, 1fr) auto; }
.doc__no { color: var(--color-text-tertiary); }
.doc__figure { text-align: end; }
.doc__line--total { border-block-end: 0; }
.doc__lines > .source-line { grid-template-columns: var(--p-space-6) minmax(0, 1fr) auto; display: grid; align-items: baseline; margin-block: var(--p-space-1); }
.doc__lines > .source-line--plain { grid-template-columns: minmax(0, 1fr) auto; }
.system-panel__line--state { display: flex; align-items: center; gap: var(--p-space-2); }

/* 9. System panel, key row, access-record row ------------------------------------------------------------------ */
.system-panel { display: grid; gap: var(--p-space-3); align-content: start; }
.system-panel__head { display: flex; align-items: center; gap: var(--p-space-2); }
.system-panel__line { color: var(--color-text-secondary); }
.system-rows { display: grid; gap: var(--p-space-1); }
.system-row { display: flex; align-items: center; gap: var(--p-space-3); padding: var(--p-space-2) var(--p-space-3); border-radius: var(--p-radius-inner); background: var(--color-surface-raised); color: var(--color-text-primary); }
.system-row__state { margin-inline-start: auto; color: var(--color-text-secondary); }
.system-row--sealed { background: transparent; border: var(--p-border-width-hairline) solid var(--color-line-ui); }
.key-rows { display: grid; gap: var(--p-space-1); }
.key-row { display: flex; align-items: center; gap: var(--p-space-3); min-block-size: calc(var(--p-space-6) + var(--p-space-2)); padding: var(--p-space-2) var(--p-space-3); border-radius: var(--p-radius-inner); background: var(--color-surface-raised); color: var(--color-text-primary); }
.key-row__detail { color: var(--color-text-secondary); }
.key-row--sealed { background: transparent; border: var(--p-border-width-hairline) solid var(--color-line-ui); }
.record-list { display: grid; }
.record-row {
  display: grid; grid-template-columns: var(--p-space-8) minmax(0, 1fr); gap: var(--p-space-3); align-items: baseline;
  padding: var(--p-space-2) var(--p-space-2);
  border-block-end: var(--p-border-width-hairline) solid var(--color-line-hairline);
  color: var(--color-text-primary);
}
.record-row__time { color: var(--color-text-tertiary); }
.record-row:last-child { border-block-end: 0; }

/* 10. Mark cell ------------------------------------------------------------------------------------------------ */
/* 120 x 120, one 40 px mark in the one ink, no card, no hairline. Active: blue-100 fill and a 2 px ring-blue edge. Light band only. */
.mark-cell {
  display: flex; align-items: center; justify-content: center;
  inline-size: calc(var(--p-space-9) + var(--p-space-5)); block-size: calc(var(--p-space-9) + var(--p-space-5));
  border: var(--p-border-width-edge) solid transparent;
  border-radius: var(--p-radius-inner);
  color: var(--color-mark-integration);
  transition: background-color var(--p-duration-short) var(--p-easing-in-out);
}
.mark-cell--active { background: var(--color-source-fill); border-color: var(--color-accent); }
.mark { inline-size: calc(var(--p-space-6) + var(--p-space-2)); block-size: calc(var(--p-space-6) + var(--p-space-2)); color: inherit; }
.mark .ko { fill: var(--color-surface-well); stroke: none; }
.mark-cell--active .mark .ko { fill: var(--color-source-fill); }
.mark .sep { stroke: var(--color-surface-well); stroke-width: 1; }
.mark-cell--active .mark .sep { stroke: var(--color-source-fill); }
.mark-cell--on-panel .mark .ko { fill: var(--color-surface-panel); }
.mark-grid { display: grid; grid-template-columns: repeat(5, calc(var(--p-space-9) + var(--p-space-5))); justify-content: space-between; row-gap: 0; }

/* 11. Pause chip, fiction caption ------------------------------------------------------------------------------ */
/* 72 x 32; "Pause" / "Play" by aria-pressed. Opaque white over the flat ground; sits outside the well. */
.pause-chip {
  position: relative; z-index: var(--z-pause);
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: calc(var(--p-space-8) + var(--p-space-2)); block-size: var(--p-space-6); max-block-size: var(--c-chip-max-height);
  padding: 0;
  border-radius: var(--p-radius-pill);
  border: var(--p-border-width-hairline) solid var(--color-chip-border);
  background: var(--color-surface-panel); color: var(--color-text-primary);
  box-shadow: var(--shadow-chip);
  transition: transform var(--p-duration-micro) var(--p-easing-out);
}
.pause-chip:active { transform: translateY(var(--p-distance-press)); }
.pause-chip[aria-pressed="true"] { background: var(--color-surface-raised); }
/* Once per screen that shows the example job, directly under its well. */
.fiction-caption { color: var(--color-text-tertiary); }

/* 12. Glyph ---------------------------------------------------------------------------------------------------- */
/* Six in-panel glyphs on a 16 px grid, 1.5 px stroke, never filled, never blue; text or text-2 colour. */
.glyph {
  inline-size: var(--p-space-4); block-size: var(--p-space-4);
  fill: none; stroke: currentColor; stroke-width: var(--p-border-width-line); stroke-linecap: round; stroke-linejoin: round;
  color: var(--color-text-secondary);
}

/* 13. Actions and text link ------------------------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--p-space-2);
  min-block-size: var(--p-space-7);
  padding: var(--p-space-3) var(--p-space-5);
  border-radius: var(--c-button-radius);
  border: var(--p-border-width-hairline) solid transparent;
  text-decoration: none; text-align: center;
  transition: transform var(--p-duration-short) var(--p-easing-out), background-color var(--p-duration-micro) var(--p-easing-out);   /* no box-shadow transition: a mid-transition shadow is not one of the five recipes */
}
.btn--primary { background: var(--color-action-primary-bg); color: var(--color-action-primary-text); }
.btn--secondary { background: var(--color-action-secondary-bg); color: var(--color-text-primary); border-color: var(--color-action-secondary-line); }
.btn:hover, .btn.is-hover { transform: translateY(calc(var(--p-distance-hover) * -1)); box-shadow: var(--shadow-raised); }
.btn--primary:hover, .btn--primary.is-hover { background: var(--color-text-secondary); }
.btn:active, .btn.is-active { transform: translateY(var(--p-distance-press)); box-shadow: none; }
.btn:focus-visible, .btn.is-focus { transform: none; }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--color-surface-well); color: var(--color-text-tertiary); border-color: transparent;
  box-shadow: none; transform: none; cursor: not-allowed;
}
/* A text link is underlined (never colour alone), blue text role, no arrow. */
.text-link {
  color: var(--color-accent-text);
  text-decoration: underline; text-decoration-thickness: var(--p-border-width-hairline); text-underline-offset: var(--p-distance-hover);
}
.text-link:hover, .text-link.is-hover { text-decoration-thickness: var(--p-border-width-focus); }

/* 14. Nav, footer ---------------------------------------------------------------------------------------------- */
/* Opaque, the ground of the section under it, no blur. The 1 px hairline shows once the page has scrolled 8 px. */
.nav {
  position: sticky; inset-block-start: 0; z-index: var(--z-nav);
  background: var(--color-surface-page); color: var(--color-text-primary);
  border-block-end: var(--p-border-width-hairline) solid transparent;
  opacity: var(--opacity-nav);
}
.nav--scrolled { border-block-end-color: var(--color-line-hairline); }
.nav__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--p-space-3) var(--p-space-5);
  max-inline-size: var(--grid-content-max); margin-inline: var(--grid-margin);
  min-block-size: calc(var(--p-space-8) + var(--p-space-2)); padding-block: var(--p-space-3);
}
.nav__lockup { display: inline-flex; align-items: center; gap: var(--p-space-3); text-decoration: none; color: var(--color-text-primary); }
.nav__lockup svg { block-size: var(--p-space-6); inline-size: auto; }
.nav__links { display: flex; align-items: center; gap: var(--p-space-5); }
.nav__link, .footer__link { color: var(--color-text-primary); text-decoration: none; }
.nav__link:hover, .nav__link.is-hover, .footer__link:hover, .footer__link.is-hover { text-decoration: underline; text-decoration-thickness: var(--p-border-width-hairline); text-underline-offset: var(--p-distance-hover); }
.footer { background: var(--color-surface-page); color: var(--color-text-primary); padding-block: var(--p-space-8); }
.footer__inner {
  display: grid; gap: var(--p-space-6); align-items: start;
  max-inline-size: var(--grid-content-max); margin-inline: var(--grid-margin);
}
.footer__lockup { display: inline-block; inline-size: var(--p-space-10); }
.footer__lockup svg { inline-size: 100%; block-size: auto; }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--p-space-3) var(--p-space-5); }

/* 15. Text field, textarea, select ----------------------------------------------------------------------------- */
.form-card { background: var(--color-surface-panel); color: var(--color-text-primary); border: var(--p-border-width-hairline) solid var(--color-panel-border); border-radius: var(--p-radius-panel); padding: var(--space-panel-pad); display: grid; gap: var(--p-space-5); }
.field { display: grid; gap: var(--p-space-2); }
.field__label { color: var(--color-text-primary); }
.field__help { color: var(--color-text-secondary); }
.field__control {
  inline-size: 100%; min-block-size: var(--p-space-7);
  padding: var(--p-space-3) var(--p-space-4);
  background: var(--color-surface-panel); color: var(--color-text-primary);
  border: var(--p-border-width-hairline) solid var(--color-input-border); border-radius: var(--p-radius-input);
  appearance: none; -webkit-appearance: none;
}
.field__control::placeholder { color: var(--color-text-tertiary); opacity: 1; }
textarea.field__control { min-block-size: calc(var(--p-space-9) + var(--p-space-5)); resize: vertical; }
.field__select { position: relative; display: block; }
.field__select .field__control { padding-inline-end: var(--p-space-7); }
.field__chevron { position: absolute; inset-block-start: 50%; inset-inline-end: var(--p-space-4); transform: translateY(-50%); inline-size: var(--p-space-4); block-size: var(--p-space-4); fill: none; stroke: currentColor; stroke-width: var(--p-border-width-line); stroke-linecap: round; stroke-linejoin: round; color: var(--color-text-secondary); pointer-events: none; }
.field__control:focus-visible, .field__control.is-focus { outline: var(--p-border-width-focus) solid var(--color-focus-ring); outline-offset: var(--c-focus-offset); }
.field--error .field__control { border-color: var(--color-error); }
.field__error { color: var(--color-error); }
.field__control[disabled] { background: var(--color-surface-well); color: var(--color-text-tertiary); border-color: var(--color-line-hairline); cursor: not-allowed; }

/* 16. Section heading block ------------------------------------------------------------------------------------ */
.heading-block { display: grid; gap: var(--p-space-4); align-content: start; color: var(--color-text-primary); }
.heading-block__headline { max-inline-size: 100%; text-wrap: balance; }
.heading-block__line { max-inline-size: 45ch; color: var(--color-text-secondary); }
.heading-block__proof { max-inline-size: 45ch; color: var(--color-text-secondary); }
.heading-block__caption { color: var(--color-text-tertiary); }

/* Dark scope. White things carry data-theme="light" in the markup; these rules only set what a dark ground changes.
   11 November 2026 (FIX-NOTES stage 2): the rules are scoped by proximity. They used to be written "[data-theme="dark"] .x", which matched
   any element with a dark ancestor anywhere above it, so a light section inside a dark page (or a light hero on a dark stage) got the
   dark rules (a light primary button became a white pill). Now they apply inside the nearest dark scope only: the scope ends at the
   children of any light-themed element, so a light section's contents are out of it, while an element that itself carries
   data-theme="light" inside a dark screen (a white panel, a document, the white pill) is still in it, as the rules intend. */
@scope ([data-theme="dark"]) to ([data-theme="light"] > *) {
  .panel,
  .doc,
  .chip[data-theme="light"],
  .pause-chip[data-theme="light"],
  .signoff { box-shadow: var(--shadow-on-dark); }
  .panel .chip, .card .chip { box-shadow: var(--shadow-chip); }   /* a chip inside a white panel keeps the chip recipe */
  .panel--hover:hover, .panel--hover.is-hover { box-shadow: var(--shadow-on-dark); }
  .is-inactive { opacity: var(--opacity-inactive-dark); }   /* a whole panel faded on the dark ground; rows inside a white panel keep the light value */
  .btn--primary { background: var(--color-surface-panel); color: var(--color-text-primary); }   /* white pill, near-black label; the button carries data-theme="light" */
  .btn--primary:hover, .btn--primary.is-hover { background: var(--color-surface-well); }
  .btn:hover, .btn.is-hover { box-shadow: var(--shadow-on-dark); }
  .form-card { background: var(--color-surface-chrome); }
  .field__control { background: var(--color-surface-chrome); }
  .field__control[disabled] { background: var(--color-surface-raised); border-color: var(--color-line-hairline); }
  .btn[disabled], .btn[aria-disabled="true"] { background: var(--color-surface-raised); box-shadow: none; }
  .card { background: var(--color-surface-raised); }
}

/* 17. Phone: below 768 px (the same switch as tokens.css). Type, spacing and radius tokens re-point there already. */
@media (max-width: 767px) {
  .panel__title { font-size: var(--type-title-size-web-phone); line-height: var(--type-title-line-height-web-phone); letter-spacing: var(--type-title-tracking-web-phone); }
  .trace-line, .step-row__trace, .key-row__detail, .system-row__name, .system-panel__line, .request-record__ask,
  .signoff__role, .panel-text, .nav__wordmark {
    font-size: var(--type-panel-size-web-phone); line-height: var(--type-panel-line-height-web-phone); letter-spacing: var(--type-panel-tracking-web-phone);
  }
  .step-row__name, .key-row__name, .system-panel__name, .signoff__state, .request-record__answer, .field__label { font-size: var(--type-panel-strong-size-web-phone); }
  .doc__title { font-size: var(--type-document-title-size-web-phone); }
  .doc__letterhead, .doc__line, .record-row, .source-line { font-size: var(--type-document-line-size-web-phone); }
  .fiction-caption, .caption, .field__help, .field__error, .nav__link, .footer__link, .heading-block__proof, .heading-block__caption, .text-link--caption { font-size: var(--type-caption-size-web-phone); }
  .chip, .pause-chip { font-size: var(--type-chip-size-web-phone); }
  .btn { font-size: var(--type-action-size-web-phone); }
  .field__control { font-size: var(--type-body-size-web-phone); line-height: var(--type-body-line-height-web-phone); letter-spacing: var(--type-body-tracking-web-phone); }
  .heading-block__line { font-size: var(--type-lead-size-web-phone); line-height: var(--type-lead-line-height-web-phone); letter-spacing: var(--type-lead-tracking-web-phone); }
  .heading-block__headline--1 { font-size: var(--type-display-1-size-web-phone); line-height: var(--type-display-1-line-height-web-phone); letter-spacing: var(--type-display-1-tracking-web-phone); }
  .heading-block__headline--2 { font-size: var(--type-display-2-size-web-phone); line-height: var(--type-display-2-line-height-web-phone); letter-spacing: var(--type-display-2-tracking-web-phone); }
  .heading-block__headline--3 { font-size: var(--type-display-3-size-web-phone); line-height: var(--type-display-3-line-height-web-phone); letter-spacing: var(--type-display-3-tracking-web-phone); }
  /* Mark grid on phone: 3 + 3 + 4 cells, 96 high, in a 12-part row so the cells share the well's width. */
  .mark-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); justify-content: stretch; }
  .mark-grid > .mark-cell { inline-size: auto; block-size: var(--p-space-9); grid-column: span 4; }
  .mark-grid > .mark-cell:nth-child(n+7) { grid-column: span 3; }
  .nav__links { order: 3; inline-size: 100%; justify-content: space-between; gap: var(--p-space-3); }
  .doc { padding: var(--p-space-4); }
}

/* 18. The deepened language (DEC 79; DESIGN-LANGUAGE-AUDIT.md section 4) ------------------------------------------------------------- */
/* Each rule names the principle it rests on. Values are the language tokens (tokens/DIFF-additions section I). */
/* Type system: optical sizes on; real small capitals for labels; tabular lining figures where figures line up. */
:where(body) { font-optical-sizing: auto; font-kerning: normal; }
.smallcaps, .tag, .verdict__word, .region__name {
  font-family: var(--type-smallcaps-family); font-size: var(--type-smallcaps-size); line-height: var(--type-leading-0);
  font-weight: var(--type-smallcaps-weight); letter-spacing: var(--type-smallcaps-tracking);
  font-feature-settings: var(--type-smallcaps-features); text-transform: none;
}
.figures { font-feature-settings: var(--type-figures-tabular); }
.figures-text { font-feature-settings: var(--type-figures-oldstyle); }
/* A tag is the value a goal carries: small capitals in the route's blue text role. Not a pill (affordance). */
.tag { color: var(--color-accent-text); }
/* A region: no box. A 1.5 px ink rule on top and its name in small capitals (common region by a rule). Optional flat tint, no edge. */
.region { position: relative; border-block-start: var(--line-structure) solid var(--color-line-structure); border-radius: var(--radius-region); padding-block-start: var(--p-space-2); }
.region--tint { background: var(--color-region-tint); }
.region__name { color: var(--color-text-primary); }
/* A verdict: a mark, then the word. The mark reads before the word (pre-attentive form). Build is ring blue; the rest are ink. */
.verdict { display: inline-flex; align-items: center; gap: var(--p-space-2); color: var(--color-text-primary); white-space: nowrap; }
.vmark { inline-size: var(--size-mark); block-size: var(--size-mark); flex: none; overflow: visible; }
.vmark--build { fill: var(--color-route); }
.vmark--have { fill: var(--color-text-primary); }
.vmark--fix { fill: var(--color-text-primary); }
.vmark__ring { fill: none; stroke: var(--color-text-primary); stroke-width: var(--line-structure); }
/* A person's stop: an ink square and the name in the serif. A stop, not a button (no pill). */
.person-stop { display: inline-flex; align-items: center; gap: var(--p-space-2); color: var(--color-text-primary);
  font-family: var(--type-title-family); font-size: var(--type-step-0); line-height: var(--type-leading-0); }
.person-stop__sq { inline-size: calc(var(--size-mark) + var(--p-space-1) / 2); block-size: calc(var(--size-mark) + var(--p-space-1) / 2); background: var(--color-text-primary); flex: none; }
/* A note mark: an ink square set at cap height, like a note figure. Ring blue only while its note is open (colour as information). */
.note-mark { display: inline-block; inline-size: 0.5em; block-size: 0.5em; vertical-align: 0.55em; margin-inline-start: 0.18em; }
.note-mark__sq { display: block; inline-size: calc(var(--size-mark) / 2); block-size: calc(var(--size-mark) / 2); background: var(--color-text-tertiary); }
.note-mark.is-open .note-mark__sq { background: var(--color-accent); }
/* A route: 3 px ring blue, round joins; a station is the Build mark (a ring-blue square, ringed by the ground so it sits on the line), the person an ink square. */
.route { display: block; overflow: visible; }
.route__line { fill: none; stroke: var(--color-route); stroke-width: var(--line-route); stroke-linecap: round; stroke-linejoin: round; }
.route__station { fill: var(--color-route); stroke: var(--color-surface-page); stroke-width: var(--line-route); paint-order: stroke; }
.route__person { fill: var(--color-text-primary); }
.route-fig { position: relative; block-size: calc(var(--p-space-9) + var(--p-space-6)); }
.route-fig__name { font-family: var(--type-title-family); font-size: var(--type-step-1); line-height: var(--type-leading-1); color: var(--color-text-primary); }
.route-fig__label { position: absolute; inset-block-start: calc(var(--p-space-9) + var(--p-space-2)); transform: translateX(-50%); white-space: nowrap;
  font-size: var(--type-step-minus-1); line-height: var(--type-leading-minus-1); color: var(--color-text-secondary); }
.route-fig__label--person { color: var(--color-text-primary); }
/* Paper at its two heights (elevation only where something sits above): rest, and the page being read. */
.paper-sheet { background: var(--color-paper); color: var(--color-text-primary); border-radius: var(--radius-paper); box-shadow: var(--elevation-paper); }
.paper-sheet--read { box-shadow: var(--elevation-paper-read); }
/* Construction hairline: the faintest line, for rules and axes only. */
.rule-construction { border: 0; border-block-start: var(--line-construction) solid var(--color-line-construction); }