/* ===========================================================================
   ARKUSZ H — warstwa „jeszcze bardziej kreślarska" (Rafał 2026-10-29)

   Dokłada do skóry arkusza to, co odróżnia prawdziwy rysunek techniczny
   od ładnego tła w kratkę: podziałkę brzegową arkusza, osie konstrukcyjne,
   rzędne, spadki, linię przekroju, koła detali, legendę szrafur i tabelę
   zmian. Do tego więcej odręcznego pisma i ołówek, który dorysowuje kreskę
   pod każdym nagłówkiem.

   Wczytywana PO arkusz.css i arkusz-podstrony.css.
   =========================================================================== */

/* --- podziałka brzegowa arkusza ---------------------------------------- */
/* Na arkuszu A1 pola oznacza się literami z boku i cyframi u góry — stąd
   „pole C3". Rysujemy to samo po czterech bokach ramki.
   Składa je js/arkusz-h.js, żeby nie powtarzać markupu na 15 stronach. */

/* --- ramka samodzielna --------------------------------------------------
   Sklep ma wlasna palete w pliku i nie wczytuje arkusz.css, wiec potrzebne
   zmienne i pelna definicja ramki musza byc tutaj. Na pozostalych stronach
   to te same wartosci co w arkusz.css, wiec nic sie nie zmienia. */
:root {
  --papier: #F5F3EE;
  --papier-jasny: #FBFAF7;
  --tusz: #2A2A28;
  --tusz-slaby: rgba(42, 42, 40, 0.45);
  --olowek: #1F3A6E;
  --ramka: 14px;
  /* Siatka: sklep nie wczytuje arkusz.css, a uzywa tych zmiennych.
     Bez nich cala deklaracja `background` staje sie niewazna i tlo znika. */
  --siatka-duza: rgba(31, 58, 110, .14);
  --siatka-mala: rgba(31, 58, 110, .055);
}
.ark-ramka {
  position: fixed;
  inset: var(--ramka);
  border: 2px solid var(--tusz);
  pointer-events: none;
}
.ark-ramka::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid var(--tusz-slaby);
}
@media (max-width: 900px) { .ark-ramka { display: none; } }

/* Ramka arkusza szla NAD paskiem menu i jej gorna kreska przekreslala
   pozycje menu. Schodzi pod pasek (pasek ma z-index 50), a pasek dostaje
   pelne krycie, zeby kreska pod nim nie przeswitywala. (Rafal 29.10) */
.ark-ramka { border-width: 2px; z-index: 40; }
.ark-pasek { background: var(--papier); backdrop-filter: none; -webkit-backdrop-filter: none; }
.ark-ramka::after { inset: 18px; }          /* szersza listwa na podziałkę */

.h-podzialka-brzeg {
  position: absolute;
  display: flex;
  font: 600 8px/1 Barlow, Arial, sans-serif;
  color: var(--tusz-slaby);
  letter-spacing: 0;
}
.h-podzialka-brzeg span {
  flex: 1 1 0;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--tusz-slaby);
}
.h-podzialka-brzeg span:last-child { border-right: 0; }
.h-brzeg-gora   { top: 0; left: 18px; right: 18px; height: 18px; }
.h-brzeg-dol    { bottom: 0; left: 18px; right: 18px; height: 18px; }
.h-brzeg-lewo,
.h-brzeg-prawo  { top: 18px; bottom: 18px; width: 18px; flex-direction: column; }
.h-brzeg-lewo   { left: 0; }
.h-brzeg-prawo  { right: 0; }
.h-brzeg-lewo span, .h-brzeg-prawo span { border-right: 0; border-bottom: 1px solid var(--tusz-slaby); }
.h-brzeg-lewo span:last-child, .h-brzeg-prawo span:last-child { border-bottom: 0; }

/* --- nadtytuł jako przywieszka z odnośnikiem ---------------------------- */

