.fretboard-wrap { overflow-x: auto; padding: .35rem 0; }

.fretboard-surface {
  position: relative;
  min-width: 1180px;
  min-height: 342px;
  padding: 0;
  overflow: hidden;
  background: #f8f5ed;
  border: 1px solid #999;
  isolation: isolate;
}

.fretboard-surface::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background: url("../../assets/studio-guitar-fretboard.png?v=20260819-2dot") left center / 140% auto no-repeat;
  opacity: .52;
}

.fretboard-view {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
  background: rgba(255, 255, 255, .18);
}

.fretboard-view th, .fretboard-view td {
  position: absolute;
  left: var(--cell-left);
  top: var(--cell-top);
  width: var(--cell-width);
  height: var(--cell-height);
  box-sizing: border-box;
  min-width: 0;
  padding: .1rem .05rem;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  border: 1px solid rgba(40, 40, 40, .62);
  font-size: .76rem;
}

.fretboard-view th { background: rgba(255, 255, 255, .82); font-size: .78rem; }
.fretboard-view .string-scope-button { margin: 0; padding: .1rem .25rem; line-height: 1.1; font-size: .76rem; }
.fretboard-view th:first-child, .fretboard-view td:first-child { text-align: left; }
.fretboard-view td.fret-position { background: rgba(255, 255, 255, .66); text-shadow: 0 1px 0 #fff; }
.fretboard-view td.hidden-note, .fretboard-view td.not-in-scale { background: rgba(255, 255, 255, .25); }

.fretboard-diagnostic th, .fretboard-diagnostic td { border-color: rgba(40, 40, 40, .48); }
.fretboard-diagnostic th { background: rgba(255, 255, 255, .55); }
.fretboard-diagnostic td.fret-position { background: rgba(255, 255, 255, .16); }
.fretboard-diagnostic td.hidden-note { background: rgba(255, 255, 255, .08); }
.fretboard-diagnostic .open-position { z-index: 2; border-color: transparent; background: rgba(255, 255, 255, .58); }
.fretboard-diagnostic-surface::before { background-position: -5.25rem calc(50% - 5.25rem); background-size: 162% auto; }
.fretboard-diagnostic-surface[data-instrument="lapSteel"]::before {
  background-image: url("../../assets/daryl-electro-hawaiian-fretboard-photo.webp?v=20260827-1");
  background-position: center center;
  background-size: 100% 100%;
  transform: translateX(2.27%);
}
.fretboard-diagnostic-surface[data-instrument="bass"]::before {
  background-image: url("../../assets/rob-epiphone-viola-bass-fretboard.webp?v=20260829-1");
  background-position: center center;
  background-size: 100% 100%;
  filter: grayscale(1) contrast(1.08);
  opacity: .58;
}
.fretboard-view td.focused-position { background: #fff3a6 !important; }

/* Finished Fretboard Explorer presentation: calibrated cells remain as large
   hit targets, but their alignment scaffolding is visually removed. */
.fretboard-diagnostic { background: transparent; }
.fretboard-diagnostic th,
.fretboard-diagnostic td,
.fretboard-diagnostic th.open-position,
.fretboard-diagnostic td.open-position,
.fretboard-diagnostic td.fret-position,
.fretboard-diagnostic td.hidden-note {
  border-color: transparent;
  outline: none;
  background: transparent;
  box-shadow: none;
}
.fretboard-diagnostic th {
  background: transparent;
  overflow: visible;
  font-weight: bold;
  text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}
.fretboard-diagnostic td.fret-position { overflow: visible; cursor: pointer; }
.fretboard-diagnostic td.selected-note { outline: none; }
.fretboard-diagnostic .note-label {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center start;
  transform: translate(-50%, -50%);
  pointer-events: none;
  width: 2.34rem;
  box-sizing: border-box;
  padding-left: .58rem;
  color: #fff;
  font-size: 1.14rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 2px #111, 0 0 3px #111;
}
.fretboard-diagnostic .note-text {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: flex-start;
  isolation: isolate;
}
.fretboard-diagnostic .note-accidental {
  margin-left: .04em;
  font-size: .68em;
  transform: translateY(-.12em);
}
.fretboard-diagnostic td.hidden-note .note-label {
  color: transparent;
  text-shadow: none;
}
.fretboard-diagnostic td.selected-note .note-label {
  color: #063f75;
  font-weight: 800;
  text-shadow: none;
}
.fretboard-diagnostic td.selected-note .note-text::before,
.fretboard-diagnostic td.focused-position .note-text::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 2rem;
  height: 2rem;
  box-sizing: border-box;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45);
  content: "";
  transform: translate(-50%, -50%);
}
.fretboard-diagnostic td.focused-position {
  color: #111;
  background: transparent !important;
  box-shadow: none;
  font-weight: bold;
}
.fretboard-diagnostic td.focused-position .note-label {
  color: #111;
  text-shadow: none;
}
.fretboard-diagnostic td.focused-position .note-text::before {
  border: 3px solid #111;
  background: #fff3a6;
  box-shadow: none;
}
.fretboard-diagnostic td.suppressed-fret .note-label { display: none; }
.fretboard-diagnostic td[data-fret="12"] .note-label {
  transform: translate(calc(-50% + 12px), -50%);
}
.fretboard-diagnostic td[data-fret="14"] .note-label {
  transform: translate(calc(-50% + 6px), -50%);
}
.fretboard-diagnostic[data-instrument="lapSteel"] td[data-fret="12"] .note-label,
.fretboard-diagnostic[data-instrument="lapSteel"] td[data-fret="14"] .note-label {
  transform: translate(-50%, -50%);
}
.fretboard-diagnostic[data-instrument="bass"] td[data-fret="12"] .note-label,
.fretboard-diagnostic[data-instrument="bass"] td[data-fret="14"] .note-label {
  transform: translate(-50%, -50%);
}
.fretboard-diagnostic tbody .string-scope-button {
  color: #fff;
  text-shadow: -1px -1px 0 #111, 1px -1px 0 #111, -1px 1px 0 #111, 1px 1px 0 #111;
}
.fretboard-diagnostic tbody .string-scope-button.selected {
  color: #111;
  text-shadow: none;
}
.fretboard-diagnostic .string-scope-button {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
}
.fretboard-diagnostic .string-scope-button:hover { border-color: #777; }
.fretboard-diagnostic .string-scope-button.selected {
  border-color: #245a9a;
  outline: 2px solid #245a9a;
  outline-offset: -2px;
  background: #e3efff;
}

/* Scale Explorer keeps its musical role colors, translated from whole-cell
   fills into the shared circular fretboard marker language. */
.scale-fretboard td.scale-note .note-label { color: #222; text-shadow: none; }
.scale-fretboard td.scale-note .note-text::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 2rem;
  height: 2rem;
  box-sizing: border-box;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45);
  content: "";
  transform: translate(-50%, -50%);
}
.scale-fretboard td.root-note .note-text::before { border: 3px solid #163b1a; }
.scale-fretboard td.role-root .note-label { color: #163b1a; }
.scale-fretboard td.role-root .note-text::before { border-color: #88bf8c; background: #bfe8c2; }
.scale-fretboard td.role-third .note-label { color: #fff; }
.scale-fretboard td.role-third .note-text::before { border-color: #444; background: #666; }
.scale-fretboard td.role-fifth .note-label { color: #222; }
.scale-fretboard td.role-fifth .note-text::before { border-color: #aaa; background: #d8d8d8; }
.scale-fretboard td.blue-note .note-label { color: #003d73; }
.scale-fretboard td.blue-note .note-text::before { border-color: #7db7ec; background: #b9dcff; }
.scale-fretboard td.focused-position .note-label { color: #111; }
.scale-fretboard td.focused-position .note-text::before {
  border: 3px solid #111;
  background: #fff3a6;
  box-shadow: none;
}

@media (max-width: 700px) {
  .fretboard-surface { min-width: 1050px; }
}