@gemboss/ui 0.4.2 → 0.6.0

package/gemboss-ui.css

@@ -1,11 +1,11 @@
 /*
  * 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: 1ca4f9ec8573ad9a6d72aad5f8a8e223cbf0e459
- * sources sha256: a715d9e6a38a71817c8fc1389151ce000b89959b7ff1577af3851a953df73eba
+ * gemboss commit: 47291357064c6877d0ebe7d118b6a1b52b1d9d22
+ * sources sha256: 22617cdf59a7330f1285221022e5341d94e5b5e74cf917ce6f863c85733505e1
  * 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)
- *   + 180 rules from packages/ui/src/shell.css (the shared shell)
+ *   + 181 rules from packages/ui/src/shell.css (the shared shell)
  * Polaris --p-* references are resolved to their fallbacks; declarations with no fallback are dropped
  *   (0 dropped).
  */
@@ -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 bodySm(13) which the app had been leaning on for prose. */
+     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. */
   --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 */
@@ -218,7 +218,10 @@
   --ui-success-fg: var(--gemboss-success);
   --ui-warning-fg: var(--gemboss-primary-dark);
   --ui-danger-fg: var(--gemboss-danger-strong);
-  --ui-focus: var(--gemboss-primary, #1b1c1e);
+  /* ONE focus ring for every control (02/10/2026): the admin's, iris — gemboss-shell.css points Polaris'
+     --p-color-border-focus at --gemboss-accent. Before, kit buttons, tabs and checks drew black, fields
+     and selects #005bd3 (Polaris' default, which the export shipped), and the admin drew iris. */
+  --ui-focus: var(--gemboss-accent, #5661f5);
   --ui-radius-sm: 6px;
   --ui-radius-md: 8px;
   --ui-radius-lg: 12px;
@@ -226,7 +229,10 @@
   --ui-space-2: 8px;
   --ui-space-3: 12px;
   --ui-space-4: 16px;
-  --ui-control-h: 34px;
+  /* 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). */
+  --ui-control-h: 32px;
   --ui-fs-body: 13px;
   --ui-fs-caption: 12px;
   /* Content column width for the seller app shell — ONE source of truth for every wide surface
@@ -323,10 +329,10 @@
    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 stays 36px
-   (--ui-control-h), because a select sits in toolbars beside 36px `.ui-btn`s. */
+   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-select {
-  height: 36px; padding: 0 32px 0 12px; max-width: 100%;
+  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;
@@ -338,7 +344,7 @@
 }
 .ui-select:focus { outline: none; }
 .ui-select:focus-visible:not(:disabled) {
-  outline: 2px solid #005bd3; outline-offset: 1px;
+  outline: 2px solid var(--ui-focus); outline-offset: 1px;
   border-color: var(--gemboss-field-line-active);
 }
 .ui-select:disabled { opacity: .5; cursor: not-allowed; }
@@ -349,7 +355,7 @@
    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: 10px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
+  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);
 }
 .ui-tag--accent { background: var(--adm-accent-soft, rgba(20,22,26,.05)); color: var(--adm-accent-fg, var(--ui-accent)); }
@@ -371,7 +377,7 @@
   font-family: inherit; font-size: var(--gemboss-fs-caption, 12px); color: var(--ui-text); text-decoration: none;
 }
 .ui-chips > a.ui-tag--chip:hover { background: var(--ui-surface-2); border-color: var(--ui-text-muted); }
-.ui-chips > a.ui-tag--chip:focus-visible { outline: 2px solid #005bd3; outline-offset: 1px; }
+.ui-chips > a.ui-tag--chip:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 1px; }
 /* Danh sách LỌC dài (chuyên môn, hạng…) dùng ui-chips thay ui-seg: ui-seg không xuống dòng nên tràn ngang ở 320px.
    Ô đang chọn = `aria-current="page"` (lọc là một URL), cùng tông với ui-seg đang chọn. */
 .ui-chips > a.ui-tag--chip[aria-current="page"] { background: var(--ui-accent-soft); border-color: var(--ui-accent); color: var(--ui-accent-strong); font-weight: 600; }
