@usableapp/cardds 0.7.103 → 0.7.105

package/css/choice.css

@@ -52,7 +52,7 @@
   --dark: var(--action-dark); /* the paper's side: its knob at rest is the paper's muted ink, on the accent the accent's */
   color: var(--card-ink);
   position: relative;
-  transition: background-color var(--motion-press) ease-out, border-color var(--motion-press) ease-out;
+  transition: background-color var(--motion-press) var(--ease-out), border-color var(--motion-press) var(--ease-out);
 }
 .toggle::after {
   content: "";
@@ -63,7 +63,7 @@
   height: calc(var(--_h) - 2 * var(--_pad) - 2 * var(--border-w));
   border-radius: 50%;
   background: var(--card-muted); /* a glyph: a shade of its side, never an opacity (0.45 of the ink was 2.4:1 on the paper) */
-  transition: translate var(--motion-quick) ease;
+  transition: translate var(--motion-quick) var(--ease);
 }
 .toggle:checked { background: var(--accent); border-color: transparent; }
 .toggle:checked::after { translate: calc(var(--_w) - var(--_h)) 0; background: var(--on-accent); }
@@ -75,34 +75,18 @@
    <div class="chip-row"><label class="chip chip--pick chip--sign"><input type="checkbox">Nature</label>…</div> */
 .chip-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(min(5.5rem, 100%), 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--tap-base) * 11 / 6), 100%), 1fr));
   gap: var(--chip-grid-gap, var(--sp-2));
 }
 /* .chip hugs its text as a loose grid child (justify-self: start); inside a
    chip grid the whole point is equal, full-width pick targets, so stretch.
    Matters most in scripts without word spaces (Thai): min-content is the
    whole string, tracks get wide, and hugging chips leave a ragged grid. */
-.chip-grid > .chip { justify-self: stretch; justify-content: center; min-height: var(--btn-h); padding-inline: var(--sp-2); }
-.chip--pick { position: relative; } /* the input covers the whole chip, on a row as in a grid */
+.chip-grid > .chip { --chip-self: stretch; --chip-justify: center; --chip-min-h: var(--btn-h); --chip-pad-x: var(--sp-2); }
 /* the hidden input, the same shape wherever a native radio/checkbox drives a picked look:
    a chip, a mood dot, a tile (media.css), a sticky's tone swatch (sticky.css), a place on a map (sheet.css), a card that is a label round a radio
    (a pickable row card: the app gives the picked one its `tone`) — the native input lies over its whole box, unseen */
 :is(.chip--pick, .mood__opt, .tile--pick, .sticky-pick__swatch, .map-pick) > input, label.card > input[type="radio"] { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
-:is(.chip--pick, .tile--pick):has(:checked) { background: var(--accent); --dark: var(--accent-dark); color: var(--card-ink); border-color: transparent; }
-/* --sign: the trailing + that turns 45° into an × when picked — one mask, one rotate, no swap (Lh 2026-09-16) */
-.chip--sign { padding-right: var(--sp-2); }
-.chip--sign::after {
-  content: "";
-  width: var(--icon-xs);
-  height: var(--icon-xs);
-  flex: none;
-  background: currentColor;
-  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>') center / contain no-repeat;
-  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>') center / contain no-repeat;
-}
-.chip--sign:has(:checked)::after { rotate: 45deg; }
-@media (prefers-reduced-motion: no-preference) { .chip--sign::after { transition: rotate var(--motion-slide); } }
-
 /* ---- day strip: a week, one day selected, today a light tone ----
    <div class="day-strip" role="tablist"><button class="day" role="tab" aria-selected="true"><span class="day__name">Thu</span><span class="day__num">16</span></button>…</div> */
 .day-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--day-strip-gap, var(--sp-1)); }
@@ -125,7 +109,7 @@
   color: var(--day-rest-ink, var(--card-muted)); /* an unpicked day at rest: the muted words of the ground it stands on (an opacity faded it under AA) */
 }
 .day__name { font: var(--day-name-font, var(--type-caption)); }
-.day__num { font: 700 var(--fs-lg)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
+.day__num { font: var(--fw-bold) var(--fs-lg) / var(--lh-tight) var(--font-display); font-variant-numeric: tabular-nums; }
 /* today: a light tone, no louder than a rest; the selected pill below wins when it is both (it comes after and weighs more) */
 .day--today { background: var(--day-today-bg, var(--ink-tint)); color: var(--day-today-ink, var(--card-ink)); }
 .day[aria-selected="true"] { background: var(--day-selected-bg, var(--accent)); color: var(--day-selected-ink, var(--on-accent)); }
@@ -144,7 +128,7 @@
   display: grid;
   place-items: center;
   border-radius: 50%;
-  font: 500 var(--fs-title)/1 var(--font-ui);
+  font: var(--fw-medium) var(--fs-title) / var(--lh-solid) var(--font-ui);
   font-variant-numeric: tabular-nums;
   grid-column-start: var(--start, auto); /* --start on the 1st: weekday column 1–7 */
 }
@@ -152,8 +136,8 @@
    strong mark adds a ring of the accent. A stronger fill sat at the middle, where neither the ink nor --on-accent holds 4.5:1 */
 .calendar__day--mark { background: var(--calendar-day-mark-bg, color-mix(in srgb, var(--accent) 12%, transparent)); }
 .calendar__day--mark2 { background: var(--calendar-day-mark2-bg, color-mix(in srgb, var(--accent) 12%, transparent)); color: var(--calendar-day-mark2-ink, inherit); box-shadow: var(--calendar-day-mark2-shadow, inset 0 0 0 var(--border-w) var(--accent)); }
