/* ==========================================================================
   SATIOT 自定义样式层（蔡工知识库站）
   --------------------------------------------------------------------------
   挂载方式：geekdoc v4 的 partials/head/others.html 会自动引用 /custom.css，
             站点 static/ 优先级高于主题 static/，因此本文件直接覆盖主题里
             那个空的 custom.css 占位文件 —— 不用改主题任何一行。
   配色铁律：只使用主题 CSS 变量，绝不写死颜色。
             geekdoc 的变量在 @media (prefers-color-scheme: dark) 下整体重定义，
             所以只要用变量，亮色/暗色模式会自动跟随。
             例外只有一处：二维码底色必须纯白（否则暗色模式扫不出来），已注释标明。
   命名前缀：sat-  避免与主题的 gdoc- 冲突
   ========================================================================== */

/* ============================================================
   页头配色（蔡工 2026-10-21 定）
   ------------------------------------------------------------
   ① LOGO 行改白底：SATIOT 字标本身是蓝字（rgb(0,100,186)），
      压在深蓝页头上要靠一圈白晕提边，本色出不来；白底后字标原色可见。
   ② 系统栏目行改浅青蓝（参照 Viasat 顶栏 rgb(0,124,152)），
      比原来的深海军蓝亮一档，两行形成「白 / 青」分层，不再糊成一块。
   ③ 站名、副标题与右侧图标跟着改深色，否则白底上白字看不见。
   ------------------------------------------------------------
   为什么不直接改 --header-background：那个变量还被首页磁贴徽章
   （.sat-board__badge）等多处复用，改它会连带别处变色。
   这里另起 sat- 前缀，只在页头生效。
   ⚠️ 暗色模式必须写两处：手动切换（html[color-theme=dark]）与跟随系统
      （prefers-color-scheme），只写一处会在另一种情形下露出白底。
   ============================================================ */
:root {
  --sat-header-bg: #ffffff;
  --sat-header-fg: #16405f;
  --sat-header-sub: #5c7386;
  --sat-nav-bg: #007c9b;
  --sat-nav-fg: #ffffff;
  --sat-nav-on-bg: #00647d;
  --sat-nav-on-fg: #ffffff;
  --sat-nav-hover: rgba(255, 255, 255, 0.12);
  --sat-search-bg: #f4f6f7;
  --sat-search-border: #d5dbe1;
  --sat-icon-hover: rgba(22, 64, 95, 0.09);
  /* 字标在深色页头上要一圈白晕提边；白底上白晕等于糊边，直接不画 */
  --sat-logo-glow: none;
}

html[color-theme="dark"] {
  --sat-header-bg: #1b3546;
  --sat-header-fg: #e8f0f5;
  --sat-header-sub: #9fb4c2;
  --sat-nav-bg: #0b6d88;
  --sat-nav-on-bg: #085568;
  --sat-nav-on-fg: #ffffff;
  --sat-nav-hover: rgba(255, 255, 255, 0.12);
  --sat-search-bg: rgba(255, 255, 255, 0.08);
  --sat-search-border: rgba(255, 255, 255, 0.18);
  --sat-icon-hover: rgba(255, 255, 255, 0.14);
  --sat-logo-glow: drop-shadow(0 0 1px rgba(255, 255, 255, 0.65))
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.25));
}

@media (prefers-color-scheme: dark) {
  html:not([color-theme="light"]) {
    --sat-header-bg: #1b3546;
    --sat-header-fg: #e8f0f5;
    --sat-header-sub: #9fb4c2;
    --sat-nav-bg: #0b6d88;
    --sat-nav-on-bg: #085568;
    --sat-nav-on-fg: #ffffff;
    --sat-nav-hover: rgba(255, 255, 255, 0.12);
    --sat-search-bg: rgba(255, 255, 255, 0.08);
    --sat-search-border: rgba(255, 255, 255, 0.18);
    --sat-icon-hover: rgba(255, 255, 255, 0.14);
    --sat-logo-glow: drop-shadow(0 0 1px rgba(255, 255, 255, 0.65))
      drop-shadow(0 0 3px rgba(255, 255, 255, 0.25));
  }
}

/* 第一行（LOGO + 站名 + 搜索）：白底。
   主题原来在页头底部压 4px 深藏青（--footer-background）给它收口，
   换成白底后这条会变成一道突兀的深色粗线，改为 1px 细分隔。

   吸顶（2026-10-23 蔡工提，参照 viasat.com）
   ------------------------------------------------------------
   整块页头两行一起常驻要 134px（1440 屏约占 15%），窄屏折行后到 209px
   （768 屏约 23%）——常驻就太占地方了。所以做成**滚下去之后只留第二行导航条**：
   第一行（LOGO 行）滑出视口，导航条（桌面 49px、手机 88px）常驻。
   实测占比：桌面 5.4%、手机 10.4%，比整块常驻省一半以上。

   实现用 **负 top 值**而不是 display:none：
     display:none 会改变文档流高度，页面内容会在触发那一瞬间整体上跳 85px；
     负 top 不动流高度，页头只是"贴着视口上沿往上藏起来"，视觉上零跳变。
   --sat-hdr-row1 是第一行实测高度，由 /js/sat-ui.js 量出来写回，
   下面这两个兜底值是**没有 JS 时**用的（没 JS 时取 0，等于整块常驻，不会错位）。
   ============================================================ */
:root {
  --sat-hdr-row1: 0px;
  --sat-hdr-sticky: 0px;
}

.gdoc-header {
  /* 🔴 吸顶后正文会**从页头底下穿过**（滚动时页头一直在最上层），
     底色必须是**不透明**的，否则文字会透出来、和导航字叠成一团。
     当前 --sat-header-bg 是纯色（亮 #ffffff / 暗 #1b3546），本来就不透明；
     再加一道 background-color 兜底：哪天有人把它换成带 alpha 的值也不至于翻车。 */
  background-color: #ffffff;
  background-image: var(--sat-header-bg);
  color: var(--sat-header-fg);
  border-bottom: 1px solid var(--accent-color);
  position: sticky;
  top: calc(-1 * var(--sat-hdr-row1));
  /* 高于冻结表头（2）与正文任何层级，低于右下角三个悬浮钮（40/41） */
  z-index: 30;
}

html[color-theme="dark"] .gdoc-header {
  background-color: #1b3546;
}

@media (prefers-color-scheme: dark) {
  html:not([color-theme="light"]) .gdoc-header {
    background-color: #1b3546;
  }
}

/* 吸顶后：点锚点跳转（目录、表内锚）不会被导航条盖住标题。
   只给带 id 的标题与表格加，不给全站 [id] 加 —— 那会影响锚点定位的边距计算。 */
.gdoc-markdown h2[id],
.gdoc-markdown h3[id],
.gdoc-markdown h4[id],
.sat-cmp[id] {
  scroll-margin-top: calc(var(--sat-hdr-sticky) + 0.75rem);
}

/* 打印时纸面上没有"滚动"，吸顶会把每页顶部都压一块导航条 */
@media print {
  .gdoc-header {
    position: static;
  }
}

.gdoc-brand__title {
  color: var(--sat-header-fg);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.gdoc-brand__subtitle {
  color: var(--sat-header-sub);
  /* 2026-10-22 蔡工：站名与下面那行四个功能词挤在一起，读起来像一行。
     拉开 0.34rem 后两行各自成立：上面是"站叫什么"，下面是"站里有什么"。
     不加大到 0.5rem 以上 —— 页头高度会跟着长，第二行导航整体下移。 */
  margin-top: 0.34rem;
}

/* 站名前的「SATIOT 」字样（2026-10-22）
   ------------------------------------------------------------
   桌面：隐藏 —— 左上角的 LOGO 已经写着 SATIOT，文字里再说一遍是重复。
   窄屏：显示 —— 主题在 40rem 以下把品牌图 display:none 掉了，
        这时若不补回文字，手机上整个页头就没有品牌词了。
   所以这一个词是"按断点切换"的，不是删掉。
   ⚠️ 断点必须与主题隐藏品牌图的那一档对齐（实测：656px 起才有 LOGO），
   写 40rem 会在 641–655px 之间出现"图没了、字也没了"的空档。 */
.sat-brand-word {
  display: none;
}

@media (max-width: 41rem) {
  .sat-brand-word {
    display: inline;
  }

  /* 加上 SATIOT 之后一行放不下，字号降一档：11 个汉字 + 品牌词约 265px，
     390 宽的屏幕上仍是一行，不会挤成两行。 */
  .gdoc-brand__title {
    font-size: 1.15rem;
  }
}

/* 右侧图标（配色切换、首页）：白底上必须是深色，否则白icon白底看不见 */
#gdoc-color-theme .gdoc-icon,
.gdoc-menu-header__home .gdoc-icon {
  color: var(--sat-header-fg);
}

/* 第二行（系统栏目）：浅青蓝。border-top 保留 —— 就是白底与青蓝之间那道细线 */
.sat-nav {
  background: var(--sat-nav-bg);
  border-top: 1px solid var(--accent-color);
}

/* ---------- 区块通用 ---------- */
.sat-section {
  margin: 2.5rem 0;
}

.sat-section__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--accent-color);
}

.sat-section__title {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.4;
}

.sat-section__note {
  font-size: 0.85rem;
  color: var(--control-icons);
}

/* ---------- 首页：定位区 ---------- */
.sat-hero {
  margin: 0 0 0.5rem;
  padding: 1.5rem 0 1.75rem;
  border-bottom: 1px solid var(--accent-color);
}

.sat-hero__title {
  margin: 0 0 0.75rem;
  font-size: 1.85rem;
  line-height: 1.3;
}

.sat-hero__lead {
  margin: 0 0 1.25rem;
  font-size: 1.02rem;
  line-height: 1.75;
}

.sat-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  color: var(--control-icons);
}

.sat-stats b {
  color: var(--link-color);
  font-size: 1.15rem;
  margin-right: 0.2rem;
}

/* ---------- 首页：系统栏目磁贴 ---------- */
.sat-grid {
  display: grid;
  gap: 1rem;
}

.sat-grid--boards {
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.sat-board {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem;
  border: 1px solid var(--accent-color);
  border-radius: 0.5rem;
  background: var(--accent-color-lite);
  text-decoration: none;
  color: var(--body-font-color);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

a.sat-board:hover {
  border-color: var(--link-color);
  transform: translateY(-2px);
}

.sat-board__badge {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: var(--header-background);
  color: var(--header-font-color);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.sat-board__body {
  flex: 1 1 auto;
  min-width: 0;
}

.sat-board__name {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.sat-board__desc {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--control-icons);
}

.sat-board__count {
  flex: 0 0 auto;
  font-size: 0.78rem;
  white-space: nowrap;
  color: var(--control-icons);
}

.sat-board--empty {
  background: transparent;
  border-style: dashed;
}

.sat-board--empty .sat-board__badge {
  opacity: 0.45;
}

/* ---------- 首页：按用途查 ---------- */
.sat-grid--uses {
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
}

.sat-use {
  display: block;
  padding: 0.875rem 1rem;
  border: 1px solid var(--accent-color);
  border-radius: 0.5rem;
  text-decoration: none;
  color: var(--body-font-color);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.sat-use:hover {
  border-color: var(--link-color);
  background: var(--accent-color-lite);
}

.sat-use__name {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
  font-size: 0.98rem;
}

.sat-use__desc {
  display: block;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--control-icons);
}

/* ---------- 首页：最近更新 ---------- */
.sat-recent {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sat-recent li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--accent-color);
  font-size: 0.92rem;
}

.sat-recent li:last-child {
  border-bottom: none;
}

.sat-recent__link {
  flex: 1 1 auto;
  min-width: 0;
}

.sat-recent__sec {
  flex: 0 0 auto;
  font-size: 0.78rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--accent-color);
  border-radius: 0.25rem;
  color: var(--control-icons);
}

.sat-recent time {
  flex: 0 0 auto;
  font-size: 0.8rem;
  color: var(--control-icons);
}

/* ---------- 栏目列表页 ---------- */
.sat-list__intro {
  margin: 0 0 1.5rem;
}

.sat-list__intro p {
  margin: 0 0 0.5rem;
}

.sat-list__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin: 1.25rem 0 0.25rem;
  font-size: 0.88rem;
  color: var(--control-icons);
}

