main.learn {
  figure[data-chart="series"] {
    --chart-plot-height: 20rem;
    --chart-reserved-ui-height: 6rem;

    min-height: calc(
      var(--chart-plot-height) + var(--chart-reserved-ui-height)
    );
    line-height: 1;

    svg {
      display: block;
      width: 100%;
      height: var(--chart-plot-height);
      outline: 0;
      cursor: crosshair;
      overflow: visible;
      touch-action: pan-y;
      transition: opacity 150ms ease;
    }

    svg:focus-visible {
      outline: 1px solid var(--orange);
      outline-offset: 0.25rem;
    }

    svg[aria-busy="true"] {
      opacity: 0.25;
    }

    > div[data-chart="plot"] {
      position: relative;
    }

    p[role="status"] {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      margin: 0;
      color: var(--white);
      text-transform: uppercase;
      pointer-events: none;
    }

    p[role="status"]:empty {
      display: none;
    }

    > footer {
      display: flex;
      flex-wrap: wrap;
      align-items: start;
      justify-content: space-between;
      gap: 0.5rem 1rem;
      margin: 0.5rem 0 0;
    }

    &:fullscreen {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      padding: 1rem;
      background: var(--black);

      > div[data-chart="plot"] {
        flex: 1;
        min-height: 0;
        display: flex;
      }

      svg {
        flex: 1;
        height: auto;
        min-height: 0;
      }
    }
  }
}