/* ==========================================================================
   Design system: core components
   1 · Actions: Button, Ghost Button, Icon Button, Link
   2 · Selection: Checkbox, Switch, Segmented Control, Chip
   3 · Input: Field (Text / Select), Textarea, Tag Field, Image Field, Search Bar
   4 · Surfaces and feedback: Menu, Tooltip, Toast, Alert
   5 · Display: Tag, Badge, Avatar, Dot Indicators
   Ported from the designer's export (css/components/core.css), same class names. Every selector is prefixed with :where(.ds): same specificity as the export, but no effect outside .ds containers (the legacy site has its own .switch, .toast…).
   ========================================================================== */

/* ==========================================================================
   1 · ACTIONS
   ========================================================================== */

/* ---- Button ----
   .button + --filled (Primary) · --outline (Secondary) · --accent · --light (Overlay)
   LG size by default (56), .button--md (40 · 44 touch). <button> or <a>. */
:where(.ds) .button {
  /* Label/XL (LG) · Label/LG (MD) · Ghost : Label/LG (LG) · Label/MD Strong (MD) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  height: var(--size-xl);
  padding-inline: var(--spacing-lg);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--type-label-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    opacity var(--duration-slow) var(--ease-standard);
}
/* Mont is tall: 2 px on top to optically center the label */
:where(.ds) .button__label {
  padding-top: 2px;
}

:where(.ds) .button:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

:where(.ds) .button--block {
  width: 100%;
}

:where(.ds) .button--md {
  height: var(--size-md);
  padding-inline: var(--spacing-md);
  border-radius: var(--radius-sm);
  font-size: var(--type-label-lg); /* Label/LG */
}

:where(.ds) .button--md .icon {
  width: 20px;
  height: 20px;
}

/* Primary */
:where(.ds) .button--filled {
  background-color: var(--background-inverse);
  color: var(--content-inverse);
}
:where(.ds) .button--filled:hover {
  background-color: var(--background-inverse-hover);
}
:where(.ds) .button--filled:active {
  background-color: var(--background-inverse-pressed);
}

/* Secondary */
:where(.ds) .button--outline {
  border-color: var(--border-tertiary);
  color: var(--content-primary);
}
:where(.ds) .button--outline:active {
  background-color: var(--background-primary-pressed);
}

/* Accent */
:where(.ds) .button--accent {
  background-color: var(--background-accent);
  color: var(--content-inverse);
}
:where(.ds) .button--accent:hover {
  background-color: var(--background-accent-hover);
}
:where(.ds) .button--accent:active {
  background-color: var(--background-accent-pressed);
}

/* Overlay (placed on an image) */
:where(.ds) .button--light {
  background-color: var(--background-overlay);
  color: var(--content-overlay-strong);
}
:where(.ds) .button--light:hover {
  background-color: var(--background-overlay-hover);
}
:where(.ds) .button--light:active {
  background-color: var(--background-overlay-pressed);
}

/* Disabled: 40% opacity, keeps the look of the type */
:where(.ds) .button:is(:disabled, [aria-disabled="true"]),
:where(.ds) .icon-button:is(:disabled, [aria-disabled="true"]) {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* ---- Ghost Button ----
   Text button with no background or minimum height. LG (Label/LG, icons 24) · MD (Label/MD, icons 20) */
:where(.ds) .button--ghost {
  height: auto;
  min-height: 24px; /* minimum click target */
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--content-primary);
  font-size: var(--type-label-lg);
}
:where(.ds) .button--ghost.button--md {
  gap: var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--type-label-md);
}
/* ---- Icon Button ----
   .icon-button + --primary / --secondary / --accent / --overlay / --ghost
   LG 56 (radius/md) by default · .icon-button--md 40 (radius/sm, icon 20). aria-label required. */
:where(.ds) .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--size-xl);
  height: var(--size-xl);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--content-primary);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    opacity var(--duration-slow) var(--ease-standard);
}

:where(.ds) .icon-button:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

:where(.ds) .icon-button--md {
  width: var(--size-md);
  height: var(--size-md);
  border-radius: var(--radius-sm);
}
:where(.ds) .icon-button--md .icon {
  width: 20px;
  height: 20px;
}

:where(.ds) .icon-button--primary {
  background-color: var(--background-inverse);
  color: var(--content-inverse);
}
:where(.ds) .icon-button--primary:hover { background-color: var(--background-inverse-hover); }
:where(.ds) .icon-button--primary:active { background-color: var(--background-inverse-pressed); }
:where(.ds) .icon-button--primary:focus-visible { outline-color: var(--border-accent); }

:where(.ds) .icon-button--secondary {
  border-color: var(--border-tertiary);
}
:where(.ds) .icon-button--secondary:active { background-color: var(--background-primary-pressed); }

:where(.ds) .icon-button--accent {
  background-color: var(--background-accent);
  color: var(--content-inverse);
}
:where(.ds) .icon-button--accent:hover { background-color: var(--background-accent-hover); }
:where(.ds) .icon-button--accent:active { background-color: var(--background-accent-pressed); }

:where(.ds) .icon-button--overlay {
  background-color: var(--background-overlay);
  color: var(--content-overlay-strong);
}
:where(.ds) .icon-button--overlay:hover { background-color: var(--background-overlay-hover); }
:where(.ds) .icon-button--overlay:active { background-color: var(--background-overlay-pressed); }

:where(.ds) .icon-button--overlay-subtle {
  border-color: var(--border-tertiary);
  color: var(--content-primary);
}
:where(.ds) .icon-button--overlay-subtle:hover { background-color: var(--background-overlay-subtle-hover); }
:where(.ds) .icon-button--overlay-subtle:active { background-color: var(--background-overlay-subtle-pressed); }

