/* ==========================================================================
   Course player styles.

   Scope note: every rule here is namespaced under .lms-theme-wrapper or an
   .lms-* class. This file is loaded on every page, so nothing in it may match
   an element outside the course player.

   Theme note: this is the only surface in the site that switches between a
   light and a dark appearance. All colour decisions are expressed as custom
   properties defined on .lms-theme-wrapper below, so each component rule is
   written once and only the token values differ between the two modes.
   ========================================================================== */

/* rusty begin update | 2026-09-02 00:00
   Action: Global Typography Refactor — replaced every 'Tajawal', sans-serif (8 occurrences,
   including the 'Space Grotesk', 'Tajawal', sans-serif combos) with 'Sukar', sans-serif /
   'Space Grotesk', 'Sukar', sans-serif throughout this file. CLAUDE.md guardrail update:
   no more 'Tajawal'/generic AI fonts. */
/* rusty end update */

/* --------------------------------------------------------------------------
   1. Theme tokens
   -------------------------------------------------------------------------- */

/* Dark is the default and matches the rest of the site. */
.lms-theme-wrapper {
    --lms-bg:            #0b1120;
    --lms-panel-bg:      rgba(15, 23, 42, 0.55);
    --lms-sidebar-bg:    rgba(18, 18, 26, 0.85);
    --lms-row-hover:     rgba(255, 255, 255, 0.04);
    --lms-active-item:   rgba(139, 92, 246, 0.14);
    --lms-border:        rgba(255, 255, 255, 0.08);
    --lms-border-strong: rgba(255, 255, 255, 0.14);
    --lms-heading:       #f1f5f9;
    --lms-text:          #e2e8f0;
    --lms-muted:         #94a3b8;
    --lms-faint:         #64748b;
    --lms-accent:        #8b5cf6;
    --lms-accent-2:      #06b6d4;
    --lms-accent-soft:   rgba(139, 92, 246, 0.15);
    --lms-success:       #22c55e;
    --lms-shadow:        0 8px 32px rgba(0, 0, 0, 0.45);

    background: var(--lms-bg);
    color: var(--lms-text);
    /* Contains the player's own compositing work so animation here cannot
       trigger repaints in the surrounding page chrome. */
    isolation: isolate !important;
}

.lms-theme-wrapper[data-lms-theme="light"] {
    --lms-bg:            #f1f5f9;
    --lms-panel-bg:      #ffffff;
    --lms-sidebar-bg:    #f8fafc;
    --lms-row-hover:     rgba(15, 23, 42, 0.04);
    --lms-active-item:   rgba(124, 58, 237, 0.10);
    --lms-border:        rgba(15, 23, 42, 0.10);
    --lms-border-strong: rgba(15, 23, 42, 0.18);
    --lms-heading:       #0f172a;
    --lms-text:          #1e293b;
    --lms-muted:         #475569;
    --lms-faint:         #64748b;
    --lms-accent:        #7c3aed;
    --lms-accent-2:      #0e7490;
    --lms-accent-soft:   rgba(124, 58, 237, 0.10);
    --lms-success:       #15803d;
    --lms-shadow:        0 8px 28px rgba(15, 23, 42, 0.10);
}

/* --------------------------------------------------------------------------
   2. Page shell
   -------------------------------------------------------------------------- */

.lms-theme-wrapper {
    min-height: 70vh;
    padding: 22px 18px 60px;
    font-family: 'Sukar', sans-serif;
}

.lms-shell {
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.lms-main {
    flex: 1 1 auto;
    min-width: 0; /* allows the video column to shrink instead of forcing overflow */
}

.lms-sidebar {
    flex: 0 0 340px;
    max-width: 340px;
    box-sizing: border-box;
    background: var(--lms-sidebar-bg);
    border: 1px solid var(--lms-border);
    border-radius: 16px;
    overflow: hidden;
    position: sticky;
    top: 84px;
    max-height: calc(100vh - 104px);
    display: flex;
    flex-direction: column;
}

/* --------------------------------------------------------------------------
   3. Course header bar
   -------------------------------------------------------------------------- */

.lms-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.lms-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--lms-muted);
    text-decoration: none;
    border: 1px solid var(--lms-border);
    border-radius: 10px;
    padding: 6px 12px;
    background: var(--lms-panel-bg);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.lms-back-link:hover {
    color: var(--lms-heading);
    border-color: var(--lms-border-strong);
}

