/* ==========================================================================
   collink · components.css —— 通用组件（当前阶段：主题切换控件）
   后续步骤会把玻璃态卡片、按钮、Modal、Toast、表格卡片化并入本文件。
   ========================================================================== */

/* ── 淡粉 / 淡蓝 双色切换开关 ─────────────────────────────
   宽 64px 的胶囊，两侧各放一个微缩图标，指示球盖在当前一侧。 */
.color-toggle{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 64px;
  height: 32px;
  flex: none;
  padding: 0 7px;
  border-radius: var(--r-full);
  border: 1px solid var(--glass-line);
  background: var(--bg-3);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-mid) var(--ease),
              border-color var(--dur-mid) var(--ease),
              box-shadow var(--dur-mid) var(--ease);
}
.color-toggle:hover{ border-color: var(--accent); box-shadow: var(--sh-glow); }
.color-toggle:focus-visible{ outline: none; box-shadow: var(--sh-glow); }
.color-toggle:active{ transform: scale(.97); }

/* 两个微缩图标：非当前项淡出，当前项提亮 */
.color-toggle .ct-ico{
  position: relative;
  z-index: 2;
  font-size: 12px;
  line-height: 1;
  opacity: .38;
  filter: grayscale(1);
  transition: opacity var(--dur-mid) var(--ease), filter var(--dur-mid) var(--ease);
  pointer-events: none;
}
.color-toggle[data-color="pink"] .ct-pink,
.color-toggle[data-color="blue"] .ct-blue{ opacity: 1; filter: none; }

/* 指示球：粉/蓝双色渐变，随主题左右滑动 */
.color-toggle .ct-ball{
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  z-index: 1;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 2px 8px hsl(var(--c-h) var(--c-s) 50% / .45),
              inset 0 1px 0 var(--glass-hi);
  transition: transform var(--dur-mid) var(--ease-spring),
              background var(--dur-mid) var(--ease);
}
.color-toggle[data-color="blue"] .ct-ball{ transform: translateX(32px); }

/* ── 明暗循环按钮 ────────────────────────────────────────── */
.mode-btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 32px; flex: none;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: none; color: var(--fg);
  font-size: 15px; line-height: 1; font-family: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.mode-btn:hover{ background: var(--bg-3); border-color: var(--glass-line); }
.mode-btn:focus-visible{ outline: none; box-shadow: var(--sh-glow); }
.mode-btn:active{ transform: scale(.94); }
/* auto 模式加一个小圆点，让「跟随系统」和固定深/浅色可区分 */
.mode-btn[data-mode="auto"]{ position: relative; }
.mode-btn[data-mode="auto"]::after{
  content: ""; position: absolute; right: 4px; bottom: 3px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
}

/* ── 侧栏底部的主题控件行（移动端抽屉内可见）─────────────── */
.side-theme{
  display: none;                 /* 由 .only-mobile 在窄屏放开 */
  align-items: center;
  gap: var(--sp-2);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.side-theme.only-mobile{ display: none; }
@media (max-width: 860px){
  .side-theme.only-mobile{ display: flex; }
}

/* ── 触控优化：手机端放大到 44px 最小点击区域 ─────────────── */
@media (max-width: 767px){
  .color-toggle{ width: 72px; height: 40px; }
  .color-toggle .ct-ball{ width: 32px; height: 32px; }
  .color-toggle[data-color="blue"] .ct-ball{ transform: translateX(32px); }
  .color-toggle .ct-ico{ font-size: 14px; }
  .mode-btn{ width: var(--tap); height: var(--tap); font-size: 18px; }
}