anentrypoint-design 0.0.312 → 0.0.314

package/dist/247420.css

@@ -186,7 +186,9 @@
   --space-1-75:  6px;
   --space-2:     8px;
   --space-2-5:   10px;
+  --space-2-75:  12px;   /* fills the 10->16 hole (row-form gap, dense cell pad) */
   --space-3:     16px;
+  --space-3-5:   20px;   /* fills the 16->24 hole (settings body, mono block pad) */
   --space-4:     24px;
   --space-5:     32px;
   --space-6:     48px;
@@ -260,6 +262,19 @@
   --size-base:   42px;
   --size-lg:     56px;
 
+  /* Dense control-height ladder — the actual heights front-door controls
+     (buttons, fields, rows) snap to, one rung tighter than the --size-*
+     chrome scale so app UI reads compact instead of marketing-scale. Density
+     scales them so [data-density=compact/spacious] moves every control at once.
+     Mirrors webgeist's 30/38/46 button ladder, retuned for this system. */
+  --ctl-sm:      calc(28px * var(--density));
+  --ctl-md:      calc(34px * var(--density));
+  --ctl-lg:      calc(42px * var(--density));
+  /* The canonical single-line input/select/searchfield height (== --ctl-md)
+     and the default list-row min-height, both density-aware. */
+  --field-height: var(--ctl-md);
+  --row-height:   calc(40px * var(--density));
+
   /* Unified focus-ring tokens (single source for the design system). Outset
      rings (the default) tokenize colour+width+offset; bordered text fields use
      the inset variant. Deliberate negative offsets on edge-flush/clipping
@@ -289,25 +304,26 @@
   outline-offset: var(--focus-offset);
 }
 
-/* Link focus-visible */
+/* Link focus-visible — all route through the single --focus-* token set so a
+   focus retune (colour/width/offset) happens in one place, never per selector. */
 .ds-247420 a:focus-visible,
 .ds-247420[role="link"]:focus-visible {
-  outline: 2px solid var(--accent-ink);
-  outline-offset: 2px;
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
 }
 
 /* Form inputs with focus-visible */
 .ds-247420 input:focus-visible,
 .ds-247420 textarea:focus-visible,
 .ds-247420 select:focus-visible {
-  outline: 2px solid var(--accent-ink);
-  outline-offset: 2px;
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
 }
 
 /* Interactive element focus-visible */
 .ds-247420[tabindex]:focus-visible {
-  outline: 2px solid var(--accent-ink);
-  outline-offset: 2px;
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
 }
 
 .ds-247420[data-theme="ink"],
@@ -777,11 +793,15 @@
 .ds-247420 .app-topbar nav a { flex: 0 0 auto; }
 .ds-247420 .app-topbar nav a {
   color: var(--fg-2);
-  padding: 12px 14px;
-  min-height: 44px;
+  /* Dense desktop chrome (was a 44px pill with 12px 14px pad — marketing-scale
+     touch target in the top bar). Matches the .app-side a treatment: ~34px,
+     --r-1 rounded rect, tighter padding. The 44px tap target is restored under
+     @media(pointer:coarse) (the existing .app-topbar nav a rule further down). */
+  padding: var(--space-2) var(--space-2-5);
+  min-height: 34px;
   display: flex;
   align-items: center;
-  border-radius: var(--r-pill);
+  border-radius: var(--r-1);
   transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
 }
 .ds-247420 .app-topbar nav a:hover { background: var(--bg-2); color: var(--fg); }
@@ -855,13 +875,19 @@
 }
 .ds-247420 .app-side a {
   display: grid; grid-template-columns: 18px 1fr auto;
-  gap: 10px; align-items: center;
-  padding: 12px 14px;
-  min-height: 44px;
-  border-radius: var(--r-pill);
+  gap: var(--space-2-5); align-items: center;
+  /* Dense rounded-rect nav row (was a 44px pill with 12px 14px padding — tall
+     and consumer-shaped). A --r-1 rounded rect at ~34px reads as compact app
+     chrome; the full 44px touch target is restored under pointer:coarse below. */
+  padding: var(--space-2) var(--space-2-5);
+  min-height: 34px;
+  border-radius: var(--r-1);
   color: var(--fg-2);
   margin-bottom: 2px;
 }
