/* ============================================================
   mp.css —— 页面 B（公众栏页）样式
   顶部色带（safe-top 治本 U1） / 号主体头（发展历程栏，整栏可点 R4-02） /
   装饰菜单 / 文章列表条目（含外链卡角标 R4-09） / 发展历程弹层（R4-10） /
   文章详情子页（上滑阅读页；T5-3 去毛玻璃治卡顿）
   v19 新增：置顶区 .mp-pinned（仅后台置顶文章，无置顶则不渲染）
   v20：「全部消息」装饰菜单与月份归档样式中整体移除（.mp-menu/.mp-archive 族），
        置顶行独立为 .mp-pinned-row 族
   弹层挂载于 #overlayRoot（T5-7），z-index(200) 在 layout.css 层级表统一维护
   ============================================================ */

/* ---------- 0. 顶部色带（R4/U1：向上延伸至页签背后，与半透明页签视觉一体） ---------- */
.page-b::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--safe-top) - 8px);
  background: linear-gradient(180deg, var(--c-primary-2), transparent);
  opacity: .15;
  z-index: 0;
}

/* ---------- 1. 号主体头 ----------
 * ⚠️ v42 起「公司发展历程」模块已整体下线，本页由 main.js 只挂 pinnedBar + 文章列表。
 *    v57 曾把号主体头死 CSS 按「死 CSS 对齐规范」保留（若日后模块复活可复用）；
 *    v96（代码清理）：该族已确认零引用，整族移除。复活时从 git 历史或 backup-pre-v96 取回。
 * v43：页签/横卡已移入固定头部（.fixed-head），页内不再让位，去 padding-top */
.mp-inner {
  background: var(--c-bg);
  position: relative;
  z-index: 1;                     /* 卡片浮于色带之上 */
}
/* ---------- 2c. v19 置顶区「置顶消息」（v20：页内唯一文章聚合入口） ----------
 * 无置顶文章时该节点不存在（page-mp buildPinnedBar 返回 null），不会出现空占位。
 * v57：由「白卡 + 左侧金竖条」改为**浅金渐变横幅**（设计稿核对值：135deg
 *   #f5efe0→#e9d9b5 / 圆角 12 / padding 8px 10px /「置顶」角标金底白字圆角 4px），
 *   与全站细边线卡体系同圆角，作为列表上方唯一的强调块。 */
