/* PDFlyHQ — tools/pdf-to-csv/result.css
   Three stats (Rows / Columns (max) / Output size — the third highlighted,
   spanning the row below, same grid as jpg-to-pdf's), plus a scrollable CSV
   preview table unique to this tool (lets the user sanity-check the
   heuristic detection before downloading). JS contract: #stat-rows,
   #stat-columns, #stat-size, #csv-preview, #btn-download, #btn-reset. */

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

.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); }

.result-stats { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: var(--space-3); margin-bottom: var(--space-6); }
.stat-card { display: flex; flex-direction: column; gap: 2px; padding: var(--space-4); background: var(--color-surface-alt); border-radius: var(--radius-lg); border: 1px solid transparent; }
.stat-card__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.stat-card__value { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.stat-card--highlight { grid-column: 1 / -1; background: color-mix(in srgb, var(--color-success-500) 12%, transparent); border-color: color-mix(in srgb, var(--color-success-500) 30%, transparent); }
.stat-card--highlight .stat-card__value { color: var(--color-success-600); }

/* ── CSV preview ── */
.csv-preview-wrap {
  max-height: 320px;
  overflow: auto;
  margin-bottom: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: left;
}
.csv-preview { border-collapse: collapse; width: 100%; font-size: var(--text-xs); }
.csv-preview td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  white-space: nowrap;
  color: var(--color-text-secondary);
}
.csv-preview tr:last-child td { border-bottom: none; }
.csv-preview td:last-child { border-right: none; }
.csv-preview tr:first-child td { background: var(--color-surface-alt); font-weight: var(--font-semibold); color: var(--color-text); }

.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; } }