/* Design preview — legal / privacy documents */

.legal-preview {
  --legal-accent: var(--color-brand);
  --legal-accent-muted: var(--color-brand-muted);
  --legal-accent-line: var(--color-brand-line);
}

.legal-preview--wp {
  --legal-accent: var(--color-wp);
  --legal-accent-muted: var(--color-wp-muted);
  --legal-accent-line: rgba(232, 148, 58, 0.35);
}

.legal-preview--tc {
  --legal-accent: var(--color-tc);
  --legal-accent-muted: var(--color-tc-muted);
  --legal-accent-line: rgba(34, 211, 238, 0.35);
}

.legal-preview--rz {
  --legal-accent: var(--color-rz);
  --legal-accent-muted: var(--color-rz-muted);
  --legal-accent-line: rgba(52, 211, 153, 0.35);
}

.legal-page {
  padding-top: calc(var(--header-height, 4rem) + var(--space-2, 0.5rem));
  padding-bottom: var(--space-12, 3rem);
}

.legal-page .legal-content {
  max-width: 42rem;
  margin-inline: auto;
}

.legal-page .legal-header {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.legal-page .legal-header::before {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  border-radius: 2px;
  background: var(--legal-accent);
  margin-bottom: var(--space-5);
  opacity: 0.9;
}

.legal-page .legal-content h1 {
  font-size: clamp(var(--text-2xl, 1.5rem), 4vw, var(--text-3xl, 1.875rem));
  font-weight: 800;
  letter-spacing: var(--tracking-tight, -0.02em);
  line-height: var(--leading-tight, 1.2);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.legal-page .legal-updated {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.legal-page .legal-intro,
.legal-page .legal-header > p:not(.legal-updated) {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed, 1.75);
  margin-bottom: var(--space-3);
}

.legal-page .legal-content section {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.legal-page .legal-content section:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.legal-page .legal-content h2 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-4);
  line-height: var(--leading-snug, 1.35);
}

.legal-page .legal-content p {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed, 1.75);
  margin-bottom: var(--space-4);
}

.legal-page .legal-content p:last-child {
  margin-bottom: 0;
}

.legal-page .legal-content ul {
  margin: var(--space-2) 0 var(--space-4);
  padding-left: 1.35rem;
  list-style: disc;
}

.legal-page .legal-content li {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed, 1.75);
  margin-bottom: var(--space-3);
}

.legal-page .legal-content li:last-child {
  margin-bottom: 0;
}

.legal-page .legal-content a {
  color: var(--legal-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--legal-accent-line);
}

.legal-page .legal-content a:hover {
  color: var(--color-text);
  text-decoration-color: var(--legal-accent);
}

.legal-page .legal-content strong {
  color: var(--color-text);
  font-weight: 600;
}

/* Document nav (app policies) */
.app-privacy-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-8);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 0.5rem);
  font-size: var(--text-sm);
}

.app-privacy-nav a {
  color: var(--legal-accent);
  font-weight: 600;
  text-decoration: none;
}

.app-privacy-nav a:hover {
  text-decoration: underline;
}

.app-privacy-lang {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  font-weight: 600;
}

.app-privacy-lang span[aria-hidden="true"] {
  color: var(--color-text-tertiary);
}

.app-privacy-lang a {
  color: var(--color-text-tertiary);
  text-decoration: none;
  padding: 0.15rem 0.35rem;
  border-radius: var(--radius-sm, 0.25rem);
}

.app-privacy-lang a.is-active {
  color: var(--legal-accent);
  background: var(--legal-accent-muted);
}

.app-privacy-lang a:hover:not(.is-active) {
  color: var(--color-text-secondary);
}

@media (max-width: 30rem) {
  .app-privacy-lang {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }
}

.legal-preview-footer-note {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}