/* ============================================================
   ds-refine-home.css · 精修层：首页「聚一聚」信息流 + 当晚现场页（live）
   ------------------------------------------------------------
   依据：
     · 设计稿 design/20261023_方案设计_全站视觉重构_夜色微醺_v1.md
       §3.3（字重/负字距建层级、数字 tabular-nums）、§3.4（同心圆角、
       双层阴影、按压 .96、图片 1px 描边、触控 ≥44/密集处 ≥40）、
       §七 anti-slop（避开暖底衬线赤陶 / 近黑荧光 / 报纸风 / SaaS 卡片套件 / 模板 chrome）
     · 真实 DOM：components.js:gatherCard()、app.js:gatheringCard()/renderLive()
       类名全部来自上述函数，未臆造。
   约束：
     1) 只做视觉。不改路由/接口/数据口径/data-action 契约。
     2) 不含 !important；颜色一律走变量，新增变量命名 --rh-*，
        浅色 :root 与深色 html[data-theme="dark"] 各给一套值。
     3) 加载位置：必须排在 ds-theme-dark.css **之后**（同级特异性靠后来者胜），
        由 index.html <link> 单一写者添加。
   ============================================================ */

/* ---------------------------------------------------------------
   0. 本域补充令牌（只补"结构色"，不引入新色相，强调色仍唯一）
   --------------------------------------------------------------- */
:root {
  --rh-hairline: rgba(26, 26, 26, .07);          /* 分组发丝线：只表达结构，不用它伪造纵深 */
  --rh-img-edge: rgba(26, 26, 26, .10);          /* 封面 1px 内描边（浅色用低透明墨） */
  --rh-chip-off: rgba(26, 26, 26, .035);         /* 未选中酒款底：几乎无底，靠描边成形 */
  --rh-chip-off-line: rgba(26, 26, 26, .10);
  --rh-act-reserve: 124px;                       /* 标题/元信息为右上角 3 键操作簇预留的宽度 */
}
html[data-theme="dark"] {
  --rh-hairline: rgba(243, 239, 234, .08);
  --rh-img-edge: rgba(255, 255, 255, .12);       /* 深色下用纯白低透明，带色调会吸底色成脏边 */
  --rh-chip-off: rgba(243, 239, 234, .05);
  --rh-chip-off-line: rgba(243, 239, 234, .12);
}

/* ===================================================================
   A. 首页 · 聚一聚信息流
   层级口径（四段，越往下越轻）：
     标题 15.5/700/-.01em → 元信息 11.5/500 → 备注 12/2行 → 标签 11 → 底栏 11
   分组节奏：卡片之间 12px（单一来源 = 网格 gap），卡内 4 / 6 / 8 / 10 递进
   =================================================================== */

/* A0 间距只留一个来源：.gather-item 的 margin-bottom 会与 .cards 的 grid gap 叠加成 26px，
   这里归零，卡片间距统一由 gap 决定（依据：§3.4 结构靠留白，不靠叠加 margin） */
#home-feed .gather-item { margin-bottom: 0; }
html.force-mobile #home-feed .cards { gap: 12px; }

/* A1 卡片与封面
   - 封面做「同心圆角」内嵌缩略：外卡 18/20 → 内封面 12（padding 6），
     避免左半图直角捅破卡片圆角，也不需要给卡加 overflow:hidden（会牵连其它用法）
   - 图片 object-fit:contain 完整展示 + 1px 内描边（R1） */
html.force-mobile .memory-card {
  text-align: left;                     /* .memory-card 是 <button>，默认居中，兜底左对齐 */
}
html.force-mobile .memory-card .memory-art {
  position: relative;                   /* 供占位图案/1px 描边定位，不依赖外部规则 */
  height: auto;                         /* 取消固定 96px，改为跟随行高拉伸 */
  align-self: stretch;                  /* 与右侧文案等高，卡片不再出现"图矮字高"的空白 */
  min-height: 92px;
  margin: 6px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ds-surface-soft);
}
html.force-mobile .memory-card .memory-art > img,
html.force-mobile .memory-card .memory-art > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: contain;                  /* 完整展示：不裁切、不变形 */
  outline: 1px solid var(--rh-img-edge);
  outline-offset: -1px;
}
/* 无封面时的 2×2 头像拼图：沿用同一套内嵌圆角 */
html.force-mobile .memory-card .memory-art .cover-mosaic { border-radius: 12px; overflow: hidden; }

