/* Auth pages (sign up, and login when it moves across).

   Built on the tokens in styles.css so the account screens sit inside the same
   dark brand as the landing page and the webinar wizard, rather than the
   light one-off the old login page shipped with. No new colours are declared
   here; every value below resolves to a variable from styles.css. */

.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 15% 5%, rgba(68, 49, 153, 0.28) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(121, 44, 162, 0.22) 0%, transparent 42%),
    radial-gradient(circle at 80% 92%, rgba(193, 51, 131, 0.18) 0%, transparent 45%),
    var(--bg-0);
}

/* Topbar — same brand lockup as the wizard, so a visitor arriving from the
   landing page does not feel handed to a different site. */
.auth-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 1.1rem var(--page-gutter);
  border-bottom: 1px solid var(--border);
}

.auth-topbar .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}

/* The wordmark face, gradient, and colours are owned by styles.css — its own
   comment asks every surface to reuse .wordmark-name / .wordmark-tag so the
   lockup stays identical everywhere. Only the size is set here. */
.auth-topbar .brand-mark {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
}

.auth-topbar .wordmark-name {
  font-size: 0.95rem;
}

.auth-topbar .wordmark-tag {
  font-size: 0.58rem;
}

.auth-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem var(--page-gutter) 3rem;
}

.auth-card {
  width: 100%;
  max-width: 480px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* The brand ribbon the landing page uses on its cards. */
.auth-card::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--indigo), var(--purple), var(--magenta), var(--coral));
}

.auth-body {
  padding: 2.25rem 2rem 2rem;
}

.auth-eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--magenta-bright);
}

.auth-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-hi);
}

.auth-title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--magenta-bright), var(--orange));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.auth-lede {
  margin: 0.6rem 0 1.75rem;
  color: var(--text-dim);
  font-size: 0.94rem;
  line-height: 1.55;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.auth-field > label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-body);
}

/* Django renders these inputs, so they arrive without a class of their own —
   matching on the element keeps one source of truth for the field look
   instead of pushing widget attrs into the form class. */
.auth-field input {
  width: 100%;
  min-height: 52px;
  padding: 0.88rem 1rem;
  background: #100d20;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  color: var(--text-hi);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-field input:hover {
  border-color: rgba(255, 255, 255, 0.28);
}

.auth-field input:focus {
  outline: none;
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px rgba(193, 51, 131, 0.25);
}

.auth-field input::placeholder {
  color: #8f87aa;
}

/* Django ships a <ul> of password rules. Collapsed to a quiet block so it
   advises without out-shouting the labels. */
.auth-help {
  margin-top: 0.5rem;
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.5;
}

.auth-help ul {
  margin: 0;
  padding-left: 1.1rem;
}

.auth-help li + li {
  margin-top: 0.15rem;
}

.auth-error {
  margin: 0.5rem 0 0;
  color: #ff9b9b;
  font-size: 0.84rem;
  line-height: 1.45;
}

.auth-errors {
  margin-bottom: 1.25rem;
  padding: 0.8rem 1rem;
  background: var(--surface-warm);
  border: 1px solid rgba(224, 84, 84, 0.45);
  border-radius: 10px;
  color: #ffb3b3;
  font-size: 0.88rem;
}

.auth-errors p {
  margin: 0;
}

.auth-errors p + p {
  margin-top: 0.4rem;
}

.auth-submit {
  width: 100%;
  margin-top: 0.35rem;
}

.auth-alt {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-dim);
}

/* Django messages on the sign-in page. `error` reuses the form's error box so
   a bad password and a rejected field look like the same kind of problem;
   `info` is the softer note the staff redirect uses. */
.auth-notice {
  margin-bottom: 1.25rem;
  padding: 0.8rem 1rem;
  background: var(--surface-accent);
  border: 1px solid var(--line-accent);
  border-radius: 10px;
  color: var(--text-body);
  font-size: 0.88rem;
}

.auth-notice p {
  margin: 0;
}

.auth-notice p + p {
  margin-top: 0.4rem;
}

/* Sign-in has two links side by side where sign-up has one sentence. */
.auth-links {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
}

.auth-links a {
  color: var(--text-dim);
  text-decoration: none;
}

.auth-links a:hover {
  color: var(--magenta-bright);
}

@media (max-width: 480px) {
  .auth-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
}

@media (max-width: 768px) {
  .auth-body {
    padding: 1.75rem 1.35rem 1.5rem;
  }

  .auth-title {
    font-size: 1.6rem;
  }

  .auth-topbar .wordmark-name {
    font-size: 0.84rem;
  }
}

@media (max-width: 480px) {
  .auth-topbar {
    padding: 0.9rem var(--page-gutter);
  }

  /* The tagline is the first thing to give up room — brand mark, name,
     and the sign-in/sign-up pair need the space more on a phone-width
     topbar. */
  .auth-topbar .wordmark-tag {
    display: none;
  }

  .authnav {
    gap: 0.4rem;
  }
}

/* --------------------------------------------------------------------------
   Two-step signup (templates/accounts/signup.html)

   Everything below styles fields that are not wrapped in .auth-field --
   form-grid, role cards, and child cards render their own <label> instead,
   reusing form-grid / people-builder / person-card from styles.css.
   -------------------------------------------------------------------------- */
.auth-card-wide {
  max-width: 720px;
}

.signup-form label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-body);
}

.signup-form input,
.signup-form select,
.signup-form textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.7rem 1rem;
  background: #100d20;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  color: var(--text-hi);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.signup-form input:hover,
.signup-form select:hover,
.signup-form textarea:hover {
  border-color: rgba(255, 255, 255, 0.28);
}

.signup-form input:focus,
.signup-form select:focus,
.signup-form textarea:focus {
  outline: none;
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px rgba(193, 51, 131, 0.25);
}

.signup-form input::placeholder {
  color: #8f87aa;
}

.signup-steps {
  display: grid;
  gap: 1.25rem;
}

.signup-step[hidden] {
  display: none;
}

.signup-branch[hidden] {
  display: none;
}

.signup-branch h3 {
  margin: 1.25rem 0 0.75rem;
  color: var(--text-hi);
  font-size: 0.98rem;
}

.signup-step-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* Role cards, deliberately not .role-option: that class carries a desktop
   image-panel layout meant for the webinar wizard's three illustrated
   options, which would clip these two text-only cards. */
.signup-role-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.signup-role-options .signup-role-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-control, 12px);
  background: rgba(10, 8, 24, 0.56);
  color: var(--text-hi);
  cursor: pointer;
  text-align: left;
}

.signup-role-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.signup-role-option:has(input:checked) {
  border-color: var(--magenta-bright);
  background: rgba(193, 51, 131, 0.13);
  box-shadow: 0 0 0 3px rgba(193, 51, 131, 0.22);
}

.signup-role-option-copy {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.signup-role-option-copy strong {
  font-size: 0.98rem;
}

.signup-role-option-copy small {
  color: var(--text-dim);
  font-size: 0.8rem;
}

.signup-role-option-check {
  margin-left: auto;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.signup-role-option:has(input:checked) .signup-role-option-check {
  border-color: var(--magenta-bright);
  background: var(--magenta-bright);
}

.field-optional {
  font-weight: 400;
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: normal;
}

.people-builder-head {
  margin-bottom: 0.5rem;
}

@media (max-width: 640px) {
  .form-grid,
  .signup-role-options {
    grid-template-columns: 1fr;
  }
}