/* CREW v18.1 — shared public-page polish
   Loaded once from base.html after page-specific CSS.
   Intentionally does not target locked Login (v14-login-page) or Today (v17-today-page). */

:root {
  --crew18-bg: var(--crew-color-bg);
  --crew18-panel: var(--crew-color-surface);
  --crew18-panel-strong: var(--crew-color-surface-strong);
  --crew18-line: var(--crew-color-line);
  --crew18-line-soft: var(--crew-color-line-soft);
  --crew18-text: var(--crew-color-text);
  --crew18-muted: var(--crew-color-muted);
  --crew18-soft: var(--crew-color-soft);
  --crew18-green: var(--crew-game-mystery);
  --crew18-gold: var(--crew-game-trivia);
  --crew18-blue: var(--crew-game-word);
  --crew18-purple: var(--crew-game-tick-tock);
}


/* Auth/recovery/error ambience ownership. */
.login-page .ambient,
.login-page .noise,
.auth-body .ambient,
.auth-body .noise {
  display: none !important;
}

/* -------------------------------------------------------------------------- */
/* Create profile / recovery / recovery code                                  */
/* -------------------------------------------------------------------------- */

.login-page {
  min-height: 100svh;
  margin: 0;
  color: var(--crew18-text);
  background: #02070b;
  font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.login-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  filter: saturate(.88) brightness(.72);
}

.login-page:has(.profile-create-shell)::before {
  background-image: url("../images/v14/mystery.png");
  background-position: 58% center;
}

.login-page:has(.recovery-shell)::before {
  background-image: url("../images/v14/word.png");
  background-position: 58% center;
}

.recovery-code-page::before {
  background-image: url("../images/v14/trivia.png");
  background-position: 58% center;
}

.login-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(2,7,11,.97), rgba(2,7,11,.72) 48%, rgba(2,7,11,.62)),
    linear-gradient(180deg, rgba(2,7,11,.18), rgba(2,7,11,.74));
}

.login-page .login-shell {
  width: 100%;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(430px,560px);
  margin: 0;
  background: transparent;
}

.login-page .login-brand-panel {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(34px,4vw,64px);
  background: transparent;
}

.login-page .brand-lockup {
  display: grid;
  gap: 10px;
}

.login-page .brand-parent {
  color: rgba(218,228,238,.44);
  font: 800 .48rem/1 Inter,sans-serif;
  letter-spacing: .16em;
}

.login-page .crew-mark {
  color: #fff;
  font: 850 1.55rem/1 Manrope,Inter,sans-serif;
  letter-spacing: .06em;
}

.login-page .login-story {
  width: min(610px,82%);
  margin: auto 0;
}

.login-page .login-story .eyebrow {
  color: rgba(224,233,242,.58);
  font: 800 .60rem/1 Inter,sans-serif;
  letter-spacing: .19em;
}

.login-page .login-story h1 {
  margin: 18px 0 18px;
  color: #fff;
  font: 850 clamp(4rem,6.6vw,7rem)/.84 Manrope,Inter,sans-serif;
  letter-spacing: -.07em;
  text-transform: uppercase;
}

.login-page .login-story h1 span { color: rgba(244,247,251,.82); }

.login-page .login-story p {
  max-width: 520px;
  margin: 0;
  color: var(--crew18-muted);
  font: 500 .88rem/1.6 Inter,sans-serif;
}

.login-page .privacy-stack {
  display: grid;
  gap: 11px;
  width: min(450px,100%);
}

.login-page .privacy-stack > div {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
}

.login-page .privacy-stack span {
  color: var(--crew18-soft);
  font: 800 .50rem/1 Inter,sans-serif;
}

.login-page .privacy-stack strong {
  color: rgba(239,244,249,.72);
  font: 700 .66rem/1 Inter,sans-serif;
}

.login-page .login-form-wrap {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(26px,4vw,60px);
  background: transparent;
}

.login-page .login-card {
  width: min(460px,100%);
  box-sizing: border-box;
  padding: clamp(28px,4vw,42px);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(8,16,23,.80), rgba(3,9,14,.89));
  box-shadow:
    0 28px 80px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(22px) saturate(118%);
  -webkit-backdrop-filter: blur(22px) saturate(118%);
}

.login-page .login-card-heading { margin-bottom: 28px; }

.login-page .mini-crew {
  color: rgba(206,218,230,.46);
  font: 800 .52rem/1 Inter,sans-serif;
  letter-spacing: .17em;
}

.login-page .login-card-heading h2 {
  margin: 13px 0 9px;
  color: #fff;
  font: 850 clamp(2.2rem,3.3vw,3.2rem)/.94 Manrope,Inter,sans-serif;
  letter-spacing: -.055em;
}

.login-page .login-card-heading p,
.login-page .privacy-note {
  color: var(--crew18-muted);
  font-size: .75rem;
  line-height: 1.5;
}

.login-page .login-form {
  display: grid;
  gap: 16px;
}

.login-page .login-form label {
  display: grid;
  gap: 8px;
}

