/* ==========================================================================
   TLB MilSim — primitives, WARM INSTRUMENT variant ("Direction C")
   Complete replacement for primitives.css.
   Requires tlb-theme-warm.css loaded first, and data-theme="tlb-warm".

   Every rule marked [C] is a change from the boxy version. Everything else
   is identical — same palette, same type, same states, same behaviour.
   ========================================================================== */

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

body {
  margin: 0;
  background: var(--surface);
  background-image: var(--page-glow);   /* [C] the single soft warm glow */
  background-attachment: fixed;         /* [C] glow stays put while content scrolls */
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
a:visited { color: var(--link-visited); }

/* [C] focus offset 2px → 3px; softer shapes need the extra breathing room */
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: var(--focus-offset); }
::selection { background: color-mix(in srgb, var(--accent) 20%, transparent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   TYPE — unchanged from the boxy version
   ========================================================================== */

.t-page  { font-family: var(--font-display); font-weight: 700; font-size: 52px; line-height: 1.04; letter-spacing: -.012em; }
.t-title { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1.08; letter-spacing: -.008em; }
.t-h2    { font-family: var(--font-display); font-weight: 600; font-size: 27px; line-height: 1.2;  letter-spacing: .005em; }
.t-card  { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.1;  letter-spacing: .01em; }

.t-prose { font-size: 17px;   line-height: var(--leading-body); color: var(--text-body); text-wrap: pretty; }
.t-ui    { font-size: 14.5px; line-height: 1.6;  color: var(--text-body); }
.t-small { font-size: 13px;   line-height: 1.65; color: var(--text-body); }

.t-mono  { font-family: var(--font-mono); font-size: 13px; line-height: 1.7; }
.t-meta  { font-family: var(--font-mono); font-size: 11px; line-height: 1.6; color: var(--text-subtle); }

.t-eyebrow {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
}
.t-label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted);
}

.code-inline {
  font-family: var(--font-mono); font-size: .88em;
  color: var(--code-fg); background: var(--code-bg);
  border-radius: var(--radius-xs);            /* [C] 2px → 4px */
  padding: 1px 6px;
}

/* ==========================================================================
   SURFACES
   [C] radius 3px → 10px, flat fill → faint gradient, warmer border.
   Depth still comes from the border; the gradient reads as material.
   ========================================================================== */

.card {
  background: var(--surface-raised-grad);     /* [C] was a flat colour */
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);            /* [C] 3px → 10px */
  overflow: hidden;                           /* [C] required so children respect the radius */
}
.card--interactive { transition: border-color .12s; }
.card--interactive:hover { border-color: var(--border-strong); }

/* [C] header gains its own gradient and the quieter divider tier */
.card__header {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 20px;
  background: var(--surface-header-grad);
  border-bottom: 1px solid var(--border-subtle);
}
.card__body   { padding: 18px 20px; }
.card__footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}

.rule { border: 0; border-top: 1px solid var(--border-subtle); margin: 0; }

/* ==========================================================================
   BUTTONS
   [C] radius 3px → 8px. Primary gains a soft accent halo.
   Still: one primary per view, and destructive never takes the accent fill.
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px;
  border: 0; border-radius: var(--radius-md);   /* [C] 3px → 8px */
  background: transparent;
  font-family: var(--font-display);
  font-weight: 600; font-size: 13.5px;
  letter-spacing: .07em; text-transform: uppercase;   /* [C] .08em → .07em, softer */
  white-space: nowrap; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.btn--phone { min-height: 52px; padding: 0 20px; font-size: 16px; }
.btn--row   { min-height: 38px; padding: 0 14px; font-size: 12.5px; }

.btn--primary {
  background: var(--accent); color: var(--accent-fg);
  box-shadow: var(--shadow-accent);            /* [C] soft halo, no gradient */
}
.btn--primary:hover { background: var(--accent-hover); }

.btn--secondary { border: 1px solid var(--border-strong); color: var(--text-body); }
.btn--secondary:hover { border-color: var(--accent); color: var(--accent); }