.sat-list__bar b {
  color: var(--body-font-color);
  font-size: 1rem;
}

/* ---------- 筛选条（借鉴铱星 IPP 资源下载窗口的信息架构）---------- */
.sat-filter {
  margin: 0.75rem 0 1.5rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--accent-color);
  border-radius: 0.5rem;
  background: var(--accent-color-lite);
}

.sat-filter__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
}

.sat-filter__row + .sat-filter__row {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--accent-color);
}

.sat-filter__label {
  flex: 0 0 auto;
  font-size: 0.82rem;
  color: var(--control-icons);
}

.sat-filter__input {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--accent-color);
  border-radius: 0.375rem;
  background: var(--body-background);
  color: var(--body-font-color);
  font-size: 0.9rem;
  font-family: inherit;
}

.sat-filter__input:focus {
  outline: none;
  border-color: var(--link-color);
}

.sat-filter__reset {
  flex: 0 0 auto;
  cursor: pointer;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--accent-color);
  border-radius: 0.375rem;
  background: var(--body-background);
  color: var(--body-font-color);
  font-size: 0.82rem;
  font-family: inherit;
}

.sat-filter__reset:hover {
  border-color: var(--link-color);
}

.sat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.sat-chip {
  cursor: pointer;
  padding: 0.2rem 0.62rem;
  border: 1px solid var(--accent-color);
  border-radius: 1rem;
  background: var(--body-background);
  color: var(--body-font-color);
  font-size: 0.79rem;
  font-family: inherit;
  line-height: 1.6;
}

.sat-chip:hover {
  border-color: var(--link-color);
}

.sat-chip.is-on {
  background: var(--button-background);
  border-color: var(--button-border-color);
  color: var(--header-font-color);
}

.sat-chip__n {
  opacity: 0.7;
  margin-left: 0.25rem;
}

/* ---------- 文章卡片 ---------- */
.sat-grid--posts {
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}

.sat-card {
  display: flex;
  flex-direction: column;
  padding: 1rem 1.125rem;
  border: 1px solid var(--accent-color);
  border-radius: 0.5rem;
  background: var(--accent-color-lite);
  text-decoration: none;
  color: var(--body-font-color);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

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

.sat-card__title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

.sat-card:hover .sat-card__title {
  color: var(--link-color);
}

.sat-card__desc {
  flex: 1 1 auto;
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--control-icons);
}

.sat-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
  font-size: 0.77rem;
  color: var(--control-icons);
}

.sat-card__tag {
  padding: 0.08rem 0.42rem;
  border: 1px solid var(--accent-color);
  border-radius: 0.25rem;
}

.sat-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--control-icons);
  font-size: 0.92rem;
}

/* ---------- 联系方式页 ---------- */
.sat-contact__table {
  margin: 1rem 0 0;
}

.sat-contact__table td,
.sat-contact__table th {
  vertical-align: top;
}

/* 公司简介表首列：4 字标签（成立时间／业务定位／通信业务／涉及系统／服务场景）
   在自动表格布局下会被右侧长内容列压到只剩两三个字宽、折成竖排。
   原因：右侧那一列内容长、吃走大部分宽度，而中文可逐字断行，
   首列的最小宽度只有 1 个字，浏览器就真敢把它压到那么窄。
   处理：给首列一个下限 —— 4 字 × 16px = 64px，加上单元格左右各 1rem
   内边距 32px，共 96px，取 6.5em（104px）留一点余量。
   范围：只挂在联系方式页（body 类由 baseof 输出），本页其余两张表的
   首列内容本来就长，宽度由内容撑开，min-width 不会改变它们的排版；
   全站其他页面一律不动。（2026-10-14，蔡工反馈截图）
   注：只写 min-width、不写 white-space: nowrap —— nowrap 会让本页
   「你是来办哪件事的」表（首列 16—30 字的句子）撑出横向滚动。 */
.sat-page-contact .sat-table-wrap tbody th[scope="row"] {
  min-width: 6.5em;
}

.sat-contact__tel {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.sat-qr {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin: 1.25rem 0 0;
}

.sat-qr figure {
  margin: 0;
  text-align: center;
}

/* 二维码必须纯白底才能被扫描识别 —— 这一处颜色是有意写死的 */
.sat-qr img {
  display: block;
  width: 8rem;
  height: 8rem;
  object-fit: contain;
  border: 1px solid var(--accent-color);
  border-radius: 0.375rem;
  background: #ffffff;
}

.sat-qr figcaption {
  margin-top: 0.45rem;
  font-size: 0.82rem;
  color: var(--control-icons);
}

.sat-company {
  margin: 1rem 0 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--accent-color);
  border-left: 3px solid var(--button-border-color);
  border-radius: 0.375rem;
  background: var(--accent-color-lite);
  line-height: 1.9;
}

.sat-company strong {
  font-size: 1.05rem;
}

/* ---------- 顶部导航条（效果图方案 A：两行式）---------- */
/* 为什么自己写：geekdoc 自带的顶部菜单只支持图标、不支持文字，做不出文字导航条。
   配色见文件开头「页头配色」段：底色与文字色都走 sat- 变量，暗色自动跟随。 */
.sat-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.sat-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 🔴 2026-10-23 手机截图现形的毛病：「海事卫星 Inmarsat」被切掉半个字。
   查下来是三件事叠在一起，缺一条都治不好，记清楚别再拆：

   ① **.sat-nav__list 这个 flex 子项必须 min-width:0**
      默认 min-width:auto 时它按"最长一行内容"撑，永远撑不出换行的机会。
   ② **.sat-nav__inner（.container 那层，也是 flex 容器）也必须 min-width:0**
      它是 .sat-nav__list 的父级 flex 容器。父级不收窄，子级再怎么 min-width:0
      也只是"名义上允许收窄"，实际可用宽度还是 890px 那种内容宽 ——
      实测 ul 报 350px 宽，里面 li 却一路排到 901px（九个项排成一行）。
   ③ **每个 li 自己做 flex 容器（display:flex）**
      光给 li 设 flex:0 0 auto 不够：li 仍是块级盒子、里面是行内元素，
      行内元素可以溢出 li 而不触发换行，于是「海事卫星 Inmarsat」伸到 421px
      （屏幕只有 390）、被视口切掉半个字。
      li 变成 flex 容器后，a 才按 li 的宽度算，撑不开就跟着 ul 整体换行。

   ⚠️ a 上**不要加 overflow:hidden**：加了会让链接变成裁剪盒子、基线变化，
      与右侧组（常见问题/资料/联系方式）错开 2px，整行对不齐 →
      右侧组被挤到第二行，导航条 49px→54px（吸顶时常驻，白占 5px）。
   ⚠️ 也别给 `.sat-nav__list > li` 以外的 li 加规则 —— 右侧组的 li 不该被动到。 */
.sat-nav__list {
  min-width: 0;
  flex: 0 1 auto;
}

.sat-nav__inner {
  min-width: 0;
}

.sat-nav__list > li {
  display: flex;
  flex: 0 0 auto;
  max-width: 100%;
  min-width: 0;
}

/* 🔴 必须连 :link / :visited 一起写（2026-09-23，见坑 27）
   主题有一行全局 a:visited{color:var(--link-color-visited)}，特异度 (0,1,1)；
   只写 .sat-nav__link 是 (0,1,0) —— 一旦点过那个栏目，链接就变紫色 (119,73,191)，
   压在深蓝底上几乎看不见（只剩 1.5:1）。写成 .sat-nav__link:visited 提到 (0,2,0) 才压得住。
   ⚠️ 这个毛病 getComputedStyle 查不出来（浏览器出于隐私保护，对 :visited 一律返回未访问的颜色），
      只有"真的点过 + 真机截图"才现形。 */
.sat-nav__link,
.sat-nav__link:link,
.sat-nav__link:visited {
  display: inline-block;
  padding: 0.35rem 0.55rem;
  border-radius: 0.3rem;
  color: var(--sat-nav-fg);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  /* 底色由青蓝承载，悬停/选中用半透明白块，不用另配颜色 */
  transition: background-color 0.15s ease-in-out;
}

.sat-nav__link:hover {
  background: var(--sat-nav-hover);
}

/* 当前栏目：比栏底深一档的青底 + 白字（#00647d，白字对比度 6.7:1）。
   原来是主题的 --button-background（中蓝），压在青蓝底上两块蓝撞在一起、分不出来。
   试过三种：半透明白块（白字对比度只有 3.5:1，不达 AA）、实白块（像按钮，抢眼）、
   底部下划线（太弱）—— 取深一档同色系，既不抢注意力也能看出「你在这儿」。 */
.sat-nav__link.is-on {
  background: var(--sat-nav-on-bg);
  color: var(--sat-nav-on-fg);
  font-weight: 600;
}

/* 栏目页还没建立的占位：看得见、点不了，避免死链
   透明度 0.45 时对比度只剩 2.4:1，等于看不清——提到 0.62 兼顾"可辨识"与"不可点" */
.sat-nav__link.is-off {
  opacity: 0.62;
  cursor: default;
}

/* 2026-10-19 蔡工定：栏目名不加外框，只显示文字。
   原来「资料」「联系方式」各带一个 1px 描边框，与左侧七个栏目（纯文字）并列时
   显得像两个按钮，抢注意力。去掉边框后与左栏同一视觉层级，只用字重区分。 */
.sat-nav__link--cta {
  font-weight: 600;
}

/* ---------- 顶部导航条：「低轨星座」悬停展开子星座（2026-10-23 晚间）----------
   蔡工要的是「鼠标放上去自动展开」，下午否掉的是「点右边小箭头才展开」那种。
   所以这里刻意不接管点击：文字本身还是 /leo/ 的普通链接，点一下直接进栏目页。

   🔴 三条红线，改之前先看清楚：
     ① 子菜单用 visibility/opacity 收起，**不能 display:none 或 JS 动态注入**。
        链接必须始终在 DOM 里 —— 爬虫和 AI 抓取工具按 DOM 取链接，
        一旦变成"悬停才创建"，这三个星座对机器就等于不存在。GEO 直接掉。
     ② 只做 :hover 不够，还要 :focus-within：键盘用户 Tab 到链接上也要能展开，
        否则键盘走不到子项。
     ③ 面板 top 用 100%（贴着 li 底边）而不是加间距 —— 中间留空隙的话，
        鼠标从链接斜着移向面板会经过一段"什么都不属于"的区域，菜单提前收起。 */
