/* Ronnie — the sign-in screen of the app outside a messenger (js/screens/login.js) and the quiet «Выйти» of the
   home screen. Uses the tokens, the buttons, the cards and the keyframes of app.css. */

.login__scroll { display: flex; flex-direction: column; align-items: center; padding-bottom: var(--s5); }
.login__ronnie {
  /* as big as the screen lets him be: what is left of its height once the steps and the footer have their room */
  --ronnie-size: clamp(120px, calc(var(--app-h) - var(--safe-top) - var(--safe-bottom) - 580px), 264px);
  margin: calc(var(--ronnie-size) * -0.05) 0 calc(var(--ronnie-size) * -0.08);
}
.login__body { flex: none; display: flex; flex-direction: column; align-items: center; width: 100%; animation: rise 0.42s var(--ease) both; }
.login__title { font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; text-align: center; }
.login__lead { margin-top: 4px; font-size: 16px; line-height: 1.4; color: var(--ink-2); text-align: center; }

/* where the code comes from, in three plain steps */
.login__steps { width: 100%; margin: var(--s4) 0 0; padding: var(--s1) var(--s4); list-style: none; }
.login__steps li { display: flex; align-items: center; gap: var(--s3); padding: 11px 0; font-size: 15.5px; line-height: 1.4; }
.login__steps li + li { border-top: 1px solid var(--line); }
.login__steps li > span:last-child { min-width: 0; }
.login__steps b { font-weight: 800; white-space: nowrap; }
.login__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 800;
}
.login__chat { margin-top: var(--s3); min-height: 48px; }

.login__foot { position: relative; flex: none; padding: var(--s1) var(--s4) calc(var(--safe-bottom) + var(--s3)); }
.login__foot::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 18px;
  background: linear-gradient(to top, var(--bg), rgba(245, 239, 222, 0));
  pointer-events: none;
}
.login__label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--ink-2); text-align: center; }
.login__code {
  display: block;
  width: 100%;
  height: 60px;
  padding: 0 var(--s3);
  border: 0;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--line);
  color: var(--ink);
  caret-color: var(--accent);
  font: inherit;
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
  text-align: center;
  outline: none;
  transition: box-shadow 0.15s ease;
}
.login__code::placeholder { color: var(--ink-3); opacity: 0.45; }
.login__code:focus { box-shadow: inset 0 0 0 2px var(--accent); }
.login__code.is-wrong { box-shadow: inset 0 0 0 2px var(--accent-deep); animation: shake 0.32s ease; }
.login__code[disabled] { opacity: 0.6; }
.login__note { min-height: 40px; margin: 6px 0 var(--s2); font-size: 14px; line-height: 1.4; color: var(--ink-3); text-align: center; }
.login__note.is-wrong { color: var(--accent-ink); font-weight: 600; }

@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* a lower window: everything is a little tighter, so the whole screen is seen without scrolling */
@media (max-height: 760px) {
  .login__scroll { padding-bottom: var(--s3); }
  .login__ronnie { --ronnie-size: clamp(88px, calc(var(--app-h) - var(--safe-top) - var(--safe-bottom) - 500px), 200px); }
  .login__title { font-size: 24px; }
  .login__steps { margin-top: 10px; }
  .login__steps li { padding: 8px 0; font-size: var(--fs-sm); }
  .login__code { height: 54px; font-size: 26px; }
}
/* the keyboard is up: Ronnie and the steps give their room to the code field */
.kb-open .login__ronnie { display: none; }

/* ================= Главная: «Выйти» ================= */
.homefoot { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--s2); }