/* ============================================================================
   9-telefon/16-konstrukcja-w-design.css — TELEFON: okno Design z konstrukcją (DF2, 18.10.2026, wzór v99: Design.html #tel / #telp)
   ----------------------------------------------------------------------------
   Działa wyłącznie przy :root[data-ui="mobile"]. Komputer i tablet: css/4-widoki/25g-konstrukcja-w-design.css (tam też opis całości).
   Wzór telefonu: menu to JEDNA zwijana karta „Design A · Konstrukcje: N ⌄” (44 px); rozwinięta pokazuje pod sobą panel z kartą Design,
   nagłówkiem „Konstrukcje +” i listą konstrukcji. Otwarta konstrukcja: karta pokazuje jej nazwę, pod nią plakietki i kosz, dwie kolumny
   (pion: jedna), stopka „Zamknij / Zapisz konstrukcję”. Okno jest od krawędzi do krawędzi (tak jak całe okno Design — 2-okna.css §1).
   Wymiary menu i stopki przekazuje dymkowi okna/konstrukcja-w-design.js (--dsg-s = dół menu, --dsg-d = wysokość stopki okna).
   ============================================================================ */

/* === 1. MENU: zwijana karta + panel =============================================================================== */
:root[data-ui="mobile"] #modal-root .design-construction-sidebar { display: flex; flex-direction: column; gap: var(--s-2); max-height: none; overflow: visible; padding: 0; border: 0; background: transparent; }
:root[data-ui="mobile"] #modal-root .dsg-mob { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: var(--h-control); padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
:root[data-ui="mobile"] #modal-root .dsg-mob-t { display: flex; flex: 1 1 auto; min-width: 0; }
:root[data-ui="mobile"] #modal-root .dsg-mob-t b { overflow: hidden; font-size: var(--t-base); font-weight: var(--w-strong); text-overflow: ellipsis; white-space: nowrap; }
:root[data-ui="mobile"] #modal-root .dsg-mob-l { flex: none; color: var(--text-faint); font-size: var(--t-xs); white-space: nowrap; }
:root[data-ui="mobile"] #modal-root .dsg-mob .icon { flex: none; width: 16px; height: 16px; transition: transform var(--czas-arkusz, .15s); }
:root[data-ui="mobile"] #modal-root .design-construction-sidebar[data-otw] .dsg-mob .icon { transform: rotate(180deg); }
:root[data-ui="mobile"] #modal-root .design-sidebar-list { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
:root[data-ui="mobile"] #modal-root .design-construction-sidebar:not([data-otw]) .design-sidebar-list { display: none; }
:root[data-ui="mobile"] #modal-root .design-sidebar-list .design-type-popover { position: static; max-height: 260px; }
:root[data-ui="mobile"] #modal-root .design-construction-card-list { display: flex; flex-direction: column; gap: var(--s-1); overflow: visible; }
:root[data-ui="mobile"] #modal-root .design-construction-card-hint { font-size: var(--t-xs); }
@media (prefers-reduced-motion: reduce) { :root[data-ui="mobile"] #modal-root .dsg-mob .icon { transition: none; } }

/* === 2. OKNO DESIGN Z OTWARTĄ KONSTRUKCJĄ: dymek od dołu menu do dołu okna ========================================== */
/* przełącznik statusu Design w nagłówku okna nie ma sensu przy konstrukcji (wzór: nagłówek = tytuł, „?” i ×) — znika razem z drugim rzędem nagłówka */
:root[data-ui="mobile"] #modal-root .modal.design-editor-modal:has(> .construction-bubble:not(.bez-menu)) > header > .dsg-st { display: none; }
:root[data-ui="mobile"] #modal-root .construction-bubble:not(.bez-menu) {
  inset: var(--dsg-s, 0px) 0 0 0; width: auto; transform: none;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  border: 0; border-radius: 0; background: var(--okno-tlo); box-shadow: none; overflow: hidden;
}
/* nazwa konstrukcji jest w karcie menu — nagłówek dymka to rząd: plakietki po lewej, kosz po prawej, pod spodem kreska (wzór: .kst-g) */
:root[data-ui="mobile"] #modal-root .construction-bubble:not(.bez-menu) > header { position: relative; flex-wrap: nowrap; align-items: center; padding: var(--s-3) var(--s-4) var(--s-2); background: var(--okno-tlo); }
:root[data-ui="mobile"] #modal-root .construction-bubble:not(.bez-menu) > header::after { content: ""; position: absolute; right: var(--s-4); bottom: 0; left: var(--s-4); height: 1px; background: var(--line); }
:root[data-ui="mobile"] #modal-root .construction-bubble:not(.bez-menu) > header > .construction-bubble-title { display: none; }
:root[data-ui="mobile"] #modal-root .construction-bubble:not(.bez-menu) > header :is(.modal-help-btn, [data-action="close-construction-bubble"]) { display: none; }
:root[data-ui="mobile"] #modal-root .construction-bubble:not(.bez-menu) > header > .kst-hs { order: 0; flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-start; gap: var(--s-2); }
:root[data-ui="mobile"] #modal-root .construction-bubble:not(.bez-menu) > header > .kst-hs .kst-usun { margin-left: auto; }
:root[data-ui="mobile"] #modal-root .construction-bubble:not(.bez-menu) > form { padding: 0 var(--s-4) var(--s-3); background: var(--okno-tlo); }
:root[data-ui="mobile"] #modal-root .construction-bubble:not(.bez-menu) .construction-editor-grid { padding: var(--s-4) 0 0; }
:root[data-ui="mobile"] #modal-root .construction-bubble:not(.bez-menu) > .construction-bubble-footer { min-height: var(--dsg-d, 0px); }