/* A2 标题 / 元信息 / 备注 / 标签 */
html.force-mobile .memory-card .memory-copy {
  padding: 12px 14px 12px 8px;          /* 左 8 + 封面列右侧 6px margin = 14px 视觉间距 */
  min-width: 0;
}
html.force-mobile .memory-card .memory-copy h3 {
  margin: 0;
  padding-right: 0;                     /* 默认不留白：无悬浮键的卡片（如归档页）拿满宽度 */
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.01em;               /* 依据 §3.3：层级靠字重+负字距，不靠换字族 */
  line-height: 1.35;
  color: var(--ds-ink);
}
html.force-mobile .memory-card .memory-meta {
  margin-top: 4px;
  gap: 4px;
  font-size: 11.5px;
  color: var(--ds-text-secondary);
}
html.force-mobile .memory-card .memory-meta .ico {
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--ds-text-tertiary);       /* 图标退到三级色，不与「地点·时间」抢读 */
}
html.force-mobile .memory-card .memory-status {
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-text-tertiary);       /* 已结束/未开始 = 中性，只有"进行中"才给强调色 */
}
html.force-mobile .memory-card .memory-status .dot {
  width: 5px;
  height: 5px;
}
/* 「进行中」是唯一需要强调色的状态：显式补回，避免被上面的中性默认值压掉 */
html.force-mobile .memory-card .memory-status.ongoing { color: var(--ds-bronze); }
html.force-mobile .memory-card .memory-status.ongoing .dot { background: var(--ds-bronze); }
/* 备注：2 行截断，避免长备注把卡片撑成参差高度（列表扫读的前提是行高一致） */
html.force-mobile .memory-card .memory-note {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ds-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 标签：最轻的一层，只给底色不给描边，避免和底栏、卡片边框三层线打架 */
/* display/flex-wrap 由 styles.css 的 .tag-list{display:flex;gap:6px;flex-wrap:wrap} 提供，
   这里只覆盖节奏值（已核实基类存在，不重复声明） */
html.force-mobile .memory-card .tag-list {
  margin-top: 8px;
  gap: 5px;
}
html.force-mobile .memory-card .tag-list .tag {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  border: 0;
  border-radius: var(--ds-radius-button);
  background: var(--ds-surface-soft);
  color: var(--ds-text-secondary);
}

/* A3 底栏：头像 + 计数 + 置顶徽标。上方一条发丝线把「内容」与「统计」分开 */
html.force-mobile .memory-card .memory-foot {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--rh-hairline);
  gap: 8px;
}
html.force-mobile .memory-card .memory-foot .avatar {
  width: 24px;
  height: 24px;
  font-size: 9px;
  margin-left: -6px;
  border: 2px solid var(--ds-surface);  /* 描边跟随卡片底色，深色下不再出现白圈 */
}
html.force-mobile .memory-card .memory-foot .micro {
  font-size: 11px;
  color: var(--ds-text-tertiary);
  font-variant-numeric: tabular-nums;   /* "4 位 · 12 个媒体"里的数字不跳动 */
}
html.force-mobile .memory-card .memory-foot .pill.amber {
  margin-left: auto;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 650;
  border: 0;
  border-radius: var(--ds-radius-button);
  background: var(--ds-brand-soft);
  color: var(--ds-brand);
}

