/* ── Page shell ─────────────────────────────────────────── */
.auth-page {
    --auth-bg: var(--jbf-canvas);
    --auth-primary: #7d5b81;
    --auth-card-bg: var(--rz-white, #ffffff);
    --auth-card-border: #e6e8e9;
    --auth-card-radius: 14px;
    --auth-card-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
    --auth-text-default: #021922;
    --auth-text-muted: #4e5e65;
    --auth-text-subtle: #808c91;
    --auth-input-border: #e5e5e5;
    --auth-input-radius: 8px;
    --auth-input-shadow: 0 1px 2px rgba(0,0,0,0.05);
    --auth-btn-radius: 8px;
    --auth-oauth-border: #e7e7e7;
    --auth-oauth-radius: 12px;
    --auth-otp-border: #e6e8e9;
    --auth-success-green: var(--jbf-mint, #00a891);
    --auth-success-bg: var(--jbf-status-success-bg);
    --auth-error: var(--jbf-red, #d80f3d);
    --auth-font: var(--font-overpass, 'Overpass', sans-serif);
    --auth-text-solid: #35474e;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--auth-bg);
    font-family: var(--auth-font);
    margin: 0;
    padding: 0;
}

.auth-page *,
.auth-page *::before,
.auth-page *::after {
    box-sizing: border-box;
}

/* ── Logo header ────────────────────────────────────────── */
.auth-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 96px 25px;
    background: var(--auth-card-bg);
    border-bottom: 1px solid var(--auth-card-border);
    flex-shrink: 0;
}

.auth-logo {
    height: 100px;
    width: auto;
    display: block;
}

/* ── Main content area ──────────────────────────────────── */
.auth-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    overflow-y: auto; 
    min-height: 0;
}

/* ── Footer ─────────────────────────────────────────────── */
.auth-footer {
    background: var(--auth-primary);
    padding-top: 50px;
    text-align: center;
    flex-shrink: 0;
}

.auth-footer p {
    margin: 0;
    padding: 18px;
    font-family: 'Open Sans', var(--auth-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--rz-white, #ffffff);
}

/* ── Card ───────────────────────────────────────────────── */
.auth-card {
    background: var(--auth-card-bg);
    border: 1px solid var(--auth-card-border);
    border-radius: var(--auth-card-radius);
    box-shadow: var(--auth-card-shadow);
    width: 100%;
    max-width: 520px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.auth-card--otp {
    max-width: 448px;
    border-radius: 16px;
    padding: 32px;
    border: none;
}

/* ── Headings ───────────────────────────────────────────── */
.auth-title {
    font-family: var(--auth-font);
    font-weight: 700;
    font-size: 30px;
    line-height: 32px;
    color: var(--auth-text-default);
    text-align: center;
    margin: 0;
}

.auth-title--left {
    text-align: left;
}

/* Brand script greeting on the Welcome screen (PR-3). Swaps the base
   .auth-title's Overpass-bold for Authenia (loaded via @font-face in
   site.css) and JBF magenta. Sized via clamp so it scales from phone
   (~32px) up through wide desktop (~52px) without a media-query break,
   matching the .evl-welcome-heading treatment on the public Event
   Landing page so the brand voice is consistent across both anonymous
   surfaces. */
.auth-title--welcome-script {
    font-family: var(--font-authenia);
    font-weight: 400;
    color: var(--jbf-magenta);
    font-size: clamp(32px, 5.5vw, 52px);
    line-height: 1.1;
    letter-spacing: 0.005em;
}

.auth-subtitle {
    font-family: var(--auth-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--auth-text-muted);
    text-align: center;
    margin: 0;
}

.auth-subtitle--left {
    text-align: left;
}

/* ── Back link ──────────────────────────────────────────── */
.auth-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--auth-font);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
    color: var(--auth-primary);
    padding: 0;
    border-radius: var(--auth-btn-radius);
    transition: opacity 0.15s;
}

.auth-back-link:hover 
.auth-back-link svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ── OAuth row (side-by-side) ───────────────────────────── */

.auth-section {
    display:flex;
    flex-direction:column;
    gap:24px;
    width:100%
}

.auth-oauth-row {
    display: flex;
    gap: 12px;
    width: 100%;
}

.auth-oauth-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    height: 36px;
    padding: 14px 20px;
    border: 1px solid var(--auth-oauth-border);
    border-radius: var(--auth-oauth-radius);
    background: var(--auth-card-bg);
    font-family: 'Inter', var(--auth-font);
    font-weight: 600;
    font-size: 14px;
    color: var(--auth-text-default);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}

