/* ==========================================================================
   Signup / login card — brand-portal landing.

   Rewritten to sit inside the landing's own system instead of beside it. The
   previous file was three stylesheets stacked in source order: the card's
   original dark "liquid glass" theme, a later light-theme pass written for a
   white page, and a partial dark "restoration" bolted on the end. The light
   layer still won on the parts the restoration missed, which is why the inputs
   rendered as white slabs with an invisible "Voir" button on a navy card.

   Everything here now resolves against neptune.css's tokens. The shapes are the
   landing's own: .price gives the card (1px --hair, radius 20, 4% white fill),
   .btn--solid gives the submit (lemon pill, mono uppercase), .eyebrow gives the
   field labels. No backdrop-filter — the page behind is a flat --abyss, so it
   cost a compositing layer and bought nothing.

   The three social buttons keep their brand fills on purpose: Google and Apple
   both require their own sign-in colours, so they are the one deliberate break
   from the palette. Facebook's #1877f2 is darkened to #1461cf because white on
   the stock blue is 4.23:1 and fails AA.

   Class names and the DOM shape are unchanged — auth-card.js keys off
   .auth-tab / .auth-panel / .is-active / li.ok / [data-pw-toggle].
   ========================================================================== */

.auth-section {
  position: relative;
  padding: 0;
  text-align: left;
}

.auth-wrap {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: clamp(2rem, 5vw, 5rem);
  /* The card runs ~1100px on the signup tab and the pitch ~400px; top-aligned
     that left two thirds of the left column empty. */
  align-items: center;
}

/* --- left column: the pitch --------------------------------------------- */

.auth-intro { text-align: left; padding-top: 0.4rem; }
/* .h2 already carries the landing's display face, size ramp and blood-red
   treatment. The old file re-declared all three plus a white text-shadow,
   which lit a halo around the letterforms. */
.auth-intro h2 { margin-bottom: 1.6rem; }

.auth-points {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}
.auth-points li {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--cream-soft);
  font-size: 0.98rem;
  line-height: 1.5;
  text-align: left;
}
/* The landing marks list items with a mono "+" (see .price li). Same here, so
   the two card stacks in the page read as one family. */
.auth-points .tick {
  flex: 0 0 auto;
  font: 700 1rem/1.5 var(--font-mono);
  color: var(--accent);
}
.auth-point-text { flex: 1; }
.auth-point-text strong { color: var(--cream); font-weight: 600; }

/* --- the card ------------------------------------------------------------ */

.auth-card {
  position: relative;
  border: 1px solid var(--hair);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  padding: 0.5rem;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.8);
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  /* No fill. A grey track was rejected twice -- first the slate #F1F5F9, then
     the true neutral #F4F4F4 -- so the strip carries no ground of its own and
     the segmented control reads entirely from the active pill, which is the
     design system's pattern (`.design-page-btn.active`, dashboard line 1771:
     `background: var(--accent-blue); color: #fff`, inactive transparent). */
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: 999px;
}
.auth-tab {
  background: transparent;
  border: 0;
  cursor: pointer;
  /* --cream-soft, not --cream-dim: the inactive tab sits on the --deep-2 track
     rather than on the page, and the track is darker than the ground, so dim
     measured 4.34:1 there -- under AA. Soft is 9.45:1. What separates the two
     tabs is the active one's raised white pill and inset border, not a faint
     text colour, so nothing is lost by lifting this. */
  color: var(--cream-soft);
  padding: 0.85rem 1rem;
  min-height: 44px;
  border-radius: 999px;
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.auth-tab:hover { color: var(--cream-soft); }
/* A slate wash reads as "raised" against the dark track, but against the light
   theme's #F1F5F9 track it is nearly the same value -- the selected tab stopped
   looking selected. --veil is the raised surface in both (white on light, a 5%
   lift on dark), which is what the pill is trying to say. */
/* The brand accent, not a wash: --info is --accent-blue #05213D on light and
   Neptune's --glow-hi #1d4ed8 on dark. White label measures 16.26:1 and
   6.70:1. The inset border is gone -- a filled pill does not need outlining. */
.auth-tab.is-active {
  background: var(--info);
  color: #fff;
  box-shadow: none;
}

.auth-panel {
  display: none;
  padding: 1.35rem 1.15rem 1rem;
  text-align: left;
}
.auth-panel.is-active { display: block; animation: authFadeUp 0.45s var(--ease); }
/* The old file animated `fadeUp`, which was never declared anywhere -- an
   undefined animation-name is simply ignored, so switching tabs was a hard cut. */
@keyframes authFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-panel.is-active { animation: none; }
}

/* --- fields --------------------------------------------------------------- */

.auth-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}
.auth-row label {
  font: 700 10.5px/1 var(--font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.auth-row .input-wrap { position: relative; }
.auth-row input {
  width: 100%;
  min-height: 48px;
  padding: 0.85rem 0.9rem;
  background: var(--veil);
  border: 1px solid var(--hair);
  border-radius: 12px;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.auth-row input::placeholder { color: var(--cream-dim); }
.auth-row input:focus {
  outline: 0;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.22);
}
/* Password fields carry a "Voir" button inside the box. Keyed on the wrapper,
   not on [type=password]: the toggle flips the input to type=text, which would
   drop the reserved room exactly when the characters are visible. Sized for
   the wider of the two labels, "Masquer" (73 px, plus the 6 px offset). */
.auth-row .input-wrap:has(.pw-toggle) input { padding-right: 5.4rem; }

.auth-row .pw-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--cream-dim);
  font: 700 10.5px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.75rem 0.6rem;
  border-radius: 8px;
  min-height: 44px;
}
.auth-row .pw-toggle:hover { color: var(--cream); }

