* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--ground);
}

@media (min-width: 1209px) {
    body {
        margin-left: 232px;
    }
}

/*
    PAGE LAYOUT
    The same frame as the drill and puzzle screens: board column left (player strips, slim eval bar,
    nav row), a flat panel right. Wide: two columns. Narrow: board first, then the panel.
    The Today lines stage adds the 48px strip on top.
*/
#review-container[data-today] { --strip-h: 48px; }
/* Room the board column needs under the board for the eval graph in a report */
#review-container[data-view="report"] { --below: 130px; }

#review-layout {
    display: grid;
    grid-template-columns: max-content minmax(var(--side-min), 440px);
    column-gap: var(--col-gap);
    align-items: start;
    justify-content: center;
    padding: var(--pad);
}

#board-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

/* As tall as the board column, so the move list takes what is left */
#side-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#review-container:not([data-view="form"]) #side-column {
    height: calc(var(--board-size) + 118px + var(--below));
}

#review-panel-title {
    padding-bottom: var(--space-4);
    font-size: var(--fs-xl);
}

#review-container:not([data-view="report"]) #under-board {
    display: none;
}

#under-board {
    margin-left: calc(var(--bar) + var(--bar-gap));
    width: var(--board-size);
    max-width: 100%;
}

/* Top strip (Today lines stage only): see global.css */
#review-container:not([data-today]) .strip { display: none; }

.strip-end { flex: 1 1 0; }

/* Not enough room for two columns: board on top, panel below */
@media (max-width: 900px) {
    #review-layout {
        grid-template-columns: minmax(0, calc(var(--board-size) + var(--bar) + var(--bar-gap)));
    }

    #review-container:not([data-view="form"]) #side-column {
        height: auto;
    }

    .move-list { max-height: 320px; }
}

/* Phone: no rail (bottom tab bar), thin eval bar, board full width, then the panel */
@media (max-width: 760px) {
    #review-container {
        padding-bottom: 88px;
    }

    #review-layout {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: var(--space-3);
        gap: var(--space-4);
    }

    .strip {
        flex-wrap: wrap;
        height: auto;
        min-height: 48px;
        padding: var(--space-2) var(--space-3);
        gap: var(--space-2) var(--space-3);
    }

    .strip-crumb { flex: 1 1 auto; }
    .strip-end { display: none; }

    #under-board { width: 100%; }
}