/* styles/sections/spec-list.css
 * Spec groups (Answering in Slack "Table" V3vsY, pD0hn, fTQhy): each group is a small caps label
 * over a strong ink rule, then ruled key and value rows. Groups sit side by side from D (64
 * apart) and stack on M (32 apart). From D a row is key then value, 88 tall at least (key 243
 * and value 333 at 1440, shrinking together below it; key 243 on W); on M the key sits over
 * the value. Keys are bold sans, or the mono face for commands (.spec-list__key--mono).
 * <div class="spec-list"><div class="spec-list__group"><h3 class="spec-list__label" id>…</h3>
 *   <dl class="spec-list__rows" aria-labelledby><div><dt>…</dt><dd>…</dd></div>…</dl></div>…</div> */
@layer sections {
  .spec-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-32);
  }

  .spec-list__label {
    margin: 0;
    /* Rules sit inside the box in Pencil: 13 plus the 1px rule is the frame's 14 */
    padding-bottom: 13px;
    border-bottom: 1px solid var(--ink);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: 0.1em;
    color: var(--ink-55);
  }

  .spec-list__rows {
    margin: 0;
  }

  .spec-list__rows > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-24);
    padding-block: 18px 17px;
    border-bottom: 1px solid var(--line-2);
  }

  .spec-list__rows dt {
    font-size: 17px;
    font-weight: 600;
    line-height: 20px;
    color: var(--ink);
  }

  /* Commands keep their spacing ("/decide  /propose") */
  .spec-list__rows .spec-list__key--mono {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    white-space: pre-wrap;
  }

  .spec-list__rows dd {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink-muted);
  }

  @media (min-width: 900px) {
    .spec-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-64);
    }

    .spec-list__rows > div {
      grid-template-columns: minmax(0, 243fr) minmax(0, 333fr);
      align-items: start;
      gap: var(--space-32);
      min-height: 88px;
    }
  }

  @media (min-width: 1680px) {
    .spec-list__rows > div {
      grid-template-columns: 243px minmax(0, 1fr);
    }
  }
}