@usableapp/cardds 0.7.103 → 0.7.104

package/css/sheet.css

@@ -71,7 +71,7 @@
   inset: 0;
   top: var(--_top, 0);            /* a stage keeps its top bar's line free — see .sheet-stage */
   translate: 0 calc(var(--_y) + var(--_drag, 0rem)); /* --_drag: the Sheet component, only while the handle is held */
-  transition: translate var(--motion-sheet) ease;
+  transition: translate var(--motion-sheet) var(--ease);
 
   /* handle · head · body: a column, the body takes what is left and scrolls
      (below) — so the handle and the head never move, whatever the content */
@@ -104,7 +104,7 @@
    that holds that way's WHOLE form, its submit on the sheet's foot, leading to the next page. The base
    carries no control. It is NOT for a form taken apart — one sheet per field, a "send" left on the base:
    a form lives whole in one sheet. */
-.sheet--away { --_y: 100%; --_cover: var(--_box); visibility: hidden; transition: translate var(--motion-sheet) ease, visibility 0s linear var(--motion-sheet); }
+.sheet--away { --_y: 100%; --_cover: var(--_box); visibility: hidden; transition: translate var(--motion-sheet) var(--ease), visibility 0s var(--ease-linear) var(--motion-sheet); }
 .sheet.is-dragging { transition: none; } /* follows the finger; the snap gets the ease back */
 
 /* the body — everything under the head, the one thing in a sheet that
@@ -149,23 +149,8 @@
    One row, ≤ 2 buttons. <div class="card__foot"><button class="btn btn--primary btn--block">…</button></div> */
 /* …and the link row under the button, when there is one (its line + the gap over it) */
 .sheet:has(> .card__foot--link) { --_foot: calc(var(--card-gap) + var(--sheet-foot-h, calc(var(--btn-h) + var(--sp-1) + var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)))) + var(--card-pad) + var(--_safe-b-open)); } /* --sheet-foot-h: the foot's rows as the Sheet measured them (a button grows with the text size) */
-.sheet > .card__foot {
-  position: absolute; inset: calc(-1 * var(--border-w)) 0 0; z-index: 1; /* the sheet's border box: the same height the sheet's own % reads */
-  align-items: end;
-  align-content: end;
-  padding: 0 var(--card-pad) calc(var(--card-pad) + var(--_safe-b-open));
-  background: linear-gradient(var(--card-bg), var(--card-bg)) bottom / 100% var(--_foot) no-repeat;
-  pointer-events: none;
-  translate: 0 calc(-1 * var(--_y) - var(--_drag, 0rem));
-  transition: translate var(--motion-sheet) ease, visibility 0s;
-}
 .sheet > .card__foot > * { pointer-events: auto; }
 .sheet:has(> .card__foot) > .sheet__body { margin-bottom: calc(var(--_foot) - var(--card-pad)); } /* the body stops above the strip (the card's own padding is the rest) */
-.sheet.is-dragging > .card__foot { transition: none; }
-/* at peek and away the foot is NOT held on the box's edge: it stands on the sheet's own bottom edge (no counter-slide), so it
-   LEAVES AND ARRIVES WITH ITS SHEET — solid the whole way, hidden only once the slide is over. It used to stay in place and
-   fade: the body slid through the strip behind a half-transparent button (timebank, Lh 2026-10-01: "ตัวหนังสือลอดใต้ปุ่ม"). */
-:is(.sheet--peek, .sheet--away) > .card__foot { translate: 0 0; visibility: hidden; transition: translate var(--motion-sheet) ease, visibility 0s linear var(--motion-sheet); }
 /* that padding can be taller than the body's own box (a short box: a small phone with the keyboard up) and a
    box is never smaller than its padding — so the pinned parts must not give way to it: the body runs past
    the sheet's clipped edge instead, where nothing shows anyway. At peek and away no part of the body shows. */
