/* Duratio, arkusz stylów. Bez zależności zewnętrznych, bez zapytań do innych domen. */

:root{
  --ink:#16191d;
  --ink-2:#3d444d;
  --ink-3:#6b737d;
  --line:#e2e0da;
  --line-2:#cfccc3;
  --paper:#faf8f4;
  --paper-2:#f2efe8;
  --white:#fff;
  --accent:#a4501e;      /* miedź, kolor własny, celowo nie urzędowy */
  --accent-soft:#f6ece3;
  --teal:#1f4f4a;
  --teal-soft:#e6efed;
  --ok:#2f6b41;
  --ok-soft:#e7f1e9;
  --warn:#8a5a12;
  --warn-soft:#fbf0dc;
  --bad:#9b2f27;
  --bad-soft:#fae9e7;
  --radius:6px;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
/* atrybut hidden musi wygrywać z display:flex/grid nadanym przez klasy */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}

.wrap{max-width:1060px;margin:0 auto;padding:0 22px}
.narrow{max-width:760px}

/* ---------- nagłówek ---------- */
.top{border-bottom:1px solid var(--line);background:var(--white)}
.top .wrap{display:flex;align-items:center;gap:26px;min-height:66px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-weight:650;
  font-size:19px;letter-spacing:-.02em;margin-right:auto}
.brand svg{display:block}
.brand span{color:var(--ink-3);font-weight:400;font-size:13px;letter-spacing:0}
nav a{color:var(--ink-2);text-decoration:none;font-size:14.5px;padding:6px 0;border-bottom:2px solid transparent}
nav a:hover{color:var(--accent);border-bottom-color:var(--accent)}
nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
nav{display:flex;gap:20px;flex-wrap:wrap}

/* ---------- typografia ---------- */
h1{font-size:clamp(28px,4.2vw,40px);line-height:1.16;letter-spacing:-.025em;margin:0 0 16px;font-weight:680}
h2{font-size:clamp(21px,2.6vw,26px);line-height:1.26;letter-spacing:-.018em;margin:44px 0 14px;font-weight:660}
h3{font-size:17.5px;line-height:1.35;margin:28px 0 10px;font-weight:640}
h4{font-size:15px;margin:20px 0 8px;font-weight:640;color:var(--ink-2)}
p{margin:0 0 15px}
.lead{font-size:18.5px;line-height:1.58;color:var(--ink-2);margin-bottom:22px}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}
small,.small{font-size:13.5px;color:var(--ink-3);line-height:1.5}
code,kbd{font-family:var(--mono);font-size:.9em;background:var(--paper-2);padding:1px 5px;border-radius:3px}
hr{border:0;border-top:1px solid var(--line);margin:38px 0}
ul,ol{margin:0 0 15px;padding-left:22px}
li{margin-bottom:6px}

/* ---------- sekcje ---------- */
section{padding:8px 0}
.hero{padding:56px 0 40px;border-bottom:1px solid var(--line);background:var(--white)}
.eyebrow{font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);
  font-weight:640;margin:0 0 12px}

/* ---------- karty ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin:22px 0}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.card h3{margin-top:0}
.card.lift{transition:border-color .15s}
.card.lift:hover{border-color:var(--line-2)}
.card .tag{display:inline-block;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;
  font-weight:640;padding:3px 8px;border-radius:3px;margin-bottom:10px}
.tag-free{background:var(--ok-soft);color:var(--ok)}
.tag-soon{background:var(--paper-2);color:var(--ink-3)}

/* ---------- przyciski ---------- */
.btn{display:inline-block;background:var(--accent);color:#fff;border:1px solid var(--accent);
  padding:10px 18px;border-radius:var(--radius);text-decoration:none;font-weight:600;font-size:15px;
  cursor:pointer;font-family:inherit;line-height:1.4}
.btn:hover{background:#8d4419;border-color:#8d4419}
.btn.sec{background:var(--white);color:var(--ink);border-color:var(--line-2)}
.btn.sec:hover{background:var(--paper-2);border-color:var(--ink-3)}
.btn.sm{padding:6px 12px;font-size:13.5px}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}

