@classytic/labs 0.6.0 → 0.7.0

package/styles/scene.css

@@ -6,42 +6,111 @@
    Dark values are adjusted, not inverted: lower saturation, no pure-white fills, the
    same order of light to deep. Observed colours (a white precipitate, NO₂ brown, a
    flame) are NOT here: they are pinned observations (figure.css, the colour engine).
+
+   One ramp (docs/DESIGN-SYSTEM.md, Material). Every material is ONE base colour. Its lit
+   face mixes 20% toward the warm key light; its deep face is the base 0.1 darker in OKLCH
+   lightness at the SAME chroma, then 8% toward the cool shade; a far part (the rear leg of
+   a stand, the back wall of a tank) recedes 40% into the bench. The deep face keeps its
+   chroma on purpose: a plain mix toward a near-neutral dark (the old 22%) drops chroma as
+   fast as lightness, which turned amber into tan, cobalt and violet into slate, and read
+   softer than the hand-tuned tones it replaced. A coloured surface in shade is the same
+   colour, darker, not a greyer one. The key light, the shade, the highlight and the shadow
+   ink are LIGHT, not paint: they are pinned and the same in both themes, so a highlight
+   never turns into a dark streak and a shadow never into a pale halo. Dark mode restates
+   only the bases.
    ───────────────────────────────────────────────────────────────────────────── */
 
 :is(.lab-figure, .stage-root, .lab-activity) {
+  /* the light: warm key from the upper left, cool shade, the highlight and the shadow ink */
+  --scene-light-warm: oklch(0.985 0.02 85);
+  --scene-shade-cool: oklch(0.24 0.03 300);
+  --scene-spec: oklch(0.99 0.012 85 / 0.72);
+  --scene-spec-soft: oklch(0.99 0.012 85 / 0.34);
+  --scene-shadow: oklch(0.25 0.02 260 / 0.16);
   /* the worktop: light stone with a darker front edge */
   --scene-bench-top: oklch(0.9 0.012 80);
   --scene-bench-edge: oklch(0.78 0.014 75);
-  --scene-shadow: oklch(0.25 0.02 260 / 0.16);
-  --scene-steel-lit: oklch(0.94 0.008 250);
+  /* the one steel grey (figure.css maps --fig-metal onto it) */
   --scene-steel: oklch(0.76 0.014 250);
-  --scene-steel-deep: oklch(0.56 0.018 250);
   --scene-glass: oklch(0.97 0.01 220 / 0.55);
   --scene-glass-edge: oklch(0.78 0.05 220);
-  --scene-shine: transparent;
+  /* glass reads by its lit walls: a streak of the highlight down the wall facing the light */
+  --scene-shine: var(--scene-spec-soft);
+  /* amber glass (Solid finish="amber-glass"): the brown glass of a light-sensitive reagent
+     bottle. A real material a learner recognises, so pinned in both themes. Light crosses the
+     most glass at the walls, so they are darkest; the middle, the thinnest path, glows lighter */
+  --scene-amber-glass: oklch(0.43 0.095 56);
+  --scene-amber-glass-core: oklch(0.56 0.12 64);
+  --scene-amber-glass-wall: oklch(0.29 0.065 46);
   --scene-plastic: oklch(0.97 0.004 90);
   --scene-plastic-edge: oklch(0.84 0.008 90);
   --scene-rubber: oklch(0.62 0.16 30);
-  --scene-rubber-deep: oklch(0.5 0.15 28);
   /* labels: ink on paper whatever they sit on, so text reads in both themes */
   --scene-label: oklch(0.99 0 0);
   --scene-label-ink: oklch(0.25 0.01 60);
-  /* object accents: lit, base, deep */
-  --scene-cobalt-lit: oklch(0.74 0.12 262);
+  /* the reading accent, on label paper: spent on a LOCKED (settled, measured) value only, so it is
+     pinned with the paper it sits on (7:1 on --scene-label) */
+  --scene-label-accent: oklch(0.47 0.15 255);
+  /* inspection (kit/scene/cutaway.tsx): the face left by a cut through solid material, its 45 degree
+     hatch, and the cavity seen behind the cut. Neutral and pinned, so the section never reads as a
+     material or a state colour, in either theme. */
+  --scene-section: oklch(0.8 0.012 250);
+  --scene-section-hatch: oklch(0.42 0.015 250);
+  --scene-section-cavity: oklch(0.3 0.012 260);
+  /* object accents: one base each, the lit/deep/far tones derived below */
   --scene-cobalt: oklch(0.56 0.18 262);
-  --scene-cobalt-deep: oklch(0.44 0.17 264);
-  --scene-coral-lit: oklch(0.82 0.1 35);
   --scene-coral: oklch(0.66 0.17 32);
-  --scene-coral-deep: oklch(0.53 0.16 30);
-  --scene-violet-lit: oklch(0.78 0.1 295);
   --scene-violet: oklch(0.58 0.19 292);
-  --scene-violet-deep: oklch(0.46 0.18 290);
-  --scene-amber-lit: oklch(0.9 0.1 85);
   --scene-amber: oklch(0.8 0.15 75);
-  --scene-amber-deep: oklch(0.66 0.14 65);
-  --scene-mint-lit: oklch(0.9 0.07 165);
   --scene-mint: oklch(0.74 0.12 165);
-  --scene-mint-deep: oklch(0.58 0.11 165);
+  /* the derived tones: declared once, so a theme that restates a base re-derives them */
+  --scene-steel-lit: color-mix(in oklab, var(--scene-steel), var(--scene-light-warm) 20%);
+  --scene-steel-deep: color-mix(
+    in oklab,
+    oklch(from var(--scene-steel) calc(l - 0.1) c h),
+    var(--scene-shade-cool) 8%
+  );
+  --scene-steel-far: color-mix(in oklab, var(--scene-steel), var(--scene-bench-top) 40%);
+  --scene-cobalt-lit: color-mix(in oklab, var(--scene-cobalt), var(--scene-light-warm) 20%);
+  --scene-cobalt-deep: color-mix(
+    in oklab,
+    oklch(from var(--scene-cobalt) calc(l - 0.1) c h),
+    var(--scene-shade-cool) 8%
+  );
+  --scene-cobalt-far: color-mix(in oklab, var(--scene-cobalt), var(--scene-bench-top) 40%);
+  --scene-coral-lit: color-mix(in oklab, var(--scene-coral), var(--scene-light-warm) 20%);
+  --scene-coral-deep: color-mix(
+    in oklab,
+    oklch(from var(--scene-coral) calc(l - 0.1) c h),
+    var(--scene-shade-cool) 8%
+  );
+  --scene-coral-far: color-mix(in oklab, var(--scene-coral), var(--scene-bench-top) 40%);
+  --scene-violet-lit: color-mix(in oklab, var(--scene-violet), var(--scene-light-warm) 20%);
+  --scene-violet-deep: color-mix(
+    in oklab,
+    oklch(from var(--scene-violet) calc(l - 0.1) c h),
+    var(--scene-shade-cool) 8%
+  );
+  --scene-violet-far: color-mix(in oklab, var(--scene-violet), var(--scene-bench-top) 40%);
+  --scene-amber-lit: color-mix(in oklab, var(--scene-amber), var(--scene-light-warm) 20%);
+  --scene-amber-deep: color-mix(
+    in oklab,
+    oklch(from var(--scene-amber) calc(l - 0.1) c h),
+    var(--scene-shade-cool) 8%
+  );
+  --scene-amber-far: color-mix(in oklab, var(--scene-amber), var(--scene-bench-top) 40%);
+  --scene-mint-lit: color-mix(in oklab, var(--scene-mint), var(--scene-light-warm) 20%);
+  --scene-mint-deep: color-mix(
+    in oklab,
+    oklch(from var(--scene-mint) calc(l - 0.1) c h),
+    var(--scene-shade-cool) 8%
+  );
+  --scene-mint-far: color-mix(in oklab, var(--scene-mint), var(--scene-bench-top) 40%);
+  --scene-rubber-deep: color-mix(
+    in oklab,
+    oklch(from var(--scene-rubber) calc(l - 0.1) c h),
+    var(--scene-shade-cool) 8%
+  );
   /* people (kit/scene/objects/person.tsx): painted like the accents, so the same in both themes */
   --scene-skin-light: oklch(0.86 0.05 60);
   --scene-skin-medium: oklch(0.76 0.08 58);
@@ -53,20 +122,28 @@
   --scene-shoe: oklch(0.24 0.01 260);
   /* tyres and castors: dark rubber, not the red stopper rubber */
   --scene-tyre: oklch(0.27 0.01 260);
+  /* Science colours (pinned, the same in both themes): what a hot thing and a cold thing look
+     like, and the light an emitter gives. They are physics, not the host's warning or danger UI
+     colours, so a host that re-brands `--destructive` cannot re-colour temperature. */
+  --sci-hot: oklch(0.62 0.2 32);
+  --sci-cold: oklch(0.66 0.12 230);
+  --sci-ember: oklch(0.6 0.2 38);
+  --sci-white-hot: oklch(0.97 0.06 95);
+  --sci-glow: oklch(0.86 0.15 85);
 }
 
