/**
 * Harvest Companion LMS — student-facing design.
 * Warm, pastoral palette in the spirit of the Companion Pipeline wireframes.
 * Scoped under .hclms so tenant themes are never disturbed.
 */

/* Legacy local names now resolve to the shared design tokens
   (assets/css/design-tokens.css) — one source of truth. */
.hclms {
	--hclms-cream: var(--hc-bg-card);
	--hclms-sand: var(--hc-bg-subtle-deeper);
	--hclms-tan: var(--hc-accent);
	--hclms-tan-deep: var(--hc-accent-hover);
	--hclms-brown: var(--hc-text-secondary);
	--hclms-ink: var(--hc-text-primary);
	--hclms-green: var(--hc-success);
	--hclms-line: var(--hc-border);
}

/* ------- chips ------- */
.hclms-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 18px;
}
.hclms-chip {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 999px;
	background: var(--hclms-tan);
	color: #fff;
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.hclms-chip-soft {
	background: var(--hclms-sand);
	color: var(--hclms-brown);
}
.hclms-chip-done {
	background: var(--hclms-green);
}
/* Pipeline identity colors (Companion Pipeline board colors). */
.hclms-chip-welcome_home { background: var(--hc-pipeline-wh); }
.hclms-chip-bible_study { background: var(--hc-pipeline-bs); }
.hclms-chip-discipleship { background: var(--hc-pipeline-disc); }

/* ------- cards ------- */
.hclms-card {
	background: var(--hclms-cream);
	border: 1px solid var(--hclms-line);
	border-radius: 12px;
	padding: 20px 24px;
	margin: 18px 0;
	box-shadow: 0 1px 3px rgba(92, 74, 50, 0.06);
}
.hclms-status-card {
	border-left: 4px solid var(--hclms-tan);
}
.hclms-status-line {
	margin: 0 0 10px;
	font-weight: 600;
	color: var(--hclms-brown);
}
.hclms-complete {
	color: var(--hclms-green);
}

/* ------- buttons ------- */
.hclms-btn {
	display: inline-block;
	padding: 9px 20px;
	border: 1px solid var(--hclms-tan-deep);
	border-radius: 8px;
	background: #fff;
	color: var(--hclms-tan-deep);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.hclms-btn:hover {
	background: var(--hclms-sand);
	color: var(--hclms-brown);
	text-decoration: none;
}
.hclms-btn-primary {
	background: var(--hclms-tan);
	border-color: var(--hclms-tan);
	color: #fff;
}
.hclms-btn-primary:hover {
	background: var(--hclms-tan-deep);
	border-color: var(--hclms-tan-deep);
	color: #fff;
}

/* ------- progress ------- */
.hclms-progress {
	height: 12px;
	border-radius: 999px;
	background: var(--hclms-sand);
	overflow: hidden;
	margin: 10px 0 4px;
}
.hclms-progress-fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--hclms-tan), var(--hclms-tan-deep));
	transition: width 0.4s ease;
}
.hclms-progress-label {
	margin: 0 0 12px;
	font-size: 0.85em;
	color: var(--hclms-brown);
}

