/* /jam/ fretboard (2026-10-25): styles for /jam/fretboard.js. Site tokens only (route.css).
   Gear looks (2026-10-25): every colour reads an optional --fb-* token (set by /gear/gear.css) that falls back to the
   original site token, so with no gear theme the neck looks exactly as before. */
.fb{margin-top:18px;border:1px solid var(--border);border-radius:4px;background:var(--fb-surface,var(--bg));padding:14px 16px 12px;min-width:0}
.fb-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;min-height:30px}
.fb-now{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-width:0}
.fb-name{font:700 22px/1.2 'IBM Plex Sans',sans-serif;color:var(--text);overflow-wrap:anywhere}
.fb-par{font:14px/1.4 'IBM Plex Sans',sans-serif;color:var(--dim)}
.fb-over{font:600 12px/1.4 'IBM Plex Mono',monospace;letter-spacing:.4px;color:var(--mid)}
.fb-pill{align-self:center;font:700 10.5px/1 'IBM Plex Mono',monospace;letter-spacing:1.2px;text-transform:uppercase;padding:5px 9px;border-radius:999px;background:var(--fb-pill-bg,var(--orange));color:var(--fb-pill-ink,#f8f3df);white-space:nowrap}
.fb-pill[hidden],.fb-next[hidden],.fb-half[hidden]{display:none}
.fb-next{font:600 13px/1.4 'IBM Plex Sans',sans-serif;color:var(--tan)}
.fb-next .lab{margin-right:6px}
.fb-neck{margin-top:10px;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;border-radius:3px}
.fb-neck:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.fb-svg{display:block;width:100%;min-width:600px;height:auto}
.fb-svg .board{fill:var(--fb-board-paint,var(--fb-board,var(--soft)));stroke:var(--fb-board-edge,var(--border))}
.fb-svg .fret{stroke:var(--fb-fret,var(--mid));stroke-width:1.3}
.fb-svg .nut{fill:var(--fb-nut,var(--text))}
.fb-svg .str{stroke:var(--fb-str,var(--tan))}
.fb-svg .inl{fill:var(--fb-inlay,var(--border))}
.fb-svg .fn{font:600 10.5px 'IBM Plex Mono',monospace;fill:var(--fb-ink,var(--mid));text-anchor:middle}
.fb-svg .tn{font:600 9px 'IBM Plex Mono',monospace;fill:var(--fb-ink,var(--mid))}
.fb-svg text{pointer-events:none}
.fb-svg .n text,.fb-svg .ghn text{font:700 10.5px 'IBM Plex Mono',monospace;text-anchor:middle;letter-spacing:-.3px}
.fb-svg .d{stroke-width:1.4}
.fb-svg .s .d{fill:var(--fb-s-fill,var(--panel));stroke:var(--fb-s-stroke,var(--mid))}
.fb-svg .s text{fill:var(--fb-s-ink,var(--dim))}
.fb-svg .r .d{fill:var(--fb-root,var(--orange));stroke:var(--fb-root,var(--orange))}
.fb-svg .t3 .d,.fb-svg .t5 .d{fill:var(--fb-tone,var(--deep));stroke:var(--fb-tone-stroke,var(--fb-tone,var(--deep)))}
.fb-svg .t7 .d,.fb-svg .tx .d{fill:var(--fb-ext,var(--teal));stroke:var(--fb-ext-stroke,var(--fb-ext,var(--teal)))}
.fb-svg .ct text{fill:var(--fb-ct-ink,#f8f3df)}
.fb-svg .out .d{stroke:var(--fb-out,var(--text));stroke-dasharray:2.4 1.8;fill-opacity:.82}
.fb-svg .ring{fill:none;stroke:var(--fb-ring,var(--text));stroke-width:1.6}
.fb-svg .gh{fill:none;stroke:var(--fb-ghost,var(--orange));stroke-width:2.2;stroke-dasharray:3 2.2}
.fb-svg .ghn .gh{fill:var(--fb-ghost-fill,var(--bg))}
.fb-svg .ghn text{fill:var(--fb-ghost,var(--orange))}
.fb-svg .ct{transform-box:fill-box;transform-origin:center;transition:transform .08s ease-out}
.fb-neck.on .ct{transform:scale(1.13)}
.fb-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:10px}
.fb .seg{display:inline-flex;border:1px solid var(--border);border-radius:3px;overflow:hidden;background:var(--panel)}
.fb .seg button{font:600 11.5px/1 'IBM Plex Mono',monospace;letter-spacing:.3px;min-height:32px;padding:8px 10px;border:0;border-left:1px solid var(--border);background:transparent;color:var(--dim);cursor:pointer}
.fb .seg button:first-child{border-left:0}
.fb .seg button:hover{color:var(--deep);background:var(--soft)}
.fb .seg button[aria-pressed="true"]{background:var(--fb-seg-on-bg,var(--deep));color:var(--fb-seg-on-ink,#f8f3df)}
.fb .seg button:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.fb-key{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px;font:12px/1.5 'IBM Plex Sans',sans-serif;color:var(--dim)}
.fb-key span{white-space:nowrap}
.fb-key i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:5px;vertical-align:-1px;box-sizing:border-box}
.fb-key .k-r{background:var(--fb-root,var(--orange))}
.fb-key .k-t{background:var(--fb-tone,var(--deep));box-shadow:inset 0 0 0 1.5px var(--fb-tone-stroke,var(--fb-tone,var(--deep)))}
.fb-key .k-7{background:var(--fb-ext,var(--teal))}
.fb-key .k-s{background:var(--panel);border:1.5px solid var(--mid)}
.fb-key .k-ring{background:var(--panel);border:1.5px solid var(--mid);box-shadow:0 0 0 1.5px var(--panel),0 0 0 3px var(--text)}
.fb-key .k-out{background:var(--deep);border:1.5px dashed var(--text)}
.fb-key .k-gh{border:2px dashed var(--fb-ghost,var(--orange))}
@media (max-width:640px){
  .fb{padding:12px 10px 10px}
  .fb-svg{min-width:max(560px,calc(100% / .56))}
  .fb-name{font-size:19px}
  .fb-ctl{gap:8px}
  .fb .seg{display:flex;width:100%}
  .fb .seg button{flex:1 1 auto;padding:9px 4px;font-size:11px}
}
.fb .fb-half[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.fb-svg .ct{transition:none}.fb-neck.on .ct{transform:none}}