/* ==========================================================================
   Draco Staff Development — v8 Auth & Contact
   Centered branded card sitting between the standard header and footer.
   ========================================================================== */

.auth-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1.25rem, 3vw, 2.5rem) var(--space-4);
}
.auth-card {
  width: 100%;
  max-width: 460px;
  /* Tinted form surface so the white input wells pop (global form standard).
     The shadow-lg + border keep the card distinct from the page background. */
  background: var(--form-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.auth-card--wide { max-width: 620px; }
/* Compact vertical rhythm so auth forms fit without scrolling */
.auth-card .field { margin-bottom: var(--space-4); }
.auth-card .or-divider { margin: var(--space-4) 0; }

.auth-card__head { text-align: center; margin-bottom: var(--space-5); }
.auth-card__head .brand { justify-content: center; margin-bottom: var(--space-4); }
.auth-card__head h1 { font-size: var(--fs-2xl); }
.auth-card__head p { color: var(--text-2); margin-top: var(--space-1); font-size: var(--fs-base); }

.auth-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap;
}
.auth-row .link { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }

.auth-foot { text-align: center; margin-top: var(--space-4); font-size: var(--fs-sm); color: var(--text-2); }

/* Social / alternative sign-in */
.social-btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.social-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 0.7rem 0.9rem; min-height: 46px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background-image: linear-gradient(180deg, var(--surface), var(--surface-2));
  color: var(--text);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  transition: box-shadow var(--transition), border-color var(--transition), color var(--transition);
}
.social-btn::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background-image: linear-gradient(180deg, var(--surface-2), var(--surface-3));
  opacity: 0; transition: opacity var(--transition); z-index: -1;
}
.social-btn:hover::before { opacity: 1; }
.social-btn:hover { color: var(--text); box-shadow: var(--shadow-sm); }
.social-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.social-btn .icon { width: 20px; height: 20px; }
.social-btn .brand-logo { height: 18px; width: auto; display: block; flex: none; }
.social-btn--full { grid-column: 1 / -1; }

/* --- Authentic Apple button: solid black w/ white mark (inverts in dark) --- */
.social-btn--apple {
  background: #000; background-image: none;
  border-color: #000; color: #fff;
  box-shadow: var(--shadow-sm);
}
.social-btn--apple::before { display: none; }
.social-btn--apple:hover { background: #1d1d1f; border-color: #1d1d1f; color: #fff; box-shadow: var(--shadow-md); }
.social-btn--apple:focus-visible { box-shadow: var(--shadow-focus); }
.social-btn--apple .brand-logo { height: 19px; margin-top: -2px; } /* optical centering of the Apple mark */
:root[data-theme="dark"] .social-btn--apple { background: #fff; border-color: #fff; color: #000; }
:root[data-theme="dark"] .social-btn--apple:hover { background: #f2f2f2; border-color: #f2f2f2; color: #000; }

/* --- Authentic Google button: white surface, subtle border, full-color G --- */
.social-btn--google {
  background: #fff; background-image: none;
  border-color: #dadce0; color: #3c4043;
  box-shadow: var(--shadow-xs);
}
.social-btn--google::before { display: none; }
.social-btn--google:hover { background: #f7fafe; border-color: #d2e3fc; color: #3c4043; box-shadow: var(--shadow-sm); }
.social-btn--google:focus-visible { box-shadow: var(--shadow-focus); }
:root[data-theme="dark"] .social-btn--google { background: #131314; border-color: #5f6368; color: #e3e3e3; }
:root[data-theme="dark"] .social-btn--google:hover { background: #1e1f20; border-color: #5f6368; color: #e3e3e3; }

/* No-JS / pre-JS mirror: match the OS theme even before the inline theme script
   sets data-theme (same convention as tokens.css / components.css). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .social-btn--apple { background: #fff; border-color: #fff; color: #000; }
  :root:not([data-theme="light"]) .social-btn--apple:hover { background: #f2f2f2; border-color: #f2f2f2; color: #000; }
  :root:not([data-theme="light"]) .social-btn--google { background: #131314; border-color: #5f6368; color: #e3e3e3; }
  :root:not([data-theme="light"]) .social-btn--google:hover { background: #1e1f20; border-color: #5f6368; color: #e3e3e3; }
}

.social-btn--soon { cursor: not-allowed; opacity: 0.8; }
.social-btn--soon:hover::before { opacity: 0.5; }
/* The "SOON" badge on the not-yet-available sign-in buttons.
   Was `background: var(--brand-gold)` (#c7a252) with near-black text — a gold
   FILL, which the design standard forbids as a background hue. Rebuilt in the
   sanctioned shape: neutral surface fill, thin border, normal text colour.
   Both halves are tokens, so it follows the light and dark themes instead of
   staying one fixed gold that only worked against the light palette. */
.social-btn .soon {
  position: absolute; top: -8px; right: 8px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--surface-3); color: var(--text-2);
  border: 1px solid var(--border-strong);
  padding: 1px 6px; border-radius: var(--radius-full);
}

/* Biometric full-width prompt */
.biometric {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; padding: 0.8rem 1rem; margin-top: var(--space-3);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface-2); color: var(--text-2); font-size: var(--fs-sm);
  justify-content: center;
}
.biometric .icon { width: 22px; height: 22px; color: var(--brand-blue); }

/* reCAPTCHA v3 runs invisibly. By product decision both the floating badge and
   the "Protected by reCAPTCHA" disclosure are suppressed for a cleaner form. */
.grecaptcha-badge { visibility: hidden; }

/* Contact form — compact two-column so the whole form fits without scrolling */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-5); }
.contact-grid .field { margin-bottom: 0; }
.contact-grid .field--full { grid-column: 1 / -1; }
.contact-grid .textarea { min-height: 104px; }
@media (max-width: 560px) { .contact-grid { grid-template-columns: 1fr; gap: var(--space-4); } }

/* Contact card runs a little tighter than the auth cards */
.auth-card--contact { padding: clamp(1.5rem, 3vw, 2rem); }
.auth-card--contact .auth-card__head { margin-bottom: var(--space-5); }
.auth-card--contact .auth-card__head .brand { margin-bottom: var(--space-4); }

@media (max-width: 767px) {
  .auth-wrap { padding-top: var(--space-6); }
}