/* login.css — стили страниц входа, OIDC и блокировки */

/* ── layout ─────────────────────────────────────────────── */
.login-grid{ display:grid; grid-template-columns:1fr 1fr; min-height:100vh; }
.login-form{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 32px; position:relative; min-height:100vh; background:var(--paper); }
.login-aside{ position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; }
@media(max-width:700px){ .login-grid{ grid-template-columns:1fr; } .login-aside{ display:none !important; } }

/* ── shared atoms ───────────────────────────────────────── */
.ln-wrap{ width:100%; max-width:360px; }
.ln-enter{ animation:none; } /* wrapper class drives the transition, not the pane */

/* ─────────────────────────────────────────────────────────
   SCREEN TRANSITIONS — единый стиль: scale + blur (растворение)
   Применяется ко всем переходам логина / OIDC / 2FA.
   ───────────────────────────────────────────────────────── */
/* base hidden — предотвращает вспышку полностью видимого элемента до старта анимации */
.ln-enter-fwd, .ln-enter-back, .ln-enter-up { opacity: 0; }
.ln-enter-fwd  { animation: lnInFwd  .5s cubic-bezier(.22,.9,.3,1) both; }
.ln-exit-fwd   { animation: lnOutFwd .5s cubic-bezier(.22,.9,.3,1) both; pointer-events:none; }
.ln-enter-back { animation: lnInBack .5s cubic-bezier(.22,.9,.3,1) both; }
.ln-exit-back  { animation: lnOutBack .5s cubic-bezier(.22,.9,.3,1) both; pointer-events:none; }
.ln-enter-up   { animation: lnInUp   .5s cubic-bezier(.34,1.4,.64,1) both; }
.ln-exit-up    { animation: lnOutDown .3s cubic-bezier(.4,0,1,1) both; pointer-events:none; }

/* dissolve slider — pronounced scale + blur */
@keyframes lnInFwd   { from{ opacity:0; transform:scale(.82); filter:blur(12px); } 55%{ filter:blur(0); } to{ opacity:1; transform:scale(1); filter:blur(0); } }
@keyframes lnOutFwd  { from{ opacity:1; transform:scale(1); filter:blur(0); } to{ opacity:0; transform:scale(1.14); filter:blur(14px); } }
@keyframes lnInBack  { from{ opacity:0; transform:scale(1.14); filter:blur(12px); } 55%{ filter:blur(0); } to{ opacity:1; transform:scale(1); filter:blur(0); } }
@keyframes lnOutBack { from{ opacity:1; transform:scale(1); filter:blur(0); } to{ opacity:0; transform:scale(.82); filter:blur(14px); } }
@keyframes lnInUp    { from{ opacity:0; transform:scale(.88); filter:blur(8px); } to{ opacity:1; transform:scale(1); filter:blur(0); } }
@keyframes lnOutDown { from{ opacity:1; transform:scale(1); filter:blur(0); } to{ opacity:0; transform:scale(.94); filter:blur(8px); } }

/* ─────────────────────────────────────────────────────────
   SUCCESS PANE — финал: аватар летит в угол (JS-клон),
   карточка растворяется, затем Atlas раскрывается из угла.
   ───────────────────────────────────────────────────────── */
.success-inner{ display:flex; flex-direction:column; gap:24px; }
.success-av-row{ display:flex; flex-direction:column; align-items:center; gap:14px; padding-top:8px; }
.success-av{ animation: popIn .4s var(--spring) both; }
.success-title{ text-align:center; animation: fadeUp .4s var(--ease) .1s both; opacity:0; animation-fill-mode:forwards; }

/* exit: всё кроме аватара растворяется (аватар уносит летящий клон) */
.is-going .success-title{ animation: textFadeOut .3s ease both !important; }
.is-going .success-inner > .card,
.is-going .success-inner > div:not(.success-av-row){ animation: textFadeOut .35s ease both !important; }

@keyframes textFadeOut{ to{ opacity:0; transform:translateY(6px); } }
@keyframes popIn{ from{ transform:scale(.7); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* ── RP context strip ───────────────────────────────────── */
.rp-strip{ display:flex; align-items:center; gap:10px; padding:10px 13px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card-2); margin-bottom:22px; }
.rp-logo{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); font-weight:700; font-family:var(--f-display); font-size:15px; flex:none; border:1px solid var(--accent-line); }

/* ── divider ────────────────────────────────────────────── */
.or-line{ display:flex; align-items:center; gap:10px; margin:16px 0; color:var(--ink-3); font-size:calc(var(--u) - 3px); font-weight:600; }
.or-line::before,.or-line::after{ content:''; flex:1; height:1px; background:var(--line); }

/* ── OTP cells ──────────────────────────────────────────── */
.otp-row{ display:flex; gap:7px; justify-content:center; margin:18px 0; }
.otp-cell{ width:42px; height:52px; border:1.5px solid var(--line); border-radius:var(--radius-sm); display:grid; place-items:center; font-size:20px; font-family:var(--f-mono); font-weight:600; transition:border-color .15s, background .15s; background:var(--card); color:var(--ink); }
.otp-cell.active{ border-color:var(--accent); background:var(--accent-soft); }
.otp-cell.filled{ border-color:var(--line-2); }
.otp-cell.shake{ animation: shake .38s var(--ease) both; }
@keyframes shake{ 0%,100%{ transform:translateX(0); } 15%{ transform:translateX(-5px); } 45%{ transform:translateX(5px); } 75%{ transform:translateX(-3px); } }
@keyframes caretBlink{ 0%,100%{ opacity:1; } 50%{ opacity:0; } }

