/* =============================================================================
   guitar-chords.css — guitar chord diagrams in the guitar progression / chord panels
   (the panels themselves reuse .cp-* from circle-o-5ths.css and .cd-* from piano-chords.css)
   ========================================================================== */

:root {
  --gd-line: #8a8a92;            /* strings + frets */
  --gd-nut: #1d1d1f;
  --gd-label: #6b6b70;           /* "5fr", muted × */
  --gd-barre: rgba(29, 29, 31, 0.18);
  --gd-root-ring: #ffffff;
  --gd-focus: #3d7be8;
  --gd-max: 190px;               /* diagram width in cards and chord panels */
  --gv-fg: #1d1d1f;              /* stepper + octave pill text */
  --gv-sub: #5f5f66;             /* fret pattern under the count */
  --gv-control-bg: #ffffff;
  --gv-control-border: rgba(0, 0, 0, 0.18);
  --gv-hit: 44px;                /* touch target */
  --gv-track: rgba(0, 0, 0, 0.15);
  --gv-track-fill: #3d7be8;      /* = --gd-focus */
  --gv-track-h: 4px;
  --gv-track-top: 12px;          /* track near the top of the touch strip = close to its row */
  --gv-halo: rgba(61, 123, 232, 0.25);   /* grabbed thumb */
  --gv-thumb: 16px;              /* visible thumb; the 44px strip is the touch target */
}

/* the diagram is a button: clicking shows the shape on the fretboard */
.gd {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  max-width: var(--gd-max);
  margin: 12px auto 0;
  padding: 4px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gd:hover { background: rgba(0, 0, 0, 0.04); }
.gd:focus-visible { outline: 3px solid var(--gd-focus); outline-offset: 2px; }
.gd.is-active { box-shadow: 0 0 0 3px var(--gd-focus); }

.gd-svg { display: block; width: 100%; height: auto; overflow: visible; }
.gd-fret,
.gd-string { stroke: var(--gd-line); stroke-width: 1.4; }
.gd-nut { fill: var(--gd-nut); }
.gd-base { fill: var(--gd-label); font-size: 11px; font-weight: 700; }
.gd-mute { fill: var(--gd-label); font-size: 15px; font-weight: 700; }
.gd-barre { fill: var(--gd-barre); }
.gd-dot-c { stroke: rgba(0, 0, 0, 0.25); stroke-width: 1; }
.gd-dot-t { font-weight: 700; pointer-events: none; }
/* chord root: white ring with a dark outline, like the fretboard and the piano */
.gd-dot.is-root .gd-dot-c { stroke: var(--gd-root-ring); stroke-width: 2.5; filter: drop-shadow(0 0 1.2px rgba(0, 0, 0, 0.9)); }

.gd-none {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--gd-label);
}

/* --- voicing browser: diagram · voicing row (.cd-octaves, as on the piano) · 1 —●— N slider ---------- */
.gv { margin-top: 4px; container-type: inline-size; container-name: gv; }   /* narrow panels: see the end of the file */
.gv-diagram .gd { margin-top: 8px; }

/* one block per octave: the voicing row, and its slider right under it (same width as the row).
   Spacing: row -> track 12px; track -> next row 34px (the rest of the slider's 44px touch strip + gap). */
.cd-octaves.gv-octaves { gap: 4px; }
.gv-octave { display: flex; flex-direction: column; align-items: stretch; min-width: 0; max-width: 100%; }

/* voicing row: always ONE line (constant height, so the slider never moves). The pill and a hidden copy of
   the octave's widest voicing share one grid cell (constant width). In narrow cards the note circles
   shrink to fit instead of wrapping. */
.gv-voicing {
  display: grid;
  grid-template-columns: minmax(0, max-content);
  justify-items: start;
  align-items: end;
  max-width: 100%;
}
.gv-voicing > .cd-octave-pill { grid-area: 1 / 1; flex-wrap: nowrap; max-width: 100%; min-width: 0; }
.gv-voicing > .gv-ghost { visibility: hidden; pointer-events: none; }
.gv-voicing .cd-octave-label { flex: 0 0 auto; }
.gv-voicing .cd-octave-note {
  display: flex;
  flex: 1 1 34px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 34px;
  padding: 0;
}
.gv-voicing .cd-octave-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cd-dot);
  max-width: calc(100% - 3px);   /* shrinks with its button in narrow cards, keeping a small gap */
  min-width: 0;
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 0;
  line-height: 1;
}

