/*
 * Страница входа.
 *
 * Композиция перенесена из winclass.ru: слева сцена с фирменным кубом и
 * планетами, справа форма. Она уже проверена людьми, и придумывать вместо
 * неё свою было бы ровно тем, чего проект избегает.
 *
 * Отличие одно: всё переведено на токены, поэтому работает и в тёмной
 * теме, и под фирменным цветом школы. В оригинале страница только светлая.
 */

.auth {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    min-height: 100dvh;
}

/* ---------- Левая половина: сцена ---------- */

.auth-scene {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    padding: var(--space-10) var(--space-10) var(--space-10);
    background: var(--bg-card);
    border-right: 1px solid var(--border);
}

.auth-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Два еле заметных бренд-пятна — воздух, а не заливка. */
.auth-scene::before,
.auth-scene::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(64px);
    pointer-events: none;
}

.auth-scene::before {
    width: 380px;
    height: 380px;
    top: -110px;
    left: -90px;
    background: rgba(var(--brand-rgb), .20);
    animation: authDrift 16s ease-in-out infinite;
}

.auth-scene::after {
    width: 320px;
    height: 320px;
    right: -70px;
    bottom: -80px;
    background: rgba(var(--brand-rgb), .14);
    animation: authDrift 20s ease-in-out -6s infinite reverse;
}

@keyframes authDrift {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(26px, -22px); }
}

/* Ссылка на сайт живёт в углу сцены. На телефоне сцены нет, и её роль
   играет логотип над формой. */
.auth-home {
    position: absolute;
    top: var(--space-6);
    left: var(--space-6);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 36px;
    padding: 0 var(--space-4) 0 var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--bg-card);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    transition: border-color var(--transition), color var(--transition);
}

.auth-home:hover {
    border-color: var(--accent-border);
    color: var(--text-primary);
    text-decoration: none;
}

/* Одна строка вместо заголовка с подзаголовком: сцена говорит сама за себя. */
.auth-claim {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    letter-spacing: -.02em;
    white-space: nowrap;
}

.auth-claim b { font-weight: 800; color: var(--text-primary); }
.auth-claim i { font-style: normal; color: var(--text-muted); font-weight: var(--weight-normal); }

.auth-claim span {
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---------- Правая половина: форма ---------- */

.auth-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-6);
    background: var(--bg-page);
}

.auth-card { width: 100%; max-width: 380px; }

/* Логотип с названием нужен там, где нет левой части. */
.auth-mark {
    display: none;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.auth-mark span { font-weight: var(--weight-bold); font-size: var(--text-base); color: var(--text-primary); }

.auth-title { font-size: var(--text-xl); font-weight: var(--weight-bold); letter-spacing: -.02em; margin: 0; }
.auth-sub { margin: var(--space-1) 0 var(--space-5); font-size: var(--text-sm); color: var(--text-secondary); }
.auth-org { margin: 0 0 var(--space-5); font-size: var(--text-sm); color: var(--accent); font-weight: var(--weight-semibold); }

.auth-hint {
    margin: var(--space-5) 0 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-align: center;
}

/* Показать пароль. Кнопка, а не иконка: с клавиатуры до неё надо дойти. */
.auth-password { position: relative; }
.auth-password .input { padding-right: 44px; }

.auth-password__toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}

.auth-password__toggle:hover { color: var(--accent); }
.auth-password__toggle .icon-hide { display: none; }
.auth-password.is-visible .auth-password__toggle .icon-hide { display: block; }
.auth-password.is-visible .auth-password__toggle .icon-show { display: none; }

/* ---------- Планшет и телефон: сцены нет ---------- */

@media (max-width: 900px) {
    .auth { grid-template-columns: 1fr; }
    .auth-scene { display: none; }
    .auth-panel { padding: var(--space-6) var(--space-4); }
    .auth-mark { display: flex; }
}

@media (min-width: 1800px) {
    .auth-card { max-width: 460px; }
}

/*
 * Одноколоночный вариант: «Забыли пароль». Сцена с кубом там не нужна —
 * человек пришёл прочитать, что ему делать, а не любоваться.
 */
.auth--single { grid-template-columns: 1fr; }
.auth--single .auth-panel { align-items: flex-start; padding-block: var(--space-10); }
.auth--single .auth-card { max-width: 460px; }


/* ---------- Страница школы: без нашей сцены ----------
   Одна колонка, карточка по центру. Сцена с кубом и планетами — наш
   фирменный элемент, и на странице школы он спорит с её собственным
   логотипом. Остаётся то, за чем сюда приходят: имя, логотип, два
   поля. */
.auth--plain {
    grid-template-columns: 1fr;
    background: var(--bg-page);
}

/* Логотип и название показываются всегда: без левой части им больше
   негде быть, а это единственное, что отличает страницу школы от
   любой другой формы входа. */
.auth--plain .auth-mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    text-align: center;
}

.auth--plain .auth-mark img,
.auth--plain .auth-mark .logo__mark {
    width: 64px;
    height: 64px;
    font-size: var(--text-lg);
}

.auth--plain .auth-mark span { font-size: var(--text-lg); }

/* Заголовок и подпись по центру: карточка стоит одна посреди экрана,
   и прижатый влево текст в ней выглядит обрезанным. */
.auth--plain .auth-title,
.auth--plain .auth-sub { text-align: center; }

/* Логотип и имя школы на экране кода урока.
   Ребёнок приходит со страницы своей школы, и брошенный на полпути
   белый лейбл хуже его отсутствия. */
.join__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    font-weight: var(--weight-bold);
    font-size: var(--text-lg);
    color: var(--text-primary);
}

.join__brand img { border-radius: var(--radius-sm); }

/* Логотип школы вместо надписи с её названием: имя уже на самом
   логотипе, а две одинаковые подписи подряд опускают форму ниже
   центра. Высота ограничена, ширина свободна — логотипы бывают
   широкими, и вписывать их в квадрат значит рисовать поля. */
.auth-mark__logo,
.join__brand img {
    height: 56px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
}