/* ============================================================
 * First-run wizards: the step-body vocabulary (#619)
 * Shared by every wizard that renders inside StepWizard (Prepare, Plan, Perform).
 * Moved here from PrepareWizard.razor.css: scoped CSS ties a rule to the component that
 * authored the markup, so a scoped copy could only ever style one wizard.
 *
 * Every rule is prefixed with .pw (StepWizard's root) - that both confines it to a wizard and
 * keeps the specificity the scoped rules had (.class[b-scope] = two class-level parts), so
 * moving them changed nothing on screen.
 *
 * The design's literal rgba()s are expressed via color-mix on the matching token:
 * rgba(213,0,28)=--tt-cta, rgba(255,122,0)=--tt-brand-amber,
 * rgba(5,39,103)=--tt-brand-navy, rgba(22,163,74)=--tt-status-ok.
 * ============================================================ */

.pw .pw__spacer { flex: 1; }

/* ── Panes / shared type ──────────────────────────────────── */
.pw .pw__pane { padding: var(--tt-s-8) 0 0; }

/* Welcome carries more than any other step (hero, lede, four promise rows). It starts high and
   runs a tighter vertical rhythm than the other panes so it fits the fixed-height sheet without
   scrolling - the overrides below are scoped to this pane only. */
.pw .pw__pane--welcome { padding: var(--tt-s-2) var(--tt-s-2) var(--tt-s-4); }

.pw .pw__pane--welcome .pw__hero-icon { margin-bottom: var(--tt-s-8); }

.pw .pw__pane--welcome .pw__h1 { margin-bottom: var(--tt-s-8); }

.pw .pw__pane--welcome .pw__lede { margin-bottom: var(--tt-s-12); }

.pw .pw__pane--welcome .pw__promise-row { padding: var(--tt-s-10) 0; }

.pw .pw__pane--done { padding: var(--tt-s-16) var(--tt-s-2) var(--tt-s-4); text-align: center; }

.pw .pw__hero-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--tt-radius-12);
    background: color-mix(in srgb, var(--tt-brand-amber) 12%, transparent);
    color: var(--tt-brand-amber);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--tt-s-16);
}

.pw .pw__eyebrow {
    font-size: 11px;
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tt-brand-amber);
    margin-bottom: var(--tt-s-8);
}

.pw .pw__eyebrow--step { letter-spacing: 0.06em; margin-bottom: 5px; }

.pw .pw__h1 {
    font-size: clamp(26px, 7vw, 32px);
    font-weight: var(--tt-weight-light);
    line-height: 1.14;
    letter-spacing: -0.015em;
    color: var(--tt-ink-1);
    margin: 0 0 var(--tt-s-12);
}

.pw .pw__h1--done { font-size: clamp(24px, 6.5vw, 30px); line-height: 1.15; margin-bottom: var(--tt-s-10); }

.pw .pw__h2 {
    font-size: var(--tt-text-lg);
    font-weight: var(--tt-weight-light);
    color: var(--tt-ink-1);
    margin: 0 0 var(--tt-s-4);
    letter-spacing: -0.01em;
}

.pw .pw__lede {
    font-size: 15px;
    color: var(--tt-ink-3);
    line-height: 1.55;
    margin: 0 0 var(--tt-s-22);
    text-wrap: pretty;
}

.pw .pw__lede--done { font-size: 14.5px; }

.pw .pw__sub {
    font-size: 13.5px;
    color: var(--tt-ink-3);
    margin: 0 0 var(--tt-s-18);
    line-height: var(--tt-leading-normal);
}

.pw .pw__sub strong { color: var(--tt-ink-2); font-weight: var(--tt-weight-semibold); }

/* ── Welcome promise rows ─────────────────────────────────── */
.pw .pw__promise { display: flex; flex-direction: column; gap: var(--tt-s-2); }

.pw .pw__promise-row {
    display: flex;
    align-items: center;
    gap: var(--tt-s-14);
    padding: 13px 0;
    border-top: var(--tt-border-w) solid var(--tt-line-soft);
}

.pw .pw__promise-row--last { border-bottom: var(--tt-border-w) solid var(--tt-line-soft); }

