/*
 * A comparison (comparisons/show; tasks/growth/milestones/10, M10f): the
 * trail, the title, the companies in one row of names with their prices
 * (tasks/redesign, D13) 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: 0;
      padding-block-end: var(--space-xs);
      border-block-end: var(--rule-hairline);
    }

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

  /* One column per company from 640px, one under another below it, over a
     double rule like the company header's stat bar. */
  .compare__names {
    display: grid;
    gap: var(--space-sm) var(--space-lg);
    margin: 0;
    padding: var(--space-sm) 0 0;
    border-block-start: var(--rule-heavy);
    list-style: none;

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

  .compare__name {
    display: grid;
    align-content: start;
    gap: var(--space-3xs);
    min-inline-size: 0;
  }

  .compare__company {
    color: var(--color-ink);
    font-family: var(--font-prose);
    font-size: var(--text-h3);
    font-weight: var(--weight-bold);
    line-height: var(--leading-h3);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  .compare__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs);
    margin-block-start: var(--space-2xs);
  }

  .compare__change {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-3xs);
    font-size: var(--text-ui-sm);
  }

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

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

  .compare__chart {
    block-size: 260px;
  }

  /* One column, set left: the peers, then each form under the one before,
     then the export — read top to bottom rather than across. */
  .compare__actions {
    display: grid;
    justify-items: start;
    gap: var(--space-lg);
  }

  .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;
    inline-size: 100%;
    max-inline-size: 32rem;
    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);
    }

    /* The watchlist panel's boxed field, at the button's height so the two
       sit level. */
    & > .search-field__input {
      flex: 1;
      min-inline-size: 10rem;
      block-size: var(--control-height);
    }
  }

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