/* ==========================================================================
   power-knowledge.tech 站群 · 8 色切换器样式（零构建版）
   --------------------------------------------------------------------------
   配合 assets/theme-vanilla.js 使用。构建站（Tailwind）不需要本文件 ——
   那边用 assets/ThemeSwitcher.tsx，样式走工具类。

   接入：
     <link rel="stylesheet" href="theme-vars.css" />
     <link rel="stylesheet" href="theme-switcher.css" />
     ...
     <div id="pk-theme-switcher"></div>

   颜色全部走变量，8 套主题自动跟随。若本站命名用的是 --color-primary*，
   把下文的 --color-brand* 全局替换掉即可（两者语义相同）。
   ========================================================================== */

.pk-theme-switcher {
  position: relative;
  flex-shrink: 0;      /* 顶栏里绝不被导航挤压 —— 这条最容易漏 */
  display: inline-block;
}

/* ---------- 触发按钮 ---------- */
.pk-theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--color-text-secondary, #a3a3a3);
  font: inherit;
  font-size: 12.5px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, color .15s, background-color .15s;
}
.pk-theme-btn:hover,
.pk-theme-switcher.open .pk-theme-btn {
  border-color: var(--color-border, #404040);
  color: var(--color-text-primary, #f5f5f5);
  background: var(--color-surface, #171717);
}
.pk-theme-btn:focus-visible {
  outline: 2px solid var(--color-brand-light, #14b8a6);
  outline-offset: 2px;
}

/* 当前主题的小圆点。深色主题下给一像素亮边，否则深色点会「消失」在深底上 */
.pk-theme-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 255, 255, .08);
}

/* 箭头：展开时翻转 180°。用 transform 而不是换图标，少一次 DOM 变更 */
.pk-theme-caret {
  flex: none;
  opacity: .75;
  transition: transform .18s ease;
}
.pk-theme-switcher.open .pk-theme-caret { transform: rotate(180deg); }

/* ---------- 下拉面板 ---------- */
.pk-theme-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;                       /* 右对齐：顶栏最右的元素，左对齐会溢出视口 */
  z-index: 60;
  min-width: 168px;
  padding: 5px;
  border: 1px solid var(--color-border, #404040);
  border-radius: 10px;
  background: var(--color-surface-elevated, #262626);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
}
.pk-theme-menu[hidden] { display: none; }

.pk-theme-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-secondary, #a3a3a3);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  transition: background-color .12s, color .12s;
}
.pk-theme-item:hover {
  background: var(--color-surface, #171717);
  color: var(--color-text-primary, #f5f5f5);
}
.pk-theme-item.active {
  color: var(--color-brand-light, #14b8a6);
  font-weight: 700;
}
.pk-theme-item.active::after {
  content: '';
  margin-left: auto;
  width: 5px;
  height: 9px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-1px);
}

/* ---------- 移动端 ---------- */
/* 窄屏下菜单改成贴右边缘的定宽面板，避免 right:0 在窄容器里算歪 */
@media (max-width: 640px) {
  .pk-theme-menu {
    min-width: 150px;
    right: 0;
  }
  .pk-theme-btn { padding: 0 6px; }
  .pk-theme-label { display: none; }   /* 只留色点 + 箭头，省 26px 横向空间 */
}