@apliteni/apliteni-ui 0.11.4 → 0.23.1

package/src/styles/loading.css

@@ -0,0 +1,144 @@
+/* ============================================================================
+ * Loading and permission-denied — the screen-scale states.
+ *
+ * Markup comes from components/loading.js:
+ *
+ *   <div class="ui-busy" role="status" aria-live="polite" aria-busy="true">
+ *     <span class="ui-sr">Loading your report…</span>
+ *     <div class="ui-busy__body">
+ *       <div class="ui-skel" aria-hidden="true">
+ *         <span class="ui-skel__bar m-skeleton"></span>…
+ *
+ *   <div class="ui-denied">
+ *     <div class="ui-denied__seal">…lock…</div>
+ *     <div class="ui-denied__title">You don’t have access</div>
+ *     <div class="ui-denied__sub">…</div>
+ *     <div class="ui-denied__need">Needs <code class="ui-code">reports.read</code></div>
+ *     <div class="ui-denied__actions">…</div>
+ *
+ * The shimmer is .m-skeleton from styles/motion.css — this file owns layout and
+ * nothing else about the animation, so reduced motion is already handled by the
+ * global block at the end of that file and there is one shimmer in the kit.
+ *
+ * .ui-denied deliberately borrows every colour .ui-empty uses. To a reader the
+ * two are the same event — what you came for is not here — and giving denial
+ * its own red made it read as a fault the reader had committed. The lock says
+ * which of the two it is.
+ * ========================================================================== */
+
+/* Visually hidden, still read aloud. The kit had no such utility, and the live
+   region needs one: its message is for assistive tech only — the sighted
+   reader is already looking at the skeleton. */
+.ui-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* -- The live region ------------------------------------------------------- */
+.ui-busy {
+  display: block;
+}
+
+/* -- Skeleton -------------------------------------------------------------- */
+.ui-skel {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.ui-skel__bar {
+  display: block;
+  height: 13px;
+  width: 100%;
+  border-radius: var(--radius-xs);
+}
+/* Last line of a paragraph run stops short, the way real prose does — a block
+   of four identical full-width bars reads as a table, not as text. Any explicit
+   width from skeleton({ lines: [...] }) is inline and still wins. */
+.ui-skel > .ui-skel__bar:last-child:not(:only-child) {
+  width: 62%;
+}
+
+/* Table shape: the column rhythm the real table will have, so the placeholder
+   does not resize the page out from under the reader when the rows land. */
+.ui-skel--table {
+  gap: 0;
+}
+.ui-skel--table .ui-skel__row {
+  display: grid;
+  grid-template-columns: 1.6fr repeat(calc(var(--skel-cols) - 1), 1fr);
+  gap: 18px;
+  align-items: center;
+  padding: 14px 0;
+  border-bottom: 1px solid var(--border);
+}
+.ui-skel--table .ui-skel__row:last-child {
+  border-bottom: 0;
+}
+.ui-skel--table .ui-skel__bar {
+  height: 11px;
+}
+.ui-skel--table .ui-skel__row--head .ui-skel__bar {
+  height: 9px;
+  width: 58%;
+  opacity: 0.7;
+}
+
+/* -- Permission denied ----------------------------------------------------- */
+.ui-denied {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 8px;
+  padding: 48px 24px;
+  color: var(--muted);
+}
+.ui-denied__seal {
+  width: 44px;
+  height: 44px;
+  margin-bottom: 6px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  color: var(--dim);
+  background: color-mix(in srgb, var(--text) 7%, transparent);
+}
+.ui-denied__seal svg {
+  width: 20px;
+  height: 20px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 1.9;
+}
+.ui-denied__title {
+  color: var(--text);
+  font-size: var(--text-md);
+  font-weight: var(--weight-medium);
+  margin: 2px 0 0;
+}
+.ui-denied__sub {
+  font-size: var(--text-sm);
+  max-width: var(--prose-caption);
+  margin: 0;
+  line-height: 1.55;
+}
+/* The missing scope, verbatim. A reader who can name what they lack can ask
+   for it; "insufficient permissions" sends them to a ticket to find out. */
+.ui-denied__need {
+  font-size: var(--text-sm);
+  margin-top: 4px;
+}
+.ui-denied__actions {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  margin-top: 12px;
+}

package/src/styles/motion.css

@@ -16,8 +16,11 @@
  * apliteni-ui/motion. Without JS, [data-reveal] content stays fully visible
  * (progressive enhancement, never hidden behind a script that didn't run).
  *
- * A single global prefers-reduced-motion block at the end neutralises ALL of
- * the above — plus any component animation in the kit — as the safety net.
+ * The global prefers-reduced-motion net that neutralises ALL of the above — plus
+ * any component animation in the kit — lives in reduced-motion.css, because the
+ * React bundle needs the same net and two copies would drift. index.css imports
+ * it beside this file; it is NOT @imported from here, because the icon gates read
+ * each stylesheet on its own and refuse a sheet that pulls in another.
  * ========================================================================== */
 
 /* -- Entrances -------------------------------------------------------------
@@ -31,7 +34,7 @@
 .m-scale-in,
 .m-blur-in {
   animation-duration: var(--m-dur, var(--dur-slow));
-  animation-timing-function: var(--m-ease, var(--easing-ease-out, cubic-bezier(0, 0, 0.2, 1)));
+  animation-timing-function: var(--m-ease, var(--ease-out));
   animation-delay: var(--m-delay, 0s);
   animation-fill-mode: both;
 }
@@ -78,7 +81,7 @@
   box-shadow: var(--shadow-md);
 }
 .m-press {
-  transition: transform var(--duration-instant, 80ms) var(--easing-sharp, cubic-bezier(0.4, 0, 0.6, 1));
+  transition: transform var(--dur-instant) var(--ease-sharp);
 }
 .m-press:active { transform: scale(0.97); }
 
@@ -100,12 +103,12 @@
     color-mix(in srgb, var(--text) 12%, transparent),
     transparent
   );
-  animation: m-shimmer var(--duration-crawl, 1s) var(--easing-linear, linear) infinite;
+  animation: m-shimmer var(--duration-crawl, 1s) linear infinite; /* motion: ambient — a skeleton sweeps while the data is away */
 }
 @keyframes m-shimmer { to { transform: translateX(100%); } }
 
 /* -- Attention ------------------------------------------------------------- */
-.m-pulse { animation: m-pulse 2s var(--ease) infinite; }
+.m-pulse { animation: m-pulse 2s var(--ease) infinite; } /* motion: ambient — attention loop with no interaction origin */
 @keyframes m-pulse {
   0%, 100% { transform: scale(1); opacity: 1; }
   50%      { transform: scale(1.04); opacity: 0.86; }
@@ -126,7 +129,7 @@
 .m-draw [data-draw] {
   stroke-dasharray: var(--m-len, 48);
   stroke-dashoffset: var(--m-len, 48);
-  animation: m-draw var(--dur-slow) var(--easing-ease-out, cubic-bezier(0, 0, 0.2, 1)) forwards;
+  animation: m-draw var(--dur-slow) var(--ease-out) forwards;
   animation-delay: var(--m-delay, 0s);
 }
 @keyframes m-draw { to { stroke-dashoffset: 0; } }
@@ -140,8 +143,8 @@
   opacity: 0;
   transform: translateY(18px);
   transition:
-    opacity var(--dur-slow) var(--easing-ease-out, cubic-bezier(0, 0, 0.2, 1)),
-    transform var(--dur-slow) var(--easing-ease-out, cubic-bezier(0, 0, 0.2, 1));
+    opacity var(--dur-slow) var(--ease-out),
+    transform var(--dur-slow) var(--ease-out);
   transition-delay: calc(var(--reveal-i, 0) * var(--delay-2));
 }
 .js-reveal [data-reveal].is-revealed {
@@ -149,18 +152,5 @@
   transform: none;
 }
 
-/* -- Global reduced-motion safety net -------------------------------------
- * Neutralises every animation/transition in the kit — the library's effects,
- * component motion (button loader, badge pulse, feedback check), and smooth
- * scroll. iteration-count:1 lets one-shot animations settle on their final
- * frame (e.g. a checkmark stays drawn) instead of snapping to the start. */
-@media (prefers-reduced-motion: reduce) {
-  html { scroll-behavior: auto !important; }
-  *, ::before, ::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-  [data-reveal] { opacity: 1 !important; transform: none !important; }
-}
+/* The global reduced-motion net lives in reduced-motion.css, imported beside this
+ * file from src/index.css — it has to reach the React bundle as well. */

package/src/styles/nav.css

@@ -44,9 +44,9 @@
   cursor: pointer;
   text-align: left;
   font-family: inherit;
-  transition: background 0.16s var(--ease), color 0.16s var(--ease);
+  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) 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 .ui-nav__item { color: var(--text); } /* (0,2,0): a host sheet's a:link is (0,1,1) — why: docs/specification.md#the-page-shell */
 .ui-nav__item:hover { background: var(--surface-2); color: var(--strong); }
 .ui-nav__item.is-active {
   background: var(--surface-3);
@@ -70,7 +70,7 @@
 .ui-nav__item.is-active:focus-visible { box-shadow: var(--ring); }
 
 .ui-nav__ic { display: inline-flex; flex: none; }
-.ui-nav__ic svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; opacity: 0.72; }
+.ui-nav__ic svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.2; opacity: 0.72; }
 .ui-nav__item.is-active .ui-nav__ic svg,
 .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; }
