/* ============================================================================
 * Stat band — .ui-stats  (a row of key figures: label, value, change, trend)
 *   .ui-stats--tiles  one card per figure — the default
 *   .ui-stats--band   one card, figures divided by space
 *   .ui-stats--open   no surface; a rule over each figure
 * why: docs/components.md#stat-bands
 * ========================================================================== */

/* The band lays out from the width of its own box, not the window's: a band in
   a column beside a rail and a band across a full page are different widths at
   the same viewport. */
.ui-stats { container-type: inline-size; }

/* Equal columns while the figures fit. A figure is never narrower than its
   widest unbreakable piece — the value — so a band too narrow for its figures
   wraps a figure onto the next row rather than letting it overlap the next. */
.ui-stats__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-10);
  margin: 0;
}

.ui-stat { display: flex; flex-direction: column; flex: 1 1 0; min-width: min-content; }

/* Takes the label rank's size and weight, but not its inherited leading: a
   figure's parts are held close, so the label keeps the band's tighter line.
   It sits outside the rank table for that one reason, and claims no rank. */
.ui-stat__label {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

/* A figure is never broken across lines and never truncated: `€` stays with its
   digits and every digit stays on screen. The band stacks before a figure
   would have to do either. */
.ui-stat__value {
  margin-top: var(--space-2);
  color: var(--strong);
  /* display: readout — a key figure is read as a number at a glance, not as a line of prose */
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A figure's own words about its value, in the caption rank's size and weight
   with the band's tighter leading, as the label takes, so it claims no rank.
   Body ink on no fill; no tone reaches it, having no change to colour. */
.ui-stat__caption {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  line-height: var(--leading-snug);
}

/* Alone it is the row a change would have taken — the same step down and line
   box — which holds a band of unlike figures on one line. Leading a change it is
   a span in that row, spaced off what follows. */
dd.ui-stat__caption { margin-top: var(--space-2); }
.ui-stat__delta .ui-stat__caption { margin-inline-end: var(--space-1); }

.ui-stat__delta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px var(--space-1);
  margin-top: var(--space-2);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}
.ui-stat__delta svg { width: 14px; height: 14px; flex: none; stroke-width: 2.7; } /* 2.7 of a 24 box drawn at 14px = 1.58 CSS px. docs/foundations.md#icons-and-glyphs */
.ui-stat__change { font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
.ui-stat__basis { color: var(--text); font-weight: var(--weight-normal); }

/* The change above does not wrap: wrapped, its arrow ends one line and its number
   starts the next, and a long caption drops its own change below the ones beside
   it. The arrow and the number cannot give way, so the words clip — the whole
   string stays in the markup. Only in that row: a caption standing alone has
   nothing to orphan, so it takes a second line rather than lose words. */
.ui-stat__delta .ui-stat__caption,
.ui-stat__basis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A figure is never narrower than its content: without these a long line widens it. */
dd.ui-stat__caption { contain: inline-size; }
.ui-stat__delta .ui-stat__caption,
.ui-stat__basis { width: 0; flex-grow: 1; max-width: max-content; }

/* Tone is set by the caller and says good or bad news. Direction is the arrow's
   job, so an unset tone keeps the change neutral whichever way it points. */
.ui-stat--good .ui-stat__delta { color: var(--chip-success-ink); }
.ui-stat--bad .ui-stat__delta { color: var(--chip-danger-ink); }

/* The trend is the caller's <svg>. margin-top: auto seats it on the bottom of
   the figure, so trends line up across figures whose text wraps differently. */
.ui-stat__trend { margin-top: auto; padding-top: var(--space-4); /* muted-ink: glyph — caller-supplied sparkline */ color: var(--muted); }
.ui-stat__trend svg { display: block; width: 100%; height: 32px; overflow: visible; }
.ui-stat--good .ui-stat__trend { color: var(--chip-success-ink); }
.ui-stat--bad .ui-stat__trend { color: var(--chip-danger-ink); }

/* The band's caption, above the figures rather than in one: what every change
   points at. It governs the row, so it takes the caption rank itself and is
   never set under a caption inside one figure, and its margin is below it. */
.ui-stats__basis {
  margin: 0 0 var(--space-5);
  color: var(--text);
  /* rank: caption */
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
}

.ui-stats--tiles .ui-stats__list { gap: var(--space-4); }

.ui-stats--open .ui-stat {
  border-top: 1px solid var(--border-strong);
  padding-top: var(--space-4);
}
.ui-stats--open .ui-stat__value { font-size: var(--text-3xl); }

/* Wrapping alone would leave three figures on one row and one on the next. So
   before a row of figures runs out of room, four fold two by two and an odd
   count stacks. The widths are where four and three tiles of `€ 6,459,401`
   stop fitting, and the open band's larger value moves them out; a longer
   figure still wraps rather than overlaps.
   why: docs/components.md#stat-bands */
@container (28rem < width <= 56rem) {
  .ui-stats:not(.ui-stats--open) .ui-stats__list:has(> .ui-stat:nth-child(4):last-child) > .ui-stat { flex-basis: 34%; }
}
@container (width <= 42rem) {
  .ui-stats__list:has(> .ui-stat:last-child:nth-child(odd)) > .ui-stat { flex-basis: 100%; }
}
@container (width <= 28rem) {
  .ui-stats__list > .ui-stat { flex-basis: 100%; }
}

/* Stacking runs out before a phone does. One figure to a row, a value can still
   be wider than the box holding it — it may neither wrap nor truncate — so the
   band pushed its column sideways: at 320, 15px past the shell's 214px column
   and 19px past a specimen cell. Below its own width the value takes the rank
   under it. A width each, because a tile pads its figure and an open band does
   not, so they stop fitting 16px apart; what a figure longer than the kit's own
   still does is in docs/components.md#stat-bands. #505 */
@container (width <= 14rem) {
  .ui-stats:not(.ui-stats--open) .ui-stats__list > .ui-stat .ui-stat__value { font-size: var(--text-xl); }
}
@container (width <= 15rem) {
  .ui-stats--open .ui-stats__list > .ui-stat .ui-stat__value { font-size: var(--text-2xl); }
}
@container (32rem < width <= 66rem) {
  .ui-stats--open .ui-stats__list:has(> .ui-stat:nth-child(4):last-child) > .ui-stat { flex-basis: 34%; }
}
@container (width <= 50rem) {
  .ui-stats--open .ui-stats__list:has(> .ui-stat:last-child:nth-child(odd)) > .ui-stat { flex-basis: 100%; }
}
@container (width <= 32rem) {
  .ui-stats--open .ui-stats__list > .ui-stat { flex-basis: 100%; }
}