/* =========================================================================
   AUTH — the sign-in card, and the standalone page that shows nothing but one.
   Loaded by / (landing.html) and /auth/callback. After tokens.css + system.css.

   Split out of landing.css so the two halves stop sharing a fate. That file is
   the LANDING'S OWN layout (a split screen that owns the viewport); this one is
   the card family, which /auth/callback needs with no pitch panel anywhere in
   sight. While they were one file, replacing the landing meant silently
   replacing the other page's stylesheet too — and nobody looks at the callback
   page while working on a new landing.

   Two halves, in order:
     1. `.auth-page*` — the standalone shell, used ONLY by /auth/callback.
     2. `.auth-*` — the card, used by BOTH pages.

   There is nothing here for a password field: the ways in are an emailed link
   and Google, so the card is one input and two buttons.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. THE STANDALONE AUTH PAGE (/auth/callback)
   One centered card on the warm --blush field, brand and language in the
   corners. No grid: there is no second column, which is the whole difference
   from the landing.
   ------------------------------------------------------------------------- */

/* `min-height`, not `height` + `overflow: hidden`. The landing locks the
   viewport because its split grid is designed to fill it exactly; this page is
   one small card, so locking it could only ever clip something (a long error
   message, a zoomed font, a short window) with nothing gained. */
.auth-page {
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--blush);
  padding: 2rem;
}

/* Corner chrome. Absolute at EVERY width — unlike the landing, which has to
   pull its brand back into the flow on a phone so it clears the pitch column.
   Here there is nothing below the corners but empty field, so one position
   holds all the way down. */
.auth-page-brand {
  position: absolute; top: 1.4rem; left: 1.6rem;
  z-index: 10;
  display: block;
}
.auth-page-brand img { height: 48px; width: auto; object-fit: contain; display: block; }
.auth-page-lang {
  position: absolute; top: 1.6rem; right: 1.6rem;
  z-index: 10;
}

.auth-foot {
  margin-top: 1.2rem;
  text-align: center;
  font-size: var(--text-xs); color: var(--ink-faded);
}


/* -------------------------------------------------------------------------
   2. THE CARD — shared by / and /auth/callback
   ------------------------------------------------------------------------- */

/* Composes the shared .card; only the width cap, the roomier padding and the
   stronger (raised) shadow are page-specific. */
.auth-card {
  width: 100%; max-width: 380px;
  padding: 1.8rem 1.6rem;
  box-shadow: var(--shadow-md);
}

.auth-form { display: flex; flex-direction: column; gap: .8rem; }
/* label + input group */
.auth-field { display: flex; flex-direction: column; gap: .3rem; }
.auth-label {
  font-family: var(--body);
  font-size: var(--text-2xs); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faded);
  padding-left: .15rem;
}
/* Auth inputs run one size up from the shared .input (taller, 8px radius): the
   auth card is roomier than a dense form. */
.auth-input { padding: .65rem .85rem; border-radius: var(--radius-xs); }

/* The typo suggestion's slot. No reserved height: the hint appears while typing
   and the card is the last thing on a 520vh film, so nothing below it can be
   pushed out of view — reserving a line would only add a permanent gap under
   every correctly typed address. */
.auth-hint { padding-left: .15rem; }

.auth-btn { margin-top: .4rem; }

/* The Turnstile mount. `:empty` carries the whole rule on purpose: with no site key
   configured — local dev, the test suite, any deploy without a captcha — landing.js
   renders nothing into this div, and an unconditional margin would then open a gap
   under the field for a widget that does not exist. So the spacing belongs to the
   widget, not to the container.
   In "managed" mode Turnstile usually resolves invisibly and this collapses again a
   moment after load, which is why the gap is small rather than reserved. */
.auth-captcha:not(:empty) { margin-top: .5rem; }

/* The uppercasing lives HERE, not in the dictionary: casing is presentation, and a
   translator writing "Oppure" (or a second surface wanting it sentence-case) must not
   be able to make the two languages disagree. Letter-spacing comes with it — set
   uppercase without it and three letters read as one cramped block. */
