@guildofgleks/ui 21.10.0 → 21.12.0

package/styles/theme.css

@@ -49,6 +49,11 @@
   --gog-font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
   --gog-font-mono: ui-monospace, SFMono-Regular, 'JetBrains Mono', monospace;
 
+  /* 11px, below `xs`. The chip and the tag both wrote it as a literal at `xsm` — the same value
+     chosen twice, independently, which is a missing rung rather than two opinions, exactly as
+     `slg` was. Moving them to `xs` instead would have made `xsm` and `sm` the same size, which
+     is the one thing `xsm` exists to avoid. */
+  --gog-text-2xs: 0.6875rem;
   --gog-text-xs: 0.75rem;
   --gog-text-sm: 0.875rem;
   --gog-text-md: 1rem;
@@ -209,6 +214,54 @@
   --gog-field-float-label-in-top: 6px;
   --gog-field-float-label-over-reserve: 1.4em;
 
+  /* ── Elevation ───────────────────────────────────────────────
+     A ladder of six heights, `--gog-elevation-0` through `-5`, generated in the derived block
+     below from the knobs here. Z doubles: 0, 1, 2, 4, 8, 16. No theme writes a step; a theme
+     turns these knobs and every step follows, which is the whole reason the family exists --
+     before it, eleven themes hand-authored 22 shadow values with no relationship to each other,
+     and two of them gave a modal dialog the elevation of a card because restating the second
+     value was work.
+
+     A step is two lights. The **contact shadow** hugs the object and does not grow with height:
+     that is what ambient occlusion does, and it is what this library already did in the three
+     places it wrote two soft layers (`0 1px 2px` to `0 1px 3px`, every time). The **key light**
+     is the one that moves -- its offset is Z and its blur is three times it.
+
+     **Three, not two, and the number was measured rather than adopted.** The ruleset this comes
+     from (`docs/component-geometry.md`, L10) specifies blur = 2Z. Every shadow the library
+     shipped disagreed: across 26 layers the ratio runs 1.33 to 6.00 with a median of exactly
+     3.00, and 16 of the 26 are 3.00 on the nose. The rule was written from the physics and the
+     library was written from looking at it; on this one the library was consistent and the rule
+     was not, so 3 it is. It falls out well -- at the top step the blur is 48px, which is the
+     dialog's own shipped blur to the pixel.
+
+     The three geometry knobs are multipliers per unit of Z, and between them they cover every
+     style a theme in this repo actually uses. Soft (the default) drops the key straight down.
+     A hard-offset theme -- `bevel`, `ledger` -- sets x and y to a fraction and blur to 0. A glow
+     theme -- `terminal` -- sets y to 0 and keeps blur, and the key light becomes a halo without
+     the ladder knowing anything about halos.
+
+     What is deliberately *not* in a step: the hairline ring and the top-edge catch light. Both
+     are below as their own tokens, because they belong to particular surfaces rather than to
+     height -- a dark theme's overlay wants the ring and its in-flow `elevated` card must not have
+     it, or `elevated` and `outlined` render identically, which is a defect 21.7.1 already fixed
+     once. A component composes them: `var(--gog-elevation-ring), var(--gog-elevation-3)`. */
+  --gog-elevation-ink: 23 18 12;
+  --gog-elevation-key-alpha: 0.08;
+  /* Half the key, which is the ratio the light theme's own two-layer panel already held
+     (0.04 against 0.08). A theme states both, so a theme that wants a different ratio -- and
+     `material` does, its contact being stronger than its key -- just writes it. */
+  --gog-elevation-ambient-alpha: 0.04;
+  --gog-elevation-contact-blur: 3px;
+  --gog-elevation-key-x: 0;
+  --gog-elevation-key-y: 1;
+  --gog-elevation-key-blur: 3;
+  /* Inert by default: a 0px spread paints nothing, and a 0 alpha costs nothing to composite.
+     A theme whose surfaces read by their contour rather than by their shadow turns them on. */
+  --gog-elevation-ring-width: 0px;
+  --gog-elevation-highlight-ink: 255 255 255;
+  --gog-elevation-highlight-alpha: 0;
+
   /* ── Icon & spinner ───────────────────────────────────────────────────────── */
   --gog-icon-size: 1.2em;
   --gog-icon-stroke-width: 2;
@@ -221,10 +274,11 @@
 
   /* ── Toast stack ──────────────────────────────────────────────────────────── */
   --gog-toast-min-width: 280px;
-  --gog-toast-max-width: 400px;
+  /* --gog-toast-max-width lives in the :root, [data-theme] block below — it derives from
+     --gog-toast-stack-padding, and a derived value cannot live in this literals-only block (it
+     would not follow a scoped theme). */
   --gog-toast-z-index: 9999;
   --gog-toast-enter-distance: 110%;
-  --gog-toast-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
 
   /* ── Overlay stacking ───────────────────────────────────────────────────────
      Baseline for dropdown panels. gog-dialog re-declares this on its own panel so
@@ -266,8 +320,17 @@
   --gog-warning-color: #c45100; /* Dark amber */
   --gog-info-color: #2b5c8f; /* Lapis */
 
-  /* Soft, deep shadow — old leather */
-  --gog-panel-shadow: 0 4px 20px rgba(23, 18, 12, 0.08), 0 1px 3px rgba(23, 18, 12, 0.04);
+  /* The boundary that identifies a control, as distinct from `--gog-border-color`, which is the
+     decorative hairline this library draws dividers, table rules and panel outlines with and
+     deliberately keeps faint. Three controls -- `gog-chip`, `gog-toggle`, `gog-button-toggle` --
+     had been reading the decorative one as their own edge, and the boundary sweep in 21.12.0
+     measured them at 1.18 to 2.17:1 in every shipped theme, against the 3:1 SC 1.4.11 requires.
+     Neither their border nor their fill carried it; the sweep checks the better of the two.
+
+     Computed, not chosen: `npm run suggest:color -- --gog-border-color <ground> 3.2` per theme,
+     holding hue and chroma so each theme's neutral stays its own, then the value that clears both
+     the page and the surface. */
+  --gog-control-boundary-color: #96866d;
   --gog-spinner-overlay-bg: rgba(247, 243, 235, 0.85);
 }
 
@@ -304,9 +367,34 @@
   --gog-warning-color: #c45100; /* Dark amber */
   --gog-info-color: #2b5c8f; /* Lapis */
 
-  /* Soft, deep shadow — old leather */
-  --gog-panel-shadow: 0 4px 20px rgba(23, 18, 12, 0.08), 0 1px 3px rgba(23, 18, 12, 0.04);
+  /* The boundary that identifies a control, as distinct from `--gog-border-color`, which is the
+     decorative hairline this library draws dividers, table rules and panel outlines with and
+     deliberately keeps faint. Three controls -- `gog-chip`, `gog-toggle`, `gog-button-toggle` --
+     had been reading the decorative one as their own edge, and the boundary sweep in 21.12.0
+     measured them at 1.18 to 2.17:1 in every shipped theme, against the 3:1 SC 1.4.11 requires.
+     Neither their border nor their fill carried it; the sweep checks the better of the two.
+
+     Computed, not chosen: `npm run suggest:color -- --gog-border-color <ground> 3.2` per theme,
+     holding hue and chroma so each theme's neutral stays its own, then the value that clears both
+     the page and the surface. */
+  --gog-control-boundary-color: #96866d;
   --gog-spinner-overlay-bg: rgba(247, 243, 235, 0.85);
+
+  /* Restated rather than inherited, and every knob of the set rather than the ones that differ
+     from the default. A custom property inherits, so a `data-theme="light"` subtree nested inside
+     a dark page picks up whatever the outer theme left set — that is how this block came to carry
+     its own copy of `--gog-panel-shadow` before the ladder existed. A theme owns all ten or it
+     owns none; `check:elevation` enforces the set. */
+  --gog-elevation-ink: 23 18 12;
+  --gog-elevation-key-alpha: 0.08;
+  --gog-elevation-ambient-alpha: 0.04;
+  --gog-elevation-contact-blur: 3px;
+  --gog-elevation-key-x: 0;
+  --gog-elevation-key-y: 1;
+  --gog-elevation-key-blur: 3;
+  --gog-elevation-ring-width: 0px;
+  --gog-elevation-highlight-ink: 255 255 255;
+  --gog-elevation-highlight-alpha: 0;
 }
 
 :root[data-theme='dark'],
@@ -341,24 +429,27 @@
   --gog-warning-color: #fbbf24; /* Amber */
   --gog-info-color: #38bdf8; /* Sapphire */
 
-  --gog-panel-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--gog-border-color);
-  /* `elevated` drops the 1px ring `--gog-panel-shadow` carries for real overlays (dialog,
-     dropdown, tooltip), because that ring is exactly what `outlined` draws — with it, the two
-     card/panel variants render identically on a dark ground. The blur stays; the ring goes,
-     so outlined has an edge and elevated does not. Light themes need none of this: their
-     shadow has no ring and reads on its own. */
-  /* `elevated` cannot use `--gog-panel-shadow` here. That shadow carries a `0 0 0 1px` ring so
-     overlays keep an edge against the page, and the ring is exactly what `outlined` draws — with
-     it the two variants render identically. Dropping the ring and keeping the 30px black blur was
-     worse: black blurred over a near-black page reads as smudge rather than lift.
-
-     So elevation is stated the way a dark UI actually states it — a hairline of light along the
-     top edge, where a raised surface would catch it, over a tighter, darker shadow that stays
-     close to the element instead of hazing the page. */
-  --gog-card-elevated-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 6px rgba(0, 0, 0, 0.55);
-  --gog-panel-elevated-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 6px rgba(0, 0, 0, 0.55);
+  /* Elevation, as this theme states it. The long note in the literal block explains the knobs;
+     what is specific here is why a dark ground needs all three of them. Black blurred over a
+     near-black page reads as smudge rather than lift, so the shadow stays tight and dark and the
+     *edges* do the work: a hairline of light along the top, where a raised surface would catch
+     it, and a hairline ring for overlays that have to sit apart from the page.
+
+     The ring is not on the ladder, deliberately. `elevated` must not have one -- a ring is
+     exactly what `outlined` draws, and with it the two card and panel variants render
+     identically on a dark ground. That was a real defect, fixed in 21.7.1, and folding the ring
+     into a step would have reintroduced it. Overlays compose it; `elevated` does not. */
+  --gog-elevation-ink: 0 0 0;
+  --gog-elevation-key-alpha: 0.55;
+  --gog-elevation-ambient-alpha: 0.28;
+  --gog-elevation-contact-blur: 3px;
+  --gog-elevation-key-x: 0;
+  --gog-elevation-key-y: 1;
+  --gog-elevation-key-blur: 3;
+  --gog-elevation-ring-width: 1px;
+  --gog-elevation-highlight-ink: 255 255 255;
+  --gog-elevation-highlight-alpha: 0.07;
+  --gog-control-boundary-color: #716353;
   --gog-spinner-overlay-bg: rgba(13, 11, 8, 0.85);
 }
 
@@ -373,6 +464,68 @@
      Split out of the literal block above because they read other tokens: they have
      to re-resolve inside each theme scope. */
 
