/* Playground widget styles. Theme colours come from the course page's
   :root variables (dark default, [data-theme="light"]). */
.pg{
  --pg-ok:#4caf6e; --pg-bad:#e05a5a; --pg-blue:#5aa0ff; --pg-purple:#b48cff; --pg-teal:#3fc1b0;
  --pg-dim:var(--text-faint); --pg-cell:var(--surface);
  font-family:Inter,system-ui,sans-serif; color:var(--text); background:var(--bg);
  border-radius:12px; padding:14px 16px; box-sizing:border-box; outline:none; font-size:13px;
}
.pg *{box-sizing:border-box;}
.pg:focus-visible{box-shadow:0 0 0 2px var(--accent);}
.pg-head{margin-bottom:8px;}
.pg-title{font-family:Poppins,Inter,sans-serif;font-weight:700;font-size:15px;}
.pg-blurb{color:var(--text-mut);font-size:12.5px;line-height:1.45;margin-top:2px;}
.pg-blurb code,.pg-note code,.pg-msg code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;background:var(--surface);padding:1px 4px;border-radius:4px;}

/* inputs */
.pg-inputs{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:flex-end;margin-bottom:10px;}
.pg-inputs:empty{display:none;}
.pg-field{display:flex;flex-direction:column;gap:3px;font-size:11px;font-weight:600;color:var(--text-mut);}
.pg-field-label{text-transform:uppercase;letter-spacing:.04em;font-size:10px;}
.pg-input{font:inherit;font-size:13px;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:6px 9px;min-width:0;}
.pg-input:focus{outline:none;border-color:var(--accent);}
.pg-input-wide{width:min(360px,100%);}
.pg-input-sm{width:72px;}
.pg-input-xs{width:56px;}
.pg-btn{font:inherit;font-size:12px;font-weight:700;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:6px 10px;cursor:pointer;white-space:nowrap;}
.pg-btn:hover{border-color:var(--border-strong);}
.pg-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.pg-btn:disabled{opacity:.45;cursor:default;}
.pg-pill{font:inherit;font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text-mut);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;}
.pg-pill.on{background:var(--fill-primary);border-color:var(--fill-primary);color:#fff;}
.pg-seg{display:inline-flex;flex-wrap:wrap;max-width:100%;gap:2px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:2px;}
.pg-seg-btn{font:inherit;font-size:11.5px;font-weight:700;padding:4px 8px;border:none;border-radius:6px;background:transparent;color:var(--text-mut);cursor:pointer;white-space:nowrap;}
.pg-seg-btn.on{background:var(--fill-primary);color:#fff;}
.pg-ops{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.pg-hint{font-size:11.5px;color:var(--text-faint);flex-basis:100%;}
.pg-note{font-size:12px;color:var(--text-mut);margin-top:8px;line-height:1.5;text-align:center;}

/* controls */
.pg-controls{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px;}
.pg-ctl-left,.pg-ctl-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pg-score{background:rgba(255,255,255,.22);border-radius:999px;padding:0 6px;font-size:10.5px;}
.pg-step{font-size:11.5px;font-weight:600;color:var(--text-faint);white-space:nowrap;min-width:52px;text-align:center;}
.pg-icon{width:28px;height:28px;border-radius:7px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:15px;line-height:1;cursor:pointer;}
.pg-icon:disabled{color:var(--border-strong);cursor:default;}
.pg-play{border:none;background:var(--accent);color:#fff;padding:6px 14px;border-radius:8px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;min-width:84px;}
.pg-play:hover{background:var(--accent-hover);}
.pg-play:disabled{opacity:.45;cursor:default;}
.pg-progress{flex-basis:100%;height:4px;border-radius:999px;background:var(--border);overflow:hidden;}
.pg-progress > div{height:100%;background:var(--accent);transition:width .15s ease;}

/* body */
.pg-body{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;}
.pg-viz-col{flex:3 1 380px;min-width:0;}
.pg-code-col{flex:1 1 180px;max-width:340px;min-width:0;background:var(--surface);border-radius:10px;padding:10px;}
.pg-code-title{font-size:10px;font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;}
.pg-code code{display:block;padding:4px 8px;border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:1.45;white-space:pre-wrap;color:var(--text-mut);}
.pg-code code.on{background:var(--accent);color:#fff;font-weight:600;}
.pg-viz{min-height:120px;}
.pg-msg{text-align:center;font-size:12.5px;color:var(--text-mut);margin-top:8px;min-height:18px;line-height:1.5;}
.pg-msg b{color:var(--text);}
.pg-fb{font-weight:700;}
.pg-fb.ok{color:var(--pg-ok);}
.pg-fb.bad{color:var(--pg-bad);}
.pg-ask{margin-top:8px;background:var(--pink-wash);border:1px dashed var(--accent);border-radius:10px;padding:10px 12px;}
.pg-ask-q{font-weight:700;font-size:13px;margin-bottom:6px;}
.pg-ask-hint{font-size:12px;color:var(--text-mut);}
.pg-choices{display:flex;flex-wrap:wrap;gap:6px;}
.pg-answer-form{display:flex;gap:6px;}
.pg-viz.asking [data-pick]{cursor:pointer;}
.pg-viz.asking .pg-cell[data-pick]:hover,.pg-viz.asking .pg-bar-wrap[data-pick]:hover .pg-bar{outline:2px solid var(--accent);outline-offset:1px;}
.pg-viz.asking .pg-node[data-pick]:hover circle{stroke:var(--accent);stroke-width:3;}
.pg-viz.asking .pg-edge[data-pick]:hover .pg-edge-line{stroke:var(--accent);stroke-width:4;}

/* cells / bars */
.pg-cells{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;}
.pg-cell-wrap{display:flex;flex-direction:column;align-items:center;}
.pg-cell{min-width:30px;height:34px;padding:0 4px;border-radius:8px;background:var(--pg-cell);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13.5px;transition:background .15s,transform .15s;}
.pg-cell-above,.pg-cell-below{font-size:9.5px;font-weight:700;color:var(--text-faint);height:13px;line-height:13px;white-space:nowrap;}
.pg-cell-above{color:var(--accent);}
.pg-cell.hi{background:var(--accent);border-color:var(--accent);color:#fff;}
.pg-cell.soft{background:var(--pink-wash);border-color:var(--accent);}
.pg-cell.ok{background:var(--pg-ok);border-color:var(--pg-ok);color:#fff;}
.pg-cell.bad{background:var(--pg-bad);border-color:var(--pg-bad);color:#fff;}
.pg-cell.blue{background:var(--pg-blue);border-color:var(--pg-blue);color:#fff;}
.pg-cell.purple{background:var(--pg-purple);border-color:var(--pg-purple);color:#fff;}
.pg-cell.dim{opacity:.35;}
.pg-cell.empty{background:transparent;border-style:dashed;color:var(--text-faint);}
.pg-cell.sorted{background:var(--surface-alt);border-color:var(--pg-ok);color:var(--pg-ok);}
.pg-bars{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:150px;padding-top:14px;}
.pg-bar-wrap{display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;width:28px;}
.pg-bar{width:100%;border-radius:4px 4px 0 0;background:var(--pg-blue);position:relative;transition:height .18s ease,background .15s;min-height:4px;}
.pg-bar span{position:absolute;top:-15px;left:0;right:0;text-align:center;font-size:10px;font-weight:700;color:var(--text-mut);}
.pg-bar.hi{background:var(--accent);}
.pg-bar.pivot{background:var(--yellow);}
.pg-bar.ok{background:var(--pg-ok);}
.pg-bar.dim{opacity:.3;}
.pg-bar.purple{background:var(--pg-purple);}
.pg-bar-idx{font-size:9.5px;color:var(--text-faint);margin-top:3px;}
.pg-bar-marks{display:flex;justify-content:center;gap:4px;margin-top:1px;}
.pg-bar-mark{width:28px;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-weight:700;color:var(--accent);line-height:1.15;min-height:12px;white-space:pre-line;}
.pg-bar.lt{background:var(--pg-teal);}
.pg-bar.ge{background:var(--pg-purple);}
.pg-bar.key{background:var(--yellow);}
.pg-bar.ghost{background:transparent;outline:1px dashed var(--border-strong);outline-offset:-1px;}
.pg-bar.ghost span{display:none;}
.pg-bufs{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:10px;}
.pg-buf{display:flex;gap:3px;align-items:flex-start;}
.pg-buf-name{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:12px;color:var(--text-mut);padding:8px 4px 0 0;}
.pg-buf .pg-cell{min-width:28px;height:30px;font-size:12px;}
.pg-cell.used{opacity:.25;border-style:dashed;}
.pg-vars{margin-top:10px;padding-top:8px;border-top:1px solid var(--border);}
.pg-vars-grid{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;padding:0 8px;}
.pg-var-k{color:var(--text-faint);}
.pg-var-v{color:var(--text);font-weight:700;overflow-wrap:anywhere;border-radius:4px;padding:0 4px;margin-left:-4px;justify-self:start;transition:background .2s;}
.pg-var-v.changed{background:var(--pink-wash);color:var(--accent);}
.pg-row{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:8px;}
.pg-legend{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;font-size:11px;color:var(--text-mut);margin-top:8px;}
.pg-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px;}
.pg-kv{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--text-mut);text-align:center;margin-top:6px;}
.pg-kv b{color:var(--text);}
.pg-table{border-collapse:collapse;margin:8px auto 0;font-size:12px;}
.pg-table th,.pg-table td{border:1px solid var(--border);padding:3px 8px;text-align:center;min-width:30px;}
.pg-table th{background:var(--surface);color:var(--text-mut);font-weight:700;font-size:11px;}
.pg-table td.hi{background:var(--accent);color:#fff;font-weight:700;}
.pg-table td.soft{background:var(--pink-wash);}
.pg-table td.ok{color:var(--pg-ok);font-weight:700;}
.pg-table td.dim{color:var(--text-faint);}
.pg-table td[data-pick]{cursor:pointer;}
.pg-viz.asking .pg-table td[data-pick]:hover{outline:2px solid var(--accent);outline-offset:-2px;}

/* stack / queue / list pictures */
.pg-stack{display:flex;flex-direction:column-reverse;align-items:center;gap:4px;min-height:150px;justify-content:flex-start;padding:6px;border:2px solid var(--border);border-top:none;border-radius:0 0 12px 12px;width:110px;margin:0 auto;}
.pg-stack .pg-cell{width:80px;}
.pg-queue{display:flex;gap:5px;justify-content:center;align-items:center;min-height:60px;padding:8px 10px;border:2px solid var(--border);border-left:none;border-right:none;}
.pg-list{display:flex;gap:2px;justify-content:center;align-items:center;flex-wrap:wrap;min-height:70px;}
.pg-lnode{display:flex;align-items:stretch;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--pg-cell);transition:transform .15s;}
.pg-lnode.hi{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);}
.pg-lnode.bad{border-color:var(--pg-bad);box-shadow:0 0 0 2px var(--pg-bad);opacity:.7;}
.pg-lnode > div{padding:6px 8px;font-weight:700;font-size:13px;display:flex;align-items:center;}
.pg-lnode .ptr{background:var(--surface-alt);color:var(--text-faint);font-size:10px;font-weight:600;border-left:1px solid var(--border);}
.pg-lnode .ptr.left{border-left:none;border-right:1px solid var(--border);}
.pg-larrow{color:var(--text-faint);font-size:16px;padding:0 3px;}
.pg-lhead{font-size:10px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.04em;align-self:center;margin-right:4px;}

/* tree svg */
.pg-tree{display:block;width:100%;max-width:640px;margin:0 auto;height:auto;}
.pg-tree line{stroke:var(--border-strong);stroke-width:1.5;}
.pg-tree line.hi{stroke:var(--accent);stroke-width:2.5;}
.pg-tree circle{fill:var(--surface);stroke:var(--border-strong);stroke-width:1.5;}
.pg-tree .tn.hi circle{fill:var(--accent);stroke:var(--accent);}
.pg-tree .tn.soft circle{fill:var(--pink-wash);stroke:var(--accent);}
.pg-tree .tn.ok circle{fill:var(--pg-ok);stroke:var(--pg-ok);}
.pg-tree .tn.blue circle{fill:var(--pg-blue);stroke:var(--pg-blue);}
.pg-tree .tn.bad circle{fill:var(--pg-bad);stroke:var(--pg-bad);}
.pg-tree .tn.dim{opacity:.35;}
.pg-tree text{font-family:Inter,sans-serif;font-size:12px;font-weight:700;fill:var(--text);pointer-events:none;}
.pg-tree .tn.hi text,.pg-tree .tn.ok text,.pg-tree .tn.blue text,.pg-tree .tn.bad text{fill:#fff;}
.pg-tree .tsub{font-size:9px;fill:var(--text-faint);font-weight:600;}
.pg-tree .tn[data-pick]{cursor:pointer;}
.pg-viz.asking .pg-tree .tn[data-pick]:hover circle{stroke:var(--accent);stroke-width:3;}

/* graph editor */
.pg-graph-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex-basis:100%;}
.pg-graph{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.pg-graph-svg{display:block;width:100%;height:auto;touch-action:none;user-select:none;-webkit-user-select:none;}
.pg-graph[data-mode="move"] .pg-graph-svg{cursor:crosshair;}
.pg-graph[data-mode="move"] .pg-node{cursor:grab;}
.pg-graph[data-mode="edge"] .pg-node,.pg-graph[data-mode="delete"] .pg-node,.pg-graph[data-mode="delete"] .pg-edge,.pg-graph .pg-edge{cursor:pointer;}
.pg-graph-empty{fill:var(--text-faint);font-size:13px;font-family:Inter,sans-serif;pointer-events:none;}
.pg-edge-hit{stroke:transparent;stroke-width:14;}
.pg-edge-line{stroke:var(--border-strong);stroke-width:2;transition:stroke .15s;}
.pg-edge.selected .pg-edge-line{stroke:var(--pg-purple);stroke-width:3;}
.pg-edge.hi .pg-edge-line{stroke:var(--accent);stroke-width:3.5;}
.pg-edge.active .pg-edge-line{stroke:var(--pg-ok);stroke-width:3.5;}
.pg-edge.done .pg-edge-line{stroke:var(--pg-ok);stroke-width:3;}
.pg-edge.bad .pg-edge-line{stroke:var(--pg-bad);stroke-width:3;stroke-dasharray:5 4;}
.pg-edge.dim .pg-edge-line{opacity:.25;}
.pg-arrow-head{fill:var(--border-strong);}
.pg-arrow-head.hi{fill:var(--pg-ok);}
.pg-edge-label rect{fill:var(--bg);stroke:var(--border);}
.pg-edge-label text{font-family:Inter,sans-serif;font-size:10.5px;font-weight:700;fill:var(--text-mut);pointer-events:none;}
.pg-edge-label.hi rect,.pg-edge-label.active rect,.pg-edge-label.done rect{stroke:var(--accent);}
.pg-edge-label.hi text{fill:var(--accent);}
.pg-node circle{fill:var(--bg);stroke:var(--border-strong);stroke-width:2;transition:fill .15s,stroke .15s;}
.pg-node text{font-family:Inter,sans-serif;font-weight:700;pointer-events:none;}
.pg-node-id{font-size:13px;fill:var(--text);}
.pg-node-sub{font-size:10px;fill:var(--pg-purple);}
.pg-node.pending circle{stroke:var(--pg-purple);stroke-width:3;}
.pg-node.start circle{stroke:var(--accent);stroke-width:3;}
.pg-node.cur circle{fill:var(--accent);stroke:var(--accent);}
.pg-node.cur .pg-node-id{fill:#fff;}
.pg-node.seen circle{fill:var(--pink-wash);stroke:var(--accent);}
.pg-node.done circle{fill:var(--pg-ok);stroke:var(--pg-ok);}
.pg-node.done .pg-node-id{fill:#fff;}
.pg-node.front circle{fill:var(--pg-blue);stroke:var(--pg-blue);}
.pg-node.front .pg-node-id{fill:#fff;}
.pg-node.bad circle{fill:var(--pg-bad);stroke:var(--pg-bad);}
.pg-node.bad .pg-node-id{fill:#fff;}
.pg-node.dim{opacity:.35;}

/* misc visual bits */
.pg-queue-strip{display:flex;gap:4px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--text-mut);}
.pg-queue-strip .pg-cell{min-width:28px;height:28px;font-size:12px;}
.pg-grid{display:grid;gap:4px;justify-content:center;margin:0 auto;}
.pg-grid .pg-cell{min-width:0;width:auto;height:34px;padding:0;font-size:12.5px;}
.pg-text{display:flex;gap:2px;justify-content:flex-start;flex-wrap:nowrap;}
.pg-text .pg-cell{min-width:26px;width:26px;height:32px;padding:0;font-family:ui-monospace,Menlo,monospace;font-size:13px;}
.pg-text .pg-cell-below,.pg-text .pg-cell-above{height:12px;line-height:12px;}
.pg-text-sm .pg-cell{min-width:20px;width:20px;height:28px;font-size:12px;}
.pg-text-sm .pg-cell-below{font-size:8.5px;}
.pg-math{font-family:ui-monospace,Menlo,monospace;font-size:13px;text-align:center;margin-top:6px;line-height:1.7;}
.pg-math b{color:var(--accent);}

@media (max-width:640px){
  .pg-code-col{max-width:none;}
  .pg{padding:12px;}
  .pg-code-col{flex-basis:100%;}
  .pg-bar-wrap{width:20px;}
  .pg-bar-mark{width:20px;font-size:9px;}
  .pg-cell{min-width:28px;height:32px;font-size:12px;}
}
/* Flat 2D selects: drop the native bevelled/3D control, draw a plain chevron in the text colour. */
select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:22px !important;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%) !important;background-position:calc(100% - 13px) 50%,calc(100% - 8px) 50% !important;background-size:5px 5px,5px 5px !important;background-repeat:no-repeat !important;}