/* PDFlyHQ — tools/compress-pdf/result.css
   Stat boxes, download button. JS contract preserved: #stat-files,
   #stat-original, #stat-compressed, #stat-saved, #btn-download, #btn-reset. */

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

/* Success badge */
.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); }
}

/* Checkmark draws in just after the badge finishes popping. Fixed dasharray
   (20) sized above the path's actual measured length (~17.7 in a 28x28
   viewbox) rather than `pathLength="1"` — that attribute reports correctly
   via getTotalLength() but doesn't reliably drive a CSS @keyframes
   animation of stroke-dashoffset in this environment; a plain absolute
   value does. */
.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); }

/* Stat row — Files/Original/Compressed across one row, Saved full-width below */
.result-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

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

/* Saved — the hero stat, spans full width on its own row */
.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); }

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