/* ============================================================
   conva — auth surfaces (sign in, create account, password reset,
   account, desktop OAuth callback).

   These pages used to carry FIVE private <style> blocks, no site header and
   no theme bootstrap, so they drifted into looking like a different product:
   forgot-password/update-password referenced tokens that don't exist
   (--color-bg-inset, --color-accent, --radius-md, --color-success-bg …) and
   had no data-theme, which is why they rendered with the wrong font, no
   header and no theme.

   One shared sheet instead, layered on top of main.css. Rules here only use
   the alias tokens declared in tokens.css, so these pages re-theme with the
   rest of the site (rule 1) and the header/footer/button/mark styles come
   from main.css unchanged. Loaded ONLY by the auth pages — nothing here
   leaks onto the marketing site.
   ============================================================ */

/* ---------- page shell ----------
   Header on top, card centred in whatever is left, footer pinned to the
   bottom on short pages. */
.auth-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.auth-main {
  flex: 1;
  display: grid;
  place-items: center;
  padding-block: clamp(2rem, 7vw, 4.5rem);
  padding-inline: var(--gutter);
  position: relative;
  isolation: isolate;
}
/* A single soft wash so the card doesn't float on flat black — the same
   aurora hue the marketing pages use, at a fraction of the strength. */
.auth-main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(52% 46% at 50% 0%, var(--aurora-azure), transparent 72%),
    radial-gradient(42% 40% at 92% 96%, var(--aurora-lavender), transparent 70%);
}

/* ---------- card ---------- */
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-18);
  padding: clamp(1.5rem, 4vw, 2.1rem) clamp(1.25rem, 4vw, 1.85rem);
  box-shadow: var(--shadow-card);
}
.auth-card--wide {
  max-width: 460px;
}
.auth-eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.7rem;
}
.auth-title {
  font-size: clamp(1.45rem, 4vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 0.4rem;
}
.auth-sub {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0 0 1.5rem;
  text-wrap: pretty;
}

/* ---------- form ---------- */
.auth-field {
  display: block;
  width: 100%;
  margin-bottom: 0.85rem;
}
.auth-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.auth-input {
  width: 100%;
  background: var(--void);
  border: 1px solid var(--border);
  border-radius: var(--r-11);
  color: var(--text);
  font: inherit;
  padding: 0.75rem 0.9rem;
  min-height: 46px;
  transition: border-color 0.15s var(--ease);
}
.auth-input:hover {
  border-color: var(--border-strong);
}
.auth-input:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}
.auth-input::placeholder {
  color: var(--faint);
}
.auth-input:disabled {
  opacity: 0.55;
}
/* The submit button sits a little away from the last field. */
.auth-form .btn-block {
  margin-top: 0.5rem;
}

/* Password guidance — plain requirements, ticked as they're met. Never a
   score or a colour-only signal. */
.auth-hint {
  margin: 0.15rem 0 1rem;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  color: var(--faint);
  display: grid;
  gap: 0.2rem;
}
.auth-hint li::before {
  content: "○";
  display: inline-block;
  width: 1.25em;
  color: var(--faint);
}
.auth-hint li.met {
  color: var(--muted);
}
.auth-hint li.met::before {
  content: "●";
  color: var(--success);
}

/* ---------- Google ----------
   Google's brand guidelines require their own button colours, so this one
   intentionally does not follow the theme tokens. */
.btn-google {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
  border-radius: var(--r-11);
  font-weight: 600;
  min-height: 46px;
  cursor: pointer;
  transition: background 0.15s var(--ease);
}
.btn-google:hover {
  background: #f8f9fa;
}
.btn-google:disabled {
  opacity: 0.6;
  cursor: default;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--faint);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 1.15rem 0;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--border);
}

/* ---------- links / messages / fineprint ---------- */
.auth-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.1rem;
}
.auth-link {
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 600;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.auth-link:hover {
  text-decoration: underline;
}
.auth-msg {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 1rem 0 0;
  min-height: 1.2em;
}
.auth-msg.err {
  color: var(--danger);
}
.auth-msg.ok {
  color: var(--success);
}
.auth-foot {
  margin-top: 1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.78rem;
  color: var(--faint);
  line-height: 1.55;
}
.auth-foot a {
  color: var(--muted);
  text-decoration: underline;
}
.auth-foot a:hover {
  color: var(--text);
}

/* ---------- signup: the "check your inbox" step ---------- */
.auth-step[hidden] {
  display: none;
}
.auth-note {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 1.25rem;
  text-wrap: pretty;
}
.auth-note strong {
  color: var(--text);
  word-break: break-word;
}

/* ---------- account page ---------- */
.acct-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--hairline);
}
.acct-row:first-of-type {
  border-top: 0;
}
.acct-label {
  color: var(--muted);
  font-size: 0.8rem;
  min-width: 84px;
}
.acct-value {
  color: var(--text);
  font-weight: 600;
  word-break: break-all;
}
.acct-actions {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ---------- desktop OAuth callback ----------
   Not a destination anyone browses to: the desktop app opens it at the end of
   the Google round-trip and it hands back to conva://. Themed like everything
   else, just without the site nav. */
.auth-terminal {
  text-align: center;
  max-width: 420px;
}
.auth-terminal .mark {
  width: 64px;
  height: 64px;
  color: var(--text);
  margin: 0 auto 1.75rem;
}
.auth-terminal h1 {
  font-size: 1.4rem;
  margin: 0 0 0.6rem;
}
.auth-terminal p {
  color: var(--muted);
  line-height: 1.6;
}
/* scripts/callback.js tags the body copy `.error` when the provider sent one
   back; `.err` matches the class the other auth pages use. */
.auth-terminal p.err,
.auth-terminal p.error {
  color: var(--danger);
}

/* ---------- account: where you can use Conva ----------
   Two honest surfaces instead of the old "Open the app" button, which pointed
   at a page that framed itself and rendered a silent black screen. These live
   here, not in site.css: the account page loads tokens + main + auth only. */
.acct-surfaces { display: grid; gap: 12px; margin: 1.4rem 0 1.1rem; }
.acct-surface {
  padding: 1rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  background: var(--panel-2);
}
.acct-state {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.acct-state.now { color: var(--cyan); }
.acct-state.soon { color: var(--gold); }
.acct-surface b { display: block; margin-bottom: 0.35rem; font-size: 0.98rem; font-weight: 600; }
.acct-surface p { margin: 0 0 0.9rem; color: var(--muted); font-size: 0.82rem; line-height: 1.55; }
.btn-block { display: flex; width: 100%; justify-content: center; }