/* ==========================================================================
   CEL Lesson Projects — Professional UI System (v3)
   Consistent spacing · typography · sidebar · project layout
   ========================================================================== */

:root {
	/* Brand */
	--cel-ink: #0f172a;
	--cel-text: #334155;
	--cel-muted: #64748b;
	--cel-blue: #0095d9;
	--cel-blue-dark: #0077b3;
	--cel-blue-soft: #e8f6fc;
	--cel-blue-muted: #f0f9ff;
	--cel-blue-glow: rgba(0, 149, 217, 0.14);
	--cel-green: #019e7c;
	--cel-green-dark: #017a61;
	--cel-green-soft: #e6f7f2;
	--cel-green-glow: rgba(1, 158, 124, 0.14);
	--cel-orange: #e36b12;
	--cel-orange-soft: #fef3eb;
	--cel-yellow: #ffd200;
	--cel-yellow-soft: #fffbeb;
	--cel-red: #dc2626;
	--cel-red-soft: #fef2f2;

	/* Surfaces */
	--cel-border: #e2e8f0;
	--cel-border-light: #f1f5f9;
	--cel-bg: #f8fafc;
	--cel-card: #ffffff;

	/* Spacing scale (4px base) */
	--cel-s1: 0.25rem;
	--cel-s2: 0.5rem;
	--cel-s3: 0.75rem;
	--cel-s4: 1rem;
	--cel-s5: 1.25rem;
	--cel-s6: 1.5rem;
	--cel-s8: 2rem;
	--cel-s10: 2.5rem;

	/* Radius */
	--cel-radius: 12px;
	--cel-radius-sm: 8px;
	--cel-radius-xs: 6px;
	--cel-radius-pill: 999px;

	/* Shadows */
	--cel-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
	--cel-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
	--cel-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
	--cel-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.1);

	/* Typography — readable, LD30-aligned */
	--cel-fs-xs: 0.6875rem;
	--cel-fs-sm: 0.8125rem;
	--cel-fs-body: 0.9375rem;
	--cel-fs-md: 1rem;
	--cel-fs-heading: 1rem;
	--cel-fs-title: 1.375rem;
	--cel-fs-nav: 0.875rem;
	--cel-lh-tight: 1.35;
	--cel-lh: 1.55;
	--cel-lh-loose: 1.65;

	/* Sidebar — indigo project · teal wall (different from LD blue/green) */
	--cel-nav-text: #3f4650;
	--cel-nav-text-active: #4338ca;
	--cel-nav-text-muted: #8b949e;
	--cel-nav-project-accent: #4f46e5;
	--cel-nav-project-bg: #eef2ff;
	--cel-nav-project-hover: #e0e7ff;
	--cel-nav-project-active: #c7d2fe;
	--cel-nav-wall-accent: #0d9488;
	--cel-nav-wall-bg: #f0fdfa;
	--cel-nav-wall-hover: #ccfbf1;
	--cel-nav-wall-active: #99f6e4;
	--cel-nav-pending: #d97706;
	--cel-nav-pending-bg: #fffbeb;
	--cel-nav-pending-hover: #fef3c7;
	--cel-nav-pending-border: #fbbf24;
	--cel-nav-complete: #059669;
	--cel-nav-complete-bg: #ecfdf5;
	--cel-nav-complete-hover: #d1fae5;
	--cel-nav-complete-border: #6ee7b7;
	--cel-nav-open-bg: #eef2ff;
	--cel-nav-open-hover: #e0e7ff;

	/* Icons — match LD topic row scale */
	--cel-icon-xs: 14px;
	--cel-icon-sm: 16px;
	--cel-icon-md: 18px;
	--cel-icon-lg: 22px;
	--cel-nav-icon: 16px;
	--cel-nav-glyph: 10px;

	/* Layout */
	--cel-gap: var(--cel-s4);
	--cel-content-max: 980px;
}

/* ---- SVG icons ---- */
.cel-svg-icon {
	display: block;
	width: 1em;
	height: 1em;
	flex-shrink: 0;
}

/* ---- Focus mode integration ---- */
/* Only hide LearnDash's own focus title — NEVER hide our cover title */
body.cel-is-project-view .ld-focus-content > h1:not(.cel-project-cover__title),
body.cel-is-coding-wall-view .ld-focus-content > h1:not(.cel-project-cover__title) {
	display: none !important;
}

body.cel-is-project-view .ld-focus-content,
body.cel-is-coding-wall-view .ld-focus-content {
	max-width: var(--cel-content-max);
	padding-top: var(--cel-s2);
}

.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content h1 {
	font-size: 22px;
	line-height: 1.35;
	font-weight: 700;
}

/* Force cover title visible (overrides LD focus h1 rules) */
body.cel-is-project-view .cel-project-cover__title,
body.cel-is-coding-wall-view .cel-project-cover__title,
.learndash-wrapper .cel-project-cover__title,
.cel-project-cover .cel-project-cover__title {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	color: #fff !important;
	font-size: 1.375rem !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	margin: 0 !important;
}

