/* A RECORD'S FIELDS BY GROUP. A field's own rhythm is `FormField`'s; groups stand a region rung apart,
   twice the field's, so a group reads as one. Two columns once the box is wide enough to seat two values
   side by side. */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  /* Two tracks the groups span whole, until a wide box lets a narrow group take one (a box cannot query
     itself, so the tracks are the box's at every width and the query seats the groups). */
  .lotics-fact-groups {
    container: lotics-fact-groups / inline-size;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    min-width: 0;
    gap: var(--lotics-space-32);
    column-gap: var(--lotics-space-24);
  }

  .lotics-fact-groups__group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    grid-column: 1 / -1;
    min-width: 0;
    gap: var(--lotics-space-12);
  }

  /* Two tracks at every width: narrow, a field takes the line unless it is short, so a number or a date
     pairs with the next short one rather than stretching a lone figure across the panel. */
  .lotics-fact-groups__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    min-width: 0;
    column-gap: var(--lotics-space-16);
  }

  .lotics-fact-groups__field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    grid-column: 1 / -1;
    min-width: 0;
  }

  .lotics-fact-groups__field[data-short] {
    grid-column: auto;
  }

  /* The group's acts close it: under its last field's own trailing air, the row the fields feed. */
  .lotics-fact-groups__foot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }

  /* Two short values pair by what the two need: under what two date controls take side by side at a
     phone's input rung, a control takes its line rather than run past the column, while two plain values
     — a figure, a day read — still share one down to a phone's narrowest box. */
  @container lotics-fact-groups (width < 336px) {
    .lotics-fact-groups__field[data-short]:has(input, textarea, button, [role="combobox"]) {
      grid-column: 1 / -1;
    }
  }

  @container lotics-fact-groups (width < 256px) {
    .lotics-fact-groups__field[data-short] {
      grid-column: 1 / -1;
    }
  }

  /* A wide box packs its groups two to a line where one is narrow: each group spans the line unless it is one
     field or two short ones, which takes half, beside the next such group. */
  @container lotics-fact-groups (width >= 720px) {
    .lotics-fact-groups__group[data-narrow] {
      grid-column: auto;
    }

    /* A group's one field takes its half whole. */
    .lotics-fact-groups__group[data-narrow] .lotics-fact-groups__field:only-child {
      grid-column: 1 / -1;
    }

    .lotics-fact-groups__fields {
      column-gap: var(--lotics-space-24);
    }

    .lotics-fact-groups__field {
      grid-column: auto;
    }

    .lotics-fact-groups__field[data-wide] {
      grid-column: 1 / -1;
    }
  }
}