/*
 * DRONE SWARM LAYOUT
 * ==================
 * This file is the authoritative place for page structure and responsive
 * behavior. It loads after swarm.css so layout changes can be made here
 * without searching through component colors, typography, and animations.
 *
 * Sections:
 *   1. Layout tokens
 *   2. Base / desktop layout
 *   3. Large desktop
 *   4. iPad / tablet
 *   5. Phone
 *   6. Small phone and touch targets
 */

/* 1. Layout tokens ---------------------------------------------------- */
:root {
	--layout-gap: 12px;
	--panel-gap: 16px;
	--panel-min: 360px;
	--control-cell: 140px;
	--page-gutter: 20px;
}

/* 2. Base / desktop layout ------------------------------------------- */
body {
	margin: var(--page-gutter);
}

.app {
	padding-bottom: 100px;
	width: 100%;
}

header {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin: 0 0 10px;
}

.like-widget {
	align-items: center;
	display: inline-flex;
	gap: .5rem;
}

#contact,
.offline-control {
	align-items: center;
	display: flex;
	gap: 8px;
}

.layout-wrap,
.row {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: var(--layout-gap);
}

.layout-grid {
	display: grid;
	gap: var(--layout-gap);
}

.layout-auto-panels {
	align-items: start;
	display: grid;
	gap: var(--panel-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(var(--panel-min), 100%), 1fr));
	justify-content: center;
}

.layout-control-grid {
	align-items: start;
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(var(--control-cell), 1fr));
	justify-content: center;
}

/* Master transport, volume, oscilloscope, and utility panels. */
.master > .row {
	align-items: start;
	display: flex;
	flex-wrap: nowrap;
	gap: var(--layout-gap);
	justify-content: center;
}

.master > .row > .panel {
	height: auto;
	margin-bottom: 0;
	min-height: 110px;
	min-width: 0;
}

.masterVolume .panel {
	min-height: 115px;
	width: min-content;
}

.masterVolume h5 {
	display: block;
	margin: 5px 0 0;
	width: 100%;
}

.master > .row > .panel.osciliscope {
	min-width: min(420px, 100%);
}

.master > .row > .panel.osciliscope canvas {
	max-width: 100%;
	width: 100%;
}

/* Effects row. */
.grid.group-settings {
	align-items: stretch;
	display: grid;
	gap: 0 10px;
	grid-template-columns: repeat(9, minmax(0, 1fr));
	grid-template-rows: auto;
	margin-bottom: var(--panel-gap);
}

.grid.group-settings > div {
	min-width: 0;
}

.grid.group-settings > div.distortion {	grid-column: 1 / 2; }
.grid.group-settings > div.modulation {	grid-column: 2 / 4; }
.grid.group-settings > div.reverb {		grid-column: 4 / 7; }
.grid.group-settings > div.delay {		grid-column: 7 / 10; }

.group-settings .panel {
	height: calc(100% - 15px);
	margin-bottom: 0;
	min-height: 115px;
}

/* Oscillator-group creation panel. */
.osc-groups {
	margin-right: 4px;
}

.osc-groups .panel {
	align-content: flex-start;
	align-items: center;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
/*	grid-template-rows: repeat(2, 1fr); */ 
}

.osc-groups .panel .create {
	grid-area: 1 / 1 / 3 / 2;
}

.osc-groups .panel .col {
	 text-align:center;
	 
	.base-freq {
		grid-area: 1 / 2 / 3 / 3;
		white-space: nowrap;
		text-align: center;
		width: fit-content;
	}
}

.osc-groups .panel .waveforms {	grid-area: 1 / 3 / 2 / 4; }
.osc-groups .panel .random {	grid-area: 2 / 3 / 3 / 4; }
.osc-groups .panel .numosc {	grid-area: 1 / 4 / 2 / 5; }
.osc-groups .panel .range {		grid-area: 2 / 4 / 3 / 5; }

.osc-groups .panel .col-1 label,
.osc-groups .panel .col-2 label {
	margin: 5px 0;
}

.osc-groups .panel input[type="number"] {
	width: 40px;
}

.osc-groups .panel input[type="checkbox"] {
	height: 20px;
	width: 20px;
}

/* Group collection and each group's internal panel grid. */
#groupsContainer {
	align-items: start;
	display: grid;
	gap: var(--panel-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(var(--panel-min), 100%), 1fr));
	justify-content: center;
}

