html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
}
.page {
    height: 100vh;
    height: 100dvh;
}
.main {
    border-top: 1px solid transparent; /* Stop margin collapsing */
    height: 100%;
}
article{
    height:100%;
    display: flex;
    flex-direction: column;
}

.hidden{
    display:none;
}

/* TopBar just sizes naturally */
.top-bar-container {
    flex: 0 0 auto; /* do not shrink, do not stretch */
}

/* The main layout should take all remaining height */
.layout-container {
    display: flex;
    flex: 1 1 auto; /* take all remaining vertical space */
    min-height: 0; /* important to allow proper flexbox shrinking! */
    overflow: hidden; /* prevent page scroll, let children scroll */
}

/* Each layout section should scroll independently if needed */
.layout-content {
    flex: 1 1 auto;
    min-height: 0; /* allows scrolling inside */
    overflow-y: auto; /* scroll only this section if needed */
    overflow-x: hidden;
}

/* Ensure the article fills available space */
article.content {
    flex: 1;
    min-height: 0;
}

.main{
    backdrop-filter:blur(3px);
    background:#ffffffe3;
    height:100vh;
}
article{
    height:100%;
}

.layout-container {
    display: flex;
    min-height: 0;
    height: 100%;
}
.sidebar{
    visibility:collapse;
}
.setup-container{
    max-width:1800px;
    margin:auto;
    padding:1rem;
}
/* Left Column: main Setup page */
.layout-setup {
    flex: 1;
    min-width:22rem;
    container-name: setup;
    container-type: inline-size;
}
.layout-terminal {
    flex: 0 1 auto;
    width:35rem;
    padding:1rem;
}


/* Divider between columns */
.layout-divider {
    width: 1px;
    background: #ccc; /* subtle vertical line */
}

/* Right Column: Info panel */
/* Makes right column wrap into more columns instead of scrolling */

.layout-info {
    flex:0 0 auto;
    width:fit-content;
    max-width:100%;
    padding: 1rem;
    height: 100%;
}
.article{
    padding: 1.5rem 2rem;
}

@media(max-width:1200px){
    .layout-terminal {
        width: 100%;
        flex: 1.3 1 0;
        height:auto;
        overflow: auto;
    }
    .layout-setup {
        flex: 2 0 0;
    }
    .layout-info {
        overflow: auto;
        width: 100%;
        flex: 1.5;
    }

    .info-grid {
        height: auto;
    }
}

/* Responsive: stack vertically on smaller screens */
@media (max-width: 1000px) {
    .layout-container {
        flex-direction: column;
    }
    .layout-container .layout-content{
        padding-top:2rem;
    }
    .layout-divider {
        width: 100%;
        height: 1px;
        margin: 0.1rem 0;
        box-shadow: 0 0 7px rgba(0, 0, 0, 0.50);
    }
    .layout-info {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }


    .article {
        padding: 0.5rem;
        padding-top: 0;
    }

    .main {
        margin-top: 0;
        padding-top: 0;
    }
}

@media(max-width: 650px){
    html,body{
        font-size:16px
    }
}

@media(max-width: 350px) {
    html, body {
        font-size: 12px
    }
}