/* 数理組調査室 — 共通スタイル
 *
 * 方針:
 *  - 無彩色のグレーを地に、本文を白いカードとして置く ＋ 青アクセント。
 *    長い文章を読ませる調査サイト向け（2026-09-03 にクリーム基調から差し替え）。
 *  - インラインの <style> や style="" は使わない（CSP が style-src 'self' のため）。
 *  - 外部フォント・外部 CSS を読み込まない。端末にあるフォントだけを使う。
 *  - 色は変数にまとめる。個別の要素に直接色を書かない。
 */

:root {
  /* 無彩色のグレーを「地」にして、本文は白いカードとして浮かせる。
     クリームの地は、青のアクセントとも統制区分の3色（琥珀・青・緑）とも
     相性が悪く、色が濁って見えた（2026-09-03 に差し替え）。
     グレーなら地が色を主張しないので、意味を持たせた色だけが立つ。
     地とカードの明度差は 1.19。面の違いは分かるが、白が眩しくならない範囲。 */
  --bg:          #ebebeb;  /* 地。ページ全体の背景 */
  --bg-raised:   #ffffff;  /* カード。本文・ヘッダ・ナビ */
  --bg-sunken:   #f4f4f4;  /* 沈んだ面。表の見出し、囲みの内側 */
  --text:        #1f1f1f;  /* 本文 */
  --text-muted:  #565656;  /* 補足。白地で 7.34、地の上で 6.16。
                              小さい文字で使うので、薄くしすぎない */
  --accent:      #145c9e;  /* 青（見出し・リンク） */
  --accent-weak: #e7f0f8;  /* 青の薄い面 */
  --border:      #767676;  /* 罫線。区切りは「構造を伝える図形」なので背景に対して 3.0 以上必要
                              （WCAG 1.4.11）。表の行や一覧の区切りに使う。 */
  --border-soft: #e2e2e2;  /* 弱い罫線。ナビの上下など、構造ではなく仕切りに使う */
  --measure:     42rem;    /* 本文の最大幅。全角で約 39 字/行（日本語の推奨 35〜45 字の範囲） */
  --small:       0.95rem;  /* 小さめの文字はこの1種類に揃える。日本語は英字より画数が多く、
                              13〜14px だと「非公式」「調査室」のような字が潰れる */
}

*, *::before, *::after { box-sizing: border-box; }

html {
  /* 端末の文字サイズ設定を尊重する。px 固定にしない */
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  /* 本文が短いページでも、カードの下に地が見えるようにする */
  min-height: 100vh;
  color: var(--text);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  font-size: 1rem;
  line-height: 1.85;
  /* 日本語の行末をきれいに折る */
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
}

/* ── 骨組み ────────────────────────────────────────────── */

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* 一番上に細い帯を置く。サイトの識別になり、白い紙が上端で切れずに済む */
.site-header {
  border-top: 4px solid var(--accent);
  background: var(--bg-raised);
  padding: 1.6rem 0 1.3rem;
}

.site-title {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.site-title a {
  color: inherit;
  text-decoration: none;
}
.site-title a:hover, .site-title a:focus-visible { text-decoration: underline; }

.site-tagline {
  margin: 0.35rem 0 0;
  font-size: var(--small);
  color: var(--text-muted);
}

/* 「非公式」を全ページ共通のヘッダーに出す。記事が増えても貼り忘れが起きない */
.site-tagline .unofficial {
  display: inline-block;
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 0 0.4em;
  margin-right: 0.5em;
  color: var(--accent);
  font-weight: 700;
}

/* ── ナビゲーション ────────────────────────────────────── */
/* 罫線で区切らず余白で分ける。項目数が増えるので、折り返して並ぶ形にする */

/* スクロールしても常に見えるようにする。<header> の外に置いてあるので、
   ページ全体に対して貼り付く（header の中だと header が流れた時点で外れる）。 */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-raised);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 0.55rem 0;
  /* 貼り付いたときに、下の内容との境目が分かるようにする */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
}

