.disc-report-app {
	font-family: var(--disc-font-family);
	color: var(--disc-color-text);
	max-width: 720px;
	margin: 0 auto;
	padding: var(--disc-space-4) var(--disc-space-3);
}

.disc-report-welcome {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--disc-color-primary);
	margin: 0 0 var(--disc-space-2) 0;
}

.disc-report h1 {
	color: var(--disc-color-bronze);
}

.disc-report h2 {
	margin-top: var(--disc-space-5);
	border-bottom: 2px solid var(--disc-color-secondary);
	padding-bottom: var(--disc-space-2);
}

.disc-report-locked {
	background: var(--disc-color-secondary);
	border-radius: var(--disc-radius-card);
	padding: var(--disc-space-4);
	margin-top: var(--disc-space-5);
	text-align: center;
}

.disc-quiz-button {
	display: inline-block;
	font-family: inherit;
	font-weight: 600;
	padding: var(--disc-space-2) var(--disc-space-4);
	min-height: 44px;
	line-height: 28px;
	border-radius: var(--disc-radius-pill);
	border: 2px solid transparent;
	background: var(--disc-color-button-bg);
	color: var(--disc-color-button-text);
	text-decoration: none;
	cursor: pointer;
	margin-top: var(--disc-space-3);
}

.disc-quiz-button:hover,
.disc-quiz-button:focus-visible {
	background: var(--disc-color-button-bg-hover);
	color: var(--disc-color-button-text-hover);
	border-color: var(--disc-color-button-border-hover);
	outline: none;
}

/*
 * "Take the DISC Assessment" (the only <a class="disc-quiz-button"> in the
 * plugin -- every other use of this class is a <button>) gets white text
 * instead of the default bronze, per explicit request. Note: white-on-amber
 * fails WCAG AA contrast (1.6:1) -- the reason bronze was chosen as the
 * default in the first place. Scoped to the tag so it doesn't affect the
 * quiz's Start/Back/Next buttons or the "check again" unlock button.
 * :hover/:focus-visible above still wins (higher specificity), so the
 * hover color is unchanged.
 */
a.disc-quiz-button {
	color: #FFFFFF;
}