@@ -82,7 +82,9 @@
 /* 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; }
+/* A row that is off. No opacity: the label was already --muted and the fade
+   only pulled it toward the rail behind it (#220). */
+.ui-nav__item.is-disabled { color: var(--disabled-ink); 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
@@ -123,7 +125,7 @@
    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. */
+   See #157 and docs/specification.md#colour-and-contrast. */
 .ui-nav__item.is-active .ui-nav__badge.is-accent { background: var(--surface-3); color: var(--accent); }
 
 /* Collapsible group */
@@ -134,7 +136,7 @@
   border-right: 1.6px solid var(--muted);
   border-bottom: 1.6px solid var(--muted);
   transform: rotate(-45deg);
-  transition: transform 0.18s var(--ease);
+  transition: transform var(--dur-fast) var(--ease);
 }
 .ui-nav__group.is-open > .ui-nav__toggle .ui-nav__caret { transform: rotate(45deg); }
 .ui-nav__sub {
@@ -165,7 +167,7 @@
 .ui-nav--side.is-collapsed .ui-nav__caret,
 .ui-nav--side.is-collapsed .ui-nav__sub { display: none; }
 .ui-nav--side.is-collapsed .ui-nav__item { justify-content: center; padding: 11px 0; gap: 0; }
-.ui-nav--side.is-collapsed .ui-nav__ic svg { width: 19px; height: 19px; }
+.ui-nav--side.is-collapsed .ui-nav__ic svg { width: 19px; height: 19px; stroke-width: 2; }
 .ui-nav--side.is-collapsed .ui-nav__item.is-active::before { left: 3px; }
 .ui-nav--side.is-collapsed .ui-nav__foot { text-align: center; }
 
@@ -188,7 +190,7 @@
   font-size: 14px;
   font-weight: 500;
   border-radius: 10px 10px 0 0;
-  transition: color 0.16s var(--ease), background 0.16s var(--ease);
+  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
 }
 .ui-nav__tab:hover { color: var(--strong); }
 .ui-nav__tab:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }
