/* Before & After Pin Maker (ROADMAP-Calcs-PinPin.md PP94) — on a phone the pin first (its preview is the download), then the photo
   buttons and the choices; on a desktop the pin sits beside them. */
.ba { display: grid; gap: 1rem; }
.ba > * { min-width: 0; }
@media (min-width: 900px) { .ba { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.ba .ba-stage { text-align: center; }
.ba .ba-answer { margin: 0 0 .6rem; font-size: 1.15rem; }
.ba .ba-canvas { display: block; width: 100%; max-width: min(360px, 62vw); height: auto; aspect-ratio: 2 / 3; margin: 0 auto; border-radius: 12px; box-shadow: 0 2px 14px rgba(27, 22, 34, .16); background: #f3f0f6; touch-action: none; cursor: grab; }
.ba .ba-hint { margin: .5rem 0 0; color: var(--chqt-muted, #4c4658); font-size: .92rem; min-height: 1.4em; }
.ba .ba-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .8rem; }
.ba .ba-stage .ba-row { justify-content: center; }
.ba .ba-row .chqt-btn { min-height: 44px; }
.ba .ba-pick.ba-has { box-shadow: inset 0 0 0 2px var(--chqt-accent, #b3124e); }
.ba .ba-own { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .6rem; }
.ba .ba-own[hidden], .ba .ba-title[hidden] { display: none; }
.ba .ba-own label, .ba .ba-title { display: grid; gap: .25rem; font-size: .92rem; }
.ba input[type="text"] { min-height: 44px; font-size: 16px; padding: 0 .7rem; border: 1px solid var(--chqt-line, #ddd5e6); border-radius: 10px; }