/* 切り替え（いくつかから1つを選ぶボタンの並び）。タブの中の見方・絞り込み・2〜3個の選択肢に使う。
   今の項目は白く浮かせ、実行のボタンに見せない（選んでいる状態だと分かる形）。項目は1行に並べ、2段に割らない
   （狭い幅では横に送る）。seg.js があれば、選んだ時に白い下地が元の位置から新しい位置へ滑る。
   今の項目は aria-pressed="true"（ボタンの切り替え）・aria-selected="true"（タブ）・aria-current のどれかで示す。 */
.hk-seg { box-sizing: border-box; position: relative; display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 2px; max-width: 100%; padding: 3px;
  overflow-x: auto; scrollbar-width: none; vertical-align: middle;
  background: var(--hk-surface-3); border: var(--hk-bw) solid var(--hk-line); border-radius: var(--hk-radius-md); font-family: var(--hk-font); }
.hk-seg::-webkit-scrollbar { display: none; }
.hk-seg-b { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: var(--hk-sp-2); height: calc(var(--hk-ctl-h) - 6px - 2 * var(--hk-bw)); margin: 0; padding: 0 var(--hk-sp-5);
  border: 0; border-radius: var(--hk-radius); background: transparent; color: var(--hk-text-2); font-family: inherit; font-size: var(--hk-fs-sm); font-weight: var(--hk-fw-md);
  white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--hk-t-fast) var(--hk-ease-out), background-color var(--hk-t-fast) var(--hk-ease-out); }
.hk-seg-b:hover { color: var(--hk-text); background: var(--hk-line); }
.hk-seg-b:focus-visible { outline: var(--hk-focus); outline-offset: 0; }
.hk-seg-b:is([aria-pressed="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"])) { color: var(--hk-text); background: var(--hk-surface); box-shadow: var(--hk-shadow-1), 0 0 0 var(--hk-bw) var(--hk-line-strong); }
@media (max-width: 480px) { .hk-seg-b { padding: 0 var(--hk-sp-3); } }
.hk-seg-b .hk-seg-n { font-size: var(--hk-fs-xs); font-weight: var(--hk-fw-bold); color: var(--hk-muted); font-variant-numeric: tabular-nums; }
/* seg.js が動いている時：白い下地は1つの印（.hk-seg-mark）が受け持ち、選んだ項目の位置へ滑る */
.hk-seg[data-hk-on] > .hk-seg-b:is([aria-pressed="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"])) { background: transparent; box-shadow: none; }
.hk-seg-mark { position: absolute; z-index: 0; left: 0; top: 0; border-radius: var(--hk-radius); background: var(--hk-surface); box-shadow: var(--hk-shadow-1), 0 0 0 var(--hk-bw) var(--hk-line-strong); pointer-events: none;
  transition: transform var(--hk-t-mid) var(--hk-ease-out), width var(--hk-t-mid) var(--hk-ease-out); }