/* styles/sections/benchmark-spread.css
 * Autonomy Benchmark (U1hfcI, NaJCD, c0EMG4): a head over a three-column spread (WITH BRIEF,
 * WITHOUT, CHANGE) of three measured rows, between ink rules. The lead row's cell bars are
 * Pencil exports per frame width (Yir8g), decorative; the numbers carry the data and each value
 * names its column for screen readers. Columns: 1fr 1fr and a fixed change column, which gives
 * the frames' 500/500/200 at 1440 and 700/700/200 at 1920. */
@layer sections {
  .bench-section {
    padding-block: 76px 72px;
  }

  .bench-section__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
  }

  .bench-section__head {
    padding-top: var(--space-16);
  }

  .bench-section__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
  }

  /* The caption sits a section gap under the spread (K4NhB1, dltOM) */
  .spread-figure {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
    margin: 0;
  }

  /* The lead values scale with the spread below each frame's width, so "8 of 8" keeps one line
     in the narrower columns between frames (44 of 342 on M, 120 of 1280 on D, 168 of 1680 on W). */
  .spread {
    container: spread / inline-size;
    --spread-cols: minmax(0, 1fr) minmax(0, 1fr) 72px;
    --spread-gap: var(--space-12);
    box-shadow: inset 0 1px 0 var(--ink), inset 0 -1px 0 var(--ink);
  }

  .spread__head,
  .spread__values,
  .spread__cells {
    display: grid;
    grid-template-columns: var(--spread-cols);
    column-gap: var(--spread-gap);
  }

  .spread__head {
    padding-block: var(--space-14);
    box-shadow: inset 0 -1px 0 var(--line);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    line-height: 13px;
    letter-spacing: 1px;
    color: var(--ink-muted);
  }

  .spread__head span:last-child {
    text-align: right;
  }

  .spread__rows {
    margin: 0;
    padding: 0;
  }

  .spread__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding-block: var(--space-14);
    box-shadow: inset 0 -1px 0 var(--line);
  }

  .spread__row:last-child {
    box-shadow: none;
  }

  .spread__row--lead {
    gap: var(--space-12);
    padding-block: 28px var(--space-32);
  }

  .spread__metric {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    color: var(--ink-muted);
  }

  .spread__values {
    align-items: end;
  }

  .spread__value {
    margin: 0;
    font-family: var(--font-display);
    font-size: 23px;
    font-weight: 600;
    line-height: 21px;
    letter-spacing: -0.29px;
  }

  .spread__row--lead .spread__value {
    font-size: min(44px, 100cqi * 44 / 342);
    line-height: round(nearest, 0.9em, 1px);
    letter-spacing: -1.4px;
  }

  .spread__value--without {
    font-weight: 500;
    color: var(--stat-muted);
  }

  .spread .spread__values .spread__value--change {
    font-size: 20px;
    line-height: 20px;
    letter-spacing: 0;
    text-align: right;
    color: var(--fern);
  }

  .spread__cells img {
    display: block;
    width: 100%;
    height: 14px;
  }

  .spread__cells .spread__bars--d,
  .spread__cells .spread__bars--w {
    display: none;
  }

  @media (width >= 900px) {
    .bench-section {
      padding-block: 128px 120px;
    }

    .bench-section__inner,
    .spread-figure {
      gap: var(--space-40);
    }

    .bench-section__head {
      --head-measure: 900px;
    }

    .spread {
      --spread-cols: minmax(0, 1fr) minmax(0, 1fr) 200px;
      --spread-gap: var(--space-40);
    }

    .spread__value {
      font-size: 32px;
      line-height: 29px;
      letter-spacing: -0.4px;
    }

    .spread__row--lead .spread__value {
      font-size: min(120px, 100cqi * 120 / 1280);
      letter-spacing: -3px;
    }

    .spread .spread__values .spread__value--change {
      font-size: 26px;
      line-height: 26px;
    }

    .spread__cells .spread__bars--m {
      display: none;
    }

    .spread__cells .spread__bars--d {
      display: block;
    }
  }

  @media (width >= 1680px) {
    .bench-section {
      padding-block: 154px 144px;
    }

    /* The W frame sets this heading at display-md (96/91), 1215 wide */
    .bench-section__head {
      --head-measure: 1215px;
    }

    .bench-section__head .section-head__heading {
      font-size: var(--t-display-md-size);
      line-height: 91px;
      letter-spacing: var(--t-display-md-ls);
    }

    .spread__value {
      font-size: 42px;
      line-height: 38px;
    }

    .spread__row--lead .spread__value {
      font-size: min(168px, 100cqi * 168 / 1680);
    }

    .spread__cells .spread__bars--d {
      display: none;
    }

    .spread__cells .spread__bars--w {
      display: block;
    }
  }
}