studio-engine 0.129.0 → 0.131.0

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,11 +27,15 @@
   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:
     .studio-loader        the app's icon as a branded loader   (Loader Lab picks)
     .studio-loader-overlay  the page-load overlay around it    (docs/LOADER.md)
+    .studio-skeleton      the content's shape while it loads   (loader family)
+    .studio-infinite-scroll  the next page near the end        (loader family)
+    .studio-pull-refresh  pull down to reload, phones only     (loader family)
 
   Leveling:
     .level-badge(-1..-10) progressive level pill ladder       (ported, TM)
@@ -167,6 +172,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 +536,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 +573,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 +663,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 +673,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 +686,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 +1303,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 +1319,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 +1907,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 +2060,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;
@@ -2390,10 +2485,55 @@ body.modal-open { overflow: visible; }
     animation-delay: calc(var(--studio-loader-i, 0) * 0.6s - var(--studio-loader-sparks, 5) * 0.6s);
   }
 
+  /* ---- The plain styles: no icon, only the theme's colours ----------------
+     spinner, dots and bar wrap the canonical .spinner, .loading-dots and
+     .progress-meter rules (sections 2, 3 and 7 above) and only set their knobs,
+     so the family and those classes stay one set of rules. */
+  /* Drawn on the page like ink, so in the theme's contrast-checked primary
+     ink (theme_resolver), not the raw primary, which can sink into a dark
+     page. A mono loader keeps currentColor. */
+  .studio-loader:is([data-loader-style="spinner"], [data-loader-style="dots"], [data-loader-style="bar"]):not([data-loader-mono]) {
+    --studio-loader-color: var(--color-primary-ink, var(--color-primary));
+  }
+
+  /* :where() keeps the family's selectors from ending in the bare spinner class: a host
+     counts that one rule to prove the motion layer is imported once
+     (turf-monster test/lib/tailwind_css_first_test.rb). */
+  .studio-loader[data-loader-style="spinner"] :where(.spinner) {
+    --spinner-size: var(--studio-loader-size);
+    --spinner-thickness: max(2px, calc(var(--studio-loader-size) * 0.1));
+    --spinner-color: var(--studio-loader-color);
+    --spinner-track: color-mix(in srgb, var(--studio-loader-color) 22%, transparent);
+  }
+
+  .studio-loader[data-loader-style="dots"] { height: calc(var(--studio-loader-size) * 0.5); }
+  .studio-loader[data-loader-style="dots"] .loading-dots {
+    --loading-dots-size: calc(var(--studio-loader-size) * 0.22);
+    --loading-dots-gap: calc(var(--studio-loader-size) * 0.11);
+    --loading-dots-color: var(--studio-loader-color);
+  }
+
+  .studio-loader[data-loader-style="bar"] {
+    display: block;
+    height: var(--studio-loader-bar-height, 6px);
+    max-width: 100%;
+  }
+  .studio-loader[data-loader-style="bar"] .progress-meter {
+    --progress-height: 100%;
+    --progress: calc(var(--studio-loader-percent, 0) * 1%);
+    --progress-fill: var(--studio-loader-color);
+    --progress-track: color-mix(in srgb, var(--studio-loader-color) 16%, transparent);
+    display: block;
+    width: 100%;
+  }
+
   /* ---- Pending: inside a button, shown only while it or its form is busy --- */
   .studio-loader[data-loader-pending] { display: none; }
   :where(form, button)[aria-busy="true"] .studio-loader[data-loader-pending] { display: inline-grid; }
   :where(form, button)[aria-busy="true"] [data-loader-idle] { display: none; }
+  /* The words a busy button says instead ("Saving…"): shown only while busy. */
+  [data-loader-busy] { display: none; }
+  :where(form, button)[aria-busy="true"] [data-loader-busy] { display: inline; margin-inline-start: 0.5rem; }
   .studio-loader[data-loader-pending] .studio-loader-halo { display: none; }
   .studio-loader[data-loader-pending] .studio-loader-icon { width: 100%; height: 100%; animation-duration: 1.4s; }
 
@@ -2440,6 +2580,9 @@ body.modal-open { overflow: visible; }
     .studio-loader-orb,
     .studio-loader-art { display: none; }
     .studio-loader-fill { --studio-loader-level: 0.45; }
+    /* A still band would read as a percent; a still bar with no percent is a
+       faint full fill instead. */
+    .studio-loader[data-loader-style="bar"] .progress-meter--indeterminate .progress-meter-fill { width: 100%; opacity: 0.35; }
   }
 
   @keyframes studio-loader-breathe {
@@ -2486,3 +2629,126 @@ body.modal-open { overflow: visible; }
     26%, 100% { transform: scale(0.8); opacity: 0; }
   }
 }
