/* The wait and the reveal: his picks going on him (2026-09-27).
 *
 * One piece, two pages: the photo door (start_photo.html) and the Fit
 * Passport's first front photo (fit_passport.html). Markup:
 * partials/photo_wait.html. Behaviour: static/js/photo_wait.js.
 * Decision record: docs/decisions/2026-09-25-photo-door.md.
 *
 * Every rule sits under [data-photo-wait], the wait's and the reveal's own
 * root: /fit is a Turbo page, Turbo keeps a stylesheet it appended to <head>,
 * and the product page's own .pd-* classes must never meet these rules.
 */

/* The wait's column: the door's own (start_photo.html draws the door's other
   screens with the same rules). */
[data-photo-wait].pd-main { max-width: 480px; margin: 0 auto; padding: 24px 16px calc(32px + max(env(safe-area-inset-bottom), var(--dz-inset-bottom, 0px))); display: flex; flex-direction: column; gap: 14px; }
[data-photo-wait] .pd-h2 { margin: 0; font-weight: 800; font-size: var(--t-20); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
/* A screen's title is an H1: uppercase at -0.02em (type rule 7). The
   retake verdict shares .pd-h2 as a <p> and stays a sentence. */
[data-photo-wait] h1.pd-h2 { font-size: var(--t-page); text-transform: uppercase; letter-spacing: -0.02em; }
[data-photo-wait] .pd-sub { margin: 0; font-size: 14px; line-height: 1.5; color: var(--body); }
[data-photo-wait] .pd-error { margin: 0; min-height: 1em; font-size: 13px; line-height: 1.45; color: var(--state-stop, #A33); }
[data-photo-wait] .pd-error:empty { display: none; }
/* The ladder's .btn and these flex screens set display, which beats the
   UA's [hidden]; hidden must still mean hidden. */
[data-photo-wait][hidden], [data-photo-wait] [hidden] { display: none !important; }

/* The wait ("his pieces"): his photo small beside the heading, his
   picks under it, the black button low. It fills the window under
   the header (at most 69px plus the status bar). Without cards (the
   door's picks did not load, none can be shown, the door closed) the
   block sits in the middle. */
[data-photo-wait].pd-main[data-pd-screen="waiting"] { min-height: calc(100svh - 69px - var(--dz-safe-top, 0px)); justify-content: center; }
[data-photo-wait].pd-main[data-pd-screen="waiting"][data-pd-with-cards] { justify-content: flex-start; }
[data-photo-wait] .pd-wait-end { display: flex; flex-direction: column; gap: 14px; }
[data-photo-wait][data-pd-with-cards] .pd-wait-end { margin-top: auto; }
/* A ladder link under the button: centred on its words, 14px clear of it
   (the gap), so its 44px reach stays its own (docs/design/buttons.md). */
[data-photo-wait] .pd-wait-end .btn.link { align-self: center; }
[data-photo-wait] .pd-wait-top { display: flex; align-items: center; gap: 12px; }
[data-photo-wait] .pd-wait-top img { width: 64px; aspect-ratio: 3 / 4; object-fit: cover; background: var(--elevated); flex: none; display: block; }
[data-photo-wait] .pd-wait-copy { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
[data-photo-wait] .pd-cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: 6px; }
/* One piece alone keeps the size it has in a pair, centred. */
[data-photo-wait] .pd-card:only-child { width: calc(50% - 4px); justify-self: center; }
/* A card is a real button: ready or failed, a tap opens that look. */
[data-photo-wait] .pd-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
[data-photo-wait] .pd-card:disabled { cursor: default; }
[data-photo-wait] .pd-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
[data-photo-wait] .pd-card-frame { position: relative; display: block; aspect-ratio: 3 / 4; background: var(--elevated); overflow: hidden; }
[data-photo-wait] .pd-card-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* The look crossfades in over the product once its picture loads. */
[data-photo-wait] .pd-card-look { object-position: center top; opacity: 0; transition: opacity .6s ease; }
[data-photo-wait] .pd-card[data-look] .pd-card-look { opacity: 1; }
[data-photo-wait] .pd-card-tag { position: absolute; top: 6px; left: 6px; max-width: calc(100% - 12px); }  /* a .dz-tag */
[data-photo-wait] .pd-card-brand { display: flex; min-width: 0; font-size: var(--t-10); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* One line: only the brand gives way, and the price follows it flush.
   CSS alone ends a cut brand on a glyph boundary and leaves up to a
   letter of blank before the price, so photo_wait.js trims the words
   to fit and then lets the brand shrink to them ([data-fit]). */
[data-photo-wait] .pd-card-brand span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
[data-photo-wait] .pd-card-brand span:first-child[data-fit] { flex: none; }
[data-photo-wait] .pd-card-brand span + span { flex: none; }
[data-photo-wait] .pd-card-name { font-size: var(--t-12); font-weight: 700; line-height: 1.3; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Each card's wait is the shared dressing bar (.dz-dress-bar, app-shell.css). */
@media (prefers-reduced-motion: reduce) {
    [data-photo-wait] .pd-card-look { transition: none; }
}

/* One hairline per render target: the door's progress line and the reveal's count. */
[data-photo-wait] .pd-seg { display: flex; gap: 6px; }
[data-photo-wait] .pd-seg i { flex: 1; height: 2px; background: var(--border); display: block; }
[data-photo-wait] .pd-seg i.on { background: var(--ink); }

/* The reveal: one stage, one strip, one black button. Each page lays it
   out under its own header (the door: html.pd-reveal-open; the Fit
   Passport: .fp-revealing). */
[data-photo-wait].pd-reveal { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #000; }
[data-photo-wait] .pd-stage { position: relative; flex: 1; min-height: 0; background: var(--elevated); overflow: hidden; touch-action: pan-y; }
[data-photo-wait] .pd-stage img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
[data-photo-wait] .pd-stage-top { position: absolute; top: 0; left: 0; right: 0; padding: 14px 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
[data-photo-wait] .pd-stage-top .pd-seg { width: 88px; }
[data-photo-wait] .pd-stage-top .pd-seg i { background: rgba(255, 255, 255, 0.55); }
[data-photo-wait] .pd-stage-top .pd-seg i.on { background: #fff; }
[data-photo-wait] .pd-stage.is-note .pd-stage-top .pd-seg i { background: var(--border); }
[data-photo-wait] .pd-stage.is-note .pd-stage-top .pd-seg i.on { background: var(--ink); }
[data-photo-wait] .pd-stage-note { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 32px 24px; background: var(--elevated); color: var(--ink); }
[data-photo-wait] .pd-stage-note p { margin: 0; }
[data-photo-wait] .pd-stage-note .lead { font-size: var(--t-20); font-weight: 800; line-height: 1.2; }
[data-photo-wait] .pd-stage-note .rest { font-size: 14px; line-height: 1.5; color: var(--body); }
/* The failed render's Try again sits above the prev/next tap zones. */
[data-photo-wait] .pd-stage-note .btn { position: relative; z-index: 2; }
[data-photo-wait] .pd-nav { position: absolute; top: 0; bottom: 0; width: 30%; background: none; border: 0; padding: 0; cursor: pointer; }
[data-photo-wait] .pd-nav.prev { left: 0; }
[data-photo-wait] .pd-nav.next { right: 0; }
[data-photo-wait] .pd-strip { background: #fff; padding: 14px 16px calc(16px + max(env(safe-area-inset-bottom), var(--dz-inset-bottom, 0px))); display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--ink); }
[data-photo-wait] .pd-strip-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
[data-photo-wait] .pd-strip-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
[data-photo-wait] .pd-strip-brand { font-size: 10px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--faint); }
[data-photo-wait] .pd-strip-name { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Save (the 44px bookmark) and "Not for me" (a labelled ladder
   button: it hides the product, it does not close anything), 14px
   apart. */
[data-photo-wait] .pd-strip-ctl { display: flex; align-items: center; gap: 14px; flex: none; }
[data-photo-wait] .pd-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--border); padding: 0; cursor: pointer; color: var(--ink); }
[data-photo-wait] .pd-icon[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
[data-photo-wait] .pd-icon:disabled { opacity: 0.4; cursor: default; }
/* Wider than a phone: the black runs the full width and the stage and
   its strip sit in the middle, one 480px column. */
@media (min-width: 768px) {
    /* Keep the former three-card width and centre the pair. */
    [data-photo-wait] .pd-cards { grid-auto-columns: minmax(0, 144px); justify-content: center; }
    [data-photo-wait] .pd-card:only-child { width: auto; }
    [data-photo-wait].pd-reveal { align-items: center; }
    [data-photo-wait].pd-reveal > .pd-stage, [data-photo-wait].pd-reveal > .pd-strip { width: 100%; max-width: 480px; }
    [data-photo-wait].pd-reveal > .pd-strip { border-top: 0; }
}