/* TDS Enterprise compiled stylesheet. Do not edit directly. */

/* Generated by TDS token builder. Do not edit directly. */

:root {
  --tds-border-width-default: 1px;
  --tds-border-width-focus: 2px;
  --tds-border-width-strong: 2px;
  --tds-breakpoint-compact: 0px;
  --tds-breakpoint-expanded: 1024px;
  --tds-breakpoint-medium: 600px;
  --tds-breakpoint-wide: 1440px;
  --tds-container-lg: 1024px;
  --tds-container-md: 768px;
  --tds-container-sm: 640px;
  --tds-container-xl: 1280px;
  --tds-font-body-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tds-font-body-line-height: 1.5;
  --tds-font-body-size: 16px;
  --tds-font-body-weight: 400;
  --tds-font-caption-line-height: 1.4;
  --tds-font-caption-size: 12px;
  --tds-font-caption-weight: 500;
  --tds-font-heading-line-height: 1.35;
  --tds-font-heading-size: 24px;
  --tds-font-heading-weight: 600;
  --tds-font-label-line-height: 1.4;
  --tds-font-label-size: 14px;
  --tds-font-label-weight: 500;
  --tds-font-metric-line-height: 1.35;
  --tds-font-metric-size: 36px;
  --tds-font-metric-weight: 600;
  --tds-grid-columns-expanded: 12;
  --tds-icon-stroke-regular: 1.5;
  --tds-icon-stroke-strong: 2;
  --tds-layer-dropdown: 200;
  --tds-layer-modal: 400;
  --tds-layer-overlay: 300;
  --tds-layer-sticky: 100;
  --tds-layer-toast: 500;
  --tds-layer-tooltip: 600;
  --tds-motion-duration-enter: 200ms;
  --tds-motion-duration-exit: 120ms;
  --tds-motion-duration-feedback: 120ms;
  --tds-motion-duration-layout: 320ms;
  --tds-motion-easing-enter: cubic-bezier(0, 0, 0, 1);
  --tds-motion-easing-exit: cubic-bezier(0.3, 0, 1, 1);
  --tds-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --tds-radius-control: 8px;
  --tds-radius-pill: 9999px;
  --tds-radius-surface: 12px;
  --tds-shadow-dialog: 0px 12px 24px -4px #10182824;
  --tds-shadow-dropdown: 0px 4px 8px -2px #1018281A;
  --tds-shadow-overlay: 0px 12px 24px -4px #10182824;
  --tds-shadow-raised: 0px 1px 2px 0px #10182814;
  --tds-size-badge-md: 28px;
  --tds-size-badge-sm: 24px;
  --tds-size-control-lg: 48px;
  --tds-size-control-md: 40px;
  --tds-size-control-sm: 32px;
  --tds-size-icon-lg: 24px;
  --tds-size-icon-md: 20px;
  --tds-size-icon-sm: 16px;
  --tds-size-icon-xl: 32px;
  --tds-size-touch-target-minimum: 44px;
  --tds-space-control-gap: 8px;
  --tds-space-control-padding-inline-lg: 20px;
  --tds-space-control-padding-inline-md: 16px;
  --tds-space-control-padding-inline-sm: 12px;
  --tds-space-layout-gutter: 16px;
  --tds-space-layout-region: 48px;
  --tds-space-layout-section: 32px;
}

:root, [data-tds-theme="triex-light"] {
  --tds-color-action-danger-background: #B42318;
  --tds-color-action-danger-background-active: #7A271A;
  --tds-color-action-danger-background-hover: #7A271A;
  --tds-color-action-danger-text: #FFFFFF;
  --tds-color-action-primary-background: #175CD3;
  --tds-color-action-primary-background-active: #194185;
  --tds-color-action-primary-background-hover: #1849A9;
  --tds-color-action-primary-text: #FFFFFF;
  --tds-color-border-default: #667085;
  --tds-color-border-disabled: #EAECF0;
  --tds-color-border-focus: #1570EF;
  --tds-color-border-strong: #667085;
  --tds-color-border-subtle: #EAECF0;
  --tds-color-feedback-danger-surface: #FEF3F2;
  --tds-color-feedback-danger-text: #7A271A;
  --tds-color-feedback-info-surface: #EFF8FF;
  --tds-color-feedback-info-text: #194185;
  --tds-color-feedback-success-surface: #ECFDF3;
  --tds-color-feedback-success-text: #074D31;
  --tds-color-feedback-warning-surface: #FFFAEB;
  --tds-color-feedback-warning-text: #7A2E0E;
  --tds-color-surface-default: #FFFFFF;
  --tds-color-surface-overlay: #101828B3;
  --tds-color-surface-raised: #FFFFFF;
  --tds-color-surface-subtle: #F9FAFB;
  --tds-color-text-default: #101828;
  --tds-color-text-disabled: #667085;
  --tds-color-text-inverse: #FFFFFF;
  --tds-color-text-muted: #475467;
  --tds-color-text-subtle: #667085;
}

[data-tds-theme="triex-dark"] {
  --tds-color-action-danger-background: #FECDCA;
  --tds-color-action-danger-background-active: #FEF3F2;
  --tds-color-action-danger-background-hover: #FEF3F2;
  --tds-color-action-danger-text: #7A271A;
  --tds-color-action-primary-background: #84CAFF;
  --tds-color-action-primary-background-active: #D1E9FF;
  --tds-color-action-primary-background-hover: #B2DDFF;
  --tds-color-action-primary-text: #102A56;
  --tds-color-border-default: #98A2B3;
  --tds-color-border-disabled: #344054;
  --tds-color-border-focus: #84CAFF;
  --tds-color-border-strong: #98A2B3;
  --tds-color-border-subtle: #344054;
  --tds-color-feedback-danger-surface: #7A271A;
  --tds-color-feedback-danger-text: #FEF3F2;
  --tds-color-feedback-info-surface: #194185;
  --tds-color-feedback-info-text: #EFF8FF;
  --tds-color-feedback-success-surface: #074D31;
  --tds-color-feedback-success-text: #ECFDF3;
  --tds-color-feedback-warning-surface: #7A2E0E;
  --tds-color-feedback-warning-text: #FFFAEB;
  --tds-color-surface-default: #0C111D;
  --tds-color-surface-overlay: #000000CC;
  --tds-color-surface-raised: #1D2939;
  --tds-color-surface-subtle: #101828;
  --tds-color-text-default: #F9FAFB;
  --tds-color-text-disabled: #667085;
  --tds-color-text-inverse: #101828;
  --tds-color-text-muted: #D0D5DD;
  --tds-color-text-subtle: #98A2B3;
}

