/* PracticePilot — Smart Exam Roadmap + Syllabus Progress Engine (Phase 13),
   mounted into the EXISTING [practicepilot_dashboard] page as a separate,
   self-contained section below Smart Study Planner. 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; subject cards stack to a single column at every width
   tested (320/400/768/1440) so nothing can overflow horizontally. Status
   is never communicated by color alone — every pill also shows a text
   label. */

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

#ppilot-roadmap-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-roadmap-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-roadmap-loading,
.ppilot-roadmap-notice {
	text-align: center; padding: 20px; color: var(--ppilot-muted); font-size: 14px;
}

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

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

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

.ppilot-roadmap-subjects { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }

.ppilot-roadmap-subject-card {
	background: #fff; border: 1px solid var(--ppilot-border); border-radius: 16px; padding: 14px 16px;
}

.ppilot-roadmap-subject-head {
	display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; flex-wrap: wrap;
}
.ppilot-roadmap-subject-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ppilot-roadmap-subject-name { font-size: 15px; font-weight: 700; color: var(--ppilot-ink); }

.ppilot-roadmap-bar { width: 100%; height: 8px; border-radius: 6px; background: #eef2f7; overflow: hidden; margin: 10px 0 6px; }
.ppilot-roadmap-bar-fill { height: 100%; background: linear-gradient(90deg, #6366f1, #22c55e); border-radius: 6px; transition: width .3s ease; }
.ppilot-roadmap-bar-fill.ppilot-roadmap-bar-unavailable { background: repeating-linear-gradient(45deg, #d7dbe4, #d7dbe4 6px, #eceff4 6px, #eceff4 12px); }

.ppilot-roadmap-subject-meta { font-size: 12.5px; color: var(--ppilot-muted); margin-bottom: 10px; }

.ppilot-roadmap-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-roadmap-pill-not-started { background: #eef2f7; color: #475569; }
.ppilot-roadmap-pill-in-progress { background: #e0f2fe; color: #0369a1; }
.ppilot-roadmap-pill-practiced { background: #e0f2fe; color: #0369a1; }
.ppilot-roadmap-pill-needs-revision { background: #fef3c7; color: #92400e; }
.ppilot-roadmap-pill-weak { background: #fee2e2; color: #b91c1c; }
.ppilot-roadmap-pill-strong { background: #dcfce7; color: #166534; }

.ppilot-roadmap-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-roadmap-priority-high { background: #fee2e2; color: #b91c1c; }
.ppilot-roadmap-priority-medium { background: #fef3c7; color: #92400e; }
.ppilot-roadmap-priority-low { background: #dcfce7; color: #166534; }

.ppilot-roadmap-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: 4px;
}
.ppilot-roadmap-btn-small { padding: 5px 11px; font-size: 12px; margin-top: 0; }
.ppilot-roadmap-btn-primary { background: #4f46e5; }

.ppilot-roadmap-topics-wrap { margin-top: 12px; border-top: 1px solid var(--ppilot-border); padding-top: 12px; }
.ppilot-roadmap-topics-loading { font-size: 12.5px; color: var(--ppilot-muted); padding: 6px 0; }
.ppilot-roadmap-topics { display: flex; flex-direction: column; gap: 10px; }

.ppilot-roadmap-topic-row {
	display: flex; flex-direction: column; gap: 6px; padding: 10px; background: #f8f9fc; border-radius: 10px;
}
.ppilot-roadmap-topic-name { font-size: 13.5px; font-weight: 700; color: var(--ppilot-ink); }
.ppilot-roadmap-topic-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--ppilot-muted); }
.ppilot-roadmap-topic-stat { white-space: nowrap; }

.ppilot-roadmap-next-priority {
	background: #fff; border: 1px solid var(--ppilot-border); border-radius: 16px; padding: 16px;
}
.ppilot-roadmap-next-priority-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ppilot-muted); margin-bottom: 4px; }
.ppilot-roadmap-next-priority-name { font-size: 17px; font-weight: 800; color: var(--ppilot-navy); margin-bottom: 4px; }
.ppilot-roadmap-next-priority-reason { font-size: 13px; color: var(--ppilot-muted); margin-bottom: 10px; }

@media (max-width: 480px) {
	.ppilot-roadmap-summary { gap: 8px; }
	.ppilot-roadmap-stat { flex: 1 1 90px; padding: 8px 10px; }
	.ppilot-roadmap-stat-value { font-size: 17px; }
	.ppilot-roadmap-subject-head { flex-direction: column; align-items: flex-start; }
}