/* OKNO „EDYTUJ PLANY” I OKNA ZESTAWIEŃ (BOM) — wg zatwierdzonego wzoru wyglądu (v15 b22, 05.10.2026).
   Dom klas: .pln-* (okno planów), .bom-* (historia, podgląd, porównanie zestawień), .pos-* (oś czasu inżynierów),
   .dpl* (pole daty po polsku). Klocki wspólne wzoru (przełącznik, panel, pole, znacznik, legenda, ostrzeżenie, przycisk,
   przycisk-ikona, menu) żyją tu pod nazwami okna (.pln-seg, .pln-pan, .pln-f, .pln-st, .pln-leg, .pln-ost, .pln-btn,
   .pln-ik, .pln-mn) — wartości wyłącznie z tokenów 1-podstawa. Okno = .modal.pln-wz (+ .pln-okno | .bom-okno | .pln-arkusz).
   CZĘŚĆ 1: reguły przepisane ze wzoru narzędziem stanowiska (te same deklaracje, tokeny programu) — kolejność jak we wzorze.
   CZĘŚĆ 2 (na końcu): dopasowanie do programu (awatar, pola, edytor uwag, czat etapu, okno na oknie).
   Telefon: 9-telefon/2b-plany-okno.css. */
:where(.pln-wz, .pln-mn) { font-size: var(--t-md); line-height: var(--lh-base); }
:where(.pln-wz) small { color: inherit; }
:where(.pln-wz) label { color: inherit; font-size: inherit; font-weight: inherit; }
:where(.pln-wz) :is(h2, h3, h4) { line-height: inherit; text-wrap: wrap; }
:where(.pln-wz) :is(button, a) { line-height: inherit; }
.pos { grid-column: 1/-1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-3) var(--s-4) var(--s-3); display: grid; grid-template-columns: 120px minmax(0,1fr); gap: var(--s-1) var(--s-4); align-items: center; }
.pos .tyt { font-size: var(--t-sm); font-weight: var(--w-bold); color: var(--text-muted); }
.pos .tyt small { display: block; font-size: var(--t-xs); font-weight: var(--w-medium); color: var(--text-faint); }
.pln-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: var(--h-control); padding: 0 var(--s-4); border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--surface); font-size: var(--t-base); font-weight: var(--w-bold); white-space: nowrap; color: var(--text); }
.pln-btn:hover { background: var(--surface-2); }
.pln-btn.gl { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pln-btn.gl:hover { background: var(--accent-strong); }
.pln-pusto { padding: var(--s-4); text-align: center; color: var(--text-faint); font-size: var(--t-base); }
.pln-wz { position: relative; display: flex; flex-direction: column; width: min(720px,calc(100vw / var(--skala-ui) - 48px)); height: auto; max-height: calc(100dvh / var(--skala-ui) - 48px); border: 0; background: var(--surface); color: var(--text); border-radius: var(--r-lg); box-shadow: var(--cien-2); overflow: hidden; }
.pln-wz.pln-arkusz { width: min(460px,calc(100vw / var(--skala-ui) - 48px)); }
.pln-wz.pln-okno { width: min(1180px,calc(100vw / var(--skala-ui) - 48px)); height: calc(100dvh / var(--skala-ui) - var(--s-5)); }
.pln-wz > header { display: flex; 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); }
.pln-wz > header h2 { margin: 0; font-family: var(--font-tytul); font-size: var(--t-lg); font-weight: var(--w-bold); letter-spacing: -.01em; }
.pln-wz > header p { margin: 2px 0 0; font-size: var(--t-sm); color: var(--text-faint); }
.pln-wz > header .pln-sp { flex: 1; }
.pln-wz .pln-cialo { flex: 1; min-height: 0; overflow: auto; padding: var(--s-4) var(--s-5); }
.pln-wz > footer { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line); background: var(--surface); }
.pln-wz > footer .pln-sp { flex: 1; }
.pln-ik { width: var(--h-control); height: var(--h-control); border: 0; border-radius: var(--r-sm); background: transparent; display: grid; place-items: center; color: var(--text-muted); cursor: pointer; flex: none; }
.pln-ik:hover { background: var(--surface-3); }
.pln-ik .icon { width: 18px; height: 18px; }
.pln-wz .pln-btn, .pln-mn button, .modal.pln-wz .pln-f input, .modal.pln-wz .pln-f select, .modal.pln-wz .pln-f textarea { font-size: var(--t-control); }
.pln-wz .pln-btn { height: var(--h-control); padding: 0 var(--s-3); }
.pln-btn.miekki { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.pln-pyt p { margin: 0; font-size: var(--t-base); line-height: 1.5; color: var(--text-muted); }
.pln-pyt .pln-f { margin-top: var(--s-3); }
.pln-f { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.modal.pln-wz .pln-f > label, .pln-f > .et { font-size: var(--t-xs); font-weight: var(--w-bold); color: var(--text-muted); }
.modal.pln-wz .pln-f > label .wym { color: var(--danger); }
.modal.pln-wz .pln-f input, .modal.pln-wz .pln-f select, .modal.pln-wz .pln-f textarea { 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-control); padding: 0 var(--s-2); min-width: 0; width: 100%; }
.modal.pln-wz .pln-f textarea { height: auto; min-height: calc(var(--h-control) * 2.4); padding: var(--s-2) var(--s-2); line-height: 1.45; resize: vertical; }
.modal.pln-wz .pln-f input[readonly] { background: var(--surface-2); color: var(--text-muted); }
.modal.pln-wz .pln-f input:focus, .modal.pln-wz .pln-f select:focus, .modal.pln-wz .pln-f textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pln-f .pod { font-size: var(--t-xs); color: var(--text-faint); line-height: 1.4; }
.pln-f .blad { font-size: var(--t-xs); color: var(--danger); font-weight: var(--w-bold); }
.modal.pln-wz .pln-f.zle input, .modal.pln-wz .pln-f.zle select { border-color: var(--danger); }
.pln-pan { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-3) var(--s-3); background: var(--surface); }
.pln-pan > h3 { margin: 0 0 var(--s-2); font-size: var(--t-base); font-weight: var(--w-strong); display: flex; align-items: center; gap: var(--s-2); }
.pln-pan > h3 small { font-weight: var(--w-medium); color: var(--text-faint); font-size: var(--t-xs); }
.pln-pan > h3 .pln-sp { flex: 1; }
.pln-pan > h3 .pln-hp { margin-left: calc(-1 * var(--s-2)); }   /* „Harmonogram planowania”: odstęp flex + spacja twarda dawały podwójną przerwę — zostaje sama spacja */
.pln-ost { border-radius: var(--r); padding: var(--s-2) var(--s-3); font-size: var(--t-sm); line-height: 1.45; }
.pln-ost.uw { background: var(--warn-soft); color: var(--warn-strong); }
.pln-ost.bl { background: var(--danger-soft); color: var(--danger); }
.pln-ost.ok { background: var(--ok-soft); color: var(--ok); }
.pln-ost.inf { background: var(--surface-2); color: var(--text-muted); }
.pln-seg { display: inline-grid; grid-auto-flow: column; gap: 3px; padding: 3px; border-radius: var(--r); background: var(--surface-3); }
.pln-seg button { 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; }
.pln-seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--cien-1); }
.pln-st { display: inline-flex; align-items: center; gap: var(--s-2); height: 26px; padding: 0 var(--s-2); border-radius: var(--r); border: 1px solid transparent; font-size: var(--t-xs); font-weight: var(--w-bold); white-space: nowrap; background: var(--surface-3); color: var(--text-muted); }
.pln-st i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pln-st.got { background: var(--ok-soft); color: var(--ok); }
.pln-st.wt { background: color-mix(in srgb,var(--etap-design) 14%,var(--surface)); color: var(--etap-design); }
button.pln-st { cursor: pointer; }
button.pln-st:hover { border-color: currentColor; }
.pln-mn { position: absolute; min-width: 210px; max-width: 300px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--cien-2); padding: var(--s-2); z-index: 5; }
.pln-mn button { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: var(--h-control); border: 0; border-radius: var(--r-sm); background: transparent; padding: 0 var(--s-3); font: inherit; font-size: var(--t-base); color: var(--text); text-align: left; cursor: pointer; }
.pln-mn button:hover { background: var(--surface-3); }
.pln-mn button.bl { color: var(--danger); }
.pln-mn button:disabled { color: var(--text-faint); cursor: not-allowed; }
.pln-mn button i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pln-mn hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-1) 2px; }
.pln-mn .tyt { padding: var(--s-2) var(--s-3) var(--s-1); font-size: var(--t-xs); font-weight: var(--w-strong); color: var(--text-faint); }
:root[data-ui="tablet"] .pln-wz.pln-okno { width: calc(100vw / var(--skala-ui) - var(--s-5)); height: calc(100dvh / var(--skala-ui) - var(--s-5)); }
.pln-wz .pln-cialo { padding: var(--s-3) var(--s-4); }
.pln-wz > footer { padding: var(--s-2) var(--s-4) calc(var(--s-2) + env(safe-area-inset-bottom)); flex-wrap: wrap; }
.modal.pln-wz .pln-f > label { display: flex; align-items: center; gap: var(--s-1); }
.modal.pln-wz .pln-f > label small { font-weight: var(--w-medium); color: var(--text-faint); }
.pln-sp { flex: 1; }
.pln-podp { margin: 0; font-size: var(--t-xs); line-height: 1.45; color: var(--text-faint); font-weight: var(--w-regular); }
.pln-wz small { font-size: var(--t-xs); }
.pln-wz p { font-size: var(--t-sm); }
.modal.pln-wz .pln-f input:disabled { background: var(--surface-3); color: var(--text-faint); }
.modal.pln-wz .pln-f input[type=range] { height: var(--h-control); border: 0; padding: 0; accent-color: var(--accent); box-shadow: none; }
.pln-st.bl { background: var(--danger-soft); color: var(--danger); }
.pln-btn.czerw-t { color: var(--danger); border-color: var(--danger-ramka); background: var(--surface); }
.pln-btn.czerw-t:hover { background: var(--danger-soft); }
.pln-btn:disabled { opacity: .5; cursor: not-allowed; }
.pln-ik.us { color: var(--danger); }
.pln-leg { display: flex; flex-wrap: wrap; gap: var(--s-3); font-size: var(--t-xs); color: var(--text-muted); margin-top: var(--s-2); }
.pln-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--line-strong); margin-right: var(--s-1); vertical-align: -1px; }
.pln-leg i.l-wyb { background: var(--accent-soft); border-color: var(--accent); }
.pln-leg i.l-zaj { background: var(--danger-soft); border-color: var(--danger-ramka); }
.pln-wz .pln-pusto { padding: var(--s-3); font-size: var(--t-sm); color: var(--text-faint); }
.pln-wz .pln-cialo > .pln-pan + .pln-pan, .pln-wz .pln-cialo > * + .pln-pan { margin-top: var(--s-4); }
.modal.pln-wz .pln-pan > h3 select { height: var(--h-control); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 0 var(--s-2); font: inherit; font-size: var(--t-sm); font-weight: var(--w-medium); background: var(--surface); color: var(--text); }
:root[data-ui="tablet"] button.pln-st, .ramka.natywnie button.pln-st { height: var(--h-control); padding: 0 var(--s-3); }
.pln-nzw { display: flex; flex-direction: column; min-width: 0; }
.pln-nzw b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos { display: grid; grid-template-columns: 170px minmax(0,1fr); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); margin-top: var(--s-2); }
.pos-l { border-right: 1px solid var(--line); background: var(--surface); }
.pos-lh { height: 60px; display: flex; align-items: flex-end; padding: 0 var(--s-3) var(--s-2); font-size: var(--t-xs); font-weight: var(--w-strong); color: var(--text-faint); border-bottom: 1px solid var(--line); }
.pos-lo { display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-3); border-bottom: 1px solid var(--line-soft); min-width: 0; }
.pos-lo:last-child { border-bottom: 0; }
.pos-lo span { display: flex; flex-direction: column; min-width: 0; }
.pos-lo b { font-size: var(--t-sm); font-weight: var(--w-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-lo small { font-size: var(--t-xs); color: var(--text-faint); }
.pos-p { overflow-x: auto; overflow-y: hidden; outline: none; }
.pos-p:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.pos-w { position: relative; }
.pos-h { position: relative; height: 60px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.pos-hm span { position: absolute; top: 4px; padding-left: var(--s-1); font-size: var(--t-xs); font-weight: var(--w-strong); color: var(--text-muted); white-space: nowrap; border-left: 1px solid var(--line); }
.pos-hd span { position: absolute; bottom: 4px; width: 32px; display: flex; flex-direction: column; align-items: center; font-size: var(--t-xs); font-weight: var(--w-bold); color: var(--text-muted); line-height: 1.15; }
.pos-hd span small { font-size: var(--t-xs); font-weight: var(--w-medium); color: var(--text-faint); }
.pos-hd span.wk { color: var(--text-faint); }
.pos-hd span.dz { color: var(--accent); font-weight: var(--w-strong); }
.pos-t { position: relative; }
.pos-wk i { position: absolute; top: 0; bottom: 0; width: 32px; background: color-mix(in srgb,var(--text) 5%,transparent); }
.pos-r { position: absolute; left: 0; right: 0; border-bottom: 1px solid var(--line-soft); }
.pos-dzis { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--accent); opacity: .7; }
.pos-pas { position: absolute; height: 32px; border-radius: var(--r-sm); display: flex; align-items: center; padding: 0 var(--s-2); font-size: var(--t-xs); font-weight: var(--w-bold); overflow: hidden; white-space: nowrap; }
.pos-pas span { overflow: hidden; text-overflow: ellipsis; }
.pos-pas.inne { background: color-mix(in srgb,var(--etap-design) 16%,var(--surface)); color: var(--text-muted); border: 1px solid color-mix(in srgb,var(--etap-design) 35%,transparent); }
.pos-pas.wyb { background: var(--accent); color: var(--on-accent); cursor: grab; touch-action: none; box-shadow: var(--cien-1); z-index: 2; }
.pos-pas.wyb:active { cursor: grabbing; }
.pos-pas.wyb:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.pos-pas.wyb.rob { background: color-mix(in srgb,var(--accent) 22%,var(--surface)); color: var(--accent); border: 2px dashed var(--accent); }
.pos-uch { position: absolute; top: 0; bottom: 0; width: 12px; cursor: ew-resize; background: linear-gradient(90deg,transparent 3px,currentColor 3px,currentColor 5px,transparent 5px,transparent 7px,currentColor 7px,currentColor 9px,transparent 9px); opacity: .55; }
.pos-uch.l { left: 0; }
.pos-uch.p { right: 0; }
.pos-pas span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; padding: 0 var(--s-2); }
.pos-pas span small { font-size: var(--t-xs); font-weight: var(--w-medium); opacity: .85; overflow: hidden; text-overflow: ellipsis; }
.pos-pas.wyb.ciag { opacity: .85; box-shadow: var(--cien-2); }
.pos-pas { height: 40px; padding: 0; }
.pos-t { cursor: copy; }
.pos-pas { cursor: default; }
.pos-nar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-3); }
.pos-zatw { margin-top: var(--s-3); }
.pln-leg i.l-in { background: color-mix(in srgb,var(--etap-design) 16%,var(--surface)); border-color: color-mix(in srgb,var(--etap-design) 35%,transparent); }
.pln-leg i.l-dz { width: 2px; border: 0; background: var(--accent); }
.pln-st.uw { background: var(--warn-soft); color: var(--warn-strong); }
.modal.pln-wz .pln-f.zle input { border-color: var(--danger); }
.pln2 { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.pln-s { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.pln2 .pln-pan { display: flex; flex-direction: column; gap: var(--s-3); margin: 0; min-width: 0; }
.pln2 .pln-pan > h3 { margin: 0; }
.pln-zakl { display: none; }
.pln-okno .pln-aw { letter-spacing: -.04em; }
.pln-kr { height: var(--h-control); display: grid; place-items: center; color: var(--text-faint); font-weight: var(--w-bold); }
.pln-inz { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.pln-et { font-size: var(--t-xs); font-weight: var(--w-bold); color: var(--text-muted); margin-right: var(--s-1); }
.pln-har .pos { margin-top: 0; position: relative; }
.pln-har .pos::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px; background: linear-gradient(90deg,transparent,var(--surface)); pointer-events: none; }
.pln-har .pos-lo .pln-aw { display: inline-grid; place-items: center; flex-direction: row; }
.pln-har .pos-hm .pln-mies { background: var(--surface-2); padding-right: var(--s-2); z-index: 1; }
.pln-har .pos-pas.wyb > span { padding: 0 var(--s-2) 0 14px; }
.pln-har .pos-uch { opacity: .3; transition: opacity .12s; }
.pln-har .pos-pas:hover .pos-uch, .pln-har .pos-pas:focus-visible .pos-uch { opacity: .7; }
.pln-har .pos-pas.inne > span { padding: 0 var(--s-2); }
.pln-har .pos-zk { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb,var(--accent) 7%,transparent); border-left: 1px dashed color-mix(in srgb,var(--accent) 45%,transparent); border-right: 1px dashed color-mix(in srgb,var(--accent) 45%,transparent); pointer-events: none; }
.pln-har .pos-hd span.zkr { color: var(--text); }
.pln-har .pos-hd span.zkr::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: -4px; height: 3px; border-radius: 2px 2px 0 0; background: var(--accent); }
.pln-har .pos-hd span.zkr.dz { color: var(--accent); }
.pln-har .pln-leg { margin-top: 0; align-items: center; }
.pln-har .pln-leg i.l-rob { background: color-mix(in srgb,var(--accent) 22%,var(--surface)); border: 1px dashed var(--accent); }
.pln-har .pln-leg i.l-wk { background: color-mix(in srgb,var(--text) 8%,var(--surface)); }
.pln-har .pln-leg i.l-zk { background: color-mix(in srgb,var(--accent) 7%,var(--surface)); border: 1px dashed color-mix(in srgb,var(--accent) 55%,transparent); }
.pln-pod { flex-basis: 100%; color: var(--text-faint); }
.pln-har .pos-pas.wyb { touch-action: pan-x pan-y; }
.pln-har .pos-pas.chwyt { outline: 2px solid var(--text); outline-offset: 2px; box-shadow: var(--cien-2); }
.pln-th, .pln-w { display: grid; grid-template-columns: minmax(170px,1.1fr) minmax(280px,1fr) minmax(170px,.8fr) minmax(280px,1.5fr); align-items: center; gap: var(--s-2) var(--s-4); }
.pln-th { font-size: var(--t-xs); font-weight: var(--w-bold); color: var(--text-faint); padding: 0 0 var(--s-2); border-bottom: 1px solid var(--line); }
.pln-w { padding: var(--s-3) 0; border-bottom: 1px solid var(--line-soft); }
.pln-w:last-child { border-bottom: 0; padding-bottom: 0; }
.pln-mt { display: none; }
.pln-n { display: flex; align-items: center; gap: var(--s-2); min-width: 0; font-size: var(--t-base); }
.pln-n small { font-size: var(--t-xs); color: var(--text-faint); }
.pln-n .pln-nzw b { white-space: normal; }
.pln-tm { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pln-tm small { font-size: var(--t-xs); color: var(--text-faint); }
.pln-td { display: flex; align-items: center; gap: var(--s-1); min-width: 0; }
.modal.pln-wz .pln-td input[type=date] { flex: 1 1 0; min-width: 0; 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-sm); font-weight: var(--w-bold); padding: 0 var(--s-1) 0 var(--s-2); }
.modal.pln-wz .pln-td input[type=date]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pln-td .pln-kr { height: auto; }
.pln-ki { min-width: 0; }
.pln-av { display: inline-flex; align-items: center; gap: var(--s-2); max-width: 100%; height: var(--h-control); padding: 0 var(--s-2) 0 var(--s-1); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); font: inherit; font-size: var(--t-sm); font-weight: var(--w-bold); color: var(--text); cursor: pointer; }
.pln-av > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pln-av > .icon { width: 14px; height: 14px; color: var(--text-faint); flex: none; }
.pln-av:hover, .pln-av[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); }
.pln-bom { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); min-width: 0; font-size: var(--t-sm); }
.pln-bp { flex: 1 1 100%; min-width: 0; display: flex; align-items: center; gap: var(--s-2); color: var(--text-faint); }
.pln-bp > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pln-bp > .icon { width: 16px; height: 16px; flex: none; }
.pln-bom.pln-ma .pln-bp { color: var(--text); font-weight: var(--w-bold); }
.pln-bom.pln-ma .pln-bp > .icon { color: var(--accent); }
.pln-ba { display: flex; gap: var(--s-1); flex: none; }
.pln-ba .pln-btn { height: var(--h-control); padding: 0 var(--s-3); font-size: var(--t-sm); }
.pln-bp > .bom-nr { margin-left: auto; }
.bom-nr { flex: none; padding: 1px 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-strong); white-space: nowrap; }
.bom-nr.nowy { background: var(--warn-soft); color: var(--warn-strong); }
.bom-nr.ob { background: var(--accent-soft); color: var(--accent); }
.pln-bi { flex-basis: 100%; font-size: var(--t-xs); color: var(--text-faint); line-height: 1.35; }
.pln-ba { flex-wrap: wrap; }
.pln-ba .pln-btn .icon { width: 14px; height: 14px; }
.bom-zm { flex-basis: 100%; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--warn-soft); color: var(--text); font-size: var(--t-sm); line-height: 1.4; }
.bom-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-3); font-size: var(--t-sm); color: var(--text-muted); }
.bom-meta > span { display: inline-flex; align-items: center; gap: var(--s-2); }
.bom-meta .icon { width: 16px; height: 16px; color: var(--text-faint); }
.bom-meta b { color: var(--text); }
.bom-t { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin: var(--s-3) 0; }
.pln-wz.bom-por { width: min(900px,calc(100vw / var(--skala-ui) - 48px)); }
.pln-wz.bom-por.bom-por6 { width: min(1100px,calc(100vw / var(--skala-ui) - 48px)); }
.bom-wst { display: none; }
.bom-wst .icon { transform: rotate(180deg); }
.bom-th, .bom-tr { display: grid; grid-template-columns: minmax(0,1fr) 112px 112px 124px; gap: var(--s-3); align-items: center; padding: var(--s-2) var(--s-3); }
.bom-t2 .bom-th, .bom-t2 .bom-tr { grid-template-columns: minmax(0,1fr) 120px; }
.bom-t6 .bom-th, .bom-t6 .bom-tr { grid-template-columns: minmax(0,1fr) 96px 96px 104px 100px 168px; }
.bom-th { background: var(--surface-2); font-size: var(--t-xs); font-weight: var(--w-strong); color: var(--text-faint); border-bottom: 1px solid var(--line); align-items: end; }
.bom-th small { display: block; font-weight: var(--w-medium); }
.bom-tr { border-top: 1px solid var(--line-soft); font-size: var(--t-sm); }
.bom-g + .bom-tr, .bom-th + .bom-tr { border-top: 0; }
.bom-t .r { text-align: right; }
.bom-t .num { font-variant-numeric: tabular-nums; }
.bom-p { display: flex; flex-direction: column; min-width: 0; }
.bom-p b { font-weight: var(--w-bold); }
.bom-p small { color: var(--text-faint); font-size: var(--t-xs); }
.bom-g { display: flex; align-items: center; gap: var(--s-2); width: 100%; padding: var(--s-2) var(--s-3); background: var(--surface-2); border: 0; border-top: 1px solid var(--line); font: inherit; font-size: var(--t-xs); font-weight: var(--w-strong); color: var(--text-muted); text-align: left; }
.bom-th + .bom-g { border-top: 0; }
.bom-g b { color: var(--text); }
.bom-gb { cursor: pointer; min-height: var(--h-control); }
.bom-gb .icon { width: 14px; height: 14px; transition: transform .15s; }
.bom-gb[aria-expanded="false"] .icon { transform: rotate(-90deg); }
.bom-d { font-weight: var(--w-strong); white-space: nowrap; }
.bom-d.plus { color: var(--warn-strong); }
.bom-d.minus { color: var(--text-muted); }
.bom-tr.wyp .bom-p b { text-decoration: line-through; color: var(--text-muted); }
.bom-tr.bz { color: var(--text-muted); }
.bom-g.wi b { color: var(--warn-strong); }
.bom-g.mn b { color: var(--text); }
.bom-pt { align-self: center; font-size: var(--t-sm); color: var(--text-faint); }
.bom-r { display: inline-flex; align-items: center; padding: 2px var(--s-2); border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: var(--w-strong); white-space: nowrap; }
.bom-r.uw { background: var(--warn-soft); color: var(--warn-strong); }
.bom-r.inf { background: var(--surface-3); color: var(--text); }
.bom-r.bl { background: var(--danger-soft); color: var(--danger); }
.bom-wyb { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: end; gap: var(--s-2); max-width: 760px; }
.bom-zam { border: 1px solid var(--line); }
.bom-pods { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0 0; }
.bom-okno .pln-ost { margin: var(--s-3) 0 0; }
.bom-okno .pln-cialo > .pln-ost:first-child { margin-top: 0; }
.bom-zm > span { flex: 1 1 200px; }
.bom-zm .pln-btn, .bom-ostp .pln-btn { height: var(--h-control); background: var(--surface); }
.bom-ostp { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.bom-ostp > span { flex: 1 1 240px; }
.bom-us { gap: var(--s-1); }
.bom-us .icon { width: 14px; height: 14px; }
.bom-h { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.bom-h li { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); }
.bom-h li.ob { border-color: color-mix(in srgb,var(--accent) 45%,transparent); background: color-mix(in srgb,var(--accent) 4%,var(--surface)); }
.bom-hg { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.bom-hg .pln-sp { flex: 1; }
.bom-hp { display: flex; align-items: center; gap: var(--s-2); min-width: 0; font-size: var(--t-base); font-weight: var(--w-bold); }
.bom-hp span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bom-hp .icon { width: 16px; height: 16px; color: var(--accent); flex: none; }
.bom-hi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); font-size: var(--t-sm); color: var(--text-muted); }
.bom-hi > span { display: inline-flex; align-items: center; gap: var(--s-2); }
.bom-hi > .bom-hz { display: block; flex-basis: 100%; color: var(--text-faint); }
.bom-hz b { color: var(--text-muted); }
.bom-ha { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.bom-ha .pln-sp { flex: 1; }
.pln-ost + .bom-h { margin-top: var(--s-3); }
.pln-wid, .pln-lst, .pln-pod-l { display: none; }
.pln-los { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--t-xs); color: var(--text-faint); }
.pln-lo { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.pln-lo h4 { display: flex; align-items: center; gap: var(--s-2); margin: 0; padding: var(--s-2) var(--s-3); background: var(--surface-2); font-size: var(--t-base); font-weight: var(--w-strong); }
.pln-lo h4 small { margin-left: auto; font-weight: var(--w-medium); color: var(--text-faint); font-size: var(--t-xs); }
.pln-lw { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: var(--s-1) var(--s-2); width: 100%; min-height: 52px; padding: var(--s-2) var(--s-3); border: 0; border-top: 1px solid var(--line-soft); background: var(--surface); font: inherit; color: var(--text); text-align: left; }
button.pln-lw { cursor: pointer; }
.pln-lt { display: flex; flex-direction: column; min-width: 0; }
.pln-lt b { font-size: var(--t-base); font-weight: var(--w-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pln-lt small { font-size: var(--t-xs); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.pln-lw > .icon { width: 16px; height: 16px; color: var(--text-faint); }
.pln-lw.inne { color: var(--text-muted); min-height: 48px; }
.pln-lw.inne .pln-lt b { font-weight: var(--w-medium); font-size: var(--t-sm); }
.pln-lw.rob .pln-lt small { color: var(--warn-strong); font-weight: var(--w-bold); }
.pln-lb { margin: 0; padding: var(--s-2) var(--s-3); border-top: 1px solid var(--line-soft); font-size: var(--t-sm); color: var(--text-faint); }
.pln-ts { display: flex; flex-direction: column; gap: var(--s-3); }
.pln-td2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.pln-tos { display: flex; flex-direction: column; gap: var(--s-1); }
.pln-tos button { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: var(--s-1) var(--s-3); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font: inherit; font-size: var(--t-base); color: var(--text); text-align: left; cursor: pointer; }
.pln-tos button > span:not(.pln-aw, .icon) { flex: 1; }
.pln-tos button[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); font-weight: var(--w-bold); }
.pln-tos .icon { width: 16px; height: 16px; color: var(--accent); }
.bom-pn { font-size: var(--t-md); font-weight: var(--w-strong); }
.bom-pr { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--surface-2); }
.bom-prw { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); font-size: var(--t-sm); }
.pln-czat { display: none; }
.pln-czh { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: var(--s-1) var(--s-2); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); border-bottom: 1px solid var(--line); }
.pln-czt { display: flex; flex-direction: column; min-width: 0; }
.pln-czh b { font-size: var(--t-base); }
.pln-czh small { color: var(--text-faint); }
.pln-nz { display: inline-flex; align-items: center; gap: var(--s-2); margin-right: var(--s-2); font-size: var(--t-sm); font-weight: var(--w-bold); color: var(--text-muted); }
.pln-nz::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--warn-strong); }
:root[data-ui="tablet"] .pln-th, :root[data-ui="tablet"] .pln-w { grid-template-columns: minmax(140px,1fr) 256px minmax(140px,.8fr) minmax(230px,1.3fr); gap: var(--s-2) var(--s-3); }
:root[data-ui="tablet"] .pln-har .pos-uch { width: 16px; }
.pln-wz { isolation: isolate; }

