/* ==========================================================================
   The login screens — PLAN §4.1
   --------------------------------------------------------------------------
   A frosted card on a blue pitch. The pitch is drawn in CSS rather than shipped
   as an image: it costs no request, stays sharp at any size, and the strict CSP
   (PLAN §9.6) means everything is self-hosted anyway.

   Every screen in the flow — sign in, two-factor, forgot password, reset, set
   your password — is the same card with different contents. That is deliberate:
   an invited scout should recognise where they are.
   ========================================================================== */

.auth {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-rows: 1fr auto;
    place-items: center;
    padding: var(--s-5) var(--s-4);
    position: relative;
    overflow: hidden;
    background: var(--club-blue-dark);
}

/* --- the pitch -----------------------------------------------------------
   Three stacked layers, painted back to front:
     1. a vignette, so the card has something to sit against
     2. the mown stripes
     3. a base wash from the club blue
*/
.auth::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        /* vignette: darkens the corners so the card has something to sit on */
        radial-gradient(
            ellipse 85% 75% at 50% 42%,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0) 45%,
            rgba(9, 22, 40, 0.55) 100%
        ),
        /* the mown stripes */
            repeating-linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.055) 0px,
                rgba(255, 255, 255, 0.055) 58px,
                rgba(9, 22, 40, 0.05) 58px,
                rgba(9, 22, 40, 0.05) 116px
            ),
        /* the turf itself */ linear-gradient(160deg, #2f6199 0%, #24507f 45%, #1b3d64 100%);
    z-index: 0;
}

/* --- the pitch markings -------------------------------------------------
   Was three CSS box-shadows pretending to be penalty areas. It is an SVG now:
   a real 105x68 pitch, so the boxes, arcs and spots are in the right places
   and both goals stay on screen at any window shape. */

.auth__pitch {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.auth__pitch-lines rect,
.auth__pitch-lines circle,
.auth__pitch-lines path {
    fill: none;
    /* Bright enough to read as a pitch rather than as a smudge — the previous
       0.15 left the goals almost invisible, which was the complaint. */
    stroke: rgba(255, 255, 255, 0.26);
    stroke-width: 3;
}

.auth__pitch-lines .auth__pitch-spot {
    fill: rgba(255, 255, 255, 0.26);
    stroke: none;
}

/* On a phone the card fills the screen and the markings only add noise
   behind the text. */
@media (max-width: 700px) {
    .auth__pitch {
        display: none;
    }
}

/* --- the card ------------------------------------------------------------ */

.auth__card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 340px;
    padding: var(--s-6) var(--s-5) var(--s-5);
    border-radius: var(--r-lg);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(31, 68, 118, 0.55);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    box-shadow: var(--shadow-lg);
    color: var(--on-blue);
    text-align: center;
}

.auth__crest {
    width: 74px;
    height: auto;
    margin: 0 auto var(--s-4);
    /* Matches the sidebar badge. drop-shadow follows the shield's alpha; a
       box-shadow would draw the PNG's rectangle. Scaled up from the 34px one,
       because this crest is more than twice the size. */
    filter:
        drop-shadow(0 2px 2px rgba(4, 12, 28, 0.5))
        drop-shadow(0 6px 14px rgba(4, 12, 28, 0.42));
}

.auth__title {
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.auth__subtitle {
    margin-top: var(--s-1);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--on-blue-muted);
}

.auth__lead {
    margin-top: var(--s-4);
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--on-blue-muted);
    text-align: left;
}

.auth__form {
    margin-top: var(--s-5);
    display: grid;
    gap: var(--s-3);
    text-align: left;
}

/* --- fields --------------------------------------------------------------
   Placeholder-only labels are a usability trap (the label vanishes the moment
   you type), so every field has a real <label> — visually hidden here, because
   the mockup's card has no room for it, but present for screen readers and
   autofill.
*/
.auth__field {
    position: relative;
}

.auth__input {
    width: 100%;
    padding: 11px 14px;
    border-radius: var(--r-md);
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: var(--on-blue);
    font-size: var(--fs-base);
    transition: border-color 0.15s, background 0.15s;
}

.auth__input::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.auth__input:hover {
    border-color: rgba(255, 255, 255, 0.32);
}

.auth__input:focus {
    outline: none;
    border-color: var(--club-sky);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 0 3px rgba(92, 183, 232, 0.25);
}

.auth__input--has-toggle {
    padding-right: 44px;
}

/* Autofill: browsers force their own yellow/white. Keep the card readable. */
.auth__input:-webkit-autofill,
.auth__input:-webkit-autofill:hover,
.auth__input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--on-blue);
    -webkit-box-shadow: 0 0 0 1000px rgba(38, 79, 142, 0.98) inset;
    caret-color: var(--on-blue);
}

.auth__toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
}

.auth__toggle:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

/* --- the row of small controls ------------------------------------------- */

.auth__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    font-size: var(--fs-sm);
}

.auth__check {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--on-blue-muted);
    cursor: pointer;
    user-select: none;
}

.auth__check input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--club-sky);
    cursor: pointer;
}

.auth__link {
    color: var(--on-blue-muted);
    text-decoration: none;
}

.auth__link:hover {
    color: #fff;
    text-decoration: underline;
}

/* --- the button ---------------------------------------------------------- */

.auth__submit {
    width: 100%;
    margin-top: var(--s-2);
    padding: 11px 16px;
    border: 0;
    border-radius: var(--r-full);
    background: linear-gradient(180deg, var(--club-sky-light), var(--club-sky));
    color: #0d2a45;
    font-size: var(--fs-base);
    font-weight: 650;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(92, 183, 232, 0.35);
    transition: filter 0.15s, transform 0.05s;
}

