/* ==========================================================================
   Maktabi — SIGN UP + LOG IN split (docs/SPEC_PAGE_SIGNUP.md, SPEC_PAGE_LOGIN.md)
   ========================================================================== */

.auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - var(--nav-h));
}

/* ---------- left column ---------- */

.auth__form {
  display: flex; flex-direction: column; justify-content: center;
  padding: 64px 76px;
  background: var(--bg);
}
.auth__form-in { width: 100%; max-width: 440px; }
.auth__form h1 { margin-top: 14px; font-size: var(--fs-h1-sm); line-height: var(--lh-h1-sm); letter-spacing: -.045em; }
.auth__sub { margin-top: 16px; max-width: 470px; font-size: 15px; line-height: 1.7; color: var(--text-2); }

.auth__card {
  margin-top: 30px; padding: 28px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.auth__card .btn--grad { margin-top: 20px; }
.auth__alt { margin-top: 16px; text-align: center; font-size: var(--fs-sm); color: var(--muted); }
.auth__card .btn--soft { margin-top: 10px; }

.auth__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 20px; font: 500 var(--fs-xs)/1.4 var(--ff-body); color: var(--muted); }
.auth__meta li { display: flex; align-items: center; gap: 7px; }
.auth__meta svg { color: var(--accent); }

.auth__done { text-align: center; padding: 8px 0; }
.auth__done h2 { font: 700 19px/1.35 var(--ff-head); margin-top: 14px; }
.auth__done p { margin-top: 10px; font-size: var(--fs-sm); color: var(--text-2); }

/* ---------- right panel ---------- */

.auth__aside {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: 56px;
  background: var(--grad-135);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.auth__aside::before,
.auth__aside::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .12), transparent);
}
.auth__aside::before { inset-inline-start: -120px; top: -140px; }
.auth__aside::after { inset-inline-end: -160px; bottom: -180px; }

.auth__aside-in { width: 100%; max-width: 480px; }
.auth__aside h2 { max-width: 460px; font: 800 52px/60px var(--ff-head); letter-spacing: -.03em; }

.steps4 { display: flex; flex-direction: column; gap: 26px; margin-top: 36px; }
.steps4 li { display: flex; align-items: flex-start; gap: 14px; }
.steps4 i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28);
  font: 600 12.5px/1 var(--ff-body); font-style: normal;
}
.steps4 b { display: block; font: 600 15.5px/1.4 var(--ff-body); }
.steps4 span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .78); }

.auth__note {
  margin-top: 38px; padding: 20px 22px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-lg);
  font-size: 13.5px; line-height: 1.65; color: rgba(255, 255, 255, .92);
}

/* ---------- log in only ---------- */
/* The reference shot measures the sign-in column at x 86–505 (420 px), 10 px
   narrower than sign-up's 76–515 (440 px). */
.auth--login .auth__form { padding-inline: 86px; }
.auth--login .auth__form-in { max-width: 420px; }
/* the sign-in card is 435 px tall in the shot: wider gaps around the hint line */
.auth--login .auth__hint { margin-top: 24px; }
.auth--login .auth__card .btn--soft { margin-top: 18px; }
.auth--login .auth__meta { margin-top: 33px; }

.auth__row { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.auth__row label { font: 400 13.5px/1.5 var(--ff-body); color: var(--text-2); }
.auth__row input { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); flex: none; }
.auth__row a { margin-inline-start: auto; font: 500 13.5px/1 var(--ff-body); color: var(--accent); }
.auth__hint { margin-top: 16px; font-size: var(--fs-sm); line-height: 1.6; color: var(--muted); }

.aside-lead { margin-top: 22px; font-size: 15px; line-height: 27px; color: rgba(255, 255, 255, .82); }

.aside-checks { display: flex; flex-direction: column; gap: 13px; margin-top: 30px; }
.aside-checks li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 21px; }
.aside-checks svg { margin-top: 3px; color: rgba(255, 255, 255, .9); }

.auth__note footer { margin-top: 12px; font-size: 12.5px; color: rgba(255, 255, 255, .72); }

/* ---------- responsive ---------- */

@media (max-width: 1023px) {
  .auth { grid-template-columns: 1fr; }
  .auth__form { padding: 48px 40px; }
  .auth--login .auth__form { padding-inline: 40px; }
  .auth__form-in, .auth__aside-in { max-width: 620px; margin-inline: auto; }
  .auth--login .auth__form-in { max-width: 620px; }
  .auth__form h1 { font-size: 36px; }
  .auth__aside { padding: 48px 40px; }
  .auth__aside h2 { font-size: 32px; }
}

@media (max-width: 767px) {
  .auth__form { padding: 36px 20px; }
  .auth--login .auth__form { padding-inline: 20px; }
  .auth__card { padding: 20px; }
  .auth__form h1 { font-size: 32px; }
  .auth__aside { padding: 40px 20px; }
  .auth__aside h2 { font-size: 28px; }
}