/* public/styles/auth.css — (DR-1022) ONE shared auth theme for login + signup.
 *
 * Two layers, both shared by login.html AND signup.html (no duplicated themes):
 *   1. Page shell: the centered dark .auth-card wrapper, brand mark, headings,
 *      loading line, perks/terms/meta — moved here from the pages' inline CSS.
 *   2. Clerk widget: `.hive-clerk-*` classes. clerk-init.js's shared `appearance`
 *      assigns THESE class names to Clerk elements via the SUPPORTED appearance
 *      API (elements: { socialButtonsBlockButton: "hive-clerk-social", … }).
 *      We never target Clerk's generated `cl-*` classes and never mutate/poll
 *      Clerk DOM. `!important` is used only to win over Clerk's own element
 *      defaults through that sanctioned class hook.
 *
 * Tokens (--bg-*, --line-*, --amber*, --fg-*, --r-*, --s-*) come from tokens.css,
 * loaded before this file on both pages.
 */

/* ── Page shell (shared) ──────────────────────────────────────────────────── */
body.auth-page { min-height: 100vh; display: flex; flex-direction: column; }

.auth-wrap {
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--s-7) var(--s-4);
  position: relative;
  z-index: 2;
}

.auth-card {
  width: 100%;
  /* (DR-1022 follow-up) NO card chrome — /login and /signup are full pages, not
     modals, so the form sits centered directly on the page background for a
     cleaner look. .auth-card is now just a bounded, centered content column.
     position:relative is kept so any Clerk-anchored element stays predictable. */
  max-width: 400px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  position: relative;
}

.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.auth-brand .brand-mark,
.auth-brand .brand-mark svg { width: 42px; height: 42px; }

.auth-card h1 {
  font-size: 25px;
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--fg-0);
  text-align: center;
}
.auth-card .sub {
  text-align: center;
  color: var(--fg-2);
  font-size: 14px;
  margin: 0 0 var(--s-5);
}

/* Clerk mount slot — Clerk paints its widget here; transparent so it sits flush
   inside .auth-card (the widget's own card chrome is flattened in appearance). */
.clerk-mount { width: 100%; display: flex; justify-content: center; margin-top: var(--s-3); }
.clerk-mount > div { width: 100%; }

#clerkLoading {
  text-align: center;
  margin: var(--s-5) 0 0;
  color: var(--fg-3);
  font-size: 13px;
}

/* Signup perks panel + terms line, and the login security/credits meta. */
.perks {
  display: flex; flex-direction: column; gap: 8px;
  padding: var(--s-4);
  background: var(--amber-soft);
  border: 1px solid rgba(255, 179, 0, 0.18);
  border-radius: var(--r-md);
  margin-bottom: var(--s-5);
}
.perks .row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--fg-1); }
.perks .row svg { color: var(--amber); flex-shrink: 0; }

.terms-line {
  text-align: center; font-size: 12px; color: var(--fg-3);
  margin-top: var(--s-5); line-height: 1.5;
}
.terms-line a { color: var(--fg-2); text-decoration: underline; text-decoration-color: var(--line-3); }
.terms-line a:hover { color: var(--amber); }

.auth-meta {
  margin-top: var(--s-5); text-align: center;
  font-size: 12px; color: var(--fg-3); letter-spacing: 0.02em;
}
.auth-meta strong { color: var(--amber); font-weight: 500; }

@media (max-width: 480px) {
  /* The page padding handles mobile edges; the card itself has no chrome/padding. */
  .auth-wrap { padding: var(--s-5) var(--s-4); }
}

/* ── Clerk widget elements (via supported appearance className hooks) ───────── */

/* Clerk's per-screen header (e.g. "Check your email" on the OTP step). Kept
   visible so later screens have context, but subordinate to our .auth-card h1. */
.hive-clerk-title { font-size: 15px !important; color: var(--fg-1) !important; font-weight: 600 !important; }
.hive-clerk-subtitle { color: var(--fg-3) !important; font-size: 13px !important; }

/* Continue with Google — a clear, major auth option (not a flat field). Keeps
   Clerk's Google icon; we only style the surrounding block button. */
.hive-clerk-social {
  background: var(--bg-3) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--r-md) !important;
  min-height: 46px !important;
  color: var(--fg-0) !important;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
}
.hive-clerk-social:hover { background: var(--bg-4) !important; border-color: var(--line-3) !important; }
.hive-clerk-social:focus-visible { outline: none !important; border-color: var(--amber) !important; box-shadow: 0 0 0 4px var(--amber-soft) !important; }
.hive-clerk-social:active { background: var(--bg-2) !important; }
.hive-clerk-social-text { font-weight: 600 !important; color: var(--fg-0) !important; }
/* (DR-1022 follow-up) Breathing room around the social block + between rows. */
.hive-clerk-socials { margin-bottom: var(--s-2) !important; }