/* 画面が狭いと 9 項目が3〜4行に折り返し、貼り付いたまま画面の大半を占める。
   狭いときは折り返さず横スクロールにして、常に1行に収める。 */
@media (max-width: 44rem) {
  .site-nav .wrap {
    overflow-x: auto;
    /* 端が切れていることが分かるよう、左右に少し余白を残す */
    scroll-padding: 0 1.25rem;
  }
  .site-nav ul { flex-wrap: nowrap; }
  .site-nav li { flex: 0 0 auto; }
}

/* 貼り付いたナビの下に見出しが隠れないようにする。
   #F-000001 のような ID へ飛んだときに、対象がナビの裏に入らない。 */
:target { scroll-margin-top: 4.5rem; }

.site-nav li { margin: 0; }

.site-nav a {
  font-size: var(--small);
  text-decoration: none;
  /* 触りやすさのため、行の高さを確保する */
  display: inline-block;
  padding: 0.15rem 0;
}

.site-nav a:hover, .site-nav a:focus-visible { text-decoration: underline; }

/* 今いるページ。色だけに頼らず、下線と太字でも示す */
.site-nav a[aria-current="page"] {
  color: var(--text);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

main { padding: 2.25rem 0 3rem; }

/* 本文の紙。1行の文字数（--measure）は変えたくないので、
   カードの幅は「本文の幅 + 左右の余白」にしておく。 */
main > .wrap {
  max-width: calc(var(--measure) + 4.5rem);
  background: var(--bg-raised);
  border-radius: 14px;
  padding: 2.25rem 2.25rem 2.75rem;
  /* 枠線を引かず、面の差と影だけで浮かせる。線を引くと囲みが二重になって重く見える。
     影は 2 枚（近い影で縁を締め、遠い影で浮かせる）。 */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* 画面が狭いときは、角丸と横の余白を削って読める幅を優先する */
@media (max-width: 34rem) {
  main { padding: 1.25rem 0 2rem; }
  main > .wrap {
    border-radius: 0;
    padding: 1.5rem 1.15rem 1.9rem;
  }
}

.site-footer {
  background: transparent;
  padding: 0.5rem 0 2.5rem;
  font-size: var(--small);
  color: var(--text-muted);
}

.site-footer p { margin: 0 0 0.5rem; }
.site-footer p:last-child { margin-bottom: 0; }

/* ── 文章 ──────────────────────────────────────────────── */

/* 見出しは大きさだけでなく、扱いを変えて階層を出す。
   同じ青・似た大きさで並ぶと、どこが節の切れ目か分からず単調になる。 */
h1, h2, h3 {
  line-height: 1.45;
  color: var(--accent);
}

h1 {
  font-size: 1.75rem;
  margin: 0 0 1rem;
  letter-spacing: 0.01em;
}

/* h2 は節の切れ目。上に大きく空けて、下に細い罫線を引く */
h2 {
  font-size: 1.3rem;
  margin: 2.75rem 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--accent-weak);
}

/* h3 は節の中の小見出し。青にせず本文色にして、h2 と混ざらないようにする */
h3 {
  font-size: 1.05rem;
  color: var(--text);
  margin: 1.9rem 0 0.6rem;
}

/* h4 は節の中の個々の出来事（/about の年表など）。
   h3 と大きさで差を付けようとすると、どちらも小さくなって階層が潰れる。
   本文と同じ大きさのまま、左の縦線で「ここから新しい塊」を示す。 */
h4 {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  margin: 1.7rem 0 0.5rem;
  padding-left: 0.65rem;
  /* 線は灰にする。青は summary の開閉の印が使うので、h4 が節（h3）より目立たないようにする
     （2026-09-04 の査読で「h4 が h3 より目立ち階層が逆転して見える」と指摘された） */
  border-left: 2px solid var(--border);
}

/* 囲みの中の見出しは、外の見出しの装飾を引き継がない */
.control-def h2, .control-def h3,
.notice h2, .notice h3,
.legend h2, .legend h3 { border-bottom: none; padding-bottom: 0; margin-top: 0; }

p { margin: 0 0 1.1rem; }

/* リンク色 #145c9e と本文色 #1f1f1f の差は 2.40 しかないので、下線を消すと色だけが
   手がかりになってしまう（WCAG 1.4.1 の目安は 3.0）。消さずに太くする方向にする。
   日本語は下線が「ゆ」「調」の下部と重なるので、少し離す。 */
a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover, a:focus-visible { text-decoration-thickness: 2px; }

ul { margin: 0 0 1.1rem; padding-left: 1.4rem; }
li { margin-bottom: 0.4rem; }

/* ── 免責（このサイトは公式ではない） ──────────────────── */
/* 誤認されると実害があるので、最初に目に入る位置で、他と明確に違う見た目にする */

.disclaimer {
  border: 2px solid var(--accent);
  border-radius: 6px;
  background: var(--accent-weak);
  padding: 1rem 1.15rem;
  margin: 0 0 2rem;
}

.disclaimer-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
}

