/* Coding Classroom v0.8.5 — Round 5: lab hotfixes */

/* Prevent medium-width toolbars from colliding after moving from preview to HostAtom. */
#view-lab .mission-strip-head,
#view-lab .panel-title-row,
#view-lab .editor-toolbar-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
#view-lab .mission-strip-head > *,
#view-lab .panel-title-row > *,
#view-lab .editor-toolbar-row > *{min-width:0}

#view-lab .editor-modes{
  flex:1 1 290px;
  min-width:min(100%,290px);
  flex-wrap:wrap;
}
#view-lab .editor-modes button{
  flex:1 1 140px;
  min-width:140px;
}
#view-lab .lab-save-state{
  flex:0 1 auto;
  max-width:100%;
  white-space:normal;
  line-height:1.35;
}
#view-lab .mission-tabs{padding-bottom:6px}
#view-lab .stage-run-actions{align-items:stretch}
#view-lab .stage-run-actions button{min-width:0}
#view-lab .insert-target-bar{align-items:center}
#view-lab .code-preview{min-width:0}

/* Keep paired block/Python preview readable on common school notebook widths. */
@media (min-width:1025px) and (max-width:1380px){
  #view-lab .mission-strip{padding:12px 14px}
  #view-lab .mission-tab{padding:7px 10px;min-height:38px;font-size:.82rem}
  #view-lab .stage-run-actions{grid-template-columns:minmax(0,1fr) auto auto}
  #view-lab .paired-mode .program-panel{
    grid-template-columns:minmax(0,1fr);
    gap:12px;
  }
  #view-lab .paired-mode #editorModes,
  #view-lab .paired-mode #blocksEditor,
  #view-lab .paired-mode #codePreview,
  #view-lab .paired-mode .run-actions{grid-column:1}
  #view-lab .paired-mode #blocksEditor{grid-row:2}
  #view-lab .paired-mode #codePreview{grid-row:3}
  #view-lab .paired-mode .run-actions{grid-row:4}
}

/* Very narrow desktop / split-screen widths still need safe button stacking. */
@media (min-width:701px) and (max-width:1100px){
  #view-lab .editor-toolbar-row{gap:8px}
  #view-lab .editor-modes{flex-basis:100%}
  #view-lab .lab-save-state{order:2}
}

/* Small-screen lab action buttons should not squeeze each other. */
@media (max-width:700px){
  #view-lab .editor-modes button{min-width:0}
  #view-lab .lab-save-state{width:100%}
  #view-lab .stage-run-actions{grid-template-columns:minmax(0,1fr) auto auto}
}