/*
 * Picker grid — column-major flow used by the form-layout question/
 * block picker, the case-layout property/block picker, and the case-
 * schema property type picker. Items flow top-to-bottom in each
 * column instead of left-to-right across rows; reading down an
 * alphabetical column is faster than zig-zagging.
 *
 * `column-width: 220px` (the second value in the `columns` shorthand)
 * sets a per-column minimum, so the count auto-collapses to 2 then 1
 * on narrow viewports without a media query.
 */

.picker-grid {
  columns: 3 220px;
  column-gap: 0.5rem;
}

.picker-grid > * {
  break-inside: avoid;
  margin-bottom: 0.5rem;
}

/*
 * Palette multi-column flow — Typeform-style (#104). Each direct child
 * is a category SECTION (subheader + vertical list of tiles), and the
 * container flows sections side-by-side into 3 columns. Wider column-
 * gap than `.picker-grid` so sections read as discrete groups instead
 * of a continuous run of tiles.
 */
.palette-multicol {
  columns: 3 240px;
  column-gap: 1.5rem;
}

.palette-multicol > * {
  break-inside: avoid;
  margin-bottom: 1.25rem;
}

/*
 * Hover / focus tint on every picker tile (Recommended rail + grouped
 * categories + Blocks) — gives the row a clear "you are over me"
 * affordance on top of Tabler's `.card-link-pop` translate effect.
 * Uses the same secondary-tint Tabler applies on
 * `.list-group-item-action:hover` so the picker matches the rest of
 * the app's hover language. `--tblr-bg-surface-secondary` resolves
 * to gray-50 — visually identical to the card's white background —
 * so we use the rgba(secondary, 0.08) token instead. Scoped to the
 * picker so it doesn't leak to unrelated `.card-link` elsewhere.
 */
.palette-multicol .card-link,
[data-question-picker-recommended] .card-link {
  transition: background-color 0.12s ease-in-out;
}

.palette-multicol .card-link:hover,
.palette-multicol .card-link:focus-visible,
[data-question-picker-recommended] .card-link:hover,
[data-question-picker-recommended] .card-link:focus-visible {
  background-color: rgba(var(--tblr-secondary-rgb), 0.08);
}