body.office-focus {

   header,
   footer,
   #notif-box,
   #speed-wrapper {
      opacity: 0;
      pointer-events: none;
   }

}

#office-wrapper {
   display: grid;
   place-items: center;
}


.interface {
   --mh: 80vh;

   display: grid;
   place-items: center;

   box-shadow: 0 0 4em 4em var(--bl);
   border-radius: 1em;

   animation: int-open .5s ease-in-out forwards;

   &::before {
      content: '';
      position: absolute;

      border: var(--brd);
      border-radius: 1rem;
      background-color: var(--vdg);
      box-shadow: 0 0 1em .75em var(--dg) inset, 0 0 4em 4em var(--bl);

      width: calc(100% + 6em);
      height: calc(100% - 8em);
   }

   >.inner {
      min-height: 50vh;
      max-height: 80vh;
      height: 100%;

      width: 100%;
      background-color: var(--bl);
      box-shadow: var(--shd), 0 0 2em var(--topLight) inset;

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

      overflow: auto;
      scrollbar-width: none;
   }
}

@keyframes int-open {
   0% {
      width: 0;
   }

   100% {
      width: 60vw;
   }
}


#office,
#end-screen,
#stern-interface {
   display: grid;
   place-items: center;

   background-color: var(--bl);
   box-shadow: var(--shd), 0 0 2em var(--topLight) inset;

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

   width: calc(100% - 30vw);
   max-width: 50em;
   height: 79vh;

   #contract {
      width: unset;

      h2:not(:first-child) {
         margin-top: 1em;
      }

      ul:last-of-type {
         padding-bottom: 2em;
      }
   }


   &::after {
      content: '';
      position: absolute;

      border: var(--brd);
      border-radius: 1rem;
      background-color: var(--vdg);
      box-shadow: 0 0 1em .75em var(--dg) inset, var(--shd);

      z-index: -1;
      right: -4rem;
      left: calc((10vw + 2em) * -1);

      height: calc(100% - 6em);
   }
}



#signed {
   padding-block: 1em;
   font-weight: bold;
   display: block;
}

#office::before {
   z-index: 0;
}

#office>.inner {
   display: grid;
   padding: 1em;
   height: 100%;
   width: 100%;
   transition: opacity .2s ease-out;

   &::before {
      z-index: 0;
   }

   .twee-context {
      padding-top: 0;
   }
}

.office-menu {

   position: absolute;
   display: flex;
   width: 15vw;

   flex-direction: column;

}

#left-menu {
   right: calc(100% + 1rem);
   width: 10vw;
   top: 4em;
   gap: .5em;

   display: grid;
   grid-template-columns: 1fr 1fr;
   height: fit-content;

   button {
      box-shadow: var(--shd);
      background-color: var(--bl);
      grid-column: span 2;
      height: fit-content;
   }

   .small-but {
      grid-column: span 1;
   }
}

.section.msg-style {
   display: flex;
   padding: 0;

   border: var(--brd);
   border-radius: .5rem;
   width: inherit;
   background-color: var(--bl);
   filter: drop-shadow(0 0 .25em var(--bl)) drop-shadow(0 0 .25em var(--bl));

   h4 {
      border-bottom: 1px solid;
   }

}

#sys-info {
   position: absolute;
   bottom: 5em;
   right: calc(100% + .75em);
   font-size: .65em;
   opacity: .5;
   text-align: right;
   width: 12vw;

   p {
      margin: .2em;
   }
}

.staff-view {
   display: flex;
   flex-direction: column;
   gap: .5em;
}

.office-shade {
   position: absolute;
   height: 100%;
   width: 100%;
   border-radius: inherit;
   pointer-events: none;
   box-shadow: 0 0 1em .75em var(--bl) inset;
}

/* right */

#right-menu {
   position: absolute;
   left: calc(100% + 1.5em);
   top: 4em;
   max-width: 15vw;

   >* {
      display: flex;
      flex-direction: column;
      border: var(--brd);
      border-radius: .5rem;
      background-color: var(--bl);
      box-shadow: var(--shd);
   }

   >div {
      padding: .25em .5em;
   }

   p {
      margin-block: .25em;
   }
}

