/* Copyright 2026, AI Company authors. Wyświetlanie dokumentów (render.js): pasek z formatem i narzędziami, podgląd
   markdown/JSON/YAML/CSV/HTML/diagramów/różnic. Kolory i kroje z ui.css; bez zewnętrznych fontów. */

/* ── ramka dokumentu ───────────────────────────────────── */
.dok { background: var(--panel); border: 1px solid var(--nit-lekki); border-radius: var(--r-duze); box-shadow: var(--cien); min-width: 0; max-width: 100%; }
.dok + .dok { margin-top: 10px; }
.akta-sekcja .dok { border-color: var(--teczka); }
.dok-pasek { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 5px 6px 5px 10px; border-bottom: 1px solid var(--nit-lekki); background: var(--panel-cien);
    border-radius: var(--r-duze) var(--r-duze) 0 0; min-height: 32px; }
.akta-sekcja .dok-pasek { border-bottom-color: var(--teczka); background: #fbf9f3; }
.dok-format { font: 600 9px/1.3 var(--sans); text-transform: uppercase; letter-spacing: 0.1em; color: var(--petrol-ciemny); background: var(--petrol-mgla);
    border: 1px solid #c4dedc; border-radius: 3px; padding: 3px 6px; white-space: nowrap; }
.dok-tytul { font-size: 12px; font-weight: 600; color: var(--atrament); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 80px; }
.dok-narzedzia { margin-left: auto; display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.dok-narzedzia .btn.maly { font-size: 10.5px; padding: 2px 7px; color: var(--grafit); }
.dok-narzedzia .btn.maly:hover { color: var(--atrament); }
.dok-tryb { display: inline-flex; border: 1px solid var(--nit); border-radius: var(--r); overflow: hidden; margin-right: 2px; }
.dok-tryb button { border: 0; background: var(--panel); color: var(--grafit); padding: 2px 8px; font-size: 10.5px; line-height: 1.5; }
.dok-tryb button + button { border-left: 1px solid var(--nit); }
.dok-tryb button.akt { background: var(--petrol); color: #fff; }
.dok-cialo { padding: 12px 14px; min-width: 0; overflow-x: auto; }
.dok-cialo.przewijany { max-height: 520px; overflow: auto; }
.dok-uwaga { font-size: 11px; color: var(--pracuje); background: var(--pracuje-mgla); border: 1px solid #ecd7ae; border-radius: var(--r); padding: 4px 8px; margin-bottom: 8px; }
.dok-schowek { position: fixed; left: -9999px; top: 0; opacity: 0; }

/* powiększenie: dokument na prawie cały ekran, reszta przyciemniona */
.dok.dok-duzy { position: fixed; inset: 3vh 3vw; z-index: 90; display: flex; flex-direction: column; margin: 0;
    box-shadow: 0 0 0 100vmax rgba(15, 31, 34, 0.45), 0 20px 60px rgba(15, 31, 34, 0.35); }
.dok.dok-duzy .dok-cialo { flex: 1 1 auto; max-height: none; overflow: auto; padding: 18px 24px; }
.dok.dok-duzy .ramka-uchwyt { height: calc(94vh - 110px); }
.dok.dok-duzy .md { max-width: 900px; margin: 0 auto; font-size: 14px; }
.dok.dok-duzy svg.mer { max-width: none; }

/* źródło i tekst */
.dok-zrodlo { margin: 0; font: 11.5px/1.55 var(--mono); color: var(--atrament); white-space: pre-wrap; word-break: break-word; tab-size: 4; }
.dok-zrodlo.bez-zawijania { white-space: pre; word-break: normal; }
.dok-tekst { white-space: pre-wrap; word-break: break-word; font-size: 12.5px; line-height: 1.55; }
.dok-code .dok-cialo, .dok-diff .dok-cialo, .dok-yaml .dok-cialo { background: #fbfcfc; }

/* ── markdown ──────────────────────────────────────────── */
.md { font-size: 13px; line-height: 1.6; color: var(--atrament); overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { font-family: var(--display); margin: 1.1em 0 0.45em; line-height: 1.25; }
.md h1 { font-size: 21px; font-stretch: 78%; font-weight: 700; padding-bottom: 4px; border-bottom: 1px solid var(--nit-lekki); }
.md h2 { font-size: 17px; font-stretch: 82%; font-weight: 700; }
.md h3 { font-size: 14.5px; }
.md h4 { font-size: 13px; }
.md h5, .md h6 { font: 700 10px/1.3 var(--sans); text-transform: uppercase; letter-spacing: 0.1em; color: var(--grafit); }
.md p { margin: 0 0 0.7em; }
.md ul, .md ol { margin: 0 0 0.7em; padding-left: 22px; }
.md li { margin: 2px 0; }
.md li > p { margin: 0 0 0.35em; }
.md li > ul, .md li > ol { margin: 2px 0 0; }
.md ul.md-zadania { list-style: none; padding-left: 4px; }
.md ul.md-zadania ul.md-zadania { padding-left: 22px; }
.md li.md-zadanie { display: block; }
.md .md-pole { margin: 0 6px 0 0; vertical-align: -1px; accent-color: var(--petrol); }
.md blockquote { margin: 0 0 0.7em; padding: 4px 12px; border-left: 3px solid var(--nit); color: var(--grafit); background: var(--panel-cien); border-radius: 0 var(--r) var(--r) 0; }
.md blockquote > :last-child { margin-bottom: 0; }
.md hr { border: 0; border-top: 1px solid var(--nit); margin: 1em 0; }
.md code { font-family: var(--mono); font-size: 0.86em; background: #eef2f1; border: 1px solid var(--nit-lekki); padding: 0 4px; border-radius: 3px; }
.akta-sekcja .md code { background: #eef2f1; }
.md a { color: var(--petrol); text-decoration: underline; text-decoration-color: #9cc4c2; text-underline-offset: 2px; }
.md a:hover { text-decoration-color: currentColor; }
.md del { color: var(--grafit-lekki); }
.md .md-obraz { max-width: 100%; height: auto; border-radius: var(--r); }
.md .md-zablokowany { color: var(--grafit-lekki); border-bottom: 1px dotted var(--grafit-lekki); }
.md-kod { margin: 0 0 0.8em; border: 1px solid var(--nit-lekki); border-radius: var(--r); background: #f7f9f8; overflow: hidden; }
.md-jezyk { font: 600 9px/1.3 var(--sans); text-transform: uppercase; letter-spacing: 0.1em; color: var(--grafit-lekki); padding: 4px 10px; border-bottom: 1px solid var(--nit-lekki); background: var(--panel-cien); }
.md-kod pre { margin: 0; padding: 8px 10px; overflow-x: auto; font: 11.5px/1.55 var(--mono); white-space: pre; }
.akta-sekcja .md-kod pre { white-space: pre-wrap; word-break: break-word; }
.md-kod pre code, .akta-sekcja .md-kod pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.md-tabela { overflow-x: auto; margin: 0 0 0.8em; border: 1px solid var(--nit-lekki); border-radius: var(--r); }
.md-tabela table.t td, .md-tabela table.t th { border-right: 1px solid var(--nit-lekki); }
.md-tabela table.t td:last-child, .md-tabela table.t th:last-child { border-right: 0; }
.md-tabela table.t th { text-transform: none; letter-spacing: 0; font: 600 11.5px/1.3 var(--sans); color: var(--atrament); background: var(--panel-cien); }
.md .md-left { text-align: left; }
.md .md-center { text-align: center; }
.md .md-right { text-align: right; }
.md-diagram { margin: 0 0 0.8em; }

/* ── JSON ──────────────────────────────────────────────── */
.jdrzewo { font: 11.5px/1.6 var(--mono); color: var(--atrament); }
.jdrzewo details > summary { cursor: pointer; list-style: none; border-radius: 3px; }
.jdrzewo details > summary::-webkit-details-marker { display: none; }
.jdrzewo details > summary::before { content: "▸"; display: inline-block; width: 12px; color: var(--grafit-lekki); font-size: 10px; }
.jdrzewo details[open] > summary::before { content: "▾"; }
.jdrzewo details > summary:hover { background: var(--petrol-mgla); }
.jdrzewo details[open] > summary .j-zwiniete { display: none; }
.j-dzieci { padding-left: 16px; border-left: 1px dotted var(--nit); margin-left: 5px; }
.j-zamkniecie { padding-left: 12px; }
.j-wiersz { padding-left: 12px; word-break: break-word; }
.j-klucz { color: var(--petrol-ciemny); font-weight: 600; }
.j-tekst { color: #8a4b0f; white-space: pre-wrap; }
.j-liczba { color: #2b4f8f; }
.j-logiczna { color: var(--blokada); font-weight: 600; }
.j-pusta { color: var(--grafit-lekki); font-style: italic; }
.j-int { color: var(--grafit-lekki); }
.j-ile { font: 500 10px var(--sans); color: var(--grafit-lekki); background: var(--panel-cien); border: 1px solid var(--nit-lekki); border-radius: 8px; padding: 0 6px; margin-left: 2px; }

/* ── YAML ──────────────────────────────────────────────── */
.yaml .y-klucz { color: var(--petrol-ciemny); font-weight: 600; }
.yaml .y-kom { color: var(--grafit-lekki); font-style: italic; }
.yaml .y-tekst { color: #8a4b0f; }
.yaml .y-lit { color: #2b4f8f; }
.yaml .y-znak { color: var(--grafit-lekki); }

/* ── tabele danych (CSV, TSV, tablice obiektów) ───────── */
.tab { min-width: 0; }
.tab-przewijana { overflow: auto; max-height: 520px; border: 1px solid var(--nit-lekki); border-radius: var(--r); background: var(--panel); }
.dok-duzy .tab-przewijana { max-height: none; }
table.tab-dane { font-size: 12px; }
table.tab-dane th { position: sticky; top: 0; z-index: 1; padding: 0; background: var(--panel-cien); white-space: nowrap; }
.akta-sekcja table.tab-dane th { background: var(--panel-cien); }
table.tab-dane td { padding: 5px 8px; }
table.tab-dane tbody tr:nth-child(even) td { background: #fafbfb; }
table.tab-dane tbody tr:hover td { background: var(--petrol-mgla); }
.tab-sortuj { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 7px 8px; cursor: pointer; font: 600 9px/1.3 var(--sans); text-transform: uppercase; letter-spacing: 0.1em; color: var(--grafit); }
.tab-sortuj:hover { color: var(--petrol-ciemny); background: var(--petrol-mgla); }
.tab-sortuj:focus-visible { outline: 2px solid var(--petrol); outline-offset: -2px; }
th[aria-sort="ascending"] .tab-sortuj, th[aria-sort="descending"] .tab-sortuj { color: var(--petrol-ciemny); }
.tab-strzalka { font-size: 8px; }
.tab-liczba { font-family: var(--mono); font-size: 11.5px; white-space: nowrap; }
.tab-stopka { display: flex; gap: 8px; align-items: center; font-size: 11px; color: var(--grafit-lekki); margin-top: 6px; }
table.tab-dane .wartosc-dluga.skrot { max-height: 6.2em; overflow: hidden; min-width: 180px; }
table.tab-dane dl.pola { grid-template-columns: max-content minmax(0, 1fr); gap: 2px 8px; font-size: 11.5px; }

/* ── różnice ───────────────────────────────────────────── */
.roznice { font: 11.5px/1.55 var(--mono); margin: -12px -14px; padding: 6px 0; }
.r-wiersz { white-space: pre-wrap; word-break: break-word; padding: 0 14px 0 22px; position: relative; min-height: 1.55em; }
.r-plus { background: var(--zdane-mgla); color: #0d4f37; }
.r-plus::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--zdane); }
.r-minus { background: var(--poprawka-mgla); color: #8a2a21; }
.r-minus::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--poprawka); }
.r-naglowek { color: var(--grafit-lekki); background: var(--panel-cien); margin: 4px 0 2px; }
.r-plik { color: var(--atrament); font-weight: 600; }
.r-uwaga { color: var(--grafit-lekki); font-style: italic; }

/* ── HTML i PDF w ramce ───────────────────────────────── */
.ramka-uchwyt { resize: vertical; overflow: hidden; height: 360px; min-height: 120px; border: 1px solid var(--nit-lekki); border-radius: var(--r); background: #fff; }
.ramka-uchwyt.pdf { height: 520px; }
.ramka-html, .ramka-pdf { display: block; width: 100%; height: 100%; border: 0; background: #fff; }

/* ── obrazy ────────────────────────────────────────────── */
.obraz { text-align: center; background: repeating-conic-gradient(#f1f4f3 0% 25%, #fff 0% 50%) 50% / 16px 16px; border-radius: var(--r); padding: 8px; }
.obraz img { max-width: 100%; height: auto; display: inline-block; vertical-align: middle; }
.dok-duzy .obraz img { max-height: calc(94vh - 120px); }

/* ── diagramy (mermaid) ───────────────────────────────── */
.diagram { overflow: auto; text-align: center; }
.diagram-tytul { font: 600 12px var(--display); margin-bottom: 6px; text-align: left; }
svg.mer { max-width: 100%; height: auto; display: inline-block; font-family: "Instrument Sans", "Segoe UI", system-ui, sans-serif; }
svg.mer .mer-ksztalt { fill: #fff; stroke: var(--petrol); stroke-width: 1.4; }
svg.mer .mer-diamond .mer-ksztalt { fill: var(--sygnal-mgla); stroke: var(--sygnal); }
svg.mer .mer-round .mer-ksztalt, svg.mer .mer-stadium .mer-ksztalt { fill: var(--petrol-mgla); }
svg.mer .mer-circle .mer-ksztalt { fill: var(--zdane-mgla); stroke: var(--zdane); }
svg.mer .mer-hex .mer-ksztalt, svg.mer .mer-para .mer-ksztalt, svg.mer .mer-para2 .mer-ksztalt, svg.mer .mer-trap .mer-ksztalt, svg.mer .mer-trap2 .mer-ksztalt { fill: var(--blokada-mgla); stroke: var(--blokada); }
svg.mer .mer-cyl .mer-ksztalt { fill: var(--pracuje-mgla); stroke: var(--pracuje); }
svg.mer .mer-linia { fill: none; stroke: var(--petrol); stroke-width: 1.2; }
svg.mer .mer-cyl .mer-linia { stroke: var(--pracuje); }
svg.mer .mer-tekst { font-size: 12px; fill: var(--atrament); }
svg.mer .mer-krawedz { fill: none; stroke: var(--grafit); stroke-width: 1.4; }
svg.mer .mer-dotted { stroke-dasharray: 4 3; }
svg.mer .mer-thick { stroke-width: 2.6; stroke: var(--atrament); }
svg.mer .mer-invisible { stroke: none; }
svg.mer .mer-grot { fill: var(--grafit); }
svg.mer .mer-etykieta-tlo { fill: var(--panel-cien); stroke: var(--nit-lekki); }
svg.mer .mer-etykieta { font-size: 11px; fill: var(--grafit); }
svg.mer .mer-grupa { fill: rgba(19, 100, 102, 0.04); stroke: var(--nit); stroke-dasharray: 5 3; }
svg.mer .mer-grupa-tytul { font: 600 10px var(--sans); fill: var(--grafit-lekki); text-transform: uppercase; letter-spacing: 0.08em; }

/* ── wartości ──────────────────────────────────────────── */
.wartosc-dluga { white-space: pre-wrap; word-break: break-word; }
dl.pola dd > .dok { margin: 2px 0 4px; }
dl.pola dd:has(> .dok) { grid-column: 1 / -1; }
dl.pola dd dl.pola { grid-template-columns: minmax(48px, max-content) minmax(0, 1fr); gap: 2px 10px; }