:root {
    --primary:            #2b2b53;
    --primary-mid:        #2e2e59;
    --secondary:          #006a6a;
    --on-surface:         #121c28;
    --on-surface-variant: #5a5f6e;
    --surface-low:        #eef0f8;
    --outline:            #dde1ec;
    --error:              #ba1a1a;
    --error-container:    #ffdad6;
    --on-error-container: #93000a;
}

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

html, body {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--on-surface);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Mobile layout: full-screen bg + floating card ─────────────────── */
.auth-wrap {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    position: relative;
    overflow: hidden;
}

/* background image layer. Mobile: full-bleed photo behind the floating
   card (below). Desktop switches to a split layout instead — see the
   media query — where the photo gets its own reserved column so it can
   never end up positioned under the card. */
.auth-bg {
    position: fixed;
    inset: 0;
    background-color: var(--primary);
    background-size: cover;
    background-position: center 15%;
    background-repeat: no-repeat;
    z-index: 0;
}
.auth-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Navy vignette, not a navy→teal wash: it only needs to darken the zone
       behind the white brand text up top. Left clear over the photo itself
       so the cutout's true colours read (a colour wash there just muddies
       skin/hair tones), and kept to a single navy hue to avoid teal fighting
       the photo's neutral palette. */
    background: radial-gradient(88% 55% at 50% -8%,
        rgba(43,43,83,0.85) 0%,
        rgba(43,43,83,0.5) 35%,
        rgba(43,43,83,0.2) 60%,
        rgba(43,43,83,0.05) 85%,
        rgba(43,43,83,0) 100%);
}

/* logo + app name above the card */
.auth-mobile-brand {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 1.5rem;
}
.auth-mobile-brand img { height: 2.75rem; width: auto; }
.auth-mobile-brand h1 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0.6rem 0 0.2rem;
}
.auth-mobile-brand p {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0;
}

/* floating form card */
.auth-form-panel {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 1.5rem;
    width: 100%;
    max-width: 420px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(43,43,83,0.35);
}
.auth-form-panel-roomy {
    max-width: 480px;
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 12rem);
}
.auth-form-panel-roomy .auth-form-inner {
    overflow-y: auto;
    min-height: 0;
}
.auth-form-inner {
    padding: 2rem 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
}

/* ── Desktop layout: split screen — login only ────────────────────────
   The photo column (and the padding-right that reserves space for it)
   only switches on when the card is .auth-form-panel-roomy — currently
   just login, the one short/fixed-content screen it was designed for.
   Every other auth page (signup, forgot-password, create-account, ...)
   keeps the full width: :has() below means we don't have to guess at a
   width that works for every page's content — pages with more to say
   just aren't squeezed in the first place. Squeezing them earlier is
   exactly what forced signup's card into an unwanted internal scroll:
   less width → more text wrapping → taller card → past its max-height. */
@media (min-width: 768px) {
    .auth-wrap:has(.auth-form-panel-roomy) {
        padding: 3rem 1rem;
        padding-right: calc(38vw + 1rem);
        background-color: var(--primary);
    }

    .auth-wrap:has(.auth-form-panel-roomy) .auth-bg {
        inset: 0 0 0 auto;
        width: 38vw;
        /* contain, not cover: this photo is cropped tight to the group
           already (no headroom to spare), so cover would just zoom in and
           chop people off at the column edge. Scaling to fit keeps everyone
           in frame — and since it can never spill past its own 38vw box
           (background painting is always clipped to its element), it can't
           reach the card at any width either. */
        background-size: contain;
        background-position: center 10%;
    }
    .auth-wrap:has(.auth-form-panel-roomy) .auth-bg::after {
        background: linear-gradient(to right,
            rgba(43,43,83,0.7) 0%,
            rgba(43,43,83,0.2) 15%,
            rgba(43,43,83,0) 35%);
    }

    /* Every other auth page keeps the full-bleed photo (no reserved column,
       so the card keeps its full width) — but scaled to fit the whole group
       in frame instead of cover, which was zooming in hard and cropping
       most of the group at wide/landscape desktop sizes. */
    .auth-wrap:not(:has(.auth-form-panel-roomy)) .auth-bg {
        background-size: contain;
        background-position: center 12%;
    }

    .auth-wrap { padding: 3rem 1rem; }

    .auth-form-panel { max-width: 440px; }
    .auth-form-panel-roomy { max-width: 500px; max-height: calc(100dvh - 16rem); }
    .auth-form-inner { padding: 2rem 2.5rem 2rem; }

    .auth-mobile-brand { margin-bottom: 1.75rem; }
    .auth-mobile-brand img { height: 3.25rem; }
    .auth-mobile-brand h1  { font-size: 1.75rem; }
    .auth-mobile-brand p   { font-size: 0.68rem; }
}