/* === 3. STOPKA OKNA DESIGN WG WZORU: „Anuluj” po lewej, „Prezentacja” i „Zapisz zmiany” po prawej, jeden rząd, 44 px ============ */
:root[data-ui="mobile"] #modal-root .modal.design-editor-modal > footer .inline-actions { flex-wrap: wrap; align-items: center; gap: var(--s-2); }
:root[data-ui="mobile"] #modal-root .modal.design-editor-modal > footer .inline-actions > .button { flex: 0 0 auto; min-height: var(--h-control); height: var(--h-control); padding: 0 var(--s-3); font-size: var(--t-control); white-space: nowrap; }
:root[data-ui="mobile"] #modal-root .modal.design-editor-modal > footer .inline-actions > [data-action="close-modal"] { margin-right: auto; } :root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal.design-editor-modal > footer .inline-actions > .primary { margin-left: auto; }
:root[data-ui="mobile"] #modal-root .modal.design-editor-modal > footer .design-footer-presentation-button .dsg-gp-d { display: none; }
:root[data-ui="mobile"] #modal-root .modal.design-editor-modal > footer .design-footer-presentation-button .dsg-gp-m { display: inline; }
/* 24.10.2026 (przegląd telefonu v2): pionowo na wąskim ekranie (iPhone SE: stopka ma 384 px, iPhone 13: 401 px) cztery przyciski („Anuluj”, „Dla klienta”, „Podgląd”, „Zapisz zmiany”: razem ~436 px)
   nie mieściły się w jednym rzędzie — „Zapisz zmiany” spadał do drugiego. „Podgląd” zostaje samą ikoną (44 px; nazwa w aria-label i w podpowiedzi), akcja nie znika; od ~440 px szerokości stopki wraca napis.
   Zasada działa tylko przy czterech przyciskach (z „Dla klienta”) — przy trzech napis się mieści. */
:root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal.design-editor-modal > footer .inline-actions { container: stopka-design / inline-size; }
@container stopka-design (max-width: 440px) {
  :root[data-ui="mobile"] #modal-root .modal.design-editor-modal > footer .inline-actions:has(> [data-action="kp-dla-klienta"]) .design-footer-presentation-button { width: var(--h-control); padding: 0; justify-content: center; }
  :root[data-ui="mobile"] #modal-root .modal.design-editor-modal > footer .inline-actions:has(> [data-action="kp-dla-klienta"]) .design-footer-presentation-button .dsg-gp-m { display: none; }
}
/* stopka okna Design: 8 / 16 px jak we wzorze (61 px) — dymek konstrukcji przykrywa ją tą samą wysokością (--dsg-d) */
:root[data-ui="mobile"] #modal-root .modal.design-editor-modal > footer { padding: var(--s-2) var(--s-4) calc(var(--s-2) + var(--bezpieczny-dol)); }
/* przy otwartej konstrukcji „?” i × okna stoją przy prawej krawędzi także wtedy, gdy przełącznik statusu zniknął */
:root[data-ui="mobile"] #modal-root .modal.design-editor-modal:has(> .construction-bubble:not(.bez-menu)) > header > .modal-help-btn { margin-left: auto; }
/* telefon poziomo: plakietki po lewej, kosz po prawej (jak pionowo); dwie kolumny od krawędzi do krawędzi (wzór: Wymiary | Rendery 16 px od brzegu) */
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root .construction-bubble:not(.bez-menu) > header { padding: var(--s-3) var(--s-4) var(--s-2); }
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root .construction-bubble:not(.bez-menu) > header > .kst-hs { flex: 1 1 auto; justify-content: flex-start; }
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root .construction-bubble:not(.bez-menu) .construction-editor-grid { padding: var(--s-4) 0 0; }
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root .construction-bubble:not(.bez-menu) > header > .kst-hs .kst-usun { margin-left: auto; }
/* menu w siatce okna nie może się skurczyć poniżej swojej treści (telefon poziomo: rozwinięta lista była ucięta do połowy wiersza siatki) */
:root[data-ui="mobile"] #modal-root .design-construction-sidebar { min-height: auto; flex: none; }
/* rozwinięta lista nie zabiera całego ekranu (telefon poziomo: zostaje miejsce na dymek konstrukcji) — dłuższa lista przewija się w sobie */
:root[data-ui="mobile"] #modal-root .design-sidebar-list { max-height: max(calc(var(--h-control) * 3), calc(100dvh - 320px)); overflow-y: auto; overscroll-behavior: contain; }
/* kolejność w rozwiniętym panelu jak we wzorze: karta „Design A”, nagłówek „Konstrukcje +”, lista typów, lista konstrukcji; elementy się nie kurczą */
:root[data-ui="mobile"] #modal-root .design-sidebar-list > * { flex: none; }
:root[data-ui="mobile"] #modal-root .design-sidebar-list > .design-summary-card { order: 1; }
:root[data-ui="mobile"] #modal-root .design-sidebar-list > .design-sidebar-head { order: 2; }
:root[data-ui="mobile"] #modal-root .design-sidebar-list > .design-type-popover { order: 3; }
:root[data-ui="mobile"] #modal-root .design-sidebar-list > .design-construction-card-list { order: 4; }