/* RC-Music – gitaarakkoorden. Kleuren via variabelen; donker thema past bij com_rcmusic. */

.rcmusic-chords {
  --rc-text: #fff;
  --rc-muted: rgba(255, 255, 255, 0.62);
  --rc-line: rgba(255, 255, 255, 0.22);
  --rc-board: #3a2a1c;
  --rc-fret: #b9b2a6;
  --rc-nut: #efe6d2;
  --rc-string: #8d877c;
  --rc-string-on: #e8e1d3;
  --rc-marker: rgba(255, 255, 255, 0.18);
  --rc-inv-0: #ff4040;
  --rc-inv-1: #3fa7ff;
  --rc-inv-2: #3fcf7a;
  --rc-inv-3: #ffb020;
  --rc-dot-text: #fff;
  --rc-font: Verdana, "Open Sans", sans-serif;

  color: var(--rc-text);
  font-family: var(--rc-font);
  font-size: 14pt;
  line-height: 1.4;
}

.rcmusic-chords--light {
  --rc-text: #1d1d1d;
  --rc-muted: #5c5c5c;
  --rc-line: rgba(0, 0, 0, 0.18);
  --rc-board: #f1e4cf;
  --rc-fret: #9a8f80;
  --rc-nut: #4a3f33;
  --rc-string: #a49c91;
  --rc-string-on: #4b4540;
  --rc-marker: rgba(0, 0, 0, 0.14);
  --rc-inv-0: #d42020;
  --rc-inv-1: #1f6fd1;
  --rc-inv-2: #178a46;
  --rc-inv-3: #b86e00;
}

/* ---------- bediening ---------- */

.rcmusic-chords .rc-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.1rem;
  align-items: flex-end;
  font-size: 0.72em;
  margin-bottom: 0.8rem;
}

.rcmusic-chords .rc-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.rcmusic-chords .rc-field > span,
.rcmusic-chords .rc-field > legend {
  color: var(--rc-muted);
  font-size: 0.9em;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}

.rcmusic-chords select {
  min-width: 7.5em;
  font-family: inherit;
}

.rcmusic-chords .rc-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--rc-line);
  border-radius: 6px;
  overflow: hidden;
}

.rcmusic-chords .rc-segmented label {
  position: relative;
  margin: 0;
  cursor: pointer;
}

.rcmusic-chords .rc-segmented input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.rcmusic-chords .rc-segmented span {
  display: block;
  padding: 0.3em 0.7em;
  white-space: nowrap;
  border-right: 1px solid var(--rc-line);
}

.rcmusic-chords .rc-segmented label:last-child span {
  border-right: 0;
}

.rcmusic-chords .rc-segmented input:checked + span {
  background: var(--rc-text);
  color: var(--rc-board);
  font-weight: bold;
}

.rcmusic-chords .rc-segmented input:focus-visible + span {
  outline: 2px solid var(--rc-inv-1);
  outline-offset: -2px;
}

.rcmusic-chords .rc-check {
  display: inline-flex;
  gap: 0.4em;
  align-items: center;
  cursor: pointer;
  padding-bottom: 0.3em;
}

/* ---------- akkoordnaam en tonen ---------- */

.rcmusic-chords .rc-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 1.2rem;
  margin-bottom: 0.4rem;
}

.rcmusic-chords .rc-name {
  color: var(--rc-text);
  margin: 0;
}

.rcmusic-chords .rc-tones {
  display: flex;
  gap: 0.9em;
  margin: 0;
}

.rcmusic-chords .rc-tone {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25em;
}

.rcmusic-chords .rc-tone small {
  color: var(--rc-muted);
  font-size: 0.7em;
}

.rcmusic-chords .rc-tone.rc-deg-0 b {
  color: var(--rc-inv-0);
}

/* ---------- hals ---------- */

.rcmusic-chords .rc-neck-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.2rem;
}

.rcmusic-chords .rc-neck {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--rc-font);
  user-select: none;
  -webkit-user-select: none;
}

.rcmusic-chords .rc-board { fill: var(--rc-board); }
.rcmusic-chords .rc-fret { stroke: var(--rc-fret); stroke-width: 1.5; }
.rcmusic-chords .rc-nut { stroke: var(--rc-nut); stroke-width: 5; }
.rcmusic-chords .rc-marker { fill: var(--rc-marker); }
.rcmusic-chords .rc-string { stroke: var(--rc-string); opacity: 0.55; }
.rcmusic-chords .rc-string.is-active { stroke: var(--rc-string-on); opacity: 1; }

