@charset "UTF-8";
/* Fretboard: the neck, the capo and the few parts the shared tool classes and ref.css do not cover.
   The dot, string, fret and nut styles come from ref.css, so the tool and the reference diagrams match. */

.tool [hidden] { display: none; }

.fb-wrap { overflow-x: auto; overscroll-behavior-x: contain; padding: .8rem .6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.fb-neck { display: block; width: 100%; height: auto; }
.fb-neck .fb-str { stroke-width: 2.2; }
.fb-inlay { fill: var(--line-strong); }
.fb-behind { fill: color-mix(in oklab, var(--ink) 10%, transparent); }
.fb-open-name { font: 620 9px var(--font-ui); fill: var(--ink-3); }
.fb-capo { fill: var(--ink-2); }
.fb-capo-label { font: 650 10px var(--font-ui); fill: var(--ink-2); }
.fb-hit { fill: transparent; }
/* Touch screens: the dot and its labels are drawn larger to match the wider spacing. */
.fb-neck.is-coarse .fb-dot text { font-size: 11px; }
.fb-neck.is-coarse .fb-open-name { font-size: 11px; }
.fb-neck.is-coarse .fb-num { font-size: 12px; }
.fb-neck.is-coarse .fb-capo-label { font-size: 12px; }

/* Pitch colour by pitch class: index N = (pc * 7) % 12, the circle of fifths. */
.fb-dot[data-pc="0"] { --pitch: var(--p0); }
.fb-dot[data-pc="1"] { --pitch: var(--p7); }
.fb-dot[data-pc="2"] { --pitch: var(--p2); }
.fb-dot[data-pc="3"] { --pitch: var(--p9); }
.fb-dot[data-pc="4"] { --pitch: var(--p4); }
.fb-dot[data-pc="5"] { --pitch: var(--p11); }
.fb-dot[data-pc="6"] { --pitch: var(--p6); }
.fb-dot[data-pc="7"] { --pitch: var(--p1); }
.fb-dot[data-pc="8"] { --pitch: var(--p8); }
.fb-dot[data-pc="9"] { --pitch: var(--p3); }
.fb-dot[data-pc="10"] { --pitch: var(--p10); }
.fb-dot[data-pc="11"] { --pitch: var(--p5); }