/* vp.css — Valpha 出格/展示页共享骨架（去重④）。各独立页 <link> 它，删掉内联重复的这几条。
   只放【8 页逐字节一致】的部分：灰底调色板 + box-sizing + a11y(focus/reduced-motion) + 语言按钮。
   页面特有的 --amber/--warn、body/h1/table/.card 等仍各自内联（口径不同，留各自）。
   同源自托管（随 web/→docs/ 镜像部署），不引境外 CDN——中国访客可达不受影响。 */
:root{--bg:#0d1117;--panel:#161b22;--border:#30363d;--fg:#e6edf3;--mut:#9da7b3;--grn:#3fb950;--red:#f85149;--acc:#c678dd}

/* ── 设计 token (ADDITIVE — 不改上方任何已有变量) ─────────────────────
   间距阶梯: --sp-1 6px / --sp-2 10px / --sp-3 14px / --sp-4 20px
   圆角:     --rad  10px（与各页面已用 8-10px 齐平）
   阴影:     --shadow  轻量面板投影
   用途: 新组件用 token; 旧页面可逐步迁移（不强制）。 */
:root{--sp-1:6px;--sp-2:10px;--sp-3:14px;--sp-4:20px;--rad:12px;--shadow:0 1px 2px rgba(0,0,0,.30),0 4px 16px rgba(0,0,0,.42)}
/* ⚠️ AFFECTS ALL PAGES (subtle, AA-safe — geometry/shadow only, no text-contrast change):
   --rad 10px→12px (Kraken "rounded-but-not-pill" container radius)
   --shadow → two-layer micro+ambient elevation (Kraken/Sentry dark pattern).
   See UI_POLISH_PROPOSAL.md → "⚠️ affects all pages". */

/* ── Valpha polish tokens (ADDITIVE — opt-in; no existing var renamed/recolored) ──
   Mined from awesome-design-md → Kraken (purple-accented dark, data-dense) + Sentry
   (dark-surface elevation / focus ring). Brand purple #7132f5 fails AA on our dark bg
   (≈3.0:1) → NOT used for text; we keep our brighter accent and add roles below.
   All accent tokens reuse --acc's RGB (163,113,247) to stay coherent on every page. */
:root{
  --acc-strong:#b483ff;            /* hi-emphasis accent text · 6.8:1 vs bg ✓AA */
  --acc-weak:rgba(163,113,247,.14);/* subtle accent fill (badge/hover wash) */
  --acc-line:rgba(163,113,247,.45);/* accent hairline / focus border */
  --surface-2:#1b222c;             /* nested/elevated card, one step over --panel */
  --grn-weak:rgba(63,185,80,.15);  /* success badge fill */
  --red-weak:rgba(248,81,73,.15);  /* down/error badge fill */
  --ring:0 0 0 3px rgba(163,113,247,.40); /* soft focus halo (Sentry pattern) */
  /* type ramp (system fonts only — same stack as pages) */
  --fs-micro:.72rem;--fs-cap:.82rem;--fs-body:.94rem;
  --fs-h3:1.05rem;--fs-h2:1.35rem;--fs-h1:1.7rem;
  --lh-tight:1.25;--lh-body:1.6;
  /* spacing extensions (existing --sp-1..4 untouched) */
  --sp-0:3px;--sp-5:28px;--sp-6:40px;
}

/* ── Additive utility components (no existing page references these yet) ──────────── */
.vp-card--hover{transition:border-color .14s,transform .14s,box-shadow .14s}
.vp-card--hover:hover{border-color:var(--acc-line);transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(0,0,0,.30),0 8px 24px rgba(0,0,0,.46)}

.vp-badge{display:inline-block;font-size:var(--fs-micro);font-weight:600;
  padding:2px 8px;border-radius:6px;background:var(--acc-weak);color:var(--acc-strong);
  border:1px solid var(--acc-line)}
.vp-badge--good{background:var(--grn-weak);color:var(--grn);border-color:rgba(63,185,80,.4)}
.vp-badge--bad{background:var(--red-weak);color:var(--red);border-color:rgba(248,81,73,.4)}
.vp-badge--neu{background:rgba(157,167,179,.12);color:var(--mut);border-color:var(--border)}

.vp-btn{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;font-weight:700;
  padding:8px 16px;border-radius:var(--rad);border:1px solid transparent;cursor:pointer;
  text-decoration:none;transition:opacity .14s,background .14s,border-color .14s}
.vp-btn--primary{background:var(--acc);color:#fff;border-color:var(--acc)}
.vp-btn--primary:hover{opacity:.88}
.vp-btn--ghost{background:transparent;color:var(--acc-strong);border-color:var(--acc-line)}
.vp-btn--ghost:hover{background:var(--acc-weak)}
.vp-btn:focus-visible{box-shadow:var(--ring)}

.vp-link{color:var(--acc-strong);text-decoration:none}
.vp-link:hover,.vp-link:focus{text-decoration:underline}
.vp-focus-ring:focus-visible{box-shadow:var(--ring)}

/* ── .vp-card — 通用卡片骨架 ────────────────────────────────────────
   panel 背景 + border + radius(--rad) + padding(--sp-3 --sp-4)。
   各页只需 class="vp-card" 即可，不必手写四条属性。
   宽度由父容器（grid/flex/block）控制，卡片本身不定宽。 */
.vp-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--rad);padding:var(--sp-3) var(--sp-4);box-shadow:var(--shadow)}
*{box-sizing:border-box}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
#lang{float:right;background:var(--panel);border:1px solid var(--border);color:var(--fg);border-radius:6px;padding:4px 10px;cursor:pointer;font-size:.82rem}