/* ===== CZĘŚĆ 2 — dopasowanie do programu (ręcznie) ===== */
/* Układ okna w tle programu: tło okien centruje okno siatką, więc okno nie jest pozycjonowane bezwzględnie jak we wzorze. */
.modal.pln-wz.pln-okno { --okno-w: 1180px; }   /* wzór: 1180 px (tablet: ekran − 24); położenie i wysokość jak każde duże okno — 20-okna-polozenie.css */
.modal.pln-wz > header { flex: 0 0 auto; }
.modal.pln-wz > header > div { min-width: 0; }
.modal.pln-wz > header h2 { line-height: var(--lh-base); }
.modal.pln-wz > footer { flex: 0 0 auto; justify-content: flex-start; border-top-color: var(--line); }
.modal.pln-wz > header .modal-back-button { display: none; }
.modal.pln-wz .pln-cialo { position: static; }
.pln-czesc, .pln-form { display: contents; }
/* Przyciski okna: własne klasy (bez automatu kolorów z napisu) — krój i kursor jak wszystkie przyciski programu. */
.pln-btn, .pln-ik, .pln-seg button, .pln-av, .pln-sum, .pln-lw, .pln-tos button, .pln-mn button, .bom-gb { font-family: inherit; cursor: pointer; }
.pln-ik > .icon { width: 18px; height: 18px; }
.pln-btn:focus-visible, .pln-ik:focus-visible, .pln-seg button:focus-visible, .pln-av:focus-visible, .pln-sum:focus-visible, .pln-lw:focus-visible, .pln-tos button:focus-visible, .bom-gb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pln-btn[disabled], .pln-ik[disabled], .pln-seg button[disabled], .pln-av[disabled], .pln-sum[disabled], .pln-lw[disabled] { opacity: .5; cursor: not-allowed; }
/* Awatar programu (kolor działu, zdjęcie) w rozmiarach wzoru: 22 / 26 / 28 px, biała obwódka 2 px. */
.avatar.pln-aw { --avatar-ramka: 2px; border: var(--avatar-ramka) solid var(--surface); border-radius: 50%; outline: 0; font-weight: var(--w-strong); letter-spacing: -.04em; }
.avatar.pln-aw-22 { --avatar-d: 22px; }
.avatar.pln-aw-26 { --avatar-d: 26px; }
.avatar.pln-aw-28 { --avatar-d: 28px; }
/* Pole daty: „polskie pole daty” programu (schowane pole systemowe + przycisk z datą dd.mm.rrrr i kalendarzem programu)
   w wymiarach pola daty ze wzoru: wysokość kontrolki, róg 8, ramka, 14 px (w tabeli konstrukcji 13 px / 600). */
