@layer components {
  .intake-row {
    input,
    select,
    output,
    textarea {
      display: block;
      min-inline-size: 0;
      border: 0;
      background: transparent;
      font-variant-numeric: tabular-nums;
    }

    /* Rails check_box pairs a hidden input; keep it out of flex layout. */
    input[type="hidden"] { display: none; }

    input:not([type="checkbox"], [type="radio"]),
    select,
    textarea {
      inline-size: 100%;
      padding: 0.4em 0.45em;
      border: thin solid color-mix(in oklch, var(--ink) 18%, transparent);
      background: oklch(1 0.01 80 / 0.55);
      line-height: 1.25;
      min-block-size: 2.15rem;
    }

    input:not([type="checkbox"], [type="radio"]),
    select { block-size: 2.15rem; }
    input[type="checkbox"] {
      inline-size: 1.1rem;
      min-inline-size: 0;
      block-size: 1.1rem;
      min-block-size: 0;
      margin: 0;
      padding: 0;
      border: 0;
      background: none;
    }

    textarea {
      resize: none;
      field-sizing: content;
      overflow-wrap: anywhere;
      white-space: pre-wrap;
      align-content: center;
    }

    select {
      cursor: pointer;
      text-align: center;
      appearance: none;
    }

    output { padding-inline: 0.45em; text-align: end; font-weight: 600; }

    input[type="number"] { text-align: end; }

    .fit-cell .col-why { display: none; }

    &.catalog-row [data-field="kind"] select {
      text-align: start;
      font-size: var(--step-00);
    }

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

  @container (max-width: 40rem) {
    .intake-row [data-abbr] {
      display: flex;
      flex-direction: column;
      align-items: end;
      align-self: start;
      gap: 0.1em;
      text-align: end;

      &::before {
        content: attr(data-abbr);
        color: var(--muted);
        font-size: 0.65em;
        font-weight: 700;
        letter-spacing: 0.02em;
        line-height: 1;
        white-space: nowrap;
      }
    }

    .catalog-row [data-field="kind"][data-abbr] {
      align-items: start;
      text-align: start;
    }

    .intake-row .fit-cell[data-abbr] {
      flex-flow: row wrap;
      justify-content: end;
      column-gap: 0.15em;
      padding-inline: 0.45em;
      white-space: nowrap;

      .col-why {
        display: inline-flex;
        min-inline-size: 0;
        min-block-size: 0;
        inline-size: 0.65em;
        block-size: 0.65em;
        color: var(--muted);
        background: transparent;

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

      .fit {
        flex: 1 0 100%;
        padding: 0;
      }
    }

    .intake-row:not(.catalog-row) .product-title { text-wrap: wrap; }
  }

  .name-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-inline-size: 0;
  }

  .product-title {
    display: block;
    overflow-wrap: break-word;
    text-wrap: pretty;
    font-weight: 600;
    line-height: 1.25;
  }

  .product-brand {
    overflow-wrap: break-word;
    color: var(--muted);
    font-weight: 500;
    font-size: 0.85em;
    line-height: 1.2;
  }

  [data-field="pack"],
  [data-field="weight"] { color: var(--muted); font-weight: 500; }

  .catalog-row .name-cell input[name*="[brand]"] {
    min-block-size: 1.75em;
    block-size: auto;
    margin-block-end: 0.2em;
    font-size: 0.85em;
    font-weight: 500;
    color: var(--muted);
  }

  .qty-cell {
    min-inline-size: 0;

    select {
      appearance: auto;
      inline-size: auto;
      max-inline-size: 11em;
      block-size: auto;
      min-inline-size: 0;
      min-block-size: var(--touch);
      font-size: 1rem;
      font-variant-numeric: normal;
      text-align: start;
    }
  }

  .qty-text {
    display: block;
    overflow-wrap: anywhere;
    line-height: 1.25;
    padding-inline: 0.45em;
  }

  .fit {
    text-align: end;
    font-weight: 700;

    &.is-high { color: var(--sage); }
    &.is-mid { color: var(--gold); }
    &.is-low { color: var(--paprika); }
    &.is-void { color: var(--muted); }
  }
}