/* Client Area sign-in, registration, and password reset (token-driven).
   Split-screen layout: form column left, brand panel right. The brand panel is
   intentionally dark in both themes and reuses the same deep-navy + world-map
   treatment as the public page heroes (14-enhancements.css), which the auth
   layout cannot pull in because it does not load the marketing bundle. */

.auth-body {
  background: var(--l1-surface-1);
  min-height: 100vh;
}

.auth-split {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
}

/* ---------- form column ---------- */

.auth-split-form {
  align-content: space-between;
  background: var(--l1-surface-1);
  display: grid;
  gap: 32px;
  padding: 48px clamp(24px, 6vw, 88px) 32px;
}

.auth-form-col {
  align-self: center;
  display: grid;
  gap: 26px;
  justify-self: center;
  max-width: 420px;
  width: 100%;
}

.auth-form-col.auth-panel-register {
  max-width: 480px;
}

.auth-wordmark {
  display: inline-flex;
  justify-self: start;
  line-height: 1;
}

.auth-wordmark img {
  height: 34px;
  width: auto;
}

/* Same silhouette trick the navbar and footer use (11-dark-refactor.css): the
   wordmark artwork is dark ink, so it vanishes on a dark surface. */
html[data-l1-theme="dark"] .auth-wordmark img {
  filter: brightness(0) invert(1);
}

.auth-head {
  display: grid;
  gap: 10px;
}

.auth-head h1 {
  color: var(--l1-brand);
  font-family: var(--l1-font-body);
  font-size: clamp(1.9rem, 4.4vw, 2.5rem);
  font-weight: var(--l1-fw-normal);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

.auth-head p {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-sm);
  line-height: 1.55;
  margin: 0;
  max-width: 40ch;
}

/* ---------- form ---------- */

.auth-form {
  display: grid;
  gap: 18px;
  margin: 0;
}

.auth-field {
  display: grid;
  gap: 7px;
  margin: 0;
}

.auth-field > span {
  color: var(--l1-ink-soft);
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-medium);
  line-height: 1.3;
}

.auth-field > span small {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-xs);
  font-weight: var(--l1-fw-normal);
}

.auth-form .form-control,
.auth-form .ui-input {
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-sm);
  box-shadow: none;
  color: var(--l1-ink);
  font-size: var(--l1-text-base);
  min-height: 52px;
  padding: 0.6rem 0.9rem;
  transition: border-color var(--l1-transition), box-shadow var(--l1-transition);
  width: 100%;
}

.auth-form .form-control::placeholder,
.auth-form .ui-input::placeholder {
  color: var(--l1-ink-muted);
}

.auth-form .form-control:focus,
.auth-form .ui-input:focus {
  border-color: var(--l1-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--l1-brand) 16%, transparent);
  outline: 0;
}

.auth-field-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.auth-form-row,
.auth-consent-stack {
  display: grid;
  gap: 14px;
}

.auth-form-row {
  align-items: center;
  grid-template-columns: 1fr auto;
}

.auth-form-row .checkbox-row.form-check,
.auth-consent-stack .checkbox-row.form-check {
  align-items: flex-start;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  gap: 10px;
  margin: 0;
  min-height: 0;
  padding: 0;
}

.auth-form-row .checkbox-row.form-check input[type="checkbox"],
.auth-consent-stack .checkbox-row.form-check input[type="checkbox"] {
  accent-color: var(--l1-brand);
  background-color: var(--l1-surface-1) !important;
  border: 1px solid var(--l1-border-strong) !important;
  box-shadow: none;
  flex: 0 0 auto;
  height: 1rem;
  margin: 0.15rem 0 0;
  width: 1rem;
}

.auth-form .form-check-input:checked,
.auth-form-row .checkbox-row.form-check input[type="checkbox"]:checked,
.auth-consent-stack .checkbox-row.form-check input[type="checkbox"]:checked,
.auth-form .ui-check:checked {
  background-color: var(--l1-brand) !important;
  border-color: var(--l1-brand) !important;
}

