/* Legal pages (drafts): long-form reading. Tokens from base.css, layout of the public site (site.css). */

.legal { max-width: 1120px; margin: 0 auto; padding: var(--s-6) var(--s-6) var(--s-8); }

.legal-draft { display: grid; grid-template-columns: 20px 1fr; gap: var(--s-2); align-items: start;
  max-width: 72ch; margin-bottom: var(--s-6); padding: var(--s-3) var(--s-4); border-radius: var(--r-ctl);
  background: var(--warn-wash); color: var(--ink); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); }
.legal-draft svg { width: 20px; height: 20px; margin-top: 2px; color: var(--warn); }
.legal-draft p { margin: 0; }

.legal-head { max-width: 72ch; margin-bottom: var(--s-6); }
.legal-head h1 { font-size: var(--f-33); line-height: 40px; }
.legal-head .lead { margin: var(--s-3) 0 var(--s-2); font-size: var(--f-17); line-height: 28px; color: var(--ink-2); }
.legal-meta { font-size: var(--f-13); color: var(--ink-2); margin: 0; }
.legal-download { margin: var(--s-4) 0 0; }

.legal-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.legal-toc { position: sticky; top: var(--s-5); font-size: var(--f-15); }
.legal-toc .toc-h { font-size: var(--f-13); font-weight: 600; color: var(--ink-2); margin: 0 0 var(--s-2); }
.legal-toc .toc-h + ol, .legal-toc .toc-h + ul { margin: 0 0 var(--s-5); }
.legal-toc ol, .legal-toc ul { padding: 0; list-style: none; }
.legal-toc ol { counter-reset: toc; }
.legal-toc ol li { counter-increment: toc; }
.legal-toc ol li { display: grid; grid-template-columns: 30px 1fr; }
.legal-toc ol li::before { content: counter(toc) "."; width: 30px; color: var(--ink-2);
  font-variant-numeric: tabular-nums; }
.legal-toc li { padding: 3px 0; line-height: 22px; }
.legal-toc a { color: var(--ink); text-decoration: none; }
.legal-toc a:hover { color: var(--stamp); text-decoration: underline; }
.legal-toc a[aria-current="page"] { color: var(--stamp); font-weight: 600; }

.legal-body { max-width: 72ch; }
.legal-body section { padding: var(--s-5) 0; border-top: 1px solid var(--rule); scroll-margin-top: var(--s-5); }
.legal-body section:first-child { border-top: 0; padding-top: 0; }
.legal-body h2 { font-size: var(--f-21); line-height: 28px; margin-bottom: var(--s-3); }
.legal-body h2 .num { color: var(--ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.legal-body p, .legal-body li { font-size: var(--f-15); line-height: 26px; }
.legal-body ul { padding-left: 20px; margin: 0 0 var(--s-3); }
.legal-body li { margin: 4px 0; }
.legal-body li::marker { color: var(--ink-2); }

.legal-table { font-size: var(--f-15); }
.legal-table th[scope="row"] { font-weight: 550; color: var(--ink); text-align: left; padding: var(--s-3); vertical-align: top; }
.legal-table td { line-height: 22px; }
.legal-body .table-wrap { margin: 0 0 var(--s-3); }

/* placeholders the owner or lawyer fills in */
mark.ph { background: var(--stamp-wash); color: var(--stamp); border-radius: 4px; padding: 0 3px;
  font-weight: 550; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

@media (max-width: 899px) {
  .legal-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .legal-toc { position: static; padding-bottom: var(--s-4); border-bottom: 1px solid var(--rule); }
}
@media (max-width: 767px) {
  .legal { padding: var(--s-5) var(--s-4) var(--s-7); }
  .legal-head h1 { font-size: var(--f-26); line-height: 32px; }
  /* tables become one card per row, each value with its column name */
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table th, .legal-table td { display: block; width: 100%; }
  .legal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .legal-table tr { padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
  .legal-table th[scope="row"], .legal-table td { padding: 2px 0; border: 0; }
  .legal-table th[scope="row"] { font-size: var(--f-15); padding-bottom: var(--s-1); }
  .legal-table td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block;
    font-size: var(--f-13); line-height: 18px; color: var(--ink-2); font-weight: 500; margin-top: var(--s-1); }
  .legal-table tbody tr:hover { background: none; }
  .legal-body .table-wrap { overflow: visible; }
}
@media print {
  .site-top, .site-foot, .legal-toc, .legal-download { display: none; }
  .legal-grid { display: block; }
  mark.ph { background: none; color: inherit; border: 1px dashed currentColor; }
}