@layer components {
  .composer {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--space-xs);
    min-inline-size: 0;
    padding: var(--space-s);
    background: var(--paper);
    border-block-start: thin solid var(--mist);
    border-end-start-radius: var(--radius);
    border-end-end-radius: var(--radius);
    box-shadow: inset 0.18em 0 0 color-mix(in oklch, var(--paprika) 55%, var(--mist));

    .name-cell {
      display: flex;
      flex: 1 1 12em;
      min-inline-size: 0;
      flex-flow: row nowrap;
      justify-content: flex-start;
      align-items: center;
      gap: var(--space-2xs);

      /* Same cream line as community comments: muted photo icons + field. */
      .name-compose {
        display: flex;
        flex: 1 1 auto;
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--space-2xs);
        min-inline-size: 0;
        padding: var(--space-2xs);
        border: thin solid color-mix(in oklch, var(--ink) 16%, var(--mist));
        border-radius: var(--radius-s);
        background: var(--cream);

        &:focus-within {
          outline: var(--stroke) solid var(--paprika);
          outline-offset: 0.15em;
        }
      }

      > input[name*="[food]"],
      .name-field {
        flex: 1.2 1 8em;
        min-inline-size: 0;
        inline-size: auto;
      }

      /* span out-ranks the later `input:not(.btn):not([type="file"])` base
         shorthand so the wipe keeps its 2.5rem text reserve and bare look. */
      span.name-field {
        position: relative;

        input {
          padding-inline-end: 2.5rem;
          border: 0;
          background: transparent;

          &:focus-visible { outline: none; }
        }

        &:has(input:placeholder-shown) .wipe { display: none; }
      }

      input[name*="[brand]"] {
        flex: 1 1 8em;
        inline-size: auto;
        min-inline-size: 0;
        font-size: 0.85em;
        color: var(--muted);
      }
    }

    input:not([type="file"]),
    select,
    .btn {
      min-block-size: var(--touch);
      margin: 0;
      font-size: 1rem;
    }

    input:not(.btn):not([type="file"]),
    select {
      inline-size: 100%;
      padding: 0.55em 0.65em;
      border: thin solid color-mix(in oklch, var(--ink) 22%, var(--mist));
      border-radius: var(--radius-s);
      background: var(--cream);
    }

    select {
      flex: 0 1 10em;
      inline-size: auto;
      min-inline-size: 0;
    }

    .btn {
      flex: 0 1 auto;
      max-inline-size: 100%;
      white-space: nowrap;
    }
  }
}