/* Hairline data table for marketing pages: checks, WCAG criteria, comparisons.
   Wrap in .ledger-wrap (role="region", tabindex="0") so wide tables scroll on phones. */
@layer components {
  .ledger-wrap {
    overflow-x: auto;
    border-top: 2px solid var(--color-text);

    &:focus-visible {
      outline: 3px solid var(--color-focus);
      outline-offset: 4px;
    }
  }

  .ledger {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: var(--text-base);

    thead,
    tr,
    th {
      background: transparent;
    }

    th,
    td {
      padding: var(--space-4) var(--space-6) var(--space-4) 0;
      border-bottom: 1px solid var(--color-border);
      text-align: left;
      vertical-align: top;
    }

    th:last-child,
    td:last-child {
      padding-right: 0;
    }

    thead th {
      padding-top: var(--space-3);
      padding-bottom: var(--space-3);
      font-size: var(--text-sm);
      font-weight: var(--font-medium);
      color: var(--color-gray-700);
    }

    tbody th {
      font-weight: var(--font-semibold);

      a {
        color: var(--color-text);
        text-decoration: underline;
        text-underline-offset: 0.2em;
      }
    }

    tbody td {
      color: var(--color-text-muted);
    }

    .ledger__note {
      display: block;
      margin-top: var(--space-1);
      font-size: var(--text-sm);
      font-weight: var(--font-normal);
      color: var(--color-text-muted);
    }

    .ledger__nowrap {
      white-space: nowrap;
    }

    .ledger__muted {
      color: var(--color-text-light);
    }

    /* Words carry the meaning; colour only repeats it */
    .ledger__automation {
      font-weight: var(--font-semibold);
      white-space: nowrap;
    }

    .ledger__automation--automated { color: var(--color-success); }
    .ledger__automation--partial { color: var(--color-text); }
    .ledger__automation--manual { color: var(--color-warning); }

    /* Comparison answers: Yes, No, Partly written out */
    .ledger__answer {
      font-weight: var(--font-semibold);
      white-space: nowrap;
    }

    .ledger__answer--yes { color: var(--color-text); }
    .ledger__answer--no,
    .ledger__answer--partly { color: var(--color-text-muted); }

    /* Short answer columns fit a phone, so the table doesn't need to scroll */
    &.ledger--compare {
      min-width: 0;

      th:not(:first-child),
      td {
        width: 7rem;
      }

      @media (max-width: 480px) {
        font-size: var(--text-sm);

        th,
        td {
          padding-right: var(--space-2);
        }

        th:not(:first-child),
        td {
          width: 4.25rem;
          overflow-wrap: anywhere;
        }
      }
    }

    tr:target th,
    tr:target td {
      background: var(--color-primary-50);
    }
  }

  /* A simple bulleted list under an ink rule */
  .plain-list {
    margin: 0;
    padding: var(--space-4) 0 0 var(--space-5);
    border-top: 2px solid var(--color-text);

    li {
      margin: 0 0 var(--space-3);
      color: var(--color-text-muted);
    }
  }

  /* A short list inside a check-list description */
  .compact-list {
    margin: 0;
    padding-left: var(--space-5);

    li {
      margin: 0 0 var(--space-2);
    }
  }

  .check-example .code-sample {
    margin: 0 0 var(--space-4);
  }
}