/* ─────────────────────────────────────────────────────────────
   Zimmerman Web Works — authentication screens
   Navy & camel design language, self-contained (own tokens) so the
   login pages don't depend on the marketing page stylesheets.
   ───────────────────────────────────────────────────────────── */

:root {
  --navy: #1f2d44;
  --navy-2: #283a5a;
  --navy-deep: #16213a;
  --navy-ink: #0f1830;
  --camel: #c08b41;
  --camel-deep: #95672a;
  --camel-light: #d9b06a;
  --ivory: #f6f3ea;
  --line-d: rgba(255, 255, 255, .13);
  --serif: "Newsreader", Georgia, serif;
  --sans: "Spline Sans", system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* The auth screens are a single in-page wizard (picker → passkey sign-in →
   register) animated entirely in JS — no page navigation between steps, so
   there is no cross-document transition (and no background re-render flicker).
   Google/Facebook are the only real navigations and don't need an animation. */

/* Navy backstop on the canvas itself so no transition frame can reveal the
   browser's default (black) background behind the page. scrollbar-gutter keeps
   the viewport width identical across pages so the layout can't jolt mid-fade. */
html {
  background-color: var(--navy);
  scrollbar-gutter: stable;
}

body {
  font-family: var(--sans);
  background: var(--navy);
  color: var(--ivory);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

/* Ambient navy backdrop — mirrors the marketing hero. */
/* Ambient backdrop as its own fixed layer behind the wizard. Since steps
   animate in-page (no navigation), this never re-renders, so the pattern
   stays perfectly still during step changes. */
.auth-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--navy);
}
.auth-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 78% 14%, rgba(192, 139, 65, .16), transparent 42%),
    radial-gradient(circle at 12% 90%, rgba(40, 58, 90, .7), transparent 50%);
}
.auth-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image:
    linear-gradient(var(--line-d) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-d) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(circle at 60% 35%, #000, transparent 72%);
  mask-image: radial-gradient(circle at 60% 35%, #000, transparent 72%);
}

a { color: inherit; text-decoration: none; }

.sk-content {
  position: relative;
  z-index: 2;
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

/* ── Card ── */
.auth-card {
  width: 100%;
  max-width: 432px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--line-d);
  border-radius: 14px;
  padding: 40px 38px 34px;
  box-shadow: 0 40px 90px -38px rgba(0, 0, 0, .7);
  backdrop-filter: blur(8px);
}

/* ── Brand crest ── */
.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  margin-bottom: 46px;
}
.auth-brand .crest {
  width: 54px;
  height: 54px;
  border: 1.5px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
}
.auth-brand .crest::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--camel-light);
  border-radius: 50%;
}
.auth-brand .crest span {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1;
  transform: translateY(1px);
}
.auth-brand .name b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  display: block;
  line-height: 1;
}
.auth-brand .name span {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--camel-light);
  font-weight: 600;
}

/* ── Error pages ── */
.error-code {
  display: block;
  font-family: var(--serif);
  font-size: 68px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--camel-light);
  margin-bottom: 6px;
}

/* ── Heading ── */
.auth-head { text-align: center; margin-bottom: 26px; }
.auth-eyebrow {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--camel-light);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.auth-eyebrow::before,
.auth-eyebrow::after {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}
.auth-head h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 34px;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin-top: 14px;
}
.auth-head h1 em { font-style: italic; color: var(--camel-light); font-weight: 400; }
.auth-head p {
  color: #c4ccda;
  font-size: 15px;
  margin-top: 10px;
  text-wrap: pretty;
}

