/* ═══════════════════════════════════════════════════════════════
   Auth pages (DS) — /login, /signup, /verify-email, /reset-password,
   /forgot-password and the in-app-browser interstitial.

   Before this file, the auth shell was ~90 inline `style=` attributes in
   auth_layout.html plus a block of rules living in the SHARED marketing.css
   (.auth-input, .auth-submit, .oauth-btn, .webview-*). All of those classes
   were auth-only, so they move here and marketing.css loses the block —
   rule 9: a migration's CSS lives in its own file, and legacy files only get
   deletions.

   The form controls themselves are the DS field()/button() macros now. What
   is left here is the page shell, the Google button (whose brand mark makes
   it not a DS button — see below) and the webview-escape UI.

   /oauth/authorize and its org picker joined this shell in stage 4 (task 2):
   they share auth_layout() and this stylesheet, plus standalone-ds.css for
   the consent-specific panels/choice rows. Their old bespoke layout — a
   45-line file that loaded app.css, painted from the legacy `--app-*`
   palette, and pulled in DM Sans, which Phase 4 had already removed from
   the app — is deleted.
   ═══════════════════════════════════════════════════════════════ */

.au {
  min-height: 100vh;
  background: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(2rem, 6vh, 4rem) 20px 2.5rem;
}

.au__brand { margin-bottom: 2rem; }

/* The card. A page-level surface, deliberately not composing .ds-card: it
   has its own padding and a tighter shadow than the marketing float. Radius
   and border come from the tokens, so a retune still moves it. */
.au__card {
  width: 100%;
  max-width: 440px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 40px 36px;
  box-shadow: 0 2px 8px oklch(0.19 0.012 75 / 0.04),
              0 0 0 1px oklch(0.19 0.012 75 / 0.02);
}

@media (max-width: 480px) {
  .au__card { padding: 32px 22px; }
}

/* ── Card content ───────────────────────────────────────────────── */

.au__title {
  font-family: var(--font-sans);
  font-size: 26px;
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--foreground);
  text-align: center;
  margin: 0;
}

.au__intro {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--body-foreground);
  text-align: center;
  margin: 12px 0 0;
}

.au__intro strong { color: var(--foreground); font-weight: 600; }

/* The round glyph tile above the title on the password/verify screens. */
.au__icon {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.au__icon > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--tint-blue);
  color: var(--tint-blue-ink);
}

/* A banner inside the card needs its own top gap; the DS alert ships with
   no margin so callers control rhythm. */
.au__banner { margin-top: 20px; }

/* The resend rate-limit copy arrives with newlines in it, so that banner
   preserves them. */
.au__banner--pre .alert > h2 { white-space: pre-line; }

.au__signout { text-align: center; margin-top: 12px; }

/* The signup offer tag, centred under the intro. */
.au__offer {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.au__stack {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

/* "or" rule between the OAuth button and the email form. */
.au__sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
}

.au__sep::before,
.au__sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.au__sep-label {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.au__form {
  display: grid;
  gap: 10px;
}

/* Bot trap. `display: none` on the WRAPPER, never an off-screen position:
   Chrome's address autofill and password managers ignore
   autocomplete="off" and DO fill rendered-but-hidden inputs named
   "website", which 403s a real login with the "session expired" CSRF
   error. A non-rendered field is never autofilled; a naive bot reading the
   raw HTML still sees and fills it. */
.au__trap { display: none; }

.au__submit { width: 100%; margin-top: 4px; }

.au__forgot {
  text-align: right;
  margin-top: -2px;
}

.au__link {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--muted-foreground);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.au__link:hover { color: var(--foreground); }

.au__switch {
  font-family: var(--font-sans);
  font-size: 13px;
  text-align: center;
  color: var(--muted-foreground);
  margin: 20px 0 0;
}

.au__switch a {
  color: var(--foreground);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.au__help {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
  color: var(--muted-foreground);
  margin: 20px 0 0;
}

/* A button that reads as a text link (Sign out on the verify screen). It is
   inside a POST form, so it must be a <button>, not an <a> — that is why it
   is not the DS `link` button variant, which would be right for the look
   but is styled for an anchor's metrics. */
.au__linkbtn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--muted-foreground);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.au__linkbtn:hover { color: var(--foreground); }

/* ── Below the card ─────────────────────────────────────────────── */

.au__foot {
  margin-top: 20px;
  text-align: center;
  max-width: 42ch;
}

.au__legal {
  font-family: var(--font-sans);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted-foreground);
  margin: 0;
}

.au__legal a {
  color: var(--muted-foreground);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.au__legal a:hover { color: var(--foreground); }

.au__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--muted-foreground);
  text-decoration: none;
}
.au__back:hover { color: var(--foreground); }

