/*
 * Log In / Register dialogs on the welcome banner.
 *
 * The forms inside are the same Blade partials the standalone /login and
 * /register pages render, so this file restyles that existing structure rather
 * than defining a new one — everything below is scoped under .auth-dialog and
 * none of it can reach the standalone pages, which keep auth-login.css and
 * auth-register.css.
 *
 * Palette comes from the banner, not from those pages. .video-overlay is
 * rgba(22,34,57,.85) and .caption h2 em is #f5a425; the auth pages' #007BFF
 * appears nowhere on the welcome page, which is what made /login read as a
 * different product. The panel is smoked glass over the hero video rather than
 * a white card dropped on it, so the dialog belongs to the banner it opened from.
 *
 * Motion lives at the bottom, behind a prefers-reduced-motion guard.
 */

.auth-overlay {
    --auth-navy: #162239;
    --auth-panel: rgba(20, 30, 52, .92);
    --auth-scrim: rgba(9, 14, 26, .62);
    --auth-hairline: rgba(255, 255, 255, .09);
    --auth-field: rgba(255, 255, 255, .06);
    --auth-field-edge: rgba(255, 255, 255, .15);
    --auth-amber: #f5a425;
    --auth-amber-deep: #e08f0d;
    --auth-text: #f2f5fa;
    /*
     * Not a dimmer grey. Against --auth-panel this sits at roughly 6.6:1, so
     * labels and helper text clear AA. The obvious #8b97ab lands near 4.1:1 and
     * fails — placeholder text is still text.
     */
    --auth-muted: #b6c1d4;
    --auth-danger: #ff9a90;

    position: fixed;
    inset: 0;
    /* #contactModal is 1000, .main-header 12, the mobile nav scrim 10. */
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: var(--auth-scrim);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.auth-overlay[hidden] {
    display: none;
}

/*
 * The page behind the scrim must not scroll. Deliberately separate from
 * body.el-nav-open in eduleave-mobile.css, which does the same job for the
 * mobile nav: both can be set at once, and auth-modal.js only releases this one
 * if the nav is not still holding its own.
 */
body.auth-modal-open {
    overflow: hidden;
}

/* ---------------------------------------------------------------- panel -- */

.auth-dialog {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 34px 32px 28px;
    border: 1px solid var(--auth-hairline);
    border-radius: 20px;
    background: var(--auth-panel);
    /*
     * Without backdrop-filter support the panel is simply a solid navy card.
     * That is an acceptable degradation; raising the panel alpha to compensate
     * would remove the effect everywhere it does work.
     */
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
    box-shadow: 0 32px 80px rgba(6, 12, 24, .55);
    color: var(--auth-text);
    font-family: 'Montserrat', sans-serif;
    scrollbar-width: thin;
    scrollbar-color: var(--auth-field-edge) transparent;
    /*
     * Reserve the gutter. The register panel sits close to its 88vh bound, and
     * children translating 10px on entry can cross it — which would add a
     * scrollbar mid-animation and reflow the two-column grid inside a box that
     * is still moving.
     */
    scrollbar-gutter: stable;
}

.auth-dialog--register {
    max-width: 560px;
}

.auth-dialog[hidden] {
    display: none;
}

.auth-dialog::-webkit-scrollbar {
    width: 8px;
}

.auth-dialog::-webkit-scrollbar-thumb {
    background: var(--auth-field-edge);
    border-radius: 4px;
}

/* ---------------------------------------------------------------- head --- */

.auth-dialog__head {
    margin-bottom: 22px;
    padding-right: 44px;
}

.auth-dialog__title {
    margin: 0 0 6px;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
}

/* Mirrors .caption h2 em in the banner headline. */
.auth-dialog__title em {
    font-style: normal;
    font-weight: 900;
    color: var(--auth-amber);
}

.auth-dialog__rule {
    display: block;
    width: 54px;
    height: 3px;
    margin-top: 14px;
    border-radius: 2px;
    background: var(--auth-amber);
    transform-origin: left center;
}

.auth-dialog__sub {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--auth-muted);
}

.auth-dialog__close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--auth-hairline);
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    color: var(--auth-text);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.auth-dialog__close:hover,
.auth-dialog__close:focus-visible {
    background: rgba(245, 164, 37, .16);
    border-color: rgba(245, 164, 37, .5);
    color: var(--auth-amber);
}