.auth-form .form-check-input:focus,
.auth-form-row .checkbox-row.form-check input[type="checkbox"]:focus,
.auth-consent-stack .checkbox-row.form-check input[type="checkbox"]:focus,
.auth-form .ui-check:focus {
  border-color: var(--l1-brand) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--l1-brand) 16%, transparent) !important;
  outline: 0;
}

.auth-form-row .checkbox-row.form-check span,
.auth-consent-stack .checkbox-row.form-check span {
  color: var(--l1-ink-soft);
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-normal);
  line-height: 1.45;
}

.auth-consent-stack .checkbox-row.form-check span a {
  color: var(--l1-brand);
  font-weight: var(--l1-fw-semibold);
  text-decoration: none;
}

.auth-consent-stack .checkbox-row.form-check span a:hover {
  text-decoration: underline;
}

.auth-form-row a {
  color: var(--l1-brand);
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-medium);
  text-decoration: none;
  white-space: nowrap;
}

.auth-form-row a:hover {
  text-decoration: underline;
}

/* ---------- primary action ---------- */

.auth-primary-action.button,
.auth-primary-action.l1-button,
.auth-primary-action.btn {
  align-items: center;
  background: var(--l1-brand);
  border: 0;
  border-radius: var(--l1-radius-sm);
  box-shadow: none;
  color: var(--l1-brand-contrast);
  display: inline-flex;
  font-size: var(--l1-text-lg);
  font-weight: var(--l1-fw-medium);
  gap: 10px;
  justify-content: space-between;
  min-height: 52px;
  padding: 0 1.1rem;
  transition: background var(--l1-transition), box-shadow var(--l1-transition);
  width: 100%;
}

.auth-primary-action.button:hover,
.auth-primary-action.l1-button:hover,
.auth-primary-action.btn:hover {
  background: var(--l1-brand-strong);
  box-shadow: var(--l1-shadow-md);
  color: var(--l1-brand-contrast);
}

.auth-primary-action .auth-action-arrow {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
}

.auth-primary-action .auth-action-arrow svg,
.auth-primary-action .auth-action-arrow i {
  height: 20px;
  width: 20px;
}

/* ---------- helper text ---------- */

.auth-help,
.auth-alt {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-sm);
  line-height: 1.5;
  margin: 0;
}

.auth-help a,
.auth-alt a {
  color: var(--l1-brand);
  font-weight: var(--l1-fw-semibold);
  text-decoration: none;
}

.auth-help a:hover,
.auth-alt a:hover {
  text-decoration: underline;
}

.auth-alt {
  border-top: 1px solid var(--l1-border);
  padding-top: 20px;
}

.auth-notice {
  background: var(--l1-surface-2);
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-sm);
  display: grid;
  gap: 6px;
  padding: 16px 18px;
}

.auth-notice strong {
  color: var(--l1-ink);
  font-size: var(--l1-text-base);
  font-weight: var(--l1-fw-semibold);
}

.auth-notice span {
  color: var(--l1-ink-muted);
  font-size: var(--l1-text-sm);
  line-height: 1.55;
}

/* .message / .messages live in app.css, which the auth layout does not load, so
   the sign-in failure notice and field errors have to be styled here or they
   render as unmarked body text. */
.auth-form-col .messages {
  display: grid;
  gap: 10px;
}

.auth-form-col .message {
  border: 1px solid var(--l1-border);
  border-radius: var(--l1-radius-sm);
  color: var(--l1-ink-soft);
  font-size: var(--l1-text-sm);
  line-height: 1.5;
  padding: 12px 14px;
}

.auth-form-col .message-error {
  background: #fef3f2;
  border-color: #fda29b;
  color: #b42318;
}

.auth-form-col .message-success {
  background: #ecfdf3;
  border-color: #a6f4c5;
  color: #067647;
}

.auth-form .form-error {
  color: #b42318;
  font-size: var(--l1-text-sm);
  line-height: 1.4;
}

html[data-l1-theme="dark"] .auth-form-col .message-error {
  background: rgba(180, 35, 24, 0.16);
  border-color: rgba(253, 162, 155, 0.42);
  color: #fda29b;
}

