/* shared/runtime/theme-toggle.css
 *
 * Плавающая кнопка переключения темы — для страниц без сайдбара
 * (публичные, авторизация, legal, выбор победителя). В кабинетах
 * переключатель живёт в подвале сайдбара и стилизуется там же.
 *
 * Раньше этот блок дублировался в shared/legacy/styles.css и подключался
 * только на legacy-страницах, поэтому на лендинге и авторизации кнопку
 * просто нельзя было показать. Один компонент — один файл.
 */

#themeToggle {
    position: fixed;
    top: 20px;
    right: 20px;
    /* Ниже модальных слоёв (у них z-index от 100) и выше обычного контента.
       Раньше кнопка стояла на 3000 и всплывала поверх открытых модалок —
       на экране выбора победителя она висела прямо на шапке окна. */
    z-index: 90;

    width: var(--ws-control-h, 44px);
    height: var(--ws-control-h, 44px);
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--ws-line-strong);
    border-radius: var(--ws-radius-full);
    background: var(--ws-surface);
    color: var(--ws-fg);
    box-shadow: var(--ws-shadow-sm);
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

#themeToggle:hover {
    background: var(--ws-surface-soft);
    border-color: var(--ws-primary-line);
    transform: translateY(-1px);
}

#themeToggle:active {
    transform: translateY(0);
}

#themeToggle svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Иконку прячет рантайм инлайновым display. Класс — стартовое состояние
   для первого кадра, пока скрипт не отработал. */
#themeToggle .is-hidden {
    display: none;
}

/* На узких экранах кнопка уезжает под верхнюю кромку контента, чтобы не
   перекрывать шапку страницы. */
@media (max-width: 640px) {
    #themeToggle {
        top: 12px;
        right: 12px;
        width: var(--ws-control-h-sm, 36px);
        height: var(--ws-control-h-sm, 36px);
    }

    #themeToggle svg {
        width: 17px;
        height: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #themeToggle {
        transition: none;
    }
    #themeToggle:hover {
        transform: none;
    }
}

/* ── Кнопка внутри шапки ───────────────────────────────────────────────────
   На лендинге и авторизации переключатель стоит в навигации рядом с
   «Войти», а не висит поверх неё: фиксированная кнопка перекрывала кнопки
   шапки на узких экранах. */
.pland-nav__actions #themeToggle,
.pauth-topbar #themeToggle,
.selection-header #themeToggle {
    position: static;
    top: auto;
    right: auto;
    width: var(--ws-control-h-sm, 36px);
    height: var(--ws-control-h-sm, 36px);
    flex: none;
    box-shadow: none;
    background: transparent;
    border-color: var(--ws-line);
}

.pland-nav__actions #themeToggle:hover,
.pauth-topbar #themeToggle:hover,
.selection-header #themeToggle:hover {
    background: var(--ws-surface-soft);
    transform: none;
}

.pland-nav__actions #themeToggle svg,
.pauth-topbar #themeToggle svg,
.selection-header #themeToggle svg {
    width: 17px;
    height: 17px;
}

/* В шапке выбора победителя рядом стоят кнопки действий высотой 36px —
   переключатель повторяет их высоту и становится квадратным с тем же
   скруглением, чтобы читаться как часть ряда, а не как чужой кружок. */
.selection-header #themeToggle {
    width: 36px;
    height: 36px;
    border-radius: var(--ws-radius-sm);
    color: var(--ws-fg-muted);
}

.selection-header #themeToggle:hover {
    color: var(--ws-fg);
    border-color: var(--ws-primary-line);
}