/* -------------------------------------------- */
/* VAPAGUIDE 24 */
/* Version: 43 */
/* -------------------------------------------- */
/* Created by @twotribes, Germany */
/* -------------------------------------------- */
/* StyleSheet Scope: 
Shared actors */
/* -------------------------------------------- */

/* -------------------------------------------- */
/* !ACTOR: Portal header */
/* -------------------------------------------- */

/* !--- Grand container */
#actor_portal {
    display: flex;
}

.stage-home #actor_portal {
    align-items: center;
}

.stage:not(.stage-home) #actor_portal {
    padding-top: 0;
    flex-direction: column;
    justify-content: space-around;
}

/* Small viewports (actor hidden in drawer) */
@media only screen and (max-width: 736px) {
    #actor_portal {
        display: grid;
        row-gap: 32px;
        padding-top: 16px;
        padding-left: var(--mobile-gutter);
        padding-right: var(--mobile-gutter);
    }
    
    .stage:not(.stage-home) #actor_portal {
        justify-content: normal;
    }
    
    #actor_portal .portal-logo {
        grid-row: 1;
        grid-column: 1;
    }
    
    #actor_portal .portal-identity {
        grid-row: 2;
        grid-column: 1 / -1;
    }

    #actor_portal .portal-update {
        grid-row: 1;
        grid-column: 2;
    }
}


/* !--- Skip link (only for screen readers) */
/* Hide for sighted users */
#actor_portal .portal-skiplink {
    position: absolute;
    z-index: 10;
    left: -100vw;
    transform: translateY(-100%);
}

/* Make visible when receiving :focus */
#actor_portal .portal-skiplink:focus-visible {
    outline: none;
    padding: 10px;
    background: var(--vapa-white);
    left: 10px;
    transform: translateY(0%);
}

@media only screen and (max-width: 736px) {
    #actor_portal .portal-skiplink {
        display: none;
    }
}


/* !--- Logo + Tagline */
#actor_portal .portal-logo {
    width: 212px;
    height: 40px;
    overflow: hidden;
    text-indent: -1000em;
    background: transparent left top url("./img/logos/logo_pages_desktop_v2.svg") no-repeat;
    transition: var(--transition-universal);
}

#actor_portal .portal-logo a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Homepage logo */
.stage-home #actor_portal .portal-logo {
    width: 579px;
    height: 37px;
    background-image: url("./img/logos/logo_home_desktop_v2.svg");
}

/* Interaction states */
@media (hover: hover) {
    #actor_portal .portal-logo:has(a:hover) {
        opacity: 0.5;
        transition: var(--transition-universal);
    }
}

#actor_portal .portal-logo:has(*:focus-visible) {
    outline: 1px solid var(--vapa-black-80);
    outline-offset: 8px;
    transition: var(--transition-universal);
}

/* Small viewports */
@media only screen and (max-width: 736px) {
    #actor_portal .portal-logo {
        width: 107px;
        height: 15px;
        margin-top: 20px;
        background-image: url("./img/logos/logo_pages_mobile.svg");
    }
    
    .stage-home #actor_portal .portal-logo {
        width: 299px;
        height: 81px;
        margin-top: 8px;
        background-image: url("./img/logos/logo_home_mobile_v2.svg");
    }
}


/* !--- Positioning (only on hompage) */
#actor_portal .portal-identity {
    display: none;
}

.stage-home #actor_portal .portal-identity {
    display: block;
    width: var(--width-8col);
    margin-left: 42px;
}

.stage-home #actor_portal .portal-identity span {
    display: block;
}

@media only screen and (max-width: 736px) {
    .stage-home #actor_portal .portal-identity {
        margin: 0 0 24px 0;
        font: var(--textset-l);
        font-weight: 400;
        width: auto;
        grid-column: 1 / 3;
    }
}


/* !--- Update counter */
#actor_portal .portal-update {
    margin: 0 0 0 auto;
    min-height: 73px;
    padding-right: 35px;
    background: transparent right 0 url("./img/illus/home_counter_badge_v2.svg") no-repeat;
}

