/*
 * The run's own rhythm, on top of the stepper geometry it borrows. A group
 * heading takes MORE air above it than rows give each other and less below: the
 * name and its first row are one block.
 *
 * A title row is BASELINE-aligned, never centred: the title is `sm` and its meta
 * `xs`, and two sizes centred in one row share no baseline.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  /* The run's own box states the column it gives the caller's rows — the promise
     belongs on the class the caller is holding, not on `.lotics-stepper`. */
  .lotics-checklist {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }

  .lotics-checklist__group {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    /* 10 — the gutter between a heading and its disclosure. */
    gap: var(--lotics-space-10);
    min-width: 0;
    padding-bottom: var(--lotics-space-4);
  }

  /* 18 — the air that makes a name a heading rather than the last row's caption. */
  .lotics-checklist__group:not([data-first]) {
    padding-top: var(--lotics-space-16);
  }

  /* A closed phase needs no air beneath it: the space belongs to the rows it is
     heading. */
  .lotics-checklist__group[data-collapsible]:not([data-open]) {
    padding-bottom: 0;
  }

  .lotics-checklist__phase {
    min-width: 0;
    font-family: var(--font-sans);
    font-size: var(--lotics-text-sm);
    line-height: var(--lotics-leading-sm);
    letter-spacing: var(--lotics-tracking-sm);
    font-weight: var(--lotics-weight-medium);
    font-feature-settings: var(--lotics-font-features);
    color: var(--lotics-ink-default);
  }

  .lotics-checklist__toggle,
  .lotics-checklist__action {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    flex-shrink: 0;
    border: 0 solid transparent;
    border-radius: calc(var(--lotics-radius-control) - var(--lotics-space-2));
    background: transparent;
    background-image: none;
    appearance: none;
    color: var(--lotics-ink-default);
    font-family: var(--font-sans);
    font-size: var(--lotics-text-xs);
    line-height: var(--lotics-leading-xs);
    letter-spacing: var(--lotics-tracking-xs);
    font-feature-settings: var(--lotics-font-features);
    cursor: pointer;
    touch-action: manipulation;
  }

  .lotics-checklist__toggle:focus-visible,
  .lotics-checklist__action:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: 0;
  }

  .lotics-checklist__item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* 6 — between a row's title line and its own detail. */
    gap: var(--lotics-space-6);
    min-width: 0;
  }

  .lotics-checklist__head {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    /* WRAPS, so a long title drops its stamp to the next line rather than
       crushing it. */
    gap: var(--lotics-space-10);
    min-width: 0;
  }

  .lotics-checklist__title {
    min-width: 0;
    font-family: var(--font-sans);
    font-size: var(--lotics-text-sm);
    line-height: var(--lotics-leading-sm);
    letter-spacing: var(--lotics-tracking-sm);
    font-weight: var(--lotics-weight-regular);
    font-feature-settings: var(--lotics-font-features);
    color: var(--lotics-ink-default);
  }

  /* The row the reader is waiting on carries the weight, so a run full of ticks
     still says which one is owed. */
  .lotics-checklist__title[data-current] {
    font-weight: var(--lotics-weight-medium);
  }

  /* A settled row steps back — but a FAIL never does: muting reads as "settled,
     move on". */
  .lotics-checklist__title[data-settled] {
    color: var(--lotics-ink-muted);
  }

  .lotics-checklist__title[data-verdict="fail"] {
    color: var(--lotics-ink-danger);
  }

  /* THE ROW'S OWN VALUE, at the row's own edge, so a run of readings has a
     shared edge. It opens the right-hand group: the title gives way, the value
     does not. */
  .lotics-checklist__trailing {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex: 0 0 auto;
    margin-left: auto;
    min-width: 0;
  }

  .lotics-checklist__meta {
    min-width: 0;
    font-family: var(--font-sans);
    font-size: var(--lotics-text-xs);
    line-height: var(--lotics-leading-xs);
    letter-spacing: var(--lotics-tracking-xs);
    font-weight: var(--lotics-weight-regular);
    font-feature-settings: var(--lotics-font-features);
    color: var(--lotics-ink-muted);
  }

  .lotics-checklist__menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* The title beside it gives way; the menu's target does not shrink. */
    flex-shrink: 0;
    margin-left: auto;
  }

  /* TWO AUTO MARGINS SPLIT THE SLACK BETWEEN THEM, which would leave the value
     stranded mid-row: where the row states one, the value opens the group and
     the menu takes none. */
  .lotics-checklist__head:has(.lotics-checklist__trailing) .lotics-checklist__menu {
    margin-left: 0;
  }

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

  .lotics-checklist__note {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: var(--lotics-space-6);
    min-width: 0;
  }

  .lotics-checklist__text {
    min-width: 0;
    font-family: var(--font-sans);
    font-size: var(--lotics-text-xs);
    line-height: var(--lotics-leading-xs);
    letter-spacing: var(--lotics-tracking-xs);
    font-weight: var(--lotics-weight-regular);
    font-feature-settings: var(--lotics-font-features);
    color: var(--lotics-ink-muted);
  }

  .lotics-checklist__note[data-tone="warning"] .lotics-checklist__text {
    color: var(--lotics-ink-warning);
  }

  .lotics-checklist__note[data-tone="danger"] .lotics-checklist__text {
    color: var(--lotics-ink-danger);
  }

  .lotics-checklist__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--lotics-space-8);
    min-width: 0;
    padding-top: var(--lotics-space-2);
  }
}