/*
 * ireal-renderer CSS — adapted for allsolos.com
 * The i{} selector is scoped to #chord-chart to avoid conflicts with FontAwesome.
 */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@700&display=swap');

@font-face {
  font-family: 'iRealFont';
  src:
    url('fonts/iRealFont.ttf?un4b6y') format('truetype'),
    url('fonts/iRealFont.woff?un4b6y') format('woff'),
    url('fonts/iRealFont.svg?un4b6y#iRealFont') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* Scoped to #chord-chart so we don't override FontAwesome's i elements */
#chord-chart i {
  font-family: 'iRealFont' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Barline and music symbol glyphs — font-family must be explicit on :before */
.Single-Barline:before { font-family: iRealFont !important; content: "\e000"; }
.Double-Barline:before { font-family: iRealFont !important; content: "\e001"; }
.Final-Barline:before { font-family: iRealFont !important; content: "\e002"; }
.Reverse-Final-Barline:before { font-family: iRealFont !important; content: "\e003"; }
.Left-Repeat-Sign:before { font-family: iRealFont !important; content: "\e004"; }
.Right-Repeat-Sign:before { font-family: iRealFont !important; content: "\e005"; }
.Dal-Segno:before { font-family: iRealFont !important; content: "\e010"; }
.Da-Capo:before { font-family: iRealFont !important; content: "\e012"; }
.Fermata:before { font-family: iRealFont !important; content: "\e013"; }
.Segno:before { font-family: iRealFont !important; content: "\e014"; }
.Coda:before { font-family: iRealFont !important; content: "\e015"; }
.Codetta:before { font-family: iRealFont !important; content: "\e016"; }
.Root:before { font-family: iRealFont !important; content: "\e017"; }
.Root-Filled:before { font-family: iRealFont !important; content: "\e018"; }
.Repeated-Figure1:before { font-family: iRealFont !important; content: "\e020"; }
.Repeated-Figure2:before { font-family: iRealFont !important; content: "\e021"; }
.Repeated-Figure3:before { font-family: iRealFont !important; content: "\e022"; }
.Repeated-Figure4:before { font-family: iRealFont !important; content: "\e023"; }
.Measure-0-Low:before { font-family: iRealFont !important; content: "\e030"; }
.Measure-1-Low:before { font-family: iRealFont !important; content: "\e031"; }
.Measure-2-Low:before { font-family: iRealFont !important; content: "\e032"; }
.Measure-3-Low:before { font-family: iRealFont !important; content: "\e033"; }
.Measure-4-Low:before { font-family: iRealFont !important; content: "\e034"; }
.Measure-5-Low:before { font-family: iRealFont !important; content: "\e035"; }
.Measure-6-Low:before { font-family: iRealFont !important; content: "\e036"; }
.Measure-7-Low:before { font-family: iRealFont !important; content: "\e037"; }
.Measure-8-Low:before { font-family: iRealFont !important; content: "\e038"; }
.Measure-9-Low:before { font-family: iRealFont !important; content: "\e039"; }
.Measure-10-Low:before { font-family: iRealFont !important; content: "\e03a"; }
.Measure-11-Low:before { font-family: iRealFont !important; content: "\e03b"; }
.Measure-12-Low:before { font-family: iRealFont !important; content: "\e03c"; }
.Measure-0-High:before { font-family: iRealFont !important; content: "\e040"; }
.Measure-1-High:before { font-family: iRealFont !important; content: "\e041"; }
.Measure-2-High:before { font-family: iRealFont !important; content: "\e042"; }
.Measure-3-High:before { font-family: iRealFont !important; content: "\e043"; }
.Measure-4-High:before { font-family: iRealFont !important; content: "\e044"; }
.Measure-5-High:before { font-family: iRealFont !important; content: "\e045"; }
.Measure-6-High:before { font-family: iRealFont !important; content: "\e046"; }
.Measure-7-High:before { font-family: iRealFont !important; content: "\e047"; }
.Measure-8-High:before { font-family: iRealFont !important; content: "\e048"; }
.Measure-9-High:before { font-family: iRealFont !important; content: "\e049"; }
.Measure-10-High:before { font-family: iRealFont !important; content: "\e04a"; }
.Measure-11-High:before { font-family: iRealFont !important; content: "\e04b"; }
.Measure-12-High:before { font-family: iRealFont !important; content: "\e04c"; }

/* Renderer elements */
irr-char, irr-lbar, irr-rbar, irr-measure, irr-annot {
	font-family: iRealFont !important;
	margin-top: 0.2em;
}

.irr-small {
	font-stretch: condensed !important;
}

irr-chords {
	font-family: "Open Sans Condensed", sans-serif;
	box-sizing: border-box;
	line-height: normal;
	display: grid;
	grid-row-gap: 0.4em;
	grid-template-columns: repeat(16, 6.25%);
	width: calc(100% - 4ch);
	margin-left: 4ch;
	page-break-inside: avoid;
}

irr-cell {
	vertical-align: top;
	position: relative;
	white-space: nowrap;
}

irr-lbar { margin-right: 4px; }
irr-rbar { float: right; }
irr-char.Repeated-Figure2 { float: right; }
irr-char.Repeated-Figure3 { float: right; margin-right: -0.4em; }
irr-char.irr-root { padding-left: 1ch; }

irr-chord { overflow: visible; position: relative; }
irr-chord>sup, irr-chord>sub { vertical-align: baseline; position: relative; }
irr-chord>sup { margin-left: 0.05em; top: -0.6em; font-size: 0.6em; }
irr-chord>sup.irr-acc { margin-left: -0.1em; margin-right: -0.15em; top: -0.3em; }
irr-chord>sub { top: 0.15em; font-size: 0.6em; font-stretch: condensed; }
irr-chord>sub.irr-qual { top: -0.05em; font-size: 0.75em; margin-left: 0.05em; margin-right: -0.05em; }
irr-chord>sup+sub { margin-left: -0.3em; }

irr-chord>irr-chord { font-size: 0.6em; transform: translate(30%, -60%); position: absolute; }

irr-over { display: block; margin-top: -0.1em; margin-left: 1ch; font-size: 0.8em; }
irr-over>sup { font-size: 0.6em; margin-left: -0.2em; }
irr-chord>irr-chord>irr-over { display: inline; font-size: 0.8em; margin: 0; }
irr-over:before { content: "/"; }

irr-measure {
	font-size: 0.9em;
	font-weight: normal;
	position: absolute;
	transform: translate(-2.5ch, -0.15em);
	line-height: 1.05em;
	text-align: center;
}

irr-spacer { grid-column-start: 1; grid-column-end: 17; }

irr-section {
	float: left;
	position: absolute;
	top: -1em;
	left: -0.2em;
	font-family: sans-serif;
	font-size: 0.5em;
	font-weight: bold;
	margin-left: -3ch;
	padding: 0px 4px;
	background-color: #ccc;
}

irr-comment {
	position: absolute;
	left: 0;
	overflow: visible;
	font: bold 0.5em monospace;
	white-space: pre;
	letter-spacing: 0;
	top: 2.5em;
}
irr-cell.irr-comment { padding-bottom: 0.3em; }

irr-repeat {
	border-left: 1px solid black;
	border-top: 1px solid black;
	width: 200%;
	text-align: left;
	padding-left: 2px;
	font-size: 0.3em;
	font-weight: bold;
	position: absolute;
	left: 0;
	top: -0.8em;
}
irr-repeat:after { content: "."; }

irr-annot {
	font-size: 0.8em;
	position: absolute;
	top: -0.8em;
	left: 0.8em;
}

.No-Chord:before { font-family: iRealFont !important; font-size: 0.8em; content: "N.C."; }