/* Classfern Music keyword pages: fretted instruments (groups J and W). The fk-* rules are the same as group F's f-kw.css. */
.fk-answer{font-size:1.08rem;line-height:1.6;max-width:72ch;margin:6px 0 10px}
.fk-updated{font-size:.88rem;color:var(--muted);margin:4px 0 14px}
.fk-facts{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 18px;margin:14px 0;max-width:72ch}
.fk-facts h2{margin:4px 0 6px;font-size:1.15rem}
.fk-facts ul{margin:0;padding-left:1.2em}
.fk-facts li{margin:3px 0}
.fk-label{display:inline-block;font-size:.82rem;font-weight:650;padding:2px 8px;border-radius:8px;background:var(--brand-soft);color:var(--brand-2);border:1px solid var(--line);margin:2px 0}
.fk-btns{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.fk-btns .btn{min-width:44px}
.fk-btns .btn[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.fk-live{min-height:1.5em;font-weight:650;margin:6px 0}
.fk-scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.fk-scroll table{min-width:300px}
.fk-steps>li{margin:6px 0}
.fk-direct{font-weight:500}
/* Tabs */
.fb-tab{margin:10px 0 4px}
.fb-tab h3{margin:4px 0;font-size:1.05rem}
.fb-pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.95rem;line-height:1.4;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:6px 0;overflow-x:auto;max-width:100%;white-space:pre;color:var(--ink)}
.fb-pre span{border-radius:4px}
.fb-pre span.on{background:var(--accent);color:#111;font-weight:800;text-decoration:underline;text-decoration-thickness:2px;outline:2px solid var(--ink)}
.fb-words{font-size:.85rem;color:var(--muted);margin:2px 0 8px;max-width:72ch}
.fb-row{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-end;margin:8px 0}
.fb-row .mu-field{display:flex;flex-direction:column;gap:2px;font-size:.9rem}
.fb-row select{min-height:44px;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:10px;padding:6px 8px;max-width:100%}
.fb-row input[type=range]{min-width:160px}
/* Strumming pattern display */
.fb-pattern{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0;min-height:56px}
.fb-slot{display:flex;flex-direction:column;align-items:center;min-width:2.2em;padding:4px 2px;border:2px solid var(--line-2);border-radius:8px;position:relative}
.fb-slot b{font-size:1.5rem;line-height:1}
.fb-slot small{font-size:.75rem;color:var(--muted)}
.fb-miss b{color:var(--muted)}
.fb-slot.on{background:var(--accent-soft);border-color:var(--ink);border-width:3px}
.fb-slot.on::after{content:"▲";position:absolute;bottom:-1.1em;font-size:.7rem;color:var(--ink)}
.fb-now{font-weight:700;font-size:1.1rem;min-height:1.5em;margin:12px 0 4px}
.fb-arrows{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:nowrap;font-weight:700}
/* Chord charts */
.fb-chords{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px;margin:10px 0 14px;padding:0;list-style:none}
.fb-chords li{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 6px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.fb-chords .fx-box{width:88px;height:auto}
.fb-chords .btn{min-height:40px;padding:6px 10px;font-size:.88rem}
.fb-chords small{color:var(--muted);font-size:.78rem}
.fx-ln{stroke:var(--line-2);stroke-width:1.5}.fx-nut{stroke:var(--ink);stroke-width:4}.fx-sn,.fx-fn{fill:var(--muted);font-size:11px}.fx-box .fx-dot{fill:var(--ink)}.fx-box .fx-fi{fill:var(--surface);font-size:11px;font-weight:700}.fx-open{fill:none;stroke:var(--ink);stroke-width:1.5}.fx-cn{fill:var(--ink);font-size:13px;font-weight:800}.fx-ox{fill:var(--muted);font-size:12px}
/* Bass fretboard diagrams */
.fb-board{width:100%;max-width:340px;height:auto;display:block}
.fb-shapes{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin:10px 0;padding:0;list-style:none}
.fb-shapes li{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.fb-shapes h3{margin:2px 0 4px;font-size:1rem}
.fb-shapes p{margin:4px 0;font-size:.88rem}
.fb-nut{stroke:var(--ink);stroke-width:5}.fb-fl{stroke:var(--line-2);stroke-width:2}.fb-sl{stroke:var(--muted);stroke-width:1.5}
.fb-sn,.fb-fn{fill:var(--muted);font-size:12px}
.fb-root{fill:var(--brand);stroke:var(--ink);stroke-width:2}.fb-dot{fill:var(--ink)}
.fb-dl{fill:var(--surface);font-size:11px;font-weight:800}
.fb-shape-host{margin:8px 0;min-height:60px}
/* Notes chart (every cell is a button) */
.fb-notes{border-collapse:collapse;font-variant-numeric:tabular-nums}
.fb-notes th,.fb-notes td{border:1px solid var(--line);padding:2px;text-align:center}
.fb-notes thead th{font-size:.8rem;color:var(--muted);padding:4px}
.fb-notes tbody th{padding:2px 8px}
.fb-n{min-width:40px;min-height:40px;font:inherit;font-weight:650;background:var(--surface);color:var(--ink);border:1px solid transparent;border-radius:8px;cursor:pointer;padding:2px 4px}
.fb-n:hover{border-color:var(--line-2)}
.fb-n:focus-visible{outline:3px solid var(--brand);outline-offset:1px}
.fb-n.hit{outline:3px solid var(--ink);background:var(--accent-soft);font-weight:800}
.fb-n.hit::before{content:"★ "}
.fb-n small{display:block;font-size:.66rem;color:var(--muted);font-weight:400}
.fb-dotfret{background:var(--brand-soft)}
html.bz-kids .fk-btns .btn,html.bz-kids .fb-chords .btn,html.bz-kids .fb-tab .btn{font-size:1.15rem;min-height:56px;padding:12px 20px}
html.bz-kids .fk-live,html.bz-kids .fb-now{font-size:1.25rem}
html.bz-kids .fb-n{min-width:52px;min-height:52px;font-size:1.1rem}
html.bz-kids .fb-pre{font-size:1.15rem}
@media (max-width:600px){.fb-pre{font-size:.82rem;padding:8px}.fb-n{min-width:34px;min-height:38px;font-size:.9rem}}
@media print{.tool .fk-btns,.fb-row,.fk-kids,.privacy,.cards,.fb-chords .btn{display:none}.fb-pre{white-space:pre;border:1px solid #999}}
/* Music staff illustrations (shared pattern; the lead merges these into one file) */
:root{--staff-tip-bg:#e6f4f0;--staff-tip-line:#bfe1d8}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--staff-tip-bg:#16302b;--staff-tip-line:#28524a}}
:root[data-theme=dark]{--staff-tip-bg:#16302b;--staff-tip-line:#28524a}
.staff-art{margin:4px 0 12px;width:260px;max-width:100%;background:none;border:0;padding:0}
.staff-art img,.staff-tip img{display:block;width:100%;height:auto;background:none;border:0}
.staff-art--right{float:right;margin-left:20px}
.staff-art--left{float:left;margin-right:20px}
.prose h2{clear:both}
.staff-tip{display:flex;align-items:center;gap:14px;background:var(--staff-tip-bg);border:1px solid var(--staff-tip-line);border-radius:18px;padding:14px 18px 14px 0;margin:28px 0 20px 0;max-width:72ch;clear:both}
.staff-tip picture{flex:0 0 140px;max-width:140px;margin:-34px 0 -14px -10px}
.staff-tip div{flex:1 1 auto;min-width:0}
.staff-tip p{margin:4px 0}
.staff-tip__who{font-weight:700;color:var(--brand-2)}
@media (max-width:600px){.staff-art--right,.staff-art--left{float:none;margin:8px auto 14px;width:180px}.staff-tip{padding:12px 14px 12px 0}.staff-tip picture{flex-basis:96px;max-width:96px;margin:-24px 0 -12px -6px}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fb-strums td:last-child{white-space:nowrap}
.fx-ln,.fx-nut,.fb-fl,.fb-sl,.fb-nut{fill:none}.fx-box text,.fb-board text{text-anchor:middle}.fx-box .fx-fn{text-anchor:start}