/* R9: chrome type is the site pairing — Inter (body/UI) + Roboto Mono
   (labels/data), self-hosted at assets/fonts/fonts.css and linked from each
   page head. IBM Plex Serif stays vendored here for long lesson/methods/guide
   prose only; Plex Sans and Plex Mono are no longer referenced. */
@font-face {
  font-family: "IBM Plex Serif";
  src: url("../vendor/fonts/plex/IBMPlexSerif-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Serif";
  src: url("../vendor/fonts/plex/IBMPlexSerif-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Serif";
  src: url("../vendor/fonts/plex/IBMPlexSerif-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

body.pcm-app,
body.guide-page {
  /* ============================================================
     R9 — light BÄRŌ instrument-plate chrome.
     The light twin of the site palette (index.html): warm white
     paper, warm near-black ink, hairline low-alpha ink rules, a
     single oxblood accent used sparingly. No gradients, no glow,
     no colored panel fills. The scene and its overlays keep the
     calibrated dark palette via the figure-panel remap below.
     ============================================================ */
  --pcm-bg: #f4f1ea;                       /* was #10151d — warm paper */
  --pcm-surface: #f6f3ec;                  /* was #171e29 */
  --pcm-surface-raised: #ece8dd;           /* was #1e2937 */
  --pcm-surface-hover: #e5e0d1;            /* was #29384a */
  --pcm-surface-inset: #efebe1;            /* was #111923 */
  --pcm-stage-bg: #0c1119;                 /* unchanged — calibrated scene */
  --pcm-border: rgb(20 18 15 / 16%);       /* was #364457 — hairline ink */
  --pcm-border-strong: rgb(20 18 15 / 40%);/* was #718397 */
  --pcm-text: #14120f;                     /* was #eef2f6 — warm ink */
  --pcm-text-secondary: #3a352c;           /* was #c4cfdd */
  --pcm-muted: #57534a;                    /* was #a6b4c6 */
  --pcm-accent: #d97757;                   /* oxblood mark — bars, pills, outlines */
  --pcm-accent-ink: #a04a28;               /* oxblood ink — accent text on paper (AA) */
  --pcm-accent-surface: rgb(217 119 87 / 16%);
  --pcm-teal: #0e6b60;                     /* was #73d7cb — MEASURED */
  --pcm-violet: #5b4ea8;                   /* was #baaaff — THEORY */
  --pcm-blue: #2f5e8f;                     /* was #8fbeeb */
  --pcm-amber: #8a5a12;                    /* was #edc28b — MODEL */
  --pcm-rose: #c23b22;                     /* was #efabab — excursion vermilion */
  --pcm-green: #2e6f3f;                    /* was #a0d3aa — healthy band */
  --pcm-teal-surface: rgb(14 107 96 / 10%);
  --pcm-violet-surface: rgb(91 78 168 / 10%);
  --pcm-amber-surface: rgb(138 90 18 / 10%);
  --pcm-green-surface: rgb(46 111 63 / 12%);
  --pcm-focus: #a04a28;                    /* was #91e3d6 */
  --pcm-form-accent: #a04a28;              /* checks, radios, ranges, progress */
  --pcm-reference-fill: #837d6f;           /* was #627f8b */
  --pcm-glass: rgb(246 243 236 / 94%);     /* floating chrome (transport) */
  --pcm-glass-strong: rgb(246 243 236 / 97%);
  --pcm-glass-soft: rgb(246 243 236 / 82%);
  --pcm-shadow: rgb(20 18 15 / 18%);       /* soft ink lift, no glow */
  --pcm-alarm-glow: rgb(194 59 34 / 40%);  /* vitals excursion pulse */
  --pcm-brain-color: var(--pcm-accent);
  --pcm-signal-stimulus: var(--pcm-amber);
  --pcm-signal-external: var(--pcm-blue);
  --pcm-signal-sensors: var(--pcm-teal);
  --pcm-signal-belief: var(--pcm-violet);
  --pcm-signal-policy: var(--pcm-rose);
  --pcm-signal-wave: var(--pcm-violet);
  --pcm-signal-pattern: var(--pcm-green);
  --pcm-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pcm-font-serif: "IBM Plex Serif", Georgia, serif;
  --pcm-font-mono: "Roboto Mono", "SFMono-Regular", Consolas, monospace;
  --pcm-radius: 0.25rem;
  --pcm-radius-small: 0.1875rem;
  --pcm-gap: clamp(0.75rem, 1.2vw, 1.125rem);
  --pcm-page-pad: clamp(1rem, 2vw, 2rem);
  --pcm-content-width: 100rem;
  --theta: var(--pcm-blue);
  --gamma: var(--pcm-rose);
  --blanket: var(--pcm-teal);
  --error: var(--pcm-amber);
  --wave: var(--pcm-violet);
  --strata: var(--pcm-green);
  margin: 0;
  padding: 0;
  min-inline-size: 0;
  min-block-size: 100vh;
  min-block-size: 100svh;
  overflow: visible;
  background: var(--pcm-bg);
  color: var(--pcm-text);
  color-scheme: light;
  font-family: var(--pcm-font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  font-synthesis: none;
  overflow-wrap: anywhere;
  scrollbar-color: var(--pcm-border-strong) var(--pcm-surface-inset);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:where(body.pcm-app, body.guide-page),
:where(body.pcm-app, body.guide-page) *,
:where(body.pcm-app, body.guide-page) *::before,
:where(body.pcm-app, body.guide-page) *::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

/* ── R9 dark figure panel: the scene canvas and its overlays keep the
   calibrated dark-glass palette — a dark plate set into the light page.
   Remapping the semantic tokens on these scopes flips every descendant rule
   without touching the rules themselves. Stage mode remaps the whole body so
   the floating transport and status toast stay dark end-to-end; the ≤760px
   block remaps the overlays that return to the light page flow. ── */
body.pcm-app.stage-mode,
body.pcm-app :is(.stage-heading, .vitals-strip, .vitals-legend, .causal-ribbon, .scene-cluster, .watch-toast) {
  --pcm-bg: #10151d;
  --pcm-surface: #171e29;
  --pcm-surface-raised: #1e2937;
  --pcm-surface-hover: #29384a;
  --pcm-surface-inset: #111923;
  --pcm-border: #364457;
  --pcm-border-strong: #718397;
  --pcm-text: #eef2f6;
  --pcm-text-secondary: #c4cfdd;
  --pcm-muted: #a6b4c6;
  --pcm-accent-ink: #eda183;
  --pcm-accent-surface: rgb(217 119 87 / 22%);
  --pcm-teal: #73d7cb;
  --pcm-violet: #baaaff;
  --pcm-blue: #8fbeeb;
  --pcm-amber: #edc28b;
  --pcm-rose: #efabab;
  --pcm-green: #a0d3aa;
  --pcm-teal-surface: #193633;
  --pcm-violet-surface: #2b2941;
  --pcm-amber-surface: #332c23;
  --pcm-green-surface: #20332c;
  --pcm-focus: #91e3d6;
  --pcm-form-accent: #d97757;
  --pcm-reference-fill: #627f8b;
  --pcm-glass: rgb(15 20 28 / 88%);
  --pcm-glass-strong: rgb(15 20 28 / 96%);
  --pcm-glass-soft: rgb(12 17 25 / 78%);
  --pcm-shadow: rgb(0 0 0 / 45%);
  --pcm-alarm-glow: rgb(239 171 171 / 55%);
}

:where(body.pcm-app, body.guide-page) ::selection {
  background: rgb(217 119 87 / 35%);
  color: var(--pcm-text);
}

:where(body.pcm-app, body.guide-page) :where(h1, h2, h3, h4) {
  margin: 0 0 0.75rem;
  color: var(--pcm-text);
  font-family: var(--pcm-font-sans);
  font-weight: 600;
  line-height: 1.3;
}

:where(body.pcm-app, body.guide-page) h1 {
  font-size: 1.625rem;
}

:where(body.pcm-app, body.guide-page) h2 {
  font-size: 1.125rem;
}

:where(body.pcm-app, body.guide-page) :where(h3, h4) {
  font-size: 1rem;
}

:where(body.pcm-app, body.guide-page) :where(p, ul, ol, dl) {
  margin: 0 0 0.9rem;
}

:where(body.pcm-app, body.guide-page) :where(ul, ol) {
  padding-inline-start: 1.35rem;
}

:where(body.pcm-app, body.guide-page) li + li {
  margin-block-start: 0.35rem;
}

:where(body.pcm-app, body.guide-page) :where(b, strong) {
  color: var(--pcm-text);
  font-weight: 600;
}

:where(body.pcm-app, body.guide-page) small {
  font-size: 0.9375rem;
}

:where(body.pcm-app, body.guide-page) :where(a) {
  color: var(--pcm-accent-ink);
  text-decoration: underline;
  text-decoration-color: rgb(217 119 87 / 55%);
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.2em;
  text-decoration-skip-ink: auto;
}

:where(body.pcm-app, body.guide-page) :where(a:hover) {
  color: var(--pcm-text);
  text-decoration-color: currentColor;
}

:where(body.pcm-app, body.guide-page) :where(code, kbd, samp, pre) {
  font-family: var(--pcm-font-mono);
  font-size: 0.9375rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

:where(body.pcm-app, body.guide-page) :where(code, kbd, samp) {
  color: var(--pcm-text-secondary);
}

:where(body.pcm-app, body.guide-page) pre {
  max-inline-size: 100%;
  overflow-x: auto;
  padding: 1rem;
  border: 1px solid var(--pcm-border);
  border-radius: var(--pcm-radius-small);
  background: var(--pcm-surface-inset);
  line-height: 1.7;
  tab-size: 2;
}

:where(body.pcm-app, body.guide-page) :where(button, input, select, textarea) {
  max-inline-size: 100%;
  color: inherit;
  font: inherit;
}

:where(body.pcm-app, body.guide-page) :where(button, .button, .cta) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-block-size: 2.75rem;
  max-inline-size: 100%;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--pcm-border-strong);
  border-radius: var(--pcm-radius-small);
  background: var(--pcm-surface-raised);
  color: var(--pcm-text);
  font-family: var(--pcm-font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

:where(body.pcm-app, body.guide-page) :where(button, .button, .cta):where(:hover:not(:disabled):not([aria-disabled="true"])) {
  border-color: var(--pcm-muted);
  background: var(--pcm-surface-hover);
  color: var(--pcm-text);
}

/* House-style launch button: ink plate, paper label; oxblood on hover. */
:where(body.pcm-app, body.guide-page) :is(.button-primary, .cta) {
  border-color: var(--pcm-text);
  background: var(--pcm-text);
  color: var(--pcm-bg);
  font-weight: 600;
}

:where(body.pcm-app, body.guide-page) :is(.button-primary, .cta):where(:hover:not(:disabled):not([aria-disabled="true"])) {
  border-color: var(--pcm-accent-ink);
  background: var(--pcm-accent-ink);
  color: var(--pcm-bg);
}

:where(body.pcm-app, body.guide-page) .button-quiet {
  border-color: var(--pcm-border);
  background: transparent;
  color: var(--pcm-text-secondary);
}

:where(body.pcm-app, body.guide-page) .button-quiet:where(:hover:not(:disabled):not([aria-disabled="true"])) {
  border-color: var(--pcm-border-strong);
  background: var(--pcm-surface-raised);
  color: var(--pcm-text);
}

:where(body.pcm-app, body.guide-page) button[aria-pressed="true"] {
  border-color: var(--pcm-accent);
  background: var(--pcm-accent-surface);
  color: var(--pcm-accent-ink);
}

:where(body.pcm-app, body.guide-page) :is(button, input, select, textarea, .button):is(:disabled, [aria-disabled="true"]) {
  border-color: var(--pcm-border);
  color: var(--pcm-muted);
  cursor: not-allowed;
}

:where(body.pcm-app, body.guide-page) :is(button, .button):is(:disabled, [aria-disabled="true"]) {
  background: var(--pcm-surface-inset);
}

:where(body.pcm-app, body.guide-page) :where(input:not([type="range"], [type="checkbox"], [type="radio"], [type="file"]), select, textarea) {
  min-inline-size: 0;
  min-block-size: 2.75rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--pcm-border-strong);
  border-radius: var(--pcm-radius-small);
  background: var(--pcm-surface-inset);
  color: var(--pcm-text);
  font-family: var(--pcm-font-sans);
  font-size: 0.9375rem;
  line-height: 1.5;
}

:where(body.pcm-app, body.guide-page) :where(input[type="number"], .control-value) {
  font-family: var(--pcm-font-mono);
  font-size: 0.9375rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

:where(body.pcm-app, body.guide-page) textarea {
  inline-size: 100%;
  min-block-size: 7rem;
  resize: vertical;
}

:where(body.pcm-app, body.guide-page) select {
  cursor: pointer;
}

:where(body.pcm-app, body.guide-page) :where(input, textarea)::placeholder {
  color: var(--pcm-muted);
  opacity: 1;
}

:where(body.pcm-app, body.guide-page) [aria-invalid="true"] {
  border-color: var(--pcm-rose);
}

:where(body.pcm-app, body.guide-page) :where(input[type="checkbox"], input[type="radio"]) {
  flex: 0 0 auto;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  margin: 0.2rem 0 0;
  accent-color: var(--pcm-form-accent);
  cursor: pointer;
}

:where(body.pcm-app, body.guide-page) input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  inline-size: 100%;
  min-inline-size: 0;
  block-size: 2.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: var(--pcm-form-accent);
  cursor: pointer;
}

:where(body.pcm-app, body.guide-page) input[type="range"]::-webkit-slider-runnable-track {
  block-size: 0.3125rem;
  border-radius: 1rem;
  background: var(--pcm-border-strong);
}

:where(body.pcm-app, body.guide-page) input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  margin-block-start: -0.40625rem;
  border: 2px solid var(--pcm-surface-inset);
  border-radius: 50%;
  background: var(--pcm-form-accent);
}

:where(body.pcm-app, body.guide-page) input[type="range"]::-moz-range-track {
  block-size: 0.3125rem;
  border-radius: 1rem;
  background: var(--pcm-border-strong);
}

:where(body.pcm-app, body.guide-page) input[type="range"]::-moz-range-thumb {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  border: 2px solid var(--pcm-surface-inset);
  border-radius: 50%;
  background: var(--pcm-form-accent);
}

:where(body.pcm-app, body.guide-page) input[type="range"]:disabled {
  cursor: not-allowed;
}

:where(body.pcm-app, body.guide-page) input[type="range"]:disabled::-webkit-slider-thumb {
  background: var(--pcm-muted);
}

:where(body.pcm-app, body.guide-page) input[type="range"]:disabled::-moz-range-thumb {
  background: var(--pcm-muted);
}

:where(body.pcm-app, body.guide-page) input[type="file"] {
  inline-size: 100%;
  font-size: 0.9375rem;
}

:where(body.pcm-app, body.guide-page) input[type="file"]::file-selector-button {
  min-block-size: 2.75rem;
  margin-inline-end: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--pcm-border-strong);
  border-radius: var(--pcm-radius-small);
  background: var(--pcm-surface-raised);
  color: var(--pcm-text);
  font: inherit;
  cursor: pointer;
}

:where(body.pcm-app, body.guide-page) :focus-visible {
  outline: 3px solid var(--pcm-focus);
  outline-offset: 3px;
}

:where(body.pcm-app, body.guide-page) .app-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding: 0.875rem var(--pcm-page-pad);
  border-block-end: 1px solid var(--pcm-border);
  background: var(--pcm-bg);
  font-family: var(--pcm-font-sans);
  font-weight: 500;
}

:where(body.pcm-app, body.guide-page) .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-inline-size: 0;
  max-inline-size: 100%;
  color: var(--pcm-text);
  font-family: var(--pcm-font-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

:where(body.pcm-app, body.guide-page) .brand :is(img, svg, .brand-mark) {
  display: block;
  flex: 0 0 auto;
  inline-size: 2rem;
  block-size: 2rem;
  color: var(--pcm-brain-color);
  object-fit: contain;
}

:where(body.pcm-app, body.guide-page) .brand small {
  display: block;
  margin-block-start: 0.15rem;
  color: var(--pcm-muted);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
}

:where(body.pcm-app, body.guide-page) .app-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  max-inline-size: 100%;
  padding: 0.25rem;
  border: 1px solid var(--pcm-border);
  border-radius: var(--pcm-radius);
  background: transparent;
}

/* Nav reads as uppercase mono instrument labels (house micro-label voice). */
:where(body.pcm-app, body.guide-page) .app-nav :is(a, button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 2.75rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid transparent;
  border-radius: var(--pcm-radius-small);
  background: transparent;
  color: var(--pcm-text-secondary);
  font-family: var(--pcm-font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

:where(body.pcm-app, body.guide-page) .app-nav :is(a, button):hover {
  background: var(--pcm-surface-raised);
  color: var(--pcm-text);
}

:where(body.pcm-app, body.guide-page) .app-nav :is([aria-selected="true"], [aria-current="page"], [aria-pressed="true"], .is-active) {
  border-color: var(--pcm-accent);
  background: var(--pcm-accent-surface);
  color: var(--pcm-accent-ink);
}

:where(body.pcm-app, body.guide-page) .header-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  min-inline-size: 0;
  margin-inline-start: auto;
  color: var(--pcm-muted);
  font-family: var(--pcm-font-mono);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
}

body.pcm-app:not(.is-embed) {
  /* R7: the transport is a floating bottom-left pill, not a full-width bar —
     only a slim clearance is needed. */
  padding-bottom: 2rem;
}

body.pcm-app .workspace {
  --pcm-col-lesson: clamp(16rem, 21vw, 19.375rem);
  --pcm-col-controls: 17.5rem;
  --pcm-rail-size: 2.75rem;
  position: relative;
  display: grid;
  grid-template-columns: var(--pcm-col-lesson) minmax(0, 1fr) var(--pcm-col-controls);
  grid-template-areas: "lesson stage controls" "lesson plots controls";
  align-items: start;
  gap: var(--pcm-gap);
  inline-size: 100%;
  max-inline-size: var(--pcm-content-width);
  margin-inline: auto;
  padding: var(--pcm-gap) var(--pcm-page-pad);
}

body.pcm-app .workspace > * {
  min-inline-size: 0;
}

body.pcm-app .workspace[data-mode="explore"] {
  grid-template-columns: minmax(0, 1fr) var(--pcm-col-controls);
  grid-template-areas: "stage controls" "plots controls";
}

/* ── R6 edge rails: a collapsed side panel becomes a slim vertical rail; the
   scene column absorbs the reclaimed width. ── */
body.pcm-app .workspace.lesson-collapsed {
  --pcm-col-lesson: var(--pcm-rail-size);
}

body.pcm-app .workspace.controls-collapsed {
  --pcm-col-controls: var(--pcm-rail-size);
}

body.pcm-app .edge-rail {
  display: none;
  position: sticky;
  inset-block-start: 1rem;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
  inline-size: var(--pcm-rail-size);
  min-block-size: 14rem;
  padding: 0.75rem 0.25rem;
  border: 1px solid var(--pcm-border);
  border-radius: var(--pcm-radius);
  background: var(--pcm-surface);
  color: var(--pcm-muted);
  font-family: var(--pcm-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  cursor: pointer;
}

body.pcm-app #rail-lesson {
  grid-area: lesson;
}

body.pcm-app #rail-controls {
  grid-area: controls;
}

body.pcm-app .workspace.lesson-collapsed #rail-lesson:not([hidden]),
body.pcm-app .workspace.controls-collapsed #rail-controls {
  display: flex;
}

body.pcm-app .edge-rail:hover {
  border-color: var(--pcm-accent);
  background: var(--pcm-surface-raised);
  color: var(--pcm-text);
}

body.pcm-app .edge-rail .rail-text {
  writing-mode: vertical-rl;
  text-transform: uppercase;
}

body.pcm-app .edge-rail .rail-icon {
  color: var(--pcm-accent-ink);
  font-size: 1rem;
}

body.pcm-app .workspace.lesson-collapsed .lesson-panel,
body.pcm-app .workspace.controls-collapsed .controls-panel {
  display: none;
}

/* Hover peek: the panel overlays the canvas next to its rail — an absolutely
   positioned grid item resolves against its (rail-width) grid area, so the
   grid never reflows and the renderer never resizes. */
body.pcm-app .workspace.lesson-collapsed.lesson-peek .lesson-panel,
body.pcm-app .workspace.controls-collapsed.controls-peek .controls-panel {
  display: block;
  position: absolute;
  inset-block-start: 0;
  z-index: 45;
  max-block-size: min(38rem, calc(100dvh - 9rem));
  overflow: auto;
  border-color: var(--pcm-border-strong);
  background: var(--pcm-bg);
  box-shadow: 0 1rem 3rem var(--pcm-shadow);
}

body.pcm-app .workspace.lesson-collapsed.lesson-peek .lesson-panel {
  inset-inline-start: calc(100% + 0.5rem);
  inline-size: clamp(16rem, 21vw, 19.375rem);
}

body.pcm-app .workspace.controls-collapsed.controls-peek .controls-panel {
  inset-inline-end: calc(100% + 0.5rem);
  inline-size: 17.5rem;
}

body.pcm-app .panel-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-block-end: 0.5rem;
}

/* Panel titles read as plate headers: uppercase mono micro-labels. */
body.pcm-app .panel-chrome h2 {
  margin: 0;
  color: var(--pcm-muted);
  font-family: var(--pcm-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

body.pcm-app .lesson-panel .panel-chrome {
  justify-content: flex-end;
  margin-block-end: 0;
}

body.pcm-app .panel-collapse {
  flex: 0 0 auto;
  min-inline-size: 2rem;
  min-block-size: 2rem;
  padding: 0.1rem 0.5rem;
  border-color: var(--pcm-border);
  background: transparent;
  color: var(--pcm-muted);
}

body.pcm-app :is(.lesson-panel, .stage-panel, .controls-panel, .plots-panel) {
  min-inline-size: 0;
  border: 1px solid var(--pcm-border);
  border-radius: var(--pcm-radius);
  background: var(--pcm-surface);
}

body.pcm-app :is(.lesson-panel, .controls-panel) {
  position: sticky;
  inset-block-start: 1rem;
  align-self: start;
  min-block-size: 0;
  max-block-size: max(0px, calc(100dvh - var(--pcm-transport-height, 100px) - 130px));
  overflow: auto;
  scrollbar-gutter: stable;
}

body.pcm-app .lesson-panel {
  grid-area: lesson;
  padding: 1.125rem;
}

body.pcm-app .controls-panel {
  grid-area: controls;
  padding: 1.125rem;
}

body.pcm-app .stage-panel {
  position: relative;
  display: flex;
  grid-area: stage;
  flex-direction: column;
  align-self: start;
  min-block-size: 0;
  overflow: hidden;
  /* R9: the dark scene is a journal plate — frame it with a firm ink rule. */
  border-color: var(--pcm-border-strong);
}

/* R7: the heading floats over the top of the scene on a scrim so the canvas
   owns the full column height — the original v5 full-viewport read. */
body.pcm-app .stage-heading {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.875rem 1.125rem 1.25rem;
  background: linear-gradient(to bottom, rgb(10 14 20 / 88%), rgb(10 14 20 / 55%) 62%, transparent);
  pointer-events: none;
}

body.pcm-app .stage-heading :is(a, button, input, select, label) {
  pointer-events: auto;
}

/* The heading is an instrument label on the plate: uppercase mono. */
body.pcm-app .stage-heading :is(h1, h2, h3) {
  margin: 0;
  font-family: var(--pcm-font-mono);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

body.pcm-app .stage-heading p {
  margin: 0.25rem 0 0;
  color: var(--pcm-muted);
  font-size: 0.9375rem;
}

body.pcm-app .field-stage {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  inline-size: 100%;
  min-inline-size: 0;
  /* R7: heading and vitals are overlays, the transport is a floating pill —
     the canvas takes the full column height. The instrument scales with
     canvas height, so this is what makes it actually read BIGGER. */
  block-size: clamp(17.5rem, calc(100dvh - 10.5rem), 62rem);
  min-block-size: 0;
  padding: 0;
  background: var(--pcm-stage-bg);
}

body.pcm-app .field-stage > canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: 100%;
  max-block-size: 100%;
}

body.pcm-app .field-stage > :is(.empty-state, .error-state) {
  position: relative;
  z-index: 1;
  margin: 1.25rem;
}

/* ── R6 corner camera cluster: ⛶ Stage always visible; 🎥 expands the display
   checkboxes and camera buttons as an overlay on the canvas. ── */
body.pcm-app .scene-cluster {
  position: absolute;
  /* R7: cleared above the overlaid vitals strip. */
  inset-block-end: 4.4rem;
  inset-inline-end: 0.6rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}

body.pcm-app .cluster-buttons {
  display: flex;
  gap: 0.4rem;
}

body.pcm-app .scene-cluster .button {
  min-block-size: 2.25rem;
  padding: 0.3rem 0.6rem;
  background: var(--pcm-glass);
}

body.pcm-app .camera-pop {
  display: grid;
  gap: 0.25rem;
  inline-size: 15rem;
  max-inline-size: calc(100vw - 2rem);
  max-block-size: min(24rem, calc(100dvh - 8rem));
  overflow: auto;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--pcm-border-strong);
  border-radius: var(--pcm-radius-small);
  background: var(--pcm-glass-strong);
  color: var(--pcm-text-secondary);
  font-size: 0.9375rem;
  box-shadow: 0 0.75rem 2rem var(--pcm-shadow);
}

body.pcm-app .camera-pop .control-check {
  min-block-size: 2.25rem;
  padding-block: 0.25rem;
}

body.pcm-app .camera-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem;
}

body.pcm-app .camera-grid .button {
  min-block-size: 2.25rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.875rem;
}

body.pcm-app .plot-toolbar label {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  min-block-size: 2.75rem;
  color: var(--pcm-text-secondary);
  font-size: 0.9375rem;
}

body.pcm-app .plots-panel {
  grid-area: plots;
  container: pcm-plots / inline-size;
  padding: 1.125rem;
}

body.pcm-app .metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

@container pcm-plots (min-width: 48rem) {
  body.pcm-app .metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@container pcm-plots (max-width: 18rem) {
  body.pcm-app .metric-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

body.pcm-app .metric-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-inline-size: 0;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--pcm-border);
  border-block-start: 2px solid var(--metric-color, var(--pcm-border-strong));
  border-radius: var(--pcm-radius-small);
  background: var(--pcm-surface-inset);
}

body.pcm-app .metric-label {
  margin: 0;
  color: var(--pcm-text-secondary);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
}

body.pcm-app .metric-value {
  margin: 0.125rem 0;
  color: var(--metric-color, var(--pcm-text));
  font-family: var(--pcm-font-mono);
  font-size: 1.625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

body.pcm-app .metric-value :is(small, sub) {
  color: var(--pcm-muted);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: normal;
}

body.pcm-app :is(.metric-note, .metric-reference) {
  margin: 0;
  color: var(--pcm-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

body.pcm-app .metric-reference {
  margin-block-start: 0.25rem;
}

/* ── R3 vitals strip: the single live gauge presentation (bands + needles +
   excursions); the metric cards above keep numbers and definitions only. ── */
body.pcm-app .vitals-strip {
  /* R7: overlays the bottom edge of the scene instead of stacking below it. */
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.875rem;
  padding: 0.625rem 0.875rem;
  border-block-start: 1px solid var(--pcm-border);
  background: var(--pcm-glass);
  backdrop-filter: blur(6px);
}

body.pcm-app .vital-gauge {
  flex: 1 1 9rem;
  min-inline-size: 8.5rem;
  max-inline-size: 100%;
}

body.pcm-app .vital-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--pcm-text-secondary);
  font-size: 0.8125rem;
  line-height: 1.35;
}

body.pcm-app .vital-label b {
  color: var(--pcm-text);
  font-weight: 600;
}

body.pcm-app .vital-value-row {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  font-family: var(--pcm-font-mono);
  font-size: 0.8125rem;
}

body.pcm-app .vital-arrow {
  min-inline-size: 0.75em;
  color: var(--pcm-rose);
  font-weight: 700;
}

body.pcm-app .vital-track {
  position: relative;
  display: block;
  block-size: 0.5rem;
  margin-block-start: 0.3rem;
  border-radius: 0.25rem;
  background: var(--pcm-surface-raised);
}

body.pcm-app .vital-band {
  position: absolute;
  inset-block: 0;
  border-radius: inherit;
  background: var(--pcm-green-surface);
  box-shadow: inset 0 0 0 1px var(--pcm-green);
}

body.pcm-app .vital-needle {
  position: absolute;
  inset-block: -0.2rem;
  inline-size: 2px;
  border-radius: 1px;
  background: var(--pcm-text);
  transform: translateX(-50%);
  transition: left 0.18s linear;
}

body.pcm-app .vital-gauge[data-hot="true"] .vital-needle {
  inline-size: 3px;
  background: var(--pcm-rose);
}

@media (prefers-reduced-motion: no-preference) {
  body.pcm-app .vital-gauge[data-hot="true"] .vital-track {
    animation: pcm-vital-pulse 0.9s ease-in-out infinite alternate;
  }
}

@keyframes pcm-vital-pulse {
  from { box-shadow: 0 0 0 0 transparent; }
  to { box-shadow: 0 0 0.5rem 0.125rem var(--pcm-alarm-glow); }
}

body.pcm-app .vitals-info {
  flex: 0 0 auto;
  min-inline-size: 2rem;
  min-block-size: 2rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--pcm-border-strong);
  border-radius: 50%;
  background: var(--pcm-surface-inset);
  color: var(--pcm-text-secondary);
  font-size: 0.9375rem;
  cursor: pointer;
}

body.pcm-app .vitals-info[aria-expanded="true"] {
  border-color: var(--pcm-teal);
  color: var(--pcm-teal);
}

/* R6 metrics drawer toggle: the detail cards live behind this, below the strip. */
body.pcm-app .vitals-metrics {
  flex: 0 0 auto;
  min-block-size: 2rem;
  padding: 0.1rem 0.6rem;
  border: 1px solid var(--pcm-border-strong);
  border-radius: 999px;
  background: var(--pcm-surface-inset);
  color: var(--pcm-text-secondary);
  font-family: var(--pcm-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.pcm-app .vitals-metrics[aria-expanded="true"] {
  border-color: var(--pcm-teal);
  color: var(--pcm-teal);
}

body.pcm-app .vitals-legend {
  /* R7: pops above the overlaid vitals strip rather than stacking in flow. */
  position: absolute;
  inset-inline: 0.875rem;
  inset-block-end: 4.5rem;
  z-index: 4;
  max-block-size: min(24rem, 60%);
  overflow: auto;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--pcm-border-strong);
  border-radius: var(--pcm-radius-small);
  background: var(--pcm-glass-strong);
  color: var(--pcm-text-secondary);
  font-size: 0.875rem;
  line-height: 1.6;
  box-shadow: 0 0.75rem 2rem var(--pcm-shadow);
}

body.pcm-app .vitals-legend p {
  margin: 0.35rem 0;
}

body.pcm-app .vitals-legend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* ── R3 causal-chain ribbon: bottom-centre overlay inside the scene ── */
body.pcm-app .causal-ribbon {
  position: absolute;
  /* R7: cleared above the overlaid vitals strip. */
  inset-block-end: 4.4rem;
  inset-inline-start: 50%;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.2rem 0.25rem;
  max-inline-size: min(96%, 47.5rem);
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--pcm-border);
  border-radius: var(--pcm-radius-small);
  background: var(--pcm-glass-soft);
  font-size: 0.6875rem;
  pointer-events: none;
  transform: translateX(-50%);
}

body.pcm-app .rnode {
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--pcm-border);
  border-radius: 0.3rem;
  background: var(--pcm-surface-inset);
  color: var(--pcm-muted);
  white-space: nowrap;
}

