/* 学ぶ言語フィルタ (計画書 191 §3-4)
   vocabulary_decks/_word_language_filter.html.erb で利用。
   単語帳一覧 / タグ一覧 / 検索 / 辞書一覧の 4 面が読むため、
   vocabulary_decks.css のタグ chip には相乗りさせない
   (辞書一覧は vocabulary_decks.css を読んでいない) */

.vocab-lang-filter {
    display: grid;
    gap: 0.35rem;
    margin: 0.75rem 0;
}

.vocab-lang-filter__title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.vocab-lang-filter__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vocab-lang-filter__item {
    display: inline-flex;
}

.vocab-lang-filter__link {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-decoration: none;
}

.vocab-lang-filter__link:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* 選択中。タグ chip は「押して移動する」だけだが、こちらは絞り込みの状態を持つ。
   枠と背景の両方を変えるのは、色の差だけに頼らず選択が分かるようにするため */
.vocab-lang-filter__link.is-active {
    border-color: var(--accent);
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: 600;
}

/* ⚠️ モバイルでは 16 言語ぶんのチップが 5 行になり、その下の人気のタグ 5 行と合わせて
   **単語帳カードが 1 枚も見えない**位置まで一覧を押し下げる (計画書 191 §7-3 = 191-10)。
   1 行に収めて横へスワイプさせる。home / discover のレベルフィルタ
   (.level-filter-wrapper) と同じ作法。
   ⚠️ **どの言語も隠さない。** 件数のある言語を落とすのは「0 件はスキップ」とは
   別の判断になるため (feedback_zero_song_tags の線とは別)。 */
@media (max-width: 640px) {
    .vocab-lang-filter__chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .vocab-lang-filter__chips::-webkit-scrollbar {
        display: none;
    }

    /* 1 行なので縮ませない。縮むとチップの中で言語名が折り返す */
    .vocab-lang-filter__item {
        flex: 0 0 auto;
    }

    .vocab-lang-filter__link {
        white-space: nowrap;
    }

    /* ⚠️ 横スワイプは**先頭しか見えない**ので、選択中が 15 番目の言語だと
       「今どれで絞っているか」が画面から消える。「すべて」(絞り込みを外す口) を
       先頭に固定したまま、選択中をその隣へ持ち上げる。
       ⚠️ JS で scrollIntoView しない —— 読み込みのたびに横方向へ跳ねる。 */
    .vocab-lang-filter__item--all {
        order: -2;
    }

    .vocab-lang-filter__item.is-selected {
        order: -1;
    }
}

/* 絞り込み方 (any / all / only。計画書 191 §7-4a = 191-12)。
   ⚠️ **クラスは言語チップと分ける**。同じクラスにすると
   「言語チップが何個出ているか」を数える検査が絞り込み方まで数えてしまい、
   どちらの不具合も検出できなくなる (実際に 191-12 の実装中に落ちた)。
   見た目は同じ —— 押すと URL が変わる同じ性質の操作なので別の意匠を作らない。 */
.vocab-lang-match {
    display: grid;
    gap: 0.35rem;
    /* 言語チップのすぐ下に続くので、間隔を詰めて 1 つのまとまりに見せる */
    margin: 0 0 0.75rem;
}

.vocab-lang-match__title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.vocab-lang-match__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vocab-lang-match__item {
    display: inline-flex;
}

.vocab-lang-match__link {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-decoration: none;
}

.vocab-lang-match__link:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.vocab-lang-match__link.is-active {
    border-color: var(--accent);
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: 600;
}

/* ⚠️ モバイルでも**畳まない**。選択肢は 2 〜 3 個で 1 行に収まり、
   言語チップと違って横スワイプにすると「他にも選択肢がある」ことが見えなくなる */
@media (max-width: 640px) {
    .vocab-lang-match__link {
        white-space: nowrap;
    }
}