/* ------------------------------------------------------------------
   鳩の首ドットネット — 投稿の公開範囲を背景色で示す
   VPS の nginx が全ページに配信する。既定は無効。
   html[data-hk-vistint="on"] が付いたときだけ効く(切替は vistint.js)。

   掴んでいる手掛かりは2つだけ:
     - <article>  … 投稿のコンテナ(実タグ)
     - <header>   … 投稿ヘッダ(実タグ)
     - .ti-home / .ti-lock / .ti-mail … Tabler のアイコンクラス(グローバル)
   ほかのクラス名はビルドごとのハッシュ($style.*)なので使えない。

   DOM の形は2通りある:
     MkNote         (タイムライン)   article > div.main > header
     MkNoteDetailed (単体ページ)     article > header
   公開(public)はアイコンが出ないので、色も付かない。これは意図どおり。
   ------------------------------------------------------------------ */

/* ホーム — 緑(テーマの link/renote と同じ緑を使う)
   同じ明度の紫より緑は淡く見えるので、10% に揃えず気持ち濃くしてある。 */
html[data-hk-vistint="on"] article:has(> header .ti-home),
html[data-hk-vistint="on"] article:has(> * > header .ti-home) {
	background: color-mix(in srgb, rgb(51, 125, 55) 11%, var(--MI_THEME-panel));
}

/* フォロワー — 琥珀 */
html[data-hk-vistint="on"] article:has(> header .ti-lock),
html[data-hk-vistint="on"] article:has(> * > header .ti-lock) {
	background: color-mix(in srgb, rgb(176, 104, 20) 10%, var(--MI_THEME-panel));
}

/* ダイレクト — 臙脂 */
html[data-hk-vistint="on"] article:has(> header .ti-mail),
html[data-hk-vistint="on"] article:has(> * > header .ti-mail) {
	background: color-mix(in srgb, rgb(174, 55, 70) 10%, var(--MI_THEME-panel));
}

/* アイコン自体にも色を乗せる。ヘッダ配下に限定しないと
   ナビの ti-home まで緑や琥珀になる。 */
html[data-hk-vistint="on"] header .ti-home { color: rgb(51, 125, 55); }
html[data-hk-vistint="on"] header .ti-lock { color: rgb(176, 104, 20); }
html[data-hk-vistint="on"] header .ti-mail { color: rgb(174, 55, 70); }

/* color-mix / :has() が無いブラウザでは何も起きない(素の表示に戻るだけ)。
   壊れても実害が無いことを前提に組んである。 */