/* Chord diagram box — shared by the guitar and ukulele rooms. Pairs with
 * js/sangeet-chord-diagram.js, which emits these class names.
 *
 * Defaults suit a six-string box. A room whose diagrams hold fewer strings in
 * a narrower box (ukulele) bumps the scale by setting these on .gdiag:
 *
 *   --gdiag-width, --gdiag-width-lg     box width, normal and .lg
 *   --gdiag-sname, --gdiag-mark, --gdiag-finger          type sizes
 *   --gdiag-sname-lg, --gdiag-mark-lg, --gdiag-finger-lg type sizes when .lg
 */

.gdiag {
  display: inline-flex; flex-direction: column; align-items: stretch;
  width: var(--gdiag-width, 148px); min-width: var(--gdiag-width, 148px);
  padding: 8px 6px 8px;
  border: 1px solid var(--line); border-radius: 10px; background: #fffdf8;
  cursor: pointer; user-select: none; vertical-align: top;
}
.gdiag:hover, .gdiag:focus-visible {
  border-color: var(--terra); outline: 2px solid var(--ochre); outline-offset: 2px;
}
.gdiag.lg {
  width: var(--gdiag-width-lg, 188px); min-width: var(--gdiag-width-lg, 188px);
}
.gdiag-svg { display: block; width: 100%; height: auto; overflow: visible; }
.gdiag-wood { fill: #f0e4cf; }
.gdiag-nut-bar { fill: var(--ink); }
.gdiag-fret { stroke: #8a7a62; stroke-width: 1.6; stroke-linecap: butt; }
.gdiag-string { stroke: #3d2b1f; stroke-linecap: round; opacity: 0.9; }

.gdiag-sname {
  font-size: var(--gdiag-sname, 8.5px); font-weight: 800; fill: var(--muted);
  font-family: var(--font-sans);
}
.gdiag-mark {
  font-size: var(--gdiag-mark, 11px); font-weight: 800; fill: var(--ink);
  font-family: var(--font-sans);
}
.gdiag-mark.open { fill: var(--terra); }
.gdiag-mark.mute { fill: var(--muted); }
.gdiag-dot-svg { fill: var(--terra); }
.gdiag-finger {
  font-size: var(--gdiag-finger, 9px); font-weight: 800; fill: #fff;
  font-family: var(--font-sans);
  pointer-events: none;
}
/* Which fret the box opens at, for shapes drawn away from the nut. */
.gdiag-fretnum {
  font-size: var(--gdiag-sname, 8.5px); font-weight: 800; fill: var(--muted);
  font-family: var(--font-sans);
}
.gdiag.lg .gdiag-fretnum { font-size: var(--gdiag-sname-lg, 9.5px); }
.gdiag.lg .gdiag-sname { font-size: var(--gdiag-sname-lg, 9.5px); }
.gdiag.lg .gdiag-mark { font-size: var(--gdiag-mark-lg, 12px); }
.gdiag.lg .gdiag-finger { font-size: var(--gdiag-finger-lg, 10px); }

.gdiag-name {
  text-align: center; font-weight: 800; margin-top: 4px; color: var(--ink);
}
.gdiag-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Narrow screens: one box width for every room, so rows still wrap the same. */
@media (max-width: 820px) {
  .gdiag { width: 148px; min-width: 148px; }
}