studio-engine 0.129.0 → 0.131.0

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

@@ -308,6 +308,13 @@ body.modal-open .studio-app-banner {
   font-size: calc(var(--type-base, 16px) * 1.5);
   font-weight: var(--type-display-weight, 800);
   line-height: 1.25;
+
+  /* From 40rem, the h2 of the type scale (type-h2), Alex McRitchie's "H2 header"
+     (2026-11-05). A phone keeps 1.5x, so a long title leaves the tabs room. */
+  @media (width >= 40rem) {
+    font-size: 30px;
+    line-height: 1.2;
+  }
   min-width: 0;
   overflow-wrap: anywhere;
   display: -webkit-box;
@@ -340,6 +347,11 @@ body.modal-open .studio-app-banner {
   min-width: 0;
   overflow-x: auto;
   scrollbar-width: none;
+  /* A sideways scroller clips both axes, so the pills get room inside it: their contact
+     shadow (3px below), the lit edge (1px) and a focus ring (2px). The negative margin
+     gives the room back, so the row's box does not move. */
+  padding: 0.25rem;
+  margin: -0.25rem;
   -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--page-header-fade-start), #000 calc(100% - var(--page-header-fade-end)), transparent 100%);
           mask-image: linear-gradient(to right, transparent 0, #000 var(--page-header-fade-start), #000 calc(100% - var(--page-header-fade-end)), transparent 100%);
 
@@ -365,9 +377,652 @@ body.modal-open .studio-app-banner {
 
 @utility page-header-actions {
   flex-shrink: 0;
+  /* Never wider than the row: a group of controls wraps inside it on a phone, and the
+     page does not scroll sideways. */
+  max-width: 100%;
+  margin-left: auto;
+
+  /* After the tabs, the tabs' own auto margin already pushes both right. */
+  .page-header-tabs + & {
+    margin-left: 0;
+  }
+}
+
+/* THE TRAIL: the page's ancestors above the title (docs/PAGE_HEADER.md, "Crumbs"). It takes
+   the row's whole first line, so the title, the tabs and the actions share the next one.
+   Ancestors are muted links, the page itself is bold, and a chevron sits between. Below
+   40rem the trail gives way to one link to the parent. The negative margin brings the
+   title up to the trail: the row's gap is for the title and the tabs. */
+@utility page-header-trail {
+  flex: 1 0 100%;
+  min-width: 0;
+  margin-bottom: -0.5rem;
+  font-size: calc(var(--type-base, 16px) * 0.8125);
+  line-height: 1.25;
+}
+
+@utility page-header-crumbs {
+  min-width: 0;
+
+  & ol {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: 0.5rem;
+    row-gap: 0.125rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  & li {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+  }
+
+  /* The chevron is CSS, with empty alt text, so a reader hears the names alone. */
+  & li + li::before {
+    content: "\203A";
+    content: "\203A" / "";
+    @apply text-muted;
+    opacity: 0.6;
+  }
+
+  @media (width < 40rem) {
+    display: none;
+  }
+}
+
+@utility page-header-crumb {
+  @apply text-muted;
+  text-decoration: none;
+  transition: color 150ms ease;
+
+  &:hover,
+  &:focus-visible {
+    @apply text-heading;
+  }
+}
+
+@utility page-header-crumb-current {
+  @apply text-heading;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+@utility page-header-parent {
+  display: none;
+  @apply text-muted;
+  font-size: calc(var(--type-base, 16px) * 0.875);
+  text-decoration: none;
+
+  &:hover,
+  &:focus-visible {
+    @apply text-heading;
+  }
+
+  @media (width < 40rem) {
+    display: inline-flex;
+    gap: 0.25rem;
+    align-items: baseline;
+  }
+}
+
+/* THE LINKS LINE: the page's other links, on a line of their own at the foot of the row, so
+   they stick with it. Muted, small, one line; on a phone it scrolls sideways inside the row. */
+@utility page-header-links {
+  flex: 1 0 100%;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  min-width: 0;
+  margin-top: -0.25rem;
+  overflow-x: auto;
+  scrollbar-width: none;
+  white-space: nowrap;
+  font-size: calc(var(--type-base, 16px) * 0.8125);
+}
+
+@utility page-header-link {
+  @apply text-muted;
+  text-decoration: none;
+  transition: color 150ms ease;
+
+  &:hover,
+  &:focus-visible,
+  &[aria-current] {
+    @apply text-heading;
+  }
+
+  /* More than colour marks the current link (WCAG 1.4.1). */
+  &[aria-current] {
+    font-weight: 600;
+  }
+}
+
+/* The tab's label sits above the gliding pill. */
+@utility page-header-tab-label {
+  position: relative;
+  z-index: 2;
+}
+
+/* The pill is hidden until the browser can anchor it (below). */
+@utility page-header-glide {
+  display: none;
+}
+
+/* -- The gliding pill -------------------------------------------------------
+   Alex McRitchie, 2026-11-05: the current tab's pill glides to the next current tab, as
+   one highlight, instead of each tab switching its own fill. One pill per row
+   (.page-header-glide, the lit primary button's own classes, so it keeps that look in
+   light, dark and glass) is anchored with CSS anchor positioning to whichever tab carries
+   aria-current. aria-current stays the one source of truth: the scroll spy and a page's
+   own markup set it, and the pill follows with no script measuring anything. Its insets
+   transition, so a change of anchor slides it. Reduced motion jumps.
+
+   The tab with aria-current gives up its own fill so the pill shows through, and the
+   labels sit above the pill. !important on the fill: the glass lit button's selectors are
+   heavier than any a row should repeat.
+
+   Where anchor positioning or :has is missing, nothing in this block applies and each tab
+   keeps its own fill, as before. */
+@supports (anchor-name: --a) and (position-anchor: --a) and selector(:has(a)) {
+  .page-header-track {
+    position: relative;
+    /* Each row's pill anchors to its own current tab, not the last one on the page. */
+    anchor-scope: --page-header-current;
+  }
+
+  .page-header-track > [aria-current] {
+    anchor-name: --page-header-current;
+  }
+
+  .page-header-track:has(> .page-header-tab[aria-current]) > .page-header-glide {
+    display: block;
+    position: absolute;
+    position-anchor: --page-header-current;
+    top: anchor(top);
+    right: anchor(right);
+    bottom: anchor(bottom);
+    left: anchor(left);
+    z-index: 1;
+    margin: 0;
+    padding: 0;
+    pointer-events: none;
+    transition: top 320ms cubic-bezier(0.2, 0.8, 0.2, 1), right 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
+      bottom 320ms cubic-bezier(0.2, 0.8, 0.2, 1), left 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  .page-header-track:has(> .page-header-glide) > .page-header-tab[aria-current] {
+    background-color: transparent !important;
+    background-image: none !important;
+    border-color: transparent !important;
+    box-shadow: none !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .page-header-track > .page-header-glide {
+      transition: none !important;
+    }
+  }
+}
+
+/* -- The clear border glow (.studio-border-glow--clear) ------------------------
+   Alex McRitchie, 2026-11-05: "a clear background and the glowing circumference". A
+   modifier on .studio-border-glow (engine-motion.css), named as .sheen--loop is: the
+   button has no fill, so the page shows through, and only the moving rainbow ring and
+   its soft halo draw. The label is the heading ink, which clears 4.5:1 on every surface
+   (e2e/border_glow_clear.spec.js). Pair it with .btn alone, not a filled variant.
+
+     <button class="btn studio-border-glow studio-border-glow--clear">Save</button> */
+.btn.studio-border-glow--clear {
+  @apply text-heading;
+  background-color: transparent;
+  background-image: none;
+}
+
+.btn.studio-border-glow--clear:not(:disabled, [aria-disabled="true"]):hover {
+  --studio-border-glow-halo-opacity: 0.4;
+}
+
+/* Reduced motion: the ring and the halo stay, still. */
+@media (prefers-reduced-motion: reduce) {
+  .studio-border-glow::before,
+  .studio-border-glow::after {
+    animation: none;
+  }
+}
+
+/* -- The carousel (studio/_carousel) -----------------------------------------
+   One sideways row of slides on a native scroll-snap track: a swipe, a trackpad and
+   a focused link move it with no script. The carousel controller adds the edge fade,
+   the arrows, the dots and the keys (studio/controllers/carousel_controller).
+
+   WIDTHS COME FROM THE REGION, NOT THE WINDOW. The region is an inline-size container,
+   so a carousel in a narrow column lays out as a phone does. A phone row shows one
+   slide, a medium row up to two, a wide row --carousel-per-view (the partial's
+   per_view). Every row adds --carousel-peek of the next slide, so a visitor sees
+   there is more. n slides and their n gaps plus the peek fill the row:
+   n * w + n * gap + peek * w = 100 percent.
+
+   BEFORE THE CONTROLLER CONNECTS, or when it failed to load, the controls are hidden
+   (they would do nothing) and the track keeps a thin scrollbar, so the row still
+   scrolls with a mouse. */
+@utility carousel {
+  --carousel-gap: 1rem;
+  --carousel-peek: 0.2;
+  --carousel-fade: 2.5rem;
+  position: relative;
+  min-width: 0;
+  container-type: inline-size;
+
+  /* The track's focus ring is drawn here: the track's edge mask clips anything
+     outside its own box, an outline included. */
+  &:has(> .carousel-track:focus-visible) {
+    outline: 2px solid color-mix(in srgb, var(--color-cta) 70%, transparent);
+    outline-offset: 2px;
+    border-radius: 0.75rem;
+  }
+}
+
+@utility carousel-track {
+  --carousel-n: min(var(--carousel-per-view, 3), 1);
+  --carousel-fade-start: 0px;
+  --carousel-fade-end: 0px;
+  position: relative;
+  display: flex;
+  gap: var(--carousel-gap);
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+  /* Room for a slide's hover shadow and focus ring: the scroll box clips both ways. */
+  padding-block: 0.25rem 0.5rem;
+  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--carousel-fade-start), #000 calc(100% - var(--carousel-fade-end)), transparent 100%);
+          mask-image: linear-gradient(to right, transparent 0, #000 var(--carousel-fade-start), #000 calc(100% - var(--carousel-fade-end)), transparent 100%);
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &[data-fade-start] {
+    --carousel-fade-start: var(--carousel-fade);
+  }
+
+  &[data-fade-end] {
+    --carousel-fade-end: var(--carousel-fade);
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  .carousel:not([data-carousel-ready]) & {
+    scrollbar-width: thin;
+  }
+
+  .carousel:not([data-carousel-ready]) &::-webkit-scrollbar {
+    display: initial;
+  }
+
+  @container (width >= 36rem) {
+    --carousel-n: min(var(--carousel-per-view, 3), 2);
+  }
+
+  @container (width >= 56rem) {
+    --carousel-n: var(--carousel-per-view, 3);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    scroll-behavior: auto;
+  }
+}
+
+@utility carousel-slide {
+  flex: 0 0 calc((100% - var(--carousel-n) * var(--carousel-gap)) / (var(--carousel-n) + var(--carousel-peek)));
+  min-width: 0;
+  scroll-snap-align: start;
+}
+
+@utility carousel-controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-top: 0.75rem;
+
+  /* Until the controller connects the row is hidden but keeps its room, so nothing
+     below moves when the arrows arrive (a hash landing, CLS). A row that fits, or a
+     controller that failed to load, gives the room back. */
+  .carousel:not([data-carousel-ready]) & {
+    visibility: hidden;
+  }
+
+  .carousel[data-carousel-static] &,
+  .carousel[data-studio-controller-failed] & {
+    display: none;
+  }
+}
+
+@utility carousel-dots {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  min-width: 0;
+}
+
+/* A 1.5rem tap target around a small pill. The open stop's pill is wider and wears
+   the primary, so the dots read as a progress line. */
+@utility carousel-dot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.5rem;
+  padding-inline: 0.1875rem;
+  border-radius: 9999px;
+  cursor: pointer;
+
+  &::before {
+    content: "";
+    display: block;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 9999px;
+    background-color: color-mix(in srgb, var(--color-text-muted) 45%, transparent);
+    transition: width 200ms ease, background-color 200ms ease;
+  }
+
+  &:hover::before {
+    background-color: var(--color-text-muted);
+  }
+
+  &[aria-current="true"]::before {
+    width: 1.5rem;
+    background-color: var(--color-primary);
+  }
+
+  &[hidden] {
+    display: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--color-cta) 70%, transparent);
+    outline-offset: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &::before {
+      transition: none;
+    }
+  }
+}
+
+@utility carousel-arrows {
+  display: flex;
+  flex-shrink: 0;
+  gap: 0.5rem;
   margin-left: auto;
 }
 
+/* Round arrows on the card fill, so under the glass surfaces they are glass too. */
+@utility carousel-button {
+  @apply border border-subtle text-heading;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 9999px;
+  background-color: var(--surface-card-fill, var(--color-surface));
+  -webkit-backdrop-filter: var(--surface-glass-filter, none);
+          backdrop-filter: var(--surface-glass-filter, none);
+  box-shadow: var(--surface-glass-highlight, 0 0 #0000), var(--surface-glass-shadow, 0 0 #0000);
+  cursor: pointer;
+  transition: border-color 150ms ease, opacity 150ms ease, transform 150ms ease;
+
+  & svg {
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+
+  &:hover:not([aria-disabled="true"]) {
+    @apply border-primary;
+  }
+
+  &:active:not([aria-disabled="true"]) {
+    transform: scale(0.94);
+  }
+
+  &[aria-disabled="true"] {
+    opacity: 0.4;
+    cursor: default;
+  }
+
+  &:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--color-cta) 70%, transparent);
+    outline-offset: 2px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+
+    &:active:not([aria-disabled="true"]) {
+      transform: none;
+    }
+  }
+}
+
+/* -- The spotlight carousel (studio/_carousel, style: :spotlight) --------------
+   The same region, track, arrows, dots and keys, but each slide snaps to the centre.
+   The centred slide is full size and full colour, with its caption under it; its
+   neighbours are smaller, faded and grey, and the next ones peek at the edges.
+
+   WIDTHS. A slide is --carousel-spot-w wide, in units of the region (cqi, since the
+   region is the inline-size container). n slides and a 0.6 peek fill the row:
+   n * w + (n - 1) * gap + 0.6 * w = 100cqi. The track pads each end by half the
+   rest, so the first and the last slide can centre too.
+
+   THE EFFECT FOLLOWS THE SCROLL where the browser has scroll-driven animations:
+   each slide is its own inline view timeline, and its body and caption run one
+   animation across the stretch from one neighbour's place to the other's (a step,
+   a slide and a gap, either side of the centre), full at the middle. Outside that
+   stretch the fill holds the neighbour look.
+
+   ELSEWHERE, the controller marks the centred slide (data-current) and the body
+   transitions to it. Until the controller connects every slide stays plain.
+
+   UNDER REDUCED MOTION nothing scales, greys or animates: the neighbours of the
+   marked slide are only dimmed. */
+@keyframes carousel-spotlight {
+  0%, 100% {
+    scale: var(--carousel-spot-scale);
+    opacity: var(--carousel-spot-opacity);
+    filter: grayscale(1);
+  }
+  50% {
+    scale: 1;
+    opacity: 1;
+    filter: grayscale(0);
+  }
+}
+
+@keyframes carousel-spotlight-caption {
+  0%, 30%, 70%, 100% {
+    opacity: 0;
+    translate: 0 0.25rem;
+  }
+  50% {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+@utility carousel-spotlight {
+  --carousel-spot-scale: 0.75;
+  --carousel-spot-opacity: 0.45;
+
+  /* On the track, not the region: the track's container queries set --carousel-n,
+     and a container query cannot read the element it sits on. */
+  & > .carousel-track {
+    /* A smaller gap: the neighbours' scale already opens space around the centre. */
+    --carousel-gap: 0.5rem;
+    --carousel-spot-w: calc((100cqi - (var(--carousel-n) - 1) * var(--carousel-gap)) / (var(--carousel-n) + 0.6));
+    --carousel-spot-step: calc(var(--carousel-spot-w) + var(--carousel-gap));
+    padding-inline: calc((100cqi - var(--carousel-spot-w)) / 2);
+    /* The neighbours are already dimmed; an edge fade over them reads as a smear. */
+    -webkit-mask-image: none;
+            mask-image: none;
+  }
+
+  & > .carousel-track > .carousel-slide {
+    flex: 0 0 var(--carousel-spot-w);
+    scroll-snap-align: center;
+    display: flex;
+    flex-direction: column;
+    view-timeline: --carousel-slide inline;
+  }
+
+  & .carousel-spotlight-body {
+    flex: 1 1 auto;
+    min-height: 0;
+    transform-origin: 50% 50%;
+  }
+
+  & .carousel-caption {
+    margin-top: 0.75rem;
+    text-align: center;
+    @apply text-sm text-body;
+  }
+
+  /* The fallback: the controller's mark, with a transition. */
+  &[data-carousel-ready] .carousel-slide .carousel-spotlight-body {
+    transition: scale 300ms ease, opacity 300ms ease, filter 300ms ease;
+  }
+
+  &[data-carousel-ready] .carousel-slide:not([data-current]) .carousel-spotlight-body {
+    scale: var(--carousel-spot-scale);
+    opacity: var(--carousel-spot-opacity);
+    filter: grayscale(1);
+  }
+
+  &[data-carousel-ready] .carousel-caption {
+    transition: opacity 300ms ease;
+  }
+
+  &[data-carousel-ready] .carousel-slide:not([data-current]) .carousel-caption {
+    opacity: 0;
+  }
+
+  /* A neighbour holding focus drops the neighbour look on every path, so its focus
+     ring shows at full strength (WCAG 2.4.7). It outranks the animation and the mark. */
+  & .carousel-slide:focus-within .carousel-spotlight-body,
+  &[data-carousel-ready] .carousel-slide:focus-within .carousel-spotlight-body {
+    animation: none;
+    scale: 1;
+    opacity: 1;
+    filter: none;
+  }
+
+  /* The scroll-driven path. It needs no controller, so it runs from the first paint. */
+  @supports (animation-timeline: view()) and (animation-range: cover 0% cover 100%) {
+    & .carousel-spotlight-body,
+    & .carousel-caption {
+      transition: none;
+      animation: carousel-spotlight linear both;
+      animation-timeline: --carousel-slide;
+      animation-range: cover calc(50% - var(--carousel-spot-step)) cover calc(50% + var(--carousel-spot-step));
+    }
+
+    & .carousel-caption {
+      animation-name: carousel-spotlight-caption;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    & .carousel-spotlight-body,
+    & .carousel-caption {
+      animation: none !important;
+      transition: none !important;
+    }
+
+    &[data-carousel-ready] .carousel-slide:not([data-current]) .carousel-spotlight-body {
+      scale: none;
+      filter: none;
+    }
+  }
+}
+
+/* -- 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 +2169,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 +2246,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 +2276,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 +2333,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