/*
 * A comparison (comparisons/show; tasks/growth/milestones/10, M10f): the
 * trail, the title and the paragraph, a table per group of metrics, the four
 * charts two to a row from 1024px, and the ways on. The tables are
 * shared/comparison_table and scroll in their own box on a phone.
 */
@layer pages {
  .compare {
    --compare-charts-height: 1440px;

    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    max-inline-size: 90rem;
    margin-inline: auto;

    & > .breadcrumbs {
      margin-block-end: calc(var(--space-md) * -1);
    }

    @media (width >= 1024px) {
      --compare-charts-height: 720px;
    }
  }

  .compare__charts {
    display: grid;
    gap: var(--space-lg);

    @media (width >= 1024px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .compare__chart {
    block-size: 260px;
  }

  .compare__actions {
    display: grid;
    gap: var(--space-md);

    @media (width >= 1024px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .compare__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .compare__add {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-2xs) var(--space-sm);

    & > .compare__label {
      flex-basis: 100%;
      color: var(--color-ink-muted);
      font-size: var(--text-ui-sm);
    }

    & > .field__input {
      flex: 1;
      min-inline-size: 10rem;
    }
  }

  .compare__locked {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs);
    margin: 0;
    font-size: var(--text-ui-sm);
  }
}