/*
 * Login page styling, split out of the view into an external stylesheet
 * on purpose - Section 14.5's CSP only allows 'self' + a nonced inline
 * <style>, and this file being served from 'self' avoids needing to thread
 * a nonce through the view at all.
 */
:root{
    --ink-indigo:#1a1148; --brand-indigo:#2a166e; --gold:#f0b92e; --gold-deep:#a97a0f; --paper:#f7f6fb;
}
body{ font-family:'Inter',sans-serif; background:var(--paper); }

.auth-eyebrow{
    font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.16em;
    text-transform:uppercase; font-weight:600; color:var(--gold-deep);
    display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.auth-eyebrow::before{ content:""; width:22px; height:1px; background:var(--gold-deep); display:inline-block; }
.auth-panel h1{ font-family:'Fraunces',serif; font-weight:600; letter-spacing:-.01em; font-size:2rem; }

/* Inputs were disappearing against the light page background - give them a
   visible fill and a border with real contrast, not Bootstrap's default
   near-invisible light gray on light gray. */
.auth-panel .form-label{ font-weight:500; font-size:.88rem; color:var(--ink-indigo); }
.auth-panel .form-control{
    padding:11px 14px; border-radius:12px;
    background:#fff;
    border:1.5px solid rgba(26,17,72,.16);
    box-shadow:0 1px 2px rgba(26,17,72,.04);
}
.auth-panel .form-control:focus{
    border-color:var(--brand-indigo);
    box-shadow:0 0 0 .2rem rgba(42,22,110,.14);
}
.auth-panel .form-control::placeholder{ color:#9a94b8; }

.btn-signin{
    background:var(--brand-indigo); color:#fff; font-weight:600; border-radius:999px;
    padding:12px 0; border:none; transition:transform .2s ease, background .2s ease;
}
.btn-signin:hover{ background:var(--ink-indigo); color:#fff; transform:translateY(-1px); }

.auth-back-link{ font-size:.85rem; color:#8a80b0; }
.auth-back-link:hover{ color:var(--gold-deep); }

/* ---------- Right hero panel: image + translucent overlay + glass card ---------- */
.auth-hero{
    position:relative;
    color:#fff;
    background-image:
        linear-gradient(180deg, rgba(26,17,72,.55) 0%, rgba(42,22,110,.72) 100%),
        url('../images/auth-hero-bg.svg');
    background-size: cover;
    background-position: center;
    overflow:hidden;
}
.auth-hero-card{
    position:relative;
    z-index:2;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-radius:24px;
    padding:44px 40px;
    max-width:420px;
    box-shadow:0 30px 60px -30px rgba(0,0,0,.5);
}
.auth-hero .crest-mark{
    width:88px; height:88px; border-radius:50%; background:var(--gold); color:var(--ink-indigo);
    display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif;
    font-weight:600; font-size:1.5rem; margin:0 auto 26px;
    box-shadow:0 12px 24px -8px rgba(0,0,0,.4);
}
.auth-hero h2{ font-family:'Fraunces',serif; font-weight:600; font-size:1.6rem; max-width:18ch; margin:0 auto; }
.auth-hero p{ color:rgba(255,255,255,.8); max-width:34ch; margin:16px auto 0; font-size:.96rem; line-height:1.6; }