.rcmusic-chords .rc-strname,
.rcmusic-chords .rc-fretnum {
  fill: var(--rc-muted);
  font-size: 11px;
  text-anchor: middle;
}

.rcmusic-chords .rc-strname { text-anchor: start; }
.rcmusic-chords .rc-strname.is-active { fill: var(--rc-text); font-weight: bold; }
.rcmusic-chords .rc-fretnum.is-marked { fill: var(--rc-text); }

.rcmusic-chords .rc-ghost {
  fill: var(--rc-board);
  stroke: var(--rc-muted);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

.rcmusic-chords .rc-ghost.rc-deg-0 { stroke: var(--rc-inv-0); }

.rcmusic-chords .rc-ghost-label {
  fill: var(--rc-muted);
  font-size: 8.5px;
  text-anchor: middle;
}

.rcmusic-chords .rc-shape {
  cursor: pointer;
  outline: none;
  --rc-c: var(--rc-inv-0);
  opacity: 0.62;
  transition: opacity 0.15s;
}

.rcmusic-chords .rc-shape.rc-inv-1 { --rc-c: var(--rc-inv-1); }
.rcmusic-chords .rc-shape.rc-inv-2 { --rc-c: var(--rc-inv-2); }
.rcmusic-chords .rc-shape.rc-inv-3 { --rc-c: var(--rc-inv-3); }

.rcmusic-chords .rc-shape:hover,
.rcmusic-chords .rc-shape:focus-visible,
.rcmusic-chords .rc-shape.is-selected {
  opacity: 1;
}

.rcmusic-chords .rc-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 26;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: stroke;
}

.rcmusic-chords .rc-link {
  pointer-events: none;
  fill: none;
  stroke: var(--rc-c);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.35;
}

.rcmusic-chords .rc-dot {
  fill: var(--rc-c);
  stroke: var(--rc-board);
  stroke-width: 1.5;
}

.rcmusic-chords .rc-dot.is-root {
  stroke: var(--rc-dot-text);
  stroke-width: 2.5;
}

.rcmusic-chords .rc-dot-label {
  fill: var(--rc-dot-text);
  font-size: 10.5px;
  font-weight: bold;
  text-anchor: middle;
  pointer-events: none;
}

.rcmusic-chords .rc-shape.is-selected .rc-link { opacity: 0.7; stroke-width: 8; }
.rcmusic-chords .rc-shape.is-selected .rc-dot { r: 12; }

.rcmusic-chords .rc-shape:focus-visible .rc-link {
  stroke: var(--rc-text);
  opacity: 0.8;
}

/* ---------- legenda, uitleg, knoppen ---------- */

.rcmusic-chords .rc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  font-size: 0.72em;
  color: var(--rc-muted);
}

.rcmusic-chords .rc-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.rcmusic-chords .rc-swatch {
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  background: var(--rc-inv-0);
}

.rcmusic-chords .rc-swatch.rc-inv-1 { background: var(--rc-inv-1); }
.rcmusic-chords .rc-swatch.rc-inv-2 { background: var(--rc-inv-2); }
.rcmusic-chords .rc-swatch.rc-inv-3 { background: var(--rc-inv-3); }

.rcmusic-chords .rc-selected {
  margin: 0.6rem 0 0.4rem;
  font-size: 0.85em;
  min-height: 1.4em;
}

