/* =========================================================
   Page — Auth (login · register · password)
   ---------------------------------------------------------
   One centred card on the graphite ground, with a single brass
   pool of light behind it. No split-screen marketing panel:
   somebody on this page has already decided, and a column of
   selling copy beside the password field only delays them.
   ========================================================= */

.auth-body {
  min-block-size: 100dvh;
}

.auth {
  position: relative;
  display: flex;
  flex-direction: column;
  min-block-size: 100dvh;
  padding: var(--space-5);
  gap: var(--space-8);
  /* The glow is wider than the viewport on a phone by design. clip lets it
     bleed without becoming something to scroll to; clip rather than hidden
     so the vertical axis stays visible. */
  overflow-x: clip;
}

/* The one atmospheric touch: brass, low, behind the card. */
.auth__glow {
  position: absolute;
  inset-block-start: -14vh;
  /*
     Centred by auto margins, not by a translate off a logical edge.
     inset-inline-start: 50% resolves to right: 50% in Arabic, and the
     -50% translate then walks the pool further the same way: it landed
     507px past the left edge, which in RTL is scrollable overflow. Every
     auth page — sign in, register, reset, the store wizard — opened with
     a sideways scrollbar and the whole layout pushed off centre.
  */
  inset-inline: 0;
  margin-inline: auto;
  inline-size: min(1100px, 140vw);
  block-size: min(760px, 92vh);

  /*
    A mesh, not a pool.

    One centred radial is a spotlight, and a spotlight behind a card
    reads as a stage rather than as a room. Four offset radials at
    different sizes overlap into a field with no findable centre —
    which is what a mesh gradient is, and why it reads as light in a
    space rather than as a lamp pointed at something.

    Every stop is a brand token: teal at the top where the mark's
    arrow head is, brass low and wide, blue at the foot. The ramp is
    the logo's own, spent here as atmosphere rather than as a line —
    which is the one use the trace rail does not claim.

    Four layers of radial at 92vh is still one paint, and the whole
    thing is behind a card that blurs it again.
  */
  background:
    radial-gradient(38% 42% at 18% 22%, color-mix(in srgb, var(--color-growth) 22%, transparent) 0%, transparent 72%),
    radial-gradient(44% 38% at 82% 16%, color-mix(in srgb, var(--color-primary) 24%, transparent) 0%, transparent 74%),
    radial-gradient(52% 48% at 50% 88%, color-mix(in srgb, var(--color-gold) 20%, transparent) 0%, transparent 70%),
    radial-gradient(36% 34% at 72% 62%, color-mix(in srgb, var(--color-primary-deep) 26%, transparent) 0%, transparent 68%);

  filter: blur(46px);
  pointer-events: none;
}

/*
  The mesh drifts, very slowly, and only where motion is welcome.

  Twenty-two seconds for one pass and never more than 3% of travel:
  at that rate nobody watching the sign-in form sees it move, and
  anybody who looks up after typing their password finds the light
  somewhere slightly different. Transform only — the gradient itself
  is never recomputed.
*/
@media (prefers-reduced-motion: no-preference) {
  .auth__glow {
    animation: auth-mesh 22s var(--ease-in-out) infinite alternate;
  }
}

@keyframes auth-mesh {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to { transform: translate3d(1.5%, 1%, 0) scale(1.06); }
}

.auth__bar,
.auth__foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  inline-size: min(100%, var(--container-max));
  margin-inline: auto;
}

.auth__main {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.auth__foot {
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.auth__foot p { margin: 0; }
.auth__foot nav {
  display: flex;
  gap: var(--space-4);
}
.auth__foot a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.auth__foot a:hover {
  color: var(--color-text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------
   The card
   --------------------------------------------------------- */
/* ---------------------------------------------------------
   The card

   It floats: the ground behind it is a wash rather than a
   surface, so the card has to carry its own separation. That
   is --shadow-deep — the platform's «picked up» elevation,
   spent here because this is the one screen with a single
   object on it and nothing else to compete for depth.

   The backdrop filter is the second half of floating. The
   glow behind the card is blurred at the source, but the
   surface is not fully opaque in light mode, so a saturating
   backdrop keeps the pool of brass reading *through* the
   card rather than being covered by it. Browsers without it
   lose the tint and nothing else.
   --------------------------------------------------------- */
.auth-card {
  position: relative;
  inline-size: min(100%, 27rem);
  padding: var(--space-panel-loose) var(--space-panel);
  border: 1px solid var(--color-line);
  border-block-start: 1px solid var(--color-line-gold);
  border-radius: var(--radius-premium);
  background: var(--color-surface);
  box-shadow: var(--shadow-deep);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
}

/* The lit top edge. One hairline of white at 8%, which is what
   a real surface catching light from above looks like — and
   the reason the card reads as raised rather than pasted on. */
.auth-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: var(--space-8);
  block-size: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(255 255 255 / 0.09) 50%,
    transparent 100%
  );
  pointer-events: none;
}

.auth-card__head {
  margin-block-end: var(--space-6);
}
.auth-card__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display-ar);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-text);
}
.auth-card__note {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-snug);
}

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

.auth-form__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-xs);
}
.auth-form__row a {
  color: var(--color-primary-text);
  text-decoration: none;
}
.auth-form__row a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The small print under a submit button. */
.auth-form__note {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: var(--lh-snug);
  text-align: center;
}

.auth-card__foot {
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-line);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  text-align: center;
}
.auth-card__foot a {
  color: var(--color-primary-text);
  font-weight: var(--fw-bold);
  text-decoration: none;
}
.auth-card__foot a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 480px) {
  .auth { padding: var(--space-4); gap: var(--space-6); }
  .auth-card { padding: var(--space-6) var(--space-5); }
  .auth__foot { justify-content: center; text-align: center; }
}

/* ---------------------------------------------------------
   The one action

   Full width, and the only place on an auth screen that
   carries the brand gradient. --gradient-primary was defined
   in §7 and spent nowhere; a single filled control on an
   otherwise quiet card is exactly the large surface it was
   written for, and there is no small text sitting on it whose
   contrast the sheen could disturb.
   --------------------------------------------------------- */
.auth-form .btn--primary {
  --btn-bg: transparent;
  --btn-sheen: var(--gradient-primary);
  --btn-shadow: var(--shadow-soft);
  padding-block: 0.85rem;
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
}
.auth-form .btn--primary:hover {
  --btn-shadow: var(--shadow-deep);
  filter: saturate(112%);
}

/* A required field says so where the eye already is — on the
   label, not in a legend under the form. */
.auth-form .field__required {
  margin-inline-start: 0.15em;
  color: var(--color-danger);
}
/* ---------------------------------------------------------
   Glass

   A backdrop-filter only reads as glass if the surface is not
   opaque — blurring something and then covering it produces a
   card with an expensive no-op behind it. The surface drops to
   88% and the mesh comes through at exactly the strength the
   blur left it.

   Guarded on @supports: a browser without backdrop-filter gets
   the solid surface it had before, which is correct rather than
   a translucent card over an unblurred gradient.
   --------------------------------------------------------- */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .auth-card {
    background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  }
}

/* The edge. A glass panel catches light on the side it is lit
   from and loses it on the other, which one flat border cannot
   say — so the inline-start edge is brighter than the rest. */
.auth-card {
  border-inline-start-color: color-mix(in srgb, var(--color-line-strong) 70%, transparent);
}