/* 単語帳・単語辞書のカバー (計画書 181 §5.1)。
   公開一覧・詳細・マイデータ・タイムラインと読む面が多いので、
   public_common.css / vocabulary_my.css へ写さず独立した 1 枚にして各面から読む。

   一覧が文字だけにならないよう、すべての単語帳・辞書が 16:9 のカバーを持つ。
   配色は config/vocabulary_covers.yml から inline の CSS 変数 (--vcover-*) で渡る。
   カバーは画像として書き出す OGP と同じ見た目にするためテーマで色を変えない。 */
.vcover {
  /* 既定値。実値は VocabularyCoverHelper が inline style="--vcover-from: ..." で注入する
     (config/vocabulary_covers.yml が正。CSS 側に 12 配色を写さない) */
  --vcover-from: var(--bg-secondary);
  --vcover-to: var(--bg-secondary);
  --vcover-fg: var(--text-primary);
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-image: linear-gradient(135deg, var(--vcover-from), var(--vcover-to));
  /* アイコンの大きさをカバーの高さに追従させるため (下の cqh) */
  container-type: size;
}

.vcover__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vcover__icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vcover-fg);
  /* コンテナクエリ単位が使えない環境向けの既定値。card 相当の大きさに寄せる */
  font-size: 2.75rem;
  /* OGP 画像 (VocabularyCoverEncoder::ICON_RATIO = 0.42) と同じ比率にする */
  font-size: 42cqh;
  line-height: 1;
}

/* dot … 積み上げグラフの丸 (計画書 184 §6.1)。
   ⚠️ **固定 px にしない** (184 確定 7)。柱は repeat(N, 1fr) で等分するので、
   幅を柱に追従させれば狭い画面では丸が自動的に縮んで収まる。
   幅の調整は横スクロールを作らない以上、丸のサイズでしか吸収できない。 */
.vcover--dot {
  width: 100%;
  max-width: var(--vstack-dot-max, 22px);
  /* .vcover の 16/9 を打ち消して正円にする。画像カバーは object-fit: cover
     が効いているので中央を正方形に切り取った絵になる */
  aspect-ratio: 1;
  border-radius: 50%;
  flex-shrink: 0;
}

/* 16:9 のカード用に決めた 42cqh は円の中では小さく見えるので、丸では大きめに取る */
.vcover--dot .vcover__icon {
  font-size: 60cqh;
}

/* 球体に見せる縁の陰影 (2026-08-21 ユーザー要望)。
   ⚠️ **::after で上から重ねる**。.vcover--dot 自身に box-shadow: inset を掛けると
   画像カバー (.vcover__image が 100% を覆う) では陰影が絵の下に隠れて効かない。
   inset の影だけを持つ透明な層なので、アイコンも画像も透けて見える。 */
.vcover--dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: var(--vstack-dot-sphere);
  pointer-events: none;
}

/* BAN・削除で見えなくなった単語帳の丸 (184 §5.2)。
   プレイした事実は消さないが、見えないコンテンツの顔は出さない。
   配色カタログではなくテーマの面の色を使う = 顔として読めない見た目にする */
.vcover--dot.vcover--muted {
  background-image: none;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
}

/* mini … タイトルの横に置く小さな札。密度を落とさずに顔だけ足したい面で使う */
.vcover--mini {
  width: 4rem;
  flex-shrink: 0;
  border-radius: 4px;
}

.vcover--card {
  border-radius: 0;
}

.vcover--hero {
  border-radius: var(--card-radius);
}

/* --------------------------------------------------------------------------
   カバー設定 (計画書 181 §3.1)。単語帳・単語辞書の編集画面で共用する。
   -------------------------------------------------------------------------- */
.vcover-settings__hint,
.vcover-settings__note {
  margin: 0 0 0.75rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.vcover-settings__body {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.vcover-settings__preview {
  flex: 0 0 280px;
  max-width: 100%;
}

.vcover-settings__state {
  margin: 0.5rem 0 0;
  min-height: 1.4em;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.vcover-settings__choices {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.vcover-settings__group {
  margin: 0;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  /* fieldset の既定 min-inline-size で狭い画面が横に伸びるのを止める */
  min-inline-size: 0;
}

.vcover-settings__group-title {
  padding: 0 0.25rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.vcover-settings__icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.vcover-settings__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  /* タッチの当たり判定を 44px 以上に保つ */
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 1.15rem;
  cursor: pointer;
}

.vcover-settings__icon:hover {
  background: var(--hover-bg);
}

.vcover-settings__icon.is-selected {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
}

.vcover-settings__colors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.vcover-settings__color {
  /* 既定値。実値は ERB が inline style="--vcover-from: ..." で注入する */
  --vcover-from: var(--bg-secondary);
  --vcover-to: var(--bg-secondary);
  width: 44px;
  height: 44px;
  border: 2px solid transparent;
  border-radius: 50%;
  background-image: linear-gradient(135deg, var(--vcover-from), var(--vcover-to));
  cursor: pointer;
}

.vcover-settings__color.is-selected {
  border-color: var(--accent);
  outline: 2px solid var(--accent-bg);
}

/* ============================================================
 * 配色だけを選ぶピッカー (練習帳。2026-08-20)
 * アイコンを選ばせない面なので vcover-settings のような 3 入口は持たず、
 * 通常フォームの中に色見本の radio を並べるだけにする。
 * 見た目は vcover-settings__color と揃える (同じ操作を 2 通りに見せない)。
 * ============================================================ */

.vcover-picker {
  border: 0;
  margin: 0;
  padding: 0;
}

.vcover-picker__colors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.vcover-picker__color {
  /* 既定値。実値は ERB が inline style="--vcover-from: ..." で注入する */
  --vcover-from: var(--bg-secondary);
  --vcover-to: var(--bg-secondary);
  width: 44px;
  height: 44px;
  border: 2px solid transparent;
  border-radius: 50%;
  background-image: linear-gradient(135deg, var(--vcover-from), var(--vcover-to));
  cursor: pointer;
}

.vcover-picker__color.is-selected {
  border-color: var(--accent);
  outline: 2px solid var(--accent-bg);
}

/* ランダムな配色に変える操作 (計画書 185)。押した時点で保存されるので
   「保存」で確定する上のフォームとは別の塊にし、今の色を隣に出す */
.vcover-picker__random {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

/* 今の色。カタログ 12 色なら radio でも分かるが、引いた色はどこにも当たらない */
.vcover-picker__current {
  /* 既定値。実値は ERB が inline style="--vcover-from: ..." で注入する */
  --vcover-from: var(--bg-secondary);
  --vcover-to: var(--bg-secondary);
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-image: linear-gradient(135deg, var(--vcover-from), var(--vcover-to));
}

/* radio は visually-hidden なので、キーボード操作の所在はラベル側に出す
   (:focus-visible は隠した input に付くため :has で親へ持ち上げる) */
.vcover-picker__color:has(input:focus-visible) {
  border-color: var(--accent);
  outline: 2px solid var(--accent-bg);
}

/* 選択は JS を使わず :has で反映する (クリックした瞬間に見た目が付く) */
.vcover-picker__color:has(input:checked) {
  border-color: var(--accent);
  outline: 2px solid var(--accent-bg);
}

@media (max-width: 600px) {
  .vcover-settings__preview {
    flex-basis: 100%;
  }
}