/* DEV-769 r2 — the customer auth shell (_AuthLayout): Login (sign-up / sign-in tabs), /signup/complete + invites
   (AcceptInvite), /signup/verify, and (DEV-782) the onboarding steps Business / Goal / Connect. Brand panel: lime
   #C3DD76, ink #13140D, cut-out photo (wwwroot/images/onboarding); the card restyles the classes and ids the auth scripts already use, so no script
   changes. The admin host never loads this file (it keeps Views/Shared/Auth/_AuthCard.cshtml). */

.as-page {
    --as-ink: #13140D;
    --as-ink-2: #34352E;
    --as-muted: #55564C;
    --as-muted-2: #6B6C62;
    --as-line: #E4E3DA;
    --as-rule: #ECEBE3;
    --as-field: #8E8F84;
    --as-lime: var(--animo-cta);   /* DEV-782: the one primary button (fonts.css) */
    --as-lime-hover: var(--animo-cta-hover);
    --as-bg: #FAFAF6;
    --as-err: #9A1C14;
    --as-err-bg: #FDF1F0;
    --as-err-line: #B42318;
    --as-ok: #33421A;
    --as-ok-bg: #F1F6E3;
    margin: 0;
    min-height: 100vh;
    background: var(--as-bg) !important;
    color: var(--as-ink);
    font-family: var(--animo-font);
    -webkit-font-smoothing: antialiased;
}
.as-page [hidden] { display: none !important; }
.as-page strong, .as-page b { font-weight: 600; }

/* ── Shell ─────────────────────────────────────────────────────────────── */
.as-shell { display: flex; min-height: 100vh; }

.as-brand {
    flex: 0 0 42%;
    max-width: 600px;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #C3DD76;
    background-image: radial-gradient(120% 80% at 100% 100%, #D6E99A 0%, #C3DD76 55%, #B4D25A 100%);
    color: var(--as-ink);
}
.as-brand__logo { position: relative; z-index: 1; display: inline-flex; width: max-content; margin: 40px 48px 0; color: var(--as-ink); border-radius: 4px; }
.as-brand__logo svg { width: 127px; height: 30px; fill: currentColor; }
.as-brand__logo:focus-visible { outline: 2px solid var(--as-ink); outline-offset: 4px; }
.as-brand__copy { position: relative; z-index: 1; padding: 64px 48px 0; }
.as-brand__eyebrow {
    margin: 0 0 14px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--as-ink-2);
}
.as-brand__headline {
    margin: 0;
    max-width: 12ch;
    font-size: 44px;
    line-height: 50px;
    font-weight: 600;
    letter-spacing: -.03em;
    color: var(--as-ink);
}
.as-brand__points { margin: 28px 0 0; padding: 0; list-style: none; max-width: 32ch; font-size: 15px; line-height: 22px; color: #26271F; }
.as-brand__points li { position: relative; margin-top: 12px; padding-left: 32px; }
.as-brand__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--as-ink);
}
.as-brand__points li::after {   /* the check mark, drawn (no image) */
    content: "";
    position: absolute;
    left: 7px;
    top: 5px;
    width: 5px;
    height: 9px;
    border: solid var(--as-lime);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.as-brand__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: max(0px, calc(100vh - 500px));
    margin-top: auto;
    object-fit: contain;
    object-position: right bottom;
    filter: drop-shadow(0 18px 28px rgba(19, 20, 13, .18));
    pointer-events: none;
    user-select: none;
}