-/* Dark: both theme signals, the OS preference and an explicit choice (as figure.css). */
+/* Dark: both theme signals, the OS preference and an explicit choice (as figure.css). Only the
+   bases change; every lit, deep and far tone re-derives from them. `light-dark()` would fold the
+   two blocks into one, but it follows `color-scheme`, which hosts that toggle a `.dark` class
+   rarely set, so the explicit pair stays. */
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]):not(.light) :is(.lab-figure, .stage-root, .lab-activity) {
     --scene-bench-top: oklch(0.34 0.008 80);
     --scene-bench-edge: oklch(0.26 0.008 75);
     --scene-shadow: oklch(0 0 0 / 0.38);
-    --scene-steel-lit: oklch(0.86 0.008 250);
     --scene-steel: oklch(0.66 0.014 250);
-    --scene-steel-deep: oklch(0.46 0.018 250);
     --scene-glass: oklch(0.6 0.02 220 / 0.18);
     --scene-glass-edge: oklch(0.7 0.05 220);
-    --scene-shine: transparent;
     --scene-plastic: oklch(0.9 0.004 90);
     --scene-plastic-edge: oklch(0.72 0.008 90);
   }
@@ -75,128 +152,274 @@
   --scene-bench-top: oklch(0.34 0.008 80);
   --scene-bench-edge: oklch(0.26 0.008 75);
   --scene-shadow: oklch(0 0 0 / 0.38);
