/* ============================================================
   人物库 · R7-Ink「墨档」合成设计令牌 —— W-12 R7B
   ============================================================
   合成依据：R7 Carbon 骨架（金博士认可）× R6-B Vercel 黑白哲学（金博士认可）。
   取舍原则一句话：**黑承担结构，蓝只作标点**。
     - 结构性元素全部转近黑：主按钮 / KPI 首卡标线 / 导航激活线 / 品牌块
     - 蓝色只保留给真正的交互与活性信号：
       链接 · 输入框聚焦 · 运行中节点 · 时间线当前点 · info 提示条 · tag.accent
   与纯 R7 的分界：蓝面积从 ~2% 收到 ~0.5%，气质从「企业蓝」转「墨黑」。
   与纯 R6-B 的分界：保留 R7 的 0px 方角、g10 灰表头、40px 定高行、零阴影。
   ============================================================ */

:root {
  /* ---------- 背景阶：Carbon 四主题层 ----------
     carbon white = #ffffff，g10 = #f4f4f4。
     本档取 white 为面、g10 为底，另补两层中性供层区分。 */
  --bg-0: #F4F4F4;   /* g10：页面底 */
  --bg-1: #F4F4F4;   /* 内嵌区底 */
  --bg-2: #FFFFFF;   /* white：卡片 / 表面 */
  --bg-3: #E8E8E8;   /* layer-hover */
  --bg-4: #E0E0E0;   /* layer-active / 输入框底 */

  /* ---------- 描边：Carbon 100/200/300 阶 ----------
     Carbon 的表/卡边界铁律：**只用 1px，且只有一档**（#e0e0e0）。 */
  --line-1: #E8E8E8;   /* 内部行线（约等于 Carbon 100） */
  --line-2: #E0E0E0;   /* 结构边 / 卡边（Carbon 200） */
  --line-3: #C6C6C6;   /* 强边 / 输入框（Carbon 300） */
  --line-glow: rgba(15, 98, 254, .30);

  /* ---------- 近黑：Carbon gray 100 ---------- */
  --ink-900: #161616;
  --ink-800: #262626;
  --ink-700: #393939;
  --ink-line: #161616;
  --on-ink-1: #FFFFFF;
  --on-ink-2: #C6C6C6;
  --on-ink-3: #8D8D8D;

  /* ---------- 单一强调色：IBM Blue 60 ---------- */
  --accent: #0F62FE;
  --accent-2: #0043CE;   /* blue 70：hover */
  --accent-3: #4589FF;   /* blue 50：浅态 */
  --accent-dim: #A6C8FF; /* blue 40 */
  --accent-wash: rgba(15, 98, 254, .08);
  --accent-line: rgba(15, 98, 254, .32);
  --accent-tint: rgba(15, 98, 254, .04);

  /* ---------- 文字阶：Carbon text 阶 ---------- */
  --tx-1: #161616;   /* text-primary */
  --tx-2: #525252;   /* text-secondary */
  --tx-3: #6F6F6F;   /* text-helper */
  --tx-4: #8D8D8D;   /* text-placeholder */

  /* ---------- 语义色：Carbon status 阶（去饱和，报告感） ---------- */
  --ok: #198038;       /* green 60 */
  --warn: #8E6A00;     /* yellow 60 深调（保可读） */
  --risk: #DA1E28;     /* red 60 */
  --info: #0F62FE;     /* blue 60（与主色同源，Carbon 即如此） */
  --neutral: #6F6F6F;

  --ok-wash: rgba(25, 128, 56, .07);
  --ok-line: rgba(25, 128, 56, .28);
  --warn-wash: rgba(142, 106, 0, .07);
  --warn-line: rgba(142, 106, 0, .28);
  --risk-wash: rgba(218, 30, 40, .06);
  --risk-line: rgba(218, 30, 40, .26);
  --info-wash: rgba(15, 98, 254, .07);
  --info-line: rgba(15, 98, 254, .28);

  /* ---------- 数据可视化：Carbon 蓝单色阶 ---------- */
  --viz-1: #0F62FE;
  --viz-2: #4589FF;
  --viz-3: #A6C8FF;
  --viz-grid: #E0E0E0;

  /* ---------- 字体栈 ----------
     说明：基座令牌脚本核验发现，历史各档**均未定义 --font-mono**，
     一直静默沿用基座的 ui-monospace 栈。语法等价，但本档显式声明补上
     （Carbon 的 ID 列 / 数值列 mono 是本档核心资产，不能靠回落）。
     Sans 与基座一致：Carbon 官方字体 IBM Plex Sans 未随稿分发，
     按"不引入外部依赖"原则沿用系统栈，字重与字号纪律照 Carbon 执行。 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
               "Noto Sans CJK SC", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "JetBrains Mono",
               "Cascadia Mono", Consolas, "Liberation Mono", Menlo, monospace;

  /* ---------- 阴影：默认全 none（Carbon 铁律） ----------
     Carbon 用色阶代替投影。浮层（下拉/弹窗）才允许一层极浅影。 */
  --shadow-1: none;
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .08);   /* 仅浮层 */
  --shadow-3: 0 2px 6px rgba(0, 0, 0, .12);
  --shadow-card: none;
  --shadow-hover: none;
  --shadow-glow: 0 0 0 2px var(--accent-wash);

  /* ---------- 字号：Carbon Token 阶梯（14px 正文基线） ----------
     Carbon type set：12 / 14 / 16 / 18 / 20 / 24。
     本档取四档：micro 12 / body 14 / title 16 / hero 20。
     比 R6 整体上浮 1px——因为 Carbon 的密度靠**行高**压缩，不靠缩小字号。 */
  --fs-micro: 12px;
  --fs-body: 14px;
  --fs-title: 16px;
  --fs-hero: 20px;
  --fs-kpi: 28px;

  /* ---------- 圆角：Carbon 默认 0 ---------- */
  --r-s: 0px;
  --r-m: 0px;
  --r-l: 0px;
  --r-xl: 0px;

  /* ---------- 动效：Carbon motion 标准档 ---------- */
  --dur: 110ms;
  --ease: cubic-bezier(.2, 0, .38, .9);
}

