/* ==========================================================================
   4-widoki/28-okna-w-ramie.css — KALKULATOR KOSZTÓW i CZAT JAKO STRONY W RAMIE
   (v15 b19, ZK2 — 04.10.2026; zasada właściciela: „ma wyglądać DOKŁADNIE jak w artefakcie”)
   --------------------------------------------------------------------------
   We wzorze wyglądu (`Kalkulator.html`, `Czat.html`) to STRONY: menu z lewej, górny pasek, na telefonie dolny pasek.
   W programie zostają oknami (openModal — zapis, pytanie o niezapisane zmiany, „wstecz”, Esc bez zmian), ale tło okna
   nie przykrywa ramy: stoi dokładnie w obszarze treści strony, bez przyciemnienia. Karta w środku = karta wzoru
   (`.k-okno`, `.cz-app`): ramka, róg 16 px, lekki cień.
   Odstępy wokół karty jak we wzorze:
     Kalkulator  12 px dookoła; do 1180 px: 8 px góra/dół, 12 px boki; telefon pionowo: bez odstępów
     Czat        16 / 32 / 24 px (jak każda strona); do 1180 px: 12 / 16 px; telefon: bez odstępów
   Menu przy Kalkulatorze jest szyną ikon przy każdej szerokości (wzór: `.app:has(.tresc.tk)`).
   Tytuł w górnym pasku, pozycja menu i kliknięcia w ramę: js/ui/okna-jako-strony.js. Telefon: 9-telefon/2-okna.css §7.
   ========================================================================== */

/* Gdzie stoi strona: pod górnym paskiem, na prawo od menu (232 px / szyna 76 px). */
#modal-root { --strona-gora: var(--topbar-h); --strona-lewo: var(--sidebar-w); --strona-dol: 0px; }
.app-shell.sidebar-collapsed ~ #modal-root,
:root[data-okno-strona="kalkulator"] #modal-root { --strona-lewo: var(--sidebar-w-waski); }
@media (max-width: 1180px) {
  #modal-root { --strona-lewo: var(--sidebar-w-waski); }
  :root:not([data-ui="mobile"]):not([data-okno-strona="kalkulator"]) .app-shell:not(.sidebar-collapsed) ~ #modal-root { --strona-lewo: var(--sidebar-w); }   /* tablet z rozwiniętym menu */
}
:root[data-okno-strona="kalkulator"]:not([data-ui="mobile"]) .app-shell { grid-template-columns: var(--sidebar-w-waski) minmax(0, 1fr); }
/* Widok pod stroną nie prześwituje, nie łapie klawisza Tab i nie jest czytany — zostaje w tym samym miejscu przewinięcia. */
:root[data-okno-strona] .content { visibility: hidden; }

#modal-root .modal-backdrop:has(> :is(.project-costs-modal, .message-hub-modal)) { inset: var(--strona-gora) 0 var(--strona-dol) var(--strona-lewo); z-index: calc(var(--z-topbar) - 1); place-items: stretch; padding: var(--s-4) var(--s-6) var(--s-5); background: var(--bg); backdrop-filter: none; }
#modal-root .modal-backdrop:has(> .project-costs-modal) { padding: var(--s-3); }
/* Okno otwarte NAD stroną (zestawienie, potwierdzenie, osoby w wątku): strona zostaje widoczna pod nim. */
#modal-root .modal-backdrop.is-suspended:has(> :is(.project-costs-modal, .message-hub-modal)) { display: grid; }
#modal-root .modal-backdrop > :is(.modal.project-costs-modal, .modal.message-hub-modal) { width: 100%; max-width: none; height: 100%; max-height: none; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--cien-1); }
/* Karta strony dostaje fokus przy otwarciu (czytnik ekranu ogłasza stronę) — bez obrysu wokół całej karty. */
#modal-root .modal-backdrop > :is(.modal.project-costs-modal, .modal.message-hub-modal):focus-visible { outline: 0; }
/* Karta Kalkulatora ma we wzorze miękki cień okna (karta Czatu — tylko cienki). */
#modal-root .modal-backdrop > .modal.project-costs-modal { box-shadow: var(--cien-2); }

@media (max-width: 1180px) {
  #modal-root .modal-backdrop:has(> .message-hub-modal) { padding: var(--s-3) var(--s-4); }
  #modal-root .modal-backdrop:has(> .project-costs-modal) { padding: var(--s-2) var(--s-3); }
}