/* ドキュメント共通の並べ方と部品(ゼロベース再設計 2026-10-03)
   ui/ui.css の色・文字・部品の上に、ドキュメントだけで使うものを足す。新しい色・フォントは足さない。
   目次・前後ページは docs.js が差し込む。 */

/* ---------- 枠: 左に章の目次、右に本文 ---------- */
.docs{display:grid;grid-template-columns:236px minmax(0,1fr);gap:56px;align-items:start;padding:34px 0 88px}
.docs-side{position:sticky;top:calc(var(--header-h) + 18px);max-height:calc(100vh - var(--header-h) - 36px);overflow:auto;overscroll-behavior:contain;padding:0 6px 12px 0;font-size:14px;scrollbar-width:thin}
.docs-main{min-width:0;max-width:820px}
.docs-main.wide{max-width:880px}

/* 章の目次 */
.docs-toc-btn{display:none}
.docs-nav .g{font:700 11.5px var(--body);letter-spacing:.12em;color:var(--muted);margin:20px 0 6px;padding-left:10px}
.docs-nav .g:first-child{margin-top:2px}
.docs-nav ul{list-style:none;margin:0;padding:0}
.docs-nav a{display:flex;align-items:baseline;gap:6px;padding:6px 10px;border-radius:8px;text-decoration:none;color:var(--ink2);line-height:1.5}
.docs-nav a:hover{background:var(--card);color:var(--green)}
.docs-nav a[aria-current="page"]{background:var(--green-bg);color:var(--green);font-weight:700}
.docs-nav .tag{font:600 10.5px var(--num);letter-spacing:.06em;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 4px;margin-left:auto;flex:none}
.docs-nav .toc{margin:4px 0 10px 12px;border-left:1px solid var(--line);padding-left:4px}
.docs-nav .toc a{font-size:13px;padding:4px 10px;color:var(--muted);border-radius:6px}
.docs-nav .toc a.active{color:var(--ink);font-weight:700;background:var(--paper2)}
.docs-nav .toc .toc{margin:2px 0 6px 8px}
.docs-nav .toc .toc a{font:12.5px/1.5 var(--mono);padding:3px 8px}
.docs-nav .res{margin-top:22px;padding-top:14px;border-top:1px solid var(--line)}
.docs-nav .res a{font-size:13px;color:var(--muted);padding:4px 10px}

@media(max-width:900px){
  .docs{grid-template-columns:1fr;gap:0;padding:18px 0 64px}
  .docs-side{position:static;max-height:none;overflow:visible;padding:0;margin-bottom:22px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
  .docs-toc-btn{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:0 14px;border:0;background:transparent;font:700 14px var(--body);color:var(--ink);cursor:pointer;text-align:left}
  .docs-toc-btn span{font-weight:400;color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .docs-toc-btn:after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin:-4px 4px 0 auto;flex:none}
  .docs-toc-btn[aria-expanded="true"]:after{transform:rotate(-135deg);margin-top:4px}
  .docs-nav{display:none;padding:0 8px 12px;border-top:1px solid var(--line2)}
  .docs-nav.open{display:block}
}

/* ---------- ページの頭 ---------- */
.docs-head{margin:0 0 30px}
.docs-h1{font:900 clamp(30px,3.4vw,44px)/1.28 var(--head);letter-spacing:-.02em;margin:10px 0 16px;color:var(--ink);text-wrap:balance}
.docs-head .lead{max-width:46em}
.docs-head .checks{margin-top:16px}
.docs-meta{font-size:12.5px;color:var(--muted);margin:14px 0 0}
.docs-meta a{color:var(--green)}

/* 見出しへのリンク(docs.js が付ける) */
.prose h2,.prose h3{position:relative;text-wrap:pretty}
.anchor{margin-left:.35em;font:600 .7em var(--num);color:var(--faint);text-decoration:none;opacity:0;transition:opacity .15s}
h2:hover>.anchor,h3:hover>.anchor,.anchor:focus-visible{opacity:1}
.anchor:hover{color:var(--green)}
.prose h2{padding-top:6px;border-top:1px solid var(--line)}
.prose .sec-first{border-top:0;margin-top:8px}
.prose h4{font:700 15px/1.5 var(--body);color:var(--ink);margin:22px 0 6px}
.prose strong,.prose b{color:var(--ink)}
.prose .table{font-size:14px}
.prose .table td code,.prose .table th code{font-size:12.5px}
.prose ol li::marker{font-family:var(--num);font-weight:600;color:var(--green)}
.prose .note{font-size:13.5px;color:var(--muted)}
.prose .note a{color:var(--green)}
.prose hr{border:0;border-top:1px solid var(--line);margin:34px 0}
.prose .lead-in{font-size:17px;color:var(--ink)}

/* ---------- 前後のページ ---------- */
.docs-pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:64px;padding-top:24px;border-top:1px solid var(--line)}
.docs-pager a{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;text-decoration:none;background:var(--card);min-width:0}
.docs-pager a:hover{border-color:var(--green)}
.docs-pager a[rel="next"]{grid-column:2;text-align:right}
.docs-pager small{font-size:12px;color:var(--muted)}
.docs-pager b{color:var(--green);font-size:15px}
@media(max-width:480px){.docs-pager{grid-template-columns:1fr}.docs-pager a[rel="next"]{grid-column:1}}