@@ -204,7 +206,7 @@
   background: var(--accent);
   opacity: 0;
   transform: scaleX(0.4);
-  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease);
+  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
 }
 .ui-nav--tabs.is-underline .ui-nav__tab.is-active::after { opacity: 1; transform: scaleX(1); }
 
@@ -216,7 +218,7 @@
   color: var(--accent);
 }
 
-.ui-nav__tab.is-disabled { color: var(--muted); opacity: 0.5; cursor: default; }
+.ui-nav__tab.is-disabled { color: var(--disabled-ink); cursor: default; }
 .ui-nav__tab .ui-nav__badge { height: 18px; }
 
 /* -- Breadcrumbs --------------------------------------------------------- */
@@ -239,7 +241,7 @@
   border-radius: 7px;
   text-decoration: none;
   font-size: 13px;
-  transition: color 0.16s var(--ease), background 0.16s var(--ease);
+  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) 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
@@ -248,4 +250,4 @@
 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; }
-.ui-nav__crumb .ui-nav__ic svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; }
+.ui-nav__crumb .ui-nav__ic svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.5; }

package/src/styles/reduced-motion.css

@@ -0,0 +1,32 @@
+/* ============================================================================
+ * apliteni-ui — REDUCED-MOTION NET
+ *
+ * One file, because it has to reach every bundle the kit publishes and a second
+ * copy of it would drift. `src/styles/motion.css` imports it, so `apliteni-ui/css`
+ * carries it; `react/src/index.ts` imports it, so `apliteni-ui/react/css` carries
+ * it too. A consumer who imports both gets it twice, which costs nothing: every
+ * rule here is idempotent and `!important`.
+ *
+ * It neutralises every animation and transition in whatever bundle it lands in —
+ * the motion library's effects, component motion (button loader, badge pulse,
+ * feedback check), and smooth scroll. `iteration-count: 1` lets one-shot
+ * animations settle on their final frame (a checkmark stays drawn) instead of
+ * snapping back to the start.
+ *
+ * `0.01ms` is the kill-switch idiom, not a duration: it is short enough that
+ * nothing is perceptible and non-zero so `transitionend`/`animationend` still
+ * fire, which is what scripts that wait for a close animation depend on. It is
+ * the one time literal in the kit that is not a timing — see
+ * docs/specification.md#motion.
+ * ========================================================================== */
+
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto !important; }
+  *, ::before, ::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+  [data-reveal] { opacity: 1 !important; transform: none !important; }
+}

