/* ══════════════════════════════════════════════════════════════════
   Pre-login shell — the one stylesheet behind every Layout = null
   page a signed-out user can reach.

   WHY THIS FILE EXISTS
   Login.cshtml carried ~370 lines of inline <style> and each of the
   five sibling pages carried its own near-copy of the ground, the
   card and the inputs. Six copies of one design drift: a colour
   corrected on Login stayed wrong on Reset Password, and nothing
   anywhere said so. Everything structural now lives here once.

   THE PALETTE IS THE ONLY THING A SKIN CHANGES.
   Markup never moves. The mark, the field order, the button label and
   the branded-entry lock line are identical on every page and under
   any palette, because wwwroot/js/auth-ui.js (password reveal,
   remember-company) and the driver.js tour both bind to this markup —
   and because a login screen that rearranges itself is a screen staff
   are trained to distrust. Re-skinning = editing the variables in the
   .auth-page block below. Nothing else.

   ⚠ CONTRAST IS LOAD-BEARING HERE, NOT DECORATION.
   Every text colour below is measured against the ground it actually
   sits on, at >= 4.5:1, and both ends of any button gradient are
   measured under white text. The two values this file replaced both
   failed: --text-dim (#9CA3AF) on white is 2.54:1 and was the sub-line,
   every field hint and every placeholder; the old button gradient ended
   at #7B61FF, 4.22:1 under 16px bold white. Re-measure before changing
   a value — see docs/CHANGE_CHECKLIST.md TRIGGER 64 for the method.

   ⚠ LOADED BY HAND, NOT BY _Layout. These pages write their own <head>,
   so each link tag needs asp-append-version="true" or a returning
   browser keeps the cached copy for ever (TRIGGER 19).
   ══════════════════════════════════════════════════════════════════ */

/* ── Heritage Gold ─────────────────────────────────────────────────
   Deep teal panel, gold mark, warm ivory ground — the product's own
   original identity (ThemePresets' "Classic Gold").

   ⚠ GOLD IS THE MARK, NEVER A BUTTON FILL. White text on #C8940A is
   2.73:1 and unreadable; the accent that carries white text is the
   teal. Gold appears as the mark tile, its glyph, and link text at a
   darkened #8A6508 (5.35:1 on white).                                */
.auth-page {
    --auth-ground:       #FBF7EF;
    --auth-ground-tr:    #FFFDF8;                 /* top-right wash   */
    --auth-ground-bl:    #F0E4CC;                 /* bottom-left wash */
    --auth-card:         #FFFFFF;

    --auth-panel:        linear-gradient(160deg, #0B3D3D 0%, #14605F 60%, #1A7472 100%);
    --auth-panel-glow-a: rgba(214, 169, 74, 0.22);
    --auth-panel-glow-b: rgba(255, 255, 255, 0.06);
    --auth-panel-ink:    #FFFFFF;
    --auth-panel-dim:    rgba(255, 255, 255, 0.80);

    --auth-mark-bg:      rgba(214, 169, 74, 0.22);
    --auth-mark-border:  rgba(214, 169, 74, 0.48);
    --auth-mark-ink:     #F4DFAE;

    --auth-ink:          #17201F;                 /* 14.8:1 on white  */
    --auth-dim:          #5F6B6A;                 /*  5.53:1 on white */

    --auth-field:        #F7F3EA;
    --auth-field-hover:  #F2EDE0;
    --auth-field-border: #E8DFC9;

    --auth-accent:       #0E5250;                 /*  8.97:1 w/ white */
    --auth-accent-deep:  #0A3E3C;
    --auth-link:         #8A6508;                 /*  5.35:1 on white */
    --auth-link-hover:   #5E4505;

    --auth-shadow:       0 24px 48px rgba(60, 44, 12, 0.10), 0 8px 16px rgba(60, 44, 12, 0.05);
    --auth-radius:       24px;
}

/* ── Ground ───────────────────────────────────────────────────────── */
body.auth-page {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--auth-ink);
    background-color: var(--auth-ground);
    background-image:
        radial-gradient(circle at 100% 0%, var(--auth-ground-tr) 0%, transparent 52%),
        radial-gradient(circle at 0% 100%, var(--auth-ground-bl) 0%, transparent 55%);
}

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

