/* Login and signup — a split screen that collapses to a single card on a phone. */

.auth-page { min-height: 100dvh; }

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

/* ── the pitch half ─────────────────────────────────────────────────────── */

.auth-aside {
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--s5);
  padding: var(--s8) var(--s7);
  background: var(--bg-alt);
  border-right: 1px solid var(--line);
}
.auth-aside h1 { font-size: var(--fs-h1); text-wrap: balance; }
.auth-aside > p { max-width: 42ch; color: var(--text-2); font-size: 1.05rem; }

.auth-points { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.auth-points li {
  position: relative; padding-left: 28px;
  color: var(--text-2); font-size: var(--fs-sm);
}
.auth-points li::before {
  content: ""; position: absolute; left: 2px; top: 6px;
  width: 14px; height: 8px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* ── the form half ──────────────────────────────────────────────────────── */

.auth-main {
  display: grid; place-items: center;
  padding: var(--s7) var(--s5);
}
.auth-card { width: 100%; max-width: 420px; padding: var(--s6); }
.auth-brand-sm { display: none; margin-bottom: var(--s5); }
.auth-card h2 { font-size: 1.6rem; }
.auth-sub { margin: var(--s2) 0 var(--s5); color: var(--muted); font-size: var(--fs-sm); }

.auth-card form { display: grid; gap: 0; }
.auth-card .label { margin-top: var(--s4); }
.auth-card .label:first-of-type { margin-top: 0; }
.auth-card .hint { margin-top: 8px; }
.auth-card .btn-lg { margin-top: var(--s5); }

.label-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  margin-top: var(--s4);
}
.label-row .label { margin: 0; }
.opt { font-weight: 500; color: var(--faint); }

.auth-error, .auth-note {
  margin-bottom: var(--s4); padding: 11px 13px;
  font-size: var(--fs-sm); border-radius: var(--radius);
}
.auth-error { color: var(--danger); background: var(--danger-soft); border: 1px solid var(--danger-line); }
.auth-note { color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); }

.auth-swap {
  margin-top: var(--s5); padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--muted); text-align: center;
}
.auth-swap a { color: var(--accent); font-weight: 600; }

/* ── phone ──────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* The pitch is nice-to-have; the form is the job. Drop the aside rather than
     stacking it, so the fields are above the fold on a phone. */
  .auth-shell { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .auth-brand-sm { display: inline-flex; }
  .auth-main { padding: var(--s5) var(--s4) var(--s7); align-items: start; }
  .auth-card { border: 0; box-shadow: none; background: transparent; padding: var(--s4) 0; }
}

/* Confirm-password feedback */
.field-note { margin-top: 8px; font-size: var(--fs-xs); color: var(--ok); }
.field-note.is-bad { color: var(--danger); }
.input.is-bad { border-color: var(--danger); }
.input.is-bad:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
.input.is-good { border-color: var(--accent); }