/* ── consent scope list ─────────────────────────────────── */
.scope-list{ display:flex; flex-direction:column; gap:7px; margin:12px 0 14px; }
.scope-row{ display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card); cursor:pointer; transition:border-color .15s, background .15s; }
.scope-row.on{ border-color:var(--accent-line); background:var(--accent-soft); }
.scope-row.locked{ cursor:default; opacity:.9; }
.scope-box{ width:18px; height:18px; flex:none; border:1.5px solid var(--line-3); border-radius:5px; display:grid; place-items:center; background:var(--card); margin-top:1px; transition:all .14s; }
.scope-row.on .scope-box{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* ── who strip ──────────────────────────────────────────── */
.who-strip{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card); margin-bottom:14px; }
.who-av{ width:32px; height:32px; border-radius:99px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font-weight:700; font-size:12px; flex:none; }

/* ── organization chooser (мультиорг, Google-style account/org picker) ── */
.org-choose-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.org-choice{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:11px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card); cursor:pointer; font-family:inherit; color:var(--ink); transition:transform .15s var(--ease), border-color .15s, background .15s; }
.org-choice:hover{ border-color:var(--line-3); background:var(--card-2); transform:translateX(2px); }
.org-choice:active{ transform:translateX(2px) scale(.995); }
.org-choice-av{ position:relative; width:40px; height:40px; flex:none; border-radius:11px; display:grid; place-items:center; font-family:var(--f-mono); font-weight:700; font-size:calc(var(--u) - 2px); letter-spacing:-.02em; background:var(--card-2); color:var(--ink-2); border:1px solid var(--line-2); }
.org-choice-av[data-state="active"]{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line); }
.org-choice-av .st-dot{ position:absolute; right:-3px; bottom:-3px; width:12px; height:12px; border-radius:99px; border:2px solid var(--card); }
.org-choice-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.org-choice-name{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.org-choice-detail{ font-size:calc(var(--u) - 3px); line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.org-choice-cta{ flex:none; display:flex; align-items:center; }
.org-context{ display:flex; align-items:center; gap:11px; padding:9px 12px; border:1px solid var(--accent-line); border-radius:var(--radius-sm); background:var(--accent-soft); margin-bottom:14px; }

/* ── handoff diagram (redirect pane) ────────────────────── */
.handoff{ display:flex; align-items:center; gap:14px; }
.hf-node{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.hf-blob{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-weight:700; font-family:var(--f-display); font-size:16px; background:var(--card-2); border:1px solid var(--line); }
.hf-blob.idp{ background:var(--ink); color:var(--paper); }
.hf-line{ flex:1; height:1px; background:var(--line); position:relative; }
.hf-line::after{ content:''; position:absolute; top:-4px; right:-1px; width:9px; height:9px; border-top:1.5px solid var(--line); border-right:1.5px solid var(--line); transform:rotate(45deg); }

/* ── centered state (success / error / redirect) ───────── */
.ln-state{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; }
.ln-ic{ width:56px; height:56px; border-radius:16px; display:grid; place-items:center; }
.ln-ic.ok{ background:var(--ok-soft); color:var(--ok); }
.ln-ic.err{ background:var(--danger-soft); color:var(--danger); }
.ln-ic.warn{ background:var(--warn-soft); color:var(--warn); }

/* ── spinner ────────────────────────────────────────────── */
.ln-spinner{ width:48px; height:48px; border:2px solid var(--line-2); border-top-color:var(--accent); border-radius:50%; animation:ln-spin .8s linear infinite; }
@keyframes ln-spin{ to{ transform:rotate(360deg); } }

/* ── shake (form error) ─────────────────────────────────── */
.shake{ animation:ln-shake .3s var(--ease); }
@keyframes ln-shake{ 0%,100%{ transform:none; } 25%{ transform:translateX(-5px); } 75%{ transform:translateX(5px); } }

/* ── skin toggle pill ───────────────────────────────────── */
.skin-btn{ border:1px solid var(--line); background:var(--card); border-radius:99px; padding:5px 11px; cursor:pointer; font-size:calc(var(--u) - 2px); font-weight:600; color:var(--ink-3); transition:all .15s; }
.skin-btn:hover{ border-color:var(--line-2); color:var(--ink); }

/* ── locked-page specific ───────────────────────────────── */
.info-row{ display:flex; gap:10px; padding:11px 13px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card); }
.info-row + .info-row{ margin-top:7px; }
.reason-box{ padding:13px 14px; border:1px solid var(--danger-soft); border-radius:var(--radius-sm); background:var(--danger-soft); margin-bottom:18px; }


/* ── prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ── login mobile 390: без page-level horizontal overflow ──
   grid-children получают min-width:0; форма и CTA переносятся;
   верхние контролы (язык/тема) переносятся на свою строку. */
@media (max-width: 640px) {
  .login-grid { grid-template-columns: 1fr !important; }
  .login-grid > * { min-width: 0; }
  .login-aside { display: none; }
  .login-form { padding: 64px 16px 28px !important; min-width: 0; }
  .ln-wrap { max-width: 100%; min-width: 0; padding: 0 !important; }
  .ln-wrap .btn.block { white-space: normal; height: auto !important; min-height: calc(var(--ctrl-h) + 6px); padding-top: 8px; padding-bottom: 8px; }
  .login-form > div[style*="position:absolute"], .login-form > div[style*="position: absolute"] { position: absolute; top: 12px !important; right: 12px !important; left: 12px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  .rp-strip { flex-wrap: wrap; }
  .mono { overflow-wrap: anywhere; }
}