/* ============================================================
   EINIEX — Sign in
   Split screen · dark brand panel + off-white form panel.
   Builds on einiex.css for fonts, tokens, wordmark.
   ============================================================ */

:root {
  --ok:  oklch(0.58 0.13 152);
  --bad: oklch(0.57 0.18 27);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html, body { height: 100%; }
html { scrollbar-gutter: auto; }  /* full-viewport split — no scrollbar, don't reserve a gutter */
body {
  /* off-white light palette across the whole page */
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  /* page itself never scrolls; the split fills the viewport */
  height: 100dvh;
}

/* fixed wordmark — identical coordinates to .ap-logo (Apply flow) so the
   brand mark holds its position across login ↔ apply ↔ home navigation */
.lg-logo {
  position: fixed; top: clamp(1.25rem, 3.5vh, 2.25rem); left: clamp(1.25rem, 4vw, 2.75rem);
  z-index: 40; display: inline-flex; align-items: center;
}
.lg-logo .wordmark { font-size: 1.0625rem; letter-spacing: 0.3em; color: #fff; }

/* ============================================================
   SPLIT
   ============================================================ */
.lg-split {
  position: fixed; inset: 0; z-index: 3;
  display: grid; grid-template-columns: 1fr 1fr;
}

/* ============================================================
   LEFT — BRAND PANEL (dark · WebGL ASCII flow field)
   ============================================================ */
.lg-brand {
  position: relative; overflow: hidden;
  background: #141820; color: #fff;
  display: flex; flex-direction: column;
  padding: clamp(2rem, 3.4vw, 3.25rem);
}
/* WebGL ascii canvas — fills the panel, sits behind all content */
.lg-gl {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  display: block;
}
/* legibility veil — keeps quote + roster crisp over the animated ground */
.lg-brand__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 95% at 16% 44%, rgba(20,24,32,0.82), rgba(20,24,32,0) 56%),
    linear-gradient(to top, rgba(20,24,32,0.92), rgba(20,24,32,0) 42%),
    linear-gradient(to bottom, rgba(20,24,32,0.55), rgba(20,24,32,0) 26%);
}

/* centered label (quote moved to roster row) */
.lg-brand__center {
  position: relative; z-index: 2;
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding-block: 2.5rem;
}
.lg-brand__quote {
  font-family: var(--font-serif), serif; font-style: italic; font-weight: 400;
  font-size: clamp(2.1rem, 3.5vw, 3.4rem); line-height: 1.08; letter-spacing: -0.005em;
  max-width: 13ch; color: #fff; text-wrap: balance;
}
.lg-brand__label {
  margin-top: 1.6rem;
  font-family: var(--font-mono), monospace; font-size: 0.6875rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.46);
}

/* member roster — quote left · thin rule · overlapping avatar cluster + sector/city legend */
.lg-roster {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 1.25rem;
}
/* quote lives inside the roster row now: left anchor */
.lg-roster .lg-brand__quote {
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  max-width: 11ch;
  margin: 0;
  line-height: 1.12;
}
/* thin vertical rule between quote and avatars */
.lg-roster__divider {
  width: 1px; align-self: stretch;
  background: rgba(255,255,255,0.14); flex-shrink: 0;
}
.lg-roster__stack { display: inline-flex; }
.lg-roster__ava {
  width: 2.875rem; height: 2.875rem; border-radius: 50%;
  margin-left: -0.85rem; border: 2px solid #141820;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10);
  background: #1b2a4a; position: relative;
}
.lg-roster__ava:first-child { margin-left: 0; }
.lg-roster__ava img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.lg-roster__legend { display: flex; flex-direction: column; gap: 0.42rem; }
.lg-roster__line {
  font-family: var(--font-mono), monospace; font-size: 0.72rem; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.78); line-height: 1;
}
.lg-roster__line b { color: #fff; font-weight: 700; }
.lg-roster__line span { color: rgba(255,255,255,0.42); }

/* ============================================================
   RIGHT — FORM PANEL (off-white)
   ============================================================ */
.lg-form {
  position: relative; overflow-y: auto; overflow-x: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 6vw, 4.5rem);
}
.lg-form::-webkit-scrollbar { width: 0; }
.lg-form { scrollbar-width: none; }

