/* ---------- Concept Verdicts ---------- */

.concept-verdicts__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.concept-verdicts-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 380px));
  gap: var(--space-3);
}

/* The edit-in-place form (see js/pages/concept-verdicts.js) renders inside
   this same grid, swapped in for the card being edited — it spans the full
   row instead of being squeezed into one card-width column. */
.concept-verdict-form {
  grid-column: 1 / -1;
}

.concept-verdict-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.concept-verdict-card__field {
  margin-bottom: var(--space-2);
}

.concept-verdict-card__field-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

.concept-verdict-card__field p {
  font-size: 0.9rem;
  white-space: pre-line;
}

.concept-verdict-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.concept-verdict-tag {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: 0.7rem;
  color: var(--muted);
}

/* One color per tag category, reused identically for the card pill, the
   form's tag picker (.concept-verdict-tagbtn, selected state only) and the
   filter bar (.concept-verdict-filter-btn, selected state only) — so the
   same category always reads the same color everywhere on the page. Bias
   and Narrative reuse the exact blue/purple already established by Concept
   Lab's own cell-color picker (css/concept-lab.css); Entry confirmation and
   Macro reuse the app's --amber/--green tokens directly. Red is
   deliberately skipped — it already means "Unreliable" on this same page's
   verdict badges, and doubling it up as a tag color would be confusing. */
.concept-verdict-tag--bias,
.concept-verdict-tagbtn--bias.is-selected,
.concept-verdict-filter-btn--bias.is-selected {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.4);
}

.concept-verdict-tag--narrative,
.concept-verdict-tagbtn--narrative.is-selected,
.concept-verdict-filter-btn--narrative.is-selected {
  color: #a855f7;
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.4);
}

.concept-verdict-tag--entry,
.concept-verdict-tagbtn--entry.is-selected,
.concept-verdict-filter-btn--entry.is-selected {
  color: var(--amber);
  background: rgba(245, 196, 81, 0.15);
  border-color: rgba(245, 196, 81, 0.4);
}

.concept-verdict-tag--macro,
.concept-verdict-tagbtn--macro.is-selected,
.concept-verdict-filter-btn--macro.is-selected {
  color: var(--green);
  background: rgba(52, 211, 153, 0.15);
  border-color: rgba(52, 211, 153, 0.4);
}

.concept-verdict-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.concept-verdict-card__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.concept-verdict-badge {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.concept-verdict-badge--reliable {
  color: var(--green);
  background: rgba(52, 211, 153, 0.15);
}

.concept-verdict-badge--conditional {
  color: var(--amber);
  background: rgba(245, 196, 81, 0.15);
}

.concept-verdict-badge--unreliable {
  color: var(--red);
  background: rgba(244, 80, 106, 0.15);
}

@media (max-width: 599px) {
  .concept-verdicts__toolbar {
    flex-direction: column;
    align-items: stretch;
  }
}