@classytic/labs 0.3.0 → 0.4.0

package/styles/core.css

@@ -48,6 +48,10 @@
   --lab-t-lg: 18px;
   --lab-t-title: 20px;
   --lab-t-hero: 24px;
+  /* The one editorial size, for ONE thing per lab: the title. A scale stopping at 24px spans 2.4x
+     and reads as a control panel, because nothing is allowed to behave like a heading. Pair it
+     with --lab-lh-title and --lab-ls-tight. */
+  --lab-t-display: 32px;
 
   /* ── type roles: weight, leading, tracking ───────────────────────────────────
      Four weights, four leadings, two trackings. A size on its own does not make
@@ -62,15 +66,15 @@
   --lab-lh-ui: 1.45; /* everything a learner acts on */
   --lab-lh-prose: 1.55; /* explanations, observe text */
   --lab-ls-caps: 0.06em; /* small uppercase labels only */
-  --lab-ls-tight: -0.015em; /* large numerals only */
+  --lab-ls-tight: -0.015em; /* large numerals and display type */
 
   /* ── targets ─────────────────────────────────────────────────────────────────
      44px for anything the learner commits with (answers, primary actions,
-     transport, sliders' hit area). 36px for dense secondary controls inside a
-     dock (chips, segments, icon buttons), still above the WCAG 2.2 AA minimum
-     of 24px and spaced at least 8px apart. */
+     transport, sliders' hit area). Compact secondary controls use the same 44px
+     hit target; their visual glyph may remain smaller, but the tappable area does
+     not require precision and adjacent controls stay at least 8px apart. */
   --lab-target: 44px;
-  --lab-target-compact: 36px;
+  --lab-target-compact: 44px;
 
   /* ── state tints ─────────────────────────────────────────────────────────────
      Every surface that reacts uses the SAME four steps, so "picked" looks like
@@ -148,6 +152,11 @@
    has to (SVG geometry with no box to outline); it never restates them. */
 
 /* Focus: one ring for every keyboard focus under a lab root. */
+:is(.lab-activity, .lab-scene-studio) button {
+  min-block-size: var(--lab-target);
+  min-inline-size: var(--lab-target);
+}
+
 :is(.lab-activity, .lab-scene-studio)
   :is(
     button,
@@ -168,42 +177,30 @@
   outline-offset: var(--lab-focus-offset);
 }
 
