/* Flexbox container for the two charts */
  .chart-flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 40px;
    /* Reduced layout-breaking gap */
    width: 100%;
    flex-wrap: wrap;
    /* Allows stacking on mobile */
    box-sizing: border-box;
    padding: 10px;
  }

  /* Individual chart columns */
  .chart-column {
    flex: 1;
    min-width: 280px;
    /* Prevents shrinking too far */
    max-width: 440px;
    /* Constrains growth on large displays */
    box-sizing: border-box;
  }

  .gender-chart-wrapper {
    width: 100%;
    margin: 0 auto;
    /* Removed padding-left: 110px to keep it centered on mobile */
  }

  /* Responsive SVG Annotation adjustments */
  @media (max-width: 600px) {
    [data-chart-type="gender"] {
      height: auto !important;
    }

    .chart-flex-container {
      gap: 20px !important;
      /* Extra separation space when stacked */
    }

    /* Scaling down the text labels slightly on mobile so they fit the viewport */
    .annotation-svg text {
      font-size: 18px !important;
    }

    .annotation-svg tspan[font-size="16"] {
      font-size: 13px !important;
    }
  }