/* Auth pages — sign in / sign up / reset.
   White premium centered layout. Pure white canvas, hairline borders,
   restrained teal accent, near-black charcoal primary button.
   Consumes canonical tokens from /css/tokens.css.

   Functional class names + element ids unchanged — auth-page.js depends
   on them (auth-email, auth-password, pw-meter, oauth-google-btn, etc.).

   Dark mode inherited from tokens.css globally — auth pages honor the
   user's data-theme preference (consistent with app shell). */

* { box-sizing: border-box; }

/* Pre-render cloak — auth-preload.js controls [data-auth-cloak]. */
html[data-auth-cloak] body { visibility: hidden; }

html, body {
  margin: 0; padding: 0; min-height: 100%;
  font-family: var(--font-body);
  background: var(--bg-canvas);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

/* These pages are ordinary scrolling documents. style.css now scopes its
   full-viewport scroll lock to `html.app-shell` (the SPA only), so there is
   nothing left to undo — but the reset stays as belt-and-braces, and it must
   cover `html` as well as `body`. Covering only `body` was the original bug:
   `overflow:hidden` on the ROOT propagates to the viewport and disables user
   scrolling, so a form taller than the viewport became unreachable.
   Guarded by tests/auth-page-scrollable.test.js. */
html, body {
  height: auto !important;
  overflow: visible !important;
}

body {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* dvh excludes the collapsing mobile URL bar; the vh line is the fallback
     for engines without dvh. */
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px 20px 40px;
}

/* ── Brand mark — top-left absolute, restrained ────────────────────────── */
.auth-brand {
  position: fixed;
  top: 28px; left: 32px;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; color: var(--text-primary); text-decoration: none;
  z-index: 5;
  transition: opacity var(--motion-fast) var(--motion-ease);
}
.auth-brand:hover { opacity: 0.85; }
/* +30% sizing — icon 22→29, text 17→22 — so the mark anchors the empty
   left column on auth pages without competing with the form title. */
.auth-brand-icon { width: 29px; height: 29px; color: var(--accent); display:inline-flex; align-items:center; justify-content:center; }
.auth-brand-text { font-weight: 600; color: var(--text-primary); font-size: 22px; font-family: var(--font-display); }

/* ── Centered column ───────────────────────────────────────────────────── */
.auth-page {
  width: 100%;
  max-width: 400px;
  display: flex; flex-direction: column;
  margin: clamp(60px, 12vh, 120px) auto 0;
}

.auth-card {
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.auth-card h1 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  /* ~20% smaller than the original 32-44 clamp, sized so every existing
     auth title ("Reset your password" being the longest) sits on one line
     inside the card. white-space:nowrap is the belt-and-braces — keeps
     wrapping at bay even under font fallback. */
  font-size: clamp(26px, 3.2vw, 35px);
  font-weight: 600;
  line-height: 1.1;
  text-align: left;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  white-space: nowrap;
}
.auth-sub {
  margin: 0 0 32px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.5;
}

/* ── Inputs ────────────────────────────────────────────────────────────── */
.auth-form-group { margin-bottom: 16px; }
.auth-form-group label {
  display: block; font-size: 13px; font-weight: 600;
  margin-bottom: 8px; color: var(--text-primary);
}
.auth-form-group input {
  width: 100%; padding: 14px 16px;
  font-size: 15px; font-family: inherit;
  color: var(--text-primary); background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  transition: border-color var(--motion-fast) var(--motion-ease),
              box-shadow var(--motion-fast) var(--motion-ease),
              background-color var(--motion-fast) var(--motion-ease);
}
.auth-form-group input::placeholder { color: var(--text-tertiary); }
.auth-form-group input:hover { border-color: var(--border-strong); }
.auth-form-group input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.auth-form-group .auth-help { margin-top: 7px; font-size: 12px; color: var(--text-secondary); }

/* Domain-typo suggestion under the email field. Rendered as a button so it is
   keyboard reachable — accepting the correction is a real action, not decoration. */
.auth-email-hint-btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}
.auth-email-hint-btn:hover { opacity: 0.8; }
.auth-email-hint-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Password show/hide toggle */
.password-wrap { position: relative; }
.password-wrap input { padding-right: 44px !important; }
.password-toggle {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer; color: var(--text-secondary);
  border-radius: var(--radius-sm); padding: 0;
  transition: color var(--motion-fast) var(--motion-ease),
              background-color var(--motion-fast) var(--motion-ease);
}
.password-toggle:hover { color: var(--text-primary); background: var(--bg-hover); }
.password-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.password-toggle svg { width: 18px; height: 18px; }

