/* PDFlyHQ — tools/pdf-accessibility-checker/result.css
   The checklist itself is the primary content here (no stat-cards grid —
   would just duplicate what the list already shows). Each .check-item
   carries a status dot (pass/warn/fail) plus a title and detail line.
   List shape borrows tools/compare-pdf/result.css's .diff-list pattern.
   JS contract: #result-headline, #check-list (.check-item rows),
   #btn-download-report, #btn-reset. */

.result-wrap { text-align: center; max-width: 480px; margin: 0 auto; }
.result-wrap--checklist { max-width: 640px; }

.result-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-5);
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-success-500) 14%, transparent);
  animation: result-pop var(--duration-slow) var(--ease-bounce);
}
.result-badge svg { width: 28px; height: 28px; }
@keyframes result-pop { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }

.result-badge__check { stroke-dasharray: 20; stroke-dashoffset: 20; animation: result-check-draw 420ms var(--ease-out) 220ms forwards; }
@keyframes result-check-draw { to { stroke-dashoffset: 0; } }

.result-wrap h2 { margin-bottom: var(--space-1); font-size: var(--text-xl); }
.result-subtitle { color: var(--color-text-secondary); font-size: var(--text-sm); margin-bottom: var(--space-6); }

/* ── Checklist ── */
.check-list {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
}

.check-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.check-item__status {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.check-item__status svg { width: 12px; height: 12px; }

.check-item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.check-item__title { font-weight: var(--font-semibold); color: var(--color-text); }
.check-item__detail { font-size: var(--text-xs); color: var(--color-text-secondary); }

.check-item--pass .check-item__status { background: color-mix(in srgb, var(--color-success-500) 18%, transparent); color: var(--color-success-600); }
.check-item--warn .check-item__status { background: color-mix(in srgb, var(--color-warning-500) 18%, transparent); color: var(--color-warning-600); }
.check-item--fail .check-item__status { background: color-mix(in srgb, var(--color-danger-500) 18%, transparent); color: var(--color-danger-500); }

.result-actions { display: flex; flex-direction: column; gap: var(--space-3); }
.result-actions .btn--success { gap: var(--space-2); }
@media (min-width: 480px) { .result-actions { flex-direction: row; justify-content: center; } }