/* theme-toggle — стиль переключателя темы.
   Только var(--*) из THEMES_MANIFEST v1.0: атом красится подключённой темой
   и своих цветов не имеет. */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid var(--border, #252b3a);
  border-radius: 4px;
  background: var(--bg-2, #161b26);
  color: var(--text-muted, #8b93a8);
  font: inherit;
  font-size: 12.5px;
  line-height: 1;
  cursor: pointer;
}
.theme-toggle:hover {
  color: var(--brand, #F4A300);
  border-color: var(--brand, #F4A300);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--brand, #F4A300);
  outline-offset: 2px;
}
.theme-toggle svg {
  width: 15px;
  height: 15px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Какая иконка видна. Приём перенесён из okn/public/assets/app.css 896-901:
   у СИСТЕМНОГО состояния атрибута data-theme нет, поэтому одним селектором
   по нему не обойтись — нужен и медиазапрос, и явный выбор.

   По умолчанию (светло) показываем луну — предложение переключиться. */
.theme-toggle .i-sun  { display: none; }
.theme-toggle .i-moon { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun  { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .i-sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun  { display: none; }
:root[data-theme="light"] .theme-toggle .i-moon { display: block; }

/* Подпись состояния — необязательная. Страница может её не выводить вовсе;
   если выводит, текст подставляет сама, атом лишь прячет лишнее. */
.theme-toggle__label { display: none; }
:root[data-theme-mode] .theme-toggle__label { display: inline; }