/* css/auth.css
   Login / signup page styling. Builds on shared.css tokens.
   Rewritten in full — every rule below is intentional, not inherited
   cruft from an earlier pass.
*/

/* ══════════════════════════════════════════════════════════════
   Page shell
   ══════════════════════════════════════════════════════════════ */
.auth-page {
  background: var(--bg-base);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  /* Safe-area padding so the title never sits under the status bar /
     notch on iOS. Requires viewport-fit=cover on the page's <meta
     viewport> tag — both auth pages set that. */
  padding-top: max(var(--space-6), calc(env(safe-area-inset-top) + var(--space-5)));
  padding-bottom: max(var(--space-5), calc(env(safe-area-inset-bottom) + var(--space-4)));
}

.auth-shell {
  width: 100%;
  max-width: 320px;
  animation: fadeInUp var(--duration-slow) var(--ease);
}

.auth-logo {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-6);
}
.auth-logo img {
  height: 20px;
  width: auto;
  border-radius: 4px;
}

.auth-header {
  text-align: center;
  margin-bottom: var(--space-5);
}
.auth-title {
  font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text-1);
  margin-bottom: var(--space-2);
}
.auth-subtitle {
  color: var(--text-3);
  font-size: var(--text-xs);
}

.auth-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  box-shadow: var(--shadow-sm);
}

/* ══════════════════════════════════════════════════════════════
   Buttons
   ══════════════════════════════════════════════════════════════ */
.auth-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: background var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              opacity var(--duration-fast) var(--ease);
}
.auth-btn:active {
  transform: scale(0.98);
}

.auth-btn--google {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-2);
  min-height: 38px;
  font-weight: 500;
  gap: 10px;
}
.auth-btn--google:hover {
  background: var(--bg-subtle);
  color: var(--text-1);
}
.auth-btn--google svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.auth-btn--google:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  background: transparent;
}

.google-btn-content {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.google-loader {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 16px;
}
.google-loader span {
  width: 3px;
  height: 100%;
  border-radius: 1px;
  background: currentColor;
  color: var(--text-3);
  animation: google-loader-bounce 900ms ease-in-out infinite;
}
.google-loader span:nth-child(1) { animation-delay: 0ms; }
.google-loader span:nth-child(2) { animation-delay: 120ms; }
.google-loader span:nth-child(3) { animation-delay: 240ms; }
.google-loader span:nth-child(4) { animation-delay: 360ms; }
@keyframes google-loader-bounce {
  0%, 100% { transform: scaleY(0.3); }
  50% { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .google-loader span {
    animation: none;
    transform: scaleY(0.7);
  }
}

.auth-btn--primary {
  background: var(--text-1);
  color: var(--bg-base);
  padding: 10px var(--space-3);
}
.auth-btn--primary:hover {
  opacity: 0.85;
}
.auth-btn--primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  color: var(--text-4);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ══════════════════════════════════════════════════════════════
   Form fields
   ══════════════════════════════════════════════════════════════ */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-3);
}
.auth-field-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

/* Every text input in the form — including the one nested inside
   .auth-password-wrap — gets an explicit width. This matters: a
   flex container with align-items:stretch (the default, which
   .auth-field uses) only stretches its DIRECT children. The email
   and name inputs are direct children of .auth-field, so they
   stretch for free. The password input is not — it's nested one
   level deeper inside .auth-password-wrap — so without this rule it
   falls back to the browser's intrinsic input width (~150-190px)
   while its wrapper div still stretches to the full card width,
   leaving a visible gap before the toggle button. Setting width
   explicitly here removes any dependency on which element happens
   to be a flex child. */
.auth-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  background: var(--bg-base);
  color: var(--text-1);
  transition: border-color var(--duration-fast) var(--ease);
}
.auth-field input:focus {
  outline: none;
  border-color: var(--text-1);
}
.auth-field input.is-invalid {
  border-color: var(--danger);
}

/* ── Password field with a show/hide toggle, inside the input's own
     box. The wrapper is position:relative purely to anchor the
     absolutely-positioned toggle button — it carries no width logic
     of its own; the input's own width:100% (above) is what actually
     sizes the field. ── */
.auth-password-wrap {
  position: relative;
}
.auth-password-wrap input {
  padding-right: 40px;
}
.auth-password-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-4);
  transition: color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.auth-password-toggle:hover {
  color: var(--text-2);
  background: var(--bg-subtle);
}
.auth-password-toggle svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
/* Only one of the two icon <svg>s inside the toggle button is shown
   at a time — toggled via the [data-state] attribute the script
   sets, rather than swapping an external icon font's class name. No
   external icon CDN is loaded at all on this page anymore, so the
   toggle can never render "nothing" while still functioning. */
.auth-password-toggle .icon-eye-off { display: none; }
.auth-password-toggle[data-state="visible"] .icon-eye { display: none; }
.auth-password-toggle[data-state="visible"] .icon-eye-off { display: flex; }

.auth-hint {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-4);
}
.auth-link-btn {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent);
  padding: 0;
}
.auth-link-btn:hover {
  text-decoration: underline;
}
.auth-form .auth-btn--primary {
  margin-top: var(--space-2);
}

/* ══════════════════════════════════════════════════════════════
   Password strength meter — compact wrapped chips (not a tall
   single-column list). Each requirement's met/unmet state is
   carried by an icon *and* color together, not color alone
   (WCAG 1.4.1). The bar keeps its color coding but also has a text
   label next to it for the same reason.
   ══════════════════════════════════════════════════════════════ */
