/* 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 19px string gap, numbers at 16px
   bold on a panel-colored tile, thin strings, a firmer bar line. */
.tab-string{ stroke:var(--muted2); stroke-width:1; }   /* (the strings a shade brighter than a panel line, so the staff reads) */
.tab-bar, .tab-dbar{ stroke:var(--muted); stroke-width:1.2; opacity:.7; }
/* a bar's tag (an example that is several variants, a bar each): small, italic, quiet */
.tab-tag{ fill:var(--muted); font:italic 500 12px Inter,system-ui,sans-serif; }
.tab-tag .tab-acc{ font-style:normal; }
/* a fill's own time named where its style is marked swung once and it is not ("straight", "12/8": the Chord and
   fill examples' lo-b5-7, js/tab.js bar.feelWord) */
.tab-feelword{ fill:var(--muted); font:italic 500 14px Inter,system-ui,sans-serif; }
.tab-palette{ fill:var(--muted); font:italic 500 13px Inter,system-ui,sans-serif; }   /* a fill card's word, what its notes are (fp-d) */
/* the Chord and fill examples' fills numbered and cited from the forms' boxes (lo-b5-8, js/tab.js bar.cardNo, f.cite):
   a fill's number before its first chord, light; a box's cite of them after its words, upright */
.tab-cardno{ fill:var(--muted); font:700 16px Inter,system-ui,sans-serif; }
/* (a fill's landing bar is drawn as any other since the owner, 2026-10-10: js/tab.js bar.land is no tint — the tint marks a form's gap alone) */
.tab-fill .tab-cite{ font-style:normal; opacity:.8; }
.tab-label{ fill:var(--muted); font:500 10px Inter,system-ui,sans-serif; }
.tab-barnum{ fill:var(--muted); font:500 9.5px Inter,system-ui,sans-serif; font-variant-numeric:tabular-nums; }
.tab-chord{ fill:var(--ink); font:600 16px Inter,system-ui,sans-serif; }
.tab-chord .tab-chord-shape{ fill:var(--muted); }
/* the time left to the player (a reference row's or a form's fill box): a grey box, its label in light italic — wherever tab is drawn, the jam's tabbed part included */
.tab-fill rect{ fill:#3a3631; }
/* (its label in Inter's true italic at 500, as the books set it — the owner's b1-b, "Real italics instead of semibold slants": Accept — carried to the screen (the owner's st-c, 2026-10-05, "The tab's words set as the books' are": Accept): every page that draws tab now loads Inter's italic, where before the browser slanted the upright 600, the loudest words on a card; the room is measured for the 600 (fitW), which the 500 only leaves more of) */
.tab-fill text{ fill:#d8d0c2; font:italic 500 17px Inter,system-ui,sans-serif; }
.tab-fill .tab-acc{ font-style:normal; }
/* (a Chord and fill form's box as its printout's — the owner's design review b5-a, 2026-10-04, "Fill bars as a pale
   staff wash: Accept": the box's grey a wash under the strings, which run on through it, its words on a knock-out
   of it; and an example's end engraved — b5-d, "Forms end in repeats, fills in final bars: Accept": a form's last
   bar line a repeat, a fill's a final double bar; js/tab.js fillWash and ends) */
.tab-wash, .tab-fill .knock{ fill:#3a3631; }
.tab-end, .tab-rep{ stroke:var(--muted); opacity:.7; }
.tab-end.thin, .tab-rep.thin{ stroke-width:1.2; }
.tab-end.thick, .tab-rep.thick{ stroke-width:4; }
.tab-rdot, .tab-rep-dot{ fill:var(--muted); opacity:.7; }
/* a repeat's count inside a form (DESIGN-RULES "Repeats inside a form") */
.tab-rep-count{ fill:var(--muted); font:italic 500 12px Inter,system-ui,sans-serif; }
/* a fill written in (the jam's New fills over an example, js/jam-fills.js): the same grey under the strings, its notes' tiles the box's */
.tab-note.fill rect{ fill:#3a3631; }
/* a rest over the strings: the block, the zigzag, the slash with its hooks */
.tab-rest{ fill:var(--muted); stroke:none; }
/* a chord's Roman numeral, set as theory books set them, in a serif, so I, II and III never read as bar lines — "A I" read as A and a bar line (the Chord and fill examples' cf1-d2 carried to the site's tab: the owner, 2026-10-04, "xd-a (Serif numerals on the site's tab): Accept"). Its grey and its size are kept, so it still fits the room the name's line keeps for it (a numeral's letters at 8 px and 7 more); a ♭ or ♯, which Times lacks, comes from the system face (system-ui before the generic serif), as the printouts' does: a serif fallback's ♭ is twice as wide and would run into the shape after it. It reaches every page that draws tab with this sheet, the rhythm reference's and the chord and fill examples' pages too, and the print view. */
/* (the serif the books' own, Source Serif 4 at 600 — the owner's b1-a, "Headings and numerals in a book serif": Accept, js/printouts.js BOOK_NUMERAL_FACE — carried to the screen, the owner's st-b, 2026-10-05, "Numerals in the books' Source Serif 4": Accept: one serif for a numeral wherever the site sets one, the books, the jam's chord chart and its tabbed part, every card; and loaded by each page that draws tab, so a phone without Times — Android's Noto Serif stood in — sets the same letters as a Mac. Times stays behind it while the font loads, and the ♭ and ♯ still come from the system face, as the books' do: Source Serif 4's Latin subset has neither) */
.tab-numeral{ fill:var(--muted); font:600 16px 'Source Serif 4','Times New Roman',Times,system-ui,serif; }
.tab-note rect{ fill:var(--panel); }
.tab-note text{ fill:var(--ink); font:700 16px Inter,system-ui,sans-serif; font-variant-numeric:tabular-nums; }
/* a muted note reads dimmer than a ringing one but still reads: two parts the page's muted tone to one its ink */
.tab-note.muted text{ fill:var(--muted); fill:color-mix(in srgb, var(--muted) 62%, var(--ink)); }
/* an "or" landing (js/tab.js, `n.or`): the other way to land drawn beside the landing's number, its own number grey, a small
   "or" between — one choice, never a note struck with the landing (Soul ballads decisions, 2026-10-13) */
.tab-or rect{ fill:var(--panel); }
.tab-or .tab-or-num{ fill:var(--muted); fill:color-mix(in srgb, var(--muted) 62%, var(--ink)); font:700 16px Inter,system-ui,sans-serif; font-variant-numeric:tabular-nums; }
.tab-or .tab-or-word{ fill:var(--ink); font:italic 600 13px Inter,system-ui,sans-serif; }
/* a dead note an engraved cross, not the letter x (js/tab.js XNOTE; the owner's design review lo-b3-11, 2026-10-05, "Dead
   notes in tab drawn as crosses: Accept"): drawn, its strokes a bold fret number's stem, in the colour its letter took —
   every rule that colours a note's letters colours its cross (the suite "The tab, engraved: a dead note a cross") */
.tab-note .tab-xnote{ fill:none; stroke:var(--ink); stroke-width:2.3; stroke-linecap:butt; }
.tab-note.muted .tab-xnote{ stroke:var(--muted); stroke:color-mix(in srgb, var(--muted) 62%, var(--ink)); }
/* (a hammered-on or pulled-off note reads like any other: the slur and the letter say how it is sounded) */
/* the techniques' band above the staff: the letters, the palm mute's dashed extent, the vibrato's wave */
.tab-tech{ fill:var(--muted); font:600 12px Inter,system-ui,sans-serif; }
.tab-tech.pm{ font-weight:700; }
.tab-pm{ fill:none; stroke:var(--muted); stroke-width:1.2; stroke-dasharray:4 3; }
/* (the vibrato's wave engraved, a smooth line cut with a broad pen, filled — a wide one's pen broader, js/tab.js wave; the
   owner's design review lo-b3-6, 2026-10-05, "An engraved vibrato line: Accept" — its hairline outline rounding its points) */
.tab-wave{ fill:var(--muted); stroke:var(--muted); stroke-width:.4; stroke-linejoin:round; }
.tab-bend{ fill:var(--ink); stroke:none; }   /* the bend's curve up to its arrowhead, engraved: filled, swelling from a hairline (lo-b3-12, js/tab.js bendD) */
.tab-bend-head{ fill:var(--ink); }
.tab-slur{ fill:var(--ink); stroke:var(--ink); stroke-width:.35; stroke-linejoin:round; }   /* the slur between a hammered-on or pulled-off pair */
/* 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:4.2; }   /* a beam as engraving weighs it, three stems wide (js/tab.js BEAM_T; the owner's b3-d, 2026-10-04) */
.tab-flag{ fill:var(--ink); stroke:none; }   /* a flag, drawn as engraving cuts one: full at the stem, tapering to its tip */
.tab-dot{ fill:var(--ink); }
.tab-stacc{ fill:var(--ink); }   /* the staccato dot under a stem: the note cut short */
.tab-trem{ stroke:var(--ink); stroke-width:2; stroke-linecap:round; }   /* the tremolo's slashes across a stem */
.tab-tie{ fill:var(--ink); stroke:var(--ink); stroke-width:.35; stroke-linejoin:round; }   /* a note held into the next value */
.tab-tuplet{ fill:var(--muted); font:italic 600 11px Inter,system-ui,sans-serif; }   /* the triplet's 3 over a beat divided in three */
/* (rhythm tab's triplet under its beam: an upright 3 in a hairline bracket, clear of the degrees under it — js/tab.js, T113) */
.tab-trip .tab-tuplet{ font-style:normal; font-size:8px; }
.tab-trip-br{ fill:none; stroke:var(--ink); stroke-width:.8; }
/* (the degree row's marks under a fill card: the landing's ring and a blue note's box — js/tab.js, T113) */
.tab-deg-ring{ fill:none; stroke:var(--ink); stroke-width:1.15; }
.tab-deg-box{ fill:none; stroke:var(--ink); stroke-width:.85; }
.tab-head{ fill:var(--ink); fill-rule:evenodd; stroke:none; }   /* a hollow head: the oval round its counter, thick at the sides, thin at the ends */

/* 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(--muted, #a49a8a); 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 16px Inter,system-ui,sans-serif; fill:var(--muted, #a49a8a); }

/* the pick's direction under the strings (⊓ down, ∨ up), and what a bar
   was written from, after its chord */
.tab-stroke{ fill:var(--muted, #a49a8a); stroke:none; }   /* filled: the down-bow's heavy bar on thin legs, the up-bow's V firm down, light up */
.tab-stroke.air{ opacity:.55; }
/* a form's drum cue (js/tab.js example.drum) */
.tab-drum-line{ stroke:#b4b4b4; stroke-width:1; }
.tab-drum-x{ fill:none; stroke:var(--muted, #8c8c8c); stroke-width:1.5; stroke-linecap:round; }
.tab-drum circle{ fill:var(--muted, #8c8c8c); stroke:none; }
.tab-drum-word{ fill:var(--muted, #8c8c8c); font-style:italic; font-size:12px; }
.tab-paren{ fill:none; stroke:var(--muted, #a49a8a); stroke-width:1.2; stroke-linecap:round; opacity:.55; }   /* a missed stroke: the hand's direction in brackets, where it passes over the strings */
.tab-accent{ fill:none; stroke:var(--ink); stroke-width:1.25; stroke-linejoin:miter; stroke-miterlimit:8; stroke-linecap:butt; }   /* an accent: the > under a stem, engraved wide and flat, its point mitred sharp (lo-b3-9, js/tab.js ACCENT_HALF) */
.tab-note.slash path{ fill:var(--ink); }   /* a strumming chart's slash (`staff: 'slash'`) */
.tab-shead{ fill:var(--ink); }   /* a slash chart's value tied into: its own slash, unstruck (lo-b3-5) */
.tab-note.slash text{ fill:var(--ink); font:700 19px Inter,system-ui,sans-serif; }   /* ...and its x, a dead strum */
.tab-role{ font:500 16px Inter,system-ui,sans-serif; fill:var(--muted, #a49a8a); }
/* a bar left to the player: what goes there — "your walk-up" — written
   across the strings in place of the notes, on a box that hides them */
.tab-blank rect{ fill:var(--panel, #1a1816); stroke:var(--a, #e0a84a); stroke-width:1; stroke-dasharray:4 3; }
.tab-blank text{ font:italic 500 15px Inter,system-ui,sans-serif; fill:var(--a, #e0a84a); }
/* 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.root{ fill:var(--muted, #a49a8a); stroke:var(--ink, #ece7dc); stroke-width:.8; }
/* the swing marking after a fill's first chord (bar.swing), drawn at about half size: its strokes thickened to read */
.tab-swing{ color:var(--ink); }   /* (the book's marks drawn in currentColor where a page sets GT.tab.house.feelMarks) */
.tab-swing .tab-stem{ fill:none; stroke:var(--ink); stroke-width:2.6; stroke-linecap:round; }
.tab-swing .tab-flag{ fill:var(--ink); stroke:var(--ink); stroke-width:1; stroke-linejoin:round; }
.tab-swing .tab-beam{ stroke:var(--ink); stroke-width:5.4; }
.tab-swing .tab-bracket{ fill:none; stroke:var(--ink); stroke-width:2.2; }
.tab-swing .tab-tuplet{ fill:var(--ink); font:italic 700 18px Inter,system-ui,sans-serif; }
.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); font-variant-numeric:tabular-nums; }
.tab-grip text.fing.held{ fill:var(--muted, #a49a8a); }
.tab-grip .mark-x{ fill:none; stroke:var(--muted, #a49a8a); stroke-width:.9; stroke-linecap:round; }   /* a string left out: a drawn cross */
.tab-grip circle.mark-o{ fill:none; stroke:var(--muted, #a49a8a); stroke-width:.9; }   /* an open string: a drawn ring the cross's size */
.tab-grip circle.mark-o.struck{ stroke:var(--ink, #ece7dc); }
.tab-grip text.base{ font:500 7.5px Inter,system-ui,sans-serif; fill:var(--muted, #a49a8a); font-variant-numeric:tabular-nums; }