/* Widok 07 — Laboratorium. Odwaga 1: hero to jedno słowo w polu cząsteczek — rzeźba na cały kadr.
   Reszta cicha: zdanie, cztery wiersze z pigułkami szkła, wezwanie. Tylko układ; wartości z tokenów
   system.css. */

.laboratorium { pointer-events: none; }
.laboratorium :is(h1, h2, h3, p, a, li, .tafla) { pointer-events: auto; }
.laboratorium > section { position: relative; padding-inline: var(--margines); }

/* 1. HERO — słowo przy dolnej krawędzi, pole cząsteczek nad nim i wokół */
.lb-hero {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: end;
  padding-top: calc(var(--logo-wys) + var(--o-6));
  padding-bottom: clamp(var(--o-7), 9vh, var(--o-9));
}
.lb-tytul {
  font-size: clamp(3.25rem, 1rem + 9.6vw, 10.5rem);
  font-weight: var(--w-rzezba);
  line-height: .9;
  letter-spacing: -.045em;
  margin-left: -.05em;           /* optyczne wyrównanie „L" do marginesu */
}

/* 2. PO CO — zdanie po lewej, skupisko pyłu po prawej */
.lb-poco {
  min-height: 92vh;
  min-height: 92svh;
  display: grid;
  align-content: center;
}
.lb-zdanie {
  max-width: 21ch;
  margin: 0;
  font-size: var(--r-5);
  font-weight: var(--w-lekki);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--tekst);
  text-wrap: balance;
}
@media (min-width: 960px) { .lb-zdanie { max-width: 18ch; } }

/* 3. NARZĘDZIA — cztery wiersze bez tafli, rozdzielone włoskową linią. Szkło tylko na pigułce odnośnika;
   barwę narzędzia niesie klasa szklo--… na <li> (system.css → --sz-t): pigułka dziedziczy podkład,
   nazwa dostaje podkreślenie w tej samej barwie. */
.lb-narzedzia { padding-block: calc(var(--logo-wys) + var(--o-6)) var(--o-9); }
.lb-wnetrze { display: grid; gap: var(--o-6); max-width: 64rem; }
@media (min-width: 960px) { .lb-wnetrze { max-width: min(56rem, calc(100% - 26vw)); } }   /* prawy pas — sylwetka znaku z pyłu */
.lb-narzedzia h2 { font-size: var(--r-5); font-weight: var(--w-rzezba); }
.lb-lista { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--linia); }
.lb-pozycja {
  --sz-a: .34;                                 /* pigułka z napisem: barwa czytelna, nie tylko zabarwienie */
  --lb-akcent: color-mix(in srgb, rgb(var(--sz-t, 142 146 168)) 62%, #fff);
  display: grid;
  align-items: center;
  gap: var(--o-5) var(--o-7);
  padding-block: clamp(var(--o-6), 4vw, var(--o-7));
  border-top: 1px solid var(--linia);
}
@media (min-width: 700px) { .lb-pozycja { grid-template-columns: minmax(0, 1fr) auto; } }
.lb-tekst { display: grid; gap: var(--o-3); }
.lb-znacznik { margin: 0; color: var(--tekst-2); }
.lb-nazwa {
  position: relative;
  width: fit-content;
  max-width: 100%;
  padding-bottom: .34em;
  font-size: var(--r-4);
  font-weight: var(--w-naglowek);
  letter-spacing: -.022em;
}
.lb-nazwa::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 2.6rem; height: 2px;
  border-radius: 2px;
  background: var(--lb-akcent);
  transition: width .55s var(--e-lagodna);
}
@media (hover: hover) { .lb-pozycja:hover .lb-nazwa::after { width: 100%; } }
@media (hover: none) { .lb-nazwa::after { width: 100%; } }   /* dotyk: nie ma najechania — podkreślenie od razu na całą nazwę */
.lb-opis { max-width: 52ch; margin: 0; font-size: var(--r-lead); color: var(--tekst-2); }
.lb-otworz { justify-self: start; white-space: nowrap; }
@media (min-width: 700px) { .lb-otworz { justify-self: end; } }
.lb-otworz .ikona { width: 18px; height: 18px; }
/* hover przycisku z systemu odbiera barwę — tu zostaje, tylko gęstnieje */
.lb-otworz:hover { --szklo-podklad: rgb(var(--sz-t, 40 38 70) / .48); }

/* 4. DOMKNIĘCIE — wezwanie przy dole, nad nim sylwetka znaku z pyłu (poza w laboratorium.php) */
.lb-domkniecie {
  min-height: 92vh;
  min-height: 92svh;
  display: grid;
  align-content: end;
  justify-items: center;
  gap: var(--o-4);
  padding-block: var(--o-9) var(--o-8);
  text-align: center;
}
.lb-domkniecie h2 { font-size: var(--r-5); font-weight: var(--w-rzezba); }
.lb-domkniecie p { max-width: 44ch; margin: 0; color: var(--tekst-2); }
.lb-akcje { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--o-3) var(--o-5); margin-top: var(--o-3); }
.lb-akcje .odnosnik-cichy { font-size: var(--r-0-5); color: var(--tekst-2); }

