/*
 * LOUDmusic Course / LMS portal redesign.
 *
 * Scoped to Fluent Community's course pages only:
 *   /portal/courses                                  (.fcom_courses)
 *   /portal/course/{slug}/lessons                     (.course_box, .app_side_widget.course_widget)
 *   /portal/course/{slug}/lessons/{lesson}/view        (.fcom_lesson_container)
 *
 * Uses the site's existing --fcom-* theme tokens throughout (no hardcoded
 * light/dark colors) so these pages respect the site-wide light/dark toggle
 * like every other portal page — an earlier pass forced a permanent near-black
 * background here and that was reverted per feedback.
 *
 * Curriculum page (section 2) syllabus layout is modeled on a reference with
 * plain bold section headers ("01. Navigation") followed by a minimal lesson
 * list (status icon / title / duration, thin row dividers, no thumbnails) —
 * https://mobbin.com/screens/ba0ea65e-e838-45b1-a9e7-c513f4b02e63
 *
 * All selectors are scoped under course-page-only wrapper classes so nothing
 * here touches Spaces/Feed/Messages, which reuse some of the same generic
 * Fluent Community component classes (.fcom_section_item, .fcom_card_sections, etc).
 */

.fcom_wrap {
    --lm-course-accent-grad: linear-gradient(135deg, #7c3aed 0%, #2563eb 45%, #06b6d4 100%);
}

/* Fluent caps its content column at 1080px (".fcom_max_layout .fhr_content_layout_body")
   for readability on text feeds. That cap is wrong for a full-bleed tile grid /
   video-first layout — remove it so course pages use the full available width
   next to the sidebar. */
.fcom_wrap .fhr_content_layout_body:has(.fcom_courses),
.fcom_wrap .fhr_content_layout_body:has(.course_box) {
    max-width: 100% !important;
    padding-left: clamp(20px, 4vw, 56px) !important;
    padding-right: clamp(20px, 4vw, 56px) !important;
    box-sizing: border-box;
}

/* ==========================================================================
   1. Courses grid — /portal/courses
      Full-bleed tile grid instead of a bordered admin card list.
   ========================================================================== */

.fcom_wrap .el-scrollbar__view:has(> .fhr_content_layout_body .fcom_courses) .fhr_page_actions .object_menu .fcom_space_menu_ul {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    background: var(--fcom-secondary-content-bg);
    border: 1px solid var(--fcom-primary-border);
    border-radius: 999px;
}

.fcom_wrap .el-scrollbar__view:has(> .fhr_content_layout_body .fcom_courses) .fhr_page_actions .fcom_space_menu_ul li a {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--fcom-secondary-text);
    transition: background 0.15s ease, color 0.15s ease;
}

.fcom_wrap .el-scrollbar__view:has(> .fhr_content_layout_body .fcom_courses) .fhr_page_actions .fcom_space_menu_ul li a:hover {
    color: var(--fcom-primary-text);
    background: var(--fcom-menu-bg-hover);
}

.fcom_wrap .el-scrollbar__view:has(> .fhr_content_layout_body .fcom_courses) .fhr_page_actions .fcom_space_menu_ul li a.router-link-exact-active {
    background: var(--lm-course-accent-grad);
    color: #fff !important;
}

.fcom_wrap .fhr_content_layout_body:has(.fcom_courses) .search_member .el-input__wrapper {
    border: 1px solid var(--fcom-primary-border);
    border-radius: 10px;
}

/* Tile grid */
.fcom_wrap .fcom_courses .fcom_box_card_list {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 30px;
}

.fcom_wrap .fcom_courses .fcom_each_box_card {
    background: transparent;
    border: 0;
    border-radius: 0;
}

.fcom_wrap .fcom_courses .fcom_each_box_card:hover {
    box-shadow: none !important;
    transform: none;
}

