@usableapp/cardds 0.7.18 → 0.7.19

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 > For: a project that consumes `@usableapp/cardds` and its AI — what changed between versions, written as before → after, so a screen can be brought up to date without reading the source. Newest first. A consumer never edits cardds; if something here leaves you without a way to do what you did before, report the gap.
 
+## 0.7.19 — 2026-09-28
+
+### Fixed
+- SAFE AREA (Lh, timebank on Android Chrome: the bar's ← → buttons lay half under the gesture bar). With `viewport-fit=cover` the phone draws the page under its own bars; cardds kept nothing clear of them. Now it publishes `--safe-top` / `--safe-bottom` (`env(safe-area-inset-*)`, 0 without cover) and keeps clear of them: the `ActionBar`'s buttons (its ground still runs to the edge), a peeked `Sheet`'s head, a sheet's foot button and the end of its body, `FloatBar`, `Fab`, a stage's foot; a fill `Screen` starts under the status bar. A keyboard up covers the gesture bar, so the bottom room then goes to the keyboard alone. `--bar-reserve` includes it.
+- README says the ONE viewport meta cardds expects: `width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content`.
+- Nothing to change in a screen. A component of the app's own pinned to an edge reads `--safe-top` / `--safe-bottom`.
+
 ## 0.7.18 — 2026-09-27
 
 ### Fixed

package/README.md

@@ -42,6 +42,19 @@ import '@usableapp/cardds/dist/cardds.css';
 import './theme.css';   // the project's own look, after the system's — see "A project's theme"
 ```
 
+**The viewport meta cardds expects** (one way for every app):
+
+```html
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content">
+```
+
+`viewport-fit=cover` = the app runs edge to edge under the phone's own bars; cardds publishes their room as
+`--safe-top` / `--safe-bottom` (from `env(safe-area-inset-*)`, 0 without cover) and keeps what the member reads or taps
+clear of them — the bottom bar's buttons, a sheet's peeked head, its foot and the end of its body, the float bar, the FAB,
+a stage's foot; a fill `Screen` starts under the status bar — while every ground still runs to the edge. A
+component of the app's own pinned to an edge reads the same two tokens. `interactive-widget=resizes-content` =
+Android shrinks the page for the keyboard (`--kb` stays 0 there; iOS publishes it).
+
 Every behaviour is the component's own React code — the `Sheet`'s handle (tap, drag,
 keyboard) with the focus and on-screen-keyboard raises, the `SheetStack` opening and
 closing, the `Pin` auto-advance, the `Modal`'s leaving — each controlled like an input

package/css/actions.css

@@ -94,7 +94,7 @@
 .icon-btn--invert { background: var(--icon-btn-invert-bg, var(--accent)); color: var(--icon-btn-invert-ink, var(--on-accent)); border-color: transparent; }
 .icon-btn--sm { width: var(--icon-btn-sm-size, var(--tap-sm)); height: var(--icon-btn-sm-size, var(--tap-sm)); font-size: var(--fs-title); }
 /* fab: the square floating action, bottom-right of a stage or screen */
-.fab { width: var(--fab); height: var(--fab); border-radius: var(--r-card); position: absolute; right: var(--sp-4); bottom: calc(var(--sp-5) + var(--bar-h) + var(--sp-3)); box-shadow: var(--shadow-float); z-index: var(--z-fab); }
+.fab { width: var(--fab); height: var(--fab); border-radius: var(--r-card); position: absolute; right: var(--sp-4); bottom: calc(var(--sp-5) + var(--bar-h) + var(--sp-3) + var(--safe-bottom)); box-shadow: var(--shadow-float); z-index: var(--z-fab); }
 
 /* ---- buttons ---- */
 .btn {
@@ -220,13 +220,13 @@
    (step.css); on a scrolling screen a sticky last row (below). --bar-reserve stays published — the bar's nominal
    height — for the one rule that still needs it without measuring: a .card--centre's cap (card.css).
    --kb is the on-screen keyboard's height (cardds.js): the bar rides above it. */
-:root { --bar-reserve: calc(var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
+:root { --bar-reserve: calc(var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6) + var(--safe-bottom)); }
 .action-bar {
   position: relative;
   z-index: var(--z-bar); /* above .sheet-stack sheets, which paint at --level 1-5 */
   max-width: var(--screen-w);
   margin-inline: auto;
-  padding: var(--sp-3) var(--sp-4) var(--sp-5);
+  padding: var(--sp-3) var(--sp-4) calc(var(--sp-5) + var(--_safe-b-open)); /* its ground runs under the phone's gesture bar, its buttons stand above it */
   display: flex;
   gap: var(--sp-2);
 }
@@ -293,12 +293,12 @@
 .action-bar__tier { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); }
 .action-bar__tier > .btn { flex: 1; }
 .action-bar__tier--link { justify-content: center; min-height: 0; } /* a Link under the buttons, e.g. "details" that opens a Modal — its row as tall as a small link, not a tap (Lh 2026-09-23) */
-:has(> .action-bar--tiers) { --bar-reserve: calc(var(--tap) + var(--sp-3) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
+:has(> .action-bar--tiers) { --bar-reserve: calc(var(--tap) + var(--sp-3) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6) + var(--safe-bottom)); }
 /* more rows (Lh 2026-09-23: a bar may hold several rows of controls — keeping it short is the designer's job): each row past two
    adds a tap-tall row and its gap to the reserve, so the words above never run under the bar */
-:has(> .action-bar--tiers > .action-bar__tier:nth-child(3)) { --bar-reserve: calc(2 * (var(--tap) + var(--sp-3)) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
-:has(> .action-bar--tiers > .action-bar__tier:nth-child(4)) { --bar-reserve: calc(3 * (var(--tap) + var(--sp-3)) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
-:has(> .action-bar--tiers > .action-bar__tier:nth-child(5)) { --bar-reserve: calc(4 * (var(--tap) + var(--sp-3)) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
+:has(> .action-bar--tiers > .action-bar__tier:nth-child(3)) { --bar-reserve: calc(2 * (var(--tap) + var(--sp-3)) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6) + var(--safe-bottom)); }
+:has(> .action-bar--tiers > .action-bar__tier:nth-child(4)) { --bar-reserve: calc(3 * (var(--tap) + var(--sp-3)) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6) + var(--safe-bottom)); }
+:has(> .action-bar--tiers > .action-bar__tier:nth-child(5)) { --bar-reserve: calc(4 * (var(--tap) + var(--sp-3)) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6) + var(--safe-bottom)); }
 
 /* the first round button sits at the left edge, the last at the right; a skip link between them stays centred */
 :is(.action-bar--pager, .action-bar__tier--pager) > .icon-btn:first-child { margin-right: auto; }

package/css/base.css

@@ -105,6 +105,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   display: flex;
   flex-direction: column;
   height: 100dvh;
+  padding-top: var(--safe-top); /* under the phone's status bar when the app runs edge to edge (Lh 2026-09-28) */
   overflow: clip;
   position: relative; /* the box a .card--centre or a .screen__centre floats in (card.css) */
   container-type: size; /* a share of the SCREEN's height (a no-bar step's lead, step.css) reads it as cqh — a real phone's height, or the gallery's frame */

package/css/layover.css

@@ -198,7 +198,7 @@
 .float-bar {
   position: fixed;
   inset-inline: 0;
-  bottom: var(--sp-5);
+  bottom: calc(var(--sp-5) + var(--safe-bottom));
   max-width: var(--screen-w);
   margin-inline: auto;
   padding-inline: var(--float-bar-pad-x, var(--sp-4));

package/css/sheet.css

@@ -81,7 +81,7 @@
   border-radius: var(--r-card) var(--r-card) 0 0;
   border-bottom: 0;
   box-shadow: var(--sheet-shadow, var(--shadow-sheet));
-  --_foot: calc(var(--card-gap) + var(--btn-h) + var(--card-pad)); /* the foot strip's height (below) — merged here, one bare .sheet rule */
+  --_foot: calc(var(--card-gap) + var(--btn-h) + var(--card-pad) + var(--_safe-b-open)); /* the foot strip's height (below) — merged here, one bare .sheet rule */
 }
 .sheet--full { --_y: 0%; --_cover: 0rem; }
 .sheet--half { --_y: calc(var(--sheet-half) * 100%); --_cover: calc(var(--sheet-half) * var(--_box)); }
@@ -90,7 +90,7 @@
 /* --sheet-peek is declared on the BOX the sheet slides in, not on the sheet: the words behind a peeked sheet
    have to read it too (step.css keeps that much room under them), and a token only flows down. The sheet
    inherits it. A sheet whose head is taller retunes it on the box. */
-:is(.step, .sheet-stage) { --_handle: var(--sp-1); --sheet-peek: calc(var(--card-pad-rest) + var(--_handle) + 2 * var(--card-gap-rest) + var(--sheet-head-h)); }
+:is(.step, .sheet-stage) { --_handle: var(--sp-1); --sheet-peek: calc(var(--card-pad-rest) + var(--_handle) + 2 * var(--card-gap-rest) + var(--sheet-head-h) + var(--safe-bottom)); } /* + the gesture bar: the peeked head stands above it */
 /* the head's floor: a tap, or an h2 line with its Thai-mark padding when the type is bigger than that (a large text-size
    setting on a narrow phone) — the strip and the head read the same number, so the title row is always inside the strip */
 :root { --sheet-head-h: max(var(--tap), calc(var(--fs-h2) * 1.25 + var(--sp-2))); }
@@ -148,12 +148,12 @@
    stops that far above the sheet's edge. At peek there is only the handle and the title: the foot is gone.
    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(--btn-h) + var(--sp-1) + var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)) + var(--card-pad)); }
+.sheet:has(> .card__foot--link) { --_foot: calc(var(--card-gap) + 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 > .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) var(--card-pad);
+  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));
@@ -169,7 +169,7 @@
 .sheet > :not(.sheet__body) { flex-shrink: 0; }
 :is(.sheet--peek, .sheet--away) > .sheet__body { padding-bottom: 0; }
 .sheet__body > * { min-width: 0; } /* as .card > *: children shrink to the track, never widen it */
-.sheet__body:last-child { margin-bottom: calc(-1 * var(--card-pad)); padding-bottom: calc(var(--card-pad) + var(--_cover)); }
+.sheet__body:last-child { margin-bottom: calc(-1 * var(--card-pad)); padding-bottom: calc(var(--card-pad) + var(--_cover) + var(--_safe-b-open)); }
 
 /* grab handle — first child of the sheet. Drawn as a small bar, but it is
    the thumb's grab area for the whole strip above the title: a pseudo widens
@@ -349,7 +349,9 @@
   position: absolute;
   inset-inline: 0;
   bottom: 0;
-  height: var(--tap-lg);
+  height: calc(var(--tap-lg) + var(--_safe-b-open));
+  padding-bottom: var(--_safe-b-open);
+  box-sizing: border-box;
   margin: 0;
   display: grid;
   place-items: center;

package/css/step.css

@@ -136,7 +136,7 @@
   margin-inline: calc(-1 * var(--screen-pad)); /* edge to edge; its own padding is the inset */
   margin-bottom: calc(var(--sp-2) - var(--screen-gap));
 }
-.screen.screen--fill:has(> .appbar) { padding-top: 0; --header-gap: 0rem; }
+.screen.screen--fill:has(> .appbar) { padding-top: var(--safe-top); --header-gap: 0rem; }
 /* …and a STEP touches it, as it touches a TopBar: a full sheet's top edge on the bar's bottom edge (0.6.5 left 8px of base between
    them — timebank #137); the words keep the screen's gap as their lead (--_lead, .appbar + .step above) */
 .screen--fill > .appbar:has(+ .step) { margin-bottom: calc(-1 * var(--screen-gap)); }

package/css/tokens.css

@@ -238,6 +238,13 @@
    sheet.css sets the values; these initial values are what a sheet
    falls back to when its own declaration cannot resolve.
    ============================================================ */
+/* SAFE AREA (Lh 2026-09-28, timebank on Android: the bar's buttons lay under the gesture bar) — the room the phone's own
+   bars take over the page when the app runs edge to edge (viewport-fit=cover: Android Chrome, an iPhone home-screen app).
+   PUBLISHED: backgrounds still run to the edge; what the member reads or taps stands clear of them. 0 without cover.
+   --_safe-b-open = the bottom inset the keyboard does NOT already cover (a keyboard up hides the gesture bar). */
+:root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); }
+* { --_safe-b-open: max(0px, var(--safe-bottom) - var(--kb, 0px)); }
+
 @property --sheet-peek { syntax: "<length>"; inherits: true; initial-value: 0px; }
 @property --sheet-head-h { syntax: "<length>"; inherits: true; initial-value: 48px; } /* the sheet head's floor (sheet.css) — registered so the Sheet reads it resolved */
 @property --_lead { syntax: "<length>"; inherits: true; initial-value: 0px; } /* the room above a step's words: registered so a cqh share (a no-bar step, 15% of the SCREEN) resolves where it is declared — on the step, against the screen — not on the words, against the step */

package/dist/cardds.css

@@ -279,6 +279,13 @@
    sheet.css sets the values; these initial values are what a sheet
    falls back to when its own declaration cannot resolve.
    ============================================================ */
+/* SAFE AREA (Lh 2026-09-28, timebank on Android: the bar's buttons lay under the gesture bar) — the room the phone's own
+   bars take over the page when the app runs edge to edge (viewport-fit=cover: Android Chrome, an iPhone home-screen app).
+   PUBLISHED: backgrounds still run to the edge; what the member reads or taps stands clear of them. 0 without cover.
+   --_safe-b-open = the bottom inset the keyboard does NOT already cover (a keyboard up hides the gesture bar). */
+:root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); }
+* { --_safe-b-open: max(0px, var(--safe-bottom) - var(--kb, 0px)); }
+
 @property --sheet-peek { syntax: "<length>"; inherits: true; initial-value: 0px; }
 @property --sheet-head-h { syntax: "<length>"; inherits: true; initial-value: 48px; } /* the sheet head's floor (sheet.css) — registered so the Sheet reads it resolved */
 @property --_lead { syntax: "<length>"; inherits: true; initial-value: 0px; } /* the room above a step's words: registered so a cqh share (a no-bar step, 15% of the SCREEN) resolves where it is declared — on the step, against the screen — not on the words, against the step */
@@ -553,6 +560,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   display: flex;
   flex-direction: column;
   height: 100dvh;
+  padding-top: var(--safe-top); /* under the phone's status bar when the app runs edge to edge (Lh 2026-09-28) */
   overflow: clip;
   position: relative; /* the box a .card--centre or a .screen__centre floats in (card.css) */
   container-type: size; /* a share of the SCREEN's height (a no-bar step's lead, step.css) reads it as cqh — a real phone's height, or the gallery's frame */
@@ -1355,7 +1363,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   border-radius: var(--r-card) var(--r-card) 0 0;
   border-bottom: 0;
   box-shadow: var(--sheet-shadow, var(--shadow-sheet));
-  --_foot: calc(var(--card-gap) + var(--btn-h) + var(--card-pad)); /* the foot strip's height (below) — merged here, one bare .sheet rule */
+  --_foot: calc(var(--card-gap) + var(--btn-h) + var(--card-pad) + var(--_safe-b-open)); /* the foot strip's height (below) — merged here, one bare .sheet rule */
 }
 .sheet--full { --_y: 0%; --_cover: 0rem; }
 .sheet--half { --_y: calc(var(--sheet-half) * 100%); --_cover: calc(var(--sheet-half) * var(--_box)); }
@@ -1364,7 +1372,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* --sheet-peek is declared on the BOX the sheet slides in, not on the sheet: the words behind a peeked sheet
    have to read it too (step.css keeps that much room under them), and a token only flows down. The sheet
    inherits it. A sheet whose head is taller retunes it on the box. */
-:is(.step, .sheet-stage) { --_handle: var(--sp-1); --sheet-peek: calc(var(--card-pad-rest) + var(--_handle) + 2 * var(--card-gap-rest) + var(--sheet-head-h)); }
+:is(.step, .sheet-stage) { --_handle: var(--sp-1); --sheet-peek: calc(var(--card-pad-rest) + var(--_handle) + 2 * var(--card-gap-rest) + var(--sheet-head-h) + var(--safe-bottom)); } /* + the gesture bar: the peeked head stands above it */
 /* the head's floor: a tap, or an h2 line with its Thai-mark padding when the type is bigger than that (a large text-size
    setting on a narrow phone) — the strip and the head read the same number, so the title row is always inside the strip */
 :root { --sheet-head-h: max(var(--tap), calc(var(--fs-h2) * 1.25 + var(--sp-2))); }
@@ -1422,12 +1430,12 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    stops that far above the sheet's edge. At peek there is only the handle and the title: the foot is gone.
    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(--btn-h) + var(--sp-1) + var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)) + var(--card-pad)); }
+.sheet:has(> .card__foot--link) { --_foot: calc(var(--card-gap) + 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 > .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) var(--card-pad);
+  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));
@@ -1443,7 +1451,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .sheet > :not(.sheet__body) { flex-shrink: 0; }
 :is(.sheet--peek, .sheet--away) > .sheet__body { padding-bottom: 0; }
 .sheet__body > * { min-width: 0; } /* as .card > *: children shrink to the track, never widen it */
-.sheet__body:last-child { margin-bottom: calc(-1 * var(--card-pad)); padding-bottom: calc(var(--card-pad) + var(--_cover)); }
+.sheet__body:last-child { margin-bottom: calc(-1 * var(--card-pad)); padding-bottom: calc(var(--card-pad) + var(--_cover) + var(--_safe-b-open)); }
 
 /* grab handle — first child of the sheet. Drawn as a small bar, but it is
    the thumb's grab area for the whole strip above the title: a pseudo widens
@@ -1623,7 +1631,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   position: absolute;
   inset-inline: 0;
   bottom: 0;
-  height: var(--tap-lg);
+  height: calc(var(--tap-lg) + var(--_safe-b-open));
+  padding-bottom: var(--_safe-b-open);
+  box-sizing: border-box;
   margin: 0;
   display: grid;
   place-items: center;
@@ -1832,7 +1842,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   margin-inline: calc(-1 * var(--screen-pad)); /* edge to edge; its own padding is the inset */
   margin-bottom: calc(var(--sp-2) - var(--screen-gap));
 }
-.screen.screen--fill:has(> .appbar) { padding-top: 0; --header-gap: 0rem; }
+.screen.screen--fill:has(> .appbar) { padding-top: var(--safe-top); --header-gap: 0rem; }
 /* …and a STEP touches it, as it touches a TopBar: a full sheet's top edge on the bar's bottom edge (0.6.5 left 8px of base between
    them — timebank #137); the words keep the screen's gap as their lead (--_lead, .appbar + .step above) */
 .screen--fill > .appbar:has(+ .step) { margin-bottom: calc(-1 * var(--screen-gap)); }
@@ -2098,7 +2108,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .icon-btn--invert { background: var(--icon-btn-invert-bg, var(--accent)); color: var(--icon-btn-invert-ink, var(--on-accent)); border-color: transparent; }
 .icon-btn--sm { width: var(--icon-btn-sm-size, var(--tap-sm)); height: var(--icon-btn-sm-size, var(--tap-sm)); font-size: var(--fs-title); }
 /* fab: the square floating action, bottom-right of a stage or screen */
-.fab { width: var(--fab); height: var(--fab); border-radius: var(--r-card); position: absolute; right: var(--sp-4); bottom: calc(var(--sp-5) + var(--bar-h) + var(--sp-3)); box-shadow: var(--shadow-float); z-index: var(--z-fab); }
+.fab { width: var(--fab); height: var(--fab); border-radius: var(--r-card); position: absolute; right: var(--sp-4); bottom: calc(var(--sp-5) + var(--bar-h) + var(--sp-3) + var(--safe-bottom)); box-shadow: var(--shadow-float); z-index: var(--z-fab); }
 
 /* ---- buttons ---- */
 .btn {
@@ -2224,13 +2234,13 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    (step.css); on a scrolling screen a sticky last row (below). --bar-reserve stays published — the bar's nominal
    height — for the one rule that still needs it without measuring: a .card--centre's cap (card.css).
    --kb is the on-screen keyboard's height (cardds.js): the bar rides above it. */
-:root { --bar-reserve: calc(var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
+:root { --bar-reserve: calc(var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6) + var(--safe-bottom)); }
 .action-bar {
   position: relative;
   z-index: var(--z-bar); /* above .sheet-stack sheets, which paint at --level 1-5 */
   max-width: var(--screen-w);
   margin-inline: auto;
-  padding: var(--sp-3) var(--sp-4) var(--sp-5);
+  padding: var(--sp-3) var(--sp-4) calc(var(--sp-5) + var(--_safe-b-open)); /* its ground runs under the phone's gesture bar, its buttons stand above it */
   display: flex;
   gap: var(--sp-2);
 }
@@ -2297,12 +2307,12 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .action-bar__tier { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); }
 .action-bar__tier > .btn { flex: 1; }
 .action-bar__tier--link { justify-content: center; min-height: 0; } /* a Link under the buttons, e.g. "details" that opens a Modal — its row as tall as a small link, not a tap (Lh 2026-09-23) */
-:has(> .action-bar--tiers) { --bar-reserve: calc(var(--tap) + var(--sp-3) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
+:has(> .action-bar--tiers) { --bar-reserve: calc(var(--tap) + var(--sp-3) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6) + var(--safe-bottom)); }
 /* more rows (Lh 2026-09-23: a bar may hold several rows of controls — keeping it short is the designer's job): each row past two
    adds a tap-tall row and its gap to the reserve, so the words above never run under the bar */
-:has(> .action-bar--tiers > .action-bar__tier:nth-child(3)) { --bar-reserve: calc(2 * (var(--tap) + var(--sp-3)) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
-:has(> .action-bar--tiers > .action-bar__tier:nth-child(4)) { --bar-reserve: calc(3 * (var(--tap) + var(--sp-3)) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
-:has(> .action-bar--tiers > .action-bar__tier:nth-child(5)) { --bar-reserve: calc(4 * (var(--tap) + var(--sp-3)) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
+:has(> .action-bar--tiers > .action-bar__tier:nth-child(3)) { --bar-reserve: calc(2 * (var(--tap) + var(--sp-3)) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6) + var(--safe-bottom)); }
+:has(> .action-bar--tiers > .action-bar__tier:nth-child(4)) { --bar-reserve: calc(3 * (var(--tap) + var(--sp-3)) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6) + var(--safe-bottom)); }
+:has(> .action-bar--tiers > .action-bar__tier:nth-child(5)) { --bar-reserve: calc(4 * (var(--tap) + var(--sp-3)) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6) + var(--safe-bottom)); }
 
 /* the first round button sits at the left edge, the last at the right; a skip link between them stays centred */
 :is(.action-bar--pager, .action-bar__tier--pager) > .icon-btn:first-child { margin-right: auto; }
@@ -3717,7 +3727,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .float-bar {
   position: fixed;
   inset-inline: 0;
-  bottom: var(--sp-5);
+  bottom: calc(var(--sp-5) + var(--safe-bottom));
   max-width: var(--screen-w);
   margin-inline: auto;
   padding-inline: var(--float-bar-pad-x, var(--sp-4));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usableapp/cardds",
-  "version": "0.7.18",
+  "version": "0.7.19",
   "license": "UNLICENSED",
   "type": "module",
   "description": "card-first mobile design system, React-first: the components in src/ are thin wrappers over the CSS contract (css/*.css stays the only truth); gallery/ shows every story live (npm run dev), tests/ measures the geometry.",