:where(.ds) .icon-button--ghost:hover { background-color: var(--background-primary-hover); }
:where(.ds) .icon-button--ghost:active { background-color: var(--background-primary-pressed); }


/* ---- Link ----
   .link (M) · .link--s · .link--l. Hover = underline, Focus = 2 px ring. */
:where(.ds) .link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  border-radius: var(--radius-sm);
  color: var(--content-primary);
  font-size: var(--type-body-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-text);
  position: relative;
}
/* Animated underline: draws left to right on hover, exits toward the right */
:where(.ds) .link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--duration-slow) cubic-bezier(0.65, 0, 0.2, 1);
  pointer-events: none;
}
:where(.ds) .link .icon {
  width: 16px;
  height: 16px;
}
:where(.ds) .link:hover::after,
:where(.ds) .link:active::after {
  transform: scaleX(1);
  transform-origin: left center;
}
:where(.ds) .link:active {
  color: var(--content-secondary);
}
:where(.ds) .link:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
}
/* Link S = Label/MD (14 / 100 %, SemiBold), as requested; Figma says Body/XS Strong (Figma bug) */
:where(.ds) .link--s {
  font-size: var(--type-label-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}
:where(.ds) .link--l {
  font-size: var(--type-body-md);
}
:where(.ds) .link--l .icon {
  width: 20px;
  height: 20px;
}
:where(.ds) .link[aria-disabled="true"] {
  color: var(--content-disabled);
  pointer-events: none;
}

/* ==========================================================================
   2 · SELECTION
   ========================================================================== */

/* ---- Checkbox ----
   <label class="checkbox"><input type="checkbox" class="checkbox__input"> + texte
   Indeterminate via JS: input.indeterminate = true */
:where(.ds) .checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  cursor: pointer;
}

:where(.ds) .checkbox__input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 1px 0; /* 22 px control, aligned with the 1st Body/MD line */
  border: 2px solid var(--border-primary);
  border-radius: var(--radius-sm);
  background-color: transparent;
  cursor: inherit;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

:where(.ds) .checkbox__input::before {
  content: "";
  position: absolute;
  inset: -2px;
  background-color: var(--content-inverse);
  -webkit-mask: var(--mask-check) center / 16px no-repeat;
  mask: var(--mask-check) center / 16px no-repeat;
  opacity: 0;
}

:where(.ds) .checkbox__input:indeterminate::before {
  -webkit-mask-image: var(--mask-check-indeterminate);
  mask-image: var(--mask-check-indeterminate);
  -webkit-mask-size: 20px;
  mask-size: 20px;
}

:where(.ds) .checkbox:hover .checkbox__input {
  border-color: var(--border-strong);
}

:where(.ds) .checkbox__input:is(:checked, :indeterminate) {
  border-color: var(--background-inverse);
  background-color: var(--background-inverse);
}
:where(.ds) .checkbox__input:is(:checked, :indeterminate)::before {
  opacity: 1;
}
:where(.ds) .checkbox:hover .checkbox__input:is(:checked, :indeterminate) {
  border-color: var(--background-inverse-hover);
  background-color: var(--background-inverse-hover);
}

:where(.ds) .checkbox__input:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
}

:where(.ds) .checkbox__text {
  display: flex;
  flex-direction: column;
  font-size: var(--type-body-md);
  line-height: var(--line-height-text);
  color: var(--content-primary);
}

:where(.ds) .checkbox__description {
  font-size: var(--type-body-sm);
  color: var(--content-tertiary);
}

:where(.ds) .checkbox:has(.checkbox__input:disabled) {
  cursor: default;
}
:where(.ds) .checkbox__input:disabled {
  border-color: var(--border-tertiary);
  background-color: var(--background-secondary);
}
:where(.ds) .checkbox__input:disabled:is(:checked, :indeterminate) {
  border-color: var(--background-inverse-disabled);
  background-color: var(--background-inverse-disabled);
}
:where(.ds) .checkbox__input:disabled::before {
  background-color: var(--content-inverse-disabled);
}
:where(.ds) .checkbox:has(.checkbox__input:disabled) :is(.checkbox__text, .checkbox__description) {
  color: var(--content-disabled);
}

/* ---- Switch ----
   <button class="switch" role="switch" aria-checked="false"> · track 36 × 20, thumb 16 */
:where(.ds) .switch {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--type-body-md);
  line-height: var(--line-height-text);
  color: var(--content-primary);
  text-align: left;
}
/* Not in the export: the legacy style.css styles ".switch p" (opacity, 10 px, left padding) */
:where(.ds) .switch p {
  opacity: 1;
  font-size: inherit;
  padding-left: 0;
}

:where(.ds) .switch__track {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 20px;
  border-radius: var(--radius-full);
  background-color: var(--background-quaternary);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

:where(.ds) .switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background-color: var(--background-primary);
  transition: transform var(--duration-base) var(--ease-standard);
}

:where(.ds) .switch:hover .switch__track {
  background-color: var(--background-quaternary-hover);
}

:where(.ds) .switch[aria-checked="true"] .switch__track {
  background-color: var(--background-inverse);
}
:where(.ds) .switch[aria-checked="true"]:hover .switch__track {
  background-color: var(--background-inverse-hover);
}
:where(.ds) .switch[aria-checked="true"] .switch__track::after {
  transform: translateX(16px);
}

:where(.ds) .switch:focus-visible {
  outline: none;
}
:where(.ds) .switch:focus-visible .switch__track {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
}

:where(.ds) .switch:disabled {
  color: var(--content-disabled);
}
:where(.ds) .switch:disabled .switch__track {
  background-color: var(--background-tertiary);
}
:where(.ds) .switch[aria-checked="true"]:disabled .switch__track {
  background-color: var(--background-inverse-disabled);
}