package/src/styles/success.css

@@ -35,13 +35,13 @@
 .ui-sx__glow--a {
   width: 58%; top: -14%; left: 50%; translate: -50% 0;
   background: radial-gradient(circle at center, var(--sx-tint), transparent 68%);
-  animation: ui-sx-float 14s ease-in-out infinite alternate;
+  animation: ui-sx-float 14s ease-in-out infinite alternate; /* motion: ambient — a background glow that drifts on its own clock; `alternate` needs a symmetric curve, which var(--ease) is not */
 }
 .ui-sx__glow--b {
   width: 52%; bottom: -20%; left: 12%;
   background: radial-gradient(circle at center,
     color-mix(in srgb, var(--accent) 30%, transparent), transparent 68%);
-  animation: ui-sx-float 18s ease-in-out -6s infinite alternate;
+  animation: ui-sx-float 18s ease-in-out -6s infinite alternate; /* motion: ambient — the second glow, offset in period and phase so the pair never lines up */
 }
 :root[data-theme="light"] .ui-sx__glow { opacity: 0.7; }
 @keyframes ui-sx-float {
@@ -63,7 +63,7 @@
   letter-spacing: -.02em; line-height: 1.2; margin: 0;
 }
 .ui-sx__body {
-  color: var(--dim); font-size: 14.5px; line-height: 1.6; margin: 9px 0 0; max-width: 44ch;
+  color: var(--dim); font-size: 14.5px; line-height: 1.6; margin: 9px 0 0; max-width: var(--prose-caption);
 }
 .ui-sx__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
 
