/* Buttons: Editor type bindings and semantic showcase variants. */

.ui-button,
.theme-button {
  --ui-button-fill: var(--ui-color-primary-fill);
  --ui-button-border: var(--ui-color-primary-border);
  --ui-button-text: var(--ui-color-primary-text);
  --ui-button-hover-fill: var(--ui-color-primary-hover-fill);
  --ui-button-hover-border: var(--ui-color-primary-hover-border);
  --ui-button-hover-text: var(--ui-color-primary-hover-text);
  --ui-button-height: var(--ui-control-height-base);
  --ui-button-padding-x: var(--dna-button-padding-x-base);
  --ui-button-padding-y: var(--dna-button-padding-y-base);
  --ui-button-radius: var(--dna-button-radius);
  --ui-button-font-size: var(--theme-font-size-base);
  --ui-button-line-height: var(--theme-line-height-base);

  position: relative;
  display: inline-flex;
  block-size: var(--ui-button-height);
  min-block-size: var(--ui-button-height);
  max-inline-size: 100%;
  align-items: center;
  justify-content: center;
  gap: var(--dna-button-gap);
  padding-block: var(--ui-button-padding-y);
  padding-inline: var(--ui-button-padding-x);
  border-color: var(--ui-button-border);
  border-style: solid;
  border-width: var(--dna-control-border-width);
  border-radius: var(--ui-button-radius);
  color: var(--ui-button-text);
  background-color: var(--ui-button-fill);
  box-shadow: var(--ui-shadow-button);
  font-family: var(--theme-font-body);
  font-size: var(--ui-button-font-size);
  font-weight: var(--theme-font-weight-medium);
  line-height: var(--ui-button-line-height);
  letter-spacing: var(--theme-letter-spacing-base);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  appearance: none;
  cursor: pointer;
  transform: scale(1);
  transition:
    color var(--ui-transition),
    background-color var(--ui-transition),
    border-color var(--ui-transition),
    box-shadow var(--ui-transition),
    opacity var(--ui-transition),
    transform var(--ui-transition);
}

.ui-button :where(span, p),
.theme-button :where(span, p) {
  color: var(--ui-button-text);
}

.ui-button:hover:not(:disabled, [aria-disabled="true"], .is-disabled),
.theme-button:hover:not(:disabled, [aria-disabled="true"], .is-disabled),
.ui-button.is-hover,
.theme-button.is-hover {
  --ui-button-text: var(--ui-button-hover-text);
  border-color: var(--ui-button-hover-border);
  color: var(--ui-button-hover-text);
  background-color: var(--ui-button-hover-fill);
  box-shadow: var(--ui-shadow-raised);
}

.ui-button:focus-visible,
.theme-button:focus-visible,
.ui-button.is-focus,
.theme-button.is-focus {
  outline-style: solid;
  outline-width: var(--dna-control-border-width);
  outline-color: var(--dna-focus-brand-color);
  outline-offset: var(--ui-space-2xs);
  box-shadow: var(--ui-shadow-button), var(--ui-focus-brand-ring);
}

.ui-button:active:not(:disabled, [aria-disabled="true"], .is-disabled),
.theme-button:active:not(:disabled, [aria-disabled="true"], .is-disabled),
.ui-button.is-active,
.theme-button.is-active,
.ui-button.is-pressed,
.theme-button.is-pressed {
  transform: scale(var(--dna-interaction-active-scale));
}

.ui-button:disabled,
.theme-button:disabled,
.ui-button[aria-disabled="true"],
.theme-button[aria-disabled="true"],
.ui-button.is-disabled,
.theme-button.is-disabled {
  cursor: not-allowed;
  opacity: var(--dna-interaction-disabled-opacity);
}

.ui-button--full-width,
.theme-button--full-width,
.ui-button.type-2,
.ui-button.type-5 {
  inline-size: 100%;
}

.ui-button.type-2 {
  justify-content: space-between;
}

.ui-button--secondary,
.theme-button--secondary,
.ui-button--light,
.ui-button--outlined,
.ui-button--transparent,
.ui-button.type-3.ui-button--no-border,
.ui-button.type-3.ui-button--light,
.ui-button.type-5.ui-button--transparent,
.ui-button.type-6,
.ui-button.type-7 {
  --ui-button-fill: var(--ui-color-secondary-fill);
  --ui-button-border: var(--ui-color-secondary-border);
  --ui-button-text: var(--ui-color-secondary-text);
  --ui-button-hover-fill: var(--ui-color-secondary-hover-fill);
  --ui-button-hover-border: var(--ui-color-secondary-hover-border);
  --ui-button-hover-text: var(--ui-color-secondary-hover-text);
}

.ui-button--primary,
.theme-button--primary,
.ui-button--purple,
.ui-button.type-1,
.ui-button.type-2,
.ui-button.type-3.ui-button--purple,
.ui-button.type-4,
.ui-button.type-5 {
  --ui-button-fill: var(--ui-color-primary-fill);
  --ui-button-border: var(--ui-color-primary-border);
  --ui-button-text: var(--ui-color-primary-text);
  --ui-button-hover-fill: var(--ui-color-primary-hover-fill);
  --ui-button-hover-border: var(--ui-color-primary-hover-border);
  --ui-button-hover-text: var(--ui-color-primary-hover-text);
}

.ui-button--ghost,
.theme-button--ghost,
.ui-button--no-border {
  --ui-button-fill: var(--ui-color-surface);
  --ui-button-border: var(--ui-color-surface);
  --ui-button-text: var(--ui-color-action);
  --ui-button-hover-fill: var(--ui-color-surface-subtle);
  --ui-button-hover-border: var(--ui-color-surface-subtle);
  --ui-button-hover-text: var(--ui-color-action);
  box-shadow: var(--ui-shadow-none);
}

.ui-button--danger,
.theme-button--danger {
  --ui-button-fill: var(--theme-color-status-danger-surface);
  --ui-button-border: var(--theme-color-status-danger-border);
  --ui-button-text: var(--theme-color-status-danger-text);
  --ui-button-hover-fill: var(--theme-color-status-danger-border);
  --ui-button-hover-border: var(--theme-color-status-danger-text);
  --ui-button-hover-text: var(--theme-color-status-danger-text);
}

.ui-button--xs,
.theme-button--xs,
.ui-button[data-size="xs"],
.theme-button[data-size="xs"] {
  --ui-button-height: var(--ui-control-height-xs);
  --ui-button-padding-x: var(--dna-button-padding-x-xs);
  --ui-button-padding-y: var(--dna-button-padding-y-xs);
  --ui-button-font-size: var(--theme-font-size-xs);
  --ui-button-line-height: var(--theme-line-height-xs);
}

.ui-button--sm,
.theme-button--sm,
.ui-button[data-size="sm"],
.theme-button[data-size="sm"] {
  --ui-button-height: var(--ui-control-height-sm);
  --ui-button-padding-x: var(--dna-button-padding-x-sm);
  --ui-button-padding-y: var(--dna-button-padding-y-sm);
  --ui-button-font-size: var(--theme-font-size-sm);
  --ui-button-line-height: var(--theme-line-height-sm);
}

.ui-button--base,
.theme-button--base,
.ui-button[data-size="base"],
.theme-button[data-size="base"] {
  --ui-button-height: var(--ui-control-height-base);
  --ui-button-padding-x: var(--dna-button-padding-x-base);
  --ui-button-padding-y: var(--dna-button-padding-y-base);
}

.ui-button--lg,
.theme-button--lg,
.ui-button[data-size="lg"],
.theme-button[data-size="lg"] {
  --ui-button-height: var(--ui-control-height-lg);
  --ui-button-padding-x: var(--dna-button-padding-x-lg);
  --ui-button-padding-y: var(--dna-button-padding-y-lg);
  --ui-button-font-size: var(--theme-font-size-lg);
  --ui-button-line-height: var(--theme-line-height-lg);
}

.ui-button--xl,
.theme-button--xl,
.ui-button[data-size="xl"],
.theme-button[data-size="xl"] {
  --ui-button-height: var(--ui-control-height-xl);
  --ui-button-padding-x: var(--dna-button-padding-x-xl);
  --ui-button-padding-y: var(--dna-button-padding-y-xl);
  --ui-button-font-size: var(--theme-font-size-xl);
  --ui-button-line-height: var(--theme-line-height-xl);
}

.ui-button--pill,
.theme-button--pill,
.ui-button[data-shape="pill"],
.theme-button[data-shape="pill"] {
  --ui-button-radius: var(--ui-radius-round);
}

.ui-button--square,
.ui-button--icon,
.theme-button--square,
.theme-button--icon,
.ui-button[data-shape="square"],
.theme-button[data-shape="square"] {
  inline-size: var(--ui-button-height);
  padding: var(--ui-button-padding-y);
}

.ui-button__icon,
.theme-button__icon {
  display: inline-flex;
  inline-size: var(--theme-font-size-xl);
  block-size: var(--theme-font-size-xl);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--ui-button-text);
}

.ui-button__icon :where(img, svg),
.theme-button__icon :where(img, svg) {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.ui-button.loading,
.theme-button.is-loading,
.ui-button[aria-busy="true"],
.theme-button[aria-busy="true"] {
  cursor: wait;
}

.ui-button.loading::after,
.theme-button.is-loading::after,
.ui-button[aria-busy="true"]::after,
.theme-button[aria-busy="true"]::after {
  content: "";
  inline-size: var(--theme-font-size-base);
  block-size: var(--theme-font-size-base);
  flex: 0 0 auto;
  border-color: var(--ui-button-text);
  border-inline-end-color: var(--ui-button-fill);
  border-style: solid;
  border-width: var(--dna-control-underline-width);
  border-radius: var(--ui-radius-round);
  animation: ui-button-spin var(--dna-interaction-duration-fast) linear infinite;
}

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

/* Text fields, textarea, select, and search bindings. */

.ui-input,
.ui-select,
.ui-textarea,
.theme-field,
.theme-input,
.theme-select,
.theme-textarea {
  --ui-field-fill: var(--ui-color-surface);
  --ui-field-border: var(--ui-color-border);
  --ui-field-text: var(--ui-color-text);
  --ui-field-placeholder: var(--ui-color-text-muted);
  --ui-field-label: var(--ui-color-subtitle);
  --ui-field-height: calc(
    var(--theme-line-height-base) + var(--dna-input-padding-y-base) +
      var(--dna-input-padding-y-base)
  );
  --ui-field-padding-x: var(--dna-input-padding-x-base);
  --ui-field-padding-y: var(--dna-input-padding-y-base);

  min-inline-size: 0;
  color: var(--ui-field-text);
  font-family: var(--theme-font-body);
}

.ui-input:not(input),
.ui-select:not(select),
.ui-textarea:not(textarea),
.theme-field {
  display: flex;
  flex-direction: column;
  gap: var(--dna-input-gap);
}

.ui-input__label,
.ui-select__label,
.ui-textarea__label,
.theme-field__label {
  display: inline-flex;
  align-items: center;
  gap: var(--dna-navigation-item-gap);
  color: var(--ui-field-label);
  font-size: var(--theme-font-size-sm);
  font-weight: var(--theme-font-weight-medium);
  line-height: var(--theme-line-height-sm);
  letter-spacing: var(--theme-letter-spacing-sm);
}

.ui-input__label-icon,
.ui-input__icon,
.ui-input__icon-prefix,
.ui-select__icon,
.theme-field__icon {
  display: inline-flex;
  inline-size: var(--theme-font-size-xl);
  block-size: var(--theme-font-size-xl);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--ui-color-text-muted);
}

.ui-input__field,
input.ui-input,
.theme-input,
.ui-textarea__text-field,
textarea.ui-textarea,
.theme-textarea,
select.ui-select,
.theme-select,
.ui-select__selected-value {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--ui-field-height);
  padding-block: var(--ui-field-padding-y);
  padding-inline: var(--ui-field-padding-x);
  border-color: var(--ui-field-border);
  border-style: solid;
  border-width: var(--dna-control-border-width);
  border-radius: var(--dna-control-radius);
  color: var(--ui-field-text);
  background-color: var(--ui-field-fill);
  box-shadow: var(--ui-shadow-rest);
  font-family: var(--theme-font-body);
  font-size: var(--theme-font-size-base);
  font-weight: var(--theme-font-weight-normal);
  line-height: var(--theme-line-height-base);
  letter-spacing: var(--theme-letter-spacing-base);
  outline-style: solid;
  outline-width: 0;
  transition:
    color var(--ui-transition),
    background-color var(--ui-transition),
    border-color var(--ui-transition),
    box-shadow var(--ui-transition),
    opacity var(--ui-transition);
}

.ui-input__field,
input.ui-input,
.theme-input:not(textarea),
select.ui-select,
.theme-select,
.ui-select__selected-value {
  block-size: var(--ui-field-height);
}

.ui-input__field::placeholder,
input.ui-input::placeholder,
.theme-input::placeholder,
.ui-textarea__text-field::placeholder,
textarea.ui-textarea::placeholder,
.theme-textarea::placeholder {
  color: var(--ui-field-placeholder);
  opacity: 1;
}

.ui-input__field:hover:not(:disabled, [readonly]),
input.ui-input:hover:not(:disabled, [readonly]),
.theme-input:hover:not(:disabled, [readonly]),
.ui-textarea__text-field:hover:not(:disabled, [readonly]),
textarea.ui-textarea:hover:not(:disabled, [readonly]),
.theme-textarea:hover:not(:disabled, [readonly]),
select.ui-select:hover:not(:disabled),
.theme-select:hover:not(:disabled),
.ui-select__selected-value:hover,
.ui-input.is-hover .ui-input__field,
.ui-select.is-hover .ui-select__selected-value,
.ui-textarea.is-hover .ui-textarea__text-field,
.ui-input__field.is-hover,
input.ui-input.is-hover,
.ui-select__selected-value.is-hover,
select.ui-select.is-hover,
.ui-textarea__text-field.is-hover,
textarea.ui-textarea.is-hover,
.theme-input.is-hover,
.theme-select.is-hover,
.theme-textarea.is-hover,
.theme-field.is-hover :where(.theme-input, .theme-select, .theme-textarea) {
  border-color: var(--ui-color-action);
}

