/* Public legal pages — 服务条款 / 隐私政策 / 联系我们.
 *
 * Standalone stylesheet (NOT part of the esbuild bundle): the three legal
 * templates are plain Jinja (no React island), so this file is fetched via a
 * direct `<link href="/static/css/legal.css">` alongside tuve-tokens.css —
 * editing it never requires a `npm run build:tuve`.
 *
 * Every visual value is a var(--tuve-*) token (Red Line #18); tokens auto-swap
 * for dark mode, so these pages follow the 黑橙兔 ⇄ 白橙兔 theme for free.
 * SSOT: principles/subs/visual_language.md.
 */

.legal-doc {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--tuve-font-sans);
  -webkit-font-smoothing: antialiased;
  background: var(--tuve-bg);
  color: var(--tuve-ink);
}

/* ── top bar: wordmark links home ─────────────────────────────────────── */
.legal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tuve-space-16);
  padding: var(--tuve-space-20) var(--tuve-space-24);
  border-bottom: var(--tuve-border-width-hairline) solid var(--tuve-border);
}

.legal-home {
  display: inline-flex;
  align-items: center;
}

.legal-home:focus-visible {
  outline: 2px solid var(--tuve-brand);
  outline-offset: 4px;
  border-radius: var(--tuve-radius-sm);
}

.legal-wordmark {
  width: 64px;
  height: auto;
  display: block;
}

.legal-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--tuve-space-8);
}

.legal-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tuve-space-32);
  height: var(--tuve-space-32);
  border: 0;
  border-radius: var(--tuve-radius-full);
  background: var(--tuve-sunken);
  color: var(--tuve-ink);
  cursor: pointer;
  transition:
    background-color var(--tuve-duration-fast) var(--tuve-ease-standard),
    color var(--tuve-duration-fast) var(--tuve-ease-standard);
}

.legal-theme-toggle:hover {
  background: var(--tuve-brand-soft);
  color: var(--tuve-brand);
}

.legal-theme-toggle:focus-visible {
  outline: var(--tuve-border-width-thin) solid var(--tuve-brand);
  outline-offset: var(--tuve-space-2);
}

.legal-theme-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.legal-theme-icon svg {
  display: block;
  width: var(--tuve-space-16);
  height: var(--tuve-space-16);
  transition: transform var(--tuve-duration-base) var(--tuve-ease-standard);
}

.legal-theme-icon--sun { display: none; }

.legal-theme-toggle[data-theme-effective="dark"] .legal-theme-icon--moon { display: none; }
.legal-theme-toggle[data-theme-effective="dark"] .legal-theme-icon--sun { display: inline-flex; }

.legal-theme-toggle:hover .legal-theme-icon svg { transform: rotate(-18deg); }

.legal-lang-switch {
  display: inline-flex;
  align-items: center;
  height: var(--tuve-space-32);
  border: var(--tuve-border-width-hairline) solid var(--tuve-border);
  border-radius: var(--tuve-radius-sm);
  background: var(--tuve-surface);
  overflow: hidden;
}

.legal-lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--tuve-space-32);
  padding: 0 var(--tuve-space-12);
  border: 0;
  background: transparent;
  color: var(--tuve-text-muted);
  font-family: var(--tuve-font-sans);
  font-size: var(--tuve-font-size-sm);
  font-weight: var(--tuve-font-weight-medium);
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--tuve-duration-fast) var(--tuve-ease-standard),
    color var(--tuve-duration-fast) var(--tuve-ease-standard);
}

.legal-lang-btn + .legal-lang-btn {
  border-left: var(--tuve-border-width-hairline) solid var(--tuve-border);
}

.legal-lang-btn:hover {
  background: var(--tuve-sunken);
  color: var(--tuve-ink);
}

.legal-lang-btn--active,
.legal-lang-btn--active:hover {
  background: var(--tuve-ink);
  color: var(--tuve-bg);
}

.legal-lang-btn:focus-visible {
  outline: var(--tuve-border-width-thin) solid var(--tuve-brand);
  outline-offset: var(--tuve-space-2);
}

/* ── document body ────────────────────────────────────────────────────── */
.legal-body {
  flex: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: var(--tuve-space-40) var(--tuve-space-24) var(--tuve-space-64);
  box-sizing: border-box;
  line-height: var(--tuve-line-height-body);
}

.legal-meta {
  font-size: var(--tuve-font-size-sm);
  color: var(--tuve-text-subtle);
  margin: 0 0 var(--tuve-space-8);
}

.legal-h1 {
  font-size: var(--tuve-font-size-3xl);
  font-weight: var(--tuve-font-weight-bold);
  line-height: var(--tuve-line-height-heading);
  letter-spacing: -0.02em;
  color: var(--tuve-ink);
  margin: 0 0 var(--tuve-space-16);
  text-wrap: balance;
}

