/* Setup spine — the five-step strip under the page header on every page of the
   position setup walk. Rendered by Renderers/SetupProgressRenderer.fs.

   Restyled to the segmented-bar shape: one bordered container holding five
   equal segments, with the step you are on drawn as a filled pill inside it.
   The previous shape was five loose chips joined by hairlines, which read as
   five separate controls rather than one bar you are partway along — the
   container is what makes it a single object, and the pill is what puts you
   inside it rather than beside it.

   Colour is Storm's, not the mockup's monochrome: a completed step fills its
   marker with --accent-primary like every other "this is done and you can go
   back to it" affordance in the app.

   Structure lives in @layer components, colour in @layer theme, per the repo's
   two-layer split. */

@layer components {
  .setup-progress {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-block-end: var(--space-lg);

    .setup-progress-caption {
      display: flex;
      align-items: baseline;
      gap: var(--space-xs);
      font-size: var(--fs-xsmall);
    }

    .setup-progress-count {
      font-weight: var(--fw-semibold);
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    /* The bar itself. Segments scroll rather than wrap: a strip that reflows to
       two lines stops reading as a single sequence, and five segments overflow
       well before the viewport does on a narrow window. */
    .setup-progress-steps {
      display: flex;
      align-items: center;
      gap: 0;
      padding: var(--space-3xs);
      border-radius: var(--radius-md);
      overflow-x: auto;
      margin: 0;
      list-style: none;
      scrollbar-width: none;
    }

    .setup-progress-steps::-webkit-scrollbar {
      display: none;
    }

    .setup-progress-step {
      display: flex;
      /* base-local.css carries `li + li { margin-block-start: var(--space-xs) }`
         for prose lists. This list runs horizontally, so that rule pushes every
         step except the first down by a few pixels — a misalignment you see
         before you can name. Reset it here rather than narrowing the global
         rule, which every vertical list in the app depends on. */
      margin-block-start: 0;

      /* Equal segments when the bar has room. `min-inline-size: max-content` is
         the floor that keeps flex-basis:0 from crushing a label into its own
         ellipsis on a narrow window — below that width the container scrolls
         instead, which is the one behaviour that never lies about the step
         names. */
      flex: 1 1 0;
      min-inline-size: max-content;

      .setup-progress-body {
        display: inline-flex;
        inline-size: 100%;
        align-items: center;
        gap: var(--space-xs);
        padding: var(--space-sm) var(--space-md);
        border-radius: var(--radius-sm);
        text-decoration: none;
        white-space: nowrap;
        transition:
          background-color var(--time-fast) var(--ease-standard),
          color var(--time-fast) var(--ease-standard);
      }
    }

    .setup-progress-marker {
      display: inline-grid;
      flex: none;
      place-items: center;
      width: 1.25rem;
      height: 1.25rem;
      border-radius: 50%;
      border: 1.5px solid transparent;
      font-size: 0.6875rem;
      font-weight: var(--fw-semibold);
      font-variant-numeric: tabular-nums;
    }

    .setup-progress-label {
      font-size: var(--fs-xsmall);
      font-weight: var(--fw-medium);
      white-space: nowrap;
    }

    /* "2 parts" on a step that is two things on one page. Sized and weighted
       well below the label so it annotates the step rather than competing with
       it, and left readable by screen readers — it is information, not
       decoration. */
    .setup-progress-parts {
      flex: none;
      padding-inline: var(--space-2xs);
      border-radius: var(--radius-pill);
      font-size: var(--fs-tiny);
      font-weight: var(--fw-medium);
      white-space: nowrap;
    }

    /* Announced by screen readers, never drawn — the visual "done" state is the
       tick inside an aria-hidden marker, so it needs a text equivalent. */
    .setup-progress-sr {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .setup-progress-step--current .setup-progress-label {
      font-weight: var(--fw-semibold);
    }
  }

  /* The strip is a wayfinding aid, not content. On a narrow window the page
     header and the forward CTA matter more, so drop to the caption alone. */
  @media (width < 40rem) {
    .setup-progress .setup-progress-steps {
      display: none;
    }
  }
}

@layer theme {
  .setup-progress {
    /* base.css carries a bare `nav { background: var(--surface-sunken) }` as the
       navbar's fallback. This strip is a <nav> because it is navigation, so it
       inherits that band; the bar below draws its own surface, and the caption
       should sit in the page flow rather than on a second band. */
    background: transparent;

    .setup-progress-count {
      color: var(--text-secondary);
    }

    .setup-progress-name {
      color: var(--text-primary);
    }

    .setup-progress-steps {
      background: var(--surface-elevated);
      border: 1px solid var(--border-subtle);
    }

    /* Ahead: an outlined marker, so an unvisited step reads as an empty slot
       rather than as another filled state competing with done and current. */
    .setup-progress-marker {
      border-color: var(--border-color);
      color: var(--text-secondary);
    }

    .setup-progress-label {
      color: var(--text-secondary);
    }

    .setup-progress-parts {
      background: oklch(from var(--text-secondary) l c h / 0.12);
      color: var(--text-secondary);
    }

    /* Reachable, not yet visited. Reads as an upcoming step — outlined marker,
       secondary label — but takes the same hover as a completed one, which is
       the only affordance saying it can be clicked at all. */
    .setup-progress-step--next .setup-progress-body:hover {
      background: var(--surface-sunken);
    }

    .setup-progress-step--done {
      .setup-progress-body:hover {
        background: var(--surface-sunken);
      }

      .setup-progress-marker {
        background: var(--accent-primary);
        border-color: var(--accent-primary);
        color: var(--button-text-color);
      }

      .setup-progress-label {
        color: var(--text-primary);
      }
    }

    /* Current: the filled pill. This is the one that makes the bar read as a
       position within a sequence instead of a row of five buttons. */
    .setup-progress-step--current {
      .setup-progress-body {
        background: var(--surface-sunken);
      }

      .setup-progress-marker {
        border-color: var(--text-primary);
        color: var(--text-primary);
      }

      .setup-progress-label {
        color: var(--text-primary);
      }
    }
  }
}