/* ── vp_gloss.js 词汇 tooltip ──────────────────────────────────
   .vp-term  带虚线下划线的术语标记（hover/focus/tap 显示 .vp-tip）
   .vp-tip   浮动说明气泡（定位在术语上方）
   颜色/字体复用调色板变量（--panel/--border/--fg/--mut/--acc）。
   prefers-reduced-motion 已在上方全局 transition:none 覆盖。 */
.vp-term{position:relative;display:inline;border-bottom:1px dotted var(--mut);cursor:help;white-space:normal}
.vp-tip{display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  background:var(--panel);border:1px solid var(--border);border-radius:8px;
  color:var(--fg);font-size:.78rem;line-height:1.45;
  padding:6px 10px;min-width:180px;max-width:260px;
  white-space:normal;text-align:left;pointer-events:none;
  box-shadow:0 4px 16px rgba(0,0,0,.55);z-index:900}
/* arrow */
.vp-tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--border)}
.vp-term:hover .vp-tip,
.vp-term:focus .vp-tip,
.vp-term:focus-within .vp-tip{display:block}
/* mobile tap: :focus-within handles touch after tap */
@media(hover:none){.vp-term:active .vp-tip{display:block}}

/* ── 两层呈现：顶一行大白话结论 + 折叠专业细节（v1.5「又专业又能看懂」）──────
   .vp-takeaway  默认显示的一句话结论（新手看这层就够）
   .vp-more      原生 <details>：默认收起，点 summary「展开看专业细节」（老手要的全套）
   零 JS、可访问、手机友好；颜色复用调色板。各页 <link vp.css> 即可复用。 */
.vp-takeaway{background:rgba(198,120,221,.1);border:1px solid var(--acc);border-radius:8px;padding:9px 12px;font-size:.9rem;line-height:1.55;margin:10px 0}
.vp-takeaway b{color:var(--fg)}
.vp-more{margin:8px 0;font-size:.85rem}
.vp-more>summary{cursor:pointer;color:var(--mut);padding:5px 2px;list-style:none;user-select:none}
.vp-more>summary::-webkit-details-marker{display:none}
.vp-more>summary::before{content:"▸ ";color:var(--acc);font-weight:700}
.vp-more[open]>summary::before{content:"▾ "}
.vp-more>summary:hover{color:var(--fg)}
.vp-more>summary:focus-visible{outline:2px solid var(--acc);outline-offset:2px}