/* ── Form elements ────────────────────────────────────────────────── */
.auth-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1.5rem;
}
.auth-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #121c28;
    margin-bottom: 0.35rem;
    display: block;
}
.auth-input {
    width: 100%;
    background: #f3f4f6;
    border: none;
    border-bottom: 2px solid #c4c6cf;
    border-radius: 0.375rem 0.375rem 0 0;
    padding: 0.75rem 0.875rem;
    font-size: 0.95rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #121c28;
    transition: border-color 0.2s;
    outline: none;
}
.auth-input:focus { border-bottom-color: var(--secondary); background: #eef0f8; }

.auth-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 44px;
    background: var(--secondary);
    color: #fff;
    border: none;
    border-radius: 0.3rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
    transition: background 0.2s;
}
.auth-btn-primary:hover  { background: #004f4f; }
.auth-btn-primary:active { transform: scale(0.98); }

.auth-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 1.5rem;
    border: 1.5px solid var(--primary);
    color: var(--primary);
    border-radius: 0.3rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.auth-btn-primary-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 1.5rem;
    border: 1.5px solid var(--secondary);
    color: var(--secondary);
    border-radius: 0.3rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
 }
.auth-btn-outline:hover { background: var(--primary); color: #fff; }

.auth-btn-primary-outline:hover { background: var(--secondary); color: #fff; }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    color: var(--on-surface-variant);
    font-size: 0.75rem;
}
.auth-divider::before,
.auth-divider::after { content: ''; flex: 1; height: 1px; background: #c4c6cf; }

.auth-link { color: var(--secondary); font-weight: 600; text-decoration: none; }
.auth-link:hover { text-decoration: underline; }

.auth-footer {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e9ecef;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.auth-footer a { font-size: 0.7rem; color: var(--on-surface-variant); text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; }
.auth-footer .auth-footer-copy { font-size: 0.7rem; color: var(--on-surface-variant); margin-left: auto; }

.auth-alert-error {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: #ffdad6;
    color: #93000a;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}
.auth-alert-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: #fff6e0;
    color: #b26a00;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}
.auth-rename-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: var(--surface-low);
    border: 1px solid var(--outline);
    border-radius: 0.75rem;
    padding: 0.7rem 0.9rem;
    margin: 0 0 1.5rem;
}
.auth-rename-notice i {
    color: var(--secondary);
    font-size: 0.8rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
}
.auth-rename-notice p {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--on-surface-variant);
}
.auth-rename-notice strong { color: var(--primary); font-weight: 700; }
.auth-alert-success {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: #d6f5e3;
    color: #1a6e3a;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}
.auth-form-hint { font-size: 0.75rem; color: var(--on-surface-variant); margin-top: 0.35rem; }

/* Body copy on auth pages (confirmations, instructions) */
.auth-text { font-size: 0.9rem; color: #44474e; line-height: 1.55; margin: 0 0 1rem; }
.auth-text-tight { margin-top: -0.75rem; }

/* ── Content-heavy pages (signup step 1) ──────────────────────────────
   A wider card with the form beside a supporting notes column. Both the
   extra width and the second column only apply from md up; on mobile the
   card stays the standard width and the columns stack. */
.auth-cols { display: grid; gap: 1.5rem; }

.auth-aside {
    background: var(--surface-low);
    border: 1px solid var(--outline);
    border-radius: 0.75rem;
    padding: 1.25rem;
}
.auth-aside h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 0.4rem;
}
.auth-aside p {
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--on-surface-variant);
    margin: 0;
}
.auth-aside-block + .auth-aside-block {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--outline);
}

@media (min-width: 768px) {
    .auth-form-panel-wide { max-width: 860px; }
    .auth-cols {
        grid-template-columns: 1fr 0.85fr;
        gap: 3rem;
        align-items: start;
    }
}

/* ── Content-heavy auth pages (create-account / associate) ──────────────
   A wider card that fills the available screen height and scrolls its OWN
   content, so the page itself never gets a scrollbar. Scoped to this page
   via .auth-form-panel-fit; other auth screens keep the compact card. */
.auth-form-panel-fit {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 12rem);
}
.auth-form-panel-fit .auth-form-inner {
    overflow-y: auto;
    min-height: 0;
}
@media (min-width: 768px) {
    .auth-form-panel-fit { max-height: calc(100dvh - 16rem); }
    /* wider single-column card; the two-column "wide" layout keeps its 860px */
    .auth-form-panel-fit:not(.auth-form-panel-wide) { max-width: 600px; }
}

