/* ============================================================================
   Auth pages (Login / Register / Forgot Password)
   ----------------------------------------------------------------------------
   Reads from cf-tokens.css. NO hex literals here. Light/dark are one contract.
   See Docs/STYLING.md.
   ============================================================================ */

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

html,
body {
  margin: 0;
  min-height: 100%;
}

body.cf-auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cf-space-5);
  font-family: var(--cf-font-ui);
  color: var(--cf-ink);
  background:
    radial-gradient(120% 80% at 0% 0%, var(--cf-accent-soft), transparent 55%),
    radial-gradient(120% 80% at 100% 100%, var(--cf-secondary-soft), transparent 55%),
    var(--cf-bg);
}

.cf-auth-card {
  width: min(100%, 440px);
  padding: var(--cf-space-6) var(--cf-space-5);
  border: 1px solid var(--cf-rule);
  border-radius: var(--cf-radius-card);
  background: var(--cf-surface);
  box-shadow: var(--cf-shadow-pop);
  position: relative;
}

/* The signature ember rule under the card top edge — quietly distinctive */
.cf-auth-card::before {
  content: "";
  position: absolute;
  left: var(--cf-space-5);
  right: var(--cf-space-5);
  top: 0;
  height: 2px;
  background: var(--cf-accent);
  border-radius: 2px;
}

.cf-auth-card--wide {
  width: min(100%, 480px);
}

.cf-auth-header {
  text-align: left;
  margin-bottom: var(--cf-space-5);
}

.cf-auth-title {
  margin: 0;
  font-family: var(--cf-font-display);
  font-size: var(--cf-fs-xl);
  font-weight: var(--cf-fw-semibold);
  color: var(--cf-ink);
  letter-spacing: -0.01em;
}

.cf-auth-subtitle {
  margin: var(--cf-space-2) 0 0;
  color: var(--cf-ink-muted);
  font-size: var(--cf-fs-sm);
  line-height: var(--cf-lh-snug);
}

.cf-auth-alert {
  margin-bottom: var(--cf-space-4);
  padding: var(--cf-space-3) var(--cf-space-4);
  border-radius: var(--cf-radius-md);
  border: 1px solid transparent;
  font-size: var(--cf-fs-sm);
  line-height: var(--cf-lh-snug);
}

.cf-auth-alert--error {
  background: var(--cf-danger-soft);
  border-color: var(--cf-danger);
  color: var(--cf-danger);
}

.cf-auth-alert--info {
  background: var(--cf-info-soft);
  border-color: var(--cf-info);
  color: var(--cf-info);
}

.cf-auth-alert--warning {
  background: var(--cf-warning-soft);
  border-color: var(--cf-warning);
  color: var(--cf-warning);
}

.cf-auth-field {
  margin-bottom: var(--cf-space-4);
}

.cf-auth-field-row {
  display: flex;
  gap: var(--cf-space-3);
}

.cf-auth-field-row .cf-auth-field {
  flex: 1;
}

.cf-auth-label {
  display: block;
  margin-bottom: var(--cf-space-1);
  font-size: var(--cf-fs-sm);
  font-weight: var(--cf-fw-semibold);
  color: var(--cf-ink-muted);
  letter-spacing: 0.02em;
}

.cf-auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.cf-auth-input-wrap .cf-auth-input {
  padding-right: calc(var(--cf-space-3) * 3);
}

.cf-auth-eye {
  position: absolute;
  right: var(--cf-space-3);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--cf-ink-muted);
  display: flex;
  align-items: center;
  line-height: 1;
}

.cf-auth-eye:hover { color: var(--cf-ink); }

.cf-auth-input {
  width: 100%;
  padding: var(--cf-space-3) var(--cf-space-3);
  border: 1px solid var(--cf-rule-strong);
  border-radius: var(--cf-radius-md);
  font: inherit;
  color: var(--cf-ink);
  background: var(--cf-surface-sunken);
  transition: border-color var(--cf-motion-quick), box-shadow var(--cf-motion-quick), background var(--cf-motion-quick);
}

.cf-auth-input:focus {
  outline: none;
  border-color: var(--cf-accent);
  box-shadow: var(--cf-focus-ring);
  background: var(--cf-surface);
}

.cf-auth-input[readonly] {
  background: var(--cf-surface-sunken);
  color: var(--cf-ink-faint);
}

.cf-auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cf-space-2);
  width: 100%;
  padding: var(--cf-space-3) var(--cf-space-4);
  border: 1px solid transparent;
  border-radius: var(--cf-radius-md);
  font: inherit;
  font-size: var(--cf-fs-base);
  font-weight: var(--cf-fw-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--cf-motion-quick), background var(--cf-motion-quick), border-color var(--cf-motion-quick);
}

.cf-auth-btn:hover {
  transform: translateY(-1px);
}

.cf-auth-btn--primary {
  color: var(--cf-on-accent);
  background: var(--cf-accent);
}

.cf-auth-btn--primary:hover {
  background: var(--cf-accent-hover);
}

.cf-auth-btn--primary:active {
  background: var(--cf-accent-active);
  transform: translateY(0);
}

.cf-auth-btn--secondary {
  color: var(--cf-ink);
  background: var(--cf-surface-sunken);
  border-color: var(--cf-rule-strong);
}

.cf-auth-btn--secondary:hover {
  background: var(--cf-surface);
}

/* Mirrors cf-btn--ghost from cf-components.css for use inside auth-page alerts. */
.cf-auth-btn--ghost {
  color: var(--cf-ink);
  background: transparent;
  border-color: var(--cf-rule-strong);
}

.cf-auth-btn--ghost:hover {
  background: var(--cf-surface-sunken);
  border-color: var(--cf-accent);
  color: var(--cf-accent);
}

.cf-auth-btn--microsoft {
  color: var(--cf-ink);
  background: var(--cf-surface);
  border-color: var(--cf-rule-strong);
}

.cf-auth-btn--microsoft:hover {
  background: var(--cf-surface-sunken);
}

.cf-auth-divider {
  display: flex;
  align-items: center;
  margin: var(--cf-space-5) 0;
  color: var(--cf-ink-faint);
  font-size: var(--cf-fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cf-auth-divider::before,
.cf-auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--cf-rule);
}

.cf-auth-divider span {
  padding: 0 var(--cf-space-3);
}

.cf-auth-footer {
  margin-top: var(--cf-space-5);
  text-align: center;
  font-size: var(--cf-fs-sm);
  color: var(--cf-ink-muted);
}

.cf-auth-footer a {
  color: var(--cf-accent);
  text-decoration: none;
  font-weight: var(--cf-fw-semibold);
}

.cf-auth-footer a:hover {
  text-decoration: underline;
}

.cf-auth-ms-icon {
  margin-right: var(--cf-space-2);
}

@media (max-width: 540px) {
  body.cf-auth-page {
    padding: var(--cf-space-4);
  }

  .cf-auth-card {
    padding: var(--cf-space-5) var(--cf-space-4);
  }

  .cf-auth-field-row {
    flex-direction: column;
    gap: 0;
  }
}

/* Inline action area inside an auth alert (e.g., 'Sign in instead' on duplicate email) */
.cf-auth-alert__actions {
  display: flex;
  gap: var(--cf-space-2);
  margin-top: var(--cf-space-3);
}
.cf-auth-alert__actions .cf-auth-btn { width: auto; padding: var(--cf-space-2) var(--cf-space-3); }