/* =========================================================
   Code Lab — in-lesson Python (Pyodide) playground.
   Self-injected by codelab.js.
   Chrome uses theme tokens; the CODE SURFACES (editor, console,
   plot) stay dark in both themes — same rule as pre.code.
   ========================================================= */
.codelab{
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--bg-elevated);
  margin:2.2rem 0;
  overflow:hidden;
  box-shadow:0 6px 24px -12px rgba(0,0,0,.35);
}

/* Selection: override the site-wide warm/white ::selection, which made
   selected code unreadable inside the dark editor. */
.codelab ::selection{ background:rgba(92,201,181,.30); color:inherit; }
.codelab ::-moz-selection{ background:rgba(92,201,181,.30); color:inherit; }

/* ── header ── */
.cl-head{
  display:flex; align-items:center; gap:.6rem;
  padding:.7rem 1rem;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.cl-dot{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--teal);
  box-shadow:0 0 8px color-mix(in srgb, var(--teal) 60%, transparent);
}
.cl-title{
  font-family:var(--font-mono,monospace); font-size:.82rem; color:var(--text2);
  letter-spacing:.02em; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cl-layout{
  margin-left:auto; flex:none;
  display:inline-flex; align-items:center; gap:.4rem;
  background:none; border:1px solid var(--border2); border-radius:6px;
  color:var(--text3); cursor:pointer;
  font-family:var(--font-mono,monospace); font-size:.62rem;
  text-transform:uppercase; letter-spacing:.07em;
  padding:.22rem .55rem;
  transition:color .15s ease, border-color .15s ease;
}
.cl-layout:hover{ color:var(--text); border-color:var(--border-hover); }
.cl-layout:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.cl-layout svg{ display:block; }
.cl-badge{
  flex:none;
  font-family:var(--font-mono,monospace); font-size:.6rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--teal);
  border:1px solid color-mix(in srgb, var(--teal) 40%, transparent);
  border-radius:999px; padding:.14rem .55rem;
}

