@apliteni/apliteni-ui 0.9.1 → 0.11.4

package/src/styles/callout.css

@@ -29,7 +29,7 @@
 /* ----------------------------------------------------------------------------
  * Toast — a floating, dismissible notification.
  * A status (colour) × style (surface) matrix, entirely token-driven:
- *   status  success · danger · warn · info · neutral  → sets --toast-accent/-glow/-on/-solid
+ *   status  success · danger · warn · info · neutral  → sets --toast-accent/-action-ink/-glow/-on/-solid
  *   style   soft (tinted) · solid (filled) · outline (bordered)
  * -------------------------------------------------------------------------- */
 .ui-toast {
@@ -51,12 +51,21 @@
    --toast-accent is the status as a line or a small mark, --toast-glow its wash,
    --toast-on the glyph ink on the accent circle. --toast-solid is separate on
    purpose: a full fill is a different job from a 22px circle, and it is chosen
-   as a PAIR with --signal-solid-ink rather than against a global. See #149. */
-.ui-toast--success { --toast-accent: var(--green); --toast-glow: var(--glow-green); --toast-on: var(--signal-contrast); --toast-solid: var(--signal-solid-success); }
-.ui-toast--danger  { --toast-accent: var(--pink);  --toast-glow: var(--glow-pink);  --toast-on: var(--danger-contrast); --toast-solid: var(--signal-solid-danger); }
-.ui-toast--warn    { --toast-accent: var(--amber); --toast-glow: color-mix(in srgb, var(--amber) 14%, transparent); --toast-on: var(--signal-contrast); --toast-solid: var(--signal-solid-warn); }
-.ui-toast--info    { --toast-accent: var(--cyan);  --toast-glow: var(--glow-cyan);  --toast-on: var(--signal-contrast); --toast-solid: var(--signal-solid-info); }
-.ui-toast--neutral { --toast-accent: var(--muted); --toast-glow: var(--surface-2); --toast-on: var(--strong); --toast-solid: var(--signal-solid-neutral); }
+   as a PAIR with --signal-solid-ink rather than against a global. See #149.
+
+   --toast-action-ink is separate from --toast-accent for the same reason the
+   fill is: the accent is a graphic colour, sized for a 3px rule and a 22px
+   circle, and in the light theme it is not a colour text can be set in. The
+   trailing action is the one part of a toast that is BOTH the status colour and
+   a piece of text, so it takes the chip inks, which are the text-grade version
+   of the same five statuses. In the dark theme the two are the same value by
+   construction — --chip-success-ink IS --green there — so this splits the light
+   theme apart and leaves the dark one exactly as it was. */
+.ui-toast--success { --toast-accent: var(--green); --toast-action-ink: var(--chip-success-ink); --toast-glow: var(--glow-green); --toast-on: var(--signal-contrast); --toast-solid: var(--signal-solid-success); }
+.ui-toast--danger  { --toast-accent: var(--pink);  --toast-action-ink: var(--chip-danger-ink);  --toast-glow: var(--glow-pink);  --toast-on: var(--danger-contrast); --toast-solid: var(--signal-solid-danger); }
+.ui-toast--warn    { --toast-accent: var(--amber); --toast-action-ink: var(--chip-warn-ink);    --toast-glow: color-mix(in srgb, var(--amber) 14%, transparent); --toast-on: var(--signal-contrast); --toast-solid: var(--signal-solid-warn); }
+.ui-toast--info    { --toast-accent: var(--cyan);  --toast-action-ink: var(--chip-info-ink);    --toast-glow: var(--glow-cyan);  --toast-on: var(--signal-contrast); --toast-solid: var(--signal-solid-info); }
+.ui-toast--neutral { --toast-accent: var(--muted); --toast-action-ink: var(--muted);            --toast-glow: var(--surface-2); --toast-on: var(--strong); --toast-solid: var(--signal-solid-neutral); }
 
 /* left status marker (soft + outline; solid is already a full fill) */
 .ui-toast--soft::before,
@@ -71,9 +80,16 @@
 .ui-toast__title { font-weight: var(--weight-medium); color: var(--strong); }
 .ui-toast__text { color: var(--dim); }
 
-/* trailing action ("Undo" / "Retry") */
-.ui-toast__action { flex: none; align-self: center; background: none; border: 0; padding: 4px 9px; border-radius: var(--radius-xs); font: inherit; font-weight: var(--weight-medium); color: var(--toast-accent); cursor: pointer; }
-.ui-toast__action:hover { background: color-mix(in srgb, var(--toast-accent) 14%, transparent); }
+/* trailing action ("Undo" / "Retry") — status-coloured TEXT, so it takes the
+   text-grade ink rather than the accent.
+   The hover wash is the page background rather than the accent again: a second
+   accent tint on an already accent-tinted ground moved the ground TOWARDS the
+   ink and took every soft pair below the floor. --bg is white in the light theme
+   and near-black in the dark one, so one expression lightens the ground where
+   the ink is dark and darkens it where the ink is bright — the hovered pair is
+   at or above the resting pair in both. */
+.ui-toast__action { flex: none; align-self: center; background: none; border: 0; padding: 4px 9px; border-radius: var(--radius-xs); font: inherit; font-weight: var(--weight-medium); color: var(--toast-action-ink); cursor: pointer; }
+.ui-toast__action:hover { background: color-mix(in srgb, var(--bg) 55%, transparent); }
 
 .ui-toast__close { flex: none; align-self: flex-start; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px; display: grid; place-items: center; }
 .ui-toast__close svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }
@@ -108,7 +124,10 @@
 .ui-toast--solid .ui-toast__text { color: color-mix(in srgb, var(--toast-ink) 90%, transparent); }
 .ui-toast--solid .ui-toast__icon { background: color-mix(in srgb, var(--toast-ink) 22%, transparent); color: var(--toast-ink); }
 .ui-toast--solid .ui-toast__action { color: var(--toast-ink); }
-.ui-toast--solid .ui-toast__action:hover { background: color-mix(in srgb, var(--toast-ink) 18%, transparent); }
+/* Hover darkens the FILL rather than lightening the ink. Washing the ink over
+   itself was the one surface #149 did not reach, and it worked against the pair
+   it was drawn from: it pulled the fill towards the ink it has to clear. */
+.ui-toast--solid .ui-toast__action:hover { background: color-mix(in srgb, var(--signal-contrast) 14%, transparent); }
 .ui-toast--solid .ui-toast__close { color: color-mix(in srgb, var(--toast-ink) 68%, transparent); }
 .ui-toast--solid .ui-toast__close:hover { color: var(--toast-ink); }
 .ui-toast--solid .ui-toast__timer { background: color-mix(in srgb, var(--toast-ink) 55%, transparent); }

package/src/styles/confirm.css

@@ -0,0 +1,130 @@
+/* ============================================================================
+ * Confirm — the kit's confirmation dialog: a centred panel over a scrim, for
+ * the question a destructive action has to ask. Fully token-driven so it
+ * re-themes across accents + light/dark. Shares its scrim + focus-trap
+ * behaviour with the drawer (see overlay.js).
+ *
+ * Motion is the drawer's, deliberately: --dur-med/--ease, and `visibility`
+ * switched rather than transitioned. A transitioned visibility is still
+ * `hidden` in the frame the class lands, so openConfirm()'s focus() would have
+ * nothing to focus and the reader would be left on <body>. The root owns the
+ * switch; the panel and scrim inherit it.
+ *
+ * Local tokens (surface/shadow/scrim) so the panel + scrim re-theme cleanly:
+ *   --confirm-surface  panel background     --confirm-shadow  panel elevation
+ *   --confirm-scrim    backdrop colour (--scrim already re-themes per theme)
+ * ========================================================================== */
+
+.ui-confirm {
+  --confirm-surface: var(--surface-2);
+  --confirm-shadow: var(--shadow-lg);
+  --confirm-scrim: var(--scrim);
+  --confirm-w: 420px;
+
+  position: fixed;
+  inset: 0;
+  /* One above the drawer's own overlay level: a confirm asks a question about the
+     drawer it was opened over, so it has to be readable above it whatever order
+     the two are mounted in. */
+  z-index: calc(var(--z-overlay) + 1);
+  pointer-events: none; /* container never blocks; scrim/panel opt back in */
+
+  /* Only the hide is transitioned, so the panel is still on screen while it
+     fades out; the show is instant, because focus moves in the same frame.
+     `linear` and not var(--ease): visibility is discrete, easing a step buys
+     nothing, and a curve that leaves [0, 1] would flip it mid-fade. */
+  visibility: hidden;
+  transition: visibility var(--dur-med) linear;
+}
+.ui-confirm.is-open { visibility: visible; transition: none; }
+
+/* Hit-testable only while open. The root stays visible for --dur-med after
+   closeConfirm() has stopped trapping, and an accept button that is still
+   clickable in that window runs the caller's destructive work a second time. */
+.ui-confirm.is-open .ui-confirm__scrim,
+.ui-confirm.is-open .ui-confirm__panel { pointer-events: auto; }
+
+.ui-confirm__scrim {
+  position: absolute;
+  inset: 0;
+  background: var(--confirm-scrim);
+  opacity: 0;
+  transition: opacity var(--dur-med) var(--ease);
+}
+.ui-confirm.is-open .ui-confirm__scrim { opacity: 1; }
+
+/* Panel — centred with `translate` so the entrance can own `transform` without
+   dropping the panel into the corner when it resets to none. */
+.ui-confirm__panel {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+  width: min(var(--confirm-w), calc(100vw - var(--space-8)));
+  /* A fixed, centred panel cannot be scrolled into view — scrollIntoView does
+     nothing to it — so a panel taller than the viewport puts its answers below
+     the fold for good. Bound it, and let the consequence scroll instead. The
+     dvh line wins where it is understood; the vh line is what holds it up
+     everywhere else. */
+  max-height: calc(100vh - var(--space-8));
+  max-height: calc(100dvh - var(--space-8));
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: var(--space-5);
+  background: var(--confirm-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--confirm-shadow);
+  opacity: 0;
+  transform: translateY(8px);
+  transition:
+    opacity var(--dur-med) var(--ease),
+    transform var(--dur-med) var(--ease);
+}
+.ui-confirm.is-open .ui-confirm__panel { opacity: 1; transform: none; }
+.ui-confirm__panel:focus-visible { outline: none; box-shadow: var(--confirm-shadow), var(--ring); }
+
+/* -- Slots ----------------------------------------------------------------- */
+/* The question and the answers keep their size; the consequence between them is
+   the one that gives, and scrolls — the same split the drawer's header / body /
+   footer makes. */
+.ui-confirm__title {
+  margin: 0;
+  flex: none;
+  font-family: var(--font-sans);
+  font-size: var(--text-md);
+  font-weight: var(--weight-semibold);
+  line-height: 1.35;
+  color: var(--strong);
+}
+.ui-confirm__body {
+  margin: 0;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-normal);
+  line-height: 1.55;
+  color: var(--muted);
+}
+.ui-confirm__acts {
+  display: flex;
+  flex: none;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-2);
+  margin-top: var(--space-2);
+}
+
+/* -- Reduced motion: no rise, just a fade --------------------------------- */
+@media (prefers-reduced-motion: reduce) {
+  .ui-confirm { transition: visibility var(--dur-fast) linear; }
+  .ui-confirm__panel {
+    transform: none;
+    transition: opacity var(--dur-fast) linear;
+  }
+  .ui-confirm__scrim { transition: opacity var(--dur-fast) linear; }
+}

