/* components/chip-scroll.css — 狭幅でチップ列を**折り返さず横送り**にする共通機構。
 *
 * owner 指示 2026-09-19「狭幅でチップ列 (タブ / フィルタ / domain pill / sort 等) が折り返して
 * 画面を占有する箇所を**すべて**横スワイプに」。
 *
 * 🔴 **借用元 = `shared/css/pages/search.css` の `.sr-tabs`** (2026-08-24 に確立した型)。
 *   新しい型を持ち込まず、既に 3 面で動いている実装を 1 箇所へ集約する。
 * ⚠ **共通化するのは「送りの機構」だけ** — 選択中の見た目 (色・下線・太さ) は面ごとに残す。
 *   面ごとに意味が違うものを 1 つにすると、片方を直すともう片方が壊れる。
 * ⚠ **`flex-wrap: wrap` は面側から消す** — ここの `nowrap` と同詳細度なので、残すと
 *   `<link>` の順で勝敗が決まる (順序依存を作らない)。
 *
 * 使い方: 列の要素へ `chip-scroll` を足す。地色が `--t-bg` でない面は
 *   `--chip-scroll-bg` を面側で上書きする (例: discover の `.dc-mood-chips`)。
 */
.chip-scroll {
  /* 🔴 **地色は変数で受ける。ただし既定をここで「宣言」しない** (2026-09-19)。
     ⚠ 影のグラデーションの下地は「**この行が乗る面**の色」でなければ端に違う色の帯が出る
       (`.dc-mood-chips` は `--t-bg-elev`・`.dash-tags` はカードの `--surface2` の上に乗る)。
     🔴 `--chip-scroll-bg: var(--t-bg)` と**宣言すると面側と同詳細度 (0,1,0) になり、
       `<link>` の順で勝敗が決まる** — utility は面 CSS の後に読むので **utility が勝ち、
       面の指定が無視される** (実測: `/discover/` の列が面の白ではなくページ地色になった)。
     ⇒ 宣言は置かず、**使う場所の `var(…, フォールバック)`** で受ける。これなら面側 (または
       その祖先) が変数を置いた時点で必ず勝つ = 順序に依存しない。 */
  display: flex;
  flex-wrap: nowrap;
  /* 🔴 **`min-width: 0` が無いと列が縮まず、ページごと横へ広がる** (2026-09-19 実測)。
     ⚠ flex / grid の item は既定が `min-width: auto` = **内容より小さくならない**ので、
       `overflow-x: auto` を付けても**溢れずに自分が伸びる**。⇒ `/mypage/` で
       `document.scrollWidth` が **390 → 756** になり、面ごと横スクロールした。
     ⚠ 「1 行になった」だけでは検出できない (行数は 1 のまま) — **横溢れも測る**。 */
  min-width: 0;
  overflow-x: auto;
  /* ⚠ `overflow-x: auto` は `overflow-y` も auto にする。子の `margin-bottom: -1px` 等で
     scrollHeight > clientHeight になると**縦**スクロールバーが出る (`.sr-tabs` が実際に踏んだ)。
     ⇒ **必ず対で** `hidden` にする。 */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* 横スクロールの手がかり (scroll shadow)。両端の地色グラデ 2 枚を `local` (= 内容と一緒に
     動き、端に着くと影を隠す)、影 2 枚を `scroll` (= 枠に固定)。⚠ 色は token 経由のみ。 */
  background-color: var(--chip-scroll-bg, var(--t-bg));
  background-image:
    /* 🔴 地色は**先頭 12px を不透明**にしてから薄れさせる。影 (下の 2 枚) は 12px で端が最も
       濃いので、地色を 0 → 26px で薄れさせるだけだと、溢れていない列でも影の残りが端に見える
       (dark `/discover/` で色差 50・2026-09-26 実測)。 */
    linear-gradient(to right, var(--chip-scroll-bg, var(--t-bg)) 0, var(--chip-scroll-bg, var(--t-bg)) 12px, transparent),
    linear-gradient(to left, var(--chip-scroll-bg, var(--t-bg)) 0, var(--chip-scroll-bg, var(--t-bg)) 12px, transparent),
    linear-gradient(to right, color-mix(in srgb, var(--t-fg) 22%, transparent), transparent),
    linear-gradient(to left, color-mix(in srgb, var(--t-fg) 22%, transparent), transparent);
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 26px 100%, 26px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
  /* 🔴 スクロールバー**だけ**を隠す。⚠ 隠してよいのは、上の scroll shadow が「まだ続きが
     ある」手がかりを担っているから — **shadow と scrollbar 非表示は必ず一緒に扱う**
     (片方だけ消すと手がかりごと失われる)。 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.chip-scroll::-webkit-scrollbar { display: none; }
/* 🔴 **子を縮めない** — `flex: 0 0 auto` が無いと、収まらない時に chip が潰れて
   「横送りにしたのに読めない」になる。⚠ 直接の子に当てる (面によっては chip を
   `<span>` で包むので、`.chip` 側に当てても no-op になる)。 */
.chip-scroll > * { flex: 0 0 auto; }