/* Spotify Jam */
.jm-embed:empty { display: none; }
.jm-embed iframe { display: block; width: 100%; border: 0; border-radius: 12px; }
.jm-results { display: flex; flex-direction: column; gap: 6px; }
.jm-results:empty { display: none; }
.jm-result {
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: var(--surface-2); border: 1px solid transparent; border-radius: 10px; padding: 6px 10px;
  color: var(--fg); font: inherit; cursor: pointer; min-height: 52px;
}
.jm-result:hover { border-color: var(--accent); }
.jm-result img, .jm-noart { width: 40px; height: 40px; border-radius: 6px; flex: none; background: var(--line); }
.jm-result > span { display: flex; flex-direction: column; min-width: 0; }
.jm-result b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jm-uri { word-break: break-all; }

/* Live readout: key / tempo / chord */
.jm-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.jm-fact { display: flex; flex-direction: column; gap: 2px; background: var(--surface-2); border-radius: var(--radius); padding: 12px 14px; min-width: 0; }
.jm-fact b { font: 800 clamp(20px, 3.4vw, 30px)/1.15 var(--font-display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.jm-fact:first-child b { color: var(--accent); }
.jm-fact:last-child b { color: var(--cool); }
.jm-fact span { font-size: 12.5px; color: var(--muted); font-weight: 500; }

/* Guide */
.jg-summary { display: flex; flex-direction: column; gap: 16px; }
.jg-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.jg-fact { display: flex; flex-direction: column; gap: 2px; border-left: 3px solid var(--accent); padding: 2px 0 2px 12px; }
.jg-fact span { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.jg-fact b { font: 700 19px/1.25 var(--font-display); letter-spacing: -0.01em; }
.jg-loop { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; max-width: 520px; }
.jg-chord {
  display: flex; flex-direction: column; align-items: center; min-width: 0;
  padding: 10px 14px; border-radius: var(--radius); background: var(--surface-2); border: 2px solid transparent;
  transition: border-color .1s, background .1s;
}
.jg-chord b { font: 800 22px/1.1 var(--font-display); }
.jg-chord span { font: 600 12px var(--font-mono); color: var(--muted); }
.jg-chord.on { border-color: var(--cool); background: var(--cool-soft); }
.jg-tabs { align-self: flex-start; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.jg-tabs button { white-space: nowrap; }
.jg-body { min-height: 120px; }
.jg-rhythm { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; max-width: 520px; }
.jg-slot {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 0; border-radius: 10px; background: var(--accent-soft);
}
.jg-slot b { font: 800 22px/1 var(--font-display); color: var(--accent); }
.jg-slot span { font: 600 12px var(--font-mono); color: var(--muted); }
.jg-slot.rest { background: var(--surface-2); }
.jg-slot.rest b { color: var(--muted); }
.jg-steps { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 12px; max-width: 64ch; }
.jg-steps li { padding-left: 4px; }
.jg-steps li::marker { font-weight: 700; color: var(--accent); }
.jg-steps b { display: block; }
.jg-steps span { color: var(--muted); }

/* Band mixer */
.jg-mixer { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 560px; }
.jg-part {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; min-height: 64px;
  border-radius: var(--radius); border: 2px solid var(--line); background: var(--surface); color: var(--muted);
  font: inherit; cursor: pointer; transition: border-color .15s, background .15s;
}
.jg-part b { font: 700 16px var(--font-body); color: var(--muted); }
.jg-part span { font-size: 12px; }
.jg-part.on { border-color: var(--cool); background: var(--cool-soft); }
.jg-part.on b { color: var(--fg); }
.jg-part.on span { color: var(--cool); }

/* Genres pages */
.gn-grid-wrap { overflow-x: auto; }
.gn-grid { display: grid; grid-template-columns: 76px repeat(16, minmax(18px, 1fr)); gap: 3px; min-width: 420px; align-items: center; }
.gn-count { font: 600 11px var(--font-mono); color: var(--muted); text-align: center; }
.gn-row { font: 600 12.5px var(--font-body); color: var(--muted); }
.gn-cell { height: 24px; border-radius: 5px; background: var(--surface-2); }
.gn-cell.beat { box-shadow: inset 2px 0 0 var(--line); }
.gn-cell.on { background: var(--cool); }
.gn-cell.accent { background: var(--accent); }
.gn-cell.ghost { background: var(--cool-soft); outline: 1px dashed var(--cool); outline-offset: -3px; }
.gn-traits { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; max-width: 64ch; }
.jg-part[disabled] { opacity: 0.45; cursor: not-allowed; }