/* WP22 · Kampányok › Idősáv szalag, Ígéretlánc (Építés / Audit, haladássáv), Vászon-kapcsolatok és üzenetirányok. Csak változók (világos / sötét témában is jó). */
.vz-modes, .vz-steps { margin: 0 0 4px; display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; }

/* ── Ígéretlánc: haladássáv (ellentmondásnál piros) ── */
.vz-barw { display: grid; gap: 4px; margin: 0 0 12px; }
.vz-bar { display: flex; gap: 3px; border-radius: 10px; padding: 3px; border: 1px solid var(--border); background: var(--surface-2); }
.vz-bar .sg { flex: 1 1 0; min-width: 0; text-align: center; font-size: 12px; font-weight: 700; padding: 5px 4px; border-radius: 7px; background: var(--surface-3); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vz-bar .sg.lv-strong { background: var(--ok-bg); color: var(--ok); }
.vz-bar .sg.lv-partial, .vz-bar .sg.lv-weak { background: var(--warn-bg); color: var(--warn); }
.vz-bar .sg.lv-contradiction { background: var(--bad); color: var(--inverse); }
.vz-bar .sg.lv-missing, .vz-bar .sg.lv-none { background: var(--surface-3); color: var(--muted); }
.vz-bar.contra { border-color: var(--bad); background: var(--bad-bg); }
.vz-bar.warn { border-color: var(--warn); }
.vz-bar.ok { border-color: var(--ok); }
.vz-barn { font-size: 13px; color: var(--muted); }
.vz-barn.contra { color: var(--bad); font-weight: 700; }
.vz-barn .ptr { margin-left: 6px; }
@media (max-width: 560px) { .vz-bar .sg { font-size: 11px; padding: 5px 2px; } }

/* ── Építés ── */
.vz-pth { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.vz-pb { font-style: normal; font-size: 13px; font-weight: 700; margin-left: auto; padding: 1px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); }
.vz-pb.ok { background: var(--ok-bg); color: var(--ok); }
.vz-pb.warn { background: var(--warn-bg); color: var(--warn); }
.vz-pb.bad { background: var(--bad-bg); color: var(--bad); }
.vz-ars { display: grid; gap: 6px; }
.vz-ar { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.vz-ar input, .vz-ar select { width: 100%; min-width: 0; }
@media (max-width: 860px) { .vz-ar { grid-template-columns: 1fr 1fr; } .vz-ar .mos-x { justify-self: end; } }
@media (max-width: 560px) { .vz-ar { grid-template-columns: 1fr; } }

/* ── Audit ── */
.vz-top { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; }
.vz-leg { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin: 4px 0 8px; }
.vz-leg .lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--ok); }
.vz-leg .lg.warn { background: var(--warn); } .vz-leg .lg.bad { background: var(--bad); }
.vz-list { display: grid; gap: 6px; }
.vz-r, .vz-step { border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; background: var(--surface); }
.vz-step { gap: 0; }
.vz-r > summary, .vz-step > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 14px; }
.vz-r.lv-contradiction { border-color: var(--bad); background: var(--bad-bg); }
.vz-step.lv-step-bad { border-color: var(--bad); } .vz-step.lv-step-warn { border-color: var(--warn); }
.vz-rb { display: grid; gap: 4px; padding: 6px 0 2px; font-size: 14px; }
.vz-cov { display: inline-block; width: 90px; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.vz-cov i { display: block; height: 100%; background: var(--ok); }
.vz-r.lv-partial .vz-cov i, .vz-r.lv-weak .vz-cov i { background: var(--warn); }
.vz-r.lv-contradiction .vz-cov i { background: var(--bad); }

/* ── Vászon: kapcsolat-jelzés, üzenetirányok ── */
.mos-card[data-act] { cursor: pointer; }
.mos-card[data-act]:hover { border-color: var(--border-strong); }
.vz-lk { color: var(--ai) !important; font-size: 12px !important; font-weight: 700; }

/* ── Idősáv: szalag ── */
.tl-ctl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tl-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.tl-box { --lw: 92px; position: relative; display: grid; grid-template-columns: var(--lw) minmax(0, 1fr); grid-auto-rows: 34px; min-width: 640px; }
.tl-box > .tl-lab { display: flex; align-items: center; padding: 0 8px; font-size: 13px; font-weight: 700; color: var(--text-2); border-top: 1px solid var(--border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-box > .tl-ax-l, .tl-box > .tl-axis { border-top: 0; }
.tl-axis { position: relative; height: 34px; }
.tl-axis span { position: absolute; top: 9px; font-size: 11px; color: var(--muted); transform: translateX(2px); white-space: nowrap; }
.tl-axis span.we { color: var(--text-2); font-weight: 700; }
.tl-axis span.f { font-weight: 700; color: var(--text); }
.tl-cell { position: relative; border-top: 1px solid var(--border); z-index: 1; }
.tl-cell.tl-over { background: var(--ai-bg); outline: 2px dashed var(--ai); outline-offset: -2px; }
.tl-cur { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ai); pointer-events: none; }
.tl-ov { position: absolute; left: var(--lw); right: 0; top: 0; bottom: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.tl-we { position: absolute; top: 34px; bottom: 0; background: color-mix(in srgb, var(--surface-3) 55%, transparent); }
.tl-today { position: absolute; top: 4px; bottom: 0; width: 0; border-left: 2px solid var(--bad); }
.tl-today b { position: absolute; top: -4px; left: 4px; font-size: 11px; background: var(--bad); color: var(--inverse); border-radius: 4px; padding: 0 5px; line-height: 16px; }
.tl-band { position: absolute; top: 7px; height: 20px; border-radius: 6px; background: var(--surface-3); border: 1.5px solid var(--text); font-size: 12px; font-weight: 700; line-height: 17px; padding: 0 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text); box-sizing: border-box; }
.tl-band.os { border-left-style: dashed; border-top-left-radius: 0; border-bottom-left-radius: 0; } .tl-band.oe { border-right-style: dashed; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tl-nob { position: absolute; left: 8px; top: 8px; font-size: 13px; }
.tl-dot { position: absolute; top: 9px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; }
.tl-dot.mine { background: var(--text); border: 2px solid var(--text); }
.tl-dot.other { background: var(--surface); border: 2px solid var(--muted); }
.tl-dot.done { opacity: .6; } .tl-dot.wait { border-style: dashed; } .tl-dot.stop { border-color: var(--bad); }
.tl-dot.clash { box-shadow: 0 0 0 3px var(--warn); }
.tl-dot b { font-size: 10px; line-height: 1; color: var(--warn); background: var(--surface); border-radius: 50%; width: 12px; height: 12px; display: grid; place-items: center; position: absolute; top: -9px; right: -9px; }
.tl-dot:focus-visible, .tl-gh-chip:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.tl-plan { position: absolute; top: 7px; height: 20px; min-width: 12px; border-radius: 6px; background: var(--ok-bg); border: 1.5px solid var(--ok); color: var(--ok); font-size: 12px; font-weight: 700; padding: 0 6px; line-height: 17px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 40%; box-sizing: border-box; transform: translateX(-4px); }
.tl-ghost { position: absolute; top: 7px; height: 20px; min-width: 28px; max-width: 46%; border-radius: 6px; border: 1.5px dashed var(--ai); background: var(--ai-bg); color: var(--ai); opacity: .8; font-size: 12px; font-weight: 700; line-height: 17px; padding: 0 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; cursor: grab; touch-action: none; user-select: none; transform: translateX(-4px); }
.tl-ghost i { font-style: normal; }
.tl-drag { opacity: .9; z-index: 50; cursor: grabbing; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); position: relative; }
.tl-ghost.tl-drag { position: absolute; }
body.tl-dragging { cursor: grabbing; user-select: none; }
.tl-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.tl-k { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; box-sizing: border-box; }
.tl-k.mine { background: var(--text); } .tl-k.other { background: var(--surface); border: 2px solid var(--muted); } .tl-k.clash { border: 2px solid var(--warn); }
.tl-k.ghost { border-radius: 3px; border: 1.5px dashed var(--ai); background: var(--ai-bg); } .tl-k.plan { border-radius: 3px; border: 1.5px solid var(--ok); background: var(--ok-bg); }
.tl-gh-box, .tl-pl-box { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; }
.tl-gh { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.tl-gh .mx-acts { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.tl-gh-chip { display: inline-block; border: 1.5px dashed var(--ai); background: var(--ai-bg); color: var(--ai); border-radius: 6px; padding: 2px 8px; font-weight: 700; font-size: 13px; user-select: none; }
.tl-gh-chip.drag { cursor: grab; touch-action: none; }
.tl-pl { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.tl-list { display: grid; gap: 8px; }
.vz-ti.flash { outline: 3px solid var(--info); }
@media (max-width: 560px) { .tl-box { --lw: 72px; } }