/* Responsive layout: floating panels on desktop, stacked on tablets and phones. */
/* desktop: floating panels over a full canvas */
@media (min-width: 1024px) and (min-height: 660px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }
  .app {
    height: 100%;
  }
  .stage {
    position: absolute;
    inset: 0;
  }
  .left {
    position: absolute;
    z-index: 5;
    top: 12px;
    left: var(--gl);
    max-height: calc(100% - 24px);
  }
  .rcol {
    position: absolute;
    z-index: 5;
    top: 12px;
    right: var(--gr);
    bottom: 12px;
  }
  .inspector {
    max-height: 100%;
  }
}
@media (max-width: 1023px), (max-height: 659px) {
  :root {
    --lw: 0px;
  }
  .work {
    display: contents;
  }
  .stage {
    order: 1;
    height: 58vh;
  }
  .timeline {
    order: 2;
  }
  .rcol {
    order: 3;
    width: auto;
    margin: 12px var(--gr) 0 var(--gl);
  }
  .left {
    order: 4;
    width: auto;
    margin: 12px var(--gr) 16px var(--gl);
    max-height: 420px;
  }
  .toast {
    position: fixed;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .tltip {
    bottom: calc(100% + 8px);
  }
  .tabs {
    grid-template-columns: repeat(4, 1fr);
  }
  #readout {
    left: 12px;
  }
}
@media (max-width: 720px) {
  .tlz,
  .tsep2 {
    display: none;
  }
  .topbar {
    grid-template-columns: 1fr auto;
  }
  .tb-center {
    grid-column: 1/-1;
    order: 3;
    justify-content: center;
    overflow-x: auto;
  }
  .tl-bar {
    grid-template-columns: 1fr auto;
  }
  .tl-mid {
    grid-column: 1/-1;
    order: 3;
    justify-content: center;
  }
  .tl-body {
    grid-template-columns: 96px minmax(0, 1fr);
  }
  .tl-names .mt {
    display: none;
  }
  .tb-ghost span {
    display: none;
  }
}