/* Вход в CRM на OND: страница входа, экраны причины и выбор агентства.
   Свой каркас без навбара и футера OND; цвета, кегли и отступы - токены
   `common.css`. Префикс файла - `re-`. */

.re-body{margin:0;font-family:Inter,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:var(--font-body);line-height:var(--lh-ui);color:var(--color-ink);
  background:var(--color-surface);-webkit-font-smoothing:antialiased}
.re-body *{box-sizing:border-box}
.re-body a{color:var(--color-accent);text-decoration:none}
.re-body a:hover{text-decoration:underline}
.re-body :focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

.re-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh}

/* Левая половина: фото города под фирменным градиентом. */
.re-brand{position:relative;overflow:hidden;color:var(--color-white);
  background:linear-gradient(135deg,rgba(var(--color-accent-rgb),.86) 0%,
    rgba(var(--color-ink-rgb),.84) 100%),url("../images/realty/facade.55c2ba402fcb.webp") center/cover;
  display:flex;flex-direction:column;align-items:center;padding:var(--gap-6)}
.re-brand>*{width:100%;max-width:560px}
.re-logo{font-size:var(--font-title);font-weight:700;display:inline-flex;align-items:center;
  gap:var(--gap-3)}
.re-body .re-logo,.re-body .re-logo:hover{color:var(--color-white);text-decoration:none}
.re-logo-sub{font-size:var(--font-small);font-weight:600;opacity:.8;padding-left:var(--gap-3);
  border-left:1px solid rgba(var(--color-white-rgb),.35)}
.re-mid{margin:auto 0;padding:var(--gap-6) 0}
.re-mid h2{font-size:var(--font-display);line-height:var(--lh-heading);font-weight:700;
  margin:0 0 var(--gap-5)}
.re-list{list-style:none;margin:0;padding:0}
.re-list li{display:flex;gap:var(--gap-3);align-items:flex-start;margin-bottom:var(--gap-3);
  opacity:.92}
.re-list svg{flex:none;margin-top:var(--gap-1)}
.re-copy{font-size:var(--font-small);opacity:.7}

/* Правая половина: верхняя строка, форма по центру, ссылки внизу. */
.re-side{display:flex;flex-direction:column;padding:var(--gap-5) var(--gap-6)}
.re-top{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-3)}
.re-back{display:inline-flex;align-items:center;gap:var(--gap-2);min-height:44px;
  font-size:var(--font-small);font-weight:600}
.re-body .re-back{color:var(--color-ink)}
.re-langs{display:flex;flex:none;margin:0 0 0 auto;border:1px solid var(--color-border);
  border-radius:var(--radius-sm);overflow:hidden}
.re-lang{border:none;background:var(--color-surface);color:var(--color-text-secondary);
  cursor:pointer;font:600 var(--font-caption) Inter,sans-serif;padding:0 var(--gap-3);
  min-width:44px;height:44px}
.re-lang[aria-pressed="true"]{background:var(--color-subtle);color:var(--color-ink)}

.re-form{width:100%;max-width:400px;margin:auto;padding:var(--gap-6) 0}
.re-form--center{text-align:center}
.re-form h1{font-size:var(--font-title);font-weight:700;line-height:var(--lh-heading);
  margin:0 0 var(--gap-2)}
.re-sub{color:var(--color-text-secondary);margin:0 0 var(--gap-5)}
.re-ico{width:48px;height:48px;margin:0 auto var(--gap-4);display:grid;place-items:center;
  border-radius:var(--radius-full);background:var(--color-info-bg);color:var(--color-info)}

.re-btn{width:100%;height:48px;padding:0 var(--gap-5);border:none;border-radius:10px;
  font:600 var(--font-body) Inter,sans-serif;cursor:pointer;display:flex;
  align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--color-accent) 0%,var(--color-ink) 100%)}
