/* Skeleton shapes are authored in ui-skeleton.html. */
.skeleton-demo-region {
  min-height: 13.75rem;
  margin-top: 1.25rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--panel);
}
.skeleton-shape {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--line);
  border-radius: 0.5625rem;
  animation: skeleton-fade 1.4s ease-in-out infinite alternate;
}
.skeleton-shape::after {
  content: "";
  display: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--surface), transparent);
  opacity: 0.65;
  transform: translateX(-100%);
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
body[data-skeleton-animation="shimmer"] .skeleton-shape {
  animation: none;
}
body[data-skeleton-animation="shimmer"] .skeleton-shape::after {
  display: block;
}
.skeleton-shape.line {
  height: 0.75rem;
  width: 100%;
  border-radius: 624.9375rem;
}
.skeleton-shape.title {
  height: 1.375rem;
  width: 58%;
}
.skeleton-shape.short {
  width: 40%;
}
.skeleton-shape.medium {
  width: 72%;
}
.skeleton-shape.avatar {
  width: 3.5rem;
  height: 3.5rem;
  flex: 0 0 3.5rem;
  border: 0;
  border-radius: 50%;
  background: var(--line);
}
.skeleton-stack {
  display: grid;
  gap: 0.9375rem;
}
.skeleton-person {
  display: flex;
  gap: 1.125rem;
  align-items: center;
}
.skeleton-person > .skeleton-stack {
  flex: 1;
  min-width: 0;
}
.skeleton-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.skeleton-metric {
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  min-width: 0;
}
.skeleton-metric strong {
  font-size: 1.5rem;
  display: block;
  margin: 0.9375rem 0;
}
.skeleton-metric p,
.skeleton-person p {
  color: var(--muted);
  font-size: 0.6875rem;
  line-height: 1.8;
}
.skeleton-table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1.25rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--line);
}
.skeleton-list {
  display: grid;
  gap: 1.375rem;
}
.skeleton-task {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding-bottom: 1.125rem;
  border-bottom: 1px solid var(--line);
}
.skeleton-task .skeleton-shape.avatar {
  width: 2.125rem;
  height: 2.125rem;
  flex-basis: 2.125rem;
}
.skeleton-task > div {
  flex: 1;
  min-width: 0;
}
.skeleton-chart {
  height: 10rem;
  display: flex;
  align-items: flex-end;
  gap: 0.875rem;
  padding: 0.875rem 0 0;
  border-bottom: 1px solid var(--line);
}
.skeleton-chart > span {
  flex: 1;
  border-radius: 0.4375rem 0.4375rem 0 0;
}
.skeleton-chart > span:nth-child(3n + 1) {
  height: 45%;
}
.skeleton-chart > span:nth-child(3n + 2) {
  height: 78%;
}
.skeleton-chart > span:nth-child(3n) {
  height: 60%;
}
.skeleton-chart.loaded > span {
  background: var(--accent-mid);
}
.skeleton-shape.field {
  height: 2.625rem;
}
.skeleton-shape.action {
  height: 2.375rem;
  width: 8.125rem;
}
[data-skeleton-placeholder][hidden],
[data-skeleton-content][hidden],
[data-skeleton-cancel][hidden] {
  display: none;
}
@keyframes skeleton-fade {
  from {
    opacity: 0.45;
  }
  to {
    opacity: 1;
  }
}
@keyframes skeleton-shimmer {
  to {
    transform: translateX(100%);
  }
}
@media (max-width: 640px) {
  .skeleton-metrics {
    grid-template-columns: 1fr;
  }
  .skeleton-table-row {
    gap: 0.75rem;
  }
  .skeleton-demo-region {
    padding: 1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-shape,
  .skeleton-shape::after {
    animation: none;
  }
  .skeleton-shape::after {
    display: none !important;
  }
}