/* ============================================================================
   25u-design-certyfikaty.css — karta „Certyfikaty materiałów” i wiersz „Atesty konstrukcji” w zakładce „Prezentacja” okna Design
   (20.10.2026). Skrypt: js/okna/design-certyfikaty.js. Klocki wzoru (.ui-st, .ui-ost, .segmented, .button.mini) są z 11-klocki-wzoru.css
   i 03-kontrolki.css; tu tylko układ karty. Wszystko na tokenach; telefon: css/9-telefon/26-design-certyfikaty.css.
   ============================================================================ */
.dsg-cert { gap: var(--s-3); }
.dsg-cert-tr { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.dsg-cert h4 { margin: 0; color: var(--text); font-size: var(--t-sm); font-weight: var(--w-strong); }
.dsg-cert-sum { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.dsg-cert-sum .ui-st { height: auto; padding: var(--s-1) var(--s-2); white-space: normal; }
.dsg-cert .ui-ost { margin: 0; }
.dsg-cert-uwagi summary { cursor: pointer; color: var(--warn-strong); font-size: var(--t-sm); font-weight: var(--w-bold); }
.dsg-cert-uwagi ul { margin: var(--s-1) 0 0; padding-left: var(--s-4); color: var(--text-muted); font-size: var(--t-sm); }
.dsg-cert-uwagi li { display: list-item; list-style: disc; }
/* pasek „Pokaż materiały” + filtr */
.dsg-cert-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.dsg-cert-poka[aria-expanded="true"] .icon { transform: rotate(180deg); }
.dsg-cert-f { flex: none; }
/* wiersz materiału / książki: nazwa · certyfikaty · co trafi do książki · akcja (zawija się bez progów ekranu) */
.dsg-cert-l { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: 0; }
.dsg-cert-w { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); min-width: 0; padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.dsg-cert-m, .dsg-cert-cc, .dsg-cert-k { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.dsg-cert-m { flex: 1 1 calc(var(--s-6) * 4); }
.dsg-cert-cc { flex: 1 1 calc(var(--s-6) * 5); align-items: flex-start; }
.dsg-cert-k { flex: 1 1 calc(var(--s-6) * 3); }
.dsg-cert-a { display: flex; flex: 0 0 calc(var(--s-6) * 4.5); justify-content: flex-end; }   /* kolumna akcji o stałej szerokości — kolumny w wierszach stoją równo */
.dsg-cert-m b { overflow: hidden; color: var(--text); font-size: var(--t-sm); font-weight: var(--w-bold); text-overflow: ellipsis; white-space: nowrap; }
.dsg-cert-w small { color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-regular); }
.dsg-cert-w small.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsg-cert-uw { color: var(--warn-strong); }
.dsg-cert-w small.dsg-cert-uw { color: var(--warn-strong); }
.dsg-cert-c { display: inline-block; max-width: 100%; overflow: hidden; padding: var(--s-1) var(--s-2); border-radius: var(--r-pill); background: var(--ok-soft); color: var(--ok); font-size: var(--t-xs); font-weight: var(--w-bold); text-overflow: ellipsis; white-space: nowrap; }
.dsg-cert-c.brak { background: var(--warn-soft); color: var(--warn-strong); }
/* linijka o książce (stan; generowanie jest w „Dla klienta”) */
.dsg-cert-ks { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
/* atesty konstrukcji: osobna sekcja pod książką */
.dsg-cert-at { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line); }