/* ---------- formularze ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:14px;align-items:end}
.f{display:flex;flex-direction:column;gap:5px}
.f label{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.f .hint{font-weight:400;color:var(--ink-3);font-size:12.5px}

/* Etykieta zajmująca dwie linie rozsuwała pola w tym samym wierszu siatki: każdy
   .f był osobnym kontenerem i sam ustalał wysokość swoich części. Subgrid sprawia,
   że etykiety i pola dzielą wspólne pasma wierszy, więc wyrównują się do siebie.
   Warunek: .f ma dokładnie dwoje dzieci (etykieta + kontrolka).
   Przeglądarki bez subgrid dostają align-items:end, czyli równe dolne krawędzie. */
@supports (grid-template-rows:subgrid){
  .grid{align-items:stretch}
  .grid > .f{display:grid;grid-template-rows:subgrid;grid-row:span 2;gap:5px}
  .grid > .f > label{align-self:end}
}
input,select,textarea{font-family:inherit;font-size:15px;padding:8px 10px;border:1px solid var(--line-2);
  border-radius:4px;background:var(--white);color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:0 0 18px;background:var(--white)}
legend{font-weight:650;font-size:15px;padding:0 8px;color:var(--ink)}

/* ---------- tabele ---------- */
table{width:100%;border-collapse:collapse;font-size:14.5px;margin:14px 0;background:var(--white)}
th,td{text-align:left;padding:9px 11px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:640;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);
  background:var(--paper-2);border-bottom:1px solid var(--line-2)}
tbody tr:last-child td{border-bottom:none}
.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:13.5px}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);margin:16px 0}
.tbl-wrap table{margin:0}

/* ---------- bloki informacyjne ---------- */
.note{border-left:3px solid var(--line-2);background:var(--white);padding:14px 18px;
  border-radius:0 var(--radius) var(--radius) 0;margin:18px 0;font-size:14.5px;line-height:1.58}
.note p:last-child{margin-bottom:0}
.note.warn{border-left-color:var(--warn);background:var(--warn-soft)}
.note.bad{border-left-color:var(--bad);background:var(--bad-soft)}
.note.ok{border-left-color:var(--ok);background:var(--ok-soft)}
.note.info{border-left-color:var(--teal);background:var(--teal-soft)}
.note b{font-weight:650}

/* ---------- wynik ---------- */
.result{border:1px solid var(--line-2);border-radius:var(--radius);background:var(--white);overflow:hidden}
.result .head{padding:16px 20px;border-bottom:1px solid var(--line)}
.result .head .state{font-size:12px;text-transform:uppercase;letter-spacing:.09em;font-weight:680}
.result .head .big{font-size:38px;font-weight:680;letter-spacing:-.03em;line-height:1.1;
  font-variant-numeric:tabular-nums;margin:4px 0 2px}
.result.ok .head{background:var(--ok-soft)} .result.ok .state,.result.ok .big{color:var(--ok)}
.result.warn .head{background:var(--warn-soft)} .result.warn .state,.result.warn .big{color:var(--warn)}
.result.bad .head{background:var(--bad-soft)} .result.bad .state,.result.bad .big{color:var(--bad)}
.result dl{margin:0;padding:6px 20px 14px}
.result dl div{display:flex;justify-content:space-between;gap:14px;padding:7px 0;
  border-bottom:1px solid var(--line);font-size:14.5px}
.result dl div:last-child{border-bottom:none}
.result dt{color:var(--ink-3)}
.result dd{margin:0;font-weight:620;font-variant-numeric:tabular-nums;text-align:right}

.bar{height:9px;background:var(--paper-2);border-radius:5px;overflow:hidden;margin:12px 20px}
.bar i{display:block;height:100%;border-radius:5px;transition:width .25s}
.result.ok .bar i{background:var(--ok)} .result.warn .bar i{background:var(--warn)} .result.bad .bar i{background:var(--bad)}

