/*
 * Signed-out screens: sign in (site/login) and get started (register/get-started).
 *
 * Ported from the Next port's auth screens (eurosign-next:
 * src/features/auth/components/*) so both halves of the product show the same
 * front door. Token values are copied from that app's @theme block rather than
 * re-derived, and every rule is scoped under .auth-page — Materialize still
 * owns the bare input/label/checkbox selectors on this side of the product,
 * and this file must not reach the rest of the app.
 *
 * Controls carry `browser-default` as well as `.auth-input`: that is
 * Materialize's own opt-out hook, and it is the only reliable way past rules
 * like `input[type=text]:not(.browser-default):focus:not([readonly])`, which
 * out-specifies anything sane written here.
 */

.auth-page {
    /* Surfaces / ink */
    --es-surface: #ffffff;
    --es-sunken: #f5f7f7;
    --es-ink: #050505;
    --es-ink-muted: #444444;
    --es-ink-faint: #6f7379;

    /* Rules */
    --es-line: #ebedf2;
    --es-line-strong: #dddfe2;
    --es-line-control: #838b98;
    --es-line-control-hover: #6b7382;

    /* Accent */
    --es-accent: #0366d6;
    --es-accent-hover: #0a55ae;
    --es-accent-subtle: #dceafd;

    /* Semantic */
    --es-critical: #c0392b;
    --es-critical-subtle: #fdeceb;
    --es-positive: #0b7355;
    --es-caution: #8e651b;
    --es-caution-subtle: #fde89b;

    --es-radius: 6px;
    --es-radius-card: 8px;
    --es-shadow-card: 0 1px 2px 0 rgb(16 20 28 / 0.04);
    --es-shadow-focus: 0 0 0 3px rgb(3 102 214 / 0.28);
    --es-shadow-focus-critical: 0 0 0 3px rgb(192 57 43 / 0.25);

    width: 100%;
}

/* ---- PAGE SHELL --------------------------------------------------------- */

/*
 * The signed-out screens run on views/layouts/auth.php: no app header, no
 * navigation, no app footer. Everything the page needs is below.
 */
.auth-body {
    min-height: 100vh;
    margin: 0;
    /* The decorative wash, so the card reads as a surface on top of the page
       rather than a lone box on flat grey. */
    background: #f5f7f7 linear-gradient(to bottom, #dceafd 0, rgb(245 247 247 / 0) 100%)
        no-repeat top center / 100% 320px;
    color: #050505;
}

.auth-shell {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.auth-shell__main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
}

@media (min-width: 640px) {
    .auth-shell__main {
        padding: 56px 16px;
    }
}

.auth-brand {
    display: block;
    margin-bottom: 28px;
    line-height: 0;
}

.auth-brand svg {
    display: block;
}

/* ---- FOOTER ------------------------------------------------------------- */

.auth-shell__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 16px;
    padding: 0 16px 32px;
    font-size: 12px;
    line-height: 16px;
    color: #6f7379;
}

.auth-locale {
    display: flex;
    align-items: center;
    gap: 6px;
}

.auth-locale i {
    font-size: 12px;
}

/* The native select, stripped back to plain text so it reads as the quiet
   footer control it is rather than a form field. `browser-default` is required
   (Materialize hides every bare <select> and swaps in its own widget), which
   drags in site.css's `select.browser-default { border: … !important }` — hence
   the !important here. */
.auth-body select#app-language-selector {
    width: auto;
    height: auto;
    margin: 0;
    padding: 2px 4px;
    font-family: inherit;
    font-size: 12px;
    line-height: 16px;
    color: #6f7379;
    background: none;
    border: 0 !important;
    border-radius: 4px;
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.auth-body select#app-language-selector:hover {
    color: #050505;
}

/* footer.css positions .accessibility for the dark app footer; this is the
   same control on a light ground with the dropdown opening upwards. */
.auth-body .auth-accessibility {
    position: relative;
    color: #6f7379;
}

