/* V2 Auth Pages — sign-in, password reset, verification, legal documents
 *
 * Loaded ONLY by templates/v2/base_auth.html (the anonymous pages). Everything
 * here references tokens.css — never hard-code a value, and never set a light
 * background: these pages render in light, dark and (post-auth) branded themes.
 *
 * Buttons, inputs and labels come from components.css (.btn / .btn-primary /
 * .btn-secondary / .btn-text / .form-input / .form-label / .form-help). This
 * file adds only what auth needs and the design system didn't already have:
 * the centred page column, the card, and an inline alert.
 */

/* ============================================
 * BOX MODEL
 * Nothing in the v2 chain applies a universal border-box reset — v2/base.html
 * loads theme.css and thrive.css, neither of which has one, and
 * modern-normalize.css is never loaded. So width + padding overflows unless the
 * element opts in. <button> gets border-box from the UA stylesheet but
 * <a class="btn"> does not, which is why the Google button overflowed the card
 * by exactly its own horizontal padding. Scoped to these pages so the rest of
 * the app keeps whatever box model it was built against.
 * ============================================ */

.auth-page,
.auth-page *,
.auth-page *::before,
.auth-page *::after {
  box-sizing: border-box;
}

/* ============================================
 * PAGE LAYOUT
 * ============================================ */

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-12) var(--page-margin);
  background: var(--color-bg-body);
}

.auth-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
  max-width: 420px;
}

/* Legal documents need reading width, not form width */
.auth-col--wide { max-width: 800px; }

.auth-logo {
  display: block;
  width: 168px;
  height: auto;
}

/* ============================================
 * CARD
 * ============================================ */

.auth-card {
  width: 100%;
  box-sizing: border-box;
  background: var(--color-bg-surface);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-panel);
  padding: var(--space-8) var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.auth-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.auth-head h1 {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

.auth-head p {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}

/* ============================================
 * INLINE ALERT
 * Flash messages and inline states. NOT to be confused with .alert-box in
 * components.css, which is the topbar bell button.
 * ============================================ */

.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-base);
  line-height: var(--line-height-snug);
}

.auth-alert i { margin-top: 2px; flex: 0 0 auto; }

.auth-alert--info    { background: var(--color-info-bg);    color: var(--color-info-text); }
.auth-alert--success { background: var(--color-success-bg); color: var(--color-success-text); }
.auth-alert--warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.auth-alert--error   { background: var(--color-error-bg);   color: var(--color-error-text); }

/* Dark mode only redefines the *-bg tokens, so the text colors above stay at
 * their light-mode values and go under-contrast. Lift them here. */
[data-theme="dark"] .auth-alert--info    { color: #90caf9; }
[data-theme="dark"] .auth-alert--success { color: #81c784; }
[data-theme="dark"] .auth-alert--warning { color: #ffb74d; }
[data-theme="dark"] .auth-alert--error   { color: #ef9a9a; }

/* ============================================
 * FORM
 * ============================================ */

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* .form-label carries its own margin-bottom; inside a gap-based column that
 * would double the spacing. */
.auth-field .form-label { margin-bottom: 0; }
.auth-field .form-help { margin-top: 0; }

/* Field-level error state */
.auth-field .form-input.has-error { border-color: var(--color-error); }
.auth-field .form-error {
  font-size: var(--font-size-sm);
  color: var(--color-error-text);
}
[data-theme="dark"] .auth-field .form-error { color: #ef9a9a; }

/* Password reveal */
.auth-pw {
  position: relative;
  display: flex;
}

.auth-pw .form-input { padding-right: var(--space-16); }

.auth-reveal {
  position: absolute;
  right: var(--space-1);
  top: 50%;
  transform: translateY(-50%);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border: none;
  border-radius: var(--border-radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color var(--transition-base);
}

.auth-reveal:hover { color: var(--color-primary); }

/* Keyboard focus has to stay visible on every interactive element here — the
 * reveal button, the checkbox and the text links are all reachable by tab. */
.auth-reveal:focus-visible,
.auth-check input[type="checkbox"]:focus-visible,
a.btn-text:focus-visible,
.auth-legal a:focus-visible {
  outline: var(--border-width-thick) solid var(--color-primary);
  outline-offset: 2px;
}

/* Checkbox + link row */
.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.auth-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.auth-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--border-radius-sm);
  background: transparent;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.auth-check input[type="checkbox"]::after {
  content: "";
  width: 8px;
  height: 4px;
  border-left: var(--border-width-thick) solid var(--color-text-inverse);
  border-bottom: var(--border-width-thick) solid var(--color-text-inverse);
  transform: rotate(-45deg) translateY(-1px);
  opacity: 0;
}

.auth-check input[type="checkbox"]:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.auth-check input[type="checkbox"]:checked::after { opacity: 1; }

/* Dark/branded modes invert --color-text-inverse to a dark value, which would
 * make the tick invisible on the orange fill. */
[data-theme="dark"] .auth-check input[type="checkbox"]::after,
[data-theme="branded"] .auth-check input[type="checkbox"]::after {
  border-left-color: #ffffff;
  border-bottom-color: #ffffff;
}

/* Block buttons.
 * components.css sets .btn { width: auto } and loads AFTER utilities.css, so a
 * bare .w-full loses the cascade — inside .auth-form they happen to stretch as
 * flex children, but a button in its own <form> (the Resend action) would not.
 *
 * The shared .btn is sized for dense toolbars (12px text, 8px vertical padding),
 * which reads undersized as the primary action beneath 16px inputs. These match
 * the input scale instead. */
.auth-card .btn.w-full {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-base);
}

/* .btn-text is a <button> style; as an <a> it needs the link bits neutralised */
a.btn-text {
  display: inline-block;
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  text-decoration: none;
}

a.btn-text:hover { color: var(--color-primary); opacity: 1; }

/* ============================================
 * DIVIDER / SSO
 * ============================================ */

.auth-or {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1;
  border-top: var(--border-width-default) solid var(--color-border);
}

/* Google mark inherits the button's current color */
.auth-sso-icon { width: 16px; height: 16px; flex: 0 0 auto; }

/* ============================================
 * FOOTER LINKS
 * ============================================ */

.auth-legal {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
}

.auth-legal a {
  color: inherit;
  text-decoration: none;
}

.auth-legal a:hover { color: var(--color-primary); }

/* ============================================
 * LEGAL DOCUMENTS (privacy, terms)
 * ============================================ */

.auth-doc {
  text-align: left;
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
}

.auth-doc h1 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  text-align: center;
}

.auth-doc .auth-doc-updated {
  margin: 0 0 var(--space-8);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.auth-doc h4 {
  margin: var(--space-6) 0 var(--space-2);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.auth-doc p,
.auth-doc li { font-size: var(--font-size-base); }
.auth-doc p { margin: 0 0 var(--space-3); }
.auth-doc ul { margin: 0 0 var(--space-3); padding-left: var(--space-6); }
.auth-doc a { color: var(--color-primary); }

/* ============================================
 * RESPONSIVE
 * ============================================ */

@media (max-width: 479px) {
  .auth-page { padding: var(--space-8) var(--page-margin); }
  .auth-card { padding: var(--space-6) var(--space-5); }
  .auth-logo { width: 140px; }
}