-.calendar__day[aria-selected="true"] { background: var(--calendar-day-selected-bg, var(--accent)); color: var(--calendar-day-selected-ink, var(--on-accent)); font-weight: 700; }
-.calendar__day:disabled { opacity: 0.3; }
+.calendar__day[aria-selected="true"] { background: var(--calendar-day-selected-bg, var(--accent)); color: var(--calendar-day-selected-ink, var(--on-accent)); font-weight: var(--fw-bold); }
+.calendar__day:disabled { opacity: var(--fade-dim); }
 .calendar__day[aria-current="date"] { text-decoration: underline; text-underline-offset: 0.2em; }
 
 /* ---- calendar weeks: a run of week rows that scrolls week by week, `show` rows in sight; the head sticks at the top of the box
@@ -166,12 +150,12 @@
   overflow-y: auto;
   overscroll-behavior: contain;
   scroll-snap-type: y mandatory;
-  scroll-padding-block-start: var(--_weeks-lead, 0px);
+  scroll-padding-block-start: var(--_weeks-lead, 0rem);
   overflow-anchor: none; /* a pick rerenders the rows; the browser must not shift the scroll to keep an anchor */
   scrollbar-width: none;
 }
 .calendar--weeks::-webkit-scrollbar { display: none; }
-.calendar__weeks-head { position: sticky; inset-block-start: 0; z-index: 1; display: grid; gap: var(--calendar-head-gap, var(--sp-2)); background: var(--calendar-weeks-head-bg, var(--card-bg)); }
+.calendar__weeks-head { position: sticky; inset-block-start: 0; z-index: var(--z-over); display: grid; gap: var(--calendar-head-gap, var(--sp-2)); background: var(--calendar-weeks-head-bg, var(--card-bg)); }
 .calendar__label { font: var(--calendar-label-font, var(--type-label)); color: var(--calendar-label-ink, inherit); justify-self: start; }
 button.calendar__label { appearance: none; border: 0; padding: 0; background: none; cursor: pointer; border-radius: var(--sp-1); }
 button.calendar__label:focus-visible { outline: var(--focus); outline-offset: var(--sp-0); }
@@ -196,14 +180,14 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   height: var(--mood-dot-size, var(--icon-xs));
   border-radius: 50%;
   background: var(--_mood, currentColor);
-  transition: scale 0.2s ease, box-shadow 0.2s ease;
+  transition: scale var(--motion-quick) var(--ease), box-shadow var(--motion-quick) var(--ease);
 }
 .mood__opt:nth-child(1) { --_mood: var(--neg); }
 .mood__opt:nth-child(2) { --_mood: color-mix(in srgb, var(--neg) 50%, var(--dot-b)); }
 .mood__opt:nth-child(3) { --_mood: var(--dot-b); }
 .mood__opt:nth-child(4) { --_mood: color-mix(in srgb, var(--pos) 50%, var(--dot-b)); }
 .mood__opt:nth-child(5) { --_mood: var(--pos); }
-.mood__opt:has(:checked) > .mood__dot { scale: 1.7; box-shadow: 0 0 0 var(--sp-2) color-mix(in srgb, var(--_mood, currentColor) 25%, transparent); }
+.mood__opt:has(:checked) > .mood__dot { scale: var(--scale-pick); box-shadow: 0 0 0 var(--sp-2) color-mix(in srgb, var(--_mood, currentColor) 25%, transparent); }
 .mood__opt:has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-0); border-radius: 50%; }
 
 /* ---- pin: big code entry, one digit per pill ----
@@ -243,7 +227,7 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   background-position: center;
   background-repeat: no-repeat;
 }
-.pin--secret .pin__cell.is-fresh:not(:placeholder-shown) { animation: pin-flash var(--pin-flash-time, 0.5s) steps(1); }
+.pin--secret .pin__cell.is-fresh:not(:placeholder-shown) { animation: pin-flash var(--pin-flash-time, var(--motion-flash)) var(--ease-step); }
 @keyframes pin-flash { 0% { -webkit-text-fill-color: currentColor; background-size: 0 0; } }
 .pin--secret .pin__cell::selection { background: transparent; } /* its digit is selected when the cell takes the cursor: nothing to show of it */
 .pin__cell:focus { outline: none; }
@@ -254,12 +238,12 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 .pin--asleep .pin__cell:focus:placeholder-shown { background-image: none; animation: none; }
 .pin__cell:is(:focus, [data-cursor]):placeholder-shown {
   background-image: linear-gradient(currentColor, currentColor);
-  background-size: var(--pin-caret-w, 2px) var(--pin-caret-h, 1em);
+  background-size: var(--pin-caret-w, var(--hairline-w)) var(--pin-caret-h, 1em);
   background-position: center;
   background-repeat: no-repeat;
 }
 @media (prefers-reduced-motion: no-preference) {
-  .pin__cell:is(:focus, [data-cursor]):placeholder-shown { animation: pin-caret 1.1s steps(1) infinite; }
+  .pin__cell:is(:focus, [data-cursor]):placeholder-shown { animation: pin-caret var(--motion-blink) var(--ease-step) infinite; }
   @keyframes pin-caret { 50% { background-size: 0 0; } }
 }
 
@@ -271,13 +255,13 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
 .composer { display: grid; gap: var(--composer-gap, var(--sp-3)); }
 .composer__input {
   width: 100%;
-  min-height: var(--composer-input-min-h, 11rem);
+  min-height: var(--composer-input-min-h, calc(var(--tap-base) * 11 / 3));
   resize: none;
   border: 0;
   padding: 0;
   background: transparent;
   color: inherit;
-  font: var(--composer-input-font, 700 var(--fs-2xl)/1.25 var(--font-display));
+  font: var(--composer-input-font, var(--fw-bold) var(--fs-2xl) / var(--lh-h2) var(--font-display));
   letter-spacing: var(--track-h2);
   outline: none;
 }
@@ -363,3 +347,11 @@ button.calendar__label:focus-visible { outline: var(--focus); outline-offset: va
   -webkit-user-select: none; user-select: none;
   flex: none;
 }
+
+/* ==== the pin's wrong code: red cells and one shake (#62: a block is written in its own file) ==== */
+.pin.pin--error .pin__cell, .pin.pin--error .pin__cell:focus { border-color: var(--pin-error-border, var(--signal-error)); color: var(--pin-error-ink, var(--signal-error)); } /* ALL the cells, edge and digit — the one the cursor waits in too (Lh 2026-09-24); the wrong digits stay in red until the member types again */
+/* a code that does not match (Pin match): the row shakes once, sideways, then the Pin empties itself for a new try (Lh 2026-09-25) */
+@media (prefers-reduced-motion: no-preference) {
+  .pin--shake { animation: pin-shake var(--pin-shake-time, var(--motion-shake)) var(--ease-in-out); }
+}
+@keyframes pin-shake { 0%, 100% { translate: 0; } 20%, 60% { translate: calc(-1 * var(--pin-shake-x, var(--sp-2))); } 40%, 80% { translate: var(--pin-shake-x, var(--sp-2)); } }