.ui-input__field:focus,
input.ui-input:focus,
.theme-input:focus,
.ui-textarea__text-field:focus,
textarea.ui-textarea:focus,
.theme-textarea:focus,
select.ui-select:focus,
.theme-select:focus,
.ui-select.active .ui-select__selected-value,
.ui-select__selected-value:focus-visible,
.ui-input.is-focus .ui-input__field,
.ui-select.is-focus .ui-select__selected-value,
.ui-textarea.is-focus .ui-textarea__text-field,
.ui-input__field.is-focus,
input.ui-input.is-focus,
.ui-select__selected-value.is-focus,
select.ui-select.is-focus,
.ui-textarea__text-field.is-focus,
textarea.ui-textarea.is-focus,
.theme-input.is-focus,
.theme-select.is-focus,
.theme-textarea.is-focus,
.theme-field.is-focus :where(.theme-input, .theme-select, .theme-textarea) {
  border-color: var(--ui-color-action);
  box-shadow: var(--ui-shadow-rest), var(--ui-focus-input-ring);
  outline-style: solid;
  outline-width: 0;
}

.ui-input.is-error,
.ui-select.is-error,
.ui-textarea.is-error,
.theme-field.is-error {
  --ui-field-border: var(--theme-color-status-danger-border);
  --ui-field-label: var(--theme-color-status-danger-text);
}

.ui-input.is-error .ui-input__field,
.ui-input__field.is-error,
.ui-input__field[aria-invalid="true"],
input.ui-input.is-error,
input.ui-input[aria-invalid="true"],
.theme-input.is-error,
.theme-input[aria-invalid="true"],
.ui-select.is-error .ui-select__selected-value,
select.ui-select.is-error,
select.ui-select[aria-invalid="true"],
.theme-select.is-error,
.theme-select[aria-invalid="true"],
.ui-textarea.is-error .ui-textarea__text-field,
.ui-textarea__text-field.is-error,
.ui-textarea__text-field[aria-invalid="true"],
textarea.ui-textarea.is-error,
textarea.ui-textarea[aria-invalid="true"],
.theme-textarea.is-error,
.theme-textarea[aria-invalid="true"] {
  border-color: var(--theme-color-status-danger-border);
  color: var(--theme-color-status-danger-text);
  box-shadow: var(--dna-focus-ring-x) var(--dna-focus-ring-y)
    var(--dna-focus-ring-blur) var(--dna-focus-ring-spread)
    var(--theme-color-status-danger-surface);
}

.ui-input.is-success,
.ui-select.is-success,
.ui-textarea.is-success,
.theme-field.is-success {
  --ui-field-border: var(--theme-color-status-success-border);
  --ui-field-label: var(--theme-color-status-success-text);
}

.ui-input.is-success .ui-input__field,
.ui-input__field.is-success,
input.ui-input.is-success,
.theme-input.is-success,
.ui-select.is-success .ui-select__selected-value,
select.ui-select.is-success,
.theme-select.is-success,
.ui-textarea.is-success .ui-textarea__text-field,
.ui-textarea__text-field.is-success,
textarea.ui-textarea.is-success,
.theme-textarea.is-success {
  border-color: var(--theme-color-status-success-border);
}

.ui-input.is-disabled,
.ui-select.disabled,
.ui-select.is-disabled,
.ui-textarea.is-disabled,
.theme-field.is-disabled,
.ui-input__field:disabled,
input.ui-input:disabled,
.theme-input:disabled,
.ui-textarea__text-field:disabled,
textarea.ui-textarea:disabled,
.theme-textarea:disabled,
select.ui-select:disabled,
.theme-select:disabled {
  cursor: not-allowed;
  opacity: var(--dna-interaction-disabled-opacity);
}

.ui-input__field[readonly],
input.ui-input[readonly],
.theme-input[readonly],
.ui-textarea__text-field[readonly],
textarea.ui-textarea[readonly],
.theme-textarea[readonly] {
  background-color: var(--ui-color-surface-subtle);
  cursor: default;
}

.ui-input--full-width,
.ui-select--full-width,
.ui-textarea--full-width,
.theme-field--full-width {
  inline-size: 100%;
}

.ui-input[data-size="sm"],
.ui-select[data-size="sm"],
.ui-textarea[data-size="sm"],
.theme-field[data-size="sm"] {
  --ui-field-height: calc(
    var(--theme-line-height-sm) + var(--dna-input-padding-y-sm) +
      var(--dna-input-padding-y-sm)
  );
  --ui-field-padding-x: var(--dna-input-padding-x-sm);
  --ui-field-padding-y: var(--dna-input-padding-y-sm);
}

.ui-input[data-size="lg"],
.ui-select[data-size="lg"],
.ui-textarea[data-size="lg"],
.theme-field[data-size="lg"] {
  --ui-field-height: calc(
    var(--theme-line-height-lg) + var(--dna-input-padding-y-lg) +
      var(--dna-input-padding-y-lg)
  );
  --ui-field-padding-x: var(--dna-input-padding-x-lg);
  --ui-field-padding-y: var(--dna-input-padding-y-lg);
}

.ui-input[data-size="xl"],
.ui-select[data-size="xl"],
.ui-textarea[data-size="xl"],
.theme-field[data-size="xl"] {
  --ui-field-height: calc(
    var(--theme-line-height-xl) + var(--dna-input-padding-y-xl) +
      var(--dna-input-padding-y-xl)
  );
  --ui-field-padding-x: var(--dna-input-padding-x-xl);
  --ui-field-padding-y: var(--dna-input-padding-y-xl);
}

.ui-textarea__wrapper,
.theme-textarea__wrapper {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--dna-input-gap);
}

.ui-textarea__text-field,
textarea.ui-textarea,
.theme-textarea {
  min-block-size: var(--ui-textarea-min-block-size);
  resize: vertical;
}

.ui-select__wrapper,
.theme-select__wrapper {
  position: relative;
  min-inline-size: 0;
}

.ui-select__selected-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dna-input-gap);
  cursor: pointer;
}

.ui-select__preview,
.ui-select__text {
  min-inline-size: 0;
  overflow: hidden;
  color: var(--ui-field-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-select__options,
body .ui-select__options,
.theme-select__options {
  z-index: 20;
  display: flex;
  min-inline-size: var(--ui-dropdown-min-inline-size);
  max-block-size: var(--ui-modal-max-block-size);
  flex-direction: column;
  gap: var(--ui-space-2xs);
  padding: var(--dna-menu-item-padding-y);
  border-color: var(--ui-color-border);
  border-style: solid;
  border-width: var(--dna-control-border-width);
  border-radius: var(--dna-control-surface-radius);
  color: var(--ui-color-text);
  background-color: var(--ui-color-surface);
  box-shadow: var(--ui-shadow-overlay);
  overflow-y: auto;
}

.ui-select__option-item,
.theme-select__option {
  display: flex;
  min-block-size: var(--ui-control-height-sm);
  align-items: center;
  gap: var(--dna-menu-item-gap);
  padding-block: var(--dna-menu-item-padding-y);
  padding-inline: var(--dna-menu-item-padding-x);
  border-radius: var(--dna-menu-item-radius);
  color: var(--ui-color-text);
  background-color: var(--ui-color-surface);
  cursor: pointer;
  transition:
    color var(--ui-transition),
    background-color var(--ui-transition);
}

.ui-select__option-item:hover,
.ui-select__option-item--selected,
.ui-select__option-item.selected,
.theme-select__option:hover,
.theme-select__option.is-selected {
  color: var(--ui-color-primary-hover-text);
  background-color: var(--ui-color-primary-hover-fill);
}

.ui-search,
.theme-search {
  --ui-field-fill: var(--ui-color-surface);
  --ui-field-border: var(--ui-color-border);
  display: flex;
  min-inline-size: 0;
  align-items: center;
  gap: var(--dna-input-gap);
}

.ui-search__input-wrapper,
.theme-search__input-wrapper {
  display: flex;
  min-inline-size: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--dna-input-gap);
  min-block-size: var(--ui-control-height-base);
  padding-inline: var(--dna-input-padding-x-base);
  border-color: var(--ui-field-border);
  border-style: solid;
  border-width: var(--dna-control-border-width);
  border-radius: var(--dna-control-radius);
  color: var(--ui-color-text);
  background-color: var(--ui-field-fill);
  box-shadow: var(--ui-shadow-rest);
}

.ui-search__input-wrapper:focus-within,
.theme-search__input-wrapper:focus-within {
  border-color: var(--ui-color-action);
  box-shadow: var(--ui-shadow-rest), var(--ui-focus-input-ring);
}

.ui-search__dropdown,
.theme-search__dropdown {
  border-color: var(--ui-color-border);
  border-style: solid;
  border-width: var(--dna-control-border-width);
  border-radius: var(--dna-control-surface-radius);
  color: var(--ui-color-text);
  background-color: var(--ui-color-surface);
  box-shadow: var(--ui-shadow-overlay);
}

.ui-search__option,
.theme-search__option {
  padding-block: var(--dna-menu-item-padding-y);
  padding-inline: var(--dna-menu-item-padding-x);
  border-radius: var(--dna-menu-item-radius);
  color: var(--ui-color-text);
  background-color: var(--ui-color-surface);
}

.ui-search__option:hover,
.ui-search__option.is-active,
.theme-search__option:hover,
.theme-search__option.is-active {
  color: var(--ui-color-primary-hover-text);
  background-color: var(--ui-color-primary-hover-fill);
}

.ui-input-group,
.theme-input-group {
  display: flex;
  inline-size: 100%;
  min-inline-size: 0;
  align-items: stretch;
}

.ui-input-group > :where(input, select, textarea, button, .ui-input, .ui-select, .ui-button),
.theme-input-group
  > :where(input, select, textarea, button, .theme-input, .theme-select, .theme-button) {
  min-inline-size: 0;
  border-start-end-radius: var(--ui-radius-none);
  border-end-end-radius: var(--ui-radius-none);
}

.ui-input-group
  > :where(input, select, textarea, button, .ui-input, .ui-select, .ui-button)
  + :where(input, select, textarea, button, .ui-input, .ui-select, .ui-button),
.theme-input-group
  > :where(input, select, textarea, button, .theme-input, .theme-select, .theme-button)
  + :where(input, select, textarea, button, .theme-input, .theme-select, .theme-button) {
  margin-inline-start: calc(var(--dna-control-border-width) * -1);
  border-start-start-radius: var(--ui-radius-none);
  border-end-start-radius: var(--ui-radius-none);
}

.ui-input-group
  > :where(input, select, textarea, button, .ui-input, .ui-select, .ui-button):last-child,
.theme-input-group
  > :where(input, select, textarea, button, .theme-input, .theme-select, .theme-button):last-child {
  border-start-end-radius: var(--dna-control-radius);
  border-end-end-radius: var(--dna-control-radius);
}

.ui-input-group
  > :where(input, select, textarea, button, .ui-input, .ui-select, .ui-button):focus,
.ui-input-group
  > :where(input, select, textarea, button, .ui-input, .ui-select, .ui-button):focus-visible,
.theme-input-group
  > :where(input, select, textarea, button, .theme-input, .theme-select, .theme-button):focus,
.theme-input-group
  > :where(input, select, textarea, button, .theme-input, .theme-select, .theme-button):focus-visible {
  z-index: 1;
}

/* Checkbox, radio, toggle, and Editor switch bindings. */

.ui-checkbox,
.ui-check,
.ui-radio,
.ui-toggle,
.ui-switch,
.theme-check,
.theme-radio,
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--dna-input-gap);
  color: var(--ui-color-text);
  font-family: var(--theme-font-body);
  font-size: var(--theme-font-size-sm);
  line-height: var(--theme-line-height-sm);
  cursor: pointer;
}

.ui-checkbox__empty,
.ui-checkbox__checked,
.ui-checkbox__partial-checked,
.ui-check > input,
input.ui-check,
.theme-check > input,
.ui-radio > input,
input.ui-radio,
.theme-radio > input {
  position: relative;
  display: inline-grid;
  inline-size: var(--ui-selection-size);
  block-size: var(--ui-selection-size);
  flex: 0 0 auto;
  place-content: center;
  margin: 0;
  padding: 0;
  border-color: var(--ui-color-border);
  border-style: solid;
  border-width: var(--dna-control-border-width);
  border-radius: var(--dna-selection-radius);
  color: var(--ui-color-primary-text);
  background-color: var(--ui-color-surface);
  box-shadow: var(--ui-shadow-rest);
  appearance: none;
  cursor: inherit;
  transition:
    background-color var(--ui-transition),
    border-color var(--ui-transition),
    box-shadow var(--ui-transition),
    opacity var(--ui-transition),
    transform var(--ui-transition);
}

.ui-checkbox__checked,
.ui-checkbox__partial-checked,
.ui-checkbox.checked .ui-checkbox__empty,
.ui-checkbox.partial-checked .ui-checkbox__empty,
.ui-checkbox[aria-checked="true"] .ui-checkbox__empty,
.ui-checkbox[aria-checked="mixed"] .ui-checkbox__empty {
  display: none;
}

.ui-checkbox.checked .ui-checkbox__checked,
.ui-checkbox.partial-checked .ui-checkbox__partial-checked,
.ui-checkbox[aria-checked="true"] .ui-checkbox__checked,
.ui-checkbox[aria-checked="mixed"] .ui-checkbox__partial-checked {
  display: inline-grid;
  border-color: var(--ui-color-primary-border);
  color: var(--ui-color-primary-text);
  background-color: var(--ui-color-primary-fill);
}