.sat-navmore {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  min-width: 0;
}

/* 文字后面跟一个小箭头，提示"这里有东西"。纯装饰，不单独可点 */
.sat-nav__link--hasmore {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.sat-navmore__caret {
  width: 0.55rem;
  height: 0.35rem;
  flex: 0 0 auto;
  opacity: 0.75;
  transition: transform 0.18s ease;
}

.sat-navmore:hover .sat-navmore__caret,
.sat-navmore:focus-within .sat-navmore__caret {
  transform: rotate(180deg);
  opacity: 1;
}

.sat-navmore__panel {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 25;
  padding-top: 0.35rem; /* 视觉上留一条缝，但这段区域仍然属于面板，鼠标穿过去不会收起 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.25rem);
  transition:
    opacity 0.16s ease,
    visibility 0s linear 0.16s,
    transform 0.16s ease;
}

/* 展开延时 120ms：鼠标扫过导航条时不要每个都弹一下 */
.sat-navmore:hover .sat-navmore__panel,
.sat-navmore:focus-within .sat-navmore__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.16s ease 0.12s,
    visibility 0s linear 0.12s,
    transform 0.16s ease 0.12s;
}

.sat-navmore__inner {
  min-width: 19rem;
  padding: 0.5rem;
  background: var(--body-background);
  border: 1px solid var(--accent-color);
  border-radius: 0.4rem;
  /* 吸顶时页头本身不是 fixed，阴影可以正常投到正文上；比边框更轻，不显笨 */
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.12);
}

