/* 站点 Header（品牌 / 一级导航 / 搜索 / 语言 / 显示设置菜单）—— 单一真源。
 *
 * 为什么单独成文件 (2026-09-18):
 *   主站 Header 住在应用包里, 而 SSR 内容页 (/guides/*、/topic/*、/story 等) 不加载应用包,
 *   于是它们在服务端各写一套极简导航 —— 同一个站出现两种 Header, 用户一眼就能看出割裂。
 *   把 Header 规则抽到这里之后:
 *     ① 应用包: src/main.tsx 里 import 本文件 (顺序在 editorial-news.css 之后);
 *     ② 内容页: 服务端把本文件以 /site-header.css 直出, 页面 <link> 引用。
 *   两边因此永远同源, 改一次两边同时生效。
 *
 * ⚠️ 依赖 --ed-* 设计令牌:
 *   应用里由 .news-editorial-app 提供 (见 editorial-news.css 顶部);
 *   内容页由 server/ssr-shell.mjs 的 SSR_SHELL_TOKENS 在 .ssr-shell 上提供同值副本。
 *   新增令牌时必须两处同步, 否则内容页会退化成继承上层/默认值。
 */

/* 勾选标记的显隐 (2026-09-18)。
 * 应用里菜单项是条件渲染 —— 只有选中项才带勾。SSR 内容页是静态 HTML, 无法条件渲染,
 * 于是把勾常驻在标记里 (带 data-check), 由 .active 决定显示。应用侧没有 data-check
 * 标记, 这两条对它完全无影响。 */
.editorial-settings-menu [data-check] > svg {
  display: none;
}

.editorial-settings-menu > button.active [data-check] > svg {
  display: block;
}

/* SSR 内容页的顶栏基线 (2026-09-18)。
 *
 * 顶栏在应用里继承了两样东西, 内容页必须显式补上, 否则会出现「1px 错位」和「链接变蓝」:
 *   ① 根排版: app.css 的 `html, body { font-size: 14px; line-height: 1.55 }`。
 *      内容页不加载 app.css → 继承 UA 默认的 16px / normal。后果不是文字大小 (各元素都自带
 *      字号), 而是**行高**没有固定值: 13px 的搜索文案在应用里占 20.15px、在内容页占 16px,
 *      同一行的高差让整列工具在垂直居中后低 1px。实测 rect.y: 主站 4.59 / 内容页 5.5。
 *   ② 文字色: 应用里由 `.news-editorial-app { color: var(--ed-ink) }` + `.news-editorial-app a
 *      { color: inherit }` 提供; 内容页两者都没有, 链接就会用浏览器的默认链接色
 *      (深色主题下是浅蓝 #9e9eff)。
 *
 * ⚠️ 只作用于 .editorial-header 子树, **不要**把这些放到 .ssr-shell 上: 那会把内容页正文的
 *    行高一并改掉 (正文里 `.guide h2` 之类没有显式行高的元素会跟着变高)。
 * ⚠️ 用 :where() 把 .ssr-shell 的权重归零, 让选择器保持 (0,1,1):
 *    压得过 .editorial-search-home (0,1,0) 的静默色, 又不会盖掉 .editorial-nav-link.active
 *    (0,2,0) 的铜色高亮 —— 与主站 .news-editorial-app a 的层叠结果完全一致。
 */
:where(.ssr-shell) .editorial-header {
  color: var(--ed-ink);
  font-family: var(--ed-sans);
  font-size: 14px;
  line-height: 1.55;
}

:where(.ssr-shell) .editorial-header a {
  color: inherit;
  text-decoration: none;
}

.editorial-header {
  height: 64px;
  min-height: 64px;
  display: grid;
  grid-template-columns: auto minmax(100px, 1fr) auto;
  align-items: baseline;
  gap: 54px;
  padding: 0 30px;
  border-bottom: 1px solid var(--ed-line);
  background: var(--ed-header-bg);
  backdrop-filter: blur(18px);
  z-index: 80;
}

.editorial-brand {
  display: flex;
  align-items: baseline;
  gap: 22px;
  white-space: nowrap;
}

.editorial-wordmark {
  font-family: var(--ed-serif);
  font-size: 31px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-decoration: none;
}

.editorial-wordmark:hover {
  color: var(--ed-brass-dark);
  text-decoration: none;
}

.editorial-tagline {
  font-family: var(--ed-serif);
  color: var(--ed-muted);
  font-size: 13px;
}

.editorial-nav {
  height: 100%;
  display: flex;
  align-items: stretch;
}

.editorial-nav-link {
  min-width: 76px;
  display: grid;
  place-items: center;
  position: relative;
  font-family: var(--ed-serif);
  font-size: 16px;
  text-decoration: none;
}

.editorial-nav-link::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 2px;
  background: var(--ed-brass);
  opacity: 0;
  transform: scaleX(0.55);
  transition: opacity 150ms ease, transform 150ms ease;
}

.editorial-nav-link:hover,
.editorial-nav-link.active {
  color: var(--ed-brass-dark);
  text-decoration: none;
}

