/* skeleton.css: Skeleton (component 34). Owner: group B (P2.T5).
   Static blocks in --border (so they read on --surface in both themes), --radius-chip, a slow opacity pulse from 1 to 0.5 over
   --duration-pulse; no gradient shimmer. Static under reduced motion (base.css turns every animation off). Shapes match the final
   layouts so nothing shifts when the data arrives. The skeleton is aria-hidden; the region carries aria-busy. */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

[data-component="skeleton"] {
  display: block;
  min-inline-size: 0;
  animation: skeleton-pulse var(--duration-pulse) ease-in-out infinite;
}
[data-component="skeleton"][data-pending="true"] { visibility: hidden; }
.skeleton__bar { display: block; flex: none; background: var(--border); border-radius: var(--radius-chip); }

/* Row: a full --size-row row, cells that are --size-skeleton-line bars. */
.skeleton__rows { display: block; }
.skeleton__row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  box-sizing: border-box;
  block-size: var(--size-row);
  padding-inline: var(--space-5);
  border-block-end: var(--border-width) solid var(--border);
}
.skeleton__cell { display: flex; align-items: center; flex: 1 1 0; min-inline-size: 0; }
.skeleton__cell--select { flex: none; inline-size: var(--col-select); }
.skeleton__cell--status { flex: none; inline-size: var(--col-status); }
.skeleton__line { block-size: var(--size-skeleton-line); }
.skeleton__checkbox { inline-size: var(--size-checkbox); block-size: var(--size-checkbox); }
.skeleton__chip { inline-size: var(--size-skeleton-chip-w); block-size: var(--size-chip); }

/* Figure: a label bar, --space-3, a value bar. */
.skeleton__stack { display: grid; justify-items: start; }
.skeleton__stack--figure { gap: var(--space-3); }
.skeleton__label { inline-size: var(--size-skeleton-label-w); block-size: var(--size-skeleton-line); }
.skeleton__value { inline-size: var(--size-skeleton-value-w); block-size: var(--size-skeleton-value-h); }

/* Panel: a title bar, --space-4, three bars of 100, 90 and 60 %, --space-3 apart. */
.skeleton__stack--panel { gap: var(--space-4); inline-size: 100%; }
.skeleton__title { inline-size: var(--size-skeleton-title-w); block-size: var(--size-skeleton-title-h); }
.skeleton__lines { display: grid; gap: var(--space-3); inline-size: 100%; justify-items: start; }

/* Chart: a title bar and five 1 px hairlines at the plot height. */
.skeleton__stack--chart { gap: var(--space-4); inline-size: 100%; }
.skeleton__plot { display: flex; flex-direction: column; justify-content: space-between; inline-size: 100%; block-size: var(--size-chart-h); }
.skeleton__plot--small { block-size: var(--size-chart-h-sm); }
.skeleton__rule { display: block; inline-size: 100%; block-size: var(--border-width); background: var(--border); }

/* Trace: three steps of a node and two bars. */
.skeleton__steps { display: grid; gap: var(--space-5); }
.skeleton__step { display: flex; align-items: flex-start; gap: var(--space-4); }
.skeleton__node { inline-size: var(--size-node); block-size: var(--size-node); border-radius: var(--radius-round); }
.skeleton__step-text { display: grid; gap: var(--space-3); }
.skeleton__trace-a { inline-size: var(--size-skeleton-trace-a-w); block-size: var(--size-node); }
.skeleton__trace-b { inline-size: var(--size-skeleton-trace-b-w); block-size: var(--size-skeleton-line); }

/* Chips: the status chip block, the control chip block and the queue chip block. */
.skeleton__chips { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.skeleton__chip-block { inline-size: var(--size-skeleton-chip-w); }
.skeleton__chip-block--status { block-size: var(--size-chip); }
.skeleton__chip-block--control { block-size: var(--size-chip-control); }
.skeleton__chip-block--filter { block-size: var(--size-filter-chip); inline-size: var(--size-skeleton-label-w); border-radius: var(--radius-control); }

/* Kitchen sink only: the widths the samples sit in, so a row, a panel and a chart read at their real size. */
.skeleton-demo__table { inline-size: var(--size-list-max); max-inline-size: 100%; background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-region); overflow: hidden; }
.skeleton-demo__panel { inline-size: var(--size-popover-md); max-inline-size: 100%; }
.skeleton-demo__chart { inline-size: var(--size-form-max); max-inline-size: 100%; }

/* Option: list rows at --size-menu-item with one bar each (the Select's loading list, three rows). */
.skeleton__options { display: block; }
.skeleton__option { display: flex; align-items: center; min-block-size: var(--size-menu-item); padding-inline: var(--space-4); }

/* Entry: drawer list entries, a circle and two bars, 72 tall with a hairline between (the notifications loading state). */
.skeleton__entries { display: block; }
.skeleton__entry { display: flex; align-items: center; gap: var(--space-4); min-block-size: calc(var(--space-9) + var(--space-8)); padding: var(--space-5); border-block-end: var(--border-width) solid var(--border); }