/* ==========================================================================
   AtoZApply — Auth pages
   Extends landing.css (tokens, buttons, .mono, .console, .runlist).
   Load AFTER landing.css.
   ========================================================================== */

/* Author rules like .btn-block{display:flex} beat the UA's [hidden]{display:none},
   and this page toggles #googleBtn / #authDivider / #pwHint / #authNote via the
   hidden attribute. Restore it. */
[hidden]{display:none !important}

.auth-page{
  min-height:100vh;
  min-height:100dvh;
  background:var(--ink-950);
}

.auth-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  min-height:100vh;
  min-height:100dvh;
}

/* ── left: the form ─────────────────────────────────────────────────────── */
.auth-main{
  position:relative;
  display:flex; flex-direction:column;
  padding:32px clamp(24px,5vw,72px) 40px;
}

.auth-back{
  display:inline-flex; align-items:center; gap:9px;
  align-self:flex-start;
  font-family:var(--mono); font-size:.66rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-3);
  transition:color .16s ease;
}
.auth-back:hover{color:var(--signal)}
.auth-back svg{width:14px; height:14px; transition:transform .2s var(--ease)}
.auth-back:hover svg{transform:translateX(-3px)}

.auth-panel{
  width:100%; max-width:404px;
  margin:auto; padding-block:34px;
}
.auth-panel .brand{margin-bottom:34px}

#authTitle{
  font-size:clamp(2rem,3.2vw,2.55rem);
  letter-spacing:-.038em; line-height:1.04;
}
.auth-sub{
  margin-top:14px; font-size:.975rem; line-height:1.6; color:var(--text-2);
}

/* ── tabs ── */
.auth-tabs{
  display:grid; grid-template-columns:1fr 1fr;
  margin-top:28px; border-bottom:1px solid var(--line);
}
.auth-tab{
  position:relative;
  padding:0 0 13px; background:none; border:0; cursor:pointer;
  font-family:var(--mono); font-size:.68rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--text-3);
  text-align:left; transition:color .18s ease;
}
.auth-tab:hover{color:var(--text-2)}
.auth-tab::after{
  content:''; position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  background:var(--signal); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.auth-tab.active{color:var(--signal)}
.auth-tab.active::after{transform:scaleX(1)}

/* ── inline notice ── */
.auth-note{
  margin-top:24px; padding:13px 15px;
  border:1px solid rgba(255,177,61,.28); border-left:2px solid var(--flag-amber);
  border-radius:6px; background:rgba(255,177,61,.06);
  font-size:.875rem; line-height:1.55; color:#F0DDBC;
}

/* ── google ── */
.google-btn{margin-top:28px; background:var(--ink-850)}
.google-btn:hover:not(:disabled){background:var(--ink-800)}
.google-btn:disabled{opacity:.5; cursor:not-allowed}
.google-btn svg{width:17px; height:17px}

.auth-divider{
  display:flex; align-items:center; gap:16px;
  margin:26px 0 4px;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-3);
}
.auth-divider::before,.auth-divider::after{
  content:''; flex:1; height:1px; background:var(--line);
}

/* ── form ── */
#authForm{margin-top:26px}
.field{margin-bottom:18px}
.field label{
  display:block; margin-bottom:9px;
  font-family:var(--mono); font-size:.62rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-3);
}
.field input{
  width:100%; height:48px; padding:0 15px;
  background:var(--ink-850); color:var(--text);
  border:1px solid var(--line); border-radius:7px;
  font-family:var(--body); font-size:.975rem;
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.field input::placeholder{color:#4C545A}
.field input:hover{border-color:#333A40}
.field input:focus{
  outline:0;
  border-color:var(--signal);
  background:var(--ink-800);
  box-shadow:0 0 0 3px var(--signal-glow);
}
.field input:-webkit-autofill{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 40px var(--ink-800) inset;
}
.field-hint{
  margin-top:8px;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-3);
}

#submitBtn{margin-top:8px}
#submitBtn:disabled{opacity:.55; cursor:not-allowed}

/* ── status ── */
.auth-status{
  margin-top:16px; min-height:1.2em;
  font-size:.885rem; line-height:1.5; color:var(--text-2);
}
.auth-status.error{color:var(--flag-red)}
.auth-status.success{color:var(--signal)}

/* ── footnotes ── */
.auth-foot{
  margin-top:30px; padding-top:22px; border-top:1px solid var(--line);
  font-size:.845rem; line-height:1.55; color:var(--text-3);
}
.auth-alt{margin-top:16px; font-size:.845rem; color:var(--text-3)}
.auth-alt a{color:var(--signal); text-decoration:underline; text-underline-offset:3px}
.auth-alt a:hover{color:#E4FF7A}

/* ── right: context ────────────────────────────────────────────────────── */
.auth-aside{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  gap:38px;
  padding:64px clamp(32px,4.5vw,72px);
  border-left:1px solid var(--line);
  background:var(--ink-900);
}
.auth-aside::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(72% 62% at 50% 40%, #000, transparent);
          mask-image:radial-gradient(72% 62% at 50% 40%, #000, transparent);
}
.auth-aside::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(56% 46% at 78% 12%, rgba(214,255,75,.09), transparent 70%);
}
.auth-aside > *{position:relative; max-width:472px; width:100%}

.aside-title{
  font-size:clamp(1.85rem,2.7vw,2.5rem);
  letter-spacing:-.038em; line-height:1.06;
}
.aside-title em{font-style:normal; color:var(--signal)}
.aside-lede{margin-top:16px; font-size:.985rem; color:var(--text-2)}

.aside-facts{border-top:1px solid var(--line)}
.aside-facts li{
  display:flex; align-items:baseline; gap:16px;
  padding:13px 0; border-bottom:1px solid var(--line-soft);
  font-size:.91rem; color:var(--text-2);
}
.aside-facts .mono{flex:none; width:34px; font-size:.6rem; color:var(--signal-dim)}

/* ── responsive ── */
@media (max-width:1080px){
  .auth-shell{grid-template-columns:1fr}
  .auth-aside{display:none}
  .auth-main{min-height:100dvh}
}

@media (max-width:520px){
  .auth-main{padding:26px 22px 44px}
  .auth-panel{padding-block:34px}
  .auth-panel .brand{margin-bottom:34px}
}

@media (prefers-reduced-motion:reduce){
  .auth-back svg,.auth-tab::after{transition:none}
}