.re-body .re-btn{color:var(--color-white);text-decoration:none}
.re-btn+.re-btn{margin-top:var(--gap-3)}
.re-btn--secondary{background:var(--color-surface);border:1.5px solid var(--color-border)}
.re-body .re-btn--secondary{color:var(--color-ink)}

/* Форма входа: поля, пароль с кнопкой показа, галка, капча, помощь. */
.re-field{margin-bottom:var(--gap-3)}
.re-label{display:flex;justify-content:space-between;align-items:baseline;gap:var(--gap-2);
  margin-bottom:var(--gap-1);font-size:var(--font-small);font-weight:600}
.re-label a{font-weight:600}
.re-inp{width:100%;height:48px;padding:0 48px 0 var(--gap-3);border:1.5px solid var(--color-border);
  border-radius:10px;background:var(--color-surface);color:var(--color-ink);
  font:var(--font-body) Inter,sans-serif}
.re-inp:focus{outline:none;border-color:var(--color-accent)}
.re-inp--error{border-color:var(--color-danger)}
.re-pass{position:relative}
.re-eye{position:absolute;top:0;right:0;width:48px;height:48px;display:grid;place-items:center;
  border:none;background:none;color:var(--color-text-secondary);cursor:pointer}
.re-eye[aria-pressed="true"]{color:var(--color-ink)}
.re-err{display:block;min-height:var(--gap-4);margin-top:var(--gap-1);
  font-size:var(--font-caption);color:var(--color-danger)}
.re-check{display:flex;gap:var(--gap-3);align-items:flex-start;margin:var(--gap-2) 0;
  cursor:pointer}
.re-check input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--color-accent)}
.re-check-t{display:block;font-size:var(--font-small);font-weight:600}
.re-check-d{display:block;font-size:var(--font-caption);color:var(--color-text-secondary)}
.re-captcha{min-height:65px;margin:var(--gap-3) 0 var(--gap-4)}
.re-help{margin-top:var(--gap-5);padding-top:var(--gap-4);border-top:1px solid var(--color-subtle)}
.re-help h2{font-size:var(--font-body);font-weight:700;margin:0 0 var(--gap-3)}
.re-case{margin:0 0 var(--gap-3);font-size:var(--font-small);color:var(--color-text-secondary)}
.re-case:last-child{margin-bottom:0}
.re-case b{display:block;color:var(--color-ink);font-weight:600}

/* Выбор агентства: радио с подписью и ролью. */
.re-pick{margin:0 0 var(--gap-5);padding:0 var(--gap-4);border:1px solid var(--color-border);
  border-radius:10px;text-align:left}
.re-opt{display:flex;gap:var(--gap-3);align-items:flex-start;padding:var(--gap-3) 0;
  border-bottom:1px solid var(--color-subtle);cursor:pointer}
.re-opt:last-child{border-bottom:none}
.re-opt input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--color-accent)}
.re-opt-name{display:block;font-size:var(--font-small);font-weight:600}
.re-opt-role{display:block;font-size:var(--font-caption);color:var(--color-text-secondary)}

.re-links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap-2) var(--gap-5);
  font-size:var(--font-small)}
.re-body .re-links a{color:var(--color-text-secondary)}

/* Планшет и телефон: панель сжимается в фирменную полосу над формой. */
@media (max-width:1024px){
  .re-page{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .re-brand{padding:var(--gap-4) var(--gap-5)}
  .re-mid{margin:0;padding:var(--gap-3) 0 0}
  .re-mid h2{font-size:var(--font-body);font-weight:600;opacity:.9;margin:0}
  .re-list,.re-copy{display:none}
  .re-side{padding:var(--gap-3) var(--gap-5) var(--gap-5)}
  .re-form{padding:var(--gap-5) 0 var(--gap-6)}
}
@media (max-width:640px){
  .re-brand{padding:var(--gap-4)}
  .re-side{padding:var(--gap-2) var(--gap-4) var(--gap-5)}
}