body.pcm-app .rnode.is-lit {
  border-color: var(--pcm-teal);
  background: var(--pcm-teal);
  color: var(--pcm-stage-bg);
  font-weight: 600;
}

body.pcm-app .rarrow {
  color: var(--pcm-reference-fill);
}

/* ── R8b watch hints: moving a dial pops a transient chip naming the scene
   element that dial visibly drives (ported from the original build's WATCH
   toast). Top-centre of the scene, below the stage-heading scrim; the
   bottom-right status toast and bottom-edge vitals overlay are never touched,
   so stage mode needs no suppression rule. ── */
body.pcm-app .watch-toast {
  position: absolute;
  inset-block-start: 4.5rem;
  inset-inline-start: 50%;
  z-index: 3;
  max-inline-size: min(92%, 37rem);
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--pcm-border-strong);
  border-radius: var(--pcm-radius-small);
  background: var(--pcm-glass);
  backdrop-filter: blur(6px);
  color: var(--pcm-text-secondary);
  font-size: 0.8125rem;
  line-height: 1.45;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 200ms ease;
  pointer-events: none;
}

body.pcm-app .watch-toast.is-visible {
  opacity: 1;
}

body.pcm-app .watch-toast b {
  color: var(--pcm-amber);
}

body.pcm-app .plot-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-block: 1rem 0.75rem;
  color: var(--pcm-text-secondary);
  font-size: 0.9375rem;
}