#actor_portal .portal-update p {
    font: var(--textset-m);
    color: var(--textcolor-badge);
    text-align: right;
}

#actor_portal .portal-update p mark {
    font-weight: 600;
    display: block;
}

#actor_portal .portal-update p span {
}

/* Small viewports */
@media only screen and (max-width: 736px) {
    #actor_portal .portal-update {
        border-top: 16px solid var(--vapa-counter);
        margin-top: -16px;
        padding: 0 6px 0 6px;
        min-height: 0;
        width: 79px;
        background: transparent center bottom url("./img/illus/home_counter_badge_mobile.svg") no-repeat;
        
    }
    
    #actor_portal .portal-update p {
        text-align: center;
        font: var(--textset-s);
        color: var(--vapa-white);
        font-weight: 600;
    }
    
    #actor_portal .portal-update p mark {
        font: var(--textset-l);
    }
    
    #actor_portal .portal-update p span {
    }
}


/* !-- Close button (only visible on small viewports inside drawer) */
#actor_portal .primary-action.icon-close {
    display: none;
}

@media only screen and (max-width: 736px) {
    #actor_portal .primary-action.icon-close {
        display: block;
        position: absolute;
        top: 12px;
        right: var(--mobile-gutter);
    }
}


/* -------------------------------------------- */
/* !ACTOR: Animal group & regional navigation */
/* -------------------------------------------- */

/* !--- Grand container */
#actor_navigation {
    display: flex;
    column-gap: 32px;
    justify-content: center;
    padding: 16px 0 16px 0;
}

#actor_navigation:has(:only-child) {
    justify-content: left;
}

@media only screen and (max-width: 736px) {
    #actor_navigation {
        background: var(--vapa-white);
        border-top: var(--line-master);
        flex-direction: column;
        row-gap: 24px;
        padding: 16px var(--mobile-gutter) 16px var(--mobile-gutter);
    }
}


/* !--- Selectors */
#actor_navigation .substance-flyout {
    display: flex;
}

@media only screen and (max-width: 736px) {
    #actor_navigation .substance-flyout {
        display: grid;
        grid-template-columns: min-content auto;
    }
    
    #actor_navigation .substance-flyout .flyout-controller-deputy {
        grid-column: 1;
        grid-row: 1;
    }
    
    #actor_navigation .substance-flyout .flyout-controller {
        grid-column: 2;
        grid-row: 1;
    }
    
    #actor_navigation .substance-flyout .flyout-host {
        grid-column: 1 / 3;
        grid-row: 2;
    }
    
    /* Not needed in mobile drawer */
    #actor_navigation .substance-flyout.flyout-region.region-world {
        display: none;
    }
}

/* Visual value per Selector */
#actor_navigation > .substance-flyout > .flyout-controller-deputy {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 80px;
    justify-content: space-around;
}

#actor_navigation > .substance-flyout > .flyout-controller-deputy .substance-media {
    height: 100%;
    max-height: 60px; /* neighboring continent illus are consistently 60px tall */
}

#actor_navigation > .substance-flyout.flyout-region > .flyout-controller-deputy {
    width: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

#actor_navigation > .substance-flyout.flyout-region > .flyout-controller-deputy .substance-media {
    height: 60px;
}

@media only screen and (max-width: 736px) {
    #actor_navigation > .substance-flyout > .flyout-controller-deputy, 
    #actor_navigation > .substance-flyout.flyout-region > .flyout-controller-deputy {
        height: auto;
        width: 80px;
    }
}

/* Flyout controller */
#actor_navigation > .substance-flyout > .view-action {
    padding-left: 16px;
    padding-right: 32px;
}

#actor_navigation > .substance-flyout > .view-action em {
    display: block;
    text-wrap: pretty;
}

#actor_navigation > .substance-flyout:only-child > .view-action {
    padding-left: 0;
    font: var(--textset-l);
}

@media only screen and (max-width: 736px) {
    #actor_navigation > .substance-flyout > .view-action {
        flex-grow: 1;
    }
}

