/* 书架 = YouTube 首页布局（2026-08-24 重构）
   与奈飞式（hero 大片 + 标题压在封面上）的关键差别，逐条对齐 YouTube：
   ① 固定 masthead（☰ + 品牌 + 居中搜索 + 右侧动作），侧栏从 masthead 下缘开始
   ② 筛选片行（chips）sticky 贴在 masthead 下
   ③ 卡片 = 缩略图在上、文字在下（不压图）；时长角标右下；已读进度条贴缩略图底缘
   ④ 网格铺满视口宽（不收版心），列宽自适应
   色彩仍是本项目的纸墨朱三色 token，只是结构照 YouTube。 */

/* ---------- ① masthead ---------- */
#masthead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--mast-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 16px 0;
  display: none; /* 只在书架/生词本视图出现（阅读/脉络沉浸式全宽） */
  align-items: center;
  gap: 8px;
  background: var(--bg);
  z-index: 46; /* 侧栏 45 之上；词卡遮罩 50 之下 */
}
body.with-sidebar #masthead { display: flex; }
/* 滚动后与内容之间给一道发丝线（YouTube 滚动才出分隔） */
body.scrolled #masthead { border-bottom: 1px solid var(--line); }

/* ☰ 汉堡：宽屏切 rail、窄屏开抽屉 */
#btn-menu {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}
#btn-menu:hover { background: var(--hover); }
#btn-menu:active { background: var(--active-surface); }
/* 三横线（YouTube 的 ≡）：用 currentColor 画，随主题走 */
.mast-burger {
  position: relative;
  display: block;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.mast-burger::before,
.mast-burger::after {
  content: '';
  position: absolute;
  left: 0;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.mast-burger::before { top: -5px; }
.mast-burger::after { top: 5px; }

/* 品牌（印章 + 名字）：点回书架 */
#mast-brand {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 4px 6px;
  margin-right: 4px;
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#mast-brand:hover { background: var(--hover); }
.mast-seal {
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 3px;
  padding: 4px 6px;
}
.mast-name {
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--ink);
  white-space: nowrap;
}

/* 搜索框：居中、最宽 560（YouTube 口径），胶囊 + 右端放大镜段 */
#mast-searchbox {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: 36px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#mast-searchbox:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
#mast-search {
  flex: 1;
  min-width: 0;
  height: 100%;
  font-family: var(--sans);
  font-size: 16px; /* ≥16px 防 iOS 聚焦缩放 */
  color: var(--ink);
  background: none;
  border: none;
  outline: none;
  padding: 0 6px 0 16px;
}
#mast-search::placeholder { color: var(--ink-stone); }
#mast-search::-webkit-search-cancel-button { display: none; } /* 用自绘 ✕ */
#mast-search-clear,
#mast-search-go {
  flex: none;
  height: 100%;
  font-size: 13px;
  line-height: 1;
  color: var(--ink-soft);
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#mast-search-clear { width: 30px; }
#mast-search-clear:hover { color: var(--accent); }
#mast-search-go {
  width: 56px;
  border-left: 1px solid var(--line);
  background: var(--chip-bg);
}
#mast-search-go:hover { color: var(--accent); }

/* 右侧动作（主题 / 生词本）：图标 + 文字，窄屏只留图标 */
#mast-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
#mast-actions button {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-soft);
  background: none;
  border: none;
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}
#mast-actions button:hover { background: var(--hover); color: var(--accent); }
#mast-actions button:active { background: var(--active-surface); }
.tt-icon, .mba-icon, .mast-sync-icon { flex: none; font-size: 13px; line-height: 1; }

/* 书架同步状态钮：⟳ + 已同步时间。点击立即重扫材料目录；同步中图标旋转 */
#mast-sync .mast-sync-icon { font-size: 14px; }
#mast-sync.syncing .mast-sync-icon { animation: mast-sync-spin 0.9s linear infinite; }
@keyframes mast-sync-spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .mast-name { display: none; }
  .tt-label, .mba-label, .mast-sync-label { display: none; }
  #mast-actions button { padding: 8px; width: 36px; justify-content: center; }
}
@media (max-width: 560px) {
  #masthead { padding-left: 6px; padding-right: 6px; gap: 4px; }
  #mast-brand { display: none; } /* 窄屏让位给搜索（☰ 与书架导航已够回家） */
  #mast-search-go { width: 44px; }
}

/* ---------- ② 内容区：让开固定 masthead ---------- */
body.with-sidebar #app {
  padding-top: calc(var(--mast-h) + env(safe-area-inset-top) + 8px);
}
/* 书架铺满视口宽（YouTube 不收版心）；阅读/生词本/脉络仍由自身 max-width 收 720 */
body.with-sidebar #view-list { max-width: none; }

/* 筛选片行：sticky 贴 masthead 下缘，横向可滑（YouTube 式） */
#chips {
  position: sticky;
  top: calc(var(--mast-h) + env(safe-area-inset-top));
  z-index: 20;
  display: flex;
  gap: 8px;
  padding: 10px 0 12px;
  margin: 0 0 4px;
  background: var(--bg);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#chips::-webkit-scrollbar { display: none; }
#chips:empty { display: none; }
.chip {
  flex: none;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1;
  color: var(--chip-fg);
  background: var(--chip-bg);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 9px 14px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}
.chip:hover { background: var(--active-surface); }
.chip.is-on {
  color: var(--chip-on-fg);
  background: var(--chip-on-bg);
}
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 展签行（篇数 · 排序说明 / 文件夹名）：YouTube 没有这行，保留但压成浅墨小字 */
#view-list .list-info { margin: 2px 0 14px; }

