/* Terms of use and privacy policy (pages/legal/*). Built on the landing
 * page's header and type (landing.css): long text wants a narrow measure,
 * generous leading and a contents list that stays in reach. */

.legal__grid {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
  padding-block: clamp(40px, 6vw, 80px) var(--sp-11);
}

.legal__toc { position: sticky; inset-block-start: 96px; font-size: var(--fs-label); }
.legal__toc-title { margin: 0 0 var(--sp-4); color: var(--text-subtle); }
.legal__toc ol { list-style: none; margin: 0; padding: 0; border-inline-start: 1px solid var(--border); }
.legal__toc a {
  display: block;
  padding-block: var(--sp-2);
  padding-inline: var(--sp-5) 0;
  min-block-size: 32px;
  color: var(--text-muted);
  text-decoration: none;
  line-height: 1.5;
}
.legal__toc a:hover { color: var(--text); }

.legal__doc { max-inline-size: 68ch; }
.legal__kicker { margin: 0 0 var(--sp-4); color: var(--text-subtle); font-size: var(--fs-label); }
.legal__title { max-inline-size: none; margin-block-end: var(--sp-5); }
.legal__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-8); color: var(--text-muted); font-size: var(--fs-label); }

.legal__notice, .legal__changes {
  margin: 0 0 var(--sp-7);
  padding: var(--sp-4) var(--sp-5);
  border-inline-start: 3px solid var(--warning);
  background: var(--warning-soft);
  border-radius: var(--r-sm);
  line-height: 1.7;
}
.legal__changes { border-inline-start-color: var(--brand); background: var(--brand-soft); }

.legal__body { font-size: var(--fs-body-l); line-height: 1.9; }
.legal__body p { margin: 0 0 var(--sp-5); }
.legal__h2 {
  margin: var(--sp-10) 0 var(--sp-4);
  padding-block-start: var(--sp-7);
  border-block-start: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: var(--fs-title-l);
  line-height: var(--lh-title-l);
  scroll-margin-block-start: 88px;
}
.legal__body > .legal__h2:first-child { margin-block-start: 0; }
.legal__h2:focus { outline: none; }
.legal__list { margin: 0 0 var(--sp-5); padding-inline-start: var(--sp-7); }
.legal__list li { margin-block-end: var(--sp-3); }
.legal__list li::marker { color: var(--brand-text); }

/* A sentence still waiting for a lawyer's or the owner's decision. */
.legal__open {
  padding-inline: var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--warning-soft);
  color: var(--warning);
  box-shadow: inset 0 -2px 0 var(--warning);
}

.legal__history { margin-block-start: var(--sp-10); padding-block-start: var(--sp-7); border-block-start: 1px solid var(--border); }
.legal__foot { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-10); font-size: var(--fs-label); }
.legal__foot a, .legal__history a, .legal__notice a { color: var(--brand-text); }

.legal__body--preview { max-block-size: 60vh; overflow: auto; font-size: var(--fs-body-m); }

@media (max-width: 960px) {
  .legal__grid { grid-template-columns: minmax(0, 1fr); }
  .legal__toc { position: static; padding-block-end: var(--sp-5); border-block-end: 1px solid var(--border); }
}

@media print {
  .lp-header, .legal__toc, .legal__foot { display: none; }
  .legal__grid { display: block; padding: 0; }
  .legal__doc { max-inline-size: none; }
}