/* /login page-specific layout. Requires tokens.css + components.css loaded
   first. Anything reusable belongs in components.css instead — this file
   is just how those pieces are arranged on this one page. */

body{margin:0;background:var(--page);color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}

.auth-shell{position:relative;min-height:100vh;display:flex;
  align-items:center;justify-content:center;padding:24px;overflow:hidden}

/* Swirl + veil sit behind the card, full-bleed. Never behind body text —
   there is none here; the only text on the page lives inside the card. */
.site-swirl{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.auth-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(252,252,254,0) 55%,var(--page) 100%)}
@media (prefers-reduced-motion:reduce){
  .site-swirl *{animation:none !important}
}

.auth-card.card{position:relative;z-index:2;width:100%;max-width:404px;
  padding:34px 32px 28px;margin:16px}

.auth-mark{display:flex;align-items:center;gap:9px;margin:0 0 26px}
.auth-mark-glyph{width:28px;height:28px;border-radius:8px;flex:none;object-fit:cover}
.auth-mark-word{font-family:Fraunces,Georgia,serif;font-weight:600;
  font-size:17px;letter-spacing:-.01em;color:var(--ink)}

.auth-card h1{font-size:20px;font-weight:600;margin:0 0 6px;letter-spacing:-.01em}
.auth-card .sub{color:var(--ink-2);margin:0 0 22px}

/* Step transition — a short cross-fade/slide, not a reveal-in-place.
   prefers-reduced-motion drops straight to the end state. */
.step{transition:opacity .2s ease,transform .2s ease}
.step[hidden]{display:none}
.step.entering{opacity:0;transform:translateX(8px)}
@media (prefers-reduced-motion:reduce){
  .step{transition:none}
  .step.entering{opacity:1;transform:none}
}

.sentto{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--wash);border:1px solid var(--line);border-radius:var(--r-control);
  padding:10px 12px;margin:0 0 20px}
.sentto p{margin:0;font-size:13px;color:var(--ink-2)}
.sentto strong{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}

.resend{display:flex;justify-content:space-between;align-items:center;
  margin-top:14px;font-size:12.5px;color:var(--ink-3)}
.resend .link:disabled{color:var(--ink-3);text-decoration:none;cursor:default}

.trust{display:flex;align-items:flex-start;gap:7px;margin:20px 0 0;
  padding-top:16px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-3);line-height:1.5}
.trust svg{flex:none;margin-top:1px}

.field + .field{margin-top:14px}

/* Footer overlay — .auth-shell centres its card both axes (no natural
   "bottom of the page" flow to hang a footer off), so it's pinned to the
   viewport bottom instead. See _pub_footer.html / public.css's .pub-footer
   for the flow version used everywhere else. */
.auth-shell .pub-footer{position:absolute;left:0;right:0;bottom:0;z-index:2;
  margin:0;padding:14px 20px 20px;border-top:none;
  color:var(--ink-3);font-size:12px;text-align:center}