/* PracticePilot — Smart Study Planner + Daily Mission Engine (Phase 12),
   mounted into the EXISTING [practicepilot_dashboard] page as a separate,
   self-contained section below Gamification. 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; task 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 task card also shows a text
   status label. */

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

#ppilot-study-plan-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-study-plan-heading { font-size: 20px; font-weight: 800; margin: 0 0 14px; letter-spacing: -0.01em; color: var(--ppilot-navy); }

.ppilot-study-plan.is-loading,
.ppilot-study-plan.is-error,
.ppilot-study-plan.is-empty {
	display: flex; align-items: center; justify-content: center; text-align: center;
	padding: 36px 20px; background: #fff; border: 1px solid var(--ppilot-border);
	border-radius: 20px; margin-bottom: 20px; color: var(--ppilot-muted); font-size: 14px;
}
.ppilot-study-plan.is-error { color: var(--ppilot-danger); }

.ppilot-study-plan-summary {
	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-study-plan-progress-bar {
	width: 100%; height: 10px; border-radius: 6px; background: #eef2f7; overflow: hidden; margin-bottom: 8px;
}
.ppilot-study-plan-progress-fill {
	height: 100%; background: linear-gradient(90deg, #6366f1, #22c55e); border-radius: 6px; transition: width .3s ease;
}
.ppilot-study-plan-progress-label { font-size: 13px; color: var(--ppilot-muted); margin: 0 0 10px; }

.ppilot-study-plan-complete-note { font-size: 14px; font-weight: 600; color: #059669; margin: 0 0 10px; }

.ppilot-study-plan-cta {
	display: inline-block; background: var(--ppilot-navy); color: #fff; text-decoration: none;
	padding: 10px 18px; border-radius: 10px; font-weight: 700; font-size: 13px; margin-right: 10px; margin-bottom: 8px;
}

.ppilot-study-plan-regenerate {
	background: transparent; border: 1px solid var(--ppilot-border); border-radius: 10px;
	padding: 8px 14px; font-size: 12px; color: var(--ppilot-muted); cursor: pointer;
}
.ppilot-study-plan-regenerate:disabled { opacity: .5; cursor: not-allowed; }

.ppilot-study-plan-missed-note { font-size: 12px; color: var(--ppilot-muted); margin: 6px 0 0; }

.ppilot-study-plan-tasks { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 768px) {
	.ppilot-study-plan-tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ppilot-task-card {
	background: #fff; border: 1px solid var(--ppilot-border); border-left: 4px solid #94a3b8;
	border-radius: 16px; padding: 16px; box-shadow: 0 1px 2px rgba(30, 27, 75, 0.04);
	display: flex; flex-direction: column; gap: 6px;
}
.ppilot-priority-0, .ppilot-priority-1 { border-left-color: #ef4444; }
.ppilot-priority-2, .ppilot-priority-3, .ppilot-priority-4 { border-left-color: #f59e0b; }
.ppilot-priority-5, .ppilot-priority-6 { border-left-color: #6366f1; }
.ppilot-priority-7, .ppilot-priority-8 { border-left-color: #22c55e; }

.ppilot-task-card-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ppilot-task-card-icon { font-size: 18px; }
.ppilot-task-card-title { font-weight: 700; font-size: 14px; flex: 1 1 auto; word-break: break-word; }

.ppilot-task-card-status {
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
	padding: 3px 8px; border-radius: 999px; background: #eef2f7; color: var(--ppilot-muted); white-space: nowrap;
}
.ppilot-status-completed { background: #ecfdf5; color: #059669; }
.ppilot-status-in_progress { background: #fff7ed; color: #c2410c; }
.ppilot-status-skipped { background: #f1f5f9; color: #64748b; }
.ppilot-status-pending { background: #eef2ff; color: #4338ca; }

.ppilot-task-card-desc, .ppilot-task-card-meta, .ppilot-task-card-reason, .ppilot-task-card-progress {
	font-size: 13px; margin: 0; color: var(--ppilot-ink); word-break: break-word;
}
.ppilot-task-card-meta { color: var(--ppilot-muted); font-weight: 600; }
.ppilot-task-card-reason { color: var(--ppilot-muted); font-style: italic; }
.ppilot-task-card-progress { color: var(--ppilot-muted); }

.ppilot-task-card-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.ppilot-task-card-start {
	display: inline-block; background: var(--ppilot-navy); color: #fff; text-decoration: none;
	padding: 8px 16px; border-radius: 10px; font-weight: 700; font-size: 13px;
}
.ppilot-task-card-skip {
	background: transparent; border: 1px solid var(--ppilot-border); border-radius: 10px;
	padding: 8px 14px; font-size: 13px; color: var(--ppilot-muted); cursor: pointer;
}
.ppilot-task-card-skip:disabled { opacity: .5; cursor: not-allowed; }

/* 320px minimum width — no fixed widths above, flex-wrap on every row,
   word-break on every text node that could carry a long subject/topic
   name, so there is never horizontal overflow at the smallest supported
   viewport. */
@media (max-width: 400px) {
	.ppilot-study-plan-cta, .ppilot-study-plan-regenerate { width: 100%; text-align: center; }
}