/*
     * Overview time chart. It sits in the page under the focused section
     * and scrolls with that content, including under the bottom tab bar.
     * It is not pinned to the tab bar.
     */
    .ds-overview-spark {
      margin: 0;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
      /* Transparent: no card behind the chart, no divider above it. */
      background-color: transparent;
      position: static;
      z-index: auto;
      padding: var(--ds-space-1) 0 0;
      border-top: 0;
    }
    .ds-overview-spark-body {
      display: flex;
      flex-direction: column;
      gap: var(--ds-space-1);
      width: 100%;
      min-width: 0;
      padding: 0 0 var(--ds-space-2);
      box-sizing: border-box;
      background-color: transparent;
    }
    .ds-overview-spark-plot {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      height: 188px;
      /* Slightly denser than full History hero (--ds-chart-height 200) */
      --ds-chart-height: 188px;
      overflow: hidden;
      background-color: transparent;
    }
    @media (max-width: 640px) {
      .ds-overview-spark-plot {
        height: 168px;
        --ds-chart-height: 168px;
      }
    }
    /* Range chips directly under the chart plot, flush with the right margin; they move with the chart. */
    .ds-overview-chart-range-chips {
      /* Block-level flex so margin-left: auto can push the row to the right edge of the block parent. */
      display: flex;
      align-self: flex-end;
      margin-left: auto;
      margin-right: 0;
      width: max-content;
      max-width: 100%;
      height: 2rem;
      min-height: 2rem;
      flex-shrink: 0;
    }
    .ds-overview-chart-range-chips .ds-tab {
      padding: 0 0.5rem;
      min-width: 2.25rem;
      white-space: nowrap;
    }