/* ==========================================================================
   共享基底 site.css —— 只装 nav / vg 两站都在用的内容层规则
   --------------------------------------------------------------------------
   基调全部来自 brand.css（设计系统 token），这里只做结构桥接。
   原则：内容层不定义字号、颜色、间距——那些只看 brand.css。
   ⚠ S60（2026-10-21）瘦身：本文件曾背着 ~110 条 agent 图谱站专属组件
   （guide-* / fam-* / status-* / td-* / axis / detail-head / part-bar / crumbs…）。
   agent 站的样式真相源是 _data/agent-guide/sites/site.css（它不吃本模板），
   models 的是 _data/models/css/models.css —— 这些规则对 nav/vg 是纯死重，
   还夹带过 "font-size: undefined" 这类坏声明（浏览器静默丢弃）。
   新增规则前先问：nav 或 vg 的产物里用不用？不用就写进那一站自己的 css。
   安全网：_tmp/s60-orphan-check.mjs（产物用到的类必须有规则接住）。
   ========================================================================== */

/* ==========================================================================
   三站（IDE / CLI / MCP）内容层样式
   --------------------------------------------------------------------------
   基调全部来自 brand.css（v2 设计系统），这里只做两件事：
     1. 旧类名映射到新原语（保证 build.mjs 不用大改）
     2. 图谱站特有的结构（对象网格 / 对比表 / 维度表）
   原则：内容层不定义字号、颜色、间距——那些只看 brand.css。
   ========================================================================== */

/* ── 旧类名 → 新设计系统的桥接 ────────────────────────────────────────── */

.hero {
  /* 2026-10-03：原--sp-7(80) 0 --sp-6(52) → 留白实测 80/52，
     与 www(40) / models(32) 不同档。改用 --section-pad 体系，全站同一节奏。 */
  padding: calc(var(--section-pad) * 2) 0 var(--section-pad);
  border-bottom: 0;
}

.kicker {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .14em;
  color: var(--ink-faint); margin: 0 0 var(--sp-3);
}

.kicker::before {
  content: ""; width: 14px; height: 2px; border-radius:var(--r-xs);
  background: var(--accent, var(--brand)); flex-shrink: 0;
}

/* ⚠ 2026-10-10：整块删除这个 `h1` 规则。
   它与共享层 brand.css 的 h1 是**同一份东西的副本**，只差两个值：
     · font-size: var(--fs-3xl) —— 而 --fs-3xl = var(--display) = var(--display-sub)，
       与共享层完全相同（只是绕了一圈）
     · margin: 0 0 var(--sp-4) —— 共享层是 0，于是这一站的主标多出 24px 下边距，
       六站实测：agent/vg 20px、models 13.8px、learn/nav 12px、www 10px、legal 0px
   h1 属骨架，样式只能由 brand.css 一处决定；副本留着就是下一次分叉的起点。 */

.lede {
  color: var(--ink-mid); font-size: var(--lede); line-height: var(--lede-lh);
  max-width: 60ch; margin: 0;
}

.section { padding-block: var(--section-pad); border-top: 1px solid var(--line); }

.section:first-of-type { border-top: 0; }

.section > h2 {
  font-size: var(--fs-xl); font-weight: 700;
  letter-spacing: -.018em; margin: 0 0 var(--sp-2);
}

/* ── 对象网格：给每张卡一个视觉锚（字母标识 + 状态色条）───────────── */

.grid {
  display: grid; gap: var(--sp-3);
  /* min(330px, 100%) 而非 minmax(330px, 1fr)：后者在视口 < 330px 时
     仍强制 330px 下限 → 卡片溢出（320px 视口实测 scrollWidth 469）。
     100% 上限让它在窄屏收缩到容器宽。 */
  grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
}

.card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
  min-width: 0;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}

.card:hover { border-color: var(--line-strong); transform: translateY(-2px); }

.card h3 {
  font-size: var(--fs-lg); font-weight: 650; line-height: var(--lh-snug);
  margin: 0 0 2px; letter-spacing: -.012em;
}

.card h3 a { color: var(--ink); transition: color .16s var(--ease); }

.card h3 a:hover { color: var(--accent, var(--brand)); }

/* ── 面板：节奏统一（v1 各面板间距不一，看起来很乱）───────────── */

.panel {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-panel);
}

/* 内容少的面板（适合/价格/未知项/实测）用紧凑版式 */

