/* /register: the page frame from the journey mock (mockups/journey, j-step1).
   Lead C, 2026-10-01. Loaded after register.min.css; scoped to the standalone
   page (never the embedded variant).
   - The page is ~980px wide in the mock (rail 280 + form 672), not 800.
   - The shared header capsule spans the window as on every public page; on
     /register it is rendered inside <main>, so negative inline margins widen
     it from the container to min(1264px, viewport - 16px).
   - The step title is the primary label colour (it rendered secondary grey). */
body.auth-page:not(.is-embedded) .auth-container.auth-wide {
    max-width: min(980px, 92vw);
}
body.auth-page:not(.is-embedded) .auth-container.auth-wide > .cfin-hdr {
    width: auto;
    margin-inline: calc((100% - min(1264px, 100vw - 16px)) / 2);
    margin-block-end: clamp(16px, 3vw, 32px);  /* the mock's air under the capsule */
}
body.auth-page:not(.is-embedded) .section-title .section-title-text {
    color: var(--color-text-primary);
    -webkit-text-fill-color: currentColor;
    letter-spacing: -0.02em;
}

/* ── STEPS 1-3 + SHARED CHROME (Lead C, 2026-10-02) ─────────────────────
   The rail, progress line, field fill/radius and verify chip were already
   built to spec (register.css, Apple redesign 2026-09-28 passes). What was
   still off the mock on steps 1-3: labels carried a visible asterisk the
   mock never shows, the info box on step 1 was a multi-row card instead of
   the mock's one line, and "Back" rendered as a bordered glass button
   instead of a plain link. All three are style-only; no field name,
   validation rule or JS handler changes. */

/* Labels without asterisks, as in the mock (mockups/journey/steps.py: no
   label on any step carries one). The asterisk stays in the DOM — removing
   it would touch `required`/`aria-required`, which are the actual required-
   ness signal and out of scope here — it is only hidden visually, scoped to
   steps 1-3 so cards 4-9 (PR #2991, in review) are untouched.
   ⭐ 2026-10-04: extended to the embed too. Verified NOT to touch
   tests/test_register_deck_is_see_through.py — it sets no background/colour
   on anything the probe samples, purely `display: none` on a glyph. */
body.auth-page .wizard-step[data-step="1"] .required-asterisk,
body.auth-page .wizard-step[data-step="2"] .required-asterisk,
body.auth-page .wizard-step[data-step="3"] .required-asterisk {
    display: none;
}

/* The step-1 prereqs box, compact: `<summary>` is the one line the mock
   shows; `<details>` keeps every fact (the per-step list + closing line)
   reachable, just closed by default instead of always on screen.
   ⭐ 2026-10-04: extended to the embed — padding/layout only, no surface
   colour touched; verified against the see-through suite. */
body.auth-page .wizard-prereqs {
    padding: 14px 16px;
}
body.auth-page .wizard-prereqs-title {
    min-block-size: 44px;
    display: flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
    list-style: none;
}
body.auth-page .wizard-prereqs-title::-webkit-details-marker {
    display: none;
}
body.auth-page .wizard-prereqs-chevron {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-left: auto;
    transition: transform var(--cfin-motion-fast, 120ms) var(--cfin-ease-standard, ease);
}
body.auth-page .wizard-prereqs[open] .wizard-prereqs-chevron {
    transform: rotate(180deg);
}
body.auth-page .wizard-prereqs[open] .wizard-prereqs-title {
    margin-bottom: 12px;
}
@media (prefers-reduced-motion: reduce) {
    body.auth-page .wizard-prereqs-chevron {
        transition: none;
    }
}

/* Back as a plain link (mock: `<a class="plain">Back</a>`, no fill, no
   border) — Continue stays the filled pill it already was. Shared chrome,
   so this affects every step's nav row, not only 1-3; it changes nothing
   about #2991's money/fee/size/trial content, only the look of the Back
   control that sits beside it.
   ⚠ `!important` + the `html body.auth-page:not(.is-embedded)` prefix:
   register.css's own "plain/grey capsule, not outlined" override
   (`html body.auth-page:not(.is-embedded) .wizard-btn-back`, ~line 658)
   already fills the background with `!important`, and the card-1 variants
   go further with their own background/border per theme — nothing less
   wins that fight, matching the pattern already used throughout this file. */
