/* =================================================================
 * cv-article-embed.css — 記事本文に埋め込む .cvo-doc ブロックのダークテーマ
 *
 * 対象: 投稿本文に直接貼り込む「自己完結ドキュメント」ブロック（.cvo-doc）。
 *   例: /2026/08/02/macmino-001/（自宅の Mac mini に外から入って AI を動かす）
 *   .cvo-doc は記事内 <style> に色を全部持つ紙面デザイン（白地＋濃いインク）で、
 *   テーマの light/dark とは独立している。
 *
 * 本ファイルがやること（2つ）:
 *   (A) ダークテーマ（<html data-theme="spnc_dark">）で .cvo-doc を暗い紙面にする。
 *       記事側は「▼ ここだけ書き換えれば見た目を合わせられる ▼」として色を 8 つの
 *       変数に出しているので、まずそれを上書きし、変数化されていない直値だけを個別に追う。
 *   (B) 親テーマ Newscrunch の dark.css が素の要素セレクタ（p / h1〜h6 / tbody tr /
 *       table / th / td）で当ててくるダーク色を、.cvo-doc 配下では自前の値に置き換える。
 *
 * 配色は _tokens.css の dark（--cv-bg / --cv-surface / --cv-text / --cv-border /
 * --cv-hero-*）と同じ値に揃え、サイト全体のダークと地続きにする。
 *
 * 読み込み順の前提:
 *   子テーマ CSS は <head> で親の dark.css より前に出るため、打ち消しには
 *   dark.css より高い詳細度が要る（!important は §4 の inline style 1 箇所を除き
 *   使わない）。h3 だけは
 *   dark.css 側が .spnc-entry-content 付きなので、同じ前置きを噛ませて上回る。
 *   ガードは _tokens.css と同じ 2 系統併記（dark = 検証ハーネス / spnc_dark = live）。
 *
 * 図版（.cvo-svgbox）だけは明るいままにしてある。理由は §6 を参照。
 * ================================================================= */

/* =============================================================
 * §1 パレット — 記事側の 8 変数をダーク値に差し替える
 *   これだけで .cvo-doc / .cvo-card / 罫線 / アクセント / 見出しの大半が反転する。
 *   アクセント3色は暗い地に載せるため明度を上げた変種（元: 緑 #1F6F5C /
 *   青 #3E5BA9 / 赤 #A33B4B。そのままだとカード地 #1A1D24 上で 2〜3:1 しか出ない）。
 * ============================================================= */
[data-theme="dark"] .cvo-doc,
[data-theme="spnc_dark"] .cvo-doc {
  --cvo-bg: #0F1115;      /* = --cv-bg      ページの地色 */
  --cvo-card: #1A1D24;    /* = --cv-surface カードの地色 */
  --cvo-ink: #E5E7EB;     /* = --cv-text    見出し・強い文字 */
  --cvo-ink-soft: #9CA3AF;/* = --cv-text-muted 補足の文字 */
  --cvo-line: #2A2F38;    /* = --cv-border  罫線 */
  --cvo-accent: #5FBFA0;  /* 手元のマシン（緑） */
  --cvo-accent2: #8CA8F0; /* ベンダーのクラウド（青） */
  --cvo-warn: #F0909F;    /* 注意（赤） */

  /* 本ファイル内でだけ使う補助色（記事側が直値で持っている箇所の受け皿） */
  --cvo-panel: #22262F;   /* カードの中の一段沈んだ面（lead / 回答 / code / 見出し列） */
  --cvo-hairline: #262B33;/* カード内の細い仕切り（記事側 #EFF1EC 相当） */
  --cvo-body: #C9CED8;    /* 本文。見出しより一段落ち着かせる */
}

/* =============================================================
 * §2 カード内の直値（記事側で変数化されていない箇所）
 * ============================================================= */

