/* photo-detail.css — shared enlarge-photo viewer (2026-07-31, per Owen:
   "group the long press, clicking and enlarging a photo, and getting out of
   both altogether then pull these features across all other pages").
   Originally Home's own hand-rolled #detail-view (index.html) — pulled out
   here, alongside the matching JS in js/components/photoDetailComponent.js,
   so Chapters/Core/Refine get the exact same tap-to-enlarge viewer Home
   already had, instead of each growing (or lacking) their own copy. Same
   shared-file pattern as action-sheet.css/bottom-bar.css: one file, linked
   wherever the viewer is needed. Needs --bg-detail defined in the page's
   :root/[data-theme="light"] blocks (see index.html for the reference
   values) — pages that had never needed a photo viewer before didn't carry
   that variable, so it was added alongside this file. */

.photo-detail{position:absolute;inset:0;background:var(--bg-detail,#050505);border-radius:26px;z-index:30;display:flex;flex-direction:column;opacity:0;transform:translateY(18px);pointer-events:none;transition:opacity .22s ease,transform .22s ease;overflow:hidden;}
.photo-detail.open{opacity:1;transform:translateY(0);pointer-events:all;}
/* 2026-08-01 REVERT: back to the separate "immersive" system (tap-only,
   top+meta together) after the merged chrome-visibility version was
   linked to the app becoming unresponsive. pdv-top loses pointer-events
   too — nothing to tap there while it's invisible. pdv-filmstrip/pdv-meta
   deliberately keep pointer-events (swiping up while everything's hidden
   should bring "both the top and the photo scroller" back) — invisible
   but still swipeable, so the up-swipe wired in photoDetailComponent.js
   can be felt even though nothing's drawn there yet. */
.photo-detail.immersive .pdv-top{opacity:0;pointer-events:none;}
.photo-detail.immersive .pdv-filmstrip,
.photo-detail.immersive .pdv-meta,
.photo-detail.immersive .pdv-comments-panel{opacity:0;}
.pdv-top{min-height:72px;display:flex;align-items:flex-start;justify-content:space-between;padding:calc(env(safe-area-inset-top, 0px) + 40px) 14px 12px;flex-shrink:0;transition:opacity .22s ease;}
.pdv-right{display:flex;align-items:center;gap:8px;}
.pdv-btn{width:34px;height:34px;border-radius:50%;border:0.5px solid var(--border-default);background:rgba(28,28,30,0.8);color:var(--text-primary);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.pdv-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:#000;touch-action:none;position:relative;overflow:hidden;}
/* width/height:100% + object-fit:contain, not max-width/max-height (2026-08-01,
   per Owen: "can we make the photos scale to the max size without being cut
   off") — max-width/max-height can only shrink an image that's bigger than
   the stage, never grow one that's smaller, so a lower-res source (see the
   shareImageBlob fix in photoDetailComponent.js) still rendered tiny and
   letterboxed. Forcing the element to 100%/100% and letting object-fit scale
   the actual image content (up or down) inside that box is what actually
   fills the available space while keeping the full photo visible.
   transform-origin:center + will-change:transform support the pinch-zoom/
   pan added in photoDetailComponent.js — transform itself is applied via JS
   (live during a gesture, briefly transitioned for double-tap/snap-back),
   deliberately not a blanket CSS transition here since that would fight the
   live 1:1 tracking a pinch/pan needs. */
.pdv-stage img{width:100%;height:100%;object-fit:contain;display:block;transform-origin:center center;will-change:transform;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;}
.pdv-video-note{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);padding:7px 12px;border-radius:99px;background:rgba(28,28,30,.85);font-size:11px;color:var(--text-secondary);white-space:nowrap;}
.pdv-empty{color:var(--text-faint,#444);font-size:13px;}
/* Filmstrip (2026-08-01, Mystic_Photo_Viewer_Plan.pdf; reworked 2026-08-01
   per Owen, twice: first "the photo should stay in its locked place" +
   "make it an animation that moves up and down"; then "swipe down on the
   [strip] makes it disappear... if Always is selected it's there each
   open, until you swipe down; opposite for Hidden — we're able to access
   it no matter what you choose, but the user decides if it stays
   visible." Up to 5 cells (2 previous / current / 2 next), current one
   larger and fully opaque, neighbors smaller and faded.
   Two-layer structure on purpose: .pdv-filmstrip is a fixed-height clipped
   window that NEVER resizes, in every Studio mode — so .pdv-stage above it
   never reflows regardless of what shows/hides it (the earlier
   opacity+collapse version shrank this box, which grew the stage and
   visibly shifted the photo). What actually hides is the inner
   .pdv-film-track, sliding straight down out of the clipped window via
   transform — a real, unmissable motion, not a fade that's easy to miss
   against the near-black viewer background.
   'faded' is the one and only hidden state now, used by all three Studio
   modes alike: Always Visible/Auto Hide start without it (shown), Hidden
   starts with it (hidden) — see openPhotoDetail() in
   photoDetailComponent.js. Swiping the strip up/down toggles it directly
   in every mode from there; Auto Hide additionally re-adds it on its own
   after 5s idle. */
.pdv-filmstrip{position:relative;height:76px;flex-shrink:0;overflow:hidden;touch-action:pan-y;}
.pdv-film-track{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:7px;padding:6px 14px 10px;transition:transform .3s cubic-bezier(.4,0,.2,1);transform:translateY(0);}
.pdv-filmstrip.faded .pdv-film-track{transform:translateY(100%);}
.pdv-film-cell{width:38px;height:38px;border-radius:8px;overflow:hidden;flex-shrink:0;opacity:.5;cursor:pointer;background:var(--bg-card);transition:opacity .2s ease,width .2s ease,height .2s ease;}
.pdv-film-cell.current{width:52px;height:52px;opacity:1;box-shadow:0 0 0 2px var(--text-primary);}
.pdv-film-cell img{width:100%;height:100%;object-fit:cover;display:block;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;}
.pdv-meta{padding:16px 18px 24px;border-top:0.5px solid var(--border-soft);background:var(--bg-shell);flex-shrink:0;transition:opacity .22s ease;}
.pdv-date{font-size:17px;font-weight:600;color:var(--text-primary);margin-bottom:5px;}
.pdv-loc{font-size:12px;color:var(--text-muted);}
/* Comments panel (2026-08-07, per Owen: "swipe up on the photo to reveal
   comments... tiny comment indicator next to the date... two entrances,
   one destination"). .pdv-comments-panel is a real flex child (height
   driven by JS, 0 by default) sitting below .pdv-meta — since .pdv-stage
   above has flex:1/min-height:0, growing this panel's height is what
   visually shrinks the photo down to a smaller square; no transform tricks
   needed, and the photo can never fully disappear since the panel's open
   height is capped well short of 100% (see computeCommentsOpenHeight()).
   height itself is NOT transitioned by default (JS toggles a transition
   on only for the release/settle animation, same live-drag-then-snap
   pattern the pinch-zoom transform above uses) so a finger dragging the
   panel tracks 1:1 without fighting a blanket CSS transition. */
.pdv-comment-indicator{display:none;align-items:center;gap:5px;color:var(--text-muted);font-size:12px;cursor:pointer;}
.pdv-comment-indicator svg{flex-shrink:0;}
.pdv-comment-indicator span{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pdv-comments-panel{height:0;overflow:hidden;flex-shrink:0;background:var(--bg-shell);border-top:0.5px solid var(--border-soft);}
.pdv-comments-panel-inner{height:100%;overflow-y:auto;scrollbar-width:none;padding:0 18px 20px;box-sizing:border-box;touch-action:none;}
.pdv-comments-panel-inner::-webkit-scrollbar{display:none;}
.pdv-panel-handle{width:36px;height:4px;border-radius:99px;background:var(--border-default);margin:10px auto 12px;cursor:pointer;}
.pdv-panel-date{font-size:17px;font-weight:600;color:var(--text-primary);margin-bottom:5px;}
.pdv-comments-label{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted);font-weight:700;margin:16px 0 8px;}
.pdv-comments-list{display:flex;flex-direction:column;gap:8px;}
.pdv-comment-block{border-radius:12px;background:var(--bg-card);border:0.5px solid var(--border-default);padding:9px 11px;}
.pdv-comment-year{font-size:10px;letter-spacing:.06em;color:var(--text-muted);font-weight:700;margin-bottom:2px;}
.pdv-comment-text{font-size:13px;color:var(--text-primary);line-height:1.4;}
.pdv-comment-add{font-size:13px;color:var(--text-secondary);padding:12px 0 2px;cursor:pointer;}