@layer components {
  /* The quick adds under a collection; the partial is shared/_quick_adds. A row
   * of buttons rather than empty rows in the form, because an unset cleaning fee
   * is a question somebody has not answered and an empty box is one they have
   * answered with nothing.
   *
   * It was named after the fees screen until the rooms and the nearby screens
   * wanted the same strip, and a rooms screen wearing a fee's class is the wrong
   * answer - the same rename .record-switcher and .settings-section each got, for
   * the same reason. Not .suggestions, which forms.css already owns: that is the
   * address autocomplete's anchored dropdown, and it is absolutely positioned - a
   * strip of buttons inheriting that came out the full width of the window at the
   * far left of it, which is what a name collision looks like when both names are
   * plausible.
   *
   * A `.setting-row +` rule went with the rename. It ruled the strip off where it
   * followed a list of settings rows, and no screen has ever put it there: all
   * three that render one put it under a table or a list of cards, where
   * .settings-section's own gap is the whole of what it needs. */
  .quick-adds {
    display: grid;
    gap: var(--space-half);
  }

  /* The same uppercase micro-type as .sidebar__heading and
   * .workspace-nav__heading, to the value. It was a step tighter than both for no
   * reason anybody could have named. */
  .quick-adds__heading {
    margin: 0;
    font-size: var(--text-xx-small);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-x-wide);
    text-transform: uppercase;
    color: var(--color-ink-soft);
  }

  .quick-adds__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-half);
    margin: 0;
    padding: 0;
    list-style: none;
  }
}