/* 仕切り線 3 種（記事側 #EFF1EC） */
[data-theme="dark"] .cvo-doc .cvo-toc li,
[data-theme="dark"] .cvo-doc .cvo-card-head,
[data-theme="spnc_dark"] .cvo-doc .cvo-toc li,
[data-theme="spnc_dark"] .cvo-doc .cvo-card-head {
  border-bottom-color: var(--cvo-hairline);
}
[data-theme="dark"] .cvo-doc .cvo-card-foot,
[data-theme="spnc_dark"] .cvo-doc .cvo-card-foot {
  border-top-color: var(--cvo-hairline);
  background: #1E222A; /* 記事側 #FAFBF9（カードよりわずかに沈む面） */
}
[data-theme="dark"] .cvo-doc dl.cvo-glossary dt,
[data-theme="spnc_dark"] .cvo-doc dl.cvo-glossary dt {
  border-bottom-color: var(--cvo-hairline);
}

/* 沈んだ面 3 種（記事側 #F4F6F2 / #F1F3EE / #EDEFEA） */
[data-theme="dark"] .cvo-doc .cvo-lead,
[data-theme="spnc_dark"] .cvo-doc .cvo-lead {
  background: var(--cvo-panel);
}
[data-theme="dark"] .cvo-doc ol.cvo-flow .cvo-ans,
[data-theme="spnc_dark"] .cvo-doc ol.cvo-flow .cvo-ans {
  background: var(--cvo-panel);
}
[data-theme="dark"] .cvo-doc code,
[data-theme="spnc_dark"] .cvo-doc code {
  background: var(--cvo-panel);
  color: var(--cvo-ink);
}

/* 章番号バッジ: 地が明るい緑になるので文字を暗くする（記事側は #fff） */
[data-theme="dark"] .cvo-doc .cvo-no,
[data-theme="spnc_dark"] .cvo-doc .cvo-no {
  color: #0F1115;
}

/* 進捗ドットの消灯色（記事側 #DDE0DA） */
[data-theme="dark"] .cvo-doc .cvo-dots i,
[data-theme="spnc_dark"] .cvo-doc .cvo-dots i {
  background: #333941;
}

/* 注意パネル / たとえ話パネル（記事側 #F8EEF0 / #FBFCFA） */
[data-theme="dark"] .cvo-doc .cvo-note,
[data-theme="spnc_dark"] .cvo-doc .cvo-note {
  background: #2B1B20;
}
[data-theme="dark"] .cvo-doc .cvo-analogy,
[data-theme="spnc_dark"] .cvo-doc .cvo-analogy {
  background: #1E222A;
}

/* インラインタグ（記事側 #E8F1ED / #E9ECF7 の淡い地） */
[data-theme="dark"] .cvo-doc .cvo-tag.local,
[data-theme="spnc_dark"] .cvo-doc .cvo-tag.local {
  background: #14312A;
  color: #6FCBAC;
}
[data-theme="dark"] .cvo-doc .cvo-tag.cloud,
[data-theme="spnc_dark"] .cvo-doc .cvo-tag.cloud {
  background: #1A2140;
  color: #9DB4F5;
}

/* =============================================================
 * §3 表紙
 *   記事側は background: var(--cvo-ink) ＝「本文色を地にする」反転デザイン。
 *   §1 で --cvo-ink を明るくしたため、そのままだと白地に白文字になる。
 *   ダークでは _tokens.css の hero 値（#15182A）を地にする。
 * ============================================================= */
[data-theme="dark"] .cvo-doc .cvo-cover,
[data-theme="spnc_dark"] .cvo-doc .cvo-cover {
  background: #15182A; /* = --cv-hero-from */
  border: 1px solid var(--cvo-line);
}

/* =============================================================
 * §4 表 — 親テーマ dark.css の打ち消し
 *   dark.css:317 tbody tr:nth-child(2n+1){background-color:#000}
 *   dark.css:318 table,th,td{border:1px solid rgba(255,255,255,.3)}
 *   dark.css:315 thead th{color:#fff}
 *   #000 の縞は暗い紙面（#1A1D24）の上でも段差が強すぎるので、控えめな縞に置き換える。
 *   白 30% の格子線も明るすぎるため、紙面の罫線色に揃える。
 * ============================================================= */
