@gemboss/ui 0.12.0 → 0.21.0

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@gemboss/ui",
-  "version": "0.12.0",
+  "version": "0.21.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",
   "sideEffects": [
     "*.css",
-    "./src/kit-plain.js"
+    "./src/kit-plain.js",
+    "./src/editor-plain.js"
   ],
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -21,6 +22,14 @@
     "./chat.css": "./src/chat.css",
     "./chat-composer.css": "./src/chat-composer.css",
     "./editor.css": "./src/editor.css",
+    "./collections.css": "./src/collections.css",
+    "./reactions.css": "./src/reactions.css",
+    "./reactions-data": "./src/reactions-data.ts",
+    "./editor": "./src/editor/index.ts",
+    "./editor/swatch": "./src/editor/swatch.ts",
+    "./segmented": "./src/segmented.tsx",
+    "./editor/css-url": "./src/editor/css-url.ts",
+    "./editor-plain.js": "./src/editor-plain.js",
     "./auth.css": "./src/auth.css",
     "./kit-plain.css": "./src/kit-plain.css",
     "./kit-plain.js": "./src/kit-plain.js",
@@ -37,18 +46,21 @@
     "src/**/*.tsx",
     "src/*.css",
     "src/kit-plain.js",
+    "src/editor-plain.js",
     "src/icon.svg",
     "!src/**/*.test.*",
     "gemboss-ui.css",
     "catalog/index.html",