/* ---------- 明るい地のコピー枠(出典文・貼る1文) ---------- */
.copybox{position:relative;border:1px solid var(--line);border-left:4px solid var(--green);background:var(--card);border-radius:10px;padding:14px 96px 14px 16px;margin:10px 0 16px;font-size:15px;line-height:1.75;color:var(--ink);overflow-wrap:anywhere}
.copybox .lbl{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:2px}
.copybox .copy{border-color:var(--line);background:var(--paper);color:var(--ink)}
.copybox .copy:hover{border-color:var(--green);color:var(--green)}
.copybox .copy.done{background:var(--lime);border-color:var(--lime);color:#10291f}
.copybox pre{margin:0;font:13px/1.7 var(--mono);white-space:pre-wrap}
@media(max-width:480px){.copybox{padding:46px 14px 14px}}

/* ---------- 事実の一覧(項目: 値) ---------- */
.facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:0;border:1px solid var(--line);border-radius:12px;background:var(--card);margin:12px 0 18px;overflow:hidden;font-size:14.5px}
.facts dt,.facts dd{margin:0;padding:10px 14px;border-bottom:1px solid var(--line2)}
.facts dt{font-weight:700;color:var(--ink);background:var(--paper2)}
.facts dd{color:var(--ink2);min-width:0}
.facts dt:last-of-type,.facts dd:last-of-type{border-bottom:0}
@media(max-width:560px){.facts{grid-template-columns:1fr}.facts dt{border-bottom:0;padding-bottom:2px}.facts dd{padding-top:2px}}

/* ---------- 手順(番号つき) ---------- */
.prose .steps,.steps{list-style:none;margin:14px 0 18px;padding:0;display:grid;gap:12px;counter-reset:st}
.steps>li{position:relative;padding:2px 0 2px 44px;margin:0;counter-increment:st;min-width:0}
.steps>li:before{content:counter(st);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--green);color:var(--paper);font:700 14px/30px var(--num);text-align:center}
.steps>li>b:first-child{display:block;color:var(--ink);font-weight:700}
.steps .code{margin:8px 0 4px}

/* ---------- 選んで進むカード ---------- */
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0 18px}
.ways a{display:flex;flex-direction:column;gap:4px;padding:16px 16px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);text-decoration:none;color:var(--ink2);font-size:14px;line-height:1.65}
.ways a:hover{border-color:var(--green)}
.ways a b{font:900 18px/1.4 var(--head);color:var(--ink)}
.ways a small{font:700 11px var(--num);letter-spacing:.14em;color:var(--green)}
.ways a .go{margin-top:auto;padding-top:6px;color:var(--green);font-weight:700}
@media(max-width:760px){.ways{grid-template-columns:1fr}}

