/* ==========================================================================
   外起 · forthrise —— C 端网页版（桌面）外壳 + 桌面尺度
   只被 /web/index.html 引用；/mini/ 不引用本文件，完全不受影响。
   做法：复用手机版全部组件样式（mini.css），本文件只覆盖两件事 ——
        ① 外壳布局（拆手机壳、左侧栏、顶栏三栏、内容宽度）
        ② 桌面尺度（字号/间距阶梯、断点、交互状态、滚动条）
   ========================================================================== */

/* --------------------------------------------------------------------------
   一、桌面尺度
   标准值集中在 web-tokens.css（字号阶梯 / 间距节奏 / 留白 / 圆角 / 卡片材质）。
   本文件负责两件事：
     ① 外壳布局（拆手机壳、左侧栏、顶栏、内容列与辅助栏的行车线）
     ② 把桌面标准落实到具体组件上
   -------------------------------------------------------------------------- */
.mp-stage {
  /* 把桌面字号阶梯接到全站通用的 var(--f-xxx) 上 ——
     app.js 与 mini.css 里所有组件都会自动跟随，无需逐个改写 */
  --f-title: var(--d-f-sec);
  --f-card: var(--d-f-card);
  --f-body: var(--d-f-body);
  --f-aux: var(--d-f-aux);
  --f-micro: var(--d-f-micro);
  /* 行高：桌面行长更长，正文行高给足才不累眼 */
  --lh-body: var(--d-lh-body);
  --lh-title: var(--d-lh-sec);
}

/* ------------------------------ 拆掉手机壳 ------------------------------ */
.mp-stage {
  display: block; padding: 0; gap: 0; min-height: 100vh;
  background: var(--c-bg);
}
.device {
  width: 100%; height: 100vh; padding: 0;
  border-radius: 0; background: none; box-shadow: none;
}
.device::after { display: none; }
.screen {
  border-radius: 0; height: 100vh;
  flex-direction: row; overflow: hidden;
}

/* --------------------------------------------------------------------------
   二、左侧栏
   -------------------------------------------------------------------------- */
.web-aside {
  flex: 0 0 auto; width: var(--d-aside-w); height: 100%;
  display: flex; flex-direction: column;
  padding: 20px 14px 16px;
  background: var(--c-surface);
  /* 🔴 2026-09-30（磊哥定）：去掉侧栏与工作区之间的竖灰线。
     原为 `box-shadow: inset -1px 0 0 var(--c-line)`（亮色 #eee / 暗色 #2c2c2e）。
     侧栏底色本就与工作区不同（--c-surface vs 页面底色），分界靠色差已足够，
     多这一条 1px 灰线反而显脏。⚠️ 侧栏 z-index:80 的层叠上下文必须保留（来信面板滑入时靠它盖住）。 */
  box-shadow: none;
  overflow-y: auto;
  /* 第 30 期：来信面板收回时整体左移、滑入侧栏背后 —— 侧栏必须盖在面板之上
     （面板 z-index:70）。故这里建立更高层叠上下文并置于普通流之上。
     ⚠️ 侧栏仍需可点，故只用 position:relative + z-index，不引入遮挡。 */
  position: relative;
  z-index: 80;
}
.web-aside-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 2px 8px 16px; text-decoration: none; color: inherit;
  border-radius: 10px;
  transition: background-color .16s ease;
}
.web-aside-brand:hover { background: var(--c-fill-hover); }
/* 第 45 期·补5（2026-09-30 磊哥定稿）：logo 抢眼不靠衬底，靠大小与色差——
   底框透明无边框（侧栏灰黑环境中唯一彩色元素），气泡放大到 38px（HTML 内联 --glyph-w）。 */
.web-aside-brand .brand-tile { background: none; border-color: transparent; }
.web-aside-brand-txt { display: flex; flex-direction: column; min-width: 0; }
.web-aside-name { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; color: var(--c-primary); }
.web-aside-name em { font-style: normal; font-weight: 400; color: var(--c-secondary); }
.web-aside-sub { font-size: 11.5px; color: var(--c-tertiary); margin-top: 2px; }

/* 分组标题 */
.web-aside-group {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  color: var(--c-tertiary); text-transform: uppercase;
  padding: 0 10px; margin: 10px 0 6px;
}

/* tabbar 由「底部横栏」改为「左侧竖栏」 */
.web-aside .tabbar {
  position: static; height: auto; padding: 0; background: none;
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  flex-direction: column; align-items: stretch; gap: 2px;
  flex: 0 0 auto;
}
/* 分组容器撑满（防御性保留）：.nav-group / .nav-group-items 是块级元素，
   宽度本来就随 .tabbar（flex column + align-items: stretch）撑满 200px，
   实测确认无需额外规则。三个分组标题 .nav-group-h 是纯展示、不可点、
   无悬停底色，不在「填充色等长」的统一范围内（磊哥 2026-09-30 定）。 */
/* 🔴 2026-09-30（磊哥定）：左侧菜单**所有功能项悬停填充色一样长**。
   实测（1440 宽）改前宽度参差：首页/来信/我的 85px、报刊亭 99.5px、
   我的名片/团队地图/职位列表/岗位发布 114px、暗岗地图（带「!」）125px ——
   底色只包住自己的文字，鼠标划过时灰底一会儿宽一会儿窄。

   ⚠️ 为什么不是给 .tabbar-item 加 align-self: stretch（走过弯路）：
      .tabbar-item 的父级 `.nav-group-items` 是 **display: block**（不是 flex），
      align-self 只对 flex/grid 子项生效 ⇒ 在块级容器里它被完全忽略，
      改完宽度依旧是 85/99.5/114/125（实测复现）。
   ✅ 正解：**块级容器的子元素本来就是撑满宽度**，前提是别被 `width: auto` 之外
      的规则收窄。这里真正的元凶是 mini.css 的 `.tabbar-item { flex: 1 1 0; }`
      —— 该规则本意是「底部横栏等分」，在桌面竖栏里 flex-basis:0 会让宽度
      退化成由内容决定，于是每项各宽各的。
   ✅ 修法：在桌面作用域把 flex 简写覆盖回「不伸缩、宽度由容器给」。
      用 `flex: 0 0 auto`（旧写法，本来就在）**不够** —— 它只关掉 grow/shrink，
      没把 basis 从 auto 改掉；关键是把宽度交给块级容器的默认行为。
      所以显式写 `width: 100%`，一劳永逸、不受 flex 简写与 flex-basis 干扰。
      三个分组标题 .nav-group-h 是纯展示、不可点、无悬停底色，不参与统一。 */
.web-aside .tabbar-item {
  flex: 0 0 auto; width: 100%; height: 44px; flex-direction: row;
  justify-content: flex-start; gap: 12px; padding: 0 12px;
  border-radius: 10px;
  transition: background-color .16s ease, color .16s ease;
}
.web-aside .tabbar-item:hover { background: var(--c-fill-hover); }
.web-aside .tabbar-item:active { transform: none; }
.web-aside .tabbar-item .tb-label { font-size: 14.5px; font-weight: 500; }
.web-aside .tabbar-item.is-on { background: var(--c-brand-soft); color: var(--c-brand); }
.web-aside .tabbar-item.is-on::before { display: none; }
.web-aside .tabbar-item.is-on .tb-ic { transform: none; }
.web-aside .tabbar-item.is-on:hover { background: var(--c-brand-soft); }

/* 第 42·补（磊哥定）：暗岗地图不再用蓝色高亮填充（原「主打」项淡蓝底+蓝条+蓝字），
   改为纯文字后跟一个蓝色「!」标记（.nav-exclaim），桌面左侧菜单专用。 */
.nav-exclaim {
  margin-left: 6px; color: var(--c-brand); font-weight: 800;
  font-family: var(--font-num); font-style: normal; font-size: 18px; line-height: 1;
}
/* 第 42·补（磊哥定）：暗岗地图左侧菜单文字轮播（暗岗地图 ⇄ 百万年薪），做出动态感；
   两词均为 4 字，宽度一致不跳动；蓝色「!」紧跟其后。 */
.tabbar-d .tb-rot {
  position: relative; display: inline-block;
  height: 1.15em; line-height: 1.15em; vertical-align: middle;
  overflow: hidden;
}
/* 透明占位：撑开容器宽度（轮播词为 absolute 不占宽，否则容器塌成 0 宽、文字消失） */
.tabbar-d .tb-rot-ph { visibility: hidden; }
.tabbar-d .tb-rot-i {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  color: #000;
  opacity: 0; transform: translateY(80%);
  animation: tbRot 4s infinite;
}
.tabbar-d .tb-rot-i:nth-of-type(1) { animation-delay: 0s; }
.tabbar-d .tb-rot-i:nth-of-type(2) { animation-delay: 2s; }
@keyframes tbRot {
  0%   { opacity: 0; transform: translateY(80%); }
  8%   { opacity: 1; transform: translateY(0); }
  42%  { opacity: 1; transform: translateY(0); }
  50%  { opacity: 0; transform: translateY(-80%); }
  100% { opacity: 0; transform: translateY(-80%); }
}
@media (prefers-reduced-motion: reduce) {
  .tabbar-d .tb-rot-i { position: static; opacity: 1; transform: none; animation: none; }
  .tabbar-d .tb-rot-i:not(:nth-of-type(1)) { display: none; }
}
/* 页内横向页签里的「主打」项：同样变蓝加粗（不挂标签，横向空间紧） */
.web-main .mp-subnav .utab.is-featured { color: var(--c-brand); font-weight: 600; }
/* Hero 主按钮留白 + 暗岗网格滚动留白（避开 sticky 顶栏） */
.jm-hero-cta { display: inline-flex; margin-top: 18px; }
#jmDarkGrid { scroll-margin-top: 96px; }

