/* register-email.css — S5/S6 email registration UI, aligned to the Clike design
   etalon (clike-эталон-дизайна.html) and the existing auth page (auth.css).
   Inputs/buttons/social are inherited from auth.css (the site's established auth
   look); this file only styles the new bits: field hints/errors, the disabled-
   social hint, and the modals. Etalon references: modal r16 + 1px --panel-bd +
   shadow 0 20px 50px + dark gradient; input focus var(--btn-bd-active) + ring
   rgba(255,133,0,.14); canonical mobile breakpoint 520px. */

/* Compact fields: labels sit tight to their inputs (override the global
   `label{margin:12px 0 6px}` from style.css), less space between fields. */
.reg-field{ display:grid; gap:4px; margin:0 0 14px; }
.reg-field > label{ margin:0; font-weight:600; font-size:13px; line-height:1.2; }
.reg-field input{ width:100%; box-sizing:border-box; }
.reg-field__hint{ margin:0; font-size:12px; line-height:1.3; color:var(--muted, #8b97a9); }
.reg-field--error input{ border-color:var(--danger-fg, #ff4d4d) !important; }
.reg-form-error{ display:none; margin:0 0 12px; color:var(--danger-fg, #ff4d4d); font-weight:600; font-size:13px; }

/* Disabled social hint (the disabled state itself is styled by auth.css). */
.reg-social-hint{ margin:10px 0 0; font-size:12px; color:var(--muted, #8b97a9); text-align:center; line-height:1.4; }

/* Modal overlay — matches the etalon .ov-scrim + .modal.
   ARCHITECTURE: the root is a STABLE fullscreen layer. It is never resized by the
   keyboard — shrinking it to visualViewport.height forced backdrop + centering + panel
   to be recomputed on every visualViewport event, which is what made the screen jitter.
   Only the PANEL is repositioned (--panel-top, computed from visualViewport in JS).
     root (fixed, inset:0) > backdrop (absolute, inset:0) > positioner > panel */
.reg-modal{ position:fixed; inset:0; width:100%; height:100%; z-index:500;
  overflow:hidden; background:transparent; overscroll-behavior:contain; }
.reg-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.82);
  pointer-events:auto; }
.reg-modal__positioner{ position:absolute; inset:0; pointer-events:none; }
.reg-modal[hidden]{ display:none; }
/* JS pins the body (position:fixed at the saved offset) — iOS ignores overflow:hidden. */
body.reg-modal-open{ overscroll-behavior:none; }
/* The panel is the only thing that moves: left/transform centres it horizontally,
   --panel-top (set by JS) places it vertically inside the visible area. Never both
   `top` and translateY on the same axis. */
.reg-modal__panel{ position:absolute; left:50%; transform:translateX(-50%);
  top:var(--panel-top, 12px); pointer-events:auto;
  width:calc(100% - 32px); max-width:420px;
  max-height:var(--panel-max-height, 100%);
  background:var(--panel, #141416); color:var(--ink, #e6eaf0);
  border:1px solid var(--panel-bd, rgba(255,255,255,.10)); border-radius:16px;
  padding:18px 20px 20px; box-shadow:0 20px 50px rgba(0,0,0,.5); box-sizing:border-box;
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
@media (prefers-reduced-motion: no-preference){
  .reg-modal__panel{ transition:top 120ms ease-out; }
}
:root[data-theme="dark"] .reg-modal__panel{ background:linear-gradient(180deg,#1a1a1e,#0b0b0d); }
.reg-modal__title{ margin:0 0 8px; font-size:16px; font-weight:700; line-height:1.2; }
.reg-modal__lead{ margin:0 0 4px; font-size:13px; color:var(--muted, #8b97a9); }
.reg-modal__masked{ font-weight:700; color:var(--ink, #e6eaf0); }


/* Single one-time-code input over six visual cells. Six maxlength=1 inputs drop digits
   on iOS autofill; one real input fixes it. The input stays present (never display:none
   / visibility:hidden) so iOS autofill + VoiceOver work — only its ink is transparent. */
.reg-otc{ position:relative; margin:16px 0 10px; }
.reg-otc__cells{ display:flex; gap:8px; justify-content:center; pointer-events:none; }
.reg-otc__cell{ width:44px; height:54px; display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:800; color:var(--ink, #e6eaf0);
  border:1px solid var(--btn-bd, rgba(255,255,255,.14)); border-radius:12px;
  background:var(--btn-bg, rgba(255,255,255,.04)); box-sizing:border-box;
  transition:border-color .15s, box-shadow .15s; }
.reg-otc__cell.is-active{ border-color:var(--btn-bd-active, rgba(255,178,26,.42));
  box-shadow:0 0 0 3px rgba(255,133,0,.14); }
/* The global `input:focus{border-color:orange;box-shadow:0 0 0 3px rgba(255,122,0,.14)}`
   in style.css painted an orange ring around this full-width input — i.e. around ALL six
   cells at once. Reset every skin the global rule applies, in both states. Only the
   active CELL may show the orange focus. */
.reg-otc__input,
.reg-otc__input:focus,
.reg-otc__input:focus-visible{ position:absolute; inset:0; width:100%; height:100%;
  margin:0; padding:0; border:0; border-radius:0; background:transparent; background-color:transparent;
  color:transparent; caret-color:transparent; box-shadow:none; outline:0;
  text-align:center; font-size:24px; -webkit-tap-highlight-color:transparent;
  -webkit-text-fill-color:transparent; }

/* Close affordance: a modal you cannot leave is a trap. 44x44 touch target.
   The head is sticky so the title and the × stay visible while the panel scrolls. */
.reg-modal__head{ display:flex; align-items:flex-start; gap:8px; padding:0 0 4px;
  background:transparent; border:0; box-shadow:none; border-radius:0; }
.reg-modal__head .reg-modal__title{ margin:0; flex:1 1 auto; padding-right:0; }
.reg-modal__close{ flex:0 0 auto; width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  appearance:none; border:0; background:transparent; color:var(--muted, #8b97a9);
  border-radius:12px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.reg-modal__close:hover{ color:var(--ink, #e6eaf0); background:rgba(255,255,255,.06); }
.reg-modal__close:focus-visible{ outline:2px solid var(--btn-bd-active, rgba(255,178,26,.6));
  outline-offset:2px; color:var(--ink, #e6eaf0); }
.reg-modal__title{ padding-right:44px; }

/* Timer sits under the cells; the error sits UNDER the primary button. */
.reg-modal__timer{ margin:0 0 12px; font-size:13px; color:var(--muted, #8b97a9); text-align:center; }
.reg-modal__error{ display:none; margin:10px 0 0; color:var(--danger-fg, #ff4d4d);
  font-weight:600; font-size:13px; text-align:center; line-height:1.35; }
/* Flow truly gone: no live cells / countdown for a session that no longer exists. */
.reg-modal.is-expired .reg-otc,
.reg-modal.is-expired .reg-modal__timer{ display:none; }
.reg-modal__actions{ display:grid; gap:10px; }
.reg-modal__actions .btn{ width:100%; }
.btn.is-loading{ opacity:.7; cursor:progress; }

@media (max-width:520px){
  .reg-modal__panel{ padding:18px; }
  .reg-otc__cell{ width:40px; height:50px; font-size:22px; }
  .reg-otc__cells{ gap:6px; }
  .reg-otc__input{ font-size:22px; }
}

/* S9 — cabinet «Email» fold state block (reuses the modal + .reg-field above). */
.pu-profile-data__email{ display:grid; gap:10px; }
.pe-form{ display:grid; gap:12px; margin:0; }
.pe-lead{ margin:0; font-size:14px; font-weight:700; line-height:1.25; }
.pe-masked{ margin:0; font-size:14px; font-weight:700; letter-spacing:.01em; word-break:break-all; }
.pe-status{ margin:0; font-size:14px; font-weight:700; }
.pe-status--ok{ color:var(--ok-fg, #34d399); }
.pe-note{ margin:0; font-size:12px; line-height:1.4; }
.pe-submit{ width:100%; }

/* Primary CTA — copied from the etalon's .btn--primary (clike-эталон-дизайна.html):
   background linear-gradient(135deg,#e8651c,#f5872e) (the etalon's own; the two stops sit
   so close it reads flat), transparent border, white text, weight 560, radius 999 and —
   the key difference from the current site button — NO glow.
   !important + full-specificity selectors are REQUIRED here, not sloppiness: auth.css
   ships `.register-submit{border-radius:16px!important}` and admin-core.css:630 carries
   `body.user-mode.auth-mode .auth-register-card .auth-register-form button.register-submit`
   (0,5,1) with the orange glow shadow, and `body.user-mode.auth-mode .btn` (0,3,1) forces
   border-radius:14px!important. The modal buttons therefore need ID selectors (1,2,0) to
   win. Height stays touch-sized: these are auth CTAs, not the 28px admin chips. */
body.user-mode.auth-mode .auth-register-card .auth-register-form .register-submit,
body.user-mode.auth-mode .auth-register-card .auth-register-form button.register-submit,
body.user-mode.auth-mode .register-submit,
.auth-card .register-submit,
#regCodeModal .reg-modal__panel .btn,
#regDomainModal .reg-modal__panel .btn{
  display:inline-flex!important; align-items:center!important; justify-content:center!important;
  gap:4px; min-height:44px!important; padding:0 18px!important;
  border:1px solid transparent!important; border-radius:999px!important;
  background:linear-gradient(135deg,#e8651c,#f5872e)!important;
  background-image:linear-gradient(135deg,#e8651c,#f5872e)!important;
  color:#fff!important; font-weight:560!important; letter-spacing:.01em;
  text-decoration:none!important; white-space:nowrap; box-shadow:none!important;
  text-shadow:none!important;
  transition:filter .15s,transform .12s!important;
}
body.user-mode.auth-mode .auth-register-card .auth-register-form button.register-submit:hover,
body.user-mode.auth-mode .register-submit:hover,
#regCodeModal .reg-modal__panel .btn:hover,
#regDomainModal .reg-modal__panel .btn:hover{ filter:brightness(1.06)!important; color:#fff!important; box-shadow:none!important; }
body.user-mode.auth-mode .auth-register-card .auth-register-form button.register-submit:active,
body.user-mode.auth-mode .register-submit:active,
#regCodeModal .reg-modal__panel .btn:active,
#regDomainModal .reg-modal__panel .btn:active{ transform:translateY(.5px)!important; box-shadow:none!important; }
#regCodeModal .reg-modal__panel .btn:focus-visible,
#regDomainModal .reg-modal__panel .btn:focus-visible,
body.user-mode.auth-mode .register-submit:focus-visible{ outline:2px solid var(--btn-bd-active, rgba(255,178,26,.6)); outline-offset:2px; }