+  /* ── The elevation ladder ────────────────────────────────────────────────────
+     Generated from the knobs in the literal block above; see the long note there for why the
+     key light's blur is three times its offset and why the ring and the highlight are not part
+     of a step. Every step but 0 is the same two layers with one number changed, which is the
+     property that makes the arithmetic assertable by reading rather than by a check.
+
+     The heights, and what the library puts on each:
+
+       0  --  flat. Every button at rest, and the `outlined` and `filled` card and panel.
+       1  --  a mark riding on a control: the toggle's thumb.
+       2  --  a surface raised in normal flow: the `elevated` card and panel.
+       4  --  an overlay anchored to a control: the four dropdown panels, the tooltip, the menu.
+       8  --  an overlay floating free of one: the toast.
+      16  --  a modal that owns the screen: the dialog.
+
+     `gog-menu` is the one whose height *changes* here rather than being restated. It aliased
+     `--gog-dialog-shadow`, so a dropdown menu carried a modal's shadow while the four dropdown
+     panels beside it carried a panel's -- two overlays of one kind, four steps apart, and the
+     alias is why nobody saw it. */
+  --gog-elevation-contact: 0 1px var(--gog-elevation-contact-blur)
+    rgb(var(--gog-elevation-ink) / var(--gog-elevation-ambient-alpha));
+  /* Composable character layers, not steps. A component that wants one prepends it. */
+  --gog-elevation-ring: 0 0 0 var(--gog-elevation-ring-width) var(--gog-border-color);
+  --gog-elevation-highlight: inset 0 1px 0
+    rgb(var(--gog-elevation-highlight-ink) / var(--gog-elevation-highlight-alpha));
+  --gog-elevation-0: none;
+  --gog-elevation-1:
+    var(--gog-elevation-contact),
+    calc(1px * var(--gog-elevation-key-x)) calc(1px * var(--gog-elevation-key-y))
+      calc(1px * var(--gog-elevation-key-blur))
+      rgb(var(--gog-elevation-ink) / var(--gog-elevation-key-alpha));
+  --gog-elevation-2:
+    var(--gog-elevation-contact),
+    calc(2px * var(--gog-elevation-key-x)) calc(2px * var(--gog-elevation-key-y))
+      calc(2px * var(--gog-elevation-key-blur))
+      rgb(var(--gog-elevation-ink) / var(--gog-elevation-key-alpha));
+  --gog-elevation-3:
+    var(--gog-elevation-contact),
+    calc(4px * var(--gog-elevation-key-x)) calc(4px * var(--gog-elevation-key-y))
+      calc(4px * var(--gog-elevation-key-blur))
+      rgb(var(--gog-elevation-ink) / var(--gog-elevation-key-alpha));
+  --gog-elevation-4:
+    var(--gog-elevation-contact),
+    calc(8px * var(--gog-elevation-key-x)) calc(8px * var(--gog-elevation-key-y))
+      calc(8px * var(--gog-elevation-key-blur))
+      rgb(var(--gog-elevation-ink) / var(--gog-elevation-key-alpha));
+  --gog-elevation-5:
+    var(--gog-elevation-contact),
+    calc(16px * var(--gog-elevation-key-x)) calc(16px * var(--gog-elevation-key-y))
+      calc(16px * var(--gog-elevation-key-blur))
+      rgb(var(--gog-elevation-ink) / var(--gog-elevation-key-alpha));
+
+  /* The library's own surfaces, placed on the ladder. These stay the public names a consumer
+     overrides — what changed in 21.12.0 is that their *value* is a step rather than a hand-written
+     shadow, so a theme moves all of them by turning one knob. Overriding any single one still
+     works exactly as before. */
+  --gog-panel-shadow: var(--gog-elevation-ring), var(--gog-elevation-3);
+  --gog-panel-elevated-shadow: var(--gog-elevation-highlight), var(--gog-elevation-2);
+  --gog-toast-shadow: var(--gog-elevation-ring), var(--gog-elevation-4);
+  --gog-dialog-shadow: var(--gog-elevation-ring), var(--gog-elevation-5);
+  --gog-toggle-thumb-shadow: var(--gog-elevation-1);
+
   /* ── Text on a status fill ───────────────────────────────────────────────────
      `--gog-accent-text-color` means "text on the accent fill" and flips with the theme, which
      made it the obvious label for a status fill too — `gogBadge` used it for all four. It is
@@ -413,44 +566,56 @@
   /* The blocking overlay outranks everything, including a dialog it may be covering. */
   --gog-spinner-overlay-z: calc(var(--gog-z-base) + 8000);
 
-  --gog-space-2: calc(2px * var(--gog-density));
   --gog-space-4: calc(4px * var(--gog-density));
-  --gog-space-6: calc(6px * var(--gog-density));
   --gog-space-8: calc(8px * var(--gog-density));
-  --gog-space-10: calc(10px * var(--gog-density));
   --gog-space-12: calc(12px * var(--gog-density));
-  --gog-space-14: calc(14px * var(--gog-density));
   --gog-space-16: calc(16px * var(--gog-density));
-  --gog-space-18: calc(18px * var(--gog-density));
   --gog-space-20: calc(20px * var(--gog-density));
   --gog-space-24: calc(24px * var(--gog-density));
   --gog-space-28: calc(28px * var(--gog-density));
   --gog-space-32: calc(32px * var(--gog-density));
+  /* 21.11.0. Added because the optical ratio requires it, not because a design asked: a control
+     with 20px of vertical padding needs exactly 40px horizontal, and `slg` is that control on
+     `gog-button`, `gog-inputfield` and every field that shares their tier. The scale had 32 and
+     then jumped to 48. */
+  --gog-space-40: calc(40px * var(--gog-density));
   --gog-space-48: calc(48px * var(--gog-density));
   --gog-space-xs: var(--gog-space-4);
   --gog-space-sm: var(--gog-space-8);
   --gog-space-md: var(--gog-space-16);
   --gog-space-lg: var(--gog-space-24);
   --gog-space-2xl: var(--gog-space-48);
-  --gog-control-padding-y: var(--gog-space-10);
-  --gog-control-padding-x: var(--gog-space-14);
-  --gog-control-checkbox-padding: var(--gog-space-6);
+  /* The shared control tier, on the 4px grid at a ratio of exactly 2.0 (styling.instructions.md,
+     law 3). It was 10/14, a ratio of 1.40; `--gog-field-md-padding-*` derives from it, so this
+     pair is what an `md` input, select, multiselect, autocomplete and datepicker are padded by. */
+  --gog-control-padding-y: var(--gog-space-12);
+  --gog-control-padding-x: var(--gog-space-24);
+  /* One value, all four sides: this is the padding a checkable control's `<label>` carries around
+     its box, and it is part of the pointer target — a 12px `xsm` box inside 8px of padding is a
+     28px target, which is how the smallest checkbox clears WCAG 2.5.8 without growing. */
+  --gog-control-checkbox-padding: var(--gog-space-8);
   --gog-field-xsm-padding-y: var(--gog-space-4);
   --gog-field-xsm-padding-x: var(--gog-space-8);
-  --gog-field-sm-padding-y: var(--gog-space-6);
-  --gog-field-sm-padding-x: var(--gog-space-10);
-  --gog-field-lg-padding-y: var(--gog-space-14);
-  --gog-field-lg-padding-x: var(--gog-space-18);
-  --gog-field-slg-padding-y: var(--gog-space-18);
-  --gog-field-slg-padding-x: var(--gog-space-20);
+  --gog-field-sm-padding-y: var(--gog-space-8);
+  --gog-field-sm-padding-x: var(--gog-space-16);
+  --gog-field-lg-padding-y: var(--gog-space-16);
+  --gog-field-lg-padding-x: var(--gog-space-32);
+  --gog-field-slg-padding-y: var(--gog-space-20);
+  --gog-field-slg-padding-x: var(--gog-space-40);
   --gog-field-float-label-over-gap: var(--gog-space-8);
-  --gog-toast-gap: var(--gog-space-10);
+  --gog-toast-gap: var(--gog-space-12);
   --gog-toast-stack-padding: var(--gog-space-16);
-  --gog-field-xsm-icon-offset: var(--gog-space-6);
+  /* L9 (docs/component-geometry.md, "D7 — taken"): the message wraps, so its cap is a measure —
+     53ch at --gog-toast-message-font-size (14px), the nearest whole character to today's 400px so
+     this changes robustness to a font-size change, not the pixels anyone sees today. L8's viewport
+     exception is layered on top: the margin reads --gog-toast-stack-padding above, the container's
+     own edge inset, rather than a new number. */
+  --gog-toast-max-width: min(53ch, calc(100vw - var(--gog-toast-stack-padding) * 2));
+  --gog-field-xsm-icon-offset: var(--gog-space-8);
   --gog-field-sm-icon-offset: var(--gog-space-8);
-  --gog-field-lg-icon-offset: var(--gog-space-14);
-  --gog-field-slg-icon-offset: var(--gog-space-18);
-  --gog-control-icon-offset: var(--gog-space-10);
+  --gog-field-lg-icon-offset: var(--gog-space-16);
+  --gog-field-slg-icon-offset: var(--gog-space-20);
+  --gog-control-icon-offset: var(--gog-space-12);
   --gog-elevated-surface-color: var(--gog-surface-color);
   --gog-panel-radius: calc(var(--gog-radius) + 8px);
   --gog-field-xsm-font-size: var(--gog-text-xs);
@@ -460,6 +625,16 @@
      literals-only `:root` freezes to that scope's scale (rule C). */
   --gog-field-slg-font-size: var(--gog-text-slg);
 
+  /* Leading for the three kinds of text every field renders, declared once and aliased by each
+     component the way the padding and float-label tiers above already are. A block that sets a
+     font size sets its leading (law 4): inheriting it while changing the size moves the ratio
+     silently, which is the thing the law guards. Roles, from
+     `docs/component-geometry.md` — the value in the field itself is one UI line whose box is the
+     row height; a label and an error message may both wrap beside their control. */
+  --gog-field-line-height: var(--gog-line-height-normal);
+  --gog-field-label-line-height: var(--gog-line-height-snug);
+  --gog-field-error-line-height: var(--gog-line-height-snug);
+
   --gog-field-md-padding-y: var(--gog-control-padding-y);
   --gog-field-md-padding-x: var(--gog-control-padding-x);
 
@@ -508,6 +683,9 @@
   --gog-accordion-hover-color: var(--gog-accordion-text-color);
   --gog-accordion-press-bg: var(--gog-border-color);
   --gog-accordion-hover-ring: var(--gog-accent-dim);
+  /* Its own token. The header's `:focus-visible` outline read `--gog-accordion-hover-ring`, so a
+     hover-weight colour was doing focus duty and failed 3:1 in all eleven themes. */
+  --gog-accordion-focus-ring-color: var(--gog-accent-color);
   --gog-accordion-focus-ring-width: var(--gog-focus-ring-width);
   --gog-accordion-body-color: var(--gog-text-color);
   --gog-accordion-body-line-height: var(--gog-line-height-loose);
@@ -535,41 +713,59 @@
   --gog-accordion-xsm-padding-y: var(--gog-space-4);
   --gog-accordion-xsm-padding-x: var(--gog-space-8);
   --gog-accordion-xsm-font-size: var(--gog-text-xs);
+  /* The header label is one UI line whose box is the row height (law 4, role ui-line). */
+  --gog-accordion-line-height: var(--gog-line-height-normal);
   --gog-accordion-xsm-letter-spacing: 0.2px;
-  --gog-accordion-xsm-content-gap: var(--gog-space-2);
+  --gog-accordion-xsm-content-gap: var(--gog-space-4);
   --gog-accordion-xsm-body-font-size: var(--gog-text-xs);
   --gog-accordion-xsm-body-line-height: var(--gog-line-height-relaxed);
   --gog-accordion-xsm-body-padding-top: var(--gog-space-4);
-  --gog-accordion-xsm-body-padding-bottom: var(--gog-space-6);
-  --gog-accordion-xsm-chevron-size: 11px;
-  --gog-accordion-xsm-chevron-font-size: 10px;
-
-  --gog-accordion-sm-padding-y: var(--gog-space-6);
-  --gog-accordion-sm-padding-x: var(--gog-space-10);
+  --gog-accordion-xsm-body-padding-bottom: var(--gog-space-8);
+  --gog-accordion-xsm-chevron-size: 1.4em;
+  /* The chevron is a ratio of the header's own type, not a px ladder of its own. It had been
+     10/12/14/16/18px of glyph basis inside an 11/13/15/18/20px box, beside a label in rem -- so
+     raising the browser's text size grew the label and left the chevron where it was, and the
+     box/label ratio drifted 0.92 to 1.29 across the five sizes.
+
+     Two bugs came out of writing it as a ratio. The box was *smaller than its glyph at every
+     size*: `gog-icon` renders at `--gog-icon-size: 1.2em` of this font size, so the mark was
+     12/14.4/16.8/19.2/21.6px inside a box of 11/13/15/18/20 and overflowed it everywhere. And
+     the five sizes had five ratios where they needed one.
+
+     `1em` makes this the em basis rather than the glyph size, so the mark is 1.2em of the header
+     and the 1.4em box surrounds it. All five steps hold the same ratio and still render five
+     different sizes, because the header's type differs -- the tokens stay per-size so an override
+     keeps working. */
+  --gog-accordion-xsm-chevron-font-size: 1em;
+  /* A glyph in its own box: leading would push it off the centre it is placed on. */
+  --gog-accordion-chevron-line-height: var(--gog-line-height-none);
+
+  --gog-accordion-sm-padding-y: var(--gog-space-8);
+  --gog-accordion-sm-padding-x: var(--gog-space-16);
   --gog-accordion-sm-font-size: var(--gog-text-xs);
   --gog-accordion-sm-letter-spacing: 0.4px;
