@gemboss/ui 0.8.1 → 0.12.0

package/gemboss-ui.css

@@ -1,8 +1,8 @@
 /*
  * GemBoss admin design system — GENERATED — do not edit; regenerate from gemboss:
  *   node apps/admin/scripts/export-ui-css.mjs --out <path>   (npm run export:ui-css)
- * gemboss commit: 22b5d0daf43ab644a6a9bffef08352a93cc5ca1c
- * sources sha256: 7d836f2fc37705cee220b28af995f1e1006b2cb1a41e0ac162c29fa9276f70d3
+ * gemboss commit: e4c3bf3203ec143af9abdade7f6c686be85f7de0
+ * sources sha256: 9b0060f874885bf4ba4ab9dc6448bc06ae386328bb9bfebcf23bfc6c2671561d
  * contents: 1 allow-listed rule from apps/admin/src/app/globals.css + packages/ui/src/gemboss-tokens.css
  *   (verbatim) + packages/ui/src/ui.css (verbatim) + packages/ui/src/gemboss-field.css (verbatim)
  *   + 181 rules from packages/ui/src/shell.css (the shared shell)
@@ -96,7 +96,7 @@
      and reading as "the font keeps shrinking". New rule: pick a step here, never a
      raw px. Floor is 12px (--fs-caption); 11px (--fs-micro) is reserved for bold
      micro-badges/count-pills ONLY — nothing below that. Body default is 14px, one
-     step up from Polaris bodyMd (13px; bodySm is 12) which the app had been leaning on for prose. The kit (ui.css) reads --ui-fs-body, 13px, because it sits beside Polaris components. */
+     step up from Polaris bodyMd (13px; bodySm is 12) which the app had been leaning on for prose. The kit (ui.css, kit-plain.css) reads --ui-fs-body, 13px, because it sits beside Polaris components; since 0.12.0 it reads none of body/h1-h3 here (README "Admin density"). */
   --gemboss-fs-micro: 11px;   /* bold count-pills / status chips only */
   --gemboss-fs-caption: 12px; /* metadata, timestamps, secondary labels */
   --gemboss-fs-body: 14px;    /* default body / reading text */
@@ -181,7 +181,7 @@
 }
 
 /* ═══ ui.css ═══ */
-/* ════════════════════════════════════════════════════════════════════════════
+/* ══
    Tool/App UI kit — the shared primitive layer for the internal operator surfaces
    (admin console, seller app chrome, theme-editor). ONE semantic token spine
    (`--ui-*`) that every primitive reads, plus the primitive CSS itself.
@@ -194,7 +194,7 @@
    The `--ui-*` layer is SEMANTIC and resolved per surface: components only read
    `--ui-*`; each surface maps those to its own tokens (admin → `--adm-*` below),
    so one <Button> looks native everywhere without hard-coding a palette.
-   ════════════════════════════════════════════════════════════════════════════ */
+   ══ */
 
 :root {
   --ui-surface: #ffffff;
@@ -229,10 +229,15 @@
   --ui-space-2: 8px;
   --ui-space-3: 12px;
   --ui-space-4: 16px;
-  /* ONE control height under a mouse: Polaris' TextField/Select (32px). Field, select, button and
-     segment share it, so a toolbar row is one height (was 32 / 36 / 34 / 36). Under a thumb every
-     control is 44px (the coarse block below; kit-plain.css adds phone WIDTH for non-admin surfaces). */
+  /* Polaris' two heights under a mouse (0.12.0): a FIELD (gemboss-field, ui-select) is TextField/Select, 32px; a BUTTON
+     (ui-btn, ui-seg, ui-tabs) is Button, 28px. A toolbar row is 32 + 28, as in the admin. Under a thumb every control is
+     44px (the coarse block below; kit-plain.css adds phone WIDTH for non-admin surfaces). */
   --ui-control-h: 32px;
+  --ui-btn-h: 28px;
+  /* Polaris Card (13.9.5): no grey frame of its own, --p-shadow-100 under it. The edge is ONE 1px line in the surface's
+     --ui-border (Polaris paints a bevel inset on a ::before; a border cannot be covered by a full-bleed child, and it
+     follows a surface's dark --ui-border, which a light bevel would not). */
+  --ui-card-shadow: 0 1px 0 rgba(26,26,26,.07);
   --ui-fs-body: 13px;
   --ui-fs-caption: 12px;
   /* Content column width for the seller app shell — ONE source of truth for every wide surface
@@ -288,16 +293,17 @@
   --ui-warning-fg: color-mix(in srgb, #c99a2e 70%, #ffffff);
   --ui-danger-fg: color-mix(in srgb, var(--gemboss-danger-strong) 70%, #ffffff);
   --ui-focus: var(--adm-accent);
+  --ui-card-shadow: none;
 }
 
-/* ── Button ──────────────────────────────────────────────────────────────────
+/* ── Button ──
    inline-flex + center so a <button> and an <a> render identically (anchors ignore
    `height` as inline elements — the root cause of the misaligned link-buttons). */
 .ui-btn {
   display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-space-2);
-  height: var(--ui-control-h); padding: 0 var(--ui-space-4); box-sizing: border-box;
+  height: var(--ui-btn-h); padding: 0 var(--ui-space-3); box-sizing: border-box;
   line-height: 1; white-space: nowrap; vertical-align: middle;
-  border-radius: var(--ui-radius-md); font-family: inherit; font-size: var(--ui-fs-body); font-weight: 550;
+  border-radius: var(--ui-radius-md); font-family: inherit; font-size: var(--ui-fs-caption); font-weight: 550;
   cursor: pointer; text-decoration: none; user-select: none;
   border: 1px solid var(--ui-border); background: transparent; color: var(--ui-text);
   transition: background .12s ease, border-color .12s ease;
@@ -309,33 +315,33 @@
 .ui-btn--primary:hover { background: var(--ui-accent-hover); border-color: var(--ui-accent-hover); }
 .ui-btn--ghost { border-color: transparent; background: transparent; color: var(--ui-text-muted); }
 .ui-btn--ghost:hover { background: var(--ui-surface-2); color: var(--ui-text); }
-.ui-btn--sm { height: 28px; padding: 0 var(--ui-space-3); font-size: var(--ui-fs-caption); }
+/* `ui-btn--sm`: the default size under a mouse since 0.12.0; it only marks a button the admin keeps compact under a finger. */
 
-/* ── Card ──────────────────────────────────────────────────────────────────── */
+/* ── Card ── */
 .ui-card {
   background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg);
-  padding: var(--ui-space-4); color: var(--ui-text);
+  box-shadow: var(--ui-card-shadow); padding: var(--ui-space-4); color: var(--ui-text);
 }
