/* Sign-in by e-mail form. Everything is scoped to .email-login.
 * Light: the app theme tokens, with the same values as fallbacks.
 * Dark: body.tg-dark (Telegram) or body.vk-dark (VK) set by the host; the dark
 * palette is spelled out here, so it does not depend on the host stylesheet.
 * data-theme="light|dark" on the form root overrides both. */
.email-login {
  --el-bg: var(--bg, #FBF9F6);
  --el-card: var(--card, #F2ECE4);
  --el-ink: var(--ink, #2B2A28);
  --el-muted: var(--muted, #6E655C);
  --el-line: var(--line, #E2D9CE);
  --el-accent: var(--terra, #8A6F5C);
  --el-accent-deep: var(--terra-deep, #755C4B);
  --el-link: #6B5444;
  --el-danger: #A6462B;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 26rem;
  min-width: 0;
  margin: 0 auto;
  padding: 18px;
  background: var(--el-card);
  color: var(--el-ink);
  border: 1px solid var(--el-line);
  border-radius: var(--r-md, 16px);
  font: inherit;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
body.tg-dark .email-login,
body.vk-dark .email-login,
body .email-login[data-theme="dark"] {
  --el-bg: #1C1B18; --el-card: #2A2924; --el-ink: #F0EDE8; --el-muted: #A69C8F; --el-line: #3A3830;
  --el-accent: #8A6F5C; --el-accent-deep: #755C4B; --el-link: #D9C3B0; --el-danger: #E7A08A; color-scheme: dark;
}
/* After the dark rule on purpose: an explicit light theme wins over the host dark class. */
body .email-login[data-theme="light"] {
  --el-bg: #FBF9F6; --el-card: #F2ECE4; --el-ink: #2B2A28; --el-muted: #6E655C; --el-line: #E2D9CE;
  --el-accent: #8A6F5C; --el-accent-deep: #755C4B; --el-link: #6B5444; --el-danger: #A6462B; color-scheme: light;
}

.email-login form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.email-login p { margin: 0; }
.email-login [hidden] { display: none; }
.email-login .email-login-title { margin: 0; font: inherit; font-size: 20px; font-weight: 700; line-height: 1.3; }
.email-login .email-login-lead { font-size: 15px; }
.email-login .email-login-step { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.email-login .email-login-label { display: block; font-weight: 600; }
.email-login .email-login-input {
  display: block; box-sizing: border-box; width: 100%; min-width: 0; min-height: 48px; padding: 12px 14px;
  font: inherit; font-size: 16px; color: var(--el-ink); background: var(--el-bg);
  border: 1.5px solid var(--el-line); border-radius: var(--r-sm, 12px);
}
.email-login .email-login-code { font-variant-numeric: tabular-nums; letter-spacing: .3em; }
.email-login .email-login-input::placeholder { color: var(--el-muted); opacity: 1; letter-spacing: normal; }
.email-login .email-login-input:focus-visible { outline: 2px solid var(--el-accent); outline-offset: 1px; border-color: var(--el-accent); }
.email-login .email-login-input[aria-invalid="true"] { border-color: var(--el-danger); }
.email-login .email-login-input:disabled { opacity: .55; cursor: not-allowed; }

.email-login .email-login-hint { font-size: 13px; color: var(--el-muted); }
/* What the form cannot know about the letter: neutral, the existing palette only. */
.email-login .email-login-note {
  font-size: 13px; color: var(--el-ink); padding: 8px 10px; background: var(--el-bg);
  border-left: 3px solid var(--el-line); border-radius: 6px;
}
.email-login .email-login-error { font-size: 14px; font-weight: 600; color: var(--el-danger); }
.email-login .email-login-error::before { content: "! "; }
.email-login .email-login-status { font-size: 14px; color: var(--el-ink); }
/* Empty, the status region stays in the accessibility tree but takes no room (no flex gap). */
.email-login .email-login-status:empty { position: absolute; }

.email-login .email-login-submit {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-height: 48px;
  margin: 4px 0 0; padding: 13px 26px; font: inherit; font-weight: 600; color: #fff; background: var(--el-accent);
  border: 0; border-radius: 999px; cursor: pointer;
}
.email-login .email-login-submit:hover { background: var(--el-accent-deep); }
.email-login .email-login-submit:focus-visible { outline: 2px solid var(--el-ink); outline-offset: 2px; }
.email-login .email-login-submit:disabled { opacity: .55; cursor: not-allowed; }
.email-login[aria-busy="true"] .email-login-submit { cursor: progress; }

.email-login .email-login-actions { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; min-width: 0; }
.email-login .email-login-link {
  display: inline-flex; align-items: center; box-sizing: border-box; min-height: 44px; margin: 0; padding: 8px 2px;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--el-link); background: transparent; border: 0;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.email-login .email-login-link:hover { color: var(--el-ink); }
.email-login .email-login-link:focus-visible { outline: 2px solid var(--el-ink); outline-offset: 2px; border-radius: 6px; }
.email-login .email-login-link:disabled { opacity: .55; cursor: not-allowed; }