/* ============================================================================
   20-okna-polozenie.css — JEDNA ZASADA POŁOŻENIA I WYSOKOŚCI OKIEN (GUI-OKNA-SPOJNOSC, 18.10.2026)
   ----------------------------------------------------------------------------
   Wzór: PROJEKT-OKIEN\artefakt — `.ui-ok` (zwykłe okno) i `.ui-ok.l` (duże okno); okna_css.txt B9 / B25, _szablon.html:507–509.
   Tu, w tym jednym pliku, siedzi POŁOŻENIE I WYSOKOŚĆ okien. Żaden inny arkusz nie ustawia `top / bottom / inset / height /
   max-height / min-height / margin-top / margin-bottom / align-items / padding tła` na oknie (`.modal`) ani na jego tle
   (`.modal-backdrop`) — pilnuje tego strażnik `css-okno-polozenie` (tools/sprawdz-css.mjs, zapadka tools/okna-polozenie-zapadka.json).
   Okno, które ma wyglądać inaczej, dopisuje się TU (do listy albo jako nowy rodzaj), a nie we własnym arkuszu.

   RODZAJE OKIEN
     zwykłe  — środek ekranu (odstęp od góry = odstęp od dołu), wysokość wg treści, nie wyższe niż `.modal` w 05-komponenty
               (min(760px, 92vh)); komunikat o 24 px od krawędzi to wzór, tu zostaje dotychczasowa wysokość. Zmiennej `--okno-w` używa szerokość.
     duże    — wzór `.ui-ok.l`: komputer i tablet — okno stoi PRZY DOLNEJ KRAWĘDZI ekranu: 24 px od góry, dół w dolnej krawędzi
               (--okno-dol: 0), górne rogi 16 px, dolne 0, wyśrodkowane w poziomie; tablet: szerokość = ekran − 24 px (--okno-bok po 12 px).
               Telefon (`:root[data-ui="mobile"]`) = pełny ekran — 9-telefon/2-okna.css (wzór: `.ramka.tel .ui-ok`, bez rogów).
     strona  — Kalkulator kosztów i Wiadomości to STRONY w ramie programu (28-okna-w-ramie.css), nie okna; tej zasady nie dotyczą.
   JEDEN PRZEŁĄCZNIK: --okno-dol. 0 = dół okna w dolnej krawędzi ekranu (wzór). Gdyby właściciel wolał okna „pływające” (z marginesem
   u dołu jak u góry), wystarczy `--okno-dol: var(--s-5)` i `--okno-promien-dol: var(--r-lg)` — zmienia się wtedy każde duże okno naraz.
   Rodzaj okna czyta też test uruchomieniowy tools/kontrola/okna-polozenie.mjs (zmienna --okno-rodzaj).
   ============================================================================ */
:root {
  --okno-gora: var(--s-5);        /* odstęp górnej krawędzi dużego okna od góry ekranu (wzór: 24 px) */
  --okno-dol: 0px;                /* odstęp dolnej krawędzi dużego okna od dołu ekranu (wzór: 0 — okno stoi na dole) */
  --okno-bok: var(--s-3);         /* minimalny odstęp dużego okna od boków ekranu (tablet: szerokość = ekran − 24 px) */
  --okno-promien-dol: 0px;        /* dolne rogi dużego okna: 0, gdy dół stoi w krawędzi ekranu; przy --okno-dol > 0 użyj --r-lg */
  --okno-wys: calc(100dvh / var(--skala-ui) - var(--okno-gora) - var(--okno-dol));   /* wysokość dużego okna */
}
.modal { --okno-rodzaj: zwykle; }

/* LISTA DUŻYCH OKIEN (jedyne miejsce, w którym okno staje się „dużym”): Design · Konstrukcja (samodzielna i w Design) · Plany ·
   zakres Design (poprzednie konstrukcje) · zestawienie BOM · porównanie wersji oferty (.ofp-okno) · zadania projektu · kartoteki pełnowysokościowe (klient, dostawca, materiał,
   ekipa, blok) · szczegóły wersji konstrukcji · oferta pełna · projekt pełny · „Nowe zadanie” (wzór: Zadania.html, okno „l”). Porównania wersji kosztów należą do Kalkulatora (strona) — poza listą. */
.modal:is(
  .design-editor-modal, .construction-popup, .construction-in-design, .pln-okno, .design-zakres-modal, .calculation-modal,
  .task-modal, .project-chat-modal, .catalog-modal.full-height, .construction-modal.full-height,
  .offer-modal.full-height, .project-modal.full-height, .serwis-okno:not(.serwis-okno-nowe), .ofd-kz-okno, .ofd-zw-okno, .ofp-okno, .dk-okno, .dk-wybor-okno, .pp-okno.pp-pelny, .zh-nowe-okno-modal
) { --okno-rodzaj: duze; }

:root:not([data-ui="mobile"]) #modal-root .modal-backdrop:has(> .modal:is(
  .design-editor-modal, .construction-popup, .construction-in-design, .pln-okno, .design-zakres-modal, .calculation-modal,
  .task-modal, .project-chat-modal, .catalog-modal.full-height, .construction-modal.full-height,
  .offer-modal.full-height, .project-modal.full-height, .serwis-okno:not(.serwis-okno-nowe), .ofd-kz-okno, .ofd-zw-okno, .ofp-okno, .dk-okno, .dk-wybor-okno, .pp-okno.pp-pelny, .zh-nowe-okno-modal
)) { align-items: end; padding: var(--okno-gora) var(--okno-bok) var(--okno-dol); }

:root:not([data-ui="mobile"]) #modal-root .modal:is(
  .design-editor-modal, .construction-popup, .construction-in-design, .pln-okno, .design-zakres-modal, .calculation-modal,
  .task-modal, .project-chat-modal, .catalog-modal.full-height, .construction-modal.full-height,
  .offer-modal.full-height, .project-modal.full-height, .serwis-okno:not(.serwis-okno-nowe), .ofd-kz-okno, .ofd-zw-okno, .ofp-okno, .dk-okno, .dk-wybor-okno, .pp-okno.pp-pelny, .zh-nowe-okno-modal
) { height: var(--okno-wys); max-height: var(--okno-wys); border-radius: var(--r-lg) var(--r-lg) var(--okno-promien-dol) var(--okno-promien-dol); }

/* ZWYKŁE OKNA KARTOTEK (atrakcje, kategorie, certyfikacja, konstrukcje…): wzór `.ui-ok` — wysokość wg treści, ale do ekranu − 48 px
   (max-height calc(100% − 48px)), a nie do 760 px; wyższe okna (opisy konstrukcji, atrakcje) nie przewijają się wcześniej niż we wzorze. */
:root:not([data-ui="mobile"]) #modal-root .modal.catalog-modal.compact-catalog-modal { max-height: calc(100dvh - 2 * var(--okno-gora)); }