anentrypoint-design 0.0.384 → 0.0.386

package/community.css

@@ -273,7 +273,7 @@
   justify-content: center;
   width: 12px;
   height: 12px;
-  font-size: 10px;
+  font-size: var(--fs-pico);
   transform: rotate(90deg);
   transition: transform var(--dur-base) var(--ease);
   flex-shrink: 0;
@@ -551,7 +551,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 10px;
+  font-size: var(--fs-pico);
   font-weight: 600;
   overflow: hidden;
   transition: box-shadow var(--dur-snap) var(--ease);
@@ -1151,7 +1151,7 @@
   border: none;
   background: transparent;
   color: var(--fg);
-  font-size: 18px;
+  font-size: var(--fs-lg);
   line-height: 1;
   cursor: pointer;
   border-radius: var(--r-1);
@@ -1182,7 +1182,7 @@
      bar here was the generic accent-stripe tell; the real accent still lands
      on .cm-rb-author. */
   border-left: var(--bw-hair) solid var(--rule-strong);
-  font-size: 0.85rem;
+  font-size: var(--fs-xs);
 }
 .cm-rb-label { flex: none; color: var(--fg-2); }
 .cm-rb-author { color: var(--accent); font-weight: 600; }
@@ -1201,7 +1201,7 @@
   border: none;
   background: transparent;
   color: var(--fg-2);
-  font-size: 13px;
+  font-size: var(--fs-tiny);
   line-height: 1;
   cursor: pointer;
   border-radius: var(--r-1);
@@ -1216,7 +1216,7 @@
   gap: var(--space-2);
   width: 100%;
   padding: var(--space-2) var(--space-3);
-  font-size: 0.875rem;
+  font-size: var(--fs-xs);
   font-weight: 500;
 }
 .cm-banner.clickable { cursor: pointer; }
@@ -1547,7 +1547,7 @@
   border: var(--bw-hair) solid var(--rule-strong);
   border-radius: var(--r-1);
   background: var(--bg-3); color: var(--fg);
-  cursor: pointer; font-size: 16px; line-height: 1;
+  cursor: pointer; font-size: var(--fs-body); line-height: 1;
 }
 .vx-vc-btn:hover { background: var(--bg-4, var(--bg-3)); }
 .vx-vc-on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
@@ -1577,11 +1577,11 @@
   display: flex; align-items: center; justify-content: space-between;
   padding: var(--space-2); border-bottom: var(--bw-hair) solid var(--rule);
 }
-.cm-tp-title { font-weight: 700; font-size: var(--fs-1, 14px); }
+.cm-tp-title { font-weight: 700; font-size: var(--fs-xs); }
 .cm-tp-head-actions { display: flex; gap: var(--space-1); }
 .cm-tp-new, .cm-tp-close {
   border: none; background: transparent; color: var(--fg-2, var(--fg));
-  cursor: pointer; font-size: 16px; width: 24px; height: 24px; border-radius: var(--r-1);
+  cursor: pointer; font-size: var(--fs-body); width: 24px; height: 24px; border-radius: var(--r-1);
 }
 .cm-tp-new:hover, .cm-tp-close:hover { background: var(--bg-3); color: var(--fg); }
 .cm-tp-list { flex: 1; min-height: 0; overflow-y: auto; }
@@ -1597,9 +1597,9 @@
 .cm-tp-item.is-active { background: var(--bg-3); box-shadow: inset 3px 0 0 var(--accent); }
 .cm-tp-item.is-unread .cm-tp-item-title { font-weight: 700; }
 .cm-tp-dot { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
-.cm-tp-item-title { font-size: var(--fs-1, 14px); }
-.cm-tp-item-snippet { font-size: var(--fs-0, 12px); color: var(--fg-2, var(--fg)); opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.cm-tp-item-meta { display: flex; gap: var(--space-2); font-size: var(--fs-micro, 11px); color: var(--fg-2, var(--fg)); opacity: .7; }
+.cm-tp-item-title { font-size: var(--fs-xs); }
+.cm-tp-item-snippet { font-size: var(--fs-micro); color: var(--fg-2, var(--fg)); opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cm-tp-item-meta { display: flex; gap: var(--space-2); font-size: var(--fs-micro); color: var(--fg-2, var(--fg)); opacity: .7; }
 .cm-tp-empty, .cm-forum-empty, .cm-channel-empty, .cm-member-empty {
   display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
   padding: var(--space-4) var(--space-3); text-align: center;
@@ -1651,10 +1651,10 @@
 .cm-forum-item { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; text-align: left; cursor: pointer; padding: var(--space-2) var(--space-3); border: none; background: transparent; border-bottom: var(--bw-hair) solid var(--rule); color: var(--fg); }
 .cm-forum-item:hover { background: var(--bg-3); }
 .cm-forum-item-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
-.cm-forum-item-title { font-weight: 700; font-size: var(--fs-1, 14px); }
-.cm-forum-item-replies { font-size: var(--fs-0, 12px); color: var(--fg-2, var(--fg)); opacity: .8; white-space: nowrap; }
-.cm-forum-item-snippet { font-size: var(--fs-0, 12px); color: var(--fg-2, var(--fg)); opacity: .85; }
-.cm-forum-item-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: var(--fs-micro, 11px); color: var(--fg-2, var(--fg)); opacity: .7; }
+.cm-forum-item-title { font-weight: 700; font-size: var(--fs-xs); }
+.cm-forum-item-replies { font-size: var(--fs-micro); color: var(--fg-2, var(--fg)); opacity: .8; white-space: nowrap; }
+.cm-forum-item-snippet { font-size: var(--fs-micro); color: var(--fg-2, var(--fg)); opacity: .85; }
+.cm-forum-item-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: var(--fs-micro); color: var(--fg-2, var(--fg)); opacity: .7; }
 .cm-forum-item-tags { display: inline-flex; gap: var(--space-1); }
 /* 1px vertical is OFF-SCALE ON PURPOSE — the tag is an inline chip inside the
    forum meta row; --space-hair (2px) tips it past the row height. */
@@ -1663,7 +1663,7 @@
 /* PageView — cm-page / cm-page-* */
 .cm-page { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow-y: auto; background: var(--bg-1, var(--bg-2)); color: var(--fg); }
 .cm-page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3); border-bottom: var(--bw-hair) solid var(--rule); }
