/* ══════════════════════════════════════════════════════════════════════
   SETUP — the three steps between signing up and a first practice session.

   Mobile-first: one decision per screen, a single primary action pinned
   where a thumb already is, and nothing that scrolls sideways. It borrows
   the app's own violet, type and radii rather than introducing a second
   visual language for three screens.
   ══════════════════════════════════════════════════════════════════════ */
#setup {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    background: var(--bg, #fff);
    font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif);
    color: var(--text-primary, #111827);
    overflow: hidden;
}
#setup[hidden] { display: none !important; }

/* Header: progress and Back. Sticks so the student always knows where they
   are, and clears the notch on a phone. */
.setup-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 18px 12px;
    border-bottom: 1px solid rgba(91, 80, 232, .1);
}
.setup-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border: 1px solid rgba(91, 80, 232, .16);
    border-radius: 11px;
    background: transparent;
    color: var(--text-primary, #111827);
    cursor: pointer;
}
.setup-back[hidden] { visibility: hidden; display: inline-flex !important; }
.setup-step-of { font-size: .78rem; font-weight: 800; color: var(--text-muted, #6b6890); }
.setup-rail { flex: 1; display: flex; gap: 5px; max-width: 160px; }
.setup-rail i {
    flex: 1;
    height: 4px;
    border-radius: 99px;
    background: rgba(91, 80, 232, .14);
    transition: background .25s ease;
}
.setup-rail i.on { background: var(--violet, #5b50e8); }
.setup-skip {
    margin-left: auto;
    padding: 8px 4px;
    border: 0;
    background: none;
    color: var(--text-muted, #6b6890);
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

/* Body scrolls; the action bar never does. */
.setup-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 22px 18px 8px;
}
.setup-inner { width: 100%; max-width: 620px; margin: 0 auto; }
.setup-h {
    margin: 0 0 6px;
    font-family: var(--font-display, var(--font-ui, sans-serif));
    font-size: clamp(1.45rem, 5vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
}
.setup-sub {
    margin: 0 0 20px;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--text-muted, #6b6890);
}
.setup-label {
    display: block;
    margin: 0 0 9px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-muted, #6b6890);
}
.setup-group { margin-bottom: 22px; }

/* Selection cards. Big enough to hit with a thumb, and the selected state
   reads without relying on colour alone — border weight and the tick move
   together. */
.setup-cards { display: grid; gap: 10px; }
.setup-cards.cols { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.setup-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 13px 15px;
    border: 1.5px solid rgba(91, 80, 232, .16);
    border-radius: var(--r, 14px);
    background: var(--card-bg, #fff);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}
.setup-card:hover { border-color: rgba(91, 80, 232, .34); }
.setup-card[aria-pressed="true"], .setup-card[aria-checked="true"] {
    border-color: var(--violet, #5b50e8);
    border-width: 2px;
    background: rgba(91, 80, 232, .05);
    padding: 12px 14px;
}
.setup-card-main { flex: 1; min-width: 0; }
.setup-card-name { font-size: .92rem; font-weight: 700; }
.setup-card-sub { margin-top: 2px; font-size: .74rem; color: var(--text-muted, #6b6890); }
.setup-tick {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1.5px solid rgba(91, 80, 232, .28);
    border-radius: 999px;
    color: #fff;
}
[aria-pressed="true"] > .setup-tick, [aria-checked="true"] > .setup-tick {
    border-color: var(--violet, #5b50e8);
    background: var(--violet, #5b50e8);
}
.setup-tick svg { opacity: 0; }
[aria-pressed="true"] > .setup-tick svg, [aria-checked="true"] > .setup-tick svg { opacity: 1; }

/* Subject search — only earns its place because a curriculum can offer ~50
   courses. */
.setup-search {
    width: 100%;
    min-height: 46px;
    padding: 12px 14px;
    margin-bottom: 12px;
    border: 1.5px solid rgba(91, 80, 232, .16);
    border-radius: var(--r, 14px);
    background: var(--card-bg, #fff);
    color: inherit;
    font: inherit;
    font-size: 16px;           /* 16px stops iOS zooming the page on focus */
}
.setup-group-head {
    margin: 16px 0 8px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted, #6b6890);
}
.setup-empty {
    padding: 18px 2px;
    font-size: .86rem;
    color: var(--text-muted, #6b6890);
}

/* Live selection summary and the reconciliation notice. */
.setup-summary {
    margin: 0 0 14px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--violet, #5b50e8);
}
.setup-note {
    display: flex;
    gap: 9px;
    margin: 0 0 16px;
    padding: 11px 13px;
    border: 1px solid rgba(217, 119, 6, .28);
    border-radius: 12px;
    background: rgba(217, 119, 6, .06);
    font-size: .82rem;
    line-height: 1.5;
    color: var(--text-primary, #111827);
}
.setup-note[hidden] { display: none !important; }
.setup-error {
    margin: 0 0 14px;
    padding: 11px 13px;
    border: 1px solid rgba(220, 38, 38, .3);
    border-radius: 12px;
    background: rgba(220, 38, 38, .06);
    font-size: .84rem;
    line-height: 1.5;
    color: #b91c1c;
}
.setup-error[hidden] { display: none !important; }

/* Step 3 recap — what the student told us, before they commit to anything. */
.setup-recap {
    padding: 14px 16px;
    margin-bottom: 20px;
    border: 1px solid rgba(91, 80, 232, .14);
    border-radius: var(--r, 14px);
    background: rgba(91, 80, 232, .04);
}
.setup-recap dt {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted, #6b6890);
}
.setup-recap dd { margin: 3px 0 11px; font-size: .9rem; font-weight: 700; }
.setup-recap dd:last-child { margin-bottom: 0; }
.setup-scope {
    margin: 14px 0 0;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--text-muted, #6b6890);
}

/* The action bar. Fixed to the bottom, above the home indicator, and never
   covered by the mobile keyboard because the body scrolls independently. */
.setup-actions {
    flex: 0 0 auto;
    padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(91, 80, 232, .1);
    background: var(--bg, #fff);
}
.setup-actions-inner {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.setup-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    padding: 14px 20px;
    border: 0;
    border-radius: var(--r, 14px);
    background: var(--violet, #5b50e8);
    color: #fff;
    font: inherit;
    font-size: .96rem;
    font-weight: 800;
    cursor: pointer;
}
.setup-primary[disabled] { opacity: .45; cursor: not-allowed; }
.setup-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 11px 20px;
    border: 1.5px solid rgba(91, 80, 232, .2);
    border-radius: var(--r, 14px);
    background: transparent;
    color: var(--text-primary, #111827);
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
}
.setup-plans {
    align-self: center;
    padding: 6px;
    border: 0;
    background: none;
    color: var(--text-muted, #6b6890);
    font: inherit;
    font-size: .8rem;
    text-decoration: underline;
    cursor: pointer;
}
.setup-spin {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: setup-spin .7s linear infinite;
}
@keyframes setup-spin { to { transform: rotate(360deg); } }

[data-dark] #setup { background: var(--bg, #18181b); color: #e8e6f5; }
[data-dark] .setup-head, [data-dark] .setup-actions { border-color: rgba(157, 148, 255, .14); }
[data-dark] .setup-actions { background: var(--bg, #18181b); }
[data-dark] .setup-card, [data-dark] .setup-search {
    border-color: rgba(157, 148, 255, .16);
    background: rgba(255, 255, 255, .03);
    color: #e8e6f5;
}
[data-dark] .setup-card[aria-pressed="true"],
[data-dark] .setup-card[aria-checked="true"] {
    border-color: #b6a6ff;
    background: rgba(157, 148, 255, .1);
}
[data-dark] .setup-tick { border-color: rgba(157, 148, 255, .34); }
[data-dark] [aria-pressed="true"] > .setup-tick,
[data-dark] [aria-checked="true"] > .setup-tick { background: #6f63e8; border-color: #6f63e8; }
[data-dark] .setup-back { border-color: rgba(157, 148, 255, .2); color: #e8e6f5; }
[data-dark] .setup-rail i { background: rgba(157, 148, 255, .18); }
[data-dark] .setup-rail i.on { background: #b6a6ff; }
[data-dark] .setup-summary { color: #b5adff; }
[data-dark] .setup-recap { border-color: rgba(157, 148, 255, .16); background: rgba(157, 148, 255, .06); }
[data-dark] .setup-secondary { border-color: rgba(157, 148, 255, .24); color: #e8e6f5; }
[data-dark] .setup-primary { background: #6f63e8; }
[data-dark] .setup-error { color: #f3aba3; }

@media (prefers-reduced-motion: reduce) {
    .setup-card, .setup-rail i { transition: none; }
    .setup-spin { animation-duration: 0s; }
}

@media (min-width: 620px) {
    .setup-body { padding-top: 34px; }
    .setup-actions-inner { flex-direction: row-reverse; align-items: center; }
    .setup-primary { width: auto; min-width: 250px; margin-left: auto; }
    .setup-secondary { width: auto; }
    .setup-plans { margin-right: auto; align-self: center; }
}

/* ── The plans ──────────────────────────────────────────────────────────
   Same cards as /pricing: _plan_tiers.html in its brief form (summary plus an
   "All features" fold-out), drawn with the plan page's card look: dark rounded
   cards side by side, the 48px price and violet glass pill buttons. The
   setup backdrop is a photograph, so every card is opaque. */
.setup-tiers.public-pricing { padding: 0; }
#setup .setup-tiers .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    border-top: 0;
    align-items: stretch;
}
#setup .setup-tiers .flip, #setup .setup-tiers .flip-inner { display: contents; }
#setup .setup-tiers .tier {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 24px 22px 22px;
    background: #18181b;
    border: 1px solid #2a2a30;
    border-radius: 12px;
    box-shadow: none;
    transform: none;
}
#setup .setup-tiers .tier.featured,
#setup .setup-tiers .tier.tier-ultra { border-color: rgba(182, 166, 255, .45); }
#setup .setup-tiers .tier h2 { margin: 0; font-size: 23px; font-weight: 550; letter-spacing: -.02em; color: #f5f5f7; }
#setup .setup-tiers .pc-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; min-height: 32px; }
#setup .setup-tiers .badge {
    align-self: flex-start;
    margin-bottom: 10px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(182, 166, 255, .14);
    color: #d9d1ff;
    font: 600 10px/1 var(--ds-font-mono, ui-monospace, monospace);
    letter-spacing: .07em;
    text-transform: uppercase;
}
#setup .setup-tiers .who { margin: 8px 0 0; min-height: 0; font-size: 13px; line-height: 1.5; color: #b5b5bf; }
#setup .setup-tiers .tagline { display: none; }
#setup .setup-tiers .price { margin: 16px 0 0; min-height: 0; font-size: 16px; font-weight: 400; color: #f5f5f7; }
#setup .setup-tiers .tier-free > .price {
    font-family: var(--ds-font-display, inherit);
    font-size: 48px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.03em;
}
#setup .setup-tiers .pb-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; white-space: nowrap; }
#setup .setup-tiers .pb-now {
    font-family: var(--ds-font-display, inherit);
    font-size: 48px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: #f5f5f7;
    font-variant-numeric: tabular-nums;
}
#setup .setup-tiers .pb-was { font-size: 20px; color: #8e8e99; text-decoration: line-through; }
#setup .setup-tiers .pb-main small { font-size: 14px; color: #b5b5bf; }
#setup .setup-tiers :is(.pb-l1, .pb-l2, .pb-l3) { margin: 4px 0 0; font-size: 13px; color: #b5b5bf; }
#setup .setup-tiers .pr-summary {
    display: grid;
    gap: 12px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    border: 0;
    min-height: 0;
}
#setup .setup-tiers .pr-summary li { padding: 0; font-size: 14px; line-height: 1.55; color: #d9d1e4; }
#setup .setup-tiers .pr-summary li::before { content: none; }
#setup .setup-tiers .pr-summary strong { color: #f5f5f7; font-weight: 600; }
#setup .setup-tiers .pr-plan-note { min-height: 0; margin: 14px 0 6px; font-size: 12px; line-height: 1.65; color: #9a9aa6; }
#setup .setup-tiers .pr-plan-detail { margin: 0 0 8px; font-size: 13px; }
#setup .setup-tiers .pr-plan-detail summary {
    display: flex;
    align-items: center;
    width: fit-content;
    min-height: 44px;
    color: #b6a6ff;
    cursor: pointer;
    text-underline-offset: 4px;
}
#setup .setup-tiers .pr-plan-detail summary:hover { text-decoration: underline; }
#setup .setup-tiers .pr-plan-detail .feats { margin: 0; display: grid; gap: 10px; }
#setup .setup-tiers .pr-plan-detail .feats li { font-size: 13px; line-height: 1.6; color: #9a9aa6; }

/* The plan page's order: name, who it is for, price, the button, then the
   summary. The shared template puts the button last, so flex order fixes it. */
#setup .setup-tiers .tier > .badge { order: 0; }
#setup .setup-tiers .tier > :is(h2, .pc-head) { order: 1; }
#setup .setup-tiers .tier > .who { order: 2; }
#setup .setup-tiers .tier > .price { order: 3; }
#setup .setup-tiers .tier > :is(.cta, .wait, .setup-monthly, .msg) { order: 4; }
#setup .setup-tiers .tier > :is(.pr-summary, .pr-plan-note, .pr-plan-detail, .feats) { order: 5; }
#setup .setup-tiers .tier > .cta, #setup .setup-tiers .tier > .wait { margin-top: 18px; }
#setup .setup-tiers .pb-main { flex-wrap: nowrap; }
#setup .setup-tiers .pb-now { font-size: clamp(32px, 2.9vw, 44px); }
#setup .setup-tiers .pb-was { font-size: 16px; }

/* Buttons: the plan page's pills. Paid plans get the violet glass primary. */
#setup .setup-tiers .cta {
    margin-top: auto;
    width: 100%;
    min-height: 50px;
    border-radius: 999px;
    font-weight: 600;
    transition: box-shadow .25s ease, background-color .2s ease;
}
#setup .setup-tiers .cta.primary {
    border: 1px solid transparent;
    color: #fbfaff;
    background:
        linear-gradient(180deg, rgba(14, 10, 30, 0) 45%, rgba(14, 10, 30, .14) 78%, rgba(14, 10, 30, .3) 100%) padding-box,
        linear-gradient(90deg, rgba(255, 206, 182, .16) 0%, rgba(255, 206, 182, .04) 24%, rgba(122, 110, 240, .22) 60%, rgba(122, 110, 240, .45) 100%) padding-box,
        linear-gradient(90deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .06) 40%, rgba(255, 255, 255, .05) 100%) padding-box,
        linear-gradient(#3a2f7a, #3a2f7a) padding-box,
        linear-gradient(180deg, rgba(255, 250, 246, .9) 0%, rgba(255, 250, 246, .2) 45%, rgba(255, 250, 246, 0) 78%) border-box,
        linear-gradient(90deg, rgba(255, 206, 182, .95) 0%, rgba(255, 206, 182, .55) 14%, rgba(150, 140, 230, .35) 34%, rgba(150, 140, 230, .35) 62%, rgba(189, 181, 251, .7) 88%, rgba(189, 181, 251, .95) 100%) border-box;
    box-shadow: 0 -2px 22px rgba(255, 206, 182, .14), 0 0 40px rgba(122, 110, 240, .38), inset 0 1px 0 rgba(255, 246, 240, .4);
}
#setup .setup-tiers .cta.primary:hover:not(:disabled) {
    box-shadow: 0 -2px 30px rgba(255, 206, 182, .26), 0 0 52px rgba(122, 110, 240, .55), inset 0 1px 0 rgba(255, 246, 240, .55);
}
#setup .setup-tiers .cta.ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .04);
    color: #f4f2ff;
    text-decoration: none;
}
#setup .setup-tiers .cta.ghost:hover { background: rgba(255, 255, 255, .09); }
#setup .setup-tiers .cta:focus-visible { outline: 2px solid #bdb5fb; outline-offset: 3px; }
#setup .setup-tiers .setup-monthly { margin-top: 10px; color: #b6a6ff; background: none; border: 0; font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
#setup .setup-tiers .wait { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
#setup .setup-tiers .wait input { flex: none; width: 100%; height: 46px; min-height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid #2a2a30; background: #111113; color: #f4f2ff; }
#setup .setup-tiers .wait .cta { flex: none; width: 100% !important; margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
    #setup .setup-tiers .cta { transition: none; }
}
@media (prefers-contrast: more) {
    #setup .setup-tiers .cta.primary { background: #3a2f7a; border-color: #fff; }
    #setup .setup-tiers .tier { border-color: #fff; }
}

/* Monthly / Annual switch, monthly first; and the new-account deal note. */
#setup .setup-term {
    display: inline-flex;
    gap: 4px;
    margin: 18px 0 18px;
    padding: 4px;
    border: 1px solid #2a2a30;
    border-radius: 999px;
    background: #111113;
}
#setup .setup-term button {
    min-height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: #b5b5bf;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
#setup .setup-term button[aria-checked="true"] { background: #f4f2ff; color: #111113; }
#setup .setup-term button:focus-visible { outline: 2px solid #bdb5fb; outline-offset: 2px; }
#setup .setup-offer {
    margin: 16px 0 0;
    padding: 12px 16px;
    border: 1px solid rgba(255, 206, 182, .35);
    border-radius: 12px;
    background: rgba(255, 206, 182, .08);
    color: #f4e6dc;
    font-size: 14px;
    line-height: 1.5;
}
#setup .setup-offer strong { color: #ffd9c4; }

/* Three plan columns do not fit the reading measure the choice steps use. */
.setup-inner.wide { max-width: 1120px; }