/*
 * 接入说明页（/docs）的样式表。
 *
 * 字号、行高、间距、圆角、色值全部取 tokens.css 的槽位（P3 · 2026-11-01 把本文件补齐；
 * 在那之前整个文件都是裸 px）。字号是一一对应搬过去的，外观不变；内边距与行高按 4px
 * 栅格就近归并，外观会动。新规则别再写裸 px——test/visual-tokens.test.mjs 会拦。
 */
: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)}.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 max(var(--s-6),calc((100vw - 1040px)/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}main{max-width:1040px;margin:auto;padding:var(--s-8) var(--s-6) calc(var(--s-8)*2)}.heading{display:flex;align-items:start;justify-content:space-between;gap:var(--s-5);padding-bottom:var(--s-7);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-base)}.sandbox{border:1px solid var(--c-brand-border);color:var(--c-brand-ink);background:var(--c-brand-surface);padding:var(--s-2);border-radius:var(--r-sm);font-size:var(--fs-2xs);white-space:nowrap}.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)}.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:840px}.section h2{font-size:var(--fs-lg);margin:0 0 var(--s-4)}.section p,.section li{font-size:var(--fs-body);line-height:var(--lh-loose);color:var(--c-text-muted)}.section p{margin:0 0 var(--s-4)}.section ol{padding-left:var(--s-5);margin:0 0 var(--s-5)}.section li+li{margin-top:var(--s-2)}code{font-family:var(--font-mono);font-size:.95em;overflow-wrap:anywhere}.path-label{display:block;font-size:var(--fs-body);font-weight:650;margin:var(--s-6) 0 var(--s-2)}#project-path{width:100%;border:1px solid var(--c-field-border);border-radius:var(--r-sm);padding:var(--s-3);background:var(--c-surface);color:var(--c-text);font-size:var(--fs-body)}#project-path:focus{outline:2px solid var(--c-brand-focus);outline-offset:1px}.hint{font-size:var(--fs-xs)!important;color:var(--c-text-faint)!important;margin:var(--s-3) 0 0!important}.tabs{display:flex;gap:var(--s-1);border-bottom:1px solid var(--c-border);overflow-x:auto;margin-top:var(--s-2)}.tabs button{border:0;border-bottom:2px solid transparent;background:transparent;padding:var(--s-3) var(--s-4);color:var(--c-text-muted);font-size:var(--fs-body);white-space:nowrap}.tabs button[aria-selected="true"]{border-color:var(--c-brand);color:var(--c-brand-ink);font-weight:700}#client-panel{padding-top:var(--s-5)}.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-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}.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-loose);white-space:pre;tab-size:2}.code-block code{overflow-wrap:normal}.notice{border-left:3px solid var(--c-warn);background:var(--c-warn-surface);padding:var(--s-3) var(--s-4);color:var(--c-warn-ink);font-size:var(--fs-xs);line-height:var(--lh-loose)}@media(max-width:600px){.topbar{height:56px;padding:0 var(--s-4)}main{padding:var(--s-6) var(--s-4) calc(var(--s-7)*2)}.heading{padding-bottom:var(--s-6)}.heading h1{font-size:var(--fs-2xl)}.sandbox{font-size:var(--fs-3xs)}.section{grid-template-columns:1fr;gap:var(--s-2);padding:var(--s-6) 0}.section h2{font-size:var(--fs-md)}.tabs button{padding:var(--s-3);font-size:var(--fs-xs)}.code-block pre{font-size:var(--fs-2xs);padding:var(--s-4)}}
:root .download{display:inline-block;background:var(--c-brand);color:var(--c-on-brand);text-decoration:none;border-radius:var(--r-sm);padding:var(--s-3) var(--s-4);font-size:var(--fs-body);font-weight:650;margin:0 0 var(--s-4)}:root .download:hover{background:var(--c-brand-hover)}
[hidden]{display:none!important}.activation{border-top:1px solid var(--c-border);margin-top:var(--s-6);padding-top:var(--s-5)}.activation h3{font-size:var(--fs-base);margin:0 0 var(--s-3)}.activation ol{margin:0 0 var(--s-3);padding-left:var(--s-5)}.activation strong{color:var(--c-text)}
.client-choice{padding:var(--s-4) 0 0;border-bottom:1px solid var(--c-border)}.client-choice h2{font-size:var(--fs-body);margin:0 0 var(--s-2);color:var(--c-text-muted)}.client-choice .tabs{border:0;margin:0}
.alert{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-loose);margin:var(--s-6) 0 0}.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)}.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)}.platform{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;margin:0 0 var(--s-4)}.platform>span{font-size:var(--fs-xs);font-weight:650;color:var(--c-text-muted);margin-right:var(--s-1)}.platform button{border:1px solid var(--c-brand-border);border-radius:var(--r-sm);background:var(--c-surface);color:var(--c-text-muted);padding:var(--s-2) var(--s-3);font-size:var(--fs-xs);white-space:nowrap}.platform button[aria-pressed="true"]{border-color:var(--c-brand);background:var(--c-brand-surface);color:var(--c-brand-ink);font-weight:700}.dev-body .platform{margin:var(--s-2) 0 var(--s-1)}
/* `:root` 只为压过 `.section p`（0,1,1）：面板注记有一份在第 02 步的 section 里，不加前缀字号/外边距会被盖掉。与上面 `:root .download` 同一手法。 */
: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-loose);margin:var(--s-4) 0 0}
.dev{margin-top:var(--s-7);border:1px solid var(--c-border);border-radius:var(--r-md);background:var(--c-surface)}.dev>summary{cursor:pointer;padding:var(--s-4);font-size:var(--fs-body);font-weight:700;color:var(--c-text-muted);list-style:revert}.dev>summary::marker{color:var(--c-text-faint)}.dev[open]>summary{border-bottom:1px solid var(--c-border)}.dev-body{padding:var(--s-1) var(--s-4) var(--s-6)}.dev-body h3{font-size:var(--fs-sm);margin:var(--s-5) 0 var(--s-3)}.dev-body p{font-size:var(--fs-body);line-height:var(--lh-loose);color:var(--c-text-muted)}.dev-select{display:block;margin-top:var(--s-2);border:1px solid var(--c-field-border);border-radius:var(--r-sm);padding:var(--s-2) var(--s-3);background:var(--c-surface);font-size:var(--fs-body);color:var(--c-text)}#dev-token{width:100%;border:1px solid var(--c-field-border);border-radius:var(--r-sm);padding:var(--s-3);background:var(--c-surface);color:var(--c-text);font-size:var(--fs-body)}#dev-token:focus{outline:2px solid var(--c-brand-focus);outline-offset:1px}.steps li strong{color:var(--c-text)}

/* 第 03 步里的子小节标题。用 --fs-base（15px），与隔壁 .activation h3 的字号一致。 */
.section-body h3{font-size:var(--fs-base);margin:var(--s-6) 0 var(--s-2);color:var(--c-text)}