/* =============================================================================
   auth.css — the sign-in surface (/login/ /register/ /forgot-password/
   /reset-password/ + /bs/ twins). Loaded ONLY by those eight pages, which
   tools/build-auth-pages.mjs generates; it stamps this file with its own
   content hash, so editing it re-stamps exactly those pages and nothing else.

   Adobe-style (owner, 1 Oct 2026): one full-bleed photograph behind the whole
   page — under the glass header too — picked at random per visit from
   assets/data/auth-backgrounds.json, a frosted card carrying the form, and the
   photo's title + credit in the corner. Depends on v4.css for tokens
   (--bg, --ink, --line, --hdr-h, --gut, --maxw, --ease).
   ========================================================================== */

/* The page runs up under the sticky glass header by its height and pads back
   down, the same move v4.css makes for an opening .hero. */
main.signin{position:relative;isolation:isolate;display:flex;align-items:center;overflow:hidden;
  margin-top:calc(-1 * var(--hdr-h));padding:var(--hdr-h) 0 76px;
  min-height:100vh;min-height:100svh;background:#0C0C0F}

/* The photograph. Decorative (alt="", aria-hidden): the title in the corner
   names it for everyone. Starts transparent and fades in on load, so a slow
   image never flashes half-drawn behind the form. */
.signin__bg{position:absolute;inset:0;z-index:-1;margin:0}
/* position:absolute on purpose. The picker <img> has no src until the script sets
   one, and with scripts off it still takes the full box; the <noscript> image
   after it then flowed BELOW the figure and was clipped by main's overflow, so
   the fallback photograph was never visible. Stacked, whichever one has a
   picture shows. */
.signin__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--ease)}
.signin__bg img.is-in{opacity:1}
/* A bounded scrim, not a page-wide wash: darker behind the card side and the
   credit corner, clear across the rest of the frame. */
.signin__bg::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(8,8,11,.5) 0%,rgba(8,8,11,.16) 48%,rgba(8,8,11,0) 72%),
  linear-gradient(180deg,rgba(8,8,11,.22) 0%,rgba(8,8,11,0) 22%,rgba(8,8,11,0) 70%,rgba(8,8,11,.5) 100%)}

/* min-width:0 — a flex item defaults to min-width:auto, i.e. never narrower than
   its content, and the injected form's content pushed the card off a 390px screen. */
.signin__wrap{width:100%;min-width:0;max-width:var(--maxw);margin-inline:auto;padding:clamp(24px,5vh,56px) var(--gut)}

/* The card: frosted, theme-aware (var(--bg) flips with the light/dark mode). */
.signin__card{width:100%;min-width:0;max-width:448px;padding:clamp(22px,3.2vw,40px);border-radius:18px;
  background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid var(--line);box-shadow:0 34px 90px -34px rgba(0,0,0,.7)}
.signin__card h1{font-size:clamp(28px,3.1vw,36px);margin:10px 0 8px}
.signin__card > p{color:var(--ink-dim);margin-bottom:22px;font-size:16.5px;line-height:1.5}
.signin__links{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:10px}
.signin__links .btn{white-space:normal;text-align:center}
.signin__alt{margin-top:18px;font-size:14px;color:var(--ink-dim)}
.signin__alt a{color:var(--red-text);font-weight:700}

/* Photo title + credit, bottom-right — Adobe's "Artwork by" corner. */
.signin__credit{position:absolute;right:var(--gut);bottom:22px;z-index:1;margin:0;max-width:min(52vw,440px);
  text-align:right;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.82);text-shadow:0 1px 3px rgba(0,0,0,.65)}
.signin__credit b{display:block;font-size:13.5px;font-weight:600;color:#fff}
.signin__credit b:empty{display:none}

@media (max-width:860px){
  main.signin{align-items:flex-start;padding-bottom:84px}
  .signin__card{margin-inline:auto}
  .signin__credit{left:var(--gut);right:var(--gut);max-width:none;text-align:center}
}
@media (prefers-reduced-motion:reduce){.signin__bg img{transition:none}}