/* Generated by tools/build.py from web/src/sds.css (one part of the kit). Do not edit. */

@layer sds.reset, sds.components;

@layer sds.components {
  /* ===================================================== 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-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));
    }
  }

  /* Glow (issue 168): an interactive card under data-sds-glow (on it or an ancestor) glows soft on
     hover and strong, breathing, on focus; data-sds-glow="off" opts one out. Off by default. */
  @media (hover: hover) {
    .sds-content-card:where([data-variant="interactive"]):where(:not([data-sds-glow="off"])):where([data-sds-glow]:not([data-sds-glow="off"]) *, [data-sds-glow]):where(:hover:not(:disabled, [aria-disabled="true"])) {
      box-shadow: var(--sds-glow-soft);
    }
  }

  .sds-content-card:where([data-variant="interactive"]):where(:not([data-sds-glow="off"])):where([data-sds-glow]:not([data-sds-glow="off"]) *, [data-sds-glow]):where(:focus-visible:not(:active, :disabled, [aria-disabled="true"], [aria-pressed="true"], [aria-current="true"], [aria-current="page"], [aria-selected="true"])) {
    box-shadow: var(--sds-glow-strong);
    animation: sds-glow-pulse var(--sds-glow-pulse) var(--sds-ease-standard) infinite alternate;
  }

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

  .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;
  }

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

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

  /* --- 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%);
    }
  }

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

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

  /* --- 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-reverse;
    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: var(--sds-opacity-muted);
    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(var(--sds-press-scale));
  }

  :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;
  }

  @media (prefers-reduced-motion: reduce) {
    .sds-carousel-track {
      scroll-behavior: auto;
    }
  }

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

  /* --- 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) calc(var(--sds-mix-subtle) * 100%), transparent);
      color: var(--sds-color-text);
    }
  }

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

  .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) calc(var(--sds-mix-hover) * 100%), 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: var(--sds-opacity-muted);
  }

  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,
    .sds-carousel-item,
    .sds-page-dot::before {
      transition: none;
    }
  }

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