package/css/finish.css

@@ -33,28 +33,28 @@
    ============================================================ */
 [data-finish="lit"] {
   --_shade: var(--on-surface);
-  --finish-edge: inset 0 1px 0 rgb(255 255 255 / 0.55);                            /* the lit top edge */
-  --finish-ring: 0 0 0 1px color-mix(in srgb, var(--_shade) 7%, transparent);        /* the hairline round a raised thing */
+  --finish-edge: inset 0 0.0625rem 0 rgb(255 255 255 / 0.55);                            /* the lit top edge */
+  --finish-ring: 0 0 0 0.0625rem color-mix(in srgb, var(--_shade) 7%, transparent);        /* the hairline round a raised thing */
 
   /* the three shadows every component already reads — layered: one close and crisp, one far and soft */
   --shadow-card: var(--finish-edge), var(--finish-ring),
-    0 1px 2px color-mix(in srgb, var(--_shade) 8%, transparent),
+    0 0.0625rem 0.125rem color-mix(in srgb, var(--_shade) 8%, transparent),
     0 0.375rem 0.75rem -0.125rem color-mix(in srgb, var(--_shade) 8%, transparent),
     0 1.25rem 2.5rem -0.75rem color-mix(in srgb, var(--_shade) 14%, transparent);
   --shadow-float: var(--finish-edge), var(--finish-ring),
-    0 1px 2px color-mix(in srgb, var(--_shade) 12%, transparent),
+    0 0.0625rem 0.125rem color-mix(in srgb, var(--_shade) 12%, transparent),
     0 0.5rem 1.25rem -0.25rem color-mix(in srgb, var(--_shade) 22%, transparent);
   --shadow-sheet: var(--finish-edge), var(--finish-ring),
-    0 -1px 2px color-mix(in srgb, var(--_shade) 6%, transparent),
+    0 -0.0625rem 0.125rem color-mix(in srgb, var(--_shade) 6%, transparent),
     0 -0.75rem 2.5rem color-mix(in srgb, var(--_shade) 18%, transparent);
 
   /* a control: its own small lift, and the sheen that runs down its face */
   --finish-control: var(--finish-edge), var(--finish-ring),
-    0 1px 2px color-mix(in srgb, var(--_shade) 12%, transparent),
+    0 0.0625rem 0.125rem color-mix(in srgb, var(--_shade) 12%, transparent),
     0 0.25rem 0.5rem -0.125rem color-mix(in srgb, var(--_shade) 12%, transparent);
-  --finish-control-down: var(--finish-ring), inset 0 1px 2px color-mix(in srgb, var(--_shade) 18%, transparent);
+  --finish-control-down: var(--finish-ring), inset 0 0.0625rem 0.125rem color-mix(in srgb, var(--_shade) 18%, transparent);
   --finish-sheen: linear-gradient(to bottom, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0) 60%);
-  --finish-sunk: inset 0 1px 2px color-mix(in srgb, var(--_shade) 14%, transparent), 0 1px 0 rgb(255 255 255 / 0.5);
+  --finish-sunk: inset 0 0.0625rem 0.125rem color-mix(in srgb, var(--_shade) 14%, transparent), 0 0.0625rem 0 rgb(255 255 255 / 0.5);
 
   --outline: color-mix(in srgb, currentColor 14%, transparent);
 }
@@ -76,9 +76,9 @@
 }
 /* the main button throws its own colour */
 [data-finish="lit"] .btn--primary,
-[data-finish="lit"] .icon-btn--invert:not(.icon-btn-group > *) {
+[data-finish="lit"] :is(.icon-btn--invert, .icon-btn--primary):not(.icon-btn-group > *) {
   box-shadow: var(--finish-edge),
-    0 1px 2px color-mix(in srgb, var(--_shade) 20%, transparent),
+    0 0.0625rem 0.125rem color-mix(in srgb, var(--_shade) 20%, transparent),
     0 0.5rem 1rem -0.25rem color-mix(in srgb, var(--accent) 45%, transparent);
 }
 /* a peeked stack tab is the icon alone: no sheen and no shadow until its sheet is open (the fill fades with the sheet) */
@@ -92,7 +92,7 @@
 }
 [data-finish="lit"] .icon-btn-group { box-shadow: var(--finish-control); }
 [data-finish="lit"] .toggle { box-shadow: var(--finish-sunk); }
-[data-finish="lit"] .toggle::after { box-shadow: 0 1px 2px color-mix(in srgb, var(--_shade) 35%, transparent); }
+[data-finish="lit"] .toggle::after { box-shadow: 0 0.0625rem 0.125rem color-mix(in srgb, var(--_shade) 35%, transparent); }
 
 /* ---- sunk: what the member types into ---- */
 [data-finish="lit"] :is(.field, .pin__cell) { box-shadow: var(--finish-sunk); }
@@ -110,12 +110,12 @@
 }
 [data-finish="print"] .card {
   border: var(--border-w) solid var(--_ink);
-  box-shadow: var(--print-off, 3px) var(--print-off, 3px) 0 0 color-mix(in srgb, var(--card-ink) 28%, transparent);
+  box-shadow: var(--print-off, 0.1875rem) var(--print-off, 0.1875rem) 0 0 color-mix(in srgb, var(--card-ink) 28%, transparent);
   isolation: isolate; /* the grain's blend stays inside the card */
 }
 /* the grain: a ::after, not ::before — .card--cover's scrim is its ::before. Over everything in the card (z-index 1, the foot's own level), touches pass through it */
 [data-finish="print"] .card::after {
-  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
+  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: var(--z-over);
   opacity: var(--print-grain, 0.32); mix-blend-mode: multiply;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0 0.2 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 }
