/* What's new: reuses roadmap.css (header, credit, drift, framed boxes); only the media viewer lives here. */
#list .view { padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.up-stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--line); }
.up-stage img, .up-stage video { max-width: 100%; max-height: 100%; object-fit: contain; display: block; cursor: zoom-in; }
.up-kind { position: absolute; left: 6px; top: 6px; font: 9px "FK Raster", monospace; text-transform: uppercase; letter-spacing: var(--pixel-tracking); background: var(--ink); color: var(--paper); padding: 2px 5px; }
.up-zoom { position: absolute; right: 6px; top: 4px; font-size: 14px; color: var(--paper); background: var(--ink); width: 20px; height: 20px; display: grid; place-items: center; pointer-events: none; }
.up-thumbs { display: flex; gap: 6px; justify-content: center; }
.up-thumbs:empty { display: none; }
.up-thumb { font: 10px "FK Raster", monospace; text-transform: uppercase; letter-spacing: var(--pixel-tracking); background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); box-shadow: 2px 2px 0 var(--shadow); padding: 2px 8px; cursor: pointer; }
.up-thumb.on { background: var(--ink); color: var(--paper); }
.up-nav { padding-top: 4px; }

/* Full-screen viewer */
.up-full { position: fixed; inset: 0; z-index: 50; background: rgba(10, 11, 13, .96); display: grid; place-items: center; }
.up-full[hidden] { display: none; }
.up-full img, .up-full video { max-width: 96vw; max-height: 88vh; object-fit: contain; cursor: zoom-out; border: 1.5px solid #f4f1ea; }
.up-full .page-btn { position: absolute; color: #f4f1ea; }
.up-full .arrow { border-color: #f4f1ea; color: #f4f1ea; box-shadow: 2px 2px 0 #000; }
.up-full-prev { left: 10px; top: 50%; } .up-full-next { right: 10px; top: 50%; }
.up-full-close { right: 10px; top: 10px; }
.up-full-count { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; color: #c1c8ce; }
/* Media always fits inside its frame (never pushes thumbnails or arrows out) */
.up-stage { display: block; overflow: hidden; }
.up-stage img, .up-stage video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
.up-kind, .up-zoom { z-index: 1; }
/* One cursor for "open full screen": the normal hand, on the image and on the corner button */
.up-stage img, .up-stage video { cursor: pointer; }
.up-zoom { pointer-events: auto; cursor: pointer; border: 1.5px solid var(--paper); box-shadow: 2px 2px 0 rgba(0,0,0,.4); font: inherit; padding: 0; }
.up-zoom:hover { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.up-full img, .up-full video { cursor: pointer; }
.page-btn:not(:disabled), .up-thumb, .back, .area-head, .mini, .tabs button { cursor: pointer; }
.page-btn:disabled { cursor: default; }
/* Fill the frame with no gaps: crop to the frame's shape, anchored at the top of the screen.
   The full, uncropped image is always one tap away in full screen. */
.up-stage img, .up-stage video { object-fit: cover; object-position: top center; }
.up-stage { background: var(--ink); }