/* Light/dark switch from assets/theme.js, shared by every page.
 *
 *   <button class="theme-toggle" data-theme-toggle
 *           data-i18n-attr="aria-label:theme.toggle,title:theme.toggle"
 *           aria-label="Dark mode" title="Dark mode"></button>
 *
 * Pages without a header get it in the top bar (assets/topbar.css). The
 * track is drawn like the ink buttons; the knob is a fried egg (sun) by day
 * and a bitten cookie (moon) at night, with sprinkles for stars. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

.theme-toggle {
  --toggle-ink: #3d2817;
  --toggle-track: #f6dfa4;
  --toggle-knob: #fbf6ec;
  --toggle-ray: #e0952f;
  --toggle-white: #fffdf7;
  --toggle-yolk: #f2b632;
  --toggle-cookie: #d9a066;
  --toggle-chip: #5b3a24;
  --toggle-focus: #c8553d;

  position: relative;
  box-sizing: border-box;
  flex: none;
  width: 62px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: solid var(--toggle-ink);
  border-width: 2px 1.8px 2.3px 1.9px;
  /* A pill, slightly uneven like the hand-drawn buttons. */
  border-radius: 19px 17px 20px 16px / 17px 19px 16px 20px;
  background: var(--toggle-track);
  box-shadow: 2px 2.5px 0 var(--toggle-ink);
  color: var(--toggle-ink);
  cursor: pointer;
  transform: rotate(0.6deg);
  transition: transform 0.12s cubic-bezier(0.2, 0, 0.1, 1), box-shadow 0.12s ease,
    background-color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
/* No script, no switch: it could not do anything. */
:root:not([data-theme]) .theme-toggle { display: none; }

:root[data-theme="dark"] .theme-toggle {
  --toggle-ink: #f6ece1;
  --toggle-track: #2c2236;
  --toggle-knob: #3a2e27;
  --toggle-cookie: #d8a46c;
  --toggle-chip: #4a2e1c;
  --toggle-focus: #eb624c;
}

.theme-toggle:hover {
  transform: scale(1.04) rotate(0deg);
  box-shadow: 2.5px 3px 0 var(--toggle-ink);
}
.theme-toggle:active {
  transform: translate(1.5px, 2px) rotate(0deg);
  box-shadow: 0.5px 0.5px 0 var(--toggle-ink);
}
.theme-toggle:focus-visible {
  outline: 3px solid var(--toggle-focus);
  outline-offset: 3px;
}

.theme-toggle__knob {
  position: absolute;
  box-sizing: border-box;
  top: 2px;
  left: 2px;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--toggle-ink);
  border-radius: 50%;
  background: var(--toggle-knob);
  transition: transform 0.45s cubic-bezier(0.34, 1.45, 0.6, 1), background-color 0.3s ease;
}
:root[data-theme="dark"] .theme-toggle__knob { transform: translateX(28px); }
.theme-toggle:hover .theme-toggle__knob { animation: theme-toggle-wiggle 0.5s ease; }

.theme-toggle__icon {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  overflow: visible;
  stroke: var(--toggle-ink);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.45, 0.6, 1);
}
.theme-toggle__icon--sun { transform: scale(0.82); }
.theme-toggle__icon--moon { opacity: 0; transform: rotate(-120deg) scale(0.4); }
:root[data-theme="dark"] .theme-toggle__icon--sun { opacity: 0; transform: rotate(120deg) scale(0.4); }
:root[data-theme="dark"] .theme-toggle__icon--moon { opacity: 1; transform: scale(0.86); }

.theme-toggle__rays { stroke: var(--toggle-ray); stroke-width: 1.8; fill: none; }
.theme-toggle__white { fill: var(--toggle-white); }
.theme-toggle__yolk { fill: var(--toggle-yolk); }
.theme-toggle__shine { fill: none; stroke: #fff6d8; stroke-width: 1.1; }
.theme-toggle__cookie { fill: var(--toggle-cookie); }
.theme-toggle__chips { fill: var(--toggle-chip); stroke: none; }
.theme-toggle__crumbs { fill: var(--toggle-cookie); stroke-width: 0.8; }

/* Sprinkles as stars on the left of the track, only at night. */
.theme-toggle__sprinkles i {
  position: absolute;
  width: 6px;
  height: 2.5px;
  border-radius: 2px;
  opacity: 0;
  transform: scale(0) rotate(var(--turn));
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.45, 0.6, 1);
}
.theme-toggle__sprinkles i:nth-child(1) { --turn: 35deg; top: 7px; left: 8px; background: #f2b632; }
.theme-toggle__sprinkles i:nth-child(2) { --turn: -40deg; top: 17px; left: 18px; background: #eb8fa4; transition-delay: 0.06s; }
.theme-toggle__sprinkles i:nth-child(3) { --turn: 80deg; top: 20px; left: 6px; background: #8fc3e8; transition-delay: 0.12s; }
:root[data-theme="dark"] .theme-toggle__sprinkles i { opacity: 1; transform: scale(1) rotate(var(--turn)); }

@keyframes theme-toggle-wiggle {
  30% { rotate: -12deg; }
  65% { rotate: 8deg; }
}

/* The circular reveal in theme.js replaces the default crossfade. */
.theme-wipe::view-transition-old(root),
.theme-wipe::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .theme-toggle:hover,
  .theme-toggle:active { transform: none; }
  .theme-toggle,
  .theme-toggle *,
  .theme-toggle__sprinkles i { transition: none; animation: none; }
}