/* styles/sections/benchmark.css
 * "What the team decides, the agents build" (frames: For Head of AI, Benchmark). The intro is
 * the section-intro split recipe at h3. The results card holds the frame's cell strips (one cell
 * per decision or task, exported from Pencil) beside the measured figures; the strips repeat
 * the figures, so they are hidden from assistive tech and the numbers are text. The card is a
 * size container: where the whole table fits (1440 and 1920, 1151px of content), it shows the
 * table, decisions and merge-ready side by side; otherwise it shows the 390 frame's blocks, one
 * per metric with the strip under each row, two-up where there is room. Never a sideways scroll. */
@layer sections {
  .bench {
    display: flex;
    flex-direction: column;
    gap: var(--space-40);
    margin-top: var(--space-40);
    padding-top: var(--space-40);
    box-shadow: inset 0 1px 0 var(--line);
  }

  .bench__intro {
    --intro-heading-size: var(--t-h3-size);
    --intro-heading-lh: var(--t-h3-lh);
    --intro-heading-ls: var(--t-h3-ls);
    --intro-lede-pad: 0px;
    --intro-lede-size: 17px;
    --intro-lede-lh: 1.6;
  }

  .bench__intro .section-intro__heading {
    text-wrap: wrap;
  }

  .bench__intro .section-intro__lede {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
  }

  .bench__intro .section-intro__lede > p {
    margin: 0;
  }

  .bench__figure-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    margin: 0;
  }

  /* The edge is drawn inside the card, as the frames draw it */
  .bench__card {
    container: bench-card / inline-size;
    padding: var(--space-20);
    outline: 1px solid var(--line);
    outline-offset: -1px;
    border-radius: var(--radius-lg);
    background: var(--white);
  }

  .bench__strip {
    display: block;
  }

  .bench__metric {
    font-weight: 500;
    color: var(--ink);
  }

  .bench__of {
    margin-left: 2px;
    color: var(--ink-muted);
  }

  /* Value and caption; the 390 frame puts the caption first */
  .bench__figure {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: baseline;
    gap: var(--space-10);
    color: var(--ink-muted);
  }

  .bench__figure.is-strong .bench__value {
    color: var(--ink);
  }

  .bench__value {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 500;
    line-height: 0.78;
    letter-spacing: -0.6px;
  }

  .bench__unit {
    font-size: 26px;
    letter-spacing: 0;
  }

  .bench__unit--of {
    margin-inline: 4px;
  }

  .bench__caption {
    padding-bottom: 3px;
    font-size: 13px;
    line-height: 1;
  }

  .bench__full {
    display: none;
  }

  .bench-m {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-32) var(--space-48);
  }

  .bench-m__block {
    flex: 1 1 302px;
    min-width: 0;
  }

  @container bench-card (width >= 1152px) {
    .bench__full {
      display: block;
    }

    .bench-m {
      display: none;
    }
  }

  .bench-m p {
    margin: 0;
  }

  /* Rules sit inside the frame's rows, so each row gives up the rule's pixel */
  .bench-m__head {
    padding-bottom: 9px;
    border-bottom: 1px solid var(--ink-24);
    font-size: 14px;
    line-height: 1.2;
  }

  .bench-m__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    padding: 18px 0 var(--space-12);
  }

  .bench-m__row--with {
    padding: var(--space-12) 0 17px;
    border-bottom: 1px solid var(--line);
  }

  .bench-m__line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }

  .bench-m__label {
    padding-bottom: 3px;
    font-size: 15px;
    line-height: 1;
    color: var(--ink-muted);
  }

  .bench-m__row--with .bench-m__label {
    color: var(--ink);
  }

  /* The strips keep the 390 frame's size (302 and 62 by 28) and only shrink below it */
  .bench-m__strip {
    max-width: 100%;
    height: auto;
  }

  @media (width >= 900px) {
    .bench {
      gap: var(--space-56);
      margin-top: 0;
      padding-top: var(--space-80);
    }

    .bench__intro {
      --intro-lede-pad: var(--space-6);
      --intro-lede-size: 18px;
    }

    .bench__card {
      padding: 36px var(--space-32) var(--space-40);
    }

    /* Fixed columns: the label and merge-ready columns keep the frames' 120 and 440, and the
       decisions column takes the rest in every engine (WebKit's auto layout gave it less than its
       content and ran the captions under the merge-ready strips) */
    .bench__table {
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;
      text-align: left;
    }

    .bench__table thead :is(th, td) {
      padding: 0 0 var(--space-12);
      border-bottom: 1px solid var(--ink-24);
      font-size: 15px;
      font-weight: 400;
      line-height: 1.2;
    }

    .bench__table thead td {
      width: 120px;
    }

    .bench__table :is(th, td):last-child {
      width: 400px;
      padding-left: var(--space-40);
    }

    .bench__table thead th:last-child {
      width: 440px;
    }

    .bench__row th {
      padding: 0 var(--space-16) 13px 0;
      font-size: 17px;
      font-weight: 400;
      line-height: 1;
      text-align: right;
      vertical-align: bottom;
      color: var(--ink-muted);
      white-space: nowrap;
    }

    .bench__row td {
      vertical-align: bottom;
    }

    .bench__row--without :is(th, td) {
      padding-top: var(--space-24);
      padding-bottom: var(--space-10);
    }

    /* 24 to the rule, the rule inside the row as the frame draws it */
    .bench__row--with :is(th, td) {
      padding-top: var(--space-10);
      padding-bottom: 23px;
      border-bottom: 1px solid var(--line);
    }

    /* Row labels sit on the figures' baseline: 3px over the strip's foot */
    .bench__row--without th {
      padding-bottom: 13px;
    }

    .bench__row--with th {
      padding-bottom: 26px;
      color: var(--ink);
    }

    .bench__cell {
      display: flex;
      align-items: flex-end;
      gap: var(--space-32);
    }

    /* The frames' 36px strips. Where the decisions column is narrower than the frames' (a card
       under 1280), both rows' strips scale down to the same width, leaving the gap and the widest
       figure's run ("46% 22 missed", 167px) beside them, so the cells still line up. */
    .bench__table .bench__strip {
      flex: none;
      max-width: calc(100% - var(--space-32) - 168px);
      height: auto;
    }

    /* Past that, the note wraps under the value rather than running into the next column */
    .bench__table .bench__figure {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 0 var(--space-12);
      min-width: 0;
      padding-bottom: 3px;
    }

    .bench__table .bench__value {
      font-size: 56px;
      letter-spacing: -1px;
    }

    .bench__table .bench__unit {
      font-size: 36px;
    }

    .bench__table .bench__unit--of {
      margin-inline: 6px;
    }

    .bench__table .bench__caption {
      padding-bottom: 2px;
      white-space: nowrap;
      font-size: 14px;
    }
  }
}

/* Pencil sets every line on a whole pixel (88 x 0.95 = 84, 18 x 1.6 = 29, 17 x 1.6 = 27);
   these rounded line heights keep the page's text boxes the frames' size. */
@layer sections {
  .bench__intro {
    --intro-heading-lh: round(nearest, 1.05em, 1px);
    --intro-lede-lh: round(nearest, 1.6em, 1px);
  }
}