/* ════════════════════════════════════════════════════════════════════
   quality — 图形质量两档开关（Full / Light）。2026-06-21 改版（user）：
   分段文字 → **小图标按钮**（gauge=Full / feather=Light 交叉淡入）+ 切换时
   **一次性光谱辉光**（学 BOM 按钮 .dock-bom-rays 的 --pn-spectral 光环）。
   DESIGN.md：图标单色（§7）；光谱辉光 = BOM 同款光学 cue（§3.4/§3.5 例外、
   token 驱动 U3），仅一次性 620ms，不常亮。
   ════════════════════════════════════════════════════════════════════ */

/* v2.7.04: gfx toggle + FPS HUD grouped into ONE compact bordered block with a
   hairline divider between them (user req). The group owns the border + radius;
   the inner buttons (.gfx-toggle / .topbar-perf) drop their own border + margin
   and become flush segments. overflow:hidden clips to the rounded corners (the
   spectral bloom stays contained — fine, it's a 600ms cue). */
.topbar-perf-group {
  display: inline-flex;
  align-items: center;
  flex: none;
  /* v2.7.09: height aligned with the share button + search box (all 30px) so the
     three right-side widgets share a baseline. Inner segments stretch to 100%. */
  height: 30px;
  margin-right: 8px;
  border: 1px solid var(--line-1, #e5e5ea);
  border-radius: var(--radius-md, 5px);
  overflow: hidden;
}
.topbar-perf-group .gfx-toggle,
.topbar-perf-group .topbar-perf {
  height: 100%;
  margin: 0;
  border: none;
  border-radius: 0;
}
.topbar-perf-group .gfx-toggle { width: 28px; }
/* hairline divider = left border on the FPS segment (vanishes with it when hidden). */
.topbar-perf-group .topbar-perf { border-left: 1px solid var(--line-1, #e5e5ea); padding: 0 7px; gap: 4px; }

.gfx-toggle {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  margin-right: 8px;
  background: transparent;
  border: 1px solid var(--line-1, #e5e5ea);
  border-radius: var(--radius-md, 5px);
  cursor: pointer;
  color: var(--ink-2, #3f3f46);
  isolation: isolate;                 /* 把辉光 z-index 关在按钮内 */
  transition: color 160ms ease, background-color 160ms ease;
  /* 可见光谱轮 —— 与 --pn-spectral（08-action-dock）同配方，token 驱动、theme-aware */
  --gfx-spectral: conic-gradient(from 0deg,
    var(--wl-405), var(--sig-select), var(--wl-532),
    var(--sig-warn), var(--wl-1064), var(--wl-405));
}
.gfx-toggle:hover { color: var(--ink-1, #0d0d0f); background: var(--overlay-1, rgba(0, 0, 0, 0.04)); }

/* 两图标按档交叉淡入（gauge=Full · feather=Light） */
.gfx-toggle .gfx-ico {
  position: absolute;
  width: 16px; height: 16px;
  transition: opacity 200ms ease, transform 200ms ease;
}
.gfx-toggle[data-mode="full"]  .gfx-ico-full  { opacity: 1; transform: none; }
.gfx-toggle[data-mode="full"]  .gfx-ico-light { opacity: 0; transform: scale(0.82) rotate(8deg); }
.gfx-toggle[data-mode="light"] .gfx-ico-full  { opacity: 0; transform: scale(0.82) rotate(-8deg); }
.gfx-toggle[data-mode="light"] .gfx-ico-light { opacity: 1; transform: none; }

/* 切换时一次性光谱辉光 + 极淡 hover 光晕（学 BOM .dock-bom-rays） */
.gfx-toggle .gfx-glow {
  position: absolute;
  inset: -5px;
  z-index: -1;
  /* 贴合按钮形状：圆角矩形（按钮 radius ~5 + inset 5 → ~9），非圆形。 */
  border-radius: 9px;
  background: var(--gfx-spectral);
  filter: blur(7px) saturate(1.15);
  opacity: 0;
  pointer-events: none;
}
.gfx-toggle:hover .gfx-glow { opacity: 0.16; transition: opacity 0.4s ease; }
.gfx-toggle .gfx-glow.is-bloom { animation: gfx-bloom 600ms ease-out; }

/* 沿按钮（圆角矩形）形状从中心向外晕开 + 淡出。无旋转 → 不破坏形状贴合。 */
@keyframes gfx-bloom {
  0%   { transform: scale(0.78); opacity: 0; }
  30%  { opacity: 0.85; }
  100% { transform: scale(1.42); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .gfx-toggle .gfx-glow.is-bloom { animation: none; }
  .gfx-toggle .gfx-ico { transition: none; }
}