/* ============================================================================
   busStepper.css
   BUS Component Library — vertical stepper / wizard chrome
   [Time] 2026-08-15 09:33 AM

   Open Props tokens only. No literals where a token exists.
   Pairs with busStepper.js. Class states map to rail_state():
       current | completed | reachable | locked

   DESIGN LAWS (dated 2026-08-15):
     1. Locked steps are visually honest — muted, no pointer cursor,
        no hover affordance. If it looks clickable, it must be clickable.
     2. Progress text ("Step 2 of 7") lives left of the button row,
        always visible regardless of which step is open.
   ============================================================================ */

/* ---- step card shell ---------------------------------------------------- */

.bus_stepper_step {
    border: var(--border-size-1) solid var(--surface-3);
    border-radius: var(--radius-3);
    background: var(--surface-1);
    margin-block-end: var(--size-2);
    overflow: hidden;
}

.bus_stepper_step.bus_step_current {
    border-color: var(--surface-4);
}

/* ---- header row ---------------------------------------------------------- */

.bus_stepper_head {
    display: flex;
    align-items: center;
    gap: var(--size-3);
    padding: var(--size-3) var(--size-4);
    cursor: pointer;
    user-select: none;
}

.bus_stepper_step.bus_step_locked .bus_stepper_head {
    cursor: default;
    opacity: 0.45;
}

.bus_stepper_step.bus_step_current .bus_stepper_head {
    cursor: default;
}

.bus_stepper_head:hover {
    background: var(--surface-2);
}

.bus_stepper_step.bus_step_locked .bus_stepper_head:hover,
.bus_stepper_step.bus_step_current .bus_stepper_head:hover {
    background: transparent;
}

/* ---- number / check dot --------------------------------------------------- */

.bus_stepper_dot {
    inline-size: var(--size-6);
    block-size: var(--size-6);
    border-radius: var(--radius-round);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-6);
    flex-shrink: 0;
    background: var(--surface-3);
    color: var(--text-1);
}

.bus_step_current .bus_stepper_dot {
    background: var(--indigo-6);
    color: var(--gray-0);
}

.bus_step_completed .bus_stepper_dot {
    background: var(--green-6);
    color: var(--gray-0);
}

/* ---- title + collapsed summary --------------------------------------------- */

.bus_stepper_title {
    margin: 0;
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-6);
    color: var(--text-1);
}

.bus_stepper_summary {
    margin: 0;
    font-size: var(--font-size-0);
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- collapsing body ---------------------------------------------------------
   Applied via x-show + these classes, or bind max-height directly.
   Transition is CSS-only; JS just flips the class.                      */

.bus_stepper_body {
    max-block-size: 0;
    overflow: hidden;
    transition: max-block-size var(--animation-timing, 0.3s) var(--ease-3);
}

.bus_step_current .bus_stepper_body {
    /* Generous ceiling; real height governed by content.
       Raise if a step body legitimately exceeds this. */
    max-block-size: 60rem;
}

.bus_stepper_body_inner {
    padding: var(--size-1) var(--size-4) var(--size-4) var(--size-9);
    display: grid;
    gap: var(--size-2);
}

/* ---- button row + progress -------------------------------------------------- */

.bus_stepper_footer {
    display: flex;
    align-items: center;
    gap: var(--size-2);
    margin-block-start: var(--size-3);
}

.bus_stepper_progress {
    margin-inline-end: auto;
    font-size: var(--font-size-0);
    color: var(--text-2);
}

/* ---- left rail (RGU desktop pattern) ------------------------------------------
   Host app supplies the two-column grid; these style the rail entries.
   Rail binds to the same busStepper scope via rail_state(i).          */

.bus_stepper_rail {
    position: sticky;
    inset-block-start: var(--size-3);
    display: grid;
    gap: var(--size-1);
    align-content: start;
}

.bus_stepper_rail_item {
    display: flex;
    align-items: center;
    gap: var(--size-2);
    padding: var(--size-2) var(--size-3);
    border-radius: var(--radius-2);
    font-size: var(--font-size-0);
    color: var(--text-2);
    cursor: pointer;
    user-select: none;
}

.bus_stepper_rail_item:hover {
    background: var(--surface-2);
}

.bus_stepper_rail_item.bus_step_current {
    background: var(--surface-2);
    color: var(--text-1);
    font-weight: var(--font-weight-6);
    cursor: default;
}

.bus_stepper_rail_item.bus_step_completed {
    color: var(--text-1);
}

.bus_stepper_rail_item.bus_step_locked {
    opacity: 0.45;
    cursor: default;
}

.bus_stepper_rail_item.bus_step_locked:hover {
    background: transparent;
}