/* Honour the OS setting: the entrance is decoration, and for a
   vestibular-sensitive user it is the first thing they meet. */
@media (prefers-reduced-motion: reduce) {
    .auth-page .login-wrapper,
    .auth-page .card { animation: none !important; }
}

/* ══ SPLIT LAYOUT — /Auth/Login ═══════════════════════════════════ */
.auth-page .login-wrapper {
    display: flex;
    width: 100%;
    max-width: 980px;
    background: var(--auth-card);
    border-radius: var(--auth-radius);
    box-shadow: var(--auth-shadow);
    overflow: hidden;
    animation: authSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.auth-page .login-brand-panel {
    flex: 1.2;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: var(--auth-panel);
    color: var(--auth-panel-ink);
}

    /* Two soft lights, drawn behind the content rather than over it. */
    .auth-page .login-brand-panel::before,
    .auth-page .login-brand-panel::after {
        content: '';
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
    }

    .auth-page .login-brand-panel::before {
        top: -100px;
        right: -100px;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, var(--auth-panel-glow-a) 0%, transparent 70%);
    }

    .auth-page .login-brand-panel::after {
        bottom: -50px;
        left: -50px;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, var(--auth-panel-glow-b) 0%, transparent 70%);
    }

    /* The panel's own children sit above both glows. */
    .auth-page .login-brand-panel > * { position: relative; }

.auth-page .brand-icon {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: var(--auth-mark-bg);
    border: 1px solid var(--auth-mark-border);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: var(--auth-mark-ink);
    margin-bottom: 24px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.auth-page .brand-title {
    font-family: 'Instrument Serif', serif;
    font-size: 46px;
    line-height: 1.1;
    letter-spacing: 0.5px;
    margin: 0 0 16px;
    color: var(--auth-panel-ink);
}

.auth-page .brand-subtitle {
    font-size: 15px;
    line-height: 1.6;
    max-width: 320px;
    margin: 0;
    color: var(--auth-panel-dim);
}

.auth-page .login-form-panel {
    flex: 1;
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--auth-card);
}

.auth-page .login-header { margin-bottom: 36px; }

    .auth-page .login-header h2 {
        font-size: 26px;
        font-weight: 700;
        letter-spacing: -0.5px;
        margin: 0 0 8px;
        color: var(--auth-ink);
    }

    /* Was var(--text-dim) = #9CA3AF, 2.54:1 on white. */
    .auth-page .login-header p {
        font-size: 14px;
        margin: 0;
        color: var(--auth-dim);
    }

