/* ==========================================================================
   Auth pages — the sign-in page and the code screen
   Two-panel "auth shell": a brand panel with a live scene behind it -- a
   clearing in the woods at dusk, a starship in orbit, a jungle gate, a
   carrier at golden hour or a battle station over a doomed planet, picked at
   random --
   beside a calm light form panel. The form panel is the same under either
   scene; only the brand panel and the page backdrop follow data-scene.
   Used by portal/login.html and portal/verify_code.html.
   ========================================================================== */

/* --- Page frame ---------------------------------------------------------- */
/* base.html wraps logged-out users in .login-wrapper > main; our page block
   sits inside. Fill the viewport and let a flash alert flow above the shell. */
.login-wrapper {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1100px 620px at 12% -8%, #e6f4ef 0%, transparent 58%),
    radial-gradient(900px 500px at 100% 108%, #e7eef6 0%, transparent 55%),
    #eef2f6;
}

.login-wrapper:has(.auth-brand__scene[data-scene="starship"]) {
  background:
    radial-gradient(1100px 620px at 12% -8%, #dfe7ef 0%, transparent 58%),
    radial-gradient(900px 500px at 100% 108%, #e2e8ee 0%, transparent 55%),
    #e9edf2;
}

.login-wrapper:has(.auth-brand__scene[data-scene="jungle"]) {
  background:
    radial-gradient(1100px 620px at 12% -8%, #f4eadb 0%, transparent 58%),
    radial-gradient(900px 500px at 100% 108%, #e5ece4 0%, transparent 55%),
    #eff0ea;
}

.login-wrapper:has(.auth-brand__scene[data-scene="carrier"]) {
  background:
    radial-gradient(1100px 620px at 12% -8%, #f6e6da 0%, transparent 58%),
    radial-gradient(900px 500px at 100% 108%, #e4e6ee 0%, transparent 55%),
    #f0eeee;
}

.login-wrapper:has(.auth-brand__scene[data-scene="deathstar"]) {
  background:
    radial-gradient(1100px 620px at 12% -8%, #e3e2ee 0%, transparent 58%),
    radial-gradient(900px 500px at 100% 108%, #e0e8ee 0%, transparent 55%),
    #eaecf1;
}

.login-wrapper > main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.login-page {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
}

/* --- The shell ----------------------------------------------------------- */
.auth-shell {
  width: 100%;
  max-width: 940px;
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 32px 64px -28px rgba(1, 18, 51, 0.42),
    0 12px 24px -16px rgba(1, 18, 51, 0.24);
  animation: authRise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes authRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Brand panel
   ========================================================================== */
.auth-brand {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #ffffff;
  /* the dusk sky the canvas paints, so there is no flash of a different one */
  background: linear-gradient(180deg, #06385a 0%, #08678f 45%, #1592ad 78%, #3fb4bd 100%);
  padding: 2.9rem 2.6rem;
  display: flex;
  flex-direction: column;
  /* both scenes answer a held press; a long press must not select the title
     or raise the touch callout instead */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.auth-brand:has(> .auth-brand__scene[data-scene="starship"]) {
  color: #e6eef6;
  /* the space the starship canvas paints */
  background: linear-gradient(180deg, #04070d 0%, #08111d 60%, #0b1726 100%);
}

.auth-brand:has(> .auth-brand__scene[data-scene="jungle"]) {
  color: #fbf1dc;
  /* the dusk sky the jungle canvas paints */
  background: linear-gradient(180deg, #0b2a36 0%, #1f4a52 35%, #6e5640 62%, #c97c38 82%, #1a2a1f 100%);
}

/* The jungle's title sits in the gate's opening, over whatever walks past, so
   it keeps a dark edge and a little torchlight. */
.auth-brand:has(> .auth-brand__scene[data-scene="jungle"]) .auth-brand__title {
  text-shadow:
    0 0 2px rgba(10, 16, 12, 0.95),
    0 1px 6px rgba(10, 16, 12, 0.8),
    0 0 22px rgba(255, 170, 70, 0.35);
}

.auth-brand:has(> .auth-brand__scene[data-scene="carrier"]) {
  color: #fff4e6;
  /* the golden-hour sky and sea the carrier canvas paints */
  background: linear-gradient(180deg, #141d33 0%, #3b2d4d 18%, #8a3f45 33%, #e0703a 48%, #ffb057 60%, #b35a3c 61%, #3a2433 84%, #12151f 100%);
}

/* The carrier's title sits between the sun and the sea, on the brightest part
   of the sky, so it keeps a hard dark edge. */
.auth-brand:has(> .auth-brand__scene[data-scene="carrier"]) .auth-brand__title {
  text-shadow:
    0 0 2px rgba(20, 12, 16, 0.95),
    0 1px 6px rgba(20, 12, 16, 0.85),
    0 0 18px rgba(40, 16, 20, 0.5);
}

.auth-brand:has(> .auth-brand__scene[data-scene="deathstar"]) {
  color: #eef3fb;
  /* the space the battle station canvas paints */
  background: linear-gradient(180deg, #03050a 0%, #070b15 55%, #0b1120 100%);
}

/* The battle station's title sits over open space that the blast's ring and
   debris cross, so it keeps a dark edge under a cool glow. */
.auth-brand:has(> .auth-brand__scene[data-scene="deathstar"]) .auth-brand__title {
  text-shadow:
    0 0 2px rgba(3, 5, 10, 0.95),
    0 1px 6px rgba(3, 5, 10, 0.8),
    0 0 20px rgba(170, 210, 255, 0.35);
}

/* Brand ornament — a canvas scene (portal/_auth_brand_ornament.html): the
   woods, the starship, the jungle or the carrier, each drawing the product mark into itself. It paints over the panel's base gradient, which stays as the
   no-JS fallback. */
.auth-brand__scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
}

.auth-brand__content {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 1.1rem;
  /* centre the logo + product name in the panel, both axes */
  justify-content: center;
  align-items: center;
  text-align: center;
}

.auth-brand__logo {
  display: flex;
  margin-bottom: 0.35rem;
}

/* Sized by height only -- the mark is square (templates/_brand_mark.html),
   where the wordmark it replaced was 2.7:1, so it is set larger than that
   wordmark was to carry comparable weight in the panel. `color` paints it:
   it is drawn with fill="currentColor". */
.auth-brand__logo {
  color: #fff;
}

.auth-brand__logo svg {
  height: 60px;
  width: auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.28));
}

/* The no-JS copy of the glow the starship bakes round the mark it draws. */
.auth-brand:has(> .auth-brand__scene[data-scene="starship"]) .auth-brand__logo svg {
  filter: drop-shadow(0 0 4px rgba(72, 214, 196, 0.85)) drop-shadow(0 0 14px rgba(72, 214, 196, 0.5));
}

/* A glow to match the mark's. The tight dark shadow comes first so it sits on
   top: it keeps the letters' edges against the halo, so the glow adds
   presence without costing contrast. */
.auth-brand:has(> .auth-brand__scene[data-scene="starship"]) .auth-brand__title {
  text-shadow:
    0 0 2px rgba(3, 8, 15, 0.9),
    0 0 8px rgba(72, 214, 196, 0.75),
    0 0 18px rgba(72, 214, 196, 0.5),
    0 0 36px rgba(72, 214, 196, 0.3);
}

.auth-brand__title {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

/* When a scene has drawn the mark into its canvas (the moon, the planet the
   starship orbits, the jungle's gate, the carrier's sun, the battle station's sky), hide the DOM copy with opacity (not display/visibility) so
   it stays laid out — the script measures its rect to place the canvas copy —
   and stays in the accessibility tree. The title is never hidden: it stays the crisp DOM
   copy. Without JS/canvas the class is never added, so the DOM mark stays. */
.auth-brand--mark-drawn .auth-brand__logo {
  opacity: 0;
}

.auth-brand__footer {
  /* pinned to the bottom so the centred content sits in the true panel centre */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2.9rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  opacity: 0.7;
}

/* ==========================================================================
   Form panel
   ========================================================================== */
.auth-form-panel {
  padding: 2.9rem 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}

.auth-form {
  width: 100%;
  max-width: 360px;
}

.auth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #2f9e8a;
  margin-bottom: 0.85rem;
}


.auth-heading {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #12233b;
  margin: 0 0 0.45rem;
}

.auth-sub {
  font-size: 0.93rem;
  line-height: 1.5;
  color: #5a6a7a;
  margin: 0 0 1.6rem;
}

/* Inputs */
.auth-form .form-label {
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  color: #3a4a5a;
  margin-bottom: 0.4rem;
}

.auth-form .form-label i { color: #2f9e8a; }

.auth-form .form-control {
  padding: 0.8rem 0.95rem;
  font-size: 0.98rem;
  color: #12233b;
  background: #f7f9fb;
  border: 1.5px solid #dfe6ec;
  border-radius: 11px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.auth-form .form-control::placeholder { color: #9aa8b6; }

.auth-form .form-control:hover { border-color: #c7d2dc; }

.auth-form .form-control:focus {
  outline: none;
  background: #ffffff;
  border-color: #012554;
  box-shadow: 0 0 0 4px rgba(1, 37, 84, 0.13);
}

/* Primary button */
.auth-form .btn-primary {
  width: 100%;
  padding: 0.85rem 1rem;
  font-weight: 600;
  font-size: 0.98rem;
  color: #ffffff;
  background: #012554;
  border: none;
  border-radius: 11px;
  box-shadow: 0 10px 22px -10px rgba(1, 37, 84, 0.65);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
}

.auth-form .btn-primary:hover {
  background: #011a41;
  transform: translateY(-1px);
  box-shadow: 0 14px 26px -10px rgba(1, 37, 84, 0.6);
}

.auth-form .btn-primary:active { transform: translateY(0); }

.auth-form .btn-primary:focus-visible {
  outline: 3px solid rgba(47, 158, 138, 0.6);
  outline-offset: 2px;
}

/* Passkey / secondary outline button */
.auth-form .btn-outline-primary {
  width: 100%;
  padding: 0.8rem 1rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: #012554;
  background: #ffffff;
  border: 1.5px solid #cdd8e2;
  border-radius: 11px;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}

.auth-form .btn-outline-primary:hover {
  color: #012554;
  background: #f2f6fa;
  border-color: #012554;
  transform: translateY(-1px);
}

/* "or use email/password" divider */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 1.1rem 0;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: #8595a5;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e3e9ef;
}

/* Info note */
.auth-note {
  display: flex;
  gap: 0.65rem;
  margin-top: 1.3rem;
  padding: 0.8rem 0.9rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #46586a;
  background: #eef3f7;
  border: 1px solid #e0e8ef;
  border-radius: 11px;
}

.auth-note i {
  flex: none;
  margin-top: 0.1rem;
  color: #012554;
}

/* Footer switch link (Admin login / Back to employee login) */
.auth-switch-row {
  margin-top: 1.55rem;
  padding-top: 1.4rem;
  border-top: 1px solid #eceff3;
  text-align: center;
}

.auth-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #012554;
  text-decoration: none;
  transition: color 0.15s ease, gap 0.15s ease;
}

.auth-switch:hover {
  color: #2f9e8a;
  gap: 0.65rem;
}

/* The verify page's "instead" switches are buttons, posting the identifier
   back to the sign-in page. */
button.auth-switch {
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.auth-switch--muted {
  font-weight: 500;
  color: #6a7a8a;
}

.auth-switch--muted:hover { color: #012554; }

/* The sign-in page swaps "Use a password instead" for "Email me a code
   instead" with the hidden attribute, which display:inline-flex above would
   otherwise override. */
.auth-switch[hidden] { display: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px) {
  .auth-shell {
    grid-template-columns: 1fr;
    max-width: 440px;
  }

  .auth-brand {
    padding: 1.9rem 1.9rem 1.75rem;
  }

  .auth-brand__content { gap: 0.6rem; }
  .auth-brand__footer { display: none; }

  .auth-form-panel { padding: 2rem 1.9rem 2.25rem; }
  .auth-form { max-width: 100%; }
}

@media (max-width: 480px) {
  .login-page { padding: 0; }

  .login-wrapper,
  .login-wrapper:has(.auth-brand__scene[data-scene="starship"]),
  .login-wrapper:has(.auth-brand__scene[data-scene="jungle"]),
  .login-wrapper:has(.auth-brand__scene[data-scene="carrier"]),
  .login-wrapper:has(.auth-brand__scene[data-scene="deathstar"]) { background: #ffffff; }

  .auth-shell {
    max-width: 100%;
    min-height: 100vh;
    border-radius: 0;
    box-shadow: none;
    align-content: start;
  }
}

/* ==========================================================================
   Motion / spinner
   ========================================================================== */
.fa-spin { animation: fa-spin 1s infinite linear; }

@keyframes fa-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-shell { animation: none; }
  .auth-form .btn-primary:hover,
  .auth-form .btn-outline-primary:hover { transform: none; }
}