@ponchia/ui 0.6.0 → 0.6.4

package/css/overlay.css

@@ -78,14 +78,25 @@ dialog.ui-modal[open]::backdrop {
 
 /* Controlled (non-<dialog>) usage. A portal/React modal that can't be a
    native <dialog> wears the same skin + open layout via `.is-open`.
-   Backdrop, top-layer stacking and focus-trapping are then the
-   consumer's responsibility (the native <dialog> path gets them free). */
+   Backdrop and top-layer stacking are then the consumer's responsibility
+   (the native <dialog> path gets them free); focus-trapping no longer is —
+   mark the overlay `data-bronto-modal` and run `initModal` for an
+   inert-based trap + focus-return + Escape signal. */
 .ui-modal.is-open {
   animation: uiToastIn var(--duration-base) var(--ease-spring) both;
   display: grid;
   grid-template-rows: auto 1fr auto;
 }
 
+/* Background scroll-lock. A native <dialog> top layer does NOT stop the page
+   behind it scrolling, and the no-JS native path can't lock it in script — so
+   lock it in CSS, for both the native [open] dialog and the controlled .is-open
+   overlay (incl. the drawer modifier, same base). (component audit C13.) */
+html:has(dialog.ui-modal[open]),
+html:has(.ui-modal.is-open) {
+  overflow: hidden;
+}
+
 .ui-modal__head {
   align-items: flex-start;
   border-block-end: 1px solid var(--line);
@@ -150,6 +161,21 @@ dialog.ui-modal[open]::backdrop {
   }
 }
 
+/* Comfortable hit target on coarse pointers — this bespoke close button measured
+   ~26px on touch, below the 2.9rem floor the rest of the button family meets
+   (WCAG 2.5.8). Scoped to coarse so the fine-pointer (mouse) rendering, which
+   already clears 24×24, is unchanged; centre the glyph in the enlarged box.
+   (audit C3.) */
+@media (pointer: coarse) {
+  .ui-modal__close {
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+    min-block-size: 2.9rem;
+    min-inline-size: 2.9rem;
+  }
+}
+
 /* --- Lightbox — a full-viewport <dialog> wrapping a .ui-carousel. The
    native <dialog> brings the top layer, focus-trap and Escape; initDialog
    adds open (`data-bronto-open`) + focus-return; initCarousel drives the
@@ -284,6 +310,25 @@ dialog.ui-modal[open]::backdrop {
   opacity: 1;
 }
 
+/* Menu hover/focus paints var(--bg-accent), which HCM strips, so the hovered row
+   is indistinguishable from its siblings (focus keeps the UA ring; hover has no
+   such fallback). Re-assert a system Highlight like the combobox/command rows,
+   for parity with those sibling surfaces. (component audit C22.) */
+@media (forced-colors: active) {
+  .ui-menu__item:hover,
+  .ui-menu__item:focus-visible {
+    forced-color-adjust: none;
+    background: Highlight;
+    color: HighlightText;
+  }
+
+  .ui-menu__item:hover::before,
+  .ui-menu__item:focus-visible::before {
+    background: HighlightText;
+    opacity: 1;
+  }
+}
+
 /* --- Combobox: an input with a filtered listbox popup (APG pattern,
    wired by initCombobox). Reuses the menu surface tokens. --- */
 .ui-combobox {
@@ -337,6 +382,18 @@ dialog.ui-modal[open]::backdrop {
   color: var(--text);
 }
 
+/* The active option is tracked by aria-activedescendant — it is NEVER DOM-focused,
+   so it gets no UA focus ring under HCM, and its only cue (--bg-accent) is stripped.
+   Re-assert a system Highlight like the command palette does. (audit C2.) */
+@media (forced-colors: active) {
+  .ui-combobox__option.is-active,
+  .ui-combobox__option[aria-selected='true'] {
+    forced-color-adjust: none;
+    background: Highlight;
+    color: HighlightText;
+  }
+}
+
 .ui-combobox__empty {
   color: var(--text-dim);
   font-size: var(--text-2xs);

package/css/primitives.css

@@ -71,12 +71,15 @@
   padding-inline: var(--center-gutter, var(--space-md));
 }
 
-/* Intrinsic aspect-ratio box; the media child fills it. */
+/* Intrinsic aspect-ratio box; the media child fills it. The contract is ONE
+   child (a single <img>/<video>/<iframe>). Scope the fill to :first-child rather
+   than every child: a second child would otherwise be forced to 100%/100% +
+   object-fit and stack on top, silently breaking the ratio. (audit C34.) */
 .ui-ratio {
   aspect-ratio: var(--ratio, 16 / 9);
 }
 
-.ui-ratio > * {
+.ui-ratio > :first-child {
   block-size: 100%;
   inline-size: 100%;
   object-fit: cover;
@@ -94,7 +97,11 @@
   container: bronto / inline-size;
 }
 
-@container bronto (max-width: 34rem) {
+/* Logical `max-inline-size`, not physical `max-width`: the container is typed
+   `inline-size`, so the inline axis is the one actually tracked — the logical
+   query matches it in any writing mode (a physical `width` query silently
+   misses in a vertical WM). (component audit C34.) */
+@container bronto (max-inline-size: 34rem) {
   .ui-grid {
     --grid-min: 100%;
   }
@@ -168,7 +175,7 @@
 /* Inside an opt-in .ui-cq container, collapse to one column when the
    container (not the viewport) is narrow — keeps tiles usable in a slim
    panel. Inert without .ui-cq, so baselines are unaffected. */
-@container bronto (max-width: 30rem) {
+@container bronto (max-inline-size: 30rem) {
   .ui-statgrid,
   .ui-app-metrics {
     grid-template-columns: 1fr;
@@ -182,6 +189,12 @@
   border-radius: var(--radius-md);
   display: grid;
   gap: 0.4rem;
+
+  /* These tiles hold IDs / hashes / big numbers — the unbreakable-token case is
+     the common one. A grid item defaults to min-inline-size:auto, so a long
+     value pushes the whole statgrid track wider; allow the tile to shrink so the
+     value can wrap instead (paired with overflow-wrap on __value). (audit C5.) */
+  min-inline-size: 0;
   padding: var(--space-md);
 }
 
@@ -203,6 +216,7 @@
   font-weight: var(--display-weight-strong);
   letter-spacing: 0.02em;
   line-height: 1.05;
+  overflow-wrap: anywhere; /* break an unspaced ID/hash rather than overflow (audit C5) */
 }
 
 .ui-stat__delta,
@@ -243,6 +257,10 @@
    share one P&L vocabulary. Token-identical to the table's is-num/
    is-pos/is-neg (which stay table-local). */
 .ui-num {
+  /* inline-block so `text-align: end` actually applies: on a bare inline element
+     it computes but never paints (the box is shrink-wrapped), so an author who
+     followed the docs to right-align an inline figure saw no effect. (audit C17.) */
+  display: inline-block;
   font-variant-numeric: tabular-nums;
   text-align: end;
 }
@@ -413,13 +431,26 @@
 
 /* aria-disabled keeps the element in the a11y tree but the browser does NOT
    block activation (a real <a class="ui-button" aria-disabled> still navigates,
-   a <button> still fires). Looking dead while staying live is the defect — kill
-   pointer activation. (a11y review C3; native :disabled already inert.) */
+   a <button> still fires). `pointer-events: none` kills POINTER activation only
+   — a focused control still fires on Enter/Space, which CSS cannot intercept. So
+   this looks-dead state is NOT keyboard-inert: for that, prefer native
+   `<button disabled>`, run `initDisabledGuard()` (it intercepts Enter/Space on
+   aria-disabled controls), or add `tabindex="-1"` (and drop `href` on a link).
+   See docs/usage.md "Disabled vs aria-disabled". (a11y review C3 / audit C4;
+   native :disabled already inert.) */
 .ui-button[aria-disabled='true'],
 .ui-link[aria-disabled='true'] {
   pointer-events: none;
 }
 
+/* The button family dims + shows not-allowed via its `:disabled` rule above, but
+   a disabled LINK got only pointer-events:none — it looked fully live. Give it
+   the same visual disabled cue. (component audit C30.) */
+.ui-link[aria-disabled='true'] {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
 .ui-button:active {
   transform: translateY(1px);
 }
@@ -445,8 +476,13 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
+  /* The global reduced-motion reset freezes the spin on a single frame with an
+     !important `animation-duration`, so the old non-important `1.4s` slow-spin
+     here was dead code AND left a broken, transparent-topped ring looking like a
+     rendering bug. Drop the dead rule; show a STATIC complete ring instead — a
+     still busy cue with no implied motion. (component audit C15.) */
   .ui-button[aria-busy='true']::before {
-    animation-duration: 1.4s;
+    border-block-start-color: currentcolor;
   }
 }
 
@@ -492,6 +528,27 @@
   inline-size: 0.42rem;
 }
 
+/* RTL: the logical borders flip sides, but a fixed `rotate(45deg)` then points
+   the chevron UP rather than toward the inline-end (the reading-forward way).
+   Mirror the rotation so the resting affordance points forward in RTL too.
+   (component audit C14.) */
+[dir='rtl'] .ui-link--arrow::after,
+[dir='rtl'] .ui-link--cta::after {
+  transform: rotate(-45deg);
+}
+
+/* Standalone CTA links are tap targets, not inline prose links: on a coarse
+   pointer float them to the WCAG 2.5.8 AA 24px floor (the 2.5.8 inline-link
+   exception doesn't cover a block-level call-to-action, which is what these
+   are). Buttons already auto-grow to ~44px on coarse pointers. (component
+   audit C14.) */
+@media (pointer: coarse) {
+  .ui-link--arrow,
+  .ui-link--cta {
+    min-block-size: 1.5rem;
+  }
+}
+
 /* --- Chip / tag --- */
 
 .ui-chip {
@@ -637,6 +694,8 @@
   color: var(--text);
   font-family: var(--mono);
   margin: 0;
+  min-inline-size: 0;
+  overflow-wrap: anywhere; /* IDs/hashes/paths are the common value — break, don't overflow (audit C5) */
 }
 
 /* --- Hover (pointer only) --- */
@@ -679,7 +738,7 @@
 
   [dir='rtl'] .ui-link--arrow:hover::after,
   [dir='rtl'] .ui-link--cta:hover::after {
-    transform: translateX(-0.14rem) rotate(45deg);
+    transform: translateX(-0.14rem) rotate(-45deg);
   }
 
   .ui-chip--accent:hover {

package/css/report.css

@@ -12,7 +12,6 @@
   --report-padding-block: var(--space-2xl);
   --report-gap: var(--space-lg);
   --report-measure: 74ch;
-  --report-page-margin: 18mm;
 
   color: var(--text-soft);
   display: grid;
@@ -257,6 +256,46 @@
   text-transform: uppercase;
 }
 
+/* --- Labelled meter row ---
+   A multi-meter block (SLO burn, error budgets, capacity) lays out as
+   label | bar | value. The bare `ui-meter` base lives in feedback.css; this is
+   the report-document grammar around it so authors stop hand-rolling the grid.
+   The bar NEVER carries the reading alone (WCAG 1.4.1) — `ui-meter__value` is
+   the data of record, and the bar clamps at 100 so an over-target figure still
+   reads correctly in the value text. Collapses to a stack on a narrow screen. */
+.ui-meter__row {
+  align-items: center;
+  display: grid;
+  gap: var(--space-2xs) var(--space-md);
+  grid-template-columns: minmax(9rem, 14rem) 1fr auto;
+  margin-block: var(--space-2xs);
+}
+
+.ui-meter__row .ui-meter {
+  min-inline-size: 8rem;
+}
+
+.ui-meter__label {
+  color: var(--text-soft);
+}
+
+.ui-meter__value {
+  color: var(--text);
+  font-family: var(--mono);
+  font-variant-numeric: tabular-nums;
+  text-align: end;
+}
+
+@media (max-width: 32rem) {
+  .ui-meter__row {
+    grid-template-columns: 1fr;
+  }
+
+  .ui-meter__value {
+    text-align: start;
+  }
+}
+
 /* A chart is NOT a bronto component — it needs scales + data binding, which the
    analytical layer refuses to own. Theme Vega-Lite with `@ponchia/ui/vega`
    (docs/vega.md), or hand-author a token-themed inline `<svg>`, and drop it in a
@@ -272,10 +311,10 @@
 }
 
 @media print {
-  /* Re-tokenises the base 18mm default (base.css) so report margins stay
-     themeable via --report-page-margin. */
+  /* Chromium-class print engines do not reliably resolve custom properties in
+     @page rules. Keep this literal so reports cannot print edge-to-edge. */
   @page {
-    margin: var(--report-page-margin);
+    margin: 18mm;
   }
 
   .ui-report {

package/css/sidenote.css

@@ -0,0 +1,67 @@
+/* ==========================================================================
+   sidenote — opt-in Tufte-style margin notes.
+
+   A numbered `ui-sidenote` and an unnumbered `ui-marginnote` for evidence,
+   caveats, and provenance asides that belong beside the text, not in it. Wide
+   viewports float the note into the inline-end margin; narrow viewports collapse
+   it to an indented inline block. CSS counters number the sidenotes. Not
+   imported by core.css.
+
+   Boundary / wiring: the HOST owns where numbering restarts — set
+   `counter-reset: ui-sidenote` on the article (or a section) — and reserves the
+   margin gutter by giving that container
+   `padding-inline-end: calc(var(--sidenote-width) + var(--sidenote-gap))` at the
+   same breakpoint. Place each note in the DOM right after its `.ui-sidenote__ref`.
+   ========================================================================== */
+
+.ui-sidenote,
+.ui-marginnote {
+  --sidenote-width: 12rem;
+  --sidenote-gap: 2rem;
+
+  border-inline-start: 2px solid var(--line);
+  color: var(--text-dim);
+  display: block;
+  font-size: var(--text-2xs);
+  line-height: 1.5;
+  margin-block: var(--space-2xs);
+  padding-inline-start: var(--space-md);
+}
+
+/* The inline superscript that anchors a numbered sidenote. Use --accent-text,
+   not raw --accent: this is readable text and must clear WCAG AA 4.5:1 even
+   after a one-knob re-brand to a paler --accent (raw --accent drops to ~1.5:1).
+   Same accent-as-text contract as .ui-eyebrow / .ui-link--cta. (audit C6.) */
+.ui-sidenote__ref {
+  color: var(--accent-text);
+  counter-increment: ui-sidenote;
+  font-size: 0.75em;
+  vertical-align: super;
+}
+
+.ui-sidenote__ref::after {
+  content: counter(ui-sidenote);
+}
+
+/* The note repeats its number (display only — the ref already incremented).
+   --accent-text for the same WCAG-AA reason as the ref above. (audit C6.) */
+.ui-sidenote::before {
+  color: var(--accent-text);
+  content: counter(ui-sidenote) '. ';
+}
+
+/* Wide viewports: float the note into the inline-end margin. The container must
+   reserve the gutter (see header). */
+@media (min-width: 60rem) {
+  .ui-sidenote,
+  .ui-marginnote {
+    border-inline-start: 0;
+    clear: inline-end;
+    float: inline-end;
+    inline-size: var(--sidenote-width);
+    margin-block: 0;
+    margin-inline-end: calc(-1 * (var(--sidenote-width) + var(--sidenote-gap)));
+    padding-inline-start: 0;
+    text-align: start;
+  }
+}

package/css/skins.css

@@ -11,44 +11,53 @@
 /* Amber CRT */
 :root[data-bronto-skin='amber-crt'] {
   --accent: oklch(52% 0.11 67deg);
+  --dotmatrix-pulse-min: 0.35;
 }
 
 :root[data-theme='dark'][data-bronto-skin='amber-crt'] {
   --accent: oklch(82% 0.15 82deg);
   --dotmatrix-glow: 0.4em;
+  --dotmatrix-pulse-min: 0.3;
 }
 
 /* E-ink */
 :root[data-bronto-skin='e-ink'] {
   --accent: oklch(34% 0.012 250deg);
+  --dotmatrix-reveal-step: 0ms;
 }
 
 :root[data-theme='dark'][data-bronto-skin='e-ink'] {
   --accent: oklch(84% 0.008 250deg);
+  --dotmatrix-reveal-step: 0ms;
 }
 
 /* Phosphor Green */
 :root[data-bronto-skin='phosphor-green'] {
   --accent: oklch(52% 0.13 150deg);
+  --dotmatrix-pulse-min: 0.35;
 }
 
 :root[data-theme='dark'][data-bronto-skin='phosphor-green'] {
   --accent: oklch(84% 0.19 150deg);
   --dotmatrix-glow: 0.4em;
+  --dotmatrix-pulse-min: 0.3;
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme='light'])[data-bronto-skin='amber-crt'] {
     --accent: oklch(82% 0.15 82deg);
     --dotmatrix-glow: 0.4em;
+    --dotmatrix-pulse-min: 0.3;
   }
 
   :root:not([data-theme='light'])[data-bronto-skin='e-ink'] {
     --accent: oklch(84% 0.008 250deg);
+    --dotmatrix-reveal-step: 0ms;
   }
 
   :root:not([data-theme='light'])[data-bronto-skin='phosphor-green'] {
     --accent: oklch(84% 0.19 150deg);
     --dotmatrix-glow: 0.4em;
+    --dotmatrix-pulse-min: 0.3;
   }
 }

package/css/spark.css

@@ -0,0 +1,76 @@
+/* ==========================================================================
+   spark — opt-in inline datawords (word-sized microcharts).
+
+   A trend-in-a-sentence for generated reports and dense tables — the inline
+   counterpart to the scalar `ui-delta` / `ui-num` / `ui-stat`. Pure CSS, no
+   measurement, SSR-static, print-survivable. Not imported by core.css.
+
+   Boundary: the HOST normalises each point to 0..1 and sets it as `--v` on a
+   `.ui-spark__bar`; Bronto only paints the geometry. It refuses raw values and
+   min/max/scale computation. A bare spark is opaque to assistive tech, so the
+   container MUST carry a host-written `role="img"` + `aria-label` text
+   equivalent (e.g. "weekly signups, trending up"). Colour is never the only
+   channel — pair it with that label.
+   ========================================================================== */
+
+.ui-spark {
+  align-items: flex-end;
+  block-size: 1em;
+  display: inline-flex;
+  gap: 1px;
+  inline-size: max-content;
+  vertical-align: -0.15em;
+}
+
+.ui-spark__bar {
+  background: currentColor;
+  block-size: max(1px, calc(var(--v, 0) * 100%));
+  border-radius: 0.5px;
+  flex: 0 0 0.25em;
+  min-inline-size: 2px;
+}
+
+/* Emphasise / tone a single bar — the rationed accent or a status tone. The
+   meaning still has to be in the aria-label (WCAG 1.4.1). */
+.ui-spark__bar--accent {
+  background: var(--accent);
+}
+
+.ui-spark__bar--pos {
+  background: var(--success);
+}
+
+.ui-spark__bar--neg {
+  background: var(--danger);
+}
+
+/* Dot variant — each bar reads as a stack of dots (the dot-matrix dataword)
+   instead of a solid bar, for the signature look in a sentence/table. A vertical
+   repeating mask breaks every bar into segments; the host still only sets `--v`
+   per bar, so the contract is identical to the solid spark. */
+.ui-spark--dots .ui-spark__bar {
+  --_dot: var(--spark-dot, 0.16em);
+  --_step: calc(var(--_dot) + var(--spark-dot-gap, 0.06em));
+
+  border-radius: 0;
+  /* stylelint-disable-next-line property-no-vendor-prefix -- Safari still needs the prefixed mask property. */
+  -webkit-mask: repeating-linear-gradient(to top, #000 0 var(--_dot), transparent var(--_dot) var(--_step));
+  mask: repeating-linear-gradient(to top, #000 0 var(--_dot), transparent var(--_dot) var(--_step));
+}
+
+/* Forced colours would force the bar backgrounds to the system surface and the
+   chart would vanish — repaint the bars in the system text colour so the shape
+   survives (the tone distinction is carried by the required aria-label). */
+@media (forced-colors: active) {
+  .ui-spark__bar {
+    background: CanvasText;
+  }
+}
+
+/* Print: the bars are currentColor fills the print economy would drop. */
+@media print {
+  .ui-spark__bar {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+}

package/css/table.css

@@ -20,10 +20,11 @@
 .ui-table th,
 .ui-table td {
   border-block-end: 1px solid var(--line);
-  overflow-wrap: anywhere;
+  overflow-wrap: break-word;
   padding: 0.7rem 0.85rem;
   text-align: start;
   vertical-align: top;
+  word-break: normal;
 }
 
 .ui-table th {
@@ -35,6 +36,11 @@
   position: sticky;
   text-transform: uppercase;
   inset-block-start: 0;
+
+  /* Keep the sticky header above body cells — cheap insurance for the
+     sticky-header + pinned/positioned-column combo, where an un-z-indexed th
+     scrolls under a positioned cell. (audit C30.) */
+  z-index: 1;
 }
 
 .ui-table td {
@@ -74,6 +80,11 @@
   border-inline-end: 0;
 }
 
+.ui-table--break-anywhere th,
+.ui-table--break-anywhere td {
+  overflow-wrap: anywhere;
+}
+
 /* Numeric / right-aligned cells. */
 .ui-table .is-num,
 .ui-table th.is-num {
@@ -154,8 +165,10 @@
   padding: var(--space-sm) var(--space-md);
 }
 
-/* --- Loading state: set aria-busy + .ui-table--loading on the wrap --- */
-.ui-table--loading {
+/* --- Loading state: set aria-busy + .ui-table-wrap--loading on the wrap. The
+   modifier is named for the element it goes ON (the wrap), not `.ui-table`, so
+   the BEM host matches the documented placement. (component audit C19.) --- */
+.ui-table-wrap--loading {
   opacity: 0.6;
   pointer-events: none;
 }

package/css/term.css

@@ -0,0 +1,110 @@
+/* ==========================================================================
+   term — opt-in inline glossary term + definition, and an end-of-report glossary.
+
+   The accessible upgrade of the famously touch/keyboard-broken `abbr[title]`: a
+   dotted-underline term whose definition lives in real, reachable DOM via the
+   native `[popover]` + `popovertarget` pairing, plus a `ui-glossary` `<dl>` block
+   that collects every term at the end of a document. Jargon that explains itself
+   inline and gathers into a reference — dead-centre on the explanation pillar.
+   Pure CSS over native popover, no kernel. Not imported by core.css.
+
+   Boundary: the HOST owns the wiring. The term is a `<button class="ui-term"
+   popovertarget="…">`; the definition is `<div class="ui-def" popover id="…">`.
+   That native pairing gives keyboard + touch + light-dismiss for free — no JS.
+   The glossary is a plain `<dl>`; the printed document leans on it because
+   popovers don't print (see docs/term.md). Anchor positioning is a gated
+   enhancement; without it the definition opens centred in the top layer.
+   ========================================================================== */
+
+/* The inline term marker — a real <button> so it is keyboard- and touch-
+   reachable (the abbr[title] failure). Reset to inline text, keep a dotted
+   underline as the "has a definition" cue. */
+.ui-term {
+  background: none;
+  border: 0;
+  color: inherit;
+  cursor: help;
+  font: inherit;
+  padding: 0;
+  text-decoration: underline;
+  text-decoration-color: var(--line-strong);
+  text-decoration-style: dotted;
+  text-underline-offset: 0.2em;
+}
+
+@media (hover: hover) {
+  .ui-term:hover {
+    text-decoration-color: var(--accent);
+  }
+}
+
+.ui-term:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+/* The definition — a native popover. Reset the UA popover chrome to the Bronto
+   raised-surface card. */
+.ui-def {
+  background: var(--surface-raised);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-raised);
+  color: var(--text);
+  font-family: var(--sans);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+  margin: 0;
+  max-inline-size: 22rem;
+  padding: var(--space-sm) var(--space-md);
+}
+
+/* Progressive enhancement: anchor the definition to its term where CSS anchor
+   positioning exists, so it opens beside the word and flips at the viewport
+   edge. The host sets the matching `anchor-name` on the term (see docs). Without
+   support the popover keeps its centred top-layer fallback. */
+@supports (anchor-name: --x) {
+  .ui-def {
+    inset: auto;
+    margin-block-start: 0.4rem;
+    position-area: block-end span-inline-end;
+    position-try-fallbacks: flip-block, flip-inline;
+  }
+}
+
+/* --- Glossary — the end-of-document <dl> the terms collect into. --- */
+
+.ui-glossary {
+  border-block-start: 1px solid var(--line);
+  display: grid;
+  gap: var(--space-2xs) var(--space-md);
+  grid-template-columns: minmax(6rem, max-content) 1fr;
+  margin: 0;
+  padding-block-start: var(--space-md);
+}
+
+.ui-glossary__term {
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  letter-spacing: var(--tracking-wide);
+}
+
+.ui-glossary__def {
+  color: var(--text-dim);
+  font-size: var(--text-sm);
+  margin: 0;
+}
+
+/* Narrow viewports: stack each term over its definition. */
+@media (max-width: 32rem) {
+  .ui-glossary {
+    grid-template-columns: 1fr;
+    gap: 0.15rem var(--space-md);
+  }
+
+  .ui-glossary__def {
+    margin-block-end: var(--space-xs);
+  }
+}