@layer components {
  /* ——— Where picked rows go: Copy… and Move… ———
     Every folder the person can reach, by project, as a tree: a folder a step
     in from the one it sits in (--depth), the picked one in the selected
     wash. A line to find one by name on top; Cancel and the verb at the foot,
     right-aligned, the verb outermost (HANSHI 02). */
  .destinations {
    fieldset {
      margin: 0;
      padding: 0;
      border: 0;
    }

    legend {
      padding-block: 1.125rem var(--inline-space-half);
    }
  }

  .destinations__folder {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    padding-block: var(--inline-space);
    padding-inline: calc(0.625rem + var(--depth, 0) * 1.5rem) 0.625rem;
    border-radius: var(--border-radius);
    cursor: pointer;

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

    &:has(:checked) {
      color: var(--color-selected-ink);
      background-color: var(--color-selected);
    }

    .radio {
      margin: 0;
    }
  }

  /* The action row (buttons.css), set off from the tree. */
  .destinations__actions {
    margin-block-start: 1.25rem;
    padding-block-start: var(--block-space);
    border-block-start: var(--border);
  }
}