.btn--quiet   { border: 1px solid var(--border); color: var(--text-muted); }
.btn--quiet:hover { border-color: var(--border-strong); color: var(--text-body); }

.btn--affirm  { border: 1px solid var(--state-complete-border); background: var(--state-complete-bg); color: var(--state-complete-fg); }
.btn--caution { border: 1px solid var(--state-progress-border); background: var(--state-progress-bg); color: var(--state-progress-fg); }
.btn--danger  { border: 1px solid var(--state-failed-border);   background: var(--state-failed-bg);   color: var(--state-failed-fg); }

/* The waive button. Dashed + tan, disabled until the justification is valid. */
.btn--consequential {
  border: 1px dashed var(--state-pending-border);
  background: var(--state-pending-bg);
  color: var(--state-pending-fg);
}

.btn:disabled, .btn[aria-disabled="true"] {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-raised) 70%, transparent);
  color: var(--text-subtle);
  box-shadow: none;
  cursor: not-allowed;
}
.btn--consequential:disabled {
  border: 1px dashed var(--state-pending-border);
  background: var(--state-pending-bg);
  color: color-mix(in srgb, var(--state-pending-fg) 55%, transparent);
}

/* ==========================================================================
   STATE PILLS
   [C] radius 2px → 999px. This is one of only two places the pill radius is
   allowed. Colour still carries the whole signal, and no pill appears without
   its evidence in the label.
   ========================================================================== */

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;                             /* [C] slightly roomier */
  border-radius: var(--radius-pill);             /* [C] 2px → 999px */
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}

.pill--public    { color: var(--state-public-fg);    background: var(--state-public-bg);    border: 1px solid var(--state-public-border); }
.pill--members   { color: var(--state-members-fg);   background: var(--state-members-bg);   border: 1px solid var(--state-members-border); }
.pill--locked    { color: var(--state-locked-fg);    background: var(--state-locked-bg);    border: 1px solid var(--state-locked-border); }
.pill--progress  { color: var(--state-progress-fg);  background: var(--state-progress-bg);  border: 1px solid var(--state-progress-border); }
.pill--complete  { color: var(--state-complete-fg);  background: var(--state-complete-bg);  border: 1px solid var(--state-complete-border); }
.pill--failed    { color: var(--state-failed-fg);    background: var(--state-failed-bg);    border: 1px solid var(--state-failed-border); }
.pill--pending   { color: var(--state-pending-fg);   background: var(--state-pending-bg);   border: 1px solid var(--state-pending-border); }
.pill--draft     { color: var(--state-draft-fg);     background: var(--state-draft-bg);     border: 1px solid var(--state-draft-border); }
.pill--published { color: var(--state-published-fg); background: var(--state-published-bg); border: 1px solid var(--state-published-border); }

/* WAIVED — still tan, still dashed, still hatched. Rounder, but never olive
   and never a tick. This rule does not soften. */
.pill--waived {
  color: var(--state-pending-fg);
  border: 1px dashed color-mix(in srgb, var(--state-pending-fg) 40%, transparent);
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--state-pending-fg) 12%, transparent) 0 5px,
    color-mix(in srgb, var(--state-pending-fg) 4%, transparent) 5px 10px);
}

.pill--superseded {
  color: var(--state-draft-fg);
  background: var(--state-draft-bg);
  border: 1px solid var(--state-draft-border);
  text-decoration: line-through;
}

/* ==========================================================================
   CALLOUTS
   [C] radius 3px → 10px. The notch still punches --surface, so a callout
   still only works directly on the page surface.
   ========================================================================== */

.callout {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  font-size: 15px; line-height: 1.7; color: var(--text-body);
}
.callout__label {
  position: absolute; top: -8px; left: 16px;
  padding: 0 7px;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
}
.callout--note    { border: 1px solid var(--tone-note-border);    background: var(--tone-note-bg); }
.callout--note    .callout__label { color: var(--tone-note-fg); }
.callout--tip     { border: 1px solid var(--tone-tip-border);     background: var(--tone-tip-bg); }
.callout--tip     .callout__label { color: var(--tone-tip-fg); }
.callout--warning { border: 1px solid var(--tone-warning-border); background: var(--tone-warning-bg); }
.callout--warning .callout__label { color: var(--tone-warning-fg); }
.callout--danger  { border: 1px solid var(--tone-danger-border);  background: var(--tone-danger-bg); }
.callout--danger  .callout__label { color: var(--tone-danger-fg); }

