/* ==========================================================================
   奕链 YiLink · V1 数据手册风（Datasheet）覆盖层
   用法：在 index.html 中把本文件挂在 instrument.css 之后加载即可，
        不需要改 DOM、不需要改 app.js。
        <link rel="stylesheet" href="assets/yilink-v1-datasheet.css">
   原则（与样机 v1-数据手册风.html 一致）：
     - 圆角只剩 0 / 2px，状态点等圆形元素除外
     - 阴影、渐变、光晕、毛玻璃全部关掉，层级只靠黑线与色块
     - 强调色 = 中性石墨灰（去彩色、降硬度）：浅色档 #3A3D39 / 深色档 #C9C7BE，
       不用纯黑 / 纯白，避免实心块或暗底上出现刺眼的高对比
       （主按钮是唯一的实心块：浅色档灰底纸字，深色档灰底墨字）
     - 数据 / 编号 / 标签一律等宽，正文保持无衬线
   回滚：删掉这一行 <link> 即恢复原样。
   ========================================================================== */

/* ---------- A. 令牌重映射 · 浅色 ---------- */
:root,
:root[data-theme="light"] {
  --radius: 2px;
  --radius-sm: 2px;
  --radius-xs: 2px;
  --radius-lg: 2px;
  --radius-xl: 2px;
  --radius-pill: 2px;

  --page-bg: #F6F5F0;
  --bg-0: #F6F5F0;
  --bg-1: #FCFCFA;
  --text: #171914;
  --muted: #55584F;
  --grid-line: rgba(23, 25, 20, 0.045);

  --glass-1: #FFFFFF;
  --glass-2: #FFFFFF;
  --glass-3: #FAF9F5;
  --glass-line: #DCD9CF;
  --glass-line-strong: #171914;
  --glass-hi: none;
  --glass-drop: none;
  --blur-1: none;
  --blur-2: none;
  --shell-bg: #ECEAE3;

  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --panel: #FFFFFF;
  --panel-strong: #F1EFE8;
  --line: #E0DED4;
  --line-strong: #171914;

  --ink-bg: #2B2E2C;
  --ink-tile: rgba(255, 255, 255, 0.06);
  --ink-text: #F0EFE9;
  --ink-muted: #9BA099;
  --ink-line: rgba(240, 239, 233, 0.16);
  --ink-accent: #D9DBD4;
  --ink-accent-soft: rgba(217, 219, 212, 0.14);
  --ink-danger: #FF8A72;

  /* 环境光彻底关掉：这是原站正文背后那团橙色污渍的来源 */
  --atmo-1: rgba(0, 0, 0, 0);
  --atmo-2: rgba(0, 0, 0, 0);
  --atmo-3: rgba(0, 0, 0, 0);
  --grain-op: 0;

  /* 强调色 = 中性石墨灰（去彩色、降硬度）：不再用纯黑，靠明度与墨线分层级 */
  --accent: #3A3D39;
  --accent-2: #3A3D39;
  --accent-hover: #171914;
  --accent-soft: rgba(58, 61, 57, 0.10);
  --accent-line: rgba(58, 61, 57, 0.34);
  --sel-bg: rgba(58, 61, 57, 0.14);
  --on-accent: #F6F5F0;
  --info-soft: rgba(58, 61, 57, 0.06);
  --info-line: rgba(58, 61, 57, 0.22);

  --ok: #1E6B4A;
  --warn: #96620B;
  --warm: #96620B;
  --danger: #AC2118;

  --shadow: none;
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: none;
  --shadow-lift: none;
  --shell-shadow: none;
  --bar-shadow: none;
  --glow: none;

  --code-bg: rgba(23, 25, 20, 0.055);
  --code-text: #3A3D39;
  --pre-bg: #F1EFE8;
  --soft-bg: #F1EFE8;
  --row-hover: rgba(23, 25, 20, 0.04);
  --qcard-hover: #F4F2EC;
  /* 代码高亮也去彩色：关键字用中性灰，字符串用更浅的中灰，靠字重区分 */
  --syn-k: #3A3D39;
  --syn-s: #6A6D66;
}