/* ==========================================================================
   SIDEBAR NAV — CEL project rows (indigo lesson · teal coding wall)
   Clearly different from LD quiz/lesson checkmarks
   ========================================================================== */

.cel-project-nav-item.ld-table-list-item {
	margin: 0;
}

.learndash-wrapper .ld-course-navigation .cel-project-nav-item .ld-table-list-item-wrapper,
.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-project-nav-wrapper {
	width: 100%;
	box-sizing: border-box;
}

.learndash-wrapper .ld-course-navigation .ld-table-list.ld-topic-list .cel-project-nav-item .ld-table-list-item-wrapper {
	padding: 2px 8px 2px 6px;
	margin: 0;
	border-bottom: none;
}

/* Hide old LD font icons only — never hide our SVG */
.learndash-wrapper .ld-course-navigation .cel-project-nav-item .ld-icon,
.learndash-wrapper .ld-course-navigation .cel-project-nav-item .ld-status-icon {
	display: none !important;
}

/* ---- Row link — icon + text vertically centered ---- */
.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-project-nav-link,
.learndash-wrapper .ld-course-navigation .ld-table-list.ld-topic-list .cel-project-nav-item .ld-table-list-item-preview.cel-project-nav-link,
.learndash-wrapper .ld-course-navigation .cel-project-nav-item a.cel-project-nav-link,
.learndash-wrapper .ld-course-navigation .cel-project-nav-item span.cel-project-nav-link {
	position: relative;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	flex-flow: row nowrap !important;
	width: 100%;
	margin: 0;
	padding: 0.45em 0.55em !important;
	box-sizing: border-box;
	gap: 0.5em;
	color: var(--cel-nav-text);
	text-decoration: none;
	cursor: default;
	border-radius: 6px;
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
	font-size: var(--cel-fs-nav);
	line-height: 1.25 !important;
	font-weight: 400;
	min-height: 28px;
}

.learndash-wrapper .ld-course-navigation .cel-project-nav-item a.cel-project-nav-link {
	cursor: pointer;
}

/* Current item — thin left bar only (same style for all states) */
.learndash-wrapper .ld-course-navigation .cel-project-nav-item.ld-is-current-item .cel-project-nav-link::before,
.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-project-nav-link.ld-is-current-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 70%;
	min-height: 16px;
	border-radius: 0 3px 3px 0;
	background: currentColor;
}

.learndash-wrapper .ld-course-navigation .cel-project-nav-item.ld-is-current-item .cel-project-nav-link,
.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-project-nav-link.ld-is-current-item {
	font-weight: 600;
}

/* Kill LD default current / complete paint on our rows */
.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-project-nav-link:focus,
.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-project-nav-link:active,
.learndash-wrapper .ld-course-navigation .ld-table-list.ld-topic-list .cel-project-nav-item .ld-table-list-item-preview.ld-is-current-item {
	outline: none !important;
}

/* ---- COMPLETE (same pattern as Pending) ---- */
.learndash-wrapper .ld-course-navigation .cel-project-nav-item.cel-project-complete .cel-project-nav-link,
.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-project-nav-link.cel-is-complete {
	background: var(--cel-nav-complete-bg) !important;
	color: #065f46 !important;
	box-shadow: inset 0 0 0 1px rgba(110, 231, 183, 0.55) !important;
}

.learndash-wrapper .ld-course-navigation .cel-project-nav-item.cel-project-complete .cel-project-nav-link:hover,
.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-project-nav-link.cel-is-complete:hover {
	background: var(--cel-nav-complete-hover) !important;
	color: var(--cel-nav-complete) !important;
}

.learndash-wrapper .ld-course-navigation .cel-project-nav-item.cel-project-complete .cel-project-nav-title__text,
.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-project-nav-link.cel-is-complete .cel-project-nav-title__text {
	color: #065f46 !important;
	font-weight: 500;
}

.learndash-wrapper .ld-course-navigation .cel-project-nav-item.cel-project-complete.ld-is-current-item .cel-project-nav-link::before,
.learndash-wrapper .ld-course-navigation .cel-project-nav-item.cel-project-complete .cel-project-nav-link.ld-is-current-item::before {
	background: var(--cel-nav-complete) !important;
}

/* ---- PENDING ---- */
.learndash-wrapper .ld-course-navigation .cel-project-nav-item.cel-project-pending .cel-project-nav-link,
.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-project-nav-link.cel-is-pending {
	background: var(--cel-nav-pending-bg) !important;
	color: #92400e !important;
	box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.5) !important;
}

.learndash-wrapper .ld-course-navigation .cel-project-nav-item.cel-project-pending .cel-project-nav-link:hover,
.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-project-nav-link.cel-is-pending:hover {
	background: var(--cel-nav-pending-hover) !important;
	color: var(--cel-nav-pending) !important;
}

