/* ============================================================
   PODGLĄD KLIENTA NA TELEFONIE

   Reguły włącza klasa `is-mobile-preview` na <body>, którą nadaje
   js/ui/mobile.js — wąski ekran I widoczny widok zaawansowany.
   Nie sam media query: widok prosty (kreator) ma własną nawigację
   i tych reguł go dotyczyć nie może.

   Plik ładuje się ostatni, więc nadpisuje ustawienia z layout.css
   i panel.css bez podnoszenia ich specyficzności.

   Zasada układu: makieta dostaje CAŁE miejsce, jakie zostanie po
   jednym pasku u góry i jednym u dołu. Wszystko inne wjeżdża
   z dołu jako arkusz i po użyciu znika.
   ============================================================ */

/* ---------------- ramy okna ---------------- */

body.is-mobile-preview .app {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

body.is-mobile-preview .main {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Ekrany i warianty żyją teraz w arkuszu — w kolumnie nie mają czego robić */
body.is-mobile-preview .main > .rail,
body.is-mobile-preview .main > .panel { display: none; }

/* ---------------- górny pasek ---------------- */

/* ← | nazwa projektu | ⋯  — trzy rzeczy, jedna wysokość paska. */
body.is-mobile-preview .header:not(.header--admin) {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  height: 52px;
  padding: 0 var(--s-2);
  gap: var(--s-2);
}

/* Znak projektanta stoi na powitaniu i w podsumowaniu; tutaj liczy się
   jedno zdanie: który projekt oglądam. */
body.is-mobile-preview .header:not(.header--admin) .brand {
  justify-content: center;
  min-width: 0;
}

body.is-mobile-preview .header:not(.header--admin) .brand__logo { display: none; }

body.is-mobile-preview .header:not(.header--admin) .brand__title {
  display: block;
  min-width: 0;
  text-align: center;
}

body.is-mobile-preview .header:not(.header--admin) .brand__mark {
  display: block;
  font-size: var(--fs-14);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  color: var(--c-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.is-mobile-preview .header:not(.header--admin) .brand__sub { display: none; }

body.is-mobile-preview .header:not(.header--admin) .header__actions {
  justify-self: end;
  gap: 0;
}

/* Przełącznik widoku obsługuje strzałka ← po lewej — ten sam przycisk
   w dwóch miejscach tylko by mylił. */
body.is-mobile-preview .header:not(.header--admin) [data-mode-toggle] { display: none; }

/* Okrągły przycisk paska: ←, ⋯ oraz zamknięcie arkusza. */
.mhdr__btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-ink-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body.is-mobile-preview .mhdr__btn { display: inline-flex; }
.msheet .mhdr__btn { display: inline-flex; }

.mhdr__btn:active { background: var(--c-surface-hover); }
/* Miejsce w siatce zostaje — znika tylko rysunek (js/ui/mobile.js). */
.mhdr__btn.is-blank { visibility: hidden; }
.mhdr__btn svg { display: block; }

/* ---------------- menu ⋯ ---------------- */

.mmenu {
  position: fixed;
  z-index: 320;
  min-width: 196px;
  padding: var(--s-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--sh-2);
}

.mmenu__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  height: 44px;
  padding: 0 var(--s-3);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  font: inherit;
  font-size: var(--fs-14);
  color: var(--c-ink);
  text-align: left;
  cursor: pointer;
}

.mmenu__item:active { background: var(--c-surface-hover); }
.mmenu__item:disabled { opacity: 0.35; }
.mmenu__icon { display: inline-flex; color: var(--c-ink-muted); }
.mmenu__icon svg { display: block; }

/* ---------------- scena ---------------- */

body.is-mobile-preview .stage {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--s-3) var(--s-3) var(--s-2);
  justify-content: center;
}

/* W podglądzie mobilnym liczy się makieta, nie podpis pod nią: stała
   tu wcześniej lista wybranych wariantów i zabierała dwa wiersze.
   Opis wydania idzie za nią — na tym ekranie też jest tylko notatką. */
body.is-mobile-preview .stage__version { display: none; }

/* „Pobierz ekran" zostaje pod ręką, ale wychodzi z przepływu: jako pasek
   pod telefonem odbierał makiecie kilkadziesiąt pikseli wysokości. */
body.is-mobile-preview .stage__foot {
  position: absolute;
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: 6;
}

body.is-mobile-preview .stage__foot [data-download] { display: none; }

body.is-mobile-preview .stage__foot [data-comment-mode] {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: var(--r-pill);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-2);
}

body.is-mobile-preview .stage__foot [data-comment-mode][aria-pressed="true"] {
  background: var(--c-accent-2);
  color: var(--c-accent-2-ink);
  border-color: var(--c-accent-2);
}

body.is-mobile-preview .stage__foot [data-comment-mode] span:not(.btn__icon) {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------- dolny pasek ---------------- */

.mbar { display: none; }

body.is-mobile-preview .mbar {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
}

.mbar__tabs {
  display: flex;
  gap: var(--s-1);
}

.mtab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px var(--s-1);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  font: inherit;
  font-size: var(--fs-11);
  color: var(--c-ink-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mtab.is-open,
.mtab:active { background: var(--c-surface-hover); color: var(--c-ink); }

.mtab__icon { display: inline-flex; }
.mtab__icon svg { display: block; }

.mtab__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: var(--ls-tight);
}

/* Licznik nierozwiązanych uwag — ten sam sygnał, co przy zakładce
   „Comments" w panelu. */
.mtab__count {
  position: absolute;
  top: 2px;
  left: 50%;
  margin-left: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--c-brand);
  color: var(--c-brand-ink);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* Plakietka tylko wtedy, gdy niesie liczbę — pusty <span> ma przecież
   tło i wysokość, więc bez tego świeciłby kropką przy każdej zakładce. */
.mtab__count:empty,
.mtab__count[hidden] { display: none; }

/* Zatwierdzenie: jedna rzecz, której się od klienta oczekuje, więc
   stoi przy krawędzi i zajmuje całą szerokość. */
.mbar__cta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.mbar--no-cta .mbar__cta { display: none; }

body.is-mobile-preview .mbar__cta [data-confirm] {
  flex: 1 1 auto;
  height: 48px;
  justify-content: center;
  font-size: var(--fs-14);
}

body.is-mobile-preview .mbar__cta .status-due {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ---------------- arkusz ---------------- */

.msheet {
  position: fixed;
  inset: 0;
  z-index: 240;
  background: var(--c-scrim);
  opacity: 0;
  transition: opacity var(--t-mid) var(--e-out);
}

.msheet.is-open { opacity: 1; }

.msheet__box {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-height: 86vh;
  max-height: 86dvh;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--c-surface);
  box-shadow: var(--sh-2);
  transform: translateY(100%);
  transition: transform var(--t-mid) var(--e-out);
}

.msheet.is-open .msheet__box { transform: translateY(0); }

/* Warianty i uwagi czyta się dłużej niż listę ekranów — arkusz dostaje
   stałą wysokość, żeby nad nim zostawał kawałek makiety. */
.msheet__box--tall { height: 72vh; height: 72dvh; }

.msheet__head {
  flex: 0 0 auto;
  padding: var(--s-2) var(--s-3) 0;
  touch-action: none;
  cursor: grab;
}

.msheet__grip {
  display: block;
  width: 36px;
  height: 4px;
  margin: 0 auto var(--s-2);
  border-radius: var(--r-pill);
  background: var(--c-line-strong);
}

.msheet__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-left: var(--s-2);
}

.msheet__title {
  margin: 0;
  font-size: var(--fs-16);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  color: var(--c-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msheet__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* --- lista ekranów w arkuszu --- */
/* Poniżej 1040 px rail jest poziomym paskiem (layout.css, panel.css).
   W arkuszu wraca do kolumny — tu miejsca w pionie nie brakuje. */
.msheet__body > .rail {
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-3) var(--s-4);
  border: 0;
  background: transparent;
  overflow-x: hidden;
  overflow-y: auto;
}

.msheet__body > .rail .rail__list {
  flex-direction: column;
  gap: var(--s-1);
}

.msheet__body > .rail .rail__item {
  width: 100%;
  min-height: 48px;
  white-space: normal;
  box-shadow: none;
}

.msheet__body > .rail .rail__footer { display: none; }

/* --- warianty i uwagi w arkuszu --- */
.msheet__body > .panel {
  flex: 1 1 auto;
  min-height: 0;
  border: 0;
  background: transparent;
}

.msheet__body > .panel .panel__scroll {
  padding: var(--s-4) var(--s-3) var(--s-5);
  gap: var(--s-6);
  -webkit-overflow-scrolling: touch;
}

.msheet__body > .panel .panel__footer {
  margin: 0 var(--s-3) var(--s-3);
}

/* Pole komentarza: 16 px to próg, poniżej którego iOS sam powiększa
   stronę przy wejściu w pole — a wtedy makieta ucieka z ekranu. */
body.is-mobile-preview .comment__field,
body.is-mobile-preview .cms-input { font-size: 16px; }

/* Uwagi czyta się kciukiem — cele dotyku nie mogą być mniejsze niż
   to, czym się w nie trafia. */
body.is-mobile-preview .comment__link,
body.is-mobile-preview .thread__action { min-height: 36px; }

/* ---------------- komunikaty ---------------- */

/* Toast (z-index 100) chowałby się pod arkuszem, a mówi o rzeczach,
   które w arkuszu właśnie zrobiono — np. o resecie konfiguracji. */
body.is-mobile-preview .toast-layer {
  z-index: 340;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

@media (prefers-reduced-motion: reduce) {
  .msheet,
  .msheet__box { transition: none; }
}

/* ============================================================
   PANEL ADMINA NA TELEFONIE — NAWIGACJA PRZY DOLNEJ KRAWĘDZI

   Pasek panelu stał na górze, w przepływie strony, i miał na telefonie
   179 px wysokości (nazwa projektu, licznik, pięć przycisków, dzwonek
   i konto — wszystko zawinięte w trzy wiersze). Ponieważ przewija się
   CAŁA strona, przy pierwszym ruchu w dół wyjeżdżał poza ekran; w iOS
   Chrome, gdzie górny pasek adresu chowa się i wraca, wyglądało to na
   ucięty w połowie nagłówek, do którego nie da się wrócić — a to
   w nim zmienia się i dodaje projekty.

   Pasek idzie więc na dół i zostaje tam na stałe, jak nawigacja
   w aplikacji mobilnej. Dwa wiersze:

     [ wybór projektu ⌄ ] [+]
     [Project] [Figma] [Preview] [ Publish ] [dzwonek] [konto]

   Przyciski w drugim wierszu tracą podpisy (ikony zostają), bo
   z podpisami nie mieszczą się w jednym wierszu na 390 px. Publikacja
   podpis zachowuje — to jedyna akcja, której nie wolno pomylić.

   Przenosimy TE SAME węzły co na desktopie, samym CSS-em: dzwonek
   i konto muszą mieć prawdziwą geometrię, bo js/ui/header.js liczy
   z niej położenie swoich menu (i odwraca je w górę, gdy pod
   przyciskiem nie ma już miejsca).
   ============================================================ */

@media (max-width: 767px) {
  body[data-app="admin"] .header--admin {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
    border-bottom: 0;
    border-top: 1px solid var(--c-line);
    box-shadow: var(--sh-2);
  }

  /* Wysokość paska mierzy js/ui/header.js — treść musi mieć pod czym
     się skończyć, inaczej ostatnia karta chowa się pod nawigacją. */
  body[data-app="admin"] .cms {
    padding-bottom: var(--h-admin-bar, 104px);
  }

  /* Wiersz pierwszy: czym pracujesz. Znak Prevki i jej nazwa mówią to,
     co i tak widać w zakładce — tu liczy się nazwa projektu. */
  body[data-app="admin"] .header--admin .brand {
    gap: var(--s-2);
    width: 100%;
  }

  body[data-app="admin"] .header--admin .brand__logo--app,
  body[data-app="admin"] .header--admin .hdr-divider { display: none; }

  body[data-app="admin"] .header--admin .header__select {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  /* Wiersz drugi: co możesz zrobić. Bez zawijania — przyciski dzielą
     szerokość paska, a nie zjeżdżają do trzeciego wiersza. */
  body[data-app="admin"] .header--admin .header__actions {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: var(--s-2);
  }

  /* Same ikony: podpisy nie mieszczą się w jednym wierszu na 390 px. */
  body[data-app="admin"] .header--admin .header__actions .btn .btn__label,
  body[data-app="admin"] .header--admin [data-cms-project-add] .btn__label {
    display: none;
  }

  body[data-app="admin"] .header--admin .header__actions .btn,
  body[data-app="admin"] .header--admin [data-cms-project-add] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
  }

  /* Publikacja zostaje z podpisem i bierze miejsce, które zostanie:
     ikona zatwierdzenia sama w sobie nie mówi, że to WYSŁANIE
     projektu klientowi. */
  body[data-app="admin"] .header--admin .header__actions [data-cms-publish] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 0 var(--s-3);
    overflow: hidden;
  }

  body[data-app="admin"] .header--admin .header__actions [data-cms-publish] .btn__label--short {
    display: block;
  }

  body[data-app="admin"] .header--admin .header__actions .hdr-avatar {
    width: 40px;
    height: 40px;
  }

  /* Plakietka statusu projektu wraca do wiersza z jego nazwą —
     tam znaczy „ten projekt", a nie „coś w panelu". */
  body[data-app="admin"] .header--admin .status-pill {
    flex: 0 0 auto;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Lista projektów rozwija się W GÓRĘ. Pod polem jest już tylko
     wiersz akcji i krawędź ekranu — Choices ustawia listę pod spodem
     (position: "bottom" w js/ui/cms.js, wspólne dla wszystkich list
     w panelu), więc odwracamy ją tutaj, dla tego jednego paska. */
  body[data-app="admin"] .header--admin .choices__list--dropdown {
    top: auto;
    bottom: 100%;
    margin-bottom: 4px;
  }

  body[data-app="admin"] .header--admin .choices__list--dropdown .choices__list {
    max-height: 40vh;
  }

  /* Menu dzwonka i konta otwierają się w górę (js/ui/header.js), więc
     muszą się w tej połowie ekranu zmieścić. */
  body[data-app="admin"] .hdr-pop { max-width: calc(100vw - 16px); }
  body[data-app="admin"] .hdr-pop--notes { width: 340px; }
  body[data-app="admin"] .hdr-pop__body { max-height: 50vh; }

  /* Komunikaty nad paskiem, nie pod nim. */
  body[data-app="admin"] .toast-layer {
    bottom: calc(var(--h-admin-bar, 104px) + var(--s-4));
  }
}