/* ============================================================
   ds-gather.css · east-saibo 视觉重构 Wave 1「聚会域」（ds-gather）
   覆盖范围：现场记录（08）/ 回顾详情与可视化主题（09）/ 相册与管理（10）
   原则：只做配色、留白、圆角、层级与状态观感；
   不改业务、不改 data-* 契约、不放大 v21 批3 已压缩的人员卡与酒款行。
   Token 真源：tokens.css（--ds-*）。
   ============================================================ */

/* ---------------- 共用：状态胶囊 / 提示条 / 空态（仅聚会域范围） ---------------- */

.live-page .pill,
.detail-head .pill,
.detail-head ~ .stack .pill {
  background: var(--ds-surface-soft);
  border: 1px solid var(--ds-border);
  color: var(--ds-text-secondary);
  font-weight: 550;
}
.live-page .pill.green,
.detail-head .pill.green,
.detail-head ~ .stack .pill.green {
  background: var(--ds-bronze-soft);
  border-color: transparent;
  color: var(--ds-bronze);
}
.live-page .pill.amber,
.detail-head ~ .stack .pill.amber {
  background: #f6eedd;
  border-color: transparent;
  color: var(--ds-warning);
}
.live-page .pill.red,
.detail-head ~ .stack .pill.red {
  background: var(--ds-brand-soft);
  border-color: transparent;
  color: var(--ds-brand);
}

.live-page .sealed-bar,
.detail-head .sealed-bar {
  background: var(--ds-bronze-soft);
  color: var(--ds-bronze);
  border-radius: var(--ds-radius-field);
  font-size: var(--ds-text-caption);
}
.live-page .locked-note,
.detail-head .locked-note {
  background: var(--ds-surface-soft);
  border: 1px dashed var(--ds-border);
  color: var(--ds-text-secondary);
  border-radius: var(--ds-radius-field);
}

.live-page .empty .empty-art,
.detail-head ~ .stack .empty .empty-art,
.album-feed .empty .empty-art {
  background: var(--ds-bronze-soft);
  color: var(--ds-bronze);
  border-radius: var(--ds-radius-field);
}
.live-page .empty,
.detail-head ~ .stack .empty,
.album-feed .empty {
  color: var(--ds-text-secondary);
}

/* ---------------- 08 现场记录：头部与总览 ---------------- */

.live-page .live-title {
  font-family: var(--ds-font-display);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ds-ink);
}
.live-page .live-row2 {
  color: var(--ds-text-secondary);
}
.live-page .sync-state {
  color: var(--ds-text-tertiary);
}

