/* Motyw warsztatowy w sepii: brązowe tło strony, beżowe panele, zdjęcie w banerze. Tylko jasny motyw. */
:root {
  color-scheme: light;
  --tlo: #4b3a2b;        /* brąz tła strony (ciepły, przygaszony jak sepia) */
  --baner: #2e2218;      /* ciemny brąz pod zdjęciem banera */
  --karta: #efe3cb;      /* beż paneli */
  --karta-2: #ddcaa6;    /* ciemniejszy beż: przyciski, nagłówki tabeli */
  --pole: #fbf6ea;       /* jasny beż pól formularzy i raportu */
  --tekst: #2b2118;
  --tekst-2: #594634;
  --placeholder: #6a5742;
  --ramka: #8a6f52;
  --akcent: #5e4126;     /* przycisk główny */
  --akcent-tekst: #fbf3e2;
  --blad-tlo: #8a2a1a;
  --blad-tekst: #fff4e8;
  --niebezp: #8a2a1a;
  --fokus: #f59e42;      /* jasny pomarańcz: zewnętrzny pierścień fokusu (widoczny na brązie i zdjęciu) */
  --fokus-wew: #2b1d12;  /* ciemnobrązowy pierścień przy elemencie (widoczny na beżu) */
  --na-brazie: #eadfc9;  /* tekst bezpośrednio na brązie (stopka) */
  --link: #f0d9a8;       /* linki na brązie (stopka) */
  --mosiadz: #b08d57;    /* akcent: cienka linia pod banerem */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --promien: 8px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* baner: zdjęcie w tle (CSS, bo to dekoracja; media query wybiera plik, więc telefon pobiera tylko 960 px) */
.baner {
  background-color: var(--baner);
  background-image:
    linear-gradient(90deg, rgba(20, 13, 7, 0.74) 0%, rgba(20, 13, 7, 0.68) 55%, rgba(20, 13, 7, 0) 92%),
    url("baner-tlo-960.jpg");
  background-size: cover;
  background-position: 70% 72%;
  border-bottom: 3px solid var(--mosiadz);
  margin-bottom: 20px;
}
@media (min-width: 961px) {
  .baner {
    background-image:
      linear-gradient(90deg, rgba(20, 13, 7, 0.74) 0%, rgba(20, 13, 7, 0.68) 55%, rgba(20, 13, 7, 0) 92%),
      url("baner-tlo.jpg");
  }
}
.baner-wnetrze {
  max-width: 64rem;
  min-height: 190px;
  margin: 0 auto;
  padding: 28px 16px;
  display: flex;
  align-items: center;
}
.baner-tekst { max-width: 30rem; min-width: 0; }
.baner h1 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: #fbf3e0;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.75);
}
.baner h1::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 2px;
  margin-top: 10px;
  background: var(--mosiadz);
}
.baner .opis {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-style: italic;
  color: #eadfc9;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}

main, .stopka {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

h2 { margin: 0 0 12px; font-size: 1.15rem; }
.podpowiedz { margin: 8px 0 0; font-size: 0.9rem; color: var(--tekst-2); }
.stopka { padding-top: 8px; padding-bottom: 32px; font-size: 0.85rem; color: var(--na-brazie); }
.stopka p { margin: 0 0 6px; }
.stopka a { color: var(--link); text-underline-offset: 2px; }

.karta {
  background: var(--karta);
  border: 1px solid var(--ramka);
  border-radius: var(--promien);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}

.naglowek-sekcji {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.naglowek-sekcji h2 { margin: 0; }

.siatka-pol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 12px;
  align-items: end;
}

label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; }
label.pole-pelne { grid-column: 1 / -1; }
label.wybor { flex-direction: row; align-items: center; gap: 8px; min-height: 44px; }

input[type="number"], input[type="text"] {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  font: inherit;
  color: var(--tekst);
  background: var(--pole);
  border: 1px solid var(--ramka);
  border-radius: 6px;
}
input::placeholder { color: var(--placeholder); opacity: 1; }
input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--akcent); }