.lg-form__inner { width: 100%; max-width: 25rem; }

.lg-head { text-align: left; }

/* session notice — "signed out for inactivity" etc. */
.lg-notice {
  display: flex; align-items: flex-start; gap: 0.5rem;
  margin: 0 0 1.4rem; padding: 0.7rem 0.85rem;
  font-family: var(--font-mono), monospace; font-size: 0.72rem; line-height: 1.5;
  letter-spacing: 0.01em; color: var(--text-2);
  border: 1px solid var(--border); border-radius: 2px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
}
.lg-notice[hidden] { display: none; }
.lg-notice svg { width: 0.85rem; height: 0.85rem; flex: none; margin-top: 0.1rem; opacity: 0.7; }
.lg-head__h {
  font-family: var(--font-display), sans-serif; font-weight: 500;
  font-size: 2rem; line-height: 1.05; letter-spacing: -0.03em; color: var(--text);
}
.lg-head__sub { margin-top: 0.55rem; font-size: 0.875rem; line-height: 1.5; color: var(--text-2); }

.lg-form__body { margin-top: 2.25rem; }

/* ---------- floating-label bottom-line field ---------- */
.lf { position: relative; }
.lf__row { position: relative; }
.lf + .lf, .lg-form__body > * + * { margin-top: 0; }

.lf__input {
  width: 100%; border: 0; background: transparent; outline: none;
  font-family: var(--font-display), sans-serif; color: var(--text);
  font-size: 1.0625rem; font-weight: 400; letter-spacing: -0.005em;
  padding: 1.45rem 0 0.55rem; line-height: 1.2;
}
.lf--pw .lf__input { padding-right: 2.25rem; }
.lf__input::placeholder { color: transparent; }
.lf__input:-webkit-autofill { -webkit-text-fill-color: var(--text); transition: background-color 9999s; }

.lf__label {
  position: absolute; left: 0; top: 1.45rem;
  font-family: var(--font-display), sans-serif; font-size: 1.0625rem; color: color-mix(in srgb, var(--text) 40%, transparent);
  letter-spacing: -0.005em; pointer-events: none; transform-origin: left;
  transition: transform 0.28s var(--ease), color 0.2s ease;
}
.lf__input:focus + .lf__label,
.lf__input:not(:placeholder-shown) + .lf__label {
  transform: translateY(-1.4rem) scale(0.7);
}
.lf__input:focus + .lf__label { color: var(--text); }

.lf__line { position: relative; height: 1px; background: var(--border); }
.lf__line::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: var(--text); transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease), background-color 0.2s ease;
}
.lf__input:focus ~ .lf__line::after { transform: scaleX(1); }
.lf.is-error .lf__line::after { background: var(--bad); transform: scaleX(1); }
.lf.is-error .lf__label { color: var(--bad); }

/* eye toggle */
.lf__eye {
  position: absolute; right: -0.35rem; bottom: 0.35rem; width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center; background: none; border: 0; cursor: pointer;
  color: var(--text-2); transition: color 0.2s ease;
}
.lf__eye:hover { color: var(--text); }
.lf__eye svg { width: 1.15rem; height: 1.15rem; position: absolute; transition: opacity 0.25s ease, transform 0.25s var(--ease); }
.lf__eye .ic-off { opacity: 0; transform: scale(0.9); }
.lf__eye.is-shown .ic-on { opacity: 0; transform: scale(0.9); }
.lf__eye.is-shown .ic-off { opacity: 1; transform: scale(1); }