-.cm-page-title { margin: 0; font-size: var(--fs-3, 20px); font-weight: 700; }
+.cm-page-title { margin: 0; font-size: var(--fs-xl); font-weight: 700; }
 .cm-page-edit { padding: var(--space-1) var(--space-2); border: var(--bw-hair) solid var(--rule-strong); border-radius: var(--r-1); background: var(--bg-3); color: var(--fg); cursor: pointer; }
 .cm-page-body { padding: var(--space-3); line-height: 1.6; }
 .cm-page-empty { color: var(--fg-2, var(--fg)); opacity: .7; }
@@ -1677,8 +1677,11 @@
 .fd-page-inner > * { min-width: 0; }
 .fd-loading { display: flex; align-items: center; gap: var(--space-2, 10px); padding: var(--space-4, 24px); color: var(--fg-2, var(--fg)); }
 .fd-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2, 10px); padding: var(--space-5, 32px) var(--space-3, 16px); color: var(--fg-2, var(--fg)); text-align: center; }
+/* 28px is an ICON size (empty-state mark), not a type tier — the --fs-* ladder
+   tops out at --fs-xl (21px) before every remaining rung becomes a fluid
+   heading clamp, so neither substitutes without visibly resizing the mark. */
 .fd-empty-glyph { font-size: 28px; opacity: .55; line-height: 1; }
-.fd-pre { margin: 0; padding: var(--space-2, 10px); background: var(--bg-3, var(--panel-bg-2)); border: var(--bw-hair, 1px) solid var(--rule, var(--panel-accent)); border-radius: var(--r-1, 6px); overflow: auto; max-height: 460px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; line-height: 1.5; }
+.fd-pre { margin: 0; padding: var(--space-2, 10px); background: var(--bg-3, var(--panel-bg-2)); border: var(--bw-hair, 1px) solid var(--rule, var(--panel-accent)); border-radius: var(--r-1, 6px); overflow: auto; max-height: 460px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--fs-micro); line-height: 1.5; }
 .fd-skill-body { max-height: 320px; }
 .fd-row-actions { display: inline-flex; gap: var(--space-1, 6px); align-items: center; }
 .fd-chat { display: flex; flex-direction: column; gap: var(--space-2, 10px); height: 100%; min-height: 0; }

package/dist/247420.css

@@ -1642,6 +1642,11 @@
 .ds-247420 .ds-hero-stat:last-child { border-bottom: 0; padding-bottom: 0; }
 .ds-247420 .ds-hero-title {
   font-family: var(--ff-display); font-weight: 700;
+  /* Bespoke display clamp, deliberately off the --fs-* ladder: --fs-hero is
+     clamp(42px,7cqi,96px) and --fs-mega is clamp(56px,11cqi,168px). This lead
+     runs a steeper 9cqi slope with a LOWER 40px floor so a two-line 16ch title
+     still fits a narrow column, and a 116px ceiling between the two tiers.
+     Snapping to either changes the hero's whole optical weight. */
   font-size: clamp(40px, 9cqi, 116px);
   line-height: 0.96; letter-spacing: var(--tr-tighter);
   margin: 0; max-width: 16ch; text-wrap: balance;
@@ -1685,6 +1690,12 @@
 .ds-247420 .ds-section-compact { margin-top: 0; margin-bottom: var(--space-4); }
 .ds-247420 .ds-section > h3 {
   font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-h3);
+  /* Zero top margin looks like it inverts the more-space-above-than-below rule,
+     but it does not: this h3 is always the section's first child and .ds-section
+     itself carries the --space-8 (96px) lead, so the effective space above is
+     96px against 32px below. Adding a top margin here would double the lead.
+     Measured live on project_page: gapAboveInSection 0 with the section margin
+     supplying the separation, gapBelow 32. */
   margin: 0 0 var(--space-5);
   letter-spacing: -0.01em;
 }
@@ -1776,7 +1787,7 @@
 }
 .ds-247420 .ds-cli-row {
   display: flex; gap: 10px;
-  font-family: var(--ff-mono); font-size: 13px; line-height: 1.6;
+  font-family: var(--ff-mono); font-size: var(--fs-tiny); line-height: 1.6;
   padding: 3px 0;
 }
 .ds-247420 .ds-cli-row .prompt { color: var(--green-2); flex: 0 0 auto; user-select: none; }
@@ -1920,6 +1931,10 @@
 }
 .ds-247420 .kpi-card .num {
   font-family: var(--ff-body); font-weight: 600;
+  /* Numeric display size, not a heading tier: --fs-h4 is clamp(19px,1.8cqi,
+     24px) — too small and too flat a slope for a KPI figure that must read as
+     the loudest thing in its card, and --fs-h3 (22/30) tops out short of 32.
+     Deliberate off-scale value tuned to the .kpi-card box. */
   font-size: clamp(22px, 3cqi, 32px); line-height: 1;
   letter-spacing: var(--tr-tight);
 }
@@ -2459,7 +2474,7 @@
 /* File icon — glyph chip, tinted per type. */
 .ds-247420 .ds-file-icon {
   display: inline-flex; align-items: center; justify-content: center;
-  width: 26px; height: 26px; font-size: 15px; line-height: 1;
+  width: 26px; height: 26px; font-size: var(--fs-sm); line-height: 1;
   color: var(--fg-2);
 }
 .ds-247420 .ds-file-row[data-file-type="dir"]      .ds-file-icon { color: var(--accent-ink); }
