/* auth.css — shared auth shell for login.html + signup.html
 * Split-screen layout (brand panel left, form right) + form-field styles.
 * Dark/on-brand: uses critical.css design tokens only. No new colours.
 * Sign-up-only extras (role cards, terms) live in signup.css. */

/* ══════════════════════════
   LAYOUT — split screen
══════════════════════════ */
.auth-body{
  min-height:100vh;
  background:linear-gradient(to bottom,var(--bg-top),var(--bg-bot));
}
.auth{
  min-height:100vh;
  /* constrain + centre so the two halves don't spread across a wide screen
     and leave a dead zone in the middle. Outer space becomes balanced margin. */
  max-width:1200px;
  margin:0 auto;
  padding:0 clamp(24px,5vw,48px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,72px);
}

/* ══════════════════════════
   LEFT — Brand panel
══════════════════════════ */
.auth__brand{
  position:relative;
  display:flex;
  flex-direction:column;
  /* vertical only — horizontal breathing room now comes from the .auth gutter + gap.
     No overflow:hidden — the floating chips need to spill outside the circle. */
  padding:clamp(40px,5vw,64px) 0;
}

/* Logo (shared) */
.auth__logo{
  display:inline-flex;align-items:center;gap:10px;
  position:relative;z-index:2;
}
.auth__logo-mark{
  width:38px;height:38px;flex-shrink:0;
  background:linear-gradient(135deg,var(--yellow),var(--yellow-dk));
  border-radius:11px;
  display:grid;place-items:center;
  font-size:18px;font-weight:800;color:var(--navy);
  box-shadow:0 4px 14px rgba(255,140,97,0.30);
}
.auth__logo-name{
  font-size:22px;font-weight:800;color:var(--white);letter-spacing:0.2px;
}
.auth__logo-name span{color:var(--yellow);}

/* Brand-panel logo — larger for presence, fluid down on smaller screens */
.auth__brand .auth__logo{gap:clamp(10px,1.2vw,14px);}
.auth__brand .auth__logo-mark{
  width:clamp(44px,5vw,58px);
  height:clamp(44px,5vw,58px);
  font-size:clamp(20px,2.6vw,28px);
  border-radius:clamp(12px,1.4vw,16px);
}
.auth__brand .auth__logo-name{
  font-size:clamp(30px,4vw,50px);
  letter-spacing:0.5px;   /* a little tracking so the large bold wordmark breathes */
  line-height:1;
}

/* Brand copy + art, vertically centred in the panel */
.auth__brand-body{
  position:relative;z-index:2;
  margin:auto 0;
  max-width:440px;
  /* breathing room below the logo so the block isn't crowded up top */
  padding-top:clamp(24px,4vw,48px);
}
.auth__welcome{
  font-size:clamp(28px,3.4vw,40px);
  font-weight:700;line-height:1.15;
  color:#eef6ff;margin-bottom:14px;
}
.auth__welcome-sub{
  font-size:clamp(15px,1.4vw,17px);
  font-weight:600;line-height:1.7;
  color:var(--text-dim);
  max-width:400px;   /* matched to the keyboard width */
}

/* Reused home-page keyboard — circle ring dropped (it only existed to frame the
   chips we removed), keyboard sized up as the standalone brand symbol. */
.auth__brand .hero__mascot-wrap{
  width:100%;
  max-width:400px;   /* same width as .auth__welcome-sub */
  aspect-ratio:auto;
  height:auto;
  margin:clamp(40px,5vw,60px) 0 0;   /* left-aligned to match the text block */
}
.auth__brand .hero__mascot-circle{
  background:none;
  border:none;
  width:100%;
  height:auto;
  aspect-ratio:auto;
  border-radius:0;
}
.auth__brand .hero__keyboard{width:100%;}

/* ══════════════════════════
   RIGHT — Form panel
══════════════════════════ */
.auth__panel{
  display:flex;align-items:center;justify-content:center;
  padding:clamp(24px,4vw,40px) 0;
}
.auth__card{
  width:100%;max-width:500px;
  background:var(--card-bg);
  border:1px solid var(--card-bdr);
  border-radius:var(--r-lg);
  padding:clamp(32px,3.2vw,44px);
  box-shadow:0 18px 50px rgba(0,0,0,0.30);
}

/* Inline logo — only when brand panel is hidden */
.auth__logo--inline{display:none;margin-bottom:24px;}

.auth__title{
  font-size:clamp(22px,2.4vw,26px);
  font-weight:700;color:#eef6ff;
  margin-bottom:8px;
}
.auth__subtitle{
  font-size:14px;font-weight:600;
  color:var(--text-dim);line-height:1.6;
  margin-bottom:26px;
}

/* ══════════════════════════
   FORM
══════════════════════════ */
.login-form__group{margin-bottom:18px;}
.login-form__label-row{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:7px;
}
.login-form__label{
  display:block;
  font-size:13px;font-weight:800;
  color:rgba(255,255,255,0.88);
  margin-bottom:7px;
}
.login-form__label-row .login-form__label{margin-bottom:0;}
.login-form__forgot{
  font-size:13px;font-weight:700;
  color:#8FB4FB;   /* lighter tint of --blue: reads as a link + clears 4.5:1 on the dark card */
}
.login-form__forgot:hover{text-decoration:underline;}

