@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
/* A band entry renders a StackedListItem band group row with a StatusDot, so the styles they need
 * travel with it. */
@import '/assets/3532844afb5cdb4f97e46b81fa68378860412319c16ff5d89b7cc4949549fec7/components/stacked-list-item/stacked-list-item.css';
@import '/assets/3532844afb5cdb4f97e46b81fa68378860412319c16ff5d89b7cc4949549fec7/components/status-dot/status-dot.css';
@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 three spacings the connector is measured from: how far a marker sits below the top of its
       entry, how far apart two entries are, and the gap between the marker column and the content.
       The rows variant sets them from its two public properties. */
    --_cinder-timeline-marker-offset: var(--cinder-space-1);
    --_cinder-timeline-item-gap: var(--cinder-space-4);
    --_cinder-timeline-column-gap: var(--cinder-space-3);
    /* 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-timeline-marker-offset) + 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-timeline-item-gap);
  }

  .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-timeline-column-gap);
    position: relative;
  }

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

  /* 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 (the item gap) below the event box, plus
       - the marker's own margin-top (the marker offset) 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-timeline-item-gap) + var(--_cinder-timeline-marker-offset) +
            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-timeline-marker-offset);
    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-text);
  }

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

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

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

  /* Pending is a hollow neutral ring: nothing has happened yet. It is the colour a status dot
     * uses for Waiting and Scheduled, and it stays hollow so it never reads as a green or blue
     * event. The fill is transparent, not the surface, so it follows whatever sits behind it. */
  .cinder-timeline-item[data-cinder-tone='pending'] .cinder-timeline-item__marker {
    border-color: var(--cinder-border-contrast);
    background: transparent;
  }

  .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;
  }

  /* ----------------------------------------
 * Controls at the end of an event's row
 *
 * The third grid column holds whatever the entry's `actions` draw (a "Skip" button). It is
 * centred on the row and never shrinks, so a long title gives up room before the button does.
 * ---------------------------------------- */

  .cinder-timeline-item__event[data-cinder-has-actions] {
    grid-template-columns: var(--_cinder-timeline-rail-size) minmax(0, 1fr) auto;
    align-items: center;
  }

  .cinder-timeline-item__actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--cinder-space-2);
  }

  /* ----------------------------------------
 * Rows variant: the rail with nothing dated on it
 *
 * The marker column and the connector are the rail's, but an entry draws only its marker and its
 * `children`, so a consumer lays out the row itself (the tool calls of a chat turn). The marker has
 * no ring: whatever the `marker` snippet draws (a dot, a glyph, a spinner) sits on the line. A row
 * is about 1.625rem tall, so the marker sits 0.375rem down and entries are 0.125rem apart. A
 * consumer whose rows are taller moves the marker with `--cinder-timeline-row-marker-offset` and
 * the entries with `--cinder-timeline-row-gap`, and the connector follows both.
 * ---------------------------------------- */

  .cinder-timeline[data-cinder-variant='rows'] {
    --_cinder-timeline-rail-size: 0.875rem;
    --_cinder-timeline-marker-size: 0.875rem;
    --_cinder-timeline-marker-offset: var(--cinder-timeline-row-marker-offset, 0.375rem);
    --_cinder-timeline-item-gap: var(--cinder-timeline-row-gap, var(--cinder-space-0-5));
    --_cinder-timeline-column-gap: var(--cinder-space-2-5);
  }

  .cinder-timeline[data-cinder-variant='rows'] .cinder-timeline-item__event {
    grid-template-columns: var(--_cinder-timeline-rail-size) minmax(0, 1fr);
  }

  .cinder-timeline[data-cinder-variant='rows'] .cinder-timeline-item__marker {
    border: 0;
    background: transparent;
  }

  .cinder-timeline[data-cinder-variant='rows'] .cinder-timeline-item__content {
    min-inline-size: 0;
  }

  /* ----------------------------------------
 * Now marker and separator
 *
 * Both are full-width rows with no rail marker, so neither takes part in the connector. The Now
 * marker is an accent pill, a rule in the same accent and the time at the right; the separator is
 * a label between two quiet rules.
 * ---------------------------------------- */

  .cinder-timeline-item[data-cinder-kind='now'],
  .cinder-timeline-item[data-cinder-kind='separator'],
  .cinder-timeline-item[data-cinder-kind='band'] {
    padding-block: var(--cinder-space-2);
  }

  /* A run is a status-first row of its own, with its own hairline under it, in a list of its own. */
  .cinder-timeline-item[data-cinder-kind='run'] {
    padding-block: 0;
    border-block-end: 1px solid var(--cinder-border-faint);
  }

  .cinder-timeline-item[data-cinder-kind='run']:last-child {
    border-block-end: 0;
  }

  .cinder-timeline-item__run {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .cinder-timeline-item__duration {
    color: var(--cinder-text-subtle);
    font-size: var(--cinder-text-sm);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* An empty body adds no gap under the header. */
  .cinder-timeline-item__body:empty {
    display: none;
  }

  /* A plain event has no marker: its row starts at the inline start, with the actions after it. */
  .cinder-timeline-item[data-cinder-plain] .cinder-timeline-item__marker {
    display: none;
  }

  .cinder-timeline-item[data-cinder-plain] .cinder-timeline-item__event {
    grid-template-columns: minmax(0, 1fr);
  }

  .cinder-timeline-item[data-cinder-plain] .cinder-timeline-item__event[data-cinder-has-actions] {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .cinder-timeline[data-cinder-variant='list']
    .cinder-timeline-item[data-cinder-tone='warning'][data-cinder-plain]
    .cinder-timeline-item__title {
    color: var(--cinder-status-warning-text);
  }

  /* An occurrence that will not start a run: its time is crossed out and nothing else changes. */
  .cinder-timeline-item__time[data-cinder-struck] {
    text-decoration: line-through;
  }

  /* A band is a stacked-list-item group row in a list of its own, full width and without a rail. */
  .cinder-timeline-item__band {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .cinder-timeline-item__now,
  .cinder-timeline-item__separator {
    display: flex;
    align-items: center;
    gap: var(--cinder-space-3);
    min-inline-size: 0;
  }

  .cinder-timeline-item__now-label {
    flex: none;
    padding: var(--cinder-space-0-5) var(--cinder-space-2);
    border-radius: var(--cinder-radius-full);
    background: var(--cinder-accent-solid);
    color: var(--cinder-accent-contrast);
    font-size: var(--cinder-text-xs);
    font-weight: var(--cinder-font-semibold);
    line-height: 1.25;
  }

  .cinder-timeline-item__rule {
    flex: 1 1 auto;
    min-inline-size: 0;
    block-size: 1px;
    background: var(--cinder-border-faint);
  }

  .cinder-timeline-item__now .cinder-timeline-item__rule {
    block-size: 0.09375rem; /* 1.5px */
    background: var(--cinder-accent-solid);
  }

  .cinder-timeline-item__now .cinder-timeline-item__time {
    flex: none;
  }

  .cinder-timeline-item__separator-label {
    flex: none;
    color: var(--cinder-text-subtle);
    font-size: var(--cinder-text-xs);
    font-weight: var(--cinder-font-normal);
  }

  /* ----------------------------------------
 * List variant: compact rows
 *
 * The same entries as quiet rows: no connector, a hairline between rows, the time first and large,
 * and the title beside it small and muted ("Thu Nov 5, 3:00 AM  in 3 days"). The marker shrinks to
 * an 8px ring that centres on the row, and a row is at least 40px (44px under a coarse pointer).
 * ---------------------------------------- */

  .cinder-timeline[data-cinder-variant='list'] {
    --_cinder-timeline-rail-size: 0.5rem;
    --_cinder-timeline-marker-size: 0.5rem;
  }

  .cinder-timeline[data-cinder-variant='list'] .cinder-timeline-item {
    padding-block-end: 0;
  }

  .cinder-timeline[data-cinder-variant='list'] .cinder-timeline-item__event {
    align-items: center;
    min-block-size: 2.5rem;
    padding-block: var(--cinder-space-1);
    border-block-end: 1px solid var(--cinder-border-faint);
  }

  .cinder-timeline[data-cinder-variant='list']
    .cinder-timeline-item:last-child
    .cinder-timeline-item__event {
    border-block-end: 0;
  }

  .cinder-timeline[data-cinder-variant='list'] .cinder-timeline-item__event::before {
    display: none;
  }

  .cinder-timeline[data-cinder-variant='list'] .cinder-timeline-item__marker {
    margin-top: 0;
    border-width: 0.09375rem; /* 1.5px */
  }

  .cinder-timeline[data-cinder-variant='list'] .cinder-timeline-item__header {
    flex-wrap: nowrap;
    align-items: baseline;
    gap: var(--cinder-space-3);
  }

  .cinder-timeline[data-cinder-variant='list']
    .cinder-timeline-item__header
    .cinder-timeline-item__time {
    color: var(--cinder-text-default);
    font-size: var(--cinder-text-base);
    font-weight: var(--cinder-font-semibold);
  }

  .cinder-timeline[data-cinder-variant='list'] .cinder-timeline-item__title {
    color: var(--cinder-text-subtle);
    font-weight: var(--cinder-font-normal);
  }

  @media (pointer: coarse) {
    .cinder-timeline[data-cinder-variant='list'] .cinder-timeline-item__event {
      min-block-size: var(--cinder-touch-target-min);
    }
  }
}