/* Registration and verification — the two account screens that are a rail plus a
 * workspace rather than a split photograph. */

.account--register { background: var(--color-cream); }

/* ── left rail ────────────────────────────────────────────────────────── */
.reg-rail {
  position: relative; width: 504px; flex: none;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 48px; background: var(--color-brand); color: var(--color-white); overflow: hidden;
}
.reg-rail__type { margin-top: auto; position: relative; z-index: 2; display: grid; gap: var(--space-16); }
.reg-rail__h {
  font-family: var(--font-display); font-size: 64px; font-weight: 700; line-height: 60px;
  text-transform: uppercase;
}
.reg-rail__sub { font-size: var(--fs-body); line-height: 24px; }
.reg-rail__photo { position: absolute; inset: auto 0 0 0; z-index: 1; height: 400px; }
.reg-rail__photo img { width: 100%; height: 100%; object-fit: cover; }
.reg-rail__type { padding-bottom: 400px; }

/* ── workspace ────────────────────────────────────────────────────────── */
.reg-workspace {
  flex: 1; min-width: 0; display: grid; gap: var(--space-40); align-content: start;
  padding: 48px var(--section-pad-x); background: var(--color-cream);
}
.reg-progress { display: flex; gap: var(--space-40); padding: var(--space-24) 0; }
.reg-progress__step {
  display: flex; align-items: center; gap: var(--space-8);
  font-size: var(--fs-meta); font-weight: 700; line-height: 16px;
  color: var(--color-muted-2); text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.reg-progress__step:hover { color: var(--color-ink); }
.reg-progress__num { color: var(--color-muted-2); }
.reg-progress__step.is-active, .reg-progress__step.is-active .reg-progress__num { color: var(--color-brand); }

.reg-intro { display: grid; gap: var(--space-12); }
.reg-intro__h {
  font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; line-height: 54px;
  text-transform: uppercase; color: var(--color-ink);
}
.reg-intro__note { font-size: var(--fs-body-sm); line-height: 22px; color: var(--color-muted); }

.reg-form { display: grid; gap: var(--space-40); }
.reg-section { display: grid; gap: var(--space-20); border: 0; padding: 0; margin: 0; }
/* The mockup opens each section with a labelled 35px separator band. */
/* legend не участвует в сетке fieldset — браузер размещает его отдельно, поэтому
   отступ до первого поля задаётся полем, а не gap сетки. */
.reg-section__legend {
  display: flex; align-items: flex-end; width: 100%; height: 35px;
  padding: 0 0 var(--space-12); margin: 0 0 var(--space-24);
  box-shadow: inset 0 -1px 0 var(--color-border);
  font-size: var(--fs-meta); font-weight: 700; line-height: 16px; letter-spacing: var(--ls-label);
  color: var(--color-brand);
}
.reg-section { gap: var(--space-24); }
.reg-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-20); }
.reg-row--three { grid-template-columns: 2fr 1fr 1fr; }
/* The mockup stacks the password pair rather than putting them side by side. */
.reg-stack { display: grid; gap: var(--space-24); }
.reg-form .field input:not([type="checkbox"]),
.reg-form .field select { height: 50px; background: var(--color-white); border-color: transparent; }
.reg-form .field input:focus, .reg-form .field select:focus { border-color: var(--color-brand); }

.field--dob { border: 0; padding: 0; margin: 0; }
/* В макете три поля даты равной ширины на всю строку (251 + 12 + 251 + 12 + 251). */
.reg-dob { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-12); }
.field__with-prefix { position: relative; display: block; }
.field__prefix {
  position: absolute; left: var(--space-16); top: 50%; translate: 0 -50%;
  font-size: var(--fs-body-sm); color: var(--color-muted);
}
.field__with-prefix input { padding-left: 56px; }

.field--check a { color: var(--color-brand); }
/* Agreements: one line per box, as drawn — 20px rows rather than wrapped labels. */
.reg-section .field--check { align-items: center; gap: var(--space-12); }
.reg-section .field--check .field__label { font-size: var(--fs-ui); line-height: 20px; }

/* The mockup stacks the button and the "already have an account" line, and closes
   the form with a 62px trust strip. */
.reg-submit { display: grid; gap: var(--space-24); }
.reg-submit .btn { width: 100%; height: 64px; border-radius: var(--radius-xl); }
.reg-submit__alt { font-size: var(--fs-body-sm); line-height: 18px; color: var(--color-muted); }
.reg-footnote {
  display: flex; align-items: center; gap: var(--space-24); height: 62px;
  box-shadow: inset 0 1px 0 var(--color-border);
  font-size: var(--fs-label); font-weight: 700; line-height: 14.3px; color: var(--color-muted);
}

/* ── verification ─────────────────────────────────────────────────────── */
.verify { display: grid; gap: var(--space-32); max-width: min(520px, 100%); }
.verify__code { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-12); }
.verify__code input {
  height: 72px; padding: 0; text-align: center;
  font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 700;
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
}
.verify__code input:focus { border-color: var(--color-brand); box-shadow: var(--focus-ring); outline: none; }
.verify__sent { display: grid; gap: var(--space-4); padding: var(--space-16); background: var(--color-cream-2); border-radius: var(--radius-sm); }
.verify__sent b { font-size: var(--fs-label); font-weight: 700; line-height: 14.3px; color: var(--color-muted); }
.verify__sent span { font-size: var(--fs-body-sm); line-height: 20px; color: var(--color-ink); }
.verify__resend { display: flex; align-items: center; gap: var(--space-16); flex-wrap: wrap; font-size: var(--fs-body-sm); color: var(--color-muted); }
.verify__stepper { display: flex; gap: var(--space-16); font-size: var(--fs-label); font-weight: 700; line-height: 14.3px; color: var(--color-muted); }
.verify__stepper .is-done { color: var(--color-brand); }
.verify__stepper .is-now { color: var(--color-ink); }

/* ── mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .reg-rail { width: auto; padding: var(--space-24) var(--container-pad-mobile); }
  .reg-rail__type { margin-top: var(--space-24); padding-bottom: 0; }
  .reg-rail__h { font-size: 36px; line-height: 38px; }
  .reg-rail__sub { font-size: var(--fs-ui); line-height: 20px; }
  .reg-rail__photo { display: none; }

  .reg-workspace { gap: var(--space-24); padding: var(--space-24) var(--container-pad-mobile); }
  .reg-progress { gap: var(--space-16); padding: var(--space-12) 0; overflow-x: auto; scrollbar-width: none; }
  .reg-progress::-webkit-scrollbar { display: none; }
  .reg-progress__step { white-space: nowrap; font-size: var(--fs-label); line-height: 14.3px; }
  .reg-intro__h { font-size: var(--fs-h5); line-height: 38px; }
  .reg-form { gap: var(--space-24); }
  .reg-row, .reg-row--three { grid-template-columns: 1fr; gap: var(--space-16); }
  .reg-form .field input, .reg-form .field select { height: 52px; }
  .reg-dob { grid-template-columns: 1fr 1fr 1.4fr; }   /* на 390 равные не помещаются */
  .reg-submit { flex-direction: column; align-items: stretch; gap: var(--space-12); }
  .reg-submit .btn { min-width: 0; }
  .reg-footnote { flex-direction: column; gap: var(--space-4); }

  .verify__code { grid-template-columns: repeat(6, 1fr); gap: var(--space-8); }
  .verify__code input { height: 56px; font-size: var(--fs-h6); }
}