package/src/styles/drawer.css

@@ -1,9 +1,9 @@
 /* ============================================================================
  * Drawer — edge-anchored overlay panel (Sheet / Slide-over): a panel that
  * slides in from any screen edge over a scrim. Fully token-driven so it
- * re-themes across accents + light/dark. Shares its scrim + focus-trap concept
- * with a future Modal (see drawer.js). `prefers-reduced-motion` drops the slide
- * for a plain fade.
+ * re-themes across accents + light/dark. Shares its scrim + focus trap with
+ * confirm() (see overlay.js). `prefers-reduced-motion` drops the slide for a
+ * plain fade.
  *
  * Local tokens (surface/shadow/scrim) so the panel + scrim re-theme cleanly:
  *   --drawer-surface  panel background      --drawer-shadow  panel elevation
@@ -21,18 +21,35 @@
   inset: 0;
   z-index: var(--z-overlay);
   pointer-events: none; /* container never blocks; scrim/panel opt back in */
+
+  /* One place owns "is this drawer on screen at all", and the scrim and panel
+     inherit it. Only the HIDE is transitioned, so the panel is still on screen
+     while it slides out; the show is instant (`.is-open` cancels the
+     transition) because openDrawer() focuses a control in the same frame it
+     opens, and focus() on a hidden element does nothing. `linear` and not
+     var(--ease): visibility is discrete, easing a step buys nothing, and a curve
+     that leaves [0, 1] would flip it in the middle of the fade. */
+  visibility: hidden;
+  transition: visibility var(--dur-med) linear;
 }
