/* The light/dark switch in the header's right corner (scripts/theme-toggle.js) */
.header-end {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
}

/* a very simple switch: an outlined pill with a dot, in the text colour */
.theme-toggle {
  /* kept out of the page sweep so the dot can be seen sliding */
  view-transition-name: theme-toggle;
  padding: 10px 0;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .25s ease;
}
.theme-toggle:hover { opacity: .65; }
.theme-toggle:focus-visible { outline: none; }
.theme-toggle:focus-visible .tt-track { outline: 2px solid var(--accent); outline-offset: 3px; }

.tt-track {
  position: relative;
  display: block;
  width: 34px;
  height: 20px;
  border: 1.5px solid currentColor;
  border-radius: var(--r-pill);
}
.tt-knob {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 11px;
  height: 11px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: currentColor;
  transition: transform .45s cubic-bezier(.65, 0, .35, 1);
}
.theme-toggle[aria-checked="true"] .tt-knob { transform: translateX(14px); }

/* ---- the sweep across the page when the theme changes ---- */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }
/* the switch itself stays live above the sweep */
::view-transition-old(theme-toggle) { display: none; }
::view-transition-new(theme-toggle) { animation: none; }
::view-transition-group(theme-toggle) { animation: none; z-index: 3; }

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