/* A4 悬浮操作键簇（开始 / 置顶 / 编辑）
   口径：位置固定在卡片右上，三个键成一组（同位置同间距，不是散落的圆点）。
   **尺寸 / 圆角 / 热区 / 按压一律沿用 refine-controls 的卡片角标体系**
   （.icon-act：32×32 视觉 + 伪元素外扩 40×40 热区），本文件不重定义，避免两套口径打架。
   本域只表达两件事：① 分组间距（gap 8px，沿用 controls 统一值，热区相切不重叠）
   ② 谁强调——只有「开始」与「已置顶」用强调色，「编辑」保持中性。 */
html.force-mobile .gather-item .float-actions {
  top: 5px;
  right: 5px;
  gap: 8px;                             /* 沿用 controls 按钮组 gap=8 */
  z-index: 3;
}
html.force-mobile .gather-item .float-actions .icon-act.start {
  color: var(--ds-brand);
}
html.force-mobile .gather-item .float-actions .icon-act.pin.active {
  background: var(--ds-brand-soft);
  color: var(--ds-brand);
}
/* 按实际键数给标题 / 元信息预留右侧宽度：
   视觉键宽 32 × n + gap 8 × (n−1) + right 5 + 呼吸 7 → 2 键 84px / 3 键 124px；
   无操作键的卡片（如归档页）标题拿满宽度，不无谓牺牲。 */
html.force-mobile .gather-item:has(.float-actions .icon-act:nth-child(2)) .memory-copy h3,
html.force-mobile .gather-item:has(.float-actions .icon-act:nth-child(2)) .memory-meta {
  padding-right: 84px;
}
html.force-mobile .gather-item:has(.float-actions .icon-act:nth-child(3)) .memory-copy h3,
html.force-mobile .gather-item:has(.float-actions .icon-act:nth-child(3)) .memory-meta {
  padding-right: var(--rh-act-reserve);
}

/* A5 分组行与状态带：只做读序强化，不动文案 */
html.force-mobile #home-feed .group-head {
  margin: 16px 0 10px;
  gap: 8px;
}
html.force-mobile #home-feed .group-head h3 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
}
html.force-mobile #home-feed .group-head .count {
  font-size: 11.5px;
  color: var(--ds-text-tertiary);
  font-variant-numeric: tabular-nums;
}
html.force-mobile #home-feed .group-head .line {
  height: 1px;
  background: var(--rh-hairline);
}
/* 状态带：白卡浮起，状态点是唯一的强调色出口之一；CTA 用字重而非色块 */
html.force-mobile #home-feed .status-strip {
  padding: 10px 12px;
  font-size: 12.5px;
  border-radius: var(--ds-radius-field);
}
html.force-mobile #home-feed .status-strip .dot {
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--ds-brand);
}
html.force-mobile #home-feed .status-strip .go {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ds-brand);
}
html.force-mobile #home-feed .status-strip .go .ico { width: 13px; height: 13px; }

/* A6 进行中主卡（.gather-hero）：顶部 2px 细线已是既有语言，这里只统一数字与按钮层级 */
html.force-mobile .gather-hero .hero-stats b {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
html.force-mobile .gather-hero .hero-meta {
  font-size: 11.5px;
  color: var(--ds-text-secondary);
}
html.force-mobile .gather-hero .hero-footer { align-items: center; }

/* ===================================================================
   B. 当晚现场页（live）
   层级口径：数字是主角（尺寸 + tabular-nums + 700），标签是注脚（10.5/三级色）；
            强调色只出现在「当前酒款 / +1 主操作 / 进行中」三处。
   =================================================================== */

/* B1 总览数字区：改成等宽 tile 网格，数字在上标签在下；
   隐藏纯装饰的「·」分隔符（不删 DOM、不改文案），用 gap 表达分组 */
.live-head ~ .overview-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  gap: 10px 6px;
  margin: 10px 14px;
  padding: 12px 10px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 12px;                  /* 外 12 = 内 tile 无边框 + padding 10，同心 */
  box-shadow: none;                     /* 数字区不参与卡片阴影层级，避免 SaaS 卡片套件感 */
}
.live-head ~ .overview-row > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10.5px;
  line-height: 1.2;
  color: var(--ds-text-tertiary);
  text-align: center;
}
.live-head ~ .overview-row b {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--ds-ink);                 /* 数字用主墨色当主角，不靠强调色刷存在感 */
  font-variant-numeric: tabular-nums;   /* 依据 §3.3：动态数字防跳动 */
}
.live-head ~ .overview-row .dot-sep { display: none; }

