/* CodeGrove "Your page" panel (U8C (2026-11-06), C2), from the approved web page sample (web5.css, 2026-11-03).
   Page class: pgmode = a Course 3 task of Unit 8 or later that ships page.html. The page sits over the Output panel, on
   white paper in both themes (like the turtle's drawing). Nothing here changes a page without pgmode. */
.pagep{display:none}
html.pgmode .pagep{display:flex;flex:1;min-height:0;flex-direction:column}
html.pgmode #insec{display:none}
html.pgmode .right{width:470px;min-width:340px}
html.pgmode .right .output{flex:none;height:230px;min-height:90px}
svg.i.web{color:var(--accent)}
.pwrap{flex:1;min-height:0;position:relative;margin:0 10px 10px;border:1px solid #C9D2DE;border-radius:5px;background:#fff;overflow:auto}
.phost[hidden],.pempty[hidden]{display:none}
.pempty{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:6px;padding:20px;text-align:center;
  color:#4B5B70;font:14px/1.5 var(--ui)}
.pempty b{color:#1F2937;font-weight:600;font-size:15px}

/* Output: each click in plain words */
html.pgmode .con .clk{display:block;margin:3px 0;color:var(--dim);font:14px/1.55 var(--ui);white-space:normal}
html.pgmode .con .clk b{color:var(--text);font-weight:600}
html.pgmode .con .clk code{font:14px var(--mono);color:var(--t-fn)}

/* a tablet (768 x 1024): the page and Output share the lower half, so neither is cut off */
@media (max-width:900px){
  html.pgmode .main{grid-template-rows:minmax(0,1fr) 8px 50%}
  html.pgmode .right{width:auto;min-width:0}
  html.pgmode .right .output{height:150px}
}