.disclaimer p {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
}
.disclaimer p:last-child { margin-bottom: 0; }

/* ── 準備中の印 ────────────────────────────────────────── */

.status {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg-sunken);
  padding: 0.2em 0.7em;
  margin: 0 0 1.1rem;
  font-size: var(--small);
  color: var(--text-muted);
}

/* ── 一覧（トップの案内） ──────────────────────────────── */
/* 「名前 + その説明」の対なので dl / dt / dd で書く。
   ul + <b> + <span> だと、太字と改行という見た目だけで対を表すことになり、
   支援技術には2つが無関係な文として伝わる。
   （list-style: none の ul は Safari / iOS の VoiceOver でリストとして扱われなくなる問題もある） */

.plan {
  margin: 0 0 1.5rem;
  border-top: 1px solid var(--border);
}

.plan dt {
  margin: 0;
  padding: 0.85rem 0 0;
  color: var(--text);
  font-weight: 700;
}

.plan dt a { text-decoration-thickness: 2px; }

.plan dd {
  margin: 0;
  padding: 0 0 0.85rem;
  border-bottom: 1px solid var(--border);
  font-size: var(--small);
  color: var(--text-muted);
}

/* ── 画面が狭いとき ────────────────────────────────────── */

@media (max-width: 30rem) {
  body { line-height: 1.8; }
  .site-title { font-size: 1.3rem; }
  h1 { font-size: 1.35rem; }
}

/* ── 本文ページ（Markdown から生成した中身） ───────────── */

/* 見出し直後の導入文。本文より少し大きくして、そのページが何かを最初に伝える */
.lead {
  font-size: 1.05rem;
  color: var(--text);
  margin-bottom: 1.6rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--border);
}

ol { margin: 0 0 1.1rem; padding-left: 1.6rem; }

/* 表は横に長くなりうる。ページ全体を横スクロールさせず、表だけを動かす */
.table-wrap {
  overflow-x: auto;
  margin: 0 0 1.3rem;
  border: 1px solid var(--border);
  border-radius: 4px;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--small);
}

th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--border);
}

th {
  background: var(--bg-sunken);
  font-weight: 700;
  white-space: nowrap;
}

tr:last-child th, tr:last-child td { border-bottom: none; }

/* ── 統制区分 ──────────────────────────────────────────── */
/* このサイトの中核。区分は単なるタグではなく、見た目で区別できることが要件。
   A（当事者統制下）= 調査対象が作れる情報なので、最も強く割り引く。
   B（第三者記録）= 調査対象が改変できない。
   C（独立観測）= 調査者が自分で取得した。
   色は3つとも背景に対して 6.0 以上、白文字を載せて 6.3 以上を確保している。
   色だけに頼らないよう、記号（A / B / C）と枠線の位置も変えている。 */