.auth-body .auth-accessibility > span {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.auth-body .auth-accessibility > span:hover {
    color: #050505;
}

.auth-body .auth-accessibility .dropdown {
    bottom: 100%;
    top: auto;
    left: 50%;
    margin-bottom: 8px;
    transform: translateX(-50%);
    color: #050505;
    text-align: left;
}

/* ---- CARD --------------------------------------------------------------- */

.auth-card {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.auth-card--wide {
    max-width: 640px;
}

.auth-card__inner {
    padding: 24px;
    text-align: left;
    background: var(--es-surface);
    border: 1px solid var(--es-line);
    border-radius: var(--es-radius-card);
    box-shadow: var(--es-shadow-card);
}

@media (min-width: 640px) {
    .auth-card__inner {
        padding: 32px;
    }
}

.auth-card__head {
    margin-bottom: 24px;
}

/* Confirmation panels lead with an illustration and centre their copy. */
.auth-card__icon {
    margin-bottom: 16px;
    font-size: 40px;
    line-height: 1;
    color: var(--es-accent);
    text-align: center;
}

/* The 2FA screen keeps the larger duotone glyph it had before the port: the
   two-tone envelope/shield reads better at this size than a 40px line icon,
   and it is the one thing on that card carrying any weight. */
.auth-page .auth-card__icon--lg {
    font-size: 72px;
}

.auth-page .auth-card__icon--lg .fad {
    --fa-primary-color: var(--es-accent);
    --fa-secondary-color: var(--es-accent);
    --fa-secondary-opacity: 0.45;
}

.auth-page .auth-card__head--centered,
.auth-page .auth-card__head--centered .auth-card__title {
    text-align: center;
}

.auth-page .auth-card__title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
    letter-spacing: -0.011em;
    color: var(--es-ink);
    text-align: left;
}

.auth-page .auth-card__desc {
    margin: 6px 0 0;
    padding: 0;
    font-size: 14px;
    /* Tailwind leading-relaxed, which the Next AuthCard sets on the description. */
    line-height: 1.625;
    color: var(--es-ink-muted);
}

/* Confirmation panels centre the whole body, not only the head. */
.auth-page .auth-card__hint {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--es-ink-muted);
    text-align: center;
}

.auth-card__foot {
    margin-top: 16px;
    font-size: 14px;
    color: var(--es-ink-muted);
    text-align: center;
}

.auth-page a.auth-link {
    font-weight: 500;
    color: var(--es-accent);
    text-decoration: none;
}

.auth-page a.auth-link:hover {
    text-decoration: underline;
}

/* Sign-out is a POST form, not a link — style its button to match .auth-link. */
.auth-page .auth-linkbtn {
    padding: 0;
    font: inherit;
    font-weight: 500;
    color: var(--es-accent);
    background: none;
    border: 0;
    cursor: pointer;
}

.auth-page .auth-linkbtn:hover {
    text-decoration: underline;
}

/* ---- FORM LAYOUT -------------------------------------------------------- */

.auth-form {
    /* `relative` is the positioning context for .auth-loader. */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-form--wide {
    gap: 20px;
}

/* Two fields side by side, stacked on narrow screens. */
.auth-row {
    display: grid;
    gap: 16px;
}

@media (min-width: 640px) {
    .auth-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* Yii's ActiveField container. `margin: 0` undoes Materialize's .row/.col
   spacing for the classes that survive on these fields. */
.auth-page .auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: auto;
    margin: 0;
    padding: 0;
    float: none;
}

.auth-field__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.auth-page .auth-field label {
    position: static;
    display: block;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    color: var(--es-ink);
    transform: none;
    cursor: default;
}

/* The "Forgot password?" link that shares the password field's label row. */
.auth-field__head .auth-link {
    font-size: 12px;
}

.auth-req {
    margin-left: 2px;
    color: var(--es-critical);
}

/* ActiveForm tags required fields with `required`, and site.css hangs its own
   asterisk off that. The marker is placed explicitly here so optional-by-rule
   fields (company name, the login credentials) can carry one too — suppress
   the automatic one rather than showing both. */
.auth-page .required label::after {
    content: none;
}

.auth-page .auth-error,
.auth-page .auth-error .help-block {
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    color: var(--es-critical);
}

.auth-page .auth-error:empty {
    display: none;
}

.auth-page .auth-hint {
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    color: var(--es-ink-muted);
}

/* ---- CONTROLS ----------------------------------------------------------- */

.auth-page .auth-input {
    box-sizing: border-box;
    width: 100%;
    height: 32px;
    margin: 0;
    padding: 0 12px;
    font-family: inherit;
    font-size: 14px;
    line-height: 21px;
    color: var(--es-ink);
    background-color: var(--es-surface);
    border: 1px solid var(--es-line-control);
    border-radius: var(--es-radius);
    box-shadow: none;
    transition: border-color 120ms cubic-bezier(0.2, 0, 0, 1),
        box-shadow 120ms cubic-bezier(0.2, 0, 0, 1);
}

.auth-page .auth-input::placeholder {
    color: var(--es-ink-faint);
}

.auth-page .auth-input:hover {
    border-color: var(--es-line-control-hover);
}

.auth-page .auth-input:focus {
    border-color: var(--es-accent);
    box-shadow: var(--es-shadow-focus);
    outline: none;
}

.auth-page .auth-input[readonly] {
    color: var(--es-ink-muted);
    background-color: var(--es-sunken);
}

/* Yii's client validation puts `has-error` on the field container. */
.auth-page .has-error .auth-input {
    border-color: var(--es-critical);
}

.auth-page .has-error .auth-input:focus {
    box-shadow: var(--es-shadow-focus-critical);
}

/* Password field with its reveal toggle. */
.auth-pw {
    position: relative;
}

.auth-pw .auth-input {
    padding-right: 36px;
}

.auth-page .auth-pw__toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    color: var(--es-ink-faint);
    background: none;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    transform: translateY(-50%);
}