.learndash-wrapper .ld-course-navigation .cel-project-nav-item.cel-project-pending .cel-project-nav-title__text,
.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-project-nav-link.cel-is-pending .cel-project-nav-title__text {
	color: #92400e !important;
	font-weight: 500;
}

.learndash-wrapper .ld-course-navigation .cel-project-nav-item.cel-project-pending.ld-is-current-item .cel-project-nav-link::before,
.learndash-wrapper .ld-course-navigation .cel-project-nav-item.cel-project-pending .cel-project-nav-link.ld-is-current-item::before {
	background: var(--cel-nav-pending) !important;
}

/* ---- OPEN (not submitted yet) ---- */
.learndash-wrapper .ld-course-navigation .cel-project-nav-item.cel-project-open .cel-project-nav-link,
.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-project-nav-link.cel-is-open {
	background: var(--cel-nav-open-bg) !important;
	color: var(--cel-nav-text-active) !important;
	box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.2) !important;
}

.learndash-wrapper .ld-course-navigation .cel-project-nav-item.cel-project-open .cel-project-nav-link:hover,
.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-project-nav-link.cel-is-open:hover {
	background: var(--cel-nav-open-hover) !important;
}

.learndash-wrapper .ld-course-navigation .cel-project-nav-item.cel-project-open .cel-project-nav-title__text,
.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-project-nav-link.cel-is-open .cel-project-nav-title__text {
	color: var(--cel-nav-text-active) !important;
	font-weight: 500;
}

.learndash-wrapper .ld-course-navigation .cel-project-nav-item.cel-project-open.ld-is-current-item .cel-project-nav-link::before,
.learndash-wrapper .ld-course-navigation .cel-project-nav-item.cel-project-open .cel-project-nav-link.ld-is-current-item::before {
	background: var(--cel-nav-project-accent) !important;
}

/* Coding wall open uses teal tint */
.learndash-wrapper .ld-course-navigation .cel-project-nav-item.cel-coding-wall-nav.cel-project-open .cel-project-nav-link,
.learndash-wrapper .ld-course-navigation .cel-project-nav-item.cel-coding-wall-nav .cel-project-nav-link.cel-is-open {
	background: var(--cel-nav-wall-bg) !important;
	color: var(--cel-nav-wall-accent) !important;
	box-shadow: inset 0 0 0 1px rgba(13, 148, 136, 0.22) !important;
}

.learndash-wrapper .ld-course-navigation .cel-project-nav-item.cel-coding-wall-nav.cel-project-open .cel-project-nav-title__text {
	color: var(--cel-nav-wall-accent) !important;
}

.learndash-wrapper .ld-course-navigation .cel-project-nav-item.cel-coding-wall-nav.cel-project-open.ld-is-current-item .cel-project-nav-link::before,
.learndash-wrapper .ld-course-navigation .cel-project-nav-item.cel-coding-wall-nav.cel-project-open .cel-project-nav-link.ld-is-current-item::before {
	background: var(--cel-nav-wall-accent) !important;
}

/* Locked */
.learndash-wrapper .ld-course-navigation .cel-project-nav-item.cel-project-locked .cel-project-nav-link,
.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-project-nav-locked {
	opacity: 1;
	cursor: not-allowed;
	background: #f9fafb !important;
	box-shadow: inset 0 0 0 1px #e5e7eb !important;
	color: var(--cel-nav-text-muted) !important;
}

.learndash-wrapper .ld-course-navigation .cel-project-nav-item.cel-project-locked .cel-project-nav-link:hover,
.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-project-nav-locked:hover {
	background: #f9fafb !important;
	color: var(--cel-nav-text-muted) !important;
}

.learndash-wrapper .ld-course-navigation .cel-project-nav-item.cel-project-locked .cel-project-nav-title__text {
	color: var(--cel-nav-text-muted) !important;
	font-weight: 400;
}

/* ---- Filled SVG icons — centered with text ---- */
.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-project-nav-icon {
	flex: 0 0 var(--cel-nav-icon) !important;
	align-self: center !important;
	width: var(--cel-nav-icon) !important;
	height: var(--cel-nav-icon) !important;
	min-width: var(--cel-nav-icon) !important;
	min-height: var(--cel-nav-icon) !important;
	margin: 0 !important;
	margin-top: 0 !important;
	margin-right: 0 !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box;
	border-radius: 5px;
	line-height: 0 !important;
	overflow: hidden;
	visibility: visible !important;
	opacity: 1 !important;
	position: relative;
	top: 0 !important;
	vertical-align: middle;
}

.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-project-nav-icon .cel-svg-icon,
.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-svg-icon--nav,
.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-svg-icon--fill {
	display: block !important;
	width: var(--cel-nav-glyph) !important;
	height: var(--cel-nav-glyph) !important;
	min-width: var(--cel-nav-glyph) !important;
	min-height: var(--cel-nav-glyph) !important;
	margin: 0 !important;
	flex-shrink: 0;
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: none;
	position: relative;
	top: 0;
}

