/* ============================================================================
   25t-material-okno-wg-wzoru.css — OKNO MATERIAŁU wg zaakceptowanego wzoru (19.10.2026)
   ----------------------------------------------------------------------------
   Wzór: PROJEKT-OKIEN\artefakt\Materialy.html (okna „Nowy materiał” i „Edytuj materiał”), źródło: materialy_nowy_czesc.txt, opis: WDROZENIE-MATERIALY.md.
   Klasy jak we wzorze (mt-*, ui-pan, ui-f, ui-jedn, ui-chk, ui-seg, ui-ik, btn, dsg-tab); wszystko pod .mt-okm, żeby nie ruszać innych okien.
   Tokeny wzoru → tokeny programu: pow = surface, pow-2 = surface-2, pow-3 = surface-3, linia = line, linia-2 = line-soft, ramka = line-strong,
   tusz = text, tusz-2 = text-muted, tusz-3 = text-faint, ak = accent, ak-tlo = accent-soft, bl = danger, ok = ok, uw = warn-strong,
   r-s = r-sm, r-l = r-lg, h-k = h-control, t-1..t-4 = t-xs / t-sm / t-base / t-md.
   Przedrostek `#modal-root .modal.catalog-modal` bije skórkę okien kartotek (25r-kartoteki-okna-wg-wzoru.css). Telefon: css/9-telefon/27-material-okno-wg-wzoru.css.
   ============================================================================ */

/* --- formularz okna materiału: przewija się w całości (padding 12 / 16 daje skórka 25r), panele jeden pod drugim co 16 px --- */
#modal-root .modal.catalog-modal.material-modal > form { overflow-y: auto; overscroll-behavior: contain; }

