.person-assignment-token,
.slot-wrap-dummie > .worker-slot-dummie{
    position: relative;
    width: var(--person-token-height);
    height: var(--person-token-height);
    margin: 0 0 1.5rem 1rem;
    flex-shrink: 0;
}

#grid-area .person-assignment-token,
#grid-area .slot-wrap-dummie > .worker-slot-dummie{
    --person-token-height: 3rem; /* zooms with globally changed rem */
}

html>.person-assignment-token {
    font-size: 18px;
}

.person-assignment-token {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    color: white;
    pointer-events: all;
    touch-action: none;
    cursor: grab;
    contain: size style;
}

.slot-wrap-dummie>.worker-slot-dummie {
    pointer-events:none;
}
.slot-wrap-dummie>.worker-slot-dummie .inner {
    width:100%;
    height:100%;
    border-radius: 50%;
    border: outset 0.3rem #fff;
    background-color: #ffffff80;
    background-image: url('../images/icon-work.svg');
    background-repeat: no-repeat;
    background-size: 1.5rem;
    background-position: center;
}

.slot-icon-build .slot-wrap-dummie>.worker-slot-dummie .inner {
    background-image: url('../images/icon-build.svg');
}
.slot-icon-forage .slot-wrap-dummie>.worker-slot-dummie .inner {
    background-image: url('../images/icon-forage.svg');
}
.slot-icon-work .slot-wrap-dummie>.worker-slot-dummie .inner {
    background-image: url('../images/icon-work.svg');
}
.slot-icon-hybrid-work-forage .slot-wrap-dummie>.worker-slot-dummie .inner {
    background-image: url('../images/icon-work-forage.svg');
}
.slot-icon-none .slot-wrap-dummie>.worker-slot-dummie .inner {
    background-image: unset;
}

.fully-trained::before,
.student::before,
.master::before {
    content: 'Student';
    font-size: 0.6rem;
    text-align: center;
    color: black;
    position: absolute;
    top: -1ch;
    width: calc(var(--person-token-height) + 0.5rem);
    background: url('../images/webp/inventory-banner-bg_100.webp');
    background-size: 160% 190%;
    background-repeat: no-repeat;
    z-index: 1;
    background-position-x: 50%;
    outline: 1px solid #2d2013;
    border-radius: 2px;
}
.master::before {
    content: 'Master';
}
.fully-trained::before {
    content: 'Fully trained';
    outline: 1px solid #42b2bd;
    filter: contrast(110%) brightness(120%) saturate(130%);
}

.person-assignment-token>img{
    width: 100%;
    border-radius: 50%;
    pointer-events: none;
    transform-origin: center;
}
.person-assignment-token:hover>img,
.person-assignment-token:hover>img {
    border-radius: 50%;
    border-color: #42b2bd;
    transform: scale(1.2);
    transition: transform 0.1s linear, border 0.1s ease-in-out;
    bottom:0;
}

#unassigned-people .person-assignment-token {
    margin:0;
}

#unassigned-people .person-assignment-token:hover>img {
    transform: scale(1.2) translateX(-0.1em);
    bottom:unset;
    position: absolute;
}


.building:not(.part-of-larger-building)>.slot-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #42b2bd3d;
    box-shadow: inset 0 0 2rem 0 #42b2bd, inset 0 0 0 1px #42b2bd;
    display: none;
    pointer-events: none;
    user-select: none;
}

.building.part-of-larger-building>.slot-overlay {
    display: none;
    pointer-events: none;
    user-select: none;
}

.overlay-person-drag .building.rock.reachable-for-excavation>.slot-overlay,
.overlay-person-drag .building.in-construction:not(.full)>.slot-overlay,
.overlay-person-drag .building:not(.full):not([data-slots="0"])>.slot-overlay {
    display:block;
}

.overlay-person-drag #unassigned-people {
    box-shadow: inset 0 0 2rem 0 #42b2bd, inset 0 0 0 1px #42b2bd;
    min-height: calc(var(--topscreen-bar-height) - 1rem);
}

.overlay-person-drag .selected-adventure:not(.in-progress):not(.completed) {
    box-shadow: inset 0 0 2rem 0 #42b2bd, inset 0 0 0 1px #42b2bd;
}
.overlay-person-drag .selected-adventure:not(.in-progress):not(.completed).drop-target .worker-slot-dummie {
    border-color: #42b2bd;
}
.overlay-person-drag .selected-adventure:not(.in-progress):not(.completed).drop-target h3 {
    color: #42b2bd;
}


.drag-image-overlay-person-drag {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
    touch-action: none;
    height: 4rem;
    border-radius: 50%;
}

.slot-wrap-dummie,
.slot-wrap {
    position: absolute;
    padding: 0;
    bottom: 0.5rem;
    display: flex;
    flex-flow: row;
    flex-wrap: nowrap; /* set to wrap-reverse only when needed to solve an iOS Safari bug */
    pointer-events:none;
    justify-content: start;
    left: 0.5rem;
}

.in-construction .slot-wrap-dummie,
.in-construction .slot-wrap {
    bottom: 0;
    left: 0;
}

