/* §25.10.3 Onboarding pilot picker.
 *
 * IMP-0623. This sheet used to carry a whole parallel design: its own stepper bubbles, its
 * own card, its own hover-lift, its own type sizes — none of which matched welcome.html
 * immediately before it or the catalogue immediately after it. It is now a thin layer over
 * the reader design system (css/reader.css): the steps are composed out of .reader-fork,
 * .reader-grid and .reader-card, and everything below is only what those primitives do not
 * already say — the flow's column geometry, its progress rail, and the two tiles the
 * onboarding flow alone has (a vibe branch and a boundary toggle).
 *
 * Every value here is a --rd-* token or one of the brief's seven colours. There are no
 * font stacks, no hexes and no spacing literals in this file.
 */

/* ============================================================================
   The column
   Sized so a step's .reader-stage (the manuscript column, and the trunk down its
   inline-start edge) fits the page exactly: --rd-column plus .reader-page's own inline
   padding. One focal measure, from the rail at the top to the shelf at the end.
   ============================================================================ */
.onboarding {
    max-width: calc(var(--rd-column) + var(--rd-space-6));
    padding-block: var(--rd-space-6) var(--rd-space-9);
}

.onboarding-step {
    animation: onboarding-step-in var(--rd-dur-slow) var(--rd-ease-out) both;
}

@keyframes onboarding-step-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   Progress rail
   Present on every step, so it is what makes the three screens one journey. Keys threaded
   on the trunk's line: unlit ahead of you, amethyst where you are, verdigris behind.
   ============================================================================ */
.onboarding-progress {
    margin-block-end: var(--rd-space-6);
    padding-inline-start: var(--rd-fork-gutter);
}

.progress-steps {
    display: flex;
    align-items: center;
    gap: 0;
}

.progress-step {
    display: flex;
    align-items: center;
    gap: var(--rd-space-2);
    min-width: 0;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--rd-space-5);
    height: var(--rd-space-5);
    border-radius: var(--rd-radius-xs);
    font-family: var(--rd-font-ui);
    font-size: var(--rd-text-xs);
    font-weight: var(--rd-weight-bold);
    font-variant-numeric: tabular-nums;
    background: var(--rd-surface);
    border: 1px solid var(--rd-rule);
    color: var(--rd-text-faint);
    transition: background-color var(--rd-dur) var(--rd-ease),
                border-color var(--rd-dur) var(--rd-ease),
                color var(--rd-dur) var(--rd-ease);
}

.step-label {
    font-family: var(--rd-font-ui);
    font-size: var(--rd-text-xs);
    font-weight: var(--rd-weight-semi);
    letter-spacing: var(--rd-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--rd-text-faint);
    white-space: nowrap;
    transition: color var(--rd-dur) var(--rd-ease);
}

.progress-step.active .step-number {
    background: var(--amethyst);
    border-color: var(--amethyst);
    color: var(--rd-on-accent);
}

.progress-step.active .step-label { color: var(--rd-text); }

.progress-step.completed .step-number {
    background: var(--rd-verdigris-wash);
    border-color: var(--rd-verdigris-line);
    color: var(--verdigris);
}

.progress-step.completed .step-label { color: var(--rd-text-muted); }

/* The line between the keys: the trunk, lit behind the reader and unlit ahead. */
.progress-connector {
    width: var(--rd-space-6);
    height: var(--rd-rule-w);
    margin-inline: var(--rd-space-3);
    border-radius: var(--rd-radius-pill);
    background: var(--rd-rule);
    transition: background-color var(--rd-dur) var(--rd-ease);
}

.progress-step.completed + .progress-connector { background: var(--rd-amethyst-line); }

@media (max-width: 520px) {
    .progress-connector { width: var(--rd-space-4); margin-inline: var(--rd-space-2); }
    .step-label { display: none; }
}

/* The step is a .reader-stage: the trunk runs the full height of the column, in the gutter
   the fork's branches leave from, so the question, the branches and the shelf that follows
   are all hung off one line. The fork's own trunk stub is therefore not used here — the
   stage draws the continuous line the stub only approximates inside a fixed choice panel. */
.onboarding .reader-fork {
    max-width: none;
    margin-inline: 0;
    padding-inline-start: 0;
    padding-block-start: 0;
}

/* ============================================================================
   Step header
   ============================================================================ */
.step-header {
    margin-block-end: var(--rd-space-4);
}

.step-title {
    font-family: var(--rd-font-display);
    font-optical-sizing: auto;
    font-size: var(--rd-display-md);
    font-weight: var(--rd-weight-semi);
    letter-spacing: var(--rd-tracking-display);
    line-height: var(--rd-leading-tight);
    color: var(--rd-text);
    text-wrap: balance;
    margin: 0;
    max-width: 24ch;
}