.as-main {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 32px 24px;
}
.as-main__inner { width: 100%; max-width: 440px; margin: auto 0; display: flex; flex-direction: column; gap: 24px; }
.as-foot { margin-top: 32px; display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 12px; line-height: 16px; color: var(--as-muted-2); }
.as-foot__form { display: inline; margin: 0; }
.as-foot__btn { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.as-foot a { color: inherit; text-decoration: none; }
.as-foot a:hover { text-decoration: underline; }

/* ── The card: the Bootstrap wrappers the markup shares with the admin card are neutral here ─────────── */
.as-page .authincation-content,
.as-page .authincation-content > .row,
.as-page .authincation-content .col-xl-12 {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    flex: none;
    background: none;
    border: 0;
    box-shadow: none;
}
.as-page .auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 36px 36px 32px;
    background: #FFFFFF;
    border: 1px solid var(--as-line);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(19, 20, 13, .04), 0 16px 40px -16px rgba(19, 20, 13, .16);
}
.as-page .auth-form,
.as-page .auth-form input,
.as-page .auth-form button { font-family: var(--animo-font); }
.as-page #setup-form,
.as-page #totp,
.as-page .auth-form > form { display: flex; flex-direction: column; gap: 16px; margin: 0; }

.as-page .auth-h { margin: 0; font-size: 26px; line-height: 32px; font-weight: 600; letter-spacing: -.02em; color: var(--as-ink); text-align: left; }
.as-page .auth-h:focus { outline: none; }   /* focused by script on a view change (WCAG 2.4.3), not interactive */
.as-page .auth-sub { margin: -10px 0 0; font-size: 14px; line-height: 21px; color: var(--as-muted); text-align: left; }
.as-page .auth-lead { margin: 0; font-size: 14px; line-height: 21px; color: var(--as-muted); }
.as-page .auth-lead strong { color: var(--as-ink); }

