/* ============================================================================
   ocellio — auth surfaces: login/bootstrap card and the OAuth consent page.
   Loads after app.css (colours from tokens.css, base rules from app.css).
   ============================================================================ */

/* ---- auth card (login / bootstrap) — the first impression ---------------- */
.auth-card {
  max-width: 408px; margin: 11vh auto 0; padding: 38px 36px 34px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px;
  position: relative; overflow: hidden; text-align: center;
  animation: rise 0.55s cubic-bezier(.2,.7,.2,1) both;
}
.auth-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--brand-grad);
}
.auth-mark { width: 66px; height: 66px; margin: 2px auto 0; display: block; }
.auth-card h1 { font-size: 2.5rem; margin: -4px 0 0; letter-spacing: -0.03em; color: var(--fg); }
/* Gradient wordmark only where text-clip is supported; otherwise the base rule
   above keeps it a solid, readable navy/off-white (no invisible-text risk). */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .auth-card h1 { background: var(--brand-grad); -webkit-background-clip: text;
    background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
}
.auth-card input { padding: 11px 13px; }
.auth-card button[type="submit"], .auth-card #bootstrap-btn,
.auth-card #enroll-btn, .auth-card #enroll-continue, .auth-card #passkey-auth {
  padding: 11px; font-size: 0.95rem; margin-top: 4px;
}
/* v1 'initial' mode: the token form IS the login box content */
.auth-card .token-login {
  display: flex; flex-direction: column; gap: 10px; text-align: left;
  margin-top: 4px;
}
.auth-card .token-login label { font-size: 0.82rem; }
/* v1 'passkey' confirm mode: ghost Cancel below the confirm button */
.auth-card .cancel-login { margin-top: 8px; }
.auth-card .cancel-login .btn-ghost {
  width: 100%; padding: 10px; background: transparent; color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer;
}
.auth-card .cancel-login .btn-ghost:hover { color: var(--fg); border-color: var(--muted); }
.auth-card .setup-steps { text-align: left; margin: 0; padding-left: 1.3em; }
.auth-card .setup-steps li { margin-bottom: 6px; }
.auth-card .info {
  color: var(--muted); font-size: 0.88rem; background: var(--raised);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px;
}
/* one-time token reveal after first-passkey enrollment */
.auth-card #token-reveal { display: flex; flex-direction: column; gap: 10px; }
.auth-card #token-reveal[hidden] { display: none; }
.auth-card #new-token {
  background: var(--glow); border: 1px dashed var(--accent);
  border-radius: var(--r-sm); padding: 10px 12px; margin-top: 0;
}

/* ---- OAuth consent (nav-less focused modal) ----------------------------- */
main.consent { max-width: 520px; margin: 7vh auto 0; padding: 0 22px 80px; }
.consent-mark { width: 54px; height: 54px; display: block; margin-bottom: 14px; }
.consent-eyebrow { font-size: 0.69rem; color: var(--faint); text-transform: uppercase;
  letter-spacing: 0.12em; margin: 0 0 6px; }
.consent h1 { font-size: 1.9rem; margin: 0 0 6px; }
.consent-card { background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 16px 18px; margin: 16px 0; }
.consent-card p { margin: 0 0 4px; }
.consent-card p:last-child { margin-bottom: 0; }
.consent-strong { font-weight: 600; font-size: 1rem; color: var(--fg); }
.consent-scope { list-style: none; margin: 0 0 8px; padding: 0; }
.consent-scope li { padding: 3px 0 3px 22px; position: relative; color: var(--fg); }
.consent-scope li::before { content: "✓"; position: absolute; left: 0; color: var(--teal);
  font-weight: 700; }
.consent-actions { display: flex; flex-direction: column; gap: 10px; margin: 22px 0 0; }
.consent-actions button { padding: 12px; font-size: 0.95rem; }
.consent-foot { font-size: 0.8rem; margin-top: 18px; }