:root {
    --gui-width: 230px;
    --canvas-aspect-ratio: 1.8; /* width / height */
}
@media (min-width: 1500px) {
    :root {
        --canvas-aspect-ratio: 2.2;
    }
}
@media (min-width: 3500px) {
    :root {
        --canvas-aspect-ratio: 1.8;
    }
}
/*Change variables dynamically (Blazor / JS)
You can override them per component or at runtime.
Per component override
    <style>
.page-layout {
    --canvas-aspect-ratio: 1.6;
}
    </style>

Via JavaScript (Three.js friendly)
document.documentElement.style
    .setProperty('--canvas-aspect-ratio', '1.5');

Via Blazor (JSInterop)
await JS.InvokeVoidAsync(
    "document.documentElement.style.setProperty",
    "--canvas-aspect-ratio",
    "1.8"
);
*/
/* Modification for fixed aspect ratio*/
/* Layout */
.page-layout {
    display: flex;
    flex-direction: row;/*added*/
    width: 100%;
    align-items: flex-start; /* allow vertical growth */
}

/* Canvas column */
.canvas-column {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Aspect-ratio container */
.canvas-wrapper {
    width: 100%;
    position: relative;/*added*/
}

/* THE MAGIC */
.canvas-area {
    width: 100%;
    aspect-ratio: var(--canvas-aspect-ratio) / 1;
    /*position: relative; not sure I need*/
}
    /* Canvas fills area */
    .canvas-area canvas {
        width: 100%;
        height: 100%;
        display: block;
        border: 1px solid #ccc;
        pointer-events: auto;
        touch-action: none;
    }

/* Results panel flows naturally */
.results-panel {
    width: 100%;/*calc(100% - var(--gui-width)); /*instead of 100%  allow for width of lil-gui menu, which should be set the same*/
    overflow-x: auto;
}
/*override- 	lil-gui sets its own width in JS (usually ~245px).*/
.lil-gui {
    width: auto !important;
    max-width: 100%;
} .gui-panel-s {
    flex: 0 1 auto; /* allow shrink */
    width: fit-content; /* shrink to content */
    max-width: var(--gui-width); /* clamp */
    align-self: stretch; /* match canvas height if desired */
    overflow: visible; /* let lil-gui size itself */
} .reset-btn {
    margin: 0.5rem;
    align-self: flex-start;
} table {
    width: 100%;
} td {
    padding: 2px;
} .red-cell {
    color: black;
    background-color: red;
} .tiny-text {
    /*         font-size: 10px;  or 0.7rem  or x-small or xx-small */
    font-size: small;
} .x-tiny-text {
    font-size: x-small;
} .xx-tiny-text {
    font-size: xx-small;
} .green-cell {
    color: green;
} .form-control {
    width: 100%;
} .small-form {
    font-size: 0.85rem; /* or e.g., 12px */
} .tight-form table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.75rem;
    line-height: 1; /* Reduce vertical text spacing */
} .tight-form td {
    padding: 0px;
    margin: 0px; /* Reduce vertical and horizontal padding */
    vertical-align: middle;
} .tight-form label {
    margin: 0px;
    padding: 0px;
    display: inline-block;
    white-space: nowrap;
} .tight-form .form-control {
    padding: 0px 0px;
    font-size: 0.75rem;
    width: 100%;
} .tight-form input, .tight-form select, .tight-form textarea {
    padding: 0px;
    margin: 0px;
    font-size: 0.85rem;
    line-height: 1;
    box-sizing: border-box;
} img {
    width: 100%;
    height: 100%;
} .table-fit-width {
    width: 100%;
    border-collapse: collapse;
    /* table-layout: fixed; /* keeps columns from expanding beyond width */
    font-size: clamp(0.3rem, 0.5vw + 0.5rem, 1rem); /* fluid font sizing */
} .table-fit-width th, .table-fit-width td {
        /*        border: 1px solid #ccc;*/
        padding: 2px;
        /*    text-align: left;*/
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal; /* allow wrapping */
    }
/* Red background only on the text span */
.table-fit-width .text-red-bg {
        background-color: red;
        color: white;
        display: inline; /* inline keeps background tight to text */
        padding: 0 2px; /* optional small padding */
    } .table-fit-width .text-green-bg {
        background-color: green;
        color: white;
        display: inline; /* inline keeps background tight to text */
        padding: 0 2px; /* optional small padding */
    } .right-align {
    text-align: right;
    }
/* WT added : When screen is smaller than 768px (typical tablet/phone breakpoint) */
@media (max-width: 768px) {
    .page-layout {
        flex-direction: column; /* stack vertically */
        height: auto; /*  allow content to grow  */
    }

    .canvas-column {
        height: auto;
    }

    .canvas-wrapper {
        padding-top: 0; /* remove aspect ratio trick */
        height: auto; /* wrapper adapts to child */
    }

    .canvas-inner {
        position: relative; /* not absolute */
        width: 100%;
        height: auto;
    }

    .canvas-area canvas {
        width: 100%; /* fill available width */
        height: 70vh; /* take 70% of viewport height (tweak as needed) */
        display: block;
    }

    .gui-panel-s {
        width: 100%; /* full width below canvas */
        border-left: none;
        border-top: 1px solid #ccc; /* separator on top instead of left */
        flex-direction: row;
        align-items: center;
    }

    .results-panel {
        flex: 1;
        overflow-y: auto;
        max-height: auto;
        padding: 0rem;
        width: 100%; /*full width */
    }

    .results-panel-scroll {
        flex: 1;
        overflow-y: auto;
        max-height: 100vh; /*max height 100% of view height*/
        padding: 0rem;
        width: 100%; /* full */
    }

    .form-panel {
        width: 100%; /* full width below canvas */
        border-left: none;
        border-top: 1px solid #ccc; /* separator on top instead of left */
    }
}