/* Chart + legend hug as one group (no full-bleed % column) */
    .ds-composition-layout {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: var(--ds-space-4) var(--ds-space-5);
      width: 100%;
    }
    .ds-composition-chart-wrap {
      width: 8.5rem;
      height: 8.5rem;
      flex-shrink: 0;
    }
    .ds-composition-chart-wrap canvas {
      width: 100% !important;
      height: 100% !important;
    }
    /* Overview pies: tap chart toggles legend % ↔ $ (shared localStorage pref) */
    .ds-composition-layout--overview .ds-composition-chart-wrap--metric-toggle {
      cursor: pointer;
    }
    .ds-composition-layout--overview .ds-composition-chart-wrap--metric-toggle:focus-visible {
      outline: 2px solid var(--ds-brand-hero, #2f9e78);
      outline-offset: 2px;
      border-radius: 4px;
    }
    .ds-composition-legend {
      list-style: none;
      margin: 0;
      padding: 0;
      flex: 0 1 auto;
      width: max-content;
      max-width: min(16rem, 100%);
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }
    .ds-composition-legend-item {
      display: grid;
      grid-template-columns: 0.55rem auto auto;
      column-gap: 0.5rem;
      row-gap: 0.15rem;
      align-items: start;
      justify-content: start;
      font-size: var(--ds-text-caption);
      color: var(--ds-text-secondary);
    }
    .ds-composition-swatch {
      width: 0.55rem;
      height: 0.55rem;
      border-radius: 2px;
      flex-shrink: 0;
      margin-top: 0.2em;
    }
    .ds-composition-legend-label {
      min-width: 0;
      max-width: none;
      white-space: normal;
      overflow: visible;
      text-overflow: unset;
      word-break: break-word;
      line-height: 1.3;
    }
    .ds-composition-legend-pct {
      color: var(--ds-text);
      font-variant-numeric: tabular-nums;
      font-weight: var(--ds-weight-medium);
      text-align: right;
      white-space: nowrap;
    }
    /*
     * Overview tiles: pie above legend. Legend is width authority (full labels);
     * chart wrap stretches to the same width (square via aspect-ratio).
     */
    .ds-composition-layout--overview {
      display: inline-flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: stretch;
      justify-content: flex-start;
      gap: var(--ds-space-3);
      width: max-content;
      max-width: 100%;
      min-width: 8.5rem;
    }
    .ds-composition-layout--overview .ds-composition-chart-wrap {
      width: 100%;
      height: auto;
      aspect-ratio: 1;
      min-width: 8.5rem;
      flex-shrink: 0;
    }
    .ds-composition-layout--overview .ds-composition-legend {
      width: max-content;
      max-width: 100%;
      min-width: 100%;
      box-sizing: border-box;
    }
    .ds-composition-layout--overview .ds-composition-legend-label {
      white-space: normal;
      overflow: visible;
      text-overflow: unset;
      max-width: none;
      line-height: 1.3;
    }
    .ds-composition-layout--overview .ds-composition-legend-item {
      grid-template-columns: 0.55rem minmax(0, 1fr) auto;
      align-items: start;
    }
    @media (min-width: 700px) {
      .ds-overview-pie-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        min-width: 0;
        width: max-content;
        max-width: 100%;
        box-sizing: border-box;
      }
      /* Single Overview chart: card stretches (pie | legend row) — not max-content float */
      .ds-overview-charts--single .ds-overview-pie-card {
        width: 100%;
        max-width: 36rem;
        align-items: stretch;
      }
      .ds-composition-layout {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--ds-space-3);
        width: 100%;
        min-width: 0;
      }
      /* Keep single-chart row layout (overrides stacked .ds-composition-layout above) */
      .ds-overview-charts--single .ds-composition-layout--overview {
        flex-direction: row;
        align-items: center;
        width: 100%;
      }
      .ds-composition-layout--overview .ds-composition-legend {
        width: max-content;
        max-width: 100%;
        min-width: 100%;
      }
      .ds-overview-charts--single .ds-composition-layout--overview .ds-composition-legend {
        width: auto;
        min-width: min(12rem, 100%);
        max-width: none;
        flex: 1 1 auto;
      }
      .ds-composition-legend-label {
        max-width: none;
      }
    }