/* ============================================================================
   25c-design-okno.css — OKNO DESIGN wg artefaktu v99 (M4, 18.10.2026)
   ----------------------------------------------------------------------------
   Nagłówek ze statusem „W toku | Gotowy”, trzy zakładki (podkreślenie), panele „Dane Design” i „Zespół i harmonogram” (chipy projektantów,
   przydział konstrukcji, oś czasu −/30 dni/+), „Opis i pliki” (edytor na całą wysokość + ramka „Pliki”), „Prezentacja” (obrazy konstrukcji).
   Wzór: PROJEKT-OKIEN\artefakt\okna_css.txt B1–B4, B8, B15, B19, B20, B22, B37, B38 (tokeny artefaktu → tokeny programu: --ak = --accent,
   --linia = --line, --pow = --surface, --h-k = --h-control, --t-2 = --t-sm …). Menu i lista „+” używają .pln-mn (25b), legenda osi — .pln-leg,
   oś — .pos-* (25b, rysuje ją okna/plany-os.js). Telefon: css/9-telefon/2c-design-okno.css. Boczne menu konstrukcji — 25-design-plany.css.
   ============================================================================ */
/* ikona „−” (w 07-ikony.css jest tylko „+”) — para dla przycisków skali osi */
.icon-minus { 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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
/* --- położenie i wysokość okna (dół przy dole ekranu, 24 px od góry, górne rogi 16 px) — wspólna zasada dużych okien: 20-okna-polozenie.css.
   Szerokość 1180 px (wzór) — 25m-design-szerokosc-okna.css. Telefon = pełny ekran (2-okna.css). --- */
/* boczne menu konstrukcji: wzór ma 232 px (komputer) i 200 px (tablet), program 284 px (token --bok-design niesie też położenie dymku i okna konstrukcji w Design) */
:root:not([data-ui="mobile"]) :is(.modal.design-modal, .modal.construction-in-design) { --bok-design: 232px; }
:root[data-ui="tablet"] :is(.modal.design-modal, .modal.construction-in-design) { --bok-design: 200px; }
/* karta konstrukcji w menu (odznaka, nazwa zawijana do 2 linii, plakietka, ×) — 25g-konstrukcja-w-design.css §2 */
/* nagłówek wg wzoru: elementy przy górnej krawędzi, odstępy 16 / 12 / 12 / 24 px (telefon: 2c-design-okno.css) */
:root:not([data-ui="mobile"]) .modal.design-editor-modal > header { align-items: flex-start; gap: var(--s-2); padding: var(--s-4) var(--s-3) var(--s-3) var(--s-5); }
.modal.design-editor-modal > header h2 { line-height: var(--lh-base); }
.modal.design-editor-modal > header p { margin: 2px 0 0; font-size: var(--t-sm); color: var(--text-faint); }   /* wzór: podtytuł 13 px, --tusz-3 */
/* --- ciało okna: jedna kolumna, zakładki nad panelem --- */
.dsg-wr { display: flex; flex: 1 0 auto; flex-direction: column; gap: var(--s-3); min-width: 0; }
.dsg-tabs { overflow-x: auto; scrollbar-width: none; }
.dsg-tabs::-webkit-scrollbar { display: none; }
.dsg-tab { flex: none; font-size: var(--t-base); font-weight: var(--w-bold); cursor: pointer; }   /* wzór: .dsg-tab = --t-3 (14 px), 600 */
/* panele okna (Dane / Zespół / Opis) i ramka „Pliki”: róg 12 px i odstęp 12 px jak we wzorze (skórka W1 daje 16 px i 8×12) */
#modal-root .dsg-tp > .form-panel { padding: var(--s-3); border-radius: var(--r); }
#modal-root .dsg-pl { border-radius: var(--r); }
.dsg-tp { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.dsg-tp[hidden] { display: none; }
.dsg-tp:not([hidden]) { flex: 1 0 auto; }
.dsg-tp > .form-panel { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; margin: 0; }
.dsg-tp > .form-panel > .form-panel-head { margin: 0; }
.dsg-sp { flex: 1; }
.dsg-tp small b { color: var(--text); font-size: inherit; font-weight: var(--w-bold); }
.dsg-pod { margin: 0; color: var(--text-muted); font-size: var(--t-sm); line-height: 1.45; }
.dsg-pod.bl { color: var(--danger); }
.dsg-pusto { color: var(--text-faint); font-size: var(--t-sm); }
.dsg-et { color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); }
/* --- status w nagłówku okna: po prawej, przed „?” i ✕ --- */
.dsg-st { flex: none; margin-left: auto; margin-right: var(--s-2); }
.modal > header > .dsg-st ~ .modal-help-btn { margin-left: 0; }
.dsg-st > button { display: inline-flex; align-items: center; gap: var(--s-1); cursor: pointer; }
.dsg-st > button .icon { width: 16px; height: 16px; }
/* kształt jak we wzorze (.ui-seg.dsg-st): róg 12 px, 3 px odstępu, tło --surface-3 (reguła ogólna `.modal .segmented` daje róg 8 px i brak odstępu) */
.segmented.dsg-st:has(> [data-dsg-st]) { gap: 3px; border-radius: var(--r); background: var(--surface-3); }
.dsg-st > [data-dsg-st="W toku"][aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); box-shadow: none; }
.dsg-st > [data-dsg-st="Gotowy"][aria-pressed="true"] { background: var(--ok-soft); color: var(--ok); box-shadow: none; }
/* --- „Dane Design” --- */
.dsg-wer { margin-left: auto; color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-medium); }   /* wzór: dopiski nagłówków paneli 12 px / 500 / --tusz-3 */
.dsg-tp .form-panel-head > small { color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-medium); }
#modal-root .dsg-tp label:not(.upload-button, .rich-image-button, .button) { font-weight: var(--w-bold); }   /* wzór: etykiety pól 600 (reguła ogólna: 500) */
.dsg-tp .currency-field > span { color: var(--text-faint); font-size: var(--t-xs); }
.dsg-wer b { color: var(--text); }
.dsg-wiersz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px); gap: var(--s-3) var(--s-5); align-items: end; }
.dsg-typ-f > label .wym { color: var(--danger); }
.dsg-typ { display: flex; flex-wrap: wrap; width: 100%; }
/* wzór (.ui-seg.dsg-typ): róg 12 px, tło --surface-3, wybrany typ w kolorze akcentu */
.segmented.dsg-typ { border-radius: var(--r); background: var(--surface-3); }
.modal .segmented.dsg-typ > [aria-pressed="true"] { color: var(--accent-strong); }
.dsg-typ > button { flex: 1 1 auto; min-height: var(--h-control); cursor: pointer; }
.dsg-typ.field-required-missing { box-shadow: 0 0 0 2px var(--danger); }
.dsg-bud-f .field-hint { min-height: 0; }
/* --- „Zespół i harmonogram” --- */
.dsg-zesp { --dsg-chip: var(--h-control); }   /* wzór: chip = wysokość kontrolki (36 px na komputerze, 44 px na dotyku) */
.dsg-ost { display: inline-flex; align-items: center; gap: var(--s-2); height: 26px; padding: 0 var(--s-2); border-radius: var(--r-pill); background: var(--surface-3); color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); white-space: nowrap; }
.dsg-ost[hidden] { display: none; }
.dsg-ost > i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dsg-ost.got { background: var(--ok-soft); color: var(--ok); }
.dsg-ost.uw { background: var(--warn-soft); color: var(--warn-strong); }
.dsg-zr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: var(--s-3) var(--s-5); align-items: start; }
.dsg-term { display: flex; flex-direction: column; gap: var(--s-3); }
.dsg-plan2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); }
.dsg-zatw { width: 100%; justify-content: center; }
#modal-root .dsg-zatw:not(:disabled) { border-color: transparent; background: var(--accent); color: var(--on-accent); }   /* wzór: „Zatwierdź plan” (gdy jest co zatwierdzić) = przycisk główny (.btn.gl) */
#modal-root .dsg-zatw:hover:not(:disabled) { background: var(--accent-hover); }
.dsg-zatw .icon { width: 16px; height: 16px; }
/* chipy projektantów: kółko z inicjałami + imię i nazwisko w DWÓCH liniach; „+” na końcu */
.dsg-zav-w { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; min-width: 0; }
/* Projektant z bardzo długą nazwą: kolumna pola ma szerokość wiersza (nie treści), nazwa w chipie kończy się wielokropkiem i nie wchodzi pod pola „Termin od / do”. */
.dsg-ekipa { grid-template-columns: minmax(0, 1fr); }
.dsg-zav { display: inline-grid; place-items: center; flex: none; width: var(--dsg-chip); height: var(--dsg-chip); padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-faint); font: inherit; cursor: pointer; }
.dsg-zav:hover, .dsg-zav:focus-visible, .dsg-zav[aria-expanded="true"] { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.dsg-zav.dod { border: 1px dashed var(--line-strong); }
.dsg-zav.dod:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); box-shadow: none; }
.dsg-zav:disabled { opacity: .4; cursor: default; }
.dsg-zav .icon { width: 18px; height: 18px; }
.dsg-zav.im { display: inline-flex; align-items: center; gap: var(--s-2); width: auto; max-width: 100%; min-width: var(--dsg-chip); padding: 0 var(--s-3) 0 var(--s-1); border-radius: var(--dsg-chip); background: var(--surface-2); color: var(--text); text-align: left; }
.dsg-zv-n { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.dsg-zv-n b { overflow: hidden; font-size: var(--t-sm); font-weight: var(--w-bold); text-overflow: ellipsis; white-space: nowrap; }
.dsg-zv-n small { overflow: hidden; color: var(--text-muted); font-size: var(--t-xs); text-overflow: ellipsis; white-space: nowrap; }
.avatar.dsg-aw { border: 0; font-weight: var(--w-strong); letter-spacing: -.04em; }
.avatar.dsg-aw-28 { --avatar-d: 28px; }
.avatar.dsg-aw-32 { --avatar-d: 32px; }
.avatar.dsg-aw-36 { --avatar-d: 36px; font-size: var(--t-base); }   /* wzór: inicjały w chipie 14 px */
/* lista „+” i menu chipa: .pln-mn (25b) + awatar i dwie linie */
.dsg-mn button { padding-block: var(--s-1); }
.dsg-mn button > .dsg-mn-n { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.dsg-mn button > .dsg-mn-n small { color: var(--text-faint); font-size: var(--t-xs); }
.dsg-mn button .icon { color: inherit; }
.dsg-mn .tyt { padding-top: var(--s-2); }
.dsg-mn { max-height: min(60vh / var(--skala-ui), 420px); overflow-y: auto; }
/* przydział konstrukcji (zwijany) */
.dsg-przyd { display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line-soft); }
.dsg-przyd:empty { display: none; }
.dsg-pr-g { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.dsg-pr-t { display: inline-flex; align-items: center; gap: var(--s-2); height: var(--h-control); padding: 0 var(--s-2) 0 0; border: 0; border-radius: var(--r-sm); background: transparent; font: inherit; color: inherit; cursor: pointer; }
.dsg-pr-t:hover { color: var(--accent); }
.dsg-pr-t:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.dsg-pr-t > .icon { width: 16px; height: 16px; color: var(--text-faint); transition: transform var(--szybko) ease-out; }
.dsg-pr-t[aria-expanded="true"] > .icon { transform: rotate(180deg); }
.dsg-pr-l { color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-bold); }
.dsg-pr-a { display: flex; flex-wrap: wrap; gap: 2px; justify-content: flex-end; }
.dsg-prl { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.dsg-prw { display: flex; align-items: center; gap: var(--s-3); min-height: calc(var(--h-control) + var(--s-2)); padding: var(--s-1) var(--s-3); border-top: 1px solid var(--line-soft); }
.dsg-prw:first-child { border-top: 0; }
.dsg-prw:not(.ok) { background: color-mix(in srgb, var(--warn) 6%, var(--surface)); }
.dsg-niep { margin-left: var(--s-1); color: var(--warn-strong); font-weight: var(--w-medium); }
.dsg-niep::before { content: "— "; }
.dsg-prw.brak { box-shadow: inset 0 0 0 2px var(--danger); background: var(--danger-soft); }
.dsg-prw.brak .dsg-niep { color: var(--danger); }
.dsg-prn { flex: 1; min-width: 0; overflow: hidden; font-size: var(--t-sm); font-weight: var(--w-bold); text-overflow: ellipsis; white-space: nowrap; }
.dsg-zav.m { width: var(--h-control); height: var(--h-control); }
.dsg-prw .dsg-zav.m .avatar { opacity: .4; }
.dsg-prw .dsg-zav.m:hover:not(:disabled) .avatar, .dsg-prw .dsg-zav.m.akt .avatar { opacity: 1; }
.dsg-prw .dsg-zav.m.akt { box-shadow: 0 0 0 2px var(--accent); }
.dsg-prw .dsg-zav.m:disabled .avatar { opacity: 1; }
/* oś czasu: nawigacja i legenda; sama oś — .pos-* (25b) */
.dsg-har { display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line-soft); min-width: 0; }
.dsg-har > [data-design-timeline-preview] { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.dsg-os-nar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.dsg-os-zoom { display: inline-flex; align-items: center; gap: var(--s-1); margin-left: auto; }
.dsg-os-zoom .button.mini { height: var(--h-control); padding: 0 var(--s-3); font-size: var(--t-base); background: var(--accent-soft); color: var(--accent-strong); border-color: transparent; }   /* wzór: „30 dni” = .btn.miekki (14 px, odstęp 12 px, miękki akcent) */
.dsg-os-info { min-width: 0; }
.dsg-os-info b { color: var(--text); }
.dsg-ik { display: inline-grid; place-items: center; flex: none; width: var(--h-control); height: var(--h-control); padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); cursor: pointer; }
.dsg-ik:hover { background: var(--surface-3); color: var(--text); }
.dsg-ik:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dsg-ik .icon { width: 16px; height: 16px; }
.dsg-har .pos { margin-top: 0; }
/* etykieta osoby (kółko + nazwa) stoi przy PIERWSZYM torze jej wiersza — osoba z wieloma pracami ma kilka torów (--pos-wr = wysokość toru z plany-os.js),
   a nazwa i rola mają po jednej linii (długie nazwy nie nachodzą na sąsiedni wiersz) */
.dsg-har .pos-lo { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: var(--pos-wr) minmax(0, 1fr); align-items: center; gap: 0 var(--s-2); }
.dsg-har .pos-lo > * { grid-row: 1; }
.dsg-har .pos-lo > span:not(.avatar) { overflow: hidden; }
.dsg-har .pos-lo small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsg-har .pos-lo .avatar { display: inline-grid; place-items: center; flex: none; flex-direction: row; }
.dsg-har .pos-pas.wyb > span { padding: 0 var(--s-2) 0 14px; }
.dsg-har .pos-pas.inne > span { padding: 0 var(--s-2); }
.dsg-har .pos-pas.wyb small { color: inherit; }
.dsg-har .pos-uch { opacity: .3; transition: opacity var(--szybko); }
.dsg-har .pos-pas:hover .pos-uch, .dsg-har .pos-pas:focus-visible .pos-uch { opacity: .7; }
.dsg-har .pos-pas.wyb { touch-action: pan-x pan-y; }
.dsg-har .pos-pas.chwyt { outline: 2px solid var(--text); outline-offset: 2px; box-shadow: var(--cien-2); }
.dsg-har .pos-hd span { font-variant-numeric: tabular-nums; }
.dsg-os-leg { margin-top: 0; align-items: center; }
.dsg-os-leg i.l-rob { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); border: 1px dashed var(--accent); }
/* --- „Opis i pliki”: edytor na całą wysokość, pod nim ramka „Pliki” --- */
.dsg-opis { gap: var(--s-3); }
.dsg-tp:not([hidden]) > .dsg-opis { flex: 1 1 auto; }
.dsg-opis-ed { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 260px; }
.dsg-opis-ed > .rich-editor { flex: 1 1 auto; min-height: 0; }
/* przyciski paska edytora wg wzoru (.ui-ed-p .ui-ik): kwadrat wysokości kontrolki (36 px; 44 px na dotyku), odstęp 1×6 px, krój zwykły, kolor przyciszony, róg 8 px
   (reguła ogólna `.rich-toolbar button` daje 30 px, 4 px i napis w kolorze tekstu; stan aktywny zostaje programu) */
