/* Chord diagrams drawn by Svg_chord. The page themes them with these variables:
   --chord-ink        marks, nut, text (default: the text colour)
   --chord-quiet      the fret label, the x above a string not played
   --chord-paper      the background, around a mark drawn inside another
   --chord-highlight  the turn being looked at
   --chord-turn       the later turns and the optional notes: their marks, rows
                      and names (default: the ink)
   --chord-finger     the fingering rows (default: the ink)
   --chord-root, --chord-third, --chord-fifth, --chord-seventh, --chord-other
                      a degree under the grid, by its role (default: the ink)
   --chord-font       notes, degrees and names
   --chord-scale      the size of one drawing unit
   and by the weights and sizes below, in drawing units or as factors.
   Each figure sets --chord-units, its width, and --chord-margin, the low
   string's distance from its left edge, both in drawing units. */

:root {
  --chord-line: 0.9;       /* strings, frets, the x above a string not played */
  --chord-nut: 3.5;        /* the nut: Chord_geometry.Size.nut, the room the layout leaves it */
  --chord-stroke: 1.3;     /* a mark's outline: Chord_geometry.Size.stroke, which a ring is fitted to */
  --chord-label-halo: 5;   /* the paper under the fret label, wide enough to fill its figures' counters */
  --chord-tie: 1.8;        /* a tie's thickness at its middle, drawn as with a nib and fine at its ends: read by the page's drawing */
  --chord-halo: 0.75;      /* the paper around a mark drawn over a cross's arms */
  --chord-mark-scale: 1;   /* a mark on the grid, about its centre */
  --chord-open-scale: 1;   /* an open string's ring */
  --chord-muted-scale: 1;  /* the x above a string not played */
  --chord-finger-gap: 5;   /* between the fingering rows and the notes: Chord_geometry.Size.text_gap, which the page's layout reads */
}

.chord-drawing {
  --chord-drawn-ink: var(--chord-ink, currentColor);
  margin: 0;
  width: calc(var(--chord-units) * var(--chord-scale, 1.25px));
  font-family: var(--chord-font, inherit);
  color: var(--chord-ink, currentColor);
}

.chord-grid {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.chord-grid text {
  fill: var(--chord-ink, currentColor);
  font-family: var(--chord-font, inherit);
  dominant-baseline: central;
}

.chord-grid .label { text-anchor: middle; }
.chord-grid .fingers text { fill: var(--chord-finger, var(--chord-ink, currentColor)); }
.chord-grid .degrees .root { fill: var(--chord-root, var(--chord-ink, currentColor)); }
.chord-grid .degrees .third { fill: var(--chord-third, var(--chord-ink, currentColor)); }
.chord-grid .degrees .fifth { fill: var(--chord-fifth, var(--chord-ink, currentColor)); }
.chord-grid .degrees .seventh { fill: var(--chord-seventh, var(--chord-ink, currentColor)); }
.chord-grid .degrees .other { fill: var(--chord-other, var(--chord-ink, currentColor)); }
/* Ringed with paper, so that a tie from the chord before, which runs under
   it, does not strike it through. */
.chord-grid .fret-label {
  text-anchor: end; fill: var(--chord-quiet, GrayText);
  paint-order: stroke; stroke: var(--chord-paper, Canvas); stroke-width: calc(var(--chord-label-halo) * 1px); stroke-linejoin: round;
}
.chord-grid .string,
.chord-grid .fret,
.chord-grid .nut { stroke: var(--chord-ink, currentColor); }
.chord-grid :is(.string, .fret) { stroke-width: calc(var(--chord-line) * 1px); }
.chord-grid .nut { stroke-width: calc(var(--chord-nut) * 1px); }
.chord-grid .muted {
  stroke: var(--chord-quiet, GrayText); stroke-linecap: round;
  stroke-width: calc(var(--chord-line) / var(--chord-muted-scale) * 1px);
  scale: var(--chord-muted-scale); transform-box: fill-box; transform-origin: center;
}

/* A mark on the grid is scaled about its centre, its outline kept at its
   weight; a turn's marker beside its names or its row of notes is not. */
.chord-drawing .mark { --mark-scaled: 1; }
.chord-grid > .mark {
  --mark-scaled: var(--chord-mark-scale);
  scale: var(--mark-scaled); transform-box: fill-box; transform-origin: center;
}
.chord-grid > .mark.open { --mark-scaled: var(--chord-open-scale); }

.chord-drawing .ink {
  stroke: var(--chord-ink, currentColor); stroke-linecap: round; stroke-linejoin: round;
  stroke-width: calc(var(--chord-stroke) / var(--mark-scaled) * 1px);
}
.chord-drawing .ink.filled { fill: var(--chord-ink, currentColor); stroke: none; }
.chord-drawing .tie { fill: var(--chord-ink, currentColor); stroke: none; }
.chord-drawing .ink.hollow { fill: var(--chord-paper, Canvas); }
.chord-drawing .halo {
  stroke: var(--chord-paper, Canvas); fill: var(--chord-paper, Canvas);
  stroke-width: calc((var(--chord-stroke) + 2 * var(--chord-halo)) / var(--mark-scaled) * 1px);
}

.chord-names {
  list-style: none;
  margin: 0.3em 0 0;
  padding: 0;
}

.chord-names .entry {
  display: flex;
  gap: 0.4em;
  align-items: flex-start;
  overflow-wrap: anywhere;
  color: var(--chord-ink, currentColor);
}

.chord-names .name { display: block; }
.chord-names .chord-marker { flex: none; width: 0.8em; height: 1lh; }
.chord-names .entry[tabindex] { cursor: default; border-radius: 0.2em; }
.chord-names .entry:focus-visible { outline: 2px solid var(--chord-highlight, Highlight); outline-offset: 1px; }

/* The later turns and the optional notes, a line inside the chord. */
.chord-drawing :is(.turn-cross, .turn-square, .turn-triangle, .turn-optional) { --chord-ink: var(--chord-turn, var(--chord-drawn-ink)); }

/* Looking at a turn: its marks, rows and names stand out, the other turns fade. */
.chord-drawing:has(.entry.turn:is(:hover, :focus)) .turn { opacity: 0.3; }

.chord-drawing:has(.entry.turn-dot:is(:hover, :focus)) .turn-dot,
.chord-drawing:has(.entry.turn-cross:is(:hover, :focus)) .turn-cross,
.chord-drawing:has(.entry.turn-square:is(:hover, :focus)) .turn-square,
.chord-drawing:has(.entry.turn-triangle:is(:hover, :focus)) .turn-triangle {
  opacity: 1;
  --chord-ink: var(--chord-highlight, Highlight);
  --chord-finger: var(--chord-highlight, Highlight);
}
/* The optional notes are looked at with the dots they join. */
.chord-drawing:has(.entry.turn-optional:is(:hover, :focus)) :is(.turn-dot, .turn-optional) {
  opacity: 1;
  --chord-ink: var(--chord-highlight, Highlight);
  --chord-finger: var(--chord-highlight, Highlight);
}
.chord-names.later { margin-top: 0; }
.chord-names .note { font-size: 0.8em; color: var(--chord-quiet, GrayText); overflow-wrap: anywhere; }