+
+/* =============================================================================
+   LOADER FAMILY — skeleton, infinite scroll and pull to refresh (docs/LOADER.md).
+   The branded loader above draws a wait; these three hold a page's shape while
+   it waits. Markup: app/views/studio/loader/_skeleton, _infinite_scroll and
+   _pull_to_refresh, through Studio::LoaderHelper. Behaviour:
+   studio/infinite_scroll and studio/pull_to_refresh (lazy controllers).
+
+   Tune:  --studio-skeleton-bone    a bone's fill (default text at 9%)
+          --studio-skeleton-shine   the shimmer's highlight (default text at 7%)
+          --studio-skeleton-width   one line's width (the helper varies them)
+          --studio-skeleton-speed   one shimmer pass (default 1.6s)
+
+   The bones are tints of --color-text over whatever sits behind them, so one
+   rule reads on a dark, light or glass surface. Under prefers-reduced-motion a
+   skeleton is still and the pull indicator does not spin.
+   ========================================================================== */
+@layer components {
+  .studio-skeleton {
+    --studio-skeleton-bone: color-mix(in srgb, var(--color-text) 9%, transparent);
+    --studio-skeleton-shine: color-mix(in srgb, var(--color-text) 7%, transparent);
+    --studio-skeleton-speed: 1.6s;
+    position: relative;
+    display: grid;
+    gap: 1rem;
+  }
+
+  .studio-skeleton-item { display: grid; gap: 0.6rem; align-content: start; }
+  .studio-skeleton-item[data-skeleton-kind="avatar"] {
+    grid-template-columns: auto 1fr;
+    align-items: center;
+    column-gap: 0.85rem;
+  }
+  .studio-skeleton-item[data-skeleton-kind="avatar"] > .studio-skeleton-lines { display: grid; gap: 0.5rem; }
+  .studio-skeleton-lines { display: grid; gap: 0.55rem; }
+
+  .studio-skeleton-bone {
+    display: block;
+    border-radius: 0.375rem;
+    background:
+      linear-gradient(90deg, transparent 0%, var(--studio-skeleton-shine) 50%, transparent 100%) 0 0 / 200% 100% no-repeat,
+      var(--studio-skeleton-bone);
+    background-position: 150% 0, 0 0;
+    animation: studio-skeleton-shimmer var(--studio-skeleton-speed) ease-in-out infinite;
+  }
+
+  .studio-skeleton-bone[data-bone="line"] {
+    height: 0.75rem;
+    width: var(--studio-skeleton-width, 100%);
+  }
+  .studio-skeleton-bone[data-bone="title"] { height: 1.1rem; width: var(--studio-skeleton-width, 55%); }
+  .studio-skeleton-bone[data-bone="avatar"] { width: 2.75rem; height: 2.75rem; border-radius: 9999px; }
+  .studio-skeleton-bone[data-bone="media"] { width: 100%; aspect-ratio: 16 / 9; border-radius: 0.75rem; }
+
+  .studio-skeleton-item[data-skeleton-kind="card"] {
+    padding: 0.85rem;
+    border-radius: 1rem;
+    border: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
+  }
+
+  @keyframes studio-skeleton-shimmer {
+    from { background-position: 150% 0, 0 0; }
+    to { background-position: -50% 0, 0 0; }
+  }
+
+  /* ---- Infinite scroll ----------------------------------------------------
+     Each page arrives inside a <turbo-frame> nested in the one before. The
+     frames take no box (display: contents), so the items flow into the
+     list's own grid or stack as if they were one list. */
+  .studio-infinite-scroll turbo-frame { display: contents; }
+  .studio-infinite-scroll-more,
+  .studio-infinite-scroll-end {
+    grid-column: 1 / -1;
+    display: flex;
+    justify-content: center;
+    padding-block: 1rem;
+  }
+  .studio-infinite-scroll-more .studio-loader { margin-inline-start: 0.5rem; }
+  .studio-infinite-scroll-end { margin: 0; font-size: 0.875rem; color: var(--color-text-secondary); }
+  /* Turbo marks the frame aria-busy while it fetches: the button keeps its
+     place and its words, and shows a spinner beside them (a [data-loader-idle]
+     child would hide while busy; "Load more" has none). */
+  .studio-infinite-scroll-next[aria-busy="true"] .studio-loader[data-loader-pending] { display: inline-grid; }
+  .studio-infinite-scroll-next[aria-busy="true"] [data-loader-idle] { display: none; }
+
+  /* ---- Pull to refresh ----------------------------------------------------
+     Phone widths and touch only: the controller arms itself there and nowhere
+     else, so on a desktop the indicator never shows. --studio-pull is how far
+     the finger has pulled, 0..1 of the threshold. */
+  .studio-pull-refresh { position: relative; }
+  .studio-pull-refresh-indicator {
+    --studio-pull: 0;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    z-index: var(--z-raised, 10);
+    display: grid;
+    place-items: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 9999px;
+    background: var(--color-surface);
+    box-shadow: 0 2px 10px color-mix(in srgb, var(--color-text) 18%, transparent);
+    color: var(--color-primary-ink, var(--color-primary));
+    opacity: min(1, calc(var(--studio-pull) * 1.4));
+    transform: translate(-50%, calc(var(--studio-pull) * 4.5rem - 3rem)) rotate(calc(var(--studio-pull) * 270deg));
+    pointer-events: none;
+  }
+  .studio-pull-refresh-indicator[hidden] { display: none; }
+  .studio-pull-refresh[data-pull-state="settling"] .studio-pull-refresh-indicator { transition: transform 0.2s ease, opacity 0.2s ease; }
+  .studio-pull-refresh[data-pull-state="refreshing"] .studio-pull-refresh-indicator {
+    --studio-pull: 1;
+    transform: translate(-50%, 1.5rem);
+  }
+  .studio-pull-refresh-indicator .studio-pull-refresh-spinner { animation-play-state: paused; }
+  .studio-pull-refresh[data-pull-state="refreshing"] .studio-pull-refresh-indicator .studio-pull-refresh-spinner { animation-play-state: running; }
+
+  @media (prefers-reduced-motion: reduce) {
+    .studio-skeleton-bone { animation: none; background-position: 150% 0, 0 0; }
+    .studio-pull-refresh-indicator,
+    .studio-pull-refresh-indicator * { transition: none !important; animation: none !important; }
+  }
+}