@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@layer cinder.components {
  /* ========================================
 * TIMELINE
 * Timestamp-first event rail with optional grouping.
 * ======================================== */

  .cinder-timeline {
    --_cinder-timeline-rail-size: 1.5rem;
    --_cinder-timeline-marker-size: 0.875rem;
    /* The marker is an inline-flex box of --_cinder-timeline-marker-size, laid out at
       the inline-start of the rail grid cell, with a margin-top of --cinder-space-1.
       Its center therefore sits at half the marker size from the cell origin (X) and
       at margin-top + half the marker size from the item's top (Y). The connector is
       positioned from these.

       This holds for custom markers because the marker box is FIXED-SIZE: the
       `.cinder-timeline-item__marker` rule pins width/height to this variable and
       centers content with inline-flex, so a custom `marker` snippet FILLS the box
       (a glyph, an icon) rather than resizing it. The connector is therefore always
       anchored to a known marker center, not to content-dependent geometry. A
       consumer who needs a larger marker overrides --_cinder-timeline-marker-size,
       which moves the box and the connector together. */
    --_cinder-timeline-marker-center-x: calc(var(--_cinder-timeline-marker-size) / 2);
    --_cinder-timeline-marker-center-y: calc(
      var(--cinder-space-1) + var(--_cinder-timeline-marker-size) / 2
    );

    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .cinder-timeline[data-cinder-orientation='horizontal'] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(12rem, 1fr);
    gap: var(--cinder-space-4);
    overflow-x: auto;
    padding-block-end: var(--cinder-space-2);
  }

  .cinder-timeline-item {
    position: relative;
    padding-bottom: var(--cinder-space-4);
  }

  .cinder-timeline-item:last-child {
    padding-bottom: 0;
  }

  .cinder-timeline-item__event {
    display: grid;
    grid-template-columns: var(--_cinder-timeline-rail-size) 1fr;
    gap: var(--cinder-space-3);
    position: relative;
  }

  .cinder-timeline__group-header {
    margin: 0 0 var(--cinder-space-2)
      calc(var(--_cinder-timeline-rail-size) + var(--cinder-space-3));
    color: var(--cinder-text-muted);
    font-size: var(--cinder-text-xs);
    font-weight: var(--cinder-font-semibold);
    letter-spacing: 0;
    text-transform: uppercase;
  }

  /* Connecting line between items. It is anchored to the event row, not the
     list item, so optional group headers above the event cannot offset it away
     from the marker. The line spans THIS marker's center to the NEXT marker's
     center so it terminates cleanly at each dot with no stub gap.

     The bottom offset is measured from the event box's bottom edge down to the
     next item's marker center. That distance is three tokens, not two:
       - the item's padding-bottom (space-4) below the event box, plus
       - the marker's own margin-top (space-1) inside the next event grid, plus
       - the next marker's center-y within its event box (marker-center-y).
     The earlier formula omitted the marker margin-top (space-1), so every
     segment fell exactly space-1 short of the next dot. Verified in the browser:
     with this offset the line's painted endpoints land on the marker centers
     (a 63px inter-marker rhythm at the default token scale). */
  .cinder-timeline-item__event::before {
    content: '';
    position: absolute;
    left: var(--_cinder-timeline-marker-center-x);
    top: var(--_cinder-timeline-marker-center-y);
    bottom: calc(
      -1 * (var(--cinder-space-4) + var(--cinder-space-1) + var(--_cinder-timeline-marker-center-y))
    );
    width: 1px;
    background: var(--cinder-border-muted);
  }

  .cinder-timeline-item[data-cinder-connector-after='hidden'] .cinder-timeline-item__event::before {
    display: none;
  }

  .cinder-timeline-item__marker {
    position: relative;
    z-index: 1;
    width: var(--_cinder-timeline-marker-size);
    height: var(--_cinder-timeline-marker-size);
    margin-top: var(--cinder-space-1);
    border-radius: var(--cinder-radius-full);
    background: var(--cinder-surface-raised);
    border: 2px solid currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .cinder-timeline-item[data-cinder-tone='info'] .cinder-timeline-item__marker {
    color: var(--cinder-status-info-solid);
  }

  .cinder-timeline-item[data-cinder-tone='success'] .cinder-timeline-item__marker {
    color: var(--cinder-status-success-solid);
  }

  .cinder-timeline-item[data-cinder-tone='warning'] .cinder-timeline-item__marker {
    color: var(--cinder-status-warning-solid);
  }

  .cinder-timeline-item[data-cinder-tone='error'] .cinder-timeline-item__marker {
    color: var(--cinder-status-danger-solid);
  }

  .cinder-timeline-item__header {
    display: flex;
    align-items: baseline;
    gap: var(--cinder-space-2);
    flex-wrap: wrap;
  }

  .cinder-timeline-item__title {
    font-size: var(--cinder-text-sm);
    font-weight: var(--cinder-font-medium);
    color: var(--cinder-text-default);
  }

  .cinder-timeline-item__time {
    font-size: var(--cinder-text-xs);
    color: var(--cinder-text-muted);
    font-variant-numeric: tabular-nums;
  }

  .cinder-timeline-item__body {
    margin-top: var(--cinder-space-1);
    font-size: var(--cinder-text-sm);
    color: var(--cinder-text-muted);
  }

  .cinder-timeline[data-cinder-orientation='horizontal'] .cinder-timeline-item {
    min-inline-size: 12rem;
    padding-block-end: 0;
    padding-inline-end: var(--cinder-space-4);
  }

  .cinder-timeline[data-cinder-orientation='horizontal'] .cinder-timeline-item__event {
    grid-template-columns: 1fr;
    grid-template-rows: var(--_cinder-timeline-rail-size) auto;
    gap: var(--cinder-space-2);
  }

  .cinder-timeline[data-cinder-orientation='horizontal'] .cinder-timeline__group-header {
    margin: 0 0 var(--cinder-space-2);
  }

  .cinder-timeline[data-cinder-orientation='horizontal'] .cinder-timeline-item__event::before {
    left: calc(var(--_cinder-timeline-marker-size) / 2);
    right: calc(-1 * var(--cinder-space-4));
    top: calc(var(--_cinder-timeline-marker-size) / 2 + var(--cinder-space-1));
    bottom: auto;
    width: auto;
    height: 1px;
  }
}