/* ============================================================
   Stage 2F Prediction Center -- page-scoped layout, mirrors the
   card/grid/pill primitives already shared via frontend/components/
   (badge.css, coming-soon.css, viz.css .kpi-*) rather than inventing a
   parallel design system.
   ============================================================ */

.prediction-home-head-links { display: flex; gap: var(--space-3); flex-shrink: 0; }
@media (max-width: 640px) {
  .prediction-home-head { flex-wrap: wrap; }
  .prediction-home-head-links { width: 100%; justify-content: flex-start; }
}

.prediction-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

.prediction-card { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.prediction-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.prediction-card-title { font-size: var(--text-md); font-weight: 700; }
.prediction-card-period { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }
.prediction-card-value { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 700; }
.prediction-card-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--text-xs); color: var(--text-tertiary); }
.prediction-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: auto; }
.prediction-audit-link { font-size: var(--text-xs); color: var(--text-tertiary); }
.prediction-audit-link:hover { color: var(--brand-400); }

/* Stage 2F.12 P0-2: reason_summary collapsed by default via native <details>
   -- no JS, accessible by default. summary styled to read as a small
   secondary action button ("为什么这样预测？"), not a plain disclosure arrow. */
.prediction-card-reason { font-size: var(--text-xs); }
.prediction-card-reason > summary {
  cursor: pointer;
  color: var(--text-tertiary);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.prediction-card-reason > summary::-webkit-details-marker { display: none; }
.prediction-card-reason > summary::after { content: "▾"; font-size: 10px; transition: transform 0.15s; }
.prediction-card-reason[open] > summary::after { transform: rotate(180deg); }
.prediction-card-reason > summary:hover { color: var(--brand-400); }
.prediction-card-reason > p { margin-top: var(--space-2); }

/* Confidence pill -- same pill shape as algorithm.css's .credibility-pill,
   kept page-local here because Stage 2E V0's real 4-tier scale (low/mid/
   watch/high, prediction_domain.credibility_label()) needs the extra
   "watch" tier that page's 3-tier demo-fixture pill doesn't have. */
.confidence-pill { display: inline-flex; padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; }
.confidence-pill.level-high { background: var(--success-tint); color: var(--success-500); }
.confidence-pill.level-mid { background: var(--info-tint); color: var(--info-500); }
.confidence-pill.level-watch { background: var(--warning-tint); color: var(--warning-500); }
.confidence-pill.level-low { background: var(--danger-tint); color: var(--danger-500); }
.confidence-pill.level-none { background: var(--bg-surface-3); color: var(--text-tertiary); }

.prediction-history-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }

.prediction-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 720px) { .prediction-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .prediction-filter-grid { grid-template-columns: 1fr; } }
.prediction-filter-actions { flex-direction: row; align-items: flex-end; gap: var(--space-3); }

.prediction-explain-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.prediction-explain-card { padding: var(--space-4); }
.prediction-explain-card .label { font-size: var(--text-xs); font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.prediction-explain-card .desc { font-size: var(--text-xs); color: var(--text-tertiary); line-height: var(--leading-relaxed); }

@media (max-width: 640px) {
  .prediction-grid { grid-template-columns: 1fr; }
  .prediction-card-foot { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}

/* ============================================================
   Stage 2F.7 Prediction Product Upgrade -- Dashboard-density additions.
   Reuses frontend/components/viz.css's .kpi-row/.kpi-card/.omission-*
   primitives wherever the shape matches (spec: "使用ED28自己的组件" means
   don't clone pc28.ai's pixels, not "invent a parallel design system") --
   only genuinely new shapes (streak chip, accuracy ring, consensus bar,
   MiPai card face) get their own rules below.
   ============================================================ */

.prediction-card-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.prediction-card-kpi-cell { padding: var(--space-2) var(--space-3); background: var(--bg-surface-3); border-radius: var(--radius-md); }
.prediction-card-kpi-cell .label { font-size: var(--text-xs); color: var(--text-tertiary); margin-bottom: 2px; }
.prediction-card-kpi-cell .value { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; }
.prediction-card-kpi-cell .hint { font-size: 10px; }

/* Stage 2F.10 spec 十三: baseline context line -- sits under the streak
   row, same quiet text-xs treatment as the rest of the card's secondary
   metadata (never competes visually with the primary 本期预测 value). */
.prediction-card-baseline { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; color: var(--text-tertiary); }

.prediction-card-streak-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.streak-chip { display: inline-flex; padding: 2px 10px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; background: var(--bg-surface-3); color: var(--text-tertiary); }
.streak-chip.is-hit { background: var(--success-tint); color: var(--success-500); }
.streak-chip.is-miss { background: var(--danger-tint); color: var(--danger-500); }

/* ---- Overview grid + subnav ---- */
.prediction-overview-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-4); margin-bottom: var(--space-6); }
@media (max-width: 900px) { .prediction-overview-grid { grid-template-columns: 1fr; } }