.modal.pln-wz .pl-data { display: block; width: 100%; min-width: 0; }
.modal.pln-wz .pl-data-pole { width: 100%; height: var(--h-control); min-height: 0; padding: 0 var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); box-shadow: none; color: var(--text); font-size: var(--t-control); font-weight: var(--w-regular); line-height: 1.2; }
.modal.pln-wz .pl-data-pole:is(:focus-visible, .is-open) { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.modal.pln-wz .pl-data-pole > .icon { width: 14px; height: 14px; }
.pln-td .pl-data { flex: 1 1 0; }
.modal.pln-wz .pln-td .pl-data-pole { padding: 0 var(--s-1) 0 var(--s-2); font-size: var(--t-sm); font-weight: var(--w-bold); }
.modal.pln-wz > header h2:focus { outline: 0; }
/* Pola w oknie: wymiary wzoru zamiast skórki pól programu (cień, wypełnienie, odstęp 7/9). */
.modal.pln-wz .pln-f :is(input, select, textarea) { min-height: 0; box-shadow: none; }
.modal.pln-wz .pln-f select { appearance: auto; background-image: none; padding-right: var(--s-2); }
/* Menu wyboru inżyniera: nad oknem, przy przycisku (pozycję liczy okna/plany-okno.js). */
.pln-mn { position: fixed; z-index: var(--z-lista); }
.pln-mn button > .icon { width: 16px; height: 16px; color: var(--accent); }
/* Uwagi: edytor programu w panelu wzoru — przyciski paska na wysokość kontrolki, pole 120 px, pismo 14 px. */
.pln-uw .rich-toolbar :is(button, .rich-image-button) { width: var(--h-control); height: var(--h-control); }
.pln-uw .rich-toolbar select { height: var(--h-control); }
.pln-uw .rich-editable { min-height: 120px; font-size: var(--t-base); }
/* Czat etapu: szuflada z prawej (komputer, tablet) — w środku czat programu z wątkiem etapu Plany. Tytuł szuflady zastępuje
   tytuł czatu, osoby wątku stoją pod nim z lewej, pasek formatowania wiadomości zwinięty pod „Aa”. */
.pln-czat .project-chat-panel { flex: 1; min-height: 0; border: 0; border-radius: 0; }
.pln-czat .project-chat-title { display: none; }
.pln-czat .pln-czh { border-bottom: 0; padding-bottom: 0; }
.pln-czat .project-chat-people { justify-content: flex-start; padding: 0 var(--s-2) var(--s-2) var(--s-4); border-bottom: 1px solid var(--line); }
.pln-czat .project-chat-people .avatar { --avatar-d: 28px; }
:root[data-ui="desktop"] .pln-czat .project-chat-people .chat-thread-manage { height: 28px; min-height: 0; }
.pln-czat .project-chat-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-2); padding: var(--s-2) var(--s-3) var(--s-3); }
.pln-czat .project-chat-compose > :not(.chat-pole, .pln-aa) { grid-column: 1 / -1; }
.pln-czat:not(.aa) .rich-toolbar { display: none; }
.pln-czat .rich-editable { min-height: 48px; }
.pln-ik.pln-aa { border: 1px solid var(--line); color: var(--text-muted); font-size: var(--t-base); font-weight: var(--w-strong); }
.pln-ik.pln-aa[aria-pressed="true"] { border-color: transparent; background: var(--accent-soft); color: var(--accent); }
/* Okno na oknie: tło poprzedniego okna zostaje pod spodem (jak we wzorze), a nie znika. */
#modal-root .modal-backdrop.is-suspended:has(> .modal.pln-wz) { display: grid; }
#modal-root .modal-backdrop:has(> .modal:is(.bom-okno, .pln-arkusz)) { backdrop-filter: none; }
.pln-uw .rich-editor { border-radius: var(--r-sm); }
/* Tło okna wg wzoru bez własnego odstępu: szerokość i wysokość okna liczą się od krawędzi ekranu (jak we wzorze). */
#modal-root .modal-backdrop:has(> .modal.pln-wz) { padding: 0; }
/* PN7c — dotyk: pole wiadomości mieści kółko „Wyślij” (44 px) z odstępem z obu stron — kółko nie wychodzi ponad ramkę pola. */
:root:not([data-ui="desktop"]) .pln-czat .chat-pole .rich-editable { min-height: calc(var(--wyslij) + var(--s-2) * 2); }
/* PN7d — pasek edytora Uwag jak we wzorze (.ui-ed-p; ta sama zasada co pasek edytora w oknie Wiadomości): przyciski bez ramki, szare,
   pismo 14 px zwykłej grubości, ikony 16 px; listy „Tekst” i „Skala” bez ramki, szare, zwykłej grubości. */