-  --scene-steel-lit: oklch(0.86 0.008 250);
   --scene-steel: oklch(0.66 0.014 250);
-  --scene-steel-deep: oklch(0.46 0.018 250);
   --scene-glass: oklch(0.6 0.02 220 / 0.18);
   --scene-glass-edge: oklch(0.7 0.05 220);
-  --scene-shine: transparent;
   --scene-plastic: oklch(0.9 0.004 90);
   --scene-plastic-edge: oklch(0.72 0.008 90);
 }
 
+/* Light added, not painted (kit/scene/materials.tsx `Emitter`): on a dark page an emitter's
+   glow adds to what is behind it; on a light page it stays a plain tint, because adding light
+   to white paper shows nothing. Bounded to the emitter's own circle, so it costs one small layer. */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]):not(.light) .lab-emitter {
+    mix-blend-mode: plus-lighter;
+  }
+}
+:root:is([data-theme="dark"], .dark) .lab-emitter {
+  mix-blend-mode: plus-lighter;
+}
+
+/* More contrast (the OS "increase contrast" setting): the same picture with firmer edges, label
+   plates that are pure paper and near-black ink, and a darker contact shadow, so an object's
+   outline and its footing read at a glance. The material stays rich; only its edges harden.
+   The figure roles and the hairline weight follow below. Dark restates what its theme block
+   restates. */
+@media (prefers-contrast: more) {
+  :is(.lab-figure, .stage-root, .lab-activity) {
+    --scene-shadow: oklch(0.2 0.02 260 / 0.3);
+    --scene-shade-cool: oklch(0.18 0.03 300);
+    --scene-glass-edge: oklch(0.6 0.06 220);
+    --scene-label: oklch(1 0 0);
+    --scene-label-ink: oklch(0.16 0.01 60);
+    --scene-amber-glass-wall: oklch(0.24 0.06 46);
+  }
+  :root:is([data-theme="dark"], .dark) :is(.lab-figure, .stage-root, .lab-activity) {
+    --scene-shadow: oklch(0 0 0 / 0.6);
+    --scene-glass-edge: oklch(0.82 0.06 220);
+  }
+}
+@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]):not(.light) :is(.lab-figure, .stage-root, .lab-activity) {
+    --scene-shadow: oklch(0 0 0 / 0.6);
+    --scene-glass-edge: oklch(0.82 0.06 220);
+  }
+}
+
+/* Forced colours (Windows High Contrast and the like): the user's system palette replaces ours.
+   Every material collapses to two system colours, Canvas for a face and CanvasText for its edge
+   and shaded side, so shapes and line distinctions survive while decorative light (highlights,
+   grain, sheens, contact shadows) drops out: those parts are hidden, and the highlight and
+   shadow inks become Canvas (never transparent, the owner's rule) so a stray use vanishes too.
+   The deep tones are restated because a tone darkened from Canvas is a grey, not a system
+   colour; lit and far mix Canvas with Canvas, so they stay Canvas. Evidence stays: science
+   colours (heat, emitted light) and observed colours (figure.css) keep their values, which is why
+   the SVG opts out of the UA's own forcing (`forced-color-adjust: none`) and takes these instead.
+   `!important` only on the tokens a dark theme block restates, so it outranks those blocks. */
+@media (forced-colors: active) {
+  :is(.lab-figure, .stage-root, .lab-activity) {
+    --scene-light-warm: Canvas;
+    --scene-shade-cool: CanvasText;
+    --scene-spec: Canvas;
+    --scene-spec-soft: Canvas;
+    --scene-shadow: Canvas !important;
+    --scene-bench-top: Canvas !important;
+    --scene-bench-edge: CanvasText !important;
+    --scene-glass: Canvas !important;
+    --scene-glass-edge: CanvasText !important;
+    --scene-amber-glass: Canvas;
+    --scene-amber-glass-core: Canvas;
+    --scene-amber-glass-wall: CanvasText;
+    --scene-plastic: Canvas !important;
+    --scene-plastic-edge: CanvasText !important;
+    --scene-label: Canvas;
+    --scene-label-ink: CanvasText;
+    --scene-label-accent: Highlight;
+    --scene-section: Canvas;
+    --scene-section-hatch: CanvasText;
+    --scene-section-cavity: GrayText;
+    --scene-steel: Canvas !important;
+    --scene-steel-deep: CanvasText;
+    --scene-cobalt: Canvas;
+    --scene-cobalt-deep: CanvasText;
+    --scene-coral: Canvas;
+    --scene-coral-deep: CanvasText;
+    --scene-violet: Canvas;
+    --scene-violet-deep: CanvasText;
+    --scene-amber: Canvas;
+    --scene-amber-deep: CanvasText;
+    --scene-mint: Canvas;
+    --scene-mint-deep: CanvasText;
+    --scene-rubber: Canvas;
+    --scene-rubber-deep: CanvasText;
+  }
+  :is(.lab-figure, .stage-root svg, .lab-activity svg) {
+    forced-color-adjust: none;
+  }
+  /* decorative gradients: brushed grain and sheen layers (highlights and shadows are Canvas) */
+  :is(.lab-figure, .stage-root svg, .lab-activity svg) [data-decor] {
+    display: none;
+  }
+}
+/* Contrast modes for the figure roles (styles/figure.css). They live here because core.css
+   always loads this sheet and figure.css is at its transfer budget; `:root` lifts them over
+   figure.css's own token rule, which loads after this sheet.
+   More contrast: firmer outlines and secondary ink, a heavier hairline (STROKE.hair 1 becomes
+   1.5, the weight every guide, tick and object edge starts from) and a wider text halo. */
+@media (prefers-contrast: more) {
+  :root :is(.lab-figure, .stage-root, .lab-activity) {
+    --fig-outline: color-mix(in oklab, var(--stage-fg) 85%, transparent);
+    --fig-ink-soft: color-mix(in oklab, var(--stage-fg) 82%, var(--stage-bg));
+  }
+  :is(.lab-figure, .stage-root svg, .lab-activity svg) [stroke-width="1"] {
+    stroke-width: 1.5;
+  }
+  :root .fig-text[data-halo="true"] {
+    stroke-width: 3px;
+  }
+}
+/* Figure roles in forced colours (the scene block above says why the SVG opts out of the UA's
+   forcing). Ink and edges are CanvasText on Canvas; the three
+   series hues take three distinct system colours so series stay apart; state tones fall back to
+   ink, because their labels and marks carry the meaning. Observed colours and materials (solids,
+   copper, wood, liquid) and the science colours keep their values: they are the evidence. The
+   focus ring and the grip ring are drawn in Highlight. */
+@media (forced-colors: active) {
+  :root :is(.lab-figure, .stage-root, .lab-activity) {
+    --fig-ink: CanvasText;
+    --lab-ring: Highlight;
+    --lab-focus-ring: 2px solid Highlight;
+    --fig-ink-soft: CanvasText;
+    --fig-paper: Canvas;
+    --fig-outline: CanvasText;
+    --fig-glass: CanvasText;
+    --fig-glass-fill: Canvas;
+    --fig-sheen: Canvas;
+    --fig-shadow: Canvas;
+    --fig-ground: Canvas;
+    --fig-surface: Canvas;
+    --fig-surface-strong: Canvas;
+    --fig-grid: GrayText;
+    --fig-axis: CanvasText;
+    --fig-hue-1: Highlight;
+    --fig-hue-2: LinkText;
+    --fig-hue-3: VisitedText;
+    --fig-good: CanvasText;
+    --fig-warn: CanvasText;
+    --fig-danger: CanvasText;
+    --fig-device: Canvas !important;
+    --fig-device-soft: Canvas !important;
+    --fig-device-edge: CanvasText !important;
+    --fig-cavity: CanvasText !important;
+  }
+  :root .fig-text[data-tone="inverse"] {
+    fill: Canvas;
+  }
+}
 /* ─────────────────────────────────────────────────────────────────────────────
-   Motion (docs/SCENES.md). Springs set by duration and bounce (Apple,
-   WWDC23), sampled into CSS linear() easings: settle 0.3 s bounce 0, release 0.4 s
-   bounce 0.15, reward 0.5 s bounce 0.3, reject 0.3 s bounce 0.2. The duration here is
-   how long the spring takes to come to rest, which is longer than its perceptual one.
-   Under reduced motion the root rule in core.css cuts them short.
+   Motion (docs/SCENES.md). Springs set by duration and bounce (Apple, WWDC23) in
+   src/kit/motion-springs.ts, the one source JS motion uses too, and sampled into CSS
+   linear() easings by scripts/gen-motion-tokens.mjs. The duration here is how long the
+   spring takes to come to rest, which is longer than its perceptual one. Under reduced
+   motion the root rule in core.css cuts them short.
    ───────────────────────────────────────────────────────────────────────────── */
 :is(.lab-figure, .stage-root, .lab-activity) {
-  --motion-settle: 450ms
+  /* motion-tokens:begin (generated by scripts/gen-motion-tokens.mjs; do not edit) */
+  --motion-settle: 441ms
     linear(
       0,
-      0.06,
-      0.186,
-      0.329,
-      0.466,
-      0.584,
-      0.682,
-      0.76,
-      0.821,
-      0.868,
-      0.903,
-      0.929,
-      0.949,
-      0.963,
-      0.973,
-      0.981,
-      0.986,
-      0.99,
-      0.993,
-      0.995,
+      0.058,
+      0.18,
+      0.321,
+      0.455,
+      0.573,
+      0.671,
+      0.75,
+      0.812,
+      0.86,
+      0.897,
+      0.924,
+      0.944,
+      0.96,
+      0.971,
+      0.979,
+      0.985,
+      0.989,
+      0.992,
+      0.994,
+      0.996,
       0.997,
       0.998,
-      0.998,
       0.999,
       1
     );
-  --motion-release: 560ms
+  --motion-release: 565ms
     linear(
       0,
       0.055,
-      0.177,
-      0.324,
-      0.47,
-      0.601,
-      0.71,
-      0.798,
-      0.864,
-      0.914,
-      0.949,
-      0.972,
-      0.988,
-      0.997,
+      0.18,
+      0.329,
+      0.475,
+      0.606,
+      0.716,
+      0.803,
+      0.869,
+      0.917,
+      0.951,
+      0.974,
+      0.989,
+      0.998,
       1.003,
-      1.005,
       1.006,
       1.006,
-      1.005,
+      1.006,
       1.005,
       1.004,
       1.003,
+      1.003,
       1.002,
       1.001,
       1
     );
-  --motion-reward: 850ms
+  --motion-reward: 819ms
     linear(
       0,
-      0.08,
-      0.256,
-      0.459,
-      0.646,
-      0.797,
-      0.908,
-      0.981,
-      1.023,
-      1.042,
+      0.075,
+      0.242,
+      0.437,
+      0.62,
+      0.773,
+      0.887,
+      0.965,
+      1.013,
+      1.037,
       1.046,
-      1.042,
-      1.033,
-      1.024,
-      1.015,
-      1.009,
-      1.004,
-      1.001,
-      0.999,
+      1.044,
+      1.037,
+      1.028,
+      1.02,
+      1.012,
+      1.006,
+      1.002,
+      1,
+      0.998,
       0.998,
       0.998,
       0.998,
-      0.999,
       0.999,
       1
     );
-  --motion-reject: 420ms
+  --motion-reject: 428ms
     linear(
       0,
-      0.055,
-      0.181,
-      0.333,
-      0.485,
-      0.621,
-      0.735,
-      0.825,
-      0.893,
-      0.941,
-      0.974,
-      0.995,
-      1.007,
-      1.013,
-      1.015,
+      0.057,
+      0.187,
+      0.342,
+      0.496,
+      0.633,
+      0.747,
+      0.835,
+      0.901,
+      0.948,
+      0.979,
+      0.998,
+      1.009,
+      1.014,
       1.015,
-      1.013,
-      1.011,
+      1.014,
+      1.012,
+      1.01,
       1.008,
       1.006,
       1.004,
@@ -205,4 +428,5 @@
       1.001,
       1
     );
+  /* motion-tokens:end */
 }

