/*
 * vocabulary_dictionaries.css
 * 単語辞書の公開面 (/vocabulary_dictionaries、/vocabulary_dictionaries/:id) のスタイル。
 * 計画書 179 §5.2 / 179-9。
 *
 * 面の作りは単語帳一覧 (vocabulary_decks.css) に揃える。色はテーマ変数だけを使う
 * (docs/reference/design_tokens.md)。
 */

.vocabulary-dict-index,
.vocabulary-dict-show {
  color: var(--text-primary);
}

/* フッターの直前で本文が終わると詰まって見える (2026-08-17 ユーザー指摘)。
   公開面のページルートに共通の下余白を置く */
.vocabulary-dict-index,
.vocabulary-dict-show,
.vocabulary-dict-word {
  display: block;
  margin-bottom: 3rem;
}

/* ── 一覧 ─────────────────────────────────────────────────────────── */

/* ヘッダ下は 2.5rem (§17.12 の余白の段階化。辞書詳細と同じ) */
.vocabulary-dict-index__header {
  margin-bottom: 2.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.vocabulary-dict-index__title {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
}

.vocabulary-dict-index__lead {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.vocabulary-dict-index__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.vocabulary-dict-index__tabs,
.vocabulary-dict-index__sort {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.vocabulary-dict-index__tab,
.vocabulary-dict-index__sort-link {
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
}

.vocabulary-dict-index__tab.is-active,
.vocabulary-dict-index__sort-link.is-active {
  background: var(--card-actions-bg);
  color: var(--text-primary);
  font-weight: 600;
}

/* 並び替えと作成ボタンはツールバーの行末に寄せてまとめる (§17.12 の⑤) */
.vocabulary-dict-index__controls-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* 「辞書を作る」は + アイコンだけの正方ボタン (2026-08-17 ユーザー要望)。
   文言は吹き出し (__tip) と visually-hidden で補う。
   accent 系の塗りは使わない (テーマによって文字色との比が確保できないため) */
.vocabulary-dict-index__create-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 1.05rem;
}

.vocabulary-dict-index__create-link:hover {
  background: var(--card-actions-bg);
}

/* ラベルをアイコンに畳んだぶんの吹き出し (deck カードの __tip と同方式。
   CSS は面ごとに持つ既存方針のためここに写す)。
   ネイティブ title は表示までの待ちが長く気付けないので CSS で描く。
   非表示は opacity で行う (display 切り替えはしない = feedback_cls)。 */
.vocabulary-dict-index__tip,
.vocabulary-dict-tip {
  position: relative;
}

.vocabulary-dict-index__tip::after,
.vocabulary-dict-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 0.25rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--card-overlay-border);
  border-radius: 4px;
  background: var(--card-overlay-bg);
  color: var(--card-overlay-fg);
  font-size: 0.7rem;
  line-height: 1.5;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.vocabulary-dict-index__tip:hover::after,
.vocabulary-dict-tip:hover::after {
  opacity: 1;
}

/* 管理者の吹き出しだけは名前を含むぶん長い。中央寄せだとカード
   (overflow: hidden) からはみ出して切れるので、行末を基準に左へ伸ばす。 */
.vocabulary-dict-index__meta-owner::after {
  left: auto;
  right: 0;
  transform: none;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 作成ボタンはツールバーの行末なので、右端を基準に左へ伸ばす (画面外に出さない) */
.vocabulary-dict-index__create-link::after {
  left: auto;
  right: 0;
  transform: none;
}

/* ── 自分の単語辞書のカード (計画書 186 §8.1) ─────────────────────────── */

/* 公開の台帳を探しに来た人の視界に私物が混ざるので、辞書の一覧に混ぜず
   先頭の別区画として区切る。カード幅は一覧のグリッドと同じ列幅に揃えて、
   「同じ棚の 1 枚」ではなく「別の棚」に見せる */
.vocabulary-dict-index__personal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.vocabulary-dict-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.vocabulary-dict-index__item {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  overflow: hidden;
}

.vocabulary-dict-index__link {
  display: block;
  padding: 1rem;
  color: var(--text-primary);
  text-decoration: none;
}

.vocabulary-dict-index__link:hover {
  background: var(--card-actions-bg);
}

/* カバー (計画書 181)。__link の padding を打ち消してカード幅いっぱいに敷く */
.vocabulary-dict-index__link .vcover {
  margin: -1rem -1rem 0.75rem;
  width: auto;
}

.vocabulary-dict-index__dict-title {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.vocabulary-dict-index__dict-description {
  margin: 0 0 0.75rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* アイコン + 値だけを 1 行に流す (ラベルは吹き出しと読み上げへ = deck カードと同方式) */
.vocabulary-dict-index__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.vocabulary-dict-index__meta > div {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.vocabulary-dict-index__meta dt,
.vocabulary-dict-index__meta dd {
  margin: 0;
}

.vocabulary-dict-index__meta dd {
  color: var(--text-primary);
}

.vocabulary-dict-index__meta-owner dd {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.vocabulary-dict-index__empty,
.vocabulary-dict-show__empty {
  margin: 1.5rem 0;
  color: var(--text-secondary);
}

.vocabulary-dict-index__footer-links {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.vocabulary-dict-index__footer-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
}

.vocabulary-dict-index__footer-link:hover {
  color: var(--text-primary);
}

/* ── 一覧下部の説明 (三分冊のどれなのかを取り違えさせないための 3 枠) ────────── */

.vocabulary-dict-guide {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-color);
}

.vocabulary-dict-guide__heading {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}

.vocabulary-dict-guide__intro {
  margin: 0 0 1rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
}

.vocabulary-dict-guide__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.vocabulary-dict-guide__item {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  padding: 0.9rem;
}

.vocabulary-dict-guide__item-heading {
  margin: 0 0 0.4rem;
  font-size: 1rem;
}

.vocabulary-dict-guide__item-body {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* ── 詳細 ─────────────────────────────────────────────────────────── */

.vocabulary-dict-show__header {
  /* 余白の段階化 (§17.12): セクション間 (2.5rem) > 要素間 (1rem 前後) > 行間 */
  margin-bottom: 2.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}

/* カバー (計画書 181) と見出しを横に並べる。狭い画面では下の @media で縦積みにする */
.vocabulary-dict-show__headline {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.vocabulary-dict-show__headline .vcover {
  width: 200px;
}

.vocabulary-dict-show__headline-text {
  min-width: 0;
}

.vocabulary-dict-show__title {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
}

@media (max-width: 600px) {
  .vocabulary-dict-show__headline {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .vocabulary-dict-show__headline .vcover {
    width: 100%;
  }
}

.vocabulary-dict-show__description {
  margin: 0 0 0.75rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.vocabulary-dict-show__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.vocabulary-dict-show__meta > div {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* 管理者はアバター + 名前 (詳細ページでは名前はデータなので見せる。ラベルだけ畳む) */
.vocabulary-dict-show__meta-owner-value {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.vocabulary-dict-show__meta dt,
.vocabulary-dict-show__meta dd {
  margin: 0;
}

.vocabulary-dict-show__meta dd {
  color: var(--text-primary);
}

/* 投稿を締め切っていることは、投稿しようとして初めて分かる形にしない */
.vocabulary-dict-show__notice {
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--card-radius);
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.vocabulary-dict-show__manage {
  margin: 0.75rem 0 0;
}

.vocabulary-dict-show__manage-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
}

.vocabulary-dict-show__manage-link:hover {
  background: var(--card-actions-bg);
  color: var(--text-primary);
}

.vocabulary-dict-show__section-title {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
}

/* §17.15: 公開中 / 承認待ちのタブ (承認待ちを見られる人にだけ出る)。
   見た目は一覧のタブ (__tab) と同じ土台 */
.vocabulary-dict-show__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.vocabulary-dict-show__tab {
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
}

.vocabulary-dict-show__tab.is-active {
  background: var(--card-actions-bg);
  color: var(--text-primary);
  font-weight: 600;
}

/* 検索 (左) と並び替え (行末)。⚠️ 投稿の入口はここに置かない = 一覧の末尾へ移した
   ので、検索は素直に左寄せでよい (2026-08-19 ユーザー要望)。
   space-between にすると検索が無い辞書で並び替えだけが中央に浮く */
.vocabulary-dict-show__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.vocabulary-dict-show__search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.vocabulary-dict-show__search-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* ページ内の絞り込みは送信ボタンを持たないので、検索の入力だと分かる印を添える */
.vocabulary-dict-show__search-icon {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.vocabulary-dict-show__search-input {
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 0.9rem;
  min-width: 12rem;
}

.vocabulary-dict-show__search-button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  background: var(--card-actions-bg);
  color: var(--text-primary);
  font-size: 0.9rem;
  cursor: pointer;
}

.vocabulary-dict-show__search-clear {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* 検索ボタンはアイコンだけの正方 (§17.12。文言は吹き出しと読み上げへ) */
.vocabulary-dict-show__search-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
}

.vocabulary-dict-show__sort {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

.vocabulary-dict-show__sort-link {
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
}

.vocabulary-dict-show__sort-link.is-active {
  background: var(--card-actions-bg);
  color: var(--text-primary);
  font-weight: 600;
}

.vocabulary-dict-show__count {
  margin: 0 0 0.5rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* 単語数が多い辞書では表が横に伸びるので、面ごとではなく表だけを横スクロールさせる */
.vocabulary-dict-show__table-wrap {
  overflow-x: auto;
}

/* ⚠️ min-width を与えて**モバイルでは横スクロールさせる**。
   width:100% だけだと 4 列 + セル内の抜粋を狭い画面に押し込もうとして、
   単語列が 1 文字ずつ折り返す (179-10 の描画確認で実測) */
.vocabulary-dict-show__table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.vocabulary-dict-show__table th,
.vocabulary-dict-show__table td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border-color);
  text-align: left;
}

.vocabulary-dict-show__table th {
  color: var(--text-secondary);
  font-weight: 600;
  white-space: nowrap;
}

.vocabulary-dict-show__word {
  color: var(--text-primary);
  font-weight: 600;
}

.vocabulary-dict-show__kana,
.vocabulary-dict-show__posts {
  color: var(--text-secondary);
}

/* 承認待ちは投稿者本人と管理者にしか出ない (§4.1)。
   ⚠️ --color-danger は薄背景バッジに使えない (10 テーマ実測、theme_system_design.md) */
.vocabulary-dict-show__badge {
  margin-left: 0.4rem;
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--color-warning);
  border-radius: 999px;
  color: var(--color-warning);
  font-size: 0.75rem;
  white-space: nowrap;
}

/* ── 単語詳細・投稿 (179-10) ───────────────────────────────────────── */

/* 投稿の入口。フォーム本体は別ページなので、ここに置くのはリンクだけ */
/* 投稿の入口は一覧の末尾。表と離して置く (読み終えた先にある形) */
.vocabulary-dict-show__submit {
  margin: 1.5rem 0 0;
}

/* ⚠️ ここは + アイコンだけにしない (2026-08-19 ユーザー要望)。押す人が少ない操作なので、
   何のボタンかが文字で分かる形にする。一覧の「辞書を作る」+ とは扱いを分ける。
   ⚠️ 主役 (練習する) と競わないよう accent 系の塗りは使わない */
.vocabulary-dict-show__submit-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.9rem;
}

.vocabulary-dict-show__submit-link:hover {
  background: var(--card-actions-bg);
  color: var(--text-primary);
}

/* 単語詳細の「投稿を追加する」も投稿一覧の末尾に置く文字ボタン (辞書詳細と同じ扱い)。
   ⚠️ クラスは辞書詳細と分けたままにする —— 置き場所も文言も別で、片方だけ変える日が来る */
.vocabulary-dict-word__add {
  margin: 1.5rem 0 0;
}

.vocabulary-dict-word__add-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.9rem;
}

.vocabulary-dict-word__add-link:hover {
  background: var(--card-actions-bg);
  color: var(--text-primary);
}

.vocabulary-dict-show__word-link {
  color: var(--text-primary);
  text-decoration: none;
}

.vocabulary-dict-show__word-link:hover {
  text-decoration: underline;
}

/* 代表投稿の抜粋。列を増やさず単語の下に添える。
   ⚠️ 1 行に省略する (折り返すと行高が単語ごとにばらつき、表として読めなくなる) */
.vocabulary-dict-show__word-excerpt {
  display: block;
  max-width: 26rem;
  margin-top: 0.15rem;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vocabulary-dict-show__practice {
  color: var(--text-secondary);
  white-space: nowrap;
}

/* 読みも折り返さない (2 行に割れると単語との対応が読み取りにくい) */
.vocabulary-dict-show__kana {
  white-space: nowrap;
}

/* ヘッダ下は 2.5rem (§17.12 の余白の段階化。辞書詳細と同じ) */
.vocabulary-dict-word__header {
  margin-bottom: 2.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color);
}

.vocabulary-dict-word__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.35rem;
  font-size: 1.6rem;
}

.vocabulary-dict-word__kana {
  margin: 0 0 0.75rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.vocabulary-dict-word__section {
  margin-bottom: 2.5rem;
}

/* 練習帳への追加 (179-16)。ボタン・バッジ本体の見た目は共有 CSS
   (vocabulary_notebook_add.css) が持ち、この面ではセクション間隔だけ揃える */
.vocabulary-dict-word__notebook-add {
  margin-bottom: 2.5rem;
}

/* いいね (179-17)。ヘッダのメタ行に混ざるトグルボタン。
   塗りは liked のときだけ accent (テーマ変数のみ) */
.vocabulary-dict-word__like-button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.vocabulary-dict-word__like-button:hover,
.vocabulary-dict-word__like-button.is-liked {
  color: var(--accent);
}

.vocabulary-dict-word__like-button:disabled {
  opacity: 0.6;
  cursor: default;
}

/* 練習量はゲージを描かず数字だけ (母数のあるゲージは練習帳の概念)。
   ラベル文字はアイコンの吹き出しへ畳み、アイコン + 値を 1 行に流す (§17.12) */
.vocabulary-dict-word__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0 0 0.5rem;
}

.vocabulary-dict-word__stats > div {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.vocabulary-dict-word__stats dt {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.vocabulary-dict-word__stats dd {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.05rem;
  font-weight: 600;
}

.vocabulary-dict-word__empty {
  margin: 0 0 0.5rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.vocabulary-dict-word__posts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.vocabulary-dict-post {
  padding: 0.9rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}

.vocabulary-dict-post__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.vocabulary-dict-post__kind {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-size: 0.75rem;
  white-space: nowrap;
}

/* クイズは解説と役割が違うので枠の色だけ変える (--color-danger は薄背景バッジに使えない) */
.vocabulary-dict-post__kind--quiz {
  border-color: var(--accent);
  color: var(--accent);
}

.vocabulary-dict-post__author,
.vocabulary-dict-post__date {
  color: var(--text-muted);
}

.vocabulary-dict-post__body {
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.7;
}

.vocabulary-dict-post__body p {
  margin: 0 0 0.5rem;
}

.vocabulary-dict-post__question {
  font-weight: 600;
}

.vocabulary-dict-post__answer {
  color: var(--text-secondary);
}

.vocabulary-dict-post__alternatives {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.vocabulary-dict-post__alternatives ul {
  margin: 0;
  padding-left: 1.2rem;
}

/* 単語詳細のカードは抜粋だけを出す (全文・別解・出典は投稿詳細で読む =
   同じ単語に解説・クイズが複数付く前提の階層構造。2026-08-17 ユーザー指摘) */
.vocabulary-dict-post__excerpt {
  margin: 0;
  color: var(--text-primary);
  font-size: 0.9rem;
  line-height: 1.6;
}

.vocabulary-dict-post__citation {
  margin: 0.5rem 0 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.vocabulary-dict-post__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.6rem 0 0;
}

.vocabulary-dict-post__link {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* ── 投稿フォーム (179-10) ─────────────────────────────────────────── */

/* 解説 / クイズの切り替え。JS で欄を出し入れせず、ページごと分ける */
.vocabulary-dict-form__kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.vocabulary-dict-form__kind {
  padding: 0.35rem 0.95rem;
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
}

.vocabulary-dict-form__kind.is-active {
  background: var(--card-actions-bg);
  color: var(--text-primary);
  font-weight: 600;
}

/* Q13: 規約 8 条 + NG14 の 2 条件。禁止の掲示ではなく、投稿前の確認として置く */
.vocabulary-dict-form__policy {
  margin-bottom: 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}

.vocabulary-dict-form__policy-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
}

.vocabulary-dict-form__policy-list {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.7;
}

.vocabulary-dict-form__policy-terms {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
}

.vocabulary-dict-form__alternatives {
  margin: 0.35rem 0 0;
  padding-left: 1.4rem;
}

.vocabulary-dict-form__alternative {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.vocabulary-dict-form__alternative input {
  flex: 1 1 10rem;
}

/* ── 辞書の練習設定 (計画書 179 §6.1、179-11) ───────────────────────────────
   単語帳詳細 (vocabulary-deck-show__settings) / my 面 = 練習帳・自分の単語辞書
   (vocabulary-my__practice-*) と同じ形。辞書だけの違いは
   「出題ボリューム = 時間だけ」という点で、見た目の作りは揃える。 */
/* ⚠️ クラス名を `__practice` にしない。**単語一覧の練習量セル**が既にその名前で
   `white-space: nowrap` を持っており (179-10)、包むと注記が折り返せなくなる */
.vocabulary-dict-show__practice-section {
  margin-bottom: 2.5rem;
}

/* ヒーロー行 (§17.12): 練習の長さ + 開始ボタンを 1 行に。
   この画面の主役はこの行で、見出し文字は置かない (h2 は visually-hidden) */
.vocabulary-dict-show__hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

/* 1 画面 1 主役 (§17.12): アクセントの帯びと大きさで視線を最初にここへ。
   ⚠️ 塗りは薄い tint に留め、文字は text-primary のまま
   (accent 直塗り + 白文字はテーマによって比が確保できない) */
.vocabulary-dict-show__practice-button {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  /* ⚠️ inline-flex の固有幅はサブラベルの 1 行ぶんになる。狭い画面では
     ボタンが viewport をはみ出すので上限を与えて折り返させる (179-10 の表と同根) */
  max-width: 100%;
  text-align: left;
  padding: 0.85rem 1.9rem;
  border: 1px solid var(--accent);
  border-radius: var(--card-radius);
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--text-primary);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
}

.vocabulary-dict-show__practice-button:hover {
  background: rgba(var(--accent-rgb), 0.2);
}

.vocabulary-dict-show__practice-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* 開始ボタンのサブラベル。値の名前ではなく「何が起きるか」を並べる (156) */
.vocabulary-dict-show__practice-summary {
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 400;
  white-space: normal;
}

/* ログインが要る旨・0 語の旨。プレイさせずに理由だけを出す */
.vocabulary-dict-show__practice-note {
  margin: 0.5rem 0 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* 既定の青のままだとテーマから浮く (10 テーマ共通で効くアクセントに寄せる。
   __report__description a と同じ判断) */
.vocabulary-dict-show__practice-note a,
.vocabulary-dict-form__policy-terms a {
  color: var(--accent);
}

.vocabulary-dict-show__practice-settings {
  margin-top: 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  padding: 0.5rem 0.75rem;
}

.vocabulary-dict-show__practice-toggle {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.vocabulary-dict-show__practice-body {
  display: grid;
  gap: 1rem;
  margin-top: 0.75rem;
}

/* 項目名 + ? のツールチップ。選択肢ボタンはこの下の行に横並びで置く。
   ⚠️ fieldset を flex にしても legend は rendered legend として先頭行に出るので、
   ラベルと選択肢を同じ行には並べられない */
/* === 通報ダイアログ (計画書 179 §7、179-12) ===
   制御 JS は単語帳と共通 (content_report_controller)。見た目だけ辞書の面に持つ。
   ⚠️ trigger の面は body (--bg-primary) 側。--bg-secondary の上に --text-muted を
   置くと dark 4 テーマで AA を割る (178 の申し送り) ので、面を変えない */
.vocabulary-dict-report {
  margin: 2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
  text-align: right;
}

/* すでに通報済みのときの注記。ボタンと同じ位置・同じ密度で出す
   (押せるものが消えて何も無くなると、通報の導線ごと消えたように見える) */
.vocabulary-dict-report__done {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.vocabulary-dict-report__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.85rem;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  font-size: 0.85rem;
  cursor: pointer;
}

.vocabulary-dict-report__trigger:hover {
  color: var(--text-secondary);
  background: var(--card-actions-bg);
}

.vocabulary-dict-report__dialog {
  width: min(440px, 92vw);
  padding: 1rem 1.25rem;
  background: var(--card-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
}

.vocabulary-dict-report__dialog::backdrop {
  background: rgba(0, 0, 0, 0.45); /* design-allow: color-literal */
}

.vocabulary-dict-report__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: left;
}

.vocabulary-dict-report__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.vocabulary-dict-report__description {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ⚠️ ダイアログ内のリンク (権利者向けの窓口) は既定の青のままだとテーマから浮く。
   10 テーマで共通に効くアクセント色に寄せる */
.vocabulary-dict-report__description a {
  color: var(--accent);
}

.vocabulary-dict-report__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.vocabulary-dict-report__field select,
.vocabulary-dict-report__field textarea {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  background: var(--input-bg);
  color: var(--text-primary);
  font: inherit;
}

.vocabulary-dict-report__field textarea {
  resize: vertical;
  min-height: 4.5rem;
}

/* 送信結果の行。⚠️ 高さを先に確保して、出た瞬間にレイアウトを動かさない (feedback_cls) */
.vocabulary-dict-report__message {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.vocabulary-dict-report__message[data-type="success"] {
  color: var(--color-success);
}

.vocabulary-dict-report__message[data-type="error"] {
  color: var(--color-error);
}

.vocabulary-dict-report__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.vocabulary-dict-report__cancel,
.vocabulary-dict-report__submit {
  padding: 0.4rem 1rem;
  border-radius: var(--card-radius);
  font-weight: 600;
  cursor: pointer;
  font-size: 0.9rem;
}

.vocabulary-dict-report__cancel {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.vocabulary-dict-report__cancel:hover {
  background: var(--card-actions-bg);
}

.vocabulary-dict-report__submit {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--card-bg);
}

.vocabulary-dict-report__submit:hover {
  filter: brightness(0.95);
}

.vocabulary-dict-report__submit:disabled {
  cursor: not-allowed;
  filter: brightness(0.85);
}