-/* Scrim — fades in; visibility trails the fade so the panel can animate out. */
+.ui-drawer.is-open { visibility: visible; transition: none; }
+
+/* Hit-testable only while open. The root stays visible for --dur-med after
+   closeDrawer() has stopped trapping, and any control still clickable in that
+   window — the footer's actions, the close button — runs the caller's handler
+   again on the way out. */
+.ui-drawer.is-open .ui-drawer__scrim,
+.ui-drawer.is-open .ui-drawer__panel { pointer-events: auto; }
+
+/* Scrim — fades in and out; the drawer root decides when it stops existing. */
 .ui-drawer__scrim {
   position: absolute;
   inset: 0;
   background: var(--drawer-scrim);
-  pointer-events: auto;
   opacity: 0;
-  visibility: hidden;
-  transition: opacity var(--dur-med) var(--ease), visibility var(--dur-med) var(--ease);
+  transition: opacity var(--dur-med) var(--ease);
 }
-.ui-drawer.is-open .ui-drawer__scrim { opacity: 1; visibility: visible; }
+.ui-drawer.is-open .ui-drawer__scrim { opacity: 1; }
 
 /* Panel — the sliding surface. Flex column: header / scrollable body / footer. */
 .ui-drawer__panel {
@@ -41,16 +58,13 @@
   flex-direction: column;
   background: var(--drawer-surface);
   box-shadow: var(--drawer-shadow);
-  pointer-events: auto;
   opacity: 1;
-  visibility: hidden;
   transition:
     transform var(--dur-med) var(--ease),
-    opacity var(--dur-med) var(--ease),
-    visibility var(--dur-med) var(--ease);
+    opacity var(--dur-med) var(--ease);
 }
 .ui-drawer__panel:focus-visible { outline: none; box-shadow: var(--drawer-shadow), var(--ring); }
-.ui-drawer.is-open .ui-drawer__panel { visibility: visible; transform: none; }
+.ui-drawer.is-open .ui-drawer__panel { transform: none; }
 
 /* -- Edge anchoring + slide-in direction ---------------------------------- */
 .ui-drawer--right .ui-drawer__panel,
@@ -154,11 +168,12 @@
 
 /* -- Reduced motion: no slide, just a fade -------------------------------- */
 @media (prefers-reduced-motion: reduce) {
+  .ui-drawer { transition: visibility var(--dur-fast) linear; }
   .ui-drawer__panel {
     transform: none !important;
     opacity: 0;
-    transition: opacity var(--dur-fast) linear, visibility var(--dur-fast) linear;
+    transition: opacity var(--dur-fast) linear;
   }
   .ui-drawer.is-open .ui-drawer__panel { opacity: 1; }
-  .ui-drawer__scrim { transition: opacity var(--dur-fast) linear, visibility var(--dur-fast) linear; }
+  .ui-drawer__scrim { transition: opacity var(--dur-fast) linear; }
 }

package/src/styles/layout.css

@@ -1,54 +1,209 @@
 /* ============================================================================
- * Layout primitives — account sidebar, page shell, auth card, landing hero.
+ * Layout primitives — the page shell, the auth card, the landing hero.
  * These compose the example apps; each stays token-driven and themeable.
+ * The hand-written .ui-side rail and .ui-shell grid are gone: appShell() draws
+ * the rail with sidebarNav(), so nothing emitted that markup any more.
  * ========================================================================== */
 
