/* ───────────────────────────────────────────────────────────────────────
   clero-register login page — a faithful port of the dashboard's login
   styling (clero.is/login). Sources, ported verbatim:
     - src/App.css  :root + [data-theme="dark"] design tokens
     - src/App.css  .login-page / .login-media / .login-card / .login-header
                    / .login-footer layout + the max-width:768px responsive block
     - src/App.css  shared .ui-btn base (transition, focus ring, active depress)
     - src/Login.css  the .login-card-scoped hardcoded-dark form styling
     - src/components/Input.css   (.ui-input / --lg + focus glow + hover)
     - src/components/Button.css  (.ui-btn--primary / --lg / --rect)
   The frame + inputs + primary CTA follow the tokens; the brand
   header/footer/labels are hardcoded dark (#EDE8DB / #848DA8 — the dark set's
   own --brand-cream / --text-secondary values) as in Login.css — this mix is
   intentional fidelity, not an oversight. Because of it login.clero.is is a
   BRAND surface: index.html and connect.html pin data-theme="dark" on <html>
   before paint, unconditionally, the way the dashboard's Landing.js /
   LegalPage.js force dark while mounted. They no longer mirror useTheme
   (localStorage.theme || prefers-color-scheme): under the light token set the
   cream chrome rendered at 1.11:1 (clero-auth#100). So every var() below
   resolves against [data-theme="dark"] on these two pages — do not add a
   light-theme variant here without re-reading that issue.
   ─────────────────────────────────────────────────────────────────────── */

/* ── Design tokens now come from the shared design system, loaded BEFORE this
   file in index.html: https://assets.staging.clero.is/v1/theme.css (the :root LIGHT set
   + [data-theme="dark"] overrides + the Inter/Geist @font import). This page
   consumes those custom properties (--bg-*, --text-*, --border*, --radius*,
   --btn-*, --focus-ring, --font-ui, --accent-orange, --brand-cream,
   --status-error) — it no longer carries its own drifting copy. The one former
   local token, --text-accent, was unused. ──────────────────────────────────── */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Both pages pin data-theme="dark" on <html>, which only switches THIS
   file's tokens. color-scheme tells the user agent too, so the parts it
   draws itself — scrollbar, caret, text selection, Chrome's autofill fill
   on the email/password inputs — follow the forced set instead of the
   light default they would otherwise keep (clero-auth#100 review). No
   token or declared colour changes, so every measured ratio is unmoved. */
html { color-scheme: dark; }
body {
  font-family: var(--font-ui);
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* ── Layout (App.css:827-918) ───────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--bg-secondary);
  position: relative;
  overflow: hidden;
  color: #EDE8DB;
}

.login-media {
  position: relative;
  overflow: hidden;
  background: #0f1013;
}
.login-media__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  pointer-events: none;
}

.login-card {
  background: transparent;
  border: none;
  border-radius: 0;
  width: 100%;
  max-width: 420px;
  overflow: visible;
  position: relative;
  z-index: 1;
  justify-self: center;
  align-self: center;
  padding: 2rem;
}

.login-header {
  padding: 0 0 28px;
  border-bottom: 1px solid rgba(48, 51, 62, 0.7);
  text-align: left;
  background: transparent;
  color: #EDE8DB;
  margin-bottom: 28px;
}
.login-header__mark {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 20px;
  color: #EDE8DB;
}
.login-header__mark-img {
  display: block;
  height: 130px;
  width: auto;
  margin: -38px 0 -30px -60px;
  user-select: none;
  pointer-events: none;
}
.login-header__title {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #EDE8DB;
  margin: 0 0 8px;
}
.login-header__subtitle {
  font-size: 13px;
  color: #848DA8;
  line-height: 1.5;
  margin: 0;
}

.login-body { padding: 0; }

/* ── Footer: fixed, translucent, blurred (App.css:879-896) ──────────────── */
.login-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  border-top: 1px solid rgba(48, 51, 62, 0.6);
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(21, 22, 25, 0.6);
  backdrop-filter: blur(10px);
}
.login-footer-left { display: flex; align-items: center; gap: 6px; }
.login-footer-right {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  color: #848da8;
}
.login-footer__brand { font-size: 11px; color: #848da8; }
.login-footer__sep { color: #30333e; }

/* ── Inputs (components/Input.css) ──────────────────────────────────────── */
.ui-input {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 6px);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.ui-input--lg { padding: 11px 14px; font-size: 15px; line-height: 1.4; }
.ui-input:hover:not(:disabled):not([readonly]):not(:focus) { border-color: var(--border-md); }
.ui-input:focus {
  border-color: var(--accent-orange);
  box-shadow: 0 0 0 2px rgba(255, 110, 0, 0.2);
}
.ui-input::placeholder { color: var(--text-secondary); opacity: 0.6; }

/* ── Buttons: shared base (App.css:613-639) + Button.css ────────────────── */
.ui-btn {
  font-family: var(--font-ui, inherit);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--btn-transition),
    border-color var(--btn-transition),
    color var(--btn-transition),
    box-shadow var(--btn-transition),
    opacity var(--btn-transition),
    transform 0.08s ease;
  font-weight: 600;
  border: 1px solid transparent;
  line-height: 1;
}
/* A link styled as a button (/connect's "Sign in to Clero") must not carry the
   UA underline — the sign-in page only ever uses <button>, so nothing needed
   this before clero-auth#92. */
a.ui-btn { text-decoration: none; }
.ui-btn:disabled { opacity: var(--btn-disabled-opacity); cursor: not-allowed; }
.ui-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ui-btn:active:not(:disabled) { transform: translateY(1px); }
.ui-btn--rect { border-radius: var(--radius-md); }
.ui-btn--lg { padding: 12px 20px; font-size: 16px; }
.ui-btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border-color: var(--btn-primary-bg);
}
.ui-btn--primary:hover:not(:disabled) {
  background: var(--btn-primary-bg-hover, var(--btn-primary-bg));
  border-color: var(--btn-primary-bg-hover, var(--btn-primary-bg));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/* ── Form scaffolding scoped to .login-card (Login.css:155-261) ─────────── */
.login-card .form-group { margin-bottom: 14px; }
.login-card .form-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: #848DA8;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 6px;
}
.login-card .login-submit { width: 100%; margin-top: 6px; }