/* ==========================================================================
   SIGNATURE ELEMENT 1 — the line-numbered brief strip
   [C] The shell rounds to 10px and the gutter wash becomes a horizontal
   gradient. THE GUTTER, THE 170px LABEL COLUMN AND THE SQUARE DATA CELLS DO
   NOT CHANGE. Rounding the rows would destroy the printed-form character
   that makes this element the signature of the system.
   ========================================================================== */

.strip {
  background: color-mix(in srgb, var(--surface-raised) 25%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);            /* [C] 3px → 10px */
  overflow: hidden;
}
.strip__header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border-subtle);
}
.strip__header-title {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.strip__header-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-subtle); }

/* gutter | label | value — both fixed widths, exactly as before */
.strip__row {
  display: grid;
  grid-template-columns: 38px 165px 1fr;      /* [C] 34px → 38px gutter only */
  align-items: stretch;
  border-bottom: 1px solid var(--border-hairline);   /* [C] quietest tier */
}
.strip__row:last-child { border-bottom: 0; }

.strip__n {
  display: flex; align-items: center; justify-content: center;
  /* [C] flat 5% wash → horizontal fade. Still square, still bordered right. */
  background: linear-gradient(90deg, var(--accent-tint), #F2A03D05);
  border-right: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 11px; color: var(--accent);
}
.strip__label {
  padding: 13px 16px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted);
}
.strip__value { padding: 13px 16px 13px 0; font-size: 14.5px; color: var(--text); }
.strip__value .literal { font-family: var(--font-mono); }

.strip__footnote {
  padding: 11px 18px;
  border-top: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.6; color: var(--text-subtle);
}

@media (max-width: 719px) {
  .strip__row { grid-template-columns: 32px 1fr; }
  .strip__label { padding-bottom: 0; }
  .strip__value { grid-column: 2; padding: 2px 16px 13px 0; }
  .strip__n { grid-row: span 2; }
}

/* ==========================================================================
   SIGNATURE ELEMENT 2 — progress
   [C] Tracks get rounded ends (999px) because a track is a status, not data.
   They stay DISCRETE — one segment per countable thing. A single continuous
   rounded bar is still wrong.
   ========================================================================== */

.segments { display: flex; gap: 4px; }               /* [C] gap 3px → 4px */
.segments > * {
  flex: 1; height: 7px;                              /* [C] 8px → 7px */
  border-radius: var(--radius-pill);                 /* [C] square → pill ends */
  background: var(--segment-empty);
}

.seg--done    { background: var(--segment-active); }
.seg--current { background: color-mix(in srgb, var(--accent) 40%, transparent); }
.seg--read    { background: var(--segment-done); }
.seg--info    { background: var(--tone-note-fg); }
.seg--waived  {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--state-pending-fg) 50%, transparent) 0 4px,
    color-mix(in srgb, var(--state-pending-fg) 12%, transparent) 4px 8px);
}
.seg--flagged {
  background: repeating-linear-gradient(135deg,
    var(--state-progress-fg) 0 3px, var(--segment-empty) 3px 6px);
}

/* --- practical: signature boxes ------------------------------------------
   [C] radius 2px → 8px, 34×26 → 36×28. A box is still NEVER filled without
   a name in it.
   ------------------------------------------------------------------------- */