@@ -127,10 +127,11 @@
 }
 [data-finish="print"] :is(.btn, .chip) {
   border-color: var(--_ink);
-  box-shadow: 2px 2px 0 0 color-mix(in srgb, currentColor 35%, transparent);
+  box-shadow: 0.125rem 0.125rem 0 0 color-mix(in srgb, currentColor 35%, transparent);
 }
-[data-finish="print"] .btn--primary { box-shadow: 2px 2px 0 0 color-mix(in srgb, var(--card-ink) 60%, transparent); }
-[data-finish="print"] :is(.btn, .chip):active { box-shadow: none; translate: 2px 2px; }
+[data-finish="print"] .chip { border-color: var(--chip-border, var(--_ink)); } /* a holder that clears a chip's edge (a note's chips) clears it in print too */
+[data-finish="print"] .btn--primary { box-shadow: 0.125rem 0.125rem 0 0 color-mix(in srgb, var(--card-ink) 60%, transparent); }
+[data-finish="print"] :is(.btn, .chip):active { box-shadow: none; translate: 0.125rem 0.125rem; }
 [data-finish="print"] .card__thumb { border-style: dashed; }
 
 /* ============================================================
@@ -142,28 +143,28 @@
 [data-finish="sticker"] { --outline: color-mix(in srgb, currentColor 18%, transparent); }
 [data-finish="sticker"] .card {
   box-shadow:
-    0 0 0 var(--sticker-cut, 5px) #fff,
-    0 calc(var(--sticker-cut, 5px) + 4px) 0 0 color-mix(in srgb, var(--on-surface) 16%, transparent),
-    0 calc(var(--sticker-cut, 5px) + 12px) 20px -8px color-mix(in srgb, var(--on-surface) 22%, transparent);
+    0 0 0 var(--sticker-cut, 0.3125rem) #fff,
+    0 calc(var(--sticker-cut, 0.3125rem) + 0.25rem) 0 0 color-mix(in srgb, var(--on-surface) 16%, transparent),
+    0 calc(var(--sticker-cut, 0.3125rem) + 0.75rem) 1.25rem -0.5rem color-mix(in srgb, var(--on-surface) 22%, transparent);
 }
 [data-finish="sticker"] .card:not(.sheet, .modal, .card--away, .sheet-stack *, .card-list > *, .card-feed > *) { rotate: var(--sticker-tilt, 0.8deg); }
 [data-finish="sticker"] .card:not(.sheet, .modal, .card--away, .sheet-stack *, .card-list > *, .card-feed > *):nth-of-type(even) { rotate: calc(-1 * var(--sticker-tilt, 0.8deg)); }
 [data-finish="sticker"] .card-list { gap: var(--sp-5); }
 [data-finish="sticker"] .btn {
-  box-shadow: 0 3px 0 0 color-mix(in srgb, currentColor 30%, transparent);
+  box-shadow: 0 0.1875rem 0 0 color-mix(in srgb, currentColor 30%, transparent);
   border-color: color-mix(in srgb, currentColor 25%, transparent);
 }
-[data-finish="sticker"] .btn--primary { box-shadow: 0 3px 0 0 color-mix(in srgb, var(--btn-primary-bg, var(--accent)) 55%, var(--on-surface)); }
-[data-finish="sticker"] .btn:active { box-shadow: none; translate: 0 3px; }
-[data-finish="sticker"] .chip { box-shadow: 0 0 0 3px #fff; }
+[data-finish="sticker"] .btn--primary { box-shadow: 0 0.1875rem 0 0 color-mix(in srgb, var(--btn-primary-bg, var(--accent)) 55%, var(--on-surface)); }
+[data-finish="sticker"] .btn:active { box-shadow: none; translate: 0 0.1875rem; }
+[data-finish="sticker"] .chip { box-shadow: 0 0 0 0.1875rem #fff; }
 
 /* ============================================================
    ink — a poster / comic print: --ink-w of the surface's ink round every boundary and control, and a hard
    offset of --ink-off in the same ink. The two wireframe borders come back as that line.
    ============================================================ */
 [data-finish="ink"] { --card-border: var(--on-surface); --action-border: var(--on-surface); --outline: currentColor; }
-[data-finish="ink"] .card { border: var(--ink-w, 2.5px) solid var(--on-surface); box-shadow: var(--ink-off, 5px) var(--ink-off, 5px) 0 0 var(--on-surface); }
-[data-finish="ink"] :is(.btn, .chip, .icon-btn:not(.icon-btn-group > *)) { border: var(--ink-w, 2.5px) solid currentColor; box-shadow: 3px 3px 0 0 currentColor; }
-[data-finish="ink"] .btn--primary { border-color: var(--on-surface); box-shadow: 3px 3px 0 0 var(--on-surface); }
-[data-finish="ink"] .toggle { box-shadow: 2px 2px 0 0 var(--on-surface); }
-[data-finish="ink"] .card__thumb { border-width: var(--ink-w, 2.5px); }
+[data-finish="ink"] .card { border: var(--ink-w, 0.15625rem) solid var(--on-surface); box-shadow: var(--ink-off, 0.3125rem) var(--ink-off, 0.3125rem) 0 0 var(--on-surface); }
+[data-finish="ink"] :is(.btn, .chip, .icon-btn:not(.icon-btn-group > *)) { border: var(--ink-w, 0.15625rem) solid currentColor; box-shadow: 0.1875rem 0.1875rem 0 0 currentColor; }
+[data-finish="ink"] .btn--primary { border-color: var(--on-surface); box-shadow: 0.1875rem 0.1875rem 0 0 var(--on-surface); }
+[data-finish="ink"] .toggle { box-shadow: 0.125rem 0.125rem 0 0 var(--on-surface); }
+[data-finish="ink"] .card__thumb { border-width: var(--ink-w, 0.15625rem); }

package/css/forms.css

@@ -23,7 +23,7 @@
 .field select,
 .field textarea,
 .field--rows {
-  font: var(--field-font, 400 var(--fs-lg) / 1.4 var(--font-ui)); /* 26: the words being typed read a size up from body (Lh 2026-09-22); the Composer already does. .field--rows too, so 1lh is the textarea's line for its icon */
+  font: var(--field-font, var(--fw-regular) var(--fs-lg) / var(--lh-field) var(--font-ui)); /* 26: the words being typed read a size up from body (Lh 2026-09-22); the Composer already does. .field--rows too, so 1lh is the textarea's line for its icon */
 }
 .field input,
 .field select,
