/* Shared day/night toggle button. Pairs with /assets/theme.js.
   Each page supplies its own --panel / --line / --accent tokens, so the
   button inherits whatever palette that page is using. */

[data-theme-toggle] { display: inline-flex; align-items: center; }

.theme-toggle {
  width: 34px; height: 34px; padding: 0; flex: none;
  display: grid; place-items: center;
  background: var(--panel, #fff); color: var(--muted, #6b7280);
  border: 1px solid var(--line, #e3e8ef); border-radius: var(--radius, 8px);
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.theme-toggle:hover {
  background: var(--accent-soft, #eaf1fc);
  border-color: var(--accent, #3a7bd5);
  color: var(--accent, #3a7bd5);
}
.theme-toggle:focus-visible { outline: 2px solid var(--accent, #3a7bd5); outline-offset: 2px; }
.theme-toggle .icon { width: 17px; height: 17px; display: block; }

/* Used on pages that provide no [data-theme-toggle] slot of their own. */
.theme-toggle--floating {
  position: fixed; top: 14px; right: 14px; z-index: 60;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

/* Offer the mode you are NOT in: moon by day, sun by night. */
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none; }
}