@gemboss/ui 0.10.0 → 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: 527a9099c443fa986e3844442da5497d4623e8a3
- * sources sha256: cf447622a2b99d887e6fa00ecfbc2c11423bbafafb1273411820018baed1e77e
+ * 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; }
@@ -3449,8 +3475,7 @@ html[data-gb-navigating] .gb-route-cover {
 
    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
@@ -3541,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); }
@@ -3578,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)); } }
 
@@ -3627,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; } }
@@ -3642,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, "中文"
@@ -3892,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).
@@ -4638,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. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemboss/ui",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "GemBoss design system for every surface in the fleet: the admin shell (topbar + rail + drawer) as React components, and the admin stylesheet exported as one CSS file.",
   "license": "UNLICENSED",
   "type": "module",

package/src/app-shell.css

@@ -26,6 +26,19 @@
 /* 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; }

package/src/editor.css

@@ -28,6 +28,9 @@
 @keyframes gemboss-editor-enter { from { opacity: 0; } to { opacity: 1; } }
 @keyframes gemboss-editor-toast-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
 @keyframes gemboss-pagepicker-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
+/* The top bar's menus (⋯ More, Publish ▾). Named by `.gemboss-editor-menu` since before 0.9.0 but never defined, so they
+   opened with no motion while the page picker beside them slid in: the same entry as the picker's. */
+@keyframes gemboss-flyout-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
 @keyframes gemboss-statusbar-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
 
 /* Editor is position:fixed and self-contained, so main needs no height/padding —
@@ -206,8 +209,11 @@
   z-index: 500;                       /* above the editor (z-index 400) */
   min-width: 210px;
   padding: 6px;
-  animation: gemboss-flyout-in var(--gemboss-transition-fast) ease both;
+  /* No fill mode: once it has landed the menu holds no animated value (a `both` fill left an identity transform on it). */
+  animation: gemboss-flyout-in var(--gemboss-transition-fast) ease;
 }