-  --gog-accordion-sm-content-gap: var(--gog-space-2);
+  --gog-accordion-sm-content-gap: var(--gog-space-4);
   --gog-accordion-sm-body-font-size: var(--gog-text-xs);
   --gog-accordion-sm-body-line-height: var(--gog-accordion-body-line-height);
-  --gog-accordion-sm-body-padding-top: var(--gog-space-6);
+  --gog-accordion-sm-body-padding-top: var(--gog-space-8);
   --gog-accordion-sm-body-padding-bottom: var(--gog-space-8);
-  --gog-accordion-sm-chevron-size: 13px;
-  --gog-accordion-sm-chevron-font-size: 12px;
+  --gog-accordion-sm-chevron-size: 1.4em;
+  --gog-accordion-sm-chevron-font-size: 1em;
 
-  --gog-accordion-md-padding-y: var(--gog-space-10);
-  --gog-accordion-md-padding-x: var(--gog-space-14);
+  --gog-accordion-md-padding-y: var(--gog-space-12);
+  --gog-accordion-md-padding-x: var(--gog-space-24);
   --gog-accordion-md-font-size: var(--gog-text-xs);
   --gog-accordion-md-letter-spacing: 0.8px;
-  --gog-accordion-md-content-gap: var(--gog-space-2);
+  --gog-accordion-md-content-gap: var(--gog-space-4);
   --gog-accordion-md-body-font-size: var(--gog-text-sm);
   --gog-accordion-md-body-line-height: var(--gog-accordion-body-line-height);
   --gog-accordion-md-body-padding-top: var(--gog-space-8);
   --gog-accordion-md-body-padding-bottom: var(--gog-space-12);
-  --gog-accordion-md-chevron-size: 15px;
-  --gog-accordion-md-chevron-font-size: 14px;
+  --gog-accordion-md-chevron-size: 1.4em;
+  --gog-accordion-md-chevron-font-size: 1em;
 
-  --gog-accordion-lg-padding-y: var(--gog-space-14);
-  --gog-accordion-lg-padding-x: var(--gog-space-16);
+  --gog-accordion-lg-padding-y: var(--gog-space-16);
+  --gog-accordion-lg-padding-x: var(--gog-space-32);
   --gog-accordion-lg-font-size: var(--gog-text-sm);
   --gog-accordion-lg-letter-spacing: 0.8px;
   --gog-accordion-lg-content-gap: var(--gog-space-4);
@@ -577,11 +773,11 @@
   --gog-accordion-lg-body-line-height: var(--gog-accordion-body-line-height);
   --gog-accordion-lg-body-padding-top: var(--gog-space-12);
   --gog-accordion-lg-body-padding-bottom: var(--gog-space-16);
-  --gog-accordion-lg-chevron-size: 18px;
-  --gog-accordion-lg-chevron-font-size: 16px;
+  --gog-accordion-lg-chevron-size: 1.4em;
+  --gog-accordion-lg-chevron-font-size: 1em;
 
-  --gog-accordion-slg-padding-y: var(--gog-space-18);
-  --gog-accordion-slg-padding-x: var(--gog-space-18);
+  --gog-accordion-slg-padding-y: var(--gog-space-20);
+  --gog-accordion-slg-padding-x: var(--gog-space-40);
   --gog-accordion-slg-font-size: var(--gog-text-md);
   --gog-accordion-slg-letter-spacing: 0.8px;
   --gog-accordion-slg-content-gap: var(--gog-space-4);
@@ -589,8 +785,8 @@
   --gog-accordion-slg-body-line-height: var(--gog-accordion-body-line-height);
   --gog-accordion-slg-body-padding-top: var(--gog-space-16);
   --gog-accordion-slg-body-padding-bottom: var(--gog-space-20);
-  --gog-accordion-slg-chevron-size: 20px;
-  --gog-accordion-slg-chevron-font-size: 18px;
+  --gog-accordion-slg-chevron-size: 1.4em;
+  --gog-accordion-slg-chevron-font-size: 1em;
 
   /* ── Collapsible ───────────────────────────────────────────────────────────
      No portal, no owned markup — see utilities.css for the actual `.gog-collapsible__*`
@@ -614,10 +810,10 @@
      `--gog-button-font-size` are intentionally NOT declared — they are the per-instance
      escape hatch the variant/size classes fall back through. */
   --gog-button-xsm-padding: var(--gog-space-4) var(--gog-space-8);
-  --gog-button-sm-padding: var(--gog-space-8) var(--gog-space-14);
-  --gog-button-md-padding: var(--gog-space-12) var(--gog-space-20);
-  --gog-button-lg-padding: var(--gog-space-16) var(--gog-space-24);
-  --gog-button-slg-padding: var(--gog-space-20) var(--gog-space-28);
+  --gog-button-sm-padding: var(--gog-space-8) var(--gog-space-16);
+  --gog-button-md-padding: var(--gog-space-12) var(--gog-space-24);
+  --gog-button-lg-padding: var(--gog-space-16) var(--gog-space-32);
+  --gog-button-slg-padding: var(--gog-space-20) var(--gog-space-40);
   --gog-button-xsm-font-size: var(--gog-text-xs);
   --gog-button-sm-font-size: var(--gog-text-sm);
   --gog-button-md-font-size: var(--gog-text-md);
@@ -823,7 +1019,7 @@
   --gog-button-toggle-radius: var(--gog-radius);
   --gog-button-toggle-border-width: var(--gog-control-border-width);
   --gog-button-toggle-border-style: var(--gog-control-border-style);
-  --gog-button-toggle-border-color: var(--gog-border-color);
+  --gog-button-toggle-border-color: var(--gog-control-boundary-color);
   --gog-button-toggle-rest-bg: transparent;
   --gog-button-toggle-rest-color: var(--gog-text-color);
   --gog-button-toggle-hover-bg: var(--gog-hover-color);
@@ -866,6 +1062,7 @@
   --gog-calendar-weekday-padding: var(--gog-space-4) 0;
   --gog-calendar-weekday-color: var(--gog-muted-text-color);
   --gog-calendar-weekday-font-size: var(--gog-text-xs);
+  --gog-calendar-weekday-line-height: var(--gog-line-height-none);
   --gog-calendar-weekday-font-weight: var(--gog-font-weight-semibold);
   --gog-calendar-weekday-text-transform: var(--gog-text-transform);
   --gog-calendar-day-radius: calc(var(--gog-radius) - 2px);
@@ -895,12 +1092,12 @@
   --gog-calendar-divider-width: 1px;
   --gog-calendar-divider-style: solid;
   --gog-calendar-divider-color: var(--gog-border-color);
-  --gog-calendar-time-gap: var(--gog-space-6);
-  --gog-calendar-time-margin: var(--gog-space-10);
+  --gog-calendar-time-gap: var(--gog-space-8);
+  --gog-calendar-time-margin: var(--gog-space-12);
   --gog-calendar-time-input-width: 3.5rem;
-  --gog-calendar-time-input-padding: var(--gog-space-4) var(--gog-space-6);
+  --gog-calendar-time-input-padding: var(--gog-space-4) var(--gog-space-8);
   --gog-calendar-time-input-bg: var(--gog-background-color);
-  --gog-calendar-action-padding: var(--gog-space-4) var(--gog-space-10);
+  --gog-calendar-action-padding: var(--gog-space-4) var(--gog-space-8);
   --gog-calendar-footer-gap: var(--gog-space-8);
   --gog-calendar-xsm-font-size: var(--gog-text-xs);
   --gog-calendar-xsm-day-size: 24px;
@@ -911,6 +1108,7 @@
   --gog-calendar-lg-font-size: var(--gog-text-md);
   --gog-calendar-lg-day-size: 40px;
   --gog-calendar-slg-font-size: var(--gog-text-lg);
+  --gog-calendar-line-height: var(--gog-line-height-normal);
   --gog-calendar-slg-day-size: 46px;
 
   /* ── Card ──────────────────────────────────────────────────────────────────
@@ -937,7 +1135,7 @@
   --gog-card-elevated-border-color: transparent;
   /* The shared surface shadow, so a card sits at the same elevation as a dialog or a
      dropdown panel instead of inventing a second house style for "raised". */
-  --gog-card-elevated-shadow: var(--gog-panel-shadow);
+  --gog-card-elevated-shadow: var(--gog-elevation-highlight), var(--gog-elevation-2);
   --gog-card-filled-bg: var(--gog-accent-pale);
   --gog-card-filled-border-color: transparent;
   --gog-card-filled-shadow: none;
@@ -955,17 +1153,17 @@
   --gog-card-footer-padding-top: var(--gog-space-sm);
 
   --gog-card-xsm-padding-y: var(--gog-space-8);
-  --gog-card-xsm-padding-x: var(--gog-space-10);
-  --gog-card-xsm-gap: var(--gog-space-6);
+  --gog-card-xsm-padding-x: var(--gog-space-12);
+  --gog-card-xsm-gap: var(--gog-space-8);
   --gog-card-sm-padding-y: var(--gog-space-12);
-  --gog-card-sm-padding-x: var(--gog-space-14);
+  --gog-card-sm-padding-x: var(--gog-space-16);
   --gog-card-sm-gap: var(--gog-space-sm);
   --gog-card-md-padding-y: var(--gog-space-md);
   --gog-card-md-padding-x: var(--gog-space-20);
   --gog-card-md-gap: var(--gog-space-12);
   --gog-card-lg-padding-y: var(--gog-space-20);
   --gog-card-lg-padding-x: var(--gog-space-lg);
-  --gog-card-lg-gap: var(--gog-space-14);
+  --gog-card-lg-gap: var(--gog-space-16);
   --gog-card-slg-padding-y: var(--gog-space-28);
   --gog-card-slg-padding-x: var(--gog-space-32);
   --gog-card-slg-gap: var(--gog-space-md);
@@ -974,7 +1172,7 @@
      Box/label/icon size and padding come from the `--gog-control-checkbox-*` scale;
      checkbox.component.ts maps the `size` input onto the host. */
   --gog-checkbox-font-family: var(--gog-font-body);
-  --gog-checkbox-gap: var(--gog-space-10);
+  --gog-checkbox-gap: var(--gog-space-12);
   --gog-checkbox-radius: var(--gog-radius);
   --gog-checkbox-border-width: var(--gog-control-border-width);
   --gog-checkbox-border-style: var(--gog-control-border-style);
@@ -983,9 +1181,15 @@
   --gog-checkbox-checked-bg: var(--gog-accent-color);
   --gog-checkbox-checked-border: var(--gog-accent-color);
   --gog-checkbox-icon-color: var(--gog-accent-text-color, var(--gog-primary-color));
+  /* A glyph in its own box: role label-none, so the box is the glyph and not the font. */
+  --gog-checkbox-icon-line-height: var(--gog-line-height-none);
   --gog-checkbox-label-color: var(--gog-muted-text-color);
   --gog-checkbox-label-line-height: var(--gog-line-height-snug);
-  --gog-checkbox-focus-ring: var(--gog-accent-pale);
+  /* The accent, not `--gog-accent-pale`. This outline is the *only* thing marking focus on this
+     control, and a pale wash cannot carry that: measured 1.38:1 against the light page, against
+     the 3:1 WCAG 2.4.11 and 1.4.11 both require. Fourteen of the library's focus rings already
+     read `--gog-accent-color`; these were the outliers, found by the boundary sweep in 21.12.0. */
+  --gog-checkbox-focus-ring: var(--gog-accent-color);
   --gog-checkbox-focus-ring-width: var(--gog-focus-ring-width);
   --gog-checkbox-focus-ring-offset: var(--gog-focus-ring-offset);
   --gog-checkbox-disabled-opacity: var(--gog-disabled-opacity);