[data-tds-theme="high-contrast"] {
  --tds-color-action-danger-background: #FFFFFF;
  --tds-color-action-danger-background-active: #FDB022;
  --tds-color-action-danger-background-hover: #FDB022;
  --tds-color-action-danger-text: #000000;
  --tds-color-action-primary-background: #FFFFFF;
  --tds-color-action-primary-background-active: #FDB022;
  --tds-color-action-primary-background-hover: #FDB022;
  --tds-color-action-primary-text: #000000;
  --tds-color-border-default: #FFFFFF;
  --tds-color-border-disabled: #D0D5DD;
  --tds-color-border-focus: #FDB022;
  --tds-color-border-strong: #FFFFFF;
  --tds-color-border-subtle: #FFFFFF;
  --tds-color-feedback-danger-surface: #000000;
  --tds-color-feedback-danger-text: #FFFFFF;
  --tds-color-feedback-info-surface: #000000;
  --tds-color-feedback-info-text: #FFFFFF;
  --tds-color-feedback-success-surface: #000000;
  --tds-color-feedback-success-text: #FFFFFF;
  --tds-color-feedback-warning-surface: #000000;
  --tds-color-feedback-warning-text: #FDB022;
  --tds-color-surface-default: #000000;
  --tds-color-surface-overlay: #000000E6;
  --tds-color-surface-raised: #000000;
  --tds-color-surface-subtle: #000000;
  --tds-color-text-default: #FFFFFF;
  --tds-color-text-disabled: #D0D5DD;
  --tds-color-text-inverse: #000000;
  --tds-color-text-muted: #FFFFFF;
  --tds-color-text-subtle: #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --tds-motion-duration-feedback: 0ms;
    --tds-motion-duration-enter: 0ms;
    --tds-motion-duration-exit: 0ms;
    --tds-motion-duration-layout: 0ms;
  }
}

@layer tds.foundation {
  :where(*, *::before, *::after) {
    box-sizing: border-box;
  }

  :where(html) {
    color-scheme: light;
    font-family: var(--tds-font-body-family);
    font-size: var(--tds-font-body-size);
    line-height: var(--tds-font-body-line-height);
    text-size-adjust: 100%;
  }

  :where(html[data-tds-theme="triex-dark"], html[data-tds-theme="high-contrast"]) {
    color-scheme: dark;
  }

  :where(body) {
    margin: 0;
    background: var(--tds-color-surface-default);
    color: var(--tds-color-text-default);
  }

  :where(button, input, select, textarea) {
    font: inherit;
  }

  :where(img, svg) {
    max-inline-size: 100%;
  }

  :where(:focus-visible) {
    outline: var(--tds-border-width-focus) solid var(--tds-color-border-focus);
    outline-offset: 2px;
  }

  :where([hidden]) {
    display: none !important;
  }
}

@layer tds.components {
  .tds-c-badge {
    --_tds-badge-background: var(--tds-color-surface-subtle);
    --_tds-badge-text: var(--tds-color-text-default);

    display: inline-flex;
    max-inline-size: 100%;
    align-items: center;
    gap: var(--tds-space-control-gap);
    border: var(--tds-border-width-default) solid currentColor;
    border-radius: var(--tds-radius-pill);
    background: var(--_tds-badge-background);
    color: var(--_tds-badge-text);
    font-family: var(--tds-font-body-family);
    font-weight: var(--tds-font-label-weight);
    line-height: var(--tds-font-label-line-height);
    vertical-align: middle;
  }

  .tds-c-badge[data-variant="info"] {
    --_tds-badge-background: var(--tds-color-feedback-info-surface);
    --_tds-badge-text: var(--tds-color-feedback-info-text);
  }

  .tds-c-badge[data-variant="success"] {
    --_tds-badge-background: var(--tds-color-feedback-success-surface);
    --_tds-badge-text: var(--tds-color-feedback-success-text);
  }

  .tds-c-badge[data-variant="warning"] {
    --_tds-badge-background: var(--tds-color-feedback-warning-surface);
    --_tds-badge-text: var(--tds-color-feedback-warning-text);
  }

  .tds-c-badge[data-variant="danger"] {
    --_tds-badge-background: var(--tds-color-feedback-danger-surface);
    --_tds-badge-text: var(--tds-color-feedback-danger-text);
  }

  .tds-c-badge[data-size="sm"] {
    min-block-size: var(--tds-size-badge-sm);
    padding-inline: var(--tds-space-control-gap);
    font-size: var(--tds-font-caption-size);
  }

  .tds-c-badge[data-size="md"] {
    min-block-size: var(--tds-size-badge-md);
    padding-inline: var(--tds-space-control-padding-inline-sm);
    font-size: var(--tds-font-label-size);
  }

  .tds-c-badge__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tds-c-badge__icon {
    display: inline-flex;
    flex: none;
    inline-size: var(--tds-size-icon-sm);
    block-size: var(--tds-size-icon-sm);
  }

  .tds-c-badge__icon > .tds-icon {
    inline-size: 100%;
    block-size: 100%;
  }
}

@layer tds.components {
  .tds-c-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tds-space-control-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .tds-c-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: var(--tds-space-control-gap);
    color: var(--tds-color-text-muted);
    font-size: var(--tds-font-label-size);
  }

  .tds-c-breadcrumbs__item:not(:last-child)::after {
    color: var(--tds-color-text-muted);
    content: "/";
  }

  .tds-c-breadcrumbs__item a {
    color: var(--tds-color-text-muted);
  }

  .tds-c-breadcrumbs__item [aria-current="page"] {
    color: var(--tds-color-text-default);
    font-weight: var(--tds-font-label-weight);
  }
}