.lms-course-title {
    font-family: 'Space Grotesk', 'Sukar', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--lms-heading);
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lms-icon-btn {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    border: 1px solid var(--lms-border);
    background: var(--lms-panel-bg);
    color: var(--lms-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.lms-icon-btn:hover {
    color: var(--lms-accent);
    border-color: var(--lms-accent);
    background: var(--lms-accent-soft);
}

/* Only one of the two theme glyphs is shown at a time. */
.lms-theme-wrapper .lms-theme-icon-light { display: none; }
.lms-theme-wrapper[data-lms-theme="light"] .lms-theme-icon-light { display: inline-block; }
.lms-theme-wrapper[data-lms-theme="light"] .lms-theme-icon-dark { display: none; }

/* --------------------------------------------------------------------------
   4. Video area
   -------------------------------------------------------------------------- */

.lms-video-wrap {
    position: relative;
    background: #000;
    border: 1px solid var(--lms-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--lms-shadow);
    aspect-ratio: 16 / 9;
    width: 100%;
}

.lms-video-wrap video {
    width: 100%;
    height: 100%;
    display: block;
    background: #000;
}

/* Shown in place of the player when a source cannot be loaded. */
.lms-video-message {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.92);
    color: #e2e8f0;
    font-size: 0.9rem;
}

.lms-video-message.is-visible { display: flex; }

.lms-video-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    color: #94a3b8;
    text-align: center;
    padding: 24px;
}

/* --------------------------------------------------------------------------
   5. Lecture heading + tabs
   -------------------------------------------------------------------------- */

.lms-lecture-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin: 18px 0 6px;
}

.lms-lecture-title {
    font-family: 'Space Grotesk', 'Sukar', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--lms-heading);
    margin: 0;
}

.lms-lecture-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--lms-faint);
    margin-bottom: 16px;
}

.lms-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.lms-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--lms-border);
    margin-bottom: 18px;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.lms-tabs::-webkit-scrollbar { display: none; }

.lms-tabs .lms-tab-link {
    border: none;
    background: none;
    color: var(--lms-muted);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 10px 10px 0 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.lms-tabs .lms-tab-link:hover { color: var(--lms-heading); }

.lms-tabs .lms-tab-link.active {
    color: var(--lms-accent);
    border-bottom-color: var(--lms-accent);
    background: none;
}

.lms-panel {
    background: var(--lms-panel-bg);
    border: 1px solid var(--lms-border);
    border-radius: 16px;
    padding: 22px;
    color: var(--lms-text);
    font-size: 0.92rem;
    line-height: 1.9;
}

.lms-panel h3 {
    font-family: 'Space Grotesk', 'Sukar', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--lms-heading);
    margin: 0 0 12px;
}

.lms-empty-note {
    color: var(--lms-faint);
    font-size: 0.85rem;
    margin: 0;
}

/* --------------------------------------------------------------------------
   6. Attachments
   -------------------------------------------------------------------------- */

.lms-resource-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lms-resource-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--lms-border);
    border-radius: 10px;
    background: var(--lms-row-hover);
    font-size: 0.85rem;
    color: var(--lms-text);
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

a.lms-resource-item:hover {
    border-color: var(--lms-accent);
    color: var(--lms-accent);
}

.lms-resource-item.is-locked {
    color: var(--lms-faint);
    cursor: not-allowed;
}

.lms-resource-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lms-resource-size {
    font-size: 0.75rem;
    color: var(--lms-faint);
    font-family: 'Space Grotesk', monospace;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   7. Sidebar: progress summary + curriculum accordion
   -------------------------------------------------------------------------- */

.lms-sidebar-head {
    padding: 16px;
    border-bottom: 1px solid var(--lms-border);
    flex-shrink: 0;
}

.lms-sidebar-title {
    font-family: 'Space Grotesk', 'Sukar', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--lms-heading);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lms-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--lms-muted);
    margin-bottom: 6px;
}

