/* The auth pages' theme control.

   The spec's Toggle UI section asks for "a small icon button, top right" on the
   auth pages. It lives in its own sheet rather than in auth-brand.css because
   logout.html deliberately does not link auth-brand.css — it carries its own
   inline <style> — and all three pages must present this control identically.

   Colour belongs to public/tokens.css. Every value here is a var(--token) or a
   geometry, so the sheet follows the host page's theme without knowing which
   theme it is in. */

.auth-theme-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 100;

  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;

  border: 1px solid var(--border);
  border-radius: 10px;
  /* Translucent, so the control reads as chrome over the background orbs
     rather than as a card sitting on top of them. */
  background: var(--surface-translucent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text-secondary);

  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.auth-theme-toggle:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
  background: var(--surface-hover);
}

/* The button carries no visible text, so the focus ring is the only thing that
   tells a keyboard user where they are. :focus-visible alone would leave
   browsers without it unindicated, so :focus carries the same treatment. */
.auth-theme-toggle:focus,
.auth-theme-toggle:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  color: var(--text-primary);
}

/* One icon at a time, chosen by the preference the button is showing.
   data-pref is seeded in the markup as "system", which is the default
   preference, so the correct icon is painted before the script runs. */
.auth-theme-toggle .auth-theme-icon {
  display: none;
}

.auth-theme-toggle[data-pref="light"] .auth-theme-icon--light,
.auth-theme-toggle[data-pref="dark"] .auth-theme-icon--dark,
.auth-theme-toggle[data-pref="system"] .auth-theme-icon--system {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .auth-theme-toggle {
    transition: none;
  }
}