.pw .pw__promise-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--tt-surface-1);
    color: var(--tt-ink-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.pw .pw__promise-text { flex: 1; }

.pw .pw__promise-title { display: block; font-size: 15px; font-weight: var(--tt-weight-semibold); color: var(--tt-ink-1); }

.pw .pw__promise-sub { display: block; font-size: var(--tt-text-sm); color: var(--tt-ink-4); }

.pw .pw__field { margin-bottom: var(--tt-s-14); }

.pw .pw__label {
    display: block;
    font-size: 11px;
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tt-ink-4);
    margin-bottom: var(--tt-s-6);
}

/* "(optional)" qualifier on a field label - de-emphasised against the uppercase label. */
.pw .pw__label-opt {
    font-weight: var(--tt-weight-regular);
    text-transform: none;
    letter-spacing: 0;
    font-style: italic;
}

.pw .pw__input {
    width: 100%;
    height: 46px;
    padding: 0 var(--tt-s-14);
    border: var(--tt-border-w) solid var(--tt-line);
    border-radius: var(--tt-radius-8);
    font-size: 15px;
    color: var(--tt-ink-1);
    background: var(--tt-surface-0);
    outline: none;
}

.pw .pw__input:focus {
    border-color: var(--tt-primary);
    box-shadow: var(--tt-shadow-focus);
}

/* Failed a type check - the CTA color carries the error, matching the upload error above. */
.pw .pw__input.is-invalid,
.pw .pw__input.is-invalid:focus {
    border-color: var(--tt-cta);
    box-shadow: 0 0 0 3px rgba(var(--tt-cta-rgb), 0.12);
}

.pw .pw__err {
    display: block;
    margin-top: var(--tt-s-6);
    font-size: 11px;
    color: var(--tt-cta);
}

.pw .pw__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--tt-s-12);
}

/* ── Service plan ─────────────────────────────────────────── */
.pw .pw__counter { display: flex; align-items: center; gap: var(--tt-s-8); margin-bottom: var(--tt-s-6); }

.pw .pw__counter-text { font-size: var(--tt-text-xs); font-weight: var(--tt-weight-semibold); color: var(--tt-ink-2); }

.pw .pw__counter-num { color: var(--tt-brand-navy); }

.pw .pw__group { margin-top: var(--tt-s-14); }

.pw .pw__group-label {
    font-size: 10.5px;
    font-weight: var(--tt-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--tt-ink-4);
    margin-bottom: var(--tt-s-2);
}

.pw .pw__type {
    display: flex;
    align-items: center;
    gap: var(--tt-s-12);
    padding: var(--tt-s-12) 0;
    border-bottom: var(--tt-border-w) solid var(--tt-line-soft);
}

.pw .pw__check {
    width: 23px;
    height: 23px;
    flex: none;
    cursor: pointer;
    margin: 0;
    accent-color: var(--tt-brand-navy);
}

.pw .pw__type-main { flex: 1; min-width: 0; }

.pw .pw__type-name { display: block; font-size: var(--tt-text-sm); font-weight: var(--tt-weight-medium); color: var(--tt-ink-1); }

.pw .pw__type-name.is-off { color: var(--tt-ink-4); }

/* gap: a row can carry two pills (Plan: "2 days" + "Adds a track"). */
.pw .pw__type-pill { display: inline-flex; margin-top: 3px; gap: var(--tt-s-6); }

/* Pill — read-only status label. Mirrors the design system's Pill component;
   see the note in the PR: the app's equivalent (Badge) only exists on release/2.0. */
.pw .pw__pill {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-s-4);
    height: 22px;
    padding: 0 var(--tt-s-8);
    border: var(--tt-border-w) solid transparent;
    border-radius: var(--tt-radius-4);
    font-size: 10px;
    font-weight: var(--tt-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
}