.login-form__input{
  width:100%;
  font-family:var(--ff);
  font-size:15px;font-weight:600;
  color:var(--white);
  background:rgba(255,255,255,0.04);
  border:1px solid var(--card-bdr);
  border-radius:var(--r-md);
  padding:13px 15px;
  transition:border-color 0.18s,box-shadow 0.18s,background 0.18s;
  /* Scoped to the field, not :root, so nothing else on the site shifts.
     Chrome's autofill background is light-dark(near-white, slate) — without a
     declared scheme it assumes light and fills saved logins near-white, which
     no author rule can override (it's UA !important). Declaring dark here makes
     it pick the dark half, and `fieldtext` resolve light, with no overrides. */
  color-scheme:dark;
}
.login-form__input::placeholder{color:rgba(255,255,255,0.40);}
.login-form__input:focus{
  outline:none;
  border-color:var(--blue);
  background:rgba(255,255,255,0.06);
  box-shadow:0 0 0 3px rgba(79,134,247,0.22);
}

/* Password field + show/hide toggle */
.login-form__password{position:relative;}
.login-form__password .login-form__input{padding-right:48px;}
.login-form__toggle{
  position:absolute;top:50%;right:6px;
  transform:translateY(-50%);
  width:36px;height:36px;
  display:grid;place-items:center;
  border-radius:8px;
  color:rgba(255,255,255,0.55);
  transition:color 0.15s,background 0.15s;
}
.login-form__toggle:hover{color:var(--white);background:rgba(255,255,255,0.06);}
.login-form__toggle.is-shown{color:var(--yellow);}
.login-form__eye{width:20px;height:20px;}

/* Remember me */
.login-form__remember{
  display:flex;align-items:center;gap:9px;
  font-size:14px;font-weight:600;
  color:var(--text-dim);
  margin:4px 0 22px;
  cursor:pointer;
}
.login-form__remember input{
  width:17px;height:17px;flex-shrink:0;
  accent-color:var(--yellow);
  cursor:pointer;
}

/* Primary submit */
.login-form__submit{
  width:100%;min-height:48px;
  font-size:15px;font-weight:800;
  color:var(--navy);
  background:var(--yellow);
  border-radius:var(--r-pill);
  box-shadow:0 4px 14px rgba(255,140,97,0.24);
  transition:background 0.2s,box-shadow 0.2s,transform 0.2s ease-out;
}
.login-form__submit:hover{
  box-shadow:0 6px 20px rgba(255,140,97,0.32);
  transform:translateY(-2px);
}
.login-form__submit:active{transform:translateY(0);opacity:0.9;}

/* Sign-up link */
.login-form__signup{
  text-align:center;
  margin-top:22px;
  font-size:14px;font-weight:600;
  color:var(--text-dim);
}
.login-form__signup a{
  color:var(--yellow);font-weight:800;
}
.login-form__signup a:hover{text-decoration:underline;}

/* ══════════════════════════
   SHARED AUTH EXTRAS — back link + success panel (forgot / reset pages)
══════════════════════════ */
.auth__back{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:22px;
  font-size:14px;font-weight:700;
  color:var(--text-dim);
  transition:color 0.15s;
}
.auth__back:hover{color:var(--white);}
.auth__back svg{width:16px;height:16px;}

.auth__success{text-align:center;}
.auth__success-icon{
  width:56px;height:56px;margin:0 auto 18px;
  display:grid;place-items:center;
  border-radius:50%;
  background:rgba(52,211,153,0.15);
  color:var(--green);
}
.auth__success-icon svg{width:28px;height:28px;}
.auth__success-text{
  font-size:14px;font-weight:600;
  color:var(--text-dim);line-height:1.65;
  margin-bottom:10px;
}
.auth__success-text strong{color:var(--white);font-weight:800;}
.auth__success .auth__back{margin-top:14px;}

/* Post-signup success notice (login page) — green, on-theme, dismissible.
   Shown when the signup redirect lands on /login (backend sets the trigger). */
.auth__notice{
  display:flex;align-items:flex-start;gap:10px;
  padding:13px 14px;
  margin-bottom:22px;
  background:rgba(52,211,153,0.12);
  border:1px solid rgba(52,211,153,0.30);
  border-radius:var(--r-md);
}
.auth__notice[hidden]{display:none;}
.auth__notice-icon{
  width:20px;height:20px;flex-shrink:0;margin-top:1px;
  color:var(--green);
}
.auth__notice-text{
  flex:1;
  font-size:13px;font-weight:700;line-height:1.5;
  color:#bdf0dc;   /* light mint — ~8.5:1 on the tinted card, clears AA */
}
.auth__notice-close{
  flex-shrink:0;
  width:24px;height:24px;
  display:grid;place-items:center;
  border-radius:6px;
  color:rgba(255,255,255,0.55);
  transition:color 0.15s,background 0.15s;
}
.auth__notice-close:hover{color:var(--white);background:rgba(255,255,255,0.08);}
.auth__notice-close svg{width:15px;height:15px;}

/* Inline form error (e.g. passwords don't match) */
.login-form__error{
  margin-top:7px;
  font-size:13px;font-weight:700;
  color:var(--coral);
}
.login-form__error[hidden]{display:none;}

/* Invalid field state — coral border + ring, overrides focus glow */
.login-form__input.is-error,
.login-form__input.is-error:focus{
  border-color:var(--coral);
  box-shadow:0 0 0 3px rgba(251,113,133,0.20);
}

/* ══════════════════════════
   RESPONSIVE — drop brand panel < 900px
══════════════════════════ */
@media(max-width:900px){
  .auth{grid-template-columns:1fr;}
  .auth__brand{display:none;}
  .auth__logo--inline{display:inline-flex;}
  .auth__card{
    background:transparent;
    border:none;
    box-shadow:none;
    padding:clamp(20px,6vw,32px) 4px;
    max-width:380px;
  }
}

/* Respect reduced-motion */
@media(prefers-reduced-motion:reduce){
  .auth__brand .hero__mascot-circle{animation:none;}
  .login-form__submit:hover,
  .login-form__google:hover{transform:none;}
}