/**
 * PG Guitar Tools — chord card chrome.
 *
 * The chord/scale/fretboard SVGs are fully self-styled inline; this file only
 * styles the card wrapper around chord diagrams. Values are self-contained
 * (no theme variables) so the card looks right on any site in the network.
 *
 * Override the teal highlight per site with:  --pg-brand-teal: #yourcolour;
 * (set it on :root, the card, or any ancestor).
 */
.pg-dcard {
	background: #fafafa;
	border: 1px solid #e8e8e8;
	border-radius: 12px;
	padding: 24px 18px;
	margin: 28px 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	text-align: center;
}

.pg-dcard-title {
	font-weight: 600;
	font-size: 1.15rem;
	color: #1a1a1a;
	margin-bottom: 16px;
}

.pg-dcard-wrap {
	display: flex;
	justify-content: center;
	gap: 36px;
	flex-wrap: wrap;
}

.pg-chord-svg {
	width: 158px;
	height: auto;
}

.pg-dcard-legend {
	margin-top: 16px;
	font-size: 0.9rem;
	color: #666;
	max-width: 420px;
	margin-inline: auto;
}

.pg-dcard-teal {
	color: var(--pg-brand-teal, #0E8C84);
}