.ui-checkbox__checked :where(svg, path),
.ui-checkbox__partial-checked :where(svg, path) {
  fill: var(--ui-color-primary-text);
  stroke: var(--ui-color-primary-text);
}

.ui-check > input::after,
input.ui-check::after,
.theme-check > input::after {
  content: "";
  inline-size: calc(var(--ui-selection-size) / 4);
  block-size: calc(var(--ui-selection-size) / 2);
  border-color: var(--ui-color-primary-text);
  border-style: solid;
  border-width: 0 var(--dna-control-underline-width)
    var(--dna-control-underline-width) 0;
  opacity: 0;
  transform: rotate(45deg) scale(var(--dna-interaction-active-scale));
  transition:
    opacity var(--ui-transition),
    transform var(--ui-transition);
}

.ui-check > input:checked,
input.ui-check:checked,
.theme-check > input:checked,
.ui-check.is-checked > input,
.theme-check.is-checked > input {
  border-color: var(--ui-color-primary-border);
  background-color: var(--ui-color-primary-fill);
}

.ui-check > input:checked::after,
input.ui-check:checked::after,
.theme-check > input:checked::after,
.ui-check.is-checked > input::after,
.theme-check.is-checked > input::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.ui-check > input:indeterminate::after,
input.ui-check:indeterminate::after,
.theme-check > input:indeterminate::after {
  inline-size: calc(var(--ui-selection-size) / 2);
  block-size: var(--dna-control-underline-width);
  border: 0;
  background-color: var(--ui-color-primary-text);
  opacity: 1;
  transform: scale(1);
}

.ui-radio > input,
input.ui-radio,
.theme-radio > input {
  border-radius: var(--ui-radius-round);
}

.ui-radio > input::after,
input.ui-radio::after,
.theme-radio > input::after {
  content: "";
  inline-size: calc(var(--ui-selection-size) / 2);
  block-size: calc(var(--ui-selection-size) / 2);
  border-radius: var(--ui-radius-round);
  background-color: var(--ui-color-primary-fill);
  opacity: 0;
  transform: scale(var(--dna-interaction-active-scale));
  transition:
    opacity var(--ui-transition),
    transform var(--ui-transition);
}

.ui-radio > input:checked,
input.ui-radio:checked,
.theme-radio > input:checked,
.ui-radio.is-checked > input,
.theme-radio.is-checked > input {
  border-color: var(--ui-color-primary-border);
}

.ui-radio > input:checked::after,
input.ui-radio:checked::after,
.theme-radio > input:checked::after,
.ui-radio.is-checked > input::after,
.theme-radio.is-checked > input::after {
  opacity: 1;
  transform: scale(1);
}

.ui-checkbox:hover .ui-checkbox__empty,
.ui-check:hover > input,
input.ui-check:hover,
.theme-check:hover > input,
.ui-radio:hover > input,
input.ui-radio:hover,
.theme-radio:hover > input {
  border-color: var(--ui-color-action);
}

.ui-checkbox:focus-visible,
.ui-checkbox.is-focus,
.ui-check > input:focus-visible,
input.ui-check:focus-visible,
.theme-check > input:focus-visible,
.ui-radio > input:focus-visible,
input.ui-radio:focus-visible,
.theme-radio > input:focus-visible {
  outline-style: solid;
  outline-width: 0;
  box-shadow: var(--ui-focus-input-ring);
}

.ui-checkbox[aria-disabled="true"],
.ui-checkbox.is-disabled,
.ui-check:has(input:disabled),
input.ui-check:disabled,
.theme-check:has(input:disabled),
.ui-radio:has(input:disabled),
input.ui-radio:disabled,
.theme-radio:has(input:disabled),
.ui-toggle:has(input:disabled),
.theme-toggle:has(input:disabled),
.ui-switch:has(input:disabled) {
  cursor: not-allowed;
  opacity: var(--dna-interaction-disabled-opacity);
}

.ui-toggle,
.theme-toggle,
.ui-switch__wrapper {
  display: inline-flex;
  align-items: center;
  gap: var(--dna-input-gap);
}

.ui-toggle > input,
.theme-toggle > input,
.ui-switch__input {
  position: absolute;
  inline-size: var(--ui-selection-size);
  block-size: var(--ui-selection-size);
  opacity: 0;
}

.ui-toggle__track,
.theme-toggle__track,
.ui-switch__slider {
  position: relative;
  display: inline-block;
  inline-size: var(--ui-toggle-inline-size);
  block-size: var(--ui-toggle-block-size);
  flex: 0 0 auto;
  border-color: var(--ui-color-border);
  border-style: solid;
  border-width: var(--dna-control-border-width);
  border-radius: var(--ui-radius-round);
  background-color: var(--ui-color-surface-subtle);
  box-shadow: var(--ui-shadow-rest);
  cursor: pointer;
  transition:
    background-color var(--ui-transition),
    border-color var(--ui-transition),
    box-shadow var(--ui-transition);
}

.ui-toggle__track::before,
.theme-toggle__track::before,
.ui-switch__slider::before {
  content: "";
  position: absolute;
  inset-block-start: var(--ui-toggle-inset);
  inset-inline-start: var(--ui-toggle-inset);
  inline-size: var(--ui-selection-size);
  block-size: var(--ui-selection-size);
  border-radius: var(--ui-radius-round);
  background-color: var(--ui-color-secondary-text);
  box-shadow: var(--ui-shadow-rest);
  transform: translateX(0);
  transition:
    background-color var(--ui-transition),
    transform var(--ui-transition);
}

.ui-toggle > input:checked + .ui-toggle__track,
.theme-toggle > input:checked + .theme-toggle__track,
.ui-toggle.is-checked .ui-toggle__track,
.theme-toggle.is-checked .theme-toggle__track,
.ui-switch__input:checked + .ui-switch__slider {
  border-color: var(--ui-color-primary-border);
  background-color: var(--ui-color-primary-fill);
}

.ui-toggle > input:checked + .ui-toggle__track::before,
.theme-toggle > input:checked + .theme-toggle__track::before,
.ui-toggle.is-checked .ui-toggle__track::before,
.theme-toggle.is-checked .theme-toggle__track::before,
.ui-switch__input:checked + .ui-switch__slider::before {
  background-color: var(--ui-color-primary-text);
  transform: translateX(var(--ui-toggle-travel));
}

.ui-toggle > input:focus-visible + .ui-toggle__track,
.theme-toggle > input:focus-visible + .theme-toggle__track,
.ui-toggle.is-focus .ui-toggle__track,
.theme-toggle.is-focus .theme-toggle__track,
.ui-switch__input:focus-visible + .ui-switch__slider {
  box-shadow: var(--ui-shadow-rest), var(--ui-focus-input-ring);
}

.ui-checkbox__label,
.ui-switch__label,
.ui-check__label,
.ui-radio__label,
.ui-toggle__label {
  color: var(--ui-color-text);
}

/* Existing New Order radio DOM remains section-local but consumes the same DNA. */
.new-order-v1 .ui-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dna-input-gap);
}

.new-order-v1 .ui-radio-group__option {
  display: inline-flex;
  align-items: center;
  gap: var(--dna-input-gap);
  padding-block: var(--dna-navigation-item-padding-y);
  padding-inline: var(--dna-navigation-item-padding-x);
  border-color: var(--ui-color-border);
  border-style: solid;
  border-width: var(--dna-control-border-width);
  border-radius: var(--dna-control-radius);
  color: var(--ui-color-text);
  background-color: var(--ui-color-surface);
  cursor: pointer;
}

.new-order-v1 .ui-radio-group__input {
  position: absolute;
  opacity: 0;
}

.new-order-v1 .ui-radio-group__control {
  display: inline-grid;
  inline-size: var(--ui-selection-size);
  block-size: var(--ui-selection-size);
  flex: 0 0 auto;
  place-content: center;
  border-color: var(--ui-color-border);
  border-style: solid;
  border-width: var(--dna-control-border-width);
  border-radius: var(--ui-radius-round);
  background-color: var(--ui-color-surface);
}

.new-order-v1 .ui-radio-group__control::after {
  content: "";
  inline-size: calc(var(--ui-selection-size) / 2);
  block-size: calc(var(--ui-selection-size) / 2);
  border-radius: var(--ui-radius-round);
  background-color: var(--ui-color-primary-fill);
  opacity: 0;
  transform: scale(var(--dna-interaction-active-scale));
  transition:
    opacity var(--ui-transition),
    transform var(--ui-transition);
}

.new-order-v1 .ui-radio-group__input:checked + .ui-radio-group__control,
.new-order-v1 .ui-radio-group__option.is-active .ui-radio-group__control {
  border-color: var(--ui-color-primary-border);
}

.new-order-v1 .ui-radio-group__input:checked + .ui-radio-group__control::after,
.new-order-v1 .ui-radio-group__option.is-active .ui-radio-group__control::after {
  opacity: 1;
  transform: scale(1);
}

.new-order-v1 .ui-radio-group__input:focus-visible + .ui-radio-group__control,
.new-order-v1 .ui-radio-group__option.is-focus .ui-radio-group__control {
  box-shadow: var(--ui-focus-input-ring);
}

.new-order-v1 .ui-radio-group__text {
  color: var(--ui-color-text);
  font-size: var(--theme-font-size-sm);
  line-height: var(--theme-line-height-sm);
}

/* Tabs, accordion, menus, dropdowns, pagination, and date navigation. */

.ui-tabs,
.theme-tabs {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--dna-navigation-item-gap);
  color: var(--ui-color-text);
}

.ui-tabs--head,
.theme-tabs__list {
  display: flex;
  min-inline-size: 0;
  align-items: center;
  gap: var(--dna-navigation-item-gap);
  margin: 0;
  padding: 0;
  border-block-end-color: var(--ui-color-border);
  border-block-end-style: solid;
  border-block-end-width: var(--dna-control-border-width);
  list-style: none;
  overflow-x: auto;
}

.ui-tabs__head-item,
.theme-tabs__item {
  --ui-tab-text: var(--ui-color-text-muted);
  --ui-tab-fill: var(--ui-color-surface);

  position: relative;
  display: flex;
  min-inline-size: max-content;
  align-items: center;
  border-radius: var(--dna-navigation-item-radius);
  color: var(--ui-tab-text);
  background-color: var(--ui-tab-fill);
}

.ui-tabs__head-link,
.theme-tabs__link {
  display: inline-flex;
  align-items: center;
  gap: var(--dna-navigation-item-gap);
  padding-block: var(--dna-navigation-pill-padding-y);
  padding-inline: var(--dna-navigation-pill-padding-x);
  border: 0;
  border-radius: inherit;
  color: var(--ui-tab-text);
  background-color: var(--ui-tab-fill);
  font: inherit;
  font-size: var(--theme-font-size-sm);
  font-weight: var(--theme-font-weight-medium);
  line-height: var(--theme-line-height-sm);
  text-decoration: none;
  appearance: none;
  cursor: pointer;
  transition:
    color var(--ui-transition),
    background-color var(--ui-transition),
    box-shadow var(--ui-transition);
}

.ui-tabs__head-item:hover,
.theme-tabs__item:hover,
.ui-tabs__head-item.is-hover {
  --ui-tab-text: var(--ui-color-action);
  --ui-tab-fill: var(--ui-color-surface-subtle);
}

.ui-tabs__head-item.uk-active,
.ui-tabs__head-item.active,
.ui-tabs__head-item.is-active,
.theme-tabs__item.is-active,
.theme-tabs__item[aria-selected="true"] {
  --ui-tab-text: var(--ui-color-primary-text);
  --ui-tab-fill: var(--ui-color-primary-fill);
}

.ui-tabs__head-item.uk-active::after,
.ui-tabs__head-item.active::after,
.ui-tabs__head-item.is-active::after,
.theme-tabs__item.is-active::after,
.theme-tabs__item[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset-inline: var(--dna-navigation-item-padding-x);
  inset-block-end: calc(var(--dna-control-border-width) * -1);
  block-size: var(--dna-control-underline-width);
  border-radius: var(--dna-selection-radius);
  background-color: var(--ui-color-primary-border);
}

.ui-tabs__head-link:focus-visible,
.theme-tabs__link:focus-visible,
.ui-tabs__head-item.is-focus .ui-tabs__head-link {
  outline-style: solid;
  outline-width: 0;
  box-shadow: var(--ui-focus-neutral-ring);
}

.ui-tabs--content,
.theme-tabs__panel {
  min-inline-size: 0;
  padding-block: var(--dna-card-padding-compact);
  color: var(--ui-color-text);
}

.ui-accordion,
.theme-accordion {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--dna-navigation-item-gap);
  color: var(--ui-color-text);
}

.ui-accordion__item,
.theme-accordion__item {
  overflow: clip;
  border-color: var(--ui-color-border);
  border-style: solid;
  border-width: var(--dna-card-border-width);
  border-radius: var(--dna-card-radius);
  color: var(--ui-color-text);
  background-color: var(--ui-color-surface);
  box-shadow: var(--ui-shadow-rest);
  transition:
    border-color var(--ui-transition),
    box-shadow var(--ui-transition);
}

.ui-accordion__item:hover,
.theme-accordion__item:hover,
.ui-accordion__item.is-hover {
  border-color: var(--ui-color-action);
}

.ui-accordion__item.active,
.ui-accordion__item.is-active,
.ui-accordion__item[open],
.theme-accordion__item.is-active,
.theme-accordion__item[open] {
  border-color: var(--ui-color-primary-border);
  box-shadow: var(--ui-shadow-raised);
}

.ui-accordion__header,
.ui-accordion__title,
.uk-accordion-title,
.theme-accordion__trigger {
  display: flex;
  inline-size: 100%;
  min-block-size: var(--ui-control-height-base);
  align-items: center;
  justify-content: space-between;
  gap: var(--dna-navigation-item-gap);
  padding-block: var(--dna-navigation-pill-padding-y);
  padding-inline: var(--dna-navigation-pill-padding-x);
  border: 0;
  color: var(--ui-color-title);
  background-color: var(--ui-color-surface);
  font-size: var(--theme-font-size-base);
  font-weight: var(--theme-font-weight-medium);
  line-height: var(--theme-line-height-base);
  text-align: start;
  cursor: pointer;
}

