/* public/src/features/create-lesson/create-lesson.css */
/* CSS variables at themes.css. This file is deliberately self-contained —
   NOT an import of create-quiz.css (see docs/plans/lessons-feature-plan.md's
   Phase 3 header: lessons get their own editor file, not a second content
   type threaded through create-quiz's ~5,900-line file). Anywhere the
   visual language matches create-quiz.css that's intentional (same design
   tokens, same look-and-feel) — the class names and rules themselves are
   authored fresh here. */

/* ============================================================================
   LUCIDE ICON NORMALIZATION
   ============================================================================ */

.page-data-lucide {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    stroke-width: 2;
    flex-shrink: 0;
    display: inline-block;
}

.spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* ============================================================================
   LAYOUT & CONTAINER
   ============================================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}

body {
    font-family: "IBM Plex Sans Arabic", sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 16px;
    padding-right: calc(var(--sidebar-collapsed-width) + 16px);
    transition: padding-right 250ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow-x: hidden;
    background: transparent;
    color: var(--color-text-primary);
}

html[data-animations="disabled"] body {
    background: var(--color-background);
}


body.sidebar-expanded {
    padding-right: calc(var(--sidebar-expanded-width) + 16px);
}

/* body.lesson-form-active is toggled by showLessonForm()/showEntryScreen()
   in create-lesson.js — mirrors create-quiz.css's body.quiz-form-active:
   only present while the fixed app-title-bar is visible, so it zeroes out
   body's normal top padding and .container gets an explicit margin-top
   instead, giving the same clearance. */
body.lesson-form-active {
    padding-top: 0;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 80px);
}

/* 44px app-title-bar + 40px global-md-bar = 84px, plus 10px breathing room
   — same math as create-quiz.css's body.quiz-form-active .container, now
   that this page also has the global markdown/LaTeX toolbar fixed below
   its title bar. */
body.lesson-form-active .container {
    margin-top: 94px;
}

/* ============================================================================
   AUTOSAVE INDICATOR
   ============================================================================ */

.autosave-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--color-success-light);
    color: var(--color-success);
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.3s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.autosave-indicator .save-icon svg {
    width: 13px;
    height: 13px;
}

.autosave-indicator.saving {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.autosave-indicator.error {
    background: var(--color-error-light);
    color: var(--color-error);
}

.save-icon {
    display: inline-flex;
    align-items: center;
    animation: pulse 2s infinite;
}

.autosave-indicator.saving .save-icon {
    animation: spin 1s linear infinite;
}

/* ============================================================================
   TOP BAR — lighter than create-quiz's: no undo/redo, no Docs-style menu
   bar (lessons don't have bulk/reorder/template modes to hang menus off
   of). Just home + title + autosave (start) and preview/save (end).
   ============================================================================ */

.app-title-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: var(--sidebar-collapsed-width);
    height: 44px;
    padding-left: 12px;
    padding-right: 12px;
    transition: right 250ms cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    z-index: 50;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
}

body.sidebar-expanded .app-title-bar {
    right: var(--sidebar-expanded-width);
}

.app-title-start {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 0;
}

.app-title-home {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
    padding: 0;
}

.app-title-home svg {
    width: 18px;
    height: 18px;
    display: block;
}