/* ============================================================
   全局：g10 平底，零图案零渐变
   ============================================================ */
body { background: var(--bg-0); font-size: var(--fs-body); line-height: 1.43; }
body::before { display: none; }
a { color: var(--accent); }
a:hover { color: var(--accent-2); text-decoration: underline; }

/* ============================================================
   顶栏：Carbon UI Shell —— 48px 高，上下各一条 1px 线
   ============================================================ */
.topbar {
  background: #FFFFFF;
  border-bottom: 1px solid var(--line-2);
  box-shadow: none;
  height: 48px;
  padding: 0 16px;
}
.brand { color: var(--tx-1); border-right-color: var(--line-2); font-weight: 600; font-size: 14px; }
.brand-sub { color: var(--tx-3); font-weight: 400; }
.brand-mark {
  background: var(--tx-1); color: #FFFFFF;
  border-radius: 0; box-shadow: none;
  width: 20px; height: 20px; font-size: 11px; display: grid; place-items: center;
}
.nav a {
  color: var(--tx-2); font-weight: 400; border-radius: 0;
  font-size: var(--fs-body); padding: 6px 10px;
  border-bottom: 2px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav a:hover { color: var(--tx-1); background: var(--bg-3); text-decoration: none; }
.nav a.active {
  color: var(--tx-1); background: transparent;
  border-bottom-color: var(--tx-1);
  font-weight: 600; box-shadow: none;
}
.topbar-right .env-chip {
  color: var(--tx-3); background: transparent; border-color: var(--line-3);
  border-radius: 0; font-size: 11px; letter-spacing: .04em;
}
.topbar-right .avatar {
  background: var(--bg-4); border-color: var(--line-3); color: var(--tx-2);
  border-radius: 50%;
}
.topbar-right .user-chip { color: var(--tx-3); font-size: 13px; }

/* ============================================================
   页头：Carbon page header——标题 20px/600，配一条底线
   ============================================================ */
.page-head {
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 24px; margin-bottom: 32px;
}
.page-title {
  font-size: var(--fs-hero); font-weight: 400;
  letter-spacing: 0; color: var(--tx-1);
}
.page-title .accent-bar { display: none; }
.page-desc { color: var(--tx-3); font-size: var(--fs-body); margin-top: 8px; line-height: 1.5; }

/* 区块标题：Carbon 的 section 用 16px/600 加一条线，而非小字大写 */
.sec-head {
  background: none; padding: 0 0 8px; border-radius: 0;
  border-left: none; border-bottom: 1px solid var(--line-2);
  margin: 40px 0 16px;
}
.sec-head h2 {
  color: var(--tx-1); font-size: var(--fs-title); font-weight: 600;
  letter-spacing: 0; text-transform: none;
}
.sec-head .rule { display: none; }
.sec-head .count {
  background: transparent; border: none; color: var(--tx-3);
  font-size: var(--fs-body); font-weight: 400; letter-spacing: 0;
}

/* ============================================================
   卡片 / 瓦片：白面 + 1px 边 + 零圆角 + 零阴影
   Carbon Tile 的做法：边界即层级，不加投影
   ============================================================ */
.card {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 0;
  box-shadow: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover { border-color: var(--line-2); background: var(--bg-2); }
.card-head {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-2);
  box-shadow: none;
  padding: 12px 16px;
}
.card-title {
  font-weight: 600; color: var(--tx-1); font-size: var(--fs-title);
  letter-spacing: 0;
  display: flex; align-items: baseline; gap: 8px;
}
.card-title::before { display: none; }
.card-title .en {
  color: var(--tx-3); font-weight: 400; font-size: 11px;
  font-family: var(--font-mono); letter-spacing: .04em;
}
.card-body { padding: 16px; }
.card-body.tight { padding: 0; }
.card-foot {
  background: var(--bg-2); border-top: 1px solid var(--line-2);
  color: var(--tx-3); font-size: var(--fs-micro);
  padding: 12px 16px;
}

/* ============================================================
   KPI：Carbon 用「顶部一条 3px 强调线」标识活性卡（非左侧竖条）
   ============================================================ */
.kpi-grid { gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); margin-bottom: 32px; }
.kpi {
  background: var(--bg-2);
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 16px;
}
.kpi::after { content: none; }
.kpi::before { content: none; }
.kpi-grid .kpi:first-child { border-left: none; border-top: 3px solid var(--tx-1); padding-top: 14px; }
.kpi-label {
  color: var(--tx-3); font-size: 12px; letter-spacing: .02em;
  font-weight: 400; text-transform: none;
}
.kpi-label > span:last-child { color: var(--tx-4); font-weight: 400; }
.kpi-value {
  color: var(--tx-1); font-size: var(--fs-kpi); font-weight: 400;
  letter-spacing: -.01em; margin: 8px 0 4px; line-height: 1.15;
}
.kpi-value .unit { color: var(--tx-3); font-size: var(--fs-body); font-weight: 400; }
.kpi-delta { color: var(--tx-3); font-size: var(--fs-micro); }
.kpi-delta.up { color: var(--tx-2); }
.kpi-delta.warn { color: var(--warn); }
.kpi-spark { margin-top: 12px; height: 24px; }
.kpi-spark polyline { stroke: var(--viz-2) !important; stroke-width: 1.5; }
.kpi .kpi-value.is-warn { color: var(--tx-1); }
.kpi-grid .kpi:nth-child(n+4) .kpi-value { font-size: var(--fs-kpi); }