/* ------- outline ------- */
.hclms-outline-heading {
	margin-top: 28px;
}
.hclms-section-card {
	padding: 16px 24px;
}
.hclms-section-title {
	margin: 0 0 10px;
	color: var(--hclms-brown);
	font-size: 1.05em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.hclms-outline-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.hclms-outline-list li {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px dotted var(--hclms-line);
}
.hclms-outline-list li:last-child {
	border-bottom: none;
}
.hclms-tick {
	color: var(--hclms-tan);
	font-weight: 700;
	width: 1.2em;
	flex: none;
}
.hclms-done .hclms-tick {
	color: var(--hclms-green);
}
.hclms-done a {
	color: var(--hclms-brown);
}
.hclms-locked {
	color: #8a7d68;
}
.hclms-lock {
	font-size: 0.85em;
}

/* ------- lesson video + materials ------- */
.hclms-video {
	position: relative;
	margin: 0 0 20px;
	border-radius: var(--hc-radius-lg, 10px);
	overflow: hidden;
	box-shadow: var(--hc-shadow-card-hover, 0 2px 4px rgba(28, 26, 21, 0.06), 0 4px 12px rgba(28, 26, 21, 0.08));
	aspect-ratio: 16 / 9;
	background: #000;
}
.hclms-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.hclms-materials-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.hclms-materials-list li {
	padding: 6px 0;
	border-bottom: 1px dotted var(--hclms-line);
}
.hclms-materials-list li:last-child { border-bottom: none; }
.hclms-materials-list a {
	text-decoration: none;
	font-weight: 600;
	color: var(--hc-accent-deep, #8a4f3d);
}

/* ------- lesson page ------- */
.hclms-breadcrumb {
	margin-bottom: 6px;
	font-size: 0.9em;
}
.hclms-breadcrumb a {
	color: var(--hclms-tan-deep);
	text-decoration: none;
}
.hclms-gate {
	border-left: 4px solid var(--hclms-tan);
	text-align: center;
	padding: 32px 24px;
}
.hclms-lesson-actions {
	text-align: center;
}
.hclms-lesson-nav {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

/* ------- dashboard / catalog grid ------- */
.hclms-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 18px;
}
.hclms-course-card h3 {
	margin: 0 0 10px;
	font-size: 1.1em;
}
.hclms-course-card h3 a {
	color: var(--hclms-brown);
	text-decoration: none;
}
.hclms-course-card h3 a:hover {
	color: var(--hclms-tan-deep);
}
.hclms-excerpt {
	font-size: 0.92em;
	color: #6b5d48;
}

/* ==================== Course landing page (template) ==================== */
.hclms-course-landing {
	max-width: 1180px;
	margin: 0 auto;
	padding: var(--hc-space-6) var(--hc-space-5) var(--hc-space-12);
}
.hclms-celebrate-banner {
	background: var(--hc-celebrate-subtle);
	color: var(--hc-celebrate);
	border: 1px solid var(--hc-celebrate);
	border-radius: var(--hc-radius-lg);
	padding: var(--hc-space-4) var(--hc-space-5);
	font-weight: 600;
	font-size: var(--hc-text-lg);
	margin-bottom: var(--hc-space-5);
	text-align: center;
}
.hclms-hero {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--hc-space-8);
	align-items: center;
	background: var(--hc-bg-card);
	border: 1px solid var(--hc-border);
	border-radius: var(--hc-radius-xl);
	box-shadow: var(--hc-shadow-card-hover);
	padding: var(--hc-space-8);
	margin-bottom: var(--hc-space-6);
}
.hclms-hero-noimage { grid-template-columns: 1fr; }
.hclms-hero-title {
	font-size: var(--hc-text-3xl);
	margin: var(--hc-space-3) 0;
}
.hclms-hero-tagline {
	color: var(--hc-text-secondary);
	font-size: var(--hc-text-lg);
	line-height: 1.65;
}
.hclms-hero-cta { margin-top: var(--hc-space-5); }
.hclms-btn-lg { padding: 13px 28px; font-size: var(--hc-text-base); }
.hclms-hero-progress { max-width: 320px; margin-top: var(--hc-space-3); }
.hclms-arranged {
	background: var(--hc-bg-subtle);
	border-radius: var(--hc-radius-md);
	padding: var(--hc-space-3) var(--hc-space-4);
	display: inline-block;
}
.hclms-hero-media img {
	width: 100%;
	border-radius: var(--hc-radius-lg);
	box-shadow: var(--hc-shadow-pop);
	display: block;
}
.hclms-also-available { margin-top: var(--hc-space-4); }
.hclms-also-available .hc-label { margin-right: 8px; }
.hclms-also-available a { font-weight: 600; }

.hclms-landing-columns {
	display: grid;
	grid-template-columns: minmax(0, 8fr) minmax(240px, 4fr);
	gap: var(--hc-space-6);
	align-items: start;
}
.hclms-section-count {
	float: right;
	font-size: var(--hc-text-xs);
	font-weight: 600;
	color: var(--hc-text-tertiary);
	text-transform: none;
	letter-spacing: 0;
}

/* Instructor */
.hclms-instructor-row { display: flex; gap: var(--hc-space-4); align-items: flex-start; }
.hclms-instructor-photo { border-radius: var(--hc-radius-round); flex: none; }
.hclms-instructor-name { font-family: var(--hc-font-heading); font-size: var(--hc-text-lg); font-weight: 500; margin: 0 0 4px; }
.hclms-instructor-bio { font-size: var(--hc-text-sm); color: var(--hc-text-secondary); margin: 0; }

/* Related courses / What's next */
.hclms-related-grid { display: flex; flex-direction: column; gap: var(--hc-space-2); }
.hclms-related-card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--hc-space-3);
	padding: var(--hc-space-3) var(--hc-space-4);
	background: var(--hc-bg-subtle);
	border: 1px solid var(--hc-border);
	border-radius: var(--hc-radius-md);
	text-decoration: none;
	font-weight: 600;
	color: var(--hc-text-primary);
	transition: var(--hc-transition);
}
.hclms-related-card:hover {
	border-color: var(--hc-accent);
	background: var(--hc-accent-subtle);
	color: var(--hc-accent-deep);
}
.hclms-related-go { color: var(--hc-accent); }
.hclms-whats-next {
	border-left: 4px solid var(--hc-celebrate);
	margin-bottom: var(--hc-space-6);
}
.hclms-whats-next h2 { margin: 4px 0 var(--hc-space-4); font-size: var(--hc-text-xl); }
.hclms-up-next { margin: var(--hc-space-2) 0 0; font-size: var(--hc-text-sm); }
.hclms-up-next .hc-label { margin-right: 6px; }