.auth-oauth-btn:hover {
    background: #f9fafb;
    border-color: #c5c5c5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.auth-oauth-btn:focus-visible {
    outline: 2px solid var(--auth-primary);
    outline-offset: 2px;
}

.auth-oauth-btn svg,
.auth-oauth-btn img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ── Info banner ────────────────────────────────────────── */
/* Plum-tinted notice rendered above the password input on the
   WelcomeBack screen when the user has Google / Facebook linked
   to their native account. Surfaces previously-used sign-in
   methods up-front (instead of burying them at the bottom of
   the card) without forcing a modal. Tokens reused from the
   .auth-page palette so the banner picks up the same plum +
   text colors the rest of the auth flow uses. */
.auth-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(125, 91, 129, 0.08);
    border: 1px solid rgba(125, 91, 129, 0.20);
    border-radius: 10px;
    color: var(--auth-text-default);
    font-family: var(--auth-font);
    font-size: 13px;
    line-height: 18px;
}

.auth-info-banner__icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--auth-primary);
    margin-top: 1px;
}

.auth-info-banner__text {
    margin: 0;
    padding: 0;
}

/* ── Divider ────────────────────────────────────────────── */
.auth-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    color: var(--auth-text-subtle);
    font-family: var(--auth-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 24px;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--events-border-color);
}


.auth-divider--no-lines{
    margin: 0px;
}

.auth-divider--no-lines::before,
.auth-divider--no-lines::after {
    display: none;
}

/* ── Form groups ────────────────────────────────────────── */
.auth-form-section {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

.auth-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.auth-form-row {
    display: flex;
    gap: 16px;
    width: 100%;
}

.auth-form-row .auth-form-group {
    flex: 1;
    min-width: 0;
}

.auth-label {
    font-family: var(--auth-font);
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    color: var(--auth-text-default);
    display: block;
}

/* ── Inputs ─────────────────────────────────────────────── */
.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.auth-input {
    width: 100%;
    height: 36px;
    padding: 8px 12px;
    border: 1px solid var(--auth-input-border);
    border-radius: var(--auth-input-radius);
    box-shadow: var(--auth-input-shadow);
    background: rgba(255,255,255,0);
    font-family: var(--auth-font);
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: var(--auth-text-default);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.auth-input::placeholder {
    color: var(--auth-text-subtle);
}

.auth-input:focus {
    border-color: var(--auth-primary);
    box-shadow: 0 0 0 3px rgba(125,91,129,0.12);
}

.auth-input[readonly] {
    color: var(--auth-text-subtle);
    cursor: default;
    background: rgba(255,255,255,0);
}

.auth-input:disabled {
    background: rgba(0, 0, 0, 0.04);
    color: var(--auth-text-subtle);
    cursor: not-allowed;
    opacity: 0.65;
}

.auth-input:disabled::placeholder {
    color: var(--auth-text-subtle);
}

.auth-input--with-icon-left {
    padding-left: 42px;
}

.auth-input--with-icon-right {
    padding-right: 42px;
}

.auth-input-icon-left {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    pointer-events: none;
    color: var(--auth-text-subtle);
}

.auth-input-icon-left svg {
    width: 24px;
    height: 24px;
}

.auth-input-error {
    border-color: var(--auth-error) !important;
}

/* ── Password toggle ────────────────────────────────────── */
.auth-toggle-pw {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--auth-text-subtle);
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 4px;
}

.auth-toggle-pw:hover {
    color: var(--auth-text-muted);
}

.auth-toggle-pw:focus-visible {
    outline: 2px solid var(--auth-primary);
    outline-offset: 1px;
}

.auth-toggle-pw svg {
    width: 24px;
    height: 24px;
}

/* ── Primary button ─────────────────────────────────────── */
.auth-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    padding: 12px 24px;
    background: var(--auth-primary);
    color: var(--rz-white, #ffffff);
    border: none;
    border-radius: var(--auth-btn-radius);
    font-family: var(--auth-font);
    font-weight: 600;
    font-size: 14px;
    line-height: normal;
    cursor: pointer;
    overflow: hidden;
    transition: opacity 0.15s, transform 0.1s;
}

.auth-btn-primary:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.auth-btn-primary:hover {
    opacity: 0.88;
}

.auth-btn-primary:active {
    transform: scale(0.99);
}

.auth-btn-primary:focus-visible {
    outline: 2px solid var(--auth-primary);
    outline-offset: 3px;
}

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

.auth-btn-secondary.auth-back-btn {
    display: none;
}

/* ── Outline button ─────────────────────────────────────── */
.auth-btn-outline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    padding: 12px 24px;
    background: transparent;
    border: 1px solid var(--auth-text-subtle);
    border-radius: var(--auth-btn-radius);
    font-family: var(--auth-font);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
    color: var(--auth-text-subtle);
    cursor: pointer;
    overflow: hidden;
    transition: background 0.15s, border-color 0.15s;
}

