/* =========================================================================
   Coherence University — components
   Every class here exists to serve one of the brief's rules. Where a rule and
   a convenience conflicted, the rule won; those spots are commented.
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.55;
  font-synthesis-weight: none;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:where(p, li, dd, blockquote) a:not(.btn) {
  text-decoration: underline; text-underline-offset: .14em;
  text-decoration-thickness: .08em;
}

h1, h2, h3, h4 {
  margin: 0; font-weight: 700; letter-spacing: -.015em;
  text-wrap: balance;
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 1000;
  padding: 10px 14px; border: 2px solid var(--strip-fg);
  background: var(--strip-bg); color: var(--strip-fg);
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .04em; transform: translateY(calc(-100% - 16px));
}
.skip-link:focus {
  color: var(--strip-fg); text-decoration: none; transform: translateY(0);
}
#content-start:focus { outline: none; }

/* A link sitting INSIDE a sentence cannot be told from the sentence by colour
   alone (WCAG 1.4.1). Every other link in this interface is its own block or
   its own row, so this class marks the ones that are not: the handler's mail
   address, written into prose by models.handler_line. */
.link-inline { text-decoration: underline; text-underline-offset: 2px; }

/* Identifiers — op codes and gate ids — and nothing else. Prose stays on the
   normal type scale, per the brief. */
.code, code, .mono {
  font-family: var(--mono);
  font-size: var(--t-code);
  letter-spacing: var(--track-code);
  font-variant-ligatures: none;
}

.label {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-3);
}

.tnum { font-variant-numeric: tabular-nums; }

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

/* ---------------------------------------------------------------- the strip */
.strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  background: var(--strip-bg); color: var(--strip-fg);
  padding: 10px 20px;
  font-family: var(--mono); font-size: var(--t-code);
  letter-spacing: var(--track-code);
}
.strip a { color: var(--strip-fg); }
.strip__brand { display: flex; align-items: center; gap: 10px; }
.strip__meta { display: flex; gap: 18px; flex-wrap: wrap; color: var(--strip-fg-dim); }
.strip__meta strong { color: var(--strip-fg); font-weight: 500; }
.strip__signout {
  min-height: 40px; margin: -10px 0; padding: 0;
  border: 0; background: none; cursor: pointer;
  color: var(--strip-fg-dim); font-family: var(--mono);
  font-size: var(--t-code); letter-spacing: var(--track-code);
  transition-property: color;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
.strip__link { display: inline-flex; align-items: center; text-decoration: none; margin-right: 14px; }
.strip__signout:hover { color: var(--strip-fg); }
.strip__signout:active { scale: .96; }
.strip__signout:focus-visible { outline-color: var(--strip-fg); }
.strip__live {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--strip-fg); flex: none;
}
.strip__live--rec { background: var(--amber); }

.learner-nav {
  display: flex; align-items: center; gap: 2px; overflow-x: auto;
  padding: 0 20px; border-bottom: 1px solid var(--rule-strong);
  background: var(--bg); scrollbar-width: thin;
}
.learner-nav a {
  flex: none; min-height: 42px; display: inline-flex; align-items: center;
  padding: 0 13px; color: var(--fg-2); font-family: var(--mono);
  font-size: var(--t-label); letter-spacing: var(--track-label);
  text-transform: uppercase; text-decoration: none;
}
.learner-nav a:hover { color: var(--accent); background: var(--accent-wash); }
.learner-nav a[aria-current="page"] {
  color: var(--accent); background: var(--accent-wash);
  box-shadow: inset 0 -2px var(--accent);
}
.learner-nav a:focus-visible { outline-offset: -3px; }

.mark-arcs { display: block; flex: none; }

/* --------------------------------------------------------------- the shell */
.shell {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr) var(--aside);
  align-items: start;
  min-height: calc(100vh - 44px);
}
.shell--wide { grid-template-columns: var(--rail) minmax(0, 1fr); }
.shell--solo { grid-template-columns: minmax(0, 1fr); }
/* A stage with an aside and no rail (the face-to-face room, the track view).
   Column widths live HERE so the phone rule below can reach them — an inline
   grid-template-columns on the template always wins and once left the whole
   room a 15px strip at 375px. Set --aside per template. */
.shell--stage { grid-template-columns: minmax(0, 1fr) var(--aside); }

.rail {
  border-right: 1px solid var(--rule);
  padding: 20px 0 24px;
  position: sticky; top: 0;
  align-self: start;
}
.main { padding: var(--pad) 28px 32px; min-width: 0; }
.aside {
  border-left: 1px solid var(--rule);
  padding: 20px;
  display: flex; flex-direction: column; gap: var(--gap);
}

/* -------------------------------------------------------------- the module
   A bordered panel with corner ticks — the console motif from 1b. Ticks are
   drawn with two pseudo-elements per corner-pair rather than four extra spans,
   so the markup stays semantic. */
.module { position: relative; border: 1px solid var(--rule-strong); padding: 30px 32px 28px; }
.module::before, .module::after {
  content: ''; position: absolute; width: var(--tick); height: var(--tick);
  pointer-events: none;
}
.module::before {
  top: -1px; left: -1px;
  border-top: 2px solid var(--fg); border-left: 2px solid var(--fg);
}
.module::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid var(--fg); border-right: 2px solid var(--fg);
}
.module__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 18px;
}
.module__head .label { color: var(--accent); }
.module__tag {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 600;
  background: var(--fg); color: var(--bg); padding: 3px 8px;
}

/* ------------------------------------------------------------- the dossier */
.dossier__title {
  font-size: var(--t-hero); line-height: 1.1; margin-bottom: 8px;
  text-wrap: balance;
}
.dossier__lede {
  font-size: var(--t-body); line-height: 1.55; color: var(--fg-2);
  max-width: 60ch; margin-bottom: 22px; text-wrap: pretty;
}

/* goal / objective / out of scope / invariants — the fixed contract format */
.contract {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule);
  margin: 0;
}
.contract > div {
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--rule);
}
.contract > div:nth-child(even) {
  padding: 12px 0 12px 14px; border-left: 1px solid var(--rule);
}
.contract > div:nth-last-child(-n+2) { border-bottom: 0; }
.contract dt { margin-bottom: 5px; }
.contract dd { margin: 0; font-size: var(--t-row); line-height: 1.5; }
.contract ul { margin: 0; padding-left: 1.1em; }

.dossier__foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; margin-top: 22px;
}
/* The clearance disclosure sits next to the button that starts the work, so a
   learner cannot begin without having been told a person decides. */
.disclosure {
  font-family: var(--mono); font-size: var(--t-label);
  line-height: 1.6; color: var(--fg-3); text-align: right;
  letter-spacing: .04em; text-transform: uppercase;
}
/* The way back to the learner's home (macros.home_link), on pages that had
   none: course, rehearsal, worked example. */
.home-link { margin: 0 0 14px; }
.home-link a {
  display: inline-flex; align-items: center; min-height: 32px;
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: .04em;
  text-transform: uppercase; color: var(--fg-3); text-decoration: none;
}
.home-link a:hover, .home-link a:focus-visible { color: var(--fg); }
.ops-mode .home-link a { color: var(--ops-fg-2); }
.ops-mode .home-link a:hover { color: var(--ops-fg); }

/* ---------------------------------------------------------- mission command
   The active work is the command deck. The path and belts provide context,
   but status, position and human ownership should be legible before the
   learner reads the dossier itself. */
.mission-shell { grid-template-columns: minmax(0, 1fr) var(--aside); }
.mission-main { max-width: 880px; }
.label.is-returned { color: var(--notyet); }
.command-status {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 12px; border-block: 1px solid var(--rule);
}
.command-status > div { padding: 10px 14px 10px 0; }
.command-status > div + div {
  padding-left: 14px; border-left: 1px solid var(--rule-hair);
}
.command-status .label { display: block; margin-bottom: 3px; }
.command-status__value {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase;
}
.command-status__value.is-returned { color: var(--notyet); }

.mission-dossier {
  box-shadow:
    0 0 0 1px rgba(14, 17, 22, .02),
    0 8px 24px rgba(14, 17, 22, .035);
}

.debrief-signal {
  margin-top: 18px; border-block: 1px solid var(--rule);
  background: var(--bg);
}
.debrief-signal summary,
.transcript-drawer summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 56px; cursor: pointer; list-style: none;
}
.debrief-signal summary::-webkit-details-marker,
.transcript-drawer summary::-webkit-details-marker { display: none; }
.debrief-signal summary > span:first-child,
.transcript-drawer summary > span:first-child {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.debrief-signal summary strong,
.transcript-drawer summary strong {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--t-row);
}
.debrief-signal__verdict {
  flex: none; font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}
.debrief-signal__verdict.is-returned { color: var(--notyet); }
.debrief-signal__body {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px;
  padding: 15px 0 17px; border-top: 1px solid var(--rule-hair);
}
.debrief-signal__body blockquote {
  margin: 0; max-width: 62ch; font-size: 14px; line-height: 1.6;
  text-wrap: pretty;
}
.debrief-signal__body > div {
  display: flex; flex-direction: column; align-items: flex-end;
  justify-content: space-between; gap: 8px; text-align: right;
}

/* --------------------------------------------------------------- the spine
   Lives in the main column on mission control, grouped under phase headings.
   course.html reuses .node inside its lessons rail with only a mark and a
   title — the `.rail .node` overrides below collapse the grid for it. */