@@ -998,12 +1202,12 @@
      Box/label size reuse the `--gog-control-checkbox-*` scale (see Checkbox above);
      radio-group.component.ts maps the `size` input onto the host the same way. */
   --gog-radio-font-family: var(--gog-font-body);
-  --gog-radio-group-gap: var(--gog-space-10);
+  --gog-radio-group-gap: var(--gog-space-12);
   --gog-radio-group-label-size: var(--gog-text-sm);
   --gog-radio-group-label-color: var(--gog-muted-text-color);
   --gog-radio-group-option-gap: var(--gog-space-8);
   --gog-radio-group-option-gap-horizontal: var(--gog-space-20);
-  --gog-radio-gap: var(--gog-space-10);
+  --gog-radio-gap: var(--gog-space-12);
   --gog-radio-border-width: var(--gog-control-border-width);
   --gog-radio-border-style: var(--gog-control-border-style);
   --gog-radio-border-color: var(--gog-accent-dim);
@@ -1014,12 +1218,17 @@
   --gog-radio-dot-size-ratio: 0.45;
   --gog-radio-label-color: var(--gog-muted-text-color);
   --gog-radio-label-line-height: var(--gog-line-height-snug);
-  --gog-radio-focus-ring: var(--gog-accent-pale);
+  /* The accent, not `--gog-accent-pale`. This outline is the *only* thing marking focus on this
+     control, and a pale wash cannot carry that: measured 1.38:1 against the light page, against
+     the 3:1 WCAG 2.4.11 and 1.4.11 both require. Fourteen of the library's focus rings already
+     read `--gog-accent-color`; these were the outliers, found by the boundary sweep in 21.12.0. */
+  --gog-radio-focus-ring: var(--gog-accent-color);
   --gog-radio-focus-ring-width: var(--gog-focus-ring-width);
   --gog-radio-focus-ring-offset: var(--gog-focus-ring-offset);
   --gog-radio-disabled-opacity: var(--gog-disabled-opacity);
   --gog-radio-transition-duration: var(--gog-duration-base);
   --gog-radio-error-font-size: var(--gog-text-xs);
+  --gog-radio-error-line-height: var(--gog-field-error-line-height);
   --gog-radio-error-color: var(--gog-danger-color);
 
   /* ── Chip ──────────────────────────────────────────────────────────────────
@@ -1030,7 +1239,7 @@
   --gog-chip-bg: var(--gog-surface-color);
   --gog-chip-hover-bg: var(--gog-hover-color);
   --gog-chip-press-bg: var(--gog-border-color);
-  --gog-chip-border: var(--gog-border-color);
+  --gog-chip-border: var(--gog-control-boundary-color);
   --gog-chip-border-width: var(--gog-border-width);
   --gog-chip-border-style: var(--gog-border-style);
   --gog-chip-color: var(--gog-text-color);
@@ -1053,48 +1262,75 @@
   --gog-chip-selected-ring-width: 2px;
   --gog-chip-selected-shadow: inset 0 0 0 var(--gog-chip-selected-ring-width)
     var(--gog-accent-color);
+  /* The chip had a focus-ring width and offset but no colour, so `chip.component.scss` reached
+     for `--gog-chip-border` — the decorative hairline, 1.18:1 in `primeng`. A focus indicator
+     needs a colour of its own. */
+  --gog-chip-focus-ring-color: var(--gog-accent-color);
   --gog-chip-focus-ring-width: 2px;
   --gog-chip-focus-ring-offset: var(--gog-focus-ring-offset);
 
-  --gog-chip-xsm-font-size: 0.6875rem;
+  --gog-chip-xsm-font-size: var(--gog-text-2xs);
   --gog-chip-xsm-padding-block: var(--gog-space-4);
-  --gog-chip-xsm-padding-inline: var(--gog-space-6);
+  --gog-chip-xsm-padding-inline: var(--gog-space-8);
   --gog-chip-xsm-gap: var(--gog-space-4);
-  --gog-chip-xsm-avatar-size: 0.875rem;
-  --gog-chip-xsm-icon-size: 0.6875rem;
-  --gog-chip-xsm-remove-size: 0.75rem;
+  /* The avatar and the icon are ratios of the chip's own type, not px ladders of their own.
+
+     The icon already was one and nobody had written it down: 11/12/14/16/18px of glyph beside a
+     label of exactly 11/12/14/16/18px, five sizes holding 1.00 five times by hand. `1em` states
+     it, and it changes nothing rendered -- but it means an override of one size's font-size now
+     carries the icon with it, which the rem ladder did not.
+
+     The avatar had no rule at all: 14/16/20/24/28px against that same type is 1.27, 1.33, 1.43,
+     1.50, 1.56 -- five opinions about one relationship, drifting monotonically, which is what a
+     value picked by eye per size looks like. 1.5em is the ratio `lg` already held, and it keeps
+     the intent the rest of the component is built around: the avatar is larger than the label
+     and hugs the chip's leading edge, which is what `--gog-chip-avatar-inset-ratio` exists for.
+     A chip with an avatar is still taller than one without, but now by one constant ratio
+     instead of a gap that grew 0.8px to 6.4px across the five sizes.
+
+     The remove button's glyph is the third of the same family and now the same kind of rule:
+     1.125em, one number where there were five. Those five were 1.091, 1.167, 1.143, 1.125 and
+     1.111 of the label -- non-monotonic and inside a 7% band, which is a px ladder converted to
+     rem rather than five judgements. 1.125 is the ratio `lg` already held, the same way 1.5 was
+     the avatar's, and it keeps what all five values agreed on: the mark a reader can press
+     reads a shade heavier than the one that only decorates. No size moves by more than half a
+     pixel. The painted box stays `--gog-chip-remove-scale` of it -- see chip.component.scss,
+     which had to stop writing that multiplication in `em`. */
+  --gog-chip-xsm-avatar-size: 1.5em;
+  --gog-chip-xsm-icon-size: 1em;
+  --gog-chip-xsm-remove-size: 1.125em;
 
   --gog-chip-sm-font-size: var(--gog-text-xs);
   --gog-chip-sm-padding-block: var(--gog-space-4);
   --gog-chip-sm-padding-inline: var(--gog-space-8);
-  --gog-chip-sm-gap: var(--gog-space-6);
-  --gog-chip-sm-avatar-size: 1rem;
-  --gog-chip-sm-icon-size: 0.75rem;
-  --gog-chip-sm-remove-size: 0.875rem;
+  --gog-chip-sm-gap: var(--gog-space-8);
+  --gog-chip-sm-avatar-size: 1.5em;
+  --gog-chip-sm-icon-size: 1em;
+  --gog-chip-sm-remove-size: 1.125em;
 
   --gog-chip-md-font-size: var(--gog-text-sm);
   --gog-chip-md-padding-block: var(--gog-space-8);
-  --gog-chip-md-padding-inline: var(--gog-space-12);
+  --gog-chip-md-padding-inline: var(--gog-space-16);
   --gog-chip-md-gap: var(--gog-space-8);
-  --gog-chip-md-avatar-size: 1.25rem;
-  --gog-chip-md-icon-size: 0.875rem;
-  --gog-chip-md-remove-size: 1rem;
+  --gog-chip-md-avatar-size: 1.5em;
+  --gog-chip-md-icon-size: 1em;
+  --gog-chip-md-remove-size: 1.125em;
 
   --gog-chip-lg-font-size: var(--gog-text-md);
-  --gog-chip-lg-padding-block: var(--gog-space-10);
-  --gog-chip-lg-padding-inline: var(--gog-space-14);
-  --gog-chip-lg-gap: var(--gog-space-10);
-  --gog-chip-lg-avatar-size: 1.5rem;
-  --gog-chip-lg-icon-size: 1rem;
-  --gog-chip-lg-remove-size: 1.125rem;
+  --gog-chip-lg-padding-block: var(--gog-space-12);
+  --gog-chip-lg-padding-inline: var(--gog-space-24);
+  --gog-chip-lg-gap: var(--gog-space-12);
+  --gog-chip-lg-avatar-size: 1.5em;
+  --gog-chip-lg-icon-size: 1em;
+  --gog-chip-lg-remove-size: 1.125em;
 
   --gog-chip-slg-font-size: var(--gog-text-lg);
   --gog-chip-slg-padding-block: var(--gog-space-12);
-  --gog-chip-slg-padding-inline: var(--gog-space-16);
+  --gog-chip-slg-padding-inline: var(--gog-space-24);
   --gog-chip-slg-gap: var(--gog-space-12);
-  --gog-chip-slg-avatar-size: 1.75rem;
-  --gog-chip-slg-icon-size: 1.125rem;
-  --gog-chip-slg-remove-size: 1.25rem;
+  --gog-chip-slg-avatar-size: 1.5em;
+  --gog-chip-slg-icon-size: 1em;
+  --gog-chip-slg-remove-size: 1.125em;
 
   /* ── Dialog ────────────────────────────────────────────────────────────────── */
   --gog-dialog-font-family: var(--gog-font-heading);
@@ -1112,16 +1348,22 @@
   --gog-dialog-border-width: var(--gog-panel-border-width);
   --gog-dialog-border-style: var(--gog-panel-border-style);
   --gog-dialog-radius: var(--gog-radius);
-  --gog-dialog-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
   --gog-dialog-min-width: 320px;
   --gog-dialog-max-height: 90vh;
-  --gog-dialog-header-padding: var(--gog-space-16) var(--gog-space-20) var(--gog-space-14);
+  --gog-dialog-header-padding: var(--gog-space-16) var(--gog-space-20) var(--gog-space-16);
   --gog-dialog-header-gap: var(--gog-space-12);
   --gog-dialog-header-border-color: var(--gog-border-color);
+  /* `.gog-dialog__title` is the library's only <h2>; before this it rendered at the browser's
+     default 24px bold rather than a stated size. --gog-text-xl is exactly today's rendered size,
+     so this states an accident as a declaration rather than changing anything visible. `snug`
+     (1.3) is law 4's `heading` role (docs/component-geometry.md, D4). */
+  --gog-dialog-title-font-size: var(--gog-text-xl);
+  --gog-dialog-title-line-height: var(--gog-line-height-snug);
   --gog-dialog-body-padding: var(--gog-space-20);
   --gog-dialog-body-max-height: calc(var(--gog-dialog-max-height) - 60px);
   --gog-dialog-close-size: 2rem;
   --gog-dialog-close-font-size: var(--gog-text-sm);
+  --gog-dialog-close-line-height: var(--gog-line-height-none);
   --gog-dialog-close-color: var(--gog-muted-text-color);
   --gog-dialog-close-hover-color: var(--gog-text-color);
   --gog-dialog-close-hover-bg: var(--gog-hover-color);
@@ -1133,7 +1375,37 @@
   /* Confirmation dialog */
   --gog-confirmation-dialog-gap: var(--gog-space-12);
   --gog-confirmation-dialog-min-width: 320px;
