/* Sign in, sign up and the code screens.
 *
 * One door, two halves: the form on the left, the brand panel (the shared
 * photo carousel) on the right, which folds away on phones. Reads tokens.css,
 * so the page follows the design system without Bootstrap.
 *
 * The class names the shared partials already use — .social-auth, .social-btn,
 * .auth-carousel, and the form-control class Django's widgets carry — are
 * styled here rather than renamed, so those partials keep working untouched.
 */

/* This page loads no framework, so it brings its own reset. */
*, *::before, *::after { box-sizing: border-box; }
body.auth { margin: 0; }
img { max-width: 100%; }

/* One card on a soft wash: the form and the brand panel held together as a
   single object, so a wide screen never scatters them (owner, 2026-09-24:
   the earlier card "feels better"). Phones get the form card alone. */
.auth {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: var(--bel-space-6) var(--bel-gutter);
  padding-top: calc(var(--bel-space-6) + env(safe-area-inset-top, 0px));
  background: var(--bel-bg);
  color: var(--bel-text);
  font-family: var(--bel-font-sans);
}
.auth-frame {
  width: min(1080px, 100%);
  display: grid;
  background: var(--bel-bg-raised);
  border: 1px solid var(--bel-border);
  border-radius: 28px;
  box-shadow: 0 1px 2px rgb(18 17 16 / .04), 0 30px 70px -30px rgb(18 17 16 / .28);
  overflow: hidden;
}
@media (min-width: 900px) { .auth-frame { grid-template-columns: 1fr 1fr; min-height: 640px; } }

/* ---- the form half -------------------------------------------------------- */
.auth-main {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--bel-space-8) var(--bel-space-6);
}
@media (min-width: 900px) { .auth-main { padding: var(--bel-space-10, 2.5rem) var(--bel-space-8); } }
/* 400px: exactly the widest Google will draw its button, so every control lines up. */
.auth-card { width: 100%; max-width: 400px; margin-inline: auto; }
.auth-brand { display: inline-flex; align-items: center; gap: var(--bel-space-2); font-weight: var(--bel-weight-semibold); color: var(--bel-text); text-decoration: none; }
.auth-title { margin: var(--bel-space-6) 0 var(--bel-space-2); font-family: var(--bel-font-serif); font-weight: var(--bel-weight-regular); font-size: var(--bel-text-3xl); line-height: 1.1; letter-spacing: var(--bel-tracking-tight); }
.auth-sub { margin: 0 0 var(--bel-space-6); color: var(--bel-text-muted); }
.auth-foot { margin-top: var(--bel-space-6); font-size: var(--bel-text-sm); color: var(--bel-text-muted); text-align: center; }
.auth-foot a { color: var(--bel-link); font-weight: var(--bel-weight-medium); }

/* Django widgets carry .form-control; dress it as the design system's input. */
.auth .form-control, .auth input[type="text"], .auth input[type="email"],
.auth input[type="password"], .auth select {
  width: 100%; min-height: var(--bel-tap-target);
  padding: var(--bel-space-3) var(--bel-space-4);
  font: inherit; font-size: var(--bel-text-base);   /* 16px: iOS must not zoom */
  color: var(--bel-text); background: var(--bel-bg-raised);
  border: 1px solid var(--bel-border-strong); border-radius: var(--bel-radius-md);
}
.auth .form-control:focus, .auth input:focus, .auth select:focus {
  outline: none; border-color: var(--bel-brand); box-shadow: var(--bel-shadow-focus);
}
.auth .form-group { display: flex; flex-direction: column; gap: var(--bel-space-2); margin-bottom: var(--bel-space-4); }
.auth .form-label, .auth label { font-size: var(--bel-text-sm); font-weight: var(--bel-weight-medium); }
.auth .form-check { display: flex; align-items: center; gap: var(--bel-space-2); min-height: var(--bel-tap-target); }
.auth .form-check-input { width: 18px; height: 18px; accent-color: var(--bel-brand); }
.auth .form-check-label { font-weight: var(--bel-weight-regular); color: var(--bel-text-muted); }
.auth .help-text, .auth .form-text { font-size: var(--bel-text-sm); color: var(--bel-text-muted); }
.auth .errorlist { margin: 0 0 var(--bel-space-3); padding: var(--bel-space-3) var(--bel-space-4); list-style: none; border-radius: var(--bel-radius-md); background: var(--bel-danger-soft); color: var(--bel-danger); font-size: var(--bel-text-sm); }
.auth .field-error { color: var(--bel-danger); font-size: var(--bel-text-sm); }

.auth .submit-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bel-space-2);
  width: 100%; min-height: 50px; margin-top: var(--bel-space-2);
  border: 0; border-radius: var(--bel-radius-pill);
  background: var(--bel-brand); color: var(--bel-on-brand);
  font: inherit; font-size: var(--bel-text-base); font-weight: var(--bel-weight-medium); cursor: pointer;
}
.auth .submit-btn:hover { background: var(--bel-brand-strong); }