[data-theme="dark"] .cvo-doc tbody tr:nth-child(2n+1),
[data-theme="spnc_dark"] .cvo-doc tbody tr:nth-child(2n+1) {
  background-color: #1E222A;
}
[data-theme="dark"] .cvo-doc thead th,
[data-theme="spnc_dark"] .cvo-doc thead th {
  color: var(--cvo-ink-soft);
}
[data-theme="dark"] .cvo-doc table,
[data-theme="spnc_dark"] .cvo-doc table {
  border-color: var(--cvo-line);
}
/* 下罫線は記事側の指定（--cvo-line / thead は --cvo-ink）を活かすため longhand で避ける */
[data-theme="dark"] .cvo-doc th,
[data-theme="dark"] .cvo-doc td,
[data-theme="spnc_dark"] .cvo-doc th,
[data-theme="spnc_dark"] .cvo-doc td {
  border-top-color: var(--cvo-line);
  border-right-color: var(--cvo-line);
  border-left-color: var(--cvo-line);
}
/* 見出し列（記事側 #F5F6F2）。縞と重なるので縞よりわずかに持ち上げる */
[data-theme="dark"] .cvo-doc tbody th,
[data-theme="spnc_dark"] .cvo-doc tbody th {
  background: #242932;
}

/* 記事本文に 1 箇所だけ、セルの地色が inline style で直書きされている:
 *   <td colspan="2" style="background:#F8EEF0">どちらも接続が切れる。…</td>
 * inline style は詳細度では抜けないため、本ファイルで唯一 !important を使う。
 * 放置すると明るいピンク地に明るい文字（1.09:1）になり、その 1 セルだけ読めない。
 * 記事側の inline style を消せればこの規則も不要になる（本文修正は別件）。 */
[data-theme="dark"] .cvo-doc td[style*="F8EEF0"],
[data-theme="spnc_dark"] .cvo-doc td[style*="F8EEF0"] {
  background: #2B1B20 !important; /* .cvo-note と同じ地色 */
}

/* =============================================================
 * §5 見出しと本文 — 親テーマ dark.css の打ち消し
 *   dark.css:3   .spnc-entry-content h1〜h6{color:#fff}
 *                → 白すぎる（紙面の見出しは --cvo-ink に揃える）。
 *                  .cvo-doc h3 では同着で dark.css が勝つため .spnc-entry-content を噛ませる。
 *                  h1/h2 は記事側が .cvo-cover / .cvo-toc / .cvo-card-head / .cvo-colophon
 *                  付きのより強いセレクタで指定しており、§1 の変数差し替えで追従する。
 *   dark.css:2   p{color:#CACBD2}
 *                → 対象は「クラスを持たない素の p」だけに絞る。
 *                  .cvo-lead / .cvo-eyebrow / .cvo-stamp は記事側が色を持ち、
 *                  .cvo-cover 直下の素の p は表紙用の色（#D6DCD7）が正しいため除外する。
 * ============================================================= */
[data-theme="dark"] .spnc-entry-content .cvo-doc h3,
[data-theme="spnc_dark"] .spnc-entry-content .cvo-doc h3 {
  color: var(--cvo-ink);
}
[data-theme="dark"] .cvo-doc :not(.cvo-cover) > p:not([class]),
[data-theme="spnc_dark"] .cvo-doc :not(.cvo-cover) > p:not([class]) {
  color: var(--cvo-body);
}

/* =============================================================
 * §6 図版だけは明るいまま残す（意図的）
 *   .cvo-svgbox の中の SVG は背景を持たず、ノードの箱が #fff・文字が #1F252C・
 *   罫線が #DDE0DA という「明るい紙の上に描く」前提で、色は CSS ではなく
 *   fill / stroke 属性に直書きされている（5枚・約20色）。
 *   地だけ暗くすると canvas に直接置かれた文字が黒地に黒文字になるため、
 *   図版は「暗い紙面に貼った明るい図版プレート」として扱う。
 *   そのうえで、白飛びを抑えるためプレートごとわずかに輝度を落とす
 *   （brightness は全チャンネルを一様に下げるだけなので、図版内部の
 *     コントラスト関係は崩れない）。
 *   SVG 側を暗色化したい場合は記事本文の SVG を描き直す必要があり、別件。
 * ============================================================= */
[data-theme="dark"] .cvo-doc .cvo-svgbox,
[data-theme="spnc_dark"] .cvo-doc .cvo-svgbox {
  background: #EDEFEA;
  border-color: var(--cvo-line);
  filter: brightness(0.92);
}