-  --gog-confirmation-dialog-max-width: 440px;
+  /* The title and description carried dead utility classes (`heading-md` / `body-sm`) with no
+     CSS rule anywhere in the library, so both rendered at whatever the browser inherited rather
+     than a step of the type scale (docs/backlog.md, fixed here). `lg` for the title rather than
+     `md`: the dead class named `md`, but it never ran, so it is not evidence of intent — 18.72px
+     is what actually rendered, and --gog-text-lg (18px) is the nearest step to that, so this
+     states what shipped rather than silently shrinking every confirmation dialog. The description
+     takes `sm`, the size every other muted secondary line in the library already uses. */
+  --gog-confirmation-dialog-title-font-size: var(--gog-text-lg);
+  --gog-confirmation-dialog-title-line-height: var(--gog-line-height-snug);
+  --gog-confirmation-dialog-description-font-size: var(--gog-text-sm);
+  --gog-confirmation-dialog-description-line-height: var(--gog-line-height-relaxed);
+  /* L9 (docs/component-geometry.md, "D7 — taken"): the description wraps, so its cap is a
+     measure — 51ch at 16px, the nearest whole character to today's 440px, so this changes
+     robustness to a font-size change, not the pixels anyone sees today. The 16px is
+     `.confirm-dialog`'s own inherited size (it declares no font-size of its own; see
+     confirmation-dialog.component.scss), not the description's — the description now reads
+     --gog-confirmation-dialog-description-font-size (14px, fixed above), but a `ch` cap resolves
+     against the element `max-width` is declared on, never a descendant's, so that change does not
+     move this number. What it changes is the *measure* the 440px produces against a 14px
+     description: 439.9px ÷ (0.5391 × 14px) ≈ 58ch by hand (scripts/survey-measure.mjs's own
+     `chCount` line is a tautology for this token — it resolves against `.confirm-dialog`'s 16px,
+     not the description's font; see that script's reason string for the full account), still
+     inside L9's 45–75 band, so no token value here needs to change.
+
+     L8's viewport clamp is deliberately NOT here, unlike the other three overlays: this renders
+     inside .gog-dialog__panel, which already caps itself at 90vw (an inline style in
+     dialog.component.html), and .gog-dialog__body spends --gog-dialog-body-padding a side inside
+     that. The width available here is therefore `0.9 * 100vw - 40px`, tighter than any
+     `100vw - margin` clamp at every viewport above 80px, so a second clamp on the child could
+     never bind. An inert declaration is the thing this repo keeps finding rather than shipping. */
+  --gog-confirmation-dialog-max-width: 51ch;
   --gog-confirmation-dialog-color: var(--gog-text-color);
   --gog-confirmation-dialog-description-color: var(--gog-muted-text-color);
   --gog-confirmation-dialog-actions-gap: var(--gog-space-sm);
@@ -1150,6 +1422,7 @@
   --gog-autocomplete-gap: var(--gog-space-4);
   --gog-autocomplete-label-color: var(--gog-accent-color);
   --gog-autocomplete-label-font-size: var(--gog-text-sm);
+  --gog-autocomplete-label-line-height: var(--gog-field-label-line-height);
   --gog-autocomplete-label-font-weight: var(--gog-font-weight-semibold);
   --gog-autocomplete-label-letter-spacing: var(--gog-letter-spacing);
   --gog-autocomplete-label-text-transform: var(--gog-text-transform);
@@ -1171,12 +1444,13 @@
   --gog-autocomplete-error-border-color: var(--gog-danger-color);
   --gog-autocomplete-error-font-family: var(--gog-font-body);
   --gog-autocomplete-error-font-size: var(--gog-text-xs);
+  --gog-autocomplete-error-line-height: var(--gog-field-error-line-height);
   /* Floor for an auto-width field, so [fullWidth]="false" cannot collapse it to its chrome. */
   --gog-autocomplete-min-width: 120px;
   /* Trailing chrome: spinner and clear button, clear outermost — the arrangement the other
      dropdowns settled on, so all of them line up in a form. */
   --gog-autocomplete-actions-inset: var(--gog-control-icon-offset);
-  --gog-autocomplete-actions-gap: var(--gog-space-6);
+  --gog-autocomplete-actions-gap: var(--gog-space-8);
   /* Right padding on the input, reserving room for the actions above. */
   --gog-autocomplete-actions-reserve: 40px;
   --gog-autocomplete-clear-color: var(--gog-autocomplete-placeholder-color);
@@ -1190,14 +1464,21 @@
   --gog-autocomplete-panel-border-style: var(--gog-panel-border-style);
   --gog-autocomplete-panel-border-color: var(--gog-border-color);
   --gog-autocomplete-panel-radius: var(--gog-radius);
-  --gog-autocomplete-panel-gap: var(--gog-space-2);
+  --gog-autocomplete-panel-gap: var(--gog-space-4);
   --gog-autocomplete-panel-max-height: 260px;
   /* Ceiling for a content-sized panel, so one very long option cannot span the viewport. */
   --gog-autocomplete-panel-max-width: 420px;
   --gog-autocomplete-options-padding: var(--gog-space-4);
-  --gog-autocomplete-option-padding: var(--gog-space-8) var(--gog-space-10);
-  --gog-autocomplete-option-radius: calc(var(--gog-radius) - 4px);
-  --gog-autocomplete-option-gap: var(--gog-space-10);
+  --gog-autocomplete-option-padding: var(--gog-space-8) var(--gog-space-16);
+  /* Concentric with the panel: the option row is inset by the list's own padding, so its corner
+     is the panel's corner minus that distance. Written as the two tokens rather than as
+     `calc(var(--gog-radius) - 4px)`, which was right only at `--gog-density: 1` -- the padding
+     scales with density and a restated `4px` does not. */
+  --gog-autocomplete-option-radius: max(
+    0px,
+    calc(var(--gog-autocomplete-panel-radius) - var(--gog-autocomplete-options-padding))
+  );
+  --gog-autocomplete-option-gap: var(--gog-space-12);
   --gog-autocomplete-option-color: var(--gog-text-color);
   --gog-autocomplete-option-hover-bg: var(--gog-hover-color);
   --gog-autocomplete-option-press-bg: var(--gog-border-color);
@@ -1214,6 +1495,7 @@
   --gog-autocomplete-option-height: 36px;
   --gog-autocomplete-empty-color: var(--gog-autocomplete-placeholder-color);
   --gog-autocomplete-empty-font-size: var(--gog-text-sm);
+  --gog-autocomplete-empty-line-height: var(--gog-line-height-normal);
   --gog-autocomplete-float-label-reserve: var(--gog-field-float-label-reserve);
   --gog-autocomplete-float-label-in-top: var(--gog-field-float-label-in-top);
   --gog-autocomplete-float-label-over-gap: var(--gog-field-float-label-over-gap);
@@ -1230,8 +1512,12 @@
   --gog-badge-dot-size: 0.5rem;
   --gog-badge-padding-inline: var(--gog-space-4);
   --gog-badge-radius: 999px;
-  /* How far the badge hangs outside its host's corner. */
-  --gog-badge-offset: var(--gog-space-6);
+  /* How far the badge hangs outside its host's corner. `space-8` rather than the `space-6` it
+     was: every off-grid step this library had sat exactly halfway between two grid steps, so the
+     4px grid made the tie-break a real decision, and it rounds up (docs/component-geometry.md,
+     D3b). Here that is also the better answer on its own terms — a 20px badge hanging 8px out
+     clears the host's corner radius at `--gog-radius: 8px`, which 6px did not quite do. */
+  --gog-badge-offset: var(--gog-space-8);
   --gog-badge-border-width: 0;
   --gog-badge-border-style: var(--gog-border-style);
   --gog-badge-border-color: transparent;
@@ -1259,6 +1545,7 @@
   --gog-datepicker-gap: var(--gog-space-4);
   --gog-datepicker-label-color: var(--gog-accent-color);
   --gog-datepicker-label-font-size: var(--gog-text-sm);
+  --gog-datepicker-label-line-height: var(--gog-field-label-line-height);
   --gog-datepicker-label-letter-spacing: var(--gog-letter-spacing);
   --gog-datepicker-label-text-transform: var(--gog-text-transform);
   --gog-datepicker-field-bg: var(--gog-surface-color);
@@ -1279,9 +1566,10 @@
   --gog-datepicker-error-border-color: var(--gog-danger-color);
   --gog-datepicker-error-font-family: var(--gog-font-body);
   --gog-datepicker-error-font-size: var(--gog-text-xs);
+  --gog-datepicker-error-line-height: var(--gog-field-error-line-height);
   --gog-datepicker-min-width: 150px;
   --gog-datepicker-actions-inset: var(--gog-control-icon-offset);
-  --gog-datepicker-actions-gap: var(--gog-space-6);
+  --gog-datepicker-actions-gap: var(--gog-space-8);
   /* Right padding on the input, reserving room for the calendar and clear buttons. */
   --gog-datepicker-actions-reserve: 40px;
   --gog-datepicker-icon-color: var(--gog-accent-color);
@@ -1295,7 +1583,7 @@
   --gog-datepicker-panel-border-style: var(--gog-panel-border-style);
   --gog-datepicker-panel-border-color: var(--gog-border-color);
   --gog-datepicker-panel-radius: var(--gog-radius);
-  --gog-datepicker-panel-gap: var(--gog-space-2);
+  --gog-datepicker-panel-gap: var(--gog-space-4);
   /* The dropdown surface. Inline mode is `gog-calendar` itself, so it sizes from
      `--gog-calendar-max-width` rather than from this. */
   --gog-datepicker-panel-width: max-content;
@@ -1334,6 +1622,7 @@
   --gog-input-gap: var(--gog-space-4);
   --gog-input-label-color: var(--gog-accent-color);
   --gog-input-label-font-size: var(--gog-text-sm);
+  --gog-input-label-line-height: var(--gog-field-label-line-height);
   --gog-input-label-letter-spacing: var(--gog-letter-spacing);
   --gog-input-label-text-transform: var(--gog-text-transform);
   --gog-input-field-bg: var(--gog-surface-color);
@@ -1350,6 +1639,7 @@
   --gog-input-focus-ring-offset: var(--gog-focus-ring-offset);
   --gog-input-error-color: var(--gog-danger-color);
   --gog-input-error-font-size: var(--gog-text-xs);
+  --gog-input-error-line-height: var(--gog-field-error-line-height);
   /* Extra space above the error line, *on top of* the host's own `--gog-input-gap`, which
      already separates every child of the field. It shipped as `2px` and put this field's error
      6px under it while `gog-select`, `gog-autocomplete` and `gog-datepicker` — same gap, no
@@ -1358,6 +1648,7 @@
      pushed further than the rest. */
   --gog-input-error-offset: 0px;
   --gog-input-icon-color: var(--gog-muted-text-color);
+  --gog-input-icon-line-height: var(--gog-line-height-none);
   --gog-input-icon-hover-color: var(--gog-accent-color);
   --gog-input-icon-action-radius: calc(var(--gog-radius) - 4px);
   --gog-input-icon-focus-ring-width: 2px;
@@ -1380,12 +1671,16 @@
      `gog-toast` and `gog-accordion` keep their flat `0px` on purpose: those are a chosen shape,
      not a number that forgot where it came from. */
   --gog-input-clear-radius: calc(var(--gog-radius) / 4);
+  --gog-input-clear-line-height: var(--gog-line-height-none);
   --gog-input-clear-icon-ratio: var(--gog-control-clear-icon-ratio);
   /*
      The textarea's clear button gets a full-size glyph. The 0.7 ratio above suits the dense
      single-line trigger of a dropdown; on a large multi-line box it reads as a speck.
   */
   --gog-textarea-clear-icon-ratio: 1;
+  /* The field is the one place in the library that renders a paragraph the consumer typed:
+     role prose. */
+  --gog-textarea-line-height: var(--gog-line-height-relaxed);
   /* Custom resize grip — see the `::-webkit-resizer` comment in textarea.component.scss for
      why this replaces rather than restyles the native glyph. Colour follows the field's own
      border by default, not a fixed muted grey, so it reads as part of the field rather than a
@@ -1394,8 +1689,12 @@
   --gog-textarea-resize-grip-color: var(--gog-input-field-border);
   --gog-textarea-resize-grip-opacity: 0.8;
   --gog-textarea-resize-grip-stripe-width: 1.5px;
-  --gog-textarea-resize-grip-stripe-gap: var(--gog-space-2);
-  --gog-textarea-resize-grip-offset: 3px;
+  /* The three hairlines of the resize grip and the gap between them: a length inside one painted
+     mark, not spacing between two things, so it is off the 4px grid on purpose (OPTICAL_CHROME in
+     check-geometry.mjs). At 4px the three stripes would be a 20px block in the corner of every
+     textarea instead of a 9px hint. */
+  --gog-textarea-resize-grip-stripe-gap: 2px;
+  --gog-textarea-resize-grip-offset: var(--gog-space-4);
   /*
      Both default to 0 and are overwritten per instance, as an inline style on the field, from
      the component's own ResizeObserver — they close the gap that opens once the field has been
@@ -1429,6 +1728,7 @@
   --gog-multiselect-options-padding: var(--gog-space-4);
   --gog-multiselect-label-color: var(--gog-accent-color);
   --gog-multiselect-label-font-size: var(--gog-text-sm);
+  --gog-multiselect-label-line-height: var(--gog-field-label-line-height);
   --gog-multiselect-label-letter-spacing: var(--gog-letter-spacing);
   --gog-multiselect-label-text-transform: var(--gog-text-transform);
   --gog-multiselect-field-bg: var(--gog-surface-color);
@@ -1440,28 +1740,46 @@
   --gog-multiselect-value-color: var(--gog-text-color);
   --gog-multiselect-placeholder-color: var(--gog-muted-text-color);
   --gog-multiselect-focus-border: var(--gog-accent-color);
-  --gog-multiselect-focus-ring: var(--gog-accent-pale);
+  /* The accent, not `--gog-accent-pale`. This outline is the *only* thing marking focus on this
+     control, and a pale wash cannot carry that: measured 1.38:1 against the light page, against
+     the 3:1 WCAG 2.4.11 and 1.4.11 both require. Fourteen of the library's focus rings already
+     read `--gog-accent-color`; these were the outliers, found by the boundary sweep in 21.12.0. */
+  --gog-multiselect-focus-ring: var(--gog-accent-color);
   --gog-multiselect-focus-glow: 0 0 8px var(--gog-multiselect-focus-ring);
   --gog-multiselect-focus-ring-width: var(--gog-focus-ring-width);
   --gog-multiselect-focus-ring-offset: var(--gog-focus-ring-offset);
   --gog-multiselect-error-color: var(--gog-danger-color);
   --gog-multiselect-error-font-size: var(--gog-text-xs);
