/* ============================================================================
   som-do-meu-cafe-web-audio-synth/app.css
   Styles for the Web Audio mini-synth only. Scoped under .synth; inherits the
   BPSO Lab 2026 tokens from blog.css. Loaded by the post page. Works in both
   dark (default) and [data-theme="light"].
   ========================================================================== */

.synth {
  /* Local tokens; some are read by app.js via getComputedStyle (scope colors). */
  --synth-panel: var(--surface-2, #243349);
  --synth-scope-bg: #0b1220;
  --synth-scope-line: var(--brand-light, #60a5fa);
  --synth-scope-grid: rgba(255, 255, 255, .07);
  --synth-key-white: #f8fafc;
  --synth-key-white-2: #e2e8f0;
  --synth-key-black: #131c2e;
  --synth-key-black-2: #1f2c44;
  --synth-accent: var(--cat-dev, #2563eb);

  display: grid;
  gap: 1.1rem;
  color: var(--text-main);
}
[data-theme="light"] .synth {
  --synth-panel: #eef2f8;
  --synth-scope-bg: #0f172a;          /* keep the scope dark for line contrast */
  --synth-scope-grid: rgba(255, 255, 255, .07);
  --synth-key-black: #1e293b;
  --synth-key-black-2: #334155;
}

/* ---------------------------------------------------------------- Top row */
.synth__top {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  flex-wrap: wrap;
}

.synth__power {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-width: 116px;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--border);
  background: var(--synth-panel);
  color: var(--text-muted);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s, transform .12s;
}
.synth__power i { font-size: 1.7rem; line-height: 1; }
.synth__power:hover { color: var(--text-main); border-color: var(--synth-accent); }
.synth__power:active { transform: translateY(1px); }
.synth__power[aria-pressed="true"] {
  color: #fff;
  background: var(--synth-accent);
  border-color: var(--synth-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--synth-accent) 25%, transparent);
}
.synth__power-label { text-align: center; }

/* ---------------------------------------------------------------- Scope */
.synth__scope {
  flex: 1 1 240px;
  min-width: 0;
  border-radius: var(--radius-sm, 10px);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--synth-scope-bg);
  position: relative;
}
.synth__canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 96px;
}

/* ---------------------------------------------------------------- Controls */
.synth__controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}
.synth__group {
  background: color-mix(in srgb, var(--synth-panel) 60%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px);
  padding: .9rem 1rem 1rem;
  min-width: 0;
}
.synth__legend {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: .7rem;
}

/* Waveform buttons */
.synth__waves {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
}
.synth__wave {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
  padding: .55rem .6rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .82rem;
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}
.synth__wave svg {
  width: 28px; height: 22px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
}
.synth__wave-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.synth__wave:hover { color: var(--text-main); border-color: var(--synth-accent); }
.synth__wave[aria-checked="true"] {
  color: #fff;
  background: var(--synth-accent);
  border-color: var(--synth-accent);
}

/* Sliders */
.synth__sliders { display: grid; gap: .7rem; }
.synth__gen-row {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1rem;
  align-items: flex-end;
}
.synth__gen-row .synth__slider { flex: 1 1 130px; min-width: 0; }

.synth__slider {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .15rem .6rem;
  font-size: .8rem;
}
.synth__slider-label {
  grid-column: 1;
  color: var(--text-muted);
  font-weight: 500;
}
.synth__slider-val {
  grid-column: 2;
  font-family: ui-monospace, 'Cascadia Code', monospace;
  font-size: .76rem;
  color: var(--text-main);
  white-space: nowrap;
}
.synth__slider input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  margin: .25rem 0 0;
  appearance: none;
  -webkit-appearance: none;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--synth-accent) 22%, var(--surface));
  cursor: pointer;
}
.synth__slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--synth-accent);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  cursor: pointer;
}
.synth__slider input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--synth-accent);
  border: 2px solid #fff;
  cursor: pointer;
}
.synth__slider input[type="range"]:focus-visible {
  outline: 3px solid var(--brand-light);
  outline-offset: 3px;
}

/* Generative button */
.synth__gen-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--synth-accent);
  background: transparent;
  color: var(--synth-accent);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  transition: color .18s, background .18s, transform .12s;
}
.synth__gen-btn i { font-size: 1.15rem; }
.synth__gen-btn:hover { background: color-mix(in srgb, var(--synth-accent) 14%, transparent); }
.synth__gen-btn:active { transform: translateY(1px); }
.synth__gen-btn.is-on {
  background: var(--synth-accent);
  color: #fff;
}

/* ---------------------------------------------------------------- Keyboard */
.synth__keys {
  position: relative;
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.synth__white-row {
  display: flex;
  gap: 4px;
  width: 100%;
}
.synth__key {
  appearance: none;
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--border);
  padding: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.synth__key--white {
  flex: 1 1 0;
  min-width: 0;
  height: clamp(96px, 22vw, 150px);
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, var(--synth-key-white), var(--synth-key-white-2));
  color: #475569;
  padding-bottom: .55rem;
  box-shadow: inset 0 -4px 8px rgba(15, 23, 42, .12);
}
.synth__key--white.is-active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--synth-accent) 24%, var(--synth-key-white)), var(--synth-key-white-2));
  color: var(--synth-accent);
}
.synth__black-row {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(62px, 14vw, 96px);
  pointer-events: none;       /* the row is a positioning layer; keys re-enable */
}
.synth__key--black {
  position: absolute;
  top: 0;
  pointer-events: auto;
  width: calc(100% / 7 * 0.62);
  height: 100%;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, var(--synth-key-black-2), var(--synth-key-black));
  color: #cbd5e1;
  padding-bottom: .4rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .45);
  z-index: 2;
}
.synth__key--black.is-active {
  background: linear-gradient(180deg, var(--synth-accent), color-mix(in srgb, var(--synth-accent) 60%, #000));
  color: #fff;
}
.synth__key-cap {
  font-family: ui-monospace, 'Cascadia Code', monospace;
  font-size: .72rem;
  font-weight: 600;
  opacity: .8;
  pointer-events: none;
}
.synth__key:focus-visible {
  outline: 3px solid var(--brand-light);
  outline-offset: -3px;
  z-index: 5;
}

/* reduced-motion note */
.synth__note {
  margin: 0;
  font-size: .82rem;
  color: var(--text-muted);
  text-align: center;
}

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 768px) {
  .synth__controls { grid-template-columns: 1fr; }
  .synth__top { flex-wrap: nowrap; }
  .synth__power { min-width: 92px; padding: .8rem; font-size: .78rem; }
  .synth__power i { font-size: 1.4rem; }
}

@media (max-width: 480px) {
  .synth { gap: .8rem; }
  .synth__group { padding: .75rem .8rem .85rem; }
  .synth__waves { grid-template-columns: 1fr 1fr; }
  .synth__key--white { height: clamp(84px, 26vw, 120px); }
  .synth__canvas { min-height: 80px; }
}

@media (max-width: 360px) {
  .synth__wave { font-size: .76rem; padding: .5rem .45rem; }
  .synth__wave svg { width: 22px; }
}

/* Honor reduced motion: kill the slider thumb transition shimmer etc.
   (The scope animation is already gated in JS; this covers CSS transitions.) */
@media (prefers-reduced-motion: reduce) {
  .synth__power,
  .synth__wave,
  .synth__gen-btn { transition: none; }
}