@@ -2483,7 +2498,7 @@
   display: inline-flex; align-items: center; justify-content: center;
   width: 28px; height: 28px; padding: 0;
   background: transparent; border: 0; border-radius: var(--r-1);
-  color: var(--fg-3); font-size: 14px; cursor: pointer;
+  color: var(--fg-3); font-size: var(--fs-xs); cursor: pointer;
   transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
 }
 .ds-247420 .ds-file-act:hover { background: var(--bg-3); color: var(--fg); }
@@ -2582,7 +2597,7 @@
 .ds-247420 .ds-file-grid[data-density="compact"] .ds-file-row { padding: var(--space-1-5) var(--space-2-75); gap: var(--space-2-5); }
 .ds-247420 .ds-file-grid[data-density="compact"] .ds-file-row .title { font-size: var(--fs-xs); }
 .ds-247420 .ds-file-grid[data-density="compact"] .ds-file-row .ds-file-meta { font-size: var(--fs-micro); }
-.ds-247420 .ds-file-grid[data-density="compact"] .ds-file-icon { width: 20px; height: 20px; font-size: 13px; }
+.ds-247420 .ds-file-grid[data-density="compact"] .ds-file-icon { width: 20px; height: 20px; font-size: var(--fs-tiny); }
 
 /* Thumbnail density — tile grid; image entries carry a real lazy thumbnail. */
 .ds-247420 .ds-file-grid-thumb {
@@ -2622,6 +2637,10 @@
   width: 100%; aspect-ratio: 4 / 3;
   background: var(--bg-2); border-radius: var(--r-1); overflow: hidden;
 }
+/* 24px is the ICON size inside a 34px chip, not a type tier — it is matched to
+   the chip box, not to the text scale (the --fs-* rungs jump 21px -> fluid
+   heading clamps, so neither substitutes without resizing the icon). Same
+   reasoning for the other four .ds-*-glyph rules in this sheet. */
 .ds-247420 .ds-file-cell-media .ds-file-icon { width: 34px; height: 34px; font-size: 24px; }
 .ds-247420 .ds-file-cell-thumb { width: 100%; height: 100%; object-fit: cover; }
 /* Per-type icon tints on thumb tiles so the grid keeps the colour-coding the
@@ -2765,6 +2784,7 @@
   gap: var(--space-2); flex-wrap: wrap;
   padding: var(--space-4) var(--space-3); text-align: center;
 }
+/* Icon size, not type — see .ds-file-cell-media .ds-file-icon above. */
 .ds-247420 .ds-dropzone-glyph { font-size: 22px; color: var(--fg-3); }
 .ds-247420 .ds-dropzone-label { font-size: var(--fs-sm); color: var(--fg-3); }
 .ds-247420 .ds-dropzone.dragover {
@@ -2873,6 +2893,7 @@
   gap: var(--space-2); padding: var(--space-6) var(--space-3);
   color: var(--fg-3); text-align: center;
 }
+/* Icon size, not type — see .ds-file-cell-media .ds-file-icon above. */
 .ds-247420 .ds-file-empty-glyph { font-size: 34px; opacity: 0.55; }
 .ds-247420 .ds-file-empty-text { font-size: var(--fs-sm); }
 
@@ -2928,7 +2949,11 @@
   font-family: inherit; font-size: var(--fs-sm);
 }
 .ds-247420 .ds-modal-input:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
-/* iOS auto-zooms inputs under 16px on focus, breaking the modal layout. */
+/* iOS auto-zooms inputs under 16px on focus, breaking the modal layout.
+   Deliberately a literal, NOT var(--fs-body): --fs-body is re-declared to
+   15px under [data-typescale="sm"], which would silently drop this input back
+   under the zoom threshold on any density-reduced page. The 16px here is a
+   platform constant, not a point on the type scale. */
 @media (hover: none), (pointer: coarse) {
   .ds-247420 .ds-modal-input { font-size: 16px; min-height: 44px; }
 }
@@ -3025,6 +3050,7 @@
   display: flex; flex-direction: column; align-items: center; justify-content: center;
   gap: var(--space-2); padding: var(--space-6); color: var(--fg-3);
 }
+/* Icon size, not type — see .ds-file-cell-media .ds-file-icon above. */
 .ds-247420 .ds-preview-glyph { font-size: 34px; opacity: 0.6; }
 
 /* Thin scrollbars inside preview bodies. */
@@ -3268,7 +3294,7 @@
   width: 36px; height: 36px; flex-shrink: 0;
   border-radius: 50%; background: var(--bg-3); color: var(--fg);
   display: inline-flex; align-items: center; justify-content: center;
-  font-family: var(--ff-mono); font-size: 12px; font-weight: 600;
+  font-family: var(--ff-mono); font-size: var(--fs-micro); font-weight: 600;
   text-transform: lowercase; letter-spacing: 0.02em; user-select: none;
   transition: transform 0.12s ease, box-shadow 0.12s ease;
   position: relative;