.step-subtitle {
    margin: var(--rd-space-2) 0 0;
    font-family: var(--rd-font-ui);
    font-size: var(--rd-text-lg);
    line-height: var(--rd-leading-ui);
    color: var(--rd-text-muted);
    max-width: 56ch;
}

.step-actions {
    display: flex;
    align-items: center;
    gap: var(--rd-space-3);
    flex-wrap: wrap;
    margin-block-start: var(--rd-space-6);
}

/* ============================================================================
   Step 1 — the vibe branches
   Rendered by onboarding.js into .reader-fork__branches, so all that is left to say is
   what a vibe choice carries that a story choice does not: an icon, and a selected state
   that survives while the step animates out.
   ============================================================================ */
.vibe-grid { gap: var(--rd-space-1); }

/* A vibe is one word, so its branch stops at a readable measure instead of running the
   width of the column the way a sentence-long story choice does. */
.vibe-grid .reader-fork__branch { max-width: 34rem; }

.vibe-tile { flex-direction: row; align-items: center; gap: var(--rd-space-3); }

.vibe-tile i {
    font-size: var(--rd-text-lg);
    color: var(--rd-text-dim);
    width: var(--rd-space-5);
    text-align: center;
    flex: none;
    transition: color var(--rd-dur-fast) var(--rd-ease);
}

.vibe-tile:hover i,
.vibe-tile:focus-visible i { color: var(--amethyst); }

.vibe-tile.selected {
    background: var(--rd-amethyst-wash);
    border-color: var(--rd-amethyst-line);
}

.vibe-tile.selected i,
.vibe-tile.selected .reader-fork__label { color: var(--amethyst); }

/* ============================================================================
   Step 2 — comfort
   ============================================================================ */
.comfort-options {
    display: flex;
    flex-direction: column;
    gap: var(--rd-space-6);
}

.comfort-section .reader-eyebrow { display: block; margin-block-end: var(--rd-space-3); }

.rating-option.active {
    background: var(--rd-amethyst-wash);
    border-color: var(--rd-amethyst-line);
}

.rating-option.active .reader-fork__label { color: var(--amethyst); }

/* Boundary toggles. A safety form: hairline, no wash, no signature — the quiet the fork
   above is measured against. */
.boundary-toggles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--rd-space-2);
}

.boundary-toggle {
    display: flex;
    align-items: center;
    gap: var(--rd-space-2);
    padding: var(--rd-space-2) var(--rd-space-3);
    min-height: var(--rd-control-h);
    background: transparent;
    border: 1px solid var(--rd-rule-soft);
    border-radius: var(--rd-radius-sm);
    cursor: pointer;
    font-family: var(--rd-font-ui);
    font-size: var(--rd-text-md);
    color: var(--rd-text-muted);
    transition: border-color var(--rd-dur-fast) var(--rd-ease),
                background-color var(--rd-dur-fast) var(--rd-ease),
                color var(--rd-dur-fast) var(--rd-ease);
}

.boundary-toggle:hover {
    border-color: var(--rd-rule-strong);
    color: var(--rd-text);
}

.boundary-toggle input[type="checkbox"] {
    accent-color: var(--amethyst);
    width: var(--rd-space-4);
    height: var(--rd-space-4);
    flex: none;
}

.boundary-toggle:has(input:checked) {
    border-color: var(--rd-amethyst-line);
    background: var(--rd-amethyst-wash);
    color: var(--rd-text);
}

/* ============================================================================
   Step 3 — the pilot shelf, and the post-pick shelf
   Both are .reader-grid of .reader-card, so all that is left is the button reset the
   JS-rendered card needs.
   ============================================================================ */
.pilot-card { cursor: pointer; text-align: start; width: 100%; padding: 0; }

/* The gutter is deliberately NOT collapsed on small screens: it is where the trunk runs,
   and a phone is where the sequence is most often read. */
@media (max-width: 600px) {
    .onboarding { padding-block: var(--rd-space-5) var(--rd-space-8); }

    .step-title { max-width: none; }

    .boundary-toggles { grid-template-columns: 1fr; }

    /* IMP-1439: on a phone the decorative fork gutter consumed the same scarce
       width as the choices themselves.  The sequence still reads through its
       progress rail and selected states; choice/card surfaces now begin at the
       page's single 4px safe edge, with an 8px label inset. */
    .onboarding-progress {
        padding-inline-start: 0;
    }

    .onboarding .reader-stage {
        padding-inline: 0;
    }

    .onboarding .reader-stage::before,
    .onboarding .reader-fork__branch::before {
        display: none;
    }

    .onboarding .reader-fork__branch {
        padding-inline-start: 0;
    }

    .onboarding .reader-fork__choice {
        padding-inline: var(--rd-space-2);
    }
}