/* =========================================================
   code_block.css  ── コードブロック・シンタックスハイライト・インライン UI

   【このファイルの責務】
   - .sa-pre（コードブロック外枠・ヘッダー・本文）
   - .sa-pre__body 内のシンタックスカラークラス（.ck .kk .ss .fn .sc .hl .hl2 .hl3 .hi .cm）
   - .sa-tree（ファイルツリー表示）
   - .sa-cmd（ターミナルコマンド表示）
   - .sa-inline-cmd（インラインコードバッジ）
   - .sa-point（インラインポイントバッジ）
   - .sa-checklist（チェックリスト）
   - .sa-file-tab（コードブロック上のファイルタブ）
   - .sa-error-list / .sa-error-item（エラーアコーディオンリスト）
   - .sa-func-list / .sa-func（関数リファレンス）
   - .sa-divider（区切り線）
   - .sa-next-banner（次章へのバナー）

   【触るべきとき】
   ・コードブロックの背景色を変えたい    → tokens.css の --code-bg / --code-bg-2
   ・シンタックスカラーを変えたい        → tokens.css の --code-kw / --code-str / --code-fn 等
   ・ファイルツリーのフォントを変えたい  → .sa-tree の font-family / font-size
   ・エラーアコーディオンの色を変えたい  → .sa-error-item__trigger の background

   【スコープ】
   すべて .entry-content .sa-page 配下に限定。
   グローバルな code / pre スタイルは base.css / article_body.css を参照。

   【関連ファイル】
   - コードトークン変数  → tokens.css（--code-bg / --code-ink / --code-kw 等）
   - 記事本文            → article_body.css
   - 記事内図解          → article_diagrams.css
   - Sphinxページ全体   → sphinx_article.css
========================================================= */

/* =========================================================
   コードブロック（.sa-pre）
========================================================= */
.entry-content .sa-page .sa-pre {
  margin: 20px 0;
  border-radius: var(--r-lg);
  background: var(--code-bg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.04);
}

/* ヘッダーバー（macOS風ドット＋言語名） */
.entry-content .sa-page .sa-pre__header {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--code-bg-2);
  border-bottom: 1px solid var(--code-rule);
}

.entry-content .sa-page .sa-pre__dots {
  display: flex !important;
  gap: 6px;
}

.entry-content .sa-page .sa-pre__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.entry-content .sa-page .sa-pre__dot--r { background: #ff5f57; }
.entry-content .sa-page .sa-pre__dot--y { background: #ffbd2e; }
.entry-content .sa-page .sa-pre__dot--g { background: #28ca41; }

.entry-content .sa-page .sa-pre__lang {
  flex: 1;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--code-cm);
  letter-spacing: .06em;
}

/* コード本文エリア */
.entry-content .sa-page .sa-pre__body {
  padding: 18px 20px;
  overflow-x: auto;
}

.entry-content .sa-page .sa-pre__body pre {
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--code-ink);
  white-space: pre;
  margin: 0;
  tab-size: 2;
}

/* =========================================================
   シンタックスハイライト（トークンカラー）
   ── 変数は tokens.css の --code-* で管理
========================================================= */
.entry-content .sa-page .ck { color: var(--code-cm); font-style: italic; }  /* コメント */
.entry-content .sa-page .kk { color: var(--code-kw); }                      /* キーワード */
.entry-content .sa-page .ss { color: var(--code-str); }                     /* 文字列 */
.entry-content .sa-page .fn { color: var(--code-fn); }                      /* 関数名 */
.entry-content .sa-page .sc { color: var(--code-sc); }                      /* 特殊記号 */

/* 行ハイライト（左ボーダー付き全幅） */
.entry-content .sa-page .hl {
  background: var(--code-hl);
  display: inline-block !important;
  width: 100%;
  border-left: 2px solid var(--code-kw);
  margin-left: -2px;
  padding-left: 2px;
}
.entry-content .sa-page .hl2 {
  background: var(--code-hl2);
  display: inline-block !important;
  width: 100%;
  border-left: 2px solid var(--code-sc);
  margin-left: -2px;
  padding-left: 2px;
}
.entry-content .sa-page .hl3 {
  background: var(--code-hl3);
  display: inline-block !important;
  width: 100%;
  border-left: 2px solid var(--code-fn);
  margin-left: -2px;
  padding-left: 2px;
}

/* コード本文内のインラインカラー */
.entry-content .sa-page .sa-pre__body .hi { color: var(--code-fn); font-weight: 500; }
.entry-content .sa-page .sa-pre__body .cm { color: var(--code-cm); font-style: italic; }

/* =========================================================
   ファイルツリー（.sa-tree）
========================================================= */
.entry-content .sa-page .sa-tree {
  margin: 20px 0;
  padding: 18px 20px;
  background: var(--code-bg);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 2.2;
  color: var(--code-ink);
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,.04);
}

