/* ============================================================
   Onboarding — first-run setup checklist
   100% on the unified monochrome suite kit (suite.css + editor-suite.css).
   Only the layout-specific bits live here; surfaces, buttons, fields,
   the callout, the progress bar and all tokens come from the suite. Chrome
   is ink; no off-brand hues. Canadian spelling throughout.
   ============================================================ */

/* --- Page column ---
   .ob-main doubles as a styles.css page-transition wrapper, so the class
   stays on <main>. .s-page supplies the centring + padding; we just narrow
   the column for this read-it-down checklist. */
.ob-main.s-page {
    max-width: 680px;
    padding-top: 2rem;
    padding-bottom: 5rem;
}

/* --- Header ---
   .s-page-head supplies the row + bottom spacing; the eyebrow -> h1 -> lede
   stack lives in its single child div. We only space the eyebrow off the
   title and nudge the lede width. */
.ob-header .s-section-label {
    margin-bottom: 0.5rem;
}
.ob-header .s-lede {
    max-width: 46ch;
}

/* --- Progress row (.s-progress fill is suite; this is just the layout) --- */
.ob-progress-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}
.ob-progress-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--s-text-2);
    white-space: nowrap;
}

/* --- Step list --- */
.ob-steps {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.75rem;
}
.ob-loading {
    color: var(--s-text-3);
    font-size: 0.88rem;
    padding: 1rem 0;
}

/* --- Step card ---
   .s-card supplies surface/border/radius/shadow; .ob-step adds the
   icon-circle + body row layout and the next/done state tints (ink). */
.ob-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.25rem 1.25rem 1.1rem;
}
/* Pending steps lift on hover (the "hover-alive" feel); done steps rest. */
.ob-step:not(.is-done):hover {
    border-color: var(--s-border-strong);
    box-shadow: var(--s-shadow-md);
    transform: translateY(-2px);
}
.ob-step.is-next {
    border-color: var(--s-accent);
    box-shadow: var(--s-shadow-md);
}
.ob-step.is-next:hover {
    border-color: var(--s-accent);
}
.ob-step.is-done {
    background: var(--s-surface-2);
    opacity: 0.85;
}

/* --- Step number / icon circle ---
   Mirrors the .s-step::before marker grammar (circle, ink-on-done) but
   sits in a vertical card row rather than the horizontal .s-stepper rail. */
.ob-step-num {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: var(--s-r-pill);
    border: 1.5px solid var(--s-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--s-text-3);
    background: var(--s-surface-3);
    margin-top: 0.1rem;
}
.ob-step.is-next .ob-step-num,
.ob-step.is-done .ob-step-num {
    background: var(--s-accent);
    border-color: var(--s-accent);
    color: var(--s-on-accent);
}

/* Checkmark / arrow SVGs inside the circle */
.ob-check-icon,
.ob-arrow-icon {
    stroke: var(--s-on-accent);
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ob-check-icon { width: 13px; height: 13px; }
.ob-arrow-icon { width: 11px; height: 11px; }

/* --- Step body --- */
.ob-step-body {
    flex: 1;
    min-width: 0;
}
.ob-step-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--s-text);
    letter-spacing: -0.01em;
    margin-bottom: 0.25rem;
}
.ob-step.is-done .ob-step-title {
    color: var(--s-text-2);
}
.ob-step-desc {
    font-size: 0.82rem;
    color: var(--s-text-3);
    line-height: 1.55;
    margin: 0 0 0.85rem;
}

/* Action button is a real .s-btn now — only spacing hook lives here. */
.ob-step-btn {
    margin-top: 0.1rem;
}

/* --- All-complete note (ink, not coloured) --- */
.ob-done-note {
    text-align: center;
    font-size: 0.88rem;
    color: var(--s-text);
    font-weight: 600;
    margin-top: 1.25rem;
}

/* --- Skip link --- */
.ob-skip {
    margin-top: 2rem;
    text-align: center;
}
.ob-skip a {
    color: var(--s-text-2);
    font-size: 0.82rem;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--s-t-fast), border-color var(--s-t-fast);
}
.ob-skip a:hover {
    color: var(--s-text);
    border-bottom-color: var(--s-border-strong);
}

/* --- Build mode note ---
   A real .s-callout (monochrome ink-soft); we only centre it under the
   read-down column and keep the copy calm/quiet for a first-run footnote. */
.ob-build-note.s-callout {
    margin: 1.25rem auto 0;
    max-width: 46ch;
    background: var(--s-surface-2);
    border-color: var(--s-border);
    color: var(--s-text-2);
    font-weight: 500;
    font-size: 0.8rem;
    line-height: 1.5;
}
.ob-build-note.s-callout svg { color: var(--s-text-3); }
.ob-build-note.s-callout strong { font-weight: 600; color: var(--s-text); }

/* --- Quiet entrance: fade-up + stagger (design system §5) ---
   Scoped to .ob-animate-in so ONLY the first paint animates; onboarding.js
   drops the class on later poll re-renders (no 10s flicker). --ob-i is set
   per card so each one settles ~60ms after the last. Reduced-motion guarded
   below. */
.ob-animate-in .ob-step,
.ob-animate-in .ob-done-note {
    animation: ob-fade-up var(--s-t) cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--ob-i, 0) * 60ms);
}
@keyframes ob-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

/* --- Mobile (first-run is often on a phone) — usable down to 360px --- */
@media (max-width: 480px) {
    .ob-main.s-page {
        padding-top: 1.5rem;
    }
    .ob-progress-wrap {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    /* progress track keeps the full row; label drops below it */
    .ob-progress-wrap .s-progress {
        flex: 1 1 100%;
    }
    .ob-step {
        padding: 1.05rem;
        gap: 0.85rem;
    }
}

/* --- Reduced motion: neutralise the entrance + hover-lift.
   (.suite already softens its own transitions; this covers the page-local
   keyframe + the translate on hover so nothing moves.) --- */
@media (prefers-reduced-motion: reduce) {
    .ob-animate-in .ob-step,
    .ob-animate-in .ob-done-note {
        animation: none;
    }
    .ob-step:not(.is-done):hover {
        transform: none;
    }
}