.graph {
  --bar: 24px;
  --value-room: 6ch;
  position: relative;
  margin: 0 0 var(--gap);
  padding: var(--gap) var(--gap) calc(var(--gap) * 2.5);
  font: 11px/1.2 var(--mono);
  text-transform: uppercase;
  border: 1px solid var(--line);
}
.graph::before, .graph::after {
  position: absolute;
  bottom: 8px;
  font-size: 10px;
  opacity: 0.6;
}
.graph::before {
  left: var(--gap);
  content: "Data: " attr(data-key);
}
.graph::after {
  right: var(--gap);
  content: "max " counter(max);
  counter-reset: max var(--max-value);
}

.graphInner {
  position: relative;
  padding-right: var(--value-room);
  background: repeating-linear-gradient(to right, var(--sub) 0 1px, transparent 1px 25%) 0 0/calc(100% - var(--value-room)) 100% no-repeat;
  isolation: isolate;
  container-type: inline-size;
}
.graphInner::after {
  position: absolute;
  top: 0;
  right: var(--value-room);
  bottom: 0;
  z-index: -2;
  border-right: 1px solid var(--sub);
  content: "";
}
.graphInner .label,
.graphInner .label p {
  margin: 8px 0 3px;
  opacity: 0.6;
}

.graphInner .bar {
  --fill-w: calc(var(--data) / var(--max-value) * 100cqw);
  --on-fill: var(--bg);
  --off: 4px;
  --soft-dither: color-mix(in srgb, var(--dither) 55%, transparent);
  --face: linear-gradient(var(--text), var(--text)) 0 0 /
    calc(100% - var(--off)) calc(100% - var(--off)) no-repeat;
  position: relative;
  display: grid;
  grid-template-columns: minmax(max-content, var(--fill-w)) max-content;
  height: var(--bar);
  margin: 0 calc(-1 * var(--value-room)) 8px 0;
  color: transparent;
  line-height: var(--bar);
  white-space: nowrap;
  text-indent: 6px;
  column-gap: calc(1ch + var(--off));
  background: linear-gradient(to right, var(--on-fill) var(--fill-w), var(--text) 0);
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-background-clip: text;
  background-clip: text;
}
.graphInner .bar::before {
  position: absolute;
  z-index: -1;
  width: calc(var(--fill-w) + var(--off));
  height: calc(var(--bar) + var(--off));
  background: var(--face), linear-gradient(var(--bg), var(--bg)) 100% 0/var(--off) var(--off) no-repeat, repeating-conic-gradient(var(--soft-dither) 0 25%, transparent 0 50%) 0 0/4px 4px;
  content: "";
  inset: 0 auto auto 0;
}
.graphInner .bar::after {
  grid-column: 2;
  text-indent: 0;
  content: counter(v);
  counter-reset: v var(--data);
}
.graphInner .bar.hollow, .graphInner .bar.estimate, estrogen-levels .graphInner .bar:not(.solid) {
  --on-fill: var(--text);
  --face:
    linear-gradient(var(--sub), var(--sub)) 1px 1px /
      calc(100% - var(--off) - 2px) calc(100% - var(--off) - 2px) no-repeat,
    linear-gradient(var(--text), var(--text)) 0 0 / calc(100% - var(--off))
      calc(100% - var(--off)) no-repeat;
}

.graphInner .event {
  position: relative;
  margin: 14px 0;
  padding-left: 16px;
}
.graphInner .event p {
  margin: 0;
  font: inherit;
  opacity: 0.85;
}
.graphInner .event::before {
  position: absolute;
  top: calc(0.6em - 4px);
  left: -3.5px;
  width: 8px;
  height: 8px;
  background: var(--accent);
  content: "";
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

estrogen-levels {
  display: block;
}
estrogen-levels > p {
  margin-bottom: 8px;
}
estrogen-levels .graph {
  margin-bottom: 0;
}