/* Coding Classroom v0.8.2 — Round 2: Python IDE, wider Stage, clearer version */

/* 1) Coding Lab desktop balance: keep code comfortable while making Stage a primary surface. */
#view-lab .workspace-shell{
  grid-template-columns:minmax(210px,.72fr) minmax(360px,1.30fr) minmax(420px,1.46fr);
  gap:14px;
  align-items:start;
}
#view-lab .lesson-panel,#view-lab .program-panel,#view-lab .stage-panel{
  min-width:0;
  padding:18px;
}
#view-lab .stage-panel{overflow:hidden}

/* 2) Wide 4:3 Stage inspired by learning environments, without copying their UI. */
#view-lab .stage-wrap{
  width:100%;
  padding:10px;
  margin-top:10px;
  border-radius:12px;
}
#view-lab .stage{
  width:100%;
  max-width:none;
  aspect-ratio:4 / 3;
  margin:0 auto;
  border-radius:9px;
}
#view-lab .robot,#view-lab .obstacle,#view-lab .star{
  width:15.5%;
  height:20.67%;
}
#view-lab .robot-direction{font-size:clamp(1rem,2.1cqi,1.65rem)}
#view-lab .stage-legend{margin-top:9px}
#view-lab .stage-run-actions{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(92px,.72fr) minmax(92px,.72fr);
  gap:8px;
  margin:12px 0 0;
}
#view-lab .stage-run-actions .run-btn{
  background:#0f7d62;
  box-shadow:0 3px 0 #0a634e,0 8px 18px rgba(10,99,78,.15);
}
#view-lab .stage-run-actions .run-btn:not(:disabled):hover{filter:brightness(1.045)}
#view-lab .stage-run-actions .reset-btn{grid-column:auto}

/* 3) Real-code feel: local lightweight syntax highlighting layered under the native textarea. */
#textEditor{min-width:0}
.python-ide{
  --ide-bg:#0d1b2a;
  --ide-panel:#0a1623;
  --ide-gutter:#091522;
  --ide-line:26px;
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  min-height:390px;
  border:1px solid #203b55;
  border-top:0;
  border-radius:0 0 9px 9px;
  overflow:hidden;
  background:var(--ide-bg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.python-gutter{
  position:relative;
  overflow:hidden;
  background:var(--ide-gutter);
  border-right:1px solid #1d354c;
  color:#61758a;
  user-select:none;
}
.python-gutter pre{
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  margin:0;
  padding:16px 10px 16px 4px;
  box-sizing:border-box;
  text-align:right;
  white-space:pre;
  font:14.5px/var(--ide-line) ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  color:inherit;
}
.python-code-surface{
  position:relative;
  min-width:0;
  min-height:390px;
  overflow:hidden;
  background:var(--ide-bg);
}
.python-highlight,#pythonEditor{
  position:absolute;
  inset:0;
  box-sizing:border-box;
  width:100%;
  height:100%;
  min-height:0 !important;
  margin:0;
  padding:16px 18px;
  border:0;
  border-radius:0 !important;
  tab-size:4;
  white-space:pre;
  font:14.5px/var(--ide-line) ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace !important;
  letter-spacing:0;
}
.python-highlight{
  z-index:2;
  overflow:hidden;
  pointer-events:none;
  color:#d7e2ef;
  background:transparent;
}
.python-highlight code{font:inherit;color:inherit;white-space:pre}
#pythonEditor{
  z-index:4;
  resize:none;
  overflow:auto;
  background:transparent !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent;
  caret-color:#f8fbff;
  outline:none;
}
#pythonEditor::placeholder{-webkit-text-fill-color:#71849a;color:#71849a}
#pythonEditor::selection{background:rgba(62,126,196,.52)}
#pythonEditor:focus{box-shadow:inset 0 0 0 1px rgba(74,155,255,.36)}
.python-active-line,.python-error-line{
  position:absolute;
  z-index:1;
  left:0;
  right:0;
  height:var(--ide-line);
  pointer-events:none;
}
.python-active-line{background:rgba(87,127,168,.105);border-top:1px solid rgba(140,180,220,.025);border-bottom:1px solid rgba(140,180,220,.025)}
.python-error-line{z-index:1;background:rgba(213,74,69,.13);box-shadow:inset 3px 0 0 #e05a55}

/* Python token palette — original dark navy theme for Coding Classroom. */
.tok-keyword{color:#c792ea;font-weight:650}
.tok-string{color:#9bdc9f}
.tok-number{color:#79d6d8}
.tok-comment{color:#718a7b;font-style:italic}
.tok-special{color:#8eb7ff;font-weight:650}
.tok-function{color:#ffd580}
.tok-builtin{color:#82d2ff}
.tok-operator{color:#89bfff}
.tok-bracket{color:#d8e5f3}
.tok-bracket-match{color:#fff3a6;background:#675d1f;border-radius:3px;box-shadow:0 0 0 1px #ad9840}
.tok-punctuation{color:#9fb4c8}

.editor-caption{
  background:#10253a;
  border-color:#203b55;
  color:#dce9f6;
}
.editor-caption span{color:#7fb8e8}
#syntaxMessage:not(:empty){padding:8px 10px;border-left:3px solid #d95d52;background:#fff4f2;border-radius:5px}

/* 4) Version visibility: readable at a glance without competing with developer credit. */
.site-footer-v062 .footer-version{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  min-width:190px;
}
.site-footer-v062 .footer-version strong{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:6px 12px;
  border:1px solid rgba(158,211,255,.42);
  border-radius:999px;
  background:rgba(10,28,62,.62);
  color:#fff;
  font-size:.86rem;
  font-weight:750;
  letter-spacing:.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.site-footer-v062 .footer-version small{font-size:.72rem;color:#b8d5ec;text-align:right}

/* Compact desktop: keep three useful columns without reverting Stage to a tiny square. */
@media(max-width:1280px) and (min-width:961px){
  #view-lab .workspace-shell{grid-template-columns:minmax(190px,.64fr) minmax(330px,1.18fr) minmax(360px,1.30fr);gap:11px}
  #view-lab .lesson-panel,#view-lab .program-panel,#view-lab .stage-panel{padding:14px}
  .python-ide,.python-code-surface{min-height:350px}
  .python-highlight,#pythonEditor,.python-gutter pre{font-size:14px}
}

/* Keep current tablet/mobile flow stable; Round 3 will refine the app-style tab experience. */
@media(max-width:960px){
  #view-lab .workspace-shell{display:flex;flex-direction:column}
  #view-lab .stage{width:min(100%,680px);aspect-ratio:4 / 3}
  .python-ide,.python-code-surface{min-height:340px}
  .site-footer-v062 .footer-version{align-items:flex-start;min-width:0}
  .site-footer-v062 .footer-version small{text-align:left}
}
@media(max-width:700px){
  .python-ide{grid-template-columns:42px minmax(0,1fr)}
  .python-ide,.python-code-surface{min-height:320px}
  .python-highlight,#pythonEditor{padding:14px 12px;font-size:13.5px !important}
  .python-gutter pre{padding:14px 8px 14px 2px;font-size:13.5px}
  #view-lab .stage-run-actions{grid-template-columns:1fr auto auto}
  .site-footer-v062 .footer-version strong{font-size:.82rem;min-height:30px}
}