@usableapp/cardds 0.1.0

package/dist/cardds.css

@@ -0,0 +1,3068 @@
+/* cardds — card-first mobile design system. One import. */
+/* ---- css/fonts.css — the two faces: PK Nonthaburi (body), FC Pride (display) ---- */
+/* ============================================================
+   cardds/fonts.css — the two faces the system ships (Lh, 2026-09-10).
+   Body: PK Nonthaburi (Pocket Fonts, demo weight — one face; the browser
+   synthesises bold for labels and titles, so the 400/700 contrast holds).
+   Display: FC Pride (Fontcraft Studio, Medium — non-commercial licence);
+   declared across every weight so headings render the real Medium, never
+   a smeared faux-bold. Both cover Thai + Latin + digits. Licences: fonts/LICENSES.md.
+   tokens.css points --font-ui and --font-display at these; a consumer who
+   vendors the CSS copies fonts/ beside it (the url()s are ../fonts/).
+   ============================================================ */
+@font-face {
+  font-family: "PK Nonthaburi";
+  src: url("../fonts/pk-nonthaburi-demo.ttf") format("truetype");
+  font-weight: 400 500;
+  font-style: normal;
+  font-display: swap;
+  /* the box the line-height centres = the ink: tone marks reach 1.02em up,
+     lower vowels 0.30em down (measured; the face declares 0.92 / 0.30 + gap) */
+  ascent-override: 102%;
+  descent-override: 30%;
+  line-gap-override: 0%;
+}
+@font-face {
+  font-family: "FC Pride";
+  src: url("../fonts/fc-pride-medium.otf") format("opentype");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+  /* the face declares 1.20 up / 0.18 down, but a stacked vowel + tone mark
+     reaches 1.10em and สระอู 0.29em — override so the line box centres the
+     ink and a clipped heading loses the same hair top and bottom, not the
+     whole lower vowel. With the leading in tokens.css this is 0.075em a side
+     at h2; the clipped containers pad that back (card.css, actions.css) */
+  ascent-override: 110%;
+  descent-override: 30%;
+  line-gap-override: 0%;
+}
+
+/* ---- css/tokens.css — structure + wireframe defaults ---- */
+/* ============================================================
+   cardds/tokens.css — structural tokens + WIREFRAME color defaults
+   Colors here are grayscale on purpose. Real color = palette.css.
+   Components reference ONLY these role tokens, never raw hex.
+
+   Every length is rem so the whole system scales with the root
+   font size (base.css steps it down on narrow phones and it follows
+   the user's text-size setting). Only borders, rules and focus
+   rings stay in px — they must stay crisp, not scale.
+   4pt grid: 1rem = 16px → --sp-1 = 4px.
+   ============================================================ */
+
+:root {
+  /* ---- layout ---- */
+  --screen-w: 25rem;      /* 400: mobile column — .screen, .action-bar, .sheet-stage */
+  --screen-centre: 40%;   /* the human centre of a screen: the middle of its top four fifths — the bottom fifth is the thumb's (Lh, 2026-09-10). .card--centre sits here */
+
+  /* ---- spacing (4pt grid) ---- */
+  --sp-0: 0.125rem;  /* 2  hairline gaps (title→meta) */
+  --sp-1: 0.25rem;   /* 4 */
+  --sp-2: 0.5rem;    /* 8 */
+  --sp-3: 0.75rem;   /* 12 */
+  --sp-4: 1rem;      /* 16 */
+  --sp-5: 1.25rem;   /* 20 */
+  --sp-6: 1.5rem;    /* 24 */
+  --sp-8: 2rem;      /* 32 */
+  --sp-10: 2.5rem;   /* 40 */
+  --sp-12: 3rem;     /* 48 */
+
+  /* ---- touch & control sizes ---- */
+  --tap: 3rem;        /* 48 primary touch target */
+  --tap-sm: 2.75rem;  /* 44 minimum touch target (Apple HIG floor) */
+  --tap-lg: 3.5rem;   /* 56 hero controls: track steps, send, field with action */
+  --btn-h: 3.25rem;   /* 52 button height */
+  --btn-xl-h: 5.5rem; /* 88 the one giant CTA */
+  --chip-h: 2.375rem; /* 38 chip height */
+  --bar-h: 4rem;      /* 64 float bar, day cell, deck actions */
+  --header-h: 3.75rem;/* 60 top bar — .topbar and .appbar alike */
+  --screen-pad: var(--sp-4); /* 16 the screen's inset — .sheet-stack cancels it */
+  --map-ring: 10rem;    /* the rough-area ring on a map (sheet.css .map__ring) — a neighbourhood, not a house */
+  --fab: 4.5rem;      /* 72 square floating action */
+  --badge: 1.625rem;  /* 26 count badge */
+  --dot: 0.625rem;    /* 10 signal dot */
+  --dot-xs: 0.375rem; /* 6  marker dot */
+
+  /* ---- icons (icons.svg sprite, Lucide) ---- */
+  --icon: 1.75rem;    /* 28 default */
+  --icon-sm: 1.75rem; /* one size everywhere; retune if small contexts appear */
+  --icon-lg: 2rem;    /* 32 empty states */
+  --icon-xs: 1rem;    /* 16 inline with captions/chips only (row meta, link arrows) */
+
+  /* ---- people & big elements ---- */
+  --avatar-sm: 2.5rem;  /* 40 row lead */
+  --avatar: 3.5rem;     /* 56 card head, person row */
+  --avatar-lg: 5rem;    /* 80 chooser row */
+  --avatar-xl: 6rem;    /* 96 sheet head icon ring */
+  --ring: 11rem;        /* 176 .ring gauge diameter */
+  --ring-w: 1.375rem;   /* 22 .ring stroke */
+  --tile-min: 7.5rem;   /* 120 .tile-grid column floor */
+  --tile-h: 8.25rem;    /* 132 tile / band height */
+
+  /* ---- radius ---- */
+  --r-chip: 999px;        /* pills, chips, buttons — always fully round */
+  --r-card: 2rem;         /* 32 the one card radius: every card, row, tile, menu, sheet, fab */
+  --r-media: 1rem;        /* 16 images inside cards */
+  --r-control: 0.875rem;  /* 14 fields, thumbs, menu rows */
+  --r-badge: 0.625rem;    /* 10 tile badge, bars */
+
+  /* ---- borders / rules / elevation (px on purpose: crisp at any scale) ---- */
+  --border-w: 1.5px;
+  --rule-w: 2px;                                   /* dotted connectors, picker rules */
+  --focus: 2px solid currentColor;                 /* :focus-visible ring */
+  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.06), 0 0.5rem 1.5rem rgb(0 0 0 / 0.08);
+  --shadow-float: 0 0.25rem 0.75rem rgb(0 0 0 / 0.14);
+  --shadow-sheet: 0 -0.5rem 2rem rgb(0 0 0 / 0.16); /* sheets, lifted cards */
+
+  /* ---- motion ---- */
+  --motion-sheet: 0.35s;
+  --motion-slide: 0.22s; /* a centred card sliding out and the next in (card.css) — quick, a page turn (Lh, 2026-09-12) */
+  --motion-flip: 0.45s;  /* a postcard turning over (media.css) — slow enough to read as a card in the hand */
+
+  /* ---- typography: one scale, rem so it follows the root ---- */
+  --font-ui: "PK Nonthaburi", -apple-system, system-ui, sans-serif; /* fonts.css ships it; the rest is the fallback while it loads */
+  --font-display: "FC Pride", var(--font-ui); /* the character face for headings and big numbers (fonts.css) */
+  --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, monospace;
+
+  --fs-xs: 0.6875rem;      /* 11 overline */
+  --fs-caption: 0.75rem;   /* 12 */
+  --fs-label: 0.8125rem;   /* 13 */
+  --fs-sm: 0.875rem;       /* 14 chips, segments */
+  --fs-body: 0.9375rem;    /* 15 */
+  --fs-md: 1rem;           /* 16 buttons */
+  --fs-title: 1.0625rem;   /* 17 */
+  --fs-lg: 1.25rem;        /* 20 day numbers, tile values */
+  --fs-h2: 1.375rem;       /* 22 */
+  --fs-2xl: 1.5rem;        /* 24 composer, small ring */
+  --fs-h1: 1.75rem;        /* 28 */
+  --fs-3xl: 2rem;          /* 32 xl button */
+  --fs-display: clamp(2.125rem, 9vw, 2.625rem); /* 34–42 */
+  --fs-stat: clamp(1.875rem, 8vw, 2.375rem);    /* 30–38 big numbers */
+  --fs-hero: 3.5rem;                            /* 56 the one number on a sheet */
+  --fs-giant: clamp(3rem, 15vw, 4rem);          /* 48–64 data bands */
+
+  /* level      weight size / line-height family */
+  --type-display: 800 var(--fs-display) / 1.15 var(--font-display); /* leading: Thai marks stack to 1.1em up and 0.3em down in FC Pride — 1.02 clipped them (2026-09-10) */
+  --track-display: -0.02em;
+  --type-h1:      900 var(--fs-h1) / 1.2 var(--font-display);
+  --track-h1: -0.015em;
+  --type-h2:      700 var(--fs-h2) / 1.25 var(--font-display);
+  --track-h2: -0.01em;
+  --type-title:   650 var(--fs-title) / 1.3 var(--font-ui);
+  --type-body:    400 var(--fs-body) / 1.5 var(--font-ui);
+  --type-label:   600 var(--fs-label) / 1.2 var(--font-ui);   /* chips, buttons */
+  --type-caption: 500 var(--fs-caption) / 1.35 var(--font-ui);
+  --type-overline:700 var(--fs-xs) / 1.2 var(--font-mono);     /* uppercase micro-labels */
+  --track-overline: 0.08em;
+  --type-stat:    800 var(--fs-stat) / 1.05 var(--font-display); /* big numbers */
+
+  /* ============================================================
+     COLOR ROLES — wireframe defaults (grayscale).
+     palette.css overrides these under [data-palette="…"].
+     ============================================================ */
+
+  /* app background ("earth-toned surface or shiny color, up to the app") */
+  --surface: #f2f2f0;
+  --on-surface: #141414;
+  --on-surface-muted: #6b6b6b;
+
+  /* card boundaries — 3 slots so stacked/adjacent cards can differ */
+  --card-1-bg: #ffffff;  --card-1-ink: #141414;
+  --card-2-bg: #e6e6e3;  --card-2-ink: #141414;
+  --card-3-bg: #141414;  --card-3-ink: #ffffff;
+
+  --card-border: #141414;      /* wireframe: visible outline; palettes may set transparent */
+  --card-muted: #6b6b6b;       /* secondary text inside cards (the default, tone-1 card) */
+  --card-2-muted: #5f5f5f;     /* the same text on the tone-2 card — 5.1:1 on its grey (#6b6b6b is 4.3:1, under AA);
+                                  a palette whose tone-2 ground is strong
+                                  sets this to its tone-2 ink — a muted shade cannot reach AA there (clay) */
+
+  /* actions */
+  --accent: #141414;           /* primary CTA fill */
+  --on-accent: #ffffff;
+  --action-bg: #ffffff;        /* neutral buttons/chips/inputs */
+  --action-ink: #141414;
+  --action-border: #141414;
+
+  /* signals (chip dots, deltas) */
+  --pos: #8a8a8a;
+  --neg: #3d3d3d;
+  --dot-a: #141414;
+  --dot-b: #8a8a8a;
+
+  /* derived tints — read the element's own ink, so they work on any slot */
+  --outline: var(--action-border);                                 /* control edges (palette.css softens) */
+  --hairline: color-mix(in srgb, currentColor 18%, transparent);   /* dividers inside cards */
+  --ink-tint: color-mix(in srgb, currentColor 12%, transparent);   /* hover, rails, rests */
+  --ink-rail: color-mix(in srgb, currentColor 30%, transparent);   /* todo steps, ghost edges */
+  --accent-soft: color-mix(in srgb, var(--accent) 22%, transparent); /* calendar marks */
+  --accent-mid: color-mix(in srgb, var(--accent) 50%, transparent);
+  --scrim: color-mix(in srgb, var(--card-3-bg) 50%, transparent);  /* dim stage, cover gradient */
+}
+
+/* ============================================================
+   REGISTERED TOKENS — the two sheet lengths are typed, so that
+   cardds.js can read them back RESOLVED: getComputedStyle returns a
+   registered <length> in px and a <number> as a number, where an
+   unregistered custom property only ever reads back as its text
+   ("calc(1.25rem + …)"). Drag-to-snap needs to know where the states
+   are; nothing else in the system reads a token from JS.
+   --sheet-half is a share of the sheet's own height (0.5 = half), a
+   number rather than a percentage so one token can serve both the
+   sheet's translate (× 100%) and its body's scroll-padding (× 100cqh).
+   sheet.css sets the values; these initial values are what a sheet
+   falls back to when its own declaration cannot resolve.
+   ============================================================ */
+@property --sheet-peek { syntax: "<length>"; inherits: true; initial-value: 0px; }
+@property --sheet-half { syntax: "<number>"; inherits: true; initial-value: 0.5; }
+
+/* ---- css/palette.css — color settings — the file you tune ---- */
+/* ============================================================
+   cardds/palette.css — COLOR SETTINGS. The only file you tune.
+   Apply with <html data-palette="clay"> (or <body>).
+   No attribute = wireframe grayscale from tokens.css.
+   Each palette overrides role tokens only — components never change.
+   ============================================================ */
+
+/* ---- CLAY — earth-toned: cream surface, terracotta / mustard / ink cards ---- */
+[data-palette="clay"] {
+  --surface: #ece5d8;
+  --on-surface: #191713;
+  --on-surface-muted: #6f675a;
+
+  --card-1-bg: #e8b647;  --card-1-ink: #191713;  /* mustard hero */
+  --card-2-bg: #e05c3a;  --card-2-ink: #191713;  /* terracotta */
+  --card-3-bg: #1c1a17;  --card-3-ink: #f4efe4;  /* ink */
+
+  --card-border: transparent;
+  --card-muted: #45412f;       /* 5.5:1 on the mustard card — AA for captions and metas (#55503f was 4.3:1) */
+  --card-2-muted: var(--card-2-ink); /* terracotta holds 5:1 for its ink alone; nothing lighter passes AA, so tone 2 has no muted */
+
+  --accent: #1c1a17;     --on-accent: #f4efe4;
+  --action-bg: #f7f3e9;  --action-ink: #191713;  --action-border: transparent;
+
+  --pos: #3e7d4f;  --neg: #c23c1d;
+  --dot-a: #e05c3a;  --dot-b: #6f6be0;
+}
+
+/* ---- SHINE — shiny: periwinkle surface, coral / black / gold cards ---- */
+[data-palette="shine"] {
+  --surface: #6d6ae4;
+  --on-surface: #ffffff;
+  --on-surface-muted: #d3d2f7;
+
+  --card-1-bg: #eec85a;  --card-1-ink: #16161a;
+  --card-2-bg: #e8624a;  --card-2-ink: #16161a;
+  --card-3-bg: #1b1b1f;  --card-3-ink: #ffffff;
+
+  --card-border: transparent;
+  --card-muted: #4c4a44;
+
+  --accent: #1b1b1f;     --on-accent: #ffffff;
+  --action-bg: #ffffff;  --action-ink: #16161a;  --action-border: transparent;
+
+  --pos: #2e9e5b;  --neg: #d6402a;
+  --dot-a: #e8624a;  --dot-b: #6d6ae4;
+}
+
+/* ---- FIELD — warm peach editorial: cream surface, orange accent ---- */
+[data-palette="field"] {
+  --surface: #f9e8dc;
+  --on-surface: #241f1b;
+  --on-surface-muted: #8a7d72;
+
+  --card-1-bg: #ffffff;  --card-1-ink: #241f1b;
+  --card-2-bg: #f6d9c5;  --card-2-ink: #241f1b;
+  --card-3-bg: #ef4e0b;  --card-3-ink: #fff4ec;
+
+  --card-border: transparent;
+  --card-muted: #8a7d72;
+
+  --accent: #ef4e0b;     --on-accent: #fff4ec;
+  --action-bg: #ffffff;  --action-ink: #241f1b;  --action-border: transparent;
+
+  --pos: #2e8f52;  --neg: #d13b1a;
+  --dot-a: #ef4e0b;  --dot-b: #241f1b;
+}
+
+/* ---- ROAST — coffee: warm cream surface, caramel accent ---- */
+[data-palette="roast"] {
+  --surface: #f6f1e7;
+  --on-surface: #2b211a;
+  --on-surface-muted: #8c7f70;
+
+  --card-1-bg: #ffffff;  --card-1-ink: #2b211a;
+  --card-2-bg: #e9dcc6;  --card-2-ink: #2b211a;
+  --card-3-bg: #b97e3c;  --card-3-ink: #fdf9f1;
+
+  --card-border: transparent;
+  --card-muted: #8c7f70;
+
+  --accent: #b97e3c;     --on-accent: #fdf9f1;
+  --action-bg: #ffffff;  --action-ink: #2b211a;  --action-border: transparent;
+
+  --pos: #3e7d4f;  --neg: #bf4028;
+  --dot-a: #b97e3c;  --dot-b: #2b211a;
+}
+
+/* ---- HYDRO — cool shiny blue: airy surface, saturated blue CTA ---- */
+[data-palette="hydro"] {
+  --surface: #e9f0fb;
+  --on-surface: #17203a;
+  --on-surface-muted: #64729a;
+
+  --card-1-bg: #ffffff;  --card-1-ink: #17203a;
+  --card-2-bg: #cddcf7;  --card-2-ink: #17203a;
+  --card-3-bg: #3d63e0;  --card-3-ink: #f2f6ff;
+
+  --card-border: transparent;
+  --card-muted: #64729a;
+
+  --accent: #3d63e0;     --on-accent: #f2f6ff;
+  --action-bg: #ffffff;  --action-ink: #17203a;  --action-border: transparent;
+
+  --pos: #2e8f52;  --neg: #d13b1a;
+  --dot-a: #3d63e0;  --dot-b: #eec85a;
+}
+
+/* Colored palettes trade wireframe outlines for soft elevation. */
+[data-palette] :is(.card, .band-stack) { box-shadow: var(--shadow-card); }
+/* …but controls keep a faint edge so they still read as controls */
+[data-palette] { --outline: color-mix(in srgb, currentColor 25%, transparent); }
+
+/* ---- css/base.css — reset, surface, type levels, section ---- */
+/* ============================================================
+   cardds/base.css — reset, surface, typography levels, section
+   ============================================================ */
+
+*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
+
+/* the scale: everything is rem, so this one number resizes the whole system.
+   100% = the user's text size (16px by default); narrow phones step to 15/16 so
+   the 25rem column and its 48px taps keep their proportions on 320–360 screens.
+   --text-scale is an app's OWN text-size setting — a unitless number the app
+   writes on <html> (1 = as the browser has it; 1.1875 = larger). It multiplies
+   in here so it composes with the narrow-phone step instead of overwriting the
+   root, and so the app never writes a length from script. */
+html { font-size: calc(100% * var(--text-scale, 1)); scrollbar-width: none; }
+@media (max-width: 22.5em) { html { font-size: calc(93.75% * var(--text-scale, 1)); } }
+html::-webkit-scrollbar { display: none; } /* Chromium/Safari */
+
+body {
+  margin: 0;
+  background: var(--surface);
+  color: var(--on-surface);
+  font: var(--type-body);
+  -webkit-font-smoothing: antialiased;
+}
+
+/* components here set display (grid/flex), which outranks the UA's
+   [hidden] { display: none } — so the attribute silently does nothing on a
+   .btn, .icon-btn, .chip or .row. Restore it once, for all of them. */
+[hidden] { display: none !important; }
+
+img, svg { display: block; max-width: 100%; }
+button { font: inherit; cursor: pointer; }
+
+/* icon from icons.svg sprite: <svg class="icon"><use href="icons.svg#bell"/></svg> */
+.icon { width: var(--icon); height: var(--icon); flex: none; }
+.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
+.icon--xs { width: var(--icon-xs); height: var(--icon-xs); } /* inside captions, chips, links */
+.icon--lg { width: var(--icon-lg); height: var(--icon-lg); } /* empty states */
+
+/* mobile screen column — the standard horizontal inset, and nothing vertical.
+   Top and bottom are zero on purpose: vertical room is only ever a RESERVE for
+   something fixed parked over the screen, so each bar adds its own and a page
+   without bars needs no override. .appbar reserves the top (actions.css),
+   .action-bar (actions.css) and .float-bar (layover.css) the bottom. */
+.screen {
+  --screen-gap: var(--sp-5); /* published: a .step cancels it to touch the bar it follows (step.css) */
+  max-width: var(--screen-w);
+  margin-inline: auto;
+  padding-inline: var(--screen-pad);
+  display: grid;
+  gap: var(--screen-gap);
+}
+.screen > * { min-width: 0; } /* content never widens the column past the viewport */
+/* a screen that carries its own palette (data-palette on the element, not on <html>)
+   paints its own surface, so a design tool can show one screen per palette */
+.screen[data-palette] { background: var(--surface); color: var(--on-surface); }
+
+/* app screen: exactly one phone height — a height, not a minimum, so that a
+   .step (step.css) has a bound to fill and its card and sheet scroll INSIDE
+   it instead of growing the page; and clip, not hidden, because a clipped
+   box is not a scroll container: nothing — not even the browser revealing a
+   focused field — can shift the screen up. A trailing .sheet-stack (stack.css) stretches
+   and bleeds off the bottom edge. */
+.screen--fill {
+  display: flex;
+  flex-direction: column;
+  height: 100dvh;
+  overflow: clip;
+  position: relative; /* the box a .card--centre or a .screen__centre floats in (card.css) */
+}
+/* min-height: 0 — a flex item's floor is its content, and the stack's content
+   is its own full-height sheets, so without it the stack grew to the whole
+   screen and its open sheet ran past the bottom edge by the bars' height,
+   unreachable by scrolling (timebank home, 2026-09-13). The stack IS the room
+   left under the bars; every sheet fills exactly that. */
+.screen--fill > .sheet-stack { flex: 1; min-height: 0; }
+
+/* ---- typography levels ---- */
+/* --fs-self: each level publishes its own size, so a consumer that scales a
+   heading (card.css --squeeze) can multiply it without knowing the level */
+.t-display  { font: var(--type-display); letter-spacing: var(--track-display); margin: 0; text-wrap: balance; --fs-self: var(--fs-display); }
+.t-h1       { font: var(--type-h1); letter-spacing: var(--track-h1); margin: 0; --fs-self: var(--fs-h1); }
+.t-h2       { font: var(--type-h2); letter-spacing: var(--track-h2); margin: 0; --fs-self: var(--fs-h2); }
+.t-title    { font: var(--type-title); margin: 0; --fs-self: var(--fs-title); }
+.t-body     { font: var(--type-body); margin: 0; }
+.t-label    { font: var(--type-label); }
+.t-caption  { font: var(--type-caption); }
+.t-overline { font: var(--type-overline); letter-spacing: var(--track-overline); text-transform: uppercase; }
+.t-stat     { font: var(--type-stat); letter-spacing: var(--track-display); margin: 0; font-variant-numeric: tabular-nums; }
+.t-stat--mono { font-family: var(--font-mono); letter-spacing: 0; } /* clocks, ETAs, codes */
+.t-stat--xl   { font-size: var(--fs-hero); } /* the one number on a sheet */
+
+.t-muted { color: var(--on-surface-muted); }
+.card .t-muted { color: var(--card-muted); } /* muted follows the card's ink, not the surface's */
+.card--3 .t-muted { color: inherit; opacity: 0.7; } /* card-muted is tuned for light cards; dim instead on the dark slot */
+.t-caps  { text-transform: uppercase; }
+.grow    { flex: 1; min-width: 0; } /* the child that takes the remaining row space */
+
+/* ---- section: frameless on-surface content + CTA (never a card) ---- */
+.section {
+  display: grid;
+  gap: var(--sp-3);
+  padding-block: var(--sp-4);
+}
+.section > .t-body { color: var(--on-surface-muted); max-width: 34ch; }
+.section .cta-pack {
+  display: flex;
+  gap: var(--sp-2);
+  margin-top: var(--sp-2);
+  flex-wrap: wrap;
+}
+
+/* ---- empty state: on-surface, centered, optional CTA below ---- */
+.empty-state {
+  display: grid;
+  justify-items: center;
+  text-align: center;
+  gap: var(--sp-2);
+  padding: var(--sp-12) var(--sp-6);
+  color: var(--on-surface-muted);
+}
+.empty-state > :is(h1, h2, h3) { color: var(--on-surface); } /* the heading in full ink, the words muted */
+.empty-state__action { margin-top: var(--sp-2); }
+/* inside a card (a section's "nothing yet"): the card's ink, the way .t-muted and .row__meta follow it */
+.card .empty-state { color: var(--card-muted); padding-block: var(--sp-6); }
+.card .empty-state > :is(h1, h2, h3) { color: var(--card-ink); }
+.card--3 .empty-state { color: inherit; }
+.card--3 .empty-state > :not(:is(h1, h2, h3)) { opacity: 0.7; }
+
+/* ---- css/card.css — card boundary + list variants ---- */
+/* ============================================================
+   cardds/card.css — the card boundary + list variants
+   One card = one boundary. Tone via .card--1/2/3 (role slots).
+   ============================================================ */
+
+.card {
+  --card-bg: var(--card-1-bg);   /* the slot, readable by children (avatar rings, fold) */
+  --card-ink: var(--card-1-ink);
+  --card-pad: var(--sp-5);       /* published so .bleed can cancel it exactly */
+  --card-gap: var(--sp-4);       /* published so a sheet's peek strip (sheet.css) is exact */
+  background: var(--card-bg);
+  color: var(--card-ink);
+  border: var(--border-w) solid var(--card-border);
+  border-radius: var(--r-card);
+  padding: var(--card-pad);
+  display: grid;
+  gap: var(--card-gap);
+  position: relative;
+  min-width: 0;
+  text-decoration: none; /* .card works as <a> too */
+}
+/* the card is a grid: a child with a wide min-content (inputs, fixed-width
+   rows) would otherwise widen the track past the card's padding on narrow
+   screens. Children shrink to the track; they never size the card. */
+.card > * { min-width: 0; }
+
+.card--2 { --card-bg: var(--card-2-bg); --card-ink: var(--card-2-ink); --card-muted: var(--card-2-muted); }
+.card--3 { --card-bg: var(--card-3-bg); --card-ink: var(--card-3-ink); }
+
+/* dark/accent slot: accent-toned controls would vanish — the slot re-points
+   the accent tokens, so every accent consumer (btn--primary, chip--on,
+   check, toggle, ring, day…) inverts without per-component rules */
+.card--3 { --accent: var(--card-3-ink); --on-accent: var(--card-3-bg); }
+
+/* header row: title left, floating action right — centered, since the
+   trailing control (chip/badge/icon-btn/link) is almost always taller than
+   a single line of title text; top-aligning them left the control visually
+   low against the title's optical center. A head with a genuinely tall,
+   multi-line title can opt back out with .card__head--top. */
+.card__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sp-3);
+}
+.card__head--top { align-items: flex-start; }
+
+.card__media { border-radius: var(--r-media); overflow: hidden; position: relative; } /* relative: corner badges */
+.card__end { text-align: right; display: grid; gap: var(--sp-0); justify-items: end; } /* trailing value + caption */
+.card__media > img { width: 100%; height: auto; object-fit: cover; }
+
+/* ---- the card skeleton: head · content · foot ----
+   Every card is a head (the heading left, hints / actions / a more-menu at
+   the far right), its content, and an optional foot of action buttons.
+   The head's leading child — the heading, or the div that wraps heading and
+   caption — takes the room, so a heading with nothing at the far right runs
+   all the way across; whatever trails it hugs its own width. Only the
+   heading (or the div that wraps it) is that leading child: a control that
+   leads a custom head — a chip, an avatar, a tile badge — keeps its own
+   width, else the rule stretched a chip into a bar and an avatar into an
+   ellipse (two agents and the wallet demo caught it, 2026-09-10). */
+.card__head > :is(h1, h2, h3, div, p):first-child { flex: 1; min-width: 0; }
+
+/* Skeleton head — the heading in a card's OWN head, and only there.
+   Two lines are the budget: cardds.js measures and steps --squeeze down so the
+   type shrinks to fit; the clamp holds a heading that still overflows to three
+   lines, never more. The level's own size comes through --fs-self (base.css),
+   so the multiplier is level-agnostic and a heading without --squeeze renders
+   exactly as before.
+   A STACK head is not a skeleton head — it is a one-line peek at its own size,
+   and "stack headers" below opts it out of the budget, the squeeze and the
+   clamp. cardds.js skips those same cards, so CSS and JS agree on what counts
+   as a skeleton head. Change one, change the other. */
+.card__head :is(h1, h2, h3) {
+  font-size: calc(var(--fs-self, var(--fs-h2)) * var(--squeeze, 1));
+  overflow-wrap: anywhere;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+  /* the clip would take the hair the tight leading leaves outside the line
+     box — a stacked tone mark on top, สระอู below (fonts.css). Padding is
+     inside the clip, the negative margin gives the room back, so the head
+     measures exactly as before. */
+  padding-block: 0.15em;
+  margin-block: -0.15em;
+}
+
+/* ---- bleed: a scrolling track that runs to the container's edges ----
+   For a horizontal strip inside a padded container — .avatar-pick, .chip-row,
+   a tile grid: the TRACK reaches the edges so it reads as scrollable, while
+   the first and last item stay on the same line as everything else.
+   Reads --card-pad, so it is exact by construction and follows any container
+   that publishes one (.card today, a sheet or a screen the same way).
+   <div class="avatar-pick bleed">…</div>
+   Padding, not item margins: padding is inside the scrollable area, so the
+   last item scrolls fully clear of the edge instead of stopping against it.
+   scroll-padding keeps snap points on the content line, not the border edge. */
+.bleed {
+  margin-inline: calc(-1 * var(--card-pad, 0px));
+  padding-inline: var(--card-pad, 0px);
+  scroll-padding-inline: var(--card-pad, 0px);
+}
+/* a bleeding child sits over the container's rounded corner, so a strip that
+   is genuinely first or last needs the corner clipped for it */
+.card:has(> .bleed:first-child), .card:has(> .bleed:last-child) { overflow: clip; }
+
+/* foot: the card's action buttons on one line. One button takes the width,
+   up to four share it in even parts — so the gaps read even too — and from
+   three on they drop their side padding so the labels keep the room. */
+.card__foot { display: flex; gap: var(--sp-2); align-items: center; }
+.card__foot > .btn { flex: 1 1 0; min-width: 0; }
+.card__foot:has(> :nth-child(3)) > .btn { padding-inline: var(--sp-2); }
+
+/* media placeholder for wireframes — currentColor so it survives any palette */
+.ph {
+  background:
+    linear-gradient(to top right, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)),
+    linear-gradient(to top left,  transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
+  border: var(--border-w) solid currentColor;
+  border-radius: var(--r-media);
+  opacity: 0.4;
+  min-height: 10rem;
+}
+.ph--sm { min-height: 7.5rem; }
+.ph--md { min-height: 9rem; }
+/* ---- centred card: one thing to read, at the human centre of a fill screen ----
+   (.screen__centre below is the same placement for a small GROUP of things)
+   Where the centre of a phone IS, to the person holding it: the bottom fifth is
+   the thumb's — the bar, the controls — so what is meant to be read sits at the
+   middle of the four fifths above it, --screen-centre (40%) down the screen, not
+   at 50%. (Lh, 2026-09-10.) Any screen with one
+   card and nothing else to read may.
+   <div class="screen screen--fill"><header class="topbar">…</header><article class="card card--centre">…</article></div>
+   <div class="action-bar">…</div>
+   The card hugs its words and keeps the screen's inset. It is capped so that it
+   never reaches the title bar above it nor the bar's room below it — past that it
+   scrolls inside — from the same tokens those bars reserve their room with. */
+.card--centre,
+.screen--fill > .screen__centre {
+  position: absolute;
+  top: var(--screen-centre);
+  translate: 0 -50%;
+  /* the cap: twice the room above the centre (the title bar's height, when
+     one is there, and the screen's gap), or twice the room below it (the
+     bar's reserve) — whichever is less. --_lead is the title bar's height
+     only on a screen that HAS one: without a .topbar/.appbar before it the
+     block keeps that room (a deck and its two buttons, a card and its pager
+     under it, need it on a short phone; Lh, 2026-09-11). */
+  --_lead: 0rem;
+  max-height: calc(2 * min(var(--screen-centre) - var(--_lead) - var(--screen-gap), 100% - var(--screen-centre) - var(--bar-reserve)));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+:is(.topbar, .appbar) ~ :is(.card--centre, .screen__centre) { --_lead: var(--header-h); }
+.card--centre { inset-inline: var(--screen-pad); }
+
+/* ---- centred block: the same place, for one thing to read that is not a
+   lone card — an empty state, a card with its quiet second button and the
+   pager under it, a deck with its two round buttons. The block runs edge to
+   edge and keeps the screen's inset as padding, so a deck's fanned cards can
+   overhang and clip at the screen's edges (correct — the fold visual), and
+   its children stack at the screen's own rhythm (Lh, 2026-09-11):
+   <div class="screen screen--fill"><header class="topbar">…</header>
+     <div class="screen__centre"><article class="card">…</article><button class="btn btn--quiet btn--block">…</button></div>
+   </div> */
+.screen__centre {
+  inset-inline: 0;
+  padding-inline: var(--screen-pad);
+  display: grid;
+  gap: var(--screen-gap);
+  align-content: start;
+}
+.screen__centre > * { min-width: 0; }
+
+/* ---- the same group on a plain .screen: centred when short, as long as it
+   likes when not (Lh, 2026-09-12) ----
+   The member sees one content area — whatever is between the top bar and the
+   bar — and reads it as a whole page: a short card sits at its middle, a long
+   one simply makes the page longer, runs under the bar (the bar's reserve is
+   already the screen's bottom padding, actions.css) and scrolls up like any
+   page — nothing is capped, nothing shrinks, no scroll box inside a box.
+   So on a .screen that is NOT --fill the group is in flow: the column is at
+   least one phone tall, the group takes the room after the top bar and
+   centres its children in it. The screen's own inset stays the inset.
+   <div class="screen"><header class="topbar">…</header>
+     <div class="screen__centre"><article class="card">…</article><div class="pager__at">…</div></div>
+   </div><div class="action-bar">…</div> */
+.screen:not(.screen--fill):has(> .screen__centre) { min-height: 100dvh; display: flex; flex-direction: column; }
+.screen:not(.screen--fill) > .screen__centre { flex: 1; padding-inline: 0; align-content: center; }
+
+/* ---- the card that changes slides: out one side, the next in from the other ----
+   A .screen__centre group that walks pages (data-slide="next" | "back" on the
+   root while a step changes) turns its card like a page: the old card slides
+   out, the new one slides in from the side the move came from — quick, the
+   heading and the dots stay still (Lh, 2026-09-12). Built on view transitions:
+   the React adapter's slideTo() sets data-slide on :root, starts the transition
+   and updates inside it; a browser without them (the floor: Chrome 105 / iOS 16)
+   simply switches. Only the card is named; the rest of the page must not
+   cross-fade. */
+.screen__centre > .card, .pages > .card[aria-current] { view-transition-name: centre-card; }
+
+/* ---- pages: the cards of a walk, all one height ----
+   A sequence the member walks (an introduction) reads steadier when every card
+   is the same height (Lh, 2026-09-12): so all its cards are on the page at
+   once, stacked in one grid cell, and the cell is as tall as the tallest — at
+   any text size. The current card carries aria-current="step"; every other
+   one is inert (out of the tab order and the accessibility tree) and hidden
+   in place, keeping its height. A page turn is the same slideTo() as a lone card.
+   <div class="screen__centre"><div class="pages">
+     <article class="card" aria-current="step">…</article>
+     <article class="card" inert>…</article>
+   </div><div class="pager__at">…</div></div> */
+.pages { display: grid; }
+.pages > .card { grid-area: 1 / 1; align-content: start; } /* stretched to the cell, the words stay at the top */
+.pages > .card[inert] { visibility: hidden; }
+::view-transition-old(root), ::view-transition-new(root) { animation: none; }
+::view-transition-old(centre-card), ::view-transition-new(centre-card) {
+  animation-duration: var(--motion-slide);
+  animation-timing-function: ease-out;
+  mix-blend-mode: normal;
+}
+:root[data-slide="next"]::view-transition-old(centre-card) { animation-name: centre-card-out-left; }
+:root[data-slide="next"]::view-transition-new(centre-card) { animation-name: centre-card-in-right; }
+:root[data-slide="back"]::view-transition-old(centre-card) { animation-name: centre-card-out-right; }
+:root[data-slide="back"]::view-transition-new(centre-card) { animation-name: centre-card-in-left; }
+@keyframes centre-card-out-left  { to   { translate: -100% 0; opacity: 0; } }
+@keyframes centre-card-out-right { to   { translate:  100% 0; opacity: 0; } }
+@keyframes centre-card-in-right  { from { translate:  100% 0; opacity: 0; } }
+@keyframes centre-card-in-left   { from { translate: -100% 0; opacity: 0; } }
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-old(centre-card), ::view-transition-new(centre-card) { animation: none; }
+}
+/* the page dots under the card sit centred under it — the indicator belongs
+   with the page that changes, never in the bar (Lh, 2026-09-12) */
+.screen__centre > .pager__at { justify-self: center; }
+
+/* compact card inside a card (nested note, promo) */
+.card--sm { padding: var(--sp-4); --card-gap: var(--sp-2); border-radius: var(--r-card); }
+
+/* the sheet stack (.sheet-stack) — sheets stacked, heads peeking — lives in
+   stack.css; a stacked sheet is a plain .card, the material */
+
+/* trailing icon cluster in a card header */
+.icon-row { display: flex; align-items: center; gap: var(--sp-4); opacity: 0.85; }
+
+/* ---- card list: rows, each row its own boundary ---- */
+.card-list { display: grid; gap: var(--sp-3); }
+
+.card--row {
+  border-radius: var(--r-card);
+  padding: var(--sp-4);
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+}
+.card--row .card__body { flex: 1; display: grid; gap: var(--sp-0); }
+
+/* leading thumb/icon in a row */
+.card__thumb {
+  width: var(--tap-sm); height: var(--tap-sm);
+  flex: none;
+  border-radius: var(--r-control);
+  border: var(--border-w) solid currentColor;
+  display: grid;
+  place-items: center;
+  font: var(--type-label);
+  opacity: 0.85;
+}
+
+/* ---- inline stat block (revenue-style) ---- */
+.stat { display: grid; gap: var(--sp-1); }
+.stat__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
+
+.delta {
+  font: var(--type-caption);
+  font-weight: 700;
+  padding: var(--sp-1) var(--sp-2);
+  border-radius: var(--r-chip);
+  background: var(--card-3-bg);
+  color: var(--card-3-ink);
+}
+.delta--neg { background: var(--neg); color: var(--card-3-ink); } /* light ink on the signal color in every slot */
+
+/* ---- css/stack.css — sheet stack: .sheet-stack — the menu, sheets stacked, heads peek, tap opens ---- */
+/* ============================================================
+   cardds/stack.css — .sheet-stack: the menu.
+   Sheets stacked in one column like paper, every one a main section
+   of the app, their heads peeking, the front one open. Tap a peeked
+   head and that sheet comes to the front; its back button returns it.
+
+   cardds has two sheet systems and one material:
+   - sheet single (sheet.css): ONE sheet the member acts in — a short
+     entry in front of a .step's card, or an overlay in a .sheet-stage.
+     Its state is how far it slid: peek / half / full.
+   - sheet stack (this file): MANY sheets, each a section, stacked at
+     the middle of the home screen. A peek is the strip the next sheet
+     does not cover; open is one sheet brought to the front.
+   A stacked sheet is written as a .card — the material — directly
+   inside .sheet-stack; .sheet stays the single sheet's class. This
+   component was first named "card stack": wrong, and retired — the
+   members are sheets and the stack is the menu, not a list of cards.
+
+   <div class="sheet-stack sheet-stack--tap">   (drop --tap for a static stack)
+     <article class="card card--2">
+       <div class="card__head">
+         <button class="icon-btn icon-btn--sm card__back" aria-label="Back">…</button>
+         <h2 class="t-h2 t-caps">Shopping</h2>
+         <span class="icon-row">…</span>              (optional trailing icons)
+       </div>
+       …the sheet's own content…
+     </article>
+     <article class="card">…</article>               (last = the front sheet)
+     <div class="sheet-stack__base">…</div>           (--closed only, optional: what the base shows above the peeks)
+   </div>
+   --closed (with --tap): nothing open on arrival — every sheet peeks at the
+   bottom, the headroom above is the base's (block below).
+   Direct children only, five at most (slots are :nth-child below):
+   first = the back of the stack, last = the front. README "Sheet stack
+   markup". cardds.js opens and closes a --tap stack; without it the
+   stack still renders, it just won't open.
+   ============================================================ */
+
+/* ---- the stack: cascading peek sheets; heads peek, the set bleeds to
+       the screen's bottom edge, so bottom corners are square ---- */
+/* step = card padding (20) + head (48) + 20 breathing below the title,
+   so every peeked strip shows the title with even space above and below */
+/* one track, exactly the stack's own height: an auto track would size itself
+   to the tallest sheet's CONTENT (a sheet's `height: 100%` is cyclic while the
+   track is being sized), so a long sheet grew the track past the screen and
+   every sheet's 100% then resolved against that — the bottom of every open
+   sheet sat below the screen, unreachable (timebank home, 2026-09-13). */
+.sheet-stack { display: grid; grid-template-rows: minmax(0, 1fr); --stack-step: 5.5rem; }
+
+/* the stack breaks out of the screen inset, edge to edge, always: the peek
+   strips and the opened sheet span the screen's full width whatever the
+   viewport (it used to bleed only under a 27em media query — a stack in a
+   phone frame on a desktop kept the inset, and read as a narrower card;
+   Lh, 2026-09-11) */
+.sheet-stack { margin-inline: calc(-1 * var(--screen-pad)); }
+.sheet-stack > .card {
+  grid-area: 1 / 1; /* every card shares the stack's cell; later ones offset down */
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom: 0;
+  align-content: start;
+  align-self: start; /* own natural height (padding + head) by default */
+  --card-gap: var(--sp-5); /* head→content gap = the strip's 20px rhythm */
+  z-index: var(--level, 1); /* explicit paint order, 1 = back of the stack */
+}
+/* THE FRONT SHEET is the last .card, not the last child: a --closed stack
+   may carry a .sheet-stack__base after its sheets (below). Written once here
+   as "a card no card follows" so every rule about the front sheet agrees. */
+.sheet-stack > .card:not(:has(~ .card)) {
+  align-self: stretch; /* the front card fills the remaining stack height */
+}
+/* --_n: how many sheets the stack holds, read from the DOM by :has so the
+   closed geometry needs no script and no per-stack declaration */
+.sheet-stack { --_n: 1; }
+.sheet-stack:has(> .card:nth-child(2)) { --_n: 2; }
+.sheet-stack:has(> .card:nth-child(3)) { --_n: 3; }
+.sheet-stack:has(> .card:nth-child(4)) { --_n: 4; }
+.sheet-stack:has(> .card:nth-child(5)) { --_n: 5; }
+/* a card's place in the deck, declared here rather than measured in JS, so
+   a stack renders correctly — right offsets, right paint order — with no
+   script at all. --slot is that place in steps; the tap animation reads it
+   to know how far up to travel. Five is the practical peek depth. */
+.sheet-stack > .card:nth-child(1) { --slot: 0; --level: 1; }
+.sheet-stack > .card:nth-child(2) { --slot: 1; --level: 2; margin-top: var(--stack-step); }
+.sheet-stack > .card:nth-child(3) { --slot: 2; --level: 3; margin-top: calc(2 * var(--stack-step)); }
+.sheet-stack > .card:nth-child(4) { --slot: 3; --level: 4; margin-top: calc(3 * var(--stack-step)); }
+.sheet-stack > .card:nth-child(5) { --slot: 4; --level: 5; margin-top: calc(4 * var(--stack-step)); }
+
+/* stack headers: uniform — [back?] title left, icons right, one height,
+   same gap to content on every card */
+.sheet-stack > .card > .card__head {
+  align-items: center;
+  justify-content: flex-start;
+  min-height: var(--tap);
+}
+/* NOT a skeleton head: a peek is one line at its own size, and the display
+   stack deliberately runs a second line under the next card. So it opts out of
+   the whole skeleton-head treatment — budget, squeeze and clamp. cardds.js
+   skips the same cards. */
+.sheet-stack > .card > .card__head :is(h1, h2, h3) {
+  font-size: var(--fs-h1);
+  line-height: 1;
+  letter-spacing: -0.01em;
+  margin-right: auto; /* pins the icon cluster right */
+  display: block;
+  -webkit-line-clamp: none;
+  overflow: visible;
+  overflow-wrap: normal;
+}
+
+/* display stack: the giant title IS the peek — line one shows, line two is
+   clipped by the next card (recents / library lists) */
+.sheet-stack--display { --stack-step: 6.5rem; }
+.sheet-stack--display > .card > .card__head { align-items: start; min-height: 0; }
+.sheet-stack--display > .card > .card__head :is(h1, h2, h3) {
+  font: var(--type-display);
+  letter-spacing: var(--track-display);
+  /* the FIRST line sits on the centre of the peek strip (--stack-step tall,
+     measured from the card's top edge); line two runs under the next card */
+  margin-top: calc((var(--stack-step) - 1lh) / 2 - var(--sp-5));
+}
+/* fanned stack: a toggle opens the stack wider so every peek shows more */
+.sheet-stack--fanned { --stack-step: 9.5rem; }
+
+.sheet-stack > .card:has(~ .card) { cursor: pointer; }
+/* a peeked card in a plain stack hides its own body. A --tap stack does
+   NOT: there, every card is full height and full content always, and a
+   peek is simply the strip of it the next card doesn't cover — the way a
+   card in a real deck is never a shorter card, just a mostly hidden one. */
+.sheet-stack:not(.sheet-stack--tap) > .card:has(~ .card):not(.is-open) > :not(.card__head) { display: none; }
+
+/* ============================================================
+   .sheet-stack--tap — tap a peeked sheet open; a back button returns it.
+
+   A sheet (a .card — the material, sheet.css's single sheet is the same
+   stuff) is rigid: it can move in, move out, or be covered — it can
+   never change shape. So every sheet here is the SAME full height,
+   always, set once and never touched again by anything. A "peek" is
+   not a short sheet; it's a full sheet the next one happens to cover,
+   showing only the strip above it, exactly like a sheet of paper part
+   way out of a real stack.
+
+   Because of that, the whole animation is one property: translate.
+   Nothing resizes, nothing re-stacks — z-index is the plain resting
+   --level order and is never touched, since the order already says
+   what has to happen. Cards after the tapped one sit IN FRONT of it,
+   so they're what's covering it, so they're what must leave. Cards
+   before it are already BEHIND it, so they need do nothing at all
+   except let themselves be covered as it rises over them.
+
+   .is-open   — the tapped card, moved up to the top of the stack. Its
+                own resting offset is margin-top (below); opening just
+                translates that offset back off, landing it flush at
+                the stack's top with its full height exactly filling
+                to the bottom.
+   .is-before — an earlier card, nudged one step down so it slips
+                under the next card's resting strip and is covered
+                there. Each carries its own --stagger (set in JS: 0
+                for the one nearest the tapped card, counting up
+                further back) so they tuck away, and later un-tuck,
+                one at a time.
+   .is-after  — a later card, moved out below, together, no stagger.
+   ============================================================ */
+.sheet-stack--tap > .card {
+  height: 100%; /* every card identical and full length, always — the one
+    size in this whole component, never toggled, never transitioned. At a
+    resting margin-top of n steps it simply overhangs the stack's bottom
+    by n steps (clipped by .screen--fill), so translating it up by exactly
+    that much lands it filling the stack precisely. */
+  overflow: clip;
+  transition: translate 0.35s ease; /* the only animated property here */
+  transition-delay: calc(var(--stagger, 0) * 70ms); /* 0 for everything
+    except a staggered is-before card, set in JS as it tucks or un-tucks */
+}
+.sheet-stack--tap > .card.is-open {
+  /* up by its own resting offset — pure movement, nothing resizes */
+  translate: 0 calc(-1 * var(--slot, 0) * var(--stack-step));
+  cursor: default;
+  overflow-y: auto;
+  overflow-x: clip;
+  overscroll-behavior: contain;
+}
+/* the front sheet — the one open on arrival — never travels up (it is not
+   tappable), so its resting offset would leave its last n steps below the
+   screen forever, unreachable by any scroll (timebank home, 2026-09-13). It
+   alone is cut to the room it actually has, and it scrolls like an opened
+   sheet does. Every other sheet keeps the one full height. */
+.sheet-stack--tap:not(.sheet-stack--closed) > .card:not(:has(~ .card)) {
+  height: calc(100% - var(--slot, 0) * var(--stack-step));
+  overflow-y: auto;
+  overflow-x: clip;
+  overscroll-behavior: contain;
+}
+/* a scrolling sheet shows no scrollbar (a desktop with a mouse would paint one
+   down the card's edge — Lh 2026-09-15); it still scrolls, like the page itself */
+.sheet-stack--tap > .card { scrollbar-width: none; }
+.sheet-stack--tap > .card::-webkit-scrollbar { display: none; }
+.sheet-stack--tap > .card.is-before { translate: 0 var(--stack-step); }
+.sheet-stack--tap > .card.is-after { translate: 0 100vh; }
+
+/* ============================================================
+   .sheet-stack--closed — nothing open on arrival. Every sheet, the front
+   one too, is a peek at the BOTTOM of the stack; the room above the peeks
+   is the screen's base, free for whatever the screen wants there (a
+   picture, a greeting — timebank home, Lh 2026-09-15). Tap any head and
+   that sheet rises over the base to fill the stack; back drops it home.
+
+   Same rigid material, same one animated property. The sheets keep their
+   full height and their margin-top slots; what changes is where they REST:
+   translated down by the headroom, 100% − n × step — a card's 100% is the
+   stack's height, so the last peek strip ends exactly at the stack's
+   bottom edge. Open is translate to −slot × step, as before: the sheet
+   lands flush at the top. is-before tucks one step below its resting place.
+   ============================================================ */
+.sheet-stack--closed { --_headroom: calc(100% - var(--_n) * var(--stack-step)); }
+.sheet-stack--closed > .card { translate: 0 var(--_headroom); cursor: pointer; }
+.sheet-stack--closed > .card.is-before { translate: 0 calc(var(--_headroom) + var(--stack-step)); }
+.sheet-stack--closed > .card.is-open { translate: 0 calc(-1 * var(--slot, 0) * var(--stack-step)); }
+.sheet-stack--closed > .card.is-after { translate: 0 100vh; }
+
+/* .sheet-stack__base — the base's content, in the headroom of a closed stack:
+   behind every sheet (level 0), the stack's inset put back (the stack bleeds),
+   exactly the headroom tall so it can lay its content out against the
+   peeks (align-content: end puts it right above them). Written LAST, after
+   the sheets, so the sheets' :nth-child slots stay what they are. */
+.sheet-stack > .sheet-stack__base {
+  grid-area: 1 / 1;
+  align-self: start;
+  z-index: 0;
+  height: var(--_headroom, 0px);
+  padding-inline: var(--screen-pad);
+  display: grid;
+  align-content: end;
+  gap: var(--card-gap, var(--sp-5));
+  overflow: clip;
+}
+
+/* back button: lives in a slot the header reserves once open, and DISSOLVES
+   into it — an opacity fade in place, never a slide in from the left (the
+   slide read as a second thing moving while the sheet itself moved; Lh,
+   2026-09-11). Only the sheet travels; the button appears where it is. */
+.sheet-stack--tap .card__head {
+  position: relative;
+  padding-left: 0;
+  transition: padding-left 0.35s ease;
+}
+.sheet-stack--tap > .card.is-open > .card__head {
+  padding-left: calc(var(--tap-sm) + var(--sp-3));
+}
+.sheet-stack--tap .card__back {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  translate: 0 -50%;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.35s ease, visibility 0.35s;
+}
+.sheet-stack--tap > .card.is-open .card__back {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* ---- css/sheet.css — sheet single: .sheet — one card as a bottom sheet, peek / half / full ---- */
+/* ============================================================
+   cardds/sheet.css — sheet single: one card as a bottom sheet.
+   Three states: .sheet--peek · .sheet--half · .sheet--full
+
+   A sheet is rigid material, exactly like a sheet in .sheet-stack--tap
+   (stack.css): it is ALWAYS the full height of the box that holds it —
+   set once by inset: 0, never written again, never transitioned — and
+   a state is nothing but how far that full card has slid up. Peek is
+   a full sheet that slid down until only its handle and title show;
+   half is one that slid down by half of itself; full is one that has
+   not slid at all. The box clips whatever slid below its bottom edge,
+   so a sheet at any height is still a card: rounded top, a straight
+   cut at the box's edge, its content scrolling inside.
+
+   So translate is the only animated property. Nothing here toggles
+   height, display or z-index for a state — every past bug in the
+   stack's animation came from exactly that, and the sheet inherits
+   the rule.
+
+   Two boxes hold sheets, and the state classes mean the same in both:
+   - .step (step.css) — an app screen where the member acts: the
+     reading card behind, the sheet in front, .action-bar outside.
+   - .sheet-stage (below) — a page-level overlay stage: a sheet over
+     a map, the dim page sheet, the ask drawer (layover.css).
+
+   This is the SINGLE sheet: one sheet the member acts in, whatever it
+   holds — a short entry in a step, a place on a map, a payment on a dim
+   page. Many sheets stacked as the app's menu are the other system,
+   .sheet-stack (stack.css): the same material, its own class and file.
+
+   <article class="card sheet sheet--half" data-sheet-states="peek half full">
+     <button class="sheet__handle" type="button" aria-label="…"></button>
+     <div class="card__head"><h2 class="t-h2">…</h2>…</div>
+     <div class="sheet__body">…controls, or small content cards…</div>
+   </article>
+   Written top-down: the handle, the title row (what peek shows), then
+   the body. The handle and the head stay where they are at every
+   state; the body is what scrolls — a sheet is a card whose head is
+   pinned, not a scrolling column with a title somewhere in it.
+   cardds.js adds the handle's click / drag / keyboard and the focus
+   raise; without it every state still renders.
+   ============================================================ */
+
+.sheet {
+  --_handle: var(--sp-1);
+  /* the strip a peeked sheet shows: the card's own top padding, the handle,
+     the gap, one title row (--tap — the head rule below makes every head at
+     least that tall) and the gap under it, so the cut lands exactly where
+     the first control starts and nothing of it leaks through. Published
+     (and registered in tokens.css) so a sheet whose head is taller can
+     retune it: .my-sheet { --sheet-peek: … } */
+  --sheet-peek: calc(var(--card-pad) + var(--_handle) + 2 * var(--card-gap) + var(--tap));
+  --sheet-half: 0.5;              /* a share of the sheet's own height */
+  /* the sheet's own height, seen from inside it: the box it slides in is the
+     size container (.step, .sheet-stage), so 100cqh is that box, less what
+     the sheet gives up at its top (--_top) and bottom (--_lift). The sheet
+     cannot be its own container — cq units measure a content box, and the
+     sheet's is its border box less the card's padding. */
+  --_box: calc(100cqh - var(--_top, 0rem) - var(--_lift, 0rem));
+  /* the resting offset of the current state, said twice: as a share of the
+     sheet's own height for its translate (--_y), and as a length for the
+     body's scroll-padding (--_cover) — a percentage down there would be of
+     the body, not of the sheet. Half by default. */
+  --_y: calc(var(--sheet-half) * 100%);
+  --_cover: calc(var(--sheet-half) * var(--_box));
+
+  position: absolute;
+  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: cardds.js, only while the handle is held */
+  transition: translate var(--motion-sheet) 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 */
+  display: flex;
+  flex-direction: column;
+  overflow: clip;
+  border-radius: var(--r-card) var(--r-card) 0 0;
+  border-bottom: 0;
+  box-shadow: var(--shadow-sheet);
+}
+.sheet--full { --_y: 0%; --_cover: 0rem; }
+.sheet--half { --_y: calc(var(--sheet-half) * 100%); --_cover: calc(var(--sheet-half) * var(--_box)); }
+.sheet--peek { --_y: calc(100% - var(--sheet-peek)); --_cover: calc(var(--_box) - var(--sheet-peek)); }
+.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
+   scrolls. Its scrollport runs to the card's side and bottom edges (reading
+   --card-pad, the way .bleed does) so content scrolls clear of the edge
+   rather than stopping inside the padding, and a .bleed strip inside it
+   still reaches the edges. The card's own grid rhythm continues inside. */
+.sheet__body {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  gap: var(--card-gap);
+  align-content: start;
+  margin-inline: calc(-1 * var(--card-pad));
+  padding-inline: var(--card-pad);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  /* the part of the sheet that slid under the box's bottom edge cannot be
+     seen, and the scroller has to know that: scroll-padding is exactly "the
+     obscured part of my scrollport", so a focused field, scrollIntoView and
+     anchor navigation all land a control in the visible part, never under
+     the cut. A length from the box's container units (--_box), since the
+     cut is a share of the SHEET's height, not of the body's. */
+  scroll-padding-bottom: var(--_cover);
+}
+.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: var(--card-pad); }
+
+/* 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
+   its hit box to --tap tall and wider than the bar without changing the
+   picture. touch-action: none hands a touch drag to cardds.js instead of to
+   the scroller behind it. */
+.sheet__handle {
+  position: relative;
+  border: 0;
+  color: inherit; /* a <button> has its own UA colour; the bar is the card's ink */
+  background: currentColor;
+  opacity: 0.3;
+  width: var(--tap-sm);
+  height: var(--_handle);
+  border-radius: var(--r-chip);
+  margin: 0 auto;
+  padding: 0;
+  touch-action: none;
+  cursor: grab;
+}
+.sheet__handle::before {
+  content: "";
+  position: absolute;
+  inset: calc((var(--_handle) - var(--tap)) / 2) calc(-1 * var(--sp-8));
+}
+.sheet__handle:focus-visible { outline: var(--focus); outline-offset: var(--sp-2); }
+.sheet.is-dragging .sheet__handle { cursor: grabbing; }
+
+/* the head — a title row at least --tap tall, either kind, so the peek strip
+   (--sheet-peek) is the same for every sheet:
+   - in a step it is a plain card head (card.css): the heading left, the
+     contextual thing at the far right, the two-line budget and the squeeze
+   - .sheet__head is the stage sheet's three-column head: a round button,
+     the centred title and sub, a round button
+   - 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(--tap); }
+.sheet__head {
+  display: grid;
+  grid-template-columns: var(--tap-sm) 1fr var(--tap-sm);
+  align-items: center;
+  gap: var(--sp-3);
+  min-height: var(--tap);
+  text-align: center;
+}
+.sheet__title { font: var(--type-h2); letter-spacing: var(--track-h2); margin: 0; }
+.sheet__sub { font: var(--type-caption); color: var(--card-muted); }
+
+/* ============================================================
+   .sheet-stage — the overlay stage: a page-height box the sheet
+   slides in, over a map, a page, previous cards. It is its own
+   100dvh page, never a section of a scrolling screen — an app
+   screen where the member acts is a .step (step.css).
+   ============================================================ */
+.sheet-stage {
+  /* the centre of the band a half sheet leaves open — from the bar's line to the sheet's
+     top edge at half ((100% + --_top) / 2): where a hero or a map's ring sits */
+  --_band-centre: calc((100% + 3 * var(--_top, 0rem)) / 4);
+  --_top: var(--header-h); /* full stops UNDER the line a top bar takes rather than
+    covering it — the same reserve .screen makes for a fixed .appbar — and
+    keeps its corners; the sheet reads it as its top edge */
+  position: relative;
+  width: 100%; /* also as a grid/flex child: children are absolute, so it must size itself */
+  height: 100dvh;
+  max-width: var(--screen-w);
+  margin-inline: auto;
+  overflow: clip; /* not hidden: a clipped box is not a scroll container, so revealing a focused field never shifts the stage */
+  container-type: size; /* the sheet's body reads this box's height as 100cqh (--_box above) */
+  background: var(--surface);
+}
+/* on an app screen the stage is the page: it takes the screen's inset back (edge to
+   edge, like a step) and, after a fixed .appbar, the room the screen reserved for
+   that bar — the stage keeps the bar's line free itself (--_top), so the reserve
+   would be paid twice and the page would scroll by it */
+.screen > .sheet-stage { margin-inline: calc(-1 * var(--screen-pad)); width: auto; } /* auto: 100% would keep the inset width */
+.appbar + .sheet-stage { margin-top: calc(-1 * (var(--header-h) + var(--header-gap, 0rem))); }
+.sheet-stage__bg { position: absolute; inset: 0; } /* map / previous cards behind */
+/* the hero: ONE thing shown in the band a half sheet leaves open (a postcard being made,
+   a photo being chosen) — centred in that band like a map's ring, on the screen's inset;
+   the sheet slides over it at full */
+.sheet-stage__hero {
+  position: absolute;
+  inset-inline: var(--screen-pad);
+  top: var(--_band-centre);
+  translate: 0 -50%;
+  /* no z-index: it follows the background in DOM order and the sheet, later, covers it at full */
+}
+
+/* ---- map: the box a map engine draws in, behind a stage sheet ----
+   <div class="sheet-stage__bg"><div class="map"><div>…the engine's canvas…</div>
+     <span class="map__ring" role="img" aria-label="ย่านของคุณโดยประมาณ"></span>
+     <span class="map__hint">ลากแผนที่ให้วงครอบย่านที่คุณอยู่</span>
+     <span class="map__credit">© OpenStreetMap</span></div></div>
+   The first child is the engine's mount (the app hands it to Leaflet or the
+   like); it fills the box. Before tiles arrive — or offline — the box shows the
+   wireframe's street pattern, so a map is never a hole. The ring marks the
+   rough area the member is choosing: fixed at the box's centre, so dragging
+   the map underneath is what moves it (the centre IS the choice), never a
+   pin to place. The hint rides at the top, under the bar's line. */
+.map {
+  position: absolute;
+  inset: 0;
+  isolation: isolate; /* the ring and the hint stack inside the map only — a sheet over the map covers them */
+  color: 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),
+    var(--card-2-bg);
+}
+.map > :first-child { position: absolute; inset: 0; z-index: 0; isolation: isolate; } /* its own stacking context: an engine's layered panes stay under the ring */
+.sheet-stage__bg .map > :first-child { background: transparent; } /* an engine's own grey ground would hide the pattern while tiles load */
+.map__ring {
+  position: absolute;
+  left: 50%;
+  /* centred in the band a half sheet leaves open (the stage's --_band-centre) — the
+     member sees the whole ring while the sheet asks; the engine reads the point under it */
+  top: var(--_band-centre);
+  width: var(--map-ring);
+  height: var(--map-ring);
+  translate: -50% -50%;
+  border-radius: 50%;
+  border: var(--border-w) solid var(--accent);
+  background: color-mix(in srgb, var(--accent) 22%, transparent);
+  box-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) */
+}
+.map__credit { /* the tile provider's credit — required by OSM; a caption, not the engine's own control */
+  position: absolute;
+  right: var(--sp-2);
+  bottom: var(--sp-2);
+  padding: var(--sp-0) var(--sp-2);
+  border-radius: var(--r-chip);
+  background: color-mix(in srgb, var(--surface) 80%, transparent);
+  color: var(--on-surface-muted);
+  font: var(--type-caption);
+  pointer-events: none;
+  z-index: 1;
+}
+.map__hint {
+  position: absolute;
+  top: calc(var(--_top, 0rem) + var(--sp-3));
+  left: 50%;
+  translate: -50% 0;
+  max-width: calc(100% - 2 * var(--sp-4));
+  padding: var(--sp-2) var(--sp-4);
+  border-radius: var(--r-chip);
+  background: var(--card-3-bg);
+  color: var(--card-3-ink);
+  font: var(--type-label);
+  text-align: center;
+  box-shadow: var(--shadow-float);
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* raised: the sheet floats above a footnote strip on the scrim. Its bottom
+   edge shows, so it gets its corners and border back; full still stops at
+   the top bar's line, because the top edge never moved. */
+.sheet--raised { --_lift: var(--tap-lg); bottom: var(--_lift); border-radius: var(--r-card); border-bottom: var(--border-w) solid var(--card-border); }
+.sheet-stage__foot {
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  height: var(--tap-lg);
+  margin: 0;
+  display: grid;
+  place-items: center;
+  font: var(--type-caption);
+  color: var(--card-3-ink);
+  z-index: 2;
+}
+
+/* dim stage: blur + darken whatever sits behind the sheet */
+.sheet-stage--dim .sheet-stage__bg { filter: blur(var(--sp-2)); }
+.sheet-stage--dim::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--scrim);
+  z-index: 1;
+}
+.sheet-stage--dim .sheet { z-index: 2; }
+
+/* ---- css/step.css — .step: one screen, one task — card, optional sheet, bar outside ---- */
+/* ============================================================
+   cardds/step.css — .step: one screen, one task.
+   What the member reads (a card), what the member does when the
+   step asks for it (a sheet, sheet.css), and the screen's one
+   move (.action-bar, actions.css) OUTSIDE the step, below it.
+
+   <section class="step">
+     <article class="card step__card">…the words…</article>           ← first
+     <article class="card sheet sheet--half">…the controls…</article>  ← last, optional
+   </section>
+   <div class="action-bar">…</div>
+
+   The step is the box the sheet slides in. It fills the screen
+   column between the top bar's reserve (.screen already pads for
+   .appbar) and the bar's, and clips at its own bottom edge — so the
+   sheet, at every state, stops above the bar and nothing ever sits
+   behind it. The card hugs its words and scrolls inside itself when
+   the column runs out. The sheet is full-width, like the bar: the
+   step bleeds to the screen's edges and the card takes the inset
+   back, so the card and the bar's buttons stand on the inset line
+   while the sheet runs edge to edge.
+
+   It needs a bounded column to fill: .screen--fill (base.css), or
+   an app section of a definite height. Reads → card only. Acts →
+   card + sheet. Never a hand-laid step, never a sheet height.
+   ============================================================ */
+.step {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: clip;
+  margin-inline: calc(-1 * var(--screen-pad)); /* edge to edge, reading the inset the screen publishes (as .sheet-stack does) */
+  container-type: size; /* the sheet's body reads the step's height as 100cqh — sheet.css, --_box.
+     (size containment also makes the step the containing block for fixed
+     descendants: the bar is outside the step, and a popover is in the top layer) */
+  /* --kb: the on-screen keyboard's height, published on :root by cardds.js
+     from the visual viewport — 0 without one, and on a platform that shrinks
+     the layout viewport itself. It grows the room below the step the same
+     way it lifts the bar (actions.css), so the control being typed into and
+     the bar both stay above the keyboard. */
+  margin-bottom: var(--kb, 0);
+}
+/* the step touches the top bar it follows, so that the sheet at full reaches
+   the bar's bottom edge and nothing else: the room the screen would have
+   left between them moves INSIDE the step, above the card (--_lead), where
+   the sheet can rise over it. After an in-flow .topbar that room is the
+   screen's gap; after a fixed .appbar it is the reserve's breathing — both
+   read from the tokens the screen publishes, never recomputed. A step that
+   follows anything else keeps the screen's gap and the sheet stops under
+   that thing. */
+.topbar + .step { margin-top: calc(-1 * var(--screen-gap)); --_lead: var(--screen-gap); }
+.appbar + .step { margin-top: calc(-1 * var(--header-gap)); --_lead: var(--screen-gap); }
+
+/* the bar's room — read from actions.css, never recomputed. Margin, not
+   padding, so the clip cuts at the box edge and nothing shows behind the
+   bar. Any parent that hosts the bar counts — <body>, an app shell, a demo
+   frame — the bar is fixed to the viewport wherever it sits. */
+:has(> .action-bar) .step { margin-bottom: calc(var(--bar-reserve) + var(--kb, 0rem)); }
+
+/* the reading card: a plain card with a flex rule — it hugs its content,
+   and when the column runs out (a short phone, large text) it shrinks and
+   scrolls inside itself instead of pushing the bar or the sheet */
+.step__card {
+  flex: 0 1 auto;
+  min-height: 0;
+  margin: var(--_lead, 0) var(--screen-pad) 0; /* the screen's gap, moved in here from above the step; the inset, taken back from the bleed */
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+/* ---- css/forms.css — outlined fields, add-row ---- */
+/* ============================================================
+   cardds/forms.css — inputs + inline form actions
+   .field: flat outlined input, the label IS the placeholder.
+   Markup: <label class="field"><svg?/><input placeholder="Passport Number"></label>
+   ============================================================ */
+
+.field {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  border: var(--border-w) solid var(--action-border);
+  border-radius: var(--r-control);
+  background: var(--action-bg);
+  color: var(--action-ink);
+  padding-inline: var(--sp-4);
+  min-height: var(--tap);
+  min-width: 0;
+}
+
+.field input,
+.field select {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: var(--type-body);
+  width: 100%;
+  min-width: 0;
+  outline-offset: var(--sp-1);
+}
+.field input::placeholder { color: inherit; opacity: 0.55; }
+
+/* field with its action inside: date pick, send, go — the button sits flush right */
+.field--action { padding-right: var(--sp-1); min-height: var(--tap-lg); }
+.field--action > .icon-btn { margin-left: auto; }
+
+/* colored palettes drop the visible outline elsewhere — fields keep one */
+[data-palette] .field { border-color: color-mix(in srgb, currentColor 25%, transparent); }
+
+/* ---- add-row: inline "+ add another" action ---- */
+.add-row {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sp-2);
+  border: 0;
+  background: none;
+  color: inherit;
+  font: var(--type-label);
+  font-size: var(--fs-body);
+  padding: var(--sp-2) 0;
+  min-height: var(--tap-sm);
+}
+.add-row__plus {
+  width: var(--icon);
+  height: var(--icon);
+  flex: none;
+  border-radius: 50%;
+  background: var(--accent);
+  color: var(--on-accent);
+  display: grid;
+  place-items: center;
+  font-size: var(--fs-md);
+  line-height: 1;
+}
+.add-row__plus .icon { width: var(--icon-xs); height: var(--icon-xs); }
+
+/* ---- css/journey.css — route, tile badge, note row ---- */
+/* ============================================================
+   cardds/journey.css — trip/status primitives inside cards:
+   route row, tile badge, note row. Generic: flights, buses,
+   deliveries — anything with endpoints and a status.
+   ============================================================ */
+
+/* ---- route: endpoint · dotted connector (icon in middle) · endpoint ---- */
+.route { display: flex; align-items: center; gap: var(--sp-3); }
+
+.route__point { display: grid; gap: var(--sp-0); min-width: 0; }
+.route__point--end { text-align: right; }
+
+.route__code { font: var(--type-h2); letter-spacing: var(--track-h2); }
+.route__time { font: var(--type-body); font-variant-numeric: tabular-nums; }
+.route__place { font: var(--type-caption); color: var(--card-muted); }
+.card--3 .route__place { color: inherit; opacity: 0.7; }
+
+.route__via {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--sp-1);
+  opacity: 0.65;
+  font-size: var(--fs-body);
+}
+.route__via::before,
+.route__via::after {
+  content: "";
+  flex: 1;
+  border-top: var(--rule-w) dotted currentColor;
+}
+
+/* ---- tile badge: tiny label over a big value (gate, seat, zone) ---- */
+.tile-badge {
+  display: inline-grid;
+  justify-items: center;
+  gap: var(--sp-0);
+  padding: var(--sp-1) var(--sp-2);
+  border-radius: var(--r-badge);
+  background: var(--card-3-bg);
+  color: var(--card-3-ink);
+}
+.tile-badge__label { font: var(--type-overline); letter-spacing: var(--track-overline); text-transform: uppercase; opacity: 0.7; }
+.tile-badge__value { font: 800 var(--fs-lg)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
+
+/* plain: no fill — a date box beside a title (Jun / 18) */
+.tile-badge--plain { background: transparent; color: inherit; padding: 0; min-width: var(--tap-sm); }
+.tile-badge--plain .tile-badge__value { font: 800 var(--fs-h1)/1 var(--font-display); }
+
+/* corner badge: pin a tile badge on media (rating, price) — .card__media is relative */
+.tile-badge--corner { position: absolute; right: var(--sp-3); bottom: var(--sp-3); }
+
+/* ---- note row: icon + caption (transit hints, fine print) ---- */
+.note-row {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  font: var(--type-caption);
+  color: var(--card-muted);
+}
+.card--3 .note-row { color: inherit; opacity: 0.7; }
+
+/* ---- css/actions.css — topbar, chips, buttons, CTA pack ---- */
+/* ============================================================
+   cardds/actions.css — contextual commands around/inside cards:
+   topbar, chips, buttons, selects, bottom CTA pack
+   ============================================================ */
+
+/* ---- the bars across the top of a screen: one height, whatever they carry ----
+   .topbar (screen title) and .appbar (app context) are the same bar with
+   different contents, so the height is declared here once rather than left to
+   whichever control happens to be tallest. Measured before this rule existed:
+   a title-only topbar 46px, one with an .icon-btn--sm 60px, with a full-size
+   .icon-btn 64px, with a .btn 70px. --header-h is a floor, not a cap — a bar
+   given a deliberately taller control still grows instead of clipping it. */
+.topbar, .appbar {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  padding-block: var(--sp-2);
+  min-height: var(--header-h);
+}
+
+/* ---- top bar: back + screen title ---- */
+.topbar .t-h1 {
+  text-transform: uppercase;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-block: 0.15em; /* Thai marks survive the clip — see card.css, the head rule */
+  margin-block: -0.15em;
+}
+.topbar__actions { margin-left: auto; display: flex; gap: var(--sp-2); }
+
+/* a screen whose one big move sits at the top right (home's "ขอความช่วยเหลือ" — Lh 2026-09-09:
+   no bottom bar on the home screen) puts a primary .btn in the top bar's actions; it stands at
+   the hero height so it is the easiest thing on the screen to hit */
+.topbar__actions > .btn--primary { min-height: var(--tap-lg); }
+
+/* ---- appbar: app context/brand switcher (logo · two-line label · chevron) ---- */
+.appbar {
+  position: fixed;
+  inset-inline: 0;
+  top: 0;
+  max-width: var(--screen-w);
+  margin-inline: auto;
+  padding-inline: var(--screen-pad); /* fixed + full-bleed: the screen's own inset, so the bar's contents line up with the title bar under it (Lh 2026-09-15) */
+  z-index: 40; /* topmost — card animations never cover it */
+  background: var(--surface); /* solid: sliding cards never show through */
+}
+/* fixed, so it covers the top of the screen it sits in — reserve its height
+   there, from the same token, the way the bottom bars reserve theirs. The
+   breathing under it is published: a .step cancels it to touch the bar. */
+.screen:has(> .appbar) { --header-gap: var(--sp-2); padding-top: calc(var(--header-h) + var(--header-gap)); }
+.appbar__brand { flex: 1; display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
+.appbar__text { display: grid; min-width: 0; flex: 1; } /* pushes trailing button to the right edge */
+.appbar__title, .appbar__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; } /* clipped lines: room for Thai marks */
+.appbar__title { font: var(--type-label); }
+.appbar__sub { font: var(--type-caption); color: var(--on-surface-muted); }
+/* the bar's trailing controls (one or two: a labelled switch chip, a wallet button — home,
+   Lh 2026-09-13) stand on the tap floor: a chip that is a switch grows to --tap here */
+.appbar .chip--toggle { min-height: var(--tap); }
+
+/* ---- icon button (round) ---- */
+.icon-btn {
+  width: var(--tap); height: var(--tap);
+  flex: none;
+  border-radius: var(--r-chip);
+  border: var(--border-w) solid var(--outline); /* see .btn — same reason */
+  background: var(--action-bg);
+  color: var(--action-ink);
+  display: grid;
+  place-items: center;
+  font-size: var(--fs-lg);
+  line-height: 1;
+}
+.icon-btn--invert { background: var(--accent); color: var(--on-accent); border-color: transparent; }
+.icon-btn--sm { width: var(--tap-sm); height: 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: 31; }
+
+/* ---- buttons ---- */
+.btn {
+  /* --outline, not --action-border: same reason as .chip — on a palette where
+     --card-1-bg equals --action-bg a transparent border makes a plain button
+     invisible on a white card. --primary and --quiet set their own edge. */
+  border: var(--border-w) solid var(--outline);
+  background: var(--action-bg);
+  color: var(--action-ink);
+  border-radius: var(--r-chip);
+  padding: var(--sp-4) var(--sp-6);
+  font: var(--type-label);
+  font-size: var(--fs-md);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sp-2);
+  min-height: var(--btn-h);
+  text-decoration: none; /* .btn works as <a> too */
+}
+.btn--primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
+/* quiet keeps a faint outline so it still reads as a button on colored palettes;
+   it is ink on whatever it sits on — inherit, or on the dark slot (card--3) it
+   would take the light-card action ink and vanish */
+.btn--quiet   { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 35%, transparent); }
+.btn--block   { width: 100%; }
+/* xl: the one giant call to action in a tinted card ("Taxi!") */
+.btn--xl      { min-height: var(--btn-xl-h); font: 800 var(--fs-3xl)/1 var(--font-display); letter-spacing: var(--track-h1); border-radius: var(--r-card); padding-inline: var(--sp-8); }
+/* disabled keeps the slot — a control that vanishes moves everything else,
+   and a pager whose "previous" disappeared on page one would shift the bar
+   under the thumb on every page */
+:is(.btn, .icon-btn):disabled { opacity: 0.4; cursor: default; }
+/* a row of buttons sharing the width (twin CTAs inside a card) */
+.btn-row { display: flex; gap: var(--sp-2); }
+.btn-row > .btn { flex: 1; min-width: 0; }
+
+/* ---- chip: status/attribute tag, optional signal dot ---- */
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sp-2);
+  border-radius: var(--r-chip);
+  /* --outline, not --action-border: a chip is a control, and on a palette
+     where --card-1-bg == --action-bg (field, roast, hydro) a transparent
+     border makes it invisible on a white card. Same edge fields, checks,
+     toggles, tiles and the dropdown already use. */
+  border: var(--border-w) solid var(--outline);
+  background: var(--action-bg);
+  color: var(--action-ink);
+  padding: var(--sp-2) var(--sp-3);
+  font: var(--type-label);
+  font-size: var(--fs-sm);
+  min-height: var(--chip-h);
+  text-decoration: none;
+  justify-self: start; /* as a grid child it hugs its text, never stretches */
+}
+.dot { width: var(--dot); height: var(--dot); flex: none; border-radius: 50%; background: var(--dot-a); } /* signal dot: chips, legends */
+.dot--b { background: var(--dot-b); }
+.chip--on { background: var(--accent); color: var(--on-accent); border-color: transparent; }
+/* dark-slot inversion lives in card.css (.card--3 :is(...)) */
+
+.chip-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
+
+/* ---- dropdown: the standard for every select — a pill trigger + .menu popover ----
+   <div class="dropdown"><button class="dropdown__btn" popovertarget="f1"><span class="dropdown__label">this week</span><svg class="icon icon--xs"><use href="icons.svg#chevron-down"/></svg></button>
+     <div class="menu" id="f1" popover><button class="menu__item" aria-current="true" data-value="week">this week</button>…</div></div>
+   cardds.js copies the picked item into the label and fires "change" on .dropdown.
+   .menu (layover.css) draws the panel; anchor positioning pins it under the trigger. */
+.dropdown { position: relative; min-width: 0; display: inline-grid; }
+.dropdown__btn {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sp-2);
+  width: 100%;
+  min-width: 0;
+  min-height: var(--tap-sm);
+  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4);
+  border: var(--border-w) solid var(--outline); /* --outline: keeps a faint edge on colored palettes, like fields */
+  border-radius: var(--r-chip);
+  background: var(--action-bg);
+  color: var(--action-ink);
+  font: var(--type-label);
+  font-size: var(--fs-body);
+  text-align: left;
+  cursor: pointer;
+}
+.dropdown__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dropdown__btn > .icon { transition: rotate 0.2s ease; }
+.dropdown:has(.menu:popover-open) .dropdown__btn > .icon { rotate: 180deg; }
+.dropdown--end .menu[popover] { position-area: block-end span-inline-start; } /* right-aligned trigger: panel grows leftwards */
+.filter-row { display: flex; gap: var(--sp-2); }
+.filter-row > .dropdown { flex: 1; min-width: 0; }
+
+/* ---- segment (day picker / tab strip) — items share width, shrink on small screens ---- */
+.segment { display: flex; gap: var(--sp-1); }
+.segment__item {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  opacity: 0.6;
+  border-radius: var(--r-chip);
+  padding: var(--sp-2) var(--sp-1);
+  font: var(--type-label);
+  font-size: var(--fs-sm);
+  min-height: calc(var(--tap-sm) - var(--sp-0));
+  flex: 1;
+  min-width: 0;
+}
+.segment__item[aria-selected="true"] {
+  background: var(--accent);
+  color: var(--on-accent);
+  opacity: 1;
+}
+
+/* ---- bottom CTA pack: fixed action zone under the content ----
+   --bar-reserve is the room the bar needs — its own height plus a breathing
+   gap above it — published here so anything else that must stop clear of it
+   reads this instead of recomputing it. .screen's own reserve below reads
+   it; so does .step (step.css), the box a sheet slides in — one number, so
+   the two can't drift apart.
+   --kb is the on-screen keyboard's height, published on :root by cardds.js
+   from the visual viewport (0 without one, and on a platform that shrinks
+   the layout viewport itself): the bar rides above the keyboard on iOS the
+   way it already does on Android, and .step grows its room by the same. */
+:root { --bar-reserve: calc(var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
+.action-bar {
+  position: fixed;
+  inset-inline: 0;
+  bottom: var(--kb, 0);
+  z-index: 30; /* 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);
+  display: flex;
+  gap: var(--sp-2);
+}
+.action-bar .btn { flex: 1; box-shadow: var(--shadow-float); }
+.action-bar .icon-btn { width: var(--btn-h); height: var(--btn-h); box-shadow: var(--shadow-float); }
+
+/* ---- pager: previous / next at the two edges of the bar ----
+   For a sequence you can walk BOTH ways — a three-card feature intro, a step
+   flow. Use it instead of the default pack whenever going back is as ordinary
+   as going on: a wide CTA beside a small round icon reads as one action plus
+   an afterthought, which is wrong when the two are peers.
+
+   Both buttons are the same shape and the same height, so neither wins by
+   being physically bigger; the fill alone leans forward. The bar carries the
+   buttons only: where you are is said by the .pager__at dots UNDER the card
+   that changes (a .screen__centre group, card.css), never in the bar — the
+   dots move with what moves (Lh, 2026-09-12). Between the buttons goes a
+   "skip" link or nothing. Keep the last step of a flow on the plain
+   .action-bar: a step that COMMITS deserves one wide button, not a pair.
+
+   <div class="action-bar action-bar--pager">
+     <button class="btn" disabled><svg class="icon icon--xs"><use href="icons.svg#arrow-left"/></svg>Back</button>
+     <button class="btn btn--primary">Next<svg class="icon icon--xs"><use href="icons.svg#arrow-right"/></svg></button>
+   </div>                                                                  */
+.action-bar--pager { align-items: center; }
+/* equal share of the bar, and tighter than a lone CTA so two labels plus the
+   indicator still fit a 320px screen */
+.action-bar--pager > .btn {
+  flex: 1 1 0;
+  min-width: 0;
+  padding-inline: var(--sp-3);
+  gap: var(--sp-1);
+  white-space: nowrap;
+  overflow: hidden;
+}
+/* the page dots: under the card in a .screen__centre group; tight gaps */
+.pager__at { flex: 0 1 auto; min-width: 0; overflow: hidden; display: flex; align-items: center; gap: var(--sp-1); }
+.pager__at > * {
+  width: var(--dot);
+  height: var(--dot);
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.3;
+}
+.pager__at > .is-at { background: var(--accent); opacity: 1; }
+/* ---- tiers: a control row above the buttons ----
+   A screen whose one move comes with a control — the introduction's text-size
+   slider above its pager. Each tier is a row; the bar stacks them, and any
+   parent hosting the bar publishes the room for both, the way the plain
+   reserve is published above, so a .screen or a .card--centre stops clear.
+   <div class="action-bar action-bar--tiers">
+     <div class="action-bar__tier"><label class="slider">…</label></div>
+     <div class="action-bar__tier action-bar__tier--pager">…the round pager…</div>
+   </div>                                                                  */
+.action-bar--tiers { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
+/* the tiers bar is as transparent as every other bar: the content scrolls under
+   it and shows through — the rail and the round buttons carry their own float
+   shadow and read on their own (Lh, 2026-09-12; replaces the 09-11 fade) */
+.action-bar__tier { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); }
+.action-bar__tier > .btn { flex: 1; }
+:has(> .action-bar--tiers) { --bar-reserve: calc(var(--tap) + var(--sp-3) + var(--btn-h) + var(--sp-3) + var(--sp-5) + var(--sp-6)); }
+
+/* ---- round pager: previous / next as two round buttons at the two edges ----
+   The pager with nothing to say between its buttons — no dots, no label — as
+   two equal round icon buttons, one at each edge, in thumb reach from either
+   side. Rule 3 still holds: the step that commits goes back to one wide button.
+   <div class="action-bar action-bar--pager">
+     <button class="icon-btn" aria-label="ย้อนกลับ">…</button>
+     <button class="icon-btn icon-btn--invert" aria-label="ถัดไป">…</button>
+   </div>   — or the same two in an .action-bar__tier--pager under a control  */
+:is(.action-bar--pager, .action-bar__tier--pager) > .icon-btn:first-child { margin-right: auto; }
+
+/* .screen's default bottom padding is a constant; derive the reserve from the
+   bar instead, so a taller button (a longer label, a script with more leading)
+   can never end up underneath it. Any parent that hosts the bar counts —
+   <body>, or an app shell (#app > .screen + .action-bar) — since the bar is
+   fixed to the viewport wherever it sits. (.screen--fill reserves nothing:
+   its .step carries the bar's room itself, step.css.) */
+:has(> .action-bar) .screen:not(.screen--fill) { padding-bottom: var(--bar-reserve); }
+
+/* ---- css/numbers.css — ring, track, band, dot grid, picker, badge, bars ---- */
+/* ============================================================
+   cardds/numbers.css — big numbers inside cards:
+   ring gauge · step track · data band · dot grid · value picker
+   Data goes in as unitless custom properties on the element
+   (--value, --done, --total); the math lives here.
+   ============================================================ */
+
+/* ---- ring: conic gauge, --value 0–100, content centred ----
+   <div class="ring" style="--value: 60"><span class="ring__value">60%</span><span class="ring__label">done</span></div> */
+.ring {
+  --value: 0;
+  --_size: var(--ring);
+  --_w: var(--ring-w);
+  width: var(--_size);
+  height: var(--_size);
+  flex: none;
+  border-radius: 50%;
+  display: grid;
+  place-content: center;
+  text-align: center;
+  position: relative;
+  font-variant-numeric: tabular-nums;
+}
+.ring::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: conic-gradient(var(--accent) calc(var(--value) * 1%), var(--ink-tint) 0);
+  /* masks only read alpha: currentColor = "opaque" without naming a color */
+  mask: radial-gradient(farthest-side, transparent calc(100% - var(--_w) - 1px), currentColor calc(100% - var(--_w)));
+  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--_w) - 1px), currentColor calc(100% - var(--_w)));
+}
+.ring__value { font: var(--type-stat); letter-spacing: var(--track-display); }
+.ring__label { font: var(--type-caption); color: var(--card-muted); }
+.card--3 .ring__label { color: inherit; opacity: 0.7; }
+.ring--sm { --_size: var(--avatar-xl); --_w: var(--sp-3); }
+.ring--sm .ring__value { font: 800 var(--fs-2xl)/1 var(--font-display); }
+.ring--xs { --_size: var(--tap-sm); --_w: var(--dot-xs); } /* inline counter (step 3 of 5) */
+.ring--xs .ring__value { font: var(--type-overline); }
+
+/* ---- track: step progress in a pill — done · done · todo ----
+   <ol class="track"><li class="track__step is-done">icon</li> …</ol> */
+.track {
+  --_bg: var(--card-3-bg);
+  --_ink: var(--card-3-ink);
+  /* the track lays down its own dark ground, so like the dark card slot it
+     re-points the accent to its own ink (README rule 10). Without this, any
+     palette where --accent equals --card-3-bg — field, hydro, and the
+     wireframe default — paints done steps invisibly on the track. */
+  --accent: var(--_ink);
+  --on-accent: var(--_bg);
+  list-style: none;
+  margin: 0;
+  padding: var(--sp-2);
+  display: flex;
+  align-items: center;
+  border-radius: var(--r-chip);
+  background: var(--_bg);
+  color: var(--_ink);
+}
+.card--3 .track { --_bg: var(--card-3-ink); --_ink: var(--card-3-bg); }
+.track__step {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+.track__step:first-child { flex: none; }
+/* the connector runs INTO each step; it lights up when that step is done */
+.track__step::before {
+  content: "";
+  flex: 1;
+  height: var(--sp-3);
+  background: color-mix(in srgb, var(--_ink) 30%, transparent);
+}
+.track__step:first-child::before { display: none; }
+.track__step.is-done::before { background: var(--accent); }
+.track__step > .icon,
+.track__step > .track__dot {
+  width: var(--tap-lg);
+  height: var(--tap-lg);
+  flex: none;
+  padding: calc((var(--tap-lg) - var(--icon)) / 2);
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--_ink) 30%, transparent);
+  color: var(--_ink);
+}
+.track__step.is-done > .icon,
+.track__step.is-done > .track__dot { background: var(--accent); color: var(--on-accent); }
+
+/* ---- band: data card — 2-line label · giant number · footnote ----
+   <article class="card card--band"><span class="band__label">Hours<br>banked</span><span class="band__num">18</span><span class="band__foot">this week</span></article> */
+.card--band {
+  grid-template-columns: 1fr auto;
+  grid-template-areas: "label num" "foot num";
+  align-items: end;
+  gap: var(--sp-2) var(--sp-4);
+  min-height: var(--tile-h);
+}
+.band__label { grid-area: label; align-self: start; font: var(--type-label); font-size: var(--fs-body); line-height: 1.2; }
+.band__num {
+  grid-area: num;
+  font: 800 var(--fs-giant) / 0.9 var(--font-display);
+  letter-spacing: var(--track-display);
+  font-variant-numeric: tabular-nums;
+}
+.band__num small { font-size: 0.5em; font-weight: 700; margin-right: 0.1em; } /* unit or % */
+.band__foot { grid-area: foot; font: var(--type-caption); color: var(--card-muted); }
+.card--3 .band__foot { color: inherit; opacity: 0.7; }
+/* band stack: ONE card boundary; bands are frameless inside it, a hairline
+   between each. Bands may still carry slot tints (card--2 / card--3). */
+.band-stack {
+  display: grid;
+  border: var(--border-w) solid var(--card-border);
+  border-radius: var(--r-card);
+  overflow: hidden;
+}
+.band-stack > .card--band { border: 0; border-radius: 0; box-shadow: none; }
+.band-stack > .card--band + .card--band { border-top: var(--border-w) solid var(--hairline); }
+
+/* ---- dotgrid: progress over time as dots — --total, --done, --cols ----
+   one element, no children:
+   <div class="dotgrid" style="--total: 365; --done: 128" role="img" aria-label="128 of 365 days"></div> */
+.dotgrid {
+  --cols: 12;
+  --total: 100;
+  --done: 0;
+  --_rows: round(up, var(--total) / var(--cols));
+  --_full: round(down, var(--done) / var(--cols));   /* complete rows */
+  --_part: calc(var(--done) - var(--_full) * var(--cols)); /* dots in the partial row */
+  --_cell-x: calc(100% / var(--cols));
+  --_cell-y: calc(100% / var(--_rows));
+  width: 100%;
+  aspect-ratio: calc(var(--cols) / var(--_rows));
+  position: relative;
+  background: radial-gradient(circle, var(--hairline) 0 34%, transparent 37%) 0 0 / var(--_cell-x) var(--_cell-y);
+}
+.dotgrid::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle, var(--accent) 0 34%, transparent 37%) 0 0 / var(--_cell-x) var(--_cell-y);
+  clip-path: polygon(
+    0 0,
+    100% 0,
+    100% calc(var(--_full) * var(--_cell-y)),
+    calc(var(--_part) * var(--_cell-x)) calc(var(--_full) * var(--_cell-y)),
+    calc(var(--_part) * var(--_cell-x)) calc((var(--_full) + 1) * var(--_cell-y)),
+    0 calc((var(--_full) + 1) * var(--_cell-y))
+  );
+}
+/* no round(): show the grid without the done fill rather than a broken shape */
+@supports not (width: round(up, 1px, 1px)) {
+  .dotgrid::before { display: none; }
+}
+.dotgrid--stars {
+  background-image: none;
+}
+.dotgrid--stars,
+.dotgrid--stars::before {
+  --_star: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
+}
+
+/* ---- picker: horizontal snap picker, centre value big ----
+   <div class="picker"><div class="picker__rail"><button class="picker__item">100</button>…</div><span class="picker__unit">ml</span></div> */
+.picker { display: grid; gap: var(--sp-1); justify-items: center; position: relative; }
+.picker__rail {
+  width: 100%;
+  display: grid;
+  grid-auto-flow: column;
+  /* side padding = one third of the rail, so the first and last value can sit
+     in the centre; the content box is then one third wide, and each column
+     fills it (percent columns resolve against the content box) */
+  padding-inline: calc(100% / 3);
+  grid-auto-columns: 100%;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  position: relative;
+}
+.picker__rail::-webkit-scrollbar { display: none; }
+.picker__item {
+  scroll-snap-align: center;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  padding: var(--sp-2) 0;
+  font: var(--type-stat);
+  letter-spacing: var(--track-display);
+  font-variant-numeric: tabular-nums;
+  opacity: 0.3;
+  text-align: center;
+}
+.picker__item[aria-selected="true"] { opacity: 1; }
+/* centre rules either side of the selected value */
+.picker::before,
+.picker::after {
+  content: "";
+  position: absolute;
+  top: var(--sp-2);
+  height: calc(var(--sp-10) + var(--sp-3));
+  width: var(--rule-w);
+  background: var(--accent);
+  left: calc(100% / 3);
+}
+.picker::after { left: auto; right: calc(100% / 3); }
+.picker__unit { font: var(--type-caption); color: var(--card-muted); }
+.card--3 .picker__unit { color: inherit; opacity: 0.7; }
+/* the scrolled-to item lights up by position — no JS */
+@supports (animation-timeline: view(x)) {
+  .picker__item { opacity: 0.3; animation: picker-focus linear both; animation-timeline: view(x); }
+  @keyframes picker-focus {
+    0%, 100% { opacity: 0.3; }
+    45%, 55% { opacity: 1; }
+  }
+}
+
+/* ---- badge: tiny count next to a title or tab ("Leads +9", "All 23") ----
+   <h3 class="t-h2">Leads <span class="badge">+9</span></h3> */
+.badge {
+  display: inline-grid;
+  place-items: center;
+  min-width: var(--badge);
+  height: var(--badge);
+  padding: 0 var(--sp-2);
+  border-radius: var(--r-chip);
+  background: var(--accent);
+  color: var(--on-accent);
+  font: var(--type-label);
+  font-variant-numeric: tabular-nums;
+  vertical-align: middle;
+}
+.badge--soft { background: var(--ink-tint); color: inherit; }
+
+/* ---- bars: three or four bars with a count on top — the glance chart ----
+   <div class="bars"><div class="bar" style="--v: 16"><span>+16</span></div>… --max on the parent */
+.bars { --max: 20; --_h: 5rem; display: flex; align-items: end; gap: var(--sp-2); height: calc(var(--_h) + var(--sp-8)); }
+.bar {
+  flex: 1;
+  min-width: 0;
+  display: grid;
+  align-content: end;
+  justify-items: center;
+  gap: var(--sp-1);
+  height: 100%;
+  font: var(--type-caption);
+  font-weight: 700;
+}
+.bar::after {
+  content: "";
+  width: 100%;
+  height: max(var(--sp-2), calc(var(--v) / var(--max) * var(--_h)));
+  border-radius: var(--r-badge);
+  background: var(--ink-tint);
+}
+.bar--on::after { background: var(--accent); }
+.bar--on > span { background: var(--accent); color: var(--on-accent); padding: var(--sp-0) var(--sp-2); border-radius: var(--r-chip); }
+
+/* ---- css/people.css — avatar, avatar stack, chooser row ---- */
+/* ============================================================
+   cardds/people.css — avatars: single, stacked, chooser row.
+   A person row = .row with an .avatar as lead (see lists.css).
+   ============================================================ */
+
+.avatar--center { margin-inline: auto; } /* centred in a sheet head */
+
+/* ---- avatar: initials by default, <img> when there is a photo ----
+   <span class="avatar">LH</span> · <span class="avatar"><img src alt></span> */
+.avatar {
+  --_size: var(--avatar);
+  width: var(--_size);
+  height: var(--_size);
+  flex: none;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: var(--card-2-bg);
+  color: var(--card-2-ink);
+  font: var(--type-label);
+  font-size: calc(var(--_size) * 0.3);
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  position: relative;
+  text-decoration: none; /* .avatar works as <a> too */
+}
+.avatar > img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
+.avatar > .icon { width: 50%; height: 50%; }
+.avatar--sm { --_size: var(--avatar-sm); }
+.avatar--lg { --_size: var(--avatar-lg); }
+.avatar--xl { --_size: var(--avatar-xl); } /* sheet head icon ring */
+/* outline avatar: no fill, an edge — icons in a ring, "add" slots */
+.avatar--outline { background: transparent; color: inherit; border: var(--border-w) solid var(--outline); }
+.avatar--add { background: transparent; color: inherit; border: var(--border-w) dashed var(--outline); cursor: pointer; }
+/* accent avatar: the "+7" tail, the selected person */
+.avatar--on { background: var(--accent); color: var(--on-accent); }
+/* halo: faint concentric rings behind a hero avatar (decorative) */
+.avatar--halo::before {
+  content: "";
+  position: absolute;
+  inset: calc(-0.55 * var(--_size));
+  border-radius: 50%;
+  background: repeating-radial-gradient(circle, transparent 0 calc(var(--_size) * 0.5), currentColor calc(var(--_size) * 0.5) calc(var(--_size) * 0.5 + var(--border-w)), transparent calc(var(--_size) * 0.5 + var(--border-w)) calc(var(--_size) * 0.68));
+  opacity: 0.25;
+  pointer-events: none;
+}
+
+/* ---- avatar stack: overlapping heads, optional +N tail ----
+   <span class="avatar-stack"><span class="avatar avatar--sm">A</span>…<span class="avatar avatar--sm avatar--on">+7</span></span> */
+.avatar-stack { display: inline-flex; align-items: center; }
+.avatar-stack > .avatar { box-shadow: 0 0 0 var(--sp-1) var(--card-bg, var(--surface)); }
+.avatar-stack > .avatar + .avatar { margin-left: calc(-1 * var(--sp-3)); }
+
+/* ---- avatar chooser: big heads with name + role under, scrolls sideways ----
+   <div class="avatar-pick"><button class="avatar-pick__item"><span class="avatar avatar--lg avatar--add">+</span><span class="avatar-pick__name">Add</span><span class="avatar-pick__role">member</span></button>…</div> */
+.avatar-pick {
+  display: flex;
+  gap: var(--sp-4);
+  overflow-x: auto;
+  scroll-snap-type: x proximity;
+  scrollbar-width: none; /* starts at the card's padding edge, like every row */
+}
+.avatar-pick::-webkit-scrollbar { display: none; }
+.avatar-pick__item {
+  scroll-snap-align: start;
+  flex: none;
+  width: var(--avatar-lg);
+  display: grid;
+  justify-items: center;
+  gap: var(--sp-2);
+  border: 0;
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  text-align: center;
+}
+.avatar-pick__name { font: var(--type-label); font-size: var(--fs-sm); }
+.avatar-pick__role { font: var(--type-caption); color: var(--card-muted); margin-top: calc(-1 * var(--sp-1)); }
+.card--3 .avatar-pick__role { color: inherit; opacity: 0.7; }
+
+/* ---- css/choice.css — check, toggle, toggle chip, chip grid, days, calendar, mood, pin, composer ---- */
+/* ============================================================
+   cardds/choice.css — thumb-size choice controls inside cards:
+   check circle · toggle · toggle chip · chip grid · day strip ·
+   calendar · mood picker · pin field · composer · upload tile
+   Native inputs carry the state; CSS reads :checked. No JS.
+   ============================================================ */
+
+/* the data-URI icons below are masks: only their alpha is read, so the
+   "black" stroke inside them is shape, not color — the fill is the token. */
+
+/* ---- check: round check circle at a row's end ----
+   <input type="checkbox" class="check" aria-label="Done"> */
+.check {
+  appearance: none;
+  width: var(--tap);
+  height: var(--tap);
+  flex: none;
+  margin: 0;
+  border-radius: 50%;
+  border: var(--border-w) solid var(--outline);
+  background: var(--action-bg);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+.check::after {
+  content: "";
+  width: calc(var(--tap) / 2);
+  height: calc(var(--tap) / 2);
+  background: var(--on-accent);
+  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" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></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" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / contain no-repeat;
+  opacity: 0;
+}
+.check:checked { background: var(--accent); border-color: transparent; }
+.check:checked::after { opacity: 1; }
+.check:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
+.check--sm { width: var(--tap-sm); height: var(--tap-sm); }
+
+/* ---- toggle: big switch ----
+   <input type="checkbox" role="switch" class="toggle" aria-label="Private"> */
+.toggle {
+  --_w: var(--bar-h);            /* 64 × 36, knob = height − 2 × pad */
+  --_h: 2.25rem;
+  --_pad: 0.1875rem;
+  appearance: none;
+  width: var(--_w);
+  height: var(--_h);
+  flex: none;
+  margin: 0;
+  border-radius: var(--r-chip);
+  border: var(--border-w) solid var(--outline);
+  background: var(--action-bg);
+  position: relative;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+.toggle::after {
+  content: "";
+  position: absolute;
+  top: var(--_pad);
+  left: var(--_pad);
+  width: calc(var(--_h) - 2 * var(--_pad) - 2 * var(--border-w));
+  height: calc(var(--_h) - 2 * var(--_pad) - 2 * var(--border-w));
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.45;
+  transition: translate 0.2s ease, opacity 0.2s ease;
+}
+.toggle:checked { background: var(--accent); border-color: transparent; }
+.toggle:checked::after { translate: calc(var(--_w) - var(--_h)) 0; background: var(--on-accent); opacity: 1; }
+.toggle:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
+
+/* ---- toggle chip: interest / filter picker — shows + off, × on ----
+   <label class="chip chip--toggle"><input type="checkbox">Nature</label> */
+.chip--toggle { cursor: pointer; padding-right: var(--sp-2); }
+.chip--toggle > input { appearance: none; position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
+.chip--toggle::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--toggle:has(:checked) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
+.chip--toggle:has(:checked)::after {
+  mask-image: 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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>');
+  -webkit-mask-image: 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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>');
+}
+.chip--toggle:has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
+.chip--toggle:has(:checked) { font-style: italic; } /* the interest-picker flourish; drop if unwanted */
+
+/* ---- chip grid: pick one slot / many options in a grid ----
+   <div class="chip-grid"><label class="chip chip--pick"><input type="radio" name="t">9:00</label>…</div> */
+.chip-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(5.5rem, 100%), 1fr));
+  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); position: relative; }
+.chip--pick { cursor: pointer; }
+.chip--pick > input { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
+.chip--pick:has(:checked) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
+.chip--pick:has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
+
+/* ---- day strip: a week, one day selected ----
+   <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(--sp-1); }
+.day {
+  display: grid;
+  /* three rows, always: name · number · dot. The dot's row is reserved even on
+     a day that has no dot, so every number sits on the same line and every dot
+     sits on the same line — otherwise a marked day's rows share the height
+     differently and its number rides up. */
+  grid-template-rows: auto auto var(--dot-xs);
+  align-content: center;  /* the group sits centred in the cell, not spread out */
+  justify-items: center;
+  gap: var(--sp-0);
+  min-width: 0;
+  min-height: var(--bar-h);
+  padding-block: var(--sp-3); /* equal air top and bottom, so the selected pill
+                                 is the same shape on every day */
+  padding-inline: 0;
+  border: 0;
+  border-radius: var(--r-chip);
+  background: transparent;
+  color: inherit;
+  opacity: 0.6;
+}
+.day__name { font: var(--type-caption); }
+.day__num { font: 700 var(--fs-lg)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
+.day[aria-selected="true"] { background: var(--accent); color: var(--on-accent); opacity: 1; }
+.day__dot { grid-row: 3; align-self: center; width: var(--dot-xs); height: var(--dot-xs); border-radius: 50%; background: currentColor; }
+
+/* ---- calendar: month grid, 44px cells, one accent day, optional marks ----
+   <div class="calendar"><div class="calendar__head">…</div><div class="calendar__grid"><span class="calendar__wd">Mo</span>×7 <button class="calendar__day" style="--start: 3">1</button>…</div></div> */
+.calendar { display: grid; gap: var(--sp-3); }
+.calendar__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
+.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1); justify-items: center; }
+.calendar__wd { font: var(--type-overline); letter-spacing: var(--track-overline); text-transform: uppercase; color: var(--card-muted); padding-block: var(--sp-2); }
+.card--3 .calendar__wd { color: inherit; opacity: 0.7; }
+.calendar__day {
+  width: 100%;
+  max-width: var(--tap);
+  aspect-ratio: 1;
+  display: grid;
+  place-items: center;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: inherit;
+  font: 500 var(--fs-title)/1 var(--font-ui);
+  font-variant-numeric: tabular-nums;
+  grid-column-start: var(--start, auto); /* --start on the 1st: weekday column 1–7 */
+}
+.calendar__day--mark { background: var(--accent-soft); }
+.calendar__day--mark2 { background: var(--accent-mid); color: var(--on-accent); }
+.calendar__day[aria-selected="true"] { background: var(--accent); color: var(--on-accent); font-weight: 700; }
+.calendar__day:disabled { opacity: 0.3; }
+
+/* ---- mood: five dots in a pill, the picked one grows ----
+   <fieldset class="mood"><label class="mood__opt"><input type="radio" name="mood"><span class="mood__dot"></span></label>×5</fieldset> */
+.mood {
+  margin: 0;
+  min-inline-size: 0; /* fieldset UA default is min-content — it must shrink with the card */
+  padding: var(--sp-1);
+  border: var(--border-w) solid var(--outline);
+  border-radius: var(--r-chip);
+  background: var(--action-bg);
+  color: var(--action-ink);
+  display: flex;
+  justify-content: space-between;
+}
+.mood__opt { flex: 1 1 0; max-width: var(--tap); min-width: 0; height: var(--tap); display: grid; place-items: center; position: relative; cursor: pointer; }
+.mood__opt > input { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
+.mood__dot {
+  width: var(--icon-xs);
+  height: var(--icon-xs);
+  border-radius: 50%;
+  background: var(--_mood, currentColor);
+  transition: scale 0.2s ease, box-shadow 0.2s 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(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-0); border-radius: 50%; }
+
+/* ---- pin: big code entry, one digit per pill ----
+   <div class="pin"><input class="pin__cell" inputmode="numeric" maxlength="1" placeholder=" ">×4</div> */
+.pin { display: flex; gap: var(--sp-3); }
+.pin__cell {
+  flex: 1;
+  min-width: 0;
+  max-width: var(--fab);
+  aspect-ratio: 2 / 3;
+  border: var(--border-w) solid var(--outline);
+  border-radius: var(--r-chip);
+  background: var(--action-bg);
+  color: var(--action-ink);
+  text-align: center;
+  font: var(--type-stat);
+  font-variant-numeric: tabular-nums;
+  caret-color: currentColor;
+}
+.pin__cell:not(:placeholder-shown) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
+.pin__cell:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
+
+/* ---- composer: big text area with a bottom bar (icon · hint · send) ----
+   <div class="composer"><textarea class="composer__input" placeholder="What do you need?"></textarea>
+   <div class="composer__bar"><button class="icon-btn">…</button><span class="composer__hint">Your idea is born</span><button class="icon-btn icon-btn--invert">↑</button></div></div> */
+.composer { display: grid; gap: var(--sp-3); }
+.composer__input {
+  width: 100%;
+  min-height: 11rem;
+  resize: none;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  font: 700 var(--fs-2xl)/1.25 var(--font-display);
+  letter-spacing: var(--track-h2);
+  outline: none;
+}
+.composer__input::placeholder { color: inherit; opacity: 0.4; }
+.composer__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
+.composer__hint { font: var(--type-caption); color: var(--card-muted); }
+.card--3 .composer__hint { color: inherit; opacity: 0.7; }
+
+/* ---- slider: one value along a track, a thumb-size knob ----
+   <label class="slider"><span class="slider__label">ขนาดตัวหนังสือ</span><input class="slider__range" type="range" min="100" max="160" step="15" aria-label="ขนาดตัวหนังสือ"></label>
+   The label row is optional: in a bar under a card that already says what the
+   slider does, the input's aria-label is enough. The track is a hairline rail;
+   the knob is a full --tap, and the whole range is --tap tall, so the thumb has
+   a real target anywhere along it. The value is the input's own. */
+.slider { display: grid; gap: var(--sp-1); flex: 1; min-width: 0; position: relative; } /* relative: the glyph rides the knob */
+/* ---- the sample glyph: one letter IN the knob, on-accent, at the type size
+   the slider sets — so a text-size slider shows the size before anything is
+   read (Lh, 2026-09-12). cardds.js publishes the knob's place on the .slider
+   as --slider-at (0..1) from the input's value; the glyph sits over the knob
+   and never takes the pointer. <span class="slider__glyph" aria-hidden="true">ก</span>
+   before the input. */
+.slider__glyph {
+  position: absolute;
+  bottom: 0;
+  left: calc(var(--tap) / 2 + (100% - var(--tap)) * var(--slider-at, 0));
+  width: var(--tap);
+  height: var(--tap);
+  /* the eye centres the INK, not the line box: a letter that stands on the
+     baseline (ก) has no descender, while the face's box keeps 0.30em under it
+     (fonts.css) — so the ink lands low when the box is centred; lifted 0.15em
+     (set by eye with Lh on FC Pride at h2, 2026-09-12) */
+  translate: -50% -0.15em;
+  display: grid;
+  place-items: center;
+  font: var(--type-h2);
+  color: var(--on-accent);
+  pointer-events: none;
+}
+.slider__label { font: var(--type-label); }
+.slider__range {
+  appearance: none;
+  width: 100%;
+  height: var(--tap);
+  margin: 0;
+  background: transparent;
+  cursor: pointer;
+}
+.slider__range::-webkit-slider-runnable-track { height: var(--sp-1); border-radius: var(--r-chip); background: var(--ink-rail); }
+.slider__range::-webkit-slider-thumb {
+  appearance: none;
+  width: var(--tap);
+  height: var(--tap);
+  margin-top: calc((var(--sp-1) - var(--tap)) / 2);
+  border-radius: 50%;
+  background: var(--accent);
+  border: var(--border-w) solid var(--on-accent);
+  box-shadow: var(--shadow-float);
+}
+.slider__range::-moz-range-track { height: var(--sp-1); border-radius: var(--r-chip); background: var(--ink-rail); }
+.slider__range::-moz-range-thumb {
+  width: var(--tap);
+  height: var(--tap);
+  border-radius: 50%;
+  background: var(--accent);
+  border: var(--border-w) solid var(--on-accent);
+  box-shadow: var(--shadow-float);
+}
+.slider__range:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
+
+/* ---- css/lists.css — row, rows, key-value, kv grid, timeline, legend, link ---- */
+/* ============================================================
+   cardds/lists.css — frameless rows and pairs INSIDE a card:
+   row (lead · body · end) · key-value rows · kv grid ·
+   timeline · legend · link
+   A row inside a card has no boundary of its own; .rows draws
+   hairlines between rows. A row that IS a card = .card--row.
+   ============================================================ */
+
+/* ---- row: leading visual · title + meta · trailing control ----
+   <div class="row"><span class="avatar">A</span><div class="row__body"><span class="row__title">Alice Kau</span><span class="row__meta">Owner</span></div><button class="icon-btn icon-btn--sm">›</button></div> */
+.row {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  min-height: var(--tap);
+  padding-block: var(--sp-2);
+  min-width: 0;
+  color: inherit;
+  text-decoration: none; /* .row works as <a> too — it is a tap target */
+}
+.row__lead {
+  width: var(--tap);
+  height: var(--tap);
+  flex: none;
+  border-radius: var(--r-control);
+  border: var(--border-w) solid var(--outline);
+  display: grid;
+  place-items: center;
+}
+.row__body { flex: 1; min-width: 0; display: grid; gap: var(--sp-0); }
+.row__title { font: var(--type-title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-block: 0.12em; margin-block: -0.12em; } /* the clip keeps Thai marks — see card.css */
+.row__meta { font: var(--type-caption); color: var(--card-muted); display: flex; align-items: center; gap: var(--sp-1); }
+.card--3 .row__meta { color: inherit; opacity: 0.7; }
+.row__end { margin-left: auto; text-align: right; display: grid; gap: var(--sp-0); justify-items: end; flex: none; }
+.row--lg { min-height: var(--fab); padding-block: var(--sp-3); } /* menu rows: more air, round arrow at the end */
+.row--lg .row__title { font: 700 var(--fs-lg)/1.2 var(--font-display); }
+.row--flush { padding-block: 0; } /* a single row as card content: the card's gap is the spacing */
+/* 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 —
+   pointer-events off here, aria-disabled from the markup. The tick is the .check's checked look
+   at --tap-sm, but not an input: nothing to press. */
+.row--done { pointer-events: none; cursor: default; }
+.row--done .row__title { color: var(--card-muted); }
+.card--3 .row--done .row__title { color: inherit; opacity: 0.7; }
+.row__done {
+  width: var(--tap-sm);
+  height: var(--tap-sm);
+  flex: none;
+  margin-left: auto;
+  border-radius: 50%;
+  background: var(--accent);
+  color: var(--on-accent);
+  display: grid;
+  place-items: center;
+}
+
+/* rows: a list of rows separated by hairlines */
+.rows { display: grid; }
+.rows > .row + .row { border-top: var(--border-w) solid var(--hairline); }
+
+/* ---- kv: label left, value right ----
+   <dl class="kv"><div class="kv__row"><dt class="kv__key">Pay with</dt><dd class="kv__val">GHO</dd></div>…</dl> */
+.kv { margin: 0; display: grid; }
+.kv__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--tap); }
+.kv--lined > .kv__row + .kv__row { border-top: var(--border-w) solid var(--hairline); }
+.kv__key { font: var(--type-body); color: var(--card-muted); }
+.card--3 .kv__key { color: inherit; opacity: 0.7; }
+.kv__val { margin: 0; font: var(--type-title); display: inline-flex; align-items: center; gap: var(--sp-2); text-align: right; min-width: 0; }
+
+/* ---- kv grid: value over label, cells split by a rule (Sex | Weight) ----
+   <div class="kv-grid"><div class="kv-cell"><svg class="icon"/><span class="kv-cell__val">15.6 kg</span><span class="kv-cell__key">Weight</span></div>…</div> */
+.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--tile-min), 100%), 1fr)); 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(--sp-0); align-content: start; min-width: 0; }
+.kv-cell > .icon { margin-bottom: var(--sp-1); }
+.kv-cell__val { font: var(--type-h2); letter-spacing: var(--track-h2); font-variant-numeric: tabular-nums; }
+.kv-cell__key { font: var(--type-caption); color: var(--card-muted); }
+.card--3 .kv-cell__key { color: inherit; opacity: 0.7; }
+
+/* ---- 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> */
+.timeline {
+  list-style: none;
+  margin: 0;
+  padding: 0 0 0 var(--sp-6);
+  display: grid;
+  gap: var(--sp-5);
+  position: relative;
+}
+.timeline::before {
+  content: "";
+  position: absolute;
+  left: calc((var(--sp-3) - var(--border-w)) / 2); /* through the centre of the dots */
+  top: var(--sp-3);
+  bottom: var(--sp-3);
+  border-left: var(--border-w) solid var(--hairline);
+}
+.timeline__item { display: grid; gap: var(--sp-2); position: relative; min-width: 0; }
+.timeline__item::before {
+  content: "";
+  position: absolute;
+  left: calc(-1 * var(--sp-6));
+  top: var(--sp-2);
+  width: var(--sp-3);
+  height: var(--sp-3);
+  border-radius: 50%;
+  background: var(--accent);
+}
+.timeline__mark {
+  justify-self: start;
+  font: var(--type-overline);
+  letter-spacing: var(--track-overline);
+  text-transform: uppercase;
+  padding: var(--sp-1) var(--sp-2);
+  border-radius: var(--r-chip);
+  background: var(--ink-tint);
+}
+
+/* ---- legend: signal dots with captions ----
+   <div class="legend"><span class="legend__item"><span class="dot"></span> very high</span>…</div> */
+.legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font: var(--type-caption); color: var(--card-muted); }
+.card--3 .legend { color: inherit; opacity: 0.8; }
+.legend__item { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--icon); }
+
+/* ---- link: "See all ↗" in a card head, big enough to tap ----
+   <a class="link" href="#">See all <svg class="icon icon--xs"/></a> */
+.link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sp-1);
+  min-height: var(--tap-sm);
+  color: inherit;
+  text-decoration: none;
+  font: var(--type-label);
+  font-size: var(--fs-body);
+  border: 0;
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+}
+.link--muted { color: var(--card-muted); }
+.card--3 .link--muted { color: inherit; opacity: 0.7; }
+
+/* ---- css/media.css — cover card, quote, tile grid, fold, mosaic, wave ---- */
+/* ============================================================
+   cardds/media.css — media & display inside cards:
+   cover card · quote · tile grid · fold · waveform
+   ============================================================ */
+
+/* ---- cover: the image IS the card; text over a scrim ----
+   <article class="card card--cover"><div class="ph" role="img"></div>
+     <div class="card__head"><span class="t-overline">Featured</span><button class="icon-btn icon-btn--sm">♥</button></div>
+     <div><h2 class="t-h1">Art Institute</h2><p class="t-body">111 South Michigan Ave</p></div>
+     <div class="row">…meta…</div></article> */
+.card--cover {
+  --card-bg: var(--card-3-bg);
+  --card-ink: var(--card-3-ink);
+  --accent: var(--card-3-ink);
+  --on-accent: var(--card-3-bg);
+  min-height: 22.5rem;
+  align-content: space-between;
+  overflow: hidden;
+  isolation: isolate;
+}
+.card--cover > img,
+.card--cover > .ph {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: -2;
+  border: 0;
+  border-radius: 0;
+  min-height: 0;
+}
+/* scrim: dark at both ends so overline and meta stay readable */
+.card--cover::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background: linear-gradient(to bottom, var(--scrim), transparent 40% 60%, var(--scrim));
+}
+.card--cover .t-muted { color: inherit; opacity: 0.75; }
+.card--cover .row__meta { color: inherit; opacity: 0.85; }
+
+/* ---- quote: giant mark, big text, attribution ----
+   <blockquote class="quote"><p class="quote__text">It's overcast…</p><footer class="quote__by">Wednesday 15</footer></blockquote> */
+.quote { margin: 0; display: grid; gap: var(--sp-3); }
+.quote::before {
+  content: "\201C";
+  font: 900 calc(var(--fs-h1) * 3)/0.55 var(--font-display);
+  height: var(--sp-10);
+  opacity: 0.9;
+}
+.quote__text { margin: 0; font: var(--type-h1); letter-spacing: var(--track-h1); text-wrap: balance; }
+.quote--sm .quote__text { font: var(--type-h2); letter-spacing: var(--track-h2); }
+.quote__by { font: var(--type-overline); letter-spacing: var(--track-overline); text-transform: uppercase; color: var(--card-muted); }
+.card--3 .quote__by { color: inherit; opacity: 0.7; }
+
+/* ---- tile grid: big square tiles — icon top, label bottom ----
+   <div class="tile-grid"><button class="tile"><svg class="icon"/><span class="tile__label">Light</span></button>
+   <label class="tile tile--pick"><input type="checkbox"><svg class="icon"/><span class="tile__label">Music</span></label></div> */
+.tile-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(var(--tile-min), 100%), 1fr));
+  gap: var(--sp-3);
+}
+.tile-grid--3 { --tile-min: 6rem; } /* three across on a phone (attachments, upload kinds) */
+.tile {
+  display: grid;
+  align-content: space-between;
+  justify-items: start;
+  gap: var(--sp-5);
+  min-height: var(--tile-h);
+  min-width: 0;
+  padding: var(--sp-4);
+  border: var(--border-w) solid var(--outline);
+  border-radius: var(--r-card);
+  background: var(--action-bg);
+  color: var(--action-ink);
+  font: inherit;
+  text-align: left;
+  position: relative;
+  cursor: pointer;
+}
+.tile__label { font: var(--type-title); }
+.tile__value { font: var(--type-h2); letter-spacing: var(--track-h2); font-variant-numeric: tabular-nums; }
+.tile__sub { font: var(--type-caption); opacity: 0.7; }
+.tile__text { display: grid; gap: var(--sp-0); }
+.tile--on { background: var(--accent); color: var(--on-accent); border-color: transparent; }
+.tile--pick > input { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
+.tile--pick:has(:checked) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
+.tile--pick:has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
+.tile--wide { grid-column: 1 / -1; }
+.tile--stat { min-height: var(--avatar-xl); gap: var(--sp-3); grid-template-columns: auto 1fr; align-items: center; }
+/* upload: dashed, centred plus + label */
+.tile--upload {
+  border-style: dashed;
+  background: transparent;
+  color: inherit;
+  align-content: center;
+  justify-items: center;
+  gap: var(--sp-2);
+  text-align: center;
+}
+/* tinted tiles: slot colors inside a card (schedule, notes) */
+.tile--2 { background: var(--card-2-bg); color: var(--card-2-ink); border-color: transparent; }
+.tile--3 { background: var(--card-3-bg); color: var(--card-3-ink); border-color: transparent; }
+
+/* ---- fold: a sticky-note corner on any card (decorative) ----
+   No border. The card's outline follows its border box, so it ran straight
+   across the squared bottom-right corner and cut through the fold's diagonal —
+   the corner read as a notch with a line through it rather than a lifted flap.
+   The COLOUR goes transparent rather than the border going to 0, so the box
+   keeps its geometry and a fold card still measures the same as the cards
+   beside it in a deck. */
+.card--fold {
+  border-color: transparent;
+  border-bottom-right-radius: 0;
+  background-image: linear-gradient(to top left,
+    var(--surface) 0 50%,
+    color-mix(in srgb, currentColor 18%, var(--card-bg)) 50% 100%);
+  background-repeat: no-repeat;
+  background-position: bottom right;
+  background-size: var(--sp-8) var(--sp-8);
+}
+
+/* ---- wave: audio waveform stand-in for voice rows ----
+   <span class="wave"></span> — sits in a .row__body, fills the width */
+.wave {
+  display: block;
+  height: var(--icon);
+  width: 100%;
+  background: repeating-linear-gradient(90deg, currentColor 0 var(--sp-1), transparent var(--sp-1) var(--sp-2));
+  /* masks only read alpha: currentColor = "opaque" without naming a color */
+  mask: radial-gradient(ellipse 60% 100% at 50% 50%, currentColor 55%, transparent 58%) 0 0 / var(--tap-lg) 100% repeat-x;
+  -webkit-mask: radial-gradient(ellipse 60% 100% at 50% 50%, currentColor 55%, transparent 58%) 0 0 / var(--tap-lg) 100% repeat-x;
+  opacity: 0.8;
+}
+
+/* ---- mosaic: one big photo + two small, inside a card ----
+   <div class="mosaic"><div class="ph"></div><div class="ph"></div><div class="ph"></div></div> */
+.mosaic {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  grid-auto-rows: 1fr;
+  gap: var(--sp-1);
+  aspect-ratio: 4 / 3;
+  border-radius: var(--r-media);
+  overflow: hidden;
+}
+.mosaic > :first-child { grid-row: span 2; }
+.mosaic > * { min-height: 0; border-radius: 0; opacity: 1; border-width: 0; }
+.mosaic > .ph { opacity: 0.4; border-width: var(--border-w); }
+.mosaic > img { width: 100%; height: 100%; object-fit: cover; }
+
+/* ---- postcard: a member's introduction, a card in the hand — photo in front,
+   words on the back; tap to turn it over (Lh, 2026-09-12; card #63) ----
+   <div class="postcard">
+     <button class="postcard__face postcard__front" type="button" aria-label="พลิกดูด้านหลัง">
+       <img src="…" alt=""> — or <div class="ph"></div> —
+       <span class="postcard__label">ป้าแจ๋ว</span>
+     </button>
+     <button class="postcard__face postcard__back" type="button" aria-label="พลิกดูด้านหน้า">
+       <p class="postcard__caption">ชอบชงกาแฟดริปตอนเช้า</p>
+       <span class="postcard__label">ป้าแจ๋ว</span>
+     </button>
+   </div>
+   Each face is the whole tap target; cardds.js toggles .is-flipped on the
+   postcard (either face, Enter/Space too). A voice note, a like, a reply live
+   OUTSIDE the postcard (a Row under it): a face is a button, and a button
+   holds no button. The faces share one box (a 3:2 landscape card, the media
+   radius); the turn is a Y rotation at --motion-flip, a plain swap under
+   prefers-reduced-motion. Reads ink from the card slot it sits in. */
+.postcard {
+  position: relative;
+  aspect-ratio: 3 / 2;
+  perspective: 60rem;
+  border-radius: var(--r-media);
+}
+.postcard__face {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  align-content: end;
+  padding: var(--sp-4);
+  gap: var(--sp-2);
+  border: var(--border-w) solid var(--card-border);
+  border-radius: inherit;
+  overflow: hidden;
+  isolation: isolate;
+  color: inherit;
+  text-align: left;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  transition: transform var(--motion-flip) ease-in-out;
+  box-shadow: var(--shadow-float);
+}
+.postcard__face:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
+/* the front: the photo (or the wireframe box) fills it, the name reads on a scrim */
+.postcard__front { background: var(--card-3-bg); color: var(--card-3-ink); }
+.postcard__front > img,
+.postcard__front > .ph {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: -2;
+  border: 0;
+  border-radius: 0;
+  min-height: 0;
+}
+.postcard__front::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background: linear-gradient(to top, var(--scrim), transparent 45%);
+}
+/* the back: paper — the words, big enough to read at arm's length */
+.postcard__back {
+  background: var(--card-2-bg);
+  color: var(--card-2-ink);
+  align-content: space-between;
+  transform: rotateY(180deg);
+}
+.postcard__caption { margin: 0; font: var(--type-title); text-wrap: pretty; }
+.postcard__label { font: var(--type-overline); letter-spacing: var(--track-overline); text-transform: uppercase; opacity: 0.85; }
+.postcard.is-flipped > .postcard__front { transform: rotateY(-180deg); }
+.postcard.is-flipped > .postcard__back { transform: rotateY(0); }
+@media (prefers-reduced-motion: reduce) {
+  .postcard__face { transition: none; }
+}
+
+/* ---- css/layover.css — ask drawer, popover menu, banner, float bar, callout, deck ---- */
+/* ============================================================
+   cardds/layover.css — cards that lay OVER other content:
+   ask drawer · popover menu · expanding banner · float bar ·
+   callout · swipe deck. The sheet (peek / half / full / page)
+   lives in sheet.css; these compose with .sheet-stage.
+   ============================================================ */
+
+/* ---- ask drawer: the content card lifts, a dark drawer asks ----
+   <div class="sheet-stage sheet-stage--ask">
+     <article class="card lift">…page content…</article>
+     <div class="drawer"><h2 class="t-h2">Take the case?</h2><p class="t-caption">This cannot be undone.</p>
+       <div class="btn-trio"><button class="icon-btn">×</button><span class="btn-trio__dots"></span><button class="icon-btn icon-btn--invert">?</button><span class="btn-trio__dots"></span><button class="icon-btn">✓</button></div>
+     </div></div> */
+.sheet-stage--ask {
+  --drawer-h: 14rem;
+  background: var(--card-3-bg);
+  color: var(--card-3-ink);
+}
+.lift {
+  position: absolute;
+  inset: 0 0 var(--drawer-h) 0;
+  border: 0;
+  border-radius: 0 0 var(--r-card) var(--r-card);
+  overflow: hidden;
+  overscroll-behavior: contain;
+  box-shadow: var(--shadow-sheet);
+  align-content: start;
+}
+.drawer {
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  height: var(--drawer-h);
+  padding: var(--sp-5);
+  display: grid;
+  align-content: center;
+  justify-items: center;
+  gap: var(--sp-1);
+  text-align: center;
+  --accent: var(--card-3-ink);   /* the one solid button inverts on the dark drawer */
+  --on-accent: var(--card-3-bg);
+}
+.drawer .t-caption { opacity: 0.7; }
+.drawer .icon-btn { background: transparent; color: inherit; border-color: var(--ink-rail); }
+.drawer .icon-btn--invert { background: var(--accent); color: var(--on-accent); border-color: transparent; width: var(--tap-lg); height: var(--tap-lg); }
+.btn-trio { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
+.btn-trio__dots {
+  width: var(--sp-5);
+  height: 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;
+}
+
+/* ---- popover menu: a card anchored to its button, rows of icon + label ----
+   <button class="chip" popovertarget="when">Now ▾</button>
+   <div class="menu" id="when" popover><button class="menu__item"><svg class="icon"/>Now</button>…</div>
+   Native popover: light dismiss, Esc, top layer. Anchored to the invoker where
+   anchor positioning exists; the fallback is the browser's centred placement. */
+.menu {
+  display: none;              /* explicit closed state — never display on the base rule */
+  margin: 0;
+  inset: auto;
+  border: var(--border-w) solid var(--action-border);
+  border-radius: var(--r-card);
+  padding: var(--sp-2);
+  min-width: 12rem;
+  background: var(--action-bg);
+  color: var(--action-ink);
+  box-shadow: var(--shadow-float);
+}
+.menu:popover-open { display: grid; }
+.menu:not([popover]) { display: grid; position: relative; } /* inline usage (no attribute) */
+.menu__item {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  min-height: var(--tap);
+  width: 100%;
+  padding: 0 var(--sp-3);
+  border: 0;
+  border-radius: var(--r-control);
+  background: transparent;
+  color: inherit;
+  font: var(--type-title);
+  text-align: left;
+  cursor: pointer;
+}
+.menu__item:hover, .menu__item:focus-visible { background: var(--ink-tint); outline: none; }
+.menu__item[aria-current], .menu__item.is-on { background: var(--accent); color: var(--on-accent); }
+@supports (anchor-name: --a) {
+  .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 */
+    position-try-fallbacks: flip-block, flip-inline;
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .menu[popover] {
+    opacity: 0;
+    translate: 0 calc(-1 * var(--sp-2));
+    transition: display 0.2s allow-discrete, overlay 0.2s allow-discrete, opacity 0.2s, translate 0.2s;
+  }
+  .menu:popover-open { opacity: 1; translate: 0 0; }
+  @starting-style { .menu:popover-open { opacity: 0; translate: 0 calc(-1 * var(--sp-2)); } }
+}
+
+/* ---- banner: a chip that opens into a tinted card, no JS ----
+   <details class="banner"><summary class="chip chip--on">Save $30 on orders over $70 <svg class="icon icon--xs"/></summary>
+     <div class="card card--3 banner__body">…</div></details> */
+.banner { display: grid; gap: var(--sp-2); justify-items: start; }
+.banner > summary { list-style: none; cursor: pointer; }
+.banner > summary::-webkit-details-marker { display: none; }
+.banner > summary .icon { transition: rotate 0.2s ease; }
+.banner[open] > summary .icon { rotate: 180deg; }
+.banner__body { width: 100%; padding: var(--sp-4) var(--sp-5); --card-gap: var(--sp-1); }
+.banner::details-content { width: 100%; } /* Chromium wraps the content in this pseudo; justify-items: start shrink-wrapped it, so the body never reached the width */
+@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 0.25s ease, content-visibility 0.25s allow-discrete; }
+    .banner[open]::details-content { block-size: auto; }
+  }
+}
+
+/* ---- float bar: glass pill nav + detached round button, floats over content ----
+   <nav class="float-bar"><div class="float-bar__pill"><a class="float-bar__item" aria-current="page"><svg class="icon"/>Left</a>…</div><button class="icon-btn">…</button></nav> */
+.float-bar {
+  position: fixed;
+  inset-inline: 0;
+  bottom: var(--sp-5);
+  max-width: var(--screen-w);
+  margin-inline: auto;
+  padding-inline: var(--sp-4);
+  display: flex;
+  gap: var(--sp-2);
+  align-items: center;
+  z-index: 30;
+}
+.sheet-stage > .float-bar { position: absolute; padding-inline: var(--sp-4); }
+/* .screen's default bottom padding clears an .action-bar; a .float-bar is
+   taller (--bar-h + its own bottom offset), so reserve the difference. Any
+   parent that hosts the bar counts (see .action-bar's reserve, actions.css) */
+:has(> .float-bar) .screen:not(.screen--fill) { padding-bottom: calc(var(--bar-h) + var(--sp-5) + var(--sp-6)); }
+.float-bar__pill {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  min-height: var(--bar-h);
+  padding: var(--sp-1);
+  border-radius: var(--r-chip);
+  border: var(--border-w) solid var(--action-border);
+  background: color-mix(in srgb, var(--action-bg) 82%, transparent);
+  color: var(--action-ink);
+  backdrop-filter: blur(var(--sp-3));
+  -webkit-backdrop-filter: blur(var(--sp-3));
+  box-shadow: var(--shadow-float);
+}
+.float-bar__item {
+  flex: 1;
+  min-width: 0;
+  display: grid;
+  justify-items: center;
+  gap: var(--sp-0);
+  min-height: var(--tap-lg);
+  padding: var(--sp-1);
+  border: 0;
+  border-radius: var(--r-chip);
+  background: transparent;
+  color: inherit;
+  font: var(--type-caption);
+  text-decoration: none;
+  opacity: 0.6;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+/* 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"]),
+.float-bar__item.is-on { background: var(--accent); color: var(--on-accent); opacity: 1; }
+.float-bar > .icon-btn { width: var(--bar-h); height: var(--bar-h); box-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> */
+.callout {
+  position: absolute;
+  display: grid;
+  gap: var(--sp-0);
+  width: max-content;
+  max-width: 15rem;
+  padding: var(--sp-3) var(--sp-4);
+  border: var(--border-w) solid var(--action-border);
+  border-radius: var(--r-card);
+  background: var(--action-bg);
+  color: var(--action-ink);
+  box-shadow: var(--shadow-float);
+  text-align: center;
+}
+.callout::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  bottom: calc(-1 * var(--sp-2));
+  width: var(--sp-3);
+  height: var(--sp-3);
+  translate: -50% 0;
+  rotate: 45deg;
+  background: inherit;
+  border: inherit;
+  border-top: 0;
+  border-left: 0;
+}
+.callout__title { font: var(--type-title); }
+.callout__sub { font: var(--type-caption); opacity: 0.7; }
+/* speech chip: a chip with the same tail (mascot / greeting) */
+.chip--bubble { position: relative; }
+.chip--bubble::after {
+  content: "";
+  position: absolute;
+  left: var(--sp-4);
+  bottom: calc(-1 * var(--sp-2) + var(--border-w));
+  width: var(--sp-3);
+  height: var(--sp-3);
+  rotate: 45deg;
+  background: inherit;
+  border: inherit;
+  border-top: 0;
+  border-left: 0;
+}
+
+/* ---- deck: swipe cards; the last child is on top ----
+   <div class="deck"><article class="card">…</article><article class="card">…</article><article class="card card--fold">front</article></div>
+   <div class="deck__actions"><button class="icon-btn">×</button><button class="icon-btn icon-btn--invert">✓</button></div> */
+.deck { display: grid; place-items: center; padding: var(--sp-4) var(--sp-4) var(--sp-6); }
+.deck > .card { grid-area: 1 / 1; width: min(100%, 20rem); min-height: 12.5rem; transition: rotate 0.3s ease, translate 0.3s ease; }
+.deck > .card:nth-last-child(2) { rotate: -4deg; translate: calc(-1 * var(--sp-2)) var(--sp-2); opacity: 0.85; }
+.deck > .card:nth-last-child(3) { rotate: 5deg; translate: var(--sp-3) var(--sp-4); opacity: 0.6; }
+.deck > .card:nth-last-child(n + 4) { display: none; }
+.deck__actions { display: flex; justify-content: center; gap: var(--sp-8); }
+.deck__actions > .icon-btn { width: var(--bar-h); height: var(--bar-h); }
+