studio-engine 0.129.0 → 0.130.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ed5be658c4ba3547da2294995bc7c13e7181bccbd5710fd07d84c7fb0af95a2c
-  data.tar.gz: d48d2fbebaee5b7e33a22c16bc2f6d40b1afc161d0dacb6eb42d51a8e36cd4fe
+  metadata.gz: 00ce81b9c4f82a619f86521fd4495d07e8a2a81f9f1eb5f15963e26f0cb038aa
+  data.tar.gz: ed8a7169b6322c577ca796c974f4561bd3c4a2e29fa7da917cd28aec84f401b5
 SHA512:
-  metadata.gz: 99e6c74a4c11320449ee3b58d89b56712067f02bc6b2228d602f4ec942b06617b77960e05d8d29dc03dda95e5c92868d4da18bd67922494fbe84abb40b6e308f
-  data.tar.gz: 353b2199a4a651ee65a0d00c448c8273731b9a4bebbb5c5eff97fe97ba57177ae8f1a47ab0fa6d4b9f2f99856c46a8992c62c84d4319db28116b0dd557c05adf
+  metadata.gz: 4f0f640580ed2f77fdc6093e9a90f2edfc12bf2ba6925fc8ad6b24cd5587668c84d465090be866dcf19c5f536cb38ccbff123f078a52dbee52f8b2f7d73d302d
+  data.tar.gz: c02e3417b8f8eb1bb4b6b38706ddf79561959b61cacb7317a9465825c1724097c3b77fc5c4cf131f0011dff852b0c430c90f660277fd0067100a611cec10ec55

data/CHANGELOG.md

@@ -4,6 +4,47 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
 
 ## Unreleased
 
+## 0.130.0 — 2026-11-05
+
+### Added
+
+- **Section headers that stack under the page header: `studio/_section_header`.** Render it
+  as the first child of a `<section>`. The title sticks directly under the page row, takes a
+  bar (solid in light and dark, glass under glass), and the next section's header takes its
+  place, by CSS sticky and no scroll script. `/admin/style` uses it on every section,
+  including a host's own. It joins the pinned stack as one layer, `section`: a new
+  `data-pin-section`, and `--pin-section-top`, `-h` and `-bottom`. Only the stuck header
+  counts, so `--pin-stack-bottom` and a table's sticky header sit under it. New classes:
+  `section-header`, `section-target` and `section-subtarget`, which
+  replace a hand-written `scroll-margin-top`. The publisher now reads the layers once more after
+  a settle and after a layer's top moves, so a layer under a layer does not keep a stale line.
+  Detail: `docs/PAGE_HEADER.md`.
+### Changed
+
+- **A lit button's gradient centers on its own colour.** Every lit variant steps lightness 0.06 up
+  and 0.06 down from its fill, with chroma and hue unchanged, so the painted midpoint is the token.
+  The lit primary now centers on `--color-cta`, the violet a `text-primary` word paints, instead of
+  sitting darker and more saturated. White on the default primary is about 3.1:1 at the midpoint;
+  Alex McRitchie accepted that so the button and the brand word read as one purple. The semantic
+  fills still hold 4.5:1 there. `/lab/hero_button` shows a `text-primary` word beside the button.
+
+- **Tricks starts with the buttons, then what you can add to them.** A new Button tricks group
+  sits directly under Buttons: rotating edge glow, border glow, sheen, pulse, fizz, hold to confirm,
+  confetti burst and cannons. Each sits on a real `.btn` or fires from one, with its code to copy.
+  The other groups keep their order, with one short sentence each at most.
+- **`.studio-team-glow` is now `.edge-rotate-glow`, with `--edge-rotate-glow-*` knobs.** The old class
+  and knobs are a deprecated alias and paint the same, so no host has to change.
+- **Fizz works around any button.** `render layout: "studio/fizz", locals: { seed: "save" }` wraps a
+  button in a `.fizz-stack`. The hold button's markup and selectors are unchanged. The only tie was
+  the `.hold-stack` selector.
+- **Trial: a dark, full-size lit button's fill drops from 0.94 to 0.85 alpha** (`--lit-fill-alpha`).
+
+### Fixed
+
+- **The button tricks keep a lit button lit.** A lit button's `::after` closed the hole in the glow's
+  bloom, which washed its whole face. The sheen clipped the top highlight, and the pulse dropped the
+  lit shadow. `.studio-border-glow` on a button no longer ends its halo on a hard box edge.
+
 ## 0.129.0 — 2026-11-05
 
 ### Changed

data/README.md

@@ -294,6 +294,11 @@ An admin page's title: a plain header at rest, a bar once stuck under the navbar
 in the pinned stack so a table's sticky header sits under it
 ([`docs/PAGE_HEADER.md`](docs/PAGE_HEADER.md)).
 