.au__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 2.5rem;
}

.au__trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted-foreground);
}

.au__trust-item svg {
  width: 13px;
  height: 13px;
  color: var(--tint-green-ink);
}

/* ── Google / provider button ───────────────────────────────────
   Not a DS button(): it carries Google's four-colour brand mark, and the
   macro takes a text label. Same reasoning as the MCP install buttons in
   the docs. Styled from the DS secondary recipe so it sits with them, and
   the mark's literal brand colours are legal per rule 2's third-party
   exception (a vendor logo in the wrong colour is wrong, not off-palette). */

.oauth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.oauth-btn:hover {
  border-color: var(--foreground);
  box-shadow: var(--shadow-raised-light);
}

.oauth-btn svg { width: 17px; height: 17px; flex: none; }

/* The ink variant — used where the escape link IS the primary action. */
.oauth-btn--primary {
  background: linear-gradient(180deg, var(--primary-face-top), var(--primary-face-bottom));
  border-color: transparent;
  box-shadow: var(--shadow-raised-dark);
  color: var(--primary-foreground);
}
.oauth-btn--primary:hover { border-color: transparent; opacity: 0.92; }

/* The accent variant — the recommended escape inside the webview banner. */
.oauth-btn--accent {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-foreground);
}
.oauth-btn--accent:hover { border-color: transparent; opacity: 0.92; }

.oauth-btn--soft { background: transparent; }
.oauth-btn--sm { height: 40px; font-size: 13px; }

/* De-emphasised: inside a webview, Google sign-in is blocked, so the
   button stays visible but recedes behind the escape CTA. */
.oauth-btn--deemph { opacity: 0.55; }

/* ── In-app-browser escape UI ───────────────────────────────────
   Driven by webview-escape.js (data-escape-link / data-copy-link /
   data-escape-hint). Markup and hooks are unchanged from the pre-DS
   version — only the paint moved. */

.webview-cta {
  margin-top: 22px;
  padding: 16px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-xl);
  background: var(--tint-blue);
}

.webview-cta--compact { padding: 12px 14px; }

.webview-cta__eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tint-blue-ink);
  margin: 0 0 6px;
}

.webview-cta__title {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--foreground);
  margin: 0 0 6px;
}

.webview-cta__body {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--body-foreground);
  margin: 0 0 12px;
}

.webview-cta--compact .webview-cta__body { margin-bottom: 10px; }

.webview-cta__actions { display: grid; gap: 9px; }

.webview-cta--compact .webview-cta__actions {
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.webview-fallback__body {
  display: none;
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.55;
  text-align: center;
  color: var(--muted-foreground);
  margin: 12px 0 0;
}
.webview-fallback__body.is-visible { display: block; }
.webview-fallback__body b { color: var(--foreground); font-weight: 600; }

.webview-lock {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--tint-blue);
  color: var(--tint-blue-ink);
}

/* ── Phone type floor (hard rule 6) ─────────────────────────────
   Keyed at 768px to match ds.css — this file loads after it, so a floor
   keyed lower would win at equal specificity and reopen the band. The
   legal line is the one thing allowed below 12px on desktop, and it comes
   up to the floor here. */

@media (max-width: 768px) {
  .au__legal,
  .au__trust-item,
  .au__back,
  .au__sep-label,
  .webview-cta__eyebrow,
  .webview-fallback__body { font-size: 12px; }
}

/* The escape buttons are the only way out of an in-app browser, so they get
   the touch target regardless of pointer — a webview is a phone by
   definition. Everything else follows ds.css's pointer key. */
.webview-cta .oauth-btn { min-height: 44px; }

@media (any-pointer: coarse) {
  .au__link,
  .au__back,
  .au__linkbtn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Inline inside a running sentence, so it stays inline — prose, not a
     control. */
  .au__switch a,
  .au__legal a { display: inline; min-height: 0; }
}