/* ============================================================
   Kompozycja warstw + placeholdery wariantów.

   Warstwy (placement z js/data/screens.js):
     fill    → .layer--fill      pełne tło
     flow    → .flow-item        blok w kolumnie treści
     bottom  → .layer--bottom    przypięte do dołu ekranu

   Placeholdery są celowo neutralne — NIE udają UI MeestPay.
   Znikają automatycznie, gdy wariant dostanie `preview`.
   ============================================================ */

/* ---------- Kolumna treści ---------- */
.screen-flow {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 68px 24px 96px;   /* góra: status bar, dół: nawigacja */
  overflow: hidden;
}

.flow-item {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Etykieta warstwy — pomaga rozpoznać placeholder, znika przy `preview` */
.flow-item__tag {
  position: absolute;
  top: 2px;
  right: 0;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-faint);
  pointer-events: none;
}

/* ---------- Tła ---------- */
.ph {
  position: absolute;
  inset: 0;
}

.ph-bg--01 { background: #ffffff; }

.ph-bg--02 {
  background: linear-gradient(180deg, #eeeeec 0%, #f8f8f7 42%, #ffffff 100%);
}

.ph-bg--03 {
  background: #fbfbfa;
  background-image:
    linear-gradient(to right, rgba(22,23,26,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22,23,26,0.045) 1px, transparent 1px);
  background-size: 26px 26px;
}

.ph-bg--04 {
  background: linear-gradient(0deg, #ececea 0%, #fafafa 46%, #ffffff 100%);
}

/* ---------- Bloki wireframe ---------- */
.ph-block {
  background: var(--c-ph-fill);
  border-radius: var(--r-md);
  flex: 0 0 auto;
}

.ph-block--soft { background: var(--c-ph-fill-soft); }

.ph-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ph-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-ph-fill);
  flex: 0 0 auto;
}

.ph-lines { display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto; }
.ph-line  { height: 9px; border-radius: 5px; background: var(--c-ph-fill); }
.ph-line--w40 { width: 40%; }
.ph-line--w55 { width: 55%; }
.ph-line--w70 { width: 70%; }
.ph-line--w85 { width: 85%; }

.ph-list { display: flex; flex-direction: column; gap: 16px; }

.ph-tiles { display: flex; gap: 10px; }
.ph-tile  { flex: 1 1 0; height: 62px; border-radius: var(--r-md); background: var(--c-ph-fill-soft); }

.ph-gap    { height: 12px; }
.ph-gap-sm { height: 4px; }

/* ---------- Karta (główne bloki sekcji) ---------- */
.ph-card {
  position: relative;
  border: 1px dashed var(--c-ph-line);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.72);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ph-card--tall  { min-height: 168px; }
.ph-card--short { min-height: 118px; }
.ph-card--flat  { min-height: 92px; }
.ph-card--form  { min-height: 0; gap: 12px; }

/* ---------- Formularz ---------- */
.ph-field {
  height: 44px;
  border-radius: var(--r-md);
  background: var(--c-ph-fill-soft);
  border: 1px solid var(--c-ph-line);
}

.ph-button {
  height: 46px;
  border-radius: var(--r-md);
  background: var(--c-ink);
  opacity: 0.82;
}

.ph-code {
  flex: 1 1 0;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--c-ph-fill-soft);
  border: 1px solid var(--c-ph-line);
}

.ph-divider {
  height: 1px;
  background: var(--c-ph-line);
  margin: 4px 0;
}

/* ---------- Logo ---------- */
.ph-logo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 0 12px;
}

.ph-logo--center { align-items: center; }

.ph-logo__mark {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--c-ph-fill);
}

.ph-logo--center .ph-line { width: 46%; }

/* ---------- Nawigacja ---------- */
.ph-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 30px 30px;
  background: rgba(255, 255, 255, 0.9);
  border-top: 1px solid var(--c-ph-line);
}

.ph-nav__item {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--c-ph-fill);
  display: block;
}

.ph-nav__cta {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--c-ink);
  opacity: 0.82;
  display: block;
  margin-top: -18px;
}

.ph-nav--icons { background: none; border-top: 0; }

.ph-nav__glyph {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--c-ink-faint);
  display: block;
}

.ph-nav__glyph--filled {
  border-color: transparent;
  background: var(--c-ink-muted);
}

/* ---------- Miniatura: identyczny render w skali ---------- */
.thumb__canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--phone-w);
  height: var(--phone-h);
  transform: scale(var(--thumb-scale, 0.25));
  transform-origin: top left;
  pointer-events: none;
}

/* Kadr od dołu — dla warstw placement: "bottom",
   inaczej wszystkie warianty nawigacji wyglądałyby tak samo. */
.thumb__canvas--bottom {
  top: auto;
  bottom: 0;
  transform-origin: bottom left;
}