/* ============================================================
   Segmented — 表示切替
   つまみが横に滑って追従し、瞬間移動しない。選択肢は 2–4。
   Switch（設定の真偽）とは別物で、これは表示の切替。
   ============================================================ */

.seg {
  display: inline-flex; position: relative;
  background: color-mix(in srgb, var(--ink) 5%, var(--surface));
  border: 1px solid var(--line); border-radius: var(--radius-control); padding: 3px;
}
.seg button {
  padding: 8px 18px; min-height: 36px; font-size: 13px; color: var(--ash);
  border-radius: 8px; position: relative; z-index: 1;
  transition: color var(--dur-mid) var(--ease);
}
.seg button[aria-selected="true"] { color: var(--ink); font-weight: 700; }
.seg .thumb {
  position: absolute; top: 3px; bottom: 3px; z-index: 0;
  background: var(--surface); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.1);
  transition: left var(--dur-slow) var(--ease), width var(--dur-slow) var(--ease);
}