/* 2026-10-19 组件层 · 博主页（锚 docs/迭代/2026-10-19-博主页与资讯过滤与清理/ UI 规格 §1–§4、§6）
   资讯流行两个热区（行主体 + 来源胶囊）/ 弹窗层与模糊遮罩 / 博主页列表 / 详情两种头。
   载入顺序：v17-*.css 之后、theme-dark.css 之前——本文件无条件规则会盖过 mobile.css 对同一选择器的 ≤720 规则，≤720 的值在本文件
   @media (max-width: 720px) 里写全；颜色一律走令牌（深色随令牌切换），深色差异写在文件末尾。
   精确值来源：定稿画布 .claude/tools/canvas-blogger/src/canvas.css（10-19 用户验收三稿，docs/前端参考/2026-10-19-博主页与资讯过滤与清理/）。 */

/* ============ §1 资讯流行：行主体 .nw-hit + 来源胶囊 .nw-src ============ */
/* 行主体铺满整行（z 1）；封面、标题、摘录、时间不响应点击，穿透到它（层叠封面的组头封面 z 1 在它之后绘制，必须穿透） */
.nw-hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.nw-hit:disabled { cursor: default; }
.nw-hit:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.nw-item .nw-thumb, .nw-item .nw-stack, .nw-item .nw-title, .nw-item .nw-sum, .nw-item .nw-time { pointer-events: none; }

/* 来源胶囊：高 22（行里上下外边距 −2，占位 18，元信息行同 14 版折叠行）、内边距 0 7 0 9、--soft 底 + 1px --line 内描边；
   12/600 --ink-2；挤不下只省略博主名，「N 条」与 › 始终完整；透明 ::after 上下各撑 3、左右各撑 2 → 可点高 28 */
.nw-src {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%;
  height: 22px; padding: 0 7px 0 9px; border-radius: var(--r-pill); background: var(--soft); box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--fs-12); font-weight: 600; line-height: 16px; color: var(--ink-2); white-space: nowrap;
  transition: background var(--t-micro) var(--ease), color var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease);
}
.nw-src::after { content: ''; position: absolute; inset: -3px -2px; border-radius: inherit; }
.nw-meta .nw-src { margin: -2px 0; }
.nw-src-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nw-src-c { flex: none; font-variant-numeric: tabular-nums; }
.nw-src-c::before { content: '·'; margin-right: 4px; color: var(--ink-3); }
.nw-src svg { flex: none; width: 8px; height: 8px; color: var(--ink-3); transition: color var(--t-micro) var(--ease); }
/* 整行悬停 / 选中：胶囊底 --line；指针在胶囊上：底与描边 --line-hover、字 --ink、› --ink-2（行仍是 --soft-2） */
.nw-item:hover .nw-src, .nw-item.is-cur .nw-src { background: var(--line); }
.nw-src:hover, .nw-item .nw-src:hover { background: var(--line-hover); box-shadow: inset 0 0 0 1px var(--line-hover); color: var(--ink); }
.nw-src:hover svg { color: var(--ink-2); }
.nw-src:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
/* 资讯流骨架里的胶囊位：同高同外边距，只留灰条 */
.nw-src.is-sk { padding: 0; background: none; box-shadow: none; }
.nw-src.is-sk::after { content: none; }

/* ============ §2.1 弹窗层：铺满 .ws = 模糊遮罩 + 贴右面板 min(1040, 100% − 200)（替换 11 版「左侧留 300 连续点」） ============ */
.news-ovl { left: 0; width: auto; display: block; }
.nw-scrim {
  position: absolute; inset: 0; background: var(--scrim);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: mg-fade var(--t-in) var(--ease) both;
}
.nw-pop { position: absolute; top: 0; right: 0; bottom: 0; height: auto; width: min(1040px, calc(100% - 200px)); }
.news-ovl.is-closing .nw-scrim { animation: mg-fade-out var(--t-out) var(--ease) both; }