/* Flyout arrow & host */
#actor_navigation .substance-flyout.flyout-active:before {
    bottom: -8px;
    left: 48px;
}

#actor_navigation .substance-flyout > .flyout-host {
    top: 100%;
    left: 0;
    right: auto;
    transform: none;
    max-height: calc(100dvh - var(--navigation-main-height));
}

#actor_navigation .substance-flyout.flyout-animal > .flyout-host {
    container-name: zoo-container;
    container-type: inline-size;
    background: var(--vapa-land-light) center url("./img/back_home_mobile.jpg") no-repeat;
    background-size: cover;
    --flyout-border: var(--line-light);
}

#actor_navigation .substance-flyout.flyout-animal:before, 
#actor_navigation .substance-flyout.flyout-animal > .flyout-host:before {
    --flyout-background-color: var(--vapa-land-light);
    --flyout-border: var(--line-light);
}

#actor_navigation .substance-flyout.flyout-animal > .flyout-host .substance-zoo {
    padding: 0;
}

#actor_navigation .substance-flyout.flyout-region .flyout-host {
    width: var(--flyout-width-large);
}

#actor_navigation .substance-flyout.flyout-region.region-world .flyout-host {
    width: var(--flyout-width-small);
}

@media only screen and (max-width: 736px) {
    #actor_navigation .substance-flyout:is(.flyout-animal, .flyout-region) > .flyout-host {
        margin-left: calc(-1 * var(--mobile-gutter));
        margin-right: calc(-1 * var(--mobile-gutter));
        width: calc(100% + 2 * var(--mobile-gutter));
        top: 8px;
        margin-top: 8px;
        max-height: none;
    }
    
    #actor_navigation .substance-flyout.flyout-animal > .flyout-host .substance-menu {
        padding-left: var(--mobile-gutter);
        padding-right: var(--mobile-gutter);
    }
}


/* -------------------------------------------- */
/* !ACTOR: Search component (animal names & global search) */
/* -------------------------------------------- */

/* !--- Grand container */
#actor_search {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

@media only screen and (max-width: 736px) {
    #actor_search {
        display: block;
        padding: 0 var(--mobile-gutter) 16px var(--mobile-gutter);
    }
}


/* !--- Field entry & flyout */
#actor_search:not(.expression-global) .field-entry {
    top: -8px
}

#actor_search .field-entry .flyout-host {
    left: auto;
    right: 0;
    transform: none;
    max-height: calc(100dvh - var(--navigation-main-height));
    background: var(--vapa-land-light) center url("./img/back_home_mobile.jpg") no-repeat;
    background-size: cover;
}

#actor_search .field-entry:before, 
#actor_search .field-entry .flyout-host:before {
    --flyout-background-color: var(--vapa-land-light);
    --flyout-border: var(--line-light);
}

#actor_search .field-entry .flyout-host .menu-action.action-icon:before {
    background-color: var(--vapa-white);
}

@media only screen and (max-width: 736px) {
    #actor_search .field-entry {
        top: 0
    }
    
    #actor_search .field-entry .flyout-host {
        width: 100%;
        max-height: none;
    }
    
    #actor_search .field-entry .flyout-host:before {
        top: -9px;
    }
}


/* -------------------------------------------- */
/* !ACTOR: Animal aspect switcher */
/* -------------------------------------------- */

/* !--- Grand container */
#actor_aspect {
    border-top: var(--line-master);
}

.ensemble.expression-land #actor_aspect {
    background: var(--vapa-land);
}

.ensemble.expression-hybrid #actor_aspect {
    background: var(--vapa-hybrid);
}

.ensemble.expression-water #actor_aspect {
    background: var(--vapa-water);
}

@media only screen and (max-width: 736px) {
    #actor_aspect {
        padding: 16px var(--mobile-gutter) 16px var(--mobile-gutter);
    }
}


/* !--- Tab arrangement */
#actor_aspect .substance-menu > ul {
    display: grid;
    grid-auto-flow: column;
}

