/* ============================================================
   RAMKA PRZEGLĄDARKI (projekty typu Website / Web App)

   Odpowiednik css/phone.css: ta sama zasada skalowania (kontener
   trzyma miejsce, ramka jest przeskalowana transformem), ale treść
   przewija się w środku, bo strona nie kończy się na krawędzi okna.
   ============================================================ */

.browser-fit {
  position: relative;
  width: calc(var(--browser-w) * var(--browser-scale, 1));
  height: calc((var(--browser-h) + 38px) * var(--browser-scale, 1));
  flex: 0 0 auto;
}

.browser {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--browser-w);
  height: calc(var(--browser-h) + 38px);
  transform: scale(var(--browser-scale, 1));
  transform-origin: top left;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--c-line-strong);
  box-shadow: var(--sh-phone);
}

/* Pasek adresu — na tyle, żeby ramka czytała się jako przeglądarka,
   i nie więcej: to nie jest element projektu klienta. */
.browser__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 38px;
  padding: 0 14px;
  background: var(--c-surface-sunk);
  border-bottom: 1px solid var(--c-line);
  flex: 0 0 auto;
}

.browser__dots {
  display: flex;
  gap: 6px;
}

.browser__dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-line-strong);
}

.browser__address {
  flex: 1 1 auto;
  height: 22px;
  /* Adres trzyma się lewej ZAWSZE. Bez tego dziedziczy wyrównanie po
     rodzicu — a kadr sąsiada w karuzeli siedzi w <button>, który domyślnie
     centruje tekst. Po zmianie slajdu adres przeskakiwał więc ze środka
     na lewą krawędź. */
  text-align: left;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  font-size: 12px;
  line-height: 20px;
  color: var(--c-ink-faint);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* W ciemnym motywie obrys paska adresu tylko dokłada kresek — pole
   odcina się już samym tłem. */
:root[data-theme="dark"] .browser__address {
  background: #212325;
  border-color: transparent;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .browser__address {
    background: #212325;
    border-color: transparent;
  }
}

/* Obszar strony — to on się przewija */
.browser__page {
  position: relative;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  background: #ffffff;
}

/* Sekcje idą jedna pod drugą, na pełną szerokość i w naturalnej
   wysokości — inaczej niż w telefonie, gdzie ekran ma stałą wysokość. */
.browser__layers {
  position: relative;
  min-height: 100%;
}

.browser__layers .layer--fill {
  position: absolute;
  inset: 0;
}

.browser__layers .screen-flow {
  position: relative;
  display: block;
  padding: 0;
}

.browser__layers .flow-item {
  position: relative;
  width: 100%;
}

/* Sekcja ma wysokość swojego obrazu — to ona buduje długość strony. */
.browser__layers .flow-item .layer__image,
.browser__layers .layer--bottom .layer__image {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* EKRAN Z JEDNEJ GRAFIKI (import z Figmy: cała ramka → jedna warstwa).

   To nie jest tło pod treścią, tylko sama treść, więc płynie w stronie
   jak sekcja: pełna szerokość, wysokość z proporcji obrazu. Wysokość okna
   dopasowuje się do niej w js/core/frame.js — dzięki temu projekt mieści
   się w makiecie w całości, zamiast być uciętym na dolnej krawędzi. */
.browser__layers .layer--fill.layer--page {
  position: relative;
  inset: auto;
  width: 100%;
}

.browser__layers .layer--fill.layer--page .layer__image {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Tło i nakładka rozciągają się na całą stronę, ale jej nie wydłużają. */
.browser__layers .layer--fill .layer__image,
.browser__layers .layer--overlay .layer__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Nawigacja przypięta do dołu ma w stronie znaczyć „stopka na końcu
   treści", a nie „pasek przy krawędzi okna". */
.browser__layers .layer--bottom {
  position: relative;
  inset: auto;
  width: 100%;
}

/* ---------------- Przełącznik viewportów ---------------- */
.viewports {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin-bottom: var(--s-4);
  border-radius: var(--r-pill);
  background: var(--c-surface-sunk);
  border: 1px solid var(--c-line);
}

.viewports__btn {
  height: 28px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  font: inherit;
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  color: var(--c-ink-muted);
  cursor: pointer;
  transition: background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}

.viewports__btn:hover { color: var(--c-ink); }

/* Akcent, nie „ink": na ciemnym motywie kolor tekstu jest prawie biały,
   więc biała etykieta na nim znikała. Akcent odwraca się razem z motywem. */
.viewports__btn[aria-pressed="true"] {
  background: var(--c-accent);
  color: var(--c-accent-ink);
}

/* W panelu przełącznik jest wąski jak kolumna — przyciski dzielą miejsce
   po równo, zamiast wychodzić poza krawędź. */
.viewports--panel {
  display: flex;
  width: 100%;
  margin-bottom: var(--s-3);
}

.viewports--panel .viewports__btn {
  flex: 1 1 0;
  padding: 0 6px;
}