@repobit/dex-system-design 0.25.12 → 0.26.0

package/src/components/awards/awards.css.js

@@ -1,14 +1,47 @@
-import { css } from "lit";
+import { css, unsafeCSS } from "lit";
+import { below } from "../shared/token-scales.js";
 
 export const awardsCSS = css`
 
-  bd-awards-section {
+  /* :host, not "bd-awards-section". This rule was written as a bare type
+     selector inside a stylesheet Lit adopts into the shadow root, where it can
+     never match the element that owns it -- only :host can. Measured before:
+     the rule was present in the shadow sheet and matched 0 elements, and the
+     host computed display inline, background transparent, padding 0,
+     content-box, and font-family Times. Every declaration was dead.
+     .
+     THREE OF THE FIVE ARE CARRIED OVER AND TWO ARE NOT, because they are not
+     the same kind of change. display, box-sizing and font-family are latent
+     defects: a custom element defaults to display inline, so this section's
+     host has never been a block box; and its font-family fell through to Times,
+     which reaches any text that does not set its own -- today nothing does, so
+     it is a trap rather than a visible fault. Turning those three on changes
+     nothing a reader sees: the two children measure 409.781 and 520.789 before
+     and after, and the host now measures 930.570 -- exactly their sum, which is
+     what a block box wrapping its content should be. As an inline box its rect
+     was computed from line boxes instead and rounded a pixel lower. The
+     screenshots are indistinguishable.
+     .
+     background and padding were held back one commit and are now carried over
+     too, on an explicit call after seeing them rendered. They are the visible
+     half: the section gains its blue-50 band and a 32px inset it had never
+     rendered, and grows 930px to 995px. The band is what the token
+     --layout-awards-section-background was always for -- the blog subsystem
+     has been resolving it all along, and only this consumer was spelling it in
+     a selector that could not match.
+     .
+     The band does not arrive alone. It turns every card inside this section
+     into a card on a tinted ground, which is the second clause of "a card's
+     ground and its edge" -- see .bd-awards-feature-card below, which moved with
+     it. Measured on the preview before deciding: the feature card's
+     surface/container ground read 1.034:1 against the band, and worse than that
+     number suggests, because the step is across hues rather than lightness. */
+  :host {
     display: block;
     font-family: var(--typography-fontFamily-sans);
-    background: var(--layout-awards-section-background);
     box-sizing: border-box;
-   padding: var(--spacing-32);
-
+    background: var(--layout-awards-section-background);
+    padding: var(--spacing-32);
   }
 
   .bd-awards-root {
@@ -16,7 +49,7 @@ export const awardsCSS = css`
     flex-direction: column;
     align-items: center;
     gap: var(--spacing-48);
-    padding: var(--spacing-48) var(--layout-ensemble-inline-padding);
+    padding-block: var(--spacing-48);
     box-sizing: border-box;
     max-width: 100%;
   }
