/* UGO — theme switch (a sun/moon pill). Used in the navbar of every page.
 *
 * Drawn entirely with CSS and keyed on <html data-theme="light|dark">, so it looks right on every page whatever else that page
 * does to the button (some pages rewrite its contents). The button's own children are hidden on purpose.
 * Colours are fixed values, not page variables, so the one file serves pages with different colour systems.
 */
.ugo-switch {
  --ts-track: #2d2925;
  --ts-border: #56423d;
  --ts-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a58b85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
  --ts-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a58b85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E");
  /* the knob shows the theme that is on now: a moon in the dark theme */
  --ts-knob-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E");
  --ts-focus: #8dcef9;

  position: relative;
  display: inline-block;
  flex: none;
  box-sizing: border-box;
  width: 60px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ts-border);
  border-radius: 999px;
  background: var(--ts-track);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .28);
  color: transparent;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .3s ease, border-color .3s ease;
}
.ugo-switch > * { display: none !important; }

/* the two faint icons on the track; the knob covers the one for the theme that is on */
.ugo-switch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ts-sun) left 9px top 50% / 15px 15px no-repeat, var(--ts-moon) right 9px top 50% / 15px 15px no-repeat;
  opacity: .85;
  pointer-events: none;
}

/* the knob */
.ugo-switch::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ts-knob-icon) center / 14px 14px no-repeat, linear-gradient(145deg, #f08a68, #d4664a);
  box-shadow: 0 2px 8px rgba(212, 102, 74, .5), inset 0 1px 0 rgba(255, 255, 255, .35);
  transform: translateX(28px);
  transition: transform .34s cubic-bezier(.4, .1, .2, 1.15);
}

.ugo-switch:hover { border-color: #e17053; }
.ugo-switch:focus-visible { outline: 2px solid var(--ts-focus); outline-offset: 3px; }
.ugo-switch:active::before { width: 28px; }
html:not([data-theme="light"]) .ugo-switch:active::before { transform: translateX(24px); }

/* light theme: knob on the left, a sun on it */
[data-theme="light"] .ugo-switch {
  --ts-track: #f0dfd9;
  --ts-border: #d8c2bc;
  --ts-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2385736e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
  --ts-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2385736e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E");
  --ts-knob-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
  --ts-focus: #00658e;
  box-shadow: inset 0 1px 3px rgba(90, 40, 25, .14);
}
[data-theme="light"] .ugo-switch::before { transform: translateX(0); }

/* a short cross-fade of the page colours while the theme changes (class set by js/ugo-theme.js and the page scripts) */
html.ugo-theme-anim, html.ugo-theme-anim *, html.ugo-theme-anim *::before, html.ugo-theme-anim *::after {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, fill .3s ease, stroke .3s ease, box-shadow .3s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  .ugo-switch, .ugo-switch::before { transition: none; }
  html.ugo-theme-anim, html.ugo-theme-anim * { transition: none !important; }
}