/* Shared component styles for Matrix widgets (radar chart, score badge, compare tool, contact form).
   Uses the same CSS custom properties the theme defines, with fallbacks so these components still
   look right if activated against a different theme. */
:root {
	--cdi-bg: #0a0e1a;
	--cdi-surface: #121826;
	--cdi-grid: #33445a;
	--cdi-text: #e8edf5;
	--cdi-text-muted: #9fb0c3;
	--cdi-accent: #00d4ff;
	--cdi-accent-2: #ff5da2;
}

.cdi-radar-wrap {
	display: flex;
	justify-content: center;
}

.cdi-radar-canvas {
	max-width: 100%;
	height: auto;
}

.cdi-score-badge {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 14px 20px;
	border-radius: 12px;
	background: var(--cdi-surface);
	border: 1px solid var(--cdi-grid);
}

.cdi-score-number {
	font-size: 2rem;
	font-weight: 800;
	color: var(--cdi-accent);
	line-height: 1;
}

.cdi-score-max {
	font-size: 0.85rem;
	color: var(--cdi-text-muted);
	margin-left: 2px;
}

.cdi-tier-label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cdi-text-muted);
	margin-top: 4px;
}

.cdi-tier-transformational-innovator .cdi-score-number { color: #7bffb0; }
.cdi-tier-meaningful-innovator .cdi-score-number { color: var(--cdi-accent); }
.cdi-tier-incremental-innovator .cdi-score-number { color: #ffcc66; }
.cdi-tier-emerging-unranked .cdi-score-number { color: var(--cdi-text-muted); }

/* Compare tool */
.cdi-compare-tool { position: relative; }
.cdi-compare-search {
	width: 100%;
	padding: 12px 14px;
	border-radius: 8px;
	border: 1px solid var(--cdi-grid);
	background: var(--cdi-surface);
	color: var(--cdi-text);
	font-size: 1rem;
}
.cdi-compare-results {
	position: absolute;
	z-index: 5;
	background: var(--cdi-surface);
	border: 1px solid var(--cdi-grid);
	border-radius: 8px;
	margin-top: 4px;
	width: 100%;
	max-height: 260px;
	overflow-y: auto;
}
.cdi-compare-result {
	display: block;
	width: 100%;
	text-align: left;
	padding: 10px 14px;
	background: none;
	border: none;
	color: var(--cdi-text);
	cursor: pointer;
}
.cdi-compare-result:hover { background: rgba(0, 212, 255, 0.1); }
.cdi-compare-slots { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.cdi-compare-pill {
	border: 1px solid var(--cdi-accent);
	border-radius: 999px;
	padding: 6px 12px;
	font-size: 0.85rem;
}
.cdi-compare-pill a { color: var(--cdi-text-muted); text-decoration: none; margin-left: 6px; }
.cdi-compare-table table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.cdi-compare-table th, .cdi-compare-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--cdi-grid);
	text-align: left;
}
.cdi-compare-total td { font-weight: 700; color: var(--cdi-accent); }

/* Contact / Get Featured form */
.cdi-contact-form { display: flex; flex-direction: column; gap: 12px; max-width: 520px; }
.cdi-contact-form input,
.cdi-contact-form textarea {
	padding: 12px 14px;
	border-radius: 8px;
	border: 1px solid var(--cdi-grid);
	background: var(--cdi-surface);
	color: var(--cdi-text);
	font: inherit;
}
.cdi-form-status { min-height: 1.2em; font-size: 0.9rem; }
.cdi-form-success { color: #7bffb0; }
.cdi-form-error { color: #ff8080; }