/* ---------- Full-width auth pages (login / register / forgot-password) ----------
   Deliberately its own stylesheet, loaded only by these three pages -
   .auth-card/.auth-oauth-*/.auth-links already exist in the shared theme
   CSS and are also used by reset-password.php, two-factor-verify.php,
   and verify.php, which are outside this redesign's scope. Everything
   here is scoped to new classes those other pages never reference, so
   they're completely unaffected. */

/* Escapes the web theme's OWN nested width constraints for JUST these
   three pages - .page-content (900px) sits inside .web-shell (1164px),
   both centered, and neither can be undone by styling a mere CHILD of
   .page-content the way .auth-page-wrap tries to below - a parent's own
   max-width genuinely bounds its box regardless of what its children
   do. The only way to override it cleanly, for only these three pages
   and nothing else, is a body-level class these pages opt into
   (rendered by both theme headers, see the $bodyClass param added to
   Theme::render() calls in these three pages), so no other page on the
   site is affected. Needs !important to beat .page-content's own
   already-!important rule - normal specificity still decides the
   winner among competing !important rules, and a body-class selector
   here is more specific than the plain .page-content one it's
   overriding either way. */
body.auth-fullwidth-page .web-shell { max-width: none; }
body.auth-fullwidth-page .page-content,
body.auth-fullwidth-page .topbar,
body.auth-fullwidth-page .site-footer { max-width: none !important; }

/* Fills the content column's own width, canceling out its horizontal
   padding with a small, fixed negative margin - NOT a viewport-relative
   breakout. That was the original approach here, and it was wrong: both
   themes' content areas sit alongside a persistent sidebar on wider
   screens (a CSS grid column in the touch theme, a flexbox row in the
   web theme), not spanning the full browser viewport - a
   calc(50% - 50vw)-style trick calculates from the WRONG reference
   point in either case, breaking out past the content column without
   knowing the sidebar is there at all, which is exactly what caused the
   broken, overlapping layout this replaces. A small fixed margin that
   only ever cancels the content column's own modest padding (.35rem in
   the touch theme, a .3–.5rem clamp in the web theme) can never reach
   far enough to overlap the sidebar, since the sidebar is a separate
   layout track entirely - not something a negative margin on a child of
   the content column can ever encroach on. */
.auth-page-wrap {
    margin-left: -.6rem; margin-right: -.6rem;
    width: calc(100% + 1.2rem);
    background: linear-gradient(160deg, var(--indigo), var(--indigo-deep));
    padding: 2.75rem 1rem 3rem;
    display: flex; flex-direction: column; align-items: center;
    border-radius: var(--radius, 5px);
}

.auth-page-card {
    width: 100%; max-width: 440px;
    background: var(--surface); border-radius: 16px;
    padding: 1.9rem 1.6rem; box-shadow: 0 28px 64px -22px rgba(0,0,0,.4);
}
.auth-page-card h1 { font-size: 1.35rem; margin: 0 0 1.1rem; text-align: center; }

/* .auth-card's own margin:0 doesn't apply here (different class) - reset
   the site-wide .card's default margin-bottom, since this card is the
   only thing in its own centered column, not sitting among other cards. */
.auth-page-card.card { margin-bottom: 0; }

@media (max-width: 480px) {
    .auth-page-wrap { padding: 2rem .75rem 2.5rem; }
    .auth-page-card { padding: 1.5rem 1.2rem; border-radius: 12px; }
}