/* BugBot Simulator: the header's task picker and robot link, and one cell filling the page, on top of engine.css. */
html, body { height: 100%; }
body { display: flex; flex-direction: column; }
.bar { flex: none; gap: 1.25rem; }
.actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.task-pick { display: flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .9rem; }
.task-pick select { font: inherit; font-weight: 600; padding: .3rem .5rem; border-radius: 6px; border: 1px solid var(--bb-green-dark); background: var(--bb-surface); color: var(--bb-dark); max-width: 320px; }
.actions button { font: inherit; font-weight: 700; font-size: .85rem; padding: .35rem .9rem; border-radius: 6px; border: 1px solid var(--bb-dark); background: var(--bb-surface); color: var(--bb-dark); cursor: pointer; }
.actions button.primary { background: var(--bb-dark); color: var(--bb-cream); }
.actions button:hover { background: var(--bb-sage); color: var(--bb-dark); }
.actions button:disabled { opacity: .5; cursor: default; }
.robot-state { font-size: .8rem; font-weight: 700; padding: .2rem .65rem; border-radius: 999px; border: 1px solid rgba(0, 0, 0, .25); }
.robot-state::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .4rem; background: #8a8a8a; vertical-align: middle; }
.robot-state.on { background: var(--bb-surface); }
.robot-state.on::before { background: var(--bb-green-dark); }
.bar-links { margin-left: auto; }

/* the student's files: one row of tabs, main.py first */
.file-bar { display: flex; align-items: center; gap: .15rem; flex: none; padding: 0 .55rem; background: var(--bb-code-bg); border-bottom: 1px solid var(--bb-border); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.file-tab, .file-add { font: inherit; font-size: .78rem; padding: .35rem .5rem; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--bb-secondary); cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: .4rem; margin-bottom: -1px; }
.file-tab.on { color: var(--bb-dark); font-weight: 600; border-bottom-color: var(--bb-green-dark); }
.file-tab:hover, .file-add:hover { color: var(--bb-dark); }
.file-add { margin-left: auto; padding-left: .5rem; }   /* on the far right, out of the way of the tabs */
.file-x { opacity: .55; font-weight: 700; }
.file-x:hover, .file-x:focus { opacity: 1; outline: none; text-decoration: underline; }

/* the cell fills whatever is left under the header */
.app.ide-wrap { flex: 1; min-height: 0; padding: 0; max-width: none; display: flex; flex-direction: column; }
.ide-cell { flex: 1; min-height: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; }
.ide-cell .cell-head .expand { display: none; }
.ide-cell.cell--full .cell-head { grid-template-columns: minmax(0, 1fr) repeat(6, auto); }   /* the title, then reference, saves, copy, download, share, reload */
.ide-cell.cell--full .cell-body { grid-template-columns: minmax(0, 3fr) 6px minmax(0, 2fr); }
.ide-cell.cell--full .CodeMirror { font-size: calc(var(--code-size) + .5px); }
@media (max-width: 800px) {
  .bar { flex-wrap: wrap; gap: .5rem .9rem; }
  .bar-links { margin-left: 0; }
  /* logo and menu share the first row; the task picker and robot link take the second */
  .brand { order: 0; }
  .burger { order: 1; }
  .actions { order: 2; width: 100%; }
  /* the task picker gets its own full row, the robot button and its state share the next one */
  .task-pick { flex: 1 1 100%; min-width: 0; }
  .task-pick select { max-width: none; width: 100%; min-width: 0; flex: 1; }
  .robot-state { font-size: .75rem; }
}
@media (max-width: 700px) {
  /* a phone: a short task hint (tap it to read it all), then one column down the page, code first, and the page
     scrolls rather than squeezing the editor, the robot, the camera, the depth grid and the console into one screen */
  .ide-cell .cell-head .task-hint { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
  .ide-cell .cell-head .task-hint.open { display: block; -webkit-line-clamp: unset; }
  body { height: auto; }
  .app, .ide-wrap { height: auto; min-height: 0; }
  .ide-cell, .ide-cell.cell--full { height: auto; flex: none; }
  .ide-cell .cell-body { flex: none; grid-template-columns: 1fr !important; grid-template-rows: auto minmax(13rem, 40vh) !important; }
  .ide-cell .CodeMirror, .ide-cell .CodeMirror-scroll { height: auto; max-height: 34vh; }
  .ide-cell .cell-lower { height: auto !important; min-height: 0; flex: none; }
  .ide-cell .cell-out { min-height: 52px; max-height: 90px; }
  .ide-cell .cell-foot { position: sticky; bottom: 0; z-index: 9; background: var(--bb-surface); box-shadow: 0 -.35rem .8rem rgba(0, 0, 0, .06); }
}