.line-chart {
  --chart-surface: #0e0e18;
  --chart-border: rgba(251, 247, 236, 0.08);
  --chart-grid: rgba(251, 247, 236, 0.06);
  --chart-tick: rgba(251, 247, 236, 0.35);
  --chart-muted: #7a7f8a;
  --chart-height: 12rem;
  --chart-pad: 1.5rem;

  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: var(--chart-pad);
  background-color: var(--chart-surface);
  border: 0.01px solid var(--chart-border);
  border-radius: 1.25rem;

  /* Floating callout, overlaying the top of the plot */
  .line-chart-badge {
    position: absolute;
    top: var(--chart-pad);
    right: var(--chart-pad);
    z-index: 2;
    padding: 0.35rem 0.8rem;
    background-color: color-mix(
      in srgb,
      var(--series-color, var(--chart-muted)) 16%,
      transparent
    );
    border: 0.01px solid
      color-mix(
        in srgb,
        var(--series-color, var(--chart-muted)) 22%,
        transparent
      );
    border-radius: 999px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--series-color, var(--chart-muted));
    white-space: nowrap;
  }

  /* When the series climbs into the top-right corner there is no room to
     overlay the callout, so this variant sits above the plot instead */
  .line-chart-badge-above {
    position: static;
    align-self: flex-end;
  }

  /* y-axis labels | plot area, with the x-axis under the plot only */
  .line-chart-plot {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto auto;
    column-gap: 0.6rem;
  }

  .line-chart-y-axis,
  .line-chart-x-axis,
  .line-chart-tick {
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--chart-tick);
    white-space: nowrap;
  }

  /* Zero-height ticks so each label centres on its gridline */
  .line-chart-y-axis {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    .line-chart-tick {
      line-height: 0;
    }
  }

  .line-chart-canvas {
    grid-area: 1 / 2;
    position: relative;
    height: var(--chart-height);
    border-left: 0.01px solid var(--chart-border);
  }

  .line-chart-grid {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    span {
      height: 1px;
      background-color: var(--chart-grid);
    }
  }

  /* Stretched to the canvas; strokes stay an even width, dots stay round */
  .line-chart-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .line-chart-line {
    fill: none;
    stroke: var(--series-color, var(--chart-muted));
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
  .line-chart-line-lead {
    stroke-width: 2.5;
  }

  /* Zero-width columns so each series of dots centres on its x tick */
  .line-chart-points,
  .line-chart-x-axis {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .line-chart-points {
    position: absolute;
    inset: 0;
  }
  .line-chart-point {
    position: relative;
    width: 0;
    height: 100%;
    /* Zero-width columns need a wider invisible band to be hoverable */
    &::before {
      content: "";
      position: absolute;
      inset: 0 -1.4rem;
    }
  }
  .line-chart-x-axis {
    grid-area: 2 / 2;
  }
  .line-chart-x-axis .line-chart-tick {
    display: flex;
    justify-content: center;
    width: 0;
    padding-top: 0.5rem;
  }

  .line-chart-dot {
    position: absolute;
    left: 0;
    bottom: var(--value);
    width: 0.4rem;
    height: 0.4rem;
    transform: translate(-50%, 50%);
    background-color: var(--series-color, var(--chart-muted));
    border-radius: 50%;
  }
  .line-chart-dot-lead {
    width: 0.5rem;
    height: 0.5rem;
  }

  /* Hover readout, replacing a charting library's tooltip */
  .line-chart-tooltip {
    --shift-x: -50%;
    --shift-y: -0.9rem;
    position: absolute;
    left: 0;
    bottom: var(--value);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    transform: translate(var(--shift-x), var(--shift-y));
    padding: 0.6rem 0.75rem;
    background-color: #141422;
    border: 0.01px solid var(--chart-border);
    border-radius: 0.6rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.18s ease,
      visibility 0.18s ease;
    b,
    span {
      font-size: 0.65rem;
      font-weight: 400;
      color: var(--color-cream);
      white-space: nowrap;
    }
    b {
      font-weight: 500;
      color: var(--chart-tick);
    }
  }
  .line-chart-point:hover .line-chart-tooltip {
    opacity: 1;
    visibility: visible;
  }
  /* Keep the first and last tooltips inside the card */
  .line-chart-point:first-child .line-chart-tooltip {
    --shift-x: -0.5rem;
  }
  .line-chart-point:last-child .line-chart-tooltip {
    --shift-x: calc(-100% + 0.5rem);
  }
  /* Tall points flip under the dot so they clear the badge and card edge */
  .line-chart-tooltip-below {
    --shift-y: calc(100% + 0.9rem);
  }

  .line-chart-axis-label {
    grid-area: 3 / 2;
    padding-top: 0.2rem;
    font-size: 0.6rem !important;
    font-weight: 300 !important;
    color: var(--chart-tick) !important;
    text-align: center;
  }

  .line-chart-legend {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1.4rem;
    span {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      font-size: 0.7rem !important;
      font-weight: 400 !important;
      color: var(--color-gray) !important;
    }
    .line-chart-swatch {
      width: 0.5rem;
      height: 0.5rem;
      background-color: var(--series-color, var(--chart-muted));
      border-radius: 0.15rem;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .line-chart .line-chart-tooltip {
    transition: none;
  }
}