.auth-page .auth-pw__toggle:hover {
    color: var(--es-ink);
}

/* ---- BUTTON ------------------------------------------------------------- */

.auth-page .auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    height: 36px;
    /* Materialize puts 20px of margin on every button; spacing is this file's job. */
    margin: 0;
    padding: 0 20px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    color: #ffffff;
    text-align: center;
    text-transform: none;
    letter-spacing: normal;
    background-color: var(--es-accent);
    border: 0;
    border-radius: var(--es-radius);
    box-shadow: none;
    cursor: pointer;
    transition: background-color 120ms cubic-bezier(0.2, 0, 0, 1);
}

.auth-page .auth-btn:hover:not(:disabled),
.auth-page .auth-btn:focus:not(:disabled) {
    background-color: var(--es-accent-hover);
}

.auth-page .auth-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.auth-page .auth-btn--secondary {
    color: var(--es-ink);
    background-color: var(--es-surface);
    border: 1px solid var(--es-line-control);
}

.auth-page .auth-btn--secondary:hover:not(:disabled),
.auth-page .auth-btn--secondary:focus:not(:disabled) {
    background-color: #eef1f1;
}

/* ---- CHECKBOX ----------------------------------------------------------- */

.auth-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.auth-page .auth-check input[type="checkbox"] {
    position: static;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    margin: 3px 0 0;
    padding: 0;
    /* !important, reluctantly: site.css carries
       `:not(.datepicker-modal) input:read-only { background-color: … !important }`
       and EVERY checkbox matches :read-only — a checkbox is never editable. Without
       this the box paints 7% grey and the white tick is invisible on it. */
    background-color: var(--es-surface) !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px 12px;
    border: 1px solid var(--es-line-control);
    border-radius: 4px;
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 120ms cubic-bezier(0.2, 0, 0, 1),
        border-color 120ms cubic-bezier(0.2, 0, 0, 1);
}

.auth-page .auth-check input[type="checkbox"]:checked {
    background-color: var(--es-accent) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    border-color: var(--es-accent);
}

.auth-page .auth-check input[type="checkbox"]:focus-visible {
    box-shadow: var(--es-shadow-focus);
    outline: none;
}

.auth-page .auth-check__label {
    display: block;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: var(--es-ink);
    cursor: pointer;
}

.auth-page .auth-check__label a {
    font-weight: 500;
    color: var(--es-accent);
    text-decoration: none;
}

.auth-page .auth-check__label a:hover {
    text-decoration: underline;
}

.auth-page .auth-check__desc {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 16px;
    color: var(--es-ink-muted);
}

.auth-check.has-error input[type="checkbox"] {
    border-color: var(--es-critical);
}

/* ---- SEPARATOR ---------------------------------------------------------- */

.auth-sep {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    line-height: 16px;
    color: var(--es-ink-faint);
}

