/* Blood Legacy Rohan — authentication pages.
   Loaded AFTER landing.css, which supplies the design tokens (--bg, --crimson,
   --gold, --ease ...), .btn/.card, focus-visible and the reduced-motion block. */

/* ---------- Shell ---------- */
.auth-body {
    /* vh first: browsers without svh support drop the whole declaration. */
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

.auth-topbar {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem clamp(1rem, 4vw, 2.5rem);
}

.auth-topbar__home {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: 0 .75rem;
    border-radius: .5rem;
    color: var(--muted);
    font-size: .875rem;
    font-weight: 500;
    transition: color .2s, background-color .2s;
}

.auth-topbar__home:hover {
    color: var(--text);
    background: rgba(255, 255, 255, .05);
}

.auth-topbar__home svg {
    width: 1rem;
    height: 1rem;
}

.auth-shell {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
}

@media (min-width: 1024px) {
    .auth-shell {
        grid-template-columns: 1.05fr .95fr;
    }
}

/* ---------- Art panel ---------- */
.auth-art {
    position: relative;
    display: flex;
    align-items: flex-end;
    isolation: isolate;
    overflow: hidden;
    min-height: 220px;
    padding: clamp(1.5rem, 4vw, 3.5rem);
}

.auth-art__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-position: 62% center;
    background-size: cover;
    background-repeat: no-repeat;
}

.auth-art__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(7, 6, 7, .92) 0%, rgba(7, 6, 7, .55) 55%, rgba(7, 6, 7, .35) 100%),
        linear-gradient(180deg, rgba(7, 6, 7, .55) 0%, rgba(7, 6, 7, .2) 45%, rgba(7, 6, 7, .95) 100%);
}

.auth-art__inner {
    max-width: 34rem;
}

.auth-art__logo {
    width: min(100%, 260px);
    height: auto;
    filter: drop-shadow(0 10px 26px rgba(200, 16, 46, .45));
}

.auth-art__title {
    margin-top: 1.25rem;
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
}

.auth-art__lead {
    margin-top: .75rem;
    color: var(--muted);
    line-height: 1.6;
    max-width: 30rem;
}

.auth-art__stats {
    margin-top: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.auth-art__chips {
    margin-top: .75rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    max-width: 26rem;
}

/* On small screens the art panel is a compact banner: keep only the logo. */
@media (max-width: 1023px) {
    .auth-art {
        align-items: center;
        justify-content: center;
        text-align: center;
        min-height: 180px;
        padding: 2rem 1.25rem;
    }

    .auth-art__bg {
        background-position: 70% 22%;
    }

    .auth-art__overlay {
        background: linear-gradient(180deg, rgba(7, 6, 7, .7) 0%, rgba(7, 6, 7, .82) 55%, var(--bg) 100%);
    }

    .auth-art__title,
    .auth-art__lead,
    .auth-art__stats,
    .auth-art__chips {
        display: none;
    }

    .auth-art__logo {
        width: min(100%, 200px);
        margin-inline: auto;
    }
}

/* ---------- Form panel ---------- */
.auth-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4rem);
}

/* Desktop: give the form side a defined seam and a little elevation so it reads
   as a panel rather than empty space next to the artwork. */
@media (min-width: 1024px) {
    .auth-panel {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, .022), rgba(255, 255, 255, 0) 40%),
            var(--bg-2);
        box-shadow: inset 1px 0 0 rgba(212, 175, 55, .18);
    }

    .auth-panel::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 -80px;
        width: 80px;
        pointer-events: none;
        background: linear-gradient(90deg, transparent, rgba(7, 6, 7, .85));
    }
}

.auth-card {
    width: 100%;
    max-width: 26rem;
}

/* Programmatic focus target only — never show a ring for it. */
.auth-card:focus {
    outline: none;
}

.auth-card__head {
    margin-bottom: 1.75rem;
}

.auth-card__title {
    margin-top: .75rem;
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
}

.auth-card__sub {
    margin-top: .5rem;
    color: var(--muted);
    font-size: .95rem;
}

