/* ============================================================================
   25h-design-skorka-okna.css — OKNO DESIGN: skórka okna wg wzoru (runda 3, 18.10.2026)
   ----------------------------------------------------------------------------
   Wzór (PROJEKT-OKIEN\artefakt\Design.html): okno = powierzchnia (--pow), panel = powierzchnia + ramka 1 px (--linia), przycisk drugorzędny
   w stopce = powierzchnia + ramka --ramka (--line-strong), tło po najechaniu --pow-2. Program (skórka W1, 05-komponenty/19-modale-tresc) daje
   oknu szare tło (--okno-tlo = --bg), a panelom białe tło BEZ ramki. Tu, tylko w oknie Design i konstrukcji otwartej w nim, okno dostaje
   --okno-tlo = --surface (token zmieniony lokalnie, więc zmieniają się też stopka i dymek konstrukcji, które go czytają), a panele i ramka „Pliki”
   ramki z tokenów. Inne okna (Plany, kalkulator, kartoteki) nietknięte. Telefon: te same reguły (waga ID przebija reguły grup z 9-telefon).
   „?” w nagłówku, „+” przy „Konstrukcje” i „×” — 05-komponenty, 25-design-plany (tam, bo to przyciski wspólne).
   ============================================================================ */
/* okno = powierzchnia (wzór: .ui-ok tło --pow); kolor czyta stopka okna, dymek konstrukcji i przełączniki `.segmented` */
.modal.design-editor-modal { --okno-tlo: var(--surface); }
/* panel = powierzchnia + ramka (wzór: .ui-pan, 1 px --linia, róg 12): Dane / Zespół / Opis / Prezentacja oraz Wymiary / Zestawienie / Rendery */
#modal-root .modal.design-editor-modal :is(.dsg-tp > .form-panel, .construction-bubble:not(.bez-menu) :is(.construction-dimensions-panel, .construction-bom-panel, .kst-rendery)) { border-color: var(--line); }
/* ramka „Pliki” (wzór: .dsg-pl, 1 px --line-soft) — bez niej na tle okna = powierzchni znikałaby */
#modal-root .modal.design-editor-modal .dsg-pl { border-color: var(--line-soft); }
/* przycisk drugorzędny w stopce okna i w stopce konstrukcji (wzór: .btn — powierzchnia + ramka --line-strong): „Anuluj”, „Zamknij”, „Kopiuj link”, „Więcej ⋯”.
   Akcja główna (.primary) i „Generuj prezentację” (miękki akcent) mają własne tła. */
#modal-root .modal.design-editor-modal > footer .button:not(.primary, .design-footer-presentation-button),
#modal-root .modal.design-editor-modal > .construction-bubble:not(.bez-menu) > .construction-bubble-footer .button:not(.primary) { border-color: var(--line-strong); background: var(--surface); color: var(--text); }
#modal-root .modal.design-editor-modal > footer .button:not(.primary, .design-footer-presentation-button):hover:not(:disabled),
#modal-root .modal.design-editor-modal > .construction-bubble:not(.bez-menu) > .construction-bubble-footer .button:not(.primary):hover:not(:disabled) { background: var(--surface-2); }
/* kreska nad stopką = ramka panelu (wzór: border-top 1 px --linia; skórka W1 daje 8 % tekstu, na powierzchni różni się od ramek paneli) */
#modal-root .modal.design-editor-modal > footer,
#modal-root .modal.design-editor-modal > .construction-bubble:not(.bez-menu) > .construction-bubble-footer { border-top-color: var(--line); }
/* przełączniki w oknie (`.segmented`) liczyły tło z --okno-tlo (8 % tekstu); po zmianie okna na powierzchnię zostają przy tokenie wzoru (.ui-seg = --pow-3) */
.modal.design-editor-modal .segmented { background: var(--surface-3); }
/* runda 3b — „×” zamykające okno, „×” karty i „+” jak „?”: szare (--text-muted), kreska 1,8 px (wzór: .ui-ik .ic, stroke-width 1.8; program ma w maskach 2), róg 8.
   Kreska ikon tylko w oknie Design — maski wspólne (07-ikony) zostają, bo służą wszystkim oknom. */
#modal-root .modal.design-editor-modal > header .icon-button[data-action="close-modal"] { border-radius: var(--r-sm); color: var(--text-muted); }
.modal.design-editor-modal .icon-close { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.modal.design-editor-modal .icon-plus { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
#modal-root .modal.design-editor-modal > header .icon-button[data-action="close-modal"] .icon { width: 18px; height: 18px; }   /* wzór: ikona 18 px */
/* runda 3c — „×” karty SPRZEDANEJ konstrukcji (wzór: wyłączony, przygaszony ok. 0,4, podpowiedź „Sprzedana konstrukcja — usunięcie zablokowane”) */
.modal.design-editor-modal .design-construction-sidebar .design-construction-card-remove:disabled { opacity: .4; background: transparent; cursor: not-allowed; }   /* wzór (zmierzone): wyłączony „×” karty = opacity .4, kursor not-allowed, kolor zostaje jak aktywnego (czerwony --bl, nie szary) */