/* ══ SINGLE CARD — forgot / sent / reset / expired / MFA ═══════════ */
/* Scoped two classes deep so it beats site.css's own .card. */
.auth-page .card {
    width: 100%;
    max-width: 460px;
    box-sizing: border-box;
    padding: 48px 44px;
    background: var(--auth-card);
    border: none;
    border-radius: var(--auth-radius);
    box-shadow: var(--auth-shadow);
    animation: authSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

    .auth-page .card.is-narrow  { max-width: 420px; }
    .auth-page .card.is-centred { text-align: center; padding: 52px 44px; }

    .auth-page .card h2 {
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -0.5px;
        margin: 0 0 6px;
        color: var(--auth-ink);
    }

    .auth-page .card p.sub,
    .auth-page .card.is-centred p {
        font-size: 14px;
        line-height: 1.7;
        margin: 0 0 28px;
        color: var(--auth-dim);
    }

    .auth-page .card.is-centred h2 { margin-bottom: 12px; }

/* The card's mark: teal tile, gold glyph — the two halves of the
   palette in one 52px square, and the sibling of .brand-icon. */
.auth-page .logo {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--auth-accent);
    color: var(--auth-mark-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 20px;
}

.auth-page .card .icon {
    font-size: 52px;
    margin-bottom: 20px;
}

/* ══ FORM CONTROLS — shared by both shapes ════════════════════════ */
.auth-page .input-group { margin-bottom: 20px; }

    .auth-page .input-group label {
        display: block;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
        color: var(--auth-dim);
    }

    .auth-page .input-group input {
        width: 100%;
        box-sizing: border-box;
        padding: 16px 18px;
        font-family: inherit;
        font-size: 15px;
        color: var(--auth-ink);
        background: var(--auth-field);
        border: 1.5px solid var(--auth-field-border);
        border-radius: 12px;
        transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

        /* Was #9ca3af, 2.54:1 — a placeholder is read, so it is measured. */
        .auth-page .input-group input::placeholder { color: var(--auth-dim); }

        .auth-page .input-group input:hover { background: var(--auth-field-hover); }

        .auth-page .input-group input:focus {
            background: var(--auth-card);
            border-color: var(--auth-accent);
            box-shadow: 0 0 0 4px color-mix(in srgb, var(--auth-accent) 18%, transparent);
            outline: none;
        }

/* The one-time-code field on /Mfa/Verify: wide tracking, centred, tabular.
   16px+ is also what stops iOS zooming the viewport when it is focused. */
.auth-page .input-group.is-otp input {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 22px;
    letter-spacing: 6px;
    text-align: center;
}

.auth-page .field-hint,
.auth-page .hint {
    font-size: 11.5px;
    margin-top: 6px;
    color: var(--auth-dim);
}

    /* A standalone note under a form, not a hint hanging off one field. */
    .auth-page .hint.is-note {
        font-size: 12px;
        line-height: 1.6;
        text-align: center;
        margin-top: 14px;
    }

/* ══ BUTTONS ══════════════════════════════════════════════════════ */
/* Flat, not a gradient: the old gradient's light end was 4.22:1 under
   16px bold white, and a gradient's failing corner is invisible to a
   spot check of the fill colour. */
.auth-page .btn-login,
.auth-page .card .btn-submit {
    width: 100%;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #ffffff;
    background: var(--auth-accent);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--auth-accent) 30%, transparent);
    transition: background 0.2s cubic-bezier(0.25, 1, 0.5, 1),
                transform 0.2s cubic-bezier(0.25, 1, 0.5, 1),
                box-shadow 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.auth-page .btn-login { margin-top: 14px; }

.auth-page .card .btn-submit {
    margin-top: 8px;
    padding: 14px;
    font-size: 15px;
}

    .auth-page .btn-login:hover,
    .auth-page .card .btn-submit:hover {
        background: var(--auth-accent-deep);
        transform: translateY(-2px);
        box-shadow: 0 12px 28px color-mix(in srgb, var(--auth-accent) 38%, transparent);
    }

    .auth-page .btn-login:active,
    .auth-page .card .btn-submit:active {
        transform: translateY(0);
        box-shadow: 0 3px 10px color-mix(in srgb, var(--auth-accent) 28%, transparent);
    }

/* The inline link-button on the two dead-end cards. */
.auth-page .card .btn {
    display: inline-block;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    background: var(--auth-accent);
    border: none;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--auth-accent) 30%, transparent);
    transition: background 0.2s ease, transform 0.2s ease;
}

    .auth-page .card .btn:hover {
        background: var(--auth-accent-deep);
        transform: translateY(-2px);
    }

/* ══ OPTIONS ROW, LINKS, FOOTER ═══════════════════════════════════ */
.auth-page .login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 4px 0 18px;
    font-size: 12.5px;
}

    .auth-page .login-options label.remember {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--auth-dim);
        cursor: pointer;
        user-select: none;
    }

        .auth-page .login-options label.remember input {
            width: 14px;
            height: 14px;
            margin: 0;
            accent-color: var(--auth-accent);
            cursor: pointer;
        }

.auth-page a { color: var(--auth-link); }
.auth-page a:hover { color: var(--auth-link-hover); }

.auth-page .login-options a,
.auth-page .auth-link {
    color: var(--auth-link);
    font-weight: 600;
    text-decoration: none;
}

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