@@ -35,23 +68,20 @@ export const awardsCSS = css`
   }
 
   .bd-awards-tagline {
-    color: var(--color-blue-500);
-    font-size: var(--typography-fontSize-lg, 1.125rem);
-    font-weight: 600;
-    letter-spacing: 0.02em;
+    /* The brand text role, not the brand primitive. This darkens the ink: the
+       role is blue-600, so contrast on white goes 4.53:1 -> 6.18:1. It is not a
+       like-for-like swap, and it cannot be -- no text role exists at blue-500's
+       value. The roles sitting there are surface, border, action, two status
+       fills, an accent and the tab indicator, and blue-500 is the step
+       CLAUDE.md says is not for text. */
+    color: var(--color-text-brand);
   }
 
   .bd-awards-section-title {
-    color: var(--color-blue-500);
-    font-size: var(--typography-fontSize-xl);
-    font-weight: 700;
     margin: var(--spacing-0) var(--spacing-0) var(--spacing-14);
   }
 
   .bd-awards-feature-title {
-    color: var(--color-blue-500);
-    font-size: var(--typography-fontSize-xl);
-    font-weight: 700;
     margin: var(--spacing-0) var(--spacing-0) var(--spacing-14);
   }
 
@@ -67,6 +97,33 @@ export const awardsCSS = css`
   }
 
   .bd-awards-laurel-icon {
+    /* no role: the laurel wreath. ORNAMENT, not a mark and not a glyph in a
+       text flow -- the same decision highlight.css.js records for its deco bar
+       and ellipses, and for the same reason: every icon-role candidate in this
+       package is an INK role, and ink is the wrong family for an ornament. The
+       span wraps an aria-hidden SVG painted with currentColor, so nothing here
+       is exposed to assistive technology and the adjacent headline carries the
+       meaning.
+       .
+       --color-blue-500 is the brand blue. It is a primitive because the system
+       has no brand ink at that step and deliberately does not want one: every
+       blue-500 role is a surface, a border, an action, an indicator or a status
+       fill, so adopting one would say this wreath is an action. Naming a new
+       role for two sites in one component family would be the mistake the
+       "deliberately not a token" section exists to prevent.
+       .
+       Contrast, against the blue-50 this file always intended and now actually
+       paints. The :host rule at the top declared
+       background: var(--layout-awards-section-background) as a bare type
+       selector that could never match, so for the whole life of this rule the
+       wreath sat on white; the selector is fixed and the band is on, so the
+       ground is blue-50.
+       .
+       Measured on that ground: 5.72:1 -> 4.20:1. It was 6.18:1 -> 4.53:1 while
+       the band was dead. Every one of those clears the 3:1 non-text minimum, and
+       a decorative graphic has no minimum at all, so the wreath was safe before
+       the band and is safe after it -- which is why this choice did not have to
+       wait on that decision. */
     color: var(--color-blue-500);
     display: flex;
     align-items: center;
@@ -76,15 +133,12 @@ export const awardsCSS = css`
     flex-shrink: 0;
   }
 
-  .bd-awards-laurel-icon bd-icon {
-    --bd-icon-w: var(--spacing-80);
-    --bd-icon-h: var(--spacing-80);
-  }
 
-  .bd-awards-laurel-icon svg {
-    width: 100%;
-    height: 100%;
-  }
+  /* A ".bd-awards-laurel-icon svg" rule stood here and could never match. The
+     span holds <bd-laurel-icon>, whose svg lives in that atom's own shadow
+     root, and a descendant selector from this stylesheet does not cross that
+     boundary. The atom sizes itself -- see its defaultSize -- so the sizing
+     this rule tried to impose was already handled a layer down. */
 
   .bd-awards-headline-line {
     display: block;
@@ -141,11 +195,9 @@ export const awardsCSS = css`
     display: none;
   }
 
-  /* All badges: uniform height from token, width from each SVG's natural aspect ratio */
-  .bd-awards-badge bd-icon {
-    --bd-icon-h: var(--spacing-64);
-    --bd-icon-w: auto;
-  }
+  /* All badges: uniform height, width from each mark's natural aspect ratio.
+     The award elements draw at that height intrinsically, so nothing is set
+     here — this used to size the local bd-icon wrapper that has been removed. */
 
   /* ── Lower block ── */
 
@@ -201,10 +253,25 @@ export const awardsCSS = css`
 
   /* ── Feature card ── */
 
+  /* A content card by every measure that was compared: the same 32px padding,
+     no resting shadow, exactly like the card box and the card-features card.
+     The corner was the only thing it did differently, and the card role settled
+     that.
+     .
+     THE GROUND AND THE EDGE MOVED WHEN THE BAND ARRIVED. This card used to sit
+     on the page, where surface/container's tonal step is the separation and an
+     edge is redundant -- the first clause of the rule. Its section now paints a
+     blue-50 band, so it is a card on a tint, and the second clause applies:
+     surface/default with a border-width-1 border/container edge, because no
+     tonal step is available across a hue change. Measured before the move: the
+     container ground read 1.034:1 against the band, which is not a step so much
+     as a smudge. The Trust Panel card and the Comparison Panel column already
+     draw exactly this, for exactly this reason. */
   .bd-awards-feature-card {
-    background: var(--color-neutral-25, #fafafa);
-    border-radius: var(--radius-3xl);
-    padding: var(--spacing-32);
+    background: var(--color-surface-default);
+    border: var(--border-width-1) solid var(--color-border-container);
+    border-radius: var(--card-radius);
+    padding: var(--card-padding);
     display: flex;
     flex-direction: column;
     gap: var(--spacing-8);
@@ -229,33 +296,22 @@ export const awardsCSS = css`
     justify-content: center;
   }
 
-  .bd-awards-feature-icon bd-icon {
-    width: 100%;
-    height: 100%;
-  }
-
-  .bd-awards-feature-icon bd-icon svg,
-  .bd-awards-feature-icon bd-icon img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
 
   .bd-awards-feature-card .bd-awards-feature-title {
     display: block;
     margin: 0;
   }
 
