@kennycorrea/ui 0.11.4 → 1.7.0

package/tokens.css

@@ -1,27 +1,16 @@
 /**
  * The house token bridge — the shared half of every consuming app's stylesheet.
  *
- * Two apps said `text-ink-muted` and `bg-brand-700/8` and each carried its own copy of what
- * those meant. The values below are the dashboard's, which was the more complete of the two.
+ * Names such as `text-ink-muted` and `bg-brand-700/8` mean the same thing in every app that
+ * imports this file, because the meaning lives here and not in a copy per app.
  *
- * **How far the two copies had actually drifted, measured rather than assumed**, because the
- * answer is narrower than "two copies always diverge" and the difference matters:
+ * Two things worth knowing before editing it:
  *
- * - **The live values agreed.** `--color-ink` resolved to `var(--gray-12)` in both,
- *   `--color-hairline` to `var(--gray-a6)`, and the backdrop to the same `oklch` literal. The
- *   `.radix-themes` blocks had been kept in step by hand, and they were right.
- * - **The static fallbacks in `@theme` had not been.** `--color-ink` was `#1d3b31` here and
- *   `#1a211f` there; the hairline 12% against 10%. Those only show if the Radix stylesheet
- *   fails to load, so the drift was real and invisible — the worst kind to leave lying around,
- *   and the least urgent.
- * - **`--font-sans` was the one live difference**: `'Inter', …` in the dashboard against
- *   `ui-sans-serif, …` on the site. ⚠ And neither app loads Inter, so the dashboard has been
- *   asking for a font it does not have and both render the system stack. Unified here; if Inter
- *   is ever wanted it needs adding to the apps' HTML, and then it will apply to all three at
- *   once, which is the point.
- *
- * The drift that was live and visible was in the **components**, not the colours — see the
- * `Button` note in the README.
+ * - **The live values are in the `.radix-themes` blocks.** The `@theme` values are static
+ *   fallbacks that only show if the Radix stylesheet fails to load. Keep the two in step;
+ *   drift between them is invisible until that failure happens.
+ * - **`--font-sans` names `'Inter'` first.** The library does not load it. An app that wants it
+ *   adds it to its own HTML; otherwise the system stack renders.
  *
  * **How to use it**, in an app's own `index.css`:
  *
@@ -154,7 +143,7 @@
     --color-sheet: var(--color-panel-solid);
 
     /**
-     * The deep field behind sign-in and the public booking page, and the wash behind a
+     * The deep field behind sign-in and other full-bleed pages, and the wash behind a
      * dialog. Both have to stay dark in *either* appearance.
      *
      * **Neither can be a step from an accent scale.** Themes flips the whole ramp between
@@ -176,13 +165,28 @@
     /* An alpha step, so a hairline stays a hairline over whatever surface is beneath it. */
     --color-hairline: var(--gray-a6);
 
+    /**
+     * The categorical chart palette: eight hues that each reach 3:1 (WCAG 1.4.11, graphical
+     * objects) against the panel in both appearances, held there by test/contrast.test.tsx.
+     * Amber, yellow, lime, mint and sky are left out: their step 9 is under 2:1 on white.
+     * Charts also mark series by pattern or shape, so colour is never the only difference.
+     */
+    --chart-1: var(--blue-9);
+    --chart-2: var(--orange-10);
+    --chart-3: var(--jade-9);
+    --chart-4: var(--violet-9);
+    --chart-5: var(--crimson-9);
+    --chart-6: var(--cyan-10);
+    --chart-7: var(--gold-9);
+    --chart-8: var(--pink-9);
+
     /**
      * Warning, danger and success, from Radix's own scales.
      *
      * A fill and an ink, because the two move in opposite directions between appearances:
      * the fill stays a faint wash while the ink goes from nearly black to nearly white.
      * Step 11 is Radix's "text on a tinted background", which is precisely this job — and
-     * it is what makes a pending booking legible in the dark theme without a second rule.
+     * it is what makes a pending status legible in the dark theme without a second rule.
      */
     --color-warn: var(--amber-9);
     --color-warn-ink: var(--amber-11);
@@ -233,6 +237,14 @@
   --safe-bottom: env(safe-area-inset-bottom, 0px);
   --safe-left: env(safe-area-inset-left, 0px);
   --material-bar-filter: saturate(180%) blur(20px);
+  /* Admin layout. Nothing reads these yet; the shell and table components will. An app can
+     override any of them on :root or on a wrapper. */
+  --sidebar-width: 256px;
+  --sidebar-width-collapsed: 64px;
+  --topbar-height: 56px;
+  --content-max-width: 1280px;
+  --table-row-height-comfortable: 48px;
+  --table-row-height-compact: 36px;
 }
 
 @layer base {
@@ -595,6 +607,12 @@
 /* Unlayered, like Themes' `.rt-Card` padding, and more specific: the header and body pad, the card
    does not. A caller's padding class reaches the card as `!p-*` (see Card.tsx), which still wins. */
 .ui-card.rt-Card { padding: 0; }
+/*
+ * Card turns a caller's padding utility into its important form (`p-4` → `!p-4`) so it beats
+ * Themes' unlayered card padding. Tailwind only generates classes it finds in source, and the
+ * important form is never written anywhere, so it is listed here. Needs Tailwind 4.1+.
+ */
+@source inline("{,sm:,md:,lg:,xl:}!{p,px,py,pt,pr,pb,pl,ps,pe}-{0,0.5,1,1.5,2,2.5,3,3.5,4,5,6,7,8,10,12}");
 .ui-card-header, .ui-card-body { padding: 16px 20px; }
 .ui-card-title { font-size: 1rem; font-weight: 500; }
 .ui-card.rt-Card[data-variant="outlined"] { background: transparent; --base-card-border-radius: var(--card-border-radius);}
@@ -936,3 +954,464 @@
   --ui-float-shadow: 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
 }
 .rt-BaseMenuContent, .rt-SelectContent, .rt-PopoverContent { box-shadow: var(--ui-float-shadow); }