@media only screen and (max-width: 736px) {
    #actor_aspect .substance-menu > ul {
        grid-auto-flow: row;
        grid-auto-columns: 1fr;
        border: 1px solid var(--vapa-white);
    }
}


/* !--- Single tabs */
#actor_aspect .aspect-item {
    padding: 0 16px 0 16px;
    margin: 0;
    width: 100%;
}

#actor_aspect .aspect-item.item-active {
    background: var(--vapa-white);
}

/* Illustrated buttons (incl. flyouts) */
#actor_aspect .aspect-item > .menu-action, 
#actor_aspect .aspect-item > .view-action {
    font: var(--textset-m);
    padding: 68px 0 8px 0;
    text-align: center;
    width: 100%;
    background: transparent center 8px no-repeat;
}

#actor_aspect .aspect-item > .view-action:after {
    top: 100%;
    margin-top: -26px;
}

#actor_aspect .aspect-item:before {
    bottom: -8px;
}

#actor_aspect .aspect-item .flyout-host {
    top: 100%;
    max-height: calc(100dvh - var(--navigation-main-height) - var(--navigation-aspect-height) - 16px);
}

#actor_aspect .aspect-item:last-child .flyout-host {
    left: auto;
    right: 0;
    transform: none;
}

#actor_aspect .aspect-item.item-active > .menu-action, 
#actor_aspect .aspect-item.item-active > .view-action {
    font-weight: 600;
    border-bottom: var(--line-master);
}

@media only screen and (max-width: 736px) {
    #actor_aspect .aspect-item {
        padding: 0;
    }
    
    #actor_aspect .aspect-item.flyout-active:before {
        left: 80px;
    }

    #actor_aspect .aspect-item:not(:first-child) {
        border-top: 1px solid var(--vapa-white);
    }
    
    #actor_aspect .aspect-item > .menu-action, 
    #actor_aspect .aspect-item > .view-action {
        padding: 16px 0 16px 64px;
        text-align: left;
        background-position: 12px center;
        background-size: 38px;
    }
    
    #actor_aspect .aspect-item > .view-action:after {
        top: unset;
        margin-top: 0;
        right: 8px;
    }

    #actor_aspect .aspect-item.item-active > .menu-action, 
    #actor_aspect .aspect-item.item-active > .view-action {
        font-weight: 600;
        border-bottom: none;
        border-left: var(--line-master);
    }
    
    #actor_aspect .aspect-item .flyout-host {
        width: 100%;
        top: 0;
        margin-bottom: 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        max-height: none;
    }
}


/* !--- Aspect icons */
#actor_aspect .aspect-item.item-emergency .menu-action {
    background-image: url("./img/illus/navigation/aspect_emergency_external.svg");
}

#actor_aspect .aspect-item.item-doctors .menu-action {
    background-image: url("./img/illus/navigation/aspect_doctors_external.svg");
}

#actor_aspect .aspect-item.item-diagnosis .menu-action {
    background-image: url("./img/illus/navigation/aspect_diagnosis_external.svg");
}

#actor_aspect .aspect-item.item-biomedical .view-action {
    background-image: url("./img/illus/navigation/aspect_biomedical_external.svg");
}

#actor_aspect .aspect-item.item-identification .menu-action {
    background-image: url("./img/illus/navigation/aspect_general_external.svg");
}

#actor_aspect .aspect-item.item-distribution > .menu-action, 
#actor_aspect .aspect-item.item-distribution .view-action {
    background-image: url("./img/illus/navigation/aspect_distribution_external.svg");
}


/* -------------------------------------------- */
/* !ACTOR: Content explorer sidebar */
/* -------------------------------------------- */

/* !--- Grand container */
#actor_explorer {
    border-top: var(--line-master);
}

#actor_explorer .substance-menu {
    padding: 16px;
}

.ensemble.expression-land #actor_explorer {
    background: var(--vapa-land-light);
}

.ensemble.expression-hybrid #actor_explorer {
    background: var(--vapa-hybrid-light);
}

