/* Photo-pendant page. Layout, fields, swatches, message bubble and order bar come from ring.css; this file adds the
   stage that hosts the 3D module, the upload control near the top, and the framing sliders. */

.pp-stage { position: relative; background: var(--stone); aspect-ratio: 1 / 1; max-height: calc(100vh - 150px); width: 100%; overflow: hidden; }
@media (max-width: 960px) { .pp-stage { aspect-ratio: 5 / 4; max-height: none; } }
@media (max-width: 560px) { .pp-stage { aspect-ratio: 1 / 1; } }
.pp-stage .pp-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.5s ease; }
.pp-stage.is-live .pp-poster { opacity: 0; pointer-events: none; }
.pp-mount { position: absolute; inset: 0; }
.pp-stage .badge { position: absolute; left: 12px; bottom: 12px; z-index: 2; background: var(--ground); color: var(--ink); padding: 5px 10px 4px; pointer-events: none; }
.pp-status { position: absolute; left: 12px; bottom: 12px; z-index: 3; max-width: calc(100% - 24px); font: 400 var(--t-12)/1.4 var(--mono); color: var(--ink); background: var(--ground); padding: 5px 10px 4px; }
.pp-status:empty { display: none; }
.pp-stage:has(.pp-status:not(:empty)) .badge { visibility: hidden; }
.pp-stage.is-drag { outline: 2px dashed var(--ink); outline-offset: -8px; }

/* upload: a bordered button under the title, so it is on screen before the viewer on phones */
.pp-upload-row { position: relative; }
.pp-upload { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px; border: 1px solid var(--ink); background: var(--ground); color: var(--ink); font: 600 var(--t-15) var(--body); cursor: pointer; }
.pp-upload svg { width: 20px; height: 20px; flex: none; }
.pp-upload:hover { background: var(--ink); color: var(--ground); }
.pp-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.pp-file:focus-visible + .pp-upload, .pp-upload-row:focus-within .pp-upload { outline: 2px solid var(--ink); outline-offset: 3px; }
.pp-privacy { font-size: var(--t-15); color: var(--muted); }

/* option groups: equal-width segments for 2 or 3 choices */
.pp-seg { grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); }
.pp-seg button { min-height: 56px; align-content: center; }
.pp-seg .mm { font: 400 var(--t-12) var(--mono); letter-spacing: 0; text-transform: none; }
.pp-seg button[aria-pressed="true"] .mm { color: inherit; opacity: 0.85; }

/* framing sliders */
.pp-adjust { border: 0; border-top: 1px solid var(--line); margin: 0; padding: var(--s-16) 0 0; display: grid; gap: 4px; min-width: 0; }
.pp-adjust legend { padding: 0; margin-bottom: 8px; width: 100%; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-weight: 600; font-size: var(--t-15); }
.pp-adjust[disabled] .pp-range { opacity: 0.45; }
.pp-range { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) 4.5em; align-items: center; gap: 12px; min-height: 44px; }
.pp-range label { font-size: var(--t-15); }
.pp-range input[type="range"] { width: 100%; accent-color: var(--ink); min-height: 32px; }
.pp-range output { font: 400 var(--t-12) var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); text-align: right; }
.pp-adjust .textlink { justify-self: start; }
.pp-confirm { font-size: var(--t-15); color: var(--muted); }
@media (max-width: 960px) { .pp-confirm { order: 8; } }

@media (prefers-reduced-motion: reduce) { .pp-stage .pp-poster { transition: none; } }

/* Viewer hint: one sentence per input type (touch phones vs mouse), no script. */
.pp-hint-touch { display: none; }
@media (pointer: coarse) { .pp-hint-touch { display: inline; } .pp-hint-mouse { display: none; } }