/* ============================================================
 * /knime/ 分步演示播放器
 * 放在子主题 assets/knime/shared.css，由 page-knime-doc.php 自动加载
 * 没有这个文件时页面仍然可读：各步骤会平铺显示，只是不能翻页
 * ============================================================ */

.kb-play{border:1px solid var(--knd-line);border-radius:12px;background:#fff;overflow:hidden;margin:22px 0}

/* 顶部节点串 */
.kb-play-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
	background:var(--knd-soft);border-bottom:1px solid var(--knd-line);padding:16px 18px}
.kb-play-n{position:relative;background:#fff;border:1px solid #ccd5e2;border-radius:7px;
	padding:7px 12px;font-size:13px;color:#7d8aa0;line-height:1.4;cursor:pointer;
	transition:border-color .18s,background .18s,color .18s}
.kb-play-n:hover{border-color:#9fb0c6;color:var(--knd-ink)}
.kb-play-n.done{color:var(--knd-ink);border-color:#b9c7d8}
.kb-play-n.on{border:2px solid var(--knd-accent);background:#fffaf2;color:var(--knd-ink);font-weight:600;
	box-shadow:0 2px 10px rgba(232,163,61,.22)}
.kb-play-sep{color:#c3ccda;font-size:13px;flex:0 0 auto}

/* 步骤区 */
.kb-play-body{padding:22px 20px}
.kb-step{display:block}
.kb-play.is-ready .kb-step{display:none}
.kb-play.is-ready .kb-step.on{display:block;animation:kbfade .22s ease}
@keyframes kbfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.kb-step-h{color:var(--knd-ink);font-size:17px;font-weight:600;margin:0 0 6px}
.kb-step-c{color:var(--knd-body);font-size:15px;line-height:1.8;margin:0 0 16px}
.kb-step table{width:100%;border-collapse:collapse;background:#fff;font-size:14px}
.kb-step th,.kb-step td{border:1px solid var(--knd-line);padding:9px 12px;text-align:left}
.kb-step th{background:#f0f4f9;color:var(--knd-ink);font-weight:600}
.kb-step td.chg{background:#fffaf2;font-weight:600;color:#8a6413}
.kb-step-tab{overflow-x:auto}

/* 控制条 */
.kb-play-foot{display:flex;align-items:center;gap:10px;border-top:1px solid var(--knd-line);
	padding:12px 18px;background:var(--knd-soft)}
.kb-play-btn{border:1px solid var(--knd-line);background:#fff;border-radius:7px;padding:7px 15px;
	font-size:14px;color:var(--knd-ink);cursor:pointer;font-family:inherit}
.kb-play-btn:hover:not(:disabled){border-color:var(--knd-accent)}
.kb-play-btn:disabled{opacity:.45;cursor:default}
.kb-play-btn.go{background:var(--knd-accent);border-color:var(--knd-accent);color:#2a1d05;font-weight:600}
.kb-play-pos{margin-left:auto;font-size:13px;color:#8794ab}

/* 无 JS 时的平铺样式 */
.kb-play:not(.is-ready) .kb-play-bar,
.kb-play:not(.is-ready) .kb-play-foot{display:none}
.kb-play:not(.is-ready) .kb-step{border-bottom:1px solid var(--knd-line);padding-bottom:18px;margin-bottom:18px}
.kb-play:not(.is-ready) .kb-step:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}

@media(max-width:620px){
	.kb-play-bar{padding:12px 12px;gap:6px}
	.kb-play-n{padding:6px 9px;font-size:12px}
	.kb-play-sep{display:none}
	.kb-play-body{padding:18px 14px}
	.kb-step table{font-size:13px}
	.kb-step th,.kb-step td{padding:7px 9px}
}