/* ============================================================
   east-saibo 步骤 02｜页面壳、导航、Tab、搜索与筛选（视觉层）
   只写本域规则：背景 / 聚会页顶区 / Tab 选中态 / 搜索与筛选 /
   #mobile-nav 毛玻璃 / .page-back 返回键。
   原则：只覆盖 styles.css 的既有选择器，不改 DOM 契约
   （data-nav / data-action / NAVS 顺序不变），颜色一律用 tokens.css
   的 --ds-* 变量（含 color-mix 派生），不写死新色值。
   注意：本站 html.force-mobile 全局生效，.mobile-nav 相关需保持
   html.force-mobile 前缀以覆盖原规则；.home-header 的
   position:sticky / z-index:15 由 styles.css 提供，此处不改。
   ============================================================ */

/* ---- 页面背景：云灰 ---- */
body { background: var(--ds-bg); }

/* ---- 聚会页顶区：轻透卡底 + 留白层级 ---- */
.home-header {
  background: color-mix(in srgb, var(--ds-surface) 92%, transparent);
  border-bottom: 1px solid var(--ds-border);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
@supports not ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
  .home-header { background: var(--ds-surface); }
}

.home-filter .home-crumb { color: var(--ds-ink); }
.home-filter .home-crumb b {
  /* 页面级主标题允许宋体（tokens --ds-font-display） */
  font-family: var(--ds-font-display);
  letter-spacing: .02em;
}
.home-filter .home-crumb:hover { color: var(--ds-brand); }
.home-filter .home-crumb .ico { color: var(--ds-text-tertiary); }
.home-filter .home-slogan { color: var(--ds-text-secondary); }

/* ---- Tab：浅灰胶囊槽，选中白胶囊 + 故宫红字 + 加粗（非颜色差异） ---- */
.home-tabs {
  margin: 0 var(--home-pad-x);
  padding: 3px;
  gap: 2px;
  background: color-mix(in srgb, var(--ds-ink) 4%, var(--ds-surface));
  border-radius: 999px;
}
.home-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--ds-text-secondary);
  transition: color .16s, background-color .16s;
}
.home-tab.active {
  background: var(--ds-surface);
  color: var(--ds-brand);
  font-weight: 650;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--ds-ink) 10%, transparent);
}
/* 旧「文字 + 下划线」标记让位给胶囊形态 */
.home-tab.active::after { content: none; }
.home-tab:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }

/* ---- 搜索：浅灰填充 + 12~14px 圆角（token 14px） ---- */
.filters .search {
  background: color-mix(in srgb, var(--ds-ink) 4%, var(--ds-surface));
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-field);
}
.filters .search .ico { color: var(--ds-text-tertiary); }
.filters .search input { color: var(--ds-ink); }
.filters .search:focus-within { border-color: color-mix(in srgb, var(--ds-brand) 35%, transparent); }

/* ---- 筛选入口：青铜绿浅描边、方圆角印章轮廓；不改枚举与清空/提交时机 ---- */
.filters .filter {
  background: var(--ds-surface);
  border: 1px solid color-mix(in srgb, var(--ds-bronze) 38%, transparent);
  border-radius: 10px;
  color: var(--ds-bronze);
}
.filters .filter:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
.filter-clear {
  background: var(--ds-brand-soft);
  color: var(--ds-brand);
  border-radius: 999px;
}
.filter-result {
  background: var(--ds-surface-soft);
  border: 1px dashed var(--ds-border);
  color: var(--ds-text-secondary);
}
.filter-result .link { color: var(--ds-brand); }

/* 底栏（.mobile-nav）已迁到唯一真源 ds-nav-v3.css（2026-10-24），本文件不再定义。 */

/* ---- 子页面返回键 .page-back：悬浮轻透胶囊，全站统一 ---- */
.page-back {
  background: color-mix(in srgb, var(--ds-surface) 86%, transparent);
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  color: var(--ds-text-secondary);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ds-ink) 6%, transparent);
}
.page-back:hover {
  color: var(--ds-brand);
  border-color: color-mix(in srgb, var(--ds-brand) 35%, transparent);
}
.page-back:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .page-back { background: var(--ds-surface); }
}

/* ---- 动效降级 ---- */
@media (prefers-reduced-motion: reduce) {
  .home-tab,
  .page-back { transition: none; }
}

/* ---- 子页面顶部固定条：左上返回 / 右上分享 ---- */
.page-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: calc(44px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 10px 0;
  background: color-mix(in srgb, var(--ds-surface) 86%, transparent);
  border-bottom: 1px solid var(--ds-border);
}
@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  .page-topbar {
    background: color-mix(in srgb, var(--ds-surface) 72%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}
/* 顶条内的返回键不再是悬浮胶囊 */
.page-topbar .page-back { position: static; margin: 0; }
.page-topbar .page-share {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-button);
  background: var(--ds-surface);
  color: var(--ds-brand);
  font-size: 13px;
  font-weight: 600;
}
.page-topbar .page-share:hover { background: var(--ds-brand-soft); }

/* ---- 本场动态三类横选：选中凸起 / 未选中凹陷 ---- */
.stream-filters { display: flex; align-items: center; gap: 8px; }
.stream-chip {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--ds-radius-button);
  background: var(--ds-surface-soft);
  color: var(--ds-text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  /* 未选中：内阴影 = 凹下去 */
  box-shadow: inset 2px 2px 4px color-mix(in srgb, var(--ds-ink) 12%, transparent),
              inset -1px -1px 2px color-mix(in srgb, var(--ds-surface) 70%, transparent);
}
.stream-chip.is-on {
  background: var(--ds-surface);
  color: var(--ds-brand);
  /* 选中：外阴影 = 凸起来（不只靠颜色区分） */
  box-shadow: 0 2px 6px color-mix(in srgb, var(--ds-ink) 14%, transparent),
              0 0 0 1px color-mix(in srgb, var(--ds-brand) 18%, transparent);
}
.stream-chip:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }

/* ---- 小号按钮：只留两个字的「编辑」 ---- */
.btn-compact { min-height: 28px; padding: 0 12px; font-size: 12.5px; line-height: 28px; }

/* ---- 首页顶区贴顶：滚动容器的顶部内边距交给顶区自己，避免出现缝隙 ---- */
html.force-mobile .content:has(.home-header) { padding-top: 0; }
.home-header {
  --home-top: calc(8px + env(safe-area-inset-top, 0px));
  margin: 0 calc(-1 * var(--content-pad-x)) 0;
  padding: var(--home-top) var(--home-pad-x) 0;
}

/* ---- 分享长图预览 ---- */
.share-preview {
  display: block;
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: var(--ds-radius-field);
  background: var(--ds-surface-soft);
}
@media (prefers-reduced-motion: reduce) {
  .page-topbar,
  .page-share,
  .stream-chip { transition: none; }
}