.fcom_wrap .fcom_courses .fcom_box_card_avatar {
    position: relative;
    height: 0;
    padding-top: 60%;
    border-radius: 14px;
    overflow: hidden;
}

.fcom_wrap .fcom_courses .fcom_box_card_avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fcom_wrap .fcom_courses .fcom_box_card_avatar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.fcom_wrap .fcom_courses .fcom_each_box_card:hover .fcom_box_card_avatar {
    box-shadow: var(--lm-course-shadow, 0 18px 36px rgba(0, 0, 0, 0.28)), 0 0 0 1px var(--fcom-secondary-border);
}

.fcom_wrap .fcom_courses .fcom_each_box_card:hover .fcom_box_card_avatar img {
    transform: scale(1.06);
}

.fcom_wrap .fcom_courses .fcom_each_box_card:hover .fcom_box_card_avatar::after {
    opacity: 1;
}

.fcom_wrap .fcom_courses .fcom_box_card_info {
    padding: 14px 2px 0;
    gap: 4px;
    display: flex;
    flex-direction: column;
}

.fcom_wrap .fcom_courses .fcom_box_card_name {
    font-size: 0.98rem;
    font-weight: 700;
}

.fcom_wrap .fcom_courses .fcom_box_card_name a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--fcom-primary-text);
}

.fcom_wrap .fcom_courses .fcom_box_card_details {
    justify-content: flex-start;
    gap: 0;
}

.fcom_wrap .fcom_courses .fcom_box_card_details .inline_details {
    background: transparent;
    padding: 0;
    color: var(--fcom-secondary-text);
    font-size: 0.78rem;
    gap: 0;
}

.fcom_wrap .fcom_courses .fcom_box_card_details .fcom_inline_separator {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--fcom-text-off) !important;
    margin: 0 8px;
}

.fcom_wrap .fcom_courses .fcom_box_card_description {
    -webkit-line-clamp: 1;
    color: var(--fcom-secondary-text);
    margin: 0;
    font-size: 0.8rem;
}

.fcom_wrap .fcom_courses .fcom_box_card_action {
    justify-content: flex-start;
    margin-top: 6px;
}

.fcom_wrap .fcom_courses .fcom_box_card_action .fcom_card_button {
    background: transparent;
    border: 0;
    color: var(--fcom-primary-text);
    padding: 0;
    width: auto;
    font-size: 0.82rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.15s ease, gap 0.15s ease;
}

.fcom_wrap .fcom_courses .fcom_box_card_action .fcom_card_button::after {
    content: "\2192";
}

.fcom_wrap .fcom_courses .fcom_box_card_action .fcom_card_button:hover {
    color: var(--fcom-text-link);
    opacity: 1;
    gap: 8px;
}

.fcom_wrap .fcom_courses .fcom_no_items_wrap {
    background: transparent;
    border: 1px dashed var(--fcom-primary-border);
    padding: 56px 20px;
}

.fcom_wrap .fcom_courses .fcom_no_items_wrap::before {
    content: "\1F393";
    display: block;
    font-size: 2rem;
    margin-bottom: 10px;
}

/* ==========================================================================
   2. Course detail / curriculum — /portal/course/{slug}/lessons
      Section header (title + meta) followed by a grid of image-forward
      lesson cards, per module.
   ========================================================================== */

.fcom_wrap .fcom_feed_box.course_box {
    background: transparent;
    border: 0;
    border-radius: 0;
    max-width: 100%;
    padding: 8px 4px 40px;
}

/* Course progress bar — injected by loudmusic-course-progress-bar.js at the
   top of the content column, mirroring the sidebar "Course progress" widget
   (enrolled users only) so it reads as a prominent bar across the top of the
   page instead of a small sidebar card. Sticks to the top of the scroll pane
   while scrolling the lesson list. */
.fcom_wrap .lm-course-progress-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 0 -4px 24px;
    padding: 14px 20px;
    background: var(--fcom-secondary-content-bg);
    border: 1px solid var(--fcom-primary-border);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(4, 8, 20, 0.12);
}

