/**
 * Chord-name typography — site-wide <sup> rules.
 *
 * Apply to any container that renders chord tokens (Nashville degrees
 * or letter chords with accidentals). Default browser <sup> is unreadable
 * at the 12–13px label scale; these rules shrink to 0.8em with a tight
 * line-height so the numeral / letter baseline isn't pushed around.
 *
 * Apply via:
 *   • .pg-chord-name              — generic single-chord render container
 *   • .pg-chord-chips             — filter-chip / pill groups (Guide etc.)
 *   • #chords-display             — FR-page chord display (legacy ID)
 *   • #instrumental-chords-display — Instrumental-page chord display
 *   • .chord-row                   — above-line chord rows in FR page
 *
 * Rule reference: feedback_chord_typography_rule.md
 */
.pg-chord-name sup,
.pg-chord-chips sup,
#chords-display sup,
#instrumental-chords-display sup,
.chord-row sup {
    font-size: 0.8em;
    line-height: 0;
    vertical-align: super;
    position: relative;
    top: 0;
}

/* Accidental glyphs (♭ / ♯) — INLINE Unicode glyphs. Force a serif font:
   most sans-serif system fonts (and especially the macOS musical-symbol
   fallback) draw ♭ as a tiny raised glyph that reads as superscript;
   serif fonts (Times, Georgia) draw it at baseline at proper size.

   No negative side-margin on the flat: a previous tuning used
   margin:0 -0.14em to tighten the flat against the letter, which read
   nicely with macOS Times metrics but collided with the letter glyph
   on Windows Chrome/Edge (Windows Times has tighter side-bearings).
   Both accidentals now rely on the font's natural side-bearings plus
   a hairline positive margin for breathing room. */
.pg-chord-acc {
    font-family: 'Times New Roman', Times, Georgia, serif !important;
    line-height: 1 !important;
    vertical-align: baseline !important;
    display: inline-block !important;
}
.pg-chord-acc--flat {
    font-size: 1.05em !important;
    margin: 0 0.02em !important;
}
.pg-chord-acc--sharp {
    font-size: 1.15em !important;
    margin: 0 0.06em !important;
}
/* Inline lyric chords ([b7], [Bb]) — render in the same monospace
   font as the above-line chord row so the negative side-margin on the
   flat lands in the mono cell's built-in side-padding rather than
   colliding with the letter glyph in proportional body fonts. Without
   this, the flat reads correctly on macOS with Times metrics but jams
   against the letter on systems where the proportional body font has
   tighter side-bearings (Linux, Windows, non-US locales). */
.pg-chord-inline {
    font-family: 'Fira Mono', ui-monospace, monospace;
}
#chords-display .pg-chord-inline .pg-chord-acc--flat {
    font-size: 0.98em;
}
#chords-display .pg-chord-inline .pg-chord-acc--sharp {
    font-size: 1.05em;
}

/* Key fields (instrumental sidebar Key, FR sidebar Recording Key,
   chord-chart meta KEY): force any <sup> to render inline. Some
   data paths emit <sup>b</sup> directly (skipping pg_render_chord_token);
   without this, the flat sign reads as a tiny raised glyph next to a
   full-size letter. !important so we beat the generic .pg-chord-name sup
   {vertical-align: super} rule above. */
.pg-inst-key sup,
.pg-cm-meta-key-val sup,
.pg-fr-fact-value sup {
    font-size: 1em !important;
    line-height: 1 !important;
    vertical-align: baseline !important;
    position: static !important;
    top: auto !important;
}