@@ -104,21 +104,21 @@
 /* Soft tinted disc that springs in behind the tick. */
 .ui-sx__disc {
   fill: var(--sx-tint); stroke: var(--sx-track); stroke-width: 1.5;
-  transform-origin: center; animation: ui-sx-pop .5s cubic-bezier(.22,1,.3,1) both;
+  transform-origin: center; animation: ui-sx-pop .5s cubic-bezier(.22,1,.3,1) both; /* motion: choreographed — first beat of the check: disc, then tick at .28s, then ring at .2s */
 }
 /* The tick, stroked on via dash-offset (path length ~34). */
 .ui-sx__tick {
   fill: none; stroke: var(--sx-green); stroke-width: 5;
   stroke-linecap: round; stroke-linejoin: round;
   stroke-dasharray: 34; stroke-dashoffset: 34;
-  animation: ui-sx-draw .5s cubic-bezier(.6,0,.35,1) .28s forwards;
+  animation: ui-sx-draw .5s cubic-bezier(.6,0,.35,1) .28s forwards; /* motion: choreographed — the tick draws while the disc is still settling */
   filter: drop-shadow(0 0 5px color-mix(in srgb, var(--green) 55%, transparent));
 }
 /* Burst ring that expands and fades once, framing the moment. */
 .ui-sx__ring {
   fill: none; stroke: var(--sx-green); stroke-width: 2;
   transform-origin: center; opacity: 0;
-  animation: ui-sx-burst .7s cubic-bezier(.3,.7,.4,1) .2s forwards;
+  animation: ui-sx-burst .7s cubic-bezier(.3,.7,.4,1) .2s forwards; /* motion: choreographed — the ring outlives the tick so the moment ends on the frame */
 }
 
 @keyframes ui-sx-pop {
@@ -137,7 +137,7 @@
 .ui-sx__piece {
   position: absolute; top: -8%; width: 8px; height: 8px; border-radius: 2px;
   opacity: 0; transform-origin: center;
-  animation: ui-sx-fall 2.4s cubic-bezier(.2,.6,.35,1) var(--sx-d, 0s) forwards;
+  animation: ui-sx-fall 2.4s cubic-bezier(.2,.6,.35,1) var(--sx-d, 0s) forwards; /* motion: ambient — fall time is set by the height of the panel, not by an interaction */
   scale: var(--sx-s, 1);
 }
 .ui-sx__piece--a { background: var(--accent); }
@@ -162,7 +162,7 @@
   background: conic-gradient(var(--green) var(--sx-a, 360deg), var(--surface-2) 0);
   mask: radial-gradient(circle, transparent 5px, #000 6px);
   -webkit-mask: radial-gradient(circle, transparent 5px, #000 6px);
-  animation: ui-sx-sweep var(--sx-secs, 5s) linear forwards;
+  animation: ui-sx-sweep var(--sx-secs, 5s) linear forwards; /* motion: ambient — the caller sets the countdown; the ring just spends it */
 }
 @keyframes ui-sx-sweep { from { --sx-a: 360deg; } to { --sx-a: 0deg; } }
 .ui-sx__count-text { color: var(--muted); font-size: 13px; }

package/src/styles/table.css

@@ -15,11 +15,11 @@
   text-transform: uppercase;
   color: var(--muted);
   font-weight: var(--weight-semibold);
-  padding: 0 16px 11px 0;
+  padding: 0 var(--space-4) var(--space-3) 0;
   border-bottom: 1px solid var(--border);
 }
 .ui-table td {
-  padding: 15px 16px 15px 0;
+  padding: var(--space-4) var(--space-4) var(--space-4) 0;
   border-bottom: 1px solid var(--border);
   color: var(--dim);
   vertical-align: middle;
@@ -39,11 +39,13 @@
  * continuous while letting the row ends round; table padding (which only applies
  * in the separate model) insets the rows so the fill clears the container edge.
  * Zebra tables keep the original full-bleed tint (finance ledger), so they're
- * excluded here — their hover rule lives further down. */
+ * excluded here — their hover rule lives further down.
+ * The inset was 6px, which is a tie between --space-1 and --space-2; it rounds
+ * up, because what it buys is clearance and clearance rounds away from the edge. */
 .ui-table--hover:not(.ui-table--zebra) {
   border-collapse: separate;
   border-spacing: 0;
-  padding: 0 6px;
+  padding: 0 var(--space-2);
 }
 .ui-table--hover:not(.ui-table--zebra) tbody tr:hover td { background: var(--surface-2); }
 .ui-table--hover:not(.ui-table--zebra) tbody tr:hover td:first-child {
@@ -53,17 +55,24 @@
 
 /* ── Data-table modifiers (composable) ──────────────────────────────────────
  * Compose for a dense financial ledger: .ui-table--dense --zebra --hover.
- *   --dense  compact row rhythm for many-row / many-column data
+ *   --dense  compact row rhythm for many-row / many-column data: --space-3
+ *            across and --space-2 down, one step in from the base table's
+ *            --space-4 across and --space-4 down. Both of its old numbers sat
+ *            exactly between two steps — 14px between 12 and 16, 10px between 8
+ *            and 12 — and both round DOWN, because the modifier exists to fit
+ *            more rows and rounding up spends the distinction it is for.
  *   --zebra  row striping instead of per-row rules; 2px header rule; the
  *            (accent) hover tint out-ranks the stripe (defined after it)
  * Cell helpers: .ui-table__num (right, tabular), .ui-table__code (plain
- * monospace id — never a boxed code chip inside a table). */
-.ui-table--dense th { padding: 0 14px 10px 0; }
-.ui-table--dense td { padding: 10px 14px; font-size: var(--text-sm); white-space: nowrap; }
+ * monospace id — never a boxed code chip inside a table).
+ * why: docs/specification.md#spacing-and-rhythm
+ * held by: stories/table-rhythm.test.js */
+.ui-table--dense th { padding: 0 var(--space-3) var(--space-2) 0; }
+.ui-table--dense td { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); white-space: nowrap; }
 .ui-table--dense th:first-child,
-.ui-table--dense td:first-child { padding-left: 12px; }
+.ui-table--dense td:first-child { padding-left: var(--space-3); }
 .ui-table--dense th:last-child,
-.ui-table--dense td:last-child { padding-right: 12px; }
+.ui-table--dense td:last-child { padding-right: var(--space-3); }
 
 .ui-table--zebra th { border-bottom-width: 2px; }
 .ui-table--zebra td { border-bottom: 0; }
@@ -78,9 +87,9 @@
  * checkboxes sat flush against the tint with a measured 0px gap.
  * Header and body are inset together, or the columns stop lining up. */
 .ui-table--zebra th:first-child,
-.ui-table--zebra td:first-child { padding-left: 12px; }
+.ui-table--zebra td:first-child { padding-left: var(--space-3); }
 .ui-table--zebra th:last-child,
-.ui-table--zebra td:last-child { padding-right: 12px; }
+.ui-table--zebra td:last-child { padding-right: var(--space-3); }
 .ui-table--zebra.ui-table--hover tbody tr:hover td,
 .ui-table--zebra tbody tr:hover td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
 

package/src/styles/topbar.css

@@ -14,7 +14,7 @@
 }
 .topbar__in {
   width: 100%;
-  max-width: 1180px;
+  max-width: var(--container);
   margin: 0 auto;
   padding: 0 clamp(14px, 2.4vw, 26px);
   display: flex;
@@ -59,7 +59,7 @@
   color: var(--muted);
   padding: 4px 13px;
   border-radius: 24px;
-  transition: color 0.2s ease, background 0.2s ease;
+  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
 }
 .dtsw a:hover { color: var(--text); }
 .dtsw a.cur { color: var(--strong); background: var(--surface); box-shadow: var(--shadow-sm); }
