/* ============================================================
   Segmented control · 2/3-way text toggle in a muted track
   (2026-06-12 — 補齊參考圖的 Active / Suggested / Inactive 式切換)
   ------------------------------------------------------------
   與 .tabs 的差別：tabs = 頁籤導覽（pill/底線）；segmented = 軌道內的
   互斥切換，選中為「白色浮起 pill」，用於同一資料的視角切換。
   anatomy
     .segmented              — 灰軌道容器
       .segmented__btn       — 段（預設靜音文字）
       .segmented__btn--active — 選中：白浮起 pill
   ============================================================ */

.segmented {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 3px;
  /* 2026-07-16：軌道恆用 --muted（比 active 的 --card 暗），修正原 color-mix(foreground 5%) 在深色反把軌道提亮到接近 card、控制融進背景的缺陷；
     再加真 border 界定邊界（Q4 控制項用真 border），讓 segmented 在 card/popover 等任何底色上都看得出是一個切換控制 */
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.segmented__btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: var(--sp-6) var(--sp-14);
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: var(--fs-13);
  font-weight: var(--fw-regular);
  line-height: var(--lh-none);
  color: var(--foreground-muted);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--duration) var(--easing),
    color var(--duration) var(--easing);
}
.segmented__btn:hover { color: var(--foreground); }

/* 2026-07-27 Q8 裁決 A：已選態補上品牌橘。
   刻意只換「字色」、保留白色浮起 pill——浮起是這個元件的結構語彙（iOS segmented 的實體隱喻），
   底色改橘會把 pill 的「一塊被抬起來」讀成「一塊被塗色」。橘出現在墨色上，形狀語言不動。
   與 radio-card.css 既有的橘色標記點同調。 */
.segmented__btn--active {
  background: var(--card);
  color: var(--selected-ink);
  box-shadow:
    var(--shadow-raise),
    0 0 0 1px var(--border);
}
.segmented__btn--active:hover { color: var(--selected-ink); }

.segmented__btn:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* icon-only — 段內只有圖示、沒有文字（清單／卡片檢視切換）。文字段靠左右內距撐寬，
   純圖示得改成正方形段，否則 14px 的左右內距會把 18px 圖示擠成扁的。
   2026-07-23 取代原 shared.css 的 `.view-switch`（實心黑填的膠囊）：那是站上「同一資料的
   視角切換」這個角色的第二種做法，與 segmented 的白浮起 pill 打架（STYLE-DECISIONS 已選
   狀態用中性、非橘），故收斂成本變體。 */
.segmented__btn--icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  padding: var(--sp-6);
}
.segmented__btn--icon .ztor-icon { width: 18px; height: 18px; }

/* locked — 建立後固定不可編輯（D137）。整組停用、不可點，仍保留 --active
   高亮以呈現當前值（僅唯讀呈現）。搭 aria-disabled="true" 與各 btn 的 disabled。 */
.segmented--locked { opacity: 0.6; }
.segmented--locked .segmented__btn { pointer-events: none; cursor: not-allowed; }
.segmented--locked .segmented__btn:hover { color: var(--foreground-muted); }
.segmented--locked .segmented__btn--active:hover { color: var(--foreground); }