/*
 * PickTonight legal pages (LB-06, LAUNCH-PLAN W4-L1 templates; published by apps/site, P3.1, as
 * apps/site/public/legal/legal.css, byte for byte — legal.guard.test.ts refuses a fork). Static, no JavaScript:
 * the pages must work with scripts off, and a privacy policy that pulled a third-party font would disclose the
 * reader to it. Montserrat is self-hosted by the site.
 *
 * Since P3.1 the values are the Beads roles (DESIGN.md §§2–5) as CSS custom properties: the site's /tokens.css,
 * generated from packages/tokens, defines them for the dark and the light scheme, and every page links it before
 * this file. No colour, size or radius literal lives here.
 */
/* the site's column: the same measure and side padding as its top bar, so a page's text lines up under the logo */
main.doc {
  max-width: var(--measure-detail);
  margin: 0 auto;
  padding: var(--space-between-3) var(--side-phone) var(--space-between-4);
}

header.page {
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-between-3);
  padding-bottom: var(--space-between-2);
}

main.doc h1 {
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  margin: 0 0 var(--space-inside-2);
}

main.doc h2 {
  font-size: var(--text-title);
  line-height: var(--leading-title);
  font-weight: 700;
  color: var(--text);
  margin: var(--space-between-3) 0 var(--section-title);
}

main.doc h3 {
  font-size: var(--text-section);
  line-height: var(--leading-section);
  font-weight: 700;
  color: var(--text);
  margin: var(--space-between-2) 0 var(--space-inside-2);
}

main.doc p,
main.doc li,
main.doc td {
  /* a host name or an address in a table cell may break anywhere rather than widen the page past a 390 phone */
  overflow-wrap: anywhere;
}

main.doc p,
main.doc li {
  color: var(--body);
  font-size: var(--text-copy);
  line-height: var(--leading-copy);
  font-weight: 500;
}

main.doc li + li {
  margin-top: var(--space-inside-2);
}

main.doc strong {
  color: var(--text);
  font-weight: 700;
}

main.doc a {
  color: var(--pink-ink);
  font-weight: 600;
  text-underline-offset: 2px;
}

.meta {
  color: var(--dim);
  font-size: var(--text-secondary);
  line-height: var(--leading-secondary);
}

.table-wrap {
  overflow-x: auto;
  margin: var(--space-between-1) 0;
}

main.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-secondary-lg);
  line-height: var(--leading-secondary-lg);
}

main.doc th,
main.doc td {
  border-bottom: 1px solid var(--line);
  padding: var(--space-inside-3) var(--space-inside-2);
  text-align: left;
  vertical-align: top;
}

main.doc th {
  color: var(--text);
  font-weight: 700;
}

main.doc td {
  color: var(--body);
}

.card {
  background: var(--surface);
  border-radius: var(--radius-info-card);
  padding: var(--space-between-1) var(--space-between-2);
  margin: var(--space-between-1) 0;
}

.card p {
  margin: 0;
}

@media (min-width: 768px) {
  main.doc {
    padding-left: var(--side-tablet);
    padding-right: var(--side-tablet);
  }
}

@media (min-width: 1024px) {
  main.doc {
    padding-left: var(--side-web);
    padding-right: var(--side-web);
  }
}