/* Light/dark theme toggle switch + forced-colors fallback. */
@layer components {
  .theme-switcher {
    --switcher-w: 2.75rem;
    --switcher-h: 1.5rem;
    --switcher-icon: 1.05rem;
    --switcher-gap: 0.22rem;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--switcher-w);
    height: var(--switcher-h);
    /* Adjacent header targets remain at least 44px apart while the visual
       track stays compact. */
    margin: max(var(--space-2), calc((44px - var(--switcher-h)) / 2)) 0;
    overflow: hidden;
    border: 1px solid var(--color-rule-medium);
    border-radius: var(--radius-pill);
    appearance: none;
    cursor: pointer;
    background: var(--theme-switcher-track);
    color: inherit;
    transition:
      background-color 200ms ease,
      border-color 150ms ease;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 18%);
  }

  .theme-switcher:hover {
    border-color: var(--color-rule-strong);
  }

  .no-js .theme-switcher {
    display: none !important;
  }

  .theme-switcher-icon {
    position: absolute;
    top: 50%;
    left: 0;
    width: var(--switcher-icon);
    height: var(--switcher-icon);
    pointer-events: none;
    transition:
      transform 180ms ease,
      opacity 180ms ease,
      color 180ms ease;
  }

  .theme-switcher-icon-sun {
    color: var(--theme-switcher-icon-light);
  }

  .theme-switcher-icon-moon {
    color: var(--theme-switcher-icon-dark);
  }

  .theme-switcher[aria-pressed='false'] .theme-switcher-icon-sun {
    transform: translateY(-50%)
      translateX(calc(var(--switcher-w) - var(--switcher-icon) - var(--switcher-gap)));
    opacity: 1;
  }

  .theme-switcher[aria-pressed='false'] .theme-switcher-icon-moon {
    transform: translateY(-50%) translateX(calc(-1 * var(--switcher-icon)));
    opacity: 0;
  }

  .theme-switcher[aria-pressed='true'] .theme-switcher-icon-sun {
    transform: translateY(-50%) translateX(var(--switcher-w));
    opacity: 0;
  }

  .theme-switcher[aria-pressed='true'] .theme-switcher-icon-moon {
    transform: translateY(-50%) translateX(var(--switcher-gap));
    opacity: 1;
  }

  /* High-contrast / forced-colors fallback: render a text label. */
  @media (forced-colors: active) {
    .theme-switcher {
      width: auto;
      height: auto;
      min-block-size: 44px;
      min-inline-size: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-1) var(--space-2);
      overflow: visible;
      background: ButtonFace;
      color: ButtonText;
      border: 1px solid ButtonBorder;
      box-shadow: none;
    }

    .theme-switcher-icon {
      display: none;
    }

    .theme-switcher::before {
      content: 'Light';
      position: static;
      width: auto;
      height: auto;
      transform: none;
      background: transparent;
      border-radius: 0;
    }

    .theme-switcher[aria-pressed='true']::before {
      content: 'Dark';
      transform: none;
    }
  }
}
