/* Sign-up, 3.3.1: Phil's native onboarding mockup (design canvas "Supwell onboarding flow", five phone
   screens). Screen 1 "About you" is Onboarding.razor, screens 2-4 OnboardingStep.razor, screen 5 the
   paywall (SubscribeMobile / Subscribe, styled there). Since 3.3.2 the screens before them wear it too
   (Welcome, Login, InviteLanding, MagicLinkCallback, AuthSuccess; see "Before sign-in" below). Plain CSS
   (Tailwind doesn't compile this file).
   Linked by both hosts: Supwell/wwwroot/index.html and Supwell.Web/Components/App.razor.

   Every screen sits in OnboardingLayout's shell (app.css .onboarding-layout): one viewport, the device
   safe areas and the iPhone Duo fold padding come from there. A screen is a column: the nav bar
   (44pt), a body that scrolls on its own, and the footer with the buttons pinned above the home
   indicator. The document never scrolls (the shell locks it; the app's JS pin undoes WKWebView's
   focus drift), so the keyboard can't make the page jump. On iOS the native bridge reports the keyboard
   height (--sw-kbd-h-ios, SupwellWebViewHandler) and the screen gives that room back at the bottom, so
   the Continue button rides above the keyboard instead of under it; Android pans the window itself. */

.sw-onb {
    --onb-accent: #374120;
    --onb-alt: #575322;
    --onb-muted: #6b6757;
    --onb-fill: #ebe7e1;
    --onb-track: #e3dfd7;
    --onb-off: #d4cfc5;
    --onb-ok: #2f7a35;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 0 20px;
    color: var(--onb-accent);
    font-family: var(--sw-font-ui);
    -webkit-tap-highlight-color: transparent;
}
html.kbd-open .sw-onb {
    padding-bottom: max(0px, calc(var(--sw-kbd-h-ios, 0px) - var(--sw-safe-b)));
}

/* --- Nav bar: Back, the step bars, Skip --- */
.sw-onb-nav {
    flex: none;
    height: 44px;
    margin: 0 -8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sw-onb-nav__slot { width: 44px; height: 44px; flex: none; }
.sw-onb-nav__back {
    width: 44px; height: 44px; flex: none;
    border: 0; background: transparent; padding: 0 0 0 4px;
    display: flex; align-items: center; justify-content: flex-start;
    color: var(--onb-accent); cursor: pointer;
}
.sw-onb-nav__skip {
    min-width: 44px; height: 44px; flex: none;
    border: 0; background: transparent; padding: 0 4px 0 0;
    color: var(--onb-accent); font: 500 16px var(--sw-font-head); text-align: right; cursor: pointer;
}
.sw-onb-nav__back:active, .sw-onb-nav__skip:active { opacity: .6; }
.sw-onb-nav__back:disabled, .sw-onb-nav__skip:disabled { opacity: .4; }
.sw-onb-nav__bars { display: flex; align-items: center; gap: 4px; }
.sw-onb-nav__bar { width: 32px; height: 4px; border-radius: 2px; background: var(--onb-off); transition: background-color .25s ease; }
.sw-onb-nav__bar.is-on { background: var(--onb-accent); }

/* --- Body: the only scroller --- */
.sw-onb__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    margin: 0 -20px;
    padding: 0 20px 12px;
}
.sw-onb__head { display: flex; flex-direction: column; gap: 6px; margin-top: 20px; }
.sw-onb__title {
    margin: 0;
    font: 700 34px/1.1 var(--sw-font-head);
    letter-spacing: -0.02em;
    color: var(--onb-accent);
    outline: none;
    text-wrap: balance;
}
.sw-onb__lead { margin: 0; font: 400 15px/1.45 var(--sw-font-ui); color: var(--onb-muted); }
.sw-onb__note { margin: 8px 16px 0; font: 400 13px/1.4 var(--sw-font-ui); color: var(--onb-muted); }
.sw-onb__note > span + span::before { content: " "; }
.sw-onb__note--gap { margin-top: 16px; }
.sw-onb__error {
    margin: 16px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b42318;
    font: 500 14px/1.4 var(--sw-font-ui);
}