/* ---- Segmented Control ----
   Choice: role="radiogroup" + <button role="radio" aria-checked>
   Tabs: role="tablist" + role="tab" aria-selected */
:where(.ds) .segmented-control {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  height: var(--size-md);
  padding: var(--spacing-xs);
  border-radius: var(--radius-full);
  background-color: var(--background-secondary);
}

:where(.ds) .segmented-control__segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-inline: var(--spacing-md);
  border-radius: var(--radius-full);
  color: var(--content-quaternary);
  font-size: var(--type-label-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

:where(.ds) .segmented-control__segment:hover {
  background-color: var(--background-secondary-hover);
}

:where(.ds) .segmented-control__segment:is([aria-checked="true"], [aria-selected="true"]) {
  background-color: var(--background-primary);
  color: var(--content-primary);
}

:where(.ds) .segmented-control__segment:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--border-focus);
}

:where(.ds) .segmented-control__segment:disabled {
  background-color: transparent;
  color: var(--content-disabled);
}
:where(.ds) .segmented-control__segment:disabled:is([aria-checked="true"], [aria-selected="true"]) {
  background-color: var(--background-secondary);
}

/* ---- Chip ----
   Toggle (on/off filter, .is-selected / aria-pressed) · .chip--dropdown (opens a list, aria-expanded) */
:where(.ds) .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  min-height: var(--size-md);
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background-color: var(--background-primary);
  color: var(--content-quaternary);
  font-size: var(--type-body-md);
  line-height: var(--line-height-text);
  white-space: nowrap;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

:where(.ds) .chip:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--border-focus);
}

:where(.ds) .chip:is(.is-selected, [aria-pressed="true"]):not(.chip--dropdown) {
  background-color: var(--background-inverse);
  color: var(--content-inverse);
}
:where(.ds) .chip:is(.is-selected, [aria-pressed="true"]):not(.chip--dropdown):hover {
  box-shadow: var(--shadow-xs);
}
:where(.ds) .chip:is(.is-selected, [aria-pressed="true"]):not(.chip--dropdown):focus-visible {
  box-shadow: inset 0 0 0 2px var(--border-accent);
}

:where(.ds) .chip--dropdown {
  padding: var(--spacing-sm) 12px var(--spacing-sm) var(--spacing-md);
}
:where(.ds) .chip--dropdown.is-selected {
  color: var(--content-primary);
}
:where(.ds) .chip--dropdown .chip__chevron {
  transition: transform var(--duration-base) var(--ease-standard);
}
:where(.ds) .chip--dropdown[aria-expanded="true"] .chip__chevron {
  transform: rotate(180deg);
}

:where(.ds) .chip:disabled {
  border-color: var(--border-quaternary);
  background-color: var(--background-secondary);
  color: var(--content-disabled);
  box-shadow: none;
}
:where(.ds) .chip:disabled:is(.is-selected, [aria-pressed="true"]):not(.chip--dropdown) {
  border-color: transparent;
  background-color: var(--background-inverse-disabled);
  color: var(--content-inverse-disabled);
}
:where(.ds) .chip:disabled .badge {
  opacity: 0.4;
}

/* ==========================================================================
   3 · INPUT
   ========================================================================== */

/* ---- Field (Text / Select) ----
   "Outline notch" style: when empty, the label acts as the placeholder;
   on focus or when filled, it moves up onto the outline.
   The input carries placeholder=" " and comes before the label in the DOM. */
:where(.ds) .field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: 100%;
  padding-top: 8px; /* room for the raised label */
}

:where(.ds) .field__control {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-height: 56px;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-tertiary);
  border-radius: var(--radius-md);
  background-color: var(--background-primary);
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

:where(.ds) .field__control:hover {
  border-color: var(--border-secondary);
}

/* Focus: 2 px outline without shifting the content */
:where(.ds) .field__control:focus-within,
:where(.ds) .field--open .field__control {
  border-color: var(--border-focus);
  box-shadow: inset 0 0 0 1px var(--border-focus);
}

:where(.ds) .field__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--content-primary);
  font-size: var(--type-body-md);
  line-height: var(--line-height-text);
  text-align: left;
}

:where(.ds) .field__input::placeholder {
  color: transparent;
}

:where(.ds) .field__label {
  position: absolute;
  top: 50%;
  left: var(--spacing-md);
  max-width: calc(100% - 2 * var(--spacing-md));
  overflow: hidden;
  color: var(--content-tertiary);
  font-size: var(--type-body-md);
  line-height: var(--line-height-text);
  white-space: nowrap;
  text-overflow: ellipsis;
  transform: translateY(-50%);
  pointer-events: none;
  transition:
    top var(--duration-fast) var(--ease-standard),
    left var(--duration-fast) var(--ease-standard),
    font-size var(--duration-fast) var(--ease-standard);
}