.spine { display: flex; flex-direction: column; }
.spine__legend {
  margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: var(--t-label); line-height: 1.7;
  letter-spacing: .04em; color: var(--fg-3);
}
.spine__census {
  padding: 8px 0 10px; border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: .05em; color: var(--fg-3);
}
.spine__phase {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 22px; padding: 0 0 7px;
  border-bottom: 1px solid var(--rule-hair);
}
.spine__phase-num {
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3);
}
.spine__phase-title { font-size: var(--t-row); font-weight: 700; }
.spine__phase-note { font-size: var(--t-micro); color: var(--fg-3); }

.node {
  display: grid;
  grid-template-columns: 12px 74px minmax(0, 1fr) auto;
  align-items: baseline; column-gap: 12px; row-gap: 2px;
  min-height: 44px; padding: 9px 6px 9px 2px; color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rule-hair);
  border-left: 2px solid transparent;
}
.node:hover { background: var(--bg-sunk); text-decoration: none; }
.node > .mark { grid-column: 1; grid-row: 1; align-self: center; }
.node__kind {
  grid-column: 2; grid-row: 1;
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3);
}
.node__title {
  grid-column: 3; grid-row: 1;
  font-size: var(--t-row); font-weight: 600; line-height: 1.35; min-width: 0;
  text-wrap: pretty;
}
.node__note {
  grid-column: 3; grid-row: 2;
  font-size: var(--t-micro); line-height: 1.45; color: var(--fg-2);
}
/* The status slot: always one word from the fixed vocabulary, set as a chip. */
.node__status {
  grid-column: 4; grid-row: 1; justify-self: end; align-self: center;
  padding: 2px 8px 3px; border: 1px solid var(--rule);
  font-family: var(--mono); font-size: var(--t-label); line-height: 1.4;
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  color: var(--fg-2);
}
.node__sub {
  grid-column: 4; grid-row: 2; justify-self: end; text-align: right;
  font-family: var(--mono); font-size: var(--t-label); color: var(--fg-3);
  white-space: nowrap;
}
.node__status--active { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.node__status--awaiting,
.node__status--not_yet { border-color: var(--notyet); color: var(--notyet); }
.node__status--cleared { color: var(--fg-3); }
.node__status--sealed { border-color: var(--rule-hair); color: var(--fg-4); }
.node__status--next { border-style: dashed; border-color: var(--fg-3); color: var(--fg-2); }

.node--active { border-left-color: var(--accent); background: var(--accent-wash); }
.node--active:hover { background: var(--accent-wash); }
.node--notyet { background: var(--notyet-wash); border-left-color: var(--notyet); }
.node--active.node--notyet:hover { background: var(--notyet-wash); }
/* Sealed nodes are dimmed for an internal learner, who is allowed to know the
   ladder continues. They are ABSENT for a contractor — see the templates. */
.node--sealed { color: var(--fg-4); cursor: default; }
.node--sealed .node__kind, .node--sealed .node__note { color: var(--fg-4); }
.node--sealed:hover { background: none; }
.node--sealed.node--next { color: var(--fg-2); }
.node--cleared .node__title { font-weight: 500; }

/* Lessons rail (course.html): a mark and a title only. */
.rail .node {
  grid-template-columns: 10px minmax(0, 1fr);
  column-gap: 10px; padding: 7px 20px; border-bottom: 0;
}
.rail .node .node__title { grid-column: 2; font-weight: 400; }

/* ----------------------------------------------------------- the path head */
.path-head { margin-bottom: 16px; }
.path-head__title { font-size: var(--t-h1, 28px); line-height: 1.2; margin: 0 0 6px; }
.path-head__lede { font-size: var(--t-row); color: var(--fg-2); margin: 0; }

/* ---------------------------------------------------------- the intro strip
   Teaches the page's own structure once; dismissal is remembered per browser
   (localStorage) — see mission_control.html. */
.intro-strip {
  border: 1px solid var(--rule); border-left: 2px solid var(--fg);
  padding: 12px 16px 14px; margin-bottom: 16px; background: var(--bg-sunk);
}
.intro-strip__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 8px;
}
.intro-strip__dismiss {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: .04em; color: var(--fg-3); text-decoration: underline;
}
.intro-strip__dismiss:hover { color: var(--fg); }
.intro-strip__rules { list-style: none; margin: 0; padding: 0; }
.intro-strip__rules li {
  font-size: var(--t-micro); line-height: 1.55; color: var(--fg-2);
  padding: 3px 0;
}
.intro-strip__rules strong { color: var(--fg); }

/* -------------------------------------------------------- the signal strip
   One-line secondary states under the next-move card: work someone else is
   reading, and the always-open case library. */
.signal-strip {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--rule); border-left: 2px solid var(--rule-strong);
  padding: 10px 14px; margin-top: 10px;
}
.signal-strip strong { font-size: var(--t-row); font-weight: 600; }
.signal-strip a { text-decoration: underline; text-underline-offset: .15em; }
.signal-strip__sub {
  font-family: var(--mono); font-size: var(--t-label); color: var(--fg-3);
}

/* --- the eight node marks -------------------------------------------------
   Shape encodes what the node asks of you, so a learner can tell a no-win
   trial from a reading assignment at a glance. Filled = cleared, outline =
   open, faint = sealed, amber = returned. */
.mark { width: 10px; height: 10px; flex: none; border: 1.6px solid currentColor; }
.mark--course      { }                                        /* square */
.mark--op          { border-left-width: 4px; }                /* square, spined */
.mark--gate        { transform: rotate(45deg); }              /* diamond */
.mark--capstone    { transform: rotate(45deg); border-width: 2.6px; }
.mark--case-reading{ border-radius: 50%; }                    /* circle */
.mark--track-coverage {
  border-radius: 50%; position: relative; border-style: dotted;   /* a field */
}
.mark--trial {
  border: 0; width: 11px; height: 10px;                        /* triangle */
  background: currentColor;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.mark--attestation {
  height: 0; border: 0; border-bottom: 3px solid currentColor;  /* signature */
  width: 12px;
}
.is-cleared .mark, .mark.is-cleared { background: currentColor; }
.mark--trial.is-cleared { background: currentColor; }
.mark--attestation.is-cleared { border-bottom-width: 5px; }
.is-sealed .mark, .mark.is-sealed { opacity: .45; }

/* --------------------------------------------------------- the belt ledger
   NOT a progress meter. The design comp rendered 14 segments captioned
   "5 OF 14 NODES CLEARED — NOT A SCORE"; captioning a progress bar does not
   stop it reading as one, and the brief forbids any bar implying points. This
   renders a census of discrete states instead — no fill ratio exists to read
   as a percentage. */
.belt { border: 1px solid var(--rule); padding: 10px 12px; }
.belt--current { border-color: var(--fg); }
.belt--locked { color: var(--fg-4); }
.belt__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.belt__name { font-size: var(--t-row); font-weight: 700; }
.belt__state { font-family: var(--mono); font-size: var(--t-label); color: var(--accent); }
.belt__ethos { font-size: var(--t-micro); color: var(--fg-2); margin-top: 3px; }
.ledger { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 9px; }
.ledger__census {
  font-family: var(--mono); font-size: var(--t-label);
  color: var(--fg-3); margin-top: 6px; letter-spacing: .06em;
}

/* -------------------------------------------------------------- a verdict
   "Not Yet" is a verdict a person wrote, not an error message: no red, no
   icon, no toast. The evaluator's own words are the largest thing in the
   block after the verdict itself. */
.verdict-hero {
  display: grid; grid-template-columns: 210px minmax(0, 1fr);
  min-height: 270px; margin-bottom: 22px;
  border-block: 1px solid var(--rule-strong);
}
.verdict-hero__signal {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: space-between; padding: 26px 24px 26px 0;
  border-right: 1px solid var(--rule);
}
.verdict__stamp {
  font-family: var(--mono); font-size: 24px; font-weight: 650;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 12px 18px; border: 3px double currentColor;
  transform: rotate(-1.5deg); transform-origin: left center;
}
.verdict--notyet .verdict__stamp { color: var(--notyet); }
.verdict--pass .verdict__stamp { color: var(--accent); }
.verdict-hero__record {
  display: flex; flex-direction: column; justify-content: center;
  padding: 32px 0 32px 36px;
}
.verdict__by {
  margin: 0 0 18px; font-size: var(--t-row); color: var(--fg-2);
  line-height: 1.5;
}
.verdict__by strong { color: var(--fg); }

.debrief {
  margin: 0; max-width: 50ch; padding-left: 20px;
  border-left: 3px solid currentColor;
  font-size: 20px; font-weight: 600; line-height: 1.45; text-wrap: pretty;
}
.verdict--notyet .debrief { border-color: var(--notyet); }
.verdict--pass .debrief { border-color: var(--accent); }

.debrief-page { width: min(920px, 100%); margin-inline: auto; padding-top: 42px; }
.debrief-route { margin-bottom: 22px; }
.next-action {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: end; gap: 28px; padding: 22px 0;
  border-block: 1px solid var(--rule);
}
.next-action h2 { margin: 5px 0 6px; font-size: var(--t-lede); }
.next-action p {
  max-width: 62ch; margin: 0; color: var(--fg-2);
  font-size: var(--t-row); line-height: 1.6; text-wrap: pretty;
}
.action-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.transcript-drawer { margin-top: 24px; border-top: 1px solid var(--rule); }
.transcript-drawer summary { border-bottom: 1px solid var(--rule); }
.transcript-drawer__body { padding: 20px 0; }

.grid-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
}
.grid-2 > * { background: var(--bg); padding: 12px 14px; }

/* ------------------------------------------------------------- a transcript
   The transcript is the artefact an evaluator reads, so it is presented as a
   record rather than a chat: no bubbles with tails, no read receipts. */