.auth-sep::before,
.auth-sep::after {
    flex: 1 1 auto;
    height: 1px;
    background: var(--es-line);
    content: "";
}

/* ---- ALERT -------------------------------------------------------------- */

.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    font-size: 14px;
    line-height: 20px;
    color: var(--es-critical);
    background: var(--es-critical-subtle);
    border: 1px solid rgb(192 57 43 / 0.3);
    border-radius: var(--es-radius);
}

.auth-alert i {
    margin-top: 2px;
    flex: 0 0 auto;
}

.auth-alert--caution {
    color: var(--es-caution);
    background: var(--es-caution-subtle);
    border-color: rgb(142 101 27 / 0.3);
}

/* ---- GOOGLE SIGN-IN ----------------------------------------------------- */

/*
 * Sign in with Google.
 *
 * google.accounts.id.renderButton() paints a 40px button with a 4px radius, no
 * hover state and the logo pinned hard left of centred text — nothing about it
 * matches the controls above and below it. It is no longer drawn in an iframe,
 * so the fix is to draw our own button to Google's published spec and lay the
 * real one over it at opacity 0: Google still owns the click, the popup and the
 * credential, we own the pixels. A click anywhere in the box lands on Google's
 * element, so this depends on no internal selector of theirs.
 *
 * Spec followed (developers.google.com/identity/branding-guidelines, light
 * theme): #ffffff fill, 1px #747775 inside stroke, #1f1f1f label in Google Sans
 * Medium 14/20 (Roboto is the public stand-in), 12px | logo | 10px | label |
 * 12px, logo never resized or recoloured. Height and radius are unspecified
 * there, so they follow .auth-btn instead.
 */
.auth-google {
    position: relative;
    display: block;
    /* renderButton() is handed this element's clientWidth, and Google rejects
       anything over 400px — the wide register card would otherwise overshoot. */
    width: 100%;
    max-width: 400px;
    align-self: center;
    min-height: 36px;
}

.auth-page .auth-gbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    height: 36px;
    margin: 0;
    padding: 0 12px;
    font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #1f1f1f;
    text-transform: none;
    letter-spacing: normal;
    background-color: #ffffff;
    border: 1px solid #747775;
    border-radius: var(--es-radius);
    box-shadow: none;
    cursor: pointer;
    transition: background-color 120ms cubic-bezier(0.2, 0, 0, 1);
}

/* The real button is invisible, so its states have to be painted through ours. */
.auth-google:hover .auth-gbtn {
    background-color: #f7f8f8;
}

.auth-google:focus-within .auth-gbtn {
    box-shadow: var(--es-shadow-focus);
}

.auth-gbtn__logo {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20fill%3D%22%23EA4335%22%20d%3D%22M24%209.5c3.54%200%206.71%201.22%209.21%203.6l6.85-6.85C35.9%202.38%2030.47%200%2024%200%2014.62%200%206.51%205.38%202.56%2013.22l7.98%206.19C12.43%2013.72%2017.74%209.5%2024%209.5z%22%2F%3E%3Cpath%20fill%3D%22%234285F4%22%20d%3D%22M46.98%2024.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58%202.96-2.26%205.48-4.78%207.18l7.73%206c4.51-4.18%207.09-10.36%207.09-17.65z%22%2F%3E%3Cpath%20fill%3D%22%23FBBC05%22%20d%3D%22M10.53%2028.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92%2016.46%200%2020.12%200%2024c0%203.88.92%207.54%202.56%2010.78l7.97-6.19z%22%2F%3E%3Cpath%20fill%3D%22%2334A853%22%20d%3D%22M24%2048c6.48%200%2011.93-2.13%2015.89-5.81l-7.73-6c-2.15%201.45-4.92%202.3-8.16%202.3-6.26%200-11.57-4.22-13.47-9.91l-7.98%206.19C6.51%2042.62%2014.62%2048%2024%2048z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* Google's own button: still rendered, still clicked, just never seen. */
.auth-google__real {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
}

/* The identity Google handed back, shown once the popup resolves. */
.auth-google-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    font-size: 14px;
    color: var(--es-ink);
    background: var(--es-sunken);
    border: 1px solid var(--es-line);
    border-radius: var(--es-radius);
}

