/* The set's own column: the meter, the required rows under it, and whatever was
 *  filed outside the set below those — three bands at the frame's own rung.
 *  Inside a band the rhythm is the ROW's, because the rows are one run. */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-record-expected-set {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: var(--lotics-space-16);
  }

  .lotics-record-expected-set__rows {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: var(--lotics-space-8);
  }

  /*
   * A DOSSIER IS A GRID where there is room for one. `auto-fit` rather than a
   * column count: the set's size is the field's, so the row that holds it is the
   * one thing that can decide how many fit. A checklist (`kind="items"`) stays
   * one column — its rows carry their own bodies.
   *
   * The width question belongs to a query (`constitution.md` §10) answered in
   * three blocks: a container query on a name nothing declares is FALSE rather
   * than unknown, so the `@media` block states the answer for a set with no
   * boundary over it and the two `@container` blocks override it in both
   * directions.
   */
  /* 260 is the narrowest a document row may be drawn at — the `md` mark's 56
     and its gutter, with enough name left to tell two documents apart. */
  .lotics-record-expected-set__rows[data-kind="files"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  @media (width < 768px) {
    .lotics-record-expected-set__rows[data-kind="files"] {
      grid-template-columns: 1fr;
    }
  }

  @container lotics-boundary (width >= 768px) {
    .lotics-record-expected-set__rows[data-kind="files"] {
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
  }

  @container lotics-boundary (width < 768px) {
    .lotics-record-expected-set__rows[data-kind="files"] {
      grid-template-columns: 1fr;
    }
  }

  /* The gap's own row. An option's label is data — a Vietnamese document kind
     can be wider than the drawer the desk sits in — so the row gives way and the
     name wraps rather than pushing the column open. */
  .lotics-record-expected-set__ghost {
    min-width: 0;
  }

  /* EVERY row verb sits at the row's own right edge — the gap's ADD and the
     filed item's OPEN alike — so the set reads as one column of names and one
     column of acts. */
  .lotics-record-expected-set__act {
    margin-inline-start: auto;
  }

  /* The heading and the rows it names are ONE group. */
  .lotics-record-expected-set__extra {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: var(--lotics-space-8);
  }
}