/* Isolated slide-playground page. Not loaded by decks — only by
   docs-v3/labs/slide-playground.html inside an iframe. Tokens copied
   from slides.css so the pane matches the deck without pulling the
   slide engine. */
:root{
  --red:#B31B1B; --red-dark:#8f1414; --red-tint:#fbecec; --red-line:#eec9c9;
  --ink:#2a1414; --muted:#8a6a6a; --white:#ffffff;
  --gray:#fff8f6; --line:#eddad6;
  --code-bg:#26100f; --code-ink:#e9edf2;
  --sans:"Lato","Calibri","Segoe UI","Inter",-apple-system,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--gray);color:var(--ink);
  font-family:var(--sans);overflow:hidden}
.spg{display:flex;flex-direction:column;height:100%}
.spg-bar{
  display:flex;align-items:center;gap:10px;flex-shrink:0;
  padding:8px 10px;background:var(--white);border-bottom:1px solid var(--line);
}
.spg-toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.spg-seg{
  appearance:none;border:0;margin:0;background:transparent;color:var(--muted);
  font:700 14px/1 var(--sans);padding:7px 14px;cursor:pointer;
}
.spg-seg + .spg-seg{border-left:1px solid var(--line)}
.spg-seg:hover{color:var(--red);background:var(--red-tint)}
.spg-seg.is-active{background:var(--red);color:#fff}
.spg-run{
  appearance:none;border:1px solid var(--red);border-radius:8px;
  background:var(--red);color:#fff;font:700 14px/1 var(--sans);
  padding:8px 14px;cursor:pointer;
}
.spg-run:hover{background:var(--red-dark);border-color:var(--red-dark)}
.spg-run:disabled{opacity:.65;cursor:wait}
.spg-status{flex:1;min-width:0;font:600 13px/1.3 var(--sans);color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spg-status .err{color:var(--red)}
.spg-status .ok{color:#1a7f37}
.spg-body{display:flex;flex:1;min-height:0}
.spg-code,.spg-out{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.spg-code{border-right:1px solid var(--line)}
.spg-label{
  flex-shrink:0;padding:5px 10px;font:700 11px/1 var(--sans);
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  background:var(--white);border-bottom:1px solid var(--line);
}
#editor{
  flex:1;min-height:0;width:100%;resize:none;border:0;
  background:var(--code-bg);color:var(--code-ink);
  font:13px/1.45 var(--mono);padding:12px 14px;outline:none;
}
.spg-out{background:var(--white)}
/* The output pane is a COLUMN — plot on top, console under it — not a centring
   flex box. Centring is what made printed output float in the middle of the
   pane in a proportional font, which is nothing like a console. */
#plot{
  flex:1;min-height:0;overflow:auto;padding:0;
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  text-align:left;
}
.pg-plots{flex:0 0 auto;padding:10px;text-align:center}
#plot img{max-width:100%;height:auto;max-height:52vh;object-fit:contain;border-radius:6px}
/* The console proper. white-space:pre (never wrap) is what keeps a data.frame's
   columns lined up; a long line scrolls sideways instead of folding mid-column.
   Sized up from the editor's 13px so it reads from the back of the room. */
.pg-console{
  flex:0 0 auto;margin:0;padding:10px 12px;
  font:15px/1.5 var(--mono);color:var(--ink);background:var(--white);
  white-space:pre;overflow-x:auto;overflow-y:visible;
  text-align:left;tab-size:2;
}
.pg-console .err{color:var(--red)}
.pg-console .note{color:var(--muted)}
.pg-console .cmt{color:var(--muted)}
/* A plot above a console gets a hairline between them, as RStudio's panes do. */
.pg-plots + .pg-console{border-top:1px solid var(--line)}
#plot .empty{color:var(--muted);font:600 14px/1.4 var(--sans);
  text-align:center;max-width:28em;margin:auto;padding:12px}
/* Errors are ordinary console lines now (red, inside the <pre>), so the old
   free-standing #plot .err block is gone — an id-scoped rule here would have
   out-specified .pg-console .err and put block padding on an inline span. */

/* Recitation-step buttons: Question loads the step's prompt, Solution comments
   out whatever is in the editor and appends the worked answer below it. Hidden
   on presets that have no solution, so the older presets look unchanged. */
.spg-inject{display:inline-flex;gap:6px;flex-shrink:0}
.spg-inject[hidden]{display:none}
.spg-ghost{
  appearance:none;border:1px solid var(--red-line);border-radius:8px;
  background:var(--white);color:var(--red);font:700 14px/1 var(--sans);
  padding:8px 12px;cursor:pointer;
}
.spg-ghost:hover{background:var(--red-tint);border-color:var(--red)}