:root {
  --ctrl-a:      #8a5312;  /* 当事者統制下 */
  --ctrl-a-weak: #faf1e4;
  --ctrl-b:      #145c9e;  /* 第三者記録 */
  --ctrl-b-weak: #e7f0f8;
  --ctrl-c:      #186049;  /* 独立観測 */
  --ctrl-c-weak: #e4f0ec;
}

.control-defs { margin: 0 0 1.6rem; }

.control-def {
  border: 1px solid var(--border);
  border-left-width: 5px;
  border-radius: 4px;
  padding: 0.9rem 1.1rem 0.1rem;
  margin: 0 0 0.8rem;
}

.control-def h3 {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
}

.control-def p { font-size: var(--small); }

.control-badge {
  display: inline-block;
  min-width: 1.9em;
  margin-right: 0.5em;
  padding: 0.05em 0.35em;
  border-radius: 3px;
  color: #fff;
  font-weight: 700;
  text-align: center;
  /* 記号なので、日本語の字送りに引きずられないようにする */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.control-a { border-left-color: var(--ctrl-a); background: var(--ctrl-a-weak); }
.control-a h3 { color: var(--ctrl-a); }
.control-a .control-badge { background: var(--ctrl-a); }

.control-b { border-left-color: var(--ctrl-b); background: var(--ctrl-b-weak); }
.control-b h3 { color: var(--ctrl-b); }
.control-b .control-badge { background: var(--ctrl-b); }

.control-c { border-left-color: var(--ctrl-c); background: var(--ctrl-c-weak); }
.control-c h3 { color: var(--ctrl-c); }
.control-c .control-badge { background: var(--ctrl-c); }

/* ── 状態の告知 ────────────────────────────────────────── */
/* 「フォームは準備中」のように、ページの前提を最初に伝えるための枠。
   免責（青）と競合しないよう中立色にし、左の太い線で「読み飛ばさせない」形にする。
   統制区分の琥珀（A）とも混同されないよう、色ではなく明度差で示す。 */

.notice {
  border: 1px solid var(--border);
  border-left: 5px solid var(--text-muted);
  border-radius: 4px;
  background: var(--bg-sunken);
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.6rem;
}

.notice > :first-child { margin-top: 0; }
.notice > :last-child { margin-bottom: 0; }
.notice p { font-size: var(--small); }

/* 連絡先アドレス。緊急の連絡先なので、本文に埋もれさせない */
.contact-address {
  margin: 0.6rem 0 0.8rem;
  font-size: 1.05rem;
  font-weight: 700;
  word-break: break-all;
}

/* ── 事実台帳 ──────────────────────────────────────────── */

.legend {
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-raised);
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.6rem;
}

.legend-title { margin: 0 0 0.6rem; font-weight: 700; }
.legend-list { list-style: none; margin: 0 0 0.6rem; padding: 0; }
.legend-list li { margin-bottom: 0.45rem; font-size: var(--small); }
.legend-note { margin: 0; font-size: var(--small); color: var(--text-muted); }

/* 統制区分のタグ。/method の枠と同じ色を使い、台帳では小さいタグとして出す。
   色だけに頼らないよう、記号（A/B/C）と区分名を必ず併記する。 */
.control-tag {
  display: inline-block;
  white-space: nowrap;
  border: 1px solid;
  border-radius: 3px;
  padding: 0.05em 0.5em 0.05em 0.15em;
  font-size: var(--small);
  font-weight: 700;
}
.control-tag .control-badge { margin-right: 0.4em; }

.control-tag.control-a { border-color: var(--ctrl-a); background: var(--ctrl-a-weak); color: var(--ctrl-a); }
.control-tag.control-b { border-color: var(--ctrl-b); background: var(--ctrl-b-weak); color: var(--ctrl-b); }
.control-tag.control-c { border-color: var(--ctrl-c); background: var(--ctrl-c-weak); color: var(--ctrl-c); }
.control-tag.control-unknown { border-color: var(--text-muted); background: var(--bg-sunken); color: var(--text-muted); }
.control-tag.control-unknown .control-badge { background: var(--text-muted); }