/* ---------- Fields ---------- */
.field + .field {
    margin-top: 1.15rem;
}

.field__label {
    display: block;
    margin-bottom: .5rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

.field__control {
    position: relative;
    display: block;
}

.field__icon {
    position: absolute;
    top: 50%;
    left: .95rem;
    transform: translateY(-50%);
    width: 1.15rem;
    height: 1.15rem;
    color: var(--muted);
    pointer-events: none;
    transition: color .2s;
}

/* The input is rendered by the Django widget. It is matched both by its hook
   class and structurally, so the field keeps its look even if the widget attrs
   in authentication/forms.py are changed or a stale process serves old ones.
   `.field__control input` scores 0,1,1 and so also beats Tailwind's utilities. */
.auth-input,
.field__control input {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: .75rem 1rem .75rem 2.85rem;
    /* Not var(--line): the field fill is only 1.07:1 against the panel, so the
       border alone identifies the control and must clear WCAG 1.4.11's 3:1.
       rgba(255,255,255,.40) over --bg-2 resolves to #6e6d6e = 3.53:1. */
    border: 1px solid rgba(255, 255, 255, .40);
    border-radius: .6rem;
    background: rgba(255, 255, 255, .035);
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
    transition: border-color .2s, background-color .2s, box-shadow .2s;
}

.field__control input::placeholder {
    /* 4.94:1 on the composited field fill (#161516). #6f6a67 was 3.41:1. */
    color: #8a8480;
    opacity: 1;
}

.field__control input:hover {
    border-color: rgba(255, 255, 255, .55);
}

.field__control input:focus {
    /* A transparent outline is forced to a visible system colour under
       forced-colors (Windows High Contrast), where box-shadow is not painted.
       Plain `outline: none` would leave those users with no focus indicator. */
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: rgba(212, 175, 55, .75);
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, .18);
}

/* Chrome and Edge repaint autofilled inputs pale blue with black text, which
   is unreadable on this card. The colour cannot be set directly, so the fill is
   faked with a large inset shadow and the text recoloured via -webkit-text-fill-color.
   The absurd transition delay keeps the UA from re-applying its own background. */
.field__control input:-webkit-autofill,
.field__control input:-webkit-autofill:hover,
.field__control input:-webkit-autofill:focus,
.field__control input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
    -webkit-box-shadow: 0 0 0 100px #171617 inset;
    box-shadow: 0 0 0 100px #171617 inset;
    transition: background-color 600000s 0s;
}

/* The inset shadow above replaces the focus ring, so restate it. */
.field__control input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 100px #171617 inset, 0 0 0 3px rgba(212, 175, 55, .18);
    box-shadow: 0 0 0 100px #171617 inset, 0 0 0 3px rgba(212, 175, 55, .18);
}

.field__control:focus-within .field__icon {
    color: var(--gold-2);
}

.field__control input[aria-invalid="true"] {
    /* Full opacity: at .8 the border resolves to 2.89:1 and misses 1.4.11. */
    border-color: #e5243f;
}

.field__control input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(229, 36, 63, .2);
}

.field__control--password input {
    padding-right: 3.25rem;
}

/* ---------- Select ----------
   `.field__control input` does not match a <select>, so native pickers fell
   back to the UA default on a dark panel. The background must be OPAQUE: with a
   translucent fill, Chrome and Firefox paint the native <option> popup light
   while the options inherit light text, which is unreadable. #171617 is what the
   translucent input fill composites to on these surfaces. */
.field__control select,
select.auth-input {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: .75rem 2.75rem .75rem 1rem;
    border: 1px solid rgba(255, 255, 255, .40);
    border-radius: .6rem;
    background-color: #171617;
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8a29e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.1rem;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}

/* When an icon sits in the left slot, clear it the same way inputs do. */
.field__control:has(> .field__icon) select {
    padding-left: 2.85rem;
}

.field__control select:hover {
    border-color: rgba(255, 255, 255, .55);
}