.sat-navmore__head {
  margin: 0 0 0.3rem;
  padding: 0.15rem 0.5rem 0.3rem;
  border-bottom: 1px solid var(--accent-color);
  color: var(--sat-header-sub, #5c7386);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.sat-navmore__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sat-navmore__list a,
.sat-navmore__list a:visited {
  display: block;
  padding: 0.4rem 0.5rem;
  border-radius: 0.25rem;
  color: var(--body-font-color);
  text-decoration: none;
}

.sat-navmore__list a:hover {
  background: var(--accent-color-lite);
}

.sat-navmore__name {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
}

.sat-navmore__desc {
  display: block;
  margin-top: 0.1rem;
  color: var(--sat-header-sub, #5c7386);
  font-size: 0.78rem;
  line-height: 1.45;
}

/* 手机上没有 hover，导航本来就是横向滑动的单行（2026-10-21 既定），
   子星座改由 /leo/ 栏目页顶部那条导航带露出，这里不出现下拉。 */
@media (max-width: 45rem) {
  .sat-navmore__panel {
    display: none;
  }
  .sat-navmore__caret {
    display: none;
  }
}

/* 打印：下拉面板是给鼠标用的，纸面上只会凭空多出三行字 */
@media print {
  .sat-navmore__panel {
    display: none !important;
  }
}

/* ============================================================
   打印（2026-10-23 蔡工在打印预览里发现的问题，分两轮收干净）
   ------------------------------------------------------------
   ① 导航条在纸面上带出一条横向滚动条
      根因：导航列表是 overflow-x:auto 的容器（手机横向滑动那套），
      打印按 96dpi 排 A4，宽度只有约 **717px**，12 项排不下，Chrome 画滚动条。
   ② 分享钮、返回顶部、联系方式浮块 —— 屏幕上的交互件，打印一律不出现。
   ③ 页脚只印出 About —— 见下面那条 🔴🔴，是主题自己的打印规则干的。

   🔄 2026-10-23 第二轮（蔡工：**纸面上导航要显示全**，换行也行）：
      第一轮只留了首页与联系方式，蔡工看过说不完整。重新做"排得下"的账：
        · 纸宽（A4 纵向，96dpi，扣掉浏览器默认页边距）≈ 717px；
        · 导航 12 项自然宽合计 **818px**，放不下；
        · 缩字号也不够：14px→912 / 13px→861 / 12px→809，**12px 仍超**；
        · 所以只剩一条路：**允许换行**，并压紧字号与内边距让它落在两行内。
      最终：**11 项全在、排成一行、不出滚动条**。做法是三处一起让宽度：
        · 字号压到 11.5px、行距 1.35、内边距 0.2rem 0.26rem；
        · 容器左右 padding 归零（纸面上那点留白对阅读没帮助，约 18pt）；
        · 右侧组用 display:contents 并进左栏同一行流，不再单独占一行。
      实测最右的「联系方式」落在 x1=565pt，纸面内容右边界 567.6pt —— 余量 2.6pt，
      **别再往里加栏目**：第 12 项必然掉到第二行，届时要么再压字号、要么接受换行。
      纸面上人是"看"不是"点"，字号小一点完全够用，比少两栏好。
   ============================================================ */
@media print {
  /* 导航：**全量显示**，允许换行，绝不出滚动条 */
  .sat-nav {
    display: block;
    padding: 0.1rem 0;
  }

  .sat-nav__inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    /* 屏幕上用 gap 0.5rem 1rem，纸面压到 0.15rem，省出来的都是排得下的空间 */
    gap: 0.15rem 0.15rem !important;
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
    /* 纸面上容器左右那点留白对阅读没帮助，让出来正好把「联系方式」收进第一行 */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .sat-nav__list {
    display: flex !important;
    /* 🔴 这三行是"不出滚动条"的关键：打印时绝不能是滚动容器 */
    overflow: visible !important;
    flex-wrap: wrap !important;
    width: auto !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    gap: 0 !important;
  }

  .sat-nav__list > li {
    display: flex !important;
  }

  /* 「资料」是下拉，纸面上点不开；它对应的几个页面在页脚已经有了，
     这里连同悬停子菜单一起收掉，不占纸面 */
  .sat-nav__right > .sat-drop,
  .sat-navmore__panel,
  .sat-drop__list {
    display: none !important;
  }

  /* 右侧组（常见问题 / 联系方式）**并进左栏同一行流**：
     屏幕上它靠 margin-left:auto 贴右，打印时那样会单独占一整行 ——
     实测两行会让页头从 31px 涨到 60px 左右，白占纸面。
     这里让 .sat-nav__inner 变成"一块可换行的行内流"，两组排在一起。 */
  .sat-nav__right {
    display: contents !important;
  }

  /* 导航字：纸面上只"看"不"点"，压到 11.5px，配合上面容器 padding 归零，
     11 项正好排满一行（实测余量 2.6pt，见上面注释） */
  .sat-nav .sat-nav__link,
  .sat-nav .sat-drop__btn {
    padding: 0.2rem 0.26rem !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
  }

  /* 栏目名后面那个下箭头是"此处可展开"的提示，纸面上展不开，去掉 */
  .sat-navmore__caret {
    display: none !important;
  }

  /* 屏幕上用不到的交互件：打印一律隐藏 */
  .sat-backtop,
  .sat-share,
  .sat-share__tip,
  .sat-cfloat,
  .sat-search,
  .sat-hsearch {
    display: none !important;
  }

  /* 链接后面不需要"可点"的视觉暗示，去掉底色省墨 */
  .sat-nav__link {
    background: none !important;
    color: #000 !important;
    text-decoration: none !important;
  }

  /* 🔴 页脚：打印默认不打印背景色，深绿底会消失，而链接是浅薄荷 #9fe6bd ——
     白纸配浅薄荷，等于看不见。所以打印时把页脚一律翻成黑字，
     并给一条上边框代替原本的深色块，读者仍能看出"正文到此结束"。 */
  .gdoc-footer,
  .gdoc-footer a,
  .gdoc-footer a:visited,
  .gdoc-footer__entity,
  .gdoc-footer__entity .gdoc-footer__link {
    color: #000 !important;
    background: transparent !important;
    border-top-color: #999 !important;
    text-decoration: none !important;
  }

  .gdoc-footer {
    border-top: 1px solid #999 !important;
  }

  /* 🔴🔴 主题自带一条打印规则：`.gdoc-footer .container span:not(:first-child){display:none}`，
     意思是"纸面上只印页脚第一个 span"——这条规则本来是为 geekdoc 默认的
     「基于 Hugo 制作」那行服务，但我们的页脚有 8 个入口，照它执行就只剩 About。
     蔡工 2026-10-23 在打印预览里看到的就是这个。
     这里连同主题的 `.gdoc-nav`（页内左右翻页）一起覆盖回来。 */
  .gdoc-footer .container span:not(:first-child) {
    display: inline !important;
  }

  /* 但外层那几行仍然是 flex，行内元素要回到行内流里才排得整齐 */
  .gdoc-footer .container section {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.15rem 1rem !important;
  }

  .gdoc-footer__item--row {
    margin-right: 0 !important;
  }
}

/* 尾部一组：常见问题 + 资料下拉 + 联系方式（蔡工 2026-10-21 改）
   这三个必须在同一个 flex 容器里 —— 它们一起换行、一起靠右，
   才不会再出现「常见问题留在左边缘、资料与联系方式甩到最右、
   中间空六七百像素」那种断成两截的样子。 */
.sat-nav__right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* 换行后这一组独占一行时，靠右对齐（space-between 管不到单元素的行） */
  margin-left: auto;
  /* 🔴 2026-10-23：必须允许收窄（min-width:auto 时按内容宽撑），
     否则 1440 下它宁可换行也不缩，被挤到第二行、导航条从 49px 涨到 54px。
     收窄到极限之后仍放不下才会换行 —— 那才是真放不下。 */
  min-width: 0;
  flex: 0 1 auto;
}

/* 宽屏：把这一组拆回独立项，「常见问题」贴回栏目行末尾，
   只留「资料 / 联系方式」靠右 —— 与 2026-10-21 之前的桌面外观完全一致。
   阈值 74rem = 1184px：再窄下去整条导航就放不下一行了，那时让三个一起换行。
   ⚠️ 拆开后外层不再承担推右，margin-left:auto 改挂到「资料」下拉上。 */
@media (min-width: 74rem) {
  .sat-nav__right {
    display: contents;
  }

  .sat-nav__right > .sat-drop {
    margin-left: auto;
  }
}

/* 窄屏（≤73.99rem，约 1184px 以下）：右侧那组（常见问题 / 资料 / 联系方式）
   整体独占第二行、靠右对齐。
   ⚠️ 2026-10-23 两次改动，原因不同，别合并成一条：
      ① 阈值从 55rem 提到 74rem —— 原来只在 880px 以下生效，而 Win 左右分屏
         正是 960px，落在 880~1184 空档里：栏目折成两行、右侧组被甩到第三行最右，
         中间空一大片。
      ② 同一天下午又发现另一个毛病（蔡工截图）：「常见问题」用 display:contents
         被拉回左侧、「资料 / 联系方式」被 margin-left:auto 推到最右，
         而前一行已经折成两行 —— 结果「常见问题」孤零零挂在左边远处，
         看起来像和「卫星 SOS」隔了半个屏幕。现在窄屏下右侧组**整组不动**，
         独占一行靠右，三个连在一起，位置固定、不再随折行漂移。
   阈值 74rem：实测一级 879px + 右侧 219px = 1098px，容器 1272px；
   低于 1184px 就放不下了，所以从 74rem 开始交给这条规则。 */
@media (max-width: 73.99rem) {
  .sat-nav__right {
    flex: 0 0 auto;
    margin-left: auto;
  }
}

/* ---------- 顶部导航条：资料下拉 ---------- */
.sat-drop {
  position: relative;
}

.sat-drop__btn {
  cursor: pointer;
  /* 内边距与 .sat-nav__link 对齐（0.35rem 0.55rem），去掉边框后两行文字才在同一基线上 */
  padding: 0.35rem 0.55rem;
  border: none;
  border-radius: 0.3rem;
  color: var(--sat-nav-fg);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  list-style: none;
  transition: background-color 0.15s ease-in-out;
}

/* 没有边框了，鼠标移上去要有反应，否则分不清能不能点（与栏目一致用半透明白块） */
.sat-drop__btn:hover {
  background: var(--sat-nav-hover);
}

/* 展开时给个状态，否则点开和没点开长得一样 */
.sat-drop[open] .sat-drop__btn {
  font-weight: 600;
}

.sat-drop__btn::-webkit-details-marker {
  display: none;
}

.sat-drop__list {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 20;
  min-width: 11rem;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--body-background);
  border: 1px solid var(--accent-color);
  border-radius: 0.4rem;
}

/* 兜底：有些浏览器对 details 子元素的隐藏不彻底，显式关掉 */
.sat-drop:not([open]) .sat-drop__list {
  display: none;
}

/* 下拉里的分组小标题（2026-10-21）：
   把"本站写的内容"和"去别处查的跳转"分开，点开不再是一锅粥。
   不是可点项，所以不铺底、不加 hover，只做一行小字＋上分隔线。 */
.sat-drop__group {
  margin: 0.3rem 0 0.15rem;
  padding: 0.15rem 0.5rem 0.25rem;
  color: var(--sat-header-sub, #5c7386);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.sat-drop__list > li:first-child.sat-drop__group {
  margin-top: 0;
  border-top: none;
  padding-top: 0.1rem;
}

/* 第二个及以后的分组才画上分隔线（第一个贴着列表顶边，不需要） */
.sat-drop__group:not(:first-child) {
  border-top: 1px solid var(--accent-color);
}

.sat-drop__list a,
.sat-drop__list a:visited {
  display: block;
  padding: 0.35rem 0.5rem;
  border-radius: 0.25rem;
  color: var(--body-font-color);
  text-decoration: none;
  font-size: 0.9rem;
}

.sat-drop__list a:hover {
  background: var(--accent-color-lite);
  text-decoration: none;
}

/* ---------- 栏目页顶部：本栏目下辖的星座导航带（2026-10-23）----------
   为什么不用顶部下拉：下拉要点栏目右边那个很小的箭头才展开，手机上更难，
   而且「低轨卫星星座」本身是一整块可点区域，再在右边塞一个箭头很别扭。
   改成在栏目页首屏直接铺开：每个子栏目一块，标题 + 一句它能干什么，
   点哪儿都进得去。子栏目还在下拉里的记忆成本因此归零。 */
.sat-subnav {
  margin: 1rem 0 1.4rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--accent-color);
  border-radius: 0.5rem;
  background: var(--accent-color-lite, #f6f9fa);
}

.sat-subnav__label {
  display: block;
  margin-bottom: 0.6rem;
  color: var(--sat-header-sub, #5c7386);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.sat-subnav__items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.sat-subnav__item,
.sat-subnav__item:visited {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.6rem 0.7rem;
  border-radius: 0.4rem;
  background: var(--body-background, #fff);
  border: 1px solid transparent;
  color: var(--body-font-color);
  text-decoration: none;
  transition: border-color 0.15s ease-in-out;
}

.sat-subnav__item:hover {
  border-color: var(--sat-nav-bg, #007c9b);
  text-decoration: none;
}

.sat-subnav__badge {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.3rem;
  background: var(--sat-nav-bg, #007c9b);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
}

.sat-subnav__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.sat-subnav__name {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
}

.sat-subnav__desc {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--sat-header-sub, #5c7386);
}

@media (max-width: 45rem) {
  .sat-subnav__items {
    grid-template-columns: 1fr;
  }
}

/* ---------- 顶部导航条：搜索（从左栏搬家过来的）----------
   2026-10-21 蔡工定：常驻形态改成放大镜图标，点开才展开输入框。
   为什么：① 白底页头本来就窄，一条 13rem 的输入框占掉三分之一；
           ② 大多数访客不搜，输入框常驻等于常年摆一个没人用的控件；
           ③ 手机上原来整块被隐藏（≤45rem），改成图标后手机也能搜了。
   无 JS 时退化成原样：按钮不显示、输入框直接露出（见 .sat-js 前缀规则）。 */
.sat-hsearch {
  display: flex;
  align-items: center;
  position: relative;
}

/* 图标按钮：默认（没有 JS）不出现，搜索框照旧可见 */
.sat-hsearch__btn {
  display: none;
}

.sat-js .sat-hsearch__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: 0.3rem;
  background: transparent;
  color: var(--sat-header-fg);
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

.sat-js .sat-hsearch__btn:hover {
  background: var(--sat-icon-hover);
}

.sat-hsearch__btn .gdoc-icon {
  color: inherit;
  cursor: pointer;
}

/* 关闭态用 ×（同一个按钮两副面孔，不必再加一个控件） */
.sat-hsearch__ico-close {
  display: none;
}

.sat-hsearch.is-open .sat-hsearch__ico-search {
  display: none;
}

.sat-hsearch.is-open .sat-hsearch__ico-close {
  display: block;
}

/* 展开前把输入框收起；勾上 .is-open 才露出来 */
.sat-js .sat-hsearch .gdoc-search {
  display: none;
}

.sat-js .sat-hsearch.is-open .gdoc-search {
  display: flex;
}

.sat-hsearch .gdoc-search {
  width: 13rem;
  max-width: 38vw;
}

/* 白底页头上，原来那块 #f4f6f7 的输入框几乎看不见边界，补一道细边 */
.gdoc-search__input {
  background: var(--sat-search-bg);
  border-color: var(--sat-search-border);
}

/* 聚焦时用导航条那支青蓝描边，和页头下半截呼应 */
.gdoc-search__input:focus {
  border-color: var(--sat-nav-bg);
}

/* 结果面板：主题默认与输入框同宽（13rem），中文标题一行放不下几个字，
   五条结果就撑成一长条。放宽到 24rem 并靠输入框右边缘展开 ——
   输入框本来就在页面右侧，靠右展开不会顶出屏幕。 */
.sat-hsearch .gdoc-search__list {
  left: auto;
  right: 0;
  width: 24rem;
  max-width: calc(100vw - 2.5rem);
}

/* ---------- 搜索兜底面板（2026-10-21）------------------------
   搜不到的时候必须有出路，否则那一片空白就是用户离开的那一刻。
   面板由 /js/sat-search.js 填内容：同义词改查的结果，或六个常用入口。
   定位与主题的结果列表一致（都是输入框下方的浮层），不会互相遮挡 ——
   主题列表只在有命中时可见（has-hits），兜底只在没命中时出现。 */
.sat-search-alt {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: auto;
  right: 0;
  width: 24rem;
  max-width: calc(100vw - 2.5rem);
  z-index: 30;
  padding: 0.5rem 0.75rem 0.6rem;
  background: var(--body-background);
  border: 1px solid var(--accent-color);
  border-radius: 0.4rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  font-size: 0.9rem;
}

.sat-search-alt[hidden] {
  display: none;
}

.sat-search-alt__tip {
  margin: 0 0 0.35rem;
  color: var(--control-icons);
  font-size: 0.82rem;
  line-height: 1.5;
}

.sat-search-alt__tip b {
  color: var(--body-font-color);
  font-weight: 600;
}

/* 第二行说明"按什么找到的"，比第一行弱一档 */
.sat-search-alt__tip--sub {
  margin: -0.15rem 0 0.45rem;
  color: var(--link-color);
}

.sat-search-alt__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sat-search-alt__item {
  display: block;
  padding: 0.35rem 0.4rem;
  border-radius: 0.25rem;
  color: var(--body-font-color);
  text-decoration: none;
  line-height: 1.45;
}

.sat-search-alt__item:hover,
.sat-search-alt__item:focus {
  background: var(--accent-color-lite);
  text-decoration: none;
}

/* 所属栏目做成小标签，让人一眼知道点进去是哪一类内容 */
.sat-search-alt__tag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0 0.35rem;
  border-radius: 0.25rem;
  background: var(--accent-color-lite);
  color: var(--control-icons);
  font-size: 0.72rem;
  vertical-align: 1px;
}

/* 展开初始态：一行短标签（术语 / 选型 / 资费 …），点一下就进 */
.sat-search-alt__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
}

.sat-search-alt__chip {
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--sat-search-border);
  border-radius: 999px;
  background: var(--sat-search-bg);
  color: var(--body-font-color);
  font-size: 0.82rem;
  text-decoration: none;
  line-height: 1.6;
}

.sat-search-alt__chip:hover,
.sat-search-alt__chip:focus {
  border-color: var(--sat-nav-bg);
  color: var(--sat-nav-bg);
  text-decoration: none;
}

.sat-search-alt__foot {
  margin: 0.5rem 0 0;
  padding-top: 0.4rem;
  border-top: 1px solid var(--accent-color-lite);
  color: var(--control-icons);
  font-size: 0.8rem;
}

.sat-search-alt__foot a {
  color: var(--link-color);
  text-decoration: none;
}

.sat-search-alt__foot a:hover {
  text-decoration: underline;
}

/* 结果条数：主题每次检索会清空列表，这一行由 JS 每次重新插到最前面 */
.sat-search-note {
  padding: 0.15rem 0.5rem 0.3rem;
  color: var(--control-icons);
  font-size: 0.78rem;
}

/* ---------- 文章页：正文 + 右侧本文目录 ---------- */
.sat-doc {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

.sat-doc__body {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 52rem;
}

.sat-doc__toc {
  flex: 0 0 14rem;
  position: sticky;
  /* 页头吸顶后，目录要从"页面顶"让到"导航条底下"，否则前几条被盖住 */
  top: calc(var(--sat-hdr-sticky) + 0.75rem);
  /* 长文可能有二十几个小标题，不设上限会顶出屏幕、sticky 也就没了意义。
     可用高度同样要扣掉常驻导航条，不然目录底部会伸到屏幕外。 */
  max-height: calc(100vh - var(--sat-hdr-sticky) - 2rem);
  overflow-y: auto;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--accent-color);
  border-radius: 0.4rem;
  background: var(--accent-color-lite);
  font-size: 0.85rem;
}

/* 目录标题兼作小屏的折叠开关（<summary>），见 layouts/_default/single.html */
.sat-doc__toc__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--control-icons);
  cursor: pointer;
  list-style: none;
}

.sat-doc__toc__title::-webkit-details-marker {
  display: none;
}

/* 自带的三角形：收起时朝下，展开时朝上 */
.sat-doc__toc__title::after {
  content: "";
  flex: 0 0 auto;
  width: 0.42rem;
  height: 0.42rem;
  margin-top: -0.18rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s;
}

.sat-doc__toc[open] > .sat-doc__toc__title::after {
  transform: rotate(225deg);
  margin-top: 0.18rem;
}

/* 宽屏是固定目录栏，不需要折叠：去掉三角，也禁掉点击收起，
   免得有人顺手点一下标题，整栏目录凭空消失 */
@media (min-width: 60.001rem) {
  .sat-doc__toc__title {
    cursor: default;
    pointer-events: none;
  }

  .sat-doc__toc__title::after {
    display: none;
  }
}

.sat-doc__toc__nav ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.sat-doc__toc__nav ul ul {
  padding-left: 0.85rem;
}

.sat-doc__toc__nav li {
  margin: 0.3rem 0;
  line-height: 1.5;
}

.sat-doc__toc__nav a {
  color: var(--body-font-color);
  text-decoration: none;
}

.sat-doc__toc__nav a:hover {
  color: var(--link-color);
  text-decoration: underline;
}

/* 有些文章的小标题写成「## **适用领域**」，目录里会整条变粗体，这里拉平 */
.sat-doc__toc__nav strong {
  font-weight: normal;
}

/* ---------- 中等屏：目录落到正文上方 ---------- */
@media (max-width: 60rem) {
  .sat-doc {
    flex-direction: column;
    gap: 1rem;
    /* 🔴 2026-09-30 修：这里原来漏了 align-items。
       父级是 align-items: flex-start（宽屏时为了让右侧「本文目录」能 sticky），
       一旦切换成纵向排列，交叉轴就变成了「宽度」，flex-start 的意思是
       「按内容宽度收缩」——于是正文宽度不再等于容器宽度，而是等于
       它的 min-content 宽度。只要正文里有长串（命令、URL、源文件路径），
       min-content 就会超过视口：实测 430px 下 FBB 三页的正文被撑到
       512 / 652 / 978px（同期没有长串表格的老页面仍是 390px），
       超出的部分又被根元素的 overflow-x: hidden 直接裁掉，
       读者右侧内容看不见。改为 stretch 后正文老实占满容器宽度，
       超宽表格与代码块交给 .sat-table-wrap / pre 自己横向滚动。 */
    align-items: stretch;
  }

  .sat-doc__toc {
    position: static;
    flex: 1 1 auto;
    width: 100%;
    max-height: none;
    overflow: visible;
    order: -1;
    padding: 0.5rem 0.875rem;
  }

  /* 收起时只剩这一行，正文就能进首屏；点击区 44px */
  .sat-doc__toc__title {
    min-height: 2.75rem;
    margin-bottom: 0;
    font-size: 0.85rem;
  }

  .sat-doc__toc[open] > .sat-doc__toc__title {
    margin-bottom: 0.35rem;
    border-bottom: 1px solid var(--accent-color);
  }
}

/* ---------- 小屏适配 ---------- */
@media (max-width: 45rem) {
  .sat-hero__title {
    font-size: 1.5rem;
  }

  .sat-grid--boards,
  .sat-grid--uses,
  .sat-grid--posts {
    grid-template-columns: 1fr;
  }

  .sat-board__count {
    display: none;
  }

  /* 小屏：搜索图标保留（原来整块隐藏，手机上根本没法搜）。
     展开时不挤占页头，直接做成挂在图标下方的浮层。 */
  .sat-hsearch .gdoc-search {
    width: auto;
  }

  .sat-hsearch.is-open .gdoc-search {
    position: absolute;
    top: calc(100% + 0.35rem);
    /* 以图标为中心展开，不靠右贴边：手机上图标右边还有配色/首页/箭头三个图标，
       贴 right:0 会让浮层左边溢出屏幕 6px（实测 left=-6）。 */
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    z-index: 40;
    width: min(17rem, calc(100vw - 2rem));
    max-width: none;
    padding: 0.5rem;
    border-radius: 0.4rem;
    background: var(--sat-header-bg);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  }

  /* 手机：结果面板跟着浮层走，不再用桌面的 24rem 定宽，否则超出浮层 */
  .sat-hsearch .gdoc-search__list {
    left: 0;
    right: auto;
    width: 100%;
    max-width: 100%;
  }

  /* 手机上兜底面板不参与输入框那一行（.gdoc-search 是 flex 行，
     静态子元素会被挤到输入框右边、把整行撑高），改成挂在浮层下方的下拉。 */
  .sat-search-alt {
    position: absolute;
    top: calc(100% + 0.3rem);
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    padding: 0.6rem 0.65rem;
    border: 1px solid var(--accent-color);
    border-radius: 0.4rem;
    background: var(--body-background);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  }

  /* 窄屏上标题占满一行、栏目标签跟在后面，别和标题抢宽度 */
  .sat-search-alt__item {
    display: block;
    min-height: 2.75rem;
    padding: 0.5rem 0.45rem;
    font-size: 0.92rem;
  }

  .sat-nav__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
  }

  .sat-nav__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* 🔴 2026-10-21 修：不加这句，这一行的 min-content 就是整条导航的宽度
       （约 850px），它会把列方向容器的内容宽撑到 850px；右侧那一组
       margin-left:auto 于是按 850px 算，被推到屏幕外（390px 视口里
       落在 646～870px），手机上「资料 / 联系方式」根本点不到。
       光写 min-width:0 不够（实测列方向的 stretch 仍按 min-content 撑到 850px），
       必须显式给 width:100% 才会老实收缩到 350px，横向滚动由自己承担。 */
    width: 100%;
    min-width: 0;
    /* ⚠️ 必须把 flex 收紧：上面 55rem 那条给的是 flex:1 1 0，
       列方向下 0 是**高度**的基准 —— 栏目那行会被压成 0 高、整行消失。 */
    flex: 0 0 auto;
  }

  .sat-nav__right {
    justify-content: flex-end;
  }
}


