/* =========================================================================
   ZeroTouch CRM — Auth pages (login / register)
   Split screen: brand panel + form. Depends on tokens.css + app.css.
   ========================================================================= */

.auth {
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-columns: 1fr;
}
@media (min-width: 1024px) { .auth { grid-template-columns: 1.05fr 1fr; } }

/* ---- Brand panel (hidden on small screens to keep signup frictionless) ---- */
.auth__brand {
  display: none;
  position: relative; overflow: hidden;
  padding: var(--s-8) var(--s-7);
  color: var(--ink-invert);
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(24, 201, 196, 0.22), transparent 55%),
    radial-gradient(80% 60% at 0% 100%, rgba(83, 106, 126, 0.28), transparent 55%),
    var(--navy-900);
}
@media (min-width: 1024px) { .auth__brand { display: flex; flex-direction: column; } }
.auth__brand h1, .auth__brand h2 { color: var(--white); }
.auth__brand .brand span { color: #fff; }
.auth__brand-body { margin-top: auto; }
.auth__promise {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.8rem; margin-bottom: var(--s-5);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: var(--fs-small); font-weight: 600;
}
.auth__list { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.auth__list li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-small); color: var(--ink-invert-2); }
.auth__list .icon { width: 1.2rem; height: 1.2rem; color: var(--teal-400); flex: none; margin-top: 0.1rem; }

/* ---- Form panel ---- */
.auth__form {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--s-6) var(--gutter);
  background: var(--bg);
}
.auth__card {
  width: 100%; max-width: 30rem; margin-inline: auto;
}
.auth__head { margin-bottom: var(--s-6); }
.auth__head .brand { margin-bottom: var(--s-5); }
.auth__head h1 { font-size: var(--fs-h1); }
.auth__head p { color: var(--ink-2); margin-top: var(--s-2); }
.auth__trial {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: var(--s-4);
  padding: 0.35rem 0.7rem; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent-strong);
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.02em;
}
.auth__row { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 480px) { .auth__row { grid-template-columns: 1fr 1fr; } }
.auth__foot { margin-top: var(--s-5); text-align: center; font-size: var(--fs-small); color: var(--ink-2); }
.auth__legal { margin-top: var(--s-5); font-size: var(--fs-micro); color: var(--ink-3); text-align: center; }
.auth__sep { display: flex; align-items: center; gap: var(--s-3); margin-block: var(--s-5); color: var(--ink-3); font-size: var(--fs-micro); }
.auth__sep::before, .auth__sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Plan picker (register) */
.planpick { display: grid; gap: var(--s-2); grid-template-columns: 1fr; }
@media (min-width: 420px) { .planpick { grid-template-columns: repeat(3, 1fr); } }
.planpick input { position: absolute; opacity: 0; pointer-events: none; }
.planpick label {
  display: block; cursor: pointer; text-align: center;
  padding: var(--s-3) var(--s-2); border: 1px solid var(--steel-200); border-radius: var(--r);
  background: var(--white); transition: all var(--t) var(--ease);
}
.planpick label b { display: block; font-size: var(--fs-small); }
.planpick label small { color: var(--ink-3); font-size: var(--fs-micro); }
.planpick label:hover { border-color: var(--steel-400); }
.planpick input:checked + label {
  border-color: var(--teal-500); background: var(--accent-soft); box-shadow: var(--ring);
}
.planpick input:focus-visible + label { box-shadow: var(--ring); }