/* 总览一行：由灰底条改为白卡数字行 */
.live-page .overview-row {
  margin: 12px 14px 4px;
  padding: 9px 14px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-field);
  box-shadow: var(--ds-shadow-card);
  color: var(--ds-text-secondary);
}
.live-page .overview-row b {
  color: var(--ds-ink);
  font-weight: 650;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.live-page .overview-row .dot-sep {
  color: var(--ds-text-tertiary);
}

/* ---------------- 08 现场记录：酒款一行（保持单行紧凑，只换胶囊观感） ---------------- */

.live-page .drink-line .line-label {
  color: var(--ds-text-tertiary);
  letter-spacing: .04em;
}
.live-page .drink-name {
  padding: 2px 10px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-button);
  background: var(--ds-surface);
  color: var(--ds-text-secondary);
  line-height: 1.4;
}
.live-page .drink-name.on {
  background: var(--ds-brand);
  border-color: var(--ds-brand);
  color: #fff;
  font-weight: 600;
}
.live-page .drink-add {
  width: 24px;
  height: 24px;
  border: 1px dashed var(--ds-border);
  border-radius: var(--ds-radius-button);
  color: var(--ds-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.live-page .drink-add:disabled {
  opacity: .4;
}
.live-page .drink-line-row .edit-link {
  color: var(--ds-brand);
}

/* ---------------- 08 现场记录：人员卡（紧凑数值不动，只调配色/描边/圆角） ---------------- */

.live-page .people-grid {
  gap: 7px;
}
.live-page .person-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  box-shadow: var(--ds-shadow-card);
}
.live-page .person-card h3 {
  color: var(--ds-ink);
}
.live-page .person-counter b {
  color: var(--ds-ink);
  font-variant-numeric: tabular-nums;
}
.live-page .person-counter span {
  color: var(--ds-text-tertiary);
}
.live-page .person-meta {
  color: var(--ds-text-tertiary);
}
/* 按钮只换色不改尺寸：+1 主行动朱砂，+0.5 弱化，⋯ 中性 */
.live-page .person-actions .btn {
  background: var(--ds-brand-soft);
  border-color: transparent;
  color: var(--ds-brand);
}
.live-page .person-actions .btn.primary {
  background: var(--ds-brand);
  border-color: var(--ds-brand);
  color: #fff;
}
.live-page .person-actions .btn.primary:hover {
  background: var(--ds-brand-hover);
}
.live-page .person-actions .person-more {
  background: var(--ds-surface-soft);
  border-color: var(--ds-border);
  color: var(--ds-text-tertiary);
}
.live-page .person-card.bump {
  border-color: var(--ds-brand);
  box-shadow: var(--ds-focus-ring);
}
.live-page .person-card.bump .person-counter b {
  color: var(--ds-brand);
}
.live-page .debt-mark {
  color: var(--ds-warning);
}

/* ---------------- 08 现场记录：欠酒区与动态区 ---------------- */

.live-page .debts {
  background: var(--ds-surface-soft);
  border: 1px dashed #e4d6d6;
  border-radius: var(--ds-radius-field);
}
.live-page .debts-head {
  color: var(--ds-ink);
}
.live-page .debt .who {
  color: var(--ds-ink);
}
.live-page .debt .debt-act .btn.tiny {
  background: var(--ds-brand-soft);
  border-color: transparent;
  color: var(--ds-brand);
}
.live-page .debt .debt-act .btn.tiny.ghost {
  background: transparent;
  color: var(--ds-text-secondary);
}

.live-page .panel {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 16px;
  box-shadow: var(--ds-shadow-card);
}
.live-page .panel-head h2 {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .01em;
  color: var(--ds-ink);
}
.live-page .stream-filters .check-field {
  color: var(--ds-text-secondary);
}
.live-page .timeline .event {
  border-top-color: var(--ds-border);
}
.live-page .timeline .event-time {
  color: var(--ds-text-tertiary);
}
.live-page .event .event-del {
  color: var(--ds-text-tertiary);
}
.live-page .event .event-del:hover {
  color: var(--ds-brand);
}
.live-page .moment-media img,
.live-page .moment-media video,
.detail-head ~ .stack .moment-media img,
.detail-head ~ .stack .moment-media video {
  border-radius: 12px;
  background: var(--ds-surface-soft);
}
.live-page .tool-bar,
.detail-head ~ .stack .tool-bar {
  border-top-color: var(--ds-border);
}
.live-page .moment-form input,
.detail-head ~ .stack .moment-form input {
  background: var(--ds-surface-soft);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-button);
  color: var(--ds-ink);
}
.live-page .moment-form input::placeholder,
.detail-head ~ .stack .moment-form input::placeholder {
  color: var(--ds-text-tertiary);
}
.live-page .btn.tiny.ghost,
.detail-head ~ .stack .btn.tiny.ghost {
  color: var(--ds-text-secondary);
}

/* ---------------- 09 回顾详情：头部 ---------------- */

.detail-head .detail-title {
  font-family: var(--ds-font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ds-ink);
}
.detail-head .detail-sub {
  color: var(--ds-text-secondary);
  font-variant-numeric: tabular-nums;
}
.detail-head .detail-place {
  color: var(--ds-text-secondary);
}
.detail-head .theme-switch {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-button);
  background: var(--ds-surface);
  color: var(--ds-text-secondary);
}

/* 详情页区块卡：白卡 + 统一圆角阴影 */
.detail-head ~ .stack .panel {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card);
  box-shadow: var(--ds-shadow-card);
}
.detail-head ~ .stack .panel-head h2 {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .01em;
  color: var(--ds-ink);
}
.detail-head ~ .stack .panel-head .micro {
  color: var(--ds-text-tertiary);
}

/* ---------------- 09 主题一：小人赛跑（低饱和轨道 + 朱砂领跑） ---------------- */

