/* The light/dark switcher (Michael, 2026-09-24). Site-level for now: when the design
   system gains a switcher component, this moves into site.css and the file goes.

   Markup, once per page, in the nav (and inside the phone menu when the nav collapses):

   <button type="button" class="to-theme" data-theme-toggle aria-pressed="false" aria-label="Dark mode">
     <svg class="to-theme__moon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 14.5A8 8 0 0 1 9.5 4 8 8 0 1 0 20 14.5Z"/></svg>
     <svg class="to-theme__sun" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path 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"/></svg>
   </button>

   theme.js keeps aria-pressed true in dark. The accessible name stays "Dark mode", so a
   screen reader hears "Dark mode, toggle button, pressed". Everything else that must
   change with the theme does so through tokens: page markup never carries a hex value. */

.to-theme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; flex: none;
  border: 1px solid var(--line-strong); border-radius: var(--radius-button);
  background: transparent; color: var(--ink); cursor: pointer;
}
.to-theme:hover { border-color: var(--ink); }
.to-theme:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.to-theme svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.to-theme__sun { display: none; }
:root[data-theme="dark"] .to-theme__sun { display: block; }
:root[data-theme="dark"] .to-theme__moon { display: none; }
.to-on-stone .to-theme { color: var(--on-stone); border-color: var(--line-on-stone); }