@@ -3309,6 +3335,9 @@
   border: 1px solid color-mix(in oklab, var(--mascot) 28%, transparent);
 }
 .ds-247420 .chat-bubble code {
+  /* em-relative on purpose: inline code tracks the size of the prose it sits
+     inside (the mono face runs optically large next to the system stack, hence
+     0.92). An absolute --fs-* tier would decouple it from its own paragraph. */
   font-family: var(--ff-mono); font-size: 0.92em;
   background: color-mix(in oklab, var(--fg) 10%, transparent);
   /* 1px block is deliberately under --space-hair (2px): inline <code> must not
@@ -3335,6 +3364,11 @@
   font-family: var(--ff-body); font-weight: 600;
   margin: var(--space-2) 0 var(--space-1); line-height: var(--lh-snug);
 }
+/* em-relative on purpose, NOT --fs-h1..h3: markdown headings inside a chat
+   bubble are a hierarchy WITHIN the bubble's own type size, not page headings.
+   The --fs-h* tiers are fluid clamp()s tuned to page container queries and
+   would render a bubble heading at 34px+, dwarfing the message it labels.
+   These stay a tight ratio ladder off whatever size the bubble is set at. */
 .ds-247420 .chat-bubble.chat-md h1 { font-size: 1.15em; }
 .ds-247420 .chat-bubble.chat-md h2 { font-size: 1.08em; }
 .ds-247420 .chat-bubble.chat-md h3 { font-size: 1.04em; }
@@ -3370,7 +3404,7 @@
 }
 /* Markdown tables + horizontal rules: agents routinely emit them, but they were
    unstyled (bare unspaced cells, vanished rules). */
-.ds-247420 .chat-bubble.chat-md table { border-collapse: collapse; width: auto; max-width: 100%; margin: var(--space-2) 0; font-size: .95em; display: block; overflow-x: auto; }
+.ds-247420 .chat-bubble.chat-md table { border-collapse: collapse; width: auto; max-width: 100%; margin: var(--space-2) 0; font-size: .95em; /* em-relative: a table inside a bubble reads one notch down from the bubble's own copy, not off an absolute tier */ display: block; overflow-x: auto; }
 .ds-247420 .chat-bubble.chat-md th,
 .ds-247420 .chat-bubble.chat-md td { border: var(--bw-hair) solid var(--rule); padding: var(--space-1) var(--space-2-5); text-align: left; }
 .ds-247420 .chat-bubble.chat-md th { background: color-mix(in oklab, var(--fg) 5%, transparent); font-weight: 600; }
@@ -3480,6 +3514,9 @@
 }
 .ds-247420 .chat-file:hover { background: var(--bg-3); }
 .ds-247420 .chat-file .glyph {
+  /* 22px is the ICON size inside a 36px chip — matched to the chip box, not to
+     the type scale (--fs-xl is 21px, and above it every rung is a fluid
+     heading clamp). Snapping it visibly resizes the mark. */
   font-size: 22px; width: 36px; height: 36px;
   display: inline-flex; align-items: center; justify-content: center;
   background: var(--bg-3);
@@ -3492,7 +3529,7 @@
 }
 .ds-247420 .chat-file .meta { display: flex; flex-direction: column; gap: var(--space-hair); min-width: 0; flex: 1; }
 .ds-247420 .chat-file .size { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); }
-.ds-247420 .chat-file .go { font-family: var(--ff-mono); font-size: 16px; color: var(--fg-3); flex-shrink: 0; }
+.ds-247420 .chat-file .go { font-family: var(--ff-mono); font-size: var(--fs-body); color: var(--fg-3); flex-shrink: 0; }
 .ds-247420 .chat-file:hover .go { color: var(--accent-ink); }
 
 .ds-247420 .chat-msg.you .chat-pdf,
@@ -3510,7 +3547,7 @@
   background: color-mix(in oklab, var(--fg) 5%, var(--bg-2));
   border-bottom: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
 }
-.ds-247420 .chat-pdf-head .glyph { font-size: 18px; color: var(--mascot); flex-shrink: 0; }
+.ds-247420 .chat-pdf-head .glyph { font-size: var(--fs-lg); color: var(--mascot); flex-shrink: 0; }
 .ds-247420 .chat-pdf-head .name { flex: 1; font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .ds-247420 .chat-pdf-head .size { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); }
 .ds-247420 .chat-pdf-head a { color: var(--accent-ink); font-family: var(--ff-mono); font-size: var(--fs-xs); text-decoration: none; }
@@ -3569,8 +3606,8 @@
   border-color: color-mix(in oklab, var(--accent) 55%, transparent);
   color: var(--accent-ink);
 }
-.ds-247420 .chat-reactions .rxn .e { font-size: 14px; line-height: 1; }
-.ds-247420 .chat-reactions .rxn .n { font-family: var(--ff-mono); font-weight: 600; font-size: 11px; color: var(--fg-2); }
+.ds-247420 .chat-reactions .rxn .e { font-size: var(--fs-xs); line-height: 1; }
+.ds-247420 .chat-reactions .rxn .n { font-family: var(--ff-mono); font-weight: 600; font-size: var(--fs-nano); color: var(--fg-2); }
 .ds-247420 .chat-reactions .rxn.you .n { color: var(--accent-ink); }
 
 .ds-247420 .chat-typing { display: inline-flex; gap: var(--space-1); align-items: center; }
@@ -3697,6 +3734,7 @@
 
 .ds-247420 .aicat-portrait { display: inline-flex; align-items: center; gap: var(--space-2-5); padding: var(--space-1) 0; }
 .ds-247420 .aicat-face {
+  /* 24px is the ICON size inside a 32px round chip — see .chat-file .glyph. */
   width: 32px; height: 32px; font-size: 24px;
   display: inline-flex; align-items: center; justify-content: center;
   background: color-mix(in oklab, var(--mascot) 22%, var(--bg-2));
@@ -5635,7 +5673,7 @@
 }
 .ds-247420 .ds-err-path {
   display: inline-flex; gap: var(--space-1-75); align-items: baseline; flex-wrap: wrap; max-width: 100%;
-  font-family: var(--ff-mono); font-size: 13px; color: var(--panel-text-2);
+  font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--panel-text-2);
   background: var(--panel-1); padding: var(--space-1-75) var(--space-2-75); border-radius: var(--r-0);
   overflow-wrap: anywhere; word-break: break-all;
 }