-.ui-card__title { font-size: 14px; font-weight: 600; margin: 0 0 var(--ui-space-2); }
+.ui-card__title { font-size: 14px; line-height: 20px; font-weight: 650; margin: 0 0 var(--ui-space-2); }
 /* Đầu thẻ có nút: `<div class="ui-card__head"><h2 class="ui-card__title">…</h2><button class="ui-btn">…</button></div>`.
    Tiêu đề trái, hành động phải, xuống dòng khi hẹp (01/10/2026: partner-radar rel-head / agr). */
 .ui-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-2); margin-bottom: var(--ui-space-2); }
 .ui-card__head > .ui-card__title { margin: 0; }
 .ui-card__head > :last-child:not(.ui-card__title) { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); }
 
-/* ── Select ──────────────────────────────────────────────────────────────────
+/* ── Select ──
    Native <select> reskinned; custom caret as an inline SVG data-URI (caret color
    uses the muted token via %-encoding fallback).
    Its BOX is the text field's (29/09/2026, Chris): same --gemboss-field-* tokens for ground, line and
    ink, same hover, same focus ring as `.gemboss-field`. Before, a grey --ui-surface-2 select stood next
    to a bordered white field in the same form (gempress editor, admin forms), and `:focus` removed the
    outline and only recoloured the border, so a keyboard user saw almost nothing. Height is
-   --ui-control-h, the button's and the field's, because a select sits in toolbars beside both. */
+   --ui-control-h, the field's (Polaris Select, 32): a field, not a button (28, --ui-btn-h). */
 .ui-select {
   height: var(--ui-control-h); padding: 0 32px 0 12px; max-width: 100%;
   background: var(--gemboss-field-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20'><path fill='%239a9aa4' d='M5 7l5 5 5-5z'/></svg>") no-repeat right 10px center;
   border: 1px solid var(--gemboss-field-line); border-radius: var(--ui-radius-md);
-  color: var(--gemboss-field-ink); font-family: inherit; font-size: var(--ui-fs-body); font-weight: 500;
+  color: var(--gemboss-field-ink); font-family: inherit; font-size: var(--ui-fs-body); font-weight: 450;
   appearance: none; -webkit-appearance: none; cursor: pointer;
 }
 .ui-select:hover:not(:disabled) {
@@ -350,13 +356,13 @@
 .ui-select:disabled { opacity: .5; cursor: not-allowed; }
 .ui-select--slim { height: 30px; font-size: var(--ui-fs-caption); }
 
-/* ── Tag / Chip ──────────────────────────────────────────────────────────────
+/* ── Tag / Chip ──
    Small inline labels. `solid` = filled muted pill (was gemboss-vault-tag); `chip` =
    bordered mono token (was gemboss-vault-chip). `accent` tone for the highlighted state. */
 .ui-tag {
   display: inline-flex; align-items: center; gap: 6px;
-  font-size: var(--gemboss-fs-micro, 11px); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
-  padding: 1px 6px; border-radius: 6px; background: var(--ui-surface-2); color: var(--ui-text-muted);
+  font-size: var(--ui-fs-caption); line-height: 20px; font-weight: 450;
+  padding: 0 6px; border-radius: var(--ui-radius-md); background: var(--ui-surface-2); color: var(--ui-text-muted);
 }
 .ui-tag--accent { background: var(--adm-accent-soft, rgba(20,22,26,.05)); color: var(--adm-accent-fg, var(--ui-accent)); }
 .ui-tag--chip {
@@ -390,13 +396,13 @@
 
 /* ── Chữ phụ: `<p class="ui-muted">`, `<span class="ui-muted">` — mô tả, chú thích, dòng meta. Cỡ caption, màu muted.
    Trước đây mỗi surface tự viết `.muted` (partner-radar: 180 chỗ). */
-.ui-muted { color: var(--ui-text-muted); font-size: var(--gemboss-fs-caption); }
+.ui-muted { color: var(--ui-text-muted); font-size: var(--ui-fs-caption); }
 
 /* ── Tiêu đề trang: `<div class="ui-page-head"><h1>…</h1><p>…</p></div>`. Đưa lên NGUYÊN VĂN từ admin
-   `.gemboss-admin-page-head` (01/10/2026, Chris: một chủ sở hữu; admin dùng bản này). Cố ý không đặt margin cho h1
-   và không dùng flex: admin không reset margin tiêu đề, nên đổi ở đây là đổi khoảng cách của 14 trang admin. */
+   `.gemboss-admin-page-head` (01/10/2026, Chris: một chủ sở hữu; admin dùng bản này). Không đặt margin cho h1
+   và không dùng flex: margin 0 đến từ reset (Polaris ở admin, app-shell.css trong shell của bề mặt từ 0.12.0). */
 .ui-page-head { margin-bottom: 20px; }
-.ui-page-head h1 { color: var(--ui-text-strong); font-size: 22px; line-height: 28px; font-weight: 650; letter-spacing: -0.01em; } /* own line-height: the 20px body line overlapped a wrapped title (0.5.1) */
+.ui-page-head h1 { color: var(--ui-text-strong); font-size: 20px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; } /* own line-height: the 20px body line overlapped a wrapped title (0.5.1) */
 .ui-page-head p { color: var(--ui-text-muted); font-size: var(--ui-fs-body); margin-top: 4px; }
 
 /* ── Thanh công cụ: `<div class="ui-toolbar">` — ô tìm giãn, điều khiển bám phải, một hàng gọn, xuống dòng khi hẹp.
@@ -414,7 +420,7 @@ a.ui-metric { text-decoration: none; color: inherit; }
 a.ui-metric:hover { border-color: var(--ui-text-muted); }
 a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 1px; }
 .ui-metric__val { font-size: 17px; font-weight: 700; color: var(--ui-text); font-variant-numeric: tabular-nums; line-height: 1.15; }
-.ui-metric__lbl { font-size: var(--gemboss-fs-caption); font-weight: 500; color: var(--ui-text-muted); }
+.ui-metric__lbl { font-size: var(--ui-fs-caption); font-weight: 500; color: var(--ui-text-muted); }
 .ui-metric--success { border-color: color-mix(in srgb, var(--gemboss-success) 40%, transparent); }
 .ui-metric--success .ui-metric__val { color: var(--ui-success-fg); }
 .ui-metric--warning { border-color: color-mix(in srgb, #c99a2e 40%, transparent); }
@@ -426,7 +432,7 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
    Lưới tự giãn: mỗi ô ≥ 160px, xuống dòng khi hẹp. */
 .ui-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px 16px; margin: 0; }
 .ui-dl > div { min-width: 0; }
-.ui-dl dt { font-size: var(--gemboss-fs-caption); color: var(--ui-text-muted); }
+.ui-dl dt { font-size: var(--ui-fs-caption); color: var(--ui-text-muted); }
 .ui-dl dd { margin: 4px 0 0; font-weight: 600; color: var(--ui-text); overflow-wrap: anywhere; }
 
 /* ── Thông báo: `<div class="ui-notice ui-notice--warning">…</div>`. Lỗi tải, cảnh báo cấu hình, việc cần người
@@ -443,22 +449,22 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
 .ui-pager > a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); color: var(--ui-text); text-decoration: none; font-size: var(--ui-fs-body); }
 .ui-pager > a:hover { background: var(--ui-surface-2); }
 .ui-pager > a:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 1px; }
-.ui-pager > [aria-current="page"] { color: var(--ui-text-muted); font-size: var(--gemboss-fs-caption); }
+.ui-pager > [aria-current="page"] { color: var(--ui-text-muted); font-size: var(--ui-fs-caption); }
 
-/* ── Badge ────────────────────────────────────────────────────────────────────
-   Polaris' Badge (02/10/2026; was an uppercase mono pill): 12px/550, padding 2/8, radius 8, the secondary
+/* ── Badge ──
+   Polaris' Badge (02/10/2026; was an uppercase mono pill): 12px/450 (its text span; 550 was the box), padding 2/8, radius 8, the secondary
    fill. The admin's /admin console draws it too (components/ui/Badge.tsx). Tones (`--success|--warning|--critical|
    --info`, `--dot`) are in kit-plain.css, for the non-React surfaces; the seller app uses Polaris <Badge tone>. */
 .ui-badge {
   display: inline-flex; align-items: center; gap: 4px;
-  font-size: var(--ui-fs-caption); line-height: 16px; font-weight: 550; white-space: nowrap;
+  font-size: var(--ui-fs-caption); line-height: 16px; font-weight: 450; white-space: nowrap;
   padding: 2px 8px; border-radius: var(--ui-radius-md); background: color-mix(in srgb, var(--ui-text) 8%, transparent); color: var(--ui-text-muted);
 } /* a tint of the ink, not --ui-surface-2: that is the table row hover, and a badge vanished on hover (0.5.1) */
 
-/* ── Modal ────────────────────────────────────────────────────────────────────
+/* ── Modal ──
    Rendered INLINE (not portaled): a portal escapes the .gemboss-admin-shell token
    scope and would render light. Kept in-tree so --ui-* resolves to the surface.
-   0.7.3: Polaris Modal's density (#1099, README "Popup density"). Popup only: --ui-control-h stays 32. */
+   0.7.3: Polaris Modal's density (#1099, README "Popup density"). Buttons are 28 everywhere since 0.12.0 (--ui-btn-h). */
 .ui-overlay {
   position: fixed; inset: 0; z-index: 500;
   background: rgba(0, 0, 0, 0.5);
@@ -491,7 +497,6 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
   display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
   padding: 12px 16px; border-top: 1px solid var(--ui-border);
 }
-:is(.ui-modal__head, .ui-modal__foot) .ui-btn { height: 28px; padding: 0 12px; font-size: var(--ui-fs-caption); }
 /* 44px under a thumb or at phone width; -8px keeps the head 53. */
 @media (pointer: coarse), (max-width: 47.9975em) {
   .ui-modal__close { width: 44px; height: 44px; margin: -8px -8px -8px 0; }
@@ -530,15 +535,15 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
   .ui-select:not(.ui-select--slim) { min-height: 44px; }
 }
 
-/* ── Segmented control ────────────────────────────────────────────────────────
+/* ── Segmented control ──
    Grouped toggle: icon squares (.ui-seg button) or text tabs (.is-text). The
    selected segment uses the accent-soft state. */
 .ui-seg { display: inline-flex; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); overflow: hidden; }
 .ui-seg :is(button, a) {
-  display: inline-grid; place-items: center; width: calc(var(--ui-control-h) - 2px); height: calc(var(--ui-control-h) - 2px);
+  display: inline-grid; place-items: center; width: calc(var(--ui-btn-h) - 2px); height: calc(var(--ui-btn-h) - 2px);
   border: 0; background: transparent; color: var(--ui-text-muted); cursor: pointer; font-family: inherit;
 }
-.ui-seg :is(button, a).is-text { width: auto; padding: 0 12px; font-size: var(--ui-fs-body); font-weight: 500; }
+.ui-seg :is(button, a).is-text { width: auto; padding: 0 12px; font-size: var(--ui-fs-caption); font-weight: 550; }
 .ui-seg :is(button, a) + :is(button, a) { border-left: 1px solid var(--ui-border); }
 .ui-seg :is(button, a):hover { background: var(--ui-surface-2); color: var(--ui-text); }
 .ui-seg :is(button, a):focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
@@ -548,7 +553,7 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
 .ui-seg button.active { background: var(--ui-accent-soft); color: var(--ui-accent-strong); }
 .ui-seg svg { width: 16px; height: 16px; fill: currentColor; }
 
-/* ── Stat chip ────────────────────────────────────────────────────────────────
+/* ── Stat chip ──
    Count-led pill; clickable ones double as filters (active = accent-soft). */
 .ui-stats { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); margin-bottom: 24px; }
 .ui-stat {
@@ -563,7 +568,7 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
 .ui-stat.is-clickable.active { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent-strong); }
 .ui-stat.is-clickable.active b { color: var(--ui-accent-strong); }
 