.auth-btn-outline:hover {
    background: rgba(0,0,0,0.03);
    border-color: var(--auth-text-muted);
}

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


.auth-btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    padding: 12px 24px;
    background: var(--auth-card-bg);
    border: 2px solid var(--auth-text-subtle);
    border-radius: var(--auth-btn-radius);
    font-family: var(--auth-font);
    font-weight: 600;
    font-size: 14px;
    line-height: normal;
    color: var(--auth-primary);
    cursor: pointer;
    overflow: hidden;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

.auth-btn-secondary:hover {
    background: rgba(125, 91, 129, 0.06);
    border-color: var(--auth-primary);
}

.auth-btn-secondary:active {
    opacity: 0.92;
}

.auth-btn-secondary:focus-visible {
    outline: 2px solid var(--auth-primary);
    outline-offset: 2px;
}

.auth-btn-secondary svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ── Button group with OR separator ─────────────────────── */
.auth-btn-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding-top: 8px;
}

.auth-back-link svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ── OTP digit inputs ───────────────────────────────────── */
.auth-otp-digit {
    width: 48px;
    height: 56px;
    border: 2px solid var(--auth-otp-border);
    border-radius: 16px;
    background: var(--auth-card-bg);
    font-family: var(--auth-font);
    font-weight: 600;
    font-size: 20px;
    text-align: center;
    color: var(--auth-text-default);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    padding: 0;
}

.auth-otp-digit:focus {
    border-color: var(--auth-primary);
    box-shadow: 0 0 0 3px rgba(125,91,129,0.12);
}

.auth-otp-digit.auth-input-error {
    border-color: var(--auth-error) !important;
}

/* Hide number input spinner (arrows) for any OTP digit that uses type="number" */
.auth-otp-digit::-webkit-outer-spin-button,
.auth-otp-digit::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.auth-otp-digit[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ── Resend row ─────────────────────────────────────────── */
.auth-resend-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    font-family: var(--auth-font);
    font-weight: 400;
    font-size: 13.2px;
    line-height: 20px;
    color: var(--auth-text-muted);
}

.auth-resend-row svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.auth-resend-row button {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--auth-font);
    font-weight: 600;
    font-size: 13.2px;
    line-height: 20px;
    color: var(--auth-primary);
    cursor: pointer;
}

.auth-resend-row button:hover {
    text-decoration: underline;
}