.lms-progress-bar {
    height: 6px;
    border-radius: 6px;
    background: var(--lms-row-hover);
    overflow: hidden;
}

.lms-progress-fill {
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--lms-accent), var(--lms-accent-2));
    transition: width 0.4s ease;
}

.lms-curriculum {
    overflow-y: auto;
    flex: 1 1 auto;
}

/* Bootstrap's accordion is driven by its own custom properties; overriding the
   properties rather than the rules keeps its collapse behaviour intact while
   replacing every colour it would otherwise pick for itself. */
.lms-curriculum-accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-color: var(--lms-text);
    --bs-accordion-border-color: var(--lms-border);
    --bs-accordion-border-width: 0 0 1px 0;
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-btn-color: var(--lms-heading);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-btn-padding-x: 14px;
    --bs-accordion-btn-padding-y: 12px;
    --bs-accordion-active-color: var(--lms-heading);
    --bs-accordion-active-bg: var(--lms-row-hover);
    --bs-accordion-body-padding-x: 0;
    --bs-accordion-body-padding-y: 0;
}

.lms-curriculum-accordion .accordion-item {
    background: transparent;
    border-color: var(--lms-border);
}

.lms-curriculum-accordion .accordion-button {
    font-size: 0.85rem;
    font-weight: 700;
    font-family: 'Sukar', sans-serif;
    box-shadow: none;
}

/* The default chevron is a fixed-colour background image, so it is replaced
   with a mask that inherits the current text colour in both themes. */
.lms-curriculum-accordion .accordion-button::after {
    background-image: none;
    background-color: currentColor;
    -webkit-mask-image: url('https://api.iconify.design/ph/caret-down.svg');
    mask-image: url('https://api.iconify.design/ph/caret-down.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: 0.9rem;
    height: 0.9rem;
    opacity: 0.7;
}

.lms-section-heading-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: start;
}

.lms-section-sub {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--lms-faint);
    font-family: 'Space Grotesk', monospace;
}

.lms-lecture-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lms-lecture-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-top: 1px solid var(--lms-border);
    font-size: 0.82rem;
    color: var(--lms-text);
    text-decoration: none;
    transition: background 0.2s ease;
}

a.lms-lecture-row:hover { background: var(--lms-row-hover); }

.lms-lecture-row.is-current {
    background: var(--lms-active-item);
    border-inline-start: 3px solid var(--lms-accent);
}

.lms-lecture-row.is-locked {
    color: var(--lms-faint);
    cursor: not-allowed;
}

.lms-lecture-status {
    flex-shrink: 0;
    margin-top: 2px;
    width: 1.05em;
    height: 1.05em;
}

.lms-lecture-status.is-done { color: var(--lms-success); }
.lms-lecture-status.is-todo { color: var(--lms-faint); }

.lms-lecture-row-body {
    flex: 1 1 auto;
    min-width: 0;
}

.lms-lecture-row-title {
    display: block;
    line-height: 1.5;
}

.lms-lecture-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    font-size: 0.72rem;
    color: var(--lms-faint);
    font-family: 'Space Grotesk', monospace;
}

.lms-preview-badge {
    font-family: 'Sukar', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 20px;
    color: var(--lms-accent-2);
    background: var(--lms-accent-soft);
    border: 1px solid var(--lms-border-strong);
}

/* --------------------------------------------------------------------------
   8. Enrolment prompt
   -------------------------------------------------------------------------- */

.lms-cta {
    margin-top: 16px;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid var(--lms-border-strong);
    background: var(--lms-accent-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.lms-cta-text {
    font-size: 0.88rem;
    color: var(--lms-text);
    margin: 0;
}

.lms-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--lms-accent), var(--lms-accent-2));
    text-decoration: none;
    border: none;
    white-space: nowrap;
}

.lms-cta-btn:hover { color: #fff; opacity: 0.92; }

/* --------------------------------------------------------------------------
   9. Tab content: forms, notes, question threads, announcements
   -------------------------------------------------------------------------- */

.lms-form {
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--lms-border);
}

.lms-form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--lms-heading);
    margin-bottom: 8px;
}

