/* styles/sections/fact-table.css
 * A titled list of facts a buyer's platform team asks for: key in mono caps, value beside it
 * from D (key column 520) and under it on M. Frames: Coding with Agents "Platform Questions"
 * (ZWDMq AHhJN, ITpMT DwQcg, mpVj3 uFAkU).
 * <div class="fact-block">
 *   <h2 class="fact-block__title">...</h2>
 *   <dl class="fact-table"><div class="fact-table__row"><dt>KEY</dt><dd>value</dd></div>...</dl>
 * </div>
 * .fact-table__cmd is a shell command chip; .fact-table__pair sets a value beside a link.
 * Title: h3 role on M, h2 on D, h1 on W. */
@layer sections {
  .fact-block {
    --fact-title-size: var(--t-h3-size);
    --fact-title-ls: var(--t-h3-ls);
    /* 520 / 760 at 1440, the same proportion below it; 520 and the rest on W */
    --fact-cols: minmax(0, 520fr) minmax(0, 760fr);
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
    padding-top: 68px;
  }

  .fact-block__title {
    font-family: var(--font-display);
    font-size: var(--fact-title-size);
    font-weight: 600;
    line-height: round(nearest, 1.05em, 1px);
    letter-spacing: var(--fact-title-ls);
    text-wrap: wrap;
  }

  .fact-table { margin: 0; }

  .fact-table__row {
    display: flex;
    flex-direction: column;
    padding-block: 15px var(--space-16);
    border-top: 1px solid var(--line);
  }

  .fact-table dt {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.6px;
    color: var(--fern);
  }

  .fact-table dd {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 21px;
    color: var(--ink);
  }

  .fact-table__cmd {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    padding: 10px 14px;
    border-radius: 6px;
    background: var(--term-bg);
    font-size: 13px;
    line-height: 16px;
    overflow-wrap: anywhere;
    color: var(--term-ink);
  }

  .fact-table__prompt {
    color: var(--term-dim);
    user-select: none;
  }

  .fact-table__pair {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
    line-height: 17px;
  }

  /* The frame draws "Trust Center →" (adn9F, xeVTZ) with a text arrow, smaller and tighter than
     the arrow-link icon. The page's fonts have no U+2192, so the arrow is that glyph's outline from
     the Pencil export (trust-arrow.svg), as the link's mask: it keeps currentcolor and the
     arrow-link states (r9m4P). The mask is the whole 17px line with the ink 6.43px into it, so it
     lands where the label's line does at any sub-pixel position. Its ink starts 4.56px after the
     label. */
  .fact-table__pair .arrow-link {
    flex: none;
    gap: 4.56px;
    font-size: 14px;
    line-height: 17px;
  }

  .fact-table__pair .arrow-link::after {
    align-self: stretch;
    width: 9.75px;
    height: auto;
    mask-image: url("/assets/figures/coding-with-agents/trust-arrow.svg");
  }

  @media (min-width: 900px) {
    .fact-block {
      --fact-title-size: var(--t-h2-size);
      --fact-title-ls: var(--t-h2-ls);
      gap: var(--space-40);
      padding-top: 112px;
    }

    .fact-table__row {
      display: grid;
      grid-template-columns: var(--fact-cols);
      align-items: baseline;
    }

    .fact-table__cmd {
      display: inline-flex;
      flex-direction: row;
    }

    .fact-table__pair {
      flex-direction: row;
      align-items: center;
    }
  }

  @media (min-width: 1680px) {
    .fact-block {
      --fact-title-size: var(--t-h1-size);
      --fact-title-ls: var(--t-h1-ls);
      --fact-cols: 520px minmax(0, 1fr);
    }
  }
}