/* ============================================================================
   legal.css — strony prawne (regulamin / prywatność / DPA) renderowane w DS
   „papierowy briefing". Ładowany OBOK base.css na stronach legal. Używa WYŁĄCZNIE
   tokenów z tokens.css (var(--…)) — zero ad-hoc kolorów. NIE edytujemy base.css/tokens.css.
   Cel: dokument legal czyta się jak strona (nie surowy markdown), placeholdery operatora /
   gate prawnika są widoczne jako „do wypełnienia", u góry baner „dokument w przygotowaniu".
   ============================================================================ */

.legal { max-width: var(--maxw-read); }

.legal-kicker {
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: var(--fw-ui-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-accent);
  margin-bottom: var(--sp-2);
}
.legal h1 {
  font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-2xl);
  letter-spacing: var(--tracking-head); line-height: 1.1; margin-bottom: var(--sp-2);
}
.legal-date { color: var(--color-text-subtle); font-size: var(--fs-sm); margin-bottom: var(--sp-5); }

.legal-sec { margin-top: var(--sp-6); }
.legal h2 {
  font-family: var(--font-display); font-weight: var(--fw-display-med); font-size: var(--fs-xl);
  letter-spacing: var(--tracking-head); margin-bottom: var(--sp-3);
}
.legal h3 {
  font-family: var(--font-ui); font-weight: var(--fw-ui-bold); font-size: var(--fs-lg);
  margin: var(--sp-5) 0 var(--sp-2);
}
.legal p { color: var(--color-text-muted); line-height: 1.7; margin-bottom: var(--sp-3); }
.legal strong { color: var(--color-text); font-weight: var(--fw-ui-bold); }

.legal-list { list-style: none; padding: 0; margin: 0 0 var(--sp-3); }
.legal-list li {
  position: relative; padding-left: var(--sp-5); color: var(--color-text-muted);
  line-height: 1.7; margin-bottom: var(--sp-3);
}
.legal-list li::before {
  content: ""; position: absolute; left: var(--sp-2); top: .62em;
  width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--color-accent);
}
.legal-list li strong { color: var(--color-text); }

.legal .table-wrap { margin-bottom: var(--sp-4); }

/* Placeholder „do wypełnienia" (dane operatora / gate prawnika). */
.legal-ph {
  font-style: normal; color: var(--color-warning-text); background: var(--color-trust-bg);
  border-radius: var(--radius-btn); padding: 0 .35em;
  border-bottom: var(--border-w) dashed var(--color-warning-text);
}

/* Baner „dokument w przygotowaniu". */
.legal-draft {
  background: var(--color-bg-alt); border: var(--border-w) solid var(--color-border-strong);
  border-left: var(--sp-1) solid var(--color-warning); border-radius: var(--radius-card);
  padding: var(--sp-4) var(--sp-5); color: var(--color-text-muted); line-height: 1.6;
  margin-bottom: var(--sp-6); font-size: var(--fs-sm);
}
.legal-draft strong { color: var(--color-text); }

.legal-crosslinks {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-7);
  padding-top: var(--sp-5); border-top: var(--border-w) solid var(--color-border); font-size: var(--fs-sm);
}