.lms-textarea,
.lms-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--lms-row-hover);
    border: 1px solid var(--lms-border);
    border-radius: 10px;
    color: var(--lms-text);
    font-family: 'Sukar', sans-serif;
    font-size: 0.88rem;
    padding: 10px 12px;
    resize: vertical;
    transition: border-color 0.2s ease;
}

.lms-textarea:focus,
.lms-input:focus {
    outline: none;
    border-color: var(--lms-accent);
}

.lms-textarea::placeholder,
.lms-input::placeholder { color: var(--lms-faint); }

.lms-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.lms-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    color: var(--lms-muted);
    margin: 0;
    cursor: pointer;
}

.lms-checkbox input { accent-color: var(--lms-accent); }

.lms-form-error {
    margin: 8px 0 0;
    font-size: 0.8rem;
    color: #ef4444;
}

/* Notes ------------------------------------------------------------------- */

.lms-note-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lms-note-item {
    border: 1px solid var(--lms-border);
    border-radius: 12px;
    padding: 12px 14px;
    background: var(--lms-row-hover);
}

.lms-note-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.lms-note-stamp {
    border: 1px solid var(--lms-border-strong);
    background: var(--lms-accent-soft);
    color: var(--lms-accent-2);
    border-radius: 20px;
    font-family: 'Space Grotesk', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 9px;
    cursor: pointer;
}

.lms-note-date {
    font-size: 0.75rem;
    color: var(--lms-faint);
    flex: 1 1 auto;
}

.lms-note-delete {
    border: none;
    background: none;
    color: var(--lms-faint);
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    transition: color 0.2s ease;
}

.lms-note-delete:hover { color: #ef4444; }

.lms-note-body,
.lms-thread-body {
    font-size: 0.88rem;
    line-height: 1.8;
    color: var(--lms-text);
    white-space: pre-wrap;
    word-break: break-word;
}

.lms-note-empty { list-style: none; }

/* Question threads --------------------------------------------------------- */

.lms-thread-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lms-thread {
    border: 1px solid var(--lms-border);
    border-radius: 12px;
    padding: 14px;
    background: var(--lms-row-hover);
}

.lms-thread-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.lms-thread-author {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--lms-heading);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.lms-thread-date {
    font-size: 0.75rem;
    color: var(--lms-faint);
    margin-inline-start: auto;
}

.lms-owner-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 20px;
    color: var(--lms-accent-2);
    background: var(--lms-accent-soft);
    border: 1px solid var(--lms-border-strong);
}

.lms-reply-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.lms-reply {
    border-inline-start: 2px solid var(--lms-border-strong);
    padding-inline-start: 12px;
}

.lms-reply-form {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.lms-reply-form .lms-input { flex: 1 1 auto; }

.lms-reply-btn {
    flex-shrink: 0;
    border: 1px solid var(--lms-border-strong);
    background: var(--lms-accent-soft);
    color: var(--lms-accent);
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0 16px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.lms-reply-btn:hover { background: var(--lms-active-item); }

/* Announcements ------------------------------------------------------------ */

.lms-announcement {
    border: 1px solid var(--lms-border);
    border-radius: 12px;
    padding: 14px;
    background: var(--lms-row-hover);
    margin-bottom: 12px;
}

.lms-announcement:last-child { margin-bottom: 0; }

.lms-announcement-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--lms-heading);
}

.lms-announcement-author {
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--lms-faint);
}

/* Ratings block ------------------------------------------------------------
   The ratings component is shared with the course detail page, which has no
   theme wrapper. Its own stylesheet supplies the dark appearance; only the
   light mode needs adjusting here so the shared markup stays readable. */

.lms-theme-wrapper[data-lms-theme="light"] .live-comment-text,
.lms-theme-wrapper[data-lms-theme="light"] .live-comment-name,
.lms-theme-wrapper[data-lms-theme="light"] .live-avg-score,
.lms-theme-wrapper[data-lms-theme="light"] .live-rating-section-title {
    color: var(--lms-heading);
}

.lms-theme-wrapper[data-lms-theme="light"] .live-comment-date,
.lms-theme-wrapper[data-lms-theme="light"] .live-avg-count {
    color: var(--lms-muted);
}

.lms-theme-wrapper[data-lms-theme="light"] .live-comment-textarea {
    background: var(--lms-row-hover);
    color: var(--lms-text);
    border-color: var(--lms-border);
}