/* --- klocki wzoru: panel, pole, pole z jednostką, pole wyboru, przełącznik, przycisk ikony, przycisk --- */
#modal-root .modal.catalog-modal .mt-okm .ui-pan { min-width: 0; margin: 0; padding: 0 var(--s-3) var(--s-3); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
#modal-root .modal.catalog-modal .mt-okm .ui-pan > h3 { display: flex; align-items: center; gap: var(--s-2); font-family: var(--font); font-size: var(--t-base); font-weight: var(--w-strong); line-height: var(--lh-base); letter-spacing: 0; }
#modal-root .modal.catalog-modal .mt-okm .ui-pan > h3 small { font-size: var(--t-xs); font-weight: var(--w-medium); }
#modal-root .modal.catalog-modal .mt-okm .ui-f { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; margin-top: var(--s-3); }
#modal-root .modal.catalog-modal .mt-okm .ui-f > label { display: flex; align-items: center; gap: var(--s-1); font-size: var(--t-xs); font-weight: var(--w-bold); color: var(--text-muted); }
#modal-root .modal.catalog-modal .mt-okm .ui-jedn { display: flex; align-items: center; height: var(--h-control); padding-right: var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); }
#modal-root .modal.catalog-modal .mt-okm .ui-jedn input { flex: 1; width: 100%; min-width: 0; height: 100%; padding: 0 var(--s-2); border: 0; background: transparent; box-shadow: none; text-align: right; }
#modal-root .modal.catalog-modal .mt-okm .ui-jedn > span { flex: none; font-size: var(--t-xs); font-weight: var(--w-bold); color: var(--text-faint); }
#modal-root .modal.catalog-modal .mt-okm .ui-jedn:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#modal-root .modal.catalog-modal .mt-okm .ui-jedn:has(.field-required-missing) { border-color: var(--danger); }
#modal-root .modal.catalog-modal .mt-okm .ui-chk { color: var(--text); display: flex; align-items: center; gap: var(--s-2); min-height: var(--h-control); font-size: var(--t-base); cursor: pointer; }
#modal-root .modal.catalog-modal .mt-okm .ui-chk input { flex: none; width: 18px; height: 18px; margin: 2px 3px 3px 4px; accent-color: var(--accent); }
#modal-root .modal.catalog-modal .mt-okm .ui-seg { display: inline-grid; grid-auto-flow: column; gap: 3px; padding: 3px; border-radius: var(--r); background: var(--surface-3); }
#modal-root .modal.catalog-modal .mt-okm .ui-ik { position: relative; display: inline-grid; flex: none; place-items: center; 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; }
#modal-root .modal.catalog-modal .mt-okm .ui-ik:hover { background: var(--surface-3); }
#modal-root .modal.catalog-modal .mt-okm .ui-ik .icon { width: 18px; height: 18px; }
#modal-root .modal.catalog-modal .mt-okm .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: var(--h-control); padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--text); font: inherit; font-size: var(--t-base); font-weight: var(--w-bold); white-space: nowrap; text-decoration: none; cursor: pointer; }
#modal-root .modal.catalog-modal .mt-okm .btn:hover { background: var(--surface-2); }
#modal-root .modal.catalog-modal .mt-okm .btn.miekki { border-color: transparent; background: var(--accent-soft); color: var(--accent); }
#modal-root .modal.catalog-modal .mt-okm .btn .icon { width: 16px; height: 16px; flex: none; }
#modal-root .modal.catalog-modal .mt-okm .icon { width: 16px; height: 16px; }
#modal-root .modal.catalog-modal .mt-okm .ui-ost { padding: var(--s-2) var(--s-3); border-radius: var(--r); font-size: var(--t-sm); line-height: 1.45; }
#modal-root .modal.catalog-modal .mt-okm .ui-ost.uw { background: var(--warn-soft); color: var(--warn-strong); }
#modal-root .modal.catalog-modal .mt-okm .ui-ost p { margin: 0; font-size: var(--t-sm); }
#modal-root .modal.catalog-modal .mt-okm .ui-st { display: inline-flex; align-items: center; gap: var(--s-2); height: 26px; padding: 0 var(--s-2); border: 1px solid transparent; border-radius: var(--r); background: var(--surface-3); color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); white-space: nowrap; }
#modal-root .modal.catalog-modal .mt-okm .ui-st.got { background: var(--ok-soft); color: var(--ok); }
#modal-root .modal.catalog-modal .mt-okm .ui-st i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* zakładki (wzór .dsg-tabs / .dsg-tab / .dsg-n) */
#modal-root .modal.catalog-modal .mt-okm .dsg-tabs { display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
#modal-root .modal.catalog-modal .mt-okm .dsg-tabs::-webkit-scrollbar { display: none; }
#modal-root .modal.catalog-modal .mt-okm .dsg-tab { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); flex: none; height: var(--h-control); padding: 0 var(--s-3); border: 0; background: transparent; font: inherit; font-size: var(--t-base); font-weight: var(--w-bold); color: var(--text-muted); white-space: nowrap; cursor: pointer; }
#modal-root .modal.catalog-modal .mt-okm .dsg-tab:hover { color: var(--text); }
#modal-root .modal.catalog-modal .mt-okm .dsg-tab[aria-selected="true"] { color: var(--accent); }
#modal-root .modal.catalog-modal .mt-okm .dsg-tab[aria-selected="true"]::after { content: ""; position: absolute; left: var(--s-2); right: var(--s-2); bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
#modal-root .modal.catalog-modal .mt-okm .dsg-n { display: inline-grid; place-items: center; min-width: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--surface-3); font-size: var(--t-xs); font-weight: var(--w-strong); line-height: 1.5; color: var(--text-muted); }
#modal-root .modal.catalog-modal .mt-okm .dsg-tab .dsg-n { margin-left: var(--s-2); }
#modal-root .modal.catalog-modal .mt-okm [data-mt-pane] { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }


/* --- przeniesione ze wzoru (klasy mt-*) --- */
#modal-root .modal.catalog-modal .mt-okm .mt-okh { display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);padding:var(--s-3);border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2) }
#modal-root .modal.catalog-modal .mt-okm .mt-okh-m { display:flex;align-items:center;gap:var(--s-3);min-width:0;flex:1 1 320px }
#modal-root .modal.catalog-modal .mt-okm .mt-okh-f { flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-sm);background:var(--surface-3);color:var(--text-faint);overflow:hidden }
#modal-root .modal.catalog-modal .mt-okm .mt-okh-f img { width:100%;height:100%;object-fit:cover }
#modal-root .modal.catalog-modal .mt-okm .mt-okh-f .icon { width:20px;height:20px }
#modal-root .modal.catalog-modal .mt-okm .mt-okh-t { display:flex;flex-direction:column;min-width:0 }
#modal-root .modal.catalog-modal .mt-okm .mt-okh-t b { font-family:var(--font-tytul);font-size:var(--t-md);font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
#modal-root .modal.catalog-modal .mt-okm .mt-okh-t span { font-size:var(--t-sm);color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
#modal-root .modal.catalog-modal .mt-okm .mt-okh-t span.mt-okh-duzy { font-size:var(--t-base);color:var(--text-muted);font-weight:500 }
#modal-root .modal.catalog-modal .mt-okm .mt-okh-l { display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4);margin-left:auto;font-size:var(--t-sm);color:var(--text-faint) }
#modal-root .modal.catalog-modal .mt-okm .mt-okh-l strong { color:var(--text);font-weight:700;font-variant-numeric:tabular-nums }
#modal-root .modal.catalog-modal .mt-okm .mt-tabs { margin:var(--s-3) 0 var(--s-4) }
#modal-root .modal.catalog-modal .mt-okm .mt-tabs .dsg-tab { gap:var(--s-1) }
#modal-root .modal.catalog-modal .mt-okm .mt-tab-w { display:inline }
#modal-root .modal.catalog-modal .mt-okm .mt-zn { display:inline-grid;place-items:center;flex:none;width:16px;height:16px;border-radius:50%;font-style:normal;font-size:var(--t-xs);font-weight:700;line-height:1 }
#modal-root .modal.catalog-modal .mt-okm .mt-zn.ok { background:var(--ok);color:var(--galka) }
#modal-root .modal.catalog-modal .mt-okm .mt-zn.ok .icon { width:10px;height:10px }
#modal-root .modal.catalog-modal .mt-okm .mt-zn.br { background:var(--danger);color:var(--galka) }
#modal-root .modal.catalog-modal .mt-okm .mt-zaw { display:flex;flex-direction:column;gap:var(--s-4);min-width:0 }
#modal-root .modal.catalog-modal .mt-okm .mt-rown { display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1) var(--s-2);margin:var(--s-3) 0 0;padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);background:var(--accent-soft);font-size:var(--t-sm);color:var(--text-muted) }
#modal-root .modal.catalog-modal .mt-okm .mt-rown i { font-style:normal;color:var(--text-faint) }
#modal-root .modal.catalog-modal .mt-okm .mt-rown b { font-size:var(--t-md);font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums }
#modal-root .modal.catalog-modal .mt-okm .mt-koniec { margin:0;padding:var(--s-3);border:1px dashed var(--line-strong);border-radius:var(--r-sm);font-size:var(--t-sm);line-height:1.5;color:var(--text-muted) }
#modal-root .modal.catalog-modal .mt-okm .mt-koniec b { color:var(--text) }
#modal-root .modal.catalog-modal .mt-okm .mt-pk-w { display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-2);padding:var(--s-3);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2) }
#modal-root .modal.catalog-modal .mt-okm .mt-pk-n { font-size:var(--t-md);font-weight:600;color:var(--text);overflow-wrap:anywhere }
#modal-root .modal.catalog-modal .mt-okm .mt-pk-j { font-size:var(--t-sm);color:var(--text-faint);font-variant-numeric:tabular-nums }
#modal-root .modal.catalog-modal .mt-okm .mt-pk>*+* { margin-top:var(--s-2) }
#modal-root .modal.catalog-modal .mt-okm { display:block;container:mtok/inline-size }
#modal-root .modal.catalog-modal .mt-okm .mt-okg { display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:var(--s-4);align-items:start }
#modal-root .modal.catalog-modal .mt-okm .mt-okg>main { display:flex;flex-direction:column;gap:var(--s-4);min-width:0 }
#modal-root .modal.catalog-modal .mt-okm .mt-okg>aside { position:sticky;top:0;display:flex;flex-direction:column;gap:var(--s-4);min-width:0 }
#modal-root .modal.catalog-modal .mt-okm .mt-okg .ui-pan { margin:0 }
#modal-root .modal.catalog-modal .mt-okm .mt-okg .ui-f { margin:0 }
#modal-root .modal.catalog-modal .mt-okm .ui-pan { padding-top:0 }
#modal-root .modal.catalog-modal .mt-okm .ui-pan>h3 { flex-wrap:wrap;row-gap:2px;margin:0 calc(var(--s-3) * -1) var(--s-3);padding:var(--s-2) var(--s-3);border-bottom:1px solid var(--line);border-radius:var(--r) var(--r) 0 0;background:var(--surface-3);color:var(--text) }
#modal-root .modal.catalog-modal .mt-okm .ui-pan>h3 small { flex:0 1 auto;min-width:min(100%,240px);color:var(--text-faint) }
@container mtok (max-width: 820px) {
  #modal-root .modal.catalog-modal .mt-okm .mt-okg, #modal-root .modal.catalog-modal .mt-okm .mt-okg.lewa { grid-template-columns:minmax(0,1fr) }
  #modal-root .modal.catalog-modal .mt-okm .mt-okg>aside { position:static }
}
#modal-root .modal.catalog-modal .mt-okm .mt-gr { display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-3) var(--s-4);align-items:start }
#modal-root .modal.catalog-modal .mt-okm .mt-gr>* { grid-column:span 2;min-width:0 }
#modal-root .modal.catalog-modal .mt-okm .mt-gr>.s1 { grid-column:span 1 }
#modal-root .modal.catalog-modal .mt-okm .mt-gr>.s3 { grid-column:span 3 }
#modal-root .modal.catalog-modal .mt-okm .mt-gr>.s4 { grid-column:span 4 }
#modal-root .modal.catalog-modal .mt-okm .mt-gr>.s6 { grid-column:1/-1 }
#modal-root .modal.catalog-modal .mt-okm .mt-gr.g5 { grid-template-columns:repeat(5,minmax(0,1fr)) }
#modal-root .modal.catalog-modal .mt-okm .mt-gr.g5>* { grid-column:auto }
@container mtok (max-width: 900px) {
  #modal-root .modal.catalog-modal .mt-okm .mt-gr>.w2 { grid-column:span 2 }
  #modal-root .modal.catalog-modal .mt-okm .mt-gr>.s3 { grid-column:1/-1 }
  #modal-root .modal.catalog-modal .mt-okm .mt-gr.g5 { grid-template-columns:repeat(3,minmax(0,1fr)) }
}
#modal-root .modal.catalog-modal .mt-okm .ui-pan .mt-gr+.mt-sub { margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--line-soft) }
#modal-root .modal.catalog-modal .mt-okm .ui-jedn input { min-width:0;flex:1;width:100% }
#modal-root .modal.catalog-modal .mt-okm .mt-waga { display:grid;grid-template-columns:minmax(0,1fr) 84px;gap:var(--s-2) }
#modal-root .modal.catalog-modal .mt-okm .mt-gr2 { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3) var(--s-4);align-items:start }
#modal-root .modal.catalog-modal .mt-okm .mt-gr3 { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3) var(--s-4);align-items:start }
#modal-root .modal.catalog-modal .mt-okm .mt-gr3>* { min-width:0 }
#modal-root .modal.catalog-modal .mt-okm .mt-gr3>.s2 { grid-column:span 2 }
#modal-root .modal.catalog-modal .mt-okm .mt-gr4 { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3) var(--s-4);align-items:start }
#modal-root .modal.catalog-modal .mt-okm .mt-gr4>* { min-width:0 }
#modal-root .modal.catalog-modal .mt-okm .mt-gr4>.s4 { grid-column:1/-1 }
@container mtok (max-width: 900px) {
  #modal-root .modal.catalog-modal .mt-okm .mt-gr4 { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@container mtok (max-width: 700px) {
  #modal-root .modal.catalog-modal .mt-okm .mt-gr3 { grid-template-columns:minmax(0,1fr) }
  #modal-root .modal.catalog-modal .mt-okm .mt-gr3>.s2 { grid-column:span 1 }
  #modal-root .modal.catalog-modal .mt-okm .mt-gr4 { grid-template-columns:minmax(0,1fr) }
}
#modal-root .modal.catalog-modal .mt-okm .mt-et-f { position:relative;display:flex;align-items:center;justify-content:center;height:150px;margin-bottom:var(--s-3);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);overflow:hidden }
#modal-root .modal.catalog-modal .mt-okm .mt-et-f img { width:100%;height:100%;object-fit:cover;cursor:zoom-in }
#modal-root .modal.catalog-modal .mt-okm .mt-et-f>.icon { width:22px;height:22px;color:var(--text-faint) }
#modal-root .modal.catalog-modal .mt-okm .mt-et-a { position:absolute;top:var(--s-2);right:var(--s-2);display:flex;gap:var(--s-1) }
#modal-root .modal.catalog-modal .mt-okm .mt-et-dod, #modal-root .modal.catalog-modal .mt-okm .mt-et-qr { width:100%;justify-content:center;margin-bottom:var(--s-3) }
#modal-root .modal.catalog-modal .mt-okm .mt-et-n { display:block;font-size:var(--t-md);font-weight:700;line-height:1.3;color:var(--text);overflow-wrap:anywhere }
#modal-root .modal.catalog-modal .mt-okm .mt-et-k { display:block;margin-top:2px;font-size:var(--t-xs);color:var(--text-faint) }
#modal-root .modal.catalog-modal .mt-okm .mt-et-l { display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-1) var(--s-3);margin:var(--s-3) 0 0;padding-top:var(--s-3);border-top:1px solid var(--line);font-size:var(--t-sm) }
#modal-root .modal.catalog-modal .mt-okm .mt-et-l dt { color:var(--text-faint);white-space:nowrap }
#modal-root .modal.catalog-modal .mt-okm .mt-et-l dd { margin:0;text-align:right;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere }
#modal-root .modal.catalog-modal .mt-okm .mt-gr2>* { min-width:0 }
@container mtok (max-width: 700px) {
  #modal-root .modal.catalog-modal .mt-okm .mt-gr2 { grid-template-columns:minmax(0,1fr) }
}
#modal-root .modal.catalog-modal .mt-okm .mt-zl-l { list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden }
#modal-root .modal.catalog-modal .mt-okm .mt-zl-w { display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-3);border-top:1px solid var(--line-soft);font-size:var(--t-sm) }
#modal-root .modal.catalog-modal .mt-okm .mt-zl-w:first-child { border-top:0 }
#modal-root .modal.catalog-modal .mt-okm .mt-zl-w.ten { background:var(--accent-soft) }
#modal-root .modal.catalog-modal .mt-okm .mt-zl-n { display:flex;flex-direction:column;min-width:0 }
#modal-root .modal.catalog-modal .mt-okm .mt-zl-n b { font-weight:600;overflow-wrap:anywhere }
#modal-root .modal.catalog-modal .mt-okm .mt-zl-n small { font-size:var(--t-xs);color:var(--text-faint) }
#modal-root .modal.catalog-modal .mt-okm .mt-zl-j { font-weight:600;color:var(--text-muted);font-variant-numeric:tabular-nums }
@container app (max-width:640px) {
  #modal-root .modal.catalog-modal .mt-okm .mt-zl-w { grid-template-columns:minmax(0,1fr) auto }
  #modal-root .modal.catalog-modal .mt-okm .mt-zl-w .ui-st { grid-column:1/-1;justify-self:start }
  #modal-root .modal.catalog-modal .mt-okm .mt-gr>.s4 { grid-column:1/-1 }
}
#modal-root .modal.catalog-modal .mt-okm .mt-zl-chk { margin:0 }
#modal-root .modal.catalog-modal .mt-okm .mt-ok-pod { margin:0;font-size:var(--t-xs);line-height:1.45;color:var(--text-faint) }
#modal-root .modal.catalog-modal .mt-okm .mt-ok-prio { align-items:flex-start;padding:var(--s-2) 0 }
#modal-root .modal.catalog-modal .mt-okm .mt-ok-prio input { flex:none;margin-top:2px }
#modal-root .modal.catalog-modal .mt-okm .mt-ok-prio span { font-size:var(--t-base);line-height:1.45;color:var(--text-muted) }
#modal-root .modal.catalog-modal .mt-okm .mt-ok-prio b { color:var(--text) }
#modal-root .modal.catalog-modal .mt-okm .ui-f.zle .ui-jedn, #modal-root .modal.catalog-modal .mt-okm .ui-f.zle .mt-waga input { border-color:var(--danger) }
#modal-root .modal.catalog-modal .mt-okm .ui-f.przyg { opacity:.5 }
#modal-root .modal.catalog-modal .mt-okm .mt-pom-k { display:flex;flex-direction:column;gap:var(--s-2);margin-top:var(--s-2);padding:var(--s-3);border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);font-size:var(--t-sm);line-height:1.5;color:var(--text-muted) }
#modal-root .modal.catalog-modal .mt-okm .mt-pom-k[hidden] { display:none }
#modal-root .modal.catalog-modal .mt-okm .mt-pom-k strong { color:var(--text);font-size:var(--t-base) }
#modal-root .modal.catalog-modal .mt-okm .mt-pom-k p { margin:0 }
#modal-root .modal.catalog-modal .mt-okm .mt-pom-k b { color:var(--text) }
#modal-root .modal.catalog-modal .mt-okm .mt-pom-p { padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);background:var(--surface) }
#modal-root .modal.catalog-modal .mt-okm .mt-of { display:flex;flex-direction:column;gap:var(--s-2) }
#modal-root .modal.catalog-modal .mt-okm .mt-of-w { display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.5fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,.7fr) minmax(0,1.2fr) var(--h-control);gap:var(--s-2);align-items:center }
#modal-root .modal.catalog-modal .mt-okm .mt-of-w.nag { font-size:var(--t-xs);font-weight:600;color:var(--text-muted) }
#modal-root .modal.catalog-modal .mt-okm .mt-of-w.nag span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
#modal-root .modal.catalog-modal .mt-okm .mt-of-w:not(.nag) .ui-f>label { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap }
#modal-root .modal.catalog-modal .mt-okm .mt-kol-t { width:100%;border-collapse:collapse }
#modal-root .modal.catalog-modal .mt-okm .mt-kol-t th { text-align:left;font-size:var(--t-xs);font-weight:600;color:var(--text-faint);padding:0 var(--s-2) var(--s-1) 0 }
#modal-root .modal.catalog-modal .mt-okm .mt-kol-t td { padding:var(--s-1) var(--s-2) var(--s-1) 0 }
#modal-root .modal.catalog-modal .mt-okm .mt-kol-t td:last-child, #modal-root .modal.catalog-modal .mt-okm .mt-kol-t th:last-child { width:var(--h-control);padding-right:0 }
#modal-root .modal.catalog-modal .mt-okm .mt-kol-t input { width:100%;height:var(--h-control);border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--text);font:inherit;font-size:var(--t-base);padding:0 var(--s-2);min-width:0 }
#modal-root .modal.catalog-modal .mt-okm .mt-kol-t input:focus { outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft) }
#modal-root .modal.catalog-modal .mt-okm .mt-kol-t td:nth-child(2), #modal-root .modal.catalog-modal .mt-okm .mt-kol-t td:nth-child(3) { width:26% }
#modal-root .modal.catalog-modal .mt-okm .ui-ik.us { color:var(--danger) }
#modal-root .modal.catalog-modal .mt-okm .mt-cl { list-style:none;margin:0;padding:0;display:flex;flex-direction:column }
#modal-root .modal.catalog-modal .mt-okm .mt-ci { display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s-1) var(--s-2);align-items:center;padding:var(--s-2) 0;border-top:1px solid var(--line-soft) }
#modal-root .modal.catalog-modal .mt-okm .mt-ci:first-child { border-top:0;padding-top:0 }
#modal-root .modal.catalog-modal .mt-okm .mt-ci-ik { display:grid;place-items:center;width:36px;height:28px;border-radius:var(--r-sm);background:var(--danger-soft);color:var(--danger);font-size:var(--t-xs);font-weight:700 }
#modal-root .modal.catalog-modal .mt-okm .mt-ci-n { display:flex;flex-direction:column;gap:2px;min-width:0 }
#modal-root .modal.catalog-modal .mt-okm .mt-ci-n b { font-size:var(--t-sm);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
#modal-root .modal.catalog-modal .mt-okm .mt-tag { align-self:flex-start;font-size:var(--t-xs);font-weight:600;color:var(--text-faint) }
#modal-root .modal.catalog-modal .mt-okm .mt-tag.zb { color:var(--etap-design) }
#modal-root .modal.catalog-modal .mt-okm .mt-ci-a { grid-column:2/-1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) }
#modal-root .modal.catalog-modal .mt-okm .mt-ci-b { height:var(--h-control);padding:0 var(--s-3);font-size:var(--t-sm);gap:var(--s-1) }
#modal-root .modal.catalog-modal .mt-okm .mt-ci-b .icon { width:14px;height:14px }
#modal-root .modal.catalog-modal .mt-okm .mt-ci-a em { font-style:normal;color:var(--warn-strong);font-weight:600;font-size:var(--t-xs) }
#modal-root .modal.catalog-modal .mt-okm .mt-ci>.ui-ik { grid-column:3;grid-row:1 }
#modal-root .modal.catalog-modal .mt-okm .mt-cert-dod { display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--line) }
#modal-root .modal.catalog-modal .mt-okm .mt-cert-dod>.ui-f { flex:1 1 240px;min-width:0 }
#modal-root .modal.catalog-modal .mt-okm .mt-cert-dod>.mt-ok-pod { flex-basis:100% }
#modal-root .modal.catalog-modal .mt-okm .mt-cert-seg { flex:none;display:inline-flex }
#modal-root .modal.catalog-modal .mt-okm .mt-cert-seg button { justify-content:center;min-width:112px }
#modal-root .modal.catalog-modal .mt-okm .mt-cert-w { flex:none;justify-content:center;height:var(--h-control) }
#modal-root .modal.catalog-modal .mt-okm .mt-zal-pusto { font-size:var(--t-sm);color:var(--text-faint) }
@container mtok (max-width: 1060px) {
  #modal-root .modal.catalog-modal .mt-okm .mt-of-w.nag { display:none }
  #modal-root .modal.catalog-modal .mt-okm .mt-of-w { grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3) var(--s-2);align-items:end;border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s-3) }
  #modal-root .modal.catalog-modal .mt-okm .mt-of-w:not(.nag) .ui-f>label { position:static;width:auto;height:auto;overflow:visible;clip-path:none }
  #modal-root .modal.catalog-modal .mt-okm .mt-of-w>.ui-f:nth-child(1), #modal-root .modal.catalog-modal .mt-okm .mt-of-w>.ui-f:nth-child(2) { grid-column:1/-1 }
  #modal-root .modal.catalog-modal .mt-okm .mt-of-w>.ui-ik { grid-column:1/-1;justify-self:end }
}
@container mtok (max-width: 620px) {
  #modal-root .modal.catalog-modal .mt-okm .mt-gr { grid-template-columns:repeat(2,minmax(0,1fr)) }
  #modal-root .modal.catalog-modal .mt-okm .mt-gr>*, #modal-root .modal.catalog-modal .mt-okm .mt-gr>.s3, #modal-root .modal.catalog-modal .mt-okm .mt-gr>.s4 { grid-column:1/-1 }
  #modal-root .modal.catalog-modal .mt-okm .mt-gr>.s1, #modal-root .modal.catalog-modal .mt-okm .mt-gr>.w2 { grid-column:span 1 }
  #modal-root .modal.catalog-modal .mt-okm .mt-gr.g5 { grid-template-columns:repeat(2,minmax(0,1fr)) }
  #modal-root .modal.catalog-modal .mt-okm .mt-gr.g5>* { grid-column:auto }
}