/* Label raised onto the outline */
:where(.ds) .field__input:focus ~ .field__label,
:where(.ds) .field__input:not(:placeholder-shown) ~ .field__label,
:where(.ds) .field--filled .field__label,
:where(.ds) .field--open .field__label {
  top: -1px;
  left: 12px;
  padding-inline: 4px;
  background-color: var(--background-primary);
  font-size: var(--type-label-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

:where(.ds) .field__input:focus ~ .field__label,
:where(.ds) .field--open .field__label {
  color: var(--content-primary);
}

:where(.ds) .field__helper,
:where(.ds) .field__counter {
  color: var(--content-muted);
  font-size: var(--type-label-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

:where(.ds) .field__helper-row {
  display: flex;
  gap: var(--spacing-sm);
}
:where(.ds) .field__helper-row .field__helper {
  flex: 1;
}
:where(.ds) .field__counter {
  margin-left: auto;
  text-align: right;
}

/* Error: red is applied to the input (border, including on focus), the help text and the counter.
   The label is never red: it stays the placeholder (tertiary) while the field is empty,
   then becomes primary once raised onto the outline. */
:where(.ds) .field--error .field__control,
:where(.ds) .field--error .field__control:hover,
:where(.ds) .field--error .field__control:focus-within {
  border-color: var(--border-error);
  box-shadow: inset 0 0 0 1px var(--border-error);
}
:where(.ds) .field--error :is(.field__helper, .field__counter) {
  color: var(--content-error);
}
:where(.ds) .field--error .field__input:focus ~ .field__label,
:where(.ds) .field--error .field__input:not(:placeholder-shown) ~ .field__label,
:where(.ds) .field--error.field--filled .field__label {
  color: var(--content-primary);
}

/* Disabled */
:where(.ds) .field:has(.field__input:disabled) .field__control {
  border-color: var(--border-quaternary);
  background-color: transparent;
  box-shadow: none;
}
:where(.ds) .field:has(.field__input:disabled) :is(.field__input, .field__label, .field__helper, .field__counter, .icon) {
  color: var(--content-disabled);
}
:where(.ds) .field:has(.field__input:disabled) .field__label {
  background-color: var(--background-primary);
}

/* Select: button trigger + Menu (listbox) below the field */
:where(.ds) .field--select .field__input {
  cursor: pointer;
}
:where(.ds) .field--select .field__control {
  cursor: pointer;
}
:where(.ds) .field__chevron {
  color: var(--content-primary);
  transition: transform var(--duration-base) var(--ease-standard);
}
:where(.ds) .field--open .field__chevron {
  transform: rotate(180deg);
}
/* The menu opens 4 px below the control, even if the field has help text below */
:where(.ds) .field--select > .menu {
  position: absolute;
  top: calc(8px + 56px + var(--spacing-xs)); /* field padding + control + gap */
  left: 0;
  right: 0;
  z-index: 20;
}

/* Select Search: the search happens in the field itself.
   The "Search…" placeholder only appears on focus, when the field is empty (the label is then raised). */
:where(.ds) .field--searchable .field__input,
:where(.ds) .field--searchable .field__control {
  cursor: text;
}
:where(.ds) .field--searchable .field__chevron {
  cursor: pointer;
}
:where(.ds) .field--searchable .field__input:focus::placeholder {
  color: var(--content-tertiary);
}
:where(.ds) .field--searchable > .menu .menu__items {
  max-height: 280px;
}

/* Textarea: same style, label aligned with the 1st line */
:where(.ds) .field--textarea .field__control {
  align-items: flex-start;
  min-height: 120px;
  padding-block: 17px;
}
:where(.ds) .field--textarea .field__input {
  min-height: 84px;
  resize: vertical;
}
:where(.ds) .field--textarea .field__label {
  top: 17px;
  transform: none;
}
:where(.ds) .field--textarea .field__input:focus ~ .field__label,
:where(.ds) .field--textarea .field__input:not(:placeholder-shown) ~ .field__label {
  top: -1px;
  transform: translateY(-50%);
}

/* ---- Tag Field ----
   .tag-field (--creatable, --filled, --error) · ARIA combobox
   The label always stays on the outline; the placeholder says what to do. */
:where(.ds) .tag-field .field__control {
  flex-wrap: wrap;
  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
}
:where(.ds) .tag-field--filled .field__control {
  padding-left: var(--spacing-sm);
}
:where(.ds) .tag-field .field__label {
  top: -1px;
  left: 12px;
  padding-inline: 4px;
  background-color: var(--background-primary);
  font-size: var(--type-label-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}
:where(.ds) .tag-field .field__control:focus-within .field__label {
  color: var(--content-primary);
}
:where(.ds) .tag-field.field--error .field__label {
  color: var(--content-primary);
}
:where(.ds) .tag-field__tags {
  display: contents;
}
:where(.ds) .tag-field .field__input {
  flex: 1 1 80px;
  min-height: 24px;
  padding-inline: var(--spacing-xs);
}
:where(.ds) .tag-field .field__input::placeholder {
  color: var(--content-muted);
}
:where(.ds) .tag-field:has(.field__input:disabled) .field__input::placeholder {
  color: var(--content-disabled);
}
/* Tag Field / Menu: inside the control, 4 px below its edge (follows the height when tags wrap onto a new line) */
:where(.ds) .tag-field__menu {
  position: absolute;
  top: calc(100% + 1px + var(--spacing-xs));
  left: -1px;
  right: -1px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-quaternary);
  border-radius: var(--radius-lg);
  background-color: var(--background-primary);
  box-shadow: var(--shadow-lg);
  cursor: default;
}
:where(.ds) .tag-field__menu .tag.is-active {
  box-shadow: inset 0 0 0 2px var(--border-focus);
}
:where(.ds) .tag-field--open .field__helper {
  visibility: hidden; /* the helper moves to the bottom of the menu */
}
/* Remove cross on selected tags */
:where(.ds) .tag-field .tag--remove button {
  display: inline-flex;
  border-radius: var(--radius-full);
  color: inherit;
}
:where(.ds) .tag-field .tag--remove button:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 0;
}

/* ---- Image Field ----
   Dropzone: empty = dashed outline; filled = preview + Overlay Icon Buttons Replace / Delete */
:where(.ds) .image-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: 220px;
  height: 240px;
}

:where(.ds) .image-field__label {
  color: var(--content-tertiary);
  font-size: var(--type-label-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

:where(.ds) .image-field__dropzone {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  overflow: hidden;
  border: 1px dashed var(--border-tertiary);
  border-radius: var(--radius-md);
  background-color: var(--background-primary);
  color: var(--content-muted);
  font-size: var(--type-label-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  text-align: center;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

/* The icon takes the drop text color (content/muted) */

:where(.ds) .image-field__dropzone:hover,
:where(.ds) .image-field__dropzone.is-dragover {
  border-color: var(--border-secondary);
  background-color: var(--background-primary-hover);
}

:where(.ds) .image-field__dropzone:focus-within {
  border: 2px dashed var(--border-focus);
  padding: calc(var(--spacing-md) - 1px);
  background-color: var(--background-primary);
}

:where(.ds) .image-field__file {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

:where(.ds) .image-field--error .image-field__dropzone {
  border: 2px dashed var(--border-error);
}
:where(.ds) .image-field--error .image-field__helper {
  color: var(--content-error);
}

:where(.ds) .image-field--disabled .image-field__label,
:where(.ds) .image-field--disabled .image-field__dropzone {
  color: var(--content-disabled);
}
:where(.ds) .image-field--disabled .image-field__dropzone {
  border-color: var(--border-quaternary);
  background-color: var(--background-secondary);
  cursor: default;
}

/* Filled: the "empty" content (icon, text, help) is hidden; the picker stays keyboard-accessible via Replace */
:where(.ds) .image-field--filled .image-field__dropzone > :not(.image-field__preview, .image-field__actions, .image-field__file, .image-field__progress) {
  display: none;
}
:where(.ds) .image-field--filled .image-field__file {
  pointer-events: none;
}
:where(.ds) .image-field--filled .image-field__dropzone {
  cursor: default;
  align-items: flex-end;
  justify-content: flex-end;
  border: 0;
  padding: var(--spacing-md);
}
:where(.ds) .image-field--filled .image-field__dropzone:focus-within {
  border: 2px solid var(--border-focus);
  padding: calc(var(--spacing-md) - 2px);
}
:where(.ds) .image-field__preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:where(.ds) .image-field__actions {
  position: relative;
  display: flex;
  gap: var(--spacing-sm);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
:where(.ds) .image-field--filled .image-field__dropzone:is(:hover, :focus-within) .image-field__actions {
  opacity: 1;
}
:where(.ds) .image-field--disabled.image-field--filled .image-field__preview {
  opacity: 0.4;
}

/* Upload in progress */
:where(.ds) .image-field__progress {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background-color: var(--background-scrim-dark);
  color: var(--grey-0);
  text-shadow: var(--shadow-text);
}
:where(.ds) .image-field__track {
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background-color: var(--white-alpha-30);
}
:where(.ds) .image-field__bar {
  height: 100%;
  border-radius: inherit;
  background-color: var(--grey-0);
  transition: width var(--duration-base) var(--ease-standard);
}

/* ---- Search Bar ----
   LG (56) by default · .search-bar--md (40). Opens a suggestions Menu 4 px below. */
:where(.ds) .search-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  width: 100%;
  height: 56px;
  padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-xs) var(--spacing-md);
  border: 1px solid var(--border-tertiary);
  border-radius: var(--radius-md);
  background-color: var(--background-primary);
  color: var(--content-primary);
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

:where(.ds) .search-bar:hover {
  border-color: var(--border-secondary);
}

:where(.ds) .search-bar:focus-within {
  border-color: var(--border-focus);
  box-shadow: inset 0 0 0 1px var(--border-focus);
}

:where(.ds) .search-bar__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: var(--type-body-md);
  line-height: var(--line-height-text);
}

:where(.ds) .search-bar__input::placeholder {
  color: var(--content-muted);
}

:where(.ds) .search-bar__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

:where(.ds) .search-bar__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
}
:where(.ds) .search-bar__clear:hover {
  background-color: var(--background-primary-hover);
}
:where(.ds) .search-bar__clear:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 0;
}
:where(.ds) .search-bar__clear .icon {
  width: 20px;
  height: 20px;
}
:where(.ds) .search-bar__clear[hidden] {
  display: none;
}

:where(.ds) .search-bar:has(.search-bar__input:disabled) {
  border-color: var(--border-quaternary);
  background-color: var(--background-secondary);
  color: var(--content-disabled);
  box-shadow: none;
}
:where(.ds) .search-bar__input:disabled::placeholder {
  color: var(--content-disabled);
}

:where(.ds) .search-bar > .menu {
  position: absolute;
  top: calc(100% + var(--spacing-xs));
  left: -1px;
  right: -1px;
  z-index: 20;
}

:where(.ds) .search-bar--md {
  gap: var(--spacing-sm);
  height: 40px;
  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-sm);
}
:where(.ds) .search-bar--md > .icon {
  width: 20px;
  height: 20px;
}
:where(.ds) .search-bar--md .search-bar__input {
  font-size: var(--type-body-sm);
}
:where(.ds) .search-bar--md .search-bar__clear .icon {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   4 · SURFACES AND FEEDBACK
   ========================================================================== */

/* ---- Menu ----
   List panel: Header, Search, Items (Item, Section Title, Separator), Tags, Empty, Footer.
   To be placed 4 px below the trigger (.dropdown). */
:where(.ds) .menu {
  display: flex;
  flex-direction: column;
  min-width: 240px;
  overflow: hidden;
  border: 1px solid var(--border-quaternary);
  border-radius: var(--radius-lg);
  background-color: var(--background-primary);
  color: var(--content-primary);
  box-shadow: var(--shadow-lg);
}

:where(.ds) .menu[hidden] {
  display: none;
}

:where(.ds) .menu__items {
  display: flex;
  flex-direction: column;
  gap: 2px; /* Figma: 2 px between rows (fixed value, no variable) */
  max-height: 360px;
  padding: var(--spacing-xs);
  overflow-y: auto;
  list-style: none;
}

:where(.ds) .menu__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  width: 100%;
  min-height: 40px;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  color: var(--content-primary);
  font-size: var(--type-label-md);
  font-weight: var(--font-weight-semibold); /* Label/MD */
  line-height: var(--line-height-tight);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

:where(.ds) .menu__item .icon {
  width: 20px;
  height: 20px;
}

:where(.ds) .menu__item:hover,
:where(.ds) .menu__item.is-active {
  background-color: var(--background-primary-hover);
}
/* Pressed and Selected: background/tertiary; Selected keeps this background on hover */
:where(.ds) .menu__item:active,
:where(.ds) .menu__item:is([aria-selected="true"], .is-selected) {
  background-color: var(--background-tertiary);
}
/* Focus: white background + 2 px outline (also on a selected option) */
:where(.ds) .menu__item:focus-visible {
  outline: none;
  background-color: var(--background-primary);
  box-shadow: inset 0 0 0 2px var(--border-focus);
}
:where(.ds) .menu__check {
  display: none;
}
:where(.ds) .menu__item:is([aria-selected="true"], .is-selected) .menu__check {
  display: inline-block;
}

:where(.ds) .menu__item:is(:disabled, [aria-disabled="true"]) {
  background: none;
  color: var(--content-disabled);
  cursor: default;
}
:where(.ds) .menu__item:is(:disabled, [aria-disabled="true"]) .avatar {
  opacity: 0.4;
}

:where(.ds) .menu__item--indent {
  padding-left: var(--spacing-2xl);
}

:where(.ds) .menu__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

:where(.ds) .menu__count {
  flex-shrink: 0;
  color: var(--content-quaternary);
  font-size: var(--type-label-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  white-space: nowrap;
}

:where(.ds) .menu__title {
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-xs);
  color: var(--content-muted);
  font-size: var(--type-label-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-overline);
  text-transform: uppercase;
}

:where(.ds) .menu__separator {
  height: 1px;
  margin: var(--spacing-xs) var(--spacing-md);
  background-color: var(--background-tertiary);
}

:where(.ds) .menu__header {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-md);
  min-height: 80px;
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-quaternary);
}
:where(.ds) .menu__header-text {
  flex: 1;
  min-width: 0;
}
:where(.ds) .menu__name,
:where(.ds) .menu__email {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
:where(.ds) .menu__name {
  font-size: var(--type-display-h6);
  font-weight: var(--font-weight-heavy);
  line-height: var(--line-height-tight);
}
:where(.ds) .menu__email {
  color: var(--content-tertiary);
  font-size: var(--type-body-sm);
  line-height: var(--line-height-text);
}

:where(.ds) .menu__search {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  min-height: 48px;
  padding-inline: var(--spacing-md);
  border-bottom: 1px solid var(--border-quaternary);
}
:where(.ds) .menu__search .icon {
  width: 20px;
  height: 20px;
}
:where(.ds) .menu__search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: var(--type-body-md);
  line-height: var(--line-height-text);
}
:where(.ds) .menu__search-input::placeholder {
  color: var(--content-muted);
}

:where(.ds) .menu__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-md) var(--spacing-md);
}