/* ---------------------------------------------------------------- form --- */

.auth-dialog form {
    margin: 0;
}

/* The login partial's wrapper; the register partial's is .form.first. */
.auth-dialog .input-box,
.auth-dialog .input-field {
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 0 0 16px;
    min-width: 0;
}

.auth-dialog label {
    margin-bottom: 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--auth-muted);
}

.auth-dialog input[type="text"],
.auth-dialog input[type="email"],
.auth-dialog input[type="password"],
.auth-dialog input[type="number"],
.auth-dialog input[type="date"],
.auth-dialog select {
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    border: 1px solid var(--auth-field-edge);
    border-radius: 11px;
    background: var(--auth-field);
    color: var(--auth-text);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
    /* iOS zooms the page when a focused field is under 16px. Countered by the
       16px floor in the narrow breakpoint at the bottom of this file. */
    -webkit-appearance: none;
    appearance: none;
}

/* Room for the show/hide button. */
.auth-dialog .password-input-wrap input,
.auth-dialog .input-box input[type="password"] {
    padding-right: 46px;
}

.auth-dialog select {
    /* appearance:none removes the native arrow, so draw one back. */
    background-image: linear-gradient(45deg, transparent 50%, var(--auth-muted) 50%),
                      linear-gradient(135deg, var(--auth-muted) 50%, transparent 50%);
    background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 34px;
}

.auth-dialog select option {
    /* The panel is translucent; the native dropdown is not, and inherits nothing. */
    background: var(--auth-navy);
    color: var(--auth-text);
}

/* The UA renders these controls dark-on-dark otherwise. */
.auth-dialog input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: .65;
    cursor: pointer;
}

.auth-dialog input::placeholder {
    color: var(--auth-muted);
    opacity: .8;
}

.auth-dialog input:focus,
.auth-dialog select:focus {
    border-color: var(--auth-amber);
    background: rgba(255, 255, 255, .1);
    box-shadow: 0 0 0 3px rgba(245, 164, 37, .22);
}

/* Number fields here are identifiers, not quantities — the spinners invite
   a drag that silently corrupts an employee number. */
.auth-dialog input[type="number"]::-webkit-outer-spin-button,
.auth-dialog input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.auth-dialog input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.auth-dialog .password-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-dialog .password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--auth-muted);
    cursor: pointer;
    transition: color .2s ease;
}

.auth-dialog .password-toggle:hover,
.auth-dialog .password-toggle:focus-visible {
    color: var(--auth-amber);
}

/* The login partial's toggle sits in .input-box, which has the label above it,
   so centring on the box would land it on the label. */
.auth-dialog .input-box .password-toggle {
    top: auto;
    bottom: 6px;
    transform: none;
}

/* --------------------------------------------------------------- errors -- */

.auth-dialog .error,
.auth-dialog .register-summary {
    display: block;
    margin-top: 7px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--auth-danger);
}

.auth-dialog .register-summary {
    margin: 0 0 18px;
    padding: 11px 14px;
    border: 1px solid rgba(255, 154, 144, .35);
    border-radius: 11px;
    background: rgba(255, 105, 92, .12);
}

.auth-dialog .error a {
    color: var(--auth-amber);
    text-decoration: underline;
}

.auth-dialog .status-message {
    display: block;
    margin-bottom: 18px;
    padding: 11px 14px;
    border: 1px solid rgba(126, 224, 176, .32);
    border-radius: 11px;
    background: rgba(80, 210, 150, .12);
    font-size: 12.5px;
    font-weight: 600;
    color: #9ff0c6;
}

/* --------------------------------------------------------------- submit -- */

/*
 * Navy label on amber, not white.
 *
 * White on #f5a425 is about 2.0:1 and fails AA outright. #162239 on the same
 * amber is about 7.7:1. This is the easiest thing in the whole palette to get
 * wrong, because white-on-accent is the reflex.
 */
.auth-dialog .input-box.button,
.auth-dialog .center {
    margin: 22px 0 0;
    text-align: center;
}