@layer tds.components {
  .tds-c-button {
    --_tds-button-background: var(--tds-color-action-primary-background);
    --_tds-button-background-hover: var(--tds-color-action-primary-background-hover);
    --_tds-button-background-active: var(--tds-color-action-primary-background-active);
    --_tds-button-border: var(--tds-color-action-primary-background);
    --_tds-button-text: var(--tds-color-action-primary-text);

    display: inline-flex;
    min-block-size: var(--tds-size-touch-target-minimum);
    align-items: center;
    justify-content: center;
    gap: var(--tds-space-control-gap);
    border: var(--tds-border-width-default) solid var(--_tds-button-border);
    border-radius: var(--tds-radius-control);
    background: var(--_tds-button-background);
    color: var(--_tds-button-text);
    font-family: var(--tds-font-body-family);
    font-weight: var(--tds-font-label-weight);
    line-height: var(--tds-font-label-line-height);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    transition:
      background-color var(--tds-motion-duration-feedback) var(--tds-motion-easing-standard),
      border-color var(--tds-motion-duration-feedback) var(--tds-motion-easing-standard),
      color var(--tds-motion-duration-feedback) var(--tds-motion-easing-standard);
  }

  .tds-c-button:hover:not(:disabled) {
    background: var(--_tds-button-background-hover);
  }

  .tds-c-button:active:not(:disabled) {
    background: var(--_tds-button-background-active);
  }

  .tds-c-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }

  .tds-c-button[data-loading="true"] {
    cursor: progress;
  }

  .tds-c-button[data-variant="secondary"] {
    --_tds-button-background: var(--tds-color-surface-default);
    --_tds-button-background-hover: var(--tds-color-surface-subtle);
    --_tds-button-background-active: var(--tds-color-surface-subtle);
    --_tds-button-border: var(--tds-color-border-default);
    --_tds-button-text: var(--tds-color-text-default);
  }

  .tds-c-button[data-variant="danger"] {
    --_tds-button-background: var(--tds-color-action-danger-background);
    --_tds-button-background-hover: var(--tds-color-action-danger-background-hover);
    --_tds-button-background-active: var(--tds-color-action-danger-background-active);
    --_tds-button-border: var(--tds-color-action-danger-background);
    --_tds-button-text: var(--tds-color-action-danger-text);
  }

  .tds-c-button[data-variant="ghost"] {
    --_tds-button-background: transparent;
    --_tds-button-background-hover: var(--tds-color-surface-subtle);
    --_tds-button-background-active: var(--tds-color-surface-subtle);
    --_tds-button-border: transparent;
    --_tds-button-text: var(--tds-color-text-default);
  }

  .tds-c-button[data-size="sm"] {
    padding-inline: var(--tds-space-control-padding-inline-sm);
    font-size: var(--tds-font-label-size);
  }

  .tds-c-button[data-size="md"] {
    padding-inline: var(--tds-space-control-padding-inline-md);
    font-size: var(--tds-font-body-size);
  }

  .tds-c-button[data-size="lg"] {
    min-block-size: var(--tds-size-control-lg);
    padding-inline: var(--tds-space-control-padding-inline-lg);
    font-size: var(--tds-font-body-size);
  }

  .tds-c-button__icon,
  .tds-c-button__spinner {
    display: inline-flex;
    flex: none;
    inline-size: var(--tds-size-icon-sm);
    block-size: var(--tds-size-icon-sm);
  }

  .tds-c-button__icon > .tds-icon {
    inline-size: 100%;
    block-size: 100%;
  }

  .tds-c-button__spinner {
    display: none;
    border: var(--tds-border-width-strong) solid currentColor;
    border-inline-end-color: transparent;
    border-radius: var(--tds-radius-pill);
    animation: tds-button-spin 800ms linear infinite;
  }

  .tds-c-button[data-loading="true"] > .tds-c-button__spinner {
    display: inline-flex;
  }

  @keyframes tds-button-spin {
    to { transform: rotate(360deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    .tds-c-button {
      transition: none;
    }

    .tds-c-button__spinner {
      animation: none;
      border-inline-end-color: currentColor;
      opacity: 0.65;
    }
  }
}

@layer tds.components {
  .tds-c-card,
  .tds-c-kpi {
    display: grid;
    gap: var(--tds-space-layout-gutter);
    min-inline-size: 0;
    margin: 0;
    padding: var(--tds-space-layout-gutter);
    border-radius: var(--tds-radius-surface);
    background: var(--tds-color-surface-raised);
    color: var(--tds-color-text-default);
  }

  .tds-c-card[data-variant="outlined"],
  .tds-c-kpi {
    border: var(--tds-border-width-default) solid var(--tds-color-border-default);
  }

  .tds-c-card[data-variant="elevated"] {
    box-shadow: var(--tds-shadow-raised);
  }

  .tds-c-card[data-variant="subtle"] {
    background: var(--tds-color-surface-subtle);
  }

  .tds-c-card__header,
  .tds-c-card__content,
  .tds-c-card__footer {
    min-inline-size: 0;
  }

  .tds-c-card__title,
  .tds-c-card__description,
  .tds-c-kpi__label,
  .tds-c-kpi__value,
  .tds-c-kpi__context {
    margin: 0;
  }

  .tds-c-card__title {
    font-size: var(--tds-font-heading-size);
    line-height: var(--tds-font-heading-line-height);
  }

  .tds-c-card__description,
  .tds-c-kpi__label,
  .tds-c-kpi__context {
    color: var(--tds-color-text-muted);
  }

  .tds-c-card__footer {
    padding-block-start: var(--tds-space-layout-gutter);
    border-block-start: var(--tds-border-width-default) solid var(--tds-color-border-subtle);
  }

  .tds-c-kpi__label {
    font-size: var(--tds-font-label-size);
    font-weight: var(--tds-font-label-weight);
  }

  .tds-c-kpi__value {
    font-size: var(--tds-font-metric-size);
    font-weight: var(--tds-font-metric-weight);
    line-height: var(--tds-font-metric-line-height);
  }

  .tds-c-kpi__change {
    inline-size: fit-content;
    color: var(--tds-color-text-muted);
    font-size: var(--tds-font-label-size);
    font-weight: var(--tds-font-label-weight);
  }

  .tds-c-kpi__change[data-tone="positive"] {
    color: var(--tds-color-feedback-success-text);
  }

  .tds-c-kpi__change[data-tone="negative"] {
    color: var(--tds-color-feedback-danger-text);
  }
}

@layer tds.components {
  .tds-c-choice {
    display: grid;
    gap: var(--tds-space-control-gap);
    color: var(--tds-color-text-default);
    font-family: var(--tds-font-body-family);
  }

  .tds-c-choice__label {
    display: inline-flex;
    min-block-size: var(--tds-size-touch-target-minimum);
    align-items: center;
    gap: var(--tds-space-control-gap);
    inline-size: fit-content;
    cursor: pointer;
  }

  .tds-c-choice__control {
    display: grid;
    flex: none;
    inline-size: var(--tds-size-icon-md);
    block-size: var(--tds-size-icon-md);
    margin: 0;
    place-content: center;
    appearance: none;
    border: var(--tds-border-width-default) solid var(--tds-color-border-default);
    border-radius: var(--tds-radius-control);
    background: var(--tds-color-surface-default);
    color: var(--tds-color-action-primary-text);
    cursor: pointer;
  }

  .tds-c-choice__control[type="radio"] {
    border-radius: var(--tds-radius-pill);
  }

  .tds-c-choice__control::before {
    inline-size: var(--tds-space-control-gap);
    block-size: var(--tds-space-control-gap);
    transform: scale(0);
    border-radius: inherit;
    background: currentColor;
    content: "";
  }

  .tds-c-choice__control[type="checkbox"]::before {
    inline-size: auto;
    block-size: auto;
    background: none;
    content: "✓";
    font-size: var(--tds-font-label-size);
    font-weight: var(--tds-font-label-weight);
    line-height: 1;
  }

  .tds-c-choice__control:checked {
    border-color: var(--tds-color-action-primary-background);
    background: var(--tds-color-action-primary-background);
  }

  .tds-c-choice__control:checked::before {
    transform: scale(1);
  }

  .tds-c-choice__control:disabled,
  .tds-c-choice__control:disabled + .tds-c-choice__text {
    opacity: 0.55;
    cursor: not-allowed;
  }

  .tds-c-choice[data-invalid="true"] .tds-c-choice__control {
    border-color: var(--tds-color-feedback-danger-text);
  }

  .tds-c-choice__text {
    font-size: var(--tds-font-body-size);
    line-height: var(--tds-font-body-line-height);
  }

  .tds-c-choice__hint,
  .tds-c-choice__error {
    margin: 0;
    padding-inline-start: calc(var(--tds-size-icon-md) + var(--tds-space-control-gap));
    font-size: var(--tds-font-caption-size);
    line-height: var(--tds-font-caption-line-height);
  }

  .tds-c-choice__hint {
    color: var(--tds-color-text-muted);
  }

  .tds-c-choice__error {
    color: var(--tds-color-feedback-danger-text);
  }
}

@layer tds.components {
  .tds-c-dialog {
    max-inline-size: min(var(--tds-container-sm), calc(100% - var(--tds-space-layout-section)));
    max-block-size: calc(100% - var(--tds-space-layout-section));
    margin: auto;
    padding: 0;
    overflow: auto;
    border: var(--tds-border-width-default) solid var(--tds-color-border-default);
    border-radius: var(--tds-radius-surface);
    background: var(--tds-color-surface-raised);
    color: var(--tds-color-text-default);
    box-shadow: var(--tds-shadow-dialog);
  }

  .tds-c-dialog:not([open]):target {
    position: fixed;
    inset: var(--tds-space-layout-section);
    display: block;
    z-index: var(--tds-layer-modal);
  }

  .tds-c-dialog::backdrop {
    background: var(--tds-color-surface-overlay);
  }

  .tds-c-dialog__surface {
    display: grid;
    gap: var(--tds-space-layout-gutter);
    min-inline-size: 0;
    padding: var(--tds-space-layout-section);
  }

  .tds-c-dialog__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--tds-space-layout-gutter);
  }

  .tds-c-dialog__title,
  .tds-c-dialog__description {
    margin: 0;
  }

  .tds-c-dialog__title {
    font-size: var(--tds-font-heading-size);
    line-height: var(--tds-font-heading-line-height);
  }

  .tds-c-dialog__description {
    color: var(--tds-color-text-muted);
  }

  .tds-c-dialog__close {
    display: inline-grid;
    flex: none;
    min-inline-size: var(--tds-size-touch-target-minimum);
    min-block-size: var(--tds-size-touch-target-minimum);
    place-content: center;
    border-radius: var(--tds-radius-control);
    color: var(--tds-color-text-default);
    font-size: var(--tds-font-heading-size);
    text-decoration: none;
  }

  .tds-c-dialog__close:hover {
    background: var(--tds-color-surface-subtle);
  }
}

