/* KaedeRPG の説明書の Web の見た目（設計 Docs/Guides-rpg/Working/rpg-docs-web-design.md §6.1）。
   版の切り替え・言語の切り替え・狭い画面の目次は <details> で開く。言語の出し分け（[data-l]）の規則は、
   脚本 rpg-docs-web.py が site.json の言語の一覧からこの後ろに足す（言語を足しても CSS を手で直さない）。 */
:root {
  --fg: #1f2328; --muted: #59636e; --line: #d1d9e0; --bg: #ffffff; --soft: #f6f8fa;
  --accent: #b5442b; --warn-bg: #fff4d6; --warn-line: #d4a72c;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--fg); background: var(--bg); line-height: 1.75;
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif;
  font-size: 16px; overflow-wrap: break-word;
}
a { color: #0b5cad; }
.old {
  margin: 0; padding: .6em 1em; background: var(--warn-bg); border-bottom: 1px solid var(--warn-line); font-size: .95em;
}
header.top {
  position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: .4em 1.2em;
  padding: .5em 1em; background: var(--soft); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; color: var(--accent); text-decoration: none; }
a.ver { margin-left: -.8em; color: var(--muted); font-size: .9em; text-decoration: none; }
a.brand:hover, a.ver:hover { text-decoration: underline; }
nav.pages { display: flex; flex-wrap: wrap; gap: .2em 1em; }
nav.pages a.here { font-weight: 700; color: var(--fg); text-decoration: none; }
.switches { display: flex; gap: .8em; margin-left: auto; }
details.switch { position: relative; }
details.switch summary { cursor: pointer; padding: .1em .6em; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); list-style: none; }
details.switch summary::after { content: " ▾"; color: var(--muted); }
details.switch summary::-webkit-details-marker { display: none; }
details.switch ul {
  position: absolute; right: 0; margin: .3em 0 0; padding: .3em 0; list-style: none; min-width: 12em;
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
details.switch li a { display: block; padding: .2em 1em; text-decoration: none; }
details.switch li a.here { font-weight: 700; }
details.switch li a.here::before { content: "✓ "; }
.layout { display: flex; align-items: flex-start; max-width: 1280px; margin: 0 auto; }
nav.toc { flex: 0 0 17em; position: sticky; top: 3.2em; max-height: calc(100vh - 3.5em); overflow-y: auto; padding: 1em .8em 2em 1em; font-size: .88em; line-height: 1.5; border-right: 1px solid var(--line); }
nav.toc .toc-title { font-weight: 700; margin-bottom: .4em; }
nav.toc ul { list-style: none; margin: 0; padding: 0; }
nav.toc li { margin: .15em 0; }
nav.toc li.h3 { padding-left: 1em; }
nav.toc a { text-decoration: none; color: var(--fg); }
nav.toc a:hover { text-decoration: underline; }
details.toc-narrow { display: none; }
main { flex: 1 1 auto; min-width: 0; padding: 1em 2em 4em; max-width: 60em; }
main h1 { font-size: 1.9em; line-height: 1.3; border-bottom: 1px solid var(--line); padding-bottom: .3em; }
main h2 { font-size: 1.45em; line-height: 1.35; margin-top: 2em; border-bottom: 1px solid var(--line); padding-bottom: .25em; }
main h3 { font-size: 1.2em; margin-top: 1.6em; }
main h4 { font-size: 1.05em; margin-top: 1.4em; }
main :is(h1, h2, h3, h4, h5, h6) { scroll-margin-top: 3.5em; }
main a.anchor { margin-left: .4em; color: var(--line); text-decoration: none; font-weight: 400; }
main :is(h1, h2, h3, h4, h5, h6):hover a.anchor { color: var(--muted); }
main img { max-width: 100%; height: auto; border: 1px solid var(--line); }
main code { font-family: Consolas, "SFMono-Regular", Menlo, monospace; font-size: .9em; background: var(--soft); padding: .1em .3em; border-radius: 4px; }
main pre { background: var(--soft); padding: .8em 1em; overflow-x: auto; border-radius: 6px; line-height: 1.5; }
main pre code { background: none; padding: 0; }
main blockquote { margin: 1em 0; padding: .2em 1em; color: var(--muted); border-left: 4px solid var(--line); }
main hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
div.table { overflow-x: auto; margin: 1em 0; }
main table { border-collapse: collapse; font-size: .92em; line-height: 1.55; }
main th, main td { border: 1px solid var(--line); padding: .35em .6em; vertical-align: top; }
main th { background: var(--soft); text-align: left; }
main td { min-width: 4em; }
/* 製品のトップ・版のトップ */
main.home { margin: 0 auto; max-width: 64em; padding: 1.5em 2em 4em; }
main.home h1 { border: 0; margin-bottom: .2em; }
main.home .ver-line { margin: 0 0 .2em; color: var(--muted); font-size: .9em; }
main.home .lead { font-size: 1.05em; color: var(--muted); }
main.home .hero { display: block; width: 100%; height: auto; margin: 1.2em 0; border: 1px solid var(--line); border-radius: 6px; }
ul.cards { list-style: none; padding: 0; margin: .8em 0 1.2em; display: grid; grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); gap: .8em; }
ul.cards a { display: block; height: 100%; padding: .9em 1.1em; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--fg); background: var(--soft); }
ul.cards a:hover { border-color: var(--accent); }
ul.cards strong { display: block; color: var(--accent); font-size: 1.1em; margin-bottom: .2em; }
ul.cards span.desc { display: block; color: var(--muted); font-size: .92em; line-height: 1.5; }
ul.gallery { list-style: none; padding: 0; margin: 1em 0 2em; display: grid; grid-template-columns: repeat(auto-fill, minmax(18em, 1fr)); gap: 1em; }
ul.gallery figure { margin: 0; }
ul.gallery img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 4px; }
ul.gallery figcaption { font-size: .88em; color: var(--muted); line-height: 1.4; margin-top: .3em; }
ul.versions { padding-left: 1.2em; }
ul.versions .date { color: var(--muted); font-size: .9em; margin-left: .6em; }
ul.versions li.here > a { font-weight: 700; color: var(--fg); }
main.home [data-kaede-changes] ul { padding-left: 1.2em; }
footer.bottom { padding: 1.5em 1em; color: var(--muted); font-size: .85em; border-top: 1px solid var(--line); text-align: center; }
@media (max-width: 900px) {
  .layout { display: block; }
  nav.toc.wide { display: none; }
  details.toc-narrow { display: block; margin: .8em 1em 0; padding: .3em .8em; border: 1px solid var(--line); border-radius: 6px; font-size: .9em; line-height: 1.5; }
  details.toc-narrow summary { cursor: pointer; font-weight: 700; }
  details.toc-narrow ul { list-style: none; margin: .4em 0; padding: 0; }
  details.toc-narrow li.h3 { padding-left: 1em; }
  main, main.home { padding: .5em 1em 3em; }
  header.top { position: static; }
  .switches { margin-left: 0; }
  details.switch ul { left: 0; right: auto; }
}

/* 言語の出し分け（rpg-docs-web.py が site.json の言語の一覧から書く。手で直さない） */
html[data-lang="ja"] [data-l]:not([data-l="ja"]) { display: none !important; }
html[data-lang="ja"] details.switch a[data-kaede-lang="ja"] { font-weight: 700; }
html[data-lang="ja"] details.switch a[data-kaede-lang="ja"]::before { content: "✓ "; }
html[data-lang="en"] [data-l]:not([data-l="en"]) { display: none !important; }
html[data-lang="en"] details.switch a[data-kaede-lang="en"] { font-weight: 700; }
html[data-lang="en"] details.switch a[data-kaede-lang="en"]::before { content: "✓ "; }