body.pcm-app .plot-canvas {
  display: block;
  flex-basis: 100%;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  block-size: clamp(13rem, 22vw, 18rem);
  border: 1px solid var(--pcm-border);
  border-radius: var(--pcm-radius-small);
  background: var(--pcm-stage-bg);
}

body.pcm-app .signal-map {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
  margin-block: 1rem 0.5rem;
  padding: 0;
  list-style: none;
}

body.pcm-app .signal-node {
  display: flex;
  flex: 1 1 8rem;
  flex-direction: column;
  gap: 0.15rem;
  min-inline-size: 0;
  margin: 0;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--pcm-border-strong);
  border-radius: var(--pcm-radius-small);
  background: var(--pcm-surface-inset);
  color: var(--pcm-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.5;
  transition: none;
}

body.pcm-app .signal-node.is-active {
  padding: calc(0.625rem - 1px) calc(0.75rem - 1px);
  border-width: 2px;
  border-color: var(--signal-color, var(--pcm-accent-ink));
}

body.pcm-app .signal-note {
  margin: 0.5rem 0 0;
  color: var(--pcm-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ── R6 playback pill: a compact bottom-left float replaces the full-width
   transport strip; status copy is a transient toast above it. ── */
body.pcm-app .transport {
  position: fixed;
  inset-inline-start: max(1rem, env(safe-area-inset-left));
  inset-block-end: calc(0.75rem + env(safe-area-inset-bottom));
  z-index: 41;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  min-inline-size: 0;
  max-inline-size: calc(100vw - 2rem);
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--pcm-border-strong);
  border-radius: 999px;
  background: var(--pcm-glass);
  box-shadow: 0 0.5rem 1.5rem var(--pcm-shadow);
}

body.pcm-app .transport > *,
body.pcm-app .transport :is(input, select) {
  min-inline-size: 0;
  max-inline-size: 100%;
}

body.pcm-app .transport :is(button, .button) {
  min-block-size: 2.25rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}

body.pcm-app .transport select {
  min-block-size: 2.25rem;
  padding-block: 0.25rem;
  border-radius: 999px;
}

body.pcm-app .transport label {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  color: var(--pcm-text-secondary);
  font-family: var(--pcm-font-mono);
  font-size: 0.875rem;
}

body.pcm-app .status-toast {
  position: fixed;
  inset-inline-start: auto;
  inset-inline-end: max(1rem, env(safe-area-inset-right));
  inset-block-end: calc(0.75rem + env(safe-area-inset-bottom));
  z-index: 44;
  max-inline-size: min(36rem, calc(100vw - 2rem));
  margin: 0;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--pcm-border-strong);
  border-radius: var(--pcm-radius-small);
  background: var(--pcm-surface-raised);
  color: var(--pcm-text);
  font-size: 0.9375rem;
  line-height: 1.5;
  box-shadow: 0 0.75rem 2rem var(--pcm-shadow);
  opacity: 0;
  transform: translateY(0.35rem);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
}

