.sheet-wrapper {
   gap: 1.2em;
   display: flex;
   flex-direction: column;

   --cl: var(--pk);
   --rd: .75em;
   --back: var(--bl);

}

.sheet-wrapper.with-actions {
   display: grid;
   grid-auto-flow: column;

}

.sheet-wrapper[data-role="nurse"],
.sheet-wrapper[data-role="scientist"] {
   --cl: var(--med);
}

.sheet-wrapper[data-role="administrator"],
.sheet-wrapper[data-role="secretary"] {
   --cl: var(--yl);
}


/* border styling */
.sheet-left-bar,
.data-sheet,
.post-sheet>* {
   border: var(--brd);
   border-radius: var(--rd);
   background-color: var(--back);
   box-shadow: var(--sh) var(--cl) inset, 0 0 1rem 1rem var(--bl);
}



/* left bar */
.sheet-left-bar {
   display: flex;
   flex-direction: column;

   grid-row: span 2;

   border-top-left-radius: 2rem;

   padding: .5em;
   padding-top: 1em;
   gap: .25em;
   height: fit-content;

   >button {
      border: 0;
      padding: .5em;
   }
}

.sheet-left-bar:empty {
   display: none;
}


button.restore-actions {
   position: absolute;
   margin: .25em;
   top: 0;
   right: 0;
   font-size: .65rem;

   &:hover {
      i {
         opacity: 1;
      }
   }
}

/* main view */
.data-sheet {
   display: grid;

   border-top-right-radius: 5rem;
   min-width: 35vw;

   height: fit-content;

   [data-unit] {
      text-shadow: 0 0 2px var(--cl);
   }

   .section {
      padding-block: 2em;
      padding-left: 3em;
   }

   p {
      margin: 0;
   }
}



/* sections */
div.section {
   border-top: var(--brd);
   padding-block: .75em;
   padding-left: 1em;
   display: grid;
   gap: .75em;

   h3 {
      position: absolute;
      top: -1.2rem;
      text-align: left;
      width: fit-content;
      border: var(--brd);
      border-radius: .5rem;
      padding-inline: .5rem;
      margin: 0;
      margin-left: 1em;
      background-color: var(--bl);
      z-index: 10;
      box-shadow: 0 0 1rem var(--cl);
   }

   strong {
      grid-column: span 2;
   }
}

.section.col-2 {
   grid-template-columns: 1fr 1fr;
}

.data-sheet div.section:last-of-type {
   padding-bottom: 1em !important;
}

/* top name */
div.sheet-name {
   padding: 1em 1em 2em 1em;
   display: flex;
   gap: .5em;
   align-items: end;
}

/* vignette */


.sheet-vignette {
   position: absolute;
   right: 0;
   margin: 1em;

   >i {
      background-color: var(--bl);
      border: var(--brd);
      border-radius: 100%;
   }
}

.icon.sheet-icon {
   font-size: 4rem;
   padding: .5rem;
   z-index: 5;
   box-shadow: 0 0 1rem var(--cl);
}

.sheet-icon svg {
   transition: .3s;
}

.icon.sheet-icon:hover svg {
   filter: drop-shadow(0 0 .25rem var(--cl));
}

.icon.sex {
   position: absolute;
   bottom: 0;
   left: 0;
   z-index: 5;
}


/* dismiss warning */

.sheet-warning {
   padding-inline: .5em;
   text-align: center;

   h3 {
      margin: 0;
      border: 0;
   }
}

button.confirm-button {
   padding-inline: 2em;
   box-shadow: 0 0 1rem var(--cl);
   transition: ease-in-out .3s;
}

button.confirm-button:hover {
   text-decoration: underline;
}

/* chat box */

.chatting .data-sheet {
   max-width: 35vw;
}

.chatting .sheet-left-bar {
   padding-top: .5em;
}

.chat-box {
   max-height: 65vh;
   height: fit-content;

   min-width: 20rem;
   max-width: 40vw;

   padding-inline: .5rem;

   overflow: hidden;

   /* direct options */
   >a {
      font-size: 1.1em;
      padding: .5rem;
      display: block;
   }

   >a:not(:first-child) {
      border-top: 1px solid;
   }
}

.twee-context {
   max-height: inherit;
   height: 100%;
   overflow-y: auto;
}

.twee-context[data-type="message"] {
   padding-bottom: .5rem;
}

/* referrer banner*/

.ref-wrapper {

   position: absolute;
   height: 100%;
   width: 100%;
   bottom: 0;
   right: 0;
   font-size: 5rem;
   display: grid;
   place-items: center;
   overflow: hidden;
   opacity: .1;
   pointer-events: none;
}

.ref-banner {
   rotate: 45deg;
   border-block: .1em solid;
   width: 150%;
   text-align: center;
   box-shadow: 0 0 1rem .5rem var(--cl);
}

#popup .ref-banner {
   translate: 1em -1em;
}

#hire-wrapper .ref-banner,
#office .ref-banner {
   translate: 2.5em -.5em;
}

/* post container */
.post-sheet {
   display: flex;
   justify-content: space-between;

   p {
      margin: 0;
   }

   >* {
      padding: 1em;
   }

   >*:first-child {
      border-bottom-right-radius: 1.5em;
   }
}


.hire-button:hover {
   text-decoration: underline;
   letter-spacing: .2em;
}

#hire-wrapper .sheet-wrapper {

   .post-sheet>*:first-child {
      border-radius: var(--rd);
      border-bottom-left-radius: 1.5em;
   }

   .post-sheet>*:nth-child(2) {
      border-bottom-right-radius: 1.5em;
   }
}