@layer tds.components {
  .tds-c-divider {
    flex: none;
    margin: 0;
    border: 0;
    background: var(--tds-color-border-default);
  }

  .tds-c-divider[data-orientation="horizontal"] {
    inline-size: 100%;
    block-size: var(--tds-border-width-default);
  }

  .tds-c-divider[data-orientation="vertical"] {
    align-self: stretch;
    inline-size: var(--tds-border-width-default);
    min-block-size: var(--tds-size-touch-target-minimum);
  }
}

@layer tds.components {
  .tds-c-empty {
    display: grid;
    justify-items: center;
    gap: var(--tds-space-layout-gutter);
    max-inline-size: var(--tds-container-sm);
    margin-inline: auto;
    padding: var(--tds-space-layout-region) var(--tds-space-layout-gutter);
    color: var(--tds-color-text-default);
    text-align: center;
  }

  .tds-c-empty__icon {
    display: grid;
    inline-size: var(--tds-size-touch-target-minimum);
    block-size: var(--tds-size-touch-target-minimum);
    place-content: center;
    border-radius: var(--tds-radius-pill);
    background: var(--tds-color-surface-subtle);
    color: var(--tds-color-text-muted);
  }

  .tds-c-empty__title,
  .tds-c-empty__description {
    margin: 0;
  }

  .tds-c-empty__title {
    font-size: var(--tds-font-heading-size);
    line-height: var(--tds-font-heading-line-height);
  }

  .tds-c-empty__description {
    color: var(--tds-color-text-muted);
  }
}

@layer tds.components {
  .tds-c-timeline, .tds-c-activity, .tds-c-notifications { color: var(--tds-color-text-default); }
  .tds-c-timeline__title, .tds-c-activity__title, .tds-c-notifications__title {
    margin: 0 0 var(--tds-space-layout-gutter);
    font-size: var(--tds-font-heading-size);
    line-height: var(--tds-font-heading-line-height);
  }
  .tds-c-timeline__list, .tds-c-activity__list, .tds-c-notifications__list {
    display: grid;
    gap: var(--tds-space-layout-gutter);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .tds-c-timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: var(--tds-space-layout-gutter) minmax(0, 1fr);
    gap: var(--tds-space-control-gap);
  }
  .tds-c-timeline__item::before {
    position: absolute;
    inset-block: var(--tds-space-control-gap) calc(var(--tds-space-layout-gutter) * -1);
    inset-inline-start: calc(var(--tds-space-layout-gutter) / 2);
    border-inline-start: var(--tds-border-width-default) solid var(--tds-color-border-default);
    content: "";
  }
  .tds-c-timeline__item:last-child::before { display: none; }
  .tds-c-timeline__marker {
    z-index: 1;
    inline-size: var(--tds-space-control-gap);
    block-size: var(--tds-space-control-gap);
    margin-block-start: var(--tds-space-control-gap);
    justify-self: center;
    border-radius: var(--tds-radius-pill);
    background: var(--tds-color-action-primary-background);
  }
  .tds-c-timeline__item-title, .tds-c-timeline__description, .tds-c-activity__item p,
  .tds-c-notifications__item h3, .tds-c-notifications__item p { margin: 0; }
  .tds-c-timeline time, .tds-c-activity time, .tds-c-notifications time,
  .tds-c-timeline__description, .tds-c-timeline__empty, .tds-c-activity__empty,
  .tds-c-notifications__empty { color: var(--tds-color-text-muted); font-size: var(--tds-font-label-size); }
  .tds-c-timeline__content, .tds-c-notifications__action { margin-block-start: var(--tds-space-control-gap); }
  .tds-c-activity__item, .tds-c-notifications__item {
    padding: var(--tds-space-layout-gutter);
    border: var(--tds-border-width-default) solid var(--tds-color-border-default);
    border-radius: var(--tds-radius-surface);
    background: var(--tds-color-surface-raised);
  }
  .tds-c-notifications__item[data-unread="true"] {
    border-inline-start: var(--tds-border-width-focus) solid var(--tds-color-action-primary-background);
    background: var(--tds-color-surface-subtle);
  }
  .tds-c-notifications__item header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--tds-space-control-gap);
  }
  .tds-c-notifications__status {
    color: var(--tds-color-text-default);
    font-size: var(--tds-font-label-size);
    font-weight: var(--tds-font-label-weight);
  }
  .tds-c-notifications__item[data-tone="success"] { border-inline-start-color: var(--tds-color-feedback-success-text); }
  .tds-c-notifications__item[data-tone="warning"] { border-inline-start-color: var(--tds-color-feedback-warning-text); }
  .tds-c-notifications__item[data-tone="danger"] { border-inline-start-color: var(--tds-color-feedback-danger-text); }
  .tds-c-notifications__item[data-tone="info"] { border-inline-start-color: var(--tds-color-feedback-info-text); }
}

