/* ============================================================
   Auth screens — the gatehouse.

   Every page here is one card on a graphite field, and the field keeps the
   rail's #181b21 in BOTH themes for the same reason the sidebar does: this is
   the guarded side of the product, so the operator meets the same graphite at
   the gate that carries the navigation once they are inside.

   The override is scoped to .auth-body and .app-bg only. The card, its text and
   its controls stay on the page theme, so light mode is a pale card on graphite
   and dark mode a dark one — deleting the two --auth-* declarations below puts
   the field back on the theme without touching anything else.
   ============================================================ */

body.auth-body {
    --auth-field: #181b21;
    /* Light mode has to hold more of its own surface: a white card much below
       this resolves against the graphite as a dull grey rather than a lit one,
       and the card is meant to be the one lit object on the field. */
    --auth-card-tint: 93%;

    min-height: 100vh;
    background: var(--auth-field);
    overflow-x: hidden;
    position: relative;
}

[data-theme="dark"] body.auth-body {
    --auth-card-tint: 80%;
}

/* The shared survey-plan grid, struck light because the field is now dark in
   both themes, and masked so it is densest under the card and gone by the
   edges — the drafting table ends where the room begins. */
body.auth-body .app-bg {
    --color-bg-canvas: var(--auth-field);
    --color-text-primary: #f4f5f7;
}

body.auth-body .app-bg::before {
    -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 45%, #000 0%, transparent 78%);
    mask-image: radial-gradient(ellipse 70% 62% at 50% 45%, #000 0%, transparent 78%);
}

/* The fade-region wraps the card only — the survey grid behind it is outside
   this wrapper and stays put across page transitions. */
body.auth-body > .fade-region {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
}

.auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    /* .card's 1rem would sit the card off-centre in the flex-centred region. */
    margin-bottom: 0;
    background: color-mix(in srgb, var(--color-bg-surface) var(--auth-card-tint), transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--color-stroke-default);
    border-radius: var(--radius-lg);
    /* Elevation sized to the surface: a card this large genuinely floating above
       the field gets a tight contact shadow plus a wide offset cast. The old
       single 0 8px 40px rgba(0,0,0,.5) was tuned for a dark page and smudged on
       a light one; both layers here fall on the graphite field, which is the
       same in either theme. */
    box-shadow:
        0 1px 2px rgba(0, 0, 0, .32),
        0 22px 44px -18px rgba(0, 0, 0, .58);
}

.auth-card-header {
    padding: 2.25rem 2rem 0.25rem;
}

/* These sub-headings run two lines at this measure; balancing them keeps a
   single word off the second line. */
.auth-card-header p {
    text-wrap: balance;
}

/* Bootstrap-icon glyph, used by every auth page except the login. */
.auth-logo {
    font-size: 2rem;
    color: var(--bs-primary);
    margin-bottom: .5rem;
    display: inline-block;
}

/* The boom-arm mark, login only — sized as a logo rather than an icon, because
   this is the one page that carries the brand. */
svg.auth-logo {
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto .8rem;
}

.auth-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    /* Overrides the -0.02em on the global h1..h6 rule — negative tracking on a
       condensed face reads as a printing fault rather than as tight setting. */
    letter-spacing: 0;
    margin-bottom: .25rem;
}

/* Login only — the wordmark set as signage: condensed caps, positive tracking,
   with the console name at the same size in a quieter colour so product and
   console read as one lockup instead of a title and a subtitle. */
.auth-title-brand {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .5rem;
}

.auth-title-brand .auth-title-console {
    font-weight: 600;
    color: var(--color-text-muted);
}

.auth-card .card-body {
    padding: 1.5rem 2rem 2rem;
}

/* The single action on the card: the amber Signal primary, full width and a
   size up from an in-table button, with nothing else competing at that weight. */
.auth-card .btn-primary {
    min-height: 42px;
    font-size: .95rem;
    font-weight: 600;
}

/* ---- The boom lifts ----
   One moment, on arrival: the mark's arm starts level — barrier down — and
   swings up to its resting angle. The resting angle is also the static value,
   so a skipped or unsupported animation still draws the mark as designed. */
svg.auth-logo .auth-logo-arm {
    transform-box: view-box;
    transform-origin: 5.5px 8.8px;
    transform: rotate(-20deg);
    animation: auth-boom-lift 900ms cubic-bezier(.22, .61, .36, 1) 160ms both;
}

@keyframes auth-boom-lift {
    from {
        transform: rotate(2deg);
    }

    70% {
        transform: rotate(-23deg);
    }

    to {
        transform: rotate(-20deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    svg.auth-logo .auth-logo-arm {
        animation: none;
    }
}

@media (max-width: 420px) {
    .auth-card-header {
        padding: 1.75rem 1.25rem 0.25rem;
    }

    .auth-title-brand {
        font-size: 2rem;
    }

    .auth-card .card-body {
        padding: 1.25rem 1.25rem 1.5rem;
    }
}