/* The viewer owns one viewport-sized grid; media occupies only its remaining space. */
#filmDialog:not(.photo-fullscreen):not(.expanded-player)[open]{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:44px minmax(0,1fr) 64px;gap:12px;position:fixed;inset:0;margin:auto;width:min(1240px,calc(100% - 40px));max-width:calc(100% - 40px);height:min(860px,calc(100dvh - 40px),var(--viewer-height,860px));max-height:calc(100dvh - 40px);padding:20px 24px;overflow:hidden}
#filmDialog:not(.photo-fullscreen):not(.expanded-player) .film-top{grid-row:1;grid-column:1;width:100%;margin:0;min-width:0}
#filmDialog:not(.photo-fullscreen):not(.expanded-player) #filmStage{grid-row:2;grid-column:1;min-height:0;height:100%;max-height:100%;margin:0;min-width:0}
#filmDialog:not(.photo-gallery):not(.expanded-player) #filmStage{display:grid;place-items:center;padding:0}
#filmDialog:not(.photo-gallery):not(.expanded-player) #fullFilm{width:var(--viewer-video-width,100%);height:var(--viewer-video-height,100%);max-width:100%;max-height:100%;margin:0;aspect-ratio:auto;object-fit:contain}
#filmDialog:not(.photo-fullscreen):not(.expanded-player) .film-bottom{grid-row:3;grid-column:1;position:relative;display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;width:100%!important;min-width:0;min-height:44px;margin:0!important;padding:0;direction:ltr}
#filmDialog:not(.photo-fullscreen):not(.expanded-player) #filmMeta{grid-row:1;grid-column:1;min-width:0;width:auto;max-width:100%;text-align:start!important;font-size:11px;line-height:1.4}
#filmDialog:not(.photo-fullscreen):not(.expanded-player) #filmVersions{grid-row:1;grid-column:3;justify-self:end;display:flex;gap:16px;min-width:0}
#filmDialog:not(.photo-fullscreen):not(.expanded-player) .film-navigation{position:static!important;grid-row:1;grid-column:2;transform:none!important;display:flex;align-items:center;justify-content:center;gap:12px;width:auto;margin:0;padding:0;direction:ltr}
#filmDialog #previousFilm,#filmDialog #nextFilm{display:flex;align-items:center;justify-content:center;gap:0;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;font-size:0;line-height:0;color:#aaa;border:0;border-radius:50%;background:transparent;box-shadow:none;transition:color .22s ease,background .22s ease}
#filmDialog #previousFilm::before,#filmDialog #nextFilm::after{content:'';display:block;position:static;width:24px;height:24px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12H4m6-6-6 6 6 6' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transform:scale(1);transition:transform .24s ease}
#filmDialog #nextFilm::after{transform:rotate(180deg)}
#filmDialog #previousFilm::after,#filmDialog #nextFilm::before{content:none}
#filmDialog #closeFilm{color:#aaa;box-shadow:none;filter:none}
#filmDialog #closeFilm::before,#filmDialog #closeFilm::after{width:20px;height:1.6px;left:calc(50% - 10px);top:calc(50% - .8px);filter:none;box-shadow:none;transition:transform .24s ease}
@media(hover:hover){
 #filmDialog #previousFilm:hover,#filmDialog #nextFilm:hover,#filmDialog #closeFilm:hover{color:#eee;background:transparent}
 #filmDialog #previousFilm:hover::before{transform:scale(1.15)}
 #filmDialog #nextFilm:hover::after{transform:rotate(180deg) scale(1.15)}
 #filmDialog #closeFilm:hover::before{transform:rotate(45deg) scale(1.12)}
 #filmDialog #closeFilm:hover::after{transform:rotate(-45deg) scale(1.12)}
}
#projectMenuToggle{display:none}
@media(min-width:1000px){
 #filmDialog:not(.photo-fullscreen):not(.expanded-player)>.project-actions{position:absolute;left:24px;right:auto;bottom:88px;width:180px;max-height:calc(100% - 176px);overflow:auto;scrollbar-width:thin;display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:12px 0 0;border-top:1px solid #ffffff24;grid-row:auto;grid-column:auto}
 #filmDialog>.project-actions>button,#filmDialog>.project-actions>a{justify-content:flex-start;text-align:start;min-height:44px;padding:9px 10px;color:#dedede;font-size:14px;line-height:1.35;border-radius:7px}
 #filmDialog>.project-actions>button:hover,#filmDialog>.project-actions>a:hover{background:#ffffff0b;color:#fff}
 #filmDialog>.project-actions>button[aria-haspopup]{color:#f43b50}
 #filmDialog.photo-gallery:not(.photo-fullscreen) #filmStage{grid-template-columns:180px minmax(0,1fr) 180px;gap:18px}
 #filmDialog.photo-gallery:not(.photo-fullscreen) #photoStage{height:100%;min-height:0;margin:0;overflow:hidden}
 #filmDialog.photo-gallery:not(.photo-fullscreen) #galleryImage{height:100%;max-height:100%;width:100%;object-fit:contain}
 #filmDialog.photo-gallery:not(.photo-fullscreen) #photoSessions{padding-top:0!important;gap:2px;max-height:calc(100% - 186px);overflow:auto;scrollbar-width:thin;align-self:start}
 #filmDialog.photo-gallery:not(.photo-fullscreen) #photoSessions button{padding-top:10px;padding-bottom:10px;min-height:44px}
 #filmDialog.photo-gallery:not(.photo-fullscreen) .photo-swipe-hint{grid-row:1;grid-column:3;justify-self:end}
}
@media(max-width:999px){
 #filmDialog:not(.photo-fullscreen):not(.expanded-player)[open]{width:calc(100% - 16px);max-width:calc(100% - 16px);height:min(calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),var(--viewer-height,9999px));max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));grid-template-rows:44px minmax(0,1fr) auto 44px;gap:8px;padding:8px 12px}
 #filmDialog.photo-gallery:not(.photo-fullscreen)[open]{grid-template-rows:84px minmax(0,1fr) auto 44px}
 #filmDialog:not(.photo-fullscreen):not(.expanded-player)>#projectMenuToggle{display:flex;align-items:center;justify-content:center;gap:12px;grid-row:4;grid-column:1;justify-self:center;min-height:44px;min-width:140px;padding:8px 20px;margin:0;border:1px solid #ffffff30;border-radius:22px;background:transparent;color:#ddd;font:inherit;font-size:13px}
 #projectMenuToggle::after{content:'';width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(-45deg);transition:transform .2s ease}
 #projectMenuToggle[aria-expanded=true]::after{transform:rotate(135deg)}
 #filmDialog:not(.photo-fullscreen):not(.expanded-player)>.project-actions{display:none;position:absolute;inset:auto 12px 60px;z-index:35;max-height:calc(100% - 120px);overflow:auto;margin:0;padding:12px;border:1px solid #444;border-radius:14px;background:#191919;grid-row:auto;gap:2px}
 #filmDialog.project-menu-open:not(.photo-fullscreen):not(.expanded-player)>.project-actions{display:flex;flex-direction:column;align-items:stretch}
 #filmDialog>.project-actions>button,#filmDialog>.project-actions>a{justify-content:center;min-height:48px;font-size:14px;color:#eee}
 #filmDialog:not(.photo-fullscreen):not(.expanded-player) #filmMeta{font-size:10px}
 #filmDialog:not(.photo-gallery):not(.expanded-player) .film-bottom{width:min(100%,var(--mobile-media-width,100%))!important;margin:0 auto!important}
 #filmDialog:not(.photo-gallery):not(.expanded-player) #filmVersions:not(:empty){grid-column:1/-1;grid-row:2;justify-self:center;gap:24px}
 #filmDialog.photo-gallery:not(.photo-fullscreen) .photo-swipe-hint{grid-row:1;grid-column:3;width:auto;max-width:90px;text-align:right!important;font-size:10px}
 #filmDialog.photo-gallery:not(.photo-fullscreen) .film-navigation{display:none}
 #filmDialog.photo-gallery:not(.photo-fullscreen) #filmStage{padding:0 22px}
 #filmDialog.photo-gallery:not(.photo-fullscreen) .film-top h2{grid-area:auto}
}
@media(prefers-reduced-motion:reduce){#filmDialog #previousFilm::before,#filmDialog #nextFilm::after,#projectMenuToggle::after{transition:none}}