@layer components {
  .row-form { display: block; scroll-margin-block: 5rem; }

  .sheet .row-form {
    &:nth-child(odd of .row-form) .intake-row:not(.is-over) { background: var(--cream); }
    &:nth-child(even of .row-form) .intake-row:not(.is-over) { background: var(--stripe); }

    &:has(.intake-row.is-over) {
      background: color-mix(in oklch, var(--over) 22%, var(--cream));
      box-shadow: inset 0.22rem 0 0 var(--over);
    }

    &:has(.intake-row.is-over) .intake-row {
      background: transparent;
      box-shadow: none;
      border-block-end: 0;
    }

    > .over-note {
      margin: 0;
      border-radius: 0;
      border-inline-start: 0;
      border-block-end: thin solid var(--mist);
    }

    &:hover .intake-row:not(.is-over),
    &:focus-within .intake-row:not(.is-over) { background: var(--row-hover); }

    &:hover:has(.intake-row.is-over),
    &:focus-within:has(.intake-row.is-over) {
      background: color-mix(in oklch, var(--over) 42%, var(--cream));
    }

    &:target .catalog-row,
    &.is-focus .catalog-row {
      background: color-mix(in oklch, var(--paprika) 14%, var(--cream));
      box-shadow: inset 0 0 0 var(--stroke) var(--paprika);
    }

    &.is-saving .catalog-row,
    &.is-looking .intake-row { animation: row-saving 0.7s ease-in-out infinite; }

    &.is-looking .product-title,
    &.is-photo-empty .product-title { color: var(--muted); }

    &.is-saved .catalog-row { animation: row-saved 1.1s ease-out; }

    &:focus-within { position: relative; z-index: 2; }

    &.is-filling .catalog-row input[type="number"]:placeholder-shown:not(:focus),
    &.is-filling .catalog-row output.fit {
      color: transparent;
      caret-color: var(--ink);
      background:
        linear-gradient(
          105deg,
          color-mix(in oklch, var(--mist) 70%, var(--cream)) 40%,
          color-mix(in oklch, var(--cream) 85%, white) 50%,
          color-mix(in oklch, var(--mist) 70%, var(--cream)) 60%
        )
        0 0 / 200% 100%;
      animation: fact-skeleton 1.2s ease-in-out infinite;
    }
  }

  @keyframes row-saving {
    50% { box-shadow: inset 0 0 0 0.1rem color-mix(in oklch, var(--paprika) 60%, transparent); }
  }

  @keyframes row-saved {
    from {
      box-shadow:
        inset 0 0 0 0.14rem var(--sage),
        inset 0 0 1.2rem color-mix(in oklch, var(--sage) 40%, transparent);
    }
  }

  @keyframes fact-skeleton {
    to { background-position: -200% 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .sheet .row-form.is-saving .catalog-row,
    .sheet .row-form.is-saved .catalog-row,
    .sheet .row-form.is-filling .catalog-row input[type="number"]:placeholder-shown,
    .sheet .row-form.is-filling .catalog-row output.fit { animation: none; }
  }

  .intake-row {
    border-block-end: thin solid var(--mist);

    > * { min-inline-size: 0; }

    /* Catalog rows top-align their fields with the name (columns.css);
       other rows keep every cell centred. */
    &:not(.catalog-row) > * { align-self: center; }
  }

  .intake-row > .row-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    position: relative;
    z-index: 1;
  }

  .catalog-row > .row-actions {
    justify-content: end;
    align-items: start;
    padding-block-start: var(--space-2xs);
  }

  /* A walk has no pencil: mirror the food rows' pencil slot so the × sits
     in the same place when the track gets squeezed. */
  .intake-row.is-activity > .row-actions {
    justify-content: center;

    &::before { content: ""; inline-size: var(--touch); min-inline-size: var(--touch); }
  }

  .catalog-edit,
  .kill {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--touch);
    min-inline-size: var(--touch);
    inline-size: var(--touch);
    padding: 0;
    border: 0;
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
  }

  .catalog-edit {
    color: var(--paprika);
    border-radius: var(--radius-s);

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

  .kill {
    color: var(--over);
    font: inherit;
    font-size: 1.35em;
    font-weight: 700;
    line-height: 1;
  }
}