/*
 * The wizard's Back / Continue / Submit on ONE row.
 *
 * Ported from the Print Resource Details modal in iRIMS-V
 * (resources/views/pages/modals/view-print-modal.blade.php), whose footer is
 * `flex flex-row gap-2 w-full justify-end` with `w-full sm:w-auto` buttons.
 * The load-bearing detail is that there is no flex-col breakpoint anywhere —
 * below sm the buttons are full-width but still share the row, so they shrink
 * rather than stack. Reproduced here in plain CSS; the welcome page is the
 * Bootstrap theme, it has no Tailwind.
 *
 * They stacked before because .submit is width:100% inside a text-align:center
 * block, which cannot produce a row at all.
 */
.auth-dialog .auth-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 22px;
    text-align: initial;
}

.auth-dialog .auth-actions .submit {
    width: auto;
    flex: 0 1 auto;
    /*
     * min-width: 0 is the rule that actually keeps this on one line. A flex
     * item defaults to min-width: auto, which refuses to shrink below its own
     * content — so the row overflows its container instead of compressing, and
     * the overflow is what reads as the buttons having wrapped.
     */
    min-width: 0;
    padding-inline: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 * Back and Submit sit TOGETHER at the right, 8px apart.
 *
 * An auto left-push used to sit on Back, throwing it to the far edge with
 * Submit at the other. That was an addition of mine for "wizard reading order"
 * and it is not in the pattern being copied: the iRIMS-V view-print-modal
 * footer is `flex flex-row gap-2 w-full justify-end`, with no auto margin
 * anywhere. justify-content: flex-end above is what does the grouping.
 */

/*
 * 560px, not 420px: the desktop layout is correct and stays, but ordinary
 * phones in landscape sit above 420 and were getting the desktop sizing in a
 * space that could not hold it.
 */
@media screen and (max-width: 560px) {
    .auth-dialog .auth-actions {
        gap: 6px;
    }

    .auth-dialog .auth-actions .submit {
        /* Share the line rather than wrap — the iRIMS-V w-full sm:w-auto
           behaviour, which never breaks the row. */
        flex: 1 1 0;
        padding-inline: 10px;
        font-size: 12.5px;
        letter-spacing: .01em;
    }

    .auth-dialog .auth-actions [data-auth-step-back] {
        /* Back is the least important of the three; let it give up width first. */
        flex: 0 1 auto;
    }
}

.auth-dialog .input-box.button input[type="submit"],
.auth-dialog .submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 13px 20px;
    border: none;
    border-radius: 11px;
    background: var(--auth-amber);
    color: var(--auth-navy);
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}

.auth-dialog .input-box.button input[type="submit"]:hover,
.auth-dialog .submit:hover {
    background: var(--auth-amber-deep);
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(245, 164, 37, .28);
}

.auth-dialog .submit:disabled,
.auth-dialog .input-box.button input[type="submit"]:disabled {
    transform: none;
    box-shadow: none;
    opacity: .72;
    cursor: progress;
}

/* Secondary weight for Continue — it advances a step, it does not commit. */
.auth-dialog .auth-step-next {
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--auth-field-edge);
    color: var(--auth-text);
}

.auth-dialog .auth-step-next:hover {
    background: rgba(255, 255, 255, .14);
    box-shadow: none;
}

/* ---------------------------------------------------------- contact us -- */

/*
 * Contact Us was a white Arial card with #3498db buttons and its own inline
 * style block. It is the same dialog as the rest now and inherits everything
 * above; only its list needs describing.
 */
.auth-dialog--contact .contact-details {
    margin: 0;
    padding: 0;
    list-style: none;
}

.auth-dialog--contact .contact-details li {
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: start;
    gap: 4px 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--auth-hairline);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--auth-text);
}

.auth-dialog--contact .contact-details li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.auth-dialog--contact .contact-details i {
    grid-row: 1 / span 2;
    margin-top: 2px;
    font-size: 15px;
    color: var(--auth-amber);
}

.auth-dialog--contact .contact-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--auth-muted);
}

