/* =========================================================================
   QALadder — in-page Practice Dock  (loads AFTER theme.css + roadmap.css)
   A live code editor that docks to the right on desktop and slides up as a
   bottom sheet on mobile, so learners can practice while reading a module.
   Everything is namespaced under .qlab / .qlab-* to stay self-contained.
   ========================================================================= */

:root{ --qlab-w:min(580px, 47vw); }

/* ---- the per-module call-to-action button (rendered inside each module) ---- */
.lab-cta{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:6px 18px 4px;padding:13px 15px;border-radius:var(--r);
  background:var(--grad-brand-soft);border:1px solid var(--border);
  border-left:4px solid var(--accent);
}
.lab-cta-txt{flex:1;min-width:180px;line-height:1.5;}
.lab-cta-txt b{display:block;font-family:var(--font-display);font-size:13.5px;font-weight:700;color:var(--text);margin-bottom:2px;}
.lab-cta-txt span{font-size:12px;color:var(--text-soft);}
.lab-open-btn{
  font-family:var(--font-mono);font-size:11.5px;font-weight:700;white-space:nowrap;
  border:1px solid transparent;border-radius:10px;padding:10px 16px;cursor:pointer;
  background:var(--grad-brand);color:#fff;box-shadow:var(--shadow-accent);
  transition:transform var(--t-fast) var(--ease),filter var(--t-fast);
}
.lab-open-btn:hover{transform:translateY(-1px);filter:brightness(1.06);}
.lab-open-btn:active{transform:translateY(0);}

/* ---- scrim (mobile sheet only) ---- */
.qlab-scrim{
  position:fixed;inset:0;z-index:90;background:rgba(8,11,20,.5);
  backdrop-filter:blur(2px);opacity:0;pointer-events:none;
  transition:opacity var(--t) var(--ease);display:none;
}

/* ---- the dock shell ---- */
.qlab{
  position:fixed;z-index:95;background:var(--surface);
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:var(--shadow-lg);
  will-change:transform;
}
.qlab-head{
  display:flex;align-items:center;gap:10px;padding:14px 16px 12px;
  border-bottom:1px solid var(--border);background:var(--surface-2);position:relative;
}
.qlab-grip{display:none;}
.qlab-title{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--text);flex:1;letter-spacing:-.01em;}
.qlab-x{
  flex:0 0 auto;width:32px;height:32px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface);color:var(--text-soft);font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all var(--t-fast);
}
.qlab-x:hover{color:var(--fail);border-color:var(--fail);}
.qlab-sub{padding:10px 16px;font-size:11.5px;line-height:1.5;color:var(--text-soft);border-bottom:1px solid var(--border);}
.qlab-sub b{color:var(--text);font-weight:600;}

