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

/* metrics breakdown */
.section.stats {
   border: var(--brd);
   border-radius: .75em;
   margin-bottom: 1em;
   padding: .75em;
   box-shadow: 0 0 1em 1em var(--dg) inset;

   h4 {
      text-align: center;
      border-bottom: .1em solid;
   }

   h2 {
      font-size: 1.2rem;
      text-transform: uppercase;
      letter-spacing: .5em;
      text-align: center;
   }
}

/* 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 6fr;
   gap: .5rem;
}

#graph-toggles {
   display: flex;
   flex-direction: column;
   max-height: calc(80vh - 1.5em);
   overflow: auto;

   h4 {
      opacity: .7;
      letter-spacing: .25em;
   }

   >div {
      margin-block: .5em;
   }

   label {
      display: flex;
      justify-content: space-between;
      text-transform: capitalize;
   }

   [data-toggle] {
      font-size: .85rem;
   }
}

#graph-view {
   display: grid;
   border: var(--brd);
   border-radius: 1em;
   max-height: calc(80vh - 1.5em);

   svg {
      border-radius: inherit;
      height: 100%;
      width: 100%;
      overflow: visible;
   }

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

   text {
      transition: .3s;
   }

   .line-end-val {
      font-size: 1.1em;
   }
}

/* default group block */
g[data-group]:not(.selected) {
   opacity: .1;

   * {
      filter: none !important;
   }

   .group-grads,
   .val-line,
   text {
      display: none;
   }

}

g.stat-active,
g.stat-hl {
   polyline {
      filter: drop-shadow(0 0 .2rem var(--hl));
      opacity: 1 !important;
   }

   text.line-end-val {
      font-size: 1.5em !important;
   }
}

[data-group-toggles] [data-toggle] {
   /* coloring stats toggles */
   --shCol: var(--hl);
}

[data-group="nt"],
[data-group-toggles="nt"],
[data-group="subs"],
[data-group-toggles="subs"] {
   --hl: var(--pk);
}

[data-group="money"],
[data-group-toggles="money"] {
   --hl: var(--yl);
}

[data-group="research"],
[data-group="med"],
[data-group-toggles="research"],
[data-group-toggles="med"] {
   --hl: var(--sc);
}

[data-group="structures"],
[data-group-toggles="structures"] {
   --hl: var(--orange);
}


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

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

text.line-val,
.line-end-val {
   font-size: 1em;
   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;
   pointer-events: none;
}

.stats-toggle-head .icon {
   position: absolute;
   right: 0;
}

.stats-group-inner {

   display: grid;
   gap: .25em;
   padding: .25em;
   padding-top: .5em;

   max-height: 0;
   overflow: hidden;
   opacity: 0;
   transition: .3s;
}

.stats-group-inner[open] {
   max-height: 15em;
   opacity: 1;
}