@media (max-width: 880px) {
	.hclms-hero { grid-template-columns: 1fr; padding: var(--hc-space-5); }
	.hclms-hero-media { order: -1; }
	.hclms-landing-columns { grid-template-columns: 1fr; }
}

/* ==================== Student lesson page (template) ==================== */
.hclms-lesson-page {
	max-width: 1280px;
	margin: 0 auto;
	padding: var(--hc-space-6) var(--hc-space-5) var(--hc-space-12);
}

/* Header bar */
.hclms-lesson-header {
	display: flex;
	align-items: center;
	gap: var(--hc-space-6);
	flex-wrap: wrap;
	background: var(--hc-bg-card);
	border: 1px solid var(--hc-border);
	border-radius: var(--hc-radius-lg);
	box-shadow: var(--hc-shadow-card);
	padding: var(--hc-space-3) var(--hc-space-5);
	margin-bottom: var(--hc-space-4);
}
.hclms-lesson-header-main { flex: 1; min-width: 200px; }
.hclms-lesson-header-main .hc-label { margin: 0; }
.hclms-lesson-course-link {
	font-family: var(--hc-font-heading);
	font-size: var(--hc-text-lg);
	font-weight: 500;
	color: var(--hc-text-primary);
	text-decoration: none;
}
.hclms-lesson-course-link:hover { color: var(--hc-accent-hover); }
.hclms-lesson-header-progress { width: 220px; }
.hclms-lesson-header-progress .hclms-progress { margin: 0 0 2px; }
.hclms-lesson-header-progress .hclms-progress-label { margin: 0; font-size: var(--hc-text-xs); }