@layer tds.components {
  .tds-c-spinner {
    display: inline-block;
    inline-size: var(--tds-size-icon-md);
    block-size: var(--tds-size-icon-md);
    border: var(--tds-border-width-strong) solid currentColor;
    border-inline-end-color: transparent;
    border-radius: var(--tds-radius-pill);
    color: var(--tds-color-action-primary-background);
    vertical-align: middle;
    animation: tds-spinner-rotate calc(var(--tds-motion-duration-feedback) * 6) linear infinite;
  }

  .tds-c-spinner[data-size="sm"] {
    inline-size: var(--tds-size-icon-sm);
    block-size: var(--tds-size-icon-sm);
  }

  .tds-c-spinner[data-size="lg"] {
    inline-size: var(--tds-size-icon-lg);
    block-size: var(--tds-size-icon-lg);
  }

  @keyframes tds-spinner-rotate {
    to { transform: rotate(360deg); }
  }

  .tds-c-skeleton {
    display: grid;
    gap: var(--tds-space-control-gap);
    inline-size: 100%;
  }

  .tds-c-skeleton__item {
    display: block;
    min-block-size: var(--tds-size-icon-sm);
    inline-size: 100%;
    border-radius: var(--tds-radius-control);
    background: linear-gradient(
      90deg,
      var(--tds-color-surface-subtle),
      var(--tds-color-surface-raised),
      var(--tds-color-surface-subtle)
    );
    background-size: 200% 100%;
    animation: tds-skeleton-shimmer calc(var(--tds-motion-duration-layout) * 4) var(--tds-motion-easing-standard) infinite;
  }

  .tds-c-skeleton__item[data-variant="rectangle"] {
    min-block-size: calc(var(--tds-size-touch-target-minimum) * 2);
  }

  .tds-c-skeleton__item[data-variant="circle"] {
    inline-size: var(--tds-size-touch-target-minimum);
    block-size: var(--tds-size-touch-target-minimum);
    border-radius: var(--tds-radius-pill);
  }

  @keyframes tds-skeleton-shimmer {
    to { background-position-x: -200%; }
  }

  @media (prefers-reduced-motion: reduce) {
    .tds-c-spinner,
    .tds-c-skeleton__item {
      animation: none;
    }
  }
}

@layer tds.components {
  .tds-c-field {
    display: grid;
    gap: var(--tds-space-control-gap);
    inline-size: 100%;
    color: var(--tds-color-text-default);
    font-family: var(--tds-font-body-family);
  }

  .tds-c-field__label {
    font-size: var(--tds-font-label-size);
    font-weight: var(--tds-font-label-weight);
    line-height: var(--tds-font-label-line-height);
  }

  .tds-c-field__required,
  .tds-c-field__error {
    color: var(--tds-color-feedback-danger-text);
  }

  .tds-c-field__required {
    margin-inline-start: var(--tds-space-control-gap);
  }

  .tds-c-field__control {
    min-block-size: var(--tds-size-touch-target-minimum);
    inline-size: 100%;
    border: var(--tds-border-width-default) solid var(--tds-color-border-default);
    border-radius: var(--tds-radius-control);
    background: var(--tds-color-surface-default);
    color: var(--tds-color-text-default);
    padding-inline: var(--tds-space-control-padding-inline-md);
    font-size: var(--tds-font-body-size);
    line-height: var(--tds-font-body-line-height);
    transition: border-color var(--tds-motion-duration-feedback) var(--tds-motion-easing-standard);
  }

  .tds-c-field__control::placeholder {
    color: var(--tds-color-text-muted);
    opacity: 1;
  }

  .tds-c-field__control:hover:not(:disabled):not([readonly]) {
    border-color: var(--tds-color-border-strong);
  }

  .tds-c-field__control:focus-visible {
    border-color: var(--tds-color-border-focus);
  }

  .tds-c-field[data-invalid="true"] .tds-c-field__control {
    border-color: var(--tds-color-feedback-danger-text);
  }

  .tds-c-field__control:disabled {
    background: var(--tds-color-surface-subtle);
    color: var(--tds-color-text-disabled);
    cursor: not-allowed;
  }

  .tds-c-field__control[readonly] {
    background: var(--tds-color-surface-subtle);
  }

  .tds-c-field__textarea {
    min-block-size: calc(var(--tds-size-touch-target-minimum) * 2);
    padding-block: var(--tds-space-control-padding-inline-sm);
    resize: vertical;
  }

  .tds-c-field__hint,
  .tds-c-field__error {
    margin: 0;
    font-size: var(--tds-font-caption-size);
    line-height: var(--tds-font-caption-line-height);
  }

  .tds-c-field__hint {
    color: var(--tds-color-text-muted);
  }

  @media (prefers-reduced-motion: reduce) {
    .tds-c-field__control {
      transition: none;
    }
  }
}

@layer tds.components {
  .tds-c-popover,
  .tds-c-menu {
    display: inline-flex;
  }

  .tds-c-popover__surface,
  .tds-c-menu__surface {
    max-inline-size: var(--tds-container-sm);
    margin-block-start: var(--tds-space-control-gap);
    border: var(--tds-border-width-default) solid var(--tds-color-border-default);
    border-radius: var(--tds-radius-surface);
    background: var(--tds-color-surface-raised);
    color: var(--tds-color-text-default);
    box-shadow: var(--tds-shadow-dropdown);
  }

  .tds-c-popover__surface {
    padding: var(--tds-space-layout-gutter);
  }

  .tds-c-popover__surface[popover],
  .tds-c-menu__surface[popover] {
    margin: 0;
  }

  .tds-c-menu__surface {
    display: grid;
    gap: var(--tds-space-control-gap);
    min-inline-size: calc(var(--tds-size-touch-target-minimum) * 4);
    padding: var(--tds-space-control-gap);
    list-style: none;
  }

  .tds-c-menu__item {
    display: flex;
    min-block-size: var(--tds-size-touch-target-minimum);
    inline-size: 100%;
    align-items: center;
    border: 0;
    border-radius: var(--tds-radius-control);
    background: transparent;
    color: var(--tds-color-text-default);
    padding-inline: var(--tds-space-control-padding-inline-md);
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
  }

  .tds-c-menu__item:hover,
  .tds-c-menu__item:focus-visible {
    background: var(--tds-color-surface-subtle);
  }

  .tds-c-menu__item:disabled,
  .tds-c-menu__item[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
  }
}

