/* vconfig.ai shared shell: design tokens, top navigation, buttons.
   Loaded by BOTH the Flask site (templates/base.html) and the MkDocs docs
   (mkdocs overrides/main.html), so the docs header is the real site header
   rather than a second copy that drifts. Anything here must be safe to drop
   into MkDocs Material: no `body`/`html` layout rules, no global resets. */

:root {
  --brand: #0969da;
  --brand-2: #0891b2;
  --brand-3: #7c3aed;
  --brand-hover: #0550ae;
  --brand-soft: rgba(9, 105, 218, .08);
  --bg: #ffffff;
  --bg-soft: #f6f8fa;
  --bg-card: #ffffff;
  --bg-elev: #ffffff;
  --border: #d8dee4;
  --border-soft: #e8ecf0;
  --text: #1f2328;
  --text-2: #59636e;
  --ok: #1a7f37;
  --warn: #b35900;
  --bad: #c93c37;
  --shadow: 0 1px 3px rgba(16,24,40,.07), 0 12px 32px rgba(16,24,40,.08);
  --shadow-lg: 0 4px 12px rgba(16,24,40,.08), 0 24px 64px rgba(16,24,40,.12);
  --glow: 0 0 0 rgba(0,0,0,0);
  --radius: 14px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  /* 配置面板（首页"配置即事实"那张示意图）的四个色。
     原来直接写死 #0b1120/#8b98ab/#22d3ee/#3fb950，浅色模式下整块还是深的，
     嵌在白卡片里像一块没加载出来的图。示意图不是终端，没有"必须深色"的理由。 */
  --code-bg: #ffffff;
  --code-fg: #57606a;
  --code-hl: #0550ae;
  --code-ok: #1a7f37;
  --grid-line: rgba(9, 105, 218, .06);
  /* Checkbox / radio tokens. The control itself lives in site.css (Flask pages
     only) — deliberately NOT here, because this file is also pulled into the
     MkDocs docs, where Material hides its drawer/search toggles with
     `.md-toggle{display:none}`; a global input[type=checkbox] rule would beat
     that and expose them. Tokens are inert, so they are safe to share.
     Mirrors the product UI (vConfig style.css --check-*): change these to
     restyle every checkbox on the site at once. */
  --check-size: 16px;
  --check-radius: 5px;
  --check-bg: var(--bg);
  --check-border: var(--border);
  --check-on-bg: var(--brand);
  --check-on-fg: #fff;
  --check-glow: 0 1px 4px color-mix(in srgb, var(--brand) 38%, transparent);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --code-bg: #0b1120;
    --code-fg: #8b98ab;
    --code-hl: #22d3ee;
    --code-ok: #3fb950;
    --brand: #00b5ff;
    --brand-2: #22d3ee;
    --brand-3: #a78bfa;
    --brand-hover: #27c5ff;
    --brand-soft: rgba(0, 181, 255, .10);
    --bg: #070b14;
    --bg-soft: #0c1220;
    --bg-card: rgba(18, 26, 43, .72);
    --bg-elev: #121a2b;
    --border: #223046;
    --border-soft: #1a2537;
    --text: #e8eef6;
    --text-2: #8b98ab;
    --ok: #3fb950;
    --warn: #d29922;
    --bad: #f85149;
    --shadow: 0 1px 3px rgba(0,0,0,.5), 0 16px 48px rgba(0,0,0,.45);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.5), 0 32px 96px rgba(0,0,0,.55);
    --glow: 0 0 48px rgba(0, 181, 255, .14);
    --grid-line: rgba(0, 181, 255, .05);
    /* Near-black tick: on the dark theme --brand is a bright cyan, and a
       white tick sits at ~2.4:1 against it — it smears. This is ~9:1. */
    --check-on-fg: #04121f;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --code-bg: #0b1120;
  --code-fg: #8b98ab;
  --code-hl: #22d3ee;
  --code-ok: #3fb950;
  --brand: #00b5ff;
  --brand-2: #22d3ee;
  --brand-3: #a78bfa;
  --brand-hover: #27c5ff;
  --brand-soft: rgba(0, 181, 255, .10);
  --bg: #070b14;
  --bg-soft: #0c1220;
  --bg-card: rgba(18, 26, 43, .72);
  --bg-elev: #121a2b;
  --border: #223046;
  --border-soft: #1a2537;
  --text: #e8eef6;
  --text-2: #8b98ab;
  --ok: #3fb950;
  --warn: #d29922;
  --bad: #f85149;
  --shadow: 0 1px 3px rgba(0,0,0,.5), 0 16px 48px rgba(0,0,0,.45);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.5), 0 32px 96px rgba(0,0,0,.55);
  --glow: 0 0 48px rgba(0, 181, 255, .14);
  --grid-line: rgba(0, 181, 255, .05);
  /* Near-black tick — see the note in the auto-dark block above. */
  --check-on-fg: #04121f;
  color-scheme: dark;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
