.ui-skeleton-card {
  display: grid;
  gap: var(--spacing-md, 12px);
  padding: var(--spacing-lg, 16px);
}
/* Per-preset line widths. Defined on classes (instead of via the
   skeleton primitive's Width arg) so strict CSP doesn't strip them
   off the rendered element. */
.ui-skeleton-card__title  { inline-size: 50%; }
.ui-skeleton-card__footer { inline-size: 35%; }
.ui-skeleton-row__label   { inline-size: 40%; }
.ui-skeleton-row__value   { inline-size: 25%; }
.ui-skeleton-avatar__name { inline-size: 60%; }
.ui-skeleton-avatar__sub  { inline-size: 40%; }
.ui-skeleton-card__footer {
  margin-block-start: var(--spacing-sm, 8px);
  padding-block-start: var(--spacing-md, 12px);
  border-block-start: 1px solid var(--color-border, #E5E7EB);
}
.ui-skeleton-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--spacing-md, 12px);
  align-items: center;
  padding-block: var(--spacing-sm, 8px);
  padding-inline: var(--spacing-md, 12px);
  border-block-end: 1px solid var(--color-border, #E5E7EB);
}
.ui-skeleton-row__chevron {
  display: inline-block;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-block-start: 2px solid var(--color-border, #E5E7EB);
  border-inline-end: 2px solid var(--color-border, #E5E7EB);
  transform: rotate(45deg);
  opacity: 0.6;
}
.ui-skeleton-avatar {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-md, 12px);
  align-items: center;
}
.ui-skeleton-avatar__text {
  display: grid;
  gap: var(--spacing-xs, 4px);
}