/* ══════════════════════════════════════════════════════════════════
   时为集团 · 页面骨架层（唯一真相）  brand/skeleton.css
   08-19 凯丹：「以后大家只是改顶部企业愿景的颜色」

   第一层 tokens.css 管【用什么颜色、多大字】；
   本层管【长什么样】—— 顶栏、愿景条、页头的**形状与尺寸**。

   为什么要有这一层（08-19 猎隼实测的教训）：
     集团只给了颜色变量（--nav / --nav-text / --nav-h），**几何没给**，
     于是猎隼把同一套顶栏复制粘贴出 **9 个变体** —— 底色 #131921、
     当前项用亚马逊蓝 #146eb4、链接字 #cdd3da、分隔线 rgba(.2)、高度 56px，
     每页差一点点，跳页面就"感觉不一样"。
     **颜色统一了、形状不统一，等于没统一。**

   接入方式（三系统一致）：
     <head> 里按序引，本文件排在 tokens 之后、自家样式之前
       <link rel="stylesheet" href="/brand/tokens.css">
       <link rel="stylesheet" href="/brand/skeleton.css">
       <link rel="stylesheet" href="/static/自家品牌层.css">   ← 只覆盖颜色

   ⚠ 各系统允许覆盖的，只有下面这三处颜色，**尺寸一律不许动**：
       --brand / --brand-weak      品牌主色（鹰眼蓝 / 猎隼隼青）
       .vision 的 background/color 愿景条底色与字色
       .top .mk 里的 logo 图片
   ══════════════════════════════════════════════════════════════════ */

/* ── ① 顶栏 ──────────────────────────────────────────────────────
   《页面骨架规范》一、导航：顶部横条 sticky，36–44px，padding 5px 16px */
.top{background:var(--nav);color:#fff;min-height:var(--nav-h);
     display:flex;align-items:center;gap:12px;padding:5px 16px;flex-wrap:nowrap;
     position:sticky;top:0;z-index:100}
.top .home{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
/* logo 方块：没有它 img 会按原图尺寸渲染，整页被撑爆（08-19 猎隼实测踩过） */
.top .mk{width:26px;height:26px;display:grid;place-items:center;flex:none}
.top .mk svg,.top .mk img{width:22px;height:22px}
.top .mk img{object-fit:contain}
.top .mk img+svg{display:none}
.top b{font-size:var(--fs);font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.top .r{margin-left:auto;display:flex;align-items:center;gap:12px;
        font-size:var(--fs-sm);color:var(--nav-text);white-space:nowrap}
.top .r .who{color:#fff}
.top .lo{font:inherit;font-size:var(--fs-sm);color:var(--nav-text);background:transparent;
         border:1px solid rgba(255,255,255,.22);border-radius:var(--r-sm);
         padding:4px 10px;cursor:pointer}
.top .lo:hover{background:rgba(255,255,255,.12);color:#fff}

/* 模块导航：13px / 圆角 7 / hover 提亮 / 当前项用各系统品牌色 */
.modnav{display:flex;align-items:center;gap:3px;margin-left:8px;flex:1;
        overflow-x:auto;scrollbar-width:none}
.modnav::-webkit-scrollbar{display:none}
.modnav .chip{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
              color:var(--nav-text);text-decoration:none;font-size:var(--fs-dense);
              padding:5px 9px;border-radius:var(--r-sm);transition:background .12s,color .12s}
.modnav .chip:hover{background:rgba(255,255,255,.12);color:#fff}
.modnav .chip.on{background:var(--brand);color:#fff;font-weight:700}
.modnav .chip:focus-visible{outline:2px solid #fff;outline-offset:2px}
.modnav .sep{width:1px;height:20px;background:rgba(255,255,255,.16);margin:0 5px;flex:none}
/* 导航项多时用分组标签（规范一） */
.modnav .grp{font-size:var(--fs-xs);font-weight:700;letter-spacing:1px;
             color:var(--nav-group);padding:0 4px;white-space:nowrap}

/* ── ② 企业愿景条 ────────────────────────────────────────────────
   高度是跨系统契约：钉 min-height，**不靠"内边距+行高"算出来** ——
   那样谁改了字号高度就漂，两个系统必然对不上。
   ⚠ 各系统只覆盖 background / color，别动高度。
   ⚠ 换底色务必验字色对比度：猎隼实测橙底 #FF9900 上白字只有 2.14（不可读），
     最后用亚马逊深蓝 #232F3E（6.34）才达标。深底上也一样——隼青 #0E7181
     压在 --nav #1a1f2b 上只有 2.90，不能直接用 var(--brand)。 */
.vision{min-height:var(--vision-h);
        display:flex;align-items:center;justify-content:center;
        text-align:center;font-size:var(--fs-xs);font-weight:600;
        padding:0 20px;line-height:1.35;
        /* 兜底色：各系统必须自己覆盖这两行 */
        background:var(--nav);color:var(--nav-text)}
.vision .co{font-weight:800;margin:0 3px}

/* ── ③ 标准页头 ──────────────────────────────────────────────────
   《页面骨架规范》二：h1 19px + 副标题 12.5px。
   ❌ 不放大面积品牌渐变 banner —— 内部工具每天开几十次，
      第一屏要给信息不是给气氛。 */
.pagehead{margin-bottom:var(--sp-4,16px)}
.pagehead h1{font-size:var(--fs-xl);font-weight:700;margin:0;letter-spacing:-.01em}
.pagehead .sub{font-size:var(--fs-sm);color:var(--muted);margin:4px 0 0;line-height:var(--lh)}
.pagehead .meta{font-size:var(--fs-sm);color:var(--faint);margin-top:8px;
                display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pagehead .meta b{color:var(--ink);font-weight:600}
.pagehead .meta a{color:var(--brand);cursor:pointer}
.pagehead .meta .when{margin-left:auto;font-variant-numeric:tabular-nums}

/* ── ④ 卡片图标：≤42px 方块，emoji 降级成图标而不是主视觉（规范三） ── */
.entry .ei,.ico-sq{width:36px;height:36px;border-radius:var(--r-md);
                   background:var(--brand-weak);display:grid;place-items:center;
                   font-size:18px;line-height:1;margin-bottom:10px}

@media(max-width:900px){
  .top{flex-wrap:wrap;gap:8px}
  .modnav{order:3;flex-basis:100%;margin-left:0}
}
