/* ==========================================================================
   APEX auth — the /login page. A split layout that bridges the dark marketing
   anchor (brand panel, left) and the light app (form column, right) so login
   reads as part of the system, not an afterthought. Reuses tokens.css +
   the --d-* dark-anchor palette; the form itself (ls-auth-view) keeps its
   base.css / components.css styling.
   ========================================================================== */

.auth-page {
  min-height: 100vh;
}
.auth-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100vh;
}

/* --- Brand panel (dark anchor, left) --- */
/* Fills the grid row, so the dark anchor runs the full page height and its
   footer lines up with the form's. Content is TOP-aligned rather than
   distributed: with `space-between` and a form column that runs past one
   screen, the pitch was centred against the whole document and landed below
   the fold on arrival at step 2. The footer is pushed back down with
   `margin-top: auto` so only the middle collapses upward. */
.auth-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 40px;
  padding: 40px 48px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(15, 118, 110, 0.18), transparent 60%),
    var(--d-bg);
  border-right: 1px solid var(--d-border);
  color: var(--d-text);
  overflow: hidden;
}
.auth-wm {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--d-text);
  text-decoration: none;
}
.auth-wm em {
  font-style: normal;
  color: var(--accent);
}
.auth-brand-body {
  max-width: 420px;
}
.auth-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #5eead4;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.auth-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--d-border-accent);
}
.auth-headline {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
  color: #fff;
}
.auth-sub {
  font-size: 14px;
  line-height: 1.7;
  color: var(--d-muted);
  margin: 0 0 26px;
}

/* Condensed live-signal terminal — the marketing hero motif, shrunk. */
.auth-term {
  background: var(--d-bg-2);
  border: 1px solid var(--d-border-accent);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.3);
  font-family: var(--font-mono);
}
.auth-term-bar {
  background: #0b0f1c;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid var(--d-border);
}
.auth-term-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: block;
}
.auth-term-title {
  font-size: 10px;
  color: var(--d-3);
  margin-left: 6px;
  letter-spacing: 0.04em;
}
.auth-term-body {
  padding: 14px 16px;
  font-size: 11.5px;
  line-height: 1.7;
}
.auth-term-meta {
  color: var(--d-4);
}
.auth-sig {
  margin: 8px 0;
  padding: 9px 11px;
  background: var(--d-surf);
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
}
.auth-sig.hot {
  border-left-color: var(--red);
  background: rgba(239, 68, 68, 0.07);
}
.auth-sig.med {
  border-left-color: var(--amber);
}
.auth-sig-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.auth-ip {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  border-radius: 3px;
}
.auth-ip.h {
  background: rgba(239, 68, 68, 0.16);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.auth-ip.m {
  background: rgba(245, 158, 11, 0.16);
  color: var(--amber);
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.auth-sig-src {
  font-size: 10px;
  color: var(--d-3);
}
.auth-sig-q {
  color: var(--d-text);
  font-size: 11.5px;
}
.auth-trust {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: 11px;
  color: var(--d-muted);
}
.auth-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  flex-shrink: 0;
}
.auth-brand-foot {
  /* Holds the bottom while the wordmark and pitch stay top-aligned, so this row
     lines up with the form column's footer instead of floating mid-panel. */
  margin-top: auto;
  display: flex;
  gap: 22px;
  font-size: 12px;
}
.auth-brand-foot a {
  color: var(--d-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.auth-brand-foot a:hover {
  color: var(--d-text);
}

/* --- Form column (light, right) --- */
main.auth-form-col {
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
}
.auth-top {
  position: static; /* override base.css sticky header */
  display: flex;
  align-items: center;
  /* Desktop: the brand panel owns the wordmark, so the form's is hidden and
     the only child (the sign-in / sign-up link) sits right. Mobile re-shows
     the wordmark. */
  justify-content: flex-end;
  padding: 24px 40px;
  background: transparent;
  border-bottom: none;
}
.auth-top .auth-wm {
  display: none;
}
.auth-top .auth-wm {
  color: var(--text-hi);
}
.auth-top-link {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.auth-top-link:hover {
  color: var(--accent-2);
}
.auth-form-mid {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 40px;
}
.auth-intro {
  max-width: 420px;
  margin: 0 auto 22px;
  width: 100%;
}
.auth-intro h1 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-hi);
  margin: 0 0 6px;
}
.auth-intro p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
/* Override the component's centered narrow wrap — it sits in the column now. */
.auth-page .auth-wrap {
  margin: 0 auto;
  max-width: 420px;
  width: 100%;
}
/* The auth card shouldn't lift on hover like a feed card. */
.auth-page .auth-wrap .card:hover {
  border-color: var(--border);
  box-shadow: none;
  transform: none;
}
.auth-foot {
  display: flex;
  align-items: center;
  /* Desktop: the brand panel owns the site links, so the form footer shows
     only the copyright (right). Mobile re-shows the nav. */
  justify-content: flex-end;
  gap: 12px;
  padding: 22px 40px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-3);
}
.auth-foot nav {
  display: none;
}
.auth-foot nav a {
  color: var(--muted);
  text-decoration: none;
}
.auth-foot nav a:hover {
  color: var(--accent);
}

/* --- Responsive: drop the brand panel on narrow screens --- */
@media (max-width: 860px) {
  .auth-split {
    grid-template-columns: 1fr;
  }
  .auth-brand {
    display: none;
  }
  /* Brand panel is gone — surface the wordmark + site links in the form chrome. */
  .auth-top {
    justify-content: space-between;
  }
  .auth-top .auth-wm {
    display: inline-block;
  }
  .auth-foot {
    justify-content: space-between;
  }
  .auth-foot nav {
    display: block;
  }
}
@media (max-width: 480px) {
  .auth-top,
  .auth-form-mid,
  .auth-foot {
    padding-left: 22px;
    padding-right: 22px;
  }
  .auth-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}