/* ---- the ways in that the partials render -------------------------------- */
.auth .social-auth { display: grid; gap: var(--bel-space-3); margin-top: var(--bel-space-5); }
.auth .social-auth-terms { font-size: var(--bel-text-sm); color: var(--bel-text-muted); margin: 0 0 var(--bel-space-2); }
.auth .social-btn, .auth .social-btn-slot > a, .auth .social-btn-slot > button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bel-space-3);
  width: 100%; min-height: var(--bel-tap-target); padding: var(--bel-space-3) var(--bel-space-4);
  border: 1px solid var(--bel-border-strong); border-radius: var(--bel-radius-pill);
  background: var(--bel-bg-raised); color: var(--bel-text); text-decoration: none;
  font: inherit; font-weight: var(--bel-weight-medium); cursor: pointer;
}
.auth .social-btn:hover { background: var(--bel-surface-hover); }
.auth .social-btn-fb { background: var(--bel-bg-raised); color: var(--bel-text); }
.auth .social-btn-fb:hover { background: var(--bel-surface-hover); }
/* The emailed-code button is the one filled action once an address is typed. */
.auth #codeToggle.submit-btn { margin-top: var(--bel-space-2); }
.auth .social-auth-terms { text-align: center; }
.auth .divider { display: flex; align-items: center; gap: var(--bel-space-3); margin: var(--bel-space-5) 0; color: var(--bel-text-subtle); font-size: var(--bel-text-sm); }
.auth .divider::before, .auth .divider::after { content: ''; flex: 1; height: 1px; background: var(--bel-border); }

/* ---- the brand half ------------------------------------------------------- */
.auth-aside { position: relative; display: none; overflow: hidden; background: var(--bel-bg-inverse); color: var(--bel-text-on-inverse); border-left: 1px solid var(--bel-border); }
@media (min-width: 900px) { .auth-aside { display: block; } }
.auth-aside .auth-carousel, .auth-aside .auth-carousel-slide { position: absolute; inset: 0; }
.auth-aside .auth-carousel-slide { opacity: 0; transition: opacity 1.2s var(--bel-ease); }
.auth-aside .auth-carousel-slide.is-active { opacity: 1; }
.auth-aside .auth-carousel-slide img { width: 100%; height: 100%; object-fit: cover; }
/* Enough tint for white text to sit on; the photograph should still read. */
.auth-aside::after { content: ''; position: absolute; inset: 0; background:
  linear-gradient(200deg, color-mix(in srgb, var(--bel-indigo-700) 55%, transparent) 0%,
                  color-mix(in srgb, var(--bel-ink-900) 80%, transparent) 100%); }
/* Centred, not pinned to the floor: the panel has to look filled at 1440,
   which is where it is widest. */
.auth-aside__text { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: var(--bel-space-6); height: 100%; padding: var(--bel-space-10, 2.5rem) clamp(2rem, 3.5vw, 3.5rem); }
.auth-aside__text h2 { text-shadow: 0 2px 6px rgb(0 0 0 / .35); font-family: var(--bel-font-serif); font-weight: var(--bel-weight-regular); font-size: var(--bel-text-3xl); line-height: 1.1; margin: 0 0 var(--bel-space-4); }
.auth-aside__text p { margin: 0; max-width: 42ch; opacity: 0.9; text-shadow: 0 1px 2px rgb(0 0 0 / .35); }
.auth-aside__proof { margin: 0; font-size: var(--bel-text-sm); opacity: 0.8; }

