@layer components {
  [data-slot="card"] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    border-width: 1px;
    border-style: solid;
    border-color: hsl(var(--card-border, var(--border)));
    border-radius: var(--card-radius);

    background:
      linear-gradient(var(--card-tint), var(--card-tint)), hsl(var(--card-background, var(--card)));
    color: hsl(var(--card-foreground));

    box-shadow: var(--card-shadow), var(--card-glow);
    overflow: hidden;
  }

  button[data-slot="card"] {
    text-align: inherit;
  }

  [data-slot="card"][data-variant="muted"] {
    background: hsl(var(--secondary));
  }

  [data-slot="card"][data-variant="outline"] {
    background: transparent;
  }

  [data-slot="card"][data-variant="borderless"] {
    border-width: 0;
  }

  [data-slot="card"][data-variant="featured"] {
    border-color: var(--card-featured-border-color, hsl(var(--primary)));
    box-shadow: 0 0 0 var(--card-featured-ring-width)
      var(--card-featured-border-color, hsl(var(--primary)));
  }

  [data-slot="card"][data-density="tight"] {
    --card-space-inset: var(--space-3);
    --card-space-shell-y: initial;
    --card-space-body-y: var(--space-3);
  }

  [data-slot="card"][data-density="cozy"] {
    --card-space-inset: var(--space-5);
    --card-space-shell-y: initial;
    --card-space-body-y: var(--space-5);
  }

  [data-slot="card"][data-accent="primary"] {
    --card-accent-color: hsl(
      var(
        --mark-primary,
        var(--text-primary, from hsl(var(--primary)) var(--text-primary-channels))
      )
    );
  }

  [data-slot="card"][data-accent="success"] {
    --card-accent-color: hsl(var(--mark-success, var(--text-success)));
  }

  [data-slot="card"][data-accent="warning"] {
    --card-accent-color: hsl(var(--mark-warning, var(--text-warning)));
  }

  [data-slot="card"][data-accent="info"] {
    --card-accent-color: hsl(var(--mark-info, var(--text-info)));
  }

  [data-slot="card"][data-accent="attention"] {
    --card-accent-color: hsl(var(--mark-attention, var(--attention)));
  }

  [data-slot="card"][data-accent="destructive"] {
    --card-accent-color: hsl(var(--mark-destructive, var(--text-error)));
  }

  [data-slot="card"][data-accent] {
    border-inline-start-width: var(--card-accent-rail-width);
    border-inline-start-color: var(--card-accent-color);
  }

  [data-slot="card"][data-accent] > [data-slot="card-header"],
  [data-slot="card"][data-accent] > [data-slot="card-content"]:not([data-flush]),
  [data-slot="card"][data-accent] > [data-slot="card-footer"]:not([data-flush]) {
    padding-inline-start: calc(var(--card-space-inset) - var(--card-accent-rail-width));
  }

  [data-slot="card"] > [data-slot="card-footer"] {
    margin-block-start: auto;
  }

  [data-slot="card"][data-accent][data-accent-placement="perimeter"] {
    border-width: var(--card-accent-perimeter-width);
    border-color: var(--card-accent-color);
    box-shadow:
      0 0 0 var(--card-accent-perimeter-ring-width) var(--card-accent-color),
      var(--card-shadow),
      var(--card-glow);
  }

  [data-slot="card"][data-accent][data-accent-placement="perimeter"] > [data-slot="card-header"],
  [data-slot="card"][data-accent][data-accent-placement="perimeter"]
    > [data-slot="card-content"]:not([data-flush]),
  [data-slot="card"][data-accent][data-accent-placement="perimeter"]
    > [data-slot="card-footer"]:not([data-flush]) {
    padding-inline-start: var(--card-space-inset);
  }

  [data-slot="card"][data-hoverable] {
    cursor: pointer;
    transition: box-shadow var(--duration-fast) var(--ease-standard);
  }

  [data-slot="card"][data-hoverable]:hover {
    --card-shadow: var(--card-hover-shadow);
  }

  @media (prefers-reduced-motion: reduce) {
    [data-slot="card"][data-hoverable] {
      transition: none;
    }
  }

  [data-slot="card-header"] {
    display: flex;
    flex-direction: column;
    gap: var(--card-space-gap);
    padding-inline: var(--card-space-inset);
  }

  [data-slot="card-header"]:not([data-banded]) {
    padding-top: var(--card-space-shell-y, var(--card-space-inset));
    padding-bottom: 0;
  }

  [data-slot="card-bar"] {
    display: flex;
    align-items: center;
    gap: var(--space-inline-md);
    padding: var(--card-space-header-y) var(--card-space-inset);
    border-block: 1px solid hsl(var(--card-border, var(--border)));
  }

  [data-slot="card-bar"]:first-child {
    border-block-start-width: 0;
  }

  [data-slot="card-bar"]:last-child {
    border-block-end-width: 0;
  }

  [data-slot="card-bar-main"] {
    display: flex;
    align-items: center;
    gap: var(--space-inline-sm);
    min-width: 0;
    flex: 1 1 auto;
    overflow-x: auto;
  }

  [data-slot="card-bar-extra"] {
    display: flex;
    align-items: center;
    gap: var(--space-inline-xs);
    flex-shrink: 0;
  }

  .ui-card-header--banded {
    border-bottom: var(
      --card-header-border-bottom,
      1px solid hsl(var(--card-border, var(--border)))
    );
    background-color: hsl(
      var(--card-header-background, var(--muted)) / var(--card-header-background-alpha)
    );
  }

  [data-slot="card-header"][data-banded] {
    padding-inline: var(--card-space-inset);

    padding-block: var(--card-space-divided-y);
    gap: var(--card-space-gap);
  }

  [data-slot="card-title"] {
    font-size: var(--card-title-font-size);
    font-weight: var(--card-title-font-weight);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--card-title-line-height);
  }

  [data-slot="card-description"] {
    color: hsl(var(--muted-foreground));
    font-size: var(--card-description-font-size);
    line-height: var(--card-description-line-height);
  }

  [data-slot="card-header"][data-banded]:has([data-slot="card-action"]) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-inline-md);
  }

  [data-slot="card-header"][data-banded]:has([data-slot="card-description"]):not(
      :has([data-slot="card-action"])
    ) {
    flex-direction: column;
    align-items: stretch;
  }

  [data-slot="card-action"] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--space-inline-sm);
    margin-inline-start: auto;
  }

  [data-slot="card"]:has([data-slot="card-header"][data-banded]) {
    overflow: hidden;
  }

  [data-slot="card"]:has([data-slot="card-header"][data-banded])
    [data-slot="card-content"]:not([data-tight]):not([data-flush]) {
    padding-top: var(--card-space-body-y);
  }

  [data-slot="card"]:has([data-slot="card-content"][data-tight])
    [data-slot="card-header"]:not([data-banded]) {
    padding-top: var(--card-space-body-y);
    padding-bottom: var(--card-space-body-y);
  }

  [data-slot="card"]:has([data-slot="card-content"][data-tight] [data-slot="tabs-list"])
    [data-slot="card-header"]:not([data-banded]) {
    padding-top: var(--card-space-shell-y, var(--card-space-inset));
  }

  [data-slot="card"]:has([data-slot="card-content"][data-tight] [data-slot="tabs-list"])
    [data-slot="card-header"] {
    padding-bottom: var(--card-space-body-y);
  }

  [data-slot="card-header"]:has([data-slot="card-action"]):not(
      :has([data-slot="card-description"])
    ) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-inline-md);
    padding-top: var(--card-space-body-y);
    padding-bottom: var(--card-space-body-y);
  }

  [data-slot="card"]:has([data-slot="card-header"] [data-slot="card-action"])
    [data-slot="card-content"]:not([data-tight]):not([data-flush]) {
    padding-top: 0;
  }

  [data-slot="card"]:has([data-slot="card-header"] [data-slot="card-description"])
    [data-slot="card-content"]:not([data-tight]):not([data-flush]) {
    padding-top: var(--card-space-body-y);
  }

  [data-slot="card"]:not(:has([data-slot="card-content"], [data-slot="card-footer"]))
    [data-slot="card-header"] {
    padding-bottom: var(--card-space-shell-y, var(--card-space-inset));
  }

  .ui-card-cover {
    display: block;
    width: 100%;
    overflow: hidden;
  }

  [data-slot="card"]:has([data-slot="card-cover"]) [data-slot="card-header"]:not([data-banded]) {
    padding-top: var(--card-space-body-y);
  }

  [data-slot="card-content"] {
    padding-inline: var(--card-space-inset);
    padding-bottom: var(--card-space-shell-y, var(--card-space-inset));
  }

  [data-slot="card-content"]:not([data-tight]):not([data-solo]) {
    padding-top: var(--card-space-body-y);
  }

  [data-slot="card-content"][data-solo] {
    padding-block: var(--card-space-solo-y, var(--card-space-shell-y, var(--card-space-inset)));
  }

  [data-slot="card-content"][data-flush] {
    padding-inline: 0;
  }

  [data-slot="card-content"][data-flush]:not([data-tight]):not([data-solo]) {
    padding-block: 0;
  }

  [data-slot="card"]:has([data-slot="card-content"][data-flush]:not([data-tight]):not([data-solo]))
    [data-slot="card-header"]:not([data-banded]) {
    padding-bottom: var(--card-space-body-y);
  }

  [data-slot="card-content"][data-tight] {
    padding-top: 0;
  }

  [data-slot="card"]:has([data-slot="card-footer"]) [data-slot="card-content"] {
    padding-bottom: var(--card-space-body-y);
  }

  [data-slot="card"]:has([data-slot="tabs-list"]) [data-slot="card-content"][data-tight] {
    padding-top: 0;
    padding-inline: 0;
  }

  [data-slot="card"] [data-slot="tabs-list"] {
    padding-inline: var(--card-space-inset);
  }

  [data-slot="card"] [data-slot="tabs-panel"] {
    margin-top: 0;
    padding: var(--card-space-body-y) var(--card-space-inset);
  }

  [data-slot="card-content"][data-flush] [data-slot="tabs-panel"] {
    padding-inline: 0;
  }

  [data-slot="card"] > [data-slot="tabs"] {

    gap: 0;

    flex: 1 1 auto;
    min-inline-size: 0;
  }

  [data-slot="card"] > [data-slot="tabs"] > [data-slot="tabs-panel"] {
    padding: 0;
  }

  [data-slot="card"][data-tab-list] > [data-slot="card-header"]:not([data-banded]) {
    padding-bottom: var(--card-space-body-y);
  }

  [data-slot="card"]
    > [data-slot="tabs"]
    > .ui-tabs-bar
    > [data-slot="tabs-extra"][data-side="end"] {
    padding-inline-end: var(--card-space-inset);
  }

  [data-slot="card"]
    > [data-slot="tabs"]
    > .ui-tabs-bar
    > [data-slot="tabs-extra"][data-side="start"] {
    padding-inline-start: var(--card-space-inset);
  }

  [data-slot="card-footer"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-inline-sm);
    padding-inline: var(--card-space-inset);
  }

  @media (max-width: 639px) {
    [data-slot="card-footer"][data-separated]:not([data-flush]) {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
    }
  }

  [data-slot="card-footer"]:not([data-separated]) {
    padding-top: 0;
    padding-bottom: var(--card-space-shell-y, var(--card-space-inset));
  }

  [data-slot="card-footer"][data-separated] {
    border-top: 1px solid hsl(var(--card-border, var(--border)));

    padding-block: var(--card-space-divided-y);
    justify-content: flex-end;
  }

  [data-slot="card-footer"][data-separated][data-flush] {
    padding-inline: 0;
    justify-content: stretch;
  }

  [data-slot="card-footer"][data-actions] {
    gap: 0;
    flex-wrap: nowrap;
    padding-inline: 0;
    padding-block: 0;
    border-top: var(--stroke-hairline) solid hsl(var(--card-border, var(--border)));
  }

  [data-slot="card-footer"][data-actions] > * {
    display: flex;
    min-width: 0;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    padding-block: var(--card-space-footer-y);
  }

  [data-slot="card-footer"][data-actions] > * + * {
    border-inline-start: var(--stroke-hairline) solid hsl(var(--card-border, var(--border)));
  }

  .ui-card-inset-x {
    padding-inline: var(--card-space-inset);
  }

  .ui-card-inset {
    padding: var(--card-space-body-y);
  }

  .ui-card-inset-y {
    padding-block: var(--card-space-header-y);
  }

  .ui-card-grid-cell {
    padding: var(--card-space-body-y);
  }

  .ui-card-footer-action-y {
    padding-block: var(--card-space-footer-y);
  }

  [data-slot="card"][data-stat-card] {
    padding: var(--card-space-header-y) var(--card-space-inset);
  }

  [data-slot="card"][data-stat-card][data-stat-layout="inline"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-inline-md);
  }

  [data-slot="stat-card-body"] {
    min-width: 0;
  }

  [data-slot="stat-card-icon"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--stat-card-icon-size);
    height: var(--stat-card-icon-size);
    margin-bottom: var(--stat-card-gap);
    border-radius: var(--stat-card-icon-radius);
    background: var(--stat-card-icon-background, hsl(var(--primary) / 0.1));
    color: var(--stat-card-icon-foreground, hsl(var(--primary)));
  }

  [data-slot="stat-card-icon"] svg {
    width: var(--stat-card-icon-glyph-size);
    height: var(--stat-card-icon-glyph-size);
  }

  [data-slot="card"][data-stat-layout="inline"] [data-slot="stat-card-icon"] {
    margin-bottom: 0;
    order: 1;
  }

  [data-slot="stat-card-label"] {
    display: flex;
    align-items: center;
    gap: var(--space-inline-xs);
    color: hsl(var(--muted-foreground));
    font-size: var(--stat-card-label-font-size);
    font-weight: var(--stat-card-label-font-weight);
    letter-spacing: var(--stat-card-label-letter-spacing);
    line-height: var(--line-height-normal);
    text-transform: uppercase;
  }

  [data-slot="stat-card-label"] svg {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    stroke-width: 1.6;
  }

  [data-slot="stat-card-value-row"] {
    display: flex;
    align-items: baseline;
    gap: var(--space-inline-sm);
    margin-top: var(--stat-card-gap);
  }

  [data-slot="card"][data-stat-align="end"] [data-slot="stat-card-value-row"],
  [data-slot="card"][data-stat-layout="inline"] [data-slot="stat-card-value-row"] {
    justify-content: flex-end;
    text-align: end;
  }

  [data-slot="stat-card-value"] {
    font-size: var(--stat-card-value-font-size);
    font-weight: var(--stat-card-value-font-weight);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--stat-card-value-line-height);
    font-variant-numeric: tabular-nums;
  }

  [data-slot="stat-card-delta"] {
    color: hsl(var(--muted-foreground));
    font-size: var(--stat-card-delta-font-size);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    font-variant-numeric: tabular-nums;
  }

  [data-slot="stat-card-hint"] {
    margin-top: var(--stat-card-gap);
    color: hsl(var(--muted-foreground));
    font-size: var(--stat-card-hint-font-size);
    line-height: var(--line-height-normal);
  }

  [data-slot="card"][data-service-launcher] > [data-slot="card-content"] {
    display: flex;
    flex-direction: column;
    gap: var(--card-service-launcher-space-gap);
  }

  [data-slot="service-launcher-heading"],
  [data-slot="service-launcher-skeleton-heading"] {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--card-service-launcher-space-gap);
  }

  [data-slot="service-launcher-icon"] {
    display: inline-flex;
    width: var(--card-service-launcher-icon-size);
    height: var(--card-service-launcher-icon-size);
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--card-service-launcher-icon-radius);
    background: hsl(var(--card-service-launcher-icon-background, var(--accent)));
    color: hsl(var(--card-service-launcher-icon-foreground, var(--primary)));
  }

  [data-slot="card"][data-service-launcher][data-unavailable] [data-slot="service-launcher-icon"] {
    background: hsl(var(--card-service-launcher-unavailable-icon-background, var(--muted)));
    color: hsl(var(--card-service-launcher-unavailable-icon-foreground, var(--muted-foreground)));
  }

  [data-slot="service-launcher-icon"] > svg {
    width: var(--card-service-launcher-icon-glyph-size);
    height: var(--card-service-launcher-icon-glyph-size);
  }

  [data-slot="service-launcher-identity"] {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--card-service-launcher-space-gap);
  }

  [data-slot="service-launcher-title"] {
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
    font-size: var(--card-title-font-size);
    font-weight: var(--card-title-font-weight);
    line-height: var(--card-title-line-height);
  }

  [data-slot="service-launcher-status"] {
    flex: none;
  }

  [data-slot="service-launcher-description"] {
    flex: 1;
    overflow-wrap: anywhere;
    color: hsl(var(--muted-foreground));
    font-size: var(--card-service-launcher-description-font-size);
    line-height: var(--card-service-launcher-description-line-height);
  }

  [data-slot="service-launcher-metadata"] {
    overflow-wrap: anywhere;
    color: hsl(var(--muted-foreground));
    font-family: var(--font-mono);
    font-size: var(--card-service-launcher-metadata-font-size);
    line-height: var(--card-service-launcher-metadata-line-height);
  }

  [data-slot="service-launcher-disabled-reason"] {
    overflow-wrap: anywhere;
    color: hsl(var(--muted-foreground));
    font-size: var(--card-service-launcher-description-font-size);
    line-height: var(--card-service-launcher-description-line-height);
  }

  [data-slot="service-launcher-action"] > [data-slot="button"] {
    width: 100%;
  }

  [data-slot="card"][data-service-catalog-cta] {
    min-height: var(--card-service-launcher-cta-min-height);
    border-style: dashed;
  }

  [data-slot="card"][data-service-catalog-cta] > [data-slot="card-content"] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--card-service-launcher-space-gap);
    text-align: center;
  }

  [data-slot="service-catalog-icon"] {
    width: var(--card-service-launcher-icon-glyph-size);
    height: var(--card-service-launcher-icon-glyph-size);
    color: hsl(var(--muted-foreground));
  }

  [data-slot="service-catalog-title"] {
    color: hsl(var(--muted-foreground));
    font-size: var(--card-service-launcher-description-font-size);
    line-height: var(--card-service-launcher-description-line-height);
  }

  [data-slot^="service-launcher-skeleton-"] {
    display: block;
  }

  [data-slot="service-launcher-skeleton-icon"] {
    width: var(--card-service-launcher-icon-size);
    height: var(--card-service-launcher-icon-size);
    flex: none;
  }

  [data-slot="service-launcher-skeleton-title"] {
    width: var(--card-service-launcher-skeleton-title-width);
    height: var(--font-size-base);
  }

  [data-slot="service-launcher-skeleton-status"] {
    width: var(--card-service-launcher-skeleton-status-width);
    height: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
    margin-inline-start: auto;
  }

  [data-slot="service-launcher-skeleton-description"],
  [data-slot="service-launcher-skeleton-metadata"],
  [data-slot="service-launcher-skeleton-action"] {
    width: 100%;
    height: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
  }

  [data-slot="service-launcher-skeleton-action"] {
    height: var(--control-height);
  }
}

@layer components {
  .ui-card-bar[data-surface="muted"] {
    background: hsl(var(--muted));
  }
  .ui-card-bar[data-border="none"] {
    border-block: 0;
  }
  .ui-card-bar[data-border="block-start"] {
    border-block-end: 0;
    border-block-start: var(--stroke-hairline) solid hsl(var(--border));
  }
  .ui-card-bar[data-border="block-end"] {
    border-block-start: 0;
    border-block-end: var(--stroke-hairline) solid hsl(var(--border));
  }
  .ui-card-bar[data-border="both"] {
    border-block: var(--stroke-hairline) solid hsl(var(--border));
  }
}