/* ============================================================
   文章署名条（sat-byline）—— 2026-09-22 建
   H1 下方一行：作者 ｜ 来源 ｜ 素材提供 ｜ 更新
   作者名链到 /authors/xxx/（人点得到，机器也拿得到 Person 实体）
   只使用主题变量，暗色模式自动跟随
   ============================================================ */
.sat-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.4rem;
  margin: -0.4rem 0 1.3rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--accent-color-lite);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--body-font-color);
  opacity: 0.85;
}
.sat-byline__sep {
  opacity: 0.35;
}
.sat-byline__item a,
.sat-byline__item a:visited {
  color: var(--link-color);
  text-decoration: none;
}
.sat-byline__item a:hover {
  text-decoration: underline;
}


/* ============================================================
   正文插图（sat-figure）—— 2026-09-23 建
   由 layouts/_default/_markup/render-image.html 钩子统一产出，
   md 里只写图片语法，图注写 title 部分：
       ![alt 文本](/images/栏目/文件.png "图 1｜说明")
   为什么用 figure/figcaption：图片说明与图片物理相邻，
   搜索引擎与 AI 抽取时能直接拿到"这张图画的是什么"。
   只使用主题变量，暗色模式自动跟随。
   ============================================================ */
.sat-figure {
  margin: 1.75rem 0;
}

.sat-figure img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  border-radius: 0.375rem;
}

.sat-figure figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.7;
  text-align: center;
  color: var(--control-icons);
}

/* 图注里的链外引用（图源说明等）跟着正文链接色，别忘了 :visited（见坑 27） */
.sat-figure figcaption a,
.sat-figure figcaption a:link,
.sat-figure figcaption a:visited {
  color: var(--link-color);
}

/* 两张方形图并排（2026-10-19 建，铱星栏目页星座图用）
   --------------------------------------------------------------------------
   为什么：单张 1000×1000 的方形渲染图在正文宽度下会撑到 700 多像素高，
   一屏全被它占了，后面正文要滚很久才见。两张并排各占一半，高度直接砍半。
   窄屏（手机）自动退回上下排列，不挤成一条缝。 */
.sat-figure-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
  margin: 1.75rem 0;
}

.sat-figure-pair .sat-figure {
  margin: 0;
}

.sat-figure-pair .sat-figure img {
  width: 100%;
}

@media (max-width: 40rem) {
  .sat-figure-pair {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
}

/* ==========================================================================
   本页要点速览（shortcode: keyfacts）
   --------------------------------------------------------------------------
   页首顺序（蔡工 2026-09-24 定）：
     H1 → 署名条 → 核心摘要(.sat-keyfacts__lead) → 速览表(.sat-keyfacts) → 正文
   为什么先一句摘要再上表格：一进来就顶一张表太突兀；先给人一句读得懂的
   摘要，再给机器和人一份好抽的键值清单。
   ⭕ 这段文字的文案前缀统一「核心摘要：」（蔡工 2026-10-07 定，全站统一）。
     2026-10-07 前的旧用词偏论文收尾语境，放页首语义错位；
     且 AI 抽取更认「摘要 / Summary / Abstract」这类标签，故统一改「核心摘要：」。
   为什么是表格：两列「维度 → 值」是 LLM 抽取属性、搜索引擎取摘要最容易
   消化的结构，人也能 3 秒扫完判断要不要继续读。
   配色：继续只用主题变量。注意 --header-font-color 是给深蓝页头的白字，
        绝不能用在浅底表格上（亮色模式下会看不见）—— 这里一律用
        --body-font-color 系列，暗色模式由主题自动重定义。
   观感：标签列定宽 + 左侧色条，做成"标签条"的样子——早期没定宽时
        浏览器会把标签列撑宽，值列又短，整张表看着又空又不协调。
   窄屏：640px 以下 th/td 改为块级堆叠，避免两列互相挤压。
   ========================================================================== */

/* 核心摘要：H1 与速览表之间的那句摘要，左侧一道色条当引题 */
.sat-keyfacts__lead {
  margin: 1rem 0 1.15rem;
  padding: 0.05rem 0 0.05rem 0.85rem;
  border-left: 3px solid var(--link-color);
  font-size: 1.03rem;
  line-height: 1.85;
  color: var(--body-font-color);
}

.sat-keyfacts {
  margin: 0 0 1.75rem;
  padding: 0 1.05rem 0.5rem;
  border: 1px solid var(--accent-color);
  border-radius: 0.375rem;
  background: var(--accent-color-lite);
}

.sat-keyfacts__title {
  margin: 0.7rem 0 0.35rem;
  padding-bottom: 0.35rem;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--body-font-color);
  border-bottom: 1px solid var(--accent-color);
}

/* ------------------------------------------------------------
   ⚠️ 特异性（2026-10-20 修）：主题有一条
      .gdoc-markdown table:not(.lntable):not(.highlight) tr th / tr td
      —— 3 个类 + 3 个元素，单类选择器（.sat-keyfacts__body th = 1 类）
      压不过它。此前本段规则（含标签列宽度）实际全部失效：
      表格退回主题的 50 / 50 均分，标签列右侧空出一大片，
      要点列被挤到中间，视觉上像多了一个空列。
      现用 #sat-keyfacts-h2 做锚点（id 由 keyfacts 短代码自己输出，
      结构与 id 同源，不会错配），把这一段的宽度与内边距拿回来。
   ------------------------------------------------------------ */
:is(#sat-keyfacts-h2, #home-facts-h2) ~ .sat-keyfacts__body table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.94rem;
}