+  --gog-multiselect-error-line-height: var(--gog-field-error-line-height);
   /* Zero by default since 21.9.0 — see `--gog-input-error-offset` for why. */
   --gog-multiselect-error-offset: 0px;
   --gog-multiselect-border-color: var(--gog-accent-color);
   --gog-multiselect-panel-bg: var(--gog-surface-color);
   --gog-multiselect-panel-border: var(--gog-accent-color);
   --gog-multiselect-panel-shadow: var(--gog-panel-shadow);
+  /* The panel's own corner, and the reason it is not `--gog-multiselect-radius`: that token
+     shapes the *field*, and it shaped this box too until this release. One token painting two
+     boxes meant a consumer rounding the field into a pill rounded the dropdown into one as well,
+     and the two radii below derive from whatever it is, so the filter and the option rows
+     followed. Same default, so nothing moves; `gog-autocomplete` and `gog-datepicker` already
+     declared this token and this is the pair that did not. */
+  --gog-multiselect-panel-radius: var(--gog-radius);
   --gog-multiselect-panel-max-height: 260px;
-  --gog-multiselect-panel-offset: var(--gog-space-2);
+  --gog-multiselect-panel-offset: var(--gog-space-4);
   --gog-multiselect-option-hover-bg: var(--gog-hover-color);
   --gog-multiselect-option-press-bg: var(--gog-border-color);
   --gog-multiselect-option-color: var(--gog-text-color);
-  --gog-multiselect-option-gap-inline: var(--gog-space-10);
+  --gog-multiselect-option-gap-inline: var(--gog-space-12);
   /* Estimated row height fed into the panel's up/down placement math; not itself a real
      layout property, so it has no effect unless the JS reads it. */
   --gog-multiselect-option-height: 40px;
-  --gog-multiselect-option-radius: calc(var(--gog-radius) - 2px);
+  /* Concentric with the panel, which paints `--gog-multiselect-panel-radius` and insets its rows
+     by the list padding, so the row's corner is that radius minus that padding. It had subtracted
+     2px against 4px of padding, and a restated literal also stops being true once density moves. */
+  --gog-multiselect-option-radius: max(
+    0px,
+    calc(var(--gog-multiselect-panel-radius) - var(--gog-multiselect-options-padding))
+  );
   --gog-multiselect-option-disabled-opacity: var(--gog-disabled-opacity);
   --gog-multiselect-option-transition-duration: var(--gog-duration-fast);
   --gog-multiselect-checkbox-border: var(--gog-accent-dim);
@@ -1469,30 +1787,42 @@
   --gog-multiselect-checkbox-checked-bg: var(--gog-accent-color);
   --gog-multiselect-checkbox-checked-color: var(--gog-primary-color);
   --gog-multiselect-controls-gap: var(--gog-space-4);
-  --gog-multiselect-controls-padding: var(--gog-space-6) var(--gog-space-10);
-  --gog-multiselect-actions-gap: var(--gog-space-6);
-  --gog-multiselect-filter-padding: var(--gog-space-6);
-  --gog-multiselect-filter-input-padding-y: var(--gog-space-6);
-  --gog-multiselect-filter-input-padding-x: var(--gog-space-8);
+  --gog-multiselect-controls-padding: var(--gog-space-8) var(--gog-space-12);
+  --gog-multiselect-actions-gap: var(--gog-space-8);
+  --gog-multiselect-filter-padding: var(--gog-space-8);
+  --gog-multiselect-filter-input-padding-y: var(--gog-space-8);
+  --gog-multiselect-filter-input-padding-x: var(--gog-space-16);
   --gog-multiselect-filter-input-bg: var(--gog-background-color);
   --gog-multiselect-filter-input-color: var(--gog-multiselect-field-color);
   --gog-multiselect-filter-input-border: var(--gog-multiselect-field-border);
-  --gog-multiselect-filter-input-radius: var(--gog-radius);
+  /* Concentric with the panel, and the concentric answer here is a square corner. The filter is
+     inset by `--gog-multiselect-filter-padding`, which equals the panel's radius -- and where the
+     inset equals the radius, the inner box's corner point lands exactly on the centre of the
+     outer arc, so a right angle is equidistant from the whole curve. It is the only shape that
+     keeps the gap constant, not a value clamped to zero for want of a better one. */
+  --gog-multiselect-filter-input-radius: max(
+    0px,
+    calc(var(--gog-multiselect-panel-radius) - var(--gog-multiselect-filter-padding))
+  );
   --gog-multiselect-filter-border-width: var(--gog-panel-border-width);
   --gog-multiselect-filter-border-style: var(--gog-panel-border-style);
   --gog-multiselect-filter-border-color: var(--gog-border-color);
-  --gog-multiselect-filter-empty-padding: var(--gog-space-10);
+  --gog-multiselect-filter-empty-padding: var(--gog-space-12);
   --gog-multiselect-filter-empty-color: var(--gog-multiselect-placeholder-color);
   /* Matches --gog-select-chevron-inset; see the note there. */
   /* "+N" badge shown when the selection does not fit on one line. */
   --gog-multiselect-overflow-color: var(--gog-multiselect-placeholder-color);
   --gog-multiselect-overflow-font-size: var(--gog-text-sm);
-  --gog-multiselect-overflow-gap: var(--gog-space-6);
+  /* It sits on the field values own baseline (align-self: baseline, 21.7.2), so it takes the
+     field text leading rather than a mark leading. */
+  --gog-multiselect-overflow-line-height: var(--gog-field-line-height);
+  --gog-multiselect-overflow-gap: var(--gog-space-8);
   --gog-multiselect-min-width: 120px;
   --gog-multiselect-panel-max-width: 420px;
   --gog-multiselect-actions-inset: var(--gog-control-icon-offset);
   /* A quarter of the corner radius — see `--gog-input-clear-radius` for why. */
   --gog-multiselect-clear-radius: calc(var(--gog-radius) / 4);
+  --gog-multiselect-clear-line-height: var(--gog-line-height-none);
   --gog-multiselect-disabled-opacity: var(--gog-disabled-opacity);
   --gog-multiselect-transition-duration: var(--gog-duration-base);
   --gog-multiselect-float-label-reserve: var(--gog-field-float-label-reserve);
@@ -1515,13 +1845,19 @@
   --gog-menu-border-width: var(--gog-control-border-width);
   --gog-menu-border-style: var(--gog-control-border-style);
   --gog-menu-radius: var(--gog-panel-radius);
-  --gog-menu-shadow: var(--gog-dialog-shadow);
+  /* Step 3, with the dropdown panels it belongs beside — not step 5. This aliased
+     `--gog-dialog-shadow` until 21.12.0, so a dropdown menu carried a modal's elevation. */
+  --gog-menu-shadow: var(--gog-panel-shadow);
   --gog-menu-font-family: var(--gog-font-body);
   --gog-menu-padding: var(--gog-space-4);
-  --gog-menu-gap: var(--gog-space-2);
+  --gog-menu-gap: var(--gog-space-4);
   --gog-menu-offset: var(--gog-space-4);
   --gog-menu-min-width: 180px;
-  --gog-menu-max-width: 320px;
+  /* L8's viewport exception (docs/component-geometry.md, "D7 — taken"): a menu portals into
+     <body> and floats over the viewport, not a container. Its items do not wrap (L9 does not
+     apply — the width stays in px), but L8 still does: no edge-inset token exists on this
+     component today, so the margin reads the scale directly. */
+  --gog-menu-max-width: min(320px, calc(100vw - var(--gog-space-16) * 2));
   --gog-menu-max-height: 320px;
   --gog-menu-transition-duration: var(--gog-duration-base);
   --gog-menu-focus-ring: var(--gog-accent-color);
@@ -1535,8 +1871,11 @@
   --gog-menu-item-press-bg: var(--gog-border-color);
   --gog-menu-item-hover-color: var(--gog-text-color);
   --gog-menu-item-font-size: var(--gog-text-sm);
-  --gog-menu-item-padding: var(--gog-space-8) var(--gog-space-12);
-  --gog-menu-item-radius: var(--gog-radius);
+  --gog-menu-item-padding: var(--gog-space-8) var(--gog-space-16);
+  /* Concentric with the panel, which paints `--gog-panel-radius` (8px larger than the base) and
+     insets its items by `--gog-menu-padding`. Repeating the base radius here made the first and
+     last items visibly squarer than the corner they sit in. */
+  --gog-menu-item-radius: max(0px, calc(var(--gog-menu-radius) - var(--gog-menu-padding)));
   --gog-menu-item-gap: var(--gog-space-sm);
   --gog-menu-item-disabled-opacity: var(--gog-disabled-opacity);
   --gog-menu-item-disabled-color: var(--gog-muted-text-color);
@@ -1547,6 +1886,7 @@
   --gog-paginator-gap: var(--gog-space-4);
   --gog-paginator-ellipsis-color: var(--gog-muted-text-color);
   --gog-paginator-ellipsis-font-size: var(--gog-text-sm);
+  --gog-paginator-ellipsis-line-height: var(--gog-line-height-none);
   --gog-paginator-ellipsis-font-family: var(--gog-font-body);
   /* Enough for a three-digit page size plus the chevron, so the row doesn't shift on change. */
   --gog-paginator-page-size-min-width: 5rem;
@@ -1571,7 +1911,11 @@
   --gog-panel-heading-font-family: var(--gog-font-heading);
   --gog-panel-heading-font-size: var(--gog-text-xl);
   --gog-panel-heading-font-weight: var(--gog-font-weight-semibold);
-  --gog-panel-heading-line-height: 1.25;
+  /* Role heading, the same step the card heading takes. It had been 1.25 -- the one leading in
+     the library outside the scale, which runs 1.2 then 1.3 with nothing between. Two headings
+     four steps apart differing by 0.05 is two people picking a nice number, not the inverse
+     relationship law 4 describes; that one holds across the roles, where it is real. */
+  --gog-panel-heading-line-height: var(--gog-line-height-snug);
 
   --gog-panel-outlined-bg: var(--gog-surface-color);
   --gog-panel-outlined-border-color: var(--gog-border-color);
@@ -1597,13 +1941,13 @@
   --gog-panel-footer-gap: var(--gog-space-sm);
   --gog-panel-footer-padding-top: var(--gog-space-sm);
 
-  --gog-panel-xsm-padding-y: var(--gog-space-10);
+  --gog-panel-xsm-padding-y: var(--gog-space-12);
   --gog-panel-xsm-padding-x: var(--gog-space-12);
   --gog-panel-xsm-gap: var(--gog-space-sm);
-  --gog-panel-sm-padding-y: var(--gog-space-14);
+  --gog-panel-sm-padding-y: var(--gog-space-16);
   --gog-panel-sm-padding-x: var(--gog-space-md);
