/* Preview page layout. Passes and phones come from cards.css. */
.pv-wrap { max-width: 1120px; margin: 0 auto; padding: 32px 32px 72px; }
.pv-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.pv-link { font-size: 14px; color: var(--link); text-decoration: none; }
.pv-link:hover { text-decoration: underline; }
.pv-header { margin: 24px 0 36px; }
.pv-header h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.pv-header .sub { margin: 12px 0 0; max-width: 60ch; font-size: 17px; color: var(--text-2); }

.pv-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pv-controls label:first-child { grid-column: 1 / -1; }
.pv-controls label { font-size: 13px; color: var(--text); margin: 0; }
.pv-controls label[hidden] { display: none; }
.pv-controls input, .pv-controls select { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font-size: 14px; }
.pv-controls select { padding-right: 40px; }

@media (max-width: 600px) { .pv-wrap { padding: 24px 20px 56px; } }

/* phones: 16px text and 44px targets */
@media (max-width: 719px) {
  .pv-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-size: 16px; }
  .pv-controls label { font-size: 16px; }
  .pv-controls input, .pv-controls select { min-height: 44px; font-size: 16px; }
  .studio-current { font-size: 16px; }
}