#research-wrapper {
   display: grid;
   gap: 1rem;
   overflow: visible;

   padding: 0;
}


/* tree */
#tree-wrapper {
   height: 80vh;
   padding: 0;
   background-color: transparent;

   &::after,
   &::before {
      justify-self: center;
      width: calc(100% - 2em);
   }
}

#research-tree {
   display: flex;
   flex-direction: column;
   place-items: center;
   padding-block: 1rem;
   gap: 1.5rem;
   height: 100%;
   overflow: auto;
   scrollbar-width: none;
}

.research-type {
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: minmax(0, 1fr);
   width: 90%;
   gap: 2rem;
   padding-left: 2rem;
   margin-right: 1em;

   &[data-type="generator"]::after,
   &[data-type="facilities"]::after,
   &[data-type="hygiene"]::after {
      font-size: .6em;
   }
}

.research-type::before {
   content: '';

   bottom: 1rem;
   top: 2rem;

   right: -2.5rem;
   left: -1rem;

   position: absolute;
   border: var(--brd);
   border-radius: 1rem;

   background-color: var(--vdg);
   box-shadow: 0 0 .5rem .5rem var(--dg) inset;
}

.research-type::after {
   content: attr(data-type);

   position: absolute;
   bottom: 1rem;
   top: 2rem;

   font-weight: bold;
   writing-mode: vertical-lr;
   text-orientation: upright;
   text-transform: uppercase;
   align-self: center;

   opacity: .4;
}

/* vis toggle */
.research-toggle {
   position: absolute;
   top: 2.5rem;
   right: -2rem;
   padding: 0;
   place-self: center;
   border: 0;
   font-size: .8rem;
}

.research-type:not([open]) {
   margin-block: .5em 2em;

   .research-toggle {
      top: .65em;
   }

   .research-tier {
      display: none;
   }

   &::before {
      top: 0;
      height: 2em;
   }

   &::after {
      top: .5em;
      bottom: unset;
      writing-mode: unset;
      text-orientation: unset;
      letter-spacing: .5em;
      font-size: 1em !important;
   }
}


.research-tier {
   display: flex;
   flex-direction: column;
   padding: 1rem;
   padding-top: .5rem;
   gap: 1rem;
   place-items: center;
   border-radius: 1rem;
   border: var(--brd);
   background-color: var(--bl);
   box-shadow: 0 0 .5rem .5rem var(--bl);
}

.research-tier::before {
   content: attr(data-tier);
}

/* selectable icons */
.research-view {
   display: flex;
   flex-direction: column;
   align-items: center;

   width: 100%;
   min-height: 8rem;
   text-align: center;
   border: 1px solid;
   border-radius: .5rem;
   background-color: var(--vdg);
   box-shadow: 0 0 .5rem .5rem var(--dg) inset;
   padding: .5rem;

   div {
      font-size: .8rem;
   }

   h4 {
      width: 100%;
      border-bottom: 1px solid;
      padding-bottom: .2em;
   }
}

.research-desc [data-icon="locked"] {
   font-size: 1.5em;
   margin-top: 1em;
}

.research-adv {
   margin-top: .5rem;
}

.research-view.locked {
   cursor: not-allowed;
}

.research-view:not(.locked):hover,
.active-research {
   box-shadow: var(--sh) var(--sc);

   hr {
      box-shadow: 0 0 .1rem .1rem var(--sc);
   }

   [data-icon="chevron"] {
      filter: drop-shadow(0 0 .25rem var(--sc)) drop-shadow(0 0 .15rem var(--sc));
   }
}

.research-view.inspired::after {
   content: '! INSPIRED !';
   position: absolute;
   font-size: 1.5rem;
   font-weight: bold;
   letter-spacing: .25rem;
   opacity: .75;
   filter: drop-shadow(0 0 .15rem var(--sc)) drop-shadow(0 0 .25rem var(--sc)) drop-shadow(0 0 1rem black) drop-shadow(0 0 1rem black);
   top: calc(50% - .75rem);
   scale: 1 1.5;
   transition: .3s ease-in-out;
}

.research-view.inspired:hover::after {
   opacity: 0;
}


/* unlock arrows */
.research-view>[data-icon="chevron"] {
   position: absolute;
   font-size: .8rem;
}

[data-icon="chevron"].right {
   left: calc(100% - .1rem);
   top: calc(50% - (1.75em /2));
}

[data-icon="chevron"].down {
   rotate: 90deg;
   top: calc(100% - .1rem);
   left: calc(50% - (1.75em /2));
}

[data-icon="chevron"].up {
   rotate: -90deg;
   bottom: calc(100% - .1rem);
   left: calc(50% - (1.75em /2));
}


/* special placement */
[data-id="sc3"] {
   margin-block: auto;
}

/* project popup */
.research-details {
   display: flex;
   flex-direction: column;

   border: var(--brd);
   border-radius: 1rem;
   padding: 1rem;

   min-height: 12rem;

   min-width: 30vw;
   max-width: 60vw;

   background-color: var(--vdg);
   box-shadow: 0 0 .5rem .5rem var(--dg) inset, var(--popupShadow);

   .research-select,
   h2,
   #res-prog {
      position: absolute;
      place-self: center;
      padding: .2em 1em;
      border: var(--brd);
      background-color: var(--bl);
      border-radius: .5em;

      text-align: center;
      box-shadow: var(--shd);

   }

   h2 {
      top: -1em;
      box-shadow: 0 0 .5em var(--sc) inset, var(--shd);
   }

}

.research-select:hover {
   box-shadow: 0 0 .5em var(--sc) inset, var(--shd);
}

.research-select,
#res-prog {

   width: 15em;

   bottom: -1em;
   text-transform: uppercase;
   padding: .25em !important;
}


.res-desc {
   padding-block: .5em;
}

.res-status {
   display: grid;
   font-size: .9rem;
   padding-bottom: 1em;

   &::before {
      content: '';
      display: block;

      place-self: center;
      width: 12em;
      height: .2em;
      margin-bottom: 1em;
      border-radius: 1em;
      background-color: var(--w);
      box-shadow: 0 0 .5em var(--sc);
   }

   li {
      display: block;
   }

   ul {
      padding-left: 0;
   }

   &:empty {
      display: none;
   }
}

.research-details:has(.research-side:not(:empty)) {
   padding-right: 4rem !important;
}

.research-side {
   position: absolute;
   left: calc(100% - 2.5em);
   top: 1.5em;

   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.research-unlock,
.research-log {
   border: var(--brd);
   padding: .5rem;
   border-radius: .5rem;
   background-color: var(--bl);
   box-shadow: var(--shd);
}

.research-unlock {
   display: grid;
   place-items: center;
   width: max-content;
   gap: .35rem;

   span {
      font-size: .9rem;
   }


   .icon {
      position: absolute;
      top: -1.15rem;
      box-shadow: var(--shd);
      background-color: var(--bl);
   }

}

.research-log {
   span {
      display: none;
   }

   .log-icon {
      width: unset;
      height: unset;
   }
}

/* data points */
#data-points {
   display: flex;
   align-items: center;
   font-size: 1.2rem;
   gap: .5rem;
   width: 5rem;
}