@layer components {
  /* The catalog behind "Add a tool": plain rows, the tool's name and one line
     saying what you would use it for. A row is a button or a link depending on
     whether the tool has to be told anything, and both read the same.

     Its own file rather than a section of dock.css: the dock is the tiles, this
     is what you pick from to make one, and `ls app/assets/stylesheets` is the
     component index (AGENTS.md). */
  .tool-choice {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    inline-size: 100%;
    padding: var(--block-space-half) var(--inline-space);
    font-weight: 500;
    text-align: start;
    color: var(--color-ink);
    background-color: transparent;
    border: none;
    border-radius: var(--border-radius);
    text-decoration: none;
    cursor: pointer;

    &:hover {
      background-color: var(--color-surface);
    }
  }

  .tool-choice__purpose {
    font-weight: 400;
    font-size: var(--text-small);
    color: var(--color-ink-subtle);
  }
}