.field__control select:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: rgba(212, 175, 55, .75);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, .18);
}

.field__control select[aria-invalid="true"] {
    border-color: #e5243f;
}

.field__control select option {
    background: #171617;
    color: var(--text);
}

.field__control select:disabled,
.field__control select option:disabled {
    color: var(--muted);
}

.pw-toggle {
    position: absolute;
    top: 50%;
    right: .35rem;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: .5rem;
    color: var(--muted);
    cursor: pointer;
    transition: color .2s, background-color .2s;
}

.pw-toggle:hover {
    color: var(--text);
    background: rgba(255, 255, 255, .06);
}

.pw-toggle svg {
    width: 1.15rem;
    height: 1.15rem;
}

.field__error {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin-top: .5rem;
    color: #fca5a5;
    font-size: .82rem;
    line-height: 1.45;
}

.field__error svg {
    flex: none;
    width: .95rem;
    height: .95rem;
    margin-top: .12rem;
}

.caps-hint {
    display: none;
    align-items: center;
    gap: .4rem;
    margin-top: .5rem;
    color: var(--gold-2);
    font-size: .8rem;
}

.caps-hint.is-on {
    display: flex;
}

.caps-hint svg {
    flex: none;
    width: .95rem;
    height: .95rem;
}

/* ---------- Alerts ---------- */
.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .85rem 1rem;
    margin-bottom: 1.25rem;
    border-radius: .6rem;
    border: 1px solid;
    font-size: .875rem;
    line-height: 1.5;
}

.auth-alert svg {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: .1rem;
}

.auth-alert p + p {
    margin-top: .25rem;
}

.auth-alert--error {
    border-color: rgba(229, 36, 63, .45);
    background: rgba(200, 16, 46, .12);
    color: #fca5a5;
}

.auth-alert--success {
    border-color: rgba(34, 197, 94, .4);
    background: rgba(34, 197, 94, .1);
    color: #86efac;
}

.auth-alert--info {
    border-color: rgba(212, 175, 55, .4);
    background: rgba(212, 175, 55, .1);
    color: var(--gold-2);
}

/* ---------- Submit + loading ---------- */
.auth-submit {
    width: 100%;
    margin-top: 1.5rem;
    position: relative;
}

.auth-submit__spinner {
    position: absolute;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    opacity: 0;
    animation: auth-spin .7s linear infinite;
}

/* htmx puts .htmx-request on the element that fired the request (the form).
   .is-busy is the same state for a form that posts normally: the page sets it
   on submit and clears it on pageshow, because a bfcache restore brings the
   painted state back with the frozen DOM. Never set .htmx-request by hand —
   only htmx removes it, and it cannot for a request it never made. */
.auth-form.htmx-request .auth-submit,
.auth-form.is-busy .auth-submit {
    pointer-events: none;
}

.auth-form.htmx-request .auth-submit__label,
.auth-form.is-busy .auth-submit__label {
    visibility: hidden;
}

.auth-form.htmx-request .auth-submit__spinner,
.auth-form.is-busy .auth-submit__spinner {
    opacity: 1;
}

@keyframes auth-spin {
    to {
        transform: rotate(1turn);
    }
}

