/* ============================================================================
   25e-design-zakres.css — OKNO PRZENOSZENIA KONSTRUKCJI („Dodaj Design” z krokiem zakresu) wg artefaktu v99 (M5, 18.10.2026)
   ----------------------------------------------------------------------------
   Trzy okna tej samej rodziny: zakres („Bez zmian · Poprawić · Usunąć” dla każdej konstrukcji poprzedniej wersji), kartoteka
   konstrukcji (kafelki typów) i opis poprawek (edytor z M2). Kod: js/okna/design-zakres.js.
   Wzór: PROJEKT-OKIEN\artefakt\okna_css.txt — .dsg-zk-* (zakres), .kat-* (kartoteka); tokeny artefaktu → tokeny programu
   (--pow = --surface, --linia = --line, --ak = --accent, --uw = --warn-strong, --bl = --danger, --tusz-2 = --text-muted …).
   Rama jak w oknach z M6 (biała, kreski pod nagłówkiem i nad stopką, przy dolnej krawędzi — wzór `.ui-ok.l`); kolor przycisków
   „Dodaj” / „Usuń” daje globalne tonowanie (ui/tony-przyciskow.js). Telefon i tablet dotykowy: css/9-telefon/14-design-zakres.css.
   ============================================================================ */

/* === 1. RAMA === */
/* Położenie, wysokość i górne rogi — wspólna zasada dużych okien: 20-okna-polozenie.css. */
#modal-root .modal.design-zakres-modal {
  --okno-w: 1180px;
  background: var(--surface);
}
#modal-root .modal.design-zakres-modal > header { align-items: flex-start; gap: var(--s-2); padding: var(--s-4) var(--s-3) var(--s-3) var(--s-5); border-bottom: 1px solid var(--line); background: var(--surface); }
#modal-root .modal.design-zakres-modal > header > div:first-child { flex: 1 1 0; min-width: 0; }
#modal-root .modal.design-zakres-modal > header h2 { font-family: var(--font-tytul); font-size: var(--t-lg); font-weight: var(--w-bold); line-height: 1.45; letter-spacing: var(--ls-tytul); }
#modal-root .modal.design-zakres-modal > header p { margin: 2px 0 0; color: var(--text-faint); font-size: var(--t-sm); }
#modal-root .modal.design-zakres-modal > form { display: block; padding: var(--s-4) var(--s-5); overflow: auto; }
#modal-root .modal.design-zakres-modal > footer { gap: var(--s-2); border-top: 1px solid var(--line); background: var(--surface); }
#modal-root .modal.design-zakres-modal > footer > .button .icon { width: 16px; height: 16px; }

/* === 2. ZAKRES — lista konstrukcji poprzedniej wersji === */
.dzk { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.dzk-pasek { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.dzk-pasek .button { width: 100%; justify-content: center; }
.dzk-pasek .button .icon, .dzk-ob .icon, .dzk-us .icon { width: 16px; height: 16px; }
.dzk-l { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.dzk-pusto { padding: var(--s-4); color: var(--text-faint); font-size: var(--t-sm); text-align: center; }
.dzk-w { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: var(--s-2) var(--s-4); align-items: center; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.dzk-w[data-dec="poprawic"] { border-color: var(--warn-strong); box-shadow: 0 0 0 1px var(--warn-strong); }
.dzk-w[data-dec="usunac"] { background: var(--surface-2); }
.dzk-w[data-dec="usunac"] .dzk-g { opacity: .55; }
.dzk-w[data-dec="usunac"] .dzk-n b { text-decoration: line-through; }
.dzk-g { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.dzk-mi { display: grid; place-items: center; flex: none; width: 72px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-sm); background: var(--surface-3); color: var(--text-faint); }
.dzk-mi img { width: 100%; height: 100%; object-fit: cover; }
.dzk-mi .icon { width: 20px; height: 20px; }
.dzk-n { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.dzk-n b { font-size: var(--t-md); font-weight: var(--w-bold); }
.dzk-p { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); min-width: 0; }
.dzk-m { color: var(--text-faint); font-size: var(--t-xs); }
.dzk-st-nowa { display: inline-flex; align-items: center; gap: var(--s-2); height: 22px; padding: 0 var(--s-2); border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-strong); font-size: var(--t-xs); font-weight: var(--w-bold); white-space: nowrap; }
.dzk-st-nowa > i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dzk-ster { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.dzk-s { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.dzk-s > button { cursor: pointer; }
.dzk-s > button[data-dec="poprawic"][aria-pressed="true"] { background: var(--warn-soft); color: var(--warn-strong); box-shadow: none; }
.dzk-s > button[data-dec="usunac"][aria-pressed="true"] { background: var(--danger-soft); color: var(--danger); box-shadow: none; }
.dzk-ob, .dzk-pasek .dzk-dod { width: 100%; justify-content: center; background: var(--accent-soft); color: var(--accent-strong); border-color: transparent; }
.dzk-ob:hover, .dzk-pasek .dzk-dod:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.dzk-us { justify-self: end; }
.dzk-i { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; color: var(--text-muted); font-size: var(--t-sm); }
.dzk-sum { min-width: 0; color: var(--text-muted); font-size: var(--t-sm); }
.dzk-sum b { color: var(--text); }

/* === 3. KARTOTEKA KONSTRUKCJI === */
.design-katalog-modal .kat-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--s-3); align-content: start; }
.kat-c { display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.kat-c:hover, .kat-c:focus-visible { border-color: var(--accent); outline: none; box-shadow: 0 0 0 1px var(--accent); }
.kat-m { display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-3); color: var(--text-faint); }
.kat-m .icon { width: 24px; height: 24px; }
.kat-t { display: flex; flex-direction: column; gap: 2px; padding: var(--s-2) var(--s-3) var(--s-3); }
.kat-t b { font-size: var(--t-base); font-weight: var(--w-bold); }
.kat-t small { color: var(--text-faint); font-size: var(--t-xs); }

/* === 4. OPIS POPRAWEK — edytor na całą wysokość okna === */
#modal-root .modal.design-poprawki-modal > form.dzk-poprawki { display: flex; flex-direction: column; }
.dzk-poprawki .rich-editor { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 280px; }
.dzk-poprawki .rich-editor .rich-editable { flex: 1 1 auto; min-height: 220px; }