@layer tds.components {
  .tds-c-search {
    display: flex;
    inline-size: 100%;
    gap: var(--tds-space-control-gap);
  }

  .tds-c-search__label {
    position: absolute;
    inline-size: var(--tds-border-width-default);
    block-size: var(--tds-border-width-default);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tds-c-search__input {
    min-block-size: var(--tds-size-touch-target-minimum);
    min-inline-size: 0;
    flex: 1;
    border: var(--tds-border-width-default) solid var(--tds-color-border-default);
    border-radius: var(--tds-radius-control);
    background: var(--tds-color-surface-default);
    color: var(--tds-color-text-default);
    padding-inline: var(--tds-space-control-padding-inline-md);
    font: inherit;
  }

  .tds-c-search__input::placeholder {
    color: var(--tds-color-text-muted);
    opacity: 1;
  }

  .tds-c-search__submit {
    min-block-size: var(--tds-size-touch-target-minimum);
    padding-inline: var(--tds-space-control-padding-inline-lg);
    border: var(--tds-border-width-default) solid var(--tds-color-action-primary-background);
    border-radius: var(--tds-radius-control);
    background: var(--tds-color-action-primary-background);
    color: var(--tds-color-action-primary-text);
    font: inherit;
    font-weight: var(--tds-font-label-weight);
    cursor: pointer;
  }

  .tds-c-search__submit:hover {
    background: var(--tds-color-action-primary-background-hover);
  }
}

@layer tds.components {
  .tds-c-select {
    appearance: auto;
    padding-block: 0;
    cursor: pointer;
  }

  .tds-c-select:disabled {
    cursor: not-allowed;
  }
}

@layer tds.components {
  .tds-c-switch {
    display: grid;
    gap: var(--tds-space-control-gap);
    color: var(--tds-color-text-default);
    font-family: var(--tds-font-body-family);
  }

  .tds-c-switch__label {
    position: relative;
    display: inline-flex;
    min-block-size: var(--tds-size-touch-target-minimum);
    align-items: center;
    gap: var(--tds-space-control-gap);
    inline-size: fit-content;
    cursor: pointer;
  }

  .tds-c-switch__control {
    position: absolute;
    inline-size: var(--tds-border-width-default);
    block-size: var(--tds-border-width-default);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tds-c-switch__visual {
    position: relative;
    flex: none;
    inline-size: calc(var(--tds-size-icon-lg) + var(--tds-size-icon-sm));
    block-size: var(--tds-size-icon-lg);
    border: var(--tds-border-width-default) solid var(--tds-color-border-default);
    border-radius: var(--tds-radius-pill);
    background: var(--tds-color-surface-subtle);
    transition: background-color var(--tds-motion-duration-feedback) var(--tds-motion-easing-standard);
  }

  .tds-c-switch__visual::after {
    position: absolute;
    inset-block-start: calc((var(--tds-size-icon-lg) - var(--tds-size-icon-sm)) / 2 - var(--tds-border-width-default));
    inset-inline-start: calc((var(--tds-size-icon-lg) - var(--tds-size-icon-sm)) / 2 - var(--tds-border-width-default));
    inline-size: var(--tds-size-icon-sm);
    block-size: var(--tds-size-icon-sm);
    border-radius: var(--tds-radius-pill);
    background: var(--tds-color-text-inverse);
    box-shadow: var(--tds-shadow-raised);
    content: "";
    transition: transform var(--tds-motion-duration-feedback) var(--tds-motion-easing-standard);
  }

  .tds-c-switch__control:checked + .tds-c-switch__visual {
    border-color: var(--tds-color-action-primary-background);
    background: var(--tds-color-action-primary-background);
  }

  .tds-c-switch__control:checked + .tds-c-switch__visual::after {
    transform: translateX(var(--tds-size-icon-sm));
  }

  :dir(rtl) .tds-c-switch__control:checked + .tds-c-switch__visual::after {
    transform: translateX(calc(-1 * var(--tds-size-icon-sm)));
  }

  .tds-c-switch__control:focus-visible + .tds-c-switch__visual {
    outline: var(--tds-border-width-focus) solid var(--tds-color-border-focus);
    outline-offset: var(--tds-border-width-focus);
  }

  .tds-c-switch__control:disabled + .tds-c-switch__visual,
  .tds-c-switch__control:disabled ~ .tds-c-switch__text {
    opacity: 0.55;
    cursor: not-allowed;
  }

  .tds-c-switch__text {
    font-size: var(--tds-font-body-size);
    line-height: var(--tds-font-body-line-height);
  }

  .tds-c-switch__hint {
    margin: 0;
    padding-inline-start: calc(var(--tds-size-icon-lg) + var(--tds-size-icon-sm) + var(--tds-space-control-gap));
    color: var(--tds-color-text-muted);
    font-size: var(--tds-font-caption-size);
    line-height: var(--tds-font-caption-line-height);
  }

  @media (prefers-reduced-motion: reduce) {
    .tds-c-switch__visual,
    .tds-c-switch__visual::after {
      transition: none;
    }
  }
}

@layer tds.components {
  .tds-c-table-region {
    max-inline-size: 100%;
    overflow-x: auto;
    border: var(--tds-border-width-default) solid var(--tds-color-border-default);
    border-radius: var(--tds-radius-surface);
    background: var(--tds-color-surface-raised);
  }

  .tds-c-table-region:focus-visible {
    outline: var(--tds-border-width-focus) solid var(--tds-color-border-focus);
    outline-offset: var(--tds-border-width-focus);
  }

  .tds-c-table {
    inline-size: 100%;
    border-collapse: collapse;
    color: var(--tds-color-text-default);
  }

  .tds-c-table caption {
    padding: var(--tds-space-layout-gutter);
    font-weight: var(--tds-font-label-weight);
    text-align: start;
  }

  .tds-c-table th,
  .tds-c-table td {
    padding: var(--tds-space-control-gap) var(--tds-space-layout-gutter);
    border-block-start: var(--tds-border-width-default) solid var(--tds-color-border-subtle);
    text-align: start;
    vertical-align: top;
  }

  .tds-c-table th {
    background: var(--tds-color-surface-subtle);
    font-size: var(--tds-font-label-size);
    font-weight: var(--tds-font-label-weight);
  }

  .tds-c-table [data-numeric="true"] {
    font-variant-numeric: tabular-nums;
    text-align: end;
  }

  .tds-c-table[data-compact="true"] th,
  .tds-c-table[data-compact="true"] td {
    padding-block: var(--tds-space-control-gap);
  }

  .tds-c-table__empty {
    color: var(--tds-color-text-muted);
    text-align: center;
  }

  .tds-c-pagination__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tds-space-control-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .tds-c-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--tds-size-control-md);
    min-block-size: var(--tds-size-control-md);
    padding-inline: var(--tds-space-control-padding-inline-md);
    border: var(--tds-border-width-default) solid var(--tds-color-border-default);
    border-radius: var(--tds-radius-control);
    color: var(--tds-color-text-default);
    text-decoration: none;
  }

  .tds-c-pagination__link[aria-current="page"] {
    border-color: var(--tds-color-action-primary-background);
    background: var(--tds-color-action-primary-background);
    color: var(--tds-color-action-primary-text);
  }

  .tds-c-pagination__link[aria-disabled="true"] {
    color: var(--tds-color-text-disabled);
    cursor: not-allowed;
  }

  .tds-c-pagination__link:focus-visible {
    outline: var(--tds-border-width-focus) solid var(--tds-color-border-focus);
    outline-offset: var(--tds-border-width-focus);
  }
}