@@ -182,14 +167,14 @@
    touch-action: none hands a touch drag to the Sheet component instead of to the scroller. */
 .sheet__handle {
   position: absolute;
-  z-index: 1;
+  z-index: var(--z-over);
   top: calc((var(--card-pad) - var(--sp-1)) / 2); /* the dots' top: (pad − 4) / 2. The line starts there too */
   left: 50%;
   translate: -50% 0;
   border: 0;
   color: inherit; /* a <button> has its own UA colour; the mark is the card's ink */
   background: currentColor;
-  opacity: 0.3;
+  opacity: var(--fade-dim);
   width: calc(var(--sp-base) * 18); /* 72: the line. The grab is the ::before, not this width */
   height: var(--_handle);
   border-radius: var(--sheet-handle-radius, var(--r-chip));
@@ -198,22 +183,22 @@
   touch-action: none;
   cursor: grab;
 }
-/* paper: the head keeps the sheet's own colour, the content is white (Lh 2026-10-05).
+/* paper: the head keeps the sheet's own colour, the content is the theme's paper, --action-bg, the ground of every field (Lh 2026-10-05: white; Lh 2026-10-20: the theme's, never a fixed white).
    The body and the foot read as paper; the handle and the head stay on the card.
    The flex gap under the head is outside the body, so it stays the sheet's tint.
-   The first field would sit on that colour seam. The white inset is --sp-6 (24px at
+   The first field would sit on that colour seam. The paper's inset is --sp-6 (24px at
    the default spacing), the body's own top padding, and only when the sheet is paper.
    A plain sheet keeps padding-top 0. A sheet in a stack wears the same class and the same
-   inset: the stack's own gap under the head is the card's colour, so the row still needs this white.
-   The paper is a surface of the plain card's side: on a dark sheet its words still turn to onlight. */
+   inset: the stack's own gap under the head is the card's colour, so the row still needs this paper.
+   The paper takes the side of the controls' paper (--action-dark): on a dark sheet its words still turn to onlight. */
 .sheet--paper > .sheet__body {
-  --card-bg: var(--color-paper, #fff);
-  --dark: var(--card-1-dark);
+  --card-bg: var(--action-bg);
+  --dark: var(--action-dark);
   background: var(--card-bg);
   color: var(--card-ink);
   padding-top: var(--sp-6);
 }
-.sheet--paper > .card__foot { --card-bg: var(--color-paper, #fff); color: var(--color-ink, #141414); }
+.sheet--paper > .card__foot { --card-bg: var(--action-bg); --dark: var(--action-dark); --card-foot-ink: var(--card-ink); }
 .sheet__handle--dots {
   --_dot: var(--sp-1);
   --_step: calc(var(--_dot) * 2.5);
@@ -230,15 +215,15 @@
   background-position: 0 0, var(--_step) 0, calc(2 * var(--_step)) 0, calc(3 * var(--_step)) 0;
 }
 /* the app reloads what the sheet shows (`refreshing`, off unless set): the mark changes colour exactly as a stack sheet's grip
-   does — white → black and back, so a light sheet and a dark one each get a moment it stands out. --_grip and the keyframes are
+   does — the ondark ink → the onlight ink and back, so a light sheet and a dark one each get a moment it stands out. --_grip and the keyframes are
    the stack's (stack.css): one sign for both. Nothing travels. */
 .sheet.is-loading > .sheet__handle {
   opacity: 1;
-  background-color: color-mix(in srgb, black calc(var(--_grip) * 100%), white);
-  animation: stack-grip-dissolve 0.4s ease-in-out infinite alternate;
+  background-color: color-mix(in srgb, var(--ink-onlight) calc(var(--_grip) * 100%), var(--ink-ondark));
+  animation: stack-grip-dissolve var(--motion-pulse) var(--ease-in-out) infinite alternate;
 }
 .sheet.is-loading > .sheet__handle--dots {
-  --_ink: color-mix(in srgb, black calc(var(--_grip) * 100%), white);
+  --_ink: color-mix(in srgb, var(--ink-onlight) calc(var(--_grip) * 100%), var(--ink-ondark));
   background-color: transparent;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -262,18 +247,18 @@
    - a label .row with its .check / .toggle may be the head when the sheet's
      whole ask is that switch: peek shows it (a row is --tap tall plus its own
      padding; the strip cuts in that padding) — card #67's "ไม่อยู่บ้าน" */
-.sheet > .card__head { min-height: var(--sheet-head-h); }
+.sheet > .card__head { --card-head-min-h: var(--sheet-head-h); }
 /* a sheet's title is ONE line, always (Lh 2026-09-28, timebank #153: "ข้อกำหนดและเงื่อนไขการใช้งาน" wrapped to two lines at 390px) — the
    thing at its end keeps its place beside it; a caption still takes its own row. A title too long for the line RUNS sideways
    like a song title (Lh 2026-10-03, as the StackSheet's — it was cut with …, and the end of it could never be read): the Sheet
    measures --_over, the width it overflows by, and sets .is-long; one way — it waits, runs to its end, waits, and starts again
    from the first letter. The move is text-indent: the heading is the app's own element, there is no inner box to slide.
    Before the Sheet has measured, and where motion is off, it is cut with …. */
-.sheet > .card__head:not(:has(> :is(.t-caption, .t-body))) { flex-wrap: nowrap; }
+.sheet > .card__head:not(:has(> :is(.t-caption, .t-body))) { --card-head-wrap: nowrap; }
 .sheet > .card__head > :is(h1, h2, h3):first-child, .sheet__title { white-space: nowrap; overflow-x: clip; overflow-y: visible; text-overflow: ellipsis; min-width: 0; } /* clip SIDEWAYS only: hidden cut the Thai tone marks over the line */
 .sheet > .card__head > :is(h1, h2, h3):first-child.is-long, .sheet__title.is-long {
   text-overflow: clip;
-  animation: sheet-title-run var(--sheet-title-run-time, var(--_run, 6s)) ease-in-out infinite; /* --_run: from the overflow, 30px a second + the pauses */
+  animation: sheet-title-run var(--sheet-title-run-time, var(--_run, var(--motion-run))) var(--ease-in-out) infinite; /* --_run: from the overflow, 30px a second + the pauses */
 }
 @keyframes sheet-title-run { 0%, 20% { text-indent: 0; } 85%, 100% { text-indent: calc(-1 * var(--_over)); } }
 @media (prefers-reduced-motion: reduce) {
@@ -364,11 +349,11 @@
   isolation: isolate; /* the ring and the hint stack inside the map only — a sheet over the map covers them */
   color: var(--map-ink, var(--on-surface));
   background:
-    repeating-linear-gradient(75deg,  transparent 0 5.5rem,  var(--hairline) 5.5rem 6.25rem),
-    repeating-linear-gradient(-18deg, transparent 0 8.75rem, var(--ink-tint) 8.75rem 9.25rem),
+    repeating-linear-gradient(var(--street-1),  transparent 0 calc(var(--tap-base) * 11 / 6),  var(--hairline) calc(var(--tap-base) * 11 / 6) calc(var(--tap-base) * 25 / 12)),
+    repeating-linear-gradient(var(--street-2), transparent 0 calc(var(--tap-base) * 35 / 12), var(--ink-tint) calc(var(--tap-base) * 35 / 12) calc(var(--tap-base) * 37 / 12)),
     var(--card-2-bg);
 }
-.map > :first-child { position: absolute; inset: 0; z-index: 0; isolation: isolate; background: transparent; } /* its own stacking context: an engine's layered panes stay under the ring; an engine's own grey ground would hide the pattern while tiles load */
+.map > :first-child { position: absolute; inset: 0; z-index: var(--z-flat); isolation: isolate; background: transparent; } /* its own stacking context: an engine's layered panes stay under the ring; an engine's own grey ground would hide the pattern while tiles load */
 .map__ring {
   position: absolute;
   left: 50%;
@@ -383,7 +368,7 @@
   background: var(--map-ring-bg, var(--accent-soft));
   box-shadow: var(--map-ring-shadow, var(--shadow-float));
   pointer-events: none;
-  z-index: 1; /* above the engine's panes (Leaflet's tiles sit at 200, but inside their own stacking context) */
+  z-index: var(--z-over); /* above the engine's panes (Leaflet's tiles sit at 200, but inside their own stacking context) */
 }
 .map__pin { /* mark="pin": an exact point — the pin's TIP is where the ring's centre sits, so the engine reads the element's bottom-centre */
   position: absolute;
@@ -398,11 +383,11 @@
   color: var(--map-pin-ink, var(--card-ink));
   filter: drop-shadow(var(--map-pin-drop, var(--shadow-float)));
   pointer-events: none;
-  z-index: 1;
+  z-index: var(--z-over);
 }
 /* the lucide tip stops 2.2 of 24 short of the box's bottom: lowered so the tip IS the bottom-centre; filled with the surface so the
    street pattern never shows through the pin's body */
-.map__pin > .icon { width: 100%; height: 100%; translate: 0 9%; fill: var(--surface); }
+.map__pin > .icon { --icon-size: 100%; --icon-shift: 0 9%; }
 .map__credit { /* the tile provider's credit — required by OSM; a caption, not the engine's own control */
   position: absolute;
   right: var(--sp-2);
@@ -413,7 +398,7 @@
   color: var(--map-credit-ink, var(--on-surface-muted));
   font: var(--map-credit-font, var(--type-caption));
   pointer-events: none;
-  z-index: 1;
+  z-index: var(--z-over);
 }
 .map__hint {
   position: absolute;
@@ -431,7 +416,7 @@
   text-align: center;
   box-shadow: var(--map-hint-shadow, var(--shadow-float));
   pointer-events: none;
-  z-index: 1;
+  z-index: var(--z-over);
 }
 
 /* ---- the map IN FLOW (Lh 2026-10-17): `.map--inline` — a box in a card, or the whole of a sheet's body ----
@@ -461,7 +446,7 @@
    name; the picked one fills with accent. Above the ring: the ring takes no taps, the places do. */
 .map-pick {
   position: absolute;
-  z-index: 2;
+  z-index: var(--z-over-2);
   width: var(--tap);
   height: var(--tap);
   translate: -50% -50%;
@@ -492,7 +477,7 @@
   background: var(--map-pick-name-bg, color-mix(in srgb, var(--surface) 85%, transparent));
   font: var(--map-pick-font, var(--type-caption));
 }
-.map-pick:has(:checked) { z-index: 3; } /* the picked place's name lies over a neighbour's */
+.map-pick:has(:checked) { z-index: var(--z-over-3); } /* the picked place's name lies over a neighbour's */
 .map-pick:has(:checked) > :is(.map-pick__mark, .map-pick__name) { background: var(--map-pick-on-bg, var(--accent)); color: var(--map-pick-on-ink, var(--on-accent)); }
 .map-pick:has(:focus-visible) > .map-pick__mark { outline: var(--focus); outline-offset: var(--sp-0); }
 .map-pick:has(:disabled) { opacity: var(--off); cursor: default; }
@@ -517,8 +502,8 @@
   /* words on the scrim: white on a strip of the scrim over it. The scrim alone is half black, so over a white page it is #808080, where white
      is 3.9:1; doubled, #404040, 10:1. It read --card-3-ink, a brand's light ink, on a black scrim */
   background: var(--sheet-stage-foot-bg, var(--scrim));
-  color: var(--sheet-stage-foot-ink, #ffffff);
-  z-index: 2;
+  color: var(--sheet-stage-foot-ink, var(--ink-ondark));
+  z-index: var(--z-over-2);
 }
 
 /* dim stage: blur + darken whatever sits behind the sheet */
@@ -528,9 +513,9 @@
   position: absolute;
   inset: 0;
   background: var(--scrim);
-  z-index: 1;
+  z-index: var(--z-over);
 }
-.sheet-stage--dim .sheet { z-index: 2; }
+.sheet-stage--dim .sheet { z-index: var(--z-over-2); }
 
 /* ---- sheet steps: one task in steps inside one sheet (Lh 2026-09-24) ----
    <div class="sheet-steps"> › <ol class="sheet-steps__track"> of <li class="sheet-step sheet-step--done|now|next">. The done steps
@@ -541,14 +526,14 @@
    falls — no height is written. Nothing fades: done and next read at full ink. */
 .sheet__body:has(> .sheet-steps) { display: flex; flex-direction: column; }
 .sheet-steps { flex-shrink: 0; min-height: calc(100% + var(--kb, 0rem)); /* the keyboard's height more: the pile of next steps stays under the keyboard, it never rises with it */ display: flex; flex-direction: column; touch-action: pan-y; position: relative; }
-.sheet-steps__holder { position: absolute; top: 0; left: 0; width: 1rem; height: 1rem; padding: 0; border: 0; opacity: 0; pointer-events: none; font-size: 1rem; } /* holds the cursor (and the phone's keyboard) while a step folds; font 1rem = the browser's own size, so iOS does not zoom to it */
+.sheet-steps__holder { position: absolute; top: 0; left: 0; width: var(--browser-text); height: var(--browser-text); padding: 0; border: 0; opacity: 0; pointer-events: none; font-size: var(--browser-text); } /* holds the cursor (and the phone's keyboard) while a step folds; font 1rem = the browser's own size, so iOS does not zoom to it */
 .sheet-steps__track { list-style: none; margin: 0; padding: 0 0 var(--sheet-steps-end, var(--sp-6)); flex: 1; /* room under the LAST step: scrolled to the end it never touches the foot's button (Lh 2026-09-28, #153) */ display: flex; flex-direction: column; }
 
 .sheet-step {
   position: relative; min-width: 0;
   display: grid; grid-template-columns: minmax(0, 1fr); /* the column is the step's width, never its words' — a long summary is cut with …, it never pushes the row past the sheet's edge (Lh 2026-09-28, #153) */ grid-template-rows: auto 0fr; align-content: start; /* mid-fold the rows sum to less than the box: the spare room stays BELOW, never spread into the title row (Lh: it looked like a spring) */
   flex: 0 0 auto;
-  transition: grid-template-rows var(--motion-sheet) ease, flex-grow var(--motion-sheet) ease;
+  transition: grid-template-rows var(--motion-sheet) var(--ease), flex-grow var(--motion-sheet) var(--ease);
   --_row-h: var(--sheet-steps-row-h, calc(var(--tap-base) * 2 / 3)); /* the bar's own floor, read once (__head and __go below share it) */
 }
 /* the open step GROWS into the room left, so the steps not done yet wait in a pile at the bottom — and a move is an ACCORDION:
@@ -556,7 +541,7 @@
    with them, nothing jumps (Lh 2026-09-24) */
 .sheet-step--now { grid-template-rows: auto 1fr; flex-grow: 1; }
 .sheet-step + .sheet-step { margin-top: var(--sheet-steps-gap, var(--sp-1)); } /* the folded bars read as a pile, a little ground between them (Lh 2026-09-25) */
-.sheet-step__head { /* every step's title line is a quiet BAR (a tint of the ink, not the brand — a brand bar read as a button, Lh 2026-09-25), the same height open or folded — opening shows the white room under it, never a taller bar (Lh 2026-09-25; was a thin rule on top) */
+.sheet-step__head { /* every step's title line is a quiet BAR (a tint of the ink, not the brand — a brand bar read as a button, Lh 2026-09-25), the same height open or folded — opening shows the card's room under it, never a taller bar (Lh 2026-09-25; was a thin rule on top) */
   display: flex; align-items: center; gap: var(--sp-3); min-height: var(--_row-h); min-width: 0; /* THIN: 32px, a summary line, not a button (Lh 2026-09-25) — the tap stays 44, see __go */
   padding-inline: var(--sheet-step-bar-pad-x, var(--sp-3)); border-radius: var(--sheet-step-bar-radius, var(--r-chip));
   background: var(--sheet-step-bar-bg, var(--ink-tint)); color: var(--sheet-step-bar-ink, inherit);
@@ -564,11 +549,11 @@
   border-top: var(--sheet-step-border-w, 0rem) solid var(--sheet-step-border, currentColor); /* a rule instead of the bar: set this, the bar's bg transparent, radius 0 */
 }
 .sheet-step__title { font: var(--sheet-step-title-font, var(--type-label)); margin: 0; flex: 0 1 auto; min-width: 0; outline: none; /* the label size, not a body title: a pile of rows must stay small (Lh 2026-09-24) */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.sheet-step__num { /* `numbered`: the step's number in a disc BEFORE its title (Lh 2026-09-25) — a white disc on the bar, the number in the ink */
+.sheet-step__num { /* `numbered`: the step's number in a disc BEFORE its title (Lh 2026-09-25) — a disc of the card's colour on the bar, the number in the ink */
   flex: none; display: grid; place-items: center; box-sizing: border-box; inline-size: var(--sheet-step-num-size, 1.408em); block-size: var(--sheet-step-num-size, 1.408em); /* em, not rem (Lh 2026-10-03, as the StackSheet's count): the disc is cut from ITS OWN number's size —
      at a large text size the number grew and a 24px disc did not, so the digit sat on its bottom edge; 1.408em of a 17px caption = the 24px it always was */
   padding-bottom: var(--sheet-step-num-lift, 0.1em); /* the room UNDER the number lifts it onto the disc's middle: a digit has no descender, so a centred line box sets it low */
-  border-radius: 50%; font: var(--sheet-step-num-font, var(--type-caption)); line-height: 1; font-variant-numeric: tabular-nums;
+  border-radius: 50%; font: var(--sheet-step-num-font, var(--type-caption)); line-height: var(--lh-solid); font-variant-numeric: tabular-nums;
   background: var(--sheet-step-num-bg, var(--card-bg)); color: var(--sheet-step-num-ink, inherit);
 }
 .sheet-step__summary { color: var(--sheet-step-summary-ink, var(--card-muted)); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -576,11 +561,54 @@
 .sheet-step__body { min-height: 0; overflow: clip; overflow-clip-margin: var(--sp-1); }
 .sheet-step__inner { display: grid; gap: var(--card-gap); padding-block: var(--card-gap); padding-inline: var(--sheet-step-inner-pad-x, var(--sheet-step-bar-pad-x, var(--sp-3))); } /* the open step's content in the frame of its title's words (the bar's own inset), so it reads as that step's (Lh 2026-09-28, #153) */
 .sheet-step__inner > * { min-width: 0; }
-.sheet-step__inner > .link { justify-self: center; } /* a link of its own row in a step (skip, "change number", "set PIN again"): centred under the step, as the skip (Lh 2026-09-25) */
-.sheet-step:not(.sheet-step--now) > .sheet-step__body { visibility: hidden; transition: visibility 0s linear var(--motion-sheet); }
+.sheet-step:not(.sheet-step--now) > .sheet-step__body { visibility: hidden; transition: visibility 0s var(--ease-linear) var(--motion-sheet); }
 .sheet-step__go { position: absolute; inset: min(0rem, (var(--_row-h) - var(--tap-sm)) / 2) 0 auto; min-height: max(100%, var(--tap-sm)); /* a thin bar still takes a 44px tap */ margin: 0; cursor: pointer; }
 /* the last step's finish, when the app gives one: under the steps */
 .sheet-steps__finish { display: grid; padding-top: var(--card-gap); }
 @media (prefers-reduced-motion: reduce) { .sheet-step { transition: none; } }
-/* the step waiting for its answer: its buttons take no taps (the app guards its own handler too) */
-.sheet-step--busy .btn { pointer-events: none; opacity: 0.5; }
+
+/* ==== the step bar answers a press, as PRESS in actions.css answers every other control (#62: a block is written in its own file) ==== */
+.sheet-step:has(> .sheet-step__go:active) { opacity: var(--press-dim); } /* the step bar's button is invisible over it: the bar answers */
+
+/* ==== a body that holds only an EmptyState stands it at --empty-state-at of its room, as a Step does (step.css) (#62: a block is written in its own file) ==== */
+.sheet__body:has(> .empty-state:only-child) { display: flex; flex-direction: column; gap: 0; }
+.sheet__body:has(> .empty-state:only-child)::before { content: ""; flex: calc(var(--empty-state-at, 0) * 5) 1 0; }
+.sheet__body:has(> .empty-state:only-child)::after { content: ""; flex: calc(5 - var(--empty-state-at, 0) * 5) 1 0; }
+
+/* ---- where it sits in what stack.css draws (docs/reference.md rule 15) ---- */
+/* a pull in the content, already at the top: the words move down, the card stays. --_refresh is the finger, private.
+   A paper body adds its own --sp-6 on top of this (the rule below): the stack's gap under the head is the
+   card's colour, so without the paper's inset the first row sits on that seam. */
+.sheet-stack > .card > .sheet__body { padding-top: var(--_refresh, 0rem); transition: padding-top var(--motion-sheet) var(--ease); }
+/* the head's band is as slim as it can be (Lh 2026-10-06: 20 over · 48 head · 20 under read as a heavy bar): the paper starts
+   --sp-3 under the head, not a whole --card-gap (--sp-2 at first; Lh added 4 the same day). The body is pulled up by the difference — the card's gap is left alone, the
+   stack's step and the body's own rows read it. */
+.sheet-stack > .card.sheet--paper > .sheet__body {
+  margin-top: calc(var(--sp-3) - var(--card-gap));
+  padding-top: calc(var(--sp-6) + var(--_refresh, 0rem));
+  transition: padding-top var(--motion-sheet) var(--ease), background-color 0s var(--ease-linear);
+}
+/* a pull follows the finger at once, on paper too: the rule above is as strong as the stack's own `is-refreshing` one and comes later */
+.sheet-stack > .card.sheet--paper > .sheet__body.is-refreshing { transition: none; }
+/* a closed paper sheet's body stays clear (Lh 2026-10-06). The next sheet's round top does not
+   cover the corners, and a paper body showed there beside the head. Clear, the card's own colour
+   shows in that pocket. Open, the body is paper, and the first row sits --sp-6 down, the same paper
+   inset a single paper sheet keeps: the flex gap under the head is the card's colour, so the row
+   would otherwise sit on that seam. A pull adds --_refresh on top of the inset. On the way back
+   into the stack the card colour fades in quickly (--motion-quick) and that fade ends with the
+   sheet's own slide (--motion-sheet, plus the same stagger), so the corner is the head colour
+   at the moment the sheet stops. Rising, the body is paper at once. */
+.sheet-stack > .card.sheet--paper:not(.is-open) > .sheet__body {
+  background-color: transparent;
+  transition:
+    padding-top var(--motion-sheet) var(--ease),
+    background-color var(--motion-quick) var(--ease) calc(var(--stagger, 0) * var(--motion-stagger) + var(--motion-sheet) - var(--motion-quick));
+}
+@media (prefers-reduced-motion: reduce) { .sheet-stack > .card.sheet--paper:not(.is-open) > .sheet__body {
+    transition: padding-top var(--motion-sheet) var(--ease), background-color 0s var(--ease-linear);
+  } }
+/* ---- where it sits in what step.css draws (docs/reference.md rule 15) ---- */
+.screen--fill > .appbar + .sheet-stage { margin-top: 0; }
+
+/* ---- where it sits in what stack.css draws: a body pulled to refresh holds still (docs/reference.md rule 15) ---- */
+.sheet-stack > .card > .sheet__body.is-refreshing { transition: none; }