.ledger-summary { font-size: var(--small); color: var(--text-muted); }

.fact {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1rem 1.1rem;
  margin: 0 0 1.1rem;
  background: var(--bg-raised);
}

.fact-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  margin-bottom: 0.7rem;
}

.fact-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  text-decoration: none;
}

.fact-flag {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.05em 0.5em;
  font-size: 0.85rem;
  color: var(--text-muted);
  background: var(--bg-sunken);
}
/* 「今も同じか」「再現されたか」は読者が最初に知るべき情報なので、
   通常でない状態だけ色を変えて目に入るようにする */
.fact-flag.status-watch,
.fact-flag.repro-pending { border-color: var(--ctrl-a); color: var(--ctrl-a); background: var(--ctrl-a-weak); }

.fact-statement { margin: 0 0 0.9rem; }

.fact-meta {
  margin: 0 0 0.6rem;
  font-size: var(--small);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.9rem;
}
.fact-meta dt { color: var(--text-muted); white-space: nowrap; }
.fact-meta dd { margin: 0; overflow-wrap: anywhere; }

.fact-contradicts, .fact-related { margin: 0 0 0.4rem; font-size: var(--small); }
.fact-contradicts { color: var(--ctrl-a); }

.fact-revisions { margin-top: 0.6rem; font-size: var(--small); }
.fact-revisions summary { cursor: pointer; color: var(--accent); }

.revision {
  border-left: 3px solid var(--border);
  padding: 0.5rem 0 0.5rem 0.8rem;
  margin-top: 0.6rem;
}
/* 「今の状態」と「過去に観測された状態」を見た目で区別する（方法論 5） */
.revision-current { border-left-color: var(--accent); }
.revision-past { border-left-color: var(--text-muted); opacity: 0.92; }

.revision-when { margin: 0 0 0.3rem; color: var(--text-muted); }
.revision-type, .revision-mark {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 0.4em;
}
.revision-current .revision-mark { border-color: var(--accent); color: var(--accent); }
.revision-content { margin: 0 0 0.3rem; }
.revision-evidence { margin: 0; color: var(--text-muted); overflow-wrap: anywhere; }

/* ── 仮説評価 ──────────────────────────────────────────── */
/* 判定は色だけに頼らず、記号（× ⊘ ・ ● －）でも示す。
   「論理矛盾」と「観測棄却」を同じ見た目にしない。前者は永久に成立しないが、
   後者は新たな観測で復活しうるので、性質がまったく違う。 */

.verdict {
  display: inline-block;
  min-width: 1.6em;
  padding: 0.05em 0.4em;
  border: 1px solid;
  border-radius: 3px;
  font-weight: 700;
  text-align: center;
}

.verdict.v-impossible { border-color: var(--text-muted); background: #e6e6e6; color: var(--text-muted); }
.verdict.v-rejected   { border-color: var(--ctrl-a);     background: var(--ctrl-a-weak); color: var(--ctrl-a); }
.verdict.v-low        { border-color: var(--border);     background: var(--bg-raised);   color: var(--text); }
.verdict.v-strong     { border-color: var(--accent);     background: var(--accent-weak); color: var(--accent); }
.verdict.v-none       { border-color: var(--border);     background: var(--bg);          color: var(--text-muted); }

/* 336 セルの地図。1枚で俯瞰できることを優先し、各マスは記号だけにする */
.cell-map { font-size: 0.85rem; }
.cell-map th, .cell-map td { padding: 0.2rem 0.35rem; text-align: center; }
.cell-map th[scope="row"] {
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--bg-sunken);
  position: sticky;
  left: 0;
}
.cell-map abbr { text-decoration: none; border: none; }

