/*
 * `/docs/api` 的样式。
 *
 * 只用 `tokens.css` 已有的槽位：不新造色值，没有渐变。排版尺寸也走槽位
 * （`docs.css` 里还有裸 px 是历史遗留，新文件不跟随）。
 */
:root{font-family:var(--font-sans);color:var(--c-text);background:var(--c-canvas);letter-spacing:0}
*{box-sizing:border-box}
body{margin:0;min-width:320px}
button,input{font:inherit}
button{cursor:pointer}
a{color:var(--c-brand-ink)}
[hidden]{display:none!important}
code{font-family:var(--font-mono);font-size:.95em;overflow-wrap:anywhere}

.topbar{height:64px;background:var(--c-surface);border-bottom:1px solid var(--c-border);display:flex;align-items:center;justify-content:space-between;padding:0 var(--s-6);position:sticky;top:0;z-index:2}
.brand{display:flex;align-items:center;gap:var(--s-3);color:var(--c-brand-ink-strong);text-decoration:none;font-weight:700;font-size:var(--fs-base)}
.brand strong{color:var(--c-text)}
.brand-mark{display:grid;place-items:center;background:var(--c-brand);color:var(--c-on-brand);width:29px;height:29px;border-radius:var(--r-md);font-size:var(--fs-md)}
.back{font-size:var(--fs-body);font-weight:650;text-decoration:none}
.back:hover{text-decoration:underline}

/* ---- 两栏：左侧目录常驻，右侧正文 ---- */
.shell{display:grid;grid-template-columns:232px minmax(0,1fr);gap:var(--s-7);max-width:1200px;margin:auto;padding:var(--s-7) var(--s-6) var(--s-8)}
.toc{position:sticky;top:calc(64px + var(--s-6));align-self:start;max-height:calc(100vh - 64px - var(--s-8));overflow-y:auto}
.toc-title{font-size:var(--fs-2xs);font-weight:750;color:var(--c-eyebrow);margin:0 0 var(--s-3)}
.toc ol{list-style:none;counter-reset:toc;margin:0;padding:0}
.toc li{counter-increment:toc}
.toc a{display:block;padding:var(--s-1) 0 var(--s-1) var(--s-7);font-size:var(--fs-body);color:var(--c-text-muted);text-decoration:none;line-height:var(--lh-snug);position:relative;border-left:2px solid var(--c-border-subtle)}
.toc a::before{content:counter(toc,decimal-leading-zero);position:absolute;left:var(--s-3);font-size:var(--fs-3xs);color:var(--c-text-faint);top:var(--s-1)}
.toc a:hover{color:var(--c-brand-ink);border-left-color:var(--c-brand-border)}

main{min-width:0}
.heading{display:flex;align-items:start;justify-content:space-between;gap:var(--s-5);padding-bottom:var(--s-6);border-bottom:1px solid var(--c-border)}
.eyebrow{font-size:var(--fs-2xs);font-weight:750;color:var(--c-eyebrow);margin:0 0 var(--s-2)}
.heading h1{font-size:var(--fs-3xl);line-height:var(--lh-tight);margin:0}
.intro{font-size:var(--fs-sm);color:var(--c-text-muted);margin:var(--s-2) 0 0;line-height:var(--lh-loose);max-width:62ch}
.mode-badge{border:1px solid var(--c-brand-border);color:var(--c-brand-ink);background:var(--c-brand-surface);padding:var(--s-1) var(--s-2);border-radius:var(--r-sm);font-size:var(--fs-2xs);white-space:nowrap}
.load-error{border-left:3px solid var(--c-danger);background:var(--c-danger-surface);padding:var(--s-3) var(--s-4);color:var(--c-danger-ink);font-size:var(--fs-body);line-height:var(--lh-base);margin:var(--s-5) 0 0}

.section{display:grid;grid-template-columns:42px minmax(0,1fr);gap:var(--s-5);padding:var(--s-7) 0;border-bottom:1px solid var(--c-border);scroll-margin-top:calc(64px + var(--s-4))}
.section-number{font-size:var(--fs-xs);font-weight:750;color:var(--c-brand);padding-top:var(--s-1)}
.section-body{min-width:0;max-width:78ch}
.section h2{font-size:var(--fs-lg);margin:0 0 var(--s-4)}
.section h3{font-size:var(--fs-base);margin:var(--s-6) 0 var(--s-2);color:var(--c-text)}
.section h4{font-size:var(--fs-sm);margin:var(--s-4) 0 var(--s-2);color:var(--c-text)}
.section p,.section li,.section dd{font-size:var(--fs-body);line-height:var(--lh-loose);color:var(--c-text-muted)}
.section p{margin:0 0 var(--s-4)}
.section ul,.section ol{padding-left:var(--s-5);margin:0 0 var(--s-4)}
.section li+li{margin-top:var(--s-2)}
.section strong{color:var(--c-text)}
.hint{font-size:var(--fs-xs)!important;color:var(--c-text-faint)!important;margin:var(--s-2) 0 var(--s-4)!important}

.callout{border-left:3px solid var(--c-warn);background:var(--c-warn-surface);padding:var(--s-3) var(--s-4);color:var(--c-warn-ink)!important;font-size:var(--fs-body);line-height:var(--lh-base);margin:0 0 var(--s-4)!important}
.callout strong{color:var(--c-warn-ink)}
:root .panel-note{border-left:3px solid var(--c-brand-border);background:var(--c-brand-surface);padding:var(--s-3) var(--s-4);color:var(--c-brand-ink);font-size:var(--fs-xs);line-height:var(--lh-base);margin:0 0 var(--s-4)}
:root .panel-note strong{color:var(--c-brand-ink-strong)}