.session { display: flex; flex-direction: column; min-height: 0; }
.session__body {
  flex: 1; padding: 22px 28px; display: flex; flex-direction: column;
  gap: 16px; overflow-y: auto;
}
.session__note {
  align-self: center; font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: .12em; color: var(--fg-4); text-transform: uppercase;
}
.turn { max-width: 540px; }
.turn--you { align-self: flex-end; }
.turn__who { margin-bottom: 5px; }
.turn--you .turn__who { text-align: right; color: var(--accent); }
.turn__text {
  border: 1px solid var(--rule-strong); padding: 13px 16px;
  font-size: var(--t-body); line-height: 1.6;
}
.turn--you .turn__text {
  background: var(--accent); color: var(--accent-fg); border-color: var(--accent);
}
.turn--system .turn__text { border-style: dashed; }

.composer {
  border-top: 1px solid var(--rule);
  padding: 16px 28px; display: flex; gap: 12px; align-items: center;
}
.composer input {
  flex: 1; border: 1px solid var(--rule-strong); background: var(--bg);
  color: var(--fg); font-family: var(--sans); font-size: var(--t-body);
  padding: 13px 16px;
}
.composer input::placeholder { color: var(--fg-4); }

/* Scenario workspaces keep the selectable scenarios beside the record on
   desktop and in normal document flow on small screens. The two-column grid
   comes from .shell--stage with --aside set on the template. */
.track-session { min-width: 0; min-height: 65vh; }
.track-setup, .track-close { padding: 22px 28px; border-bottom: 1px solid var(--rule); }
.track-setup h1 { font-size: var(--t-title); margin-top: 8px; }
.track-setup p { max-width: 70ch; }
.track-session .session__body { min-height: 140px; max-height: 55vh; }
.track-close h2 { font-size: var(--t-lede); }
.track-close details form { margin-top: 18px; }
.track-scenarios h2 { margin-bottom: 10px; }
.track-scenarios a {
  display: flex; flex-direction: column; gap: 4px; padding: 12px;
  border: 1px solid var(--rule); margin-top: 8px;
}
.track-scenarios a[aria-current="page"] {
  border-left: 3px solid var(--accent); background: var(--accent-wash);
}
.track-scenarios span { color: var(--fg-2); font-size: var(--t-micro); }
.track-shell .web { width: 100%; max-width: 286px; height: auto; }
.track-session .composer { flex-wrap: wrap; }
.track-session .composer input { min-width: 0; }
.track-session .composer > span { min-width: 160px; }

/* ------------------------------------------------------- live operations room
   Text mode is the product until a real stream exists. It therefore gets the
   same threshold treatment as the video room: dark, contained and explicitly
   on the record, with the transcript—not an empty stage—as the focal point. */