/* ---------- ③ 卡片网格 ---------- */
.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  column-gap: 16px;
  row-gap: 36px;
  align-items: start;
}
@media (max-width: 640px) {
  /* 窄屏 YouTube 单列大卡（缩略图更大、更好点） */
  .article-grid { grid-template-columns: 1fr; row-gap: 24px; }
}

.article-card {
  position: relative;
  min-width: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.article-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px; }

/* 缩略图：恒 16:9 圆角块（YouTube 口径 12px） */
.thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--skeleton);
  transition: border-radius 0.15s ease;
}
.article-card:active .thumb { border-radius: 6px; }
.thumb .cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* 竖版封面（封面契约要求 16:9，这是兜底）：整幅放进 16:9 不裁切，
   背后垫一层同图模糊填色——YouTube 对非 16:9 素材也是「不切人脸」优先 */
.thumb--portrait .cover { object-fit: contain; }
.thumb-blur {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  object-fit: cover;
  filter: blur(18px) saturate(1.1);
  opacity: 0.55;
  display: block;
}
/* 无封面：纸色底 + 标题字样 + 朱砂小印（不进网格文字区，保持 16:9 齐整） */
.thumb--text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  text-align: center;
  background: var(--card-bg);
  border: 1px solid var(--line);
}
.thumb-word {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.thumb-seal {
  font-family: var(--serif);
  font-size: 11px;
  line-height: 1;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 3px;
  padding: 4px 6px;
}

/* 时长角标（右下） */
.thumb-badge {
  position: absolute;
  right: 6px;
  bottom: 6px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--badge-fg);
  background: var(--badge-bg);
  border-radius: 4px;
  padding: 3px 5px;
}

/* 已读进度条（贴缩略图底缘，YouTube 红条 → 本项目朱砂；朱砂只在状态） */
.thumb-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(120, 110, 92, 0.45);
}
.thumb-progress > i {
  display: block;
  height: 100%;
  background: var(--accent);
}
/* 🧭 脉络角标（左上，与时长角标同族） */
.thumb-flag {
  position: absolute;
  left: 6px;
  top: 6px;
  font-size: 11px;
  line-height: 1;
  color: var(--badge-fg);
  background: var(--badge-bg);
  border-radius: 4px;
  padding: 3px 5px;
}

/* 文字区（缩略图之下，不压图）：标题 2 行 + 两行元信息 */
.card-text {
  display: flex;
  gap: 10px;
  padding: 12px 0 0;
}
.card-lines { min-width: 0; flex: 1; }
.card-title {
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.005em;
  color: var(--ink);
  margin: 0 0 4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.card-sub,
.card-meta {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-stone);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-sub { color: var(--ink-soft); }
.card-title mark,
.card-sub mark {
  background: var(--accent-wash);
  color: var(--accent);
  border-radius: 2px;
}

/* 卡片右侧 📁 归类钮（YouTube 的 ⋮ 位）：hover 浮现，触屏常显 */
.card-menu {
  flex: none;
  width: 30px;
  height: 30px;
  margin: -3px -4px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  color: var(--ink-soft);
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.article-card:hover .card-menu,
.card-menu:focus-visible { opacity: 1; }
.card-menu:hover { background: var(--hover); color: var(--accent); }
@media (hover: none) {
  .card-menu { opacity: 0.8; }
}

/* ---------- 骨架屏（YouTube 载入时的灰块）---------- */
.skel-card .thumb {
  background: var(--skeleton);
  animation: skel 1.4s ease-in-out infinite;
}
.skel-line {
  height: 12px;
  border-radius: 6px;
  background: var(--skeleton);
  margin: 12px 0 0;
  animation: skel 1.4s ease-in-out infinite;
}
.skel-line.short { width: 55%; height: 10px; margin-top: 8px; }
@keyframes skel {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .skel-card .thumb, .skel-line { animation: none; }
}

/* 搜索无结果 */
.shelf-none {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-stone);
  text-align: center;
  padding: 56px 0;
  line-height: 1.8;
}
.shelf-none b { color: var(--ink); font-weight: 600; }

/* ---------- 生词本视图：让开固定 masthead ---------- */
/* 「‹ 书架」返回行退场：masthead 品牌（讀）与侧栏「全部文章」已是回家路，
   YouTube 的二级页也没有页内返回条。它原本 sticky 在 top:0，会被 fixed masthead 压住。 */
body.with-sidebar #view-vocab .article-nav { display: none; }
/* 原 sticky 工具栏让位量按「自身 sticky 导航 54px」算，现在改让 masthead */
#vocab-toolbar {
  top: calc(var(--mast-h) + env(safe-area-inset-top));
}
html.dark #mast-search-go { background: var(--chip-bg); }

/* 前端 build 指纹（书架展签行末尾）：安静的小字，用来判断手上前端是哪一版 */
.list-info .build-tag, #list-info .build-tag {
  margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  background: var(--tag-bg); color: var(--ink-stone);
  font-size: 11px; letter-spacing: .02em; font-variant-numeric: tabular-nums;
}

/* ▶ 短片角标（左下）：与 🧭/时长角标同族，但它是**可点的圆钮**（别的角标只是信息）。
   短片 = 情绪入口，点它看电影、不点进文章（2026-10-02 定案）。 */
.thumb-clip {
  position: absolute;
  left: 6px;
  bottom: 6px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  color: var(--badge-fg);
  background: var(--badge-bg);
  border: none;
  border-radius: 999px;
  padding: 0;
  cursor: pointer;
}
.thumb-clip:hover, .thumb-clip:active { background: var(--accent); color: var(--paper); }