/* Job photos (Version 20): a stage picker, one big "take photos" button, and a grid per stage. */
.job-photos { display: grid; gap: 12px; }
.jp-head h3 { margin: 0; display: flex; align-items: center; gap: 8px; }
.jp-head h3 span { min-width: 24px; padding: 1px 8px; border-radius: 999px; background: #eef1f5; color: #101827; font-size: .78rem; text-align: center; }
.jp-add { display: grid; gap: 10px; }
.jp-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #c4ccd7; border-radius: 11px; overflow: hidden; }
.jp-stages button { min-height: 44px; border: 0; border-left: 1px solid #c4ccd7; background: #fff; color: #3d4a5d; font: inherit; font-size: .86rem; font-weight: 750; cursor: pointer; }
.jp-stages button:first-child { border-left: 0; }
.jp-stages button.is-active { background: #101827; color: #fff; }
.jp-stages button:focus-visible { outline: 3px solid #f4c430; outline-offset: -3px; }
.jp-caption { min-height: 44px; padding: 0 12px; border: 1px solid #c4ccd7; border-radius: 10px; font: inherit; }
.jp-pick { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; font-size: 1rem; cursor: pointer; }
.jp-pick:focus-within { outline: 3px solid #f4c430; outline-offset: 2px; }
.jp-note { margin: 0; color: var(--muted, #5b6472); }
.jp-waiting { padding: 10px 12px; border: 1px dashed #c4ccd7; border-radius: 10px; background: #fffbea; }
.jp-waiting > span { color: #7a5200; }
.jp-group h4 { margin: 4px 0 8px; font-size: .9rem; }
.jp-group h4 span { color: var(--muted, #5b6472); font-weight: 600; }
.jp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.jp-thumb { position: relative; aspect-ratio: 1; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 8px; background: #e5e9ef; cursor: pointer; }
.jp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jp-thumb:focus-visible { outline: 3px solid #f4c430; outline-offset: 2px; }
.jp-thumb.is-waiting { opacity: .75; cursor: default; }
.jp-thumb.is-waiting figcaption { position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 6px; background: rgba(16, 24, 39, .8); color: #fff; font-size: .7rem; font-weight: 700; }
.jp-thumb.is-missing::after { content: "Unavailable"; position: absolute; inset: 0; display: grid; place-items: center; color: #5b6472; font-size: .75rem; }
.jp-viewer { width: min(100vw, 1100px); max-width: 100vw; height: min(100dvh, 900px); max-height: 100dvh; margin: auto; padding: 0; border: 0; border-radius: 12px; background: #0b111d; color: #f8f7f2; }
.jp-viewer::backdrop { background: rgba(5, 8, 15, .85); }
.jp-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.jp-viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: max(10px, env(safe-area-inset-top)) 12px 10px; }
.jp-viewer-bar > div { display: flex; gap: 8px; }
.jp-viewer-bar .button { min-height: 40px; text-decoration: none; display: inline-flex; align-items: center; }
/* The photo always fits between the top bar and the note, whatever its shape. */
.jp-viewer-stage { position: relative; min-height: 0; overflow: hidden; }
.jp-viewer-stage img { position: absolute; inset: 0 8px; width: calc(100% - 16px); height: 100%; object-fit: contain; }
.jp-nav { position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 2rem; cursor: pointer; }
.jp-nav:disabled { opacity: .25; cursor: default; }
.jp-nav[data-jpv="prev"] { left: 8px; } .jp-nav[data-jpv="next"] { right: 8px; }
.jp-viewer-meta { margin: 0; padding: 10px 16px max(14px, env(safe-area-inset-bottom)); color: #cbd2dc; font-size: .9rem; line-height: 1.45; }
.jp-viewer-meta b { color: #f4c430; }
@media (max-width: 550px) {
  .jp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jp-viewer { border-radius: 0; height: 100dvh; }
}