body.pcm-app .status-toast.is-visible {
  opacity: 1;
  transform: none;
}

body.pcm-app .time-readout {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  min-inline-size: 0;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--pcm-border);
  border-radius: 999px;
  background: var(--pcm-surface-inset);
  color: var(--pcm-text-secondary);
  font-family: var(--pcm-font-mono);
  font-size: 0.9375rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

body.pcm-app .time-readout :is(output, strong) {
  color: var(--pcm-text);
  font-weight: 600;
}

:where(body.pcm-app, body.guide-page) .chapter-label {
  display: block;
  margin: 0 0 0.65rem;
  color: var(--pcm-accent-ink);
  font-family: var(--pcm-font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-transform: uppercase;
}

body.pcm-app .lesson-picker {
  display: grid;
  gap: 0.5rem;
  margin-block: 0.875rem 1rem;
}

body.pcm-app .lesson-picker > :is(label, .lesson-progress) {
  margin: 0;
}

body.pcm-app #continue-explore {
  margin-block-end: 1rem;
}

body.pcm-app .lesson-title {
  margin: 0 0 0.75rem;
  font-family: var(--pcm-font-serif);
  font-size: 1.625rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

body.pcm-app .lesson-progress {
  display: block;
  margin: 0.75rem 0 1rem;
  color: var(--pcm-muted);
  font-family: var(--pcm-font-mono);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
}

body.pcm-app progress.lesson-progress {
  inline-size: 100%;
  block-size: 0.375rem;
  border: 0;
  border-radius: 1rem;
  background: var(--pcm-border);
  accent-color: var(--pcm-form-accent);
}

body.pcm-app progress.lesson-progress::-webkit-progress-bar {
  border-radius: 1rem;
  background: var(--pcm-border);
}

body.pcm-app progress.lesson-progress::-webkit-progress-value {
  border-radius: 1rem;
  background: var(--pcm-form-accent);
}

body.pcm-app progress.lesson-progress::-moz-progress-bar {
  border-radius: 1rem;
  background: var(--pcm-form-accent);
}

body.pcm-app :is(.lesson-copy, .lesson-section, .task-card) {
  color: var(--pcm-text-secondary);
  font-family: var(--pcm-font-serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
}

body.pcm-app .lesson-section {
  margin-block-start: 1.25rem;
}

body.pcm-app :is(.lesson-section, .task-card) :is(h2, h3) {
  margin-block-end: 0.55rem;
  font-size: 0.9375rem;
}

body.pcm-app .prediction-options {
  display: grid;
  gap: 0.5rem;
  min-inline-size: 0;
  margin: 0.65rem 0 0.9rem;
  padding: 0;
  border: 0;
}

body.pcm-app .prediction-options legend {
  margin-block-end: 0.5rem;
  color: var(--pcm-text);
  font-family: var(--pcm-font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
}

body.pcm-app .prediction-options > :is(button, label) {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.55rem;
  inline-size: 100%;
  min-block-size: 2.75rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--pcm-border-strong);
  border-radius: var(--pcm-radius-small);
  background: var(--pcm-surface-inset);
  color: var(--pcm-text-secondary);
  font-family: var(--pcm-font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: start;
  cursor: pointer;
}

body.pcm-app .prediction-options > :is([aria-pressed="true"], label:has(input:checked)) {
  border-color: var(--pcm-accent);
  background: var(--pcm-accent-surface);
  color: var(--pcm-text);
}

/* R3 taskbox: the distinct goal container below the lesson content. In normal
   flow on purpose — a sticky overlay swallowed clicks on buttons beneath it. */
body.pcm-app .task-card {
  margin-block: 1rem 0;
  padding: 1rem;
  border: 1px solid var(--pcm-border-strong);
  border-inline-start: 3px solid var(--pcm-accent);
  border-radius: var(--pcm-radius-small);
  background: var(--pcm-surface-raised);
}

body.pcm-app .task-card.is-complete {
  border-color: var(--pcm-green);
  background: var(--pcm-green-surface);
}

body.pcm-app .task-card.is-complete #goal-status {
  color: var(--pcm-green);
}

body.pcm-app .task-card > :last-child {
  margin-block-end: 0;
}

body.pcm-app .task-hint {
  margin-block: 0.75rem 0;
  color: var(--pcm-text-secondary);
  font-family: var(--pcm-font-serif);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.65;
}

body.pcm-app .task-hint > summary {
  display: inline-block;
  min-block-size: 2rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--pcm-violet);
  border-radius: var(--pcm-radius-small);
  background: var(--pcm-violet-surface);
  color: var(--pcm-text);
  font-family: var(--pcm-font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
}

body.pcm-app .task-hint[open] > summary {
  border-block-end-color: transparent;
  border-radius: var(--pcm-radius-small) var(--pcm-radius-small) 0 0;
}

body.pcm-app .task-hint > p {
  margin: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--pcm-violet);
  border-radius: 0 var(--pcm-radius-small) var(--pcm-radius-small) var(--pcm-radius-small);
}

body.pcm-app .lesson-navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-block-start: 1.25rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--pcm-border);
}

