/* Widok 08 — narzędzie 1: podgląd strony w obudowie. Panel w szkle nad sceną; obudowa telefonu
   i laptopa narysowana w CSS, ekran ma prawdziwą szerokość urządzenia (--pg-w × --pg-h, CSS px),
   całość skalowana do kadru (--pg-s, podglad-strony.js). Narzędzie zajmuje większość kadru. */

.pg { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--o-6); }   /* minmax(0,…): obudowa ma szerokość urządzenia (transform jej nie zmniejsza w układzie) — bez tego tafla wychodzi poza ekran telefonu */
.pg-panel { --tafla-szer: none; display: grid; gap: var(--o-5); }
@media (min-width: 1100px) { .pg-panel { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; } .pg-panel .nz-komunikat { grid-column: 1 / -1; } }
.pg-adres { display: grid; gap: var(--o-2); }
.pg-adres-wiersz { display: flex; gap: var(--o-2); }
.pg-adres-wiersz .nz-wejscie { flex: 1; min-width: 0; }
.pg-adres-wiersz .przycisk { flex: none; }
@media (max-width: 519px) { .pg-adres-wiersz { flex-direction: column; } .pg-adres-wiersz .przycisk { align-self: start; } }
.pg-przyklady { display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-1) var(--o-3); margin: var(--o-1) 0 0; font-size: var(--r-0); color: var(--tafla-tekst-2, var(--tekst-2)); }
.pg-przyklad {
  padding: 6px 0; border: 0; background: none; cursor: pointer;
  color: var(--tekst); font-size: var(--r-0);
  text-decoration: underline 1px color-mix(in srgb, var(--czerwien) 80%, transparent); text-underline-offset: .3em;
}
.pg-przyklad:hover { text-decoration-color: var(--akcent); }

.pg-sterowanie { display: flex; flex-wrap: wrap; align-items: end; gap: var(--o-4) var(--o-5); }
.pg-szerokosc { flex: 1 1 12rem; min-width: 10rem; }
.pg-obroc, .pg-nowa { min-height: 42px; padding: 0 var(--o-4); gap: var(--o-2); font-size: var(--r-0-5); }
.pg-obroc[hidden], .pg-nowa[hidden] { display: none; }
.pg-obroc .ikona, .pg-nowa .ikona { width: 18px; height: 18px; }
.pg-obroc[aria-pressed="true"] .ikona { transform: rotate(-90deg); }
.pg-obroc .ikona { transition: transform .45s var(--e-sprezyna); }