html body.auth-page:not(.is-embedded) .wizard-btn-back,
html body.auth-page:not(.is-embedded) .wizard-step[data-step="1"] .wizard-btn-back,
html:not(.light) body.auth-page:not(.is-embedded) .wizard-step[data-step="1"] .wizard-btn-back {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding-inline: 4px;
    color: var(--text-sub) !important;
}
html body.auth-page:not(.is-embedded) .wizard-btn-back:hover {
    background: none !important;
    color: var(--profit) !important;
    text-decoration: underline;
}
html body.auth-page:not(.is-embedded) .wizard-step[data-step="1"] .wizard-btn-back,
html:not(.light) body.auth-page:not(.is-embedded) .wizard-step[data-step="1"] .wizard-btn-back {
    color: var(--reg-on-start-soft, rgba(255, 255, 255, 0.85)) !important;
}
html body.auth-page:not(.is-embedded) .wizard-step[data-step="1"] .wizard-btn-back:hover {
    color: var(--reg-on-start, #fff) !important;
}

/* ── Step-1 fields (Lead C, 2026-10-06, control-fidelity pass) ──
   SUPERSEDES the light-mode-only `!important` override that used to live
   here. That rule forced `background: var(--bg-input, #fff)` on card 1's
   fields in light mode — `--bg-input` is `rgb(255,255,255)` in light
   (theme.css), the SAME white as the card the journey layout (`L5` above)
   now paints every step on, so a field read as a nearly invisible hairline
   on white, exactly the "text inputs are WHITE on the white step card"
   defect the owner's audit named. Its own `!important` + 5-class
   specificity was also why `register.css`'s already-correct general field
   rule (`--cfin-fill-secondary` background, transparent resting border —
   see register.css ~1167 and ~893) could never win on card 1: this rule
   always beat it.

   Removing it lets that general rule apply everywhere, card 1 included —
   which is what the mock shows: one filled-grey field style site-wide, not
   a card-1-only treatment. Nothing below needs to restate background or
   text colour; it only brings the SIZE to the mock's `.field2` (44px tall,
   17px type — register.css's general rule is 52px/16px, sized for the
   button row it shares a baseline with elsewhere on the site). */
body.auth-page:not(.is-embedded) .input-group input,
body.auth-page:not(.is-embedded) .input-group select {
    min-height: 44px;
    font-size: 17px;
}

/* ══════════════════════════════════════════════════════════════════════
   LAYOUT PASS (Lead D, 2026-10-04, audit brief 32: L5 L9 L10 L11 L12 L15 M1)
   Standalone /register only (never the embedded deck). Presentation only:
   no field, validation rule, message, step-navigation or payment change.
   ══════════════════════════════════════════════════════════════════════ */

/* L5. Each step sits in the mock's white card (the kit's flat opaque card
   surface, spec 4.3), not on the bare gradient. The card is the live step, so
   its title, fields and docked Continue/Back row travel together. */
html body.auth-page:not(.is-embedded) .wizard-step.is-active {
    background: var(--color-background-card, var(--bg-card));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--cfin-radius-card, 20px);
    padding: clamp(18px, 4vw, 28px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
html.light body.auth-page:not(.is-embedded) .wizard-step.is-active {
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
/* Blocks that used to paint their own card on the page now sit ON the card,
   so they drop the second copy of the same surface. */
html body.auth-page:not(.is-embedded) .wizard-step.is-active > .legal-checkboxes,
html body.auth-page:not(.is-embedded) .wizard-step.is-active > .marketing-optin,
html body.auth-page:not(.is-embedded) .wizard-step.is-active > .kyc-notice,
html body.auth-page:not(.is-embedded) .wizard-step.is-active > .cta-section {
    background: transparent !important;
    border-radius: 0 !important;
    padding-inline: 0;
}

/* L10. ONE eyebrow above the title: "Step N of 9 · Next: name". The step name
   is the H1 beneath it and the rail already names every step, so the name
   line goes; the count and the next-step line share one row. The sub-step
   count ("1 of 6: ...") keeps its text for assistive tech and is shown as the
   sub-rail dots at the end of the same row, so no information is lost. */
body.auth-page:not(.is-embedded) .wizard-progress {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0;
}
body.auth-page:not(.is-embedded) .wizard-progress-track { flex: 0 0 100%; }
body.auth-page:not(.is-embedded) .wizard-progress .auth-progress-label {
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: flex-start;
    margin: 0;
    font-size: 13px;
    color: var(--color-text-secondary);
}
body.auth-page:not(.is-embedded) #wizard-step-name { display: none; }
body.auth-page:not(.is-embedded) #wizard-step-count {
    padding: 0;
    background: none;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--color-text-secondary);
}
body.auth-page:not(.is-embedded) #wizard-next-label {
    display: inline;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 13px;
    text-align: left;
    color: var(--color-text-secondary);
}
body.auth-page:not(.is-embedded) #wizard-next-label[hidden] { display: none; }
body.auth-page:not(.is-embedded) #wizard-next-label::before {
    content: '\00b7';
    margin: 0 6px;
}
body.auth-page:not(.is-embedded) .wizard-subrail:not([hidden]) {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    margin: 0 0 0 auto;
    padding: 0;
}
body.auth-page:not(.is-embedded) .wizard-subrail-dots { display: flex; }
body.auth-page:not(.is-embedded) .wizard-subrail-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* L12. One primary-button size, as /login (17px semibold, 50px): Continue and
   the pay button. */