@@ -75,11 +75,14 @@
   color: var(--text);
   border: 1px solid var(--border);
   border-radius: 10px;
-  transition: transform 0.15s ease, background 0.35s ease, border-color 0.35s ease;
+  transition:
+    transform var(--dur-fast) var(--ease),
+    background var(--dur-fast) var(--ease),
+    border-color var(--dur-fast) var(--ease);
 }
 .toggle:hover { transform: translateY(-1px); border-color: var(--border-strong); }
 .toggle .ic { width: 17px; height: 17px; display: inline-block; color: var(--accent); }
-.toggle .ic svg { display: block; width: 100%; height: 100%; }
+.toggle .ic svg { display: block; width: 100%; height: 100%; stroke-width: 2.2; }
 
 /* Version switcher */
 .vsw { position: relative; }
@@ -96,7 +99,7 @@
   border: 1px solid var(--border);
   border-radius: 24px;
   padding: 7px 11px 7px 13px;
-  transition: border-color 0.2s ease, background 0.2s ease;
+  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
 }
 .vsw__btn:hover { border-color: var(--accent); }
 .vsw__btn .lbl { color: var(--muted); }
@@ -106,7 +109,7 @@
   border-right: 1.6px solid var(--muted);
   border-bottom: 1.6px solid var(--muted);
   transform: rotate(45deg) translateY(-1px);