/* ---------- B. 令牌重映射 · 深色（同一套语言的墨面版） ---------- */
:root[data-theme="dark"] {
  --radius: 2px;
  --radius-sm: 2px;
  --radius-xs: 2px;
  --radius-lg: 2px;
  --radius-xl: 2px;
  --radius-pill: 2px;

  /* 深色档不再贴黑。原来的 0B0D0C / 0F1211 / 151817 / 1A1D1C 彼此只差 3~5 个色阶，
     肉眼等于一整块黑 —— 这不是"提亮一档"能解决的，必须把它拉成四级明度阶梯：
       外壳(最暗) < 页面 < 面板/卡片 < 浮起 < 面板强 < 墨面(最亮)
     相邻两级差 5~6 个色阶，配合加粗的墨线，层级才看得见。
     浅色档一行都没有动。 */
  --page-bg: #1A1917;
  --bg-0: #1A1917;
  --bg-1: #21201D;
  --text: #EDECE6;
  --muted: #A6AAA3;
  --grid-line: rgba(237, 236, 230, 0.035);

  --glass-1: #262520;
  --glass-2: #2C2B26;
  --glass-3: #32312B;
  --glass-line: rgba(237, 236, 230, 0.17);
  --glass-line-strong: rgba(237, 236, 230, 0.62);
  --glass-hi: none;
  --glass-drop: none;
  --blur-1: none;
  --blur-2: none;
  --shell-bg: #111110;

  --surface: #262520;
  --surface-raised: #2C2B26;
  --panel: #262520;
  --panel-strong: #32312B;
  --line: rgba(237, 236, 230, 0.17);
  --line-strong: rgba(237, 236, 230, 0.62);

  /* 命令台（墨面）在深色档反过来取"最亮的一级"：深色界面里抬起 = 变亮。
     原来把它压成 #1A1D1C，比页面还深，于是整块和背景糊在一起 —— 这正是
     "太暗、没区别"最刺眼的一处。 */
  --ink-bg: #383730;
  --ink-accent: #C9C7BE;
  --ink-accent-soft: rgba(201, 199, 190, 0.14);

  --atmo-1: rgba(0, 0, 0, 0);
  --atmo-2: rgba(0, 0, 0, 0);
  --atmo-3: rgba(0, 0, 0, 0);
  --grain-op: 0;

  --accent: #C9C7BE;
  --accent-2: #C9C7BE;
  --accent-hover: #EDECE6;
  --accent-soft: rgba(201, 199, 190, 0.12);
  --accent-line: rgba(201, 199, 190, 0.36);
  --sel-bg: rgba(201, 199, 190, 0.16);
  --on-accent: #171914;
  --info-soft: rgba(201, 199, 190, 0.08);
  --info-line: rgba(201, 199, 190, 0.24);
  --code-text: #C9C7BE;
  --syn-k: #C9C7BE;
  --syn-s: #8B8E87;

  --shadow: none;
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: none;
  --shadow-lift: none;
  --shell-shadow: none;
  --bar-shadow: none;
  --glow: none;
}

/* 跟随系统时也应用深色令牌（与 instrument.css 的 media 块结构对齐） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --radius: 2px; --radius-sm: 2px; --radius-xs: 2px;
    --radius-lg: 2px; --radius-xl: 2px; --radius-pill: 2px;
    --atmo-1: rgba(0, 0, 0, 0); --atmo-2: rgba(0, 0, 0, 0); --atmo-3: rgba(0, 0, 0, 0);
    --grain-op: 0;
    --shadow: none; --shadow-1: none; --shadow-2: none; --shadow-3: none; --glow: none;
    --glass-hi: none; --glass-drop: none;
    /* 同一套明度阶梯必须在媒体块里再写一遍：
       跟随系统深色时本文件的 :root 块不生效，底色会落回 instrument.css
       媒体块的近黑值，用户看到的仍然是"太暗、没层次"。 */
    --page-bg: #1A1917;
    --bg-0: #1A1917;
    --bg-1: #21201D;
    --muted: #A6AAA3;
    --grid-line: rgba(237, 236, 230, 0.035);
    --glass-1: #262520;
    --glass-2: #2C2B26;
    --glass-3: #32312B;
    --glass-line: rgba(237, 236, 230, 0.17);
    --glass-line-strong: rgba(237, 236, 230, 0.62);
    --shell-bg: #111110;
    --surface: #262520;
    --surface-raised: #2C2B26;
    --panel: #262520;
    --panel-strong: #32312B;
    --line: rgba(237, 236, 230, 0.17);
    --line-strong: rgba(237, 236, 230, 0.62);
    /* 强调色也必须在媒体块内强制覆盖：
       instrument.css 的媒体块特异性 (0,2,0) 高于本文件 :root (0,1,0)，
       不在这里复写，跟随系统深色时仍会漏出原橙色。 */
    /* 墨面底也一并复写：否则跟随系统深色时会漏出 instrument.css 媒体块的深青 #162326 */
    --ink-bg: #383730;
    --ink-accent: #C9C7BE;
    --ink-accent-soft: rgba(201, 199, 190, 0.14);
    --accent: #C9C7BE;
    --accent-2: #C9C7BE;
    --accent-hover: #EDECE6;
    --accent-soft: rgba(201, 199, 190, 0.12);
    --accent-line: rgba(201, 199, 190, 0.36);
    --sel-bg: rgba(201, 199, 190, 0.16);
    --on-accent: #171914;
    --info-soft: rgba(201, 199, 190, 0.08);
    --info-line: rgba(201, 199, 190, 0.24);
    --code-text: #C9C7BE;
    --syn-k: #C9C7BE;
    --syn-s: #8B8E87;
  }
}