.login-page .login-form label > span,
.login-page .avatar-fieldset legend {
  color: rgba(220,229,238,.64);
  font: 700 .62rem/1 Inter,sans-serif;
}

.login-page .login-form input[type="text"],
.login-page .login-form input[type="password"] {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 11px;
  outline: none;
  color: #f6f8fb;
  background: rgba(255,255,255,.04);
  font: 500 .84rem/1 Inter,sans-serif;
}

.login-page .login-form input:focus {
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.06);
}

.login-page .login-form label small {
  color: rgba(192,205,219,.40);
  font-size: .56rem;
}

.login-page .avatar-fieldset {
  margin: 2px 0;
  padding: 0;
  border: 0;
}

.login-page .avatar-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.login-page .avatar-choice {
  position: relative;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  cursor: pointer;
}

.login-page .avatar-choice input {
  position: absolute;
  opacity: 0;
}

.login-page .avatar-choice:has(input:checked) {
  border-color: rgba(85,230,172,.45);
  background: rgba(85,230,172,.08);
}

.login-page .primary-button,
.login-page .secondary-button {
  min-height: 50px;
  border-radius: 11px;
}

.login-page .account-link.centered {
  display: block;
  margin-top: 18px;
  color: rgba(231,238,245,.68);
  font-size: .68rem;
  text-align: center;
}

.login-page .alert {
  margin-bottom: 12px;
  padding: 11px 13px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  background: rgba(255,255,255,.04);
}

/* Recovery code */
.recovery-code-page .recovery-code-shell {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.recovery-code-page .recovery-code-card {
  width: min(620px,100%);
  box-sizing: border-box;
  padding: clamp(30px,5vw,52px);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 22px;
  background: rgba(5,12,18,.84);
  box-shadow: 0 28px 90px rgba(0,0,0,.38);
  backdrop-filter: blur(22px) saturate(118%);
  -webkit-backdrop-filter: blur(22px) saturate(118%);
}

.recovery-code-page .recovery-code-card h1 {
  margin: 13px 0 12px;
  color: #fff;
  font: 850 clamp(2.6rem,5vw,4.4rem)/.92 Manrope,Inter,sans-serif;
  letter-spacing: -.06em;
}

.recovery-code-page .recovery-code-card > p {
  color: var(--crew18-muted);
  line-height: 1.55;
}

.recovery-code-page .recovery-code-value {
  margin: 28px 0 12px;
  padding: 21px;
  overflow-wrap: anywhere;
  border: 1px solid rgba(255,189,69,.22);
  border-radius: 13px;
  color: #fff;
  background: rgba(255,189,69,.055);
  font: 800 clamp(1rem,2vw,1.35rem)/1.35 Manrope,Inter,sans-serif;
  letter-spacing: .08em;
  text-align: center;
}

.recovery-code-page .copy-code { width: 100%; }

.recovery-code-page .recovery-warning {
  display: grid;
  gap: 5px;
  margin: 22px 0;
  padding: 16px;
  border-left: 2px solid var(--crew18-gold);
  background: rgba(255,189,69,.035);
}

/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* Error pages                                                                */
/* -------------------------------------------------------------------------- */

.auth-body {
  min-height: 100svh;
  margin: 0;
  background:
    radial-gradient(46rem 30rem at 70% 18%, rgba(85,185,255,.07), transparent 66%),
    #02070b;
}

.auth-body .auth-shell {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.auth-body .error-card {
  width: min(560px,100%);
  box-sizing: border-box;
  padding: 40px;
  border: 1px solid var(--crew18-line);
  border-radius: 20px;
  background: rgba(6,13,19,.78);
  box-shadow: 0 26px 80px rgba(0,0,0,.30);
}

.auth-body .error-card h1 {
  margin: 14px 0 12px;
  color: #fff;
  font: 850 clamp(2.5rem,5vw,4rem)/.93 Manrope,Inter,sans-serif;
  letter-spacing: -.055em;
}

.auth-body .error-card p {
  color: var(--crew18-muted);
  line-height: 1.55;
}

/* -------------------------------------------------------------------------- */
/* Mobile                                                                     */
/* -------------------------------------------------------------------------- */

@media (max-width:760px) {
  .login-page .login-shell { display:block; }

  .login-page .login-brand-panel {
    min-height:auto;
    padding:22px 20px 12px;
  }

  .login-page .brand-parent { display:none; }
  .login-page .crew-mark { font-size:1.2rem; }

  .login-page .login-story {
    width:100%;
    margin:62px 0 0;
  }

  .login-page .login-story h1 {
    font-size:clamp(3.3rem,15vw,4.7rem);
  }

  .login-page .privacy-stack { display:none; }

  .login-page .login-form-wrap {
    min-height:auto;
    padding:16px 14px 30px;
  }

  .login-page .login-card {
    width:100%;
    padding:24px 20px;
  }

  .login-page .login-form input[type="text"],
  .login-page .login-form input[type="password"] {
    font-size:16px;
  }

}