.mp-pinned {
  margin: 12px 16px 0;
  overflow: hidden;
  border: 1px solid rgba(201, 169, 97, .28);
  border-radius: 12px;
  background: linear-gradient(135deg, #F5EFE0 0%, #E9D9B5 100%);
  box-shadow: var(--shadow-soft);
}
.mp-pinned-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(201, 169, 97, .25);
}
.mp-pinned-flag {
  flex: none;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--c-gold);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
}
.mp-pinned-label {
  flex: 1;
  text-align: left;
  font-size: 12.5px;
  font-weight: 700;
  color: #5C4A24;
}
.mp-pinned-count { font-size: 10.5px; color: #9A8455; }
/* v20：置顶行独立样式（原 .mp-archive-row 已随「全部消息」模块移除） */
.mp-pinned-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  font-size: 12.5px;
  color: #5C4A24;
  text-align: left;
  transition: background .15s ease;
  /* v82（需求 2）：与 .mp-item 同口径 —— 屏蔽系统长按（文本选择 / iOS callout），
     避免真机长按置顶行时系统派发 touchcancel 掐断长按计时器。同为非布局属性。 */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.mp-pinned-row:active { background: rgba(255, 255, 255, .5); }
.mp-pinned-row-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mp-pinned-row-date { flex: none; font-size: 10.5px; color: #9A8455; }

/* ---------- 3. 文章列表 ----------
 * v57：改为「左图右文细边线小卡」（设计稿核对值：封面 72×72 圆角 10 / 卡 padding 10px /
 *   圆角 12 / 1px #eef0f4 / 轻投影 / 列表间距 12→8px）。DOM 顺序未改（.mp-item-main 在前、
 *   封面在后），封面靠 `order:-1` 与日期/标题/摘要靠 flex `order` 重排实现「左图右文 +
 *   标题在上日期在下」，**零 JS 改动**（不碰点击/外链逻辑）。 */
.mp-list {
  margin: 12px 16px 0;
  display: grid;
  gap: 8px;
}
.mp-item {
  position: relative;  /* 外链卡角标定位基准（R4-09） */
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 10px;
  background: var(--c-card);
  border: 1px solid var(--c-line-soft);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
  /* v82（需求 2）：屏蔽系统长按 —— 禁止文本选择 + 关掉 iOS 长按呼出的 callout 菜单。
     真机上长按文章卡若不屏蔽，系统会接管手势（选中文字/弹菜单）并派发 touchcancel，
     把 longpress.js 的计时器掐断 → 举报窗不弹（自动化 CDP 不触发系统手势故测不出）。
     仅新增这 3 条属性，均为非布局属性，不改变任何几何与滚动（滚动仍在 .page）。 */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.mp-item:active {
  transform: scale(.985);
  box-shadow: 0 2px 8px rgba(15, 43, 91, .10);
}
.mp-item-main { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.mp-item-date {
  order: 2;
  margin-top: 5px;
  font-size: 11px;
  color: #B0B6C4;
  letter-spacing: .4px;
}
.mp-item-title {
  order: 1;
  margin-top: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mp-item-summary {
  order: 3;
  margin-top: 6px;
  font-size: 12px;
  color: var(--c-text-2);
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mp-item-cover {
  flex: none;
  order: -1;            /* v57：封面改到左侧（DOM 顺序不变） */
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--c-bg);
  align-self: center;
}
/* 外链卡角标（R4-09：↗ 提示新窗口打开） */
.mp-item-ext {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-primary-2);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(15, 43, 91, .28);
}

/* ---------- 4. 文章详情子页 ---------- */
.art-page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
}

/* 4.1 顶部返回栏（z-index 5 由 layout.css 层级表统一维护）
   第五轮 T5-3：去除 backdrop-filter——毛玻璃在 transform 上滑动画的弹层内
   每帧触发重新合成，是"详情展开中间卡顿"的主因；改实色背景视觉几乎无差 */
.art-topbar {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #fff;
  border-bottom: 1px solid var(--c-line);
}
.art-back {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  color: var(--c-text);
  padding-bottom: 3px; /* 视觉垂直居中修正 */
  transition: background .15s ease;
}
.art-back:active { background: var(--c-bg); }
.art-topbar-title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 第五轮 T5-7：.art-topbar-more（右上"···"装饰）已随 DOM 移除，样式一并清理 */
/* v76（需求 ③）：顶栏只剩「分享」一键（.art-topbar-acts 容器保留给分享键）；
   举报入口改在公众栏列表「长按文章模块」呼出，v75 的 ⚑ .art-report 样式随 DOM 一并清理 */
.art-topbar-acts {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* v72（需求 1）：顶栏右侧「转发这篇文章」按钮 —— 与 .art-back 对称的圆形图标键，
   配色沿用主题 token（不写死色值），按下有浅底反馈。 */
.art-share {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--c-text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}
.art-share:active { background: var(--c-bg); }
.art-share svg { width: 18px; height: 18px; }

/* 4.2 封面与标题区 */
.art-scroll { flex: 1; }
.art-cover { padding: 0; }
.art-cover-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  cursor: zoom-in;
}
.art-head { padding: 22px 20px 0; }
.art-title {
  font-size: 21px;
  font-weight: 800;
  color: var(--c-text);
  line-height: 1.5;
  letter-spacing: .5px;
}
.art-meta {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--c-text-3);
}
.art-meta-author { color: var(--c-primary-2); font-weight: 600; }

/* 4.3 正文块 */
.art-body { padding: 18px 20px 8px; }
.art-p {
  font-size: 15px;
  line-height: 2;
  color: #333;
  margin-bottom: 16px;
  text-align: justify;
}
.art-h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--c-primary);
  margin: 22px 0 12px;
  padding-left: 10px;
  border-left: 3px solid var(--c-gold);
  line-height: 1.4;
}
.art-quote {
  margin: 18px 0;
  padding: 12px 16px;
  border-left: 3px solid var(--c-gold);
  background: linear-gradient(90deg, var(--c-gold-soft), rgba(201, 169, 97, .04));
  border-radius: 0 10px 10px 0;
  font-size: 14px;
  color: #6B5A33;
  line-height: 1.9;
}
.art-fig { margin: 6px 0 18px; }
.art-img {
  width: 100%;
  border-radius: 12px;
  cursor: zoom-in;
  box-shadow: var(--shadow-card);
}
/* 可点击链接块（R6-6：正文 [link 文字](网址)，读者点击直达信息来源） */
.art-p-link { text-align: left; }
.art-link {
  display: inline-block;
  max-width: 100%;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid rgba(15, 43, 91, .14);
  background: var(--c-bg);
  color: var(--c-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  text-decoration: none;
  word-break: break-all;
  transition: border-color .2s ease, background .2s ease;
}
.art-link:active {
  border-color: var(--c-gold);
  background: var(--c-gold-soft);
}

/* 4.4 底部"阅读原文"与推广位 */
.art-footer {
  margin-top: 14px;
  padding: 8px 20px calc(28px + var(--safe-bottom));
  text-align: center;
}
.art-readmore {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 30px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--c-line);
  background: var(--c-bg);
  color: var(--c-text-2);
  font-size: 13px;
  letter-spacing: 1px;
  transition: border-color .2s ease, color .2s ease;
}
.art-readmore:active { border-color: var(--c-gold); color: var(--c-primary); }
.art-readmore-ico { font-size: 14px; }
.art-promo {
  margin-top: 16px;
  font-size: 11px;
  color: var(--c-text-3);
  letter-spacing: 1px;
}