@@ -5693,6 +5731,9 @@
   .ds-247420 .ds-topbar-search { flex-basis: 100%; }
 }
 .ds-247420 .ds-empty-state { padding: clamp(var(--space-3), 5vw, var(--space-4)); text-align: center; color: var(--panel-text-3); }
+/* Fluid ICON size (empty-state mark), not a type tier: it scales with the
+   viewport between 24 and 32px. Every fluid --fs-* tier is a heading clamp
+   tuned to cqi + heading weight, so none of them substitutes here. */
 .ds-247420 .ds-empty-state-glyph { font-size: clamp(24px, 6vw, 32px); }
 .ds-247420 .ds-empty-state-msg { margin: var(--space-1-75) 0; }
 .ds-247420 .ds-empty-state-hint { margin: 0; font-size: var(--fs-sm); }
@@ -5712,20 +5753,20 @@
 .ds-247420 .ds-swatch-col { display: flex; flex-direction: column; gap: var(--space-1-75); }
 .ds-247420 .ds-swatch-chip { height: 48px; border-radius: var(--r-1); border: 1px solid var(--rule); background: var(--swatch, var(--panel-1)); }
 .ds-247420 .ds-swatch-chip--big { height: 64px; }
-.ds-247420 .ds-swatch-name { font-family: var(--ff-mono); font-size: 11px; color: var(--fg-3); }
+.ds-247420 .ds-swatch-name { font-family: var(--ff-mono); font-size: var(--fs-nano); color: var(--fg-3); }
 .ds-247420 .ds-type-panel { padding: clamp(10px, 2.5vw, 14px) clamp(10px, 3vw, 18px); display: flex; flex-direction: column; gap: 14px; }
 .ds-247420 .ds-type-row {
   display: flex; align-items: baseline; gap: 14px;
   border-bottom: 1px solid var(--rule); padding-bottom: var(--space-2); flex-wrap: wrap;
 }
-.ds-247420 .ds-type-row-label { flex: 0 0 64px; font-family: var(--ff-mono); font-size: 11px; color: var(--fg-3); }
+.ds-247420 .ds-type-row-label { flex: 0 0 64px; font-family: var(--ff-mono); font-size: var(--fs-nano); color: var(--fg-3); }
 .ds-247420 .ds-type-sample {
   min-width: 0; overflow-wrap: anywhere; line-height: var(--lh-tight); color: var(--fg);
   font-size: var(--sample-size, var(--fs-body));
 }
 .ds-247420 .ds-prim-panel { padding: clamp(10px, 2.5vw, 14px) clamp(10px, 3vw, 18px); display: flex; flex-direction: column; gap: 18px; }
 .ds-247420 .ds-prim-row { display: flex; gap: var(--space-2-5); flex-wrap: wrap; align-items: center; }
-.ds-247420 .ds-prim-label { flex: 0 0 64px; font-family: var(--ff-mono); font-size: 11px; color: var(--fg-3); }
+.ds-247420 .ds-prim-label { flex: 0 0 64px; font-family: var(--ff-mono); font-size: var(--fs-nano); color: var(--fg-3); }
 
 /* == appended: content-site == */
 /* Home landing wrappers (site/theme.mjs) — replace banned inline styles. */
@@ -5857,6 +5898,10 @@
 /* 18px ceiling: no tier between --space-3 (16) and --space-3-5 (20). */
 .ds-247420 .ds-auth-form { padding: clamp(var(--space-2-75), 3vw, 18px); display: flex; flex-direction: column; gap: var(--space-2-5); }
 .ds-247420 .ds-auth-sent { align-items: center; text-align: center; }
+/* 32px is an ICON size, not a type size: this is the confirmation mark above
+   the "check your mail" copy, sized to the 440px auth column, and the --fs-*
+   scale tops out at --fs-xl (21px) before jumping to fluid clamp() heading
+   tiers. Snapping it to either would visibly resize the mark. */
 .ds-247420 .ds-auth-sent-glyph { font-size: 32px; color: var(--panel-accent); }
 .ds-247420 .ds-auth-sent-title { margin: 0; font-weight: 600; }
 .ds-247420 .ds-auth-sent-sub { margin: 0; color: var(--panel-text-2); overflow-wrap: anywhere; }
@@ -5864,17 +5909,17 @@
 /* .ds-auth-field-label joins the kit small-label voice above, no overrides. */
 .ds-247420 .ds-auth-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
 .ds-247420 .ds-auth-remember { display: flex; align-items: center; gap: var(--space-1-75); cursor: pointer; }
-.ds-247420 .ds-auth-remember-text { color: var(--panel-text-2); font-size: 13px; }
-.ds-247420 .ds-auth-forgot { font-size: 13px; }
-.ds-247420 .ds-auth-error { padding: var(--space-2) var(--space-2-5); background: var(--panel-1); border-radius: var(--r-0); color: var(--danger); font-size: 13px; overflow-wrap: anywhere; }
+.ds-247420 .ds-auth-remember-text { color: var(--panel-text-2); font-size: var(--fs-tiny); }
+.ds-247420 .ds-auth-forgot { font-size: var(--fs-tiny); }
+.ds-247420 .ds-auth-error { padding: var(--space-2) var(--space-2-5); background: var(--panel-1); border-radius: var(--r-0); color: var(--danger); font-size: var(--fs-tiny); overflow-wrap: anywhere; }
 .ds-247420 .ds-auth-providers { display: flex; gap: var(--space-2); flex-wrap: wrap; }
 .ds-247420 .ds-auth-provider-btn { flex: 1 1 100px; min-width: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2-5); }
 .ds-247420 .ds-auth-provider-btn--loading { opacity: 0.7; pointer-events: none; }
 .ds-247420 .ds-auth-provider-glyph { font-family: var(--ff-mono); color: var(--panel-text-3); display: inline-flex; }
