/**
 * modebar.css — 四個工作模式共用的模式列(生成/修改/局部重繪/PPT)。
 *
 * 刻意不併進 nav.css:那支的職責是全站導覽,不含頁面專屬樣式,
 * 才能被每一頁原樣引用。也不留在 workspace.css:那支已接近 300 行上限。
 */

/* ---------- 模式列 ---------- */

/* 滿版橫幅:出血到視窗兩邊(同首頁 hero 那招),pill 置中浮在上面。
 * ★ 圖只能掛外層,不能貼在 pill 自己的 ::before —— 那會蓋掉 pill 那層不透明的
 *   --surface,未選中的模式文字直接落在照片上(實測 98% 面積掉到 4.5:1 以下)。
 * ★ z-index: 0 不能省,見 CLAUDE.md〈拿照片當背景〉。 */
.ws-modebar {
  /* 兩個主題分開調:淺色是照片直接鋪在暖白上,壓一點才不會搶掉 pill;
   * 暗色走 screen 混合(圖是為暖白底生成的),同樣的不透明度會亮成一條光帶,
   * 所以砍到約一半。 */
  --band-opacity: 0.88;
  position: relative;
  z-index: 0;
  display: flex;
  justify-content: center;
  margin-block: 22px 20px;
  padding-block: 18px;
}

.ws-modebar::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(-50vw + 50%);
  right: calc(-50vw + 50%);
  background: url("../img/card-image.jpg") center 38% / cover no-repeat;
  opacity: var(--band-opacity);
  mix-blend-mode: var(--art-blend);
  /* 橢圓漸層遮罩:圖集中在 pill 周圍,四邊化開成一圈光暈。
   * ★ 半徑是從中心量的,所以水平要寫 55%(≈半個視窗)才會在視窗左右緣收乾淨,
   *   垂直要寫 50%(=半個橫幅高)才會在上下緣收乾淨。寫 100% 等於到邊都還沒淡完。 */
  -webkit-mask-image: radial-gradient(55% 50% at 50% 50%, #000 0%, #000 24%, transparent 100%);
  mask-image: radial-gradient(55% 50% at 50% 50%, #000 0%, #000 24%, transparent 100%);
}

.ws-modes {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  /* pill 現在浮在照片上,靠陰影脫離背景(不然白 pill 會黏在亮處的橫幅上) */
  box-shadow: var(--shadow-card);
  /* 置中:fit-content 讓它只佔內容寬,auto 邊距把它推到中間 */
  width: fit-content;
  margin-inline: auto;
}

.ws-mode {
  padding: 7px 20px;
  border-radius: 999px;
  font-size: var(--fs-md);
  color: var(--text-dim);
  white-space: nowrap;
  transition: color 0.18s ease, background-color 0.18s ease;
}

.ws-mode:hover { color: var(--text); }

/* 當前模式:實心反白。與 theme__btn 的選中態同一套語彙 */
.ws-mode--current {
  background: var(--text);
  color: var(--bg);
}

:root[data-theme="dark"] .ws-modebar { --band-opacity: 0.46; }

/* ---------- 窄螢幕 ---------- */

@media (max-width: 620px) {
  .ws-modes {
    width: 100%;
    overflow-x: auto;
    /* ★ 例外:全站唯一刻意寫 scrollbar-width 的地方(隱藏用)。
     *   其他元素一律不要寫,會關掉 ::-webkit-scrollbar 那整套樣式。 */
    scrollbar-width: none;
  }
  .ws-modes::-webkit-scrollbar { display: none; }
}