body.pcm-app .lesson-navigation :is(button, .button) {
  flex: 1 1 auto;
}

:where(body.pcm-app, body.guide-page) .evidence-list {
  display: grid;
  gap: 0.75rem;
  margin-block: 1rem;
  padding: 0;
  list-style: none;
}

:where(body.pcm-app, body.guide-page) .evidence-card {
  min-inline-size: 0;
  margin: 0;
  padding: 0.875rem;
  border: 1px solid var(--pcm-border);
  border-radius: var(--pcm-radius-small);
  background: var(--pcm-surface-inset);
  color: var(--pcm-text-secondary);
  font-family: var(--pcm-font-serif);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.65;
}

:where(body.pcm-app, body.guide-page) .evidence-card :is(cite, small) {
  color: var(--pcm-muted);
  font-family: var(--pcm-font-sans);
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 500;
}

:where(body.pcm-app, body.guide-page) .evidence-card > :last-child {
  margin-block-end: 0;
}

:where(body.pcm-app, body.guide-page) .guide-mark {
  display: block;
  flex: 0 0 auto;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  color: var(--pcm-brain-color);
  object-fit: contain;
}

:where(body.pcm-app, body.guide-page) :is(.guide-mark, .brand-mark):not(img):not(svg) {
  background-color: currentColor;
  -webkit-mask: url("./pcm-brain.svg") center / contain no-repeat;
  mask: url("./pcm-brain.svg") center / contain no-repeat;
}