-  transition: transform 0.2s ease;
+  transition: transform var(--dur-fast) var(--ease);
 }
 .vsw.open .vsw__btn .car { transform: rotate(-135deg) translateY(2px); }
 .vsw__menu {
@@ -122,7 +125,13 @@
   opacity: 0;
   visibility: hidden;
   transform: translateY(-6px);
-  transition: 0.18s ease;
+  /* Named properties, not the bare shorthand: `transition: 0.18s` is `all`, and `all`
+     includes visibility — held at the OLD value for the whole duration, so the menu is
+     still `hidden` in the frame it opens. */
+  transition:
+    opacity var(--dur-med) var(--ease),
+    transform var(--dur-med) var(--ease),
+    visibility var(--dur-med) linear;
   z-index: var(--z-dropdown);
 }
 .vsw.open .vsw__menu { opacity: 1; visibility: visible; transform: translateY(0); }
@@ -133,7 +142,7 @@
   padding: 10px 13px;
   border-radius: 10px;
   cursor: pointer;
-  transition: background 0.15s ease;
+  transition: background var(--dur-fast) var(--ease);
 }
 .vopt:hover { background: var(--surface); }
 .vopt .vname { font-family: var(--font-sans); font-size: 12.5px; color: var(--strong); font-weight: 600; letter-spacing: 0.01em; }
@@ -151,7 +160,9 @@
 }
 .vbadge.live { color: var(--chip-success-ink); background: var(--chip-success-fill); }
 .vbadge.arch { color: var(--muted); background: var(--surface); }
-@media (max-width: 600px) { .vsw__btn .lbl { display: none; } }
+/* The switcher keeps its glyph and drops its label where the shell folds — the
+   same step the rail folds at: docs/specification.md#breakpoints. */
+@media (max-width: 720px) { .vsw__btn .lbl { display: none; } }
 
 /* Account — avatar + dropdown. Gated: hidden until the app confirms a session
    and adds `.on` (mirrors the portal's /auth/me reveal). */
@@ -169,7 +180,7 @@
   place-items: center;
   cursor: pointer;
   letter-spacing: 0.02em;
-  transition: border-color 0.2s ease;
+  transition: border-color var(--dur-fast) var(--ease);
 }
 .acct .avatar:hover { border-color: var(--accent); }
 .amenu {
@@ -184,7 +195,11 @@
   opacity: 0;
   visibility: hidden;
   transform: translateY(-6px);
-  transition: 0.16s ease;
+  /* Named properties — see .vsw__menu above. */
+  transition:
+    opacity var(--dur-med) var(--ease),
+    transform var(--dur-med) var(--ease),
+    visibility var(--dur-med) linear;
   z-index: var(--z-dropdown);
 }
 .acct.open .amenu { opacity: 1; visibility: visible; transform: translateY(0); }
@@ -196,7 +211,7 @@
 .amenu a { display: flex; align-items: center; gap: 11px; padding: 10px 15px; color: var(--text); text-decoration: none; font-family: var(--font-sans); font-size: 13px; cursor: pointer; }
 .amenu a:hover { background: var(--surface); }
 .amenu a.cur { color: var(--accent); }
-.amenu a svg { width: 19px; height: 19px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; opacity: 0.85; }
+.amenu a svg { width: 19px; height: 19px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; opacity: 0.85; }
 .amenu .asep { height: 1px; background: var(--border); margin: 5px 0; }
 .amenu a.aout { color: var(--muted); }
 .amenu a.aout:hover { color: var(--pink); }