/* ============================================================================
   25m-design-szerokosc-okna.css — szerokość okna Design na komputerze i tablecie wg wzoru (GUI-DESIGN-FIX5, 18.10.2026)
   Wzór (Design.html, Konstrukcja.html, zmierzone na żywo): okno 1180 px, wyśrodkowane; gdy ekran węższy — ekran − 24 px (tablet 1000 px);
   dół okna przy dole ekranu, 24 px od góry (to robi 25c-design-okno.css). Wcześniej „cały ekran” (--okno-w: 100vw, dla osi czasu);
   decyzja właściciela 18.10.2026: wzór wygrywa — oś czasu i zespół układają się w 1180 px jak we wzorze. Telefon = pełny ekran (2-okna.css).
   Dotyczy też okna konstrukcji otwartego z Designu (to samo okno, zmienia się tylko prawa strona).
   ============================================================================ */
:root:not([data-ui="mobile"]) :is(.modal.design-editor-modal, .modal.construction-in-design) { --okno-w: 1180px; }

/* === Rama okna wg wzoru (komputer, tablet) — przy tej samej szerokości okna widać różnice w odstępach ramy; zmierzone na żywo:
   karta „Design” w menu x = 16, menu 232 px (tablet 200), odstęp 16, ciało okna do prawej krawędzi − 16 (900 px przy 1180), góra 12 px,
   menu bez linii z prawej, stopka 8 / 16 (53 px), nagłówek: „?” → status → ✕. Kolumna menu = 232 + 16 (lewy margines) + 16 (odstęp). === */
:root:not([data-ui="mobile"]) .modal.design-editor-modal { --bok-design: 264px; }
:root[data-ui="tablet"] .modal.design-editor-modal { --bok-design: 232px; }
:root:not([data-ui="mobile"]) .modal.design-editor-modal .design-construction-sidebar { padding: var(--s-3) var(--s-4) var(--s-2); border-right: 0; }
:root:not([data-ui="mobile"]) .modal.design-editor-modal .design-editor-body { padding: var(--s-3) var(--s-4) var(--s-3) 0; }
:root:not([data-ui="mobile"]) #modal-root .modal.design-editor-modal > footer { padding: var(--s-2) var(--s-4); }
:root:not([data-ui="mobile"]) .modal.design-editor-modal > header > .modal-help-btn { order: 1; margin-left: auto; }
:root:not([data-ui="mobile"]) .modal.design-editor-modal > header > .dsg-st { order: 2; margin-left: 0; }
:root:not([data-ui="mobile"]) .modal.design-editor-modal > header > [data-action="close-modal"] { order: 3; }
/* nagłówki paneli okna: 14 px / 700, wysokość linii 1,45 (wzór: .ui-pan > h3) */
.modal.design-editor-modal .dsg-tp > .form-panel > .form-panel-head h3 { font-weight: var(--w-strong); line-height: var(--lh-base); }
/* nagłówek okna: kreska pod nagłówkiem (1 px, --line) i krój tytułu jak we wzorze (Bricolage Grotesque, 19 px / 600) — komputer, tablet, telefon */
#modal-root .modal.design-editor-modal > header { border-bottom: 1px solid var(--line); }
#modal-root .modal.design-editor-modal > header h2 { font-family: var(--font-tytul); letter-spacing: var(--ls-tytul); }
:root:not([data-ui="mobile"]) .modal.design-editor-modal > header > .dsg-st { margin: 0; }
/* menu: między kartą „Design” a nagłówkiem „Konstrukcje” 12 px (wzór), dalej 8 px */
:root:not([data-ui="mobile"]) .modal.design-editor-modal .design-construction-sidebar .design-sidebar-head { margin-top: var(--s-1); }
/* telefon: poziomo — kolejność w nagłówku jak na komputerze („?” → status → ✕); pionowo — tytuł przy górnej krawędzi (wzór) */
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal.design-editor-modal > header > .modal-help-btn { order: 1; margin-left: auto; }
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal.design-editor-modal > header > .dsg-st { order: 2; margin: 0; }
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal.design-editor-modal > header > [data-action="close-modal"] { order: 3; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal.design-editor-modal > header { align-items: flex-start; }
/* telefon: odstęp 12 px nad kartą menu i nad zakładkami (wzór; było 16 pionowo i 8 poziomo) */
:root[data-ui="mobile"] #modal-root .modal.design-editor-modal > form { padding-top: var(--s-3); }
:root[data-ui="mobile"] #modal-root .modal.design-editor-modal .design-editor-body { padding-top: var(--s-3); }
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal.design-editor-modal > form#design-form { padding-top: var(--s-3); }
/* konstrukcja w oknie Design (dymek): treść od x = kolumna menu (bez dodatkowego wcięcia 8 px), 12 px pod nagłówkiem okna, 16 px odstępu pod nagłówkiem
   konstrukcji, stopka 8 / 16 jak stopka okna (wzór: .kst-g, .kst, stopka 53 px) */
@media (min-width: 981px) {
  :root:not([data-ui="mobile"]) #modal-root .construction-bubble:not(.bez-menu) > header { padding: var(--s-3) var(--s-4) var(--s-3) 0; }
  :root:not([data-ui="mobile"]) #modal-root .construction-bubble:not(.bez-menu) > header::after { left: 0; }
  :root:not([data-ui="mobile"]) #modal-root .construction-bubble:not(.bez-menu) > form { padding: 0 var(--s-4) var(--s-3) 0; }
  :root:not([data-ui="mobile"]) #modal-root .construction-bubble:not(.bez-menu) .construction-editor-grid { padding-top: var(--s-4); }
  :root:not([data-ui="mobile"]) #modal-root .construction-bubble:not(.bez-menu) > .construction-bubble-footer { padding: var(--s-2) var(--s-4); }
}
@media (min-width: 981px) {
  /* przy otwartej konstrukcji status Design znika z nagłówka (wzór: nagłówek robi się niższy o różnicę, tablet 6 px) — zamiast samego ukrycia */
  :root:not([data-ui="mobile"]) .modal.design-editor-modal:has(> .construction-bubble:not(.bez-menu)) > header > .dsg-st { display: none; }
  :root:not([data-ui="mobile"]) #modal-root .construction-bubble:not(.bez-menu) > header { padding-bottom: calc(var(--s-3) + 1px); }
  :root:not([data-ui="mobile"]) #modal-root .construction-bubble:not(.bez-menu) .construction-editor-grid { padding-top: calc(var(--s-4) + 1px); }
}