.rcmusic-chords .rc-play {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.rcmusic-chords .rc-hint,
.rcmusic-chords .rc-empty {
  color: var(--rc-muted);
  font-size: 0.68em;
  margin: 0.6rem 0 0;
}

/* ---------- ligging, ontbrekende omkeringen ---------- */

.rcmusic-chords select[data-rc="type"] { min-width: 12em; }

.rcmusic-chords .rc-nofifth,
.rcmusic-chords .rc-voicing-desc,
.rcmusic-chords .rc-missing {
  color: var(--rc-muted);
  font-size: 0.7em;
}

.rcmusic-chords .rc-voicing-desc { margin: 0 0 0.5rem; }
.rcmusic-chords .rc-missing { font-style: italic; }

/* omkeringsfilter: gekleurd streepje onder de knop */
.rcmusic-chords .rc-segmented label[class*="rc-inv-"] span {
  box-shadow: inset 0 -3px 0 var(--rc-inv-0);
}
.rcmusic-chords .rc-segmented label.rc-inv-1 span { box-shadow: inset 0 -3px 0 var(--rc-inv-1); }
.rcmusic-chords .rc-segmented label.rc-inv-2 span { box-shadow: inset 0 -3px 0 var(--rc-inv-2); }
.rcmusic-chords .rc-segmented label.rc-inv-3 span { box-shadow: inset 0 -3px 0 var(--rc-inv-3); }

/* ---------- grepen ---------- */

.rcmusic-chords .rc-boxes-title {
  color: var(--rc-text);
  font-size: 1em;
  margin: 1.2rem 0 0.5rem;
}

.rcmusic-chords .rc-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.6rem;
}

.rcmusic-chords .rc-box {
  --rc-c: var(--rc-inv-0);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.5rem 0.3rem 0.45rem;
  background: transparent;
  color: var(--rc-text);
  font: inherit;
  font-size: 0.7em;
  line-height: 1.25;
  border: 1px solid var(--rc-line);
  border-top: 4px solid var(--rc-c);
  border-radius: 6px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.rcmusic-chords .rc-box.rc-inv-1 { --rc-c: var(--rc-inv-1); }
.rcmusic-chords .rc-box.rc-inv-2 { --rc-c: var(--rc-inv-2); }
.rcmusic-chords .rc-box.rc-inv-3 { --rc-c: var(--rc-inv-3); }

.rcmusic-chords .rc-box:hover { border-color: var(--rc-muted); border-top-color: var(--rc-c); }

.rcmusic-chords .rc-box.is-selected {
  border-color: var(--rc-c);
  box-shadow: 0 0 0 1px var(--rc-c);
}

.rcmusic-chords .rc-box:focus-visible {
  outline: 2px solid var(--rc-text);
  outline-offset: 2px;
}

.rcmusic-chords .rc-box-svg { display: block; width: 100%; max-width: 132px; height: auto; margin-bottom: 0.2rem; }
.rcmusic-chords .rc-box-name { font-weight: bold; font-size: 1.15em; }
.rcmusic-chords .rc-box-inv,
.rcmusic-chords .rc-box-pos { color: var(--rc-muted); }

.rcmusic-chords .rc-box-fret,
.rcmusic-chords .rc-box-string { stroke: var(--rc-muted); stroke-width: 1; }
.rcmusic-chords .rc-box-nut { stroke: var(--rc-text); stroke-width: 4; }

.rcmusic-chords .rc-box-mute,
.rcmusic-chords .rc-box-start {
  fill: var(--rc-muted);
  font-size: 10px;
  font-family: var(--rc-font);
}

.rcmusic-chords .rc-box-mute { text-anchor: middle; }

.rcmusic-chords .rc-box-open {
  fill: none;
  stroke: var(--rc-text);
  stroke-width: 1.4;
}

.rcmusic-chords .rc-box-open.is-root { stroke: var(--rc-c); stroke-width: 2.2; }

.rcmusic-chords .rc-box-dot { fill: var(--rc-c); }
.rcmusic-chords .rc-box-dot.is-root { stroke: var(--rc-dot-text); stroke-width: 1.8; }

.rcmusic-chords .rc-box-label {
  fill: var(--rc-dot-text);
  font-size: 7.5px;
  font-weight: bold;
  font-family: var(--rc-font);
  text-anchor: middle;
}

/* ---------- 0.2: grepen per inversion ---------- */

.rcmusic-chords .rc-groups {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: 0.4rem;
}

.rcmusic-chords .rc-group-title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: var(--rc-text);
  font-size: 0.85em;
  margin: 0 0 0.5rem;
}

.rcmusic-chords .rc-group-title small {
  color: var(--rc-muted);
  font-weight: normal;
}

.rcmusic-chords .rc-box-barre {
  fill: var(--rc-c);
  opacity: 0.55;
}

.rcmusic-chords .rc-box-pos { font-size: 0.95em; }

