/* =========================================================
   Auth pages - /register and /login
   ---------------------------------------------------------
   The split shell and the credential side. The left half (the promise panel)
   styles itself in Shared/Components/AuthPromisePanel.razor.css.

   Deliberately shares nothing with the legacy .login-container / .login-card
   rules in custom.css + responsive.css: those carry a purple gradient and a
   pile of !important mobile overrides that this redesign replaces. Everything
   here is namespaced .au-* so the two never meet.
   ========================================================= */

.au {
    --au-brand: #2A9EA6;
    --au-brand-dark: #26808C;
    --au-ink: #0f172a;
    --au-ink-2: #334155;
    --au-muted: #5b6b7f;
    --au-faint: #8fa0b3;
    --au-line: #e3eaf0;
    --au-line-soft: #eef3f7;
    --au-error: #c2410c;
    --au-pass: #059669;

    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
    background: #fff;
    color: var(--au-ink);
}

/* ── Credential side ── */
.au__form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 3.2rem;
    background: #fff;
}

.au__inner {
    width: 100%;
    max-width: 25.5rem;
    animation: au-enter .5s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes au-enter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

/* ── Mode switch: segmented control, lifted from the Results exam switcher ── */
.au-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    margin-bottom: 1.9rem;
    background: #eef2f6;
    border-radius: 100px;
}

.au-tab {
    border: none;
    background: transparent;
    border-radius: 100px;
    padding: .5rem 1.15rem;
    font-size: .84rem;
    font-weight: 700;
    color: var(--au-muted);
    cursor: pointer;
    transition: color .16s ease, background .16s ease, box-shadow .16s ease;
}

.au-tab:hover { color: var(--au-ink); background: rgba(255, 255, 255, .6); }

.au-tab--on {
    background: #fff;
    color: var(--au-ink);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 5px 14px -4px rgba(15, 23, 42, .12);
}

.au-tab--on:hover { background: #fff; }

/* ── Heading ── */
.au-head { margin-bottom: 1.6rem; }

.au-head h1 {
    font-size: 1.72rem;
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.1;
    color: var(--au-ink);
    margin: 0 0 .4rem;
}

.au-head p {
    font-size: .9rem;
    line-height: 1.5;
    color: var(--au-muted);
    margin: 0;
}

/* ── Fields ── */
.au-field { margin-bottom: 1.05rem; }

.au-label {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--au-ink-2);
    margin-bottom: .42rem;
}

.au-input {
    display: block;
    width: 100%;
    padding: .85rem 1rem;
    font-size: .97rem;
    font-family: inherit;
    color: var(--au-ink);
    background: #fff;
    border: 1px solid var(--au-line);
    border-radius: 13px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
    -webkit-appearance: none;
    appearance: none;
}

.au-input::placeholder { color: #a9b6c5; }

.au-input:hover { border-color: #cfdae4; }

.au-input:focus {
    outline: none;
    border-color: var(--au-brand);
    box-shadow: 0 0 0 4px rgba(42, 158, 166, .13);
}

.au-input.invalid {
    border-color: #e6b48c;
    box-shadow: 0 0 0 4px rgba(194, 65, 12, .07);
}

.au-input:disabled { background: #f6f8fa; color: var(--au-muted); }

/* Password field with a reveal control sharing the box */
.au-input-wrap { position: relative; }
.au-input-wrap .au-input { padding-right: 3rem; }

.au-reveal {
    position: absolute;
    top: 50%;
    right: .45rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    padding: 0;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--au-faint);
    cursor: pointer;
    transition: color .16s ease, background .16s ease;
}

.au-reveal:hover { color: var(--au-ink-2); background: #f2f6f9; }
.au-reveal svg { width: 19px; height: 19px; }

.au-err {
    display: block;
    margin-top: .38rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--au-error);
}

/* ── Buttons ── */
.au-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: 100%;
    padding: .95rem 1.3rem;
    font-family: inherit;
    font-size: .98rem;
    font-weight: 800;
    letter-spacing: -.01em;
    border-radius: 100px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .16s cubic-bezier(.22, 1, .36, 1), box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.au-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.au-btn--primary {
    color: #fff;
    background: linear-gradient(135deg, var(--au-brand) 0%, var(--au-brand-dark) 100%);
    box-shadow: 0 10px 24px -10px rgba(42, 158, 166, .68);
}

.au-btn--primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -10px rgba(42, 158, 166, .75);
}

.au-btn--primary:disabled { opacity: .62; cursor: default; box-shadow: none; }

.au-btn--ghost {
    color: var(--au-ink-2);
    background: #fff;
    border-color: var(--au-line);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.au-btn--ghost:hover:not(:disabled) { border-color: #cfdae4; background: #fbfdfe; }

.au-spin {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .38);
    border-top-color: #fff;
    border-radius: 50%;
    animation: au-spin .7s linear infinite;
}

.au-btn--ghost .au-spin { border-color: rgba(15, 23, 42, .18); border-top-color: var(--au-ink-2); }

@keyframes au-spin { to { transform: rotate(360deg); } }

/* ── Divider ── */
.au-or {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 1.25rem 0;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--au-faint);
}

.au-or::before,
.au-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--au-line);
}