-  --gog-panel-sm-gap: var(--gog-space-10);
-  --gog-panel-md-padding-y: var(--gog-space-18);
+  --gog-panel-sm-gap: var(--gog-space-12);
+  --gog-panel-md-padding-y: var(--gog-space-20);
   --gog-panel-md-padding-x: var(--gog-space-20);
   --gog-panel-md-gap: var(--gog-space-12);
   --gog-panel-lg-padding-y: var(--gog-space-lg);
@@ -1627,6 +1971,7 @@
   --gog-progressbar-value-color: var(--gog-muted-text-color);
   --gog-progressbar-value-font-family: var(--gog-font-body);
   --gog-progressbar-value-font-size: var(--gog-text-sm);
+  --gog-progressbar-value-line-height: var(--gog-line-height-none);
   --gog-progressbar-indeterminate-duration: 1.6s;
   --gog-progressbar-indeterminate-easing: cubic-bezier(0.65, 0.05, 0.36, 1);
   /* The reduced-motion stand-in for the indeterminate animation. */
@@ -1680,7 +2025,19 @@
   --gog-scroll-thumb-bg: var(--gog-accent-dim);
   --gog-scroll-thumb-hover-bg: var(--gog-accent-color);
   --gog-scroll-thumb-active-bg: var(--gog-accent-bright);
-  --gog-scroll-thumb-radius: var(--gog-radius);
+  /* Concentric with the track: the thumb is inset on every side by `--gog-scroll-thumb-inset`,
+     so its corner is the track's minus that. Both radii exceed half the thumb's width at either
+     track size (10px and 6px, less 2x2 of inset), so this changes no rendered pixel today -- it
+     is here so that a theme raising `--gog-radius` on a wide scroller keeps the two curves
+     parallel instead of letting the thumb match the track it sits inside. */
+  --gog-scroll-thumb-radius: max(
+    0px,
+    calc(var(--gog-scroll-track-radius) - var(--gog-scroll-thumb-inset))
+  );
+  /* The thumb's clearance inside its own track, off the 4px grid for the same reason
+     `--gog-toggle-thumb-inset` is: a length inside a single painted mark defines that mark's
+     shape rather than spacing two things apart, and 4px on a thin scrollbar would leave a thumb
+     barely wider than the hairline it rides in. Listed in OPTICAL_CHROME. */
   --gog-scroll-thumb-inset: 2px;
   --gog-scroll-corner-bg: transparent;
   --gog-scroll-fade-duration: var(--gog-duration-base);
@@ -1697,7 +2054,7 @@
      `thin` variant gets more of it since its 6px track leaves the least visible thumb to aim
      at; both land the effective hit width in the ~22-24px range generally recommended for a
      comfortable pointer target. */
-  --gog-scroll-normal-thumb-hit-padding: var(--gog-space-6);
+  --gog-scroll-normal-thumb-hit-padding: var(--gog-space-8);
   --gog-scroll-thin-thumb-hit-padding: var(--gog-space-8);
 
   /* ── Select ────────────────────────────────────────────────────────────────── */
@@ -1706,6 +2063,7 @@
   --gog-select-gap: var(--gog-space-4);
   --gog-select-label-color: var(--gog-accent-color);
   --gog-select-label-font-size: var(--gog-text-sm);
+  --gog-select-label-line-height: var(--gog-field-label-line-height);
   --gog-select-label-letter-spacing: var(--gog-letter-spacing);
   --gog-select-label-text-transform: var(--gog-text-transform);
   --gog-select-field-bg: var(--gog-surface-color);
@@ -1722,6 +2080,7 @@
   --gog-select-focus-ring-offset: var(--gog-focus-ring-offset);
   --gog-select-error-color: var(--gog-danger-color);
   --gog-select-error-font-size: var(--gog-text-xs);
+  --gog-select-error-line-height: var(--gog-field-error-line-height);
   --gog-select-chevron-color: var(--gog-accent-color);
   /*
      Distance from the trigger's right edge to the trailing chrome, matching the leading icon
@@ -1736,35 +2095,61 @@
   /* Ceiling for a content-sized panel, so one very long option cannot span the viewport. */
   --gog-select-panel-max-width: 420px;
   /* Filter box — only rendered when `filter` is on. */
-  --gog-select-filter-padding: var(--gog-space-6);
-  --gog-select-filter-input-padding-y: var(--gog-space-6);
-  --gog-select-filter-input-padding-x: var(--gog-space-8);
+  --gog-select-filter-padding: var(--gog-space-8);
+  --gog-select-filter-input-padding-y: var(--gog-space-8);
+  --gog-select-filter-input-padding-x: var(--gog-space-16);
   --gog-select-filter-input-bg: var(--gog-background-color);
   --gog-select-filter-input-color: var(--gog-select-field-color);
   --gog-select-filter-input-border: var(--gog-select-field-border);
-  --gog-select-filter-input-radius: var(--gog-radius);
+  /* Concentric with the panel, and the concentric answer here is a square corner. The filter is
+     inset by `--gog-select-filter-padding`, which equals the panel's radius -- and where the inset
+     equals the radius, the inner box's corner point lands exactly on the centre of the outer arc,
+     so a right angle is equidistant from the whole curve. The same case as the multiselect's. */
+  --gog-select-filter-input-radius: max(
+    0px,
+    calc(var(--gog-select-panel-radius) - var(--gog-select-filter-padding))
+  );
   --gog-select-filter-border-width: var(--gog-panel-border-width);
   --gog-select-filter-border-style: var(--gog-panel-border-style);
   --gog-select-filter-border-color: var(--gog-select-option-border-color, var(--gog-border-color));
-  --gog-select-filter-empty-padding: var(--gog-space-10);
+  --gog-select-filter-empty-padding: var(--gog-space-12);
   --gog-select-filter-empty-color: var(--gog-select-placeholder-color);
   /* Clear button — only rendered once a value is selected, see `clearable`. */
   /* A quarter of the corner radius — see `--gog-input-clear-radius` for why. */
   --gog-select-clear-radius: calc(var(--gog-radius) / 4);
+  --gog-select-clear-line-height: var(--gog-line-height-none);
   --gog-select-clear-icon-ratio: var(--gog-control-clear-icon-ratio);
-  --gog-select-clear-gap: var(--gog-space-6);
+  --gog-select-clear-gap: var(--gog-space-8);
   --gog-select-clear-color: var(--gog-select-placeholder-color);
   --gog-select-clear-hover-color: var(--gog-select-label-color);
   --gog-select-control-gap: var(--gog-space-12);
   --gog-select-panel-bg: var(--gog-surface-color);
   --gog-select-panel-shadow: var(--gog-panel-shadow);
   --gog-select-panel-max-height: 260px;
-  --gog-select-panel-offset: var(--gog-space-2);
+  --gog-select-panel-offset: var(--gog-space-4);
+  /* The panel's own corner, and the reason it is not `--gog-select-radius`: that token shapes the
+     *field*, and it shaped this box too until this release. One token painting two boxes meant a
+     consumer rounding the field into a pill rounded the dropdown into one as well, and the filter
+     radius below derives from whatever it is, so that followed too. Same default, so nothing
+     moves; `gog-autocomplete` and `gog-datepicker` already declared this token and this is the
+     pair that did not. */
+  --gog-select-panel-radius: var(--gog-radius);
+  /* The list's own gutter, so the rows sit inside the panel rather than bleeding to its border.
+     `gog-autocomplete` and `gog-multiselect` both inset theirs by this amount; this panel had no
+     interior at all, which is why its first and last rows were square inside a rounded corner --
+     the same defect `--gog-menu-item-radius` records for the menu. */
+  --gog-select-options-padding: var(--gog-space-4);
   --gog-select-option-hover-bg: var(--gog-hover-color);
   --gog-select-option-press-bg: var(--gog-border-color);
   --gog-select-option-selected-color: var(--gog-accent-color);
   --gog-select-option-color: var(--gog-text-color);
-  --gog-select-option-gap: var(--gog-space-10);
+  --gog-select-option-gap: var(--gog-space-12);
+  /* Concentric with the panel, which insets its rows by the list padding above. Derived rather
+     than restated, so it stays true once `--gog-density` moves the padding. */
+  --gog-select-option-radius: max(
+    0px,
+    calc(var(--gog-select-panel-radius) - var(--gog-select-options-padding))
+  );
   /* Estimated row height fed into the panel's up/down placement math; not itself a real
      layout property, so it has no effect unless the JS reads it. */
   --gog-select-option-height: 40px;
@@ -1816,13 +2201,15 @@
   --gog-slider-label-font-family: var(--gog-font-heading);
   --gog-slider-value-font-family: var(--gog-font-mono);
   --gog-slider-error-font-family: var(--gog-font-body);
-  --gog-slider-gap: var(--gog-space-6);
+  --gog-slider-gap: var(--gog-space-8);
   --gog-slider-label-color: var(--gog-accent-color);
   --gog-slider-label-font-size: var(--gog-text-sm);
+  --gog-slider-label-line-height: var(--gog-field-label-line-height);
   --gog-slider-label-letter-spacing: var(--gog-letter-spacing);
   --gog-slider-label-text-transform: var(--gog-text-transform);
   --gog-slider-value-color: var(--gog-accent-color);
   --gog-slider-value-font-size: var(--gog-text-sm);
+  --gog-slider-value-line-height: var(--gog-line-height-none);
   --gog-slider-value-min-width: 40px;
   --gog-slider-track-height: 4px;
   --gog-slider-track-area-height: 20px;
@@ -1859,8 +2246,10 @@
   --gog-slider-focus-ring-width: var(--gog-focus-ring-width);
   --gog-slider-range-color: var(--gog-muted-text-color);
   --gog-slider-range-font-size: var(--gog-text-xs);
+  --gog-slider-range-line-height: var(--gog-line-height-none);
   --gog-slider-error-color: var(--gog-danger-color);
   --gog-slider-error-font-size: var(--gog-text-xs);
+  --gog-slider-error-line-height: var(--gog-field-error-line-height);
   --gog-slider-disabled-opacity: var(--gog-disabled-opacity);
 
   /* ── Spinner ──────────────────────────────────────────────────────────────── */
@@ -1923,37 +2312,43 @@
   --gog-table-header-letter-spacing: var(--gog-letter-spacing);
   --gog-table-header-text-transform: var(--gog-text-transform);
   --gog-table-num-col-width: 48px;
-  --gog-table-th-inner-gap: var(--gog-space-6);
+  --gog-table-th-inner-gap: var(--gog-space-8);
   --gog-table-sort-icon-size: 0.9em;
   --gog-table-sort-icon-width: 1.1em;
   --gog-table-sort-icon-opacity: 0.6;
-  --gog-table-empty-padding: var(--gog-space-24) var(--gog-space-14);
+  --gog-table-empty-padding: var(--gog-space-24) var(--gog-space-16);
   --gog-table-empty-font-size: var(--gog-text-md);
-  --gog-table-loading-padding: var(--gog-space-32) var(--gog-space-14);
+  --gog-table-empty-line-height: var(--gog-line-height-normal);
+  --gog-table-loading-padding: var(--gog-space-32) var(--gog-space-16);
   --gog-table-loading-opacity: 0.5;
   --gog-table-row-transition-duration: var(--gog-duration-fast);
   --gog-table-footer-gap: var(--gog-space-sm);
   --gog-table-footer-min-height: 32px;
   --gog-table-total-font-size: var(--gog-text-xs);
+  --gog-table-total-line-height: var(--gog-line-height-normal);
   --gog-table-total-letter-spacing: 0.5px;
   --gog-table-total-text-transform: var(--gog-text-transform);
   --gog-table-num-font-size: var(--gog-text-xs);
-  --gog-table-padding-h: var(--gog-space-14);
-  --gog-table-xsm-padding-v: var(--gog-space-2);
+  --gog-table-num-line-height: var(--gog-line-height-normal);
+  --gog-table-padding-h: var(--gog-space-16);
+  --gog-table-xsm-padding-v: var(--gog-space-4);
   --gog-table-xsm-th-font-size: var(--gog-text-xs);
   --gog-table-xsm-td-font-size: var(--gog-text-xs);
-  --gog-table-sm-padding-v: var(--gog-space-2);
+  --gog-table-sm-padding-v: var(--gog-space-4);
   --gog-table-sm-th-font-size: var(--gog-text-xs);
   --gog-table-sm-td-font-size: var(--gog-text-xs);