.rcmusic-chords .rc-neck { --rc-c: var(--rc-inv-0); margin-top: 0.6rem; }
.rcmusic-chords .rc-neck.rc-inv-1 { --rc-c: var(--rc-inv-1); }
.rcmusic-chords .rc-neck.rc-inv-2 { --rc-c: var(--rc-inv-2); }
.rcmusic-chords .rc-neck.rc-inv-3 { --rc-c: var(--rc-inv-3); }

.rcmusic-chords .rc-neck .rc-dot { fill: var(--rc-c); stroke: var(--rc-board); stroke-width: 1.5; }
.rcmusic-chords .rc-neck .rc-dot.is-root { stroke: var(--rc-dot-text); stroke-width: 2.5; }
.rcmusic-chords .rc-neck .rc-dot.is-open { fill: var(--rc-board); stroke: var(--rc-c); stroke-width: 2.5; }
.rcmusic-chords .rc-neck .rc-dot-label.is-open { fill: var(--rc-text); }

.rcmusic-chords .rc-neck-barre {
  fill: var(--rc-c);
  opacity: 0.45;
}

.rcmusic-chords .rc-neck-mute {
  fill: var(--rc-muted);
  font-size: 15px;
  text-anchor: middle;
}

.rcmusic-chords .rc-play { margin-bottom: 0.2rem; }

/* ---------- 0.3: hals bovenaan, tabbladen per inversion ---------- */

.rcmusic-chords .rc-neck-wrap { margin-top: 0.2rem; }
.rcmusic-chords .rc-neck { margin-top: 0; }

.rcmusic-chords .rc-now {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  margin: 0.3rem 0 0.9rem;
}

.rcmusic-chords .rc-now .rc-selected { margin: 0; }
.rcmusic-chords .rc-now .rc-play { margin: 0; }

.rcmusic-chords .rc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  border-bottom: 1px solid var(--rc-line);
  margin-bottom: 0.7rem;
}

.rcmusic-chords .rc-tab {
  --rc-c: var(--rc-inv-0);
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 44px;
  padding: 0.35em 0.9em;
  margin-bottom: -1px;
  background: transparent;
  color: var(--rc-muted);
  font: inherit;
  font-size: 0.75em;
  border: 1px solid transparent;
  border-bottom: 3px solid transparent;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.rcmusic-chords .rc-tab.rc-inv-1 { --rc-c: var(--rc-inv-1); }
.rcmusic-chords .rc-tab.rc-inv-2 { --rc-c: var(--rc-inv-2); }
.rcmusic-chords .rc-tab.rc-inv-3 { --rc-c: var(--rc-inv-3); }

.rcmusic-chords .rc-tab:hover { color: var(--rc-text); }

.rcmusic-chords .rc-tab.is-active {
  color: var(--rc-text);
  font-weight: bold;
  border-color: var(--rc-line);
  border-bottom: 3px solid var(--rc-c);
}

.rcmusic-chords .rc-tab small { color: var(--rc-muted); font-weight: normal; }

.rcmusic-chords .rc-tab:focus-visible {
  outline: 2px solid var(--rc-text);
  outline-offset: -2px;
}

.rcmusic-chords .rc-panel .rc-boxes {
  grid-template-columns: repeat(auto-fill, minmax(130px, 160px));
}

@media (max-width: 600px) {
  .rcmusic-chords .rc-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .rcmusic-chords .rc-tab { padding: 0.35em 0.6em; white-space: nowrap; flex-shrink: 0; }
  .rcmusic-chords .rc-tab small { display: none; }
  .rcmusic-chords { font-size: 12pt; }
  .rcmusic-chords .rc-controls { gap: 0.5rem 0.8rem; }
}

@media print {
  .rcmusic-chords {
    --rc-text: #000;
    --rc-muted: #444;
    --rc-board: #fff;
    --rc-string-on: #000;
    --rc-fret: #666;
    --rc-nut: #000;
  }

  .rcmusic-chords .rc-controls,
  .rcmusic-chords .rc-play,
  .rcmusic-chords .rc-voicing-desc,
  .rcmusic-chords .rc-hint { display: none; }

  .rcmusic-chords .rc-neck-wrap { overflow: visible; }
  .rcmusic-chords .rc-box { break-inside: avoid; }
}