/* Vision Board Maker (ROADMAP-Calcs-PinPin.md PP8) — and the Mood Board Maker, which `uses` it: the
   board on the left (on top on a phone), the controls beside it. Everything else is the core stylesheet. */
.vbm { display: grid; gap: 1.2rem; }
@media (min-width: 900px) { .vbm { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } .vbm-main { position: sticky; top: 1rem; } }
.vbm-stage { background: var(--chqt-cream, #f6f2fa); border-radius: 12px; padding: 10px; }
/* width/height auto + both maxima: a replaced element keeps its shape, so a tall phone board fits the
   screen without letterboxing (a tap is measured against the canvas's own box) */
.vbm-canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 78vh; margin: 0 auto; border-radius: 8px; box-shadow: 0 1px 6px rgba(25,19,32,.14); touch-action: pan-y; cursor: pointer; }
.vbm-canvas--pan { touch-action: none; cursor: grab; }
.vbm-hint { margin: .5rem 0 0; font-size: .95rem; min-height: 1.4em; }
.vbm-sel { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .6rem; }
.vbm-sel .chqt-hint { flex-basis: 100%; margin: 0; }
.vbm-add { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .6rem; }
.vbm-add .chqt-hint { margin: 0; }
.vbm-areas { flex-wrap: wrap; }
.vbm-other { margin-top: .5rem; }
.vbm-bgs { display: flex; flex-wrap: wrap; gap: 8px; }
.vbm-bg { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--chqt-line, #ddd5e6); cursor: pointer; padding: 0; }
.vbm-bg[aria-pressed="true"] { border-color: var(--chqt-ink, #191320); box-shadow: 0 0 0 3px var(--chqt-accent, #b3124e); }
.vbm-sizes { flex-wrap: wrap; }
/* the Mood Board Maker's "Add a color": the system picker as a 44px swatch */
.vbm-pick { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: .5rem; cursor: pointer; font-weight: 600; }
.vbm-pick input[type="color"] { width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--chqt-line, #ddd5e6); border-radius: 10px; background: none; font-size: 16px; cursor: pointer; }
.vbm textarea { width: 100%; min-height: 88px; font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--chqt-line, #ddd5e6); box-sizing: border-box; }
/* "Print it": the board, alone on the page (the @media print rule is added by ui.js only while printing) */
.chqt-vbm-print { display: none; }