/* ============================================================
   doc.css — 固定ページ(about / left-f / privacy / disclaimer / contact / operator)の共通スタイル

   ★6枚で同じCSSを書かない(E-40)。1本にして全部が読む。
   ★base.css のトークン(--ink / --bg / --border ...)を使う。色をここで定義しない。
   ★.global-nav は base.css。ここでは触らない(320pxで3項目の固定バー)。
   ============================================================ */

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.8;
  font-variant-numeric: tabular-nums;
  padding: clamp(16px, 4vw, 48px);
  /* ★下端の .global-nav(48px)に本文が隠れないようにする */
  padding-bottom: 88px;
}

.doc { max-width: 44em; margin: 0 auto; }

.doc .breadcrumb { font-size: 11px; color: var(--ink3); margin-bottom: 10px; }
.doc .breadcrumb a { color: var(--ink2); }

.doc h1 {
  font-size: clamp(24px, 5vw, 34px); font-weight: 800; line-height: 1.25;
  margin-bottom: 14px;
}
.doc h2 {
  font-size: 16px; font-weight: 700; margin: 30px 0 8px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.doc h3 { font-size: 14px; font-weight: 700; margin: 20px 0 6px; }

.doc p { font-size: 14px; color: var(--ink2); margin-bottom: 12px; }
.doc .lead { font-size: 15px; color: var(--ink); }
.doc b { color: var(--ink); font-weight: 700; }

.doc ul, .doc ol { margin: 0 0 14px 1.3em; }
.doc li { font-size: 14px; color: var(--ink2); margin-bottom: 8px; }

.doc a { color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--ink4); text-underline-offset: 3px; }
.doc a:hover { text-decoration-color: var(--ink); }

/* ★実測値の1行(SITE-STAT で焼かれる)。本文より一段落として、事実であることを示す */
.doc .stat {
  font-size: 13px; color: var(--ink2);
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; margin: 14px 0;
}

/* ★出典行(集計元・母数・時点)。★2026-08-24 追加。
   ★但し書きを本文と同じ大きさで出すと、★数字と同格に見える。
   ★用語ページは「数字を見せる」ページなので、★出典は従属させる。
     出走表の .pct-note(11px・--ink3)、選手ページの .n-small と同じ扱いに揃える。
   ★消さない。★母数と集計時点が無い数字は出さないと決めている(憲法§3)。
   ★色は付けない。字の大きさとグレー階調だけで階層を作る。 */
.doc .src {
  font-size: 11px; color: var(--ink3); line-height: 1.7;
  margin: -6px 0 16px;
}
.doc .src b { color: var(--ink2); font-weight: 700; }

/* ★横に広い表は表の中でスクロールさせる。ページ本体を横スクロールさせない */
/* ★★2026-09-01: ★横スクロールの手がかりを足した(HANDOFF §5-95)。
     ★実測: ★320px で ★303px(3箱)が★隠れていたが、★手がかりが1つも無かった。
     ★★モバイルのスクロールバーは★オーバーレイで★スクロール中しか見えない(★モバイルが89%)。
   ★仕組み: ★左右の端に★影を置き、★その上に★背景色の板を local で重ねる。
     ★★端まで来ると★板が影を隠す = ★スクロールできる側にだけ影が出る。
     ★★★溢れていない箱では★両端とも板が乗るので★影は出ない。
   ★実測(★2026-09-01): ★背景の層が 0→4 / ★文書の高さ ★変化なし /
     ★★backgroundColor は transparent のまま = ★★★背景色の種類は増えない(18種のまま)。
   ★色は新しく増やしていない: ★板は var(--bg)、★影は黒の16%(★背景色ではない)。 */
.doc .tw {
  overflow-x: auto; margin-bottom: 14px;
  background:
    linear-gradient(to right, var(--bg) 40%, transparent) left center / 28px 100% no-repeat local,
    linear-gradient(to left,  var(--bg) 40%, transparent) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.16), transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.16), transparent) right center / 14px 100% no-repeat scroll;
}
.doc table { border-collapse: collapse; font-size: 13px; min-width: 100%; }
/* ★用語ページの2列表(枠番 → 割合)。★.doc table で足りているので最小限だけ。
   ★min-width:100% だと2列が画面いっぱいに広がり、★数字の間が空いて読みにくい。
   ★作り込まない(5軸分解が先)。★幅の指定1つだけ。 */
.doc .terms-tbl { min-width: 0; }
.doc th, .doc td {
  border: 1px solid var(--border); padding: 6px 10px; text-align: right; white-space: nowrap;
}
.doc th:first-child, .doc td:first-child { text-align: left; }
.doc thead th { background: var(--panel); font-weight: 600; font-size: 12px; }

/* ★.site-footer の定義は base.css に移した(2026-08-21)。
   理由: フッターを全ページに入れたが、★player.html は doc.css を読んでいない。
   ★選手ページ1,847枚のフッターにスタイルが当たっていなかった(実測で判明)。
   ★サイト共通の外枠は、サイト共通のCSSに置く。 */

/* ★全選手索引(/racers/all)の一覧。★2026-08-30 追加。
   ★新しいクラスを1つ足すだけ。★既存ページには .idx が無いので★見え方は変わらない。
   ★1,846件を1枚で持つので、★狭い画面でも縦に伸びすぎないように段組にする。
   ★column-count は幅で切り替える(段の中で折り返すので★横スクロールは出ない)。 */
.doc .idx { list-style: none; margin: 6px 0 14px; padding: 0; column-gap: 14px; column-count: 2; }
.doc .idx li { break-inside: avoid; font-size: 13px; line-height: 2.0; }
.doc .idx a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--border); }
.doc .idx .idx-id { color: var(--ink3); font-size: 11px; margin-left: 5px; }
@media (min-width: 560px) { .doc .idx { column-count: 3; } }
@media (min-width: 820px) { .doc .idx { column-count: 4; } }