/* Google's rendered button sits in here. No min-height on purpose: when the GSI
   script is blocked (ad blockers do this routinely) the slot must collapse to
   nothing rather than leave a hole above the form. It still needs real layout
   width, because googleAuth.renderButton sizes the button from offsetWidth. */
.au-google {
    display: flex;
    justify-content: center;
}

/* ── Messages ── */
.au-msg {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .8rem .95rem;
    margin-bottom: 1.1rem;
    border-radius: 13px;
    font-size: .86rem;
    line-height: 1.45;
    border: 1px solid transparent;
}

.au-msg svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

.au-msg--error { background: #fdf5f0; border-color: #f0d9c6; color: #8a3a10; }
.au-msg--info { background: #f1f8fa; border-color: #cfe6e9; color: #1f6770; }
.au-msg--good { background: #f0faf5; border-color: #c9e9da; color: #0b6b4b; }

/* ── Small print + links ── */
.au-fine {
    margin: .9rem 0 0;
    font-size: .78rem;
    line-height: 1.55;
    color: var(--au-faint);
    text-align: center;
}

.au-fine a { color: var(--au-brand-dark); font-weight: 600; text-decoration: underline; }

.au-link {
    color: var(--au-brand-dark);
    font-weight: 700;
    text-decoration: none;
}

.au-link:hover { text-decoration: underline; }

.au-row-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.1rem;
    font-size: .84rem;
    color: var(--au-muted);
}

/* ── Locked-in email chip on register step 2 ── */
.au-identity {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .8rem .7rem .95rem;
    margin-bottom: 1.1rem;
    border: 1px solid var(--au-line);
    border-radius: 13px;
    background: #f8fbfc;
}

.au-identity svg { width: 18px; height: 18px; color: var(--au-brand); flex-shrink: 0; }

.au-identity span {
    flex: 1;
    min-width: 0;
    font-size: .88rem;
    font-weight: 600;
    color: var(--au-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.au-identity button {
    flex-shrink: 0;
    border: none;
    background: none;
    padding: .2rem .1rem;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
    color: var(--au-brand-dark);
    cursor: pointer;
}

.au-identity button:hover { text-decoration: underline; }

/* ── Back-to-site link ── */
/* A flex container so it takes its own line - an inline-flex anchor would sit
   on the same baseline as the tab switcher that follows it. */
.au-back {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: .4rem;
    margin-bottom: 1.5rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--au-muted);
    text-decoration: none;
    transition: color .16s ease, transform .16s ease;
}

.au-back svg { width: 16px; height: 16px; }
.au-back:hover { color: var(--au-ink); transform: translateX(-2px); }

/* =========================================================
   Name modal (post-registration)
   ========================================================= */
.au-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: au-fade .2s ease both;
}

.au-modal__card {
    width: 100%;
    max-width: 25rem;
    padding: 2rem;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 32px 64px -16px rgba(15, 23, 42, .35);
    animation: au-pop .32s cubic-bezier(.22, 1, .36, 1) both;
}

.au-modal__card h2 {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -.03em;
    margin: 0 0 .35rem;
    text-align: center;
}

.au-modal__card p {
    font-size: .88rem;
    color: var(--au-muted);
    margin: 0 0 1.25rem;
    text-align: center;
}

.au-modal__mark {
    display: flex;
    justify-content: center;
    margin-bottom: .9rem;
    color: var(--au-pass);
}

.au-modal__mark svg { width: 46px; height: 46px; }

@keyframes au-fade { from { opacity: 0; } to { opacity: 1; } }

@keyframes au-pop {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to { opacity: 1; transform: none; }
}

/* =========================================================
   Responsive: the split folds into promise-band over form
   ========================================================= */
@media (max-width: 991px) {
    .au {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .au__form { padding: 1.25rem 1.35rem 2.5rem; align-items: flex-start; }
    .au__inner { max-width: 34rem; margin: 0 auto; }
    .au-tabs { margin-bottom: 1.1rem; }
    .au-head { margin-bottom: 1.1rem; }
    .au-head h1 { font-size: 1.42rem; }
    .au-back { display: none; }
}

@media (max-width: 480px) {
    .au__form { padding: 1.3rem 1.1rem 2.2rem; }
    .au-head { margin-bottom: 1.25rem; }
    .au-input { padding: .8rem .9rem; font-size: 1rem; }
    .au-btn { padding: .9rem 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .au__inner,
    .au-modal,
    .au-modal__card { animation: none; }

    .au-btn:hover { transform: none; }
}