.editorial-nav-link.active::after {
  opacity: 1;
  transform: scaleX(1);
}

.editorial-header-tools {
  display: flex;
  align-items: center;
  gap: 14px;
}

.editorial-search {
  width: min(280px, 23vw);
  height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid var(--ed-line);
  border-radius: 9px;
  color: var(--ed-muted);
  background: var(--ed-control-bg);
  transition: border-color 160ms ease, background 160ms ease;
}

.editorial-search:focus-within {
  border-color: var(--ed-brass);
  background: var(--ed-control-focus-bg);
}

.editorial-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--ed-ink);
  background: transparent;
  font-size: 13px;
}

.editorial-search input::placeholder {
  color: var(--ed-faint);
}

.editorial-search-home {
  color: var(--ed-muted);
  text-decoration: none;
}

.editorial-search-home:hover {
  color: var(--ed-ink);
  border-color: var(--ed-brass);
  background: var(--ed-control-focus-bg);
  text-decoration: none;
}

.editorial-search-home > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.editorial-search kbd {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ed-line);
  border-radius: 5px;
  color: var(--ed-muted);
  background: var(--ed-key-bg);
  font: 11px/1 var(--ed-sans);
  box-shadow: none;
}

.editorial-settings {
  display: flex;
  align-items: center;
  gap: 2px;
  position: relative;
}

.editorial-language-button,
.editorial-icon-button {
  height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  color: var(--ed-ink);
  background: transparent;
  border-radius: 8px;
}

.editorial-language-button {
  padding: 0 7px 0 12px;
  font-family: var(--ed-serif) !important;
  font-size: 14px;
}

.editorial-language-button:hover,
.editorial-icon-button:hover {
  background: var(--ed-brass-soft);
}

.editorial-mobile-filter {
  display: none;
}

.editorial-filter-trigger {
  display: inline-flex;
}

.editorial-mobile-search {
  display: none;
}

.editorial-settings-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 228px;
  padding: 12px;
  border: 1px solid var(--ed-line-strong);
  border-radius: 10px;
  background: var(--ed-surface);
  box-shadow: var(--ed-menu-shadow);
  z-index: 120;
}

.editorial-language-menu {
  right: 43px;
  width: 178px;
}

.editorial-menu-label {
  padding: 5px 8px;
  color: var(--ed-faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.editorial-settings-menu > button {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 9px;
  border: 0;
  border-radius: 7px;
  color: var(--ed-muted);
  background: transparent;
  text-align: left;
}

.editorial-settings-menu > button:hover,
.editorial-settings-menu > button.active {
  color: var(--ed-ink);
  background: var(--ed-brass-soft);
}

.editorial-settings-menu > button.active span:last-child {
  color: var(--ed-brass);
}

.editorial-menu-divider {
  height: 1px;
  margin: 8px 0;
  background: var(--ed-line);
}

.editorial-menu-choice {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

@media (max-width: 1120px) {
  .editorial-header {
    gap: 25px;
    padding-inline: 22px;
  }

  .editorial-tagline {
    display: none;
  }
}

@media (max-width: 860px) {
  .editorial-header {
    grid-template-columns: auto 1fr auto;
    height: 64px;
    min-height: 64px;
    padding-inline: 17px;
  }

  .editorial-wordmark {
    font-size: 27px;
  }

  .editorial-nav {
    gap: 2px;
  }

  .editorial-nav-link {
    min-width: auto;
    padding: 0 10px;
    font-size: 14px;
  }

  .editorial-header-tools {
    grid-column: 3;
  }

  /* 621–860px: 顶栏是 品牌 + 三个导航项 + 工具区 三段并排, 空间最紧。
     这些值都是「导航只有两项 (News/Sentiment)」时代定的 —— 2026-09-18 把 Topics 提为
     一级项后多出 ~61px, 实测 640px 溢出 27px; /sentiment 还多一个 44px 的筛选按钮,
     621px 溢出 22px。溢出发生在 grid 的 min-content 之和超过可用宽度时, 所以要压的
     是各段的**最小宽度**, 不是「把搜索框里的 kbd 藏掉」那种内部瘦身 (盒子是定宽, 藏了
     内容也不会变窄 —— 白试一次)。
     三段间距 25→12 (≤620 本来就是 10, 递进自然)、导航项内边距 10→8、搜索框 270→210。
     实测 621px 在首页与 /sentiment 上都是零溢出。 */
  .editorial-header {
    gap: 12px;
  }

  .editorial-nav-link {
    padding: 0 8px;
  }

  .editorial-search {
    width: min(210px, 22vw);
    min-width: 44px;
  }

  .editorial-mobile-filter {
    display: inline-flex;
  }

  .editorial-filter-trigger {
    display: none;
  }

  .editorial-language-button {
    display: none;
  }
}

@media (max-width: 620px) {
  .editorial-header {
    gap: 10px;
  }

  .editorial-nav {
    display: none;
  }

  .editorial-search {
    display: none;
  }

  .editorial-mobile-search {
    display: inline-flex;
  }

  .editorial-filter-trigger {
    display: none;
  }
}