/* Pinterest Image Size Checker & Resizer (ROADMAP-Calcs-PinPin.md PP11) — the verdict beside the reader's image
   (with the line where a too-tall pin may be cut), and the resizer: the targets, the canvas, the crop slider.
   Everything else is the core stylesheet. */
.pis-check { min-height: 0; }
.pis-add { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.chqt .pis-own-size { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.pis-own { margin: .2rem 0 0; }
.pis-own__frame { position: relative; display: inline-block; max-width: 100%; line-height: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 6px rgba(25, 19, 32, .14); }
/* a replaced element keeps its shape with both maxima: a tall pin fits a phone's screen */
.pis-own__img { display: block; width: auto; height: auto; max-width: 100%; max-height: 240px; }
@media (min-width: 860px) { .pis-own__img { max-height: 360px; } }
/* where a 2:3 frame ends on a picture taller than 2:3 — Pinterest's "might get cut off" line */
.pis-cut { position: absolute; left: 0; right: 0; height: 0; border-top: 3px dashed #b3124e; }
.pis-cut::after { content: "2:3 ends here"; position: absolute; right: 6px; top: 4px; font: 700 12px/1.2 system-ui, sans-serif; color: #fff; background: #b3124e; padding: 2px 6px; border-radius: 4px; }
.pis-notes { list-style: none; margin: .2rem 0 0; padding: 0; }
.pis-notes li { padding: .45rem .7rem; margin: .35rem 0; border-radius: 10px; border-left: 4px solid var(--chqt-line, #ddd5e6); background: #fff; font-size: .95rem; }
.pis-notes li.is-pass { border-left-color: #1e7a4a; }
.pis-notes li.is-fix { border-left-color: #b26b00; }
.pis-notes li.is-fail { border-left-color: #b3124e; }
.pis-targets { flex-wrap: wrap; }
.pis-stage { background: var(--chqt-cream, #f6f2fa); border-radius: 12px; padding: 10px; margin-top: .4rem; }
.pis-canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 60vh; margin: 0 auto; border-radius: 6px; box-shadow: 0 1px 6px rgba(25, 19, 32, .14); }
.pis-pos { margin-top: .6rem; }
/* a range input: 16px text (iPhone zooms on focus under that) and a 44px row to hit */
.pis-range { width: 100%; min-height: 44px; font-size: 16px; accent-color: var(--chqt-accent, #b3124e); }
/* two columns on a wide screen: each as tall as its own content (the check does not stretch to the resizer) */
.pis { align-items: start; }
@media (min-width: 860px) { .pis-canvas { max-height: 560px; } }