/* Laboratorium, narzędzie 4: generator kodów QR. Wartości z tokenów system.css; tu tylko układ.
   KOMPUTER (od 960 px): dwie kolumny, po lewej panel ustawień w grupach (details), po prawej przyklejony podgląd z przyciskami pobrania.
   TABLET (700 do 959 px): podgląd nad panelem, grupy rozwijane po kolei.
   TELEFON (< 700 px): podgląd na górze, panel przyklejony do dołu okna jako pas z przyciskami grup (jak w konwerterze grafiki
   i w Studio). Wybrana grupa wysuwa się nad pasem, jedna naraz, a kod zmniejsza się tak, żeby zostać w kadrze. */

.qr { display: grid; gap: var(--o-5); max-width: 76rem; scroll-margin-top: calc(var(--logo-wys) + var(--o-3)); }
.qr-prawa { display: grid; gap: var(--o-4); order: -1; }
@media (min-width: 960px) {
  .qr { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); align-items: start; }
  .qr-prawa { order: 0; position: sticky; top: calc(var(--logo-wys) + var(--o-4)); }
}

/* PANEL USTAWIEŃ */
.qr-panel { --tafla-szer: none; display: grid; gap: 0; padding-block: var(--o-2); }
.qr-grupa { border-top: 1px solid var(--linia); padding-block: var(--o-2); }
.qr-grupa:first-of-type { border-top: 0; }
.qr-grupa > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--o-3);
  min-height: 48px; cursor: pointer; list-style: none;
  font-size: var(--r-2); font-weight: var(--w-srodek); color: var(--tekst);
}
.qr-grupa > summary::-webkit-details-marker { display: none; }
.qr-grupa > summary .ikona { width: 22px; height: 22px; color: var(--tekst-2); transition: rotate .3s var(--e-lagodna); }
.qr-grupa[open] > summary .ikona { rotate: 180deg; }
.qr-zawartosc { display: grid; gap: var(--o-4); padding-block: var(--o-2) var(--o-3); }
.qr-pola { display: grid; gap: var(--o-3); }
@media (min-width: 560px) { .qr-pola--dwie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
textarea.nz-wejscie { min-height: 7rem; padding-block: var(--o-3); line-height: 1.5; resize: vertical; }

.qr-zalezne { display: grid; gap: var(--o-4); padding-left: var(--o-4); border-left: 1px solid var(--linia); }
.qr-zalezne[hidden], .qr-grupa [hidden] { display: none; }
/* własna paleta kolorów: kwadrat nasycenia i jasności, suwak odcienia, kod koloru */
.qr-probka { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(235, 233, 242, .55); }
.qr-paleta { display: grid; gap: var(--o-4); max-width: 24rem; }
.qr-nasycenie {
  position: relative; height: 11rem; border-radius: var(--z-maly); cursor: crosshair; touch-action: none;
  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, var(--odcien, #f00));
}
.qr-nasycenie:focus-visible { outline: 2px solid var(--porcelana); outline-offset: 2px; }
.qr-uchwyt {
  position: absolute; left: 0; top: 100%; width: 22px; height: 22px; translate: -50% -50%; pointer-events: none;
  border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .4);
}
.qr-odcien { -webkit-appearance: none; appearance: none; width: 100%; height: 16px; margin: 0; border-radius: 999px; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.qr-odcien:focus-visible { outline: 2px solid var(--porcelana); outline-offset: 3px; }
.qr-odcien::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid rgba(0, 0, 0, .35); box-shadow: 0 1px 4px rgba(0, 0, 0, .4); cursor: pointer; }
.qr-odcien::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid rgba(0, 0, 0, .35); box-shadow: 0 1px 4px rgba(0, 0, 0, .4); cursor: pointer; }
.qr-hex { max-width: 9rem; font-family: var(--kroj-mono); text-transform: lowercase; }
.qr-mm { max-width: 10rem; font-variant-numeric: tabular-nums; }
.qr-opcja { display: flex; align-items: center; gap: var(--o-3); min-height: 40px; cursor: pointer; font-size: var(--r-0-5); color: var(--tafla-tekst-2, var(--tekst-2)); }
.qr-opcja input { width: 20px; height: 20px; flex: none; accent-color: var(--akcja); }
.qr-opcja:hover { color: var(--tekst); }

.qr-logo-wiersz { display: flex; flex-wrap: wrap; gap: var(--o-3); align-items: center; }
.qr-logo-dodaj { gap: var(--o-2); cursor: pointer; }
.qr-logo-dodaj .ikona { width: 18px; height: 18px; }
.qr-logo-dodaj:focus-within { outline: 2px solid var(--porcelana); outline-offset: 2px; }
.qr-podpowiedz { margin: 0; font-size: var(--r-0); color: var(--tafla-tekst-2, var(--tekst-2)); max-width: 46ch; }
.qr-podpowiedz:empty { display: none; }
.qr-podpowiedz[data-rodzaj="blad"] { color: var(--akcent); }

