* { scrollbar-size: 1 1 }

#app-grid {
    layout: grid;
    grid-size: 1;  /* two columns */
    grid-columns: 1fr;
    grid-rows: 2fr;
}

#left-pane > Static {
    background: $boost;
    color: auto;
    margin-bottom: 1;
    padding: 1;
}

#left-pane {
    width: 100%;
    height: 100%;
    row-span: 2;
    background: $panel;
    border: dodgerblue;
}

#top-right {
    height: 100%;
    width: 100%;
    background: $panel;
    border: mediumvioletred;
}

#top-right > Static {
    width: auto;
    height: 100%;
    margin-right: 1;
    background: $boost;
}

#bottom-right {
    height: 100%;
    layout: grid;
    grid-size: 3;
    grid-columns: 1fr;
    grid-rows: 1fr;
    grid-gutter: 1;
    background: $panel;
    border: greenyellow;
}

#bottom-right-final {
    column-span: 2;
}

#bottom-right > Static {
    height: 100%;
    background: $boost;
}
