/* Pin Templates (ROADMAP-Calcs-PinPin.md PP56) — the niche chips, the count, and a grid of finished pins: two to a row on a
   phone (a pin's 2:3 shape still reads at 170 px wide), four on a desktop. Everything else is the core stylesheet. */
/* one scrolling row of chips on a phone (wrapped, nine chips took four rows and pushed the first pin off the first screen) */
.ptp-groups { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.ptp-groups button { flex: 0 0 auto; white-space: nowrap; }
@media (min-width: 900px) { .ptp-groups { flex-wrap: wrap; overflow: visible; } }
.chqt .ptp-count { font-size: clamp(22px, 5vw, 30px); margin: .7rem 0 .5rem; }
.ptp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem .8rem; }
@media (min-width: 640px) { .ptp-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 980px) { .ptp-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem 1rem; } }
.ptp-card { display: flex; flex-direction: column; min-width: 0; }
.ptp-card[hidden] { display: none; }
.ptp-pic { display: block; line-height: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 6px rgba(25, 19, 32, .16); background: var(--chqt-cream, #f6f2fa); }
/* the box keeps the pin's 2:3 before the picture arrives, so lazy pictures never shift the grid */
.ptp-pic img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; }
/* the app's marketing.css resets headings (`.mkt h2 { margin: 0 }`) — these outrank it */
.chqt .ptp-name { font-size: 1.02rem; line-height: 1.25; margin: .55rem 0 .15rem; }
.chqt .ptp-meta { margin: 0 0 .5rem; color: var(--chqt-muted, #4c4658); font-size: .86rem; line-height: 1.35; }
.chqt .ptp-open { margin-top: auto; width: 100%; justify-content: center; text-align: center; }
.ptp > .chqt-actions { margin-top: 1.4rem; }
/* two pins to a row on a phone: "Open template" stays on one line at 16px in a 175 px column */
@media (max-width: 639px) { .chqt .ptp-open { padding-left: .4rem; padding-right: .4rem; white-space: nowrap; } }