.pln-uw .rich-toolbar { gap: var(--s-1); padding: var(--s-1); border-bottom-color: var(--line); }
.pln-uw .rich-toolbar :is(button, .rich-image-button) { border: 0; color: var(--text-muted); font-size: var(--t-base); font-weight: var(--w-regular); }
.pln-uw .rich-toolbar :is(strong, em, u) { font-weight: var(--w-strong); }
.pln-uw .rich-toolbar select { border: 0; border-radius: var(--r-sm); background-color: transparent; box-shadow: none; color: var(--text-muted); font-weight: var(--w-regular); }
.pln-uw .rich-toolbar select:hover { background-color: var(--surface-3); }
.pln-uw .rich-toolbar .icon { width: 16px; height: 16px; }
/* PN7d — osoby wątku pod tytułem szuflady: ten sam odstęp i linia także na tablecie i telefonie (reguły czatu dla dotyku je zdejmowały). */
.modal.pln-wz .pln-czat .project-chat-people { padding: 0 var(--s-2) var(--s-2) var(--s-4); border-bottom: 1px solid var(--line); }
/* PN7e — nagłówek czatu jak we wzorze: osoby wątku 4 px pod podtytułem (odstęp panelu szuflady idzie pod linię, nie nad osoby),
   przycisk zamknięcia w osi całego nagłówka (tytuł + osoby); na dotyku pigułka „N os.” (44 px) nie podnosi wiersza osób. */
.modal.pln-wz .pln-czat { gap: 0; }
.modal.pln-wz .pln-czat .project-chat-people { margin-bottom: var(--s-4); }
:root:not([data-ui="desktop"]) #modal-root .pln-czat .project-chat-people .chat-thread-manage { position: relative; height: var(--s-6); min-height: 0; }
:root:not([data-ui="desktop"]) #modal-root .pln-czat .project-chat-people .chat-thread-manage::after { content: ""; position: absolute; inset: calc(var(--s-2) * -1) 0; }   /* pole dotyku 44 px */