/* Proof photos (#389): the "Ask for a photo" switch, the photo sheet, thumbnails and the viewer. */
.photo-switch input[role="switch"] { appearance: none; width: 2.75rem; min-height: 1.5rem; height: 1.5rem; padding: 0; border-radius: 1rem; border: 1px solid #67746a; background: var(--outline); position: relative; cursor: pointer; }
.photo-switch input[role="switch"]::after { content: ""; position: absolute; top: .125rem; left: .125rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: #fff; transition: left .15s; }
.photo-switch input[role="switch"]:checked { background: var(--primary); border-color: var(--primary); }
.photo-switch input[role="switch"]:checked::after { left: 1.45rem; background: var(--on-primary); }
.photo-switch-help { color: inherit; opacity: .8; font-size: .95rem; margin-top: 0; }
.routine-steps .photo-switch { margin: .25rem 0; font-size: .95rem; }

.photo-capture-list, .photo-thumbnails { list-style: none; padding: 0; margin: .75rem 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.photo-capture-list li { display: grid; gap: .25rem; justify-items: start; }
.photo-capture-list img { width: 7.5rem; height: 7.5rem; object-fit: cover; border-radius: .75rem; border: 1px solid var(--outline); }
.photo-capture-list button { margin: 0; min-height: 2.75rem; }
.photo-capture-actions, .photo-capture-finish { display: flex; flex-wrap: wrap; gap: .5rem; }
.photo-capture-actions button, .photo-capture-finish button { margin: 0; }
.photo-capture-finish { margin-top: 1rem; }
.photo-count { font-weight: 600; margin: .5rem 0 0; }
.photo-error:empty { display: none; }
.photo-error { color: #a51e19; }

.proof-photos { border-top: 1px solid var(--outline); padding-top: .5rem; }
.proof-photos h3 { margin: .25rem 0; font-size: 1rem; }
/* A review card with photos: the card's own button and its photos share one border. */
.review-queue-item { margin: .75rem 0; border: 1px solid var(--outline, #a9b0a9); border-radius: 1.25rem; background: var(--card, #fffefa); overflow: hidden; }
.review-queue-item > .review-queue-row { margin: 0; border: 0; border-radius: 0; }
.review-photos { border-top: 0; margin: 0; padding: 0 1.25rem 1.25rem; }
.photo-thumbnails li { display: grid; gap: .25rem; }
.photo-thumbnail { display: block; width: 5.5rem; height: 5.5rem; padding: 0; margin: 0; overflow: hidden; border-radius: .75rem; border: 1px solid var(--outline); background: var(--outline); }
.photo-thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-thumbnail.loading { display: inline-block; }
.photo-note { margin: .25rem 0; }
/* A photo the server no longer has reads like the other notes, not as a gap in the thumbnails. */
.photo-thumbnails:not(:has(.photo-thumbnail)), .photo-thumbnails:not(:has(.photo-thumbnail)) li { display: block; margin: 0; }


.photo-viewer { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: 0; display: none; }
.photo-viewer[open] { display: grid; grid-template-rows: auto auto 1fr auto auto auto; gap: .5rem; }
.photo-viewer > h1 { font-size: 1.5rem; margin: 0; }
.photo-viewer > button:first-of-type { justify-self: start; margin: 0; }
.photo-viewer-stage { display: grid; place-items: center; min-height: 0; }
.photo-viewer-stage img { width: 100%; height: 100%; max-height: calc(100dvh - 16rem); object-fit: contain; border-radius: .5rem; }
.photo-viewer-position { text-align: center; margin: 0; }
.photo-viewer-nav { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.photo-viewer-nav button { margin: 0; }
.photo-viewer-status:empty { display: none; }
.photo-viewer .danger { background: #a51e19; color: #fff; border-color: #a51e19; }
@media (prefers-color-scheme: dark) { .photo-viewer .danger { background: #ffaaa5; color: #3b0b09; border-color: #ffaaa5; } .photo-error { color: #ffaaa5; } }