.sigboxes { display: flex; gap: 7px; flex-wrap: wrap; }
.sigbox {
  width: 36px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  font-family: var(--font-mono); font-size: 10px;
}
.sigbox--signed   { border: 1px solid var(--state-complete-border); background: var(--state-complete-bg); color: var(--state-complete-fg); }
.sigbox--awaiting { border: 1px solid var(--state-progress-border); background: color-mix(in srgb, var(--state-progress-fg) 6%, transparent); color: var(--state-progress-fg); }
.sigbox--waived {
  border: 1px dashed color-mix(in srgb, var(--state-pending-fg) 40%, transparent);
  color: var(--state-pending-fg);
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--state-pending-fg) 12%, transparent) 0 5px,
    color-mix(in srgb, var(--state-pending-fg) 4%, transparent) 5px 10px);
}
.sigbox--open { border: 1px dashed var(--border-strong); }

/* --- score bar ----------------------------------------------------------
   [C] Track rounds; the pass-mark marker stays a hard 2px rule. The marker
   must not soften — it is the one thing on the graphic that must read as
   exact.
   ------------------------------------------------------------------------- */

.scorebar {
  position: relative; height: 12px;
  background: color-mix(in srgb, var(--surface-sunken) 80%, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.scorebar__fill          { height: 100%; border-radius: var(--radius-pill); }
.scorebar__fill--pass    { background: color-mix(in srgb, var(--state-complete-fg) 30%, transparent); }
.scorebar__fill--fail    { background: color-mix(in srgb, var(--state-failed-fg) 30%, transparent); }
.scorebar__fill--pending {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--state-progress-fg) 40%, transparent) 0 4px,
    var(--segment-empty) 4px 8px);
}
/* set left: <passMark>% inline. Square, 2px, hard. */
.scorebar__mark {
  position: absolute; top: -4px; bottom: -4px; width: 2px;
  background: var(--accent); border-radius: 0;
}

/* ==========================================================================
   NAV
   [C] The active tick keeps its 2px accent left border — it does NOT become
   a rounded filled pill. Only the hover/active fill gains a right-side radius.
   ========================================================================== */

.nav {
  width: var(--sidebar-w);
  background: color-mix(in srgb, var(--surface) 88%, var(--surface-raised));
  border-right: 1px solid var(--border-subtle);
  overflow-y: auto; padding: 16px 12px 40px;
}
.nav__group {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 10px 7px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-subtle);
}
/* [C] the group marker square becomes a small dot */
.nav__group::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 40%, transparent);
}

.nav__item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; min-height: 44px; padding: 7px 10px;
  border: 0; border-left: 2px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;   /* [C] rounds away from the tick */
  background: transparent; text-align: left;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 500;
  color: #B8B2A8; cursor: pointer;
}
.nav__item:hover { color: var(--text); background: rgba(255,255,255,.03); }
.nav__item[aria-current="page"] {
  border-left-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 600;
}
.nav__sub {
  margin-left: 12px; padding: 5px 10px;
  border-left: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-muted);
}
.nav__sub[aria-current="page"] { border-left-color: var(--accent); color: var(--text); font-weight: 500; }

/* ==========================================================================
   FORMS
   [C] radius 3px → 8px, and a focused field gains a soft 3px inner glow
   instead of only changing border colour.
   ========================================================================== */

.field { display: flex; flex-direction: column; gap: 7px; }

.input, .textarea {
  min-height: 44px; padding: 11px 14px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.65;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.textarea { min-height: 96px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }
.input:focus, .textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--ring-focus-soft);          /* [C] new */
}
.input[aria-invalid="true"] { border-color: var(--state-failed-border); }

.field__hint  { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.65; color: var(--text-subtle); }
.field__error { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.65; color: var(--state-failed-fg); }

/* --- selection controls: the SHAPE still encodes the kind ---------------
   [C] Containers round to 8px, but the KEY DISTINCTION HOLDS: quiz options
   are lettered, checkboxes are squares, poll selectors are circles. Do not
   round the checkbox into a circle — that is the poll's shape.
   ------------------------------------------------------------------------- */