/* 版面宽度。原来硬限 1160px——1920 屏上内容只占 60%，2560 屏只占 45%，
   两侧各空 380~700px。改成随视口伸缩、始终占约 90%，超宽屏留一个上限
   兜底（再宽下去截图会被拉到失真，而且眼睛要横扫半米）。

   【版面宽度 ≠ 正文行宽】拉满版面让截图、网格、表格受益；正文行宽另有约束
   （见 site.css 的 .split / .sec-head / .prose），否则一行三十几个词没人读得下去。 */
.container { width: 100%; max-width: 2040px; margin: 0 auto;
             padding: 0 clamp(20px, 5vw, 110px); }

/* ---------- nav ---------- */
/* ---------- nav ---------- */
.nav-wrap {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--border-soft);
}
.nav { display: flex; align-items: center; gap: 26px; height: 62px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 17.5px; letter-spacing: -.01em; color: var(--text) !important; text-decoration: none !important; }
.nav-links { display: flex; align-items: center; gap: 22px; flex: 1; }
.nav-links > a { color: var(--text-2); font-weight: 500; font-size: 14px; transition: color .15s; }
.nav-links > a:hover, .nav-links > a.active { color: var(--text); text-decoration: none; }
.nav-spacer { flex: 1; }
.nav-burger { display: none; background: none; border: 0; color: var(--text); cursor: pointer; padding: 6px; }
.lang-toggle { font-size: 13px; font-weight: 600; border: 1px solid var(--border); border-radius: 999px; padding: 3px 12px; color: var(--text-2) !important; transition: all .15s; }
.lang-toggle:hover { color: var(--text) !important; text-decoration: none; border-color: var(--text-2); }
.theme-toggle { background: none; border: 1px solid var(--border); border-radius: 999px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-2); cursor: pointer; transition: all .15s; }
.theme-toggle:hover { color: var(--text); border-color: var(--text-2); }
:root[data-theme="dark"] .ic-moon { display: none; }
:root[data-theme="light"] .ic-sun { display: none; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .ic-moon { display: none; } }
@media (prefers-color-scheme: light) { :root[data-theme="auto"] .ic-sun { display: none; } }


/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 11px; padding: 10px 22px; font-size: 14px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; text-decoration: none !important;
  transition: all .18s;
}
.btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff !important;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--brand) 35%, transparent);
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 4px 20px color-mix(in srgb, var(--brand) 45%, transparent); transform: translateY(-1px); }
.btn-ghost { border-color: var(--border); color: var(--text) !important; background: var(--bg-card); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand) !important; }
.btn-lg { padding: 13px 28px; font-size: 15px; border-radius: 13px; }
.btn-nav { padding: 7px 16px; border-radius: 9px; }

/* mobile nav
   【断点这个数字必须实测，不能拍】折叠成汉堡的宽度必须 ≥ 展开态真正需要的宽度，
   否则中间会留一段"没折叠但已经放不下"的窗口——曾经断点 900px、英文实际要 1022px，
   901–1021px 之间整条导航横向溢出、页面被撑宽 115px，而这个区间桌面和手机都看不到。
   顶栏「快速开始」按钮去掉后重新量：英文 911px、中文 861px（英文标签更长，按英文定），
   故降到 950px。继续留在 1040px 的话，汉堡会白白早出现。
   量的时候**不要注入 CSS 去关掉折叠**——把 .nav-links 的 padding 一起归零，
   量到的是一条并不存在的导航（当时得出 804px，实际线上 861–900px 仍在溢出）。
   正确做法：在断点之上的区间里直接二分，那里导航本来就是展开的。
   **动导航里的项就要重新量这个值**，不能凭感觉留余量。 */
@media (max-width: 950px) {
  .nav-burger { display: block; margin-left: auto; }
  .nav-links { display: none; position: absolute; top: 62px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; background: var(--bg);
    border-bottom: 1px solid var(--border); padding: 16px 24px; gap: 14px; }
  .nav-links.open { display: flex; }
  .nav-spacer { display: none; }
}