.pw .pw__pill--ok { background: var(--tt-status-ok); color: #fff; }

.pw .pw__pill--neutral { background: var(--tt-surface-2); color: var(--tt-ink-2); border-color: var(--tt-line-soft); }

.pw .pw__stepper { display: inline-flex; align-items: center; gap: var(--tt-s-4); flex: none; }

.pw .pw__step-btn {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: var(--tt-border-w) solid var(--tt-line);
    background: var(--tt-surface-0);
    color: var(--tt-ink-2);
    cursor: pointer;
    font-size: var(--tt-text-base);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pw .pw__step-val {
    min-width: 20px;
    text-align: center;
    font-size: var(--tt-text-sm);
    font-weight: var(--tt-weight-semibold);
    color: var(--tt-ink-1);
    font-variant-numeric: tabular-nums;
}

.pw .pw__unit-btn {
    height: 28px;
    padding: 0 9px;
    border-radius: 7px;
    border: var(--tt-border-w) solid var(--tt-line);
    background: var(--tt-surface-1);
    color: var(--tt-ink-3);
    cursor: pointer;
    font-size: 11.5px;
    font-weight: var(--tt-weight-semibold);
    white-space: nowrap;
    min-width: 58px;
}

/* ── Stock the shelf ──────────────────────────────────────── */
.pw .pw__stock { display: flex; flex-direction: column; gap: 9px; }

.pw .pw__stock-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px var(--tt-s-14);
    border-radius: 10px; /* off-scale: design uses 10px; radius scale has no 10 */
    cursor: pointer;
    text-align: left;
    width: 100%;
    border: 1.5px solid var(--tt-line);
    background: var(--tt-surface-0);
}

.pw .pw__stock-row.is-added {
    border-color: var(--tt-brand-navy);
    background: color-mix(in srgb, var(--tt-brand-navy) 5%, transparent);
}

.pw .pw__stock-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--tt-line);
    background: var(--tt-surface-0);
}

.pw .pw__stock-check.is-added {
    border-color: var(--tt-brand-navy);
    background: var(--tt-brand-navy);
    color: #fff;
}

.pw .pw__stock-main { flex: 1; }

.pw .pw__stock-name { display: block; font-size: var(--tt-text-sm); font-weight: var(--tt-weight-semibold); color: var(--tt-ink-1); }

.pw .pw__stock-sub { display: block; font-size: var(--tt-text-xs); color: var(--tt-ink-4); }

.pw .pw__empty {
    text-align: center;
    padding: var(--tt-s-32) var(--tt-s-16);
    color: var(--tt-ink-4);
    font-size: 13.5px;
    border: var(--tt-border-w) dashed var(--tt-line);
    border-radius: var(--tt-radius-12);
}

/* ── Done ─────────────────────────────────────────────────── */
.pw .pw__done-check {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--tt-status-ok);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--tt-s-16);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--tt-status-ok) 35%, transparent);
}

/* Wraps the design-system StatStrip. The strip itself is styled by StatStrip.razor.css —
   only the frame it sits in belongs here. */
.pw .pw__tilerow-wrap {
    text-align: left;
    margin-bottom: var(--tt-s-18);
    border: var(--tt-border-w) solid var(--tt-line-soft);
}

/* Drop the strip's page-level bottom margin and rule - this wrap supplies both. */
.pw .pw__tilerow-wrap .tt-stat-strip { margin-bottom: 0; border-bottom: none; }

/* Six tiles since the Your build step (#694) do not fit one row in a phone-width sheet: the labels
   ran into each other. Below the sheet's phone layout they sit three to a row, divided as the strip
   divides one row. Qualified with .tt-stat-strip to outrank StatStrip's own scoped .tt-stat rules,
   which tie with a plainer selector and win on order. */
@media (max-width: 759px) {
    .pw .pw__tilerow-wrap .tt-stat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pw .pw__tilerow-wrap .tt-stat-strip .tt-stat:nth-child(3n) { border-right: none; }
    .pw .pw__tilerow-wrap .tt-stat-strip .tt-stat:nth-child(n + 4) { border-top: var(--tt-border-w) solid var(--tt-line-soft); }
}

/* The Prepare wizard also carried a tighter tile padding (12px / 8px, "so five labels don't clip in
   a 440px sheet"). It never applied: it tied on specificity with StatStrip's own .tt-stat rule and
   lost on order, so what has always shipped is StatStrip's default padding. Dropped rather than
   moved, because moving it here would have made it win and changed the screen (#619). */

