/* Full-screen PyLab layout on top of the shared workbook theme. */

body.lab { display: flex; flex-direction: column; height: 100vh; margin: 0; overflow: hidden; font-family: var(--font-ui); }
/* Panels below set their own display, so the hidden attribute needs help. */
body.lab [hidden] { display: none !important; }

.lab-topbar, .lab-footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  padding: 0.4rem 0.9rem; background: var(--panel); border-bottom: 1px solid var(--rule-soft);
}
.lab-footer { border-bottom: 0; border-top: 1px solid var(--rule-soft); font-size: 0.8rem; color: var(--ink-quiet); }
.lab-brand img { height: 30px; display: block; }
.lab-title { font-weight: 700; font-size: 1.05rem; }
.lab-mark { font-family: var(--font-mono); color: var(--accent); }
.lab-status { font-size: 0.8rem; color: var(--ink-quiet); }
.lab-status[data-state="error"] { color: var(--bad-ink); }
.lab-status[data-state="running"] { color: var(--warn-ink); }

/* Workspace: [problem | files] on the left, then the editor with the
   console under it. The problem's width and the console's height are set
   by the drag handles (lab.js writes --problem-w and --console-h). */
.lab-workspace {
  --problem-w: 26rem; --console-h: 32%;
  max-width: none; width: 100%; margin: 0; padding: 0;
  flex: 1; min-height: 0; display: flex;
}
.lab-files, .lab-editor-panel, .lab-console-panel, .lab-main { display: flex; flex-direction: column; min-height: 0; }
.lab-files { flex: none; width: 200px; background: var(--panel); border-right: 1px solid var(--rule-soft); }
.lab-main { flex: 1; min-width: 0; }
.lab-editor-panel { flex: 1; }
.lab-console-panel { flex: none; height: var(--console-h); min-height: 6rem; max-height: calc(100% - 8rem); }
.lab-gutter { flex: none; background: var(--rule-soft); transition: background 0.15s; touch-action: none; }
.lab-gutter:hover, .lab-gutter.is-dragging { background: var(--accent); }
.lab-gutter-row { height: 5px; cursor: row-resize; }
.lab-gutter-col { width: 5px; cursor: col-resize; }
/* "Move right" puts the console beside the editor; "Hide" folds it into a slim
   "Show console" tab that stays where the console was. */
.lab-workspace { --console-w: 34%; }
.lab-workspace.console-right .lab-main { flex-direction: row; }
.lab-workspace.console-right .lab-console-panel { height: auto; min-height: 0; max-height: none; width: var(--console-w); min-width: 14rem; max-width: 70%; }
.lab-workspace.console-right .lab-gutter-row { height: auto; width: 5px; cursor: col-resize; }
.lab-workspace.console-closed .lab-console-panel, .lab-workspace.console-closed #console-gutter { display: none; }
.lab-console-tab {
  display: none; flex: none; align-items: center; justify-content: center; gap: 0.3rem;
  padding: 0.35rem 0.9rem; border: 0; border-top: 1px solid var(--rule-soft); background: var(--panel); color: var(--ink-quiet);
  font: inherit; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; cursor: pointer;
}
.lab-console-tab:hover { color: var(--accent); background: var(--panel-deep); }
.lab-workspace.console-closed .lab-console-tab { display: flex; }
.lab-workspace.console-right .lab-console-tab { writing-mode: vertical-rl; border-top: 0; border-left: 1px solid var(--rule-soft); padding: 0.9rem 0.35rem; }
body.is-dragging { cursor: row-resize; user-select: none; }
body.is-dragging.drag-col { cursor: col-resize; }
body.is-dragging iframe, body.is-dragging .CodeMirror { pointer-events: none; }
.lab-panel-title {
  display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.6rem 0.3rem 0.9rem;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--ink-quiet);
  border-bottom: 1px solid var(--rule-soft); min-height: 2.2rem;
}
.lab-panel-title .wb-btn { white-space: nowrap; }
.lab-console-panel .lab-panel-title { flex-wrap: wrap; row-gap: 0; }
.lab-panel-title #active-name { text-transform: none; letter-spacing: 0; font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink); }

.lab-file-list { list-style: none; margin: 0; padding: 0.3rem 0; overflow-y: auto; flex: 1; }
.lab-file-list li button {
  display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink); padding: 0.35rem 0.9rem;
}
.lab-file-list li button:hover { background: var(--panel-deep); }
.lab-file-list li.is-active button { background: var(--paper); color: var(--accent); font-weight: 700; }
.lab-file-actions, .lab-panel-foot { display: flex; gap: 0.2rem; padding: 0.3rem 0.5rem; border-top: 1px solid var(--rule-soft); }