.prediction-subnav { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-6); }
.prediction-subnav a { padding: 6px 14px; border-radius: var(--radius-full); font-size: var(--text-sm); color: var(--text-secondary); background: var(--bg-surface-2); border: 1px solid var(--border-subtle); }
.prediction-subnav a:hover { border-color: var(--border-strong); color: var(--text-primary); }
.prediction-subnav a.is-active { background: var(--brand-tint-bg); color: var(--brand-400); border-color: transparent; font-weight: 600; }
/* Stage 2F.12 P1-10 (spec 十六): at mobile widths the 6 chips wrapped into
   2 cramped rows (flex-wrap: wrap, unchanged above for desktop, where there
   is room and wrapping is rare/harmless) -- switched to a single
   horizontally-scrollable row instead, same "horizontal scroll chips"
   pattern spec asks for. */
@media (max-width: 640px) {
  .prediction-subnav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .prediction-subnav a { flex-shrink: 0; }
}

/* ---- Consensus bar（组合预测共识分布，非"更准确"）---- */
.consensus-bar-row { display: flex; flex-direction: column; gap: 6px; }
.consensus-bar-item { display: grid; grid-template-columns: 60px 1fr 70px; align-items: center; gap: var(--space-3); }
.consensus-bar-track { height: 10px; border-radius: var(--radius-full); background: var(--bg-surface-3); overflow: hidden; }
.consensus-bar-fill { height: 100%; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--brand-400), var(--brand-600)); }
.consensus-bar-count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); text-align: right; }

/* ---- Accuracy ring (pure CSS conic-gradient, no SVG/JS/library) ---- */
.accuracy-ring {
  --pct: 0;
  width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--success-500) calc(var(--pct) * 1%), var(--bg-surface-3) 0);
  display: flex; align-items: center; justify-content: center;
}
.accuracy-ring-inner {
  width: 56px; height: 56px; border-radius: 50%; background: var(--bg-surface-1);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.accuracy-ring-inner .pct { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; }
.accuracy-ring-inner .lbl { font-size: 9px; color: var(--text-tertiary); }
.accuracy-ring.is-empty { background: var(--bg-surface-3); }

/* ---- Compact widget cards (omission / statistics / leaderboard mini) ---- */
.prediction-widget-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-8) 0; }
@media (max-width: 960px) { .prediction-widget-grid { grid-template-columns: 1fr; } }
.prediction-widget-card { display: flex; flex-direction: column; gap: var(--space-3); }
.prediction-widget-card .widget-title { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-sm); font-weight: 700; }
.prediction-widget-card .widget-link { font-size: var(--text-xs); color: var(--text-tertiary); }
.prediction-widget-card .widget-link:hover { color: var(--brand-400); }

/* ---- Compact history table embed ---- */
.prediction-history-mini td, .prediction-history-mini th { padding: 8px 10px; }

.mipai-entry-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.mipai-entry-title { font-size: var(--text-md); font-weight: 700; margin-bottom: 2px; }

/* ---- Collapsible "了解预测机制" (spec 五: 移动，不删除) ---- */
.prediction-methodology-details { margin-top: var(--space-8); }
.prediction-methodology-details > summary { cursor: pointer; font-size: var(--text-sm); font-weight: 700; color: var(--text-secondary); padding: var(--space-3) 0; list-style: none; }
.prediction-methodology-details > summary::-webkit-details-marker { display: none; }
.prediction-methodology-details > summary::before { content: "▸ "; }
.prediction-methodology-details[open] > summary::before { content: "▾ "; }