.ui-accordion__header:focus-visible,
.ui-accordion__title:focus-visible,
.uk-accordion-title:focus-visible,
.theme-accordion__trigger:focus-visible,
.ui-accordion__item.is-focus :where(.ui-accordion__header, .ui-accordion__title) {
  outline-style: solid;
  outline-width: 0;
  box-shadow: inset var(--ui-focus-neutral-ring);
}

.ui-accordion__content,
.theme-accordion__content {
  display: none;
  padding-block: var(--dna-card-padding-compact);
  padding-inline: var(--dna-card-padding-default);
  border-block-start-color: var(--ui-color-border);
  border-block-start-style: solid;
  border-block-start-width: var(--dna-control-border-width);
  color: var(--ui-color-text-muted);
  background-color: var(--ui-color-surface);
}

.ui-accordion__item.active > .ui-accordion__content,
.ui-accordion__item.is-active > .ui-accordion__content,
.ui-accordion__item[open] > .ui-accordion__content,
.theme-accordion__item.is-active > .theme-accordion__content,
.theme-accordion__item[open] > .theme-accordion__content {
  display: block;
}

.ui-accordion__arrow-icon,
.ui-accordion__icon,
.ui-accordion__icon-plus,
.ui-accordion__icon-minus,
.theme-accordion__icon {
  display: inline-flex;
  inline-size: var(--theme-font-size-xl);
  block-size: var(--theme-font-size-xl);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--ui-color-action);
  transition: transform var(--ui-transition);
}

.ui-accordion__item.active :where(.ui-accordion__arrow-icon, .ui-accordion__icon),
.ui-accordion__item.is-active :where(.ui-accordion__arrow-icon, .ui-accordion__icon),
.theme-accordion__item.is-active .theme-accordion__icon {
  transform: rotate(0.5turn);
}

.ui-accordion__counter {
  color: var(--ui-color-text-muted);
  font-size: var(--theme-font-size-xs);
  line-height: var(--theme-line-height-xs);
}

.ui-dropdown,
.theme-dropdown {
  position: relative;
  display: inline-flex;
  min-inline-size: 0;
  color: var(--ui-color-text);
}

.ui-dropdown__trigger,
.theme-dropdown__trigger {
  display: inline-flex;
  min-block-size: var(--ui-control-height-base);
  align-items: center;
  justify-content: center;
  gap: var(--dna-navigation-item-gap);
  padding-block: var(--dna-navigation-item-padding-y);
  padding-inline: var(--dna-navigation-item-padding-x);
  border-color: var(--ui-color-border);
  border-style: solid;
  border-width: var(--dna-control-border-width);
  border-radius: var(--dna-control-radius);
  color: var(--ui-color-text);
  background-color: var(--ui-color-surface);
  box-shadow: var(--ui-shadow-rest);
  cursor: pointer;
}

.ui-dropdown__trigger:hover,
.theme-dropdown__trigger:hover,
.ui-dropdown.is-hover .ui-dropdown__trigger {
  border-color: var(--ui-color-action);
  color: var(--ui-color-action);
}

.ui-dropdown__trigger:focus-visible,
.theme-dropdown__trigger:focus-visible,
.ui-dropdown.is-focus .ui-dropdown__trigger {
  outline-style: solid;
  outline-width: 0;
  box-shadow: var(--ui-shadow-rest), var(--ui-focus-neutral-ring);
}

.ui-dropdown__popper,
.ui-dropdown__content,
.theme-dropdown__menu,
.ui-dropdown .uk-dropdown {
  position: absolute;
  z-index: 30;
  inset-block-start: calc(100% + var(--ui-space-xs));
  inset-inline-start: 0;
  display: none;
  min-inline-size: var(--ui-dropdown-min-inline-size);
  flex-direction: column;
  gap: var(--ui-space-2xs);
  padding: var(--dna-menu-item-padding-y);
  border-color: var(--ui-color-border);
  border-style: solid;
  border-width: var(--dna-control-border-width);
  border-radius: var(--dna-control-surface-radius);
  color: var(--ui-color-text);
  background-color: var(--ui-color-surface);
  box-shadow: var(--ui-shadow-overlay);
}

.ui-dropdown.active .ui-dropdown__popper,
.ui-dropdown.is-open .ui-dropdown__popper,
.ui-dropdown:focus-within .ui-dropdown__popper,
.ui-dropdown .uk-dropdown.uk-open,
.ui-dropdown.is-open .ui-dropdown__content,
.theme-dropdown.is-open .theme-dropdown__menu,
.theme-dropdown:focus-within .theme-dropdown__menu {
  display: flex;
}

.ui-dropdown__popper-item,
.ui-dropdown__item,
.theme-dropdown__item {
  display: flex;
  min-block-size: var(--ui-control-height-sm);
  align-items: center;
  gap: var(--dna-menu-item-gap);
  padding-block: var(--dna-menu-item-padding-y);
  padding-inline: var(--dna-menu-item-padding-x);
  border: 0;
  border-radius: var(--dna-menu-item-radius);
  color: var(--ui-color-text);
  background-color: var(--ui-color-surface);
  font: inherit;
  text-align: start;
  text-decoration: none;
  appearance: none;
  cursor: pointer;
  transition:
    color var(--ui-transition),
    background-color var(--ui-transition);
}

.ui-dropdown__popper-item:hover,
.ui-dropdown__popper-item.is-active,
.ui-dropdown__item:hover,
.ui-dropdown__item.is-active,
.theme-dropdown__item:hover,
.theme-dropdown__item.is-active {
  color: var(--ui-color-primary-hover-text);
  background-color: var(--ui-color-primary-hover-fill);
}

.ui-menu,
.theme-menu,
.ui-navigation,
.theme-navigation {
  display: flex;
  flex-direction: column;
  gap: var(--dna-navigation-item-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-menu__item,
.theme-menu__item,
.ui-navigation__item,
.theme-navigation__item {
  display: flex;
  min-block-size: var(--ui-control-height-sm);
  align-items: center;
  gap: var(--dna-menu-item-gap);
  padding-block: var(--dna-menu-item-padding-y);
  padding-inline: var(--dna-menu-item-padding-x);
  border: 0;
  border-radius: var(--dna-menu-item-radius);
  color: var(--ui-color-text);
  background-color: var(--ui-color-surface);
  font: inherit;
  text-align: start;
  text-decoration: none;
  appearance: none;
  cursor: pointer;
}

.ui-navigation__item,
.theme-navigation__item {
  gap: var(--dna-navigation-item-gap);
  padding-block: var(--dna-navigation-item-padding-y);
  padding-inline: var(--dna-navigation-item-padding-x);
  border-radius: var(--dna-navigation-item-radius);
}

.ui-menu__item:hover,
.theme-menu__item:hover,
.ui-navigation__item:hover,
.theme-navigation__item:hover,
.ui-menu__item.is-active,
.theme-menu__item.is-active,
.ui-navigation__item.is-active,
.theme-navigation__item.is-active {
  color: var(--ui-color-primary-hover-text);
  background-color: var(--ui-color-primary-hover-fill);
}

.ui-breadcrumbs,
.theme-breadcrumbs,
.ui-pagination,
.theme-pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--dna-navigation-item-gap);
  margin: 0;
  padding: 0;
  color: var(--ui-color-text-muted);
  list-style: none;
}

.ui-pagination__link,
.theme-pagination__link,
.ui-breadcrumbs a,
.theme-breadcrumbs a {
  display: inline-flex;
  min-inline-size: var(--ui-control-height-xs);
  min-block-size: var(--ui-control-height-xs);
  align-items: center;
  justify-content: center;
  gap: var(--dna-navigation-item-gap);
  padding-block: var(--dna-navigation-item-padding-y);
  padding-inline: var(--dna-navigation-item-padding-x);
  border-radius: var(--dna-navigation-item-radius);
  color: var(--ui-color-text-muted);
  background-color: var(--ui-color-surface);
  text-decoration: none;
}

.ui-pagination__link:hover,
.ui-pagination__link.active,
.ui-pagination__link.is-active,
.theme-pagination__link:hover,
.theme-pagination__link.is-active,
.ui-breadcrumbs a:hover,
.theme-breadcrumbs a:hover {
  color: var(--ui-color-primary-hover-text);
  background-color: var(--ui-color-primary-hover-fill);
}

.ui-date-cell,
.theme-date-cell,
.flatpickr-day {
  display: inline-grid;
  inline-size: var(--ui-control-height-base);
  block-size: var(--ui-control-height-base);
  place-content: center;
  border-radius: var(--dna-date-cell-radius);
  color: var(--ui-color-text);
  background-color: var(--ui-color-surface);
  cursor: pointer;
}

.ui-date-cell:hover,
.theme-date-cell:hover,
.flatpickr-day:hover {
  color: var(--ui-color-primary-hover-text);
  background-color: var(--ui-color-primary-hover-fill);
}

.ui-date-cell.is-selected,
.theme-date-cell.is-selected,
.flatpickr-day.selected {
  color: var(--ui-color-primary-text);
  background-color: var(--ui-color-primary-fill);
}

.ui-date-cell.is-in-range,
.theme-date-cell.is-in-range,
.flatpickr-day.inRange {
  border-radius: var(--dna-date-cell-range-radius);
  color: var(--ui-color-action);
  background-color: var(--ui-color-surface-subtle);
}

.ui-stepper,
.theme-stepper {
  display: flex;
  min-inline-size: 0;
  align-items: flex-start;
  gap: var(--dna-navigation-item-gap);
  margin: 0;
  padding: 0;
  color: var(--ui-color-text-muted);
  list-style: none;
}

.ui-stepper__item,
.theme-stepper__item {
  --ui-step-fill: var(--ui-color-surface);
  --ui-step-border: var(--ui-color-border);
  --ui-step-text: var(--ui-color-text-muted);

  position: relative;
  display: flex;
  min-inline-size: 0;
  flex: 1 1 0;
  align-items: center;
  gap: var(--dna-navigation-item-gap);
  color: var(--ui-step-text);
  font-size: var(--theme-font-size-sm);
  line-height: var(--theme-line-height-sm);
}

.ui-stepper__item::after,
.theme-stepper__item::after {
  content: "";
  block-size: var(--dna-control-border-width);
  flex: 1 1 auto;
  background-color: var(--ui-step-border);
}

.ui-stepper__item:last-child::after,
.theme-stepper__item:last-child::after {
  display: none;
}

.ui-stepper__marker,
.theme-stepper__marker {
  display: inline-grid;
  inline-size: var(--ui-control-height-xs);
  block-size: var(--ui-control-height-xs);
  flex: 0 0 auto;
  place-content: center;
  border-color: var(--ui-step-border);
  border-style: solid;
  border-width: var(--dna-control-border-width);
  border-radius: var(--ui-radius-round);
  color: var(--ui-step-text);
  background-color: var(--ui-step-fill);
  font-size: var(--theme-font-size-xs);
  font-weight: var(--theme-font-weight-semibold);
  line-height: var(--theme-line-height-xs);
}

.ui-stepper__item.is-current,
.ui-stepper__item[aria-current="step"],
.theme-stepper__item.is-current,
.theme-stepper__item[aria-current="step"] {
  --ui-step-fill: var(--ui-color-status-info-surface);
  --ui-step-border: var(--ui-color-status-info-border);
  --ui-step-text: var(--ui-color-status-info-text);
}

.ui-stepper__item.is-complete,
.theme-stepper__item.is-complete {
  --ui-step-fill: var(--ui-color-status-success-surface);
  --ui-step-border: var(--ui-color-status-success-border);
  --ui-step-text: var(--ui-color-status-success-text);
}

/* Cards, alerts, statuses, notifications, progress, rating, and loading. */

.ui-card,
.theme-card,
.ui-mobile-listing-card {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--dna-card-gap-default);
  padding: var(--dna-card-padding-default);
  border-color: var(--ui-color-border);
  border-style: solid;
  border-width: var(--dna-card-border-width);
  border-radius: var(--dna-card-radius);
  color: var(--ui-color-text);
  background-color: var(--ui-color-surface);
  box-shadow: var(--ui-shadow-rest);
  transition:
    border-color var(--ui-transition),
    box-shadow var(--ui-transition),
    transform var(--ui-transition);
}

.ui-card--compact,
.theme-card--compact,
.ui-mobile-listing-card.is-compact {
  gap: var(--dna-card-gap-compact);
  padding: var(--dna-card-padding-compact);
}

.ui-card--spacious,
.theme-card--spacious,
.ui-mobile-listing-card.is-spacious {
  gap: var(--dna-card-gap-spacious);
  padding: var(--dna-card-padding-spacious);
}

.ui-card--raised,
.theme-card--raised {
  box-shadow: var(--ui-shadow-raised);
}

.ui-card--interactive,
.theme-card--interactive,
.ui-mobile-listing-card.ui-table__clickable {
  cursor: pointer;
}

.ui-card--interactive:hover,
.theme-card--interactive:hover,
.ui-mobile-listing-card.ui-table__clickable:hover,
.ui-card.is-hover,
.theme-card.is-hover {
  border-color: var(--ui-color-action);
  box-shadow: var(--ui-shadow-raised);
}

.ui-card--interactive:focus-visible,
.theme-card--interactive:focus-visible,
.ui-mobile-listing-card.ui-table__clickable:focus-visible,
.ui-card.is-focus,
.theme-card.is-focus {
  outline-style: solid;
  outline-width: 0;
  box-shadow: var(--ui-shadow-raised), var(--ui-focus-neutral-ring);
}

.ui-card--interactive:active,
.theme-card--interactive:active,
.ui-card.is-pressed,
.theme-card.is-pressed {
  transform: scale(var(--dna-interaction-active-scale));
}

