/* The legal pages (public/legal/*.html): the privacy policy, the terms of
   use and the support page. Each loads style.css first for its tokens, so
   the pages follow the app's light and dark colors and its eight type
   styles. Nothing here sets a color, size or weight of its own
   (scripts/lint-css.js checks this file too). */

/* A document, not an app: its text can be selected and copied, the page
   scrolls and bounces as any web page does, and links are underlined. */
body.legal { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; overscroll-behavior-y: auto; }

.legal-page {
  max-width: 40rem;
  margin: 0 auto;
  padding: calc(var(--sp-24) + env(safe-area-inset-top)) calc(var(--gutter) + env(safe-area-inset-right))
    calc(var(--sp-56) + env(safe-area-inset-bottom)) calc(var(--gutter) + env(safe-area-inset-left));
}

/* "Draft, pending legal review": a quiet chip at the top, never a banner. */
.legal-draft {
  display: inline-block;
  font: var(--t-caption); letter-spacing: var(--tr-caption);
  color: var(--paused); background: var(--paused-soft);
  border-radius: 999px;
  padding: var(--sp-4) var(--sp-12);
}

.legal-nav { display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-20); margin-top: var(--sp-16); font: var(--t-subhead); letter-spacing: var(--tr-subhead); }
.legal-nav a[aria-current='page'] { color: var(--ink); text-decoration: none; }

.legal-page h1 { font: var(--t-display); letter-spacing: var(--tr-display); margin: var(--sp-20) 0 var(--sp-4); }
.legal-meta { font: var(--t-subhead); letter-spacing: var(--tr-subhead); color: var(--ink-2); }
.legal-page h2 { font: var(--t-title); letter-spacing: var(--tr-title); margin: var(--sp-40) 0 var(--sp-8); }
.legal-page h3 { font: var(--t-headline); letter-spacing: var(--tr-headline); margin: var(--sp-24) 0 var(--sp-4); }
.legal-page p, .legal-page ul, .legal-page ol { margin: var(--sp-8) 0; }
.legal-page ul, .legal-page ol { padding-left: var(--sp-24); }
.legal-page li + li { margin-top: var(--sp-4); }
.legal-page li > ul { margin: var(--sp-4) 0 0; }
.legal-page strong { font: var(--t-headline); letter-spacing: inherit; }
.legal-page a { text-decoration: underline; text-underline-offset: 0.15em; }
.legal-page code { font-family: var(--mono); }

/* The short version, and each "how to" on the support page: a card. */
.legal-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4) var(--sp-20);
  margin: var(--sp-16) 0;
}

/* Tables scroll sideways on a narrow phone rather than squeezing words. */
.legal-table { overflow-x: auto; margin: var(--sp-12) 0; }
.legal-table table { width: 100%; border-collapse: collapse; font: var(--t-subhead); letter-spacing: var(--tr-subhead); }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: var(--sp-8) var(--sp-12) var(--sp-8) 0; border-bottom: 1px solid var(--separator); }
.legal-table th { font: var(--t-caption); letter-spacing: var(--tr-caption); color: var(--ink-2); }
.legal-table td:first-child { min-width: 8rem; }

/* A placeholder still to fill in, such as [SUPPORT EMAIL]. */
.ph { background: var(--fill-strong); color: var(--ink); border-radius: 0.25rem; padding: 0 var(--sp-4); white-space: nowrap; }

.legal-foot { margin-top: var(--sp-40); padding-top: var(--sp-16); border-top: 1px solid var(--separator); font: var(--t-subhead); letter-spacing: var(--tr-subhead); color: var(--ink-2); }