/* small slider. The visible track sits near the TOP of a 44px touch strip, so it reads as part of the
   row just above it while the touch target stays 44px tall. */
.gv-slider {
  display: flex;
  align-items: flex-start;
  height: var(--gv-hit);
  padding: 0 4px;
}
.gv-end {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  display: flex;                 /* text at the top of the 44px target, level with the track */
  align-items: flex-start;
  justify-content: center;
  min-width: var(--gv-hit);
  height: var(--gv-hit);
  padding: calc(var(--gv-track-top) - 5px) 0 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--gv-sub);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gv-end:hover { color: var(--gv-fg); }
.gv-end:focus-visible { outline: 3px solid var(--gd-focus); outline-offset: -3px; }
.gv-end:disabled { opacity: 0.35; cursor: default; }

.gv-rail {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: var(--gv-hit);
  margin: 0 8px;                 /* room for the thumb at either end */
  cursor: grab;
  touch-action: pan-y;           /* horizontal drags move the slider, vertical ones still scroll the page */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.gv-track {
  position: absolute;
  top: var(--gv-track-top);
  left: 0;
  right: 0;
  height: var(--gv-track-h);
  border-radius: calc(var(--gv-track-h) / 2);
  background: var(--gv-track);
}
.gv-fill { height: 100%; border-radius: inherit; background: var(--gv-track-fill); }
.gv-thumb {
  position: absolute;
  top: calc(var(--gv-track-top) + var(--gv-track-h) / 2);
  width: var(--gv-thumb);
  height: var(--gv-thumb);
  transform: translate(-50%, -50%);
  border: 2px solid var(--gv-track-fill);
  border-radius: 50%;
  background: var(--gv-control-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  pointer-events: none;
  /* glide onto the step after a tap, a key or a release (off while dragging: the thumb follows the finger) */
  transition: left 140ms ease-out, transform 120ms ease-out, background-color 120ms, box-shadow 120ms;
}
.gv-fill { transition: width 140ms ease-out; }
.gv-rail:hover .gv-thumb { transform: translate(-50%, -50%) scale(1.15); }
.gv-rail:focus-visible .gv-thumb { box-shadow: 0 0 0 3px var(--gd-focus); }

/* grabbed: larger filled thumb with a halo, and the "n / N" bubble under it */
.gv-rail.is-dragging { cursor: grabbing; }
.gv-rail.is-dragging .gv-thumb,
.gv-rail.is-dragging .gv-fill { transition: transform 120ms ease-out, background-color 120ms, box-shadow 120ms; }
.gv-rail.is-dragging .gv-thumb {
  transform: translate(-50%, -50%) scale(1.4);
  background: var(--gv-track-fill);
  box-shadow: 0 0 0 6px var(--gv-halo), 0 2px 6px rgba(0, 0, 0, 0.35);
}
.gv-bubble {
  position: absolute;
  top: calc(100% + 3px);           /* below the thumb, in the touch strip: never covers the row above */
  left: 50%;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--gv-fg);
  color: #ffffff;
  font-size: 8px;                /* shown at 1.4× with the grabbed thumb */
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 120ms;
  pointer-events: none;
}
.gv-rail.is-dragging .gv-bubble { opacity: 1; }

/* =============================================================================
   BREAKPOINTS — keep at end of file
   ========================================================================== */

@media (max-width: 430px) {
  :root { --gd-max: 170px; }
}

/* narrow chord panels (col-md-3 at tablet widths): no room for 1 · rail · N on one line —
   the rail takes the full width and 1 / N sit under its two ends */
@container gv (max-width: 150px) {
  .gv-octave { align-self: stretch; }
  .gv-slider {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "rail rail rail" "first . last";
    height: auto;
    row-gap: 0;
  }
  .gv-rail { grid-area: rail; margin: 0 8px; }
  .gv-slider .gv-end:first-child { grid-area: first; }
  .gv-slider .gv-end:last-child { grid-area: last; }
  .gv-end { position: relative; margin-top: -22px; padding-top: 2px; }   /* tucked under the rail's ends */
}