/**
 * Keyword Density Checker - Results Section
 *
 * Dashboard grid layout, card base styles, panel containers,
 * and export/toast UI elements.
 *
 * @package AgenticWP
 */

/* ============================================
   Results Section Container
   ============================================ */

.keyword-density-results-section {
	padding: 0 0 72px;
}

.keyword-density-results-section[hidden] {
	display: none;
}

/* ============================================
   Dashboard Grid Layout
   ============================================ */

.results-dashboard {
	display: flex;
	flex-direction: column;
	gap: var(--kd-section-gap, 2rem);
}

/* Primary results: content score + density gauge side by side */
.results-primary {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--kd-card-gap, 1.5rem);
}

/* Stats row: 4 stat cards */
.results-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--kd-card-gap, 1.5rem);
}

/* Placement row: map + checklist side by side */
.results-placement {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--kd-card-gap, 1.5rem);
}

/* Analysis panels: 2x2 grid */
.results-panels {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--kd-card-gap, 1.5rem);
}

/* ============================================
   Panel Base Styles
   ============================================ */

.results-panel {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: var(--kd-card-padding, 1.5rem);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Wide panels span full width */
.results-panel--wide {
	grid-column: 1 / -1;
}

.panel-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 1rem;
}

.panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.panel-header .panel-title {
	margin-bottom: 0;
}

.panel-recommendation {
	font-size: 0.875rem;
	color: var(--muted);
	margin: 1rem 0 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--line);
}

.panel-recommendation:empty {
	display: none;
}

/* ============================================
   Loading / Skeleton State
   ============================================ */

.results-dashboard.loading .results-panel {
	position: relative;
	overflow: hidden;
}

.results-dashboard.loading .results-panel::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.6) 50%,
		transparent 100%
	);
	animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(100%);
	}
}

/* ============================================
   Export Actions Row
   ============================================ */

.results-export {
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
}

/* Toast styles consolidated in shared/components.css */