/* 生成物。config/ui_roles.json から tools/build.js が作る。★手で直さない。
   直すのは config/ui_roles.json のほうで、そこが画面の見た目の正本である。
   決まり: 白い枠は「押すと何かが起きる場所」にだけ出す。読むための並びには出さない。
           文字の大きさは役割ごとに1つの値で決め、ページの種類ごとに変えない。 */

/* 見出しの大きさと太さ。段（h1〜h4）だけで決まる。囲いの中かどうかで変えない。 */
h1 { /* ページの題 */
  font-size: var(--fs-6);
  font-weight: var(--fw-black);
}
h2 { /* 節の見出し */
  font-size: var(--fs-5);
  font-weight: var(--fw-black);
}
h3 { /* 小見出し */
  font-size: var(--fs-4);
  font-weight: var(--fw-bold);
}
h4 { /* その下の見出し */
  font-size: var(--fs-3);
  font-weight: var(--fw-bold);
}

/* 例外 foot-heading: フッターの区分の名前。見出しではなく標識なので、本文より小さくする */
.foot-grid h2 { font-size: var(--fs-1); }
/* 例外 toc-heading: 右に追従する目次の名前。本文の邪魔をしない大きさに留める */
.toc-side h2 { font-size: var(--fs-0); }

/* どの面を出すか。値は config/ui_roles.json の surfaces（card / box / chip / none）。 */
/* 絞り込みの枠（面: card）: 押すと画面の結果が変わる操作のかたまり。触れてよい範囲を面で示す */
.filter-panel {
  background: var(--c-surface);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--r-2);
  padding: var(--sp-4);
}
/* 索引の枠（頭文字・段・テーマへの行き先）（面: card）: 押すと別の場所へ跳ぶ操作のかたまり。絞り込みと役目が同じなので同じ面にする */
.tags-index {
  background: var(--c-surface);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--r-2);
  padding: var(--sp-4);
}
/* 一覧の行（名前・説明・分類）（面: none）: 読むための並び。面を付けると押せそうに見え、行そのもののリンクと紛れる */
.linklist {
  background: transparent;
  border: 0;
  padding: 0;
}
/* カテゴリ・分類の並び（名前と、その下の行き先）（面: none）: 読むための並び。中身の並びなので枠を出さない */
.nav-list {
  background: transparent;
  border: 0;
  padding: 0;
}
/* 関連するページの並び（面: none）: 読むための並び。行き先は行のリンクが示していて、面は要らない */
.panel:not(.filter-panel) {
  background: transparent;
  border: 0;
  padding: 0;
}
/* 節の見出し（面: none）: 区切りの線であって面ではない。下の太い黒線1本で切る */
.section-head {
  background: transparent;
  border: 0;
  padding: 0;
}
/* 本文の節（面: none）: 読む場所。紙（.doc）の上にもう1枚面を重ねない */
.sec {
  background: transparent;
  border: 0;
  padding: 0;
}
/* 押せる1件の枠（カード・トップの枡）（面: box）: 面の内側がそのまま当たり判定である。1件ぶんの押せる範囲を示す */
.card, .rel-card, .nav-grid > li {
  background: var(--c-surface);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--r-2);
  padding: var(--sp-3);
}
/* 押せる小さい札（頭文字・分類の札）（面: chip）: 1行に収まる押せる範囲。枠は同じ形のまま、大きい枠より細く小さくする */
.tag {
  background: var(--c-surface);
  border: var(--bw-1) solid var(--c-line-2);
  border-radius: var(--r-1);
  padding: 0 var(--sp-2);
}

/* 一覧の行（名前 a ／説明 .sub の組み方）。値は config/list_style.json の typography。 */
.linklist:not(.sources):not(.buy-links):not(.reference-links) > li > a {
  font-size: var(--fs-3);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  color: var(--c-link-body);
}
.linklist:not(.sources):not(.buy-links):not(.reference-links) > li > .sub {
  display: block;
  font-size: var(--fs-3);
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}

/* カテゴリ・分類の並び（名前と、その下の行き先）: 名前は行の名前と同じ値。下に並ぶ行き先は太字も下線も付けない。 */
.nav-list .ui-name, .nav-card .ui-name {
  font-size: var(--fs-3);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  color: var(--c-link-body);
}
.nav-list .ui-item, .nav-card .ui-item {
  font-size: var(--fs-2);
  font-weight: var(--fw-body);
  text-decoration: none;
  color: var(--c-link-body);
}
.nav-list .ui-items, .nav-card .ui-items { display: block; font-size: var(--fs-2); color: var(--c-ink-3); }
.nav-list .ui-sep, .nav-card .ui-sep { color: var(--c-line-2); }

/* 頭の並び（ロゴ・メニュー・さがす）: 頭はどのページにも出る。縦に2段取ると、本文が始まる位置がその分だけ下がる。1行に収める。 */
/* 良い例: 広い画面は ロゴ｜メニュー6つ｜虫眼鏡 を1行に。狭い画面は ロゴ｜虫眼鏡｜ハンバーガーの1行にし、押したときだけメニューを下に開く */
/* 悪い例: メニューを2段目に固定で置く（どのページでも縦が1段ぶん減る）／狭い画面でメニューを横スクロールさせる（右に何があるか分からない） */
/* 頭のメニューの文字と間。★1行に収めるための値で、文言は変えない。 */
.tabs { column-gap: var(--sp-2); }
.tabs a {
  font-size: var(--fs-1);
  font-weight: var(--fw-bold);
}
/* 狭い画面（既定）: メニューは出さない。ハンバーガーを開いたときだけ、次の行に出す。 */
.head-nav { display: none; }
.head-menu[open] ~ .head-nav { display: block; flex-basis: 100%; }
/* 広い画面（48rem 以上）: ハンバーガーを出さず、メニューをロゴの右に並べる。 */
@media (min-width: 48rem) {
  .head-menu { display: none; }
  .head-nav { display: block; flex-basis: auto; }
  .head-search input { width: var(--w-search); }
}

/* 足の並び（サイトについて・サイトマップ・著作権）: 足に置くのは、本文を読み終えた読者が次に要るものだけ。区分の見出しを立てるほどの数が無い。 */
/* 良い例: 「サイトについて / サイトマップ」を横1行・スラッシュ区切り・左右中央に並べ、その下に著作権を中央で1行 */
/* 悪い例: 「サイト情報」という見出しを立てて、その下に2本だけを縦に並べる（見出しのほうが中身より多い） */
.foot-links > li + li::before { content: " / "; color: var(--c-line-2); }