+@media (prefers-reduced-motion: reduce) {
+ .gemboss-editor-menu { animation: none; } }
 .gemboss-editor-menu-item {
   display: flex;
   align-items: center;
@@ -244,9 +250,9 @@
    and frame tightly and the preview's top gap matches its gap to the chat sidebar. */
 .gemboss-editor-body { flex: 1; min-height: 0; display: flex; gap: 0; padding: var(--gemboss-editor-inset); box-sizing: border-box; }
 /* Both panels become rounded, bordered cards (design-system surface). The preview's direct
-   child is the .gemboss-editor-preview-pane wrapper (it positions the section-outline overlay),
+   child is the .gemboss-editor-preview-pane wrapper (it positions the overlays: Global styles, the score panel),
    so the card styling lives on the WRAPPER — `overflow: hidden` also clips the iframe + the
-   outline panel to the rounded corners. (Targeting .gemboss-pv here would miss: it's now a
+   overlays to the rounded corners. (Targeting .gemboss-pv here would miss: it's now a
    grandchild inside the wrapper.) */
 .gemboss-editor-body > .gemboss-ec,
 .gemboss-editor-body > .gemboss-editor-preview-pane {
@@ -260,19 +266,15 @@
    never reached the screen and the theme editor's copy of the row carried no class at all. The look below is that
    inline style, written as CSS with the same tokens: the same computed values, one owner.
    The LOOK hangs on the row (`.gemboss-ec-tabs > [role="tab"]`); `.gemboss-ec-tab` is what the pointer blocks size
-   (44px under touch here, the 44px overlay under a mouse in chat.css). The theme editor's tabs wear the look but not
-   `.gemboss-ec-tab` yet, so they stay 36px under touch: adding it is a visible change, left for its own decision. */
-/* OFF THE SPACE SCALE, KNOWINGLY: the row's 10px sides and the tab's 7px padding are the inline style's numbers, carried
-   unchanged so the admin does not move a pixel (the typography gate never read them while they were inline strings).
-   Snapping to the scale (12px, 8px) makes the row 4px wider inside and each tab 2px taller: a visible change, left to
-   its own decision. Named here so it is one edit, not a hunt. */
+   (44px under touch here, the 44px overlay under a mouse in chat.css). Every editor's tabs wear it: the theme editor's
+   did not until 05/10/2026 and stayed 36px under touch while the page and section editors' were 44.
+   Spacing is the scale (`--ui-space-*`, ui.css): the inline style's 10px row sides and 7px tab padding became 12 and 8
+   on 05/10/2026, so under a mouse each tab is 2px taller and the row 4px narrower inside. */
 .gemboss-ec-tabs {
-  --gemboss-ec-tabs-pad-x: 10px;
-  --gemboss-ec-tab-pad: 7px;
-  display: flex; gap: 4px; padding: 8px var(--gemboss-ec-tabs-pad-x); border-bottom: 1px solid var(--gemboss-divider); flex: none;
+  display: flex; gap: var(--ui-space-1); padding: var(--ui-space-2) var(--ui-space-3); border-bottom: 1px solid var(--gemboss-divider); flex: none;
 }
 .gemboss-ec-tabs > [role="tab"] {
-  flex: 1; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: var(--gemboss-ec-tab-pad); border-radius: 8px;
+  flex: 1; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: var(--ui-space-2); border-radius: 8px;
   display: flex; align-items: center; justify-content: center; gap: 6px;
   border: 1px solid transparent; background: transparent; color: var(--gemboss-text-muted); box-shadow: none;
 }
@@ -754,10 +756,11 @@ body.ui-resizing .gemboss-editor-body .gemboss-pv { will-change: flex-basis; }
 .gemboss-pageedit-scope{display:none}}
 .gemboss-pageedit-pv{flex:1;min-width:0;background:var(--gemboss-preview-canvas);display:flex;justify-content:center;overflow:auto;position:relative}
 .gemboss-pageedit-pv .gemboss-pv-frame iframe{width:100%;height:100%;border:0;background:#fff;display:block}
-.gemboss-pageedit-chip{display:flex;align-items:center;gap:8px;margin:0 12px 8px;padding:6px 12px;border-radius:8px;background:rgba(86,97,245,.1);border:1px solid rgba(86,97,245,.3);font-size:12px;color:#3a44de}
+/* Neutral like every other selected thing in the admin (`--gemboss-active-*`), not iris: iris is for focus and links. */
+.gemboss-pageedit-chip{display:flex;align-items:center;gap:8px;margin:0 12px 8px;padding:6px 12px;border-radius:8px;background:var(--gemboss-active-bg);border:1px solid var(--gemboss-divider);font-size:12px;color:var(--gemboss-active-fg)}
 .gemboss-pageedit-chip strong{text-transform:capitalize}
-.gemboss-pageedit-chip button{margin-left:auto;border:0;background:transparent;color:#3a44de;cursor:pointer;font-size:12px}
-/* Copy a winning test shipped onto this page. Amber, not the editor's indigo: this is not a mode the
+.gemboss-pageedit-chip button{margin-left:auto;border:0;background:transparent;color:var(--gemboss-active-fg);cursor:pointer;font-size:12px}
+/* Copy a winning test shipped onto this page. Amber, not the selection chip's neutral: this is not a mode the
    seller turned on, it is a difference between what they are reading and what shoppers are served. */
 .gemboss-pageedit-standing{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 16px;background:rgba(176,125,24,.09);border-bottom:1px solid rgba(176,125,24,.28);font-size:13px;line-height:1.5;color:#7a5710}
 .gemboss-pageedit-standing code{font-size:12px;background:rgba(176,125,24,.14);border-radius:4px;padding:2px 4px}
@@ -771,7 +774,7 @@ body.ui-resizing .gemboss-editor-body .gemboss-pv { will-change: flex-basis; }
 .gemboss-layers-list{flex:1;min-height:0;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:4px}
 .gemboss-layer{display:flex;align-items:center;gap:4px;border:1px solid transparent;border-radius:8px;padding:0 4px 0 6px}
 .gemboss-layer:hover{background:var(--gemboss-hover,rgba(0,0,0,.04))}
-.gemboss-layer.is-sel{border-color:var(--gemboss-primary, #1b1c1e);background:rgba(86,97,245,.06)}
+.gemboss-layer.is-sel{border-color:var(--gemboss-primary, #1b1c1e);background:var(--gemboss-active-bg)}
 .gemboss-layer-main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;background:transparent;border:0;cursor:pointer;text-align:left;padding:8px 4px}
 .gemboss-layer-type{font-size:13px;font-weight:600;color:var(--gemboss-text,#1b1c1e);text-transform:capitalize}
 .gemboss-layer-head{font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted,#686b71);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:195px}
@@ -1043,11 +1046,11 @@ select.gemboss-ei-inp{appearance:none;background-image:linear-gradient(45deg,tra
 .gemboss-guest-signin { font-size: var(--gemboss-fs-body); font-weight: 600; color: var(--gemboss-text-muted); text-decoration: none; }
 .gemboss-guest-signin:hover { color: var(--gemboss-text); }
 .gemboss-guest-keep {
-  border: 0; border-radius: 999px; background: #5661f5; color: #fff; cursor: pointer;
+  border: 0; border-radius: 999px; background: var(--gemboss-primary); color: var(--gemboss-on-primary); cursor: pointer;
   font: inherit; font-size: var(--gemboss-fs-caption); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
   padding: 8px 20px; white-space: nowrap;
 }
-.gemboss-guest-keep:hover { background: #3a44de; }
+.gemboss-guest-keep:hover { background: var(--gemboss-primary-dark); }
 @media (max-width: 720px) {
   .gemboss-guest-note { display: none; }
 }