/* =============================================================
   Socle · Carte de mesure (.sc-stat)
   Le chiffre clé d'un tableau de bord, son intitulé, son écart.
   Anatomie : __header (intitulé + icône), __value, __delta et sa
   __period. Se pose SUR .sc-card, qui porte la surface.
   Variante : --compact · Variation : --up, --down (le sens) puis
   --success, --warning, --danger (la nouvelle)
   ============================================================= */

.sc-stat {
  /* Tokens de composant : la variante ne fait que réassigner ceci. */
  --_stat-padding: var(--padding-l);
  --_stat-gap: var(--gap-2xs);
  --_stat-value-size: var(--text-metric-size);
  --_stat-icon: var(--color-text-muted);
  /* À côté d'un chiffre posé au cran le plus haut de l'échelle, une
     icône de 16 se perdrait. Le balisage documenté écrit ce nombre. */
  --_stat-icon-size: var(--space-20);

  /* Les deux premières déclarations sont celles de .sc-card, aux mêmes
     valeurs : la carte est l'hôte le plus courant de l'anatomie, pas sa
     condition. Dans un corps de carte, remettre --_stat-padding à 0. */
  display: flex;
  flex-direction: column;
  gap: var(--_stat-gap);
  padding: var(--_stat-padding);
}

/* ---- En-tête : l'intitulé nomme la mesure, l'icône sa famille ---- */

.sc-stat__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-s);
}

/* L'intitulé est un .sc-overline : casse, taille et interlettrage
   viennent de base.css. Cette classe ne règle que sa place. */
.sc-stat__label {
  flex: 1;
  min-width: 0;
}

.sc-stat__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--_stat-icon);
}

.sc-stat__icon svg {
  width: var(--_stat-icon-size);
  height: var(--_stat-icon-size);
}

/* ---- La valeur ----
   Les cinq déclarations du rôle de mesure. Sans les chiffres tabulaires,
   deux cartes voisines ne font pas tomber leur unité au même endroit. */

.sc-stat__value {
  font-size: var(--_stat-value-size);
  font-weight: var(--text-metric-weight);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

/* ---- La variation ----
   La flèche dit où va le chiffre, la couleur dit si c'est une bonne
   nouvelle. Le chiffre d'affaires et le taux de résiliation montent de
   la même façon, une seule des deux hausses est verte. */

.sc-stat__delta {
  /* Le texte de la donnée, pas celui du décor : l'écart se lit même
     quand il n'annonce rien. C'est la période qui s'atténue sous lui. */
  --_stat-delta-text: var(--color-text-secondary);
  /* Structurel : le triangle est un carré rogné. */
  --_stat-delta-arrow: var(--space-8);

  display: flex;
  align-items: center;
  gap: var(--gap-2xs);
  /* Poussée en bas : dans une grille, les variations de cartes voisines
     restent alignées même si un intitulé passe à la ligne. */
  margin-block-start: auto;
  color: var(--_stat-delta-text);
  font-size: var(--text-body-s-size);
  font-weight: var(--text-label-weight);
  line-height: var(--leading-snug);
  font-variant-numeric: tabular-nums;
}

/* Dessinée ici plutôt qu'écrite dans le balisage : un signe qui porte
   le sens ne doit pas pouvoir se perdre à la recopie. Muette pour la
   synthèse vocale, donc le texte garde son propre signe. */
.sc-stat__delta--up::before,
.sc-stat__delta--down::before {
  content: "";
  flex: none;
  width: var(--_stat-delta-arrow);
  height: var(--_stat-delta-arrow);
  background: currentColor;
}

.sc-stat__delta--up::before {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.sc-stat__delta--down::before {
  clip-path: polygon(50% 100%, 100% 0, 0 0);
}

/* ---- La nouvelle ----
   Les trois familles du badge et de l'alerte, pour la même raison :
   c'est le sens qui les choisit, jamais la décoration. */

.sc-stat__delta--success {
  --_stat-delta-text: var(--color-success-text);
}

.sc-stat__delta--warning {
  --_stat-delta-text: var(--color-warning-text);
}

.sc-stat__delta--danger {
  --_stat-delta-text: var(--color-danger-text);
}

/* Un écart sans son point de départ ne veut rien dire. */
.sc-stat__period {
  color: var(--color-text-muted);
  font-weight: var(--text-body-weight);
}

/* ---- Compacte ----
   Le rôle du chiffre n'a pas de cadet : --text-metric-size attendait un
   second consommateur réel, et le voici. En attendant un
   --text-metric-s-size, --text-h2-size est le rôle le plus proche. */

.sc-stat--compact {
  --_stat-padding: var(--padding-m);
  --_stat-value-size: var(--text-h2-size);
  --_stat-icon-size: var(--space-16);
}

/* ---- Chargement ----
   Rien ici, et c'est délibéré : .sc-skeleton--text tient la place du
   chiffre, avec --_skeleton-text-size pour lui donner sa métrique. */