:where(body.pcm-app, body.guide-page) .mascot-prompt {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-block: 0.9rem;
  padding: 0.875rem;
  border: 1px solid var(--pcm-border);
  border-radius: var(--pcm-radius-small);
  background: var(--pcm-surface-inset);
  color: var(--pcm-text-secondary);
  font-family: var(--pcm-font-serif);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.65;
}

:where(body.pcm-app, body.guide-page) .mascot-prompt > :not(.guide-mark) {
  min-inline-size: 0;
}

:where(body.pcm-app, body.guide-page) .mascot-prompt p:last-child {
  margin-block-end: 0;
}

body.pcm-app .control-group {
  min-inline-size: 0;
  margin: 0;
}

/* R8: lesson scoping marks instead of removes — the scoped group carries the
   accent, off-scope rows stay visible but dimmed and locked. */
body.pcm-app .control-group.lesson-scope > summary {
  border-inline-start: 3px solid var(--pcm-accent, #d97757);
  padding-inline-start: 0.6rem;
  color: var(--pcm-text);
}

body.pcm-app .control-row.off-scope {
  opacity: 0.5;
}

/* R8b spotlight (ported .tour-spot): the per-row layer on top of the group's
   lesson-scope accent — the rows the active lesson or clinic case wants
   touched pulse with an accent outline until first input or lesson/case exit.
   Reduced motion holds a static outline instead of the pulse. */
body.pcm-app .control-row.control-spot {
  outline: 1px solid var(--pcm-accent-ink);
  outline-offset: -1px;
  border-radius: 0.25rem;
  animation: pcm-spot-pulse 1.2s ease-in-out infinite alternate;
}

@keyframes pcm-spot-pulse {
  from { outline-color: var(--pcm-accent-ink); }

  to { outline-color: rgb(217 119 87 / 30%); }
}

@media (prefers-reduced-motion: reduce) {
  body.pcm-app .control-row.control-spot {
    outline-color: var(--pcm-accent-ink);
    animation: none;
  }
}

body.pcm-app .control-row.off-scope .control-help {
  display: none;
}

body.pcm-app .control-group + .control-group {
  border-block-start: 1px solid var(--pcm-border);
}

body.pcm-app .control-group > summary {
  display: list-item;
  min-block-size: 2.75rem;
  padding-block: 0.875rem;
  color: var(--pcm-text);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
}

body.pcm-app .control-group > summary::marker {
  color: var(--pcm-muted);
}

body.pcm-app .control-group[open] > summary {
  margin-block-end: 0.25rem;
  border-block-end: 1px solid var(--pcm-border);
}

body.pcm-app .control-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.5rem;
  align-items: center;
  gap: 0.15rem 0.5rem;
  padding-block: 0.75rem;
}

body.pcm-app .control-row + .control-row {
  border-block-start: 1px solid var(--pcm-border);
}