/* NOTE: `.auth-divider` (a ruled "or" between the two ways in) was removed with the
   landing rebuild, and there is no second home for it: the email path is now a
   collapsed disclosure whose own label already reads "Or continue with email", so the
   divider said the same word twice, six pixels apart. Do not re-add it without a
   surface that needs it — `test_no_orphan_css_classes` fails on a rule nothing
   applies. */

/* The Google button is the card's `.btn--primary` — the fastest way in, so it
   carries the weight. It sets NO background of its own: it used to force
   `var(--paper)` back when it was a ghost sitting on paper-2, and leaving that
   here would paint a paper fill under the primary's paper TEXT, i.e. an invisible
   label. Only two things stay page-specific: the body face (the label is a brand
   name, not a heading) and a label size that keeps "Continue with Google" on one
   line inside a 380px card — `.btn--lg` then contributes height alone. */
.auth-google { font-family: var(--body); font-size: var(--text-md); }
.auth-google .google-logo { flex-shrink: 0; width: 18px; height: 18px; }

/* Consent line. Small and quiet, but it is a legal statement, so it is legible
   (--ink-faded on paper, not a lighter grey) and its links are underlined rather
   than colour-only — the sentence is the one place on this card where "these are
   links" cannot depend on hue alone. */
.auth-legal {
  margin: .2rem 0 0;
  font-size: var(--text-xs); line-height: 1.5;
  color: var(--ink-faded); text-align: center;
}
.auth-legal a { color: var(--cocoa-dk); text-decoration: underline; }
.auth-legal a:hover { color: var(--burgundy); }

.auth-error {
  font-size: var(--text-sm); color: var(--burgundy);
  text-align: center;
  min-height: 1.2em;
}
/* success message reuses the error slot, neutral/positive color */
.auth-error.success { color: var(--cocoa-dk); }

/* THE CARD'S SECOND STATE: "check your inbox".
   It swaps with `.auth-form` above the divider, so the Google button below serves
   both states — the alternative way in stays reachable while the user waits. */
.auth-sent { display: flex; flex-direction: column; gap: .4rem; text-align: center; }
.auth-form.hidden, .auth-sent.hidden { display: none; }
.auth-sent p { margin: 0; }
.auth-sent-title {
  font-family: var(--heading); font-weight: 600;
  font-size: var(--text-xl); color: var(--ink);
}
.auth-sent-body { font-size: var(--text-base); color: var(--ink-soft); }
/* The echoed address is the point of this state — it is where a typo is caught —
   so it is the one emphasised thing in it. `break-all` because a long address in a
   380px card would otherwise widen it. */
.auth-sent-addr { color: var(--ink); word-break: break-all; }
.auth-sent-hint { font-size: var(--text-xs); color: var(--ink-faded); }
.auth-sent-actions {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  margin-top: .4rem;
}

/* A link that acts: the typo correction, "change address" and "resend". Was
   `.auth-forgot` when the only one was the password recovery link. */
.auth-linkbtn {
  background: none; border: none; padding: 0;
  font-family: var(--body); font-size: var(--text-sm);
  color: var(--cocoa-dk); cursor: pointer;
  text-decoration: none;
}
.auth-linkbtn:hover { color: var(--burgundy); text-decoration: underline; }
/* The resend spends its first minute counting down (a second link kills the
   first), and a disabled control has to LOOK unavailable or the click that does
   nothing reads as a broken button. */
.auth-linkbtn:disabled { color: var(--ink-faded); cursor: default; text-decoration: none; }

/* reset page: "back to login" link with a Lucide arrow (no literal glyph) */
.auth-back {
  display: inline-flex; align-items: center; gap: .3rem;
  margin-top: .8rem;
  font-family: var(--body); font-size: var(--text-sm);
  color: var(--cocoa-dk); text-decoration: none;
}
.auth-back:hover { color: var(--burgundy); text-decoration: underline; }
.auth-back svg { width: 14px; height: 14px; }

.auth-title {
  font-family: var(--heading); font-size: var(--text-2xl);
  color: var(--ink); text-align: center; margin: 0 0 1.2rem;
}

@media (max-width: 900px) {
  .auth-page { padding: 2rem 1.5rem; }
}