.ui-card__header,
.theme-card__header,
.ui-mobile-listing-card__header,
.ui-card__body,
.theme-card__body,
.ui-mobile-listing-card__body,
.ui-card__footer,
.theme-card__footer,
.ui-mobile-listing-card__footer {
  display: flex;
  min-inline-size: 0;
  align-items: center;
  gap: var(--dna-card-gap-compact);
}

.ui-card__header,
.theme-card__header,
.ui-mobile-listing-card__header {
  justify-content: space-between;
  color: var(--ui-color-title);
  font-weight: var(--theme-font-weight-semibold);
}

.ui-card__body,
.theme-card__body,
.ui-mobile-listing-card__body {
  flex-direction: column;
  align-items: stretch;
  color: var(--ui-color-text);
}

.ui-card__footer,
.theme-card__footer,
.ui-mobile-listing-card__footer {
  justify-content: flex-end;
  padding-block-start: var(--dna-card-gap-compact);
  border-block-start-color: var(--ui-color-border);
  border-block-start-style: solid;
  border-block-start-width: var(--dna-control-border-width);
}

.ui-mobile-listing-card__row,
.ui-mobile-listing-card__column,
.ui-mobile-listing-card__block {
  display: flex;
  min-inline-size: 0;
  gap: var(--dna-navigation-item-gap);
}

.ui-mobile-listing-card__row {
  align-items: center;
  justify-content: space-between;
}

.ui-mobile-listing-card__column,
.ui-mobile-listing-card__block {
  flex-direction: column;
}

.ui-alert,
.theme-alert,
.ui-form-notification,
.ui-kit-notification-custom {
  --ui-feedback-surface: var(--ui-color-status-info-surface);
  --ui-feedback-border: var(--ui-color-status-info-border);
  --ui-feedback-text: var(--ui-color-status-info-text);

  display: flex;
  min-inline-size: 0;
  align-items: flex-start;
  gap: var(--dna-input-gap);
  padding-block: var(--dna-input-padding-y-base);
  padding-inline: var(--dna-input-padding-x-base);
  border-color: var(--ui-feedback-border);
  border-style: solid;
  border-width: var(--dna-control-border-width);
  border-radius: var(--dna-control-radius);
  color: var(--ui-feedback-text);
  background-color: var(--ui-feedback-surface);
  font-size: var(--theme-font-size-sm);
  line-height: var(--theme-line-height-sm);
}

.ui-alert--success,
.theme-alert--success,
.ui-alert[data-status="success"],
.theme-alert[data-status="success"],
.uk-notification-message:not(.uk-notification-message-danger)
  .ui-kit-notification-custom {
  --ui-feedback-surface: var(--ui-color-status-success-surface);
  --ui-feedback-border: var(--ui-color-status-success-border);
  --ui-feedback-text: var(--ui-color-status-success-text);
}

.ui-alert--warning,
.theme-alert--warning,
.ui-alert[data-status="warning"],
.theme-alert[data-status="warning"] {
  --ui-feedback-surface: var(--ui-color-status-warning-surface);
  --ui-feedback-border: var(--ui-color-status-warning-border);
  --ui-feedback-text: var(--ui-color-status-warning-text);
}

.ui-alert--danger,
.theme-alert--danger,
.ui-alert--error,
.theme-alert--error,
.ui-alert[data-status="danger"],
.theme-alert[data-status="danger"],
.ui-form-notification.is-error,
.uk-notification-message-danger .ui-kit-notification-custom {
  --ui-feedback-surface: var(--ui-color-status-danger-surface);
  --ui-feedback-border: var(--ui-color-status-danger-border);
  --ui-feedback-text: var(--ui-color-status-danger-text);
}

.ui-alert--info,
.theme-alert--info,
.ui-alert[data-status="info"],
.theme-alert[data-status="info"] {
  --ui-feedback-surface: var(--ui-color-status-info-surface);
  --ui-feedback-border: var(--ui-color-status-info-border);
  --ui-feedback-text: var(--ui-color-status-info-text);
}

.ui-alert__title,
.theme-alert__title,
.ui-kit-notification-custom__title {
  color: var(--ui-feedback-text);
  font-weight: var(--theme-font-weight-semibold);
}

.ui-alert__icon,
.theme-alert__icon,
.ui-kit-notification-custom__icon {
  display: inline-flex;
  inline-size: var(--theme-font-size-xl);
  block-size: var(--theme-font-size-xl);
  flex: 0 0 auto;
  color: var(--ui-feedback-text);
}

.ui-badge,
.theme-badge,
.ui-table__status-badge,
.ui-mobile-listing__status,
.ui-notification-list-badges {
  --ui-status-surface: var(--ui-color-status-info-surface);
  --ui-status-border: var(--ui-color-status-info-border);
  --ui-status-text: var(--ui-color-status-info-text);

  display: inline-flex;
  min-inline-size: 0;
  min-block-size: var(--ui-control-height-xs);
  align-items: center;
  justify-content: center;
  gap: var(--dna-navigation-item-gap);
  padding-block: var(--dna-navigation-item-padding-y);
  padding-inline: var(--dna-navigation-pill-padding-x);
  border-color: var(--ui-status-border);
  border-style: solid;
  border-width: var(--dna-control-border-width);
  border-radius: var(--ui-radius-round);
  color: var(--ui-status-text);
  background-color: var(--ui-status-surface);
  font-size: var(--theme-font-size-xs);
  font-weight: var(--theme-font-weight-medium);
  line-height: var(--theme-line-height-xs);
  white-space: nowrap;
}

.ui-badge--success,
.theme-badge--success,
.ui-badge[data-status="success"],
.theme-badge[data-status="success"],
.ui-table__status-badge.success,
.ui-table__status-badge.completed,
.ui-table__status-badge.Completed,
.ui-mobile-listing__status.success,
.ui-mobile-listing__status.completed {
  --ui-status-surface: var(--ui-color-status-success-surface);
  --ui-status-border: var(--ui-color-status-success-border);
  --ui-status-text: var(--ui-color-status-success-text);
}

.ui-badge--neutral,
.theme-badge--neutral,
.ui-badge[data-status="neutral"],
.theme-badge[data-status="neutral"] {
  --ui-status-surface: var(--ui-color-surface-subtle);
  --ui-status-border: var(--ui-color-border);
  --ui-status-text: var(--ui-color-text-muted);
}

.ui-badge--warning,
.theme-badge--warning,
.ui-badge[data-status="warning"],
.theme-badge[data-status="warning"],
.ui-table__status-badge.pending,
.ui-table__status-badge.Pending,
.ui-table__status-badge.processing,
.ui-table__status-badge.Processing,
.ui-table__status-badge.paused,
.ui-table__status-badge.Paused,
.ui-table__status-badge.queued,
.ui-table__status-badge.Queued,
.ui-table__status-badge.terminated,
.ui-table__status-badge.Terminated,
.ui-table__status-badge.partial,
.ui-table__status-badge.Partial,
.ui-table__status-badge.expired,
.ui-table__status-badge.Expired,
.ui-mobile-listing__status.pending,
.ui-mobile-listing__status.processing,
.ui-mobile-listing__status.paused,
.ui-mobile-listing__status.queued,
.ui-mobile-listing__status.partial,
.ui-mobile-listing__status.expired {
  --ui-status-surface: var(--ui-color-status-warning-surface);
  --ui-status-border: var(--ui-color-status-warning-border);
  --ui-status-text: var(--ui-color-status-warning-text);
}

.ui-badge--danger,
.theme-badge--danger,
.ui-badge[data-status="danger"],
.theme-badge[data-status="danger"],
.ui-table__status-badge.error,
.ui-table__status-badge.Error,
.ui-table__status-badge.fail,
.ui-table__status-badge.Fail,
.ui-table__status-badge.canceled,
.ui-table__status-badge.Canceled,
.ui-table__status-badge.cancelled,
.ui-table__status-badge.Cancelled,
.ui-table__status-badge.rejected,
.ui-table__status-badge.Rejected,
.ui-mobile-listing__status.error,
.ui-mobile-listing__status.canceled,
.ui-mobile-listing__status.cancelled,
.ui-mobile-listing__status.rejected {
  --ui-status-surface: var(--ui-color-status-danger-surface);
  --ui-status-border: var(--ui-color-status-danger-border);
  --ui-status-text: var(--ui-color-status-danger-text);
}

.ui-badge--info,
.theme-badge--info,
.ui-badge[data-status="info"],
.theme-badge[data-status="info"],
.ui-table__status-badge.active,
.ui-table__status-badge.Active,
.ui-table__status-badge.awaiting,
.ui-table__status-badge.Awaiting,
.ui-table__status-badge.responded,
.ui-table__status-badge.Responded,
.ui-table__status-badge.open,
.ui-table__status-badge.Open,
.ui-table__status-badge.In.Progress,
.ui-table__status-badge.In.progress,
.ui-table__status-badge.in_progress,
.ui-table__status-badge.snoozed,
.ui-table__status-badge.Snoozed,
.ui-table__status-badge.frozen,
.ui-table__status-badge.Frozen,
.ui-mobile-listing__status.active,
.ui-mobile-listing__status.awaiting,
.ui-mobile-listing__status.responded,
.ui-mobile-listing__status.open,
.ui-mobile-listing__status.in_progress,
.ui-mobile-listing__status.snoozed {
  --ui-status-surface: var(--ui-color-status-info-surface);
  --ui-status-border: var(--ui-color-status-info-border);
  --ui-status-text: var(--ui-color-status-info-text);
}

.uk-notification,
.ui-notification-list,
.theme-notification-list {
  color: var(--ui-color-text);
  font-family: var(--theme-font-body);
}

.uk-notification-message,
.ui-notification-list__item,
.theme-notification {
  padding: var(--dna-card-padding-compact);
  border-color: var(--ui-color-border);
  border-style: solid;
  border-width: var(--dna-card-border-width);
  border-radius: var(--dna-card-radius);
  color: var(--ui-color-text);
  background-color: var(--ui-color-surface);
  box-shadow: var(--ui-shadow-overlay);
}

.ui-notification-list__body,
.ui-notification-list__footer,
.theme-notification__body,
.theme-notification__footer {
  display: flex;
  min-inline-size: 0;
  gap: var(--dna-card-gap-compact);
}

.ui-notification-list__footer,
.theme-notification__footer {
  justify-content: flex-end;
  margin-block-start: var(--dna-card-gap-compact);
}

.ui-progress,
.theme-progress,
progress.ui-progress {
  display: block;
  inline-size: 100%;
  block-size: var(--ui-progress-block-size);
  overflow: hidden;
  border: 0;
  border-radius: var(--ui-radius-round);
  color: var(--ui-color-primary-fill);
  background-color: var(--ui-color-surface-subtle);
  appearance: none;
}

.ui-progress__value,
.theme-progress__value {
  block-size: 100%;
  border-radius: inherit;
  background-color: var(--ui-color-primary-fill);
  transition: inline-size var(--ui-transition);
}

progress.ui-progress::-webkit-progress-bar {
  background-color: var(--ui-color-surface-subtle);
}

progress.ui-progress::-webkit-progress-value,
progress.ui-progress::-moz-progress-bar {
  border-radius: var(--ui-radius-round);
  background-color: var(--ui-color-primary-fill);
}

.ui-progress.is-success .ui-progress__value,
.theme-progress.is-success .theme-progress__value,
progress.ui-progress.is-success::-webkit-progress-value,
progress.ui-progress.is-success::-moz-progress-bar {
  background-color: var(--ui-color-status-success-border);
}

.ui-rating,
.theme-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2xs);
  color: var(--ui-color-text-muted);
}

.ui-rating__item,
.theme-rating__item {
  display: inline-grid;
  inline-size: var(--ui-rating-icon-size);
  block-size: var(--ui-rating-icon-size);
  place-content: center;
  padding: 0;
  border: 0;
  color: var(--ui-color-text-muted);
  background-color: var(--ui-color-surface);
  font: inherit;
  appearance: none;
  cursor: pointer;
}

.ui-progress-label,
.theme-progress-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dna-navigation-item-gap);
  margin-block-end: var(--dna-input-gap);
  color: var(--ui-color-text);
  font-size: var(--theme-font-size-sm);
  font-weight: var(--theme-font-weight-medium);
  line-height: var(--theme-line-height-sm);
}

.ui-rating__item.is-active,
.ui-rating__item:hover,
.theme-rating__item.is-active,
.theme-rating__item:hover {
  color: var(--ui-color-action);
}

.ui-rating__item :where(svg, path),
.theme-rating__item :where(svg, path) {
  fill: var(--ui-color-text-muted);
  stroke: var(--ui-color-text-muted);
}

.ui-rating__item.is-active :where(svg, path),
.ui-rating__item:hover :where(svg, path),
.theme-rating__item.is-active :where(svg, path),
.theme-rating__item:hover :where(svg, path) {
  fill: var(--ui-color-action);
  stroke: var(--ui-color-action);
}

.ui-spinner-loader,
.theme-spinner {
  inline-size: var(--theme-font-size-xl);
  block-size: var(--theme-font-size-xl);
  border-color: var(--ui-color-border);
  border-block-start-color: var(--ui-color-action);
  border-style: solid;
  border-width: var(--dna-control-underline-width);
  border-radius: var(--ui-radius-round);
  animation: ui-feedback-spin var(--dna-interaction-duration-fast) linear infinite;
}

.ui-table-skeleton,
.ui-mobile-listing-skeleton,
.ui-skeleton,
.theme-skeleton {
  border-radius: var(--dna-control-radius);
  background-color: var(--ui-color-surface-subtle);
  animation: ui-skeleton-pulse var(--dna-interaction-duration-fast)
    var(--ui-transition-easing) infinite alternate;
}

.ui-table-skeleton.hidden,
.ui-mobile-listing-skeleton.hidden,
.ui-skeleton.hidden,
.theme-skeleton.hidden {
  display: none;
}

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

