/*
 * THE RECORD'S MONEY BAND — two to four readings, laid out as many across as
 * the band affords.
 *
 * A WRAPPING FLEX LINE over a floor, rather than a count or a query: the cell
 * count is the record's (2–4) and the width is the surface's, so a column count
 * written here would be wrong for one of them.
 *
 * AND THE LAST ROW IS FULL. A flex line has no tracks: what is left over is
 * divided between the cells that are on the row, so three cells are 2 + 1 across
 * the full width and four are two and two, both fully ruled.
 *
 * THE RULE BETWEEN CELLS IS DRAWN OUTSIDE THEM — a leading and a top edge at
 * -1px, which the card clips for the first cell of every row and for the whole
 * first row. Which cell begins a row is the layout's answer and not the
 * component's, so an attribute cannot say it (as `MetricStrip`).
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-money-band {
    /* THE CELL'S FLOOR, derived from the narrowest surface the band renders on:
     *  a record's main column at a phone's width is ~359, so two cells of 160
     *  plus their gutters are what makes the pair a reflow rather than a stack. */
    --lotics-money-band-cell: 160px;
  }

  .lotics-money-band__row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    min-width: 0;
  }

  /* A label over its reading, every figure on the label's own left edge
     (`composition.md`). `stretch` is what a meter's track is measured by: it is
     a LENGTH and takes the whole cell.

     The cell owns the band's gutter because the hairline between two cells is
     drawn on the cell and a `gap` would open a channel the rule falls into. */
  .lotics-money-band__cell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* The floor is the BASIS and the rest is shared out, so the cells on a row
       are equal and the row is full whichever row it is. */
    flex: 1 1 var(--lotics-money-band-cell);
    min-width: 0;
    gap: var(--lotics-space-4);
    padding-block: var(--lotics-space-12);
    padding-inline: var(--lotics-space-16);
    box-shadow:
      -1px 0 0 var(--border),
      0 -1px 0 var(--border);
  }

  /*
   * A PAIR IS NOT A FIGURE, AND ITS CELL IS NOT A FIGURE'S: two amounts and the
   * word between them do not fit one figure's floor, so the cell asks for the
   * line it prints on.
   *
   * CONTENT, not a second number: the measure is the locale's and the
   * currency's. The cell still SHRINKS, so nothing is reserved.
   */
  .lotics-money-band__cell[data-reading="pair"] {
    flex-basis: auto;
  }

  /*
   * A CELL THE READER MAY CHANGE PUTS ITS RUNGS ON ONE X: an inline editor
   * carries its own text inset and the words above it carry none.
   *
   * THE WORDS TAKE THE INSET, never the field pulling itself out of it — the
   * `ruled` variant's edge is VISIBLE at rest, and the same answer the record's
   * own facts settled on (`record_facts.css`).
   */
  .lotics-money-band__cell[data-editable] .lotics-money-band__words,
  .lotics-money-band__cell[data-editable] .lotics-money-band__figure {
    padding-inline: var(--lotics-control-text-inset);
  }

  /* A MONEY FIGURE IS ONE TOKEN — AND A PAIR IS TWO. `Text` breaks a word that
     would overflow alone, which turns a đồng amount a pixel too wide into two
     numbers; forbidding the break outright clips a pair's bound at the cell's
     edge. So the line may break where the reading itself offers a space, and
     nowhere else.

     Two of our own classes because the rule it overrides is `Text`'s own, at
     the same weight, and a tie between two component sheets is decided by
     whichever the bundler emitted last. */
  .lotics-money-band__cell .lotics-money-band__figure {
    overflow-wrap: normal;
  }
}