-/* -- Account sidebar (from viz/account.mjs .side) ------------------------ */
-.ui-side { position: sticky; top: 80px; align-self: start; }
-.ui-side .cap {
-  font-size: 11px;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  color: var(--muted);
-  padding: 0 12px 11px;
-}
-.ui-side a {
+/* -- The one page shell (appShell) --------------------------------------- */
+/* A full-height rail beside one <main>. The rail's own rows are sidebarNav()'s
+   (.ui-nav--side), so nothing here restyles a nav item — these rules place the
+   rail, its brand head and its signed-in footer, and set the reading column. */
+.ui-app {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  min-height: calc(100vh - var(--ui-app-top, 0px));
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font-sans);
+}
+/* With a topbar above it, the shell starts below one. 52px is .topbar's height
+   in topbar.css; the topbar sticks so the rail below it can too. */
+.ui-app-page { --ui-app-top: 52px; }
+.ui-app-page .topbar { position: sticky; top: 0; z-index: var(--z-sticky); }
+
+/* --surface-2, not --bg-elevated: elevated resolves to --bg itself in the light
+   theme, an exact no-op that left the border as the whole of the rail.
+   overflow-y, because the box is pinned at the viewport's height for the whole
+   scroll of .ui-app — without it a row past that height paints below the fold
+   and no amount of document scrolling brings it back. The rail's own padding is
+   what keeps a focus ring out of the clip, so it stays above --ring's spread. */
+.ui-app__rail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+  padding: var(--space-5) var(--space-4);
+  border-right: 1px solid var(--border);
+  background: var(--surface-2);
+  position: sticky;
+  top: var(--ui-app-top, 0px);
+  height: calc(100vh - var(--ui-app-top, 0px));
+  overflow-y: auto;
+}
+/* The rail's hover WAS --surface-2, so moving the rail onto it would have made
+   hovering a row do nothing. Scoped, so a sidebarNav() anywhere else is
+   untouched — and the destructive row is left out, because this rule ties with
+   nav.css's danger wash on specificity and wins on source order alone. Sign out
+   was quietly losing the --pink wash the guideline page cites nav.css for. The
+   current row is left out for the same reason: this rule outranks nav.css's
+   active hover, and painting --surface-3 over a row already resting on it is
+   what made the row you are standing on the one row that ignores the pointer. */
+.ui-app__rail .ui-nav__item:not(.is-danger):not(.is-active):hover { background: var(--surface-3); }
+.ui-app__brand {
   display: flex;
   align-items: center;
-  gap: 11px;
-  padding: 10px 13px;
-  border-radius: 10px;
-  color: var(--text);
+  gap: var(--space-2);
+  padding: 2px 6px;
   text-decoration: none;
-  font-size: 14.5px;
-}
-.ui-side a:hover { background: var(--surface-2); }
-.ui-side a.on { background: var(--surface); color: var(--strong); font-weight: 500; }
-.ui-side a svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; opacity: 0.7; }
-.ui-side a.on svg { opacity: 1; stroke: var(--accent); }
-.ui-side .ssep { height: 1px; background: var(--border); margin: 8px 12px; }
-.ui-side a.out { color: var(--muted); }
-.ui-side a.out:hover { color: var(--pink); }
+  font-weight: var(--weight-semibold);
+  letter-spacing: var(--tracking-tight);
+}
+/* Carries the shell's class as well as its own, for the same reason the rail
+   rows do (see nav.css): a host stylesheet's `a:link` is (0,1,1). */
+.ui-app .ui-app__brand { color: var(--strong); }
+.ui-app__brand svg { display: block; flex: none; }
 
