/* layout.css - Grids, Containers & Structural Layout */

.container {
    width: var(--container-width);
    max-width: 2400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Flex Split Layout (Used in Lab and Canvas) */
.split-layout {
    display: flex;
    gap: 40px;
    position: relative;
    z-index: 5;
}

@media (max-width: 900px) {
    .split-layout {
        flex-direction: column;
    }
}

/* Sidebar Structure */
.story-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .story-sidebar {
        width: 100%;
    }
}