/* ═══════════════════════════════════════════════════════════════
   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.375rem; /* 6px — operator ruling 2026-07-30; byte-copy of foundation/radius.css */
    --a-radius-max: 0.875rem; /* 14px */
    --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);
  }
}