.fcom_wrap .lm-course-progress-bar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.fcom_wrap .lm-course-progress-bar-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--fcom-primary-text);
}

.fcom_wrap .lm-course-progress-bar-percent {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--fcom-text-link);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.fcom_wrap .lm-course-progress-bar-track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: var(--fcom-active-bg);
    overflow: hidden;
}

.fcom_wrap .lm-course-progress-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--lm-course-accent-grad);
    transition: width 0.4s ease;
}

/* Original sidebar "Course progress" widget: hidden once mirrored into the
   top bar (kept in the DOM, not removed, so Vue's own reactivity keeps it
   up to date for the observer to mirror). */
.fcom_wrap .app_side_widget.course_widget.lm-course-progress-widget-hidden {
    display: none;
}

.fcom_wrap .course_box .fcom_course_intro {
    align-items: flex-start;
    margin-bottom: 30px;
}

.fcom_wrap .course_box .fcom_course_labels h3 {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.fcom_wrap .course_box .fcom_course_labels .fcom_course_info {
    display: block;
    margin-top: 10px;
    padding: 0;
    background: transparent;
    color: var(--fcom-secondary-text);
    font-size: 0.85rem;
}

.fcom_wrap .course_box .fcom_course_labels .fcom_course_info span {
    color: var(--fcom-primary-text);
    font-size: 0.95rem;
    font-weight: 700;
}

/* "Course Contents" header + collapse-all toggle */
.fcom_wrap .course_box .course_contents_header {
    padding: 4px 2px 18px;
    border-bottom: 1px solid var(--fcom-primary-border);
    margin-bottom: 28px;
}

.fcom_wrap .course_box .course_contents_header h4 {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fcom-text-off);
    margin: 0;
}

.fcom_wrap .course_box .course_contents_header .collapse_icon {
    color: var(--fcom-secondary-text);
    padding: 6px;
    border-radius: 8px;
}

.fcom_wrap .course_box .course_contents_header .collapse_icon:hover {
    background: var(--fcom-menu-bg-hover);
    color: var(--fcom-primary-text);
}

.fcom_wrap .course_box .fcom_card_sections {
    background: transparent;
    border: 0;
    border-radius: 0;
}