.ensemble.expression-water #actor_explorer {
    background: var(--vapa-water-light);
}

.ensemble.expression-general #actor_explorer {
    background: var(--vapa-general-light);
}

/* Only in mobile drawer: Explorer headline (taken from active Aspect tab) */
#actor_explorer h2 {
    display: none;
}

@media only screen and (max-width: 736px) {
    #actor_explorer h2 {
        display: block;
        font: var(--textset-l);
        margin: 16px 0 0 0;
        padding: 0 var(--mobile-gutter) 0 var(--mobile-gutter);
    }
    
    #actor_explorer h2 em {
        font-weight: 400;
    }
}

/* Only on desktop viewports: attach sidebar to top of viewport while scrolling */
@media only screen and (min-width: 737px) {
    #actor_explorer.fixed-nav {
        position: fixed !important;
        top: var(--nav-top) !important;
        left: var(--nav-left) !important;
        max-height: var(--nav-height) !important;
        overflow-y: auto;
    }
}


/* !--- Sidebar groups */
#actor_explorer .substance-menu ul[role="menubar"] {
    /* List of scroll links only shown for expanded collapsible sections */
    > .menu-item.item-collapsible:not(.item-active) .section-directory {
        display: none;
    }
    
    /* If we're 2 levels deep, we have to analyze the deepest collapsible menu item  */
    > .menu-item.item-active .menu-section.section-deep ul[role="menubar"] > .menu-item:not(.item-active) .section-directory {
        display: none;
    }
}

/* Icon highlight for penultimate level in deep menus */
#actor_explorer .substance-menu .menu-section.section-deep .menu-item.item-active .menu-action.action-icon:before {
    background-color: var(--iconcolor-highlight);
    height: 100%;
    top: 0;
}

@media only screen and (max-width: 736px) {
    #actor_explorer .substance-menu .section-qualifier {
        margin-right: var(--mobile-gutter);
        margin-left: var(--mobile-gutter);
    }
}


/* !--- Single sidebar entries */
#actor_explorer .substance-menu .menu-item.item-active > .menu-action {
    font-weight: 600;
}

/* Neutralize undesired inheritance from content headlines */
#actor_explorer .substance-menu .menu-item .menu-action strong {
    font-weight: inherit;
}


/* -------------------------------------------- */
/* !ACTOR: Mobile breadcrumb + menu controller */
/* -------------------------------------------- */

/* !--- Grand container */
#actor_breadcrumb {
    grid-template-columns: auto 107px;
    border-bottom: var(--line-master);
    padding: 12px var(--mobile-gutter) var(--mobile-gutter) var(--mobile-gutter);
    
    /* VAP-201 EXPERIMENTAL */
	position: sticky;
	top: 0px;
	z-index: 9;
    
    /* Portal logo */
    .breadcrumb-logo {
        grid-row: 1;
        grid-column: 2;
    }
    
    /* Menu controller */
    .primary-action {
        grid-row: 1;
        grid-column: 1;
        left: calc(-1 * var(--mobile-gutter));
        width: min-content;
    }
    
    /* Alternative Drawer opener */
    .breadcrumb-pathlink {
        display: block;
        width: 100%;
        grid-row: 2;
        grid-column: 1 / 3;
    }
}

/* Section-dependent background */
.ensemble.expression-land #actor_breadcrumb {
    background: var(--vapa-land);
}

.ensemble.expression-hybrid #actor_breadcrumb {
    background: var(--vapa-hybrid);
}

.ensemble.expression-water #actor_breadcrumb {
    background: var(--vapa-water);
}

.ensemble.expression-general #actor_breadcrumb {
    background: var(--vapa-general);
}


/* !--- Portal logo */
#actor_breadcrumb .breadcrumb-logo {
    overflow: hidden;
    text-indent: -1000em;
    width: 107px;
    height: 15px;
    margin-top: 8px;
    background: transparent right top url("./img/logos/logo_pages_mobile.svg") no-repeat;
    
    a {
        display: block;
        width: 100%;
        height: 100%;
    }
}

