/* ============================================================
   ED28 V2 — Algorithm Hall / Algorithm Detail
   Stage 2D：搜索联想、分类/标签正交筛选、策展行、可信度卡片
   ============================================================ */

.hint-inline { font-weight: 400; color: var(--text-tertiary); text-transform: none; letter-spacing: 0; }

/* ---- Search + autocomplete ---- */
.algo-search-row { margin-bottom: var(--space-5); }
.combobox-wrap { position: relative; max-width: 560px; }
.search-suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  overflow: hidden;
  max-height: 360px;
  overflow-y: auto;
}
.search-suggest[hidden] { display: none; }
.suggest-group-label { padding: 8px 14px 4px; font-size: var(--text-xs); color: var(--text-tertiary); }
.suggest-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  font-size: var(--text-sm);
}
.suggest-item:hover, .suggest-item.is-active { background: var(--bg-surface-3); }
.suggest-item .suggest-meta { margin-left: auto; font-size: var(--text-xs); color: var(--text-tertiary); }
.suggest-empty { padding: 16px 14px; font-size: var(--text-xs); color: var(--text-tertiary); text-align: center; }

/* ---- Tag filter row (正交于分类 Tab) ---- */
.tag-filter-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.tag-filter-label { font-size: var(--text-xs); color: var(--text-tertiary); font-weight: 600; flex-shrink: 0; }
.tag-filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.tag-filter-sep { width: 1px; height: 18px; background: var(--border-default); margin: 0 2px; }
.chip-official.is-active { background: var(--brand-tint-bg); border-color: var(--brand-500); color: var(--brand-400); }
.chip-lab.is-active { background: var(--ai-tint-bg); border-color: var(--ai-500); color: var(--ai-500); }

.algo-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.view-toggle { display: flex; border: 1px solid var(--border-default); border-radius: var(--radius-sm); overflow: hidden; }
.view-toggle button {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-surface-2); color: var(--text-tertiary); border: none; cursor: pointer;
}
.view-toggle button.is-active { background: var(--brand-tint-bg); color: var(--brand-400); }
.view-toggle button svg { width: 16px; height: 16px; }

.active-filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--space-5); min-height: 0; }

/* ---- Curation rows: 热门 / 最新 / 官方精选 / 猜你喜欢 ---- */
.curation-zone { display: flex; flex-direction: column; gap: var(--space-6); margin-bottom: var(--space-8); }
.curation-row-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: var(--space-3); }
.curation-row-head h3 { font-size: var(--text-md); }
.curation-row-head .hint { font-size: var(--text-xs); color: var(--text-tertiary); }
.curation-scroll {
  display: flex; gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
}
.curation-card {
  scroll-snap-align: start;
  flex: 0 0 240px;
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: 8px;
}
.curation-card .cc-title { font-size: var(--text-sm); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.curation-card .cc-meta { font-size: var(--text-xs); color: var(--text-tertiary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---- Card grid ---- */
.algo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.algo-grid.is-list { grid-template-columns: 1fr; }

.algo-card { padding: var(--space-5); display: flex; flex-direction: column; gap: 10px; }
.algo-grid.is-list .algo-card { flex-direction: row; align-items: flex-start; gap: var(--space-5); flex-wrap: wrap; }
.algo-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.algo-card-title-wrap { min-width: 0; }
.algo-card-title { font-size: var(--text-md); font-weight: 700; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fav-btn { color: var(--text-tertiary); cursor: pointer; background: none; border: none; padding: 4px; flex-shrink: 0; }
.fav-btn svg { width: 18px; height: 18px; }
.fav-btn.is-fav { color: var(--danger-500); }
.algo-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--text-xs); color: var(--text-tertiary); }
.algo-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.algo-card-tags .badge { background: var(--bg-surface-3); color: var(--text-tertiary); font-weight: 500; }
.algo-card-desc { font-size: var(--text-xs); color: var(--text-tertiary); line-height: var(--leading-relaxed); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.credibility-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--text-xs); }
.credibility-rate { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-md); }
.credibility-pill { padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; }
.credibility-pill.level-high { background: var(--success-tint); color: var(--success-500); }
.credibility-pill.level-mid { background: var(--warning-tint); color: var(--warning-500); }
.credibility-pill.level-low { background: var(--danger-tint); color: var(--danger-500); }
/* Stage 2F.16: prediction_domain.credibility_label()'s "watch" tier
   (20-vs-100-window divergence exceeds CREDIBILITY_VOLATILITY_THRESHOLD_PCT)
   already existed in real production data (confirmed live: real-combo-
   sumstructure-v1) but had no visual treatment anywhere in this file --
   it silently fell through with no pill styling at all wherever rendered.
   Bordered variant of .level-mid's warning color, not a new hue, so it
   still reads as "caution" while staying visually distinct from a plain
   sample-size-based "mid" pill. */
.credibility-pill.level-watch { background: var(--bg-surface-2); color: var(--warning-500); border: 1.5px solid var(--warning-500); }

.streak-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--text-xs); color: var(--text-tertiary); }
.streak-chip { display: inline-flex; align-items: center; gap: 4px; }
.streak-chip .n { font-family: var(--font-mono); font-weight: 700; }
.streak-chip.win .n { color: var(--success-500); }
.streak-chip.loss .n { color: var(--danger-500); }

/* Stage 2F.7 spec 二十五/二十六: real-algorithm KPI grid on the Hall card
   -- page-scoped names (not prediction.css's .prediction-card-kpi-*) since
   algorithm_hall.html/author.html/category.html/favorites.html don't load
   prediction.css, same "small primitives duplicated per page-CSS-file"
   posture prediction.css's own .confidence-pill comment already documents
   for algorithm.css's .credibility-pill. */
.algo-card-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-bottom: 4px; }
.algo-card-kpi-cell { padding: 6px 10px; background: var(--bg-surface-3); border-radius: var(--radius-md); }
.algo-card-kpi-label { font-size: 10px; color: var(--text-tertiary); margin-bottom: 2px; }
.algo-card-kpi-value { font-size: var(--text-sm); font-weight: 700; }
.algo-card-kpi-hint { font-size: 10px; }

.algo-card-trend { opacity: 0.9; }

.algo-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px solid var(--border-subtle); margin-top: auto;
}
.algo-author-link { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-secondary); min-width: 0; }
.algo-author-link .author-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 92px; }
.verified-badge { color: var(--brand-400); flex-shrink: 0; display: inline-flex; }
.verified-badge svg { width: 13px; height: 13px; }
.algo-card-stats { display: flex; align-items: center; gap: 10px; font-size: var(--text-xs); color: var(--text-tertiary); }
.algo-card-stats span { display: inline-flex; align-items: center; gap: 3px; }
.algo-card-stats svg { width: 13px; height: 13px; }

/* ---- Filter drawer facets ---- */
.facet-group { margin-bottom: var(--space-6); }
.facet-group h4 { font-size: var(--text-xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-3); }
.facet-options { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- Sort bottom sheet ---- */
.sort-option {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 4px; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); cursor: pointer;
}
.sort-option:last-child { border-bottom: none; }
.sort-option.is-active { color: var(--brand-400); font-weight: 600; }

@media (max-width: 1080px) {
  .algo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .algo-grid { grid-template-columns: 1fr; }
  .algo-grid.is-list .algo-card { flex-direction: column; align-items: stretch; }
  .curation-card { flex-basis: 200px; }
  .tag-filter-row { gap: 8px; }
}