@@ -37,17 +37,16 @@
   caret-color: currentColor;
 }
 .field input::placeholder,
-.field textarea::placeholder { color: inherit; opacity: 0.55; font-size: calc(1em * var(--_ph-fit, 1)); } /* --_ph-fit: Field's measure — a placeholder longer than the box shrinks to show whole (Lh 2026-09-25) */
+.field textarea::placeholder { color: inherit; opacity: var(--fade-hint); font-size: calc(1em * var(--_ph-fit, 1)); } /* --_ph-fit: Field's measure — a placeholder longer than the box shrinks to show whole (Lh 2026-09-25) */
 /* several lines in the same frame (Field rows): the textarea is as tall as its `rows` × line, the frame grows round it, the icon and the action stay at the top (Lh 2026-10-19) */
 .field--rows { align-items: flex-start; padding-block: var(--field-rows-pad-y, var(--sp-3)); }
 .field textarea { flex: 1; resize: none; display: block; }
-.field--rows > .icon { margin-top: calc((1lh - var(--icon-sm)) / 2); } /* centred on the first line */
+.field--rows > .icon { --icon-margin: calc((1lh - var(--icon-sm)) / 2) 0 0; } /* centred on the first line */
 /* the field the cursor is in: its own border goes full ink, in every palette (the coloured ones fade it to 25% at rest) */
 .field:has(:focus, [data-cursor]) { border-color: var(--field-active-border, currentColor); } /* [data-cursor]: SheetSteps holds the phone's keyboard for this field */
 
 /* field with its action inside: date pick, send, go — the button sits flush right */
 .field--action { padding-right: var(--sp-1); min-height: var(--field-action-min-h, var(--tap-lg)); }
-.field--action > .icon-btn { margin-left: auto; }
 
 /* colored palettes drop the visible outline elsewhere — fields keep one */
 [data-palette] .field:not(:has(:focus)) { border-color: color-mix(in srgb, currentColor 25%, transparent); }
@@ -72,22 +71,15 @@
   display: grid;
   place-items: center;
   font-size: var(--add-row-plus-font-size, var(--fs-md));
-  line-height: 1;
+  line-height: var(--lh-solid);
 }
-.add-row__plus .icon { width: var(--icon-xs); height: var(--icon-xs); }
+.add-row__plus .icon { --icon-size: var(--icon-xs); }
 
 /* ---- a wrong value, and the line that says so (Lh 2026-09-24) ----
    --signal-error is the one colour the wireframe has; it never speaks alone — the line carries an icon and words.
    <p class="form-note form-note--error" role="alert"><svg class="icon icon--xs">…</svg>Not a phone number</p>
    <p class="form-note form-note--busy" role="status"><svg …/>Sending the code…</p> (the ring turns) */
 .field.field--error, [data-palette] .field.field--error { border-color: var(--field-error-border, var(--signal-error)); }
-.pin.pin--error .pin__cell, .pin.pin--error .pin__cell:focus { border-color: var(--pin-error-border, var(--signal-error)); color: var(--pin-error-ink, var(--signal-error)); } /* ALL the cells, edge and digit — the one the cursor waits in too (Lh 2026-09-24); the wrong digits stay in red until the member types again */
-/* a code that does not match (Pin match): the row shakes once, sideways, then the Pin empties itself for a new try (Lh 2026-09-25) */
-@media (prefers-reduced-motion: no-preference) {
-  .pin--shake { animation: pin-shake var(--pin-shake-time, 0.4s) ease-in-out; }
-}
-@keyframes pin-shake { 0%, 100% { translate: 0; } 20%, 60% { translate: calc(-1 * var(--pin-shake-x, var(--sp-2))); } 40%, 80% { translate: var(--pin-shake-x, var(--sp-2)); } }
 .form-note { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin: 0; font: var(--form-note-font, var(--type-caption)); color: var(--form-note-ink, var(--card-muted)); text-align: center; }
-.form-note > .icon { flex: none; }
 .form-note--error { color: var(--form-note-error-ink, var(--signal-error)); }
-@media (prefers-reduced-motion: no-preference) { .form-note--busy > .icon { animation: turn 0.9s linear infinite; } } /* `turn`: tokens.css */
+@media (prefers-reduced-motion: no-preference) { .form-note--busy > .icon { --icon-spin: turn var(--motion-spin) var(--ease-linear) infinite; } } /* `turn`: tokens.css */

package/css/journey.css

@@ -22,7 +22,7 @@
 .route__time { grid-row: 3; align-self: start; }
 
 .route__code { font: var(--route-code-font, var(--type-h2)); letter-spacing: var(--track-h2); display: flex; align-items: center; gap: var(--route-code-gap, var(--sp-3)); }
-.route__code::after, .route__point--end .route__code::before { content: ""; flex: 1; border-top: var(--rule-w) dotted currentColor; opacity: 0.65; }
+.route__code::after, .route__point--end .route__code::before { content: ""; flex: 1; border-top: var(--rule-w) dotted currentColor; opacity: var(--fade-mild); }
 .route__point--end .route__code::after { content: none; }
 .route__time { font: var(--route-time-font, var(--type-body)); font-variant-numeric: tabular-nums; }
 .route__place { font: var(--route-place-font, var(--type-caption)); color: var(--route-place-ink, var(--card-muted)); }
@@ -43,17 +43,19 @@
 /* the label is the badge's own ink, smaller: a badge is a small fill of any colour (a palette paints it yellow), and only its own ink is
    sure to hold 4.5:1 on it; --dim faded it to 2.4:1 */
 .tile-badge__label { font: var(--tile-badge-label-font, var(--type-caption)); color: var(--tile-badge-label-ink, inherit); }