/* Interaction states */
@media (hover: hover) {
    #actor_breadcrumb .breadcrumb-logo:has(a:hover) {
        opacity: 0.5;
        transition: var(--transition-universal);
    }
}

#actor_breadcrumb .breadcrumb-logo:has(*:focus-visible) {
    outline: 1px solid var(--vapa-black-80);
    outline-offset: 8px;
    transition: var(--transition-universal);
}


/* !--- Actual breadcrumb */
#actor_breadcrumb .breadcrumb-path {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   margin-top: 16px;
   
   .path-node:not(:first-child):before {
       content: "→";
       display: inline-block;
       margin: 0 0.4em 0 0.4em;
   }
   
   .path-node:last-child {
       font-weight: 600;
   }
}


/* Interaction states */
@media (hover: hover) {
    #actor_breadcrumb .breadcrumb-pathlink:hover {
        text-decoration: underline;
        transition: var(--transition-universal);
    }
}

#actor_breadcrumb .breadcrumb-pathlink:active, 
#actor_breadcrumb .breadcrumb-pathlink:focus-visible {
    outline: none;
    color: var(--textcolor-link-focus);
    text-decoration: underline;
    transition: var(--transition-universal);
}


/* -------------------------------------------- */
/* !ACTOR: Footer directory */
/* -------------------------------------------- */

/* !--- Grand container */
#actor_directory {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--width-1col);
    row-gap: 16px;
    border-top: var(--line-master);
    padding: 16px 16px 0 16px;
    background: var(--vapa-general-light);
}

.stage-home #actor_directory {
    background: none;
    justify-content: space-around;
    padding-top: 0;
}

@media only screen and (max-width: 736px) {
    #actor_directory {
        flex-direction: column;
        padding-left: var(--mobile-gutter);
        padding-right: var(--mobile-gutter);
    }
}


/* !--- Section arrangement */
#actor_directory .directory-block {
    width: var(--width-3col);
}

#actor_directory .directory-app {
    width: var(--width-5col-plus);
}

/* Subline with legal links + global search */
#actor_directory .directory-block.directory-legal {
    border-top: var(--line-master);
    background: var(--vapa-white);
    padding: 16px 16px 32px 16px;
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
}

.stage-home #actor_directory .directory-block.directory-legal {
    border-top: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

@media only screen and (max-width: 736px) {
    #actor_directory .directory-block {
        width: 100%;
    }
    
    .stage-home #actor_directory .directory-block.directory-legal {
        margin: 0;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
}


/* !--- Single section */
#actor_directory .directory-block {
    font: var(--textset-s);
}

/* Section headlines */
#actor_directory .directory-block h2 {
    font: var(--textset-m);
    font-weight: 600;
    margin-bottom: 8px;
}

#actor_directory .directory-block.directory-legal h2 {
    margin-bottom: 0;
}

/* Standard directory links */
#actor_directory .directory-block .menu-action {
    font: var(--textset-s);
}

.stage-home #actor_directory .directory-block .menu-action {
    font: var(--textset-m);
}

@media only screen and (max-width: 736px) {
    #actor_directory .directory-block h2, 
    #actor_directory .directory-block.directory-legal h2 {
        margin-bottom: 8px;
    }

    #actor_directory .directory-block li:not(:last-child) {
        margin-bottom: 4px;
    }
    
    #actor_directory .directory-block .menu-action {
        font: var(--textset-m);
    }
}


