/*
 * The rule BETWEEN columns is the card's own hairline: `--border`, so a strip
 * inside a dark card still divides. The 180px floor is the column's own measure
 * — it is what decides when a five-figure band becomes two rows — and has no
 * scale to take it from.
 *
 * THE RULE IS DRAWN OUTSIDE THE CELL, so a wrapped band has no dangling
 * hairline. A cell's leading edge is a `box-shadow` at -1px and its top edge one
 * at -1px: both fall outside the card's padding box for the FIRST cell of every
 * visual row and for the whole first row, and the card clips them. Which cell
 * begins a row is a thing only the flex algorithm knows, so an attribute the
 * component writes cannot answer it — five columns in 900px divide correctly and
 * the same five at 700px used to open the second row with a vertical rule
 * against nothing.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-metric-strip__row {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    flex-wrap: wrap;
    min-width: 0;
  }

  .lotics-metric-strip__cell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-grow: 1;
    /* The 180 is a FLOOR, not a starting width: a column that shrank past it
       would put a headline figure on three lines rather than wrapping the
       strip, which is the whole reason the band wraps at all. */
    flex-shrink: 0;
    flex-basis: 180px;
    min-width: 0;
    padding-block: var(--lotics-space-16);
    padding-inline: var(--lotics-space-16);
    box-shadow:
      -1px 0 0 var(--border),
      0 -1px 0 var(--border);
  }
}