@layer components {
  .sheet {
    min-inline-size: 0;
    --sheet-lead: minmax(0, 2.2fr) fit-content(11em);
    --sheet-pack: minmax(4.2em, max-content);
    --sheet-macros: minmax(4.2em, 0.7fr) minmax(0, 0.55fr) minmax(0, 0.55fr) minmax(0, 0.55fr) minmax(0, 0.7fr);
    --sheet-alcohol: minmax(2.2em, max-content);
    --sheet-fit: max-content;
    --sheet-actions: calc(2 * var(--touch));
    --sheet-cols: var(--sheet-lead) var(--sheet-macros) var(--sheet-fit);
    --sheet-cols-open: var(--sheet-cols) var(--sheet-actions);

    &.has-unit {
      --sheet-cols: var(--sheet-lead) var(--sheet-pack) var(--sheet-macros) var(--sheet-fit);
      --sheet-cols-open: var(--sheet-cols) var(--sheet-actions);
    }

    &.has-alcohol {
      --sheet-cols: var(--sheet-lead) var(--sheet-macros) var(--sheet-alcohol) var(--sheet-fit);
      --sheet-cols-open: var(--sheet-cols) var(--sheet-actions);
    }

    &.has-unit.has-alcohol {
      --sheet-cols: var(--sheet-lead) var(--sheet-pack) var(--sheet-macros) var(--sheet-alcohol) var(--sheet-fit);
      --sheet-cols-open: var(--sheet-cols) var(--sheet-actions);
    }

    &:not(.catalog-sheet):not(.has-unit) :is(.sheet-head, .intake-row) > [data-field="pack"] {
      display: none;
    }

    &:not(.catalog-sheet):not(.has-alcohol) :is(.sheet-head, .intake-row) > [data-field="alcohol"] {
      display: none;
    }

    &:not(.catalog-sheet) {
      display: grid;
      grid-template-columns: var(--sheet-cols-open);
      column-gap: var(--space-xs);

      &:not(:has(.row-actions)) { grid-template-columns: var(--sheet-cols); }

      > .sheet-head,
      > .meal-kicker,
      > .row-form { grid-column: 1 / -1; }

      > .sheet-head,
      > .row-form {
        display: grid;
        grid-template-columns: subgrid;
      }

      .intake-row {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
      }

      .over-note { grid-column: 1 / -1; }
    }
  }

  .row-lead {
    display: grid;
    grid-column: 1 / span 2;
    grid-template-columns: subgrid;
    min-inline-size: 0;
    align-items: center;
  }

  /* Walk spacers stay blank on every width; compact still uses their
     min-content so burned kcal lands under meal ккал. */
  .intake-row.is-activity {
    > [data-field]:not([data-field="calories"]),
    > .fit-cell {
      visibility: hidden;
      pointer-events: none;
    }
  }

  .sheet-head,
  .intake-row:not(.catalog-row) {
    align-items: center;
    padding: var(--space-2xs) var(--space-s);

    [data-field="protein"] { color: var(--sage); }
    [data-field="fat"] { color: var(--gold); }
    [data-field="carbs"] { color: var(--clay); }
    [data-field="calories"] { color: var(--paprika); }
    [data-field="alcohol"] { color: var(--plum); }
  }

  /* Open rows: pencil/× hug the trailing edge (was --space-s, same as the
     name inset — looked like a floating gutter beside the kill). */
  .intake-row:not(.catalog-row):has(> .row-actions) {
    padding-inline-end: var(--space-2xs);
  }

  .catalog-sheet .sheet-head {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 7.5em) repeat(6, minmax(0, 0.75fr)) minmax(0, 0.55fr) var(--touch);
    gap: var(--space-xs);
    align-items: center;
    padding: var(--space-2xs) var(--space-s);
  }

  /* Rows top-align: number fields and fit line up with the product name;
     delete rides the top edge. Liquid nests under the portion select. */
  .catalog-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 7.5em) repeat(6, minmax(0, 0.75fr)) minmax(0, 0.55fr) var(--touch);
    gap: var(--space-xs);
    align-items: start;
    padding: var(--space-2xs) var(--space-s);
  }

  @container (max-width: 40rem) {
    .sheet:not(.catalog-sheet) {
      display: block;

      > .row-form { display: block; }

      > .sheet-head { display: none; }
    }

    .catalog-sheet .sheet-head { display: none; }

    .sheet:not(.catalog-sheet) .intake-row:not(.catalog-row) {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      column-gap: var(--space-xs);
      row-gap: 0;

      &::before {
        content: "";
        order: 3;
        flex: 0 0 100%;
        block-size: 0;
      }

      > .row-lead {
        display: flex;
        grid-column: auto;
        order: 1;
        flex: 1 1 0;
        min-inline-size: 0;
        align-items: center;
        gap: var(--space-xs);

        .name-cell { flex: 1 1 0; min-inline-size: 0; }

        .qty-cell { flex: none; }

        select,
        .qty-text {
          inline-size: auto;
          max-inline-size: 100%;
        }
      }

      > .row-actions {
        order: 2;
        flex: 0 0 calc(2 * var(--touch));
      }

      > [data-field],
      > .fit-cell {
        order: 4;
        flex: 1 1 0;
        min-inline-size: 0;
        margin-block-start: var(--space-2xs);
      }

      > [data-field="pack"],
      > [data-field="weight"] { min-inline-size: min-content; }

      > .fit-cell { min-inline-size: max-content; }
    }

    /* Walk rows: duration in the qty slot, burned kcal under meal ккал.
       Spacer digits / Fit stub (hidden above) keep flex min-content. */

    .catalog-row {
      grid-template-columns: repeat(7, minmax(0, 1fr));

      > .name-cell { grid-column: 1 / 4; grid-row: 1; }
      > [data-field="kind"] { grid-column: 4 / 6; grid-row: 1; }
      > .row-actions { grid-column: 6 / 8; grid-row: 1; }
    }
  }
}