/* Story Studio Plush - Learning Nav (the groups of scenes in the learning area's left menu). Rides on Tutor's own
   .tutor-learning-nav-* look; this only adds the progress ring, the scene mark and the points. */

.tsp-ln { display: flex; flex-direction: column; gap: 2px; }

.tsp-ln-summary {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px;
	padding: 4px 12px 10px; font-size: 0.8125rem; color: var(--tutor-text-subdued, #6b7280);
}
.tsp-ln-note {
	margin: 0 12px 8px; padding: 8px 10px; border-radius: 6px; font-size: 0.8125rem;
	background: var(--tutor-tab-l3-active-hover, #f2f5ff); color: var(--tutor-text-primary, #212327);
}
.tsp-ln-note[hidden] { display: none; }

/* A group's progress: a ring filled by --p (0-100). */
.tsp-ln-ring {
	--p: 0; display: block; width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
	background: conic-gradient(var(--tutor-actions-brand-primary, #3e64de) calc(var(--p) * 1%), var(--tutor-border-hover, #d3d7de) 0);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
}
.tsp-ln-group.is-complete .tsp-ln-ring { background: var(--tutor-actions-brand-primary, #3e64de); }

/* Points are always visible (the course menu hides a header's actions until it is hovered). */
.tutor-learning-sidebar .tutor-learning-sidebar-curriculum .tutor-learning-nav-topic .tsp-ln-header-actions { display: flex; }
.tsp-ln-pts { white-space: nowrap; font-size: 0.75rem; font-weight: 600; color: var(--tutor-text-subdued, #6b7280); }
/* The star is drawn here (not typed as an emoji, which WordPress turns into a picture). */
.tsp-ln-pts::before { content: "\2605"; content: "\2605" / ""; margin-inline-end: 3px; color: #f5a623; }
.tsp-ln-item.is-done .tsp-ln-pts { color: var(--tutor-text-success, #16794c); }

.tsp-ln-desc { margin: 0 0 4px; padding: 2px 12px 6px 0; font-size: 0.8125rem; line-height: 1.35; color: var(--tutor-text-subdued, #6b7280); }

.tsp-ln-item { text-decoration: none; }
.tsp-ln-item .tsp-ln-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsp-ln-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.tsp-ln-item.disabled { cursor: default; }

/* The scene's mark: an empty circle, a dot for the scene being played, a tick when it is finished. */
.tsp-ln-mark {
	position: relative; flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
	box-sizing: border-box; border: 2px solid var(--tutor-border-hover, #c8ccd4); background: transparent;
}
.tsp-ln-item.active .tsp-ln-mark { border-color: var(--tutor-actions-brand-primary, #3e64de); }
.tsp-ln-item.active .tsp-ln-mark::after {
	content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--tutor-actions-brand-primary, #3e64de);
}
.tsp-ln-item.is-done .tsp-ln-mark { border-color: var(--tutor-icon-success, #22a06b); background: var(--tutor-icon-success, #22a06b); }
.tsp-ln-item.is-done .tsp-ln-mark::after {
	content: ""; position: absolute; left: 5px; top: 1.5px; width: 4px; height: 8px;
	border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.tsp-ln-item.is-done.active .tsp-ln-mark { background: transparent; border-color: var(--tutor-actions-brand-primary, #3e64de); }
.tsp-ln-item.is-done.active .tsp-ln-mark::after { inset: 3px; left: 3px; top: 3px; width: auto; height: auto; border: 0; transform: none; background: var(--tutor-actions-brand-primary, #3e64de); }

@media (prefers-reduced-motion: reduce) { .tsp-ln-ring { transition: none; } }