/*
 * Fretboard & Chord Shapes (/tools/fretboard/) and its pictures (fretboard-ui.js, .fb-* classes).
 * Loaded after site.css; uses its tokens. Mobile first: pickers, neck and options in one column; the
 * neck scrolls sideways inside its own box when the page is narrower than the neck.
 * Text drawn in the SVGs uses --fb-ink, which contrasts with both the board and the dot fills in each theme.
 */

/* ------------------------------------------------------------------ colours of the pictures */
:root {
  --fb-board: #F1E6D3; --fb-board-edge: #8C7D68; --fb-fret: #8C7D68; --fb-nut: #5E554D; --fb-string: #6B5E50;
  --fb-inlay: #D5C3A6; --fb-ink: #1F1A17; --fb-ink-soft: #5E554D;
  --fb-note: #CFE3D2; --fb-note-edge: #1F4A35; --fb-root: #E8862A; --fb-root-edge: #A14A0A;
  --fb-dim-edge: #8C7D68; --fb-blocked: rgb(94 85 77 / .28); --fb-capo: #5E554D; --fb-pick: #0E7364;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fb-board: #1A2C20; --fb-board-edge: #84A088; --fb-fret: #84A088; --fb-nut: #D6CFC3; --fb-string: #B8AFA2;
    --fb-inlay: #2E4A36; --fb-ink: #F4EDE1; --fb-ink-soft: #B8AFA2;
    --fb-note: #2E6A49; --fb-note-edge: #BFE0C8; --fb-root: #A14A0A; --fb-root-edge: #F5A04F;
    --fb-dim-edge: #84A088; --fb-blocked: rgb(0 0 0 / .35); --fb-capo: #D6CFC3; --fb-pick: #4FD1BC;
  }
}
:root[data-theme="dark"] {
  --fb-board: #1A2C20; --fb-board-edge: #84A088; --fb-fret: #84A088; --fb-nut: #D6CFC3; --fb-string: #B8AFA2;
  --fb-inlay: #2E4A36; --fb-ink: #F4EDE1; --fb-ink-soft: #B8AFA2;
  --fb-note: #2E6A49; --fb-note-edge: #BFE0C8; --fb-root: #A14A0A; --fb-root-edge: #F5A04F;
  --fb-dim-edge: #84A088; --fb-blocked: rgb(0 0 0 / .35); --fb-capo: #D6CFC3; --fb-pick: #4FD1BC;
}