.auth-dialog--contact .contact-value {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.auth-dialog--contact .contact-details a {
    color: var(--auth-text);
    text-decoration: none;
    border-bottom: 1px solid rgba(245, 164, 37, .45);
    transition: color .2s ease, border-color .2s ease;
    word-break: break-word;
}

.auth-dialog--contact .contact-details a:hover,
.auth-dialog--contact .contact-details a:focus-visible {
    color: var(--auth-amber);
    border-color: var(--auth-amber);
}

.auth-dialog--contact .contact-copy {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 28px is below the 44px tap guidance, so the row itself stays generous —
       the whole li is 14px-padded and the link beside it is the large target. */
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--auth-hairline);
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: var(--auth-muted);
    font-size: 11px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.auth-dialog--contact .contact-copy:hover,
.auth-dialog--contact .contact-copy:focus-visible {
    background: rgba(245, 164, 37, .16);
    border-color: rgba(245, 164, 37, .5);
    color: var(--auth-amber);
}

/* Green, not amber: this is a completed action, not the accent. */
.auth-dialog--contact .contact-copy.is-copied {
    background: rgba(80, 210, 150, .18);
    border-color: rgba(126, 224, 176, .5);
    color: #9ff0c6;
}

.auth-dialog--contact .contact-copy.is-copy-failed {
    background: rgba(255, 105, 92, .16);
    border-color: rgba(255, 154, 144, .45);
    color: var(--auth-danger);
}

/* ------------------------------------------------------- verify email --- */

.auth-dialog .verify-notice {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--auth-muted);
}

/* The address the link went to. Shown so a user can spot their own typo — the
   screen used to say "check your email" without saying which one. */
.auth-dialog .verify-sent-to {
    margin: 0 0 16px;
    padding: 11px 14px;
    border: 1px solid var(--auth-hairline);
    border-radius: 11px;
    background: rgba(255, 255, 255, .04);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--auth-muted);
}

.auth-dialog .verify-address {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--auth-text);
    /* A long address must not widen the dialog or overflow it. */
    word-break: break-all;
}

.auth-dialog .verify-stale {
    padding: 11px 14px;
    border: 1px solid rgba(245, 164, 37, .35);
    border-radius: 11px;
    background: rgba(245, 164, 37, .1);
    color: var(--auth-text);
}

/*
 * "Wrong address? Change it".
 *
 * The full UA reset group, not just the properties that looked wrong. Browsers
 * reset font, letter-spacing, word-spacing, line-height, text-transform,
 * text-indent, text-shadow and text-align on form controls together — the same
 * group that silently stripped the uppercase off the About Us labels when their
 * heading text was wrapped in a button. Setting `font: inherit` alone leaves the
 * rest at the UA values.
 */
.auth-dialog .verify-correct-toggle {
    display: block;
    width: 100%;
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--auth-field-edge);
    border-radius: 11px;
    background: rgba(255, 255, 255, .05);
    color: var(--auth-text);
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background .2s ease;

    font: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    word-spacing: normal;
    line-height: 1.4;
    text-transform: none;
    text-indent: 0;
    text-shadow: none;
    text-align: center;
}

/* The amber carries the affordance — it is the same accent every other
   actionable thing in this dialog uses. */
.auth-dialog .verify-correct-toggle::after {
    content: " →";
    color: var(--auth-amber);
}

.auth-dialog .verify-correct-toggle:hover,
.auth-dialog .verify-correct-toggle:focus-visible {
    border-color: rgba(245, 164, 37, .55);
    background: rgba(245, 164, 37, .12);
    color: var(--auth-amber);
}

/* Quiet by design — leaving the correction form is not the action being
   encouraged, it is just not a door that locks behind you. */
.auth-dialog .verify-correct-cancel {
    display: block;
    width: 100%;
    margin: -4px 0 0;
    padding: 8px;
    border: 0;
    background: none;
    color: var(--auth-muted);
    font: inherit;
    font-size: 12px;
    text-transform: none;
    text-align: center;
    cursor: pointer;
    transition: color .2s ease;
}

.auth-dialog .verify-correct-cancel:hover,
.auth-dialog .verify-correct-cancel:focus-visible {
    color: var(--auth-text);
    text-decoration: underline;
}

.auth-dialog .verify-correct[hidden],
.auth-dialog .verify-correct-toggle[hidden],
.auth-dialog .verify-correct-cancel[hidden],
.auth-dialog .verify-stale[hidden],
.auth-dialog [data-verify-resend-form][hidden] {
    display: none;
}

.auth-dialog .verify-notice--bad {
    padding: 11px 14px;
    border: 1px solid rgba(255, 154, 144, .35);
    border-radius: 11px;
    background: rgba(255, 105, 92, .12);
    color: var(--auth-danger);
    font-weight: 600;
}

