/* auth-redesign-v1 — W-74-1 — Saadjie signup / login surface redesign. */
/*
 * Planning: .archon/queued-builds/WAVE-74-signup-login-redesign.md
 *
 * Targets the markup rendered by:
 *   - src/views/dashboard/signup.ejs   (parent signup, W5 baseline + W74 skin)
 *   - src/views/dashboard/login.ejs    (parent login,  W6 baseline + W74 skin)
 *
 * Class taxonomy (auth-redesign-v1):
 *   .auth-redesign                 — outer <section> wrapper, centred column
 *   .auth-redesign--signup         — signup-page modifier
 *   .auth-redesign--login          — login-page modifier
 *   .auth-redesign__hero           — eyebrow + headline + lead column
 *   .auth-redesign__eyebrow        — small uppercase "Sign up" / "Sign in" label
 *   .auth-redesign__headline       — serif H2 (Cormorant Garamond)
 *   .auth-redesign__lead           — supporting paragraph
 *   .auth-redesign__card           — primary form card (white surface)
 *   .auth-redesign__banner         — success / error / info flash row
 *   .auth-redesign__banner--success
 *   .auth-redesign__banner--error
 *   .auth-redesign__banner--info
 *   .auth-redesign__sockets        — social-login button row container
 *   .auth-redesign__sockets-heading — sr-only heading for the socket group
 *   .auth-redesign__socket         — single social-login <button> (disabled)
 *   .auth-redesign__socket--google
 *   .auth-redesign__socket--apple
 *   .auth-redesign__socket--facebook
 *   .auth-redesign__socket-icon    — leading mono glyph inside the button
 *   .auth-redesign__socket-label   — visible button label text
 *   .auth-redesign__socket-soon    — "Coming soon" pill on each disabled socket
 *   .auth-redesign__divider        — horizontal "or" divider between sockets + form
 *   .auth-redesign__divider-label  — centred "or" word over the rule
 *   .auth-redesign__form           — <form> element wrapper (flex column)
 *   .auth-redesign__rules          — inline password-requirements list
 *   .auth-redesign__rules-heading  — small label above the rules list
 *   .auth-redesign__rule           — single <li> rule row
 *   .auth-redesign__rule-icon      — leading check / dot glyph
 *   .auth-redesign__actions        — submit row + alt-link cluster
 *   .auth-redesign__submit         — primary submit button
 *   .auth-redesign__alt            — "already have an account?" sibling-link block
 *   .auth-redesign__alt-link       — the actual <a>
 *   .auth-redesign__forgot         — login-only "forgot password?" socket link
 *
 * WHY this is a NEW stylesheet (not appended to dashboard.css): Phase D of
 * the redesign system (W68→W74) carves each parent-facing surface into its
 * own focused component stylesheet that sits cleanly on top of the W56–W67
 * token + primitive layers. Carving the auth surfaces here means a future
 * auth rotation touches ONE file and the W74 audit can grep the
 * auth-redesign-v1 marker without parsing dashboard.css (which still owns
 * the legacy .auth / .auth__form rules so old route paths keep working
 * if the redesigned templates have not yet been swapped in everywhere).
 *
 * WHY no raw hex / rgba in this file: ANTI-RAW-VALUE proof-gate (W56)
 * rejects raw colour literals in any non-token file. Every colour reads
 * through var(--color-*), every spacing through var(--space-*), every
 * radius through var(--radius-*), every shadow through var(--shadow-*),
 * every duration / easing through the compound --transition-* presets.
 *
 * WHY mobile-first stack: the W26 mobile-responsiveness baseline targets
 * 320–414px Android viewports first. The auth column is centred at a
 * comfortable reading width on every viewport; the sockets stack into a
 * single column on phones and flip into a 3-up row at tablet (≥640px)
 * where the extra horizontal space lets the brand glyphs breathe.
 *
 * WHY social-login button SOCKETS (disabled, not live): the W74 spec
 * explicitly defers the actual OAuth wiring to W125+. We ship the visual
 * sockets now so the layout, focus order, and brand glyph cadence are
 * locked in BEFORE the live OAuth flows arrive — that way W125 only has
 * to swap the disabled attribute for a live href without touching the
 * surrounding layout. The `[aria-disabled="true"]` selector greys the
 * button + a small "Coming soon" pill makes the deferred state legible
 * to humans, not just AT users.
 *
 * WHY the inline password-rules list on signup (vs. a tooltip / on-blur
 * popover): the W55 t04 visual-taste audit flagged the legacy "Password
 * (at least 8 characters)" inline label as too easy to miss. A persistent
 * <ul> below the field keeps every requirement visible from first focus
 * to submission — friction reduced exactly as the W74 brief asks for.
 *
 * FLOW: tokens/* → reset.css → cards.css → motion.css → radius-shadow.css
 *       → dashboard.css → auth.css (this file).
 *       auth.css sits ABOVE the legacy dashboard.css so .auth-redesign__*
 *       selectors override the legacy .auth__* rules without specificity
 *       gymnastics. The legacy .auth class is left untouched on the
 *       redesigned templates so a partial rollback (or a smoke test that
 *       only loads dashboard.css) still styles the form usably.
 *
 * CONSTRAINT: WCAG 1.4.11 + 2.4.7 — every coloured text + background pair
 * below sits inside a token pair pre-audited by W58 (contrast audit). The
 * focus ring composes through var(--shadow-focus-ring) so the visible
 * focus rule survives reduced-motion + high-contrast user overrides.
 */

/* ============================================================
 * Page-level wrapper
 * ============================================================ */

