/* ============================================================================
   Courses house style — static/css/components/courses-house-style.css

   Overrides colour/typography on the courses catalog, dashboard and lesson
   shell to the approved house style (cream/mint/teal/tangerine/gold,
   theme.css --cream/--mint/--teal-deep/--gold/--tangerine, --jm-font-display,
   --jm-font-mono). Layered on top of courses/static/courses/css/clean-theme.css
   (kept as the structural scaffold) — not a rewrite of that file.

   No purple/violet. Tokens only, no raw hex duplicating a theme.css value
   (scripts/check_css_tokens.py).
   =========================================================================== */

.courses-app-clean {
    background: var(--cream);
    --course-bg: var(--cream);
    --course-card: var(--paper);
    --course-border: var(--line);
    --font-display: var(--jm-font-display);
}

.courses-app-clean .clean-dashboard {
    background: var(--cream);
}

/* ---- Page header ---- */
.courses-app-clean .clean-page-header h1,
.courses-app-clean .clean-header-info .clean-course-title {
    font-family: var(--jm-font-display);
    color: var(--teal-ink);
}

/* ---- Catalog + dashboard cards ---- */
.courses-app-clean .clean-course-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    transition: transform 0.15s ease;
}
.courses-app-clean .clean-course-card:hover {
    transform: translateY(-3px);
}

.courses-app-clean .clean-course-card-footer .btn-sm {
    min-height: 0;
    padding: 0.375rem 0.75rem;
}

.courses-app-clean .clean-programme-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--jm-font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--teal-deep);
    background: var(--mint);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
}

.courses-app-clean .clean-course-title,
.courses-app-clean .clean-module-title,
.courses-app-clean .dash-title {
    font-family: var(--jm-font-display);
    color: var(--teal-ink);
}

.courses-app-clean .clean-course-desc,
.courses-app-clean .clean-module-desc,
.courses-app-clean .clean-lesson-count,
.courses-app-clean .clean-course-meta,
.courses-app-clean .clean-progress-text {
    color: var(--muted);
}

.courses-app-clean .clean-card-progress,
.courses-app-clean .clean-progress-bar,
.courses-app-clean .clean-progress-bar-full {
    background: var(--mint2);
}
.courses-app-clean .clean-card-progress-fill,
.courses-app-clean .clean-progress-fill,
.courses-app-clean .clean-progress-fill-full {
    background: linear-gradient(90deg, var(--teal), var(--tangerine));
}

.courses-app-clean .clean-module-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
}
.courses-app-clean .clean-module-number {
    font-family: var(--jm-font-mono);
    letter-spacing: 0.06em;
}
.courses-app-clean .clean-lesson-list {
    border-top-color: var(--line);
}
.courses-app-clean .clean-lesson-item {
    border-color: var(--line);
}
/* Completed lessons: gold check, not a bare green dot — colour-blind safe
   (matches the walkthrough rules' "never rely on red/green alone"). */
.courses-app-clean .clean-lesson-item.completed .clean-lesson-status i {
    color: var(--gold) !important;
}

/* ---- Release-stage badges: gold for "coming soon" energy instead of
   generic Bootstrap amber/blue ---- */
.courses-app-clean .course-stage-badge.stage-beta,
.courses-app-clean .course-stage-badge.stage-preview,
.courses-app-clean .course-stage-badge.stage-coming-soon {
    background: #fff3de;
    color: #b8790a;
    border: 1px solid #ffdd9e;
}

/* ---- Primary CTAs on catalog/dashboard (Enroll / Continue Learning /
   View Course) — scoped to .courses-app-clean so it never touches the
   global Bootstrap primary button elsewhere on the site. ---- */
.courses-app-clean .btn-primary {
    background-color: var(--teal-deep);
    border-color: var(--teal-deep);
}
.courses-app-clean .btn-primary:hover,
.courses-app-clean .btn-primary:focus {
    background-color: var(--teal-ink);
    border-color: var(--teal-ink);
}
.courses-app-clean .btn-outline-primary {
    color: var(--teal-deep);
    border-color: var(--teal);
}
.courses-app-clean .btn-outline-primary:hover {
    background-color: var(--teal-deep);
    border-color: var(--teal-deep);
}

/* Lesson content blocks (key-point/try-this/framework) are styled directly in
   static/css/components/lesson-shell.css, extracted from lesson_detail.html's
   former inline <style> block — not duplicated here. */
/* "IB Framework" panel label — was purple (#7c3aed), a banned colour. */
.courses-app-clean .panel-label--framework {
    color: var(--tangerine);
}