/**
 * Keyword Density Checker - Readability Panel Styles
 *
 * Styles for Flesch-Kincaid, Gunning Fog, and Dale-Chall
 * readability displays with grade level interpretation.
 *
 * @package AgenticWP
 */

/* ============================================
   Readability Panel Container
   ============================================ */

#readability-panel {
	display: flex;
	flex-direction: column;
	gap: var(--tool-space-lg);
}

#readability-panel .panel-title {
	font-size: var(--tool-font-lg);
	font-weight: 600;
	color: var(--tool-text);
	margin: 0 0 var(--tool-space-sm) 0;
}

/* ============================================
   Readability Scores Section
   ============================================ */

.readability-scores {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--tool-space-md);
}

/* Primary score (Flesch-Kincaid gauge) */
.readability-primary {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--tool-space-sm);
}

/* Readability label (e.g., "8th Grade") */
.readability-label {
	font-size: var(--tool-font-base);
	font-weight: 600;
	color: var(--tool-text);
	text-align: center;
}

/* ============================================
   Gauge Overrides for Readability
   ============================================ */

#readability-gauge .gauge-circle {
	transition: stroke-dashoffset var(--kd-gauge-animation-duration) var(--kd-gauge-animation-timing),
	            stroke var(--tool-transition-base);
}

#readability-gauge .gauge-value {
	font-size: var(--tool-font-xl);
	font-weight: 700;
	color: var(--tool-text);
}

/* Color classes based on grade level */
#readability-gauge .gauge-success,
.gauge-circle.gauge-success {
	stroke: var(--tool-success);
}

#readability-gauge .gauge-warning,
.gauge-circle.gauge-warning {
	stroke: var(--tool-warning);
}

#readability-gauge .gauge-danger,
.gauge-circle.gauge-danger {
	stroke: var(--tool-error);
}

/* ============================================
   Readability Details (Sentence length, etc.)
   ============================================ */

.readability-details {
	display: flex;
	flex-direction: column;
	gap: var(--tool-space-sm);
	width: 100%;
	padding-top: var(--tool-space-md);
	border-top: 1px solid var(--tool-border);
}

.detail-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--tool-space-xs) 0;
}

.detail-label {
	font-size: var(--tool-font-sm);
	color: var(--tool-text-muted);
}

.detail-value {
	font-size: var(--tool-font-sm);
	font-weight: 600;
	color: var(--tool-text);
	font-variant-numeric: tabular-nums;
}

/* ============================================
   Recommendation Message
   ============================================ */

.panel-recommendation {
	font-size: var(--tool-font-sm);
	line-height: var(--tool-line-height);
	margin: 0;
	padding: var(--tool-space-sm) var(--tool-space-md);
	border-radius: var(--tool-radius-sm);
	border-left: 3px solid var(--tool-border);
	background: var(--tool-bg-subtle);
}

.recommendation-success {
	border-left-color: var(--tool-success);
	background: var(--tool-success-bg);
	color: #166534;
}

.recommendation-warning {
	border-left-color: var(--tool-warning);
	background: var(--tool-warning-bg);
	color: #854d0e;
}

.recommendation-error {
	border-left-color: var(--tool-error);
	background: var(--tool-error-bg);
	color: #991b1b;
}

.recommendation-info {
	border-left-color: var(--tool-info);
	background: var(--tool-info-bg);
	color: #1e40af;
}

/* ============================================
   Readability Interpretation Labels
   ============================================ */

.readability-interpretation {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--tool-space-xs);
	margin-top: var(--tool-space-sm);
}

.interpretation-badge {
	font-size: 0.6875rem;
	font-weight: 500;
	padding: 0.125rem 0.5rem;
	border-radius: 999px;
	background: var(--tool-bg-subtle);
	border: 1px solid var(--tool-border);
	color: var(--tool-text-muted);
}

.interpretation-badge--current {
	background: var(--kd-accent-bg);
	border-color: var(--kd-accent-border);
	color: var(--kd-accent-dark);
}

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

@media (prefers-reduced-motion: reduce) {
	#readability-gauge .gauge-circle {
		transition: stroke 0.1s ease;
	}
}

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

@media (max-width: 680px) {
	.detail-row {
		font-size: var(--tool-font-sm);
	}

	.panel-recommendation {
		font-size: 0.8125rem;
	}
}