#presets-manage {
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 1em;

}

#presets-select {
   display: flex;
   flex-direction: column;
   gap: 1em;
   width: 20vw;

   max-height: 90vh;
   overflow: auto;

   scrollbar-width: none;


   >* {
      background-color: var(--bl);
      border: var(--brd);
      border-radius: .5em;
      padding: .2em .5em;
      height: 3em;
      display: flex;
      align-items: center;
      box-shadow: var(--shd);
   }

   button {
      width: fit-content;
   }

   .preset-select .preset-options {
      position: absolute;
      right: .2em;
   }
}


#person-editor {
   background-color: var(--bl);
   display: flex;
   flex-direction: column;
   gap: .5em;

   max-height: 90vh;
   overflow: auto;
   scrollbar-width: none;

   border: var(--brd);
   border-radius: 1em;
   border-top-left-radius: 5em;

   padding-bottom: 2em;
   box-shadow: 0 0 3em 3em var(--tbl), var(--sh) var(--hl) inset;


   --hl: var(--pk);

   label,
   span {
      display: flex;
      gap: 1em;
      justify-content: space-between;
      place-items: center;
   }

   input,
   textarea {
      min-width: 6em;
      color: var(--w);
      border-radius: .5em;
      border-color: grey;
      text-align: center;
      font-family: inherit;
   }

   label textarea {
      flex-grow: 1;
      min-height: 3.5em;
   }

   input:hover,
   input:focus-visible,
   textarea:hover,
   textarea:focus-visible {
      text-shadow: none;

      border-color: var(--w);
      box-shadow: 0 0 .5em var(--hl) inset;
   }

   /* Hide the spin buttons in WebKit browsers */
   input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
   }

   /* Hide spin buttons in Firefox */
   input[type="number"] {
      -moz-appearance: textfield;
   }

   h3 {
      box-shadow: 0 0 1rem var(--hl);
   }

   .role-choice {
      display: flex;
      padding-top: 1em;
      padding-right: 1em;
      align-self: end;
      gap: .5em;

      button {
         width: 5em;
      }
   }
}

#person-editor[data-role='nurse'],
#person-editor[data-role='scientist'] {
   --hl: var(--sc);
}



#person-editor[data-role='subject'] .subject,
#person-editor[data-role='scientist'] .scientist,
#person-editor[data-role='nurse'] .nurse {
   box-shadow: 0 0 .5em .25em var(--hl) inset;
   text-shadow: var(--pkText);
}

#person-editor[data-role='subject'] .not-sub {
   display: none;
}

input[type="checkbox"] {
   display: none;
}

label:has(input[type="checkbox"]) {
   padding: .5em;
   border: var(--brd);
   border-radius: 1em;
   border: 1px solid grey;

   span {
      padding-inline: 1em;
   }
}

label:has(input[type="checkbox"])::after {
   position: absolute;
   content: '';

   top: 0;

   width: 10em;
   border-radius: 1em;
   border: var(--brd);
   height: 100%;
   box-sizing: border-box;
   margin-left: -.5em;

   box-shadow: 0 0 1em var(--hl) inset;

   transition: .2s ease-in-out;

   margin-left: calc(100% - 10em - .5em);
}

label:has(input[type="checkbox"]:checked)::after {

   margin-left: -.5em;
}

.preset-commit {
   position: fixed;
   place-self: center;
   background-color: var(--bl);
   z-index: 15;
   bottom: -1em;
   box-shadow: var(--shd);

   &:hover {
      letter-spacing: .2em;
      text-shadow: 0 0 .2em var(--hl), 0 0 .1em var(--hl);
       box-shadow: 0 0 .25em .05em var(--hl) inset, var(--shd);
   }

}


#warn-window {
   opacity: 0;
   pointer-events: none;

   position: absolute;
   place-self: center;

   display: flex;
   flex-direction: column;

   border: var(--brd);
   background-color: var(--bl);
   border-radius: 1em;
   padding: 1em;
   box-shadow: 0 0 2em 1em var(--bl);

   outline: 2px solid var(--dr);
   outline-offset: -.5em;

   z-index: 50;
   transition: .2s;
}

#warn-window[open] {
   opacity: 1;
   pointer-events: all;
}