/* Stateful practice notebook: compact Colab-style code cells + local outputs. */
.practice-notebook { min-height: 0; overflow-y: auto; padding: 2px 4px 24px; }
.notebook-toolbar {
  align-items: center;
  display: flex;
  gap: 12px;
  margin: 2px 0 12px 52px;
}
.notebook-add-cell { color: var(--accent-text); font-size: 12px; padding: 6px 12px; }
.notebook-shortcuts { color: var(--muted); font-size: 10px; }
.notebook-cells { display: flex; flex-direction: column; gap: 14px; }
.notebook-cell { display: grid; gap: 8px; grid-template-columns: 44px minmax(0, 1fr); position: relative; }
.notebook-cell-gutter { align-items: center; display: flex; flex-direction: column; gap: 6px; padding-top: 12px; }
.notebook-cell-run {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  font-size: 12px;
  height: 30px;
  justify-content: center;
  width: 30px;
}
.notebook-cell-run:hover, .notebook-cell:focus-within .notebook-cell-run {
  border-color: var(--accent-text);
  color: var(--accent-text);
}
.notebook-cell-run:disabled { cursor: wait; opacity: .65; }
.notebook-cell-exec { color: var(--code-key); font-family: monospace; font-size: 11px; }
.notebook-cell-exec--error { color: var(--code-err); }
.notebook-cell-main { min-width: 0; }
.notebook-cell-actions {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 10px;
  justify-content: space-between;
  min-height: 18px;
  padding: 0 4px;
  text-transform: uppercase;
}
.notebook-cell:first-child .notebook-cell-actions { display: none; }
.notebook-cell-delete {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.notebook-cell-delete:hover { color: var(--code-err); }
/* Shared with the highlight overlay for the same reason editor.css shares
   its rule: the padding and the 3px left border are part of where a glyph
   lands, so both layers have to carry them. */
.notebook-cell .code-editor,
.notebook-cell .code-highlight {
  border-left: 3px solid transparent;
  border-radius: 6px;
  flex: none;
  min-height: 96px;
  overflow-y: auto;
  padding: 13px 15px;
  /* The cell auto-sizes to its code (notebook-editor.js `resize`), so the
     drag handle was a control that undid itself on the next keystroke.
     `overflow-y: auto` stays as the safety net: if a re-measure is ever
     missed, the learner gets a scrollbar rather than silently clipped code,
     and code-highlight.js pads the overlay to match it. */
  resize: none;
}
.notebook-cell:focus-within .code-editor { border-left-color: var(--accent-text); }
.notebook-cell-output { border-left: 3px solid color-mix(in srgb, var(--code-key) 35%, transparent); margin-top: 2px; padding-left: 12px; }
.notebook-cell-output.hidden { display: none; }
.notebook-cell .output-header { font-size: 10px; margin: 8px 0 5px; }
.notebook-cell .output-area {
  background: transparent;
  border: 0;
  border-radius: 0;
  max-height: 260px;
  min-height: 34px;
  padding: 6px 0 10px;
}
.notebook-cell--stale { opacity: .72; }
.notebook-cell--stale::after {
  color: var(--warn);
  content: "runtime restarted — rerun this cell";
  font-size: 10px;
  position: absolute;
  right: 10px;
  top: 4px;
}
@media (max-width: 700px) {
  .notebook-shortcuts { display: none; }
  .notebook-toolbar { margin-left: 40px; }
  .notebook-cell { grid-template-columns: 34px minmax(0, 1fr); }
}

/* ---- the reference solution, as a cell ----------------------------------
   notebook-editor.js::showSolution appends this below the learner's own
   cells after a wrong answer. It has to read as THE ANSWER rather than as
   one more cell you wrote, or the two blur together at a glance — hence the
   accent left border and the labelled header, which is the same
   `.notebook-cell-actions` row every other cell uses (minus the delete
   button: this cell is not the learner's to remove; it goes when the
   question does).

   🔴 This label survives `.notebook-cell:first-child .notebook-cell-actions
   { display: none }` above only because the solution can never BE the first
   child: cell 1 is static markup in index.html, reset() never removes it, and
   the delete handler refuses when one cell is left. If that ever stops being
   true this rule loses on specificity (0,2,0 vs 0,3,0) and the answer renders
   as an unlabelled cell that looks like the learner's own code. */
.notebook-cell--solution .notebook-cell-actions--solution {
  color: var(--accent-text);
  display: flex;
  justify-content: flex-start;
  text-transform: none;
  font-size: 11px;
  letter-spacing: .3px;
}
.notebook-cell--solution .code-editor,
.notebook-cell--solution .code-highlight {
  border-left-color: var(--accent-text);
}
.notebook-cell--solution .notebook-cell-output {
  border-left-color: color-mix(in srgb, var(--accent-text) 45%, transparent);
}

.notebook-cell--solution-einops .notebook-cell-actions--solution-einops {
  color: #38bdf8;
}
.notebook-cell--solution-einops .code-editor,
.notebook-cell--solution-einops .code-highlight {
  border-left-color: #38bdf8;
}
.notebook-cell--solution-einops .notebook-cell-output {
  border-left-color: color-mix(in srgb, #38bdf8 45%, transparent);
}

/* 🪦 WORKED-EXAMPLE CELLS — `.notebook-cell--example`, deleted 2026-09-10.
   notebook-editor.js::showExamples used to lay the rail example's code fences
   in as runnable cells at the TOP of the notebook, info-blue against the
   solution cell's accent. Gone with the markup: "we don't put worked examples
   in the problems anymore. They have their own lessons" (Seth). The blanket
   `.notebook-cell:first-child .notebook-cell-actions { display: none }` above
   no longer has anything to tie with — the learner's own cell is `:first-child`
   again, which is what that rule was written for. */