.panel.is-slim { padding: var(--sp-3) var(--sp-4); }

.panel.is-slim h2 {
  font-size: var(--fs-base); font-weight: 650;
  margin: 0 0 var(--sp-2); letter-spacing: -.01em;
}

.panel.is-slim p { font-size: var(--fs-sm); }

.panel:last-child { margin-bottom: 0; }

.panel h2 {
  font-size: var(--fs-lg); font-weight: 700;
  margin: 0 0 var(--sp-3); letter-spacing: -.012em;
}

.panel p {
  font-size: var(--fs-sm); line-height: 1.72;
  color: var(--ink-mid); margin: 0 0 var(--sp-2);
}

.panel p:last-child { margin-bottom: 0; }

.panel ul { margin: 0; padding: 0; display: grid; gap: var(--sp-2); }

.panel li {
  font-size: var(--fs-sm); line-height: 1.7; color: var(--ink-mid);
  padding-left: var(--sp-3); position: relative;
}

.panel li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent, var(--brand));
}

.panel code {
  /* 2026-10-08：原 .92em。父级 14px 时算出 12.88px —— 半像素字号，
   * _design-audit 的「字号档位」检查会判失败（字号只用 3 档 token）。
   * 改用 --fs-xs（12px），落在既有档位上。 */
  font-size: var(--fs-xs); background: var(--bg-inset);
  padding: 1px 5px; border-radius:var(--r-xs); color: var(--ink);
}

/* ── 表格：对比表与证据表 ───────────────────────────────────────────── */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-panel);
}

table.cmp, table.src { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }

table.cmp th, table.cmp td, table.src th, table.src td {
  text-align: left; padding: 11px var(--sp-3);
  border-bottom: 1px solid var(--line); vertical-align: top;
}

table.cmp thead th, table.src thead th {
  font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
  border-bottom-color: var(--line-mid);
}

table.cmp tbody tr:last-child td, table.src tbody tr:last-child td { border-bottom: 0; }

table.cmp tbody tr:hover, table.src tbody tr:hover { background: var(--bg-inset); }

table.src a { color: var(--accent, var(--brand)); word-break: break-all; }

table.src a:hover { text-decoration: underline; }

td a { display: inline-flex; align-items: center; color: var(--ink); }

td a:hover { color: var(--accent, var(--brand)); }

.t-sm.mb-3 { margin-bottom: var(--sp-3); }

/* .panel 里直接放的表格（没有 .table-wrap 包裹）列多时会把面板撑出横向滚动条。
   给它自己的 display:block + overflow-x:auto，溢出被限制在表格内部，
   全站仍无横向滚动条。
   ⚠ 不要只写`.is-flush` —— 详情页的「证据来源」表（类型/名称/链接 三列，
   th.w-20 = 80px + th.w-52 = 208px）在 320px 下把表格撑到 334px，
   而它**没有** is-flush 类，所以曾经漏掉。现在按「.panel 内的表格」一刀切。*/

.panel > table.src, .panel > table.cmp {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}

/* 证据来源表在窄屏转成卡片 —— 不是为了修横向溢出（那个 .panel > table.src
   的 overflow-x:auto 已经解决了），而是因为**横向滚动解决了可读性**：
   th.w-20 + th.w-52 = 288px 固定列宽，在 320px 视口下正好等于面板内宽，
   把第三列（链接）挤到只剩 20px —— `https://github.com/anthropics/...`
   被压成每行一个字符的竖排，肉眼读不了（2026-10-03 实测）。
 * `display:block` + 逐格堆叠，让每条证据占一行块、链接独占一行可完整折行。
 * ⚠ td 不能用 `display:flex` —— 格内多个 span / <br> 会各成一个不可换行的
 *   flex item，文字被压成 30px 窄带（这个坑两列表 table.budget 已经踩过）。*/

@media (max-width: 560px) {
  .panel > table.src thead {display: none;}
  .panel > table.src tbody, .panel > table.src tr, .panel > table.src td {display: block; width: auto;}
  .panel > table.src tr {padding: var(--sp-3) 0; border-bottom: 1px solid var(--line);}
  .panel > table.src tbody tr:last-child {border-bottom: 0;}
  .panel > table.src td {border: 0; padding: 2px 0;}
  /* 类型是元信息，压暗一号；链接是这一格唯一的长内容，允许任意位置折行 */
  .panel > table.src td:first-child {color: var(--ink-dim); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em;}
}