.auth-google-user img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

/* ---- PASSWORD RULES ----------------------------------------------------- */

.auth-page .auth-rules {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.auth-page .auth-rules li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 16px;
    color: var(--es-ink-muted);
}

/* The reset screen lists the account's password policy in the same shape as the
   register checklist, but static — nothing to tick off before submitting. */
.auth-page .auth-rules--static li::before {
    width: 3px;
    height: 3px;
    flex: 0 0 auto;
    margin: 0 4px;
    background: var(--es-ink-faint);
    border-radius: 50%;
    content: "";
}

.auth-page .auth-rules li i {
    width: 12px;
    font-size: 11px;
    color: var(--es-ink-faint);
}

.auth-page .auth-rules li.is-met,
.auth-page .auth-rules li.is-met i {
    color: var(--es-positive);
}

/* ---- REGISTER-SPECIFIC ------------------------------------------------- */

/* register.css turns this into a bordered block with auto margins; the form's
   own gap already separates it, so it only needs to stack its two checkboxes. */
.auth-page #news-terms-checkbox-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    border: 0;
    text-align: left;
}

.auth-page #toggle-password-fields a {
    font-size: 13px;
    cursor: pointer;
}

.auth-page #reseller-logo-container {
    margin-bottom: 16px;
}

/* ---- PHONE INPUT (intl-tel-input) --------------------------------------- */

.auth-page .intl-tel-input,
.auth-page .iti--separate-dial-code {
    display: block;
    width: 100%;
}

.auth-page .intl-tel-input input[type="tel"] {
    width: 100%;
    margin: 0;
}

.auth-page .intl-tel-input .selected-flag {
    border-radius: var(--es-radius) 0 0 var(--es-radius);
}

/* ---- reCAPTCHA ---------------------------------------------------------- */

.auth-captcha {
    display: flex;
    justify-content: center;
}

/* register.css puts 15px of margin on the widget grecaptcha injects. */
.auth-captcha #captcha-get-started div {
    margin: 0 auto !important;
}

/* The overlay shown while the Google credential is verified server-side. */
.auth-loader {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgb(255 255 255 / 0.85);
    border-radius: var(--es-radius-card);
}

/* ---- TWO-FACTOR ---------------------------------------------------------- */

/* Six boxes, following the React OtpInput (features/auth/components/otp-input.tsx). */
.auth-otp {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.auth-page .auth-otp input {
    box-sizing: border-box;
    width: 44px;
    height: 48px;
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    color: var(--es-ink);
    text-align: center;
    background: var(--es-surface);
    border: 1px solid var(--es-line-strong);
    border-radius: var(--es-radius);
    box-shadow: none;
    transition: border-color 120ms cubic-bezier(0.2, 0, 0, 1),
        box-shadow 120ms cubic-bezier(0.2, 0, 0, 1);
}

.auth-page .auth-otp input:focus {
    border-color: var(--es-accent);
    box-shadow: var(--es-shadow-focus);
    outline: none;
}

.auth-page .auth-otp input[aria-invalid="true"] {
    border-color: var(--es-critical);
}

@media (max-width: 380px) {
    .auth-page .auth-otp input {
        width: 40px;
    }
}

/* Expiry on the left, remaining attempts on the right. Reserves its own height
   so the card does not jump when either appears. */
.auth-otp-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 20px;
    margin-top: 8px;
    font-size: 12px;
    line-height: 16px;
    color: var(--es-ink-muted);
}

.auth-otp-meta .auth-otp-attempts {
    color: var(--es-critical);
}

/* Resend / switch-channel stack under the primary action. */
.auth-2fa-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auth-page .auth-btn--ghost {
    color: var(--es-ink-muted);
    background: none;
    border: 0;
}

.auth-page .auth-btn--ghost:hover:not(:disabled),
.auth-page .auth-btn--ghost:focus:not(:disabled) {
    color: var(--es-ink);
    background: #eef1f1;
}

/* Sign-out sits under the card, styled like the other card footers. */
.auth-page .auth-card__foot form {
    margin: 0;
}

/* Covers the card while a code is sent or verified. */
.auth-2fa-loader {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgb(255 255 255 / 0.7);
    backdrop-filter: blur(2px);
    border-radius: var(--es-radius-card);
}