/* 歴史研究 /history/（pages/history.py）。色と書体は style.css の :root と面の変数だけを使う。
   主題は「見出しの下に分類、導入の下に本文」を章の頭と同じ列にそろえる。業績の表は5列（年月・種別・題・発表の場・状態）で、行を足せば伸びる */

/* ------------------------------------------------------------ 主題 */
.th-list { border-bottom-color: var(--rule); }
.th-list > div {
  grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); gap: 0 var(--col-gap);
  padding: 26px 0 28px;
}
.th-list dt {
  grid-column: 2 / span 5;
  font-weight: 700; font-size: 1.12rem; letter-spacing: 0.12em; line-height: 1.7; color: var(--fg);
}
.th-list dd { grid-column: 8 / span 5; max-width: 32em; line-height: 2; word-break: auto-phrase; }

/* ------------------------------------------------------------ 業績の表 */
.wk-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.wk-table { grid-column: 2 / -1; width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.92rem; }
.wk-table thead th {
  text-align: left; padding: 8px 16px 8px 0; border-bottom: 1px solid var(--rule-strong);
  font-weight: 500; font-size: 0.78rem; letter-spacing: 0.12em; line-height: 1.6; color: var(--fg-2);
}
.wk-table thead th:nth-child(1) { width: 7.5em; }
.wk-table thead th:nth-child(2) { width: 7em; }
.wk-table thead th:nth-child(4) { width: 26%; }
.wk-table thead th:nth-child(5) { width: 19%; }
.wk-table tbody > tr > * { padding: 20px 16px 22px 0; border-bottom: 1px dashed var(--rule); vertical-align: top; text-align: left; line-height: 1.75; }
.wk-table .wk-date { font-family: var(--f-label); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.03em; line-height: 1.6; white-space: nowrap; }
.wk-kind { font-size: 0.86rem; color: var(--fg-2); }
.wk-title { font-weight: 500; font-size: 0.95rem; word-break: auto-phrase; overflow-wrap: anywhere; }
.wk-authors { display: block; margin-top: 6px; font-weight: 400; font-size: 0.84rem; color: var(--fg-2); }
.wk-venue, .wk-status { font-size: 0.86rem; color: var(--fg-2); word-break: auto-phrase; overflow-wrap: anywhere; }
.wk-status { color: var(--fg); }

/* ------------------------------------------------------------ ウィキペディアの記事の分野（3値の横棒。値はすべて文字で添える） */
.wiki-text, .wiki-fig { margin-top: clamp(56px, 6vw, 88px); padding-top: 18px; border-top: 1px solid var(--rule-strong); }
.wiki-text { grid-column: 2 / span 5; }
.wiki-text h3 { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.14em; line-height: 1.6; }
.wiki-text p { margin-top: 14px; max-width: 30em; line-height: 1.95; color: var(--fg-2); word-break: auto-phrase; }
.wiki-fig { grid-column: 8 / span 5; margin-inline: 0; }
.wiki-bars > div { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 12px 0; }
.wiki-bars > div + div { border-top: 1px dashed var(--rule); }
.wiki-bars dt { font-weight: 500; font-size: 0.9rem; letter-spacing: 0.08em; }
.wiki-bars dd { display: grid; grid-template-columns: minmax(0, 1fr) 4em; align-items: center; column-gap: 14px; }
.wiki-track { display: block; }
.wiki-bar { display: block; width: var(--w); height: 10px; background: var(--fg); }
.wiki-n { font-family: var(--f-label); font-weight: 600; font-size: 1.35rem; letter-spacing: 0.02em; line-height: 1.2; text-align: right; }
.wiki-n small { margin-left: 0.2em; font-family: var(--f-body); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--fg-2); }
.wiki-total {
  display: grid; grid-template-columns: 5.5em minmax(0, 1fr) 4em; align-items: baseline; column-gap: 12px;
  padding-top: 12px; border-top: 1px solid var(--rule-strong);
}
.wiki-total-l { font-weight: 700; font-size: 0.9rem; letter-spacing: 0.08em; }
.wiki-asof { font-size: 0.82rem; color: var(--fg-2); }

/* ------------------------------------------------------------ 中くらいの画面: 表は年月・種別・本文の3列に組み替え、発表の場と状態は題の下に見出しつきで置く */
@media (max-width: 1080px) {
  .th-list dt { grid-column: 2 / span 3; }
  .th-list dd { grid-column: 5 / -1; }

  .wk-table, .wiki-text, .wiki-fig { grid-column: 2 / -1; }
  .wk-table, .wk-table tbody { display: block; }
  .wk-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wk-table tbody { border-top: 1px solid var(--rule-strong); }
  .wk-table tbody > tr {
    display: grid; grid-template-columns: 7.5em 7em minmax(0, 1fr); column-gap: 16px;
    padding: 18px 0 20px; border-bottom: 1px dashed var(--rule);
  }
  .wk-table tbody > tr > * { display: block; padding: 0; border: 0; }
  .wk-date { grid-row: 1 / span 3; }
  .wk-kind { grid-row: 1 / span 3; }
  .wk-title, .wk-venue, .wk-status { grid-column: 3; }
  .wk-venue, .wk-status { margin-top: 8px; }
  .wk-venue::before, .wk-status::before {
    content: attr(data-label); display: block;
    font-size: 0.74rem; letter-spacing: 0.12em; color: var(--fg-3);
  }
  .wk-table .is-none { display: none; } /* 縦に積むときは、空の欄を見出しごと出さない */
  .wiki-fig { margin-top: 28px; padding-top: 0; border-top: 0; }
}

/* ------------------------------------------------------------ スマホ */
@media (max-width: 760px) {
  .th-list > div { display: block; padding: 20px 0 22px; }
  .th-list dd { margin-top: 8px; }

  .wk-table, .wiki-text, .wiki-fig { grid-column: 1 / -1; }
  .wk-table tbody > tr { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: baseline; padding: 16px 0 18px; }
  .wk-date, .wk-kind { grid-row: auto; }
  .wk-title, .wk-venue, .wk-status { grid-column: 1 / -1; }
  .wk-title { margin-top: 8px; }

  .wiki-bars > div { grid-template-columns: 4.8em minmax(0, 1fr); }
  .wiki-total { grid-template-columns: 4.8em minmax(0, 1fr) 3.6em; }
  .wiki-bars dd { grid-template-columns: minmax(0, 1fr) 3.6em; column-gap: 10px; }
}