:root[data-theme="dark"] {
  --ink-mute: var(--ink-dim);
}

body[data-auth-page] .nav .status,
body[data-auth-page] .nav-links {
  display: none;
}

.auth-main {
  min-height: calc(100vh - 60px);
  display: grid;
  place-items: center;
  padding: var(--space-8) 0 var(--space-10);
}

.auth-card {
  width: min(400px, 100%);
  padding: var(--space-8) var(--space-6);
}

.auth-card h1 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(1.35rem, 3.5vw, 1.65rem);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin: 0;
  animation: auth-settle var(--dur-slow) var(--ease) var(--dur-fast) both;
}

.auth-rule {
  display: block;
  height: 1px;
  margin: var(--space-4) 0 var(--space-6);
  background: rgb(var(--hairline));
  transform-origin: left;
  animation: auth-draw var(--dur-slow) var(--ease-out) both;
}

.auth-rule::before {
  content: "";
  display: block;
  width: var(--space-6);
  height: 100%;
  background: rgb(var(--accent));
}

.auth-card > .mode-copy,
.auth-card > .providers,
.auth-card > .auth-divider,
.auth-form > label,
.auth-form > .form-help,
.auth-form > .btn-submit,
.auth-form > .auth-legal {
  animation: auth-arrive var(--dur-base) var(--ease-out) both;
  animation-delay: calc(var(--dur-base) + var(--dur-fast) / 2 * var(--step, 0));
}

.auth-card > .auth-divider { --step: 1; }
.auth-form > :nth-child(1) { --step: 2; }
.auth-form > :nth-child(2) { --step: 3; }
.auth-form > :nth-child(3),
.auth-form > .form-help { --step: 4; }
.auth-form > .btn-submit { --step: 5; }
.auth-form > .auth-legal { --step: 6; }

@keyframes auth-draw {
  from { transform: scaleX(0); }
}

@keyframes auth-settle {
  from { opacity: 0; transform: translateY(calc(-1 * var(--space-1))); }
}

@keyframes auth-arrive {
  from { opacity: 0; transform: translateY(var(--space-1)); }
}

.when-returning {
  display: none;
}

.auth-card.auth-returning .when-first {
  display: none;
}

.auth-card.auth-returning .when-returning {
  display: block;
}

.mode-copy {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: rgb(var(--ink-mute));
  line-height: 1.5;
  margin: 0 0 var(--space-6);
}

/* class display rules below beat the UA [hidden] rule, so each restates it */
.providers {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.providers[hidden],
.providers.morphing {
  display: none;
}

.btn-provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--touch-min);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: rgb(var(--ink));
  background: rgb(var(--paper-hi));
  border: 1px solid rgb(var(--ink) / 0.18);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease);
}

.btn-provider:hover {
  border-color: rgb(var(--ink) / 0.35);
}

.btn-provider[hidden] {
  display: none;
}

.btn-provider[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-provider[aria-disabled="true"]:hover {
  border-color: rgb(var(--ink) / 0.18);
}

.btn-provider .glyph {
  width: 18px;
  height: 18px;
  flex: none;
  display: grid;
  place-items: center;
}

.btn-provider .glyph svg {
  width: 18px;
  height: 18px;
  display: block;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: rgb(var(--ink-mute));
}

.auth-divider[hidden] {
  display: none;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgb(var(--hairline));
}

.oauth-morph {
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: var(--space-5);
  animation: auth-arrive var(--dur-base) var(--ease-out) both;
}

.oauth-morph[hidden] {
  display: none;
}

.oauth-morph-bar {
  position: relative;
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid rgb(var(--hairline));
  padding: var(--space-3) var(--space-4);
  background: rgb(var(--elevated));
}

.oauth-morph-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: rgb(var(--amber) / 0.16);
  transition: width var(--dur-fast) linear;
}

.oauth-morph-label {
  position: relative;
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: rgb(var(--ink));
}

.oauth-morph-detail {
  margin: var(--space-2) 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: rgb(var(--ink-mute));
}

#oauth-err {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: rgb(var(--red));
  background: var(--red-soft);
  border: 1px solid rgb(var(--red) / 0.35);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.auth-form[hidden] {
  display: none;
}

.auth-form label {
  gap: var(--space-2);
  letter-spacing: var(--tracking-wide);
}

.auth-form label.form-intent {
  font-family: var(--font-ui);
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.5;
}

.auth-form input {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: rgb(var(--ink));
  background: rgb(var(--elevated));
  border: 1px solid rgb(var(--hairline));
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

.auth-form input::placeholder {
  color: rgb(var(--ink-mute));
}

.auth-form input:hover {
  border-color: rgb(var(--ink-mute) / 0.5);
}

.auth-form input:focus {
  outline: none;
  border-color: rgb(var(--accent) / 0.55);
  box-shadow: none;
}

.auth-card :is(a, button, input):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.password-wrap {
  display: flex;
  gap: var(--space-1);
  align-items: stretch;
}

.password-wrap input {
  flex: 1;
}

.toggle-password {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: rgb(var(--ink-mute));
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0 var(--space-2);
  min-width: var(--touch-min);
  cursor: pointer;
  flex: none;
  transition: color var(--dur-fast) var(--ease);
}

.toggle-password:hover,
.toggle-password:focus-visible {
  color: rgb(var(--accent));
}

.form-help {
  margin: calc(-1 * var(--space-2)) 0 0;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
}

.form-help button {
  color: rgb(var(--ink-mute));
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0;
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease);
}

.form-help button:hover {
  color: rgb(var(--accent));
}

.form-err,
.form-note {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  line-height: 1.5;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin: 0;
}

.form-err {
  color: rgb(var(--red));
  background: var(--red-soft);
  border: 1px solid rgb(var(--red) / 0.35);
}

.form-note {
  color: rgb(var(--green));
  background: var(--green-soft);
  border: 1px solid rgb(var(--green) / 0.35);
}

.turnstile-slot:empty {
  display: none;
}

.btn-submit {
  display: block;
  width: 100%;
  min-height: var(--touch-min);
  margin-top: var(--space-1);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: rgb(var(--canvas));
  background: rgb(var(--amber));
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  text-align: center;
}

.btn-submit:hover {
  background-image: linear-gradient(rgb(var(--black) / 0.08) 0 0);
}

.btn-submit[disabled] {
  opacity: 0.55;
  cursor: wait;
  background-image: none;
}

.auth-legal {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: rgb(var(--ink-mute));
  text-align: center;
}

.auth-legal a.link {
  color: rgb(var(--accent));
  border-bottom: 1px solid rgb(var(--accent) / 0.4);
  transition: border-color var(--dur-fast) var(--ease);
}

.auth-legal a.link:hover {
  border-color: rgb(var(--accent));
}

@media (pointer: coarse) {
  .form-help button {
    min-height: var(--touch-min);
  }
}


/* Quiet login flow: reveal the password only after the local email step. */
.auth-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  animation: auth-step-in var(--dur-base) var(--ease-out) both;
}

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

@keyframes auth-step-in {
  from { opacity: 0; transform: translateY(var(--space-1)); }
  to { opacity: 1; transform: none; }
}

.auth-email-echo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: rgb(var(--ink));
}

.auth-email-echo button {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: rgb(var(--ink-mute));
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-email-echo button:hover,
.auth-email-echo button:focus-visible {
  color: rgb(var(--accent));
}