/* PracticePilot — Exam Readiness Command Center (Phase 14), mounted into
   the EXISTING [practicepilot_dashboard] page as a separate, self-
   contained section below the Smart Exam Roadmap module. Reuses the SAME
   --ppilot-* color tokens every other dashboard module already uses — no
   new color system invented. Mobile-first: no fixed widths beyond the
   host container; every grid collapses to a single column at narrow
   widths (320/400/768/1440 all verified) so nothing can overflow
   horizontally. Status is never communicated by color alone — every pill
   also shows a text label. */

#ppilot-readiness-root, #ppilot-readiness-root * { box-sizing: border-box; min-width: 0; }

#ppilot-readiness-root {
	max-width: 1080px; width: 100%; margin: 28px auto 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--ppilot-ink);
}

.ppilot-readiness-card {
	background: #fff; border: 1px solid var(--ppilot-border); border-radius: 18px;
	padding: 18px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(30, 27, 75, 0.04);
}

.ppilot-readiness-loading,
.ppilot-readiness-notice {
	text-align: center; padding: 20px; color: var(--ppilot-muted); font-size: 14px;
}

.ppilot-readiness-title {
	font-size: 20px; font-weight: 800; margin: 0 0 4px; letter-spacing: -0.01em; color: var(--ppilot-navy);
}
.ppilot-readiness-subtitle { font-size: 12.5px; color: var(--ppilot-muted); margin-bottom: 14px; }
.ppilot-readiness-exam-name { font-size: 16px; font-weight: 700; color: var(--ppilot-ink); margin-bottom: 4px; }

.ppilot-readiness-status-pill {
	display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.03em; padding: 4px 10px;
	border-radius: 999px; text-transform: uppercase; white-space: nowrap; margin-bottom: 12px;
}
.ppilot-readiness-status-not_started { background: #eef2f7; color: #475569; }
.ppilot-readiness-status-building { background: #fef3c7; color: #92400e; }
.ppilot-readiness-status-developing { background: #e0f2fe; color: #0369a1; }
.ppilot-readiness-status-strong { background: #dcfce7; color: #166534; }

.ppilot-readiness-header-grid {
	display: flex; flex-wrap: wrap; gap: 14px;
}
.ppilot-readiness-stat {
	flex: 1 1 110px; min-width: 100px; background: #f8f9fc; border-radius: 12px; padding: 10px 12px;
}
.ppilot-readiness-stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ppilot-muted); margin-bottom: 4px; }
.ppilot-readiness-stat-value { font-size: 20px; font-weight: 800; color: var(--ppilot-navy); }
.ppilot-readiness-stat-sub { font-size: 11.5px; color: var(--ppilot-muted); margin-top: 2px; }

.ppilot-readiness-disclaimer { font-size: 11px; color: var(--ppilot-muted); margin-top: 10px; line-height: 1.4; }

.ppilot-readiness-section-title {
	font-size: 14px; font-weight: 800; color: var(--ppilot-navy); margin: 0 0 10px; display: flex; align-items: center; gap: 6px;
}

.ppilot-readiness-rows { display: flex; flex-direction: column; gap: 8px; }
.ppilot-readiness-row {
	display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px;
	background: #f8f9fc; border-radius: 10px; flex-wrap: wrap;
}
.ppilot-readiness-row-label { font-size: 13px; font-weight: 700; color: var(--ppilot-ink); }
.ppilot-readiness-row-value { font-size: 12.5px; color: var(--ppilot-muted); text-align: right; }

.ppilot-readiness-pill {
	display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
	background: #eef2f7; color: var(--ppilot-ink); white-space: nowrap;
}
.ppilot-readiness-pill-needs_practice, .ppilot-readiness-pill-declining { background: #fee2e2; color: #b91c1c; }
.ppilot-readiness-pill-developing, .ppilot-readiness-pill-stable { background: #fef3c7; color: #92400e; }
.ppilot-readiness-pill-strong, .ppilot-readiness-pill-improving { background: #dcfce7; color: #166534; }
.ppilot-readiness-pill-insufficient_data { background: #eef2f7; color: #475569; }

.ppilot-readiness-priority {
	display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; padding: 3px 8px;
	border-radius: 999px; text-transform: uppercase; white-space: nowrap;
}
.ppilot-readiness-priority-high { background: #fee2e2; color: #b91c1c; }
.ppilot-readiness-priority-medium { background: #fef3c7; color: #92400e; }
.ppilot-readiness-priority-low { background: #dcfce7; color: #166534; }

.ppilot-readiness-gap-item, .ppilot-readiness-strength-item {
	padding: 10px 12px; background: #f8f9fc; border-radius: 10px; margin-bottom: 8px;
}
.ppilot-readiness-gap-title { font-size: 13.5px; font-weight: 700; color: var(--ppilot-ink); margin-bottom: 3px; }
.ppilot-readiness-gap-meta { font-size: 12px; color: var(--ppilot-muted); }

.ppilot-readiness-btn {
	display: inline-block; font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 10px;
	background: var(--ppilot-navy); color: #fff; text-decoration: none; margin-top: 8px;
}
.ppilot-readiness-btn-primary { background: #4f46e5; }

.ppilot-readiness-next-action {
	background: linear-gradient(135deg, #4f46e5, #6366f1); color: #fff; border-radius: 16px; padding: 18px;
}
.ppilot-readiness-next-action-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.85; margin-bottom: 6px; }
.ppilot-readiness-next-action-title { font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.ppilot-readiness-next-action-reason { font-size: 13px; opacity: 0.9; margin-bottom: 12px; }
.ppilot-readiness-next-action .ppilot-readiness-btn { background: #fff; color: #4f46e5; }

.ppilot-readiness-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

@media (max-width: 560px) {
	.ppilot-readiness-header-grid { gap: 8px; }
	.ppilot-readiness-stat { flex: 1 1 90px; padding: 8px 10px; }
	.ppilot-readiness-stat-value { font-size: 17px; }
	.ppilot-readiness-grid-2 { grid-template-columns: 1fr; }
	.ppilot-readiness-row { flex-direction: column; align-items: flex-start; }
	.ppilot-readiness-row-value { text-align: left; }
}