/* set to wrap-reverse only when needed to solve an iOS Safari bug */
[data-slots='3'][data-width='1'] .slot-wrap-dummie,
[data-slots='3'][data-width='1'] .slot-wrap,
[data-slots='4'][data-width='1'] .slot-wrap-dummie,
[data-slots='4'][data-width='1'] .slot-wrap,
[data-slots='5'][data-width='2'] .slot-wrap-dummie,
[data-slots='5'][data-width='2'] .slot-wrap,
[data-slots='6'][data-width='2'] .slot-wrap-dummie,
[data-slots='6'][data-width='2'] .slot-wrap,
[data-slots='7'][data-width='2'] .slot-wrap-dummie,
[data-slots='7'][data-width='2'] .slot-wrap,
[data-slots='8'][data-width='2'] .slot-wrap-dummie,
[data-slots='8'][data-width='2'] .slot-wrap,
[data-slots='7'][data-width='3'] .slot-wrap-dummie,
[data-slots='7'][data-width='3'] .slot-wrap,
[data-slots='8'][data-width='3'] .slot-wrap-dummie,
[data-slots='8'][data-width='3'] .slot-wrap,
[data-slots='9'][data-width='3'] .slot-wrap-dummie,
[data-slots='9'][data-width='3'] .slot-wrap,
[data-slots='10'][data-width='3'] .slot-wrap-dummie,
[data-slots='10'][data-width='3'] .slot-wrap,
[data-slots='11'][data-width='3'] .slot-wrap-dummie,
[data-slots='11'][data-width='3'] .slot-wrap,
[data-slots='12'][data-width='3'] .slot-wrap-dummie,
[data-slots='12'][data-width='3'] .slot-wrap{
    flex-wrap: wrap-reverse;
}


.selected-adventure .slot-wrap-dummie {
    position: relative;
}

.selected-adventure .slot-wrap-dummie,
.selected-adventure .slot-wrap {
    bottom: 0;
    left: 0;
    flex-wrap: nowrap;
}





.building.selected>.slot-wrap-dummie,
.building.in-construction>.slot-wrap-dummie {
    display:none;
}

.building.drop-target .worker-slot-dummie .inner {
    border: outset 0.3rem #42b2bd;
}

.building.selected:not(.in-construction)>.slot-wrap {
    display:none;
}

.selected-adventure .person-assignment-token:first-of-type,
.selected-adventure .worker-slot-dummie:first-of-type {
    padding-right: 0.5rem;
    padding-left: 1rem;
    height: var(--person-token-height); /* iOS bugfix */
}
.selected-adventure .person-assignment-token>img,
.building .person-assignment-token>img {
    border: outset 0.3rem #c6b78b;
}
.selected-adventure .person-assignment-token>img {
    height: var(--person-token-height); /* iOS bugfix */
}

.building.rock.drop-target>.info-wrap,
.building:not([data-slots="0"]).drop-target>.info-wrap{
    display: flex;
}
.building:not([data-slots="0"]).drop-target>.info-wrap>.building-top-bar>.name {
    text-align: center;
}
.building:not([data-slots="0"]).drop-target>.info-wrap>.building-top-bar>.name::before{
    content: "Work at ";
}
.building.selected:not([data-slots="0"]).drop-target>.slot-wrap-dummie,
.building.selected:not([data-slots="0"]).drop-target>.slot-wrap {
    display:flex;
    z-index:1;
}
.building:not([data-slots="0"]).drop-target>.info-wrap>.building-top-bar>.delete,
.building:not([data-slots="0"]).drop-target>.info-wrap>.building-controls{
    display: none;
}

/* during adventure/studying */
.in-progress .person-assignment-token,
.selected-adventure.in-progress .person-assignment-token {
    cursor: not-allowed;
}
.in-progress .person-assignment-token>img,
.selected-adventure.in-progress .person-assignment-token>img {
    filter: grayscale(1);
}
.selected-adventure.in-progress .person-assignment-token:hover>img {
    transform: scale(1);
}

.selected-adventure.in-progress .person-assignment-token:first-of-type:hover>img,
.building.in-construction .person-assignment-token:hover>img {
    position: relative;
    transform: scale(1);
    opacity: 1;
    mix-blend-mode: normal;
}
.building.in-construction>.slot-wrap {
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.building.in-construction .person-assignment-token {
    width: calc(var(--countdown-diameter) - var(--countdown-outer-ring));
    height: calc(var(--countdown-diameter) - var(--countdown-outer-ring));
    margin: 3rem 0 0 0;
}
.selected-adventure.in-progress .person-assignment-token:first-of-type>img,
.building.in-construction .person-assignment-token>img {
    mix-blend-mode: soft-light;
    opacity: 0.75;
    transition: opacity 0.3s linear;
}
.building.in-construction .person-assignment-token>img {
    border: none;
}

.base-comparison-better {
    color: green;
}
.base-comparison-worse {
    color: red;
}
.person-assignment-token.debuffed>img {
    outline: solid 0.125rem red;
}