.pw .pw__next {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    text-align: left;
    background: var(--tt-surface-1);
    border-radius: 10px; /* off-scale: design uses 10px; radius scale has no 10 */
    padding: 13px var(--tt-s-16);
}

.pw .pw__next-icon { color: var(--tt-brand-amber); flex: none; margin-top: 1px; }

.pw .pw__next-text { font-size: var(--tt-text-sm); color: var(--tt-ink-3); line-height: var(--tt-leading-normal); }

.pw .pw__next-text strong { color: var(--tt-ink-1); font-weight: var(--tt-weight-semibold); }

/* Blocked-save notice / save failure. Occupies the same slot as .pw__next, so the pane's height
   does not shift between the three states. Warn tint for "you still owe us data" (recoverable);
   crit for a failed save. */
.pw .pw__alert {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    text-align: left;
    background: var(--tt-status-warn-surface);
    border: var(--tt-border-w) solid var(--tt-status-warn-border);
    border-radius: 10px; /* off-scale: matches .pw__next */
    padding: 13px var(--tt-s-16);
}

.pw .pw__alert-icon { color: var(--tt-status-warn-text); flex: none; margin-top: 1px; }

.pw .pw__alert-text {
    font-size: var(--tt-text-sm);
    color: var(--tt-status-warn-text);
    line-height: var(--tt-leading-normal);
}

.pw .pw__alert-text strong { font-weight: var(--tt-weight-semibold); }

.pw .pw__alert-sub {
    display: block;
    margin-top: var(--tt-s-4);
    font-size: var(--tt-text-xs);
}

.pw .pw__alert--error {
    background: var(--tt-status-crit-surface);
    border-color: var(--tt-status-crit);
}

.pw .pw__alert--error .pw__alert-icon,
.pw .pw__alert--error .pw__alert-text { color: var(--tt-status-crit); }

.pw .pw__link-btn {
    border: none;
    background: none;
    color: var(--tt-link);
    font-size: var(--tt-text-xs);
    font-weight: var(--tt-weight-semibold);
    cursor: pointer;
    padding: var(--tt-s-4) var(--tt-s-2);
}

/* ── Added with the Plan and Perform wizards (docs/design/wizards) ── */
/* Quiet one-line help under a field: the resolved home location, the pace window. */
.pw .pw__note {
    display: flex;
    align-items: flex-start;
    gap: var(--tt-s-8);
    margin: var(--tt-s-8) 0 0;
    font-size: var(--tt-text-xs);
    color: var(--tt-ink-4);
    line-height: var(--tt-leading-normal);
}

.pw .pw__note svg { flex: none; margin-top: 1px; }

/* Multi-line text in the field style (Approach, the track note). 11px has no spacing token -
   it is what centres one line in the 46px single-line input, kept so both read as one family. */
.pw textarea.pw__input {
    font-family: inherit;   /* a textarea doesn't inherit the font - the placeholder fell back to monospace */
    height: auto;
    min-height: 84px;
    padding: 11px var(--tt-s-14);
    line-height: 1.45;
    resize: vertical;
}

/* A row the plan can't take (the Tracks cap) - shown, not hidden, so the reason can be read. */
.pw .pw__stock-row:disabled { cursor: not-allowed; opacity: 0.55; }

/* An empty list's ways back - each one returns to the step whose answer would fill it. */
.pw .pw__empty-actions {
    display: flex;
    justify-content: center;
    gap: var(--tt-s-12);
    margin-top: var(--tt-s-10);
}

/* "+ Add another track": a link on its own line under a list of picks. */
.pw .pw__add-link { margin-top: var(--tt-s-12); }

/* A field that follows a list (Perform: the track note under the prep list). */
.pw .pw__field--after-list { margin-top: var(--tt-s-18); }

/* The unit beside a stepper when it is a label (Perform's "days before"), not Prepare's cycling
   button - a span needs the button's centring. */
.pw span.pw__unit-btn { display: inline-flex; align-items: center; justify-content: center; }