-/* ── Toast / notification bar ─────────────────────────────────────────────────
+/* ── Toast / notification bar ──
    App-wide "done / failed" pill for async actions (delete/duplicate/publish…).
    Polaris-style: dark pill, bottom-center, error variant in critical red. Lives
    in <ToastProvider> (components/ui/Toast.tsx), portaled to <body>. */
@@ -606,7 +611,7 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
 }
 @media (prefers-reduced-motion: reduce) { .gemboss-toast { animation: none; } }
 
-/* ── The kit's controls under a thumb ─────────────────────────────────────────────────────────
+/* ── The kit's controls under a thumb ──
  * Measured by hit test on /admin/{theme-kernel,media,style-packs} at 390 and 1366 with a coarse
  * pointer: segmented buttons 36x36, selects 30-36 tall, clickable stat tiles 29, the asset row's
  * note button 30x30. §9.1 puts every one of them in the CONTROL tier (44px).
@@ -614,9 +619,11 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
  * HERE rather than in each surface's stylesheet, because this is the shared primitive layer — the
  * same reason the kit exists at all. The admin console and the seller app both read it.
  *
- * `pointer: coarse` only: a mouse keeps the density these surfaces were designed at. Growing a box
- * for every pointer is what #2147 did to a working width.
+ * The block below is `pointer: coarse` only: a mouse at desktop width keeps the density these surfaces were
+ * designed at. Growing a box for every pointer is what #2147 did to a working width.
  */
