/* theme.css v1.0 (261004) — dark theme accent purple -> orange.
   Tailwind v4 utilities read their colours from CSS variables (var(--color-violet-500) ...), so remapping the
   violet/purple/indigo variables under .dark re-colours every accent (buttons, borders, gradients, SVG fills,
   range accent) without touching the mirrored bundle. Light theme is left as upstream.
   Values = Tailwind v4 orange scale (oklch). Per-band data colours (12 hues set in JS) are not changed. */
.dark {
  --color-violet-50:  oklch(98% .016 73.684);
  --color-violet-100: oklch(95.4% .038 75.164);
  --color-violet-200: oklch(90.1% .076 70.697);
  --color-violet-400: oklch(75% .183 55.934);
  --color-violet-500: oklch(70.5% .213 47.604);
  --color-violet-600: oklch(64.6% .222 41.116);
  --color-violet-950: oklch(26.6% .079 36.259);
  --color-purple-400: oklch(75% .183 55.934);
  --color-purple-500: oklch(70.5% .213 47.604);
  --color-purple-600: oklch(64.6% .222 41.116);
  --color-indigo-50:  oklch(98% .016 73.684);
  --color-indigo-500: oklch(70.5% .213 47.604);
  --color-indigo-950: oklch(26.6% .079 36.259);
}

/* Keyboard focus stays visible on buttons, sliders, and the EQ chart. */
:where(button, input, [role="button"]):focus-visible {
  outline: 2px solid #f97316;
  outline-offset: 4px;
}
.light #proeq-loop-badge {
  background: #fff7ed !important;
  color: #9a3412 !important;
  border-color: #fed7aa !important;
  box-shadow: none !important;
}
.light #proeq-loop-badge[aria-pressed="true"] {
  background: #ffedd5 !important;
  border-color: #f97316 !important;
}
.proeq-frequency-buttons { display: none; }
.lsv-confirm {
  width: min(420px, calc(100vw - 40px));
  padding: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  color: #1e293b;
  background: #fff;
  box-shadow: 0 24px 80px #0005;
}
.lsv-confirm::backdrop { background: #0009; backdrop-filter: blur(4px); }
.lsv-confirm h2 { margin: 0 0 12px; font-size: 20px; font-weight: 700; }
.lsv-confirm p { margin: 0; font-size: 14px; line-height: 1.8; color: #64748b; }
.lsv-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.lsv-confirm button { min-height: 44px; padding: 10px 16px; border: 1px solid #e2e8f0; border-radius: 10px; cursor: pointer; }
.lsv-confirm .lsv-confirm-danger { background: #dc2626; border-color: #dc2626; color: #fff; }
.dark .lsv-confirm { background: #11131a; border-color: #334155; color: #f8fafc; }
.dark .lsv-confirm p { color: #94a3b8; }
.dark .lsv-confirm button { border-color: #334155; }

@media (max-width: 767px) {
  aside { position: relative; }
  aside > div:first-child > div:first-child { padding: 16px; }
  aside nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 8px 12px 12px;
  }
  aside nav button { margin-top: 0; min-height: 48px; padding: 8px 12px; gap: 10px; }
  aside nav button svg { flex-shrink: 0; }
  aside > div:last-child {
    position: absolute;
    top: 16px;
    right: 14px;
    width: 40px;
    padding: 0;
    border: 0;
  }
  aside > div:last-child > button { width: 40px; height: 40px; padding: 10px; justify-content: center; }
  aside > div:last-child > button > span:first-child > span,
  aside > div:last-child > button > span:last-child { display: none; }
  main { padding: 20px 16px; min-width: 0; }
  .proeq-frequency-buttons {
    display: grid;
    position: relative;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin: 12px 0 0;
  }
  .proeq-frequency-buttons button {
    min-height: 44px;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #cbd5e1;
    background: #181a24;
    font: 600 11px/1.4 ui-monospace, monospace;
    cursor: pointer;
  }
  .proeq-frequency-buttons button[aria-pressed="true"] { background: #7c2d12; color: #ffedd5; border-color: #f97316; }
  .light .proeq-frequency-buttons button { background: #f8fafc; border-color: #e2e8f0; color: #475569; }
  .light .proeq-frequency-buttons button[aria-pressed="true"] { background: #ffedd5; border-color: #fb923c; color: #9a3412; }
  .proeq-eq-chart { height: 110px; }
  .proeq-eq-chart > svg { pointer-events: none; }
  .proeq-eq-chart ~ * { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.lsv-home-link { display: block; margin: 12px 24px 0; color: #94a3b8; font-size: 11px; text-decoration: none; }
.lsv-home-link:hover { color: #f97316; }
.lsv-home-link:focus-visible { outline: 2px solid #f97316; outline-offset: 4px; }
@media (max-width: 767px) { .lsv-home-link { margin: 0 16px 8px; } }