/* theme.css — the light/dark switch. theme.js mounts the button into the
   solve page's clock cluster and the home page's masthead, so this leans only
   on /assets/tokens.css and sits correctly on either. */

.xw-theme {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--xw-ink) 16%, var(--xw-bg));
  border-radius: 50%;
  background: color-mix(in srgb, var(--xw-ink) 5%, var(--xw-bg));
  color: var(--xw-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.xw-theme:hover {
  background: color-mix(in srgb, var(--xw-ink) 11%, var(--xw-bg));
  color: var(--xw-ink);
}
.xw-theme:focus-visible { outline: 3px solid var(--xw-accent); outline-offset: 2px; }
.xw-theme svg { display: block; }

/* The masthead is centred type, so on the home page the button rides in its
   top-right corner instead of joining the flow. */
.xw-theme-host { position: relative; }
.xw-theme-host .xw-theme { position: absolute; top: 1.5rem; right: 0; }
@media (max-width: 40rem) {
  .xw-theme-host .xw-theme { top: 1rem; }
}