@layer components {
  .app-header,
  .app-navigation,
  .app-feedback-region {
    min-width: 0;
  }

  .ds-button,
  .ds-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: var(--control-height-md);
    border: var(--control-border-width) solid transparent;
    border-radius: var(--radius-sm);
    font: inherit;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    text-align: center;
    text-decoration: none;
    transition:
      background-color var(--transition-standard),
      border-color var(--transition-standard),
      color var(--transition-standard),
      transform var(--transition-fast);
  }

  .ds-icon {
    display: block;
    flex: 0 0 auto;
    inline-size: 1em;
    block-size: 1em;
  }

  .ds-icon-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1em;
    block-size: 1em;
  }

  .ds-button {
    padding: var(--space-2) var(--space-3);
  }

  .ds-icon-button {
    inline-size: var(--control-height-md);
    padding: var(--space-2);
    flex: 0 0 auto;
  }

  .ds-button:not(:disabled),
  .ds-icon-button:not(:disabled) {
    cursor: pointer;
  }

  .ds-button--primary {
    color: var(--color-background-deep);
    background: var(--color-primary);
  }

  .ds-button--secondary,
  .ds-icon-button {
    color: var(--color-text-primary);
    border-color: var(--color-border);
    background: var(--color-surface-subtle);
  }

  .ds-button--ghost {
    color: var(--color-text-primary);
    background: transparent;
  }

  .ds-button--danger {
    color: var(--color-danger);
    border-color: color-mix(in srgb, var(--color-danger) 52%, var(--color-border));
    background: color-mix(in srgb, var(--color-danger) 12%, var(--color-surface));
  }

  .ds-button:not(:disabled):hover,
  .ds-icon-button:not(:disabled):hover {
    border-color: var(--color-primary);
    color: var(--color-text-primary);
    background: var(--color-surface);
  }

  .ds-button--primary:not(:disabled):hover {
    color: var(--color-background-deep);
    background: var(--color-primary-hover);
  }

  .ds-button--danger:not(:disabled):hover {
    color: var(--color-danger);
    border-color: var(--color-danger);
    background: color-mix(in srgb, var(--color-danger) 20%, var(--color-surface));
  }

  .ds-button:not(:disabled):active,
  .ds-icon-button:not(:disabled):active {
    transform: translateY(var(--space-1));
  }

  .ds-button:focus-visible,
  .ds-icon-button:focus-visible,
  .ds-control:focus-visible,
  .ds-choice input:focus-visible,
  .ds-progress:focus-visible {
    outline: var(--control-focus-width) solid var(--color-primary);
    outline-offset: var(--space-1);
  }

  .ds-button:disabled,
  .ds-icon-button:disabled,
  .ds-control:disabled,
  .ds-choice input:disabled {
    opacity: var(--control-disabled-opacity);
    cursor: not-allowed;
  }

  .ds-button[aria-busy="true"]::after,
  .ds-icon-button[aria-busy="true"]::after {
    content: "…";
  }

  .ds-card,
  .ds-panel,
  .ds-metric-card,
  .ds-chart-card,
  .ds-table-container {
    min-inline-size: 0;
    border: var(--control-border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
  }

  .ds-card,
  .ds-metric-card,
  .ds-chart-card,
  .ds-table-container {
    padding: var(--space-4);
    background: var(--color-surface);
  }

  .ds-panel {
    padding: var(--space-4);
    background: var(--color-surface-subtle);
  }

  .ds-card {
    display: grid;
    gap: var(--space-4);
  }

  .ds-card--interactive {
    transition:
      border-color var(--transition-standard),
      background-color var(--transition-standard);
  }

  .ds-card--interactive:hover,
  .ds-card--interactive:focus-within {
    border-color: var(--color-primary);
  }

  .ds-card__header,
  .ds-card__footer,
  .ds-chart-card__header,
  .ds-table-container__header,
  .ds-table-container__footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .ds-card__title,
  .ds-chart-card__title,
  .ds-table-container__title,
  .ds-state__title {
    margin: 0;
    color: var(--color-text-primary);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-tight);
  }

  .ds-card__subtitle,
  .ds-chart-card__subtitle,
  .ds-chart-card__unit,
  .ds-field__hint,
  .ds-metric-card__context,
  .ds-state__body {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
  }

  .ds-metric-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: start;
    gap: var(--space-3);
    border-inline-start-width: var(--space-1);
  }

  .ds-metric-card__icon {
    display: grid;
    place-items: center;
    inline-size: var(--control-height-md);
    block-size: var(--control-height-md);
    border-radius: var(--radius-sm);
    color: var(--color-primary);
    background: var(--color-primary-subtle);
  }

  .ds-metric-card__label,
  .ds-metric-card__status {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
  }

  .ds-metric-card__value {
    margin: var(--space-1) 0;
    color: var(--color-text-primary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    overflow-wrap: anywhere;
  }

  .ds-metric-card--success {
    border-inline-start-color: var(--color-success);
  }

  .ds-metric-card--neutral {
    border-inline-start-color: var(--color-border-emphasis);
  }

  .ds-metric-card--warning {
    border-inline-start-color: var(--color-warning);
  }

  .ds-metric-card--danger {
    border-inline-start-color: var(--color-danger);
  }

  .ds-metric-card--info {
    border-inline-start-color: var(--color-info);
  }

  .ds-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    max-inline-size: 100%;
    padding: var(--space-1) var(--space-2);
    border: var(--control-border-width) solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text-secondary);
    background: var(--color-surface-subtle);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    overflow-wrap: anywhere;
  }

  .ds-badge--success {
    color: var(--color-success);
    border-color: color-mix(in srgb, var(--color-success) 52%, var(--color-border));
    background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
  }

  .ds-badge--neutral {
    color: var(--color-text-secondary);
    border-color: var(--color-border);
    background: var(--color-surface-subtle);
  }

  .ds-badge--warning {
    color: var(--color-warning);
    border-color: color-mix(in srgb, var(--color-warning) 52%, var(--color-border));
    background: color-mix(in srgb, var(--color-warning) 12%, var(--color-surface));
  }

  .ds-badge--danger {
    color: var(--color-danger);
    border-color: color-mix(in srgb, var(--color-danger) 52%, var(--color-border));
    background: color-mix(in srgb, var(--color-danger) 12%, var(--color-surface));
  }

  .ds-badge--info {
    color: var(--color-info);
    border-color: color-mix(in srgb, var(--color-info) 52%, var(--color-border));
    background: color-mix(in srgb, var(--color-info) 12%, var(--color-surface));
  }

  .ds-alert {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border: var(--control-border-width) solid var(--color-border);
    border-inline-start-width: var(--space-1);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    background: var(--color-surface-subtle);
  }

  .ds-alert__title {
    margin: 0;
    font-size: var(--font-size-md);
    line-height: var(--line-height-tight);
  }

  .ds-alert__body {
    margin: 0;
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
  }

  .ds-alert--success {
    border-inline-start-color: var(--color-success);
  }

  .ds-alert--warning {
    border-inline-start-color: var(--color-warning);
  }

  .ds-alert--danger {
    border-inline-start-color: var(--color-danger);
  }

  .ds-alert--info {
    border-inline-start-color: var(--color-info);
  }

  .ds-alert__actions,
  .ds-state__actions,
  .ds-filter-bar__actions,
  .ds-chart-card__actions,
  .ds-table-container__toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .ds-field {
    display: grid;
    gap: var(--space-2);
    min-inline-size: 0;
  }

  .ds-field__label {
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
  }

  .ds-control {
    inline-size: 100%;
    min-block-size: var(--control-height-md);
    padding: var(--space-2) var(--space-3);
    border: var(--control-border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    background: var(--color-surface-subtle);
    font: inherit;
    line-height: var(--line-height-normal);
  }

  textarea.ds-control {
    min-block-size: calc(var(--space-12) * 2);
    resize: vertical;
  }

  select.ds-control {
    appearance: auto;
  }

  .ds-control::placeholder {
    color: var(--color-text-muted);
  }

  .ds-control:focus-visible {
    border-color: var(--color-primary);
  }

  .ds-control[aria-invalid="true"] {
    border-color: var(--color-danger);
  }

  .ds-field__error {
    margin: 0;
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
  }

  .ds-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--control-height-md);
    padding-inline: var(--space-3);
    border: var(--control-border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-subtle);
  }

  .ds-search:focus-within {
    border-color: var(--color-primary);
    outline: var(--control-focus-width) solid var(--color-primary);
    outline-offset: var(--space-1);
  }

  .ds-search .ds-control {
    min-inline-size: 0;
    min-block-size: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
  }

  .ds-search__icon {
    color: var(--color-text-secondary);
  }

  .ds-search .ds-icon-button {
    inline-size: auto;
    min-block-size: 0;
    padding: var(--space-1);
    border-color: transparent;
    background: transparent;
  }

  .ds-choice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    min-inline-size: 0;
    color: var(--color-text-primary);
    line-height: var(--line-height-normal);
  }

  .ds-choice input {
    flex: 0 0 auto;
    inline-size: var(--font-size-lg);
    block-size: var(--font-size-lg);
    margin-block: var(--space-1);
    accent-color: var(--color-primary);
  }

  .ds-choice--switch {
    align-items: center;
  }

  .ds-choice--switch input {
    appearance: none;
    position: relative;
    inline-size: var(--control-switch-inline-size);
    block-size: var(--control-switch-block-size);
    margin: 0;
    border: var(--control-border-width) solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface-subtle);
    transition:
      background-color var(--transition-standard),
      border-color var(--transition-standard);
  }

  .ds-choice--switch input::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: var(--space-1);
    inline-size: var(--control-switch-thumb-size);
    block-size: var(--control-switch-thumb-size);
    border-radius: var(--radius-pill);
    background: var(--color-text-secondary);
    transform: translateY(-50%);
    transition:
      background-color var(--transition-standard),
      inset-inline-start var(--transition-standard);
  }

  .ds-choice--switch input:checked {
    border-color: var(--color-primary);
    background: var(--color-primary-subtle);
  }

  .ds-choice--switch input:checked::after {
    inset-inline-start: calc(
      var(--control-switch-inline-size) - var(--control-switch-thumb-size) - var(--space-1)
    );
    background: var(--color-primary);
  }

  .ds-progress {
    inline-size: 100%;
    block-size: var(--space-2);
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-pill);
    accent-color: var(--color-primary);
    background: var(--color-surface-subtle);
  }

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

  .ds-progress::-webkit-progress-value {
    background: var(--color-primary);
  }

  .ds-progress::-moz-progress-bar {
    background: var(--color-primary);
  }

  .ds-skeleton {
    display: block;
    inline-size: 100%;
    border-radius: var(--radius-sm);
    background: var(--color-surface-subtle);
  }

  .ds-skeleton--text {
    block-size: var(--font-size-md);
  }

  .ds-skeleton--title {
    block-size: var(--font-size-xl);
  }

  .ds-skeleton--block {
    min-block-size: calc(var(--space-12) * 2);
  }

  .ds-state {
    display: grid;
    justify-items: start;
    gap: var(--space-3);
    min-inline-size: 0;
    padding: var(--space-4);
    border: var(--control-border-width) dashed var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    background: var(--color-surface-subtle);
  }

  .ds-state--error {
    border-color: var(--color-danger);
  }

  .ds-state--loading {
    border-color: var(--color-info);
  }

  .ds-state--empty {
    border-color: var(--color-border);
  }

  .ds-filter-bar {
    container-type: inline-size;
    display: grid;
    gap: var(--space-4);
    min-inline-size: 0;
    padding: var(--space-4);
    border: var(--control-border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }

  .ds-filter-bar__groups {
    display: grid;
    gap: var(--space-3);
  }

  .ds-filter-group {
    display: grid;
    gap: var(--space-2);
    min-inline-size: 0;
  }

  .ds-filter-group__label {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
  }

  .ds-filter-bar__actions {
    align-items: stretch;
  }

  .ds-filter-bar__actions .ds-button {
    flex: 1 1 auto;
  }

  .ds-chart-card {
    display: grid;
    gap: var(--space-4);
  }

  .ds-chart-card__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .ds-chart-card__visualization {
    display: grid;
    place-items: center;
    min-block-size: calc(var(--space-12) * 3);
    padding: var(--space-4);
    border: var(--control-border-width) dashed var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    text-align: center;
  }

  .ds-chart-card__fallback {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
  }

  .ds-table-container {
    display: grid;
    gap: var(--space-4);
  }

  .ds-table-container__scroll {
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    border: var(--control-border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
  }

  .ds-table {
    inline-size: 100%;
    min-inline-size: max-content;
    border-collapse: collapse;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
  }

  .ds-table th,
  .ds-table td {
    padding: var(--space-3);
    border-block-end: var(--control-border-width) solid var(--color-border);
    text-align: start;
    vertical-align: top;
  }

  .ds-table th {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
  }

  .ds-table tbody tr:last-child td {
    border-block-end: 0;
  }

  @container (min-width: 42rem) {
    .ds-filter-bar__groups {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    }

    .ds-filter-bar__actions {
      justify-content: flex-end;
    }

    .ds-filter-bar__actions .ds-button {
      flex: 0 1 auto;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ds-button,
    .ds-icon-button,
    .ds-card--interactive,
    .ds-choice--switch input,
    .ds-choice--switch input::after {
      transition: none;
    }
  }
}
}