#metrics-wrapper {
   display: grid;
   place-items: center;
   gap: 1rem;
}

/* notifs */

.metrics-notif {
   display: grid;
   grid-template-columns: 1fr 5fr;
   padding-inline: .5rem;
   border: 1px solid;
   border-radius: .5rem;

   i.icon {
      grid-row: span 2;
      width: 2rem;
      place-self: center;
   }

   span {
      font-size: .7rem;
      opacity: .7;
      margin-left: .25rem;
      margin-top: .25rem;
   }

   p {
      border-top: 1px solid grey;
      margin: .25rem;
   }
}

/* graph */
#graph-wrapper {
   height: 100%;
   width: 100%;
   display: grid;

   grid-template-columns: 1fr 8fr;
   gap: 1rem;
}

#graph-toggles {
   display: flex;
   flex-direction: column;
   gap: 1rem;

   label {
      display: flex;
      justify-content: space-between;

      span {
         text-transform: capitalize;
      }
   }
}

#graph-view {
   display: grid;
   border-bottom: var(--brd);
   border-left: var(--brd);
   flex-grow: 100;

   svg {
      max-height: 100%;
      position: absolute;
   }

   g {
      opacity: .15;
   }

   polyline {
      stroke-width: 2px;
      stroke-linecap: round;
      fill: none;
      stroke: var(--w);
   }
}

line.week {
   stroke-width: 2px;
   stroke: grey;
}

line.val-line {
   stroke-width: 1px;
   opacity: 0;
}

text.line-val {
   fill: orange;
   opacity: 0;
   font-size: .8rem;
   filter: drop-shadow(0 0 .25rem var(--bl)) drop-shadow(0 0 .25rem var(--bl)) drop-shadow(0 0 .5rem var(--bl));
   z-index: 10;
}

.graph-warn {
   position: absolute;
   place-self: center;
   text-transform: uppercase;
   color: var(--gr);
   opacity: .25;
   font-size: 5rem;
   z-index: -1;
}


g.stat-active,
g.stat-hl {
   opacity: 1 !important;

   line.val-line,
   text.line-val {
      opacity: 1;
   }
}

[data-stat="orgasms"],
[data-stat="yield"] {
   filter: drop-shadow(0 0 .15rem var(--pk)) drop-shadow(0 0 .25rem var(--pk));
}

[data-stat="earned"],
[data-stat="invested"] {
   filter: drop-shadow(0 0 .15rem var(--yl)) drop-shadow(0 0 .25rem var(--yl));
}

[data-stat="scientists"],
[data-stat="research"] {
   filter: drop-shadow(0 0 .15rem var(--sc)) drop-shadow(0 0 .25rem var(--sc));
}

[data-stat="structures"] {
   filter: drop-shadow(0 0 .15rem orange) drop-shadow(0 0 .25rem orange);
}

[data-stat="nurses"],
[data-stat="subjects"] {
   filter: drop-shadow(0 0 .15rem var(--med)) drop-shadow(0 0 .25rem var(--med));
}