/* CodeGrove robot view (RM1b, 2026-10-18): Robot Maze: Python inside CodeGrove. Ported from the approved mockup
   (_PATHWAY_PLANNING_DO_NOT_SHIP/Python_Lab_Design/mockups/robot5.css, approved 2026-10-16).
   Page classes: rbmode = a robot task is open, rbout = the Output strip shows (the code prints), rbplay = the robot
   moves. Nothing here changes a page that has no robot task open. */
:root{--run-band:rgba(255,201,77,.17);--run-ring:rgba(255,201,77,.62);--run-mark:#ffc94d;
  --k-move:#7DB8FF;--k-move-bg:rgba(90,162,255,.12);--k-move-bd:rgba(90,162,255,.40);
  --k-turn:#5FD0DD;--k-turn-bg:rgba(95,208,221,.10);--k-turn-bd:rgba(95,208,221,.38);
  --k-out:#C0A2FF;--k-out-bg:rgba(192,162,255,.11);--k-out-bd:rgba(192,162,255,.38);
  --k-sense:#6FD6A2;--k-sense-bg:rgba(111,214,162,.10);--k-sense-bd:rgba(111,214,162,.36);--room-bg:#0B1424}
html.light{--run-band:rgba(255,201,77,.36);--run-ring:#D9A21B;--run-mark:#A86F00;
  --k-move:#1557C0;--k-move-bg:rgba(26,100,214,.07);--k-move-bd:rgba(26,100,214,.36);
  --k-turn:#0A6670;--k-turn-bg:rgba(10,102,112,.07);--k-turn-bd:rgba(10,102,112,.36);
  --k-out:#6236B3;--k-out-bg:rgba(98,54,179,.07);--k-out-bd:rgba(98,54,179,.34);
  --k-sense:#17703F;--k-sense-bg:rgba(23,112,63,.07);--k-sense-bd:rgba(23,112,63,.34);--room-bg:#E9EFF7}

/* ---- which parts show */
.cmds,.roomsec{display:none}
html.rbmode .cmds,html.rbmode .roomsec{display:flex}
html.rbmode #insec,html.rbmode #gh,html.rbmode .output{display:none}
html.rbmode.rbout .output{display:flex;flex:none;height:118px;margin-top:8px}
html.rbmode .right{min-width:560px}

/* ---- the room island: head, test buttons, map, sensors and outputs, message */
.roomsec{flex:1 1 auto;min-height:0}
.roomsec .ihead .note{min-width:0;flex:0 1 auto;white-space:nowrap}
.roomsec .ihead .end{gap:6px;flex:none}
.roomsec .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}
.roomsec .pb svg{width:13px;height:13px;color:var(--accent)}
.roomsec .pb:hover{border-color:var(--match-line)}
.roomsec .spd{display:flex;height:28px;padding:2px;gap:2px;border:1px solid var(--border);border-radius:5px;text-transform:none;letter-spacing:0}
.roomsec .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}
.roomsec .spd button:hover{color:var(--text)}
.roomsec .spd button.on{background:var(--soft-2);color:var(--accent);font-weight:600}
.rtests{flex:none;display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px 0}
.rtest{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px 0 9px;border-radius:5px;border:1px solid var(--border);background:var(--island);color:var(--dim);font:500 13px/1 var(--ui);cursor:pointer;-webkit-appearance:none;appearance:none}
.rtest svg{width:15px;height:15px;color:var(--ln)}
.rtest:hover{border-color:var(--match-line);color:var(--text)}
.rtest.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--soft);color:var(--text);font-weight:600}
.rtest.pass svg{color:var(--ok)}
.rtest.fail svg{color:var(--bad)}
.roomwrap{flex:0 1 auto;min-height:150px;position:relative;margin:8px 10px 0;border-radius:5px;background:var(--room-bg);overflow:hidden}
.roomwrap svg.rbroom{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);display:block}
.rb-bot{transition:transform calc(.38s * var(--spd,1)) ease-in-out}
.rb-turn{transition:transform calc(.32s * var(--spd,1)) ease-in-out}
.rb-bot.snap,.rb-bot.snap *{transition:none!important}
.rb-chip rect{fill:#fff;stroke:#9aa59c;stroke-width:1}
.rb-chip text{font-family:var(--ui);font-weight:700;fill:#1f2937}
.rb-chip.rb-dry rect{fill:#fef3c7;stroke:#b45309}.rb-chip.rb-dry text{fill:#78350f}
.rb-chip.rb-wet rect{fill:#dbeafe;stroke:#1d4ed8}.rb-chip.rb-wet text{fill:#1e3a8a}
.rb-chip.rb-press rect{fill:#ccfbf1;stroke:#0e7268;stroke-width:1.5}.rb-chip.rb-press text{fill:#134e4a}
.rb-chip.rb-darkw rect{fill:#0f1a3a;stroke:#c7d2fe}.rb-chip.rb-darkw text{fill:#fff}
.rb-chip.rb-hot rect{fill:#fee2e2;stroke:#b91c1c;stroke-width:1.5}.rb-chip.rb-hot text{fill:#7f1d1d}
.rb-chip.rb-cold rect{fill:#e0f2fe;stroke:#0369a1;stroke-width:1.5}.rb-chip.rb-cold text{fill:#0c4a6e}
.rb-bumpmark{fill:#ff4d4d;stroke:#7f1d1d;stroke-width:1}
.rpanel{flex:none;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:8px 10px 0}
.rpanel:empty{display:none}
.rio-g{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.rioh{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);margin-right:2px}
.rio{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 9px;border-radius:5px;border:1px solid var(--border);background:var(--raise);font-size:12.5px;color:var(--text);white-space:nowrap}
.rio code{font:12.5px var(--mono);color:var(--k-sense)}
.rio b{font:700 12.5px var(--mono)}
.rio .t{color:var(--ok)}.rio .f{color:var(--dim)}
.rio.read{border-color:var(--run-ring);background:var(--run-band)}
.rio.on{border-color:var(--ok);background:var(--win-bg)}
.rio.rio-unread{opacity:.6}
.rio .nr{font-weight:400;font-style:italic}
.rmsg{flex:none;display:flex;align-items:flex-start;gap:8px;margin:8px 10px 10px;padding:9px 11px;min-height:40px;border-radius:5px;background:var(--raise);font-size:13.5px;line-height:1.45;color:var(--text)}
.rmsg .rmi{display:flex;flex:none;margin-top:1px}
.rmsg .rmi svg{width:17px;height:17px;color:var(--accent)}
.rmsg .rmt{min-width:0}
.rmsg.good{background:var(--win-bg)}.rmsg.good .rmi svg{color:var(--ok)}
.rmsg.bad{background:var(--bad-bg)}.rmsg.bad .rmi svg{color:var(--bad)}
.rmsg.run .rmi svg{color:var(--run-mark)}
.rmsg code{font:13px var(--mono)}
.rmsg b{font-weight:650}

/* ---- the Commands strip above the code */
.cmds{flex:none;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 6px 0;padding:6px 8px;border-radius:5px;border:1px solid var(--border)}
.cmds .cmdh{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);margin-right:4px}
.cmds .cmd{height:30px;display:inline-flex;align-items:center;padding:0 10px;border-radius:5px;border:1px solid;font:500 13.5px/1 var(--mono);font-variant-ligatures:none;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;background:none;-webkit-appearance:none;appearance:none}
.cmds .cmd:active{transform:translateY(1px)}
.cmds .cmd.k-move{color:var(--k-move);background:var(--k-move-bg);border-color:var(--k-move-bd)}
.cmds .cmd.k-turn{color:var(--k-turn);background:var(--k-turn-bg);border-color:var(--k-turn-bd)}
.cmds .cmd.k-output{color:var(--k-out);background:var(--k-out-bg);border-color:var(--k-out-bd)}
.cmds .cmd.k-sensor{color:var(--k-sense);background:var(--k-sense-bg);border-color:var(--k-sense-bd)}
.cmds .cmd:hover{filter:brightness(1.12)}
html.light .cmds .cmd:hover{filter:brightness(.92)}
.cmds .cmdsep{width:1px;height:20px;background:var(--border);margin:0 2px}

/* ---- the running line and the line that went wrong */
#code .cm-line.cg-runline{background-color:var(--run-band);box-shadow:inset 0 0 0 1px var(--run-ring);border-radius:5px}
#code .cm-gutterElement.cg-rungut,#code .cm-gutterElement.cg-errgut{position:relative}
#code .cm-lineNumbers .cm-gutterElement.cg-rungut{color:var(--run-mark);font-weight:700}
#code .cm-lineNumbers .cm-gutterElement.cg-rungut::before{content:"";position:absolute;left:6px;top:6px;border:6px solid transparent;border-left:9px solid var(--run-mark);border-right:0}
html.rbmode #code .cm-line.cg-errline{background-color:var(--bad-bg);box-shadow:inset 0 0 0 2px var(--bad);border-radius:5px}
html.rbmode #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)}

/* ---- the task box's Tests list and the Check box's sentences */
html.rbmode #taskbody .tlist{display:flex;flex-direction:column;gap:6px;margin:4px 0 2px}
html.rbmode #taskbody .tline{display:flex;gap:8px;align-items:flex-start;padding:7px 10px;border:1px solid var(--border);border-radius:5px;background:var(--island);font-size:13px;line-height:1.45}
html.rbmode #taskbody .tline svg{flex:none;width:15px;height:15px;color:var(--accent);margin-top:2px}
html.rbmode #taskbody code{font:13px var(--mono);color:var(--k-sense)}
#pop .csay{margin:-2px 6px 6px 34px;font-size:13px;line-height:1.45;color:var(--dim)}
#pop .csay code,#pop .crow code{font:12.5px var(--mono);color:var(--text)}
#pop .crow.bad + .csay{color:var(--text)}

/* ---- tablets: the room sits under the code at its own height */
@media (max-width:900px){
  html.rbmode .main{grid-template-rows:minmax(min-content,1fr) 8px auto;overflow-y:auto}
  html.rbmode .right{min-width:0}
  html.rbmode .roomsec{flex:none}
  html.rbmode .roomwrap{flex:none;height:280px}
  html.rbmode.rbout .output{height:96px}
  /* CG5 (2026-10-18): in a robot room the code keeps room for at least 8 lines (200 px; a line is 23 px).
     CG10 (2026-10-20): the Task card no longer shrinks to make that room. In a sensor room the Commands row wraps to two
     lines and the room has Sensors and Outputs rows, so the card shrank to nothing and the Commands row sat on top of
     the task's words. Now the card keeps its whole height, the words and the Tests list, and the code and Commands sit
     below it. When the page is then taller than the screen, the middle of the page scrolls (the top bar and the status
     line stay). The top row of the grid never gets less than its content, and with the Task hidden the page fits as before. */
  html.rbmode #code{flex:1 0 200px}
  html.rbmode .task .body{max-height:none;overflow:visible}
}

/* CG45 (2026-10-23): the Commands list. Three groups in this order: Moves, Actions, Checks (True or False). A group is a small
   table with its name on top. A row is the command, a button that still puts the command in the code, and its words from the
   CMD table. The groups stand in two columns with a thin line between them (one column on a narrow panel), so the list stays
   short and the code box keeps its room. */
.cmds .cmdtab{flex:1 1 100%;min-width:0;column-width:280px;column-gap:28px;column-rule:1px solid var(--border)}
.cmds .cmdgrp{width:100%;border-collapse:collapse;break-inside:avoid;margin:0 0 10px}
.cmds .cmdgrp:last-child{margin-bottom:0}
.cmds .cmdgrp caption{caption-side:top;text-align:left;padding:0 0 3px;font:600 11px/14px var(--ui);letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.cmds .cmdgrp .cmdsub{font-size:12px;font-weight:500;letter-spacing:0;text-transform:none}
.cmds .cmdgrp td{padding:2px 0;vertical-align:middle}
.cmds .cmdgrp td.cmdb{width:1%;white-space:nowrap;padding-right:12px}
.cmds .cmdgrp td.cmdsay{font-size:13px;line-height:1.4;color:var(--text)}
/* On a wide screen too, the code keeps room for 8 lines. A room with many commands makes the Task card and the Commands taller
   than the panel: the panel then scrolls, as the tablet page does, and the code is never squeezed away. */
@media (min-width:901px){
  html.rbmode .editor{overflow-y:auto}
  html.rbmode #code{flex:1 0 192px}
}
/* a long place name wraps the Room's buttons to a second line, so the name is never cut off by "..." */
.roomsec .ihead{height:auto;min-height:36px;flex-wrap:wrap;row-gap:2px}