html[data-l1-theme="dark"] .auth-form-col .message-success {
  background: rgba(6, 118, 71, 0.18);
  border-color: rgba(166, 244, 197, 0.36);
  color: #a6f4c5;
}

html[data-l1-theme="dark"] .auth-form .form-error {
  color: #fda29b;
}

/* ---------- form-column footer ---------- */

.auth-form-foot {
  align-items: center;
  color: var(--l1-ink-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--l1-text-xs);
  gap: 8px 20px;
  justify-content: space-between;
}

.auth-form-foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.auth-form-foot a {
  color: var(--l1-ink-muted);
  text-decoration: none;
}

.auth-form-foot a:hover {
  color: var(--l1-brand);
  text-decoration: underline;
}

/* ---------- brand panel ---------- */

.auth-split-brand {
  align-content: space-between;
  background-color: #172235;
  background-image:
    radial-gradient(circle at 18% 16%, rgba(160, 167, 178, 0.28), transparent 26rem),
    linear-gradient(65deg, transparent 34%, rgba(213, 216, 221, 0.10) 46%, transparent 60%),
    linear-gradient(180deg, rgba(16, 21, 34, 0.44) 0%, rgba(12, 14, 24, 0.76) 100%),
    url("../website/img/world-map-outline.04b03780e8d0.svg");
  background-position: center, center, center, center 52%;
  background-repeat: no-repeat;
  background-size: cover, cover, cover, min(940px, 150%) auto;
  color: #e7ecf5;
  display: grid;
  gap: 32px;
  overflow: hidden;
  padding: 40px clamp(28px, 5vw, 64px) 36px;
  /* Sticky, not static: the registration form is taller than the viewport, and a
     static panel would scroll its logo and footer links off with the form. */
  position: sticky;
  top: 0;
  height: 100vh;
}

.auth-brand-cta {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--l1-radius-sm);
  color: #e7ecf5;
  font-size: var(--l1-text-sm);
  font-weight: var(--l1-fw-medium);
  justify-self: end;
  padding: 9px 18px;
  text-decoration: none;
  transition: background var(--l1-transition), border-color var(--l1-transition);
}

.auth-brand-cta:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
}

.auth-brand-body {
  align-self: center;
  display: grid;
  gap: 18px;
  max-width: 460px;
}

.auth-brand-body h2 {
  color: #ffffff;
  font-family: var(--l1-font-head);
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  font-weight: var(--l1-fw-semibold);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}

.auth-brand-body p {
  color: rgba(231, 236, 245, 0.82);
  font-size: var(--l1-text-base);
  line-height: 1.6;
  margin: 0;
}

.auth-brand-points {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.auth-brand-points li {
  color: rgba(231, 236, 245, 0.9);
  font-size: var(--l1-text-sm);
  line-height: 1.5;
  padding-left: 26px;
  position: relative;
}

.auth-brand-points li::before {
  background: rgba(45, 212, 191, 0.9);
  border-radius: 50%;
  content: "";
  height: 7px;
  left: 4px;
  position: absolute;
  top: 0.5em;
  width: 7px;
}

.auth-brand-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}

.auth-brand-foot a {
  color: rgba(231, 236, 245, 0.72);
  font-size: var(--l1-text-sm);
  text-decoration: none;
}

.auth-brand-foot a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* ---------- responsive ---------- */

@media (max-width: 1023px) {
  .auth-split {
    grid-template-columns: minmax(0, 1fr);
    min-height: 100vh;
  }

  /* The brand panel is decorative reinforcement, not content the form needs.
     On one column it would push the form below the fold, so it drops out and
     the form column keeps the legal links. */
  .auth-split-brand {
    display: none;
  }

  .auth-split-form {
    padding: 40px clamp(20px, 6vw, 48px) 28px;
  }
}

@media (max-width: 560px) {
  .auth-field-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .auth-form-row {
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
  }

  .auth-form-row a {
    white-space: normal;
  }

  .auth-form-foot {
    justify-content: flex-start;
  }
}