/* Quantum-Like Lab, created under Ethan Dickey's guidance. Controls stay with the image they affect. */
.play-stage-grid > .network-display { grid-area:stage; min-width:0; }
.network-display > .stage-shell { min-width:0; }
.network-display > .edit-display-controls { margin:8px 0 0; display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; }
#beginner-tutorial-slot:empty, #beginner-tutorial-slot:has(> [hidden]) { display:none; }
body[data-level="basic"] #beginner-tutorial-slot { margin-bottom:8px; }
body[data-level="basic"] .play-stage-grid { display:flex; flex-direction:column; gap:9px; }
body[data-level="basic"] .play-stage-grid > .network-display,
body[data-level="basic"] .play-stage-grid #play-controls { width:100%; }
body[data-level="basic"] .play-side { display:contents; }
body[data-level="basic"] .play-stage-grid:not(:has(#play-controls[hidden])) #network-stage,
body[data-level="basic"] #network-stage { height:clamp(300px,calc(100vh - 390px),440px); min-height:300px; }
body[data-level="basic"] .network-display > .edit-display-controls { margin-top:7px; }
body[data-level="basic"] .network-display > .edit-display-controls button { font-size:.86rem; padding:8px 11px; }
body[data-level="basic"] .network-display > .edit-display-controls span { font-size:.85rem; }

.network-display > .edit-display-controls:has(button:disabled) { display:none; }
.play-stage-grid { grid-template-areas:"stage" "controls" "legend"; }
.play-stage-grid:has(#play-controls[hidden]) { grid-template-areas:"stage" "legend"; }
@media(min-width:1101px) {
  .play-stage-grid:not(:has(#play-controls[hidden])),
  .play-stage-grid:not(:has(#play-controls[hidden])):has(.edit-display-controls button:disabled) {
    grid-template-areas:"stage controls" "legend legend";
  }
}

/* In Beginner mode, play controls belong directly below the picture. */
body[data-level="basic"] .play-stage-grid > .network-display { order:1; }
body[data-level="basic"] .play-stage-grid #play-controls { order:2; }
/* Compact wide-screen action dock. Its guide follows it without changing the
   network camera or making the real controls fall below a long page. */
body[data-level="basic"] .play-stage-grid > .network-display,
body[data-level="basic"] .play-stage-grid #play-controls { order:initial; }
body[data-level="basic"] .play-side { display:flex; flex-direction:column; gap:10px; }
@media(min-width:1101px) {
  body[data-level="basic"] .play-stage-grid,
  body[data-level="basic"] .play-stage-grid:not(:has(#play-controls[hidden])),
  body[data-level="basic"] .play-stage-grid:not(:has(#play-controls[hidden])):has(.edit-display-controls button:disabled) {
    display:grid;
    grid-template-columns:minmax(0,1fr) 18rem;
    grid-template-areas:"stage controls" "lesson lesson";
    gap:12px 16px;
    align-items:start;
  }
  body[data-level="basic"] .play-side { grid-area:controls; min-width:0; }
  body[data-level="basic"] .play-stage-grid #play-controls { grid-area:controls; }
  body[data-level="basic"] .play-side:has(> #tutorial:not([hidden])) { display:contents; }
  body[data-level="basic"] .play-side > #tutorial { grid-area:lesson; margin:0; }
  body[data-level="basic"] .play-side .beginner-play-rack { grid-template-columns:minmax(0,1fr); gap:12px; }
  body[data-level="basic"] .play-side .beginner-result-tools { border-top:1px solid #365562; padding-top:9px; }
  body[data-level="basic"] .play-side .beginner-connection-tools { grid-template-columns:minmax(0,1fr); }
  body[data-level="basic"] .play-side .beginner-connection-experiments > summary > span { display:block; margin:5px 0 0 16px; }
  body[data-level="basic"] .play-side .beginner-connection-tools .beginner-fresh { justify-self:stretch; }
}