.auth__submit:hover {
    filter: brightness(1.06);
}

.auth__submit:active {
    transform: translateY(1px);
}

.auth__submit[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --- messages ------------------------------------------------------------ */

.auth__notice {
    margin-top: var(--s-4);
    padding: var(--s-3);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    text-align: left;
    border: 1px solid transparent;
}

.auth__notice--error {
    background: rgba(179, 52, 31, 0.22);
    border-color: rgba(255, 150, 130, 0.4);
    color: #ffdfd9;
}

.auth__notice--ok {
    background: rgba(28, 138, 91, 0.22);
    border-color: rgba(120, 220, 175, 0.4);
    color: #d6f5e7;
}

.auth__notice ul {
    margin: 0;
    padding-left: 1.1em;
}

.auth__error {
    margin-top: var(--s-1);
    font-size: var(--fs-xs);
    color: #ffc9bf;
}

.auth__foot {
    margin-top: var(--s-5);
    padding-top: var(--s-4);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.5);
}

/* --- the two-factor code field ------------------------------------------- */

.auth__code {
    width: 100%;
    padding: 12px 14px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-indent: 0.35em; /* re-centres text that letter-spacing pushes left */
    font-variant-numeric: tabular-nums;
}

/* --- the scenery either side of the card ---------------------------------
   A lineup on the left, a scout's notebook on the right. They say what the
   system is before anyone has read a word, and they are the reason the page
   is not just a box on a gradient.

   Everything here is deliberately faint. The card holds a password field; art
   that competes with it is art that gets in the way. */

.auth__art {
    position: absolute;
    top: 50%;
    z-index: 0;
    width: 260px;
    height: 320px;
    transform: translateY(-50%);
    pointer-events: none;
    /* One opacity on the parent rather than per-shape alpha: the pieces then
       overlap without the joins showing as darker seams. */
    opacity: 0.62;
}

/* Placed off the card, not off the viewport, so they stay put on a wide
   monitor instead of drifting to the far edges. */
.auth__art--left {
    right: calc(50% + 185px);
    width: 360px;
    height: 470px;
}

/* Placed to sit in the clear band between the centre circle and the right
   penalty area, rather than across the D. It was overlapping the markings,
   which made both harder to read — a notebook drawn over a penalty box looks
   like a mistake rather than a composition. */
.auth__art--right {
    left: calc(50% + 200px);
    top: 30%;
    width: 230px;
    height: 285px;
}

/* --- shared strokes ----------------------------------------------------- */

.auth__art-line,
.auth__art-line path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.5);
    stroke-width: 1.5;
    stroke-linecap: round;
}

.auth__art-rule path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.32);
    stroke-width: 1.2;
    stroke-linecap: round;
}

/* --- the lineup ---------------------------------------------------------
   Two line weights. The solid chains are the units — back four, double pivot,
   front three — and the dashed links are the relationships between them. The
   distinction is the whole point: without it, eleven circles joined by
   identical lines is a web, not a shape. */

.auth__shape-unit path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.5);
    stroke-width: 2;
    stroke-linecap: round;
}

.auth__shape-link path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 1.3;
    stroke-dasharray: 4 5;
    stroke-linecap: round;
}


.auth__art-token circle {
    /* Filled more solidly than the rest of the scenery: eleven small rings
       over pitch markings read as noise, eleven filled tokens read as a team. */
    fill: rgba(12, 38, 70, 0.55);
    stroke: rgba(255, 255, 255, 0.75);
    stroke-width: 1.8;
}

.auth__art-label--small text {
    font-size: 8.5px;
    letter-spacing: 0.02em;
    fill: rgba(255, 255, 255, 0.92);
}

.auth__art-label text {
    fill: rgba(255, 255, 255, 0.8);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* --- the notebook ------------------------------------------------------- */

.auth__art-page {
    fill: rgba(255, 255, 255, 0.07);
    stroke: rgba(255, 255, 255, 0.55);
    stroke-width: 1.8;
}

/* The handwriting. Sky rather than white so the page reads as written on
   rather than printed. */
.auth__art-ink path {
    fill: none;
    stroke: var(--club-sky);
    stroke-width: 1.8;
    stroke-linecap: round;
    opacity: 0.85;
}

.auth__art-chip rect {
    fill: var(--club-sky);
    opacity: 0.5;
}

.auth__art-pen {
    fill: rgba(255, 255, 255, 0.18);
    stroke: rgba(255, 255, 255, 0.6);
    stroke-width: 1.6;
}

.auth__art-pen-nib {
    fill: rgba(255, 255, 255, 0.6);
}

/* --- when there is no room --------------------------------------------- */

/* Below this the card and the art overlap, and scenery under a password
   field looks like a bug rather than a flourish. The card is the page on a
   phone; that is the right answer, not a compromise. */
/* 1200, not 1100. The formation is 390px wide and its right edge is pinned
   185px left of centre, so below this the left of the back four runs off the
   screen — measured, not guessed: at 1160 the GK sits 5px from the edge. */
@media (max-width: 1199px) {
    .auth__art {
        display: none;
    }
}

/* A wide monitor has room for them a little further out and a little larger,
   which stops the composition feeling cramped in the middle of a 27-inch
   screen. */
@media (min-width: 1500px) {
    .auth__art--left {
        right: calc(50% + 215px);
        width: 390px;
        height: 509px;
    }

    .auth__art--right {
        left: calc(50% + 230px);
        width: 260px;
        height: 320px;
    }
}