/**
 * HIBARI Theme Switcher UI (Segmented Control)
 *
 * 使い方:
 *   <fieldset class="theme-switcher" role="radiogroup" aria-label="テーマ">
 *     <legend class="sr-only">テーマ</legend>
 *     <label><input type="radio" name="theme" value="system"> システム</label>
 *     <label><input type="radio" name="theme" value="light"> ライト</label>
 *     <label><input type="radio" name="theme" value="dark"> ダーク</label>
 *   </fieldset>
 *
 *   <script>
 *     document.querySelectorAll('.theme-switcher input[name="theme"]')
 *       .forEach(function (r) {
 *         r.checked = (r.value === HibariTheme.get());
 *         r.addEventListener('change', function () {
 *           if (r.checked) HibariTheme.set(r.value);
 *         });
 *       });
 *   </script>
 */
.theme-switcher {
  display: inline-flex;
  background: var(--fill-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 2px;
  gap: 0;
  margin: 0;
}
.theme-switcher legend {
  /* sr-only と組合せで非表示にする (上の使用例参照) */
}
.theme-switcher label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 6px 10px;
  font-size: var(--font-size-subheadline);
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--content-secondary);
  transition: color var(--motion-fast) var(--ease-standard),
              background var(--motion-fast) var(--ease-standard);
  min-height: 28px;
  white-space: nowrap;
}
.theme-switcher label:hover {
  color: var(--content-primary);
}
.theme-switcher input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.theme-switcher label:has(input[type="radio"]:checked),
.theme-switcher label.is-checked {
  background: var(--surface-raised);
  color: var(--content-primary);
  box-shadow: var(--elevation-1);
}
.theme-switcher label:has(input[type="radio"]:focus-visible),
.theme-switcher label.is-focused {
  outline: 2px solid var(--border-brand);
  outline-offset: 1px;
}

/* dark mode で thumb (アクティブ) が見やすいよう、ライト時よりも
   明確な明度差を付ける (iOS systemGray3 dark 相当の半透明白) */
:root.theme-dark .theme-switcher label:has(input[type="radio"]:checked),
:root.theme-dark .theme-switcher label.is-checked,
:root.theme-system.is-system-dark .theme-switcher label:has(input[type="radio"]:checked),
:root.theme-system.is-system-dark .theme-switcher label.is-checked {
  background: rgba(99, 99, 102, 0.95);
  color: var(--content-primary);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.20),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.10);
}

/* segmented mode 内のアイコン (theme-toggle.js が auto-mount 時に使う) */
.theme-switcher .theme-toggle-icon {
  display: inline-flex;
  align-items: center;
  width: 14px;
  height: 14px;
}
.theme-switcher .theme-toggle-icon svg { width: 100%; height: 100%; }

/* ==========================================================================
   Theme Toggle: Compact (icon button + popover)
   ========================================================================== */
.theme-toggle-compact {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--content-secondary);
  padding: 0;
  transition: color var(--motion-fast) var(--ease-standard),
              background var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle-btn:hover {
  background: var(--fill-tertiary);
  color: var(--content-primary);
}
.theme-toggle-btn:focus-visible {
  outline: 2px solid var(--border-brand);
  outline-offset: 2px;
}
.theme-toggle-btn .theme-toggle-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
}
.theme-toggle-btn .theme-toggle-icon svg { width: 100%; height: 100%; }

.theme-toggle-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--surface-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-3);
  padding: 6px;
  z-index: 1000;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .15s var(--ease-standard), transform .15s var(--ease-standard);
}
.theme-toggle-popover.is-open {
  opacity: 1;
  transform: translateY(0);
}
.theme-toggle-popover[hidden] { display: none; }

.theme-toggle-popover button[data-mode] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--content-primary);
  font-size: var(--font-size-subheadline);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle-popover button[data-mode]:hover {
  background: var(--fill-tertiary);
}
.theme-toggle-popover button[data-mode]:focus-visible {
  outline: 2px solid var(--border-brand);
  outline-offset: -2px;
}
.theme-toggle-popover button[data-mode] .theme-toggle-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--content-secondary);
  flex-shrink: 0;
}
.theme-toggle-popover button[data-mode] .theme-toggle-icon svg { width: 100%; height: 100%; }
.theme-toggle-popover button[data-mode] > span:nth-child(2) {
  flex: 1;
}
.theme-toggle-popover button[data-mode] .theme-toggle-check {
  color: var(--content-brand);
  font-weight: 700;
  opacity: 0;
  font-size: var(--font-size-callout);
}
.theme-toggle-popover button[data-mode].is-active .theme-toggle-check { opacity: 1; }
.theme-toggle-popover button[data-mode].is-active .theme-toggle-icon { color: var(--content-brand); }

/* Mobile: full-width 寄せ */
@media (max-width: 480px) {
  .theme-toggle-popover {
    right: auto;
    left: 0;
  }
}