/* Log Out is the destructive option in this dialog and must not read as the
   primary one — that is the amber resend button above it. */
.auth-dialog .verify-logout,
.auth-dialog .input-box.button input.verify-logout {
    background: transparent;
    border: 1px solid var(--auth-field-edge);
    color: var(--auth-muted);
}

.auth-dialog .verify-logout:hover,
.auth-dialog .input-box.button input.verify-logout:hover {
    background: rgba(255, 105, 92, .14);
    border-color: rgba(255, 154, 144, .45);
    color: #ffb3ab;
    box-shadow: none;
    transform: none;
}

/* The cooldown disables it; cursor: progress from the generic rule would read
   as "working", when it is actually "wait". */
/*
 * A disabled control has to LOOK disabled, or the user presses it and concludes
 * the page is broken. The generic .submit:disabled above uses cursor: progress,
 * which reads as "working" — wrong here, where the correct reading is "wait".
 *
 * !important on the background because .submit and its :hover both set the amber
 * fill at the same specificity, and a hover on a disabled button would otherwise
 * repaint it as though it were live.
 */
.auth-dialog [data-cooldown-button]:disabled,
.auth-dialog [data-cooldown-button]:disabled:hover,
.auth-dialog [data-verification-resend-button]:disabled,
.auth-dialog [data-verification-resend-button]:disabled:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: var(--auth-muted) !important;
    box-shadow: none !important;
    transform: none !important;
}

.auth-dialog [data-cooldown-button]:disabled,
.auth-dialog [data-verification-resend-button]:disabled {
    cursor: not-allowed;
    opacity: .65;
    transform: none;
    box-shadow: none;
}

/* ---------------------------------------------------------------- links -- */

.auth-dialog .text {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--auth-hairline);
    text-align: center;
}

.auth-dialog .text h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--auth-muted);
}

.auth-dialog .text a,
.auth-dialog #forgotPasswordLink,
.auth-dialog [id$="forgotPasswordLink"] {
    color: var(--auth-amber);
    font-weight: 700;
    text-decoration: none;
}

.auth-dialog .text a:hover,
.auth-dialog [id$="forgotPasswordLink"]:hover {
    text-decoration: underline;
}

.auth-dialog [id$="forgotPasswordLink"] {
    display: inline-block;
    margin: -4px 0 4px;
    font-size: 12.5px;
}

.auth-dialog :focus-visible {
    outline: 2px solid var(--auth-amber);
    outline-offset: 2px;
}

/* ------------------------------------------------------- register layout -- */

/*
 * Two columns, against the standalone page's three. At 560px three columns give
 * roughly 160px per field, which is not enough for a date input.
 */
.auth-dialog .fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    column-gap: 18px;
    row-gap: 4px;
}

.auth-dialog .password-checklist {
    grid-column: 1 / -1;
    margin: 4px 0 6px;
    padding: 14px 16px;
    border: 1px solid var(--auth-hairline);
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
}

.auth-dialog .password-checklist ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 16px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.auth-dialog .password-checklist li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--auth-muted);
}

.auth-dialog .password-checklist .mark {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    border: 1px solid var(--auth-field-edge);
    border-radius: 50%;
}

/* password-checklist.js toggles .is-met on a satisfied row. */
.auth-dialog .password-checklist li.is-met {
    color: var(--auth-text);
}

.auth-dialog .password-checklist li.is-met .mark {
    border-color: var(--auth-amber);
    background: var(--auth-amber);
}

.auth-dialog .pw-strength {
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-dialog .pw-strength-track {
    display: flex;
    flex: 1;
    gap: 3px;
}

.auth-dialog .pw-strength-track span {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .13);
    transition: background .2s ease;
}

/* paintProgress toggles .on per filled segment and sets data-level on the bar. */
.auth-dialog .pw-strength-track span.on {
    background: var(--auth-amber);
}

.auth-dialog .pw-strength[data-level="complete"] .pw-strength-track span.on {
    background: #6fe0a8;
}

.auth-dialog .pw-strength-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--auth-muted);
}

.auth-dialog .email-suggestion {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--auth-muted);
}

