/* 「收藏本页」—— 五个工具页共用这一份。
 *
 * 只走各页已有的 token（--green/--text/--line），所以在人声分离的紫、
 * 消噪的绿、TTS 的紫上各自融进去，不需要三套配色。
 *
 * 位置：页面最顶上、页头之上的一条细横幅。2026-09-24 站主要求「放到最上边
 * 显眼的位置」。
 *
 * 为什么不放进页头：试过，在真实页头里逐语言、逐宽度量过 —— 页头本身已经
 * 超出容量。1440px 下不加任何东西，西语就超出内容区 179px、葡语 196、荷兰语
 * 202、德语 106，主按钮被挤出屏幕；手机上所有语言的主按钮都在屏幕外。
 * 再加一个按钮，哪怕只是图标，只会更糟。横幅占满整行，最长的译文也放得下。
 *
 * 不做 sticky：跟着滚动会一直压在工具上方占一条高度。页头本身是 sticky 的，
 * 横幅滚走之后页头照常贴顶。
 */

.bookmark-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 7px 16px;
  background: color-mix(in srgb, var(--green) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--green) 32%, transparent);
  font-size: 13px;
  line-height: 1.4;
}

.bookmark-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--green);
  border-radius: 6px;
  background: transparent;
  /* 文字用正文色、描边和图标用强调色：强调色在深底上做 13px 文字对比度不够
     （人声分离的紫约 4.4:1），正文色保证可读，颜色交给边框和图标。 */
  color: var(--text);
  /* 分开写：font 简写里放不了 inherit，旧版写成 `font: 600 13px/1 inherit`
     整条被浏览器丢掉，按钮一直用的是系统默认字体。 */
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  /* 译文比英文长的语言不能把按钮挤成两行。 */
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease;
}

.bookmark-button:hover,
.bookmark-bar.is-open .bookmark-button {
  background: color-mix(in srgb, var(--green) 20%, transparent);
}

.bookmark-button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.bookmark-button svg {
  fill: none;
  stroke: var(--green);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

/* 点开后的提示就在按钮旁边，横幅里有的是地方，不需要浮层。 */
.bookmark-hint {
  margin: 0;
  color: var(--text);
}

.bookmark-hint[hidden] { display: none; }