/* Quiet glass framing leaves the artwork unobstructed. Buttons inherit the site finish. */
html:root body .slideshow-navigation,
html:root body .lab-controls,
html:root body .archid-logo-controls {
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;
  width:fit-content;max-width:100%;box-sizing:border-box;padding:6px;
  border:1px solid rgba(255,255,255,.42);border-radius:12px;
  background:rgba(240,250,248,.18);color:#203f43;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 3px 14px rgba(37,77,81,.07);
}
html:root body .slideshow-navigation button {width:auto;height:auto;min-width:44px;min-height:44px;padding:8px 12px;font:inherit;font-size:12px;line-height:1.2}
.slideshow-navigation span {min-width:46px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(255,255,255,.9)}
html:root body .slide-controls.slideshow-navigation {position:relative;inset:auto;margin:12px 14px 0 auto;z-index:2}
html:root body .wonder-stage > .slideshow-navigation {position:relative;z-index:2;margin:0 auto 18px;grid-column:1 / -1}
html:root body .portal-slide-controls.slideshow-navigation {position:absolute;right:16px;bottom:14px;z-index:2}
@media(max-width:480px){html:root body .slideshow-navigation {gap:4px;padding:4px}html:root body .slideshow-navigation button {padding:8px}.slideshow-navigation span {min-width:38px}}
@media(forced-colors:active){html:root body .slideshow-navigation {background:Canvas;color:CanvasText;border-color:CanvasText}}

/* Keyboard focus: a slideshow that has been clicked owns the arrow keys until a click elsewhere. */
html:root body .slideshow-host.is-keyboard-active {outline:2px solid rgba(47,122,128,.45);outline-offset:3px}
html:root body .slideshow-host.is-fullscreen.is-keyboard-active {outline:none}

/* Full screen: the slideshow fills the screen and its picture is fitted to the viewport. */
html:root body .slideshow-host.is-fullscreen {
  width:100vw!important;height:100vh!important;height:100dvh!important;max-width:none!important;max-height:none!important;
  min-height:0!important;margin:0!important;border-radius:0!important;box-sizing:border-box;overflow:auto!important;
  background-color:#eef4f3!important;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))!important;
}
html:root body .slideshow-host:fullscreen::backdrop {background:#eef4f3}
html:root body .slideshow-host.is-pseudo-fullscreen {position:fixed!important;inset:0!important;z-index:2147483000!important}
html.slideshow-pseudo-fullscreen, html.slideshow-pseudo-fullscreen body {overflow:hidden!important}

/* Featured images */
html:root body .slideshow-frame.is-fullscreen {display:flex!important;flex-direction:column}
html:root body .slideshow-frame.is-fullscreen .slide-view {flex:1 1 auto;min-height:0!important}
html:root body .slideshow-frame.is-fullscreen .slide-view img {height:100%;max-height:calc(100dvh - 150px)!important}
/* Projects slideshow */
html:root body .project-slideshow__frame.is-fullscreen {display:flex!important;flex-direction:column;gap:8px}
html:root body .project-slideshow__frame.is-fullscreen .project-slideshow__stage {flex:1 1 auto!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;height:auto!important}
html:root body .project-slideshow__frame.is-fullscreen .project-slideshow__img {inset:0!important;width:100%!important;height:100%!important}
html:root body .project-slideshow__frame.is-fullscreen .project-slideshow__thumbs {flex:none}
/* Technical atlas */
html:root body .anatomy-container.is-fullscreen {display:flex!important;flex-direction:column;gap:10px}
html:root body .anatomy-container.is-fullscreen .anatomy-image-wrap {flex:1 1 auto!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important}
html:root body .anatomy-container.is-fullscreen .anatomy-thumbs {flex:none}
/* Seven wonders and construction portals keep their own layouts, centred in the screen. */
html:root body .wonder-stage.is-fullscreen {align-content:center}
html:root body [data-portal-slideshow].is-fullscreen {display:flex!important;flex-direction:column;justify-content:center;padding-bottom:78px!important}
html:root body .slideshow-host.is-fullscreen .slideshow-fullscreen-toggle {font-weight:600}