.auth-redesign {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-block: var(--space-6);
  padding-inline: var(--content-padding-x);
  max-width: 32rem;
  margin-inline: auto;
  color: var(--color-text);
  font-family: var(--font-family-base);
}

/* ============================================================
 * Hero (eyebrow + headline + lead)
 * ============================================================ */

.auth-redesign__hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: center;
}

.auth-redesign__eyebrow {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-dark);
}

.auth-redesign__headline {
  margin: 0;
  /* WHY Cormorant Garamond (--font-family-heading): mirrors the W68 public
     profile hero + the W70 dashboard greeting so a returning user sees one
     brand voice across signup → public page → dashboard. The serif weight
     dominates the page without needing a heavy display-size font. */
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

.auth-redesign__lead {
  margin: 0;
  font-size: var(--font-size-base);
  line-height: var(--line-height-loose);
  color: var(--color-text-muted);
}

/* ============================================================
 * Card (form surface)
 * ============================================================ */

.auth-redesign__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-4);
  background-color: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
 * Banner (success / error / info)
 * ============================================================ */

.auth-redesign__banner {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.auth-redesign__banner--success {
  background-color: var(--color-success-bg);
  border-color: var(--color-success);
  color: var(--color-success);
}

.auth-redesign__banner--error {
  background-color: var(--color-danger-bg);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.auth-redesign__banner--info {
  background-color: var(--color-brand-light);
  border-color: var(--color-brand);
  color: var(--color-brand-dark);
}

/* ============================================================
 * Social-login sockets (W74 — placeholders, OAuth wired in W125+)
 * ============================================================
 *
 * WHY a real <button type="button"> per socket (not a styled <div>):
 * keeping the disabled state on a real button means screen readers
 * announce "Continue with Google, dimmed" rather than "group" — the
 * affordance is honest about the deferred wiring. When W125 swaps
 * `disabled aria-disabled="true"` for an `href="/auth/google"`, the
 * markup changes from <button> to <a>; the class taxonomy stays.
 */

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

.auth-redesign__sockets-heading {
  /* WHY sr-only (visually hidden, AT-readable): the social-login group
     reads as "Continue with..." to AT users but needs no on-screen label
     because the visible buttons themselves carry the provider name. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.auth-redesign__socket {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  font-family: var(--font-family-base);
  background-color: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
  width: 100%;
}

.auth-redesign__socket:hover:not([aria-disabled="true"]) {
  background-color: var(--color-bg-subtle);
  border-color: var(--color-text);
}

.auth-redesign__socket:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.auth-redesign__socket[aria-disabled="true"],
.auth-redesign__socket:disabled {
  background-color: var(--color-bg-subtle);
  color: var(--color-text-muted);
  border-color: var(--color-border);
  cursor: not-allowed;
}

.auth-redesign__socket-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  line-height: 1;
}

.auth-redesign__socket-label {
  flex: 1 1 auto;
  text-align: left;
}

.auth-redesign__socket-soon {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  border-radius: var(--radius-pill);
  background-color: var(--color-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================================
 * Divider ("or")
 * ============================================================ */

.auth-redesign__divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  border: 0;
  color: var(--color-text-muted);
}

.auth-redesign__divider::before,
.auth-redesign__divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background-color: var(--color-border);
}

.auth-redesign__divider-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
}

/* ============================================================
 * Email/password form
 * ============================================================ */

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

/* ============================================================
 * Inline password-requirements list (signup only)
 * ============================================================
 *
 * WHY a real <ul> (not a <div> of <p>): the requirement list is a list
 * by both spec and semantics — AT users get "List, 3 items" without us
 * having to add role="list". */

.auth-redesign__rules {
  list-style: none;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.auth-redesign__rules-heading {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.auth-redesign__rule {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text);
}

.auth-redesign__rule-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  text-align: center;
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-dark);
}

/* ============================================================
 * Actions row (submit button + alt link)
 * ============================================================ */

.auth-redesign__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.auth-redesign__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-base);
  line-height: var(--line-height-tight);
  background-color: var(--color-brand);
  color: var(--color-text-inverse);
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
  width: 100%;
}

.auth-redesign__submit:hover {
  background-color: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
}

.auth-redesign__submit:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.auth-redesign__alt {
  margin: 0;
  font-size: var(--font-size-sm);
  text-align: center;
  color: var(--color-text-muted);
}

.auth-redesign__alt-link {
  color: var(--color-brand-dark);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
}

.auth-redesign__alt-link:hover {
  color: var(--color-brand);
}

.auth-redesign__forgot {
  margin: 0;
  font-size: var(--font-size-sm);
  text-align: right;
}

.auth-redesign__forgot a {
  color: var(--color-text-muted);
  text-decoration: underline;
}

.auth-redesign__forgot a:hover {
  color: var(--color-brand-dark);
}

/* ============================================================
 * Tablet+ breakpoint — sockets flip into a 3-up row
 * ============================================================ */

@media (min-width: 640px) {
  .auth-redesign {
    padding-block: var(--space-7);
  }

  .auth-redesign__sockets {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .auth-redesign__socket {
    flex: 1 1 0;
    /* WHY a min-width: keeps three sockets on one row at 640–820px without
       the labels wrapping. Below ~640px the column stack reads better. */
    min-width: 8rem;
  }

  .auth-redesign__socket-label {
    text-align: center;
  }

  .auth-redesign__socket-soon {
    display: none;
  }

  .auth-redesign__submit {
    width: auto;
    align-self: flex-start;
    min-width: 12rem;
  }

  .auth-redesign__actions {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}