/* Login by code: login page tabs and the code input. Mentor «Коды» tab + cards: code-cards.css. */

.login-tabs {
  display: flex;
  max-width: 440px; /* same as .form-card below */
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--mshp-surface-2);
  border: 1px solid var(--mshp-line);
}

.login-tab {
  flex: 1 1 0;
  min-height: 40px;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--mshp-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.login-tab:hover { background: var(--mshp-surface-3); }
.login-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.login-tab.is-active {
  background: var(--mshp-paper);
  box-shadow: var(--shadow-sm);
}

/* Without JS both panels stay visible; the script hides the inactive one. */
.login-panel[hidden] { display: none; }
.login-panel > .muted { max-width: 440px; margin-top: var(--space-3); }

.form-card input.code-input {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  padding: 12px 14px;
}

.code-input::placeholder {
  color: var(--mshp-line-strong);
  letter-spacing: 0.18em;
}

.code-login-hint {
  display: block;
  margin-top: var(--space-1);
  font-size: 14px;
}

.code-sample {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--mshp-text);
}

.code-login-remember .checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
}

/* «Ты вошёл как …» bar for sessions opened with a code (shared school computers). */
.code-session-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  padding: 6px var(--space-4);
  background: var(--mshp-surface-3);
  border-bottom: 1px solid var(--mshp-line);
  color: var(--mshp-text);
  font-size: 14px;
  /* Sits right under the header (which has margin-bottom: --space-8) and keeps that gap below. */
  margin: calc(-1 * var(--space-8)) 0 var(--space-8);
}

.code-session-bar form { margin: 0; }

.code-session-bar button {
  border: 0;
  background: none;
  padding: 0;
  color: var(--mshp-sky-dark);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}