+@media (pointer: coarse) {
+  .ds-247420 .app-side a { min-height: 44px; padding: var(--space-2-75) var(--space-3); }
+}
 .ds-247420 .app-side a:hover { background: var(--bg-2); color: var(--fg); }
 .ds-247420 .app-side a:focus-visible {
   outline: var(--focus-w) solid var(--focus-color);
@@ -984,10 +1010,16 @@
    ============================================================ */
 .ds-247420 .btn, .ds-247420 .btn-primary, .ds-247420 .btn-ghost {
   display: inline-flex; align-items: center; justify-content: center; gap: 6px;
-  padding: 8px 14px; min-height: 32px;
+  /* Fixed height + horizontal-only padding: the control height is exact and
+     alignable (flex centres the label vertically), the way webgeist snaps every
+     control to a height ladder. Default is the --ctl-md rung; --btn-sm/--btn-lg
+     retune height + h-padding + font per size. Density scales the ladder. */
+  height: var(--ctl-md); min-height: var(--ctl-md);
+  padding: 0 var(--space-2-75);
   font-family: var(--ff-body);
   font-weight: 600; font-size: var(--fs-sm);
   text-decoration: none;
+  white-space: nowrap;
   cursor: pointer;
   /* Rounded-rect app chrome, not a marketing-page stadium CTA.
      Shape vocabulary: r-1/r-2 = actionable buttons, icon-buttons, and
@@ -1020,6 +1052,33 @@
   outline-offset: var(--focus-offset);
 }
 
+/* Button size ladder — the size prop on Btn() (sm | md | lg). md is the base
+   rule above; sm/lg retune height (off the --ctl-* ladder), horizontal padding,
+   and font-size so a size swap is one class, never inline padding overrides
+   (the old preview faked sizes with style=). Applies to every variant. */
+.ds-247420 .btn-sm, .ds-247420 .btn-sm.btn-primary, .ds-247420 .btn-sm.btn-ghost {
+  height: var(--ctl-sm); min-height: var(--ctl-sm);
+  padding: 0 var(--space-2); font-size: var(--fs-tiny); gap: var(--space-1);
+}
+.ds-247420 .btn-lg, .ds-247420 .btn-lg.btn-primary, .ds-247420 .btn-lg.btn-ghost {
+  height: var(--ctl-lg); min-height: var(--ctl-lg);
+  padding: 0 var(--space-4); font-size: var(--fs-body); gap: var(--space-2);
+}
+
+/* App-mode quiet interactions — the marketing hover-lift (translateY + shadow)
+   and the .row .meta slide read as decorative float on a dense working surface.
+   Under [data-typescale="app"], state changes are background/border-only: crisp,
+   no motion, no elevation. Marketing surfaces (no data-typescale) keep the lift. */
+.ds-247420[data-typescale="app"] .btn:hover,
+.ds-247420[data-typescale="app"] .btn-primary:hover,
+.ds-247420[data-typescale="app"] .btn-ghost:hover { transform: none; box-shadow: none; }
+.ds-247420[data-typescale="app"] .btn:active,
+.ds-247420[data-typescale="app"] .btn-primary:active,
+.ds-247420[data-typescale="app"] .btn-ghost:active { transform: none; }
+.ds-247420[data-typescale="app"] .panel { transition: box-shadow var(--dur-snap) var(--ease), border-color var(--dur-snap) var(--ease); }
+.ds-247420[data-typescale="app"] a.row:hover .meta,
+.ds-247420[data-typescale="app"] .row[role="button"]:hover .meta { transform: none; }
+
 /* ============================================================
    IconButton — square icon-only button
    ============================================================ */
@@ -1057,6 +1116,10 @@
   border-radius: var(--r-pill);
   background: var(--bg-3); color: var(--fg-2);
 }
+/* Badge size ladder — sm for dense inline counts, lg for prominent markers.
+   Base (above) stays the 18px default. */
+.ds-247420 .ds-badge.ds-badge--sm { min-width: 14px; height: 14px; padding: 0 var(--space-1); font-size: 10px; }
+.ds-247420 .ds-badge.ds-badge--lg { min-width: 22px; height: 22px; padding: 0 var(--space-2); font-size: var(--fs-tiny); }
 /* Canonical tone names are tone-success / tone-error / tone-neutral. Every
    other tone name grouped into the same rule below (tone-green/tone-live,
    tone-flame, tone-wip, tone-sun/tone-yellow, tone-ok/tone-miss) is a
@@ -1080,7 +1143,7 @@
 .ds-247420 .ds-badge.tone-orange  { background: color-mix(in oklab, var(--flame) 30%, var(--sun) 70%); color: var(--ink); }
 
 .ds-247420 .chip {
-  display: inline-flex; align-items: center; gap: 6px;
+  display: inline-flex; align-items: center; gap: var(--space-1-75);
   padding: 3px 10px;
   background: var(--bg-2); color: var(--fg-2);
   font-family: var(--ff-body);
@@ -1088,6 +1151,17 @@
   letter-spacing: var(--tr-caps); text-transform: uppercase;
   border-radius: var(--r-pill);
 }
+/* Chip size ladder — sm for dense toolbars/table cells, lg for prominent
+   status. tone-* colouring (below) is orthogonal to size. */
+.ds-247420 .chip.chip--sm { padding: var(--space-half) var(--space-2); font-size: var(--fs-micro); gap: var(--space-1); }
+.ds-247420 .chip.chip--lg { padding: var(--space-1-75) var(--space-2-75); font-size: var(--fs-xs); }
+/* Tag variant — a rectangular, sentence-case chip for dense data (table cells,
+   inline labels) where the all-caps pill reads too shouty and space-hungry.
+   Keeps the tone-* palette; drops the caps + pill for a tight --r-0 corner. */
+.ds-247420 .chip.chip--tag {
+  text-transform: none; letter-spacing: 0; font-weight: 500;
+  border-radius: var(--r-0); padding: var(--space-half) var(--space-2);
+}
 /* Same canonical/legacy-alias grouping as .ds-badge above. */
 .ds-247420 .chip.tone-green, .ds-247420 .chip.tone-live, .ds-247420 .chip.tone-success, .ds-247420 .chip.tone-ok {
   background: var(--green-tint); color: var(--green-deep);
@@ -1157,6 +1231,17 @@
 }
 .ds-247420 .panel.panel-inline { background: var(--bg-2); padding: var(--space-3) var(--space-3); }
 .ds-247420 .panel.panel-wide   { background: transparent; box-shadow: none; border: none; }
+/* Dense panel — a compact container for app surfaces (inspector sections,
+   sidebars) that want the .panel look without the roomy 16px pad + 24px stack
+   gap. Tighter corner + padding + head, so it sits between .panel and the
+   flush editor .ds-ep-panel. */
+.ds-247420 .panel.panel--dense {
+  padding: var(--space-2); margin-bottom: var(--space-2-75);
+  border-radius: var(--r-1);
+}
+.ds-247420 .panel.panel--dense .panel-head { padding: var(--space-1-5) var(--space-2); }
+.ds-247420 .panel.panel--dense .panel-body { padding: var(--space-1-5) var(--space-2) var(--space-2); }
+.ds-247420 .panel.panel--dense .panel-body > * + * { margin-top: var(--space-2); }
 .ds-247420 .panel-head {
   display: flex; align-items: baseline; justify-content: space-between;
   /* Shares the .panel-body 16px side padding so the caps label and the body
@@ -1186,9 +1271,13 @@
   grid-template-columns: minmax(80px, 12ch) minmax(0, 1fr) auto;
   gap: var(--space-3);
   align-items: baseline;
-  padding: var(--space-3) var(--space-4);
+  /* App density is the BASE: a list row is quiet working chrome, so it defaults
+     to the compact 12px/16px rhythm (density-scaled) rather than the old
+     16px/24px marketing padding. .row--lede restores the roomier marketing
+     voice for editorial index pages. */
+  padding: calc(var(--space-2-75) * var(--density)) var(--space-3);
   background: var(--bg);
-  border-radius: var(--r-2);
+  border-radius: var(--r-1);
   color: var(--fg);
   position: relative;
   /* Only background + the leading rail animate; padding/size never change on
@@ -1266,8 +1355,14 @@
 .ds-247420 .row.row-nocode { grid-template-columns: minmax(0, 1fr) auto; }
 
 .ds-247420 .row .code  { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
-.ds-247420 .row .title { font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-lg); line-height: var(--lh-snug); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
+/* Title defaults to the quiet app voice (fs-sm/500) — the 18px/600 marketing
+   voice is now opt-in via .row--lede. */
+.ds-247420 .row .title { font-family: var(--ff-body); font-weight: 500; font-size: var(--fs-sm); line-height: var(--lh-snug); display: flex; align-items: baseline; gap: var(--space-2-5); flex-wrap: wrap; min-width: 0; }
 .ds-247420 .row .title .sub { font-family: var(--ff-body); font-weight: 400; font-size: var(--fs-sm); color: var(--fg-3); }
+/* Marketing/editorial index row — restores the roomier padding + larger title
+   the default carried before app-scale became the base. */
+.ds-247420 .row--lede { padding: var(--space-3) var(--space-4); }
+.ds-247420 .row--lede .title { font-size: var(--fs-lg); font-weight: 600; }
 /* App typescale: list rows are quiet working chrome (the 18px/600 default is a
    marketing-surface voice). One size for ALL app list rows - matches
    .ds-file-row/.ds-session-title at fs-sm/500; values mirror the kit's own
@@ -1506,16 +1601,19 @@
 .ds-247420 table {
   width: 100%; border-collapse: collapse;
   font-family: var(--ff-body); font-size: var(--fs-sm);
-  border-radius: var(--r-3); overflow: hidden;
+  /* A data grid, not a card: a tight --r-0 corner (was --r-3/22px, which read
+     as a rounded card). Cells drop to 8px 12px for a dense, scannable row
+     (was 12/14 x 16 => ~43px rows). Density scales the vertical padding. */
+  border-radius: var(--r-0); overflow: hidden;
 }
 .ds-247420 table th {
   text-align: left;
-  padding: 12px 16px;
+  padding: calc(var(--space-2) * var(--density)) var(--space-2-75);
   font-size: var(--fs-tiny); font-weight: 600;
   color: var(--fg-3); text-transform: uppercase; letter-spacing: var(--tr-caps);
   background: var(--bg-2);
 }
-.ds-247420 table td { padding: 14px 16px; border-top: 1px solid var(--rule); }
+.ds-247420 table td { padding: calc(var(--space-2) * var(--density)) var(--space-2-75); border-top: 1px solid var(--rule); }
 .ds-247420 table tr.clickable { cursor: pointer; }
 .ds-247420 table tr.clickable:hover td { background: var(--bg-2); }
 .ds-247420 table tr.clickable:focus-visible {
@@ -1583,13 +1681,16 @@
   gap: var(--space-2);
 }
 .ds-247420 .kpi-card {
-  padding: var(--space-5);
+  /* Was --space-5 (32px) pad + --r-3 (22px) — four cards ate a full fold. A
+     16px pad on a --r-1 corner keeps them prominent but dense; the number drops
+     from a 48px marketing display to a 32px app-scale figure. */
+  padding: var(--space-3);
   background: var(--bg-2);
-  border-radius: var(--r-3);
+  border-radius: var(--r-1);
 }
 .ds-247420 .kpi-card .num {
   font-family: var(--ff-body); font-weight: 600;
-  font-size: clamp(30px, 3.6cqi, 48px); line-height: 1;
+  font-size: clamp(22px, 3cqi, 32px); line-height: 1;
   letter-spacing: var(--tr-tight);
 }
 .ds-247420 .kpi-card .lbl {
@@ -1638,11 +1739,14 @@
    Empty state
    ============================================================ */
 .ds-247420 .empty {
-  padding: var(--space-8);
+  /* Was --space-8 (96px) — an empty list spent 192px of vertical space on
+     nothing. --space-6 (48px) still centres a message with air, without the
+     empty state dominating the fold. Mobile drops it further (below). */
+  padding: var(--space-6);
   text-align: center;
   color: var(--fg-3);
   background: var(--bg-2);
-  border-radius: var(--r-3);
+  border-radius: var(--r-1);
   font-size: var(--fs-sm);
 }
 
@@ -2655,6 +2759,54 @@
   .ds-247420 .ds-preview-meta { display: none; }
 }
 
+/* ============================================================
+   Catalog / demo shell — a shared, compact framing for the preview/*.html
+   component galleries, so each preview stops hand-rolling its own \3c style>
+   (body padding, section margins, demo boxes). Mirrors webgeist's dense
+   catalog: a 240px sticky sidebar + capped main + a hairline-bordered,
+   flex-wrapping .ds-demo cell that packs variants inline and reflows.
+   ============================================================ */
+.ds-247420 .ds-catalog { display: flex; min-height: 100vh; gap: 0; }
+.ds-247420 .ds-catalog-side {
+  width: 240px; flex-shrink: 0;
+  border-right: var(--bw-hair) solid var(--rule);
+  padding: var(--space-3);
+  position: sticky; top: 0; height: 100vh; overflow-y: auto;
+}
+.ds-247420 .ds-catalog-side h1 { font-size: var(--fs-lg); margin: 0 0 var(--space-1); }
+.ds-247420 .ds-catalog-side .subtitle { font-size: var(--fs-micro); color: var(--fg-3); margin: 0 0 var(--space-4); }
+.ds-247420 .ds-catalog-side nav h4 {
+  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tr-label);
+  color: var(--fg-3); margin: var(--space-3) 0 var(--space-1);
+}
+.ds-247420 .ds-catalog-side nav a {
+  display: block; padding: var(--space-half) 0; font-size: var(--fs-tiny);
+  color: var(--fg-2); text-decoration: none;
+}
+.ds-247420 .ds-catalog-side nav a:hover { color: var(--accent-ink); }
+.ds-247420 .ds-catalog-main { flex: 1; padding: var(--space-5); max-width: var(--measure-wide); min-width: 0; }
+.ds-247420 .ds-catalog-section { margin-bottom: var(--space-5); padding-top: var(--space-3); border-top: var(--bw-hair) solid var(--rule); }
+.ds-247420 .ds-catalog-section > h2 { font-size: var(--fs-h3-app); margin: 0 0 var(--space-3); }
+
+/* The gallery cell: a hairline-bordered, flex-wrapping bin that packs a
+   component's variants inline and reflows — the signature "showcase" frame. */
+.ds-247420 .ds-demo {
+  border: var(--bw-hair) solid var(--rule);
+  border-radius: var(--r-1);
+  padding: var(--space-3);
+  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
+  background: var(--bg);
+}
+.ds-247420 .ds-demo + .ds-demo { margin-top: var(--space-2-75); }
+.ds-247420 .ds-demo-label { font-size: var(--fs-xs); font-weight: 500; margin: 0 0 var(--space-1); }
+.ds-247420 .ds-demo-desc { font-size: var(--fs-tiny); color: var(--fg-3); margin: 0 0 var(--space-2); }
+
+@media (max-width: 768px) {
+  .ds-247420 .ds-catalog { flex-direction: column; }
+  .ds-247420 .ds-catalog-side { width: 100%; height: auto; position: static; border-right: 0; border-bottom: var(--bw-hair) solid var(--rule); }
+  .ds-247420 .ds-catalog-main { padding: var(--space-3); }
+}
+
 /* -- File browser UX affordances ---------------------------- */
 /* Toolbar filter input — compact search box. */
 .ds-247420 .ds-filter-input {
@@ -3514,19 +3666,61 @@
    Enhanced Form Inputs
    -------------------------------------------------------------- */
 
-.ds-247420 input[type="text"],
-.ds-247420 input[type="email"],
-.ds-247420 input[type="password"],
-.ds-247420 input[type="number"],
-.ds-247420 input[type="search"],
-.ds-247420 input[type="url"],
-.ds-247420 input[type="tel"],
-.ds-247420 textarea,
-.ds-247420 select {
+/* Base chrome for any BARE native control (outside .ds-field/.row-form/.input):
+   the same editorial tonal-fill + printed-baseline-rule as .ds-field, so a raw
+   <input> is never a browser-default white box in dark mode. The guards are
+   wrapped in :where() so they add ZERO specificity — the whole selector stays
+   at (0,1,1), exactly like `.ds-field input`, so the later .ds-field / .ds-field--sm
+   / .row-form descendant rules win by source order instead of being out-specified
+   (a bare :not(.input) counts as a class and would beat every .ds-field rule,
+   which clobbered the size variants). */
+.ds-247420 input[type="text"]:where(:not(.input):not(.ds-search-input)),
+.ds-247420 input[type="email"]:where(:not(.input):not(.ds-search-input)),
+.ds-247420 input[type="password"]:where(:not(.input):not(.ds-search-input)),
+.ds-247420 input[type="number"]:where(:not(.input):not(.ds-search-input)),
+.ds-247420 input[type="search"]:where(:not(.input):not(.ds-search-input)),
+.ds-247420 input[type="url"]:where(:not(.input):not(.ds-search-input)),
+.ds-247420 input[type="tel"]:where(:not(.input):not(.ds-search-input)),
+.ds-247420 textarea:where(:not(.input)),
+.ds-247420 select:where(:not(.ds-select)) {
+  font: inherit; color: var(--fg);
+  background: var(--bg-2);
+  border: 0;
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule),
+              inset 0 calc(-1 * var(--bw-rule)) 0 var(--rule-strong);
+  border-radius: var(--r-1);
+  padding: 0 var(--space-3);
   transition: background var(--dur-snap) var(--ease),
               border-color var(--dur-snap) var(--ease),
               box-shadow var(--dur-snap) var(--ease);
 }
+/* Single-line bare controls snap to the field height; textarea keeps auto
+   height with symmetric padding (its content decides the box). */
+.ds-247420 input[type="text"]:where(:not(.input):not(.ds-search-input)),
+.ds-247420 input[type="email"]:where(:not(.input):not(.ds-search-input)),
+.ds-247420 input[type="password"]:where(:not(.input):not(.ds-search-input)),
+.ds-247420 input[type="number"]:where(:not(.input):not(.ds-search-input)),
+.ds-247420 input[type="search"]:where(:not(.input):not(.ds-search-input)),
+.ds-247420 input[type="url"]:where(:not(.input):not(.ds-search-input)),
+.ds-247420 input[type="tel"]:where(:not(.input):not(.ds-search-input)),
+.ds-247420 select:where(:not(.ds-select)) {
+  height: var(--field-height);
+}
+.ds-247420 textarea:where(:not(.input)) { padding: var(--space-2) var(--space-3); min-height: calc(4 * 1.5em); }
+.ds-247420 input[type="text"]:where(:not(.input):not(.ds-search-input)):focus-visible,
+.ds-247420 input[type="email"]:where(:not(.input):not(.ds-search-input)):focus-visible,
+.ds-247420 input[type="password"]:where(:not(.input):not(.ds-search-input)):focus-visible,
+.ds-247420 input[type="number"]:where(:not(.input):not(.ds-search-input)):focus-visible,
+.ds-247420 input[type="search"]:where(:not(.input):not(.ds-search-input)):focus-visible,
+.ds-247420 input[type="url"]:where(:not(.input):not(.ds-search-input)):focus-visible,
+.ds-247420 input[type="tel"]:where(:not(.input):not(.ds-search-input)):focus-visible,
+.ds-247420 textarea:where(:not(.input)):focus-visible,
+.ds-247420 select:where(:not(.ds-select)):focus-visible {
+  outline: none;
+  background: var(--bg);
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule),
+              inset 0 calc(-1 * var(--bw-chunk)) 0 var(--accent);
+}
 
 .ds-247420 input[type="text"]::placeholder,
 .ds-247420 input[type="email"]::placeholder,