.login-card .form-link {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 4px 0;
  background: transparent;
  border: none;
  font-size: 12px;
  color: #848DA8;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: color 0.12s;
  font-family: inherit;
}
.login-card .form-link:hover { color: #EDE8DB; text-decoration: none; }

.login-card .form-error {
  padding: 10px 12px;
  background: rgba(234, 47, 86, 0.08);
  border: 1px solid rgba(234, 47, 86, 0.25);
  color: #F36688;
  border-radius: var(--radius-lg);
  font-size: 12px;
  margin-bottom: 14px;
}

.login-toast { margin-bottom: 14px; }
.toast {
  padding: 8px 14px;
  background: var(--bg-success, rgba(46, 204, 113, 0.08));
  color: var(--text-success, #5fd38f);
  border-radius: var(--radius-md);
  font-size: 12px;
  margin-bottom: 12px;
  border: 0.5px solid rgba(59, 109, 17, 0.25);
}

.login-card .login-switch {
  text-align: center;
  margin-top: 20px;
  border-top: 1px solid rgba(48, 51, 62, 0.6);
  padding-top: 18px;
}
.login-card .login-switch__label { font-size: 12px; color: #848DA8; }
.login-card .login-switch__link {
  display: inline !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 0 0 2px !important;
  color: #EDE8DB !important;
  font-weight: 600;
}
.login-card .login-switch__link:hover { color: #FFFFFF !important; }

.login-card .login-section-title {
  font-size: 10px;
  font-weight: 600;
  color: #848DA8; /* dark --text-secondary, not Login.css's --text-tertiary: that value is 4.00:1 at 10px (clero-auth#104) */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.login-card .login-section-title--divided {
  margin-top: 20px;
  border-top: 1px solid rgba(48, 51, 62, 0.6);
  padding-top: 18px;
}

.login-label-optional { color: #848DA8; font-weight: 400; }

.login-review-note {
  text-align: center;
  margin-top: 8px;
  font-size: 11px;
  color: #848DA8;
  line-height: 1.5;
}

/* ── Google slot + "or" divider (Login.css:239-261) ─────────────────────── */
.login-google {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
  min-height: 40px;
}
.login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 14px;
  color: #848DA8; /* dark --text-secondary, not Login.css's --text-tertiary: that value is 4.00:1 at 11px (clero-auth#104) */
  font-size: 11px;
}
.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(48, 51, 62, 0.6);
}
.login-divider span { white-space: nowrap; letter-spacing: 0.04em; }

/* ── Reset-sent panel (Login.css:127-147) ───────────────────────────────── */
.login-resetsent { text-align: center; padding: 1rem 0; }
.login-resetsent__emoji { font-size: 32px; margin-bottom: 12px; }
.login-resetsent__title {
  font-size: 13px;
  color: #EDE8DB;
  font-weight: 500;
  margin-bottom: 8px;
}
.login-resetsent__body { font-size: 12px; color: #848DA8; line-height: 1.5; }
.login-resetsent__email { color: #EDE8DB; }
.login-resetsent__back { margin-top: 14px; }

/* ── Turnstile slot (clero-register addition — not in the dashboard) ──────
   Reserves space only when the widget renders; zero-footprint otherwise, so the
   ported spacing is untouched wherever no sitekey is configured (login.js:258
   returns early). It IS configured in production, so the widget renders on the
   live page: it is asked for theme:"dark" (login.js:250) because the iframe is
   cross-origin and cannot see this document's forced theme attribute. This slot
   declares no background of its own — the widget's card sits on --bg-secondary. */
.login-turnstile { margin-top: 14px; display: flex; justify-content: center; }
.login-turnstile:empty { margin: 0; }

/* Hide card content until login.js resolves the initial mode (avoids a flash
   of every form at once before the panels are toggled). */
.login-page[data-mode="loading"] .login-body { visibility: hidden; }

/* ── Responsive (App.css:1831 @media max-width:768px → 1865-1870, 1906) ── */
@media (max-width: 768px) {
  .login-page { grid-template-columns: 1fr; }
  .login-media { display: none; }
  .login-card { max-width: 100%; padding: 1.25rem; }
  .login-footer { flex-direction: column; gap: 10px; padding: 12px 16px; }
  .login-footer-left { justify-content: center; }
  .login-footer-right { flex-wrap: wrap; justify-content: center; gap: 10px; }
  .login-header { padding: 1.5rem 1rem; }
}