/* ===================================================================
   Auth — the reading room door
   Editorial split: a navy panel of context, a paper card of form.
   =================================================================== */

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

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

/* ---------- Left panel ---------- */
.auth__aside {
  /* This panel is navy in both themes, so its accent cannot follow the
     theme's gold: --gold-bright measured only 3.61:1 here. This clears AA. */
  --gold-on-navy: #eda54e;

  /* Literal, not var(--navy). The token inverts in dark mode -- #1e3a5f
     becomes the light blue #9db8d6 -- while everything painted on this panel
     (the cream wordmark and headline, the gold accent) stays light because it
     is hardcoded above. Following the token put gold on light blue at 1.02:1
     and cream on light blue at 1.81:1: text that is not low-contrast but
     absent. The panel is meant to be dark in both themes, which is what the
     foreground colours here already assume, so it is pinned. The same trap is
     noted on .btn-primary in design-system.css. */
  --auth-panel: #1e3a5f;

  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-8) clamp(2rem, 5vw, var(--space-10));
  background: var(--auth-panel);
  color: #f4f1ea;
  overflow: hidden;
}

/* Faint ruled paper behind the panel — library stationery */
.auth__aside::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 30px,
    rgba(244, 241, 234, 0.055) 30px 31px
  );
  pointer-events: none;
}

.auth__aside > * { position: relative; }

.auth__brand { color: #f4f1ea; }
.auth__brand .wordmark__mark { color: #f4f1ea; }

.auth__aside-body {
  margin-top: auto;
  margin-bottom: auto;
  max-width: 34rem;
}

.auth__aside .eyebrow { color: var(--gold-on-navy); }
.auth__aside .eyebrow::before { background: var(--gold-on-navy); }

.auth__headline {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 500;
  line-height: var(--lead-tight);
  color: #f4f1ea;
  margin: var(--space-5) 0 var(--space-6);
}

.auth__headline em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold-on-navy);
}

.auth__quote {
  padding-left: var(--space-5);
  border-left: 2px solid var(--gold-on-navy);
  font-family: var(--serif);
  font-size: var(--t-md);
  line-height: var(--lead-relaxed);
  color: rgba(244, 241, 234, 0.82);
}

.auth__facts {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(244, 241, 234, 0.16);
  font-size: var(--t-sm);
  color: rgba(244, 241, 234, 0.75);
}

.auth__facts li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  align-items: baseline;
  gap: var(--space-2);
}

.auth__facts .folio { color: var(--gold-on-navy); }

.auth__foot { color: rgba(244, 241, 234, 0.45); }

/* ---------- Right panel ---------- */
.auth__main {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--space-8) var(--gutter);
}

.auth__corner {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
}

.auth__panel { width: 100%; max-width: 26rem; }

.auth__card {
  animation: card-in var(--dur-slow) var(--ease-out) both;
}

.auth__card--hidden { display: none; }

@keyframes card-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.auth__title { font-size: var(--t-2xl); margin: var(--space-4) 0 var(--space-2); }

.auth__sub {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  margin-bottom: var(--space-7);
}

.auth__form { margin-bottom: var(--space-6); }

/* Password field needs room for the reveal button */
.field__wrap { position: relative; }
.field__wrap input { padding-right: 3rem; }

.input-toggle {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  color: var(--ink-faint);
  transition: color var(--dur-fast) var(--ease-soft),
              background-color var(--dur-fast) var(--ease-soft);
}

.input-toggle:hover { color: var(--ink); background: var(--paper-sunk); }
.input-toggle.is-on { color: var(--gold); }

.field__hint {
  margin-top: var(--space-2);
  font-size: var(--t-xs);
  color: var(--ink-faint);
}

/* Inline error — invalid credentials, duplicate email, validation */
.auth__error {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--err-wash);
  border-left: 2px solid var(--err);
  border-radius: var(--r-sm);
  color: var(--err);
  font-size: var(--t-sm);
  line-height: var(--lead-snug);
  animation: shake 320ms var(--ease-soft);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  22%      { transform: translateX(-4px); }
  55%      { transform: translateX(3px); }
  80%      { transform: translateX(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .auth__error { animation: none; }
  .auth__card { animation: none; }
}

/* Submit with a loading state */
.auth__submit { width: 100%; position: relative; }

.auth__spinner {
  display: none;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;   /* linear: constant-rate progress */
}

.auth__submit.is-loading .auth__submit-text { opacity: 0.6; }
.auth__submit.is-loading .auth__spinner { display: block; }

@keyframes spin { to { transform: rotate(360deg); } }

.auth__switch {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
}

.auth__switch-btn {
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }

  .auth__aside {
    gap: var(--space-6);
    padding: var(--space-6) var(--gutter);
  }

  /* Trim the panel to a header on small screens */
  .auth__quote, .auth__facts, .auth__foot { display: none; }
  .auth__aside-body { margin: 0; }
  .auth__headline { font-size: var(--t-xl); margin-bottom: 0; }

  .auth__main { padding-block: var(--space-8); }
}