/* «مختبر الصغار» — built on /kids/kids.css (colours, fonts, panels, big buttons, Bubo, «كيف يعمل؟»). */
.lab-page .k-top{gap:8px}
.lab-brand{flex:1;font-family:Alexandria,sans-serif;font-weight:900;font-size:18px;color:var(--deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lab{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:12px 14px 60px}
.crumb{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:4px 0 0}
.crumb .back{text-decoration:none;color:var(--ink)}
.lab-title{font-size:clamp(24px,5.4vw,44px);margin:10px 0 14px}
.lab-grid{display:grid;gap:16px;align-items:start}
@media (min-width:900px){.lab-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}.side{position:sticky;top:76px}}
.lab .panel{max-width:none;margin:0 0 16px;padding:16px}
.lab .panel h2{font-family:Alexandria,sans-serif;font-size:20px;margin:0 0 4px}

/* stage */
.stage{position:relative;border-radius:22px;overflow:hidden;background:radial-gradient(120% 90% at 50% 20%,#F4FBFF 0,#D7EEFF 55%,#B7DDF6 100%);box-shadow:inset 0 0 0 3px #fff,inset 0 -40px 60px -30px rgba(42,111,176,.25)}
.stage canvas{display:block;width:100%;height:min(74vw,460px);touch-action:pan-y;cursor:grab}
.stage canvas:active{cursor:grabbing}
.state-chip{position:absolute;top:10px;inset-inline-start:10px;background:#fff;border-radius:999px;padding:6px 14px;font-weight:900;font-size:17px;box-shadow:0 4px 0 rgba(34,49,74,.12)}
.state-chip:empty{display:none}
.state-chip[data-phase=solid]{color:#2A6FB0}.state-chip[data-phase=liquid]{color:#1E7FC8}.state-chip[data-phase=gas]{color:#5F3FD0}
.state-chip[data-phase=melting],.state-chip[data-phase=boiling]{background:#FFE9D6;color:#B5490F}
.state-chip[data-phase=freezing],.state-chip[data-phase=condensing]{background:#DDF3FF;color:#1D5F99}
.scale-note{position:absolute;bottom:10px;inset-inline-start:10px;max-width:60%;background:rgba(255,255,255,.85);border-radius:12px;padding:4px 10px;font-size:13px;font-weight:700}
.warn{position:absolute;top:52px;inset-inline-start:10px;background:#FFF3C4;border:2px solid #FFC83D;border-radius:12px;padding:4px 10px;font-weight:800;font-size:14px}
.goal{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 130px);background:var(--ink);color:#fff;border-radius:16px;padding:6px 12px;font-size:15px;line-height:1.45;text-align:center;box-shadow:0 4px 0 rgba(0,0,0,.2)}
.stage.has-goal .state-chip{top:auto;bottom:44px}.stage.has-goal .warn{top:auto;bottom:86px}
.stage-fail{display:none;position:absolute;inset:0;margin:0;place-items:center;padding:20px;text-align:center;font-weight:800;background:rgba(255,255,255,.9)}
.stage.broken .stage-fail{display:grid}

/* thermometer: on the end side of the stage, reading on top */
.thermo{position:absolute;top:12px;bottom:12px;inset-inline-end:12px;width:58px;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}
.th-val{background:#fff;border-radius:10px;padding:2px 6px;font-weight:900;font-size:15px;white-space:nowrap;box-shadow:0 3px 0 rgba(34,49,74,.12);font-variant-numeric:tabular-nums}
.th-tube{position:relative;flex:1;width:16px;background:#fff;border-radius:10px 10px 0 0;box-shadow:inset 0 0 0 2px #C9D9EA}
.th-fill{position:absolute;bottom:0;left:3px;right:3px;border-radius:6px 6px 0 0;background:linear-gradient(#FF8A8A,#E5383B);transition:height .12s linear}
.th-bulb{width:30px;height:30px;margin-top:-6px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FF9C9C,#E5383B);box-shadow:0 0 0 3px #fff}
.th-mark{position:absolute;inset-inline-end:18px;height:0;border-top:2px dashed #2A6FB0;width:22px}
.th-mark em{position:absolute;inset-inline-end:24px;top:-10px;font-style:normal;font-size:11px;font-weight:800;background:#fff;border-radius:6px;padding:0 4px;white-space:nowrap}
.th-mark.boil{border-color:#E5383B}
.thermo.flash .th-tube{animation:flash 1.2s 2}
@keyframes flash{50%{box-shadow:inset 0 0 0 2px #C9D9EA,0 0 0 6px #FFC83D}}

/* Bubo's prompt */
.say{display:flex;align-items:center;gap:8px;margin:12px 0 4px}
.say .owl{width:56px;height:62px}
.say .bubble{flex:1;font-size:17px;min-height:3.2em;display:flex;align-items:center}
.say .say-opt{height:52px}

/* controls */
.controls{display:grid;gap:12px;margin-top:8px}
.ctl-h{display:flex;justify-content:space-between;align-items:center;margin:0 0 6px;font-weight:900;font-size:17px}
.tval{background:var(--sun);border-radius:999px;padding:2px 12px;font-size:16px}
.mats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mat{font:inherit;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:76px;border:3px solid transparent;border-radius:20px;background:#F2F8FF;cursor:pointer;color:var(--ink);font-size:16px;padding:6px 4px;transition:transform .12s}
.mat .mat-ic{font-size:30px;line-height:1.1}
.mat[aria-pressed=true]{border-color:var(--sun);background:#FFF6D6;transform:scale(1.03)}
.mat:disabled{opacity:.55;cursor:not-allowed}
.heat-row{display:flex;align-items:center;gap:8px}
.heat-btn{flex:none;font:inherit;font-weight:800;font-size:15px;min-width:64px;min-height:52px;border:0;border-radius:16px;cursor:pointer;color:#fff;box-shadow:0 5px 0 rgba(0,0,0,.18)}
.heat-btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.18)}
.heat-btn.cold{background:#2A86C9}.heat-btn.hot{background:#D2541B}
.heat-btn b{display:block;font-size:13px}
input.heat{flex:1;min-width:0;height:52px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
input.heat::-webkit-slider-runnable-track{height:16px;border-radius:999px;background:linear-gradient(90deg,#7FD3FF,#FFE08A 55%,#FF7A2F)}
input.heat::-moz-range-track{height:16px;border-radius:999px;background:linear-gradient(90deg,#7FD3FF,#FFE08A 55%,#FF7A2F)}
input.heat::-webkit-slider-thumb{-webkit-appearance:none;width:40px;height:40px;margin-top:-12px;border-radius:50%;background:#fff;border:5px solid var(--ink);box-shadow:0 4px 0 rgba(34,49,74,.2)}
input.heat::-moz-range-thumb{width:32px;height:32px;border-radius:50%;background:#fff;border:5px solid var(--ink)}
input.heat:focus-visible{outline:3px solid var(--purple);outline-offset:4px;border-radius:999px}
.tools{display:flex;flex-wrap:wrap;gap:8px}
.tool{font:inherit;font-weight:800;font-size:15px;min-height:48px;display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;padding:6px 14px;background:#fff;cursor:pointer;color:var(--ink);box-shadow:0 4px 0 rgba(34,49,74,.12),inset 0 0 0 2px #D7E8F7}
.tool[aria-pressed=true]{background:#EDE7FF;box-shadow:0 4px 0 rgba(34,49,74,.12),inset 0 0 0 2px var(--purple)}
.tip{margin:4px 0 0;font-size:14px;color:#4A5B76;line-height:1.55}

/* concept map */
.map{position:relative;width:100%;aspect-ratio:360/300;margin:8px 0 4px}
.map-lines{position:absolute;inset:0;width:100%;height:100%}
.map-lines path{fill:none;stroke-width:3.5;stroke-linecap:round;opacity:.45;transition:opacity .2s,stroke-width .2s}
.map-lines path.hot{stroke:#FF8A3D}.map-lines path.cold{stroke:#4FB3E8;stroke-dasharray:7 6}
.map-lines path.on{opacity:1;stroke-width:5}
.mnode,.medge{position:absolute;transform:translate(-50%,-50%);font:inherit;color:var(--ink);cursor:pointer;border:0;transition:transform .15s,box-shadow .15s}
.mnode{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:26%;min-height:64px;border-radius:20px;background:#fff;box-shadow:0 5px 0 rgba(34,49,74,.14),inset 0 0 0 3px #D7E8F7;font-size:16px}
.mnode.wide{width:62%;min-height:46px;flex-direction:row;gap:6px;font-size:15px}
.mnode .mini svg{width:30px;height:30px;display:block;fill:var(--blue)}
.mnode .m-ic{font-size:20px}
.medge{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:4px 12px;border-radius:999px;font-size:14px;white-space:nowrap;box-shadow:0 4px 0 rgba(34,49,74,.12)}
.medge.hot{background:#FFE9D6}.medge.cold{background:#DDF3FF}
.mnode.on{box-shadow:0 5px 0 rgba(34,49,74,.14),inset 0 0 0 4px var(--sun);background:#FFF9E3;transform:translate(-50%,-50%) scale(1.06)}
.medge.on{box-shadow:0 0 0 4px var(--sun),0 4px 0 rgba(34,49,74,.12);transform:translate(-50%,-50%) scale(1.08)}
.mnode.picked,.medge.picked{outline:3px solid var(--purple);outline-offset:3px}
.mnode:focus-visible,.medge:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.map-say{display:flex;gap:8px;align-items:flex-start}
.map-text{flex:1;margin:6px 0 0;background:#F2F8FF;border-radius:16px;padding:10px 14px;font-weight:700;font-size:16px;line-height:1.6}
.map-say .say-opt{height:48px;margin-top:6px}

/* challenge */
.ch-lead,.ch-goal,.ch-q{font-weight:800;font-size:18px;line-height:1.55;margin:6px 0}
.ch-goal{font-family:Alexandria,sans-serif;font-size:19px}
.ch-step{margin:0;font-weight:900;color:var(--deep)}
.ch-best{font-size:26px;letter-spacing:4px;text-align:center;margin:4px 0}
.ch-dots{display:flex;gap:6px;margin:6px 0}
.ch-dots i{width:34px;height:10px;border-radius:999px;background:#D7E8F7}.ch-dots i.done{background:var(--green)}.ch-dots i.now{background:var(--orange)}
.ch-hint{background:#FFF6D6;border-radius:14px;padding:8px 12px;font-weight:700;margin:6px 0}
.ch-wait{color:#4A5B76;font-weight:700}
.row{display:flex;gap:8px;flex-wrap:wrap}
.chip-btn{font:inherit;font-weight:800;font-size:15px;min-height:44px;border:0;border-radius:999px;padding:6px 14px;background:#EAF6FF;cursor:pointer;color:var(--ink)}
.ch-opts{display:grid;gap:8px;margin:10px 0}
.opt{font:inherit;font-weight:800;font-size:17px;min-height:56px;text-align:start;border:0;border-radius:18px;padding:10px 16px;background:#F2F8FF;cursor:pointer;color:var(--ink);box-shadow:0 4px 0 rgba(34,49,74,.1),inset 0 0 0 2px #D7E8F7}
.opt.right{background:#E6FAEF;box-shadow:inset 0 0 0 3px var(--green)}
.opt.wrong{background:#FFEDE3;box-shadow:inset 0 0 0 3px var(--orange);opacity:.8}
.ch-msg{font-weight:900;font-size:18px;margin:4px 0}
.ch-why{background:#E6FAEF;border-radius:14px;padding:10px 14px;font-weight:700;line-height:1.6}
.ch-stars{text-align:center;font-size:52px;letter-spacing:6px;margin:4px 0}
.ch-stars span{display:inline-block;animation:starIn .5s both}.ch-stars span:nth-child(2){animation-delay:.25s}.ch-stars span:nth-child(3){animation-delay:.5s}
.lab .big-btn{font-size:20px}
.lab-about p{line-height:1.8;margin:6px 0}
.lab-about a{color:var(--deep);font-weight:800}

/* «كيف يعمل؟» sheet */
.how-sheet{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px;background:rgba(34,49,74,.45)}
.how-sheet[hidden]{display:none}
.how-card{width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;margin:0}
.how-title{font-family:Alexandria,sans-serif;text-align:center;font-size:24px;margin:0 0 12px}

@media (max-width:560px){
  .lab{padding:8px 10px 40px}
  .lab .panel{padding:12px 10px;border-radius:22px}
  .stage canvas{height:min(92vw,420px)}
  .thermo{width:50px}
  .mnode{font-size:14px;min-height:58px}.mnode.wide{font-size:13px}
  .medge{font-size:12.5px;padding:3px 9px;min-height:40px}
  .say .bubble{font-size:16px}
  .tool{font-size:14px;padding:6px 12px}
}
@media (prefers-reduced-motion: reduce){.th-fill{transition:none}}
.unit{margin-inline-start:2px}
.num{display:inline-grid;place-items:center;width:28px;height:28px;margin-inline-end:4px;border-radius:50%;background:var(--blue);color:#fff;font-style:normal;font-size:15px;vertical-align:middle}
@media (max-width:560px){.scale-note{font-size:12px;max-width:52%}}
/* language button as in /kids (i18n-kids.js) */
.k-top [data-lang-switch]{display:flex;align-items:center}
.k-top .switch{display:flex;align-items:center;margin:0}
.k-top .switch .cur{display:none}
.k-top .switch .lang{font:inherit;font-weight:800;font-size:15px;line-height:1;border:0;border-radius:999px;padding:9px 14px;background:#5F3FD0;color:#fff;box-shadow:0 4px 0 rgba(34,49,74,.18);cursor:pointer}
.chip-btn.see{background:var(--sun);margin-top:8px}
/* ?embed=1 (the demo on /lessons/) */
.embed .k-top,.embed .crumb,.embed .lab-title,.embed .lab-about,.embed .sky{display:none}
.embed .lab{padding-top:8px}