/* — scena i obudowa ------------------------------------------------------- */
.pg-scena { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: start; min-height: 12rem; overflow: clip; overflow-clip-margin: 60px; }
.pg-urzadzenie {
  --pg-w: 390px; --pg-h: 844px; --pg-s: .6;
  --pg-rama: 14px;
  position: relative;
  transform: scale(var(--pg-s));
  transform-origin: 50% 0;
  transition: transform .5s var(--e-lagodna);
}
.pg-ekran {
  position: relative; overflow: hidden;
  width: var(--pg-w); height: var(--pg-h);
  background: var(--noc-2);
}
.pg-ramka, .pg-kadr { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.pg-kadr[hidden] { display: none; }
.pg-kadr { object-fit: cover; object-position: 50% 0; background: var(--noc-2); transition: transform .42s var(--e-wyj), opacity .42s var(--e-wyj); }
.pg-kadr--zblizenie { transform: scale(1.06); opacity: .25; }
.pg-uruchom { position: absolute; left: 50%; bottom: 8%; translate: -50% 0; gap: var(--o-2); min-height: 72px; padding: 0 36px; font-size: 1.6rem; }
.pg-uruchom .ikona { width: 1.2em; height: 1.2em; }
[data-urzadzenie="laptop"] .pg-uruchom { min-height: 96px; padding: 0 52px; font-size: 2.2rem; }
.pg-uruchom[hidden] { display: none; }
.pg-zaslona {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 12%;
  background: var(--noc-2); color: var(--tekst-2); text-align: center; font-size: 1.35rem; line-height: 1.5;
}
.pg-zaslona[hidden] { display: none; }
.pg-zaslona p { margin: 0; max-width: 30ch; }
.pg-zaslona strong { display: block; margin-bottom: .4em; color: var(--tekst); font-weight: var(--w-mocny); }

/* telefon: korpus z ramką, wyspa, przyciski boczne */
[data-urzadzenie="telefon"] .pg-urzadzenie {
  padding: var(--pg-rama);
  border-radius: 58px;
  background: linear-gradient(145deg, #2b2a36, #121219 46%, #26252f);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), inset 0 0 0 5px #08080d, 0 40px 80px -30px rgba(0, 0, 0, .9);
}
[data-urzadzenie="telefon"] .pg-ekran { border-radius: 44px; }
.pg-wyspa { display: none; }
[data-urzadzenie="telefon"] .pg-wyspa {
  display: block; position: absolute; z-index: 2;
  top: calc(var(--pg-rama) + 11px); left: 50%; translate: -50% 0;
  width: 112px; height: 32px; border-radius: 20px; background: #050507;
}
[data-urzadzenie="telefon"] .pg-urzadzenie::before, [data-urzadzenie="telefon"] .pg-urzadzenie::after {
  content: ""; position: absolute; width: 4px; border-radius: 2px; background: #1d1c25;
}
[data-urzadzenie="telefon"] .pg-urzadzenie::before { right: -4px; top: 22%; height: 96px; }
[data-urzadzenie="telefon"] .pg-urzadzenie::after { left: -4px; top: 18%; height: 60px; box-shadow: 0 84px 0 #1d1c25; }
.pg--poziomo[data-urzadzenie="telefon"] .pg-wyspa { top: 50%; left: calc(var(--pg-rama) + 11px); translate: 0 -50%; width: 32px; height: 112px; }
.pg--poziomo[data-urzadzenie="telefon"] .pg-urzadzenie::before { right: auto; left: 22%; top: -4px; width: 96px; height: 4px; }
.pg--poziomo[data-urzadzenie="telefon"] .pg-urzadzenie::after { left: 18%; top: auto; bottom: -4px; width: 60px; height: 4px; box-shadow: 84px 0 0 #1d1c25; }

/* laptop: pokrywa z ramką i kamerą, pod nią podstawa szersza od ekranu, z wcięciem */
[data-urzadzenie="laptop"] .pg-urzadzenie {
  --pg-rama: 22px;
  padding: var(--pg-rama) var(--pg-rama) calc(var(--pg-rama) + 10px);
  border-radius: 26px 26px 6px 6px;
  background: #0d0d13;
  box-shadow: inset 0 0 0 2px #2d2c38, 0 50px 90px -40px rgba(0, 0, 0, .9);
  margin-bottom: 34px;
}
[data-urzadzenie="laptop"] .pg-ekran { border-radius: 4px; }
[data-urzadzenie="laptop"] .pg-urzadzenie::before {
  content: ""; position: absolute; top: 8px; left: 50%; translate: -50% 0;
  width: 8px; height: 8px; border-radius: 50%; background: #1f1f2a; box-shadow: inset 0 0 0 2px #2a2a38;
}
[data-urzadzenie="laptop"] .pg-podstawa {
  display: block; position: absolute; left: -7%; right: -7%; bottom: -34px; height: 34px;
  border-radius: 2px 2px 26px 26px / 2px 2px 34px 34px;
  background: linear-gradient(#3a3946, #22212b 38%, #15141b);
  box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .9);
}
[data-urzadzenie="laptop"] .pg-podstawa::before {
  content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0;
  width: 16%; height: 12px; border-radius: 0 0 14px 14px; background: #121118;
}
.pg-podstawa { display: none; }

@media (prefers-reduced-motion: reduce) { .pg-urzadzenie, .pg-kadr, .pg-obroc .ikona { transition: none; } }

/* — pasek i okna: układ wspólny; na tablecie i komputerze pasek jest ukryty, a opakowanie urządzenia
   nie istnieje (display: contents), kolejność jak zawsze: urządzenie, szerokość, obróć, nowa karta ------- */
.pg-pasek, .pg-krotko { display: none; }
.pg-urz { display: contents; }
.pg-urz .pg-obroc { order: 1; }
.pg-nowa { order: 2; }

/* TELEFON (< 700 px, Jakub 04.10) — u góry pasek adresu (pole + krótki przycisk), pod nim rząd przycisków
   Urządzenie · Szerokość · Realizacje · Nowa karta; przycisk wysuwa swoje okno pod rzędem (jedno naraz,
   podglad-strony.js — ten sam wzór co w Studio i konwerterze). Niżej telefon w mniejszym kadrze. */
@media (max-width: 699px) {
  .pg { gap: var(--o-4); }
  .pg-panel { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--o-2); padding: var(--o-3); align-items: stretch; }
  .pg-panel:has(.pg-nowa[hidden]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-adres, .pg-sterowanie { display: contents; }
  .pg-adres > .nz-etykieta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pg-adres-wiersz { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
  .pg-adres-wiersz .przycisk { align-self: auto; padding-right: 36px; }
  .pg-pelny { display: none; }
  .pg-krotko { display: inline; }

  .pg-pasek { display: contents; }
  .pg-chip, .pg-nowa {
    order: 1;
    display: grid; justify-items: center; align-content: center; gap: 2px;
    min-height: 58px; padding: 6px 4px; border-radius: 18px;
    font-size: var(--r-mini); line-height: 1.15; text-align: center;
  }
  .pg-nowa .ikona { width: 20px; height: 20px; }
  .pg-chip-nazwa { color: var(--tekst); }
  .pg-chip-wart { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--kroj-mono); font-size: .625rem; color: var(--tekst-2); }
  .pg-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: pole pod rzędem przycisków, jedno naraz */
  [data-pg-okno] { display: none; grid-column: 1 / -1; order: 2; padding-top: var(--o-3); border-top: 1px solid var(--tafla-linia, var(--linia)); }
  .pg-panel[data-otwarte="urzadzenie"] [data-pg-okno="urzadzenie"] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-3); animation: pg-wysun .28s var(--e-lagodna); }
  .pg-panel[data-otwarte="szer"] [data-pg-okno="szer"] { display: grid; animation: pg-wysun .28s var(--e-lagodna); }
  .pg-panel[data-otwarte="realizacje"] [data-pg-okno="realizacje"] { display: flex; animation: pg-wysun .28s var(--e-lagodna); }
  .pg-urz .pg-obroc { order: 0; }
  @keyframes pg-wysun { from { opacity: 0; translate: 0 -8px; } }
  .pg-panel .nz-komunikat { grid-column: 1 / -1; order: 3; min-height: 0; }
  .pg-panel .nz-komunikat:empty { display: none; }
}
@media (max-width: 699px) and (prefers-reduced-motion: reduce) { .pg-panel[data-otwarte] [data-pg-okno] { animation: none; } }