/* ══════════════════════════════════════════════════════════════════════════
   Pattern: the figure
   ══════════════════════════════════════════════════════════════════════════
   A number and what it counts. Twenty-four classes in Korra draw it — `stat`,
   `tile`, `figure`, `metric` — on dashboards, storefront home pages and the
   owner console.

   TWO RULES THAT COME FROM REAL DAMAGE:

   1. TABULAR NUMERALS. A column of figures in a proportional face does not
      line up, and a person reading down a list of amounts is comparing digit
      positions. This is one declaration and it is missing from most of the
      twenty-four.

   2. A FIGURE WITH NO SOURCE IS A CLAIM, NOT A MEASUREMENT. The owner found
      the Audit sheet showing invented numbers for four months. `.ga-stat__as-of`
      exists so a figure can say when it was true, and the pattern card says to
      use it wherever the number is not live.

   THE DELTA IS NOT ALWAYS GOOD WHEN IT IS UP. Refunds rising is not a green
   arrow. The direction and the judgement are separate classes here, because
   binding them is how a dashboard ends up congratulating itself on a problem.
   ══════════════════════════════════════════════════════════════════════════ */

.ga-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: calc(var(--ga-space-4) * var(--ga-density, 1));
  border: 1px solid var(--ga-line);
  border-radius: var(--ga-radius-lg);
  background: var(--ga-surface);
}

/* The label goes ABOVE the number. A number you read before you know what it
   counts is a number you have to read twice. */
.ga-stat__label {
  font-size: var(--ga-text-label);
  font-weight: var(--ga-weight-semi);
  letter-spacing: .06em;
  text-transform: uppercase;
  /* --ga-ink-2, not --ga-ink-3: this is small, uppercase and tracked out, which
     is the hardest combination to read, so it gets the darker of the two. */
  color: var(--ga-ink-2);
  line-height: var(--ga-leading-snug);
}

.ga-stat__figure {
  font-size: var(--ga-text-h2);
  font-weight: var(--ga-weight-bold);
  line-height: var(--ga-leading-tight);
  letter-spacing: var(--ga-tracking-tight);
  color: var(--ga-ink);
  /* See rule 1 in the header. */
  font-variant-numeric: tabular-nums;
}

/* The unit rides with the number but does not compete with it: GH₵, kg, %. */
.ga-stat__unit {
  font-size: .55em;
  font-weight: var(--ga-weight-semi);
  color: var(--ga-ink-2);
  margin-left: .15em;
}

/* One line under the figure. What it is out of, what it was before, what it
   excludes — the sentence that stops a number being misread. */
.ga-stat__note {
  font-size: var(--ga-text-meta);
  color: var(--ga-ink-3);
  line-height: var(--ga-leading-snug);
}

/* WHEN THIS WAS TRUE. Rule 2. A cached or nightly figure says so here, in the
   same place every time, so nobody has to wonder which numbers are live. */
.ga-stat__as-of {
  font-size: var(--ga-text-label);
  color: var(--ga-ink-3);
  font-variant-numeric: tabular-nums;
}

/* ── The change ────────────────────────────────────────────────────────────
   Direction and judgement are separate. --up and --down say which way it
   moved; --good and --bad say whether that is welcome. Revenue up is good,
   refunds up is not, and the pattern must not decide which is which. */
.ga-stat__delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--ga-text-meta);
  font-weight: var(--ga-weight-semi);
  font-variant-numeric: tabular-nums;
  color: var(--ga-ink-2);
}
/* The arrow is a character in the markup, not a background image, so it is
   read aloud and it survives a copy-paste into a message. */
.ga-stat__delta--good { color: var(--ga-good); }
.ga-stat__delta--bad  { color: var(--ga-bad); }

/* ── Variants ──────────────────────────────────────────────────────────────
   Bare, for figures already inside a panel — a card of four numbers should not
   be four boxes in a box. */
.ga-stat--bare {
  border: none;
  background: none;
  padding: 0;
}

/* Lead, for the one figure a page is about. */
.ga-stat--lead .ga-stat__figure { font-size: var(--ga-text-h1); }

/* ── The row ───────────────────────────────────────────────────────────────
   auto-fit rather than a column count, for the same reason the card grid uses
   it: no breakpoint to forget. Figures are short, so the minimum is smaller
   than a card's. */
.ga-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--ga-stat-min, 150px), 1fr));
  gap: var(--ga-space-3);
}

@media (max-width: 600px) {
  /* Two across on a phone, not one. A figure is short enough to read at half
     width, and a column of four full-width boxes pushes the fourth off the
     screen — which is where the number people actually came for usually is. */
  .ga-stats { grid-template-columns: 1fr 1fr; gap: var(--ga-space-2); }
  .ga-stat__figure { font-size: var(--ga-text-h3); }
}