/* Dokumentacja integracji — dokłada się do /demo.css (te same zmienne i karty). */
.docs { max-width: 860px; margin: 0 auto; padding: 16px; display: grid; gap: 16px; }
.docs .card { min-width: 0; }
.docs h1 { font-size: 24px; }
.docs h2 { font-size: 19px; margin-top: 4px; }
.docs h3 { font-size: 16px; margin: 18px 0 6px; }
.docs p, .docs ul, .docs ol { margin: 8px 0; }
.docs li { margin: 4px 0; }
.docs code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.92em; overflow-wrap: anywhere; }
.docs :not(pre) > code { background: var(--code-bg); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }

/* Bloki kodu przewijają się w sobie — strona nigdy w poziomie. */
.docs pre {
  max-height: none; white-space: pre; word-break: normal; overflow-x: auto;
  font-size: 13px; line-height: 1.5; padding: 12px; margin: 8px 0;
}
.docs pre code { overflow-wrap: normal; }

.docs .toc { margin: 0; padding-left: 20px; columns: 2 220px; }
.docs .note { border-left: 4px solid var(--accent); background: #eef3ff; padding: 10px 12px; border-radius: 6px; margin: 10px 0; }
.docs .warn { border-left: 4px solid var(--bad); background: #fdf0ee; padding: 10px 12px; border-radius: 6px; margin: 10px 0; }
.docs .yours { color: var(--bad); font-weight: 600; }

/* Tabele przewijają się w sobie na wąskim ekranie. */
.docs .table-wrap { overflow-x: auto; margin: 8px 0; }
.docs table { border-collapse: collapse; width: 100%; font-size: 14px; }
.docs th, .docs td { text-align: left; vertical-align: top; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.docs th { background: var(--code-bg); }
.docs td:first-child { white-space: nowrap; }
.docs td:nth-child(2) { min-width: 120px; }
.docs td:nth-child(3) { min-width: 240px; }