.fcom_wrap .course_box .fcom_card_sections .fcom_section_items {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.fcom_wrap .course_box .fcom_card_sections .fcom_section_primary {
    background: transparent;
    border: 0;
    border-radius: 0;
}

/* Section header: plain bold title, no card chrome — matches the reference's
   "01. Navigation" / "02. Image generation" headers sitting directly on the
   page background above a minimal lesson list. */
.fcom_wrap .course_box .fcom_card_sections .fcom_section_primary_item {
    padding: 0 0 6px;
    border: 0 !important;
    gap: 12px;
}

.fcom_wrap .course_box .fcom_card_sections .fcom_section_primary_item_title {
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.fcom_wrap .course_box .fcom_card_sections .fcom_section_primary_item_title .title_line {
    align-items: center;
}

.fcom_wrap .course_box .fcom_card_sections .fcom_section_primary_item_title h4 {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    padding: 0;
    color: var(--fcom-primary-text);
}

/* Reference headers carry no lesson-count/duration subtitle — hide it to
   match, the info is still available in the page's top "9 Topics · 54 Lessons"
   summary line. */
.fcom_wrap .course_box .fcom_card_sections .fcom_section_primary_item_title .fcom_meta_text {
    display: none;
}

.fcom_wrap .course_box .fcom_card_sections .fcom_section_primary_item_actions .el-icon {
    color: var(--fcom-secondary-text);
    padding: 6px;
    border-radius: 50%;
}

.fcom_wrap .course_box .fcom_card_sections .fcom_section_primary_item:hover .fcom_section_primary_item_actions .el-icon {
    background: var(--fcom-menu-bg-hover);
}

/* Lesson rows: plain list — status icon, title, duration, thin divider
   between rows. No thumbnails, matching the reference's minimal syllabus. */
.fcom_wrap .course_box .fcom_card_sections .fcom_section_item {
    padding: 11px 4px;
    border: 0 !important;
    border-bottom: 1px solid var(--fcom-primary-border) !important;
    border-radius: 0;
    transition: background 0.15s ease;
}

.fcom_wrap .course_box .fcom_card_sections .fcom_section_primary > .fcom_section_item:last-child {
    border-bottom: 0 !important;
}

.fcom_wrap .course_box .fcom_card_sections .fcom_section_item:hover {
    background: var(--fcom-menu-bg-hover);
}

.fcom_wrap .course_box .fcom_card_sections .fcom_section_item > .fcom_section_item_title {
    width: 100%;
    min-width: 0;
}

.fcom_wrap .course_box .fcom_card_sections .fcom_heading_item {
    width: 100%;
    min-width: 0;
    gap: 12px;
}

.fcom_wrap .course_box .fcom_card_sections .fcom_heading_item > .el-icon {
    color: var(--fcom-text-off);
    flex-shrink: 0;
    width: 17px;
    height: 17px;
}

.fcom_wrap .course_box .fcom_card_sections .lesson_feature_media {
    display: none;
}

.fcom_wrap .course_box .fcom_card_sections .lesson_title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 0;
    gap: 16px;
    min-width: 0;
}

.fcom_wrap .course_box .fcom_card_sections .lesson_title > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--fcom-primary-text);
    font-size: 0.92rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fcom_wrap .course_box .fcom_card_sections .lesson_duration {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.fcom_wrap .course_box .fcom_card_sections .lesson_duration::before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    background-color: var(--fcom-text-off);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center / contain no-repeat;
}

.fcom_wrap .course_box .fcom_card_sections .lesson_duration span {
    color: var(--fcom-text-off);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.fcom_wrap .course_box .fcom_card_sections .fcom_section_item.is_locked {
    opacity: 0.5;
}

/* Course description sidebar widget — injected by loudmusic-course-description.js
   above the instructor card, since the Vue course template never renders
   course.description even though the API/data model has it. */
.fcom_wrap .lm-course-description-widget {
    border: 1px solid var(--fcom-primary-border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--fcom-secondary-content-bg);
    margin-top: 16px;
}

.fcom_wrap .lm-course-description-widget .widget_header {
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--fcom-primary-border);
}

.fcom_wrap .lm-course-description-widget .widget_header h3 {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--fcom-text-off);
    margin: 0;
}

.fcom_wrap .lm-course-description-widget .widget_body {
    padding: 14px 16px 16px;
}

.fcom_wrap .lm-course-description-widget .widget_body p {
    margin: 0 0 0.85em;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--fcom-secondary-text);
}

.fcom_wrap .lm-course-description-widget .widget_body p:last-child {
    margin-bottom: 0;
}

.fcom_wrap .lm-course-description-widget .widget_body strong {
    color: var(--fcom-primary-text);
}

/* Course instructor sidebar widget */
.fcom_wrap .app_side_widget.course_widget {
    border: 1px solid var(--fcom-primary-border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--fcom-secondary-content-bg);
}

/* Plain top accent strip — no text/avatar overlap. An earlier version pulled
   the avatar+name row up over this band with a negative margin to fake a
   "profile hero" look, but the band wasn't tall enough to clear the label
   text, so the name rendered on top of "COURSE INSTRUCTOR" and read as
   jumbled. Keep the band and the identity row in separate, non-overlapping
   flow instead. */
.fcom_wrap .app_side_widget.course_widget .widget_header {
    background: var(--lm-course-accent-grad);
    padding: 10px 16px;
    border: 0;
}

.fcom_wrap .app_side_widget.course_widget .widget_header h3 {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
}

.fcom_wrap .app_side_widget.course_widget .widget_body {
    padding: 16px;
}