.theme-race .track {
  background: #efeff1;
}
.theme-race .run {
  background: linear-gradient(90deg, var(--ds-bronze-soft), #b9c6bc);
}
.theme-race .g1 .run {
  background: linear-gradient(90deg, #edd6d6, var(--ds-brand));
}
.theme-race .g2 .run {
  background: linear-gradient(90deg, #ececee, #c3c3c9);
}
.theme-race .g3 .run {
  background: linear-gradient(90deg, #e7ddd2, #c8a98a);
}
.theme-race .who i,
.theme-race .who u {
  background: var(--ds-bronze);
}
.theme-race .g1 .who i,
.theme-race .g1 .who u {
  background: var(--ds-brand);
}
.theme-race .flag {
  color: var(--ds-bronze);
}
.theme-race .nm {
  color: var(--ds-ink);
}
.theme-race .ct {
  color: var(--ds-ink);
  font-variant-numeric: tabular-nums;
}

/* ---------------- 09 主题二：排行榜（名次徽章按牌级递减，克制） ---------------- */

.theme-rank .rank-row {
  border-top-color: var(--ds-border);
}
.theme-rank .g1 {
  background: linear-gradient(90deg, var(--ds-brand-soft), transparent);
}
.theme-rank .g1 .nm {
  color: var(--ds-brand);
}
.theme-rank .g1 .bd {
  background: var(--ds-brand);
  color: #fff;
  animation: none;
}
.theme-rank .g2 .bd {
  background: var(--ds-bronze-soft);
  color: var(--ds-bronze);
}
.theme-rank .g3 .bd {
  background: #ede3d3;
  color: #8a6b3a;
}
.theme-rank .g4 .bd {
  background: var(--ds-surface-soft);
  color: var(--ds-text-tertiary);
}
.theme-rank .g4 .nm {
  color: var(--ds-text-tertiary);
}
.theme-rank .v {
  color: var(--ds-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* ---------------- 09 主题三：酒杯矩阵 ---------------- */

.theme-glass .gcard {
  background: var(--ds-surface-soft);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-field);
}
.theme-glass .nm {
  color: var(--ds-ink);
}
.theme-glass .g {
  border-color: var(--ds-brand);
  background: var(--ds-brand-soft);
}
.theme-glass .g.half {
  background: linear-gradient(180deg, transparent 50%, var(--ds-brand-soft) 50%);
}
.theme-glass .gx {
  color: var(--ds-brand);
}
.theme-glass .v {
  color: var(--ds-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* ---------------- 09 主题四：酒杯液面（琥珀但降噪） ---------------- */

.theme-tube .tb {
  background: var(--ds-surface-soft);
  border-color: var(--ds-border);
}
.theme-tube .tb i {
  background: linear-gradient(180deg, #e3c084, #b97f3d);
}
.theme-tube .g1 .tb {
  border-color: #e0c48c;
  box-shadow: 0 0 10px rgba(224, 196, 140, .45);
}
.theme-tube .g1 .tb i {
  background: linear-gradient(180deg, #edd3a0, #c9963f);
}
.theme-tube .g2 .tb i {
  background: linear-gradient(180deg, #dfe3e0, #a9b3ac);
}
.theme-tube .g3 .tb i {
  background: linear-gradient(180deg, #dcc3a4, #ab8256);
}
.theme-tube .g4 .tb {
  border-color: var(--ds-border);
}
.theme-tube .g4 .tb i {
  background: linear-gradient(180deg, #e3e2df, #b0ada9);
}
.theme-tube .foam {
  background: #fffdf8;
  box-shadow: 0 2px 0 var(--ds-surface-soft);
}
.theme-tube .nm {
  color: var(--ds-ink);
}
.theme-tube .v {
  color: var(--ds-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* ---------------- 09 主题五：领奖台（2/1/3 台阶不变，只换色） ---------------- */

.theme-podium .who i,
.theme-podium .who u {
  background: var(--ds-brand);
}
.theme-podium .base {
  background: var(--ds-surface-soft);
  border-color: var(--ds-border);
  color: var(--ds-text-secondary);
}
.theme-podium .p1 .base {
  background: var(--ds-brand-soft);
  border-color: #e7d2d2;
  color: var(--ds-brand);
}
.theme-podium .nm {
  color: var(--ds-ink);
}
.theme-podium .v {
  color: var(--ds-text-secondary);
  font-variant-numeric: tabular-nums;
}
.theme-podium .pod-fourth .t {
  color: var(--ds-text-tertiary);
}

/* ---------------- 09 主题六：环形进度（朱砂轨迹 + 中性底环） ---------------- */

.theme-ring .ring {
  background: conic-gradient(var(--ds-brand) calc(var(--p) * 1%), #ececee 0);
}
.theme-ring .ring::after {
  background: var(--ds-surface);
}
.theme-ring .nm {
  color: var(--ds-text-secondary);
}

/* ---------------- 09 喝酒速度（曲线算法不动，只调网格/图例观感） ---------------- */

.speed-grid {
  stroke: #ececee;
}
.speed-ylabel,
.speed-chart text {
  fill: var(--ds-text-tertiary);
}
.speed-key {
  border-color: var(--ds-border);
  background: var(--ds-surface);
  color: var(--ds-ink);
}
.speed-key.off {
  color: var(--ds-text-tertiary);
}

/* ---------------- 09 精彩瞬间 / 评价 ---------------- */

.hl-story {
  color: var(--ds-ink);
  border-bottom-color: var(--ds-border);
}
.hl-line {
  background: var(--ds-surface-soft);
  border: 1px dashed var(--ds-border);
  color: var(--ds-text-secondary);
}
.hl-line b {
  color: var(--ds-ink);
}
.hl-tag {
  background: var(--ds-bronze-soft);
  color: var(--ds-bronze);
}
.hl-tag.amber {
  background: #f6eedd;
  color: var(--ds-warning);
}
.panel.fold > summary .pill {
  background: var(--ds-surface-soft);
  border: 1px solid var(--ds-border);
  color: var(--ds-text-secondary);
}

/* ---------------- 10 相册：资产清单信息流 ---------------- */

.album-header .album-upload {
  color: var(--ds-brand);
}
.album-header .album-count {
  color: var(--ds-text-tertiary);
  font-variant-numeric: tabular-nums;
}
.album-header .sort-row {
  border-bottom-color: var(--ds-border);
}
.album-header .sort-tab {
  color: var(--ds-text-secondary);
}
.album-header .sort-tab.active {
  color: var(--ds-ink);
}
.album-header .sort-tab.active::after {
  background: var(--ds-brand);
}
.album-feed .album-date b {
  font-family: var(--ds-font-display);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ds-ink);
}
.album-feed .album-row {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  box-shadow: var(--ds-shadow-card);
}
.album-feed .album-row.dead {
  opacity: .62;
}
.album-feed .album-thumb {
  border-radius: 10px;
  background: var(--ds-surface-soft);
}
.album-feed .album-title {
  color: var(--ds-ink);
}
.album-feed .album-row.dead .album-title {
  color: var(--ds-text-tertiary);
}
.album-feed .album-sub {
  color: var(--ds-text-tertiary);
  font-variant-numeric: tabular-nums;
}
.album-feed .album-more {
  color: var(--ds-text-tertiary);
}
.album-feed .album-more.is-clickable {
  color: var(--ds-brand);
}

/* ---------------- 10 相册管理（系统管理员） ---------------- */

.admin-head h2 {
  font-family: var(--ds-font-display);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ds-ink);
}
.admin-head .admin-who {
  color: var(--ds-text-tertiary);
}
.admin-sum {
  color: var(--ds-text-secondary);
  font-variant-numeric: tabular-nums;
}
.admin-filters .filter {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-field);
  background: var(--ds-surface);
  color: var(--ds-ink);
}
.admin-sub {
  color: var(--ds-text-tertiary);
}
.admin-table th {
  color: var(--ds-text-secondary);
  border-bottom-color: var(--ds-border);
}
.admin-table td {
  border-bottom-color: var(--ds-border);
}
.admin-table tr:hover td {
  background: var(--ds-surface-soft);
}
.admin-thumb {
  border-radius: 8px;
  background: var(--ds-surface-soft);
}
.admin-ops button {
  color: var(--ds-brand);
}
.admin-ops button:last-child {
  color: var(--ds-text-secondary);
}

/* ---------------- 动效克制 ---------------- */

@media (prefers-reduced-motion: reduce) {
  .theme-rank .g1 .bd,
  .theme-tube .bubbles {
    animation: none;
  }
  .live-page .btn,
  .detail-head ~ .stack .btn,
  .album-feed .album-row {
    transition: none;
  }
}

/* ---- 编辑页：方块等宽 + 方块之间纵向间隔收紧 ----
   只改网格与间距；person-card / person-actions 的紧凑尺寸（v21 批3）保持基线不动，
   由 tests/east-saibo-gather.test.js 的「紧凑规格未被放大」守住。 */
.live-page .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 6px 10px; }
/* +1 / +0.5 / ⋯ 三等分：等宽由网格列保证，按钮自身尺寸沿用基线 */
.live-page .person-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.live-page .person-actions .btn { width: 100%; }
.live-page .drink-line-row .edit-link { font-size: 11px; }
.live-page .tool-bar .btn { min-height: 26px; font-size: 12px; }