/* NHRL Portal login — layout + form; tokens in portal-components.css */

.login-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem 0 2rem;
}

.login-card {
    position: relative;
    overflow: hidden;
    /* Hero tier — login is a flashy-allowed surface. */
    border-radius: var(--bs-border-radius-xxl);
    isolation: isolate;
}

/* THE HERO REFRACTION IS GONE FROM THIS CARD (2026-08-28).
   It was `backdrop-filter: url(#portal-lens) blur(8px) saturate(140%)`.

   #portal-lens is an feDisplacementMap at scale -24 driven by a 64x64 gradient
   stretched over the whole surface, so the displacement GROWS toward the bottom
   of the element. On the short /login card that stayed decorative. On /register
   — the tallest card in this family — it destroyed the bottom half: the "3-30
   characters" and "At least 8 characters" hints were unreadable and the hCaptcha
   widget was smeared into a white blob. Measured on the helper-text row: 0% of
   pixels reached text brightness with the lens on, 4.56% with it off.

   Only the LENS did this; plain blur(8px) saturate(1.4) measures identical to no
   backdrop-filter at all. Stacking-context escapes (z-index, isolation on the
   card body) do not help — the displacement samples the composited layer either
   way, so there is no way to keep the effect and the legibility.

   Not worth a page-scoped exception: the style contract calls the lens additive
   garnish that is "never load-bearing", and /register is where the pits-poster
   QR sends competitors to make an account. Gated by RegisterLegibilityTest.

   The plain glass card material below is what both pages wear now. */

html[data-portal-glass="off"] .login-card {
    backdrop-filter: none;
}

/* Aurora behind Sparky — dark theme only; decorative, sits under the content.
   The global aurora tokens were quieted for the glass restyle; the login hero
   keeps its glow via local overrides (still var()-only, no literals). */
.portal-page-themed[data-bs-theme="dark"] .login-card::before {
    content: "";
    --portal-aurora-magenta: rgba(207, 35, 202, 0.14);
    --portal-aurora-teal: rgba(0, 218, 216, 0.10);
    position: absolute;
    top: -8rem;
    left: 50%;
    transform: translateX(-50%);
    width: 34rem;
    height: 22rem;
    background:
        radial-gradient(closest-side, var(--portal-aurora-magenta), transparent 72%),
        radial-gradient(closest-side at 65% 40%, var(--portal-aurora-teal), transparent 70%);
    pointer-events: none;
}

.login-card .card-body {
    position: relative; /* paint above the aurora */
    padding: 2rem 1.75rem;
}

.login-logo-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem;
}

.login-sparky {
    width: 88px;
    height: 88px;
    object-fit: contain;
}

.login-title {
    font-weight: var(--portal-weight-strong);
    letter-spacing: -0.02em;
    color: var(--portal-c-text);
}

/* Only the surface delta — border, text and focus ring come from the global
   .portal-page-themed .form-control skin. Auth cards sit the fields on the
   header surface so they read against the card in light theme. */
.portal-page-themed .login-input,
.portal-page-themed .login-input:focus {
    background-color: var(--portal-c-surface-header);
}

/* An outline button stacked under a filled one is the same decision presented
   twice, so the two have to read as the same class of object. They did not:
   .btn-primary carries a 0.1 white rim and .btn-outline-secondary a 0.2 one,
   which is right when an outline button is alone on a toolbar holding its own
   shape, and wrong beside a filled twin — there the heavier rim reads as a
   grey box drawn around the quieter option. Written for "Sign in with Google"
   under "Log in" (archived 2026-09-22); it still earns its place on the resend
   and try-again buttons in the forgot-password and verify cards, and on the
   password-toggle addons. Scoped to the auth card on purpose — outline buttons
   everywhere else keep the rim that makes them legible on their own. */
.portal-page-themed .login-card .btn-outline-secondary {
    border-color: var(--portal-c-btn-primary-border);
}

/* Load-bearing: the global .form-control::placeholder colour outranks
   Bootstrap's form-floating transparency, which would show the placeholder
   through the floating label. */
.portal-page-themed .login-input::placeholder {
    color: transparent;
}

.portal-page-themed .form-floating > label {
    color: var(--portal-c-text-muted);
}

.portal-page-themed .form-floating > .login-input:focus ~ label,
.portal-page-themed .form-floating > .login-input:not(:placeholder-shown) ~ label {
    color: var(--portal-c-text-muted);
}

/* The invalid state comes from the kit's validation family now
   (portal-components.css) — this block was a third red. */

.signup-help-link {
    text-decoration: none;
    opacity: 0.75;
    transition: opacity var(--portal-dur-1, 120ms) var(--portal-ease-out, ease);
}

.signup-help-link:hover {
    opacity: 1;
    text-decoration: underline;
}

@media (max-width: 575.98px) {
    .login-page {
        padding: 0.5rem 0 1.5rem;
    }

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

    .login-sparky {
        width: 72px;
        height: 72px;
    }
}