@layer tds.components {
  .tds-c-tabs {
    display: grid;
    gap: var(--tds-space-layout-gutter);
    color: var(--tds-color-text-default);
  }

  .tds-c-tabs__list {
    display: flex;
    gap: var(--tds-space-control-gap);
    overflow-x: auto;
    border-block-end: var(--tds-border-width-default) solid var(--tds-color-border-default);
  }

  .tds-c-tabs__tab {
    min-block-size: var(--tds-size-touch-target-minimum);
    padding-inline: var(--tds-space-control-padding-inline-md);
    align-content: center;
    border-block-end: var(--tds-border-width-strong) solid transparent;
    color: var(--tds-color-text-muted);
    font-weight: var(--tds-font-label-weight);
    text-decoration: none;
    white-space: nowrap;
  }

  .tds-c-tabs__tab:hover,
  .tds-c-tabs__tab[aria-selected="true"] {
    border-block-end-color: var(--tds-color-action-primary-background);
    color: var(--tds-color-text-default);
  }

  .tds-c-tabs__panels {
    display: grid;
    gap: var(--tds-space-layout-section);
  }

  .tds-c-tabs__panel {
    min-inline-size: 0;
  }
}

@layer tds.components {
  .tds-c-tooltip {
    position: relative;
    display: inline-flex;
  }

  .tds-c-tooltip__surface {
    position: absolute;
    inset-block-end: calc(100% + var(--tds-space-control-gap));
    inset-inline-start: 50%;
    z-index: var(--tds-layer-tooltip);
    inline-size: max-content;
    max-inline-size: var(--tds-container-sm);
    padding: var(--tds-space-control-gap) var(--tds-space-control-padding-inline-sm);
    transform: translateX(-50%);
    border-radius: var(--tds-radius-control);
    background: var(--tds-color-text-default);
    color: var(--tds-color-surface-default);
    box-shadow: var(--tds-shadow-dropdown);
    font-size: var(--tds-font-caption-size);
    line-height: var(--tds-font-caption-line-height);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--tds-motion-duration-feedback) var(--tds-motion-easing-standard);
  }

  .tds-c-tooltip:hover > .tds-c-tooltip__surface,
  .tds-c-tooltip:focus-within > .tds-c-tooltip__surface {
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .tds-c-tooltip__surface {
      transition: none;
    }
  }
}

@layer tds.components {
  .tds-l-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--tds-space-layout-gutter);
  }
  .tds-l-dashboard-grid__item { min-inline-size: 0; }
  .tds-l-dashboard-grid__item[data-span="1"] { grid-column: span 1; }
  .tds-l-dashboard-grid__item[data-span="2"] { grid-column: span 2; }
  .tds-l-dashboard-grid__item[data-span="3"] { grid-column: span 3; }
  .tds-l-dashboard-grid__item[data-span="4"] { grid-column: span 4; }
  .tds-l-dashboard-grid__item[data-span="5"] { grid-column: span 5; }
  .tds-l-dashboard-grid__item[data-span="6"] { grid-column: span 6; }
  .tds-l-dashboard-grid__item[data-span="7"] { grid-column: span 7; }
  .tds-l-dashboard-grid__item[data-span="8"] { grid-column: span 8; }
  .tds-l-dashboard-grid__item[data-span="9"] { grid-column: span 9; }
  .tds-l-dashboard-grid__item[data-span="10"] { grid-column: span 10; }
  .tds-l-dashboard-grid__item[data-span="11"] { grid-column: span 11; }
  .tds-l-dashboard-grid__item[data-span="12"] { grid-column: span 12; }
  .tds-c-global-search { position: relative; inline-size: 100%; max-inline-size: var(--tds-container-md); }
  .tds-c-global-search form, .tds-c-global-search__control { display: grid; gap: var(--tds-space-control-gap); }
  .tds-c-global-search form > label { font-size: var(--tds-font-label-size); font-weight: var(--tds-font-label-weight); }
  .tds-c-global-search__control { grid-template-columns: minmax(0, 1fr) auto; }
  .tds-c-global-search input, .tds-c-global-search button, .tds-c-command__trigger {
    min-block-size: var(--tds-size-control-md);
    padding-inline: var(--tds-space-control-padding-inline-md);
    border: var(--tds-border-width-default) solid var(--tds-color-border-default);
    border-radius: var(--tds-radius-control);
    background: var(--tds-color-surface-raised);
    color: var(--tds-color-text-default);
  }
  .tds-c-global-search button { background: var(--tds-color-action-primary-background); color: var(--tds-color-action-primary-text); cursor: pointer; }
  .tds-c-global-search__results {
    position: absolute;
    z-index: var(--tds-layer-dropdown);
    inset-block-start: 100%;
    inset-inline: 0;
    margin-block-start: var(--tds-space-control-gap);
    padding: var(--tds-space-control-gap);
    border: var(--tds-border-width-default) solid var(--tds-color-border-default);
    border-radius: var(--tds-radius-surface);
    background: var(--tds-color-surface-raised);
    box-shadow: var(--tds-shadow-dropdown);
  }
  .tds-c-global-search__count { margin: 0; padding: var(--tds-space-control-gap); color: var(--tds-color-text-muted); font-size: var(--tds-font-label-size); }
  .tds-c-global-search__results ul, .tds-c-command__list { display: grid; gap: var(--tds-space-control-gap); margin: 0; padding: 0; list-style: none; }
  .tds-c-global-search__results a, .tds-c-command__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tds-space-control-gap);
    min-block-size: var(--tds-size-control-md);
    padding-inline: var(--tds-space-control-padding-inline-md);
    border-radius: var(--tds-radius-control);
    color: var(--tds-color-text-default);
    text-decoration: none;
  }
  .tds-c-global-search__results a:hover, .tds-c-command__item:hover { background: var(--tds-color-surface-subtle); }
  .tds-c-global-search__category, .tds-c-command kbd { color: var(--tds-color-text-muted); font-size: var(--tds-font-label-size); }
  .tds-c-command__trigger { display: inline-flex; align-items: center; text-decoration: none; }
  .tds-c-command__dialog { inline-size: min(var(--tds-container-sm), calc(100% - var(--tds-space-layout-section))); }
  .tds-c-command kbd { padding: var(--tds-space-control-gap); border: var(--tds-border-width-default) solid var(--tds-color-border-default); border-radius: var(--tds-radius-control); background: var(--tds-color-surface-subtle); }
  @media (max-width: 64rem) {
    .tds-l-dashboard-grid__item[data-medium-span="1"] { grid-column: span 1; }
    .tds-l-dashboard-grid__item[data-medium-span="2"] { grid-column: span 2; }
    .tds-l-dashboard-grid__item[data-medium-span="3"] { grid-column: span 3; }
    .tds-l-dashboard-grid__item[data-medium-span="4"] { grid-column: span 4; }
    .tds-l-dashboard-grid__item[data-medium-span="5"] { grid-column: span 5; }
    .tds-l-dashboard-grid__item[data-medium-span="6"] { grid-column: span 6; }
    .tds-l-dashboard-grid__item[data-medium-span="7"] { grid-column: span 7; }
    .tds-l-dashboard-grid__item[data-medium-span="8"] { grid-column: span 8; }
    .tds-l-dashboard-grid__item[data-medium-span="9"] { grid-column: span 9; }
    .tds-l-dashboard-grid__item[data-medium-span="10"] { grid-column: span 10; }
    .tds-l-dashboard-grid__item[data-medium-span="11"] { grid-column: span 11; }
    .tds-l-dashboard-grid__item[data-medium-span="12"] { grid-column: span 12; }
  }
  @media (max-width: 40rem) {
    .tds-l-dashboard-grid { grid-template-columns: minmax(0, 1fr); }
    .tds-l-dashboard-grid__item[data-span] { grid-column: 1; }
    .tds-c-global-search__control { grid-template-columns: minmax(0, 1fr); }
  }
}