/* ZATRZASK (laboratorium.js) — warstwy przejścia; bez skryptu stoją zwykle */
.lb-poco, .lb-wnetrze { transform-origin: 50% 50%; }

/* ==========================================================================
   PODSTRONA NARZĘDZIA (widok 08) — wspólny wzór czterech narzędzi. Cicha: bez znaku, narzędzie
   zajmuje większość kadru, opis jest podpisem pod nim.
   ========================================================================== */
.narzedzie {
  display: grid;
  gap: var(--o-7);
  width: 100%;
  max-width: 88rem;
  margin-inline: auto;
  padding: calc(var(--logo-wys) + var(--o-6)) var(--margines) var(--o-8);
}
.nz-glowa { display: grid; gap: var(--o-3); max-width: 50rem; }
.nz-okruszki ol { display: flex; flex-wrap: wrap; gap: 0 var(--o-2); margin: 0 0 var(--o-2); padding: 0; list-style: none; font-size: var(--r-0); color: var(--tekst-2); }
.nz-okruszki li + li::before { content: "›"; margin-right: var(--o-2); color: var(--tekst-3); }
.nz-okruszki a { display: inline-block; padding-block: 3px; margin-block: -3px; color: inherit; text-decoration: none; }   /* cel ≥ 24 px bez zmiany układu */
.nz-okruszki a:hover { color: var(--tekst); }
.nz-tytul { font-size: var(--r-5); font-weight: var(--w-rzezba); }
.nz-nazwa { margin: 0; color: var(--tekst-2); }
.nz-zdanie { max-width: 52ch; margin: 0; color: var(--tekst-2); font-size: var(--r-lead); }

.nz-opis { display: grid; gap: var(--o-3); max-width: 46rem; color: var(--tekst-2); }
.nz-opis h2 { font-size: var(--r-3); font-weight: var(--w-srodek); color: var(--tekst); }
.nz-opis p { margin: 0; }

.nz-dalej {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-4) var(--o-6);
  padding-top: var(--o-6);
  border-top: 1px solid var(--linia);
}
.nz-powrot { display: inline-flex; align-items: center; gap: var(--o-1); color: var(--tekst-2); text-decoration: none; }
.nz-powrot:hover { color: var(--tekst); }
.nz-wezwanie { margin: 0 0 0 auto; color: var(--tekst-2); font-size: var(--r-0-5); }
@media (max-width: 699px) { .nz-wezwanie { margin-left: 0; flex-basis: 100%; } }

/* panel narzędzia: wspólne elementy sterowania (etykieta nad polem, grupa przełączników) */
.nz-panel { display: grid; gap: var(--o-5); align-content: start; }
.nz-pole { display: grid; gap: var(--o-2); }
.nz-etykieta { font-size: var(--r-0); color: var(--tafla-tekst-2, var(--tekst-2)); letter-spacing: .02em; }
.nz-wejscie {
  width: 100%; min-height: 46px; padding: 0 var(--o-4);
  border: 1px solid var(--tafla-pole); border-radius: var(--z-maly);
  background: rgba(7, 9, 18, .45); color: var(--tekst);
  font-size: var(--r-1);
}
.nz-wejscie:focus-visible { outline-offset: 1px; border-color: transparent; }
.nz-przelacz { display: flex; flex-wrap: wrap; gap: var(--o-1); padding: 4px; border: 1px solid var(--tafla-pole); border-radius: var(--z-pigulka); width: fit-content; }
.nz-przelacz button {
  min-height: 38px; padding: 0 var(--o-4);
  border: 0; border-radius: var(--z-pigulka);
  background: none; color: var(--tafla-tekst-2, var(--tekst-2));
  font-size: var(--r-0-5); cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--o-2);
  transition: background-color .25s var(--e-lagodna), color .25s var(--e-lagodna);
}
.nz-przelacz button:hover { color: var(--tekst); }
.nz-przelacz button[aria-pressed="true"] { background: rgba(235, 233, 242, .12); color: var(--tekst); }
.nz-przelacz .ikona { width: 18px; height: 18px; }
.nz-suwak { width: 100%; accent-color: var(--akcja); }
.nz-wartosc { font-family: var(--kroj-mono); font-size: var(--r-0); color: var(--tekst); font-variant-numeric: tabular-nums; }
.nz-komunikat { min-height: 1.6em; margin: 0; font-size: var(--r-0-5); color: var(--tafla-tekst-2, var(--tekst-2)); }
.nz-komunikat[data-rodzaj="blad"] { color: var(--akcent); }
.nz-komunikat strong { color: var(--tekst); font-weight: var(--w-mocny); }