.auth-resend-row button:focus-visible {
    outline: 2px solid var(--auth-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Success screen ─────────────────────────────────────── */
.auth-success-icon {
    width: 72px;
    height: 72px;
    background: var(--auth-success-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.auth-success-icon svg {
    width: 34px;
    height: 34px;
    color: var(--auth-success-green);
}

.auth-success-title {
    font-family: var(--auth-font);
    font-weight: 700;
    font-size: 30px;
    line-height: 32px;
    color: var(--auth-text-default);
    margin: 0;
}

.auth-success-msg {
    font-family: var(--auth-font);
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    color: var(--auth-text-muted);
    text-align: center;
    margin: 0;
}

/* ── Error message ──────────────────────────────────────── */
.auth-error-msg {
    font-family: var(--auth-font);
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: var(--auth-error);
    margin-top: 4px;
    display: none;
}

.auth-error-msg.auth-visible {
    display: block;
}

/* ── Resend success flash ───────────────────────────────── */
.auth-resend-success {
    color: var(--auth-success-green);
    font-weight: 600;
}

.auth-footer-link {
    color: var(--rz-white, #ffffff);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-footer-link:hover {
    color: rgba(255, 255, 255, 0.9);
}

.auth-forgot-link {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    color: var(--auth-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.auth-forgot-link:hover {
    color: var(--auth-text-default);
}

/* ── Location-based auth (banner + post-OTP sale info) ───── */
.auth-content-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1152px;
}

/* ── Two-column auth row (login card + Page Content companion) ─────────────
   Pairs the active auth card (.auth-card -- emitted by AuthWelcome /
   AuthCreateAccount / AuthVerifyOtp / etc.) with the .auth-side-card
   PageContentZone companion. align-items:stretch forces BOTH cards to
   the height of the taller one so the row reads as one balanced pair --
   author copy almost never matches the screen's form height naturally,
   so we let CSS do that work instead of asking the FSC admin to tune
   word counts. Both .auth-card and .auth-side-card use display:flex /
   flex-direction:column with no explicit height, so the stretch
   propagates correctly without touching either card's internal layout.
   justify-content:center keeps the login card centered on the page when
   the Auth.Sidebar zone is unauthored and the side card collapses to
   nothing (PageContentZone renders zero markup for non-admins in that
   state). */
.auth-cards-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 24px;
    width: 100%;
}

/* ── Page Content side card (right rail on /auth) ───────────────────────────
   Mirrors the .auth-card chrome 1:1 (bg, border, radius, shadow, padding,
   max-width) so the row reads as one matched pair instead of "form + side
   note". Splatted onto <PageContentZone class="auth-side-card" /> -- the
   zone renderer drops this class onto its own wrapper div, so when the
   zone is unauthored AND the viewer isn't admin the entire card is
   omitted from the DOM (no empty placeholder competing for visual
   weight with the credential entry). */
.auth-side-card {
    background: var(--auth-card-bg);
    border: 1px solid var(--auth-card-border);
    border-radius: var(--auth-card-radius);
    box-shadow: var(--auth-card-shadow);
    width: 100%;
    max-width: 520px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--auth-text-default);
    font-family: var(--auth-font);
    font-size: 14px;
    line-height: 20px;
}

/* The PageContent renderer emits a .pcz-card title bar / body when the
   row has a Title authored. Strip its default margin so it sits flush
   inside the .auth-side-card padding instead of double-padding. */
.auth-side-card .pcz-card {
    margin: 0;
}

/* Inline rich text inside the side card -- normalize spacing so admin
   HTML (paragraphs, lists, headings) reads cleanly inside the card
   without bleeding outside the 32px gutter. */
.auth-side-card .pcz-summary {
    color: var(--auth-text-default);
}

.auth-side-card .pcz-summary > :first-child {
    margin-top: 0;
}

.auth-side-card .pcz-summary > :last-child {
    margin-bottom: 0;
}

/* Admin discovery overlay (FSC / System admins). PageContentZone wraps
   its content in .pcz-admin-target so the dashed plum outline + label
   chip can render on hover. The .auth-side-card class is splatted onto
   the INNER div, so the outer .pcz-admin-target is the actual flex
   child of .auth-cards-row -- which means the row's align-items:stretch
   stretches the OVERLAY wrapper, not the inner card. Promoting the
   wrapper to display:flex/column lets the inner card (or the empty-
   state placeholder) grow via flex:1 to fill the stretched height, so
   the admin view stays height-matched with the login card just like
   the visitor view does. min-height keeps the empty-state placeholder
   discoverable when the login card itself is short (e.g. AccountCreated
   success screen). */
.auth-cards-row > .pcz-admin-target {
    display: flex;
    flex-direction: column;
    min-height: 200px;
}

.auth-cards-row > .pcz-admin-target > * {
    flex: 1 1 auto;
}

/* lg- tier (max-width 1023.98px mirrors --bp-lg). Below the desktop
   breakpoint the two cards stack so the login flow stays the visual
   anchor of the viewport and the companion card sits beneath it. The
   shared .auth-card / .auth-side-card max-width:520px caps the column
   width on larger phones / portrait tablets so neither card stretches
   to a hard-to-scan reading width. */
@media (max-width: 1023.98px) {
    .auth-cards-row {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
}

.auth-location-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-bottom: 32px;
}

.auth-location-banner__title {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: var(--auth-text-muted);
    text-align: center;
}

.auth-location-banner__back {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 14px;
    line-height: 20px;
    color: var(--auth-text-muted);
    text-decoration: none;
}

.auth-location-banner__back:hover {
    color: var(--auth-primary);
}

.auth-location-banner__back svg,
.auth-location-banner__arrow {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    flex-shrink: 0;
}

/* ── Inline text-button (Resend, Edit number, future auth links) ──
   Promotes .auth-link-btn from "name used in markup but never styled" to
   a real reusable rule. Mirrors the visual language of .auth-forgot-link
   and the .auth-resend-row button selector so every clickable bit of
   text on the auth screens reads the same. */
.auth-link-btn {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--auth-font);
    font-weight: 600;
    font-size: 13.2px;
    line-height: 20px;
    color: var(--auth-primary);
    cursor: pointer;
    text-decoration: none;
}

.auth-link-btn:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-link-btn:focus-visible {
    outline: 2px solid var(--auth-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

.auth-link-btn:disabled {
    color: var(--auth-text-muted);
    cursor: not-allowed;
    text-decoration: none;
}

/* ── Edit phone (inline editor on AuthVerifyPhone) ─────── */
.auth-edit-phone-link {
    margin-left: 6px;
    vertical-align: baseline;
}

.auth-edit-phone-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
}

.auth-edit-phone-input {
    width: 100%;
}

.auth-edit-phone-actions {
    margin-top: 4px;
}

.auth-edit-phone-actions .auth-btn-primary,
.auth-edit-phone-actions .auth-btn-secondary {
    flex: 1 1 auto;
}

/* ── Responsive ─────────────────────────────────────────── */

/* xs/sm tier (≤ --bp-md = 768). 767.98 mirrors --bp-md; @media can't deref vars. */
@media (max-width: 767.98px) {
    /* Page shell */
    .auth-header {
        padding: 16px 20px;
    }

    .auth-logo {
        height: 60px;
    }

    .auth-main {
        padding: 24px 16px 48px;
        align-items: flex-start;
    }

    .auth-footer {
        padding-top: 12px;
    }

    .auth-footer p {
        padding: 15px 18px;
    }

    /* Card and typography */
    .auth-card,
    .auth-side-card {
        padding: 32px 24px;
    }

    .auth-title {
        font-size: 24px;
        line-height: 28px;
    }

    .auth-subtitle {
        line-height: 18px;
    }

    /* Welcome & OAuth */
    .auth-section {
        gap: 20px;
    }

    .auth-oauth-row {
        flex-direction: column;
        gap: 12px;
    }

    .auth-oauth-btn {
        min-height: 44px;
        height: auto;
    }

    .auth-card .welcome-screen .auth-divider {
        margin-top: 20px;
    }

    .auth-card.create-account .auth-form-section {
        gap: 24px;
    }

    .auth-form-row .auth-form-group {
        min-width: 0;
    }

    /* Mobile back button pattern */
    .auth-back-link {
        display: none !important;
    }

    /* Touch targets and accessibility */
    .auth-btn-primary,
    .auth-btn-outline,
    .auth-btn-secondary {
        min-height: 44px;
        height: auto;
    }

    .auth-btn-secondary.auth-back-btn {
        display: block;
    }

    .auth-input {
        min-height: 44px;
        height: auto;
    }

    .auth-resend-row button {
        min-height: 44px;
        padding: 10px 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Verify OTP */
    .auth-card--otp {
        max-width: 100%;
        padding: 32px;
    }

    .auth-otp-digit {
        width: 40px;
        height: 48px;
        font-size: 18px;
    }

    /* Location banner */
    .auth-location-banner__back-wrap {
        padding: 0 0 12px;
    }

    .auth-location-banner{
        flex-direction: column-reverse;
    }

    .auth-location-banner__info {
        padding: 0 0 24px;
    }

    .auth-location-banner__title{
        color: var(--auth-text-default);
    }
}

/* ── Maintenance panel ────────────────────────────────────────────────────
   Replaces the entire auth-card surface when public.maintenance_mode.is_enabled
   is true. Centered card matching the regular .auth-card shell so the brand
   chrome (logo header, footer Terms / Privacy strip) frames the same way and
   the layout doesn't reflow when an admin flips the flag. The mid-card icon
   uses the auth primary plum so the panel reads as JBF chrome rather than a
   browser error page.
   ──────────────────────────────────────────────────────────────────────── */
.auth-maintenance-panel {
    background: var(--auth-card-bg);
    border: 1px solid var(--auth-card-border);
    border-radius: var(--auth-card-radius);
    box-shadow: var(--auth-card-shadow);
    width: 100%;
    max-width: 520px;
    padding: 48px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
}

.auth-maintenance-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(125, 91, 129, 0.12);
    color: var(--auth-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}

.auth-maintenance-title {
    font-family: var(--auth-font);
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: var(--auth-text-default);
    margin: 0;
}

.auth-maintenance-message {
    font-family: var(--auth-font);
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    color: var(--auth-text-muted);
    margin: 0;
    max-width: 420px;
}

.auth-maintenance-hint {
    font-family: var(--auth-font);
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
    color: var(--auth-text-subtle);
    margin: 0;
}

.auth-maintenance-retry {
    color: var(--auth-primary);
    font-weight: 600;
    text-decoration: none;
}

.auth-maintenance-retry:hover,
.auth-maintenance-retry:focus-visible {
    text-decoration: underline;
}

/* ── Version chip ────────────────────────────────────────────────────────
   Small affordance Greg requested in the Slack thread. Sits inside the
   .auth-content-wrap centered column under the active card so users can
   reference the build when reporting issues without crowding the
   BlankLayout footer (which already carries Terms / Privacy copy).
   ──────────────────────────────────────────────────────────────────────── */
.auth-version {
    margin: 24px 0 0;
    font-family: var(--auth-font);
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: var(--auth-text-subtle);
    letter-spacing: 0.02em;
}

/* ── Password Requirements Checklist ────────────────────────
   Live 5-item rule list rendered by AuthPasswordRequirements.razor
   below every password-creation input (CreateAccount, SetUpPassword,
   SetNewPassword, ResetPassword). Each row flips from "missing"
   (muted, hollow circle) to "met" (plum, check icon) as the user
   types. Re-uses the existing --auth-primary / --auth-text-muted
   tokens so it tracks the rest of the auth palette automatically.
   Sits directly under the error span of the password input - the
   margin is intentionally tight so the list reads as part of the
   field, not as a separate section.
   ──────────────────────────────────────────────────────────── */
.auth-password-rules {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--auth-font);
    font-size: 12.5px;
    line-height: 18px;
}

.auth-password-rules__item {
    display: flex;
    align-items: center;
    transition: color 0.15s ease;
}

.auth-password-rules__item--missing {
    color: var(--auth-text-muted);
}

.auth-password-rules__item--met {
    color: var(--auth-primary);
}

.auth-password-rules__text {
    flex: 1 1 auto;
}