.lab-editor { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.lab-editor .CodeMirror { flex: 1; height: auto; min-height: 0; font-size: 1rem; }
.lab-editor .CodeMirror-scroll { min-height: 0 !important; max-height: none !important; height: 100%; }
.lab-editor .CodeMirror-gutters { background: var(--paper); border-right: 1px solid var(--rule-soft); }

.lab-console { flex: 1; min-height: 0; max-height: none !important; overflow-y: auto; padding: 0.6rem 0.9rem; }
.lab-hint { margin: 0; padding: 0.4rem 0.9rem; font-size: 0.8rem; color: var(--ink-quiet); border-top: 1px solid var(--rule-soft); }
.lab-hint code { font-family: var(--font-mono); }
.lab-console-panel.has-run .lab-hint { display: none; }

@media (max-width: 860px) {
  body.lab { height: auto; overflow: auto; }
  .lab-workspace { flex-direction: column; }
  .lab-files { width: auto; border-right: 0; border-bottom: 1px solid var(--rule-soft); }
  .lab-file-list { max-height: 8rem; }
  .lab-editor { min-height: 45vh; }
  .lab-console-panel, .lab-workspace.console-right .lab-console-panel { height: auto; max-height: none; width: auto; max-width: none; }
  .lab-workspace.console-right .lab-main { flex-direction: column; }
  .lab-workspace.console-right .lab-console-tab { writing-mode: horizontal-tb; border-left: 0; border-top: 1px solid var(--rule-soft); padding: 0.35rem 0.9rem; }
  .lab-console { min-height: 30vh; }
  .lab-gutter { display: none; }
}


/* Boss mode: the problem statement beside the editor, no file list. */
.lab-workspace.is-boss .lab-files, .lab-workspace.is-boss.problem-hidden .lab-problem, .lab-workspace.is-boss.problem-hidden .lab-gutter-col { display: none; }
.lab-problem { flex: none; width: var(--problem-w); min-width: 14rem; max-width: 70%; display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-right: 1px solid var(--rule-soft); }
.lab-problem-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0.4rem 1.1rem 1rem; font-family: var(--font-serif, inherit); font-size: 0.98rem; line-height: 1.5; }
.lab-problem-body h2 { font-size: 1.2rem; margin: 0.6rem 0 0.5rem; padding-top: 0.6rem; }
.lab-problem-body p { margin: 0.5rem 0; }
.lab-problem-body table { font-size: 0.82rem; margin: 0.6rem 0; display: block; overflow-x: auto; }
.lab-problem-body th, .lab-problem-body td { padding: 0.3rem 0.5rem; white-space: nowrap; }
.lab-problem-body pre { font-size: 0.86rem; }
.lab-problem-body .wb-callout { margin: 0.8rem 0; }
.lab-problem-body .wb-locked-note { color: var(--warn-ink); font-family: var(--font-sans); }
.lab-problem-foot { align-items: center; }
.lab-xp { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 700; color: var(--good-ink); }
.lab-console-panel.is-checking #console { display: none; }
.lab-console.wb-result { border-top: 0; display: block; }

@media (max-width: 860px) {
  .lab-problem { width: auto; max-width: none; border-right: 0; border-bottom: 1px solid var(--rule-soft); }
  .lab-problem-body { max-height: 50vh; }
}
.lab-xp.is-beaten::before { content: "✓ "; }

/* After a boss is defeated: the "what next" dialog and the Next button in the top bar. */
.lab-next { text-decoration: none; }
.lab-done { border: 1px solid var(--rule-soft); border-radius: 12px; background: var(--panel); color: var(--ink); padding: 1.4rem 1.6rem 1.2rem; max-width: 26rem; width: calc(100% - 2rem); text-align: center; font-family: var(--font-ui); }
.lab-done::backdrop { background: rgba(0, 0, 0, 0.55); }
.lab-done-icon { font-size: 3rem; line-height: 1; }
.lab-done h2 { margin: 0.5rem 0 0.4rem; padding-top: 0; font-size: 1.4rem; }
.lab-done h2::before { content: none; }
.lab-done p { margin: 0 0 1rem; color: var(--ink-quiet); }
.lab-done-actions { display: flex; flex-direction: column; gap: 0.4rem; }
.lab-done-actions .wb-btn { text-decoration: none; display: flex; align-items: center; gap: 0.3rem; }
.lab-done-emoji { font-size: 2em; line-height: 1; }