/* 一级导航 · 桌面分节版（2026-09-26 三组信息架构）
   三组：社区 / 找工地图 / 伙伴计划。组标题是**纯展示**、不可点
   （磊哥原话：找工地图仅仅是分区名字，仅做展示分区用，不做任何功能）——
   所以它渲染成 div 而非 button，题不对版的问题从结构上就不存在。
   手机版结构 .tabbar-m 在桌面隐藏，.tabbar-d 反过来只在桌面出现。 */
.web-aside .tabbar-m { display: none; }
.web-aside .tabbar-d { display: block; width: 100%; }
.nav-group + .nav-group { margin-top: 16px; }
.nav-group-h {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  color: var(--c-tertiary); text-transform: uppercase;
  padding: 0 12px; margin: 0 0 5px;
}
.nav-g-badge {
  display: inline-block; letter-spacing: 0; text-transform: none;
  font-size: 10.5px; font-weight: 600; line-height: 16px; height: 16px;
  min-width: 16px; padding: 0 5px; text-align: center;
  color: #fff; background: var(--c-brand); border-radius: 99px;
}

/* 侧栏页脚（数据源 / 切换到手机版 / 返回官网）
   ⚠️ 2026-09-23：这里原先有一个小标题「账户」，但下面三样没有一样与账户有关
   —— 一个是技术状态、两个是页面出口；而 `margin-top: auto` 又把这一块推到侧栏最下缘，
   于是标题与它"管辖"的内容之间空出 436px（1440×900 实测；矮屏 1440×760 空 296px），
   观感就是"「账户」这个分类里什么都没有"。已删掉那个假标题，改用一条极细的分隔线
   把页脚与主导航划开；`margin-top: auto` 保留（页脚沉底是桌面应用的常规做法，
   空间不足时 auto 会自动归零，不会挤坏布局）。分隔线用 var(--c-line)，
   亮色 #eee / 暗色 #2c2c2e —— 两端主题都够淡，不会抢主导航的视觉重量。 */
.web-aside-foot {
  margin-top: auto; display: flex; flex-direction: column; gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--c-line);
}
.web-aside-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px; font-size: 12.5px; color: var(--c-tertiary);
}

/* 「切换到手机版」由「深色实心」降权为「轻量描边」，不再抢主导航的视觉重量 */
.web-switch {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 12px; border-radius: 10px;
  background: transparent; color: var(--c-secondary);
  box-shadow: inset 0 0 0 1px var(--c-line);
  text-decoration: none; font-size: 13.5px; font-weight: 500;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.web-switch:hover {
  background: var(--c-fill-hover); color: var(--c-primary);
  box-shadow: inset 0 0 0 1px var(--c-quaternary);
}
.web-switch:active { background: var(--c-fill-active); }
.web-aside-back {
  text-align: center; font-size: 12.5px; color: var(--c-secondary);
  text-decoration: none; padding: 6px; border-radius: 8px;
  transition: color .16s ease, background-color .16s ease;
}
.web-aside-back:hover { color: var(--c-primary); background: var(--c-fill-hover); }

/* --------------------------------------------------------------------------
   三、主内容区（宽度随屏幕自适应）
   -------------------------------------------------------------------------- */
.web-main {
  position: relative; flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; height: 100%;
}

/* 悬浮发帖按钮：只管尺寸与质感；定位交给 §十三 的 0 宽列（.web-fabcol），
   这样它永远贴住「内容列右缘」，不受辅助栏显隐影响 */
.web-main .fab {
  width: 56px; height: 56px;
  transition: transform .2s var(--ease), opacity .2s var(--ease), box-shadow .2s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.12);
}
.web-main .fab:hover { transform: scale(1.05); box-shadow: 0 14px 38px rgba(0, 0, 0, 0.26), 0 3px 10px rgba(0, 0, 0, 0.14); }

/* --------------------------------------------------------------------------
   四、顶栏（改为桌面三栏：左标题 / 中搜索 / 右操作）
   -------------------------------------------------------------------------- */
.web-main .mp-nav {
  height: var(--d-nav-h); padding: 0 20px; gap: 8px;
  background: var(--c-glass);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  /* 🔴 2026-09-30（磊哥定）：去掉顶栏与工作区之间的横灰线。
     原为 `box-shadow: inset 0 -1px 0 var(--c-line)`（亮色 #eee / 暗色 #2c2c2e）。
     顶栏是半透明毛玻璃（--c-glass + blur），与内容区本就有观感差异，
     这条 1px 灰线删掉后更干净。
     ⚠️ 下面 `.nav-plain`（找工五页）那条 `box-shadow: none` 保留 —— 它现在
        与这条同值，但两条规则各自的语义仍然独立（一处管全站、一处管五页），
        将来任一页要单独恢复线条时不会互相牵连。 */
  box-shadow: none;
}
/* 第 41 期·补7（2026-09-28 磊哥定稿）：找工五页去掉顶栏灰线。
   ⚠️ 必须在这里补一条：本文件上面的 `.web-main .mp-nav`（两层类名）权重高于
      mini.css 的 `.mp-nav.nav-plain`（也是两层，但本文件后加载/权重并列时靠后生效）
      —— 不补这条，桌面端灰线不会消失（与 40 期的 pf2 覆盖坑同源）。
   口徑与 mini.css 完全一致：nav-plain = jobs 四页 + 报刊亭；图标改蓝仍走 mini.css。 */
.web-main .mp-nav.nav-plain { box-shadow: none; }
/* 标题由「绝对定位居中」改为「左对齐自然流」 */
.web-main .mp-nav-title {
  position: static; left: auto; right: auto; transform: none;
  padding: 0 0 0 6px; text-align: left; pointer-events: auto;
  margin-right: auto;
  font-size: 17px; font-weight: 600; letter-spacing: -.015em;
  max-width: 32%;
}
.web-main .mp-nav-actions { margin-left: 0; gap: 4px; }
.web-main .mp-nav .ic-btn { width: 38px; height: 38px; border-radius: 10px; }
.web-main .mp-nav .ic-btn:hover { background: var(--c-fill-hover); }

/* 顶栏中部：全站搜索入口（点击浮出搜索框；⌘K / Ctrl+K 同效）
   ⚠️ 第 9 期（2026-09-26）：顶栏正中央让给了首页四按钮行，这里从
   「居中长条」改成「靠右的图标按钮」—— 只留放大镜，长提示与 ⌘K 徽标收起
   （点击行为、⌘K 快捷键、浮层全部不变，index.html 的 JS 一行不改）。
   居中口径与 .nav-home-tabs 一致：相对整个应用窗口定位，左移半个侧栏宽。 */
