/* Repertório: tabs + tabela responsiva. Container query no wrapper (não depende do viewport). */
.gpc-rep {
	--gpc-rep-head-btn: var(--primary-main, #0a3160);
	--gpc-rep-head-bg: var(--secondary, #0a3160);
	--gpc-rep-head-fg: var(--white, #fff);
	--gpc-rep-line: color-mix(in srgb, currentColor 18%, transparent);
	--gpc-rep-muted: color-mix(in srgb, currentColor 62%, transparent);
	--gpc-rep-hover: color-mix(in srgb, var(--gpc-rep-head-bg) 8%, transparent);
	--gpc-rep-pad: 1.25rem;
	container: gpc-rep / inline-size;
	width: 100%;
}

/* Barra: tabs à esquerda, legenda à direita */
.gpc-rep__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1.5rem;
	margin-bottom: 1.25rem;
	border-top: 1px solid var(--gpc-rep-line);
	padding-top: 20px;
}
.gpc-rep__tabs { display: flex; gap: .25rem; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
.gpc-rep__tabs[hidden] { display: none; }
.gpc-rep__tab {
	flex: 0 0 auto;
	margin: 0;
	padding: 0.625rem 1.375rem;
	border: 1px solid var(--gpc-rep-head-btn);
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .15s, color .15s;
}
.gpc-rep__tab:hover,
.gpc-rep__tab[aria-selected="true"] { background: var(--gpc-rep-head-btn); color: var(--gpc-rep-head-fg); }
.gpc-rep__tab:focus-visible,
.gpc-rep__panel:focus-visible { outline: 2px solid var(--gpc-rep-head-bg); outline-offset: 2px; }

.gpc-rep__legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0 0 0 auto; padding: 0; list-style: none; color: var(--gpc-rep-muted); }
.gpc-rep__legend li { display: inline-flex; align-items: center; gap: .45rem; margin: 0; }

.gpc-rep__icon { flex: 0 0 auto; color: var(--secondary); }
.gpc-rep__icon--done { color: var(--primary); }

/* Painéis: sem JS ficam todos visíveis, empilhados, cada um com o seu título */
.gpc-rep__panel[hidden] { display: none; }
.gpc-rep__panel + .gpc-rep__panel { margin-top: 2.5rem; }
.gpc-rep--tabs .gpc-rep__panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Tabela (desktop) */
.gpc-rep__table { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0; border: 0; }
.gpc-rep__table th,
.gpc-rep__table td { padding: 1rem var(--gpc-rep-pad); text-align: left; vertical-align: top; border: 0; background: none; }
.gpc-rep__table thead th {
	background: var(--gpc-rep-head-bg);
	color: var(--gpc-rep-head-fg);
	font-size: .8em;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding-block: 1.1rem;
}
.gpc-rep__table thead th:nth-child(1) { width: 26%; }
.gpc-rep__table thead th:nth-child(2) { width: 38%; }

.gpc-rep__table tbody { border-bottom: 1px solid var(--gpc-rep-line); }
.gpc-rep__table tbody tr + tr td { border-top: 1px solid var(--gpc-rep-line); }
.gpc-rep__composer {
	color: var(--gpc-rep-head-bg);
	font-size: .8em;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	vertical-align: top;
	border-bottom: 0;
}

.gpc-rep__role-main { display: inline-flex; align-items: center; gap: .6rem; }
.gpc-rep__note { display: block; margin-top: .25rem; padding-left: 1.45rem; color: var(--gpc-rep-muted); }

/* Mobile: cada compositor vira um cartão; obra/papel empilham com o rótulo da coluna */
@container gpc-rep (max-width: 640px) {
	.gpc-rep__table,
	.gpc-rep__table tbody,
	.gpc-rep__table tr,
	.gpc-rep__table th,
	.gpc-rep__table td { display: block; width: auto; }

	.gpc-rep__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

	.gpc-rep__table tbody { margin-bottom: 1rem; border: 1px solid var(--gpc-rep-line); border-bottom-width: 1px; }
	.gpc-rep__table .gpc-rep__composer { padding: .75rem 1rem; background: var(--gpc-rep-head-bg); color: var(--gpc-rep-head-fg); }
	.gpc-rep__table tbody tr + tr { border-top: 1px solid var(--gpc-rep-line); }
	.gpc-rep__table tbody tr + tr td { border-top: 0; }

	.gpc-rep__table td {
		display: grid;
		grid-template-columns: minmax(4.5rem, 30%) 1fr;
		gap: .25rem 1rem;
		padding: .6rem 1rem;
	}
	.gpc-rep__table td::before {
		content: attr(data-label);
		color: var(--gpc-rep-muted);
		font-size: .75em;
		font-weight: 700;
		letter-spacing: .04em;
		text-transform: uppercase;
		padding-top: .2em;
	}
	.gpc-rep__table td.gpc-rep__work { padding-bottom: .15rem; font-weight: 600; }
	.gpc-rep__table td.gpc-rep__role { padding-top: .15rem; }
	.gpc-rep__table td.gpc-rep__role > * { grid-column: 2; }
	.gpc-rep__table .gpc-rep__composer:empty,
	.gpc-rep__table td.is-empty { display: none; }
	.gpc-rep__note { padding-left: 1.45rem; }

	.gpc-rep__legend { margin-left: 0; }
	.gpc-rep__tab { padding: .7rem 1rem; }
}

@media (prefers-reduced-motion: reduce) { .gpc-rep__tab { transition: none; } }

@media (hover: hover) {
	@container gpc-rep (min-width: 641px) {
		.gpc-rep__table tbody tr:hover > td,
		.gpc-rep__table tbody:hover > tr > .gpc-rep__composer {
			background: var(--gpc-rep-hover);
		}
	}
}