/* Column rules are `--border`, so they divide in a dark card; 180px is the column's floor, deciding when
   the band wraps. Rules are `box-shadow`s at -1px outside the cell, clipped by the card for each visual
   row's first cell. Each tile spans five of the strip's rows — label, number, change and goal, caption,
   history — as a subgrid, so the tiles of a line stand level whatever wraps in one of them. */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  /* Stretched to a taller neighbour's height (a grid row), the figures keep the top — their labels on the
     line the neighbours' titles stand on — and the tiles take the height below. A subgrid's padding lands only
     on what stands in its edge rows, so the history row keeps the tile's foot inset as its floor: a line with
     no history drew its numbers and captions on the card's edge. */
  .lotics-metric-strip__row {
    --lotics-metric-strip-inset: var(--lotics-space-16);
    /* A floor: narrower would put a figure on three lines instead of wrapping the strip. */
    --lotics-metric-strip-floor: 180px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--lotics-metric-strip-floor), 1fr));
    grid-auto-rows: auto auto auto auto minmax(var(--lotics-metric-strip-inset), 1fr);
    flex-grow: 1;
    flex-shrink: 0;
    min-width: 0;
  }

  .lotics-metric-strip__cell {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    padding-block: var(--lotics-metric-strip-inset);
    padding-inline: var(--lotics-space-16);
    box-shadow:
      -1px 0 0 var(--border),
      0 -1px 0 var(--border);
  }

  /* A pressable tile's wash fills it square between the strip's rules. */
  .lotics-metric-strip__cell[data-pressable] {
    border-radius: 0;
  }

  /* In a readings grid of a phone's column the figures pair, two to a line: a strip reads as a strip, and
     four figures one to a line took the first screen from every chart under them. */
  @container lotics-reading-grid (width <= 720px) {
    .lotics-metric-strip__row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* An odd one out takes its line whole, as a lone card takes its row. */
    .lotics-metric-strip__cell:last-child:nth-child(odd) {
      grid-column: 1 / -1;
    }
  }

  /* In a register's readings band, the band's one strip: each figure a unit of the band's line wide
     (`--lotics-reading-band-unit`, `reading_grid.css`) and never under a strip column's floor — a card, never a
     sliver beside a picture, its history drawn across it — side by side where they fit and stacked where they do
     not, their tops on the line the cards' titles stand on. A line's tiles stretch to one height, each figure's
     history at its foot (`metric.css`), so they stand level. */
  @container lotics-reading-band (width >= 0px) {
    .lotics-metric-strip__row {
      --lotics-metric-strip-inset: var(--lotics-space-12);
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }

    .lotics-metric-strip__cell {
      display: flex;
      flex-direction: column;
      flex: 1 0 auto;
      min-width: max(var(--lotics-metric-strip-floor), var(--lotics-reading-band-unit));
    }
  }

  /* A phone's line pairs its figures: half of it is a figure's width there, whatever a desk's floor says. */
  @container lotics-reading-band (width <= 720px) {
    .lotics-metric-strip__cell {
      min-width: var(--lotics-reading-band-unit);
    }
  }
}