/* ============================================================
   赛程列表页（Stage 2 · matches.html）
   规范见 design.md；仅使用 base.css 已定义的设计变量，
   共享组件（卡片 / 徽章 / 状态标签 / 按钮 / 空态）直接复用 base.css
   ============================================================ */

/* ---------- 题区：日期范围 + 赛事筛选 ---------- */
.matchday-heading {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.matchday-heading h1 {
  margin: 0;
  font-size: var(--fs-h1);
}

.page-summary {
  margin: var(--sp-2) 0 0;
  color: var(--ink-soft);
  font-size: var(--fs-small);
}

.competition-filter {
  display: none;
  align-items: center;
  gap: var(--sp-2);
}

.filter-label {
  flex: none;
  color: var(--ink-soft);
  font-size: var(--fs-small);
}

.filter-select {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
}

.filter-submit { flex: none; }

/* JS 可用时「选择即提交」，隐藏提交按钮；无 JS 时按钮保留 */
.competition-filter.is-auto .filter-submit { display: none; }

.competition-strip {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-bottom: var(--sp-1);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.competition-strip::-webkit-scrollbar { display: none; }

.competition-strip a {
  flex: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.competition-strip a span {
  color: var(--ink-faint);
  font-size: var(--fs-micro);
}

.competition-strip a[aria-current="page"] {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent);
}

.competition-strip a[aria-current="page"] span { color: var(--accent); }

.membership-callout {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  border: 1px solid var(--c-full-line);
  border-radius: var(--radius-lg);
  background: var(--accent-wash);
}

.membership-callout div {
  display: grid;
  gap: var(--sp-1);
}

.membership-callout strong {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
}

.membership-callout span {
  color: var(--ink-soft);
  font-size: var(--fs-small);
}

.membership-callout .btn {
  flex: none;
}

/* ---------- 日期横滑条（紧随题区） ---------- */
.date-strip {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding: var(--sp-1);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.date-strip::-webkit-scrollbar { display: none; }

.date-strip a {
  flex: none;
  min-width: 64px;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--card);
  text-decoration: none;
}

.date-strip a small {
  color: var(--ink-faint);
  font-size: var(--fs-micro);
}

.date-strip a strong {
  color: var(--ink);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}

.date-strip a:hover { border-color: var(--line-strong); }

.date-strip a[aria-current="date"] {
  background: var(--accent-wash);
  border-color: var(--c-full-line);
}

.date-strip a[aria-current="date"] small { color: var(--accent); }

.date-strip a[aria-current="date"] strong {
  color: var(--accent);
  font-weight: 700;
}

/* ---------- 赛事分组 ---------- */
.competition-group { margin-top: var(--sp-6); }

.competition-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 44px;
  margin-bottom: var(--sp-3);
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.competition-heading::-webkit-details-marker { display: none; }

.competition-heading h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-h3);
}

.competition-heading h2::before {
  content: "";
  flex: none;
  width: var(--sp-1);
  height: 1em;
  border-radius: var(--radius-pill);
  background: var(--accent);
}

.group-side {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.group-count {
  color: var(--ink-faint);
  font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums;
}

.group-chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.competition-group[open] .group-chevron { transform: rotate(45deg); }

.competition-group:not([open]) .competition-heading { margin-bottom: 0; }

/* ---------- 比赛卡网格 ---------- */
.match-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}

/* ---------- 比赛卡（信息层级：时间/状态 > 两队 > 共识句 > meta） ---------- */
.match-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  color: inherit;
  text-decoration: none;
  transition: border-color 140ms ease, transform 140ms ease;
}

.match-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.match-card-topline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.kickoff {
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.match-card-topline .consensus-badge { margin-left: auto; }

/* 对阵行 */
.teams-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-3);
}

.team {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

.team strong {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.team-away {
  justify-content: flex-end;
  text-align: right;
}

.team-crest {
  flex: none;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.team-fallback {
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: var(--fs-small);
  font-weight: 600;
}

.versus {
  color: var(--ink-faint);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .1em;
}

/* 共识句（后端直出，最多两行） */
.consensus-line {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-small);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 完场比分（标签结构是测试断言，样式只作用视觉） */
.final-score {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--ink);
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.final-score span {
  flex: none;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink-faint);
  font-size: var(--fs-micro);
  font-weight: 600;
  white-space: nowrap;
}

/* 卡片脚注：阶段 / 模型数 */
.match-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-3);
  color: var(--ink-faint);
  font-size: var(--fs-micro);
}

.footer-stage {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.footer-models {
  flex: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 未出推演的卡片:整体退灰,一眼与已推演区分 */
.match-card-unpredicted {
  background: var(--paper);
  border-style: dashed;
}

.match-card-unpredicted .consensus-badge,
.match-card-unpredicted .consensus-line { opacity: .75; }

/* 今天:标题徽章与回到今天 */
.today-badge {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: var(--sp-3);
  min-height: 26px;
  padding: 0 var(--sp-3);
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .02em;
}

.back-to-today { margin-top: var(--sp-3); align-self: flex-start; }

/* 日期条:今天格子高亮 */
.date-strip a.is-today small {
  color: var(--accent);
  font-weight: 700;
}

.date-strip a.is-today {
  border-color: var(--accent);
}

/* 日期条:有推演的日期加绿点 */
.date-strip a { position: relative; }

.pred-dot {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* 今夜凌晨区块 */
.tonight-section { margin-top: var(--sp-7); }

.tonight-heading {
  border-top: 1px solid var(--line-strong);
  padding-top: var(--sp-5);
}

.tonight-note {
  margin: var(--sp-2) 0 var(--sp-4);
  color: var(--ink-faint);
  font-size: var(--fs-small);
}

/* 完场卡片视觉弱化 */
.match-card-finished {
  box-shadow: none;
  background: var(--paper);
}

.match-card-finished .team strong { color: var(--ink-soft); }

.match-card-finished .final-score { color: var(--ink); }

/* 完场卡的模型命中摘要 */
.verdict-summary {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.verdict-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink-faint);
  font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.verdict-chip.chip-hit {
  color: var(--c-major);
  background: var(--c-major-bg);
  border-color: var(--c-major-line);
}

.verdict-chip.chip-exact {
  color: var(--c-full);
  background: var(--c-full-bg);
  border-color: var(--c-full-line);
}

/* ---------- ≥640px：双列网格 ---------- */
@media (min-width: 640px) {
  .membership-callout {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .matchday-heading {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-5);
  }

  .matchday-heading h1 { font-size: 36px; }

  .competition-filter {
    min-width: 300px;
    display: flex;
  }

  .competition-strip { display: none; }

  .competition-group { margin-top: var(--sp-7); }

  .match-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
  }
}

.visitor-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-6);
}

.visitor-intro .eyebrow {
  margin: 0;
}

.visitor-actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}