/* Privacy, terms and security: on-page contents beside long-form text.
   The prose, hero and CTA band styles live in site.css; this adds the contents list, section spacing and wide tables. */

.legal-meta { font-size: 14px; color: var(--muted); }

.legal-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }

/* ---------- contents ---------- */
.toc summary { display: flex; align-items: center; min-height: 44px; font-weight: 600; cursor: pointer; border-bottom: 1px solid var(--rule); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { border-bottom: 1px solid var(--rule); }
main .toc a:not(.btn) { display: flex; align-items: center; min-height: 44px; padding: 6px 2px; text-decoration: none; }
main .toc a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 520px) and (max-width: 959px) {
  .toc ol { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
}
@media (min-width: 960px) {
  .legal-grid { grid-template-columns: 15rem minmax(0, 1fr); gap: 56px; align-items: start; }
  .toc { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
  .toc summary { display: none; }
  .toc ol { border-top: 1px solid var(--rule); }
}

/* ---------- sections ---------- */
.legal .prose { max-width: none; }
.legal .prose > section { margin-top: 0; }
.legal .prose > section + section { margin-top: 8px; }
.legal .prose section > * + * { margin-top: 14px; }
.legal .prose section > h2 + * { margin-top: 10px; }
.legal .prose section > :not(.tablewrap) { max-width: 44rem; }
.legal .prose section > h2 { scroll-margin-top: 16px; }
.legal .prose > section:first-child > h2 { margin-top: 0; }

/* ---------- tables ---------- */
.legal .prose .tablewrap table { display: table; min-width: 34rem; }
.legal .prose .tablewrap th, .legal .prose .tablewrap td { min-width: 0; }
.legal .prose tbody th { background: transparent; font-weight: 600; }

/* Narrow screens: each row becomes a block, its cells labelled by their column heading (data-label, added in legal.ts). */
@media (max-width: 640px) {
  .legal .prose .tablewrap { border: 0; overflow: visible; }
  .legal .prose .tablewrap table, .legal .prose .tablewrap tbody, .legal .prose .tablewrap tr,
  .legal .prose .tablewrap th, .legal .prose .tablewrap td { display: block; min-width: 0; }
  .legal .prose .tablewrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .legal .prose .tablewrap tr { border: 1px solid var(--rule); }
  .legal .prose .tablewrap tr + tr { margin-top: 10px; }
  .legal .prose .tablewrap tbody th { background: var(--field); border-bottom: 1px solid var(--rule); }
  .legal .prose .tablewrap td { border-bottom: 0; }
  .legal .prose .tablewrap td::before { content: attr(data-label); display: block; font-size: 13px; color: var(--muted); }
}