@adia-ai/web-components 0.8.9 → 0.8.11

package/styles/scale.css

@@ -0,0 +1,683 @@
+/* ═══════════════════════════════════════════════════════════════
+   SCALE — the ancestor sizing context via [scale] attribute.
+
+   Six explicit tiers across two bands. Each tier is a HAND-TABLED
+   lookup (never a multiplier — multipliers drift height/font/icon
+   off coherent rows; agent-ui ADR-0038 precedent):
+
+     [scale="ui-sm"]       dense product UI    (≡ legacy [verse])
+     [scale="ui-md"]       the base register   (≡ :root defaults)
+     [scale="ui-lg"]       touch/presentation UI
+     [scale="content-sm"]  compact article
+     [scale="content-md"]  long-form default   (≡ legacy [prose])
+     [scale="content-lg"]  hero / marketing
+
+   Control-band overlap: content-sm ≡ ui-md and content-md ≡ ui-lg
+   in the control row — six names, four distinct control registers.
+   The bands differ by RHYTHM (gap/inset ramp) and type register.
+
+   Scale picks the TABLE, [size] picks the ROW: every tier re-tables
+   the full *-sm/md/lg families, so the universal [size] attribute
+   keeps working on and below a scaled element. Tokens compute at
+   their declaration site, so each tier RE-DECLARES every pointer it
+   shifts (the [verse]/[prose] gotcha), and carries explicit
+   [size] tier rules — this context layer shadows the utilities-layer
+   global [size] rules for any token the tier pins.
+
+   Selector shape: [scale][scale="X"] (0-2-0) so a tier
+   deterministically beats the legacy [verse]/[prose] attributes
+   (0-1-0) regardless of stylesheet adoption order. Never a bare
+   [scale] selector — heatmap-ui reflects scale="linear|log" and
+   legacy theme-provider reflects scale="verse|prose".
+
+   [verse]/[prose] are DEPRECATED in favor of ui-sm / content-md and
+   are removed at v1.0. Do not combine verse|prose with [scale] on
+   one element.
+
+   ui-sm, ui-md and content-md are byte-derived from verse.css,
+   :root and prose.css respectively — an unscaled page and a
+   [scale="ui-md"] page render identically. ui-lg, content-sm and
+   content-lg are DEDUCED rows (one-step shifts of their neighbors)
+   — proposed, tune to taste.
+
+   --a-density is orthogonal and composes: every spacing value rides
+   the --a-space-* rungs and every control row multiplies
+   var(--a-density), exactly like the base tables.
+   ═══════════════════════════════════════════════════════════════ */
+
+/* `context` layer (ADR-0038 step 7) — sits above utilities+components. */
+@layer context {
+  /* ═══════════════ ui-sm — dense product UI (≡ verse) ═══════════════ */
+  [scale][scale="ui-sm"] {
+    --a-inset-sm: var(--a-space-2-5); /* 10px */
+    --a-inset-md: var(--a-space-3);   /* 12px */
+    --a-inset-lg: var(--a-space-3-5); /* 14px */
+    --a-inset: var(--a-inset-md);
+
+    /* ui band shares the base gap ramp (rhythm is band-constant) */
+    --a-gap-xs: calc(var(--a-space-2)   * var(--a-gap-k)); /*  8px @k=1 */
+    --a-gap-sm: calc(var(--a-space-2-5) * var(--a-gap-k)); /* 10px @k=1 */
+    --a-gap-md: calc(var(--a-space-3)   * var(--a-gap-k)); /* 12px @k=1 */
+    --a-gap-lg: calc(var(--a-space-3-5) * var(--a-gap-k)); /* 14px @k=1 */
+    --a-gap-xl: calc(var(--a-space-4)   * var(--a-gap-k)); /* 16px @k=1 */
+    --a-gap: var(--a-gap-md);
+
+    /* tighter radius bounds (verse register) */
+    --a-radius-min: 0.25rem; /* 4px */
+    --a-radius-max: 0.75rem; /* 12px */
+    --a-radius-xs: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-xs-k)), var(--a-radius-max));
+    --a-radius-sm: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-sm-k)), var(--a-radius-max));
+    --a-radius-md: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-md-k)), var(--a-radius-max));
+    --a-radius-lg: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-lg-k)), var(--a-radius-max));
+    --a-radius: var(--a-radius-md);
+
+    --a-size-sm: calc(var(--a-density) * 1.250rem); /* 20px */
+    --a-size-md: calc(var(--a-density) * 1.500rem); /* 24px */
+    --a-size-lg: calc(var(--a-density) * 1.750rem); /* 28px */
+    --a-size: var(--a-size-md);
+
+    --a-icon-size: 16px;
+    --a-caret-size: 14px;
+    --a-toggle-size: var(--a-space-5); /* 20px @d=1 — md */
+
+    /* compact type register (static, floored at 10px) */
+    --a-display-sm: 18px;    --a-display-md: 23px;    --a-display-lg: 29px;
+    --a-title-sm: 16px;      --a-title-md: 19px;      --a-title-lg: 22px;
+    --a-heading-sm: 13px;    --a-heading-md: 14px;    --a-heading-lg: 15px;
+    --a-section-sm: 13px;    --a-section-md: 14px;    --a-section-lg: 16px;
+    --a-subsection-sm: 12px; --a-subsection-md: 13px; --a-subsection-lg: 14px;
+    --a-body-sm: 11px;       --a-body-md: 12px;       --a-body-lg: 13px;
+    --a-deck-sm: 14px;       --a-deck-md: 15px;       --a-deck-lg: 16px;
+    --a-caption-sm: 10px;    --a-caption-md: 11px;    --a-caption-lg: 12px;
+    --a-kicker-sm: 10px;     --a-kicker-md: 10px;     --a-kicker-lg: 11px;
+    --a-label-sm: 10px;      --a-label-md: 10px;      --a-label-lg: 11px;
+    --a-metric-sm: 19px;     --a-metric-md: 25px;     --a-metric-lg: 34px;
+    --a-code-sm: 11px;       --a-code-md: 12px;       --a-code-lg: 13px;
+
+    --a-ui-px: var(--a-space-2);
+    --a-ui-py: var(--a-space-1);
+    --a-ui-sm: 11px;         --a-ui-md: 12px;         --a-ui-lg: 13px;
+  }
+
+  /* ═══════════════ ui-md — the base register (reset tier) ═══════════════
+     A FULL byte-copy of the :root tables, not a no-op: scale="ui-md"
+     inside a scaled region resets its subtree to base. */
+  [scale][scale="ui-md"] {
+    --a-inset-sm: var(--a-space-3-5); /* 14px */
+    --a-inset-md: var(--a-space-4);   /* 16px */
+    --a-inset-lg: var(--a-space-4-5); /* 18px */
+    --a-inset: var(--a-inset-md);
+
+    --a-gap-xs: calc(var(--a-space-2)   * var(--a-gap-k)); /*  8px @k=1 */
+    --a-gap-sm: calc(var(--a-space-2-5) * var(--a-gap-k)); /* 10px @k=1 */
+    --a-gap-md: calc(var(--a-space-3)   * var(--a-gap-k)); /* 12px @k=1 */
+    --a-gap-lg: calc(var(--a-space-3-5) * var(--a-gap-k)); /* 14px @k=1 */
+    --a-gap-xl: calc(var(--a-space-4)   * var(--a-gap-k)); /* 16px @k=1 */
+    --a-gap: var(--a-gap-md);
+
+    --a-radius-min: 0.25rem;
+    --a-radius-max: 1.25rem;
+    --a-radius-xs: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-xs-k)), var(--a-radius-max));
+    --a-radius-sm: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-sm-k)), var(--a-radius-max));
+    --a-radius-md: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-md-k)), var(--a-radius-max));
+    --a-radius-lg: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-lg-k)), var(--a-radius-max));
+    --a-radius: var(--a-radius-md);
+
+    --a-size-sm: calc(var(--a-density) * 1.5rem);   /* 24px */
+    --a-size-md: calc(var(--a-density) * 1.875rem); /* 30px */
+    --a-size-lg: calc(var(--a-density) * 2.25rem);  /* 36px */
+    --a-size: var(--a-size-md);
+
+    --a-icon-size: 1rem;
+    --a-caret-size: 0.875rem;
+    --a-toggle-size: calc(var(--a-size-sm) - var(--a-space-1)); /* 20px @d=1 — md */
+
+    /* base type register (roles.css byte-values) */
+    --a-display-sm: clamp(22px, 20px + 1vw, 31px);
+    --a-display-md: clamp(29px, 24px + 1.5vw, 39px);
+    --a-display-lg: clamp(37px, 31px + 2vw, 52px);
+    --a-title-sm: clamp(20px, 18px + 0.375vw, 28px);
+    --a-title-md: clamp(24px, 20px + 0.5vw, 32px);
+    --a-title-lg: clamp(28px, 24px + 1vw, 36px);
+    --a-heading-sm: 16px;    --a-heading-md: 17px;    --a-heading-lg: 18px;
+    --a-section-sm: 16px;    --a-section-md: 17px;    --a-section-lg: 19px;
+    --a-subsection-sm: 15px; --a-subsection-md: 16px; --a-subsection-lg: 17px;
+    --a-body-sm: 13px;       --a-body-md: 14px;       --a-body-lg: 15px;
+    --a-deck-sm: 17px;       --a-deck-md: 18px;       --a-deck-lg: 20px;
+    --a-caption-sm: 13px;    --a-caption-md: 14px;    --a-caption-lg: 15px;
+    --a-kicker-sm: 11px;     --a-kicker-md: 12px;     --a-kicker-lg: 13px;
+    --a-label-sm: 11px;      --a-label-md: 12px;      --a-label-lg: 13px;
+    --a-metric-sm: clamp(24px, 22px + 1vw, 34px);
+    --a-metric-md: clamp(32px, 28px + 1.5vw, 48px);
+    --a-metric-lg: clamp(44px, 38px + 2vw, 64px);
+    --a-code-sm: 13px;       --a-code-md: 14px;       --a-code-lg: 15px;
+
+    --a-ui-px: var(--a-space-2);
+    --a-ui-py: var(--a-space-2);
+    --a-ui-sm: 12px;         --a-ui-md: 13px;         --a-ui-lg: 14px;
+  }
+
+  /* ═══════════════ ui-lg — touch / presentation UI (deduced) ═══════════════ */
+  [scale][scale="ui-lg"] {
+    --a-inset-sm: var(--a-space-4);   /* 16px */
+    --a-inset-md: var(--a-space-4-5); /* 18px */
+    --a-inset-lg: var(--a-space-5);   /* 20px */
+    --a-inset: var(--a-inset-md);
+
+    --a-gap-xs: calc(var(--a-space-2)   * var(--a-gap-k)); /*  8px @k=1 */
+    --a-gap-sm: calc(var(--a-space-2-5) * var(--a-gap-k)); /* 10px @k=1 */
+    --a-gap-md: calc(var(--a-space-3)   * var(--a-gap-k)); /* 12px @k=1 */
+    --a-gap-lg: calc(var(--a-space-3-5) * var(--a-gap-k)); /* 14px @k=1 */
+    --a-gap-xl: calc(var(--a-space-4)   * var(--a-gap-k)); /* 16px @k=1 */
+    --a-gap: var(--a-gap-md);
+
+    --a-radius-min: 0.25rem;
+    --a-radius-max: 1.25rem;
+    --a-radius-xs: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-xs-k)), var(--a-radius-max));
+    --a-radius-sm: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-sm-k)), var(--a-radius-max));
+    --a-radius-md: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-md-k)), var(--a-radius-max));
+    --a-radius-lg: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-lg-k)), var(--a-radius-max));
+    --a-radius: var(--a-radius-md);
+
+    --a-size-sm: calc(var(--a-density) * 1.75rem); /* 28px */
+    --a-size-md: calc(var(--a-density) * 2.25rem); /* 36px */
+    --a-size-lg: calc(var(--a-density) * 2.75rem); /* 44px */
+    --a-size: var(--a-size-md);
+
+    --a-icon-size: 20px;
+    --a-caret-size: 16px;
+    --a-toggle-size: var(--a-space-6); /* 24px @d=1 — md */
+
+    /* base register shifted up one row; lg extrapolated */
+    --a-display-sm: clamp(29px, 24px + 1.5vw, 39px);
+    --a-display-md: clamp(37px, 31px + 2vw, 52px);
+    --a-display-lg: clamp(44px, 38px + 2.5vw, 64px);
+    --a-title-sm: clamp(24px, 20px + 0.5vw, 32px);
+    --a-title-md: clamp(28px, 24px + 1vw, 36px);
+    --a-title-lg: clamp(32px, 28px + 1.5vw, 44px);
+    --a-heading-sm: 17px;    --a-heading-md: 18px;    --a-heading-lg: 19px;
+    --a-section-sm: 17px;    --a-section-md: 19px;    --a-section-lg: 21px;
+    --a-subsection-sm: 16px; --a-subsection-md: 17px; --a-subsection-lg: 18px;
+    --a-body-sm: 14px;       --a-body-md: 15px;       --a-body-lg: 16px;
+    --a-deck-sm: 18px;       --a-deck-md: 20px;       --a-deck-lg: 22px;
+    --a-caption-sm: 14px;    --a-caption-md: 15px;    --a-caption-lg: 16px;
+    --a-kicker-sm: 12px;     --a-kicker-md: 13px;     --a-kicker-lg: 14px;
+    --a-label-sm: 12px;      --a-label-md: 13px;      --a-label-lg: 14px;
+    --a-metric-sm: clamp(32px, 28px + 1.5vw, 48px);
+    --a-metric-md: clamp(44px, 38px + 2vw, 64px);
+    --a-metric-lg: clamp(52px, 44px + 2.5vw, 76px);
+    --a-code-sm: 14px;       --a-code-md: 15px;       --a-code-lg: 16px;
+
+    --a-ui-px: var(--a-space-3);
+    --a-ui-py: var(--a-space-2);
+    --a-ui-sm: 13px;         --a-ui-md: 14px;         --a-ui-lg: 16px;
+  }
+
+  /* ═══════════════ content-sm — compact article (deduced) ═══════════════
+     Control band ≡ ui-md; rhythm and type run on the content ramp.
+     Icon/caret/toggle stay unpinned (prose parity) — the universal
+     [size] rules and the base values serve them. */
+  [scale][scale="content-sm"] {
+    --a-inset-sm: var(--a-space-6);  /* 24px */
+    --a-inset-md: var(--a-space-8);  /* 32px */
+    --a-inset-lg: var(--a-space-10); /* 40px */
+    --a-inset: var(--a-inset-md);
+
+    /* content band shares the prose gap ramp (one rung up) */
+    --a-gap-xs: calc(var(--a-space-3) * var(--a-gap-k)); /* 12px @k=1 */
+    --a-gap-sm: calc(var(--a-space-4) * var(--a-gap-k)); /* 16px @k=1 */
+    --a-gap-md: calc(var(--a-space-5) * var(--a-gap-k)); /* 20px @k=1 */
+    --a-gap-lg: calc(var(--a-space-6) * var(--a-gap-k)); /* 24px @k=1 */
+    --a-gap-xl: calc(var(--a-space-7) * var(--a-gap-k)); /* 28px @k=1 */
+    --a-gap: var(--a-gap-md);
+
+    /* rounder radius bounds (content register) */
+    --a-radius-min: 0.375rem; /* 6px */
+    --a-radius-max: 1.75rem;  /* 28px */
+    --a-radius-xs: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-xs-k)), var(--a-radius-max));
+    --a-radius-sm: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-sm-k)), var(--a-radius-max));
+    --a-radius-md: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-md-k)), var(--a-radius-max));
+    --a-radius-lg: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-lg-k)), var(--a-radius-max));
+    --a-radius: var(--a-radius-md);
+
+    --a-size-sm: calc(var(--a-density) * 1.5rem);   /* 24px */
+    --a-size-md: calc(var(--a-density) * 1.875rem); /* 30px */
+    --a-size-lg: calc(var(--a-density) * 2.25rem);  /* 36px */
+    --a-size: var(--a-size-md);
+
+    /* prose register shifted down one row; sm extrapolated */
+    --a-display-sm: clamp(20px, 18px + 1vw, 30px);
+    --a-display-md: clamp(24px, 20px + 1.5vw, 36px);
+    --a-display-lg: clamp(32px, 24px + 3vw, 56px);
+    --a-title-sm: clamp(16px, 15px + 0.5vw, 20px);
+    --a-title-md: clamp(18px, 16px + 0.75vw, 24px);
+    --a-title-lg: clamp(24px, 20px + 1.5vw, 36px);
+    --a-heading-sm: 14px;    --a-heading-md: 16px;    --a-heading-lg: 20px;
+    --a-section-sm: 13px;    --a-section-md: 14px;    --a-section-lg: 17px;
+    --a-subsection-sm: 12px; --a-subsection-md: 13px; --a-subsection-lg: 15px;
+    --a-body-sm: 13px;       --a-body-md: 14px;       --a-body-lg: 16px;
+    --a-deck-sm: 14px;       --a-deck-md: 15px;       --a-deck-lg: 18px;
+    --a-caption-sm: 13px;    --a-caption-md: 14px;    --a-caption-lg: 15px;
+    --a-kicker-sm: 13px;     --a-kicker-md: 14px;     --a-kicker-lg: 15px;
+    --a-label-sm: 11px;      --a-label-md: 12px;      --a-label-lg: 13px;
+    --a-metric-sm: clamp(16px, 14px + 1vw, 26px);
+    --a-metric-md: clamp(20px, 16px + 1.5vw, 32px);
+    --a-metric-lg: clamp(28px, 24px + 2vw, 48px);
+    --a-code-sm: 13px;       --a-code-md: 14px;       --a-code-lg: 15px;
+
+    --a-ui-px: var(--a-space-3);
+    --a-ui-py: var(--a-space-2);
+    --a-ui-sm: 13px;         --a-ui-md: 14px;         --a-ui-lg: 15px;
+
+    --prose-max-width-sm: 55ch;
+    --prose-max-width-md: 65ch;
+    --prose-max-width-lg: 75ch;
+    --prose-max-width: var(--prose-max-width-md);
+  }
+
+  /* ═══════════════ content-md — long-form default (≡ prose) ═══════════════ */
+  [scale][scale="content-md"] {
+    --a-inset-sm: var(--a-space-8);  /* 32px */
+    --a-inset-md: var(--a-space-10); /* 40px */
+    --a-inset-lg: var(--a-space-12); /* 48px */
+    --a-inset: var(--a-inset-md);
+
+    --a-gap-xs: calc(var(--a-space-3) * var(--a-gap-k)); /* 12px @k=1 */
+    --a-gap-sm: calc(var(--a-space-4) * var(--a-gap-k)); /* 16px @k=1 */
+    --a-gap-md: calc(var(--a-space-5) * var(--a-gap-k)); /* 20px @k=1 */
+    --a-gap-lg: calc(var(--a-space-6) * var(--a-gap-k)); /* 24px @k=1 */
+    --a-gap-xl: calc(var(--a-space-7) * var(--a-gap-k)); /* 28px @k=1 */
+    --a-gap: var(--a-gap-md);
+
+    --a-radius-min: 0.375rem; /* 6px */
+    --a-radius-max: 1.75rem;  /* 28px */
+    --a-radius-xs: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-xs-k)), var(--a-radius-max));
+    --a-radius-sm: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-sm-k)), var(--a-radius-max));
+    --a-radius-md: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-md-k)), var(--a-radius-max));
+    --a-radius-lg: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-lg-k)), var(--a-radius-max));
+    --a-radius: var(--a-radius-md);
+
+    --a-size-sm: calc(var(--a-density) * 1.75rem); /* 28px */
+    --a-size-md: calc(var(--a-density) * 2.25rem); /* 36px */
+    --a-size-lg: calc(var(--a-density) * 2.75rem); /* 44px */
+    --a-size: var(--a-size-md);
+
+    /* prose type register (prose.css byte-values) */
+    --a-display-sm: clamp(24px, 20px + 1.5vw, 36px);
+    --a-display-md: clamp(32px, 24px + 3vw, 56px);
+    --a-display-lg: clamp(40px, 32px + 4vw, 80px);
+    --a-title-sm: clamp(18px, 16px + 0.75vw, 24px);
+    --a-title-md: clamp(24px, 20px + 1.5vw, 36px);
+    --a-title-lg: clamp(28px, 24px + 2vw, 48px);
+    --a-heading-sm: 16px;    --a-heading-md: 20px;    --a-heading-lg: 24px;
+    --a-section-sm: 14px;    --a-section-md: 17px;    --a-section-lg: 20px;
+    --a-subsection-sm: 13px; --a-subsection-md: 15px; --a-subsection-lg: 17px;
+    --a-body-sm: 14px;       --a-body-md: 16px;       --a-body-lg: 18px;
+    --a-deck-sm: 15px;       --a-deck-md: 18px;       --a-deck-lg: 20px;
+    --a-caption-sm: 14px;    --a-caption-md: 15px;    --a-caption-lg: 16px;
+    --a-kicker-sm: 14px;     --a-kicker-md: 15px;     --a-kicker-lg: 16px;
+    --a-label-sm: 12px;      --a-label-md: 13px;      --a-label-lg: 14px;
+    --a-metric-sm: clamp(20px, 16px + 1.5vw, 32px);
+    --a-metric-md: clamp(28px, 24px + 2vw, 48px);
+    --a-metric-lg: clamp(40px, 32px + 4vw, 72px);
+    --a-code-sm: 14px;       --a-code-md: 15px;       --a-code-lg: 16px;
+
+    --a-ui-px: var(--a-space-3);
+    --a-ui-py: var(--a-space-2);
+    --a-ui-sm: 14px;         --a-ui-md: 15px;         --a-ui-lg: 16px;
+
+    --prose-max-width-sm: 55ch;
+    --prose-max-width-md: 65ch;
+    --prose-max-width-lg: 75ch;
+    --prose-max-width: var(--prose-max-width-md);
+  }
+
+  /* ═══════════════ content-lg — hero / marketing (deduced) ═══════════════ */
+  [scale][scale="content-lg"] {
+    --a-inset-sm: var(--a-space-10); /* 40px */
+    --a-inset-md: var(--a-space-12); /* 48px */
+    --a-inset-lg: var(--a-space-16); /* 64px */
+    --a-inset: var(--a-inset-md);
+
+    --a-gap-xs: calc(var(--a-space-3) * var(--a-gap-k)); /* 12px @k=1 */
+    --a-gap-sm: calc(var(--a-space-4) * var(--a-gap-k)); /* 16px @k=1 */
+    --a-gap-md: calc(var(--a-space-5) * var(--a-gap-k)); /* 20px @k=1 */
+    --a-gap-lg: calc(var(--a-space-6) * var(--a-gap-k)); /* 24px @k=1 */
+    --a-gap-xl: calc(var(--a-space-7) * var(--a-gap-k)); /* 28px @k=1 */
+    --a-gap: var(--a-gap-md);
+
+    --a-radius-min: 0.375rem; /* 6px */
+    --a-radius-max: 1.75rem;  /* 28px */
+    --a-radius-xs: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-xs-k)), var(--a-radius-max));
+    --a-radius-sm: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-sm-k)), var(--a-radius-max));
+    --a-radius-md: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-md-k)), var(--a-radius-max));
+    --a-radius-lg: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-lg-k)), var(--a-radius-max));
+    --a-radius: var(--a-radius-md);
+
+    --a-size-sm: calc(var(--a-density) * 2.25rem); /* 36px */
+    --a-size-md: calc(var(--a-density) * 2.75rem); /* 44px */
+    --a-size-lg: calc(var(--a-density) * 3.25rem); /* 52px */
+    --a-size: var(--a-size-md);
+
+    --a-icon-size: 20px;
+    --a-caret-size: 16px;
+    --a-toggle-size: var(--a-space-6); /* 24px @d=1 — md */
+
+    /* prose register shifted up one row; lg extrapolated */
+    --a-display-sm: clamp(32px, 24px + 3vw, 56px);
+    --a-display-md: clamp(40px, 32px + 4vw, 80px);
+    --a-display-lg: clamp(48px, 36px + 5vw, 96px);
+    --a-title-sm: clamp(24px, 20px + 1.5vw, 36px);
+    --a-title-md: clamp(28px, 24px + 2vw, 48px);
+    --a-title-lg: clamp(34px, 28px + 2.5vw, 56px);
+    --a-heading-sm: 20px;    --a-heading-md: 24px;    --a-heading-lg: 28px;
+    --a-section-sm: 17px;    --a-section-md: 20px;    --a-section-lg: 24px;
+    --a-subsection-sm: 15px; --a-subsection-md: 17px; --a-subsection-lg: 19px;
+    --a-body-sm: 16px;       --a-body-md: 18px;       --a-body-lg: 20px;
+    --a-deck-sm: 18px;       --a-deck-md: 20px;       --a-deck-lg: 24px;
+    --a-caption-sm: 15px;    --a-caption-md: 16px;    --a-caption-lg: 17px;
+    --a-kicker-sm: 15px;     --a-kicker-md: 16px;     --a-kicker-lg: 17px;
+    --a-label-sm: 13px;      --a-label-md: 14px;      --a-label-lg: 15px;
+    --a-metric-sm: clamp(28px, 24px + 2vw, 48px);
+    --a-metric-md: clamp(40px, 32px + 4vw, 72px);
+    --a-metric-lg: clamp(48px, 40px + 4.5vw, 88px);
+    --a-code-sm: 15px;       --a-code-md: 16px;       --a-code-lg: 17px;
+
+    --a-ui-px: var(--a-space-4);
+    --a-ui-py: var(--a-space-2);
+    --a-ui-sm: 15px;         --a-ui-md: 16px;         --a-ui-lg: 18px;
+
+    --prose-max-width-sm: 55ch;
+    --prose-max-width-md: 65ch;
+    --prose-max-width-lg: 75ch;
+    --prose-max-width: var(--prose-max-width-md);
+  }
+
+  /* ═══════════════ Default-tier type pointers ═══════════════
+     Re-declared ON the scale element (:root pointers would resolve
+     base values — declaration-site rule). The global [size] rules
+     override these on [size]-bearing elements. ui-md reproduces the
+     BASE pointer defaults (announce/divide roles → -sm, the rest →
+     -md, per roles.css); every other tier pins its register at -md
+     (the verse/prose convention). */
+  [scale][scale="ui-md"]:not([size]) {
+    --a-display-size: var(--a-display-sm);
+    --a-title-size: var(--a-title-sm);
+    --a-heading-size: var(--a-heading-sm);
+    --a-section-size: var(--a-section-sm);
+    --a-subsection-size: var(--a-subsection-md);
+    --a-body-size: var(--a-body-md);
+    --a-deck-size: var(--a-deck-md);
+    --a-caption-size: var(--a-caption-md);
+    --a-kicker-size: var(--a-kicker-md);
+    --a-label-size: var(--a-label-md);
+    --a-metric-size: var(--a-metric-md);
+    --a-code-size: var(--a-code-md);
+    --a-ui-size: var(--a-ui-md);
+  }
+  [scale][scale="ui-sm"]:not([size]),
+  [scale][scale="ui-lg"]:not([size]),
+  [scale][scale="content-sm"]:not([size]),
+  [scale][scale="content-md"]:not([size]),
+  [scale][scale="content-lg"]:not([size]) {
+    --a-display-size: var(--a-display-md);
+    --a-title-size: var(--a-title-md);
+    --a-heading-size: var(--a-heading-md);
+    --a-section-size: var(--a-section-md);
+    --a-subsection-size: var(--a-subsection-md);
+    --a-body-size: var(--a-body-md);
+    --a-deck-size: var(--a-deck-md);
+    --a-caption-size: var(--a-caption-md);
+    --a-kicker-size: var(--a-kicker-md);
+    --a-label-size: var(--a-label-md);
+    --a-metric-size: var(--a-metric-md);
+    --a-code-size: var(--a-code-md);
+    --a-ui-size: var(--a-ui-md);
+  }
+
+  /* ═══════════════ [size] tier rules ═══════════════
+     Required because this context layer pins tokens the utilities-
+     layer global [size] rules would otherwise shift. Typography
+     shifts via the global [size] rules (they resolve each tier's
+     re-tabled family values). */
+
+  /* ui-sm (verse byte-values) */
+  [scale][scale="ui-sm"][size="sm"],
+  [scale][scale="ui-sm"] [size="sm"] {
+    --a-inset: var(--a-inset-sm);
+    --a-gap: var(--a-gap-sm);
+    --a-size: var(--a-size-sm);
+    --a-radius: var(--a-radius-sm);
+    --a-icon-size: 14px;
+    --a-caret-size: 12px;
+    --a-toggle-size: var(--a-space-4); /* 16px @d=1 */
+  }
+  [scale][scale="ui-sm"][size="lg"],
+  [scale][scale="ui-sm"] [size="lg"] {
+    --a-inset: var(--a-inset-lg);
+    --a-gap: var(--a-gap-lg);
+    --a-size: var(--a-size-lg);
+    --a-radius: var(--a-radius-lg);
+    --a-icon-size: 18px;
+    --a-caret-size: 16px;
+    --a-toggle-size: var(--a-space-6); /* 24px @d=1 */
+  }
+
+  /* ui-md (mirrors the utilities-layer global [size] rules) */
+  [scale][scale="ui-md"][size="sm"],
+  [scale][scale="ui-md"] [size="sm"] {
+    --a-inset: var(--a-inset-sm);
+    --a-gap: var(--a-gap-sm);
+    --a-size: calc(var(--a-density) * 1.5rem);
+    --a-radius: var(--a-radius-sm);
+    --a-icon-size: 0.875rem;
+    --a-caret-size: 0.75rem;
+    --a-toggle-size: calc(var(--a-size-sm) - var(--a-space-2)); /* 16px @d=1 */
+    --a-ui-px: var(--a-space-1-5);
+  }
+  [scale][scale="ui-md"][size="lg"],
+  [scale][scale="ui-md"] [size="lg"] {
+    --a-inset: var(--a-inset-lg);
+    --a-gap: var(--a-gap-lg);
+    --a-size: calc(var(--a-density) * 2.25rem);
+    --a-radius: var(--a-radius-lg);
+    --a-icon-size: 1.25rem;
+    --a-caret-size: 1rem;
+    --a-toggle-size: var(--a-size-sm); /* 24px @d=1 */
+    --a-ui-px: var(--a-space-3);
+  }
+
+  /* ui-lg */
+  [scale][scale="ui-lg"][size="sm"],
+  [scale][scale="ui-lg"] [size="sm"] {
+    --a-inset: var(--a-inset-sm);
+    --a-gap: var(--a-gap-sm);
+    --a-size: var(--a-size-sm);
+    --a-radius: var(--a-radius-sm);
+    --a-icon-size: 16px;
+    --a-caret-size: 14px;
+    --a-toggle-size: var(--a-space-5); /* 20px @d=1 */
+  }
+  [scale][scale="ui-lg"][size="lg"],
+  [scale][scale="ui-lg"] [size="lg"] {
+    --a-inset: var(--a-inset-lg);
+    --a-gap: var(--a-gap-lg);
+    --a-size: var(--a-size-lg);
+    --a-radius: var(--a-radius-lg);
+    --a-icon-size: 24px;
+    --a-caret-size: 18px;
+    --a-toggle-size: var(--a-space-7); /* 28px @d=1 */
+  }
+
+  /* content-sm / content-md — icon/caret/toggle unpinned (prose parity),
+     so only the pinned spatial pointers re-shift here. */
+  [scale][scale="content-sm"][size="sm"],
+  [scale][scale="content-sm"] [size="sm"],
+  [scale][scale="content-md"][size="sm"],
+  [scale][scale="content-md"] [size="sm"] {
+    --a-inset: var(--a-inset-sm);
+    --a-gap: var(--a-gap-sm);
+    --a-size: var(--a-size-sm);
+    --a-radius: var(--a-radius-sm);
+  }
+  [scale][scale="content-sm"][size="lg"],
+  [scale][scale="content-sm"] [size="lg"],
+  [scale][scale="content-md"][size="lg"],
+  [scale][scale="content-md"] [size="lg"] {
+    --a-inset: var(--a-inset-lg);
+    --a-gap: var(--a-gap-lg);
+    --a-size: var(--a-size-lg);
+    --a-radius: var(--a-radius-lg);
+  }
+
+  /* content-lg */
+  [scale][scale="content-lg"][size="sm"],
+  [scale][scale="content-lg"] [size="sm"] {
+    --a-inset: var(--a-inset-sm);
+    --a-gap: var(--a-gap-sm);
+    --a-size: var(--a-size-sm);
+    --a-radius: var(--a-radius-sm);
+    --a-icon-size: 16px;
+    --a-caret-size: 14px;
+    --a-toggle-size: var(--a-space-5); /* 20px @d=1 */
+  }
+  [scale][scale="content-lg"][size="lg"],
+  [scale][scale="content-lg"] [size="lg"] {
+    --a-inset: var(--a-inset-lg);
+    --a-gap: var(--a-gap-lg);
+    --a-size: var(--a-size-lg);
+    --a-radius: var(--a-radius-lg);
+    --a-icon-size: 24px;
+    --a-caret-size: 18px;
+    --a-toggle-size: var(--a-space-7); /* 28px @d=1 */
+  }
+
+  /* ═══════════════ Identity-component ladders ═══════════════
+     avatar-ui / adia-mark-ui / adia-wordmark-ui / avatar-group-ui
+     declare their own 3-row ladders at component scope
+     (:where(:scope)), so an ancestor's inherited value can never
+     reach them — the tier must re-declare the family ON the element
+     (this context layer beats the components layer). One row shift
+     per register step; the removed xs/xl tiers live on as
+     (ui-sm, sm) and (ui-lg, lg) grid cells. */
+
+  /* ui-sm — one row down */
+  [scale][scale="ui-sm"] avatar-ui {
+    --avatar-size-sm: 1.25rem;
+    --avatar-size-md: 1.75rem;
+    --avatar-size-lg: 2.5rem;
+  }
+  [scale][scale="ui-sm"] avatar-group-ui {
+    --avatar-group-counter-size-sm: 1.25rem;
+    --avatar-group-counter-size-md: 1.75rem;
+    --avatar-group-counter-size-lg: 2rem;
+    --avatar-group-overlap-sm: -0.3rem;
+    --avatar-group-overlap-md: -0.4rem;
+    --avatar-group-overlap-lg: -0.5rem;
+  }
+  [scale][scale="ui-sm"] adia-mark-ui {
+    --adia-mark-size-sm: 1.25rem;
+    --adia-mark-size-md: 1.75rem;
+    --adia-mark-size-lg: 2.5rem;
+  }
+  [scale][scale="ui-sm"] adia-wordmark-ui {
+    --adia-wordmark-height-sm: 0.875rem;
+    --adia-wordmark-height-md: 1.125rem;
+    --adia-wordmark-height-lg: 1.5rem;
+  }
+
+  /* ui-lg / content-md — one row up */
+  [scale][scale="ui-lg"] avatar-ui,
+  [scale][scale="content-md"] avatar-ui {
+    --avatar-size-sm: 2.5rem;
+    --avatar-size-md: 3.5rem;
+    --avatar-size-lg: 4.5rem;
+  }
+  [scale][scale="ui-lg"] avatar-group-ui,
+  [scale][scale="content-md"] avatar-group-ui {
+    --avatar-group-counter-size-sm: 2rem;
+    --avatar-group-counter-size-md: 3.5rem;
+    --avatar-group-counter-size-lg: 4.5rem;
+    --avatar-group-overlap-sm: -0.5rem;
+    --avatar-group-overlap-md: -0.625rem;
+    --avatar-group-overlap-lg: -0.75rem;
+  }
+  [scale][scale="ui-lg"] adia-mark-ui,
+  [scale][scale="content-md"] adia-mark-ui {
+    --adia-mark-size-sm: 2.5rem;
+    --adia-mark-size-md: 3.5rem;
+    --adia-mark-size-lg: 4.5rem;
+  }
+  [scale][scale="ui-lg"] adia-wordmark-ui,
+  [scale][scale="content-md"] adia-wordmark-ui {
+    --adia-wordmark-height-sm: 1.5rem;
+    --adia-wordmark-height-md: 2rem;
+    --adia-wordmark-height-lg: 2.75rem;
+  }
+
+  /* content-lg — two rows up */
+  [scale][scale="content-lg"] avatar-ui {
+    --avatar-size-sm: 3.5rem;
+    --avatar-size-md: 4.5rem;
+    --avatar-size-lg: 5.5rem;
+  }
+  [scale][scale="content-lg"] avatar-group-ui {
+    --avatar-group-counter-size-sm: 3.5rem;
+    --avatar-group-counter-size-md: 4.5rem;
+    --avatar-group-counter-size-lg: 5.5rem;
+    --avatar-group-overlap-sm: -0.625rem;
+    --avatar-group-overlap-md: -0.75rem;
+    --avatar-group-overlap-lg: -0.875rem;
+  }
+  [scale][scale="content-lg"] adia-mark-ui {
+    --adia-mark-size-sm: 3.5rem;
+    --adia-mark-size-md: 4.5rem;
+    --adia-mark-size-lg: 5.5rem;
+  }
+  [scale][scale="content-lg"] adia-wordmark-ui {
+    --adia-wordmark-height-sm: 2rem;
+    --adia-wordmark-height-md: 2.75rem;
+    --adia-wordmark-height-lg: 3.5rem;
+  }
+  /* ui-md / content-sm ride the components' own base ladders — no
+     re-declaration needed (the component :where(:scope) values ARE
+     the base row). */
+
+  /* ═══════════════ Content-band flow enhancements ═══════════════
+     Ported from prose.css so every content tier gets them.
+     [scale^="content-"] is value-prefixed — cannot collide with
+     heatmap-ui's scale="linear|log" or legacy theme-provider
+     scale="verse|prose". */
+  [scale^="content-"] > :is(p, ul, ol, blockquote, pre, table, dl) {
+    max-width: var(--prose-max-width);
+  }
+  [scale^="content-"] :is(ul, ol) {
+    padding-inline-start: 1.75em;
+    margin-block: 0.75em;
+  }
+  [scale^="content-"] li + li {
+    margin-block-start: 0.375em;
+  }
+  [scale^="content-"] blockquote {
+    padding: var(--a-space-4) var(--a-space-6);
+    border-inline-start-width: 4px;
+    font-size: var(--a-body-size);
+  }
+  [scale^="content-"] hr {
+    margin-block: var(--a-space-6);
+  }
+  [scale^="content-"] table {
+    border: 1px solid var(--a-border-subtle);
+    border-radius: var(--a-radius-md);
+    overflow: hidden;
+  }
+  [scale^="content-"] th {
+    background: var(--a-bg-muted);
+  }
+  [scale^="content-"] pre {
+    padding: var(--a-space-5);
+  }
+  [scale^="content-"] img {
+    border-radius: var(--a-radius-lg);
+  }
+}