/* error text */
.lf__err {
  margin-top: 0.6rem;
  font-family: var(--font-mono), monospace; font-size: 0.7rem; letter-spacing: 0.03em; color: var(--bad);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 0.3s var(--ease), opacity 0.25s ease, margin-top 0.3s var(--ease);
}
.lf.is-error .lf__err { max-height: 2.5rem; opacity: 1; }

/* shake — 3 cycles in 300ms · runs on the inner row so it never
   collides with the .lg-rise entrance animation on .lf */
@media (prefers-reduced-motion: no-preference) {
  .lf.shake .lf__row { animation: lf-shake 0.3s linear both; }
}
@keyframes lf-shake {
  0%   { transform: translateX(0); }
  16%  { transform: translateX(-6px); }
  33%  { transform: translateX(6px); }
  50%  { transform: translateX(-5px); }
  66%  { transform: translateX(5px); }
  83%  { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}

/* ---------- collapsible password (forgot / magic flows) ---------- */
.lg-collapse {
  display: grid; grid-template-rows: 1fr; margin-top: 1.5rem;
  transition: grid-template-rows 0.45s var(--ease), opacity 0.35s ease, margin-top 0.45s var(--ease);
}
.lg-collapse > .lg-collapse__in { overflow: hidden; min-height: 0; }
.lg-collapse.is-collapsed { grid-template-rows: 0fr; opacity: 0; margin-top: 0; pointer-events: none; }

.lg-field-email { /* email always present */ }

/* ---------- primary button — full-width black pill ---------- */
.lg-submit {
  width: 100%; margin-top: 2rem; cursor: pointer; border: 0; border-radius: 100px;
  font-family: var(--font-display), sans-serif; font-size: 1rem; font-weight: 500;
  color: var(--bg); background: var(--text);
  padding: 1.05em 2em; min-height: 3.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.15s ease, background 0.25s ease;
}
.lg-submit:hover { transform: scale(1.01); }
.lg-submit:active { transform: scale(0.99); }
.lg-submit[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.lg-submit.is-loading { pointer-events: none; }
.lg-submit.is-loading .lg-submit__label { display: none; }

/* animated dot sequence (loading) */
.lg-dots { display: none; align-items: center; gap: 0.34em; height: 1em; }
.lg-submit.is-loading .lg-dots { display: inline-flex; }
.lg-dots i {
  width: 0.34em; height: 0.34em; border-radius: 50%; background: var(--bg);
  display: inline-block; opacity: 0.35; animation: lg-dot 1.1s ease-in-out infinite;
}
.lg-dots i:nth-child(2) { animation-delay: 0.18s; }
.lg-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes lg-dot { 0%, 70%, 100% { opacity: 0.3; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-0.18em); } }

/* ---------- meta row — forgot / magic ---------- */
.lg-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1.15rem;
}
.lg-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-display), sans-serif; font-size: 0.8125rem; color: var(--text-2);
  position: relative; transition: color 0.2s ease;
}
.lg-link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s var(--ease);
}
.lg-link:hover { color: var(--text); }
.lg-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* back link shown in sub-modes — compact refined pill */
.lg-back {
  display: none; align-items: center; gap: 0.5em; align-self: flex-start;
  margin-top: 1.5rem; padding: 0.62em 1.05em 0.62em 0.85em;
  border-radius: 100px; border: 1px solid var(--border); background: transparent;
  cursor: pointer; font-family: var(--font-display), sans-serif;
  font-size: 0.84rem; font-weight: 500; letter-spacing: -0.01em; color: var(--text-2);
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.lg-back.is-shown { display: inline-flex; }
.lg-back:hover { border-color: var(--text); color: var(--text); background: color-mix(in srgb, var(--text) 4%, transparent); }
.lg-back svg { width: 0.9rem; height: 0.9rem; transition: transform 0.3s var(--ease); }
.lg-back:hover svg { transform: translateX(-3px); }

/* ---------- divider ---------- */
.lg-divider {
  display: flex; align-items: center; gap: 1rem; margin: 1.85rem 0 1.5rem;
}
.lg-divider::before, .lg-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.lg-divider span {
  font-family: var(--font-mono), monospace; font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-2);
}

