/* missionarylane.org/terms, /privacy, /dpa: long-form legal pages (generated by tests/legal/build.mjs).
   Uses the site.css tokens; adds a readable measure, a contents list, the draft banner and print styles. */
.legal { max-width: var(--wrap); margin: 0 auto; padding: clamp(8px, 3vw, 32px) var(--gut) 72px; }

.draft-banner { display: grid; gap: 4px; margin: 0 0 28px; padding: 14px 18px 14px 20px; border-radius: 12px;
  background: color-mix(in srgb, var(--gold) 18%, var(--card)); border: 2px solid var(--gold); border-left-width: 8px;
  font: 400 .95rem/1.5 var(--display); color: var(--ink); }
.draft-banner strong { font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; }

.legal-head { max-width: 46rem; margin-bottom: 28px; }
.legal-head h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.02; margin-bottom: .3em; }
.doc-meta, .doc-related { font: 400 .9rem/1.55 var(--display); color: var(--muted); margin: 0 0 .4em; max-width: none; }
.doc-related a { color: var(--ink); }

.legal-grid { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.toc { font: 400 .88rem/1.4 var(--display); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc a { display: block; padding: 5px 8px; border-radius: 6px; color: var(--text); text-decoration: none; }
.toc a:hover { background: var(--card); color: var(--ink); }
.toc-side { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; padding-right: 4px; }
.toc-side h2 { font: 700 .78rem/1 var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 6px 8px 10px; }
.toc-inline { display: none; margin: 0 0 24px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.toc-inline summary { cursor: pointer; padding: 12px 16px; min-height: 44px; font: 650 .95rem/1.4 var(--display); color: var(--ink); }
.toc-inline nav { padding: 0 8px 10px; }
@media (max-width: 900px) {
  .legal-grid { grid-template-columns: minmax(0, 1fr); }
  .toc-side { display: none; }
  .toc-inline { display: block; }
}

/* Article typography */
.legal-body { max-width: 44rem; min-width: 0; overflow-wrap: break-word; }
.legal-body p, .legal-body li { max-width: none; }
.legal-body h2 { font-size: clamp(1.35rem, 2.4vw, 1.6rem); line-height: 1.2; margin: 2.2em 0 .6em; padding-top: .9em; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.legal-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-body h3 { font-size: 1.12rem; margin: 1.8em 0 .5em; scroll-margin-top: 16px; }
.legal-body h4 { font: 650 1rem/1.3 var(--display); color: var(--ink); margin: 1.4em 0 .4em; }
.legal-body .anchor { font-weight: 400; color: var(--line); text-decoration: none; margin-left: .2em; }
.legal-body h2:hover .anchor, .legal-body h3:hover .anchor, .legal-body .anchor:focus-visible { color: var(--muted); }
.legal-body a { overflow-wrap: anywhere; }
.legal-body ul { padding-left: 1.3em; margin: 0 0 1em; }
.legal-body li { margin: .35em 0; }
.legal-body ol.top { list-style: none; padding: 0; margin: 0 0 1.1em; }
.legal-body ol.top > li { position: relative; padding-left: 3.1em; margin: .6em 0; }
.legal-body ol.top > li > .n { position: absolute; left: 0; top: .15em; font: 650 .82rem/1.5 var(--display); color: var(--muted); }
.legal-body ol.sub { list-style: none; padding: 0; margin: .4em 0 .2em; }
.legal-body ol.sub > li { position: relative; padding-left: 2.1em; margin: .35em 0; }
.legal-body ol.sub > li > .n { position: absolute; left: 0; top: .1em; font: 600 .82rem/1.5 var(--display); color: var(--muted); }
.legal-body li:target, .legal-body h2:target, .legal-body h3:target { background: color-mix(in srgb, var(--gold) 14%, transparent); border-radius: 6px; }
.legal-body blockquote { margin: 1em 0; padding: .6em 1em; border-left: 4px solid var(--gold); background: var(--card); border-radius: 0 8px 8px 0; }
.legal-body hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; }
.legal-body pre { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; font-size: .8rem; }
.legal-body pre code { border: 0; padding: 0; background: none; }

.table-wrap { overflow-x: auto; margin: 0 0 1.4em; border: 1px solid var(--line); border-radius: 10px; background: var(--card); -webkit-overflow-scrolling: touch; }
.legal-body table { border-collapse: collapse; width: 100%; font: 400 .88rem/1.5 var(--display); }
.legal-body th, .legal-body td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.legal-body th { font-weight: 650; color: var(--ink); background: color-mix(in srgb, var(--paper) 60%, var(--card)); }
.legal-body tr:last-child td { border-bottom: 0; }
.legal-body td:first-child { min-width: 9em; }
@media (max-width: 600px) { .legal-body td, .legal-body th { min-width: 9em; } }
@media (max-width: 480px) { .legal-body ol.top > li { padding-left: 2.6em; } .legal-body ol.sub > li { padding-left: 1.9em; } }

.ph { background: color-mix(in srgb, var(--gold) 26%, transparent); color: var(--ink); border-radius: 4px; padding: 0 .2em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Print: just the document, with the draft notice. */
@media print {
  @page { margin: 18mm 16mm; }
  html { font-size: 11pt; }
  body { background: #fff; color: #000; }
  .skip, .top nav, .foot nav, .toc, .legal-body .anchor { display: none !important; }
  .top { padding: 0 0 8pt; }
  .legal { padding: 0; max-width: none; }
  .legal-grid { display: block; }
  .legal-body { max-width: none; }
  .draft-banner { background: none; border: 2pt solid #000; break-inside: avoid; }
  .legal-body h2, .legal-body h3 { break-after: avoid; }
  .legal-body li, .legal-body tr, .legal-body blockquote { break-inside: avoid; }
  .table-wrap { overflow: visible; border-color: #999; }
  .legal-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #333; overflow-wrap: anywhere; }
  .ph { background: none; border-bottom: 1pt dotted #000; }
  .foot { border-top: 1px solid #999; padding: 8pt 0 0; }
}