* { box-sizing: border-box; }

body { margin: 0; color: var(--color-ink); font-family: var(--font-body); }

.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background: var(--color-canvas);
}

/* «Сигнал · Бенто», как на посадочной: белая плитка на светлом фоне, без рамки и тени. */
.login-shell { width: min(100%, 440px); }
.login-card { padding: var(--space-7) var(--space-6); border-radius: var(--radius-6); background: var(--color-surface); }
/* Логотип — слово «cortex», как на посадочной; картинка-знак не нужна. Слово
   нарисовано стилем и скрыто от чтения с экрана: имя продукта и так в заголовке. */
.login-mark { display: none; }
.login-card::before { content: "cortex" / ""; display: block; margin-bottom: var(--space-6); font: 800 24px/1 var(--font-display); letter-spacing: -0.03em; }
/* Подпись над заголовком («Cortex», «Приглашение») — лаймовая пилюля. */
.eyebrow { display: inline-flex; align-items: center; min-height: 28px; margin: 0 0 var(--space-3); padding: 0 12px; border-radius: var(--radius-pill); background: var(--color-signal); color: var(--color-text); font: 600 13px/1 var(--font-body); }
h1 { margin: 0; font: 700 30px/1.15 var(--font-display); letter-spacing: -0.03em; text-wrap: balance; }
.login-copy { margin: var(--space-3) 0 var(--space-6); color: var(--color-text-secondary); }
.login-form { display: grid; gap: var(--space-2); }
.login-form label { margin-top: var(--space-2); color: var(--color-text-secondary); font-size: 14px; font-weight: 600; }
.login-form input { min-height: 48px; padding: 10px 16px; border: 1px solid var(--color-border-input); background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-3); font: inherit; }
.login-form input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-focus); }
.login-error { margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-3); background: var(--color-error-soft); color: var(--color-error-text); }
/* Пришли сюда, потому что сессия закончилась: объясняем, а не пугаем. */
.login-notice { margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-3); background: var(--color-warning-soft); color: var(--color-warning-text); }
.login-notice[hidden],
.login-error[hidden] { display: none; }
.register-team { display: grid; gap: var(--space-2); }
.register-team[hidden] { display: none; }
/* Главная кнопка — чёрная пилюля, как .button--primary. */
.login-submit {
  min-height: 52px;
  margin-top: var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font: 600 16px var(--font-body);
  cursor: pointer;
  transition: background-color var(--motion-fast) ease;
}

.login-submit:hover:not(:disabled) {
  background: var(--color-accent-lift);
}

.login-submit:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.login-submit:disabled {
  opacity: 0.65;
  cursor: wait;
}

@media (max-width: 520px) {
  /* На телефоне поля занимают почти всю ширину экрана, а не треть. */
  .login-body { padding: var(--space-4) var(--space-3); }
  .login-card { padding: var(--space-6) var(--space-4); border-radius: var(--radius-5); }
}

/* Страница регистрации использует ту же карточку, ей нужны лишь три состояния. */
.login-optional { color: var(--color-text-muted); font-weight: 400; }
.login-hint { margin: 0; color: var(--color-text-muted); font-size: 13px; }
.login-success { margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-3); background: var(--color-success-soft); color: var(--color-success-text); }
.login-footnote { margin: var(--space-5) 0 0; color: var(--color-text-secondary); font-size: 14px; }
.login-footnote a { color: var(--color-accent-text); }

/* Согласие с условиями при регистрации: флажок и подпись в одну строку. */
.login-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; margin-top: var(--space-2); }
.login-form .login-check input { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; padding: 0; accent-color: var(--color-accent); cursor: pointer; }
.login-form .login-check label { margin-top: 0; font-size: 14px; font-weight: 500; line-height: 1.5; }
.login-check a { color: var(--color-accent-text); }

/* Кто стоит за сайтом и его документы — под карточкой. */
.login-shell .operator-line { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-2); margin: var(--space-5) 0 0; color: var(--color-text-muted); font-size: 13px; text-align: center; }
.login-shell .operator-line a { color: var(--color-accent-text); }
.login-shell .operator-line > span:not(:first-child),
.login-shell .operator-line > a { white-space: nowrap; }

/* Страницы входа не подключают общие компоненты: фокус ссылок и флажка — здесь. */
.login-body :is(a, input[type="checkbox"]):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }

/* На странице входа подпись «Cortex» повторила бы логотип и заголовок «Вход в Cortex». */
.login-card:has([data-login-form]) .eyebrow { display: none; }