/* ============================================================================
   全站统一 · 深浅色切换开关（「一个太阳一个月亮」）
   ----------------------------------------------------------------------------
   单一真源：所有页面的主题开关都套用本组件（.theme-switch[data-theme-switch]）。
   页面只需：
     1) <link rel="stylesheet" href="<相对路径>/common/theme-switch.css">
     2) <script src="<相对路径>/common/theme-switch.js"></script>
     3) 放一个空按钮：<button class="theme-switch" data-theme-switch type="button"
                        title="切换深浅色" aria-label="切换深浅色"></button>
   JS 会自动注入太阳/月亮两个图标 + 滑块，并绑定唯一的切换逻辑。
   视觉：亮色=滑块靠左停在太阳上（暖橙）；暗色=滑块靠右停在月亮上（品牌紫）。
   ============================================================================ */

.theme-switch{
  --ts-w:60px;                 /* 轨道宽 */
  --ts-h:34px;                 /* 轨道高 */
  --ts-inset:3px;              /* 滑块与轨道内边距 */
  --ts-thumb:calc(var(--ts-h) - var(--ts-inset) * 2);   /* 滑块直径 22px */
  --ts-ico:14px;               /* 图标尺寸 */
  position:relative;
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--ts-w);
  height:var(--ts-h);
  padding:0;
  margin:0;
  border:1px solid rgba(24,18,46,.10);
  border-radius:999px;
  background:#ECE7F9;          /* 亮色轨道：浅紫纸感 */
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .24s ease,border-color .24s ease;
  vertical-align:middle;
}
.theme-switch:hover{border-color:rgba(109,94,252,.45)}
.theme-switch:focus-visible{outline:2px solid #6D5EFC;outline-offset:2px}
.theme-switch:active{transform:translateY(.5px)}
/* [P1 触摸目标] 扩展点击命中区到 ≥44pt：可见轨道 34px，上下各补 5px 透明命中区 */
.theme-switch::after{content:'';position:absolute;inset:-5px 0}

/* 图标层：压在滑块之上（z-index:2），随主题换色 */
.theme-switch .ts-ico{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:var(--ts-ico);
  height:var(--ts-ico);
  display:grid;
  place-items:center;
  pointer-events:none;
  z-index:2;
  transition:color .24s ease,opacity .24s ease;
}
.theme-switch .ts-ico svg{display:block;width:var(--ts-ico);height:var(--ts-ico)}
.theme-switch .ts-sun{left:6px;color:#E8A33D}          /* 亮色：暖橙太阳 */
.theme-switch .ts-moon{right:6px;color:#A9A2C8}        /* 亮色：淡紫月亮（未激活） */

/* 滑块：亮色靠左（停在太阳处） */
.theme-switch .ts-thumb{
  position:absolute;
  top:var(--ts-inset);
  left:var(--ts-inset);
  width:var(--ts-thumb);
  height:var(--ts-thumb);
  border-radius:50%;
  background:#FFFFFF;
  box-shadow:0 2px 6px rgba(64,42,140,.30),inset 0 0 0 1px rgba(24,18,46,.04);
  z-index:1;
  transition:left .26s cubic-bezier(.4,0,.2,1),background .24s ease,box-shadow .24s ease;
}

/* 暗色：轨道压暗、滑块右移停在月亮处、月亮点亮、太阳转暗 */
html[data-theme="dark"] .theme-switch{
  background:#241E45;
  border-color:rgba(255,255,255,.14);
}
html[data-theme="dark"] .theme-switch:hover{border-color:rgba(167,139,250,.60)}
html[data-theme="dark"] .theme-switch .ts-thumb{
  left:calc(var(--ts-w) - var(--ts-thumb) - var(--ts-inset));
  background:#6D5EFC;
  box-shadow:0 2px 8px rgba(0,0,0,.48),inset 0 0 0 1px rgba(255,255,255,.10);
}
html[data-theme="dark"] .theme-switch .ts-sun{color:#6F6890}   /* 未激活 */
html[data-theme="dark"] .theme-switch .ts-moon{color:#FFFFFF}  /* 激活（白月压紫滑块） */

/* 只读/禁用态（保留给未来） */
.theme-switch[disabled]{opacity:.5;cursor:not-allowed}

/* 紧凑档：窄屏顶栏把开关缩一档，避免挤掉业务按钮 */
@media (max-width:560px){
  .theme-switch{--ts-w:54px;--ts-h:30px;--ts-ico:13px}
  .theme-switch::after{inset:-7px 0}
}