@@ -3659,11 +3853,29 @@
      the electric lead on focus, instead of a uniform hairline box. */
   box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule),
               inset 0 calc(-1 * var(--bw-rule)) 0 var(--rule-strong);
-  border-radius: var(--r-2, 10px);
-  padding: 10px 14px;
+  /* Tighter corner than the old --r-2 (14px): a dense pro control, not a soft
+     consumer box. Single-line controls snap to --field-height with h-only
+     padding so they align pixel-exact with buttons on the same --ctl-md rung. */
+  border-radius: var(--r-1);
+  height: var(--field-height);
+  padding: 0 var(--space-3);
   transition: box-shadow var(--dur-snap) var(--ease), background var(--dur-snap) var(--ease);
 }
-.ds-247420 .ds-field textarea { min-height: calc(4 * 1.5em); resize: vertical; }
+/* textarea is multi-line: height is auto (min-height instead), keep symmetric
+   vertical padding so text doesn't sit flush to the top edge. */
+.ds-247420 .ds-field textarea { height: auto; min-height: calc(4 * 1.5em); padding: var(--space-2) var(--space-3); resize: vertical; }
+
+/* Field size ladder (size prop on TextField/Select/SearchInput). md == base.
+   sm/lg retune height + h-padding + font off the --ctl-* ladder, matching the
+   button ladder so a form of mixed controls stays on one rhythm. */
+.ds-247420 .ds-field--sm input, .ds-247420 .ds-field--sm .ds-select, .ds-247420 .ds-field--sm .ds-search-input {
+  height: var(--ctl-sm); padding: 0 var(--space-2-5); font-size: var(--fs-tiny);
+}
+.ds-247420 .ds-field--sm textarea { height: auto; padding: var(--space-1-75) var(--space-2-5); font-size: var(--fs-tiny); }
+.ds-247420 .ds-field--lg input, .ds-247420 .ds-field--lg .ds-select, .ds-247420 .ds-field--lg .ds-search-input {
+  height: var(--ctl-lg); padding: 0 var(--space-4); font-size: var(--fs-body);
+}
+.ds-247420 .ds-field--lg textarea { height: auto; padding: var(--space-2-5) var(--space-4); font-size: var(--fs-body); }
 .ds-247420 .ds-search-input::placeholder { color: var(--fg-3); }
 /* Only present when SearchInput is passed resultCount - transparent to any
    flex/grid layout the bare input previously sat in directly. */
