:root{
  --bar-fill: var(--blue-500);
  --hd-fill: var(--green-500);
  --fail-fill: var(--red-500);
  --p-fill: var(--yellow-500);
  --c-fill: var(--blue-500);
  --d-fill: var(--teal-500);


  --deleted-fill: var(--blue-200);
  --added-fill: var(--blue-100);

  --fail-text: var(--red-900);
  --p-text: var(--yellow-900);
  --c-text: var(--blue-900);
  --d-text: var(--teal-900);
  --hd-text: var(--green-900);
}

svg {
  max-width: 100%;
  max-height: 100%;
}


svg text{ fill: var(--r-main-color); }


#unclear{
  stop {stop-color: var(--fail-fill)}
  stop:first-child {offset:100%}
  stop:last-child {offset:20%}
}

.reveal span.r-stack {display: inline-grid}
path.tick  {stroke: var(--r-main-color); stroke-width: 0.2pt}
svg.distribution {
  .milestones {
    path.p { stroke: var(--p-fill); stroke-width: 1.0pt; stroke-dasharray: 2;}
    text.p { fill: var(--p-text);}
    path.c { stroke: var(--c-fill); stroke-width: 1.0pt; stroke-dasharray: 2;}
    text.c { fill: var(--c-text);}
    path.d { stroke: var(--d-fill); stroke-width: 1.0pt; stroke-dasharray: 2;}
    text.d { fill: var(--d-text);}
    path.hd { stroke: var(--hd-fill); stroke-width: 1.0pt; stroke-dasharray: 2;}
    text.hd { fill: var(--hd-text);}
    text {font-size: 0.5em}
  }
  .year2024{
  rect { transition: height 0.5s ease-in-out; }
  &.visible {
          .range0-5 {height: 48px;}
          .range5-10 {height: 21px;}
          .range10-15 {height: 18px;}
          .range15-20 {height: 12px;}
          .range20-25 {height: 6px;}
          .range25-30 {height: 3px;}
          .range30-35 {height: 12px;}
          .range35-40 {height: 11px;}
          .range40-45 {height: 5px;}
          .range45-50 {height: 0px;}
          .range50-55 {height: 199px;}
          .range55-60 {height: 42px;}
          .range60-65 {height: 63px;}
          .range65-70 {height: 31px;}
          .range70-75 {height: 39px;}
          .range75-80 {height: 33px;}
          .range80-85 {height: 8px;}
          .range85-90 {height: 6px;}
          .range90-95 {height: 4px;}
          .range95-100 {height: 7px;}
  }
  }

  rect, .axes path  {fill: var(--bar-fill); stroke: var(--r-main-color); stroke-width:0.2pt;}
  .fail rect {fill: var(--fail-fill);}
  .hd rect {fill: var(--hd-fill);}
  .d rect {fill: var(--d-fill);}
  text.fail {fill: var(--fail-text);}
  text.hd {fill: var(--hd-text);}
  rect.deleted {fill: var(--deleted-fill);}
  rect.added {fill: var(--added-fill); opacity: 0.4; stroke-dasharray:2; stroke: var(--teal-100)}

  rect.unclear {
          opacity: 0;
          fill: url(#unclear); stroke: none;
          transition: opacity 0.7s linear;
          &.visible {
          opacity: 1;
          }
  }
}
.axes {
  text {font-size: 0.15em}
  .xaxis text {transform: translate(0,10); text-anchor: middle; }
  .yaxis text {transform: translate(-2,0); text-anchor: end; }
  path {marker-end:url(#head);stroke-linecap:butt;}
}


.diagram {max-width: 90vh; max-height: 90vh;}
.diagram div h4 {text-align: center}
.logo {position: fixed; top: 50%; left:0%; transform:translate(0,-50%)}

.feedbackDiagram {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.7em;
  > div:not(.levels) { border: 1px solid black; }
  .name {
  font-weight: bold;
  width: 100%;
  }
  > div.levels {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  column-gap: 30px;
    > div { border: 1px solid black; }
  }
}

svg.pace {
  text {
    font-size: 0.2em;
  }

  path:not(.patharrow) {
    stroke-dasharray: 350;
    stroke-dashoffset: 350;
    transition: stroke-dashoffset 1s linear;
  }
  path.patharrow{ transition: opacity 0.9s step-start; opacity: 0;}
  g.visible path {
    stroke-dashoffset: 0;
  }
  g.visible path.patharrow{ transition: opacity 0.9s step-end; opacity: 1;}

  }

svg.trimester {
  max-width:  70%;
  max-height:  70%;
  aspect-ratio: auto;
  .axis path {
    stroke: var(--r-main-color);
     stroke-width: 4;
     stroke-dasharray: 800;
  }

  .axis text { text-anchor: middle; }
  path {
     stroke-linecap: butt;
     stroke-width: 3;
     fill: none;
     transition: stroke-dashoffset 1s linear,
                 marker-end 1s allow-discrete step-end;
    }
    g.visible path{
     marker-end: url(#thead);
     stroke-dashoffset: 0;
    }
    #thead path{stroke-width: 1}
    g:not(.visible){
      path{
       transition: stroke-dashoffset 1s linear,
                   marker-end 1s allow-discrete step-start;
      }
    &.hd path, path.hd  {
      stroke-dashoffset: 1080;
    }
    &.d  path, path.d  {
      stroke-dashoffset: 968;
    }
    &.c  path, path.c  {
      stroke-dashoffset: 904;
    }
    &.p  path, path.p  {
      stroke-dashoffset: 824;
    }
    &.axis path {
      stroke-dashoffset: 800;
    }
    }
    .hd{ stroke: var(--hd-fill);
      stroke-dasharray:  1080;
    }
    .d{ stroke: var(--d-fill);
      stroke-dasharray:  968;
    }
    .c{ stroke: var(--c-fill);
      stroke-dasharray:  904;
    }
    .p{ stroke: var(--p-fill);
      stroke-dasharray:  824;
    }
}

svg.portfolio{
  path.artefact{
    stroke:black;
  }
  text{
    font-size: 0.9em;
    dominant-baseline: middle;
    &.large{
      font-size: 4em;
      transform: rotate(0.75turn);
      }
  }
  path.pass{ fill: var(--green-200);}
  path.credit{ fill: var(--blue-200);}
  path.distinction{ fill: var(--red-200);}
  path.hd{ fill: var(--teal-200);}
  }
}