/* ============================================================
   retraction-checker.css — Retraction Checker status styles
   Layout primitives (.cc-panel, .cc-result, etc.) come from
   citation-checker.css; this file only adds retraction-specific
   statuses and the notice list.
   ============================================================ */

/* ── Five-stat layout + info color ───────────────────────── */
.cc-stats-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 620px) {
  .cc-stats-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cc-stat-info .cc-stat-num { color: var(--color-primary); }

/* ── Status colors ───────────────────────────────────────── */
.cc-result[data-status="retracted"] { border-left-color: var(--color-error); }
.cc-result[data-status="concern"]   { border-left-color: var(--color-gold); }
.cc-result[data-status="corrected"] { border-left-color: var(--color-primary); }
.cc-result[data-status="clean"]     { border-left-color: var(--color-success); }
.cc-result[data-status="not_found"] { border-left-color: var(--color-text-faint); }
.cc-result[data-status="error"]     { border-left-color: var(--color-text-faint); }

.cc-result[data-status="retracted"] .cc-status-badge {
  background: color-mix(in oklab, var(--color-error) 12%, transparent);
  color: var(--color-error);
  border: 1px solid color-mix(in oklab, var(--color-error) 28%, transparent);
}
.cc-result[data-status="concern"] .cc-status-badge {
  background: color-mix(in oklab, var(--color-gold) 14%, transparent);
  color: var(--color-gold);
  border: 1px solid color-mix(in oklab, var(--color-gold) 24%, transparent);
}
.cc-result[data-status="corrected"] .cc-status-badge {
  background: color-mix(in oklab, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
  border: 1px solid color-mix(in oklab, var(--color-primary) 22%, transparent);
}
.cc-result[data-status="clean"] .cc-status-badge {
  background: color-mix(in oklab, var(--color-success) 12%, transparent);
  color: var(--color-success);
  border: 1px solid color-mix(in oklab, var(--color-success) 22%, transparent);
}
.cc-result[data-status="not_found"] .cc-status-badge,
.cc-result[data-status="error"] .cc-status-badge {
  background: color-mix(in oklab, var(--color-text-faint) 12%, transparent);
  color: var(--color-text-muted);
  border: 1px solid color-mix(in oklab, var(--color-text-faint) 20%, transparent);
}

/* ── Notice list ─────────────────────────────────────────── */
.cc-notices {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rc-notice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}

.rc-notice-tag {
  font-weight: 800;
  font-size: var(--text-xs);
  letter-spacing: .04em;
  padding: .1rem .55rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.rc-notice[data-severity="retracted"] .rc-notice-tag {
  background: color-mix(in oklab, var(--color-error) 12%, transparent);
  color: var(--color-error);
  border: 1px solid color-mix(in oklab, var(--color-error) 26%, transparent);
}
.rc-notice[data-severity="concern"] .rc-notice-tag {
  background: color-mix(in oklab, var(--color-gold) 14%, transparent);
  color: var(--color-gold);
  border: 1px solid color-mix(in oklab, var(--color-gold) 24%, transparent);
}
.rc-notice[data-severity="corrected"] .rc-notice-tag {
  background: color-mix(in oklab, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
  border: 1px solid color-mix(in oklab, var(--color-primary) 22%, transparent);
}

.rc-notice-meta { color: var(--color-text-muted); }
.rc-notice-meta a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rc-notice-meta a:hover { color: var(--color-primary-hover); }