/* --------------------------------------------------------------------------
   10. Curriculum management screen

   This screen keeps the site's fixed appearance, so these rules use literal
   colours rather than the theme tokens above, which exist only inside the
   player's wrapper.
   -------------------------------------------------------------------------- */

.lms-builder-status {
    margin: 12px 0 0;
    font-size: 0.85rem;
    color: #22c55e;
}

.lms-builder-status.is-error { color: #ef4444; }

.lms-builder-inline-form {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.lms-builder-inline-form .auth-input {
    flex: 1 1 240px;
    margin: 0;
}

.lms-builder-section {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 14px;
    background: rgba(15, 23, 42, 0.4);
}

.lms-builder-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.lms-builder-section-head .auth-input {
    flex: 1 1 220px;
    margin: 0;
}

.lms-builder-index {
    flex-shrink: 0;
    min-width: 34px;
    height: 28px;
    padding: 0 8px;
    border-radius: 8px;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: #a78bfa;
    font-family: 'Space Grotesk', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lms-builder-actions {
    display: inline-flex;
    gap: 6px;
    margin-inline-start: auto;
    flex-shrink: 0;
}

.lms-builder-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.lms-builder-icon:hover {
    color: #8b5cf6;
    border-color: #8b5cf6;
}

.lms-builder-icon.is-danger:hover {
    color: #ef4444;
    border-color: #ef4444;
}

.lms-builder-icon:disabled {
    opacity: 0.5;
    cursor: default;
}

.lms-builder-lectures {
    margin-top: 12px;
    padding-inline-start: 12px;
    border-inline-start: 2px solid rgba(255, 255, 255, 0.06);
}

.lms-builder-lecture {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.02);
}

.lms-builder-lecture-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.lms-builder-lecture-title {
    font-size: 0.88rem;
    color: #e2e8f0;
    font-weight: 600;
}

.lms-builder-tag {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 20px;
    color: #06b6d4;
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.lms-builder-tag.is-warning {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
}

.lms-builder-meta {
    font-size: 0.72rem;
    color: #64748b;
    font-family: 'Space Grotesk', monospace;
}

.lms-builder-muted {
    color: #64748b;
    font-size: 0.83rem;
    margin: 6px 0;
}

/* rusty begin new code | 2026-08-31 13:05 */
/* Action: Limit notice shown directly beneath an upload control. Sits tight to the input it
   describes and stays readable at a smaller size than surrounding labels. */
.lms-builder-hint {
    display: block;
    color: #94a3b8;
    font-size: 0.76rem;
    line-height: 1.6;
    margin: 6px 0 10px;
}
/* rusty end new code */

.lms-builder-edit {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.lms-builder-lecture-form .auth-input { margin-bottom: 10px; }

.lms-builder-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.83rem;
    color: #94a3b8;
    margin: 4px 0 12px;
    cursor: pointer;
}

.lms-builder-check input { accent-color: #8b5cf6; }

.lms-builder-progress {
    height: 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
    margin: 8px 0 12px;
}

.lms-builder-progress-fill {
    width: 0;
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(135deg, #8b5cf6, #06b6d4);
    transition: width 0.2s ease;
}

.lms-builder-resources {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.lms-builder-resource-list {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lms-builder-resource-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.82rem;
    color: #cbd5e1;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}

.lms-builder-add {
    margin-top: 10px;
}

.lms-builder-add summary {
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 700;
    color: #a78bfa;
    padding: 8px 0;
}

@media (max-width: 768px) {
    .lms-builder-actions {
        margin-inline-start: 0;
        width: 100%;
        justify-content: flex-end;
    }

    .lms-builder-section-head .auth-input,
    .lms-builder-inline-form .auth-input {
        flex: 1 1 100%;
    }
}

/* --------------------------------------------------------------------------
   11. Mobile (player)
   Scoped so the desktop rules above are never altered.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .lms-shell {
        flex-direction: column;
    }

    .lms-sidebar {
        flex: 1 1 auto;
        max-width: 100%;
        width: 100%;
        position: static;
        max-height: none;
    }

    .lms-curriculum {
        max-height: 60vh;
    }
}

@media (max-width: 768px) {
    .lms-theme-wrapper {
        padding: 14px 12px 44px;
    }

    .lms-video-wrap {
        border-radius: 12px;
    }

    .lms-lecture-title { font-size: 1.08rem; }

    .lms-panel {
        padding: 16px;
        border-radius: 12px;
    }

    .lms-tabs .lms-tab-link {
        padding: 9px 12px;
        font-size: 0.85rem;
    }

    .lms-cta {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .lms-cta-btn { justify-content: center; }
}

/* rusty begin new code | 2026-08-31 13:42 */
/* Action: Compressed-attachment caution: a badge on the row, a standing note under the list, and
   the acknowledgement dialog shown before the download starts. All colours read from the page's
   appearance tokens so both appearances are covered by one set of rules. */

.lms-resource-archive-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 5px;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.lms-archive-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.8rem;
    line-height: 1.7;
    color: var(--lms-muted, #94a3b8);
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.24);
}

.lms-archive-note .macblash-cyber-icon {
    color: #f59e0b;
    flex: 0 0 auto;
    margin-top: 3px;
}

/* Sits outside the appearance wrapper (see the player script), so it defines the few tokens it
   needs itself rather than inheriting them. Dark is the default, matching the rest of the site.
   The z-index clears the site's full-screen overlay layer while staying below the support widget. */
.lms-archive-overlay {
    --lms-panel-bg:      rgba(15, 23, 42, 0.96);
    --lms-border-strong: rgba(255, 255, 255, 0.14);
    --lms-heading:       #f1f5f9;
    --lms-text:          #e2e8f0;
    --lms-accent:        #8b5cf6;
    --lms-accent-2:      #06b6d4;
    --lms-shadow:        0 8px 32px rgba(0, 0, 0, 0.45);

    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(2, 6, 23, 0.72);
}

.lms-archive-overlay[data-lms-theme="light"] {
    --lms-panel-bg:      #ffffff;
    --lms-border-strong: rgba(15, 23, 42, 0.18);
    --lms-heading:       #0f172a;
    --lms-text:          #1e293b;
    --lms-accent:        #7c3aed;
    --lms-accent-2:      #0e7490;
    --lms-shadow:        0 8px 28px rgba(15, 23, 42, 0.10);
}

.lms-archive-panel {
    width: 100%;
    max-width: 460px;
    padding: 22px;
    border-radius: 16px;
    background: var(--lms-panel-bg, rgba(15, 23, 42, 0.55));
    border: 1px solid var(--lms-border-strong, rgba(255, 255, 255, 0.14));
    box-shadow: var(--lms-shadow, 0 8px 32px rgba(0, 0, 0, 0.45));
    backdrop-filter: blur(14px);
}

.lms-archive-title {
    margin: 0 0 6px;
    font-size: 1.02rem;
    color: #f59e0b;
}

.lms-archive-file {
    margin: 0 0 10px;
    font-size: 0.82rem;
    word-break: break-word;
    color: var(--lms-heading, #f1f5f9);
}

.lms-archive-body {
    margin: 0 0 14px;
    font-size: 0.85rem;
    line-height: 1.8;
    color: var(--lms-text, #e2e8f0);
}

.lms-archive-consent {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 18px;
    font-size: 0.82rem;
    line-height: 1.7;
    cursor: pointer;
    color: var(--lms-text, #e2e8f0);
}

.lms-archive-consent input {
    flex: 0 0 auto;
    margin-top: 4px;
    width: 16px;
    height: 16px;
    accent-color: var(--lms-accent, #8b5cf6);
    cursor: pointer;
}

.lms-archive-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.lms-archive-actions button {
    padding: 8px 16px;
    border-radius: 9px;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--lms-border-strong, rgba(255, 255, 255, 0.14));
    background: transparent;
    color: var(--lms-text, #e2e8f0);
    transition: opacity 0.18s ease;
}

.lms-archive-confirm {
    border-color: transparent !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--lms-accent, #8b5cf6), var(--lms-accent-2, #06b6d4)) !important;
}

.lms-archive-confirm:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.lms-archive-actions button:not(:disabled):hover {
    opacity: 0.85;
}
/* rusty end new code */