/* Widok 08 — narzędzie 2: studio na ŻYWYM znaku strony. Układ (Jakub 04.10): kadr na pierwszym
   ekranie, znak mniejszy w polu na środku (.st-pole — pole toru znaku), wokół niego przyciski
   ustawień: lewy pas — budowa, barwy, od nowa; prawy — łuk, pył, blask, tempo. Przycisk wysuwa
   jedno okno w szkle przy dole kadru. Gesty znaku przechodzą przez kadr do sceny. */

.narzedzie--studio { pointer-events: none; padding-top: calc(var(--logo-wys) + var(--o-3)); gap: var(--o-6); }
.narzedzie--studio :is(a, button, input, label, .tafla, h1, h2, p, nav, output) { pointer-events: auto; }
.narzedzie--studio .st-scena, .narzedzie--studio .st-pole, .narzedzie--studio .st-podpowiedz { pointer-events: none; }

.st { display: grid; gap: var(--o-4); }
.st-glowa { gap: var(--o-1); }
.st-glowa .nz-tytul { font-size: var(--r-4); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--o-4); }
.st-glowa .nz-nazwa { font-size: var(--r-mini); }
@media (max-width: 699px) { .st-glowa .nz-zdanie { display: none; } .st-glowa .nz-okruszki { display: none; } }

.st-scena {
  position: relative;
  height: min(76svh, 48rem);
  min-height: 26rem;
  border-radius: var(--tafla-promien, var(--z-maly));
  box-shadow: inset 0 0 0 1px var(--linia);
}
@media (max-width: 699px) { .st-scena { height: calc(100svh - var(--logo-wys) - 6.5rem); min-height: 30rem; } }
/* pole znaku: między pasami przycisków, nad oknem wysuwanym */
.st-pole { position: absolute; inset: 10% 15% 26% 15%; }
@media (max-width: 699px) { .st-pole { inset: 14% 78px 34% 78px; } }

.st-pas { position: absolute; top: 50%; translate: 0 -55%; display: grid; gap: var(--o-2); pointer-events: none; }
.st-pas--lewy { left: var(--o-3); }
.st-pas--prawy { right: var(--o-3); }
.st-narz {
  pointer-events: auto;
  display: grid; justify-items: center; align-content: center; gap: 2px;
  width: 68px; min-height: 64px; padding: 8px 4px;
  border-radius: 20px;
  font-size: var(--r-mini); letter-spacing: .02em; line-height: 1.15; text-align: center;
}
.st-narz .ikona { width: 20px; height: 20px; }
.st-narz-nazwa { color: var(--tekst); }
.st-narz-wartosc { font-family: var(--kroj-mono); font-size: .625rem; color: var(--tekst-2); max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-narz[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; }
@media (max-width: 699px) { .st-narz { width: 60px; min-height: 58px; border-radius: 18px; } .st-pas { gap: 6px; } .st-pas--lewy { left: 8px; } .st-pas--prawy { right: 8px; } }

/* okno wysuwane — przy dole kadru, nad nim znak */
.st-wysuw {
  --tafla-szer: none;
  position: absolute; left: 50%; bottom: var(--o-4); translate: -50% 0;
  width: min(26rem, calc(100% - 2 * var(--o-4)));
  padding: var(--o-4) var(--o-5) var(--o-4);
  display: grid; gap: var(--o-2);
  animation: st-wysun .32s var(--e-lagodna);
}
.st-wysuw[hidden] { display: none; }
@keyframes st-wysun { from { opacity: 0; translate: -50% 12px; } }
@media (prefers-reduced-motion: reduce) { .st-wysuw { animation: none; } }
.st-okno { display: grid; gap: var(--o-2); }
.st-okno[hidden] { display: none; }
.st-okno > .nz-etykieta { margin: 0; color: var(--tekst); font-size: var(--r-0-5); letter-spacing: 0; }
.st-okno label.nz-etykieta { color: var(--tekst); font-size: var(--r-0-5); letter-spacing: 0; padding-right: 36px; }
.st-okno .nz-przelacz { width: 100%; }
.st-okno .nz-przelacz button { flex: 1 1 auto; justify-content: center; padding: 0 var(--o-3); }
.st-skala { display: flex; justify-content: space-between; margin: 0; font-size: var(--r-mini); color: var(--tafla-tekst-2, var(--tekst-2)); }
.st-zamknij {
  position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 34px; height: 34px;
  border: 0; border-radius: 50%; background: none; color: var(--tekst-2); cursor: pointer;
}
.st-zamknij:hover { color: var(--tekst); background: rgba(235, 233, 242, .08); }
.st-zamknij .ikona { width: 18px; height: 18px; }

/* barwy — próbki: kropka w barwie + nazwa */
.st-barwy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--o-3); }
@media (min-width: 520px) { .st-barwy { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.st-barwy button {
  display: flex; align-items: center; gap: var(--o-2); min-height: 36px; padding: 0 var(--o-2);
  border: 1px solid transparent; border-radius: var(--z-pigulka); background: none; cursor: pointer;
  color: var(--tafla-tekst-2, var(--tekst-2)); font-size: var(--r-0); text-align: left; white-space: nowrap;
}
.st-barwy button::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--p); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.st-barwy button:hover { color: var(--tekst); }
.st-barwy button[aria-pressed="true"] { color: var(--tekst); border-color: color-mix(in srgb, var(--akcent) 70%, transparent); background: rgba(235, 233, 242, .06); }

.st-podpowiedz {
  position: absolute; left: 50%; top: var(--o-3); translate: -50% 0; margin: 0;
  max-width: calc(100% - 2 * var(--o-4));
  padding: 5px 12px; border-radius: var(--z-pigulka);
  background: rgba(7, 9, 18, .5); color: var(--tekst-2); font-size: var(--r-mini); text-align: center;
  transition: opacity .6s var(--e-lagodna);
}
.st-podpowiedz--zniknij { opacity: 0; }
.st-podpowiedz-dotyk { display: none; }
@media (hover: none) { .st-podpowiedz-dotyk { display: inline; } .st-podpowiedz-mysz { display: none; } }