/* The tab as tab.js draws it — one sheet for the three pages that show it
   (the practice tab, the parts guide, the style review), so the strings,
   the numbers and the rhythm read the same everywhere. Each page keeps
   only what is its own: the color of the note being played and the
   playhead. Sized after printed tab: a 17px string gap, numbers at 11px
   bold on a panel-colored tile, thin strings, a firmer bar line. */
.tab-string{ stroke:var(--line2); stroke-width:1; }
.tab-bar{ stroke:var(--muted); stroke-width:1.2; opacity:.7; }
.tab-label{ fill:var(--muted); font:500 10px Inter,system-ui,sans-serif; }
.tab-barnum{ fill:var(--muted2); font:italic 500 9.5px Inter,system-ui,sans-serif; }
.tab-chord{ fill:var(--ink); font:600 12px Inter,system-ui,sans-serif; }
.tab-numeral{ fill:var(--muted); font:600 10px Inter,system-ui,sans-serif; }
.tab-note rect{ fill:var(--panel); }
.tab-note text{ fill:var(--ink); font:700 11px Inter,system-ui,sans-serif; }
.tab-note.muted text{ fill:var(--muted); }
.tab-note.soft text{ font-weight:500; fill:var(--muted); }   /* a hammered-on note: no pick */
.tab-tech{ fill:var(--muted); font:italic 600 9.5px Inter,system-ui,sans-serif; }
/* the rhythm under the strings: stems, flags, beams, dots, the hollow heads
   of the long values */
.tab-stem{ stroke:var(--ink); stroke-width:1.3; stroke-linecap:round; }
.tab-beam{ stroke:var(--ink); stroke-width:3; }
.tab-flag{ fill:none; stroke:var(--ink); stroke-width:1.3; stroke-linecap:round; }
.tab-dot{ fill:var(--ink); }
.tab-head{ fill:none; stroke:var(--ink); stroke-width:1.2; }

/* a long tab in a pane: as many rows as were last asked for, the rest by
   scrolling, with a control to the right of its bottom corner — in a
   gutter the wrapper leaves, so nothing sits between the tab and what is
   under it (js/tab-pane.js) */
.tab-pane-wrap{ position:relative; }
.tab-pane-wrap.has-ctl{ padding-right:30px; }
.tab-pane{ overflow-y:auto; overflow-x:auto; scroll-behavior:smooth; }
.tab-pane-ctl{ position:absolute; right:0; bottom:0; display:flex; flex-direction:column; align-items:center; gap:2px; margin:0; font-size:10px; color:var(--muted2, #6f675b); font-variant-numeric:tabular-nums; }
.tab-pane-ctl button{ width:22px; height:22px; padding:0; border:1px solid var(--line2, #3a3631); border-radius:999px; background:transparent; color:var(--ink, #ece7dc); font:600 13px/1 Inter,system-ui,sans-serif; cursor:pointer; }
.tab-pane-ctl button:hover{ border-color:var(--a, #e0a84a); }
.tab-pane-ctl button:disabled{ opacity:.3; cursor:default; }

/* the CAGED shape a bar is played in, after the chord's name and numeral */
.tab-shape{ font:500 9px Inter,system-ui,sans-serif; fill:var(--muted2, #6f675b); letter-spacing:.02em; }

/* the pick's direction under the strings (⊓ down, ∨ up), and what a bar
   was written from, after its chord */
.tab-stroke{ fill:none; stroke:var(--muted, #a49a8a); stroke-width:1.2; stroke-linejoin:round; }
.tab-role{ font:italic 500 9px Inter,system-ui,sans-serif; fill:var(--muted2, #6f675b); }
/* the count-in, by the first bar of the tab: the beat number, and nothing before or after */
.count-in{ position:absolute; left:0; top:0; z-index:2; width:22px; height:22px; border-radius:50%; background:var(--a, #e0a84a); color:#0c0b0a; font:700 13px/22px Inter,system-ui,sans-serif; text-align:center; pointer-events:none; }

/* the fingering, when a page asks for it: a small chord diagram at each
   change of grip — strings and frets, a dot with its finger where the hand
   holds a string (filled where the bar strikes it, hollow where it only
   holds it), x over a string left out, o over an open one, a bar for a
   barre, the fret number by the first row up the neck */
.tab-grip line{ stroke:var(--muted2, #6f675b); stroke-width:.8; }
.tab-grip line.nut{ stroke:var(--ink, #ece7dc); stroke-width:2.2; }
.tab-grip circle.on{ fill:var(--ink, #ece7dc); }
.tab-grip circle.held{ fill:var(--bg, #141311); stroke:var(--muted, #a49a8a); stroke-width:1; }
.tab-grip .barre{ fill:var(--ink, #ece7dc); opacity:.55; }
.tab-grip text.fing{ font:700 7.2px Inter,system-ui,sans-serif; fill:var(--bg, #141311); }
.tab-grip text.fing.held{ fill:var(--muted, #a49a8a); }
.tab-grip text.mark{ font:600 7px Inter,system-ui,sans-serif; fill:var(--muted2, #6f675b); }
.tab-grip text.mark.on{ fill:var(--ink, #ece7dc); }
.tab-grip text.base{ font:500 7.5px Inter,system-ui,sans-serif; fill:var(--muted2, #6f675b); }