/* ------------------------------------------------------------------ pickers */
.fb-stage { text-align: left; padding: var(--s-4); }
@media (min-width: 640px) { .fb-stage { padding: var(--s-5) var(--s-6) var(--s-6); } }
.fb-pickers { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
.fb-inst select { width: 100%; max-width: 30rem; }
.fb-inst .hint { margin: 0; max-width: 46em; }
.fb-roots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.fb-roots legend, .fb-chords legend { grid-column: 1 / -1; }
.fb-roots .chip, .fb-chords .chip { display: flex; }
.fb-roots .chip span { flex: 1; min-width: 0; flex-direction: column; min-height: 52px; padding: 4px 2px; line-height: 1.1; border-radius: var(--r-md); }
.fb-roots .chip b { font-size: 1.0625rem; font-weight: 750; }
.fb-roots .chip small { font-size: .75rem; font-weight: 600; }
.fb-roots .chip.is-black input:not(:checked) + span { background: var(--surface-2); }
@media (min-width: 760px) { .fb-roots { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.fb-chords { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.fb-chords .chip span { flex: 1; min-width: 0; padding: 6px 4px; border-radius: var(--r-md); font-size: .9375rem; overflow-wrap: anywhere; }
@media (min-width: 640px) { .fb-chords { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fb-chords { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.fb-showrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3) var(--s-5); }
.fb-show { margin: 0; }
.fb-scale { flex: 1 1 16rem; min-width: 0; }
.fb-scale select { width: 100%; max-width: 30rem; }
/* Wide screens: instrument and "show" side by side, so the neck comes up sooner. */
@media (min-width: 900px) {
  .fb-pickers { grid-template-columns: minmax(16rem, 26rem) minmax(0, 1fr); column-gap: var(--s-6); align-items: end; }
  .fb-inst { grid-column: 1; grid-row: 1; }
  .fb-showrow { grid-column: 2; grid-row: 1; }
  .fb-roots, .fb-chords { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ result */
.fb-result { margin-top: var(--s-5); border-top: 1px solid var(--line); padding-top: var(--s-4); display: grid; grid-template-columns: minmax(0, 1fr); }
.fb-result > * { min-width: 0; }
.fb-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
@media (min-width: 900px) {
  .fb-result { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-5); align-items: end; }
  .fb-result > * { grid-column: 1 / -1; }
  .fb-result > .fb-head { grid-column: 1; }
  .fb-result > .fb-sub { grid-column: 1; }
  .fb-result > .fb-labels { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
.fb-title { margin: 0; font-size: var(--step-3); overflow-wrap: anywhere; }
.fb-respell { min-height: 44px; padding: 6px 16px; font-size: var(--step--1); box-shadow: 0 3px 0 var(--line-strong); }
.fb-sub { margin: var(--s-1) 0 var(--s-3); font-weight: 650; }
.fb-labels { margin: 0 0 var(--s-3); }
.fb-legend { margin: var(--s-2) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-3); }
.fb-li .fb-swatch { margin-right: 4px; vertical-align: -3px; }
.fb-swatch { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--line-strong); border-radius: 50%; vertical-align: middle; }
.fb-swatch.is-root { background: var(--fb-root); border-color: var(--fb-root-edge); border-radius: 4px; }
.fb-swatch.is-note { background: var(--fb-note); border-color: var(--fb-note-edge); }
.fb-trad { margin: var(--s-3) 0 0; padding: var(--s-2) var(--s-3); border-left: 4px solid var(--saffron-edge); background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.fb-picked { margin: var(--s-3) 0 0; min-height: 1.6em; font-weight: 600; font-variant-numeric: tabular-nums; }
.fb-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: var(--s-3); margin-top: var(--s-4); }
.fb-opt select { width: 100%; }
.fb-options .switch { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .fb-options { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); }
  .fb-opt select { width: auto; min-width: 9rem; }
}
.fb-capo-note { margin: var(--s-2) 0 0; }
.fb-text { margin-top: var(--s-4); }
.fb-text summary { cursor: pointer; font-weight: 650; min-height: 44px; display: inline-flex; align-items: center; }
.fb-text-list { margin: var(--s-2) 0 0; padding-left: 1.2em; display: grid; gap: var(--s-2); max-width: 60em; }

/* ------------------------------------------------------------------ the neck (fretboard-ui.js) */
.fb-neckbox { margin-top: var(--s-2); }
.fb-neck { position: relative; }
/* The box behind the neck has the board colour: the site's contrast check measures SVG text against it. */
.fb-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; border-radius: var(--r-sm); background: var(--fb-board); border: 1px solid var(--fb-board-edge); padding: 4px 0; }
/* pan-x pan-y: a swipe that starts on the neck may scroll the box sideways OR the page up and down. pinch-zoom keeps two-finger zoom working (WCAG 1.4.4); found by the independent re-check. */
.fb-svg { display: block; max-width: none; touch-action: pan-x pan-y pinch-zoom; user-select: none; -webkit-user-select: none; }
.fb-board { fill: var(--fb-board); }
.fb-blocked { fill: var(--fb-blocked); }
.fb-capo { fill: var(--fb-capo); opacity: .55; }
.fb-nut { fill: var(--fb-nut); }
.fb-nut.is-fretless { fill: var(--fb-fret); }
.fb-fret { stroke: var(--fb-fret); stroke-width: 2.5; }
.fb-pos { stroke: var(--fb-fret); stroke-width: 1; stroke-dasharray: 3 5; }
.fb-inlay { fill: var(--fb-inlay); }
.fb-string { stroke: var(--fb-string); }
.fb-sname { font: 700 14px var(--font-body); fill: var(--fb-ink); }
.fb-snum { font: 600 12px var(--font-body); fill: var(--fb-ink-soft); }
.fb-num { font: 600 12px var(--font-body); fill: var(--fb-ink-soft); font-variant-numeric: tabular-nums; }
.fb-num.is-marked { font-weight: 800; fill: var(--fb-ink); }
.fb-cell { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.fb-hit { fill: transparent; }
.fb-cell:hover .fb-hit { fill: rgb(127 127 127 / .12); }
.fb-dot { fill: var(--fb-note); stroke: var(--fb-note-edge); stroke-width: 2; }
.fb-cell.is-root .fb-dot, .fb-cell.is-shape-root .fb-dot { fill: var(--fb-root); stroke: var(--fb-root-edge); stroke-width: 2.5; }
.fb-cell.is-shape .fb-dot { stroke-width: 3.5; }
.fb-cell.is-shape-root .fb-dot { stroke-width: 3.5; }
.fb-cell.is-dim .fb-dot { fill: var(--fb-board); stroke: var(--fb-dim-edge); stroke-width: 1.5; stroke-dasharray: 3 3; }
.fb-ring { fill: none; stroke: none; }
.fb-cell.is-selected .fb-ring { stroke: var(--fb-pick); stroke-width: 3; }
.fb-cell:focus-visible .fb-hit { stroke: var(--focus); stroke-width: 3; fill: rgb(127 127 127 / .12); }
.fb-label { font: 700 13px var(--font-body); fill: var(--fb-ink); pointer-events: none; }
.fb-label.is-long { font-size: 11px; }
.fb-cell.is-dim .fb-label { fill: var(--fb-ink-soft); font-weight: 600; }
.fb-mark { stroke: var(--fb-ink); stroke-width: 2; display: none; pointer-events: none; }
.fb-mark.on { display: inline; }

/* ------------------------------------------------------------------ chord shapes */
.fb-shapes-sec { margin-top: var(--s-6); }
.fb-shapes-head h2 { margin: 0; }
.fb-shapes-head p { margin: var(--s-1) 0 var(--s-2); }
.fb-shapes-head h2:focus { outline: none; }
.fb-shapes-head h2:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.fb-order { margin: var(--s-2) 0 0; max-width: 46em; }
#shapes-caption { max-width: 46em; }
.fb-text-note { margin: var(--s-2) 0 0; }
.fb-empty { max-width: 46em; }
.fb-shapes { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .fb-shapes { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); } }
.fb-shape {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--s-2) var(--s-2) var(--s-3);
  border: 2px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text); min-height: 44px;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; cursor: pointer;
}
.fb-shape:hover { background: var(--surface-2); }
.fb-shape[aria-pressed="true"] { border-color: var(--saffron-edge); box-shadow: 0 0 0 3px var(--saffron-edge) inset; }
.fb-shape-pic { display: block; line-height: 0; }
.fb-shape-code { font-family: var(--font-mono); font-weight: 700; font-size: .9375rem; letter-spacing: .04em; }
.fb-shape-meta { font-size: .8125rem; color: var(--muted); text-align: center; line-height: 1.3; }
.fb-more-row { margin: var(--s-4) 0 0; }

.fb-diagram { display: block; overflow: visible; max-width: 100%; height: auto; }
.fb-d-fret { stroke: var(--fb-fret); stroke-width: 1.5; }
.fb-d-nut { stroke: var(--fb-nut); stroke-width: 6; }
.fb-d-string { stroke: var(--fb-string); stroke-width: 1.5; }
.fb-d-start { font: 700 13px var(--font-body); fill: var(--text); }
.fb-d-x { font: 700 16px var(--font-body); fill: var(--text); }
.fb-d-open { fill: none; stroke: var(--text); stroke-width: 2; }
.fb-d-dot { fill: var(--fb-note); stroke: var(--fb-note-edge); stroke-width: 2; }
.fb-d-dot.is-root { fill: var(--fb-root); stroke: var(--fb-root-edge); stroke-width: 2.5; }
.fb-d-barre { fill: var(--fb-note); stroke: var(--fb-note-edge); stroke-width: 2; opacity: .75; }
.fb-d-label { font: 700 12px var(--font-body); fill: var(--fb-ink); }
.fb-d-label.is-long { font-size: 10px; }
.fb-d-mark { stroke: var(--fb-ink); stroke-width: 1.5; }

/* Forced colours (Windows High Contrast and similar): system colours only, text readable on its own fill. */
@media (forced-colors: active) {
  .fb-dot, .fb-d-dot, .fb-d-barre { fill: Highlight !important; stroke: CanvasText !important; }
  .fb-label, .fb-d-label { fill: HighlightText !important; }
  .fb-mark, .fb-d-mark { stroke: HighlightText !important; }
  .fb-cell.is-dim .fb-dot { fill: Canvas !important; }
  .fb-cell.is-dim .fb-label { fill: CanvasText !important; }
  .fb-cell.is-dim .fb-mark { stroke: CanvasText !important; }
  .fb-fret, .fb-string, .fb-d-fret, .fb-d-string, .fb-d-nut, .fb-pos, .fb-d-open { stroke: CanvasText !important; }
  .fb-board, .fb-blocked { fill: Canvas !important; }
  .fb-nut, .fb-inlay, .fb-capo { fill: CanvasText !important; }
  .fb-sname, .fb-snum, .fb-num, .fb-d-start, .fb-d-x { fill: CanvasText !important; }
  .fb-cell.is-selected .fb-ring { stroke: CanvasText !important; }
}