/* ---------- クイックスタートの窓(暗い地) ---------- */
.console{background:var(--dark);border-radius:var(--r-lg);padding:6px 14px 14px;box-shadow:var(--shadow-lg);margin:16px 0 20px;color:var(--dark-ink)}
.console .tabs{margin-bottom:10px}
.console .code{background:var(--dark2);margin:0}
.console .out{margin-top:10px}
.console .out-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--dark-muted);padding:2px 2px 6px}
.console .out-head a{color:var(--lime);font-family:var(--mono);text-decoration:none}
.console .out-head a:hover{text-decoration:underline}
.console .live{display:inline-flex;align-items:center;gap:7px;color:var(--lime)}
.console .live:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime)}
.console .live.off{color:var(--dark-muted)}
.console .live.off:before{background:var(--dark-muted)}
.console .out .code{max-height:420px;overflow:auto}
.console p{font-size:13px;color:var(--dark-muted);margin:8px 2px 0}
.console p code{background:#ffffff14;color:#e5efea}

/* ---------- APIリファレンス ---------- */
.method{display:inline-block;font:700 11.5px/1.6 var(--num);letter-spacing:.06em;padding:1px 8px;border-radius:6px;background:var(--green-bg);color:var(--green);vertical-align:2px}
.method.post{background:var(--blue-bg);color:var(--blue)}
.ep{border-top:1px solid var(--line);margin-top:38px;padding-top:6px}
.prose .ep>h3{font:700 19px/1.5 var(--mono);margin:22px 0 4px;overflow-wrap:anywhere;letter-spacing:-.01em}
.prose .ep>h3 .method{font-size:12px;margin-right:8px}
.ep-sum{font:900 17px/1.5 var(--head);color:var(--ink);margin:0 0 8px}
.ep-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--muted);margin:0 0 10px}
.ep-meta code{font-size:12px}
.prose .ep h4{font-size:14px;color:var(--muted);letter-spacing:.04em;margin:20px 0 6px}
.params td:first-child{white-space:nowrap}
.params td:first-child code{font-weight:700;background:transparent;padding:0}
.params .req{display:inline-block;margin-left:6px;font:700 10.5px var(--body);color:var(--ink);border:1px solid var(--ink2);border-radius:4px;padding:0 4px;vertical-align:1px}
.params .dep{color:var(--muted)}
.params .sub{font-size:12.5px;color:var(--muted);display:block;margin-top:2px}
.params td:nth-child(2){white-space:nowrap;font-size:13px;color:var(--muted)}
.resp-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin:12px 0 4px}
.resp-head a{color:var(--green);font-family:var(--mono);font-size:12px}
.prose .resp .code{margin-top:0;max-height:460px;overflow:auto}
.ep-note{font-size:13.5px;color:var(--ink2)}
details.more{border:1px solid var(--line);border-radius:10px;background:var(--card);margin:10px 0}
details.more>summary{cursor:pointer;padding:9px 14px;font-weight:700;font-size:14px;color:var(--ink);list-style-position:inside}
details.more>summary::marker{color:var(--green)}
details.more[open]>summary{border-bottom:1px solid var(--line2)}
details.more>.in{padding:10px 14px 4px}
details.more .table-wrap{margin:4px 0 10px;border:0;border-radius:0}
details.more .table{font-size:13px}
.fieldpath{font:12.5px var(--mono);white-space:nowrap;color:var(--ink)}
.prose td.t{white-space:nowrap}
/* スマホ: パラメータとフィールドの表は1行ずつ縦に積む(名前・場所・型を1行目、説明を2行目) */
@media(max-width:640px){
  .prose .params thead,.prose .fields thead{display:none}
  .prose .params,.prose .params tbody,.prose .params tr,.prose .fields,.prose .fields tbody,.prose .fields tr{display:block;width:100%}
  .prose .params tr,.prose .fields tr{padding:10px 12px;border-bottom:1px solid var(--line2)}
  .prose .params tr:last-child,.prose .fields tr:last-child{border-bottom:0}
  .prose .params td,.prose .fields td{display:inline;border:0;padding:0;white-space:normal}
  .prose .params td:nth-child(2),.prose .params td:nth-child(3),.prose .fields td:nth-child(2){margin-left:8px;font-size:12px;color:var(--muted)}
  .prose .params td:last-child,.prose .fields td:last-child{display:block;margin-top:4px}
  .prose .params td:last-child:empty,.prose .fields td:last-child:empty{display:none}
}
.prose .statuses,.statuses{list-style:none;padding:0;margin:4px 0 8px;display:grid;gap:4px;font-size:13.5px}
.statuses b{font:700 13px var(--num);display:inline-block;min-width:3em;color:var(--ink)}

/* ---------- 一致率などのメーター(1色・値は文字で出す) ---------- */
.prose .meters,.meters{list-style:none;margin:14px 0 8px;padding:16px 18px;display:grid;gap:12px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.meters li{margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:baseline;font-size:14px;color:var(--ink2)}
.meters b{font:600 16px var(--num);color:var(--ink)}
.meters .track{grid-column:1/-1;position:relative;height:8px;border-radius:4px;background:var(--line2);overflow:hidden}
.meters .track i{position:absolute;top:0;bottom:0;left:0;border-radius:4px;background:var(--green)}
.meters .track i.range{background:color-mix(in srgb,var(--green) 40%,transparent);border-radius:0 4px 4px 0}