-.ds-247420 .ds-auth-modes { display: flex; justify-content: center; gap: 14px; /* off-scale, matches the auth form inset */ margin-top: var(--space-2); font-size: 13px; flex-wrap: wrap; }
+.ds-247420 .ds-auth-modes { display: flex; justify-content: center; gap: 14px; /* off-scale, matches the auth form inset */ margin-top: var(--space-2); font-size: var(--fs-tiny); flex-wrap: wrap; }
 .ds-247420 .ds-auth-mode-link { color: var(--panel-text-3); text-decoration: none; }
 .ds-247420 .ds-auth-mode-link--active { color: var(--panel-text); text-decoration: underline; }
-.ds-247420 .ds-auth-fineprint { text-align: center; font-size: 12px; color: var(--panel-text-3); margin: var(--space-1-75) 0; }
+.ds-247420 .ds-auth-fineprint { text-align: center; font-size: var(--fs-micro); color: var(--panel-text-3); margin: var(--space-1-75) 0; }
 
 /* == appended: gallery-misc kit cleanup == */
 /* --- shared helpers (converted from inline styles) --- */
@@ -5884,12 +5929,12 @@
 .ds-247420 .ds-kit-head { display: flex; align-items: center; justify-content: space-between; gap: clamp(var(--space-2), 2vw, var(--space-3)); flex-wrap: wrap; }
 
 /* --- gallery kit --- */
-.ds-247420 .ds-tile-cap { flex: 1; display: flex; align-items: center; justify-content: center; font-family: var(--ff-mono); white-space: pre-line; color: var(--panel-text-2); font-size: 18px; min-width: 0; text-align: center; }
-.ds-247420 .ds-tile-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1-75); font-size: 12px; flex-wrap: wrap; min-width: 0; }
+.ds-247420 .ds-tile-cap { flex: 1; display: flex; align-items: center; justify-content: center; font-family: var(--ff-mono); white-space: pre-line; color: var(--panel-text-2); font-size: var(--fs-lg); min-width: 0; text-align: center; }
+.ds-247420 .ds-tile-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1-75); font-size: var(--fs-micro); flex-wrap: wrap; min-width: 0; }
 .ds-247420 .ds-tile-glyph { font-family: var(--ff-mono); color: var(--panel-text-3); }
 .ds-247420 .ds-tile-label { color: var(--panel-text); overflow-wrap: anywhere; }
 .ds-247420 .ds-gal-swatch { height: 64px; border-radius: var(--r-0); background: var(--swatch, var(--panel-1)); }
-.ds-247420 .ds-gal-swatch-meta { display: flex; justify-content: space-between; gap: var(--space-1-75); flex-wrap: wrap; font-family: var(--ff-mono); font-size: 11px; min-width: 0; }
+.ds-247420 .ds-gal-swatch-meta { display: flex; justify-content: space-between; gap: var(--space-1-75); flex-wrap: wrap; font-family: var(--ff-mono); font-size: var(--fs-nano); min-width: 0; }
 .ds-247420 .ds-gal-swatch-name { color: var(--panel-text); }
 .ds-247420 .ds-gal-swatch-hint { color: var(--panel-text-3); overflow-wrap: anywhere; }
 .ds-247420 .ds-lightbox-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
@@ -5948,9 +5993,9 @@
   font-family: var(--ff-mono); font-weight: 600; text-transform: lowercase;
   letter-spacing: 0.02em; user-select: none; flex-shrink: 0; object-fit: cover;
 }
-.ds-247420 .ds-avatar-sm { width: 24px; height: 24px; font-size: 10px; }
-.ds-247420 .ds-avatar-md { width: 36px; height: 36px; font-size: 12px; }
-.ds-247420 .ds-avatar-lg { width: 48px; height: 48px; font-size: 15px; }
+.ds-247420 .ds-avatar-sm { width: 24px; height: 24px; font-size: var(--fs-pico); }
+.ds-247420 .ds-avatar-md { width: 36px; height: 36px; font-size: var(--fs-micro); }
+.ds-247420 .ds-avatar-lg { width: 48px; height: 48px; font-size: var(--fs-sm); }
 .ds-247420 .ds-avatar-square { border-radius: var(--r-2, 6px); }
 
 /* SpreadsheetPreview — tabbed inline spreadsheet/CSV viewer (docstudio
@@ -6139,6 +6184,10 @@
    same tonal chip treatment .chat-bubble code uses. */
 .ds-247420 .ds-pattern-notes code {
   font-family: var(--ff-mono);
+  /* em-relative on purpose: inline code must track whatever size the
+     surrounding prose is set at (the mono face runs optically large next to
+     the system stack, hence 0.92). An absolute --fs-* tier would decouple it
+     from its own paragraph and break at every containing type size. */
   font-size: 0.92em;
   background: color-mix(in oklab, var(--fg) 8%, transparent);
   padding: 0 var(--space-1);
@@ -6847,7 +6896,7 @@
   justify-content: center;
   width: 12px;
   height: 12px;
-  font-size: 10px;
+  font-size: var(--fs-pico);
   transform: rotate(90deg);
   transition: transform var(--dur-base) var(--ease);
   flex-shrink: 0;
@@ -7125,7 +7174,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 10px;
+  font-size: var(--fs-pico);
   font-weight: 600;
   overflow: hidden;
   transition: box-shadow var(--dur-snap) var(--ease);
@@ -7725,7 +7774,7 @@
   border: none;
   background: transparent;
   color: var(--fg);
-  font-size: 18px;
+  font-size: var(--fs-lg);
   line-height: 1;
   cursor: pointer;
   border-radius: var(--r-1);
@@ -7756,7 +7805,7 @@
      bar here was the generic accent-stripe tell; the real accent still lands
      on .cm-rb-author. */
   border-left: var(--bw-hair) solid var(--rule-strong);
-  font-size: 0.85rem;
+  font-size: var(--fs-xs);
 }
 .ds-247420 .cm-rb-label { flex: none; color: var(--fg-2); }
 .ds-247420 .cm-rb-author { color: var(--accent); font-weight: 600; }