-/* Reduced motion: honoured at the root, not per animation. Everything collapses
-   to a single frame; confetti is removed outright because a still burst is
-   noise. A scene that must move to teach keeps a static state that still shows
-   the fact (see the lab-design rulebook). */
+/* Reduced motion: honoured at the root, not per animation. Drop the MOVEMENT, keep the feedback.
+   The preference is about vestibular discomfort from things travelling and scaling, not about
+   colour. Collapsing transition-duration to nothing also killed the tint that says an answer was
+   accepted and the fade that says a panel changed, so a learner who asks for less motion lost the
+   signals telling them the lab had responded at all. Transform and movement snap; colour, border
+   and opacity still cross-fade, quickly. Confetti goes outright: a still burst is just noise. */
 @media (prefers-reduced-motion: reduce) {
   :is(.lab-activity, .lab-scene-studio) :is(*, *::before, *::after) {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
+    transition-property: color, background-color, border-color, fill, stroke, opacity !important;
+    transition-duration: var(--lab-dur-fast) !important;
     scroll-behavior: auto !important;
   }
   .lab-activity .lab-confetti {
     display: none;
   }
-}
-
-/* Tree Quest: causal motion, recursion memory, and prediction—not decoration. */
-.tree-scene {
-  position: relative;
-  overflow: hidden;
-  min-height: 17rem;
-  border: 1px solid var(--border, var(--stage-grid));
-  border-radius: var(--lab-r-md);
-  background:
-    radial-gradient(
-        circle at 1px 1px,
-        color-mix(in oklab, currentColor 9%, transparent) 1px,
-        transparent 0
-      )
-      0 0 / 20px 20px,
-    var(--card, var(--stage-bg));
-}
-.tree-fit-button {
-  position: absolute;
-  top: var(--lab-sp-8);
-  right: var(--lab-sp-8);
+  /* A figure's entrance becomes a fade rather than a scale: an opacity change is safe under this
+     query where a transform is not. It is stated HERE, with the rest of the policy, because a
+     sheet may not keep its own copy of this media query, and because a figure rendered outside
+     `.lab-activity` is not reached by the blanket rule above. */
+  :is(.lab-figure-arrive, .lab-figure-activate) {
+    animation-name: lab-figure-fade;
+  }
 }
 
 /* One geometry contract for renderer-swappable learning scenes. The selected
@@ -260,239 +257,6 @@
 .lab-scene-viewport[data-overflow="scroll"]:focus-visible {
   outline-offset: calc(-1 * var(--lab-focus-offset));
 }
-
-.tree-scene svg {
-  display: block;
-  width: 100%;
-  height: clamp(17rem, 36cqw, 27rem);
-}
-.tree-edge {
-  fill: none;
-  stroke: var(--border, var(--stage-grid));
-  stroke-width: 2;
-  vector-effect: non-scaling-stroke;
-  transition:
-    stroke var(--lab-dur-base) var(--lab-ease),
-    stroke-width var(--lab-dur-base) var(--lab-ease);
-}
-.tree-edge[data-active] {
-  stroke: var(--primary, var(--stage-accent));
-  stroke-width: 4;
-  stroke-dasharray: 8 6;
-  animation: tree-edge-flow 0.75s linear infinite;
-}
-.tree-node {
-  outline: none;
-  cursor: default;
-  transition: transform var(--lab-dur-slow) var(--lab-ease);
-}
-.tree-node[tabindex] {
-  cursor: pointer;
-}
-.tree-node-face {
-  fill: var(--card, var(--stage-bg));
-  stroke: var(--border, var(--stage-grid));
-  stroke-width: 1.5;
-  vector-effect: non-scaling-stroke;
-  transition:
-    fill var(--lab-dur-base) var(--lab-ease),
-    stroke var(--lab-dur-base) var(--lab-ease);
-}
-.tree-node-halo {
-  fill: transparent;
-  stroke: transparent;
-  stroke-width: 1.5;
-  vector-effect: non-scaling-stroke;
-}
-.tree-node text {
-  fill: var(--foreground, var(--stage-fg));
-  font-size: var(--lab-t-sm);
-  font-weight: var(--lab-w-bold);
-  pointer-events: none;
-}
-.tree-node[data-visited] .tree-node-face {
-  fill: color-mix(in oklab, var(--stage-success, #16a34a) 16%, var(--card, var(--stage-bg)));
-  stroke: var(--stage-success, #16a34a);
-}
-.tree-node[data-current] .tree-node-face {
-  fill: color-mix(in oklab, var(--primary, var(--stage-accent)) 14%, var(--card, var(--stage-bg)));
-  stroke: var(--primary, var(--stage-accent));
-  stroke-width: 3;
-}
-.tree-node[data-current] .tree-node-halo {
-  stroke: color-mix(in oklab, var(--primary, var(--stage-accent)) 38%, transparent);
-  animation: tree-node-pulse 1.25s var(--lab-ease) infinite;
-}
-.tree-node:focus-visible .tree-node-halo {
-  stroke: var(--ring, var(--stage-accent));
-  stroke-width: 2.5;
-}
-.tree-prediction {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: var(--lab-sp-10);
-  padding: var(--lab-sp-10);
-  border: 1px solid
-    color-mix(in oklab, var(--primary, var(--stage-accent)) 25%, var(--border, var(--stage-grid)));
-  border-radius: var(--lab-r-md);
-  background: color-mix(
-    in oklab,
-    var(--primary, var(--stage-accent)) 6%,
-    var(--card, var(--stage-bg))
-  );
-}
-.tree-prediction > span {
-  font-size: var(--lab-t-eyebrow);
-  font-weight: var(--lab-w-bold);
-}
-.tree-prediction > div {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: var(--lab-sp-6);
-}
-.tree-prediction small {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--lab-sp-4);
-  flex-basis: 100%;
-  justify-content: center;
-  color: var(--muted-foreground, var(--stage-muted));
-  text-align: center;
-}
-.tree-prediction small svg {
-  width: 0.9rem;
-  height: 0.9rem;
-}
-
-.list-structure-label {
-  margin: 2px 0 var(--lab-sp-4);
-  color: var(--muted-foreground, var(--stage-muted));
-  font-size: var(--lab-t-eyebrow);
-}
-
-.list-structure-label[data-spaced] {
-  margin-top: var(--lab-sp-14);
-}
-
-.list-prediction-feedback {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--lab-sp-4);
-  margin-top: var(--lab-sp-10);
-  color: var(--muted-foreground, var(--stage-muted));
-}
-
-.tree-complexity ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: grid;
-  gap: var(--lab-sp-4);
-}
-.tree-complexity li {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--lab-sp-8);
-  padding: var(--lab-sp-6) var(--lab-sp-8);
-  border: 1px solid var(--border, var(--stage-grid));
-  border-radius: var(--lab-r-sm);
-  font-size: var(--lab-t-eyebrow);
-  font-variant-numeric: tabular-nums;
-}
-.tree-complexity li[data-here] {
-  border-color: var(--primary, var(--stage-accent));
-  background: color-mix(
-    in oklab,
-    var(--primary, var(--stage-accent)) 9%,
-    var(--card, var(--stage-bg))
-  );
-  font-weight: var(--lab-w-semibold);
-}
-.tree-complexity code {
-  padding: 0 var(--lab-sp-4);
-  border-radius: var(--lab-r-xs);
-  background: var(--muted, color-mix(in oklab, currentColor 6%, transparent));
-  font-size: 0.95em;
-}
-.tree-inspector {
-  display: grid;
-  gap: 1px;
-  background: var(--border, var(--stage-grid));
-}
-.tree-inspector section {
-  display: grid;
-  gap: var(--lab-sp-8);
-  padding: var(--lab-sp-12);
-  background: var(--card, var(--stage-bg));
-}
-.tree-inspector h4,
-.tree-inspector p {
-  margin: 0;
-  font-size: var(--lab-t-eyebrow);
-}
-.tree-stack {
-  display: grid;
-  gap: var(--lab-sp-4);
-}
-.tree-stack span {
-  padding: var(--lab-sp-6) var(--lab-sp-8);
-  border: 1px solid var(--border, var(--stage-grid));
-  border-radius: var(--lab-r-sm);
-  background: var(--muted, color-mix(in oklab, currentColor 5%, transparent));
-  font:
-    650 0.68rem ui-monospace,
-    SFMono-Regular,
-    Menlo,
-    monospace;
-}
-.tree-stack span[data-top] {
-  border-color: var(--primary, var(--stage-accent));
-  color: var(--primary, var(--stage-accent));
-}
-.tree-stack em,
-.tree-output em {
-  color: var(--muted-foreground, var(--stage-muted));
-  font-size: var(--lab-t-micro);
-}
-.tree-output {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--lab-sp-6);
-  min-height: 2rem;
-}
-.tree-output span {
-  display: grid;
-  width: 2rem;
-  height: 2rem;
-  place-items: center;
-  border-radius: var(--lab-r-sm);
-  background: color-mix(in oklab, var(--stage-success, #16a34a) 14%, transparent);
-  color: var(--foreground, var(--stage-fg));
-  font-size: var(--lab-t-eyebrow);
-  font-weight: var(--lab-w-bold);
-  animation: tree-output-land var(--lab-dur-slow) var(--lab-ease);
-}
-.tree-invariant p {
-  color: var(--muted-foreground, var(--stage-muted));
-  line-height: var(--lab-lh-ui);
-}
-.tree-balance strong {
-  color: var(--primary, var(--stage-accent));
-  font:
-    800 1.1rem ui-monospace,
-    SFMono-Regular,
-    Menlo,
-    monospace;
-}
-.tree-balance small {
-  color: var(--muted-foreground, var(--stage-muted));
-  font-size: var(--lab-t-micro);
-}
 .tree-rotation-prediction .lab-chip {
   min-width: 6.8rem;
   justify-content: center;
@@ -756,179 +520,11 @@
     border-inline-start: 1px solid var(--border, var(--stage-grid));
   }
 }
-
-/* Heap Quest: synchronized tree and array with stable item identity. */
-.heap-dual-view {
-  display: grid;
-  gap: var(--lab-sp-10);
-  min-width: 0;
-}
-.heap-tree {
-  overflow: hidden;
-  min-height: 18rem;
-  border: 1px solid var(--border, var(--stage-grid));
-  border-radius: var(--lab-r-md);
-  background:
-    radial-gradient(
-        circle at 1px 1px,
-        color-mix(in oklab, currentColor 9%, transparent) 1px,
-        transparent 0
-      )
-      0 0 / 20px 20px,
-    var(--card, var(--stage-bg));
-}
-.heap-tree svg {
-  display: block;
-  width: 100%;
-  height: clamp(18rem, 38cqw, 29rem);
-}
-.heap-tree line {
-  stroke: var(--border, var(--stage-grid));
-  stroke-width: 2;
-  vector-effect: non-scaling-stroke;
-  transition: stroke var(--lab-dur-base) var(--lab-ease);
-}
-.heap-tree line[data-active] {
-  stroke: var(--primary, var(--stage-accent));
-  stroke-width: 4;
-}
-.heap-node {
-  outline: none;
-  cursor: pointer;
-  transition: transform 0.5s var(--lab-ease);
-}
-.heap-node circle {
-  fill: var(--card, var(--stage-bg));
-  stroke: var(--border, var(--stage-grid));
-  stroke-width: 1.5;
-  vector-effect: non-scaling-stroke;
-  transition:
-    fill var(--lab-dur-base) var(--lab-ease),
-    stroke var(--lab-dur-base) var(--lab-ease);
-}
-.heap-node > text:not(.heap-node-index) {
-  fill: var(--foreground, var(--stage-fg));
-  font-size: var(--lab-t-micro);
-  font-weight: var(--lab-w-bold);
-}
-.heap-node-index {
-  fill: var(--muted-foreground, var(--stage-muted));
-  font-size: var(--lab-t-micro);
-  font-weight: var(--lab-w-semibold);
-}
-.heap-node[data-active] circle {
-  fill: color-mix(in oklab, var(--primary, var(--stage-accent)) 13%, var(--card, var(--stage-bg)));
-  stroke: var(--primary, var(--stage-accent));
-  stroke-width: 3;
-}
-.heap-node[data-selected] circle,
-.heap-node:focus-visible circle {
-  stroke: var(--ring, var(--stage-accent));
-  stroke-width: 3;
-  stroke-dasharray: 4 2;
-}
-.heap-array {
-  display: flex;
-  gap: var(--lab-sp-6);
-  overflow-x: auto;
-  padding: var(--lab-sp-4) 2px var(--lab-sp-8);
-  scroll-snap-type: x proximity;
-}
-.heap-array button {
-  display: grid;
-  flex: 0 0 3rem;
-  min-height: 3.25rem;
-  place-items: center;
-  scroll-snap-align: center;
-  border: 1px solid var(--border, var(--stage-grid));
-  border-radius: var(--lab-r-sm);
-  background: var(--card, var(--stage-bg));
-  color: var(--foreground, var(--stage-fg));
-  cursor: pointer;
-}
-.heap-array button small {
-  color: var(--muted-foreground, var(--stage-muted));
-  font-size: var(--lab-t-micro);
-}
-.heap-array button strong {
-  font-size: var(--lab-t-eyebrow);
-}
-.heap-array button[data-active] {
-  border-color: var(--primary, var(--stage-accent));
-  background: color-mix(
-    in oklab,
-    var(--primary, var(--stage-accent)) 10%,
-    var(--card, var(--stage-bg))
-  );
-}
-.heap-array button[data-selected],
-.heap-relation {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--lab-sp-12);
-  min-height: 2.3rem;
-  padding: var(--lab-sp-8) var(--lab-sp-10);
-  border-radius: var(--lab-r-sm);
-  background: var(--muted, color-mix(in oklab, currentColor 5%, transparent));
-  color: var(--muted-foreground, var(--stage-muted));
-  font:
-    0.67rem ui-monospace,
-    SFMono-Regular,
-    Menlo,
-    monospace;
-}
-.heap-relation b {
-  flex: none;
-  color: var(--primary, var(--stage-accent));
-}
 .heap-prediction .lab-chip {
   min-width: 3.5rem;
   justify-content: center;
   text-transform: capitalize;
 }