+/* Phone WIDTH (< 768) with a mouse too (a narrow window): buttons and segments are 44 (0.12.0; at desktop width 28). */
+@media (max-width: 47.9975em) { .ui-btn:not(.ui-btn--sm), .ui-seg :is(button, a) { min-height: 44px; } .ui-seg :is(button, a):not(.is-text) { min-width: 44px; } }
 @media (pointer: coarse) {
   /* NOT `.ui-textarea`: it already declares `min-height: 96px` earlier in this file, so adding it to
      a 44px group LOWERS it — same specificity, later line. The note dialog's box would have gone from
@@ -643,7 +650,7 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
   .ui-seg :is(button, a) { min-width: 44px; }
 }
 
-/* ── Skeleton ─────────────────────────────────────────────────────────────────
+/* ── Skeleton ──
    Vạch xám giữ chỗ cho nội dung chưa về. Ánh sáng chạy qua là gợi ý "đang chờ", không phải trang
    trí — nên nó tắt hẳn với `prefers-reduced-motion`, giữ nguyên vạch tĩnh. */
 .ui-skeleton { display: flex; flex-direction: column; gap: var(--ui-space-2); }
@@ -664,7 +671,7 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
 
 }
 
-/* ── Resizer: the seam you drag between two panels ────────────────────────────
+/* ── Resizer: the seam you drag between two panels ──
    One look for every split in the fleet: the admin's editors (chat | preview) today; made for gemcare's
    inbox columns too (they adopt it at their next ui:sync). The element is the drag target; its GEOMETRY (a flex item, a grid edge, an absolutely
    placed strip) belongs to the surface. While a drag runs the surface puts `ui-resizing` on <body>
@@ -704,7 +711,7 @@ body.ui-resizing, body.ui-resizing * { cursor: col-resize !important; user-selec
    pointer stream is never captured by a cross-document frame (the classic "stuck cursor"). */
 body.ui-resizing::after { content: ""; position: fixed; inset: 0; z-index: 9999; cursor: col-resize; }
 
-/* ── Tabs · Table · Empty state ───────────────────────────────────────────────
+/* ── Tabs · Table · Empty state ──
    Plain-CSS primitives for surfaces that are NOT React (gemcare's vanilla dashboard reads this
    file through `npm run export:ui-css`). The React app has Polaris <Tabs>/<DataTable>/<EmptyState>
    for these; nothing in apps/admin uses the classes below, and they restyle no existing component.
@@ -712,18 +719,18 @@ body.ui-resizing::after { content: ""; position: fixed; inset: 0; z-index: 9999;
 
    Tabs: `<div class="ui-tabs" role="tablist"><button role="tab" aria-selected="true">…` — the
    selected state IS `aria-selected`, so what a screen reader announces and what is painted cannot
-   disagree. 44px under EVERY pointer (§9.1 control tier), not only coarse: tabs sit 4px apart, and
-   that gap is only acceptable between targets that are already 44px. */
+   disagree. Polaris Tabs under a mouse (0.12.0): 28px, 12px/550; 8px apart, the §9.1 gap for targets under 44.
+   44px under a finger or at phone width (the rule after these). */
 .ui-tabs {
-  display: flex; gap: var(--ui-space-1); border-bottom: 1px solid var(--ui-border);
+  display: flex; gap: var(--ui-space-2); border-bottom: 1px solid var(--ui-border);
   overflow-x: auto; scrollbar-width: none;
 }
 .ui-tabs > button,
 .ui-tabs > a {
   position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--ui-space-2);
-  min-height: 44px; padding: 0 var(--ui-space-3); border: 0; background: transparent; cursor: pointer;
+  min-height: var(--ui-btn-h); padding: 0 var(--ui-space-3); border: 0; background: transparent; cursor: pointer;
   border-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0;
-  font-family: inherit; font-size: var(--ui-fs-body); font-weight: 500; white-space: nowrap;
+  font-family: inherit; font-size: var(--ui-fs-caption); font-weight: 550; white-space: nowrap;
   color: var(--ui-text-muted);
   transition: color var(--gemboss-transition-fast) ease, background-color var(--gemboss-transition-fast) ease;
 }