/* --- Inset grouped list --- */
.sw-onb-group {
    margin-top: 24px;
    background: var(--sw-card, #fff);
    border-radius: 12px;
    overflow: hidden;
}
.sw-onb__note + .sw-onb-group { margin-top: 20px; }
.sw-onb-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 16px;
}
.sw-onb-row + .sw-onb-row::before,
.sw-onb-dev + .sw-onb-dev::before {
    content: "";
    position: absolute;
    top: 0; right: 0; left: 16px;
    border-top: .5px solid var(--sw-line, #e5e1d9);
}
.sw-onb-dev + .sw-onb-dev::before { left: 64px; }
.sw-onb-row__label { width: 112px; flex: none; font: 400 16px var(--sw-font-ui); color: var(--onb-accent); }
.sw-onb-row__label--grow { flex: 1 1 auto; width: auto; }
.sw-onb-row__input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    font: 400 16px var(--sw-font-ui); /* 16px: iOS doesn't zoom into the field */
    color: var(--onb-accent);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.sw-onb-row__input::placeholder { color: var(--onb-muted); opacity: 1; } /* the mockup's: 5.7:1 on white (.7 was 3:1) */
.sw-onb-row__input--locked,
.sw-onb-row__input:disabled { color: var(--onb-muted); -webkit-text-fill-color: var(--onb-muted); opacity: 1; }
.sw-onb-row__at { font: 400 16px var(--sw-font-ui); color: var(--onb-muted); margin-right: -6px; }
.sw-onb-row__ok { flex: none; color: var(--onb-ok); }
/* The username row: label, @, the field, the check; UsernameField's status line and suggestions wrap
   under the field. */
.sw-onb-row--user { flex-wrap: wrap; padding-top: 4px; padding-bottom: 6px; }
/* flex-basis 0 so the field never claims a whole line of its own (w-full on it is layered Tailwind). */
.sw-onb-row--user > input { width: auto; flex: 1 1 0; }
.sw-onb-row--user > [aria-live] { order: 1; flex: 1 0 100%; margin: -6px 0 0 120px !important; min-height: 0 !important; }
.sw-onb-row--user > [aria-live]:not(:has(*)) { display: none; }

/* Date of birth: a pill with the date, the native input transparent on top of it. */
.sw-onb-date { position: relative; display: inline-flex; align-items: center; height: 44px; flex: none; }
.sw-onb-pill {
    display: inline-flex; align-items: center;
    height: 30px; padding: 0 16px; border-radius: 15px;
    background: var(--onb-fill);
    font: 600 14px var(--sw-font-head); color: var(--onb-accent);
    white-space: nowrap;
}
.sw-onb-pill--date { height: 34px; padding: 0 12px; border-radius: 8px; font: 400 16px var(--sw-font-ui); }
.sw-onb-pill--date.is-empty { color: var(--onb-muted); }
.sw-onb-date__input {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    margin: 0; padding: 0; border: 0;
    opacity: 0;
    font-size: 16px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.sw-onb-date:focus-within .sw-onb-pill { box-shadow: 0 0 0 2px rgba(55, 65, 32, .35); }

/* Terms: one row with a checkbox. */
.sw-onb-check { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; cursor: pointer; }
.sw-onb-check__box { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; left: 16px; top: 14px; }
.sw-onb-check__mark {
    flex: none; width: 22px; height: 22px; border-radius: 6px;
    border: 1.5px solid var(--onb-accent); background: #fff; color: #f6f3e6;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color .15s ease;
}
.sw-onb-check__box:checked + .sw-onb-check__mark { background: var(--onb-accent); }
.sw-onb-check__box:focus-visible + .sw-onb-check__mark { box-shadow: 0 0 0 3px rgba(55, 65, 32, .3); }
.sw-onb-check__text { font: 400 15px/1.4 var(--sw-font-ui); color: var(--onb-accent); }
.sw-onb-check__text a { color: var(--onb-accent); text-decoration: underline; text-underline-offset: 2px; }

.sw-onb-link {
    display: block; width: 100%; min-height: 44px; margin-top: 8px;
    border: 0; background: transparent;
    font: 500 14px var(--sw-font-ui); color: var(--onb-accent);
    text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.sw-onb-link--muted { color: var(--onb-muted); }
.sw-onb-link:disabled { opacity: .5; }

/* About you's "Signing up as … Not you?" (3.3.2): the proven address and the way out to another one. A
   long address wraps anywhere rather than pushing the line wide; the button keeps a 44px tap height. */
.sw-onb-who {
    margin: 12px 0 0;
    text-align: center;
    font: 400 14px/1.45 var(--sw-font-ui);
    color: var(--onb-muted);
    overflow-wrap: anywhere;
}
.sw-onb-who__email { color: var(--onb-accent); font-weight: 500; }
.sw-onb-who__out {
    display: inline-flex; align-items: center;
    min-height: 44px; margin: 0 0 0 4px; padding: 0 4px;
    border: 0; background: transparent; vertical-align: middle;
    font: 600 14px var(--sw-font-ui); color: var(--onb-accent);
    text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.sw-onb-who__out:active { opacity: .6; }
.sw-onb-who__out:disabled { opacity: .5; }

/* --- Footer and buttons --- */
.sw-onb__foot {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 16px 0 max(8px, calc(24px - var(--sw-safe-b)));
}
.sw-onb-btn {
    box-sizing: border-box;
    width: 100%;
    height: 52px;
    border: 0;
    border-radius: 14px;
    background: var(--onb-accent);
    color: #f6f3e6;
    font: 600 17px var(--sw-font-head);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    user-select: none; -webkit-user-select: none;
    transition: opacity .15s ease;
}
.sw-onb-btn:active { opacity: .8; }
.sw-onb-btn:disabled, .sw-onb-btn.is-busy { opacity: .6; }
.sw-onb-btn:focus-visible { outline: 2px solid var(--onb-accent); outline-offset: 2px; }
.sw-onb-btn--text { height: 44px; background: transparent; color: var(--onb-accent); font-weight: 500; font-size: 16px; }

/* --- 2 · Connect your watch (DevicesPanel Variant=Signup) --- */
/* The panel's own section is white (activation.css .sw-dev); here the grouped list is the only surface. */
.sw-dev--signup { background: transparent; }
.sw-dev--signup .sw-onb-group { margin-top: 24px; }
.sw-onb-dev { position: relative; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 16px; }
.sw-onb-dev__tile {
    flex: none; width: 36px; height: 36px; border-radius: 8px;
    background: var(--onb-accent, #374120); color: #f6f3e6;
    display: flex; align-items: center; justify-content: center;
}
.sw-onb-dev__tile.is-alt { background: var(--onb-alt, #575322); }
.sw-onb-dev__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sw-onb-dev__name { margin: 0; font: 400 16px var(--sw-font-ui); color: var(--onb-accent, #374120); }
.sw-onb-dev__sub { margin: 0; font: 400 13px/1.35 var(--sw-font-ui); color: var(--onb-muted, #6b6757); }
.sw-onb-dev__note { margin: 4px 0 0; font: 400 12px/1.35 var(--sw-font-ui); color: var(--onb-muted, #6b6757); }
.sw-onb-dev__note.is-error { color: #b42318; }
.sw-onb-dev__side { flex: none; display: flex; align-items: center; }
.sw-onb-dev__connect { height: 44px; padding: 0; border: 0; background: transparent; display: flex; align-items: center; cursor: pointer; }
.sw-onb-dev__connect:active .sw-onb-pill { opacity: .7; }
.sw-onb-dev__text { height: 44px; padding: 0 4px; border: 0; background: transparent; font: 600 14px var(--sw-font-head); color: var(--onb-accent, #374120); cursor: pointer; }
.sw-onb-dev__busy { display: inline-flex; align-items: center; height: 44px; padding: 0 8px; }
.sw-onb-dev__ok { display: inline-flex; align-items: center; gap: 5px; font: 600 14px var(--sw-font-head); color: var(--onb-ok, #2f7a35); }

/* --- 3 · Shoe size: iOS segmented control and the wheel (SizeWheel, swUi.wheelAttach) --- */
/* Until the profile's size is read the switch and the wheel keep their room, unseen (nothing drops in). */
.sw-onb-size.is-loading { visibility: hidden; }
.sw-onb-seg { margin-top: 24px; display: flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--onb-track); }
/* Four systems since 3.3.2 (US M, US W, EU, UK, as Settings and the marketplace filter): at 320px each is
   still ~68px wide for a 36px label, nowrap so none breaks. The 32px iOS segment keeps its look; the hit
   area reaches 44px above and below it (::before), inside the gaps to the title and the wheel. */
.sw-onb-seg__opt {
    position: relative;
    flex: 1 1 0; min-width: 0; height: 32px; padding: 0 4px; border: 0; border-radius: 7px; background: transparent;
    font: 500 14px var(--sw-font-head); color: var(--onb-accent); cursor: pointer; white-space: nowrap;
    transition: background-color .2s ease, box-shadow .2s ease;
}
.sw-onb-seg__opt::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
.sw-onb-seg__opt.is-on { background: #fff; font-weight: 600; box-shadow: 0 1px 3px rgba(55, 65, 32, .14), 0 0 0 .5px rgba(55, 65, 32, .04); }
.sw-wheel-field { margin: 16px 0 0; padding: 0; border: 0; min-width: 0; }
.sw-wheel { position: relative; height: 252px; background: #fff; border-radius: 12px; overflow: hidden; touch-action: pan-y; }
.sw-wheel__band { position: absolute; left: 8px; right: 8px; top: 108px; height: 36px; border-radius: 8px; background: var(--sw-ground, #efeae6); pointer-events: none; }
.sw-wheel__list {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    padding: 108px 0;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    user-select: none; -webkit-user-select: none;
}
.sw-wheel__list::-webkit-scrollbar { display: none; }
.sw-wheel__list:focus { outline: none; }
/* The stand-in select is 1px and clipped: while it has keyboard focus the wheel wears the ring. */
.sw-wheel-field:has(.sw-wheel__a11y:focus-visible) .sw-wheel { box-shadow: 0 0 0 2px rgba(55, 65, 32, .35); }
/* A save in flight: the column holds still, so what it shows is what was saved. */
.sw-wheel.is-disabled .sw-wheel__list { pointer-events: none; overflow-y: hidden; }
.sw-wheel__item {
    height: 36px;
    display: flex; align-items: center; justify-content: center;
    scroll-snap-align: center;
    font: 400 22px var(--sw-font-ui);
    font-variant-numeric: tabular-nums;
    color: var(--onb-accent);
    cursor: pointer;
    will-change: opacity, transform;
}
.sw-wheel__item.is-on { font-weight: 500; }

/* --- 4 · Don't miss a reply: sample notifications --- */
.sw-onb-push { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sw-onb-push__card {
    box-sizing: border-box;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: .5px solid rgba(255, 255, 255, .9);
    box-shadow: 0 8px 24px rgba(55, 65, 32, .08);
}
.sw-onb-push__icon {
    flex: none; width: 38px; height: 38px; border-radius: 9px;
    background: var(--onb-accent); color: #f6f3e6;
    display: flex; align-items: center; justify-content: center;
    font: 700 18px var(--sw-font-head);
}
.sw-onb-push__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sw-onb-push__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sw-onb-push__app { font: 600 15px var(--sw-font-ui); color: var(--onb-accent); }
.sw-onb-push__when { font: 400 13px var(--sw-font-ui); color: var(--onb-muted); }
.sw-onb-push__text { font: 400 15px/1.3 var(--sw-font-ui); color: var(--onb-accent); }

/* --- Before sign-in (3.3.2): Welcome, Login, InviteLanding, the sign-in hops ---
   MJ 11/3: "I'd update pre-PII collection flow to match. Now it feels super disjointed." The screens a new
   member sees before any personal info is asked wear the steps' shell above: the same nav bar slot (the
   logo where the bars are: these aren't numbered steps; AuthHeader), Large Title, lead, grouped rows,
   notes, error and pinned button. Only what those screens need beyond the steps is here. */

/* The logo in the nav bar's middle (1024 x 372 artwork): the brand mark on the front door and the sign-in
   screens. On Login it links home. */
.sw-onb-nav__brand { display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 8px; }
.sw-onb-nav__brand img { display: block; height: 30px; width: auto; }
a.sw-onb-nav__brand:active { opacity: .6; }
a.sw-onb-nav__brand:focus-visible { outline: 2px solid var(--onb-accent); outline-offset: 2px; border-radius: 8px; }

/* Welcome's value list (MJ's "Paid Features" 03a): a grouped card, one row per line, her 01-05 leading. */
.sw-onb-list { list-style: none; margin-right: 0; margin-bottom: 0; margin-left: 0; padding: 0; }
.sw-onb-row--num { align-items: flex-start; gap: 12px; min-height: 0; padding: 14px 16px; }
.sw-onb-row--num + .sw-onb-row--num::before { left: 52px; } /* the hairline starts under the text */
.sw-onb-row__num {
    flex: none; width: 24px;
    font: 600 15px/22px var(--sw-font-head);
    font-variant-numeric: tabular-nums;
    color: var(--onb-muted);
}
.sw-onb-row__text { flex: 1 1 auto; min-width: 0; font: 400 16px/22px var(--sw-font-ui); color: var(--onb-accent); }

/* The invite's friend, over the title. */
.sw-onb-avatar {
    display: block; width: 64px; height: 64px; margin-bottom: 10px;
    border-radius: 9999px; object-fit: cover; background-color: var(--sw-line, #e5e1d9);
}

/* Under the footer's button: MEMBER SUPPORTED (Welcome with freemium off, the invite). */
.sw-onb__caption {
    margin: 4px 0 0; text-align: center;
    font: 600 12px/18px var(--sw-font-head); letter-spacing: .06em;
    color: var(--onb-muted);
}
/* "Already have an account? Sign In": one line, Sign In the link. */
.sw-onb-alt {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 6px;
    min-height: 44px;
    font: 400 15px var(--sw-font-ui); color: var(--onb-muted);
}
.sw-onb-alt__btn {
    min-height: 44px; padding: 0 4px; border: 0; background: transparent;
    font: 600 16px var(--sw-font-head); color: var(--onb-accent);
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.sw-onb-alt__btn:active { opacity: .6; }

/* Login: the send form wraps the body and the footer (its submit is the pinned button). */
.sw-onb__form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* The help line ends the body: at the bottom on a tall screen, after the content on a short one. */
.sw-onb__body--auth { display: flex; flex-direction: column; }
.sw-onb__state { flex: none; }
.sw-onb-row__label--short { width: 88px; }
/* Code entry's address: the value with Change at the end of the row. */
.sw-onb-row__value {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 400 16px var(--sw-font-ui); color: var(--onb-accent);
    -webkit-user-select: text; user-select: text;
}
.sw-onb-row__action {
    flex: none; height: 44px; margin-right: -8px; padding: 0 8px;
    border: 0; background: transparent;
    font: 600 16px var(--sw-font-head); color: var(--onb-accent); cursor: pointer;
}
.sw-onb-row__action:active { opacity: .6; }
.sw-onb-row__action:disabled { opacity: .4; }
/* A heading over something that isn't a grouped row (the code cells), in the note's inset and type. */
.sw-onb__section { display: block; margin: 24px 16px 8px; font: 400 13px/1.3 var(--sw-font-ui); color: var(--onb-muted); }
.sw-onb__note--error { color: #b42318; }
.sw-onb__note--info { color: var(--onb-accent); }
.sw-onb__error-title { margin: 0; font-weight: 600; }
.sw-onb__error-body { margin: 2px 0 0; font-weight: 400; }
/* The resend countdown: a text link that isn't one yet. */
.sw-onb-link--wait { color: var(--onb-muted); text-decoration: none; }
.sw-onb-link--wait:disabled { opacity: 1; }
.sw-onb-btn__spin { display: inline-flex; margin-right: 8px; }
/* A notice carried in from a failed or expired link: a white card in the grouped list's shape. */
.sw-onb-notice {
    display: flex; align-items: flex-start; gap: 12px;
    margin-top: 24px; padding: 14px 16px;
    border-radius: 12px; background: var(--sw-card, #fff);
}
.sw-onb-notice + .sw-onb-group { margin-top: 16px; }
.sw-onb-notice__icon { flex: none; margin-top: 1px; color: var(--onb-accent); }
.sw-onb-notice__main { min-width: 0; }
.sw-onb-notice__title { margin: 0; font: 600 15px/1.35 var(--sw-font-head); color: var(--onb-accent); }
.sw-onb-notice__body { margin: 2px 0 0; font: 400 13px/1.4 var(--sw-font-ui); color: var(--onb-muted); }

/* The four code cells (app.css .auth-otp): the grouped rows' white, no outline; the next cell's focus ring
   and caret stay app.css's (the same olive). Digits in the head font. */
.sw-onb .auth-otp__cell {
    border-color: transparent;
    background: var(--sw-card, #fff);
    color: var(--onb-accent);
    font: 600 28px/32px var(--sw-font-head);
    font-variant-numeric: tabular-nums;
}

/* Trouble signing in? and its panel. */
.sw-onb-help { margin-top: auto; padding-top: 24px; text-align: center; }
.sw-onb-help__line { margin: 0; font: 400 14px/20px var(--sw-font-ui); color: var(--onb-muted); }
.sw-onb-help__btn {
    min-height: 44px; margin-left: 6px; padding: 0 4px; border: 0; background: transparent;
    font: 600 14px var(--sw-font-head); color: var(--onb-accent);
    text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.sw-onb-help__btn:active { opacity: .6; }
.sw-onb-help__panel {
    margin: 4px 0 0; padding: 14px 16px;
    border-radius: 12px; background: var(--sw-card, #fff);
    text-align: left; color: var(--onb-accent);
}
.sw-onb-help__text { margin: 0; font: 400 15px/1.4 var(--sw-font-ui); }
.sw-onb-help__email { margin: 4px 0 0; font: 600 16px var(--sw-font-head); -webkit-user-select: all; user-select: all; }
/* Side by side while both labels fit on one line, stacked otherwise. "Open email app" (600 14px head font)
   is about 105px, so an action needs ~130px with its padding: at 320px wide the panel's 248px inside gave
   each of two flex: 1 1 0 actions ~120px and the label broke after "Open email", a two-line button beside
   the one-line Copy. A 136px basis (a little over, for the fallback font) puts them side by side from a
   280px panel (a 352px screen: 360px Androids, the 375 and 402 iPhones) and stacks them, full width, below
   that (the 320px SE, compact Androids, narrow web windows); nowrap so a label never breaks either way. */
.sw-onb-help__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sw-onb-help__act {
    box-sizing: border-box; flex: 1 1 136px; min-height: 40px; padding: 0 12px; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 10px;
    background: var(--onb-accent); color: #f6f3e6;
    font: 600 14px var(--sw-font-head); text-decoration: none; cursor: pointer;
}
.sw-onb-help__act--alt { background: var(--onb-fill); color: var(--onb-accent); }
.sw-onb-help__act:active { opacity: .7; }

/* The sign-in hops' spinner, and the invite's while it looks the code up. */
.sw-onb-wait { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.sw-onb-wait .sw-onb__lead { margin: 0; }

/* Short viewports (app.css relaxes the shell under 480px): the body grows and the document scrolls. */
@media (max-height: 480px) {
    .sw-onb { height: auto; min-height: 100%; }
    .sw-onb__body { overflow: visible; flex: 1 0 auto; }
    .sw-onb__form { flex: 1 0 auto; }
}

/* App tablets (3.3.3, the app on an iPad; css/chrome.css "0a. APP TABLETS": html.sw-app, 700 x 700 and up).
   The phone column pinned its footer to the screen's bottom edge, so on a 1376-tall iPad Pro 13 Join Us
   sat ~900pt under the last line of copy. Here the column is a block centred in the screen: at least
   640 tall (so the steps keep one height and the progress bars don't move between them), at most the
   screen (the body scrolls beyond that, as on a phone), the footer right under its content. With the
   software keyboard up the shell gives the keyboard's height back at the bottom and the column centres
   in what is left, so Continue rides above the keyboard as on a phone (iPadOS moves a form sheet the
   same way); the phone's own padding-bottom for it is not added on top. Android pans for the keyboard
   and has no --sw-kbd-h-ios, so there only the safe area is kept. Phones and the iPhone Duo never
   match, and the web has no html.sw-app. */
@media (min-width: 700px) and (min-height: 700px) {
    html.sw-app .sw-onb {
        flex: 0 1 auto;
        height: auto;
        min-height: min(100%, 640px);
        max-height: 100%;
        margin-block: auto;
    }
    html.sw-app.kbd-open .sw-onb { padding-bottom: 0; }
    html.sw-app.kbd-open .onboarding-layout { padding-bottom: max(var(--sw-safe-b), var(--sw-kbd-h-ios, 0px)); }

    /* The paywall (SubscribeMobile, screen 5 and a Guest's full-screen paywall) the same way: its logo, card
       and buttons are one stack centred in the screen, not a card at the top and the buttons ~600pt below
       it at the bottom edge. The body still scrolls if it is ever taller than the screen. */
    html.sw-app .paywall-page { justify-content: center; }
    html.sw-app .paywall-page > .sw-pw-body { flex: 0 1 auto; }
    html.sw-app .sw-pw-gap { flex: 0 0 28px !important; }   /* beats its inline flex: 1 0 20px */
}

@media (prefers-reduced-motion: reduce) {
    .sw-onb-nav__bar, .sw-onb-seg__opt, .sw-onb-check__mark, .sw-onb-btn { transition: none; }
}