/* Auth page shell. Centers a single dark form card on the site's
   normal background (hash pattern shows through behind it). No extra
   surface colors, no pattern overlay, no section-level L-brackets,
   no glass container around the card. */

.auth-page {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5rem);
  padding-inline: var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1; /* fill remaining main height so the footer sits at viewport bottom */
  background-color: transparent;
}

/* Surface variants retained only as optional hooks. They no longer
   paint a solid fill across the whole section - the card is the
   centerpiece and the site background carries the context. */
.auth-page--dark,
.auth-page--light { background-color: transparent; }

.auth-page__inner {
  position: relative;
  width: 100%;
  max-width: 32rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* --- Auth card ---------------------------------------------------- */

.auth-card {
  position: relative;
  width: 100%;
  max-width: 28rem;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  background: color-mix(in oklch, var(--surface-dark-999) 94%, transparent);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid color-mix(in oklch, var(--on-dark-foreground) 8%, transparent);
  border-radius: var(--radius-xl);
  box-shadow:
    0 1px 0 color-mix(in oklch, var(--on-dark-foreground) 6%, transparent) inset,
    0 40px 80px -24px rgb(0 0 0 / 35%);

  /* The card always renders on a dark surface. Everything inside it
     reads the on-dark palette regardless of the enclosing page
     surface, so the form stays visually consistent. */
  --color-foreground: var(--on-dark-foreground);
  --color-muted-foreground: var(--on-dark-muted-foreground);
  --color-border: var(--on-dark-border);
  --color-accent: var(--on-dark-accent);
  --color-accent-foreground: var(--on-dark-accent-foreground);
  --color-primary: var(--on-dark-foreground);
  --color-primary-foreground: var(--surface-dark-999);

  color: var(--color-foreground);
}

/* Card-scope L-brackets: reposition so they hug the card edges */
.auth-card::before,
.auth-card::after,
.auth-card > .l-brackets__bl,
.auth-card > .l-brackets__br {
  top: 0.625rem;
}
.auth-card::before { left: 0.625rem; }
.auth-card::after  { right: 0.625rem; }
.auth-card > .l-brackets__bl,
.auth-card > .l-brackets__br {
  bottom: 0.625rem;
  top: auto;
}
.auth-card > .l-brackets__bl { left: 0.625rem; }
.auth-card > .l-brackets__br { right: 0.625rem; }

.auth-card .eyebrow-chip {
  margin-bottom: 1rem;
  border-color: color-mix(in oklch, var(--color-foreground) 15%, transparent);
}

.auth-card__heading {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: var(--font-weight-display);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-foreground);
}

.auth-card__sub {
  margin: 0 0 1.75rem;
  font-size: var(--fs-sm);
  color: var(--color-muted-foreground);
  line-height: var(--lh-snug);
  max-width: 40ch;
}

.auth-card__form { display: block; }

/* --- Below-card footer (inherits the PAGE surface palette) -------- */

.auth-page__footer {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-muted-foreground);
  text-align: center;
}
.auth-page__footer a {
  color: var(--color-foreground);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-page__footer a:hover { color: var(--brand-teal); }

/* --- Wider variant for forms with multi-column layout ------------- */

.auth-card--wide { max-width: 36rem; }

/* --- Secondary link inside the card (e.g. Forgot password) -------- */

.auth-card__link {
  font-size: var(--fs-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-muted-foreground);
}
.auth-card__link:hover { color: var(--brand-teal); }