/* ==========================================================================
   主题切换控件（夜间 / 日间模式）
   --------------------------------------------------------------------------
   本文件只负责「开关按钮」自身的样式：
     · 所有平台页面共用的外观（跟随 .btn 的基础尺寸）
     · 深色 / 浅色两套图标与配色的显隐切换
   主题色板本身在 theme.css（深色 + 浅色两组 token），各页面差异在各自 CSS。

   图标用两个内联 SVG 叠加，靠 [data-theme] 切换 opacity/transform，
   不引入任何外部字体或图片资源（平台要求零 CDN、可离线运行）。
   ========================================================================== */

.theme-toggle {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  /* 图标按钮：做成正方形，去掉文字按钮左右各 10px 的内边距，
     让它在顶栏里保持紧凑（与相邻按钮等高，见 .btn-sm 的 28px）。 */
  width: 28px;
  padding: 0;
}

/* 图标层。两个图标（太阳/月亮）同时存在于 DOM，由 [data-theme] 交叉淡入淡出 */
.theme-toggle__icon {
  position: relative;
  width: 16px;
  height: 16px;
  display: block;
  flex: 0 0 auto;
}
.theme-toggle__icon > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.22s ease, transform 0.28s ease;
}

/* 深色模式：显示月亮（点击可切到日间），淡出太阳 */
.theme-toggle__icon .icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.theme-toggle__icon .icon-moon { opacity: 1; transform: none; }

html[data-theme="light"] .theme-toggle__icon .icon-sun { opacity: 1; transform: none; }
html[data-theme="light"] .theme-toggle__icon .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.5); }

/* 主题切换时给整个页面一个极短的过渡，避免明暗硬切造成刺眼。
   仅作用于配色属性，不涉及尺寸/布局，因此不会引起任何抖动；
   平时（未切换）不加过渡，避免影响其它交互的即时反馈。 */
html.is-theme-switching,
html.is-theme-switching body {
  transition: background-color 0.2s ease, color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle__icon > svg { transition: none; }
}