.fcom_wrap .app_side_widget.course_widget .creator_details_info {
    align-items: center;
}

.fcom_wrap .app_side_widget.course_widget .creator_details_info .fcom_user_avatar img {
    width: 48px;
    max-width: 48px;
    height: 48px;
    border: 1px solid var(--fcom-primary-border);
}

.fcom_wrap .app_side_widget.course_widget .details_name a {
    font-weight: 700;
    font-size: 0.94rem;
    line-height: 1.3;
}

.fcom_wrap .app_side_widget.course_widget .creator_details_description {
    color: var(--fcom-secondary-text);
    font-size: 0.85rem;
    margin-top: 10px;
}

.fcom_wrap .app_side_widget.course_widget .fcom_social_links {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.fcom_wrap .app_side_widget.course_widget .fcom_social_links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--fcom-active-bg);
    color: var(--fcom-secondary-text);
    transition: background 0.15s ease, color 0.15s ease;
}

.fcom_wrap .app_side_widget.course_widget .fcom_social_links a:hover {
    background: var(--lm-course-accent-grad);
    color: #fff;
}

.fcom_wrap .app_side_widget.course_widget .widget_body .el-progress-bar__inner {
    background: var(--lm-course-accent-grad);
}

/* ==========================================================================
   3. Lesson view — /portal/course/{slug}/lessons/{lesson}/view
   ========================================================================== */

.fcom_wrap .fcom_lesson_wrap .fcom_back_space {
    border-bottom: 1px solid var(--fcom-primary-border);
}

.fcom_wrap .fcom_lesson_wrap .fcom_go_back {
    color: var(--fcom-secondary-text);
    font-weight: 600;
    font-size: 0.85rem;
    transition: color 0.15s ease;
}

.fcom_wrap .fcom_lesson_wrap .fcom_go_back:hover {
    color: var(--fcom-primary-text);
}

.fcom_wrap .fcom_lesson_wrap .fcom_lesson_nav .fcom_primary_button,
.fcom_wrap .fcom_lesson_wrap .fcom_back_space a.fcom_primary_button {
    background: var(--lm-course-accent-grad) !important;
    border: 0 !important;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
}

/* Video player card — Fluent caps this at 820px by default, leaving a large
   dead gap on both sides inside the ~1300px content column. Let it fill the
   column so the player reads as the page's focal point. */
.fcom_wrap .fcom_lesson_details .feed_media,
.fcom_wrap .fcom_lesson_details .feed_media_oembed {
    max-width: 100% !important;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 48px rgba(4, 8, 20, 0.28);
    border: 1px solid var(--fcom-primary-border);
}

.fcom_wrap .fcom_lesson_details .feed_media_oembed iframe,
.fcom_wrap .fcom_lesson_details .feed_media_ext_video iframe {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
}

/* Text content: Fluent caps the header/body/documents at a 720px reading
   column with auto margins by default. Widening just the max-width (as a
   prior pass did, to 880px) still left it centered inside the much wider
   column — narrower than AND misaligned from the full-width video above it
   (video left-edge 300px vs text left-edge 500px on a 1920px screen). Match
   it to the video's own full-bleed width instead, left-aligned. */