#groupsContainer > .group-panel,
#groupsContainer > .panel {
	margin: 0;
	max-width: 100%;
	min-width: 0;
}

.oscGroupGrid,
.group-panel .grid {
	align-items: start;
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(var(--control-cell), 1fr));
	justify-content: center;
}

.oscGroupGrid > .row {
	grid-column: 1 / -1;
	min-width: 280px;
}

.groupMaster,
.wavetable,
.filter,
.tremelo,
.vibrato {
	grid-column: span 2;
	min-width: 0;
	width: auto;
}

.groupMaster,
.wavetable,
.row.modulation {
	box-sizing: border-box;
}

.row.modulation {
	max-width: 100%;
	width: auto;
}

.panel-controls-row,
.panel-bottom-row {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: space-evenly;
	row-gap: 28px;
}

.osc-grid {
	align-items: start;
	display: grid;
	gap: 10px;
	grid-column: 1 / -1;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.osc {
	height: 110px;
	justify-self: stretch;
	min-width: 0;
	position: relative;
	width: auto;
}

/* Snapshot sequencer. */
section.sequencer > .row {
	align-items: flex-start;
	display: grid;
	grid-template-columns: 1fr;
	width: 100%;
}

section.sequencer .sequences-col,
section.sequencer .timeline-col {
	min-width: 0;
	width: 100%;
}

.sequences-col h3 {
	display: inline-block;
	left: 4px;
	margin-bottom: 0;
	position: relative;
	top: -8px;
}

.seq-list,
#seqTimeline,
.seq-timeline {
	align-content: flex-start;
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	height: auto;
	overflow: visible;
	position: relative;
}

.seq-step,
.seq-tag {
	float: none;
	max-width: 100%;
	z-index: 999;
}

#seqTimeline::before {
	content: "DRAG SNAPSHOTS HERE";
	font-size: 13px;
	letter-spacing: 4px;
	line-height: 45px;
	position: absolute;
	text-indent: 20px;
	z-index: 0;
}

.seq-default {
	align-items: center;
	display: inline-flex;
	gap: 4px;
	margin-left: 8px;
}

.seq-default input {
	height: 13px;
	padding: 2px 4px;
	width: 52px;
}

.seq-tag .seq-add {
	margin-left: 2px;
	min-height: 28px;
	width: 28px;
}

.seq-tag .grips,
.seq-step .grips {
	display: inline-block;
	touch-action: none;
	user-select: none;
	width: 24px;
	-webkit-user-select: none;
}

.seq-touch-dragging {
	opacity: .58;
}

#seqTimeline.seq-touch-over {
	outline: 3px solid #72ff9b;
	outline-offset: 2px;
}

.wavetable-upload .wavetable-category-select {
	max-width: 150px;
}

/* 3. Large desktop ---------------------------------------------------- */
@media only screen and (min-width: 1080px) {
	.osc-groups .panel {
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows: 1fr;
	}

	.osc-groups .panel .create {
		grid-area: 1 / 1 / 2 / 2;
	}

	.osc-groups .panel .base-freq {
		grid-area: 1 / 2 / 2 / 3;
	}

	.osc-groups .panel .waveforms {
		grid-area: 1 / 3 / 2 / 4;
	}

	.osc-groups .panel .random {
		grid-area: 1 / 4 / 2 / 5;
	}

	.osc-groups .panel .numosc {
		grid-area: 1 / 5 / 2 / 6;
	}

	.osc-groups .panel .range {
		grid-area: 1 / 6 / 2 / 7;
	}
}

/* 4. iPad / tablet ---------------------------------------------------- */
@media only screen and (min-width: 721px) and (max-width: 1180px) {
	.master > .row {
		flex-wrap: wrap;
	}

	.master > .row > .panel {
		flex: 1 1 150px;
	}

	.master > .row > .panel.osciliscope {
		flex: 1 1 100%;
	}

	section.sequencer > .row {
		grid-template-columns: 1fr;
	}

	.row.modulation {
		margin: 0;
		position: static;
	}

	.group-panel:has(.accordion input[type="checkbox"]:checked) {
		height: 264px;
	}

	label:has(.knob-wrap) {
		margin-left: 5px;
		margin-right: 5px;
	}
}