@@ -5361,7 +5573,7 @@
   background: color-mix(in oklab, var(--fg) 8%, transparent);
 }
 .ds-247420 .cm-cat-add:focus-visible {
-  outline: 2px solid var(--accent-ink);
+  outline: var(--focus-w) solid var(--focus-color);
   outline-offset: 2px;
 }
 
@@ -5544,7 +5756,7 @@
   background: color-mix(in oklab, var(--fg) 10%, transparent);
 }
 .ds-247420 .cm-ch-action-btn:focus-visible {
-  outline: 2px solid var(--accent-ink);
+  outline: var(--focus-w) solid var(--focus-color);
   outline-offset: 2px;
 }
 
@@ -6127,44 +6339,44 @@
 .ds-247420 .cm-server-icon:focus-visible,
 .ds-247420 .cm-server-back:focus-visible,
 .ds-247420 .cm-server-add:focus-visible {
-  outline: 2px solid var(--accent-ink);
+  outline: var(--focus-w) solid var(--focus-color);
   outline-offset: 2px;
   border-radius: var(--r-2);
 }
 
 .ds-247420 .cm-channel-item:focus-visible {
-  outline: 2px solid var(--accent-ink);
+  outline: var(--focus-w) solid var(--focus-color);
   outline-offset: -2px;
   border-radius: var(--r-1);
 }
 
 .ds-247420 .cm-server-header:focus-visible,
 .ds-247420 .cm-category-header:focus-visible {
-  outline: 2px solid var(--accent-ink);
+  outline: var(--focus-w) solid var(--focus-color);
   outline-offset: -2px;
 }
 
 .ds-247420 .cm-member-item:focus-visible {
-  outline: 2px solid var(--accent-ink);
+  outline: var(--focus-w) solid var(--focus-color);
   outline-offset: -2px;
   border-radius: var(--r-1);
 }
 
 .ds-247420 .cm-vs-btn:focus-visible,
 .ds-247420 .cm-user-btn:focus-visible {
-  outline: 2px solid var(--accent-ink);
+  outline: var(--focus-w) solid var(--focus-color);
   outline-offset: 2px;
   border-radius: var(--r-1);
 }
 
 /* ThreadPanel / Forum / Page interactive elements */
 .ds-247420 .cm-tp-item:focus-visible,
