/* ============================================================
   Jazz Standards — css/jazz-standards.css
   ============================================================ */

/* Override tool-page max-width so inner 960px containers control width */
.tool-page:has(.jz-browse), .tool-page:has(.jz-detail) { max-width: 100%; }

/* ── Browse Panel ── */
.jz-browse { max-width: 960px; width: 100%; margin: 0 auto; }

.jz-search-wrap { position: relative; margin-bottom: 10px; display: flex; gap: 8px; align-items: stretch; }
#jz-search {
  flex: 1; min-width: 0; box-sizing: border-box;
  background: #13151f; color: #e0e0e0;
  border: 1.5px solid #2a2d3a; border-radius: 10px;
  padding: 8px 14px 8px 36px;
  font-size: 0.88rem; outline: none;
  transition: border-color 0.2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px center;
}
#jz-search:focus { border-color: #555; }
#jz-search::placeholder { color: #555; }

/* ── Filter Chips ── */
.jz-filter-row {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin-top: 14px; margin-bottom: 6px;
}
.jz-chip {
  background: #1a1d27; color: #888; border: 1.5px solid #2a2d3a;
  border-radius: 10px; padding: 4px 12px; font-size: 0.72rem;
  font-weight: 600; cursor: pointer; transition: all 0.2s;
  font-family: inherit;
}
.jz-chip:hover { color: #bbb; border-color: #444; }
.jz-chip.active { background: #2a2d3a; color: #ccc; border-color: #555; }

/* ── Sort Row ── */
.jz-sort-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 0;
}
.jz-select {
  background: #1a1d27; color: #ccc;
  border: 1.5px solid #2a2d3a; border-radius: 10px;
  padding: 8px 32px 8px 12px; font-size: 0.8rem;
  font-weight: 600; font-family: inherit; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  outline: none; transition: border-color 0.15s;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 12px;
}
.jz-select:hover, .jz-select:focus { border-color: #555; color: #fff; }
.jz-select-wrap {
  position: relative;
}
.jz-count {
  margin-left: auto; font-size: 0.72rem; color: #666;
}

/* ── Results List ── */
.jz-results {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 65vh; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #2a2d3a transparent;
}
.jz-results::-webkit-scrollbar { width: 6px; }
.jz-results::-webkit-scrollbar-track { background: transparent; }
.jz-results::-webkit-scrollbar-thumb { background: #2a2d3a; border-radius: 10px; }

.jz-card {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; background: radial-gradient(circle at 50% 40%, #1a1d27, #12141c);
  border: 1.5px solid #2a2d3a; border-radius: 10px;
  cursor: pointer; transition: all 0.15s; gap: 10px;
}
.jz-card:hover { background: #1a1d27; border-color: #555; }

.jz-card-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.jz-card-title {
  font-weight: 700; font-size: 0.82rem; color: #e0e0e0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jz-card-composer {
  font-size: 0.7rem; color: #777;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.jz-card-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.jz-card-meta-text { color: #555; font-size: 0.62rem; font-weight: 600; white-space: nowrap; }

.jz-fav-btn {
  background: none; border: none; cursor: pointer;
  color: #444; padding: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px;
  transition: color 0.15s, transform 0.15s;
}
.jz-fav-btn svg { display: block; }
.jz-fav-btn:hover { color: #e05070; transform: scale(1.15); }
.jz-fav-btn.jz-fav-active { color: #e05070; }
.jz-fav-btn.jz-fav-active:hover { color: #c0405a; }

/* ── Detail View ── */
.jz-detail { max-width: 960px; width: 100%; margin: 0 auto; }

.jz-detail-nav {
  display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
}
.jz-nav-spacer { flex: 1; }
.jz-back-btn {
  background: #1a1d27; color: #ccc; border: 1.5px solid #2a2d3a;
  border-radius: 10px; padding: 8px 16px; font-size: 0.78rem;
  cursor: pointer; font-weight: 600; white-space: nowrap;
  font-family: inherit; transition: all 0.15s; flex-shrink: 0;
}
.jz-back-btn:hover { background: #252836; border-color: #555; color: #fff; }

.jz-detail-title {
  font-weight: 700; font-size: 1.05rem; color: #e0e0e0;
  text-align: center; margin-bottom: 10px;
}

/* ── Meta Bar ── */
.jz-meta-bar {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px;
  justify-content: center;
}
.jz-meta-item {
  font-size: 0.72rem; color: #999;
}
.jz-meta-item b { color: #bbb; }

/* ── YouTube Button (matches browse button style) ── */
.jz-yt-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #1a1d27; color: #ccc;
  border: 1.5px solid #2a2d3a; border-radius: 10px;
  padding: 8px 16px 8px 14px;
  font-size: 0.78rem; font-weight: 600;
  text-decoration: none; transition: all 0.15s;
  white-space: nowrap; flex-shrink: 0;
  font-family: inherit;
}
.jz-yt-btn:hover { background: #252836; border-color: #555; color: #fff; }
.jz-yt-icon { width: 14px; height: 14px; flex-shrink: 0; }

/* ── Settings Row (instrument, voicing, transpose, BPM) ── */
.jz-settings-row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  justify-content: center; margin-top: 1.2rem; margin-bottom: 0.8rem;
}
/* settings separators removed */

/* ── Chart Toolbar (transport + controls) ── */
.jz-chart-toolbar {
  padding: 12px 12px 8px;
}
.jz-toolbar-transport {
  display: flex; align-items: center; justify-content: center; margin-top: 4px;
}
.jz-toolbar-left, .jz-toolbar-right {
  flex: 1; display: flex; align-items: center; gap: 6px;
}
.jz-toolbar-left { justify-content: flex-end; padding-right: 28px; }
.jz-toolbar-right { justify-content: flex-start; padding-left: 28px; }
.jz-toolbar-center { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.jz-bpm-group {
  display: flex; align-items: center; gap: 6px;
}
.jz-bpm-adj { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #2a2d3a; background: transparent; color: #666; font-size: 0.75rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.12s, border-color 0.12s, color 0.12s; flex-shrink: 0; }
.jz-bpm-adj:hover { border-color: #555; color: #fff; background: rgba(255,255,255,0.05); }
.jz-transpose-group { display: flex; align-items: center; gap: 4px; }
.jz-transpose-label { font-size: 0.6rem; font-weight: 600; color: #444; text-transform: uppercase; letter-spacing: 0.1em; margin-right: 4px; }
.jz-trans-btn {
  background: #1a1d27; color: #ccc; border: 1.5px solid #2a2d3a;
  border-radius: 10px; width: 32px; height: 32px;
  font-size: 1.1rem; cursor: pointer; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit; transition: all 0.15s;
}
.jz-trans-btn:hover { background: #252836; border-color: #555; color: #fff; }
.jz-trans-val {
  font-size: 0.85rem; font-weight: 700; color: #e0e0e0;
  min-width: 28px; text-align: center;
}
.jz-instrument-row { display: flex; justify-content: center; margin-bottom: 12px; }

/* Random button uses shared .lib-dice-btn from base.css */

/* ── Shortcut Links ── */
.jz-meta-shortcuts {
  display: flex; gap: 8px; align-items: center; margin-left: auto;
}
.jz-shortcut-link {
  font-size: 0.66rem; color: #7cb8ff; text-decoration: none;
  background: #1a1d27; border: 1.5px solid #2a2d3a;
  border-radius: 10px; padding: 2px 8px; font-weight: 600;
  transition: all 0.15s; white-space: nowrap;
}
.jz-shortcut-link:hover { background: #222640; border-color: #3a6ea5; }

/* ── Transport Buttons ── */
.jz-transport-btn {
  background: #1a1d27; color: #888; border: 1.5px solid #2a2d3a;
  border-radius: 50%; width: 36px; height: 36px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; flex-shrink: 0;
}
.jz-transport-btn:hover { background: #222640; border-color: #555; color: #ccc; }
.jz-transport-btn svg { width: 16px; height: 16px; fill: currentColor; }
.jz-play-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: #2a6cb0; border: 2px solid #4a8cd0; color: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.1s; flex-shrink: 0;
}
.jz-play-btn:hover { background: #3580cc; }
.jz-play-btn:active { transform: scale(0.93); }
.jz-play-btn svg { width: 20px; height: 20px; fill: #fff; }
.jz-play-btn.active { background: #c04040; border-color: #e06060; }
.jz-play-btn.active:hover { background: #d05050; }

/* ── Pill Toggle (matches circle-of-fifths style) ── */
.jz-pill-group { display: flex; gap: 0; border-radius: 10px; overflow: hidden; border: 1.5px solid #2a2d3a; align-items: stretch; }
.jz-pill {
  padding: 6px 14px; font-size: 0.78rem; background: #13151f; color: #888;
  border: none; cursor: pointer; transition: all 0.15s; font-family: inherit; font-weight: 600;
}
.jz-pill.active { background: #2a2d3a; color: #ccc; }
.jz-pill:hover:not(.active) { color: #aaa; }

/* Info button uses shared .lib-dice-btn from base.css */

/* ── BPM Slider ── */
.jz-bpm-slider {
  -webkit-appearance: none; appearance: none; flex: 1; min-width: 60px; max-width: 110px;
  height: 3px; border-radius: 10px; background: #2a2d3a; outline: none; cursor: pointer;
}
.jz-bpm-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: #2a6cb0; border: 2px solid #4a8cd0; cursor: pointer;
}
.jz-bpm-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: #2a6cb0; border: 2px solid #4a8cd0; cursor: pointer;
}
.jz-bpm-val { font-size: 0.6rem; font-weight: 700; color: #444; letter-spacing: 0.1em; }
.jz-bpm-label { font-size: 0.6rem; font-weight: 700; color: #444; letter-spacing: 0.1em; text-transform: uppercase; margin-right: 4px; }

/* ── Diagram Capping ── */
.jz-diagrams-cards.jz-diagrams-capped {
  max-height: 122px; overflow: hidden;
}
.jz-diagrams-cards.jz-diagrams-capped.jz-diagrams-expanded {
  max-height: none; overflow: visible;
}
.jz-diagrams-more {
  display: block; margin: 18px auto; padding: 8px 16px;
  border-radius: 10px; border: 1.5px solid #2a2d3a; background: #1a1d27;
  color: #ccc; font-size: 0.78rem; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.jz-diagrams-more:hover { border-color: #555; color: #fff; background: #252836; }

/* ── Active Bar Highlight ── */
.jz-measure.jz-bar-active {
  background: #1a2a40 !important;
  box-shadow: inset 0 0 12px rgba(124,184,255,0.2);
  transition: background 0.1s, box-shadow 0.1s;
}
/* Multi-chord bar: JS sets --hl-start and --hl-end as percentages */
.jz-measure.jz-bar-active-partial {
  background: linear-gradient(to right,
    #13151f var(--hl-start),
    #1a2a40 var(--hl-start),
    #1a2a40 var(--hl-end),
    #13151f var(--hl-end)) !important;
  transition: background 0.1s;
}

/* (degree toggle is now .jz-info-btn, defined above) */

/* ── Chord Chart ── */
.jz-chart-wrap {
  margin-bottom: 12px; background: radial-gradient(circle at 50% 40%, #1a1d27, #12141c);
  border: 1.5px solid #2a2d3a; border-radius: 10px;
  overflow: hidden;
}
.jz-chart {
  padding: 8px 12px 12px; overflow-x: auto;
}

/* ── Chart Row: gutter + 4 bars ── */
.jz-row {
  display: grid;
  grid-template-columns: 44px repeat(4, 1fr);
}
.jz-chart .jz-row:first-child .jz-gutter,
.jz-chart .jz-row:first-child .jz-measure { border-top: 1.5px solid #2a2d3a; }

/* Section gap — visual space between sections */
.jz-section-gap { margin-top: 12px; }
.jz-section-gap .jz-gutter,
.jz-section-gap .jz-measure { border-top: 1.5px solid #2a2d3a; }

/* Left gutter (bar number + section label) */
.jz-gutter {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 4px 2px; gap: 3px;
  border-left: 1.5px solid #2a2d3a;
  border-right: 1.5px solid #2a2d3a;
  border-bottom: 1.5px solid #2a2d3a;
  min-height: 40px;
  background: #1a1d27;
}
.jz-bar-num {
  font-size: 0.58rem; color: #555; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.jz-time-sig {
  font-size: 0.7rem; color: #999; font-weight: 700;
  line-height: 1; text-align: center;
}

/* Rehearsal mark (section label box) */
.jz-rehearsal {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid #7cb8ff; border-radius: 10px;
  color: #7cb8ff; font-weight: 700; font-size: 0.62rem;
  padding: 1px 4px; min-width: 18px; line-height: 1.1;
}
.jz-repeat-badge { display: none; }
.jz-repeat-inner { color: #c8a84e; font-size: 0.55rem; font-weight: 600; margin-left: 1px; }

/* ── Measure / Bar ── */
.jz-measure {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; padding: 10px 6px;
  background: #1a1d27;
  border-right: 1.5px solid #2a2d3a;
  border-bottom: 1.5px solid #2a2d3a;
  min-height: 40px;
  position: relative;
  overflow: hidden;
  text-align: center;
  cursor: pointer; transition: background 0.15s;
}

/* Empty measure placeholder (for ending offset) */
.jz-measure-empty {
  background: transparent;
  min-height: 0;
  border-right: none;
  border-bottom: none;
}

/* Beat separator (divider between chords within a bar) */
.jz-beat-sep {
  width: 1.5px; align-self: stretch;
  background: #2a2d3a;
  flex-shrink: 0;
  margin: -10px 0;
}

/* Beat wrapper (stacks degree + chord vertically) */
.jz-beat-wrap {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1; text-align: center; gap: 1px; align-self: stretch; position: relative;
  cursor: pointer; transition: background 0.15s;
}
.jz-degree {
  font-size: 0.62rem; color: #555; font-weight: 700;
  line-height: 1; white-space: nowrap;
}

.jz-beat {
  color: #e0e0e0; font-weight: 600; font-size: 0.8rem;
  white-space: nowrap;
  font-family: inherit;
  text-align: center;
}
.jz-repeat-sym { color: #555; font-size: 0.85rem; flex: 1; text-align: center; }

/* Multiple chords per measure — evenly split */
.jz-measure.jz-multi,
.jz-measure.jz-quad { gap: 0; }
.jz-measure.jz-multi .jz-beat { font-size: 0.7rem; }
.jz-measure.jz-multi .jz-degree { font-size: 0.56rem; }
.jz-measure.jz-quad .jz-beat { font-size: 0.62rem; }
.jz-measure.jz-quad .jz-degree { font-size: 0.50rem; }

/* ── Section boundary (double barlines) ── */
.jz-section-end, .jz-chart-final { position: relative; border-right: none !important; }
.jz-repeat-open, .jz-repeat-close { position: relative; }
.jz-repeat-open { border-left: none !important; }
.jz-repeat-close { border-right: none !important; }
.jz-section-end::before, .jz-chart-final::before {
  content: ''; position: absolute; top: -1.5px; bottom: -1.5px; right: 0;
  width: 5px; border-left: 1.5px solid #666; border-right: 1.5px solid #666;
}

/* ── Endings ── */
.jz-ending-row .jz-measure {
  border-top: 2px solid #5088c0;
}
.jz-ending-row .jz-measure-empty + .jz-measure:not(.jz-measure-empty),
.jz-ending-row .jz-gutter-ending + .jz-measure:not(.jz-measure-empty) { border-left: 1.5px solid #2a2d3a; }
.jz-ending-num {
  position: absolute; top: 1px; left: 4px;
  font-size: 0.56rem; font-weight: 700; color: #7cb8ff;
}
.jz-gutter-ending {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 4px 2px; gap: 2px;
  min-height: 40px;
}
.jz-ending-label {
  color: #5088c0; font-size: 0.58rem; font-weight: 700;
}

/* ── Repeat bar lines ── */
.jz-repeat-open::before {
  content: ''; position: absolute; top: -1.5px; bottom: -1.5px; left: 0;
  width: 5px; border-left: 1.5px solid #666; border-right: 1.5px solid #666;
}
.jz-repeat-close::before {
  content: ''; position: absolute; top: -1.5px; bottom: -1.5px; right: 0;
  width: 5px; border-left: 1.5px solid #666; border-right: 1.5px solid #666;
}

/* ── Chord Diagrams ── */
.jz-diagrams { margin-bottom: 20px; }
.jz-diagrams-header {
  font-size: 0.78rem; font-weight: 700; color: #888;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.jz-diagrams-cards {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.jz-diag-card {
  display: flex; flex-direction: column; align-items: center;
  background: radial-gradient(circle at 50% 40%, #1a1d27, #12141c); border: 1.5px solid #2a2d3a;
  border-radius: 10px; padding: 5px 8px 3px;
  cursor: pointer; transition: all 0.15s; min-width: 80px;
}
.jz-diag-card:hover { border-color: #555; background: #1a1d27; }
.jz-diag-name {
  font-size: 0.68rem; font-weight: 700; color: #ddd; margin-bottom: 2px;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .jz-row { grid-template-columns: 36px repeat(4, 1fr); }
  .jz-beat { font-size: 0.7rem; }
  .jz-measure { padding: 8px 4px; }
  .jz-measure.jz-multi .jz-beat { font-size: 0.62rem; }
  .jz-measure.jz-quad .jz-beat { font-size: 0.55rem; }
  .jz-degree { font-size: 0.54rem; }
  .jz-chart-toolbar { gap: 6px; padding: 8px 8px; }
  /* Transport: play on top, bpm+transpose below — exact match to backing tracks */
  .jz-toolbar-transport { flex-wrap: wrap; justify-content: center; gap: 4px; }
  .jz-toolbar-center { order: -1; width: 100%; justify-content: center; }
  .jz-toolbar-left, .jz-toolbar-right { flex: 0 1 auto; justify-content: center; padding: 0; min-width: 0; gap: 4px; }
  .jz-toolbar-left { justify-content: flex-end; padding-right: 3px; }
  .jz-toolbar-right { justify-content: flex-start; padding-left: 3px; }
  .jz-toolbar-left .jz-bpm-slider { max-width: 55px; min-width: 40px; }
  .jz-bpm-val, .jz-bpm-label { font-size: 0.58rem; }
  .jz-bpm-adj { width: 26px; height: 26px; font-size: 0.7rem; }
  .jz-pill { padding: 5px 10px; font-size: 0.7rem; }
  .jz-filter-row { margin-top: 1.5rem; margin-bottom: 1.5rem; }
  .jz-select { font-size: 0.75rem; padding: 6px 26px 6px 8px; }
  .jz-settings-row { gap: 6px; }
  .jz-detail-title { font-size: 0.92rem; }
  .jz-diag-card { min-width: 70px; padding: 4px 6px 2px; }
  .jz-beat-sep { /* full height via align-self: stretch */ }
  .jz-gutter { padding: 2px 1px; }
  .jz-rehearsal { font-size: 0.56rem; padding: 0 3px; }
}
@media (max-width: 400px) {
  .jz-row { grid-template-columns: 28px repeat(4, 1fr); }
  .jz-beat { font-size: 0.6rem; }
  .jz-degree { font-size: 0.46rem; }
  .jz-measure { padding: 6px 2px; gap: 2px; }
  .jz-measure.jz-multi .jz-beat { font-size: 0.52rem; }
  .jz-measure.jz-quad .jz-beat { font-size: 0.45rem; }
}