package/styles/shell.css

@@ -107,6 +107,61 @@
   width: auto;
 }
 
+/* On a phone the keys are one aligned set, not a ragged centred wrap of mixed widths: a two-column
+   grid where every value control (stepper, dropdown, slider, segmented choice) takes the full width
+   and plain keys pair up at equal width. Unlayered and keyed to the lab's own width, like the shell
+   structure below. A dropdown's native input stays out of the grid flow. */
+@container lab-activity (max-width: 559px) {
+  .lab-shell-keys {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    align-items: stretch;
+    gap: var(--lab-sp-10, 10px);
+  }
+  .lab-shell-keys > :not(input, select) {
+    width: 100%;
+    min-width: 0;
+    margin: 0;
+  }
+  .lab-shell-keys
+    > :is(
+      details,
+      [data-lab-control="stepper"],
+      [data-slot="select-trigger"],
+      [data-slot="toggle-group"],
+      .lab-field,
+      label
+    ) {
+    grid-column: 1 / -1;
+  }
+  .lab-shell-keys > [data-lab-control="stepper"] {
+    justify-content: space-between;
+  }
+  .lab-shell-keys > :is(input, select) {
+    position: absolute;
+  }
+  /* a lone last key takes the whole row instead of sitting in half of it */
+  .lab-shell-keys > button:last-child:nth-child(odd of :not(input, select)) {
+    grid-column: 1 / -1;
+  }
+}
+
+/* The status line as quiet chips: they wrap as whole units, so a wrapped line never starts with a
+   stray separator dot. Its own class: `.lab-readout` is the instrument card in core/components.css,
+   a grid, and sharing that name stacked every lab's chips into a column in the lesson viewer. */
+.lab-status {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--lab-sp-6);
+  margin: 0;
+}
+.lab-status > * {
+  border-radius: 999px;
+  padding: 2px var(--lab-sp-10);
+  background: color-mix(in oklab, var(--lab-fg, currentColor) 6%, transparent);
+}
+
 /* "not quite": a warm orange, gentler than an error red; the wrong answer is a step, not a failure */
 .lab-activity[data-frame] {
   --shell-miss: oklch(0.66 0.15 52);
@@ -130,6 +185,12 @@
 .lab-shell-body {
   gap: var(--lab-sp-24);
 }
+/* Passive formula layout can overflow its body without painting there (KaTeX fraction
+   struts do this). Keep the progress controls above that hit area, in their own chrome. */
+.lab-shell-progress {
+  position: relative;
+  z-index: var(--lab-z-raised);
+}
 .lab-shell-stage {
   align-content: start;
   gap: var(--lab-sp-16);

package/styles.css

@@ -6,9 +6,9 @@
  *
  * It is the two entries together, for a host that wants one import:
  *
- * - `tailwind.css`: the Tailwind scan for the AUTHORING surface (`@classytic/labs/blocks`: the icon
- *   picker, the rows editor, the feedback fields), which writes utility classes that YOUR Tailwind
- *   build generates. Without it those popovers render unstyled.
+ * - `tailwind.css`: the Tailwind scan. The lab runtime (the shell, the kit's controls, many labs)
+ *   and the authoring surface (`@classytic/labs/blocks`) write utility classes that YOUR Tailwind
+ *   build generates. Without it labs and their editors render unstyled.
  * - `styles/runtime.css`: the hand-written sheets that own the lab RUNTIME (`.lab-*`, `.physics-*`
  *   and friends), styled against the host's shadcn tokens so labs adopt the app theme.
  *

package/tailwind.css

@@ -1,16 +1,22 @@
 /*!
  * @classytic/labs/tailwind.css: the Tailwind scan, and nothing else.
  *
- * The AUTHORING surface (`@classytic/labs/blocks`: the icon picker, the rows editor, the feedback
- * fields) writes Tailwind utility classes that YOUR Tailwind build generates. Import this from the
- * same stylesheet that imports Tailwind, so the scan reaches this package's dist:
+ * The lab RUNTIME and the authoring surface both write Tailwind utility classes that YOUR Tailwind
+ * build generates: the shell's layout and type (`src/kit/shell`, `SHELL_*` in kit/appearance), the
+ * kit's controls, many labs' HTML, and the `/blocks` editors. Import this from the same stylesheet
+ * that imports Tailwind, so the scan reaches this package's dist:
  *
  *   @import "tailwindcss";
  *   @import "@classytic/labs/tailwind.css";
  *
- * It adds no rules of its own. The lab runtime styles are a separate entry,
- * `@classytic/labs/styles/runtime.css`, so a host can load them only on the routes that render
- * labs. `styles.css` is both entries together, for hosts that want one import.
+ * It adds no rules of its own. The package's own CSS is a separate entry,
+ * `@classytic/labs/styles/runtime.css` (or core.css + figure.css + subject sheets), so a host can
+ * load it only on the routes that render labs. Both are needed wherever a lab renders.
+ *
+ * The scan covers all of dist. Narrowing it buys almost nothing: measured with Tailwind 4.3 over
+ * src, scanning only the JSX modules instead of every module changes the generated utilities by
+ * 0.2 KB of 52.8 KB (32 B gzip), because the utility strings live in the same folders as the rest.
+ * tests/policy/tailwind-scan.test.ts fails if a narrowed scan misses a module that uses utilities.
  */
 
 /* Compiled JS only; .d.mts type definitions carry no classes worth scanning. */