/* iPad detection is applied by swarm.js and also covers wider iPad Pro. */
html.is-ipad {
	--panel-min: 360px;
	--control-cell: 140px;
}

html.is-ipad .master > .row {
	flex-wrap: wrap;
}

html.is-ipad .master > .row > .panel.osciliscope,
html.is-ipad section.sequencer > .row {
	flex-basis: 100%;
	grid-template-columns: 1fr;
}

/* 5. Phone ------------------------------------------------------------ */
@media only screen and (max-width: 720px) {
	.master > .row {
		flex-wrap: wrap;
	}

	.master > .row > .panel {
		flex: 1 1 150px;
		min-width: 0;
	}

	.master > .row > .panel.osciliscope {
		flex: 1 1 100%;
	}

	.group-title {
		flex: 0 0 90px !important;
		width: 90px;
	}

	.row.modulation {
		margin: 0;
		position: static;
	}

	section.sequencer > .row {
		grid-template-columns: 1fr;
	}

	.group-panel .grid {
		gap: 10px;
		justify-content: center;
	}

	.osc {
		padding: 5px;
	}

	label.amp {
		margin: 20px 5px 10px 0;
	}

	label.detune {
		margin: 20px 0 10px 5px;
	} 
	
	.grid.group-settings > div.delay {
		grid-area: 2 / 1 / 3 / 7;
	}
	.grid.group-settings {
		grid-template-columns: repeat(6, minmax(0, 1fr)); 
		gap: 35px 10px;s
	}
	#groups{ margin-top: 15px; }
}

/* 6. Small phone and touch targets ----------------------------------- */
@media only screen and (max-width: 628px) {
	.midi {
		display: none;
	} 
	.col-1 span {
		display: inline-block;
		width: 30px;
	}
		.osc-groups .panel label, .osc-groups .panel h3 {
		font-size: 10px;}
		.osc-groups .panel input[type="checkbox"] {
		height: 20px;
		width: 20px;
	}
	select.waveform#defType {
		background-size: 30px 30px;
		height: 30px;
		width: 30px;
	}
	.osc-groups .panel input[type="number"] {
		width: 30px;
		font-size: 12px;
	}
	.col-2 span {
		display: inline-block;
		width: 45px;
		margin-left: 10px;
	}
	#createGroupBtn {
		font-size: 16px;
		height: 45px;
		width: 110px;
	}
}

@media only screen and (max-width: 520px) {
	:root {
		--panel-min: 100%;
		--control-cell: 130px;
	}
	
	.master {
		.transport { 		grid-area: 1 / 1 / 2 / 3; 
			#startBtn { float: left; }
			div { 
				display:inline-block;
				position:relative;
				top: -9px;
				left:49px;
			}
		}
		.recorder { 		grid-area: 1 / 3 / 2 / 5; }
		.patch { 			grid-area: 1 / 5 / 2 / 8; }
		.master-volume {	grid-area: 2 / 1 / 3 / 8; }
	}
	
	.groupMaster,
	.wavetable,
	.filter,
	.tremelo,
	.vibrato {
		grid-column: 1 / -1;
	}
	.osc-groups .panel { 
		grid-template-columns: repeat(2, 1fr); 
        justify-items: center;
		    
		.base-freq { grid-area: 1 / 1 / 2 / 2; }
		#createGroupBtn { grid-area: 1 / 2 / 2 / 3; }
		.osc-range { grid-area: 2 / 1 / 3 / 2; }
		.waves-random { grid-area: 2 / 2 / 3 / 3; }
	}
	.grid.group-settings {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		
		.distortion {	grid-area: 1 / 1 / 2 / 2 !important; }
		.modulation {	grid-area: 1 / 2 / 2 / 5 !important; }
		.reverb {		grid-area: 2 / 1 / 3 / 5 !important; 
			.panel {
				height: calc(100% - 25px);
				.reverb-src-row{
					grid-template-columns: 1fr 1fr;
					margin-top: 5px;
				}
			}
		}
		.delay { grid-area: 3 / 1 / 4 / 5 !important; }
	}
} 

@media (pointer: coarse) {
	.seq-tag .grips,
	.seq-step .grips,
	.seq-tag .seq-add {
		min-height: 36px;
		min-width: 36px;
	}
}