/* ── oś czasu ── */
.ruler { height:32px; flex:0 0 auto; display:flex; border-bottom:1px solid var(--grid); }
.ruler-rail { width:var(--rail-w); flex:0 0 auto; border-right:1px solid var(--grid);
  display:flex; align-items:center; padding:0 10px; color:var(--muted); font-size:10.5px; font-weight:700; letter-spacing:.05em; white-space:nowrap; overflow:hidden; }
.ruler-area { flex:1; position:relative; overflow:hidden; }
.rtick { position:absolute; top:0; bottom:0; display:flex; align-items:center; color:var(--muted);
  font-size:10.5px; padding-left:4px; border-left:1px solid var(--grid); white-space:nowrap; }
.rtick.day { border-left-color:#4a4a48; color:var(--ink2); font-weight:800; letter-spacing:.04em; }
.ruler-rail { cursor:pointer; }
.railback { color:var(--accent); font-weight:900; margin-left:4px; }
.tl-body { flex:1; min-height:0; overflow-y:auto; position:relative; }
.grp { display:flex; height:22px; align-items:center; }
.grp-label { width:var(--rail-w); flex:0 0 auto; padding:0 10px; font-size:10.5px; font-weight:800;
  letter-spacing:.1em; color:var(--muted); background:var(--page); border-right:1px solid var(--grid); }
.grp-line { flex:1; border-bottom:1px solid var(--grid); height:1px; align-self:end; }
.row { display:flex; height:var(--row-h); position:relative; }
.row-label { width:var(--rail-w); flex:0 0 auto; background:var(--surface); border-right:1px solid var(--grid);
  border-bottom:1px solid rgba(255,255,255,.04); padding:8px 10px 5px; position:relative; z-index:2; cursor:default; }
.row-name { display:flex; align-items:center; gap:6px; font-weight:800; font-size:12.5px; white-space:nowrap; }
.dot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.row-load { color:var(--muted); font-size:10.5px; font-weight:700; margin-top:3px; }
.row-load.warn { color:var(--warn); }
.row-load.crit { color:var(--crit-hi); }
.stage.ark .row-label, .stage.grupy .row-label { padding:5px 10px 3px; }
.stage.ark .row-load, .stage.grupy .row-load { margin-top:1px; }
/* siatka pionowa NIE jest już tłem CSS — linie .vgrid/.daysep rysuje renderTimeline w tych
   samych pozycjach co ticki szyny, więc przy przewiniętym oknie nic się nie rozjeżdża */
.row-area { flex:1; position:relative; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.04); }
.vgrid { position:absolute; top:0; bottom:0; width:1px; background:rgba(44,44,42,.5); pointer-events:none; }
.daysep { position:absolute; top:0; bottom:0; width:1px; background:#4a4a48; pointer-events:none; }
.bd-night { position:absolute; top:0; bottom:0; background:var(--night-shade); pointer-events:none; }
.bd-past { position:absolute; top:0; bottom:0; pointer-events:auto; cursor:help;
  background:repeating-linear-gradient(-45deg, rgba(255,255,255,.025) 0 8px, transparent 8px 16px), rgba(0,0,0,.42); }
.hz { position:absolute; top:0; bottom:0; background:rgba(250,178,25,.055);
  border-right:1px dashed rgba(250,178,25,.35); pointer-events:none; }
.row.focus .row-label { box-shadow:inset 3px 0 0 var(--accent); background:#20232a; }
.row.focus .row-name { color:var(--accent); }
.row.focus .row-area { background-color:rgba(57,135,229,.05); }
.block { position:absolute; top:6px; bottom:6px; border-radius:3px; overflow:hidden; display:flex;
  align-items:center; padding:0 6px; font-size:11.5px; font-weight:700; white-space:nowrap; cursor:default; color:#fff; }
.stage.ark .block, .stage.grupy .block { top:4px; bottom:4px; font-size:10.5px; }
.block-label { overflow:hidden; text-overflow:ellipsis; }
.block.fire-edge { box-shadow:inset 0 0 0 1px rgba(250,178,25,.8); }
.stage.ark .block[draggable], .stage.grupy .block[draggable] { cursor:grab; }
.stage.ark .block[draggable]:active, .stage.grupy .block[draggable]:active { cursor:grabbing; }
.block.moving { opacity:.35; }
.chg { position:absolute; top:26%; bottom:26%; background:var(--zbro); border-radius:2px; min-width:3px; cursor:default;
  display:flex; align-items:center; justify-content:center; gap:4px; overflow:hidden; padding:0 1px;
  font-size:9px; font-weight:800; line-height:1; color:rgba(255,255,255,.93); }
/* przezbrojenie na osi jest MONOCHROMATYCZNE: kropla = łączna wymiana farb (zmycia + nałożenia),
   strzałka = rolka surowca (→ ta sama wstęga, ↻ nowa). Kolor niesie już blok zlecenia obok. */
.chg .drops { display:inline-flex; align-items:center; gap:2px; flex:0 0 auto; }
.chg .roll { display:inline-flex; align-items:center; flex:0 0 auto; opacity:.85; }
.chg .ico { width:11px; height:11px; display:block; }
.chg .drops b { font-variant-numeric:tabular-nums; }
.chg.ciezkie { background:#6b6862; box-shadow:inset 0 0 0 1px rgba(208,59,59,.55); }
/* ── kreski zmian („linia zmiany daty"): per maszyna uskakuje do KOŃCA elementu, który
   przecina granicę (przezbrojenie i druk); przeciągalna per maszyna (kursor ⟷, snap ~10 px
   do krawędzi bloków, dwuklik = auto). Widoczna kreska to JEDNA path na granicę w kolorze
   SOLID — segmenty per maszyna z opacity podwajały krycie na łączeniach (jasne kropki),
   a półprzezroczysty stroke prześwitywał na przecięciach z liniami siatki. ── */
svg.shiftlines { position:absolute; left:0; top:0; z-index:6; pointer-events:none; overflow:visible; }
.sline-hit { fill:none; stroke:#fff; stroke-opacity:0; stroke-width:10; pointer-events:stroke; cursor:col-resize; }
.sline-vis { fill:none; stroke:#4a4a4e; stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round;
  transition:stroke .15s ease, filter .15s ease; }
.sline-line:hover .sline-vis, .sline-line.dragging .sline-vis {
  stroke:#e8e8ea; filter:drop-shadow(0 0 5px rgba(255,255,255,.45)); }
body.sline-dragging { cursor:col-resize !important; user-select:none; }
body.sline-dragging * { cursor:col-resize !important; }

.tl-empty { position:absolute; left:var(--rail-w); right:0; top:40%; text-align:center; color:var(--muted);
  font-size:12.5px; pointer-events:none; }
.block.flash { animation:blockflash .8s ease-out 1; z-index:25; }
@keyframes blockflash {
  0% { transform:scale(1); box-shadow:0 0 0 0 rgba(57,135,229,0); }
  35% { transform:scale(1.18); box-shadow:0 0 0 3px var(--accent), 0 0 22px 5px rgba(57,135,229,.8); }
  100% { transform:scale(1); box-shadow:none; }
}


/* ── BLOKADA: zarezerwowany czas maszyny, nie zlecenie. Wizualnie celowo NIE-kolorowa
   (kolor na osi znaczy „klient"), więc szrafowany pas w kolorze przezbrojenia z ostrzegawczą
   ramką — czytelne jako „tu nic nie drukujemy". ── */
.block.blocker { background:repeating-linear-gradient(-45deg, #4a4844 0 7px, #3a3835 7px 14px);
  box-shadow:inset 0 0 0 1px rgba(250,178,25,.45); color:var(--ink2); font-weight:800;
  letter-spacing:.04em; padding-right:9px; }
.block.blocker.sel { box-shadow:inset 0 0 0 2px var(--accent); color:var(--ink); }
.block.blocker .block-label { font-size:10px; }
/* uchwyt długości — 8 px przy prawej krawędzi, skoki po 15 min */
.blk-grip { position:absolute; top:0; right:0; bottom:0; width:11px; cursor:ew-resize; z-index:2;
  background:linear-gradient(to right, transparent, rgba(250,178,25,.34)); }
.block.blocker:hover .blk-grip { background:linear-gradient(to right, transparent, rgba(250,178,25,.65)); }
body.blk-resizing, body.blk-resizing * { cursor:ew-resize !important; user-select:none; }
.dragghost.blocker { background:repeating-linear-gradient(-45deg, #4a4844 0 7px, #3a3835 7px 14px);
  box-shadow:inset 0 0 0 1px rgba(250,178,25,.45); }