/* Create account | Sign in */
.as-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; background: #F0EFE7; border-radius: 12px; }
.as-tabs [role="tab"] {
    height: 44px;   /* touch target */
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--as-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
}
.as-tabs [role="tab"]:hover { color: var(--as-ink); }
.as-tabs [role="tab"][aria-selected="true"] { background: #FFFFFF; color: var(--as-ink); box-shadow: 0 1px 2px rgba(19, 20, 13, .16), 0 0 0 1px rgba(19, 20, 13, .06); }
.as-tabs [role="tab"]:focus-visible { outline: 2px solid var(--as-ink); outline-offset: 2px; }

/* An icon above a state's heading (inbox, link problems). */
.as-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: #EEF4D8; color: #3F5213; }
.as-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.as-icon--warn { background: #FBEAF3; color: #8E2360; }

/* Buttons */
.as-page .gsi-material-button,
.as-page .auth-ghost {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 52px;
    padding: 0 16px;
    background: #FFFFFF;
    border: 1px solid #CFCEC4;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--as-ink);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}
.as-page .auth-ghost { height: 48px; }
.as-page .gsi-material-button:hover:not(:disabled),
.as-page .auth-ghost:hover:not(:disabled) { background: #F7F7F2; border-color: #A9A89C; color: var(--as-ink); }
.as-page .gsi-material-button:disabled,
.as-page .auth-ghost:disabled { opacity: .6; cursor: not-allowed; }
.as-page .gsi-material-button:focus-visible,
.as-page .auth-ghost:focus-visible { outline: 2px solid var(--as-ink); outline-offset: 2px; }
.as-page .gsi-material-button .gsi-logo { width: 20px; height: 20px; flex-shrink: 0; }

.as-page .login-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 16px;
    background: var(--as-lime);
    border: 0;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--animo-cta-ink);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s;
}
.as-page .login-primary:hover:not(:disabled) { background: var(--as-lime-hover); color: var(--animo-cta-ink); }
.as-page .login-primary:disabled { opacity: .6; cursor: not-allowed; }
.as-page .login-primary:focus-visible { outline: 2px solid var(--as-ink); outline-offset: 2px; }

/* Fields: the label stays after its input in the markup (the admin card floats it); here it sits above. */
.as-page .animo-field { position: relative; display: flex; flex-direction: column; gap: 6px; margin: 0; }
.as-page .animo-label,
.as-page .animo-input:focus + .animo-label,
.as-page .animo-input:not(:placeholder-shown) + .animo-label {
    order: -1;
    position: static;
    padding: 0;
    background: none;
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    color: var(--as-ink-2);
    pointer-events: auto;
    transition: none;
}
.as-page .animo-input {
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    padding: 0 14px;
    border: 1px solid var(--as-field);
    border-radius: 10px;
    background: #FFFFFF;
    font-size: 15px;
    color: var(--as-ink);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.as-page .animo-input::placeholder { color: transparent; }
.as-page .animo-input:focus { border-color: var(--as-ink); box-shadow: 0 0 0 3px rgba(195, 221, 118, .6); }
.as-page .animo-input[aria-invalid="true"] { border-color: var(--as-err-line); }
.as-page .animo-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, .15); }
.as-page .animo-input.locked,
.as-page .animo-input[readonly] { background: #F4F3EE; border-color: #CFCEC4; color: var(--as-ink-2); cursor: default; }
.as-page .animo-input.locked { padding-right: 84px; }
.as-page #login-password,
.as-page #pw { padding-right: 52px; }
.as-page .pw-eye,
.as-page .field-edit {
    position: absolute;
    right: 2px;
    bottom: 2px;
    top: auto;
    transform: none;
    height: 44px;   /* touch target, inside the 48px field */
    min-width: 44px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    line-height: 1;
}
.as-page .pw-eye { color: var(--as-muted); font-size: 16px; }
.as-page .pw-eye:hover { color: var(--as-ink); }
.as-page .field-edit { font-size: 13px; font-weight: 600; color: var(--as-ink); text-decoration: underline; text-underline-offset: 3px; }
.as-page .pw-eye:focus-visible,
.as-page .field-edit:focus-visible { outline: 2px solid var(--as-ink); outline-offset: -2px; }

/* The 6-digit codes (email sign-up code, authenticator): one input — paste + one-time-code autofill keep working. */
.as-page .animo-input.auth-code,
.as-page #totp-code {
    height: 60px;
    padding: 0 0 0 .5em;   /* letter-spacing trails the last digit: the indent keeps the digits centred */
    border-width: 1.5px;
    border-radius: 12px;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: .5em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.as-page .auth-or { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 12px; line-height: 16px; color: var(--as-muted-2); }
.as-page .auth-or::before,
.as-page .auth-or::after { content: ""; flex: 1; height: 1px; background: #E6E5DC; }
.as-page .auth-or span { font-size: inherit; color: inherit; }

/* Notes, the error slot and the status line */
.as-page .auth-note { margin: 0; font-size: 12px; line-height: 17px; color: var(--as-muted-2); }
.as-page .auth-note a { color: var(--as-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.as-page #pw-hint { margin-top: -10px; }
.as-callout { margin: 0; padding: 12px 14px; border-radius: 10px; background: #F6F5EF; font-size: 13px; line-height: 19px; color: var(--as-muted); }
.as-page #inbox-note { position: relative; padding-left: 22px; font-size: 13px; line-height: 19px; color: var(--as-muted); }
.as-page #inbox-note::before {   /* "this page is listening": the same-browser auto-continue */
    content: "";
    position: absolute;
    left: 2px;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7FA227;
    box-shadow: 0 0 0 4px rgba(127, 162, 39, .2);
}
.as-page .auth-error {
    position: relative;
    margin: 0;
    padding: 10px 12px 10px 36px;
    border-radius: 10px;
    background: var(--as-err-bg);
    color: var(--as-err);
    font-size: 13px;
    line-height: 19px;
}
.as-page .auth-error::before,
.as-page .auth-status:not(:empty)::before {
    position: absolute;
    left: 12px;
    top: 11px;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
}
.as-page .auth-error::before { content: "!"; }
.as-page .auth-error button {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.as-page .auth-error button:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; border-radius: 2px; }
.as-page .auth-status { margin: 0; text-align: left; font-size: 13px; line-height: 19px; color: var(--as-ok); }
.as-page .auth-status:not(:empty) { position: relative; padding: 10px 12px 10px 36px; border-radius: 10px; background: var(--as-ok-bg); }
.as-page .auth-status:not(:empty)::before { content: "i"; }
/* An empty live region stays in the accessibility tree but takes no room (and no flex gap). */
.as-page .auth-status:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Links and small actions */
.as-page .auth-forgot { margin: -8px 0 0; text-align: right; }
.as-page .auth-forgot a,
.as-page .auth-forgot button,
.as-page .auth-switch a,
.as-page .auth-switch button,
.as-page .as-inbox-row .auth-ghost {
    padding: 0;
    border: 0;
    background: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--as-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.as-page .auth-switch { margin: 0; text-align: center; font-size: 13px; line-height: 19px; color: var(--as-muted); }
.as-page .as-inbox-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--as-rule); }
.as-page .as-inbox-row .auth-switch { text-align: right; }
.as-page .as-inbox-row .auth-ghost { width: auto; height: auto; font-weight: 500; }
.as-page .as-inbox-row .auth-ghost:hover:not(:disabled) { background: none; }
.as-page .as-inbox-row .auth-ghost:disabled { opacity: 1; color: #7A7B71; text-decoration: none; }
.as-page .auth-forgot :focus-visible,
.as-page .auth-switch :focus-visible,
.as-page .as-inbox-row :focus-visible { outline: 2px solid var(--as-ink); outline-offset: 2px; border-radius: 2px; }
.as-page .auth-consent { margin: 0; text-align: center; font-size: 12px; line-height: 18px; color: #5E5F55; }
.as-page .auth-consent a { color: var(--as-ink); text-decoration: underline; text-underline-offset: 2px; }
.as-page .auth-invite { margin: 0; padding: 16px; border: 1px solid var(--as-line); border-radius: 12px; }
.as-page .auth-invite p { margin: 0 0 12px; font-size: 14px; line-height: 21px; color: var(--as-ink); }

/* The journey trail (Views/Shared/Auth/_AuthSteps: /signup/complete + onboarding): done = check, now = dot, to do = ring */
.as-steps { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 12px; line-height: 16px; color: var(--as-muted-2); }
.as-steps li { display: inline-flex; align-items: center; gap: 6px; }
.as-steps li + li::before { content: ""; width: 18px; height: 1px; margin-right: 2px; background: #D9D8CE; }
.as-steps .is-now { color: var(--as-ink); font-weight: 600; }
.as-steps .is-done { color: var(--as-ink-2); font-weight: 500; }
.as-steps__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--as-field); }
.is-now > .as-steps__dot { background: var(--as-ink); box-shadow: none; }
.is-done > .as-steps__dot { width: 4px; height: 8px; margin: 0 3px 3px 2px; border: solid #3F5213; border-width: 0 2px 2px 0; border-radius: 0; box-shadow: none; transform: rotate(45deg); }

/* Onboarding (DEV-782): optional marker, inline link, selects, goal cards, the source rows, the small buttons */
.as-page .as-opt { font-weight: 400; color: var(--as-muted-2); }
.as-page .as-link { color: var(--as-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.as-page select.animo-input { cursor: pointer; }
.as-main__inner:has(.as-options) { max-width: 480px; }   /* the goal titles + MMM tag on one line (board A3) */
.as-options { display: flex; flex-direction: column; gap: 10px; }
.as-option { display: flex; gap: 12px; margin: 0; padding: 14px 16px; border: 1px solid var(--as-line); border-radius: 14px; background: #FFFFFF; cursor: pointer; transition: border-color .15s, background .15s; }
.as-option:hover { border-color: #CFCEC4; }
.as-option:has(input:checked) { padding: 13px 15px; border: 2px solid var(--as-ink); background: #FBFDF4; }
.as-option:has(input:focus-visible) { outline: 2px solid var(--as-ink); outline-offset: 2px; }
.as-option__box { position: relative; flex: none; width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--as-field); }
.as-option:has(input:checked) .as-option__box { background: var(--as-ink); box-shadow: none; }
.as-option:has(input:checked) .as-option__box::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid var(--as-lime); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.as-option__text { display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 19px; color: var(--as-muted); }
.as-option__text strong { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 20px; color: var(--as-ink); }
.as-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: #EEF4D8; color: #3F5213; font-size: 11px; font-weight: 600; }
.as-sources { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.as-source { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--as-line); border-radius: 14px; }
.as-source__logo { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; }
.as-source__logo img { filter: brightness(0) invert(1); }   /* the monochrome brand mark, white on the brand colour */
.as-source__text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; line-height: 19px; color: var(--as-muted); }
.as-source__text strong { font-size: 15px; line-height: 21px; color: var(--as-ink); }
.as-page .as-btn-sm { flex: none; width: auto; height: 32px; padding: 0 14px; border-radius: 8px; font-size: 13px; }
.as-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.as-meter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: -10px; }
.as-meter span { height: 4px; border-radius: 2px; background: #E6E5DC; transition: background .2s; }
.as-meter[data-score="1"] span:nth-child(-n+1) { background: #B42318; }
.as-meter[data-score="2"] span:nth-child(-n+2) { background: #B26B00; }
.as-meter[data-score="3"] span:nth-child(-n+3) { background: #4F8A1F; }
.as-meter[data-score="4"] span { background: #2F6B12; }
.as-rule { display: flex; justify-content: space-between; gap: 12px; margin-top: -10px; }
.as-rule.is-met #pw-rule-text { color: #2F6B12; }
.as-rule.is-met #pw-rule-text::before { content: ""; display: inline-block; width: 4px; height: 8px; margin: 0 7px 1px 2px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.as-rule #pw-strength { font-weight: 600; color: var(--as-ink-2); }

/* Under the card (Login): trust facts + platforms — not while the card asks for the second factor. */
.as-extras { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.as-main__inner:has(#totp:not([hidden])) .as-extras { display: none; }
.as-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin: 0; padding: 0; list-style: none; font-size: 12px; line-height: 16px; color: var(--as-muted); }
.as-trust li { display: inline-flex; align-items: center; gap: 6px; }
.as-trust svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.as-platforms { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 18px; border-top: 1px solid #E8E7DE; }
.as-platforms p { margin: 0; font-size: 12px; line-height: 16px; color: var(--as-muted-2); }
.as-platforms__marks { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 20px; color: #5E5F55; }
.as-platforms__marks svg { width: 18px; height: 18px; fill: currentColor; }
.as-platforms__marks span { font-size: 12px; font-weight: 500; }

/* ── Phone: the panel becomes a lime band, the card overlaps it ───────────────────────────── */
@media (max-width: 959px) {
    .as-shell { flex-direction: column; }
    .as-brand { position: static; flex: none; max-width: none; height: auto; padding-bottom: 44px; }
    .as-brand__logo { margin: 20px 20px 0; }
    .as-brand__logo svg { width: 102px; height: 24px; }
    .as-brand__copy { padding: 16px 20px 0; }
    .as-brand__eyebrow { margin-bottom: 6px; font-size: 11px; }
    .as-brand__headline { max-width: 18ch; font-size: 24px; line-height: 29px; letter-spacing: -.02em; }
    .as-brand__points,
    .as-brand__img { display: none; }
    .as-main { position: relative; margin-top: -24px; padding: 0 12px 16px; }
    .as-main__inner { margin: 0; gap: 20px; }
    .as-page .auth-form { padding: 24px 20px; }
    .as-foot { margin-top: 12px; }
    /* 44px touch targets for the small text actions. */
    .as-page .auth-forgot button,
    .as-page .auth-switch a,
    .as-page .auth-switch button,
    .as-page .as-inbox-row .auth-ghost,
    .as-foot a { display: inline-flex; align-items: center; min-height: 44px; }
    .as-page .auth-forgot { margin-top: -14px; }
    .as-page .as-inbox-row { padding-top: 4px; }
    /* Waiting for the code: the band keeps only logo + eyebrow, so the code field sits higher above the keyboard. */
    .as-shell:has(.as-icon:not([hidden])) .as-brand__headline { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .as-page * { transition: none !important; }
}

/* DEV-782: a source the workspace already connected (revisit of the Connect step) */
.as-source__done { flex: none; display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px; background: #F1F6E3; color: #33421A; font-size: 12px; font-weight: 600; }