/* pola w siatkach nie mają górnego marginesu (odstęp robi siatka) */
#modal-root .modal.catalog-modal .mt-okm .mt-gr > .ui-f, #modal-root .modal.catalog-modal .mt-okm .mt-gr2 > .ui-f, #modal-root .modal.catalog-modal .mt-okm .mt-gr3 > .ui-f, #modal-root .modal.catalog-modal .mt-okm .mt-gr4 > .ui-f, #modal-root .modal.catalog-modal .mt-okm .mt-of-w > .ui-f { margin-top: 0; }

#modal-root .modal.catalog-modal .mt-okm .mt-zl > * + * { margin-top: var(--s-3); }
#modal-root .modal.catalog-modal .mt-okm p.mt-ok-pod, #modal-root .modal.catalog-modal .mt-okm p.mt-rown { font-size: var(--t-sm); }

#modal-root .modal.catalog-modal .mt-okm .ui-chk span { font-weight: var(--w-regular); }
#modal-root .modal.catalog-modal .mt-okm .mt-kol-t :is(th, td) { border-bottom: 0; }

/* --- uzupełnienia pod program (te same wartości co wzór, inne elementy: radio zamiast przycisków, przycisk „?” zamiast <details>) --- */
#modal-root .modal.catalog-modal .mt-okm .mt-pom { display: grid; place-items: center; width: 26px; height: 26px; margin-left: auto; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--text-muted); font: inherit; font-size: var(--t-sm); font-weight: var(--w-strong); cursor: pointer; }
#modal-root .modal.catalog-modal .mt-okm .mt-pom:hover, #modal-root .modal.catalog-modal .mt-okm .mt-pom[aria-expanded="true"] { background: var(--surface-3); }
#modal-root .modal.catalog-modal .mt-okm .mt-kolory { display: flex; flex-direction: column; gap: var(--s-3); }
#modal-root .modal.catalog-modal .mt-okm .mt-kolory > .ui-f { gap: var(--s-2); }
#modal-root .modal.catalog-modal .mt-okm .mt-kol-t input { text-align: left; }
#modal-root .modal.catalog-modal .mt-okm .mt-kol-t td:nth-child(2) input, #modal-root .modal.catalog-modal .mt-okm .mt-kol-t td:nth-child(3) input { text-align: right; font-variant-numeric: tabular-nums; }
#modal-root .modal.catalog-modal .mt-okm .mt-cert-seg label { display: inline-flex; align-items: center; justify-content: center; min-width: 112px; height: var(--h-control); padding: 0 var(--s-3); border-radius: var(--r-sm); color: var(--text-muted); font-size: var(--t-sm); font-weight: var(--w-bold); cursor: pointer; }
#modal-root .modal.catalog-modal .mt-okm .mt-cert-seg label:has(input:checked) { background: var(--surface); color: var(--text); box-shadow: var(--cien-1); }
#modal-root .modal.catalog-modal .mt-okm .mt-cert-seg label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
#modal-root .modal.catalog-modal .mt-okm .mt-cert-seg input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#modal-root .modal.catalog-modal .mt-okm .mt-cert-ist { flex: 1 1 240px; min-width: 0; }
#modal-root .modal.catalog-modal .mt-okm .mt-cert-ist[hidden] { display: none; }
#modal-root .modal.catalog-modal .mt-okm .mt-cert-ist .mt-ok-pod { margin: 0; }
/* „Inni dostawcy”: lista bez wierszy nie pokazuje też nagłówka tabeli */
#modal-root .modal.catalog-modal .mt-okm .mt-of:not(:has([data-d-oferta])) { display: none; }
/* zliczanie w Kalkulatorze: „ten materiał” jako pigułka */
#modal-root .modal.catalog-modal .mt-okm .mt-zl-ten { display: inline-flex; align-items: center; gap: var(--s-2); height: 26px; padding: 0 var(--s-2); border-radius: var(--r); background: var(--ok-soft); color: var(--ok); font-size: var(--t-xs); font-weight: var(--w-bold); white-space: nowrap; }
#modal-root .modal.catalog-modal .mt-okm .mt-zl-ten i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
#modal-root .modal.catalog-modal .mt-okm .mt-zl-u { margin: 0; }
#modal-root .modal.catalog-modal .mt-okm .material-notes-field { min-width: 0; }