.cell-map td.v-impossible { background: #e6e6e6; color: var(--text-muted); }
.cell-map td.v-rejected   { background: var(--ctrl-a-weak); color: var(--ctrl-a); font-weight: 700; }
.cell-map td.v-low        { background: var(--bg-raised); color: var(--text); }
.cell-map td.v-strong     { background: var(--accent-weak); color: var(--accent); font-weight: 700; }
.cell-map td.v-none       { color: var(--text-muted); }

.cell {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1rem 1.1rem;
  margin: 0 0 1.1rem;
  background: var(--bg-raised);
}

/* ── 影響 × 取得の見込み のマトリクス ──────────────────── */
/* 左上（影響が大きく、取得可能）が最優先であることを、色でも示す */
.matrix th[scope="row"] { background: var(--bg-sunken); white-space: nowrap; }
.matrix td { vertical-align: top; }
.matrix td.cell-priority { background: var(--accent-weak); }

/* 当事者の公表による記述であることを示すラベル。
   検証済みの事実と同じ視覚的階層に置かないための印（設計要件6）。
   現在の使用先は無し。/claimed（公表値）で使う。
   トップの概要文には付けない。あれは pixiv 百科事典で有志がまとめた第三者の要約であって、
   当事者の発言ではない。出典を取り違えるとサイトの前提が崩れる（2026-09-03 に一度誤った）。 */
.claimed-label {
  margin: 0 0 0.7rem;
  font-size: var(--small);
  font-weight: 700;
  color: var(--ctrl-a);
}
.claimed-label .control-badge { background: var(--ctrl-a); margin-right: 0.5em; }



/* ── 目次（/about） ────────────────────────────────────── */
/* 章が増えるほど、全体像を先に見せる必要がある。準備中の章も薄く出して、
   「まだ書かれていない」ことまで含めて構造が見えるようにする。
   薄さだけで状態を伝えると色覚・高コントラスト表示・白黒印刷で落ちるので、
   「準備中」の語も併せて出す（WCAG 1.4.1。色に頼らない）。 */

.toc {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-sunken);
  padding: 1rem 1.15rem;
  margin: 0 0 1.6rem;
}

.toc-title {
  margin: 0 0 0.6rem;
  font-weight: 700;
  color: var(--accent);
}

/* list-style: none を付けた ul / ol は、Safari と iOS の VoiceOver でリストとして
   扱われなくなる（.plan のコメントと同じ問題）。role="list" を明示して戻している。 */
.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc-list li {
  margin-bottom: 0.35rem;
  font-size: var(--small);
}
.toc-list li:last-child { margin-bottom: 0; }

/* 章番号の幅を揃えて、題名の左端を縦に並べる（§10 まで入る幅） */
.toc-num {
  display: inline-block;
  min-width: 2.8em;
  color: var(--text-muted);
}
.toc-list a .toc-num { color: inherit; }

/* まだ書いていない章。飛び先が無いのでリンクにしない */
.toc-pending { color: var(--text-muted); }

.toc-mark {
  margin-left: 0.4em;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 0.4em;
  /* em にすると .toc-list li の var(--small)（0.95rem）に掛かって約 12.9px まで縮む。
     この語は「色だけに頼らない」ための唯一の手がかりなので、rem で絶対値に固定する。 */
  font-size: 0.85rem;
  white-space: nowrap;
}


/* ── 整形済みテキスト（系統図・矢印の図） ──────────────── */
/* 等幅で、狭い画面では図だけを横スクロールさせる（本文は動かさない。表と同じ扱い）。
   scripts/build.mjs の indent() は <pre> の中の行を字下げしない（空白が意味を持つため）。 */
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--small);
  line-height: 1.6;
  background: var(--bg-sunken);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: 0.8rem 1rem;
  margin: 0 0 1.3rem;
  overflow-x: auto;
}

/* ── 引用（方法論の「変更の記録」で、削除した規定を残すため） ── */
/* このサイトは「変更前を消さずに両方保持する」ことを方法論に書いている（§5）。
   自分の方法論を変えたときも同じで、削除した文を消さずに引用として残す。
   ただし本文と同じ見た目だと「今も有効な規定」に読めてしまうので、
   沈んだ面に置き、文字色も落として、現行の規定と視覚的に区別する。 */