/* PODGLĄD */
.qr-podglad { --tafla-szer: none; display: grid; gap: var(--o-3); }
.qr-plotno {
  position: relative; display: grid; place-items: center;
  width: min(100%, 15rem); aspect-ratio: 1; margin-inline: auto; overflow: hidden;
  border-radius: var(--z-maly);
  background: conic-gradient(rgba(150, 150, 170, .35) 25%, rgba(255, 255, 255, .12) 0 50%, rgba(150, 150, 170, .35) 0 75%, rgba(255, 255, 255, .12) 0) 0 0 / 16px 16px;
  transition: width .28s var(--e-lagodna);
}
@media (min-width: 960px) { .qr-plotno { width: min(100%, 44vh); } }
.qr-plotno svg { display: block; width: 100%; height: 100%; }
.qr-pusto { margin: 0; padding: var(--o-5); text-align: center; color: var(--tafla-tekst-2, var(--tekst-2)); font-size: var(--r-0-5); }
.qr-info { margin: 0; text-align: center; font-size: var(--r-0); color: var(--tafla-tekst-2, var(--tekst-2)); min-height: 1.4em; }
.qr-podglad .nz-komunikat { min-height: 1.4em; text-align: center; font-size: var(--r-0); }
.qr-podglad .nz-komunikat:empty { display: none; }
.qr-akcje { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--o-3); }
.qr-akcje .przycisk { gap: var(--o-2); }
.qr-akcje .ikona { width: 18px; height: 18px; }
.qr-akcje .przycisk:disabled { opacity: .45; pointer-events: none; }
.qr-akcje [hidden] { display: none; }

/* PAS PRZYCISKÓW GRUP: tylko telefon */
.qr-pasek { display: none; }
@media (max-width: 699px) {
  .qr { display: flex; flex-direction: column; align-items: stretch; }   /* sticky działa w kontenerze flex, nie w komórce siatki */
  .qr-panel {
    position: sticky; z-index: 6;
    bottom: calc(var(--o-3) + env(safe-area-inset-bottom, 0px));
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--o-2);
    padding: var(--o-3);
  }
  /* pas bez filtra tła (przyklejone szkło nad przewijaną treścią malowałoby się co klatkę): tło jak poziom „lekkie" */
  html[data-szklo] .qr-panel.tafla { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: var(--szklo-lekkie); }
  .qr-pasek { display: contents; }
  .qr-chip {
    display: grid; place-items: center; min-height: 52px; padding: 6px 2px; border-radius: 16px;
    font-size: var(--r-mini); line-height: 1.15; text-align: center; color: var(--tekst);
  }
  .qr-chip[aria-expanded="true"] { --szklo-rozjasn: var(--szklo-rozjasn-hover); outline: 1.5px solid color-mix(in srgb, var(--akcent) 75%, transparent); outline-offset: -1.5px; }

  /* okno wysuwane: jedna grupa naraz, nad pasem; kod w podglądzie zmniejsza się, żeby zostać w kadrze */
  .qr-grupa {
    display: none; grid-column: 1 / -1; order: -2;
    padding: 0 0 var(--o-3); border: 0; border-bottom: 1px solid var(--tafla-linia, var(--linia));
    max-height: 38svh; overflow-y: auto; overscroll-behavior: contain;
  }
  .qr-grupa > summary { display: none; }
  .qr-zawartosc { padding-block: var(--o-1) 0; gap: var(--o-3); }
  .qr[data-otwarte="tresc"] [data-qr-okno="tresc"],
  .qr[data-otwarte="ksztalt"] [data-qr-okno="ksztalt"],
  .qr[data-otwarte="kolory"] [data-qr-okno="kolory"],
  .qr[data-otwarte="logo"] [data-qr-okno="logo"],
  .qr[data-otwarte="korekcja"] [data-qr-okno="korekcja"],
  .qr[data-otwarte="eksport"] [data-qr-okno="eksport"] { display: block; animation: qr-wysun .28s var(--e-lagodna); }
  @keyframes qr-wysun { from { opacity: 0; translate: 0 10px; } }
  .qr[data-otwarte] .qr-plotno { width: min(100%, 22svh); }
  .qr-panel .nz-komunikat { grid-column: 1 / -1; order: -3; }
}
@media (max-width: 699px) and (prefers-reduced-motion: reduce) { .qr[data-otwarte] .qr-grupa { animation: none; } .qr-plotno { transition: none; } }