/* comofficekit.com's Service Terms (_authoring/sdk_run.py), and only it. The page
   is laid out like lynxoffice.com's policy pages (.legal in styles.css); this adds
   the one thing they never needed, the table of who you contract with. Every
   colour is one of the shared tokens, so dark mode follows the rest of the site.

   Below 640px a three-column table squeezes each cell to a few words a line, so
   each row stacks instead: the place, then each cell after the name of its
   column (data-label). The header row stays in the page for screen readers. */

.terms-table {
  width: 100%;
  max-width: 72ch;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.terms-table th,
.terms-table td { padding: 11px 14px; text-align: left; vertical-align: top; }
.terms-table thead th {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--paper-3);
  border-bottom: 1px solid var(--hairline-strong);
  vertical-align: bottom;
}
.terms-table tbody th { font-weight: 600; color: var(--ink); }
.terms-table tbody tr + tr { border-top: 1px solid var(--hairline); }

@media (max-width: 640px) {
  .terms-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .terms-table,
  .terms-table tbody,
  .terms-table tr,
  .terms-table th,
  .terms-table td { display: block; }
  .terms-table tbody tr { padding: 12px 0; }
  .terms-table tbody th,
  .terms-table td { padding: 2px 0; }
  .terms-table td::before { content: attr(data-label) ": "; font-weight: 600; color: var(--ink); }
}