.defs{margin:0 0 var(--s-4)}
.defs dt{font-size:var(--fs-sm);font-weight:700;color:var(--c-text);margin:var(--s-4) 0 var(--s-1)}
.defs dd{margin:0}

/* ---- 表格：生成的清单全部用它 ---- */
table{border-collapse:collapse;width:100%;margin:0 0 var(--s-4);font-size:var(--fs-xs);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md)}
caption{text-align:left;font-size:var(--fs-xs);color:var(--c-text-faint);padding:0 0 var(--s-2)}
th,td{text-align:left;padding:var(--s-2) var(--s-3);border-bottom:1px solid var(--c-border-subtle);vertical-align:top;line-height:var(--lh-snug)}
th{font-weight:700;color:var(--c-text);background:var(--c-surface-muted);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td code{color:var(--c-text-strong)}
/* 标识符不在中间断行；长 URL（含 `/`）仍然允许断，否则表格会被撑破。 */
.tok{white-space:nowrap}
.sub{padding-left:var(--s-4);color:var(--c-text-faint)}

.endpoint{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;background:var(--c-code-bg);border-radius:var(--r-md);padding:var(--s-4);margin:0 0 var(--s-4)}
.endpoint code{color:var(--c-code-ink);font-size:var(--fs-base);font-weight:650;flex:1 1 320px;overflow-wrap:anywhere}
.endpoint button{background:var(--c-surface);border:0;border-radius:var(--r-sm);color:var(--c-brand-ink);padding:var(--s-2) var(--s-4);font-size:var(--fs-body);font-weight:700;white-space:nowrap}
.endpoint button:hover{background:var(--c-brand-surface)}

.code-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-top:var(--s-4);padding:var(--s-2) var(--s-3);background:var(--c-surface-sunken);border:1px solid var(--c-border);border-bottom:0;border-radius:var(--r-md) var(--r-md) 0 0;font-size:var(--fs-xs);font-weight:650;color:var(--c-text-muted)}
.code-heading span{overflow-wrap:anywhere}
.code-heading button{background:var(--c-surface);border:1px solid var(--c-brand-border);border-radius:var(--r-sm);color:var(--c-brand-ink);padding:var(--s-1) var(--s-2);font-size:var(--fs-xs);white-space:nowrap}
.code-block{background:var(--c-code-bg);color:var(--c-code-ink);border-radius:var(--r-md);overflow-x:auto;margin:0 0 var(--s-4)}
.code-heading+.code-block{border-radius:0 0 var(--r-md) var(--r-md)}
.code-block pre{margin:0;padding:var(--s-4);font-size:var(--fs-xs);line-height:var(--lh-base);white-space:pre;tab-size:2}
.code-block code{overflow-wrap:normal;color:var(--c-code-ink)}

/* ---- 工具目录 ---- */
.tool-index{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0 0 var(--s-5);padding:0;list-style:none}
.tool-index a{display:inline-block;border:1px solid var(--c-border);background:var(--c-surface);border-radius:var(--r-sm);padding:var(--s-1) var(--s-2);font-family:var(--font-mono);font-size:var(--fs-xs);text-decoration:none}
.tool-index a:hover{border-color:var(--c-brand-border);background:var(--c-brand-surface)}
.tool{border:1px solid var(--c-border);border-radius:var(--r-md);background:var(--c-surface);padding:var(--s-5);margin:0 0 var(--s-5);scroll-margin-top:calc(64px + var(--s-4))}
.tool-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-2)}
.tool-head h4{font-family:var(--font-mono);font-size:var(--fs-base);margin:0;color:var(--c-text-strong)}
.tool-scope{border:1px solid var(--c-brand-border);background:var(--c-brand-surface);color:var(--c-brand-ink);border-radius:var(--r-sm);padding:var(--s-1) var(--s-2);font-size:var(--fs-2xs);font-family:var(--font-mono);white-space:nowrap}
.tool-title{font-size:var(--fs-body);color:var(--c-text);margin:0 0 var(--s-2)}
.tool-desc{font-size:var(--fs-xs);color:var(--c-text-muted);line-height:var(--lh-loose);margin:0 0 var(--s-3)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-1);margin:0 0 var(--s-3);padding:0;list-style:none}
.chips li{background:var(--c-chip-bg);color:var(--c-chip-ink);border-radius:var(--r-sm);padding:var(--s-1) var(--s-2);font-size:var(--fs-2xs);font-family:var(--font-mono)}
.tool table{margin-bottom:var(--s-2)}
.tool-none{font-size:var(--fs-xs);color:var(--c-text-faint);margin:0 0 var(--s-2)}

.page-footer{padding:var(--s-6) 0 0}
.page-footer p{font-size:var(--fs-body);color:var(--c-text-muted);margin:0}

@media(max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr);gap:var(--s-4);padding:var(--s-5) var(--s-4) var(--s-7)}
  .toc{position:static;max-height:none;border-bottom:1px solid var(--c-border);padding-bottom:var(--s-4)}
  .toc ol{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-3)}
  .toc a{border-left:0;padding-left:var(--s-4)}
  .toc a::before{left:0}
}
@media(max-width:600px){
  .topbar{height:56px;padding:0 var(--s-4)}
  .heading h1{font-size:var(--fs-2xl)}
  .section{grid-template-columns:minmax(0,1fr);gap:var(--s-1);padding:var(--s-6) 0}
  .section h2{font-size:var(--fs-md)}
  table{font-size:var(--fs-2xs)}
  .code-block pre{font-size:var(--fs-2xs)}
}