-.tile-badge__value { font: 800 var(--fs-lg)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
+.tile-badge__value { font: var(--fw-heavy) var(--fs-lg) / var(--lh-tight) var(--font-display); font-variant-numeric: tabular-nums; }
 
 /* plain: no fill — a date box beside a title (Jun / 18) */
 .tile-badge--plain { background: transparent; --dark: inherit; color: inherit; padding: 0; min-width: var(--tile-badge-plain-min-w, var(--tap-sm)); }
-.tile-badge--plain .tile-badge__value { font: 800 var(--fs-h1)/1 var(--font-display); }
+.tile-badge--plain .tile-badge__value { font: var(--fw-heavy) var(--fs-h1) / var(--lh-solid) var(--font-display); }
 
 /* stretch: a date in a head (Lh 2026-10-19) — as tall as the title block beside it and no taller (the head stretches it; size
    containment keeps its own words from adding height). Its height picks the form: short (a one-line title) = two lines, the day name
-   over the number and the month on one line; tall (a two-line title) = three lines, day · number · month. */
+   over the number and the month on one line; tall (a two-line title) = three lines, day · number · month. It grows no taller than
+   its three lines (2026-10-21, timebank: beside a four-line title it was a tall empty block); held there, it stands at the head's top. */
 .tile-badge--stretch {
   align-self: stretch;
+  max-block-size: calc((2 * var(--fs-caption) + var(--fs-lg)) * var(--tile-badge-line, var(--lh-badge)) + 2 * var(--sp-3));
   container-type: size;
   inline-size: calc(var(--fs-lg) * 3.25);
   grid-template-columns: auto auto;
@@ -63,11 +65,11 @@
   column-gap: var(--sp-1);
   row-gap: 0;
   padding-block: var(--sp-3);
-  line-height: var(--tile-badge-line, 0.95);
+  line-height: var(--tile-badge-line, var(--lh-badge));
 }
 .tile-badge--stretch > * { line-height: inherit; }
 .tile-badge--stretch > :first-child { grid-column: 1 / -1; }
-@container (min-height: 5.5rem) {
+@container (min-height: 3.5rem) { /* just under the three lines' own height, the most the badge grows to */
   .tile-badge--stretch > * { grid-column: 1 / -1; }
 }
 

package/css/layover.css

@@ -31,14 +31,14 @@
    sets open={false}).
    Reduced motion: the finished state, no beats; closing fires at once. */
 .modal {
-  --drawer-h: 14rem;
+  --drawer-h: calc(var(--tap-base) * 14 / 3);
   position: absolute;             /* at the stage's centre, and kept there as it grows: its middle is pinned at 50% and */
   top: 50%;                       /* translate -50% of its OWN height re-centres it on every height. NOT inset 0 + margin auto + */
   inset-inline: 0;                /* align-self: center — Safari 18 ignores align-self on an absolute box in a block container, */
   margin-inline: auto;            /* so the card stretched to the whole stage (iOS 18.6, Lh 2026-09-24); nor height: fit-content */
   translate: 0 -50%;
   width: calc(100% - 2 * var(--screen-pad));
-  z-index: 2;                     /* over the dim stage's scrim (z 1) */
+  z-index: var(--z-over-2);                     /* over the dim stage's scrim (z 1) */
   max-height: calc(100cqh - 2 * var(--sp-5)); /* cqh: the stage (a size container) */
   padding: 0;                     /* the parts pad themselves */
   border: 0;                      /* no frame on the modal (Lh 2026-09-16) — its edge is the shadow */
@@ -83,18 +83,17 @@
 }
 /* the CONFIRM: a Modal with no ModalBody: the ModalAsk IS the card, as tall as its words (no fixed band, no second beat) */
 .modal:not(:has(> .modal__lift)) > .modal__drawer { height: auto; padding-block: var(--modal-confirm-pad-y, var(--sp-6)); animation: none; }
-.modal__drawer .t-caption { color: var(--modal-drawer-caption-ink, var(--card-muted)); }
+.modal__drawer .t-caption { --t-caption-ink: var(--modal-drawer-caption-ink, var(--card-muted)); }
 .modal__drawer > h2:focus { outline: none; } /* the question takes the cursor when the modal arrives (for a screen reader, the keyboard's way in) — it is not a control: no ring */
 /* the answers as WORD buttons (a BtnRow of Btns; Lh 2026-10-11): the row fills the ask with room over it and each button keeps its words on one
    line — left to its words' width the row squeezed two buttons into round blobs, their words on two lines. A quiet button is an outline only,
    so on the ask its edge is the ask's ink at full strength (light on the dark end, dark on --light). The BtnTrio of round buttons is not touched. */
-.modal__drawer > .btn-row { justify-self: stretch; margin-top: var(--modal-drawer-answers-gap, var(--sp-5)); white-space: nowrap; }
-.modal__drawer .btn--quiet { border-color: var(--modal-drawer-quiet-border, currentColor); }
-.modal__drawer .icon-btn { background: transparent; color: inherit; border-color: var(--ink-rail); }
-.modal__drawer .icon-btn--invert { background: var(--accent); color: var(--on-accent); border-color: transparent; width: var(--tap-lg); height: var(--tap-lg); }
+.modal__drawer .btn--quiet { --btn-quiet-border: var(--modal-drawer-quiet-border, currentColor); }
+.modal__drawer .icon-btn { --icon-btn-bg: transparent; --icon-btn-ink: currentColor; --icon-btn-border: var(--ink-rail); }
+.modal__drawer .icon-btn--invert { --icon-btn-size: var(--tap-lg); }
 @media (prefers-reduced-motion: no-preference) {
-  .modal { animation: modal-drop calc(2 * var(--motion-sheet)) ease both; }
-  .modal__drawer { animation: modal-open calc(2 * var(--motion-sheet)) ease both; }
+  .modal { animation: modal-drop calc(2 * var(--motion-sheet)) var(--ease) both; }
+  .modal__drawer { animation: modal-open calc(2 * var(--motion-sheet)) var(--ease) both; }
   @keyframes modal-drop {
     0%        { translate: 0 calc(-50% - 100cqh); }   /* above the stage */
     50%, 100% { translate: 0 -50%; }       /* 1. at the centre — and it stays: beat 2 is the drawer's */
@@ -109,8 +108,8 @@
 .btn-trio__dots {
   width: var(--btn-trio-dots-w, var(--sp-5));
   height: var(--btn-trio-dots-h, var(--sp-1));
-  background: radial-gradient(circle, currentColor var(--sp-0), transparent calc(var(--sp-0) + 0.5px)) 0 0 / calc(var(--sp-5) / 2) 100% repeat-x;
-  opacity: 0.4;
+  background: radial-gradient(circle, currentColor var(--sp-0), transparent calc(var(--sp-0) + var(--px) / 2)) 0 0 / calc(var(--sp-5) / 2) 100% repeat-x;
+  opacity: var(--fade-soft);
 }
 
 /* ---- popover menu: a card anchored to its button, rows of icon + label ----
@@ -133,7 +132,7 @@
   border-radius: var(--menu-radius, var(--r-card));
   --menu-pad: var(--sp-2);       /* published: a row's radius is concentric with the panel's */
   padding: var(--menu-pad);
-  min-width: 12rem;
+  min-width: calc(var(--tap-base) * 4);
   align-content: start;       /* rows keep their own height: WebKit stretches a popover grid's rows to the whole room under its anchor (iOS 26.5, 2026-10-08) */
   --_menu-max: min(60dvh, calc(100dvh - 2 * var(--sp-5)));
   max-height: var(--menu-max-h, var(--_menu-max)); /* a long list (twenty neighbours) scrolls inside the panel — it ran off the screen's foot, the last names out of reach (timebank, 2026-10-08) */
@@ -167,7 +166,7 @@
   .menu[popover] {
     position-area: block-end span-inline-end;
     margin-top: var(--sp-2);
-    min-width: max(12rem, anchor-size(width)); /* at least as wide as its trigger */
+    min-width: max(calc(var(--tap-base) * 4), anchor-size(width)); /* at least as wide as its trigger */
     position-try-fallbacks: flip-block, flip-inline;
   }
   .menu--end[popover] { position-area: block-end span-inline-start; }
@@ -200,11 +199,11 @@
 .banner__summary {
   list-style: none;
   display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
-  padding-block: var(--banner-summary-pad-y, calc(var(--sp-base) * 1.5)); font: var(--banner-summary-font, var(--type-caption)); font-weight: 400;
+  padding-block: var(--banner-summary-pad-y, calc(var(--sp-base) * 1.5)); font: var(--banner-summary-font, var(--type-caption)); font-weight: var(--fw-regular);
 }
 .banner__summary::-webkit-details-marker { display: none; }
-.banner__summary .icon { transition: rotate var(--motion-quick) ease; }
-.banner[open] .banner__summary .icon { rotate: 180deg; }
+.banner__summary .icon { --icon-motion: rotate var(--motion-quick) var(--ease); }
+.banner[open] .banner__summary .icon { --icon-turn: 180deg; }
 /* the band's words never run past it: one column that cannot be wider than the band (a grid track is as wide as its longest
    word otherwise), and a word with no break in it — a link — breaks where it must (mailpool, Lh 2026-10-01) */
 .banner__body { display: grid; grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere; gap: var(--banner-body-gap, var(--sp-1)); padding-bottom: var(--sp-4); }
@@ -212,7 +211,7 @@
 @supports (interpolate-size: allow-keywords) {
   @media (prefers-reduced-motion: no-preference) {
     .banner { interpolate-size: allow-keywords; }
-    .banner::details-content { block-size: 0; overflow: clip; transition: block-size var(--motion-quick) ease, content-visibility var(--motion-quick) allow-discrete; }
+    .banner::details-content { block-size: 0; overflow: clip; transition: block-size var(--motion-quick) var(--ease), content-visibility var(--motion-quick) allow-discrete; }
     .banner[open]::details-content { block-size: auto; }
   }
 }
@@ -271,7 +270,7 @@
 /* aria-current="false" is the correct way to mark the OTHER tabs, so the
    bare attribute selector lights every one of them up */
 .float-bar__item[aria-current]:not([aria-current="false"]) { background: var(--accent); color: var(--on-accent); }
-.float-bar > .icon-btn { width: var(--bar-h); height: var(--bar-h); box-shadow: var(--shadow-float); }
+.float-bar > .icon-btn { --icon-btn-size: var(--bar-h); --icon-btn-shadow: var(--shadow-float); }
 
 /* ---- callout: a small card with a tail — over a map, a media, a mascot ----
    <div class="callout" style="top: 30%; left: 40%"><span class="callout__title">Telok Ayer Park</span><span class="callout__sub">1.2 km</span></div> */
@@ -280,7 +279,7 @@
   display: grid;
   gap: var(--callout-gap, var(--sp-0));
   width: max-content;
-  max-width: 15rem;
+  max-width: calc(var(--tap-base) * 5);
   padding: var(--callout-pad-y, var(--sp-3)) var(--callout-pad-x, var(--sp-4));
   border: var(--border-w) solid var(--callout-border, var(--action-border));
   border-radius: var(--callout-radius, var(--r-card));
@@ -313,7 +312,7 @@
      <p class="splash__text">…</p></div></section>
    The group's MIDDLE is on --screen-centre (40% down), the same line a centred card uses. The mark is the app's own content —
    a lottie box often carries empty room around its drawing — the app sets the knobs below, cardds does not guess it. */
-.splash { position: relative; background: var(--splash-bg, var(--surface)); transition: opacity var(--motion-sheet) ease; }
+.splash { position: relative; background: var(--splash-bg, var(--surface)); transition: opacity var(--motion-sheet) var(--ease); }
 .splash--leaving { opacity: 0; }
 .splash__group {
   position: absolute; inset-inline: var(--screen-pad); top: var(--splash-at, var(--screen-centre)); translate: 0 -50%;
@@ -335,13 +334,13 @@
   position: fixed; inset-inline: 0; top: calc(var(--sp-3) + var(--safe-top));
   max-width: var(--screen-w); margin-inline: auto; padding-inline: var(--screen-pad, var(--sp-4));
   display: grid; justify-items: center;
-  z-index: calc(var(--z-top) + 1);
+  z-index: calc(var(--z-top) + var(--z-over));
   pointer-events: none; visibility: hidden;
   translate: 0 calc(var(--_out) * (100% + var(--sp-8) + var(--safe-top)));
-  transition: translate var(--motion-sheet) ease, visibility 0s var(--motion-sheet);
+  transition: translate var(--motion-sheet) var(--ease), visibility 0s var(--motion-sheet);
 }
 .screen--fill > .snackbar, .sheet-stage > .snackbar { position: absolute; }
-.snackbar--bottom { --_out: 1; top: auto; bottom: calc(var(--sp-3) + var(--bottom-h, 0px) + max(var(--safe-bottom), var(--kb, 0px))); }
+.snackbar--bottom { --_out: 1; top: auto; bottom: calc(var(--sp-3) + var(--bottom-h, 0rem) + max(var(--safe-bottom), var(--kb, 0rem))); }
 .snackbar--open { translate: 0; visibility: visible; transition-delay: 0s; }
 .snackbar__body {
   display: flex; align-items: center; gap: var(--snackbar-gap, var(--sp-3));
@@ -356,8 +355,11 @@
   font: inherit; text-align: start;
   pointer-events: auto;
 }
-.snackbar__body > .icon { flex: none; color: var(--snackbar-icon-ink, var(--signal-ok)); }
+.snackbar__body > .icon { --icon-ink: var(--snackbar-icon-ink, var(--signal-ok)); }
 .snackbar__words { display: grid; min-width: 0; overflow-wrap: anywhere; }
 .snackbar__text { font: var(--snackbar-text-font, var(--type-body)); }
 .snackbar__caption { font: var(--snackbar-caption-font, var(--type-caption)); color: var(--snackbar-caption-ink, inherit); } /* on the signal's soft ground the full ink: a muted shade there fell under AA */
 @media (prefers-reduced-motion: reduce) { .snackbar { transition: none; } }
+
+/* ---- where it sits in what actions.css draws (docs/reference.md rule 15) ---- */
+.dropdown--end .menu[popover] { position-area: block-end span-inline-start; } /* right-aligned trigger: panel grows leftwards (= .menu--end, layover.css) */

package/css/lists.css

@@ -34,15 +34,15 @@
 .row__meta { font: var(--row-meta-font, var(--type-caption)); color: var(--row-meta-ink, var(--card-muted)); display: flex; align-items: center; gap: var(--row-meta-gap, var(--sp-1)); }
 .row__end { margin-left: auto; text-align: right; display: grid; gap: var(--row-end-gap, var(--sp-0)); justify-items: end; flex: none; }
 .row--lg { min-height: var(--row-lg-min-h, var(--fab)); } /* menu rows: a taller target, round arrow at the end; .rows gives them more air */
-.row--lg .row__title { font: 700 var(--fs-lg)/1.2 var(--font-display); }
+.row--lg .row__title { font: var(--fw-bold) var(--fs-lg) / var(--lh-h1) var(--font-display); }
 /* a row that EXPANDS (Lh 2026-09-22): the row is a <details>' summary, what it shows comes out under it —
    who liked a postcard, the rest of a list. An end chevron turns when open. The app owns the list.
    <details class="row-expand"><summary class="row">…lead · body · end…</summary><div class="row-expand__more">…</div></details> */
 .row-expand { display: block; }
 .row-expand > summary { list-style: none; }
 .row-expand > summary::-webkit-details-marker { display: none; }
-.row-expand > summary > .icon:last-child { transition: rotate var(--motion-slide); }
-.row-expand[open] > summary > .icon:last-child { rotate: 180deg; }
+.row-expand > summary > .icon:last-child { --icon-motion: rotate var(--motion-slide); }
+.row-expand[open] > summary > .icon:last-child { --icon-turn: 180deg; }
 .row-expand__more { padding-top: var(--row-expand-gap, var(--sp-3)); }
 /* a finished item in a checklist (a to-do list, an onboarding "complete your introduction" list):
    the words go muted, a filled tick sits at the end, and the row is no longer a tap target —
@@ -91,7 +91,7 @@
 .kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--tile-min), 100%), 1fr)); gap: var(--kv-grid-gap, var(--sp-4)); }
 .kv-grid > .kv-cell + .kv-cell { border-left: var(--border-w) solid var(--hairline); padding-left: var(--sp-4); }
 .kv-cell { display: grid; gap: var(--kv-cell-gap, var(--sp-0)); align-content: start; min-width: 0; }
-.kv-cell > .icon { margin-bottom: var(--sp-1); }
+.kv-cell > .icon { --icon-margin: 0 0 var(--sp-1); }
 .kv-cell__val { font: var(--kv-cell-val-font, var(--type-h2)); letter-spacing: var(--track-h2); font-variant-numeric: tabular-nums; }
 .kv-cell__key { font: var(--kv-cell-key-font, var(--type-caption)); color: var(--kv-cell-key-ink, var(--card-muted)); }
 
@@ -136,7 +136,7 @@
 }
 .bubble__meta { display: flex; align-items: center; gap: var(--bubble-meta-gap, var(--sp-1)); font: var(--bubble-meta-font, var(--type-caption)); color: var(--bubble-meta-ink, var(--card-muted)); }
 .bubble--right > .bubble__meta { justify-self: end; }
-.bubble__meta > .icon { color: var(--bubble-meta-icon-ink, var(--accent-ink)); }
+.bubble__meta > .icon { --icon-ink: var(--bubble-meta-icon-ink, var(--accent-ink)); }
 
 /* ---- timeline: a hairline with date chips, entries to the right ----
    <ol class="timeline"><li class="timeline__item"><span class="timeline__mark">Wed 14</span><p class="t-body">…</p></li>…</ol> */
@@ -207,5 +207,7 @@
 .bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bullets-gap, var(--sp-3)); font: var(--bullets-font, var(--type-body)); }
 .bullets__item { display: flex; align-items: start; gap: var(--bullets-pic-gap, var(--sp-3)); min-width: 0; }
 .bullets__pic { flex: none; inline-size: var(--bullets-pic-size, 1lh); block-size: var(--bullets-pic-size, 1lh); min-height: 0; object-fit: contain; border-radius: var(--bullets-pic-radius, 0rem); display: grid; place-items: center; }
-.bullets__pic.ph { border-radius: var(--bullets-pic-radius, 0rem); }
 .bullets__text { flex: 1; min-width: 0; }
+
+/* ---- where it sits in what sheet.css draws (docs/reference.md rule 15) ---- */
+.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) */