@keyframes ui-skeleton-pulse {
  to {
    opacity: var(--dna-interaction-disabled-opacity);
  }
}

/* Desktop table, mobile listing, and data presentation bindings. */

.ui-table,
.theme-table {
  inline-size: 100%;
  min-inline-size: 0;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ui-color-text);
  background-color: var(--ui-color-surface);
  font-family: var(--theme-font-body);
  font-size: var(--theme-font-size-sm);
  line-height: var(--theme-line-height-sm);
}

.ui-table__wrapper,
.ui-table__table-wrapper,
.theme-table__wrapper {
  inline-size: 100%;
  min-inline-size: 0;
  overflow-x: auto;
  border-color: var(--ui-color-border);
  border-style: solid;
  border-width: var(--dna-card-border-width);
  border-radius: var(--dna-card-radius);
  background-color: var(--ui-color-surface);
  box-shadow: var(--ui-shadow-rest);
}

.ui-table__wrapper > .ui-table,
.ui-table__table-wrapper > .ui-table,
.theme-table__wrapper > .theme-table {
  border-radius: inherit;
}

.ui-table caption,
.theme-table caption {
  padding: var(--dna-card-padding-compact);
  color: var(--ui-color-title);
  background-color: var(--ui-color-surface);
  font-size: var(--theme-font-size-lg);
  font-weight: var(--theme-font-weight-semibold);
  line-height: var(--theme-line-height-lg);
  text-align: start;
}

.ui-table__title,
.theme-table__title {
  display: flex;
  min-inline-size: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--dna-card-gap-compact);
  padding: var(--dna-card-padding-compact);
  border-block-end-color: var(--ui-color-border);
  border-block-end-style: solid;
  border-block-end-width: var(--dna-control-border-width);
  color: var(--ui-color-title);
  background-color: var(--ui-color-surface);
  font-size: var(--theme-font-size-lg);
  font-weight: var(--theme-font-weight-semibold);
  line-height: var(--theme-line-height-lg);
}

.ui-table :where(thead, .ui-table__head),
.theme-table :where(thead, .theme-table__head) {
  color: var(--ui-color-text-muted);
  background-color: var(--ui-color-surface-subtle);
}

.ui-table :where(th, .ui-table__th),
.theme-table :where(th, .theme-table__th) {
  block-size: var(--ui-table-row-block-size);
  padding-block: var(--dna-input-padding-y-base);
  padding-inline: var(--dna-input-padding-x-base);
  border-block-end-color: var(--ui-color-border);
  border-block-end-style: solid;
  border-block-end-width: var(--dna-control-border-width);
  color: var(--ui-color-text-muted);
  background-color: var(--ui-color-surface-subtle);
  font-size: var(--theme-font-size-xs);
  font-weight: var(--theme-font-weight-semibold);
  line-height: var(--theme-line-height-xs);
  letter-spacing: var(--theme-letter-spacing-xs);
  text-align: start;
  white-space: nowrap;
}

.ui-table :where(td, .ui-table__td),
.theme-table :where(td, .theme-table__td) {
  block-size: var(--ui-table-row-block-size);
  padding-block: var(--dna-input-padding-y-base);
  padding-inline: var(--dna-input-padding-x-base);
  border-block-end-color: var(--ui-color-border);
  border-block-end-style: solid;
  border-block-end-width: var(--dna-control-border-width);
  color: var(--ui-color-text);
  background-color: var(--ui-color-surface);
  vertical-align: middle;
}

.ui-table tbody th,
.theme-table tbody th {
  block-size: var(--ui-table-row-block-size);
  padding-block: var(--dna-input-padding-y-base);
  padding-inline: var(--dna-input-padding-x-base);
  border-block-end-color: var(--ui-color-border);
  border-block-end-style: solid;
  border-block-end-width: var(--dna-control-border-width);
  color: var(--ui-color-text);
  background-color: var(--ui-color-surface);
  font-size: var(--theme-font-size-sm);
  font-weight: var(--theme-font-weight-medium);
  line-height: var(--theme-line-height-sm);
  text-align: start;
}

.ui-table :where(tbody tr, .ui-table__tr),
.theme-table :where(tbody tr, .theme-table__row) {
  transition:
    color var(--ui-transition),
    background-color var(--ui-transition);
}

.ui-table :where(tbody tr, .ui-table__tr):hover > :where(th, td, .ui-table__td),
.ui-table .ui-table__tr.is-hover > :where(th, td, .ui-table__td),
.theme-table :where(tbody tr, .theme-table__row):hover
  > :where(th, td, .theme-table__td),
.theme-table .theme-table__row.is-hover > :where(th, td, .theme-table__td) {
  background-color: var(--ui-color-surface-subtle);
}

.ui-table :where(tbody tr, .ui-table__tr).is-selected
  > :where(th, td, .ui-table__td),
.ui-table :where(tbody tr, .ui-table__tr)[aria-selected="true"]
  > :where(th, td, .ui-table__td),
.theme-table :where(tbody tr, .theme-table__row).is-selected
  > :where(th, td, .theme-table__td),
.theme-table :where(tbody tr, .theme-table__row)[aria-selected="true"]
  > :where(th, td, .theme-table__td) {
  color: var(--ui-color-primary-hover-text);
  background-color: var(--ui-color-primary-hover-fill);
}

.ui-table :where(tbody tr, .ui-table__tr):last-child
  > :where(th, td, .ui-table__td),
.theme-table :where(tbody tr, .theme-table__row):last-child
  > :where(th, td, .theme-table__td) {
  border-block-end-width: 0;
}

.ui-table__text,
.ui-table__date,
.ui-table__id,
.theme-table__text,
.theme-table__meta {
  display: block;
  max-inline-size: 100%;
  overflow: hidden;
  color: var(--ui-color-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-table__date,
.ui-table__id,
.theme-table__meta {
  color: var(--ui-color-text-muted);
  font-size: var(--theme-font-size-xs);
  line-height: var(--theme-line-height-xs);
}

.ui-table__link,
.theme-table__link {
  color: var(--ui-color-action);
  font-weight: var(--theme-font-weight-medium);
  text-decoration: none;
}

.ui-table__link:hover,
.theme-table__link:hover {
  color: var(--ui-color-primary-hover-fill);
  text-decoration: underline;
  text-decoration-thickness: var(--dna-control-border-width);
  text-underline-offset: var(--ui-space-2xs);
}

.ui-table__link--simple-text {
  color: var(--ui-color-text);
  font-weight: var(--theme-font-weight-normal);
}

.ui-table__service-wrap,
.ui-table__service-badge,
.theme-table__service {
  display: inline-flex;
  min-inline-size: 0;
  align-items: center;
  gap: var(--dna-navigation-item-gap);
}

.ui-table__service-badge,
.theme-table__service-badge {
  padding-block: var(--dna-navigation-item-padding-y);
  padding-inline: var(--dna-navigation-item-padding-x);
  border-color: var(--ui-color-border);
  border-style: solid;
  border-width: var(--dna-control-border-width);
  border-radius: var(--dna-navigation-item-radius);
  color: var(--ui-color-text);
  background-color: var(--ui-color-surface-subtle);
}

.ui-table__clickable,
.theme-table__clickable {
  cursor: pointer;
}

.ui-table__clickable:focus-visible,
.theme-table__clickable:focus-visible {
  outline-style: solid;
  outline-width: 0;
  box-shadow: inset var(--ui-focus-neutral-ring);
}

.ui-table.loading,
.ui-table.skeleton-loading,
.theme-table.is-loading {
  cursor: wait;
  opacity: var(--dna-interaction-disabled-opacity);
}

.ui-table__empty,
.theme-table__empty,
.ui-mobile-listing__empty {
  display: grid;
  min-block-size: calc(var(--ui-table-row-block-size) * 2);
  place-content: center;
  padding: var(--dna-card-padding-default);
  color: var(--ui-color-text-muted);
  background-color: var(--ui-color-surface);
  text-align: center;
}

.ui-mobile-listing,
.theme-mobile-listing {
  display: grid;
  inline-size: 100%;
  min-inline-size: 0;
  gap: var(--dna-card-gap-compact);
}

.ui-mobile-listing__wrapper,
.theme-mobile-listing__wrapper {
  display: grid;
  inline-size: 100%;
  min-inline-size: 0;
  gap: var(--dna-card-gap-compact);
}

/* Modal, dialog, drawer, and backdrop bindings. */

.ui-modal,
.theme-modal {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: none;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: 100%;
  max-block-size: 100%;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--dna-card-padding-default);
  border: 0;
  color: var(--ui-color-text);
  background-color: var(--ui-color-overlay);
}

.ui-modal.active,
.ui-modal.is-open,
.theme-modal.is-open,
.theme-modal[open] {
  display: flex;
}

.ui-modal__wrapper,
.theme-modal__dialog,
.uk-modal-dialog {
  display: flex;
  inline-size: min(100%, var(--ui-modal-inline-size));
  max-block-size: var(--ui-modal-max-block-size);
  flex-direction: column;
  overflow: hidden;
  border-color: var(--ui-color-border);
  border-style: solid;
  border-width: var(--dna-card-border-width);
  border-radius: var(--dna-card-radius);
  color: var(--ui-color-text);
  background-color: var(--ui-color-surface);
  box-shadow: var(--ui-shadow-overlay);
  opacity: 0;
  transform: scale(var(--dna-interaction-active-scale));
  transition:
    opacity var(--ui-transition),
    transform var(--ui-transition);
}

.ui-modal__wrapper.active,
.ui-modal.active .ui-modal__wrapper,
.ui-modal.is-open .ui-modal__wrapper,
.theme-modal.is-open .theme-modal__dialog,
.theme-modal[open] .theme-modal__dialog,
.uk-open > .uk-modal-dialog,
.uk-modal-dialog {
  opacity: 1;
  transform: scale(1);
}

.ui-modal__header,
.theme-modal__header,
.ui-modal__footer,
.theme-modal__footer {
  display: flex;
  min-inline-size: 0;
  align-items: center;
  gap: var(--dna-card-gap-compact);
  padding: var(--dna-card-padding-compact);
  color: var(--ui-color-title);
  background-color: var(--ui-color-surface);
}

.ui-modal__header,
.theme-modal__header {
  min-block-size: var(--ui-control-height-xl);
  justify-content: space-between;
  border-block-end-color: var(--ui-color-border);
  border-block-end-style: solid;
  border-block-end-width: var(--dna-control-border-width);
}

.ui-modal__footer,
.theme-modal__footer {
  justify-content: flex-end;
  border-block-start-color: var(--ui-color-border);
  border-block-start-style: solid;
  border-block-start-width: var(--dna-control-border-width);
}

.ui-modal__content,
.theme-modal__content {
  min-inline-size: 0;
  padding: var(--dna-card-padding-compact);
  color: var(--ui-color-text);
  background-color: var(--ui-color-surface);
  overflow-y: auto;
}

.ui-modal__name,
.ui-modal__title,
.theme-modal__title,
.ui-modal-description__title {
  color: var(--ui-color-title);
  font-family: var(--ui-font-heading);
  font-size: var(--theme-font-size-base);
  font-weight: var(--theme-font-weight-semibold);
  line-height: var(--theme-line-height-base);
}

.ui-modal__close-button,
.theme-modal__close {
  display: inline-grid;
  inline-size: var(--ui-control-height-xs);
  block-size: var(--ui-control-height-xs);
  flex: 0 0 auto;
  place-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--dna-navigation-item-radius);
  color: var(--ui-color-text);
  background-color: var(--ui-color-surface);
  cursor: pointer;
}

.ui-modal__close-button:hover,
.theme-modal__close:hover,
.ui-modal__close-button.is-hover,
.theme-modal__close.is-hover {
  color: var(--ui-color-primary-hover-text);
  background-color: var(--ui-color-primary-hover-fill);
}

.ui-modal__close-button:focus-visible,
.theme-modal__close:focus-visible,
.ui-modal__close-button.is-focus,
.theme-modal__close.is-focus {
  outline-style: solid;
  outline-width: 0;
  box-shadow: var(--ui-focus-neutral-ring);
}

.ui-modal__icon,
.theme-modal__icon {
  display: inline-grid;
  inline-size: var(--ui-control-height-xl);
  block-size: var(--ui-control-height-xl);
  flex: 0 0 auto;
  place-content: center;
  border-color: var(--ui-color-border);
  border-style: solid;
  border-width: var(--dna-control-border-width);
  border-radius: var(--dna-control-radius);
  color: var(--ui-color-action);
  background-color: var(--ui-color-surface);
}

.ui-modal__description-wrapper,
.theme-modal__description,
.ui-modal-info {
  padding: var(--dna-input-padding-x-lg);
  border-radius: var(--dna-control-radius);
  color: var(--ui-color-text);
  background-color: var(--ui-color-surface-subtle);
}

.ui-modal-description__text,
.theme-modal__description-text {
  color: var(--ui-color-text);
  font-size: var(--theme-font-size-sm);
  line-height: var(--theme-line-height-sm);
}

.ui-modal-info__row,
.theme-modal__info-row {
  display: flex;
  min-inline-size: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--dna-navigation-item-gap);
  padding-block: var(--dna-input-padding-y-lg);
  border-block-end-color: var(--ui-color-border);
  border-block-end-style: solid;
  border-block-end-width: var(--dna-control-border-width);
}

.ui-modal-info__row:last-child,
.theme-modal__info-row:last-child {
  border-block-end-width: 0;
}

.ui-modal-info__label,
.theme-modal__info-label {
  color: var(--ui-color-text-muted);
  font-size: var(--theme-font-size-xs);
  font-weight: var(--theme-font-weight-medium);
  line-height: var(--theme-line-height-xs);
}

.ui-modal-info__value,
.theme-modal__info-value {
  color: var(--ui-color-text);
  font-size: var(--theme-font-size-sm);
  line-height: var(--theme-line-height-sm);
}

