@layer components {
  .meal-kicker {
    margin: 0;
    padding: var(--space-2xs) var(--space-s);
    background: var(--paper);
    color: var(--muted);
    font-size: var(--step-00);
    font-weight: 600;
    letter-spacing: 0.02em;
    border-block-end: thin solid var(--mist);
  }

  .sheet-wrap {
    container-type: inline-size;
    overflow-x: clip;
  }

  .sheet-card {
    background: var(--cream);
    border: thin solid color-mix(in oklch, var(--ink) 16%, var(--mist));
    border-radius: var(--radius);
    overflow: clip;
  }

  .sheet-head {
    background: var(--head);
    color: var(--ink);
    font-size: var(--step-00);
    font-weight: 600;
    letter-spacing: 0.02em;
    border-block-end: thin solid color-mix(in oklch, var(--paprika) 40%, var(--mist));

    > * {
      min-inline-size: 0;
      padding-inline: 0.45em;
    }

    > :first-child {
      padding-inline-start: 0;
      text-align: start;
    }

    > .row-actions {
      padding-inline: 0;
      text-align: center;
    }

    [data-field="quantity"],
    [data-field="kind"] { text-align: start; }

    [data-field="pack"],
    [data-field="weight"],
    [data-field="protein"],
    [data-field="fat"],
    [data-field="carbs"],
    [data-field="calories"],
    [data-field="alcohol"],
    [data-field="fit"] { text-align: end; }

    [data-field="pack"],
    [data-field="weight"],
    [data-field="fit"] { white-space: nowrap; }

    [data-field="fit"] .col-why {
      inline-size: 1em;
      block-size: 1em;

      .glyph { inline-size: 0.85em; block-size: 0.85em; }
    }
  }
}