/* ============================================================
   表格：Carbon DataTable —— 本档的核心资产
   表头：muted 小型大写 + 底线；单元格：发丝线横分隔（Carbon 铁律
   是「只用横线」，不画竖线）；行高 40px 生产性密度
   ============================================================ */
table.data { font-size: var(--fs-body); border-collapse: collapse; }
table.data th {
  background: var(--bg-1);
  color: var(--tx-3);
  border-top: none;
  border-bottom: 1px solid var(--line-2);
  border-right: none;
  font-size: var(--fs-micro); letter-spacing: .02em; font-weight: 600;
  text-transform: none;
  padding: 8px 16px;
  text-align: left;
  height: 40px;
}
table.data td {
  background: transparent; color: var(--tx-2);
  border-bottom: 1px solid var(--line-1);
  border-right: none;
  padding: 8px 16px;
  height: 40px;
  vertical-align: middle;
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover td { background: var(--bg-1); }
table.data td.strong { color: var(--tx-1); font-weight: 400; }
table.data a.row-link { color: var(--tx-1); font-weight: 400; }
table.data a.row-link:hover { color: var(--accent); text-decoration: underline; }
/* ID 列用等宽字体（Carbon 惯例：标识符与数值对齐可比） */
table.data td.mono, table.data th.mono,
table.data td.num, table.data td.date {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
table.data td.num { text-align: right; }

/* 行状态：Carbon 不用行首色条，改用行内文字色 + 悬停底色 */
table.data td:first-child,
tr.r-ok td:first-child, tr.r-warn td:first-child,
tr.r-risk td:first-child, tr.r-idle td:first-child { box-shadow: none; }
tr.r-warn td { color: var(--tx-2); }
tr.r-warn td.strong { color: var(--warn); }
tr.r-risk td.strong { color: var(--risk); }
tr.r-idle td { color: var(--tx-3); }

/* ============================================================
   标签 / 徽章
   Carbon Tag 规则：矩形；状态用「色点 + 文字」而非实底
   ============================================================ */
.tag {
  border-radius: 0; font-weight: 400; letter-spacing: 0;
  padding: 2px 8px; background: var(--bg-3); border-color: transparent;
  font-size: var(--fs-micro); color: var(--tx-2);
}
.tag.ok   { color: var(--tx-2); background: var(--ok-wash);   border: 1px solid var(--ok-line); }
.tag.warn { color: var(--tx-2); background: var(--warn-wash); border: 1px solid var(--warn-line); }
.tag.risk { color: var(--tx-2); background: var(--risk-wash); border: 1px solid var(--risk-line); }
.tag.info { color: var(--tx-2); background: var(--info-wash); border: 1px solid var(--info-line); }
.tag.dim  { color: var(--tx-3); background: var(--bg-3);      border: 1px solid transparent; }
.tag.accent { color: var(--accent); background: var(--accent-wash); border: 1px solid var(--accent-line); }
.tag .dot { width: 6px; height: 6px; }
.tag.ok .dot { background: var(--ok); }
.tag.warn .dot { background: var(--warn); }
.tag.risk .dot { background: var(--risk); }
.tag.info .dot { background: var(--info); }

/* 置信度：Carbon 不用色块，用「字重 + 边」 */
.grade {
  border-radius: 0; font-weight: 600; width: 20px; height: 20px;
  font-size: var(--fs-micro);
  font-family: var(--font-mono);
}
.grade.a { color: #FFFFFF; background: var(--tx-1); border: none; box-shadow: none; }
.grade.b { color: var(--tx-2); background: var(--bg-3); border: 1px solid var(--line-3); }
.grade.c { color: var(--tx-3); background: transparent; border: 1px solid var(--line-3); }

/* ============================================================
   按钮：Carbon Button —— 矩形、无圆角、无阴影
   主按钮 IBM Blue 实底（Carbon 唯一允许大面积用色的元素）
   ============================================================ */
.btn {
  background: transparent; border: 1px solid var(--accent); color: var(--accent);
  font-weight: 400; box-shadow: none; border-radius: 0;
  font-size: var(--fs-body);
  padding: 10px 16px; min-height: 40px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { color: #FFFFFF; background: var(--tx-1); border-color: var(--tx-1); text-decoration: none; }
.btn.primary {
  background: var(--tx-1); color: #FFFFFF;
  border-color: var(--tx-1); font-weight: 400; box-shadow: none;
}
.btn.primary:hover { background: #000000; border-color: #000000; }
.btn.ghost {
  background: var(--bg-3); border-color: transparent; color: var(--tx-1);
}
.btn.ghost:hover { background: var(--bg-4); color: var(--tx-1); }
.btn.sm { min-height: 32px; padding: 6px 12px; }

/* ============================================================
   筛选条 / 表单：Carbon TextInput —— 单一底边框，聚焦变蓝加粗
   这是 Carbon 最具辨识度的一处细节
   ============================================================ */
.filter-bar {
  background: #FFFFFF; border: 1px solid var(--line-2);
  border-radius: 0; box-shadow: none;
  padding: 12px 16px;
}
.input {
  background: var(--bg-1); border: none;
  border-bottom: 1px solid var(--line-3);
  color: var(--tx-1);
  border-radius: 0; font-size: var(--fs-body);
  height: 40px; padding: 0 16px;
  outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input:focus {
  border-bottom-color: var(--accent);
  box-shadow: 0 1px 0 0 var(--accent);
}
.filter-label { color: var(--tx-3); font-weight: 400; font-size: var(--fs-micro); }

.dl dt { color: var(--tx-3); border-bottom: 1px solid var(--line-1); font-size: var(--fs-body); font-weight: 400; }
.dl dd { color: var(--tx-1); border-bottom: 1px solid var(--line-1); }

/* ============================================================
   时间线：Carbon 用方点 + 细线
   ============================================================ */
.timeline::before { background: var(--line-2); width: 1px; }
.tl-item::before {
  background: #FFFFFF; border: 1px solid var(--line-3);
  border-radius: 0;
  width: 9px; height: 9px;
}
.tl-item.now::before { background: var(--accent); border-color: var(--accent); box-shadow: none; border-radius: 0; }
.tl-item.past::before { border-color: var(--line-3); border-radius: 0; }
.tl-date { color: var(--tx-3); font-weight: 400; font-size: var(--fs-micro); font-family: var(--font-mono); }
.tl-item.now .tl-date { color: var(--tx-1); font-weight: 600; }
.tl-body { color: var(--tx-2); font-size: var(--fs-body); line-height: 1.5; }
.tl-body strong { color: var(--tx-1); font-weight: 600; }

/* ============================================================
   计量条 / 仪表：Carbon ProgressBar —— 零圆角
   ============================================================ */
.meter { background: var(--bg-4); height: 4px; border-radius: 0; }
.meter > i { background: var(--tx-1); border-radius: 0; }
.meter.warn > i { background: var(--warn); }
.meter.risk > i { background: var(--risk); }
.gauge text { fill: var(--tx-1); }
.gauge-meta b { color: var(--tx-1); font-size: var(--fs-title); font-weight: 600; }

/* ============================================================
   流水线节点：Carbon 进程指示——全矩形
   ============================================================ */
.node {
  background: #FFFFFF; border: 1px solid var(--line-2); color: var(--tx-3);
  border-radius: 0; font-size: var(--fs-micro);
  padding: 4px 8px;
}
.node.done { color: var(--tx-2); border-color: var(--line-2); background: var(--bg-1); }
.node.done .idx { color: var(--tx-3); }
.node.run { color: #FFFFFF; background: var(--accent); border-color: var(--accent); }
.node.run .idx { color: rgba(255, 255, 255, .75); }
.node.fail { color: var(--risk); background: var(--risk-wash); border-color: var(--risk-line); }
.node.skip { color: var(--tx-4); background: transparent; border-style: solid; border-color: var(--line-2); }

/* ============================================================
   提示块 / 空态 / 稿标识
   Carbon InlineNotification：左侧 3px 色条承载语义（本档保留）
   ============================================================ */
.note {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--line-3);
  color: var(--tx-2); border-radius: 0;
  font-size: var(--fs-body); line-height: 1.5;
  padding: 12px 16px;
}
.note b { color: var(--tx-1); font-weight: 600; }
.note.warn { background: var(--warn-wash); border-color: var(--warn-line); border-left-color: var(--warn); color: var(--tx-2); }
.note.info { background: var(--info-wash); border-color: var(--info-line); border-left-color: var(--accent); color: var(--tx-2); }
.empty-state { background: var(--bg-1); border: 1px solid var(--line-2); color: var(--tx-3); border-radius: 0; }
.mock-flag {
  background: var(--bg-3); color: var(--tx-3);
  border: 1px solid transparent; border-radius: 0; box-shadow: none;
}

/* 本档专属：Carbon eyebrow（区块上方小型大写标签） */
.eyebrow {
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tx-3);
}