.ui-modal__button,
.theme-modal__button {
  --ui-modal-button-fill: var(--ui-color-primary-fill);
  --ui-modal-button-border: var(--ui-color-primary-border);
  --ui-modal-button-text: var(--ui-color-primary-text);
  --ui-modal-button-hover-fill: var(--ui-color-primary-hover-fill);
  --ui-modal-button-hover-border: var(--ui-color-primary-hover-border);
  --ui-modal-button-hover-text: var(--ui-color-primary-hover-text);

  display: inline-flex;
  min-block-size: var(--ui-control-height-base);
  align-items: center;
  justify-content: center;
  gap: var(--dna-button-gap);
  padding-block: var(--dna-button-padding-y-base);
  padding-inline: var(--dna-button-padding-x-base);
  border-color: var(--ui-modal-button-border);
  border-style: solid;
  border-width: var(--dna-control-border-width);
  border-radius: var(--dna-button-radius);
  color: var(--ui-modal-button-text);
  background-color: var(--ui-modal-button-fill);
  box-shadow: var(--ui-shadow-button);
  font-size: var(--theme-font-size-base);
  font-weight: var(--theme-font-weight-medium);
  line-height: var(--theme-line-height-base);
  cursor: pointer;
  transition:
    color var(--ui-transition),
    background-color var(--ui-transition),
    border-color var(--ui-transition),
    box-shadow var(--ui-transition),
    transform var(--ui-transition);
}

.ui-modal__button:hover,
.theme-modal__button:hover,
.ui-modal__button.is-hover,
.theme-modal__button.is-hover {
  border-color: var(--ui-modal-button-hover-border);
  color: var(--ui-modal-button-hover-text);
  background-color: var(--ui-modal-button-hover-fill);
}

.ui-modal__button:focus-visible,
.theme-modal__button:focus-visible,
.ui-modal__button.is-focus,
.theme-modal__button.is-focus {
  outline-style: solid;
  outline-width: 0;
  box-shadow: var(--ui-shadow-button), var(--ui-focus-brand-ring);
}

.ui-modal__button:active,
.theme-modal__button:active,
.ui-modal__button.is-pressed,
.theme-modal__button.is-pressed {
  transform: scale(var(--dna-interaction-active-scale));
}

.ui-modal__button--outline,
.theme-modal__button--outline {
  --ui-modal-button-fill: var(--ui-color-secondary-fill);
  --ui-modal-button-border: var(--ui-color-secondary-border);
  --ui-modal-button-text: var(--ui-color-secondary-text);
  --ui-modal-button-hover-fill: var(--ui-color-secondary-hover-fill);
  --ui-modal-button-hover-border: var(--ui-color-secondary-hover-border);
  --ui-modal-button-hover-text: var(--ui-color-secondary-hover-text);
}

.ui-modal__button.loading,
.theme-modal__button.is-loading {
  cursor: wait;
  opacity: var(--dna-interaction-disabled-opacity);
}

.ui-modal__description-wrapper.hidden,
.ui-modal__additional-inputs.hidden,
.ui-modal.hidden,
.theme-modal.hidden {
  display: none;
}

.ui-drawer,
.theme-drawer {
  position: fixed;
  z-index: 900;
  inset-block: 0;
  inset-inline-end: 0;
  display: flex;
  inline-size: min(100%, var(--ui-modal-inline-size));
  flex-direction: column;
  padding: var(--dna-card-padding-default);
  border-inline-start-color: var(--ui-color-border);
  border-inline-start-style: solid;
  border-inline-start-width: var(--dna-card-border-width);
  color: var(--ui-color-text);
  background-color: var(--ui-color-surface);
  box-shadow: var(--ui-shadow-overlay);
  transform: translateX(100%);
  transition: transform var(--ui-transition);
}

.ui-drawer.is-open,
.theme-drawer.is-open {
  transform: translateX(0);
}

/*
 * Editor compatibility bindings.
 *
 * Legacy component mixins emit scoped and type-specific selectors. This file
 * loads last and matches that specificity so the generated DNA wins without
 * requiring importance flags or changing the existing component DOM.
 */

/* Shared button mixin: types 1-6 are present in templates. */
:is(.section, .uk-modal-dialog) .ui-button,
:is(.section, .uk-modal-dialog)
  .ui-button:is(.type-1, .type-2, .type-3, .type-4, .type-5, .type-6, .h-40) {
  block-size: var(--ui-size-auto);
  min-block-size: var(--ui-button-height);
  padding-block: var(--ui-button-padding-y);
  padding-inline: var(--ui-button-padding-x);
  gap: var(--dna-button-gap);
  border-color: var(--ui-button-border);
  border-style: solid;
  border-width: var(--dna-control-border-width);
  border-radius: var(--ui-button-radius);
  color: var(--ui-button-text);
  background-color: var(--ui-button-fill);
  box-shadow: var(--ui-shadow-button);
  font-family: var(--theme-font-body);
  font-size: var(--ui-button-font-size);
  font-weight: var(--theme-font-weight-medium);
  line-height: var(--ui-button-line-height);
  letter-spacing: var(--theme-letter-spacing-base);
}

:is(.section, .uk-modal-dialog)
  .ui-button:is(.type-1, .type-2, .type-3, .type-4, .type-5, .type-6)
  .ui-button__icon,
:is(.section, .uk-modal-dialog) .ui-button .ui-button__icon {
  inline-size: var(--theme-font-size-xl);
  block-size: var(--theme-font-size-xl);
  color: var(--ui-button-text);
}

:is(.section, .uk-modal-dialog)
  .ui-button:is(.type-1, .type-2, .type-3, .type-4, .type-5, .type-6):hover,
:is(.section, .uk-modal-dialog)
  .ui-button:is(.type-1, .type-2, .type-3, .type-4, .type-5, .type-6).is-hover {
  --ui-button-text: var(--ui-button-hover-text);
  border-color: var(--ui-button-hover-border);
  color: var(--ui-button-hover-text);
  background-color: var(--ui-button-hover-fill);
  box-shadow: var(--ui-shadow-raised);
}

:is(.section, .uk-modal-dialog)
  .ui-button:is(.type-1, .type-2, .type-3, .type-4, .type-5, .type-6):focus-visible,
:is(.section, .uk-modal-dialog)
  .ui-button:is(.type-1, .type-2, .type-3, .type-4, .type-5, .type-6).is-focus {
  outline-style: solid;
  outline-width: var(--ui-border-none);
  box-shadow: var(--ui-shadow-button), var(--ui-focus-brand-ring);
}

/* Inputs keep each template's composition while sharing shape and density. */
:is(.section, .uk-modal-dialog) .ui-input {
  gap: var(--dna-input-gap);
  color: var(--ui-field-text);
  font-family: var(--theme-font-body);
}

:is(.section, .uk-modal-dialog) .ui-input.type-1 .ui-input__label,
:is(.section, .uk-modal-dialog) .ui-input.type-2 .ui-input__label,
:is(.section, .uk-modal-dialog) .ui-input.type-3 .ui-input__label,
:is(.section, .uk-modal-dialog) .ui-input.type-4 .ui-input__label,
:is(.section, .uk-modal-dialog) .ui-input.type-5 .ui-input__label,
:is(.section, .uk-modal-dialog) .ui-input.type-6 .ui-input__label {
  margin: var(--ui-space-none);
  color: var(--ui-field-label);
  font-family: var(--theme-font-body);
  font-size: var(--theme-font-size-sm);
  font-weight: var(--theme-font-weight-medium);
  line-height: var(--theme-line-height-sm);
  letter-spacing: var(--theme-letter-spacing-sm);
}

:is(.section, .uk-modal-dialog)
  .ui-input:is(.type-1, .type-2, .type-3, .type-4, .type-5, .type-6)
  .ui-input__field {
  block-size: var(--ui-size-auto);
  min-block-size: var(--ui-field-height);
  padding-block: var(--ui-field-padding-y);
  padding-inline: var(--ui-field-padding-x);
  border-radius: var(--dna-control-radius);
  color: var(--ui-field-text);
  background-color: var(--ui-field-fill);
  font-family: var(--theme-font-body);
  font-size: var(--theme-font-size-base);
  font-weight: var(--theme-font-weight-normal);
  line-height: var(--theme-line-height-base);
  letter-spacing: var(--theme-letter-spacing-base);
}

:is(.section, .uk-modal-dialog) .ui-input.type-1 .ui-input__field {
  border-color: var(--ui-field-border);
  border-style: solid;
  border-width: var(--dna-control-border-width);
  box-shadow: var(--ui-shadow-rest);
}

:is(.section, .uk-modal-dialog)
  .ui-input:is(.type-2, .type-3, .type-4, .type-5, .type-6) {
  block-size: var(--ui-size-auto);
  min-block-size: var(--ui-field-height);
  padding-block: var(--ui-space-none);
  padding-inline: var(--dna-input-padding-x-sm);
  gap: var(--dna-input-gap);
  border-color: var(--ui-field-border);
  border-style: solid;
  border-width: var(--dna-control-border-width);
  border-radius: var(--dna-control-radius);
  background-color: var(--ui-field-fill);
  box-shadow: var(--ui-shadow-rest);
}

:is(.section, .uk-modal-dialog)
  .ui-input:is(.type-2, .type-3, .type-4, .type-5, .type-6)
  .ui-input__field {
  border-width: var(--ui-border-none);
  box-shadow: var(--ui-shadow-none);
}

:is(.section, .uk-modal-dialog)
  .ui-input:is(.type-1, .type-2, .type-3, .type-4, .type-5, .type-6)
  .ui-input__field::placeholder {
  color: var(--ui-field-placeholder);
  font-family: var(--theme-font-body);
  font-size: var(--theme-font-size-base);
  font-weight: var(--theme-font-weight-normal);
  line-height: var(--theme-line-height-base);
  opacity: 1;
}

:is(.section, .uk-modal-dialog)
  .ui-input:is(.type-1, .type-2, .type-3, .type-4, .type-5, .type-6):not(.is-disabled)
  .ui-input__field:is(:hover, :focus, :active),
:is(.section, .uk-modal-dialog)
  .ui-input:is(.type-1, .type-2, .type-3, .type-4, .type-5, .type-6).is-hover
  .ui-input__field,
:is(.section, .uk-modal-dialog)
  .ui-input:is(.type-1, .type-2, .type-3, .type-4, .type-5, .type-6).is-focus
  .ui-input__field {
  border-color: var(--ui-color-action);
}

:is(.section, .uk-modal-dialog)
  .ui-input:is(.type-1, .type-2, .type-3, .type-4, .type-5, .type-6):not(.is-disabled)
  .ui-input__field:focus,
:is(.section, .uk-modal-dialog)
  .ui-input:is(.type-1, .type-2, .type-3, .type-4, .type-5, .type-6).is-focus
  .ui-input__field {
  box-shadow: var(--ui-shadow-rest), var(--ui-focus-input-ring);
}

/* The only supported shared select is type 2. */
:is(.section, .uk-modal-dialog) .ui-select.type-2 {
  gap: var(--dna-input-gap);
  color: var(--ui-field-text);
  font-family: var(--theme-font-body);
}

:is(.section, .uk-modal-dialog) .ui-select.type-2 .ui-select__label {
  margin: var(--ui-space-none);
  color: var(--ui-field-label);
  font-family: var(--theme-font-body);
  font-size: var(--theme-font-size-sm);
  font-weight: var(--theme-font-weight-medium);
  line-height: var(--theme-line-height-sm);
  letter-spacing: var(--theme-letter-spacing-sm);
}

:is(.section, .uk-modal-dialog) .ui-select.type-2 .ui-select__wrapper {
  min-block-size: var(--ui-field-height);
  padding: var(--ui-space-none);
  border-color: var(--ui-field-border);
  border-style: solid;
  border-width: var(--dna-control-border-width);
  border-radius: var(--dna-control-radius);
  background-color: var(--ui-field-fill);
  box-shadow: var(--ui-shadow-rest);
}

:is(.section, .uk-modal-dialog) .ui-select.type-2 .ui-select__selected-value {
  min-block-size: var(--ui-field-height);
  padding-block: var(--ui-field-padding-y);
  padding-inline: var(--ui-field-padding-x);
  border-width: var(--ui-border-none);
  border-radius: var(--dna-control-radius);
  color: var(--ui-field-text);
  background-color: var(--ui-field-fill);
  box-shadow: var(--ui-shadow-none);
  font-family: var(--theme-font-body);
  font-size: var(--theme-font-size-base);
  font-weight: var(--theme-font-weight-normal);
  line-height: var(--theme-line-height-base);
}

:is(.section, .uk-modal-dialog) .ui-select.type-2 .ui-select__options,
body .ui-select__options.type-2,
body .ui-select__options.teleported {
  padding: var(--dna-menu-item-padding-y);
  border-color: var(--ui-color-border);
  border-style: solid;
  border-width: var(--dna-control-border-width);
  border-radius: var(--dna-control-surface-radius);
  color: var(--ui-color-text);
  background-color: var(--ui-color-surface);
  box-shadow: var(--ui-shadow-overlay);
}

:is(.section, .uk-modal-dialog) .ui-select.type-2 .ui-select__option-item,
body .ui-select__options.type-2 .ui-select__option-item {
  block-size: var(--ui-size-auto);
  min-block-size: var(--ui-control-height-sm);
  padding-block: var(--dna-menu-item-padding-y);
  padding-inline: var(--dna-menu-item-padding-x);
  gap: var(--dna-menu-item-gap);
  border-radius: var(--dna-menu-item-radius);
  color: var(--ui-color-text);
  background-color: var(--ui-color-surface);
  font-family: var(--theme-font-body);
  font-size: var(--theme-font-size-sm);
  line-height: var(--theme-line-height-sm);
  letter-spacing: var(--theme-letter-spacing-sm);
}