@@ -734,13 +741,14 @@ body.ui-resizing::after { content: ""; position: fixed; inset: 0; z-index: 9999;
 .ui-tabs > a { text-decoration: none; }
 /* Tab bằng link (mỗi tab là một URL): `<nav class="ui-tabs"><a aria-current="page">` — cùng hình với tab nút. */
 .ui-tabs > a[aria-current="page"],
-.ui-tabs > button[aria-selected="true"] { color: var(--ui-text-strong); font-weight: 600; }
+.ui-tabs > button[aria-selected="true"] { color: var(--ui-text-strong); }
 .ui-tabs > a[aria-current="page"]::after,
 .ui-tabs > button[aria-selected="true"]::after {
   content: ""; position: absolute; left: var(--ui-space-3); right: var(--ui-space-3); bottom: 0;
   height: 2px; border-radius: var(--gemboss-radius-full); background: var(--ui-accent);
 }
 .ui-tabs > button:disabled { opacity: .5; cursor: not-allowed; }
+@media (pointer: coarse), (max-width: 47.9975em) { .ui-tabs > :is(button, a) { min-height: 44px; } }
 
 /* Table: wrap it — `<div class="ui-table-wrap"><table class="ui-table">` — so a wide table scrolls
    inside its card instead of pushing the page sideways at 320px. Numeric cells take `.is-num`:
@@ -748,16 +756,21 @@ body.ui-resizing::after { content: ""; position: fixed; inset: 0; z-index: 9999;
 .ui-table-wrap {
   overflow-x: auto; max-width: 100%;
   background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg);
+  box-shadow: var(--ui-card-shadow);
 }
 .ui-table { width: 100%; border-collapse: collapse; font-size: var(--ui-fs-body); color: var(--ui-text); }
 .ui-table th,
 .ui-table td {
-  padding: var(--ui-space-2) var(--ui-space-3); text-align: left; vertical-align: middle;
+  padding: var(--ui-space-2) 6px; text-align: left; vertical-align: middle;
   border-bottom: 1px solid var(--ui-border);
 }
-.ui-table th {
-  font-size: var(--gemboss-fs-caption); font-weight: 600; color: var(--ui-text-muted); white-space: nowrap;
-}
+/* Polaris DataTable (13.9.5, measured on /app/analytics 05/10/2026): cells 8px 6px (a row 36), header 12px 6px (45),
+   the first column 12px in from the edge. */
+/* :where() keeps the edge columns at the base rule's weight, so a surface's own `.x-table td { padding }` still wins. */
+.ui-table :is(th, td):where(:first-child) { padding-left: var(--ui-space-3); }
+.ui-table :is(th, td):where(:last-child) { padding-right: var(--ui-space-3); }
+.ui-table th { font-weight: 450; color: var(--ui-text-muted); white-space: nowrap; }
+.ui-table thead th { padding-block: var(--ui-space-3); } /* the column header; a row header (tbody th) is a cell */
 .ui-table tbody tr:last-child > td { border-bottom: 0; }
 .ui-table tbody tr:hover { background: var(--ui-surface-2); }
 .ui-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@@ -766,7 +779,7 @@ body.ui-resizing::after { content: ""; position: fixed; inset: 0; z-index: 9999;
 /* Link nằm thẳng trong ô (tên bản ghi dẫn sang trang chi tiết) là link trong DANH SÁCH: ≥ 24px (WCAG 2.5.8, §9.1).
    Chữ 13px cho hộp 17px; visual-gate đo đỏ ở partner-radar /competitors 01/10/2026. inline-flex giữ nó trên dòng. */
 .ui-table td > a { display: inline-flex; align-items: center; min-height: 24px; }
-.ui-table .ui-sub { display: block; margin-top: 2px; font-size: var(--gemboss-fs-caption); color: var(--ui-text-muted); font-weight: 400; }
+.ui-table .ui-sub { display: block; margin-top: 2px; font-size: var(--ui-fs-caption); color: var(--ui-text-muted); font-weight: 400; }
 
 /* Empty state: `<div class="ui-empty"><p class="ui-empty__title">…</p><p class="ui-empty__body">…</p>
    <button class="ui-btn">…</button></div>`. Says what is missing and what to do next. */
@@ -775,7 +788,7 @@ body.ui-resizing::after { content: ""; position: fixed; inset: 0; z-index: 9999;
   padding: var(--ui-space-4); padding-block: 40px; text-align: center;
   color: var(--ui-text-muted); font-size: var(--ui-fs-body);
 }
-.ui-empty__title { margin: 0; font-size: var(--gemboss-fs-h3); font-weight: 600; color: var(--ui-text-strong); }
+.ui-empty__title { margin: 0; font-size: 14px; line-height: 20px; font-weight: 650; color: var(--ui-text-strong); }
 .ui-empty__body { margin: 0; max-width: 48ch; line-height: 1.5; }
 .ui-empty > .ui-btn { margin-top: var(--ui-space-2); }
 
@@ -2040,6 +2053,19 @@ body.gemboss-assistant-unread .gnav-item.gnav-assistant::after {
 /* Headings get their own line (Polaris heading line-heights are ~1.25-1.4): inheriting the body's 20px made a wrapped 22px
  * title overlap itself (gempress, 0.5.1). */
 :where(h1, h2, h3) { letter-spacing: -0.01em; line-height: 1.3; }
+/* Polaris' heading reset (0.12.0, 05/10/2026): in the admin an <h2> or a <p> with no class is body text with no margin,
+ * because Polaris' global sheet sets `h1…h6, p { margin: 0; font-size: 1em; font-weight: regular }` and every heading
+ * that looks like one is a Text variant. Surfaces had the browser's instead: a bare <h2> at 19.5px bold with 16px margins
+ * sat in GemFactory and taskdesk pages beside kit cards titled 14px. Here, only INSIDE the shell (`.gemboss-platform-
+ * shell`, the AppShell root every surface on the kit renders): a login page or a public page keeps its own type. Never
+ * inside an article the surface shows: `.ui-prose` or `[data-content]` (the contract), and the wrappers the fleet already
+ * uses for rendered HTML, read on 05/10/2026, by exact name (gemcommunity `md-body` and `recap-md`,
+ * content-radar `article-body`, the assistants' `asst-md`; any class containing `prose` or `markdown`, any case, so ProseMirror too). A NEW wrapper: mark it `ui-prose` or
+ * `data-content`. scripts/density.mjs skips exactly this list (ARTICLE); density.test.ts fails if the two differ. A post body keeps the browser's scale. Only an element WITHOUT a class: a surface's `h2.gf-title` that sets only its size keeps the
+ * browser's bold and margins (a zero-specificity author rule still beats the browser's own sheet, review #3787). */
+:where(.gemboss-platform-shell) :where(h1, h2, h3, h4, h5, h6, p):where(:not([class])):not(:where(.ui-prose, [data-content], [class*="prose" i], [class*="markdown" i], .md-body, .recap-md, .asst-md, .article-body) *) {
+  margin: 0; font-size: 1em; font-weight: inherit; line-height: inherit;
+}
 
 .gemboss-topbar-start { display: flex; align-items: center; gap: 8px; min-width: 0; }
 .gemboss-topbar-center { display: flex; justify-content: center; min-width: 0; }
@@ -2081,6 +2107,82 @@ body.gemboss-assistant-unread .gnav-item.gnav-assistant::after {
 }
 .gnav-item.active .gnav-count { background: var(--gemboss-primary); color: var(--gemboss-on-primary); }
 
+/* ── Navigation pending (0.10.0): a click answers on the first frame ─────────────────────────────────────────────
+ * Chris 05/10/2026: content-radar's rail (the icon turns into a spinner the moment you click, sub items too) is the
+ * standard for every surface. Measured 04/10 on content-radar with a server ~280 ms away: nothing on screen changed
+ * for 321-503 ms after a click; with this, 6-8 ms.
+ *
+ * ONE state, three ways to set it, so a React rail, a Next rail and a server-rendered rail look the same:
+ *   - `aria-busy="true"` on the item: RailItem / RailSubItem `pending` (React), kit-plain.js on a followed link;
+ *   - a `.gnav-pending` child: NavLink from `@gemboss/ui/next` (Next's useLinkStatus is only readable INSIDE the
+ *     link, so the link cannot set its own attribute; it renders this status text and `:has()` reads it).
+ * `:is()` is forgiving: a browser without `:has()` still honours the aria-busy half of each rule.
+ * The icon keeps its box (visibility, not display), so the label never moves. Here and not in shell.css: the
+ * admin's shell sheet has <1 KB of first-load headroom, and the admin answers a click with its own holding screen.
+ */
+.gnav-item:is([aria-busy="true"], :has(> .gnav-pending)),
+.gnav-subitem:is([aria-busy="true"], :has(> .gnav-pending)) { cursor: progress; }
+.gnav-item:is([aria-busy="true"], :has(> .gnav-pending)) > .gnav-ico > * { visibility: hidden; }
+.gnav-item:is([aria-busy="true"], :has(> .gnav-pending)) > .gnav-ico::after,
+.gnav-subitem:is([aria-busy="true"], :has(> .gnav-pending))::after,
+.gb-pending-mark {
+  content: ""; display: inline-block; vertical-align: middle; grid-area: 1 / 1; flex: none; box-sizing: border-box;
+  width: 20px; height: 20px; border-radius: 50%;
+  /* the item's own ink, so the spinner follows the active and hover colours */
+  border: 2px solid color-mix(in srgb, currentColor 18%, transparent); border-top-color: currentColor;
+  animation: gnav-spin 0.7s linear infinite;
+}
+/* A sub item has no icon box: a 12px spinner in its 44px indent, just before the label, out of the flow. At the row's end
+ * it would be a third item in a space-between row and push a trailing count to the middle (review #3777). */
+.gnav-subitem:is([aria-busy="true"], :has(> .gnav-pending))::after {
+  position: absolute; left: 22px; top: 50%; margin-top: -6px; width: 12px; height: 12px; border-width: 1.5px;
+}
+@keyframes gnav-spin { to { transform: rotate(360deg); } }
+/* Slower, never off: it is the only sign that the click was heard. */
+@media (prefers-reduced-motion: reduce) {
+  .gnav-item:is([aria-busy="true"], :has(> .gnav-pending)) > .gnav-ico::after,
+  .gnav-subitem:is([aria-busy="true"], :has(> .gnav-pending))::after,
+  .gb-pending-mark { animation-duration: 2s; }
+}
+/* A link in the PAGE (a list row, a card, a tab) opts in with `data-gb-pending`: PendingLink (`@gemboss/ui/next`) or
+ * kit-plain.js put `span.gb-pending-mark` (role=status) inside it while the page loads. "inline" (default): 12px after
+ * the text. "corner": 16px in the top right corner, out of the flow, for a link that wraps a whole card (a grid card
+ * gains no column). Marked by attribute, not class: a surface that colours bare links with `a:not([class])` keeps it. */
+a[data-gb-pending]:has(> .gb-pending-mark), a[data-gb-pending][aria-busy="true"] { cursor: progress; }
+a[data-gb-pending] > .gb-pending-mark { display: inline-block; width: 12px; height: 12px; border-width: 1.5px; margin-left: 6px; vertical-align: -1px; }
+a[data-gb-pending="corner"] { position: relative; }
+a[data-gb-pending="corner"] > .gb-pending-mark { position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; margin: 0; }
+/* RouteHolding (./route-holding.tsx): a route group's loading boundary. The kit's skeleton lines in the content column,
+ * one shape for every route: a title bar, then four lines of falling length (the admin's holding screen). */
+.gb-route-holding { padding-top: 4px; }
+.gb-route-holding .ui-skeleton { gap: 16px; }
+.gb-route-holding__heading { margin: 0 0 20px; font-size: 20px; font-weight: 650; line-height: 1.3; color: var(--gemboss-text); }
+.gb-route-holding .ui-skeleton__line { height: 10px; }
+.gb-route-holding .ui-skeleton__line.gb-route-holding__title { height: 20px; width: 34%; margin-bottom: 8px; }
+.gb-route-holding .ui-skeleton__line:nth-last-child(4) { width: 46%; }
+.gb-route-holding .ui-skeleton__line:nth-last-child(3) { width: 92%; }
+.gb-route-holding .ui-skeleton__line:nth-last-child(2) { width: 78%; }
+.gb-route-holding .ui-skeleton__line:nth-last-child(1) { width: 61%; }
+/* RouteCover: the same frame over the content area from the click until the navigation commits. Shown only while
+ * `html[data-gb-navigating]` (set by the @gemboss/ui/next links while pending). No grace delay: the target is the new
+ * screen within 100 ms of the click, and a 40 ms grace measured 120-132 ms on content-radar's rail (05/10/2026). The
+ * 80 ms fade is what a router cache hit (20-90 ms) sees of it: a faint, partial frame, not a full flash.
+ * z 5: above the outgoing page, below the rail, the topbar (300) and the assistant (290). */
+.gb-route-cover { display: none; }
+html[data-gb-navigating] .gb-route-cover {
+  display: block; position: fixed; inset: 56px 0 0 240px; z-index: 5; overflow: hidden; box-sizing: border-box;
+  padding: 24px; background: var(--gemboss-app-bg); pointer-events: none;
+  animation: gb-route-cover-in 0.08s ease-out both;
+}
+@keyframes gb-route-cover-in { from { opacity: 0; } to { opacity: 1; } }
+@media (max-width: 760px) { html[data-gb-navigating] .gb-route-cover { left: 0; padding: 16px; } }
+@media (prefers-reduced-motion: reduce) { html[data-gb-navigating] .gb-route-cover { animation-duration: 0s; } }
+/* The status text a NavLink renders inside a rail item: read, not seen. */
+.gnav-pending {
+  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
+}
+
 /* ── BrandLockup (./brand.tsx) ─────────────────────────────────────────────────────────────────
  * The admin's `.gemboss-brand-lockup` box (40px tall, 8px padding, hover wash) around the wordmark's
  * own proportions. Not that class itself: its ≤460px rule swaps in a background image at an
@@ -3373,8 +3475,7 @@ body.gemboss-assistant-unread .gnav-item.gnav-assistant::after {
 
    Key-value list: `<dl class="ui-kv"><dt>Owner</dt><dd>Lily</dd>…</dl>` — label column sized to
    its longest label, value column takes the rest and wraps long keys and URLs. */
-.ui-btn--icon { flex: none; width: var(--ui-control-h); padding: 0; }
-.ui-btn--icon.ui-btn--sm { width: 28px; }
+.ui-btn--icon { flex: none; width: var(--ui-btn-h); padding: 0; }
 .ui-btn--icon svg { width: 18px; height: 18px; }
 /* Menu: the SURFACE is the shell's `gemboss-popover-surface` and the rows are the account menu's row (shell.css
    declares `.gemboss-account-menu-item, .ui-menu__item` together), so a kit menu and the account menu on one page
@@ -3391,10 +3492,19 @@ body.gemboss-assistant-unread .gnav-item.gnav-assistant::after {
 .ui-menu__sep { height: 1px; margin: var(--ui-space-1) 0; border: 0; background: var(--ui-border); }
 /* Checkbox: the LABEL is the target; disabled turns both the label and the box to not-allowed. Focus ring in the
    kit's own token (no --p-* here: this file is appended after the export's Polaris resolver runs). */
-.ui-check { display: inline-flex; align-items: center; gap: var(--ui-space-2); min-height: 44px; cursor: pointer; font-size: var(--ui-fs-body); color: var(--ui-text); }
+.ui-check { display: inline-flex; align-items: center; gap: var(--ui-space-2); min-height: 44px; max-width: 100%; overflow-wrap: break-word; cursor: pointer; font-size: var(--ui-fs-body); color: var(--ui-text); }
 .ui-check > input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--ui-accent); cursor: inherit; }
 .ui-check > input:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
 .ui-check:has(> input:disabled) { opacity: .5; cursor: not-allowed; }
+/* 0.9.0: a long run with no spaces (a URL, "clinical/premium/…/utility") breaks inside the label instead of widening
+   the page: gemwatcher Operations overflowed 69px at 320 on one switch description (#375). Three parts: the label is
+   capped at its parent (max-width above), its TEXT child may shrink (min-width 0, the last child only so a badge in
+   front keeps its width), and break-word breaks the run once it cannot fit a line.
+   break-word, NOT anywhere: anywhere also drops the label's min-content, and a flex row then squeezes a short label
+   ("Lock" beside a long band name in GemFactory) into "Lo/ck". Two cases stay the surface's job: the text must be an
+   element (`input + span`; bare text is an anonymous flex item min-width cannot reach), and in a flex ROW the label
+   keeps its min-content, so that row must wrap. */
+.ui-check > :last-child:not(input) { min-width: 0; }
 .ui-label { display: block; margin: 0 0 var(--ui-space-1); font-size: var(--ui-fs-caption); font-weight: 600; color: var(--ui-text-muted); }
 .ui-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--ui-space-2) var(--ui-space-4); margin: 0; font-size: var(--ui-fs-body); }
 .ui-kv > dt { color: var(--ui-text-muted); }
