/* BugBot IDE: 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: #fff; 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 #000; background: #fff; color: var(--bb-dark); cursor: pointer; }
.actions button.primary { background: #000; color: #fff; }
.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: #fff; }
.robot-state.on::before { background: var(--bb-green-dark); }
.bar-links { margin-left: auto; }

/* 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) auto; }
.ide-cell.cell--full .cell-body { grid-template-columns: minmax(0, 3fr) 6px minmax(0, 2fr); }
.ide-cell.cell--full .CodeMirror { font-size: 14px; }
@media (max-width: 800px) {
  .bar { flex-wrap: wrap; gap: .5rem .9rem; }
  .bar-links { margin-left: 0; }
  .task-pick select { max-width: 200px; }
}