.web-topsearch {
  position: absolute; z-index: 13;
  top: calc((var(--d-nav-h) - 38px) / 2);
  /* 靠右排布：[搜索] 紧挨 [通知] 的左边。
     通知按钮占 38px、顶栏右内边距 20px、两者留 4px 缝 ⇒ 搜索右缘 = 20+38+4 = 62px。
     与顶栏右上角按钮同一竖排思路，不随右侧辅助栏显隐跳动。 */
  left: auto; right: 62px;
  transform: none;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: var(--c-secondary);
  box-shadow: none;
  font-family: var(--font); text-align: center;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.web-topsearch:hover {
  background: var(--c-fill-hover); color: var(--c-primary);
}
.web-topsearch svg { flex: 0 0 auto; width: 20px; height: 20px; }
/* 长提示与 ⌘K 徽标在图标形态下收起（保留在 DOM 里，不删，便于无障碍朗读） */
.web-topsearch-txt { display: none; }
.web-topsearch kbd { display: none; }

/* 第 41 期·补7（2026-09-28 磊哥定稿）：找工四页（团队地图/职位列表/暗岗地图/我的）
   隐藏顶栏搜索放大镜。⚠️ 报刊亭**不在**这四页内（它的搜索/通知按钮保持不变）。
   标记由 index.html 的 syncPageFlags() 按路由打到 <html data-topsearch="…"> ——
   此按钮不在 #nav 内（是 index.html 的独立元素），故只能用页面级标记控制。
   作用范围 = 全站（含 ≥1024 与 768–1023 两档）—— 这两个断点下它分别是
   「顶栏搜索入口」与「手机版搜索入口」，四页都不该出现。 */
html[data-topsearch="hidden"] .web-topsearch { display: none; }

/* --------------------------------------------------------------------------
   四之二、顶栏正中央的首页四按钮行（第 9 期，磊哥 2026-09-26）
   手机版四按钮行在内容区顶端（.home-tabs-content）；桌面版搬进顶栏、
   居中显示，内容区那份隐掉。两份是**同一段 HTML**（app.js 的 homeTabsHTML），
   这里只按断点二选一，不做任何 DOM 搬移 —— 同 .tabbar-m / .tabbar-d 的路子。
   居中口径与 .web-topsearch 一致：相对整个应用窗口居中
   （左移半个侧栏宽），否则会偏右半个侧栏。
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  /* 桌面顶栏不再显示页面标题（磊哥：去掉标题），四按钮行顶上正中央。
     ⚠ 顶栏右侧按钮原本靠 .mp-nav-title 的 margin-right:auto 推到最右；
     标题一隐，那个 auto 就没了、按钮会滑到左边去 ——
     所以把 .mp-nav-actions 自己改成 margin-left:auto（它本来就该贴右）。 */
  .web-main .mp-nav .mp-nav-title { display: none; }
  .web-main .mp-nav .mp-nav-actions { margin-left: auto; }

  /* 第 42 期：手机首页顶栏的「推荐 ˅」排序入口与大「+」发帖按钮，桌面不显示
     （桌面沿用四按钮行 + web 顶栏自身布局；桌面搜索/通知入口也不受影响）。 */
  .web-main .nav-feed-pill { display: none; }
  .web-main .nav-plus { display: none; }

  .nav-home-tabs {
    display: flex; align-items: center;
    position: absolute; z-index: 12;
    top: 0; height: var(--d-nav-h);
    /* 🔴 2026-09-30（磊哥定）：页签必须对齐**信息流正文列**的中心（不是窗口、也不是 .web-main）。

       ⚠️ 两次踩坑记录（都很隐蔽，别再犯）：
       ① 最初口径 = 整个应用窗口：`left: calc(50% - var(--nav-cx-shift))`。
          1440 实测页签中心 720，而正文列中心 680 ⇒ 偏右 40。
       ② 第一版修复误把「工作流」当成 `.web-main`（主内容区大容器）⇒ `left: 50%`，
          实测 834 = .web-main 中心。但 **.web-main 含右侧辅助栏**，
          正文列只是它里面偏左的一段 ⇒ 页签跑到正文列右边 **154px**。
          磊哥反馈「还是没有居中」正是这个原因。
       ③ ✅ 正解：三栏骨架是「左侧菜单(aside) | 正文列(.mp-body) | 右栏(.web-rail)」，
          `.web-body-row` 用 `justify-content: center` 把「正文列 + 右栏」当一整块居中，
          **左栏不参与** ⇒ 这块的左缘不是正文列左缘，整体重心被右栏往右拉。
          实测数据（1440 / 1760 / 1280 三档，偏差恒为 -154）：
              正文列中心 = 680 / 840 / 600
              .web-main 中心 = 834 / 994 / 754
              ⇒ **正文列中心 = .web-main 中心 − 154**（154 = 半个右栏宽 300/2 附近）
          所以用 `left: calc(50% - var(--nav-caro-shift))` 从 .web-main 中心回退即可。
          —— 但「回退多少」随右栏是否显示而变化，故下面按「右栏显示/不显示」两档给值。 */
    left: calc(50% - var(--nav-caro-shift, 0px));
    transform: translateX(-50%);
    pointer-events: auto;
  }
  /* 顶栏里的四按钮行：去掉下划线底座，按钮直接平铺在顶栏上。
     迭代史：① 原 gap:2px 太挤（实测 594→596）；② 2026-09-26 磊哥
     连续三轮嫌小，最终定 gap:56px；③ 同日磊哥再看截图，要求
     「删掉胶囊状的边框」——故去掉包裹层的浅灰底 + 描边 + 圆角 +
     内边距，只保留按钮自身外观与 56px 间距。 */
  .nav-home-tabs .home-tabs {
    margin: 0; gap: 56px; border-bottom: 0; box-shadow: none;
    padding: 0;
    background: none;
  }
  .nav-home-tabs .utab {
    padding: 6px 16px; border-radius: var(--r-pill);
    font-size: 13.5px; font-weight: 500;
  }
  /* 2026-09-26 磊哥（截图）：选中态不要浅色填充，改「蓝色粗下划线」——
     与内容区标签的下划线画法一致（tokens.css 基础样式本有 ::after 下划线，
     顶栏这份此前特意藏掉改胶囊填充，现翻回来）。 */
  .nav-home-tabs .utab.is-on { color: var(--c-brand); background: none; box-shadow: none; }
  /* 只负责「显示 + 贴底 + 蓝色」；粗细与圆角交给下方 .web-main .utab.is-on::after
     （2.5px、3px 3px 0 0），与内容区标签完全一致，避免两处各写一份。 */
  .nav-home-tabs .utab.is-on::after { display: block; bottom: 0; background: var(--c-brand); }
  .nav-home-tabs .utab:hover { color: var(--c-primary); }

  /* 内容区那份在桌面隐掉（手机端由 mini.css 默认显示） */
  .web-main .home-tabs-content { display: none; }
}

/* ≥1024：桌面顶栏的搜索是 .web-topsearch（图标 + ⌘K + 浮层），
   把右上角那个手机版搜索图标隐掉，免得出现「两个放大镜」。
   ⚠ 只在 ≥1024 隐 —— 768–1023 这一档 .web-topsearch 是隐藏的（见 §十一），
   那时必须留这个图标当唯一搜索入口。
   ⚠️ --nav-cx-shift 已**无任何消费者**（2026-09-30 四按钮行改用 --nav-caro-shift，
      见上方 .nav-home-tabs 注释）。保留定义仅为兼容，可删。

   🔴 2026-09-30（磊哥定）：四按钮行要居中于**信息流正文列**。
      正文列中心 = .web-main 中心 − 半个右栏宽（因为 .web-body-row 把
      「正文列 + 右栏」整体居中，左栏不参与，重心被右栏往右拉了）。
      实测偏差恒为 154px ≈ (--d-rail-w 300 + --d-rail-gap)/2 —— 见下。
      ⚠️ 右栏只在「发现流两页 + is-shown」时显示（≥1280），故分两档：
        · ≥1280（发现流两页，右栏显示）→ 回退 (rail-w + rail-gap)/2
        · 其余（右栏不显示）→ 回退 0（正文列自己就是整体，中心 = .web-main 中心） */
@media (min-width: 1024px) {
  .web-main .mp-nav .mp-nav-actions .ic-btn[data-act="search"] { display: none; }
  .web-main { --nav-cx-shift: calc(var(--d-aside-w) / 2); --nav-caro-shift: 0px; }
}
/* 右栏显示档（与 .web-rail.is-shown 的门槛一致：发现流两页 ≥1280）。
   ⚠️ 用 --d-rail-w / --d-rail-gap 算，别写死 154 —— 变量若调档，这里跟着走。 */
@media (min-width: 1280px) {
  .web-main { --nav-caro-shift: calc((var(--d-rail-w) + var(--d-rail-gap)) / 2); }
}

/* 768–1023：左侧栏被压成 0 宽（见 §十一 平板形态）。 */
@media (min-width: 768px) and (max-width: 1023px) {
  .web-main { --nav-cx-shift: 0px; }
}

/* --------------------------------------------------------------------------
   五、子导航（分段标签：下拉线收进内容宽度内）
   -------------------------------------------------------------------------- */
.web-main .mp-subnav {
  box-shadow: inset 0 -1px 0 var(--c-line);
}
/* 页签条与「内容列左缘」严格对齐：
   内容列在 .web-body-row 内以 --d-margin 起排，页签条也以 --d-margin 起排，
   两者天然对齐（不再各自居中，那是上一版空隙错位的根源之一） */
.web-main .mp-subnav .utabs {
  border-bottom: 0; box-shadow: none;
  gap: 32px;
  padding: 0 var(--pad-page) 0 calc(var(--d-margin) + var(--pad-page));
}
.web-main .utab {
  padding: 15px 0 14px;
  font-size: 14.5px; font-weight: 500;
  transition: color .18s ease;
}
.web-main .utab.is-on::after { height: 2.5px; border-radius: 3px 3px 0 0; }

/* --------------------------------------------------------------------------
   六、内容宽度与页面留白
   内容列宽度统一由 .web-body-row > .mp-body 决定（见 §十三）。
   这里若再限宽 + 居中，就会与主体栅格叠加，造成「内容偏左、辅助栏顶到
   窗口右边、中间却空一条」的双重定位 —— 上一版正是如此，故彻底交还。
   -------------------------------------------------------------------------- */
.web-main .mp-page,
.web-main .mp-page-flush { max-width: none; margin: 0; }
.web-main .mp-page { padding: var(--d-sp-6) var(--pad-page) var(--d-sp-8); }
.web-main .mp-page-flush { padding-bottom: var(--d-sp-8); }

/* 第 41 期·补7（2026-09-28 磊哥定稿）：找工四页（团队地图/职位列表/暗岗地图/我的）
   页头内边距收紧 —— 磊哥要「内容区整体上移、页面自适应」。
   改前：页头上内边距 = var(--d-sp-6)（32px），首块落到 88px（顶栏底 56 + 32）。
   改后：压到 12px，首块上移到 68px，视觉上标题紧贴顶栏但不顶死。
   ⚠️ 范围与 html[data-topsearch="hidden"]（那四页）完全一致 —— 报刊亭 / 首页 / 其余页
      的内边距一字不动。标记由 index.html 的 syncPageFlags() 打到 <html> 上。
   ⚠️ 必须写在这条之后：`.web-main .mp-page`（两层类名）权重高，靠后者胜。 */
html[data-topsearch="hidden"] .web-main .mp-page { padding-top: 12px; }

/* 「我的」（jobs/mine）不是 .mp-page 形态，而是 `#body > .mp-pad.mt-lg > .card.mt-md`
   （见 app.js viewJobsMine）。它的顶部留白来自两级外边距叠加：
     .mp-pad.mt-lg = 16px + .card.mt-md = 12px ⇒ 首块落到 72px。
   ⚠️ .mt-lg / .mt-md 是全站共用工具类（tokens.css），**绝不能直接改** ——
      只在这四页范围内把这两级顶距压到 0，首块即上移到 56px（紧贴顶栏）。
   ⚠️ 用 `>` 直接子代选择器，避免波及卡片内部嵌套的 .mt-md。 */
html[data-topsearch="hidden"] .web-main #body > .mp-pad.mt-lg { margin-top: 0; }
html[data-topsearch="hidden"] .web-main #body > .mp-pad > .card.mt-md:first-child { margin-top: 0; }

/* 贴底操作栏 / 评论栏：按内容列宽度居中，而不是横穿整屏 */
.web-main .mp-footer-bar,
.web-main .comment-bar {
  left: 0; right: 0; margin: 0 auto;
  max-width: calc(100% - 2 * var(--d-margin));
}
.web-main .mp-footer-bar { padding: 14px var(--pad-page); }

/* --------------------------------------------------------------------------
   七、组件桌面尺度（覆盖 mini.css 中写死为手机尺寸的部分）
   -------------------------------------------------------------------------- */