/* B2 酒款行：选中态给四重线索（底色 + 描边 + 字重 + 实心圆点），不单靠颜色 */
.drink-line { padding: 10px 14px 6px; }
.drink-line .line-label {
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--ds-text-tertiary);
}
.drink-line-row { gap: 8px; }
.drink-chips { gap: 6px; }
.drink-name {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--rh-chip-off-line);
  border-radius: var(--ds-radius-button);
  background: var(--rh-chip-off);
  color: var(--ds-text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .12s ease;
}
.drink-name:active { transform: scale(.96); }
.drink-name.on {
  background: var(--ds-brand-soft);
  border-color: color-mix(in srgb, var(--ds-brand) 55%, transparent);
  color: var(--ds-brand);
  font-weight: 700;
}
/* 第四重线索：选中项前方 5px 实心点（色盲/深色下也能一眼分辨） */
.drink-name.on::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-right: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--ds-brand);
}
.drink-add {
  position: relative;
  width: 32px;
  height: 32px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-button);
  background: var(--ds-surface);
  color: var(--ds-text-secondary);
  font-size: 15px;
  transition: color .16s ease, border-color .16s ease, transform .12s ease;
}
/* 热区外扩到 40×40（沿续 controls 图标按钮口径）：透明层，不改变视觉 */
.drink-add::after {
  content: "";
  position: absolute;
  inset: -4px;
}
.drink-add:hover:not(:disabled) {
  color: var(--ds-brand);
  border-color: color-mix(in srgb, var(--ds-brand) 40%, transparent);
}
.drink-add:active { transform: scale(.96); }
.drink-line-row .edit-link {
  font-size: 11.5px;
  color: var(--ds-text-tertiary);       /* 「编辑」是次要出口，不再与主操作同色 */
}
.drink-line-row .edit-link:hover { color: var(--ds-brand); }

/* B3 人员卡：头像+名字+杯数 / 酒款明细 / 操作按钮 / 欠酒，四段竖向节奏 8-6-8-6 */
html.force-mobile .people-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 4px 14px 8px;
}
html.force-mobile .person-card {
  padding: 10px 10px 12px;
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  background: var(--ds-surface);
  box-shadow: none;                     /* 密集网格里用 1px 边框分层，不给每张卡加灰影 */
  transition: border-color .16s ease, background-color .16s ease;
}
html.force-mobile .person-card .person-top { gap: 8px; min-width: 0; }
html.force-mobile .person-card .person-top .avatar {
  width: 26px;
  height: 26px;
  font-size: 11px;
}
html.force-mobile .person-card h3 {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -.01em;
}
html.force-mobile .person-card .person-counter { gap: 3px; align-items: baseline; }
html.force-mobile .person-card .person-counter b {
  margin: 0;
  font-size: 22px;                      /* 杯数 = 卡片内第一视觉主角 */
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--ds-ink);
  font-variant-numeric: tabular-nums;
}
html.force-mobile .person-card .person-counter span {
  font-size: 10px;
  color: var(--ds-text-tertiary);
}
html.force-mobile .person-card .person-meta {
  margin: 6px 0 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ds-text-secondary);
  -webkit-line-clamp: 2;
  min-height: 32px;                     /* 预留两行：实时补丁补数据时卡片不跳高（防 CLS） */
}
/* 按钮组：颜色 / 圆角 / 字号 / 按压一律沿用 refine-controls 的三级按钮体系，
   本文件不再定义 .btn 的基础样式，只定「放哪、谁主谁次、间距」：
   +1 = 主行动（.primary） / +0.5 = 次行动（.btn） / ⋯ = 中性（.person-more）。
   注：min-height 一行仅为压掉 styles.css 遗留的 32px，使其落回 controls 的密集处 40px。 */