-.heap-inspector {
-  display: grid;
-  gap: 1px;
-  background: var(--border, var(--stage-grid));
-}
-.heap-inspector section {
-  display: grid;
-  gap: var(--lab-sp-8);
-  padding: var(--lab-sp-12);
-  background: var(--card, var(--stage-bg));
-}
-.heap-inspector h4,
-.heap-inspector p,
-.heap-inspector dl {
-  margin: 0;
-  font-size: var(--lab-t-eyebrow);
-}
-.heap-inspector p {
-  color: var(--muted-foreground, var(--stage-muted));
-  line-height: var(--lab-lh-ui);
-}
-.heap-inspector code {
-  padding: var(--lab-sp-6) var(--lab-sp-8);
-  border-radius: var(--lab-r-sm);
-  background: var(--muted, color-mix(in oklab, currentColor 5%, transparent));
-  font-size: var(--lab-t-micro);
-}
-.heap-inspector dl {
-  display: grid;
-  gap: var(--lab-sp-6);
-}
-.heap-inspector dl div {
-  display: flex;
-  justify-content: space-between;
-}
-.heap-inspector dd {
-  margin: 0;
-  font-weight: var(--lab-w-bold);
-}
-.heap-authoring-preview {
-  min-width: 0;
-}
 @media (min-width: 56rem) {
   .heap-authoring {
     grid-template-columns: minmax(25rem, 1.2fr) minmax(20rem, 0.8fr);
@@ -1232,13 +828,19 @@
     box-shadow var(--lab-dur-fast),
     transform var(--lab-dur-fast);
 }
-.lab-option:hover:not(:disabled),
-.lab-choice:hover:not(:disabled),
-.lang-choice:hover:not(:disabled),
-.lang-match-cell:hover:not(:disabled) {
-  border-color: var(--lab-accent-edge);
-  background: var(--lab-accent-faint);
-  box-shadow: var(--lab-shadow-md);
+/* Gated on a real pointer. A touch device keeps :hover on the last thing tapped, and this hover is
+   an accent border over an accent-faint fill, which is precisely what PICKED looks like: a learner
+   on a phone tapped A, moved to B, and left A still looking chosen. Most of these learners are on
+   a phone, so the sticky state was the common case, not the edge case. */
+@media (hover: hover) and (pointer: fine) {
+  .lab-option:hover:not(:disabled),
+  .lab-choice:hover:not(:disabled),
+  .lang-choice:hover:not(:disabled),
+  .lang-match-cell:hover:not(:disabled) {
+    border-color: var(--lab-accent-edge);
+    background: var(--lab-accent-faint);
+    box-shadow: var(--lab-shadow-md);
+  }
 }
 .lab-option:active:not(:disabled),
 .lab-choice:active:not(:disabled),
@@ -1247,6 +849,29 @@
   transform: translateY(1px);
   box-shadow: none;
 }
+.lab-btn {
+  min-block-size: var(--lab-target);
+  border-color: var(--lab-accent);
+  background: var(--lab-accent);
+  color: var(--lab-accent-fg);
+}
+.lab-btn.lab-btn-ghost {
+  border-color: var(--lab-border);
+  background: transparent;
+  color: var(--lab-fg);
+}
+@media (hover: hover) and (pointer: fine) {
+  .lab-btn:hover:not(:disabled) {
+    border-color: var(--lab-accent);
+    background: color-mix(in oklab, var(--lab-accent) 88%, var(--lab-fg));
+    color: var(--lab-accent-fg);
+  }
+  .lab-btn.lab-btn-ghost:hover:not(:disabled) {
+    border-color: var(--lab-border-strong);
+    background: color-mix(in oklab, var(--lab-fg) 5%, transparent);
+    color: var(--lab-fg);
+  }
+}
 /* selected (accent) — unify the different data-attrs the components emit */
 .lab-option[data-picked],
 .lab-option[data-sel="true"],
@@ -1433,9 +1058,11 @@
     border-color var(--lab-dur-fast),
     color var(--lab-dur-fast);
 }