.option {
  display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 11px;
  width: 100%; min-height: 52px; padding: 10px 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-raised) 40%, transparent);
  border-radius: var(--radius-md);
  text-align: left; cursor: pointer;
  font-family: var(--font-body); font-size: 14.5px; color: var(--text-body);
  transition: border-color .12s, background .12s;
}
.option:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.option__key { font-family: var(--font-mono); font-size: 11px; color: var(--text-subtle); }
.option[aria-checked="true"] { border-color: var(--accent); background: var(--accent-tint); color: var(--text); }
.option[aria-checked="true"] .option__key { color: var(--accent); }

/* four marked outcomes for multi-select — unchanged in meaning */
.option--right  { border-color: var(--state-complete-fg); background: color-mix(in srgb, var(--state-complete-fg) 10%, transparent); }
.option--missed { border: 1px dashed color-mix(in srgb, var(--state-complete-fg) 60%, transparent);
                  background: color-mix(in srgb, var(--state-complete-fg) 6%, transparent); }
.option--wrong  { border-color: var(--state-failed-border); background: color-mix(in srgb, var(--state-failed-fg) 8%, transparent); }
.option--left   { background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--text-muted); }

.tick { width: 16px; height: 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-xs); }
.tick[data-on="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-fg); }
.dot  { width: 16px; height: 16px; border: 1px solid var(--border-strong); border-radius: 50%; }
.dot[data-on="true"]  { border-color: var(--tone-note-fg); background: var(--tone-note-fg); }

.tf { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tf__panel {
  min-height: 72px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-raised) 40%, transparent);
  border-radius: var(--radius-md); cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 24px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-body);
}
.tf__panel[aria-checked="true"] { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }

.toggle {
  width: 32px; height: 18px; border-radius: var(--radius-pill);
  background: var(--segment-empty);
  display: flex; align-items: center; padding: 2px; cursor: pointer;
}
.toggle__knob { width: 14px; height: 14px; border-radius: 50%; background: #5C574F; }
.toggle[data-on="true"] { background: var(--accent); justify-content: flex-end; }
.toggle[data-on="true"] .toggle__knob { background: var(--accent-fg); }

/* ==========================================================================
   DRAG AND DROP
   [C] radius only. Every drag still has a VISIBLE non-drag equivalent —
   the 36px move buttons are not optional and are never hover-revealed.
   ========================================================================== */

.dragrow {
  display: grid; grid-template-columns: 26px 22px 1fr 84px;
  align-items: center; gap: 10px;
  min-height: 54px; padding: 8px 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-raised) 40%, transparent);
  border-radius: var(--radius-md);
  touch-action: none;
}
.dragrow__handle { font-family: var(--font-mono); font-size: 13px; color: var(--border-strong); cursor: grab; }
.dragrow[data-dragging="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-raised));
  box-shadow: var(--shadow-overlay);
}
.dragrow[data-dragging="true"] .dragrow__handle { color: var(--accent); cursor: grabbing; }

.movebtn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: transparent; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-muted);
}
.movebtn:hover { border-color: var(--accent); color: var(--accent); }

.dropzone {
  min-height: 54px;
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}
.dropzone--rejected {
  border: 1px solid var(--state-failed-border);
  background: color-mix(in srgb, var(--state-failed-fg) 7%, transparent);
  color: var(--state-failed-fg);
}

/* ==========================================================================
   TABLE
   [C] The wrapper rounds; the CELLS DO NOT. Still no zebra striping, still
   mono numbers. A rounded table cell is a bug.
   ========================================================================== */

.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left; padding: 11px 16px; font-weight: 500;
  background: var(--surface-header-grad);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted);
}
.table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-hairline);
  font-size: 14.5px; color: var(--text-body);
}
.table tr:last-child td { border-bottom: 0; }
.table td:first-child { color: var(--text); }
.table td.num { font-family: var(--font-mono); font-size: 13px; }

/* ==========================================================================
   CODE BLOCK · MEDIA SLOT · TRANSCLUSION
   ========================================================================== */

.codeblock {
  background: var(--code-block-bg);
  border: 1px solid var(--code-block-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.codeblock__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--surface) 60%, var(--surface-raised));
  border-bottom: 1px solid var(--code-block-border);
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
}
.codeblock pre {
  margin: 0; padding: 16px; overflow: auto;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.7; color: var(--text-body);
}
.codeblock .c-comment { color: var(--text-subtle); }
.codeblock .c-number  { color: var(--accent); }
.codeblock .c-bool    { color: var(--tone-note-fg); }