.auth-forgot {
  display: block;
  text-align: right;
  margin-top: 0.45rem;
  font-size: 0.8rem;
  color: var(--cream-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-forgot:hover { color: var(--cream); }

/* --- password checklist --------------------------------------------------- *
 * Mirrors the server validators (MinimumLength=12 + ComplexityValidator). The
 * server stays the judge; this is only the live hint.
 * -------------------------------------------------------------------------- */

.pw-checks {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 0.9rem;
}
.pw-checks li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12px;
  line-height: 1.4;
  color: var(--cream-dim);
  transition: color 0.2s var(--ease);
}
.pw-checks li:first-child { grid-column: 1 / -1; }
.pw-checks .pc-ic {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--hair);
  display: inline-grid;
  place-items: center;
  font: 800 9px/1 var(--font-body);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.pw-checks li.ok { color: var(--cream); }
.pw-checks li.ok .pc-ic {
  border-color: var(--cta);
  background: var(--cta);
  color: var(--on-cta);
}
.pw-checks li.ok .pc-ic::before { content: '\2713'; }

/* --- submit --------------------------------------------------------------- */

.auth-submit {
  width: 100%;
  margin-top: 0.6rem;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.05rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  background: var(--cta);
  color: var(--on-cta);
  font: 700 13px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}
.auth-submit:hover { transform: translateY(-2px); filter: brightness(1.12); }
.auth-submit:active { transform: none; }
.auth-submit .arrow { transition: transform 0.25s var(--ease); }
.auth-submit:hover .arrow { transform: translateX(3px); }
/* Not `opacity` on the fill: a translucent --cta over navy reads as a dirty
   wash rather than as "off". A flat muted surface says disabled and stays
   legible. */
.auth-submit:disabled {
  cursor: not-allowed;
  transform: none;
  background: rgba(148, 163, 184, 0.14);
  border-color: var(--hair);
  color: var(--cream-dim);
}
.auth-submit:disabled:hover { transform: none; background: rgba(148, 163, 184, 0.14); }

.auth-fineprint {
  text-align: center;
  margin: 0.9rem 0 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--cream-dim);
}
.auth-fineprint a,
.auth-linklike {
  color: var(--cream-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.auth-fineprint a:hover, .auth-linklike:hover { color: var(--cream); }
.auth-linklike {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

/* --- social --------------------------------------------------------------- */

.auth-social-stack { display: grid; gap: 0.5rem; }
.auth-social-btn {
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.8rem 1.1rem;
  border-radius: 12px;
  border: 1px solid transparent;
  background: #fff;
  color: #1f2937;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  transition: transform 0.2s var(--ease), filter 0.2s var(--ease);
}
.auth-social-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.auth-social-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.auth-social-btn.is-apple { background: #000; color: #fff; border-color: rgba(255, 255, 255, 0.22); }
/* #1877f2 is only 4.23:1 against white text; this is the same hue at AA. */
.auth-social-btn.is-facebook { background: #1461cf; color: #fff; }

.auth-or {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 1rem 0;
  color: var(--accent);
  font: 700 10px/1 var(--font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--hair); }

/* --- messages ------------------------------------------------------------- */

.auth-error {
  margin: 0 0 0.9rem;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  background: rgba(152, 24, 27, 0.22);
  border: 1px solid rgba(244, 104, 90, 0.45);
  color: var(--blood-hi);
  font-size: 13.5px;
  line-height: 1.45;
}
.auth-error::before {
  content: '!';
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blood-hi);
  color: var(--on-blood);
  display: grid;
  place-items: center;
  font: 700 12px/1 var(--font-body);
}
.auth-notice {
  margin: 0 0 0.9rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  background: rgba(148, 163, 184, 0.14);
  border: 1px solid var(--hair);
  color: var(--cream-soft);
  font-size: 13.5px;
  line-height: 1.45;
}

/* --- email verification step ---------------------------------------------- */

.auth-verify-intro {
  margin: 0.25rem 0 1.1rem;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--cream-soft);
}
.auth-verify-intro strong { color: var(--cream); word-break: break-all; }
.auth-code-input {
  text-align: center;
  font-family: var(--font-mono) !important;
  font-size: 24px !important;
  font-weight: 700;
  letter-spacing: 0.45em;
  text-indent: 0.45em;
}

/* --- narrow --------------------------------------------------------------- */

@media (max-width: 900px) {
  .auth-wrap { grid-template-columns: 1fr; gap: 2.2rem; }
  .auth-card { max-width: 520px; margin-inline: auto; width: 100%; }
  .auth-intro { max-width: 520px; margin-inline: auto; }
}

@media (max-width: 700px) {
  .auth-panel { padding: 1.2rem 0.9rem 0.9rem; }
  .auth-points li { font-size: 1.02rem; }
  /* Two columns of 12px hints wrap to three lines each on a phone. */
  .pw-checks { grid-template-columns: 1fr; }
  .pw-checks li:first-child { grid-column: auto; }
}