:where(.ds) .menu__empty {
  padding: var(--spacing-md);
  color: var(--content-tertiary);
  font-size: var(--type-body-md);
  line-height: var(--line-height-text);
}

:where(.ds) .menu__footer {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: 1px solid var(--border-quaternary);
  color: var(--content-muted);
  font-size: var(--type-label-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

/* Trigger + menu */
:where(.ds) .dropdown {
  position: relative;
  display: inline-flex;
}
:where(.ds) .dropdown > .menu {
  position: absolute;
  top: calc(100% + var(--spacing-xs));
  left: 0;
  z-index: 20;
}
:where(.ds) .dropdown--end > .menu {
  left: auto;
  right: 0;
}
:where(.ds) .dropdown--center > .menu {
  left: 50%;
  transform: translateX(-50%);
}

/* ---- Tooltip ----
   Tooltip on hover or focus of an element without text. The pointer targets the element, at 4 px.
   <span class="has-tooltip"><button …></button><span class="tooltip" role="tooltip">…</span></span> */
:where(.ds) .has-tooltip {
  position: relative;
  display: inline-flex;
}

:where(.ds) .tooltip {
  position: absolute;
  z-index: 30;
  bottom: calc(100% + 4px);
  left: 50%;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  background-color: var(--background-inverse);
  color: var(--content-inverse);
  font-size: var(--type-label-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  white-space: nowrap;
  transform: translate(-50%, -6px);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

/* Pointer 12 × 6 */
/* Not in the export: the legacy public/js/modules/tooltip.css (injected by public/js/libs/templater.js
   on the account pages) sets
   top: 0 on a global .tooltip; the DS tooltip is placed with bottom/left only */
:where(.ds) .tooltip {
  top: auto;
}
:where(.ds) .tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border: 6px solid transparent;
  border-top-color: var(--background-inverse);
  border-bottom-width: 0;
  transform: translateX(-50%);
}

:where(.ds) .has-tooltip:is(:hover, :focus-within) .tooltip,
:where(.ds) .tooltip--visible {
  opacity: 1;
  visibility: visible;
}

:where(.ds) .tooltip--bottom {
  top: calc(100% + 4px);
  bottom: auto;
  transform: translate(-50%, 6px);
}
:where(.ds) .tooltip--bottom::after {
  top: auto;
  bottom: 100%;
  border-top-width: 0;
  border-bottom-width: 6px;
  border-top-color: transparent;
  border-bottom-color: var(--background-inverse);
}

:where(.ds) .tooltip--left,
:where(.ds) .tooltip--right {
  top: 50%;
  bottom: auto;
}
:where(.ds) .tooltip--left {
  left: auto;
  right: calc(100% + 4px);
  transform: translate(-6px, -50%);
}
:where(.ds) .tooltip--right {
  left: calc(100% + 4px);
  transform: translate(6px, -50%);
}
:where(.ds) .tooltip--left::after,
:where(.ds) .tooltip--right::after {
  top: 50%;
  border-width: 6px;
  border-color: transparent;
  transform: translateY(-50%);
}
:where(.ds) .tooltip--left::after {
  left: 100%;
  border-right-width: 0;
  border-left-color: var(--background-inverse);
}
:where(.ds) .tooltip--right::after {
  left: auto;
  right: 100%;
  border-left-width: 0;
  border-right-color: var(--background-inverse);
}

/* ---- Toast ----
   .toast · role="status" (aria-live="polite"). Disappears after ~3 s; stays if there is an action or Close. */
:where(.ds) .toast {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-md);
  min-height: var(--size-lg);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-quaternary);
  border-radius: var(--radius-md);
  background-color: var(--background-primary);
  color: var(--content-tertiary);
  font-size: var(--type-body-md);
  line-height: var(--line-height-text);
  box-shadow: var(--shadow-md);
}

/* Not in the export: the legacy toast.css styles a global .toast (margin, 228 px width,
   position, overflow, transition): reset what the DS toast does not set itself */
:where(.ds) .toast {
  margin: 0;
  width: max-content; /* the region is centered from the middle of the page: without this, half the screen at most */
  max-width: calc(100vw - 2 * var(--grid-margin));
  position: static;
  overflow: visible;
  transition: none;
}
:where(.ds) .toast__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

:where(.ds) .toast__close {
  display: inline-flex;
  color: var(--content-primary);
  border-radius: var(--radius-sm);
}
:where(.ds) .toast__close .icon {
  width: 20px;
  height: 20px;
}

/* Display region: bottom center */
/* The region carries .ds itself: showToast() appends it to <body>, outside any .ds container */
:where(.ds).toast-region {
  position: fixed;
  left: 50%;
  bottom: var(--spacing-xl);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  transform: translateX(-50%);
  pointer-events: none;
}
:where(.ds).toast-region .toast {
  pointer-events: auto;
  animation: toast-in var(--duration-base) var(--ease-standard);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* ---- Alert ----
   Inline message (radius/lg) or full-width .alert--banner. Neutral by default. */
:where(.ds) .alert {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
  background-color: var(--background-tertiary);
  color: var(--content-secondary);
  font-size: var(--type-body-md);
  line-height: var(--line-height-text);
}

:where(.ds) .alert__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding-block: 1px;
}

:where(.ds) .alert__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

:where(.ds) .alert__title {
  font-weight: var(--font-weight-bold);
}

:where(.ds) .alert__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
}
:where(.ds) .alert__actions .link {
  color: inherit;
}

