/* palette-switcher-v1 — W-58-2 — Theme switcher (light / dark / system) UI. */
/* fix-pilot-edges-v1 — W-99-1 — F-99-3 mobile-first refactor; see W90 tracker. */
/*
 * Planning: .archon/queued-builds/WAVE-58-color-palette.md
 *
 * WHY this file exists: the W-58-1 colour tokens expose three theme
 * states (light, dark, follow-OS). The parent picks one via a button
 * group rendered in the dashboard header. This stylesheet styles that
 * button group using ONLY token references — every colour goes through
 * var(--color-*) so the switcher itself recolours correctly when the
 * theme it controls changes.
 *
 * WHY a segmented button group (not a checkbox or dropdown):
 *  - The choice is mutually exclusive but the user benefits from seeing
 *    all three options at once (vs. a dropdown that hides them).
 *  - A toggle implies two states; this is three. A segmented group is
 *    the standard pattern for "one of N visible choices".
 *  - It scales down cleanly on mobile by collapsing labels to icons.
 *
 * WHY [aria-pressed] (not [aria-selected]): the W3C ARIA Authoring
 * Practices recommend aria-pressed for toggle buttons; aria-selected
 * is for listbox / tab patterns. The switcher behaves as a row of
 * toggle buttons where pressing one un-presses the others (the JS
 * layer enforces single-selection).
 *
 * GOTCHA: the focus ring uses outline (not border) so the active
 * pressed state can keep its own border colour without the focus ring
 * shifting the layout. Outlines paint outside the box and don't
 * contribute to layout in any browser since Chromium 81.
 *
 * CONSTRAINT: every colour reference MUST go through var(--color-*).
 * The stylelint config (W-56-4) and the W58 ANTI-RAW-VALUE proof-gate
 * will reject this file otherwise.
 */

/* WHY a block-scoped class (not a global rule on <button>): the switcher
   shares the page with other buttons (form submit, dashboard actions);
   targeting them all would hijack their styles. */
.theme-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: var(--space-1, 0.25rem);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 0.5rem);
  font-family: var(--font-family-base);
  line-height: var(--line-height-tight, 1.2);
}

/* WHY a fieldset/legend pattern is documented but the legend is hidden:
   screen readers announce "Theme, group" before reading the buttons,
   which is the correct semantics. Sighted users see only the three
   buttons because the legend is positioned off-screen. */
.theme-switcher__legend {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.theme-switcher__option {
  /* Reset native button chrome before applying our own. */
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 0.375rem);
  color: var(--color-text-muted);
  cursor: pointer;
  /* WHY a min-height tied to --touch-target-min: parents tap this on
     mobile; the AA touch target floor is 44 × 44 (Apple HIG / Material
     48dp). The W-26 tokens layer pins --touch-target-min to satisfy
     both. */
  min-height: var(--touch-target-min, 44px);
  min-width: var(--touch-target-min, 44px);
  /* fix-edge-3-v1 — W-99-1 — F-99-3 contract: the base padding is the
     NARROW-viewport value (was previously buried inside a desktop-first
     max-width:480px query in the pre-W99 shape). The wider-viewport
     horizontal padding is additive via a `min-width: 481px` block below
     — every other CSS bundle in the repo follows the same mobile-first
     convention (e.g. dashboard.css ships `grid-template-columns: 1fr`
     at base and adds `repeat(2, ...)` inside `@media (min-width: 640px)`). */
  padding: var(--space-2, 0.5rem);
  font: inherit;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  transition: background-color 120ms ease, color 120ms ease,
              border-color 120ms ease;
}

.theme-switcher__option:hover {
  background: var(--color-bg-muted);
  color: var(--color-text);
}

/* WHY :focus-visible (not :focus): mouse-focus would paint a ring on
   every click, which annoys sighted users. :focus-visible only fires
   for keyboard traversal — exactly what we want. */
.theme-switcher__option:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  /* WHY z-index here: a focused button sits next to its neighbours;
     the outline would otherwise be clipped by the next button's
     painting order. */
  position: relative;
  z-index: 1;
}

/* Active / pressed state — the parent's current choice. */
.theme-switcher__option[aria-pressed="true"] {
  background: var(--color-brand);
  color: var(--color-text-inverse);
  border-color: var(--color-brand-dark);
}

.theme-switcher__option[aria-pressed="true"]:hover {
  background: var(--color-brand-dark);
  color: var(--color-text-inverse);
}

/* Disabled state — useful for the "system" option in environments where
   matchMedia is unavailable (very old browsers). */
.theme-switcher__option:disabled,
.theme-switcher__option[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* fix-edge-3-v1 — W-99-1 — F-99-3 contract: tablet+ viewports re-add the
   horizontal slack that the base rule deliberately drops to keep the
   chip cluster compact on a 320px-wide phone. Mobile-first matches the
   convention every other bundle in public/css/ already follows; the W80
   F3-1 audit flagged the previous narrow-viewport-only query (the
   pre-W99 desktop-first shape) as the only such rule in the redesigned
   tree.

   Labels stay `display: inline` at all viewport widths (the JS layer
   in W-58-2 toggles the `[hidden]` attribute on very constrained
   layouts — that's an attribute selector, not a media query). */
@media (min-width: 481px) {
  .theme-switcher__option {
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  }
}

/* Reduced-motion preference — kill the 120ms transitions. */
@media (prefers-reduced-motion: reduce) {
  .theme-switcher__option {
    transition: none;
  }
}