html.force-mobile .person-actions { gap: 8px; margin-top: 8px; }   /* 沿用 controls 按钮组 gap=8 */
html.force-mobile .person-actions .btn {
  min-height: 40px;                     /* 沿续 controls「密集处 40px」，非新口径 */
}
html.force-mobile .person-actions .person-more { flex: 0 0 40px; }
html.force-mobile .person-card .debt-mark {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--ds-warning);
}
html.force-mobile .person-card .debt-mark .ico { width: 12px; height: 12px; flex: none; }
html.force-mobile .person-card .debt-mark:empty { display: none; }   /* 无欠酒时不占位（沿用既有口径） */
/* 变化反馈：只在这一刻用强调色，结束后回到中性（动效服务于"什么变了"） */
html.force-mobile .person-card.bump { border-color: color-mix(in srgb, var(--ds-brand) 55%, transparent); }
html.force-mobile .person-card.bump .person-counter b { color: var(--ds-brand); }

/* B4 本场欠酒：虚线框保留"未完成"语义，颜色换成 warning 令牌 */
.debts {
  margin: 4px 14px 0;
  padding: 10px 12px;
  border: 1px dashed color-mix(in srgb, var(--ds-warning) 45%, transparent);
  border-radius: 12px;
  background: transparent;
}
.debts-head { font-size: 12.5px; font-weight: 700; margin-bottom: 6px; color: var(--ds-ink); }
.debts-head .pill.amber {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 650;
  border: 0;
  border-radius: var(--ds-radius-button);
  background: var(--ds-brand-soft);
  color: var(--ds-brand);
  font-variant-numeric: tabular-nums;
}
.debt { font-size: 12px; }
.debt + .debt { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rh-hairline); }
.debt .who { font-weight: 650; color: var(--ds-ink); }
.debt .muted { color: var(--ds-text-secondary); }
.debt .debt-act { gap: 6px; }

/* FAB 与底栏：未完成皮肤的页面仍保留旧版 86px 锚点；
   聚一聚皮肤使用 ds-cyber-v5.css 里 72px 固定锚点。日夜切换功能已移除。 */
.fab-group {
  right: 12px;
  bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  gap: 8px;
  z-index: 20;
}
/* 颜色 / 圆角 / 字号沿用既有 .fab（styles.css:277-280 + ds-gather-v2:183-190）与
   controls 的三级按钮体系；本文件只定「放哪、间距、主行动高度、悬浮阴影」。
   主行动 44px 沿续 controls 口径（既有值是 38px，这里只做这一项收敛）。 */
.fab {
  min-height: 44px;
  box-shadow: var(--ds-shadow-floating);   /* 换成 token，深色下不糊成一团 */
}
.fab:active { transform: scale(.96); }
/* .fab-ghost 只做一件事：把遗留的 --paper/--line/--ink 换成 token，深色下才是真深色 */
.fab-ghost {
  background: var(--ds-surface);
  color: var(--ds-ink);
  border-color: var(--ds-border);
}
/* 信息流尾部给 FAB 留出滚到底的安全高度：44(.content) + 88 ≈ 132px，
   大于单个 FAB 顶边到导航上沿的 126px，最后一张卡片与触底提示不会被压住 */
html.force-mobile #home-feed { padding-bottom: 88px; }

/* ===================================================================
   D. 键盘可见焦点 / 减弱动效
   =================================================================== */
html.force-mobile .gather-item .float-actions .icon-act:focus-visible,
.drink-name:focus-visible,
.drink-add:focus-visible,
.fab:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}
@media (hover: hover) {
  html.force-mobile .person-card:hover { border-color: color-mix(in srgb, var(--ds-brand) 35%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  html.force-mobile .gather-item .float-actions .icon-act,
  .drink-name,
  .drink-add,
  .fab,
  html.force-mobile .person-card {
    transition: none;
    transform: none;
  }
}