/*
 * Signal and Echo design system: web component kit (contract v1, with the v1.1 components below).
 *
 * Load order in a game: dist/web/tokens.css, then this file, then the game's own CSS.
 * Or only what the game uses: dist/web/themes/<id>.css (its one theme) instead of tokens.css, and
 * dist/web/parts/core.css plus parts/<pack>.css for each v1.1 pack in its $packs (input, hud,
 * menus, map, connect) and parts/<group>.css for each v1.2 core group it uses (forms: stepper,
 * hold-button, assign-slot; layout: content-card, sheet, grid, carousel, pagination-dots,
 * action-bar, nav-rail, data-table, avatar, setting-detail; feedback: notice, spinner,
 * empty-state, change-readout, chart, stat, stat-breakdown; overlays: popover, context-menu,
 * timed-confirm, keyword-link, help-mark) instead of this file. The v1.2 amends and patterns
 * are in core. The parts are this file cut at its "sds-part" markers; a new rule goes inside
 * the part it belongs to. v1.2 pack kits are separate files (dist/web/packs/<pack>.css).
 * Every value here is a token (var(--sds-...)); the only literals are 0, 1px hairlines,
 * percentages, em multiples and unitless numbers.
 *
 * HOW A GAME OVERRIDES THE KIT: the four levels from the intent.
 *
 *   Level 1, values. Set token values for your theme and change nothing else:
 *       :root[data-sds-theme="my-game"] { --sds-color-accent: ...; --sds-button-radius: ...; }
 *     (In the studio repo a theme is a file in tokens/themes/; the build writes the CSS.)
 *
 *   Level 2, skin. Restyle a component in your own CSS file, keeping its class names,
 *     data attributes and states. Every rule in this file sits in a cascade layer
 *     (sds.reset, sds.components), and unlayered CSS beats every layer whatever its
 *     specificity, so a plain `.sds-button { ... }` in the game wins. No !important.
 *     If the game uses layers too, declare the order first: @layer sds, game;
 *
 *   Level 3, replace. Ship your own component under the same name (.sds-button with the
 *     same variants, sizes and states), and do not load this rule set for it. It must keep
 *     the contract: a visible :focus-visible ring, a hit area of var(--sds-touch-target),
 *     keyboard and controller use, and its sound slots (sds.js plays them for any element
 *     with the contract class or a data-sds-sound attribute).
 *
 *   Level 4, add. New components or roles the studio lacks, prefixed with the game's name:
 *       .dreamsong-scale-picker { ... }   --dreamsong-color-chord: ...;
 *
 * EXAMPLE, level 2: Smudge's Escape skins buttons as marker on paper.
 *
 *   .sds-button {
 *     border: var(--sds-border-thick) solid var(--sds-color-text);
 *     border-radius: var(--sds-radius-sm) var(--sds-radius-lg) var(--sds-radius-md) var(--sds-radius-lg);
 *     box-shadow: var(--sds-shadow-sm);
 *     font-family: var(--sds-font-display);
 *   }
 *   .sds-button[data-variant="primary"] { background: url("art/marker-fill.png") center / 100% 100%; }
 *   .sds-button:active { box-shadow: none; transform: translate(var(--sds-space-1), var(--sds-space-1)); }
 *
 * Specificity: kit selectors stay at one class plus attributes; variant and state selectors
 * use :where() so source order, not specificity, decides between them. Page-wide defaults
 * (the base font, [hidden]) are :where() rules with zero specificity.
 *
 * THE RULE: a kit class sets only what its contract needs (size, color, the focus ring, the
 * hit area) and never a layout property a game does not expect (no white-space, float,
 * vertical-align on text buttons, display on hosts the game lays out, UA max-width resets).
 *
 * LEVEL 2 OVER AN EXISTING SKIN: a game that adds .sds-button or .sds-dialog to markup it has
 * already styled gets these kit defaults too. Give any of them back in the game's CSS:
 *     .sds-button::before { content: none; }       the touch-target hit area (reaches past a
 *                                                  button smaller than --sds-touch-target)
 *     .sds-button { letter-spacing: normal; }      the theme's label tracking
 *     .sds-button { position: static; }            only with the hit area off: it anchors ::before
 *     .sds-dialog[open], .sds-dialog[open]::backdrop { animation: none; }   the grow-in
 *   [hidden] always hides a kit element (display: none !important in sds.reset): the kit hides
 *   controls with it, and the grown-up gate depends on it (issue #70).
 *
 * Sizes: no data-size means md, no data-variant means the first variant in the contract.
 *
 * v1.2 (contract-v1.md "v1.2 additions"): the core components in the forms, layout, feedback
 * and overlays parts, the amends (marked "@1.2" in the claims) and the drag-and-drop and
 * input-mode looks follow the same rules: one class plus :where() states, tokens only, the
 * touch target as hit area, a visible :focus-visible ring, reduced motion, and no layout
 * property on a host a game lays out. Accent text, lines and marks use color.accent-text;
 * color.accent is a fill under color.on-accent text (#75).
 */

/* sds-claims: stepper content-card sheet grid spinner empty-state pagination-dots action-bar notice data-table change-readout hold-button stat-breakdown keyword-link help-mark carousel avatar context-menu popover assign-slot nav-rail chart timed-confirm setting-detail stat */
/* sds-claims: slider@1.2 toast@1.2 tabs@1.2 tooltip@1.2 list-item@1.2 progress-bar@1.2 icon-button@1.2 caption@1.2 resource-bar@1.2 badge@1.2 panel@1.2 */

@layer sds.reset, sds.components;

/* ------------------------------------------------------------------ reset */

@layer sds.reset {
  :where(.sds-button, .sds-icon-button, .sds-toggle, .sds-slider, .sds-cycle, .sds-cycle-step,
    .sds-cycle-value, .sds-tabs, .sds-tab, .sds-panel, .sds-dialog, .sds-toast, .sds-toast-region,
    .sds-tooltip, .sds-meter),
  :where(.sds-button, .sds-icon-button, .sds-toggle, .sds-cycle-step, .sds-tab)::before,
  :where(.sds-toggle)::after {
    box-sizing: border-box;
  }

  :where(.sds-button, .sds-icon-button, .sds-toggle, .sds-cycle-step, .sds-tab) {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
  }

  :where(.sds-slider, .sds-meter) {
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
  }

  :where(.sds-dialog) {
    margin: auto;
    padding: 0;
    border: 0;
    color: inherit;
  }

  /* [hidden] hides every kit element: a kit display rule (.sds-button's inline-flex) would
     otherwise beat the UA's [hidden] { display: none } and show a hidden control, such as the
     grown-up gate's Continue button (issue #70). */
  :where([class*="sds-"])[hidden] {
    display: none !important;
  }
}

/* ------------------------------------------------------------- components */

@layer sds.components {
  /* --- base text: what a game puts inside a kit container reads in the theme's body font and
     text color, headings in its display font (issue #61). Zero specificity: any game rule wins. */

  :where(.sds-screen, [data-sds-screen], .sds-panel, .sds-dialog, .sds-list, .sds-toast-region,
    .sds-captions, .sds-field-row, .sds-contact-card, .sds-feedback-form, .sds-newsletter-signup,
    .sds-share-sheet, .sds-rating-prompt) {
    font-family: var(--sds-font-body);
    color: var(--sds-color-text);
  }

  :where(.sds-screen, [data-sds-screen], .sds-panel, .sds-dialog) :where(h1, h2, h3) {
    font-family: var(--sds-font-display);
  }

  /* --- shared: pressable controls ------------------------------------- */

  .sds-button,
  .sds-icon-button,
  .sds-toggle,
  .sds-cycle-step,
  .sds-tab {
    position: relative;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    transition:
      background-color var(--sds-motion-fast) var(--sds-ease-standard),
      border-color var(--sds-motion-fast) var(--sds-ease-standard),
      color var(--sds-motion-fast) var(--sds-ease-standard),
      box-shadow var(--sds-motion-fast) var(--sds-ease-standard),
      transform var(--sds-motion-fast) var(--sds-ease-standard);
  }

  /* Hit area: at least the touch target, centered, without changing layout. */
  .sds-button::before,
  .sds-icon-button::before,
  .sds-toggle::before,
  .sds-cycle-step::before,
  .sds-tab::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, var(--sds-touch-target));
    height: max(100%, var(--sds-touch-target));
    transform: translate(-50%, -50%);
  }

  /* Focus: always visible on keyboard and controller focus. */
  .sds-button:focus-visible,
  .sds-icon-button:focus-visible,
  .sds-toggle:focus-visible,
  .sds-cycle-step:focus-visible,
  .sds-tab:focus-visible,
  .sds-slider:focus-visible {
    outline: var(--sds-focus-ring-width) solid var(--sds-color-focus);
    outline-offset: var(--sds-focus-ring-offset);
  }

  /* --- button ----------------------------------------------------------- */

  .sds-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sds-space-3);
    border: var(--sds-border-thin) solid transparent;
    border-radius: var(--sds-button-radius);
    font-family: var(--sds-font-body);
    font-weight: var(--sds-type-label-weight);
    letter-spacing: var(--sds-type-label-tracking);
    line-height: var(--sds-type-label-line-height);
    text-decoration: none;
  }

  .sds-button:where(:not([data-size]), [data-size="md"]) {
    min-height: var(--sds-button-md-height);
    padding: 0 var(--sds-button-md-padding-x);
    font-size: calc(var(--sds-button-md-font-size) * var(--sds-type-scale));
  }

  .sds-button:where([data-size="sm"]) {
    min-height: var(--sds-button-sm-height);
    padding: 0 var(--sds-button-sm-padding-x);
    font-size: calc(var(--sds-button-sm-font-size) * var(--sds-type-scale));
  }

  .sds-button:where([data-size="lg"]) {
    min-height: var(--sds-button-lg-height);
    padding: 0 var(--sds-button-lg-padding-x);
    font-size: calc(var(--sds-button-lg-font-size) * var(--sds-type-scale));
  }

  .sds-button .sds-icon {
    width: 1.25em;
    height: 1.25em;
  }

  /* --- icon-button ------------------------------------------------------ */

  .sds-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border: var(--sds-border-thin) solid transparent;
    border-radius: var(--sds-radius-pill);
    vertical-align: middle;
  }

  .sds-icon-button:where(:not([data-size]), [data-size="md"]) {
    width: var(--sds-icon-button-md-size);
    height: var(--sds-icon-button-md-size);
  }

  .sds-icon-button:where([data-size="sm"]) {
    width: var(--sds-icon-button-sm-size);
    height: var(--sds-icon-button-sm-size);
  }

  .sds-icon-button:where([data-size="lg"]) {
    width: var(--sds-icon-button-lg-size);
    height: var(--sds-icon-button-lg-size);
  }

  .sds-icon-button .sds-icon {
    width: 50%;
    height: 50%;
  }

  /* --- button and icon-button variants ---------------------------------- */

  :is(.sds-button, .sds-icon-button):where(:not([data-variant]), [data-variant="primary"]) {
    background-color: var(--sds-color-accent);
    color: var(--sds-color-on-accent);
  }

  :is(.sds-button, .sds-icon-button):where([data-variant="secondary"]) {
    background-color: var(--sds-color-surface-raised);
    border-color: var(--sds-color-line-strong);
    color: var(--sds-color-text);
  }

  :is(.sds-button, .sds-icon-button):where([data-variant="ghost"]) {
    background-color: transparent;
    color: var(--sds-color-text);
  }

  .sds-button:where([data-variant="danger"]) {
    background-color: var(--sds-color-danger);
    color: var(--sds-color-on-danger);
  }

  @media (hover: hover) {
    :is(.sds-button, .sds-icon-button):where(:not([data-variant]), [data-variant="primary"]):where(:hover:not(:disabled, [aria-disabled="true"])) {
      background-color: var(--sds-color-accent-strong);
      box-shadow: var(--sds-glow-sm);
    }

    :is(.sds-button, .sds-icon-button):where([data-variant="secondary"]):where(:hover:not(:disabled, [aria-disabled="true"])) {
      background-color: color-mix(in srgb, var(--sds-color-accent) 14%, var(--sds-color-surface-raised));
      border-color: var(--sds-color-accent-text);
    }

    :is(.sds-button, .sds-icon-button):where([data-variant="ghost"]):where(:hover:not(:disabled, [aria-disabled="true"])) {
      background-color: color-mix(in srgb, var(--sds-color-accent) 14%, transparent);
    }

    .sds-button:where([data-variant="danger"]):where(:hover:not(:disabled, [aria-disabled="true"])) {
      background-color: color-mix(in srgb, var(--sds-color-danger) 82%, var(--sds-color-text));
    }
  }

  /* Pressed: the native :active state, or a latched aria-pressed toggle button. */
  :is(.sds-button, .sds-icon-button):where(:active:not(:disabled, [aria-disabled="true"])) {
    box-shadow: none;
    transform: scale(0.97);
  }

  :is(.sds-button, .sds-icon-button):where([aria-pressed="true"]) {
    box-shadow: inset 0 0 0 var(--sds-border-thick) var(--sds-color-accent-text);
  }

  :is(.sds-button, .sds-icon-button):where([data-variant="ghost"], [data-variant="secondary"]):where([aria-pressed="true"]) {
    background-color: color-mix(in srgb, var(--sds-color-accent) 22%, transparent);
    color: var(--sds-color-text);
  }

  :is(.sds-button, .sds-icon-button):where(:disabled, [aria-disabled="true"]) {
    background-color: var(--sds-color-disabled);
    border-color: transparent;
    color: var(--sds-color-on-disabled);
    box-shadow: none;
    cursor: not-allowed;
  }

  :is(.sds-button, .sds-icon-button):where([data-variant="ghost"]):where(:disabled, [aria-disabled="true"]) {
    background-color: transparent;
  }

  /* --- toggle (button role="switch" aria-checked) ------------------------ */

  .sds-toggle {
    display: inline-block;
    flex: none;
    width: var(--sds-toggle-width);
    height: var(--sds-toggle-height);
    border: var(--sds-border-thin) solid var(--sds-color-line-strong);
    border-radius: var(--sds-radius-pill);
    background-color: var(--sds-color-surface);
    vertical-align: middle;
  }

  .sds-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--sds-space-1);
    width: calc(var(--sds-toggle-height) - 2 * var(--sds-space-1) - 2 * var(--sds-border-thin));
    height: calc(var(--sds-toggle-height) - 2 * var(--sds-space-1) - 2 * var(--sds-border-thin));
    border-radius: 50%;
    background-color: var(--sds-color-text-muted);
    box-shadow: var(--sds-shadow-sm);
    transform: translate(0, -50%);
    transition:
      transform var(--sds-motion-base) var(--sds-ease-emphasis),
      background-color var(--sds-motion-fast) var(--sds-ease-standard);
  }

  .sds-toggle:where([aria-checked="true"]) {
    background-color: var(--sds-color-accent);
    border-color: var(--sds-color-accent-text);
  }

  .sds-toggle:where([aria-checked="true"])::after {
    background-color: var(--sds-color-on-accent);
    transform: translate(calc(var(--sds-toggle-width) - var(--sds-toggle-height)), -50%);
  }

  @media (hover: hover) {
    .sds-toggle:where(:hover:not(:disabled, [aria-disabled="true"])) {
      border-color: var(--sds-color-accent-text);
    }

    .sds-toggle:where(:not([aria-checked="true"])):where(:hover:not(:disabled, [aria-disabled="true"]))::after {
      background-color: var(--sds-color-text);
    }

    .sds-toggle:where([aria-checked="true"]):where(:hover:not(:disabled, [aria-disabled="true"])) {
      background-color: var(--sds-color-accent-strong);
    }
  }

  .sds-toggle:where(:active:not(:disabled, [aria-disabled="true"]))::after {
    width: calc(var(--sds-toggle-height) - 2 * var(--sds-space-1) - 2 * var(--sds-border-thin) + var(--sds-space-2));
  }

  .sds-toggle:where([aria-checked="true"]):where(:active:not(:disabled, [aria-disabled="true"]))::after {
    transform: translate(calc(var(--sds-toggle-width) - var(--sds-toggle-height) - var(--sds-space-2)), -50%);
  }

  .sds-toggle:where(:disabled, [aria-disabled="true"]) {
    background-color: var(--sds-color-disabled);
    border-color: transparent;
    cursor: not-allowed;
  }

  .sds-toggle:where(:disabled, [aria-disabled="true"])::after {
    background-color: var(--sds-color-on-disabled);
    box-shadow: none;
  }

  /* --- slider (input type=range) ---------------------------------------
     Engine pseudo-elements stay in separate rules: one unknown selector drops a whole rule. */

  .sds-slider {
    display: block;
    width: 100%;
    min-width: calc(var(--sds-touch-target) * 3);
    height: var(--sds-touch-target);
    border-radius: var(--sds-radius-sm);
    background: transparent;
    cursor: pointer;
  }

  .sds-slider::-webkit-slider-runnable-track {
    height: var(--sds-slider-track);
    border-radius: var(--sds-radius-pill);
    background-color: var(--sds-color-line);
  }

  .sds-slider::-moz-range-track {
    height: var(--sds-slider-track);
    border-radius: var(--sds-radius-pill);
    background-color: var(--sds-color-line);
  }

  .sds-slider::-moz-range-progress {
    height: var(--sds-slider-track);
    border-radius: var(--sds-radius-pill);
    background-color: var(--sds-color-accent);
  }

  .sds-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: var(--sds-slider-thumb);
    height: var(--sds-slider-thumb);
    margin-top: calc((var(--sds-slider-track) - var(--sds-slider-thumb)) / 2);
    border: var(--sds-border-thick) solid var(--sds-color-surface);
    border-radius: 50%;
    background-color: var(--sds-color-accent-text);
    box-shadow: var(--sds-shadow-sm);
    transition:
      transform var(--sds-motion-fast) var(--sds-ease-standard),
      background-color var(--sds-motion-fast) var(--sds-ease-standard);
  }

  .sds-slider::-moz-range-thumb {
    box-sizing: border-box;
    width: var(--sds-slider-thumb);
    height: var(--sds-slider-thumb);
    border: var(--sds-border-thick) solid var(--sds-color-surface);
    border-radius: 50%;
    background-color: var(--sds-color-accent-text);
    box-shadow: var(--sds-shadow-sm);
    transition:
      transform var(--sds-motion-fast) var(--sds-ease-standard),
      background-color var(--sds-motion-fast) var(--sds-ease-standard);
  }

  @media (hover: hover) {
    .sds-slider:where(:hover:not(:disabled))::-webkit-slider-thumb {
      box-shadow: var(--sds-glow-sm);
      transform: scale(1.1);
    }

    .sds-slider:where(:hover:not(:disabled))::-moz-range-thumb {
      box-shadow: var(--sds-glow-sm);
      transform: scale(1.1);
    }
  }

  .sds-slider:where(:active:not(:disabled))::-webkit-slider-thumb {
    transform: scale(1.2);
  }

  .sds-slider:where(:active:not(:disabled))::-moz-range-thumb {
    transform: scale(1.2);
  }

  .sds-slider:where(:disabled) {
    cursor: not-allowed;
  }

  .sds-slider:where(:disabled)::-webkit-slider-runnable-track {
    background-color: var(--sds-color-disabled);
  }

  .sds-slider:where(:disabled)::-moz-range-track {
    background-color: var(--sds-color-disabled);
  }

  .sds-slider:where(:disabled)::-moz-range-progress {
    background-color: var(--sds-color-on-disabled);
  }

  .sds-slider:where(:disabled)::-webkit-slider-thumb {
    background-color: var(--sds-color-on-disabled);
    box-shadow: none;
  }

  .sds-slider:where(:disabled)::-moz-range-thumb {
    background-color: var(--sds-color-on-disabled);
    box-shadow: none;
  }

  /* --- cycle: [previous] value [next] ----------------------------------- */

  .sds-cycle {
    display: inline-grid;
    grid-template-columns: auto minmax(calc(var(--sds-space-8) * 2), 1fr) auto;
    align-items: center;
    min-height: var(--sds-button-md-height);
    border: var(--sds-border-thin) solid var(--sds-color-line-strong);
    border-radius: var(--sds-button-radius);
    background-color: var(--sds-color-surface-raised);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
    transition: border-color var(--sds-motion-fast) var(--sds-ease-standard);
  }

  .sds-cycle-value {
    padding: 0 var(--sds-space-3);
    font-size: calc(var(--sds-type-label-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-label-weight);
    letter-spacing: var(--sds-type-label-tracking);
    text-align: center;
    white-space: nowrap;
  }

  .sds-cycle-step {
    display: grid;
    place-items: center;
    align-self: stretch;
    width: var(--sds-button-md-height);
    border-radius: var(--sds-button-radius);
    color: var(--sds-color-text-muted);
  }

  .sds-cycle-step .sds-icon {
    width: 1.25em;
    height: 1.25em;
  }

  @media (hover: hover) {
    .sds-cycle:where(:hover:not([aria-disabled="true"])) {
      border-color: var(--sds-color-accent-text);
    }

    .sds-cycle-step:where(:hover:not(:disabled)) {
      background-color: color-mix(in srgb, var(--sds-color-accent) 14%, transparent);
      color: var(--sds-color-text);
    }
  }

  .sds-cycle-step:where(:active:not(:disabled)) {
    transform: scale(0.92);
    color: var(--sds-color-text);
  }

  .sds-cycle:where([aria-disabled="true"]) {
    background-color: var(--sds-color-disabled);
    border-color: transparent;
    color: var(--sds-color-on-disabled);
  }

  .sds-cycle-step:where(:disabled) {
    color: var(--sds-color-on-disabled);
    cursor: not-allowed;
  }

  /* --- tabs: .sds-tabs (role="tablist") with .sds-tab[aria-selected] ----- */

  .sds-tabs {
    display: inline-flex;
    gap: var(--sds-space-1);
    max-width: 100%;
    padding: var(--sds-space-1);
    overflow-x: auto;
    border: var(--sds-border-thin) solid var(--sds-color-line);
    border-radius: var(--sds-button-radius);
    background-color: var(--sds-color-surface);
  }

  .sds-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sds-space-2);
    /* The tab itself is the touch target tall: the strip scrolls sideways, and a scroll box
       clips a ::before hit area that reaches past it (issue #71). */
    min-height: max(calc(var(--sds-button-md-height) - 2 * var(--sds-space-1) - 2 * var(--sds-border-thin)), var(--sds-touch-target));
    padding: 0 var(--sds-space-5);
    border-radius: calc(var(--sds-button-radius) - var(--sds-space-1));
    color: var(--sds-color-text-muted);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-label-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-label-weight);
    letter-spacing: var(--sds-type-label-tracking);
    white-space: nowrap;
  }

  .sds-tab::before {
    width: 100%;
  }

  @media (hover: hover) {
    .sds-tab:where(:hover:not(:disabled, [aria-selected="true"])) {
      background-color: color-mix(in srgb, var(--sds-color-text) 8%, transparent);
      color: var(--sds-color-text);
    }
  }

  .sds-tab:where(:active:not(:disabled)) {
    transform: scale(0.97);
  }

  .sds-tab:where([aria-selected="true"]) {
    background-color: var(--sds-color-accent);
    color: var(--sds-color-on-accent);
    box-shadow: var(--sds-shadow-sm);
  }

  .sds-tab:where(:disabled, [aria-disabled="true"]) {
    color: var(--sds-color-on-disabled);
    cursor: not-allowed;
  }

  /* --- panel ------------------------------------------------------------- */

  .sds-panel {
    padding: var(--sds-panel-padding);
    border: var(--sds-border-thin) solid var(--sds-color-line);
    border-radius: var(--sds-panel-radius);
    color: var(--sds-color-text);
  }

  .sds-panel:where(:not([data-variant]), [data-variant="flat"]) {
    background-color: var(--sds-color-surface);
  }

  .sds-panel:where([data-variant="raised"]) {
    background-color: var(--sds-color-surface-raised);
    box-shadow: var(--sds-shadow-md);
  }

  /* --- dialog (native <dialog>, opened with showModal) ------------------- */

  .sds-dialog {
    width: min(var(--sds-dialog-width), calc(100% - 2 * var(--sds-space-5)));
    max-height: calc(100% - 2 * var(--sds-space-6));
    padding: var(--sds-dialog-padding);
    overflow: auto;
    border: var(--sds-border-thin) solid var(--sds-color-line);
    border-radius: var(--sds-dialog-radius);
    background-color: var(--sds-color-surface-raised);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
    box-shadow: var(--sds-shadow-lg);
  }

  .sds-dialog::backdrop {
    background-color: var(--sds-color-overlay);
  }

  .sds-dialog[open] {
    animation: sds-dialog-in var(--sds-motion-base) var(--sds-ease-emphasis);
  }

  .sds-dialog[open]::backdrop {
    animation: sds-fade-in var(--sds-motion-base) var(--sds-ease-standard);
  }

  /* --- toast ------------------------------------------------------------- */

  .sds-toast-region {
    position: fixed;
    right: 0;
    bottom: var(--sds-space-6);
    left: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sds-space-3);
    padding: 0 var(--sds-space-5);
    pointer-events: none;
  }

  .sds-toast {
    display: flex;
    align-items: center;
    gap: var(--sds-space-4);
    max-width: min(var(--sds-dialog-width), 100%);
    min-height: var(--sds-touch-target);
    padding: var(--sds-space-3) var(--sds-space-5);
    border: var(--sds-border-thin) solid var(--sds-color-line);
    border-left: calc(var(--sds-border-thick) * 2) solid var(--sds-color-info);
    border-radius: var(--sds-radius-md);
    background-color: var(--sds-color-surface-raised);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-body-size) * var(--sds-type-scale));
    line-height: var(--sds-type-body-line-height);
    box-shadow: var(--sds-shadow-md);
    pointer-events: auto;
    animation: sds-toast-in var(--sds-motion-base) var(--sds-ease-emphasis);
  }

  .sds-toast .sds-icon {
    width: 1.25em;
    height: 1.25em;
    color: var(--sds-color-info);
  }

  .sds-toast:where([data-variant="info"]) {
    border-left-color: var(--sds-color-info);
  }

  .sds-toast:where([data-variant="success"]) {
    border-left-color: var(--sds-color-success);
  }

  .sds-toast:where([data-variant="success"]) .sds-icon {
    color: var(--sds-color-success);
  }

  .sds-toast:where([data-variant="warning"]) {
    border-left-color: var(--sds-color-warning);
  }

  .sds-toast:where([data-variant="warning"]) .sds-icon {
    color: var(--sds-color-warning);
  }

  .sds-toast:where([data-variant="danger"]) {
    border-left-color: var(--sds-color-danger);
  }

  .sds-toast:where([data-variant="danger"]) .sds-icon {
    color: var(--sds-color-danger);
  }

  .sds-toast[data-leaving] {
    animation: sds-toast-out var(--sds-motion-fast) var(--sds-ease-exit) forwards;
  }

  /* --- tooltip: .sds-tooltip-anchor holds the control and the .sds-tooltip -- */

  .sds-tooltip-anchor {
    position: relative;
    display: inline-flex;
  }

  .sds-tooltip {
    position: absolute;
    bottom: calc(100% + var(--sds-space-3));
    left: 50%;
    z-index: 1000;
    padding: var(--sds-space-2) var(--sds-space-3);
    border-radius: var(--sds-radius-sm);
    background-color: var(--sds-color-text);
    color: var(--sds-color-text-inverse);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-caption-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-caption-weight);
    line-height: var(--sds-type-caption-line-height);
    letter-spacing: var(--sds-type-caption-tracking);
    white-space: nowrap;
    box-shadow: var(--sds-shadow-md);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, var(--sds-space-2));
    transition:
      opacity var(--sds-motion-fast) var(--sds-ease-standard),
      transform var(--sds-motion-fast) var(--sds-ease-standard),
      visibility var(--sds-motion-fast) var(--sds-ease-standard);
  }

  .sds-tooltip-anchor:where(:hover, :focus-within) .sds-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  /* --- meter (native <meter>) ------------------------------------------- */

  .sds-meter {
    display: block;
    width: 100%;
    height: var(--sds-space-4);
    overflow: hidden;
    border: 0;
    border-radius: var(--sds-radius-pill);
    background: var(--sds-color-line);
  }

  .sds-meter::-webkit-meter-inner-element {
    display: block;
  }

  .sds-meter::-webkit-meter-bar {
    height: 100%;
    border: 0;
    border-radius: var(--sds-radius-pill);
    background: var(--sds-color-line);
  }

  .sds-meter::-webkit-meter-optimum-value {
    border-radius: var(--sds-radius-pill);
    background: var(--sds-color-accent);
    transition: inline-size var(--sds-motion-base) var(--sds-ease-standard);
  }

  .sds-meter::-webkit-meter-suboptimum-value {
    border-radius: var(--sds-radius-pill);
    background: var(--sds-color-warning);
  }

  .sds-meter::-webkit-meter-even-less-good-value {
    border-radius: var(--sds-radius-pill);
    background: var(--sds-color-danger);
  }

  .sds-meter::-moz-meter-bar {
    border-radius: var(--sds-radius-pill);
    background: var(--sds-color-accent);
  }

  .sds-meter:-moz-meter-sub-optimum::-moz-meter-bar {
    background: var(--sds-color-warning);
  }

  .sds-meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
    background: var(--sds-color-danger);
  }

  /* default: the optimum, sub-optimum and low colors above follow the native low/high/optimum. */
  .sds-meter:where(:not([data-variant]), [data-variant="default"]) {
    accent-color: var(--sds-color-accent);
  }

  .sds-meter[data-variant="success"]::-webkit-meter-optimum-value,
  .sds-meter[data-variant="success"]::-webkit-meter-suboptimum-value,
  .sds-meter[data-variant="success"]::-webkit-meter-even-less-good-value {
    background: var(--sds-color-success);
  }

  .sds-meter[data-variant="success"]::-moz-meter-bar {
    background: var(--sds-color-success);
  }

  .sds-meter[data-variant="danger"]::-webkit-meter-optimum-value,
  .sds-meter[data-variant="danger"]::-webkit-meter-suboptimum-value,
  .sds-meter[data-variant="danger"]::-webkit-meter-even-less-good-value {
    background: var(--sds-color-danger);
  }

  .sds-meter[data-variant="danger"]::-moz-meter-bar {
    background: var(--sds-color-danger);
  }

  /* --- icon (inline svg with <use>) -------------------------------------- */

  .sds-icon {
    display: inline-block;
    flex: none;
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
    overflow: visible;
  }

  /* --- reduced motion: tokens already set durations to 0ms; drop entrances too */

  @media (prefers-reduced-motion: reduce) {
    .sds-dialog[open],
    .sds-dialog[open]::backdrop,
    .sds-toast,
    .sds-toast[data-leaving] {
      animation: none;
    }
  }

  :root[data-sds-motion="reduce"] .sds-dialog[open],
  :root[data-sds-motion="reduce"] .sds-dialog[open]::backdrop,
  :root[data-sds-motion="reduce"] .sds-toast,
  :root[data-sds-motion="reduce"] .sds-toast[data-leaving] {
    animation: none;
  }

  @keyframes sds-dialog-in {
    from {
      opacity: 0;
      transform: translateY(var(--sds-space-5)) scale(0.96);
    }
  }

  @keyframes sds-fade-in {
    from {
      opacity: 0;
    }
  }

  @keyframes sds-toast-in {
    from {
      opacity: 0;
      transform: translateY(var(--sds-space-5));
    }
  }

  @keyframes sds-toast-out {
    to {
      opacity: 0;
      transform: translateY(var(--sds-space-3));
    }
  }
}

