/* ============================================
 Mixer Spur Calculator - Full Custom Styles
 ============================================ */

/* Base */
body {
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 background-color: #f3f4f6;
 margin: 0;
 padding: 32px 0;
}

.max-w-7xl {
 max-width: 1280px;
 margin-left: auto;
 margin-right: auto;
 padding-left: 16px;
 padding-right: 16px;
}

/* Header */
.bg-blue-600 {
 background-color: #2563eb;
 color: white;
 padding: 8px 16px;
 border-radius: 6px;
 display: inline-block;
 margin-bottom: 16px;
}

h1 {
 font-size: 2.25rem;
 font-weight: 700;
 color: #1f2937;
 margin-bottom: 8px;
}

.text-lg.text-gray-600 {
 font-size: 1.125rem;
 color: #4b5563;
}

/* Layout */
.flex {
 display: flex;
}

.flex-col {
 flex-direction: column;
}

.lg\:flex-row {
 flex-direction: row;
}

.gap-6 {
 gap: 24px;
}

.lg\:w-96 {
 width: 384px;
}

.flex-shrink-0 {
 flex-shrink: 0;
}

.flex-1 {
 flex: 1;
}

/* Cards */
.card {
 background: white;
 border-radius: 8px;
 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 padding: 20px;
 margin-bottom: 20px;
}

/* Inputs */
label {
 display: block;
 font-size: 0.875rem;
 font-weight: 500;
 color: #374151;
 margin-bottom: 6px;
}

input[type="range"] {
 accent-color: #3b82f6;
 width: 100%;
}

input[type="number"] {
 width: 80px;
 padding: 6px 10px;
 border: 1px solid #d1d5db;
 border-radius: 6px;
 font-size: 0.875rem;
}

.slider-container {
 display: flex;
 align-items: center;
 gap: 10px;
}

.bg-gray-50 {
 background-color: #f9fafb;
}

.p-3 {
 padding: 12px;
}

.rounded {
 border-radius: 6px;
}

/* Buttons */
button {
 font-weight: 600;
 padding: 10px 20px;
 border-radius: 6px;
 cursor: pointer;
 transition: background-color 0.2s;
 border: none;
}

.bg-blue-600 {
 background-color: #2563eb;
 color: white;
}

.bg-blue-600:hover {
 background-color: #1d4ed8;
}

.bg-gray-600 {
 background-color: #4b5563;
 color: white;
}

.bg-gray-600:hover {
 background-color: #374151;
}

.w-full {
 width: 100%;
}

.mb-2 {
 margin-bottom: 8px;
}

/* Mode Toggle */
.mode-toggle {
 display: flex;
 background: #f3f4f6;
 border-radius: 6px;
 overflow: hidden;
 width: fit-content;
}

.mode-btn {
 flex: 1;
 padding: 10px 20px;
 border: none;
 background: white;
 cursor: pointer;
 transition: background 0.2s;
 font-weight: 600;
}

.mode-btn.active {
 background: #2563eb;
 color: white;
}

.mode-btn:hover:not(.active) {
 background: #e5e7eb;
}

/* Plot */
.plot-container {
 height: 420px;
 position: relative;
}

/* Table */
table {
 width: 100%;
 border-collapse: collapse;
}

th, td {
 padding: 10px 12px;
 text-align: left;
 border-bottom: 1px solid #e5e7eb;
}

th {
 background-color: #f9fafb;
 font-weight: 600;
 cursor: pointer;
}

th:hover {
 background-color: #f3f4f6;
}

.spur-green { background-color: #dcfce7; }
.spur-yellow { background-color: #fef3c7; }
.spur-red { background-color: #fecaca; }

.bg-blue-100 {
 background-color: #dbeafe !important;
}

/* Info Box */
#spurInfoBox {
 background-color: #f9fafb;
 padding: 12px;
 border-radius: 6px;
 font-size: 0.875rem;
 margin-top: 12px;
}

/* Modal */
#explanation {
 position: fixed;
 inset: 0;
 background-color: rgba(0,0,0,0.5);
 display: flex;
 align-items: center;
 justify-content: center;
 z-index: 50;
}

#explanation > div {
 background: white;
 padding: 24px;
 border-radius: 8px;
 max-width: 400px;
 width: 90%;
}

/* Collapsible */
.collapsible {
 cursor: pointer;
 padding: 15px;
 background: #f9fafb;
 border-radius: 8px;
 margin-top: 20px;
}

.collapsible-content {
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.3s ease;
}

.collapsible.open .collapsible-content {
 max-height: 500px;
 padding: 0 15px 15px;
}

/* Misc */
.text-center { text-align: center; }
.mb-8 { margin-bottom: 32px; }
.mt-8 { margin-top: 32px; }
.mt-12 { margin-top: 48px; }
.hidden { display: none; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-800 { color: #1f2937; }
.font-semibold { font-weight: 600; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-8 { padding-top: 32px; padding-bottom: 32px; }
.rounded { border-radius: 6px; }
.border { border: 1px solid #d1d5db; }
.transition { transition: background-color 0.2s; }
.overflow-x-auto { overflow-x: auto; }
.float-right { float: right; }
.list-decimal { list-style-type: decimal; }
.list-inside { list-style-position: inside; }
.space-y-1 > * + * { margin-top: 4px; }
.font-mono { font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace; }
.sup { vertical-align: super; font-size: 0.75em; }