-.ds-247420 .cm-forum-item:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; border-radius: var(--r-1); }
+.ds-247420 .cm-forum-item:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: -2px; border-radius: var(--r-1); }
 .ds-247420 .cm-tp-new:focus-visible,
 .ds-247420 .cm-tp-close:focus-visible,
 .ds-247420 .cm-forum-new:focus-visible,
 .ds-247420 .cm-forum-sort:focus-visible,
-.ds-247420 .cm-page-edit:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: var(--r-1); }
+.ds-247420 .cm-page-edit:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 2px; border-radius: var(--r-1); }
 .ds-247420 .cm-forum-search:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent-ink); }
 
 /* ---------- mobile header ---------- */
@@ -6193,7 +6405,7 @@
   border-radius: var(--r-1);
 }
 .ds-247420 .cm-mh-btn:hover { background: var(--panel-3); }
-.ds-247420 .cm-mh-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.ds-247420 .cm-mh-btn:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 2px; }
 .ds-247420 .cm-mh-title {
   flex: 1 1 auto;
   min-width: 0;
@@ -6238,7 +6450,7 @@
   border-radius: var(--r-1);
 }
 .ds-247420 .cm-rb-cancel:hover { background: var(--panel-3); color: var(--fg); }
-.ds-247420 .cm-rb-cancel:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.ds-247420 .cm-rb-cancel:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
 
 /* ---------- banner ---------- */
 .ds-247420 .cm-banner {
@@ -7893,12 +8105,36 @@
 }
 
 /* Tabs */
