/* Custom styles for our DAW */
body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Container for each step (toggle + note selector) */
.step-container {
    background-color: #374151; /* gray-700 */
    border: 1px solid #4B5563; /* gray-600 */
    border-radius: 0.5rem;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* The actual toggle button part of the step */
.step-toggle {
    transition: all 0.1s ease;
    border: 2px solid #6B7280; /* gray-500 */
    height: 3.5rem; /* 56px */
    border-radius: 0.375rem; /* rounded-md */
    cursor: pointer;
    background-color: #4B5563; /* gray-600 */
}

/* Style for an active (toggled on) step - NEW GLOW */
.step-active {
    background-color: #FBBF24; /* amber-400 */
    border-color: #F59E0B; /* amber-500 */
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

/* Style for the currently playing step */
.step-playing {
    transform: scale(1.05);
    border-color: #EC4899; /* pink-500 */
    box-shadow: 0 0 15px rgba(236, 72, 153, 0.7);
}

/* Style for the note selector dropdown */
.note-select {
    -webkit-appearance: none;
    appearance: none;
    background-color: #374151; /* gray-700 */
    border: 1px solid #6B7280; /* gray-500 */
    color: white;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    width: 100%;
    font-size: 0.75rem; /* text-xs */
    cursor: pointer;
}
.note-select:focus {
    outline: none;
    border-color: #FBBF24; /* amber-400 */
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.5);
}

/* NEW: Drum step container */
.drum-step-container {
    background-color: #374151; /* gray-700 */
    border: 1px solid #4B5563; /* gray-600 */
    border-radius: 0.5rem;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem; /* 4px */
    height: 5.5rem; /* Taller to fit note select */
    justify-content: space-around;
}

/* NEW: Drum toggle buttons */
.drum-toggle {
    transition: all 0.1s ease;
    border: 2px solid #6B7280; /* gray-500 */
    height: 1.25rem; /* 20px */
    border-radius: 0.25rem; /* rounded-sm */
    cursor: pointer;
    background-color: #4B5563; /* gray-600 */
    opacity: 0.7;
}

/* NEW: Active/Playing states for drum toggles */
.drum-toggle.drum-active-kick {
    background-color: #EF4444; /* red-500 */
    border-color: #DC2626; /* red-600 */
    opacity: 1;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}
.drum-toggle.drum-active-snare {
    background-color: #22C55E; /* green-500 */
    border-color: #16A34A; /* green-600 */
    opacity: 1;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}
.drum-toggle.drum-active-hat {
    background-color: #EAB308; /* yellow-500 */
    border-color: #CA8A04; /* yellow-600 */
    opacity: 1;
    box-shadow: 0 0 8px rgba(234, 179, 8, 0.5);
}

.drum-toggle.step-playing {
    transform: scale(1.1);
    border-color: #EC4899; /* pink-500 */
}


/* NEW: Synth section styling */
.synth-section-1 {
    border-top: 3px solid #FBBF24; /* amber-400 */
}
.synth-section-2 {
    border-top: 3px solid #22D3EE; /* cyan-400 */
}

/* NEW: Mixer section */
.mixer-section {
    border-top: 3px solid #9CA3AF; /* gray-400 */
}

/* Style for the motion sequence "steps" (sliders) */
.motion-step {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: #4B5563; /* gray-600 */
    outline: none;
    opacity: 0.7;
    transition: opacity 0.2s;
    cursor: pointer;
}
.motion-step:hover {
    opacity: 1;
}

/* Filter slider thumb - NEW GLOW */
.motion-step::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 25px;
    border-radius: 3px;
    background: #FBBF24; /* amber-400 */
    cursor: pointer;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.7);
}
.motion-step::-moz-range-thumb {
    width: 15px;
    height: 25px;
    border-radius: 3px;
    background: #FBBF24; /* amber-400 */
    cursor: pointer;
    border: none;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.7);
}

/* NEW: Gate slider thumb - NEW GLOW */
.gate-slider {
    background: #4B5563; /* gray-600 */
}
.gate-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 25px;
    border-radius: 3px;
    background: #34D399; /* green-400 */
    cursor: pointer;
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.7);
}
.gate-slider::-moz-range-thumb {
    width: 15px;
    height: 25px;
    border-radius: 3px;
    background: #34D399; /* green-400 */
    cursor: pointer;
    border: none;
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.7);
}

/* NEW: Volume Slider Thumb Colors */
/* S1 (Amber) */
.vol-slider-s1::-webkit-slider-thumb { appearance: none; width: 15px; height: 25px; border-radius: 3px; background: #FBBF24; cursor: pointer; box-shadow: 0 0 8px rgba(251, 191, 36, 0.7); }
.vol-slider-s1::-moz-range-thumb { width: 15px; height: 25px; border-radius: 3px; background: #FBBF24; cursor: pointer; border: none; box-shadow: 0 0 8px rgba(251, 191, 36, 0.7); }
/* S2 (Cyan) */
.vol-slider-s2::-webkit-slider-thumb { appearance: none; width: 15px; height: 25px; border-radius: 3px; background: #22D3EE; cursor: pointer; box-shadow: 0 0 8px rgba(34, 211, 238, 0.7); }
.vol-slider-s2::-moz-range-thumb { width: 15px; height: 25px; border-radius: 3px; background: #22D3EE; cursor: pointer; border: none; box-shadow: 0 0 8px rgba(34, 211, 238, 0.7); }
/* Kick (Red) */
.vol-slider-kick::-webkit-slider-thumb { appearance: none; width: 15px; height: 25px; border-radius: 3px; background: #EF4444; cursor: pointer; box-shadow: 0 0 8px rgba(239, 68, 68, 0.7); }
.vol-slider-kick::-moz-range-thumb { width: 15px; height: 25px; border-radius: 3px; background: #EF4444; cursor: pointer; border: none; box-shadow: 0 0 8px rgba(239, 68, 68, 0.7); }
/* Snare (Green) */
.vol-slider-snare::-webkit-slider-thumb { appearance: none; width: 15px; height: 25px; border-radius: 3px; background: #22C55E; cursor: pointer; box-shadow: 0 0 8px rgba(34, 197, 94, 0.7); }
.vol-slider-snare::-moz-range-thumb { width: 15px; height: 25px; border-radius: 3px; background: #22C55E; cursor: pointer; border: none; box-shadow: 0 0 8px rgba(34, 197, 94, 0.7); }
/* Hat (Yellow) */
.vol-slider-hat::-webkit-slider-thumb { appearance: none; width: 15px; height: 25px; border-radius: 3px; background: #EAB308; cursor: pointer; box-shadow: 0 0 8px rgba(234, 179, 8, 0.7); }
.vol-slider-hat::-moz-range-thumb { width: 15px; height: 25px; border-radius: 3px; background: #EAB308; cursor: pointer; border: none; box-shadow: 0 0 8px rgba(234, 179, 8, 0.7); }

/* NEW: Pyodide Status */
#pyodide-status {
    /* Uses text-amber-400 font-semibold from HTML */
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}