/* 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-region {
  fill: rgba(184, 90, 42, 0.07);
  stroke: rgba(184, 90, 42, 0.28);
  stroke-width: 1.4;
}
.gfret-region-wrap.is-active .gfret-region {
  fill: rgba(184, 90, 42, 0.14);
  stroke: var(--terra);
  stroke-width: 2;
}
.gfret-region-lab {
  font-size: 11px;
  font-weight: 800;
  fill: var(--terra);
  text-anchor: middle;
  font-family: var(--font-sans);
  opacity: 0.85;
}
.gfret-region-wrap.is-active .gfret-region-lab { opacity: 1; }

.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; }

/* Moveable nut — clamped just behind a fret wire. */
.gfret-capo {
  fill: #3d4554;
  stroke: #1e2430;
  stroke-width: 1.2;
  opacity: 0.92;
}
.gfret-capo-lab {
  font-size: 10px;
  font-weight: 800;
  fill: var(--ink);
  text-anchor: middle;
  font-family: var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

.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;
}
.gfret-pulse-dot { fill: var(--terra); }
.gfret-pulse .gfret-mlab { font-size: 14px; }
@keyframes gfret-pulse {
  from { opacity: 0.45; }
  to { opacity: 1; }
}

/* Playing while scrolled away: the neck docks above the practice bar, in the
 * column its page slot sits in (sangeet-fretboard.js sets left, width, bottom).
 * Under the bar's z-index 50, so the bar's More sheet still opens over it. */
.gfret.gfret--docked {
  position: fixed;
  z-index: 45;
  max-width: 560px;
  margin: 0;
  padding: 6px 30px 2px 10px;
  box-sizing: border-box;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 32px rgba(60, 40, 20, 0.28);
  animation: gfret-dock-in 0.18s ease-out;
}
.gfret--docked .gfret-cap,
.gfret--docked .gfret-fing { display: none; }

/* TAB playing on a page with no neck in view: the room's neck floats in the
 * same place a docked one would, built and placed by sangeet-fretboard.js. */
.gfret-float {
  position: fixed;
  z-index: 45;
  max-width: 560px;
  padding: 6px 30px 2px 10px;
  box-sizing: border-box;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 32px rgba(60, 40, 20, 0.28);
  animation: gfret-dock-in 0.18s ease-out;
}
.gfret-float[hidden] { display: none; }
.gfret-float .gfret { margin: 0; max-width: none; }
.gfret-float .gfret-cap,
.gfret-float .gfret-fing { display: none; }
@keyframes gfret-dock-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gfret.gfret--docked, .gfret-float { animation: none; }
}
@media (max-height: 560px) {
  .gfret.gfret--docked, .gfret-float { max-width: 420px; }
}
.gfret-dock-close {
  position: absolute; top: 4px; right: 6px;
  width: 24px; height: 24px; padding: 0;
  border: none; border-radius: 50%;
  background: transparent; color: var(--muted);
  font: 700 18px/24px var(--font-sans);
  cursor: pointer;
}
.gfret-dock-close:hover, .gfret-dock-close:focus-visible { background: var(--line); color: var(--ink); }

.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%; }
.gfret-key .sq-lg { border-radius: 2px; width: 14px; height: 14px; }
.gfret-key .ci-sm { border-radius: 50%; width: 10px; height: 10px; }
.gfret-key .ci5 { border-radius: 50%; width: 12px; height: 12px; }