/**
 * Word Count Tool - Gauges Section
 *
 * Grade level and reading ease gauge displays with color-coded states.
 *
 * @package AgenticWP
 */

/* ============================================
   Gauges Section
   ============================================ */

.gauges-section {
	background: #fff;
	border-radius: 16px;
	border: 1px solid var(--tool-border);
	padding: 1.5rem;
	box-shadow: var(--tool-shadow-sm);
}

.gauges-title {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 1.25rem;
}

/* ============================================
   Gauges Grid
   ============================================ */

.gauges-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
}

.gauge-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.gauge-description {
	font-size: 0.8125rem;
	color: var(--muted);
	text-align: center;
	margin: 0;
}

/* ============================================
   Grade Level Gauge Colors
   Color coding based on education level
   ============================================ */

/* Easy: Grades 1-6 (elementary) */
.gauge-wrapper .tool-gauge[data-grade-level="easy"] .tool-gauge__progress {
	stroke: var(--grade-easy, var(--tool-success));
}

/* Medium: Grades 7-9 (middle school) */
.gauge-wrapper .tool-gauge[data-grade-level="medium"] .tool-gauge__progress {
	stroke: var(--grade-medium, var(--tool-warning));
}

/* Hard: Grades 10-12 (high school) */
.gauge-wrapper .tool-gauge[data-grade-level="hard"] .tool-gauge__progress {
	stroke: var(--grade-hard, #f97316);
}

/* Very Hard: Grades 13+ (college+) */
.gauge-wrapper .tool-gauge[data-grade-level="very-hard"] .tool-gauge__progress {
	stroke: var(--grade-very-hard, var(--tool-error));
}

/* ============================================
   Reading Ease Gauge Colors
   Color coding based on ease score (0-100, inverted)
   ============================================ */

/* Easy: 60-100 (easy to read) */
.gauge-wrapper .tool-gauge[data-reading-ease="easy"] .tool-gauge__progress {
	stroke: var(--ease-easy, var(--tool-success));
}

/* Medium: 30-59 (moderately difficult) */
.gauge-wrapper .tool-gauge[data-reading-ease="medium"] .tool-gauge__progress {
	stroke: var(--ease-medium, var(--tool-warning));
}

/* Hard: 0-29 (difficult to read) */
.gauge-wrapper .tool-gauge[data-reading-ease="hard"] .tool-gauge__progress {
	stroke: var(--ease-hard, var(--tool-error));
}

/* ============================================
   Gauge Label Overrides
   ============================================ */

.gauge-wrapper .tool-gauge__label {
	font-weight: 600;
	color: var(--ink);
}

/* Dynamic label text based on score */
.gauge-wrapper [data-gauge-label] {
	display: block;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--muted);
	margin-top: 0.25rem;
}

/* ============================================
   Gauge Animation
   ============================================ */

.tool-gauge__progress {
	transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.3s ease;
}