/* The sign-in pages (login, register, reset, recovery, 2FA, verify email):
 * www's "Night and signal" brand around the panel's own form.
 *
 * Loaded by view/site/_auth-head.php after panel.css + da-panel.css and
 * scoped to body.auth, so the panel's controls, flashes and the Google
 * button stay exactly as the panel draws them. The card keeps the system
 * stack (the web app's face); the brand is the night ground, the orange
 * edge and the warm gradient on the one primary action.
 *
 * Values tokens.css has no name for (night-deep, the gradient, the grain)
 * are the same ones marketing.css and docs.css declare. Glows are radial
 * gradients, never blur.
 */

body.auth {
  --night:         #1b2340;
  --night-deep:    #10152a;
  --on-night-mute: #a9aec4;                       /* 7:1 on night */
  --grad-warm:     linear-gradient(180deg, #f9c726, #f5841f);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  position: relative; isolation: isolate;
  padding: 32px 16px;
  background:
    radial-gradient(70% 60% at 82% 108%, rgba(245, 132, 31, .30) 0%, rgba(245, 132, 31, 0) 62%),
    radial-gradient(60% 55% at 8% -6%, #34427a 0%, rgba(52, 66, 122, 0) 64%),
    linear-gradient(180deg, var(--night-deep) 0%, var(--night) 55%, #1f2848 100%);
  background-attachment: fixed;
}
/* grain and a masked 80px grid, under the card */
body.auth::before, body.auth::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; }
body.auth::before { background-image: var(--grain); background-size: 220px; opacity: .10; mix-blend-mode: overlay; }
body.auth::after {
  background-image:
    linear-gradient(rgba(244, 243, 239, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 243, 239, .055) 1px, transparent 1px);
  background-size: 80px 80px; background-position: center top;
  -webkit-mask-image: radial-gradient(75% 70% at 50% 45%, #000 25%, transparent 100%);
          mask-image: radial-gradient(75% 70% at 50% 45%, #000 25%, transparent 100%);
}

/* The card: white, a 3px orange top edge, a long soft drop. */
body.auth .auth-card {
  border: 0; border-top: 3px solid #f5841f; border-radius: 12px;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .6), 0 2px 6px rgba(16, 21, 42, .25);
}

/* Links in the card: orange-ink, 4.9:1 on white. */
body.auth .auth-card a:not(.btn) { color: var(--orange-ink); font-weight: 600; }
body.auth .auth-card a:not(.btn):hover { color: #9a4507; }

/* The primary action: www's warm gradient with navy text (a light fill,
   never white text) and the slide-up fill on hover. The Google button,
   .btn-secondary (Back) and the small resend button keep the panel's look. */
body.auth .auth-card button:not(.btn-secondary):not(.btn-google):not(.btn-sm),
body.auth .auth-card a.btn:not(.btn-google) {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--grad-warm); color: #1b2340; border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 2px rgba(16, 21, 42, .18);
  min-height: 44px; font-weight: 700;
}
body.auth .auth-card button:not(.btn-secondary):not(.btn-google):not(.btn-sm)::after,
body.auth .auth-card a.btn:not(.btn-google)::after {
  content: ""; position: absolute; inset: -2px; z-index: -1;
  background: #f07a12; transform: translateY(101%);
  transition: transform .42s cubic-bezier(.2, .8, .2, 1);
}
body.auth .auth-card button:not(.btn-secondary):not(.btn-google):not(.btn-sm):hover,
body.auth .auth-card a.btn:not(.btn-google):hover { background: var(--grad-warm); color: #1b2340; text-decoration: none; }
body.auth .auth-card button:not(.btn-secondary):not(.btn-google):not(.btn-sm):hover:not(:disabled)::after,
body.auth .auth-card a.btn:not(.btn-google):hover::after { transform: none; }
body.auth .auth-card button:disabled { opacity: .55; cursor: not-allowed; }
/* A second action beside the first is the panel's navy, so only one glows. */
body.auth .auth-card .btn-row a.btn + a.btn { background: var(--dark); color: #fff; }
body.auth .auth-card .btn-row a.btn + a.btn::after { background: var(--primary); }
body.auth .auth-card .btn-row a.btn + a.btn:hover { background: var(--dark); color: #fff; }

/* Register steps: the current step is marked in orange. */
body.auth .auth-steps li.active { border-color: #f5841f; }
body.auth .auth-steps li.active::before { background: var(--grad-warm); color: #1b2340; }

@media (prefers-reduced-motion: reduce) {
  body.auth .auth-card button::after, body.auth .auth-card a.btn::after { transition: none; }
}