/* lecture_lab_slot.css — 小伴讲解「板书要点」下方「实验室」槽位样式
 * [XBE #T4] 视觉语言对齐 xb-sec 卡片：圆角 / 柔阴影 / 品牌紫青渐变（#6D5EFC→#28C2C8）。
 * 移动端优先：控件可换行、iframe 用视口高度、不依赖 fixed 浮层（避免与吉祥物浮层冲突）。
 */
/* 🔴 2026-09-21 修家长报障「生成的框与上下不一致」：
 * 旧版自带浅紫灰底(#FBFCFF→#F4F7FE) + 四周描边 + 投影 ⇒ 像「另贴上去的一块面板」。
 * 真机取基准（真讲义渲染后读 computed style）发现：这一路讲义**所有段落**都是
 * `.xb-sec.xb-lec`（紫调 6% 渐变底 + 13px 圆角 + 左侧 3px 品牌紫竖条 + 11/14 内边距 + 无投影）。
 * 现**逐字对齐 .xb-lec 的几何与配色**（值抄自 common/xb_explain.js 的 .xb-sec / .xb-lec），
 * 让槽位与它上下的段落成为同一种卡片。
 * 基准取证：.qa_verify/_cw_fix_verify.cjs（改动前后 + 对照组）。 */
.xb-lab-slot{
  margin:8px 0 0; padding:11px 14px;
  border-radius:13px;
  background:linear-gradient(135deg,rgba(109,94,252,.06),rgba(143,90,240,.05));
  border-left:3px solid #6D5EFC;
}

/* 🔴 共同学习页（#/calibrate）里讲义卡片被 engine.js 单独覆盖成另一套皮肤：
 *   .ckp-lecture-panel .xb-sec{白底 #fff / 16px 圆角 / 1px #E6E0F5 描边 /
 *   投影 0 4px 14px rgba(0,0,0,.10) / 左缩进 42px（给「小伴」方章让位）/ max-width min(760px,88%)}
 * 槽位在这一页必须跟着这套走，否则「框与上下不一致」会原样复发（家长 2026-09-21 报障的就是这一页）。
 * 值抄自 engine.js 该规则；engine 的样式在运行时注入、晚于本文件，故这里靠**更高特异性**
 * （0,2,0 > 0,1,0）取胜，不依赖加载顺序。 */
.ckp-lecture-panel .xb-lab-slot{
  margin:14px 0 0 42px; padding:11px 14px;
  border-radius:16px; background:#fff;
  border:1px solid #E6E0F5; box-shadow:0 4px 14px rgba(0,0,0,.10);
  max-width:min(760px,88%);
  font-size:14.5px; line-height:1.62;
}
/* 无标题 chrome：旧 .xb-lab-head / .xb-lab-kicker / .xb-lab-sub 已随「动手验证」文案一并移除 */