.app-title-home:hover,
.app-title-home:focus-visible {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

/* Undo/redo buttons carry the `disabled` attribute while their history stack
   is empty (see updateUndoRedoButtons in create-lesson.js). Without this rule
   the attribute blocked clicks but the buttons still LOOKED live — the exact
   rule create-quiz.css already ships, so both editors dim identically. */
.app-title-home:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.app-title-text {
  unicode-bidi: plaintext; /* truncate by the text's own direction */
  text-align: start;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 260px;
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    line-height: 1.4;
    flex-shrink: 0;
}

.app-title-text:hover {
    border-color: var(--color-border);
    background: var(--color-background);
}

.app-title-text:focus-visible:not(.editing) {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.app-title-text.editing {
    cursor: text;
    /* While renaming, the box grows with the text up to a cap and then
       scrolls INSIDE itself. It used to be `overflow: visible`, so a long title
       spilled out of its 260px box and was painted on top of the autosave
       indicator and the undo/redo buttons next to it. */
    max-width: min(46vw, 440px);
    overflow-x: auto;
    overflow-y: hidden;
    text-overflow: clip;
    white-space: nowrap;
    scrollbar-width: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
    background: var(--color-surface);
    outline: none;
}

.app-title-text.editing::-webkit-scrollbar {
    display: none;
}

@media (max-width: 768px) {
    .app-title-bar {
        right: 0;
    }

    .app-title-bar,
    .global-md-bar,
    .menu-bar {
        right: 0;
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 640px) {
    .app-title-bar {
        padding-left: 8px;
        padding-right: 8px;
        /* The whole bar scrolls horizontally on phones — same behavior as
       #globalMdBar — instead of trapping the menu inside its own
       vertically-scrolled dropdown. */
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .app-title-bar::-webkit-scrollbar {
        display: none;
    }

    .app-title-start {
        flex-shrink: 0;
    }

    .app-title-text {
        max-width: 120px;
    }

    .app-title-text.editing {
        max-width: min(62vw, 260px);
    }

    .app-bar-menu {
        flex: 0 0 auto;
    }

    .menu-bar-inner {
        /* No longer scrolls internally — the parent .app-title-bar scrolls. */
        overflow: visible;
    }
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    font-family: inherit;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.btn:hover {
    
    box-shadow: var(--shadow-lg);
}

.btn:active {
    transform: translateY(0);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-primary {
    background: var(--gradient-accent);
    color: white;
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background: var(--color-surface);
    color: var(--color-text-primary);
    border: 2px solid var(--color-border);
}

.btn-secondary:hover {
    border-color: var(--color-primary);
}

.btn-sm {
    padding: 7px 14px;
    font-size: 0.85rem;
    border-radius: 7px;
}

.btn-sm:hover {
    transform: none;
    box-shadow: none;
}

/* Small icon-only utility buttons used throughout the section/block cards
   (move up/down, delete). */
.lesson-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.lesson-icon-btn svg {
    width: 16px;
    height: 16px;
}

.lesson-icon-btn:hover,
.lesson-icon-btn:focus-visible {
    background: var(--color-background);
    color: var(--color-primary);
    outline: none;
}

.lesson-icon-btn:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.lesson-icon-btn-danger:hover,
.lesson-icon-btn-danger:focus-visible {
    background: var(--color-error-light);
    color: var(--color-error);
}

/* ============================================================================
   CARDS & FORM ELEMENTS
   ============================================================================ */

.card {
    padding: 20px;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    transition: box-shadow 0.3s ease;
    margin-bottom: 18px;
}

.card:hover {
    box-shadow: var(--shadow-lg);
}

.card h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px 0;
    font-size: 1.15rem;
}

.card h2 svg {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.form-group {
    margin-bottom: 12px;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    margin-bottom: 4px;
    color: var(--color-text-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 640px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.form-input {
    width: 100%;
    padding: 9px 14px;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    color: var(--color-text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

textarea.form-input {
    resize: vertical;
    min-height: 60px;
    line-height: 1.5;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

select.form-input {
    cursor: pointer;
}

/* ============================================================================
   ENTRY SCREEN — conceptually mirrors create-quiz.css's .entry-* shapes,
   authored fresh here per the plan (own file, not an import).
   ============================================================================ */

.entry-screen {
    padding: 8px 0 0 0;
}

.entry-sections {
    display: block;
    margin-bottom: 20px;
}

.entry-section {
    margin-bottom: 20px;
}

.entry-section:last-child {
    margin-bottom: 0;
}

.entry-screen-heading {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 14px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
}

.entry-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px;
}

.entry-item-wrap {
    position: relative;
}

.entry-item,
.entry-item-new {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 8px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: right;
}

.entry-item-thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 4;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text-tertiary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.entry-item-thumb svg {
    width: 30%;
    height: 30%;
}

.entry-item-thumb-new {
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-style: dashed;
    border-width: 2px;
}

.entry-item:hover .entry-item-thumb,
.entry-item:focus-visible .entry-item-thumb,
.entry-item-new:hover .entry-item-thumb,
.entry-item-new:focus-visible .entry-item-thumb {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.entry-item:focus-visible .entry-item-thumb,
.entry-item-new:focus-visible .entry-item-thumb {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.entry-item-title {
  unicode-bidi: plaintext; /* truncate by the text's own direction */
  text-align: start;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entry-item-new .entry-item-title {
    color: var(--color-text-secondary);
}

.entry-item-meta {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}

.entry-item-more-wrap {
    position: absolute;
    top: 8px;
    right: 8px;
}

.entry-item-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.entry-item-more-btn svg {
    width: 15px;
    height: 15px;
}

.entry-item-more-btn:hover,
.entry-item-more-btn:focus-visible {
    background: var(--color-background);
    color: var(--color-primary);
}

.entry-item-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 150px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 40;
}

.entry-item-menu.open {
    display: block;
}

.entry-item-menu-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 0.875rem;
    text-align: right;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.entry-item-menu-option svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--color-text-secondary);
}

.entry-item-menu-option:hover,
.entry-item-menu-option:focus-visible {
    background: var(--color-background);
}

.entry-item-menu-option-danger {
    color: var(--color-error);
}

.entry-item-menu-option-danger svg {
    color: var(--color-error);
}

.entry-item-menu-option-danger:hover,
.entry-item-menu-option-danger:focus-visible {
    background: var(--color-error-light);
}

/* Skeleton loader */
.entry-skeleton-heading {
    width: 140px;
    height: 14px;
    margin: 0 0 14px 0;
    border-radius: 4px;
    background: var(--color-border);
    overflow: hidden;
    position: relative;
}

.entry-skeleton-tile {
    aspect-ratio: 3 / 4;
    border-radius: 8px;
    background: var(--color-border);
    overflow: hidden;
    position: relative;
}

.entry-skeleton-heading::after,
.entry-skeleton-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-surface) 60%, transparent), transparent);
    animation: skeletonShimmer 1.5s ease-in-out infinite;
}

@keyframes skeletonShimmer {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.entry-not-admin-message {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    padding: 24px;
    text-align: center;
}

@media (max-width: 480px) {
    .entry-items-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 14px;
    }
}

/* ============================================================================
   LESSON EDITOR SHELL
   ============================================================================ */

.lesson-creator {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 30px;
}

/* ============================================================================
   SECTION LIST
   ============================================================================ */

.lesson-sections-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.lesson-sections-header h2 {
    margin: 0;
}

.sections-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lesson-section-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-background);
    padding: 14px;
    scroll-margin-top: 60px;
}

.lesson-section-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.lesson-section-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 200px;
}

.lesson-section-index {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.lesson-section-title-input {
    flex: 1;
    font-weight: 600;
}

.lesson-section-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.lesson-section-hidden-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    padding: 0 6px;
    cursor: pointer;
}

.lesson-section-hidden-toggle input {
    cursor: pointer;
}

.lesson-blocks-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

.lesson-add-block-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ============================================================================
   BLOCK CARDS (per-type editors)
   ============================================================================ */

.lesson-block-card {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    padding: 12px;
}

.lesson-block-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.lesson-block-type-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lesson-block-card-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* ── Markdown block write/preview toggle ─────────────────────────────────── */

.lesson-md-editor {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}

.lesson-md-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-background);
}

.lesson-md-tab {
    padding: 7px 16px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.lesson-md-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.lesson-md-textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    border: none;
    background: var(--color-background);
    color: var(--color-text-primary);
    font-family: "IBM Plex Sans Arabic", sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    resize: vertical;
}

.lesson-md-textarea:focus {
    outline: none;
}

.lesson-md-preview {
    padding: 12px;
    min-height: 60px;
    background: var(--color-surface);
}

/* ── Media block ──────────────────────────────────────────────────────────── */

.lesson-media-editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lesson-media-dropzone {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border: 2px dashed var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    text-align: center;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.lesson-media-dropzone.is-dragover {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.lesson-media-dropzone p {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    pointer-events: none;
}

.lesson-media-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.lesson-media-preview img.lesson-media-preview-img {
    max-width: 100%;
    max-height: 240px;
    border-radius: 8px;
    display: block;
}

.lesson-media-preview video.lesson-media-preview-video {
    max-width: 100%;
    max-height: 240px;
    border-radius: 8px;
    display: block;
}

.lesson-media-preview audio {
    width: 100%;
}

.lesson-media-uploading {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

/* ── Quiz-reference block ─────────────────────────────────────────────────── */

.lesson-quizref-results {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    max-height: 200px;
    overflow-y: auto;
}

.lesson-quizref-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 0.85rem;
    text-align: right;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.lesson-quizref-result:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.lesson-quizref-result-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.lesson-quizref-result-title {
    font-weight: 600;
}

.lesson-quizref-result-sub {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lesson-quizref-result-count {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}

.lesson-quizref-no-results {
    color: var(--color-text-tertiary);
    font-size: 0.82rem;
    padding: 6px 2px;
}

.lesson-quizref-selected {
    margin-top: 10px;
}

.lesson-quizref-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}

.lesson-quizref-chip-title {
    font-weight: 600;
    font-size: 0.9rem;
}

.lesson-quizref-chip-count {
    font-size: 0.78rem;
    flex-shrink: 0;
}

.lesson-quizref-empty,
.lesson-quizref-unresolved {
    color: var(--color-text-tertiary);
    font-size: 0.85rem;
}


.lesson-lessonref-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-primary-light);
    color: var(--color-text-primary);
}

.lesson-lessonref-chip-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.lesson-lessonref-chip-title {
    font-weight: 600;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.lesson-lessonref-chip-status {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    white-space: nowrap;
}

.lesson-lessonref-chip-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.lesson-lessonref-chip-btn {
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

.lesson-lessonref-chip-btn:hover,
.lesson-lessonref-chip-btn:focus-visible {
    border-color: var(--color-primary);
    outline: none;
}

.lesson-lessonref-chip-btn.is-danger:hover,
.lesson-lessonref-chip-btn.is-danger:focus-visible {
    border-color: var(--color-error);
    color: var(--color-error);
}

@media (max-width: 600px) {
    .lesson-lessonref-chip {
        align-items: stretch;
        flex-direction: column;
    }

    .lesson-lessonref-chip-actions {
        width: 100%;
    }

    .lesson-lessonref-chip-btn {
        flex: 1 1 0;
    }
}

/* ── Embedded question block ──────────────────────────────────────────────── */

.lesson-question-prompt {
    resize: vertical;
}

.lesson-question-options {
    margin: 12px 0;
}

.lesson-question-options>label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

.lesson-question-option-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.lesson-question-option-row input[type="radio"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.lesson-question-option-row .form-input {
    flex: 1;
}

.lesson-adaptive-rule {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px dashed var(--color-border);
}

.lesson-adaptive-rule label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

/* ============================================================================
   CREATE-PAGE SECTION NAVIGATOR (sidebar widget)
   Same visual language as create-quiz.css's .create-question-navigator*,
   authored fresh here since create-lesson.html doesn't load create-quiz.css.
   ============================================================================ */

.create-question-navigator {
    width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    overflow: hidden;
    direction: rtl;
}

.create-question-navigator-toggle {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--color-text-primary);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
}

.create-question-navigator-toggle:hover,
.create-question-navigator-toggle:focus-visible {
    background: var(--color-background);
    outline: none;
}

.create-question-navigator.is-open .create-question-navigator-toggle {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
}

.create-question-navigator-toggle>svg:first-child {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.create-question-navigator-count {
    min-width: 22px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: 0.72rem;
    text-align: center;
}

.create-question-navigator-chevron {
    width: 15px;
    height: 15px;
    margin-right: auto;
    transition: transform 0.2s ease;
}

.create-question-navigator:not(.is-open) .create-question-navigator-chevron {
    transform: rotate(90deg);
}

.create-question-navigator-panel {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    max-height: min(38vh, 330px);
    overflow-y: auto;
    padding: 8px;
    border-top: 1px solid var(--color-border);
}

.create-question-navigator-panel:empty {
    display: none;
}

.create-question-navigator-panel[hidden] {
    display: none;
}

.create-question-nav-item {
    aspect-ratio: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    background: var(--color-background-secondary);
    color: var(--color-text-primary);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.create-question-nav-item:hover {
    transform: scale(1.04);
    border-color: var(--color-primary);
}

.create-question-nav-item.incomplete {
    border-color: var(--color-warning);
    color: var(--color-warning);
}

body:not(.lesson-form-active) .create-question-navigator {
    display: none;
}

/* ============================================================================
   PREVIEW-ONLY HELPERS (used by previewLesson()'s new-tab document)
   ============================================================================ */

.lesson-preview-quizref {
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-size: 0.9rem;
    margin: 12px 0;
}

.lesson-preview-question ol {
    padding-inline-start: 20px;
    margin-top: 8px;
}

.lesson-preview-question li.is-correct {
    color: var(--color-success);
    font-weight: 700;
}

/* ============================================================================
   GLOBAL MARKDOWN + LATEX TOOLBAR (#globalMdBar) + WRITE/PREVIEW FIELDS
   ============================================================================
   Ported verbatim from create-quiz.css (same #globalMdBar markup, same
   .md-source/.wp-field write/preview editor shape) so this page gets the
   exact same authoring toolbar/undo history as create-quiz — see
   create-lesson.js's setupGlobalMdBar()/applyGlobalMdAction() port and
   equipMarkdownFields()'s use of mdEditorHtml() for the write/preview
   fields these rules style. A couple of selectors here reference classes
   quiz-only (.option-md-wrap, .preview-question) that never appear on
   this page — harmless dead weight kept so this block stays a literal
   copy rather than a hand-trimmed one that can drift out of sync.
   ============================================================================ */

.undo-redo-group {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.global-md-bar {
    position: fixed;
    top: 44px;
    left: 0;
    right: var(--sidebar-collapsed-width);
    height: 40px;
    z-index: 49;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    transition: right 250ms cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

/* When background animations are enabled, --color-surface becomes
   semi-transparent (see themes.css) so the animated shader shows through
   panels/cards — appropriate for large surfaces, but this toolbar's text
   (.gmd-btn-latex in particular) was contrast-checked against an OPAQUE
   surface color; layering it over a moving, unpredictable background
   could silently drop it below AA depending on what's rendered behind it
   at any given moment. backdrop-filter's blur keeps the same "shows
   through" feel without ever letting the raw background color show
   through at full strength under the text itself. */
html[data-animations="enabled"] .global-md-bar {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Same reasoning as .global-md-bar above, but for the dropdown POPOVERS
   themselves (.gmd-dropdown-menu, .menu-dropdown incl. its submenu
   variant) — these render position:fixed, detached from the toolbar/menu
   bar's own DOM box, so they don't inherit that bar's blur just because
   the bar has one. Each is its own semi-transparent --color-surface panel
   in Lightfall mode and needs the same treatment, or .gmd-btn-latex's
   label (and every .menu-option label) is only contrast-safe against an
   opaque surface that Lightfall mode never actually gives it. */
html[data-animations="enabled"] .gmd-dropdown-menu,
html[data-animations="enabled"] .menu-dropdown {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.global-md-bar::-webkit-scrollbar {
    display: none;
}

body.sidebar-expanded .global-md-bar {
    right: var(--sidebar-expanded-width);
}

@media (max-width: 768px) {
    .global-md-bar {
        right: 0;
    }
}

.gmd-group {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.gmd-separator {
    width: 1px;
    height: 20px;
    background: var(--color-border);
    margin: 0 6px;
    flex-shrink: 0;
}

.gmd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    min-width: 30px;
    height: 28px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.gmd-btn:hover,
.gmd-btn:focus-visible,
.gmd-btn[aria-expanded="true"],
.gmd-btn.gmd-btn-active {
    background: var(--color-primary-light);
    color: var(--color-primary);
    outline: none;
}

.gmd-btn:active {
    transform: scale(0.93);
}

/* LaTeX buttons — real icons (see .gmd-icon-math below for the
   superscript/subscript/fraction/inline-math glyphs, which render their
   mathematical notation as SVG <text> rather than plain button text: this
   keeps their exact visual shape — "x" raised/lowered relative to a small
   exponent, a fraction bar between two glyphs — independent of the
   surrounding page's font/line-height, which plain text content inside a
   26px button could not guarantee). Slightly different accent color than
   the plain-markdown .gmd-btn group so the two toolbar sections stay
   visually distinguishable at a glance. */
.gmd-btn-latex {
    color: var(--color-text-secondary);
}

.gmd-btn-latex:hover,
.gmd-btn-latex:focus-visible,
.gmd-btn-latex[aria-expanded="true"],
.gmd-btn-latex.gmd-btn-active {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
}

/* The four math buttons whose icon is built from SVG <text> (sup/sub/frac/
   inline-math) rather than <path> strokes — text needs fill, not stroke.
   The page is dir="rtl" (Arabic UI), and SVG <text> inherits CSS
   `direction`; with no explicit text-anchor, RTL direction reverses the
   glyph's flow from its x coordinate, pushing it off the left edge of the
   viewBox entirely (this is what made #gmdSup / #gmdSub render as empty
   buttons). Forcing ltr here keeps every math glyph anchored the way its
   x/y coordinates were authored, independent of page direction. */
.gmd-icon-math text {
    fill: currentColor;
    direction: ltr;
    unicode-bidi: bidi-override;
}

/* Tooltip for "no field focused" state — shown via JS as a brief flash */
.gmd-no-field-tip {
    position: fixed;
    top: calc(44px + 40px + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-text-primary);
    color: var(--color-surface);
    font-size: 0.82rem;
    padding: 5px 14px;
    border-radius: 6px;
    z-index: 200;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
    white-space: nowrap;
}

.gmd-no-field-tip.visible {
    opacity: 1;
}

/* ── Dropdown toggles (heading levels, "more" LaTeX symbols) ────────────── */
/* .gmd-dropdown-menu uses position:fixed (set via inline top/left in JS,
   anchored to its toggle button) rather than position:absolute. The
   toolbar itself scrolls horizontally (overflow-x: auto) and clips
   vertical overflow (overflow-y: hidden) so its buttons don't visually
   spill past the fixed bar's height — an absolutely-positioned dropdown
   anchored inside it would be clipped by that same overflow:hidden and
   never actually appear. Fixed positioning escapes the clipping ancestor
   entirely. */
.gmd-dropdown {
    position: relative;
}

.gmd-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.gmd-dropdown-toggle .gmd-caret {
    width: 9px;
    height: 9px;
    opacity: 0.7;
}

/* Icon glyphs inside .gmd-btn (bold/italic/heading/etc.) — sized to sit
   comfortably inside the 26px-tall button without the button growing. */
.gmd-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.gmd-dropdown-menu {
    position: fixed;
    z-index: 200;
    display: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    padding: 4px;
    box-sizing: border-box;
    max-width: calc(100vw - 16px);
}

.gmd-dropdown-menu.open {
    display: flex;
}

/* Heading menu: single column list, one level per row */
.gmd-dropdown-menu--headings {
    flex-direction: column;
    min-width: 130px;
}

.gmd-dropdown-menu--headings .gmd-btn {
    width: 100%;
    justify-content: flex-start;
    padding: 6px 10px;
    height: auto;
}

/* LaTeX "more" menu: one symbol per row, label next to it, so each command
   is identifiable without hovering for the tooltip. */
.gmd-dropdown-menu--latex {
    flex-direction: column;
    gap: 2px;
    min-width: 210px;
    max-width: 260px;
    max-height: 60vh;
    overflow-y: auto;
}

.gmd-dropdown-menu--latex .gmd-btn-latex {
    width: 100%;
    justify-content: flex-start;
    gap: 12px;
    height: auto;
    padding: 4px 12px;
    border-radius: 6px;
}

.gmd-dropdown-menu--latex .gmd-btn-latex-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    flex-shrink: 0;
}

.gmd-dropdown-menu--latex .gmd-btn-latex-symbol .gmd-icon {
    width: 16px;
    height: 16px;
}

/* Mathematical notation (Σ, ∫, π, ±, ≤, ≥, ≠, ∞) has no meaningful icon
   beyond the symbol itself, so these render as styled glyphs rather than
   plain inline text — sized and weighted to match the SVG icons next to
   them in the same menu. */
.gmd-dropdown-menu--latex .gmd-btn-latex-symbol--char {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1;
}

.app-bar-menu {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

@media (max-width: 640px) {
    .app-bar-menu {
        flex: 0 0 auto;
    }
}

.menu-bar-item {
    position: relative;
}

.menu-trigger {
    border: 0;
    border-radius: 5px;
    padding: 5px 9px;
    background: transparent;
    color: var(--color-text-primary);
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
}

.menu-trigger:hover,
.menu-trigger:focus-visible {
    background: var(--color-primary-light);
    color: var(--color-primary);
    outline: none;
}

.menu-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    z-index: 80;
    display: none;
    min-width: 170px;
    padding: 5px;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}

.menu-dropdown.open {
    display: grid;
    gap: 2px;
}

.menu-option {
    border: 0;
    border-radius: 5px;
    padding: 7px 9px;
    background: transparent;
    color: var(--color-text-primary);
    text-align: right;
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
}

.menu-option:hover:not(:disabled),
.menu-option:focus-visible {
    background: var(--color-primary-light);
    color: var(--color-primary);
    outline: none;
}

.menu-option:disabled {
    cursor: not-allowed;
    opacity: .5;
}

.gmd-dropdown-menu--latex .gmd-btn-latex-label {
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--color-text-primary);
    white-space: nowrap;
}

.wp-field {
    width: 100%;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-background);
    transition:
        border-color 0.18s,
        box-shadow 0.18s;
}

.wp-field:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.wp-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 8px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    flex-wrap: wrap;
}

.wp-tabs {
    display: flex;
    gap: 2px;
}

.wp-tab {
    padding: 9px 14px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        color 0.15s,
        border-color 0.15s;
    margin-bottom: -1px;
}

.wp-tab:hover {
    color: var(--color-text-primary);
}

.wp-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.wp-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 0;
}

.wp-tool-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition:
        background 0.15s,
        color 0.15s;
}

.wp-tool-btn svg {
    width: 14px;
    height: 14px;
}

.wp-tool-btn:hover {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.wp-tool-dropdown {
    position: relative;
}

.wp-heading-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    min-width: 110px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: var(--shadow-lg);
    padding: 4px;
    gap: 1px;
}

.wp-heading-option {
    display: block;
    width: 100%;
    text-align: right;
    padding: 6px 10px;
    border: none;
    background: none;
    border-radius: 4px;
    font-size: 0.82rem;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background 0.15s;
}

.wp-heading-option:hover {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.wp-pane-wrap {
    position: relative;
}

/* The rich Markdown highlighter wraps .md-source in a mirror surface. Hide
   the whole surface in preview mode so syntax tokens never bleed beside the
   rendered Markdown (including when the observer attaches the wrapper late). */
.lesson-md-editor.is-previewing .rich-input-highlighter {
    display: none;
}

/* Selectors are doubled up (`.form-group textarea.wp-textarea` as well as
   plain `.wp-textarea`) so this wins in the cascade over the generic
   `.form-group textarea` / `.form-group textarea:focus` rules above.
   Question-text and explanation fields render `.wp-textarea` *inside* a
   `.form-group` (see renderQuestion()), so without this the more-specific
   `.form-group textarea` rule was winning instead — giving the field its
   own 2px border, its own `resize: vertical`, and on focus its own
   border-color + box-shadow ring stacked directly on top of .wp-field's
   ring below. That combination was both the visible "double border" and
   the manual resize handle the field wasn't supposed to have. */
.form-group textarea.wp-textarea,
.wp-textarea {
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: var(--color-background);
    color: var(--color-text-primary);
    font-size: 0.9rem;
    line-height: 1.6;
    resize: none;
    box-sizing: border-box;
    display: block;
    overflow: hidden;
    direction: rtl;
}

/* The focus ring lives on the outer .wp-field wrapper (border-color +
   box-shadow above). Without this, the textarea's own default browser
   focus outline — and, inside a .form-group, the generic
   `.form-group textarea:focus` border/box-shadow — drew on top of that
   ring at the same time, making an active field look like it had two
   borders stacked on each other. */
.form-group textarea.wp-textarea:focus,
.wp-textarea:focus,
.wp-textarea:focus-visible {
    outline: none;
    border: none;
    box-shadow: none;
    transform: none;
}

.wp-textarea:placeholder-shown {
    text-align: right;
}

/* GitHub-style drag-and-drop media embedding: visual feedback while a file
   is dragged over a markdown field (question text, options, explanation,
   essay/formal answer — every .md-source textarea gets this via
   setupMarkdownMediaDropzone). Applied to the textarea's wrapper so the
   whole field visibly lights up as a drop target. */
.wp-field:has(.md-source--drag-active) {
    border-color: var(--gradient-start, #6366f1);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--gradient-start, #6366f1) 25%, transparent);
}

.md-source--drag-active {
    background: color-mix(in srgb, var(--gradient-start, #6366f1) 6%, var(--color-background));
}

.wp-preview-pane {
    min-height: 60px;
    padding: 10px 14px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text-primary);
    word-break: break-word;
}

.wp-footer {
    padding: 6px 14px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

.wp-hint {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--color-text-tertiary);
    font-size: 0.75rem;
}

.md-placeholder {
    color: var(--color-text-tertiary);
    font-style: italic;
    pointer-events: none;
}

.wp-preview-pane .inline-code,
.preview-question .inline-code,
.option-md-wrap .inline-code {
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: 4px;
    padding: 1px 6px;
    font-family: "Fira Code", "Courier New", monospace;
    font-size: 0.88em;
    font-style: normal;
}

.gmd-select {
    height: 28px;
    max-width: 125px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font: inherit;
    font-size: 0.78rem;
}

.lesson-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(0, 0, 0, .48);
}

.lesson-preview-panel {
    width: min(920px, 100%);
    max-height: calc(100vh - 40px);
    overflow: auto;
    border-radius: 8px;
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}

.lesson-preview-topbar {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.lesson-preview-badge {
    color: var(--color-success);
    font-size: .82rem;
    font-weight: 700;
}

body.lesson-preview-open {
    overflow: hidden;
}

.lesson-question-type-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ============================================================================
   HIGHLIGHT COLOR PICKER  (Google-Docs-style; markup from
   src/shared/color-picker.js). Kept identical in create-quiz.css and
   create-lesson.css — see the note at the top of each about intentionally
   duplicated toolbar styles.

   ROOT-CAUSE NOTE — why the old menu "stayed open forever": the previous
   rule `.gmd-dropdown-menu--highlight { display: grid }` had the same
   specificity as the base `.gmd-dropdown-menu { display: none }` and came
   LATER in the file, so it always won and the menu was permanently visible
   regardless of the `.open` class. Layout below is therefore applied ONLY
   under `.open`; the closed state falls through to the base `display: none`.
   ============================================================================ */

.gmd-dropdown-menu--highlight {
    /* No `display` here on purpose — see the note above. */
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    width: max-content;
    max-width: calc(100vw - 16px);
    padding: 10px;
    max-height: min(80vh, 460px);
    overflow-y: auto;
}

.gmd-dropdown-menu--highlight.open {
    display: flex;
}

.cp-reset {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px 6px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-primary);
    font: inherit;
    font-size: 0.82rem;
    text-align: right;
    cursor: pointer;
}

.cp-reset svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--color-text-secondary);
}

.cp-reset:hover,
.cp-reset:focus-visible {
    background: var(--color-surface-hover, rgba(127, 127, 127, 0.12));
    outline: none;
}

.cp-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cp-row,
.cp-recent {
    display: flex;
    gap: 4px;
}

.cp-recent {
    flex-wrap: wrap;
}

.cp-swatch {
    width: 20px;
    height: 20px;
    padding: 0;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.18);
    background: var(--cp-color);
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.cp-swatch:hover,
.cp-swatch:focus-visible {
    transform: scale(1.18);
    box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary);
    outline: none;
    position: relative;
    z-index: 1;
}

.cp-section-title {
    margin-top: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

.cp-custom {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cp-tool {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.cp-tool svg {
    width: 16px;
    height: 16px;
}

.cp-tool:hover,
.cp-tool:focus-visible,
.cp-tool:focus-within {
    background: var(--color-surface-hover, rgba(127, 127, 127, 0.12));
    color: var(--color-primary);
    outline: none;
}

/* The native color input is visually hidden but still the real control the
   surrounding <label> activates — kept in the layout box (not display:none)
   so the OS picker anchors next to the "+" button. */
.cp-native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    padding: 0;
    border: 0;
}

.cp-hex {
    width: 84px;
    min-width: 0;
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-background);
    color: var(--color-text-primary);
    font: inherit;
    font-size: 0.8rem;
    text-align: left;
}

.cp-hex:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 0;
}

.cp-hex.is-invalid {
    border-color: var(--color-error);
    outline-color: var(--color-error);
}

.cp-apply {
    height: 28px;
    padding: 0 10px;
    border: none;
    border-radius: 6px;
    background: var(--color-primary);
    color: #fff;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.cp-apply:hover,
.cp-apply:focus-visible {
    background: var(--color-primary-hover, var(--color-primary));
    outline: none;
}

@media (max-width: 480px) {
    .cp-swatch {
        width: 18px;
        height: 18px;
    }

    .cp-row,
    .cp-recent {
        gap: 3px;
    }
}

/* Lesson details */
.lesson-editor-details {
    margin-bottom: 1rem;
    padding: 1rem 1.1rem;
}
.lesson-details-header h2 { margin: 0; font-size: 1.05rem; }
.lesson-details-header p { margin: .2rem 0 0; color: var(--color-text-secondary); font-size: .86rem; }
.lesson-details-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 1rem; margin-top: .9rem; }
.lesson-description-input { min-height: 96px; resize: vertical; }
.lesson-character-count { margin-top: .35rem; text-align: end; color: var(--color-text-secondary); font-size: .76rem; }
.lesson-password-field { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .45rem; align-items: stretch; }
.lesson-password-action, .lesson-password-remove { min-height: 40px; min-width: 40px; border: 1px solid var(--color-border); border-radius: 9px; background: transparent; color: var(--color-text-primary); font: inherit; cursor: pointer; padding: .45rem .65rem; }
.lesson-password-action:hover, .lesson-password-remove:hover { border-color: var(--color-primary); }
.lesson-password-action:focus-visible, .lesson-password-remove:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.lesson-password-footer { display: flex; gap: .65rem; align-items: center; justify-content: space-between; margin-top: .45rem; color: var(--color-text-secondary); font-size: .8rem; flex-wrap: wrap; }
.lesson-password-remove { color: var(--color-error, #dc2626); border-color: color-mix(in srgb, var(--color-error, #dc2626) 35%, var(--color-border)); }

@media (max-width: 720px) {
    .lesson-details-grid { grid-template-columns: 1fr; }
    .lesson-password-field { grid-template-columns: minmax(0, 1fr) auto; }
    .lesson-password-action:last-child { grid-column: 2; }
}

/* Dropdowns are detached to <body> by global-markdown-toolbar.js. */
.gmd-dropdown-menu {
    position: fixed;
    z-index: 10050;
    max-width: calc(100vw - 16px);
    box-sizing: border-box;
}


/* ==========================================================================
   CREATE-LESSON MENU PARITY OVERRIDE
   Keep #menuBar identical to create-quiz: fixed popovers escape the
   horizontally-scrolling title bar and JS controls the open state.
   ========================================================================== */
.menu-bar-inner {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 2px;
    min-width: max-content;
}

#menuBar .menu-trigger {
    display: block;
    padding: 6px 10px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
    white-space: nowrap;
    line-height: 1.4;
}

#menuBar .menu-trigger:hover { background: var(--color-background); }
#menuBar .menu-trigger:focus { outline: none; }
#menuBar .menu-trigger:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}
.menu-bar-item.menu-item-open .menu-trigger {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

#menuBar .menu-dropdown {
    display: none;
    position: fixed;
    right: auto; /* older .menu-dropdown rule sets right:0, which beats JS-set left in RTL */
    min-width: 240px;
    max-width: min(92vw, 360px);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 60;
    box-sizing: border-box;
}
#menuBar .menu-bar-item.menu-item-open > .menu-dropdown { display: block; }

#menuBar .menu-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    padding: 6px 10px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--color-text-primary);
    font: inherit;
    font-size: .8125rem;
    text-align: start;
    cursor: pointer;
    box-sizing: border-box;
}
#menuBar .menu-option:hover:not(:disabled),
#menuBar .menu-option:focus-visible {
    background: var(--color-primary-light);
    color: var(--color-primary);
    outline: none;
}
#menuBar .menu-option:focus-visible { box-shadow: 0 0 0 2px var(--color-primary) inset; }
#menuBar .menu-option:disabled { opacity: .55; cursor: not-allowed; }
#menuBar .menu-option svg { width: 16px; height: 16px; flex: 0 0 auto; }
#menuBar .menu-option-label { flex: 1; }
#menuBar .menu-option-shortcut { margin-inline-start: auto; color: var(--color-text-secondary); font-size: .72rem; direction: ltr; }
#menuBar .menu-separator { height: 1px; margin: 4px 2px; background: var(--color-border); }

@media (max-width: 768px) {
    #menuBar .menu-dropdown {
        min-width: 220px;
        max-width: calc(100vw - 16px);
    }
    #menuBar .menu-option { min-height: 42px; }
}

/* ============================================================================
   LESSON INFO CARD — form fields (ported from create-quiz.css so
   "معلومات عن الدرس" matches the quiz metadata card)
   ============================================================================ */
.form-group input[type="text"],
.form-group input[type="url"],
.form-group input[type="search"],
.form-group input[type="password"],
.form-group textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 14px;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
    color: var(--color-text-primary);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
}
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.form-group textarea { resize: vertical; min-height: 60px; }
.form-group textarea.autosize-textarea,
.autosize-textarea { resize: none; overflow-y: hidden; min-height: 0; transition: height .08s ease-out; }
#lessonSource { direction: ltr; }
#lessonPasswordInput { direction: rtl; }

.char-count { float: left; font-size: .875rem; color: var(--color-text-tertiary); font-weight: 400; }
.char-count.warning { color: var(--color-warning); }
.char-count.error { color: var(--color-error); }

.password-field { position: relative; }
.password-field input[type="password"],
.password-field input[type="text"] { padding-inline-end: 72px; }
.password-field-actions {
    position: absolute;
    inset-inline-end: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 2px;
}
.password-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.password-action-btn:hover:not(:disabled),
.password-action-btn:focus-visible { background: var(--color-background); color: var(--color-primary); outline: none; }
.password-action-btn:disabled { opacity: .45; cursor: not-allowed; }
.password-action-btn svg { width: 18px; height: 18px; }
.password-action-btn.copied { color: var(--color-success); }
.password-field-state {
    display: flex;
    gap: .65rem;
    align-items: center;
    justify-content: space-between;
    margin-top: .45rem;
    color: var(--color-text-secondary);
    font-size: .8rem;
    flex-wrap: wrap;
}

/* ============================================================================
   RESPONSIVE — PHONES (mirrors create-quiz.css)
   Phones use the bottom nav, not the side rail: no side gap to reserve, but
   room is needed at the bottom for the nav. Fixed min-widths and non-wrapping
   rows are relaxed so nothing can push the layout wider than the screen
   (which also made the fixed top bars and bottom nav scroll sideways).
   ============================================================================ */
html {
    overflow-x: hidden;
    max-width: 100%;
}

@media (max-width: 768px) {
    body {
        padding-right: 16px;
        padding-bottom: calc(var(--bottom-nav-height, 54px) + env(safe-area-inset-bottom, 0px) + 16px);
    }

    body.sidebar-expanded {
        padding-right: 16px;
    }

    .container {
        min-width: 0;
        max-width: 100%;
    }

    .container,
    .lesson-creator,
    .lesson-creator > *,
    .card,
    .sections-container,
    .lesson-section-card,
    .lesson-block-card {
        min-width: 0;
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    body.lesson-form-active {
        padding-top: 0;
    }

    .container {
        padding: 0;
    }

    .card {
        padding: 16px;
    }

    .autosave-indicator {
        margin-right: auto;
    }

    /* Sections header: title + "new section" button wrap instead of squeezing */
    .lesson-sections-header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .lesson-sections-header h2 {
        flex: 1 1 auto;
        min-width: 0;
    }

    .lesson-sections-header .btn {
        flex: 1 1 100%;
        justify-content: center;
        padding: 10px 16px;
    }

    .lesson-section-card {
        padding: 10px;
    }

    .lesson-section-card-header {
        gap: 8px;
    }

    .lesson-section-title-group {
        flex: 1 1 100%;
        min-width: 0;
    }

    .lesson-section-title-input {
        min-width: 0;
    }

    .lesson-section-actions {
        flex: 1 1 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        min-width: 0;
    }

    .lesson-section-hidden-toggle {
        white-space: normal;
        margin-inline-end: auto;
    }

    .lesson-add-block-row {
        gap: 6px;
    }

    .lesson-add-block-row > * {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
        justify-content: center;
        padding: 9px 8px;
        font-size: 0.88rem;
        white-space: normal;
    }

    .lesson-block-card {
        padding: 10px;
    }

    .lesson-block-card-header {
        gap: 8px;
        flex-wrap: wrap;
    }

    .lesson-md-tab {
        padding: 7px 12px;
    }

    .lesson-md-editor,
    .lesson-md-textarea,
    .lesson-md-preview,
    .lesson-media-editor,
    .lesson-question-prompt {
        max-width: 100%;
        min-width: 0;
    }

    .lesson-md-preview,
    .lesson-md-preview pre,
    .lesson-md-preview table {
        overflow-x: auto;
        max-width: 100%;
    }

    .lesson-question-option-row {
        gap: 6px;
        min-width: 0;
    }

    .lesson-question-option-row input[type="text"],
    .lesson-question-option-row textarea {
        min-width: 0;
        flex: 1 1 auto;
    }
}
/* Drafts heading row + "delete all drafts" button */
.entry-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px 0;
  border-bottom: 1px solid var(--color-border);
}
.entry-section-head .entry-screen-heading {
  margin: 0;
  border-bottom: 0;
}
.entry-clear-drafts-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: transparent;
  color: var(--color-error, #dc2626);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.entry-clear-drafts-btn:hover {
  background: var(--color-error-light, rgba(220, 38, 38, 0.08));
  border-color: var(--color-error, #dc2626);
}