/**
 * Keyword Density Checker - Density Gauge Styles
 *
 * Circular SVG gauge component with color-coded optimization zones.
 * Based on modern SEO standards (2024-2025):
 * - Under-optimized: 0-0.5% (gray)
 * - Optimal: 0.5-2% (green) - Primary target
 * - Heavy: 2-3% (yellow)
 * - Over-optimized: >3% (red)
 *
 * @package AgenticWP
 */

/* ============================================
   Gauge Card Container
   ============================================ */

.kd-gauge-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--tool-space-lg);
	padding: var(--tool-space-xl);
	background: var(--tool-bg);
	border: 1px solid var(--tool-border);
	border-radius: var(--tool-radius-lg);
}

.kd-gauge-card .card-title {
	font-size: var(--tool-font-lg);
	font-weight: 600;
	color: var(--tool-text);
	margin: 0;
	text-align: center;
}

/* ============================================
   Gauge SVG Container
   ============================================ */

.kd-gauge {
	position: relative;
	width: var(--gauge-size-lg);
	height: var(--gauge-size-lg);
	display: flex;
	align-items: center;
	justify-content: center;
}

.kd-gauge__svg {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

/* Background track */
.kd-gauge__track {
	stroke: var(--tool-border);
	opacity: 0.3;
}

/* Progress arc - base styles */
.kd-gauge__progress {
	stroke: var(--tool-text-muted);
	stroke-linecap: round;
	transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1),
	            stroke 0.3s ease;
}

/* ============================================
   Gauge Zone Colors (Modifiers)
   ============================================ */

/* Under-optimized (< 0.5%) - Gray/muted */
.kd-gauge--under {
	stroke: var(--tool-text-muted);
}

/* Optimal (0.5-2%) - Green gradient */
.kd-gauge--optimal {
	stroke: url(#gauge-gradient-optimal);
}

/* Heavy (2-3%) - Yellow/warning */
.kd-gauge--heavy {
	stroke: url(#gauge-gradient-warning);
}

/* Over-optimized (> 3%) - Red/danger */
.kd-gauge--danger {
	stroke: url(#gauge-gradient-danger);
}

/* Fallback solid colors for browsers without gradient support */
@supports not (stroke: url(#gradient)) {
	.kd-gauge--optimal {
		stroke: #22C55E;
	}

	.kd-gauge--heavy {
		stroke: #EAB308;
	}

	.kd-gauge--danger {
		stroke: #EF4444;
	}
}

/* ============================================
   Gauge Center Value
   ============================================ */

.kd-gauge__center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.125rem;
}

.kd-gauge__value {
	font-size: var(--tool-font-2xl);
	font-weight: 700;
	color: var(--tool-text);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.kd-gauge__unit {
	font-size: var(--tool-font-base);
	font-weight: 500;
	color: var(--tool-text-muted);
	line-height: 1;
}

/* ============================================
   Zone Indicator Pills
   ============================================ */

.kd-gauge__zones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--tool-space-sm);
	width: 100%;
	max-width: 280px;
}

.kd-zone {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	padding: var(--tool-space-xs) var(--tool-space-sm);
	background: var(--tool-bg-subtle);
	border: 1px solid var(--tool-border);
	border-radius: var(--tool-radius-sm);
	min-width: 60px;
	opacity: 0.6;
	transition: opacity 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.kd-zone--active {
	opacity: 1;
	border-color: var(--tool-border-strong);
	background: var(--tool-bg);
}

.kd-zone__indicator {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--tool-text-muted);
}

/* Zone indicator colors */
.kd-zone--under .kd-zone__indicator {
	background: var(--tool-text-muted);
}

.kd-zone--optimal .kd-zone__indicator {
	background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
}

.kd-zone--heavy .kd-zone__indicator {
	background: linear-gradient(135deg, #EAB308 0%, #CA8A04 100%);
}

.kd-zone--over .kd-zone__indicator {
	background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
}

.kd-zone__label {
	font-size: var(--tool-font-sm);
	font-weight: 500;
	color: var(--tool-text);
	line-height: 1;
}

.kd-zone__range {
	font-size: 0.6875rem; /* 11px */
	color: var(--tool-text-muted);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* Active zone styling */
.kd-zone--under.kd-zone--active .kd-zone__label {
	color: var(--tool-text-muted);
}

.kd-zone--optimal.kd-zone--active .kd-zone__label {
	color: var(--tool-success);
}

.kd-zone--heavy.kd-zone--active .kd-zone__label {
	color: var(--tool-warning);
}

.kd-zone--over.kd-zone--active .kd-zone__label {
	color: var(--tool-error);
}

/* ============================================
   Gauge Status Message
   ============================================ */

.kd-gauge__status {
	font-size: var(--tool-font-sm);
	color: var(--tool-text-muted);
	text-align: center;
	margin: 0;
	padding: var(--tool-space-sm) var(--tool-space-md);
	background: var(--tool-bg-subtle);
	border-radius: var(--tool-radius-sm);
	line-height: var(--tool-line-height);
}

/* ============================================
   SVG Gradients (inline in HTML or via defs)
   ============================================ */

/* These would typically be defined in the SVG itself,
   but we can use CSS custom properties to control them */

/* ============================================
   Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
	.kd-gauge__progress {
		transition: stroke 0.15s ease;
	}

	.kd-zone {
		transition: opacity 0.15s ease, border-color 0.15s ease;
	}
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 680px) {
	.kd-gauge-card {
		padding: var(--tool-space-lg);
	}

	.kd-gauge {
		width: var(--gauge-size-md);
		height: var(--gauge-size-md);
	}

	.kd-gauge__value {
		font-size: var(--tool-font-xl);
	}

	.kd-gauge__zones {
		gap: var(--tool-space-xs);
	}

	.kd-zone {
		min-width: 50px;
		padding: 0.25rem 0.375rem;
	}

	.kd-zone__label {
		font-size: 0.6875rem;
	}

	.kd-zone__range {
		font-size: 0.625rem; /* 10px */
	}
}