/* CodeGrove turtle view (CGT1, 2026-11-03): turtle labs inside CodeGrove. Ported from the approved sample
   (_PATHWAY_PLANNING_DO_NOT_SHIP/Python_Lab_Design/mockups/turtle5.css, approved 2026-11-03).
   Page class: ttmode = the drawing panel shows (a turtle task, or Free practice code that imports turtle). The drawing
   panel sits over the Output panel and is white paper in both themes. Nothing here changes a page without ttmode. */
:root{--goal-ink:#8D97A5}
.drawp,.pkey,.ttex{display:none}
html.ttmode .drawp{display:flex}
html.ttmode #insec{display:none}
html.ttmode .right{width:480px;min-width:340px}
html.ttmode .right .output{flex:none;height:190px;min-height:90px}
svg.i.tic{color:var(--accent)}

/* the running line and the line that went wrong (the run band itself is in robot.css, for both views) */
html.ttmode #code .cm-line.cg-errline{background-color:var(--bad-bg);box-shadow:inset 0 0 0 2px var(--bad);border-radius:5px}
html.ttmode #code .cm-lineNumbers .cm-gutterElement.cg-errgut::before{content:"";position:absolute;left:7px;top:7px;width:9px;height:9px;border-radius:5px;background:var(--bad)}

/* task card: the Example shows the goal as a small picture next to the calls */
html.ttmode .task .ttex{display:flex;gap:12px;align-items:center;margin-top:8px}
.ttex p{margin:0 0 6px}
.expic{flex:none;width:150px;height:90px;border:1px solid var(--border);border-radius:5px;background:#fff;display:grid;place-items:center}
.expic svg{width:100%;height:100%}
.excode{margin:0;padding:7px 10px;border-radius:5px;background:var(--island);border:1px solid var(--border);
  font:13px/20px var(--mono);font-variant-ligatures:none;white-space:pre;color:var(--t-op)}

/* the drawing panel */
.drawp{flex:1;min-height:0;flex-direction:column}
.drawp .ihead .note{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;text-transform:none;letter-spacing:0}
.drawp .ihead .end{gap:6px}
.drawp .pb{height:28px;display:inline-flex;align-items:center;gap:5px;padding:0 9px 0 7px;border-radius:5px;border:1px solid var(--border);background:none;
  color:var(--text);font:600 12.5px/1 var(--ui);letter-spacing:0;text-transform:none;cursor:pointer;user-select:none;-webkit-appearance:none;appearance:none}
.drawp .pb svg{width:13px;height:13px;color:var(--accent)}
.drawp .pb:hover{border-color:var(--match-line)}
.drawp .pb.on{background:var(--soft-2);border-color:var(--match-line);color:var(--accent)}
.drawp .pb[hidden]{display:none}
.paper{flex:1;min-height:0;position:relative;margin:0 10px;border:1px solid #C9D2DE;border-radius:5px;background:#fff;overflow:hidden}
.paper canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
.xy{position:absolute;left:8px;top:8px;padding:3px 7px;border-radius:5px;background:rgba(255,255,255,.92);border:1px solid #D3DBE6;
  font:12px/1.3 var(--mono);color:#33435A;pointer-events:none}
.xy[hidden]{display:none}
.gnote{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);padding:5px 9px;border-radius:5px;background:rgba(255,255,255,.94);
  border:1px solid #D3DBE6;font:500 12.5px/1.4 var(--ui);color:#33435A;pointer-events:none}
.gnote[hidden]{display:none}
.pbar{flex:none;display:flex;align-items:center;gap:8px;padding:8px 10px}
.drawp .spd{display:flex;height:28px;padding:2px;gap:2px;border:1px solid var(--border);border-radius:5px}
.drawp .spd button{display:grid;place-items:center;height:auto;min-height:0;padding:0 7px;border:0;border-radius:5px;background:none;
  font:500 12px/1 var(--ui);color:var(--dim);cursor:pointer;user-select:none;-webkit-appearance:none;appearance:none}
.drawp .spd button:hover{color:var(--text)}
.drawp .spd button.on{background:var(--soft-2);color:var(--accent);font-weight:600}
.stat{margin-left:auto;font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* Output: the turtle's messages in plain words */
html.ttmode .con .clk{display:block;margin:2px 0;color:var(--dim);font:13px/1.5 var(--ui);white-space:normal}
html.ttmode .con .clk b{color:var(--text);font-weight:600}
html.ttmode .con .clk code{font:13px var(--mono);color:var(--t-fn)}

/* Check results: roomy rows, each with a small picture of the drawing over the goal */
html.ttmode .pop{width:480px}
html.ttmode .pkey{display:flex;align-items:center;gap:6px;padding:8px 12px 0;font-size:12px;color:var(--dim)}
.pkey span{display:inline-block;width:18px;height:0;border-top:2px solid #1F2937}
.pkey .kgoal{border-top:2px dashed var(--goal-ink);margin-left:10px}
html:not(.light) .pkey .kstu{border-top-color:#DCE6F4}
html.ttmode .pop .crow{min-height:64px;gap:12px;padding:5px 6px}
html.ttmode .pop .crow > span{flex:1;min-width:0;line-height:1.4;padding:4px 0}
html.ttmode .pop .crow code{font:13px var(--mono)}
html.ttmode .pop .crow .thumb{flex:none;width:58px;height:58px;padding:0;border:1px solid #C9D2DE;border-radius:5px;background:#fff;overflow:hidden}
html.ttmode .pop .crow .thumb.wide{width:116px}
.thumb svg{display:block;width:100%;height:100%}

@media (max-width:900px){
  html.ttmode .right{width:auto;min-width:0}
  html.ttmode .drawp{flex:none;height:340px}
  html.ttmode .right .output{height:120px}
  html.ttmode .pop{width:min(480px,calc(100vw - 16px))}
}