@@ -3456,8 +3566,6 @@ button.ui-card__media, a.ui-card__media { cursor: pointer; }
    </div><div class="ui-modal__actions"><button class="ui-btn">Copy</button></div><button class="ui-modal__close">…` */
 .ui-modal__subtitle { display: block; margin-top: 2px; font-size: var(--ui-fs-caption); line-height: 16px; font-weight: 450; color: var(--ui-text-muted); overflow-wrap: anywhere; }
 .ui-modal__actions { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); }
-/* An icon button in the popup's head or foot is square at the popup's 28 (ui.css gives those buttons 0/12 padding). */
-:is(.ui-modal__head, .ui-modal__foot) .ui-btn--icon { width: 28px; padding: 0; }
 /* A popup taller than the screen: the body scrolls, the head and foot stay, so the actions are always reachable
    (320×568 with a long form put Huỷ/Xoá below the fold, unreachable under the locked page; review #3633). */
 .ui-overlay > .ui-modal { display: flex; flex-direction: column; max-height: calc(100dvh - 40px); }
@@ -3493,8 +3601,8 @@ button.ui-card__media, a.ui-card__media { cursor: pointer; }
    dưới cùng (delta + so với gì). */
 .ui-metrics--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: var(--ui-space-3); margin: 0; }
 .ui-metric--lg { gap: 4px; padding: var(--ui-space-3) var(--ui-space-4); }
-.ui-metric--lg .ui-metric__val { font-size: var(--gemboss-fs-h1, 24px); line-height: 1.1; }
-.ui-metric--lg .ui-metric__lbl { order: -1; font-size: var(--gemboss-fs-body, 14px); }
+.ui-metric--lg .ui-metric__val { font-size: 24px; line-height: 32px; } /* Polaris headingXl, as the admin's analytics cards */
+.ui-metric--lg .ui-metric__lbl { order: -1; font-size: var(--ui-fs-body); } /* bodyMd 13 (0.12: was 14) */
 .ui-metric__foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: var(--gemboss-fs-caption); color: var(--ui-text-muted); }
 @media (max-width: 520px) { .ui-metrics--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
 
@@ -3542,7 +3650,7 @@ button.ui-card__media, a.ui-card__media { cursor: pointer; }
    sau bước đầu mang `__rate` = tỉ lệ đi tiếp từ bước NGAY TRƯỚC (bề mặt tính). Ngang ở khổ rộng, dọc ở ≤ 520px. */
 .ui-funnel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--ui-space-2); margin: 0; padding: 0; list-style: none; }
 .ui-funnel > li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--ui-space-3); border-radius: var(--ui-radius-md); background: var(--ui-surface-2); min-width: 0; }
-.ui-funnel__val { font-size: var(--gemboss-fs-h2, 20px); font-weight: 700; color: var(--ui-text); font-variant-numeric: tabular-nums; line-height: 1.15; }
+.ui-funnel__val { font-size: 20px; font-weight: 700; color: var(--ui-text); font-variant-numeric: tabular-nums; line-height: 24px; } /* Polaris headingLg */
 .ui-funnel__lbl { font-size: var(--gemboss-fs-caption); color: var(--ui-text-muted); overflow-wrap: anywhere; }
 .ui-funnel__rate { order: -1; font-size: var(--gemboss-fs-caption); font-weight: 600; color: var(--ui-series-1); font-variant-numeric: tabular-nums; }
 @media (max-width: 520px) { .ui-funnel { grid-auto-flow: row; } }
@@ -3557,7 +3665,7 @@ button.ui-card__media, a.ui-card__media { cursor: pointer; }
 @media (max-width: 960px) { .ui-grid--2 { grid-template-columns: minmax(0, 1fr); } }
 @media (max-width: 720px) { .ui-grid--3 { grid-template-columns: minmax(0, 1fr); } }
 .ui-section-head { margin: var(--ui-space-4) 0 0; }
-.ui-section-head > h2 { margin: 0; font-size: var(--gemboss-fs-h3, 16px); font-weight: 650; color: var(--ui-text); }
+.ui-section-head > h2 { margin: 0; font-size: 14px; line-height: 20px; font-weight: 650; color: var(--ui-text); } /* Polaris headingMd (0.12: was 16) */
 .ui-section-head > p { margin: 2px 0 0; font-size: var(--gemboss-fs-caption); color: var(--ui-text-muted); }
 
 /* Nhóm nút CHỮ không bao giờ bẻ chữ (03/10/2026, thanh lọc của gemnews ở 390px: "Mọi ngôn ngữ" thành hai dòng, "中文"
@@ -3661,12 +3769,13 @@ button.ui-card__media, a.ui-card__media { cursor: pointer; }
 }
 
 /* Radio: the checkbox's row with `type="radio"` — `<fieldset class="ui-choices"><legend class="ui-label">Plan</legend>
