/* Auth + onboarding surfaces.
   Same split-screen structure Estebdal uses (pitch on one side, form on the
   other) because it works — rendered in Mortaga's own language. */

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

/* ---------- pitch side ---------- */

.auth-aside {
  display: none;
  background: var(--concrete);
  border-inline-end: 1px solid var(--line);
  padding: clamp(36px, 5vw, 64px);
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
@media (min-width: 940px) { .auth-aside { display: flex; } }

.aside-points { display: grid; gap: 26px; align-content: center; flex: 1; }
.point { display: grid; grid-template-columns: auto 1fr; gap: 15px; align-items: start; }
.point svg { width: 20px; height: 20px; color: var(--accent-t); margin-top: 3px; flex: none; }
.point b { display: block; font-weight: 650; font-size: 15.5px; margin-bottom: 3px; }
.point span { font-size: 14.5px; color: var(--muted); line-height: 1.55; }

.aside-foot { font-family: var(--mono); font-size: 11.5px; color: var(--faint); letter-spacing: .04em; }
:root[lang="ar"] .aside-foot { letter-spacing: 0; }

/* ---------- form side ---------- */

.auth-main {
  display: flex; flex-direction: column;
  padding: clamp(20px, 4vw, 40px);
  gap: 28px;
}
.auth-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.auth-body { flex: 1; display: flex; align-items: center; justify-content: center; padding-block: 12px; }
.auth-card { width: 100%; max-width: 404px; display: grid; gap: 22px; }

.auth-head { display: grid; gap: 7px; }
.auth-head h1 { font-size: clamp(27px, 4vw, 33px); letter-spacing: -.028em; line-height: 1.1; }
:root[lang="ar"] .auth-head h1 { letter-spacing: 0; line-height: 1.32; }
.auth-head p { font-size: 14.5px; color: var(--muted); }

/* ---------- onboarding ---------- */

.steps-rail { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.pip {
  height: 3px; flex: 1; border-radius: 100px;
  background: var(--line-hi);
}
.pip.done { background: var(--accent-t); }
.pip.now  { background: var(--accent-t); opacity: .5; }
.step-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint);
}
:root[lang="ar"] .step-label { letter-spacing: 0; }

.choice {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  width: 100%; text-align: start;
  padding: 16px; border: 1px solid var(--line-hi); border-radius: var(--r);
  background: var(--card); cursor: pointer; color: var(--fg);
  font-family: var(--body);
  transition: border-color .16s ease, transform .16s ease;
}
.choice:hover { border-color: var(--accent-t); transform: translateY(-1px); }
.choice .ic { width: 22px; height: 22px; color: var(--accent-t); }
.choice b { display: block; font-size: 15px; font-weight: 650; margin-bottom: 2px; }
.choice span { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.choice .arw { width: 16px; height: 16px; color: var(--faint); }
:root[dir="rtl"] .choice .arw { transform: scaleX(-1); }

/* Token form. Uses a class, not an inline style — an inline `display` beats
   the `hidden` attribute and the form would never hide. */
.token-form {
  display: grid; gap: 14px; padding: 16px;
  border: 1px solid var(--line-hi); border-radius: var(--r);
  background: var(--card);
}
.token-form[hidden] { display: none; }
.auth-card > * { animation: rise var(--t-slow) var(--ease-out) backwards; }
.auth-card > *:nth-child(2) { animation-delay: 50ms; }
.auth-card > *:nth-child(3) { animation-delay: 90ms; }
.auth-card > *:nth-child(n+4) { animation-delay: 130ms; }
.token-form { border-radius: var(--r-md); }