/* ── Status banners ────────────────────────────────────────────────────── */
.auth-error {
  background: var(--danger-soft); border: 1px solid var(--danger);
  color: var(--danger); padding: 12px 14px; border-radius: 10px;
  font-size: 13px; margin-bottom: 18px; line-height: 1.4;
}
.auth-error.hidden { display: none; }
.auth-info {
  background: var(--success-soft); border: 1px solid var(--success);
  color: var(--text-primary); padding: 12px 14px; border-radius: 10px;
  font-size: 13px; line-height: 1.5; margin-bottom: 18px;
}
.auth-info.hidden { display: none; }
.auth-info strong { color: var(--text-primary); }

/* ── Primary submit — full width, generous height, near-black charcoal ─── */
.auth-submit {
  width: 100%; padding: 14px 18px;
  font-size: 15px; font-weight: 600; font-family: inherit;
  color: var(--text-inverse); background: var(--text-primary);
  border: 1px solid var(--text-primary);
  border-radius: 10px; cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease),
              transform var(--motion-fast) var(--motion-ease),
              opacity var(--motion-fast) var(--motion-ease),
              box-shadow var(--motion-fast) var(--motion-ease);
}
.auth-submit:hover:not(:disabled) {
  background: var(--text-secondary);
  border-color: var(--text-secondary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.auth-submit:active:not(:disabled) { transform: translateY(0); box-shadow: var(--shadow-sm); }
.auth-submit:disabled { opacity: 0.55; cursor: not-allowed; }

.auth-consent-option {
  display:flex; align-items:flex-start; gap:10px; margin:4px 0 18px;
  color:var(--text-secondary); font-size:12.5px; line-height:1.5; cursor:pointer;
}
.auth-consent-option input {
  width:17px; height:17px; margin:1px 0 0; flex:0 0 auto; accent-color:var(--accent);
}

.auth-footer { text-align: left; margin-top: 20px; font-size: 13px; color: var(--text-secondary); }
.auth-footer a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.auth-footer a:hover { color: var(--accent); }

/* ── "or" divider ──────────────────────────────────────────────────────── */
.auth-divider-text, .oauth-divider {
  margin: 22px 0; text-align: center; font-size: 12px;
  color: var(--text-tertiary); position: relative;
  display: flex; align-items: center; gap: 14px;
}
.auth-divider-text::before, .auth-divider-text::after,
.oauth-divider::before, .oauth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

.auth-page-footer {
  margin-top: 28px; font-size: 13px; color: var(--text-secondary);
  text-align: left; width: 100%; max-width: 400px;
}
.auth-page-footer a { color: var(--text-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.auth-page-footer a:hover { color: var(--accent); }

/* ── Password strength meter ───────────────────────────────────────────── */
.pw-meter { margin-top: 10px; }
.pw-meter-bar { height: 4px; width: 100%; background: var(--border); border-radius: var(--radius-pill); overflow: hidden; }
.pw-meter-fill { height: 100%; width: 0%; transition: width 120ms ease, background 120ms ease; }
.pw-meter-feedback { margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--text-secondary); }

/* ── Google OAuth button ───────────────────────────────────────────────── */
.oauth-block { margin-top: 0; }
.oauth-google-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 13px 14px;
  background: var(--bg-surface); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 10px;
  font: 600 14.5px var(--font-body); text-decoration: none; cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease),
              transform var(--motion-fast) var(--motion-ease),
              box-shadow var(--motion-fast) var(--motion-ease);
}
.oauth-google-btn:hover {
  background: var(--bg-elevated); border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.oauth-google-btn:active { transform: translateY(0); }
/* It is the first focusable element in the register card, and every sibling
   control gets an accent ring — the UA default outline here read as a bug. */
.oauth-google-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

/* Short viewports — every common laptop, plus any window the user has not
   maximised. The register page is the tallest of these forms (four fields +
   strength meter + newsletter consent + the Google block ≈ 850px of content),
   and the generous top offset alone was enough to push its submit button past
   the fold. Collapsing the offset makes the page fit outright rather than
   merely being scrollable.
   The 1000px threshold is deliberate, not round: at 950px tall the clamp above
   resolves to 114px, which put content at 963px — overflowing by 13px purely
   because of the offset. Anything at or under 1000px gets the flat 32px.
   Scrolling still works whenever content genuinely does overflow. */
@media (max-height: 1000px) {
  .auth-page { margin-top: 32px; }
}

@media (max-width: 600px) {
  body { padding: 20px 18px 32px; }
  .auth-brand { position: static; margin: 0 auto 28px 0; }
  .auth-page { margin-top: 0; }
  /* Allow wrap on narrow mobile — single-line on a 360px viewport is
     impossible for "Reset your password" at any readable font-size. */
  .auth-card h1 { font-size: 22px; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}