/* Client-area authentication.
   A centered card under the public navbar. No marketing column. */

.auth-body {
  background: var(--l1-surface-2);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.auth-shell {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  padding: 48px 20px 28px;
}

.auth-panel {
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border);
  border-radius: 16px;
  box-shadow: var(--l1-shadow-sm);
  display: grid;
  gap: 22px;
  margin-top: auto;
  max-width: 420px;
  padding: 36px 32px 32px;
  width: 100%;
}

.auth-bottom {
  display: grid;
  gap: 14px;
  justify-items: center;
  margin-top: auto;
  max-width: 34rem;
  padding-top: 20px;
  width: 100%;
}

.auth-legal {
  color: var(--l1-ink-muted);
  font-size: 0.75rem;
  line-height: 1.5;
  margin: 0;
  max-width: 68ch;
  text-align: center;
}

.auth-legal a {
  color: var(--l1-ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-legal a:hover {
  color: var(--l1-brand);
}

.auth-panel.auth-panel-register {
  max-width: 460px;
}

.auth-wordmark {
  display: flex;
  justify-content: center;
  line-height: 1;
}

.auth-wordmark img {
  display: block;
  height: 36px;
  object-fit: contain;
  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: 8px;
  text-align: center;
}

.auth-head-kicker {
  color: var(--l1-brand-strong);
  font-size: 0.68rem;
  font-weight: var(--l1-fw-bold);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.auth-head h1 {
  color: var(--l1-ink);
  font-family: var(--l1-font-head);
  font-size: 1.55rem;
  font-weight: var(--l1-fw-semibold);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0;
}

.auth-head p {
  color: var(--l1-ink-muted);
  font-size: 0.94rem;
  line-height: 1.55;
  margin: 0;
}

.auth-identity {
  color: var(--l1-ink-soft);
  font-size: 0.95rem;
  line-height: 1.45;
  margin: 0;
  text-align: center;
  word-break: break-word;
}

.auth-identity strong {
  color: var(--l1-ink);
  font-weight: var(--l1-fw-semibold);
}

.auth-identity-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0 0.2rem;
}

.auth-logins {
  background: var(--l1-surface-2);
  border: 1px solid var(--l1-border);
  border-radius: 10px;
  color: var(--l1-ink-muted);
  display: grid;
  font-size: 0.82rem;
  gap: 6px;
  line-height: 1.45;
  padding: 12px 14px;
}

.auth-logins p {
  color: var(--l1-ink-soft);
  font-weight: var(--l1-fw-semibold);
  margin: 0;
}

.auth-logins ul {
  display: grid;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.auth-logins li {
  color: var(--l1-ink);
}

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

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

/* Turnstile is interaction-only: after a silent success there is no widget, so
   a reserved 65px band plus 1rem margins was empty space above Continue. */
.auth-form .l1-turnstile-wrap {
  margin: 0;
  min-height: 0;
}

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

/* .auth-field-label is the same thing as the direct <span>, for the one field
   whose control cannot live inside its <label>: the register password field
   puts a reveal button next to the input, and a button inside a label joins the
   input's accessible name. See templates/accounts/register.html. */
.auth-field > span,
.auth-field > .auth-field-label {
  color: var(--l1-ink);
  font-size: 0.82rem;
  font-weight: var(--l1-fw-semibold);
  line-height: 1.3;
}

.auth-field > .auth-field-label {
  display: block;
  margin: 0;
}

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

.auth-form .ui-input {
  background: var(--l1-surface-1);
  border: 1px solid color-mix(in srgb, var(--l1-border) 82%, transparent);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(14, 19, 28, 0.03);
  color: var(--l1-ink);
  font-size: var(--l1-text-base);
  min-height: 50px;
  padding: 0.6rem 0.9rem;
  transition: border-color var(--l1-transition), box-shadow var(--l1-transition);
  width: 100%;
}

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

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

/* Password reveal on the register form, which no longer has a confirm field.
   The wrap is position: relative and the input carries right padding so the
   button sits inside the field rather than beside it, which would make the
   password input narrower than the email input directly above it. */
.auth-password-wrap {
  display: block;
  position: relative;
}

.auth-password-wrap .ui-input {
  padding-right: 3rem;
  width: 100%;
}

.auth-password-reveal {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--l1-ink-muted);
  cursor: pointer;
  display: flex;
  height: 2.25rem;
  justify-content: center;
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.25rem;
}

.auth-password-reveal:hover {
  color: var(--l1-ink);
}

.auth-password-reveal:focus-visible {
  outline: 2px solid var(--l1-primary);
  outline-offset: 1px;
}

.auth-password-reveal svg {
  height: 18px;
  width: 18px;
}

/* Both icons are in the DOM so lucide renders them once at page load; the
   toggle swaps `hidden` rather than rebuilding an element and re-running
   createIcons(), which had no scope and re-created every icon on the page. */
.auth-password-reveal [hidden] {
  display: none;
}

.auth-field-grid {
  display: grid;
  gap: 14px;
  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,
.auth-consent-stack .checkbox-row {
  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 input[type="checkbox"],
.auth-consent-stack .checkbox-row 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-row .checkbox-row input[type="checkbox"]:checked,
.auth-consent-stack .checkbox-row input[type="checkbox"]:checked,
.auth-form .ui-check:checked {
  background-color: var(--l1-brand) !important;
  border-color: var(--l1-brand) !important;
}

.auth-form-row .checkbox-row input[type="checkbox"]:focus,
.auth-consent-stack .checkbox-row 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 span,
.auth-consent-stack .checkbox-row 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 span a {
  color: var(--l1-brand);
  font-weight: var(--l1-fw-semibold);
  text-decoration: none;
}

.auth-consent-stack .checkbox-row 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.ui-btn,
.auth-primary-action.btn {
  align-items: center;
  background: var(--l1-brand);
  border: 0;
  border-radius: 10px;
  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: center;
  min-height: 50px;
  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.ui-btn: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;
  text-align: center;
}

.auth-help {
  align-items: flex-start;
  display: flex;
  gap: 8px;
  justify-content: center;
}

.auth-help svg {
  color: var(--l1-ink-muted);
  flex: 0 0 auto;
  height: 15px;
  margin-top: 3px;
  width: 15px;
}

.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: 0;
  padding-top: 2px;
}

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

.auth-methods {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.auth-methods-label {
  align-items: center;
  color: var(--l1-ink-muted);
  display: grid;
  font-size: 0.72rem;
  font-weight: var(--l1-fw-bold);
  gap: 12px;
  grid-template-columns: 1fr auto 1fr;
  letter-spacing: 0.08em;
  margin: 4px 0 0;
  text-transform: uppercase;
}

.auth-methods-label::before,
.auth-methods-label::after {
  background: var(--l1-border);
  content: "";
  height: 1px;
}

.auth-methods-label span {
  white-space: nowrap;
}

.auth-secondary-action {
  align-items: center;
  background: var(--l1-surface-1);
  border: 1px solid var(--l1-border-strong);
  border-radius: 10px;
  color: var(--l1-ink);
  display: flex;
  font-size: var(--l1-text-base);
  font-weight: var(--l1-fw-medium);
  justify-content: center;
  min-height: 50px;
  padding: 0 1.1rem;
  text-decoration: none;
  transition: border-color var(--l1-transition), box-shadow var(--l1-transition);
}

.auth-secondary-action:hover {
  border-color: var(--l1-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--l1-brand) 13%, transparent);
  color: var(--l1-ink);
}

.auth-passkey-error {
  color: var(--l1-danger);
  font-size: var(--l1-text-sm);
  line-height: 1.5;
  margin: 0;
}

.auth-challenge,
.auth-method {
  display: grid;
  gap: 18px;
}

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

.auth-switch {
  background: none;
  border: 0;
  color: var(--l1-brand);
  cursor: pointer;
  font: inherit;
  font-weight: var(--l1-fw-semibold);
  padding: 0;
}

.auth-switch:hover {
  text-decoration: underline;
}

.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;
}

/* .messages / .message now live in components.css, which every layout loads,
   with all four levels on the --l1-* tone tokens. The hardcoded hex copies that
   used to sit here overrode them (auth-pages.css loads after tailwind.css) and
   were a second palette to keep in step -- they had no warning or info tone, so
   the sign-in page's message-info notice rendered unmarked. Only the
   auth-specific spacing stays. */
.auth-panel .messages {
  gap: 10px;
  margin-bottom: 0;
}

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

/* No dark-mode message or form-error overrides here: the tone tokens in
   tokens.css already swap, so a second set would only be able to drift. */

html[data-l1-theme="dark"] .auth-form .ui-input {
  background: var(--l1-surface-1) !important;
}

/* ---------- footer ---------- */

.auth-form-foot {
  align-items: center;
  color: var(--l1-ink-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.7rem;
  gap: 8px 20px;
  justify-content: center;
  margin: 0;
  max-width: 460px;
  padding: 0;
  text-align: center;
  width: 100%;
}

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

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

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

/* Marketing body rules (body.l1-marketing-v2 a / h1) are more specific than
   the form styles above. Reassert the auth palette so the navbar can share
   that body class without recolouring the card. */
body.auth-body.l1-marketing-v2 {
  background: var(--l1-surface-2);
}

body.auth-body.l1-marketing-v2 .auth-shell {
  background: transparent;
}

body.auth-body.l1-marketing-v2 .auth-head h1 {
  color: var(--l1-ink);
  font-weight: var(--l1-fw-semibold);
}

body.auth-body.l1-marketing-v2 .auth-alt a,
body.auth-body.l1-marketing-v2 .auth-help a,
body.auth-body.l1-marketing-v2 .auth-form-row a,
body.auth-body.l1-marketing-v2 .auth-identity-switch,
body.auth-body.l1-marketing-v2 .auth-consent-stack .checkbox-row span a {
  color: var(--l1-brand);
}

body.auth-body.l1-marketing-v2 .auth-secondary-action {
  color: var(--l1-ink);
}

body.auth-body.l1-marketing-v2 .auth-secondary-action:hover {
  color: var(--l1-ink);
}

body.auth-body.l1-marketing-v2 .auth-legal a {
  color: var(--l1-ink-soft);
}

body.auth-body.l1-marketing-v2 .auth-legal a:hover,
body.auth-body.l1-marketing-v2 .auth-form-foot a:hover {
  color: var(--l1-brand);
}

body.auth-body.l1-marketing-v2 .auth-form-foot a {
  color: var(--l1-ink-muted);
}

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

@media (max-width: 560px) {
  .auth-shell {
    padding: 28px 16px 20px;
  }

  .auth-panel,
  .auth-panel.auth-panel-register {
    padding: 28px 20px 24px;
  }

  .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;
  }
}