/* Sign in, reset password, claim a gift.  Loaded last, after theme.css and scene.css.

   The idea: a window at the post office. One cream card standing on the countryside, the pigeon perched on
   its top edge, and one line of handwriting on a slip underneath. The engine (js/login.js,
   reset.js, claim.js) sets the title, the sub line and the messages, so nothing here depends on their words. */

.page-auth main { z-index: auto; }

.auth-shell {
  min-height: calc(100svh - var(--hdr-h, 66px));
  padding: clamp(112px, 14vh, 136px) clamp(16px, 4vw, 32px) clamp(48px, 8vh, 88px);
  align-items: flex-start;
  justify-content: center;
}
.auth-stage { width: min(100%, 29rem); position: relative; }

/* the card itself comes from theme.css (.auth-card is a surface); here only its measure and the perch */
.auth-card { max-width: none; padding: clamp(24px, 3.4vw, 32px) clamp(22px, 4vw, 36px) clamp(22px, 3vw, 26px); }
.auth-card h1 { font-size: clamp(1.9rem, 2.4vw + 1rem, 2.4rem); margin: 0 0 .35rem; }
.auth-card > p.sub { margin-bottom: 1.2rem; }

/* the pigeon stands on the top edge, feet on the card */
.auth-pigeon {
  position: absolute; right: clamp(20px, 7%, 40px); bottom: calc(100% - 3px);
  width: clamp(104px, 30%, 136px); height: auto; z-index: 2; pointer-events: none;
}

.auth-card .oauth-row { margin-bottom: 1.1rem; gap: .6rem; }
.auth-card .oauth-sep { margin-top: .55rem; }
.auth-card .field { margin-bottom: .95rem; }
.auth-card .btn-primary { margin-top: .4rem; min-height: 50px; }
.auth-card form { margin: 0; }

/* the two text buttons under the form: real tap targets, not just underlined words */
.auth-alt { margin-top: 1.1rem; padding-top: .3rem; gap: 0 1.2rem; font-size: .9375rem; }
.auth-alt button, .auth-alt a {
  min-height: 44px; padding: 0; display: inline-flex; align-items: center;
  font: 700 .9375rem/1.2 var(--font-ui); color: var(--pen); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--pen) 50%, transparent);
}
.auth-alt a:hover, .auth-alt button:hover { color: var(--pen-deep); text-decoration-color: currentColor; }
#mfa-step .auth-alt { margin-top: .8rem; border-top-style: dotted; }
#mfa-code { font-size: 1.5rem; letter-spacing: .35em; text-align: center; min-height: 56px; }

/* the line under the card: a plate, so the handwriting never floats on the sky */
.auth-aside {
  margin: 26px auto 0; width: max-content; max-width: 100%;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 12px;
  background: var(--cream); border-radius: 12px; box-shadow: 5px 5px 0 var(--edge); padding: 10px 20px 11px;
  font: 700 1rem/1.3 var(--font-ui); color: var(--ink);
  transform: rotate(-.6deg);
}
.auth-aside .hand { font-size: 1.75rem; color: var(--hand-ink); }
.auth-aside a { white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; }

/* messages sit inside the card: keep them off the card's dashed edge */
.auth-card .form-msg { margin: .2rem 0 1.1rem; }

/* claim: the one big button, and the line under it */
#claim-actions { margin-top: .4rem; }
#claim-actions .btn { min-height: 52px; }
#claim-actions p.sub { font: 500 var(--step--1)/1.5 var(--font-ui); color: var(--ink-dim); }

@media (max-width: 560px) {
  .auth-shell { padding-top: 104px; }
  .auth-pigeon { width: 108px; right: 20px; }
  .auth-aside { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .auth-aside { transform: none; } }