/* ---------- protokół do druku ----------
   Układ przeniesiony ze strony duratio.pl, żeby dokument z programu i dokument
   z kalkulatora były tym samym dokumentem, a nie dwoma podobnymi. */
/* Na ekranie ukryty, pokazuje go przycisk podglądu albo wydruk.
   Szerokość 182 mm to obszar zadruku A4 przy marginesach 14 mm, dzięki czemu
   podgląd łamie się dokładnie tak jak wydruk, a skrypt może zmierzyć, czy
   dokument mieści się na dwóch stronach. */
.doc{display:none;background:var(--karta);color:#000;width:182mm;margin:0 auto;position:relative}
body.podglad .doc{display:block}
body.podglad .nodoc{display:none}

/* Każda strona jest osobnym prostokątem o wysokości obszaru zadruku A4, dzięki
   czemu podgląd pokazuje dokładnie to, co wyjdzie z drukarki, a stopka trzyma się
   dołu kartki zamiast dryfować za treścią. */
.doc-strona{position:relative;display:flex;flex-direction:column;height:269mm;overflow:hidden;
  background:var(--karta)}
body.podglad .doc-strona{border:1px solid var(--linia-mocna);box-shadow:0 1px 3px rgba(0,0,0,.08);
  margin:0 auto 22px;padding:0}
/* Treść jest kolumną, dzięki czemu blok oznaczony klasą doosu (rubryki na uwagi,
   miejsce na podpisy) opada na dół kartki i strona nie kończy się pustką. */
.doc-tresc{flex:1 1 auto;zoom:var(--tresc-zoom,1);display:flex;flex-direction:column;min-height:0;
  justify-content:space-between}
.doc .sek{break-inside:avoid}
.doc-stopka{flex:0 0 auto;border-top:.5pt solid #bbb;padding-top:4px;margin-top:8px;
  font-size:7pt;color:#444;line-height:1.4;display:flex;justify-content:space-between;gap:16px}
.doc-stopka .nr{white-space:nowrap;font-weight:640}
.doc-biezacy{display:flex;justify-content:space-between;gap:16px;border-bottom:.5pt solid #999;
  padding-bottom:4px;margin-bottom:9px;font-size:8pt;color:#333}
.doc-biezacy b{color:#000}

/* pasek wyjścia z podglądu, jedyny element interfejsu widoczny w tym trybie */
.doc-bar{display:none}
body.podglad .doc-bar{display:flex;position:sticky;top:0;z-index:20;align-items:center;gap:14px;
  flex-wrap:wrap;background:var(--karta);border-bottom:1px solid var(--linia-mocna);
  padding:12px 22px;margin:0 -22px 0}
.doc-bar .info{font-size:13.5px;color:var(--pismo-3);margin-right:auto}

.doc-glowka{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  border-bottom:1.5pt solid #000;padding-bottom:6px;margin-bottom:10px}
.doc-glowka .tytul{font-size:13pt;font-weight:700;line-height:1.25;margin:0}
.doc-glowka .rodzaj{font-size:9pt;color:#333;margin:2px 0 0}
.doc-glowka .meta{text-align:right;font-size:9pt;line-height:1.45;white-space:nowrap}
.doc-glowka .meta b{font-size:10pt}

.doc h2{font-size:9.5pt;margin:9px 0 4px;letter-spacing:.02em;text-transform:uppercase;
  font-weight:700;break-after:avoid;color:#000}
.doc h2:first-child{margin-top:0}
/* globalna reguła znosi dolną krawędź ostatniego wiersza, w dokumencie tabela ma być domknięta */
.doc tbody tr:last-child td{border-bottom:.5pt solid #999}
.doc .rubryki{margin:4px 0 0}
.doc .rubryki .linia{border-bottom:.5pt dotted #888;height:5.2mm}
.doc .zalaczniki{font-size:8.5pt;line-height:1.5;margin:2px 0 0;display:grid;
  grid-template-columns:1fr 1fr;gap:3px 18px}
.doc .zalaczniki span{display:flex;align-items:flex-start;gap:6px;break-inside:avoid}
.doc .kratka{flex:0 0 auto;width:3.2mm;height:3.2mm;border:.5pt solid #666;margin-top:.6mm}
.doc p{margin:0 0 5px;font-size:9pt;line-height:1.4}
.doc table{font-size:8.5pt;margin:3px 0 6px;break-inside:auto;width:100%;border-collapse:collapse}
.doc th,.doc td{padding:2.5px 6px;border:.5pt solid #999;vertical-align:top;text-align:left}
.doc th{background:#eeece7;color:#000;text-transform:none;letter-spacing:0;font-size:8.5pt;font-weight:700}
.doc .kv td:first-child{width:38%;color:#333}
.doc .kv td{word-break:break-word}
.doc .dwie{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
/* Rubryka, której nie wypełniono w formularzu: linia do uzupełnienia długopisem. */
.doc .do-wpisania{display:inline-block;width:85%;height:1em;border-bottom:.5pt dotted #888;vertical-align:bottom}
.doc .zrodlo{font-size:7.5pt;color:#444;line-height:1.35;margin:0 0 5px}
.doc .wzory{font-family:var(--font-liczby);font-size:8.5pt;line-height:1.5;background:#f7f6f3;
  border:.5pt solid #ccc;padding:5px 9px;margin:0 0 5px;break-inside:avoid}
.doc .wynik{border:1.5pt solid #000;padding:7px 12px;margin:6px 0;break-inside:avoid;
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.doc .wynik .duza{font-size:17pt;font-weight:700;line-height:1.1;white-space:nowrap}
.doc .wynik .opis{font-size:8.5pt;line-height:1.35}
.doc .zastrzezenie{border:.5pt solid #999;background:#f7f6f3;padding:6px 10px;font-size:7.8pt;
  line-height:1.4;break-inside:avoid;margin:0 0 6px}
/* Nad linią podpisu zostaje 26 mm wolnego, bo w tym miejscu ląduje pieczątka
   firmowa i podpis odręczny. Bez tego zapasu podpis wchodzi na tekst wyżej. */
.doc .podpisy{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:10px;break-inside:avoid}
.doc .podpis-pole{height:28mm;padding-top:2px}
.doc .podpis-pole .nadpis{font-size:7.5pt;color:#777;margin:0;text-align:center}
.doc .podpis{border-top:.5pt solid #000;padding-top:4px;font-size:8pt;color:#333;text-align:center}
.doc .stopka{margin-top:12px;padding-top:5px;border-top:.5pt solid #bbb;font-size:7pt;color:#444;line-height:1.4}
.doc ol,.doc ul{font-size:9pt;padding-left:18px;margin:0 0 6px}
.doc li{margin-bottom:2px}

/* Znak wodny wersji podglądowej. Zostaje także przy druku z pominięciem przycisku,
   żeby dokument bez konta nigdy nie wyglądał na gotowy do obiegu. */
.doc .znak{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.doc .znak span{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%) rotate(-24deg);
  font-size:52pt;font-weight:800;color:rgba(164,80,30,.10);letter-spacing:.06em;white-space:nowrap}
.doc .znak span.b{top:78%}


/* dokument w programie: pokazujemy go zamiast interfejsu, na czas podglądu i druku */
body.podglad .aplikacja{display:none}
body.podglad .doc{display:block;background:var(--tlo);padding:18px 0 40px}
.doc-pasek{
  position:sticky;top:0;z-index:30;display:none;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--karta);border-bottom:1px solid var(--linia-mocna);padding:10px 20px;
}
body.podglad .doc-pasek{display:flex}
.doc-pasek .info{font-size:13px;color:var(--pismo-3);margin-right:auto}

@media print{
  @page{size:A4;margin:14mm}
  /* Wydruk bez otwartego protokołu nie ma sensu: interfejs na papierze to
     zmarnowana kartka. Zamiast tego jedno zdanie, co zrobić. */
  body:not(.podglad) .aplikacja{display:none}
  body:not(.podglad)::after{
    content:"Otwórz kartę urządzenia i kliknij Protokół resursu, wtedy wydruk da gotowy dokument.";
    display:block;padding:40mm 0;text-align:center;font-size:11pt;color:#000;
  }
  .aplikacja,.doc-pasek{display:none!important}
  body{background:#fff}
  /* Podgląd na ekranie ma zapas wokół kartek, na papierze ten zapas byłby
     dodatkową, pustą stroną. Selektor musi mieć tę samą wagę co reguła podglądu. */
  body.podglad .doc,.doc{display:block!important;background:#fff;padding:0;margin:0;width:auto}
  /* Ramka i cień są elementem podglądu na ekranie, na papierze nie mają czego pokazywać. */
  .doc-strona{border:none!important;box-shadow:none!important;margin:0!important;
    height:269mm;break-inside:avoid}
  .doc-strona + .doc-strona{break-before:page}
  .doc h2{break-after:avoid}
  thead{display:table-header-group}
}