-  .bd-awards-badge img {
-    display: block;
-    object-fit: contain;
-  }
+  /* A ".bd-awards-badge img" rule stood here and could never match: the badge
+     renders icon atoms through iconFn(), not an <img>, so there is no image
+     element in this shadow root to size. A leftover from before the award
+     marks became atoms. */
 
   /* ── Mobile (≤ 599px) ── */
 
-  @media (max-width: 599px) {
+  @media ${unsafeCSS(below('sm'))} {
     .bd-awards-root {
-      padding: var(--spacing-24);
+      padding-block: var(--spacing-24);
       gap: var(--spacing-24);
     }
 
@@ -276,9 +332,10 @@ export const awardsCSS = css`
       height: var(--spacing-40);
     }
 
-    .bd-awards-laurel-icon bd-icon {
-      --bd-icon-w: var(--spacing-40);
-      --bd-icon-h: var(--spacing-40);
+    /* The icon's own default is 80px; the box here is 40. Setting height on the
+       element beats its :host rule, and its svg follows at width auto. */
+    .bd-awards-laurel-icon bd-laurel-icon {
+      height: var(--spacing-40);
     }
 
     .bd-awards-trust-intro .bd-awards-subtext {
@@ -286,9 +343,7 @@ export const awardsCSS = css`
     }
 
     .bd-awards-bar {
-      // flex-direction: column;
       align-items: center;
-      // gap: var(--spacing-16);
     }
 
     /* Hide desktop rows (3+3+1), show mobile rows (3+4) */
@@ -305,10 +360,13 @@ export const awardsCSS = css`
       width: 100%;
     }
 
-    /* Mobile badge height — half of desktop */
-    .bd-awards-badge bd-icon {
-      --bd-icon-h: var(--spacing-32);
-      --bd-icon-w: auto;
+    /* Mobile badge height — half of desktop. The award elements render into
+       light DOM, so their svg is reachable from here; height + width auto
+       keeps each mark's aspect ratio. Replaces a rule that sized the local
+       bd-icon wrapper. */
+    .bd-awards-badge svg {
+      height: var(--spacing-32);
+      width: auto;
     }
 
     .bd-awards-lower {

package/src/components/awards/awards.js

@@ -1,6 +1,7 @@
 // awards.js - varianta cu Shadow DOM (ca la celelalte componente)
-import { LitElement, html } from "lit";
-import { tokens } from "../../tokens/tokens.js";
+import { LitElement, html, nothing } from "lit";
+// Installs the design tokens into document scope; see src/tokens/tokens.js
+import "../../tokens/tokens.js";
 import "../icons/analysis-icon.js";
 import "../icons/av-comparatives-icon.js";
 import "../icons/best-brands-icon.js";
@@ -11,7 +12,11 @@ import "../icons/pc-mag-business-icon.js";
 import "../icons/pc-mag-icon.js";
 import "../icons/pc-mag-readers-icon.js";
 import "../icons/top-product-icon.js";
+import "../heading/heading.js";
+import "../paragraph/paragraph.js";
 import { awardsCSS } from "./awards.css.js";
+import { ensembleCSS } from "../shared/ensemble.css.js";
+import { below } from "../shared/token-scales.js";
 
 const ICON_RENDERERS = {
   "bd-pc-mag-icon"          : () => html`<bd-pc-mag-icon></bd-pc-mag-icon>`,
@@ -27,6 +32,29 @@ const ICON_RENDERERS = {
 
 export class AwardsSection extends LitElement {
   static properties = {
+    /**
+     * Which content this section renders.
+     *
+     *   full     the trust banner, the award bar, the secret section and the
+     *            feature cards
+     *   summary  the trust banner and the award bar only
+     *
+     * It answers what is rendered, not what the thing used to be called. This
+     * was a second element, bd-awards-section-light, until P6E.1B: a fork of
+     * this component that stopped after the award bar. Its own Storybook page
+     * described it that way -- "renders only the trust banner and award badges
+     * -- without the secret section or feature cards" -- so the difference was
+     * always content scope, and is now said in one word instead of in a second
+     * custom element.
+     *
+     * The 48px of block padding that comes with `summary` is not a separate
+     * visual treatment and does not get its own axis. Measured on the fork:
+     * the banner sat 48px from the top and the bar 48px from the bottom,
+     * because nothing followed the bar to give the section its rhythm. With
+     * the lower content present that padding would be wrong, which is exactly
+     * what makes it a consequence of the scope rather than a theme.
+     */
+    content       : { type: String, reflect: true },
     tagline       : { type: String },
     headline      : { type: String },
     subtext       : { type: String },
@@ -38,15 +66,16 @@ export class AwardsSection extends LitElement {
     _featureNarrow: { state: true }
   };
 
-  static styles = [tokens, awardsCSS];
+  static styles = [ensembleCSS, awardsCSS];
 
-  _mql599 = null;
-  _mql767 = null;
-  _on599 = () => { this._narrow = this._mql599?.matches ?? false; };
-  _on767 = () => { this._featureNarrow = this._mql767?.matches ?? false; };
+  _mqlSm = null;
+  _mqlMd = null;
+  _onSm = () => { this._narrow = this._mqlSm?.matches ?? false; };
+  _onMd = () => { this._featureNarrow = this._mqlMd?.matches ?? false; };
 
   constructor() {
     super();
+    this.content       = "full";
     this.tagline       = "You're Making A Great Choice";
     this.headline      = "World-class security software you can trust. Always.";
     this.subtext       = "We've added 25 new accolades in the past two years to the hundreds we have won since we started in 2001 - so you know you are in good hands.";
@@ -83,19 +112,19 @@ export class AwardsSection extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     if (typeof window !== "undefined" && window.matchMedia) {
-      this._mql599        = window.matchMedia("(max-width: 599px)");
-      this._mql767        = window.matchMedia("(max-width: 767px)");
-      this._narrow        = this._mql599.matches;
-      this._featureNarrow = this._mql767.matches;
-      this._mql599.addEventListener("change", this._on599);
-      this._mql767.addEventListener("change", this._on767);
+      this._mqlSm         = window.matchMedia(below('sm'));
+      this._mqlMd         = window.matchMedia(below('md'));
+      this._narrow        = this._mqlSm.matches;
+      this._featureNarrow = this._mqlMd.matches;
+      this._mqlSm.addEventListener("change", this._onSm);
+      this._mqlMd.addEventListener("change", this._onMd);
     }
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this._mql599?.removeEventListener("change", this._on599);
-    this._mql767?.removeEventListener("change", this._on767);
+    this._mqlSm?.removeEventListener("change", this._onSm);
+    this._mqlMd?.removeEventListener("change", this._onMd);
   }
 
   _renderBadge(award) {
@@ -109,6 +138,26 @@ export class AwardsSection extends LitElement {
     `;
   }
 
