@layer components {
  .timeline-page__chain-id {
    display: inline-block;
    max-width: min(22rem, 60vw);
    padding: 0.3rem 0.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-canvas-raised);
    color: var(--color-ink-medium);
  }

  .timeline-page__notice {
    margin-top: 0;
  }

  .run-summary-bar.timeline-summary {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding-inline: 0;
  }

  .timeline-summary a.run-summary-bar__value {
    color: var(--color-link);
    text-decoration: none;
  }

  .timeline-summary a.run-summary-bar__value:hover {
    text-decoration: underline;
  }

  .timeline-summary a.timeline-summary__failed {
    color: var(--color-negative);
  }

  .timeline-card {
    padding: 0;
    overflow: hidden;
    container-type: inline-size;
  }

  .timeline {
    --indent: 1.25rem;
    --elapsed-width: 5.5rem;
    --bar-width: clamp(8rem, 24%, 18rem);
    --row-padding: var(--space-2);
    --dot-size: 0.625rem;
  }

  .timeline__header,
  .timeline-entry {
    display: grid;
    grid-template-columns: var(--elapsed-width) minmax(0, 1fr) var(--bar-width);
    column-gap: var(--space-4);
    padding-inline: var(--space-card);
  }

  .timeline__header {
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-canvas-inset);
    font-family: var(--font-mono);
    font-size: var(--text-label-mono);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-ink-medium);
  }

  .timeline__header > :first-child {
    text-align: right;
  }

  .timeline__scale {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    text-transform: none;
    letter-spacing: 0;
  }

  .timeline__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .timeline-entry {
    align-items: stretch;
    border-top: 1px solid var(--color-ink-lightest);
    scroll-margin-top: 5rem;
  }

  .timeline > .timeline__list > .timeline__item:first-child > .timeline-entry {
    border-top: 0;
  }

  .timeline-entry:hover {
    background: var(--color-muted-light);
  }

  .timeline-entry--failed,
  .timeline-entry--failed:hover {
    background: var(--color-negative-light);
  }

  .timeline-entry--focus,
  .timeline-entry--focus:hover,
  .timeline-entry:target {
    background: var(--color-selected);
  }

  .timeline-entry__elapsed {
    padding-block: var(--row-padding);
    padding-top: calc(var(--row-padding) + 0.1rem);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-variant-numeric: tabular-nums;
    color: var(--color-ink-medium);
    text-align: right;
    white-space: nowrap;
  }

  /* One faint guide per level makes siblings line up, like indentation
     guides in an editor. */
  .timeline-entry__main {
    display: flex;
    gap: var(--space-3);
    min-width: 0;
    padding-block: var(--row-padding);
    padding-left: calc(var(--depth) * var(--indent));
    background-image: repeating-linear-gradient(
      to right,
      transparent 0 calc(var(--dot-size) / 2 - 0.5px),
      var(--color-border) calc(var(--dot-size) / 2 - 0.5px) calc(var(--dot-size) / 2 + 0.5px),
      transparent calc(var(--dot-size) / 2 + 0.5px) var(--indent)
    );
    background-size: calc(var(--depth) * var(--indent)) 100%;
    background-repeat: no-repeat;
  }

  .timeline-entry__dot {
    flex: none;
    width: var(--dot-size);
    height: var(--dot-size);
    margin-top: 0.3rem;
    border-radius: 999px;
    background: var(--color-positive);
    box-shadow: 0 0 0 3px var(--color-canvas-raised);
  }

  .timeline-entry:has(.badge--pending) .timeline-entry__dot,
  .timeline-entry:has(.badge--waiting) .timeline-entry__dot,
  .timeline-entry--attention .timeline-entry__dot {
    background: var(--color-warning);
  }

  .timeline-entry:has(.badge--running) .timeline-entry__dot {
    background: var(--color-info);
  }

  .timeline-entry:has(.badge--skipped) .timeline-entry__dot {
    background: var(--color-ink-light);
  }

  .timeline-entry--failed .timeline-entry__dot {
    background: var(--color-negative);
  }

  .timeline-entry--request .timeline-entry__dot,
  .timeline-entry--external .timeline-entry__dot,
  .timeline-entry--expired .timeline-entry__dot {
    background: var(--color-canvas-raised);
    border: 2px solid var(--color-ink-light);
  }

  .timeline-entry--expired .timeline-entry__dot {
    border-style: dashed;
  }

  .timeline-entry__body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
  }

  .timeline-entry__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
    min-width: 0;
  }

  .timeline-entry__kind {
    font-family: var(--font-mono);
    font-size: var(--text-label-mono);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-ink-medium);
    white-space: nowrap;
  }

  .timeline-entry__title {
    min-width: 0;
    font-weight: 600;
    color: var(--color-ink);
    overflow-wrap: anywhere;
  }

  a.timeline-entry__title {
    text-decoration: none;
  }

  a.timeline-entry__title:hover {
    color: var(--color-link);
    text-decoration: underline;
  }

  .timeline-entry--expired .timeline-entry__title,
  .timeline-entry--external .timeline-entry__title {
    font-weight: 500;
    color: var(--color-ink-medium);
  }

  .timeline-entry__head .badge {
    margin-left: auto;
  }

  .timeline-entry__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-2);
    margin: 0;
    font-size: var(--text-small);
    color: var(--color-ink-medium);
    overflow-wrap: anywhere;
  }

  .timeline-entry__separator {
    color: var(--color-ink-light);
  }

  .timeline-entry__error {
    min-width: 0;
    font-size: var(--text-small);
  }

  .timeline-entry__error summary {
    overflow: hidden;
    color: var(--color-negative);
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }

  .timeline-entry__error[open] summary {
    white-space: normal;
  }

  .timeline-entry__error .code-block {
    margin-top: var(--space-2);
  }

  .timeline-entry__error pre {
    max-height: 16rem;
    margin: 0;
    overflow: auto;
    white-space: pre-wrap;
  }

  .timeline-entry__bar {
    position: relative;
    min-height: 1.25rem;
    margin-block: var(--row-padding);
    background: linear-gradient(var(--color-ink-lightest), var(--color-ink-lightest)) 0 0.6rem / 100% 1px no-repeat;
  }

  .timeline-entry__track {
    --bar-color: var(--color-ink-light);
    position: absolute;
    inset: 0;
  }

  .timeline-entry--bucket-change .timeline-entry__track {
    --bar-color: var(--color-trigger-icon);
  }

  .timeline-entry--router-delivery .timeline-entry__track,
  .timeline-entry--router-buffer-window .timeline-entry__track {
    --bar-color: var(--color-logic-icon);
  }

  .timeline-entry--workflow-run .timeline-entry__track,
  .timeline-entry--step-run .timeline-entry__track {
    --bar-color: var(--color-step-icon);
  }

  .timeline-entry--action-run .timeline-entry__track {
    --bar-color: var(--color-action-icon);
  }

  .timeline-entry--failed .timeline-entry__track {
    --bar-color: var(--color-negative);
  }

  .timeline-entry__span {
    position: absolute;
    top: 0.35rem;
    left: min(var(--start), calc(100% - 3px));
    width: max(var(--width), 3px);
    height: 0.5rem;
    border-radius: 999px;
    background: var(--bar-color);
  }

  .timeline-entry__wait {
    position: absolute;
    top: calc(0.6rem - 0.5px);
    left: calc(var(--start) - var(--wait, 0%));
    width: var(--wait, 0%);
    border-top: 1px dashed var(--bar-color);
    opacity: 0.7;
  }

  .timeline__fold {
    border-top: 1px solid var(--color-ink-lightest);
  }

  .timeline__fold-summary {
    padding: var(--space-2) var(--space-card);
    padding-left: calc(var(--space-card) + var(--elapsed-width) + var(--space-4) + var(--depth) * var(--indent) + var(--dot-size) + var(--space-3));
    color: var(--color-link);
    font-size: var(--text-small);
    font-weight: 500;
    cursor: pointer;
  }

  .timeline__fold-summary:hover {
    text-decoration: underline;
  }

  .timeline__fold[open] > .timeline__fold-summary {
    color: var(--color-ink-medium);
  }

  .documents-timeline-workspace {
    display: grid;
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
  }

  .documents-timeline-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 0;
    overflow: hidden;
    container-type: inline-size;
  }

  .documents-timeline-panel > .page-header {
    padding: var(--space-card) var(--space-card) 0;
  }

  .documents-timeline-panel > .empty-state {
    padding: var(--space-card);
  }

  @container (max-width: 50rem) {
    .timeline {
      --indent: 0.875rem;
      --elapsed-width: 4.75rem;
    }

    .timeline__header,
    .timeline-entry {
      grid-template-columns: var(--elapsed-width) minmax(0, 1fr);
      column-gap: var(--space-3);
    }

    .timeline__scale,
    .timeline-entry__bar {
      display: none;
    }

    .timeline__fold-summary {
      padding-left: calc(var(--space-card) + var(--elapsed-width) + var(--space-3) + var(--depth) * var(--indent) + var(--dot-size) + var(--space-3));
    }
  }

  @container (max-width: 30rem) {
    .timeline {
      --indent: 0.625rem;
    }

    .timeline__header {
      display: none;
    }

    .timeline-entry {
      grid-template-columns: minmax(0, 1fr);
      padding-inline: var(--space-4);
    }

    .timeline-entry__elapsed {
      grid-row: 2;
      padding-top: 0;
      padding-left: calc(var(--depth) * var(--indent) + var(--dot-size) + var(--space-3));
      text-align: left;
      background: inherit;
    }

    .timeline-entry__main {
      padding-bottom: 0;
    }

    .timeline__fold-summary {
      padding-left: calc(var(--space-4) + var(--depth) * var(--indent) + var(--dot-size) + var(--space-3));
    }
  }

  @media (max-width: 64rem) {
    .run-summary-bar.timeline-summary {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .documents-timeline-workspace {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (max-width: 36rem) {
    .run-summary-bar.timeline-summary {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}