@guildofgleks/ui 21.9.1 → 21.11.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;
@@ -221,7 +226,9 @@
 
   /* ── 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);
@@ -413,44 +420,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 +479,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);
 
@@ -535,41 +564,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 +624,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 +636,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 +661,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);
@@ -866,6 +913,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 +943,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 +959,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 ──────────────────────────────────────────────────────────────────
@@ -955,17 +1004,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 +1023,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,6 +1032,8 @@
   --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);
@@ -998,12 +1049,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);
@@ -1020,6 +1071,7 @@
   --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 ──────────────────────────────────────────────────────────────────
@@ -1056,9 +1108,9 @@
   --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;
@@ -1067,30 +1119,30 @@
   --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-gap: var(--gog-space-8);
   --gog-chip-sm-avatar-size: 1rem;
   --gog-chip-sm-icon-size: 0.75rem;
   --gog-chip-sm-remove-size: 0.875rem;
 
   --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-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-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.5rem;
   --gog-chip-lg-icon-size: 1rem;
   --gog-chip-lg-remove-size: 1.125rem;
 
   --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;
@@ -1115,13 +1167,20 @@
   --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 +1192,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 +1239,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 +1261,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 +1281,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 +1312,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 +1329,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 +1362,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 +1383,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 +1400,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 +1439,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 +1456,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 +1465,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 +1488,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 +1506,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 +1545,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);
@@ -1446,6 +1563,7 @@
   --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);
@@ -1453,15 +1571,22 @@
   --gog-multiselect-panel-border: var(--gog-accent-color);
   --gog-multiselect-panel-shadow: var(--gog-panel-shadow);
   --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. The panel paints `--gog-multiselect-radius` (the field's token --
+     this component has no panel radius of its own) 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-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 +1594,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-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);
@@ -1518,10 +1655,14 @@
   --gog-menu-shadow: var(--gog-dialog-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 +1676,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 +1691,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 +1716,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 +1746,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,11 +1776,27 @@
   --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. */
   --gog-progressbar-stripe-size: 6px;
   --gog-progressbar-stripe-color: var(--gog-surface-color);
+  /* The two hairlines that mark where the fill ends, and the reason they are two.
+     WCAG 1.4.11 wants 3:1 for the part of a graphic that carries its meaning, and here that is
+     the boundary — `showValue` is `false` by default, so nothing else states the value. The fill
+     cannot carry it against the track: measured across the whole `--gog-text-color`-to-
+     `--gog-border-color` axis, no single track colour clears 3:1 against all five fills in any
+     theme but `primeng`, because the fills straddle mid-luminance and a track dark enough for the
+     amber warning lands on the blue info (`docs/backlog.md` has the table).
+     A marker can, but not in one tone either: `--gog-surface-color` alone is 1.79:1 on
+     `material`'s warning fill, `--gog-text-color` alone is 1.06:1 on `one-dark`'s success. As a
+     pair they always work — the ink line is 3.25:1 to 9.57:1 against the track in all eleven
+     themes, and whichever tone a fill sits close to, the other one does not. `check:contrast`
+     gates both halves. */
+  --gog-progressbar-edge-width: 1px;
+  --gog-progressbar-edge-color: var(--gog-text-color);
+  --gog-progressbar-edge-backing-color: var(--gog-surface-color);
   /* The buffer tier is the same hue at low opacity, so it reads as "ahead of the fill"
      rather than as a second, competing colour. */
   --gog-progressbar-accent-bg: var(--gog-accent-color);
@@ -1665,7 +1830,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);
@@ -1682,7 +1859,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 ────────────────────────────────────────────────────────────────── */
@@ -1691,6 +1868,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);
@@ -1707,6 +1885,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
@@ -1721,35 +1900,43 @@
   /* 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-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);
   --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);
   /* 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;
@@ -1801,13 +1988,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;
@@ -1844,8 +2033,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 ──────────────────────────────────────────────────────────────── */
@@ -1908,37 +2099,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
@@ -1979,15 +2176,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 ──────────────────────────────────────────────────────────────────
@@ -2000,9 +2197,21 @@
   --gog-tag-warning-color: var(--gog-warning-color);
   --gog-tag-info-color: var(--gog-info-color);
   --gog-tag-bg-mix: 10%;
-  --gog-tag-color-mix: 82%;
+  /* The label is the status hue mixed **halfway toward the page's ink**, and both halves of that
+     changed in 21.10.0. It was 82% of the hue mixed toward literal `black`, which is a light-theme
+     assumption twice over: on a dark theme it darkened a label that already sat on a dark ground
+     (one-dark's danger tag read 3.11:1), and on a light one 18% of black is not enough to bring a
+     bright hue down to text contrast (material's warning, 2.49:1; primeng's success, 3.06:1).
+     Eleven of the 55 shipped combinations were under WCAG AA and nothing had ever measured them —
+     a tag's colours reach the DOM through `--gog-tag-variant-color`, which `check:contrast` could
+     not follow until the same release taught it to.
+
+     `--gog-text-color` rather than `black` makes the mix follow the theme, and 50% rather than 82%
+     is the same ratio, and the same argument, as `--gog-button-<status>-ink`: as body text the raw
+     status hue clears AA in only a handful of themes. The worst pair is now 4.67:1. */
+  --gog-tag-color-mix: 50%;
   --gog-tag-bg-base: var(--gog-surface-color);
-  --gog-tag-color-base: black;
+  --gog-tag-color-base: var(--gog-text-color);
   --gog-tag-border-width: var(--gog-border-width);
   --gog-tag-border-style: var(--gog-border-style);
   --gog-tag-inner-border-width: var(--gog-border-width);
@@ -2011,10 +2220,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);
@@ -2024,21 +2233,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 ────────────────────────────────────────────────────────────────── */
@@ -2052,19 +2261,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;
@@ -2093,6 +2304,10 @@
   --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);
@@ -2106,12 +2321,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;
@@ -2137,14 +2352,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
@@ -2211,6 +2433,18 @@
     --gog-button-primary-hover-shadow: 0 0 16px
       color-mix(in srgb, var(--gog-accent-bright) 45%, transparent);
     --gog-button-ghost-hover-bg: color-mix(in srgb, var(--gog-accent-color) 12%, transparent);
+    /* The table's header labels, one step off the raw accent and toward the page's ink. The
+       accent alone is text on a tinted strip (`--gog-table-header-bg` is `--gog-hover-color`), and
+       it read 4.15:1 in `light` and 4.32:1 in `one-light` — the only two themes it failed, and
+       both by a margin small enough that a per-theme patch would have been the tempting fix. This
+       is the general one: 20% of the ink lifts every theme (worst is now one-light at 5.09:1) and
+       keeps the accent identity the header is drawn in. Flat fallback above stays the raw accent,
+       which is what a browser without `color-mix()` has always shown. */
+    --gog-table-accent-color: color-mix(
+      in srgb,
+      var(--gog-accent-color) 80%,
+      var(--gog-text-color)
+    );
     /* Every other pressable surface, one rule: 20% of the same ingredient its own hover mixes at
        10-12%, so the press is a clear step past the hover without becoming a fill. 20 rather than
        a rounder 25 is measured, not chosen: `check:contrast` resolves these washes over the