/* --- Opis do książki materiałów (wzór .mt-ks*): przełącznik języków z ✓, nazwa, „dodaj opis”, krótki opis z licznikiem --- */
#modal-root .modal.catalog-modal .mt-okm .ui-seg button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1); height: var(--h-control); padding: 0 var(--s-3); border: 0; border-radius: var(--r-sm); background: transparent; font: inherit; font-size: var(--t-sm); font-weight: var(--w-bold); color: var(--text-muted); cursor: pointer; }
#modal-root .modal.catalog-modal .mt-okm .ui-seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--cien-1); }
#modal-root .modal.catalog-modal .mt-okm .mt-ks { display: flex; flex-direction: column; gap: var(--s-2); }
#modal-root .modal.catalog-modal .mt-okm .mt-ks-j { align-self: flex-start; }
#modal-root .modal.catalog-modal .mt-okm .mt-ks-j button { min-width: 64px; min-height: var(--h-control); }
#modal-root .modal.catalog-modal .mt-okm .mt-ks-d { padding: var(--s-1) 0; }
#modal-root .modal.catalog-modal .mt-okm .mt-ks-z { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1.5px dashed var(--text-faint); font-style: normal; }
#modal-root .modal.catalog-modal .mt-okm .mt-ks-z.ok { border: 0; background: var(--ok); color: var(--galka); }
#modal-root .modal.catalog-modal .mt-okm .mt-ks-z .icon { width: 10px; height: 10px; }
#modal-root .modal.catalog-modal .mt-okm .mt-ks-p { display: flex; flex-direction: column; gap: var(--s-2); }
#modal-root .modal.catalog-modal .mt-okm .mt-ks-p textarea { min-height: 84px; }
#modal-root .modal.catalog-modal .mt-okm .mt-ks-l { display: block; text-align: right; }

/* atrybut hidden zawsze wygrywa z układem (kolory wyłączone, certyfikat zbiorczy, karta „?”) */
#modal-root .modal.catalog-modal .mt-okm [hidden] { display: none; }