/* ── Login — the canvas-scale model (same family as the album/bookshelf pages) ─────────────────
   The composition lives in a fixed 1264×980 .login-canvas, sized to FIT the viewport (whichever of
   width / height-minus-header binds). Every child is sized in container-query units (cqw/cqh) or
   em, so the whole thing — globe, logo, card, all form text — scales as ONE unit. No scroll (the
   height term subtracts the header), and tuning stays proportional (no per-element px). */

.login-stage {
    /* Fill EXACTLY the area under the fluid .app-header. The header scales with the viewport (vh-based
       clamp), so we subtract var(--header-h) (defined once in components.css) instead of a fixed px
       reserve — the old 144px only matched at one screen height and left a gap on shorter windows that
       overflow:hidden then sliced into a hard band across the globe's glow. Now the stage always
       reaches the true viewport bottom and the clip line lands off-screen (invisible). */
    height: calc(100svh - var(--header-h));
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;                     /* clips the oversized globe; background = the body's ONE
                                             fixed --bg-page gradient (no second gradient → no seam) */
}

.login-canvas {
    position: relative;
    width: min(1264px, 96vw, calc((100svh - var(--header-h)) * 1264 / 980));
    aspect-ratio: 1264 / 980;
    container-type: size;                 /* cqw/cqh below = % of THIS box → everything scales as one */
}

/* The globe is now the shared .canvas-globe layer (components.css), rendered by _Layout behind every
   canvas page — identical on login and the album pages. (Was a bespoke .login-globe img in the canvas.) */

/* The form card — centered, width in cqw. Its root font-size is cqh and everything inside uses em,
   so the card (text + spacing) scales with the canvas as one unit. */
.login-card {
    position: absolute; top: 15%; left: 50%; transform: translateX(-50%);
    width: 34cqw; z-index: 1;
    font-size: 1.75cqh;                   /* scaling root for the em-based internals below */
    padding: 1.9em; border-radius: 1em;
    background: var(--bg-night-card); box-shadow: var(--shadow-glass);
}
.login-title  { font-family: var(--serif); color: var(--gold-bright); text-align: center; margin: 0 0 1.3em; font-size: 1.9em; }
.login-form   { display: flex; flex-direction: column; gap: .55em; }
.login-label  { font-family: var(--sans); font-weight: 500; font-size: .8em; color: rgba(var(--cream), .75); }
.login-input  { padding: .8em; border-radius: .5em; border: 1px solid var(--gold-bronze); background: rgba(0,0,0,.25); color: rgb(var(--cream)); font-family: var(--sans); font-size: 1em; }
.login-input::placeholder { color: rgba(var(--cream), .45); }
.login-submit { width: 100%; margin-top: .5em; padding: .9em; font-size: .9em; }
.login-error  { color: #ff9b9b; font-weight: 500; font-size: .85em; margin: 0; }
.login-links  { display: flex; justify-content: space-between; margin-top: 1.3em; }
.login-links a{ color: var(--gold); font-size: .8em; }

/* ── External (social) sign-in — secondary action below the email/password form ──────────────────
   Shared visual language with the Account → Security connect rows; sizes are em (the card's cqh root)
   so they scale with the rest of the login canvas. */
.ext-auth-divider {
    display: flex; align-items: center; gap: .8em;
    margin: 1.2em 0 1em; color: rgba(var(--cream), .55);
    font-family: var(--sans); font-size: .72em; text-transform: lowercase; letter-spacing: .02em;
}
.ext-auth-divider::before, .ext-auth-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--gold-bronze); opacity: .5;
}
.ext-auth-providers { display: flex; flex-direction: column; gap: .6em; align-items: center; }

/* .ext-auth-google-btn (Google) + .ext-auth-apple-official (Apple) styling is shared with /account → see external-auth.css. */

/* Provider buttons we render ourselves (Apple — disabled this pass). */
.ext-auth-btn {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: .5em;
    padding: .75em 1em; border-radius: 999px; border: 1px solid var(--gold-bronze);
    background: rgba(0,0,0,.25); color: rgb(var(--cream));
    font-family: var(--sans); font-weight: 500; font-size: .85em; cursor: pointer;
}
.ext-auth-btn[disabled] { opacity: .5; cursor: not-allowed; }
.ext-auth-apple-mark {
    width: 1em; height: 1em; background: currentColor;
    -webkit-mask: var(--apple-logo, none) center / contain no-repeat;
            mask: var(--apple-logo, none) center / contain no-repeat;
}
.ext-auth-soon {
    font-size: .8em; font-weight: 600; color: var(--gold);
    background: rgba(var(--cream), .08); border-radius: 999px; padding: .15em .6em;
}

/* Task 6 — registration "Check your inbox" pending page */
.login-eyebrow { font-family: var(--sans); text-transform: uppercase; letter-spacing: .18em; font-size: .7em; font-weight: 600; color: var(--gold); text-align: center; margin: 0 0 .5em; }
.pending-email { display: inline-block; font-family: var(--sans); font-weight: 700; color: var(--gold-bright); word-break: break-all; }
.login-hint { font-family: var(--sans); font-size: .78em; color: rgba(var(--cream), .6); text-align: center; margin: 1em 0 0; }
.pending-links { display: flex; flex-direction: column; gap: .55em; align-items: center; margin-top: 1.4em; }
.pending-links span { font-size: .8em; color: rgba(var(--cream), .7); }
.pending-links a { color: var(--gold); }
.pending-startover { display: inline-flex; gap: .35em; align-items: baseline; margin: 0; font-size: .8em; color: rgba(var(--cream), .7); }
.pending-linkbtn { background: none; border: 0; padding: 0; color: var(--gold); font: inherit; cursor: pointer; text-decoration: underline; }
.pending-linkbtn:hover, .pending-linkbtn:focus-visible { color: var(--gold-bright); }