button, .przycisk {
  min-height: 44px;
  padding: 8px 16px;
  font: inherit;
  color: var(--tekst);
  background: var(--karta-2);
  border: 1px solid var(--ramka);
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
button:hover, .przycisk:hover { border-color: var(--akcent); background: #e7d8bb; }
button.glowny { background: var(--akcent); color: var(--akcent-tekst); border-color: var(--akcent); font-weight: 600; }
button.glowny:hover { background: #4a321c; border-color: #4a321c; }
button.niebezpieczny { color: var(--niebezp); }

/* podwójny pierścień fokusu: ciemny 2 px tuż przy elemencie (box-shadow) + jasny pomarańcz 3 px na zewnątrz,
   odsunięty o 2 px, więc leży dokładnie za ciemnym; żaden fokusowalny element nie ma własnego box-shadow */
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--fokus-wew); }

.przyciski { display: flex; flex-wrap: wrap; gap: 12px; }

.tylko-czytnik {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* tabela elementów */
table.elementy { width: 100%; border-collapse: collapse; }
table.elementy th {
  text-align: left;
  font-size: 0.85rem;
  color: var(--tekst-2);
  background: var(--karta-2);
  padding: 6px;
  border-bottom: 1px solid var(--ramka);
}
table.elementy td { padding: 6px; vertical-align: middle; }
table.elementy td:nth-child(5) { text-align: center; }
table[hidden], [hidden] { display: none !important; }

/* telefon: wiersze jako karty, baner pod tytułem */
@media (max-width: 640px) {
  /* telefon: tekst u góry pod ciemną nakładką, narzędzia widoczne w dolnej części kadru (kadr w prawo) */
  .baner {
    background-image:
      linear-gradient(180deg, rgba(20, 13, 7, 0.74) 0%, rgba(20, 13, 7, 0.74) 58%, rgba(20, 13, 7, 0.05) 100%),
      url("baner-tlo-960.jpg");
    background-position: 82% 72%;
  }
  .baner-wnetrze { min-height: 230px; padding: 20px 16px; align-items: flex-start; }
  .baner h1 { font-size: 2rem; }
  .baner .opis { font-size: 1rem; }
  table.elementy, table.elementy tbody, table.elementy tr, table.elementy td { display: block; width: 100%; }
  table.elementy thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.elementy tr {
    border: 1px solid var(--ramka);
    border-radius: var(--promien);
    background: var(--pole);
    padding: 8px;
    margin-bottom: 12px;
  }
  table.elementy td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; }
  table.elementy td::before { content: attr(data-etykieta); flex: 0 0 40%; font-size: 0.85rem; color: var(--tekst-2); }
  table.elementy td:last-child::before { content: none; }
  table.elementy td input[type="text"], table.elementy td input[type="number"] { flex: 1 1 60%; }
  table.elementy td:last-child { justify-content: flex-end; }
  .naglowek-sekcji { flex-wrap: wrap; }
}

/* wynik */
.blad {
  margin: 0 0 12px;
  padding: 12px 12px 12px 16px;
  background: var(--blad-tlo);
  color: var(--blad-tekst);
  border-left: 8px solid #d9a441;
  border-radius: 6px;
  font-weight: 600;
}
.duzy { font-size: 1.3rem; font-weight: 700; margin: 0 0 8px; }
.raport {
  margin: 0 0 16px;
  padding: 12px;
  overflow-x: auto;
  color: var(--tekst);
  font: 0.85rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--pole);
  border: 1px solid var(--ramka);
  border-radius: 6px;
}
.plyty { display: grid; gap: 16px; }
figure { margin: 0; }
figure img {
  display: block;
  width: 100%;
  height: auto;
  background: #ffffff;
  border: 4px solid var(--ramka);
  border-radius: 6px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}
figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* ---------- wydruk: karta rozkroju do warsztatu (czarno na białym) ---------- */
.tylko-druk { display: none; }

/* strona tytułowa (parametry, elementy, raport) pionowo, rysunki płyt na osobnych stronach.
   Płyta leżąca (np. 2800×2070, proporcje ok. 1,35) na A4 poziomo zajmuje ok. 35% większą skalę niż na pionowym
   (186 mm wysokości zamiast 186 mm szerokości), dlatego rysunki dostają nazwane strony. */
@page { size: A4; margin: 12mm; }
@page pozioma { size: A4 landscape; margin: 12mm; }
@page pionowa { size: A4 portrait; margin: 12mm; }

@media print {
  :root { color-scheme: light; }
  html, body {
    background: #fff;
    color: #000;
    font: 10pt/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* wszystko poza kartą do druku, raportem i rysunkami */
  .baner, .stopka, button, .przycisk, #status, #wynik-pusty, #blad, h1:not(.druk-tytul), #liczba-plyt,
  main > section.karta:not(#wynik-sekcja), #wynik-sekcja > h2 {
    display: none !important;
  }
  main { max-width: none; padding: 0; margin: 0; }
  .tylko-druk { display: block; }
  .karta, #wynik-sekcja {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
  }

  .druk-tytul { margin: 0 0 2mm; font-size: 20pt; color: #000; }
  .druk-nazwa { margin: 0 0 1mm; font-size: 15pt; font-weight: 700; color: #000; }
  .druk-nazwa:empty { display: none; }
  .druk-meta { margin: 0 0 5mm; color: #000; }
  #druk h2 { margin: 5mm 0 2mm; font-size: 12pt; color: #000; border-bottom: 1px solid #000; }
  .druk-lista { margin: 0; padding-left: 5mm; }
  .druk-tabela { width: 100%; border-collapse: collapse; font-size: 10pt; }
  .druk-tabela th, .druk-tabela td { border: 1px solid #000; padding: 1mm 2mm; text-align: left; color: #000; }
  .druk-tabela th { font-weight: 700; }
  .druk-tabela tr { break-inside: avoid; }
  .druk-podsumowanie { margin: 0 0 3mm; font-weight: 700; }

  .raport {
    margin: 0;
    padding: 2mm;
    border: 1px solid #000;
    border-radius: 0;
    background: #fff;
    color: #000;
    font-size: 8.5pt;
    white-space: pre-wrap;
    overflow: visible;
  }

  .plyty { display: block; }
  figure { margin: 0; }
  figure.plyta-pozioma { page: pozioma; }
  figure.plyta-pionowa { page: pionowa; }
  /* każda płyta zaczyna nową stronę; rysunek wypełnia stronę, ale zostawia miejsce na podpis */
  #plyty figure { break-before: page; break-inside: avoid; }
  figure img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  /* stała wysokość + object-fit: contain = zachowane proporcje, rysunek wypełnia stronę */
  figure.plyta-pozioma img { width: 100%; height: 172mm; object-fit: contain; }
  figure.plyta-pionowa img { width: 100%; height: 250mm; object-fit: contain; }
  figcaption { display: block; margin-top: 2mm; font-weight: 700; color: #000; }
}