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

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

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

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

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

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

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

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

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

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

.rcmusic-triads .rt-segmented label {
  position: relative;
  margin: 0;
  cursor: pointer;
}

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

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

.rcmusic-triads .rt-segmented label:last-child span {
  border-right: 0;
}

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

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

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

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

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

.rcmusic-triads .rt-name {
  color: var(--rt-text);
  margin: 0;
}

.rcmusic-triads .rt-tones {
  display: flex;
  gap: 0.9em;
  margin: 0;
}

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

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

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

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

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

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

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

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

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

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

.rcmusic-triads .rt-ghost.rt-deg-0 { stroke: var(--rt-inv-0); }

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

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

.rcmusic-triads .rt-shape.rt-inv-1 { --rt-c: var(--rt-inv-1); }
.rcmusic-triads .rt-shape.rt-inv-2 { --rt-c: var(--rt-inv-2); }

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

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

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

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

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

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

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

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

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

.rcmusic-triads .rt-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(--rt-muted);
}

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

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

.rcmusic-triads .rt-swatch.rt-inv-1 { background: var(--rt-inv-1); }
.rcmusic-triads .rt-swatch.rt-inv-2 { background: var(--rt-inv-2); }

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

.rcmusic-triads .rt-play {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

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

@media (max-width: 600px) {
  .rcmusic-triads { font-size: 12pt; }
  .rcmusic-triads .rt-controls { gap: 0.5rem 0.8rem; }
}

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

  .rcmusic-triads .rt-controls,
  .rcmusic-triads .rt-play,
  .rcmusic-triads .rt-hint { display: none; }

  .rcmusic-triads .rt-neck-wrap { overflow: visible; }
}