/* ======================================================================
 * Contract v1.1 components. Packs: core, input, hud, menus, map, connect.
 * Every kit builds every pack; a game uses the ones in its theme's $packs.
 *
 * Text sizes multiply by --sds-type-scale (the player's text size); captions do not.
 * States: native selectors first (:checked, :indeterminate, :disabled, [open], :focus-within,
 * [aria-pressed], [aria-invalid]), data-state where HTML has none (listening, conflict, low,
 * critical, locked, copied, sent ...). Parts the contract does not name (-fill, -title ...)
 * are internal to this kit.
 * ====================================================================== */

/* sds-claims: field-row checkbox radio-group select text-input choice-tile section-header divider list-item scroll-area disclosure progress-bar badge chip caption back-button close-button screen-header */
/* sds-claims: keycap rebind-row hud-bar resource-bar counter save-slot-card map-controls */
/* sds-claims: social-links share-sheet contact-card feedback-form rating-prompt newsletter-signup link-row qr-code */

@layer sds.reset {
  :where(.sds-field-row, .sds-checkbox, .sds-radio-group, .sds-radio, .sds-select, .sds-text-input,
    .sds-choice-tile, .sds-list, .sds-list-item, .sds-scroll-area, .sds-disclosure, .sds-progress-bar,
    .sds-badge, .sds-chip, .sds-caption, .sds-back-button, .sds-close-button, .sds-screen-header,
    .sds-keycap, .sds-hud-bar, .sds-resource-bar, .sds-counter, .sds-save-slot-card, .sds-map-controls,
    .sds-social-link, .sds-contact-card, .sds-feedback-form, .sds-rating-prompt, .sds-newsletter-signup,
    .sds-link-row, .sds-qr-code, .sds-reaction),
  :where(.sds-checkbox, .sds-back-button, .sds-close-button, .sds-chip, .sds-social-link, .sds-choice-tile)::before,
  :where(.sds-checkbox, .sds-choice-tile)::after {
    box-sizing: border-box;
  }

  :where(.sds-back-button, .sds-close-button, .sds-choice-tile, .sds-save-slot-card, .sds-chip, .sds-map-controls > button,
    .sds-list-item > button, .sds-chip > button) {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
  }

  :where(.sds-checkbox, .sds-radio > input, .sds-progress-bar, .sds-resource-bar-fill, .sds-resource-bar-trail) {
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
  }

  :where(.sds-radio-group) {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  :where(.sds-list, .sds-qr-code, .sds-section-header, .sds-divider) {
    margin: 0;
    padding: 0;
  }
}

@layer sds.components {
  /* --- shared ------------------------------------------------------------ */

  .sds-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* An input inside a label-shaped control: invisible, but it covers the control, so it takes
     clicks, focus and the arrow keys natively (segmented radios, single tiles, chips, reactions). */
  :is(.sds-radio-group[data-variant="segmented"] .sds-radio, .sds-choice-tile, .sds-chip, .sds-reaction) > input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: inherit;
  }

  .sds-checkbox,
  .sds-radio,
  .sds-select,
  .sds-text-input,
  .sds-choice-tile,
  .sds-list-item > :is(button, a),
  .sds-disclosure > summary,
  .sds-chip,
  .sds-back-button,
  .sds-close-button,
  .sds-save-slot-card,
  .sds-map-controls > button,
  .sds-social-link,
  .sds-link-row,
  .sds-reaction,
  .sds-keycap {
    transition:
      background-color var(--sds-motion-fast) var(--sds-ease-standard),
      border-color var(--sds-motion-fast) var(--sds-ease-standard),
      color var(--sds-motion-fast) var(--sds-ease-standard),
      box-shadow var(--sds-motion-fast) var(--sds-ease-standard),
      transform var(--sds-motion-fast) var(--sds-ease-standard);
  }

  /* Hit area: at least the touch target, centered, without changing layout. */
  .sds-checkbox::after,
  .sds-back-button::before,
  .sds-close-button::before,
  .sds-chip:where([data-variant="filter"])::before,
  .sds-social-link::before,
  .sds-map-controls > button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, var(--sds-touch-target));
    height: max(100%, var(--sds-touch-target));
    transform: translate(-50%, -50%);
  }

  /* Focus: always visible on keyboard and controller focus. */
  .sds-checkbox:focus-visible,
  .sds-select:focus-visible,
  .sds-text-input:focus-visible,
  .sds-choice-tile:focus-visible,
  .sds-list-item > :is(button, a):focus-visible,
  .sds-scroll-area:focus-visible,
  .sds-disclosure > summary:focus-visible,
  .sds-chip:focus-visible,
  .sds-chip > button:focus-visible,
  .sds-back-button:focus-visible,
  .sds-close-button:focus-visible,
  .sds-save-slot-card:focus-visible,
  .sds-map-controls > button:focus-visible,
  .sds-social-link:focus-visible,
  .sds-link-row:focus-visible,
  .sds-contact-address:focus-visible,
  .sds-radio > input:focus-visible,
  .sds-radio-group[data-variant="segmented"] .sds-radio:has(> input:focus-visible),
  .sds-choice-tile:has(> input:focus-visible),
  .sds-chip:has(> input:focus-visible),
  .sds-reaction:has(> input:focus-visible) {
    outline: var(--sds-focus-ring-width) solid var(--sds-color-focus);
    outline-offset: var(--sds-focus-ring-offset);
  }

  /* --- field-row: label, description, control ----------------------------
     Inline (label left, control right) until the row is narrower than field-row.stack-below,
     then stacked: a token-driven wrap with no media query (flex-basis is negative while wide). */

  .sds-field-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sds-space-2) var(--sds-field-row-gap);
    min-height: var(--sds-field-row-min-height);
    padding: var(--sds-field-row-padding-y) var(--sds-space-4);
    border-radius: var(--sds-radius-md);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
    transition: background-color var(--sds-motion-fast) var(--sds-ease-standard);
  }

  .sds-field-row-label,
  .sds-field-row-control {
    flex-basis: calc((var(--sds-field-row-stack-below) - 100%) * 999);
    min-width: 0;
  }

  .sds-field-row-label {
    flex-grow: 1;
    font-size: calc(var(--sds-type-label-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-label-weight);
    letter-spacing: var(--sds-type-label-tracking);
    line-height: var(--sds-type-label-line-height);
  }

  .sds-field-row-control {
    display: flex;
    flex-grow: 0;
    justify-content: flex-end;
    align-items: center;
    gap: var(--sds-space-3);
  }

  .sds-field-row-description {
    flex-basis: 100%;
    order: 3;
    margin: 0;
    color: var(--sds-color-text-muted);
    font-size: calc(var(--sds-type-caption-size) * var(--sds-type-scale));
    line-height: var(--sds-type-caption-line-height);
  }

  .sds-field-row:where([data-variant="inline"]) .sds-field-row-control {
    margin-inline-start: auto;
  }

  .sds-field-row:where([data-variant="stacked"]) {
    align-items: stretch;
  }

  .sds-field-row:where([data-variant="stacked"]) :is(.sds-field-row-label, .sds-field-row-control) {
    flex-basis: 100%;
  }

  .sds-field-row:where([data-variant="stacked"]) .sds-field-row-description {
    order: 0;
  }

  .sds-field-row:where([data-variant="stacked"]) .sds-field-row-control {
    order: 1;
    justify-content: flex-start;
  }

  .sds-field-row:where(:focus-within) {
    background-color: color-mix(in srgb, var(--sds-color-accent) 8%, transparent);
  }

  .sds-field-row:where([aria-disabled="true"], :has(.sds-field-row-control :disabled)) {
    color: var(--sds-color-on-disabled);
  }

  .sds-field-row:where([aria-disabled="true"], :has(.sds-field-row-control :disabled)) .sds-field-row-description {
    color: var(--sds-color-on-disabled);
  }

  /* --- checkbox (input type=checkbox) -------------------------------------- */

  .sds-checkbox {
    position: relative;
    display: inline-grid;
    place-content: center;
    flex: none;
    width: var(--sds-checkbox-md-size);
    height: var(--sds-checkbox-md-size);
    border: var(--sds-border-thick) solid var(--sds-color-line-strong);
    border-radius: var(--sds-checkbox-radius);
    background-color: var(--sds-color-surface);
    color: var(--sds-color-on-accent);
    vertical-align: middle;
    cursor: pointer;
  }

  .sds-checkbox:where([data-size="lg"]) {
    width: var(--sds-checkbox-lg-size);
    height: var(--sds-checkbox-lg-size);
  }

  /* The mark: a check drawn with clip-path, a bar when indeterminate. */
  .sds-checkbox::before {
    content: "";
    width: calc(var(--sds-checkbox-md-size) * 0.55);
    height: calc(var(--sds-checkbox-md-size) * 0.55);
    background-color: currentColor;
    clip-path: polygon(14% 44%, 0 62%, 42% 100%, 100% 18%, 84% 4%, 40% 66%);
    transform: scale(0);
    transition: transform var(--sds-motion-fast) var(--sds-ease-emphasis);
  }

  .sds-checkbox:where([data-size="lg"])::before {
    width: calc(var(--sds-checkbox-lg-size) * 0.55);
    height: calc(var(--sds-checkbox-lg-size) * 0.55);
  }

  .sds-checkbox:where(:checked, :indeterminate) {
    border-color: var(--sds-color-accent-text);
    background-color: var(--sds-color-accent);
  }

  .sds-checkbox:where(:checked, :indeterminate)::before {
    transform: scale(1);
  }

  .sds-checkbox:where(:indeterminate)::before {
    clip-path: inset(40% 0 40% 0 round var(--sds-radius-xs));
  }

  @media (hover: hover) {
    .sds-checkbox:where(:hover:not(:disabled)) {
      border-color: var(--sds-color-accent-text);
    }
  }

  .sds-checkbox:where(:active:not(:disabled)) {
    transform: scale(0.92);
  }

  .sds-checkbox:where(:disabled) {
    border-color: transparent;
    background-color: var(--sds-color-disabled);
    color: var(--sds-color-on-disabled);
    cursor: not-allowed;
  }

  /* --- radio-group (fieldset) with .sds-radio labels ------------------------ */

  .sds-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--sds-space-1);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
  }

  .sds-radio-group > legend {
    padding: 0;
    margin-bottom: var(--sds-space-3);
    font-size: calc(var(--sds-type-label-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-label-weight);
    letter-spacing: var(--sds-type-label-tracking);
  }

  .sds-radio {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sds-space-4);
    min-height: max(var(--sds-radio-group-md-height), var(--sds-touch-target));
    padding: 0 var(--sds-space-3);
    border-radius: var(--sds-radius-md);
    font-size: calc(var(--sds-type-body-size) * var(--sds-type-scale));
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
  }

  .sds-radio-group:where([data-size="lg"]) .sds-radio {
    min-height: max(var(--sds-radio-group-lg-height), var(--sds-touch-target));
  }

  .sds-radio > input {
    position: relative;
    display: inline-grid;
    place-content: center;
    flex: none;
    width: var(--sds-checkbox-md-size);
    height: var(--sds-checkbox-md-size);
    border: var(--sds-border-thick) solid var(--sds-color-line-strong);
    border-radius: var(--sds-radius-round);
    background-color: var(--sds-color-surface);
    cursor: pointer;
    transition: border-color var(--sds-motion-fast) var(--sds-ease-standard);
  }

  .sds-radio-group:where([data-size="lg"]) .sds-radio > input {
    width: var(--sds-checkbox-lg-size);
    height: var(--sds-checkbox-lg-size);
  }

  .sds-radio > input::before {
    content: "";
    width: calc(var(--sds-checkbox-md-size) * 0.4);
    height: calc(var(--sds-checkbox-md-size) * 0.4);
    border-radius: var(--sds-radius-round);
    background-color: var(--sds-color-accent);
    transform: scale(0);
    transition: transform var(--sds-motion-fast) var(--sds-ease-emphasis);
  }

  .sds-radio > input:where(:checked) {
    border-color: var(--sds-color-accent-text);
  }

  .sds-radio > input:where(:checked)::before {
    transform: scale(1);
  }

  @media (hover: hover) {
    .sds-radio:where(:hover:not(:has(> input:disabled))) {
      background-color: color-mix(in srgb, var(--sds-color-text) 6%, transparent);
    }

    .sds-radio:where(:hover:not(:has(> input:disabled))) > input {
      border-color: var(--sds-color-accent-text);
    }
  }

  .sds-radio:where(:active:not(:has(> input:disabled))) > input {
    transform: scale(0.92);
  }

  .sds-radio:where(:has(> input:disabled)) {
    color: var(--sds-color-on-disabled);
    cursor: not-allowed;
  }

  .sds-radio > input:where(:disabled) {
    border-color: transparent;
    background-color: var(--sds-color-disabled);
    cursor: not-allowed;
  }

  /* segmented: joined toggle buttons in one group; arrow keys move inside it (native radios). */

  .sds-radio-group:where([data-variant="segmented"]) {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
    padding: var(--sds-space-1);
    border: var(--sds-border-thin) solid var(--sds-color-line-strong);
    border-radius: var(--sds-radio-group-segment-radius);
    background-color: var(--sds-color-surface);
  }

  .sds-radio-group:where([data-variant="segmented"]) > legend {
    float: left;
    width: 100%;
    margin-bottom: var(--sds-space-2);
  }

  .sds-radio-group:where([data-variant="segmented"]) .sds-radio {
    flex: 1 0 auto;
    justify-content: center;
    min-height: max(calc(var(--sds-radio-group-md-height) - 2 * var(--sds-space-1) - 2 * var(--sds-border-thin)), var(--sds-touch-target));
    padding: 0 var(--sds-space-5);
    border-radius: 0;
    color: var(--sds-color-text-muted);
    font-size: calc(var(--sds-type-label-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-label-weight);
    white-space: nowrap;
  }

  .sds-radio-group:where([data-variant="segmented"][data-size="lg"]) .sds-radio {
    min-height: max(calc(var(--sds-radio-group-lg-height) - 2 * var(--sds-space-1) - 2 * var(--sds-border-thin)), var(--sds-touch-target));
  }

  .sds-radio-group:where([data-variant="segmented"]) .sds-radio:first-of-type {
    border-start-start-radius: calc(var(--sds-radio-group-segment-radius) - var(--sds-space-1));
    border-end-start-radius: calc(var(--sds-radio-group-segment-radius) - var(--sds-space-1));
  }

  .sds-radio-group:where([data-variant="segmented"]) .sds-radio:last-of-type {
    border-start-end-radius: calc(var(--sds-radio-group-segment-radius) - var(--sds-space-1));
    border-end-end-radius: calc(var(--sds-radio-group-segment-radius) - var(--sds-space-1));
  }

  .sds-radio-group:where([data-variant="segmented"]) .sds-radio + .sds-radio {
    box-shadow: inset var(--sds-border-thin) 0 0 var(--sds-color-line);
  }

  @media (hover: hover) {
    .sds-radio-group:where([data-variant="segmented"]) .sds-radio:where(:hover:not(:has(> input:disabled, > input:checked))) {
      background-color: color-mix(in srgb, var(--sds-color-text) 8%, transparent);
      color: var(--sds-color-text);
    }
  }

  .sds-radio-group:where([data-variant="segmented"]) .sds-radio:where(:active:not(:has(> input:disabled))) {
    transform: scale(0.97);
  }

  .sds-radio-group:where([data-variant="segmented"]) .sds-radio:where(:has(> input:checked)) {
    background-color: var(--sds-color-accent);
    color: var(--sds-color-on-accent);
    box-shadow: var(--sds-shadow-sm);
  }

  .sds-radio-group:where([data-variant="segmented"]) .sds-radio:where(:has(> input:disabled)) {
    color: var(--sds-color-on-disabled);
  }

  .sds-radio-group:where([data-variant="list"]) .sds-radio:where(:has(> input:checked)) {
    font-weight: var(--sds-type-label-weight);
  }

  /* --- select ---------------------------------------------------------------
     Fallback: a native select with a drawn caret. Where the stylable select ships
     (appearance: base-select), the button and its picker are themed too. */

  .sds-select {
    display: inline-block;
    min-width: calc(var(--sds-touch-target) * 3);
    min-height: var(--sds-select-md-height);
    padding: 0 calc(var(--sds-select-padding-x) * 2 + 0.5em) 0 var(--sds-select-padding-x);
    border: var(--sds-border-thin) solid var(--sds-color-line-strong);
    border-radius: var(--sds-select-radius);
    background-color: var(--sds-color-surface-raised);
    background-image:
      linear-gradient(45deg, transparent 50%, currentColor 50%),
      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
      calc(100% - var(--sds-select-padding-x) - 0.35em) 50%,
      calc(100% - var(--sds-select-padding-x)) 50%;
    background-size: 0.35em 0.35em;
    background-repeat: no-repeat;
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-label-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-label-weight);
    line-height: var(--sds-type-label-line-height);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }

  @media (hover: hover) {
    .sds-select:where(:hover:not(:disabled)) {
      border-color: var(--sds-color-accent-text);
    }
  }

  .sds-select:where(:active:not(:disabled)) {
    background-color: color-mix(in srgb, var(--sds-color-accent) 14%, var(--sds-color-surface-raised));
  }

  .sds-select:where(:disabled) {
    border-color: transparent;
    background-color: var(--sds-color-disabled);
    color: var(--sds-color-on-disabled);
    cursor: not-allowed;
  }

  .sds-select option {
    background-color: var(--sds-color-surface-raised);
    color: var(--sds-color-text);
  }

  @supports (appearance: base-select) {
    .sds-select {
      appearance: base-select;
      display: inline-flex;
      align-items: center;
      background-image: none;
      padding-right: var(--sds-select-padding-x);
    }

    .sds-select::picker-icon {
      margin-inline-start: var(--sds-space-4);
      color: var(--sds-color-text-muted);
      transition: rotate var(--sds-motion-fast) var(--sds-ease-standard);
    }

    .sds-select:open::picker-icon {
      rotate: 180deg;
    }

    .sds-select:open {
      border-color: var(--sds-color-accent-text);
    }

    .sds-select::picker(select) {
      appearance: base-select;
      margin-block: var(--sds-space-2);
      padding: var(--sds-space-2);
      border: var(--sds-border-thin) solid var(--sds-color-line);
      border-radius: var(--sds-select-radius);
      background-color: var(--sds-color-surface-raised);
      color: var(--sds-color-text);
      box-shadow: var(--sds-shadow-lg);
    }

    .sds-select option {
      display: flex;
      align-items: center;
      gap: var(--sds-space-3);
      min-height: var(--sds-list-item-md-height);
      padding: 0 var(--sds-space-4);
      border-radius: var(--sds-radius-sm);
      font-weight: var(--sds-type-body-weight);
    }

    .sds-select option:where(:hover, :focus-visible) {
      background-color: color-mix(in srgb, var(--sds-color-accent) 18%, transparent);
      outline: none;
    }

    .sds-select option:where(:checked) {
      background-color: var(--sds-color-accent-soft);
      font-weight: var(--sds-type-label-weight);
    }
  }

  /* --- text-input (input, textarea) ---------------------------------------- */

  .sds-text-input {
    display: block;
    width: 100%;
    min-height: var(--sds-text-input-md-height);
    margin: 0;
    padding: 0 var(--sds-text-input-padding-x);
    border: var(--sds-border-thin) solid var(--sds-color-line-strong);
    border-radius: var(--sds-text-input-radius);
    background-color: var(--sds-color-surface);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-body-size) * var(--sds-type-scale));
    line-height: var(--sds-type-body-line-height);
  }

  .sds-text-input:where([data-size="lg"]) {
    min-height: max(var(--sds-text-input-lg-height), var(--sds-touch-target));
    font-size: calc(var(--sds-type-heading-size) * var(--sds-type-scale));
  }

  .sds-text-input::placeholder {
    color: var(--sds-color-text-faint);
    opacity: 1;
  }

  .sds-text-input:where([data-variant="default"]) {
    border-radius: var(--sds-text-input-radius);
  }

  .sds-text-input:where([data-variant="search"]) {
    border-radius: var(--sds-radius-pill);
    padding-inline: calc(var(--sds-text-input-padding-x) * 1.5);
  }

  .sds-text-input:where([data-variant="code"]) {
    font-family: var(--sds-font-mono);
    letter-spacing: 0.04em;
  }

  .sds-text-input:where([data-variant="multiline"], textarea) {
    min-height: var(--sds-text-input-multiline-height);
    padding: var(--sds-text-input-padding-x);
    resize: vertical;
  }

  @media (hover: hover) {
    .sds-text-input:where(:hover:not(:disabled, [readonly], :focus)) {
      border-color: var(--sds-color-accent-text);
    }
  }

  .sds-text-input:where(:focus) {
    border-color: var(--sds-color-accent-text);
    outline: var(--sds-focus-ring-width) solid var(--sds-color-focus);
    outline-offset: var(--sds-focus-ring-offset);
  }

  .sds-text-input:where([aria-invalid="true"], :user-invalid) {
    border-color: var(--sds-color-danger);
    box-shadow: inset 0 0 0 var(--sds-border-thin) var(--sds-color-danger);
    background-color: var(--sds-color-danger-soft);
  }

  .sds-text-input:where([readonly]) {
    border-style: dashed;
    background-color: transparent;
  }

  .sds-text-input:where(:disabled) {
    border-color: transparent;
    background-color: var(--sds-color-disabled);
    color: var(--sds-color-on-disabled);
    cursor: not-allowed;
  }

  .sds-text-input:where(:disabled)::placeholder {
    color: var(--sds-color-on-disabled);
  }

  /* --- choice-tile: button[aria-pressed] (multi) or label > input[type=radio] (single) */

  .sds-choice-tile {
    position: relative;
    display: inline-grid;
    grid-template-rows: 1fr auto;
    justify-items: center;
    align-content: center;
    gap: var(--sds-space-2);
    min-width: var(--sds-choice-tile-md-size);
    min-height: var(--sds-choice-tile-md-size);
    padding: var(--sds-space-3);
    border: var(--sds-border-thick) solid var(--sds-color-line);
    border-radius: var(--sds-choice-tile-radius);
    background-color: var(--sds-color-surface-raised);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
    text-align: center;
    vertical-align: top;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }

  .sds-choice-tile:where([data-size="lg"]) {
    min-width: var(--sds-choice-tile-lg-size);
    min-height: var(--sds-choice-tile-lg-size);
  }

  .sds-choice-tile:where([data-size="xl"]) {
    min-width: var(--sds-choice-tile-xl-size);
    min-height: var(--sds-choice-tile-xl-size);
    padding: var(--sds-space-4);
  }

  .sds-choice-tile:where([data-variant="single"], [data-variant="multi"]) {
    grid-auto-flow: row;
  }

  .sds-choice-tile-art {
    display: grid;
    place-items: center;
    font-size: calc(var(--sds-type-heading-size) * 1.5);
    line-height: 1;
  }

  .sds-choice-tile-art :is(.sds-icon, img, svg) {
    width: 1em;
    height: 1em;
  }

  .sds-choice-tile-word {
    font-size: calc(var(--sds-type-label-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-label-weight);
    letter-spacing: var(--sds-type-label-tracking);
    line-height: var(--sds-type-label-line-height);
  }

  .sds-choice-tile-hint {
    color: var(--sds-color-text-muted);
    font-size: calc(var(--sds-type-caption-size) * var(--sds-type-scale));
    line-height: var(--sds-type-caption-line-height);
  }

  /* Selected: border-selected (drawn inside, so the tile does not move) and a check badge. */
  .sds-choice-tile::before,
  .sds-choice-tile::after {
    content: "";
    position: absolute;
    top: var(--sds-space-2);
    right: var(--sds-space-2);
    width: calc(var(--sds-choice-tile-md-size) * 0.3);
    height: calc(var(--sds-choice-tile-md-size) * 0.3);
    opacity: 0;
    transform: scale(0.5);
    transition:
      opacity var(--sds-motion-fast) var(--sds-ease-standard),
      transform var(--sds-motion-fast) var(--sds-ease-emphasis);
  }

  .sds-choice-tile::before {
    border-radius: var(--sds-radius-round);
    background-color: var(--sds-color-accent);
  }

  .sds-choice-tile::after {
    background-color: var(--sds-color-on-accent);
    clip-path: polygon(24% 48%, 14% 58%, 42% 80%, 84% 34%, 74% 24%, 42% 60%);
  }

  .sds-choice-tile:where([aria-pressed="true"], :has(> input:checked)) {
    border-color: var(--sds-color-accent-text);
    background-color: var(--sds-color-accent-soft);
    box-shadow: inset 0 0 0 calc(var(--sds-choice-tile-border-selected) - var(--sds-border-thick)) var(--sds-color-accent-text);
  }

  .sds-choice-tile:where([aria-pressed="true"], :has(> input:checked))::before,
  .sds-choice-tile:where([aria-pressed="true"], :has(> input:checked))::after {
    opacity: 1;
    transform: scale(1);
  }

  @media (hover: hover) {
    .sds-choice-tile:where(:hover:not(:disabled, [aria-disabled="true"], [data-state="locked"], :has(> input:disabled))) {
      border-color: var(--sds-color-accent-text);
      box-shadow: var(--sds-glow-sm);
    }
  }

  .sds-choice-tile:where(:active:not(:disabled, [aria-disabled="true"], [data-state="locked"], :has(> input:disabled))) {
    transform: scale(0.96);
  }

  .sds-choice-tile:where([data-state="locked"]) {
    border-style: dashed;
    border-color: var(--sds-color-line-strong);
    background-color: var(--sds-color-surface);
    color: var(--sds-color-text-muted);
    cursor: not-allowed;
  }

  .sds-choice-tile:where([data-state="locked"]) .sds-choice-tile-art {
    opacity: var(--sds-opacity-disabled);
  }

  .sds-choice-tile:where(:disabled, [aria-disabled="true"]:not([data-state="locked"]), :has(> input:disabled)) {
    border-color: transparent;
    background-color: var(--sds-color-disabled);
    color: var(--sds-color-on-disabled);
    cursor: not-allowed;
  }

  /* --- section-header (h2, h3) ---------------------------------------------- */

  .sds-section-header {
    color: var(--sds-color-text);
    font-family: var(--sds-font-display);
    font-size: calc(var(--sds-type-heading-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-heading-weight);
    letter-spacing: var(--sds-type-heading-tracking);
    line-height: var(--sds-type-heading-line-height);
  }

  .sds-section-header:where([data-variant="default"]) {
    margin-block: var(--sds-space-6) var(--sds-space-3);
  }

  .sds-section-header:where([data-variant="eyebrow"]) {
    margin-block: var(--sds-space-5) var(--sds-space-2);
    color: var(--sds-color-text-muted);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-caption-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-label-weight);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  /* --- divider (hr) ---------------------------------------------------------- */

  .sds-divider {
    height: 0;
    margin-block: var(--sds-space-4);
    border: 0;
    border-top: var(--sds-border-thin) solid var(--sds-color-line);
  }

  .sds-divider:where([data-variant="line"]) {
    border-top-color: var(--sds-color-line);
  }

  .sds-divider:where([data-variant="strong"]) {
    border-top: var(--sds-border-thick) solid var(--sds-color-line-strong);
  }

  .sds-divider:where([data-variant="inset"]) {
    margin-inline: var(--sds-divider-inset);
  }

  .sds-divider:where([aria-orientation="vertical"]) {
    align-self: stretch;
    height: auto;
    margin: 0 var(--sds-space-3);
    border-top: 0;
    border-left: var(--sds-border-thin) solid var(--sds-color-line);
  }

  /* --- list-item (ul.sds-list > li.sds-list-item) ---------------------------
     interactive: the item holds one button or link that fills the row. */

  .sds-list {
    display: flex;
    flex-direction: column;
    list-style: none;
  }

  .sds-list-item {
    display: flex;
    align-items: center;
    gap: var(--sds-space-4);
    min-height: var(--sds-list-item-md-height);
    padding: var(--sds-space-2) var(--sds-list-item-padding-x);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-body-size) * var(--sds-type-scale));
    line-height: var(--sds-type-body-line-height);
  }

  .sds-list-item:where([data-size="lg"]) {
    min-height: var(--sds-list-item-lg-height);
  }

  .sds-list-item + .sds-list-item {
    border-top: var(--sds-border-thin) solid var(--sds-color-line);
  }

  .sds-list-item .sds-icon {
    width: 1.25em;
    height: 1.25em;
    color: var(--sds-color-text-muted);
  }

  .sds-list-item:where([data-variant="static"]) > :last-child:not(:first-child) {
    margin-inline-start: auto;
    color: var(--sds-color-text-muted);
  }

  .sds-list-item:where([data-variant="interactive"]) {
    padding: 0;
  }

  .sds-list-item > :is(button, a) {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    align-self: stretch;
    gap: var(--sds-space-4);
    min-height: inherit;
    padding: var(--sds-space-2) var(--sds-list-item-padding-x);
    border-radius: var(--sds-radius-md);
    color: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
  }

  .sds-list-item > :is(button, a) > :last-child:is(.sds-icon, .sds-badge, span):not(:first-child, .sds-list-item-value + *) {
    margin-inline-start: auto;
  }

  .sds-list-item > :is(button, a):focus-visible {
    outline-offset: calc(var(--sds-focus-ring-width) * -1);
  }

  @media (hover: hover) {
    .sds-list-item > :is(button, a):where(:hover:not(:disabled, [aria-disabled="true"])) {
      background-color: color-mix(in srgb, var(--sds-color-accent) 12%, transparent);
    }
  }

  .sds-list-item > :is(button, a):where(:active:not(:disabled, [aria-disabled="true"])) {
    background-color: color-mix(in srgb, var(--sds-color-accent) 20%, transparent);
  }

  .sds-list-item > :is(button, a):where([aria-current="true"], [aria-current="page"], [aria-selected="true"]) {
    background-color: var(--sds-color-accent-soft);
    box-shadow: inset var(--sds-border-heavy) 0 0 var(--sds-color-accent-text);
  }

  .sds-list-item > :is(button, a):where(:disabled, [aria-disabled="true"]) {
    color: var(--sds-color-on-disabled);
    cursor: not-allowed;
  }

  /* --- scroll-area: themed bars, keyboard scrollable (tabindex="0") --------- */

  .sds-scroll-area {
    overflow: auto;
    overscroll-behavior: contain;
    border-radius: var(--sds-radius-md);
  }

  @supports not selector(::-webkit-scrollbar) {
    .sds-scroll-area {
      scrollbar-color: var(--sds-color-line-strong) transparent;
    }

    .sds-scroll-area:where([data-state="dragging"]) {
      scrollbar-color: var(--sds-color-accent-text) transparent;
    }
  }

  .sds-scroll-area::-webkit-scrollbar {
    width: var(--sds-scroll-area-bar-width);
    height: var(--sds-scroll-area-bar-width);
  }

  .sds-scroll-area::-webkit-scrollbar-track {
    background-color: transparent;
  }

  .sds-scroll-area::-webkit-scrollbar-thumb {
    min-height: var(--sds-touch-target);
    min-width: var(--sds-touch-target);
    border-radius: var(--sds-radius-pill);
    background-color: var(--sds-color-line-strong);
  }

  .sds-scroll-area::-webkit-scrollbar-thumb:hover {
    background-color: var(--sds-color-text-muted);
  }

  .sds-scroll-area:where([data-state="dragging"])::-webkit-scrollbar-thumb {
    background-color: var(--sds-color-accent);
  }

  .sds-scroll-area:where([data-state="dragging"]) {
    user-select: none;
    -webkit-user-select: none;
  }

  /* --- disclosure (details > summary) ---------------------------------------- */

  .sds-disclosure {
    border: var(--sds-border-thin) solid var(--sds-color-line);
    border-radius: var(--sds-radius-md);
    background-color: var(--sds-color-surface);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
  }

  .sds-disclosure > summary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sds-space-4);
    min-height: var(--sds-touch-target);
    padding: var(--sds-disclosure-padding);
    border-radius: calc(var(--sds-radius-md) - var(--sds-border-thin));
    font-size: calc(var(--sds-type-label-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-label-weight);
    letter-spacing: var(--sds-type-label-tracking);
    list-style: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
  }

  .sds-disclosure > summary::-webkit-details-marker {
    display: none;
  }

  .sds-disclosure > summary::after {
    content: "";
    flex: none;
    width: 0.5em;
    height: 0.5em;
    margin-inline-end: var(--sds-space-2);
    border-right: var(--sds-border-thick) solid currentColor;
    border-bottom: var(--sds-border-thick) solid currentColor;
    transform: translateY(-25%) rotate(45deg);
    transition: transform var(--sds-motion-base) var(--sds-ease-standard);
  }

  .sds-disclosure:where([open]) > summary::after {
    transform: translateY(25%) rotate(-135deg);
  }

  .sds-disclosure:where([open]) > summary {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }

  .sds-disclosure > :not(summary) {
    margin: 0;
    padding: 0 var(--sds-disclosure-padding) var(--sds-disclosure-padding);
    color: var(--sds-color-text-muted);
    font-size: calc(var(--sds-type-body-size) * var(--sds-type-scale));
    line-height: var(--sds-type-body-line-height);
  }

  @media (hover: hover) {
    .sds-disclosure:where(:not([aria-disabled="true"])) > summary:hover {
      background-color: color-mix(in srgb, var(--sds-color-accent) 10%, transparent);
    }
  }

  .sds-disclosure:where([aria-disabled="true"]) {
    background-color: var(--sds-color-disabled);
    border-color: transparent;
  }

  .sds-disclosure:where([aria-disabled="true"]) > summary {
    color: var(--sds-color-on-disabled);
    cursor: not-allowed;
  }

  /* --- progress-bar (native progress; no value = indeterminate) -------------- */

  .sds-progress-bar {
    display: block;
    width: 100%;
    height: var(--sds-progress-bar-md-height);
    overflow: hidden;
    border: 0;
    border-radius: var(--sds-progress-bar-radius);
    background-color: var(--sds-color-line);
    color: var(--sds-color-accent-text);
    vertical-align: middle;
  }

  .sds-progress-bar:where([data-size="sm"]) {
    height: var(--sds-progress-bar-sm-height);
  }

  .sds-progress-bar::-webkit-progress-bar {
    border-radius: var(--sds-progress-bar-radius);
    background-color: var(--sds-color-line);
  }

  .sds-progress-bar::-webkit-progress-value {
    border-radius: var(--sds-progress-bar-radius);
    background-color: currentColor;
    transition: inline-size var(--sds-motion-base) var(--sds-ease-standard);
  }

  .sds-progress-bar::-moz-progress-bar {
    border-radius: var(--sds-progress-bar-radius);
    background-color: currentColor;
  }

  .sds-progress-bar:where([data-variant="default"]) {
    color: var(--sds-color-accent-text);
  }

  .sds-progress-bar:where([data-variant="success"], [data-state="complete"]) {
    color: var(--sds-color-success);
  }

  .sds-progress-bar:indeterminate {
    background-image: linear-gradient(90deg, transparent 0%, currentColor 30%, currentColor 50%, transparent 80%);
    background-size: 50% 100%;
    background-repeat: no-repeat;
    animation: sds-progress-slide calc(var(--sds-motion-slow) * 4) linear infinite;
  }

  .sds-progress-bar:indeterminate::-webkit-progress-bar {
    background-color: transparent;
  }

  .sds-progress-bar:indeterminate::-moz-progress-bar {
    background-color: transparent;
  }

  /* --- badge (span) ------------------------------------------------------------ */

  .sds-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sds-space-1);
    min-width: var(--sds-badge-md-size);
    height: var(--sds-badge-md-size);
    padding: 0 var(--sds-space-3);
    border: var(--sds-border-thin) solid transparent;
    border-radius: var(--sds-radius-pill);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
    font-size: max(var(--sds-type-min-size), calc(var(--sds-type-caption-size) * var(--sds-type-scale)));
    font-weight: var(--sds-type-label-weight);
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
  }

  .sds-badge:where([data-size="sm"]) {
    min-width: var(--sds-badge-sm-size);
    height: var(--sds-badge-sm-size);
    padding: 0 var(--sds-space-2);
    font-size: calc(var(--sds-type-min-size) * var(--sds-type-scale));
  }

  .sds-badge .sds-icon {
    width: 1em;
    height: 1em;
  }

  .sds-badge:where([data-variant="neutral"]) {
    border-color: var(--sds-color-line-strong);
    background-color: var(--sds-color-surface-raised);
  }

  .sds-badge:where([data-variant="accent"]) {
    background-color: var(--sds-color-accent-soft);
  }

  .sds-badge:where([data-variant="success"]) {
    background-color: var(--sds-color-success-soft);
  }

  .sds-badge:where([data-variant="warning"]) {
    background-color: var(--sds-color-warning-soft);
  }

  .sds-badge:where([data-variant="danger"]) {
    background-color: var(--sds-color-danger-soft);
  }

  .sds-badge:where([data-variant="info"]) {
    background-color: var(--sds-color-info-soft);
  }

  .sds-badge:where([data-variant="new"]) {
    background-color: var(--sds-color-accent);
    color: var(--sds-color-on-accent);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* The status color shows as a dot too, so color is not the only signal on the soft fill. */
  .sds-badge:where([data-variant="success"], [data-variant="warning"], [data-variant="danger"], [data-variant="info"])::before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-radius: var(--sds-radius-round);
    background-color: var(--sds-color-success);
  }

  .sds-badge:where([data-variant="warning"])::before {
    background-color: var(--sds-color-warning);
  }

  .sds-badge:where([data-variant="danger"])::before {
    background-color: var(--sds-color-danger);
  }

  .sds-badge:where([data-variant="info"])::before {
    background-color: var(--sds-color-info);
  }

  /* --- chip: status (span), filter (button[aria-pressed] or label > radio), input (span) */

  .sds-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--sds-space-2);
    min-height: var(--sds-chip-md-height);
    padding: 0 var(--sds-chip-padding-x);
    border: var(--sds-border-thin) solid var(--sds-color-line-strong);
    border-radius: var(--sds-chip-radius);
    background-color: var(--sds-color-surface);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-label-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-label-weight);
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
  }

  .sds-chip:where([data-size="sm"]) {
    min-height: var(--sds-chip-sm-height);
    padding: 0 calc(var(--sds-chip-padding-x) * 0.75);
    font-size: max(var(--sds-type-min-size), calc(var(--sds-type-caption-size) * var(--sds-type-scale)));
  }

  .sds-chip .sds-icon {
    width: 1.1em;
    height: 1.1em;
  }

  .sds-chip:where([data-variant="status"]) {
    border-color: transparent;
    background-color: var(--sds-color-surface-raised);
  }

  .sds-chip:where([data-variant="filter"]) {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }

  @media (hover: hover) {
    .sds-chip:where([data-variant="filter"]):where(:hover:not(:disabled, [aria-disabled="true"], :has(> input:disabled))) {
      border-color: var(--sds-color-accent-text);
      background-color: color-mix(in srgb, var(--sds-color-accent) 10%, var(--sds-color-surface));
    }
  }

  .sds-chip:where([data-variant="filter"]):where(:active:not(:disabled, [aria-disabled="true"])) {
    transform: scale(0.95);
  }

  .sds-chip:where([data-variant="filter"]):where([aria-pressed="true"], :has(> input:checked)) {
    border-color: var(--sds-color-accent-text);
    background-color: var(--sds-color-accent-soft);
    box-shadow: inset 0 0 0 var(--sds-border-thin) var(--sds-color-accent-text);
  }

  .sds-chip:where([data-variant="filter"]):where(:disabled, [aria-disabled="true"], :has(> input:disabled)) {
    border-color: transparent;
    background-color: var(--sds-color-disabled);
    color: var(--sds-color-on-disabled);
    cursor: not-allowed;
  }

  .sds-chip:where([data-variant="input"]) {
    padding-inline-end: var(--sds-space-1);
    background-color: var(--sds-color-surface-raised);
  }

  .sds-chip > button {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: calc(var(--sds-chip-md-height) - 2 * var(--sds-space-2));
    height: calc(var(--sds-chip-md-height) - 2 * var(--sds-space-2));
    border-radius: var(--sds-radius-round);
    color: var(--sds-color-text-muted);
    cursor: pointer;
  }

  .sds-chip:where([data-size="sm"]) > button {
    width: calc(var(--sds-chip-sm-height) - 2 * var(--sds-space-2));
    height: calc(var(--sds-chip-sm-height) - 2 * var(--sds-space-2));
  }

  .sds-chip > button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--sds-touch-target);
    height: var(--sds-touch-target);
    transform: translate(-50%, -50%);
  }

  @media (hover: hover) {
    .sds-chip > button:hover {
      background-color: color-mix(in srgb, var(--sds-color-text) 14%, transparent);
      color: var(--sds-color-text);
    }
  }

  /* --- caption (inside the .sds-captions live region) -------------------------
     Sized by caption.size.* (the player's caption size), never by the text scale. */

  .sds-captions {
    position: relative;
    z-index: var(--sds-layer-caption);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sds-space-2);
    pointer-events: none;
  }

  .sds-caption {
    max-width: 100%;
    padding: var(--sds-caption-padding) calc(var(--sds-caption-padding) * 1.5);
    border-radius: var(--sds-caption-radius);
    background-color: color-mix(in srgb, var(--sds-caption-bg) calc(var(--sds-caption-opacity) * 100%), transparent);
    color: var(--sds-caption-text);
    font-family: var(--sds-font-body);
    font-size: var(--sds-caption-size-md);
    line-height: 1.35;
    text-align: center;
    animation: sds-fade-in var(--sds-motion-base) var(--sds-ease-standard);
    transition: opacity var(--sds-motion-slow) var(--sds-ease-exit);
  }

  .sds-caption:where([data-size="sm"]) {
    font-size: var(--sds-caption-size-sm);
  }

  .sds-caption:where([data-size="lg"]) {
    font-size: var(--sds-caption-size-lg);
  }

  .sds-caption:where([data-variant="sound"]) {
    font-style: italic;
  }

  .sds-caption:where([data-variant="sound"])::before {
    content: "[";
  }

  .sds-caption:where([data-variant="sound"])::after {
    content: "]";
  }

  .sds-caption:where([data-variant="speech"]) .sds-caption-speaker {
    margin-inline-end: 0.4em;
    font-weight: var(--sds-type-heading-weight);
    text-decoration: underline;
    text-decoration-thickness: var(--sds-border-thick);
    text-underline-offset: 0.2em;
  }

  .sds-caption:where([data-state="fading"]) {
    opacity: 0;
  }

  /* --- back-button and close-button ----------------------------------------- */

  .sds-back-button,
  .sds-close-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sds-space-2);
    flex: none;
    min-width: var(--sds-icon-button-md-size);
    height: var(--sds-icon-button-md-size);
    border: var(--sds-border-thin) solid transparent;
    border-radius: var(--sds-radius-pill);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-label-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-label-weight);
    letter-spacing: var(--sds-type-label-tracking);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: middle;
  }

  .sds-back-button .sds-icon,
  .sds-close-button .sds-icon {
    width: 1.35em;
    height: 1.35em;
  }

  .sds-back-button:where([data-variant="icon"]) {
    width: var(--sds-icon-button-md-size);
  }

  .sds-back-button:where([data-variant="labeled"]) {
    padding: 0 var(--sds-space-5) 0 var(--sds-space-3);
    border-radius: var(--sds-button-radius);
  }

  .sds-back-button:where([data-size="lg"]) {
    min-width: var(--sds-icon-button-lg-size);
    height: var(--sds-icon-button-lg-size);
    font-size: calc(var(--sds-type-heading-size) * var(--sds-type-scale));
  }

  .sds-back-button:where([data-variant="icon"][data-size="lg"]) {
    width: var(--sds-icon-button-lg-size);
  }

  .sds-close-button {
    width: var(--sds-icon-button-md-size);
  }

  .sds-close-button:where([data-size="sm"]) {
    width: var(--sds-icon-button-sm-size);
    min-width: var(--sds-icon-button-sm-size);
    height: var(--sds-icon-button-sm-size);
  }

  @media (hover: hover) {
    :is(.sds-back-button, .sds-close-button):where(:hover:not(:disabled, [aria-disabled="true"])) {
      background-color: color-mix(in srgb, var(--sds-color-accent) 14%, transparent);
      border-color: color-mix(in srgb, var(--sds-color-accent) 40%, transparent);
    }
  }

  :is(.sds-back-button, .sds-close-button):where(:active:not(:disabled, [aria-disabled="true"])) {
    background-color: color-mix(in srgb, var(--sds-color-accent) 22%, transparent);
    transform: scale(0.94);
  }

  :is(.sds-back-button, .sds-close-button):where(:disabled, [aria-disabled="true"]) {
    color: var(--sds-color-on-disabled);
    cursor: not-allowed;
  }

  /* --- screen-header: [back] title [actions], lede under the title ------------ */

  .sds-screen-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "back title actions"
      ". lede .";
    align-items: center;
    column-gap: var(--sds-space-3);
    min-height: var(--sds-screen-header-height);
    padding: var(--sds-space-3) var(--sds-screen-header-padding-x);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
  }

  .sds-screen-header > :is(.sds-back-button, .sds-close-button):first-child {
    grid-area: back;
  }

  .sds-screen-header-title {
    grid-area: title;
    margin: 0;
    font-family: var(--sds-font-display);
    font-size: calc(var(--sds-type-title-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-title-weight);
    letter-spacing: var(--sds-type-title-tracking);
    line-height: var(--sds-type-title-line-height);
  }

  .sds-screen-header-lede {
    grid-area: lede;
    margin: 0;
    color: var(--sds-color-text-muted);
    font-size: calc(var(--sds-type-body-size) * var(--sds-type-scale));
    line-height: var(--sds-type-body-line-height);
  }

  .sds-screen-header-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: var(--sds-space-2);
  }

  .sds-screen-header:where([data-variant="default"]) {
    border-bottom: var(--sds-border-thin) solid var(--sds-color-line);
  }

  .sds-screen-header:where([data-variant="large"]) {
    grid-template-areas:
      "back . actions"
      "title title title"
      "lede lede lede";
    row-gap: var(--sds-space-3);
    padding-block: var(--sds-space-5) var(--sds-space-6);
  }

  .sds-screen-header:where([data-variant="large"]) .sds-screen-header-title {
    font-size: calc(var(--sds-type-display-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-display-weight);
    letter-spacing: var(--sds-type-display-tracking);
    line-height: var(--sds-type-display-line-height);
  }

  /* sds-part: input */
  /* ============================================================ input pack */

  /* --- keycap: kbd (keyboard label) or span > svg (device glyph) ------------- */

  .sds-keycap {
    position: relative; /* holds the glyph's visually hidden label inside its own box */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: var(--sds-keycap-md-size);
    height: var(--sds-keycap-md-size);
    padding: 0 var(--sds-space-3);
    border: var(--sds-border-thin) solid var(--sds-color-line-strong);
    border-bottom-width: var(--sds-border-heavy);
    border-radius: var(--sds-keycap-radius);
    background-color: var(--sds-color-surface-raised);
    color: var(--sds-color-text);
    font-family: var(--sds-font-mono);
    font-size: calc(var(--sds-type-label-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-label-weight);
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
  }

  .sds-keycap:where([data-size="sm"]) {
    min-width: var(--sds-keycap-sm-size);
    height: var(--sds-keycap-sm-size);
    padding: 0 var(--sds-space-2);
    border-bottom-width: var(--sds-border-thick);
    font-size: calc(var(--sds-type-min-size) * var(--sds-type-scale));
  }

  .sds-keycap:where([data-size="lg"]) {
    min-width: var(--sds-keycap-lg-size);
    height: var(--sds-keycap-lg-size);
    padding: 0 var(--sds-space-4);
    font-size: calc(var(--sds-type-heading-size) * var(--sds-type-scale));
  }

  .sds-keycap:where([data-variant="keyboard"]) {
    text-transform: none;
  }

  /* Device glyphs: the glyph is the whole cap (Kenney glyphs carry their own outline). */
  .sds-keycap:where([data-variant="mouse"], [data-variant="xbox"], [data-variant="playstation"], [data-variant="switch"], [data-variant="touch"]):has(> .sds-keycap-glyph) {
    width: var(--sds-keycap-md-size);
    min-width: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
  }

  .sds-keycap:where([data-size="sm"]):has(> .sds-keycap-glyph) {
    width: var(--sds-keycap-sm-size);
  }

  .sds-keycap:where([data-size="lg"]):has(> .sds-keycap-glyph) {
    width: var(--sds-keycap-lg-size);
  }

  .sds-keycap-glyph {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
    stroke: none;
  }

  .sds-keycap:where([data-state="pressed"]) {
    border-bottom-width: var(--sds-border-thin);
    border-color: var(--sds-color-accent-text);
    color: var(--sds-color-text);
    transform: translateY(var(--sds-space-1));
  }

  .sds-keycap:where([data-state="unbound"]) {
    border-style: dashed;
    border-bottom-width: var(--sds-border-thin);
    background-color: transparent;
    color: var(--sds-color-text-faint);
  }

  /* --- rebind-row (a field-row whose control captures the next input) -------- */

  .sds-rebind-row .sds-field-row-control > button {
    min-width: calc(var(--sds-touch-target) * 3);
  }

  .sds-rebind-prompt {
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
  }

  .sds-rebind-row:not([data-state="listening"]) .sds-rebind-prompt,
  .sds-rebind-row:where([data-state="listening"]) .sds-field-row-control > button > .sds-keycap {
    display: none;
  }

  .sds-rebind-row:where([data-state="listening"]) {
    background-color: var(--sds-color-accent-soft);
  }

  .sds-rebind-row:where([data-state="listening"]) .sds-field-row-control > button {
    border-color: var(--sds-color-accent-text);
    animation: sds-pulse calc(var(--sds-motion-slow) * 3) var(--sds-ease-standard) infinite;
  }

  .sds-rebind-row:where([data-state="conflict"]) {
    background-color: var(--sds-color-danger-soft);
    box-shadow: inset var(--sds-border-heavy) 0 0 var(--sds-color-danger);
  }

  .sds-rebind-row:where([data-state="conflict"]) .sds-field-row-description {
    color: var(--sds-color-text);
  }

  .sds-rebind-row:where([aria-disabled="true"]) .sds-keycap {
    color: var(--sds-color-on-disabled);
  }

  /* sds-part: hud */
  /* ============================================================== hud pack */

  /* --- hud-bar: a glass strip at the top or bottom, inside the safe area ------ */

  .sds-hud-bar {
    position: relative;
    z-index: var(--sds-layer-hud);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sds-space-5);
    min-height: var(--sds-hud-bar-height);
    padding: var(--sds-hud-bar-padding) max(var(--sds-safe-area-min), env(safe-area-inset-right)) var(--sds-hud-bar-padding) max(var(--sds-safe-area-min), env(safe-area-inset-left));
    background-color: var(--sds-color-glass);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
    -webkit-backdrop-filter: blur(var(--sds-space-3));
    backdrop-filter: blur(var(--sds-space-3));
  }

  .sds-hud-bar > * {
    display: flex;
    align-items: center;
    gap: var(--sds-space-4);
  }

  .sds-hud-bar:where([data-variant="top"]) {
    padding-top: max(var(--sds-hud-bar-padding), env(safe-area-inset-top));
    border-bottom: var(--sds-border-thin) solid var(--sds-color-line);
  }

  .sds-hud-bar:where([data-variant="bottom"]) {
    padding-bottom: max(var(--sds-hud-bar-padding), env(safe-area-inset-bottom));
    border-top: var(--sds-border-thin) solid var(--sds-color-line);
  }

  /* --- resource-bar: div[role=meter]; sds.js keeps the fill, trail and state ---- */

  .sds-resource-bar {
    --_fill: var(--sds-resource-bar-health);
    position: relative;
    display: block;
    width: 100%;
    min-width: calc(var(--sds-touch-target) * 2);
    height: var(--sds-resource-bar-md-height);
    overflow: hidden;
    border: var(--sds-border-thin) solid var(--sds-color-line-strong);
    border-radius: var(--sds-radius-pill);
    background-color: color-mix(in srgb, var(--sds-color-bg) 70%, transparent);
  }

  .sds-resource-bar:where([data-size="sm"]) {
    height: var(--sds-resource-bar-sm-height);
  }

  .sds-resource-bar:where([data-variant="health"]) {
    --_fill: var(--sds-resource-bar-health);
  }

  .sds-resource-bar:where([data-variant="energy"]) {
    --_fill: var(--sds-resource-bar-energy);
  }

  .sds-resource-bar:where([data-variant="shield"]) {
    --_fill: var(--sds-resource-bar-shield);
  }

  .sds-resource-bar:where([data-variant="neutral"]) {
    --_fill: var(--sds-resource-bar-neutral);
  }

  .sds-resource-bar-fill,
  .sds-resource-bar-trail {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--_fill);
  }

  .sds-resource-bar-trail {
    color: var(--sds-resource-bar-trail);
    opacity: 0.45;
  }

  .sds-resource-bar-fill::-webkit-progress-bar,
  .sds-resource-bar-trail::-webkit-progress-bar {
    background: transparent;
  }

  .sds-resource-bar-fill::-webkit-progress-value {
    background-color: currentColor;
    transition: inline-size var(--sds-motion-base) var(--sds-ease-standard);
  }

  .sds-resource-bar-trail::-webkit-progress-value {
    background-color: currentColor;
    transition: inline-size var(--sds-motion-slow) var(--sds-ease-standard);
  }

  .sds-resource-bar-fill::-moz-progress-bar,
  .sds-resource-bar-trail::-moz-progress-bar {
    background-color: currentColor;
  }

  .sds-resource-bar-segments {
    position: absolute;
    inset: 0;
    display: flex;
    pointer-events: none;
  }

  .sds-resource-bar-segments > span {
    flex: 1;
  }

  .sds-resource-bar-segments > span + span {
    border-left: var(--sds-border-thick) solid color-mix(in srgb, var(--sds-color-bg) 80%, transparent);
  }

  /* Low and critical: a border color, a hatch over the fill (not color alone) and a pulse
     (dropped under reduced motion; the hatch stays). */
  .sds-resource-bar:where([data-state="low"]) {
    border-color: var(--sds-color-warning);
  }

  .sds-resource-bar:where([data-state="critical"]) {
    border-color: var(--sds-color-danger);
  }

  .sds-resource-bar:where([data-state="low"], [data-state="critical"]) .sds-resource-bar-fill::-webkit-progress-value {
    background-image: repeating-linear-gradient(-45deg, transparent 0 0.4em, color-mix(in srgb, var(--sds-color-bg) 35%, transparent) 0.4em 0.6em);
  }

  .sds-resource-bar:where([data-state="low"], [data-state="critical"]) .sds-resource-bar-fill::-moz-progress-bar {
    background-image: repeating-linear-gradient(-45deg, transparent 0 0.4em, color-mix(in srgb, var(--sds-color-bg) 35%, transparent) 0.4em 0.6em);
  }

  .sds-resource-bar:where([data-state="low"]) .sds-resource-bar-fill {
    animation: sds-pulse calc(var(--sds-motion-slow) * 4) var(--sds-ease-standard) infinite;
  }

  .sds-resource-bar:where([data-state="critical"]) .sds-resource-bar-fill {
    animation: sds-pulse calc(var(--sds-motion-slow) * 2) var(--sds-ease-standard) infinite;
  }

  .sds-resource-bar:where([data-state="full"]) {
    box-shadow: var(--sds-glow-sm);
  }

  .sds-resource-bar:where([data-state="empty"]) {
    border-style: dashed;
  }

  /* --- counter: span with a number that counts to its new value -------------- */

  .sds-counter {
    display: inline-flex;
    align-items: center;
    gap: var(--sds-space-2);
    color: var(--sds-color-text);
    font-family: var(--sds-font-display);
    font-size: calc(var(--sds-type-heading-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-heading-weight);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
    transition: color var(--sds-motion-base) var(--sds-ease-standard);
  }

  .sds-counter:where([data-size="sm"]) {
    font-size: calc(var(--sds-type-label-size) * var(--sds-type-scale));
  }

  .sds-counter .sds-icon,
  .sds-counter > img {
    width: var(--sds-counter-md-icon);
    height: var(--sds-counter-md-icon);
  }

  .sds-counter:where([data-size="sm"]) .sds-icon,
  .sds-counter:where([data-size="sm"]) > img {
    width: var(--sds-counter-sm-icon);
    height: var(--sds-counter-sm-icon);
  }

  .sds-counter:where([data-variant="default"]) .sds-icon {
    color: var(--sds-color-accent-text);
  }

  .sds-counter:where([data-variant="compact"]) {
    gap: var(--sds-space-1);
    padding: var(--sds-space-1) var(--sds-space-3);
    border-radius: var(--sds-radius-pill);
    background-color: var(--sds-color-glass);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-label-size) * var(--sds-type-scale));
  }

  .sds-counter:where([data-variant="compact"][data-size="sm"]) {
    font-size: max(var(--sds-type-min-size), calc(var(--sds-type-caption-size) * var(--sds-type-scale)));
  }

  /* Values stay in color.text (status and accent colors are not text roles); the direction and
     the cap read from a shape: an up or down triangle, the star (issue #48). */
  .sds-counter:where([data-state="changed-up"], [data-state="changed-down"]) {
    color: var(--sds-color-text);
    animation: sds-pop var(--sds-motion-slow) var(--sds-ease-emphasis);
  }

  .sds-counter:where([data-state="changed-up"])::after {
    content: "\25B2";
    content: "\25B2" / "";
    color: var(--sds-color-success);
    font-size: 0.7em;
  }

  .sds-counter:where([data-state="changed-down"])::after {
    content: "\25BC";
    content: "\25BC" / "";
    color: var(--sds-color-danger);
    font-size: 0.7em;
  }

  .sds-counter:where([data-state="maxed"]) {
    color: var(--sds-color-text);
  }

  .sds-counter:where([data-state="maxed"])::after {
    content: "\2605";
    font-size: 0.7em;
  }

  /* sds-part: menus */
  /* ============================================================ menus pack */

  /* --- save-slot-card (button): art | title, detail | meta -------------------- */

  .sds-save-slot-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "art title meta"
      "art detail meta";
    align-items: center;
    column-gap: var(--sds-space-4);
    row-gap: var(--sds-space-1);
    width: 100%;
    min-height: var(--sds-save-slot-card-height);
    padding: var(--sds-space-3) var(--sds-space-5) var(--sds-space-3) var(--sds-space-3);
    border: var(--sds-border-thick) solid var(--sds-color-line);
    border-radius: var(--sds-save-slot-card-radius);
    background-color: var(--sds-color-surface-raised);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
    text-align: start;
    cursor: pointer;
    touch-action: manipulation;
  }

  .sds-save-slot-card-art {
    grid-area: art;
    display: grid;
    place-items: center;
    width: calc(var(--sds-save-slot-card-height) - 2 * var(--sds-space-3) - 2 * var(--sds-border-thick));
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: calc(var(--sds-save-slot-card-radius) - var(--sds-space-2));
    background-color: var(--sds-color-surface);
    color: var(--sds-color-text-muted);
  }

  .sds-save-slot-card-art > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sds-save-slot-card-art > .sds-icon {
    width: calc(var(--sds-save-slot-card-height) * 0.3);
    height: calc(var(--sds-save-slot-card-height) * 0.3);
  }

  .sds-save-slot-card-title {
    grid-area: title;
    align-self: end;
    font-size: calc(var(--sds-type-heading-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-heading-weight);
    line-height: var(--sds-type-heading-line-height);
  }

  .sds-save-slot-card-detail {
    grid-area: detail;
    align-self: start;
    color: var(--sds-color-text-muted);
    font-size: calc(var(--sds-type-caption-size) * var(--sds-type-scale));
    line-height: var(--sds-type-caption-line-height);
  }

  .sds-save-slot-card-meta {
    grid-area: meta;
    color: var(--sds-color-text-muted);
    font-family: var(--sds-font-mono);
    font-size: calc(var(--sds-type-caption-size) * var(--sds-type-scale));
    text-align: end;
  }

  .sds-save-slot-card:where([data-variant="filled"]) .sds-save-slot-card-art {
    background-color: var(--sds-color-accent-soft);
    color: var(--sds-color-accent-text);
  }

  .sds-save-slot-card:where([data-variant="empty"]) {
    border-style: dashed;
    border-color: var(--sds-color-line-strong);
    background-color: transparent;
  }

  .sds-save-slot-card:where([data-variant="empty"]) .sds-save-slot-card-title {
    color: var(--sds-color-text-muted);
  }

  .sds-save-slot-card:where([data-variant="corrupt"]) {
    border-color: var(--sds-color-danger);
    background-color: var(--sds-color-danger-soft);
  }

  .sds-save-slot-card:where([data-variant="corrupt"]) .sds-save-slot-card-art {
    background-color: var(--sds-color-danger);
    color: var(--sds-color-on-danger);
  }

  .sds-save-slot-card:where([data-variant="corrupt"]) .sds-save-slot-card-detail {
    color: var(--sds-color-text);
  }

  @media (hover: hover) {
    .sds-save-slot-card:where(:hover:not(:disabled, [aria-disabled="true"])) {
      border-color: var(--sds-color-accent-text);
      box-shadow: var(--sds-glow-sm);
    }
  }

  .sds-save-slot-card:where(:active:not(:disabled, [aria-disabled="true"])) {
    transform: scale(0.985);
  }

  .sds-save-slot-card:where([aria-pressed="true"], [aria-current="true"]) {
    border-color: var(--sds-color-accent-text);
    box-shadow: inset 0 0 0 var(--sds-border-thick) var(--sds-color-accent-text);
  }

  .sds-save-slot-card:where(:disabled, [aria-disabled="true"]) {
    border-color: transparent;
    background-color: var(--sds-color-disabled);
    color: var(--sds-color-on-disabled);
    cursor: not-allowed;
  }

  .sds-save-slot-card:where(:disabled, [aria-disabled="true"]) :is(.sds-save-slot-card-detail, .sds-save-slot-card-meta) {
    color: var(--sds-color-on-disabled);
  }

  /* sds-part: map */
  /* ============================================================== map pack */

  /* --- map-controls: div[role=toolbar] of buttons (data-sds-map="zoom-in" ...) - */

  .sds-map-controls {
    display: inline-flex;
    flex-direction: column;
    gap: var(--sds-map-controls-gap);
    padding: var(--sds-map-controls-gap);
    border: var(--sds-border-thin) solid var(--sds-color-line);
    border-radius: var(--sds-radius-lg);
    background-color: var(--sds-color-glass);
    box-shadow: var(--sds-shadow-sm);
    -webkit-backdrop-filter: blur(var(--sds-space-3));
    backdrop-filter: blur(var(--sds-space-3));
  }

  .sds-map-controls:where([data-variant="vertical"]) {
    flex-direction: column;
  }

  .sds-map-controls:where([data-variant="horizontal"]) {
    flex-direction: row;
  }

  .sds-map-controls > button {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: var(--sds-icon-button-md-size);
    height: var(--sds-icon-button-md-size);
    border-radius: calc(var(--sds-radius-lg) - var(--sds-map-controls-gap));
    color: var(--sds-color-text);
    cursor: pointer;
    touch-action: manipulation;
  }

  .sds-map-controls:where([data-size="lg"]) > button {
    width: var(--sds-icon-button-lg-size);
    height: var(--sds-icon-button-lg-size);
  }

  .sds-map-controls > button .sds-icon {
    width: calc(var(--sds-icon-button-md-size) * 0.5);
    height: calc(var(--sds-icon-button-md-size) * 0.5);
  }

  .sds-map-controls:where([data-size="lg"]) > button .sds-icon {
    width: calc(var(--sds-icon-button-lg-size) * 0.5);
    height: calc(var(--sds-icon-button-lg-size) * 0.5);
  }

  @media (hover: hover) {
    .sds-map-controls > button:where(:hover:not(:disabled, [aria-disabled="true"])) {
      background-color: color-mix(in srgb, var(--sds-color-accent) 16%, transparent);
    }
  }

  .sds-map-controls > button:where(:active:not(:disabled, [aria-disabled="true"])) {
    background-color: color-mix(in srgb, var(--sds-color-accent) 26%, transparent);
    transform: scale(0.92);
  }

  .sds-map-controls > button:where([aria-pressed="true"]) {
    background-color: var(--sds-color-accent);
    color: var(--sds-color-on-accent);
  }

  .sds-map-controls > button:where(:disabled, [aria-disabled="true"]),
  .sds-map-controls:where([data-state="at-min-zoom"]) > [data-sds-map="zoom-out"],
  .sds-map-controls:where([data-state="at-max-zoom"]) > [data-sds-map="zoom-in"] {
    color: var(--sds-color-on-disabled);
    cursor: not-allowed;
  }

  /* sds-part: connect */
  /* ========================================================== connect pack */

  .sds-brand {
    display: inline-block;
    flex: none;
    width: 1em;
    height: 1em;
    fill: currentColor;
    stroke: none;
    vertical-align: middle;
  }

  /* --- social-links: nav > a.sds-social-link --------------------------------- */

  .sds-social-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sds-social-links-gap);
  }

  .sds-social-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sds-space-3);
    min-width: var(--sds-icon-button-md-size);
    height: var(--sds-icon-button-md-size);
    border: var(--sds-border-thin) solid var(--sds-color-line-strong);
    border-radius: var(--sds-radius-pill);
    background-color: var(--sds-color-surface-raised);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-label-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-label-weight);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
  }

  .sds-social-link :is(.sds-brand, .sds-icon) {
    width: 1.3em;
    height: 1.3em;
  }

  .sds-social-links:where([data-size="lg"]) .sds-social-link {
    min-width: var(--sds-icon-button-lg-size);
    height: var(--sds-icon-button-lg-size);
    font-size: calc(var(--sds-type-heading-size) * var(--sds-type-scale));
  }

  .sds-social-links:where([data-variant="icon-only"]) .sds-social-link-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .sds-social-links:where([data-variant="icon-label"]) .sds-social-link {
    padding: 0 var(--sds-space-5) 0 var(--sds-space-4);
    border-radius: var(--sds-button-radius);
  }

  @media (hover: hover) {
    .sds-social-link:where(:hover:not([aria-disabled="true"])) {
      border-color: var(--sds-color-accent-text);
      background-color: color-mix(in srgb, var(--sds-color-accent) 14%, var(--sds-color-surface-raised));
    }
  }

  .sds-social-link:where(:active:not([aria-disabled="true"])) {
    transform: scale(0.95);
  }

  .sds-social-link:where([aria-disabled="true"]) {
    border-color: transparent;
    background-color: var(--sds-color-disabled);
    color: var(--sds-color-on-disabled);
    cursor: not-allowed;
  }

  /* --- share-sheet (dialog.sds-dialog.sds-share-sheet) ------------------------- */

  .sds-share-sheet {
    display: grid;
    gap: var(--sds-space-5);
  }

  .sds-share-sheet:not([open]) {
    display: none;
  }

  .sds-share-sheet::backdrop {
    background-color: var(--sds-color-scrim);
  }

  .sds-share-sheet > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sds-space-4);
  }

  .sds-share-sheet > header > :is(h2, h3) {
    margin: 0;
    font-family: var(--sds-font-display);
    font-size: calc(var(--sds-type-title-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-title-weight);
  }

  .sds-share-sheet-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sds-space-3);
  }

  .sds-share-sheet-actions > * {
    flex: 1 1 auto;
  }

  .sds-share-sheet [data-sds-share="native"][hidden] {
    display: none;
  }

  @media (max-width: 40em) {
    .sds-share-sheet {
      width: 100%;
      max-width: none;
      margin-block-end: 0;
      border-end-start-radius: 0;
      border-end-end-radius: 0;
    }
  }

  /* --- contact-card: the address as selectable text, a copy button ------------ */

  .sds-contact-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sds-space-2) var(--sds-space-4);
    padding: var(--sds-space-4) var(--sds-space-5);
    border: var(--sds-border-thin) solid var(--sds-color-line);
    border-radius: var(--sds-panel-radius);
    background-color: var(--sds-color-surface-raised);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
    transition: border-color var(--sds-motion-fast) var(--sds-ease-standard);
  }

  .sds-contact-card > .sds-icon {
    width: 1.5em;
    height: 1.5em;
    color: var(--sds-color-accent-text);
  }

  .sds-contact-card-label {
    display: block;
    color: var(--sds-color-text-muted);
    font-size: calc(var(--sds-type-caption-size) * var(--sds-type-scale));
  }

  .sds-contact-address {
    display: block;
    border-radius: var(--sds-radius-sm);
    font-family: var(--sds-font-mono);
    font-size: calc(var(--sds-type-body-size) * var(--sds-type-scale));
    overflow-wrap: anywhere;
    cursor: text;
    user-select: all;
    -webkit-user-select: all;
  }

  .sds-contact-card-copied {
    display: none;
  }

  .sds-contact-card:where([data-state="copied"]) {
    border-color: var(--sds-color-success);
  }

  .sds-contact-card:where([data-state="copied"]) .sds-contact-card-copied {
    display: inline;
  }

  .sds-contact-card:where([data-state="copied"]) .sds-contact-card-copy {
    display: none;
  }

  /* --- feedback-form and newsletter-signup (forms that raise events) ---------- */

  .sds-feedback-form,
  .sds-newsletter-signup {
    display: grid;
    gap: var(--sds-feedback-form-gap);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
  }

  :is(.sds-feedback-form, .sds-newsletter-signup) fieldset {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  :is(.sds-feedback-form, .sds-newsletter-signup) legend,
  :is(.sds-feedback-form, .sds-newsletter-signup) .sds-form-label {
    display: block;
    margin-bottom: var(--sds-space-3);
    padding: 0;
    font-size: calc(var(--sds-type-label-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-label-weight);
  }

  .sds-form-choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sds-space-3);
  }

  .sds-reaction {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: max(var(--sds-icon-button-lg-size), var(--sds-touch-target));
    height: max(var(--sds-icon-button-lg-size), var(--sds-touch-target));
    border: var(--sds-border-thin) solid var(--sds-color-line-strong);
    border-radius: var(--sds-radius-round);
    background-color: var(--sds-color-surface-raised);
    color: var(--sds-color-text-muted);
    cursor: pointer;
  }

  .sds-reaction .sds-icon {
    width: calc(var(--sds-icon-button-lg-size) * 0.5);
    height: calc(var(--sds-icon-button-lg-size) * 0.5);
  }

  @media (hover: hover) {
    .sds-reaction:where(:hover:not(:has(> input:disabled))) {
      border-color: var(--sds-color-accent-text);
      color: var(--sds-color-text);
    }
  }

  .sds-reaction:where(:active) {
    transform: scale(0.92);
  }

  .sds-reaction:where(:has(> input:checked)) {
    border-color: var(--sds-color-accent-text);
    background-color: var(--sds-color-accent);
    color: var(--sds-color-on-accent);
  }

  .sds-newsletter-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sds-space-3);
  }

  .sds-newsletter-row > .sds-text-input {
    flex: 1 1 calc(var(--sds-touch-target) * 5);
    width: auto;
  }

  .sds-consent {
    margin: 0;
    color: var(--sds-color-text-muted);
    font-size: calc(var(--sds-type-caption-size) * var(--sds-type-scale));
    line-height: var(--sds-type-caption-line-height);
  }

  .sds-form-status {
    margin: 0;
    font-size: calc(var(--sds-type-label-size) * var(--sds-type-scale));
  }

  .sds-form-status:empty {
    display: none;
  }

  .sds-form-sent {
    display: none;
  }

  :is(.sds-feedback-form, .sds-newsletter-signup):where([data-state="invalid"]) .sds-form-status {
    padding: var(--sds-space-3) var(--sds-space-4);
    border-radius: var(--sds-radius-md);
    background-color: var(--sds-color-danger-soft);
  }

  :is(.sds-feedback-form, .sds-newsletter-signup):where([data-state="submitting"]) {
    cursor: progress;
  }

  :is(.sds-feedback-form, .sds-newsletter-signup):where([data-state="submitting"]) > :not(.sds-form-status) {
    opacity: var(--sds-opacity-disabled);
    pointer-events: none;
  }

  :is(.sds-feedback-form, .sds-newsletter-signup):where([data-state="sent"]) > :not(.sds-form-sent) {
    display: none;
  }

  :is(.sds-feedback-form, .sds-newsletter-signup):where([data-state="sent"]) > .sds-form-sent {
    display: flex;
    align-items: center;
    gap: var(--sds-space-3);
    padding: var(--sds-space-4);
    border-radius: var(--sds-radius-md);
    background-color: var(--sds-color-success-soft);
    animation: sds-fade-in var(--sds-motion-base) var(--sds-ease-standard);
  }

  .sds-form-sent > .sds-icon {
    width: 1.5em;
    height: 1.5em;
    color: var(--sds-color-success);
  }

  /* --- rating-prompt (aside): always dismissible ----------------------------- */

  .sds-rating-prompt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--sds-space-3) var(--sds-space-4);
    max-width: var(--sds-dialog-width);
    padding: var(--sds-space-5);
    border: var(--sds-border-thin) solid var(--sds-color-line);
    border-radius: var(--sds-panel-radius);
    background-color: var(--sds-color-surface-raised);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
    box-shadow: var(--sds-shadow-md);
    animation: sds-toast-in var(--sds-motion-base) var(--sds-ease-emphasis);
  }

  .sds-rating-prompt > :not(.sds-close-button) {
    grid-column: 1;
    margin: 0;
  }

  .sds-rating-prompt > .sds-close-button {
    grid-column: 2;
    grid-row: 1;
    margin: calc(var(--sds-space-3) * -1) calc(var(--sds-space-3) * -1) 0 0;
  }

  .sds-rating-prompt > .sds-rating-prompt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sds-space-3);
    grid-column: 1 / -1;
  }

  .sds-rating-prompt:where([data-state="dismissed"]),
  .sds-rating-prompt[hidden] {
    display: none;
  }

  /* --- link-row (a[rel=noopener]): an external link with a leaving notice ------ */

  .sds-link-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sds-space-4);
    min-height: var(--sds-list-item-md-height);
    padding: var(--sds-space-3) var(--sds-list-item-padding-x);
    border-radius: var(--sds-radius-md);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-body-size) * var(--sds-type-scale));
    text-decoration: none;
    cursor: pointer;
  }

  .sds-link-row .sds-icon {
    width: 1.25em;
    height: 1.25em;
    color: var(--sds-color-text-muted);
  }

  .sds-link-row > .sds-icon:last-child {
    margin-inline-start: auto;
  }

  .sds-link-row-text {
    display: grid;
    gap: var(--sds-space-1);
    min-width: 0;
  }

  .sds-link-row-label {
    font-weight: var(--sds-type-label-weight);
  }

  .sds-link-row-note {
    color: var(--sds-color-text-muted);
    font-size: calc(var(--sds-type-caption-size) * var(--sds-type-scale));
    overflow-wrap: anywhere;
  }

  @media (hover: hover) {
    .sds-link-row:where(:hover:not([aria-disabled="true"])) {
      background-color: color-mix(in srgb, var(--sds-color-accent) 12%, transparent);
    }
  }

  .sds-link-row:where(:active:not([aria-disabled="true"])) {
    background-color: color-mix(in srgb, var(--sds-color-accent) 20%, transparent);
  }

  .sds-link-row:where([aria-disabled="true"]) {
    color: var(--sds-color-on-disabled);
    cursor: not-allowed;
  }

  /* --- leaving notice and parental gate (built by sds.js) --------------------- */

  .sds-leave-dialog {
    display: grid;
    gap: var(--sds-space-4);
  }

  .sds-leave-dialog:not([open]) {
    display: none;
  }

  .sds-leave-dialog::backdrop {
    background-color: var(--sds-color-scrim);
  }

  .sds-leave-dialog h2 {
    margin: 0;
    font-family: var(--sds-font-display);
    font-size: calc(var(--sds-type-title-size) * var(--sds-type-scale));
  }

  .sds-leave-dialog p {
    margin: 0;
    color: var(--sds-color-text-muted);
  }

  .sds-leave-dialog-url {
    font-family: var(--sds-font-mono);
    overflow-wrap: anywhere;
  }

  .sds-gate-question {
    color: var(--sds-color-text);
    font-size: calc(var(--sds-type-heading-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-heading-weight);
  }

  .sds-gate-answers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--sds-touch-target), 1fr));
    gap: var(--sds-space-3);
  }

  .sds-leave-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sds-space-3);
  }

  /* --- qr-code (figure): a frame with a quiet zone around the game's image ------
     The quiet zone is white whatever the theme: phone scanners need a light margin. */

  .sds-qr-code {
    display: inline-grid;
    justify-items: center;
    gap: var(--sds-space-3);
    padding: var(--sds-space-4);
    border: var(--sds-border-thin) solid var(--sds-color-line);
    border-radius: var(--sds-panel-radius);
    background-color: var(--sds-color-surface-raised);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
  }

  .sds-qr-code > :is(img, canvas, svg) {
    display: block;
    box-sizing: content-box;
    width: var(--sds-qr-code-size);
    height: var(--sds-qr-code-size);
    padding: var(--sds-qr-code-quiet-zone);
    border-radius: var(--sds-radius-sm);
    background-color: white;
    image-rendering: pixelated;
  }

  .sds-qr-code > figcaption {
    max-width: calc(var(--sds-qr-code-size) + 2 * var(--sds-qr-code-quiet-zone));
    color: var(--sds-color-text-muted);
    font-size: calc(var(--sds-type-caption-size) * var(--sds-type-scale));
    line-height: var(--sds-type-caption-line-height);
    text-align: center;
  }

  /* sds-part: forms */
  /* ====================================================== v1.2 core: forms
     stepper, hold-button, assign-slot. Link parts/forms.css for these. */

  :where(.sds-stepper, .sds-hold-button, .sds-assign-slot),
  :where(.sds-stepper-decrement, .sds-stepper-increment, .sds-hold-button, .sds-assign-slot)::before {
    box-sizing: border-box;
  }

  :where(.sds-stepper-decrement, .sds-stepper-increment, .sds-hold-button, .sds-assign-slot) {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
  }

  .sds-stepper-decrement,
  .sds-stepper-increment,
  .sds-hold-button,
  .sds-assign-slot {
    position: relative;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    transition:
      background-color var(--sds-motion-fast) var(--sds-ease-standard),
      border-color var(--sds-motion-fast) var(--sds-ease-standard),
      color var(--sds-motion-fast) var(--sds-ease-standard),
      transform var(--sds-motion-fast) var(--sds-ease-standard);
  }

  .sds-stepper-decrement::before,
  .sds-stepper-increment::before,
  .sds-hold-button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, var(--sds-touch-target));
    height: max(100%, var(--sds-touch-target));
    transform: translate(-50%, -50%);
  }

  .sds-stepper-decrement:focus-visible,
  .sds-stepper-increment:focus-visible,
  .sds-stepper-value:focus-visible,
  .sds-hold-button:focus-visible,
  .sds-assign-slot:focus-visible {
    outline: var(--sds-focus-ring-width) solid var(--sds-color-focus);
    outline-offset: var(--sds-focus-ring-offset);
  }

  /* --- stepper: div[role=group] > button.decrement, input.value, button.increment ---------
     The value is input[inputmode=numeric] role="spinbutton" (never type=number); sds.js steps,
     repeats while held, clamps typed values and sets data-state at-min, at-max, editing. */

  .sds-stepper {
    display: inline-flex;
    align-items: stretch;
    height: var(--sds-stepper-md-height);
    border: var(--sds-border-thin) solid var(--sds-color-line-strong);
    border-radius: var(--sds-button-radius);
    background-color: var(--sds-color-surface-raised);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
  }

  .sds-stepper:where([data-size="lg"]) {
    height: var(--sds-stepper-lg-height);
  }

  .sds-stepper-decrement,
  .sds-stepper-increment {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--sds-stepper-md-height);
    border-radius: var(--sds-button-radius);
    font-size: calc(var(--sds-type-heading-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-heading-weight);
    line-height: 1;
  }

  .sds-stepper:where([data-size="lg"]) :is(.sds-stepper-decrement, .sds-stepper-increment) {
    width: var(--sds-stepper-lg-height);
  }

  :is(.sds-stepper-decrement, .sds-stepper-increment) .sds-icon {
    width: 1em;
    height: 1em;
  }

  @media (hover: hover) {
    :is(.sds-stepper-decrement, .sds-stepper-increment):where(:hover:not(:disabled, [aria-disabled="true"])) {
      background-color: color-mix(in srgb, var(--sds-color-text) 8%, transparent);
    }
  }

  :is(.sds-stepper-decrement, .sds-stepper-increment):where(:active:not(:disabled, [aria-disabled="true"])) {
    background-color: color-mix(in srgb, var(--sds-color-accent) 22%, transparent);
    transform: scale(0.94);
  }

  /* At a limit the button stays focusable (a press plays ui.deny) but reads as unavailable. */
  :is(.sds-stepper-decrement, .sds-stepper-increment):where([aria-disabled="true"], :disabled) {
    color: var(--sds-color-text-faint);
    cursor: not-allowed;
  }

  .sds-stepper-value {
    flex: 1 0 auto;
    width: var(--sds-stepper-value-width);
    min-width: 0;
    margin: 0;
    padding: 0 var(--sds-space-2);
    border: 0;
    border-inline: var(--sds-border-thin) solid var(--sds-color-line);
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: calc(var(--sds-type-body-size) * var(--sds-type-scale));
    font-variant-numeric: tabular-nums;
    text-align: center;
  }

  .sds-stepper-value:focus-visible {
    outline-offset: calc(var(--sds-focus-ring-width) * -1);
  }

  .sds-stepper:where([data-state="editing"]) {
    border-color: var(--sds-color-accent-text);
  }

  .sds-stepper:where([data-state="editing"]) .sds-stepper-value {
    background-color: var(--sds-color-surface);
  }

  .sds-stepper:where([aria-disabled="true"], :has(.sds-stepper-value:disabled)) {
    border-color: var(--sds-color-disabled);
    color: var(--sds-color-on-disabled);
  }

  /* --- hold-button: acts only after a held press of hold-button.duration ---------------
     <button class="sds-hold-button" data-variant="danger"><span class="sds-hold-button-fill"
     aria-hidden="true"></span>Skip</button>. sds.js sets data-state holding, complete. */

  .sds-hold-button {
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sds-space-3);
    min-height: var(--sds-button-md-height);
    padding: 0 var(--sds-button-md-padding-x);
    border: var(--sds-border-thin) solid transparent;
    border-radius: var(--sds-button-radius);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-button-md-font-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-label-weight);
    line-height: var(--sds-type-label-line-height);
    touch-action: none;
    -webkit-touch-callout: none;
  }

  .sds-hold-button:where([data-size="sm"]) {
    min-height: var(--sds-button-sm-height);
    padding: 0 var(--sds-button-sm-padding-x);
    font-size: calc(var(--sds-button-sm-font-size) * var(--sds-type-scale));
  }

  .sds-hold-button:where([data-size="lg"]) {
    min-height: var(--sds-button-lg-height);
    padding: 0 var(--sds-button-lg-padding-x);
    font-size: calc(var(--sds-button-lg-font-size) * var(--sds-type-scale));
  }

  .sds-hold-button:where(:not([data-variant]), [data-variant="primary"]) {
    --_hold-fill: var(--sds-color-accent-strong);
    background-color: var(--sds-color-accent);
    color: var(--sds-color-on-accent);
  }

  .sds-hold-button:where([data-variant="secondary"]) {
    --_hold-fill: var(--sds-hold-button-fill);
    border-color: var(--sds-color-line-strong);
    background-color: var(--sds-color-surface-raised);
    color: var(--sds-color-text);
  }

  .sds-hold-button:where([data-variant="danger"]) {
    --_hold-fill: color-mix(in srgb, var(--sds-color-danger) 82%, var(--sds-color-text));
    background-color: var(--sds-color-danger);
    color: var(--sds-color-on-danger);
  }

  .sds-hold-button-fill {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--_hold-fill);
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--sds-motion-fast) var(--sds-ease-exit);
  }

  .sds-hold-button:dir(rtl) .sds-hold-button-fill {
    transform-origin: 100% 50%;
  }

  .sds-hold-button:where([data-state="holding"], [data-state="complete"]) .sds-hold-button-fill {
    transform: scaleX(1);
  }

  .sds-hold-button:where([data-state="holding"]) .sds-hold-button-fill {
    transition: transform var(--sds-hold-button-duration) linear;
  }

  .sds-hold-button:where([data-state="complete"]) {
    box-shadow: var(--sds-glow-sm);
  }

  .sds-hold-button:where(:disabled, [aria-disabled="true"]) {
    border-color: transparent;
    background-color: var(--sds-color-disabled);
    color: var(--sds-color-on-disabled);
    cursor: not-allowed;
  }

  /* --- assign-slot: a place that takes a person or an item -----------------------------
     <button class="sds-assign-slot" data-variant="person" data-state="empty" aria-label="Empty
     slot, assign a crew member">. Filled: art, label, an actions mark (the menu is a context-menu). */

  .sds-assign-slot {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sds-space-2);
    width: max(var(--sds-assign-slot-size), var(--sds-touch-target));
    min-height: max(var(--sds-assign-slot-size), var(--sds-touch-target));
    padding: var(--sds-space-3);
    border: var(--sds-border-thick) solid var(--sds-color-line);
    border-radius: var(--sds-assign-slot-radius);
    background-color: var(--sds-color-surface-raised);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-caption-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-label-weight);
    line-height: var(--sds-type-caption-line-height);
    text-align: center;
  }

  .sds-assign-slot-art {
    display: block;
    width: 50%;
    aspect-ratio: 1;
    border-radius: var(--sds-radius-sm);
    background-color: var(--sds-color-surface);
    object-fit: cover;
  }

  .sds-assign-slot:where([data-variant="person"]) .sds-assign-slot-art {
    border-radius: var(--sds-radius-round);
  }

  .sds-assign-slot:where([data-variant="item"]) .sds-assign-slot-art {
    border-radius: var(--sds-radius-sm);
  }

  .sds-assign-slot-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sds-assign-slot-actions {
    position: absolute;
    inset-block-start: var(--sds-space-1);
    inset-inline-end: var(--sds-space-1);
    display: inline-flex;
    color: var(--sds-color-text-muted);
  }

  .sds-assign-slot-actions .sds-icon {
    width: 1em;
    height: 1em;
  }

  /* Empty: a dashed outline and a plus (shape as well as color). */
  .sds-assign-slot:where([data-state="empty"]) {
    border-style: dashed;
    border-color: var(--sds-color-line-strong);
    background-color: transparent;
    color: var(--sds-color-text-muted);
  }

  .sds-assign-slot:where([data-state="empty"])::after {
    content: "";
    width: 40%;
    aspect-ratio: 1;
    background:
      linear-gradient(currentColor, currentColor) center / 100% var(--sds-border-thick) no-repeat,
      linear-gradient(currentColor, currentColor) center / var(--sds-border-thick) 100% no-repeat;
  }

  .sds-assign-slot:where([data-state="empty"]) :is(.sds-assign-slot-art, .sds-assign-slot-actions) {
    display: none;
  }

  @media (hover: hover) {
    .sds-assign-slot:where(:hover:not(:disabled, [aria-disabled="true"])) {
      border-color: var(--sds-color-accent-text);
    }
  }

  .sds-assign-slot:where(:active:not(:disabled, [aria-disabled="true"])) {
    transform: scale(0.97);
  }

  .sds-assign-slot:where([aria-pressed="true"], [aria-selected="true"]) {
    border-style: solid;
    border-color: var(--sds-color-accent-text);
    box-shadow: inset 0 0 0 var(--sds-border-thin) var(--sds-color-accent-text);
  }

  .sds-assign-slot:where(:disabled, [aria-disabled="true"]) {
    border-color: var(--sds-color-disabled);
    color: var(--sds-color-on-disabled);
    cursor: not-allowed;
  }

  @media (prefers-reduced-motion: reduce) {
    .sds-hold-button:where([data-state="holding"]) .sds-hold-button-fill {
      transition-timing-function: steps(4, end);
    }
  }

  :root[data-sds-motion="reduce"] .sds-hold-button:where([data-state="holding"]) .sds-hold-button-fill {
    transition-timing-function: steps(4, end);
  }

  /* sds-part: layout */
  /* ===================================================== v1.2 core: layout
     content-card, sheet, grid, carousel, pagination-dots, action-bar, nav-rail, data-table,
     avatar, setting-detail. Link parts/layout.css for these. */

  :where(.sds-content-card, .sds-sheet, .sds-carousel, .sds-page-dot, .sds-nav-rail, .sds-nav-rail-item,
    .sds-data-table, .sds-avatar, .sds-setting-detail),
  :where(.sds-page-dot, .sds-nav-rail-item, .sds-carousel-previous, .sds-carousel-next, .sds-sheet-handle, .sds-data-table-sort)::before {
    box-sizing: border-box;
  }

  :where(button.sds-content-card, a.sds-content-card, .sds-page-dot, .sds-nav-rail-item, .sds-carousel-previous,
    .sds-carousel-next, .sds-carousel-item, .sds-sheet-handle, .sds-data-table-sort) {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
    text-decoration: none;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
  }

  :where(.sds-nav-rail > ul, .sds-pagination-dots) {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .sds-content-card:where([data-variant="interactive"]),
  .sds-page-dot,
  .sds-nav-rail-item,
  .sds-carousel-previous,
  .sds-carousel-next,
  .sds-sheet-handle,
  .sds-data-table-sort {
    position: relative;
    cursor: pointer;
    touch-action: manipulation;
    transition:
      background-color var(--sds-motion-fast) var(--sds-ease-standard),
      border-color var(--sds-motion-fast) var(--sds-ease-standard),
      color var(--sds-motion-fast) var(--sds-ease-standard),
      box-shadow var(--sds-motion-fast) var(--sds-ease-standard),
      transform var(--sds-motion-fast) var(--sds-ease-standard);
  }

  .sds-carousel-previous::before,
  .sds-carousel-next::before,
  .sds-sheet-handle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, var(--sds-touch-target));
    height: max(100%, var(--sds-touch-target));
    transform: translate(-50%, -50%);
  }

  .sds-content-card:where([data-variant="interactive"]):focus-visible,
  .sds-page-dot:focus-visible,
  .sds-nav-rail-item:focus-visible,
  .sds-carousel-previous:focus-visible,
  .sds-carousel-next:focus-visible,
  .sds-carousel-item:focus-visible,
  .sds-carousel-track:focus-visible,
  .sds-sheet-handle:focus-visible,
  .sds-data-table-sort:focus-visible,
  .sds-data-table-row:focus-visible {
    outline: var(--sds-focus-ring-width) solid var(--sds-color-focus);
    outline-offset: var(--sds-focus-ring-offset);
  }

  /* --- content-card: article (static) or button / a (interactive) ----------------------- */

  .sds-content-card {
    display: flex;
    flex-direction: column;
    gap: var(--sds-content-card-gap);
    min-width: 0;
    padding: var(--sds-content-card-padding);
    border: var(--sds-border-thin) solid var(--sds-color-line);
    border-radius: var(--sds-content-card-radius);
    background-color: var(--sds-color-surface-raised);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-body-size) * var(--sds-type-scale));
    line-height: var(--sds-type-body-line-height);
    text-align: start;
  }

  .sds-content-card-media {
    display: block;
    width: calc(100% + 2 * var(--sds-content-card-padding));
    max-width: none;
    margin: calc(var(--sds-content-card-padding) * -1) calc(var(--sds-content-card-padding) * -1) 0;
    aspect-ratio: var(--sds-content-card-media-ratio);
    border-radius: var(--sds-content-card-radius) var(--sds-content-card-radius) 0 0;
    background-color: var(--sds-color-surface);
    object-fit: cover;
  }

  .sds-content-card-title {
    margin: 0;
    font-family: var(--sds-font-display);
    font-size: calc(var(--sds-type-heading-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-heading-weight);
    line-height: var(--sds-type-heading-line-height);
  }

  .sds-content-card-body {
    margin: 0;
    color: var(--sds-color-text-muted);
  }

  .sds-content-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sds-space-3);
    margin-top: auto;
    padding-top: var(--sds-space-2);
  }

  @media (hover: hover) {
    .sds-content-card:where([data-variant="interactive"]):where(:hover:not(:disabled, [aria-disabled="true"])) {
      border-color: var(--sds-color-accent-text);
      box-shadow: var(--sds-shadow-md);
      transform: translateY(calc(var(--sds-space-1) * -1));
    }
  }

  .sds-content-card:where([data-variant="interactive"]):where(:active:not(:disabled, [aria-disabled="true"])) {
    box-shadow: none;
    transform: scale(0.98);
  }

  .sds-content-card:where([aria-pressed="true"], [aria-current="true"], [aria-current="page"], [aria-selected="true"]) {
    border-color: var(--sds-color-accent-text);
    box-shadow: inset 0 0 0 var(--sds-border-thin) var(--sds-color-accent-text);
  }

  .sds-content-card:where([data-variant="interactive"]):where(:disabled, [aria-disabled="true"]) {
    border-color: var(--sds-color-disabled);
    color: var(--sds-color-on-disabled);
    cursor: not-allowed;
  }

  .sds-content-card:where([data-variant="interactive"]):where(:disabled, [aria-disabled="true"]) .sds-content-card-body {
    color: inherit;
  }

  /* --- sheet: dialog.sds-sheet, slides in from the end edge (side) or the bottom --------- */

  .sds-sheet {
    position: fixed;
    display: none;
    flex-direction: column;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: var(--sds-border-thin) solid var(--sds-color-line);
    background-color: var(--sds-color-surface-raised);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-body-size) * var(--sds-type-scale));
    line-height: var(--sds-type-body-line-height);
    box-shadow: var(--sds-shadow-lg);
  }

  .sds-sheet[open] {
    display: flex;
  }

  .sds-sheet::backdrop {
    background-color: var(--sds-color-scrim);
  }

  .sds-sheet:where(:not([data-variant]), [data-variant="side"]) {
    inset: 0 0 0 auto;
    width: min(var(--sds-sheet-side-width), 100%);
    height: 100%;
    border-block: 0;
    border-inline-end: 0;
    border-radius: var(--sds-sheet-radius) 0 0 var(--sds-sheet-radius);
  }

  .sds-sheet:where(:not([data-variant]), [data-variant="side"]):dir(rtl) {
    inset: 0 auto 0 0;
    border-radius: 0 var(--sds-sheet-radius) var(--sds-sheet-radius) 0;
  }

  .sds-sheet:where([data-variant="bottom"]) {
    inset: auto 0 0;
    width: 100%;
    max-height: calc(var(--sds-sheet-bottom-max) * 100dvh);
    border-inline: 0;
    border-bottom: 0;
    border-radius: var(--sds-sheet-radius) var(--sds-sheet-radius) 0 0;
  }

  .sds-sheet:where(:not([data-variant]), [data-variant="side"])[open] {
    animation: sds-sheet-side-in var(--sds-motion-base) var(--sds-ease-emphasis);
  }

  .sds-sheet:where(:not([data-variant]), [data-variant="side"])[open]:dir(rtl) {
    animation-name: sds-sheet-side-in-rtl;
  }

  .sds-sheet:where([data-variant="bottom"])[open] {
    animation: sds-sheet-bottom-in var(--sds-motion-base) var(--sds-ease-emphasis);
  }

  .sds-sheet[open]::backdrop {
    animation: sds-fade-in var(--sds-motion-base) var(--sds-ease-standard);
  }

  .sds-sheet:where([data-state="dragging"]) {
    animation: none;
    transform: translate(var(--_drag-x, 0%), var(--_drag-y, 0%));
  }

  .sds-sheet-handle {
    display: block;
    flex: none;
    width: var(--sds-space-8);
    height: var(--sds-space-2);
    margin: var(--sds-space-4) auto 0;
    border-radius: var(--sds-radius-pill);
    background-color: var(--sds-color-line-strong);
  }

  .sds-sheet-body {
    flex: 1;
    min-height: 0;
    padding: var(--sds-sheet-padding);
    overflow: auto;
    overscroll-behavior: contain;
  }

  @keyframes sds-sheet-side-in {
    from {
      transform: translateX(100%);
    }
  }

  @keyframes sds-sheet-side-in-rtl {
    from {
      transform: translateX(-100%);
    }
  }

  @keyframes sds-sheet-bottom-in {
    from {
      transform: translateY(100%);
    }
  }

  /* --- grid: tiles in as many columns as fit grid.tile-min; sds.js moves focus in 2D ---- */

  .sds-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--sds-grid-tile-min), 100%), 1fr));
    gap: var(--sds-grid-gap);
  }

  /* --- pagination-dots: nav > button.sds-page-dot[aria-current] ------------------------- */

  .sds-pagination-dots {
    display: inline-flex;
    align-items: center;
    gap: 0;
  }

  /* Each dot is a button the touch target wide; the dot is drawn in its middle. */
  .sds-page-dot {
    display: inline-grid;
    place-items: center;
    width: max(var(--sds-touch-target), var(--sds-pagination-dots-current-size) + var(--sds-pagination-dots-gap));
    height: var(--sds-touch-target);
    border-radius: var(--sds-radius-md);
  }

  .sds-page-dot::before {
    content: "";
    width: var(--sds-pagination-dots-size);
    height: var(--sds-pagination-dots-size);
    border: var(--sds-border-thick) solid var(--sds-color-text-muted);
    border-radius: var(--sds-radius-round);
    transition:
      width var(--sds-motion-fast) var(--sds-ease-standard),
      height var(--sds-motion-fast) var(--sds-ease-standard),
      background-color var(--sds-motion-fast) var(--sds-ease-standard);
  }

  @media (hover: hover) {
    .sds-page-dot:where(:hover)::before {
      border-color: var(--sds-color-text);
    }
  }

  .sds-page-dot:where([aria-current="true"], [aria-current="page"], [aria-current="step"])::before {
    width: var(--sds-pagination-dots-current-size);
    height: var(--sds-pagination-dots-current-size);
    border-color: var(--sds-color-accent-text);
    background-color: var(--sds-color-accent-text);
  }

  /* --- action-bar: the row of buttons at the foot of a dialog or screen ----------------- */

  .sds-action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sds-action-bar-gap);
    padding-block-start: var(--sds-action-bar-padding);
  }

  .sds-action-bar:where([data-variant="center"]) {
    justify-content: center;
  }

  .sds-action-bar:where([data-variant="split"]) > :last-child {
    margin-inline-start: auto;
  }

  .sds-action-bar:where([data-variant="stack"]) {
    flex-direction: column;
    align-items: stretch;
  }

  /* --- carousel: section[aria-roledescription=carousel] ----------------------------------
     .sds-carousel-previous | .sds-carousel-track > .sds-carousel-item... | .sds-carousel-next,
     then .sds-carousel-caption and an optional .sds-pagination-dots. The track scrolls (swipe
     is native); sds.js centers the current item and sets data-state at-start, at-end. */

  .sds-carousel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "previous track next" ". caption ." ". dots .";
    align-items: center;
    gap: var(--sds-space-3);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
  }

  .sds-carousel-track {
    grid-area: track;
    display: flex;
    gap: var(--sds-carousel-gap);
    padding: var(--sds-space-3) 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .sds-carousel-track::-webkit-scrollbar {
    display: none;
  }

  .sds-carousel-item {
    position: relative;
    flex: 0 0 min(var(--sds-carousel-item-width), 100%);
    min-height: var(--sds-touch-target);
    border: var(--sds-border-thick) solid transparent;
    border-radius: var(--sds-content-card-radius);
    scroll-snap-align: center;
    opacity: 0.6;
    transition:
      opacity var(--sds-motion-base) var(--sds-ease-standard),
      border-color var(--sds-motion-base) var(--sds-ease-standard);
  }

  .sds-carousel-item:where([aria-current="true"]) {
    border-color: var(--sds-color-accent-text);
    opacity: 1;
  }

  /* strip: neighbors peek at the edges around the centered item. */
  .sds-carousel:where(:not([data-variant]), [data-variant="strip"]) .sds-carousel-track {
    padding-inline: max(var(--sds-carousel-peek), calc(50% - var(--sds-carousel-item-width) / 2));
  }

  .sds-carousel:where([data-variant="picker"]) .sds-carousel-item {
    flex-basis: 100%;
  }

  .sds-carousel-previous,
  .sds-carousel-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sds-icon-button-md-size);
    height: var(--sds-icon-button-md-size);
    border: var(--sds-border-thin) solid var(--sds-color-line-strong);
    border-radius: var(--sds-radius-round);
    background-color: var(--sds-color-surface-raised);
    color: var(--sds-color-text);
  }

  .sds-carousel-previous {
    grid-area: previous;
  }

  .sds-carousel-next {
    grid-area: next;
  }

  :is(.sds-carousel-previous, .sds-carousel-next) .sds-icon {
    width: 50%;
    height: 50%;
  }

  :is(.sds-carousel-previous, .sds-carousel-next):dir(rtl) .sds-icon {
    transform: scaleX(-1);
  }

  @media (hover: hover) {
    :is(.sds-carousel-previous, .sds-carousel-next):where(:hover:not([aria-disabled="true"])) {
      border-color: var(--sds-color-accent-text);
    }
  }

  :is(.sds-carousel-previous, .sds-carousel-next):where(:active:not([aria-disabled="true"])) {
    transform: scale(0.94);
  }

  :is(.sds-carousel-previous, .sds-carousel-next):where([aria-disabled="true"]) {
    border-color: var(--sds-color-line);
    color: var(--sds-color-text-faint);
    cursor: not-allowed;
  }

  .sds-carousel-caption {
    grid-area: caption;
    margin: 0;
    font-size: calc(var(--sds-type-label-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-label-weight);
    text-align: center;
  }

  .sds-carousel > .sds-pagination-dots {
    grid-area: dots;
    justify-self: center;
  }

  /* --- nav-rail: nav.sds-nav-rail > ul > li > a|button.sds-nav-rail-item ---------------
     Item: .sds-nav-rail-indicator, an icon, .sds-nav-rail-label, an optional
     .sds-nav-rail-badge. Selected: aria-current="page" (bar and fill, not color alone). */

  .sds-nav-rail {
    display: flex;
    flex-direction: column;
    padding: var(--sds-space-3);
    border-inline-end: var(--sds-border-thin) solid var(--sds-color-line);
    background-color: var(--sds-color-surface);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
  }

  .sds-nav-rail > ul {
    display: flex;
    flex-direction: column;
    gap: var(--sds-space-1);
  }

  .sds-nav-rail-item {
    display: flex;
    align-items: center;
    gap: var(--sds-space-4);
    width: 100%;
    min-height: max(var(--sds-nav-rail-item-height), var(--sds-touch-target));
    padding: 0 var(--sds-space-4);
    border-radius: var(--sds-radius-md);
    color: var(--sds-color-text-muted);
    font-size: calc(var(--sds-type-label-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-label-weight);
    text-align: start;
  }

  .sds-nav-rail-item .sds-icon {
    flex: none;
    width: 1.25em;
    height: 1.25em;
  }

  .sds-nav-rail-indicator {
    position: absolute;
    inset-block: var(--sds-space-3);
    inset-inline-start: 0;
    width: var(--sds-nav-rail-indicator);
    border-radius: var(--sds-radius-pill);
  }

  .sds-nav-rail-badge {
    margin-inline-start: auto;
  }

  @media (hover: hover) {
    .sds-nav-rail-item:where(:hover:not(:disabled, [aria-disabled="true"])) {
      background-color: color-mix(in srgb, var(--sds-color-text) 8%, transparent);
      color: var(--sds-color-text);
    }
  }

  .sds-nav-rail-item:where(:active:not(:disabled, [aria-disabled="true"])) {
    transform: scale(0.98);
  }

  .sds-nav-rail-item:where([aria-current="page"], [aria-current="true"], [aria-selected="true"]) {
    background-color: var(--sds-color-accent-soft);
    color: var(--sds-color-text);
  }

  .sds-nav-rail-item:where([aria-current="page"], [aria-current="true"], [aria-selected="true"]) .sds-nav-rail-indicator {
    background-color: var(--sds-color-accent-text);
  }

  .sds-nav-rail-item:where(:disabled, [aria-disabled="true"]) {
    color: var(--sds-color-on-disabled);
    cursor: not-allowed;
  }

  .sds-nav-rail:where(:not([data-variant]), [data-variant="expanded"]) {
    width: var(--sds-nav-rail-width);
  }

  .sds-nav-rail:where([data-variant="collapsed"]) {
    width: var(--sds-nav-rail-collapsed-width);
    padding-inline: var(--sds-space-2);
  }

  .sds-nav-rail:where([data-variant="collapsed"]) .sds-nav-rail-item {
    justify-content: center;
    padding: 0;
  }

  /* Collapsed: the label becomes the item's tooltip (it stays its accessible name). */
  .sds-nav-rail:where([data-variant="collapsed"]) .sds-nav-rail-label {
    position: absolute;
    top: 50%;
    inset-inline-start: calc(100% + var(--sds-space-3));
    z-index: var(--sds-layer-tooltip);
    padding: var(--sds-space-2) var(--sds-space-3);
    border-radius: var(--sds-radius-sm);
    background-color: var(--sds-color-text);
    color: var(--sds-color-text-inverse);
    font-size: calc(var(--sds-type-caption-size) * var(--sds-type-scale));
    white-space: nowrap;
    box-shadow: var(--sds-shadow-md);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%);
    transition:
      opacity var(--sds-motion-fast) var(--sds-ease-standard),
      visibility var(--sds-motion-fast) var(--sds-ease-standard);
  }

  .sds-nav-rail:where([data-variant="collapsed"]) .sds-nav-rail-item:where(:hover, :focus-visible) .sds-nav-rail-label {
    opacity: 1;
    visibility: visible;
  }

  .sds-nav-rail:where([data-variant="collapsed"]) .sds-nav-rail-badge {
    position: absolute;
    inset-block-start: var(--sds-space-1);
    inset-inline-end: var(--sds-space-1);
  }

  /* --- data-table: table.sds-data-table ---------------------------------------------------
     thead.sds-data-table-head > tr > th (sortable: th[aria-sort] > button.sds-data-table-sort),
     tbody > tr.sds-data-table-row[tabindex] > td.sds-data-table-cell. */

  .sds-data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-body-size) * var(--sds-type-scale));
    font-variant-numeric: tabular-nums;
    line-height: var(--sds-type-body-line-height);
  }

  .sds-data-table-head th {
    height: var(--sds-data-table-row-height);
    padding: 0 var(--sds-data-table-padding-x);
    border-bottom: var(--sds-border-thick) solid var(--sds-color-line);
    color: var(--sds-color-text-muted);
    font-size: calc(var(--sds-type-label-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-label-weight);
    text-align: start;
    vertical-align: middle;
  }

  .sds-data-table-head th .sds-icon {
    width: 1.25em;
    height: 1.25em;
  }

  .sds-data-table-cell {
    height: var(--sds-data-table-row-height);
    padding: 0 var(--sds-data-table-padding-x);
    border-bottom: var(--sds-border-thin) solid var(--sds-color-line);
    vertical-align: middle;
  }

  :is(.sds-data-table-cell, .sds-data-table-head th):where([data-type="number"]) {
    text-align: end;
  }

  .sds-data-table:where([data-variant="compact"]) :is(.sds-data-table-cell, .sds-data-table-head th) {
    height: var(--sds-data-table-compact-row-height);
  }

  .sds-data-table-row:nth-child(even) > .sds-data-table-cell {
    background-color: var(--sds-data-table-stripe);
  }

  .sds-data-table-row:where([tabindex]) {
    cursor: pointer;
  }

  .sds-data-table-row:focus-visible {
    outline-offset: calc(var(--sds-focus-ring-width) * -1);
  }

  @media (hover: hover) {
    .sds-data-table-row:where([tabindex]):where(:hover) > .sds-data-table-cell {
      background-color: color-mix(in srgb, var(--sds-color-accent) 12%, transparent);
    }
  }

  .sds-data-table-row:where([aria-selected="true"]) > .sds-data-table-cell {
    background-color: var(--sds-color-accent-soft);
  }

  .sds-data-table-row:where([aria-selected="true"]) > .sds-data-table-cell:first-child {
    box-shadow: inset var(--sds-border-heavy) 0 0 var(--sds-color-accent-text);
  }

  .sds-data-table-sort {
    display: inline-flex;
    align-items: center;
    gap: var(--sds-space-2);
    min-height: var(--sds-touch-target);
    border-radius: var(--sds-radius-sm);
    font-weight: inherit;
  }

  /* The caret: both ways faint when unsorted, one way solid when sorted (shape, not color). */
  .sds-data-table-sort::after {
    content: "";
    width: 0.6em;
    height: 0.6em;
    background: currentColor;
    clip-path: polygon(50% 0, 100% 40%, 0 40%, 0 60%, 100% 60%, 50% 100%);
    opacity: 0.45;
  }

  th[aria-sort="ascending"] > .sds-data-table-sort::after {
    clip-path: polygon(50% 15%, 100% 75%, 0 75%);
    opacity: 1;
  }

  th[aria-sort="descending"] > .sds-data-table-sort::after {
    clip-path: polygon(0 25%, 100% 25%, 50% 85%);
    opacity: 1;
  }

  th:where([aria-sort="ascending"], [aria-sort="descending"]) {
    color: var(--sds-color-text);
  }

  @media (hover: hover) {
    .sds-data-table-sort:where(:hover) {
      color: var(--sds-color-text);
    }
  }

  /* --- avatar: span.sds-avatar > img.sds-avatar-image | span.sds-avatar-initials --------- */

  .sds-avatar {
    --_size: var(--sds-avatar-md-size);
    position: relative;
    display: inline-grid;
    flex: none;
    place-items: center;
    width: var(--_size);
    height: var(--_size);
    background-color: var(--sds-color-surface-raised);
    color: var(--sds-color-text);
    font-family: var(--sds-font-display);
    font-size: calc(var(--_size) * 0.4);
    font-weight: var(--sds-type-heading-weight);
    line-height: 1;
    box-shadow: 0 0 0 var(--sds-avatar-ring-width) var(--sds-avatar-ring);
  }

  .sds-avatar:where([data-size="sm"]) {
    --_size: var(--sds-avatar-sm-size);
  }

  .sds-avatar:where([data-size="lg"]) {
    --_size: var(--sds-avatar-lg-size);
  }

  .sds-avatar:where([data-size="xl"]) {
    --_size: var(--sds-avatar-xl-size);
  }

  .sds-avatar:where(:not([data-variant]), [data-variant="round"]) {
    border-radius: var(--sds-radius-round);
  }

  .sds-avatar:where([data-variant="square"]) {
    border-radius: var(--sds-radius-md);
  }

  .sds-avatar-image {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
  }

  .sds-avatar-initials {
    grid-area: 1 / 1;
    text-transform: uppercase;
  }

  .sds-avatar-badge {
    position: absolute;
    inset-block-end: calc(var(--sds-space-1) * -1);
    inset-inline-end: calc(var(--sds-space-1) * -1);
  }

  .sds-avatar:where([data-state="speaking"]) {
    box-shadow: 0 0 0 calc(var(--sds-avatar-ring-width) * 1.5) var(--sds-color-accent-text), var(--sds-glow-sm);
  }

  /* --- setting-detail: aside[aria-live=polite] beside (side) or under (below) a settings list */

  .sds-setting-detail {
    display: flex;
    flex-direction: column;
    gap: var(--sds-space-3);
    padding: var(--sds-setting-detail-padding);
    border: var(--sds-border-thin) solid var(--sds-color-line);
    border-radius: var(--sds-panel-radius);
    background-color: var(--sds-color-surface);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-body-size) * var(--sds-type-scale));
    line-height: var(--sds-type-body-line-height);
  }

  /* A fixed width: the pane follows focus, so its text changes must not move the list. */
  .sds-setting-detail:where(:not([data-variant]), [data-variant="side"]) {
    flex: none;
    width: var(--sds-setting-detail-width);
    max-width: 100%;
  }

  .sds-setting-detail:where([data-variant="below"]) {
    padding: var(--sds-space-4);
  }

  .sds-setting-detail-title {
    margin: 0;
    font-family: var(--sds-font-display);
    font-size: calc(var(--sds-type-heading-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-heading-weight);
    line-height: var(--sds-type-heading-line-height);
  }

  .sds-setting-detail-body {
    margin: 0;
    color: var(--sds-color-text-muted);
  }

  .sds-setting-detail-preview:empty,
  .sds-setting-detail:where([data-state="empty"]) .sds-setting-detail-preview {
    display: none;
  }

  .sds-setting-detail:where([data-state="empty"]) .sds-setting-detail-title {
    color: var(--sds-color-text-muted);
  }

  @media (prefers-reduced-motion: reduce) {
    .sds-sheet[open],
    .sds-sheet[open]::backdrop {
      animation: none;
    }

    .sds-sheet,
    .sds-carousel-item,
    .sds-page-dot::before {
      transition: none;
    }

    .sds-carousel-track {
      scroll-behavior: auto;
    }

    .sds-content-card:where([data-variant="interactive"]):where(:hover, :active) {
      transform: none;
    }
  }

  :root[data-sds-motion="reduce"] :is(.sds-sheet[open], .sds-sheet[open]::backdrop) {
    animation: none;
  }

  :root[data-sds-motion="reduce"] :is(.sds-sheet, .sds-carousel-item, .sds-page-dot::before) {
    transition: none;
  }

  :root[data-sds-motion="reduce"] .sds-carousel-track {
    scroll-behavior: auto;
  }

  :root[data-sds-motion="reduce"] .sds-content-card:where([data-variant="interactive"]):where(:hover, :active) {
    transform: none;
  }

  /* sds-part: feedback */
  /* =================================================== v1.2 core: feedback
     notice, spinner, empty-state, change-readout, chart, stat, stat-breakdown. Link
     parts/feedback.css for these. */

  :where(.sds-notice, .sds-spinner, .sds-empty-state, .sds-chart, .sds-stat, .sds-stat-breakdown) {
    box-sizing: border-box;
  }

  :where(.sds-chart, .sds-stat-breakdown, .sds-stat-label, .sds-stat-value, .sds-stat-delta,
    .sds-stat-breakdown-source, .sds-stat-breakdown-value, .sds-empty-state-title, .sds-empty-state-body) {
    margin: 0;
  }

  /* --- notice: div[role=note]: tone icon, text on the tone's soft fill, a tone stripe ---- */

  .sds-notice {
    --_tone: var(--sds-color-line-strong);
    display: flex;
    align-items: flex-start;
    gap: var(--sds-space-4);
    padding: var(--sds-notice-padding) var(--sds-notice-padding) var(--sds-notice-padding) calc(var(--sds-notice-padding) + var(--sds-space-1));
    border: var(--sds-border-thin) solid var(--sds-color-line);
    border-inline-start: calc(var(--sds-notice-border) * 2) solid var(--_tone);
    border-radius: var(--sds-notice-radius);
    background-color: var(--sds-color-surface-raised);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-body-size) * var(--sds-type-scale));
    line-height: var(--sds-type-body-line-height);
  }

  .sds-notice:where([data-variant="info"]) {
    --_tone: var(--sds-color-info);
    background-color: var(--sds-color-info-soft);
  }

  .sds-notice:where([data-variant="success"]) {
    --_tone: var(--sds-color-success);
    background-color: var(--sds-color-success-soft);
  }

  .sds-notice:where([data-variant="warning"]) {
    --_tone: var(--sds-color-warning);
    background-color: var(--sds-color-warning-soft);
  }

  .sds-notice:where([data-variant="danger"]) {
    --_tone: var(--sds-color-danger);
    background-color: var(--sds-color-danger-soft);
  }

  .sds-notice-icon {
    flex: none;
    width: 1.25em;
    height: 1.25em;
    margin-block-start: calc((var(--sds-type-body-line-height) - 1) * 0.5em);
  }

  .sds-notice-body {
    flex: 1;
    min-width: 0;
    margin: 0;
  }

  .sds-notice-action {
    display: inline-flex;
    flex: none;
    align-self: center;
    gap: var(--sds-space-2);
    margin-inline-start: auto;
  }

  .sds-notice:where([data-state="dismissed"]) {
    display: none;
  }

  /* --- spinner: span[role=status][aria-label] ------------------------------------------- */

  .sds-spinner {
    --_size: var(--sds-spinner-md-size);
    display: inline-block;
    flex: none;
    width: var(--_size);
    height: var(--_size);
    border: var(--sds-spinner-stroke) solid color-mix(in srgb, currentColor 25%, transparent);
    border-top-color: currentColor;
    border-radius: var(--sds-radius-round);
    color: var(--sds-color-accent-text);
    animation: sds-spin var(--sds-spinner-period) linear infinite;
  }

  .sds-spinner:where([data-size="sm"]) {
    --_size: var(--sds-spinner-sm-size);
  }

  .sds-spinner:where([data-size="lg"]) {
    --_size: var(--sds-spinner-lg-size);
  }

  @keyframes sds-spin {
    to {
      transform: rotate(1turn);
    }
  }

  /* --- empty-state: art, one title line, one body line, at most one action -------------- */

  .sds-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sds-empty-state-gap);
    max-width: var(--sds-empty-state-max-width);
    margin-inline: auto;
    padding: var(--sds-space-6) var(--sds-space-5);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-body-size) * var(--sds-type-scale));
    line-height: var(--sds-type-body-line-height);
    text-align: center;
  }

  .sds-empty-state-art {
    display: grid;
    place-items: center;
    width: var(--sds-empty-state-art-size);
    height: var(--sds-empty-state-art-size);
    color: var(--sds-color-text-muted);
  }

  .sds-empty-state-art > :is(svg, img) {
    width: 100%;
    height: 100%;
  }

  .sds-empty-state-title {
    font-family: var(--sds-font-display);
    font-size: calc(var(--sds-type-heading-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-heading-weight);
    line-height: var(--sds-type-heading-line-height);
  }

  .sds-empty-state-body {
    color: var(--sds-color-text-muted);
  }

  .sds-empty-state-action {
    margin-top: var(--sds-space-2);
  }

  .sds-empty-state:where([data-variant="compact"]) {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: var(--sds-space-4);
    row-gap: var(--sds-space-1);
    max-width: none;
    padding: var(--sds-space-4);
    text-align: start;
  }

  .sds-empty-state:where([data-variant="compact"]) .sds-empty-state-art {
    grid-row: span 3;
    width: var(--sds-space-8);
    height: var(--sds-space-8);
  }

  .sds-empty-state:where([data-variant="compact"]) .sds-empty-state-title {
    font-size: calc(var(--sds-type-body-size) * var(--sds-type-scale));
  }

  .sds-empty-state:where([data-variant="compact"]) .sds-empty-state-action {
    justify-self: start;
    margin-top: var(--sds-space-1);
  }

  /* --- change-readout: before, arrow, after; the arrow shape carries the direction ------- */

  .sds-change-readout {
    display: inline-flex;
    align-items: baseline;
    gap: var(--sds-change-readout-gap);
    font-variant-numeric: tabular-nums;
  }

  .sds-change-readout-before {
    color: var(--sds-color-text-muted);
  }

  .sds-change-readout-after {
    font-weight: var(--sds-type-label-weight);
  }

  .sds-change-readout-arrow {
    display: inline-block;
    font-weight: var(--sds-type-heading-weight);
  }

  .sds-change-readout:where(:not([data-variant]), [data-variant="gain"]) .sds-change-readout-arrow {
    color: var(--sds-change-readout-gain);
  }

  .sds-change-readout:where(:not([data-variant]), [data-variant="gain"]) .sds-change-readout-arrow::before {
    content: "\2191";
  }

  .sds-change-readout:where([data-variant="spend"]) .sds-change-readout-arrow {
    color: var(--sds-change-readout-spend);
  }

  .sds-change-readout:where([data-variant="spend"]) .sds-change-readout-arrow::before {
    content: "\2193";
  }

  .sds-change-readout:where([data-variant="even"]) .sds-change-readout-arrow::before {
    content: "\2014";
  }

  .sds-change-readout:where([data-variant="empty"]) .sds-change-readout-arrow::before {
    content: "\2013";
  }

  .sds-change-readout:where([data-variant="empty"]) .sds-change-readout-after {
    display: none;
  }

  /* --- chart: figure.sds-chart > svg.sds-chart-plot + ul.sds-chart-legend + table.sds-chart-table
     sds.js draws the plot and the legend from the table (the text equivalent), in
     color.series.1..8 order; the table stays for screen readers, visually hidden. */

  .sds-chart {
    display: flex;
    flex-direction: column;
    gap: var(--sds-space-3);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-caption-size) * var(--sds-type-scale));
  }

  .sds-chart-plot {
    display: block;
    width: 100%;
    min-height: var(--sds-chart-min-height);
    overflow: visible;
  }

  .sds-chart:where([data-variant="donut"]) .sds-chart-plot {
    width: auto;
    max-width: 100%;
    height: var(--sds-chart-min-height);
    margin-inline: auto;
    aspect-ratio: 1;
  }

  .sds-chart:where([data-variant="stacked-bar"]) .sds-chart-plot {
    min-height: 0;
    height: var(--sds-space-8);
  }

  .sds-chart:where(:not([data-variant]), [data-variant="column"]) .sds-chart-plot {
    height: var(--sds-chart-min-height);
  }

  .sds-chart-plot :where(rect, path, circle)[tabindex] {
    cursor: pointer;
    outline: none;
  }

  .sds-chart-plot :where(rect, path, circle)[tabindex]:focus-visible {
    stroke: var(--sds-color-focus);
    stroke-width: var(--sds-focus-ring-width);
  }

  .sds-chart-plot :where(circle)[tabindex]:focus-visible {
    stroke-width: var(--sds-chart-donut-width);
    filter: drop-shadow(0 0 var(--sds-focus-ring-width) var(--sds-color-focus));
  }

  .sds-chart-axis {
    stroke: var(--sds-chart-axis);
    stroke-width: var(--sds-border-thin);
  }

  .sds-chart-donut-hole {
    fill: none;
    stroke: var(--sds-color-line);
    stroke-width: var(--sds-chart-donut-width);
  }

  .sds-chart-plot circle:where(.sds-chart-series-1, .sds-chart-series-2, .sds-chart-series-3, .sds-chart-series-4,
    .sds-chart-series-5, .sds-chart-series-6, .sds-chart-series-7, .sds-chart-series-8) {
    fill: none;
    stroke: currentColor;
    stroke-width: var(--sds-chart-donut-width);
  }

  .sds-chart-plot :where(rect, path) {
    fill: currentColor;
  }

  .sds-chart-series-1 { color: var(--sds-color-series-1); }
  .sds-chart-series-2 { color: var(--sds-color-series-2); }
  .sds-chart-series-3 { color: var(--sds-color-series-3); }
  .sds-chart-series-4 { color: var(--sds-color-series-4); }
  .sds-chart-series-5 { color: var(--sds-color-series-5); }
  .sds-chart-series-6 { color: var(--sds-color-series-6); }
  .sds-chart-series-7 { color: var(--sds-color-series-7); }
  .sds-chart-series-8 { color: var(--sds-color-series-8); }

  .sds-chart-label {
    fill: var(--sds-color-text-muted);
    font-size: calc(var(--sds-type-caption-size) * var(--sds-type-scale));
  }

  .sds-chart-value {
    min-height: 1lh;
    margin: 0;
    font-weight: var(--sds-type-label-weight);
    font-variant-numeric: tabular-nums;
  }

  .sds-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sds-space-2) var(--sds-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .sds-chart-legend > li {
    display: inline-flex;
    align-items: center;
    gap: var(--sds-space-2);
  }

  .sds-chart-legend > li::before {
    content: "";
    width: 0.9em;
    height: 0.9em;
    border-radius: var(--sds-radius-xs);
    background-color: currentColor;
  }

  .sds-chart-legend-label {
    color: var(--sds-color-text);
  }

  .sds-chart-table {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .sds-chart:where([data-state="empty"]) :is(.sds-chart-plot, .sds-chart-legend, .sds-chart-value) {
    display: none;
  }

  .sds-chart-empty {
    display: grid;
    place-items: center;
    min-height: var(--sds-chart-min-height);
    border: var(--sds-border-thin) dashed var(--sds-color-line-strong);
    border-radius: var(--sds-radius-md);
    color: var(--sds-color-text-muted);
    font-size: calc(var(--sds-type-body-size) * var(--sds-type-scale));
  }

  /* --- stat: dl > div.sds-stat: label, value, optional icon and delta; data-tone ---------- */

  .sds-stat {
    display: inline-grid;
    grid-template-columns: auto auto;
    grid-template-areas: "icon label" "icon value" "icon delta";
    justify-content: start;
    align-items: center;
    column-gap: var(--sds-space-3);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
  }

  .sds-stat:where([data-variant="inline"]) {
    display: inline-flex;
    align-items: baseline;
    gap: var(--sds-space-2);
  }

  .sds-stat:where([data-variant="tile"]) {
    padding: var(--sds-stat-tile-padding);
    border: var(--sds-border-thin) solid var(--sds-color-line);
    border-radius: var(--sds-radius-md);
    background-color: var(--sds-color-surface-raised);
  }

  .sds-stat-icon {
    grid-area: icon;
    width: var(--sds-stat-icon-size);
    height: var(--sds-stat-icon-size);
    color: var(--sds-color-text-muted);
  }

  .sds-stat:where([data-variant="inline"]) .sds-stat-icon {
    align-self: center;
  }

  .sds-stat-label {
    grid-area: label;
    color: var(--sds-color-text-muted);
    font-size: calc(var(--sds-type-caption-size) * var(--sds-type-scale));
    line-height: var(--sds-type-caption-line-height);
  }

  .sds-stat-value {
    grid-area: value;
    font-family: var(--sds-font-display);
    font-size: calc(var(--sds-type-heading-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-heading-weight);
    font-variant-numeric: tabular-nums;
    line-height: var(--sds-type-heading-line-height);
  }

  .sds-stat:where([data-size="sm"]) .sds-stat-value {
    font-size: calc(var(--sds-type-body-size) * var(--sds-type-scale));
  }

  .sds-stat:where([data-tone="thriving"]) .sds-stat-value { color: var(--sds-color-severity-thriving); }
  .sds-stat:where([data-tone="steady"]) .sds-stat-value { color: var(--sds-color-severity-steady); }
  .sds-stat:where([data-tone="warning"]) .sds-stat-value { color: var(--sds-color-severity-warning); }
  .sds-stat:where([data-tone="danger"]) .sds-stat-value { color: var(--sds-color-severity-danger); }
  .sds-stat:where([data-tone="critical"]) .sds-stat-value { color: var(--sds-color-severity-critical); }

  .sds-stat-delta {
    grid-area: delta;
    color: var(--sds-color-text-muted);
    font-size: calc(var(--sds-type-caption-size) * var(--sds-type-scale));
    font-variant-numeric: tabular-nums;
  }

  .sds-stat:where([data-state="up"]) .sds-stat-delta::before {
    content: "\25B2\00A0";
    color: var(--sds-color-success);
  }

  .sds-stat:where([data-state="down"]) .sds-stat-delta::before {
    content: "\25BC\00A0";
    color: var(--sds-color-danger);
  }

  /* --- stat-breakdown: dl of signed sources and a total (tooltip or pinned panel) -------- */

  .sds-stat-breakdown {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sds-stat-breakdown-gap) var(--sds-space-5);
    width: min(var(--sds-stat-breakdown-width), calc(100vw - 2 * var(--sds-space-5)));
    padding: var(--sds-space-4);
    border: var(--sds-border-thin) solid var(--sds-color-line);
    border-radius: var(--sds-radius-md);
    background-color: var(--sds-color-surface-raised);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-body-size) * var(--sds-type-scale));
    font-variant-numeric: tabular-nums;
    line-height: var(--sds-type-body-line-height);
    text-align: start;
    white-space: normal;
  }

  .sds-stat-breakdown-row,
  .sds-stat-breakdown-total {
    display: contents;
  }

  .sds-stat-breakdown-source {
    color: var(--sds-color-text-muted);
  }

  .sds-stat-breakdown-value {
    font-weight: var(--sds-type-label-weight);
    text-align: end;
  }

  .sds-stat-breakdown-value:where([data-sign="positive"]) {
    color: var(--sds-color-success);
  }

  .sds-stat-breakdown-value:where([data-sign="negative"]) {
    color: var(--sds-color-danger);
  }

  .sds-stat-breakdown-total > * {
    margin-top: var(--sds-space-1);
    padding-top: var(--sds-space-2);
    border-top: var(--sds-border-thick) solid var(--sds-color-line);
    color: var(--sds-color-text);
    font-weight: var(--sds-type-heading-weight);
  }

  .sds-stat-breakdown-total > dd {
    text-align: end;
  }

  .sds-stat-breakdown:where([data-variant="tooltip"]) {
    position: absolute;
    bottom: calc(100% + var(--sds-space-3));
    left: 50%;
    z-index: var(--sds-layer-tooltip);
    box-shadow: var(--sds-shadow-md);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%);
    transition:
      opacity var(--sds-motion-fast) var(--sds-ease-standard),
      visibility var(--sds-motion-fast) var(--sds-ease-standard);
  }

  .sds-tooltip-anchor:where(:hover, :focus-within) > .sds-stat-breakdown:where([data-variant="tooltip"]) {
    opacity: 1;
    visibility: visible;
  }

  .sds-stat-breakdown:where([data-variant="panel"]) {
    box-shadow: var(--sds-shadow-sm);
  }

  @media (prefers-reduced-motion: reduce) {
    .sds-spinner {
      animation: none;
    }
  }

  :root[data-sds-motion="reduce"] .sds-spinner {
    animation: none;
  }

  /* sds-part: overlays */
  /* =================================================== v1.2 core: overlays
     popover, context-menu, timed-confirm, keyword-link, help-mark. Link parts/overlays.css. */

  :where(.sds-popover, .sds-context-menu, .sds-keyword-tooltip, .sds-help-mark, .sds-keyword-link),
  :where(.sds-help-mark, .sds-keyword-link, .sds-context-menu-item)::before {
    box-sizing: border-box;
  }

  :where(.sds-help-mark, .sds-keyword-link, .sds-context-menu-item) {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
  }

  :where(.sds-context-menu > menu) {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .sds-help-mark,
  .sds-keyword-link,
  .sds-context-menu-item {
    position: relative;
    cursor: pointer;
    touch-action: manipulation;
    transition:
      background-color var(--sds-motion-fast) var(--sds-ease-standard),
      color var(--sds-motion-fast) var(--sds-ease-standard),
      transform var(--sds-motion-fast) var(--sds-ease-standard);
  }

  .sds-help-mark::before,
  .sds-keyword-link::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, var(--sds-touch-target));
    height: max(100%, var(--sds-touch-target));
    transform: translate(-50%, -50%);
  }

  .sds-help-mark:focus-visible,
  .sds-keyword-link:focus-visible,
  .sds-context-menu-item:focus-visible {
    outline: var(--sds-focus-ring-width) solid var(--sds-color-focus);
    outline-offset: var(--sds-focus-ring-offset);
  }

  /* Floating panels sit in the top layer (popover); sds.js places them by their control
     through --_x and --_y (set in the CSSOM) and sets data-side top or bottom. */
  .sds-popover,
  .sds-context-menu,
  .sds-keyword-tooltip {
    position: fixed;
    inset: auto;
    top: var(--_y, 0px);
    left: var(--_x, 0px);
    margin: 0;
    overflow: visible;
    border: var(--sds-border-thin) solid var(--sds-color-line);
    background-color: var(--sds-color-surface-raised);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-body-size) * var(--sds-type-scale));
    line-height: var(--sds-type-body-line-height);
    text-align: start;
    box-shadow: var(--sds-shadow-lg);
  }

  :is(.sds-popover, .sds-context-menu, .sds-keyword-tooltip):popover-open {
    animation: sds-fade-in var(--sds-motion-fast) var(--sds-ease-standard);
  }

  /* --- popover: div[popover].sds-popover, opened by its control (popovertarget) --------- */

  .sds-popover {
    width: min(var(--sds-popover-width), calc(100vw - 2 * var(--sds-space-5)));
    padding: var(--sds-popover-padding);
    border-radius: var(--sds-popover-radius);
  }

  .sds-popover-arrow {
    position: absolute;
    left: var(--_arrow, 50%);
    width: var(--sds-space-4);
    height: var(--sds-space-4);
    border: inherit;
    background-color: inherit;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .sds-popover:where(:not([data-side]), [data-side="bottom"]) .sds-popover-arrow {
    top: 0;
    border-right: 0;
    border-bottom: 0;
  }

  .sds-popover:where([data-side="top"]) .sds-popover-arrow {
    top: 100%;
    border-top: 0;
    border-left: 0;
  }

  /* --- context-menu: div[popover].sds-context-menu > menu[role=menu] ---------------------
     li > button.sds-context-menu-item[role=menuitem]; toggles are role="menuitemcheckbox"
     .sds-context-menu-toggle[aria-checked]; li.sds-context-menu-separator[role=separator]. */

  .sds-context-menu:where(:not([data-variant]), [data-variant="popup"]) {
    min-width: var(--sds-context-menu-min-width);
    max-width: calc(100vw - 2 * var(--sds-space-5));
    padding: var(--sds-space-2);
    border-radius: var(--sds-context-menu-radius);
  }

  .sds-context-menu > menu {
    display: flex;
    flex-direction: column;
  }

  .sds-context-menu-item {
    display: flex;
    align-items: center;
    gap: var(--sds-space-3);
    width: 100%;
    min-height: max(var(--sds-context-menu-item-height), var(--sds-touch-target));
    padding: 0 var(--sds-space-4);
    border-radius: var(--sds-radius-sm);
    text-align: start;
  }

  .sds-context-menu-item .sds-icon {
    flex: none;
    width: 1.25em;
    height: 1.25em;
    color: var(--sds-color-text-muted);
  }

  .sds-context-menu-item:focus-visible {
    outline-offset: calc(var(--sds-focus-ring-width) * -1);
  }

  @media (hover: hover) {
    .sds-context-menu-item:where(:hover:not(:disabled, [aria-disabled="true"])) {
      background-color: color-mix(in srgb, var(--sds-color-accent) 14%, transparent);
    }
  }

  .sds-context-menu-item:where(:focus-visible) {
    background-color: color-mix(in srgb, var(--sds-color-accent) 14%, transparent);
  }

  .sds-context-menu-item:where(:active:not(:disabled, [aria-disabled="true"])) {
    background-color: color-mix(in srgb, var(--sds-color-accent) 22%, transparent);
  }

  .sds-context-menu-item:where(:disabled, [aria-disabled="true"]) {
    color: var(--sds-color-on-disabled);
    cursor: not-allowed;
  }

  /* A toggle row shows a check mark when on (shape), an empty box when off. */
  .sds-context-menu-toggle::after {
    content: "";
    flex: none;
    width: 1em;
    height: 1em;
    margin-inline-start: auto;
    border: var(--sds-border-thick) solid var(--sds-color-line-strong);
    border-radius: var(--sds-radius-xs);
  }

  .sds-context-menu-toggle:where([aria-checked="true"])::after {
    border-color: var(--sds-color-accent-text);
    background:
      linear-gradient(45deg, transparent 45%, var(--sds-color-accent-text) 45% 60%, transparent 60%) center / 70% 70% no-repeat;
  }

  .sds-context-menu-separator {
    height: 0;
    margin: var(--sds-space-2) var(--sds-space-3);
    border-top: var(--sds-border-thin) solid var(--sds-color-line);
  }

  .sds-context-menu:where([data-variant="drawer"]) {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: none;
    padding: var(--sds-space-3) var(--sds-space-3) calc(var(--sds-space-3) + env(safe-area-inset-bottom, 0px));
    border-inline: 0;
    border-bottom: 0;
    border-radius: var(--sds-sheet-radius) var(--sds-sheet-radius) 0 0;
  }

  .sds-context-menu:where([data-variant="drawer"]):popover-open {
    animation: sds-sheet-up var(--sds-motion-base) var(--sds-ease-emphasis);
  }

  .sds-context-menu:where([data-variant="drawer"])::backdrop {
    background-color: var(--sds-color-scrim);
  }

  @keyframes sds-sheet-up {
    from {
      transform: translateY(100%);
    }
  }

  /* --- timed-confirm: dialog.sds-dialog.sds-timed-confirm ------------------------------- */

  .sds-timed-confirm {
    text-align: start;
  }

  .sds-timed-confirm-countdown {
    display: flex;
    flex-direction: column;
    gap: var(--sds-space-2);
    margin: var(--sds-space-4) 0;
    color: var(--sds-color-text-muted);
    font-variant-numeric: tabular-nums;
  }

  /* --- keyword-link: an underlined term in text that opens an explanation ---------------- */

  .sds-keyword-link {
    display: inline;
    border-radius: var(--sds-radius-xs);
    text-decoration: underline;
    text-decoration-color: var(--sds-keyword-link-underline-color);
    text-decoration-thickness: var(--sds-keyword-link-underline);
    text-underline-offset: 0.2em;
    cursor: help;
  }

  .sds-keyword-link::before {
    min-width: 100%;
  }

  .sds-keyword-link-icon {
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    margin-inline-start: 0.15em;
    color: var(--sds-keyword-link-underline-color);
    vertical-align: super;
  }

  @media (hover: hover) {
    .sds-keyword-link:where(:hover) {
      background-color: color-mix(in srgb, var(--sds-color-accent) 14%, transparent);
    }
  }

  .sds-keyword-link:where([aria-expanded="true"]) {
    background-color: color-mix(in srgb, var(--sds-color-accent) 14%, transparent);
  }

  .sds-keyword-link:where([data-state="pinned"]) {
    text-decoration-style: double;
  }

  .sds-keyword-tooltip {
    width: max-content;
    max-width: min(var(--sds-popover-width), calc(100vw - 2 * var(--sds-space-5)));
    padding: var(--sds-space-3) var(--sds-space-4);
    border-radius: var(--sds-popover-radius);
    box-shadow: var(--sds-shadow-md);
  }

  .sds-keyword-tooltip:where([data-state="pinned"]) {
    border-color: var(--sds-color-accent-text);
    box-shadow: inset 0 var(--sds-border-thick) 0 var(--sds-color-accent-text), var(--sds-shadow-md);
  }

  /* --- help-mark: a small help glyph button; the hit area is the touch target ----------- */

  .sds-help-mark {
    --_size: var(--sds-help-mark-md-size);
    display: inline-grid;
    flex: none;
    place-items: center;
    width: var(--_size);
    height: var(--_size);
    border: var(--sds-border-thin) solid currentColor;
    border-radius: var(--sds-radius-round);
    color: var(--sds-color-text-muted);
    font-size: calc(var(--_size) * 0.65);
    font-weight: var(--sds-type-heading-weight);
    line-height: 1;
  }

  .sds-help-mark:where([data-size="sm"]) {
    --_size: var(--sds-help-mark-sm-size);
  }

  .sds-help-mark .sds-icon {
    width: 100%;
    height: 100%;
  }

  @media (hover: hover) {
    .sds-help-mark:where(:hover:not(:disabled)) {
      color: var(--sds-color-text);
    }
  }

  .sds-help-mark:where(:active:not(:disabled)) {
    transform: scale(0.92);
  }

  .sds-help-mark:where([aria-expanded="true"]) {
    border-color: var(--sds-color-accent);
    background-color: var(--sds-color-accent);
    color: var(--sds-color-on-accent);
  }

  .sds-help-mark:where(:disabled) {
    color: var(--sds-color-on-disabled);
    cursor: not-allowed;
  }

  @media (prefers-reduced-motion: reduce) {
    :is(.sds-popover, .sds-context-menu, .sds-keyword-tooltip):popover-open {
      animation: none;
    }
  }

  :root[data-sds-motion="reduce"] :is(.sds-popover, .sds-context-menu, .sds-keyword-tooltip):popover-open {
    animation: none;
  }

  /* sds-part: core */
  /* --- v1.2 amends (core part): slider, toast, tabs, tooltip, list-item, progress-bar,
     icon-button, caption, resource-bar, badge, panel. Additive: an element without the new
     variant, part or property keeps its earlier look. ------------------------------------ */

  /* slider@1.2: stepped stops under the track (sds.js adds .sds-slider-stops after the input
     from data-stops="Halt|Slow|Normal"), a value readout (output.sds-slider-value, data-format),
     and data-tone tinting the thumb. */
  .sds-slider:where([data-variant="stepped"]) {
    margin-block-end: 0;
  }

  .sds-slider:where([data-tone="thriving"]) { --_slider-thumb: var(--sds-color-severity-thriving); }
  .sds-slider:where([data-tone="steady"]) { --_slider-thumb: var(--sds-color-severity-steady); }
  .sds-slider:where([data-tone="warning"]) { --_slider-thumb: var(--sds-color-severity-warning); }
  .sds-slider:where([data-tone="danger"]) { --_slider-thumb: var(--sds-color-severity-danger); }
  .sds-slider:where([data-tone="critical"]) { --_slider-thumb: var(--sds-color-severity-critical); }

  .sds-slider:where([data-tone])::-webkit-slider-thumb {
    background-color: var(--_slider-thumb);
  }

  .sds-slider:where([data-tone])::-moz-range-thumb {
    background-color: var(--_slider-thumb);
  }

  .sds-slider-stops {
    display: flex;
    justify-content: space-between;
    margin-block-start: var(--sds-space-2);
    padding-inline: calc(var(--sds-slider-thumb) / 2);
    color: var(--sds-color-text-muted);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-caption-size) * var(--sds-type-scale));
    line-height: var(--sds-type-caption-line-height);
  }

  .sds-slider-stop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sds-space-1);
    width: 0;
  }

  .sds-slider-stop::before {
    content: "";
    flex: none;
    width: var(--sds-slider-stop-size);
    height: var(--sds-slider-stop-size);
    border-radius: var(--sds-radius-round);
    background-color: var(--sds-color-line-strong);
  }

  .sds-slider-stop:where([data-tone="thriving"])::before { background-color: var(--sds-color-severity-thriving); }
  .sds-slider-stop:where([data-tone="steady"])::before { background-color: var(--sds-color-severity-steady); }
  .sds-slider-stop:where([data-tone="warning"])::before { background-color: var(--sds-color-severity-warning); }
  .sds-slider-stop:where([data-tone="danger"])::before { background-color: var(--sds-color-severity-danger); }
  .sds-slider-stop:where([data-tone="critical"])::before { background-color: var(--sds-color-severity-critical); }

  /* The current stop: larger mark and the label in full text color (not color alone). */
  .sds-slider-stop:where([data-current])::before {
    width: calc(var(--sds-slider-stop-size) * 1.5);
    height: calc(var(--sds-slider-stop-size) * 1.5);
    box-shadow: 0 0 0 var(--sds-border-thin) var(--sds-color-text);
  }

  .sds-slider-stop-label {
    white-space: nowrap;
  }

  .sds-slider-stop:where([data-current]) .sds-slider-stop-label {
    color: var(--sds-color-text);
    font-weight: var(--sds-type-label-weight);
  }

  /* data-commit="release" (#94): while a stop is previewed, the committed one keeps a ring and the
     readout reads "committed → preview". */
  .sds-slider-stop:where([data-committed])::before {
    box-shadow: 0 0 0 var(--sds-border-thin) var(--sds-color-text-muted);
  }

  .sds-slider-stop:where([data-committed]) .sds-slider-stop-label {
    text-decoration: underline;
  }

  /* A stop's own glyph (data-stop-icons) above its mark. */
  .sds-slider-stop-icon {
    order: -1;
    width: 1.25em;
    height: 1.25em;
  }

  /* The help line for the stop in view (data-stop-help). */
  .sds-slider-help {
    margin: var(--sds-space-1) 0 0;
    color: var(--sds-color-text-muted);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-caption-size) * var(--sds-type-scale));
    line-height: var(--sds-type-caption-line-height);
  }

  .sds-slider-value {
    min-width: 4ch;
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-label-size) * var(--sds-type-scale));
    font-variant-numeric: tabular-nums;
    font-weight: var(--sds-type-label-weight);
    text-align: end;
  }

  /* toast@1.2: achievement (icon, ui.reward), an action button, a dwell bar that pauses on
     hover or focus, and the queue states (queued is not shown yet). */
  .sds-toast {
    position: relative;
  }

  .sds-toast:where([data-variant="achievement"]) {
    border-left-color: var(--sds-color-accent-text);
  }

  .sds-toast:where([data-variant="achievement"]) .sds-icon {
    width: 2em;
    height: 2em;
    color: var(--sds-color-accent-text);
  }

  .sds-toast:where([data-subject]) {
    cursor: pointer;
  }

  .sds-toast-action {
    flex: none;
    margin-inline-start: auto;
  }

  .sds-toast-dwell {
    position: absolute;
    right: var(--sds-radius-md);
    bottom: 0;
    left: var(--sds-radius-md);
    height: var(--sds-border-thick);
    border-radius: var(--sds-radius-pill);
    background-color: var(--sds-color-text-muted);
    transform-origin: 0 50%;
    animation: sds-dwell var(--_dwell, 4s) linear forwards;
  }

  .sds-toast:where(:hover, :focus-within) .sds-toast-dwell {
    animation-play-state: paused;
  }

  .sds-toast:where([data-state="queued"]) {
    display: none;
  }

  .sds-toast:where([data-state="leaving"]) {
    animation: sds-toast-out var(--sds-motion-fast) var(--sds-ease-exit) forwards;
  }

  @keyframes sds-dwell {
    to {
      transform: scaleX(0);
    }
  }

  /* tabs@1.2: a status mark per tab (shape and color by tone) and bumper keycaps at both ends. */
  .sds-tab-mark {
    flex: none;
    width: 0.6em;
    height: 0.6em;
    border-radius: var(--sds-radius-round);
    background-color: var(--sds-color-severity-steady);
  }

  .sds-tab-mark:where([data-tone="thriving"]) {
    background-color: var(--sds-color-severity-thriving);
  }

  .sds-tab-mark:where([data-tone="warning"]) {
    border-radius: 0;
    background-color: var(--sds-color-severity-warning);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
  }

  .sds-tab-mark:where([data-tone="danger"], [data-tone="critical"]) {
    border-radius: 0;
    background-color: var(--sds-color-severity-danger);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  }

  .sds-tab-mark:where([data-tone="critical"]) {
    background-color: var(--sds-color-severity-critical);
  }

  .sds-tab-mark:where(.sds-badge) {
    width: auto;
    height: var(--sds-badge-sm-size);
    border-radius: var(--sds-radius-pill);
    clip-path: none;
  }

  .sds-tabs-bumper {
    flex: none;
    align-self: center;
    margin-inline: var(--sds-space-2);
    cursor: pointer;
  }

  :root:where([data-sds-input="touch"]) .sds-tabs-bumper {
    display: none;
  }

  /* tooltip@1.2: rich (title, body, keycaps) and pinned (stays open so the pointer can enter). */
  .sds-tooltip:where([data-variant="rich"]) {
    display: grid;
    gap: var(--sds-space-1);
    width: max-content;
    max-width: min(var(--sds-popover-width), calc(100vw - 2 * var(--sds-space-5)));
    padding: var(--sds-space-3) var(--sds-space-4);
    border: var(--sds-border-thin) solid var(--sds-color-line);
    background-color: var(--sds-color-surface-raised);
    color: var(--sds-color-text);
    font-size: calc(var(--sds-type-body-size) * var(--sds-type-scale));
    line-height: var(--sds-type-body-line-height);
    text-align: start;
    white-space: normal;
  }

  .sds-tooltip-title {
    margin: 0;
    font-weight: var(--sds-type-heading-weight);
  }

  .sds-tooltip-body {
    margin: 0;
    color: var(--sds-color-text-muted);
  }

  .sds-tooltip-keys {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sds-space-2);
    margin-top: var(--sds-space-1);
    font-size: calc(var(--sds-type-caption-size) * var(--sds-type-scale));
  }

  .sds-tooltip:where([data-state="pinned"]) {
    border-color: var(--sds-color-accent-text);
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  /* list-item@1.2: a trailing value (On, 75%, English) before the row's chevron. */
  .sds-list-item-value {
    margin-inline-start: auto;
    color: var(--sds-color-text-muted);
    font-size: calc(var(--sds-type-label-size) * var(--sds-type-scale));
  }

  .sds-list-item-value + .sds-icon {
    margin-inline-start: 0;
  }

  /* progress-bar@1.2: segmented, div[role=progressbar] of .sds-progress-bar-segment[data-done];
     the done count shows as text (data-count, set by setProgress). */
  .sds-progress-bar:where([data-variant="segmented"]) {
    display: flex;
    align-items: center;
    gap: var(--sds-space-1);
    height: auto;
    overflow: visible;
    background: none;
  }

  .sds-progress-bar-segment {
    flex: 1;
    height: var(--sds-progress-bar-md-height);
    border-radius: var(--sds-progress-bar-radius);
    background-color: var(--sds-color-line);
    transition: background-color var(--sds-motion-base) var(--sds-ease-standard);
  }

  .sds-progress-bar:where([data-size="sm"]) .sds-progress-bar-segment {
    height: var(--sds-progress-bar-sm-height);
  }

  .sds-progress-bar-segment:where([data-done]) {
    background-color: currentColor;
  }

  .sds-progress-bar:where([data-variant="segmented"])[data-count]::after {
    content: attr(data-count);
    flex: none;
    margin-inline-start: var(--sds-space-3);
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-caption-size) * var(--sds-type-scale));
    font-variant-numeric: tabular-nums;
    font-weight: var(--sds-type-label-weight);
  }

  /* icon-button@1.2: captioned, a visible word under the icon; the hit area holds both. */
  .sds-icon-button:where([data-variant="captioned"]) {
    flex-direction: column;
    gap: var(--sds-space-1);
    width: auto;
    min-width: var(--sds-touch-target);
    height: auto;
    min-height: var(--sds-touch-target);
    padding: var(--sds-space-2) var(--sds-space-3);
    border-radius: var(--sds-radius-md);
    background-color: transparent;
    color: var(--sds-color-text);
  }

  .sds-icon-button:where([data-variant="captioned"]) .sds-icon {
    width: calc(var(--sds-icon-button-md-size) * 0.5);
    height: calc(var(--sds-icon-button-md-size) * 0.5);
  }

  .sds-icon-button-caption {
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-caption-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-label-weight);
    line-height: var(--sds-type-caption-line-height);
  }

  @media (hover: hover) {
    .sds-icon-button:where([data-variant="captioned"]):where(:hover:not(:disabled, [aria-disabled="true"])) {
      background-color: color-mix(in srgb, var(--sds-color-text) 8%, transparent);
    }
  }

  .sds-icon-button:where([data-variant="captioned"]):where(:disabled, [aria-disabled="true"]) {
    color: var(--sds-color-on-disabled);
  }

  /* caption@1.2: data-tone, a tone icon before the text and the tone on the backing edge. */
  .sds-caption:where([data-tone]) {
    border-inline-start: var(--sds-border-heavy) solid var(--_caption-tone, var(--sds-color-info));
  }

  .sds-caption:where([data-tone="success"]) { --_caption-tone: var(--sds-color-success); }
  .sds-caption:where([data-tone="warning"]) { --_caption-tone: var(--sds-color-warning); }
  .sds-caption:where([data-tone="danger"]) { --_caption-tone: var(--sds-color-danger); }

  .sds-caption-tone {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-inline-end: 0.4em;
    vertical-align: -0.125em;
  }

  /* resource-bar@1.2: data-tone, a ghost of a pending change, a mark, a reserve floor,
     over-max (full, plus a +N word) and capacity (load against a comfort mark, a verdict). */
  .sds-resource-bar:where([data-tone="thriving"]) { --_fill: var(--sds-color-severity-thriving); }
  .sds-resource-bar:where([data-tone="steady"]) { --_fill: var(--sds-color-severity-steady); }
  .sds-resource-bar:where([data-tone="warning"]) { --_fill: var(--sds-color-severity-warning); }
  .sds-resource-bar:where([data-tone="danger"]) { --_fill: var(--sds-color-severity-danger); }
  .sds-resource-bar:where([data-tone="critical"]) { --_fill: var(--sds-color-severity-critical); }

  .sds-resource-bar:where([data-variant="capacity"]) {
    --_fill: var(--sds-resource-bar-neutral);
  }

  .sds-resource-bar:where([data-variant="capacity"][data-verdict="heavy"]) {
    --_fill: var(--sds-color-severity-warning);
  }

  .sds-resource-bar:where([data-variant="capacity"][data-verdict="over"]) {
    --_fill: var(--sds-color-severity-danger);
  }

  .sds-resource-bar-ghost,
  .sds-resource-bar-reserve,
  .sds-resource-bar-mark {
    position: absolute;
    inset-block: 0;
    pointer-events: none;
  }

  .sds-resource-bar-ghost {
    left: var(--_from, 0%);
    width: calc(var(--_to, 0%) - var(--_from, 0%));
    background: repeating-linear-gradient(-45deg, var(--sds-resource-bar-ghost) 0 0.3em, transparent 0.3em 0.6em);
    opacity: 0.8;
  }

  .sds-resource-bar-reserve {
    left: 0;
    width: var(--_at, 0%);
    border-inline-end: var(--sds-border-thin) solid var(--sds-resource-bar-mark);
    background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--sds-color-bg) 40%, transparent) 0 0.2em, transparent 0.2em 0.5em);
  }

  .sds-resource-bar-mark {
    left: var(--_at, 0%);
    width: var(--sds-border-thick);
    background-color: var(--sds-resource-bar-mark);
    transform: translateX(-50%);
  }

  .sds-resource-bar-segment {
    flex: 1;
  }

  .sds-resource-bar:where([data-state="over-max"]) {
    border-color: var(--sds-color-danger);
    border-style: double;
  }

  .sds-resource-bar-readout {
    color: var(--sds-color-text);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-caption-size) * var(--sds-type-scale));
    font-variant-numeric: tabular-nums;
    font-weight: var(--sds-type-label-weight);
  }

  /* badge@1.2: data-form count (99+ past data-max) or fraction (3/5); sds.js writes the text. */
  .sds-badge:where([data-form="fraction"], [data-max]) {
    font-variant-numeric: tabular-nums;
  }

  /* panel@1.2: legend, a titled tab hanging from the top border. */
  .sds-panel:where([data-variant="legend"]) {
    position: relative;
    margin-top: calc(var(--sds-type-label-size) * var(--sds-type-scale) * 0.75 + var(--sds-space-2));
    padding-top: calc(var(--sds-panel-padding) + var(--sds-space-3));
    background-color: var(--sds-color-surface);
  }

  .sds-panel-legend {
    position: absolute;
    top: 0;
    inset-inline-start: var(--sds-panel-padding);
    margin: 0;
    padding: var(--sds-space-1) var(--sds-space-4);
    border: var(--sds-border-thin) solid var(--sds-color-line);
    border-radius: var(--sds-radius-sm);
    background-color: var(--sds-color-surface-raised);
    color: var(--sds-color-text);
    font-family: var(--sds-font-display);
    font-size: calc(var(--sds-type-label-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-heading-weight);
    line-height: var(--sds-type-label-line-height);
    transform: translateY(-50%);
  }

  /* --- v1.2 patterns (core part) -------------------------------------------------------
     drag-and-drop: .sds-drag-ghost follows the pointer (--_x, --_y set in the CSSOM), lifted by
     drag-and-drop.lift; .sds-drop-target[data-sds-drop="accept|reject"] shows a check or a
     cross as well as color. input-mode: data-sds-input on <html>; the cursor hides while a
     gamepad drives. screen-stack: screens below the top one carry inert. */

  .sds-drag-ghost {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--sds-layer-tooltip);
    margin: 0;
    box-shadow: var(--sds-shadow-lg);
    pointer-events: none;
    opacity: var(--sds-drag-and-drop-ghost-opacity);
    transform: translate(var(--_x, 0px), calc(var(--_y, 0px) - var(--sds-drag-and-drop-lift)));
  }

  :where(.sds-drop-target) {
    position: relative;
  }

  .sds-drop-target:where([data-sds-drop="accept"]) {
    outline: var(--sds-border-thick) dashed var(--sds-drag-and-drop-accept);
    outline-offset: var(--sds-border-thin);
  }

  .sds-drop-target:where([data-sds-drop="reject"]) {
    outline: var(--sds-border-thick) dashed var(--sds-drag-and-drop-reject);
    outline-offset: var(--sds-border-thin);
  }

  .sds-drop-target:where([data-sds-drop])::after {
    position: absolute;
    inset-block-start: calc(var(--sds-space-2) * -1);
    inset-inline-end: calc(var(--sds-space-2) * -1);
    display: grid;
    place-items: center;
    width: 1.4em;
    height: 1.4em;
    border-radius: var(--sds-radius-round);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-caption-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-heading-weight);
    line-height: 1;
    pointer-events: none;
  }

  .sds-drop-target:where([data-sds-drop="accept"])::after {
    content: "\2713";
    background-color: var(--sds-color-success);
    color: var(--sds-color-on-success);
  }

  .sds-drop-target:where([data-sds-drop="reject"])::after {
    content: "\2715";
    background-color: var(--sds-color-danger);
    color: var(--sds-color-on-danger);
  }

  :where(:root[data-sds-input="gamepad"]),
  :where(:root[data-sds-input="gamepad"] *) {
    cursor: none;
  }

  /* --- v1.2 reduced motion (core part) ------------------------------------------------ */

  @media (prefers-reduced-motion: reduce) {
    .sds-drag-ghost {
      transform: translate(var(--_x, 0px), var(--_y, 0px));
    }

    .sds-toast-dwell {
      animation-timing-function: steps(4, end);
    }

    .sds-progress-bar-segment {
      transition: none;
    }
  }

  :root[data-sds-motion="reduce"] .sds-drag-ghost {
    transform: translate(var(--_x, 0px), var(--_y, 0px));
  }

  :root[data-sds-motion="reduce"] .sds-toast-dwell {
    animation-timing-function: steps(4, end);
  }

  :root[data-sds-motion="reduce"] .sds-progress-bar-segment {
    transition: none;
  }

  /* --- v1.1 reduced motion: drop loops and entrances; state signals stay ------- */

  @media (prefers-reduced-motion: reduce) {
    .sds-progress-bar:indeterminate,
    .sds-resource-bar .sds-resource-bar-fill,
    .sds-rebind-row .sds-field-row-control > button,
    .sds-counter,
    .sds-caption,
    .sds-rating-prompt,
    .sds-form-sent {
      animation: none;
    }

    .sds-progress-bar:indeterminate {
      background-size: 100% 100%;
    }
  }

  :root[data-sds-motion="reduce"] :is(.sds-progress-bar:indeterminate, .sds-resource-bar .sds-resource-bar-fill,
    .sds-rebind-row .sds-field-row-control > button, .sds-counter, .sds-caption, .sds-rating-prompt, .sds-form-sent) {
    animation: none;
  }

  :root[data-sds-motion="reduce"] .sds-progress-bar:indeterminate {
    background-size: 100% 100%;
  }

  @keyframes sds-progress-slide {
    from {
      background-position: -100% 0;
    }

    to {
      background-position: 200% 0;
    }
  }

  @keyframes sds-pulse {
    50% {
      opacity: 0.55;
    }
  }

  @keyframes sds-pop {
    40% {
      transform: scale(1.15);
    }
  }
}