-/* -- Account shell grid -------------------------------------------------- */
-.ui-shell {
-  position: relative;
-  z-index: 1;
-  max-width: 960px;
-  margin: 0 auto;
-  padding: 40px 26px 96px;
-  display: grid;
-  grid-template-columns: 200px 1fr;
-  gap: 44px;
-}
-.ui-shell__page { min-width: 0; }
-.ui-shell__crumbs { font-size: 13px; color: var(--dim); margin-bottom: 8px; }
-.ui-shell__crumbs b { color: var(--text); font-weight: 500; }
-.ui-shell__page h1 { color: var(--strong); font-weight: 600; font-size: 30px; letter-spacing: -0.01em; margin-bottom: 7px; }
-.ui-shell__page .sub { color: var(--dim); font-size: 15.5px; margin-bottom: 30px; }
+/* The nav grows, so the reader block below it pins to the bottom of a full-height
+   rail instead of hugging the last nav row, and the nav's own footer — sign out —
+   sits directly above it. */
+.ui-app__rail .ui-nav--side { flex: 1 1 auto; }
+.ui-app__rail .ui-nav__foot { margin-top: auto; }
+
+/* Which row is current is structural here, not chromatic: the resting glyphs
+   step down so the current one is the brightest whatever --accent is doing, and
+   the bar beside it carries the hue. A 3x17px bar on a 45x44 tile was the
+   smallest of three weak signals doing the most work, so it grows with the row. */
+.ui-app__rail .ui-nav__ic svg { opacity: 0.62; }
+.ui-app__rail .ui-nav__item.is-active .ui-nav__ic svg,
+.ui-app__rail .ui-nav__item.is-current .ui-nav__ic svg { opacity: 1; stroke: currentColor; }
+.ui-app__rail .ui-nav__item.is-active::before { width: 3px; height: 62%; }
+
+/* Sign out is a navigation row and rests like one. The danger intent is the
+   step nav.css writes for it, which a resting --muted was pre-empting — it made
+   the last row of the rail the quietest thing in it. Both of nav.css's danger
+   states are named here, not hover alone: this rule outranks them, so a state
+   it forgets is a state it silently cancels. */
+.ui-app__rail .ui-nav__item.is-danger:not(:hover):not(:focus-visible) { color: var(--text); }
+
+/* One rule closes the rail, not two twenty pixels apart: the nav's own footer
+   keeps its hairline and the reader block is separated by space alone — it has
+   an avatar and a weight change already. */
+.ui-app__user {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-5) var(--space-1) 0;
+}
+.ui-app__av {
+  width: 30px; height: 30px; flex: none;
+  border-radius: var(--radius-pill);
+  background: var(--surface-3);
+  color: var(--strong);
+  display: grid; place-items: center;
+  font-size: 12px;
+  font-weight: var(--weight-semibold);
+}
+.ui-app__who { font-size: 12.5px; line-height: 1.3; min-width: 0; }
+.ui-app__who b { display: block; color: var(--strong); font-weight: var(--weight-semibold); }
+/* nowrap is what makes the ellipsis fire — without it the address wraps, and
+   the rail column is max-content, so a long one widens the rail instead. */
+.ui-app__who span { display: block; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+/* The reading column centres in the track it is given — without width: 100% it
+   was hugging the rail, 519px of dead background on the right at 1728px wide.
+   The width is what keeps the auto margins honest: an auto inline margin takes
+   a grid item out of stretch, and Chrome then lays it out at its max-content
+   width, which is how the payout ledger pushed the page 529px sideways at 375.
+   The 860px is the floor for hand-written markup — shell.js validates what it
+   writes into --ui-app-main and falls back to this same number. */
+.ui-app__main {
+  min-width: 0;
+  width: 100%;
+  max-width: var(--ui-app-main, 860px);
+  margin-inline: auto;
+  padding: 40px clamp(24px, 4vw, 56px) 72px;
+}
+/* Crumb, then the title block. At --space-2 the crumb sat 8px off the h1 and
+   the h1 8px off its subtitle, so all three ranks read as one. */
+.ui-app__main .ui-nav--crumbs { margin-bottom: var(--space-5); }
+.ui-app__main h1 {
+  color: var(--strong);
+  font-size: 30px;
+  font-weight: var(--weight-bold);
+  line-height: 1.1;
+  letter-spacing: var(--tracking-tight);
+  margin-bottom: 8px;
+}
+.ui-app__sub { color: var(--dim); font-size: 15px; line-height: 1.6; max-width: 60ch; margin-bottom: 32px; }
+.ui-app__body { display: flex; flex-direction: column; gap: var(--space-5); }
+/* A flex child's min-width is its content by default, so one wide block — a
+   ledger, a code sample — pushes the whole page sideways instead of scrolling
+   inside itself. This is what keeps the shell narrower than the window. */
+.ui-app__body > * { min-width: 0; }
+
+/* -- A row of controls above a list --------------------------------------- */
+/* Filter fields, a segmented switch, the button that applies them. The row is
+   one line wherever the line holds and breaks where it does not, and the text
+   field is what makes that one decision instead of two: an .ui-input is
+   width:100%, so as a flex item its hypothetical size is the whole container
+   and wrapping alone put every control beside it on a second line at 1280 as
+   readily as at 375. Given a basis of its own the field shares the line, takes
+   the slack when there is any, and the line breaks only once the field would be
+   squeezed under that basis — 6rem, about as narrow as a placeholder plus a word
+   of what you typed. min-width:0 keeps an input's automatic minimum (its `size`
+   attribute, ~20 characters) from setting a floor well above the basis. */
+.ui-toolbar { display: flex; flex-wrap: wrap; gap: 10px; }
+.ui-toolbar > .ui-input,
+.ui-toolbar > .ui-input-group { flex: 1 1 6rem; min-width: 0; }
+
+/* -- The narrow rail ------------------------------------------------------ */
+/* Below this width the rail folds to an icon strip instead of disappearing.
+   sidebarNav() names every row at every width, so folding the label out of view
+   costs a screen reader nothing. Scoped to the shell's own rail — a sidebarNav()
+   somewhere else keeps its labels. The 44px floor is the touch target, and the
+   column is that floor plus the rail's own padding and border — measured, not
+   guessed. Nothing here resizes the glyph: an icon-sizing rule inside a media
+   query is one src/styles/icon-size.test.js cannot measure, and it says so. */
 @media (max-width: 720px) {
-  .ui-shell { grid-template-columns: 1fr; gap: 20px; }
-  .ui-side { position: static; }
+  .ui-app { grid-template-columns: 58px 1fr; }
+  .ui-app__rail { padding: var(--space-3) 6px; gap: var(--space-3); }
+  .ui-app__rail .ui-nav--side { width: auto; }
+  .ui-app__rail .ui-nav__cap,
+  .ui-app__rail .ui-nav__label,
+  .ui-app__rail .ui-nav__badge,
+  .ui-app__rail .ui-nav__caret,
+  .ui-app__rail .ui-app__who,
+  .ui-app__brand span { display: none; }
+  .ui-app__rail .ui-nav__item { justify-content: center; gap: 0; padding: 0; min-height: 44px; }
+  .ui-app__rail .ui-nav__item.is-active::before { left: 3px; }
+  .ui-app__rail .ui-nav__foot { padding-top: var(--space-2); }
+  .ui-app__brand { justify-content: center; padding: 2px 0; }
+  .ui-app__user { justify-content: center; padding-left: 0; padding-right: 0; }
+  /* A group's children are rail rows at this width too. The nested list is NOT
+     folded away: wireNav() toggles the `hidden` attribute and nothing else, so
+     a display:none here left the toggle announcing aria-expanded over a list it
+     could not reach — and took the row carrying aria-current with it. What goes
+     instead is the indent and its guide hairline; a 46px column has no room. */
+  .ui-app__rail .ui-nav__sub { margin: 0; padding-left: 0; border-left: 0; }
+  .ui-app__rail .ui-nav__item--sub.is-active::before { left: 3px; }
+  /* sidebarNav() takes `icon` as optional at every level, and the glyph is the
+     whole of a row on screen here — so a row without one, at any level, would be
+     a blank 44px target. It gets a dot in the row's own ink instead; the
+     aria-label names it either way. */
+  .ui-app__rail .ui-nav__item:not(:has(.ui-nav__ic))::after {
+    content: "";
+    width: 5px; height: 5px;
+    border-radius: 50%;
+    background: currentColor;
+    opacity: 0.62;
+  }
+  .ui-app__main { padding: 28px var(--space-4) 56px; }
+  .ui-app__main h1 { font-size: 25px; }
+  /* A settings row is label-beside-control down to the width where the control
+     no longer fits beside anything; below that it stacks. Scoped to the shell
+     rather than written into card.css, because a card row outside a shell is
+     somebody else's container to size — see the report. */
+  .ui-app__main .ui-card__row { flex-wrap: wrap; gap: var(--space-3); }
 }
 
 /* -- Auth card (sign-in / consent) — centered, glowing --------------------- */

package/src/styles/nav.css

@@ -1,8 +1,8 @@
 /* ============================================================================
  * Navigation — sidebar rail, horizontal tabs, breadcrumbs. One token-driven
  * class family (ui-nav__…) so every variant re-themes across accents +
- * light/dark. Mirrors the look the app shells draw inline (.ui-side) but as a
- * first-class, standalone component. Active/hover surfaces are pure tokens.
+ * light/dark. appShell() draws its rail from sidebarNav(), so this file is the
+ * page shell's rail as well as a standalone component. States are pure tokens.
  * ========================================================================== */
 
 .ui-nav { font-family: var(--font-sans); }
@@ -35,7 +35,6 @@
   width: 100%;
   padding: 9px 12px;
   border-radius: 10px;
-  color: var(--text);
   text-decoration: none;
   font-size: 14.5px;
   font-weight: 400;
@@ -47,6 +46,7 @@
   font-family: inherit;
   transition: background 0.16s var(--ease), color 0.16s var(--ease);
 }
