@layer components {
  /* Light/dark toggle — a round icon button; the icon swaps with the scheme. */
  .theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--control-size);
    block-size: var(--control-size);
    padding: 0;
    color: var(--color-subtle);
    background: var(--color-surface-raised);
    border: var(--border);
    border-radius: 50%;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
  }
  .theme-toggle:hover { color: var(--color-text); border-color: var(--color-border-strong); }

  .theme-toggle__icon { inline-size: 0.9rem; block-size: 0.9rem; }
  .theme-toggle__sun { display: none; }

  html[data-theme="dark"] .theme-toggle__moon { display: none; }
  html[data-theme="dark"] .theme-toggle__sun { display: block; }
  @media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .theme-toggle__moon { display: none; }
    html:not([data-theme="light"]) .theme-toggle__sun { display: block; }
  }
}