/* Icons — same circle shape for every state (no click ring) */
.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-project-nav-icon--complete,
.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-project-nav-icon--pending,
.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-project-nav-icon--open,
.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-project-nav-icon--locked {
	border: none !important;
	border-radius: 50% !important;
	box-shadow: none !important;
}

.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-project-nav-icon--complete {
	background: var(--cel-nav-complete) !important;
	color: #fff !important;
}

.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-project-nav-icon--complete .cel-svg-icon {
	color: #fff !important;
	fill: #fff !important;
}

.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-project-nav-icon--pending {
	background: var(--cel-nav-pending) !important;
	color: #fff !important;
}

.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-project-nav-icon--pending .cel-svg-icon {
	color: #fff !important;
	fill: #fff !important;
}

.learndash-wrapper .ld-course-navigation .cel-project-nav-item[data-cel-project="lesson"] .cel-project-nav-icon--open {
	background: var(--cel-nav-project-accent) !important;
	color: #fff !important;
}

.learndash-wrapper .ld-course-navigation .cel-project-nav-item[data-cel-project="lesson"] .cel-project-nav-icon--open .cel-svg-icon {
	color: #fff !important;
	fill: #fff !important;
}

.learndash-wrapper .ld-course-navigation .cel-project-nav-item[data-cel-project="coding_wall"] .cel-project-nav-icon--open {
	background: var(--cel-nav-wall-accent) !important;
	color: #fff !important;
}

.learndash-wrapper .ld-course-navigation .cel-project-nav-item[data-cel-project="coding_wall"] .cel-project-nav-icon--open .cel-svg-icon {
	color: #fff !important;
	fill: #fff !important;
}

.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-project-nav-icon--locked {
	background: #e5e7eb !important;
	color: #6b7280 !important;
}

.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-project-nav-icon--locked .cel-svg-icon {
	color: #6b7280 !important;
	fill: #6b7280 !important;
}

/* ---- Label / title — same vertical center as icon ---- */
.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-project-nav-label {
	display: flex !important;
	align-items: center !important;
	align-self: center !important;
	flex-wrap: nowrap;
	gap: 0.4rem;
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.25 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.learndash-wrapper .ld-course-navigation .cel-project-nav-item .cel-project-nav-title__text {
	flex: 1 1 auto;
	min-width: 0;
	display: block;
	font-size: 0.875rem !important;
	line-height: 1.25 !important;
	color: inherit;
	font-weight: inherit;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 0 !important;
	padding: 0 !important;
	vertical-align: middle;
}

/* Badges */
.cel-nav-badge {
	display: inline-flex !important;
	align-items: center !important;
	align-self: center !important;
	flex-shrink: 0;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 1px 6px;
	border-radius: 4px;
	line-height: 1.25 !important;
	text-transform: uppercase;
	margin: 0 !important;
	vertical-align: middle;
}

.cel-nav-badge--complete {
	background: #d1fae5;
	color: #065f46;
	border: 1px solid var(--cel-nav-complete-border);
}

.cel-nav-badge--pending {
	background: #fef3c7;
	color: #92400e;
	border: 1px solid var(--cel-nav-pending-border);
}

.cel-nav-badge--locked {
	background: #f3f4f6;
	color: var(--cel-nav-text-muted);
	border: 1px solid #e5e7eb;
}

/* Coding wall block */
.learndash-wrapper .ld-course-navigation .cel-project-nav-item.cel-coding-wall-nav {
	margin-top: 2px;
	border-top: 1px solid #e5e7eb;
	background: linear-gradient(180deg, var(--cel-nav-wall-bg) 0%, #fff 100%);
}

.learndash-wrapper .ld-course-navigation .cel-project-nav-item.cel-coding-wall-nav .cel-project-nav-wrapper {
	padding: 0.45em 0.65em 0.55em;
}

.learndash-wrapper .ld-course-navigation .cel-project-nav-item.cel-coding-wall-nav .cel-project-nav-link {
	padding: 0.5em 0.55em;
}

/* ==========================================================================
   PROJECT SCREEN — main layout
   ========================================================================== */

.cel-project-screen {
	font-family: inherit;
	color: var(--cel-text);
	margin: 0 0 var(--cel-s8);
	font-size: var(--cel-fs-body);
	line-height: var(--cel-lh);
	-webkit-font-smoothing: antialiased;
}

.cel-project-screen p {
	margin: 0 0 var(--cel-s3);
	font-size: var(--cel-fs-body);
	line-height: var(--cel-lh);
}

.cel-project-screen p:last-child {
	margin-bottom: 0;
}

/* ---- Cover hero ---- */
.cel-project-cover {
	position: relative;
	margin: 0 0 var(--cel-gap);
	border-radius: var(--cel-radius);
	background: linear-gradient(135deg, #00a2e8 0%, var(--cel-blue) 40%, #006da3 100%);
	box-shadow: var(--cel-shadow-md);
	overflow: hidden;
}

.cel-project-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.12) 0%, transparent 50%),
		radial-gradient(circle at 0% 100%, rgba(0, 0, 0, 0.06) 0%, transparent 40%);
	pointer-events: none;
}