blockquote {
  margin: 0 0 1.3rem;
  padding: 0.7rem 1rem;
  border-left: 4px solid var(--border);
  background: var(--bg-sunken);
  color: var(--text-muted);
}
blockquote p {
  margin: 0;
  font-size: var(--small);
}

/* ── 折りたたみ（章と節） ──────────────────────────────── */
/* JS は使えない（CSP で script-src を開けていない）ので、素の <details> で作る。
   初期状態は open で出荷する。閉じた <details> の中は、アンカーで飛んでも開かず
   （開くには JS が要る）、ブラウザ内検索と印刷からも落ちるため。
   畳んで概観するのは読者の操作に任せる（2026-09-03 に方式決定）。
   章（.sec）だけでなく節（.sub）も畳めるようにした。1章が長く、章単位でしか
   畳めないと結局読みにくいため（2026-09-04）。 */

details.sec { margin: 0; }

/* 節は左に細い線を引いて、どこからどこまでが1つの節かを見せる。
   畳んだあとも線が残るので、「ここに何かある」が分かる。 */
details.sub {
  margin: 0 0 0.6rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--border-soft);
}

/* 開閉の印は見出しの「左」に置く。行末に置くと、日本語の長い見出しの先にあって
   見つけにくい（「閉じるところが分かりにくい」2026-09-04）。左に置けば、章と節が
   いくつ並んでも印の位置が縦に揃い、「押せる場所」として認識できる。
   見出しは <summary> の中に置く（summary の内容モデルは見出し1つを認めている）。
   既定の三角マーカーは、中にブロックの見出しを入れると行頭で浮くので、自前の印に置き換える。 */
details.sec > summary,
details.sub > summary {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
}
details.sec > summary::-webkit-details-marker,
details.sub > summary::-webkit-details-marker { display: none; }

details.sec > summary::before,
details.sub > summary::before {
  content: "\25B6";
  flex: none;
  font-size: 0.7em;
  line-height: 1;
}
details.sec[open] > summary::before,
details.sub[open] > summary::before { content: "\25BC"; }

/* 章の見出しの罫線と余白は summary 側に移す。h2 に付けたままだと、
   印の分だけ罫線が右にずれて、章の切れ目が揃わない。 */
details.sec > summary {
  margin: 2.75rem 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--accent-weak);
}
details.sec > summary::before { color: var(--accent); }
details.sec > summary > h2 {
  flex: 1;
  margin: 0;
  padding: 0;
  border-bottom: none;
}

details.sub > summary { margin: 1.6rem 0 0.6rem; }
details.sub > summary::before { color: var(--text-muted); }
details.sub > summary > h3 { flex: 1; margin: 0; }

/* 押せることを、下線と色でも見せる（キーボードには UA の focus リングが出る） */
details > summary:hover > h2,
details > summary:hover > h3 { text-decoration: underline; }
details > summary:hover::before { color: var(--accent); }

/* ── 折りたたみの印の、読み上げと印刷 ──────────────────── */
/* ::before の content は要素の読み上げ名に混ざる。<summary> は開閉状態を自分で伝えるので、
   見出しが「1. 概要 ▶」と読まれるのは余計な情報でしかない。
   content の代替テキストを空にして、目に見える印だけを残す。
   この構文（content: "印" / "代替テキスト"）を解さないブラウザでは宣言ごと無効になり
   印が消えてしまうので、@supports で対応を確かめてから上書きする。 */
@supports (content: "x" / "") {
  details.sec > summary::before,
  details.sub > summary::before { content: "\25B6" / ""; }
  details.sec[open] > summary::before,
  details.sub[open] > summary::before { content: "\25BC" / ""; }
}

