/* Label, figure and caption are not one gap: the peer rung above the figure and the group rung above the
   caption, since figure and caption are one object. Each band states its own leading margin, since summing
   rungs is forbidden. Every figure stacks the same slots — its number, one line of its change and its goal,
   its history at the foot — and in a strip each slot is the strip's row, so the histories start on one line. */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  /* Label and figure at the top; height a row stretches the tile to goes to its history, under them — the tile
     grows to fill a column box it stands in (a strip's cell). */
  .lotics-metric {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex: 1 1 auto;
  }

  /* A bare figure on someone else's row has no shorter form; the labelled tile gives way so its chip can
     wrap. */
  .lotics-metric:not([data-labelled]) {
    flex-shrink: 0;
  }

  /* Reserves the ⓘ button's 24px on every tile, so labels and figures share a 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);
  }

  /* One measure in several units or currencies: each its own line, the first on top — never one run to add up. */
  .lotics-metric__values[data-stacked] {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--lotics-space-4);
  }

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

  /* The change and the goal under the number, on one line that wraps — never beside the number. */
  .lotics-metric__detail {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    margin-block-start: var(--lotics-space-8);
    gap: var(--lotics-space-8);
  }

  /* The goal: its bound, then the ring of its share at the line's end; narrower than both, the ring wraps. */
  .lotics-metric__target {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
    gap: var(--lotics-space-8);
  }

  /* The goal a share is of. */
  .lotics-metric__bound {
    flex-shrink: 0;
  }

  /* The ring closes the goal's line, so a band's rings end at one edge. */
  .lotics-metric__shape {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: center;
    flex-shrink: 0;
    gap: var(--lotics-space-8);
    margin-inline-start: auto;
  }

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

  /* One slot on every tile: under the figure, the tile's width, growing with the tile. */
  .lotics-metric__history {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    min-height: 32px;
    margin-block-start: var(--lotics-space-12);
  }

  /* A strip's tile: its parts take the strip's rows, one each whether or not this tile draws it, so a line's
     tiles stand level however their names, changes or goals wrap; the history takes what the row leaves. */
  .lotics-metric[data-strip] {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .lotics-metric__head[data-strip] {
    grid-row: 1;
  }

  .lotics-metric__values[data-strip] {
    grid-row: 2;
  }

  .lotics-metric__detail[data-strip] {
    grid-row: 3;
  }

  .lotics-metric__caption[data-strip] {
    grid-row: 4;
  }

  .lotics-metric__history[data-strip] {
    grid-row: 5;
    align-self: stretch;
  }

  /* In a register's readings band, whose line is one low height: the figure's rungs close up, so its number,
     change and history stand in the height a picture beside it is drawn to. Its tile wraps with the band's width,
     so it is a column rather than the strip's subgrid, its history at the foot at one height: a line's tiles,
     stretched to one height, stand their histories level. */
  @container lotics-reading-band (width >= 0px) {
    .lotics-metric[data-strip] {
      display: flex;
      flex-direction: column;
    }

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

    .lotics-metric__detail {
      margin-block-start: var(--lotics-space-4);
    }

    .lotics-metric__history {
      flex: 0 0 auto;
      margin-block-start: auto;
      padding-block-start: var(--lotics-space-8);
    }
  }
}