.fcom_wrap .fcom_lesson_details .fcom_lesson_header,
.fcom_wrap .fcom_lesson_details .fcom_lesson_content > :where(:not(.alignfull):not(.alignwide)),
.fcom_wrap .fcom_lesson_details .fcom_lesson_documents {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Lesson header */
.fcom_wrap .fcom_lesson_details .fcom_lesson_title p.fcom_lesson_number {
    display: inline-flex;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--fcom-highlight-bg);
    color: var(--fcom-text-link);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fcom_wrap .fcom_lesson_details .fcom_lesson_title h1 {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

/* Body typography */
.fcom_wrap .fcom_lesson_details .fcom_lesson_content h2,
.fcom_wrap .fcom_lesson_details .fcom_lesson_content h3 {
    font-weight: 700;
    margin-top: 1.6em;
}

.fcom_wrap .fcom_lesson_details .fcom_lesson_content p {
    line-height: 1.7;
    color: var(--fcom-secondary-text);
}

.fcom_wrap .fcom_lesson_details .fcom_lesson_content ul li,
.fcom_wrap .fcom_lesson_details .fcom_lesson_content ol li {
    line-height: 1.65;
    margin-bottom: 6px;
    color: var(--fcom-secondary-text);
}

.fcom_wrap .fcom_lesson_details .fcom_lesson_content strong {
    color: var(--fcom-primary-text);
}

.fcom_wrap .fcom_lesson_details .fcom_lesson_documents {
    border-radius: 14px;
}

/* Sidebar: module list */
.fcom_wrap .fcom_lesson_sidebar .fcom_section_sidebar_title h3 {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fcom-text-off) !important;
}

.fcom_wrap .fcom_lesson_sidebar .fcom_section_primary {
    margin-bottom: 4px;
    padding: 12px 12px 4px;
}

.fcom_wrap .fcom_lesson_sidebar .fcom_section_primary_item {
    padding: 8px 8px;
    border: 0;
}

.fcom_wrap .fcom_lesson_sidebar .fcom_section_primary_item_title h4 {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fcom-text-off);
}

.fcom_wrap .fcom_lesson_sidebar .fcom_section_item {
    margin: 1px 8px;
    padding: 9px 10px 9px 14px !important;
    border-radius: 8px;
    border: 0 !important;
    transition: background 0.15s ease;
}

.fcom_wrap .fcom_lesson_sidebar .fcom_section_item:hover {
    background: var(--fcom-menu-bg-hover) !important;
    border: 0 !important;
}

.fcom_wrap .fcom_lesson_sidebar .fcom_heading_item span {
    font-size: 0.85rem;
    border-bottom: 0;
    color: var(--fcom-menu-text);
}

/* Current lesson: full pill highlight spanning the row. */
.fcom_wrap .fcom_lesson_sidebar .fcom_current_lesson {
    background: var(--fcom-highlight-bg) !important;
    border-radius: 8px;
}

.fcom_wrap .fcom_lesson_sidebar .fcom_current_lesson .fcom_heading_item span {
    color: var(--fcom-primary-text);
    font-weight: 600;
}

/* Progress footer */
.fcom_wrap .fcom_lesson_sidebar .course_progress_footer_wrap .el-progress-bar__inner {
    background: var(--lm-course-accent-grad);
}

.fcom_wrap .fcom_lesson_sidebar .fcom_course_progress_footer p {
    font-weight: 600;
    color: var(--fcom-secondary-text);
}

/* Complete Lesson primary button */
.fcom_wrap .fcom_lesson_details .fcom_primary_button {
    background: var(--lm-course-accent-grad) !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-weight: 700;
    padding: 11px 22px;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fcom_wrap .fcom_lesson_details .fcom_primary_button:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.4);
}