@layer tds.components {
  .tds-l-workspace {
    display: grid;
    grid-template:
      "topbar topbar" auto
      "sidebar main" minmax(0, 1fr) / minmax(14rem, 18rem) minmax(0, 1fr);
    min-block-size: 100dvh;
    background: var(--tds-color-surface-default);
    color: var(--tds-color-text-default);
  }
  .tds-l-workspace__skip {
    position: fixed;
    z-index: var(--tds-layer-overlay);
    inset-block-start: var(--tds-space-control-gap);
    inset-inline-start: var(--tds-space-control-gap);
    padding: var(--tds-space-control-gap) var(--tds-space-layout-gutter);
    border-radius: var(--tds-radius-control);
    background: var(--tds-color-action-primary-background);
    color: var(--tds-color-action-primary-text);
    transform: translateY(-200%);
  }
  .tds-l-workspace__skip:focus { transform: translateY(0); }
  .tds-l-workspace__topbar { grid-area: topbar; position: sticky; z-index: var(--tds-layer-sticky); inset-block-start: 0; }
  .tds-l-workspace__sidebar { grid-area: sidebar; min-inline-size: 0; border-inline-end: var(--tds-border-width-default) solid var(--tds-color-border-default); }
  .tds-l-workspace__main { grid-area: main; min-inline-size: 0; padding: var(--tds-space-layout-region); }
  .tds-c-topbar {
    display: flex;
    align-items: center;
    gap: var(--tds-space-layout-gutter);
    min-block-size: var(--tds-size-control-lg);
    padding-inline: var(--tds-space-layout-gutter);
    border-block-end: var(--tds-border-width-default) solid var(--tds-color-border-default);
    background: var(--tds-color-surface-raised);
  }
  .tds-c-topbar__brand { color: var(--tds-color-text-default); font-weight: var(--tds-font-heading-weight); text-decoration: none; }
  .tds-c-topbar__primary { flex: 1; min-inline-size: 0; }
  .tds-c-topbar__actions { display: flex; align-items: center; gap: var(--tds-space-control-gap); }
  .tds-c-sidebar { display: grid; gap: var(--tds-space-layout-section); padding: var(--tds-space-layout-gutter); }
  .tds-c-sidebar__section-title { margin: 0 0 var(--tds-space-control-gap); color: var(--tds-color-text-muted); font-size: var(--tds-font-label-size); }
  .tds-c-sidebar__list { display: grid; gap: var(--tds-space-control-gap); margin: 0; padding: 0; list-style: none; }
  .tds-c-sidebar__link {
    display: flex;
    justify-content: space-between;
    gap: var(--tds-space-control-gap);
    min-block-size: var(--tds-size-control-md);
    align-items: center;
    padding-inline: var(--tds-space-control-padding-inline-md);
    border-radius: var(--tds-radius-control);
    color: var(--tds-color-text-default);
    text-decoration: none;
  }
  .tds-c-sidebar__link:hover { background: var(--tds-color-surface-subtle); }
  .tds-c-sidebar__link[aria-current="page"] { background: var(--tds-color-action-primary-background); color: var(--tds-color-action-primary-text); }
  .tds-c-sidebar__meta { font-size: var(--tds-font-label-size); }
  @media (max-width: 48rem) {
    .tds-l-workspace { grid-template: "topbar" auto "sidebar" auto "main" minmax(0, 1fr) / minmax(0, 1fr); }
    .tds-l-workspace__sidebar { overflow-x: auto; border-inline-end: 0; border-block-end: var(--tds-border-width-default) solid var(--tds-color-border-default); }
    .tds-c-sidebar { display: flex; inline-size: max-content; padding-block: var(--tds-space-control-gap); }
    .tds-c-sidebar__section { display: flex; align-items: center; gap: var(--tds-space-control-gap); }
    .tds-c-sidebar__section-title { margin: 0; }
    .tds-c-sidebar__list { display: flex; }
    .tds-l-workspace__main { padding: var(--tds-space-layout-gutter); }
    .tds-c-topbar {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      padding-block: var(--tds-space-control-gap);
    }
    .tds-c-topbar__primary {
      grid-column: 1 / -1;
      grid-row: 2;
      inline-size: 100%;
    }
    .tds-c-topbar__actions {
      grid-column: 2;
      grid-row: 1;
      justify-self: end;
    }
  }
}