/* What you are signing up to get: one real example, made by Belbotika. */
.auth-example { display: flex; gap: var(--bel-space-4); align-items: stretch; max-width: 30rem; padding: var(--bel-space-3); border-radius: var(--bel-radius-lg); background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .18); backdrop-filter: blur(6px); }
.auth-example img { width: 104px; height: 104px; object-fit: cover; border-radius: var(--bel-radius-md); flex: none; }
.auth-example__body { display: flex; flex-direction: column; gap: var(--bel-space-2); min-width: 0; }
.auth-example__label { font-size: var(--bel-text-xs); letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.auth-example p { margin: 0; font-size: var(--bel-text-sm); opacity: .95; }
.auth-example__chips { display: flex; flex-wrap: wrap; gap: var(--bel-space-2); margin-top: auto; }
.auth-example__chips span { padding: 2px var(--bel-space-3); border-radius: var(--bel-radius-pill); background: rgb(255 255 255 / .16); font-size: var(--bel-text-xs); }
.auth-points { display: grid; gap: var(--bel-space-3); margin: 0; padding: 0; list-style: none; }
.auth-points li { display: flex; gap: var(--bel-space-3); align-items: flex-start; font-size: var(--bel-text-sm); opacity: .92; }
.auth-points b { display: block; font-weight: var(--bel-weight-semibold); }

/* ---- the code screen ------------------------------------------------------ */
.code-boxes { display: flex; gap: var(--bel-space-2); justify-content: center; }
.code-boxes input { width: 48px; height: 56px; text-align: center; font-size: var(--bel-text-xl); font-weight: var(--bel-weight-semibold); }

/* ---- register extras ------------------------------------------------------ */
.invite-note { display: flex; align-items: center; gap: var(--bel-space-2); margin-top: var(--bel-space-5); padding: var(--bel-space-3) var(--bel-space-4); border-radius: var(--bel-radius-md); background: var(--bel-brand-soft); color: var(--bel-brand-strong); font-size: var(--bel-text-sm); }
.email-rest { display: grid; gap: var(--bel-space-2); margin-top: var(--bel-space-4); }
.email-rest.is-collapsed { display: none; }
.password-requirements { list-style: none; margin: var(--bel-space-2) 0 0; padding: 0; display: grid; gap: 4px; font-size: var(--bel-text-sm); color: var(--bel-text-muted); }
.password-requirements li { display: flex; align-items: center; gap: var(--bel-space-2); }
.requirement-icon { display: inline-flex; width: 16px; justify-content: center; }
.requirement-icon.valid { color: var(--bel-success); }
.recaptcha-container { margin: var(--bel-space-3) 0; }
.recaptcha-error { display: none; color: var(--bel-danger); font-size: var(--bel-text-sm); }
.recaptcha-error.show { display: block; }
.submit-btn .loading-state { display: none; align-items: center; gap: var(--bel-space-2); }
.submit-btn.is-loading .normal-state { display: none; }
.submit-btn.is-loading .loading-state { display: inline-flex; }
.spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: bel-spin .7s linear infinite; }
@keyframes bel-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
.auth .linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--bel-link); font-weight: var(--bel-weight-medium); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.auth .submit-btn[disabled] { opacity: .55; cursor: not-allowed; }
.code-boxes input.filled { border-color: var(--bel-brand); }

/* The brand a visitor read in on the homepage, carried into sign-up. */
.brand-chip { display: flex; align-items: center; gap: var(--bel-space-3); margin: var(--bel-space-5) 0 var(--bel-space-2); padding: var(--bel-space-3); border: 1px solid var(--bel-border); border-radius: var(--bel-radius-lg); background: var(--bel-surface); }
.brand-chip__mark { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-weight: var(--bel-weight-semibold); color: #fff; background: var(--bel-brand); border: 1px solid var(--bel-border); }
.brand-chip__mark.is-logo { background: #fff center / 78% no-repeat; }
/* A website with no logo or colour read: a quiet globe. */
.brand-chip__mark:not(.is-logo):not([style]) { background: var(--bel-surface-2, #f5f3ee); color: var(--bel-text-muted); }
/* A social page: its own mark in its own colour (outranks the rule above). */
.brand-chip .brand-chip__mark.is-facebook { color: #1877f2; background: #fff; }
.brand-chip .brand-chip__mark.is-instagram { color: #dc2743; background: #fff; }
.brand-chip .brand-chip__mark.is-linkedin { color: #0a66c2; background: #fff; }
.brand-chip__text { flex: 1; min-width: 0; display: grid; }
.brand-chip__text b { color: var(--bel-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-chip__text small { color: var(--bel-text-muted); font-size: var(--bel-text-xs, .75rem); }
.brand-chip__change { color: var(--bel-brand); font-weight: var(--bel-weight-semibold); text-decoration: none; font-size: .875rem; }
.brand-chip__change:hover { text-decoration: underline; }

/* ---- card polish --------------------------------------------------------- */
/* Google draws its button at 40px and nothing else; Facebook matches it, so the
   two provider buttons read as a pair. */
.auth .social-auth { gap: 10px; }
.auth .social-btn-fb { min-height: 40px; padding-block: 8px; font-size: .9375rem; }
.auth .social-auth-terms a { color: var(--bel-link); text-underline-offset: 2px; }
.auth #codeToggle.submit-btn + #emailToggle { margin-top: var(--bel-space-2); }
.auth-aside__text h2 { font-size: clamp(1.9rem, 2.6vw, 2.4rem); text-wrap: balance; }

/* ---- simpler stack (owner, 2026-09-24) ------------------------------------ */
.auth-terms { margin: var(--bel-space-5) 0 0; font-size: var(--bel-text-xs, .8125rem); line-height: 1.5;
  color: var(--bel-text-muted); text-align: center; }
.auth-terms a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.auth-terms a:hover { color: var(--bel-text); }
.auth-forgot { margin: var(--bel-space-3) 0 0; text-align: center; font-size: var(--bel-text-sm); }
.auth-forgot a { color: var(--bel-link); }
.auth .auth-foot { margin-top: var(--bel-space-5); }
/* Sign-in: password first, the emailed code as the second way in (2026-09-25). */
.login-form #emailToggle.submit-btn { margin-top: var(--bel-space-2); }
.login-form #codeToggle.social-btn { margin-top: var(--bel-space-3); width: 100%; }
.register-form #emailToggle.submit-btn { margin-top: var(--bel-space-2); }
.register-form #codeToggle.social-btn { margin-top: var(--bel-space-3); width: 100%; }