appears */
.row-break {
grid-column: 1 / -1; /* span entire grid width */
height: 0; /* invisible spacer */
}
/* 6) Everything else (Filter, Amp, etc.) will flow into row 3+ across the two columns */
/* ───── GRID LAYOUT FOR THE MAIN PANEL ───────────────────────── */
/* 1. Four-column grid: first column 2× wider for Waveform */
main#synth-ui{
display:grid;
grid-template-columns:repeat(4, 1fr); /* 4 equal columns */
grid-auto-rows:auto;
gap:1rem;
padding:1rem;
box-sizing:border-box;
}
/* 2. Place Waveform (wide) and D-Beam (narrow) on row-1 */
.waveform-module{grid-column:1/2;grid-row:1;}
.dbeam-module {grid-column:2/3;grid-row:1;min-width:200px;}
/* 3. Force a fresh grid line wherever you put
*/
.row-break {grid-column:1/-1;height:0;}
/* 4. Oscillators should always start on a new full-width row */
section.module.oscillators{grid-column:1/-1;}
/* 5. (Optional) tidy up the three Layer cards inside Oscillators */
.oscillators .layers{display:flex;gap:1rem;}
.oscillators .layer {flex:1 1 0;min-width:160px;}
#waveform-module { grid-column:1 / 4; grid-row:1; } /* spans cols 1-3 */
#dbeam-module { grid-column:4 / 5; grid-row:1; } /* col 4 */
#filter-module { grid-column:1 / 2; grid-row:3; } /* col 1 */
#amp-module { grid-column:2 / 3; grid-row:3; } /* col 2 */
#lfo-module { grid-column:3 / 4; grid-row:3; } /* col 3 */
#effects-module { grid-column:4 / 5; grid-row:3; } /* col 4 */
section.module.oscillators{
grid-column:1 / -1; /* full width */
grid-row:2;
}
/* 1 ▼ make the Waveform section itself a flex-column container */
.waveform-module{
display:flex; /* column is default direction */
}
/* 2 ▼ let the canvas grow to fill the remaining space */
#waveform{
flex:1 1 auto; /* take all the vertical space that’s left */
width:100%;
height:100%; /* remove the old 120 px lock */
/* (keep background / border rules as they are) */
}
/* make both cards vertical flex-boxes */
.waveform-module,
.dbeam-module {
display: flex;
flex-direction: column;
}
/* canvas fills whatever height the card gets */
.waveform-module canvas {
flex: 1 1 auto; /* grow + shrink */
width: 100%; /* already full-width */
height: 100%; /* keep pixels sharp */
}
/* D-Beam surface fills its card too */
#dbeam_surface {
flex: 1 1 auto;
min-height: 150px; /* safety so it never gets *too* short */
}
/* D-Beam surface fills its card */
#dbeam_surface {
flex: 1 1 auto; /* stretch with the card */
/* height: 150px; <-- ✖ delete this line */
min-height: 150px; /* safety on tiny viewports */
width: 100%;
margin-top: 0.5rem;
background: radial-gradient(circle at center,
rgba(0,255,102,.3) 0%, rgba(0,255,102,.05) 100%);
border: 1px solid var(--border-color);
border-radius: 4px;
cursor: ns-resize;
}
/* 1️⃣ make the whole D-Beam card a flex-column container */
.dbeam-module{
display:flex;
flex-direction:column; /* header + surface stacked vertically */
}
.dbeam-module{display:flex;flex-direction:column;}
#dbeam_surface{
flex:1 1 auto; /* grow / shrink with its card */
min-height:150px; /* safety floor on phones */
/* NEW: release the hard lock that causes the gap */
height:auto !important; /* or simply remove the old line */
}
/* ==== PRESET POP-OVER =================================================== */
.preset-container { position: relative; } /* anchor for the panel */
#preset_panel {
position: absolute;
top: 100%; left: 0;
min-width: 32rem; /* grow wider than the button */
max-height: 60vh;
overflow-y: auto;
padding: .75rem 1rem;
background: #1a1a1a;
border: 1px solid #444;
border-radius: .5rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
gap: .5rem 1.25rem; /* row / column gaps */
z-index: 1000;
}
css #preset_panel[hidden]{display:none !important;}
.preset-col > h4 {
margin: .25rem 0 .5rem;
font-weight: 600;
text-transform: capitalize;
}
.preset-col > ul { list-style: none; margin: 0; padding: 0; }
css .preset-btn{ background:#222; /* default fill */ color:#ddd; border:1px solid transparent; border-radius:.25rem; padding:.25rem .5rem; text-align:left; width:100%; transition:background .12s,color .12s; } .preset-btn:hover, .preset-btn[aria-selected="true"]{ background:var(--accent-color,#3a7cff); color:#fff; }
/* --------------- preset trigger in the top bar --------------- */
.preset-trigger{
background:#333;
color:var(--text-color);
border:1px solid var(--border-color);
border-radius:4px;
padding:.4rem .8rem;
}
.preset-trigger:hover,
.preset-trigger[aria-expanded="true"]{
background:var(--accent-color);
color:#000;
}
/* --------------- buttons *inside* the pop-over --------------- */
.preset-btn{
background:#222;
color:var(--text-color);
border:none;
padding:.25rem .5rem;
width:100%;
text-align:left;
border-radius:4px;
}
.preset-btn:hover,
.preset-btn[aria-selected="true"]{
background:var(--accent-color);
color:#000;
}
/* Utility – any element carrying ‘hidden’ should vanish */
[hidden]{display:none!important;}
/* live name field --------------------------------------------------- */
.preset-display{
min-width:12rem;
padding:.4rem .6rem;
background:#222;
color:var(--text-color);
border:1px solid var(--border-color);
border-radius:4px;
font-size:.85rem;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* ▲ ▼ buttons ------------------------------------------------------- */
.preset-nav{
width:2.2rem; height:2.2rem;
display:flex; align-items:center; justify-content:center;
background:#333;
color:var(--text-color);
border:1px solid var(--border-color);
border-radius:4px;
cursor:pointer;
line-height:1;
}
.preset-nav:hover{
background:var(--accent-color);
color:#000;
}
.preset-display { cursor: pointer; }