/* !--- App advertising */
#actor_directory .directory-app {
    --asset-width: calc(var(--width-3col) - 16px);
    --asset-padding: var(--width-3col);
    
    /* Screenshot + description */
    .app-descript {
        padding-left: var(--asset-padding);
        background: transparent top left url("./img_fake/Image_theSnakebiteAssApp_TEMP.jpg") no-repeat;
        background-size: var(--asset-width);
        min-height: 120px;
    }
    
    /* Links to app stores */
    .app-links {
        display: flex;
        flex-direction: row;
        row-gap: 16px;
        column-gap: 16px;
        margin-top: 16px;
    }
    
    .link-item {
        display: block;
        width: var(--asset-width);
        height: 50px;
        background: transparent top left no-repeat;
        background-size: contain;
        overflow: hidden;
        text-indent: -1000em;
        transition: var(--transition-universal);
    }
    
    .link-item.link-google {
        background-image: url("./img/illus/appstore_google.svg");
    }

    .link-item.link-apple {
        background-image: url("./img/illus/appstore_apple.svg");
    }
    
    /* Interaction states */
    @media (hover: hover) {
        .link-item:hover {
            opacity: 0.6;
            transition: var(--transition-universal);
        }
    }
    
    .link-item:focus-visible {
        outline: 1px solid var(--vapa-black-80);
        outline-offset: 4px;
        transition: var(--transition-universal);
    }
}

@media only screen and (max-width: 736px) {
    #actor_directory .directory-app {
        --asset-width: calc(50dvw - 16px);
        --asset-padding: 50dvw;

        /* Screenshot + description */
        .app-descript {
            background-size: 120px;
            padding-left: 136px;
            min-height: 100px;
        }

        .link-item {
            flex-grow: 1;
            width: auto;
        }
    }
}


/* !--- Legal links & global search */
#actor_directory .directory-legal {
    display: flex;
    align-items: center;
    column-gap: 32px;
}


#actor_directory .directory-legal ul {
    display: flex;
    align-items: center;
    column-gap: 32px;
}

/* Desktop viewports */
@media only screen and (min-width: 736px) {
    .stage-home #actor_directory .directory-legal h2 {
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
        margin: -1px;
    }
}

/* Phone viewports */
@media only screen and (max-width: 736px) {
    #actor_directory .directory-legal {
        flex-direction: column;
        align-items: unset;
    }
    
    #actor_directory .directory-legal ul {
        flex-direction: column;
        align-items: unset;
    }
}


/* !--- Back top top button */
/* Desktop viewports: hide button */
@media only screen and (min-width: 736px) {
    #actor_directory > .primary-action.icon-top {
        display: none;
    }
}

/* Mobile viewports */
@media only screen and (max-width: 736px) {
    #actor_directory > .primary-action.icon-top {
        position: fixed;
        top: 12px;
        right: auto;
        left: 50%;
        margin-left: calc(-1 * var(--primary-icon-width) / 2);
        z-index: 10;
    }
    
    /* Hide it when the drawer is open or we're on the homepage */
    .stage-home #actor_directory > .primary-action.icon-top,
    #ensemble_head.item-active ~ #ensemble_foot  #actor_directory > .primary-action.icon-top {
        display: none;
    }
}


/* !--- INTERNAL: environment marker + versions */
.stage:is(.environment-prototype, .environment-dev, .environment-preview) {
    --environment-backcolor: var(--vapa-black-80);
    
    /* Infobox for version marker */
    #actor_directory:before {
        display: block;
        position: absolute;
        bottom: calc(100% + 4px);
        left: 0;
        width: 100%;
        font: var(--textset-xs);
        font-weight: 600;
        background: var(--environment-backcolor);
        color: var(--vapa-white);
        padding: 2px 4px 0 4px;
        width: min-content;
        white-space: nowrap;
        letter-spacing: var(--spacing-env-marker);
    }
    
    #actor_directory {
        border-top-color: var(--environment-backcolor);
    }
    
    /* Static prototype */
    &.environment-prototype #actor_directory:before {
        content: var(--env-marker-prototype) attr(data-serverversion);
    }
    
    /* DEV servers */
    &.environment-dev {
        --environment-backcolor: #E84E0F;

        #actor_directory:before {
            content: var(--env-marker-dev) attr(data-serverversion);
        }
        
    }
    
    /* PREVIEW servers */
    &.environment-preview {
        --environment-backcolor: #F6A000;
    
        #actor_directory:before {
            content: var(--env-marker-preview) attr(data-serverversion);
            color: var(--vapa-black);
        }
    }
}