/* shared/ui.css —— 两站共用的设计语言(演示站 + 工程校核站)
 *
 * 由来:CycloidAI_App(演示,Julia)与 UGproject 引擎剥壳出来的校核站
 * 是两个后端、两个仓库,但对客户是**一个产品**。视觉一旦分家,
 * 客户会当成两家公司的东西。这份文件是两边唯一的样式来源。
 *
 * 关键约定 —— 三态语义色。别再直接写 --green/--red/--amber,
 * 那是"颜色";这里定义的是"语义":
 *
 *     PASS  绿   判据通过,有证据
 *     FAIL  红   判据不过
 *     N/A   琥珀 **证据未到位**,不是"不重要"
 *
 * 为什么 N/A 必须是琥珀不能是灰:灰色在界面里等同于"禁用/无关",
 * 而 N/A 恰恰是**最需要人去处理的那一类** —— 它是待办,不是背景。
 * 这条是整个产品的差异化所在(我们不藏 N/A),配色不能把它藏起来。
 */

:root{
  /* 底座调色板 —— 与 index.html 现有取值一致,不改视觉,只给它们名字 */
  --bg:#eef1f6; --card:#fff; --ink:#1f2937; --muted:#6b7280; --line:#e5e7eb;
  --blue:#2563eb; --green:#059669; --amber:#b45309; --red:#dc2626;

  /* 三态语义(消费端只许用这一组) */
  --st-pass:var(--green);   --st-pass-bg:#ecfdf5;  --st-pass-line:#a7f3d0;
  --st-fail:var(--red);     --st-fail-bg:#fef2f2;  --st-fail-line:#fecaca;
  --st-na:var(--amber);     --st-na-bg:#fffbeb;    --st-na-line:#fde68a;
}

/* ── 数字排版 ──────────────────────────────────────────────
 * 工程界面里 "270 N" 和 "270N" 给人的可信度不一样;等宽数字则让
 * 一列数字对得齐,扫一眼就能比大小。这是基本尊重,不是装饰。 */
.num{font-variant-numeric:tabular-nums;font-weight:600}
.unit{font-size:.85em;color:var(--muted);margin-left:.25em;font-weight:400}

/* ── 三态徽章 ────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:.4em;
  padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;
  border:1px solid transparent;white-space:nowrap}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;
  background:currentColor;flex:none}
.badge.pass{color:var(--st-pass);background:var(--st-pass-bg);
  border-color:var(--st-pass-line)}
.badge.fail{color:var(--st-fail);background:var(--st-fail-bg);
  border-color:var(--st-fail-line)}
.badge.na{color:var(--st-na);background:var(--st-na-bg);
  border-color:var(--st-na-line)}

/* ── 看板行 —— 校核站的核心原子 ───────────────────────────
 * 结构:ID · 名称 · 状态 · 证据一句话 · [出路]
 * N/A 行左侧有琥珀竖条,让"待办"在整页里一眼可见。 */
.gate{display:grid;grid-template-columns:56px 1fr auto;gap:10px;
  align-items:start;padding:10px 12px;border-bottom:1px solid var(--line)}
.gate:last-child{border-bottom:0}
.gate.na{background:var(--st-na-bg);box-shadow:inset 3px 0 0 var(--st-na)}
.gate.fail{background:var(--st-fail-bg);box-shadow:inset 3px 0 0 var(--st-fail)}
.gate .gid{font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.gate .gname{font-weight:600}
.gate .gev{grid-column:2;font-size:12px;color:var(--muted);margin-top:2px}
/* 出路:只有 N/A 与 FAIL 才有。没有出路的红字等于骂人不给路。 */
.gate .gway{grid-column:2;margin-top:6px;font-size:12px;color:var(--st-na)}
.gate .gway::before{content:"└ 出路:";opacity:.75}

/* ── 口径条 —— 任何数字都要能问"这是哪把尺子" ───────────── */
.cal{display:inline-block;margin-left:.5em;padding:1px 6px;border-radius:4px;
  font-size:11px;color:var(--muted);background:#f3f4f6;
  border:1px solid var(--line);cursor:help}

/* ── 自曝横幅 —— 演示口径 / 演示模式 / 水印版都用它 ─────────
 * 家法:凡是"看起来是结论但其实不是"的东西,必须自己说出来。 */
.selfnote{margin:0;padding:9px 22px;font-size:12px;line-height:1.7;
  background:var(--st-na-bg);border-bottom:1px solid var(--st-na-line);
  color:#7c4a03}
.selfnote b{color:var(--st-na)}

/* ── 顶栏导航(两站共用,让客户觉得是一个产品)────────────── */
.topnav{display:flex;gap:16px;align-items:center;font-size:12px;margin-top:8px}
.topnav a{color:var(--blue);text-decoration:none}
.topnav a[aria-current]{color:var(--ink);font-weight:700}

@media (max-width:640px){
  .gate{grid-template-columns:44px 1fr;}
  .gate>:last-child{grid-column:2}
}