.auth-page .auth-aside {
    margin-top: 18px;
    text-align: center;
    font-size: 13px;
    color: var(--auth-dim);
}

    /* A second aside straight after the first is a continuation of the
       same block (signup line, then the tour line), not a new one. */
    .auth-page .auth-aside + .auth-aside { margin-top: 10px; }

.auth-page .auth-foot {
    margin-top: 32px;
    text-align: center;
    font-size: 12px;
    color: var(--auth-dim);
}

.auth-page .back-link {
    display: block;
    text-align: center;
    margin-top: 22px;
    font-size: 13px;
    color: var(--auth-dim);
    text-decoration: none;
}

    .auth-page .back-link:hover { color: var(--auth-link); }

/* ══ BRANDED ENTRY — /Auth/Login/<CODE> ═══════════════════════════ */
/* The panel behind this is a dark gradient and a client's mark is
   usually dark artwork on transparent, drawn for white paper — dropped
   straight on, it disappears. The white chip is what makes an arbitrary
   uploaded logo safe here. */
.auth-page .brand-logo {
    align-self: flex-start;          /* chip hugs the logo, not the column */
    background: #ffffff;
    border-radius: 18px;
    padding: 16px 20px;
    margin-bottom: 24px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

    /* contain, not cover: a wide wordmark must letterbox rather than
       crop. The two caps do different jobs and BOTH bind — a square
       crest is held by max-height, a wide wordmark by max-width. They
       are deliberately generous because on a tenant's own address the
       mark IS the identity; at the old 56px a square crest read as a
       favicon beside the 46px title. Only a branded entry renders
       .brand-logo at all, so the product's own /Auth/Login (which draws
       .brand-icon instead) is untouched by this. */
    .auth-page .brand-logo img {
        display: block;
        max-width: 300px;
        max-height: 128px;
        object-fit: contain;
    }

.auth-page .locked-company {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    margin-bottom: 20px;
    font-size: 13px;
    border-radius: 10px;
    background: var(--auth-field);
    color: var(--auth-dim);
}

    .auth-page .locked-company b {
        color: var(--auth-ink);
        font-weight: 600;
    }

.auth-page .brand-switch {
    text-align: center;
    margin-top: 18px;
    font-size: 12px;
}

    .auth-page .brand-switch a {
        color: var(--auth-dim);
        text-decoration: none;
    }

    .auth-page .brand-switch a:hover { color: var(--auth-link); }

/* ══ RESPONSIVE ═══════════════════════════════════════════════════ */
.auth-page .mobile-brand { display: none; }

@media (max-width: 850px) {
    .auth-page .login-brand-panel { display: none; }
    .auth-page .login-form-panel { padding: 50px 30px; }

    .auth-page .mobile-brand {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 30px;
        padding-bottom: 24px;
        border-bottom: 1px solid var(--auth-field-border);
    }

        .auth-page .mobile-brand .icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: var(--auth-accent);
            color: var(--auth-mark-ink);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            margin-bottom: 0;
        }

        .auth-page .mobile-brand h1 {
            font-family: 'Instrument Serif', serif;
            font-size: 28px;
            font-style: italic;
            margin: 0;
            color: var(--auth-ink);
        }

        .auth-page .mobile-brand .brand-logo {
            align-self: center;
            margin-bottom: 12px;
            box-shadow: none;
            padding: 8px 12px;
        }

            .auth-page .mobile-brand .brand-logo img {
                max-width: 190px;
                max-height: 56px;
            }
}

@media (max-width: 480px) {
    body.auth-page {
        padding: 16px;
        background-image: none;
        background-color: var(--auth-card);
    }

    .auth-page .login-wrapper {
        box-shadow: none;
        border-radius: 0;
    }

    .auth-page .login-form-panel { padding: 20px 10px; }

    .auth-page .card {
        padding: 36px 24px;
        box-shadow: none;
    }

    /* 16px is the floor that stops iOS Safari zooming the viewport on
       focus — below it the whole page jumps when the field is tapped. */
    .auth-page .input-group input {
        padding: 14px 16px;
        font-size: 16px;
    }
}