/*
 * A headline figure, alone or under its label. THE THREE BANDS ARE NOT ONE GAP:
 * the label names the tile, and the figure with its caption are one object, so
 * the rhythm is the peer rung above the figure and the group rung above the
 * caption — 3 : 1 — rather than the same number on both sides, which read as
 * three unrelated lines. Each band states its own leading margin instead of a
 * gap on the column, because summing two rungs into a third is what the scale
 * forbids.
 *
 * The value row WRAPS and the CHIP is what moves: the figure never shrinks, so a
 * narrow column drops the delta to the next line rather than breaking a number.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-metric {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
  }

  /* The BARE figure is an item on somebody else's row — a legend, a summary
     line — and it is the one thing there with no readable shorter form. The
     labelled tile gives way instead, because that is what lets its chip wrap. */
  .lotics-metric:not([data-labelled]) {
    flex-shrink: 0;
  }

  /* The label row RESERVES the inline ⓘ button's height (an `sm` IconButton, 24)
     on every tile, so columns with and without an explanation centre their
     labels — and therefore their figures — on the same baseline. */
  .lotics-metric__head {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-2);
    min-height: 24px;
  }

  .lotics-metric__values {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--lotics-space-8);
  }

  .lotics-metric__head + .lotics-metric__values {
    margin-block-start: var(--lotics-space-24);
  }

  .lotics-metric__value {
    flex-shrink: 0;
  }

  .lotics-metric__caption {
    margin-block-start: var(--lotics-space-8);
  }
}