/* ファイル種別カラー */
.entry-content .sa-page .sa-tree__dir  { color: var(--code-fn); font-weight: 600; }
.entry-content .sa-page .sa-tree__py   { color: var(--code-kw); }
.entry-content .sa-page .sa-tree__rst  { color: var(--code-sc); }
.entry-content .sa-page .sa-tree__html { color: #a8e0c8; }
.entry-content .sa-page .sa-tree__cfg  { color: var(--code-str); }
.entry-content .sa-page .sa-tree__cm   { color: var(--code-cm); font-style: italic; }
.entry-content .sa-page .sa-tree__hl   {
  color: var(--code-kw);
  font-weight: 700;
  background: var(--code-hl);
  padding: 0 3px;
  border-radius: 3px;
}

/* インデントレベル */
.entry-content .sa-page .sa-tree__in  { display: block !important; padding-left: 20px; }
.entry-content .sa-page .sa-tree__in2 { display: block !important; padding-left: 40px; }
.entry-content .sa-page .sa-tree__in3 { display: block !important; padding-left: 60px; }

/* =========================================================
   ファイルタブ（.sa-file-tab）
   ── コードブロック上部に付くタブUI
========================================================= */
.entry-content .sa-page .sa-file-tab {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: var(--code-bg-2);
  border: 1px solid var(--code-rule);
  border-bottom: none;
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--code-cm);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  margin-bottom: -1px;
}

/* タブ直後のコードブロックは左上角丸をなくして連結感を出す */
.entry-content .sa-page .sa-file-tab + .sa-pre {
  border-top-left-radius: 0;
}

/* =========================================================
   ターミナルコマンド（.sa-cmd / .sa-inline-cmd）
========================================================= */
.entry-content .sa-page .sa-cmd {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  background: var(--code-bg);
  border-radius: var(--r);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--code-kw);
  margin: 10px 0;
  box-shadow: var(--sh-xs);
}

/* 先頭の $ プロンプト */
.entry-content .sa-page .sa-cmd::before {
  content: "$";
  color: var(--code-cm);
  font-size: 13px;
  flex-shrink: 0;
}

/* インラインコードバッジ */
.entry-content .sa-page .sa-inline-cmd {
  font-family: var(--font-mono);
  font-size: .9em;
  background: var(--code-bg);
  color: var(--code-kw);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--code-rule);
}

/* =========================================================
   インラインポイントバッジ（.sa-point）
========================================================= */
.entry-content .sa-page .sa-point {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 6px;
  background: rgba(139,94,60,.10);
  border: 1px solid rgba(139,94,60,.22);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  color: var(--warm);
  margin-right: 4px;
}

/* アクセントカラー参照 */
.entry-content .sa-page .p {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: .9em;
  font-weight: 600;
}

/* =========================================================
   チェックリスト（.sa-checklist）
========================================================= */
.entry-content .sa-page .sa-checklist {
  list-style: none;
  padding: 0;
  margin: 14px 0;
}

.entry-content .sa-page .sa-checklist li {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.75;
}

