/* styles/sections/benchmark-bars.css
 * Benchmark as paired bars (Product Teams Proof: z2Hdnf, Sn3vZ, A6xAwb): legend, two groups
 * of With and Without bars, the method line and the paper link. From D a bar's length is its
 * share (--v) of the 560 track (79.545% of the 704 column), as dVXs6 and sOE8q draw them. The
 * 390 frame draws With across the column and Without at fixed lengths (--bar-m). The numbers
 * are the visible text; the bars are aria-hidden. */
@layer sections {
  .proof-bars {
    padding-block: var(--section-md);
  }

  .proof-bars__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-28);
  }

  .proof-bars__copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
  }

  .proof-bars__heading,
  .proof-bars__body,
  .proof-bars__title,
  .proof-bars__row,
  .proof-bars__method p {
    margin: 0;
  }

  .proof-bars__heading {
    font-family: var(--font-display);
    font-size: var(--t-h3-size);
    font-weight: 600;
    line-height: 29px;
    letter-spacing: var(--t-h3-ls);
    color: var(--ink);
  }

  .proof-bars__body {
    font-size: 17px;
    line-height: 26px;
    color: var(--ink-2);
  }

  .proof-bars__evidence {
    display: flex;
    flex-direction: column;
    gap: var(--space-28);
    padding-top: var(--space-8);
    line-height: round(nearest, 1.2em, 1px);
  }

  .proof-bars__legend {
    display: flex;
    align-items: center;
    gap: var(--space-20);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--ink-2);
  }

  .proof-bars__key {
    display: flex;
    align-items: center;
    gap: var(--space-8);
  }

  .proof-bars__key--without {
    gap: var(--space-12);
  }

  .proof-bars__key::before {
    content: "";
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: var(--fern);
  }

  .proof-bars__key--without::before,
  .proof-bars__row--without .proof-bars__bar {
    background: var(--white);
    outline: 1.5px solid var(--fern);
    outline-offset: -0.75px;
  }

  .proof-bars__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
  }

  .proof-bars__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
  }

  /* --v: the bar's share of the track; --bar-m: its M length. Set inline per row. */
  .proof-bars__row {
    --v: 1;
    --bar-m: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-12);
  }

  .proof-bars__bar {
    flex: none;
    width: 100%;
    height: 28px;
    border-radius: 3px;
    background: var(--fern);
  }

  .proof-bars__row--without .proof-bars__bar {
    width: var(--bar-m);
  }

  .proof-bars__value {
    font-size: 16px;
    font-weight: 600;
    color: var(--fern);
  }

  .proof-bars__row--without .proof-bars__value {
    font-weight: 500;
    color: var(--ink-muted);
  }

  .proof-bars__method {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding-top: var(--space-8);
    font-size: 14px;
    color: var(--ink-muted);
  }

  @media (width >= 900px) {
    /* 528 and 704 at 1440; W keeps both, start-aligned in the 1680 row */
    .proof-bars__grid {
      display: grid;
      grid-template-columns: minmax(0, 528fr) minmax(0, 704fr);
      gap: var(--space-48);
      align-items: start;
    }

    .proof-bars__heading {
      line-height: 42px;
    }

    .proof-bars__body {
      font-size: 18px;
      line-height: 27px;
    }

    .proof-bars__row {
      flex-direction: row;
      align-items: center;
    }

    .proof-bars__bar,
    .proof-bars__row--without .proof-bars__bar {
      width: calc(var(--v) * 79.545%);
    }
  }

  @media (width >= 1680px) {
    .proof-bars__grid {
      grid-template-columns: 528px 704px;
    }

    .proof-bars__heading {
      line-height: 50px;
    }
  }
}