/* ── body: editor | output ── */
.cl-body{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); }
.cl-editor-wrap{
  border-right:1px solid var(--border); min-width:0;
  background:#0a0c12;
}
.cl-out{ display:flex; flex-direction:column; min-width:0; background:#0a0c12; }

/* stacked layout: full-width editor, output below (plot | console side by side) */
.codelab.stacked .cl-body{ grid-template-columns:1fr; }
.codelab.stacked .cl-editor-wrap{ border-right:none; border-bottom:1px solid #1a1f2c; }
@media (min-width:761px){
  .codelab.stacked .cl-out{ flex-direction:row; }
  .codelab.stacked .cl-viz-wrap{ width:50%; flex:none; border-bottom:none; border-right:1px solid #1a1f2c; }
  .codelab.stacked .cl-console{ min-height:140px; max-height:360px; }
}

/* ── editor: custom 'emax' CodeMirror theme.
      Always dark, colors match pre.code (.kw .fn .st .cm .nm .op) ── */
.cl-editor-wrap .CodeMirror{
  height:auto; min-height:240px; max-height:500px;
  font-family:var(--font-mono,monospace); font-size:.82rem; line-height:1.65;
}
.cl-editor-wrap .CodeMirror-scroll{ max-height:500px; }
.cm-s-emax.CodeMirror{ background:#0a0c12; color:#e2ddd5; padding:.4rem 0; }
.cm-s-emax .CodeMirror-gutters{ background:#0a0c12; border-right:1px solid #1a1f2c; }
.cm-s-emax .CodeMirror-linenumber{ color:#3d4456; font-size:.72rem; }
.cm-s-emax .CodeMirror-cursor{ border-left:2px solid #e8a87c; }
.cm-s-emax .CodeMirror-selected{ background:rgba(92,201,181,.20); }
.cm-s-emax.CodeMirror-focused .CodeMirror-selected{ background:rgba(92,201,181,.28); }
.cm-s-emax .CodeMirror-line::selection,
.cm-s-emax .CodeMirror-line>span::selection,
.cm-s-emax .CodeMirror-line>span>span::selection{ background:rgba(92,201,181,.22); }
.cm-s-emax span.cm-keyword{ color:#c792ea; }
.cm-s-emax span.cm-def{ color:#82aaff; }
.cm-s-emax span.cm-builtin{ color:#82aaff; }
.cm-s-emax span.cm-variable{ color:#e2ddd5; }
.cm-s-emax span.cm-property{ color:#e2ddd5; }
.cm-s-emax span.cm-string{ color:#c3e88d; }
.cm-s-emax span.cm-comment{ color:#546e7a; font-style:italic; }
.cm-s-emax span.cm-number{ color:#f78c6c; }
.cm-s-emax span.cm-operator{ color:#89ddff; }
.cm-s-emax span.cm-meta{ color:#e87aaa; }
.cm-s-emax span.cm-atom{ color:#f78c6c; }
.cm-s-emax .CodeMirror-matchingbracket{ color:#5cc9b5 !important; text-decoration:underline; }

/* textarea fallback (CDN failure) — same dark surface */
.cl-textarea{
  width:100%; min-height:240px; border:0; resize:vertical; padding:.8rem .9rem;
  background:#0a0c12; color:#e2ddd5;
  font-family:var(--font-mono,monospace); font-size:.82rem; line-height:1.6;
  outline:none; display:block;
}

/* ── output: plot + console ── */
.cl-viz{
  width:100%; max-width:100%; display:block;
  background:#0a0c12;
  border-bottom:1px solid #1a1f2c;
}
.cl-viz-wrap{ display:flex; flex-direction:column; background:#0a0c12;
  border-bottom:1px solid #1a1f2c; }
.cl-viz-wrap .cl-viz{ border-bottom:none; }
.cl-viz.dragging{ cursor:grabbing; }

/* animation transport (appears under the canvas when viz.frame() is used) */
.cl-anim{
  display:flex; align-items:center; gap:.6rem;
  padding:.4rem .8rem;
  background:#0a0c12; border-top:1px solid #1a1f2c;
}
.cl-anim-play{
  background:none; border:1px solid #2d3548; border-radius:6px;
  color:#e2ddd5; cursor:pointer; font-size:.7rem; line-height:1;
  padding:.32rem .55rem; font-family:var(--font-mono,monospace);
  transition:border-color .15s ease;
}
.cl-anim-play:hover{ border-color:#5cc9b5; }
.cl-anim-scrub{ flex:1; accent-color:#5cc9b5; min-width:0; }
.cl-anim-t{
  font-family:var(--font-mono,monospace); font-size:.66rem; color:#8a8378;
  flex:none; min-width:3.2rem; text-align:right;
}

.cl-console{
  flex:1; min-height:90px; overflow:auto; margin:0;
  padding:.75rem .95rem;
  background:#0a0c12; color:#a9a196;
  font-family:var(--font-mono,monospace); font-size:.76rem; line-height:1.55;
  white-space:pre-wrap; word-break:break-word;
}
.cl-console .cl-err{ color:#e86a6a; }
.cl-console .cl-ok{ color:#5ce88e; font-weight:700; }

/* ── code walkthrough (collapsible) ── */
.cl-notes{ border-top:1px solid var(--border); background:var(--surface); }
.cl-notes summary{
  cursor:pointer; padding:.65rem 1rem; list-style:none;
  font-family:var(--font-mono,monospace); font-size:.74rem; color:var(--text2);
  letter-spacing:.04em; display:flex; align-items:center; gap:.55rem;
  transition:color .15s ease;
}
.cl-notes summary:hover{ color:var(--text); }
.cl-notes summary::-webkit-details-marker{ display:none; }
.cl-notes summary::before{
  content:'▸'; color:var(--teal); font-size:.8rem;
  transition:transform .2s var(--ease-spring,ease);
}
.cl-notes[open] summary::before{ transform:rotate(90deg); }
.cl-notes-body{
  padding:.1rem 1.15rem 1.05rem;
  font-size:.92rem; line-height:1.75; color:var(--text2);
}
.cl-notes-body p{ margin:.55rem 0; }
.cl-notes-body ul{ margin:.55rem 0 .55rem 1.25rem; padding:0; }
.cl-notes-body li{ margin:.4rem 0; }
.cl-notes-body b, .cl-notes-body strong{ color:var(--text); }
.cl-notes-body code{
  font-family:var(--font-mono,monospace); font-size:.78em; color:var(--teal);
  background:color-mix(in srgb, var(--teal) 10%, transparent);
  padding:.1em .35em; border-radius:4px;
  /* wrap long code refs (e.g. `theta = np.linalg.solve(...)`) instead of
     overflowing the narrow notes column on mobile */
  white-space:normal; overflow-wrap:anywhere; word-break:break-word;
}

/* ── action bar ── */
.cl-bar{
  display:flex; align-items:center; gap:.5rem;
  padding:.6rem 1rem;
  border-top:1px solid var(--border); background:var(--surface);
  flex-wrap:wrap;
}
.cl-btn{
  font-family:var(--font-mono,monospace); font-size:.74rem; cursor:pointer;
  border:1px solid var(--border2); border-radius:8px; padding:.45rem .85rem;
  background:var(--bg3); color:var(--text);
  transition:border-color .15s ease, background .15s ease, transform .15s var(--ease-spring,ease), opacity .15s ease;
}
.cl-btn:hover:not(:disabled){ border-color:var(--border-hover); transform:translateY(-1px); }
.cl-btn:active:not(:disabled){ transform:translateY(0); }
.cl-btn:disabled{ opacity:.45; cursor:default; }
.cl-btn:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.cl-btn.primary{
  background:var(--warm); border-color:var(--warm); color:#1a1208; font-weight:700;
}
.cl-btn.primary:hover:not(:disabled){
  background:color-mix(in srgb, var(--warm) 88%, #fff); border-color:var(--warm);
}
.cl-btn.cl-check{
  border-color:color-mix(in srgb, var(--teal) 45%, transparent); color:var(--teal);
}
.cl-btn.cl-check:hover:not(:disabled){ border-color:var(--teal); }
.cl-btn.cl-sol{ color:var(--text3); }
.cl-btn.cl-sol:hover:not(:disabled){ color:var(--text2); }

/* status pill with pulsing dot while busy */
.cl-status{
  margin-left:auto;
  font-family:var(--font-mono,monospace); font-size:.7rem; color:var(--text3);
  display:inline-flex; align-items:center; gap:.4rem;
}
.cl-status.booting, .cl-status.running, .cl-status.done, .cl-status.error{ }
.cl-status.booting::before, .cl-status.running::before,
.cl-status.done::before, .cl-status.error::before{
  content:''; width:7px; height:7px; border-radius:50%; flex:none;
}
.cl-status.booting{ color:var(--yellow); }
.cl-status.booting::before{ background:var(--yellow); animation:cl-pulse 1.1s ease-in-out infinite; }
.cl-status.running{ color:var(--teal); }
.cl-status.running::before{ background:var(--teal); animation:cl-pulse .8s ease-in-out infinite; }
.cl-status.done{ color:var(--green); }
.cl-status.done::before{ background:var(--green); }
.cl-status.error{ color:var(--red); }
.cl-status.error::before{ background:var(--red); }
@keyframes cl-pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.7);} }

/* inline solution confirm */
.cl-confirm{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  padding:.6rem 1rem;
  border-top:1px solid var(--border); background:var(--surface);
}
.cl-confirm>span{
  font-family:var(--font-mono,monospace); font-size:.74rem; color:var(--text2);
}

/* ── mobile ── */
@media (max-width:760px){
  .codelab{ margin:1.6rem -0.2rem; border-radius:12px; }
  .cl-body{ grid-template-columns:1fr; }
  .cl-editor-wrap{ border-right:none; border-bottom:1px solid #1a1f2c; }
  .cl-editor-wrap .CodeMirror{ min-height:190px; max-height:340px; font-size:.78rem; }
  .cl-editor-wrap .CodeMirror-scroll{ max-height:340px; }
  .cl-textarea{ min-height:190px; max-height:340px; font-size:.78rem; }
  .cl-console{ max-height:200px; min-height:70px; }
  .cl-bar{ padding:.55rem .75rem; gap:.45rem; }
  .cl-btn{ padding:.55rem .8rem; font-size:.72rem; }  /* bigger touch targets */
  .cl-status{ width:100%; margin-left:0; order:9; }
  .cl-head{ padding:.6rem .75rem; }
  .cl-layout{ display:none; }  /* always stacked on phones */
}