.media-slot {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: repeating-linear-gradient(135deg, var(--hatch-a) 0 8px, var(--hatch-b) 8px 16px);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-subtle);
}
.media-slot__play {
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid var(--accent-line); background: var(--accent-tint);
  display: flex; align-items: center; justify-content: center;
}
.media-slot__play::after {
  content: ""; margin-left: 4px;
  border-left: 15px solid var(--accent);
  border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}

.transclude {
  background: var(--transclude-bg);
  border: 1px solid var(--transclude-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.transclude__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-bottom: 1px solid var(--transclude-border);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--transclude-label);
}
.transclude__bar::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--transclude-label); }

/* ==========================================================================
   NUMBERED LIST — grid, not list-style
   ========================================================================== */

.steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.steps > li {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px;
  font-size: 16.5px; line-height: 1.7; color: var(--text-body);
}
.steps__n { font-family: var(--font-mono); font-size: 12px; color: var(--accent); padding-top: 5px; }
.steps strong { color: var(--text); font-weight: 600; }

/* ==========================================================================
   APP SHELL + RESPONSIVE — identical behaviour, softer chrome
   ========================================================================== */

.shell { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

.appbar {
  height: var(--header-h); flex-shrink: 0;
  display: flex; align-items: center; gap: 14px; padding: 0 16px;
  background: color-mix(in srgb, var(--surface) 82%, var(--surface-raised));
  border-bottom: 1px solid var(--border-subtle);
  overflow: hidden;
}
.appbar > * { flex-shrink: 0; white-space: nowrap; }
.appbar__spacer { flex: 1 1 auto; min-width: 8px; }
/* [C] the brand tile rounds with the rest */
.appbar__brand-tile {
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  border: 1px solid var(--accent-line); background: var(--accent-tint);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 9px; color: var(--accent);
}

.shell__body { flex: 1; min-height: 0; display: flex; position: relative; }
.shell__main { flex: 1; min-width: 0; overflow-y: auto; }

.doc { display: grid; grid-template-columns: minmax(0, 1fr) var(--toc-w); }
.doc__col { display: flex; justify-content: center; padding: 44px 40px 80px; }
.doc__article { width: 100%; max-width: var(--measure); display: flex; flex-direction: column; gap: 24px; }
.doc__toc { border-left: 1px solid var(--border-subtle); padding: 44px 20px 40px; }

@media (max-width: 1199px) {
  .doc { grid-template-columns: minmax(0, 1fr); }
  .doc__toc { display: none; }
}
@media (max-width: 1099px) {
  .appbar__search, .appbar__tabs { display: none; }
  .split-2 { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 999px) {
  .cards-2 { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 899px) {
  .nav {
    position: absolute; inset: 0 auto 0 0; z-index: 21;
    width: 270px; max-width: 84%;
    border-right: 1px solid var(--border);
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;   /* [C] drawer rounds on its open edge */
    box-shadow: var(--shadow-overlay);
    transform: translateX(-100%);
    transition: transform .18s ease;
  }
  .nav[data-open="true"] { transform: none; }
  .nav__scrim { position: absolute; inset: 0; z-index: 20; background: rgba(0,0,0,.65); }
}
@media (max-width: 719px) {
  .doc__col { padding: 24px 18px 64px; }
  .t-page  { font-size: 32px; }
  .t-title { font-size: 28px; }
  .btn     { min-height: 44px; }
}

/* ==========================================================================
   PRINT — the glow and the radii come off; the record prints flat
   ========================================================================== */

@media print {
  body { background: #fff; background-image: none; color: #000; }
  .appbar, .nav, .doc__toc, .btn { display: none !important; }
  .shell, .shell__main { height: auto; overflow: visible; }
  .card, .strip, .table-wrap, .codeblock { border-radius: 0; box-shadow: none; background: none; }
}