/*
 * Legal pages (/privacy, /terms, /delete-account). Loaded after site.css, which
 * supplies the palette; this only adds the long-form document pieces.
 */

.legal { font-size: 1rem; line-height: 1.65; }
.legal header { border-bottom: 1px solid #3a2f22; padding-bottom: 1.5rem; margin-bottom: 2.5rem; }
.legal h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); line-height: 1.15; }
.legal .tagline { margin: 0; }
.legal .updated { color: var(--dim); font-size: .875rem; margin: .75rem 0 0; }
.legal ul, .legal ol { padding-left: 1.25rem; }
.legal li { margin: .4rem 0; }

.legal table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .95rem; }
.legal th, .legal td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid #3a2f22; vertical-align: top; }
.legal th { color: var(--subtitle); font-weight: 600; }

.note {
  background: var(--panel);
  border-left: 3px solid var(--title);
  padding: .9rem 1.1rem;
  margin: 1.5rem 0;
  border-radius: 0 6px 6px 0;
}

.legal footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid #3a2f22;
  color: var(--dim);
  font-size: .875rem;
}

@media (max-width: 30rem) {
  .legal table, .legal thead, .legal tbody, .legal th, .legal td, .legal tr { display: block; }
  .legal thead { display: none; }
  .legal td { border: none; padding: .15rem 0; }
  .legal tr { border-bottom: 1px solid #3a2f22; padding: .7rem 0; }
  .legal td:first-child { color: var(--title); font-weight: 600; }
}