/* ---------- Divider + footer links ---------- */
.auth-divider {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 1.75rem 0 1.25rem;
    color: var(--muted);
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

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

.auth-foot {
    margin-top: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    color: var(--muted);
    font-size: .8rem;
}

.auth-foot svg {
    width: .9rem;
    height: .9rem;
}

.auth-help {
    margin-top: .6rem;
    text-align: center;
    font-size: .8rem;
    color: var(--muted);
}

.auth-help a {
    color: var(--gold-2);
    font-weight: 600;
}

.auth-help a:hover {
    color: var(--gold);
}

/* ---------- Centred page variant (register / change password, inside base.html) ---------- */
.auth-page {
    position: relative;
    isolation: isolate;
    display: flex;
    justify-content: center;
    padding: clamp(2rem, 6vw, 4.5rem) 1rem clamp(3rem, 8vw, 5rem);
}

/* Both layers extend 5rem above the section because base.html gives <main> a
   pt-20 to clear the fixed header; without this the artwork would start with a
   hard horizontal edge 80px down the page. The header is transparent until it
   scrolls, so the art simply continues behind it. */
.auth-page__bg {
    position: absolute;
    inset: -5rem 0 0 0;
    z-index: -2;
    background-position: center 18%;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: .45;
}

.auth-page__overlay {
    position: absolute;
    inset: -5rem 0 0 0;
    z-index: -1;
    /* Tuned so the art reads as a faint vignette at the top while the band
       behind the card stays near-black. At the previous .3/.55/.8/65% the image
       contributed under 3% at its peak and nothing at all below 65% — it was
       141KB of download for no visible effect. */
    background:
        radial-gradient(75% 60% at 50% 0%, rgba(7, 6, 7, .40), rgba(7, 6, 7, .90) 62%),
        linear-gradient(180deg, rgba(7, 6, 7, .55) 0%, rgba(7, 6, 7, .88) 45%, var(--bg) 78%);
}

.auth-page__inner {
    width: 100%;
    max-width: 30rem;
}

.auth-card--wide {
    max-width: 30rem;
}

.auth-card--panel {
    padding: clamp(1.25rem, 4vw, 2rem);
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012));
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
}

.auth-page .auth-card__head {
    text-align: center;
}

/* ---------- Field hint ---------- */
.field__hint {
    margin-top: .45rem;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.5;
}

.field__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}

/* ---------- Availability / match status ---------- */
.field__status {
    display: none;
    align-items: center;
    gap: .35rem;
    margin-top: .45rem;
    font-size: .78rem;
}

.field__status.is-shown {
    display: flex;
}

.field__status svg {
    flex: none;
    width: .9rem;
    height: .9rem;
}

.field__status--ok {
    color: #86efac;
}

.field__status--bad {
    color: #fca5a5;
}

.field__status--busy {
    color: var(--muted);
}

/* ---------- Password strength ---------- */
.strength {
    margin-top: .6rem;
}

.strength__bars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .3rem;
}

.strength__bars span {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    transition: background-color .25s var(--ease);
}

.strength[data-score="1"] .strength__bars span:nth-child(-n+1) {
    background: #f87171;
}

.strength[data-score="2"] .strength__bars span:nth-child(-n+2) {
    background: #fb923c;
}

.strength[data-score="3"] .strength__bars span:nth-child(-n+3) {
    background: var(--gold);
}

.strength[data-score="4"] .strength__bars span {
    background: #4ade80;
}

.strength__label {
    margin-top: .4rem;
    font-size: .75rem;
    color: var(--muted);
}

/* ---------- Checkbox ---------- */
.check {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin-top: 1.35rem;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--muted);
    cursor: pointer;
}

.check input {
    flex: none;
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin-top: .1rem;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: .35rem;
    background: rgba(255, 255, 255, .035);
    cursor: pointer;
    transition: background-color .2s, border-color .2s;
}

.check input:checked {
    background: var(--crimson);
    border-color: var(--crimson-2);
    /* Inline SVG tick, so no icon font or image request. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E");
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
}

.check a {
    color: var(--gold-2);
    font-weight: 600;
}

.check a:hover {
    color: var(--gold);
}

/* ---------- Back link ---------- */
.auth-back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    color: var(--muted);
    font-size: .875rem;
    font-weight: 500;
    transition: color .2s;
}

.auth-back:hover {
    color: var(--gold-2);
}

.auth-back svg {
    width: 1rem;
    height: 1rem;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {

    .strength__bars span {
        transition: none;
    }


    .auth-submit__spinner {
        animation-duration: 2.4s;
    }

    /* .field__control input is 0,1,1 — the bare .auth-input (0,1,0) that used to
       be listed here lost to it, so the inputs kept animating. */
    .auth-input,
    .field__control input,
    .pw-toggle,
    .auth-topbar__home,
    .field__icon {
        transition: none;
    }
}