body.arkusz .ark-nadtytul,
body.arkusz .p-nad {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
body.arkusz .ark-nadtytul::before,
body.arkusz .p-nad::before {
  content: "";
  width: 26px;
  height: 0;
  border-top: 1px solid var(--olowek);
  flex: none;
}
body.arkusz .ark-nadtytul::after,
body.arkusz .p-nad::after {
  content: "";
  width: 5px; height: 5px;
  border: 1px solid var(--olowek);
  transform: rotate(45deg);
  flex: none;
}

/* --- kreska dorysowywana ołówkiem pod nagłówkiem ------------------------ */
/* Stan spoczynku to kreska PEŁNA — kto ma wyłączone animacje albo wyłączony
   JavaScript, widzi gotowy rysunek. Ołówek tylko ją „dociąga". */

/* Pasek i ołówek to dwa osobne kawałki — gdyby ołówek siedział w pasku,
   animacja szerokości rozciągałaby go razem z kreską. */
.h-kreska { position: relative; display: block; width: 180px; max-width: 60%; height: 3px; margin: 16px 0; }
.h-kreska-linia { position: absolute; inset: 0; background: var(--zolty); }
.h-kreska-olowek {
  position: absolute;
  left: 0; top: 50%;
  width: 72px; height: 72px;             /* x3 (Rafal 30.10) */
  margin-left: -11.8px;                  /* czubek nowego rysunku */
  margin-top: -60.2px;
  opacity: 0;
  pointer-events: none;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='rotate(-45 20 20)'%3E%3Cg stroke='%232A2A28' stroke-width='.9' stroke-linejoin='round'%3E%3Cpolygon points='1,20 6.4,17.9 6.4,22.1' fill='%232A2A28'/%3E%3Cpolygon points='6.4,17.9 11,17.1 11,22.9 6.4,22.1' fill='%23E8D7A8'/%3E%3Crect x='11' y='17.1' width='21.5' height='5.8' fill='%23F4C20D'/%3E%3Crect x='32.5' y='16.9' width='2.8' height='6.2' fill='%23C9C3B4'/%3E%3Crect x='35.3' y='17.4' width='3.2' height='5.2' fill='%23D98B7A'/%3E%3C/g%3E%3Cpath d='M11 18.9 H32.5 M11 21.1 H32.5' stroke='rgba(42,42,40,.3)' stroke-width='.5'/%3E%3C/g%3E%3C/svg%3E");
}
.h-rysuje .h-kreska-linia { animation: h-dociagnij 2s cubic-bezier(.4, 0, .5, 1) both; }
.h-rysuje .h-kreska-olowek { animation: h-jedzie 2s cubic-bezier(.4, 0, .5, 1) both; }
@keyframes h-dociagnij { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes h-jedzie {          /* po CALEJ kresce, nie tylko po jej koncu */
  0%   { opacity: 1; left: 0; }
  85%  { opacity: 1; left: 100%; }
  100% { opacity: 0; left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .h-rysuje .h-kreska-linia, .h-rysuje .h-kreska-olowek { animation: none; }
  .h-kreska-olowek { display: none; }
}

/* Na podstronach żółtą kreskę rysowało ::after nagłówka — zabieramy je,
   bo teraz to osobny element, który ołówek potrafi dociągnąć. */
body.arkusz .p-hero .p-h1::after { content: none; }

/* --- rzędne, spadki, przekroje, detale ---------------------------------- */

.h-rzedna {                       /* ±0,00 — trójkącik z poziomą kreską */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 11px Barlow, Arial, sans-serif;
  color: var(--tusz);
  font-variant-numeric: tabular-nums;
}
.h-rzedna::before {
  content: "";
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 9px solid var(--tusz);
}

.h-spadek {                       /* strzałka spadku: i = 2,0% */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 11px Barlow, Arial, sans-serif;
  color: var(--tusz);
}
.h-spadek::after {
  content: "";
  width: 54px; height: 0;
  border-top: 1px solid var(--tusz);
  position: relative;
}
.h-spadek-grot {
  width: 0; height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 8px solid var(--tusz);
}

.h-przekroj-znak {                /* A—A: gruba kreska z grotem i literą */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 13px "Big Shoulders Display", "Arial Narrow", Impact, Arial, sans-serif;
  color: var(--tusz);
}
.h-przekroj-znak i {
  display: block;
  width: 22px; height: 0;
  border-top: 3px solid var(--tusz);
}

.h-detal {                        /* koło detalu z numerem i odnośnikiem */
  width: 40px; height: 40px;
  border: 1px dashed var(--tusz);
  border-radius: 50%;
  display: grid; place-items: center;
  font: 700 14px Barlow, Arial, sans-serif;
  background: var(--papier-p);
}

/* --- legenda szrafur ---------------------------------------------------- */

.h-legenda { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 18px; }
.h-legenda div { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--tekst-2); }
.h-legenda i {
  width: 38px; height: 20px;
  border: 1px solid var(--tusz);
  flex: none;
  display: block;
}

/* --- tabela zmian (jak na arkuszu) -------------------------------------- */

.h-rewizje { border: 1px solid var(--tusz); font-size: 11px; }
.h-rewizje div { display: flex; border-bottom: 1px solid var(--tusz-slaby); }
.h-rewizje div:last-child { border-bottom: 0; }
.h-rewizje b, .h-rewizje span {
  padding: 5px 8px;
  font-weight: 400;
  color: var(--tekst-2);
  border-right: 1px solid var(--tusz-slaby);
}
.h-rewizje b { flex: 0 0 34px; font-weight: 700; color: var(--czarny); text-align: center; }
.h-rewizje span:last-child { flex: 1; border-right: 0; }
.h-rewizje .h-naglowek b,
.h-rewizje .h-naglowek span {
  font: 500 9px Barlow, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--szary);
}

/* --- odręczne pismo: więcej i wyraźniej --------------------------------- */

body.arkusz .ark-dopisek { font-size: clamp(17px, 2.1vw, 22px); }

.h-pisane {                       /* liczba napisana ręcznie na wymiarze */
  font: 600 clamp(16px, 2vw, 20px)/1 Caveat, "Comic Sans MS", cursive;
  color: var(--olowek);
  font-variant-numeric: normal;
}

.h-poprawka {                     /* skreślone i dopisane długopisem */
  color: var(--szary);
  text-decoration: line-through;
  text-decoration-color: var(--olowek);
  text-decoration-thickness: 2px;
}
.h-poprawka + .h-pisane { margin-left: 8px; }

.h-strzalka-recznie {             /* odręczna strzałka przy dopisku */
  display: inline-block;
  width: 34px; height: 12px;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12'%3E%3Cpath d='M1 8C8 3 18 2 31 5' fill='none' stroke='%231F3A6E' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M25 2l7 3-6 3.5' fill='none' stroke='%231F3A6E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  vertical-align: -2px;
}

/* --- kursor: ołówek także nad tym, co klikalne -------------------------- */
/* Rafał chciał więcej ołówka. Nad przyciskiem i linkiem ołówek ma żółty
   czubek — dalej widać, że to klikalne, a kursor zostaje ołówkiem.
   Pola tekstowe zostają belką, bo tam się pisze, a nie rysuje. */

@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  body.arkusz a, body.arkusz button, body.arkusz [role="button"],
  body.arkusz label, body.arkusz summary, body.arkusz .kafel, body.arkusz .ksz,
  body.arkusz .prod, body.arkusz .p-filtr, body.arkusz .p-karta {
    cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZyB0cmFuc2Zvcm09InJvdGF0ZSgtNDUgMTIgMTIpIj48ZyBzdHJva2U9IiMyQTJBMjgiIHN0cm9rZS13aWR0aD0iMS4xIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWdvbiBwb2ludHM9IjIsMTIgNyw5LjYgNywxNC40IiBmaWxsPSIjRjRDMjBEIi8+PHBvbHlnb24gcG9pbnRzPSI3LDkuNiAxMSw4LjkgMTEsMTUuMSA3LDE0LjQiIGZpbGw9IiNFOEQ3QTgiLz48cmVjdCB4PSIxMSIgeT0iOC45IiB3aWR0aD0iNy42IiBoZWlnaHQ9IjYuMiIgZmlsbD0iI0Y0QzIwRCIvPjxyZWN0IHg9IjE4LjYiIHk9IjguNyIgd2lkdGg9IjEuNiIgaGVpZ2h0PSI2LjYiIGZpbGw9IiNDOUMzQjQiLz48cmVjdCB4PSIyMC4yIiB5PSI5LjEiIHdpZHRoPSIxLjYiIGhlaWdodD0iNS44IiBmaWxsPSIjRDk4QjdBIi8+PC9nPjwvZz48L3N2Zz4=") 2 22, pointer;
  }
  body.arkusz input, body.arkusz textarea, body.arkusz select { cursor: auto; }
  body.arkusz input[type="text"], body.arkusz input[type="number"],
  body.arkusz input[type="email"], body.arkusz input[type="tel"],
  body.arkusz textarea { cursor: text; }
}