:is(.section, .uk-modal-dialog) .ui-select.type-2 .ui-select__option-item:hover,
:is(.section, .uk-modal-dialog)
  .ui-select.type-2
  .ui-select__option-item--selected,
body .ui-select__options.type-2 .ui-select__option-item:hover,
body .ui-select__option-item--selected.type-2 {
  color: var(--ui-color-primary-hover-text);
  background-color: var(--ui-color-primary-hover-fill);
}

:is(.section, .uk-modal-dialog) .ui-select.type-2.active .ui-select__wrapper,
:is(.section, .uk-modal-dialog) .ui-select.type-2.is-focus .ui-select__wrapper {
  border-color: var(--ui-color-action);
  box-shadow: var(--ui-shadow-rest), var(--ui-focus-input-ring);
}

/* Textarea types 1 and 2 use field and surface-wrapper compositions. */
:is(.section, .uk-modal-dialog) .ui-textarea:is(.type-1, .type-2) {
  gap: var(--dna-input-gap);
  color: var(--ui-field-text);
  font-family: var(--theme-font-body);
}

:is(.section, .uk-modal-dialog)
  .ui-textarea:is(.type-1, .type-2)
  .ui-textarea__label {
  margin: var(--ui-space-none);
  color: var(--ui-field-label);
  font-family: var(--theme-font-body);
  font-size: var(--theme-font-size-sm);
  font-weight: var(--theme-font-weight-medium);
  line-height: var(--theme-line-height-sm);
  letter-spacing: var(--theme-letter-spacing-sm);
}

:is(.section, .uk-modal-dialog)
  .ui-textarea:is(.type-1, .type-2)
  .ui-textarea__text-field {
  block-size: var(--ui-size-auto);
  min-block-size: var(--ui-textarea-min-block-size);
  padding-block: var(--ui-field-padding-y);
  padding-inline: var(--ui-field-padding-x);
  border-radius: var(--dna-control-radius);
  color: var(--ui-field-text);
  background-color: var(--ui-field-fill);
  font-family: var(--theme-font-body);
  font-size: var(--theme-font-size-base);
  font-weight: var(--theme-font-weight-normal);
  line-height: var(--theme-line-height-base);
  letter-spacing: var(--theme-letter-spacing-base);
}

:is(.section, .uk-modal-dialog) .ui-textarea.type-1 .ui-textarea__text-field {
  border-color: var(--ui-field-border);
  border-style: solid;
  border-width: var(--dna-control-border-width);
  box-shadow: var(--ui-shadow-rest);
}

:is(.section, .uk-modal-dialog) .ui-textarea.type-2 .ui-textarea__wrapper {
  padding-block: var(--ui-field-padding-y);
  padding-inline: var(--ui-field-padding-x);
  gap: var(--dna-input-gap);
  border-color: var(--ui-field-border);
  border-style: solid;
  border-width: var(--dna-control-border-width);
  border-radius: var(--dna-control-radius);
  background-color: var(--ui-field-fill);
  box-shadow: var(--ui-shadow-rest);
}

:is(.section, .uk-modal-dialog) .ui-textarea.type-2 .ui-textarea__text-field {
  padding: var(--ui-space-none);
  border-width: var(--ui-border-none);
  box-shadow: var(--ui-shadow-none);
}

:is(.section, .uk-modal-dialog)
  .ui-textarea:is(.type-1, .type-2)
  .ui-textarea__text-field::placeholder {
  color: var(--ui-field-placeholder);
  opacity: 1;
}

:is(.section, .uk-modal-dialog)
  .ui-textarea.type-1
  .ui-textarea__text-field:is(:hover, :focus),
:is(.section, .uk-modal-dialog)
  .ui-textarea.type-1.is-focus
  .ui-textarea__text-field,
:is(.section, .uk-modal-dialog) .ui-textarea.type-2 .ui-textarea__wrapper:hover,
:is(.section, .uk-modal-dialog)
  .ui-textarea.type-2
  .ui-textarea__wrapper:has(.ui-textarea__text-field:focus),
:is(.section, .uk-modal-dialog)
  .ui-textarea.type-2.is-focus
  .ui-textarea__wrapper {
  border-color: var(--ui-color-action);
  box-shadow: var(--ui-shadow-rest), var(--ui-focus-input-ring);
}

/* Switch, cards, badges, and table surfaces. */
:is(.section, body) .ui-switch .ui-switch__slider {
  inline-size: var(--ui-toggle-inline-size);
  block-size: var(--ui-toggle-block-size);
  border-color: var(--ui-color-border);
  border-style: solid;
  border-width: var(--dna-control-border-width);
  border-radius: var(--ui-radius-round);
  background-color: var(--ui-color-surface-subtle);
  box-shadow: var(--ui-shadow-rest);
}

:is(.section, body) .ui-switch .ui-switch__slider::before {
  inline-size: var(--ui-selection-size);
  block-size: var(--ui-selection-size);
  border-radius: var(--ui-radius-round);
  background-color: var(--ui-color-secondary-text);
}

:is(.section, body)
  .ui-switch
  .ui-switch__input:checked
  + .ui-switch__slider {
  border-color: var(--ui-color-primary-border);
  background-color: var(--ui-color-primary-fill);
}

:is(.section, body)
  .ui-switch
  .ui-switch__input:checked
  + .ui-switch__slider::before {
  background-color: var(--ui-color-primary-text);
  transform: translateX(var(--ui-toggle-travel));
}

.section .ui-mobile-listing-card,
.section .ui-card {
  gap: var(--dna-card-gap-default);
  padding: var(--dna-card-padding-default);
  border-color: var(--ui-color-border);
  border-style: solid;
  border-width: var(--dna-card-border-width);
  border-radius: var(--dna-card-radius);
  color: var(--ui-color-text);
  background-color: var(--ui-color-surface);
  box-shadow: var(--ui-shadow-rest);
}

.section .ui-table .ui-table__status-badge,
.section .ui-mobile-listing .ui-mobile-listing__status {
  min-block-size: var(--ui-control-height-xs);
  padding-block: var(--dna-navigation-item-padding-y);
  padding-inline: var(--dna-navigation-pill-padding-x);
  border-color: var(--ui-status-border);
  border-style: solid;
  border-width: var(--dna-control-border-width);
  border-radius: var(--ui-radius-round);
  color: var(--ui-status-text);
  background-color: var(--ui-status-surface);
  font-family: var(--theme-font-body);
  font-size: var(--theme-font-size-xs);
  font-weight: var(--theme-font-weight-medium);
  line-height: var(--theme-line-height-xs);
}

:is(.section, .uk-modal-dialog) .ui-table,
:is(.section, .uk-modal-dialog) .ui-table__wrapper,
:is(.section, .uk-modal-dialog) .ui-table__table-wrapper {
  border-color: var(--ui-color-border);
  border-radius: var(--dna-card-radius);
  color: var(--ui-color-text);
  background-color: var(--ui-color-surface);
  box-shadow: var(--ui-shadow-rest);
  font-family: var(--theme-font-body);
  font-size: var(--theme-font-size-sm);
  line-height: var(--theme-line-height-sm);
}

/* Navigation mixins. */
:is(.section, .uk-modal-dialog)
  .ui-tabs:is(.type-1, .type-2)
  .ui-tabs--head {
  gap: var(--dna-navigation-item-gap);
  border-block-end-color: var(--ui-color-border);
  border-block-end-style: solid;
  border-block-end-width: var(--dna-control-border-width);
}

:is(.section, .uk-modal-dialog)
  .ui-tabs:is(.type-1, .type-2)
  .ui-tabs__head-link {
  padding-block: var(--dna-navigation-pill-padding-y);
  padding-inline: var(--dna-navigation-pill-padding-x);
  border-radius: var(--dna-navigation-item-radius);
  color: var(--ui-tab-text);
  background-color: var(--ui-tab-fill);
  font-family: var(--theme-font-body);
  font-size: var(--theme-font-size-sm);
  font-weight: var(--theme-font-weight-medium);
  line-height: var(--theme-line-height-sm);
}

:is(.section, .uk-modal-dialog)
  .ui-tabs:is(.type-1, .type-2)
  .ui-tabs__head-item.uk-active,
:is(.section, .uk-modal-dialog)
  .ui-tabs:is(.type-1, .type-2)
  .ui-tabs__head-item.is-active {
  --ui-tab-text: var(--ui-color-primary-text);
  --ui-tab-fill: var(--ui-color-primary-fill);
  color: var(--ui-color-primary-text);
  background-color: var(--ui-color-primary-fill);
}

:is(.section, .uk-modal-dialog)
  .ui-accordion:is(.type-1, .type-2, .type-3, .type-4, .type-6)
  .ui-accordion__item {
  border-color: var(--ui-color-border);
  border-style: solid;
  border-width: var(--dna-card-border-width);
  border-radius: var(--dna-card-radius);
  color: var(--ui-color-text);
  background-color: var(--ui-color-surface);
  box-shadow: var(--ui-shadow-rest);
}

:is(.section, .uk-modal-dialog)
  .ui-accordion:is(.type-1, .type-2, .type-3, .type-4, .type-6)
  :is(.ui-accordion__header, .ui-accordion__title) {
  min-block-size: var(--ui-control-height-base);
  padding-block: var(--dna-navigation-pill-padding-y);
  padding-inline: var(--dna-navigation-pill-padding-x);
  gap: var(--dna-navigation-item-gap);
  color: var(--ui-color-title);
  background-color: var(--ui-color-surface);
  font-family: var(--theme-font-body);
  font-size: var(--theme-font-size-base);
  font-weight: var(--theme-font-weight-medium);
  line-height: var(--theme-line-height-base);
}

:is(.section, .uk-modal-dialog)
  .ui-accordion:is(.type-1, .type-2, .type-3, .type-4, .type-6)
  .ui-accordion__content {
  padding-block: var(--dna-card-padding-compact);
  padding-inline: var(--dna-card-padding-default);
  border-block-start-color: var(--ui-color-border);
  color: var(--ui-color-text-muted);
  background-color: var(--ui-color-surface);
}

:is(.section, .uk-modal-dialog)
  .ui-dropdown:is(.type-1, .type-2)
  .ui-dropdown__trigger {
  min-block-size: var(--ui-control-height-base);
  padding-block: var(--dna-navigation-item-padding-y);
  padding-inline: var(--dna-navigation-item-padding-x);
  gap: var(--dna-navigation-item-gap);
  border-color: var(--ui-color-border);
  border-style: solid;
  border-width: var(--dna-control-border-width);
  border-radius: var(--dna-control-radius);
  color: var(--ui-color-text);
  background-color: var(--ui-color-surface);
  box-shadow: var(--ui-shadow-rest);
}

:is(.section, .uk-modal-dialog)
  .ui-dropdown:is(.type-1, .type-2)
  .ui-dropdown__popper {
  padding: var(--dna-menu-item-padding-y);
  border-color: var(--ui-color-border);
  border-style: solid;
  border-width: var(--dna-control-border-width);
  border-radius: var(--dna-control-surface-radius);
  color: var(--ui-color-text);
  background-color: var(--ui-color-surface);
  box-shadow: var(--ui-shadow-overlay);
}

:is(.section, .uk-modal-dialog)
  .ui-dropdown:is(.type-1, .type-2)
  .ui-dropdown__popper-item {
  min-block-size: var(--ui-control-height-sm);
  padding-block: var(--dna-menu-item-padding-y);
  padding-inline: var(--dna-menu-item-padding-x);
  gap: var(--dna-menu-item-gap);
  border-radius: var(--dna-menu-item-radius);
  color: var(--ui-color-text);
  background-color: var(--ui-color-surface);
  font-family: var(--theme-font-body);
  font-size: var(--theme-font-size-sm);
  line-height: var(--theme-line-height-sm);
}

/* Modal mixin and legacy container variants. */
.section .ui-modal {
  padding: var(--dna-card-padding-default);
  color: var(--ui-color-text);
  background-color: var(--ui-color-overlay);
}

.section .ui-modal .ui-modal__wrapper {
  inline-size: min(100%, var(--ui-modal-inline-size));
  max-block-size: var(--ui-modal-max-block-size);
  border-color: var(--ui-color-border);
  border-style: solid;
  border-width: var(--dna-card-border-width);
  border-radius: var(--dna-card-radius);
  color: var(--ui-color-text);
  background-color: var(--ui-color-surface);
  box-shadow: var(--ui-shadow-overlay);
}

.section .ui-modal :is(.ui-modal__header, .ui-modal__footer) {
  gap: var(--dna-card-gap-compact);
  padding: var(--dna-card-padding-compact);
  border-color: var(--ui-color-border);
  color: var(--ui-color-title);
  background-color: var(--ui-color-surface);
}

.section .ui-modal .ui-modal__content {
  padding: var(--dna-card-padding-compact);
  color: var(--ui-color-text);
  background-color: var(--ui-color-surface);
}

.section .ui-modal .ui-modal__button {
  block-size: var(--ui-size-auto);
  min-block-size: var(--ui-control-height-base);
  padding-block: var(--dna-button-padding-y-base);
  padding-inline: var(--dna-button-padding-x-base);
  border-color: var(--ui-modal-button-border);
  border-style: solid;
  border-width: var(--dna-control-border-width);
  border-radius: var(--dna-button-radius);
  color: var(--ui-modal-button-text);
  background-color: var(--ui-modal-button-fill);
  box-shadow: var(--ui-shadow-button);
  font-family: var(--theme-font-body);
  font-size: var(--theme-font-size-base);
  font-weight: var(--theme-font-weight-medium);
  line-height: var(--theme-line-height-base);
}

.section .container,
.section .container:is(.type-1, .type-2, .type-3, .type-4, .type-5, .type-6) {
  inline-size: min(100%, var(--dna-layout-container-max-width));
  max-inline-size: var(--dna-layout-container-max-width);
  margin-inline: auto;
  padding-inline: var(--ui-space-md);
}