:where(.ds) .alert__close {
  display: inline-flex;
  flex-shrink: 0;
  color: inherit;
  border-radius: var(--radius-sm);
}

:where(.ds) .alert--info {
  background-color: var(--background-info);
  color: var(--content-info-strong);
}
:where(.ds) .alert--success {
  background-color: var(--background-success);
  color: var(--content-success-strong);
}
:where(.ds) .alert--warning {
  background-color: var(--background-warning);
  color: var(--content-warning-strong);
}
:where(.ds) .alert--error {
  background-color: var(--background-error);
  color: var(--content-error-strong);
}

:where(.ds) .alert--banner {
  align-items: center;
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: 0;
}
:where(.ds) .alert--banner .alert__body {
  gap: 0;
}
:where(.ds) .alert--banner .alert__actions {
  gap: var(--spacing-md);
}

@media (max-width: 767px) {
  :where(.ds) .alert--banner {
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   5 · DISPLAY
   ========================================================================== */

/* ---- Tag ----
   Style = color: Base (default) · --neutral · --inverse · --accent · --success · --warning
   · --error · --info · --overlay. Action: .tag--remove (cross) · .tag--add (+).
   Static <span>, <button> if clickable. */
:where(.ds) .tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  min-height: var(--size-xs);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-full);
  background-color: var(--background-primary);
  color: var(--content-secondary); /* Base and Neutral; the other styles have their own color */
  font-size: var(--type-label-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
:where(.ds) .tag .icon {
  width: 16px;
  height: 16px;
}
:where(.ds) .tag--remove {
  padding-right: 12px;
}
:where(.ds) .tag--add {
  padding-left: 12px;
}

:where(.ds) :is(button, a).tag {
  cursor: pointer;
}
:where(.ds) :is(button, a).tag:hover { background-color: var(--background-primary-hover); }
:where(.ds) :is(button, a).tag:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--border-focus);
}