@@ -7775,7 +7824,7 @@
   border: none;
   background: transparent;
   color: var(--fg-2);
-  font-size: 13px;
+  font-size: var(--fs-tiny);
   line-height: 1;
   cursor: pointer;
   border-radius: var(--r-1);
@@ -7790,7 +7839,7 @@
   gap: var(--space-2);
   width: 100%;
   padding: var(--space-2) var(--space-3);
-  font-size: 0.875rem;
+  font-size: var(--fs-xs);
   font-weight: 500;
 }
 .ds-247420 .cm-banner.clickable { cursor: pointer; }
@@ -8121,7 +8170,7 @@
   border: var(--bw-hair) solid var(--rule-strong);
   border-radius: var(--r-1);
   background: var(--bg-3); color: var(--fg);
-  cursor: pointer; font-size: 16px; line-height: 1;
+  cursor: pointer; font-size: var(--fs-body); line-height: 1;
 }
 .ds-247420 .vx-vc-btn:hover { background: var(--bg-4, var(--bg-3)); }
 .ds-247420 .vx-vc-on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
@@ -8151,11 +8200,11 @@
   display: flex; align-items: center; justify-content: space-between;
   padding: var(--space-2); border-bottom: var(--bw-hair) solid var(--rule);
 }
-.ds-247420 .cm-tp-title { font-weight: 700; font-size: var(--fs-1, 14px); }
+.ds-247420 .cm-tp-title { font-weight: 700; font-size: var(--fs-xs); }
 .ds-247420 .cm-tp-head-actions { display: flex; gap: var(--space-1); }
 .ds-247420 .cm-tp-new, .ds-247420 .cm-tp-close {
   border: none; background: transparent; color: var(--fg-2, var(--fg));
-  cursor: pointer; font-size: 16px; width: 24px; height: 24px; border-radius: var(--r-1);
+  cursor: pointer; font-size: var(--fs-body); width: 24px; height: 24px; border-radius: var(--r-1);
 }
 .ds-247420 .cm-tp-new:hover, .ds-247420 .cm-tp-close:hover { background: var(--bg-3); color: var(--fg); }
 .ds-247420 .cm-tp-list { flex: 1; min-height: 0; overflow-y: auto; }
@@ -8171,9 +8220,9 @@
 .ds-247420 .cm-tp-item.is-active { background: var(--bg-3); box-shadow: inset 3px 0 0 var(--accent); }
 .ds-247420 .cm-tp-item.is-unread .cm-tp-item-title { font-weight: 700; }
 .ds-247420 .cm-tp-dot { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
-.ds-247420 .cm-tp-item-title { font-size: var(--fs-1, 14px); }
-.ds-247420 .cm-tp-item-snippet { font-size: var(--fs-0, 12px); color: var(--fg-2, var(--fg)); opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ds-247420 .cm-tp-item-meta { display: flex; gap: var(--space-2); font-size: var(--fs-micro, 11px); color: var(--fg-2, var(--fg)); opacity: .7; }
+.ds-247420 .cm-tp-item-title { font-size: var(--fs-xs); }
+.ds-247420 .cm-tp-item-snippet { font-size: var(--fs-micro); color: var(--fg-2, var(--fg)); opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ds-247420 .cm-tp-item-meta { display: flex; gap: var(--space-2); font-size: var(--fs-micro); color: var(--fg-2, var(--fg)); opacity: .7; }
 .ds-247420 .cm-tp-empty, .ds-247420 .cm-forum-empty, .ds-247420 .cm-channel-empty, .ds-247420 .cm-member-empty {
   display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
   padding: var(--space-4) var(--space-3); text-align: center;
@@ -8223,10 +8272,10 @@
 .ds-247420 .cm-forum-item { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; text-align: left; cursor: pointer; padding: var(--space-2) var(--space-3); border: none; background: transparent; border-bottom: var(--bw-hair) solid var(--rule); color: var(--fg); }
 .ds-247420 .cm-forum-item:hover { background: var(--bg-3); }
 .ds-247420 .cm-forum-item-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
-.ds-247420 .cm-forum-item-title { font-weight: 700; font-size: var(--fs-1, 14px); }
-.ds-247420 .cm-forum-item-replies { font-size: var(--fs-0, 12px); color: var(--fg-2, var(--fg)); opacity: .8; white-space: nowrap; }
-.ds-247420 .cm-forum-item-snippet { font-size: var(--fs-0, 12px); color: var(--fg-2, var(--fg)); opacity: .85; }
-.ds-247420 .cm-forum-item-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: var(--fs-micro, 11px); color: var(--fg-2, var(--fg)); opacity: .7; }
+.ds-247420 .cm-forum-item-title { font-weight: 700; font-size: var(--fs-xs); }
+.ds-247420 .cm-forum-item-replies { font-size: var(--fs-micro); color: var(--fg-2, var(--fg)); opacity: .8; white-space: nowrap; }
+.ds-247420 .cm-forum-item-snippet { font-size: var(--fs-micro); color: var(--fg-2, var(--fg)); opacity: .85; }
+.ds-247420 .cm-forum-item-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: var(--fs-micro); color: var(--fg-2, var(--fg)); opacity: .7; }
 .ds-247420 .cm-forum-item-tags { display: inline-flex; gap: var(--space-1); }
 /* 1px vertical is OFF-SCALE ON PURPOSE — the tag is an inline chip inside the
    forum meta row; --space-hair (2px) tips it past the row height. */
@@ -8235,7 +8284,7 @@
 /* PageView — cm-page / cm-page-* */
 .ds-247420 .cm-page { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow-y: auto; background: var(--bg-1, var(--bg-2)); color: var(--fg); }
 .ds-247420 .cm-page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3); border-bottom: var(--bw-hair) solid var(--rule); }