/* 印刷では開閉できないので、印を出さない。
   [open] 付きのセレクタは詳細度が1つ高いので、こちらも [open] を含めないと負ける
   （全章・全節を open で出荷しているため、負けると印刷物の全見出しに ▼ が残る。
   2026-09-03 の査読で発覚）。 */
@media print {
  details.sec > summary::before,
  details.sub > summary::before,
  details.sec[open] > summary::before,
  details.sub[open] > summary::before { content: ""; }
}

/* ── 目次の節（/about） ────────────────────────────────── */
/* 章だけでは1行が粗すぎて、どこに何が書いてあるか分からない（2026-09-04）。
   本文のある章についてだけ節を展開する。準備中の章まで節を並べると、
   まだ書いていないものが目次の大半を占めてしまう。 */
.toc-sub {
  list-style: none;
  margin: 0.3rem 0 0.5rem;
  padding-left: 1.6rem;
}
.toc-sub li { margin-bottom: 0.25rem; }
.toc-sub .toc-num { min-width: 3.2em; }

/* ── パンくず（子ページ） ──────────────────────────────── */
/* ナビに出さない子ページ（/about/zero-natural）へ検索や共有リンクから直接来た人が、
   親ページへ戻れるようにする。区切りは ::before で入れる（文字として書くと
   読み上げに「›」が混ざる。装飾は CSS 側に置く）。 */
.breadcrumb {
  margin: 0 0 1.2rem;
  font-size: var(--small);
  color: var(--text-muted);
}
.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumb li {
  display: inline;
  margin: 0;
}
.breadcrumb li + li::before {
  content: "\203A";
  margin: 0 0.5em;
  color: var(--text-muted);
}

/* ── 用語索引（/about §9） ─────────────────────────────── */
/* 語と説明の対なので dl / dt / dd で書く（トップの .plan と同じ理由。
   太字と改行という見た目だけで対を表すと、支援技術には無関係な2文として伝わる）。
   参照先は説明の前に置く。説明が長い語でも、どの節を見ればよいかが先に分かる。 */
.glossary {
  margin: 0 0 1.5rem;
}
.glossary dt {
  margin: 0.9rem 0 0.15rem;
  font-weight: 700;
}
.glossary dt:first-child { margin-top: 0; }
.glossary dd {
  margin: 0 0 0 1.1rem;
  font-size: var(--small);
  color: var(--text);
}
.glossary-ref {
  margin-right: 0.6em;
  color: var(--text-muted);
}

/* ── 目次の中の子ページ枠 ──────────────────────────────── */
/* 章の一覧とは別枠にする。子ページは章ではないので、§N の並びに混ぜると
   番号が飛んで見える。本文からもリンクしているが、目次に出さないと
   「このページの下にもう1枚ある」ことが最初に分からない。 */
.toc-child-title {
  margin: 0.9rem 0 0.3rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border-soft);
  font-weight: 700;
  font-size: var(--small);
  color: var(--text-muted);
}
.toc-child {
  list-style: none;
  margin: 0;
  padding: 0;
}
.toc-child li {
  margin-bottom: 0.25rem;
  font-size: var(--small);
}

/* ── 相対評価の並び（/hypotheses 4-3） ─────────────────── */
/* 「第2説 ≥ 第3説 ＞ …」のような順位の列。記号が本文に埋もれると読み取れないので、
   沈んだ面に置いて、行間を広げる。狭い画面では横スクロールさせる（表と同じ扱い）。 */
.ranking {
  margin: 0 0 1.1rem;
  padding: 0.7rem 0.9rem;
  background: var(--bg-sunken);
  border-left: 3px solid var(--border);
  border-radius: 0 4px 4px 0;
  line-height: 2;
  overflow-x: auto;
}

/* 対照は矛盾ではない。同じ運用者が対象ごとに扱いを変えている、という比較。
   矛盾（琥珀）と同じ色にすると「食い違っている」と誤読されるので、落ち着いた色にする。 */
.fact-contrasts { margin: 0 0 0.4rem; font-size: var(--small); color: var(--text-muted); }