/* ---------- ghost google button ---------- */
.lg-ghost {
  width: 100%; cursor: pointer; border-radius: 100px;
  border: 1px solid var(--border); background: transparent;
  font-family: var(--font-display), sans-serif; font-size: 0.9375rem; font-weight: 500; color: var(--text);
  padding: 0.95em 2em; min-height: 3.1rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.65em;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.lg-ghost:hover { border-color: var(--text); background: color-mix(in srgb, var(--text) 3%, transparent); }
.lg-ghost svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }

/* ---------- footer line ---------- */
.lg-foot {
  margin-top: 2rem; text-align: center; font-size: 0.8125rem; color: var(--text-2);
}
.lg-foot a {
  color: var(--text); position: relative; white-space: nowrap;
}
.lg-foot a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s var(--ease);
}
.lg-foot a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ============================================================
   SUCCESS CONFIRMATION
   ============================================================ */
.lg-confirm {
  display: none; flex-direction: column; align-items: flex-start;
}
.lg-confirm.is-shown { display: flex; }
.lg-confirm__mark {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--text);
  display: grid; place-items: center; margin-bottom: 1.5rem; color: var(--text);
}
.lg-confirm__mark svg { width: 1.2rem; height: 1.2rem; }
.lg-confirm__h {
  font-family: var(--font-display), sans-serif; font-weight: 500;
  font-size: 1.875rem; line-height: 1.05; letter-spacing: -0.03em; color: var(--text);
}
.lg-confirm__sub { margin-top: 0.6rem; font-size: 0.875rem; line-height: 1.55; color: var(--text-2); }
.lg-confirm__sub b { color: var(--text); font-weight: 500; }
.lg-confirm__back {
  margin-top: 2rem; display: inline-flex; align-items: center; gap: 0.45em; cursor: pointer;
  background: none; border: 0; padding: 0;
  font-family: var(--font-mono), monospace; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2);
  transition: color 0.2s ease;
}
.lg-confirm__back:hover { color: var(--text); }
.lg-confirm__back svg { width: 0.8rem; height: 0.8rem; }

.lg-form__main.is-hidden { display: none; }

/* ============================================================
   ENTRANCE — base hidden; revealed from JS via inline styles so content
   can never be left stuck-hidden if the animation timeline is throttled
   (mirrors the einiex.css .reveal note). Web Animations add the motion
   when the page is actually rendering.
   ============================================================ */
.lg-rise { opacity: 0; }
.lg-brand { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .lg-rise, .lg-brand { opacity: 1 !important; transform: none !important; }
}
@keyframes lg-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ============================================================
   RESPONSIVE — collapse to single centered column
   ============================================================ */
@media (max-width: 860px) {
  .lg-split { grid-template-columns: 1fr; }
  .lg-brand { display: none; }
  /* brand panel gone — wordmark now sits over the off-white form, so go dark */
  .lg-logo .wordmark { color: var(--text); }
  /* clear the fixed wordmark, then center the form in the remaining space */
  .lg-form { padding: clamp(4.5rem, 12vw, 6rem) 1.5rem clamp(2rem, 6vw, 3rem); }
  .lg-form__inner { max-width: 23rem; }
}
@media (max-width: 380px) {
  .lf__input, .lf__label { font-size: 16px; }   /* no iOS zoom */
  .lg-head__h { font-size: 1.75rem; }
}

/* short viewports (landscape phones / small laptops): let the form column
   scroll internally if it must, while the PAGE itself stays fixed */
@media (max-height: 640px) and (min-width: 861px) {
  .lg-form { align-items: flex-start; }
}