/* styles/sections/gap-ledger.css
 * The Gap ledger (UWyIr, gPGCS): a title row, a head row of four columns and four rows, the
 * fourth column a fern block. Markup is a list in the table's reading order; every field carries
 * its label, visible in each 390 card and screen-reader only from D, where the head row (hidden
 * from screen readers) draws the labels once. The dither edge meets the section's end at every
 * width (the frames lift it 4px on D and W and 2px on M, S36WZT, Nk5jr, AkDFP, which shows a
 * light strip above the dark band; BRI-7805 J54). */
@layer sections {
  .gap-section {
    padding-block: var(--space-56) 76px;
  }

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

  .ledger {
    box-shadow: inset 0 -1px 0 var(--ink);
  }

  .ledger__title {
    --deck-lh: 26px;
    padding-bottom: var(--space-40);
    box-shadow: inset 0 -1px 0 var(--line);
  }

  .ledger__head {
    display: flex;
    height: 42px;
    box-shadow: inset 0 -1px 0 var(--line);
  }

  .ledger__head span {
    display: flex;
    align-items: center;
    padding-right: var(--space-24);
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: 0.6px;
    color: var(--ink-muted);
  }

  .ledger__head span:not(:first-child) {
    display: none;
  }

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

  /* M card (jDktB): tool, then each field under its label, the Brief field as a fern block */
  .ledger__row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-12);
    padding-block: var(--space-16);
    box-shadow: inset 0 -1px 0 var(--line);
  }

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

  .ledger__tool,
  .ledger__cell {
    display: flex;
    flex-direction: column;
    margin: 0;
  }

  .ledger__tool {
    gap: var(--space-4);
  }

  .ledger__cell {
    gap: var(--space-6);
    font-size: 14px;
    line-height: 17px;
  }

  .ledger__name {
    font-size: 17px;
    font-weight: 600;
    line-height: 20px;
  }

  .ledger__examples {
    font-size: 13px;
    line-height: 16px;
    color: var(--ink-muted);
  }

  .ledger__label {
    font-size: 11px;
    font-weight: 600;
    line-height: 13px;
    letter-spacing: 0.6px;
    color: var(--ink-muted);
  }

  .ledger__sees {
    color: var(--ink-2);
  }

  .ledger__gives {
    width: min(100%, 320px);
    padding: var(--space-12) var(--space-14);
    background: var(--fern);
    font-size: 17px;
    font-weight: 600;
    line-height: 20px;
    color: var(--white);
  }

  .ledger__gives .ledger__label {
    color: var(--mist-70);
  }

  /* D (H27mK0 to rWriV): 296, 208, the rest, 320; the W frame widens only the third column */
  @media (width >= 900px) {
    .gap-section {
      padding-block: var(--space-96) 128px;
    }

    .ledger {
      --ledger-cols: minmax(0, 296fr) minmax(0, 208fr) minmax(0, 456fr) minmax(0, 320fr);
    }

    .ledger__title {
      --head-measure: 640px;
      --deck-size: 17px;
      --deck-lh: 26px;
    }

    .ledger__head,
    .ledger__row {
      display: grid;
      grid-template-columns: var(--ledger-cols);
    }

    .ledger__head span:not(:first-child) {
      display: flex;
    }

    .ledger__head span:last-child {
      padding-inline: var(--space-24);
      background: var(--fern);
      color: var(--mint-ink);
    }

    .ledger__row {
      align-items: stretch;
      gap: 0;
      min-height: 100px;
      padding-block: 0;
    }

    .ledger__tool,
    .ledger__cell {
      justify-content: center;
      padding-right: var(--space-24);
    }

    .ledger__label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .ledger__gives {
      width: auto;
      padding: 0 var(--space-24);
    }
  }

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

    .ledger {
      --ledger-cols: 296px 208px minmax(0, 1fr) 320px;
    }

    .ledger__title {
      --head-measure: 864px;
    }
  }
}