-.ds-247420 .ds-ep-tabs { display: flex; flex-direction: column; min-height: 0; height: 100%; }
+.ds-247420 .ds-ep-tabs { display: flex; flex-direction: column; min-height: 0; height: 100%; position: relative; }
 .ds-247420 .ds-ep-tabs-head {
     display: flex; flex-shrink: 0; flex-wrap: nowrap;
     overflow-x: auto; scroll-behavior: smooth;
     background: var(--panel-1);
     border-bottom: 1px solid var(--rule);
+    position: relative;
+}
+/* Sliding indicator — a single 2px bar under the active tab that animates its
+   left/width between tabs (webgeist's "expensive" underline-slide), instead of
+   each tab toggling its own static border. A REAL child element positioned by
+   the Tabs ref (inline left/width/top). It lives as a child of the OUTER
+   .ds-ep-tabs column (position:relative), NOT the .ds-ep-tabs-head, because an
+   absolutely-positioned child of a horizontal flex container mis-sizes to 0 in
+   Chromium; the outer column is a vertical flex, which sizes it correctly.
+   The ref sets top to the head's height so it sits on the head's bottom edge.
+   .has-slider gates the static per-tab border off (below). */
+.ds-247420 .ds-ep-tab-indicator {
+    /* Sized by left+right insets (set inline by positionSlider), NOT width — an
+       abspos element's `width` computes to 0 in some flex-sibling layouts in
+       Chromium, whereas insets size reliably. left+right at the same value
+       collapse it to 0 until positioned (no-JS: invisible). */
+    position: absolute; top: 0; left: 0; right: 100%; height: 2px;
+    background: var(--accent);
+    transition: left var(--dur-base, 160ms) var(--ease, ease),
+                right var(--dur-base, 160ms) var(--ease, ease);
+    pointer-events: none;
+}
+@media (prefers-reduced-motion: reduce) {
+    .ds-247420 .ds-ep-tab-indicator { transition: none; }
 }
 .ds-247420 .ds-ep-tab {
     flex: 1; appearance: none; background: transparent; border: 0;
@@ -7913,6 +8149,9 @@
     color: var(--accent);
     border-bottom-color: var(--accent);
 }
