@charset "UTF-8";
/* ==========================================================================
   图像格式PictureFormat · assets/css/bgm.css
   阶段：P9.7 背景音乐开关（背景音乐机制层）

   纪律（与本主题其余 CSS 同源）：
     · 只消费 base.css 的令牌；本文件**不新增任何十六进制色** ⇒ 明色/暗色自动成立
       （暗色是 base.css §01b 的 prefers-color-scheme + [data-theme="dark"] 双通道，
        本文件不另造一套）。
     · 尺寸对齐同簇邻居 .np-drawer-trigger（padding / 描边 / 圆角 / 字号**
       逐项照抄**）—— 不许比邻居大一圈。
     · 状态不靠颜色：开/关用**线条**区分（开＝声波弧，关＝斜杠）。
     · 只有按钮与署名两件事，故独立成文件（不往 base.css 里塞）。
     · 无 JS 时按钮带 hidden（服务端输出 + bgm.js 解除）⇒ 不出现死控件。
   ========================================================================== */

/* ==========================================================================
   01 控件簇容器
   header.php 把「日志」抽屉入口与背景音乐开关收进同一容器：
   · 桌面：跟在 .np-nav__menu 之后，随 .np-nav__inner 的 justify-content:flex-end 靠右；
   · 移动 <768：.np-nav__inner 变 space-between，本容器整体靠右，
     两个按钮始终相邻、不各自散开，也不遮挡文章区（无浮动层）。
   ========================================================================== */
.np-nav__utils {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

/* ==========================================================================
   02 开关按钮（盒模型对齐 .np-drawer-trigger）
   ========================================================================== */
.np-bgm-toggle {
  position: relative;                    /* 供窄屏隐藏文案时锚定（不外溢） */
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  color: var(--text-strong);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius);
  background: transparent;
  /* font:inherit 已含 line-height ⇒ 本控件与邻居 .np-drawer-trigger 逐像素同高
     （两者都是 body 的 --lh-body 1.9，实量 43px）；切勿再单独降 line-height。 */
  font: inherit;
  cursor: pointer;
}
.np-bgm-toggle:hover { background: var(--blue-pale); }

/* 图标与文字同基线、不吃行高 */
.np-bgm-toggle__icon {
  display: block;
  flex: none;
  line-height: 0;
}
.np-bgm-toggle__label { white-space: nowrap; }

/* 焦点：沿用 base.css 的统一焦点环（键盘可见、鼠标不打扰）。
   此处只保证按钮自身参与该规则（button 已在全局 :focus-visible 覆盖内，
   显式再声明一次是为了在 forced-colors / 打印等场景下也可读）。 */
.np-bgm-toggle:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ==========================================================================
   03 两态：线条区分（不靠颜色，色弱可辨）
      aria-pressed="true"  → 显示声波弧（正在播放）
      aria-pressed="false" → 显示斜杠  （已关闭 / 默认）
   ========================================================================== */
.np-bgm-toggle__wave,
.np-bgm-toggle__slash { display: none; }

.np-bgm-toggle[aria-pressed="true"]  .np-bgm-toggle__wave  { display: inline; }
.np-bgm-toggle[aria-pressed="false"] .np-bgm-toggle__slash { display: inline; }

/* ==========================================================================
   04 音频元素：不占位、不出现在视觉层（播放由 bgm.js 控制）
   ========================================================================== */
.np-bgm-audio {
  display: none;
}

/* ==========================================================================
   05 页脚署名（沿用报脚排版语言：serif + 小字 + 加宽字距）
      独占一行（flex-basis:100%），不与既有报脚元素抢同一行
   ========================================================================== */
.np-bgm-credit {
  flex-basis: 100%;
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-label, var(--fs-xs));
  letter-spacing: var(--track-caps);
  color: var(--text-muted);
}
.np-bgm-credit__dot { padding-inline: var(--space-1); }

/* ==========================================================================
   06 打印 / 降低动效
      · 打印：开关是交互件，不打印（与 print.css 隐藏 .np-drawer-trigger 同理，
        为免改动既有 print.css，规则收在本文件）。
      · 署名是版权信息，**打印保留**。
      · 本控件无动画，降低动效下无需额外处理。
   ========================================================================== */
@media print {
  .np-bgm-toggle { display: none !important; }
}