/* Mobile tweaks */
@media (max-width: 768px) {
    .fcom_wrap .fcom_courses .fcom_box_card_list {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 18px;
    }

    /* Lesson rows: stack title above duration instead of forcing them onto
       one line. The single-line layout (title truncated with ellipsis,
       duration pinned right) leaves so little room on a phone-width screen
       that titles were rendering as "Setting...", "LearnS...", "How to..." —
       indistinguishable from each other. Full-width wrapping title fixes it. */
    .fcom_wrap .course_box .fcom_card_sections .lesson_title {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .fcom_wrap .course_box .fcom_card_sections .lesson_title > span:first-child {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        width: 100%;
    }

    .fcom_wrap .course_box .fcom_course_labels h3 {
        font-size: 1.5rem;
    }

    .fcom_wrap .fcom_lesson_details .fcom_lesson_title h1 {
        font-size: 1.4rem;
    }

    /* Lesson page header, mobile: the action row (Full Screen / Comments /
       Completed / Lessons-sidebar-toggle) left-clusters by default, leaving
       the right half of the row empty. Anchor the sidebar toggle to the far
       right instead of leaving it wherever it falls in flex order, and turn
       it from a bare unlabeled icon into a labeled pill so the lesson list
       is actually discoverable on mobile (it's otherwise the only way to
       reach the syllabus once you're inside a lesson). */
    .fcom_wrap .fcom_lesson_wrap .fcom_lesson_nav {
        gap: 8px;
    }

    .fcom_wrap .fcom_lesson_wrap .fcom_lesson_nav .fcom_sm_only {
        margin-left: auto !important;
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        padding: 6px 12px !important;
        border-radius: 999px;
        background: var(--fcom-active-bg);
        border: 1px solid var(--fcom-primary-border);
        color: var(--fcom-primary-text) !important;
    }

    .fcom_wrap .fcom_lesson_wrap .fcom_lesson_nav .fcom_sm_only:hover {
        background: var(--fcom-menu-bg-hover);
    }

    .fcom_wrap .fcom_lesson_wrap .fcom_lesson_nav .fcom_sm_only::after {
        content: "Lessons";
        font-size: 0.78rem;
        font-weight: 600;
        white-space: nowrap;
    }

    /* Off-canvas lesson sidebar drawer: match it to the theme tokens (it
       otherwise renders with Fluent's light-only default background) and
       give it the same current-lesson pill treatment as desktop. */
    .fcom_wrap .fcom_lesson_sidebar {
        background: var(--fcom-secondary-content-bg) !important;
    }

    .fcom_wrap .fcom_lesson_sidebar .fcom_section_sidebar_title {
        background: var(--fcom-secondary-content-bg) !important;
    }

    /* Curriculum page header, mobile: Fluent renders the breadcrumb
       ("Courses / <course title>") and the action buttons (Edit Lessons /
       Course Chat / Continue Course) as a single fixed-height flex row with
       overflow:hidden. A long course title wraps the breadcrumb to 2 lines,
       which the fixed height can't accommodate, so the action buttons render
       cramped into the same space and visually collide with the wrapped
       breadcrumb text. Stack them into their own full-width rows instead. */
    .fcom_wrap .el-scrollbar__view:has(> .fhr_content_layout_body .course_box) .fhr_content_layout_header {
        flex-direction: column;
        align-items: flex-start;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        padding-bottom: 14px;
        gap: 10px;
    }

    .fcom_wrap .el-scrollbar__view:has(> .fhr_content_layout_body .course_box) .fhr_content_layout_header .el-breadcrumb {
        width: 100%;
        white-space: normal;
        line-height: 1.4;
    }

    .fcom_wrap .el-scrollbar__view:has(> .fhr_content_layout_body .course_box) .fhr_page_actions {
        width: 100%;
    }

    .fcom_wrap .el-scrollbar__view:has(> .fhr_content_layout_body .course_box) .fhr_page_actions .fcom_course_actions {
        flex-wrap: wrap;
        width: 100%;
        gap: 8px;
    }
}

/* Tablet gap (769px–1024px): Fluent's own CSS has two breakpoints that don't
   agree with each other — the lesson sidebar becomes permanently visible
   above 768px (fluent-community/assets/app.css), but the mobile-only
   ".fcom_sm_only" sidebar-toggle button stays visible up to 1024px
   (fluent-community/assets/global.css). In that 769–1024px range both show
   at once: a redundant "Lessons" toggle sitting next to a sidebar that's
   already on screen. Hide the toggle there — nothing to toggle open, it's
   already open. */
@media (min-width: 769px) and (max-width: 1024px) {
    .fcom_wrap .fcom_lesson_wrap .fcom_lesson_nav .fcom_sm_only {
        display: none !important;
    }
}