/* ---------- badge ---------- */
.badge{display:inline-block;font-size:12px;font-weight:640;padding:2px 8px;border-radius:10px;white-space:nowrap}
.b-ok{background:var(--ok-soft);color:var(--ok)}
.b-warn{background:var(--warn-soft);color:var(--warn)}
.b-bad{background:var(--bad-soft);color:var(--bad)}
.b-info{background:var(--teal-soft);color:var(--teal)}
.b-mute{background:var(--paper-2);color:var(--ink-3)}

/* ---------- szczegóły ---------- */
details{border:1px solid var(--line);border-radius:var(--radius);background:var(--white);margin:14px 0}
summary{cursor:pointer;padding:12px 18px;font-weight:620;font-size:15px;list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"›";display:inline-block;margin-right:9px;transform:rotate(0);transition:transform .15s;
  color:var(--accent);font-weight:700}
details[open] summary::before{transform:rotate(90deg)}
details .body{padding:0 18px 16px;border-top:1px solid var(--line);padding-top:14px}

/* ---------- FAQ ---------- */
.faq details{margin-bottom:8px}
.faq summary{font-size:15.5px}

/* ---------- stopka ---------- */
footer{border-top:1px solid var(--line);margin-top:56px;padding:34px 0 46px;background:var(--white)}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px}
footer h4{margin-top:0}
footer a{color:var(--ink-2);text-decoration:none;display:block;padding:2px 0;font-size:14px}
footer a:hover{color:var(--accent);text-decoration:underline}
.legal{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3);line-height:1.6}

/* ---------- stan oczekiwania na dane ---------- */
.pusty{padding:26px 20px;text-align:center;color:var(--ink-3)}
.pusty .znak{font-size:26px;font-weight:680;color:var(--line-2);letter-spacing:-.03em}
.pusty p{margin:8px 0 0;font-size:14px;line-height:1.5}

/* Pasek nad wynikiem i protokołem, gdy w polach siedzi wczytany przykład.
   Ma być widoczny także na wydruku, żeby nikt nie wziął przykładu za pomiar. */
.demo-flag{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn);
  border-radius:var(--radius);padding:8px 14px;font-size:13.5px;font-weight:640;margin:0 0 14px}

/* ---------- protokół ---------- */
/* 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(--white);color:#000;width:182mm;margin:0 auto;
  zoom:var(--doc-zoom,1);position:relative}
body.podglad .doc{display:block;border:1px solid var(--line-2);padding:0;margin:18px auto 40px;
  box-shadow:0 1px 3px rgba(0,0,0,.08)}
body.podglad .nodoc{display:none}
body.podglad .doc-ramka{padding:14mm}

/* 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(--white);border-bottom:1px solid var(--line-2);
  padding:12px 22px;margin:0 -22px 0}
.doc-bar .info{font-size:13.5px;color:var(--ink-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 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(--mono);font-size:8.5pt;line-height:1.65;background:#f7f6f3;
  border:.5pt solid #ccc;padding:6px 9px;margin:0 0 6px;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}
.doc .podpisy{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:16px;break-inside:avoid}
.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}
.doc .str2{break-before:page}

/* 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%}

/* ---------- druk ---------- */
@media print{
  @page{size:A4;margin:16mm 15mm}
  .top,footer,.btnrow,.noprint{display:none!important}
  body{background:#fff;font-size:11pt}
  .wrap{max-width:100%;padding:0}
  .card,.result,fieldset,.tbl-wrap{border-color:#999;break-inside:avoid}
  details{border:none} details .body{display:block!important}
  a{color:inherit;text-decoration:none}
  /* Gdy strona ma protokół, drukuje się wyłącznie protokół. */
  body:has(.doc) .nodoc{display:none!important}
  .doc{display:block!important;padding:0;margin:0;border:none}
  .doc h2{break-after:avoid}
  thead{display:table-header-group}
}

@media (max-width:640px){
  .top .wrap{min-height:0;padding-top:12px;padding-bottom:12px}
  nav{gap:14px;width:100%}
  .hero{padding:36px 0 28px}
  .result dl div{flex-direction:column;gap:2px}
  .result dd{text-align:left}
}