/* ============================================================
   Tor „z wzorem" — style WSPÓLNE dla produktów (js/fz-project-track.js)
   ============================================================

   Picker wzorów i arkusz wieloramkowy wyglądają tak samo w każdym produkcie,
   bo to ten sam mechanizm — różni je wyłącznie KOLOR AKCENTU. Dlatego arkusz
   nie zna żadnego produktu: bierze `--pc-accent` z tego, kto go załadował
   (fotokartka czerwony, magnes błękitny, kalendarz swój). Produkt bez tej
   zmiennej dostaje wartość zapasową, żeby picker nigdy nie wyszedł bezbarwny.

   ⚠️ Kalendarz ma jeszcze WŁASNE `cal-pp-*` / `cal-frame` w css/kalendarz.css
   i na razie z tego arkusza nie korzysta — przejdzie na wspólne przy migracji
   swojego toru na FZ.ProjectTrack. Do tego czasu oba zestawy muszą wyglądać
   tak samo; zmieniasz tutaj → sprawdź, czy kalendarz nie odstaje.
   ============================================================ */

:root {
    --fz-pt-accent: var(--pc-accent, #c0392b);
    --fz-pt-accent-light: var(--pc-accent-light, #fae8e5);
}

/* ── Picker wzorów ───────────────────────────────────────── */

.fz-pt-back {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(0, 0, 0, 0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.fz-pt-box {
    background: #fff; color: #1f2933;
    border-radius: 14px; width: 100%; max-width: 920px;
    max-height: 90vh; display: flex; flex-direction: column;
    overflow: hidden;
}
.fz-pt-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 16px 18px 10px;
    border-bottom: 1px solid #ececec;
}
.fz-pt-head h3 { margin: 0; font-size: 1.15rem; }
.fz-pt-sub { margin: 2px 0 0; font-size: 0.8rem; color: #7b8794; }
.fz-pt-body { overflow: auto; padding: 8px 18px 18px; -webkit-overflow-scrolling: touch; }

/* Pasek szybkiego skoku do folderu (gdy folderów > 1) */
.fz-pt-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 18px 0; }
.fz-pt-tab {
    border: 1px solid #dfe3e8; background: #f7f8fa; color: #3e4c59;
    border-radius: 999px; padding: 5px 12px; font-size: 0.8rem; cursor: pointer;
}
.fz-pt-tab.is-active {
    background: var(--fz-pt-accent); border-color: var(--fz-pt-accent);
    color: #fff; font-weight: 600;
}

.fz-pt-group { margin-top: 16px; }
.fz-pt-group-head {
    display: flex; align-items: baseline; gap: 8px;
    margin: 0 0 8px; padding-bottom: 6px;
    border-bottom: 2px solid #f0f0f0;
}
.fz-pt-group-name { font-size: 0.98rem; font-weight: 700; color: #1f2933; }
.fz-pt-group-count { font-size: 0.78rem; color: #9aa5b1; }

.fz-pt-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}
.fz-pt-cell {
    border: 1px solid #e0e0e0; border-radius: 10px; overflow: hidden;
    background: #fafafa; padding: 0; text-align: left; cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.fz-pt-cell:hover {
    border-color: var(--fz-pt-accent);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}
.fz-pt-thumb { display: block; width: 100%; height: 124px; object-fit: cover; background: #eceff1; }
.fz-pt-thumb--empty {
    display: flex; align-items: center; justify-content: center;
    height: 124px; color: #bdc3c7; font-size: 1.6rem; background: #eceff1;
}
.fz-pt-meta { padding: 6px 8px 8px; }
.fz-pt-name { font-size: 0.82rem; font-weight: 600; line-height: 1.2; }
.fz-pt-info { margin-top: 2px; font-size: 0.72rem; color: #8894a0; }

/* ── Arkusz wieloramkowy ─────────────────────────────────── */

.fz-pt-sheet {
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; padding: 8px 0 4px;
}
.fz-pt-stage {
    position: relative;
    background: #fff;
    box-shadow: var(--pc-shadow, 0 6px 24px rgba(0, 0, 0, .12));
    border-radius: 4px;
    overflow: hidden;
    touch-action: none;
}
/* Warstwy arkusza — zdjęcia POD szablonem, jak w torze zdjęcia pojedynczego:
     1 = ramki ze zdjęciami, 2 = PNG szablonu (przezroczyste otwory przycinają
     zdjęcia do kształtu ramek).
   Napisy (.fz-to-overlay) dostają z-index INLINE od FZ.TextOverlay (25),
   więc lądują nad wszystkim — tu nic nie trzeba ustawiać. */
.fz-pt-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    /* 🔴 `cover`, nie rozciaganie. Scena ma proporcje KARTY, a plansza wzoru
       swoja wlasna (magnes: 1,4216 wobec 1,3606-1,4852) — bez tego tlo byloby
       scisniete wzgledem ramek, ktore ida przez `coverTransform`, i wzor
       „odklejalby sie" od otworow. Gdy proporcje sa rowne (fotokartki, kalendarz),
       `cover` nie robi NIC — dlatego stoi tu bezwarunkowo. */
    object-fit: cover;
    object-position: center;
    display: block; pointer-events: none; user-select: none;
    z-index: 2;
}
.fz-pt-frames { position: absolute; inset: 0; z-index: 1; }
.fz-pt-hint { font-size: 0.82rem; color: #7b8794; text-align: center; }

/* Otwór, w którym składamy szablon w miniaturze galerii. Własny kontekst
   container-query — napisy szablonu mają font w `cqw` liczonym względem
   szerokości SCENY (dokumentu), a nie całej karty. */
.fz-pt-cutout { container-type: inline-size; }

/* Ramka na zdjęcie: pusta = kafel „+", pełna = miniatura z kadrem.
   Leży POD szablonem, więc jego przezroczysty otwór przycina ją do właściwego
   kształtu — dlatego wypełniona ramka nie dostaje ŻADNEJ obwódki (prostokątna
   obwódka wyszłaby zza okrągłego otworu jako cztery łuki). */
.fz-pt-frame {
    position: absolute;
    overflow: hidden;
    cursor: pointer;
    /* Wariant zapasowy PRZED color-mix: starsza przeglądarka (mobilne Safari
       sprzed 16.2) pomija nieznaną deklarację, więc pusta ramka musi być
       widoczna także bez niej — inaczej klient nie wie, gdzie kliknąć. */
    background: rgba(192, 57, 43, 0.16);
    box-shadow: inset 0 0 0 2px rgba(192, 57, 43, 0.85);
    background: color-mix(in srgb, var(--fz-pt-accent) 16%, transparent);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--fz-pt-accent) 85%, transparent);
    -webkit-tap-highlight-color: transparent;
}
/* `touch-action:none` na WYPEŁNIONEJ ramce: bez tego przeglądarka mobilna
   uznaje gest za przewijanie strony i zabiera nam `pointermove`, czyli
   przeciąganie nie działa. Puste ramki zostają przewijalne — nie ma z nich
   czego przeciągać. */
.fz-pt-frame.is-filled {
    background: none; box-shadow: none;
    touch-action: none; cursor: grab;
}
.fz-pt-frame.is-dragging { opacity: .45; cursor: grabbing; }
.fz-pt-frame.drag-over {
    box-shadow: inset 0 0 0 3px #4caf50;
    background: rgba(76, 175, 80, .14);
}
.fz-pt-frame img { position: absolute; max-width: none; max-height: none; pointer-events: none; }

.fz-pt-frame-empty {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; color: var(--fz-pt-accent); pointer-events: none;
}
.fz-pt-frame-plus { font-size: clamp(18px, 4vw, 34px); line-height: 1; font-weight: 300; }
.fz-pt-frame-label {
    font-size: clamp(8px, 1.4vw, 11px); font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
}

/* Tryb edycji JEDNEJ ramki: edytowane zdjęcie w kadrze, pozostałe ramki jako
   przygaszony kontekst — wszystko POD szablonem. Edytowaną ramkę poznać po
   pełnej jasności (kontekst .65), bez obwódki: przy okrągłym otworze wyszłaby
   jako łuki. Pozostałe są KLIKALNE — przejście na nie zatwierdza obecną. */
.fz-pt-frame-ctx {
    position: absolute; overflow: hidden; opacity: .65;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.fz-pt-frame-ctx:hover { opacity: .85; }
.fz-pt-frame-ctx.is-empty {
    background: rgba(192, 57, 43, 0.16);
    background: color-mix(in srgb, var(--fz-pt-accent) 16%, transparent);
    opacity: 1;
}
.fz-pt-frame-ctx img { position: absolute; max-width: none; max-height: none; pointer-events: none; }

/* Napisy szablonu jako kontekst — nad szablonem, pod warstwą edycji. */
.fz-pt-txt-ctx { z-index: 4; }