.ops-mode { background: var(--ops-bg); }
.shell.ops-shell {
  grid-template-columns: minmax(0, 1fr) 350px;
  align-items: stretch; min-height: calc(100svh - 44px); background: var(--ops-bg);
}
.ops-console {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  height: calc(100svh - 44px); min-height: 620px; min-width: 0;
  color: var(--ops-fg); background:
    linear-gradient(var(--ops-rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--ops-rule) 1px, transparent 1px),
    var(--ops-bg);
  background-size: 72px 72px;
  background-position: -1px -1px;
}
.ops-console__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 28px; padding: 24px 28px 22px;
  border-bottom: 1px solid var(--ops-rule);
  background: rgba(8, 11, 16, .92);
}
.ops-kicker {
  display: flex; align-items: center; gap: 9px; margin-bottom: 9px;
  color: var(--ops-fg-2); font-family: var(--mono);
  font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase;
}
.ops-title {
  max-width: 760px; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.15;
  color: var(--ops-fg);
}
.ops-telemetry {
  display: grid; grid-template-columns: repeat(3, minmax(76px, auto));
  gap: 1px; margin: 0; flex: none; background: var(--ops-rule);
  border: 1px solid var(--ops-rule);
}
.ops-telemetry > div { min-width: 88px; padding: 9px 11px; background: var(--ops-panel); }
.ops-telemetry dt {
  margin-bottom: 3px; color: var(--ops-fg-3); font-family: var(--mono);
  font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
}
.ops-telemetry dd {
  margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ops-fg); font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: .04em; text-transform: uppercase;
}
.ops-transcript {
  display: flex; flex-direction: column; gap: 18px;
  min-height: 0; padding: 28px; overflow-y: auto;
  scrollbar-color: var(--ops-rule) transparent;
}
.ops-turn { width: min(680px, 82%); align-self: flex-start; }
.ops-turn--you { align-self: flex-end; }
.ops-turn__meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 6px; color: var(--ops-fg-3);
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: .1em; text-transform: uppercase;
}
.ops-turn--you .ops-turn__meta { color: #8FB1DC; }
.ops-turn__text {
  padding: 15px 17px; border: 1px solid var(--ops-rule);
  background: rgba(13, 18, 25, .94); color: var(--ops-fg);
  font-size: 14px; line-height: 1.65; text-wrap: pretty;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
}
.ops-turn--you .ops-turn__text {
  border-color: rgba(127, 166, 214, .42);
  background: rgba(30, 58, 95, .55);
}
.ops-turn--system .ops-turn__text {
  border-style: dashed; color: var(--ops-fg-2); background: rgba(13, 18, 25, .7);
}
/* The composing bubble: an in-flight reply as it is written, before the
   persisted line lands and replaces it. Dashed and dimmer than any record
   line on purpose, so in-flight words never read as part of the record. */
.ops-turn--composing .ops-turn__text {
  border-style: dashed; color: var(--ops-fg-2);
  background: rgba(13, 18, 25, .7); box-shadow: none;
}
.ops-typing { display: inline-flex; gap: 5px; padding: 4px 1px; }
.ops-typing span {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; animation: ops-typing 1.2s infinite;
}
.ops-typing span:nth-child(2) { animation-delay: .15s; }
.ops-typing span:nth-child(3) { animation-delay: .3s; }
/* The voice: a per-browser toggle room.js adds only when an engine is
   attached, and a slow breathing pulse on the console head while a line is
   being spoken — presence without a face, which is the prototype's whole
   question. */
.ops-composer__voice { flex: none; opacity: .75; }
.is-speaking .ops-console__head { animation: ops-speaking 2.4s ease-in-out infinite; }
@keyframes ops-speaking {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
@keyframes ops-typing {
  0%, 60%, 100% { opacity: .25; }
  30% { opacity: 1; }
}
.ops-standby {
  width: min(560px, 90%); margin: auto; padding: 34px 30px;
  border: 1px solid var(--ops-rule); text-align: center;
  background: rgba(13, 18, 25, .86);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .24);
}
.ops-standby .label { color: var(--ops-fg-2); }
.ops-standby p {
  max-width: 50ch; margin: 12px auto 0; color: var(--ops-fg-2);
  font-size: 14px; line-height: 1.65; text-wrap: pretty;
}
.signal-mark {
  display: flex; align-items: end; justify-content: center; gap: 5px;
  height: 28px; margin-bottom: 18px; color: #7FA6D6;
}
.signal-mark span { width: 3px; background: currentColor; }
.signal-mark span:nth-child(1) { height: 10px; }
.signal-mark span:nth-child(2) { height: 24px; }
.signal-mark span:nth-child(3) { height: 16px; }
.ops-composer {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: end; gap: 12px; padding: 15px 28px 18px;
  border-top: 1px solid var(--ops-rule); background: rgba(8, 11, 16, .96);
}
.ops-composer__field { min-width: 0; }
.ops-composer .label { display: block; margin-bottom: 6px; color: var(--ops-fg-3); }
.ops-composer input {
  width: 100%; min-height: 48px; padding: 13px 15px;
  border: 1px solid rgba(244, 247, 250, .24); outline-offset: 2px;
  background: var(--ops-panel-raised); color: var(--ops-fg);
  font-family: var(--sans); font-size: 14px;
}
.ops-composer input::placeholder { color: var(--ops-fg-3); }
.ops-composer input:focus-visible { outline-color: #7FA6D6; }
.ops-composer__send { min-height: 48px; background: #7FA6D6; color: var(--ink); }

.ops-brief {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--bg); color: var(--fg); border-left: 1px solid var(--rule);
}
.ops-brief__section { padding: 22px 24px; }
.ops-brief__section--lead { border-bottom: 1px solid var(--rule); }
.ops-brief__section--lead p {
  margin: 10px 0 0; font-size: 15px; font-weight: 600;
  line-height: 1.55; text-wrap: pretty;
}
.ops-rules { margin: 0; }
.ops-rules > div { padding: 15px 24px; border-bottom: 1px solid var(--rule-hair); }
.ops-rules dt { margin-bottom: 5px; }
.ops-rules dd {
  margin: 0; color: var(--fg-2); font-size: var(--t-row);
  line-height: 1.55; text-wrap: pretty;
}
.ops-brief__section--end { border-top: 1px solid var(--rule); }
.ops-brief__note {
  margin: 7px 0 13px; color: var(--fg-3); font-size: var(--t-micro);
  line-height: 1.55; text-wrap: pretty;
}

/* ---------------------------------------------------------------- controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-fg);
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--track-code); text-transform: uppercase;
  padding: 12px 24px;
  transition-property: scale, filter, background-color, color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
.btn:hover { text-decoration: none; filter: brightness(1.12); }
.btn:active { scale: .96; }
.btn--ghost {
  background: none; color: var(--fg); border: 1.5px solid var(--fg);
}
.btn--grave {
  background: none; color: var(--notyet); border: 1.5px solid var(--notyet);
}
.choice {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border: 1.5px solid var(--fg); padding: 11px 14px;
  font-size: var(--t-row); font-weight: 600; cursor: pointer;
  min-height: 44px; background: none; color: var(--fg); width: 100%; text-align: left;
  font-family: var(--sans);
  transition-property: scale, background-color;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
.choice:hover { background: var(--bg-sunk); }
.choice:active { scale: .96; }
.choice__hint {
  font-family: var(--mono); font-size: var(--t-label); font-weight: 400;
  color: var(--fg-3); text-transform: uppercase;
}
.stack { display: flex; flex-direction: column; gap: 8px; }

/* The session-close drawer: ending a session is deliberately two steps.
   The summary is the first step; the statement + explicit close buttons are
   the second. */
.ops-close summary {
  list-style: none; cursor: pointer; width: 100%;
}
.ops-close summary::-webkit-details-marker { display: none; }
.ops-close[open] summary { margin-bottom: 10px; }
.ops-close textarea {
  width: 100%; min-height: 96px; resize: vertical; padding: 10px 12px;
  border: 1px solid var(--rule-strong); background: var(--bg); color: var(--fg);
  font: inherit; font-size: var(--t-row); line-height: 1.5;
}
.ops-note--error { color: var(--notyet); }
.ops-composer__notice {
  flex-basis: 100%; margin: 6px 0 0;
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: .04em; color: var(--notyet);
}

/* ------------------------------------------------------------- concept web
   An order-free track is a field you enter anywhere, so it is laid out as a
   web with no numbering and no sequence — and no percentage anywhere. */
.web { display: block; width: 100%; height: auto; }
.web text { font-family: var(--sans); font-size: 9.5px; fill: var(--fg); }
.web line { stroke: var(--rule-strong); stroke-width: 1; }
.web .n-touched { fill: var(--accent); }
.web .n-open { fill: none; stroke: var(--fg); stroke-width: 1.4; }
.web .t-open { fill: var(--fg-3); }

.coverage__rule {
  font-family: var(--mono); font-size: var(--t-label); line-height: 1.8;
  color: var(--fg-3); letter-spacing: .04em;
}

/* ------------------------------------------------------------ trial / room
   The gravest treatment in the system: full-bleed, captions only, interface
   out of the way. */
.room { position: relative; background: var(--ink); color: #fff; }
.trial-workspace { --bg: #0E1116; --fg: #FFFFFF; --fg-3: #AAB3BF;
  --accent: #A8C8EF; --accent-fg: #0E1116; --rule: #57616F; --rule-strong: #778393; }
.trial-record { max-width: 860px; margin: 0 auto; padding: 28px 24px; }
.trial-record h2 { font-size: var(--t-lede); }
.trial-transcript { max-height: 50vh; overflow-y: auto; margin: 20px 0; }
.trial-transcript article { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.trial-transcript p { white-space: pre-wrap; overflow-wrap: anywhere; }
.trial-submit { margin-top: 24px; }
.trial-record textarea, .track-close textarea {
  background: var(--bg); color: var(--fg); border: 1px solid var(--rule-strong);
  padding: 12px; resize: vertical; font: inherit;
}
.trial-workspace .room__stage { min-height: 40vh; }
.trial-workspace--text .room__stage { min-height: 0; display: flex; flex-direction: column; }
.trial-workspace--text .room__top { position: static; order: -1; }
.room__stage { position: relative; min-height: 62vh; background: #000; }
.room__stage video, .room__stage img,
.room__stage canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.room__empty {
  /* Column, because the two lines are separate flex items. As a row, the `<br>`
     between them was itself a flex item and had no effect, so the video screens
     read "NO COUNTERPART STREAM ATTACHEDthe avatar runtime is not wired up yet"
     on one line. A `<br>` never separates flex items. */
  position: absolute; inset: 0; display: flex; flex-direction: column;
  z-index: 1;
  align-items: center; gap: 7px;
  justify-content: center; text-align: center; padding: 24px;
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em;
  color: rgba(255, 255, 255, .72); text-transform: uppercase;
}
.room__top, .room__bottom {
  position: absolute; left: 0; right: 0; pointer-events: none; padding: 16px 24px;
  /* Above the WebGL canvas, which is appended after these in the DOM and
     otherwise paints its (black, until the model loads) frame over them. */
  z-index: 1;
}
.trial-workspace--text .room__empty { position: static; padding: 20px 24px; }
.room__top {
  top: 0; display: flex; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  background: linear-gradient(rgba(14, 17, 22, .78), rgba(14, 17, 22, 0));
}
.room__bottom {
  bottom: 0; padding: 80px 24px 18px;
  background: linear-gradient(rgba(14, 17, 22, 0), rgba(14, 17, 22, .62) 45%,
                              rgba(14, 17, 22, .8));
}
.room__caption { max-width: 720px; margin: 0 auto; text-align: center; }
.room__line { font-size: 19px; line-height: 1.5; font-weight: 500; text-wrap: pretty; }
.room__bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 24px; border-top: 1px solid rgba(255, 255, 255, .14);
}
.room .label, .room__top .label { color: rgba(255, 255, 255, .7); }
.dimensions {
  display: flex; gap: 20px; flex-wrap: wrap;
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: .1em; color: rgba(255, 255, 255, .55);
}
.meter { display: flex; align-items: end; gap: 2px; height: 18px; flex: none; }
.meter span { width: 3px; background: currentColor; }

/* The no-win disclosure. Stated before entry, never after. */
.nowin {
  font-size: 22px; font-weight: 700; line-height: 1.35;
  max-width: 56ch; margin-bottom: 18px; text-wrap: pretty;
}

/* ---------------------------------------------------------------- fragments */
.callout {
  border: 1px solid var(--rule-strong); padding: 13px 15px;
  font-size: var(--t-row); line-height: 1.6; color: var(--fg-2);
}
.quote {
  border-left: 3px solid var(--fg); padding: 4px 0 4px 18px; margin: 0 0 10px;
}
.quote__text { font-size: 14.5px; line-height: 1.6; font-style: italic; }
.prose { max-width: 68ch; }
.prose p { margin: 0 0 1em; }
.prose h3 { font-size: var(--t-lede); margin: 1.6em 0 .5em; }
.draft {
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: .1em;
  text-transform: uppercase; color: var(--notyet);
  border: 1px solid var(--notyet); padding: 2px 6px; display: inline-block;
}
.sep { border: 0; border-top: 1px solid var(--rule); margin: var(--gap) 0; }
.push { margin-top: auto; }

/* --------------------------------------------------------- evaluator workstation
   The evaluator is not completing a form; they are reading a closed artefact
   and exercising named authority. Queue, evidence and decision therefore stay
   spatially distinct, with the machine read physically quarantined. */
.eval-mode { overflow: hidden; background: var(--bg-sunk); }
.eval-workstation {
  display: grid;
  grid-template-columns: 292px minmax(430px, 1fr) minmax(360px, 410px);
  height: calc(100svh - 44px); min-height: 0;
  background: var(--bg-sunk);
}
.eval-workstation .label { color: var(--fg-2); }

.eval-queue {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  color: var(--ops-fg); background: var(--ops-bg);
  border-right: 1px solid var(--ops-rule);
}
.eval-queue__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; min-height: 118px; padding: 24px 20px 18px;
  border-bottom: 1px solid var(--ops-rule);
  background:
    linear-gradient(135deg, rgba(127, 166, 214, .09), transparent 60%),
    var(--ops-bg);
}
.eval-queue .label { color: var(--ops-fg-2); }
.eval-queue__head h1 {
  margin-top: 4px; color: var(--ops-fg); font-size: 21px;
  letter-spacing: -.02em; text-transform: none;
}
.eval-queue__count {
  color: rgba(127, 166, 214, .72); font-family: var(--mono);
  font-size: 31px; line-height: 1;
}
.eval-queue__list {
  flex: 1; min-height: 0; overflow-y: auto;
  scrollbar-color: var(--ops-rule) transparent;
}
.eval-queue__item {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center; gap: 10px; min-height: 76px; padding: 12px 14px;
  border-bottom: 1px solid var(--ops-rule); color: var(--ops-fg-2);
  text-decoration: none;
  transition-property: background-color, color, box-shadow;
  transition-duration: 160ms; transition-timing-function: ease-out;
}
.eval-queue__item:hover {
  color: var(--ops-fg); text-decoration: none;
  background: rgba(244, 247, 250, .045);
}
.eval-queue__item.is-current {
  color: var(--ops-fg); background: var(--ops-panel-raised);
  box-shadow: inset 3px 0 0 #7FA6D6;
}
.eval-queue__item:focus-visible { outline-color: #AFC9E8; outline-offset: -3px; }
.eval-queue__index {
  color: var(--ops-fg-3); font-family: var(--mono); font-size: var(--t-code);
}
.eval-queue__identity { min-width: 0; }
.eval-queue__identity strong,
.eval-queue__identity span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eval-queue__identity strong { color: inherit; font-size: 12px; }
.eval-queue__identity span {
  margin-top: 3px; color: var(--ops-fg-2); font-family: var(--mono);
  font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
}
.eval-queue__wait {
  color: #AFC9E8; font-family: var(--mono); font-size: 8.5px;
  letter-spacing: .04em; text-align: right; text-transform: uppercase;
}
.eval-queue__wait small { display: block; margin-top: 4px; color: var(--ops-fg-3); font-size: 8px; }
.eval-queue__foot {
  padding: 15px 20px 17px; border-top: 1px solid var(--ops-rule);
  color: var(--ops-fg-2); font-family: var(--mono); font-size: 9px;
  line-height: 1.7; letter-spacing: .03em;
}
.eval-queue__foot .label { display: block; margin-bottom: 4px; }
.eval-queue__foot kbd { color: var(--ops-fg); }
.eval-queue__empty {
  display: flex; flex: 1; flex-direction: column; align-items: center;
  justify-content: center; padding: 30px; text-align: center;
}
.eval-queue__zero {
  color: var(--ops-fg-3); font-family: var(--mono); font-size: 72px; font-weight: 700;
}
.eval-queue__empty p { max-width: 22ch; color: var(--ops-fg-2); text-wrap: pretty; }

.eval-record {
  min-width: 0; overflow-y: auto; padding: 28px 34px 70px;
  background:
    linear-gradient(var(--rule-hair) 1px, transparent 1px),
    var(--bg);
  background-size: 100% 58px;
  scrollbar-color: var(--rule) transparent;
}
.eval-notice {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px;
  margin: -4px 0 24px; padding: 12px 14px;
  border: 1px solid var(--accent); background: var(--accent-wash);
}
.eval-notice strong { font-size: var(--t-row); }
.eval-record__head { padding: 24px 0 27px; border-bottom: 1px solid var(--rule-strong); }
.eval-record__eyebrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin-bottom: 14px;
}
.eval-record__priority {
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
}
.eval-record__head h1 {
  max-width: 760px; font-size: clamp(28px, 3vw, 44px); line-height: 1.08;
}
.eval-record__head p {
  margin: 11px 0 0; color: var(--fg-2); font-size: var(--t-row);
}
.eval-ledger {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0; border-bottom: 1px solid var(--rule-strong);
}
.eval-ledger > div { min-width: 0; padding: 13px 12px 13px 0; }
.eval-ledger > div + div { padding-left: 12px; border-left: 1px solid var(--rule); }
.eval-ledger dt {
  margin-bottom: 4px; color: var(--fg-3); font-family: var(--mono);
  font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
}
.eval-ledger dd {
  margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--t-row); font-weight: 600;
}
.eval-transcript { padding-top: 30px; }
.eval-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; margin-bottom: 18px;
}
.eval-section-head h2 { margin-top: 3px; font-size: 20px; }
.eval-section-head > .code { color: var(--fg-3); }
.eval-transcript__lines { margin: 0; padding: 0; list-style: none; }
.eval-line {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px;
  padding: 0 0 18px;
}
.eval-line__number {
  padding-top: 10px; color: var(--fg-4); font-family: var(--mono);
  font-size: var(--t-code); text-align: right;
}
.eval-line article {
  max-width: 760px; background: var(--bg);
  box-shadow:
    0 0 0 1px var(--rule),
    0 1px 2px rgba(14, 17, 22, .04),
    0 8px 24px rgba(14, 17, 22, .025);
}
.eval-line--you article { margin-left: clamp(0px, 5vw, 54px); box-shadow: 0 0 0 1px rgba(30, 58, 95, .35); }
.eval-line--system article { box-shadow: 0 0 0 1px var(--rule-hair); background: var(--bg-sunk); }
.eval-line article header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 8px 12px; border-bottom: 1px solid var(--rule-hair);
  color: var(--fg-3); font-family: var(--mono); font-size: 9px;
  letter-spacing: .09em; text-transform: uppercase;
}
.eval-line article header strong { color: var(--fg-2); font-size: inherit; }
.eval-line--you article header strong { color: var(--accent); }
.eval-line article p { margin: 0; padding: 13px 15px 15px; font-size: 14px; line-height: 1.65; text-wrap: pretty; }

.eval-decision {
  min-width: 0; overflow-y: auto; border-left: 1px solid var(--rule-strong);
  background: var(--bg); scrollbar-color: var(--rule) transparent;
  box-shadow: -18px 0 42px rgba(14, 17, 22, .035);
}
.eval-brief, .eval-context, .eval-verdict { padding: 22px 24px; }
.eval-brief, .eval-context { border-bottom: 1px solid var(--rule-strong); }
.eval-restricted {
  flex: none; padding: 3px 6px; border: 1px solid var(--notyet);
  color: var(--notyet); font-family: var(--mono); font-size: 8px;
  letter-spacing: .07em; text-transform: uppercase;
}
.eval-objective { margin: 0 0 20px; padding: 14px 15px; background: var(--bg-sunk); border-left: 3px solid var(--fg); }
.eval-objective p { margin: 7px 0 0; font-size: 14px; font-weight: 600; line-height: 1.55; text-wrap: pretty; }
.eval-disclosure { border-top: 1px solid var(--rule); }
.eval-disclosure summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 44px; cursor: pointer; list-style: none;
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: .08em;
  text-transform: uppercase;
}
.eval-disclosure summary::-webkit-details-marker,
.eval-advisory summary::-webkit-details-marker { display: none; }
.eval-disclosure summary span { color: var(--fg-3); }
.eval-disclosure p { margin: 0 0 15px; color: var(--fg-2); font-size: var(--t-row); line-height: 1.6; text-wrap: pretty; }
.eval-criteria { margin-top: 20px; }
.eval-criteria > .label { display: block; margin-bottom: 4px; }
.eval-criteria ol { margin: 0; padding: 0; list-style: none; }
.eval-criteria li {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px;
  padding: 11px 0; border-top: 1px solid var(--rule-hair);
}
.eval-criteria li > span { color: var(--fg-3); font-family: var(--mono); font-size: var(--t-code); }
.eval-criteria li p { margin: 0; font-size: var(--t-row); line-height: 1.55; text-wrap: pretty; }

