/* Vision Board Pictures (ROADMAP-Calcs-PinPin.md PP27) — the picked panel and the gallery under it: two pictures across on
   a phone, three on a tablet, four on a desktop. Every picture keeps its 2:3 box before it loads (width/height set), so
   nothing jumps when it arrives or when an ad slot fills. */
/* one column at every width — the filter, the pictures (the answer), a bar that sticks to the bottom of the screen once
   something is picked, then the panel. (A side panel was tried: on pinpinterest.com the tool card is ~760 px wide, and
   beside a panel the pictures shrank to four ~90 px tiles — seen live, 2026-09-27.) */
.vbp { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "form" "gallery" "bar" "panel"; gap: 16px; }
.vbp-form { grid-area: form; }
.vbp-gallery { grid-area: gallery; }
.vbp-bar { grid-area: bar; }
.vbp-panel { grid-area: panel; }
.vbp-bar { position: sticky; bottom: 10px; z-index: 5; margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--chqt-ink, #191320); color: #fff; font-weight: 700; box-shadow: 0 6px 20px rgba(25, 19, 32, .25); }
.vbp-bar[hidden] { display: none; }
.vbp-bar .chqt-btn { min-height: 44px; }
.vbp-panel { min-height: 0; }
.chqt .vbp-part-h { font-size: 1.15rem; margin: 1.4rem 0 .6rem; }
.vbp-part:first-child .vbp-part-h { margin-top: .2rem; }
.vbp-pics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 560px) { .vbp-pics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vbp-pic { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vbp-pic img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; background: var(--chqt-cream, #f6f2fa); border: 3px solid transparent; box-sizing: border-box; }
.vbp-pic.is-picked img { border-color: var(--chqt-accent, #b3124e); }
.vbp-pic figcaption { font-size: .9rem; line-height: 1.35; color: var(--chqt-ink, #191320); }
.vbp-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.vbp-btns .chqt-btn { flex: 1 1 auto; min-height: 44px; padding: 8px 10px; font-size: .95rem; text-align: center; justify-content: center; }
.vbp-add[aria-pressed="true"] { background: var(--chqt-accent, #b3124e); border-color: var(--chqt-accent, #b3124e); color: var(--chqt-accent-ink, #fff); }
.vbp-strip { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vbp-strip li { position: relative; }
.vbp-strip img { display: block; width: 60px; height: 90px; object-fit: cover; border-radius: 6px; }
/* a 44px tap target around a 28px circle */
.vbp-x { position: absolute; top: -16px; right: -16px; width: 44px; height: 44px; border: 0; background: none; color: #fff; font: 700 16px/1 system-ui, sans-serif; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.vbp-x::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; border: 2px solid #fff; background: var(--chqt-ink, #191320); z-index: -1; }
.vbp-strip li { isolation: isolate; }
.vbp-go { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: .8rem; }
.vbp-go .chqt-hint, .vbp-go .vbp-paper { flex-basis: 100%; margin: 0; }
.vbp-clear { background: transparent; }
@media (max-width: 460px) { .chqt[data-tool="vision-board-pictures"] .chqt-lede { display: none; } }