/* ---------- C. 组件硬覆盖（令牌管不到的写死样式） ---------- */

/* 卡片类：白底 + 墨线，不要漂浮感 */
.card, .qcard, .diag-card, .choice-card, .acc-card, .portal-card {
  border: 1px solid var(--line-strong);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 按钮：方角；主按钮是全站唯一实心墨块（hover 反色，不引入彩色） */
.btn, .portal-btn, .diag-btn, .acc-btn, button.chip {
  border-radius: 2px;
  box-shadow: none;
}
.btn-primary, .portal-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
}@media (hover: hover) {
.btn-primary:hover, .portal-btn.primary:hover {
  background: var(--page-bg);
  border-color: var(--accent);
  color: var(--accent);
}}
@media (hover: hover) {
/* 墨面（命令台）里的主按钮 hover 原为写死橙 #FF8158（instrument.css 0,3,0），
   这里用同特异性 + 后加载压掉，改成安静的墨色反馈 */
.command-deck .btn-primary:hover {
  background: var(--ink-accent-soft);
  color: var(--ink-accent);
}}

.btn-ghost, .portal-btn.ghost {
  background: transparent;
  border: 1.5px solid var(--text);
  color: var(--text);
  box-shadow: none;
}

/* 胶囊限量：chip / badge 不再是药丸，改成方形标记 */
.chip, .badge, .cloud-badge, .dc-tag, .side-tag {
  border-radius: 2px;
  box-shadow: none;
}

/* 侧栏与顶栏：靠一条墨线分区，不用阴影 */
.sidebar, .side-nav {
  box-shadow: none;
  border-right: 1px solid var(--line-strong);
}
.side-link { border-radius: 2px; }
.side-link.on, .side-link.active, .side-link[aria-current="page"] {
  background: var(--text);
  color: var(--page-bg);
  box-shadow: none;
}

/* 输入与命令面板：方角、无毛玻璃；面板用粗墨边定界 */
input, select, textarea, .cmdk-item, .acc-input {
  border-radius: 2px;
}
.modal, .cmdk, .cmdk-panel {
  border: 1.5px solid var(--line-strong);
  border-radius: 2px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 渐变文字是典型 AI 贴纸：改回实色 */
.grad, .portal-title .pt-accent, .deck-kicker {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
}
.portal-title .pt-accent { color: var(--accent); }

/* 数据表：表头等宽大写 + 粗上边线，正文行只有横线 */
table th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-top: 2px solid var(--text);
  border-bottom: 1px solid var(--text);
}
table td { border-bottom: 1px solid var(--line); }

/* 读数与编号：等宽只给真数据（instrument 已有 --font-num，这里补徽标/标签） */
.badge, .chip, .eyebrow, .spec-kicker, .deck-kicker, .section-head .eyebrow {
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
}

/* emoji 标题的替代在 HTML 层处理（✅/⚠️ 换 Lucide），CSS 层只保证图标与文字同色 */
h1 svg, h2 svg, h3 svg, h4 svg { color: var(--accent); vertical-align: -3px; }

/* 焦点环：2px 实色，键盘用户可见 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- 滚动进度：由贴顶细线改为右下角常驻圆环 -------------------------------
   原 #progress 是贴顶 2px 实色细线，压在 sticky 顶栏上沿、与顶栏描边重叠，
   读不出「进度」语义（instrument.css 的 H1 精修也只是给它补拖尾）。
   这里换成右下角悬浮圆环：conic-gradient 的角度由自定义属性 --p(0-100)
   驱动，JS 从写 width 改为写 --p（见 app.js「scroll progress」）。
   复用原 #progress 元素，不新增 DOM、不改 id 契约；纯装饰，不参与交互。
   门户态仍由 body.portal-active #progress 隐藏（instrument.css，特异性更高）。
   浓淡随主题令牌走：进度 = --accent-2，轨道 = --line，浅深两档自动适配。 */
#progress {
  position: fixed; top: auto; left: auto; right: 22px; bottom: 22px;
  width: 42px; height: 42px; border-radius: 50%;
  background: conic-gradient(var(--accent-2) calc(var(--p, 0) * 1%), var(--line) 0);
  -webkit-mask: radial-gradient(closest-side, transparent 66%, #000 67%);
          mask: radial-gradient(closest-side, transparent 66%, #000 67%);
  transition: none; z-index: 99; pointer-events: none;
}
/* 清掉 app.css 与 instrument.css 给细线加的右端拖尾 */
#progress::after { content: none; }