:where(.ds) .tag--neutral { background-color: var(--background-secondary); }
:where(.ds) :is(button, a).tag--neutral:hover { background-color: var(--background-secondary-hover); }

:where(.ds) .tag--inverse {
  background-color: var(--background-inverse);
  color: var(--content-inverse);
}
:where(.ds) :is(button, a).tag--inverse:hover { background-color: var(--background-inverse-hover); }

:where(.ds) .tag--accent {
  background-color: var(--background-accent-subtle);
  color: var(--content-accent-strong);
}
:where(.ds) :is(button, a).tag--accent:hover { background-color: var(--background-accent-subtle-hover); }

:where(.ds) .tag--success {
  background-color: var(--background-success);
  color: var(--content-success-strong);
}
:where(.ds) :is(button, a).tag--success:hover { background-color: var(--background-success-hover); }

:where(.ds) .tag--warning {
  background-color: var(--background-warning);
  color: var(--content-warning-strong);
}
:where(.ds) :is(button, a).tag--warning:hover { background-color: var(--background-warning-hover); }

:where(.ds) .tag--error {
  background-color: var(--background-error);
  color: var(--content-error-strong);
}
:where(.ds) :is(button, a).tag--error:hover { background-color: var(--background-error-hover); }

:where(.ds) .tag--info {
  background-color: var(--background-info);
  color: var(--content-info-strong);
}
:where(.ds) :is(button, a).tag--info:hover { background-color: var(--background-info-hover); }