/* Divider between social + email auth — generous vertical room either side. */
.hive-clerk-divider-row { margin: var(--s-4) 0 !important; }
.hive-clerk-divider-line { background: var(--line-2) !important; }
.hive-clerk-divider-text { color: var(--fg-3) !important; font-size: 12px !important; letter-spacing: 0.04em !important; }

/* Email form: consistent vertical rhythm between label/input/button rows. */
.hive-clerk-form { display: flex !important; flex-direction: column !important; gap: var(--s-4) !important; }

/* Field labels + inputs. */
.hive-clerk-label { color: var(--fg-1) !important; font-size: 13px !important; font-weight: 500 !important; }
.hive-clerk-input {
  background: var(--bg-1) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--r-md) !important;
  color: var(--fg-0) !important;
  min-height: 44px !important;
  font-size: 14px !important;
  transition: border-color 160ms ease, box-shadow 160ms ease !important;
}
.hive-clerk-input::placeholder { color: var(--fg-4) !important; }
.hive-clerk-input:focus, .hive-clerk-input:focus-visible {
  outline: none !important; border-color: var(--amber) !important; box-shadow: 0 0 0 4px var(--amber-soft) !important;
}
/* Autofill: keep the dark field + light text (no white flash). */
.hive-clerk-input:-webkit-autofill,
.hive-clerk-input:-webkit-autofill:hover,
.hive-clerk-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fg-0) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg-1) inset !important;
  caret-color: var(--fg-0) !important;
}
.hive-clerk-show-pass { color: var(--fg-3) !important; }
.hive-clerk-show-pass:hover { color: var(--fg-1) !important; }

/* Primary action (Continue / Sign in / Sign up). Restrained amber, dark text. */
.hive-clerk-primary {
  background: linear-gradient(180deg, var(--amber-bright), var(--amber-deep)) !important;
  color: #1a1102 !important;
  border: 0 !important;
  border-radius: var(--r-md) !important;
  min-height: 44px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
  transition: filter 160ms ease, box-shadow 160ms ease !important;
}
.hive-clerk-primary:hover { filter: brightness(1.05) !important; }
.hive-clerk-primary:focus-visible { outline: none !important; box-shadow: 0 0 0 4px var(--amber-soft) !important; }
.hive-clerk-primary:disabled { opacity: 0.6 !important; cursor: not-allowed !important; }

/* Links: forgot password, footer "Sign up"/"Sign in", resend code. */
.hive-clerk-link { color: var(--amber) !important; font-weight: 500 !important; }
.hive-clerk-link:hover { color: var(--amber-bright) !important; }
.hive-clerk-footer-text { color: var(--fg-3) !important; }

/* Verification (OTP) cells inherit the dark field treatment. */
.hive-clerk-otp {
  background: var(--bg-1) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--fg-0) !important;
  border-radius: var(--r-md) !important;
}
.hive-clerk-otp:focus, .hive-clerk-otp:focus-visible {
  outline: none !important; border-color: var(--amber) !important; box-shadow: 0 0 0 3px var(--amber-soft) !important;
}

/* Identity preview ("you@email.com" chip on later steps). */
.hive-clerk-identity { background: var(--bg-3) !important; border: 1px solid var(--line-2) !important; color: var(--fg-1) !important; }

/* Errors / alerts — readable, no layout-shifting glow. */
.hive-clerk-error { color: #ff8d8d !important; font-size: 13px !important; }

/* (DR-1022 follow-up) Reposition Clerk's "Secured by Clerk" branding badge.
   Clerk renders it as a rotated, absolutely-positioned VERTICAL tab tinted with
   colorPrimary, anchored to the card's left edge — where it overlaps the Google
   button and reads as out of place. The badge is the trailing branding element
   (the LAST Clerk node in the card), so we un-rotate it and let it flow as a
   clean, centered horizontal badge below the form. Branding is preserved (not
   hidden — required on free Clerk plans; removable via the dashboard on paid).
   Targeted structurally (last cl-internal child) rather than by Clerk's unstable
   hashed class, and scoped under our own .auth-card; if a future Clerk SDK
   reorders the card, the badge simply falls back to Clerk's default placement —
   no layout breakage. */
.auth-card .cl-card > [class*="cl-internal"]:last-child {
  position: static !important;
  transform: none !important;
  inset: auto !important;
  margin: var(--s-3) auto 0 !important;
  display: flex !important;
  justify-content: center !important;
}

@media (prefers-reduced-motion: reduce) {
  .hive-clerk-social,
  .hive-clerk-input,
  .hive-clerk-primary,
  .hive-clerk-chevron { transition: none !important; }
}