.strength-meter {
  margin-top: var(--space-2);
}
.strength-meter-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.strength-track {
  flex: 1;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  overflow: hidden;
}
.strength-fill {
  height: 100%;
  width: 0%;
  border-radius: var(--radius-full);
  background: var(--danger);
  transition: width var(--duration-base) var(--ease), background var(--duration-base) var(--ease);
}
.strength-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-4);
  min-width: 32px;
  text-align: right;
  transition: color var(--duration-fast) var(--ease);
}
.strength-label[data-level="fair"] { color: var(--warning); }
.strength-label[data-level="strong"] { color: var(--success); }

.strength-checklist {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.strength-checklist li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 6px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-4);
  transition: color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.strength-checklist li::before {
  content: '';
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  box-sizing: border-box;
  transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.strength-checklist li.is-optional {
  border-style: dashed;
}
.strength-checklist li.met {
  color: var(--text-1);
  border-color: var(--success);
}
.strength-checklist li.is-optional.met {
  border-style: solid;
}
.strength-checklist li.met::before {
  content: '✓';
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  line-height: 1;
  color: #fff;
  background: var(--success);
  border-color: var(--success);
}

/* ══════════════════════════════════════════════════════════════
   Errors, footer links
   ══════════════════════════════════════════════════════════════ */
.field-error {
  margin-top: var(--space-1);
  font-size: 0.75rem;
  color: var(--danger);
  line-height: 1.4;
  animation: fadeIn var(--duration-base) var(--ease);
}
.field-error:empty { display: none; }
.auth-btn-error {
  margin-top: var(--space-2);
  font-size: 0.75rem;
  color: var(--danger);
  line-height: 1.4;
  text-align: center;
  animation: fadeIn var(--duration-base) var(--ease);
}
.auth-btn-error:empty { display: none; }

.auth-switch {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-3);
}
.auth-switch a {
  color: var(--accent);
  font-weight: 600;
}
.auth-switch a:hover {
  text-decoration: underline;
}
.auth-legal {
  margin-top: var(--space-5);
  text-align: center;
  font-size: 0.7rem;
  color: var(--text-4);
  line-height: 1.6;
}
.auth-legal a {
  color: var(--text-3);
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════
   Verify-email page
   ══════════════════════════════════════════════════════════════ */
.verify-icon-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.verify-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--accent-subtle);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-base) var(--ease), color var(--duration-base) var(--ease);
}
.verify-icon svg {
  width: 24px;
  height: 24px;
}
/* Swaps to a success treatment the instant verification is detected. */
.verify-icon[data-state="success"] {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success);
}
.verify-icon[data-state="success"] .verify-icon-pending { display: none; }
.verify-icon[data-state="success"] .verify-icon-success { display: flex; }
.verify-icon-success { display: none; }

.verify-email-value {
  font-weight: 700;
  color: var(--text-1);
  word-break: break-word;
}

.verify-card-body {
  text-align: center;
  color: var(--text-3);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

/* Live "waiting for you to click the link" status row. The dot pulses so
   the page never looks stalled while it's silently polling in the
   background — there's genuinely nothing else it can do until the person
   acts, so it needs to visibly communicate "still working" rather than
   sitting static. */
.verify-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-3);
  margin-bottom: var(--space-4);
}
.verify-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-2);
  flex-shrink: 0;
  animation: verify-pulse 1.6s var(--ease) infinite;
}
.verify-status[data-state="success"] {
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
}
.verify-status[data-state="success"] .verify-status-dot {
  background: var(--success);
  animation: none;
}
@keyframes verify-pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-2) 45%, transparent); }
  50% { opacity: 0.6; transform: scale(0.85); box-shadow: 0 0 0 4px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .verify-status-dot { animation: none; }
}

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

.verify-resend-btn {
  position: relative;
}
.verify-resend-btn .btn-countdown {
  font-variant-numeric: tabular-nums;
}

.verify-resend-status {
  min-height: 1.4em;
  font-size: 0.75rem;
  text-align: center;
  color: var(--text-3);
  animation: fadeIn var(--duration-base) var(--ease);
}
.verify-resend-status[data-tone="success"] { color: var(--success); }
.verify-resend-status[data-tone="error"] { color: var(--danger); }
.verify-resend-status:empty { display: none; }

.verify-secondary-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  font-size: 0.75rem;
  color: var(--text-4);
}
.verify-secondary-actions button {
  color: var(--text-3);
  font-weight: 600;
  font-size: 0.75rem;
}
.verify-secondary-actions button:hover {
  color: var(--text-1);
  text-decoration: underline;
}
.verify-secondary-sep {
  color: var(--border-strong);
}

.verify-hint {
  margin-top: var(--space-5);
  text-align: center;
  font-size: 0.7rem;
  color: var(--text-4);
  line-height: 1.6;
}

/* Shown while we're still deciding whether this person even needs the
   verify-email page (checking auth state, reloading their profile to
   rule out a stale "unverified" snapshot). Nothing about the card
   underneath — including its "Waiting for verification" copy — paints
   until that decision is made, so someone who turns out not to need
   this page (a Google account, an already-verified account) never sees
   it flash before being sent onward. */
.auth-checking-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
}
.auth-checking-spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  border-top-color: var(--text-2);
  animation: spin 700ms linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .auth-checking-spinner { animation-duration: 1400ms; }
}