/* theme-toggle.css — Theme switch (behavior: js/theme.js + js/theme-toggle.js).
   Block alias: .theme-toggle (cycling button; extends .btn: <button class="btn btn--ghost theme-toggle" data-theme-cycle>)
     Parts: .theme-toggle__icon (three svgs: [data-for="system|light|dark"], only the current one shows),
            .theme-toggle__label ([data-theme-label]; text "Theme: dark" is the accessible name and updates)
     The current icon follows :root[data-theme] (no attribute = system). Docs-only freeze: [data-preview="light|dark|system"].
   Block: .theme-choice (radio group form for settings pages) — <fieldset class="theme-choice">
     Parts: .theme-choice__legend, .theme-choice__option (label wrapping a visually hidden radio), .theme-choice__icon
     States: :checked (selected bg + border + check of the radio, not color alone), :focus-visible on the radio,
             docs-only .is-focus-visible on an option. */
@layer components {
  /* Cycling button */
  .theme-toggle__icon {
    display: none;
    inline-size: var(--icon-size-sm);
    block-size: var(--icon-size-sm);
    stroke-width: var(--icon-stroke);
  }
  :root:not([data-theme]) .theme-toggle:not([data-preview]) .theme-toggle__icon[data-for="system"],
  :root[data-theme="light"] .theme-toggle:not([data-preview]) .theme-toggle__icon[data-for="light"],
  :root[data-theme="dark"] .theme-toggle:not([data-preview]) .theme-toggle__icon[data-for="dark"],
  :root[data-theme="high-contrast"] .theme-toggle:not([data-preview]) .theme-toggle__icon[data-for="system"],
  .theme-toggle[data-preview="system"] .theme-toggle__icon[data-for="system"],
  .theme-toggle[data-preview="light"] .theme-toggle__icon[data-for="light"],
  .theme-toggle[data-preview="dark"] .theme-toggle__icon[data-for="dark"] { display: block; }

  /* Radio group */
  .theme-choice {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-inline-size: 0;
    padding: 0;
    border: 0;
  }
  .theme-choice__legend {
    inline-size: 100%;
    margin-block-end: var(--space-2);
    padding: 0;
    color: var(--color-text-default);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
  }
  .theme-choice__option {
    --_bg: var(--color-action-secondary-bg);
    --_border: var(--color-action-secondary-border);
    --_fg: var(--color-action-secondary-fg);

    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--size-control-md);
    padding-inline: var(--space-3) var(--space-4);
    border: var(--border-width-thin) solid var(--_border);
    border-radius: var(--button-radius);
    background: var(--_bg);
    color: var(--_fg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background-color var(--motion-duration-fast) var(--motion-easing-standard);
  }
  .theme-choice__option:hover { --_bg: var(--color-action-secondary-bg-hover); }
  .theme-choice__option > input {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }
  .theme-choice__icon {
    inline-size: var(--icon-size-sm);
    block-size: var(--icon-size-sm);
    stroke-width: var(--icon-stroke);
  }
  .theme-choice__option:has(:checked) {
    --_bg: var(--color-selected-bg);
    --_border: var(--color-selected-border);
    --_fg: var(--color-selected-fg);
    font-weight: var(--font-weight-semibold);
    box-shadow: inset 0 0 0 var(--border-width-thin) var(--color-selected-border);
  }
  .theme-choice__option:has(:focus-visible),
  .theme-choice__option.is-focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }

  @media (forced-colors: active) {
    .theme-choice__option { border-color: ButtonText; }
    .theme-choice__option:has(:checked) { background: Highlight; color: HighlightText; }
  }
}