:where(.ds) .tag--overlay {
  background-color: var(--background-overlay);
  color: var(--content-overlay-strong);
}
:where(.ds) :is(button, a).tag--overlay:hover { background-color: var(--background-overlay-hover); }

:where(.ds) .tag:is(:disabled, [aria-disabled="true"]) {
  background-color: var(--background-secondary);
  color: var(--content-disabled);
  cursor: default;
}
:where(.ds) .tag--overlay:is(:disabled, [aria-disabled="true"]) {
  background-color: var(--background-overlay);
  color: var(--content-overlay-strong);
  opacity: 0.4;
}

/* ---- Badge ----
   Counter (default Inverse) or .badge--dot. Styles --neutral · --accent · --error. */
:where(.ds) .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  padding-inline: var(--spacing-xs);
  border-radius: var(--radius-full);
  background-color: var(--background-inverse);
  color: var(--content-inverse);
  font-size: var(--type-label-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  text-align: center;
}
:where(.ds) .badge--neutral {
  background-color: var(--background-secondary);
  color: var(--content-primary);
}
:where(.ds) .badge--accent {
  background-color: var(--background-accent-subtle);
  color: var(--content-accent-strong);
}
:where(.ds) .badge--error {
  background-color: var(--background-error);
  color: var(--content-error-strong);
}

:where(.ds) .badge--dot {
  min-width: 0;
  width: 8px;
  height: 8px;
  padding: 0;
}
:where(.ds) .badge--dot.badge--neutral { background-color: var(--content-tertiary); }
:where(.ds) .badge--dot.badge--accent { background-color: var(--content-accent-strong); }
:where(.ds) .badge--dot.badge--error { background-color: var(--content-error-strong); }

/* ---- Avatar ----
   Square. XS 24 · SM 36 · MD 40 · LG 48 · XL 78 · 2XL 96 · 3XL 136.
   .avatar--initials without photo · .avatar--bordered when it overlaps an image. */
:where(.ds) .avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--background-accent-subtle);
  color: var(--content-accent-strong);
  font-size: var(--type-label-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}
:where(.ds) .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:where(.ds) .avatar--sm { width: 36px; height: 36px; }
:where(.ds) .avatar--md { width: 40px; height: 40px; }
:where(.ds) .avatar--lg { width: 48px; height: 48px; }
:where(.ds) .avatar--xl { width: 78px; height: 78px; }
:where(.ds) .avatar--2xl { width: 96px; height: 96px; }
:where(.ds) .avatar--3xl { width: 136px; height: 136px; }

:where(.ds) .avatar:is(.avatar--lg, .avatar--xl, .avatar--2xl, .avatar--3xl) {
  border-radius: var(--radius-md);
}
:where(.ds) .avatar--initials.avatar--lg {
  border-radius: var(--radius-sm);
}

:where(.ds) .avatar--initials:is(.avatar--sm, .avatar--md) {
  font-size: var(--type-label-md);
  font-weight: var(--font-weight-bold);
}
:where(.ds) .avatar--initials.avatar--lg {
  font-size: var(--type-label-lg);
  font-weight: var(--font-weight-bold);
}
:where(.ds) .avatar--initials:is(.avatar--xl, .avatar--2xl, .avatar--3xl) {
  font-weight: var(--font-weight-heavy);
}
:where(.ds) .avatar--initials.avatar--xl { font-size: var(--type-display-h5); }
:where(.ds) .avatar--initials.avatar--2xl { font-size: var(--type-display-h4); }
:where(.ds) .avatar--initials.avatar--3xl { font-size: var(--type-display-h3); }

:where(.ds) .avatar--bordered::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--border-inverse);
  border-radius: inherit;
  pointer-events: none;
}
:where(.ds) .avatar--bordered:is(.avatar--xl, .avatar--2xl, .avatar--3xl)::after {
  border-width: 2px;
}

/* ---- Dot Indicators ----
   .dots + .dots__dot (<button aria-label="Slide 2 of 5">, aria-current="true" on the displayed slide).
   Dot 12 × 12, click target 24 × 24. */
:where(.ds) .dots {
  display: flex;
  align-items: center;
  justify-content: center;
}

:where(.ds) .dots__dot {
  display: inline-grid;
  place-items: center;
  width: 20px; /* 12 + spacing/sm gap */
  height: 24px;
}

:where(.ds) .dots__dot::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

:where(.ds) .dots__dot:hover::before {
  border-color: var(--content-primary);
  background-color: var(--background-tertiary);
}

:where(.ds) .dots__dot[aria-current="true"]::before {
  border-color: var(--content-primary);
  background-color: var(--content-primary);
}

:where(.ds) .dots__dot:focus-visible {
  outline: none;
}
:where(.ds) .dots__dot:focus-visible::before {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
}

/* Not in the export: the field shows the focus on its control, not on the input (.ds :focus-visible is stronger) */
.ds .field__input:focus-visible {
  outline: none;
}