/* 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}

/* ── 自曝横幅 —— 演示口径 / 演示模式 / 水印版都用它 ─────────
 * 家法:凡是"看起来是结论但其实不是"的东西,必须自己说出来。 */
/* ── 口径横幅 ────────────────────────────────────────────────
 * 这段（同一台现役机：本站 174 N / 约 20 齿 vs 校核引擎 270 N / 7 齿，
 * 峰值差 55%）是全站转化力最强的一段文字 —— 它同时证明两件事：
 * 我们懂真实工程，以及免费版与付费引擎的差别到底在哪。
 *
 * 原来按 12px 小字的免责声明来排，读者当成 fine print 直接划过去。
 * 2026-08-24 一位做人形机器人的读者指出："它是全站最好的转化文案，
 * 比任何'联系我们'都管用，却藏在参数区上面。"于是给它应有的分量：
 * 字号 13.5px、左侧粗竖条、数字等宽加深。
 *
 * ⚠ **只改样式，文案一个字都不能动。** 四个摆线工具页必须逐字一致，
 *   deploy.yml 里有 md5 自检会当场拦下不一致。 */
.selfnote{margin:0;padding:13px 22px;font-size:13.5px;line-height:1.75;
  background:var(--st-na-bg);border-bottom:1px solid var(--st-na-line);
  box-shadow:inset 4px 0 0 var(--st-na);color:#7c4a03}
.selfnote b{color:#9a3412;font-weight:700;font-variant-numeric:tabular-nums}

/* ── 顶栏导航(两站共用,让客户觉得是一个产品)────────────── */
.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}
}