.section.msg-style>* {
   padding: .25em .5em;
}

#past-goals {
   padding: .5em;
   gap: .5em;

   div {
      display: flex;
      justify-content: space-around;

      &:first-child {
         font-size: .9rem;
      }

   }

   .goal-entry {
      --hl: rgba(54, 255, 54, 0.712);


      border: 1px solid;
      border-radius: .5em;
      box-shadow: 0 0 1em var(--hl) inset;
      text-shadow: 0 0 .3em var(--hl);
   }

   .goal-entry.failed {
      --hl: rgba(255, 54, 54, 0.712);
   }
}

/* night styling */

.night #office-view {
   --sectionCol: rgb(0, 54, 170);
}

#inter-menu,
#inter-choice {
   display: none;
   gap: 0;

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

.contact-link {
   display: flex;
   gap: .5em;
   align-items: center;
}

#office.night-view {

   #inter-menu,
   #inter-choice,
   #night-disconnect {
      display: flex;
   }

   #inter-choice:empty,
   #inter-menu:empty {
      display: none;
   }
}

#inter-choice {
   margin-top: 1em;
}

#office.interacting {

   #left-menu,
   #inter-menu,
   #night-disconnect {
      cursor: not-allowed;

      button,
      a {
         pointer-events: none;
         opacity: .5;
      }

   }

   #night-disconnect {
      pointer-events: none;
      opacity: 0;
   }

}

#office.inter-done #right-menu,
#office.interacting #right-menu {
   display: none !important;
}

#contacts:empty::after {
   content: 'No contacts';
   padding: .5rem 1rem;
   opacity: .5;
}

#night-disconnect {
   display: none;
   position: absolute;
   justify-self: center;

   background-color: var(--bl);
   box-shadow: var(--shd);
   text-transform: uppercase;

   opacity: 1;
   transition: .5s ease-in-out;

   bottom: -1.1rem;
}

#office .setter-group {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1em;
   width: fit-content;
   place-items: center;
   margin: auto;

   &:not(:first-child) {
      margin-top: 1em;
   }

   &::before {
      grid-column: span 3;
      text-transform: uppercase;
   }

}

[data-group="screen-nav"] *:first-of-type {
   grid-column: span 3;
}

[data-name="preferences"] .setter-group {
   display: flex !important;
   flex-wrap: wrap;
   flex-direction: column;
   width: 100% !important;

   label {
      width: 100%;
   }
}

[data-setting="tfts"] {
   grid-column: span 2;
   display: grid !important;
   place-items: center;
   gap: 1em;
}

/* typos */
#typos {
   display: flex;
   flex-direction: column;
   width: 100%;
   border: var(--brd);
   border-radius: .5em;

   >* {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: .25em .5em;
   }

   div:not(:first-child) {
      border-top: .1em solid;
   }

   button {
      padding: 0;
      border: 0;
   }
}

#typo-wrapper {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   gap: .5em;

   >button {
      width: 30%;
   }
}

.tip {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   padding: 1.5em;
   padding-top: .5em;
   font-size: .9rem;
   border-top: 1px solid;
   opacity: .65;

   &::before {
      content: 'Tip : ';
   }
}


.end-wrapper {
   display: grid;
   text-align: center;
   height: fit-content !important;

   button {
      width: 20em;
      margin: auto;
      font-size: 1.2rem;
      text-transform: uppercase;

      &:hover {
         box-shadow: 0 0 .5em var(--pk);
      }
   }
}

#epilogue {
   position: absolute;
   place-self: center;
   z-index: -1;
   width: 45vw;
   padding-inline: .5em;
}

#log-out {
   position: absolute;
   right: -3.25em;
   bottom: 3.5em;
   padding: .25em;
   font-size: 1rem;
   box-shadow: var(--shd);
}

.prod-visit {
   text-transform: uppercase;
   letter-spacing: .2em;
   font-size: 1.1rem;
   font-weight: bold;
   &:hover {text-decoration: underline;}
}