-.ds-247420 .cm-page-title { margin: 0; font-size: var(--fs-3, 20px); font-weight: 700; }
+.ds-247420 .cm-page-title { margin: 0; font-size: var(--fs-xl); font-weight: 700; }
 .ds-247420 .cm-page-edit { padding: var(--space-1) var(--space-2); border: var(--bw-hair) solid var(--rule-strong); border-radius: var(--r-1); background: var(--bg-3); color: var(--fg); cursor: pointer; }
 .ds-247420 .cm-page-body { padding: var(--space-3); line-height: 1.6; }
 .ds-247420 .cm-page-empty { color: var(--fg-2, var(--fg)); opacity: .7; }
@@ -8249,8 +8298,11 @@
 .ds-247420 .fd-page-inner > * { min-width: 0; }
 .ds-247420 .fd-loading { display: flex; align-items: center; gap: var(--space-2, 10px); padding: var(--space-4, 24px); color: var(--fg-2, var(--fg)); }
 .ds-247420 .fd-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2, 10px); padding: var(--space-5, 32px) var(--space-3, 16px); color: var(--fg-2, var(--fg)); text-align: center; }
+/* 28px is an ICON size (empty-state mark), not a type tier — the --fs-* ladder
+   tops out at --fs-xl (21px) before every remaining rung becomes a fluid
+   heading clamp, so neither substitutes without visibly resizing the mark. */
 .ds-247420 .fd-empty-glyph { font-size: 28px; opacity: .55; line-height: 1; }
-.ds-247420 .fd-pre { margin: 0; padding: var(--space-2, 10px); background: var(--bg-3, var(--panel-bg-2)); border: var(--bw-hair, 1px) solid var(--rule, var(--panel-accent)); border-radius: var(--r-1, 6px); overflow: auto; max-height: 460px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; line-height: 1.5; }
+.ds-247420 .fd-pre { margin: 0; padding: var(--space-2, 10px); background: var(--bg-3, var(--panel-bg-2)); border: var(--bw-hair, 1px) solid var(--rule, var(--panel-accent)); border-radius: var(--r-1, 6px); overflow: auto; max-height: 460px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--fs-micro); line-height: 1.5; }
 .ds-247420 .fd-skill-body { max-height: 320px; }
 .ds-247420 .fd-row-actions { display: inline-flex; gap: var(--space-1, 6px); align-items: center; }
 .ds-247420 .fd-chat { display: flex; flex-direction: column; gap: var(--space-2, 10px); height: 100%; min-height: 0; }
@@ -12009,7 +12061,7 @@
   margin: 0 0 var(--space-3) 0;
 }
 .ds-247420 #ds-article-host .toc ol { margin: 0; padding-left: var(--space-3-5); }
-.ds-247420 #ds-article-host .toc li { font-size: 13px; line-height: 1.85; color: var(--panel-text); }
+.ds-247420 #ds-article-host .toc li { font-size: var(--fs-tiny); line-height: 1.85; color: var(--panel-text); }
 .ds-247420 #ds-article-host .toc li::marker { color: var(--panel-text-3); font-variant-numeric: tabular-nums; }
 .ds-247420 #ds-article-host .toc a { color: var(--panel-text-2); text-decoration: none; transition: color .12s ease; }
 .ds-247420 #ds-article-host .toc a:hover { color: var(--panel-accent); }
@@ -12040,6 +12092,12 @@
   padding: var(--space-3) var(--space-3-5);
   margin: var(--space-3) 0 var(--space-5) 0;
   font-family: var(--ff-mono);
+  /* Deliberate half-step, NOT un-migrated drift: this is a transcript block set
+     in the mono face, which runs optically ~1 rung larger than the system
+     stack at the same px. --fs-micro (12) reads thin against the surrounding
+     prose and --fs-tiny (13) reads heavy; 12.5 is the tuned midpoint. There is
+     no half-rung on the --fs-* ladder and one must not be invented for a
+     single block, so this literal stays. */
   font-size: 12.5px;
   line-height: 1.6;
   color: var(--panel-text);
@@ -12086,7 +12144,7 @@
   margin-top: var(--space-1-75);
   font-weight: 400;
   color: var(--panel-text-2);
-  font-size: 13px;
+  font-size: var(--fs-tiny);
   line-height: 1.6;
 }
 
@@ -12098,15 +12156,15 @@
   margin: var(--space-2) 0;
   background: var(--panel-1);
   border-radius: var(--r-0);
-  font-size: 13px;
+  font-size: var(--fs-tiny);
   box-shadow: var(--panel-shadow);
   text-decoration: none;
 }
 .ds-247420 .ds-prose .card:hover { background: var(--panel-hover); }
 .ds-247420 .ds-prose .card .card-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2-75); }
 .ds-247420 .ds-prose .card .repo-name { font-weight: 600; color: var(--panel-text); }
-.ds-247420 .ds-prose .card .stars { color: var(--panel-text-3); font-family: var(--ff-mono); font-size: 12px; flex: 0 0 auto; }
-.ds-247420 .ds-prose .card .desc { color: var(--panel-text-2); font-size: 12px; line-height: 1.5; margin: 0; }
+.ds-247420 .ds-prose .card .stars { color: var(--panel-text-3); font-family: var(--ff-mono); font-size: var(--fs-micro); flex: 0 0 auto; }
+.ds-247420 .ds-prose .card .desc { color: var(--panel-text-2); font-size: var(--fs-micro); line-height: 1.5; margin: 0; }
 .ds-247420 .ds-prose .tags { display: flex; gap: var(--space-1-75); flex-wrap: wrap; }
 .ds-247420 .ds-prose .tag {
   background: var(--panel-2);