html body.auth-page:not(.is-embedded) .wizard-btn-next,
html body.auth-page:not(.is-embedded) .submit-btn {
    min-height: 50px;
    font-size: 1.0625rem;
    font-weight: 600;
    /* Lead D 2026-10-08: measured 53px tall / 100px radius against /login's
       50px / 999px pill. Same box as /login now; padding-block 0 lets
       min-height set the height, a wrapped label still grows the button. */
    padding-block: 0;
    line-height: 1.25;
    border-radius: 999px;
}

/* The "Verify" chip (step 1, e-mail) was 12px text on a 15% tint in a 12px-
   radius box: small and pale beside a 17px Continue. The mock's chip is a
   pill; the label steps up to 14px/600 and the tint to 22% so the accent ink
   keeps its contrast, at the field's own 44px height. */
body.auth-page:not(.is-embedded) .wizard-step[data-step="1"] .email-verify-row .verify-btn:not(.verified) {
    font-size: 14px;
    padding: 0 16px;
    min-width: 72px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 22%, transparent);
}

/* M1. The pay button is the accent primary (the mock's blue), not green.
   Label and price are untouched. */
html body.auth-page:not(.is-embedded) .submit-btn {
    background: var(--cfin-accent-fill, var(--accent-fill)) !important;
    border-color: var(--cfin-accent-fill, var(--accent-fill)) !important;
    background-image: none !important;
    color: #fff !important;
    box-shadow: none !important;
}
html body.auth-page:not(.is-embedded) .submit-btn:hover:not(:disabled) {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}

/* L9. No native number spinner on numeric fields; the value stays a number,
   min/step validation is unchanged. */
body.auth-page:not(.is-embedded) input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
body.auth-page:not(.is-embedded) input[type="number"]::-webkit-inner-spin-button,
body.auth-page:not(.is-embedded) input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* The inline replacement for the browser's validation bubble.
   Standalone AND embedded: the script that writes this message runs in the
   login page's sign-up sheet too (/register?embed=1), where an unstyled <p>
   read as the next field's label (tier-2 review of #3589).
   `--error-ink`, not `--color-error`/`--loss`: on these pages the loss colour
   is a neutral grey, and "an error is not a loss" (public-unify.css). */
body.auth-page .wizard-inline-error {
    display: block;
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 400;
    text-align: left;
    color: var(--error-ink);
}

/* L11. The resend countdown chip stays on one line, readable at AA: the
   disabled dimming (opacity .6) is what dropped it under contrast. */
body.auth-page:not(.is-embedded) .verify-btn.countdown {
    min-width: 92px;
    white-space: nowrap;
    opacity: 1;
}
body.auth-page:not(.is-embedded) .verify-btn .btn-timer { white-space: nowrap; }

/* L15. Footer tools: 44px tap targets, and no dangling separator (a flex gap
   separates them). */
body.auth-page:not(.is-embedded) .auth-legal-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 16px;
}
body.auth-page:not(.is-embedded) .auth-legal-tools-sep { display: none; }
body.auth-page:not(.is-embedded) .auth-legal-tools .auth-legal-cookie,
body.auth-page:not(.is-embedded) .auth-legal-tools .cfin-lang .cfin-lang-btn {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* A refused field scrolls clear of the fixed header, so its inline message is seen. */
body.auth-page:not(.is-embedded) .wizard-step :is(input, select, textarea) { scroll-margin-top: 140px; }