.eval-context { background: var(--bg-sunk); }
.eval-advisory {
  border: 1px dashed var(--rule-strong); background: var(--bg);
}
.eval-advisory summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 62px; padding: 10px 13px; cursor: pointer; list-style: none;
}
.eval-advisory summary > span:first-child { display: flex; flex-direction: column; gap: 3px; }
.eval-advisory summary > span:last-child { color: var(--fg-3); font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
.eval-advisory__body { padding: 15px; border-top: 1px dashed var(--rule); font-size: var(--t-row); }
.eval-advisory__body p { line-height: 1.55; text-wrap: pretty; }
.eval-advisory__signal { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.eval-advisory__body ul { margin: 6px 0 14px; padding-left: 18px; }
.eval-advisory__warning { margin: 14px 0 0; padding-top: 11px; border-top: 1px solid var(--rule); color: var(--notyet); }
.eval-advisory-pending p, .eval-advisory-actions p { margin: 7px 0 12px; color: var(--fg-2); font-size: var(--t-row); line-height: 1.55; }
.eval-advisory-actions > div { display: flex; gap: 8px; flex-wrap: wrap; }
.eval-advisory-actions form { margin: 0; }
.eval-form-error { margin: 0 0 10px; padding: 9px 12px; border-left: 3px solid var(--notyet); color: var(--notyet); font-size: var(--t-row); line-height: 1.5; }

.eval-verdict header {
  display: flex; flex-direction: column; gap: 4px; padding-bottom: 15px;
  border-bottom: 1px solid var(--rule);
}
.eval-verdict header strong { font-size: var(--t-row); }
.eval-verdict fieldset { margin: 18px 0 0; padding: 0; border: 0; }
.eval-verdict legend { margin-bottom: 8px; }
.eval-verdict__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.eval-verdict-option {
  display: block; position: relative; min-height: 94px; cursor: pointer;
}
.eval-verdict-option input {
  position: absolute; width: 1px; height: 1px; opacity: 0;
}
.eval-verdict-option > span {
  display: flex; height: 100%; flex-direction: column; justify-content: space-between;
  padding: 12px; background: var(--bg-sunk); box-shadow: inset 0 0 0 1px var(--rule);
  transition-property: background-color, box-shadow, scale;
  transition-duration: 150ms; transition-timing-function: ease-out;
}
.eval-verdict-option strong {
  font-family: var(--mono); font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase;
}
.eval-verdict-option small { color: var(--fg-3); font-size: 10px; line-height: 1.4; text-wrap: pretty; }
.eval-verdict-option:hover > span { box-shadow: inset 0 0 0 1px var(--rule-strong); }
.eval-verdict-option:active > span { scale: .96; }
.eval-verdict-option input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.eval-verdict-option:has(input:checked) > span {
  background: var(--accent-wash); box-shadow: inset 0 0 0 2px var(--accent);
}
.eval-verdict-option--notyet:has(input:checked) > span {
  background: var(--notyet-wash); box-shadow: inset 0 0 0 2px var(--notyet);
}
.eval-verdict-option--notyet:has(input:checked) strong { color: var(--notyet); }
.eval-debrief-field { margin-top: 18px; }
.eval-debrief-field > label { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.eval-debrief-field kbd { color: var(--fg-2); }
.eval-debrief-field textarea {
  width: 100%; min-height: 156px; margin-top: 8px; padding: 13px 14px;
  resize: vertical; border: 1px solid var(--rule-strong); outline-offset: 2px;
  background: var(--bg); color: var(--fg); font: inherit; font-size: 14px;
  line-height: 1.6;
}
.eval-debrief-field textarea::placeholder { color: var(--fg-4); }
.eval-debrief-field > p { margin: 7px 0 0; color: var(--fg-3); font-size: var(--t-micro); line-height: 1.45; }
.eval-debrief-preview {
  margin: 16px 0; padding: 13px 14px; border-left: 3px solid var(--fg);
  background: var(--bg-sunk);
}
.eval-debrief-preview blockquote { margin: 7px 0 0; font-size: 14px; font-weight: 600; line-height: 1.5; text-wrap: pretty; }
.eval-record-button { width: 100%; min-height: 48px; }
.eval-finality { margin: 9px 0 0; color: var(--fg-3); font-size: var(--t-micro); line-height: 1.5; text-align: center; text-wrap: pretty; }

.eval-empty-state {
  grid-column: 2 / -1; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center; padding: 8vw;
  background: var(--bg);
}
.eval-empty-state h1 { margin: 7px 0 10px; font-size: clamp(34px, 5vw, 64px); }
.eval-empty-state p { max-width: 48ch; margin: 0 0 22px; color: var(--fg-2); font-size: var(--t-lede); text-wrap: pretty; }

/* --------------------------------------------------------- after-action room
   A returned record is not another course page. The dark index holds the
   learner inside the sequence while the paper-like centre keeps evidence,
   rehearsal and re-entry distinct. Amber means one thing here: not yet. */
.remediation-mode { background: var(--bg-sunk); }
.lab-shell {
  display: grid;
  grid-template-columns: 230px minmax(560px, 1fr) minmax(280px, 340px);
  align-items: stretch;
  min-height: calc(100svh - 44px);
  background: var(--bg-sunk);
}
.lab-index {
  position: sticky; top: 0; align-self: start;
  display: flex; flex-direction: column;
  height: calc(100svh - 44px); min-height: 560px;
  color: var(--ops-fg); background:
    linear-gradient(150deg, rgba(180, 83, 9, .11), transparent 42%),
    var(--ops-bg);
  border-right: 1px solid var(--ops-rule);
}
.lab-index .label { color: var(--ops-fg-3); }
.lab-index__head {
  display: grid; grid-template-columns: 9px minmax(0, 1fr);
  gap: 13px; align-items: start; padding: 25px 20px 22px;
  border-bottom: 1px solid var(--ops-rule);
}
.lab-index__status {
  width: 8px; height: 8px; margin-top: 4px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 0 5px rgba(180, 83, 9, .12);
}
.lab-index__head strong {
  display: block; margin-top: 5px; font-size: 13px; line-height: 1.35;
  text-wrap: pretty;
}
.lab-index__nav { padding: 12px 0; }
.lab-index__nav a {
  position: relative;
  display: grid; grid-template-columns: 29px minmax(0, 1fr);
  gap: 8px; align-items: center; min-height: 70px; padding: 13px 19px;
  color: var(--ops-fg-3); text-decoration: none;
  transition-property: color, background-color;
  transition-duration: 180ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
.lab-index__nav a::before {
  content: ""; position: absolute; inset: 12px auto 12px 0; width: 2px;
  background: transparent;
  transition-property: background-color, transform;
  transition-duration: 180ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
  transform: scaleY(.25); transform-origin: center;
}
.lab-index__nav a:hover { color: var(--ops-fg); background: rgba(255, 255, 255, .025); }
.lab-index__nav a[aria-current="step"] { color: var(--ops-fg); background: rgba(255, 255, 255, .045); }
.lab-index__nav a[aria-current="step"]::before { background: var(--amber); transform: scaleY(1); }
.lab-index__nav .tnum {
  font-family: var(--mono); font-size: var(--t-code); color: inherit;
}
.lab-index__nav strong { display: block; font-size: 12.5px; font-weight: 650; }
.lab-index__nav small {
  display: block; margin-top: 2px; color: inherit;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .04em;
}
.lab-index__principle {
  margin-top: auto; padding: 19px 20px 22px; border-top: 1px solid var(--ops-rule);
}
.lab-index__principle p {
  margin: 8px 0 0; color: var(--ops-fg-2); font-size: 11px;
  line-height: 1.55; text-wrap: pretty;
}

.lab-main {
  min-width: 0; width: min(880px, 100%); margin-inline: auto;
  padding: clamp(42px, 5vw, 72px) clamp(28px, 5vw, 68px) 90px;
}
.lab-hero { padding-bottom: 34px; border-bottom: 1px solid var(--rule-strong); }
.lab-hero > .label { color: var(--notyet); }
.lab-hero h1 {
  max-width: 14ch; margin: 9px 0 15px;
  font-size: clamp(38px, 4.4vw, 62px); line-height: .98; letter-spacing: -.045em;
}
.lab-hero > p {
  max-width: 62ch; margin: 0; color: var(--fg-2);
  font-size: 15px; line-height: 1.7; text-wrap: pretty;
}
.lab-hero__meta {
  display: flex; gap: 8px 20px; flex-wrap: wrap; margin-top: 24px;
  color: var(--fg-3); font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: .05em; text-transform: uppercase;
}

.lab-verdict {
  position: relative; margin: 28px 0 0; padding: 22px 24px 20px;
  background: var(--bg); box-shadow:
    0 0 0 1px var(--rule),
    0 1px 2px rgba(14, 17, 22, .06),
    0 12px 34px rgba(14, 17, 22, .045);
}
.lab-verdict::before, .lab-verdict::after {
  content: ""; position: absolute; width: 13px; height: 13px; pointer-events: none;
}
.lab-verdict::before { inset: -1px auto auto -1px; border-top: 2px solid var(--notyet); border-left: 2px solid var(--notyet); }
.lab-verdict::after { inset: auto -1px -1px auto; border-right: 2px solid var(--notyet); border-bottom: 2px solid var(--notyet); }
.lab-verdict header, .lab-verdict footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.lab-verdict__mark {
  color: var(--notyet); font-family: var(--mono); font-size: var(--t-label);
  font-weight: 700; letter-spacing: .16em;
}
.lab-verdict blockquote {
  max-width: 58ch; margin: 20px 0; padding-left: 17px;
  border-left: 3px solid var(--notyet); font-size: 17px; font-weight: 620;
  line-height: 1.55; text-wrap: pretty;
}
.lab-verdict footer {
  padding-top: 14px; border-top: 1px solid var(--rule-hair);
  color: var(--fg-3); font-size: var(--t-micro);
}
.lab-verdict footer a { font-family: var(--mono); font-size: var(--t-code); }

.lab-stage { margin-top: 82px; scroll-margin-top: 30px; }
.lab-stage__head {
  display: grid; grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px; align-items: start; margin-bottom: 26px;
}
.lab-stage__number {
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 1px solid var(--rule-strong); color: var(--fg-2);
  font-family: var(--mono); font-size: var(--t-code);
}
.lab-stage__head h2 { margin: 5px 0 6px; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.1; }
.lab-stage__head p {
  max-width: 58ch; margin: 0; color: var(--fg-2);
  font-size: var(--t-row); line-height: 1.6; text-wrap: pretty;
}
.lab-evidence-list, .lab-rehearsal-list { display: flex; flex-direction: column; gap: 15px; }
.lab-evidence {
  background: var(--bg); box-shadow:
    0 0 0 1px var(--rule),
    0 1px 2px rgba(14, 17, 22, .05),
    0 8px 24px rgba(14, 17, 22, .035);
}
.lab-evidence > header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--rule-hair);
}
.lab-evidence__pair {
  display: grid; grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
  min-height: 168px;
}
.lab-evidence__context, .lab-evidence blockquote { margin: 0; padding: 22px 20px; }
.lab-evidence__context p, .lab-evidence blockquote p {
  margin: 9px 0 0; font-size: 14px; line-height: 1.62; text-wrap: pretty;
}
.lab-evidence__context { color: var(--fg-2); }
.lab-evidence blockquote { background: var(--notyet-wash); }
.lab-evidence blockquote .label { color: var(--notyet); }
.lab-evidence blockquote p { font-weight: 650; }
.lab-evidence__turn {
  position: relative; display: grid; place-items: center;
  border-inline: 1px solid var(--rule-hair);
}
.lab-evidence__turn::before { content: ""; position: absolute; inset: 50% 7px auto; border-top: 1px solid var(--rule-strong); }
.lab-evidence__turn span {
  position: relative; padding: 3px; background: var(--bg);
  color: var(--fg-3); font-family: var(--mono); font-size: 7.5px;
  letter-spacing: .08em;
}

.lab-preparation { margin: 0; }
.lab-rehearsal {
  display: grid; grid-template-columns: minmax(190px, .7fr) minmax(0, 1.3fr);
  background: var(--bg); box-shadow: 0 0 0 1px var(--rule);
  transition-property: box-shadow, transform;
  transition-duration: 180ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
.lab-rehearsal:focus-within {
  transform: translateY(-2px); box-shadow:
    0 0 0 1px var(--accent),
    0 10px 32px rgba(14, 17, 22, .07);
}
.lab-rehearsal__source { padding: 20px; border-right: 1px solid var(--rule); background: var(--bg-sunk); }
.lab-rehearsal__source p {
  margin: 9px 0 0; color: var(--fg-2); font-size: 12px;
  line-height: 1.55; text-wrap: pretty;
}
.lab-rehearsal__field { padding: 19px 20px 17px; }
.lab-rehearsal__field label, .lab-commitment > label {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  margin-bottom: 8px;
}
.lab-field-state {
  opacity: 0; color: var(--accent); font-family: var(--mono);
  font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase;
  transform: translateY(4px);
  transition-property: opacity, transform;
  transition-duration: 180ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
.is-complete .lab-field-state { opacity: 1; transform: translateY(0); }
.lab-rehearsal textarea, .lab-commitment textarea {
  display: block; width: 100%; min-height: 112px; resize: vertical;
  border: 1px solid var(--rule-strong); padding: 13px 14px;
  background: var(--bg); color: var(--fg); font: inherit; font-size: 14px;
  line-height: 1.6; outline-offset: 2px;
  transition-property: border-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
.lab-rehearsal textarea::placeholder, .lab-commitment textarea::placeholder { color: var(--fg-4); }
.lab-rehearsal textarea:focus, .lab-commitment textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.lab-rehearsal__field > p, .lab-commitment > p {
  margin: 8px 0 0; color: var(--fg-3); font-size: var(--t-micro);
  line-height: 1.5; text-wrap: pretty;
}
.lab-stage--reentry { padding-top: 2px; }
.lab-commitment {
  position: relative; padding: 24px;
  background: var(--bg); box-shadow:
    0 0 0 1px var(--rule-strong),
    0 12px 38px rgba(14, 17, 22, .045);
}
.lab-commitment::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--notyet);
  transition-property: background-color;
  transition-duration: 180ms;
}
.lab-commitment.is-complete::before { background: var(--accent); }
.lab-seal-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule);
}
.lab-seal-row strong { display: block; margin-top: 4px; font-size: var(--t-row); }
.lab-seal { min-height: 46px; padding-left: 22px; padding-right: 20px; }
.lab-saved {
  margin: 14px 0 0; padding: 10px 12px; border-left: 3px solid var(--accent);
  background: var(--accent-wash); color: var(--fg-2); font-size: var(--t-row);
}
.lab-launch {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 18px; align-items: center; margin-top: 34px; padding: 24px;
  color: var(--ops-fg); background: var(--ops-bg);
  box-shadow: 0 18px 48px rgba(8, 11, 16, .16);
}
.lab-launch__signal { display: flex; gap: 3px; align-items: end; height: 32px; }
.lab-launch__signal span { width: 3px; background: #7FA6D6; }
.lab-launch__signal span:nth-child(1) { height: 12px; }
.lab-launch__signal span:nth-child(2) { height: 27px; }
.lab-launch__signal span:nth-child(3) { height: 18px; }
.lab-launch .label { color: var(--ops-fg-3); }
.lab-launch h2 { margin: 4px 0 8px; font-size: 20px; }
.lab-launch blockquote {
  margin: 0; color: var(--ops-fg-2); font-size: var(--t-row);
  line-height: 1.55; text-wrap: pretty;
}
.lab-launch .btn { background: #7FA6D6; color: var(--ink); white-space: nowrap; }

.lab-reading { min-width: 0; border-left: 1px solid var(--rule); background: var(--bg); }
.lab-reading__inner {
  position: sticky; top: 0; display: flex; flex-direction: column;
  min-height: calc(100svh - 44px); padding: 27px 24px 24px;
}
.lab-reading__inner > header {
  padding-bottom: 18px; border-bottom: 1px solid var(--rule-strong);
}
.lab-reading__inner > header strong { display: block; margin-top: 5px; font-size: 14px; }
.lab-reading__prose { padding: 20px 0; }
.lab-reading__prose p, .lab-reading__empty {
  margin: 0 0 1em; color: var(--fg-2); font-size: 12.5px;
  line-height: 1.72; text-wrap: pretty;
}
.lab-reading__prose p:first-child { color: var(--fg); font-size: 14px; font-weight: 620; }
.lab-reading__inner > footer {
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--rule);
}
.lab-reading__inner > footer p {
  margin: 7px 0 14px; color: var(--fg-3); font-size: var(--t-micro);
  line-height: 1.55; text-wrap: pretty;
}
.lab-reading__inner > footer a { font-family: var(--mono); font-size: var(--t-code); }

.ops-reentry {
  margin: 14px 18px 2px; padding: 15px 16px;
  border: 1px solid color-mix(in srgb, var(--notyet) 52%, transparent);
  background: var(--notyet-wash);
}
.ops-reentry > header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.ops-reentry blockquote {
  margin: 12px 0; padding-left: 12px; border-left: 2px solid var(--notyet);
  font-size: 13px; font-weight: 650; line-height: 1.5; text-wrap: pretty;
}
.ops-reentry details { border-top: 1px solid var(--rule-hair); }
.ops-reentry summary {
  min-height: 40px; display: flex; align-items: center; cursor: pointer;
  color: var(--fg-2); font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: .06em; text-transform: uppercase;
}
.ops-reentry ol { margin: 0 0 10px; padding-left: 20px; }
.ops-reentry li { margin-bottom: 7px; color: var(--fg-2); font-size: 11px; line-height: 1.45; }
.ops-reentry > p { margin: 9px 0 0; color: var(--fg-3); font-size: 9.5px; line-height: 1.45; }

/* ----------------------------------------------------------- threshold motion
   Used only when crossing into a consequential state: command deck, live
   operation, or human verdict. Interactive state changes still use CSS
   transitions so they remain interruptible. */
.threshold-enter {
  opacity: 0; transform: translateY(12px); filter: blur(4px);
  animation: threshold-enter 420ms cubic-bezier(.2, 0, 0, 1) forwards;
}
.threshold-enter--1 { animation-delay: 40ms; }
.threshold-enter--2 { animation-delay: 140ms; }
.threshold-enter--3 { animation-delay: 240ms; }
.threshold-enter--4 { animation-delay: 340ms; }

@keyframes threshold-enter {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ------------------------------------------------------------- responsive
   Desktop-first per the brief, but mobile must work: the rail and aside
   become stacked sections, and the spine keeps its marks so node styles stay
   distinguishable on a phone. */
@media (max-width: 1180px) {
  .shell, .shell--wide { grid-template-columns: var(--rail) minmax(0, 1fr); }
  .shell.ops-shell { grid-template-columns: minmax(0, 1fr) 330px; }
  .lab-shell { grid-template-columns: 210px minmax(0, 1fr); }
  .lab-reading { grid-column: 2; border-left: 0; border-top: 1px solid var(--rule); }
  .lab-reading__inner { position: static; min-height: 0; }
  .lab-reading__prose { columns: 2; column-gap: 34px; }
  .lab-reading__prose p { break-inside: avoid; }
  .eval-workstation { grid-template-columns: 250px minmax(0, 1fr); overflow-y: auto; }
  .eval-queue { position: sticky; top: 0; grid-row: 1 / span 2; height: calc(100svh - 44px); }
  .eval-record { overflow: visible; }
  .eval-decision { grid-column: 2; overflow: visible; border-top: 1px solid var(--rule-strong); }
  .eval-empty-state { grid-column: 2; min-height: calc(100svh - 44px); }
  .aside {
    grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--rule);
  }
}

@media (max-width: 860px) {
  .track-shell > .aside { border-left: 0; }
  .reference-shell > .main { order: 1; }
  .reference-shell > .rail { order: 2; border-top: 1px solid var(--rule); }
  .track-setup, .track-close { padding: 20px 18px; }
  /* --t-label: the uppercase micro-labels read at 9.5px on a phone, under the
     legibility floor. 11px here; the desktop scale is untouched. */
  :root { --pad: 18px; --t-hero: 27px; --t-label: 11px; }
  .shell, .shell--wide, .shell--solo, .shell--stage { grid-template-columns: minmax(0, 1fr); }
  .shell.ops-shell { grid-template-columns: minmax(0, 1fr); }
  .lab-shell { display: block; }
  .lab-index {
    position: static; height: auto; min-height: 0; border-right: 0;
    border-bottom: 1px solid var(--ops-rule);
  }
  .lab-index__head { padding: 18px; }
  .lab-index__nav {
    display: flex; overflow-x: auto; padding: 0;
    scrollbar-width: none;
  }
  .lab-index__nav::-webkit-scrollbar { display: none; }
  .lab-index__nav a {
    flex: 1 0 190px; min-height: 64px; padding: 11px 17px;
    border-right: 1px solid var(--ops-rule);
  }
  .lab-index__nav a::before { inset: auto 14px 0; width: auto; height: 2px; transform: scaleX(.25); }
  .lab-index__nav a[aria-current="step"]::before { transform: scaleX(1); }
  .lab-index__principle { display: none; }
  .lab-main { width: 100%; padding: 38px 20px 68px; }
  .lab-hero h1 { font-size: clamp(36px, 11vw, 52px); }
  .lab-stage { margin-top: 66px; scroll-margin-top: 18px; }
  .lab-reading { border-top: 1px solid var(--rule); }
  .lab-reading__inner { padding: 25px 20px; }
  .lab-reading__prose { columns: 1; }
  .eval-mode { overflow: auto; }
  .eval-workstation { display: block; height: auto; min-height: calc(100svh - 108px); }
  .eval-queue { position: static; height: auto; max-height: none; border-right: 0; }
  .eval-queue__head { min-height: 92px; padding: 18px; }
  .eval-queue__list { display: flex; overflow-x: auto; overflow-y: hidden; }
  .eval-queue__list { scrollbar-width: none; }
  .eval-queue__list::-webkit-scrollbar { display: none; }
  .eval-queue__item {
    grid-template-columns: 25px minmax(120px, 1fr); min-width: 250px;
    border-right: 1px solid var(--ops-rule); border-bottom: 0;
  }
  .eval-queue__wait { display: none; }
  .eval-queue__foot { display: none; }
  .eval-record { padding: 18px 18px 46px; }
  .eval-record__head { padding-top: 12px; }
  .eval-record__head h1 { font-size: 30px; }
  .eval-ledger { grid-template-columns: 1fr 1fr; }
  .eval-ledger > div:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
  .eval-ledger > div:nth-child(4) { border-top: 1px solid var(--rule); }
  .eval-line { grid-template-columns: 24px minmax(0, 1fr); gap: 8px; }
  .eval-line--you article { margin-left: 0; }
  .eval-decision { border-left: 0; box-shadow: none; }
  .eval-brief, .eval-context, .eval-verdict { padding: 22px 18px; }
  .eval-empty-state { min-height: 60svh; padding: 50px 22px; }
  .rail {
    position: static; border-right: 0; border-bottom: 1px solid var(--rule);
  }
  .mission-shell { grid-template-columns: minmax(0, 1fr); }
  .mission-shell > .mission-main { order: 1; }
  .mission-shell > .aside { order: 2; }
  /* Narrow screens: drop the kind column; the mark still encodes it. */
  .spine .node { grid-template-columns: 12px minmax(0, 1fr) auto; }
  .spine .node__kind { display: none; }
  .spine .node__title, .spine .node__note { grid-column: 2; }
  .spine .node__status, .spine .node__sub { grid-column: 3; }
  .spine .node__sub {
    grid-column: 2 / -1; grid-row: 3; justify-self: start;
    text-align: left; white-space: normal; overflow-wrap: anywhere;
  }
  .main { padding: 20px 18px 28px; }
  .mission-main { max-width: none; padding-top: 16px; }
  .command-status { grid-template-columns: 1fr 1fr; }
  .command-status > div:nth-child(3) {
    grid-column: 1 / -1; padding-left: 0; border-left: 0;
    border-top: 1px solid var(--rule-hair);
  }
  .debrief-signal__body { grid-template-columns: 1fr; }
  .debrief-signal__body > div { align-items: flex-start; text-align: left; }
  .contract { grid-template-columns: 1fr; }
  .contract > div, .contract > div:nth-child(even) {
    padding: 12px 0; border-left: 0;
  }
  .contract > div:nth-last-child(2) { border-bottom: 1px solid var(--rule); }
  .grid-2 { grid-template-columns: 1fr; }
  .turn { max-width: 100%; }
  .module { padding: 22px 18px 20px; }
  .disclosure { text-align: left; }
  .session__body { padding: 18px; }
  .composer { padding: 14px 18px; }
  .ops-console {
    height: calc(100svh - 108px); min-height: 620px;
    background-size: 54px 54px;
  }
  .ops-console__head { display: block; padding: 20px 18px 18px; }
  .ops-title { font-size: 24px; }
  .ops-telemetry {
    grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 17px;
  }
  .ops-telemetry > div { min-width: 0; padding: 8px; }
  .ops-transcript { padding: 20px 18px; }
  .ops-turn { width: 94%; }
  .ops-composer { grid-template-columns: 1fr; padding: 13px 18px 16px; }
  .ops-composer__send { width: 100%; }
  .ops-brief { border-left: 0; border-top: 1px solid var(--rule); }
  .verdict-hero { grid-template-columns: 1fr; min-height: 0; }
  .verdict-hero__signal {
    min-height: 170px; padding: 22px 0; border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .verdict-hero__record { padding: 26px 0; }
  .debrief { font-size: 18px; }
  .debrief-page { padding-top: 26px; }
  .next-action { grid-template-columns: 1fr; align-items: start; }
  .transcript-drawer summary { align-items: flex-end; }
  .transcript-drawer summary > .code { max-width: 110px; text-align: right; }

  /* Micro type floors (F-robustness-13). Every hard-coded label under 11px in
     this sheet — the evaluate desk's queue and ledger, the room telemetry, the
     lab index — reads at 11px on a phone. tests/test_tier2_guards.py derives
     the list from the sheet, so a new sub-11px rule fails until it is added. */
  .ops-telemetry dt { font-size: 11px; }
  .web text { font-size: 11px; }
  .eval-queue__identity span { font-size: 11px; }
  .eval-queue__wait { font-size: 11px; }
  .eval-queue__wait small { font-size: 11px; }
  .eval-queue__foot { font-size: 11px; }
  .eval-ledger dt { font-size: 11px; }
  .eval-line article header { font-size: 11px; }
  .eval-restricted { font-size: 11px; }
  .eval-advisory summary > span:last-child { font-size: 11px; }
  .eval-verdict-option small { font-size: 11px; }
  .lab-index__nav small { font-size: 11px; }
  .lab-evidence__turn span { font-size: 11px; }
  .ops-reentry > p { font-size: 11px; }

  /* Tap targets: inline links in the small print ("Forgotten your password?",
     "Create one", the way back to a node) and the consent checkbox were 12-20px
     tall. 40px hit areas, without changing where the text sits. */
  .disclosure a { display: inline-block; min-height: 40px; padding: 10px 0; }
  .home-link a { min-height: 40px; }
  input[type="checkbox"] { width: 24px; height: 24px; }
}

@media (max-width: 620px) {
  .learner-nav { flex-wrap: wrap; padding: 0 8px; }
  .learner-nav a { min-height: 44px; display: flex; align-items: center; }
  .strip__brand { min-width: 0; }
  .strip__brand > span { overflow-wrap: anywhere; }
  .lab-hero__meta { display: grid; grid-template-columns: 1fr 1fr; }
  .lab-verdict { padding: 20px 18px; }
  .lab-verdict blockquote { font-size: 15.5px; }
  .lab-verdict footer { align-items: flex-start; flex-direction: column; }
  .lab-stage__head { grid-template-columns: 34px minmax(0, 1fr); gap: 11px; }
  .lab-stage__number { width: 32px; height: 32px; }
  .lab-evidence__pair { grid-template-columns: 1fr; }
  .lab-evidence__turn { min-height: 38px; border: 0; border-block: 1px solid var(--rule-hair); }
  .lab-evidence__turn::before { inset: 50% 20px auto; }
  .lab-rehearsal { grid-template-columns: 1fr; }
  .lab-rehearsal__source { border-right: 0; border-bottom: 1px solid var(--rule); }
  .lab-commitment { padding: 20px 18px; }
  .lab-seal-row { align-items: stretch; flex-direction: column; }
  .lab-seal { width: 100%; }
  .lab-launch { grid-template-columns: 34px minmax(0, 1fr); padding: 20px 18px; }
  .lab-launch > form { grid-column: 1 / -1; }
  .lab-launch .btn { width: 100%; }
}

/* Wide content must scroll inside its own box; the page body never scrolls
   sideways. */
.scroll-x { overflow-x: auto; }

@media print {
  .rail, .aside, .composer, .btn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .choice, .strip__signout,
  .lab-index__nav a, .lab-index__nav a::before,
  .lab-rehearsal, .lab-field-state, .lab-commitment::before {
    transition-duration: .01ms;
  }
  .btn:active, .choice:active, .strip__signout:active { scale: 1; }
  .threshold-enter {
    opacity: 1; transform: none; filter: none; animation: none;
  }
  .ops-typing span { animation: none; }
  .is-speaking .ops-console__head { animation: none; }
  .eval-verdict-option:active > span { scale: 1; }
  .lab-rehearsal:focus-within { transform: none; }
}

/* ------------------------------------------------------- a machine read
   Formative, never a verdict: no stamp, no verdict colour, a dashed rule and a
   mono NOT A VERDICT tag, so it cannot be mistaken for .verdict-hero even at a
   glance. Rendered only on the practice debrief, after the learner's own read. */
.machine-read {
  margin: 22px 0; padding: 18px 20px;
  border: 1px dashed var(--rule-strong);
}
.machine-read__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.machine-read__tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-3);
}
.machine-read p { max-width: 62ch; margin: 0; color: var(--fg-2); font-size: var(--t-row); line-height: 1.6; }
.machine-read ul { margin: 6px 0 0; padding-left: 18px; font-size: var(--t-row); }
.machine-read blockquote {
  margin: 8px 0 0; padding-left: 14px; border-left: 2px dashed var(--rule-strong);
  color: var(--fg-2); font-size: var(--t-row); line-height: 1.5;
}
.debrief-form__q { padding: 18px 0; border-top: 1px solid var(--rule); }
.debrief-form__q textarea {
  display: block; width: 100%; min-height: 96px; resize: vertical;
  border: 1px solid var(--rule-strong); padding: 12px 14px;
  background: var(--bg); color: var(--fg); font: inherit; font-size: 14px;
  line-height: 1.6;
}
.debrief-form__q textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.debrief-answer { padding: 14px 0; border-top: 1px solid var(--rule); }
.debrief-answer p { margin: 6px 0 0; max-width: 62ch; white-space: pre-wrap; line-height: 1.55; }

/* ------------------------------------------------------- a worked example
   A transcript with margin notes. The notes name the move and the reason and
   sit beside the line they are about; a weak run is set in the same instrument
   so the difference is in the lines, not the styling. */
.wex-run { margin-top: 26px; }
.wex-lines { list-style: none; margin: 14px 0 0; padding: 0; }
.wex-line {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 18px; padding: 12px 0; border-top: 1px solid var(--rule);
}
.wex-line--you .turn { border-left: 3px solid var(--accent); padding-left: 12px; }
.wex-note { padding: 2px 0 0 14px; border-left: 1px dashed var(--rule-strong); }
.wex-note p { margin: 4px 0 0; color: var(--fg-2); font-size: var(--t-row); line-height: 1.55; text-wrap: pretty; }
.wex-closing {
  margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--rule-strong);
  font-size: var(--t-row); line-height: 1.55; max-width: 70ch;
}
.wex-run--weak .wex-closing { border-style: dashed; color: var(--fg-2); }
@media (max-width: 720px) { .wex-line { grid-template-columns: 1fr; gap: 8px; } }

/* Attempt history — the same table on the ops learner page and the evaluator's
   "Learner history" disclosure (F-staff-9/11). */
.attempt-history-wrap { overflow-x: auto; }
.attempt-history { width: 100%; border-collapse: collapse; font-size: var(--t-row); margin: 8px 0; }
.attempt-history th { text-align: left; font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-2); border-bottom: 1px solid var(--rule-strong); padding: 8px 10px; }
.attempt-history td { border-bottom: 1px solid var(--rule); padding: 10px; vertical-align: top; }
.attempt-history td small { display: block; color: var(--fg-2); font-size: var(--t-micro); }
.attempt-history__flag { color: var(--notyet); font-family: var(--mono); text-transform: uppercase; }
.attempt-history__debrief { max-width: 32ch; color: var(--fg-2); }
.attempt-history--model th { text-transform: none; font-family: inherit; letter-spacing: 0; color: var(--fg); width: 40%; }