@@ -390,8 +396,8 @@
    `.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. */
 .ui-page-head { margin-bottom: 20px; }
-.ui-page-head h1 { color: var(--ui-text-strong); font-size: 22px; font-weight: 650; letter-spacing: -0.01em; }
-.ui-page-head p { color: var(--ui-text-muted); font-size: 14px; margin-top: 4px; }
+.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 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.
    Đưa lên từ admin `.gemboss-admin-toolbar`. Chỉ BỐ CỤC: ô tìm là `gemboss-field gemboss-field--group`. */
@@ -426,7 +432,7 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
 /* ── 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
    làm. Mỗi tông mang màu chữ riêng (nền tông luôn sáng, kể cả trong admin tối). Không có tông = ghi chú trung tính.
    role="status"/"alert" CHỈ khi thông báo xuất hiện sau khi trang đã tải (vùng live); có sẵn lúc tải thì không role. */
-.ui-notice { padding: 12px 16px; border-radius: var(--ui-radius-md); border: 1px solid var(--ui-border); background: var(--ui-surface-2); color: var(--ui-text); font-size: var(--gemboss-fs-body); }
+.ui-notice { padding: 12px 16px; border-radius: var(--ui-radius-md); border: 1px solid var(--ui-border); background: var(--ui-surface-2); color: var(--ui-text); font-size: var(--ui-fs-body); }
 .ui-notice--warning { background: var(--gemboss-warning-soft); border-color: var(--gemboss-warning-border); color: var(--gemboss-warning); }
 .ui-notice--danger { background: var(--gemboss-danger-soft); border-color: var(--gemboss-danger-border); color: var(--gemboss-danger-strong); }
 .ui-notice--success { background: var(--gemboss-success-soft); border-color: var(--gemboss-success-border); color: var(--gemboss-success-strong); }
@@ -434,19 +440,20 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
 /* ── Phân trang: `<nav class="ui-pager" aria-label="Trang"><a href rel="prev"><span aria-hidden="true">‹</span> Trước</a><span aria-current="page">2 / 9</span>
    <a href rel="next">Sau ›</a></nav>`. Link ≥ 32px (≥ 24px WCAG 2.5.8), 44px dưới ngón tay (khối coarse). */
 .ui-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0; }
-.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(--gemboss-fs-body); }
+.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 #005bd3; outline-offset: 1px; }
+.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); }
 
 /* ── Badge ────────────────────────────────────────────────────────────────────
-   Uppercase mono pill for a status/label (was gemboss-admin-storage-badge). */
+   Polaris' Badge (02/10/2026; was an uppercase mono pill): 12px/550, 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;
-  font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
-  padding: 1px 8px; border-radius: 6px; background: var(--ui-surface-2); color: var(--ui-text-muted);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-}
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: var(--ui-fs-caption); line-height: 16px; font-weight: 550; 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 ────────────────────────────────────────────────────────────────────
    Rendered INLINE (not portaled): a portal escapes the .gemboss-admin-shell token
@@ -476,7 +483,7 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
 }
 .ui-modal__close svg { width: 20px; height: 20px; }
 .ui-modal__close:hover { background: var(--ui-surface-2); color: var(--ui-text); }
-.ui-modal__close:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
+.ui-modal__close:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
 
 /* `size="lg"` — the screen-shaped dialog. Only the HOOK lives here: this sheet is imported by the
    root layout, so every rule in it is paid on every screen, and the geometry of a dialog with one
@@ -500,7 +507,7 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
 }
 .ui-textarea:focus { outline: none; }
 .ui-textarea:focus-visible:not(:disabled) {
-  outline: 2px solid #005bd3; outline-offset: 1px;
+  outline: 2px solid var(--ui-focus); outline-offset: 1px;
   border-color: var(--gemboss-field-line-active);
 }
 .ui-textarea:disabled { opacity: .5; cursor: not-allowed; }
@@ -518,12 +525,13 @@ a.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset:
    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: 36px; height: 36px;
+  display: inline-grid; place-items: center; width: calc(var(--ui-control-h) - 2px); height: calc(var(--ui-control-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(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; }
 /* Lọc / chế độ xem bằng LINK (trang server-render, chọn = đổi URL): `<a aria-current="page">` là ô đang chọn. */
 .ui-seg a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: var(--ui-text-muted); }
 .ui-seg a[aria-current="page"],
@@ -702,7 +710,7 @@ body.ui-resizing::after { content: ""; position: fixed; inset: 0; z-index: 9999;
   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;
   border-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0;
-  font-family: inherit; font-size: var(--gemboss-fs-body); font-weight: 500; white-space: nowrap;
+  font-family: inherit; font-size: var(--ui-fs-body); font-weight: 500; white-space: nowrap;
   color: var(--ui-text-muted);
   transition: color var(--gemboss-transition-fast) ease, background-color var(--gemboss-transition-fast) ease;
 }
@@ -728,7 +736,7 @@ body.ui-resizing::after { content: ""; position: fixed; inset: 0; z-index: 9999;
   overflow-x: auto; max-width: 100%;
   background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg);
 }
-.ui-table { width: 100%; border-collapse: collapse; font-size: var(--gemboss-fs-body); color: var(--ui-text); }
+.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;
@@ -752,7 +760,7 @@ body.ui-resizing::after { content: ""; position: fixed; inset: 0; z-index: 9999;
 .ui-empty {
   display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-2);
   padding: var(--ui-space-4); padding-block: 40px; text-align: center;
-  color: var(--ui-text-muted); font-size: var(--gemboss-fs-body);
+  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__body { margin: 0; max-width: 48ch; line-height: 1.5; }
@@ -811,7 +819,7 @@ input[type="search"]:is(.gemboss-field, .gemboss-field__bare) { -webkit-appearan
 .gemboss-field:hover:not(:disabled),
 .gemboss-control:hover:not(:disabled) { border-color: var(--gemboss-field-line-hover); background-color: var(--gemboss-field-bg-hover); }
 .gemboss-field:focus-visible,
-.gemboss-control:focus-visible { outline: 2px solid #005bd3; outline-offset: 1px; border-color: var(--gemboss-field-line-active); }
+.gemboss-control:focus-visible { outline: 2px solid var(--ui-focus, #5661f5); outline-offset: 1px; border-color: var(--gemboss-field-line-active); }
 .gemboss-field:disabled,
 .gemboss-control:disabled { opacity: 0.5; cursor: not-allowed; }
 /* Polaris' own breakpoint for the same switch: under it a field reads 16px, so iOS does not zoom. */
@@ -840,7 +848,7 @@ textarea.gemboss-field { height: auto; padding: 6px 12px; resize: vertical; }
    rows, the two places a field is made of parts. A media query does not outrank anything; source
    order decided it, and the fix is to say it again after. (/code-review, 23/09/2026.) */
 @media (max-width: 47.9975em) { .gemboss-field--group { min-height: 44px; } }
-.gemboss-field--group:focus-within { outline: 2px solid #005bd3; outline-offset: 1px; border-color: var(--gemboss-field-line-active); }
+.gemboss-field--group:focus-within { outline: 2px solid var(--ui-focus, #5661f5); outline-offset: 1px; border-color: var(--gemboss-field-line-active); }
 /* The colour swatch in a group: FLUSH to the group's left edge and full height — it covers the group's
    1px border top and bottom and its 12px left padding, so it is the whole 44px target the panel's rule
    asks for, rounded by the group's own corner (overflow: hidden), and never clipped. A 44px swatch
@@ -849,7 +857,7 @@ textarea.gemboss-field { height: auto; padding: 6px 12px; resize: vertical; }
 /* ↑ the right edge is what keeps a WHITE swatch visible: without it the block melted into the field (measured). */
 .gemboss-field--group input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
 .gemboss-field--group input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 0; }
-.gemboss-field__bare { flex: 1; min-width: 0; align-self: stretch; padding: 0 12px 0 0; border: 0; border-radius: 0; outline: none; background: transparent; color: inherit; font: inherit; }
+.gemboss-field__bare { flex: 1; min-width: 0; align-self: stretch; margin-block: -1px; /* over the group's 1px border: the input is the 44px target, not 42 (0.5.1) */ padding: 0 12px 0 0; border: 0; border-radius: 0; outline: none; background: transparent; color: inherit; font: inherit; }
 /* …and the placeholder, which "draws nothing" does not cover: the surfaces that used to declare
    their own (the /admin search rows, the settings and palette rows) stopped when they stopped
    owning the box, and without this every bare field would fall back to the browser's grey. */
@@ -1188,6 +1196,10 @@ textarea.gemboss-field { height: auto; padding: 6px 12px; resize: vertical; }
 .gnav-item:hover {
   background: var(--gemboss-nav-hover);
 }
+.gnav-item:focus-visible {
+  outline: 2px solid var(--gemboss-accent);
+  outline-offset: -2px;
+}
 .gnav-item.active {
   color: var(--gemboss-active-fg);
   font-weight: 600;
@@ -2002,6 +2014,19 @@ body.gemboss-assistant-unread .gnav-item.gnav-assistant::after {
  * these elements wins, wherever it sits in the cascade. Re-theme with the token, not a body rule.
  * The admin does not load this file, so its own rendering is untouched. */
 :where(html, body, button) { font-family: var(--gemboss-font-sans); }
+/* …and the rest of Polaris' body text (02/10/2026): bodyMd, 13px on a 20px line, weight 450, the text colour,
+ * antialiased. With the face alone, every surface picked its own size — measured on the sign-in pages that day:
+ * 14, 15 and 16px bodies, one in Lora serif — so every line outside a kit class read differently from the admin.
+ * Same (0,0,0) as above: a surface that sets its own body text still wins, and should delete that rule.
+ * BODY only, never `html`: the root size is what `rem` means, and gemwatcher alone has ~200 rem lengths that a 13px
+ * root would shrink by a fifth (review #3665). Polaris does the same: html stays at the browser's 100%. */
+:where(body) {
+  font-size: 13px; line-height: 20px; font-weight: 450; color: var(--gemboss-text);
+  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+}
+/* 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; }
 
 .gemboss-topbar-start { display: flex; align-items: center; gap: 8px; min-width: 0; }
 .gemboss-topbar-center { display: flex; justify-content: center; min-width: 0; }
@@ -2011,6 +2036,10 @@ body.gemboss-assistant-unread .gnav-item.gnav-assistant::after {
   .gemboss-topbar-center { flex: 1 1 auto; justify-content: flex-start; }
   /* No actions: the empty slot would still take one flex `gap` (8px) off the search at 320px. */
   .gemboss-topbar-end:empty { display: none; }
+  /* Only the search gives. With `min-width: 0` on all three slots, flex shrank them all: the actions slot gave way and its
+   * buttons (justify flex-end) spilled LEFT over the search (two 44px targets, assistant + account, overlapped
+   * partner-radar's search by 15px at 320 and 360), and the start slot squeezed the gem mark to 16px. */
+  .gemboss-topbar-start, .gemboss-topbar-end { flex: 0 0 auto; }
 }
 
 .gnav-heading {
@@ -2051,7 +2080,11 @@ body.gemboss-assistant-unread .gnav-item.gnav-assistant::after {
   overflow: hidden; text-overflow: ellipsis; min-width: 0;
 }
 /* The admin shows only its mark below 460px; so does this. */
-@media (max-width: 460px) { .gb-brand-name { display: none; } }
+@media (max-width: 460px) {
+  .gb-brand-name { display: none; }
+  /* The mark alone is ~21px wide: a 44px target, centred (visual-gate tap_target_link on content-radar at 320, 0.5.1). */
+  .gb-brand { min-width: 44px; height: 44px; justify-content: center; }
+}
 
 /* ── AccountMenu (./account.tsx): its rules live in shell.css since 29/09/2026, because the admin
  * renders AccountMenu too now and loads shell.css, not this file. */
@@ -3162,40 +3195,63 @@ body.gemboss-assistant-unread .gnav-item.gnav-assistant::after {
   .gb-dock-side .gb-dock-sidegrip, .gb-dock-pinside { display: none; }
 }
 
-/* ── AssistantLauncher (02/10/2026): the floating button that opens the assistant, bottom-right ──────────────────────
-   Top-right is the account corner (AccountMenu). Below the dock (290/320) and the topbar (300), above page content; the
-   phone drawer (1000) covers it. 44px floor at every width; text + shortcut on wide screens, the icon alone on phones
-   (the label stays the accessible name). Clears the iPhone home indicator with safe-area insets. */
+/* ── AssistantLauncher: the button that opens the assistant. NOT floating (03/10/2026) ────────────────────────────────
+   0.4.2 floated it bottom-right (z 280). visual-gate on partner-radar prod, 03/10: `content_covered` red at 5 of 6 widths
+   on every page measured (/, /apps, /sources): a fixed button always sits on whatever text scrolls under it, and at
+   scroll 0 that is a table column. GemCommunity had dropped its floating buttons for the same reason (#239). Chris chose
+   "bỏ nút nổi". It now lives where nothing scrolls under it:
+   · `--rail`   wide screens: the last row of the rail (`railBottom`), a full-width primary button. Hidden ≤760px,
+                where the rail is an off-canvas drawer nobody sees until they open it.
+   · `--topbar` phones (≤760px): a 44px icon button in the topbar's `actions`, left of the account chip. Hidden above.
+   The top-right corner stays the ACCOUNT. A surface renders both; exactly one is displayed at any width. */
 .gb-assistant-launcher {
-  position: fixed;
-  right: calc(20px + env(safe-area-inset-right, 0px));
-  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
-  z-index: 280;
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  min-height: 44px;
-  padding: 0 16px;
   border: 0;
-  border-radius: 999px;
-  background: var(--gemboss-primary, #1b1c1e);
-  color: var(--gemboss-on-primary, #fff);
-  font: 600 14px/1 var(--gemboss-font-sans, system-ui, sans-serif);
-  box-shadow: var(--gemboss-shadow-raised, 0 6px 18px rgba(0, 0, 0, 0.18));
   cursor: pointer;
+  font-family: var(--gemboss-font-sans, system-ui, sans-serif);
 }
-.gb-assistant-launcher:hover { background: var(--gemboss-primary-dark, #000); }
-.gb-assistant-launcher:focus-visible { outline: 2px solid var(--gemboss-accent, #5661f5); outline-offset: 2px; }
 .gb-assistant-launcher svg { flex: 0 0 auto; }
+.gb-assistant-launcher:focus-visible { outline: 2px solid var(--gemboss-accent, #5661f5); outline-offset: 2px; }
+.gb-assistant-launcher--rail {
+  width: 100%;
+  min-height: 44px; /* a control, not a list link: §9.1 asks 44 (visual-gate red at 768 with 36) */
+  margin: 8px 0 4px;
+  padding: 0 12px;
+  border-radius: var(--gemboss-radius-md, 8px);
+  background: var(--gemboss-primary, #1b1c1e);
+  color: var(--gemboss-on-primary, #fff);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1;
+  text-align: left;
+}
+.gb-assistant-launcher--rail:hover { background: var(--gemboss-primary-dark, #000); }
+.gb-assistant-launcher--rail .gb-assistant-launcher-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .gb-assistant-launcher-kbd {
   font: inherit; font-size: 11px; opacity: 0.7;
   border: 1px solid currentColor; border-radius: 5px; padding: 1px 5px;
 }
+.gb-assistant-launcher--topbar {
+  display: none;
+  position: relative; /* holds the clipped label: an absolute child of a static button escapes to the nearest positioned box */
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border-radius: var(--gemboss-radius-md, 8px);
+  background: transparent;
+  color: var(--gemboss-text, #1b1c1e);
+}
+.gb-assistant-launcher--topbar:hover, .gb-assistant-launcher--topbar:active { background: var(--gemboss-hover, #eceef2); }
+.gb-assistant-launcher--topbar .gb-assistant-launcher-label, .gb-assistant-launcher--topbar .gb-assistant-launcher-kbd {
+  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
+}
 @media (max-width: 760px) {
-  .gb-assistant-launcher { min-width: 52px; min-height: 52px; padding: 0; justify-content: center; }
-  .gb-assistant-launcher-label, .gb-assistant-launcher-kbd {
-    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
-  }
+  .gb-assistant-launcher--rail { display: none; }
+  .gb-assistant-launcher--topbar { display: inline-flex; }
 }
 
 /* ═══ @gemboss/ui src/kit-plain.css ═══ */
@@ -3278,7 +3334,7 @@ body.gemboss-assistant-unread .gnav-item.gnav-assistant::after {
 .ui-link:hover,
 .ui-prose a:not([class]):hover { color: var(--gemboss-accent, #5661f5); text-decoration-thickness: 2px; }
 .ui-link:focus-visible,
-.ui-prose a:not([class]):focus-visible { outline: 2px solid var(--ui-focus, #005bd3); outline-offset: 2px; border-radius: 2px; }
+.ui-prose a:not([class]):focus-visible { outline: 2px solid var(--ui-focus, #5661f5); outline-offset: 2px; border-radius: 2px; }
 
 .ui-card--media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
 .ui-card__media {
@@ -3287,7 +3343,7 @@ body.gemboss-assistant-unread .gnav-item.gnav-assistant::after {
 }
 .ui-card__media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
 button.ui-card__media, a.ui-card__media { cursor: pointer; }
-.ui-card__media:focus-visible { outline: 2px solid var(--ui-focus, #005bd3); outline-offset: -2px; }
+.ui-card__media:focus-visible { outline: 2px solid var(--ui-focus, #5661f5); outline-offset: -2px; }
 /* justify-items: start: a tag or a button in the body keeps its own width instead of stretching across the card. */
 .ui-card__body { display: grid; justify-items: start; gap: var(--ui-space-2, 8px); padding: var(--ui-space-3, 12px) var(--ui-space-4, 16px); min-width: 0; }
 .ui-card__foot {
@@ -3297,8 +3353,8 @@ button.ui-card__media, a.ui-card__media { cursor: pointer; }
 }
 
 /* Popup body and foot: `<div class="ui-modal__body">…</div><div class="ui-modal__foot"><button class="ui-btn">…</button></div>`.
-   The admin's Modal.tsx pads its own children, so ui.css never styled these; every non-React surface padded them by
-   hand (GemFactory: 16/20 and a hairline above the actions). kit-plain.js's openModal writes exactly this shape. */
+   ui.css never styled these, and the admin does not load this file: its Modal.tsx children carry their own padding
+   (or none). Every non-React surface padded them by hand (GemFactory: 16/20 and a hairline above the actions). kit-plain.js's openModal writes exactly this shape. */
 .ui-modal__body { padding: 16px 20px; }
 .ui-modal__foot {
   display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
@@ -3416,6 +3472,225 @@ button.ui-card__media, a.ui-card__media { cursor: pointer; }
    thoại trình duyệt máy tính vẫn báo `fine`, nên nâng theo khổ như ui-btn--icon ở trên. */
 @media (pointer: coarse), (max-width: 47.9975em) { .ui-seg :is(button, a) { height: 44px; min-height: 44px; } }
 
+/* ── Polaris parity: the primitives every surface was drawing for itself (02/10/2026) ──────────────────────
+   An audit of the six surfaces on the package (gemwatcher, GemFactory, gempress, gemcare, partner-radar,
+   content-radar) found the same gaps re-filled six ways: no destructive button (four surfaces fell back to the
+   browser's `confirm()`), one-tone badges, banners as bare colour blocks, hand-made radio / switch / tooltip /
+   spinner, and help and error text under a field in five sizes. The admin has all of them from Polaris; this is
+   the same shape in plain CSS, with Polaris' measurements and GemBoss' tokens (the danger / success / warning
+   set the kit's tags and notices already use). The admin does not load this file. */
+
+/* Destructive button: `ui-btn ui-btn--critical` (red text on the default button) and
+   `ui-btn ui-btn--primary ui-btn--critical` (red fill), Polaris' `tone="critical"` in both variants. Red text is
+   --gemboss-danger-strong: 7.3:1 on white, 5.7:1 on the hover ground (shell.css says why not --gemboss-danger). */
+.ui-btn--critical { color: var(--gemboss-danger-strong); }
+.ui-btn--critical:hover { background: var(--gemboss-danger-soft); color: var(--gemboss-danger-strong); }
+.ui-btn--primary.ui-btn--critical { background: var(--gemboss-danger); border-color: var(--gemboss-danger); color: var(--gemboss-on-primary); }
+.ui-btn--primary.ui-btn--critical:hover { background: var(--gemboss-danger-strong); border-color: var(--gemboss-danger-strong); color: var(--gemboss-on-primary); }
+.ui-btn--critical:focus-visible { outline-color: var(--gemboss-danger-strong); }
+
+/* Under a thumb, and at phone WIDTH (a desktop browser at 320px reports pointer: fine), EVERY kit button is a 44px
+   control, the compact one included: §9.1 has no density exception, and GemFactory, gempress and gemcare each
+   restated this floor for `--sm` themselves. ui.css's coarse block leaves `--sm` alone for the admin's own
+   settings page; this file is not loaded there. */
+@media (pointer: coarse), (max-width: 47.9975em) {
+  .ui-btn, .ui-btn.ui-btn--sm { min-height: 44px; }
+  .ui-select.ui-select { min-height: 44px; }
+  /* A target is an AREA: the compact icon button (28 wide) and an icon segment (30) grow sideways as well. */
+  .ui-btn--icon.ui-btn--sm, .ui-seg :is(button, a):not(.is-text) { min-width: 44px; }
+}
+
+/* Badge tones: `<span class="ui-badge ui-badge--success">Active</span>`. Polaris' tones on GemBoss' soft grounds (Polaris' `attention` is `--warning` here: the fleet has one amber).
+   `ui-badge--dot` puts a status dot before the label (filled = done, the tone's colour). */
+.ui-badge--success { background: var(--gemboss-success-soft); color: var(--gemboss-success-strong); }
+.ui-badge--warning { background: var(--gemboss-warning-soft); color: var(--gemboss-warning); }
+.ui-badge--critical { background: var(--gemboss-danger-soft); color: var(--gemboss-danger-strong); }
+.ui-badge--info { background: var(--gemboss-accent-soft); color: var(--gemboss-accent-strong); }
+.ui-badge--dot::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+
+/* Banner: Polaris' in-page Banner. A tone strip with an icon and a title, a body, optional actions, optional
+   dismiss. `ui-notice` stays for a one-line note; a banner is for something the person must read or act on.
+   <div class="ui-banner ui-banner--warning" role="status">
+     <div class="ui-banner__head"><svg class="ui-banner__icon" …/><h3 class="ui-banner__title">Slack token expired</h3>
+       <button type="button" class="ui-banner__close" aria-label="Dismiss">…</button></div>
+     <div class="ui-banner__body"><p>Monday's digest will not send.</p>
+       <div class="ui-banner__actions"><a class="ui-btn" href>Reconnect</a></div></div></div>
+   No tone = neutral. role="status" / "alert" only when it appears after the page loaded. */
+.ui-banner {
+  --ui-banner-bg: var(--ui-surface-2); --ui-banner-fg: var(--ui-text);
+  border-radius: var(--ui-radius-lg); overflow: hidden; background: var(--ui-surface); color: var(--ui-text);
+  box-shadow: 0 0 0 1px var(--ui-border), 0 3px 1px -1px rgba(26, 26, 26, 0.07);
+  font-size: var(--ui-fs-body); line-height: 20px;
+}
+.ui-banner--success { --ui-banner-bg: var(--gemboss-success-soft); --ui-banner-fg: var(--gemboss-success-strong); }
+.ui-banner--warning { --ui-banner-bg: var(--gemboss-warning-soft); --ui-banner-fg: var(--gemboss-warning); }
+.ui-banner--critical { --ui-banner-bg: var(--gemboss-danger-soft); --ui-banner-fg: var(--gemboss-danger-strong); }
+.ui-banner--info { --ui-banner-bg: var(--gemboss-accent-soft); --ui-banner-fg: var(--gemboss-accent-strong); }
+.ui-banner__head { display: flex; align-items: center; gap: var(--ui-space-2); min-height: 32px; padding: 6px var(--ui-space-3); background: var(--ui-banner-bg); color: var(--ui-banner-fg); }
+.ui-banner__icon { flex: none; width: 20px; height: 20px; fill: currentColor; }
+.ui-banner__title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--ui-fs-body); font-weight: 650; line-height: 20px; }
+.ui-banner__close {
+  flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; margin: -6px -8px -6px 0;
+  border: 0; border-radius: var(--ui-radius-md); background: transparent; color: inherit; cursor: pointer;
+}
+.ui-banner__close:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
+.ui-banner__close:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
+.ui-banner__close svg { width: 16px; height: 16px; }
+.ui-banner__body { padding: var(--ui-space-3) var(--ui-space-4); }
+.ui-banner__body > :first-child { margin-top: 0; }
+.ui-banner__body > :last-child { margin-bottom: 0; }
+.ui-banner__actions { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); margin-top: var(--ui-space-3); }
+@media (pointer: coarse), (max-width: 47.9975em) { .ui-banner__close { width: 44px; height: 44px; margin: -12px -12px -12px 0; } }
+
+/* Help and error text under a field, Polaris' Labelled help text and InlineError:
+   <label class="ui-label" for="x">Domain</label><input id="x" class="gemboss-field gemboss-field--tall"
+     aria-describedby="x-help x-err" aria-invalid="true"><p class="ui-help" id="x-help">Without https://</p>
+   <p class="ui-error" id="x-err">This store is already tracked.</p>
+   aria-invalid paints the field in the critical tone; the message says what to do, not only what is wrong. */
+.ui-help { margin: var(--ui-space-1) 0 0; font-size: var(--ui-fs-body); line-height: 20px; color: var(--ui-text-muted); }
+.ui-error:empty { display: none; }   /* a placeholder kept for aria-describedby draws no icon */
+.ui-error { display: flex; gap: 6px; margin: var(--ui-space-1) 0 0; font-size: var(--ui-fs-body); line-height: 20px; color: var(--gemboss-danger-strong); }
+.ui-error::before {
+  content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; background: currentColor;
+  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-.75 4h1.5v5.5h-1.5V6Zm.75 9a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/></svg>") center / contain no-repeat;
+          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-.75 4h1.5v5.5h-1.5V6Zm.75 9a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/></svg>") center / contain no-repeat;
+}
+.gemboss-field[aria-invalid="true"], .gemboss-field--group:has([aria-invalid="true"]),
+.ui-select[aria-invalid="true"], .ui-textarea[aria-invalid="true"] {
+  border-color: var(--gemboss-danger-strong); background-color: var(--gemboss-danger-soft);
+}
+
+/* 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; }
+.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>`.
+   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;
+  border-radius: var(--gemboss-radius-full); background: var(--gemboss-field-line); /* 3.5:1 on white, WCAG 1.4.11 */ transition: background-color var(--gemboss-transition-fast) ease;
+}
+.ui-switch > input[type="checkbox"]::before {
+  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
+  background: var(--gemboss-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform var(--gemboss-transition-fast) ease;
+}
+.ui-switch > input[type="checkbox"]:checked { background: var(--ui-accent); }
+.ui-switch > input[type="checkbox"]:checked::before { transform: translateX(12px); }
+@media (prefers-reduced-motion: reduce) { .ui-switch > input[type="checkbox"], .ui-switch > input[type="checkbox"]::before { transition: none; } }
+
+/* Tooltip: a SHORT label for an icon-only control, shown on hover and keyboard focus. Not for anything the person
+   needs to act on (a touch screen never hovers).
+   <span class="ui-tooltip"><button class="ui-btn ui-btn--icon" aria-describedby="t1" aria-label="Archive">…</button>
+     <span class="ui-tooltip__bubble" role="tooltip" id="t1">Archive</span></span>   `--end` aligns it right. */
+.ui-tooltip { position: relative; display: inline-flex; }
+.ui-tooltip__bubble {
+  position: absolute; z-index: 30; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
+  width: max-content; max-width: 240px; padding: 4px 8px; border-radius: var(--ui-radius-md);
+  background: var(--ui-surface); color: var(--ui-text); font-size: var(--ui-fs-body); line-height: 20px; font-weight: 450;
+  box-shadow: 0 8px 16px -4px rgba(26, 26, 26, 0.22), 0 0 0 1px var(--ui-border);
+  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--gemboss-transition-fast) ease;
+}
+.ui-tooltip--end .ui-tooltip__bubble { left: auto; right: 0; transform: none; }
+.ui-tooltip:hover > .ui-tooltip__bubble, .ui-tooltip:focus-within > .ui-tooltip__bubble { opacity: 1; visibility: visible; }
+
+/* Spinner: `<span class="ui-spinner" role="status"><span class="ui-sr-only">Loading…</span></span>`, 20px
+   (Polaris small); `--lg` is 44px. Reduced motion turns it slower, never off: it is the only sign of waiting. */
+.ui-spinner {
+  display: inline-block; flex: none; width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%;
+  border: 2px solid color-mix(in srgb, var(--ui-text) 18%, transparent); border-top-color: var(--ui-text);
+  animation: ui-spin 0.7s linear infinite; vertical-align: middle;
+}
+.ui-spinner--lg { width: 44px; height: 44px; border-width: 4px; }
+@keyframes ui-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .ui-spinner { animation-duration: 2s; } }
+
+/* Progress: `<progress class="ui-progress" value="37" max="100" aria-label="Import">37%</progress>`, 8px, the
+   primary fill (Polaris' small ProgressBar). Tones: `--success`, `--critical`. */
+.ui-progress { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 8px; border: 0; border-radius: var(--gemboss-radius-full); overflow: hidden; background: var(--gemboss-divider); color: var(--ui-accent); }
+.ui-progress::-webkit-progress-bar { background: var(--gemboss-divider); border-radius: inherit; }
+.ui-progress::-webkit-progress-value { background: currentColor; border-radius: inherit; }
+.ui-progress::-moz-progress-bar { background: currentColor; border-radius: inherit; }
+.ui-progress--success { color: var(--gemboss-success); }
+.ui-progress--critical { color: var(--gemboss-danger); }
+
+/* Wider popup: `openModal({ className: "ui-modal--wide" })`, Polaris' default Modal (620px). The kit's own 460 is
+   Polaris' small step plus one; a form with two columns or a table needs this one. */
+.ui-modal--wide { width: min(620px, 100%); }
+
+/* Native popup: `<dialog class="ui-modal">` opened with `showModal()`, for React (and other) surfaces that do not load
+   kit-plain.js. The browser does what openModal does by hand: Escape closes it, the page behind is inert, it sits in
+   the top layer above the shell's topbar. Same head / body / foot markup; `::backdrop` is the kit's overlay. gemcare
+   and content-radar already used `<dialog>`, each with its own width, padding and backdrop (02/10/2026: four shapes,
+   420 to 760 wide). Close on a backdrop click yourself: a click whose target IS the dialog landed outside the panel.
+   `<dialog class="ui-modal" aria-labelledby="t"><div class="ui-modal__head"><div class="ui-modal__title" id="t">…</div>
+   <button type="button" class="ui-modal__close" aria-label="Close">…</button></div><div class="ui-modal__body">…</div>
+   <div class="ui-modal__foot">…</div></dialog>` */
+dialog.ui-modal { padding: 0; max-width: calc(100% - 40px); max-height: calc(100dvh - 40px); color: var(--ui-text); }
+dialog.ui-modal[open] { display: flex; flex-direction: column; }
+dialog.ui-modal::backdrop { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px); }
+
+/* ── 0.5.1: what the first surfaces on 0.5.0 still drew themselves (GemFactory, content-radar, 03/10/2026) ─────────── */
+
+/* At phone width a short compact button ("Bỏ") was 44 tall but 41 wide: a target is an area. */
+@media (pointer: coarse), (max-width: 47.9975em) { .ui-btn.ui-btn--sm { min-width: 44px; } }
+
+/* A long label in a badge ("Đã dùng 1 lần + 4 bài cùng nguồn · 2 Hot News") wraps instead of running out of its card. */
+.ui-badge--wrap { white-space: normal; overflow-wrap: anywhere; line-height: 16px; }
+
+/* Page head with actions on the right, wrapping under the title when narrow:
+   `<div class="ui-page-head ui-page-head--actions"><div><h1>…</h1><p>…</p></div><div class="ui-page-head__actions">
+   <button class="ui-btn ui-btn--primary">…</button></div></div>`. */
+.ui-page-head--actions { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; }
+.ui-page-head--actions > :first-child { min-width: 0; }
+.ui-page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); }
+
+/* Chips that TOGGLE (a filter applied in place, no URL): `<div class="ui-chips"><button type="button" class="ui-tag
+   ui-tag--chip" aria-pressed="true">CRO</button>…`. Same box as the link chips (ui.css); pressed = the link's current. */
+.ui-chips > button.ui-tag--chip {
+  min-height: 28px; padding: 4px 12px; border-radius: var(--ui-radius-md, 8px); cursor: pointer;
+  font-family: inherit; font-size: var(--gemboss-fs-caption, 12px); color: var(--ui-text);
+}
+.ui-chips > button.ui-tag--chip:hover { background: var(--ui-surface-2); border-color: var(--ui-text-muted); }
+.ui-chips > button.ui-tag--chip:focus-visible { outline: 2px solid var(--ui-focus, #5661f5); outline-offset: 1px; }
+.ui-chips > button.ui-tag--chip[aria-pressed="true"] { background: var(--ui-accent-soft); border-color: var(--ui-accent); color: var(--ui-accent-strong); font-weight: 600; }
+@media (pointer: coarse), (max-width: 47.9975em) { .ui-chips > button.ui-tag--chip { min-height: 44px; } }
+
+/* Chat at phone WIDTH (gemwatcher's assistant, measured 03/10/2026): the composer read 14px (iOS zooms the page on tap
+   below 16) and "new chat" was 35px wide under a fine pointer. shell.css raises the latter under `pointer: coarse`; a
+   desktop window at 390px reports fine. Here and not in chat.css / shell.css: the admin's first-load budget. */
+@media (max-width: 47.9975em) {
+  /* Class doubled: chat.css is appended AFTER this file in gemboss-ui.css, so a same-weight rule there would win. */
+  .gemboss-ec-input.gemboss-ec-input textarea { font-size: 16px; }
+  .gemboss-assistant-collapse, .gemboss-assistant-newchat { min-height: 44px; min-width: 44px; }
+}
+
+/* Segmented buttons that say their state the accessible way: `aria-pressed="true"` looks like `.active` (ui-tabs reads
+   aria-selected already; gemcare had to set both on every group). */
+.ui-seg button[aria-pressed="true"] { background: var(--ui-accent-soft); color: var(--ui-accent-strong); }
+
+/* Read-only field: visibly not editable (the admin's field has no such state; gempress kept its own `.field[readonly]`).
+   The attribute doubled = (0,3,0), so it also holds over the field's own hover rule, which comes earlier. */
+:is(.gemboss-field, .ui-textarea)[readonly][readonly] { background: var(--ui-surface-2); border-color: var(--ui-border); cursor: default; }
+
+/* A popup whose body and foot sit inside one <form>: the form takes no box, so `.ui-modal > .ui-modal__body` (the
+   scrolling body) and the pinned foot still lay out as the popup's own children (gemcare's escalate form, 0.5.1). */
+.ui-modal > form { display: contents; }
+.ui-modal > form > .ui-modal__head, .ui-modal > form > .ui-modal__foot { flex: none; }
+.ui-modal > form > .ui-modal__body { flex: 1 1 auto; min-height: 0; overflow: auto; }
+
+/* A metric that FILTERS the view below it, as a toggle: `<button type="button" class="ui-metric" aria-pressed="true">`
+   (gemwatcher's Radar cards: as links to the same hash, Cmd-click opened an unfiltered tab, Space did nothing and the
+   chosen card was told by colour alone). A metric link that is the current view: `a.ui-metric[aria-current="page"]`.
+   Selected = iris edge, the shell's "this one" colour. */
+button.ui-metric { font: inherit; text-align: left; color: inherit; cursor: pointer; }
+button.ui-metric:hover { border-color: var(--ui-text-muted); }
+button.ui-metric:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 1px; }
+/* Class doubled: the chosen card is usually the one under the pointer, and `button.ui-metric:hover` (0,2,1) would
+   repaint its edge grey the moment it is clicked (measured on gemwatcher Radar). */
+.ui-metric.ui-metric:is([aria-pressed="true"], [aria-current="page"]) { border-color: var(--gemboss-accent); box-shadow: inset 0 0 0 1px var(--gemboss-accent); }
+
 /* ═══ @gemboss/ui src/chat.css ═══ */
 /*
  * The chat BODY — what an answer looks like, wherever a GemBoss surface puts a chat (01/10/2026).
@@ -3774,7 +4049,7 @@ button.ui-card__media, a.ui-card__media { cursor: pointer; }
  * chat can sit in a 380px sidebar — and capped in height so five thumbnails read as a shortlist, not
  * five screens. The link around it is the tap target: keyboard focus has to be visible on it. */
 .gemboss-md-imglink { display: inline-block; max-width: 100%; margin: 4px 0 8px; border-radius: 8px; line-height: 0; }
-.gemboss-md-imglink:focus-visible { outline: 2px solid var(--gemboss-focus, #005bd3); outline-offset: 2px; }
+.gemboss-md-imglink:focus-visible { outline: 2px solid var(--gemboss-focus, var(--ui-focus, #5661f5)); outline-offset: 2px; }
 .gemboss-md-img {
   display: block;
   max-width: 100%;
@@ -3960,4 +4235,4 @@ button.ui-card__media, a.ui-card__media { cursor: pointer; }
 .gemboss-ec-stop svg { width: 12px; height: 12px; fill: currentColor; }
 .gemboss-ec-stop:disabled { opacity: 0.6; cursor: default; }
 .gemboss-ec-stop:hover { filter: brightness(1.08); }
-.gemboss-ec-stop:focus-visible { outline: 2px solid var(--gemboss-focus, #005bd3); outline-offset: 2px; }
+.gemboss-ec-stop:focus-visible { outline: 2px solid var(--gemboss-focus, var(--ui-focus, #5661f5)); outline-offset: 2px; }