/* `hidden` is only display:none in the UA sheet, so the author display above
   would override it and leave a bare "Did you mean ?" under an empty field.
   Same pairing as auth-register.css. */
.auth-dialog .email-suggestion[hidden] {
    display: none;
}

.auth-dialog .email-suggestion-apply {
    padding: 0;
    border: none;
    background: none;
    color: var(--auth-amber);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.auth-dialog .turnstile-container {
    margin: 14px 0 0;
    display: flex;
    justify-content: center;
}

/* ----------------------------------------------------------- step rail --- */

.auth-steps {
    display: flex;
    gap: 7px;
    margin: 16px 0 22px;
}

.auth-steps__seg {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .13);
    transition: background .3s ease;
}

.auth-steps__seg[data-active="true"] {
    background: var(--auth-amber);
}

.auth-steps__label {
    margin: 0 0 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--auth-muted);
}

/* auth-modal.js sets this on fields belonging to the step that is not showing.
   [hidden] alone is not enough — the rules above set display on .input-field. */
.auth-dialog [data-auth-step][hidden] {
    display: none;
}

/* --------------------------------------------------------- banner CTAs --- */

/* The secondary "Log in" beside REGISTER NOW! in the banner. .main-button a is
   the theme's filled amber button; this is its outline twin. */
.main-button .auth-cta-secondary a,
a.auth-cta-secondary {
    background-color: transparent !important;
    border: 2px solid rgba(255, 255, 255, .55);
    color: #fff !important;
    transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}