-   <label class="ui-check"><input type="radio" name="plan" checked> Basic</label>…</fieldset>`. */
-.ui-choices { display: grid; gap: 0; margin: 0; padding: 0; border: 0; min-width: 0; }
+   <label class="ui-check"><input type="radio" name="plan" checked><span>Basic</span></label>…</fieldset>`.
+   One minmax(0, 1fr) column: an auto column grows to the longest unbroken word in any label (0.9.0). */
+.ui-choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; border: 0; min-width: 0; }
 .ui-choices > legend { padding: 0; }
 
 /* Switch: a checkbox that reads as on / off, for a setting that applies at once (no Save button).
-   `<label class="ui-check ui-switch"><input type="checkbox" role="switch" checked> Send Monday digest</label>`.
+   `<label class="ui-check ui-switch"><input type="checkbox" role="switch" checked><span>Send Monday digest</span></label>`.
    Track 32×20, thumb 16; the row stays the checkbox's 44px target. */
 .ui-switch > input[type="checkbox"] {
   appearance: none; -webkit-appearance: none; position: relative; width: 32px; height: 20px; margin: 0;
@@ -3806,6 +3915,26 @@ button.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-off
 /* Phone: 11 targets of 44px wrapped into 3-4 rows at 320 (measured). Keep Previous · current · Next; the range wraps under. */
 @media (max-width: 35.9975em) { .ui-pager > a:not([rel]):not([aria-current]):not([aria-disabled]), .ui-pager__gap { display: none; } }
 
+/* 0.12.0: filter chip and card stack, both drawn by hand on every surface the 05/10/2026 density audit read.
+   Filter chip: `<div class="ui-chips"><button type="button" class="ui-chip" aria-pressed="true">Shopify Plus</button>
+   <a class="ui-chip" href="?country=us" aria-current="page">US</a></div>`. Polaris FilterPill's shape (radius 8, a 1px line,
+   dashed until applied) at the Button's density: 28px, 12px/550, so a filter row and a button row are one height.
+   Applied = `aria-pressed="true"` (in place) or `aria-current="page"` (a URL), solid line and the selected tint. */
+.ui-chip {
+  display: inline-flex; align-items: center; justify-content: center; gap: 4px; box-sizing: border-box;
+  height: var(--ui-btn-h, 28px); padding: 0 12px; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius-md);
+  background: var(--ui-surface); color: var(--ui-text); font: inherit; font-size: var(--ui-fs-caption); font-weight: 550;
+  line-height: 16px; white-space: nowrap; text-decoration: none; cursor: pointer;
+}
+.ui-chip:hover { border-style: solid; background: var(--ui-surface-2); }
+.ui-chip:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 1px; }
+.ui-chip:is([aria-pressed="true"], [aria-current="page"]) { border-style: solid; border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent-strong); }
+@media (pointer: coarse), (max-width: 47.9975em) { .ui-chip { height: auto; min-height: 44px; min-width: 44px; } }
+/* Card stack: `<div class="ui-stack"><div class="ui-card">…</div><div class="ui-card">…</div></div>`. 16px between blocks,
+   Polaris BlockStack gap 400, the admin's spacing between cards on a page. `--tight` is 8 (inside a card). */
+.ui-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-4); }
+.ui-stack--tight { gap: var(--ui-space-2); }
+
 /* ═══ @gemboss/ui src/chat.css ═══ */
 /*
  * The chat BODY — what an answer looks like, wherever a GemBoss surface puts a chat (01/10/2026).
@@ -4552,6 +4681,7 @@ dialog.ui-modal.gb-search { width: min(640px, 100%); margin-top: 8vh; max-height
   --gemboss-danger-border: #5c2a24;
   --ui-accent-fg: #0d0d12;
   --ui-warning-fg: #e8c063;
+  --ui-card-shadow: none; /* a dark drop under a dark card is noise */
   --gb-brand-ink: #f2f3f5;
 }
 /* Avatar initials in dark: the tone's light end, so the text clears 4.5:1 on its tinted disc. */