/* A board (libre-publish's collection board, a kanban of kit components):
   columns side by side, each a small Card whose content is a stack of
   outline Items dragged between them (drag_and_drop_controller — a drop
   posts to the column's URL, which answers with the board morphed back in).
   As many columns as fit, scrolling sideways past that. Lays the kit out;
   draws nothing of its own. */
@layer components {
  .board {
    display: grid;
    gap: 1rem;
    grid-auto-columns: minmax(16rem, 1fr);
    grid-auto-flow: column;
    overflow-x: auto;
    padding-block: 0.25rem 0.5rem;
  }

  /* A lane: a Card, tall enough to drop on while empty, its content taking
     the rest of the lane. */
  .board-column {
    min-block-size: 16rem;
    transition: translate 150ms;

    > .ui-card__content { flex: 1; }
  }

  /* A card in a lane: an outline Item. Its note, when there is one, takes a
     line of its own under the rest (shadcn's ItemFooter, basis-full). */
  .board-card {
    min-inline-size: 0;
  }

  .board-card--movable {
    cursor: grab;
  }

  .board-card__grip {
    user-select: none;
  }

  .board-card__note {
    flex-basis: 100%;
  }

  /* While dragging: the card lifted out goes faint, and the lane it would
     land in is ringed by the kit (ui/app.css). */
  .drag-and-drop__dragged-item {
    opacity: 0.5;
  }

}