/* Screenshots (Phase 3 E): the gallery page /s/<key> (grid, lightbox,
   "All images as BBCode") and the upload page /screenshots/new (preview grid).
   The page head, Share popover and ⋯ menu come from viewer.css. */

/* ---- gallery grid ---- */
.shots-grid { list-style: none; margin: 16px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.shots-grid li { min-width: 0; display: grid; gap: 4px; align-content: start; }
.shots-grid a.shot { display: block; border-radius: 0; overflow: hidden; background: var(--line); outline-offset: 2px; }
.shots-grid a.shot:focus-visible { outline: 3px solid var(--accent); }
.shots-grid img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #000; transition: opacity .15s; }
.shots-grid a.shot:hover img { opacity: .85; }
.shot-meta { font-size: 13px; overflow-wrap: anywhere; }
.shot-label { font-weight: 600; }
.description { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- All images as BBCode ---- */
.all-codes { margin: 24px 0 8px; max-width: 980px; }
.all-codes h2 { margin: 0 0 2px; font-size: 16px; }
.all-codes p { margin: 0 0 6px; }
.all-codes .share-panel textarea { min-height: 5.5em; }

/* ---- lightbox ---- */
dialog.lightbox { width: min(1600px, calc(100vw - 24px)); max-width: none; height: calc(100vh - 24px); max-height: none; padding: 0; border: 1px solid var(--line); border-radius: 0; background: var(--panel); color: var(--fg); overflow: hidden; }
dialog.lightbox[open] { display: flex; flex-direction: column; }
dialog.lightbox::backdrop { background: rgba(0, 0, 0, .85); }
.lb-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--line); min-width: 0; }
.lb-title { margin: 0; font-size: 16px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-count { font-size: 13px; white-space: nowrap; }
.lb-close { border: 0; background: none; font-size: 26px; line-height: 1; padding: 2px 10px; }
.lb-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #000; touch-action: pan-y pinch-zoom; }
.lb-img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lb-img.loading { opacity: .6; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; width: 48px; height: 64px; padding: 0; border: 0; border-radius: 0; font-size: 34px; line-height: 1; color: #fff; background: rgba(0, 0, 0, .45); }
.lb-nav:hover, .lb-nav:focus-visible { background: rgba(0, 0, 0, .75); }
.lb-prev { left: 8px; }
.lb-next { right: 8px; }
.lb-foot { padding: 8px 16px 10px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.lb-info { margin: 0; font-size: 14px; }
.lb-copy { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lb-copy button { padding: 4px 10px; font-size: 13px; }
.lb-open { margin-left: auto; }
.lb-status { margin: 0; min-height: 1.4em; }

/* ---- upload page ---- */
.shots-drop { padding: 36px 24px; text-align: center; }
.shots-drop .row { justify-content: center; }
.shots-upload.has-files .shots-drop { padding: 16px 20px; }
.shots-meta { margin-top: 12px; }
.shots-preview { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 10px; }
.shot-item { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: 0; background: var(--panel); min-width: 0; position: relative; }
.shot-item.dragging { opacity: .45; }
.shot-item.drop-before { box-shadow: -4px 0 0 var(--accent); }
.shot-item.drop-after { box-shadow: 4px 0 0 var(--accent); }
.shot-item.error, .shot-item.invalid { border-color: var(--bad); }
.shot-item.valid, .shot-item.uploaded { border-color: color-mix(in srgb, var(--ok) 60%, var(--line)); }
.shot-thumb { display: block; cursor: grab; }
.shot-thumb[draggable="false"] { cursor: default; }
.shot-thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: 0; }
.shot-body { display: grid; gap: 2px; min-width: 0; }
.shot-label-input { width: 100%; min-width: 0; padding: 3px 6px; }
.shot-file { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot-item .state { font-size: 12px; }
.shot-item .state.error, .shot-item .state.invalid { color: var(--bad); }
.shot-item .state.uploaded, .shot-item .state.valid { color: var(--ok); }
.shot-ops { display: flex; gap: 4px; justify-content: flex-end; }
.shots-upload .rejected ul { margin: 4px 0; padding-left: 1.2em; color: var(--bad); overflow-wrap: anywhere; }

@media (max-width: 600px) {
  dialog.lightbox { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; border: 0; }
  .lb-nav { width: 40px; height: 56px; font-size: 28px; }
  .lb-foot { padding: 6px 10px 8px; }
  .lb-open { margin-left: 0; }
  .shots-drop { padding: 20px 12px; }
}

/* ---- one image's page (/s/<key>/<n>) ---- */
.shot-page-head h1 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.shot-page-head p { margin: 2px 0; }
.shot-page-img { margin: 12px 0; text-align: center; background: #000; }
.shot-page-img img { display: inline-block; max-width: 100%; height: auto; max-height: calc(100vh - 220px); object-fit: contain; vertical-align: middle; }
.shot-page-nav { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.shot-codes { max-width: 980px; margin: 16px auto 8px; display: grid; gap: 6px; }
.shot-code { display: grid; grid-template-columns: 110px 1fr auto; gap: 8px; align-items: center; }
.shot-code input { min-width: 0; font: 13px var(--mono); }
.shot-code-status { margin: 0; min-height: 1.4em; }
@media (max-width: 600px) { .shot-code { grid-template-columns: 1fr auto; } .shot-code label { grid-column: 1 / -1; } }