/* ============================================================================
 * 统一顶栏 —— 非 Prism 页面（首页 / 五个文章页 / 两个法务页）
 *
 * Eddie 2026-09-04 定 D1：**全站一条顶栏**。此前站上有三套：
 *   文章页 138 高 / fixed / 左 64 / 品牌「SGS SOL GLOBAL STRATEGIES」
 *   首页   120 高 / fixed / 左 64 / 同上（矮 18px，因为字标少了阅读行距）
 *   法务页  57 高 / sticky / 左 24 / 品牌「← Prism　Prism」
 *   Prism   56 高 / sticky / 左 24 / 品牌「SGS Home · Prism」
 * 读者从文章页点进 Prism，顶栏当场矮 82px、品牌换写法、左边距从 64 跳到 24 ——
 * 「看起来不像同一个站」的头号来源，而推广落地页每次都要跨这道坎。
 *
 * Prism 那七页的同一条栏长在 js/prism-nav.js 里（它是脚本注入的）。**两处的值必须一致**：
 * 栏高 138、左线 64（--sp-16）、上下内边距 32（--sp-8）、按最后一行基线对齐、
 * 滚过 120px 收窄成一行。改一处就要改另一处。
 *
 * 🔴 守卫：test/format-role-standard.test.mjs 里那条「顶栏那两半必须逐值一致」逐值比对
 *    展开态/收窄态的内边距与对齐方式，另一条比对滚动阈值与窄屏断点。改单边会红。
 *    ⚠️ 这句话**曾经是假的** —— 2026-09-04 我先写了这条注释，守卫是 2026-09-05 被 Onyx
 *    审查抓出来之后才补上的。注释里的安全保证一旦不兑现，下一个人只改一边、测试全绿、
 *    两套顶栏悄悄漂开。这段历史留在这里，是因为它比结论本身更值得记住。
 *
 * ⛔ 左线 64 **刻意不跟内容列对齐**（内容列按页面类型 1064 / 656 / 712）：
 *    顶栏是页眉层、内容是内容层，两层各有各的左线。跟内容对齐会在换页面类型时跳。
 * ========================================================================== */

/* 底端对齐：字标那一列的最后一行是 SOL GLOBAL STRATEGIES，它的基线成为整条栏的基准线。
   ⛔ 不是 align-items:center —— 居中会让右侧那簇按钮与字标的**基线**差出十几像素。 */
nav.sgs-topbar,
.sgs-topbar {
  align-items: last baseline;
  padding: var(--sp-8) var(--sp-16);
  transition: padding var(--dur) ease;
}

/* 字标两行的行距。⛔ 这里**不能**靠 .r-read（文章的阅读行距 1.8）来给 ——
   守卫「带 r-read 的元素不许被任何后来者重新排行距」会红，而且它是对的：
   字标的行距该是字标自己的属性，收窄态要把它收紧，那就不能借别人的。
   ⇒ 从这八页的 nav 字标上摘掉 r-read，由这里给。值不变，仍是 1.8（前后逐元素实测确认）。 */
.sgs-topbar .logo,
.sgs-topbar .logo-sub { line-height: 1.8 /* line-height: 品牌字标两行的行距，与 js/prism-nav.js 的 .ps-mark/.ps-sub 同值。⛔ 不给它加行高 token：判据是「覆盖 5 处以上」，这里只有两处。 */; }

/* 右侧那一簇（返回链接 / 语言开关 / 主导航）不跟基线走，垂直居中。 */
.sgs-topbar > :not(.logo):not(.sgs-brand) { align-self: center; }

/* 收窄态：滚过 120px 之后字标并成一行，栏高 138 → 约 58。
   顶上一屏给品牌完整的样子，往下滚把地方还给内容。 */
.sgs-topbar.is-cond { align-items: center; padding: var(--sp-3) var(--sp-16); }
.sgs-topbar.is-cond .logo { flex-direction: row; align-items: baseline; gap: var(--sp-3);
  line-height: var(--lh-tight); }
.sgs-topbar.is-cond .logo-sub { margin-top: 0; line-height: var(--lh-tight); }

/* 🔴 窄屏：字标只留「SGS」，副行「SOL GLOBAL STRATEGIES」收起来。
      实测（390px 生产站）：不收的话 Prism 页顶栏要三行 —— 字标 47 + 面包屑 50 + 右侧按钮 31
      ＝ 177px，占 844 高屏幕的 **21%**；而文章页只有两行 99px。三行的根因是字标副行 211px 宽，
      加上右侧那簇 170px 放不进 358px 的可用宽度，右侧只能另起一行。
      ⛔ 桌面不动：那两行字标是品牌该有的样子，Eddie 定的 138 就是它撑起来的。
      ⚠️ 手机上留下的是「SGS」——身份还在，只是不展开全称。
   ⛔ 也别照收窄态那样把两行**并排** —— 并排之后两段宽度相加，比堆成两行更宽；
      Prism 那半站这么写过一版，390px 上横向溢出 118px（实测）。
      收窄态省的是**高度**，窄屏缺的是**宽度**，两件事方向相反；收起副行才两者都省。 */
@media (max-width: 640px) {
  nav.sgs-topbar,
  .sgs-topbar { align-items: center; flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); }
  .sgs-topbar .logo-sub { display: none; }
  .sgs-topbar .logo,
  .sgs-topbar.is-cond .logo { line-height: var(--lh-tight); }
}