/* ============================================================
   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.
   ============================================================ */

/* Wymiary liczą się z trzech zmiennych, które nadaje js/ui/frame.js:
   `--browser-w` / `--browser-h` to projekt, `--browser-pad` korpus
   urządzenia po bokach, a `--browser-chrome` wszystko, co ramka dokłada
   w pionie (pasek adresu + korpus u góry i u dołu). Okno przeglądarki
   ma korpus zerowy, więc zostaje samo 38 px paska. */
.browser-fit {
  position: relative;
  width: calc((var(--browser-w) + 2 * var(--browser-pad, 0px)) * var(--browser-scale, 1));
  height: calc((var(--browser-h) + var(--browser-chrome, 38px)) * var(--browser-scale, 1));
  flex: 0 0 auto;
}

.browser {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--browser-w) + 2 * var(--browser-pad, 0px));
  height: calc(var(--browser-h) + var(--browser-chrome, 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: var(--browser-bar, 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.

   Z WYJĄTKIEM TELEFONU: jego pasek leży w białym ekranie makiety, więc
   idzie stałymi kolorami (patrz `.browser__bar--phone` niżej). Bez tego
   wyjątku ciemne tło pigułki wygrywało specyficznością i domena miała
   w ciemnym motywie kontrast 2.2:1. */
:root[data-theme="dark"] .browser__bar:not(.browser__bar--phone) .browser__address {
  background: #212325;
  border-color: transparent;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .browser__bar:not(.browser__bar--phone) .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%;
}

/* ============================================================
   MAKIETA URZĄDZENIA — TABLET I MOBILE

   Ten sam kadr co okno przeglądarki, tylko w korpusie urządzenia:
   pasek adresu wchodzi DO ekranu (tak wygląda przeglądarka na
   telefonie), a wysokość ekranu jest stała — długa strona przewija się
   w nim, zamiast rozciągać makietę (js/ui/frame.js → fitHeight).

   Korpus ma kolor telefonu z trybu aplikacji (css/phone.css): jeden
   projekt nie może mieć dwóch różnych telefonów.
   ============================================================ */
.browser--device {
  padding: var(--browser-pad);
  background: var(--phone-frame);

  /* Obrys robi wewnętrzny cień, a nie `border`: przy obrysie krawędzią
     ekran byłby o dwa piksele węższy niż viewport projektu, a to on
     jest miarą, względem której liczone są pinezki komentarzy. */
  border: 0;
  box-shadow: var(--sh-phone), inset 0 0 0 1px var(--phone-frame-line);
}

.browser--tablet { border-radius: 28px; }

/* Telefon w projekcie webowym to TEN SAM telefon, co w aplikacji
   mobilnej — więc te same zaokrąglenia, co `.phone` w css/phone.css. */
.browser--mobile { border-radius: 52px; }

/* Ekran urządzenia — to jego zaokrąglenie przycina pasek i stronę. */
.browser__screen {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
  background: #ffffff;
}

.browser--mobile .browser__screen { border-radius: 42px; }

/* ============================================================
   TELEFON — CHROM PRZEGLĄDARKI MIEŚCI SIĘ W EKRANIE

   Ekran ma stałe 390 × 844 i to W NIM stoją: pasek stanu u góry,
   strona pośrodku i pasek Safari na dole. Telefon nie rośnie od tego,
   że coś na nim pokazujemy — dlatego `chromeOf()` w js/ui/frame.js nie
   liczy tych pasków. Wcześniej doklejały się one do wysokości ramki
   i urządzenie miało 412 × 952 zamiast 412 × 866: proporcje wydłużonego
   prostokąta, a nie iPhone'a.

   Strona przewija się w swoim wierszu dokładnie tak jak przedtem —
   zmienia się tylko to, ile z niej widać naraz, czyli dokładnie to,
   co robi prawdziwy pasek przeglądarki na telefonie.
   ============================================================ */
/* KOLORY CHROMU TELEFONU NIE IDĄ ZA MOTYWEM APLIKACJI.

   Ekran makiety jest BIAŁY w obu motywach, bo to projekt klienta, a nie
   interfejs (ta sama zasada, co przy wnętrzu telefonu w css/phone.css).
   Paski leżą w tym ekranie, więc muszą być czytelne na bieli niezależnie
   od tego, co wybrał projektant. Zmierzone: token `--c-ink` dawał
   w ciemnym motywie 1.11:1 na białym ekranie — godziny nie było widać
   w ogóle. Wartości niżej są stałe i policzone dla bieli. */
.browser__screen--phone > .status-bar {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  height: var(--browser-status, 56px);
  background: transparent;
  color: #121314;                     /* 18.6:1 na białym ekranie */
}

/* Wyspa leży NA pasku stanu, jak na prawdziwym telefonie. */
.browser__screen--phone > .phone__island { position: absolute; }

/* Belka home leży na pasku Safari — w iOS jest dokładnie pod nim. */
.browser__screen--phone > .home-indicator {
  position: absolute;
  z-index: 25;
}

/* ---------------- Pasek Safari (iOS 15+) ----------------

   Przy DOLNEJ krawędzi, bo tam go od tej wersji widać, i w postaci
   pigułki z samą domeną — pełny adres i tak by się nie zmieścił,
   a przycięty wielokropkiem wygląda jak błąd (js/ui/frame.js → hostOf).

   Nie jest to pasek desktopowy w mniejszej skali: nie ma kropek okna,
   nie ma pola na całą szerokość i nie stoi nad stroną. */
.browser__bar--phone {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;

  /* Wysokość razem z miejscem na belkę home pod pigułką. */
  height: var(--browser-safari, 76px);
  padding: 0 var(--s-4) 24px;

  /* Stałe, bo pasek leży w białym ekranie makiety — patrz wyżej.
     Z tokenów wychodził w ciemnym motywie czarny pas doklejony do
     białego telefonu, czytany jak element projektu, a nie przeglądarki. */
  background: #f6f6f5;
  border-bottom: 0;
  border-top: 1px solid #e7e7e4;
}

.browser__bar--phone .browser__address {
  flex: 0 1 auto;
  max-width: 82%;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  text-align: center;
  font-size: 15px;
  line-height: 36px;
  color: #55575d;                     /* 7.2:1 na białej pigułce */
  background: #ffffff;
  border: 1px solid #e7e7e4;
}

/* Pasek adresu przeglądarki mobilnej: sam adres, wyśrodkowany —
   kropki okna nie mają tu czego udawać. */
.browser__bar--device {
  gap: 0;
  justify-content: center;
  padding: 0 10px;
}

.browser__bar--device .browser__address {
  flex: 0 1 auto;
  max-width: 100%;
  height: 20px;
  text-align: center;
  font-size: 11px;
  line-height: 18px;
}

/* ---------------- 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); }

/* Ikona rozmiaru przy etykiecie — patrz js/ui/cms.js i js/ui/simple.js. */
.viewports__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.viewports__icon {
  display: inline-flex;
  flex: 0 0 auto;
}

.viewports__icon svg { display: block; }

/* 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;
}