/* activity-timeline.css: Activity timeline (component 18). Owner: group E (P2.T8). Tokens only, logical properties only. 02 "18". */
[data-component="activity-timeline"] { display: grid; gap: var(--space-4); inline-size: 100%; min-inline-size: 0; color: var(--text); }

[data-component="activity-timeline"] .timeline__filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-4); }
[data-component="activity-timeline"] .timeline__facet { display: grid; gap: var(--space-2); font: var(--type-label); }
[data-component="activity-timeline"] .timeline__select {
  min-block-size: var(--size-control-sm);
  padding-inline: var(--space-3);
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font: var(--type-body);
}

[data-component="activity-timeline"] .timeline__group { display: grid; }
[data-component="activity-timeline"] .timeline__day {
  display: flex;
  align-items: center;
  min-block-size: calc(var(--size-header-slim) + (var(--size-row) - var(--size-row-compact)));
  margin: 0;
  border-block-end: var(--border-width) solid var(--border);
  color: var(--text-secondary);
  font: var(--type-label);
}
[data-component="activity-timeline"] .timeline__list { list-style: none; margin: 0; padding: 0; }
[data-component="activity-timeline"] .timeline__entry {
  display: grid;
  grid-template-columns: var(--size-avatar-sm) minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: start;
  /* Density (02 Density; the row-like extension is owner-pending, CL-145): the entry grows by the compact-to-comfortable step of the data table row (8). */
  min-block-size: calc(var(--space-9) + var(--space-4) + (var(--size-row) - var(--size-row-compact)));
  max-inline-size: none;
  padding-block: calc(var(--space-4) + calc((var(--size-row) - var(--size-row-compact)) / 2));
  border-block-end: var(--border-width) solid var(--border);
}
[data-component="activity-timeline"] .timeline__entry[data-flash="true"] { animation: timeline-flash var(--duration-flash) var(--ease-standard); }
@keyframes timeline-flash { from { background: var(--brand-subtle); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) {
  [data-component="activity-timeline"] .timeline__entry[data-flash="true"] { animation: none; background: var(--brand-subtle); }
}

[data-component="activity-timeline"] .timeline__text { display: grid; gap: var(--space-1); min-inline-size: 0; }
[data-component="activity-timeline"] .timeline__sentence { margin: 0; font: var(--type-body); overflow-wrap: anywhere; }
[data-component="activity-timeline"] .timeline__actor { font-weight: 500; }
[data-component="activity-timeline"] .timeline__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); margin: 0; color: var(--text-secondary); font: var(--type-caption); }
[data-component="activity-timeline"] .timeline__meta time { font-variant-numeric: tabular-nums lining-nums; }
[data-component="activity-timeline"] .timeline__show {
  min-block-size: var(--size-target-min);
  padding-inline: var(--space-3);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--brand);
  font: var(--type-label);
}
[data-component="activity-timeline"] .timeline__show:hover { background: var(--surface-hover); text-decoration: underline; }
[data-component="activity-timeline"] .timeline__show:active { background: var(--border); }
[data-component="activity-timeline"] .timeline__change { padding-block-start: var(--space-3); }
[data-component="activity-timeline"] .timeline__change[hidden] { display: none; }
[data-component="activity-timeline"] .timeline__empty { margin: 0; padding-block: var(--space-7); color: var(--text-secondary); font: var(--type-body); }
[data-component="activity-timeline"] .timeline__all { margin: 0; font: var(--type-label); }
[data-component="activity-timeline"] .timeline__all a { color: var(--brand); }

[data-component="activity-timeline"] .timeline__skeleton { display: grid; }
[data-component="activity-timeline"] .timeline__skeleton-row { display: grid; grid-template-columns: var(--size-avatar-sm) minmax(0, 1fr); gap: var(--space-4); min-block-size: calc(var(--space-9) + var(--space-4)); padding-block: var(--space-4); border-block-end: var(--border-width) solid var(--border); }
[data-component="activity-timeline"] .timeline__skeleton-dot { inline-size: var(--size-avatar-sm); block-size: var(--size-avatar-sm); border-radius: var(--radius-round); background: var(--border); }
[data-component="activity-timeline"] .timeline__skeleton-bars { display: grid; gap: var(--space-3); align-content: start; }
[data-component="activity-timeline"] .timeline__skeleton-bar { display: block; block-size: var(--size-skeleton-line); inline-size: var(--size-skeleton-title-w); max-inline-size: 100%; border-radius: var(--radius-bar); background: var(--border); animation: timeline-pulse var(--duration-pulse) var(--ease-standard) infinite alternate; }
[data-component="activity-timeline"] .timeline__skeleton-bar--short { inline-size: var(--size-skeleton-label-w); }
@keyframes timeline-pulse { from { opacity: 1; } to { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { [data-component="activity-timeline"] .timeline__skeleton-bar { animation: none; } }

[data-component="activity-timeline"] .timeline__error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: var(--border-width) solid var(--border);
  border-inline-start: var(--border-width-accent) solid var(--critical);
  border-radius: var(--radius-control);
  background: var(--critical-subtle);
}
[data-component="activity-timeline"] .timeline__error .icon { color: var(--critical); }
[data-component="activity-timeline"] .timeline__error p { margin: 0; flex: 1 1 var(--size-popover-sm); font: var(--type-body); }

/* Kitchen sink sample widths (the demo only). */
.timeline-demo { inline-size: 100%; max-inline-size: var(--size-form-max); min-inline-size: 0; }
.timeline-demo[data-width="wide"] { max-inline-size: none; }
.timeline-demo[data-width="rail"] { max-inline-size: var(--size-context-rail); }