.entry-content .sa-page .sa-checklist li:last-child { border-bottom: none; }

.entry-content .sa-page .sa-checklist li::before {
  content: "□";
  font-size: 14px;
  color: var(--ink-4);
  flex-shrink: 0;
  margin-top: 1px;
  font-family: var(--font-mono);
}

/* =========================================================
   区切り線（.sa-divider）
========================================================= */
.entry-content .sa-page .sa-divider {
  border: none;
  border-top: 1.5px dashed var(--rule-2);
  margin: 3.5em 0;
}

/* =========================================================
   次章バナー（.sa-next-banner）
========================================================= */
.entry-content .sa-page .sa-next-banner {
  display: flex !important;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 1.5px solid rgba(30,92,58,.22);
  border-radius: var(--r-lg);
  background: var(--accent-pale);
  margin: 28px 0;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.7;
}

.entry-content .sa-page .sa-next-banner__icon { font-size: 24px; flex-shrink: 0; }
.entry-content .sa-page .sa-next-banner a     { color: var(--accent); font-weight: 700; }

/* =========================================================
   エラーアコーディオンリスト（.sa-error-list / .sa-error-item）
========================================================= */
.entry-content .sa-page .sa-error-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.entry-content .sa-page .sa-error-item {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 12px;
  background: var(--surface);
  box-shadow: var(--sh-xs);
}

.entry-content .sa-page .sa-error-item__trigger {
  /* ★ summary に display:flex/grid を当てると Safari/WebKit で
     ネイティブ開閉トグルが壊れる。block にして全ブラウザで動作させる。
     アイコン併記が必要なら summary 内に <span> を入れてそちらを flex 化する。 */
  display: block;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  position: relative;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--warm);
  background: var(--warm-light);
  border-bottom: 1px solid rgba(139,94,60,.12);
  user-select: none;
}

/* ブラウザデフォルトのマーカー非表示 */
.entry-content .sa-page .sa-error-item__trigger::marker,
.entry-content .sa-page .sa-error-item__trigger::-webkit-details-marker {
  display: none !important;
}

/* 独自の開閉インジケータ (▸ → 開いたら回転) */
.entry-content .sa-page .sa-error-item__trigger::after {
  content: "▸";
  position: absolute;
  right: 16px;
  top: 12px;
  color: var(--accent);
  transition: transform .18s ease;
}
.entry-content .sa-page .sa-error-item[open] .sa-error-item__trigger::after {
  transform: rotate(90deg);
}

.entry-content .sa-page .sa-error-item__body { padding: 14px 16px; }

.entry-content .sa-page .sa-error-item__body p {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.85;
  margin-bottom: .5em;
}

.entry-content .sa-page .sa-error-item__body p:last-child { margin-bottom: 0; }

/* =========================================================
   関数リファレンス（.sa-func-list / .sa-func）
========================================================= */
.entry-content .sa-page .sa-func-list {
  display: flex !important;
  flex-direction: column;
  gap: 14px;
  margin: 18px 0;
}

.entry-content .sa-page .sa-func {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--sh-xs);
}

/* シグネチャ行（黄色みがかった背景でコードらしさを演出） */
.entry-content .sa-page .sa-func__sig {
  background: #f8f2c8;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 13px;
  display: flex !important;
  align-items: baseline;
  gap: 0;
  flex-wrap: wrap;
}

.entry-content .sa-page .sa-func__name { color: var(--accent); font-weight: 700; }
.entry-content .sa-page .sa-func__args { color: var(--ink-3); }
.entry-content .sa-page .sa-func__ret  { color: #7a4090; font-size: 12px; margin-left: 4px; }

.entry-content .sa-page .sa-func__body { padding: 13px 16px; }

.entry-content .sa-page .sa-func__desc {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.85;
  margin-bottom: 0;
}

/* =========================================================
   SP（680px以下）
========================================================= */
@media (max-width: 680px) {
  .entry-content .sa-page .sa-pre__body pre { font-size: 12px; }
}