/*
 * READINGS AS ONE FILLING GRID: four units to a row, each cell spanning what `reading_grid_pack.ts` gave it,
 * so every row is full; a grid row stretches its cells to one height. Its own box decides the phone column,
 * since the grid stands in a dashboard, a register and a record's panel alike.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-reading-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    min-width: 0;
    gap: var(--lotics-space-16);
    container: lotics-reading-grid / inline-size;
  }

  .lotics-reading-grid__cell {
    grid-column: span var(--lotics-reading-grid-span);
    min-width: 0;
  }

  /* A figure's head: the same height and centre line, so every title of a row stands on one line. */
  .lotics-reading-grid__title {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-8);
    min-height: 24px;
    margin-block-end: var(--lotics-space-8);
  }

  /* A control changing the picture, at the title line's end: it overhangs the line rather than growing it, so
     every title of a row still stands on one line. */
  .lotics-reading-grid__action {
    display: flex;
    flex-shrink: 0;
    margin-inline-start: auto;
    margin-block: calc((var(--lotics-space-24) - var(--lotics-control-height)) / 2);
  }

  /* What the row gives the card below its title: a picture that fills it (bars, a trend, a matrix) takes its
     width, one drawn at its own size (a ring and its legend) grows into it and centres itself. */
  .lotics-reading-grid__body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 auto;
    min-width: 0;
  }

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

  /* THE BAND: one line of one low height across the box, whatever it holds — the cells share the width by
     their units, and every picture's body is the band's, so the rows under it start at one place however
     many readings stand. Its own container, so a grid's phone rules (a card per row) never reach it. */
  .lotics-reading-grid[data-form="band"] {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--lotics-space-12);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    container: lotics-reading-band / inline-size;
  }

  /* Never narrower than its picture stands whole in (a ring's legend, every name on its line), its gutters
     and border each side. `--lotics-reading-band-unit` is one unit of the line, as a figure is one unit of a
     grid's row: a quarter of it, less the gaps between four — the width a figure stands at (`metric_strip.css`).
     Read where it is used, so `cqi` is the band's own width. */
  .lotics-reading-grid[data-form="band"] > .lotics-reading-grid__cell {
    --lotics-reading-band-unit: calc((100cqi - var(--lotics-space-12) * 3) / 4);
    flex: var(--lotics-reading-grid-span) 1 0;
    min-width: calc(var(--lotics-reading-grid-ink, 0px) + var(--lotics-space-16) * 2 + 2px);
  }

  /* The band's figures are one strip, each figure a unit wide, never a share of what the line leaves: two numbers
     stretched over it read as two empty cards, and one at its words' width beside a picture reads as a sliver.
     Where the line cannot seat it whole, it wraps its figures, never under the widest. */
  .lotics-reading-grid[data-form="band"] > .lotics-reading-grid__cell[data-figures] {
    flex: 0 1 auto;
    min-width: min-content;
  }

  /* A card of the band: its title on one line, its body the band's height, a picture drawn to it. */
  .lotics-reading-grid[data-form="band"] > .lotics-reading-grid__cell:not([data-figures]) {
    padding: var(--lotics-space-12) var(--lotics-space-16);
  }

  .lotics-reading-grid[data-form="band"] .lotics-reading-grid__title {
    min-height: 20px;
    margin-block-end: var(--lotics-space-6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* A control overhangs the band's lower line too, never clipped: the words keep their ellipsis themselves. */
  .lotics-reading-grid[data-form="band"] .lotics-reading-grid__title:has(> .lotics-reading-grid__action) {
    overflow: visible;
  }

  .lotics-reading-grid[data-form="band"] .lotics-reading-grid__title > :first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* It clips at a row wash's bleed outside its words, not at them: a pressable row's wash stands whole. */
  .lotics-reading-grid[data-form="band"] .lotics-reading-grid__body {
    flex: 0 0 auto;
    height: var(--lotics-reading-grid-band-body);
    justify-content: center;
    padding-inline: var(--lotics-row-wash-bleed);
    margin-inline: calc(var(--lotics-row-wash-bleed) * -1);
    overflow: hidden;
  }

  /* A phone's column: the line keeps its height and scrolls sideways under the thumb (its own box scrolls,
     never the page), each cell at a width that reads — its units' share of a desk line, never a sliver and never past the screen.
     A picture that stands whole only wider (every bar's name on its bar's line) takes the line's whole width over
     the next card's peek: at 88% its names stacked over their bars, and the rows overran the band's body under
     the card's title. */
  @container lotics-reading-band (width <= 720px) {
    /* A phone's line pairs its figures, as a phone's grid does: a unit is half the line. */
    .lotics-reading-grid[data-form="band"] > .lotics-reading-grid__cell {
      --lotics-reading-band-unit: calc((100cqi - var(--lotics-space-12)) / 2);
      flex: 0 0 auto;
      width: clamp(240px, calc(var(--lotics-reading-grid-span) * 150px), 88%);
      min-width: min(calc(var(--lotics-reading-grid-ink, 0px) + var(--lotics-space-16) * 2 + 2px), 100%);
      scroll-snap-align: start;
    }

    /* A band of one picture has nothing to scroll to: it takes the line. */
    .lotics-reading-grid[data-form="band"] > .lotics-reading-grid__cell:only-child {
      width: 100%;
      min-width: 0;
    }

    /* The strip, alone or not, keeps its figures' width, never past the band's: what does not fit side by side
       stacks. */
    .lotics-reading-grid[data-form="band"] > .lotics-reading-grid__cell[data-figures] {
      flex: 0 0 auto;
      width: auto;
      max-width: 100%;
    }
  }

  /* A phone's column: two cards side by side would each be too narrow to read, so every card takes the row. */
  @container lotics-reading-grid (width <= 720px) {
    .lotics-reading-grid__cell {
      grid-column: 1 / -1;
    }
  }
}