/* =========================================================================
   EduOne · Greenie — Learning views (placement · path · lesson)
   ========================================================================= */

.learn-head { margin-bottom: var(--s-6); }
.learn-head h1 { font-size: var(--fs-3xl); margin: var(--s-1) 0; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

/* Skill bars */
.skill { margin: var(--s-2) 0; }
.skill-row { display: flex; justify-content: space-between; font-size: var(--fs-sm); margin-bottom: 4px; }

/* Quiz */
.quiz-q { padding: var(--s-4) 0; border-bottom: 1px solid var(--c-border); }
.quiz-q:last-child { border-bottom: none; }
.quiz-prompt { font-weight: var(--fw-medium); margin-bottom: var(--s-3); }
.quiz-opts { display: flex; flex-direction: column; gap: var(--s-2); }
.quiz-opt { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--c-border-2); border-radius: var(--r); cursor: pointer; transition: all var(--t); }
.quiz-opt:hover { border-color: var(--c-primary-300); background: var(--c-primary-50); }
.quiz-opt:has(input:checked) { border-color: var(--c-primary-500); background: var(--c-primary-50); font-weight: var(--fw-medium); }
.quiz-opt input { accent-color: var(--c-primary-500); }

/* Rec card */
.rec-card { background: var(--c-surface); border: 2px solid var(--c-primary-200); border-radius: var(--r-lg); padding: var(--s-6); box-shadow: var(--sh-sm); }
.rec-card.is-remedial { border-color: var(--c-energy-400); background: var(--c-warning-bg); }
.rec-card h2 { font-size: var(--fs-xl); margin: var(--s-2) 0; }
.reasons { margin: var(--s-3) 0 0; padding-left: 20px; }
.reasons li { margin: 4px 0; font-size: var(--fs-sm); color: var(--c-text-2); }
.adj { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--c-energy-600); background: var(--c-energy-100); padding: 8px 12px; border-radius: var(--r-sm); }

/* Path map */
.path-map { display: flex; flex-direction: column; gap: var(--s-2); max-height: 460px; overflow-y: auto; }
.pm-node { display: flex; align-items: center; gap: var(--s-3); padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--c-border); text-decoration: none; color: inherit; }
.pm-icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 1.1rem; flex-shrink: 0; }
.pm-title { font-weight: var(--fw-medium); font-size: var(--fs-sm); }
.pm-meta { font-size: var(--fs-xs); color: var(--c-text-3); }
.pm-body { flex: 1; }
.st-done .pm-icon { background: var(--c-primary-100); color: var(--c-primary-600); }
.st-current { border-color: var(--c-primary-400); background: var(--c-primary-50); }
.st-current .pm-icon { background: var(--c-primary-500); color: #fff; }
.st-ready:hover { border-color: var(--c-primary-400); background: var(--c-primary-50); }
.st-ready .pm-icon { background: var(--c-surface-2); color: var(--c-text-3); }
.st-locked { opacity: 0.55; }
.st-locked .pm-icon { background: var(--c-surface-2); color: var(--c-text-3); }

/* Log */
.log-list { display: flex; flex-direction: column; gap: var(--s-2); }
.log-row { display: flex; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--c-border); }
.log-time { font-size: var(--fs-xs); color: var(--c-text-3); min-width: 130px; }