/* ============ §2.2 弹窗头：博主页 / 详情直接打开（来源胶囊）/ 从博主页进（‹ 博主名） ============ */
.nw-pop-head.is-list { gap: 8px; }
.nw-pop-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; color: var(--ink); }
.nw-pop-meta { flex: none; align-self: center; margin-top: 2px; font-size: var(--fs-12); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 头左时间位：胶囊与时间之间 8（胶囊本身就是分隔，不再写「·」）；不裁切，胶囊 ::after 的热区才不被吃掉 */
.nw-pop-src { display: flex; align-items: center; gap: 8px; overflow: visible; }
.nw-pop-when { flex: none; }
.nw-who { flex: 0 1 auto; height: 28px; padding: 0 9px 0 11px; gap: 3px; color: var(--ink); }
.nw-who::after { inset: -4px -2px; }
.nw-who svg { width: 10px; height: 10px; }
.nw-back-t { display: inline-block; max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============ §3 博主页列表 ============ */
/* 博主页视图正文上内边距 0：日期头吸顶时贴住弹窗头下沿；第一个日期头的 14 上内边距就是列表起始留白 */
.nw-pop-body.is-list { padding-top: 0; }
.sl { position: relative; max-width: 880px; margin: 0 auto; padding-left: 14px; }
.sl-group { position: relative; }
.sl-group::before { content: ''; position: absolute; left: -9px; top: 46px; bottom: 20px; width: 2px; border-radius: 1px; background: var(--line-2); }
.sl-day {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: baseline; gap: 6px;
  margin-left: -14px; padding: 14px 0 6px 14px; background: var(--card);
}
.sl-day-t { font-size: var(--fs-13); font-weight: 700; color: var(--ink); }
.sl-day-s { font-size: var(--fs-11); color: var(--ink-3); }
.sl-day-n { margin-left: auto; font-size: var(--fs-11); color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* 行：左封面（有真封面才有）+ 右文字列，间距 14；同一天内行间 1px --line，日期头下第一行不画线；悬停 --soft-2 */
.sl-row {
  --sl-budget: 4;
  position: relative; display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 12px 0;
  text-align: left; transition: background var(--t-micro) var(--ease);
}
.sl-row + .sl-row { border-top: 1px solid var(--line); }
.sl-row:hover { background: var(--soft-2); }
.sl-row:focus-visible { outline-offset: -2px; }
.sl-row .nw-dot { left: -12px; top: 16px; }
.sl-row.no-time .nw-dot { top: 19px; }
.sl-row.is-unread .nw-dot { background: var(--ink-2); }
/* 开着时新到 / 恢复回来的条目：按 13 版「新到」闪一次（绿点 + 底色淡出） */
.sl-row.is-fresh .nw-dot { background: var(--green); box-shadow: 0 0 0 0 var(--green-ring); animation: nw-ring 1.4s ease-out 2; }
.sl-row.is-fresh { animation: nw-flash 2.6s ease 1; }
.sl-th { position: relative; flex: none; width: 200px; height: 112px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--soft); }
.sl-th img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sl-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%;
  background: rgba(15, 19, 27, .55); border: 1px solid rgba(255, 255, 255, .35); display: grid; place-items: center; color: #fff;
}
.sl-play svg { width: 14px; height: 14px; display: block; }
.sl-dur {
  position: absolute; right: 6px; bottom: 6px; height: 18px; padding: 0 6px; border-radius: 5px; display: inline-flex; align-items: center;
  background: rgba(15, 19, 27, .72); color: #fff; font-size: var(--fs-11); font-weight: 700; font-variant-numeric: tabular-nums;
}
.sl-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sl-meta { font-size: var(--fs-11); font-weight: 700; line-height: 16px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sl-h { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.sl-row.is-read .sl-h { color: var(--ink-2); }
/* 导读 / 摘录：没有封面的行两行；有封面的行按行数预算（§3.2.1，news-pop.js fitRows 写 data-sum）——标题几行，导读就少几行 */
.sl-s { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-13); line-height: 1.6; color: var(--ink-2); }
.sl-row[data-sum="1"] .sl-s { -webkit-line-clamp: 1; }
.sl-row[data-sum="2"] .sl-s { -webkit-line-clamp: 2; }
.sl-row[data-sum="3"] .sl-s { -webkit-line-clamp: 3; }
/* 底部：加载更早（同资讯流 .nw-more）/ 到底 / 空 */
.sl-foot { padding: 14px 0 0; }
.sl-foot .nw-more { margin-top: 0; }
.sl-end { padding-top: 16px; text-align: center; font-size: var(--fs-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sl-empty { padding: 64px 0; text-align: center; font-size: var(--fs-13); color: var(--ink-3); }
/* §3.5 骨架：同真实行结构，透明占位字撑行盒、行内底色即灰条（.nw-sk 同资讯流骨架）；封面占位同样闪 */
.sl.is-skel .sl-row { pointer-events: none; }
.sl.is-skel .sl-th {
  border-color: transparent;
  background: linear-gradient(90deg, var(--soft-2) 25%, var(--soft) 37%, var(--soft-2) 63%); background-size: 480px 100%; animation: mg-shimmer 1.3s infinite linear;
}
.sl.is-skel .sl-h, .sl.is-skel .sl-s, .sl.is-skel .sl-day-t { color: transparent; }

/* ============ ≤720：弹窗全屏、不画遮罩；资讯流行胶囊缩一号；博主页行 136×77、预算 3 ============ */
@media (max-width: 720px) {
  /* §1.3 只改资讯流行里的胶囊：高 20（外边距 −2，占位 16）、内边距 0 6 0 8、11/600、间距 3；::after 上下各撑 8、左右各撑 4 → 可点高 36 */
  .nw-meta .nw-src { height: 20px; padding: 0 6px 0 8px; gap: 3px; font-size: var(--fs-11); }
  .nw-meta .nw-src::after { inset: -8px -4px; }
  .nw-meta .nw-src-c::before { margin-right: 3px; }
  .nw-meta .nw-src.is-sk { padding: 0; }
  .nw-scrim { display: none; }
  .nw-pop { width: 100%; border-left: 0; box-shadow: none; }
  /* §4 博主页：正文内边距 0 14 40；日期头 12 0 4、「今天」12/700；行间距 10、内边距 10 0 */
  .nw-pop-body.is-list { padding: 0 14px 40px; }
  .sl-day { padding: 12px 0 4px 14px; }
  .sl-day-t { font-size: var(--fs-12); }
  .sl-group::before { top: 40px; }
  .sl-row { --sl-budget: 3; gap: 10px; padding: 10px 0; }
  .sl-row .nw-dot { top: 14px; }
  .sl-row.no-time .nw-dot { top: 15px; }
  .sl-tx { gap: 3px; }
  .sl-h { font-size: var(--fs-13); line-height: 1.45; }
  .sl-s { font-size: var(--fs-12); line-height: 1.5; }
  .sl-th { width: 136px; height: 77px; border-radius: 8px; }
  .sl-play { width: 28px; height: 28px; }
  .sl-play svg { width: 12px; height: 12px; }
  .sl-dur { right: 4px; bottom: 4px; height: 16px; padding: 0 5px; border-radius: 4px; }
}

/* ============ 深色：全部走令牌；遮罩取 --scrim 深色值（.5 黑），模糊同为 6px ============ */
[data-theme="dark"] .nw-pop { box-shadow: -18px 0 44px rgba(0, 0, 0, .5); }
@media (max-width: 720px) { [data-theme="dark"] .nw-pop { box-shadow: none; } }