+/* When the JS slider is active, the active tab's own static border is
+   redundant (the sliding bar draws it) — hide it so they don't double up. */
+.ds-247420 .ds-ep-tabs-head.has-slider .ds-ep-tab.active { border-bottom-color: transparent; }
 /* Flex column so a full-height docked child (e.g. an inspector panel) fills
    the tab body instead of collapsing under a block container. */
 .ds-247420 .ds-ep-tabs-body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
@@ -8118,7 +8357,8 @@
 .ds-247420 .ds-ep-actionbar > * { flex: 1 1 0; }
 .ds-247420 .ds-ep-actionbar button {
     width: 100%;
-    min-height: 28px; height: 28px; padding: 0 10px;
+    /* Snapped to --ctl-sm (was a lone 28px literal that happened to match). */
+    min-height: var(--ctl-sm); height: var(--ctl-sm); padding: 0 var(--space-2-5);
     border-radius: var(--r-1, 4px);
     font: var(--fs-tiny, 12px)/1 var(--ff-mono, monospace);
 }
@@ -8488,15 +8728,19 @@
     display: flex; flex-direction: column;
     outline: none;
 }
-.ds-247420 .ds-ep-dialog-head { padding: 14px 16px 6px; border-bottom: 1px solid var(--rule); }
-.ds-247420 .ds-ep-dialog-title { margin: 0; font-size: 16px; font-weight: 600; }
-.ds-247420 .ds-ep-dialog-body { padding: 14px 16px; }
+/* Padding tokenized to the --space-* scale (was raw 14/16/10/6) and shaved to
+   app density — a dialog is working chrome, not a marketing card. */
+.ds-247420 .ds-ep-dialog-head { padding: var(--space-2-75) var(--space-3) var(--space-1-5); border-bottom: 1px solid var(--rule); }
+.ds-247420 .ds-ep-dialog-title { margin: 0; font-size: var(--fs-body); font-weight: 600; }
+.ds-247420 .ds-ep-dialog-body { padding: var(--space-2-75) var(--space-3); }
 .ds-247420 .ds-ep-dialog-actions {
-    display: flex; gap: 8px; justify-content: flex-end;
-    padding: 10px 14px; border-top: 1px solid var(--rule);
+    display: flex; gap: var(--space-2); justify-content: flex-end;
+    padding: var(--space-2) var(--space-2-75); border-top: 1px solid var(--rule);
 }
 .ds-247420 .ds-ep-dialog-btn {
-    padding: 8px 14px;
+    /* Snapped to the --ctl-sm rung + tokenized padding (was 8px 14px). */
+    min-height: var(--ctl-sm); padding: 0 var(--space-3);
+    display: inline-flex; align-items: center; justify-content: center;
     border: 1px solid var(--rule);
     border-radius: var(--r-1, 6px);
     background: var(--panel-2, transparent);
@@ -8530,7 +8774,7 @@
     border: 1px solid var(--rule);
     border-left: 3px solid var(--accent);
     border-radius: var(--r-1, 6px);
-    padding: 10px 14px;
+    padding: var(--space-2) var(--space-2-75);
     box-shadow: var(--shadow-3);
     min-width: 220px; max-width: 360px;
     opacity: 1;
@@ -8623,7 +8867,10 @@
 .ds-247420 .ds-radio-row,
 .ds-247420 .ds-toggle-row {
     display: inline-flex; align-items: center; gap: var(--space-2, 8px);
-    min-height: 44px;
+    /* Desktop density: ~30px rows, not the 44px touch target (which stacked a
+       lot of dead vertical space in inspector/settings forms). The full 44px
+       target is restored under pointer:coarse below. */
+    min-height: 30px;
     padding: var(--space-1, 4px) var(--space-2, 8px);
     cursor: pointer;
     color: var(--fg);
@@ -8632,6 +8879,10 @@
 .ds-247420 .ds-check-row:has(input:disabled),
 .ds-247420 .ds-radio-row:has(input:disabled),
 .ds-247420 .ds-toggle-row:has(button:disabled) { opacity: 0.5; cursor: not-allowed; }
+/* Touch devices: restore the 44px minimum tap target. */
+@media (pointer: coarse) {
+    .ds-247420 .ds-check-row, .ds-247420 .ds-radio-row, .ds-247420 .ds-toggle-row { min-height: 44px; }
+}
 
 .ds-247420 .ds-check, .ds-247420 .ds-radio {
     width: 18px; height: 18px;
@@ -8787,8 +9038,12 @@
 .ds-247420 .ds-dropdown-list { display: flex; flex-direction: column; }
 .ds-247420 .ds-dropdown-item {
     display: flex; align-items: center; gap: 8px;
-    min-height: 44px;
-    padding: 8px 12px;
+    /* Dense desktop row (was an unconditional 44px touch target — a menu of
+       these was very tall on desktop). ~30px here; the 44px tap target is
+       restored under @media(pointer:coarse) below, matching the .ds-check-row
+       treatment. */
+    min-height: 30px;
+    padding: var(--space-1-5) var(--space-2-75);
     background: transparent; border: 0;
     color: inherit; font: inherit; text-align: left;
     border-radius: var(--r-1, 4px);
@@ -8799,6 +9054,9 @@
     background: var(--panel-2, var(--rule));
     outline: none;
 }
+@media (pointer: coarse) {
+    .ds-247420 .ds-dropdown-item { min-height: 44px; padding: var(--space-2) var(--space-3); }
+}
 .ds-247420 .ds-dropdown-item:focus-visible {
     outline: var(--focus-w) solid var(--focus-color);
     outline-offset: calc(var(--focus-offset) * -1);
@@ -8818,9 +9076,12 @@
     color: inherit; font: inherit;
     border: 1px solid var(--rule);
     border-radius: var(--r-1, 6px);
-    padding: 6px 12px;
+    padding: 0 var(--space-2-75);
     cursor: pointer;
-    min-height: 32px;
+    /* Snapped to the --ctl-sm rung so this small control shares the height
+       ladder with buttons/fields instead of a lone 32px literal. */
+    min-height: var(--ctl-sm); height: var(--ctl-sm);
+    display: inline-flex; align-items: center;
 }
 @media (pointer: coarse) {
     .ds-247420 .ds-dropdown-trigger { min-height: 44px; }