/*
 * Stat tile — structure.
 *
 * A number, what it is, and how it moved. The delta is the point: a KPI with
 * no comparison is trivia, so the trend slot is a first-class part rather
 * than an optional garnish.
 *
 * DO NOT edit this file to re-skin — override tokens in the .tokens.css file.
 */

.sp-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: var(--radius-card, 16px);
  font-family: var(--font-ui, "SF Pro Text", -apple-system, sans-serif);
  letter-spacing: var(--tracking-ui, -0.15px);
}

.sp-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--sp-stat-min, 190px), 1fr));
  gap: 10px;
}

.sp-stat__label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--ink-faint, #9e9e9e);
  font-size: var(--text-xs, 12px);
  line-height: 1.3;
}

.sp-stat__label svg { width: var(--icon-nav, 14px); height: var(--icon-nav, 14px); }

.sp-stat__value {
  margin: 0;
  color: var(--ink, #292929);
  font-size: var(--text-lg, 24px);
  font-weight: 500;
  line-height: 1.15;
  /* Tabular figures stop the number jiggling as it updates — a live dashboard
     where the digits shuffle sideways reads as broken. */
  font-variant-numeric: tabular-nums;
}

.sp-stat__unit {
  margin-left: 2px;
  color: var(--ink-faint, #9e9e9e);
  font-size: var(--text-md, 14px);
  font-weight: 400;
}

.sp-stat__foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--ink-faint, #9e9e9e);
  font-size: var(--text-xs, 12px);
  line-height: 1.4;
}

/* Direction is stated in the arrow and the sign, never in colour alone —
   colour is unavailable to a good number of readers and prints as grey. */
.sp-stat__delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.sp-stat__delta svg { width: 12px; height: 12px; }

/* Up is not automatically good. A tile for refunds or bounce rate wants
   --down as the positive one, which is why the classes name the SENTIMENT
   and not the direction. */
.sp-stat__delta--good { color: var(--sp-stat-good, #22c55e); }
.sp-stat__delta--bad { color: var(--sp-stat-bad, #dc2626); }
.sp-stat__delta--flat { color: var(--ink-faint, #9e9e9e); }

/* Sparkline slot. The element does not draw it — it reserves the space and
   sets the colour, so any inline SVG drops in. */
.sp-stat__spark {
  height: 28px;
  margin-top: 2px;
  color: var(--sp-stat-spark, var(--accent, #3b82f6));
}

.sp-stat__spark svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Loading. Height is held by the same type scale, so nothing reflows when the
   real number lands. */
.sp-stat.is-loading .sp-stat__value,
.sp-stat.is-loading .sp-stat__foot {
  color: transparent;
  background: var(--surface-hover, #f3f3f3);
  border-radius: var(--radius-nav, 8px);
  animation: sp-stat-pulse 1.4s ease-in-out infinite;
}

@keyframes sp-stat-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-stat.is-loading .sp-stat__value,
  .sp-stat.is-loading .sp-stat__foot { animation: none; }
}