/**
 * 合わせ目: リストレイアウト × ダーク配色
 *
 * 読まれるのは 配色 palettes/dark → レイアウト layouts/thumb-list → ここ、の順。
 * 前の2つは触らない（配色はトークンの定義であって、特定レイアウトの
 * 見え方を持つ場所ではない。レイアウトは色を持たない）。
 *
 * ここにあるのは、そのレイアウトをダークで見せたときだけの色である。
 * ライト側が実値を直接書いているのと対称に、こちらは
 * palettes/dark が定義済みのトークンを読んで書く。
 *
 * 詳細度はレイアウトの共有部品と並ぶ。読み込み順で後勝ちする。
 * 書き足すときは必ず .optib-skins-thumb-list-dark の配下に置くこと。
 */

/* ------------------------------------------------------------------
 * 記事一覧（layouts/thumb-list）に乗せる色。
 *
 * レイアウトは色を1つも持たない流儀なので、色は使う側が書く。
 * ライト側の合わせ目 skins/thumb-list-light が明るい前提の実値を書いているのと対称に、
 * こちらは palettes/dark が定義済みのトークンを読んで書く。
 * palettes/dark 自体は触らない（あちらはトークンの定義であって、
 * 特定レイアウトの見え方を持つ場所ではない）。
 *
 * 詳細度は共有部品と並ぶ。読み込み順が palettes/ → layouts/ → skins/ なので後勝ちする。
 * ------------------------------------------------------------------ */

/* (2) ホバー背景 */
.optib-skins-thumb-list-dark .p-post--list:hover {
  background: var(--color-bg-light);
}

/* (14) stretched link のフォーカス強調。(2) と同じ背景。
 * :focus-within ではなく :has(... :focus-visible) を使う理由は
 * skins/thumb-list-light/style.css に書いてある（同じ構造をダーク側にも敷く）。 */
.optib-skins-thumb-list-dark .p-post--list:has(.p-post__title a:focus-visible),
.optib-skins-thumb-list-dark .p-post--list:has(.p-post__more:focus-visible) {
  background: var(--color-bg-light);
}

/* (1) 記事1件の区切り線。
 * 線種を dotted に揃える。書かないと親テーマの solid（component/_p-post.css）が残り、
 * 同じレイアウトなのに配色によって線種が割れる。 */
.optib-skins-thumb-list-dark .p-post--list {
  border-bottom: dotted 1px var(--color-border);
}

/* (5) 日付バッジ。寸法は共有部品側、地と線の色だけここ */
.optib-skins-thumb-list-dark .p-post--list .p-post__meta-item--date {
  border-left: solid 3px var(--color-border);
  background: var(--color-bg-light);
}

/* (6) カテゴリチップ。
 *
 * 標準は「地を本文色・文字を背景色」に反転させてチップを目立たせている（#111 / #fff）。
 * ダークで同じ役割を出す道は2つあった。
 *   A. 反転を保つ: background: var(--color-text) / color: var(--color-bg)
 *   B. 一段持ち上げた面を使う: background: var(--optib-child-dark-surface-raised)
 * A を選んだ。B の #26292d は、ホバー時の地 --color-bg-light (#1f2124) と近く、
 * チップが面として立たない（隣の日付バッジとも同じ地になり区別が消える）。
 * 標準が反転で表しているのは「これはリンクの塊である」という情報そのものなので、
 * 色を暗くしたぶん反転の向きを逆にして、その情報の出方を保つ。 */
.optib-skins-thumb-list-dark .p-post--list .p-post__meta-item--cat a {
  background: var(--color-text);
  color: var(--color-bg);
}

/* 親の .p-post__meta a:hover が明るい地に当たると読めなくなるので打ち消す。
 * 標準の #111 → #444（中間グレーへ寄せる）と向きを揃え、こちらは #e3e3e3 → #9aa0a6 に落とす。 */
.optib-skins-thumb-list-dark .p-post--list .p-post__meta-item--cat a:hover {
  background: var(--color-text-muted);
  color: var(--color-bg);
}

/* (7) 著者リンク。
 * 共有部品が border-bottom: 0 で親テーマの点線下線を解いている。
 * 標準では周囲の実値と地で読めるが、ダークでは地も線も無い裸の文字になり、
 * リンクだという手掛かりが消える。トークンの色で点線を戻す。 */
.optib-skins-thumb-list-dark .p-post--list .p-post__meta-item--author a {
  border-bottom: 1px dotted var(--color-border);
}