/* ── Method buttons ── */
.auth-methods {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 6px;
}
.auth-method {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 14px 20px;
  border-radius: 5px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  border: 1px solid var(--line-d);
  background: rgba(255, 255, 255, .04);
  color: var(--ivory);
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.auth-method:hover {
  border-color: var(--camel-light);
  background: rgba(255, 255, 255, .07);
  transform: translateY(-1px);
}
.auth-method:active { transform: translateY(0); }
.auth-method svg { width: 20px; height: 20px; flex: none; }

/* Passkey = recommended primary action */
.auth-method.primary {
  background: var(--camel);
  border-color: var(--camel);
  color: #1c1206;
}
.auth-method.primary:hover { background: var(--camel-light); border-color: var(--camel-light); }

/* Dev-only methods read as muted */
.auth-method.muted { color: #aab4c6; }

/* ── Divider ── */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 18px;
  color: #8b93a3;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-d);
}

/* ── Form fields (passkey signup) ── */
.auth-form { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.auth-field { display: flex; flex-direction: column; gap: 7px; text-align: left; }
.auth-field label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #aab4c6;
}
.auth-field input {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ivory);
  background: rgba(0, 0, 0, .22);
  border: 1px solid var(--line-d);
  border-radius: 5px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.auth-field input::placeholder { color: rgba(255, 255, 255, .32); }
.auth-field input:focus {
  outline: none;
  border-color: var(--camel-light);
  background: rgba(0, 0, 0, .3);
}
.auth-field input.err { border-color: #e2706b; }

/* ── Tabs (sign in / create) ── */
.auth-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 22px;
  background: rgba(0, 0, 0, .22);
  border: 1px solid var(--line-d);
  border-radius: 8px;
}
.auth-tab {
  flex: 1;
  padding: 9px 12px;
  text-align: center;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #aab4c6;
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.auth-tab[aria-selected="true"] { background: var(--camel); color: #1c1206; }

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

.auth-lead {
  text-align: center;
  color: #c4ccda;
  font-size: 14.5px;
  margin-bottom: 18px;
  text-wrap: pretty;
}

/* ── Wizard (sign-in ⇄ register) ──
   The active step is in normal flow, so the card sizes itself with CSS at
   first paint (no JS height, no load-time layout shift — important so the
   cross-page view transition doesn't capture a mid-resize frame). Inactive
   steps overlay out of flow. JS animates the height only on a real switch. */
.auth-wizard {
  position: relative;
  transition: height .5s var(--ease);
}
.wizard-step {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateY(14px) scale(.985);
  transition: opacity .3s var(--ease), transform .45s var(--ease);
  pointer-events: none;
}
.wizard-step.is-active {
  position: relative;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  /* Slight delay so the outgoing step clears before this one settles in. */
  transition: opacity .4s var(--ease) .12s, transform .5s var(--ease) .12s;
}

/* ── Text link (back to sign in) ── */
.auth-textlink {
  all: unset;
  cursor: pointer;
  display: block;
  width: 100%;
  margin-top: 18px;
  text-align: center;
  font-family: var(--sans);
  font-size: 13.5px;
  color: #aab4c6;
  transition: color .2s var(--ease);
}
.auth-textlink:hover { color: var(--camel-light); }

@media (prefers-reduced-motion: reduce) {
  .auth-wizard,
  .wizard-step,
  .wizard-step.is-active { transition: none; }
}

/* ── Status + helper text ── */
/* Empty status reserves no space, so the card hugs the buttons like /auth/login.
   Spacing only appears once a message is present. */
.auth-status {
  margin: 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--camel-light);
}
.auth-status:not(:empty) {
  min-height: 1.2em;
  margin-top: 14px;
}
.auth-error { color: #f0a6a2; font-size: 13px; text-align: left; }
.auth-note {
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
  color: #8b93a3;
}
.auth-note a { color: var(--camel-light); border-bottom: 1px solid rgba(217, 176, 106, .4); padding-bottom: 1px; }
.auth-note a:hover { color: #fff; border-color: var(--camel-light); }


/* ── Flash messages ── */
.sk-flash-messages {
  width: 100%;
  max-width: 432px;
  margin: 0 auto 16px;
  position: relative;
  z-index: 2;
}
.sk-flash {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  border: 1px solid var(--line-d);
  background: rgba(255, 255, 255, .05);
  color: var(--ivory);
  margin-bottom: 10px;
}
.sk-flash-error { border-color: rgba(226, 112, 107, .5); background: rgba(226, 112, 107, .12); }
.sk-flash-success { border-color: rgba(120, 190, 130, .5); background: rgba(120, 190, 130, .12); }
.sk-flash-dismiss {
  all: unset;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: inherit;
  opacity: .6;
}
.sk-flash-dismiss:hover { opacity: 1; }

@media (max-width: 480px) {
  .auth-card { padding: 32px 24px 28px; }
  .auth-head h1 { font-size: 28px; }
}