+    "catalog/editor.html",
     "README.md",
     "CHANGELOG.md"
   ],
   "scripts": {
     "build:css": "node scripts/build-css.mjs",
-    "prepack": "node scripts/build-css.mjs && node scripts/build-catalog.mjs",
+    "stage": "node scripts/stage.mjs",
+    "weight": "node scripts/weight-gate.mjs",
     "typecheck": "tsc -p tsconfig.json --noEmit",
-    "catalog": "node scripts/build-css.mjs && node scripts/build-catalog.mjs",
+    "catalog": "node scripts/build-css.mjs && node scripts/build-catalog.mjs && node scripts/build-catalog-editor.mjs",
     "fleet": "node scripts/fleet.mjs"
   },
   "peerDependencies": {

package/src/app-shell.css

@@ -1,256 +1 @@
-/* Styles for the parts of the shell the PACKAGE owns — `AppShell`'s three topbar slots,
- * `RailHeading`, `RailCount`. Everything else (rail, topbar, drawer, tokens, kit) is the admin's
- * own CSS, exported by apps/admin/scripts/export-ui-css.mjs and concatenated ahead of this file into
- * `gemboss-ui.css`. The admin does not load this file: it composes the shell itself and has no
- * slots, headings or pills of this kind.
- *
- * Built only from --gemboss-* tokens, so a palette change in gemboss-tokens.css reaches it. */
-
-/* The base font. The admin's comes from Polaris, which no other surface loads, so without this rule
- * every surface on gemboss-ui.css rendered in the browser's default serif. Same elements Polaris
- * sets (html, body, button), same stack (--gemboss-font-sans resolves to Polaris's
- * --p-font-family-sans fallback). `:where()` keeps it at (0,0,0): any rule a surface writes for
- * 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; }
-/* 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; }
-.gemboss-topbar-end { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
-@media (max-width: 760px) {
-  /* The topbar is one flex row here: the middle slot takes what is left. Basis 0, not auto: with `auto` the search's own
-   * width (up to 520px) was its claim, so the other slots had to give way to it (0.6.0 pinned them instead, see below). With
-   * 0 it only takes what the others leave, down to a 96px floor: an input with its icon still reads as search. */
-  .gemboss-topbar-center { flex: 1 1 0; min-width: 96px; justify-content: flex-start; }
-  .gemboss-topbar-center:empty { min-width: 0; }
-  /* No actions: the empty slot would still take one flex `gap` (8px) off the search at 320px. */
-  .gemboss-topbar-end:empty { display: none; }
-  /* The actions never give: with `min-width: 0` the slot shrank and its buttons (justify flex-end) spilled LEFT over the
-   * search (assistant + account, 15px over partner-radar's search at 320 and 360, 0.6.0).
-   * The start slot gives LAST, after the search reaches its floor: the brand name ellipsizes (.gb-brand-name) instead of
-   * the account chip leaving the screen. 0.6.0 pinned it (`flex: 0 0 auto`) and a 30-character brand at 461px pushed the
-   * chip 44px past the right edge (review #3690). The menu button and the mark keep their 44px. */
-  .gemboss-topbar-end { flex: 0 0 auto; }
-  .gemboss-topbar-start { flex: 0 1 auto; }
-  .gemboss-topbar-start > .gemboss-mobile-menu-btn { flex: 0 0 auto; }
-  .gemboss-topbar-start > .gb-brand { min-width: 44px; }
-}
-
-.gnav-heading {
-  padding: 10px 12px 4px;
-  font-size: var(--gemboss-fs-micro); font-weight: 600; line-height: 1.2;
-  letter-spacing: 0.08em; text-transform: uppercase;
-  color: var(--gemboss-text-muted);
-}
-.gnav-scroll > .gnav-heading:first-child,
-.gnav-scroll > .gnav-section:first-child > .gnav-heading:first-child { padding-top: 2px; }
-
-.gnav-count {
-  margin-left: auto; flex: 0 0 auto; min-width: 20px; padding: 0 6px;
-  border-radius: var(--gemboss-radius-full);
-  background: var(--gemboss-hover); color: var(--gemboss-text-muted);
-  font-size: var(--gemboss-fs-micro); font-weight: 700; line-height: 18px;
-  text-align: center; font-variant-numeric: tabular-nums;
-}
-.gnav-item.active .gnav-count { background: var(--gemboss-primary); color: var(--gemboss-on-primary); }
-
-/* ── Navigation pending (0.10.0): a click answers on the first frame ─────────────────────────────────────────────
- * Chris 05/10/2026: content-radar's rail (the icon turns into a spinner the moment you click, sub items too) is the
- * standard for every surface. Measured 04/10 on content-radar with a server ~280 ms away: nothing on screen changed
- * for 321-503 ms after a click; with this, 6-8 ms.
- *
- * ONE state, three ways to set it, so a React rail, a Next rail and a server-rendered rail look the same:
- *   - `aria-busy="true"` on the item: RailItem / RailSubItem `pending` (React), kit-plain.js on a followed link;
- *   - a `.gnav-pending` child: NavLink from `@gemboss/ui/next` (Next's useLinkStatus is only readable INSIDE the
- *     link, so the link cannot set its own attribute; it renders this status text and `:has()` reads it).
- * `:is()` is forgiving: a browser without `:has()` still honours the aria-busy half of each rule.
- * The icon keeps its box (visibility, not display), so the label never moves. Here and not in shell.css: the
- * admin's shell sheet has <1 KB of first-load headroom, and the admin answers a click with its own holding screen.
- */
-.gnav-item:is([aria-busy="true"], :has(> .gnav-pending)),
-.gnav-subitem:is([aria-busy="true"], :has(> .gnav-pending)) { cursor: progress; }
-.gnav-item:is([aria-busy="true"], :has(> .gnav-pending)) > .gnav-ico > * { visibility: hidden; }
-.gnav-item:is([aria-busy="true"], :has(> .gnav-pending)) > .gnav-ico::after,
-.gnav-subitem:is([aria-busy="true"], :has(> .gnav-pending))::after,
-.gb-pending-mark {
-  content: ""; display: inline-block; vertical-align: middle; grid-area: 1 / 1; flex: none; box-sizing: border-box;
-  width: 20px; height: 20px; border-radius: 50%;
-  /* the item's own ink, so the spinner follows the active and hover colours */
-  border: 2px solid color-mix(in srgb, currentColor 18%, transparent); border-top-color: currentColor;
-  animation: gnav-spin 0.7s linear infinite;
-}
-/* A sub item has no icon box: a 12px spinner in its 44px indent, just before the label, out of the flow. At the row's end
- * it would be a third item in a space-between row and push a trailing count to the middle (review #3777). */
-.gnav-subitem:is([aria-busy="true"], :has(> .gnav-pending))::after {
-  position: absolute; left: 22px; top: 50%; margin-top: -6px; width: 12px; height: 12px; border-width: 1.5px;
-}
-@keyframes gnav-spin { to { transform: rotate(360deg); } }
-/* Slower, never off: it is the only sign that the click was heard. */
-@media (prefers-reduced-motion: reduce) {
-  .gnav-item:is([aria-busy="true"], :has(> .gnav-pending)) > .gnav-ico::after,
-  .gnav-subitem:is([aria-busy="true"], :has(> .gnav-pending))::after,
-  .gb-pending-mark { animation-duration: 2s; }
-}
-/* A link in the PAGE (a list row, a card, a tab) opts in with `data-gb-pending`: PendingLink (`@gemboss/ui/next`) or
- * kit-plain.js put `span.gb-pending-mark` (role=status) inside it while the page loads. "inline" (default): 12px after
- * the text. "corner": 16px in the top right corner, out of the flow, for a link that wraps a whole card (a grid card
- * gains no column). Marked by attribute, not class: a surface that colours bare links with `a:not([class])` keeps it. */
-a[data-gb-pending]:has(> .gb-pending-mark), a[data-gb-pending][aria-busy="true"] { cursor: progress; }
-a[data-gb-pending] > .gb-pending-mark { display: inline-block; width: 12px; height: 12px; border-width: 1.5px; margin-left: 6px; vertical-align: -1px; }
-a[data-gb-pending="corner"] { position: relative; }
-a[data-gb-pending="corner"] > .gb-pending-mark { position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; margin: 0; }
-/* RouteHolding (./route-holding.tsx): a route group's loading boundary. The kit's skeleton lines in the content column,
- * one shape for every route: a title bar, then four lines of falling length (the admin's holding screen). */
-.gb-route-holding { padding-top: 4px; }
-.gb-route-holding .ui-skeleton { gap: 16px; }
-.gb-route-holding__heading { margin: 0 0 20px; font-size: 20px; font-weight: 650; line-height: 1.3; color: var(--gemboss-text); }
-.gb-route-holding .ui-skeleton__line { height: 10px; }
-.gb-route-holding .ui-skeleton__line.gb-route-holding__title { height: 20px; width: 34%; margin-bottom: 8px; }
-.gb-route-holding .ui-skeleton__line:nth-last-child(4) { width: 46%; }
-.gb-route-holding .ui-skeleton__line:nth-last-child(3) { width: 92%; }
-.gb-route-holding .ui-skeleton__line:nth-last-child(2) { width: 78%; }
-.gb-route-holding .ui-skeleton__line:nth-last-child(1) { width: 61%; }
-/* RouteCover: the same frame over the content area from the click until the navigation commits. Shown only while
- * `html[data-gb-navigating]` (set by the @gemboss/ui/next links while pending). No grace delay: the target is the new
- * screen within 100 ms of the click, and a 40 ms grace measured 120-132 ms on content-radar's rail (05/10/2026). The
- * 80 ms fade is what a router cache hit (20-90 ms) sees of it: a faint, partial frame, not a full flash.
- * z 5: above the outgoing page, below the rail, the topbar (300) and the assistant (290). */
-.gb-route-cover { display: none; }
-html[data-gb-navigating] .gb-route-cover {
-  display: block; position: fixed; inset: 56px 0 0 240px; z-index: 5; overflow: hidden; box-sizing: border-box;
-  padding: 24px; background: var(--gemboss-app-bg); pointer-events: none;
-  animation: gb-route-cover-in 0.08s ease-out both;
-}
-@keyframes gb-route-cover-in { from { opacity: 0; } to { opacity: 1; } }
-@media (max-width: 760px) { html[data-gb-navigating] .gb-route-cover { left: 0; padding: 16px; } }
-@media (prefers-reduced-motion: reduce) { html[data-gb-navigating] .gb-route-cover { animation-duration: 0s; } }
-/* The status text a NavLink renders inside a rail item: read, not seen. */
-.gnav-pending {
-  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
-  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
-}
-
-/* ── BrandLockup (./brand.tsx) ─────────────────────────────────────────────────────────────────
- * The admin's `.gemboss-brand-lockup` box (40px tall, 8px padding, hover wash) around the wordmark's
- * own proportions. Not that class itself: its ≤460px rule swaps in a background image at an
- * admin-only path, which every other host would 404. Ink is the logo file's #14151a. */
-.gb-brand {
-  min-width: 0; height: 40px; margin: 0; padding: 0 8px;
-  border-radius: var(--gemboss-radius-md);
-  display: inline-flex; align-items: center; gap: 4.5px;
-  color: var(--gb-brand-ink, #14151a); text-decoration: none;
-  transition: background-color var(--gemboss-transition-base) ease;
-}
-.gb-brand:hover { background: var(--gemboss-hover); }
-.gb-brand:focus-visible { outline: 2px solid var(--gemboss-primary); outline-offset: 2px; }
-.gb-brand-gem { display: block; flex: 0 0 auto; }
-.gb-brand-name {
-  font-family: Inter, var(--gemboss-font-sans); font-size: 13.3px; font-weight: 700;
-  letter-spacing: -0.13px; line-height: 1; white-space: nowrap;
-  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; }
-  /* 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. */
-
-/* ── Topbar search (TopbarSearch, search.tsx; 0.6.3) ────────────────────────────────────────────────────────
-   The admin's "Search ⌘K" box as a real form for AppShell's `center` slot. Same metrics as the admin's
-   .gemboss-command-search (gemboss-shell.css): 36px under a mouse, 44px under a finger (pinned in the admin's
-   kit-controls-reach-44.test.ts), 18px icon, 13px text, the shortcut hint at the right. Field tokens, so it
-   wears the same box as every other text field in the kit. */
-.gemboss-topbar-search {
-  width: 100%;
-  max-width: 560px;
-  height: 36px;
-  min-width: 0;
-  margin: 0 auto;
-  border: 1px solid var(--gemboss-field-line);
-  border-radius: var(--gemboss-radius-md);
-  background: var(--gemboss-field-bg);
-  padding: 0 8px 0 12px;
-  display: grid;
-  grid-template-columns: 18px minmax(0, 1fr) auto;
-  gap: 8px;
-  align-items: center;
-  color: var(--gemboss-text-muted);
-}
-.gemboss-topbar-search:hover { border-color: var(--gemboss-field-line-hover); background: var(--gemboss-field-bg-hover); }
-.gemboss-topbar-search:focus-within { border-color: var(--gemboss-field-line-active); background: var(--gemboss-surface); }
-.gemboss-topbar-search-icon { width: 18px; height: 18px; color: currentColor; }
-/* The INPUT is the tap target, not the box: the box is a <form>, and a tap on its icon or border does not focus
-   anything. Inside a 1px border, `height: 100%` left the input 42 of the box's 44 (visual-gate tap_target_size at
-   320/390/768 on GemFactory, 03/10/2026). It reaches over both border lines; transparent, so the border still shows. */
-.gemboss-topbar-search-input {
-  min-width: 0; height: calc(100% + 2px); border: 0; background: transparent; padding: 0; margin: -1px 0;
-  font: inherit; font-size: var(--gemboss-fs-body); line-height: 18px; color: var(--gemboss-field-ink); outline: none;
-}
-.gemboss-topbar-search-input::placeholder { color: var(--gemboss-field-placeholder); opacity: 1; }
-.gemboss-topbar-search-kbd {
-  border: 1px solid var(--gemboss-field-line); border-radius: var(--gemboss-radius-sm); background: var(--gemboss-surface);
-  padding: 1px 6px; color: var(--gemboss-text-muted); font-family: inherit; font-size: var(--gemboss-fs-micro); line-height: 16px;
-}
-.gemboss-topbar-search:focus-within .gemboss-topbar-search-kbd { display: none; }
-/* 44 under a finger AND at phone width (0.6.4, 03/10/2026): the same pair of conditions the kit's own controls use
-   (kit-plain.css, `max-width: 47.9975em`). Under `pointer: coarse` alone, a narrow desktop window and every visual-gate
-   run measured the box at 36 and failed `tap_target_size` at 320/390/768 on GemFactory /framework. */
-@media (pointer: coarse), (max-width: 47.9975em) { .gemboss-topbar-search { height: 44px; } }
-/* A phone has no ⌘ key, and the box needs every pixel the bar has left. */
-@media (max-width: 460px) { .gemboss-topbar-search-kbd { display: none; } }
-
-/* ── Page width (0.8.1) ──────────────────────────────────────────────────────────────────────────────
- * Chris 04/10/2026: the rail on the left, and on the right a content column with ONE max width across every
- * service, not edge to edge. The admin's tiers (gemboss-shell.css, `.gemboss-w-*` around a Polaris Page), same
- * numbers; `page-width.test.tsx` fails if the two disagree:
- *   .ui-page          → --ui-content-max (900px, ui.css): lists, tables, card grids, dashboards
- *   .ui-page--feed    → 720px: read top to bottom (activity, logs, timelines)
- *   .ui-page--form    → 662px: one column of fields (Polaris narrowWidth)
- *   .ui-page--canvas  → 1440px: content measured to be wider than a reading column (admin: the funnel path)
- *   .ui-page--full    → no cap: a board or an editor that is the screen. Say why where you use it.
- * A cap only exists where it is SMALLER than the room it sits in. Right of the 240px rail with main's 24px padding,
- * 900 bites from 1188px up (1280 → 992 of room); 1440 bites only from ~1730px. Below that the column is simply the
- * room, so the tier never causes a horizontal scroll.
- * Here, not in ui.css: ui.css is exported verbatim into the admin under a 90 KB budget (89.8 KB at 0.7.3), and the
- * admin draws its tiers on Polaris' Page instead. Fixed px, not %: a % cap grows the line length with the monitor. */
-.ui-page {
-  box-sizing: border-box;
-  width: 100%;
-  min-width: 0;
-  max-width: var(--ui-content-max, 900px);
-  margin-inline: auto;
-}
-.ui-page--feed { max-width: 720px; }
-.ui-page--form { max-width: 662px; }
-.ui-page--canvas { max-width: 1440px; }
-.ui-page--full { max-width: none; }
+:where(html,body,button){font-family:var(--gemboss-font-sans)}:where(body){font-size:13px;line-height:20px;font-weight:450;color:var(--gemboss-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:where(h1,h2,h3){letter-spacing:-.01em;line-height:1.3}: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}.gemboss-topbar-end{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}@media (max-width: 760px){.gemboss-topbar-center{flex:1 1 0;min-width:96px;justify-content:flex-start}.gemboss-topbar-center:empty{min-width:0}.gemboss-topbar-end:empty{display:none}.gemboss-topbar-end{flex:0 0 auto}.gemboss-topbar-start{flex:0 1 auto}.gemboss-topbar-start>.gemboss-mobile-menu-btn{flex:0 0 auto}.gemboss-topbar-start>.gb-brand{min-width:44px}}.gnav-heading{padding:10px 12px 4px;font-size:var(--gemboss-fs-micro);font-weight:600;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:var(--gemboss-text-muted)}.gnav-scroll>.gnav-heading:first-child,.gnav-scroll>.gnav-section:first-child>.gnav-heading:first-child{padding-top:2px}.gnav-count{margin-left:auto;flex:0 0 auto;min-width:20px;padding:0 6px;border-radius:var(--gemboss-radius-full);background:var(--gemboss-hover);color:var(--gemboss-text-muted);font-size:var(--gemboss-fs-micro);font-weight:700;line-height:18px;text-align:center;font-variant-numeric:tabular-nums}.gnav-item.active .gnav-count{background:var(--gemboss-primary);color:var(--gemboss-on-primary)}.gnav-item:is([aria-busy=true],:has(>.gnav-pending)),.gnav-subitem:is([aria-busy=true],:has(>.gnav-pending)){cursor:progress}.gnav-item:is([aria-busy=true],:has(>.gnav-pending))>.gnav-ico>*{visibility:hidden}.gnav-item:is([aria-busy=true],:has(>.gnav-pending))>.gnav-ico:after,.gnav-subitem:is([aria-busy=true],:has(>.gnav-pending)):after,.gb-pending-mark{content:"";display:inline-block;vertical-align:middle;grid-area:1 / 1;flex:none;box-sizing:border-box;width:20px;height:20px;border-radius:50%;border:2px solid color-mix(in srgb,currentColor 18%,transparent);border-top-color:currentColor;animation:gnav-spin .7s linear infinite}.gnav-subitem:is([aria-busy=true],:has(>.gnav-pending)):after{position:absolute;left:22px;top:50%;margin-top:-6px;width:12px;height:12px;border-width:1.5px}@keyframes gnav-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.gnav-item:is([aria-busy=true],:has(>.gnav-pending))>.gnav-ico:after,.gnav-subitem:is([aria-busy=true],:has(>.gnav-pending)):after,.gb-pending-mark{animation-duration:2s}}a[data-gb-pending]:has(>.gb-pending-mark),a[data-gb-pending][aria-busy=true]{cursor:progress}a[data-gb-pending]>.gb-pending-mark{display:inline-block;width:12px;height:12px;border-width:1.5px;margin-left:6px;vertical-align:-1px}a[data-gb-pending=corner]{position:relative}a[data-gb-pending=corner]>.gb-pending-mark{position:absolute;top:12px;right:12px;width:16px;height:16px;margin:0}.gb-route-holding{padding-top:4px}.gb-route-holding .ui-skeleton{gap:16px}.gb-route-holding__heading{margin:0 0 20px;font-size:20px;font-weight:650;line-height:1.3;color:var(--gemboss-text)}.gb-route-holding .ui-skeleton__line{height:10px}.gb-route-holding .ui-skeleton__line.gb-route-holding__title{height:20px;width:34%;margin-bottom:8px}.gb-route-holding .ui-skeleton__line:nth-last-child(4){width:46%}.gb-route-holding .ui-skeleton__line:nth-last-child(3){width:92%}.gb-route-holding .ui-skeleton__line:nth-last-child(2){width:78%}.gb-route-holding .ui-skeleton__line:nth-last-child(1){width:61%}.gb-route-cover{display:none}html[data-gb-navigating] .gb-route-cover{display:block;position:fixed;inset:56px 0 0 240px;z-index:5;overflow:hidden;box-sizing:border-box;padding:24px;background:var(--gemboss-app-bg);pointer-events:none;animation:gb-route-cover-in .08s ease-out both}@keyframes gb-route-cover-in{0%{opacity:0}to{opacity:1}}@media (max-width: 760px){html[data-gb-navigating] .gb-route-cover{left:0;padding:16px}}@media (prefers-reduced-motion: reduce){html[data-gb-navigating] .gb-route-cover{animation-duration:0s}}.gnav-pending{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.gb-brand{min-width:0;height:40px;margin:0;padding:0 8px;border-radius:var(--gemboss-radius-md);display:inline-flex;align-items:center;gap:4.5px;color:var(--gb-brand-ink, #14151a);text-decoration:none;transition:background-color var(--gemboss-transition-base) ease}.gb-brand:hover{background:var(--gemboss-hover)}.gb-brand:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:2px}.gb-brand-gem{display:block;flex:0 0 auto}.gb-brand-name{font-family:Inter,var(--gemboss-font-sans);font-size:13.3px;font-weight:700;letter-spacing:-.13px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}@media (max-width: 460px){.gb-brand-name{display:none}.gb-brand{min-width:44px;height:44px;justify-content:center}}.gemboss-topbar-search{width:100%;max-width:560px;height:36px;min-width:0;margin:0 auto;border:1px solid var(--gemboss-field-line);border-radius:var(--gemboss-radius-md);background:var(--gemboss-field-bg);padding:0 8px 0 12px;display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:8px;align-items:center;color:var(--gemboss-text-muted)}.gemboss-topbar-search:hover{border-color:var(--gemboss-field-line-hover);background:var(--gemboss-field-bg-hover)}.gemboss-topbar-search:focus-within{border-color:var(--gemboss-field-line-active);background:var(--gemboss-surface)}.gemboss-topbar-search-icon{width:18px;height:18px;color:currentColor}.gemboss-topbar-search-input{min-width:0;height:calc(100% + 2px);border:0;background:transparent;padding:0;margin:-1px 0;font:inherit;font-size:var(--gemboss-fs-body);line-height:18px;color:var(--gemboss-field-ink);outline:none}.gemboss-topbar-search-input::placeholder{color:var(--gemboss-field-placeholder);opacity:1}.gemboss-topbar-search-kbd{border:1px solid var(--gemboss-field-line);border-radius:var(--gemboss-radius-sm);background:var(--gemboss-surface);padding:1px 6px;color:var(--gemboss-text-muted);font-family:inherit;font-size:var(--gemboss-fs-micro);line-height:16px}.gemboss-topbar-search:focus-within .gemboss-topbar-search-kbd{display:none}@media (pointer: coarse),(max-width: 47.9975em){.gemboss-topbar-search{height:44px}}@media (max-width: 460px){.gemboss-topbar-search-kbd{display:none}}.ui-page{box-sizing:border-box;width:100%;min-width:0;max-width:var(--ui-content-max, 900px);margin-inline:auto}.ui-page--feed{max-width:720px}.ui-page--form{max-width:662px}.ui-page--canvas{max-width:1440px}.ui-page--full{max-width:none}