-.lab-hint-btn:hover {
-  border-color: var(--lab-accent);
-  color: var(--lab-fg);
+@media (hover: hover) and (pointer: fine) {
+  .lab-hint-btn:hover {
+    border-color: var(--lab-accent);
+    color: var(--lab-fg);
+  }
 }
 .lab-misconception {
   display: inline-flex;
@@ -1464,9 +1091,11 @@
     border-color var(--lab-dur-fast),
     color var(--lab-dur-fast);
 }
-.lab-reveal-btn:hover {
-  border-color: var(--lab-warn);
-  color: var(--lab-fg);
+@media (hover: hover) and (pointer: fine) {
+  .lab-reveal-btn:hover {
+    border-color: var(--lab-warn);
+    color: var(--lab-fg);
+  }
 }
 .lab-solution {
   margin-top: var(--lab-sp-8);
@@ -1536,7 +1165,7 @@
 .lab-challenge-q {
   display: flex;
   flex-direction: column;
-  gap: var(--lab-sp-10);
+  gap: var(--lab-sp-8);
   align-items: flex-start;
   min-inline-size: 0;
   width: 100%;
@@ -1631,9 +1260,10 @@
    lesson authors do not hand-tune columns or button widths. */
 .lab-challenge-q[data-response-layout="compact"] .lab-choices {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
-  max-width: 48rem;
-  gap: var(--lab-sp-10);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 14rem));
+  justify-content: start;
+  max-width: 100%;
+  gap: var(--lab-sp-6);
 }
 .lab-challenge-q[data-response-layout="compact"] .lab-choice {
   height: 100%;
@@ -1645,8 +1275,8 @@
   max-width: 100%;
   min-height: 0;
   justify-content: flex-start;
-  gap: var(--lab-sp-10);
-  padding: var(--lab-sp-8) var(--lab-sp-10);
+  gap: var(--lab-sp-8);
+  padding: var(--lab-sp-6) var(--lab-sp-8);
   border: 1px solid var(--lab-border);
   border-radius: var(--lab-r-md);
   background: var(--lab-surface);
@@ -1674,8 +1304,16 @@
   cursor: not-allowed;
   opacity: 0.5;
 }
+/* An answer is not a heading.
+   The shared option rule sets `--lab-t-lg` at semibold, which is larger and heavier than the body
+   text and the step lead, so a row of prose answers came out as the loudest thing on the card and
+   a three-option row read as three buttons shouting. Numeric choices want the presence; a sentence
+   does not. Scoped to the label span, so the bare `.lab-option` keypad keeps its size. */
 .lab-choice-label {
   min-inline-size: 0;
+  font-size: var(--lab-t-sm);
+  font-weight: var(--lab-w-medium);
+  line-height: var(--lab-lh-ui);
 }
 /* The letter is a handle, not decoration: it gives the explanation something to
    point at and keeps every answer's text starting on one vertical line. */
@@ -1697,10 +1335,12 @@
   font-weight: var(--lab-w-medium);
   line-height: var(--lab-lh-tight);
 }
-.lab-challenge-q .lab-choice:hover:not(:disabled) {
-  border-color: var(--lab-accent-edge);
-  background: var(--lab-accent-faint);
-  box-shadow: none;
+@media (hover: hover) and (pointer: fine) {
+  .lab-challenge-q .lab-choice:hover:not(:disabled) {
+    border-color: var(--lab-accent-edge);
+    background: var(--lab-accent-faint);
+    box-shadow: none;
+  }
 }
 .lab-challenge-q .lab-choice[data-picked] {
   font-weight: var(--lab-w-medium);
@@ -1901,11 +1541,17 @@
   font-size: var(--lab-t-sm);
   font-variant-numeric: tabular-nums;
 }
+/* Tabular figures, because these numbers CHANGE. In a proportional face a 1 is narrower than a 0,
+   so a value ticking from 1.11 to 2.00 re-measures its own text and everything beside it slides a
+   few pixels, every frame, for as long as the model runs. `.lab-readout` already had this; the
+   stat rows and the status strip did not, and the status strip is the one place a running lab
+   updates continuously in front of the learner. */
 .lab-stat {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: var(--lab-sp-14);
+  font-variant-numeric: tabular-nums;
 }
 .lab-stat + .lab-stat {
   padding-top: var(--lab-sp-6);
@@ -2254,7 +1900,6 @@
   margin-inline: auto;
 }
 .lang-sentence,
-.lang-choices,
 .lang-listen-play,
 .lang-dictation-foot,
 .lang-bank,
@@ -2375,8 +2020,10 @@
   cursor: pointer;
   transition: background var(--lab-dur-fast);
 }
-.lang-speak:hover {
-  background: color-mix(in oklab, var(--lab-accent) 22%, transparent);
+@media (hover: hover) and (pointer: fine) {
+  .lang-speak:hover {
+    background: color-mix(in oklab, var(--lab-accent) 22%, transparent);
+  }
 }
 
 .lang-match {
@@ -2494,7 +2141,6 @@
   .language-activity-support {
     padding-inline: var(--lab-sp-12);
   }
-  .language-activity .lang-choices,
   .language-activity .lang-match {
     gap: var(--lab-sp-8);
   }
@@ -2629,8 +2275,10 @@
     color var(--lab-dur-fast),
     transform var(--lab-dur-fast);
 }
-.lang-word:hover:not(:disabled) {
-  background: var(--lab-accent-soft);
+@media (hover: hover) and (pointer: fine) {
+  .lang-word:hover:not(:disabled) {
+    background: var(--lab-accent-soft);
+  }
 }
 .lang-word[data-state="no"] {
   color: var(--lab-danger);
@@ -2710,11 +2358,6 @@
   color: var(--lab-good);
   font-weight: var(--lab-w-bold);
 }
-.lang-choices {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--lab-sp-10);
-}
 .lang-why {
   font-size: var(--lab-t-body);
   font-weight: var(--lab-w-medium);
@@ -2997,8 +2640,11 @@
   align-items: center;
   justify-content: center;
   gap: 2px var(--lab-sp-14);
-  min-height: clamp(8rem, 24cqw, 13rem);
-  padding: calc(var(--lab-sp-16) + var(--lab-sp-6));
+  /* Sized to the one line it holds. It was 8-13rem of empty dashed panel, which nobody had seen
+     because no lab used PredictGate: on the first adopter it became the largest thing on the
+     opening screen, under the choice it is asking the learner to make. */
+  min-height: clamp(4.5rem, 12cqw, 6.5rem);
+  padding: var(--lab-sp-16);
   border: 1px dashed var(--lab-border-strong);
   border-radius: var(--lab-r-lg);
   color: var(--lab-fg);
@@ -3098,8 +2744,8 @@
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: var(--lab-sp-16);
-  padding: var(--lab-sp-16) var(--lab-sp-16) var(--lab-sp-14);
+  gap: var(--lab-sp-12);
+  padding: var(--lab-sp-12) var(--lab-sp-16) var(--lab-sp-10);
 }
 .lab-activity-heading {
   min-width: 0;
@@ -3113,12 +2759,17 @@
   letter-spacing: var(--lab-ls-caps);
   text-transform: uppercase;
 }
+/* The one thing allowed to be a heading. Capped at 20px it matched the step lead and the readout
+   values, so a learner met no hierarchy at all. Scales with the column: phone to full width. */
 .lab-activity-heading h3 {
   margin: 0;
-  font-size: clamp(1rem, 2.5vw, 1.25rem);
+  font-size: clamp(1.25rem, 2.4cqi, 1.75rem);
+  font-weight: var(--lab-w-bold);
   line-height: var(--lab-lh-title);
+  letter-spacing: var(--lab-ls-tight);
   text-wrap: balance;
 }
+/* Read, not scanned, so reading size on reading leading. It was 14px: a control-label size. */
 .lab-activity-description {
   margin: var(--lab-sp-4) 0 0;
   max-width: 42rem;
@@ -3133,8 +2784,8 @@
   align-items: center;
   gap: var(--lab-sp-6);
   min-width: var(--lab-target);
-  min-height: var(--lab-target);
-  padding: var(--lab-sp-6) var(--lab-sp-10);
+  min-height: var(--lab-target-compact);
+  padding: var(--lab-sp-4) var(--lab-sp-8);
   border: 1px solid var(--border, var(--stage-grid));
   border-radius: var(--lab-r-sm);
   background: var(--background, var(--stage-bg));
@@ -3144,8 +2795,10 @@
   font-weight: var(--lab-w-semibold);
   cursor: pointer;
 }
-.lab-activity-focus:hover {
-  background: var(--accent, color-mix(in oklab, currentColor 6%, transparent));
+@media (hover: hover) and (pointer: fine) {
+  .lab-activity-focus:hover {
+    background: var(--accent, color-mix(in oklab, currentColor 6%, transparent));
+  }
 }
 .lab-activity-focus svg {
   width: 1rem;
@@ -3161,6 +2814,7 @@
   align-items: center;
   gap: var(--lab-sp-10);
   min-width: 0;
+  font-variant-numeric: tabular-nums;
   padding: var(--lab-sp-10) var(--lab-sp-16);
   border-block: 1px solid var(--border, var(--stage-grid));
   background: color-mix(
@@ -3174,22 +2828,34 @@
   padding-inline-start: var(--lab-sp-10);
   border-inline-start: 1px solid var(--border, var(--stage-grid));
 }
-.network-route-path {
+/* The line of readings inside the strip: "Pendulum · x 12 cm · T 2.84 s · f 0.35 Hz".
+
+   WRAPPING IS THE POINT. This was written out as an identical inline style in seven labs, and none
+   of them said what should happen when the readings are wider than the card. A flex item's minimum
+   width is its content, so the line could not shrink: it ran off the right edge of the lab and the
+   card's own `overflow: hidden` cut the last reading in half. Three labs were losing a word each
+   ("Copper", "proportional", "f 0.35 Hz") and the rest were one longer material name away from it.
+
+   A reading is a whole unit, so `wrap` breaks between readings and never inside one. The strip
+   grows a line instead of swallowing a value.
+
+   The copies also set a 13px font size, which is not on the type scale and never was: it was
+   reachable only because an inline style outranks the stylesheet. `.lab-activity-status` already
+   declares the size this strip is meant to be, so the line simply inherits it now. The gap and the
+   weight were on the scale all along and keep their exact values. */
+.lab-status-line {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--lab-sp-8);
   min-width: 0;
-  flex: 1;
-  overflow: hidden;
-  color: var(--muted-foreground, var(--stage-muted));
-  text-align: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.network-delivery {
-  flex: none;
-  color: var(--destructive, var(--stage-danger));
   font-weight: var(--lab-w-semibold);
 }
-.network-delivery[data-delivered] {
-  color: var(--lab-good);
+/* A measurement the learner has not earned yet. It holds its slot so the strip keeps its shape
+   when the number arrives, and reads as clearly absent rather than as a value of zero. */
+.lab-activity-measured-pending {
+  color: var(--lab-muted);
+  opacity: 0.55;
 }
 .lab-activity-workspace {
   display: grid;
@@ -3217,79 +2883,6 @@
 .lab-activity-dock {
   min-width: 0;
 }
-.network-scene {
-  overflow: hidden;
-  border: 1px solid var(--border, var(--stage-grid));
-  border-radius: var(--lab-r-md);
-  background:
-    radial-gradient(
-        circle at 1px 1px,
-        color-mix(in oklab, currentColor 11%, transparent) 1px,
-        transparent 0
-      )
-      0 0 / 20px 20px,
-    var(--card, var(--stage-bg));
-}
-.network-scene svg {
-  display: block;
-  width: 100%;
-  height: clamp(190px, 30vw, 300px);
-}
-.network-link {
-  stroke: var(--border, var(--stage-grid));
-  stroke-width: 4;
-  stroke-linecap: round;
-  transition:
-    stroke var(--lab-dur-base) var(--lab-ease),
-    stroke-width var(--lab-dur-base) var(--lab-ease);
-}
-.network-link[data-active] {
-  stroke: var(--primary, var(--stage-accent));
-  stroke-width: 7;
-}
-.network-link[data-down] {
-  stroke: var(--destructive, var(--stage-danger));
-  stroke-dasharray: 8 7;
-}
-.network-link-label {
-  fill: var(--muted-foreground, var(--stage-muted));
-  font-size: var(--lab-t-micro);
-  font-weight: var(--lab-w-semibold);
-  paint-order: stroke;
-  stroke: var(--card, var(--stage-bg));
-  stroke-width: 4px;
-}
-.network-device {
-  color: var(--foreground, var(--stage-fg));
-  outline: none;
-}
-.network-device-surface {
-  fill: var(--card, var(--stage-bg));
-  stroke: var(--border, var(--stage-grid));
-  stroke-width: 1.5;
-}
-.network-device-symbol {
-  color: var(--muted-foreground, var(--stage-muted));
-}
-.network-device-label {
-  fill: var(--foreground, var(--stage-fg));
-  font-size: var(--lab-t-micro);
-  font-weight: var(--lab-w-semibold);
-}
-.network-device[data-active] .network-device-surface {
-  fill: color-mix(in oklab, var(--primary, var(--stage-accent)) 12%, var(--card, var(--stage-bg)));
-  stroke: var(--primary, var(--stage-accent));
-  stroke-width: 3;
-}
-.network-device[data-active] .network-device-symbol {
-  color: var(--primary, var(--stage-accent));
-}
-.network-device:focus-visible .network-device-surface,
-.network-device[data-selected] .network-device-surface {
-  stroke: var(--ring, var(--stage-accent));
-  stroke-width: 3;
-  stroke-dasharray: 5 3;
-}
 .lab-activity-feedback {
   display: grid;
   /* minmax(0, 1fr), not 1fr: a grid track is at least min-content wide by default, so the longest
@@ -3320,8 +2913,8 @@
    text in the foreground colour, not as muted fine print. */
 .lab-authored-task {
   display: grid;
-  gap: var(--lab-sp-10);
-  padding: var(--lab-sp-14) var(--lab-sp-16);
+  gap: var(--lab-sp-8);
+  padding: var(--lab-sp-10) var(--lab-sp-16);
   border-top: 1px solid var(--border, var(--stage-grid));
 }
 /* An authored question is already a semantic section of Activity. Its challenge
@@ -3343,6 +2936,13 @@
   line-height: var(--lab-lh-ui);
   text-wrap: pretty;
 }
+/* The instruction standing alone over the model, rather than heading a stack of answer rows. It
+   carries the padding the task section used to give it, and no rule of its own: it reads as a
+   caption on the figure below, not as another band. */
+.lab-authored-lead-solo {
+  padding: var(--lab-sp-10) var(--lab-sp-16) var(--lab-sp-4);
+  font-size: var(--lab-t-sm);
+}
 @container lab-activity (max-width: 22rem) {
   .lab-activity-feedback {
     grid-template-columns: minmax(0, 1fr);
@@ -3355,6 +2955,7 @@
   letter-spacing: var(--lab-ls-caps);
   text-transform: uppercase;
 }
+.lab-activity-feedback > div,
 .lab-activity-feedback p {
   margin: 0;
   font-size: var(--lab-t-sm);
@@ -3388,6 +2989,7 @@
   align-items: end;
   gap: var(--lab-sp-10);
 }
+
 /* Every control gets a real basis. Without one a Field falls back to its content width, and a
    Field holding a Slider has almost no content width (the Slider is a div, not an input), so a
    chip group beside it took the whole row and squeezed the slider to its 60px floor. `:has` also
@@ -3407,6 +3009,38 @@
     min-width: 0;
   }
 }
+/* ── Bench panel ───────────────────────────────────────────────────────────────
+   Instruments as equipment BESIDE the diagram, never objects inside it (rationale in
+   src/kit/instruments.tsx). Layout ONLY: no border, radius or fill, because rule 1 is one bordered
+   container per lab and the dock hairline already delimits this. The instruments carry their own
+   depth, so they read as objects on the card rather than needing a box drawn round them. */
+.lab-bench {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: var(--lab-sp-20);
+  padding-block: var(--lab-sp-8);
+}
+.lab-bench > .lab-field {
+  flex: 0 0 auto;
+}
+/* The panel is a BAND: sized to content it wraps its own children onto stray rows. */
+.lab-activity-fields > .lab-bench {
+  flex: 1 1 100%;
+}
+.lab-bench .lab-field-row {
+  align-items: center;
+  gap: var(--lab-sp-8);
+}
+.lab-bench .lab-field-val {
+  min-width: 0;
+}
+.lab-bench-meter {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+}
+
 /* ── Authored lesson shell ──────────────────────────────────────────────────────
    One scene-first container. The model is the hero, its controls form a compact dock,
    and explanatory evidence stays contextual until the learner asks for it. */
@@ -3508,6 +3142,58 @@
   padding-top: var(--lab-sp-12);
   border-top: 1px solid color-mix(in oklab, var(--border, var(--stage-grid)) 70%, transparent);
 }
+
+/* Mechanic-specific authored shells. They preserve the shared sequence and access behavior while
+   making the scientific object, not repeated chrome, the first phone viewport. Existing labs keep
+   `standard`; new flagships opt into one of these modes deliberately. */
+.lab-authored-activity[data-presentation]:not([data-presentation="standard"]) .lab-activity-status {
+  padding-block: var(--lab-sp-6);
+  background: transparent;
+  border-bottom: 0;
+}
+.lab-authored-activity[data-presentation]:not([data-presentation="standard"])
+  .lab-authored-lead-solo {
+  padding-block: var(--lab-sp-8) var(--lab-sp-4);
+  font-size: var(--lab-t-sm);
+}
+.lab-authored-activity[data-presentation]:not([data-presentation="standard"])
+  .lab-activity-heading
+  h3 {
+  font-size: clamp(1.25rem, 5.5cqi, 1.65rem);
+  line-height: var(--lab-lh-title);
+}
+.lab-authored-activity[data-presentation="observation"] .lab-activity-workspace {
+  padding-top: var(--lab-sp-6);
+}
+.lab-authored-activity[data-presentation="construction"] .lab-activity-dock {
+  position: sticky;
+  bottom: 0;
+  z-index: var(--lab-z-raised);
+}
+.lab-authored-activity[data-presentation="investigation"] .lab-activity-inspector,
+.lab-authored-activity[data-presentation="diagnosis"] .lab-activity-inspector {
+  border-top-style: dashed;
+}
+@container lab-activity (max-width: 30rem) {
+  .lab-authored-activity[data-presentation]:not([data-presentation="standard"])
+    .lab-activity-header {
+    padding: var(--lab-sp-10) var(--lab-sp-12) var(--lab-sp-6);
+  }
+  .lab-authored-activity[data-presentation]:not([data-presentation="standard"])
+    .lab-activity-description {
+    margin-top: 0;
+    font-size: var(--lab-t-sm);
+    line-height: var(--lab-lh-ui);
+  }
+  .lab-authored-activity[data-presentation]:not([data-presentation="standard"])
+    .lab-activity-status {
+    padding-inline: var(--lab-sp-12);
+  }
+  .lab-authored-activity[data-presentation]:not([data-presentation="standard"])
+    .lab-authored-lead-solo {
+    padding-inline: var(--lab-sp-12);
+  }
+}
 /* Segmented control: a labelled row of mutually-exclusive options as ONE compact control (an
    iOS-style track), not a column of full-width buttons. Reusable for any 2–4 option mode toggle. */
 .lab-segmented-field {
@@ -3528,10 +3214,11 @@
      learner cannot choose what they cannot see. Wrapping keeps every mode
      visible; the scroll below is the last resort for one option too wide to fit. */
   flex-wrap: wrap;
-  gap: var(--lab-sp-4);
-  padding: var(--lab-sp-4);
-  border-radius: var(--lab-r-pill, 999px);
-  background: color-mix(in oklab, var(--stage-fg) 7%, transparent);
+  gap: var(--lab-sp-2);
+  padding: var(--lab-sp-2);
+  border-radius: var(--lab-r-sm, 6px);
+  background: color-mix(in oklab, var(--stage-fg) 6%, transparent);
+  border: 1px solid color-mix(in oklab, var(--lab-border) 60%, transparent);
   width: fit-content;
   max-width: 100%;
   /* The phone rule above lets a field shrink to avoid scrolling the page, but a segmented track
@@ -3569,99 +3256,39 @@
 .lab-segment {
   flex: 0 0 auto;
   min-height: var(--lab-target-compact);
-  padding: var(--lab-sp-4) var(--lab-sp-12);
+  padding: var(--lab-sp-2) var(--lab-sp-10);
   border: 1px solid transparent;
-  border-radius: var(--lab-r-pill, 999px);
+  border-radius: calc(var(--lab-r-sm, 6px) - 1px);
   background: transparent;
   box-shadow: none;
   color: var(--lab-muted);
-  font-size: var(--lab-t-sm, 0.8125rem);
-  font-weight: var(--lab-w-medium);
+  font-size: var(--lab-t-sm);
+  font-weight: var(--lab-w-medium, 500);
   white-space: nowrap;
+  /* Named properties, not `all`. A blanket transition animates layout and paint together, so a
+     width change that should be instant crossfades instead, and it is the reason the motion tokens
+     exist: one duration and one easing for everything that moves. */
+  transition:
+    background var(--lab-dur-fast) var(--lab-ease),
+    color var(--lab-dur-fast) var(--lab-ease),
+    box-shadow var(--lab-dur-fast) var(--lab-ease);
 }
-.lab-segment:hover:not([data-sel="true"]) {
-  background: color-mix(in oklab, var(--stage-fg) 6%, transparent);
-  color: var(--lab-fg);
+@media (hover: hover) and (pointer: fine) {
+  .lab-segment:hover:not([data-sel="true"]) {
+    background: color-mix(in oklab, var(--stage-fg) 5%, transparent);
+    color: var(--lab-fg);
+  }
 }
 .lab-segment[data-sel="true"] {
   background: var(--lab-surface);
   color: var(--lab-fg);
-  box-shadow: var(--lab-shadow-sm);
-  font-weight: var(--lab-w-semibold);
+  box-shadow: 0 1px 2px color-mix(in oklab, currentColor 8%, transparent);
+  font-weight: var(--lab-w-semibold, 600);
 }
 .lab-segment:disabled {
   opacity: 0.45;
   pointer-events: none;
 }
-.network-inspector-heading {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--lab-sp-12);
-  padding: var(--lab-sp-12) var(--lab-sp-12);
-  border-bottom: 1px solid var(--border, var(--stage-grid));
-}
-.network-inspector-heading div {
-  display: flex;
-  align-items: baseline;
-  gap: var(--lab-sp-6);
-}
-.network-inspector-heading span {
-  color: var(--muted-foreground, var(--stage-muted));
-  font-size: var(--lab-t-micro);
-  font-weight: var(--lab-w-semibold);
-  letter-spacing: var(--lab-ls-caps);
-  text-transform: uppercase;
-}
-.network-inspector-heading strong {
-  font-size: var(--lab-t-eyebrow);
-}
-.network-packet {
-  overflow: hidden;
-  border: 1px solid var(--border, var(--stage-grid));
-  border-radius: var(--lab-r-md);
-  background: var(--card, var(--stage-bg));
-}
-.network-inspector .network-packet {
-  border: 0;
-  border-radius: 0;
-}
-.network-packet-head {
-  display: flex;
-  justify-content: space-between;
-  padding: var(--lab-sp-8) var(--lab-sp-12);
-  border-bottom: 1px solid var(--border, var(--stage-grid));
-  font-size: var(--lab-t-eyebrow);
-}
-.network-packet-head span {
-  color: var(--muted-foreground, var(--stage-muted));
-  font-variant-numeric: tabular-nums;
-}
-.network-layer-list {
-  display: grid;
-  gap: 1px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  background: var(--border, var(--stage-grid));
-}
-.network-layer {
-  display: grid;
-  grid-template-columns: 4.8rem 3.5rem 1fr;
-  gap: var(--lab-sp-6);
-  padding: var(--lab-sp-8) var(--lab-sp-10);
-  background: var(--card, var(--stage-bg));
-  font-size: var(--lab-t-micro);
-  line-height: var(--lab-lh-ui);
-}
-.network-layer-name {
-  color: var(--muted-foreground, var(--stage-muted));
-  text-transform: uppercase;
-  letter-spacing: var(--lab-ls-caps);
-}
-.network-layer strong {
-  color: var(--primary, var(--stage-accent));
-}
 .lab-activity-transport {
   display: grid;
   /* The middle column must be able to SHRINK: with an 8rem floor the three columns could not fit
@@ -3670,11 +3297,16 @@
   grid-template-columns: auto minmax(0, 18rem) auto;
   align-items: center;
   justify-content: center;
-  gap: var(--lab-sp-12);
-  padding: var(--lab-sp-12) var(--lab-sp-16);
+  gap: var(--lab-sp-8);
+  padding: var(--lab-sp-6) var(--lab-sp-10);
   border-top: 1px solid var(--border, var(--stage-grid));
   background: var(--card, var(--stage-bg));
 }
+.lab-icon-button svg {
+  width: 1rem;
+  height: 1rem;
+  stroke-width: 1.8;
+}
 /* The transport's middle slot. This is shell, not a subject: it lived in the maths sheet, so every
    other subject rendered it unstyled, and a long status word ("Photosynthesising") could not shrink
    inside its flex row and pushed the transport past the card. */
@@ -3689,6 +3321,10 @@
   font-variant-numeric: tabular-nums;
   overflow-wrap: anywhere;
 }
+.lab-transport-state strong {
+  font-size: var(--lab-t-eyebrow);
+  line-height: var(--lab-lh-ui);
+}
 .lab-transport-state > * {
   min-width: 0;
 }
@@ -3749,15 +3385,25 @@
   color: var(--foreground, var(--stage-fg));
 }
 .lab-activity-progress progress {
+  /* Same fix as `.physics-efficiency-ledger progress`, for the same two
+     reasons: `appearance:none` so the background actually paints instead of
+     being overridden by Chrome's native track, AND a foreground-derived mix
+     instead of `--muted` (which is deliberately close to the surface tone it
+     sits on - see `.lab-slider [data-slot="slider-track"]`'s comment - so an
+     early step, a small fraction, read as a bare sliver with nothing visible
+     behind it rather than a bar partway along a visible track). */
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
   width: 100%;
   height: 0.28rem;
   overflow: hidden;
   border: 0;
   border-radius: var(--lab-r-pill);
-  background: var(--muted, var(--stage-grid));
+  background: color-mix(in oklab, var(--stage-fg) 15%, transparent);
 }
 .lab-activity-progress progress::-webkit-progress-bar {
-  background: var(--muted, var(--stage-grid));
+  background: color-mix(in oklab, var(--stage-fg) 15%, transparent);
 }
 .lab-activity-progress progress::-webkit-progress-value {
   border-radius: var(--lab-r-pill);
@@ -3774,16 +3420,25 @@
   accent-color: var(--primary, var(--stage-accent));
   cursor: pointer;
 }
+/* The transcript is a text alternative to a moving scene: a screen reader needs it, and a sighted
+   learner is reading the scene instead. It was drawn as a full-width band with its own rule and a
+   semibold heading, which gave a service affordance the same weight as the lesson and put two of
+   these rows between the figure and the Continue button. It stays exactly where it is in the DOM,
+   and recedes. */
 .lab-activity-transcript {
   margin: 0;
-  padding: var(--lab-sp-10) var(--lab-sp-16);
-  border-top: 1px solid var(--border, var(--stage-grid));
+  padding: var(--lab-sp-8) var(--lab-sp-16);
+  border-top: 1px solid var(--lab-hairline);
   color: var(--muted-foreground, var(--stage-muted));
-  font-size: var(--lab-t-sm);
+  font-size: var(--lab-t-eyebrow);
 }
 .lab-activity-transcript summary {
   cursor: pointer;
-  font-weight: var(--lab-w-semibold);
+  font-weight: var(--lab-w-medium);
+  opacity: 0.7;
+}
+.lab-activity-transcript[open] summary {
+  opacity: 1;
 }
 .lab-activity-transcript ol {
   margin: var(--lab-sp-8) 0 0;
@@ -3852,13 +3507,76 @@
   .lab-activity-inspector[open] > summary {
     border-bottom: 1px solid var(--border, var(--stage-grid));
   }
+
+  /* In a stacked lab, keep the transport at the thumb-friendly bottom edge. */
+  .lab-activity-header {
+    order: 1;
+  }
+  .lab-activity-status {
+    order: 2;
+  }
+  /* A task section (question / response) keeps its DOM position relative to the figure.
+     Without an explicit order it defaulted to 0 and jumped ABOVE the title on every narrow
+     layout. Sharing the workspace's value means ties fall back to source order: a predict
+     task authored before the figure stays before it, an explain task after it stays after. */
+  .lab-authored-task {
+    order: 3;
+  }
+  /* The instruction standing alone above the model shares that value too, and sits before the
+     workspace in source, so it lands between the status strip and the figure. Left unset it takes
+     the default 0 and leads the card, above the eyebrow. */
+  .lab-authored-lead-solo {
+    order: 3;
+  }
+  .lab-activity > .lab-activity-workspace,
+  .lab-activity > .lab-activity-canvas,
+  .lab-activity > .lab-activity-dock,
+  .lab-activity > .lab-activity-inspector {
+    order: 3;
+  }
+  .lab-activity-workspace > .lab-activity-canvas {
+    order: 1;
+  }
+  .lab-activity-workspace > .lab-activity-dock {
+    order: 2;
+  }
+  .lab-activity-workspace > .lab-activity-inspector {
+    order: 3;
+  }
+  .lab-activity-feedback {
+    order: 4;
+  }
+  .lab-activity-transcript {
+    order: 5;
+  }
+  .lab-activity-transport {
+    position: sticky;
+    bottom: 0;
+    z-index: var(--lab-z-overlay);
+    order: 6;
+    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
+    background: color-mix(in oklab, var(--background, var(--stage-bg)) 88%, transparent);
+    box-shadow: 0 -8px 18px color-mix(in oklab, currentColor 7%, transparent);
+    backdrop-filter: blur(12px);
+  }
+}
+.lab-choice-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--lab-sp-8);
+}
+
+.lab-numeric-tertiary {
+  color: var(--stage-muted);
+  font-variant-numeric: tabular-nums;
 }
 @container lab-activity (max-width: 42.5rem) {
   .lab-activity-header {
-    padding: var(--lab-sp-12);
+    padding: var(--lab-sp-10) var(--lab-sp-12) var(--lab-sp-8);
   }
   .lab-activity-description {
     font-size: var(--lab-t-sm);
+    line-height: var(--lab-lh-ui);
   }
   .lab-activity-focus {
     font-size: var(--lab-t-sm);
@@ -3868,9 +3586,42 @@
     display: none;
   }
   .lab-activity-status {
-    padding-inline: var(--lab-sp-12);
+    gap: var(--lab-sp-8);
+    padding: var(--lab-sp-8) var(--lab-sp-12);
     flex-wrap: wrap;
-    row-gap: var(--lab-sp-6);
+    row-gap: var(--lab-sp-4);
+    font-size: var(--lab-t-micro);
+  }
+  .lab-activity-status > * + * {
+    padding-inline-start: var(--lab-sp-8);
+  }
+  .lab-authored-activity .lab-activity-status > strong:first-child {
+    display: none;
+  }
+  .lab-authored-activity .lab-activity-status > strong:first-child + * {
+    padding-inline-start: 0;
+    border-inline-start: 0;
+  }
+  .lab-authored-lead-solo {
+    padding: var(--lab-sp-10) var(--lab-sp-12) var(--lab-sp-4);
+    font-size: var(--lab-t-sm);
+    line-height: var(--lab-lh-ui);
+  }
+  .lab-activity-workspace {
+    gap: var(--lab-sp-8);
+    padding: var(--lab-sp-8);
+  }
+  .lab-activity-feedback {
+    gap: var(--lab-sp-4);
+    margin: 0 var(--lab-sp-8) var(--lab-sp-8);
+    max-width: calc(100% - 2 * var(--lab-sp-8));
+    padding: var(--lab-sp-8) var(--lab-sp-10);
+  }
+  .lab-authored-activity[data-inspector-layout="stacked"]
+    .lab-activity-workspace
+    > .lab-activity-inspector {
+    border-inline: 0;
+    border-radius: 0;
   }
   .network-route-path {
     display: none;
@@ -3923,7 +3674,21 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--lab-sp-12);
+  gap: var(--lab-sp-8);
+}
+.lab-sequence-actions .lab-btn,
+.lab-sequence-actions .lab-btn-ghost {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--lab-sp-4);
+  min-block-size: var(--lab-target-compact);
+  padding: var(--lab-sp-4) var(--lab-sp-10);
+  font-size: var(--lab-t-sm);
+}
+.lab-sequence-actions .lab-btn svg {
+  width: 0.9rem;
+  height: 0.9rem;
+  stroke-width: 1.8;
 }
 .lab-sequence-gate,
 .lab-sequence-count {
@@ -3980,12 +3745,339 @@
 .lab-activity svg {
   max-width: 100%;
 }
-.network-scene-target[data-interactive="true"] {
-  cursor: pointer;
-}
 
 .lab-config-options {
   display: inline-flex;
   flex-wrap: wrap;
   gap: var(--lab-sp-6);
 }
+
+/* A schematic's labels live inside its viewBox, so they scale with the element: at 350px a
+   520-wide circuit renders its tags at ~3px. The floor keeps it legible and lets the strip scroll
+   instead, and the edge fade rides the container box so a cut-off circuit reads as scrollable
+   rather than broken.
+
+   There is deliberately NO max-width here. Capping every scene reflowed the labels in the ~40 labs
+   composed against their natural width and put two of them into text-on-text collisions. A short
+   wide diagram stretching into a tall empty box is a per-lab composition problem; it does not get
+   a global rule. */
+.electronics-scene {
+  display: flex;
+  justify-content: center;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    #000 1.5rem,
+    #000 calc(100% - 1.5rem),
+    transparent 100%
+  );
+}
+.electronics-scene > svg {
+  min-width: 22rem;
+  flex: 0 0 auto;
+}
+
+/* ── Rules that belong to no single domain ─────────────────────────────────────────────────────
+   These arrived here from styles/domains/parts/shared-{1,2}.css.
+
+   They were never meant to be a domain. scripts/split-domains.mjs routes the `lab` and `stage`
+   prefixes to a sheet it calls "shared" (SHEET, :72-74), and every domain sheet then had to
+   `@import "./shared.css"` to get them: 4.6 KiB charged against all fourteen subjects, which is
+   most of why chemistry could not fit under its ceiling. That was a limitation of the generator,
+   which had no way to put a rule BACK into core.css, not a decision about where the rules belong.
+   Their own generated header said they "belong to no single domain", which is the definition of
+   this layer, and every documented layered-import recipe already requires core.css. So a consumer
+   loading core.css plus one subject gets exactly what it got before.
+   ───────────────────────────────────────────────────────────────────────────────────────────── */
+.lab-scene-row,
+.lab-sequence-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--lab-sp-16);
+}
+.lab-scene-row {
+  align-items: center;
+}
+.lab-sequence-row {
+  align-items: flex-end;
+  gap: var(--lab-sp-14);
+}
+.lab-clue-scene {
+  display: grid;
+  justify-items: center;
+  gap: var(--lab-sp-4);
+}
+.lab-clue-scene > span {
+  color: var(--stage-muted);
+  font-size: var(--lab-t-micro);
+  font-weight: var(--lab-w-semibold);
+  text-transform: uppercase;
+  letter-spacing: var(--lab-ls-caps);
+}
+.lab-result-stack {
+  display: grid;
+  justify-items: center;
+  gap: var(--lab-sp-14);
+  margin-top: var(--lab-sp-4);
+}
+.lab-answer-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--lab-sp-16);
+  font-size: var(--lab-t-body);
+  font-weight: var(--lab-w-semibold);
+}
+.lab-inline-answer,
+.lab-trig-value {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--lab-sp-6);
+}
+.lab-solved-message {
+  margin: 0;
+  color: var(--stage-good);
+  font-weight: var(--lab-w-semibold);
+}
+.lab-worked-list {
+  display: grid;
+  gap: var(--lab-sp-6);
+  margin: 0;
+  padding-inline-start: var(--lab-sp-16);
+  font-size: var(--lab-t-sm);
+}
+.lab-result-copy {
+  font-size: var(--lab-t-eyebrow);
+}
+.lab-centered-scene {
+  display: grid;
+  place-items: center;
+}
+.lab-fill-prompt {
+  margin: 0;
+  font-size: var(--lab-t-body);
+  font-weight: var(--lab-w-semibold);
+  line-height: 1.9;
+  text-align: center;
+}
+.lab-sequence-step {
+  display: grid;
+  justify-items: center;
+  gap: var(--lab-sp-4);
+  padding: var(--lab-sp-6);
+  border: 2px solid transparent;
+  border-radius: var(--lab-r-md);
+}
+.lab-sequence-step[data-current="true"] {
+  border-color: var(--stage-accent);
+  background: color-mix(in oklab, var(--stage-accent) 5%, transparent);
+}
+.lab-sequence-label {
+  color: var(--stage-fg);
+  font-size: var(--lab-t-eyebrow);
+  font-weight: var(--lab-w-semibold);
+}
+.lab-sequence-value {
+  min-width: 2rem;
+  padding: 2px var(--lab-sp-8);
+  border: 1.5px solid color-mix(in oklab, var(--stage-fg) 30%, transparent);
+  border-radius: var(--lab-r-xs);
+  background: var(--stage-bg);
+  font-size: var(--lab-t-sm);
+  font-weight: var(--lab-w-bold);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+}
+.lab-numeric-primary {
+  font-size: var(--lab-t-body);
+  font-weight: var(--lab-w-semibold);
+  font-variant-numeric: tabular-nums;
+}
+.lab-numeric-secondary,
+.lab-numeric-tertiary,
+.lab-tabular {
+  font-variant-numeric: tabular-nums;
+}
+.lab-numeric-secondary {
+  opacity: 0.85;
+}
+.lab-numeric-tertiary {
+  opacity: 0.75;
+}
+.lab-muted-copy {
+  opacity: 0.8;
+}
+.lab-trig-readouts {
+  display: inline-flex;
+  gap: var(--lab-sp-16);
+  margin-inline-start: auto;
+  font-variant-numeric: tabular-nums;
+}
+.lab-trig-function[data-function="sin"] {
+  color: var(--stage-good);
+}
+.lab-trig-function[data-function="cos"] {
+  color: var(--stage-accent);
+}
+.lab-trig-function[data-function="tan"] {
+  color: var(--stage-warn);
+}
+@media (max-width: 35rem) {
+  .lab-trig-readouts {
+    width: 100%;
+    margin-inline-start: 0;
+    justify-content: space-between;
+    gap: var(--lab-sp-8);
+  }
+}
+
+/* Sizing for an icon inside a chip. This lived in the chemistry domain part, with no `.chem-`
+   ancestor, which meant a chip icon was only sized on pages that happened to load chemistry. It is
+   shared chrome, so it belongs in this layer. */
+.lab-chip > svg {
+  width: 0.9rem;
+  height: 0.9rem;
+  flex: none;
+}
+
+/* ── Simulation HUD & Visual-First Floating Controls ────────────────────────
+   Used across flagship laboratories to replace vertical form stacks with
+   compact glassmorphic toolbars, floating telemetry badges, and collapsible
+   drawers so the physical simulation retains 65-75% of viewport height. */
+/* ── Simulation HUD & Visual-First Floating Controls ────────────────────────
+   Precision instrument toolbar: clean typography, zero emoji noise,
+   consistent alignment, and subtle micro-contrast. */
+.lab-hud-toolbar {
+  grid-column: 1 / -1;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--lab-sp-6) var(--lab-sp-10);
+  padding: var(--lab-sp-4) var(--lab-sp-8);
+  border: 1px solid var(--lab-border);
+  border-radius: var(--lab-r-md, 8px);
+  background: color-mix(in oklab, var(--lab-surface) 92%, transparent);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  box-shadow: 0 1px 3px color-mix(in oklab, currentColor 4%, transparent);
+}
+.lab-hud-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--lab-sp-4);
+}
+.lab-hud-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--lab-sp-4);
+  padding: 0 var(--lab-sp-2);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--muted-foreground, var(--stage-muted));
+  font-size: var(--lab-t-eyebrow, 0.68rem);
+  font-weight: var(--lab-w-semibold, 600);
+  letter-spacing: var(--lab-ls-caps, 0.05em);
+  text-transform: uppercase;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.lab-hud-badge strong {
+  color: var(--stage-fg, currentColor);
+  font-weight: var(--lab-w-bold);
+}
+.lab-hud-chip-select {
+  display: inline-flex;
+  gap: var(--lab-sp-2);
+  padding: var(--lab-sp-2);
+  background: var(--lab-sunken);
+  border-radius: var(--lab-r-sm, 6px);
+  border: 1px solid var(--lab-hairline);
+}
+.lab-hud-chip-btn {
+  padding: var(--lab-sp-2) var(--lab-sp-8);
+  border-radius: calc(var(--lab-r-sm, 6px) - 2px);
+  border: 0;
+  background: transparent;
+  color: var(--lab-muted);
+  font-size: var(--lab-t-eyebrow, 0.68rem);
+  font-weight: var(--lab-w-semibold, 600);
+  cursor: pointer;
+  transition: all var(--lab-dur-fast) var(--lab-ease);
+  white-space: nowrap;
+}
+.lab-hud-chip-btn:hover {
+  color: var(--lab-fg);
+}
+.lab-hud-chip-btn[data-active="true"],
+.lab-hud-chip-btn.active {
+  background: var(--lab-surface);
+  color: var(--lab-fg);
+  box-shadow: 0 1px 2px color-mix(in oklab, currentColor 8%, transparent);
+}
+.lab-hud-drawer {
+  grid-column: 1 / -1;
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+  gap: var(--lab-sp-8);
+  padding: var(--lab-sp-8) var(--lab-sp-10);
+  margin-top: var(--lab-sp-4);
+  border: 1px solid var(--lab-border);
+  border-radius: var(--lab-r-sm, 6px);
+  background: color-mix(in oklab, var(--lab-sunken) 40%, transparent);
+}
+.lab-hud-drawer-toggle,
+.lab-btn.lab-hud-drawer-toggle {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--lab-sp-4);
+  font-size: var(--lab-t-eyebrow);
+  font-weight: var(--lab-w-medium, 500);
+  color: var(--muted-foreground, var(--lab-muted));
+  background: color-mix(in oklab, var(--lab-surface) 50%, transparent);
+  border: 1px solid var(--lab-border);
+  border-radius: var(--lab-r-sm, 6px);
+  min-height: var(--lab-target-compact);
+  padding: var(--lab-sp-2) var(--lab-sp-10);
+  cursor: pointer;
+  transition:
+    background var(--lab-dur-fast) var(--lab-ease),
+    color var(--lab-dur-fast) var(--lab-ease),
+    border-color var(--lab-dur-fast) var(--lab-ease);
+}
+/* A hover that PAINTS A SURFACE has to sit behind a real pointer. On a touch device the hover
+   state sticks after a tap, so the last control touched stays lit as though it were selected. */
+@media (hover: hover) and (pointer: fine) {
+  .lab-hud-drawer-toggle:hover,
+  .lab-btn.lab-hud-drawer-toggle:hover {
+    color: var(--lab-fg);
+    background: var(--lab-sunken);
+    border-color: var(--lab-hairline);
+  }
+}
+.lab-direct-drag-hint {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--lab-sp-4);
+  font-size: var(--lab-t-micro);
+  text-transform: uppercase;
+  letter-spacing: var(--lab-ls-caps);
+  color: var(--lab-muted);
+  animation: lab-pulse 2s infinite ease-in-out;
+}
+@keyframes lab-pulse {
+  0%,
+  100% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+}