#modal-root .dsg-opis-ed .rich-toolbar :is(button, .rich-image-button, .rich-attach-button):not(.is-active, .rich-aa-toggle) { min-width: var(--h-control); height: var(--h-control); padding: 1px 6px; border-radius: var(--r-sm); color: var(--text-muted); font-weight: var(--w-regular); }
/* „Tekst ⌄” i „Skala ⌄” jak we wzorze (.ui-ed-l): bez ramki i tła, napis przyciszony, wąskie (~58 px) — przy szerokich selectach pasek tabletu zawijał się do dwóch wierszy */
#modal-root .dsg-opis-ed .rich-toolbar select { height: var(--h-control); padding: 0 var(--s-5) 0 var(--s-1); border-color: transparent; background-color: transparent; background-position: right var(--s-1) center; color: var(--text-muted); font-weight: var(--w-regular); }
:root:not([data-ui="mobile"]) #modal-root .dsg-opis-ed .rich-toolbar select { font-size: var(--t-base); }
:root[data-ui="tablet"] #modal-root .dsg-opis-ed .rich-toolbar { gap: 0; }   /* wzór: tablet bez odstępu między przyciskami paska */
#modal-root .dsg-opis-ed .rich-toolbar :is(strong, em, u) { font-size: var(--t-base); font-weight: var(--w-strong); }   /* wzór: B / I / U jako <b> 14 px / 700 */
.dsg-pl { display: flex; flex-direction: column; gap: var(--s-2); flex: none; padding: var(--s-3) 0 0; border-top: 1px solid var(--line-soft); border-radius: 0; }
.dsg-pl.is-dragover, .dsg-pl.is-uploading { border-top-color: var(--accent); background: var(--accent-soft); }
.dsg-pl-g { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.dsg-pl-g h4 { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--t-base); font-weight: var(--w-bold); }   /* wzór: „Pliki” 14 px (.dsg-pl-g h4 = --t-3) */
.dsg-n { display: inline-grid; place-items: center; min-width: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); line-height: 1.5; }
.dsg-pl-q { width: 220px; margin: 0; }
.dsg-pl-dodaj { margin: 0; padding: 0 var(--s-3); background: var(--accent-soft); color: var(--accent-strong); border-color: transparent; }   /* wzór: „Dodaj pliki” = .btn.miekki (odstęp 12 px, miękki akcent) */
.dsg-pl-zip { padding: 0 var(--s-3); }
.dsg-pl-dodaj .icon, .dsg-pl-g .button .icon { width: 16px; height: 16px; }
/* stopka wg wzoru (komputer, tablet): „Anuluj” po lewej, „Generuj prezentację” i „Zapisz zmiany” po prawej */
:root:not([data-ui="mobile"]) .design-editor-modal > footer > .inline-actions { width: 100%; }
:root:not([data-ui="mobile"]) .design-editor-modal > footer > .inline-actions > [data-action="close-modal"] { margin-right: auto; }
/* przyciski stopki okna: odstęp 12 px jak we wzorze (Anuluj 68, Zapisz 120 px) */
.design-editor-modal .inline-actions > :is(.button, button, .primary-button) { padding-inline: var(--s-3); }
.dsg-pl-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--s-2); align-content: start; height: calc(3 * var(--h-control) + 6 * var(--s-2)); overflow-y: auto; padding-right: var(--s-1); }
.dsg-pl-p { grid-column: 1 / -1; align-self: center; margin: 0; text-align: center; color: var(--text-faint); font-size: var(--t-sm); }
.dsg-pw { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-2); min-height: var(--h-control); padding: var(--s-1) var(--s-1) var(--s-1) var(--s-2); border-radius: var(--r-sm); background: var(--surface-2); }
.dsg-pi { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); font-size: var(--t-xs); font-weight: var(--w-strong); }
.dsg-pi.pdf { background: var(--danger-soft); color: var(--danger); }
.dsg-pi .icon { width: 18px; height: 18px; }
.dsg-pt { display: flex; flex-direction: column; min-width: 0; }
.dsg-pt .ell { overflow: hidden; color: var(--text); font-size: var(--t-md); font-weight: var(--w-strong); text-overflow: ellipsis; white-space: nowrap; }
.dsg-pt small { color: var(--text-faint); font-size: var(--t-xs); }
.dsg-ik.us { color: var(--danger); }   /* wzór: kosz pliku w kolorze błędu (.ui-ik.us) */
.dsg-ik.us:hover { background: var(--danger-soft); color: var(--danger); }
/* --- „Prezentacja”: obrazy konstrukcji --- */
.dsg-obr { display: flex; flex-direction: column; gap: var(--s-3); }
.dsg-og { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.dsg-og-g { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.dsg-og-g b { min-width: 0; overflow: hidden; font-size: var(--t-md); text-overflow: ellipsis; white-space: nowrap; }
.dsg-og-g small { flex: none; color: var(--text-faint); font-size: var(--t-xs); white-space: nowrap; }
/* kafelki obrazów (.dsg-mp-t) i reszta panelu „Prezentacja klienta” — 25l-design-prezentacja-klienta.css */
/* --- boczne menu (komputer i tablet): najpierw karta „Design A”, pod nią nagłówek „Konstrukcje +” i lista (jak we wzorze); lista typów po „+”
   rozwija się tuż pod nagłówkiem (komórka listy). Telefon: 9-telefon/2-okna.css (nagłówek nad rzędem chipów). --- */
:root:not([data-ui="mobile"]) .design-construction-sidebar .design-summary-card { grid-row: 1; }
:root:not([data-ui="mobile"]) .design-construction-sidebar .design-sidebar-head { grid-row: 2; }
:root:not([data-ui="mobile"]) .design-construction-sidebar .design-construction-card-list { grid-row: 3; }
:root:not([data-ui="mobile"]) .design-construction-sidebar .design-type-popover { grid-row: 3; grid-column: 1; top: 0; right: var(--s-2); left: 0; }
/* --- tablet i wąskie okno: pola jedno pod drugim --- */
@media (max-width: 1180px) {
  .dsg-wiersz, .dsg-zr { grid-template-columns: minmax(0, 1fr); }
}
:root[data-ui="tablet"] .dsg-wiersz, :root[data-ui="tablet"] .dsg-zr { grid-template-columns: minmax(0, 1fr); }
/* na dotyku jedno przewijanie w oknie — lista plików rośnie z treścią */
:root:not([data-ui="desktop"]) .dsg-pl-l { height: auto; max-height: none; overflow: visible; }