/* App-level layout on top of the verbatim mockup CSS (styles.css).
The mockup is a fixed-height demo; a live app must fill the viewport and
let each rail scroll independently. Nothing here changes the mockup's
look — only how the panes size and scroll. */
/* Own both schemes → the browser won't force-dark-invert the page. */
html { color-scheme: light dark; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; }
/* The play screen fills the viewport: header (auto) + shell (fills rest). */
#app-root {
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
#app-root > header.session { flex: none; }
#app-root > .shell { flex: 1 1 auto; min-height: 0; }
/* Let the grid columns shrink below their content so inner panes can scroll
(grid/flex children default to min-height:auto, which blocks overflow). */
.shell > * { min-height: 0; }
.party, .ledger { overflow-y: auto; }
.table { min-height: 0; }
.stream { min-height: 0; }
/* The front porch (join screen) centers a card and scrolls if tall. */
.porch-wrap {
width: 100%;
min-height: 100vh;
display: flex;
align-items: flex-start;
justify-content: center;
overflow-y: auto;
}
/* The input upgraded from the mockup's single-line to a multiline