+.ui-nav .ui-nav__item { color: var(--text); } /* (0,2,0): a host sheet's a:link is (0,1,1) — why: docs/adr/0007-one-page-shell-built-from-the-kits-own-nav.md */
 .ui-nav__item:hover { background: var(--surface-2); color: var(--strong); }
 .ui-nav__item.is-active {
   background: var(--surface-3);
@@ -75,12 +75,26 @@
 .ui-nav__item.is-current .ui-nav__ic svg { opacity: 1; stroke: var(--accent); }
 .ui-nav__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
-/* Destructive row (sign out, revoke). Quiet at rest, --pink once the pointer
-   reaches it — same two-step as .ui-btn--danger and .ui-dropdown__item.is-danger. */
+/* Destructive row (sign out, revoke). Quiet at rest, --pink once a pointer or
+   the keyboard reaches it — as .ui-btn--danger and .ui-dropdown__item do. */
 .ui-nav__item.is-danger { color: var(--muted); }
 .ui-nav__item.is-danger:hover { background: var(--glow-pink); color: var(--pink); }
+/* Tabbing onto it is the same "about to click this" the pointer means. The ring
+   says where you are; only this says what the row does. */
+.ui-nav__item.is-danger:focus-visible { background: var(--glow-pink); color: var(--pink); }
 .ui-nav__item.is-disabled { color: var(--muted); opacity: 0.55; cursor: default; pointer-events: none; }
 
+/* The current row under the pointer. It rests on --surface-3, which is also what
+   a resting row hovers to, so the one row with no hover response was the row the
+   reader is standing on. There is no surface above --surface-3, so the step is
+   mixed: --text is near-white in dark and near-black in light, and both themes
+   raise a surface by moving it away from the page. Written after the danger
+   rules so it cannot out-rank them — sign out is never the current row, but a
+   rule that could take its wash would be one to argue with later. */
+.ui-nav__item.is-active:not(.is-danger):hover {
+  background: color-mix(in srgb, var(--text) 10%, var(--surface-3));
+}
+
 /* Per-item badge / counter */
 .ui-nav__badge {
   flex: none;
@@ -101,6 +115,16 @@
 .ui-nav__badge.is-live { background: var(--chip-success-fill); color: var(--chip-success-ink); }
 .ui-nav__badge.is-danger { background: var(--glow-pink); color: var(--pink); }
 .ui-nav__item.is-active .ui-nav__badge.is-neutral { background: var(--surface-3); color: var(--strong); }
+/* Same shape, one row up: on an active row the accent counter takes the row's
+   OWN surface instead of laying its wash over it. An active row is already
+   painted --surface-3, so --glow-purple there is two tints stacked. Every
+   figure here is measured against the tokens this kit now ships. The accent on
+   that pair falls under WCAG AA in four of the eight theme x accent cells —
+   4.08 in dark Nebula, where the flat surface reads 4.92 — and no alpha reaches
+   it, the largest that clears being 0.06 in dark Nebula and 0.02 in light
+   Emerald. So the accent wash is painted on a base surface, never a raised one.
+   See #157 and docs/adr/0006-the-accent-is-measured-against-its-own-wash.md. */
+.ui-nav__item.is-active .ui-nav__badge.is-accent { background: var(--surface-3); color: var(--accent); }
 
 /* Collapsible group */
 .ui-nav__group { display: flex; flex-direction: column; }
@@ -213,11 +237,14 @@
   gap: 6px;
   padding: 3px 6px;
   border-radius: 7px;
-  color: var(--dim);
   text-decoration: none;
   font-size: 13px;
   transition: color 0.16s var(--ease), background 0.16s var(--ease);
 }
+/* Carries the block's class as well as its own, for the reason .ui-nav__item
+   does above: a linked crumb is an <a>, and a host stylesheet's `a:link` is
+   (0,1,1), which outranks a bare (0,1,0) class. */
+.ui-nav .ui-nav__crumb { color: var(--dim); }
 a.ui-nav__crumb:hover { color: var(--strong); background: var(--surface-2); }
 a.ui-nav__crumb:focus-visible { outline: none; box-shadow: var(--ring); }
 .ui-nav__crumb.is-current { color: var(--strong); font-weight: 500; }