/* Fullscreen video stays full size while its controls fade above it. */
#playlist-reveal{display:none}
#playlist-dialog.expanded{position:fixed;inset:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;border-radius:0;background:#000;overflow:hidden;display:block}
#playlist-dialog.expanded #playlist-player{position:absolute;inset:0;width:100%;height:100%;min-height:0;aspect-ratio:auto;margin:0;border:0;border-radius:0;background:#000}
#playlist-dialog.expanded .playlist-top{position:absolute;top:0;right:0;z-index:3;display:flex;justify-content:flex-end;gap:8px;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 4px 8px}
#playlist-dialog.expanded .playlist-top h2{display:none}
#playlist-dialog.expanded .playlist-controls{position:absolute;left:0;right:0;bottom:calc(30px + env(safe-area-inset-bottom));z-index:3;display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:0;padding:8px;background:linear-gradient(transparent,#0009)}
#playlist-dialog.expanded .playlist-top button,#playlist-dialog.expanded .playlist-controls button,#playlist-dialog.expanded #playlist-list button{background:#000b;border-color:#fff8;color:#fff;min-height:44px}
#playlist-dialog.expanded #playlist-position{position:absolute;bottom:0;left:0;right:0;z-index:3;display:block;color:#fff;margin:0;padding:4px 8px max(8px,env(safe-area-inset-bottom));background:#0009}
#playlist-dialog.expanded #playlist-list:not([hidden]){position:absolute;left:8px;right:8px;bottom:calc(110px + env(safe-area-inset-bottom));z-index:4;display:block;max-height:45dvh;overflow:auto;margin:0;padding:8px;background:#000e;border-radius:12px}
#playlist-dialog.expanded #playlist-list[hidden]{display:none}
#playlist-dialog.expanded #playlist-list button[aria-current="true"]{background:#fff;color:#153e55}
#playlist-dialog.expanded .playlist-top,#playlist-dialog.expanded .playlist-controls,#playlist-dialog.expanded #playlist-position{transition:opacity .25s}
#playlist-dialog.expanded.controls-hidden .playlist-top,#playlist-dialog.expanded.controls-hidden .playlist-controls,#playlist-dialog.expanded.controls-hidden #playlist-position{opacity:0;visibility:hidden;pointer-events:none}
#playlist-dialog.expanded.controls-hidden #playlist-reveal{display:block;position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer}
@media(max-height:500px){#playlist-dialog.expanded .playlist-controls button{padding:6px 10px}#playlist-dialog.expanded #playlist-position{font-size:12px}}
@media(prefers-reduced-motion:reduce){#playlist-dialog.expanded .playlist-top,#playlist-dialog.expanded .playlist-controls,#playlist-dialog.expanded #playlist-position{transition:none}}

/* Follow the device viewport in both portrait and landscape. */
@media(orientation:portrait){
#playlist-dialog.expanded{inset:auto;left:50%;top:50%;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;transform:translate(-50%,-50%);transform-origin:center}
#playlist-dialog.expanded .playlist-top{padding:8px}
#playlist-dialog.expanded .playlist-controls{bottom:30px}
#playlist-dialog.expanded #playlist-position{padding-bottom:8px}
#playlist-dialog.expanded #playlist-list:not([hidden]){bottom:110px;max-height:45vw}
}

/* Borderless playlist video, including native fullscreen dialog rendering. */
#playlist-dialog{border:0;padding:0;overflow:hidden}
#playlist-dialog::backdrop{background:#f5ecd5}
#playlist-dialog .playlist-top{padding:12px 18px}
#playlist-dialog #playlist-player{display:block;border:0;border-radius:0;margin:0;background:#000}
#playlist-dialog:fullscreen,#playlist-dialog:-webkit-full-screen{background:#000;border:0;border-radius:0;padding:0;box-shadow:none}
#playlist-dialog.expanded{box-shadow:none}
#playlist-dialog.expanded #playlist-player{margin:0;border:0;border-radius:0}

/* Keep the thumbnail grid reachable inside short mobile dialog viewports. */
#playlist-dialog:not(.expanded){overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;max-height:90dvh;scroll-behavior:auto}
#playlist-dialog #playlist-list:not([hidden]){min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin}
#playlist-dialog #playlist-list .playlist-thumbnail{touch-action:pan-y}

/* Spiritual films use a quiet sky-blue palette. */
#playlist-dialog[data-theme="heavenly"]{background:linear-gradient(145deg,#f5fbff 0%,#dceffb 48%,#b8dcef 100%);border-color:#7daec9;box-shadow:0 12px 40px #305b742e}
#playlist-dialog[data-theme="heavenly"]::backdrop{background:#e9f4fb}
#playlist-dialog[data-theme="heavenly"] .playlist-top{background:linear-gradient(145deg,#f5fbff,#dceffb)}
#playlist-dialog[data-theme="heavenly"] .playlist-top button,#playlist-dialog[data-theme="heavenly"] .playlist-controls button,#playlist-dialog[data-theme="heavenly"] #playlist-list button{background:#f4fbff;border-color:#7daec9;color:#17445e}
#playlist-dialog[data-theme="heavenly"] #playlist-list button[aria-current="true"]{background:#346b8b;color:#fff;border-color:#91c3df}
#playlist-dialog[data-theme="heavenly"] .playlist-top h2,#playlist-dialog[data-theme="heavenly"] #playlist-position{color:#17445e}
#playlist-dialog[data-theme="heavenly"].expanded .playlist-controls,#playlist-dialog[data-theme="heavenly"].expanded #playlist-position,#playlist-dialog[data-theme="heavenly"].expanded #playlist-list:not([hidden]){background:#e3f2fbeF}
#spirituality .playlist-links{padding:20px;border:1px solid #9bc2d9;border-radius:18px;background:linear-gradient(145deg,#f5fbff,#dceffb);color:#17445e}
#spirituality .playlist-links button.playlist-link{background:linear-gradient(180deg,#d5edfc,#a5cee7)!important;background-image:linear-gradient(180deg,#d5edfc,#a5cee7)!important;border:1px solid #7daec9!important;color:#17445e!important;box-shadow:inset 0 1px 0 #ffffffa0,0 3px 8px #305b741c!important}
#spirituality .playlist-links .topic-share{background:#f4fbff!important;border-color:#7daec9!important;color:#17445e!important}

/* Gold frames and breathing room around the spiritual films. */
#spirituality .playlist-links{border:1px solid #b89a51}
#spirituality .playlist-links .playlist-description{margin-top:22px;margin-bottom:0;line-height:1.6}
#spirituality .playlist-links .playlist-description + .playlist-description{margin-top:16px}
#playlist-dialog[data-theme="heavenly"]{border:1px solid #b89a51}
#playlist-dialog[data-theme="heavenly"].expanded{border:0}

/* Life and spiritual collections open like the integral book film. */
#playlist-dialog.bookfilm-style.expanded{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:100vw;max-width:none;height:100dvh;max-height:none;box-sizing:border-box;margin:0;padding:0;background:#decead;border:0;border-radius:0}
#playlist-dialog.bookfilm-style::backdrop{background:#decead}
#playlist-dialog.bookfilm-style.expanded .playlist-top{top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));padding:0;background:transparent}
#playlist-dialog.bookfilm-style.expanded #playlist-expand{display:none}
#playlist-dialog.bookfilm-style.expanded #playlist-close{display:grid;place-items:center;box-sizing:border-box;width:44px;height:44px;min-height:44px;margin:0;padding:0;border:1px solid #ffffff70;border-radius:50%;background:#302b2566;color:#fff;font:400 30px/1 system-ui;box-shadow:none}
#playlist-dialog.bookfilm-style.expanded #playlist-close:focus-visible{outline:3px solid #fff;outline-offset:3px}
#playlist-dialog.bookfilm-style.expanded .playlist-controls,#playlist-dialog.bookfilm-style.expanded #playlist-position,#playlist-dialog.bookfilm-style.expanded #playlist-list:not([hidden]){background:#deceadef;color:#584123}
#playlist-dialog.bookfilm-style.expanded .playlist-controls button,#playlist-dialog.bookfilm-style.expanded #playlist-list button{background:#f7f0e3;border:1px solid #b89a51;color:#584123;box-shadow:none}
#playlist-dialog.bookfilm-style.expanded #playlist-list button[aria-current=true]{background:#584123;color:#fff}
@media(orientation:portrait){#playlist-dialog.bookfilm-style.expanded{width:100vw;height:100dvh;transform:translate(-50%,-50%);transform-origin:center}#playlist-dialog.bookfilm-style.expanded .playlist-top{top:10px;right:10px}}

#playlist-dialog:not([open]){display:none!important}
#playlist-dialog.bookfilm-style.expanded #playlist-player{background:#decead}

/* Keep selection and playback upright. */
#playlist-dialog.bookfilm-style:not(.expanded){width:min(940px,96vw);max-width:96vw;max-height:90dvh;transform:none;background:#decead;border:0;border-radius:14px}
#playlist-dialog.bookfilm-style:not(.expanded) .playlist-top{display:flex;align-items:center;gap:12px;background:transparent}
#playlist-dialog.bookfilm-style:not(.expanded) .playlist-top h2{flex:1;margin:0;color:#584123}
#playlist-dialog.bookfilm-style:not(.expanded) #playlist-player{display:none}
#playlist-dialog.bookfilm-style:not(.expanded) #playlist-list:not([hidden]){max-height:65dvh;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));background:#decead;overflow:auto}
#playlist-dialog.bookfilm-style #playlist-expand{display:none}
#playlist-dialog.bookfilm-style #playlist-close{display:grid;place-items:center;flex:none;box-sizing:border-box;width:44px;height:44px;min-height:44px;padding:0;border:1px solid #ffffff70;border-radius:50%;background:#302b2566;color:#fff;font:400 30px/1 system-ui;box-shadow:none}
#playlist-dialog.bookfilm-style:not(.expanded) .playlist-controls,#playlist-dialog.bookfilm-style:not(.expanded) #playlist-position{margin:0;padding:8px 12px;color:#584123;text-align:center}

/* Keep complete video frames visible in either device orientation. */
#playlist-dialog.expanded #playlist-player{object-fit:contain}

/* Return to the collection while keeping the website close button separate. */
#playlist-dialog #playlist-back-to-videos{display:none}
#playlist-dialog.expanded #playlist-back-to-videos:not([hidden]){display:grid;place-items:center;flex:none;box-sizing:border-box;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;border:1px solid #ffffff70;border-radius:50%;background:#302b2566;color:#fff;font:400 30px/1 system-ui;box-shadow:none;cursor:pointer;touch-action:manipulation}
#playlist-dialog #playlist-back-to-videos:focus-visible{outline:3px solid #fff;outline-offset:3px}