.legal-lede {
  font-size: var(--tuve-font-size-md);
  color: var(--tuve-text-muted);
  margin: 0 0 var(--tuve-space-24);
  text-wrap: pretty;
}

/* Plain-language summary card — the "friend voice" gloss above a formal
   clause. It stays neutral; the brand rail pattern is reserved for documented
   mascot-exception callouts in the design system. */
.legal-tldr {
  background: var(--tuve-surface);
  border: var(--tuve-border-width-hairline) solid var(--tuve-border);
  border-radius: var(--tuve-radius-md);
  padding: var(--tuve-space-12) var(--tuve-space-16);
  margin: 0 0 var(--tuve-space-24);
  font-size: var(--tuve-font-size-sm);
  color: var(--tuve-text);
}

.legal-tldr p { margin: 0; }
.legal-tldr p + p { margin-top: var(--tuve-space-8); }

.legal-body h2 {
  font-size: var(--tuve-font-size-xl);
  font-weight: var(--tuve-font-weight-semibold);
  line-height: var(--tuve-line-height-heading);
  color: var(--tuve-ink);
  margin: var(--tuve-space-40) 0 var(--tuve-space-12);
  padding-top: var(--tuve-space-12);
  border-top: var(--tuve-border-width-hairline) solid var(--tuve-border);
}

.legal-body h3 {
  font-size: var(--tuve-font-size-md);
  font-weight: var(--tuve-font-weight-semibold);
  color: var(--tuve-ink);
  margin: var(--tuve-space-24) 0 var(--tuve-space-8);
}

.legal-body p,
.legal-body li {
  font-size: var(--tuve-font-size-base);
  color: var(--tuve-text-muted);
  margin: 0 0 var(--tuve-space-12);
}

.legal-body ul {
  margin: 0 0 var(--tuve-space-12);
  padding-left: var(--tuve-space-20);
}

.legal-body li { margin-bottom: var(--tuve-space-8); }

.legal-body strong { color: var(--tuve-ink); font-weight: var(--tuve-font-weight-semibold); }

.legal-body a {
  color: var(--tuve-brand-active);
  text-decoration: none;
}
.legal-body a:hover { text-decoration: underline; }

/* A flagged note (e.g. a contact value pending a real production value). */
.legal-note {
  display: block;
  margin-top: var(--tuve-space-4);
  font-size: var(--tuve-font-size-sm);
  color: var(--tuve-text-subtle);
}

/* ── contact page ─────────────────────────────────────────────────────── */
.legal-contact-list {
  list-style: none;
  margin: var(--tuve-space-8) 0 var(--tuve-space-24);
  padding: 0;
}

.legal-contact-list li {
  margin-bottom: var(--tuve-space-16);
  padding-bottom: var(--tuve-space-16);
  border-bottom: var(--tuve-border-width-hairline) solid var(--tuve-border);
}

.legal-contact-list li:last-child { border-bottom: 0; }

.legal-contact-label {
  display: block;
  font-size: var(--tuve-font-size-sm);
  color: var(--tuve-text-subtle);
  margin-bottom: var(--tuve-space-2);
}

.legal-contact-value {
  font-size: var(--tuve-font-size-md);
  color: var(--tuve-ink);
}

/* ── contact page: customer-service QR codes ─────────────────────────────
   Both QR PNGs ship with a baked-in white quiet zone, so they stay scannable
   on the dark theme without any CSS background of their own. */
.legal-qr-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tuve-space-24);
  margin: var(--tuve-space-16) 0 var(--tuve-space-24);
}

.legal-qr {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tuve-space-8);
  width: 140px;
}

.legal-qr img {
  width: 140px;
  height: 140px;
  display: block;
  border: var(--tuve-border-width-hairline) solid var(--tuve-border);
  border-radius: var(--tuve-radius-md);
}

.legal-qr figcaption {
  display: inline-flex;
  align-items: center;
  gap: var(--tuve-space-4);
  font-size: var(--tuve-font-size-sm);
  color: var(--tuve-text-muted);
}

.legal-qr-icon {
  display: inline-flex;
  flex: none;
  width: 15px;
  height: 15px;
}

.legal-qr-icon svg { width: 100%; height: 100%; display: block; }

/* 专属客服 headset glyph is our own UI mark, so it follows the TUVE brand token.
   (The 微信 mark beside it is a third-party brand logo and keeps its own green.) */
.legal-qr-icon--kefu { color: var(--tuve-brand); }

@media (max-width: 600px) {
  .legal-top { padding: var(--tuve-space-16) var(--tuve-space-20); }
  .legal-body { padding: var(--tuve-space-24) var(--tuve-space-20) var(--tuve-space-48); }
  .legal-h1 { font-size: var(--tuve-font-size-2xl); }
}