/* --- telefon ------------------------------------------------------------ */

@media (max-width: 900px) {
  .h-podzialka-brzeg { display: none; }     /* ramka i tak znika */
  .h-legenda { gap: 8px 16px; }
  .h-legenda i { width: 30px; height: 17px; }
}


/* --- kolory wpisane w atrybut style= ------------------------------------
   Stary, ciemny motyw zostawil je w kilkunastu miejscach. Atrybut bije
   kazdy arkusz stylow, wiec tylko !important go zdejmie. Zolty NAPIS na
   papierze jest nieczytelny — idzie na dlugopis; na asfalcie wraca na zolto. */

body.arkusz [style*="color: #F4C20D"], body.arkusz [style*="color:#F4C20D"] { color: var(--olowek) !important; }
body.arkusz [style*="color: #ECEAE4"], body.arkusz [style*="color:#ECEAE4"] { color: var(--tusz) !important; }
body.arkusz [style*="color: #A9A69F"], body.arkusz [style*="color:#A9A69F"],
body.arkusz [style*="color: #9A968C"], body.arkusz [style*="color:#9A968C"] { color: var(--szary) !important; }

body.arkusz .h-nawierzchnia [style*="color: #F4C20D"], body.arkusz .h-nawierzchnia [style*="color:#F4C20D"] { color: var(--zolty) !important; }
body.arkusz .h-nawierzchnia [style*="color: #ECEAE4"], body.arkusz .h-nawierzchnia [style*="color:#ECEAE4"] { color: var(--farba) !important; }