+  /* The narrow branches below change visual-level, not as.
+
+     They used to change `as`, which made the document outline depend on the
+     viewport: measured on Modules/Awards Section, the same content rendered
+     h6/h4 at 375 and 576 and h4/h3 from 768 up, so a reader on a phone got a
+     different heading structure from a reader on a laptop -- and the narrow
+     version put feature titles at h6 directly under an h4, skipping h5.
+
+     CLAUDE.md already separates these two questions: `as` is the document
+     outline, which the composing page owns, and `visual-level` is the type
+     role, which the component owns. A responsive size change belongs to the
+     second. The outline now holds at the wider levels -- h3 for the headline
+     and the secret-section title, h4 for feature titles -- at every width, and
+     the smaller rendering at narrow widths is expressed as the type role it
+     always was.
+
+     Nothing about the narrow layout changes visually: h6 as a visual-level
+     resolves to the same type role the h6 element resolved to. The content
+     branches stay as they are; the narrow headline genuinely renders different
+     copy. */
   _renderFeature(f) {
     const narrow = this._featureNarrow;
     const iconFn = ICON_RENDERERS[f.tag];
@@ -119,11 +168,11 @@ export class AwardsSection extends LitElement {
         </div>
         <div class="bd-awards-feature-text">
           ${narrow
-            ? html`<bd-h as="h6" fontWeight="700" class="bd-awards-feature-title">${f.title}</bd-h>`
-            : html`<bd-h as="h4" fontWeight="700" class="bd-awards-feature-title">${f.title}</bd-h>`}
+            ? html`<bd-h as="h4" visual-level="h6" fontWeight="bold" class="bd-awards-feature-title">${f.title}</bd-h>`
+            : html`<bd-h as="h4" fontWeight="bold" class="bd-awards-feature-title">${f.title}</bd-h>`}
           ${narrow
-            ? html`<bd-p kind="small" class="bd-awards-feature-desc">${f.description}</bd-p>`
-            : html`<bd-p kind="regular" class="bd-awards-feature-desc">${f.description}</bd-p>`}
+            ? html`<bd-p variant="small" class="bd-awards-feature-desc">${f.description}</bd-p>`
+            : html`<bd-p variant="regular" class="bd-awards-feature-desc">${f.description}</bd-p>`}
         </div>
       </article>
     `;
@@ -131,20 +180,30 @@ export class AwardsSection extends LitElement {
 
   render() {
     const narrow = this._narrow;
+    /* `summary` needs the section to carry its own block padding, because
+       nothing follows the award bar. `full` must not get that wrapper: its
+       rhythm comes from the lower content, and adding padding there would move
+       a component this phase is not allowed to move. */
+    return this.content === "summary"
+      ? html`<div class="bd-ensemble bd-awards-root">${this._renderUpper(narrow)}</div>`
+      : html`${this._renderUpper(narrow)}${this._renderLower(narrow)}`;
+  }
+
+  _renderUpper(narrow) {
     return html`
       <div class="bd-awards-trust-banner">
         <div class="bd-awards-trust-intro">
           <span class="bd-awards-laurel-icon" aria-hidden="true">
