/* Shared styling for the three trilingual legal pages (tos.html, privacy.html,
   biometric.html -- SP3 legal-pages task). Reuses paper.css's design tokens
   (--ink/--secondary/--hairline-2/--radius/etc.) and the tos.html plain
   text-document layout (640px column, no card chrome, h1 1.75rem, body
   1rem/1.6) that shipped in the earlier presentation-only pass. Do NOT touch
   paper.css -- everything legal-doc-specific lives here.

   Language mechanism: legal BODY TEXT is not run through the i18n catalogs
   (it's full-document blocks per language, not small chrome strings) -- each
   document embeds all three <section lang="en|zh|th"> blocks and a small
   inline script (see the three pages) shows exactly one, keyed off the same
   fm_lang mechanism (i18n.js) driving the page's own language dropdown. Only
   small chrome strings (wordmark, back link, cross-links) use data-i18n. */

body.auth-page { justify-content: flex-start; padding-top: 2.5rem; }

.legal-header {
  width: 100%; max-width: 640px; display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 2.5rem;
}
.legal-wordmark { font-weight: 600; font-size: .95rem; letter-spacing: -.01em; color: var(--ink); }

main.legal-doc { width: 100%; max-width: 640px; margin: 0 0 3rem; }

.legal-lang[hidden] { display: none; }

.legal-lang h1 { font-size: 1.75rem; margin: 0 0 1rem; letter-spacing: -.01em; }
.legal-lang h2 { font-size: 1.1rem; font-weight: 600; margin: 2rem 0 .75rem; }
.legal-lang h3 { font-size: 1rem; font-weight: 600; margin: 1.5rem 0 .5rem; }
.legal-lang p { line-height: 1.6; font-size: 1rem; color: var(--ink); margin: 0 0 .9rem; }
.legal-lang ul, .legal-lang ol { margin: 0 0 .9rem; padding-left: 1.4rem; line-height: 1.6; }
.legal-lang li { margin: 0 0 .5rem; }
.legal-lang strong { font-weight: 600; }
.legal-lang em { font-style: italic; }

/* The "DRAFT -- NOT YET IN EFFECT" notice: small, secondary, no card chrome
   -- distinct from the plain-language summary card below. */
.draft-status { margin: 0 0 .75rem; }
.draft-status p { font-size: .85rem; color: var(--secondary); line-height: 1.5; margin: 0; }

.doc-meta { font-size: .85rem; color: var(--secondary); margin: 0 0 1.5rem; }

/* Plain-language summary: subtle bordered card, same visual language as the
   pre-existing .placeholder-flag treatment on this page family. */
.legal-summary {
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 0 0 2rem;
}
.legal-summary h3 { margin: 0 0 .6rem; font-size: .95rem; }
.legal-summary ul { margin: 0; padding-left: 1.2rem; }
.legal-summary li { font-size: .9rem; margin: 0 0 .5rem; }
.legal-summary li:last-child { margin-bottom: 0; }

/* FOR COUNSEL section: same document flow, visually set apart as
   meta/review content rather than operative terms. */
.legal-forcounsel {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline-2);
}
.legal-forcounsel h2 { color: var(--secondary); }
.legal-forcounsel li { font-size: .9rem; color: var(--secondary); }
.legal-forcounsel li strong { color: var(--ink); }

.table-wrap { overflow-x: auto; margin: 0 0 1.25rem; }
.legal-lang table {
  width: 100%; border-collapse: collapse; font-size: .85rem; line-height: 1.5;
}
.legal-lang th, .legal-lang td {
  text-align: left; vertical-align: top; padding: .5rem .6rem;
  border-bottom: 1px solid var(--hairline-2);
}
.legal-lang th { font-weight: 600; color: var(--secondary); white-space: nowrap; }

.legal-crosslinks {
  display: flex; gap: 1rem; flex-wrap: wrap;
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hairline-2);
  font-size: .9rem;
}
.legal-crosslinks a { color: var(--secondary); text-decoration: none; }
.legal-crosslinks a:hover { color: var(--ink); text-decoration: underline; }