/* A prompt row — the empty state of a section, said as the verb that fills
   it: "Add a person…", "Add to a list…". The to-do intake's dashed circle
   and faint words, as a link or a button, so an empty section is the way in
   rather than a notice (crm-v2, the redraw). */
@layer components {
  .prompt {
    display: inline-flex;
    align-items: center;
    gap: var(--inline-space);
    color: var(--color-ink-faint);
    text-decoration: none;
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    cursor: pointer;

    &::before {
      content: "";
      inline-size: 1rem;
      block-size: 1rem;
      border: var(--border);
      border-style: dashed;
      border-radius: 50%;
      flex: none;
    }

    &:hover {
      color: var(--color-ink-subtle);
    }
  }
}