/* ясно. — login screen: Yandex ID for company owners, login + password for employees. */

.ya-login { display: grid; gap: 10px; }
.ya-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 20px; border-radius: var(--r-lg);
  background: #000; color: #fff;
  font: 600 15px/1 var(--font); letter-spacing: -.005em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .24);
  transition: background var(--d1) var(--ease), transform var(--d1) var(--ease), opacity var(--d1) var(--ease);
}
.ya-btn:hover { background: #1f1f1f; }
.ya-btn:active { transform: translateY(1px); }
.ya-btn .ya-mark { width: 24px; height: 24px; flex: none; }
.ya-btn.is-busy { opacity: .7; pointer-events: none; }
.ya-btn.is-off { background: var(--sunken); color: var(--ink-3); box-shadow: none; cursor: not-allowed; }
.ya-btn.is-off .ya-mark { filter: grayscale(1); opacity: .5; }
.ya-note { font: 400 13px/20px var(--font); color: var(--ink-3); }
.ya-off { font: 400 13px/20px var(--font); color: var(--k-out-ink); }

/* Dark theme: the official «white» variant of the button. */
html[data-theme="dark"] .ya-btn { background: #fff; color: #000; box-shadow: none; }
html[data-theme="dark"] .ya-btn:hover { background: #e9e9e6; }
html[data-theme="dark"] .ya-btn.is-off { background: var(--sunken); color: var(--ink-3); }

.login-sep {
  display: flex; align-items: center; gap: 12px; margin: 6px 0 -2px;
  font: 600 12px/16px var(--font); letter-spacing: .02em; color: var(--ink-3);
}
.login-sep::before, .login-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Two-factor login: the code step of the login form (cabinet and admin panel). */
.code-step { display: grid; gap: 14px; }
.code-lede { display: flex; gap: 10px; align-items: flex-start; font: 400 14px/21px var(--font); color: var(--ink-2); }
.code-lede .ic { color: var(--brand); flex: none; margin-top: 1px; }
.code-step [name="code"] { font: 600 20px/1 var(--mono); letter-spacing: .18em; text-align: center; height: 52px; }
.code-step [data-role="code-back"] { justify-self: start; }

/* Profile: two-factor setup */
.tfa-card { margin-top: 20px; max-width: 720px; }
.tfa-card .form-body > p { font: 400 14px/21px var(--font); color: var(--ink-2); }
.tfa-qr { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: center; }
.tfa-qr img { width: 200px; height: 200px; border-radius: var(--r-md); background: #fff; box-shadow: var(--e1); image-rendering: pixelated; }
.tfa-qr > div { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.tfa-secret { font: 600 14px/20px var(--mono); word-break: break-all; padding: 8px 10px; border-radius: var(--r-md); background: var(--sunken); }
.rc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin: 0; padding: 12px 16px 12px 36px; border-radius: var(--r-md); background: var(--sunken); }
.rc-list code { font: 600 14px/22px var(--mono); }
@media (max-width: 560px) {
  .tfa-qr { grid-template-columns: 1fr; justify-items: center; }
  .rc-list { grid-template-columns: 1fr; }
}