/* --- tytul pisany olowkiem ---------------------------------------------
   Wiersze tytulu odslaniaja sie po kolei, a olowek jedzie przed nimi.
   Bez JavaScriptu nic sie nie dzieje i tytul jest po prostu widoczny. */

/* Wiersz na czas pisania nie moze sie przelamac — grupa slow pochodzi
   z tego, jak przegladarka zlamala tytul, wiec ma zostac w jednej linii. */
.h-wiersz { display: block; white-space: nowrap; }
.h-slowo { white-space: nowrap; }

/* Tytul jest schowany tylko wtedy, gdy JavaScript zdazyl zglosic, ze go
   napisze. Bez skryptu klasy nie ma i tytul widac od razu. visibility,
   nie display — miejsce zostaje zajete, wiec strona nie podskakuje. */
html.pisze-tytul h1.p-h1,
html.pisze-tytul .s-intro h1.h { visibility: hidden; }

.h-pioro {
  position: absolute;   /* nie fixed: ma jechac z trescia, gdy ktos przewinie */
  left: 0; top: 0;
  width: 90px; height: 90px;             /* x3 (Rafal 30.10) */
  z-index: 45;
  opacity: 0;
  pointer-events: none;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='rotate(-45 20 20)'%3E%3Cg stroke='%232A2A28' stroke-width='.9' stroke-linejoin='round'%3E%3Cpolygon points='1,20 6.4,17.9 6.4,22.1' fill='%232A2A28'/%3E%3Cpolygon points='6.4,17.9 11,17.1 11,22.9 6.4,22.1' fill='%23E8D7A8'/%3E%3Crect x='11' y='17.1' width='21.5' height='5.8' fill='%23F4C20D'/%3E%3Crect x='32.5' y='16.9' width='2.8' height='6.2' fill='%23C9C3B4'/%3E%3Crect x='35.3' y='17.4' width='3.2' height='5.2' fill='%23D98B7A'/%3E%3C/g%3E%3Cpath d='M11 18.9 H32.5 M11 21.1 H32.5' stroke='rgba(42,42,40,.3)' stroke-width='.5'/%3E%3C/g%3E%3C/svg%3E");
}


/* --- olowek nie rozciaga strony ----------------------------------------
   Ozdoba nie moze robic poziomego suwaka. Ucinamy tylko w bok i tylko tam,
   gdzie rysuja sie kreski; `clip` zamiast `hidden`, zeby nie zrobic z tych
   blokow kontenerow przewijania (przyklejony pasek menu musi dzialac). */
body.arkusz .hero,
body.arkusz .ark-sekcja,
body.arkusz .p-sekcja,
body.arkusz .p-hero { overflow-x: clip; }