+### The section header — `studio/_section_header`
+
+A section's title that sticks under the page row until the next section's takes its place,
+with a bar once stuck ([`docs/PAGE_HEADER.md`](docs/PAGE_HEADER.md#the-section-header)).
+
 ```erb
 <%= render "studio/page_header", title: "Models", meta: "v1.2.3", label: "Models",
       tabs: [{ label: "Users", href: users_path, current: "page" }, { label: "Teams", href: teams_path }] %>

data/app/assets/tailwind/studio_engine/engine-motion.css

@@ -19,6 +19,7 @@
   Effect:
     .text-gradient        gradient-clipped text fill          (authored fresh)
     .studio-glow          soft themed glow halo               (authored fresh)
+    .edge-rotate-glow     a glow rotating around the edge     (ported, TM)
     .surface-glass        frosted translucent glass panel     (authored fresh)
     .conic-surface        slow rotating conic-gradient wash   (authored fresh)
     .pulse-cta            attention pulse/glow for a CTA       (ported, TM)
@@ -26,6 +27,7 @@
   Action:
     .hold-btn             press-and-hold confirm button       (ported, TM)
     .hold-stack/.fizz-bit the carbonation behind it           (ported, TM)
+    .fizz-stack           the same bubbles around any button  (studio/_fizz)
     .email-reject         email field rejection shake + fade  (extracted, TM)
 
   Loader:
@@ -167,6 +169,16 @@
   transform: translateZ(0);
 }
 
+/* On a button the halo needs room, as .edge-rotate-glow's bloom does. Mask applies
+   after filter, so the gradient stops at the padding box and the transparent border
+   is empty room for the blur to fade into. Without it the halo ends on a hard box. */
+.btn.studio-border-glow::after {
+  inset: -46px;
+  padding: 10px;
+  border: 36px solid transparent;
+  background-clip: padding-box;
+}
+
 @keyframes studioBorderGlowSteam {
   0% {
     background-position: var(--studio-border-glow-offset, 0%) 0;
@@ -521,37 +533,32 @@
 }
 
 /* =============================================================================
-   9b. studio-team-glow — rotating "selected card" ring glow, one or two colors
-   Ported from turf-monster's per-team selected-card glow (.holo-border-glow):
-   a conic-gradient ring rotates around the element's edge, with a blurred bloom
-   twin behind it. DISTINCT from .studio-border-glow (an animated RAINBOW border)
-   and .studio-glow (a static soft box-shadow halo) — this is the "this card is
-   selected / live" ring.
-
-   The color is a CSS var (default the CTA role, so purple on McRitchie Studio),
-   just like TM's per-team --glow-c. TWO opposed wedges travel the edge, and they
-   can carry two colors: --studio-team-glow-color-b defaults to the first, so a
-   one-color caller sees no change, and a caller with a pair to show (a Pokémon's
-   two types) gets one per wedge. The wedges are swept by animating a registered
-}
-   @property angle (rotating the GRADIENT, not the element — so no oversized-child
-@layer components {
-   clipping trick is needed). Opacity is a var (--studio-team-glow-opacity) with a
-   transition, so a consumer can fade the glow in/out (the living style guide
-   slides it between step cards as a modal's step machine advances).
-
-   THE HOST MAY CARRY ITS OWN BACKGROUND — the ring cuts the host's box out of
-   both wedge layers, so only the band around the edge paints. That hole is what
-   makes the primitive work in the two shapes its consumers need:
+   9b. edge-rotate-glow — a glow that rotates around an element's edge
+   Ported from turf-monster's selected-card glow (.holo-border-glow): a conic
+   gradient rotates around the element's edge, with a blurred bloom twin behind it.
+   DISTINCT from .studio-border-glow (an animated RAINBOW border) and .studio-glow
+   (a static soft box-shadow halo).
+
+   The color is a CSS var, default the CTA role. TWO opposed wedges travel the
+   edge: --edge-rotate-glow-color-b defaults to the first color, so a one-color
+   caller sees one color and a caller with a pair gets one per wedge. The wedges
+   are swept by animating a registered @property angle (rotating the GRADIENT, not
+   the element, so no oversized-child clipping trick is needed). Opacity is a var
+   with a transition, so a caller can fade the glow in and out (the living style
+   guide slides it between step cards as a modal's step machine advances).
+
+   THE HOST MAY CARRY ITS OWN BACKGROUND. The ring cuts the host's box out of both
+   wedge layers, so only the band around the edge paints. That hole is what makes
+   the primitive work in the two shapes its consumers need:
 
      · the WRAPPER shape (TM's holo-wrap / holo-card split) — a bare host with an
        opaque child in front. The engine's style/_modal_specimen and the hub's
        release-phase-meter both ship this. Unchanged by the hole: the child was
        already covering that interior.
-     · the CARD shape — the host IS the opaque surface. This is what a live board
-       card needs, because it cannot take a wrapper at all: Turbo targets the card
-       element for both replace and remove, so a wrapper is orphaned every time a
-       card leaves the board.
+     · the CARD shape — the host IS the opaque surface, as a .btn is. A live board
+       card needs this too, because it cannot take a wrapper at all: Turbo targets
+       the card element for both replace and remove, so a wrapper is orphaned every
+       time a card leaves the board.
 
    Without the hole the card shape is impossible, and not for a tunable reason:
    both layers are pseudo-elements at z-index -1 / -2, and CSS paints an element's
@@ -563,59 +570,87 @@
    The host must still NOT be clipped by an overflow-hidden ancestor near its
    border, or the ring is cut off with it.
 
-   Usage:  <div class="studio-team-glow rounded-xl bg-surface p-5">Selected</div>
+   Usage:  <button class="btn btn-primary edge-rotate-glow">Save</button>
            wrapper shape, when the face is its own element:
-             <div class="studio-team-glow rounded-xl">
+             <div class="edge-rotate-glow rounded-xl">
                <div class="rounded-xl bg-surface p-5">Selected</div>
              </div>
-           red glow:   style="--studio-team-glow-color: #E11D48"
-           two types:  style="--studio-team-glow-color: #F08030;
-                              --studio-team-glow-color-b: #6890F0"
-   Tune:   --studio-team-glow-color / -color-b / -opacity / -speed / -thickness /
+           one color:  style="--edge-rotate-glow-color: #E11D48"
+           two colors: style="--edge-rotate-glow-color: #F08030;
+                              --edge-rotate-glow-color-b: #6890F0"
+   Tune:   --edge-rotate-glow-color / -color-b / -opacity / -speed / -thickness /
            -bloom
+
+   DEPRECATED ALIAS: .studio-team-glow and its --studio-team-glow-* knobs. Every
+   old name keeps working, because hub and Turf views, scripts and e2e use them on
+   their main branches. Remove the alias only after both have moved. An old knob
+   on the new class also still applies; a new knob on the old class is not
+   supported, so move the class and its knobs together.
    ========================================================================== */
 }
-@property --studio-team-glow-angle {
+@property --edge-rotate-glow-angle {
   syntax: "<angle>";
   inherits: false;
   initial-value: 0deg;
 }
 @layer components {
+.edge-rotate-glow {
+  /* Each default reads the old knob first, so a host that moves the class name
+     and leaves an old knob in its inline style keeps its value. */
+  --edge-rotate-glow-color: var(--studio-team-glow-color, var(--color-cta));
+  /* The SECOND wedge's color. Defaults to the first. Resolved on this element, so
+     an inline --edge-rotate-glow-color override feeds this default too. */
+  --edge-rotate-glow-color-b: var(--studio-team-glow-color-b, var(--edge-rotate-glow-color));
+  --edge-rotate-glow-opacity: var(--studio-team-glow-opacity, 1);
+  --edge-rotate-glow-speed: var(--studio-team-glow-speed, 4s);
+  --edge-rotate-glow-thickness: var(--studio-team-glow-thickness, 4px);
+  --edge-rotate-glow-bloom: var(--studio-team-glow-bloom, 10px);
+}
+/* DEPRECATED ALIAS. See the note above. The old knobs keep their old defaults on
+   the old class, at the old specificity, so a consumer's own rule or inline style
+   wins exactly as it did; the new knobs then read them. */
 .studio-team-glow {
   --studio-team-glow-color: var(--color-cta);
-  /* The SECOND wedge's color. Defaults to the first, so a one-color caller sees
-     no change; a caller with two colors to show (a Pokémon's two types, a pair of
-     brand colors) gets one per wedge. Resolved on this element, so an inline
-     --studio-team-glow-color override feeds this default too. */
   --studio-team-glow-color-b: var(--studio-team-glow-color);
   --studio-team-glow-opacity: 1;
   --studio-team-glow-speed: 4s;
   --studio-team-glow-thickness: 4px;
   --studio-team-glow-bloom: 10px;
+  --edge-rotate-glow-color: var(--studio-team-glow-color);
+  --edge-rotate-glow-color-b: var(--studio-team-glow-color-b);
+  --edge-rotate-glow-opacity: var(--studio-team-glow-opacity);
+  --edge-rotate-glow-speed: var(--studio-team-glow-speed);
+  --edge-rotate-glow-thickness: var(--studio-team-glow-thickness);
+  --edge-rotate-glow-bloom: var(--studio-team-glow-bloom);
+}
+.edge-rotate-glow,
+.studio-team-glow {
   position: relative;
   isolation: isolate;
 }
+.edge-rotate-glow::before,
+.edge-rotate-glow::after,
 .studio-team-glow::before,
 .studio-team-glow::after {
   content: "";
   position: absolute;
-  inset: calc(-1 * var(--studio-team-glow-thickness));
+  inset: calc(-1 * var(--edge-rotate-glow-thickness));
   border-radius: inherit;
   z-index: -1;
   pointer-events: none;
-  opacity: var(--studio-team-glow-opacity);
+  opacity: var(--edge-rotate-glow-opacity);
   transition: opacity 0.4s ease;
   /* Two opposed wedges so two stretches of the ring glow at once. */
   background: conic-gradient(
-    from var(--studio-team-glow-angle),
+    from var(--edge-rotate-glow-angle),
     transparent 0%,
-    var(--studio-team-glow-color) 12%,
+    var(--edge-rotate-glow-color) 12%,
     transparent 33%,
     transparent 50%,
-    var(--studio-team-glow-color-b) 62%,
+    var(--edge-rotate-glow-color-b) 62%,
     transparent 83%
   );
-  animation: studio-team-glow-spin var(--studio-team-glow-speed) linear infinite;
+  animation: edge-rotate-glow-spin var(--edge-rotate-glow-speed) linear infinite;
   /* THE HOST'S OWN BOX IS PUNCHED OUT of both wedge layers, so what paints is the
      band around the edge and nothing else. `padding` makes each layer's CONTENT
      box exactly the host's box; mask-composite then removes that box from the
@@ -625,7 +660,7 @@
      itself for replace and remove, so a wrapper is orphaned on every remove. With
      the hole cut here the ring rides the card directly. For a wrapper host this
      changes nothing visible: the child was already covering that interior. */
-  padding: var(--studio-team-glow-thickness);
+  padding: var(--edge-rotate-glow-thickness);
   -webkit-mask:
     linear-gradient(#000 0 0) content-box,
     linear-gradient(#000 0 0);
@@ -635,6 +670,7 @@
     linear-gradient(#000 0 0);
   mask-composite: exclude;
 }
+.edge-rotate-glow::after,
 .studio-team-glow::after {
   /* Blurred bloom twin, a touch larger: its wedges reach 4px PAST the ring, which
      is what makes the bloom read as a halo, not a soft edge on the ring. Drop the
@@ -647,19 +683,21 @@
      card's own or the wrapper child's). Mask applies AFTER filter, which is why
      the reach has to out-measure the blur — without it the halo ends on a hard
      line at the layer's own box. */
-  inset: calc(-1 * (var(--studio-team-glow-thickness) + 4px + var(--studio-team-glow-bloom) * 2));
-  padding: calc(var(--studio-team-glow-thickness) + 4px);
-  border: calc(var(--studio-team-glow-bloom) * 2) solid transparent;
+  inset: calc(-1 * (var(--edge-rotate-glow-thickness) + 4px + var(--edge-rotate-glow-bloom) * 2));
+  padding: calc(var(--edge-rotate-glow-thickness) + 4px);
+  border: calc(var(--edge-rotate-glow-bloom) * 2) solid transparent;
   /* The wedges stop at the padding box (host + ring + the 4px); the border is empty
      room the blur is allowed to spread into. */
   background-clip: padding-box;
   z-index: -2;
-  filter: blur(var(--studio-team-glow-bloom)) saturate(1.35);
+  filter: blur(var(--edge-rotate-glow-bloom)) saturate(1.35);
 }
-@keyframes studio-team-glow-spin {
-  to { --studio-team-glow-angle: 360deg; }
+@keyframes edge-rotate-glow-spin {
+  to { --edge-rotate-glow-angle: 360deg; }
 }
 @media (prefers-reduced-motion: reduce) {
+  .edge-rotate-glow::before,
+  .edge-rotate-glow::after,
   .studio-team-glow::before,
   .studio-team-glow::after { animation: none; }
 }
@@ -1262,7 +1300,7 @@ body.modal-open { overflow: visible; }
    Named pulse-cta (not btn-pulse) so it stays a plain motion-layer effect, not a
    .btn component variant the engine.css component contract would demand.
 
-   Usage:  <button class="btn btn-primary pulse-cta">Change Username</button>
+   Usage:  <button class="btn btn-primary pulse-cta">Save</button>
            green pulse:  style="--pulse-cta-color: var(--color-success)"
    Tune:   --pulse-cta-color / --pulse-cta-speed / --pulse-cta-scale /
            --pulse-cta-ring / --pulse-cta-strength
@@ -1278,19 +1316,19 @@ body.modal-open { overflow: visible; }
 @keyframes pulse-cta {
   0% {
     transform: scale(1);
-    box-shadow: 0 0 0 0 color-mix(in srgb, var(--pulse-cta-color) calc(var(--pulse-cta-strength) * 100%), transparent);
+    box-shadow: var(--btn-lit-rest, 0 0 #0000), 0 0 0 0 color-mix(in srgb, var(--pulse-cta-color) calc(var(--pulse-cta-strength) * 100%), transparent);
   }
   10% {
     transform: scale(var(--pulse-cta-scale));
-    box-shadow: 0 0 0 calc(var(--pulse-cta-ring) * 0.6) color-mix(in srgb, var(--pulse-cta-color) calc(var(--pulse-cta-strength) * 50%), transparent);
+    box-shadow: var(--btn-lit-rest, 0 0 #0000), 0 0 0 calc(var(--pulse-cta-ring) * 0.6) color-mix(in srgb, var(--pulse-cta-color) calc(var(--pulse-cta-strength) * 50%), transparent);
   }
   22% {
     transform: scale(1);
-    box-shadow: 0 0 0 var(--pulse-cta-ring) color-mix(in srgb, var(--pulse-cta-color) 0%, transparent);
+    box-shadow: var(--btn-lit-rest, 0 0 #0000), 0 0 0 var(--pulse-cta-ring) color-mix(in srgb, var(--pulse-cta-color) 0%, transparent);
   }
   100% {
     transform: scale(1);
-    box-shadow: 0 0 0 0 color-mix(in srgb, var(--pulse-cta-color) 0%, transparent);
+    box-shadow: var(--btn-lit-rest, 0 0 #0000), 0 0 0 0 color-mix(in srgb, var(--pulse-cta-color) 0%, transparent);
   }
 }
 @media (prefers-reduced-motion: reduce) {
@@ -1866,6 +1904,58 @@ body.modal-open { overflow: visible; }
   opacity: 0;
 }
 
+/* FIZZ AROUND ANY BUTTON (studio/_fizz). The bubbles have no tie to the hold: the
+   only thing that held them to it was this section's .hold-stack selector, and the
+   hold's own states. So .fizz-stack gives them the same stack without a hold, with
+   a neutral name, and it rests and answers hover as a hold button does. */
+.fizz-stack {
+  position: relative;
+  display: inline-flex;
+  isolation: isolate;
+}
+
+.fizz-stack > .fizz-layer {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.fizz-stack > :not(.fizz-layer) {
+  position: relative;
+  z-index: 1;
+}
+
+.fizz-stack .fizz-bit {
+  position: absolute;
+  width: var(--fs, 4px);
+  height: var(--fs, 4px);
+  margin-top: calc(var(--fs, 4px) / -2);
+  margin-left: calc(var(--fs, 4px) / -2);
+  border-radius: 100px;
+  background: var(--fc, hsl(292 92% 70%));
+  box-shadow:
+    0 0 6px var(--fc, hsl(292 92% 70%)),
+    0 0 0 0.5px rgb(255 255 255 / 0.35);
+  opacity: 0;
+  will-change: transform, opacity;
+  animation: fizz-simmer var(--ft, 1.8s) linear var(--fd, 0s) infinite;
+}
+
+.fizz-stack:not(.fizz-lively):hover .fizz-bit,
+.fizz-stack.fizz-lively .fizz-bit {
+  animation: fizz-boil calc(var(--ft, 1.8s) * 0.62) linear calc(var(--fd, 0s) * 0.35) infinite;
+}
+
+.fizz-stack > .fizz-layer-extra {
+  opacity: 0;
+  transition: opacity 0.45s ease;
+}
+
+.fizz-stack.fizz-lively:hover > .fizz-layer-extra {
+  opacity: 1;
+}
+
 /* THE PORTAL (studio/hold_button, fizz_portal: true). A button inside an
    overflow-hidden card has its bubbles cut off at the card's edge, because the
    layer is absolutely positioned inside the card's clip. With the option set,
@@ -1967,7 +2057,9 @@ body.modal-open { overflow: visible; }
   .hold-stack .fizz-bit,
   .hold-stack .hold-fizz-extra,
   .hold-fizz-portal .fizz-bit,
-  .hold-fizz-portal .hold-fizz-extra {
+  .hold-fizz-portal .hold-fizz-extra,
+  .fizz-stack .fizz-bit,
+  .fizz-stack .fizz-layer-extra {
     animation: none !important;
     opacity: 0 !important;
     transition: none !important;

data/app/assets/tailwind/studio_engine/engine.css

@@ -368,6 +368,74 @@ body.modal-open .studio-app-banner {
   margin-left: auto;
 }
 
+/* -- The section header (studio/_section_header, docs/PAGE_HEADER.md) --------
+   A section's title that sticks under the rest of the stack, inside its own <section>,
+   so the next section's header takes its place with no scroll script. At rest it reads as
+   a normal title. Stuck it takes the page header's bar, so content does not show through
+   it. studio/pinned_stack says which one is stuck. Its box never changes between the two,
+   so the change moves nothing. One line, always: a long title ends in an ellipsis on the
+   bar, the height is known, and the whole text stays in the heading.
+
+   IT STICKS ONLY ONCE THE PUBLISHER RUNS (html[data-pin-live]). With no publisher no bar
+   ever comes, and a clear title would lie over the page; in the flow it is a plain title.
+
+   A SHORT SCREEN KEEPS ITS ROOM. Under 36rem tall, a small phone or one on its side, the
+   header stays in the flow: the navbar and the page row already take a quarter of the height.
+
+   z-index is one tier under the page row, set by the partial, so a header being pushed out
+   passes under the row and over the content. --section-header-h is what a target inside a
+   section adds to its scroll margin, so it lands below the bar. */
+:root {
+  --section-header-h: 2.25rem;
+}
+
+@utility section-header {
+  @apply text-heading;
+  position: relative;
+  min-width: 0;
+  min-height: var(--section-header-h);
+  padding-block: 0.25rem;
+  margin-block-end: 0.25rem;
+  border-block: 1px solid transparent;
+  background-color: transparent;
+  font-size: calc(var(--type-base, 16px) * 1.25);
+  font-weight: 700;
+  line-height: 1.3;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  transition: background-color 150ms ease, border-color 150ms ease;
+
+  html[data-pin-live] & {
+    @media (height >= 36rem) {
+      position: sticky;
+    }
+  }
+
+  &[data-stuck] {
+    @apply bg-surface border-subtle;
+    border-top-color: transparent;
+  }
+}
+
+/* Where a jump lands. A jump goes deep, so what counts is the stack once PINNED, with the
+   navbar compact and the page row stuck: heights, not --pin-section-top, whose value at the
+   top of the page holds the row's rest place and whatever scrolls away above it. So this one
+   composes, which a thing placed on screen must not: a margin is read once, at the jump. Less
+   two pixels, so the header has left its place on a fractional height and its title shows on
+   the bar.
+
+   A JUMP FROM THE TOP OF THE PAGE reads the navbar still tall, and lands by the navbar's
+   collapse below the line. Landing short is safe, the title shows. Landing past is safe too,
+   since the bar holds the title. A target inside a section: a bar's height lower. */
+@utility section-target {
+  scroll-margin-top: calc(var(--nav-h, 5rem) + var(--pin-page-h, 0px) - 2px);
+}
+
+@utility section-subtarget {
+  scroll-margin-top: calc(var(--nav-h, 5rem) + var(--pin-page-h, 0px) + var(--section-header-h));
+}
+
 /* -- Scrims: tints and shades ----------------------------------------------
    A scrim is the wash laid over media (a photo, a video) so text reads on it.
    It comes in two TONES, and the tone is a design decision, not a colour pick:
@@ -1514,14 +1582,36 @@ html[data-theme-flip]::view-transition-new(*) {
       }
     }
 
+    /* THE SECTION HEADER UNDER GLASS, the same bar one layer down. While it is stuck the bar
+       under the row owns the round corners and the shadow: the row goes square, or the page
+       would show in the notches between the two. */
+    html[data-surface-style="glass"] .section-header[data-stuck] {
+      background-color: var(--color-page);
+      border-top-color: transparent;
+      border-bottom-color: var(--surface-glass-line);
+      border-radius: 0 0 0.875rem 0.875rem;
+      box-shadow: var(--surface-glass-shadow);
+    }
+    @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+      html[data-surface-style="glass"] .section-header[data-stuck] {
+        background-color: color-mix(in srgb, var(--color-page) 62%, transparent);
+        -webkit-backdrop-filter: blur(18px) saturate(140%);
+        backdrop-filter: blur(18px) saturate(140%);
+      }
+    }
+    html[data-surface-style="glass"][data-pin-section-stuck] .page-header[data-stuck] {
+      border-radius: 0;
+      box-shadow: var(--surface-glass-highlight);
+    }
+
     /* LIT FROM ABOVE, under the same opt-in: one light for buttons, badges and inputs, from the
        direction of the cards' top highlight. Four shadows: top light, bottom shade, contact, and
        a glow in the button's own color.
 
-       THE GRADIENT KEEPS ITS CHROMA. Both stops are built in oklch from the token, a brighter
-       and an equally saturated top over a deep saturated bottom; mixing toward black or grey is
-       what mutes a button. White text is held to 4.5:1 against the midpoint behind it, so the
-       top stop reads lower, as it does in the rule this follows.
+       THE GRADIENT KEEPS ITS CHROMA. Both stops are built in oklch from the token, the same step
+       lighter and darker at the token's own chroma; mixing toward black or grey is what mutes a
+       button. The midpoint is the token, so white text holds 4.5:1 there on the semantic fills
+       and about 3:1 on the default primary, which Alex McRitchie accepted to match the brand word.
 
        WHO GETS WHAT. Every full-size filled button: gradient, top, bottom, contact and a glow in
        its own color, on the same 0.15 lightness range. A .btn-sm has no glow, since a toolbar or
@@ -1569,16 +1659,17 @@ html[data-theme-flip]::view-transition-new(*) {
       --lit-badge: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 1px 1px rgb(0 0 0 / 0.35);
       --lit-input: inset 0 1px 2px rgb(0 0 0 / 0.4), inset 0 -1px 0 rgb(255 255 255 / 0.06);
     }
-    /* Stops: the app's primary is often too light for white, so it steps down its own lightness;
-       the semantic fills already hold 4.5:1, so the midpoint stays on the fill. */
-    html[data-surface-style="glass"] .btn-primary {
-      --lit-top-stop: oklch(from var(--color-cta) calc(l - 0.03) calc(c + 0.03) h / var(--lit-fill-alpha, 1));
-      --lit-low-stop: oklch(from var(--color-cta) calc(l - 0.18) calc(c + 0.05) h / var(--lit-fill-alpha, 1));
-    }
-    html[data-surface-style="glass"] :is(.btn-secondary, .btn-danger, .btn-warning, .btn-success) {
-      --lit-top-stop: oklch(from var(--lit-fill) calc(l + 0.075) calc(c + 0.03) h / var(--lit-fill-alpha, 1));
-      --lit-low-stop: oklch(from var(--lit-fill) calc(l - 0.075) calc(c + 0.03) h / var(--lit-fill-alpha, 1));
-    }
+    /* Stops: CENTERED ON THE FILL. Each stop moves lightness the same step up and down, with
+       chroma and hue unchanged, so the gradient's midpoint (oklab interpolation) is the token
+       itself. The primary centers on --color-cta, the brand violet a text-primary word paints,
+       so the button and the word read as one purple. Alex McRitchie accepted white near 3:1 on
+       the default primary for that; the semantic fills hold 4.5:1 at the midpoint. A top stop
+       past sRGB clips only the top edge: the midpoint is interpolated before it is clipped. */
+    html[data-surface-style="glass"] :is(.btn-primary, .btn-secondary, .btn-danger, .btn-warning, .btn-success) {
+      --lit-top-stop: oklch(from var(--lit-fill) calc(l + 0.06) c h / var(--lit-fill-alpha, 1));
+      --lit-low-stop: oklch(from var(--lit-fill) calc(l - 0.06) c h / var(--lit-fill-alpha, 1));
+    }
+    html[data-surface-style="glass"] .btn-primary { --lit-fill: var(--color-cta); }
     html[data-surface-style="glass"] .btn-secondary { --lit-fill: var(--btn-secondary-bg, var(--color-success)); }
     html[data-surface-style="glass"] .btn-danger { --lit-fill: var(--color-danger-fill, var(--color-danger)); }
     html[data-surface-style="glass"] .btn-warning { --lit-fill: var(--color-warning-fill, var(--color-warning)); }
@@ -1598,16 +1689,16 @@ html[data-theme-flip]::view-transition-new(*) {
         var(--lit-glow) oklch(from var(--lit-glow-stop, var(--lit-low-stop)) l c h / var(--lit-glow-alpha));
     }
     /* On a dark page a deep green, red or orange glow disappears, so these glow from the top
-       stop. The violet is already bright enough at its low stop. */
+       stop. The violet, centered on the brand colour, is bright enough at its low stop. */
     html.dark[data-surface-style="glass"] :is(.btn-secondary, .btn-danger, .btn-warning, .btn-success) { --lit-glow-stop: var(--lit-top-stop); }
     /* A TOUCH OF TRANSPARENCY on a full-size filled button, dark theme only: a photo behind it
-       shows subtly, and white text holds 4.5:1 at the midpoint. An outer shadow is not painted
+       shows subtly, and white text holds its contrast at the midpoint. An outer shadow is not painted
        under its own box, so the glow never brightens the fill. On a light page the backdrop would
        lift the fill and cost contrast, so it stays solid there. Without a blur, or without relative
        oklch (the gradient would drop out and leave white text on nothing), it stays solid. */
     @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) and (color: oklch(from red l c h)) {
       html.dark[data-surface-style="glass"] :is(.btn-primary, .btn-secondary, .btn-danger, .btn-warning, .btn-success):not(.btn-sm, :disabled, [aria-disabled="true"], [class*=" bg-"], [class^="bg-"]) {
-        --lit-fill-alpha: 0.94;
+        --lit-fill-alpha: 0.85;
         background-color: transparent;
         -webkit-backdrop-filter: blur(6px);
         backdrop-filter: blur(6px);
@@ -1655,13 +1746,53 @@ html[data-theme-flip]::view-transition-new(*) {
     html[data-surface-style="glass"] .badge { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--lit-badge); }
     html[data-surface-style="glass"] .input-field { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--lit-input); }
 
+    /* BUTTON TRICKS ON A LIT BUTTON (the lit rules above).
+       A lit button already uses its box-shadow for its contact shadow and glow, and
+       its ::after for its inset light. These rules sit in the utilities layer and the
+       tricks in engine-motion.css sit in components, so the lit rules win, and each trick
+       that shares one of them makes room here. Keep a trick on a real .btn lit.
+
+       --btn-lit-rest is the lit button's outer shadow at rest. The pulse's keyframes
+       replace box-shadow for the whole animation, so they put it back themselves. */
+    html[data-surface-style="glass"] .btn:not(:disabled, [aria-disabled="true"]) {
+      --btn-lit-rest: var(--lit-contact);
+    }
+    html[data-surface-style="glass"] .btn:is(.btn-primary, .btn-secondary, .btn-danger, .btn-warning, .btn-success):not(.btn-sm, :disabled, [aria-disabled="true"]) {
+      --btn-lit-rest: var(--lit-contact),
+        var(--lit-glow) oklch(from var(--lit-glow-stop, var(--lit-low-stop)) l c h / var(--lit-glow-alpha));
+    }
+
+    /* The glows need ::after for their bloom, so the inset light moves to the host and
+       the bloom gets its own box back. Without this the lit rule's inset: -1px closes
+       the bloom's hole and it washes the whole face. .btn-outline has no lit ::after. */
+    html[data-surface-style="glass"] .btn:is(.edge-rotate-glow, .studio-team-glow, .studio-border-glow):not(.btn-outline, :disabled, [aria-disabled="true"]) {
+      box-shadow: var(--lit-inset), var(--btn-lit-rest);
+    }
+    html[data-surface-style="glass"] .btn:is(.edge-rotate-glow, .studio-team-glow, .studio-border-glow):not(.btn-outline, :disabled, [aria-disabled="true"]):active {
+      box-shadow: var(--lit-inset-pressed);
+    }
+    html[data-surface-style="glass"] .btn:is(.edge-rotate-glow, .studio-team-glow):not(.btn-outline, :disabled, [aria-disabled="true"])::after {
+      inset: calc(-1 * (var(--edge-rotate-glow-thickness) + 4px + var(--edge-rotate-glow-bloom) * 2));
+      box-shadow: none;
+    }
+    html[data-surface-style="glass"] .btn.studio-border-glow:not(.btn-outline, :disabled, [aria-disabled="true"])::after {
+      inset: -46px;
+      box-shadow: none;
+    }
+
+    /* The sheen's band already stops at its own rounded box, and overflow: hidden would
+       cut the lit ::after's outer pixel, the top highlight. */
+    html[data-surface-style="glass"] .btn.sheen:not(:disabled, [aria-disabled="true"]) {
+      overflow: visible;
+    }
+
     /* LESS TRANSPARENCY: every surface above goes solid and drops its blur. Last, to win on order;
        both spellings of the root, since html.dark outranks a bare html[...] on specificity. */
     @media (prefers-reduced-transparency: reduce) {
       html[data-surface-style="glass"], html.dark[data-surface-style="glass"] { --surface-glass-fill: var(--color-surface); --surface-glass-fill-hover: var(--color-surface-alt); }
-      html[data-surface-style="glass"] :is(.surface-glass-blur, .nav-shell, .page-header:is([data-stuck], [data-studio-controller-failed~="page-header"] + .page-header)),
+      html[data-surface-style="glass"] :is(.surface-glass-blur, .nav-shell, .section-header[data-stuck], .page-header:is([data-stuck], [data-studio-controller-failed~="page-header"] + .page-header)),
       html.dark[data-surface-style="glass"] :is(.btn-primary, .btn-secondary, .btn-danger, .btn-warning, .btn-success):not(.btn-sm, :disabled, [aria-disabled="true"]) { --lit-fill-alpha: 1; -webkit-backdrop-filter: none; backdrop-filter: none; }
-      html[data-surface-style="glass"] :is(.nav-shell, .page-header:is([data-stuck], [data-studio-controller-failed~="page-header"] + .page-header)) { background-color: var(--color-page); }
+      html[data-surface-style="glass"] :is(.nav-shell, .section-header[data-stuck], .page-header:is([data-stuck], [data-studio-controller-failed~="page-header"] + .page-header)) { background-color: var(--color-page); }
     }
 
     /* THE SIDEBAR ROW'S DESCRIPTION (components/_link_sidebar, _geo_signpost). At rest