-            <bd-laurel-icon size="80"></bd-laurel-icon>
+            <bd-laurel-icon></bd-laurel-icon>
           </span>
 
           ${narrow
-            ? html`<bd-p kind="small" class="bd-awards-tagline">${this.tagline}</bd-p>`
-            : html`<bd-p kind="large" class="bd-awards-tagline">${this.tagline}</bd-p>`}
+            ? html`<bd-p variant="small" class="bd-awards-tagline">${this.tagline}</bd-p>`
+            : html`<bd-p variant="large" class="bd-awards-tagline">${this.tagline}</bd-p>`}
 
           ${narrow
             ? html`
-                <bd-h as="h4" class="bd-awards-headline">
+                <bd-h as="h3" visual-level="h4" class="bd-awards-headline">
                   <span class="bd-awards-headline-line">World-class security</span>
                   <span class="bd-awards-headline-line">software you can trust.</span>
                   <span class="bd-awards-headline-line">Always.</span>
@@ -153,8 +212,8 @@ export class AwardsSection extends LitElement {
             : html`<bd-h as="h3" class="bd-awards-headline">${this.headline}</bd-h>`}
 
           ${narrow
-            ? html`<bd-p kind="small" class="bd-awards-subtext">${this.subtext}</bd-p>`
-            : html`<bd-p kind="regular" class="bd-awards-subtext">${this.subtext}</bd-p>`}
+            ? html`<bd-p variant="small" class="bd-awards-subtext">${this.subtext}</bd-p>`
+            : html`<bd-p variant="regular" class="bd-awards-subtext">${this.subtext}</bd-p>`}
         </div>
 
         <div class="bd-awards-bar" role="list" aria-label="Industry awards">
@@ -167,14 +226,29 @@ export class AwardsSection extends LitElement {
         </div>
       </div>
 
+    `;
+  }
+
+  /**
+   * The secret section and the feature cards, or nothing at all.
+   *
+   * Nothing at all means no element, not an empty one. The fork rendered an
+   * empty `.bd-awards-lower`, which stayed a flex child of its wrapper and so
+   * still took the wrapper's 48px gap -- and that is why the fork also carried
+   * a `gap: 0` override. Omitting the element removes both the phantom gap and
+   * the reason for the override.
+   */
+  _renderLower(narrow) {
+    if (this.content === "summary") return nothing;
+    return html`
       <div class="bd-awards-lower">
         <section class="bd-awards-secret-section">
           ${narrow
-            ? html`<bd-h as="h4" class="bd-awards-section-title">${this.secretTitle}</bd-h>`
+            ? html`<bd-h as="h3" visual-level="h4" class="bd-awards-section-title">${this.secretTitle}</bd-h>`
             : html`<bd-h as="h3" class="bd-awards-section-title">${this.secretTitle}</bd-h>`}
           ${narrow
-            ? html`<bd-p kind="small" class="bd-awards-section-subtext">${this.secretSubtext}</bd-p>`
-            : html`<bd-p kind="regular" class="bd-awards-section-subtext">${this.secretSubtext}</bd-p>`}
+            ? html`<bd-p variant="small" class="bd-awards-section-subtext">${this.secretSubtext}</bd-p>`
+            : html`<bd-p variant="regular" class="bd-awards-section-subtext">${this.secretSubtext}</bd-p>`}
         </section>
 
         <div class="bd-awards-features-grid">

package/src/components/awards/awards.stories.js

@@ -6,7 +6,7 @@ import "../paragraph/paragraph.js";
 import "./awards.js";
 
 export default {
-  title     : "Components/Awards Section",
+  title     : "Modules/Awards Section",
   component : "bd-awards-section",
   tags      : ["autodocs"],
   parameters: {

package/src/components/back/back.css.js

@@ -1,4 +1,9 @@
-import { css } from "lit";
+import { css, unsafeCSS } from "lit";
+/* unsafeCSS is how a Lit css`` template accepts a computed string. The
+   value is not arbitrary: below() resolves a name from the closed
+   breakpoint set and throws on anything else, so the only strings that
+   reach here are the ones the scale produced. */
+import { below } from "../shared/token-scales.js";
 
 export default css`
   @layer bd-components {
@@ -6,49 +11,73 @@ export default css`
       all: unset;
       display: inline-flex;
       align-items: center;
-      gap: 0.5rem;
-      padding: 0.75rem 1rem;
+      gap: var(--spacing-8);
+      padding: var(--spacing-12) var(--spacing-16);
       font-family: var(--typography-fontFamily-sans);
       font-size: var(--typography-body-regular-fontSize);
+      /* no role: the weight of a control -- see button.css.js's .button--bold,
+         and note no role carries bold at a body size. */
       font-weight: var(--typography-fontWeight-bold);
-      // color: var(--color-neutral-1000);
+      color: var(--color-text-primary);
       cursor: pointer;
-      border-radius: 0.5rem;
-      transition: all 0.2s ease;
+      border-radius: var(--radius-lg);
+      /* the properties that change, not all */
+      transition: background-color var(--transition-duration-normal) var(--transition-easing-smooth),
+        color var(--transition-duration-normal) var(--transition-easing-smooth);
       user-select: none;
     }
 
+    /* The ink does not change on hover — the background does. It used to go to
+       pure black, which moved this control off the single ink bd-h, bd-p,
+       bd-display and bd-li were unified on, for no gain: the fill already
+       carries the hover, and neutral-900 to neutral-1000 is a step nobody can
+       see except as an inconsistency next to a heading. */
     .bd-back:hover {
-      background-color: var(--color-neutral-100);
-      color: var(--color-neutral-1000);
+      background-color: var(--color-surface-muted);
     }
 
     .bd-back:active {
-      background-color: var(--color-neutral-200);
+      background-color: var(--color-surface-pressed);
       transform: translateY(1px);
     }
 
+    /* No border-radius here. The ring is a box-shadow and already follows the
+       shape of what it sits on, and this control has a --radius-lg of its own —
+       setting --focus-outline-radius as well pulled its corners in from 8px to
+       4px for as long as it was focused. That token is the default for
+       elements with no radius, which is what Foundations/Focus says. */
     .bd-back:focus-visible {
-      outline: 2px solid var(--color-neutral-1000);
-      outline-offset: 2px;
+      outline: none;
+      box-shadow: var(--focus-outline-primary);
     }
 
-    .bd-back-arrow {
-      font-size: 1.125em;
-      font-weight: var(--typography-fontWeight-bold);
-      /* Săgeată mai simplă și mai groasă */
-      transform: scale(1.2);
-      letter-spacing: -0.05em;
-    }
+    /* No .bd-back-arrow rule. The arrow was a text glyph once and is an inline
+       svg now, so the class this styled is in no template: measured 0 matches
+       across 8 bd-back shadow roots in 604 built stories. The four
+       declarations it carried -- an em font-size, a bold weight, a 1.2 scale
+       and a tighter tracking -- were all typographic properties of a character
+       that is no longer there. The svg takes its colour from currentColor and
+       its size from its own width and height. */
 
     .bd-back-label {
-      line-height: 1;
+      line-height: var(--typography-lineHeight-none);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .bd-back {
+        transition: none;
+      }
+      .bd-back:active {
+        transform: none;
+      }
     }
 
-    /* Mobile-first responsive */
-    @media (max-width: 768px) {
+    /* Narrower than md. The complement comes from below() rather than being
+       written out: a max-width of 768px also matches at exactly 768px, where
+       --breakpoint-md says the wider layout begins. */
+    @media ${unsafeCSS(below('md'))} {
       .bd-back {
-        padding: 0.875rem 1rem;
+        padding: var(--spacing-14) var(--spacing-16);
         font-size: var(--typography-body-large-fontSize);
       }
     }