/* Passport & Visa Photo Maker (ROADMAP-Calcs-Travel.md TM39): the marking stage, the sliders, the template and the
   cropped preview. Everything else is the core stylesheet. */
.pp { align-items: start; }
.pp-add { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .6rem; }
.pp-step { min-height: 1.4em; font-weight: 600; }
.pp-stage { background: var(--chqt-cream, #fbf6ec); border-radius: 12px; padding: 10px; margin-top: .4rem; }
/* the photo to tap: never wider than the stage, never taller than most of a phone's screen */
.pp-canvas { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: 6px; cursor: crosshair; touch-action: manipulation; }
.pp-slide { margin-top: .6rem; }
/* a range input: 16px text (iPhone zooms on focus under that) and a 44px row to hit */
.pp-range { width: 100%; min-height: 44px; font-size: 16px; accent-color: var(--chqt-accent, #d79d32); }
.pp-view { display: flex; justify-content: center; margin: .4rem 0; }
.pp-tpl { width: 100%; max-width: 220px; height: auto; }
.pp-out { max-width: 100%; border-radius: 4px; box-shadow: 0 1px 6px rgba(30, 26, 26, .18); }
.pp-notes { list-style: none; margin: .2rem 0 0; padding: 0; }
.pp-notes li { padding: .45rem .7rem; margin: .35rem 0; border-radius: 10px; border-left: 4px solid var(--chqt-line, #eadfca); background: #fff; font-size: .95rem; }
.pp-notes li.is-pass { border-left-color: #1e7a4a; }
.pp-notes li.is-fix { border-left-color: #b26b00; }