@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@layer cinder.components {
  /* ========================================
 * STEPS
 * Wizard step indicator with horizontal and vertical orientations.
 * Uses aria-current="step" for the active step; completed steps render
 * a checkmark icon. No role="progressbar" — steps are navigation, not metering.
 * ======================================== */

  .cinder-steps {
    display: block;
    container-type: inline-size;
    container-name: cinder-steps;
    /* Marker diameter — referenced by the horizontal connector's `top` offset so
     both values stay in sync if the size ever changes. */
    --_marker-size: 1.5rem;
  }

  /* ----------------------------------------
 * List
 * ---------------------------------------- */

  .cinder-steps__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
  }

  .cinder-steps[data-cinder-orientation='horizontal'] .cinder-steps__list {
    flex-direction: row;
    align-items: flex-start;
  }

  .cinder-steps[data-cinder-orientation='vertical'] .cinder-steps__list {
    flex-direction: column;
    align-items: stretch;
  }

  /* ----------------------------------------
 * Item — horizontal layout
 * Each step is a centered column: marker on top, label/description centered
 * directly beneath it so the three read as one unit. The connector is painted
 * as a line running between this marker's center and the next marker's center
 * (absolutely positioned, behind the markers).
 * ---------------------------------------- */

  .cinder-steps[data-cinder-orientation='horizontal'] .cinder-steps__item {
    flex: 1 1 0;
    /* Equal-width columns even when labels differ in length, so every marker
     sits at the horizontal center of its share of the track. */
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .cinder-steps[data-cinder-orientation='horizontal'] .cinder-steps__marker {
    /* Lift the marker above BOTH the connector line (z-index: 0) that passes
       behind it AND the focusable body (z-index: 1) whose box overlaps the
       marker via a negative block-start margin. The body must out-rank the
       connector so its focus ring paints above the line, but it must stay
       below the marker: the body paints LATER in flow and its :hover background
       is opaque (--cinder-surface-hover), so at equal z-index it would occlude
       the marker on hover. z-index: 2 keeps the marker on top in every state. */
    position: relative;
    /* cinder-z-index-local: marker paints above the overlapping body and connector. */
    z-index: 2;
  }

  .cinder-steps[data-cinder-orientation='horizontal'] .cinder-steps__connector {
    position: absolute;
    /* Vertically centered on the marker. Uses --_marker-size so this offset
     stays in sync if the marker diameter is ever changed. */
    top: calc(var(--_marker-size) / 2);
    height: 1px;
    /* Start at this marker's center (50%) and run to the next marker's center.
     This geometry is correct only when every flex item shares the same computed
     width (flex: 1 1 0 with no gap or min-width overrides). If variable-width
     steps are ever needed, revisit this calculation.
     Logical props keep the direction correct under RTL. */
    inset-inline-start: 50%;
    width: 100%;
    z-index: 0;
  }

  .cinder-steps[data-cinder-orientation='horizontal'] .cinder-steps__body {
    text-align: center;
    align-items: center;
    /* Keep long labels from colliding with adjacent steps; they wrap instead. */
    max-width: 100%;
  }

  /* Focus-state geometry for the interactive body in the WIDE horizontal layout.
   * The base reset stretches the focusable <a>/<button> to `inline-size: 100%`,
   * so its :focus-visible ring boxes the entire equal-width column around only
   * the centered label/description — a wide pill with the marker floating
   * detached above it and the connector cutting an empty band. Two coordinated
   * geometry changes make the ring frame the marker + label + description as one
   * centered step unit, with zero net content movement:
   *
   *   1. Shrink the focusable box to its centered content instead of the full
   *      column (`inline-size: auto; align-self: center`), so the ring is a
   *      content-width pill directly beneath the marker rather than a strip.
   *   2. Capture the marker into the box's vertical reach. The marker must stay a
   *      non-interactive sibling ABOVE the body in flow (steps.test.ts asserts
   *      `anchor.contains(marker) === false`), so instead of nesting it we raise
   *      the box's top edge up to the marker's top with a negative block-start
   *      margin, and add an equal block-start padding so the label/description
   *      stay exactly where they were. The body takes `z-index: 1` so its focus
   *      ring paints above the connector, while the marker takes `z-index: 2` so
   *      it stays above the body's overlapping box even when the body's :hover
   *      background is opaque. Net: the ring encloses marker + body as one unit,
   *      the connector (pinned to the marker center) now sits inside the ring's
   *      vertical span, and the visible content y/x position is invariant.
   *
   * The negative margin equals the marker diameter (the in-flow distance from the
   * box's current top to the marker's top); the added padding restores that plus
   * the body's existing space-2 top padding so content does not shift. */
  .cinder-steps[data-cinder-orientation='horizontal']
    .cinder-steps__interactive.cinder-steps__body {
    inline-size: auto;
    max-inline-size: 100%;
    align-self: center;
    margin-block-start: calc(-1 * var(--_marker-size));
    padding-block-start: calc(var(--_marker-size) + var(--cinder-space-2));
    /* Lift the focusable body above the connector line (z-index: 0) so its
       :focus-visible box-shadow ring paints ABOVE the line instead of being
       bisected by it. The marker sits one level higher (z-index: 2) so it is
       never occluded by the body's overlapping box — see the marker rule. */
    position: relative;
    z-index: 1;
  }

  /* ----------------------------------------
 * Item — vertical layout
 * Marker (top of column 1) | Body (column 2, spanning both rows)
 * Connector (below marker in column 1)
 * ---------------------------------------- */

  .cinder-steps[data-cinder-orientation='vertical'] .cinder-steps__item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    gap: 0 var(--cinder-space-3);
  }

  .cinder-steps[data-cinder-orientation='vertical'] .cinder-steps__marker {
    grid-column: 1;
    grid-row: 1;
  }

  .cinder-steps[data-cinder-orientation='vertical'] .cinder-steps__connector {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    width: 1px;
    min-height: var(--cinder-space-6);
    align-self: stretch;
  }

  .cinder-steps[data-cinder-orientation='vertical'] .cinder-steps__body {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding-block-start: 0;
    padding-bottom: var(--cinder-space-4);
  }

  /* ----------------------------------------
 * Marker — the step circle
 * ---------------------------------------- */

  .cinder-steps__marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--_marker-size);
    height: var(--_marker-size);
    border-radius: var(--cinder-radius-full);
    background: var(--cinder-surface-upcoming-marker);
    flex-shrink: 0;
  }

  [data-cinder-state='complete'] .cinder-steps__marker {
    background: var(--cinder-accent-solid);
    color: var(--cinder-accent-contrast);
  }

  [data-cinder-state='current'] .cinder-steps__marker {
    background: var(--cinder-surface);
    /* Ring uses --cinder-ring-color: the bright fill-accent (L 0.72) is only
       ~1.8:1 against the white marker surface, so the current-step indicator
       would be near-invisible in light mode. */
    box-shadow: 0 0 0 var(--cinder-ring-width) var(--cinder-ring-color);
    color: var(--cinder-accent-text);
  }

  @media (forced-colors: active) {
    [data-cinder-state='current'] .cinder-steps__marker {
      outline: var(--cinder-ring-width) solid ButtonText;
      outline-offset: var(--cinder-ring-width);
      box-shadow: none;
    }
  }

  [data-cinder-state='skipped'] .cinder-steps__marker {
    background: var(--cinder-surface);
    box-shadow: inset 0 0 0 1px var(--cinder-border-muted);
    color: var(--cinder-text-muted);
  }

  @media (forced-colors: active) {
    [data-cinder-state='skipped'] .cinder-steps__marker {
      outline: 1px solid ButtonText;
      box-shadow: none;
    }
  }

  [data-cinder-state='upcoming'] .cinder-steps__marker {
    color: var(--cinder-text-muted);
  }

  /* ----------------------------------------
 * Check icon and step index number
 * ---------------------------------------- */

  .cinder-steps__check {
    width: 0.875rem;
    height: 0.875rem;
  }

  .cinder-steps__index {
    font-size: var(--cinder-text-xs);
    font-weight: var(--cinder-font-semibold);
    line-height: 1;
  }

  /* ----------------------------------------
 * Body — label and description
 * ---------------------------------------- */

  .cinder-steps__body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-1);
    padding-top: var(--cinder-space-2);
  }

  /* Inner wrapper rendered by the stepBody snippet — transparent to the parent
   flex layout so the label and description remain direct flex children. */
  .cinder-steps__body-content {
    display: contents;
  }

  /* ----------------------------------------
 * Interactive body — an <a>/<button> occupying the body cell. Resets native
 * chrome so both elements render identically to the static body, then layers
 * a focus ring. The element keeps .cinder-steps__body, so the body's flex
 * layout (position/display/gap) is reused with zero duplication.
 * ---------------------------------------- */

  .cinder-steps__interactive {
    appearance: none;
    border: 0;
    background: transparent;
    margin: 0;
    padding: 0;
    font: inherit;
    text-align: inherit;
    inline-size: 100%;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--cinder-radius-sm);
  }

  /* Restore body padding cleared by the reset above. Interactive steps must match
   static step spacing in both orientations. */
  .cinder-steps__interactive.cinder-steps__body {
    padding-top: var(--cinder-space-2);
  }

  .cinder-steps[data-cinder-orientation='vertical'] .cinder-steps__interactive.cinder-steps__body {
    padding-bottom: var(--cinder-space-4);
  }

  @media (hover: hover) {
    .cinder-steps__interactive:hover {
      background: var(--cinder-surface-hover);
    }
  }

  .cinder-steps__interactive:focus-visible {
    outline: var(--cinder-ring-width) solid transparent;
    box-shadow: var(--_cinder-focus-ring-shadow);
  }

  @media (forced-colors: active) {
    .cinder-steps__interactive:focus-visible {
      outline: var(--cinder-ring-width) solid ButtonText;
      outline-offset: 3px;
    }
  }

  .cinder-steps__label {
    font-size: var(--cinder-text-sm);
    font-weight: var(--cinder-font-normal);
    color: var(--cinder-text-default);
    line-height: var(--cinder-leading-tight);
  }

  [data-cinder-state='current'] .cinder-steps__label {
    font-weight: var(--cinder-font-semibold);
  }

  [data-cinder-state='skipped'] .cinder-steps__label,
  [data-cinder-state='upcoming'] .cinder-steps__label {
    color: var(--cinder-text-muted);
  }

  .cinder-steps__description {
    font-size: var(--cinder-text-xs);
    color: var(--cinder-text-muted);
    line-height: var(--cinder-leading-normal);
  }

  /* ----------------------------------------
 * Connector — the line between steps
 * ---------------------------------------- */

  .cinder-steps__connector {
    /* border-muted reads clearly in dark mode where plain --cinder-border is
     near-invisible against --cinder-surface. */
    background: var(--cinder-border-muted);
  }

  .cinder-steps__connector[data-cinder-state='complete'] {
    background: var(--cinder-accent-solid);
  }

  /* ----------------------------------------
 * Visually-hidden text for completed and skipped steps
 * ---------------------------------------- */

  .cinder-steps__sr-only,
  .cinder-steps__sr-only-separator {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  @container cinder-steps (max-width: 32rem) {
    .cinder-steps[data-cinder-orientation='horizontal'] .cinder-steps__list {
      flex-direction: column;
      align-items: stretch;
    }

    .cinder-steps[data-cinder-orientation='horizontal'] .cinder-steps__item {
      flex: none;
      /* Re-establish the grid the wide layout replaced with a centered flex
       column. Narrow steps read like the vertical orientation: marker in
       column 1, body in column 2, connector running down column 1. */
      display: grid;
      /* Reset align-items from the wide flex-column rule (where it centers
       the flex children horizontally). On a grid container align-items
       would vertically center grid items; stretch is the correct default. */
      align-items: stretch;
      grid-template-columns: auto 1fr;
      grid-template-rows: auto 1fr;
      gap: 0 var(--cinder-space-3);
    }

    .cinder-steps[data-cinder-orientation='horizontal'] .cinder-steps__marker {
      /* Drop the wide layout's stacking context; the marker is back in flow. */
      position: static;
      z-index: auto;
    }

    .cinder-steps[data-cinder-orientation='horizontal'] .cinder-steps__connector {
      /* Undo the wide layout's absolute, behind-the-marker connector and return
       to an in-flow vertical line beneath the marker. */
      position: static;
      inset-inline-start: auto;
      top: auto;
      z-index: auto;
      grid-column: 1;
      grid-row: 2;
      justify-self: center;
      width: 1px;
      height: auto;
      min-height: var(--cinder-space-6);
      margin-inline-start: 0;
      align-self: stretch;
    }

    .cinder-steps[data-cinder-orientation='horizontal'] .cinder-steps__body {
      /* Left-aligned beside the marker, undoing the wide layout's centering. */
      text-align: start;
      align-items: stretch;
      max-width: none;
      grid-column: 2;
      grid-row: 1 / span 2;
      padding-block-start: 0;
      padding-bottom: var(--cinder-space-4);
    }

    /* Undo the wide layout's marker-capture geometry for the interactive body.
     * That rule (content-width centering + negative block-start margin to pull
     * the focus box up over the marker) only makes sense in the centered flex
     * column. In the narrow grid the marker sits in column 1 and the body in
     * column 2 beside it, so the box must fill its grid cell and stay in flow —
     * otherwise the higher-specificity wide rule's margin/align-self/inline-size
     * would leak in and misplace the body. Reset the block-start padding too so
     * the label content starts on the marker row, matching the vertical layout. */
    .cinder-steps[data-cinder-orientation='horizontal']
      .cinder-steps__interactive.cinder-steps__body {
      inline-size: 100%;
      max-inline-size: none;
      align-self: stretch;
      margin-block-start: 0;
      padding-block-start: 0;
    }
  }
}