/* ITEMS ON A TIME AXIS — each entry the kit's one row (`row.css`): face or mark leads, the name (else who
   and when) titles it, stage and figure close its line, the ⋯ trails, and words, evidence and detail are
   its body; the prose column keeps both edges and every gap is the row's. The rail is the kit's `Stepper`
   — a day a vertical run, its head the first rung, each entry a `Step` centred on its lead. This sheet
   holds the list's rhythm and the title and body pieces. */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  /* Each entry carries its own air (`row.css`), so a gap would space rows too far. */
  .lotics-timeline {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 0;
  }

  /* Grouped, the peers rung falls between days, entries keeping their own inside. */
  .lotics-timeline[data-grouped] {
    gap: var(--lotics-space-24);
  }

  /* Off the entries by the peer rung; a grouped list's own gap already stands between them. */
  .lotics-timeline__compose {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }

  .lotics-timeline__compose[data-at="start"]:not([data-grouped]) {
    margin-block-end: var(--lotics-space-24);
  }

  .lotics-timeline__compose[data-at="end"]:not([data-grouped]) {
    margin-block-start: var(--lotics-space-24);
  }

  .lotics-timeline__day {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 0;
  }

  /* The kit's row, at least a control tall, so heads with and without a verb align and the node centres
     alike. */
  .lotics-timeline__dayhead {
    min-height: var(--lotics-register-row);
  }

  /* A leadless entry floors at the face's band (rung plus air), so it centres like a signed one and the
     rail's node lands on it. */
  .lotics-timeline__entry[data-unsigned] {
    min-height: calc(var(--lotics-mark-md) + var(--lotics-row-inset) * 2);
  }

  /* The `Stepper` lays itself out; this only fills the width. */
  .lotics-timeline__rail {
    min-width: 0;
  }

  /* The face's size on a low-alpha wash of the glyph's ink, so notices and comments lead from one column. */
  .lotics-timeline__glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--lotics-mark-md);
    height: var(--lotics-mark-md);
    border-radius: var(--lotics-radius-full);
    background-color: color-mix(
      in srgb,
      var(--lotics-timeline-glyph-color, var(--lotics-ink-default)) 10%,
      transparent
    );
  }

  /* Who and when on one line, at least a face tall; the standing follows the author rather than reserving
     a column. On a narrow title the clock and standing fold under the name whole — a cut clock is a
     different time. */
  .lotics-timeline__title {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--lotics-space-8);
    min-height: var(--lotics-mark-md);
  }

  .lotics-timeline__name,
  .lotics-timeline__author,
  .lotics-timeline__when {
    min-width: 0;
  }

  /* The standing is drawn; squashing clips it. */
  .lotics-timeline__answer {
    flex-shrink: 0;
  }

  /* A body whose rungs drew nothing leaves an unforeseeable empty box, so the box — and a body with
     nothing else — goes, not spending the lead-in. */
  .lotics-timeline__content:empty,
  .lotics-timeline__body:not(:has(> :not(.lotics-timeline__content:empty))) {
    display: none;
  }

  /* The preview: an opening list clamps the words box to three lines (no measuring, and a consumer
     renderer clamps alike). An `EntryBody` moves the clamp to its words rung so players and facts stay
     whole; the sheet finds it however deeply wrapped. */
  .lotics-timeline__content[data-opens]:not(:has(.lotics-timeline__rich)),
  .lotics-timeline__words[data-opens] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }

  /* A block, the blank line one line of leading. */
  .lotics-timeline__paragraph {
    display: block;
  }

  .lotics-timeline__paragraph + .lotics-timeline__paragraph {
    margin-block-start: var(--lotics-leading-sm);
  }

  /* The caller's count, spanning every block so a four-paragraph quote cuts at a line. */
  .lotics-timeline__words[data-clamped] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--lotics-timeline-lines);
    line-clamp: var(--lotics-timeline-lines);
    overflow: hidden;
  }

  /* Rungs one under another in the compound's sorted order. */
  .lotics-timeline__rich {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--lotics-space-8);
    min-width: 0;
  }

  .lotics-timeline__words {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }

  /* Each fills the prose column, stating its own height. */
  .lotics-timeline__evidence {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--lotics-space-8);
    min-width: 0;
  }

  .lotics-timeline__detail {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--lotics-space-8);
    min-width: 0;
  }

  .lotics-timeline__form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--lotics-space-8);
    min-width: 0;
  }

  .lotics-timeline__form-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--lotics-space-8);
  }

  .lotics-timeline__files {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lotics-space-8);
  }

  .lotics-timeline__file {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-6);
    min-width: 0;
  }
}