:is(#sat-keyfacts-h2, #home-facts-h2) ~ .sat-keyfacts__body th,
:is(#sat-keyfacts-h2, #home-facts-h2) ~ .sat-keyfacts__body td {
  /* 2026-10-20 蔡工：维度与要点之间有点挤，行距与列距各松一点 */
  padding: 0.5rem 0.6rem 0.5rem 0.7rem;
  border-bottom: 1px solid var(--accent-color);
  text-align: left;
  vertical-align: top;
  line-height: 1.68;
  overflow-wrap: break-word;
}

/* 维度列定宽、左侧加色条 —— 读起来像一排"标签"。
   ⚠️ 宽度必须写给「行的第一格」，不能写给 th：表头一行是 th + th，
   th 选择器会把两列都定成同一个宽度，富余空间再摊回去，又变回 50 / 50。
   两列的键值表：第一格 9.5rem，第二格（同时是最后一格）吃掉剩余，
   两列合计 100%，fixed 布局才照写定的值分。
   标签实在过长（如「中国移动·国内直拨海事卫星语音号段 87077…」）时
   允许折行，宁可多占一行，也不让它溢出到要点列上。 */
:is(#sat-keyfacts-h2, #home-facts-h2) ~ .sat-keyfacts__body tr > :first-child {
  width: 9.5rem;
}

:is(#sat-keyfacts-h2, #home-facts-h2) ~ .sat-keyfacts__body tr > :nth-child(2):last-child {
  width: calc(100% - 9.5rem);
}

:is(#sat-keyfacts-h2, #home-facts-h2) ~ .sat-keyfacts__body th {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--body-font-color);
  border-left: 3px solid var(--link-color);
}

:is(#sat-keyfacts-h2, #home-facts-h2) ~ .sat-keyfacts__body td {
  padding-left: 1.15rem;
}

.sat-keyfacts__body tr:last-child th,
.sat-keyfacts__body tr:last-child td {
  border-bottom: none;
}

/* 表格里的链接跟着正文色（含 :visited，见坑 27） */
.sat-keyfacts__body a,
.sat-keyfacts__body a:link,
.sat-keyfacts__body a:visited {
  color: var(--link-color);
}

/* 窄屏：堆叠显示，别让两列互相挤 */
@media (max-width: 640px) {
  .sat-keyfacts {
    padding: 0 0.85rem 0.4rem;
  }

  .sat-keyfacts__lead {
    padding-left: 0.7rem;
    font-size: 1rem;
  }

  /* 窄屏这套要跟着上面一起抬特异性，否则 width: 9.5rem 会盖住 width: 100%，
     表格在手机上缩成一条 */
  :is(#sat-keyfacts-h2, #home-facts-h2) ~ .sat-keyfacts__body th,
  :is(#sat-keyfacts-h2, #home-facts-h2) ~ .sat-keyfacts__body td {
    display: block;
    width: 100%;
    padding: 0.35rem 0;
    border-left: none;
  }

  :is(#sat-keyfacts-h2, #home-facts-h2) ~ .sat-keyfacts__body th {
    white-space: normal;
    border-bottom: none;
    color: var(--control-icons);
  }

  :is(#sat-keyfacts-h2, #home-facts-h2) ~ .sat-keyfacts__body td {
    padding-top: 0;
    padding-bottom: 0.5rem;
  }
}

/* ============================================================
   窄屏防裁切：长表格与长代码行（2026-09-30 修，配 render-table 钩子）
   ------------------------------------------------------------
   背景：430px 视口下，含长命令 / 长 URL 的表格会把正文容器（article）
   从 390px 撑到 650px 以上，又被根元素的 overflow-x: hidden 裁掉，
   读者右侧内容看不见。这里三件事：
     ① 允许正文容器收缩（flex 子项默认 min-width: auto，撑开就回不去）；
     ② 表格用包裹层横向滚动，长命令保持完整、可复制；
     ③ 代码块同理，长行自己滚，不撑父容器。
   ============================================================ */
.sat-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   行表头复位（2026-10-10 加，配 render-table 钩子的 scope 处理）
   ------------------------------------------------------------
   钩子把 tbody 每行第一格改成 <th scope="row">，让「这个单元格属于
   哪一行」成为机器可读的显式声明（对 AI 检索与读屏软件都有效，
   详见 GEO 纲领 L0 的「主表 + 注解表」一节）。
   但 th 的浏览器默认样式是**加粗 + 居中**，直接换会让每张表的第一列
   变粗变居中，观感突变。这里把它复位成普通数据格的样式：
     字重继承普通文本、左对齐、去除 th 的垂直居中等差异。
   改动只影响观感，不影响语义（scope 属性仍在 DOM 里）。
   ============================================================ */
.sat-table-wrap tbody th[scope="row"] {
  font-weight: inherit;
  text-align: left;
  vertical-align: top;
  white-space: inherit;
}

/* 表头也靠左（2026-10-20 蔡工：首页两张表的第一列是居中的，和全站不一致）
   ------------------------------------------------------------
   浏览器对 th 的默认样式是 text-align: center，上面那条只复位了
   tbody 的 th[scope=row]，表头仍居中。首页两张表是模板里手写的，
   以前没包进本容器，于是「栏目」「官方来源」整列居中，正文其它表都是靠左。
   这里统一成左对齐；markdown 里写了 :---: 的列自带行内 style，不受影响。 */
.sat-table-wrap thead th {
  text-align: left;
}

/* ============================================================
   产品参数表：原厂两列体例（2026-10-23 蔡工定，首个用户是南京控维 V900B）
   ------------------------------------------------------------
   体例：表头只有「参数名称 / 指标说明」两列；原厂彩页里的类别
   （机械特性、电气性能、跟踪性能、环境特性）不再单独占一列，
   改成一行 <th colspan="2" class="sat-param-group"> 靠左加粗，
   下面紧跟该类的参数行。
   为什么要单独写这一层：这张表是正文里手写的 <table>，走不到
   render-table 钩子的 scope 处理，也就吃不到 `.sat-table-wrap
   tbody th[scope="row"]` 那条复位规则——不补这几行，参数名会变
   加粗居中，和全站其它表两个样子。
   注意：<table> 本身不能加任何属性——主题 partials/utils/content.html
   用正则 `(<table>...)` 套 .table-wrap，带属性就匹配不上，表格会丢掉
   上下间距（见 render-table.html 注释第三段）。所以类名加在外层 div。
   ============================================================ */
.sat-param-table table {
  width: 100%;
}

.sat-param-table tbody th[scope="row"] {
  font-weight: inherit;
  text-align: left;
  vertical-align: top;
  min-width: 7.5em;
}

.sat-param-table tbody th.sat-param-group {
  font-weight: 600;
  text-align: left;
  padding-top: 1rem;
  padding-bottom: 0.35rem;
}

.sat-param-table tbody tr:first-child th.sat-param-group {
  padding-top: 0.5rem;
}

/* 手机屏（≤720px）：两列放不下
   ------------------------------------------------------------
   390px 实测：参数名列最窄也要 7 个字（「交叉极化隔离度」），剩给指标列
   不到 200px，「接收：12.25-12.75GHz；发射：14.00-14.50GHz」被拆成三行，
   还断在「12.25-/12.75」这种位置，比原厂彩页更难读。
   改成堆叠式：参数名一行（小字），指标一行（正常字），整行加分隔线。
   只在 .sat-param-table 范围内生效，不影响全站其它表格。 */
@media (max-width: 720px) {
  .sat-param-table table,
  .sat-param-table tbody,
  .sat-param-table tr {
    display: block;
  }

  .sat-param-table thead {
    display: none;
  }

  .sat-param-table tbody tr {
    padding: 0.4rem 0 0.5rem;
    border-bottom: 1.5px solid var(--accent-color);
  }

  .sat-param-table tbody th[scope="row"] {
    display: block;
    min-width: 0;
    padding: 0 1rem;
    font-size: 0.86em;
  }

  .sat-param-table tbody td {
    display: block;
    padding: 0 1rem;
    border-bottom: 0;
  }

  .sat-param-table tbody th.sat-param-group {
    padding: 0.85rem 1rem 0.15rem;
  }

  .sat-param-table tbody tr:has(th.sat-param-group) {
    border-bottom: 0;
    background: none;
  }
}

/* 首页两张手写表补回表格样式（2026-10-20）
   ------------------------------------------------------------
   正文里的 markdown 表由主题的 .gdoc-markdown 规则负责：宽度 100%、
   单元格 8px 16px 内边距、行间细分隔线。首页这两张表是 layouts/index.html
   里直接写的 <table>，不在 .gdoc-markdown 里，只剩浏览器默认样式——
   单元格内边距 1px，两列文字几乎贴在一起；表格宽度也只是内容宽（597px），
   没有铺满，和正文里的表格完全两个样子。
   这里按正文表格的同一套参数补齐，只作用于首页 .sat-section 内的表。 */
.sat-section .sat-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.sat-section .sat-table-wrap th,
.sat-section .sat-table-wrap td {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--accent-color);
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}

.sat-section .sat-table-wrap thead th {
  font-weight: 600;
  color: var(--body-font-color);
}

.sat-section .sat-table-wrap tr:last-child th,
.sat-section .sat-table-wrap tr:last-child td {
  border-bottom: none;
}

/* 手机屏（≤640px）：这两张表 3～4 列，挤在 350px 里会把表头压成一字一行
   （「已/有/资/料」竖着排）。只让表头不折行、正文照旧折行——
   表头是列的标签，读不全就不知道这列是什么；正文短句折行还能读。
   表头撑出的宽度由外层容器横向滚动吸收，不会撑破页面。 */
@media (max-width: 640px) {
  .sat-section .sat-table-wrap thead th {
    white-space: nowrap;
  }
}

/* ------------------------------------------------------------
   短列不折行（2026-10-20 蔡工：第一栏过窄，"查什么""1 信号"被折成两行）
   ------------------------------------------------------------
   类名 sat-tbl-nw-<列号> 由 render-table 钩子按内容算出：该列最长一格
   不超过 8 个汉字宽才加。放在表上的类，所以写成「表 → 行 → 第 n 格」。
   ⚠️ 必须同时罩住 thead 的 td/th 与 tbody 的 th[scope=row]，且特异性要压过
      上面那条 `white-space: inherit`（那条会把 nowrap 复位成 normal）。
      这里 3 个类 + 1 个元素 (0,3,1) > 上面 (0,2,2)，顺序也写在后面。
   ------------------------------------------------------------ */
.sat-table-wrap.sat-tbl-nw-1 tr > :nth-child(1),
.sat-table-wrap.sat-tbl-nw-2 tr > :nth-child(2),
.sat-table-wrap.sat-tbl-nw-3 tr > :nth-child(3),
.sat-table-wrap.sat-tbl-nw-4 tr > :nth-child(4),
.sat-table-wrap.sat-tbl-nw-5 tr > :nth-child(5),
.sat-table-wrap.sat-tbl-nw-6 tr > :nth-child(6),
.sat-table-wrap.sat-tbl-nw-7 tr > :nth-child(7),
.sat-table-wrap.sat-tbl-nw-8 tr > :nth-child(8) {
  white-space: nowrap;
}

article pre {
  max-width: 100%;
  overflow-x: auto;
}

/* 要点速览表是 table-layout: fixed，长串不会撑宽表格、会溢出到邻列，
   这里让它在必要时换行（此表内容是"要点"文字，不是要复制的命令） */
.sat-keyfacts__body th,
.sat-keyfacts__body td {
  overflow-wrap: break-word;
}

/* ============================================================
   页头品牌图（蔡工 2026-10-05：LOGO 换成 SATIOT 商标字标）
   ------------------------------------------------------------
   主题把 .gdoc-brand__img 写死成 2rem × 2rem 正方形（按图标设计的），
   SATIOT 字标是横长形（约 4:1），不改会被压扁。
   高度给 2.25rem（36px），与站名两行文字的视觉高度匹配；
   宽度 auto 保持比例。移动端主题本来就隐藏品牌图（display:none），不另处理。
   ============================================================ */
.gdoc-brand__img {
  width: auto;
  height: 2.25rem;
  object-fit: contain;
  /* 深色页头上加一圈极细白晕提边缘可读性；白底页头下这套白晕会糊住字标边缘，
     所以做成变量：亮色模式是 none，暗色模式才画（值见文件开头配色段）。 */
  filter: var(--sat-logo-glow);
}

/* ---------- 页脚配色：深墨绿（蔡工 2026-10-21 定）----------
   原底色是深藏青 rgb(17,43,60)，偏黑；改成墨绿 #123a2c。
   为什么这一步不能只写一个 :root：主题在四个地方都定义过 --footer-*，
   其中 :root[color-theme=dark] 的优先级（0,1,1）高于裸 :root（0,0,1），
   只写 :root 的话，用户手切暗色模式时页脚会被盖回藏青。
   所以三处一起写，和页头那套变量一个道理。

   链接色从主题的橘 rgb(246,107,14) 换成浅薄荷 #9fe6bd：
   橘色压在墨绿上只有 4.2:1，不到 AA 的 4.5；浅薄荷是 8.6:1。
   已访问色跟未访问色统一成同一个值 —— 页脚里两个色并存会显得没配过色。 */
:root {
  --sat-footer-bg: #123a2c;
  --sat-footer-link: #9fe6bd;
  --sat-footer-line: #2b6b52;
}

:root,
:root[color-theme="light"],
:root[color-theme="dark"] {
  --footer-background: var(--sat-footer-bg);
  --footer-link-color: var(--sat-footer-link);
  --footer-link-color-visited: var(--sat-footer-link);
}

@media (prefers-color-scheme: dark) {
  :root:not([color-theme="light"]) {
    --footer-background: var(--sat-footer-bg);
    --footer-link-color: var(--sat-footer-link);
    --footer-link-color-visited: var(--sat-footer-link);
  }
}

/* 页脚顶边描一道亮一档的绿，跟正文分界更清楚 */
.gdoc-footer {
  border-top: 1px solid var(--sat-footer-line);
}

/* ---------- 页脚：责任主体行（2026-10-21）----------
   主体声明这一行如果全用链接色，会和下面那排导航抢，看着像一堆按钮。
   做法：说明文字压到 78% 白，公司名单独提到纯白并加重一档 ——
   这一行里最该被看见的是「谁办的」，不是「点哪儿去」。
   对比度：纯白对 #123a2c 约 12:1，78% 白约 9:1，都过 AA。 */
/* 2026-10-22：入口行挪到上面后，两行贴在一起（行高只有 32px，中间零间距）。
   给下面那行加 0.3rem，让「去哪看」与「谁办的」分开，但不撑高页脚太多。 */
.gdoc-footer__entity-row {
  margin-top: 0.3rem;
}

.gdoc-footer__entity {
  color: rgba(255, 255, 255, 0.78);
}

.gdoc-footer__entity .gdoc-footer__link,
.gdoc-footer__entity .gdoc-footer__link:visited {
  /* 2026-10-22 蔡工：公司名单独提亮加粗，看着像另一个组件，与下面那排链接不一致。
     改成与页脚其它链接同一支薄荷色、同一字重 —— 它本来就是一个链接，不必特殊化。 */
  color: var(--footer-link-color, var(--sat-footer-link));
  font-weight: inherit;
  text-decoration-color: var(--footer-link-color, var(--sat-footer-link));
}

.gdoc-footer__entity .gdoc-footer__link:hover {
  text-decoration-color: #fff;
}

/* ---------- 右下角悬浮「回到顶部」（2026-10-21）----------
   从页脚搬出来：页脚那个要滚到底才看得见，而长栏目是读到一半就想回顶部。
   三条约束见 partials/site-backtop.html 的注释，这里对应三条实现：
     ① [hidden] 默认隐藏 —— 没 JS 时按钮压根不出现，不会"点了没反应"
     ② 不进 <main>、不带任何正文文字，对 GEO / 结构化数据零影响
     ③ 44px 见方（手机上 40px），右下角留 1.25rem，不压住正文长表格的右边距
   颜色用页脚那套墨绿，让它在白底页面上像块"沉下去的石头"，
   不跟正文里的链接抢注意力；打印时直接不输出。 */
.sat-backtop {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: var(--sat-footer-bg, #123a2c);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  opacity: 0.94;
  transition: opacity 0.15s, background-color 0.15s;
}

.sat-backtop[hidden] {
  display: none;
}

.sat-backtop:hover {
  opacity: 1;
  background: var(--sat-footer-line, #2b6b52);
}

.sat-backtop:focus-visible {
  outline: 2px solid var(--sat-nav-bg, #007c9b);
  outline-offset: 2px;
}

.sat-backtop__ico {
  width: 1.4rem;
  height: 1.4rem;
}

/* 暗色页面底色本身就是深灰蓝，深墨绿按钮压上去几乎融进背景，
   提亮一档并加深描边，保证还看得出「这儿有个按钮」。
   照例两个选择器都写：手动切暗色 + 跟随系统暗色。 */
html[color-theme="dark"] .sat-backtop {
  background: #1b5742;
  border-color: rgba(255, 255, 255, 0.28);
}

@media (prefers-color-scheme: dark) {
  html:not([color-theme="light"]) .sat-backtop {
    background: #1b5742;
    border-color: rgba(255, 255, 255, 0.28);
  }
}

@media (max-width: 45rem) {
  .sat-backtop {
    right: 0.9rem;
    bottom: 0.9rem;
    width: 2.5rem;
    height: 2.5rem;
  }
}

@media print {
  .sat-backtop {
    display: none !important;
  }
}

/* ============================================================
   首页口号「探索信号 终有答案」（2026-10-22 蔡工定）
   只 8 个字独立成行：字号比正文略大、字距拉开，不加引号、不加修饰 —— 让读者自己解读。
   颜色跟页脚同一支墨绿（亮色下比正文深一档，暗色下用页脚链接的浅薄荷）。

   2026-10-22 第二轮：上下留白都加大（上 2.5rem / 下 1.7rem）。
   原来上下只有 1.6 / 0.2rem，口号贴着上面的正文、下面又顶着「143 篇资料」那行，
   看着像正文的一部分。加大后它才成为页面上唯一的"停顿"。
   padding-left 抵扣 letter-spacing 在末字后多出的那 0.3em ——
   不补的话居中会偏左约半个字距，放大看是歪的。
   ============================================================ */
.sat-slogan {
  margin: 2.4rem 0 2.2rem;
  padding-left: 0.15em;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-align: center;
  color: var(--sat-footer-bg, #123a2c);
}

html[color-theme="dark"] .sat-slogan {
  color: #9fe6bd;
}

@media (prefers-color-scheme: dark) {
  html:not([color-theme="light"]) .sat-slogan {
    color: #9fe6bd;
  }
}

@media (max-width: 40rem) {
  .sat-slogan {
    margin: 1.9rem 0 1.75rem;
    padding-left: 0.11em;
    font-size: 1.2rem;
    letter-spacing: 0.22em;
  }
}

@media print {
  .sat-slogan {
    letter-spacing: normal;
  }
}

/* ============================================================
   「关于本站」文末英文口号 Grasp the Signal, Answers Emerge.
   （2026-10-23 蔡工定，与首页「探索信号 终有答案」中英文呼应）
   ------------------------------------------------------------
   为什么不复用 .sat-slogan：那一条是 8 个汉字，靠 0.3em 字距撑开
   气口；英文单词本身有词间空格，再拉 0.3em 会把单词拆散、看着像
   印刷事故。所以英文字距只用 0.04em，靠字号与字重提气。
   字号取 1.5rem：比正文（1rem 上下）明显大一号，又不超过小节标题，
   读完英文介绍后落在这里是一个收尾，不是新的标题。
   颜色沿用首页口号的墨绿 / 暗色下的浅薄荷，两处口径一致。
   ============================================================ */
.sat-slogan-en {
  margin: 2.2rem 0 1.6rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-align: center;
  color: var(--sat-footer-bg, #123a2c);
}

html[color-theme="dark"] .sat-slogan-en {
  color: #9fe6bd;
}

@media (prefers-color-scheme: dark) {
  html:not([color-theme="light"]) .sat-slogan-en {
    color: #9fe6bd;
  }
}

@media (max-width: 40rem) {
  .sat-slogan-en {
    margin: 1.7rem 0 1.3rem;
    font-size: 1.28rem;
  }
}

@media print {
  .sat-slogan-en {
    letter-spacing: normal;
  }
}

/* ============================================================
   跨系统对比表：表头冻结（2026-10-23 蔡工要求，要 Excel 冻结窗格的效果）
   ------------------------------------------------------------
   为什么单独写 .sat-cmp 这层，不复用 .sat-table-wrap：
     ① .sat-table-wrap 带 overflow-x: auto，它本身就成了滚动容器。
        祖先只要有 overflow，position: sticky 的参照系就从视口换成
        这个容器；容器高度跟着内容走、永远不会竖向滚动，于是
        sticky 彻底失效——表头一动不动。
     ② 主题对 table 的默认样式是 display:block + overflow:auto +
        max-height，同一个坑还得再躲一次，必须恢复成 display:table。
   所以这里不设任何横向滚动容器，改用 table-layout:fixed 按百分比
   硬分四列，390px 也不溢出，竖向滚动交还给整页——表头才跟得住。
   ============================================================ */
/* 🔴 2026-10-23 实测出来的拦路虎：主题给 body 设了 overflow-x: hidden。
   只要一个轴不是 visible，另一个轴就会被计算成 auto——body 因此成了
   一个「永远不会滚动」的滚动容器，sticky 的参照系变成 body 而不是
   视口，表头于是纹丝不动（实测 th.top 一直等于表格顶边）。
   把 body 的横向裁剪换成 clip：clip 照样裁掉溢出，但不产生滚动容器，
   sticky 就能贴住视口。老浏览器不认识 clip 会直接忽略这条，退回主题
   原来的 hidden，行为与今天一致，不会更糟。 */
body {
  overflow-x: clip;
}

/* 主题的 content.html 钩子会用正则把裸 <table> 套进 .table-wrap，而
   .table-wrap 带着 overflow: auto——又是一层滚动容器，一样会把 sticky
   废掉。这里在本表范围内把它改回不裁剪。 */
.sat-cmp .table-wrap {
  overflow: visible;
  max-height: none;
}

.sat-cmp table {
  display: table;
  overflow: visible;
  max-height: none;
  table-layout: fixed;
  width: 100%;
}

.sat-cmp thead th {
  position: sticky;
  /* 页头吸顶后，冻结表头要停在导航条下面 —— 还写 0 的话会整条钻到导航条底下看不见 */
  top: var(--sat-hdr-sticky);
  z-index: 2;
  background: var(--body-background, #fff);
  text-align: left;
  font-weight: 600;
  /* 冻结时下面的行会从表头底下穿过去，边框在 collapse 模式下不跟随
     粘滞元素走，只能用内阴影画这条收口线 */
  box-shadow: inset 0 -2px 0 var(--accent-color, #007c9b), 0 3px 8px rgba(22, 64, 95, 0.1);
}

/* 第一列（对比维度）窄一些，三列数据各占余下宽度 */
.sat-cmp th:first-child,
.sat-cmp td:first-child {
  width: 21%;
}

.sat-cmp th,
.sat-cmp td {
  vertical-align: top;
}

.sat-cmp tbody th[scope="row"] {
  font-weight: inherit;
  text-align: left;
}

/* 类别分组行：跨四列，靠左加粗，和原厂参数表的 sat-param-group 同一手法 */
.sat-cmp tbody th[scope="colgroup"] {
  text-align: left;
  font-weight: 600;
  padding-top: 1rem;
  padding-bottom: 0.3rem;
}

.sat-cmp tbody tr:first-child th[scope="colgroup"] {
  padding-top: 0.4rem;
}

/* 小屏（≤720px）：四列硬挤在 390px 里没法读 —— 实测「2025-09 一期组网
   完成」被拆成四行，表格高得像一面墙。这里改成卡片式：一个维度一块，
   下面三行分别是吉利、天启、铱星，标签由 ::before 补上。
   为什么用 nth-of-type 而不是给每个格手写 data-col：四张表列序一致
   （吉利 / 天启 / 铱星），写死一次比在 200 多个格子上挂属性可靠。
   DOM 结构一点没动，表头仍带 scope=col、行首仍是 th scope=row，
   抓取方拿到的还是标准四列表。 */
@media (max-width: 720px) {
  .sat-cmp table,
  .sat-cmp tbody,
  .sat-cmp tr,
  .sat-cmp th,
  .sat-cmp td {
    display: block;
    width: auto;
  }

  /* 表头在卡片式布局里由每行的 ::before 标签承担。不用 display: none，
     改成视觉隐藏 —— 读屏软件与抓取方仍能拿到三个列名。 */
  .sat-cmp thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* 上面那条 th:first-child 的 21% 宽度在这里必须撤销，
     否则「商用许可」这种四个字的维度名会折成两行 */
  .sat-cmp th:first-child,
  .sat-cmp td:first-child {
    width: auto;
  }

  .sat-cmp tbody tr {
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.28);
  }

  .sat-cmp tbody tr:last-child {
    border-bottom: 0;
  }

  .sat-cmp tbody th[scope="row"] {
    font-weight: 600;
    margin-bottom: 0.15rem;
  }

  .sat-cmp tbody td {
    padding: 0.12rem 0;
  }

  .sat-cmp tbody td::before {
    display: inline-block;
    min-width: 4.8em;
    color: var(--sat-header-sub, #5c7386);
  }

  .sat-cmp tbody td:nth-of-type(1)::before {
    content: "吉利星座";
  }

  .sat-cmp tbody td:nth-of-type(2)::before {
    content: "天启星座";
  }

  .sat-cmp tbody td:nth-of-type(3)::before {
    content: "铱星系统";
  }

  /* 分组行在小屏上退化成一条分隔标题，四列不再存在 */
  .sat-cmp tbody th[scope="colgroup"] {
    padding-top: 0.6rem;
    padding-bottom: 0.2rem;
  }
}

/* ============================================================
   右下角竖排三个悬浮钮：联系方式（上）· 分享（中）· 回到顶部（下）
   ------------------------------------------------------------
   2026-10-23 蔡工两次调整后的定稿：
   首次要求做「联系我们」；当晚再看截图，说提示太多、复制按钮底太重，
   要求砍到只剩号码 / 可加微信 + 复制号码 / 联系方式与办公地址；
   同时提出在上方加一个分享钮，点一下复制本页链接。
   于是右侧一列自下而上＝返回顶部 → 分享 → 联系方式，三个都是圆钮，
   尺寸与配色一致，看起来是一组工具而不是三块补丁。

   三个块各自 position:fixed、靠 bottom 值错开，**不用外层容器**：
   任何一块不出现（如联系页不显示联系方式）都不会把别的挤歪。

   展开方式：hover / 键盘聚焦（:focus-within）展开；手机没有 hover，
   由 JS 切换 .is-open。收起态用 visibility 而不是只降 opacity：
   纯透明的元素仍然能被点到、也能被读屏读到，那是隐形陷阱。

   面板配色走主题变量（--body-background / --button-border-color），
   这样跟随系统的暗色模式下不会冒出一块白板。
   ============================================================ */
.sat-cfloat {
  position: fixed;
  right: 1.25rem;
  /* 与 .sat-share、.sat-backtop 的 bottom 值错开，三个圆钮竖着一列：
     回到顶部 1.25rem ／ 分享 4.6rem ／ 联系方式 7.95rem。
     2.75rem 钮 + 0.6rem 空隙 = 3.35rem 一档，加起来不会互相压。
     不包容器是故意的：三个块各自 fixed、互不依赖，哪块不出现都不会把别的挤歪。 */
  bottom: 7.95rem;
  z-index: 41;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.sat-cfloat[hidden] {
  display: none;
}

.sat-cfloat__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: var(--sat-footer-bg, #123a2c);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  opacity: 0.94;
  transition: opacity 0.15s, background-color 0.15s;
}

.sat-cfloat__toggle:hover,
.sat-cfloat.is-open .sat-cfloat__toggle {
  opacity: 1;
  background: var(--sat-footer-line, #2b6b52);
}

.sat-cfloat__toggle:focus-visible {
  outline: 2px solid var(--sat-nav-bg, #007c9b);
  outline-offset: 2px;
}

.sat-cfloat__ico {
  width: 1.2rem;
  height: 1.2rem;
}

html[color-theme="dark"] .sat-cfloat__toggle {
  background: #1b5742;
  border-color: rgba(255, 255, 255, 0.28);
}

@media (prefers-color-scheme: dark) {
  html:not([color-theme="light"]) .sat-cfloat__toggle {
    background: #1b5742;
    border-color: rgba(255, 255, 255, 0.28);
  }
}

/* 面板（2026-10-23 晚蔡工二次精简）
   只剩四样：号码 / 可加微信 + 复制号码 / 联系方式与办公地址。
   说明性小字全砍了 —— 面板越像一张卡片、越不像一块广告，越有人愿意点。
   号码仍用导航青蓝，但字号收到 1.2rem、字重降到 600，不做成标题。 */
.sat-cfloat__panel {
  width: 12.5rem;
  padding: 0.8rem 0.9rem 0.75rem;
  border: 1px solid var(--button-border-color, rgba(128, 128, 128, 0.3));
  border-radius: 0.6rem;
  background: var(--body-background, #fff);
  color: var(--body-font-color, #333);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
  /* 收起态：visibility 让它在视觉上消失的同时也不接受点击、不被读屏 */
  visibility: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

.sat-cfloat:hover .sat-cfloat__panel,
.sat-cfloat:focus-within .sat-cfloat__panel,
.sat-cfloat.is-open .sat-cfloat__panel {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.sat-cfloat__num {
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sat-nav-bg, #007c9b);
  text-decoration: none;
}

.sat-cfloat__num:hover {
  text-decoration: underline;
}

.sat-cfloat__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.55rem;
}

/* 「可加微信」只当一句说明：常规字重、次级灰，不当小标题抢注意力 */
.sat-cfloat__tag {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--sat-header-sub, #5c7386);
}

/* 暗色下号码要提亮：#0b6d88 压在深灰蓝底上对比度不到 3:1，看不清。
   换浅一档的青，既保留"号码是链接"的语义，又不刺眼。 */
html[color-theme="dark"] .sat-cfloat__num {
  color: #6fd3ea;
}

@media (prefers-color-scheme: dark) {
  html:not([color-theme="light"]) .sat-cfloat__num {
    color: #6fd3ea;
  }
}

/* 复制按钮：浅灰底 + 细边，压得住不抢眼。
   明暗两套都写死浅一档的值 —— 主题的 --button-background 是饱和蓝，
   铺在这个小面板上就是一块"蓝色积木"，正是蔡工说要淡掉的那块。 */
.sat-cfloat__copy {
  padding: 0.22rem 0.5rem;
  border: 1px solid rgba(128, 128, 128, 0.28);
  border-radius: 0.35rem;
  background: rgba(128, 128, 128, 0.08);
  color: var(--body-font-color, #333);
  font-size: 0.78rem;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.15s;
}

.sat-cfloat__copy:hover {
  background: rgba(128, 128, 128, 0.16);
}

.sat-cfloat__copy:focus-visible {
  outline: 2px solid var(--sat-nav-bg, #007c9b);
  outline-offset: 2px;
}

html[color-theme="dark"] .sat-cfloat__copy {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
}

@media (prefers-color-scheme: dark) {
  html:not([color-theme="light"]) .sat-cfloat__copy {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.1);
  }
}

.sat-cfloat__more {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--link-color, #007c9b);
}

/* ---------- 右下角「分享本页」（2026-10-23 晚新增）----------
   与联系方式同款墨绿圆钮，夹在联系方式与回到顶部之间。
   点一下复制本页链接（手机优先走系统分享面板），详情见 JS 注释。
   首屏就出现 —— 转发这个动作不挑阅读进度。 */
.sat-share {
  position: fixed;
  right: 1.25rem;
  bottom: 4.6rem;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: var(--sat-footer-bg, #123a2c);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  opacity: 0.94;
  transition: opacity 0.15s, background-color 0.15s;
}

.sat-share[hidden] {
  display: none;
}

.sat-share:hover {
  opacity: 1;
  background: var(--sat-footer-line, #2b6b52);
}

.sat-share:focus-visible {
  outline: 2px solid var(--sat-nav-bg, #007c9b);
  outline-offset: 2px;
}

.sat-share__ico {
  width: 1.15rem;
  height: 1.15rem;
}

html[color-theme="dark"] .sat-share {
  background: #1b5742;
  border-color: rgba(255, 255, 255, 0.28);
}

@media (prefers-color-scheme: dark) {
  html:not([color-theme="light"]) .sat-share {
    background: #1b5742;
    border-color: rgba(255, 255, 255, 0.28);
  }
}

/* 复制成功后闪一下提示（JS 写 _tip 元素，2 秒后撤掉）。
   用 fixed 贴在按钮左侧，不改变按钮自身尺寸，避免整列跟着抖。 */
.sat-share__tip {
  position: fixed;
  right: 4.6rem;
  bottom: 5.2rem;
  z-index: 42;
  max-width: 14rem;
  padding: 0.35rem 0.6rem;
  border-radius: 0.4rem;
  background: rgba(18, 58, 44, 0.94);
  color: #fff;
  font-size: 0.78rem;
  line-height: 1.4;
  pointer-events: none;
}

@media (max-width: 45rem) {
  .sat-cfloat {
    right: 0.9rem;
    bottom: 7.3rem;
  }

  .sat-share {
    right: 0.9rem;
    bottom: 4.25rem;
  }

  .sat-cfloat__toggle,
  .sat-share {
    width: 2.5rem;
    height: 2.5rem;
  }

  .sat-cfloat__panel {
    width: min(12.5rem, calc(100vw - 2.4rem));
  }

  .sat-share__tip {
    right: 3.9rem;
    bottom: 4.8rem;
  }
}

@media print {
  .sat-cfloat {
    display: none !important;
  }
}