/*
  Переключатель темы — физический тумблер "луна ⇄ солнце": стеклянный
  трек (тот же рецепт, что у хедера/футера — --color-glass + blur, см.
  header.css/theme.css) и кружок-костяшка со свечением, которая едет
  вправо и перекрашивается в жёлтое солнце, когда включена светлая тема
  (кратеры луны гаснут). Свечение имитирует "планету": у луны холодное
  светлое, у солнца — тёплое жёлтое.

  Разметка — input[type=checkbox] + label (не button): нативный чекбокс
  даёт клавиатуре/скринридеру состояние "включено/выключено" бесплатно,
  сам чекбокс прозрачный и растянут на всю плашку (ловит клик/фокус),
  визуальный трек/костяшка — под ним чистым CSS от :checked.

  Позиционирование (fixed/top/right, десктопный left) и брейкпоинт
  1101px — без изменений от прежней круглой кнопки, см. комментарий
  ниже и layout-chrome.js (селектор .theme-toggle тот же).
*/

.theme-toggle {
  --toggle-h: var(--chrome-item-h, 3.5rem);
  --toggle-pad: calc(var(--toggle-h) * 0.0833);
  --toggle-knob: calc(var(--toggle-h) - var(--toggle-pad) * 2);
  box-sizing: border-box;
  position: fixed;
  top: calc(var(--page-px, 10px) + var(--chrome-pad-block, 0.5rem));
  right: var(--page-px, 10px);
  width: calc(var(--toggle-h) * 2);
  height: var(--toggle-h);
  z-index: 51;
}

.theme-toggle__input {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 1;
  opacity: 0;
  cursor: pointer;
}

/* Обводка трека НЕ разделяет общий рецепт с хедером/футером (см.
   theme.css) — там она нейтрально-белая, потому что на тех плашках нет
   одного явного цветного элемента. У тумблера он есть — сама костяшка
   (луна/солнце) — поэтому цвет и положение блика в обводке берутся
   ИЗ неё: --glow-color/--glow-x меняются вместе с :checked, ниже. */
@property --glow-color {
  syntax: "<color>";
  initial-value: rgba(214, 228, 255, 0.9);
  inherits: false;
}
@property --glow-x {
  syntax: "<percentage>";
  initial-value: 25%;
  inherits: false;
}

.theme-toggle__track {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  /* Стекло — как у хедера/футера (см. header.css), не свой цвет.
     overflow не обрезаем — свечение костяшки ниже должно выходить за
     трек. */
  background: var(--color-glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  /* Луна: холодный блик слева, там же сидит костяшка (--toggle-pad +
     половина --toggle-knob от левого края трека мат. сходится ровно к
     25% его ширины — трек вдвое шире своей высоты). */
  --glow-color: rgba(214, 228, 255, 0.9);
  --glow-x: 25%;
}

.theme-toggle__input:checked + .theme-toggle__track {
  /* Солнце едет на +100% высоты трека вправо (см. transform на
     костяшке ниже) — это ровно ещё 50% ширины трека, отсюда 25%+50%. */
  --glow-color: rgba(255, 210, 90, 0.95);
  --glow-x: 75%;
}

/* Переливающаяся обводка трека — псевдоэлемент (см. общий приём и
   почему не настоящий border в theme.css). Радиальное пятно у позиции
   костяшки (--glow-x, её же цветом) поверх ровного бледного кольца,
   чтобы остальная обводка тоже была видна, не только сам блик. */
.theme-toggle__track::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background:
    radial-gradient(ellipse 45% 140% at var(--glow-x) 50%, var(--glow-color), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition:
    --glow-color var(--theme-transition-duration, 0.6s) var(--theme-transition-ease, cubic-bezier(0.65, 0, 0.35, 1)),
    --glow-x var(--theme-transition-duration, 0.6s) var(--theme-transition-ease, cubic-bezier(0.65, 0, 0.35, 1));
}

.theme-toggle__knob {
  position: absolute;
  top: var(--toggle-pad);
  left: var(--toggle-pad);
  width: var(--toggle-knob);
  height: var(--toggle-knob);
  border-radius: 50%;
  background: #f4f5f7;
  /* Луна — холодное светлое свечение (двойной слой: плотное у самой
     костяшки + широкий рассеянный ореол), имитация планеты. */
  box-shadow:
    0 0 calc(var(--toggle-h) * 0.45) rgba(214, 228, 255, 0.9),
    0 0 calc(var(--toggle-h) * 1.9) rgba(163, 197, 255, 0.55);
  transition:
    transform var(--theme-transition-duration, 0.6s) var(--theme-transition-ease, cubic-bezier(0.65, 0, 0.35, 1)),
    background-color var(--theme-transition-duration, 0.6s) var(--theme-transition-ease, cubic-bezier(0.65, 0, 0.35, 1)),
    box-shadow var(--theme-transition-duration, 0.6s) var(--theme-transition-ease, cubic-bezier(0.65, 0, 0.35, 1));
}

/* Кратеры луны — три размытых кружка на костяшке, гаснут при переходе
   в солнце (см. :checked ниже). Проценты — от самой костяшки, поэтому
   не нужно пересчитывать под --chrome-item-h на разных брейкпоинтах. */
.theme-toggle__crater {
  position: absolute;
  border-radius: 50%;
  background: rgba(148, 156, 173, 0.55);
  transition: opacity var(--theme-transition-duration, 0.6s) var(--theme-transition-ease, cubic-bezier(0.65, 0, 0.35, 1));
}
.theme-toggle__crater--a {
  top: 58%;
  left: 22%;
  width: 15%;
  height: 15%;
}
.theme-toggle__crater--b {
  top: 68%;
  left: 50%;
  width: 15%;
  height: 15%;
}
.theme-toggle__crater--c {
  top: 24%;
  left: 48%;
  width: 24%;
  height: 24%;
}

/* Едет ровно на одну высоту трека вправо — при padding = 1/12 высоты с
   каждой стороны это математически точное расстояние до зеркальной
   позиции у правого края (см. вывод в чате/комментарии реализации). */
.theme-toggle__input:checked + .theme-toggle__track .theme-toggle__knob {
  transform: translateX(var(--toggle-h));
  background: #f4e94e;
  /* Солнце — тёплое жёлтое свечение, та же двухслойная логика. */
  box-shadow:
    0 0 calc(var(--toggle-h) * 0.45) rgba(255, 226, 130, 0.95),
    0 0 calc(var(--toggle-h) * 1.9) rgba(255, 175, 60, 0.55);
}

.theme-toggle__input:checked + .theme-toggle__track .theme-toggle__crater {
  opacity: 0;
}

/* Фокус с клавиатуры — сам чекбокс прозрачный, кольцо рисуем на
   видимом треке. Внутренняя обводка — var(--color-surface) (не сам
   стеклянный фон трека, он полупрозрачный) — чтобы розовое кольцо не
   сливалось с тем, что под треком просвечивает. */
.theme-toggle__input:focus-visible + .theme-toggle__track {
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-action-hover, #ff0cc2);
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle__knob,
  .theme-toggle__crater,
  .theme-toggle__track::after {
    transition-duration: 0.01ms;
  }
}

/* html:not(.chrome--compact) — см. header.css: если плашки не влезают
   в один ряд, layout-chrome.js откатывает на моб-позицию даже на
   широких экранах. */
@media (min-width: 1101px) {
  html:not(.chrome--compact) .theme-toggle {
    top: calc(var(--page-px, 10px) + var(--chrome-pad-block, 0.5rem));
    right: auto;
    /* left выставляет layout-chrome.js по факту правого края хедера */
  }
}