/* 帖子卡 */
.web-main .post-head { padding: 20px 20px 0; gap: var(--d-sp-3); }
.web-main .post-author { font-size: var(--d-f-body); }
.web-main .post-meta { font-size: var(--d-f-aux); }
.web-main .post-body { padding: var(--d-sp-3) 20px var(--d-sp-4); }
.web-main .post-title { font-size: var(--d-f-card); line-height: var(--d-lh-card); margin-bottom: var(--d-sp-2); }
.web-main .post-text { font-size: var(--d-f-body); line-height: var(--d-lh-body); }
.web-main .post-actions { padding: var(--d-sp-2) 12px var(--d-sp-3); margin-top: var(--d-sp-2); }
.web-main .post-act { height: 36px; font-size: var(--d-f-aux); border-radius: var(--d-r-sm); }
.web-main .post-tags { padding: 0 20px var(--d-sp-4); gap: var(--d-sp-2); }
.web-main .poll { padding: 0 20px var(--d-sp-4); }
.web-main .poll-opt { padding: var(--d-sp-3) var(--d-sp-4); font-size: var(--d-f-body); }
.web-main .link-card { margin: 0 20px var(--d-sp-4); padding: var(--d-sp-4); }
.web-main .link-title { font-size: var(--d-f-body); }
.web-main .link-thumb { width: 60px; height: 60px; }

/* 卡片：桌面用统一的卡片材质（圆角 / 阴影 / 描边），
   让主内容与右侧辅助栏看起来是同一套东西 */
.web-main .post,
.web-main .ent,
.web-main .job-card,
.web-main .dk-card,
.web-main .msg-cat-card {
  border-radius: var(--d-r-card);
  box-shadow: var(--d-sh-card), var(--d-ring);
}

/* 卡片悬停：轻微抬升 + 阴影加深。指针悬停是桌面专属能力，用它交代"可点" */
.web-main .post,
.web-main .ent,
.web-main .job-card {
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.web-main .post:hover,
.web-main .ent:hover,
.web-main .job-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--d-sh-hover), var(--d-ring);
}
.web-main .ent-click { cursor: pointer; }

/* 通用条目卡 */
.web-main .ent-body { padding: var(--d-sp-4) 20px 20px; }

/* 媒体区：统一高度与比例，滚动节奏一致（手机版为 196/200 的散值） */
/* 补8e（2026-09-30 磊哥定）：封面色块同样「限宽 + 圆角」，与 .post-img 口径一致 ——
   色块此前不在 .post-media 内（feedCard 直出）导致所有圆角规则选不中，满宽直角。 */
/* 补8f（2026-09-30 磊哥定）：.post-media 加与正文同值左右内边距（20px），
   让信息流里的图片/色块不再顶着卡片左边框，而是与文字左对齐。 */
.web-main .post-media { padding: 0 20px; }
.web-main .post-media > .cv { width: auto; max-width: 460px; height: clamp(224px, 19vw, 300px) !important; border-radius: 16px; }
.web-main .post-media-grid > .cv { height: 208px !important; }
/* P3：真实上传的图片，桌面版第 46 期·补8 改满宽原始比例（上限比手机更高） */
/* 补8 修订（2026-09-30 磊哥定）：桌面端卡片图片同样限制尺寸、圆角、不裁切（与手机端一致，只是略大） */
.web-main .post-media > .post-img { width: auto; max-width: 460px; max-height: 380px; object-fit: contain; border-radius: 16px; }
.web-main .post-media > .post-video { height: clamp(240px, 22vw, 340px); }

/* 团队卡 */
.web-main .team-cover { height: 132px; }
/* 头部浮出量两端必须一致：桌面 .ent-body 的 padding-top 是 16px（手机 12px），
   而 logo 的上浮量是同一个固定值，于是手机压图 22px、电脑只压 18px。
   这里把团队卡自己的 padding-top 对齐成 12px，两端浮出量就完全相同。 */
.web-main .team-body { padding-top: 12px; }

/* 通知 */
.web-main .msg-item { padding: var(--d-sp-4) 20px; gap: var(--d-sp-4); }
.web-main .msg-title { font-size: var(--d-f-body); }
.web-main .msg-text { font-size: var(--d-f-aux); }
.web-main .msg-cat-card { padding: 20px; }

/* 个人页 */
.web-main .pf-hero { padding: var(--d-sp-6) var(--pad-page) var(--d-sp-5); }
.web-main .pf-row { padding: var(--d-sp-4) var(--pad-page); }
/* 第 34 期：名片页标签栏与折叠行在桌面拉高一档，与桌面字号/间距同调。
   第 41 期·补3：页签改为「纯文字 + 底部蓝线」形态，桌面把下划线留白也拉高一档。 */
.web-main .pf-tab { padding: 11px 0 14px; font-size: var(--d-f-body); }
.web-main .pf-fold-h { padding: var(--d-sp-4) var(--pad-page); font-size: var(--d-f-body); }

/* 暗岗 */
.web-main .dk-card { padding: 20px; }
.web-main .dk-title { font-size: var(--d-f-sec); }

/* --------------------------------------------------------------------------
   八、键盘可达性（桌面专属）
   -------------------------------------------------------------------------- */
.web-main :focus-visible,
.web-aside :focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
  border-radius: 6px;
}
.web-main .post:focus-visible,
.web-main .ent:focus-visible { outline-offset: 0; }

/* --------------------------------------------------------------------------
   九、滚动条（桌面细化）
   -------------------------------------------------------------------------- */
.web-main .mp-body { scrollbar-width: thin; scrollbar-color: var(--c-quaternary) transparent; }
.web-main .mp-body::-webkit-scrollbar { width: 12px; }
.web-main .mp-body::-webkit-scrollbar-track { background: transparent; }
.web-main .mp-body::-webkit-scrollbar-thumb {
  background: var(--c-quaternary); border-radius: 99px;
  border: 3px solid transparent; background-clip: content-box;
}
.web-main .mp-body::-webkit-scrollbar-thumb:hover {
  background: var(--c-tertiary); background-clip: content-box;
}
.web-aside::-webkit-scrollbar { width: 8px; }
.web-aside::-webkit-scrollbar-thumb {
  background: var(--c-line); border-radius: 99px;
  border: 2px solid transparent; background-clip: content-box;
}

/* --------------------------------------------------------------------------
   十、断点阶梯
   内容列宽度、窗口留白、字号随屏幕的分档升降，统一在 web-tokens.css 里定义。
   本文件不再重复定义断点 —— 两处各写一套正是上一版"1440 两侧空旷、
   1600/1920 又顶死两端"的根源。
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   十一、平板形态：底部四按钮（768 – 1023px）
   门户从 768px 起就把人送到桌面版，所以 768–1023 是真实有人用的宽度
   （iPad 竖屏 820/834、折叠屏展开、分屏窗口、小笔记本窄窗）。

   这一档不用左侧栏：228px 的固定侧栏在 1024 宽时会把内容压到约 750px，
   而 768–1023 这一段比 1024 还窄，再减掉侧栏就更局促。
   改为把主导航（发现 / 找工 / 来信 / 个人）放到底部 —— 手指够得着，
   内容吃满整宽（768 宽时卡片可用 736px，两列各 362px）。

   顶部不留任何栏：品牌标 / 分组标题 / 「切换到手机版」入口在这一档整体隐藏，
   页面从标题栏（.mp-nav）直接开始，观测上等同手机版。

   分界为什么定在 1024 —— 2026-09-24 磊哥在 P4 微调里拍板，**此前是 1200**。
   理由：1024（iPad 横屏）已进入「大屏 + 常带实体键盘」的场景，
   竖排侧栏能一眼列全所有导航项，效率高于底部四按钮；
   而 768–1023（iPad 竖屏为主）仍以触摸为主，底部导航更顺手。
   ⚠ 代价要知情（这不是缺陷，是取舍）：
   1024 时内容区会从「全宽约 991px」变成「减掉 228px 侧栏后约 748px」，
   两列各约 366px —— 仍可读，但明显窄于 1023 时的 482px。
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .screen { flex-direction: column; }

  /* —— 顶部不留栏：把容器压成 0 高 ——
     ⚠ 为什么不用 display:none ——
     底部主导航 .tabbar 就住在这个容器内部。父级一旦 display:none，
     整棵子树都会被隐藏，底栏会跟着一起消失。
     所以这里只把 .web-aside 自身压平：高度归零、不占位、内边距与
     分隔线去掉，但保持 overflow:visible —— 子元素 .tabbar 是
     position:fixed，脱离文档流后照常渲染，贴屏幕下缘。
     实测（834 宽）：.web-aside 高 0，底栏照常 fixed 贴底，内容一并上移 48px。 */
  .web-aside {
    width: 100%; height: 0; min-height: 0;
    padding: 0; gap: 0; overflow: visible;
    box-shadow: none;
  }
  /* 品牌标、分组标题、侧栏页脚（含「切换到手机版」与那条分隔线）整体隐藏。
     ≥1024 的左侧栏里这几样照常存在，只是这一档不显示。
     分隔线是 .web-aside-foot 自己的 border-top，随它一起隐藏，
     不会在这一档留下一条孤零零的横线。 */
  .web-aside-brand, .web-aside-group, .web-aside-foot { display: none; }

  /* —— 底部主导航：四个功能按钮贴屏幕下缘（含安全区）——
     为什么用 fixed 而不是 flex 排序：tabbar 在 .web-aside 里，
     CSS 无法把它挪出父容器。fixed 相对视口定位，祖先的 overflow:hidden
     不裁剪它（.screen 没有建立 fixed 包含块），所以这一条在真机上、
     在预览页的 iframe 里都成立。≥1024 的媒体查询不命中即自动失效。 */
  .web-aside .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    flex: none; gap: 0;
    flex-direction: row; align-items: flex-start;
    height: calc(var(--tabbar-h) + var(--safe-b));
    padding-bottom: var(--safe-b);
    background: var(--c-glass);
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    box-shadow: inset 0 1px 0 var(--c-line);
  }

  /* 🔴 第 56 期修（2026-10-02 磊哥：主域名给 C 端）：窄屏底栏要显示**手机 Dock**
      (.tabbar-m，即「社区 / 找工 / 消息 + 圆形我」四个按钮)，不是桌面版三组列表。
      ⚠️ 老 bug：上面只把 .web-aside 压平、把 .tabbar 改成固定底栏，却**漏了反选**
         .tabbar-m / .tabbar-d —— 而第 174 行的桌面规则（.tabbar-d:block）在同优先级的
         窄屏档继续生效 ⇒ 724px 高的桌面侧栏列表整块漏进 52px 的底栏（实测 390 与
         834 宽均如此，底栏里看到的是「社区」分组标题而不是四个按钮）。
         这条同时把 /web/ 在平板档（768–1023）的老问题一并修好。
      容器口径回到 mini：透明、不要内阴影，让 Dock 自己浮在底缘居中。 */
  .web-aside .tabbar-d { display: none; }
  .web-aside .tabbar-m { display: flex; }
  .web-aside .tabbar {
    align-items: center;
    padding: 0 12px var(--safe-b);
    background: transparent;
    box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .web-aside .tabbar-item {
    flex: 1 1 0; flex-direction: column; gap: 2px;
    height: var(--tabbar-h); justify-content: center; padding: 0;
  }
  .web-aside .tabbar-item .tb-label { font-size: 11px; }
  .web-aside .tabbar-item:hover { background: transparent; }
  /* 选中态回到手机版底栏的样子：图标文字变深 + 顶部一条小横线指示器。
     侧栏那套「软色底块」在这里会变成浮在栏上的一枚圆角按钮（实测很抢眼），
     与底部导航的观感不符，故在平板形态下反选回来。 */
  .web-aside .tabbar-item.is-on,
  .web-aside .tabbar-item.is-on:hover { background: transparent; color: var(--c-primary); }
  .web-aside .tabbar-item.is-on::before { display: block; }
  .web-aside .tabbar-item.is-on .tb-ic { transform: translateY(-1px); }

  /* —— 内容区：吃满整宽 —— */
  .web-main { height: auto; flex: 1 1 auto; min-height: 0; }
  .web-topsearch { display: none; }
  .web-main .mp-page,
  .web-main .mp-page-flush,
  .web-main .mp-subnav .utabs,
  .web-main .mp-footer-bar,
  .web-main .comment-bar { max-width: none; }
  .web-main .mp-nav-title { max-width: none; }
  .web-crumbs { display: none; }

  /* 页签条回到普通页内边距（桌面那档要减去 --d-margin 才能对齐内容列）。
     ⚠ 内容全宽与底部留白那几条写在 §十九 —— .web-body-row 的基准规则在
     本文件更靠后的 §十三，写在这里会被它按「同优先级后者胜」盖掉。 */
  .web-main .mp-subnav .utabs { padding: 0 var(--pad-page); }
}

/* --------------------------------------------------------------------------
   十二、卡片多列流（≥768px）
   全部列表页的卡片容器统一是 .col.card-gap（都挂在 .mp-page 内）；
   详情页用的是 .mp-pad，不含该容器 ⇒ 天然不会被误伤。
   纯 CSS 覆盖，不改 app.js。

   列数分两档：
     768 – 1023 ：写死 2 列（平板竖屏、分屏窗口）
     ≥1024      ：auto-fill，列宽下限 320px，列数随可用宽度自动增减

   为什么中屏要写死 2 列，而不交给 auto-fill ——
   1023 是「底部导航形态」（内容全宽，卡片可用约 991px），交给 auto-fill 会算 3 列；
   1024「左侧栏」一回来，内容区缩到约 748px（卡片可用约 700px），只能回到 2 列。
   窗口只宽了 1px，列数反而少一列，是典型倒退。写死 2 列后，
   768 到 1023 始终是 2 列，≥1024 才交还给宽度自己决定（1366 起升到 3 列）。
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .web-main .mp-page .col.card-gap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;      /* 关键：同一行的卡片等高，底边齐平 */
  }

  /* 卡片自身改成纵向 flex，把「底部那一行」（操作区 / 公司信息）压到底，
     这样即使正文长短不一，同一行卡片的按钮也能横向对齐。
     实测原先找工页同一行高度在 239 / 258 之间跳。 */
  .web-main .mp-page .col.card-gap > .post,
  .web-main .mp-page .col.card-gap > .job-card,
  .web-main .mp-page .col.card-gap > .ent { display: flex; flex-direction: column; }
  .web-main .mp-page .col.card-gap .post-actions,
  .web-main .mp-page .col.card-gap .job-foot { margin-top: auto; }

  /* 多列下卡片变窄：封面按列宽等比 16:9，避免出现近方形的超大封面。
     只作用于「封面图」，不含 link-thumb(60×60) 与 team-cover */
  .web-main .mp-page .col.card-gap .post-media > .cv,
  .web-main .mp-page .col.card-gap .post-media-grid > .cv {
    height: auto !important;
    aspect-ratio: 16 / 9;
  }

  /* 消除「卡中卡」：多图帖子在小卡片里排成 2 列小图，会和外面的 2 列网格
     叠成"格子里还有格子"，视觉很碎（实测某条帖子卡内 1 大 2 小共 3 张）。
     多列下只保留第一张主图，图片区回归单张。 */
  .web-main .mp-page .col.card-gap .post-media-grid { display: block; }
  .web-main .mp-page .col.card-gap .post-media-grid > *:not(:first-child) { display: none; }

  /* 正文限 4 行，让同组卡片的高度差异可控 */
  .web-main .mp-page .col.card-gap .post-text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* 分界与 §十一 保持一致：≥1024 左侧栏回来，列数交还给可用宽度自己决定 */
@media (min-width: 1024px) {
  /* 够宽了，列数交还给可用宽度自己决定 */
  .web-main .mp-page .col.card-gap {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }

  /* 条目很少的组（如「编辑精选」2 条）：收窄成 1~2 列铺满整行 ——
     不在右侧留一整片空列，左边缘仍与分组标题对齐。
     标记由 /web/index.html 的脚本按实际条目数打上。
     只在大屏启用：中屏本来就只有 2 列，收窄没有意义，
     反而会让"1 条帖子铺满整行"在 800px 宽的平板上显得突兀。

     ⚠ 只对「纵向内容卡」（帖子 / 故事 / 报刊亭 / 标杆 …）生效。
     职位卡（.job-card）与团队 / 企业卡（内含 .team-cover）是横向卡：
     它们铺满整行会变成一条超宽横带 —— 实测云端只剩 1 条职位时，
     卡片被拉到 1176px，而正常列宽只有 384px。故横向卡一律不参与收窄，
     始终保持固定列宽（不满行就让右边留白，符合网格的一般预期）。 */
  .web-main .mp-page .col.card-gap.is-two:not(:has(> .job-card)):not(:has(> .ent > .team-cover)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .web-main .mp-page .col.card-gap.is-one:not(:has(> .job-card)):not(:has(> .ent > .team-cover)) {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 分组标题与右侧计数改为靠拢成一组。
     上一版两端对齐：标题在 x=264、"2 篇"被推到 x=1528，中间断开 1156px。 */
  .web-main .mp-page .row-between:has(> .t-card) {
    justify-content: flex-start;
    gap: var(--d-sp-3);
  }
}

/* --------------------------------------------------------------------------
   十三、主体栅格：内容列 + 悬浮按钮列(0 宽) + 右侧辅助栏
   --------------------------------------------------------------------------
   行车线一句话：左右两端各留 --d-margin 的白，中间的内容列吃满剩余空间
   （受 --d-content 上限约束），辅助栏紧贴内容列右侧 --d-rail-gap。

   为什么不把内容列 justify-content:center 居中 ——
   那样内容列与辅助栏会各自被推向自己那一端，中间裂出一条空带。
   实测（1920）：辅助栏右缘 = 1920（顶死窗口右边、右边距 0），
   内容列左缘 = 228（顶死左侧栏、左边距 0），两端都顶死，中间反而空着。
   -------------------------------------------------------------------------- */
.web-body-row {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: stretch;
  justify-content: center;      /* 内容列 + 辅助栏 作为一整块居中 */
  /* 间隙由辅助栏自己的 margin 承担，不用 gap ——
     0 宽的悬浮按钮列若也参与 gap，会在"无辅助栏"时凭空多出 8px 右留白 */
  gap: 0;
  padding-left: var(--d-margin);
  padding-right: var(--d-margin);
}
/* 内容列：理想宽度 = --d-content 上限；空间不够时收缩，够时不再变宽。
   这里刻意不让它 grow —— 一旦 grow，它会把辅助栏一起顶到窗口右缘，
   就退回了"两端顶死、中间空一条"的老毛病。 */
.web-body-row > .mp-body {
  flex: 0 1 var(--d-content);
  min-width: 0;
  max-width: var(--d-content);
}
/* 0 宽列：只为给悬浮按钮一个「贴着内容列右缘」的定位参照 */
.web-fabcol { flex: 0 0 0; width: 0; position: relative; align-self: stretch; }
.web-main .web-fabcol .fab { right: 0; bottom: 28px; }
.web-main .web-fabcol .fab-menu { right: 0; bottom: calc(28px + 68px); }

.web-rail {
  display: none;
  flex: 0 0 var(--d-rail-w); width: var(--d-rail-w);
  margin-left: var(--d-rail-gap);   /* 与内容列的间隙（替代 gap，见 .web-body-row） */
  align-self: stretch;
  overflow-y: auto; overflow-x: hidden;
  padding: var(--d-sp-6) 0 var(--d-sp-8);
  scrollbar-width: thin; scrollbar-color: var(--c-quaternary) transparent;
}
/* 辅助栏门槛 = 1700px：这是"开栏之后内容列仍放得下 3 列"的最小宽度。
   实测 1600 开栏时内容列只剩 880px → 只能排 2 列，比不开栏时的 3 列还少，
   出现"屏越宽、列数反而变少"的倒退；1680 也只差 16px 就会掉到 2 列，
   故门槛取 1700，留出余量。 */
@media (min-width: 1700px) {
  .web-rail.is-shown { display: block; }
}
.web-rail::-webkit-scrollbar { width: 8px; }
.web-rail::-webkit-scrollbar-thumb {
  background: var(--c-line); border-radius: 99px;
  border: 2px solid transparent; background-clip: content-box;
}
.web-rail-block + .web-rail-block { margin-top: var(--d-sp-6); }
.web-rail-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--d-sp-2);
  font-size: var(--d-f-aux); font-weight: 600; color: var(--c-secondary);
  margin-bottom: var(--d-sp-3); padding: 0 2px;
}
.web-rail-more {
  font-size: var(--d-f-aux); font-weight: 400; color: var(--c-tertiary);
  text-decoration: none; transition: color .16s ease;
}
.web-rail-more:hover { color: var(--c-brand); }
.web-rail-list { display: flex; flex-direction: column; gap: var(--d-sp-2); }

/* 辅助栏卡片与主内容卡片共用同一套材质（surface 底 + 同款阴影 / 描边 / 圆角）。
   上一版这里是"浅灰底 + 内侧描边"，与主内容不是一套东西 —— 一条栏里两套语言。 */
.web-rail-item {
  display: block; padding: var(--d-sp-3) var(--d-sp-4);
  border-radius: var(--d-r-ctl);
  background: var(--c-surface); box-shadow: var(--d-sh-card), var(--d-ring);
  cursor: pointer; text-decoration: none; color: inherit;
  transition: box-shadow .18s var(--ease), transform .18s var(--ease);
}
.web-rail-item:hover { transform: translateY(-2px); box-shadow: var(--d-sh-hover), var(--d-ring); }
.web-rail-t {
  font-size: var(--d-f-body); font-weight: 500; color: var(--c-primary);
  line-height: var(--d-lh-card);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.web-rail-m {
  margin-top: var(--d-sp-2); font-size: var(--d-f-aux); color: var(--c-tertiary);
  display: flex; align-items: center; gap: var(--d-sp-2);
}
.web-rail-m > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.web-rail-s { color: var(--c-brand); font-weight: 600; flex: 0 0 auto; }
.web-rail-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--d-sp-2); }
.web-rail-link {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: var(--d-sp-3) var(--d-sp-2); border-radius: var(--d-r-ctl);
  background: var(--c-surface); box-shadow: var(--d-sh-card), var(--d-ring);
  font-size: var(--d-f-aux); color: var(--c-secondary); text-decoration: none;
  transition: color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.web-rail-link:hover {
  color: var(--c-brand); transform: translateY(-2px);
  box-shadow: var(--d-sh-hover), var(--d-ring);
}
.web-rail-link svg { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   十四、面包屑（只在二级以上详情页出现，列表页不重复显示）
   -------------------------------------------------------------------------- */
.web-crumbs {
  flex: 0 0 auto;
  background: var(--c-glass);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 -1px 0 var(--c-line);
}
.web-crumbs[hidden] { display: none; }
.web-crumbs .wc-in {
  height: 34px; display: flex; align-items: center; gap: 4px;
  max-width: var(--d-content); margin: 0 auto; padding: 0 var(--pad-page);
  font-size: 12.5px; color: var(--c-tertiary);
  overflow-x: auto; white-space: nowrap; scrollbar-width: none;
}
.web-crumbs .wc-in::-webkit-scrollbar { display: none; }
.web-crumbs button {
  background: none; border: 0; font: inherit; cursor: pointer;
  color: var(--c-secondary); padding: 3px 6px; border-radius: 6px;
  transition: color .16s ease, background-color .16s ease;
}
.web-crumbs button:hover { color: var(--c-primary); background: var(--c-fill-hover); }
.web-crumbs .wc-sep { color: var(--c-quaternary); flex: 0 0 auto; }
.web-crumbs .wc-cur {
  color: var(--c-primary); font-weight: 600; padding: 3px 6px;
  overflow: hidden; text-overflow: ellipsis; max-width: 340px;
}

/* --------------------------------------------------------------------------
   十五、全局搜索浮层（⌘K / Ctrl+K）
   -------------------------------------------------------------------------- */
.web-search {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 11vh 20px 20px;
}
.web-search[hidden] { display: none; }
.web-search-mask {
  position: absolute; inset: 0;
  background: rgba(12, 15, 22, .44);
  backdrop-filter: saturate(140%) blur(5px); -webkit-backdrop-filter: saturate(140%) blur(5px);
  animation: wsfade .18s ease both;
}
@keyframes wsfade { from { opacity: 0 } to { opacity: 1 } }
@keyframes wsrise { from { opacity: 0; transform: translateY(-10px) scale(.985) } to { opacity: 1; transform: none } }
.web-search-box {
  position: relative; width: min(620px, 100%);
  max-height: min(68vh, 600px);
  display: flex; flex-direction: column;
  background: var(--c-card); border-radius: 14px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .3), 0 2px 10px rgba(0, 0, 0, .1), inset 0 0 0 1px var(--c-line);
  overflow: hidden;
  animation: wsrise .2s cubic-bezier(.2, .7, .3, 1) both;
}
.web-search-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; box-shadow: inset 0 -1px 0 var(--c-line);
  color: var(--c-tertiary);
}
.web-search-head input {
  flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none;
  font-family: var(--font); font-size: 15.5px; color: var(--c-primary);
}
.web-search-head input::placeholder { color: var(--c-tertiary); }
.web-search-head kbd {
  flex: 0 0 auto; font-family: var(--font); font-size: 11px; line-height: 1;
  padding: 4px 6px; border-radius: 5px;
  background: var(--c-surface); color: var(--c-tertiary);
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.web-search-body { flex: 1 1 auto; overflow-y: auto; padding: 8px; }
.ws-h {
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--c-tertiary); padding: 10px 10px 6px;
}
.ws-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: 9px; cursor: pointer;
}
.ws-item.on { background: var(--c-fill-hover); }
.ws-item-ic {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-brand-soft); color: var(--c-brand);
}
.ws-item-b { flex: 1 1 auto; min-width: 0; }
.ws-item-t {
  font-size: 14px; color: var(--c-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ws-item-m {
  margin-top: 2px; font-size: 12px; color: var(--c-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ws-empty { padding: 38px 16px; text-align: center; color: var(--c-tertiary); font-size: 13.5px; }
.ws-tip { padding: 26px 16px 30px; text-align: center; color: var(--c-tertiary); font-size: 12.5px; }
.ws-tip b { color: var(--c-secondary); font-weight: 500; }

/* --------------------------------------------------------------------------
   十六、空状态桌面适配（沿用项目自带 .empty，只调桌面尺寸；不做假骨架屏）
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .web-main .empty { padding: 84px 24px; gap: 14px; }
  .web-main .empty svg { width: 30px; height: 30px; }
}

/* --------------------------------------------------------------------------
   十七、详情页的阅读宽度（第 41 期·补：改为自适应，不再固定 980）

   ⚠ 历史（2026-09-28 磊哥反馈「我的名片两侧空白太大」）：
     原来这里写死 `max-width: 980px`，导致 1440 屏上名片页左右各空 230px，
     在更宽的屏上空得更多 —— 而这一条**盖过了** §十三 的 `--d-content`
     （`.web-main:not(.is-grid) .web-body-row > .mp-body` 选择器权重更高），
     所以「改 --d-content 也没用」。这就是"说了很多次都改不到"的真正原因。

   ✅ 现改为：**跟随窗口自适应**，只在超宽屏保留一个上限防「一行拉太长」。
      · ≤ 1679px ：完全铺满（仅受 .web-body-row 的 --d-margin 左右留白约束）
      · ≥ 1680px ：收在 --d-content（web-tokens.css 里随屏分档：1680/1920/2400 各一档）
      · < 1024px ：完全不限（平板/手机形态本就不该有上限，见 §十九）

   数值来源：--d-content 在各档为 1200/1280/1360/1480/1720（随屏递增），
   详情页在超宽屏直接复用它作为收口值 —— 既铺得开、也留得住阅读节奏。
   -------------------------------------------------------------------------- */
.web-main:not(.is-grid) .web-body-row > .mp-body { max-width: none; }
@media (min-width: 1680px) {
  /* 超宽屏才收口：1680 以下全铺满，1680 起按 --d-content 走（它本身已随屏分档） */
  .web-main:not(.is-grid) .web-body-row > .mp-body { max-width: var(--d-content); }
}

/* --------------------------------------------------------------------------
   十八、页内筛选输入框
   找工页 / 团队页的搜索框是「筛选当前列表」的功能控件
   （app.js 的 data-job-search / data-team-search），与顶栏「全站搜索 ⌘K」
   职责不同，不能删。但桌面下若给它整行满宽，页面上就会同时出现两个一样大的
   搜索框。这里把它收窄成从属于筛选条的次要控件。
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  /* 用后代选择器而非 > ：找工页的搜索框是 mp-page 直接子元素，
     发现页的却套在 .row 里（旁边还有个图标按钮），要一并覆盖 */
  .web-main .mp-page .search-bar { max-width: 400px; height: 38px; }
}

/* --------------------------------------------------------------------------
   十九、内容全宽与页内边距（平板形态，< 1024px）
   平板形态的骨架见 §十一（底部四按钮 + 顶部不留栏），这里落实内容区的宽度。

   ⚠ 为什么这两条必须写在这个位置（文件靠后）而不是 §十一：
     .web-body-row 的基准规则在 §十三、.is-grid 的正文宽度在 §十七，
     都在 §十一 之后。同优先级下后出现的胜出，写早了会被它们盖掉 ——
     实测过：留在 §十一 时，-d-margin 的 32/24px 左右留白照样生效，
     正文根本没收满整宽。
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  /* 这一档没有侧栏，不需要为栏留出的左右留白；底部那一档让给底部导航。
     让位加在 .web-body-row 而不是 .mp-body：滚动条会跟着缩短，
     最后一行卡片不会被栏压住，也不会多出一条可滚动的空白尾巴。
     悬浮发帖按钮挂在同一行内，随之自动抬高。 */
  .web-body-row {
    padding-left: 0; padding-right: 0; gap: 0;
    padding-bottom: calc(var(--tabbar-h) + var(--safe-b));
  }
  .web-main:not(.is-grid) .web-body-row > .mp-body { max-width: none; }
}
/* 窄档页内边距再收一档：与手机版一致取 16px ——
   768 宽时卡片可用 736px，两列各 362px。
   1024–1199 这一档左侧栏已经回来（§十一 的分界改到了 1024），
   页内边距沿用 web-tokens.css 的 24px：比 768 那档宽松，但比 ≥1200 紧。 */
@media (max-width: 1023px) {
  .mp-stage { --pad-page: 16px; }
}

/* --------------------------------------------------------------------------
   二十、弹层：底部抽屉 → 居中弹窗（≥768px）
   手机版是「从底部升起的抽屉」，小屏上完全合理（拇指可达、拖拽把手有用）。
   但同一份设计跑到 1920 屏上就变成了横跨整屏的宽带，各元素被横向拉爆
   （实测：弹层 1920px、标题输入框 1888px、类型分段每段 472px、
   发布按钮 1830px 且落在屏幕最下缘）。这里只重定「桌面尺度」，
   < 768px 仍旧回到原来的底部抽屉。
   两条实现上的注意：
     1) 弹层挂在 <body> 下、不在 .mp-stage 里，取不到 --d-* 局部变量，
        所以这里写具体值，只借用全局的 --c-* / --dur-* / --ease。
     2) web.css 只在 /web/index.html 引入，手机版页面根本不加载它，
        因此这份规则等于天然隔离，不会影响 /mini/、企业端、平台端。
   —— 全站有 6 处共用这个容器（发布内容 / 分享到 / 确认投递 / 编辑简历 /
      我的名片 / 搜索），改这一处，6 个面板一起桌面化。
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .sheet-modal {
    left: 50%; right: auto;
    top: 50%; bottom: auto;
    /* 宽度 —— 两侧边距定 128px，而不是原来的 80px。
       为什么改（2026-09-24 磊哥提的「平板竖屏弹层几乎贴边」）：
         768–887 这一带窗口还窄，80px 边距下弹窗会占到屏宽约 90%
         （实测 768 时 688px = 89.6%），左右各只留 40px，观感上"贴边"。
         边距放大到 128px 后：768 时宽 640px（83.3%，两侧各 64px），
         888 起就撞到 760px 上限 —— 只有最窄的一段被收窄，
         1024 / 1440 这几档毫发无损（仍是 760px）。 */
    width: min(760px, calc(100vw - 128px));
    max-height: min(84vh, 860px);
    border-radius: 18px;
    padding: 24px 32px 22px;
    /* 入场：淡入 + 轻微上浮（替换手机版的整条上滑） */
    transform: translate(-50%, calc(-50% + 16px)) scale(0.988);
    opacity: 0;
    transition: transform var(--dur-3) var(--ease), opacity var(--dur-2) var(--ease);
  }
  .sheet-modal.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; }

  /* 手机上的拖拽把手，鼠标场景没有意义 */
  .sheet-grip { display: none; }

  /* 第 5 期 · 极简发布面板：桌面端要更高一些。
     参考图里大输入区才是主角，而 60vh 在 1080 高的屏上只有 648px ——
     扣掉顶栏与底栏后留给正文的不足以写三百字。 */
  .sheet-modal.is-compose { max-height: min(88vh, 880px); }
  .sheet-modal.is-compose .cp { min-height: min(70vh, 660px); }

  /* 标题：桌面习惯靠左；右侧留出关闭按钮的位置 */
  .sheet-title {
    text-align: left;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding-right: 46px;
    margin-bottom: 2px;
  }

  /* 类型分段：不再铺满整宽 */
  .sheet-modal .seg-block { width: auto; max-width: 380px; }
  .sheet-modal .seg-block .seg-item { flex: 0 0 auto; min-width: 86px; }

  /* 表单节奏：弹窗内比手机版松一档 */
  .sheet-modal .form-col { gap: 18px; }
  .sheet-modal .field { gap: 8px; }
  .sheet-modal .input { height: 42px; }
  .sheet-modal .textarea { min-height: 132px; }

  /* 封面选择：18 个色块排成 9 × 2 两行，等分铺满
     （原来 12 个 44px 小方块挤在左侧一大片空白里；现在可选封面是 18 个，
      9 列正好两行排满，不会出现"第二行只剩 6 个"的缺角） */
  .sheet-modal [data-compose-cover-wrap] .row {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 10px !important;
  }
  .sheet-modal .cv {
    width: auto !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    border-radius: 10px !important;
    box-shadow: none !important;
  }
  /* 选中态改由类名驱动（app.js 写的是内联 box-shadow，桌面下统一交给 CSS） */
  .sheet-modal .cv.is-picked { box-shadow: 0 0 0 2px var(--c-brand) !important; }
  .sheet-modal .cv.is-picked::before {
    content: ""; position: absolute; z-index: 2;
    left: 50%; top: 50%; width: 15px; height: 8px;
    margin: -6px 0 0 -8px;
    border-left: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  }

  /* 底部操作行：发布按钮收回到正常尺寸并靠右，不再横贯整宽 */
  .sheet-modal .sheet-body > .form-col > .row:last-child {
    justify-content: flex-end;
    gap: 12px !important;
  }
  .sheet-modal .sheet-body > .form-col > .row:last-child > .btn { flex: 0 0 auto; }
  .sheet-modal .sheet-body > .form-col > .row:last-child > .btn.grow { min-width: 148px; }

  /* 审核提示条：两端不再拉得那么开 */
  .sheet-modal .card-fill { padding: 11px 14px; }
}

/* 弹层关闭按钮（由 /web/index.html 的桌面增强脚本注入；手机版无此按钮） */
.web-sheet-x {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--c-card); color: var(--c-secondary);
  transition: background-color .16s ease, color .16s ease;
}
.web-sheet-x:hover { background: var(--c-line); color: var(--c-primary); }
.web-sheet-x:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.web-sheet-x svg { display: block; }

/* --------------------------------------------------------------------------
   二十一、「个人 → 动态」顶部的发布入口区
   现状（1920 实测）：900px 宽的卡片里，三个数字分贴两端、中间空出约 700px；
   下面一个 820 × 30 的黑色长条按钮，扁得像一条分隔线 ——
   整块里最该被点的地方，视觉权重反而最低。
   这里把统计重排成「三格等宽 + 细分隔线」，按钮归位到右侧正常尺寸。
   纯 CSS 重排现有 DOM：不新增元素、不改 app.js（用 :has 精确定位到这一张卡）。
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .web-main .mp-pad > .card:has(> .btn-block[data-compose]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 36px;
    padding: 20px 24px;
  }

  /* 统计区：三格等宽 */
  .web-main .mp-pad > .card:has(> .btn-block[data-compose]) > .row-between {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    column-gap: 22px;
  }
  .web-main .mp-pad > .card:has(> .btn-block[data-compose]) > .row-between > .row {
    grid-column: 2 / span 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 !important;
    border-left: 1px solid var(--c-line);
  }
  .web-main .mp-pad > .card:has(> .btn-block[data-compose]) > .row-between > .row > div {
    padding-left: 22px;
  }
  .web-main .mp-pad > .card:has(> .btn-block[data-compose]) > .row-between > .row > div + div {
    border-left: 1px solid var(--c-line);
  }

  /* 三格数字统一字号与左对齐（其中一个带内联 22px，需要 !important 覆盖） */
  .web-main .mp-pad > .card:has(> .btn-block[data-compose]) .row-between .t-num {
    font-size: 22px !important;
    font-weight: 600;
    line-height: 1.2;
    color: var(--c-primary);
  }
  .web-main .mp-pad > .card:has(> .btn-block[data-compose]) .row-between .t-micro { margin-top: 3px; }
  .web-main .mp-pad > .card:has(> .btn-block[data-compose]) .row-between .t-right { text-align: left; }

  /* 发布按钮：从横贯长条改回正常尺寸、贴右 */
  .web-main .mp-pad > .card:has(> .btn-block[data-compose]) > .btn-block {
    width: auto;
    height: 40px;
    padding: 0 24px;
    margin-top: 0;
    gap: 7px;
    justify-self: end;
  }
}

/* --------------------------------------------------------------------------
   二十一、发现页发布入口（桌面版）
   发布条本体的样式在 mini.css（手机版与桌面版共用），这里只调桌面尺度。
   第 7 期起快捷入口是「五个纯图标 + 右侧发帖药丸」，整行由 flex 两端布局
   （图标靠左、药丸靠右），桌面不再需要原来「四等分限宽」那套规则。
   选择器带 .web-main 前缀，优先级高于 mini.css 里的单类选择器，
   所以不受两份文件先后顺序影响。
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .web-main .publish-bar { padding: 14px; }
  .web-main .publish-hint { height: 38px; font-size: 15px; }
  .web-main .publish-lead { width: 38px; height: 38px; }
  .web-main .publish-quick-item { width: 38px; height: 38px; }
  .web-main .publish-submit { height: 34px; }
}

/* ----------------------------------------------------------------------
   2026-09-26（三组信息架构）：左侧栏已列出全部 13 个一级入口，
   顶栏那条横向子导航就是同一份清单的复制 —— 桌面起隐藏，去掉视觉重复。
   平板（768–1023 走底部栏 + 横向子导航）与手机不受影响。
   ⚠️ 用 !important 是因为 app.js 的 render() 用内联 style 控制它的显隐。
   ---------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .web-main .mp-subnav { display: none !important; }
}

/* ==================== 第 18 期：团队地图（bonjour 式卡片墙） ==================== */
/* jm-grid 本身带 col/card-gap，768+ 的两列网格、等高 flex 已由上面的通用规则覆盖；
   这里只补三件事：① 1024+ 放宽到 300px 一列（bonjour 桌面是三列，320px 在
   web-main 的可用宽度下只出得来两列）；② hero 桌面放大；③ 桌面 hover 上浮更明显。 */
