/* Shared lab shell: pieces every lab uses the same way. */

/* On wider screens the sheet wrapper is invisible: the panel keeps its place in the lab's own layout. */
.lab-sheet{display:contents}
.lab-sheet-handle{display:none}

/* On phones the control panel becomes a bottom sheet: collapsed to its handle, the stage stays in view. */
@media(max-width:760px){
  body.has-lab-sheet{padding-bottom:64px}
  .lab-sheet{
    position:fixed;left:0;right:0;bottom:0;z-index:25;
    display:flex;flex-direction:column;
    max-height:min(50svh,460px);
    background:#1a1a1a;
    border-radius:20px 20px 0 0;
    box-shadow:0 -12px 32px rgb(0 0 0 / .6);
    transform:translateY(calc(100% - 56px));
    transition:transform .25s ease;
  }
  .lab-sheet.is-open{transform:none}
  .lab-sheet-handle{
    flex:none;display:flex;align-items:center;gap:12px;
    width:100%;min-height:56px;padding:0 20px;
    border:0;border-bottom:1px solid #333;border-radius:20px 20px 0 0;
    background:transparent;color:#ececec;font:500 14px var(--f-ko,sans-serif);text-align:left;cursor:pointer;
  }
  .lab-sheet-grip{width:32px;height:4px;border-radius:2px;background:#4d4d4d}
  .lab-sheet-title{flex:1}
  .lab-sheet-state{color:#a6a6a6;font:12px var(--f-mono,monospace)}
  .lab-sheet>[data-lab-sheet]{
    flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    position:static!important;width:auto!important;max-width:none!important;height:auto!important;max-height:none!important;
    margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;
  }
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){.lab-sheet{transition:none}}