body.pcm-app .control-row > label {
  min-inline-size: 0;
  color: var(--pcm-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.5;
}

body.pcm-app .control-value {
  inline-size: 100%;
  min-inline-size: 0;
  text-align: end;
}

body.pcm-app .control-row > :is(input[type="range"], .control-help, .control-check) {
  grid-column: 1 / -1;
}

body.pcm-app .control-help {
  margin: 0.125rem 0 0.25rem;
  color: var(--pcm-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

body.pcm-app .control-check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  min-block-size: 2.75rem;
  padding-block: 0.5rem;
  color: var(--pcm-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.5;
  cursor: pointer;
}

:where(body.pcm-app, body.guide-page) :is(.reference-notice, .status-note, .scope-note) {
  margin-block: 0.75rem;
  color: var(--pcm-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
}

:where(body.pcm-app, body.guide-page) .reference-notice {
  padding: 0.75rem 0.9rem;
  border-inline-start: 2px solid var(--pcm-amber);
  border-radius: 0.25rem;
  background: var(--pcm-amber-surface);
}

:where(body.pcm-app, body.guide-page) .scope-note {
  padding: 1rem;
  border: 1px solid var(--pcm-border);
  border-inline-start: 3px solid var(--pcm-violet);
  border-radius: var(--pcm-radius-small);
  background: var(--pcm-surface-inset);
  font-family: var(--pcm-font-serif);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.7;
}

:where(body.pcm-app, body.guide-page) :is(.empty-state, .error-state) {
  min-inline-size: 0;
  padding: 1.25rem;
  border: 1px solid var(--pcm-border-strong);
  border-radius: var(--pcm-radius-small);
  background: var(--pcm-surface);
  color: var(--pcm-text-secondary);
  font-size: 1rem;
  line-height: 1.65;
}

:where(body.pcm-app, body.guide-page) .error-state {
  border-color: var(--pcm-rose);
}

:where(body.pcm-app, body.guide-page) .error-state :is(h2, h3, strong) {
  color: var(--pcm-rose);
}

:where(body.pcm-app, body.guide-page) .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  max-inline-size: 100%;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--pcm-border);
  border-radius: 0.375rem;
  background: var(--pcm-surface-inset);
  color: var(--pcm-text-secondary);
  font-family: var(--pcm-font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
}

:where(body.pcm-app, body.guide-page) .muted {
  color: var(--pcm-muted);
}

:where(body.pcm-app, body.guide-page) .sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

:where(body.pcm-app, body.guide-page) .skip-link {
  position: fixed;
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
  z-index: 100;
  max-inline-size: calc(100% - 2rem);
  padding: 0.65rem 1rem;
  border: 2px solid var(--pcm-focus);
  border-radius: var(--pcm-radius-small);
  background: var(--pcm-surface);
  color: var(--pcm-text);
  font-family: var(--pcm-font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  transform: translateY(calc(-100% - 2rem));
}

:where(body.pcm-app, body.guide-page) .skip-link:focus {
  transform: none;
}

:where(body.pcm-app, body.guide-page) :is(dialog.modal, dialog.methods-dialog) {
  inline-size: min(58rem, calc(100% - 2rem));
  max-inline-size: calc(100% - 2rem);
  max-block-size: calc(100vh - 2rem);
  max-block-size: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  border: 1px solid var(--pcm-border-strong);
  border-radius: var(--pcm-radius);
  background: var(--pcm-bg);
  color: var(--pcm-text);
  box-shadow: 0 1.5rem 4rem var(--pcm-shadow);
}

:where(body.pcm-app, body.guide-page) :is(dialog.modal, dialog.methods-dialog)[open] {
  display: flex;
  flex-direction: column;
}

:where(body.pcm-app, body.guide-page) dialog.methods-dialog {
  inline-size: min(70rem, calc(100% - 2rem));
}

:where(body.pcm-app, body.guide-page) :is(dialog.modal, dialog.methods-dialog)::backdrop {
  /* warm ink scrim over the paper, not a cold black */
  background: rgb(20 18 15 / 55%);
}

:where(body.pcm-app, body.guide-page) .modal-header {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.25rem;
  border-block-end: 1px solid var(--pcm-border);
}

:where(body.pcm-app, body.guide-page) .modal-header :is(h1, h2) {
  margin: 0;
  font-size: 1.375rem;
}

:where(body.pcm-app, body.guide-page) .modal-close {
  flex: 0 0 auto;
  min-inline-size: 2.75rem;
}

:where(body.pcm-app, body.guide-page) .modal-body {
  flex: 1 1 auto;
  min-inline-size: 0;
  min-block-size: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 1.25rem;
  color: var(--pcm-text-secondary);
  font-family: var(--pcm-font-serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
}

:where(body.pcm-app, body.guide-page) .modal-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  padding: 1rem 1.25rem;
  border-block-start: 1px solid var(--pcm-border);
}

:where(body.pcm-app, body.guide-page) .methods-section {
  margin-block: 0 1.75rem;
}

:where(body.pcm-app, body.guide-page) .methods-section + .methods-section {
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--pcm-border);
}

:where(body.pcm-app, body.guide-page) .formula {
  display: block;
  max-inline-size: 100%;
  overflow-x: auto;
  margin-block: 1rem;
  padding: 1rem;
  border: 1px solid var(--pcm-border);
  border-radius: var(--pcm-radius-small);
  background: var(--pcm-surface-inset);
  color: var(--pcm-text-secondary);
  font-family: var(--pcm-font-mono);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.7;
  white-space: pre-wrap;
  tab-size: 2;
}

:where(body.pcm-app, body.guide-page) .formula .katex-display {
  margin: 0.25rem 0;
}

:where(body.pcm-app, body.guide-page) :is(.parameter-table, .data-table, .guide-content table) {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  overflow-x: auto;
  margin-block: 1rem;
  border-collapse: collapse;
  border-spacing: 0;
  color: var(--pcm-text-secondary);
  font-family: var(--pcm-font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.6;
}

:where(body.pcm-app, body.guide-page) :is(.parameter-table, .data-table, .guide-content table) :is(th, td) {
  min-inline-size: 7.5rem;
  padding: 0.65rem 0.75rem;
  border-block-end: 1px solid var(--pcm-border);
  text-align: start;
  vertical-align: top;
}

:where(body.pcm-app, body.guide-page) :is(.parameter-table, .data-table, .guide-content table) th {
  background: var(--pcm-surface-raised);
  color: var(--pcm-text);
  font-weight: 600;
}

:where(body.pcm-app, body.guide-page) :is(.parameter-table, .data-table, .guide-content table) th[scope="row"] {
  background: transparent;
}

:where(body.pcm-app, body.guide-page) :is(.parameter-table, .data-table, .guide-content table) caption {
  margin-block-end: 0.65rem;
  color: var(--pcm-muted);
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: start;
}

:where(body.pcm-app, body.guide-page) .data-table :is(td, th) {
  font-variant-numeric: tabular-nums;
}

:where(body.pcm-app, body.guide-page) .case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 0.75rem;
  margin-block: 1rem;
}

:where(body.pcm-app, body.guide-page) .case-grid > .case-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;
  min-inline-size: 0;
  min-block-size: 9rem;
  padding: 1rem;
  border: 1px solid var(--pcm-border-strong);
  border-radius: var(--pcm-radius-small);
  background: var(--pcm-surface-inset);
  text-align: start;
}

:where(body.pcm-app, body.guide-page) .case-grid > button.case-card:where(:hover:not(:disabled)) {
  border-color: var(--pcm-accent);
  background: var(--pcm-surface-raised);
}

:where(body.pcm-app, body.guide-page) .case-card :is(h3, strong) {
  margin: 0;
  font-size: 1rem;
}

:where(body.pcm-app, body.guide-page) .case-card p {
  margin: 0;
  color: var(--pcm-text-secondary);
  font-family: var(--pcm-font-serif);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.65;
}

:where(body.pcm-app, body.guide-page) .badge {
  display: inline-flex;
  align-items: center;
  max-inline-size: 100%;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--pcm-border-strong);
  border-radius: var(--pcm-radius-small);
  background: transparent;
  color: var(--pcm-text-secondary);
  font-family: var(--pcm-font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

:where(body.pcm-app, body.guide-page) .badge-measured {
  border-color: var(--pcm-teal);
  background: var(--pcm-teal-surface);
  color: var(--pcm-teal);
}

:where(body.pcm-app, body.guide-page) .badge-theory {
  border-color: var(--pcm-violet);
  background: var(--pcm-violet-surface);
  color: var(--pcm-violet);
}

:where(body.pcm-app, body.guide-page) .badge-model {
  border-color: var(--pcm-amber);
  background: var(--pcm-amber-surface);
  color: var(--pcm-amber);
}

body.guide-page {
  font-family: var(--pcm-font-serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
}

body.guide-page .guide-content {
  inline-size: 100%;
  max-inline-size: 50rem;
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 4rem) var(--pcm-page-pad) clamp(3rem, 8vw, 6rem);
}

body.guide-page .guide-content h1 {
  max-inline-size: 22ch;
  margin: 0 0 1.25rem;
  font-family: var(--pcm-font-serif);
  font-size: clamp(2rem, 3.7vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

body.guide-page .guide-content h2 {
  margin: 2.5rem 0 0.85rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--pcm-border);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.35;
}

body.guide-page .guide-content h3 {
  margin: 1.5rem 0 0.65rem;
  font-size: 1.0625rem;
  line-height: 1.4;
}

body.guide-page .guide-content p {
  margin-block-end: 1rem;
}

body.guide-page .guide-content .lead {
  color: var(--pcm-text-secondary);
  font-size: 1.0625rem;
  line-height: 1.75;
}

body.guide-page .guide-content :is(ul, ol) {
  margin-block: 1rem 1.25rem;
  padding-inline-start: 1.4rem;
}

body.guide-page .guide-content li + li {
  margin-block-start: 0.5rem;
}

body.guide-page .guide-content li::marker {
  color: var(--pcm-muted);
}

body.guide-page .guide-content blockquote {
  margin: 1.5rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-inline-start: 2px solid var(--pcm-violet);
  color: var(--pcm-text-secondary);
  font-style: italic;
}

body.guide-page .guide-content blockquote p:last-child {
  margin-block-end: 0;
}

body.guide-page .guide-content .cta {
  margin-block: 0.5rem 1.25rem;
  padding: 0.75rem 1rem;
}

body.guide-page .guide-content footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-block-start: 3rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--pcm-border);
  color: var(--pcm-muted);
  font-family: var(--pcm-font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
}

@media (max-width: 1100px) {
  body.pcm-app .workspace {
    grid-template-columns: var(--pcm-col-side, 17.5rem) minmax(0, 1fr);
    grid-template-areas: "lesson stage" "controls plots";
  }

  body.pcm-app .workspace.lesson-collapsed.controls-collapsed {
    --pcm-col-side: var(--pcm-rail-size);
  }
}

@media (max-width: 760px) {
  :where(body.pcm-app, body.guide-page) .app-header {
    gap: 0.75rem;
    padding-block: 1rem;
  }

  :where(body.pcm-app, body.guide-page) .app-nav {
    order: 3;
    flex: 1 1 100%;
    inline-size: 100%;
  }

  :where(body.pcm-app, body.guide-page) .app-nav :is(a, button) {
    flex: 1 1 auto;
  }

  :where(body.pcm-app, body.guide-page) .header-status {
    flex: 1 1 10rem;
    margin-inline-start: 0;
  }

  body.pcm-app .workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "lesson" "stage" "controls" "plots";
    gap: 0.875rem;
    padding-block: 1rem;
  }

  body.pcm-app .workspace[data-mode="explore"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stage" "controls" "plots";
  }

  body.pcm-app :is(.lesson-panel, .controls-panel, .plots-panel) {
    padding: 1rem;
  }

  body.pcm-app :is(.lesson-panel, .controls-panel) {
    position: static;
    inset-block-start: auto;
    max-block-size: none;
    overflow: visible;
    scrollbar-gutter: auto;
  }

  body.pcm-app .controls-panel {
    display: block;
  }

  body.pcm-app .stage-panel {
    min-block-size: 0;
  }

  body.pcm-app .field-stage {
    block-size: clamp(17.5rem, 44dvh, 24rem);
    min-block-size: 0;
  }

  /* R7 mobile: overlays would smother the small canvas — return the heading,
     vitals, and legend to the stacked flow. R9: back in the page flow they
     rejoin the light paper chrome, so undo the dark figure-panel remap
     (stage mode keeps them dark inside the fixed dark stage). */
  body.pcm-app:not(.stage-mode) :is(.stage-heading, .vitals-strip, .vitals-legend) {
    --pcm-bg: #f4f1ea;
    --pcm-surface: #f6f3ec;
    --pcm-surface-raised: #ece8dd;
    --pcm-surface-hover: #e5e0d1;
    --pcm-surface-inset: #efebe1;
    --pcm-border: rgb(20 18 15 / 16%);
    --pcm-border-strong: rgb(20 18 15 / 40%);
    --pcm-text: #14120f;
    --pcm-text-secondary: #3a352c;
    --pcm-muted: #57534a;
    --pcm-accent-ink: #a04a28;
    --pcm-accent-surface: rgb(217 119 87 / 16%);
    --pcm-teal: #0e6b60;
    --pcm-violet: #5b4ea8;
    --pcm-blue: #2f5e8f;
    --pcm-amber: #8a5a12;
    --pcm-rose: #c23b22;
    --pcm-green: #2e6f3f;
    --pcm-teal-surface: rgb(14 107 96 / 10%);
    --pcm-violet-surface: rgb(91 78 168 / 10%);
    --pcm-amber-surface: rgb(138 90 18 / 10%);
    --pcm-green-surface: rgb(46 111 63 / 12%);
    --pcm-focus: #a04a28;
    --pcm-form-accent: #a04a28;
    --pcm-reference-fill: #837d6f;
    --pcm-glass: rgb(246 243 236 / 94%);
    --pcm-glass-strong: rgb(246 243 236 / 97%);
    --pcm-glass-soft: rgb(246 243 236 / 82%);
    --pcm-shadow: rgb(20 18 15 / 18%);
    --pcm-alarm-glow: rgb(194 59 34 / 40%);
  }

  body.pcm-app .stage-heading {
    position: static;
    padding: 1rem;
    background: none;
    pointer-events: auto;
    border-block-end: 1px solid var(--pcm-border);
  }

  body.pcm-app .vitals-strip {
    position: static;
    background: var(--pcm-surface);
    backdrop-filter: none;
  }

  body.pcm-app .vitals-legend {
    position: static;
    inset: auto;
    max-block-size: none;
    overflow: visible;
    border: 0;
    border-block-start: 1px solid var(--pcm-border);
    border-radius: 0;
    background: var(--pcm-surface-inset);
    box-shadow: none;
  }

  body.pcm-app .causal-ribbon,
  body.pcm-app .scene-cluster {
    inset-block-end: 0.6rem;
  }

  /* R8b: with the heading back in the stacked flow, the watch chip anchors to
     the top of the canvas itself. */
  body.pcm-app .watch-toast {
    inset-block-start: 0.75rem;
  }

  /* R6 mobile choice: in the stacked layout the rails become full-width
     horizontal bars in their stack slot; tapping pins the panel open (hover
     peek is disabled in the app for small screens). */
  body.pcm-app .edge-rail {
    position: static;
    flex-direction: row;
    justify-content: space-between;
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: 2.75rem;
    padding: 0.5rem 0.9rem;
  }

  body.pcm-app .edge-rail .rail-text {
    writing-mode: horizontal-tb;
  }

  body.pcm-app .workspace.lesson-collapsed.lesson-peek .lesson-panel,
  body.pcm-app .workspace.controls-collapsed.controls-peek .controls-panel {
    position: static;
    inline-size: auto;
    max-block-size: none;
    box-shadow: none;
  }

  body.pcm-app .plot-canvas {
    block-size: 14rem;
  }

  body.pcm-app .control-row > label {
    font-size: 0.9375rem;
  }

  :where(body.pcm-app, body.guide-page) :where(input:not([type="range"], [type="checkbox"], [type="radio"], [type="file"]), select, textarea),
  body.pcm-app .control-value {
    font-size: 1rem;
  }

  body.pcm-app .transport {
    gap: 0.4rem;
  }

  :where(body.pcm-app, body.guide-page) :is(dialog.modal, dialog.methods-dialog) {
    inline-size: calc(100% - 1rem);
    max-inline-size: calc(100% - 1rem);
    max-block-size: calc(100vh - 1rem);
    max-block-size: calc(100dvh - 1rem);
    border-radius: var(--pcm-radius-small);
  }

  :where(body.pcm-app, body.guide-page) :is(.modal-header, .modal-body, .modal-actions) {
    padding: 1rem;
  }

  :where(body.pcm-app, body.guide-page) .modal-body {
    scrollbar-gutter: auto;
  }
}

@media (max-width: 28rem) {
  body.pcm-app .control-row {
    grid-template-columns: minmax(0, 1fr);
  }

  body.pcm-app .control-value {
    justify-self: start;
    max-inline-size: 8rem;
    text-align: start;
  }
}

body.pcm-app.is-embed {
  margin: 0;
  padding: 0;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  background: var(--pcm-stage-bg);
}

body.pcm-app.is-embed > :not(.workspace),
body.pcm-app.is-embed .workspace > :not(.stage-panel),
body.pcm-app.is-embed .stage-panel > :not(.field-stage) {
  display: none !important;
}

body.pcm-app.is-embed .workspace {
  display: block;
  inline-size: 100%;
  max-inline-size: none;
  block-size: 100vh;
  block-size: 100dvh;
  min-block-size: 0;
  margin: 0;
  padding: 0;
}

body.pcm-app.is-embed .stage-panel {
  display: flex;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--pcm-stage-bg);
}

body.pcm-app.is-embed .field-stage {
  flex: 1 1 auto;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

body.pcm-app.is-embed :is(.causal-ribbon, .scene-cluster) {
  display: none;
}

/* ── R3 ⛶ Stage: the scene fills the viewport; panels collapse away and the
   transport floats as a bottom overlay. Pure CSS class flip (body.stage-mode)
   plus a renderer resize — model state and layout markup are untouched. ── */
body.pcm-app.stage-mode {
  overflow: hidden;
}

body.pcm-app.stage-mode :is(.app-header, .lesson-panel, .controls-panel, .plots-panel, .edge-rail),
body.pcm-app.stage-mode :is(.stage-heading, .vitals-legend, #view-status) {
  display: none;
}

/* The id-based rail reveal above outranks the block rule; stage wins outright. */
body.pcm-app.stage-mode .edge-rail {
  display: none !important;
}

body.pcm-app.stage-mode .workspace {
  display: block;
  max-inline-size: none;
  padding: 0;
}

body.pcm-app.stage-mode .stage-panel {
  position: fixed;
  inset: 0;
  /* .workspace > * sets align-self: start, which still aligns a fixed box
     inside its inset area and collapses it to content height — stretch it. */
  align-self: stretch;
  justify-self: stretch;
  z-index: 40;
  display: flex;
  flex-direction: column;
  margin: 0;
  /* keep the scene toolbar reachable above the floating transport */
  padding: 0 0 var(--pcm-transport-height, 0px);
  border: 0;
  border-radius: 0;
  background: var(--pcm-stage-bg);
}

body.pcm-app.stage-mode .field-stage {
  flex: 1 1 auto;
  block-size: auto;
  min-block-size: 0;
}

body.pcm-app.stage-mode .vitals-strip {
  background: var(--pcm-glass);
}

@media (prefers-reduced-motion: reduce) {
  :where(body.pcm-app, body.guide-page),
  :where(body.pcm-app, body.guide-page) *,
  :where(body.pcm-app, body.guide-page) *::before,
  :where(body.pcm-app, body.guide-page) *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  :where(body.pcm-app, body.guide-page) :focus-visible {
    outline-color: Highlight;
  }

  :where(body.pcm-app, body.guide-page) :is(.button-primary, .cta) {
    border-color: ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }

  body.pcm-app .signal-node.is-active {
    border-color: Highlight;
  }

  body.pcm-app .vital-track {
    border: 1px solid GrayText;
  }

  body.pcm-app .vital-band {
    background: Highlight;
    box-shadow: none;
    forced-color-adjust: none;
  }

  body.pcm-app .vital-needle {
    background: CanvasText;
    forced-color-adjust: none;
  }

  body.pcm-app .rnode.is-lit {
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }

  :where(body.pcm-app, body.guide-page) :is(.guide-mark, .brand-mark):not(img):not(svg) {
    background-color: CanvasText;
    forced-color-adjust: none;
  }
}