/* frontend/css/legal.css
 *
 * engagement: legal-compliance-pages (PR1) — design
 * docs/design/legal-compliance-pages.md §Components.
 *
 * Shared styling for the six unauthed legal pages (/terms /privacy /refunds
 * /disclaimer /contact /about). Token-only (no hex literals); every value uses a
 * canonical theme token defined in themes.css. Kept in its own file per
 * ui-style-guide.md §5.3 (>5 rules => own stylesheet, no per-page inline sprawl).
 *
 * The .diq-not-advice contextual callout and the global footer-nav links live in
 * app.css (they also appear on app pages), so they are NOT redefined here.
 */

.legal-shell {
  max-width: 760px;
  margin: 4vh auto;
  padding: 32px 20px 48px;
  color: var(--text);
}

.legal-shell h1 {
  font-size: 1.6rem;
  margin: 0 0 8px;
  color: var(--text);
}

.legal-shell h2 {
  font-size: 1.1rem;
  margin: 28px 0 12px;
  color: var(--text);
}

.legal-shell h3 {
  font-size: 1rem;
  margin: 20px 0 8px;
  color: var(--text);
}

.legal-shell p,
.legal-shell li {
  color: var(--text2);
  line-height: 1.6;
  font-size: 0.95rem;
}

.legal-shell strong {
  color: var(--text);
}

.legal-shell a {
  /* --accent is the FILL/brand token (fails AA as text on light surfaces, e.g.
   * #cc6b28 on light-obsidian #f5f0eb ≈ 3.25:1). Use the purpose-built per-theme
   * AA-safe text token --accent-text (light-obsidian #8a3f10, prism #5b21b6,
   * slate-dark #1e5fb8 — all ≥4.5:1). See themes.css ~563/594/623. */
  color: var(--accent-text, var(--accent));
  text-decoration: underline;
}

.legal-shell ul,
.legal-shell ol {
  padding-left: 22px;
  margin: 8px 0;
}

.legal-effective {
  color: var(--text2);
  font-size: 0.85rem;
  margin: 0 0 20px;
}

.legal-back-row {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.legal-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  color: var(--text);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface2);
}

@media (hover: hover) {
  .legal-back-link:hover { background: var(--surface3); }
}

.legal-back-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Plain-language "What this means" summary block (reuses the diq-how-it-works
 * <details> pattern; this rule only tunes spacing inside a legal page). */
.legal-shell .diq-how-it-works {
  margin: 16px 0;
}

/* Sub-processor / disclosure table on /privacy. Token-only, mirrors the
 * pricing.html feature-comparison table shape. */
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 0.88rem;
}

.legal-table th,
.legal-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  color: var(--text2);
  vertical-align: top;
}

.legal-table thead th {
  color: var(--text);
  font-weight: 600;
  background: var(--surface);
}

/* Attorney-review flag — a muted, visible-in-page marker paired with the
 * in-source <!-- ATTORNEY-REVIEW-RECOMMENDED --> comment. */
.legal-review-flag {
  margin: 20px 0;
  padding: 10px 14px;
  border: 1px dashed var(--border2);
  border-radius: 6px;
  background: var(--surface2);
  color: var(--text2);
  font-size: 0.82rem;
}

.legal-address {
  color: var(--text2);
  line-height: 1.6;
  font-size: 0.95rem;
}