/* A pattern background (application-code-login's lights) fills the screen; "contain" is only for the campus photo.
   Same specificity as the desktop rule above, later in the file, so it wins. */
.auth-wrap:has(.auth-bg-cover) .auth-bg { background-size: cover; background-position: center; }

/* Date of birth as three selects in a row (application-code-login) */
.auth-dob { display: grid; grid-template-columns: 1fr 1.6fr 1.2fr; gap: 0.5rem; }
.auth-dob select.auth-input {
    appearance: none;
    padding-right: 1.75rem;
    background: #f3f4f6 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2344474e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.6rem center / 12px 9px;
}
.auth-dob select.auth-input:focus { background-color: #eef0f8; }

/* ── Application create-account: full-screen split (auth-split, that page only) ─────────
   The floating card becomes the whole screen: welcome + photo over the lights background on the left,
   a white form column on the right. Stacks on narrower screens, where the page scrolls as normal. */
.auth-wrap:has(.auth-split) { padding: 0; align-items: stretch; }
.auth-wrap:has(.auth-split) .auth-mobile-brand { display: none; }
.auth-form-panel.auth-split { max-width: none; flex: 1; display: flex; border-radius: 0; box-shadow: none; background: none; }
.auth-split .auth-form-inner { padding: 0; flex: 1; display: grid; grid-template-rows: auto 1fr; }

.auth-split-intro { position: relative; color: #fff; padding: 2rem 1.25rem 2.25rem; }
.auth-split-intro > :not(.auth-split-photo) { position: relative; z-index: 1; }
/* the photo is the top of the column itself: edge to edge, shaded behind the logo, fading into the background below */
.auth-split-intro::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 10rem;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(43,43,83,0.9), rgba(43,43,83,0.55) 45%, rgba(43,43,83,0));
}
.auth-split-brand { text-shadow: 0 1px 6px rgba(0,0,0,0.45); }
.auth-split-brand { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 9.5rem; }
.auth-split-brand img { height: 2.75rem; width: auto; }
.auth-split-brand p { margin: 0; }
.auth-split-app { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.auth-split-college { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.auth-split-photo {
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    height: 17rem;
    object-fit: cover;
    object-position: center 60%;
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent);
    mask-image: linear-gradient(to bottom, #000 45%, transparent);
}
.auth-split-intro h1 { font-size: 1.6rem; font-weight: 700; line-height: 1.25; margin: 0 0 0.85rem; }
.auth-split-intro p:not(.auth-split-app, .auth-split-college) { font-size: 0.95rem; line-height: 1.65; color: rgba(255,255,255,0.85); margin: 0 0 0.75rem; }

.auth-split-main { background: #fff; display: flex; flex-direction: column; }
.auth-split-form { flex: 1; width: 100%; max-width: 28rem; margin: 0 auto; padding: 2rem 1.25rem; }

.auth-input-static { background: none; border-bottom-color: transparent; padding: 0.2rem 0;
    color: var(--primary); font-weight: 600; overflow-wrap: anywhere; }
.auth-terms { font-size: 0.85rem; color: #44474e; }

/* the old footer: Address / Useful Information */
.auth-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    padding: 1.25rem;
    background: var(--surface-low);
    border-top: 1px solid var(--outline);
    font-size: 0.8rem;
    line-height: 1.55;
    color: #44474e;
}
.auth-info h3 {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
    margin: 0 0 0.45rem;
}
.auth-info address { margin: 0 0 0.5rem; }
.auth-info address span { display: block; white-space: nowrap; }
.auth-info ul { list-style: none; padding: 0; margin: 0; }
.auth-info li + li { margin-top: 0.25rem; }
.auth-info i { width: 1.1rem; color: var(--secondary); }
/* straight inside a card (application-forgotten-password): runs to the card's edges and sits on its bottom,
   cancelling .auth-form-inner's padding (1.75rem / 2.5rem sides, 1.5rem / 2rem bottom) */
.auth-form-inner > .auth-info { margin: 1.75rem -1.75rem -1.5rem; padding: 1.1rem 1.75rem; }
@media (min-width: 768px) {
    .auth-form-inner > .auth-info { margin: 2rem -2.5rem -2rem; padding: 1.1rem 2.5rem; }
}

@media (min-width: 992px) {
    .auth-split .auth-form-inner { grid-template-columns: 1fr 1fr; min-height: 100dvh; }
    /* logo at the top over the photo, welcome text at the bottom where the photo has faded out */
    .auth-split-intro { display: flex; flex-direction: column; padding: 2.5rem clamp(2.5rem, 5vw, 6rem) clamp(2rem, 6vh, 4rem); }
    .auth-split-intro > :not(.auth-split-photo) { max-width: 36rem; }
    .auth-split-brand { margin-bottom: auto; padding-bottom: 12rem; }
    .auth-split-photo { height: 62%; }
    .auth-split-intro h1 { font-size: 2rem; }
    .auth-split-main { box-shadow: -24px 0 60px rgba(0,0,0,0.25); }
    .auth-split-form { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.25rem, 4vh, 2.5rem) 2rem; }
    .auth-split .auth-form-inner { grid-template-rows: 1fr; }
    .auth-split .auth-info { grid-template-columns: 1.3fr 1fr; padding: clamp(0.85rem, 2vh, 1.25rem) clamp(2rem, 4vw, 4rem); }
    /* address on one line ("Peter Symonds College, Owens Road, ..."), phone and Contact Us side by side under it */
    .auth-split .auth-info address span { display: inline; white-space: normal; }
    .auth-split .auth-info address span + span::before { content: ", "; }
    .auth-split .auth-info-address ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
    .auth-split .auth-info-address li + li { margin-top: 0; }
    /* field gaps follow the screen height, so a 768px-tall laptop fits without scrolling */
    .auth-split-form .mb-4 { margin-bottom: clamp(0.85rem, 2.4vh, 1.5rem) !important; }
}

/* ── Form validation (Bootstrap 5 form theme output) ────────────────── */
.auth-input.is-invalid { border-bottom-color: var(--error); background: var(--error-container); }
.invalid-feedback { color: var(--on-error-container); font-size: 0.75rem; margin-top: 0.35rem; }