/* ============================================================================
   12-konstrukcja-okno.css — OKNO KONSTRUKCJI na telefonie (M6, GUI, 18.10.2026)
   ----------------------------------------------------------------------------
   Układ podstawowy (komputer i tablet) jest w 4-widoki/25c-konstrukcja-okno.css. Tu tylko to, czym różni się telefon,
   wg wzoru v99 (okna_css.txt: .ramka.tel / .ramka.telp, B9, B13, B27):
     · telefon PIONOWO — jedna kolumna: Wymiary, Zestawienie (przyciski jeden pod drugim), na końcu Rendery;
       plakietki stanu i kosz zjeżdżają do drugiego wiersza nagłówka (tytuł ma całą szerokość);
     · telefon POZIOMO — dwie kolumny jak na komputerze, nagłówek jednowierszowy bez podtytułu.
   Wagę ponad ogólne reguły okien telefonu (9-telefon/2-okna.css) daje `:root[data-ui="mobile"] #modal-root`.
   ============================================================================ */

/* Okno stoi na całym ekranie — ramę (100dvh, bez zaokrągleń) ustawia 2-okna.css, tak jak w pozostałych oknach. */

/* === Nagłówek: tytuł · ? · × w pierwszym wierszu; plakietki i kosz w drugim ================================= */
:root[data-ui="mobile"] #modal-root :is(.modal.construction-popup, .construction-bubble) > header { flex-wrap: wrap; align-items: center; padding: var(--s-3) var(--s-2) var(--s-2) var(--s-4); }   /* wzór (pion): 12 / 8 / 8 / 16 px */
:root[data-ui="mobile"] #modal-root :is(.modal.construction-popup, .construction-bubble) > header > :is(.kst-tytul, .construction-bubble-title) { flex: 1 1 0; min-width: 0; }
:root[data-ui="mobile"] #modal-root :is(.modal.construction-popup, .construction-bubble) > header .kst-hs { order: 4; flex: 1 1 100%; justify-content: flex-start; }
:root[data-ui="mobile"] #modal-root :is(.modal.construction-popup, .construction-bubble) > header .kst-hs .kst-usun { margin-left: auto; }
:root[data-ui="mobile"] #modal-root :is(.modal.construction-popup, .construction-bubble) > header :is(.modal-help-btn, .icon-button) { width: var(--h-control); height: var(--h-control); }
:root[data-ui="mobile"] #modal-root .construction-bubble-title strong { font-size: var(--t-md); }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal.construction-popup > header h2 { font-size: var(--t-lg); }   /* wzór (pion): tytuł 19 px */

/* === Treść: jedna kolumna (pion) =============================================================================== */
:root[data-ui="mobile"] #modal-root :is(.modal.construction-popup, .construction-bubble) .construction-editor-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3) var(--s-4); }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root :is(.modal.construction-popup, .construction-bubble) .construction-presentation-panel { flex: 0 0 auto; }
/* Przyciski zestawienia jeden pod drugim, na całą szerokość */
:root[data-ui="mobile"] #modal-root .kst-akc2 { flex-direction: column; }
:root[data-ui="mobile"] #modal-root .kst-akc2 :is(.upload-button, .kst-sprawdz, .kst-popraw) { flex: 0 0 auto; width: 100%; min-width: 0; }
/* Nazwa pliku skraca się wielokropkiem, nie łamie */
:root[data-ui="mobile"] #modal-root .kst-pi .bom-plik-nazwa { display: block; }
/* Rendery: pole „Dodaj rendery” i kafelki w dwóch kolumnach */
:root[data-ui="mobile"] #modal-root .kst-zd { flex-direction: column; gap: var(--s-1); }
:root[data-ui="mobile"] #modal-root .kst-rendery .construction-presentation-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root[data-ui="mobile"] #modal-root .kst-rendery .construction-presentation-thumb { height: auto; }
/* Stopka: dwa przyciski po prawej, nie na pół (wzór: .ramka.tel .ui-ok.l>footer) */
:root[data-ui="mobile"] #modal-root :is(.modal.construction-popup > footer, .construction-bubble-footer) { flex-wrap: nowrap; justify-content: flex-end; gap: var(--s-2); padding: var(--s-2) var(--s-4) calc(var(--s-2) + var(--bezpieczny-dol, 0px)); }
:root[data-ui="mobile"] #modal-root :is(.modal.construction-popup > footer, .construction-bubble-footer) > .button { flex: 0 0 auto; min-height: var(--h-control); height: var(--h-control); padding: 0 var(--s-3); font-size: var(--t-control); }   /* wzór: odstęp 12 px (Zapisz 150, Zamknij 77 px) */

/* === Telefon POZIOMO: dwie kolumny, nagłówek jednowierszowy ===================================================== */
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root :is(.modal.construction-popup, .construction-bubble) .construction-editor-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: var(--s-3); }
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root :is(.modal.construction-popup, .construction-bubble) > header { flex-wrap: nowrap; align-items: center; padding: var(--s-1) var(--s-2) var(--s-1) var(--s-4); }
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root :is(.modal.construction-popup, .construction-bubble) > header .kst-hs { order: 2; flex: 0 0 auto; justify-content: flex-end; }
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root :is(.modal.construction-popup, .construction-bubble) > header .kst-hs .kst-usun { margin-left: 0; }
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal.construction-popup > header p,
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root .construction-bubble-title small { display: none; }
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal.construction-popup > header h2 { font-size: var(--t-md); -webkit-line-clamp: 1; }
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root :is(.modal.construction-popup > footer, .construction-bubble-footer) { padding: var(--s-1) var(--s-3); }
/* Formularz okna bez własnego wcięcia (ogólna reguła telefonu dawała 16 px dookoła, panele stały 32 px od krawędzi) */
:root[data-ui="mobile"] #modal-root .modal.construction-popup > form { padding: 0; }