/* ============================================================
   ED28 V2 — Algorithm Detail
   ============================================================ */

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.detail-title { font-size: var(--text-2xl); margin-bottom: 8px; }
.detail-meta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detail-actions { display: flex; gap: 8px; flex-shrink: 0; }

.detail-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-6); margin-top: var(--space-6); }

.changelog-item { display: flex; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--border-subtle); }
.changelog-item:last-child { border-bottom: none; }
.changelog-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-500); margin-top: 6px; flex-shrink: 0; }
.changelog-dot.is-rollback { background: var(--warning-500); }

.comment-item { display: flex; gap: 10px; padding: var(--space-4) 0; border-bottom: 1px solid var(--border-subtle); }
.comment-item:last-child { border-bottom: none; }
.comment-box { display: flex; gap: 10px; margin-bottom: var(--space-5); }
.comment-box textarea {
  flex: 1; min-height: 70px; resize: vertical;
  background: var(--bg-surface-2); border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  padding: 10px 12px; color: var(--text-primary); font-family: inherit; font-size: var(--text-sm);
}
.comment-box textarea:focus { outline: none; border-color: var(--brand-500); box-shadow: var(--shadow-focus-ring); }

.related-item { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.related-item:last-child { border-bottom: none; }

.author-sidecard { text-align: center; }

/* ---- Stage 2D: 可信度标签（KPI 卡内小徽标）---- */
.kpi-card .credibility-pill { margin-top: 6px; display: inline-block; }

/* ---- Stage 2D: 连续性指标（正负同显）---- */
.streak-panel { margin-top: var(--space-5); }
.streak-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.streak-cell { text-align: center; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--bg-surface-2); }
.streak-cell .n { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 700; }
.streak-cell.win .n { color: var(--success-500); }
.streak-cell.loss .n { color: var(--danger-500); }
.streak-cell .label { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 4px; }
@media (max-width: 640px) { .streak-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- Stage 2D: 回测方法论折叠区块 ---- */
.methodology-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--space-4);
  background: none; border: none; cursor: pointer;
  font-size: var(--text-xs); font-weight: 600; color: var(--brand-400);
  padding: 0;
}
.methodology-toggle svg { transition: transform var(--duration-fast) var(--ease-standard); }
.methodology-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.methodology-body {
  margin-top: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
}
.methodology-list { display: flex; flex-direction: column; gap: 8px; }
.methodology-list li { font-size: var(--text-xs); color: var(--text-secondary); line-height: var(--leading-relaxed); }

/* ---- Stage 2D: 实验室预览风险提示 ---- */
.lab-risk-callout { margin-bottom: var(--space-5); }

/* ---- Stage 2E: Prediction Engine V0 待评测/已结算状态卡 ---- */
.prediction-pending-card {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
}
.prediction-pending-title { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-2); }
.prediction-pending-desc { font-size: var(--text-xs); color: var(--text-secondary); line-height: var(--leading-relaxed); }

@media (max-width: 1080px) {
  .detail-layout { grid-template-columns: 1fr; }
}

/* ---- Stage 2F.16: 长期验证 window grid (spec 二十四/二十五/二十六) ----
   Same visual language as .streak-grid/.streak-cell above (surface-2
   cards in a responsive grid), a distinct class since this grid has a
   variable column count (only windows with real settled data render at
   all -- spec 十七: never a fabricated "0/500" cell) and each cell
   carries more content (rate + delta + credibility pill) than a bare
   streak number. */
.verification-window-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }
.verification-window-cell { padding: var(--space-3); border-radius: var(--radius-sm); background: var(--bg-surface-2); }
.verification-window-cell .label { font-size: var(--text-xs); color: var(--text-tertiary); margin-bottom: 4px; }
.verification-window-cell .value { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 700; }
.verification-window-cell .delta { font-size: var(--text-xs); margin-top: 2px; }
.verification-window-cell .credibility-pill { margin-top: 6px; display: inline-block; }