/* Language switcher */
.hclms-lang-switch { display: flex; gap: 6px; flex-wrap: wrap; }
.hclms-lang {
	padding: 3px 12px;
	border-radius: var(--hc-radius-pill);
	font-size: var(--hc-text-xs);
	font-weight: 600;
	text-decoration: none;
	border: 1px solid var(--hc-border-strong);
	color: var(--hc-text-secondary);
	background: var(--hc-bg-card);
	transition: var(--hc-transition);
}
.hclms-lang:hover { border-color: var(--hc-accent); color: var(--hc-accent-deep); }
.hclms-lang.is-current { background: var(--hc-accent); border-color: var(--hc-accent); color: #fff; }

.hclms-preview-notice {
	background: var(--hc-info-subtle);
	color: var(--hc-info);
	border-radius: var(--hc-radius-md);
	padding: var(--hc-space-2) var(--hc-space-4);
	font-size: var(--hc-text-sm);
	font-weight: 600;
	margin-bottom: var(--hc-space-4);
}
.hclms-draft-chip {
	display: inline-block;
	margin-left: 6px;
	padding: 0 8px;
	border-radius: var(--hc-radius-pill);
	background: var(--hc-warning-subtle);
	color: var(--hc-warning);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.hclms-approx-notice {
	background: var(--hc-warning-subtle);
	color: var(--hc-warning);
	border-radius: var(--hc-radius-md);
	padding: var(--hc-space-2) var(--hc-space-4);
	font-size: var(--hc-text-sm);
	font-weight: 600;
	margin-bottom: var(--hc-space-4);
}

/* Two-column layout */
.hclms-lesson-layout {
	display: grid;
	grid-template-columns: minmax(220px, 25%) 1fr;
	gap: var(--hc-space-6);
	align-items: start;
}

/* Outline rail */
.hclms-rail {
	position: sticky;
	top: 96px;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: var(--hc-space-2);
}
.hclms-rail-section {
	background: var(--hc-bg-card);
	border: 1px solid var(--hc-border);
	border-radius: var(--hc-radius-lg);
	box-shadow: var(--hc-shadow-card);
	overflow: hidden;
}
.hclms-rail-section summary {
	cursor: pointer;
	padding: var(--hc-space-2) var(--hc-space-3);
	font-size: var(--hc-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--hc-label-spacing);
	color: var(--hc-text-tertiary);
	list-style: none;
}
.hclms-rail-section summary::-webkit-details-marker { display: none; }
.hclms-rail-section[open] summary { border-bottom: 1px solid var(--hc-border); }
.hclms-rail-lessons { list-style: none; margin: 0; padding: 4px 0; }
.hclms-rail-lessons li {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 7px var(--hc-space-3);
	font-size: var(--hc-text-sm);
	border-left: 3px solid transparent;
}
.hclms-rail-lessons li a { color: var(--hc-text-primary); text-decoration: none; }
.hclms-rail-lessons li a:hover { color: var(--hc-accent-hover); }
.hclms-rail-lessons li.is-current {
	background: var(--hc-accent-subtle);
	border-left-color: var(--hc-accent);
}
.hclms-rail-lessons li.is-current a { font-weight: 700; color: var(--hc-accent-deep); }
.hclms-rail-lessons li.is-done .hclms-tick { color: var(--hc-success); }

/* Content pane */
.hclms-pane { min-width: 0; }
.hclms-lesson-title {
	font-size: var(--hc-text-2xl);
	margin: 0 0 var(--hc-space-4);
}
.hclms-lesson-body {
	font-size: var(--hc-text-lg);
	line-height: 1.75;
	margin-bottom: var(--hc-space-5);
}

/* Comments (Class discussion) */
.hclms-comments { margin-top: var(--hc-space-6); }
.hclms-comments .comment-list { list-style: none; margin: 0; padding: 0; }
.hclms-comments .comment-list .comment {
	background: var(--hc-bg-card);
	border: 1px solid var(--hc-border);
	border-radius: var(--hc-radius-lg);
	padding: var(--hc-space-3) var(--hc-space-4);
	margin-bottom: var(--hc-space-3);
}
.hclms-comments .comment-list .children { list-style: none; margin: var(--hc-space-3) 0 0 var(--hc-space-5); padding: 0; }
.hclms-comments .comment-author .fn { font-style: normal; font-weight: 700; font-size: var(--hc-text-sm); }
.hclms-comments .comment-metadata { font-size: var(--hc-text-xs); }
.hclms-comments .comment-metadata a { color: var(--hc-text-tertiary); text-decoration: none; }
.hclms-comments .comment-respond textarea {
	width: 100%;
	border: 1px solid var(--hc-border);
	border-radius: var(--hc-radius-md);
	background: var(--hc-bg-card);
	padding: var(--hc-space-3);
}
.hclms-comments .comment-respond input[type='submit'],
.hclms-comments .form-submit .submit {
	background: var(--hc-accent);
	border: 1px solid var(--hc-accent);
	border-radius: var(--hc-radius-md);
	color: #fff;
	font-weight: 600;
	padding: 9px 20px;
	cursor: pointer;
	transition: var(--hc-transition);
}
.hclms-comments .comment-respond input[type='submit']:hover { background: var(--hc-accent-hover); }
.hclms-comments .comment-reply-title,
.hclms-comments .comments-title {
	font-family: var(--hc-font-heading);
	font-weight: 500;
	font-size: var(--hc-text-lg);
}

@media (max-width: 880px) {
	.hclms-lesson-layout { grid-template-columns: 1fr; }
	.hclms-rail { position: static; max-height: none; order: 2; }
	.hclms-pane { order: 1; }
}

@media (max-width: 480px) {
	.hclms-card { padding: 16px; }
	.hclms-lesson-nav { flex-direction: column; }
	.hclms-lesson-nav .hclms-btn { text-align: center; }
	.hclms-lesson-header { gap: var(--hc-space-3); }
}