/* S16 説明書・更新履歴・利用規約・ソースコード（担当G）。値は tokens.css の変数だけを使う（直書きしない）。
   本文は kit.css の .md（整えた本文）に乗せ、文書だけの物（章の見出し・札・注記・キーの一覧・更新履歴の版）をここで足す。 */

:root[data-measure="read"] .docs-body { padding-left: max(var(--gutter), calc((100% - var(--measure)) / 2)); padding-right: max(var(--gutter), calc((100% - var(--measure)) / 2)); }
.docs-body { padding-bottom: var(--sp-7); }

/* 章 */
.docs-chapter { margin: 0 0 var(--sp-6); }
.docs-h2 { display: flex; align-items: baseline; gap: var(--sp-2); margin: 0 0 var(--sp-3); font-size: var(--fs-title); font-weight: var(--fw-heavy); line-height: var(--lh-ui); }
.docs-no { flex: none; color: var(--text-3); font-variant-numeric: tabular-nums; }
.docs-md { max-width: 100%; }
.docs-md h3 { margin-top: var(--sp-5); font-size: var(--fs-headline); font-weight: var(--fw-bold); }
.docs-md h4 { margin: var(--sp-3) 0 var(--sp-1); font-size: var(--fs-body); font-weight: var(--fw-bold); }
.docs-md .help-note { color: var(--text-2); font-size: var(--fs-small); line-height: var(--lh-small); }
.docs-md .help-table { font-size: var(--fs-small); }
.docs-md a { color: var(--text); }
.docs-md kbd { font-family: var(--font-mono); font-size: 0.9em; padding: 0 var(--sp-1); border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--line-strong); }
.docs-md .btn { text-decoration: none; }
.docs-md .key-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.docs-md figure { margin: 0 0 var(--sp-3); }
.docs-md figure img { display: block; width: 100%; max-width: 360px; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--line); }
.docs-md figcaption { color: var(--text-2); font-size: var(--fs-small); line-height: var(--lh-small); }
.docs-totop { margin: 0; font-size: var(--fs-small); }
.docs-totop a { display: inline-flex; align-items: center; min-height: var(--hit-min); color: var(--accent); text-decoration: none; }

/* 「設定で切れる」「いまはオフ」の札（言葉で。色だけにしない） */
.docs-pill { display: inline-block; padding: 0 var(--sp-2); border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--text-2); font-size: var(--fs-caption); font-weight: var(--fw-normal); line-height: 1.6; vertical-align: 0.15em; white-space: nowrap; }
.docs-pill.is-off { color: var(--text); background: var(--press); }
.docs-features h4 { margin: var(--sp-3) 0 var(--sp-1); }

/* 更新履歴 */
.docs-major-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); margin: 0 0 var(--sp-2); padding: 0 var(--cell-x); font-size: var(--fs-headline); line-height: var(--lh-ui); }
.docs-major-name { font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; }
.docs-major-line { font-weight: var(--fw-normal); color: var(--text-2); font-size: var(--fs-small); }
.docs-versions { margin-bottom: 0; }
.docs-version { position: relative; background: var(--surface); }
.docs-version + .docs-version::before { content: ""; position: absolute; top: 0; left: var(--cell-x); right: 0; height: 1px; transform: scaleY(0.5); background: var(--line); }
.docs-version-head { display: flex; gap: var(--sp-3); align-items: baseline; min-height: var(--cell-h); padding: var(--row-pad) var(--cell-x); cursor: pointer; list-style: none; line-height: var(--lh-ui); }
.docs-version-head::-webkit-details-marker { display: none; }
.docs-version-head:active { background: var(--press); }
.docs-version-name { flex: none; min-width: 3.5em; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.docs-version-title { flex: 1; min-width: 0; }
.docs-version.is-current .docs-version-name::after { content: "（いまの版）"; font-weight: var(--fw-normal); color: var(--text-2); font-size: var(--fs-small); }
.docs-version-items { margin: 0; padding: 0 var(--cell-x) var(--sp-3) calc(var(--cell-x) + 1.2em); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-2); }
.docs-version-items li { margin: var(--sp-1) 0; }

/* 利用規約 */
.docs-keypoints { padding: var(--sp-3) var(--cell-x); margin-bottom: var(--sp-5); border-radius: var(--r-group); background: var(--surface); }

/* いちばん下の強いボタン（同意する・まとめて保存）。中身に重ねず、送れる中身の下に置く */
.docs-foot { flex: none; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2) var(--gutter) calc(var(--sp-2) + var(--safe-b)); background: var(--bg); box-shadow: 0 -0.5px 0 var(--line); }
.docs-foot .btn-strong { width: 100%; }
.docs-hint { margin: 0; color: var(--text-2); font-size: var(--fs-small); line-height: var(--lh-small); text-align: center; }
.docs-hint[hidden] { display: none; }

/* ソースコード */
.docs-file .set-label { font-family: var(--font-mono); font-size: var(--fs-small); overflow-wrap: anywhere; }
.docs-file-view { padding-top: var(--sp-2); }
.docs-meta { margin: 0 0 var(--sp-2); color: var(--text-3); font-size: var(--fs-small); overflow-wrap: anywhere; }
.docs-code { margin: 0; padding: var(--sp-3); border-radius: var(--r-m); background: var(--surface); font-family: var(--font-mono); font-size: var(--fs-footnote); line-height: var(--lh-small); white-space: pre-wrap; overflow-wrap: anywhere; }