/* Fretted neck and its marks — shared by the guitar, ukulele and bass rooms
 * and by the Chord ID tool. Pairs with js/sangeet-fretboard.js, which emits
 * these class names; a page that draws a neck loads both.
 *
 * Colours come from sangeet-theme.css (--terra, --ink, --muted), so a room can
 * retheme its neck by overriding those and nothing here.
 */

.gfret { margin: 10px 0; max-width: 640px; }
.gfret-svg { width: 100%; height: auto; display: block; overflow: visible; }
.gfret-wood { fill: #f3e6cf; }
.gfret-nut { fill: var(--ink); }
.gfret-wire { stroke: #8a7a62; stroke-width: 1.4; }
.gfret-string { stroke: #3d2b1f; fill: none; }
.gfret-inlay { fill: #c4b49a; }

.gfret-sname, .gfret-fnum {
  font-size: 11px; font-weight: 800; fill: var(--muted);
  font-family: var(--font-sans);
}
.gfret-sname { text-anchor: start; }
.gfret-fnum { text-anchor: middle; }

/* Opaque-zero fill, not `transparent`: under SVG's visiblePainted hit rules a
 * fully transparent shape still counts as painted, but only if a fill is set. */
.gfret-hit { fill: rgba(0, 0, 0, 0); cursor: pointer; pointer-events: all; }
.gfret-hit:hover, .gfret-hit:focus { fill: rgba(184, 90, 42, 0.14); outline: none; }

/* Square = root, circle = any other tone; hollow = played open. */
.gfret-mark.tone circle, .gfret-mark.root rect { fill: var(--terra); }
.gfret-mark.open circle, .gfret-mark.open rect {
  fill: #fffdf8; stroke: var(--terra); stroke-width: 2;
}
.gfret-mlab {
  font-size: 13px; font-weight: 800; fill: #fff; text-anchor: middle;
  font-family: var(--font-sans);
}
.gfret-mark.open .gfret-mlab { fill: var(--terra); }
.gfret-flab {
  font-size: 11px; font-weight: 800; fill: var(--terra); text-anchor: middle;
  font-family: var(--font-sans);
}
.gfret-mute {
  font-size: 14px; font-weight: 800; fill: var(--muted); text-anchor: middle;
  font-family: var(--font-sans);
}

/* Sounding now: the mark glows, and a ring expands wherever the note was. */
.gfret-mark.is-playing circle,
.gfret-mark.is-playing rect {
  filter: drop-shadow(0 0 5px rgba(184, 90, 42, 0.95));
}
.gfret-pulse-ring {
  fill: rgba(184, 90, 42, 0.28);
  stroke: var(--terra);
  stroke-width: 2.5;
  animation: gfret-pulse 0.65s ease-in-out infinite alternate;
}
@keyframes gfret-pulse {
  from { opacity: 0.45; }
  to { opacity: 1; }
}

.gfret-fing {
  font-size: .92rem; font-weight: 700; color: var(--ink); margin: 8px 0 0; line-height: 1.45;
}

/* Caption below the neck: an HTML row of legend chips, or SVG text inside it. */
.gfret-cap {
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
  color: var(--muted); font-size: .78rem; margin-top: 6px;
}
svg .gfret-cap {
  display: block;
  fill: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-anchor: middle;
  font-family: var(--font-sans);
}
.gfret-key { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); }
.gfret-key i {
  display: inline-block; width: 12px; height: 12px; background: var(--terra);
}
.gfret-key .sq { border-radius: 2px; }
.gfret-key .ci { border-radius: 50%; }