.cel-project-cover--wall {
	background: linear-gradient(135deg, #02b88f 0%, var(--cel-green) 40%, #015a47 100%);
}

.cel-project-cover__inner {
	position: relative;
	z-index: 1;
	padding: var(--cel-s4) var(--cel-s5) var(--cel-s5);
}

.cel-project-cover__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cel-s2);
	margin: 0 0 var(--cel-s3);
	font-size: var(--cel-fs-xs);
	line-height: var(--cel-lh-tight);
}

.cel-project-cover__crumb {
	color: rgba(255, 255, 255, 0.82);
	font-weight: 500;
}

.cel-project-cover__crumb--current {
	color: #fff;
	font-weight: 600;
}

.cel-project-cover__sep {
	display: inline-flex;
	align-items: center;
	opacity: 0.5;
}

.cel-project-cover__sep-icon {
	width: 11px;
	height: 11px;
	color: #fff;
}

.cel-project-cover__head {
	display: flex !important;
	align-items: center;
	gap: var(--cel-s3);
	visibility: visible !important;
}

.cel-project-cover__icon {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	min-width: 38px;
	border-radius: var(--cel-radius-xs);
	background: rgba(255, 255, 255, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: #fff;
	flex-shrink: 0;
}

.cel-project-cover__icon .cel-svg-icon {
	display: block !important;
	width: 20px !important;
	height: 20px !important;
	color: #fff;
}

.cel-project-cover__title {
	display: block !important;
	margin: 0;
	font-size: var(--cel-fs-title);
	font-weight: 700;
	line-height: var(--cel-lh-tight);
	color: #fff;
	flex: 1;
	min-width: 0;
	visibility: visible !important;
	opacity: 1 !important;
}

/* ---- Section headings ---- */
.cel-section-head {
	display: flex;
	align-items: center;
	gap: var(--cel-s2);
	margin: 0 0 var(--cel-s3);
	padding-bottom: var(--cel-s2);
	border-bottom: 1px solid var(--cel-border-light);
	font-size: var(--cel-fs-heading);
	font-weight: 600;
	line-height: var(--cel-lh-tight);
	color: var(--cel-ink);
}

.cel-project-card--help .cel-section-head,
.cel-project-card--submit .cel-section-head {
	border-bottom-color: transparent;
	padding-bottom: 0;
	margin-bottom: var(--cel-s3);
}

.cel-section-head__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	min-width: 28px;
	border-radius: var(--cel-radius-xs);
	background: var(--cel-blue-soft);
	color: var(--cel-blue);
	flex-shrink: 0;
}

.cel-section-head__icon .cel-svg-icon {
	width: var(--cel-icon-sm);
	height: var(--cel-icon-sm);
}

.cel-section-head__icon--blue {
	background: var(--cel-blue-soft);
	color: var(--cel-blue);
}

.cel-section-head__icon--green {
	background: var(--cel-green-soft);
	color: var(--cel-green);
}

.cel-section-head__icon--orange {
	background: var(--cel-orange-soft);
	color: var(--cel-orange);
}

.cel-section-head__text {
	flex: 1;
	min-width: 0;
}

/* ---- Task banner ---- */
.cel-task-banner {
	background: var(--cel-card);
	border: 1px solid var(--cel-border);
	border-left: 3px solid var(--cel-blue);
	border-radius: var(--cel-radius-sm);
	padding: var(--cel-s4) var(--cel-s5);
	margin-bottom: var(--cel-gap);
	box-shadow: var(--cel-shadow-xs);
}

.cel-project-screen--coding-wall .cel-task-banner {
	border-left-color: var(--cel-green);
}

.cel-task-banner__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--cel-s2);
	margin-bottom: var(--cel-s3);
	padding: var(--cel-s1) var(--cel-s3);
	font-size: var(--cel-fs-xs);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--cel-blue);
	background: var(--cel-blue-soft);
	border-radius: var(--cel-radius-pill);
}

.cel-project-screen--coding-wall .cel-task-banner__badge {
	color: var(--cel-green);
	background: var(--cel-green-soft);
}

.cel-task-banner__badge .cel-svg-icon {
	width: 13px;
	height: 13px;
}

.cel-task-banner__intro {
	color: var(--cel-text);
}

.cel-task-banner__intro p {
	margin: 0;
	font-size: var(--cel-fs-body);
	line-height: var(--cel-lh);
	color: var(--cel-text);
}

/* ---- Grid layout ---- */
.cel-project-screen__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr);
	gap: var(--cel-gap);
	align-items: start;
}

.cel-project-screen__main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.cel-project-screen__aside {
	min-width: 0;
}

/* ---- Cards ---- */
.cel-project-card {
	background: var(--cel-card);
	border: 1px solid var(--cel-border);
	border-radius: var(--cel-radius-sm);
	padding: var(--cel-s4) var(--cel-s5);
	margin-bottom: var(--cel-gap);
	box-shadow: var(--cel-shadow-xs);
}

