/*
 * THE GUIDED RUN. A clock over the sequence, the sequence beside ONE step, and
 * the two ways through it closing the foot.
 *
 * A borderless block, not a card — the same reason the wizard is one: the step
 * IS the screen here, and an edge drawn around it would read as one thing to
 * answer inside a page that holds others.
 *
 * The rail and the step are ONE wrapping row rather than a container query. The
 * step's grow is three orders above the rail's, so at width the rail settles on
 * its basis and the step takes the rest; below the two bases the row wraps and
 * the rail stands full-width above the work. A query would have to be answered
 * twice — here and in whatever box the app puts the run in — and the sequence is
 * legible at both widths either way.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-guided-run {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--lotics-space-16);
    min-width: 0;
  }

  /* The clock band: how far through, and how long in. Baseline-aligned, because
     the meter's caption and the elapsed reading are one sentence read across. */
  .lotics-guided-run__head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--lotics-space-12);
    min-width: 0;
  }

  /* BOUNDED, so the position stays beside the track it reads. Left to grow, the
     bar ran the whole desk and put "3 of 5" an arm's length from the fill it is
     the caption for, with the clock at the far edge — three readings of the same
     run, spread so wide that none of them was beside another. */
  .lotics-guided-run__meter {
    flex: 0 1 320px;
    min-width: 0;
  }

  .lotics-guided-run__clock {
    flex: 0 0 auto;
  }

  .lotics-guided-run__body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--lotics-space-24);
    min-width: 0;
  }

  .lotics-guided-run__rail {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 200px;
    min-width: 0;
  }

  .lotics-guided-run__step {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 999 1 320px;
    gap: var(--lotics-space-16);
    min-width: 0;
  }

  /* The step's name over its instruction, with the door onto its record on the
     row's own right edge — the record's place on every other surface in the kit. */
  .lotics-guided-run__subject {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--lotics-space-12);
    min-width: 0;
  }

  .lotics-guided-run__naming {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 auto;
    gap: var(--lotics-space-4);
    min-width: 0;
  }

  /* The picture the step is worked against — capped, because a portrait
     photograph at the column's full width pushes the capture below the fold,
     which is the one control the step exists for. */
  .lotics-guided-run__media {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 420px;
    min-width: 0;
  }

  /* CAPPED at the picture's own rung. A run's step column is as wide as the
     screen it is on, and a figure typed into a field a thousand pixels across is
     a control the reader has to hunt the caret in — the ENTRY's width is about
     what it holds, never about the room around it. */
  .lotics-guided-run__capture,
  .lotics-guided-run__gate {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--lotics-space-8);
    max-width: 420px;
    min-width: 0;
  }

  /* Back on the left, the step's own verbs and the forward press on the right —
     the kit's one action-bar order, so a reader's exit never moves. */
  .lotics-guided-run__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--lotics-space-8);
    min-width: 0;
  }

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