-  --gog-table-md-padding-v: var(--gog-space-6);
+  --gog-table-md-padding-v: var(--gog-space-8);
   --gog-table-md-th-font-size: var(--gog-text-xs);
   --gog-table-md-td-font-size: var(--gog-text-sm);
-  --gog-table-lg-padding-v: var(--gog-space-10);
+  --gog-table-lg-padding-v: var(--gog-space-12);
   --gog-table-lg-th-font-size: var(--gog-text-sm);
   --gog-table-lg-td-font-size: var(--gog-text-md);
-  --gog-table-slg-padding-v: var(--gog-space-14);
+  --gog-table-slg-padding-v: var(--gog-space-16);
   --gog-table-slg-th-font-size: var(--gog-text-md);
   --gog-table-slg-td-font-size: var(--gog-text-lg);
+  /* One value for every size step: the role picks the leading and the size does not (D4). */
+  --gog-table-td-line-height: var(--gog-line-height-normal);
+  --gog-table-th-line-height: var(--gog-line-height-normal);
 
   /* ── Tabs ──────────────────────────────────────────────────────────────────
      `--gog-tabs-tab-bg`, `-tab-color`, `-tab-padding` and `-tab-font-size` are intentionally
@@ -1994,15 +2389,15 @@
   --gog-tabs-focus-ring-color: var(--gog-accent-color);
   --gog-tabs-panel-padding: var(--gog-space-md);
   --gog-tabs-panel-color: var(--gog-text-color);
-  --gog-tabs-xsm-padding: var(--gog-space-6) var(--gog-space-10);
+  --gog-tabs-xsm-padding: var(--gog-space-8) var(--gog-space-16);
   --gog-tabs-xsm-font-size: var(--gog-text-xs);
-  --gog-tabs-sm-padding: var(--gog-space-8) var(--gog-space-14);
+  --gog-tabs-sm-padding: var(--gog-space-8) var(--gog-space-16);
   --gog-tabs-sm-font-size: var(--gog-text-sm);
-  --gog-tabs-md-padding: var(--gog-space-12) var(--gog-space-18);
+  --gog-tabs-md-padding: var(--gog-space-12) var(--gog-space-24);
   --gog-tabs-md-font-size: var(--gog-text-md);
-  --gog-tabs-lg-padding: var(--gog-space-16) var(--gog-space-24);
+  --gog-tabs-lg-padding: var(--gog-space-16) var(--gog-space-32);
   --gog-tabs-lg-font-size: var(--gog-text-lg);
-  --gog-tabs-slg-padding: var(--gog-space-20) var(--gog-space-28);
+  --gog-tabs-slg-padding: var(--gog-space-20) var(--gog-space-40);
   --gog-tabs-slg-font-size: var(--gog-text-xl);
 
   /* ── Tag ──────────────────────────────────────────────────────────────────
@@ -2038,10 +2433,10 @@
   --gog-tag-radius: max(var(--gog-radius), 2px);
   --gog-tag-pill-radius: 9999px;
 
-  --gog-tag-xsm-font-size: 0.6875rem;
-  --gog-tag-xsm-padding-block: var(--gog-space-2);
-  --gog-tag-xsm-padding-inline: var(--gog-space-6);
-  --gog-tag-xsm-gap: var(--gog-space-2);
+  --gog-tag-xsm-font-size: var(--gog-text-2xs);
+  --gog-tag-xsm-padding-block: var(--gog-space-4);
+  --gog-tag-xsm-padding-inline: var(--gog-space-8);
+  --gog-tag-xsm-gap: var(--gog-space-4);
   --gog-tag-xsm-icon-size: 0.6875rem;
 
   --gog-tag-sm-font-size: var(--gog-text-xs);
@@ -2051,21 +2446,21 @@
   --gog-tag-sm-icon-size: 0.75rem;
 
   --gog-tag-md-font-size: var(--gog-text-sm);
-  --gog-tag-md-padding-block: var(--gog-space-6);
-  --gog-tag-md-padding-inline: var(--gog-space-12);
-  --gog-tag-md-gap: var(--gog-space-6);
+  --gog-tag-md-padding-block: var(--gog-space-8);
+  --gog-tag-md-padding-inline: var(--gog-space-16);
+  --gog-tag-md-gap: var(--gog-space-8);
   --gog-tag-md-icon-size: 0.875rem;
 
   --gog-tag-lg-font-size: var(--gog-text-md);
   --gog-tag-lg-padding-block: var(--gog-space-8);
-  --gog-tag-lg-padding-inline: var(--gog-space-14);
+  --gog-tag-lg-padding-inline: var(--gog-space-16);
   --gog-tag-lg-gap: var(--gog-space-8);
   --gog-tag-lg-icon-size: 1rem;
 
   --gog-tag-slg-font-size: var(--gog-text-lg);
-  --gog-tag-slg-padding-block: var(--gog-space-10);
-  --gog-tag-slg-padding-inline: var(--gog-space-16);
-  --gog-tag-slg-gap: var(--gog-space-10);
+  --gog-tag-slg-padding-block: var(--gog-space-12);
+  --gog-tag-slg-padding-inline: var(--gog-space-24);
+  --gog-tag-slg-gap: var(--gog-space-12);
   --gog-tag-slg-icon-size: 1.125rem;
 
   /* ── Toast ────────────────────────────────────────────────────────────────── */
@@ -2079,19 +2474,21 @@
   --gog-toast-warning-color: var(--gog-accent-bright);
   --gog-toast-info-color: var(--gog-accent-color);
   --gog-toast-accent-width: 4px;
-  --gog-toast-padding: var(--gog-space-12) var(--gog-space-14);
+  --gog-toast-padding: var(--gog-space-12) var(--gog-space-16);
   --gog-toast-radius: 0px;
-  --gog-toast-content-gap: var(--gog-space-10);
+  --gog-toast-content-gap: var(--gog-space-12);
   --gog-toast-main-gap: var(--gog-space-sm);
-  --gog-toast-actions-gap: var(--gog-space-6);
+  --gog-toast-actions-gap: var(--gog-space-8);
   --gog-toast-message-font-size: var(--gog-text-sm);
   --gog-toast-message-line-height: var(--gog-line-height-relaxed);
   --gog-toast-icon-size: 1rem;
   --gog-toast-icon-line-height: var(--gog-line-height-normal);
   --gog-toast-action-padding: var(--gog-space-4) var(--gog-space-8);
   --gog-toast-action-font-size: var(--gog-text-xs);
-  --gog-toast-close-padding: var(--gog-space-2) var(--gog-space-4);
+  --gog-toast-action-line-height: var(--gog-line-height-none);
+  --gog-toast-close-padding: var(--gog-space-4) var(--gog-space-8);
   --gog-toast-close-font-size: var(--gog-text-xs);
+  --gog-toast-close-line-height: var(--gog-line-height-none);
   --gog-toast-progress-height: 3px;
   --gog-toast-progress-opacity: 30%;
   --gog-toast-transition-duration: 0.25s;
@@ -2113,13 +2510,16 @@
   --gog-toggle-radius: 999px;
   --gog-toggle-border-width: var(--gog-border-width);
   --gog-toggle-border-style: var(--gog-border-style);
-  --gog-toggle-border-color: var(--gog-border-color);
+  --gog-toggle-border-color: var(--gog-control-boundary-color);
   --gog-toggle-on-border-color: var(--gog-accent-color);
   --gog-toggle-track-off-bg: var(--gog-border-color);
   --gog-toggle-track-on-bg: var(--gog-accent-color);
   --gog-toggle-thumb-off-bg: var(--gog-surface-color);
   --gog-toggle-thumb-on-bg: var(--gog-accent-text-color, var(--gog-primary-color));
-  --gog-toggle-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
+  /* The thumb's clearance inside its own track, and off the 4px grid on purpose: at 2px the
+     thumb is 83% of a 24px track, which is what makes a switch read as a switch, and 4px would
+     take it to 67%. A length inside a single painted mark is not spacing between two things —
+     `check-geometry.mjs` lists it in OPTICAL_CHROME with that reason. */
   --gog-toggle-thumb-inset: 2px;
   --gog-toggle-transition-duration: var(--gog-duration-base);
   --gog-toggle-disabled-opacity: var(--gog-disabled-opacity);
@@ -2133,12 +2533,12 @@
   --gog-toggle-state-font-weight: var(--gog-font-weight-semibold);
   --gog-toggle-state-letter-spacing: 0.04em;
   --gog-toggle-state-padding-inline: var(--gog-space-4);
-  --gog-toggle-state-offset: var(--gog-space-6);
+  --gog-toggle-state-offset: var(--gog-space-8);
   /* Gap between the wording and the thumb parked at the opposite end. The clearance itself
      (thumb size + this) is computed in the component stylesheet, not here: a `var(` to a
      size-class token is substituted where it is *declared*, so doing that calc on :root would
      freeze it to the md thumb and stop it scaling with `size`. */
-  --gog-toggle-state-thumb-gap: var(--gog-space-6);
+  --gog-toggle-state-thumb-gap: var(--gog-space-8);
   --gog-toggle-xsm-track-width: 24px;
   --gog-toggle-xsm-track-height: 14px;
   --gog-toggle-xsm-thumb-size: 10px;
@@ -2164,14 +2564,21 @@
   --gog-toggle-slg-thumb-size: 34px;
   --gog-toggle-slg-label-size: var(--gog-control-checkbox-label-size-slg);
   --gog-toggle-slg-state-font-size: 0.8125rem;
+  --gog-toggle-state-line-height: var(--gog-line-height-none);
 
   /* ── Tooltip ──────────────────────────────────────────────────────────────── */
   --gog-tooltip-font-family: var(--gog-font-body);
   --gog-tooltip-font-size: var(--gog-text-xs);
   --gog-tooltip-line-height: var(--gog-line-height-normal);
-  --gog-tooltip-padding: var(--gog-space-6) var(--gog-space-10);
+  --gog-tooltip-padding: var(--gog-space-8) var(--gog-space-12);
   --gog-tooltip-radius: var(--gog-radius);
-  --gog-tooltip-max-width: 280px;
+  /* L9 (docs/component-geometry.md, "D7 — taken"): the bubble wraps, so its cap is a measure —
+     43ch at --gog-tooltip-font-size (12px), the nearest whole character to today's 280px so this
+     changes robustness to a font-size change, not the pixels anyone sees today. It sits under
+     Bringhurst's 45ch floor even so; widening it is a pixel decision this law does not make (see
+     "D7 — taken"). L8's viewport exception is layered on top: no edge-inset token exists on this
+     component today, so the margin reads the scale directly. */
+  --gog-tooltip-max-width: min(43ch, calc(100vw - var(--gog-space-16) * 2));
   /* Caps the gog-scroll wrapping the bubble's content — see tooltip-bubble.component.html.
      A cap, not a fixed height: shorter content stays exactly as tall as it needs to be, this
      only stops something unusually long (a multi-paragraph TemplateRef) from growing to
@@ -2332,8 +2739,6 @@
     --gog-calendar-range-bg: color-mix(in srgb, var(--gog-accent-color) 16%, transparent);
     --gog-card-filled-bg: color-mix(in srgb, var(--gog-accent-dim) 8%, var(--gog-surface-color));
     --gog-card-hover-border-color: color-mix(in srgb, var(--gog-accent-color) 45%, transparent);
-    --gog-checkbox-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
-    --gog-radio-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
     --gog-chip-bg: color-mix(in srgb, var(--gog-surface-color) 88%, var(--gog-hover-color));
     --gog-chip-hover-bg: color-mix(in srgb, var(--gog-hover-color) 45%, var(--gog-surface-color));
     --gog-dialog-close-hover-bg: color-mix(in srgb, var(--gog-hover-color) 70%, transparent);
@@ -2353,7 +2758,6 @@
       var(--gog-input-icon-hover-color) 12%,
       transparent
     );
-    --gog-multiselect-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
     --gog-multiselect-option-hover-bg: color-mix(in srgb, var(--gog-accent-color) 10%, transparent);
     --gog-panel-filled-bg: color-mix(in srgb, var(--gog-accent-dim) 8%, var(--gog-surface-color));
     --gog-panel-toggle-hover-bg: color-mix(in srgb, var(--gog-hover-color) 70%, transparent);