.cel-project-card:last-child {
	margin-bottom: 0;
}

.cel-project-card--video {
	margin-bottom: var(--cel-gap);
}

.cel-project-card--help {
	background: linear-gradient(180deg, var(--cel-blue-soft) 0%, #f5fbfe 100%);
	border-color: #cce9f7;
}

.cel-project-screen--coding-wall .cel-project-card--help {
	background: linear-gradient(180deg, var(--cel-green-soft) 0%, #f4fbf9 100%);
	border-color: #b8e8dc;
}

.cel-project-card--submit {
	position: sticky;
	top: var(--cel-s4);
	padding: var(--cel-s4) var(--cel-s5) var(--cel-s5);
	border-top: none;
	box-shadow: var(--cel-shadow);
	background: linear-gradient(180deg, var(--cel-blue-muted) 0%, var(--cel-card) 24%);
}

.cel-project-card--submit::before {
	content: "";
	display: block;
	height: 2px;
	margin: calc(-1 * var(--cel-s4)) calc(-1 * var(--cel-s5)) var(--cel-s3);
	background: linear-gradient(90deg, var(--cel-blue), #33b5e5);
	border-radius: var(--cel-radius-sm) var(--cel-radius-sm) 0 0;
}

.cel-project-card--coding-wall.cel-project-card--submit {
	background: linear-gradient(180deg, #f0faf7 0%, var(--cel-card) 28%);
}

.cel-project-card--coding-wall.cel-project-card--submit::before {
	background: linear-gradient(90deg, var(--cel-green), #02c99a);
}

.cel-submit-hint {
	margin: 0 0 var(--cel-s4);
	color: var(--cel-muted);
	font-size: var(--cel-fs-sm);
	line-height: var(--cel-lh);
}

/* ---- Video ---- */
.cel-project-video-wrap .cel-project-video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border-radius: var(--cel-radius-sm);
	background: #0f172a;
	box-shadow: var(--cel-shadow-xs);
}

.cel-project-video-wrap .cel-project-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---- Instruction steps ---- */
.cel-project-steps ol {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: cel-step;
	display: flex;
	flex-direction: column;
	gap: var(--cel-s3);
}

.cel-project-steps ol > li {
	display: flex;
	align-items: flex-start;
	gap: var(--cel-s3);
	counter-increment: cel-step;
	padding: var(--cel-s3) var(--cel-s4);
	font-size: var(--cel-fs-body);
	line-height: var(--cel-lh);
	border-radius: var(--cel-radius-xs);
	background: var(--cel-bg);
	border: 1px solid var(--cel-border);
	color: var(--cel-text);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cel-project-steps ol > li:hover {
	border-color: #cbd5e1;
	box-shadow: var(--cel-shadow-xs);
}

.cel-project-steps ol > li > p,
.cel-project-steps ol > li > span {
	margin: 0;
	flex: 1;
	min-width: 0;
	padding-top: 2px;
}

.cel-project-steps ol > li::before {
	content: counter(cel-step);
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--cel-blue);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.cel-project-screen--coding-wall .cel-project-steps ol > li::before {
	background: var(--cel-green);
}

.cel-project-help-text p {
	margin: 0 0 var(--cel-s4);
	color: var(--cel-text);
	line-height: var(--cel-lh-loose);
}

.cel-project-help-text p:last-child {
	margin-bottom: var(--cel-s4);
}

/* ---- Buttons ---- */
.cel-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cel-s2);
	padding: var(--cel-s2) var(--cel-s4);
	border-radius: var(--cel-radius-xs);
	border: none;
	font-family: inherit;
	font-weight: 600;
	font-size: var(--cel-fs-sm);
	line-height: var(--cel-lh-tight);
	cursor: pointer;
	text-decoration: none;
	transition:
		background 0.15s ease,
		color 0.15s ease,
		border-color 0.15s ease,
		box-shadow 0.15s ease;
}

.cel-btn .cel-svg-icon {
	width: var(--cel-icon-sm);
	height: var(--cel-icon-sm);
}

.cel-btn__arrow {
	opacity: 0.8;
	transition: transform 0.15s ease;
}

.cel-btn:hover .cel-btn__arrow {
	transform: translateX(2px);
}

.cel-btn-primary {
	background: var(--cel-blue);
	color: #fff;
	width: 100%;
	min-height: 40px;
	padding: var(--cel-s2) var(--cel-s4);
	box-shadow: 0 1px 4px var(--cel-blue-glow);
	font-size: var(--cel-fs-sm);
}

.cel-btn-primary:hover {
	background: var(--cel-blue-dark);
	color: #fff;
	box-shadow: 0 2px 8px rgba(0, 149, 217, 0.22);
}

.cel-btn-primary:active {
	transform: translateY(1px);
}

.cel-project-screen--coding-wall .cel-btn-primary {
	background: var(--cel-green);
	box-shadow: 0 2px 8px var(--cel-green-glow);
}

.cel-project-screen--coding-wall .cel-btn-primary:hover {
	background: var(--cel-green-dark);
	box-shadow: 0 4px 14px rgba(1, 158, 124, 0.28);
}

.cel-btn-video {
	background: var(--cel-blue);
	color: #fff;
	border: none;
	padding: 0.5rem 1.1rem;
	min-height: 36px;
	font-size: var(--cel-fs-sm);
	font-weight: 600;
	box-shadow: 0 1px 4px var(--cel-blue-glow);
}

.cel-btn-video:hover {
	background: var(--cel-blue-dark);
	color: #fff;
	box-shadow: 0 2px 8px rgba(0, 149, 217, 0.25);
}

.cel-btn-secondary {
	background: #fff;
	color: var(--cel-blue);
	border: 1.5px solid var(--cel-blue);
}

.cel-btn-secondary:hover {
	background: var(--cel-blue);
	color: #fff;
}

.cel-project-screen--coding-wall .cel-btn-video {
	background: var(--cel-green);
	box-shadow: 0 1px 4px var(--cel-green-glow);
}

.cel-project-screen--coding-wall .cel-btn-video:hover {
	background: var(--cel-green-dark);
	box-shadow: 0 2px 8px rgba(1, 158, 124, 0.25);
}

/* ---- Form ---- */
.cel-project-form {
	margin-top: var(--cel-s2);
}

.cel-field-label {
	display: flex;
	align-items: center;
	gap: var(--cel-s2);
	font-weight: 600;
	margin-bottom: var(--cel-s2);
	font-size: var(--cel-fs-sm);
	color: var(--cel-ink);
}

.cel-field-label__icon {
	width: var(--cel-icon-xs);
	height: var(--cel-icon-xs);
	color: var(--cel-muted);
}

.cel-project-url-input {
	width: 100%;
	padding: var(--cel-s2) var(--cel-s3);
	border: 1px solid var(--cel-border);
	border-radius: var(--cel-radius-xs);
	font-family: inherit;
	font-size: var(--cel-fs-sm);
	line-height: var(--cel-lh-tight);
	margin-bottom: var(--cel-s3);
	background: #fff;
	color: var(--cel-ink);
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cel-project-url-input:hover {
	border-color: #cbd5e1;
}

.cel-project-url-input:focus {
	outline: none;
	border-color: var(--cel-blue);
	box-shadow: 0 0 0 3px var(--cel-blue-glow);
}

.cel-project-screen--coding-wall .cel-project-url-input:focus {
	border-color: var(--cel-green);
	box-shadow: 0 0 0 3px var(--cel-green-glow);
}

.cel-project-url-input::placeholder {
	color: #94a3b8;
	opacity: 1;
}

/* ---- Status ---- */
.cel-project-status {
	display: flex;
	align-items: center;
	gap: var(--cel-s3);
	padding: var(--cel-s3) var(--cel-s4);
	border-radius: var(--cel-radius-sm);
	font-size: var(--cel-fs-sm);
	font-weight: 600;
	margin-bottom: var(--cel-s4);
	line-height: var(--cel-lh-tight);
}

.cel-project-status__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cel-project-status__icon .cel-svg-icon {
	width: var(--cel-icon-sm);
	height: var(--cel-icon-sm);
}

.cel-project-status--pending {
	background: var(--cel-yellow-soft);
	color: #92400e;
	border: 1px solid #fde68a;
}

.cel-project-status--approved {
	background: var(--cel-green-soft);
	color: var(--cel-green);
	border: 1px solid #b8e8dc;
}

.cel-project-status--rejected {
	background: var(--cel-red-soft);
	color: var(--cel-red);
	border: 1px solid #fecaca;
}

.cel-project-admin-notes {
	margin: 0 0 var(--cel-s4);
	padding: var(--cel-s4);
	border-radius: var(--cel-radius-sm);
	background: var(--cel-bg);
	border: 1px solid var(--cel-border);
}

.cel-project-admin-notes strong {
	display: block;
	color: var(--cel-ink);
	font-size: var(--cel-fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--cel-s2);
}

.cel-project-admin-notes p {
	margin: 0;
	font-size: var(--cel-fs-sm);
	color: var(--cel-muted);
	line-height: var(--cel-lh);
}

.cel-project-form-msg {
	margin-top: var(--cel-s3);
	font-size: var(--cel-fs-sm);
	font-weight: 500;
}

.cel-project-form-msg.is-success {
	color: var(--cel-green);
}

.cel-project-form-msg.is-error {
	color: var(--cel-red);
}

/* ---- Inline CTA ---- */
.cel-inline-project-cta {
	margin-top: var(--cel-s6);
	padding: var(--cel-s5) var(--cel-s6);
	border: 1px solid #f5cba7;
	border-radius: var(--cel-radius);
	background: linear-gradient(180deg, var(--cel-orange-soft) 0%, #fff 100%);
	box-shadow: var(--cel-shadow);
}

.cel-inline-project-cta .cel-section-head {
	margin-bottom: var(--cel-s3);
	padding-bottom: var(--cel-s3);
	border-bottom-color: rgba(227, 107, 18, 0.15);
}

.cel-inline-project-cta__text {
	margin: 0 0 var(--cel-s4);
	font-size: var(--cel-fs-body);
	color: var(--cel-text);
	line-height: var(--cel-lh);
}

.cel-inline-project-cta__status {
	margin-bottom: var(--cel-s4);
}

.cel-inline-project-cta__btn {
	width: auto;
	min-width: 200px;
}

/* ---- Coding wall shortcode ---- */
.cel-coding-wall {
	font-family: inherit;
	font-size: var(--cel-fs-body);
	color: var(--cel-text);
}

.cel-coding-wall__empty {
	display: flex;
	align-items: center;
	gap: var(--cel-s3);
	margin: 0;
	padding: var(--cel-s5) var(--cel-s6);
	border: 1px dashed var(--cel-border);
	border-radius: var(--cel-radius);
	background: var(--cel-bg);
	color: var(--cel-muted);
}

.cel-coding-wall__empty .cel-svg-icon {
	width: var(--cel-icon-md);
	height: var(--cel-icon-md);
	color: var(--cel-green);
}

.cel-coding-wall__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--cel-gap);
}

.cel-coding-wall__card {
	background: var(--cel-card);
	border: 1px solid var(--cel-border);
	border-radius: var(--cel-radius);
	overflow: hidden;
	box-shadow: var(--cel-shadow);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.cel-coding-wall__card:hover {
	box-shadow: var(--cel-shadow-md);
	transform: translateY(-2px);
}

.cel-coding-wall__card-body {
	padding: var(--cel-s5);
}

.cel-coding-wall__name {
	margin: 0 0 var(--cel-s2);
	font-size: var(--cel-fs-heading);
	font-weight: 700;
	color: var(--cel-ink);
}

.cel-coding-wall__course {
	margin: 0 0 var(--cel-s4);
	color: var(--cel-muted);
	font-size: var(--cel-fs-sm);
}

.cel-coding-wall__view {
	width: 100%;
}

.cel-coding-wall__view:hover {
	background: var(--cel-blue);
	color: #fff;
	border-color: var(--cel-blue);
}

/* ---- Links ---- */
.cel-project-screen .cel-project-help-text a,
.cel-project-screen .cel-task-banner__intro a {
	color: var(--cel-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cel-project-screen--coding-wall .cel-project-help-text a,
.cel-project-screen--coding-wall .cel-task-banner__intro a {
	color: var(--cel-green);
}

/* ---- Focus ---- */
.cel-btn:focus-visible,
.cel-project-url-input:focus-visible {
	outline: 2px solid var(--cel-blue);
	outline-offset: 2px;
}

.cel-project-screen--coding-wall .cel-btn:focus-visible {
	outline-color: var(--cel-green);
}

/* ---- Legacy hide ---- */
.cel-project-screen .cel-badge-new,
.cel-project-nav-item .cel-badge-new,
.cel-inline-project-cta__badge,
.cel-badge-done,
.cel-badge-pending,
.cel-badge-locked {
	display: none !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 980px) {
	.cel-project-screen__grid {
		grid-template-columns: 1fr;
		gap: var(--cel-s4);
	}

	.cel-project-card--submit {
		position: static;
	}

	.cel-project-card--submit::before {
		margin-bottom: var(--cel-s5);
	}
}

@media (max-width: 640px) {
	:root {
		--cel-fs-title: 1.25rem;
		--cel-gap: var(--cel-s3);
	}

	.cel-project-cover__inner {
		padding: var(--cel-s3) var(--cel-s4) var(--cel-s4);
	}

	.cel-project-cover__icon {
		width: 30px;
		height: 30px;
		min-width: 30px;
	}

	.cel-project-cover__icon .cel-svg-icon {
		width: 15px;
		height: 15px;
	}

	.cel-project-card {
		padding: var(--cel-s3) var(--cel-s4);
	}

	.cel-project-card--submit {
		padding: var(--cel-s3) var(--cel-s4) var(--cel-s4);
	}

	.cel-project-card--submit::before {
		margin: calc(-1 * var(--cel-s3)) calc(-1 * var(--cel-s4)) var(--cel-s3);
	}

	.cel-task-banner {
		padding: var(--cel-s3) var(--cel-s4);
	}

	.cel-btn-video,
	.cel-inline-project-cta__btn {
		width: 100%;
	}

	.cel-nav-badge {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cel-btn,
	.cel-project-steps ol > li,
	.cel-coding-wall__card,
	.cel-project-nav-item .cel-project-nav-link {
		transition: none;
	}

	.cel-btn:hover .cel-btn__arrow {
		transform: none;
	}

	.cel-project-steps ol > li:hover {
		transform: none;
	}
}