.xb-lab-sim{width:100%; border-radius:10px; overflow:hidden; background:#fff;}
.xb-lab-sim svg{display:block; width:100%; height:auto;}

.xb-lab-ctl{display:flex; align-items:center; gap:10px; margin-top:10px;}
.xb-lab-play{
  flex:none; border:none; cursor:pointer; font-size:13px; font-weight:600; color:#fff;
  background:linear-gradient(90deg,#6D5EFC,#28C2C8); padding:7px 14px; border-radius:10px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.xb-lab-play:hover{transform:translateY(-1px); box-shadow:0 6px 14px rgba(109,94,252,.25);}
.xb-lab-scrub{flex:1 1 auto; min-width:0; accent-color:#6D5EFC; cursor:pointer;}

.xb-lab-params{display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:10px; align-items:center; font-size:13px; color:#3A3F52;}
.xb-lab-seg{display:inline-flex; border:1px solid #D9DEF0; border-radius:10px; overflow:hidden;}
.xb-lab-segbtn{
  border:none; background:#fff; color:#5B5F73; padding:6px 11px; font-size:12.5px; cursor:pointer;
  border-right:1px solid #E6E9F5;
}
.xb-lab-segbtn:last-child{border-right:none;}
.xb-lab-segbtn.on{background:linear-gradient(90deg,#6D5EFC,#28C2C8); color:#fff; font-weight:600;}
.xb-lab-range{display:inline-flex; align-items:center; gap:6px;}
.xb-lab-range input[type=range]{accent-color:#6D5EFC; cursor:pointer; width:120px;}
.xb-lab-toggle{display:inline-flex; align-items:center; gap:5px; cursor:pointer;}

.xb-lab-hud{
  margin-top:10px; padding:9px 12px; border-radius:10px; background:#EEF6FF; color:#2F3A52;
  font-size:13px; line-height:1.7; word-break:break-word;
}
.xb-lab-tag{display:inline-block; font-size:11px; font-weight:700; color:#0E9F6E; background:#E8FBF1; padding:2px 8px; border-radius:999px; margin-right:8px;}
.xb-lab-hud b{color:#6D5EFC;}

.xb-lab-open{
  border:1px solid #D9DEF0; background:#fff; color:#3A3F52; cursor:pointer;
  font-size:13.5px; font-weight:600; padding:9px 14px; border-radius:10px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.xb-lab-open:hover{border-color:#6D5EFC; box-shadow:0 4px 12px rgba(109,94,252,.12);}
.xb-lab-drawer{margin-top:10px;}
.xb-lab-why{font-size:12px; color:#8A8FA3; margin-bottom:6px; line-height:1.6;}
.xb-lab-ifwrap{border-radius:10px; overflow:hidden; border:1px solid #E6E9F5; background:#fff;}
.xb-lab-iframe{display:block; width:100%; height:440px; border:0;}

/* —— ③ 互动课件（小学数学 184 个细粒度知识点）—— 与 ①② 同槽叠加，排在最后 ——
 * 课件是整页四步应用（hero + 舞台 + 小伴气泡），比 PhET 抽屉更需要高度，故单独给高。 */
.xb-cw-bar{
  margin-top:14px; padding-top:12px; border-top:1px dashed #E0E4F2;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px;
}
.xb-cw-kicker{font-size:13px; font-weight:600; color:#3C3489;}
.xb-cw-open{
  border:none; cursor:pointer; font-size:13px; font-weight:600; color:#fff;
  background:linear-gradient(90deg,#6D5EFC,#28C2C8); padding:8px 15px; border-radius:10px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.xb-cw-open:hover{transform:translateY(-1px); box-shadow:0 6px 14px rgba(109,94,252,.25);}
.xb-cw-open.on{background:#2F2B52;}
.xb-cw-chips{display:flex; flex-wrap:wrap; gap:8px; flex:1 1 100%;}
.xb-cw-chip{
  border:1px solid #D9DEF0; background:#fff; color:#3A3F52; cursor:pointer;
  font-size:12.5px; padding:6px 12px; border-radius:999px; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.xb-cw-chip:hover{border-color:#6D5EFC; box-shadow:0 3px 10px rgba(109,94,252,.14);}
.xb-cw-chip.on{
  border-color:transparent; color:#fff; font-weight:600;
  background:linear-gradient(90deg,#6D5EFC,#28C2C8);
}
.xb-cw-ifwrap{margin-top:10px; border-radius:10px; overflow:hidden; border:1px solid #E6E9F5; background:#fff;}
.xb-cw-iframe{display:block; width:100%; height:clamp(540px,76vh,780px); border:0;}

@media (max-width:560px){
  .xb-lab-slot{padding:12px;}
  .xb-lab-iframe{height:64vh;}
  .xb-lab-range input[type=range]{width:96px;}
  .xb-lab-ctl{gap:8px;}
  .xb-cw-chips{gap:6px;}
  .xb-cw-chip{font-size:12px; padding:5px 10px;}
  .xb-cw-iframe{height:72vh;}
}