/* Таблиця репертуару: успадковує шрифт і кольори теми. Акцент можна змінити через --er-accent. */
.er-repertoire {
	--er-accent: currentColor;
	--er-line: rgba(127, 127, 127, 0.25);
	width: 100%;
	margin: 1em 0 2em;
}

.er-search {
	display: block;
	width: 100%;
	max-width: 420px;
	margin: 0 0 1.25em;
	padding: 0.5em 0.75em;
	font: inherit;
	color: inherit;
	background: transparent;
	border: 1px solid var(--er-line);
	border-radius: 0;
}

.er-search:focus {
	outline: 2px solid var(--er-accent);
	outline-offset: 1px;
}

.er-table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	font: inherit;
	table-layout: fixed;
}

.er-table th,
.er-table td {
	border: 0;
	background: none;
	padding: 0.55em 1em 0.55em 0;
	vertical-align: top;
	text-align: left;
}

.er-table thead th {
	font-weight: 400;
	opacity: 0.6;
	font-size: 0.85em;
	border-bottom: 1px solid currentColor;
}

.er-table thead th:first-child,
.er-table .er-composer {
	width: 35%;
}

.er-table .er-letter th {
	padding-top: 1.4em;
	padding-bottom: 0.3em;
	font-size: 1.4em;
	font-weight: 500;
	line-height: 1;
	color: var(--er-accent);
	border-bottom: 1px solid var(--er-line);
}

.er-table .er-row td {
	border-bottom: 1px solid var(--er-line);
}

.er-table .er-composer {
	font-weight: 500;
}

.er-table .er-works ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.er-table .er-works li {
	margin: 0 0 0.25em;
	padding: 0;
}

.er-table .er-works li:last-child {
	margin-bottom: 0;
}

.er-table [hidden] {
	display: none;
}

/* На вузьких екранах — композитор над творами. */
@media (max-width: 600px) {
	.er-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}
	.er-table,
	.er-table tbody,
	.er-table tr,
	.er-table td,
	.er-table th {
		display: block;
		width: 100% !important;
	}
	.er-table .er-row td {
		border-bottom: 0;
		padding-right: 0;
	}
	.er-table .er-row {
		border-bottom: 1px solid var(--er-line);
		padding: 0.4em 0;
	}
	.er-table .er-composer {
		padding-bottom: 0.1em;
	}
	.er-table .er-works {
		padding-top: 0;
	}
	.er-table .er-row[hidden],
	.er-table .er-group[hidden] {
		display: none;
	}
}

/* ---------- Компактний вигляд у колонках (layout="columns", за замовчуванням) ---------- */
.er-cols {
	--er-size: 0.85em;
	--er-composer-color: #0000ff; /* композитори й літери */
	--er-work-color: #111;        /* твори */
	font-size: var(--er-size);
	line-height: 1.35;
	columns: var(--er-cols, 3) 9em; /* не більше N колонок, на вузьких екранах менше */
	column-gap: 1.5em;
}

.er-cols .er-group {
	display: contents;
}

.er-cols .er-letter {
	break-after: avoid;
	font-size: 1.5em;
	font-weight: 500;
	line-height: 1;
	color: var(--er-composer-color);
	margin: 0.9em 0 0.35em;
}

.er-cols .er-group:first-child .er-letter {
	margin-top: 0;
}

/* Літера + перший композитор: ніколи не розриваються між колонками. */
.er-cols .er-lead {
	break-inside: avoid;
	page-break-inside: avoid;
	-webkit-column-break-inside: avoid;
	display: block;
	overflow: hidden; /* змушує Safari/Chrome тримати блок цілим */
}

.er-cols .er-group:first-child .er-lead .er-letter {
	margin-top: 0;
}

.er-cols .er-entry {
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	overflow-wrap: break-word;
}

.er-cols .er-entry {
	break-inside: avoid;
	margin: 0 0 0.6em;
}

.er-repertoire .er-cols .er-composer {
	font-weight: 600;
	color: var(--er-composer-color);
}

.er-cols .er-works {
	list-style: none;
	margin: 0.1em 0 0;
	padding: 0;
}

.er-repertoire .er-cols .er-works,
.er-repertoire .er-cols .er-works li,
.er-repertoire .er-cols .er-works em,
.er-repertoire .er-cols .er-works i {
	color: var(--er-work-color);
}

.er-cols .er-works li {
	margin: 0;
	padding: 0;
}

.er-cols [hidden] {
	display: none !important;
}