/* Mobile Overview: larger donut, full-width legend, left-aligned. */
    @media (max-width: 640px) {
      .ds-overview-charts {
        padding-left: 0;
        padding-right: 0;
        padding-top: var(--ds-space-1);
      }
      .ds-overview-charts--single {
        max-width: none;
      }
      .ds-overview-charts--single .ds-overview-pie-card {
        max-width: none;
        width: 100%;
      }
      /* Single chart: stack pie above legend on small screens (not side-by-side) */
      .ds-overview-charts--single .ds-composition-layout--overview {
        flex-direction: column;
        align-items: stretch;
        gap: var(--ds-space-3);
      }
      .ds-overview-charts--single .ds-composition-layout--overview .ds-composition-chart-wrap {
        /* Mobile pie: stable fixed 12rem - does NOT resize when sections expand/collapse */
        width: 12rem;
        height: 12rem;
        min-width: 12rem;
        max-width: 12rem;
        flex: 0 0 12rem;
        aspect-ratio: 1;
        margin: 0 auto;
      }
      .ds-overview-charts--single .ds-composition-layout--overview .ds-composition-legend {
        width: max-content;
        max-width: 100%;
        min-width: 100%;
        flex: 0 1 auto;
      }
      .ds-overview-pie-card {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        padding: 0;
      }
      .ds-composition-layout,
      .ds-composition-layout--overview {
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
        gap: var(--ds-space-3);
      }
      .ds-composition-layout--overview .ds-composition-chart-wrap,
      .ds-overview-pie-card .ds-composition-chart-wrap {
        /* Mobile pie: stable fixed 12rem - does NOT resize when sections expand/collapse */
        width: 12rem;
        height: 12rem;
        aspect-ratio: 1;
        min-width: 12rem;
        max-width: 12rem;
        margin: 0 auto;
      }
      .ds-composition-layout--overview .ds-composition-legend,
      .ds-overview-pie-card .ds-composition-legend {
        width: max-content;
        max-width: 100%;
        margin: 0;
        padding: 0 0.15rem;
        box-sizing: border-box;
      }
      .ds-composition-layout--overview .ds-composition-legend-item {
        grid-template-columns: 0.55rem minmax(0, 1fr) auto;
        column-gap: 0.65rem;
        width: 100%;
      }
      .ds-composition-layout--overview .ds-composition-legend-label {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        max-width: none;
      }
      .ds-composition-layout--overview .ds-composition-legend-pct {
        min-width: 2.75rem;
        text-align: right;
      }
    }