+
+/**
+ * Admin shell and navigation (1.2.0): AppShell, Sidebar, NavItem, Topbar, Breadcrumbs,
+ * PageHeader, PageTabs, UserMenu, AccentPicker.
+ *
+ * Which shell is shown (persistent sidebar or off-canvas panel) is decided in JavaScript,
+ * because the markup differs. Everything else here is CSS: media queries for the viewport,
+ * container queries where a component sits in a column of unknown width.
+ */
+.ui-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+
+.ui-shell { display: grid; grid-template-columns: minmax(0, 1fr); min-block-size: 100dvh; background: var(--color-canvas); }
+.ui-shell[data-wide] { grid-template-columns: auto minmax(0, 1fr); }
+.ui-shell__main { display: flex; flex-direction: column; min-inline-size: 0; }
+.ui-shell__content { flex: 1; outline: none; }
+.ui-skip-link { position: fixed; inset-block-start: 8px; inset-inline-start: 8px; z-index: 100; padding: 8px 12px; border-radius: var(--radius-3);
+  background: var(--color-panel-solid); color: var(--color-ink); box-shadow: var(--ui-float-shadow, 0 4px 16px var(--black-a5)); transform: translateY(-200%); }
+.ui-skip-link:focus { transform: none; outline: 2px solid var(--focus-8); }
+
+.ui-sidebar { position: sticky; inset-block-start: 0; display: flex; flex-direction: column; box-sizing: border-box;
+  block-size: 100dvh; inline-size: var(--sidebar-width); overflow: hidden;
+  border-inline-end: 1px solid var(--color-hairline); background: var(--color-panel-solid);
+  transition: inline-size 200ms ease-out; }
+.ui-sidebar[data-collapsed] { inline-size: var(--sidebar-width-collapsed); }
+.ui-sidebar__header, .ui-sidebar__footer { flex: none; padding: 12px; }
+.ui-sidebar__header { min-block-size: var(--topbar-height); box-sizing: border-box; display: flex; align-items: center; gap: 8px; }
+.ui-sidebar__footer { display: flex; flex-direction: column; gap: 4px; border-block-start: 1px solid var(--color-hairline); }
+.ui-sidebar__nav { flex: 1; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px; }
+.ui-sidebar__section + .ui-sidebar__section { margin-block-start: 16px; }
+.ui-sidebar__section-label { margin: 0 0 4px; padding-inline: 10px; font-size: 12px; font-weight: 500; color: var(--color-ink-muted); }
+.ui-sidebar__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
+.ui-sidebar[data-collapsed] .ui-sidebar__section-label,
+.ui-sidebar[data-collapsed] .ui-nav-item__label,
+.ui-sidebar[data-collapsed] .ui-nav-item__chevron { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.ui-sidebar[data-collapsed] .ui-nav-item { justify-content: center; padding-inline: 0; }
+.ui-sidebar[data-collapsed] .ui-nav-item__badge { position: absolute; inset-block-start: 4px; inset-inline-end: 6px; min-inline-size: 8px; block-size: 8px; padding: 0; font-size: 0; }
+.ui-nav-item.ui-sidebar__close, .ui-nav-item.ui-topbar__menu { inline-size: auto; flex: none; }
+.ui-sidebar-overlay { position: fixed; inset: 0; z-index: 49; background: var(--color-scrim); }
+.ui-sidebar-panel { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 50; display: flex; flex-direction: column; box-sizing: border-box;
+  inline-size: min(var(--sidebar-width), 85vw); padding-block: var(--safe-top) var(--safe-bottom); padding-inline-start: var(--safe-left);
+  background: var(--color-panel-solid); box-shadow: var(--ui-float-shadow, 0 12px 60px var(--black-a5)); outline: none; }
+.ui-sidebar-panel[data-state="open"] { animation: ui-sidebar-in 200ms ease-out; }
+.ui-sidebar-overlay[data-state="open"] { animation: ui-fade-in 200ms ease-out; }
+@keyframes ui-sidebar-in { from { transform: translateX(-100%); } }
+@keyframes ui-fade-in { from { opacity: 0; } }
+[dir="rtl"] .ui-sidebar-panel[data-state="open"] { animation-name: ui-sidebar-in-rtl; }
+@keyframes ui-sidebar-in-rtl { from { transform: translateX(100%); } }
+@media (prefers-reduced-motion: reduce) {
+  .ui-sidebar { transition: none; }
+  .ui-sidebar-panel[data-state="open"], .ui-sidebar-overlay[data-state="open"] { animation: none; }
+}
+
+.ui-nav-item { position: relative; display: flex; align-items: center; gap: 12px; box-sizing: border-box; inline-size: 100%;
+  min-block-size: 36px; padding: 6px 10px; border: 0; border-radius: var(--radius-3); background: none;
+  font: inherit; font-size: 14px; font-weight: 500; line-height: 20px; text-align: start; text-decoration: none;
+  color: var(--gray-11); cursor: pointer; -webkit-tap-highlight-color: transparent; }
+.ui-nav-item[aria-current="page"] { background: var(--accent-a3); color: var(--accent-11); }
+.ui-nav-item:focus-visible { outline: 2px solid var(--focus-8); outline-offset: -2px; }
+.ui-nav-item:active { background: var(--gray-a4); }
+@media (hover: hover) { .ui-nav-item:hover { background: var(--gray-a3); color: var(--color-ink); } .ui-nav-item[aria-current="page"]:hover { background: var(--accent-a4); color: var(--accent-11); } }
+@media (pointer: coarse) { .ui-nav-item { min-block-size: var(--tap-min); } }
+.ui-nav-item__icon { display: inline-flex; flex: none; font-size: 20px; line-height: 1; }
+.ui-nav-item__label { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ui-nav-item__badge { flex: none; min-inline-size: 20px; block-size: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px;
+  background: var(--accent-9); color: var(--accent-contrast); font-size: 12px; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
+.ui-nav-item__badge[data-dot] { min-inline-size: 8px; block-size: 8px; padding: 0; }
+.ui-nav-item__chevron { flex: none; display: inline-flex; transition: transform 150ms ease-out; }
+.ui-nav-item[aria-expanded="true"] .ui-nav-item__chevron { transform: rotate(180deg); }
+.ui-nav-group { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 200ms ease-out, visibility 200ms; }
+.ui-nav-group[data-open] { grid-template-rows: 1fr; visibility: visible; }
+.ui-nav-group__items { min-block-size: 0; overflow: hidden; margin: 0; padding: 2px 0 0 32px; list-style: none; display: flex; flex-direction: column; gap: 2px; }
+@media (prefers-reduced-motion: reduce) { .ui-nav-item__chevron, .ui-nav-group { transition: none; } }
+
+.ui-topbar { position: sticky; inset-block-start: 0; z-index: 20; display: grid; box-sizing: border-box;
+  grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "lead title actions" "search search search";
+  align-items: center; column-gap: 12px; min-block-size: calc(var(--topbar-height) + var(--safe-top));
+  padding: var(--safe-top) var(--page-gutter, 16px) 0;
+  background-color: var(--material-bar, var(--color-panel-solid)); -webkit-backdrop-filter: var(--material-bar-filter); backdrop-filter: var(--material-bar-filter);
+  box-shadow: inset 0 -1px 0 var(--color-hairline); }
+.ui-topbar__lead { grid-area: lead; display: flex; align-items: center; gap: 8px; min-block-size: var(--topbar-height); }
+.ui-topbar__title { grid-area: title; min-inline-size: 0; margin: 0; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ui-topbar__actions { grid-area: actions; display: flex; align-items: center; gap: 4px; }
+.ui-topbar__search { grid-area: search; padding-block-end: 8px; }
+@media (min-width: 768px) {
+  .ui-topbar { grid-template-columns: auto minmax(0, 1fr) minmax(0, 360px) auto; grid-template-areas: "lead title search actions"; }
+  .ui-topbar__search { padding-block-end: 0; }
+}
+
+.ui-breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--color-ink-muted); }
+.ui-breadcrumbs__item { display: inline-flex; align-items: center; gap: 4px; min-inline-size: 0; }
+.ui-breadcrumbs__item [aria-current="page"] { color: var(--color-ink); font-weight: 500; }
+.ui-breadcrumbs__sep, .ui-breadcrumbs__back { display: inline-flex; color: var(--gray-9); }
+.ui-breadcrumbs__back { display: none; }
+.ui-breadcrumbs__item a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 2px; }
+@media (hover: hover) { .ui-breadcrumbs__item a:hover { color: var(--color-ink); text-decoration: underline; } }
+.ui-breadcrumbs__item a:focus-visible, .ui-breadcrumbs__more:focus-visible { outline: 2px solid var(--focus-8); outline-offset: 2px; border-radius: var(--radius-1); }
+.ui-breadcrumbs__more { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 24px; min-block-size: 24px;
+  padding: 0 4px; border: 0; border-radius: var(--radius-2); background: none; color: inherit; cursor: pointer; }
+@media (hover: hover) { .ui-breadcrumbs__more:hover { background: var(--gray-a3); } }
+@media not (min-width: 768px) {
+  .ui-breadcrumbs__item:not([data-parent]) { display: none; }
+  .ui-breadcrumbs__item[data-parent] .ui-breadcrumbs__sep { display: none; }
+  .ui-breadcrumbs__item[data-parent] .ui-breadcrumbs__back { display: inline-flex; }
+}
+
+.ui-page-header { container-type: inline-size; display: flex; flex-direction: column; gap: 12px; padding-block: 8px 16px; }
+.ui-page-header__row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
+.ui-page-header__text { flex: 1 1 240px; min-inline-size: 0; }
+.ui-page-header__title { margin: 0; font-size: 24px; line-height: 32px; font-weight: 600; color: var(--color-ink); overflow-wrap: anywhere; }
+.ui-page-header__description { margin: 4px 0 0; color: var(--color-ink-muted); }
+.ui-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.ui-page-header__secondary { display: contents; }
+@container (width < 640px) { .ui-page-header__secondary { display: none; } }
+@container (width >= 640px) { .ui-page-header__overflow { display: none; } }
+
+.ui-page-tabs__list { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none;
+  box-shadow: inset 0 -1px 0 var(--color-hairline); }
+.ui-page-tabs__list::-webkit-scrollbar { display: none; }
+.ui-page-tabs__item { display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; min-block-size: 40px; padding: 0 12px;
+  border: 0; background: none; font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none;
+  color: var(--gray-11); cursor: pointer; box-shadow: inset 0 -2px 0 transparent; }
+.ui-page-tabs__item[aria-current="page"] { color: var(--color-ink); box-shadow: inset 0 -2px 0 var(--accent-9); }
+.ui-page-tabs__item:focus-visible { outline: 2px solid var(--focus-8); outline-offset: -2px; border-radius: var(--radius-2); }
+@media (hover: hover) { .ui-page-tabs__item:hover { color: var(--color-ink); } }
+@media (pointer: coarse) { .ui-page-tabs__item { min-block-size: var(--tap-min); } }
+
+.ui-user-menu__trigger { display: inline-flex; align-items: center; gap: 8px; min-block-size: 36px; padding: 2px 8px 2px 2px; border: 0;
+  border-radius: 999px; background: none; font: inherit; color: var(--color-ink); cursor: pointer; }
+.ui-user-menu__trigger:focus-visible { outline: 2px solid var(--focus-8); outline-offset: 2px; }
+@media (hover: hover) { .ui-user-menu__trigger:hover { background: var(--gray-a3); } }
+@media (pointer: coarse) { .ui-user-menu__trigger { min-block-size: var(--tap-min); } }
+.ui-user-menu__name { font-size: 14px; font-weight: 500; max-inline-size: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+@media not (min-width: 768px) { .ui-user-menu__name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); } .ui-user-menu__trigger { padding-inline-end: 2px; } }
+
+.ui-accent-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
+.ui-accent-picker__option { position: relative; display: inline-flex; cursor: pointer; }
+.ui-accent-picker__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
+.ui-accent-picker__swatch { display: block; inline-size: 28px; block-size: 28px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px var(--black-a3); }
+.ui-accent-picker__input:checked + .ui-accent-picker__swatch { box-shadow: 0 0 0 2px var(--color-panel-solid), 0 0 0 4px var(--swatch); }
+.ui-accent-picker__input:focus-visible + .ui-accent-picker__swatch { outline: 2px solid var(--focus-8); outline-offset: 4px; }
+@media (pointer: coarse) { .ui-accent-picker__option::before { content: ''; position: absolute; inset: -8px; } }
+
+.ui-admin-content { box-sizing: border-box; inline-size: 100%; max-inline-size: var(--content-max-width); margin-inline: auto; padding: 16px var(--page-gutter, 16px) 32px; }
+.ui-admin-content[data-width="full"] { max-inline-size: none; }
+@media (min-width: 768px) { .ui-admin-content { padding-block-start: 24px; } }
+
+/**
+ * Data display (1.3.0): StatusIndicator, Pill, EmptyState/ErrorState/LoadingState, Pagination,
+ * DataTable, BulkActionBar, ListPage, DetailPage, StatusPage.
+ *
+ * Tables, pagination and states size to their own container, not the viewport: they sit in
+ * columns, panels and dialogs as often as full-width.
+ */
+.ui-status { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--color-ink); }
+.ui-status__dot { flex: none; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--gray-9); }
+.ui-status[data-tone="success"] .ui-status__dot { background: var(--jade-9); }
+.ui-status[data-tone="warning"] .ui-status__dot { background: var(--amber-9); }
+.ui-status[data-tone="danger"] .ui-status__dot { background: var(--red-9); }
+.ui-status[data-tone="info"] .ui-status__dot { background: var(--blue-9); }
+.ui-status[data-pulse] .ui-status__dot { animation: ui-status-pulse 1.6s ease-in-out infinite; }
+@keyframes ui-status-pulse { 50% { opacity: 0.35; } }
+@media (prefers-reduced-motion: reduce) { .ui-status[data-pulse] .ui-status__dot { animation: none; } }
+
+.ui-pill { display: inline-flex; align-items: center; gap: 2px; box-sizing: border-box; min-block-size: 24px; padding: 0 10px;
+  border-radius: 999px; background: var(--gray-a3); color: var(--color-ink); font-size: 13px; line-height: 20px; }
+.ui-pill[data-removable] { padding-inline-end: 2px; }
+.ui-pill__remove { position: relative; display: inline-flex; align-items: center; justify-content: center; inline-size: 20px; block-size: 20px;
+  padding: 0; border: 0; border-radius: 50%; background: none; color: var(--gray-11); cursor: pointer; }
+.ui-pill__remove:focus-visible { outline: 2px solid var(--focus-8); outline-offset: 1px; }
+@media (hover: hover) { .ui-pill__remove:hover { background: var(--gray-a4); color: var(--color-ink); } }
+@media (pointer: coarse) { .ui-pill__remove::before { content: ''; position: absolute; inset: -12px; } }
+
+.ui-state { display: flex; flex-direction: column; align-items: center; gap: 8px; box-sizing: border-box;
+  padding: 48px 16px; text-align: center; }
+.ui-state__icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 48px; block-size: 48px; border-radius: 50%;
+  background: var(--gray-a3); color: var(--gray-11); font-size: 24px; margin-block-end: 4px; }
+.ui-state[data-tone="danger"] .ui-state__icon { background: var(--red-a3); color: var(--red-11); }
+.ui-state__title { margin: 0; font-size: 16px; font-weight: 600; color: var(--color-ink); }
+.ui-state__description { margin: 0; max-inline-size: 48ch; color: var(--color-ink-muted); }
+.ui-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-block-start: 8px; }
+.ui-state__details { max-inline-size: 100%; margin-block-start: 8px; text-align: start; font-size: 13px; color: var(--color-ink-muted); }
+.ui-state__details pre { overflow: auto; white-space: pre-wrap; }
+.ui-state[data-size="sm"] { padding-block: 24px; }
+.ui-loading { display: flex; flex-direction: column; gap: 12px; }
+.ui-loading[data-variant="spinner"] { align-items: center; justify-content: center; padding: 48px 16px; }
+.ui-loading[data-variant="cards"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
+
+.ui-pagination { container-type: inline-size; }
+.ui-pagination__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; font-size: 14px; color: var(--color-ink-muted); }
+.ui-pagination__size { display: inline-flex; align-items: center; gap: 8px; }
+.ui-pagination__nav { display: inline-flex; align-items: center; gap: 4px; }
+.ui-pagination__pages { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
+.ui-pagination__page { position: relative; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
+  min-inline-size: 32px; block-size: 32px; padding: 0 6px; border: 0; border-radius: var(--radius-2); background: none;
+  font: inherit; font-variant-numeric: tabular-nums; color: var(--color-ink); cursor: pointer; }
+.ui-pagination__page[aria-current="page"] { background: var(--accent-9); color: var(--accent-contrast); }
+.ui-pagination__page:disabled { color: var(--gray-8); cursor: default; }
+.ui-pagination__page:focus-visible { outline: 2px solid var(--focus-8); outline-offset: 1px; }
+@media (hover: hover) { .ui-pagination__page:not([aria-current="page"]):not(:disabled):hover { background: var(--gray-a3); } }
+@media (pointer: coarse) { .ui-pagination__page::before { content: ''; position: absolute; inset: -6px; } }
+.ui-pagination__ellipsis { min-inline-size: 24px; text-align: center; }
+.ui-pagination__compact { display: none; font-variant-numeric: tabular-nums; color: var(--color-ink); }
+@container (width < 520px) { .ui-pagination__pages { display: none; } .ui-pagination__compact { display: inline; } .ui-pagination__size { display: none; } }
+
+.ui-table { container-type: inline-size; display: flex; flex-direction: column; gap: 12px; }
+.ui-table__region { overflow: auto; border: 1px solid var(--color-hairline); border-radius: var(--radius-4); background: var(--color-panel-solid); }
+.ui-table__region:focus-visible { outline: 2px solid var(--focus-8); outline-offset: 2px; }
+.ui-table__table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; color: var(--color-ink); }
+.ui-table__caption { padding: 12px; text-align: start; font-weight: 600; }
+.ui-table__table th, .ui-table__table td { box-sizing: border-box; block-size: var(--table-row-height-comfortable); padding: 0 12px;
+  border-block-end: 1px solid var(--color-hairline); text-align: start; vertical-align: middle; }
+.ui-table[data-density="compact"] .ui-table__table th, .ui-table[data-density="compact"] .ui-table__table td { block-size: var(--table-row-height-compact); }
+.ui-table__table thead th { position: sticky; inset-block-start: 0; z-index: 2; background: var(--color-panel-solid);
+  font-size: 13px; font-weight: 500; color: var(--color-ink-muted); white-space: nowrap; }
+.ui-table__table tbody tr:last-child > * { border-block-end: 0; }
+.ui-table__table tbody th { font-weight: 500; }
+.ui-table__table [data-align="end"] { text-align: end; font-variant-numeric: tabular-nums; }
+.ui-table__table [data-align="center"] { text-align: center; }
+.ui-table__table [data-col="select"] { inline-size: 44px; padding-inline-end: 0; }
+.ui-table__table [data-col="actions"] { inline-size: 52px; text-align: end; }
+/* One tint per row, as a variable, so the sticky first cell can lay it over its solid ground. */
+.ui-table__table tbody tr { --row-tint: transparent; }
+.ui-table__table tbody tr[data-selected] { --row-tint: var(--accent-a3); }
+@media (hover: hover) {
+  .ui-table__table tbody tr[data-clickable]:hover { --row-tint: var(--gray-a3); cursor: pointer; }
+  .ui-table__table tbody tr[data-selected][data-clickable]:hover { --row-tint: var(--accent-a4); }
+}
+.ui-table__table tbody tr > * { background-color: var(--row-tint); }
+.ui-table[data-sticky-first] .ui-table__table tbody th { position: sticky; inset-inline-start: 0; z-index: 1;
+  background: linear-gradient(var(--row-tint), var(--row-tint)), var(--color-panel-solid); }
+.ui-table__sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
+.ui-table__sort[data-sorted] { color: var(--color-ink); }
+.ui-table__sort:focus-visible, .ui-table__rowbutton:focus-visible { outline: 2px solid var(--focus-8); outline-offset: 2px; border-radius: var(--radius-1); }
+.ui-table__rowbutton { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; }
+@media (hover: hover) { .ui-table__rowbutton:hover { text-decoration: underline; } }
+.ui-table__selectall { display: none; align-items: center; gap: 8px; padding-inline: 12px; font-size: 14px; font-weight: 500; cursor: pointer; }
+.ui-table__empty { padding: 0; }
+.ui-table__table .ui-table__empty { block-size: auto; }
+.ui-table__empty > * { flex: 1; }
+/* Specific enough to beat the stacked layout's display: flex on cells, so a narrow table hides
+   these columns whether it is still a table or already cards. */
+@container (width < 640px) { .ui-table .ui-table__table :is(thead, tbody) tr > :is(th, td)[data-priority="low"] { display: none; } }
+@container (width < 480px) { .ui-table .ui-table__table :is(thead, tbody) tr > :is(th, td)[data-priority="medium"] { display: none; } }
+@container (width < 480px) {
+  .ui-table[data-stack="sm"] :is(.ui-table__table, tbody, tr, th, td) { display: block; }
+  .ui-table[data-stack="sm"] thead { display: none; }
+  .ui-table[data-stack="sm"] .ui-table__selectall { display: flex; }
+  .ui-table[data-stack="sm"] .ui-table__region { border: 0; background: none; overflow: visible; }
+  .ui-table[data-stack="sm"] tbody tr { position: relative; margin-block-end: 12px; padding: 8px 12px; border: 1px solid var(--color-hairline); border-radius: var(--radius-4); background: var(--color-panel-solid); }
+  .ui-table[data-stack="sm"] .ui-table__table tbody :is(th, td) { display: flex; justify-content: space-between; gap: 12px; block-size: auto; min-block-size: 32px; align-items: center; padding: 4px 0; border: 0; text-align: end; }
+  .ui-table[data-stack="sm"] tbody :is(th, td)[data-label]::before { content: attr(data-label); flex: none; color: var(--color-ink-muted); font-weight: 500; text-align: start; }
+  .ui-table[data-stack="sm"] tbody th { position: static; font-weight: 600; text-align: start; }
+  .ui-table[data-stack="sm"] tbody [data-col="select"] { inline-size: auto; }
+  .ui-table[data-stack="sm"] tbody [data-col="actions"] { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; inline-size: auto; min-block-size: 0; padding: 0; }
+}
+@container (width < 640px) {
+  .ui-table[data-stack="md"] :is(.ui-table__table, tbody, tr, th, td) { display: block; }
+  .ui-table[data-stack="md"] thead { display: none; }
+  .ui-table[data-stack="md"] .ui-table__selectall { display: flex; }
+  .ui-table[data-stack="md"] .ui-table__region { border: 0; background: none; overflow: visible; }
+  .ui-table[data-stack="md"] tbody tr { position: relative; margin-block-end: 12px; padding: 8px 12px; border: 1px solid var(--color-hairline); border-radius: var(--radius-4); background: var(--color-panel-solid); }
+  .ui-table[data-stack="md"] .ui-table__table tbody :is(th, td) { display: flex; justify-content: space-between; gap: 12px; block-size: auto; min-block-size: 32px; align-items: center; padding: 4px 0; border: 0; text-align: end; }
+  .ui-table[data-stack="md"] tbody :is(th, td)[data-label]::before { content: attr(data-label); flex: none; color: var(--color-ink-muted); font-weight: 500; text-align: start; }
+  .ui-table[data-stack="md"] tbody th { position: static; font-weight: 600; text-align: start; }
+  .ui-table[data-stack="md"] tbody [data-col="select"] { inline-size: auto; }
+  .ui-table[data-stack="md"] tbody [data-col="actions"] { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; inline-size: auto; min-block-size: 0; padding: 0; }
+}
+@container (width < 800px) {
+  .ui-table[data-stack="lg"] :is(.ui-table__table, tbody, tr, th, td) { display: block; }
+  .ui-table[data-stack="lg"] thead { display: none; }
+  .ui-table[data-stack="lg"] .ui-table__selectall { display: flex; }
+  .ui-table[data-stack="lg"] .ui-table__region { border: 0; background: none; overflow: visible; }
+  .ui-table[data-stack="lg"] tbody tr { position: relative; margin-block-end: 12px; padding: 8px 12px; border: 1px solid var(--color-hairline); border-radius: var(--radius-4); background: var(--color-panel-solid); }
+  .ui-table[data-stack="lg"] .ui-table__table tbody :is(th, td) { display: flex; justify-content: space-between; gap: 12px; block-size: auto; min-block-size: 32px; align-items: center; padding: 4px 0; border: 0; text-align: end; }
+  .ui-table[data-stack="lg"] tbody :is(th, td)[data-label]::before { content: attr(data-label); flex: none; color: var(--color-ink-muted); font-weight: 500; text-align: start; }
+  .ui-table[data-stack="lg"] tbody th { position: static; font-weight: 600; text-align: start; }
+  .ui-table[data-stack="lg"] tbody [data-col="select"] { inline-size: auto; }
+  .ui-table[data-stack="lg"] tbody [data-col="actions"] { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; inline-size: auto; min-block-size: 0; padding: 0; }
+}
+
+.ui-bulk-bar { position: sticky; inset-block-end: 16px; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
+  box-sizing: border-box; inline-size: fit-content; max-inline-size: 100%; margin-inline: auto; padding: 8px 8px 8px 16px;
+  border-radius: var(--radius-4); background: var(--color-panel-solid); box-shadow: var(--ui-float-shadow, 0 12px 32px var(--black-a5)), 0 0 0 1px var(--color-hairline); }
+.ui-bulk-bar__count { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; margin-inline-end: 8px; }
+.ui-bulk-bar { inset-block-end: calc(var(--bottom-bar-offset, 0px) + 16px); }
+/* Set by AppShell while its bottom TabBar is showing, so sticky bottom bars sit above it. */
+.ui-shell[data-tabbar] { --bottom-bar-offset: var(--tabbar-height); }
+
+.ui-list-page { display: flex; flex-direction: column; gap: 16px; }
+.ui-detail-page { container-type: inline-size; display: flex; flex-direction: column; gap: 16px; }
+.ui-detail-page__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
+@container (width >= 960px) { .ui-detail-page__body[data-has-aside] { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); } }
+.ui-status-page { display: grid; place-items: center; box-sizing: border-box; min-block-size: 100dvh; padding: 24px var(--page-gutter, 16px); background: var(--color-canvas); }
+.ui-status-page__code { margin: 0; font-size: 48px; line-height: 1; font-weight: 700; color: var(--accent-11); font-variant-numeric: tabular-nums; }
+
+/**
+ * Forms and filters (1.4.0): FormField, FormFieldset, ErrorSummary, FormSection, FormActions,
+ * SearchField, FilterPopover, FilterBar, FormPage, SettingsPage.
+ */
+.ui-field { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
+.ui-field[data-layout="inline"] { flex-direction: row; align-items: flex-start; gap: 10px; }
+.ui-field[data-layout="inline"] .ui-field__control { flex: none; padding-block-start: 2px; }
+.ui-field__text { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
+.ui-field__hint { margin: 0; font-size: 13px; color: var(--color-ink-muted); }
+.ui-field__error { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 13px; font-weight: 500; color: var(--red-11); }
+.ui-field__error svg { flex: none; margin-block-start: 2px; }
+.ui-fieldset { display: flex; flex-direction: column; gap: 8px; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
+.ui-fieldset__legend { padding: 0; margin-block-end: 2px; font-size: 14px; font-weight: 500; color: var(--color-ink); }
+
+.ui-error-summary { padding: 16px; border: 2px solid var(--red-9); border-radius: var(--radius-4); background: var(--red-a2); outline: none; }
+.ui-error-summary:focus-visible { outline: 2px solid var(--focus-8); outline-offset: 2px; }
+.ui-error-summary__title { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--color-ink); }
+.ui-error-summary__list { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 4px; }
+.ui-error-summary__list a { color: var(--red-11); font-weight: 500; text-decoration: underline; }
+.ui-error-summary__list a:focus-visible { outline: 2px solid var(--focus-8); outline-offset: 2px; border-radius: var(--radius-1); }
+
+.ui-form-section { container-type: inline-size; padding-block: 24px; border-block-end: 1px solid var(--color-hairline); }
+.ui-form-section:last-of-type { border-block-end: 0; }
+.ui-form-section__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
+@container (width >= 720px) { .ui-form-section__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; } }
+.ui-form-section__title { margin: 0; font-size: 16px; font-weight: 600; color: var(--color-ink); }
+.ui-form-section__description { margin: 4px 0 0; font-size: 14px; color: var(--color-ink-muted); }
+.ui-form-section__fields { display: flex; flex-direction: column; gap: 16px; min-inline-size: 0; }
+
+.ui-form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding-block: 16px; }
+.ui-form-actions[data-align="start"] { justify-content: flex-start; }
+.ui-form-actions[data-align="between"] { justify-content: space-between; }
+@media not (min-width: 768px) {
+  .ui-form-actions[data-sticky] { position: sticky; inset-block-end: var(--bottom-bar-offset, 0px); z-index: 10;
+    margin-inline: calc(-1 * var(--page-gutter, 16px)); padding: 12px var(--page-gutter, 16px) calc(12px + var(--safe-bottom));
+    background-color: var(--material-bar, var(--color-panel-solid)); -webkit-backdrop-filter: var(--material-bar-filter); backdrop-filter: var(--material-bar-filter);
+    box-shadow: inset 0 1px 0 var(--color-hairline); }
+  .ui-form-actions[data-sticky] > * { flex: 1 1 0; }
+}
+
+.ui-search__kbd { pointer-events: none; }
+@media (pointer: coarse) { .ui-search__kbd { display: none; } }
+.ui-count { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-inline-size: 18px; block-size: 18px; padding: 0 5px;
+  border-radius: 9px; background: var(--accent-9); color: var(--accent-contrast); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
+.ui-filter-popover__body { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
+.ui-filter-popover__footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-block-start: 1px solid var(--color-hairline); }
+
+.ui-filter-bar { container-type: inline-size; display: flex; flex-direction: column; gap: 8px; }
+.ui-filter-bar__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.ui-filter-bar__search { flex: 1 1 240px; min-inline-size: 0; }
+.ui-filter-bar__actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
+.ui-filter-bar__active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
+@container (width < 640px) { .ui-filter-bar__search { flex-basis: 100%; } }
+
+.ui-settings { container-type: inline-size; }
+.ui-settings__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
+.ui-settings__list { display: none; margin: 0; padding: 0; list-style: none; }
+.ui-settings__select { display: flex; flex-direction: column; gap: 6px; }
+@container (width >= 768px) {
+  .ui-settings__grid { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
+  .ui-settings__list { display: flex; flex-direction: column; gap: 2px; position: sticky; inset-block-start: calc(var(--topbar-height) + 16px); }
+  .ui-settings__select { display: none; }
+}
+
+/**
+ * Dates and charts (1.5.0): Calendar, DateInput, DateRangePicker, the chart family and
+ * DashboardPage.
+ */
+.ui-calendar { position: relative; display: inline-flex; flex-direction: column; padding: 8px; }
+.ui-calendar__nav { position: absolute; inset-block-start: 8px; inset-inline: 8px; display: flex; justify-content: space-between; pointer-events: none; }
+.ui-calendar__step { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; inline-size: 32px; block-size: 32px;
+  border: 0; border-radius: var(--radius-2); background: none; color: var(--color-ink); cursor: pointer; }
+.ui-calendar__step:disabled { color: var(--gray-8); cursor: default; }
+.ui-calendar__step:focus-visible { outline: 2px solid var(--focus-8); outline-offset: 1px; }
+@media (hover: hover) { .ui-calendar__step:not(:disabled):hover { background: var(--gray-a3); } }
+[dir="rtl"] .ui-calendar__step svg { transform: scaleX(-1); }
+.ui-calendar__months { display: flex; flex-wrap: wrap; gap: 24px; }
+.ui-calendar__title { block-size: 32px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: var(--color-ink); text-transform: capitalize; }
+.ui-calendar__grid { border-collapse: collapse; margin-block-start: 4px; }
+.ui-calendar__grid th { block-size: 28px; padding: 0; font-size: 12px; font-weight: 500; color: var(--color-ink-muted); text-align: center; }
+.ui-calendar__grid td { padding: 1px 0; text-align: center; }
+.ui-calendar__day { position: relative; display: inline-flex; align-items: center; justify-content: center; inline-size: 36px; block-size: 36px;
+  border: 0; border-radius: var(--radius-2); background: none; font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--color-ink); cursor: pointer; }
+.ui-calendar__day[aria-current="date"] { font-weight: 700; box-shadow: inset 0 0 0 1px var(--gray-a7); }
+.ui-calendar__day[data-in-range] { background: var(--accent-a3); border-radius: 0; }
+.ui-calendar__day[data-selected] { background: var(--accent-9); color: var(--accent-contrast); }
+.ui-calendar__day[aria-disabled="true"] { color: var(--gray-8); text-decoration: line-through; cursor: default; }
+.ui-calendar__day:focus-visible { outline: 2px solid var(--focus-8); outline-offset: 1px; z-index: 1; }
+@media (hover: hover) { .ui-calendar__day:not([data-selected]):not([aria-disabled="true"]):hover { background: var(--gray-a3); } }
+@media (pointer: coarse) { .ui-calendar__day { inline-size: 44px; block-size: 44px; } }
+.ui-date-input.rt-Button { justify-content: flex-start; inline-size: 100%; font-weight: 400; }
+.ui-date-input[data-empty] { color: var(--color-ink-muted); }
+.ui-range-picker { display: flex; gap: 8px; }
+.ui-range-picker__presets { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 8px 0 8px 8px; list-style: none; min-inline-size: 140px;
+  border-inline-end: 1px solid var(--color-hairline); }
+.ui-range-picker__presets .ui-nav-item[aria-pressed="true"] { background: var(--accent-a3); color: var(--accent-11); }
+
+.ui-chart { inline-size: 100%; }
+.ui-chart svg { display: block; overflow: visible; }
+.ui-chart--donut { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
+.ui-chart--donut svg { flex: none; }
+.ui-chart__grid { stroke: var(--color-hairline); stroke-width: 1; }
+.ui-chart__axis { stroke: var(--gray-a8); stroke-width: 1; }
+.ui-chart__tick { fill: var(--gray-11); font-size: 11px; font-variant-numeric: tabular-nums; }
+.ui-chart__total { fill: var(--color-ink); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
+.ui-chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--color-ink); }
+.ui-chart-legend li { display: inline-flex; align-items: center; gap: 6px; }
+.ui-chart-legend svg { flex: none; }
+.ui-chart-legend__detail { color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }
+.ui-chart--donut .ui-chart-legend { flex-direction: column; margin: 0; }
+.ui-sparkline { inline-size: 100%; color: var(--accent-9); }
+.ui-sparkline svg { display: block; }
+.ui-chart-frame.rt-Card { padding: 0; }
+.ui-chart-frame__header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 16px 16px 0; }
+.ui-chart-frame__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--color-ink); }
+.ui-chart-frame__description { margin: 2px 0 0; font-size: 13px; color: var(--color-ink-muted); }
+.ui-chart-frame__actions { display: flex; align-items: center; gap: 8px; }
+.ui-chart-frame__body { padding: 12px 16px 16px; }
+.ui-chart-frame__table { overflow-x: auto; }
+
+.ui-dashboard { container-type: inline-size; }
+.ui-dashboard__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
+@container (width >= 640px) {
+  .ui-dashboard__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .ui-dashboard__widget[data-span="2"], .ui-dashboard__widget[data-span="full"] { grid-column: 1 / -1; }
+}
+@container (width >= 1024px) {
+  .ui-dashboard__grid[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .ui-dashboard__grid[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+  .ui-dashboard__widget[data-span="2"] { grid-column: span 2; }
+}
+
+/** Auth pages (1.6.0): AuthLayout and the auth forms. */
+.ui-auth { display: grid; grid-template-columns: minmax(0, 1fr); min-block-size: 100dvh; background: var(--color-canvas); }
+.ui-auth__aside { display: none; }
+@media (min-width: 1024px) {
+  .ui-auth[data-has-aside] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
+  .ui-auth__aside { display: block; position: relative; overflow: hidden; background: var(--color-backdrop); color: var(--color-onbackdrop); }
+}
+.ui-auth__main { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
+  box-sizing: border-box; padding: calc(24px + var(--safe-top)) var(--page-gutter, 16px) calc(24px + var(--safe-bottom)); }
+.ui-auth__toolbar { position: absolute; inset-block-start: calc(12px + var(--safe-top)); inset-inline-end: var(--page-gutter, 16px); }
+.ui-auth__card { box-sizing: border-box; inline-size: 100%; max-inline-size: 400px; padding: 32px; border-radius: var(--radius-5);
+  background: var(--color-panel-solid); box-shadow: 0 0 0 1px var(--color-hairline), 0 8px 24px var(--black-a3); }
+.ui-auth__brand { margin-block-end: 16px; }
+.ui-auth__title { margin: 0; font-size: 22px; line-height: 28px; font-weight: 600; color: var(--color-ink); }
+.ui-auth__description { margin: 6px 0 0; color: var(--color-ink-muted); }
+.ui-auth__footer { font-size: 14px; color: var(--color-ink-muted); text-align: center; }
+@media not (min-width: 520px) {
+  .ui-auth__main { justify-content: flex-start; padding-block-start: calc(56px + var(--safe-top)); }
+  .ui-auth__card { padding: 0; border-radius: 0; background: none; box-shadow: none; }
+}
+.ui-auth-form { display: flex; flex-direction: column; gap: 16px; margin-block-start: 24px; }
+.ui-auth-form__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }
+.ui-auth-form__footer { font-size: 14px; color: var(--color-ink-muted); text-align: center; }
+
+
+/*
+ * Invalid fields (1.6.1). Themes' `color="red"` only colours the focus ring, so an invalid field
+ * looked like any other until focused. The field's own edge turns red too; the message under it
+ * still carries the meaning, so colour is never the only signal.
+ */
+.rt-TextFieldRoot:has(> input[aria-invalid="true"]),
+.rt-TextAreaRoot:has(> textarea[aria-invalid="true"]),
+.rt-SelectTrigger[aria-invalid="true"],
+.ui-date-input.rt-Button[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--red-8); }