@media (min-width: 1024px) {
  .web-main .mp-page .col.card-gap.jm-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
  .web-main .jm-hero { padding-top: 30px; }
  .web-main .jm-title { font-size: 30px; }
  .web-main .jm-script { font-size: 19px; top: -18px; }
  .web-main .jm-card:hover { transform: translateY(-3px); }
}

/* 第 35 期：桌面端「+ 添加 Block」浮动按钮贴视口右下（手机端要避开底部工具栏） */
.web-main #body .pf-fab { right: 32px; bottom: 32px; }
/* 第 40 期·调：桌面端名片页两栏「呼吸感」——间距 56px（与 mini.css 同口径）。
   第 41 期·补（2026-09-28 磊哥反馈「两侧空白太大，要铺满」）：
   原来这里写 `max-width: min(1120px, 100%)` —— 在 1920 屏上只占 1120px、
   两侧各空 ~400px，这正是磊哥反复看到的「两侧空白太大」的另一处元凶。
   现改为 **不设上限、用满容器**；超宽屏的统一收口交给 §十七 的容器规则
   （容器收窄，.pf2 自然跟着收窄，无需在这里再写一个数）。
   ⚠️ 本条选择器带 #body（id 权重）⇒ 会盖过 mini.css 的 .pf2 媒体查询，
   改间距/宽度必须与 mini.css **两处同步**，否则桌面端只生效这里、看着像「改了没反应」。 */
@media (min-width: 1024px) {
  .web-main #body .pf2 {
    gap: 56px;
    max-width: 100%;
    grid-template-columns: minmax(360px, min(50%, 640px)) 1fr;
  }
}

/* --------------------------------------------------------------------------
   §二四、单列信息流（第 44 期 · 2026-09-30 磊哥定稿）
   「社区精选 / 自荐墙 / 方法论」三个页面（app.js 在 .mp-page 上打 mp-single 标记）：
   桌面不再多列卡片墙，改成「一列、居中、上下翻阅」的窄列信息流（参考即刻 Web）。
   · 列宽 640px：hero、分组标题、卡片、底部「已经到底了」整页一起收进这一列，
     左右边缘全部对齐；
   · 正文取消 4 行截断（那是多列时代「同组高度可控」的取舍）；
   · 多图帖子恢复 2 列小图网格（「只留第一张」同样是多列取舍）。
   写在文件末尾：§十二 的 .web-main .mp-page .col.card-gap（0,4,0）与本节同源，
   本节选择器多一层 .mp-single（0,5,0）⇒ 稳赢，且不依赖声明顺序。
   -------------------------------------------------------------------------- */
.web-main .mp-page.mp-single { max-width: 640px; margin-left: auto; margin-right: auto; }
.web-main .mp-page.mp-single .col.card-gap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
/* 正文恢复全文 */
.web-main .mp-page.mp-single .col.card-gap .post-text {
  display: block; -webkit-line-clamp: unset; overflow: visible;
}
/* 多图恢复小图网格 */
.web-main .mp-page.mp-single .col.card-gap .post-media-grid { display: grid; }
.web-main .mp-page.mp-single .col.card-gap .post-media-grid > *:not(:first-child) { display: block; }


/* ==========================================================================
   第 45 期 · 右栏「特别活动 + 热门话题」（2026-09-30 磊哥定稿）
   · 两块落在既有的右侧辅助栏里（.web-rail，与热门职位/报刊亭/快捷入口同栏），
     由 index.html 的 renderRail() 从 app.js 发布的 window.CrossingRail 画出来。
   · 🔴 门槛：辅助栏原本 ≥1700px 才出现 —— 那是为「卡片排三列」定的（见上面 §辅助栏）。
     首页 / 社区精选这两页现在是 640px 单列窄信息流，1280px 宽时右侧就有富余，
     所以**只在这两页**（rail 上打了 .is-feed 标记）把门槛降到 1280px，其余页面一字不变。
   ========================================================================== */
@media (min-width: 1280px) {
  .web-rail.is-shown.is-feed { display: block; }
}
/* 「全部 ›」这类行内按钮：与链接同款，但去掉按钮默认外观 */
button.web-rail-more {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: var(--d-f-aux); color: var(--c-tertiary);
  transition: color .16s ease;
}
button.web-rail-more:hover { color: var(--c-brand); }

/* 自荐墙 · 方法论 轮播 —— 第 46 期·补4（2026-09-30 磊哥定稿）：
   原「特别活动」整块改造。两张幻灯（主视觉图 + 栏目名 + 一句内容/说明），
   自动轮播（5s，悬停暂停）、圆点切换。
   🔴 图本身是按钮（磊哥定：删掉「了解详情」）—— 整张幻灯可点：
        有内容 ⇒ app.js 的弹层入口（data-wall-open / data-method-open）；
        没内容 ⇒ 去该栏目页。
   非当前幻灯用 display:none（高度随文案自适应，不做绝对定位叠层）。 */
.web-rail-caro { position: relative; }
.web-rail-slide {
  display: none; width: 100%; padding: 0; cursor: pointer; font-family: inherit;
  border: 1px solid var(--c-line); border-radius: var(--r-card);
  background: var(--c-card); overflow: hidden; text-align: left;
  transition: border-color .16s ease;
}
.web-rail-slide.is-on { display: block; animation: railCaroIn .32s ease; }
.web-rail-slide:hover { border-color: var(--c-brand-line); }
.web-rail-caro-img { display: block; width: 100%; height: 132px; object-fit: cover; border-radius: 12px; }
.web-rail-caro-tag {
  display: inline-block; margin: 10px 12px 0; padding: 2px 8px;
  border-radius: var(--r-pill); background: var(--c-brand-soft); color: var(--c-brand);
  font-size: var(--d-f-micro); font-weight: 500;
}
.web-rail-caro-line {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 6px 12px 12px; font-size: var(--d-f-aux); color: var(--c-primary); line-height: 1.55;
}
.web-rail-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.web-rail-dot {
  width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%;
  background: var(--c-line); cursor: pointer;
  transition: background .16s ease, width .16s ease, border-radius .16s ease;
}
.web-rail-dot.is-on { background: var(--c-brand); width: 14px; border-radius: var(--r-pill); }
@keyframes railCaroIn { from { opacity: 0 } to { opacity: 1 } }

/* 热门话题 —— 第 46 期·补3（2026-09-30 磊哥定稿）方案 C：主推卡 + 两列小卡。
   主推卡 = 第一名话题（浅蓝底），卡内第二行显示该话题下**最热的一条内容标题**；
   其余话题 2 列小卡（话题名 + 该话题最热一条的**部分内容**，补4 起不再显示条数）。
   选中态 = 描边高亮（is-on）；提示行「点话题只看相关的内容」已按磊哥要求删除。 */
.web-rail-tmain {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--c-brand-line); border-radius: var(--r-card);
  background: var(--c-brand-soft); padding: 12px 14px; font-family: inherit;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.web-rail-tmain:hover { border-color: var(--c-brand); }
.web-rail-tmain.is-on { border-color: var(--c-brand); box-shadow: inset 0 0 0 1px var(--c-brand); }
.web-rail-tmain-l {
  display: block; font-size: var(--d-f-body); font-weight: 600; color: var(--c-primary);
}
.web-rail-tmain-s {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 4px; font-size: var(--d-f-aux); color: var(--c-secondary); line-height: 1.55;
}
.web-rail-tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.web-rail-tcell {
  display: block; text-align: left; cursor: pointer; font-family: inherit;
  border: 1px solid var(--c-line); border-radius: 10px;
  background: var(--c-card); padding: 10px 12px;
  transition: border-color .16s ease, background .16s ease;
}
.web-rail-tcell:hover { border-color: var(--c-brand-line); }
.web-rail-tcell.is-on { border-color: var(--c-brand); background: var(--c-brand-soft); }
.web-rail-tcell-l {
  display: block; font-size: var(--d-f-aux); color: var(--c-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 小卡第二行 = 该话题下最热一条的**部分内容**（两行截断）。
   第 46 期·补4：原来的「N 条」按磊哥要求换成这段摘要（话题名已占一行，这里给内容看）。 */
.web-rail-tcell-s {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 3px; font-size: var(--d-f-micro); color: var(--c-tertiary); line-height: 1.5;
}

/* ==========================================================================
   第 54 期（2026-10-01 磊哥定）：登录 / 注册页只留注册框
   --------------------------------------------------------------------------
   bare 页（PAGES 里标 bare:true 的：`login` 登录注册页、`profile/edit` 编辑名片）
   不显示电脑端外壳的左右两栏：
     · .web-aside（左栏）= 品牌「外起 forthrise」+ 数据源 / 切换到手机版 / 返回官网 /
       切换端 —— 磊哥说的「顶栏那块」和「左下角所有模块」都在这里；
     · .web-rail（右栏）= 自荐墙 · 方法论 / 热门话题 / 暗岗地图 / 报刊亭 / 快捷入口。
   🔴 判据类名 .is-bare 由 app.js 的 render() 挂在 .mp-stage 上（只认 bare 页），
      本文件不自己判断路由 —— 路由判据只有一处，避免两边各写一套又走岔。
   ╰─ 顶栏 #nav 与底部 tabbar 本来就由 bare 判据清空，这里不再重复处理。
   ========================================================================== */
.mp-stage.is-bare .web-aside,
.mp-stage.is-bare .web-rail { display: none; }
/* 两栏没了，正文列自然占满；登录框按 app 自带样式居中，无需额外补位。 */