.qlab-controls{display:flex;gap:8px;padding:14px 16px 6px;flex-wrap:wrap;align-items:center;}
.qlab-controls select{
  font-family:var(--font-mono);font-size:12.5px;font-weight:500;line-height:1.2;
  border:1px solid var(--border-strong);border-radius:10px;
  padding:10px 34px 10px 12px;
  background-color:var(--surface);color:var(--text);cursor:pointer;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A93A3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:12px;
  text-overflow:ellipsis;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.qlab-controls select:hover{border-color:var(--accent);}
.qlab-controls select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.qlab-chal{flex:1 1 240px;min-width:0;}
.qlab-lang{flex:0 1 170px;min-width:140px;}

.qlab-prompt{
  margin:10px 16px 0;padding:12px 14px;border-radius:var(--r-sm);
  background:var(--grad-brand-soft);border:1px solid var(--border);
  font-size:12.5px;line-height:1.6;color:var(--text-soft);max-height:150px;overflow:auto;display:none;
}
.qlab-prompt.show{display:block;animation:fadeIn .25s var(--ease) both;}
.qlab-prompt b{display:block;font-family:var(--font-display);font-weight:700;font-size:14px;margin-bottom:4px;color:var(--text);}
.qlab-prompt i{color:var(--text-faint);}
.qlab-prompt code{font-family:var(--font-mono);font-size:11.5px;background:var(--surface-3);color:var(--text);padding:2px 6px;border-radius:5px;}

.qlab-actions{display:flex;align-items:center;gap:8px;padding:10px 16px 12px;flex-wrap:wrap;}
.qlab-reset{color:var(--text-soft);}
.qlab-reset:hover{border-color:var(--accent);color:var(--accent-deep);}
.qlab .btn{
  font-family:var(--font-mono);font-size:11.5px;font-weight:700;letter-spacing:.01em;
  border-radius:9px;padding:10px 14px;cursor:pointer;border:1px solid var(--border-strong);
  background:var(--surface);color:var(--text);display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:transform var(--t-fast) var(--ease),filter var(--t-fast),border-color var(--t-fast);
}
.qlab .btn:hover{transform:translateY(-1px);}
.qlab .btn.run{background:var(--grad-brand);border-color:transparent;color:#fff;box-shadow:var(--shadow-accent);}
.qlab .btn.run:hover{filter:brightness(1.06);}
.qlab .btn.run:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;filter:none;transform:none;}
.qlab .btn.test{background:var(--ink-dark);border-color:var(--ink-dark);color:var(--accent-2);}
.qlab .btn.test:hover{filter:brightness(1.25);}
.qlab .btn.test:disabled{opacity:.5;cursor:not-allowed;}
.qlab-engine{margin-left:auto;font-family:var(--font-mono);font-size:9.5px;color:var(--text-soft);display:flex;align-items:center;gap:6px;}
.qlab .dot{width:8px;height:8px;border-radius:50%;background:var(--idle);flex:0 0 auto;}
.qlab .dot.ready{background:var(--pass);box-shadow:0 0 0 3px var(--pass-bg);}
.qlab .dot.busy{background:var(--warn);animation:pulse 1s infinite;}

.qlab-editor-wrap{position:relative;flex:1 1 auto;min-height:240px;border-top:1px solid var(--border);}
.qlab-editor-wrap .CodeMirror{position:absolute;inset:0;height:100%;font-family:var(--font-mono);font-size:13px;line-height:1.6;}
.qlab-ta{position:absolute;inset:0;width:100%;height:100%;border:none;padding:12px;
  font-family:var(--font-mono);font-size:13px;line-height:1.6;background:#212121;color:#eee;resize:none;}

.qlab-out-head{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--code-bg);border-top:1px solid var(--code-line);}
.qlab-out-head span{font-family:var(--font-mono);font-size:9.5px;font-weight:700;color:var(--accent-2);text-transform:uppercase;letter-spacing:.1em;}
.qlab-clear{margin-left:auto;font-family:var(--font-mono);font-size:9.5px;background:rgba(255,255,255,.09);color:#ccc;border:none;border-radius:6px;padding:4px 10px;cursor:pointer;transition:background var(--t-fast);}
.qlab-clear:hover{background:rgba(255,255,255,.18);}
.qlab-out{margin:0;padding:12px 14px;background:var(--code-bg);color:#D8E4F5;font-family:var(--font-mono);
  font-size:12px;line-height:1.65;min-height:70px;max-height:170px;overflow:auto;white-space:pre-wrap;word-break:break-word;}
.qlab-out .ok{color:#6BD99A;}
.qlab-out .bad{color:#FF8A7A;}
.qlab-out .dim{color:#7A8699;}
.qlab-verdict{padding:12px 14px;font-family:var(--font-mono);font-size:12px;font-weight:700;line-height:1.5;display:none;}
.qlab-verdict.show{display:block;animation:fadeIn .2s var(--ease) both;}
.qlab-verdict.pass{background:var(--pass-bg);color:var(--pass);}
.qlab-verdict.fail{background:var(--fail-bg);color:var(--fail);}

/* ===== DESKTOP: right-side dock, content reflows left ================== */
@media(min-width:1000px){
  .qlab{top:0;right:0;bottom:0;width:var(--qlab-w);border-left:1px solid var(--border);
    transform:translateX(100%);transition:transform .32s var(--ease);}
  .qlab.open{transform:none;}
  body.qlab-open{padding-right:var(--qlab-w);
    transition:padding-right .32s var(--ease),background var(--t) var(--ease),color var(--t) var(--ease);}
}

/* ===== MOBILE / TABLET: bottom sheet with scrim ======================= */
@media(max-width:999px){
  .qlab-scrim{display:block;}
  .qlab-scrim.open{opacity:1;pointer-events:auto;}
  .qlab{left:0;right:0;bottom:0;height:88vh;max-height:88vh;
    border-top-left-radius:var(--r-xl);border-top-right-radius:var(--r-xl);
    transform:translateY(100%);transition:transform .34s var(--ease);}
  .qlab.open{transform:none;}
  .qlab-head{padding-top:10px;}
  .qlab-grip{display:block;position:absolute;top:6px;left:50%;transform:translateX(-50%);
    width:40px;height:4px;border-radius:999px;background:var(--border-strong);}
}
@media(max-width:480px){
  .qlab{height:92vh;max-height:92vh;}
  .qlab-editor-wrap .CodeMirror,.qlab-ta{font-size:14px;}
  .qlab .btn{font-size:11px;padding:11px 12px;min-height:44px;}
  .lab-cta{margin-left:14px;margin-right:14px;}
}

@media (prefers-reduced-motion: reduce){
  .qlab{transition:none;}
  body.qlab-open{transition:none;}
}