.main-button .auth-cta-secondary a:hover,
a.auth-cta-secondary:hover {
    border-color: var(--auth-amber, #f5a425);
    background-color: rgba(245, 164, 37, .16) !important;
    color: #fff !important;
}

.auth-cta-row {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}


/* ------------------------------------------------------------- narrow ---- */

@media screen and (max-width: 700px) {
    .auth-overlay {
        padding: 16px 12px;
        /* Centring a panel this tall leaves it clipped at both ends on a short
           viewport; pin it to the top and let the overlay scroll. */
        align-items: flex-start;
    }

    .auth-dialog {
        max-height: none;
        padding: 28px 20px 22px;
        border-radius: 16px;
    }

    .auth-dialog__title {
        font-size: 22px;
    }

    .auth-dialog .fields,
    .auth-dialog .password-checklist ul {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Under 16px iOS zooms the viewport on focus and never zooms back out. */
    .auth-dialog input,
    .auth-dialog select {
        font-size: 16px;
    }
}

/* ------------------------------------------------------------- motion ---- */

@keyframes authScrimIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/*
 * Ported from the Eurasian resort frontend's AuthModal.css, which used
 * cubic-bezier(.34, 1.56, .64, 1) on a 440px card. At 560px carrying fourteen
 * fields that much overshoot reads as wobble, so the control point comes down
 * to 1.4 — still a spring, no bounce.
 */
@keyframes authPanelIn {
    from { opacity: 0; transform: translateY(28px) scale(.965); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

@keyframes authPanelOut {
    from { opacity: 1; transform: translateY(0)    scale(1);    }
    to   { opacity: 0; transform: translateY(14px) scale(.985); }
}

@keyframes authScrimOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes authFieldIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}

@keyframes authRuleIn {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@keyframes authFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/*
 * .is-opening / .is-closing are added by auth-modal.js for the length of the
 * animation only. Nothing animates on a plain open — that is the state a
 * reopen-after-error lands in, where a spring on a page the user did not
 * navigate to reads as a glitch rather than as polish.
 */
.auth-overlay.is-opening {
    animation: authScrimIn 220ms cubic-bezier(.4, 0, .2, 1) both;
}

.auth-overlay.is-closing {
    animation: authScrimOut 180ms cubic-bezier(.4, 0, 1, 1) both;
}

.auth-overlay.is-opening .auth-dialog {
    /* Set from the trigger's centre by auth-modal.js, so the panel unfolds from
       the button that was pressed rather than from nowhere. */
    transform-origin: var(--auth-origin-x, 50%) var(--auth-origin-y, 50%);
    animation: authPanelIn 380ms cubic-bezier(.34, 1.4, .5, 1) both;
}

.auth-overlay.is-closing .auth-dialog {
    transform-origin: var(--auth-origin-x, 50%) var(--auth-origin-y, 50%);
    animation: authPanelOut 180ms cubic-bezier(.4, 0, 1, 1) both;
}

/*
 * Do not filter a surface that is being scaled.
 *
 * The register panel is 560px carrying blur(14px) saturate(120%), and
 * authPanelIn animates transform: scale(). Filter output cannot be reused
 * across a changing scale, so it is recomputed every frame and the cost tracks
 * area — which is the whole difference between the 420px login dialog, which
 * was smooth, and this one, which was not.
 *
 * Safe to drop for the duration: the panel is rgba(20,30,52,.92), so only 8% of
 * what is behind it shows through, and it is in motion for 380ms. The blur
 * returns the moment the class does.
 *
 * will-change and contain are scoped to the same window so neither panel stays
 * permanently promoted on a page that is mostly a video.
 */
.auth-overlay.is-opening .auth-dialog,
.auth-overlay.is-closing .auth-dialog {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    will-change: transform, opacity;
    contain: layout paint;
}

.auth-overlay.is-opening .auth-dialog__rule {
    animation: authRuleIn 500ms cubic-bezier(.2, .7, .3, 1) 120ms both;
}

/*
 * --i is capped at 8 in the markup. Past that the last field on the register
 * form arrives half a second after the first, which stops reading as polish and
 * starts reading as lag.
 */
.auth-overlay.is-opening .auth-dialog .input-box,
.auth-overlay.is-opening .auth-dialog .input-field,
.auth-overlay.is-opening .auth-dialog .password-checklist {
    animation: authFieldIn 320ms cubic-bezier(.2, .7, .3, 1) both;
    animation-delay: calc(120ms + var(--i, 0) * 38ms);
}

/*
 * The register dialog opts out of the stagger entirely.
 *
 * The phase 2 compositing fixes — pausing the hero video, dropping the panel's
 * backdrop-filter during the entrance, scoping will-change and contain,
 * reserving the scrollbar gutter — all landed and it was still reported rough.
 * What is left is simply the count: this panel animates its own
 * translateY + scale over 380ms while six .input-field wrappers AND the password
 * checklist each run their own transform on a staggered delay. Eight independent
 * layers moving inside a parent that is itself scaling.
 *
 * The login dialog has three and is smooth, which is the whole difference. Two
 * fields staggering is a flourish; seven inside a scaling panel is the jank.
 * The panel keeps its own entrance — the motion does not disappear, it stops
 * being per-field.
 */
.auth-overlay.is-opening .auth-dialog--register .input-box,
.auth-overlay.is-opening .auth-dialog--register .input-field,
.auth-overlay.is-opening .auth-dialog--register .password-checklist {
    animation: none;
}

/* Swapping login for register keeps the overlay mounted — only the panels
   change, and the scrim must not flash. */
.auth-dialog.is-swapping-in {
    animation: authFieldIn 260ms cubic-bezier(.2, .7, .3, 1) both;
}

.auth-dialog.is-swapping-out {
    animation: authScrimOut 140ms ease both;
}

/* Step changes inside the register wizard use the same vocabulary. */
.auth-dialog.is-stepping .fields {
    animation: authFieldIn 260ms cubic-bezier(.2, .7, .3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    /*
     * Opacity only — no transform, no stagger, no spring. The dialog still
     * fades, so the state change stays perceptible; it just stops moving.
     */
    .auth-overlay.is-opening,
    .auth-overlay.is-opening .auth-dialog,
    .auth-overlay.is-opening .auth-dialog__rule,
    .auth-overlay.is-opening .auth-dialog .input-box,
    .auth-overlay.is-opening .auth-dialog .input-field,
    .auth-overlay.is-opening .auth-dialog .password-checklist,
    .auth-dialog.is-swapping-in,
    .auth-dialog.is-stepping .fields {
        animation-name: authFadeIn;
        animation-duration: 120ms;
        animation-delay: 0ms;
    }

    .auth-overlay.is-closing,
    .auth-overlay.is-closing .auth-dialog,
    .auth-dialog.is-swapping-out {
        animation-name: authScrimOut;
        animation-duration: 120ms;
        animation-delay: 0ms;
    }

    .auth-dialog .submit:hover,
    .auth-dialog .input-box.button input[type="submit"]:hover {
        transform: none;
    }
}