/* Переключатель темы (см. assets/theme.js). Цвета — из переменных страницы, поэтому он в стиле и программы, и кабинета. */
.theme-toggle {
  --w: 52px; --h: 28px; --pad: 3px;
  position: relative; flex: none; width: var(--w); height: var(--h); padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
  transition: background-color .35s, border-color .35s;
}
/* только для вошедших: пока вход не подтверждён (гость или ещё проверяем), переключателя нет — метку ставит js/account.js */
:root:not(.signed-in) .theme-toggle { display: none; }
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle .knob {
  position: absolute; top: var(--pad); left: var(--pad);
  width: calc(var(--h) - 2 * var(--pad) - 2px); height: calc(var(--h) - 2 * var(--pad) - 2px);
  border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(16, 24, 40, .25);
  transition: transform .45s cubic-bezier(.5, 1.6, .4, .9), background-color .35s;
}
.theme-toggle svg {
  position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px);
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .45s cubic-bezier(.5, 1.6, .4, .9), opacity .3s;
}
.theme-toggle .sun { color: #e8a317; }
.theme-toggle .sun circle { fill: currentColor; }
.theme-toggle .moon { color: var(--accent); fill: currentColor; stroke: none; opacity: 0; transform: rotate(-90deg) scale(.4); }
.theme-toggle[aria-checked="true"] .knob { transform: translateX(calc(var(--w) - var(--h))); }
.theme-toggle[aria-checked="true"] .sun { opacity: 0; transform: rotate(90deg) scale(.4); }
.theme-toggle[aria-checked="true"] .moon { opacity: 1; transform: none; }

/* место в шапке: в программе — переключатель у логотипа в правом углу, кнопки аккаунта отдельной строкой ниже;
   на страницах входа и кабинета — переключатель справа от заголовка */
header.top > .theme-toggle { order: 1; margin-left: auto; }
header.top > .account { order: 2; flex-basis: 100%; }
h1 > .theme-toggle { margin-left: auto; }

/* круг новой темы рисует theme.js — стандартное «растворение» браузера отключаем */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }