/* ========== LESSON DETAIL MODAL - Shared Component ========== */

/* Base .modal-overlay styles are in shared/layout.css */

/* Shared utility styles needed by the lesson modal */

.curriculum-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.curriculum-section-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 20px;
}

.curriculum-form-group {
    margin-bottom: 18px;
}

.curriculum-form-group label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.curriculum-form-group input,
.curriculum-form-group select {
    width: 100%;
    padding: 10px 12px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    color: #333;
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
    appearance: none;
    -webkit-appearance: none;
}

.curriculum-form-group input:focus,
.curriculum-form-group select:focus {
    outline: none;
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
    background-color: white;
}

.curriculum-textarea {
    width: 100%;
    min-height: 140px;
    padding: 12px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.curriculum-textarea:focus {
    outline: none;
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
    background-color: white;
}

.save-config-btn {
    padding: 10px 28px;
    font-size: 13px;
    font-weight: 700;
    color: white;
    background-color: #059669;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.save-config-btn:hover {
    background-color: #047857;
}

.framework-badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 10px;
    font-weight: 700;
    color: #059669;
    background-color: #d1fae5;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    vertical-align: middle;
}

.status-badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-badge.completed { background-color: #d1fae5; color: #065f46; }
.status-badge.editing { background-color: #dbeafe; color: #1e40af; }
.status-badge.active { background-color: #fef3c7; color: #92400e; }
.status-badge.pending { background-color: #f3f4f6; color: #6b7280; }

/* Background section cards */
.bg-card {
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 14px;
}

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

.bg-card-title {
    font-size: 12px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bg-label {
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.bg-value {
    font-size: 13px;
    color: #333;
    margin-bottom: 6px;
}

.bg-value.empty {
    color: #ccc;
    font-style: italic;
}

/* Modal body no-scroll — used when split-view is active so panels scroll internally */
.modal-body.no-scroll {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Split view layout (Lesson Plan tab) */
.modal-tab-content.split-view { display: none; padding: 0; }
.modal-tab-content.split-view.active {
    display: flex;
    flex-direction: row;
    flex: 1;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.split-left-panel {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#ld-plan-full {
    flex: 1;
    min-height: 150px;
    resize: none;
    width: 100%;
    padding: 20px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    line-height: 1.7;
    color: #333;
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-sizing: border-box;
    margin-top: 12px;
}

#ld-plan-full:focus {
    outline: none;
    border-color: #059669;
}

/* Lesson Plan Toolbar — Teacher Only & AI Organize buttons */
.ld-plan-toolbar {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.ld-toolbar-hint {
    font-size: 11px;
    color: #999;
    font-style: italic;
}
.ld-toolbar-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}
.ld-plan-toolbar-btn {
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
    user-select: none;
    white-space: nowrap;
}
.ld-plan-toolbar-btn:hover {
    background: #f5f5f5;
    border-color: #ccc;
}
.ld-toolbar-teacher-only:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
}
.ld-toolbar-ai-organize:hover {
    background: #f0fdf4;
    border-color: #86efac;
    color: #059669;
}
.ld-toolbar-undo:hover {
    background: #f0f4ff;
    border-color: #93c5fd;
    color: #2563eb;
}

/* Rich text editor (contenteditable) */
.ld-plan-editor {
    white-space: pre-wrap;
    word-wrap: break-word;
    min-height: 200px;
    outline: none;
}
.ld-plan-editor:focus {
    border-color: #059669;
}
.ld-plan-editor:empty::before {
    content: attr(data-placeholder);
    color: #bbb;
    font-style: italic;
    pointer-events: none;
}

/* ===== PLAN SECTION CARDS ===== */

.ld-plan-sections {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Teacher View pane uses a flex column with a single 10px gap so the
   Unit Plan Overview, Batch Planner banner, and section list all sit
   on the same rhythm. The flex layout is gated on .ld-subpane-active
   so the inactive sub-pane stays display:none (per the .ld-subpane
   base rule above) — otherwise the teacher AND student panes would
   render simultaneously. Hiding the batch container when empty stops
   flex from reserving an extra gap on either side of nothing. */
#ld-plan-form.ld-subpane-active {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#ld-batch-notes-container:empty { display: none; }

/* 2026-05-25 — mirror the student-section card: white background,
   light gray border, green left rule, rounded, padded. inline style on
   the element (border-left + background) is set by ldRenderPlanSection
   to keep the teacher-only red variant intact. */
.ld-plan-section-card {
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    overflow: hidden;
    transition: box-shadow 0.2s;
    background: #fff;
    margin-bottom: 10px;
}
.ld-plan-section-card:hover {
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* Teacher-only section card */
.ld-plan-section-card.ld-section-teacher-only {
    border-color: #f87171;
    border-width: 2px;
    border-left-width: 4px;
    position: relative;
    background: #fef8f8;
}
.ld-section-teacher-badge {
    display: none;
    font-size: 10px;
    font-weight: 800;
    color: #dc2626;
    letter-spacing: 0.8px;
    white-space: nowrap;
    margin-right: 4px;
    background: #fef2f2;
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid #fca5a5;
}
.ld-section-teacher-only .ld-section-teacher-badge {
    display: inline;
}

/* Section header row */
.ld-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    background: rgba(255,255,255,0.5);
}

/* Editable section title — sits inside .ld-section-titlewrap which
   carries the flex:1, so the title itself just shrinks naturally. */
.ld-section-title {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    border-radius: 4px;
    outline: none;
    min-width: 0;
    cursor: text;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    max-width: 60%;
}
.ld-section-title:focus {
    background: #f0fdf4;
    box-shadow: 0 0 0 1px #059669;
}

/* Right-side controls — anchored to the right edge of the header row
   so the eye / pencil / × buttons always sit opposite the title. */
.ld-section-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.ld-plan-section-card:hover .ld-section-controls {
    opacity: 1;
}

/* Control buttons (teacher-only toggle, delete) */
.ld-section-ctrl-btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    color: #888;
    padding: 0;
    transition: all 0.15s;
}
.ld-section-ctrl-btn:hover {
    background: #f5f5f5;
    border-color: #ddd;
    color: #333;
}
.ld-section-ctrl-btn.active {
    color: #dc2626;
    background: #fef2f2;
    border-color: #fca5a5;
}
.ld-section-delete:hover {
    color: #dc2626;
    background: #fef2f2;
    border-color: #fca5a5;
}

/* Color picker — preset dot palette */
.ld-color-picker-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.ld-color-dot-trigger {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0,0,0,0.15);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s, box-shadow 0.15s;
}
.ld-color-dot-trigger:hover {
    transform: scale(1.15);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
}
.ld-color-picker-popup {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 6px 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    z-index: 100;
    gap: 6px;
    flex-direction: row;
    white-space: nowrap;
}
.ld-color-picker-popup.open {
    display: flex;
}
.ld-color-dot {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(0,0,0,0.1);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.ld-color-dot:hover {
    transform: scale(1.2);
    border-color: rgba(0,0,0,0.3);
}
.ld-color-dot.active {
    border-color: #333;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #333;
}

/* Section content area */
.ld-section-content {
    padding: 10px 12px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    color: #333;
    line-height: 1.6;
    min-height: 60px;
    outline: none;
    word-wrap: break-word;
}
.ld-section-content:focus {
    background: rgba(5, 150, 105, 0.02);
}
.ld-section-content:empty::before {
    content: attr(data-placeholder);
    color: #bbb;
    font-style: italic;
    pointer-events: none;
}

/* Per-chip detail toggle rows that appear below a chip multi-select.
   Each selected chip gets its own collapsible row. Click the row's
   header to expand → reveals a contenteditable editor for that pick
   only. Header shows a chevron + the chip label + a status dot when
   the row has content (or "add notes" hint when empty). */
.ld-chip-details {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ld-chip-detail-row {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fafafa;
    overflow: hidden;
    transition: border-color 0.15s, background 0.15s;
}
.ld-chip-detail-row:hover { border-color: #d1d5db; }
.ld-chip-detail-row.open {
    background: #ffffff;
    border-color: #d1d5db;
}
.ld-chip-detail-row.has-content { border-color: #d1d5db; }
.ld-chip-detail-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 12px;
    color: #374151;
    transition: background 0.12s;
}
.ld-chip-detail-toggle:hover { background: rgba(0, 0, 0, 0.03); }
.ld-chip-detail-chev {
    font-size: 10px;
    color: #9ca3af;
    width: 10px;
    text-align: center;
    transition: transform 0.15s;
    flex-shrink: 0;
}
.ld-chip-detail-row.open .ld-chip-detail-chev {
    transform: rotate(90deg);
    color: #059669;
}
.ld-chip-detail-label {
    font-weight: 600;
    color: #1f2937;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ld-chip-detail-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #059669;
    flex-shrink: 0;
}
.ld-chip-detail-empty-hint {
    font-size: 10px;
    color: #9ca3af;
    font-style: italic;
    flex-shrink: 0;
}
.ld-chip-detail-body {
    padding: 0 8px 8px 26px;
    border-top: 1px dashed #e5e7eb;
}
/* The contenteditable editor — same class as the legacy single-detail
   editor so the format toolbar's existing routing keeps working. */
.ld-section-chip-detail {
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px dashed #d1d5db;
    border-radius: 6px;
    font-size: 12px;
    font-family: Arial, sans-serif;
    color: #374151;
    line-height: 1.55;
    min-height: 38px;
    outline: none;
    word-wrap: break-word;
    cursor: text;
}
.ld-section-chip-detail:focus {
    border-style: solid;
    border-color: #93c5fd;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.10);
}
.ld-section-chip-detail:empty::before {
    content: attr(data-placeholder);
    color: #9ca3af;
    font-style: italic;
    pointer-events: none;
}

/* Legacy notes carrier: shown when the migration heuristic couldn't
   match an old paragraph to a selected chip. Soft-amber to nudge the
   teacher to copy what they need into the per-chip rows above + dismiss. */
.ld-chip-detail-legacy {
    margin-top: 8px;
    padding: 8px 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    font-size: 11px;
    color: #78350f;
    position: relative;
}
.ld-chip-detail-legacy-label {
    font-weight: 700;
    margin-bottom: 4px;
    padding-right: 70px;
}
.ld-chip-detail-legacy-body {
    color: #1f2937;
    font-size: 12px;
    line-height: 1.5;
}
.ld-chip-detail-legacy-body p { margin: 4px 0; }
.ld-chip-detail-legacy-dismiss {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #fff;
    border: 1px solid #fde68a;
    color: #78350f;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
}
.ld-chip-detail-legacy-dismiss:hover { background: #fde68a; }

/* Format toggle button (pencil icon in section header) */
.ld-section-format-btn {
    color: #999;
}
.ld-section-format-btn:hover {
    color: #555;
    background: #f0f0f0;
    border-color: #ddd;
}
.ld-section-format-btn.active-format {
    color: #4338ca;
    background: #e0e7ff;
    border-color: #818cf8;
}
.ld-section-format-btn svg {
    display: block;
}

/* Section formatting toolbar (slides open below header).
   2026-05-25 — split into two rows (.ld-sfmt-row) so the format
   buttons sit on top and the font color + image picker on the bottom
   row. Single look across teacher + student panes (green tint borrowed
   from the student card — user preference: "I want the student view
   to be the default for both sides"). */
.ld-section-format-bar {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 6px 10px;
    background: #f5f9f5;
    border: 1px solid #d7e6d7;
    border-radius: 6px;
    margin: 4px 0 8px;
}
.ld-section-format-bar.open {
    display: flex;
}
.ld-sfmt-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
}
.ld-sfmt-row-colors {
    border-top: 1px dashed #e5e7eb;
    padding-top: 4px;
    margin-top: 1px;
}
.ld-sfmt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 26px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    transition: all 0.15s;
    padding: 0;
}
.ld-sfmt-btn:hover {
    background: #e9ecef;
    border-color: #d0d0d0;
}
.ld-sfmt-btn:active {
    background: #dee2e6;
}
.ld-sfmt-btn svg {
    display: block;
}
.ld-sfmt-sep {
    width: 1px;
    height: 18px;
    background: #d0d0d0;
    margin: 0 4px;
    flex-shrink: 0;
}
.ld-sfmt-label {
    font-size: 10px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-right: 4px;
    flex-shrink: 0;
}
.ld-sfmt-color-btn {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.1s;
    padding: 0;
    flex-shrink: 0;
}
.ld-sfmt-color-btn:hover {
    transform: scale(1.15);
    border-color: #999;
}
.ld-sfmt-color-btn.active {
    border-color: #333;
    box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px #333;
}

/* Section content — support rich text formatting */
.ld-section-content ul,
.ld-section-content ol {
    margin: 4px 0 4px 20px;
    padding: 0;
}
.ld-section-content li {
    margin-bottom: 2px;
}
.ld-section-content b,
.ld-section-content strong {
    font-weight: 700;
}

/* Tables inside the rich-text section editors — both .ld-section-content
   (regular sections) and .ld-section-chip-detail (the dashed-border
   editor under chip multi-selects). Same family across editors so
   teacher-inserted + AI-generated tables read consistently. */
.ld-section-content table,
.ld-section-content .ld-content-table,
.ld-section-chip-detail table,
.ld-section-chip-detail .ld-content-table {
    border-collapse: collapse;
    width: 100%;
    margin: 8px 0;
    font-size: 12px;
    background: #fff;
}
.ld-section-content th,
.ld-section-content td,
.ld-section-chip-detail th,
.ld-section-chip-detail td {
    border: 1px solid #d1d5db;
    padding: 6px 10px;
    vertical-align: top;
    text-align: left;
}
.ld-section-content thead th,
.ld-section-content th,
.ld-section-chip-detail thead th,
.ld-section-chip-detail th {
    background: #f3f4f6;
    font-weight: 700;
    color: #1f2937;
}

/* Toolbar table-button popover — Google-Docs-style hover grid. Anchored
   below the toolbar's table icon; cells light up green from the top-
   left corner to the cursor on mousemove, click commits that size. */
.ld-sfmt-table-popover {
    position: fixed;
    z-index: 10050;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
    padding: 12px;
    font-family: Arial, sans-serif;
    color: #1f2937;
    user-select: none;
}
/* Hover grid — fixed 10×8 cells. Each cell is ~16px so the grid
   fits comfortably in a ~190×155px popover without crowding. */
.ld-sfmt-table-grid {
    display: grid;
    grid-template-columns: repeat(10, 16px);
    grid-template-rows: repeat(8, 16px);
    gap: 2px;
    margin-bottom: 8px;
    cursor: pointer;
}
.ld-sfmt-table-cell {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 2px;
    transition: background 0.05s, border-color 0.05s;
}
.ld-sfmt-table-cell.hot {
    background: #d1fae5;
    border-color: #059669;
}
.ld-sfmt-table-grid-label {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 8px;
    min-height: 14px;
}
.ld-sfmt-table-pop-check {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 6px !important;
    font-size: 11px;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
}

/* Pushed section styles (for student notebooks) */
.ld-pushed-section {
    margin-bottom: 12px;
}
.ld-pushed-section-title {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    margin-bottom: 2px;
}
.ld-pushed-section-content {
    font-size: 13px;
    color: #333;
    line-height: 1.6;
}
.ld-pushed-section-content ul,
.ld-pushed-section-content ol {
    margin: 4px 0 4px 20px;
    padding: 0;
}

/* Add Section button */
.ld-add-section-btn {
    padding: 8px 20px;
    font-size: 12px;
    font-weight: 600;
    color: #059669;
    background: #fff;
    border: 1px dashed #059669;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.ld-add-section-btn:hover {
    background: #f0fdf4;
    border-style: solid;
}

/* Teacher-only text — red, slightly highlighted */
.ld-teacher-only {
    color: #dc2626;
    background: #fef2f2;
    border-radius: 2px;
    padding: 0 2px;
}

/* Batch Notes card — shows outline from batch lesson creation */
.ld-batch-notes {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    margin-bottom: 0;
    background: #fefce8;
    overflow: hidden;
}
.ld-batch-notes-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
}
.ld-batch-notes-header:hover { background: #fef9c3; }
.ld-batch-notes-title {
    font-size: 12px;
    font-weight: 700;
    color: #92400e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ld-batch-notes-title-input {
    font-size: 12px;
    font-weight: 700;
    color: #92400e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
    background: transparent;
    padding: 2px 6px;
    border-radius: 4px;
    outline: none;
    min-width: 80px;
    max-width: 260px;
    font-family: inherit;
}
.ld-batch-notes-title-input:hover {
    border-color: #d1d5db;
    background: #fff;
}
.ld-batch-notes-title-input:focus {
    border-color: #059669;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(5,150,105,0.1);
}
.ld-batch-notes-badge {
    font-size: 10px;
    font-weight: 600;
    color: #a16207;
    background: #fef08a;
    padding: 2px 8px;
    border-radius: 10px;
}
.ld-batch-notes-position {
    font-size: 10px;
    font-weight: 600;
    color: #065f46;
    background: #d1fae5;
    padding: 2px 8px;
    border-radius: 10px;
}
.ld-batch-notes-chevron {
    margin-left: auto;
    font-size: 10px;
    color: #a16207;
}
.ld-batch-notes-body {
    padding: 0 14px 12px;
    border-top: 1px solid #e5e7eb;
}
.ld-batch-notes-text {
    font-size: 13px;
    line-height: 1.6;
    color: #333;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: Arial, sans-serif;
    margin: 10px 0 0;
    width: 100%;
    min-height: 80px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 8px 10px;
    background: #fafbfc;
    resize: vertical;
    box-sizing: border-box;
}
.ld-batch-notes-text:focus {
    outline: none;
    border-color: #059669;
    box-shadow: 0 0 0 2px rgba(5,150,105,0.1);
}

.split-left-panel::-webkit-scrollbar { width: 6px; }
.split-left-panel::-webkit-scrollbar-track { background: transparent; }
.split-left-panel::-webkit-scrollbar-thumb { background: #d0d0d0; border-radius: 3px; }

.split-right-panel {
    width: 480px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-left: 1px solid #e0e0e0;
    min-height: 0;
    overflow: hidden;
}

/* Chat interface */
.chat-header {
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
    background-color: white;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.chat-header-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #d1fae5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.chat-header-text { flex: 1; }
.chat-header-title { font-size: 13px; font-weight: 700; color: #333; }
.chat-header-status { font-size: 11px; color: #059669; }

/* Info-icon between Reset + Gear in the chat header. Header is a
   flex row with gap:8px so we strip the icon's own margin-left to
   avoid doubled spacing. */
.chat-header .ld-chat-info-icon { margin-left: 0; }

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

.chat-messages::-webkit-scrollbar { width: 5px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: #d0d0d0; border-radius: 3px; }

.chat-msg {
    max-width: 88%;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
    border-radius: 14px;
    word-wrap: break-word;
}

.chat-msg.ai {
    align-self: flex-start;
    background-color: white;
    border: 1px solid #e0e0e0;
    border-bottom-left-radius: 4px;
    color: #333;
}

.chat-msg.user {
    align-self: flex-end;
    background-color: #059669;
    color: white;
    border-bottom-right-radius: 4px;
}

.chat-msg.typing {
    align-self: flex-start;
    background-color: white;
    border: 1px solid #e0e0e0;
    border-bottom-left-radius: 4px;
    color: #999;
    font-style: normal;
}

.ld-thinking-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ld-thinking-text {
    font-size: 13px;
    color: #888;
    font-weight: 500;
}

.ld-thinking-dots {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 3px;
}

.ld-thinking-dots span {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #059669;
    animation: ld-dot-pulse 1.4s ease-in-out infinite;
}

.ld-thinking-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.ld-thinking-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes ld-dot-pulse {
    0%, 80%, 100% { opacity: 0.3; }
    40% { opacity: 1; }
}

.chat-msg-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.chat-msg.ai .chat-msg-label { color: #059669; }
.chat-msg.user .chat-msg-label { color: rgba(255,255,255,0.7); }

/* Streaming dots animation */
.chat-msg.ld-streaming::after {
    content: ' ...';
    display: inline-block;
    width: 0;
    overflow: hidden;
    vertical-align: bottom;
    color: #059669;
    font-weight: bold;
    letter-spacing: 2px;
    animation: ld-dots 1.2s steps(4, end) infinite;
}
@keyframes ld-dots {
    0% { width: 0; }
    100% { width: 1.5em; }
}

.chat-input-area {
    padding: 10px 14px 14px 14px;
    border-top: 1px solid #e0e0e0;
    background-color: white;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.chat-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e0e0e0;
    background-color: #f8f9fa;
    border-radius: 10px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    padding: 9px 12px;
    resize: none;
    min-height: 38px;
    max-height: 140px;
    line-height: 1.4;
    outline: none;
    transition: border-color 0.2s, background-color 0.2s;
    display: block;
}

.chat-input:focus {
    border-color: #059669;
    background-color: white;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.08);
}

.chat-input-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
    /* Wrap when the chat panel is narrowed below the row's intrinsic width.
       Without this, the AG + Previous-lessons pills (white-space: nowrap)
       refuse to shrink and the rightmost items (mic + send) overflow past
       .split-right-panel { overflow: hidden } and get clipped off-screen. */
    flex-wrap: wrap;
    row-gap: 4px;
}
/* Phase 8e (2026-05-27) — keep the send button visible when the row is
   crowded (AG pill + Previous-lessons pill + mic). Tighter pill padding
   + a collapsible spacer + smaller pill text reclaim horizontal room. */
.chat-input-buttons .up-chat-spacer { min-width: 0; flex: 1 1 0%; }
.chat-input-buttons .tc-prev-lessons-pill,
.chat-input-buttons .tc-ag-pill,
.chat-input-buttons .tc-ag-locked-pill {
    padding: 4px 9px;
    font-size: 11.5px;
    gap: 5px;
}

.chat-upload-btn {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 16px;
    padding: 4px 6px;
    transition: color 0.15s;
    flex-shrink: 0;
}

.chat-upload-btn:hover { color: #059669; }

.chat-send-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #059669;
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    transition: background-color 0.15s, transform 0.1s;
    margin-left: auto;
    padding: 0;
}

.chat-send-btn:hover { background-color: #047857; }
.chat-send-btn:active { transform: scale(0.96); }

/* ========== LESSON DETAIL MODAL ========== */

/* Compact (default) — centered modal with comfortable size */
.lesson-detail-modal .modal-container {
    width: 90vw;
    max-width: 1400px;
    height: 85vh;
    max-height: 85vh;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.3s ease;
}

/* Fullscreen — covers every pixel of the viewport */
.lesson-detail-modal.ld-fullscreen .modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    box-shadow: none;
    z-index: 10001;
}

/* Hide the gray backdrop gap in fullscreen */
.lesson-detail-modal.ld-fullscreen {
    background-color: transparent;
    z-index: 10000;
}

/* Fullscreen widening — push horizontal real estate to the notebook pages
   while preserving a generous vertical frame above + below the spread.
   Desk side gutters shrink (8/56 → 2/32) so the pages widen; chat sidebar
   trims (300 → 260); but vertical padding GROWS (8 → 28 top/bottom) so
   the spread feels less crammed against the tab bar / window edge. */
/* Symmetric tan border around the notebook. The binder tabs hang
   44px past the spread's right edge (position: absolute; right: -44px
   from .ld-nb-binder-tabs-wrap), so the right desk padding needs
   44px to clear the tabs PLUS a matching 28px tan border so the
   tabs visually live inside the book frame instead of bleeding into
   the chat sidebar. 28 / 28 / 28 / 72 (top/left/bottom/right) gives
   a balanced tan margin all the way around the book + its tabs. */
.lesson-detail-modal.ld-fullscreen .ld-nb-desk {
    padding: 28px 72px 28px 28px;
    justify-content: center;
    /* align-items defaults to stretch — required so the spread fills
       the desk's vertical real estate. Setting align-items: center
       (an earlier attempt) caused the spread to shrink-wrap to its
       content height and overflow the desk vertically, which made
       the top/bottom tan border disappear behind the modal viewport. */
}
.lesson-detail-modal.ld-fullscreen .split-right-panel {
    width: 260px;
}
/* Widen past the standalone-page 1200px cap so the lesson modal in
   fullscreen makes use of the wide viewport, but keep a soft 1400px
   cap so the book doesn't sprawl on 4K monitors. Combined with the
   centered desk + symmetric padding, the result is a notebook with
   roughly the same proportional vertical margin top/bottom as side
   margins left/right. */
.lesson-detail-modal.ld-fullscreen .ld-nb-spread {
    max-width: 1400px;
    width: 100%;
}
/* Inner page bodies get a touch more horizontal padding in fullscreen
   so the longer line lengths still read like a proper page rather than
   running edge-to-edge — this matches the feel of the standalone
   notebook page at full width. */
.lesson-detail-modal.ld-fullscreen .ld-nb-page-body {
    padding: 14px 28px;
}
/* A bit more breathing room inside each page header so the wider page
   doesn't feel top-heavy after we widened it. */
.lesson-detail-modal.ld-fullscreen .ld-nb-page-head {
    padding: 14px 22px;
}

/* Fullscreen toggle button */
.ld-fullscreen-btn {
    background: none;
    border: 1px solid #e0e0e0;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.15s;
}
.ld-fullscreen-btn:hover { color: #333; background: #f3f4f6; border-color: #ccc; }

/* Modal-header AI model settings gear — sits left of expand + close.
   Same dimensions as the fullscreen button so they line up. */
.ld-modal-prefs-btn {
    background: none;
    border: 1px solid #e0e0e0;
    color: #999;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.15s;
    padding: 0;
}
.ld-modal-prefs-btn:hover { color: #2563eb; background: #f3f4f6; border-color: #ccc; }
.ld-modal-prefs-btn svg { display: block; }

/* ===== Distribute Toggles (header) ===== */
.modal-header-actions { display: flex; align-items: center; gap: 8px; }
/* Square-cornered "Connected to:" cluster — matches the calendar +
   link-materials buttons sitting next to it. The earlier 18px / 12px
   radii read as pills which clashed with the surrounding header
   actions; 6px keeps the cluster on the same visual rail. */
.ld-distribute-toggles { display: flex; align-items: center; gap: 6px; padding: 4px 10px; background: #f0fdf4; border: 1px solid #d1fae5; border-radius: 6px; margin-right: 4px; flex-wrap: wrap; max-width: 60vw; }
.ld-distribute-label { font-size: 10px; font-weight: 700; color: #047857; text-transform: uppercase; letter-spacing: 0.4px; padding-right: 2px; }
.ld-distribute-toggle { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; font-size: 11px; font-weight: 600; background: #e5e7eb; color: #6b7280; border: 1px solid #e5e7eb; border-radius: 6px; cursor: pointer; transition: all 0.15s; }
.ld-distribute-toggle:hover { border-color: #059669; color: #047857; background: #fff; }
.ld-distribute-toggle.active { background: #059669; color: #fff; border-color: #059669; }
.ld-distribute-check { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; font-size: 10px; font-weight: 700; }
.ld-distribute-retro-btn { background: #fff; color: #059669; border: 1px solid #d1fae5; border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.ld-distribute-retro-btn:hover { background: #f0fdf4; border-color: #059669; }

/* Header Calendar button */
.ld-cal-btn { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #374151; border: 1px solid #e0e0e0; border-radius: 6px; padding: 6px 10px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; height: 32px; }
.ld-cal-btn:hover { background: #f3f4f6; border-color: #ccc; color: #111; }
.ld-cal-btn.ld-cal-btn-scheduled { background: #f0fdf4; border-color: #a7f3d0; color: #047857; }
.ld-cal-btn-label { letter-spacing: 0.2px; }
.ld-cal-btn-date { font-size: 11px; color: #065f46; font-weight: 700; padding-left: 4px; border-left: 1px solid rgba(5,150,105,0.25); margin-left: 2px; }
.ld-cal-btn-date:empty { display: none; }
/* Green check only appears when scheduled; hidden by default */
.ld-cal-btn-check { display: none; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #059669; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; }
.ld-cal-btn.ld-cal-btn-scheduled .ld-cal-btn-check { display: inline-flex; }
.ld-cal-btn.ld-cal-btn-scheduled .ld-cal-btn-icon { display: none; }

/* Link Materials button — sibling of .ld-cal-btn, mirrors its visual
   family. Empty state = slate; linked state = green tint with check
   icon + count badge. Click opens the library modal as a portal inside
   the lesson modal. */
.ld-link-btn { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #374151; border: 1px solid #e0e0e0; border-radius: 6px; padding: 6px 10px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; height: 32px; margin-right: 6px; }
.ld-link-btn:hover { background: #f3f4f6; border-color: #ccc; color: #111; }
.ld-link-btn.ld-link-btn-linked { background: #f0fdf4; border-color: #a7f3d0; color: #047857; }
.ld-link-btn-label { letter-spacing: 0.2px; }
.ld-link-btn-count { font-size: 11px; color: #065f46; font-weight: 700; padding-left: 4px; border-left: 1px solid rgba(5,150,105,0.25); margin-left: 2px; }
.ld-link-btn-count:empty { display: none; }
.ld-link-btn-check { display: none; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #059669; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; }
.ld-link-btn.ld-link-btn-linked .ld-link-btn-check { display: inline-flex; }
.ld-link-btn.ld-link-btn-linked .ld-link-btn-icon { display: none; }

/* Modal body kept position:relative because other absolutely-positioned
   children (notebook desk overlays, AI panel anchors) anchor against it.
   The old .ld-link-portal child was removed 2026-06-02 when the linker
   migrated to the body-level popup overlay. */
.lesson-detail-modal .modal-body { position: relative; }

/* Lock icon next to non-chat tabs (Differentiation / Submissions /
   Analytics / Reflection) when materials are linked. */
.ld-tab-lock { margin-left: 6px; font-size: 11px; opacity: 0.65; cursor: pointer; }
.ld-tab-lock:hover { opacity: 1; }
.ld-lock-hint {
    position: fixed;
    z-index: 11000;
    background: #1e293b;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(15,23,42,0.25);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.18s, transform 0.18s;
    pointer-events: none;
    max-width: 260px;
    line-height: 1.4;
}
.ld-lock-hint.is-visible { opacity: 1; transform: translateY(0); }

/* ===== Calendar Picker Modal ===== */
.ld-cal-picker-overlay { position: fixed; inset: 0; z-index: 10050; background: rgba(0,0,0,0.45); display: none; align-items: center; justify-content: center; padding: 20px; }
.ld-cal-picker-overlay.active { display: flex; }
.ld-cal-picker-container { background: #fff; border-radius: 10px; width: 100%; max-width: 1280px; height: 90vh; max-height: 920px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.35); }
/* The portal container hosts calendar.js's renderer. Grows to fill the
   modal so the grid + toolbar mirror the global Calendar tab. */
.ld-cal-portal-container { flex: 1; min-height: 0; overflow: auto; padding: 4px 12px 12px; }
.ld-cal-portal-container .cal-toolbar { padding: 10px 8px 6px; }
.ld-cal-picker-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; }
.ld-cal-picker-header h3 { margin: 0; font-size: 18px; font-weight: 600; color: #111; }
.ld-cal-picker-header .ld-cal-picker-sub { font-size: 12px; color: #6b7280; margin-top: 2px; }
.ld-cal-picker-close { background: none; border: none; font-size: 24px; color: #9ca3af; cursor: pointer; width: 32px; height: 32px; border-radius: 6px; }
.ld-cal-picker-close:hover { background: #f3f4f6; color: #111; }

.ld-cal-picker-toolbar { display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-bottom: 1px solid #e5e7eb; background: #fafafa; flex-wrap: wrap; flex-shrink: 0; }
.ld-cal-nav-btn { width: 32px; height: 32px; border: 1px solid #e0e0e0; background: #fff; border-radius: 6px; font-size: 16px; color: #374151; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ld-cal-nav-btn:hover { background: #f3f4f6; border-color: #ccc; }
.ld-cal-today-btn { height: 32px; padding: 0 12px; border: 1px solid #e0e0e0; background: #fff; border-radius: 6px; font-size: 12px; font-weight: 600; color: #374151; cursor: pointer; }
.ld-cal-today-btn:hover { background: #f3f4f6; }
.ld-cal-week-label { font-size: 14px; font-weight: 600; color: #111; min-width: 180px; text-align: center; }
.ld-cal-filter-toggle { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; color: #6b7280; cursor: pointer; }
.ld-cal-filter-toggle input { accent-color: #059669; }

.ld-cal-current-assignment { display: flex; align-items: center; gap: 10px; padding: 8px 20px; background: #ecfdf5; border-bottom: 1px solid #d1fae5; font-size: 12px; color: #065f46; flex-shrink: 0; }
.ld-cal-current-assignment strong { font-weight: 700; }
/* Empty-state hint surfaced when the current class has no slots configured
   yet. Slate tone so it reads as informational rather than an error. */
.ld-cal-empty-hint { padding: 10px 20px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; font-size: 12px; color: #475569; flex-shrink: 0; line-height: 1.5; }
.ld-cal-empty-hint strong { color: #1e293b; font-weight: 700; }
.ld-cal-empty-hint em { font-style: normal; font-weight: 600; color: #0f766e; }
/* Other-class slot tag in "Show all classes" mode — small chip on the block
   showing the class name so the teacher can tell which class owns the slot. */
.ld-cal-event-class-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 9px; font-weight: 700; background: rgba(255,255,255,0.85); color: #1f2937; border-radius: 4px; letter-spacing: 0.2px; vertical-align: middle; }
.ld-cal-event.ld-cal-other-class { cursor: pointer; }
.ld-cal-event.ld-cal-other-class:hover { opacity: 0.85 !important; }
.ld-cal-current-actions { margin-left: auto; display: flex; gap: 6px; }
.ld-cal-unlink-btn, .ld-cal-delete-evt-btn { padding: 4px 10px; font-size: 11px; font-weight: 600; border-radius: 5px; cursor: pointer; border: 1px solid; background: #fff; }
.ld-cal-unlink-btn { color: #047857; border-color: #a7f3d0; }
.ld-cal-unlink-btn:hover { background: #d1fae5; }
.ld-cal-delete-evt-btn { color: #b91c1c; border-color: #fecaca; }
.ld-cal-delete-evt-btn:hover { background: #fee2e2; }

.ld-cal-grid-wrap { flex: 1; overflow: auto; background: #fff; }
.ld-cal-grid { display: grid; grid-template-columns: 60px repeat(7, 1fr); position: relative; min-width: 780px; }
.ld-cal-grid.no-weekends { grid-template-columns: 60px repeat(5, 1fr); }
.ld-cal-day-header { padding: 8px 6px; border-right: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; background: #fafafa; position: sticky; top: 0; z-index: 2; font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.3px; text-align: center; }
.ld-cal-day-header.today { color: #059669; }
.ld-cal-day-num { display: block; font-size: 18px; color: #111; font-weight: 600; margin-top: 2px; text-transform: none; letter-spacing: 0; }
.ld-cal-day-header.today .ld-cal-day-num { color: #059669; }
.ld-cal-time-col { border-right: 1px solid #e5e7eb; background: #fff; position: relative; }
.ld-cal-time-label { height: 60px; font-size: 10px; color: #9ca3af; padding: 2px 4px 0 6px; border-bottom: 1px solid #f3f4f6; font-weight: 600; }
.ld-cal-time-label:first-child { border-top: 1px solid #e5e7eb; }
.ld-cal-day-col { border-right: 1px solid #e5e7eb; position: relative; min-height: 660px; cursor: crosshair; }
.ld-cal-day-col:hover { background: #f9fafb; }
.ld-cal-hour-line { position: absolute; left: 0; right: 0; border-top: 1px solid #f3f4f6; pointer-events: none; }
.ld-cal-hour-line.hr { border-top-color: #e5e7eb; }

.ld-cal-event { position: absolute; left: 2px; right: 2px; border-radius: 4px; padding: 4px 6px; font-size: 11px; color: #fff; cursor: pointer; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.1); border-left: 3px solid rgba(0,0,0,0.2); line-height: 1.2; }
.ld-cal-event:hover { filter: brightness(1.05); box-shadow: 0 2px 4px rgba(0,0,0,0.15); }
/* Top row on linked slots — the class shorthand (e.g. "G7CDE"). Small +
   uppercase + slightly muted so it reads as a header above the lesson
   title rather than competing with it. Only present when the slot is
   linked; unlinked slots use .ld-cal-event-title for the class label. */
.ld-cal-event-class { font-size: 9px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-cal-event-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-cal-event-time { font-size: 10px; opacity: 0.9; margin-top: 1px; }
.ld-cal-event.current-assignment { outline: 2px solid #059669; outline-offset: 1px; box-shadow: 0 0 0 1px #fff, 0 0 10px rgba(5,150,105,0.45); }
.ld-cal-event.schedule-block { opacity: 0.85; border-left-style: dashed; }
/* Linked-lesson badge — small contained pill anchored to the bottom-right
   of the slot. Holds just the U#·L# code so the title row up top stays
   readable. White-on-translucent for contrast on any block color; full
   "U#·L# — title" still surfaces on hover via the title attribute. */
.ld-cal-event-lesson-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    font-size: 9px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 0.3px;
    background: rgba(255, 255, 255, 0.92);
    color: #1f2937;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    pointer-events: none;
}
/* Current-lesson tint — soft green pill so the teacher recognises which
   slot holds the lesson they\'re editing without an explicit "(this)" tag. */
.ld-cal-event.current-assignment .ld-cal-event-lesson-badge {
    background: #ecfdf5;
    color: #065f46;
    box-shadow: 0 1px 2px rgba(5, 150, 105, 0.25);
}

/* Status pill — bottom-LEFT mirror of the U#·L# code pill. Color encodes
   the lifecycle state so a teacher can scan a week and see at a glance
   which lessons are still pending vs already pushed vs fully wrapped. */
.ld-cal-event-status-badge {
    position: absolute;
    bottom: 4px;
    left: 4px;
    font-size: 9px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    pointer-events: none;
}
/* Slate — Draft (work in progress, not pushed yet) */
.ld-cal-event-status-badge.ld-cal-status-draft    { background: #e2e8f0; color: #334155; }
/* Light green — Complete (pushed to students, awaiting work) */
.ld-cal-event-status-badge.ld-cal-status-complete { background: #d1fae5; color: #065f46; }
/* Dark green — Finalized (reflection done, fully wrapped) */
.ld-cal-event-status-badge.ld-cal-status-finalized { background: #047857; color: #ffffff; }

.ld-cal-empty-state { padding: 40px; text-align: center; color: #9ca3af; font-size: 13px; }

/* New-event prompt */
.ld-cal-new-prompt { position: fixed; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 12px 36px rgba(0,0,0,0.2); padding: 14px; width: 300px; z-index: 10060; }
.ld-cal-new-prompt h4 { margin: 0 0 8px 0; font-size: 13px; font-weight: 700; color: #111; }
.ld-cal-new-prompt .ld-cal-np-sub { font-size: 11px; color: #6b7280; margin-bottom: 8px; }
.ld-cal-new-prompt input[type="text"] { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; margin-bottom: 6px; }
.ld-cal-new-prompt .ld-cal-np-times { display: flex; gap: 6px; margin-bottom: 10px; }
.ld-cal-new-prompt .ld-cal-np-times input { flex: 1; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 12px; }
.ld-cal-new-prompt .ld-cal-np-actions { display: flex; gap: 6px; justify-content: flex-end; }
.ld-cal-new-prompt button { padding: 6px 12px; font-size: 12px; font-weight: 600; border-radius: 6px; cursor: pointer; border: 1px solid; }
.ld-cal-np-cancel { background: #fff; color: #6b7280; border-color: #e0e0e0; }
.ld-cal-np-confirm { background: #059669; color: #fff; border-color: #059669; }
.ld-cal-np-confirm:hover { background: #047857; }

/* Retroactive distribute picker rows */
.ld-retro-list { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; padding: 10px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; }
.ld-retro-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; font-size: 13px; color: #333; cursor: pointer; border-radius: 6px; }
.ld-retro-row:hover { background: #fff; }
.ld-retro-cb { width: 16px; height: 16px; accent-color: #059669; cursor: pointer; }
.ld-retro-name { font-weight: 600; }

/* Header — matches unit plan modal */
.lesson-detail-modal .modal-header {
    padding: 16px 32px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.lesson-detail-modal .modal-header h2 {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin: 0;
}
.ld-editable-title {
    cursor: text;
    border-radius: 4px;
    padding: 2px 6px;
    margin: -2px -6px;
    outline: none;
    border: 1px solid transparent;
    transition: border-color 0.15s, background 0.15s;
    /* Lets the title use the available header width — only truncates
       when it actually outgrows the row. Was 45ch before, which was
       cutting off lessons mid-word at sizes the header had room for.
       Full title stays in the DOM node and expands to multi-line on
       click-to-edit (the :focus rule below). */
    max-width: 80ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ld-editable-title:hover { border-color: #d1d5db; background: #f8f9fa; }
.ld-editable-title:focus { border-color: #059669; background: white; box-shadow: 0 0 0 2px rgba(5,150,105,0.15); max-width: none; white-space: normal; overflow: visible; text-overflow: clip; }

.lesson-detail-modal .modal-header-subtitle {
    margin-top: 4px;
    font-size: 13px;
    color: #666;
}

/* Tabs — tighter to match unit plan look */
.lesson-detail-modal .modal-tabs {
    padding: 0 32px;
    gap: 6px;
    flex-shrink: 0;
}

.lesson-detail-modal .modal-tab {
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 600;
}

/* Locked tabs — gated behind Lesson Plan completion */
.lesson-detail-modal .modal-tab.ld-tab-locked {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: auto; /* keep clickable so we can show shake feedback */
    position: relative;
}

.lesson-detail-modal .modal-tab.ld-tab-locked:hover {
    background: transparent;
    color: #999;
}

.ld-tab-lock-icon {
    font-size: 10px;
    margin-right: 4px;
}

/* Shake animation for locked tab click */
@keyframes ldTabShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-3px); }
    40% { transform: translateX(3px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
}
.lesson-detail-modal .modal-tab.ld-tab-shake,
.lesson-detail-modal .ld-footer-next-btn.ld-tab-shake {
    animation: ldTabShake 0.4s ease;
}

/* Sub-tab bar — segmented control. A single rounded container holds
   two equal-width segments; the active segment gets the elevated pill
   highlight while the inactive one fades back. Sliding the highlight
   between segments uses a CSS transition on the active-pill background
   so the toggle reads as a smooth back-and-forth, not a hard cut. */
.ld-subtabs {
    display: flex;
    gap: 0;
    width: 100%;
    margin: 14px 0;
    padding: 3px;
    background: #efeeea;
    border: 1px solid #e0dfd8;
    border-radius: 999px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
    position: relative;
}

.ld-subtab {
    background: transparent;
    border: none;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease;
    flex: 1 1 0;
    text-align: center;
    margin: 0;
    position: relative;
}

.ld-subtab:hover { color: #2a5d3a; }

.ld-subtab.active {
    background: #ffffff;
    color: #2a5d3a;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(42, 93, 58, 0.08);
}

/* Locked-tab "wiggle" feedback already lives on .ld-tab-shake; reuse
   the same animation for the subtab toast trigger so the visual
   vocabulary stays consistent. */
.ld-subtab.ld-subtab-shake {
    animation: ldTabShake 0.4s ease;
}

/* Validation toast that drops in below the segmented control when a
   teacher tries to advance without both checkboxes ticked. Auto-fades
   ~3s later via a JS-set timer. */
.ld-subtab-toast {
    margin: 4px 16px 8px;
    padding: 8px 14px;
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 8px;
    color: #92400e;
    font-size: 12.5px;
    font-weight: 600;
    display: none;
    align-items: center;
    gap: 8px;
    line-height: 1.4;
    animation: ldSubtabToastIn 0.18s ease;
}
.ld-subtab-toast.ld-subtab-toast-visible { display: flex; }
.ld-subtab-toast-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f59e0b;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}
@keyframes ldSubtabToastIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ld-subtab-label {
    display: inline-block;
    letter-spacing: 0.2px;
}

/* Clickable checkbox embedded INSIDE the tab pill. The pill onclick
   switches tabs; this element's onclick (with stopPropagation) marks
   complete + auto-advances. */
.ld-subtab-checkbox {
    width: 20px;
    height: 20px;
    border: 1.5px solid #b0b8b3;
    border-radius: 5px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.ld-subtab-checkbox:hover {
    border-color: #059669;
    background: #f3faf3;
}
.ld-subtab-checkbox:active { transform: scale(0.94); }
.ld-subtab-checkbox-icon {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.12s ease, transform 0.12s ease;
}
.ld-subtab.ld-subtab-done .ld-subtab-checkbox {
    background: #059669;
    border-color: #059669;
}
.ld-subtab.ld-subtab-done .ld-subtab-checkbox-icon {
    opacity: 1;
    transform: scale(1);
}

/* Legacy class — keep harmless for any stale callers that touch it.
   The new clickable checkbox is .ld-subtab-checkbox above. */
.ld-subtab-check { display: none; }

.ld-subpane { display: none; }
.ld-subpane.ld-subpane-active { display: block; }

/* When the active sub-pane is locked (the teacher ticked
   "View Complete"), gray it out and block destructive controls —
   but keep the section headers clickable so the teacher can still
   expand / collapse cards to read. contenteditable=false on titles +
   bodies (set in JS) blocks actual edits; the click handler
   _ldLockedEditClick wiggles the parent card when a teacher tries to
   click into the body so they know they need to untick to edit. */
.ld-subpane.ld-subpane-locked {
    opacity: 0.85;
}
.ld-subpane-locked .ld-section-controls,
.ld-subpane-locked .ld-section-drag-handle,
.ld-subpane-locked .ld-add-section-btn,
.ld-subpane-locked .ld-section-format-toolbar {
    display: none !important;
}

/* Wiggle nudge played when the teacher clicks into a locked section's
   body — visual signal that the card is read-only and they need to
   untick the "View Complete" strip to edit. */
@keyframes ldWiggle {
    0%, 100% { transform: translateX(0); }
    18%      { transform: translateX(-5px); }
    36%      { transform: translateX(5px); }
    54%      { transform: translateX(-4px); }
    72%      { transform: translateX(3px); }
    90%      { transform: translateX(-1px); }
}
.ld-plan-section-card.ld-wiggle,
.ld-student-section-card.ld-wiggle {
    animation: ldWiggle 0.5s ease-in-out;
}

/* Student View — soft intro band + 6 fixed section cards. Styled
   lighter than teacher sections so it visually signals "this is the
   student-facing surface, not the planning surface." */
.ld-student-intro {
    background: #f5f9f5;
    border: 1px solid #d7e6d7;
    border-radius: 8px;
    padding: 12px 16px;
    /* Top spacing now lives on .ld-subtabs margin-bottom so both
       sub-panes (Lesson Plan + Student View) inherit the same gap
       from the segmented control. */
    margin: 0 0 18px;
}
.ld-student-intro-title {
    font-weight: 700;
    font-size: 13px;
    color: #2a5d3a;
    margin-bottom: 4px;
    letter-spacing: 0.2px;
}
.ld-student-intro-body {
    font-size: 12.5px;
    color: #4a6a52;
    line-height: 1.5;
}

.ld-student-section-card {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-left: 4px solid #6ba56b;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 10px;
}
.ld-student-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
/* 2026-05-25 — mirror .ld-section-title so the Student View section
   titles read the same as the Lesson Plan view (mixed-case dark gray,
   no uppercase / letter-spacing tracking). User pref: "I want to
   change the student view side to fit those fonts". */
.ld-student-section-title {
    font-weight: 700;
    font-size: 13px;
    color: #333;
    flex: 1 1 auto;
    outline: none;
    padding: 2px 4px;
    margin-left: -4px;
    border-radius: 4px;
    cursor: text;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ld-student-section-title[contenteditable="true"]:hover { background: #f0fdf4; }
.ld-student-section-title[contenteditable="true"]:focus { background: #f0fdf4; box-shadow: 0 0 0 1px #059669; }

.ld-student-section-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Student section drag handle — same six-dot affordance as teacher
   sections, sized to match the card head. Visible at low opacity by
   default, full opacity on card hover so it doesn't compete with
   the title. cursor:grab is the conventional drag affordance. */
.ld-student-section-drag {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 18px;
    cursor: grab;
    color: #aab2ac;
    opacity: 0.5;
    transition: opacity 0.15s ease, color 0.15s ease;
    margin-right: 2px;
}
.ld-student-section-card:hover .ld-student-section-drag {
    opacity: 1;
    color: #6ba56b;
}
.ld-student-section-drag:active { cursor: grabbing; }
.ld-student-section-drag svg { pointer-events: none; }
/* Format toolbar — student-side card variant. Inherits the base
   .ld-section-format-bar visuals from the teacher side; adds a small
   wrapper-color tweak so it visually nests inside the green-rule card. */
/* 2026-05-25 — .ld-student-format-bar styling rolled into the shared
   .ld-section-format-bar above. Class is kept on the element so future
   per-pane tweaks are still scoped, but no per-pane overrides today. */
.ld-sfmt-text {
    font-weight: 700;
    font-family: Georgia, "Times New Roman", serif;
}
.ld-student-section-card h2 {
    font-size: 18px;
    font-weight: 700;
    color: #1f4f33;
    margin: 6px 0;
}
.ld-student-section-card h3 {
    font-size: 15px;
    font-weight: 700;
    color: #2a5d3a;
    margin: 6px 0;
}
.ld-student-section-card img {
    max-width: 100%;
    height: auto;
}
.ld-student-section-content {
    min-height: 48px;
    font-size: 14px;
    line-height: 1.55;
    color: #222;
    outline: none;
}
.ld-student-section-content:empty::before {
    content: attr(data-placeholder);
    color: #999;
    font-style: italic;
}
.ld-student-section-content[contenteditable="true"]:focus {
    background: #fafdfa;
}
.ld-student-sections-locked .ld-student-section-content {
    background: #fafafa;
    cursor: default;
}

/* Completion strip — sits at the bottom of each sub-pane (teacher view
   and student view). Clicking the row toggles the checkbox + lock state. */
.ld-complete-strip {
    margin: 22px 0 8px;
    padding: 14px 16px;
    background: #fff;
    border: 1px dashed #c7d6c9;
    border-radius: 8px;
    /* Pointer events stay live even when the parent sub-pane is locked
       (CSS .ld-subpane-locked sets pointer-events: none) so the teacher
       can always untick. */
    pointer-events: auto !important;
    opacity: 1 !important;
}
.ld-complete-strip-done {
    background: #f3faf3;
    border-color: #84c084;
    border-style: solid;
}
.ld-complete-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}
.ld-complete-box {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 2px solid #b0b8b3;
    border-radius: 5px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    transition: background-color 0.12s ease, border-color 0.12s ease;
    margin-top: 1px;
}
.ld-complete-box-checked {
    background: #2a8b4d;
    border-color: #2a8b4d;
}
.ld-complete-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.ld-complete-text-main {
    font-size: 14px;
    font-weight: 700;
    color: #1f4f33;
}
.ld-complete-text-hint {
    font-size: 12px;
    color: #5a6f60;
    line-height: 1.4;
}

/* Body fills remaining space */
.lesson-detail-modal .modal-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.ld-overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.ld-meta-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.ld-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ld-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.ld-chip {
    display: inline-block;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 12px;
    background-color: #f0fdf4;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.ld-assignment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.ld-assignment-card {
    background-color: white;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    padding: 18px;
    transition: border-color 0.15s;
}

.ld-assignment-card.has-content {
    border-color: #059669;
    background-color: #fafffe;
}

.ld-assignment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.ld-assignment-type {
    font-size: 12px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ld-assignment-status {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

.ld-assignment-status.empty { background-color: #f3f4f6; color: #9ca3af; }
.ld-assignment-status.created { background-color: #d1fae5; color: #065f46; }

.ld-assignment-desc {
    font-size: 12px;
    color: #888;
    line-height: 1.4;
    margin-bottom: 12px;
}

.ld-assignment-content {
    font-size: 13px;
    color: #333;
    line-height: 1.6;
    white-space: pre-wrap;
    margin-bottom: 12px;
    padding: 10px 12px;
    background-color: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

.ld-assignment-actions {
    display: flex;
    gap: 8px;
}

.ld-assignment-btn {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid;
}

.ld-assignment-btn.create {
    color: #059669;
    background: #f0fdf4;
    border-color: #a7f3d0;
}

.ld-assignment-btn.create:hover {
    background-color: #dcfce7;
    border-color: #059669;
}

.ld-assignment-btn.import {
    color: #2563eb;
    background: #f0f7ff;
    border-color: #bfdbfe;
}

.ld-assignment-btn.import:hover {
    background-color: #dbeafe;
    border-color: #2563eb;
}

.ld-assignment-btn.save {
    color: white;
    background-color: #059669;
    border-color: #059669;
}

.ld-assignment-btn.save:hover {
    background-color: #047857;
}

.ld-assignment-btn.cancel {
    color: #666;
    background: none;
    border-color: #d1d5db;
}

.ld-assignment-btn.cancel:hover {
    background-color: #f9fafb;
}

.ld-assignment-btn.print {
    background: #2563eb;
    color: #fff;
    border: 1px solid #1d4ed8;
}

.ld-assignment-btn.print:hover {
    background: #1d4ed8;
}

/* ========== NOTEBOOK VIEW (Activities Tab) ========== */

.ld-nb-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Hide horizontal tabs - binder tabs are on the right edge now */
.ld-nb-container .ld-nb-tabs { display: none; }

/* Section tabs — hidden from top (tabs are now binder tabs on right edge) */
.ld-nb-tabs {
    display: none;
}

/* Generate button (floated into page header) */
.ld-nb-gen-btn {
    padding: 5px 12px;
    background: none;
    border: 1px dashed #c0b8ac;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #999;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 8px;
}

.ld-nb-gen-btn:hover {
    border-color: #059669;
    color: #059669;
    background: #f0fdf4;
}

/* Binder tabs wrapper — positions on right edge, holds scrollable tabs + fixed add button */
.ld-nb-binder-tabs-wrap {
    position: absolute;
    right: -44px;
    top: 10px;
    bottom: 10px;
    display: flex;
    flex-direction: column;
    z-index: 5;
    width: 44px;
}

/* Distribute binder tabs across the available column height — same
   pattern as .nb-tabs-right in class-placeholder.css. The container
   pins to the wrap's full height; each child tab uses flex:1 1 0 so
   the column automatically rebalances to fit any tab count. Long
   labels truncate with vertical ellipsis instead of forcing a scroll. */
.ld-nb-binder-tabs {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: visible;
}

.ld-nb-binder-tab {
    position: relative;
    width: 42px;
    padding: 8px 4px;
    flex: 1 1 0;
    min-height: 36px;
    max-height: none;
    overflow: hidden;
    background-color: #d6cfc4;
    border: 1px solid #c0b8ac;
    border-left: none;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    box-shadow: 2px 1px 4px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.ld-nb-binder-tab .ld-nb-binder-text {
    writing-mode: vertical-rl;
    font-size: 11px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-height: 100%;
    cursor: pointer;
}

/* Active tab shadow */
.ld-nb-binder-tab.active {
    box-shadow: 2px 1px 6px rgba(0,0,0,0.15);
}

/* Hover actions (edit/delete) on binder tabs */
.ld-nb-binder-actions {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    flex-direction: column;
    gap: 2px;
    z-index: 5;
}

.ld-nb-binder-tab {
    position: relative;
}

.ld-nb-binder-tab:hover .ld-nb-binder-actions {
    display: flex;
}

.ld-nb-binder-action {
    width: 18px;
    height: 18px;
    border: none;
    background: rgba(255,255,255,0.85);
    border-radius: 3px;
    cursor: pointer;
    font-size: 10px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.ld-nb-binder-action:hover {
    background: white;
    color: #333;
}

.ld-nb-binder-action.delete:hover {
    background: #fef2f2;
    color: #dc2626;
}

/* Tab name edit input (vertical) */
.ld-nb-binder-edit {
    writing-mode: vertical-rl;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    background: rgba(255,255,255,0.5);
    color: inherit;
    outline: none;
    width: 100%;
    text-align: center;
    padding: 4px 2px;
    border-radius: 3px;
}

/* Add tab (+) button — fixed at top of binder tabs */
.ld-nb-binder-add {
    width: 44px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 0 6px 6px 0;
    border: 1px dashed #c0b8ac;
    border-left: none;
    margin-bottom: 4px;
    background: #f5f3ef;
    font-size: 16px;
    color: #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ld-nb-binder-add:hover {
    background: #e8e0d4;
    border-color: #a09888;
    color: #666;
    border-style: solid;
}

.ld-nb-binder-add-item {
    display: block;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s;
}

.ld-nb-binder-add-item:hover {
    background: #f0fdf4;
    color: #059669;
}

.ld-nb-binder-add-custom {
    border-top: 1px solid #f0f0f0;
    margin-top: 4px;
    padding-top: 10px;
    color: #888;
    font-style: italic;
}

.ld-nb-binder-add-custom:hover {
    color: #7c3aed;
    background: #f5f3ff;
}

/* Activities left panel — no padding, let notebook fill edge to edge */
#ld-activities .split-left-panel {
    padding: 0;
}

/* Notebook desk */
.ld-nb-desk {
    flex: 1;
    background: #e8e0d4;
    background-image: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.15) 0%, transparent 70%);
    padding: 8px;
    padding-right: 56px; /* room for binder tabs */
    overflow: hidden;
    display: flex;
}

.ld-nb-spread {
    display: flex;
    flex: 1;
    min-height: 0;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.1);
    position: relative;
}

/* Notebook pages */
.ld-nb-page {
    flex: 1;
    background-color: #fefcf8;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    min-width: 0;
}

.ld-nb-page-left {
    border-radius: 8px 0 0 8px;
    box-shadow: -3px 0 8px -4px rgba(0,0,0,0.15) inset;
}

.ld-nb-page-left::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(to left, rgba(0,0,0,0.03), transparent);
    pointer-events: none;
    z-index: 1;
}

.ld-nb-page-right {
    border-radius: 0 8px 8px 0;
    box-shadow: 3px 0 8px -4px rgba(0,0,0,0.15) inset;
}

.ld-nb-page-right::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(to right, rgba(0,0,0,0.03), transparent);
    pointer-events: none;
    z-index: 1;
}

/* Page header */
.ld-nb-page-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: none;
    flex-shrink: 0;
    background: linear-gradient(to bottom, #fefcf8, #faf8f4);
}

/* Minimalist flat tabs for left (Materials) page */
.ld-nb-flat-tabs {
    display: flex;
    gap: 0;
    padding: 0 16px;
    flex-shrink: 0;
    flex-wrap: wrap;
    border-bottom: 1px solid #e0dcd6;
    background: transparent;
}
.ld-nb-flat-tab {
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #999;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    margin-bottom: -1px;
}
.ld-nb-flat-tab:hover {
    color: #555;
}
.ld-nb-flat-tab.active {
    color: #333;
    font-weight: 700;
    border-bottom-color: #333;
}
/* Prominent add-section button on left tab bar */
.ld-nb-flat-tab-add-btn {
    margin-left: 4px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #059669;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    white-space: nowrap;
    margin-bottom: -1px;
    transition: all 0.15s;
}
.ld-nb-flat-tab-add-btn:hover {
    background: #d1fae5;
    border-color: #6ee7b7;
}

/* Flat tab wrapper (for hover delete + color dot) */
.ld-nb-flat-tab-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-left: 8px;
}

.ld-nb-flat-tab-link-icon {
    font-size: 11px;
    margin-right: 2px;
    opacity: 0.85;
}
.ld-nb-flat-tab-color-trigger {
    width: 10px;
    height: 10px;
    border: 1.5px solid rgba(0,0,0,0.12);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: transform 0.15s, box-shadow 0.15s;
}
.ld-nb-flat-tab-color-trigger:hover {
    transform: scale(1.25);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.06);
}
.ld-nb-flat-tab-delete {
    display: none;
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    font-size: 12px;
    color: #999;
    cursor: pointer;
    border-radius: 50%;
    background: #f3f4f6;
}
.ld-nb-flat-tab-delete:hover {
    color: #dc2626;
    background: #fee2e2;
}

/* Kebab (⋮) replaces the old color-dot + × delete on each left tab.
   Hidden until the wrap is hovered. Opens the action menu below. */
.ld-nb-flat-tab-kebab {
    display: none;
    width: 18px;
    height: 18px;
    margin-left: 2px;
    padding: 0;
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.12s, color 0.12s;
}
.ld-nb-flat-tab-wrap:hover .ld-nb-flat-tab-kebab,
.ld-nb-flat-tab-kebab:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ld-nb-flat-tab-kebab:hover {
    background: rgba(0,0,0,0.07);
    color: #1f2937;
}

/* Shared action menu used by the flat-tab kebab + the "+ Add Section"
   dropdown. Tight padding, soft shadow, one column. */
.ld-nb-tab-action-menu {
    position: fixed;
    z-index: 100000;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 4px;
    min-width: 180px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-family: inherit;
}
.ld-nb-tab-action-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: none;
    background: transparent;
    color: #1f2937;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    border-radius: 5px;
    font-family: inherit;
    line-height: 1.2;
}
.ld-nb-tab-action-item:hover { background: #f3f4f6; }
.ld-nb-tab-action-item.ld-nb-tab-action-danger { color: #b91c1c; }
.ld-nb-tab-action-item.ld-nb-tab-action-danger:hover { background: #fee2e2; }
.ld-nb-tab-action-icon {
    width: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.ld-nb-tab-action-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.15);
    flex-shrink: 0;
}

/* Binder tab delete button */
.ld-nb-binder-tab-delete {
    display: none;
    position: absolute;
    top: 4px;
    right: 3px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
}
.ld-nb-binder-tab:hover .ld-nb-binder-tab-delete {
    display: block;
}
.ld-nb-binder-tab-delete:hover {
    opacity: 1;
}

/* Drag-and-drop reorder indicator for binder tabs */
.ld-nb-binder-tab[draggable="true"] {
    cursor: grab;
}
.ld-nb-binder-tab[draggable="true"]:active {
    cursor: grabbing;
}
.ld-nb-binder-tab-dragover {
    outline: 2px solid #059669;
    outline-offset: -2px;
    box-shadow: 0 0 0 2px rgba(5,150,105,0.25), 2px 1px 4px rgba(0,0,0,0.08);
}

/* Left flat tab drag-and-drop */
.ld-nb-flat-tab-wrap[draggable="true"] {
    cursor: grab;
}
.ld-nb-flat-tab-wrap[draggable="true"]:active {
    cursor: grabbing;
}
.ld-nb-flat-tab-dragover {
    outline: 2px solid #059669;
    outline-offset: -2px;
    border-radius: 4px;
    background: rgba(5,150,105,0.06);
}

.ld-nb-flat-tab-edit {
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: none;
    border-bottom: 2px solid #333;
    border-radius: 0;
    background: transparent;
    outline: none;
    margin-bottom: -1px;
    width: 100px;
}

/* Color picker trigger — replaces pencil icon in right page header */
.ld-nb-tab-color-trigger {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0,0,0,0.15);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: transform 0.15s, box-shadow 0.15s;
}
.ld-nb-tab-color-trigger:hover {
    transform: scale(1.15);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
}

.ld-nb-page-icon {
    font-size: 16px;
}

.ld-nb-page-title {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ld-nb-page-linked-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f0fdf4;
    border: 1px solid #a7f3d0;
    color: #047857;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: none;
    white-space: nowrap;
}

/* Editable page title — click to rename, updates the tab */
.ld-nb-page-title-input {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    border-bottom: 1px dashed transparent;
    background: transparent;
    outline: none;
    padding: 0 2px;
    flex: 1;
    min-width: 0;
}
.ld-nb-page-title-input:hover {
    border-bottom-color: #ccc;
}
.ld-nb-page-title-input:focus {
    border-bottom-color: #059669;
    border-bottom-style: solid;
}

/* Generate from Lesson Plan button */
.ld-nb-generate-btn {
    margin-left: auto;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #059669;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}
.ld-nb-generate-btn:hover { background: #d1fae5; border-color: #6ee7b7; }

/* Differentiation block (read view) */
.ld-nb-diff-tag { background: #7c3aed !important; color: #fff !important; }
.ld-nb-diff-block {
    border: 2px dashed #c4b5fd;
    background: #f5f3ff;
    border-radius: 6px;
    padding: 14px 16px;
    margin-top: 6px;
}
.ld-nb-diff-notice {
    font-size: 12px;
    color: #6d28d9;
    font-style: italic;
    line-height: 1.5;
}
.ld-nb-diff-content {
    margin-top: 8px;
    font-size: 13px;
    color: #333;
    font-style: normal;
    line-height: 1.6;
}

/* Differentiation block (editor view) */
.ld-asgn-diff-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: #f5f3ff;
    border: 2px dashed #c4b5fd;
    border-radius: 0 0 6px 6px;
    padding: 20px 16px;
    text-align: center;
}
.ld-asgn-diff-icon {
    font-size: 24px;
    color: #7c3aed;
}
.ld-asgn-diff-label {
    font-size: 13px;
    font-weight: 700;
    color: #7c3aed;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ld-asgn-diff-notice {
    font-size: 11px;
    color: #8b5cf6;
    line-height: 1.5;
    max-width: 300px;
}
.ld-asgn-diff-content {
    margin-top: 8px;
    font-size: 13px;
    color: #333;
    text-align: left;
    width: 100%;
    background: white;
    padding: 10px 12px;
    border-radius: 4px;
    border: 1px solid #e9d5ff;
}

.ld-nb-page-section-label {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 10px;
    border: 1px solid;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ld-nb-page-add {
    margin-left: auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px dashed #c0b8ac;
    background: none;
    font-size: 18px;
    line-height: 1;
    color: #999;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ld-nb-page-add:hover {
    border-color: #059669;
    color: #059669;
    background: #f0fdf4;
    border-style: solid;
}

/* Page body (scrollable) */
.ld-nb-page-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
}

/* Empty state */
.ld-nb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    min-height: 200px;
}

.ld-nb-empty-icon {
    font-size: 32px;
    opacity: 0.3;
    margin-bottom: 12px;
}

.ld-nb-empty-text {
    font-size: 14px;
    font-weight: 600;
    color: #999;
    margin-bottom: 6px;
}

.ld-nb-empty-hint {
    font-size: 12px;
    color: #bbb;
    line-height: 1.5;
}

.ld-nb-empty-btn {
    margin-top: 16px;
    padding: 8px 20px;
    background: #059669;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.ld-nb-empty-btn:hover {
    background: #047857;
}

/* Spine */
.ld-nb-spine {
    width: 20px;
    flex-shrink: 0;
    background: linear-gradient(90deg, #d4cec3, #c4beb3 50%, #d4cec3);
    box-shadow: inset -1px 0 2px rgba(255,255,255,0.5), inset 1px 0 2px rgba(0,0,0,0.15);
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.ld-nb-spine-line {
    width: 1px;
    background: #b8b0a4;
}

/* ---- Material sections (left page, grouped by tab) ---- */
.ld-nb-mat-section {
    margin-bottom: 6px;
}
.ld-nb-mat-section:last-of-type {
    margin-bottom: 2px;
}
.ld-nb-mat-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid #e0dcd6;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}
.ld-nb-mat-section-header:hover {
    filter: brightness(0.97);
}
.ld-nb-mat-section-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ld-nb-mat-section-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex: 1;
}
.ld-nb-mat-section-count {
    font-size: 11px;
    font-weight: 600;
    color: #999;
    background: rgba(0,0,0,0.05);
    padding: 1px 7px;
    border-radius: 10px;
}
.ld-nb-mat-section-body {
    padding: 6px 0 6px 12px;
}
.ld-nb-mat-section-empty {
    font-size: 12px;
    color: #bbb;
    font-style: italic;
    padding: 4px 0;
}
.ld-nb-mat-section-add {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    padding: 4px 0 2px;
}
.ld-nb-mat-add-btn {
    width: 30px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #e0dcd6;
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
    color: #999;
}
.ld-nb-mat-add-btn:hover {
    border-color: #059669;
    background: #f0fdf4;
    border-style: solid;
}

/* Add Section row (bottom of left page) */
.ld-nb-add-section-row {
    padding: 10px 0 4px;
    border-top: 1px dashed #e8e4de;
    margin-top: 6px;
}
.ld-nb-add-section-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border: 1px dashed #d0ccc4;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s;
}
.ld-nb-add-section-btn:hover {
    background: #f5f3ef;
    border-color: #a09888;
}
.ld-nb-add-section-plus {
    font-size: 18px;
    font-weight: 700;
    color: #999;
    line-height: 1;
}
.ld-nb-add-section-text {
    font-size: 13px;
    font-weight: 600;
    color: #888;
}
.ld-nb-add-section-btn:hover .ld-nb-add-section-plus,
.ld-nb-add-section-btn:hover .ld-nb-add-section-text {
    color: #666;
}

/* ---- Material cards (left page) ---- */
.ld-nb-mat-card {
    background: #fff;
    border: 1px solid #e8e4de;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.ld-nb-mat-card:hover {
    border-color: #d0cbc4;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ld-nb-mat-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ld-nb-mat-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.ld-nb-mat-info {
    flex: 1;
    min-width: 0;
}

.ld-nb-mat-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ld-nb-mat-type {
    font-size: 11px;
    color: #999;
}

.ld-nb-mat-linked-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #f0fdf4;
    border: 1px solid #a7f3d0;
    color: #047857;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.ld-nb-mat-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s;
}

.ld-nb-mat-card:hover .ld-nb-mat-actions {
    opacity: 1;
}

.ld-nb-mat-btn {
    width: 26px;
    height: 26px;
    border: none;
    background: #f3f4f6;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.ld-nb-mat-btn:hover {
    background: #e5e7eb;
    color: #333;
}

.ld-nb-mat-btn.delete:hover {
    background: #fef2f2;
    color: #dc2626;
}

.ld-nb-mat-content {
    font-size: 12px;
    color: #666;
    line-height: 1.5;
    margin-top: 8px;
    /* Horizontal padding + nested-list indent baked in so AI-generated
       numbered/bulleted markers don't render flush against the card's
       left border or spill past its right edge. */
    padding: 8px 8px 0 8px;
    border-top: 1px solid #f0ece6;
    overflow-wrap: anywhere;
    word-break: break-word;
    box-sizing: border-box;
    max-width: 100%;
}
.ld-nb-mat-content ol,
.ld-nb-mat-content ul {
    margin: 4px 0;
    padding-left: 20px;
    list-style-position: outside;
}
.ld-nb-mat-content li { margin: 2px 0; }
.ld-nb-mat-content > *,
.ld-nb-mat-content table,
.ld-nb-mat-content img {
    max-width: 100%;
    box-sizing: border-box;
}
.ld-nb-mat-content table {
    table-layout: fixed;
    width: 100%;
    word-break: break-word;
}

.ld-nb-mat-desc {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
    font-style: italic;
}

.ld-nb-mat-link {
    font-size: 11px;
    margin-top: 6px;
}

.ld-nb-mat-link a {
    color: #0284c7;
    text-decoration: none;
}

.ld-nb-mat-link a:hover {
    text-decoration: underline;
}

/* Media preview inside notebook mat card */
.ld-nb-mat-card .ld-mat-media-preview {
    margin-top: 8px;
    border-radius: 6px;
    overflow: hidden;
}

/* ---- Assignment previews (right page) ---- */
.ld-nb-asgn {
    border: 1px solid #e8e4de;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fff;
}

.ld-nb-asgn.editing {
    border-color: #059669;
    box-shadow: 0 0 0 2px rgba(5,150,105,0.12);
}

.ld-nb-asgn-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    background: linear-gradient(to bottom, #faf8f4, #f5f2ed);
    border-bottom: 1px solid #e8e4de;
    transition: background 0.15s;
}

.ld-nb-asgn-header:hover {
    background: #f0ece6;
}

.ld-nb-asgn-chevron {
    font-size: 9px;
    color: #999;
    transition: transform 0.2s;
}

.ld-nb-asgn-chevron.open {
    transform: rotate(180deg);
}

.ld-nb-asgn-title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ld-nb-asgn-title-input {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    border: none;
    border-bottom: 2px solid #059669;
    background: transparent;
    padding: 2px 0;
    outline: none;
}

.ld-nb-asgn-count {
    font-size: 11px;
    color: #999;
    font-weight: 600;
    padding: 2px 8px;
    background: #f0ece6;
    border-radius: 10px;
}

.ld-nb-asgn-draft {
    font-size: 10px;
    font-weight: 700;
    color: #dc2626;
    padding: 2px 8px;
    background: #fef2f2;
    border-radius: 10px;
    text-transform: uppercase;
}

.ld-nb-asgn-delete {
    background: none;
    border: none;
    color: #ccc;
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.ld-nb-asgn-delete:hover {
    color: #dc2626;
    background: #fef2f2;
}

/* Assignment body (edit mode) */
.ld-nb-asgn-body {
    padding: 14px;
    background: #fefcf8;
}

.ld-nb-asgn-body .ld-asgn-doc-sections {
    padding: 0;
}

/* Assignment preview (collapsed mode - student notebook style) */
.ld-nb-asgn-preview {
    padding: 12px 14px;
}

/* Question preview cards */
.ld-nb-question {
    padding: 10px 12px;
    border: 1px solid #f0ece6;
    border-radius: 8px;
    margin-bottom: 8px;
    background: #fefcf8;
    transition: background 0.15s;
}

.ld-nb-question:hover {
    background: #faf7f2;
}

.ld-nb-q-label {
    font-size: 12px;
    font-weight: 700;
    color: #666;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ld-nb-q-type-tag {
    font-size: 10px;
    font-weight: 600;
    color: #999;
    background: #f0ece6;
    padding: 1px 7px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ld-nb-q-text {
    font-size: 13px;
    line-height: 1.55;
    color: #444;
    margin-bottom: 8px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

.ld-nb-q-empty {
    text-align: center;
    color: #bbb;
    font-size: 13px;
    padding: 20px;
    font-style: italic;
}

/* Answer lines (short answer / essay) */
.ld-nb-q-lines {
    padding-top: 4px;
}

.ld-nb-q-line {
    height: 1px;
    background: #d0cbc4;
    margin-bottom: 18px;
    opacity: 0.6;
}

.ld-nb-q-more {
    text-align: center;
    color: #ccc;
    font-size: 14px;
    margin-top: -8px;
}

/* Multiple choice options */
.ld-nb-q-option {
    font-size: 13px;
    color: #555;
    padding: 4px 8px;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ld-nb-q-option-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1.5px solid #d0cbc4;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    color: #888;
    flex-shrink: 0;
}

/* True/False */
.ld-nb-q-tf {
    font-size: 13px;
    color: #555;
    padding: 4px 8px;
    margin-bottom: 4px;
}

.ld-nb-q-tf-label {
    display: inline-block;
    font-weight: 700;
    color: #888;
    margin-right: 8px;
    font-size: 12px;
    padding: 2px 8px;
    background: #f0ece6;
    border-radius: 4px;
}

/* Matching */
.ld-nb-q-match {
    padding: 4px 0;
}

.ld-nb-q-match-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px;
    font-size: 13px;
    color: #555;
}

.ld-nb-q-match-l {
    flex: 1;
    padding: 3px 8px;
    background: #f5f3ef;
    border-radius: 4px;
}

.ld-nb-q-match-arrow {
    color: #ccc;
    font-size: 14px;
}

.ld-nb-q-match-r {
    flex: 1;
    padding: 3px 8px;
    border-bottom: 1px dashed #d0cbc4;
}

/* Fill in the blank */
.ld-nb-q-blank {
    display: inline-block;
    border-bottom: 2px solid #d0cbc4;
    min-width: 80px;
    color: transparent;
    margin: 0 4px;
}

/* Word bank */
.ld-nb-q-wordbank {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0;
}

.ld-nb-q-word {
    display: inline-block;
    padding: 4px 12px;
    background: #f0ece6;
    border: 1px dashed #d0cbc4;
    border-radius: 6px;
    font-size: 13px;
    color: #555;
}

/* Instructions / Notes */
.ld-nb-q-note {
    font-size: 13px;
    line-height: 1.55;
    color: #666;
    font-style: italic;
    padding: 6px 10px;
    background: #f8f6f2;
    border-left: 3px solid #e0dcd6;
    border-radius: 0 6px 6px 0;
}

/* Add section toolbar */
.ld-nb-add-section {
    padding: 12px 0;
    border-top: 1px solid #f0ece6;
    margin-top: 8px;
}

.ld-nb-add-section-label {
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
}

.ld-nb-add-section-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ld-nb-add-section-btn {
    padding: 5px 10px;
    background: #f5f3ef;
    border: 1px solid #e8e4de;
    border-radius: 6px;
    font-size: 11px;
    color: #666;
    cursor: pointer;
    transition: all 0.15s;
}

.ld-nb-add-section-btn:hover {
    background: #f0fdf4;
    border-color: #059669;
    color: #059669;
}

/* Assignment footer (save/cancel/print) */
.ld-nb-asgn-footer {
    display: flex;
    gap: 8px;
    padding: 12px 0 0;
    border-top: 1px solid #f0ece6;
    margin-top: 8px;
}

.ld-nb-save-btn {
    padding: 8px 24px;
    background: #059669;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.ld-nb-save-btn:hover {
    background: #047857;
}

.ld-nb-cancel-btn {
    padding: 8px 18px;
    background: white;
    color: #666;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.ld-nb-cancel-btn:hover {
    background: #f8f9fa;
    border-color: #ccc;
}

.ld-nb-print-btn {
    padding: 8px 18px;
    background: white;
    color: #666;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.ld-nb-print-btn:hover {
    background: #f0f4ff;
    border-color: #3b82f6;
    color: #3b82f6;
}

/* Material form inside notebook page */
.ld-nb-page-body .ld-mat-form {
    margin-bottom: 12px;
}

/* ---- Bottom toolbar (add material / add question) ---- */
.ld-nb-bottom-toolbar {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed #e0dcd6;
}

.ld-nb-toolbar-label {
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    padding-left: 2px;
}

.ld-nb-toolbar-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.ld-nb-toolbar-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e8e4de;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}

.ld-nb-toolbar-btn:hover {
    border-color: #059669;
    background: #f0fdf4;
}

.ld-nb-toolbar-btn-icon {
    font-size: 18px;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.ld-nb-toolbar-btn-text {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    line-height: 1.3;
}

.ld-nb-toolbar-btn:hover .ld-nb-toolbar-btn-text {
    color: #059669;
}

/* ---- Flat question card (right page, no toggle) ---- */
.ld-nb-q-card {
    position: relative;
    border: 1px solid #e8e4de;
    border-radius: 8px;
    margin-bottom: 10px;
    background: #fff;
    padding: 12px 14px;
    padding-right: 32px;
    transition: border-color 0.2s;
    min-width: 0;
    overflow-wrap: break-word;
}

.ld-nb-q-card:hover {
    border-color: #d0cbc4;
}

.ld-nb-q-card:hover .ld-nb-q-delete {
    opacity: 1;
}

.ld-nb-q-delete {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border: none;
    background: #f3f4f6;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.15s;
}

.ld-nb-q-delete:hover {
    background: #fef2f2;
    color: #dc2626;
}

/* Section editors inside flat cards — remove extra spacing */
.ld-nb-q-card .ld-asgn-section {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

/* ========== ASSIGNMENTS TABLE ========== */

.ld-asgn-table-wrap {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
}

.ld-asgn-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ld-asgn-table thead th {
    text-align: left;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

.ld-asgn-table tbody tr {
    cursor: pointer;
    transition: background-color 0.15s;
    border-bottom: 1px solid #f0f0f0;
}

.ld-asgn-table tbody tr:last-child {
    border-bottom: none;
}

.ld-asgn-table tbody tr:hover {
    background-color: #f8faf9;
}

.ld-asgn-table tbody tr.ld-asgn-row-selected {
    background-color: #f0fdf4;
}

.ld-asgn-table tbody td {
    padding: 10px 12px;
    color: #333;
    vertical-align: middle;
}

.ld-asgn-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.ld-asgn-badge-yes {
    background-color: #d1fae5;
    color: #065f46;
}

.ld-asgn-badge-no {
    background-color: #f3f4f6;
    color: #9ca3af;
}

.ld-asgn-del-btn {
    background: none;
    border: none;
    color: #ccc;
    font-size: 18px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.15s, background-color 0.15s;
    line-height: 1;
}

.ld-asgn-del-btn:hover {
    color: #dc2626;
    background-color: #fef2f2;
}

/* ========== ASSIGNMENTS FORM ========== */

.ld-asgn-form-card {
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 18px;
    margin-top: 8px;
}

.ld-asgn-input {
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background-color: white;
    color: #333;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.ld-asgn-input:focus {
    outline: none;
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
}

.ld-asgn-select {
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background-color: white;
    color: #333;
    cursor: pointer;
    transition: border-color 0.2s;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}

.ld-asgn-select:focus {
    outline: none;
    border-color: #059669;
}

/* ========== ASSIGNMENTS DOCUMENT SHEETS ========== */

#ld-asgn-left {
    padding: 0;
}

.ld-asgn-doc-container {
    background-color: #e8eaed;
    padding: 20px 24px;
    min-height: 100%;
}

/* Paper sheet */
.ld-asgn-doc-sheet {
    background-color: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);
    margin-bottom: 16px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.ld-asgn-doc-sheet:hover {
    box-shadow: 0 3px 12px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
}

.ld-asgn-doc-sheet.editing {
    border-color: #059669;
    box-shadow: 0 0 0 2px rgba(5,150,105,0.15), 0 2px 8px rgba(0,0,0,0.07);
}

/* Collapsed accordion bar */
.ld-asgn-doc-collapsed {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    cursor: pointer;
    user-select: none;
    gap: 10px;
}

.ld-asgn-doc-collapsed:hover {
    background-color: #f8faf9;
}

.ld-asgn-doc-collapsed-chevron {
    font-size: 10px;
    color: #999;
    transition: transform 0.2s;
}

.ld-asgn-doc-collapsed-chevron.open {
    transform: rotate(180deg);
}

.ld-asgn-doc-collapsed-title-input {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    background: none;
    border: none;
    border-bottom: 1px solid transparent;
    outline: none;
    padding: 2px 4px;
    min-width: 0;
    cursor: text;
    transition: border-color 0.2s;
}

.ld-asgn-doc-collapsed-title-input:focus {
    border-bottom-color: #059669;
}

.ld-asgn-doc-collapsed-title-input::placeholder {
    color: #aaa;
    font-weight: 400;
}

/* Delete X on collapsed bar */
.ld-asgn-doc-collapsed-delete {
    background: none;
    border: none;
    color: #ccc;
    font-size: 18px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 4px;
    transition: color 0.15s;
    line-height: 1;
}

.ld-asgn-doc-collapsed-delete:hover {
    color: #dc2626;
}

/* Document body (expanded) */
.ld-asgn-doc-body {
    display: none;
}

.ld-asgn-doc-body.open {
    display: block;
}

.ld-asgn-doc-page {
    padding: 28px 40px 24px 40px;
    border-top: 1px solid #e8e8e8;
}

/* Private metadata section (teacher-only, above the student area) */
.ld-asgn-doc-private-section {
    background-color: #faf8ff;
    border: 1px solid #e8e0f0;
    border-radius: 6px;
    padding: 10px 14px 12px 14px;
    margin-bottom: 18px;
}

.ld-asgn-doc-private-label {
    font-size: 10px;
    font-weight: 700;
    color: #8b5cf6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* Metadata row (type, groups, differentiated inside doc header) */
.ld-asgn-doc-meta-row {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.ld-asgn-doc-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ld-asgn-doc-meta-label {
    font-size: 11px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.ld-asgn-doc-meta-row .ld-asgn-select {
    width: auto;
    min-width: 130px;
    padding: 5px 28px 5px 10px;
    font-size: 12px;
}

/* Differentiated toggle switch */
.ld-asgn-doc-toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.ld-asgn-doc-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ld-asgn-doc-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    border-radius: 20px;
    transition: background-color 0.2s;
}

.ld-asgn-doc-toggle-slider:before {
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.2s;
}

.ld-asgn-doc-toggle input:checked + .ld-asgn-doc-toggle-slider {
    background-color: #059669;
}

.ld-asgn-doc-toggle input:checked + .ld-asgn-doc-toggle-slider:before {
    transform: translateX(16px);
}

/* Assigned To button */
.ld-asgn-assigned-btn {
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    color: #333;
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.ld-asgn-assigned-btn:hover {
    border-color: #059669;
    background: #f9fafb;
}

/* Student picker dropdown */
.ld-asgn-student-picker {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    width: 220px;
    max-height: 280px;
    overflow-y: auto;
    margin-top: 4px;
    padding: 6px 0;
}

.ld-asgn-student-picker-actions {
    display: flex;
    gap: 6px;
    padding: 4px 10px 8px;
    border-bottom: 1px solid #eee;
    margin-bottom: 4px;
}

.ld-asgn-student-picker-actions button {
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 3px;
    cursor: pointer;
}

.ld-asgn-student-picker-actions button:hover {
    background: #dbeafe;
}

.ld-asgn-student-picker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    font-size: 12px;
    color: #333;
    cursor: pointer;
}

.ld-asgn-student-picker-item:hover {
    background: #f3f4f6;
}

.ld-asgn-student-picker-item input[type="checkbox"] {
    margin: 0;
    accent-color: #059669;
}

/* Header row: student info + QR code */
.ld-asgn-doc-header-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
}

.ld-asgn-doc-student-line {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    flex: 1;
    padding-top: 4px;
}

/* Cohesive student header block */
.ld-asgn-doc-student-header {
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #333;
}

.ld-asgn-doc-header-layout {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.ld-asgn-doc-header-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ld-asgn-doc-student-row {
    display: flex;
    gap: 24px;
    align-items: baseline;
}

/* Teacher notes inside private section */
/* Page counter */
.ld-asgn-page-counter {
    text-align: right;
    font-size: 11px;
    color: #999;
    font-weight: 600;
    margin-top: 12px;
    letter-spacing: 0.3px;
}

.ld-asgn-doc-student-row .ld-asgn-doc-field {
    display: flex;
    align-items: baseline;
}

/* QR code */
.ld-asgn-doc-qr {
    flex-shrink: 0;
    text-align: center;
}

.ld-asgn-doc-qr svg {
    width: 80px;
    height: 80px;
    padding: 4px;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    background: #fff;
}

.ld-asgn-doc-qr-label {
    font-size: 8px;
    color: #999;
    margin-top: 2px;
    letter-spacing: 0.3px;
}

.ld-asgn-doc-field {
    font-size: 13px;
    color: #333;
}

.ld-asgn-doc-field-label {
    font-weight: 600;
}

.ld-asgn-doc-field-blank {
    display: inline-block;
    width: 140px;
    border-bottom: 1px solid #333;
    margin-left: 4px;
}

/* Title row: title input + lesson subtitle on same line */
.ld-asgn-doc-title-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 2px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e8e8e8;
}

/* Title input (inside title row, left-aligned) */
.ld-asgn-doc-title-input {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    text-align: left;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    padding: 4px 4px 2px;
    margin: 0;
    font-family: Arial, sans-serif;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.ld-asgn-doc-title-input:focus {
    outline: none;
    border-bottom-color: #059669;
}

.ld-asgn-doc-title-input::placeholder {
    color: #ccc;
    font-style: italic;
}

/* Lesson subtitle (right-justified in title row) */
.ld-asgn-doc-lesson-subtitle {
    font-size: 12px;
    color: #666;
    font-style: italic;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Status badges */
.ld-asgn-status-drafting {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    background-color: #fef3c7;
    color: #92400e;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ld-asgn-status-ready {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    background-color: #d1fae5;
    color: #065f46;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Directions */
.ld-asgn-doc-directions-label {
    font-size: 12px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.ld-asgn-doc-directions-textarea {
    width: 100%;
    min-height: 60px;
    padding: 10px 12px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    resize: vertical;
    transition: border-color 0.2s, background-color 0.2s;
    box-sizing: border-box;
}

.ld-asgn-doc-directions-textarea:hover {
    background-color: #fafafa;
    border-color: #e0e0e0;
}

.ld-asgn-doc-directions-textarea:focus {
    outline: none;
    border-color: #059669;
    background-color: #fff;
    box-shadow: 0 0 0 2px rgba(5,150,105,0.08);
}

/* Questions section */
.ld-asgn-doc-questions {
    margin-top: 20px;
}

.ld-asgn-doc-question {
    margin-bottom: 20px;
    position: relative;
}

.ld-asgn-doc-question-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}

.ld-asgn-doc-question-number {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    min-width: 24px;
    flex-shrink: 0;
    padding-top: 2px;
}

.ld-asgn-doc-question-input {
    flex: 1;
    font-size: 13px;
    font-family: Arial, sans-serif;
    line-height: 1.5;
    color: #333;
    border: none;
    border-bottom: 1px solid transparent;
    background: transparent;
    padding: 2px 4px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.ld-asgn-doc-question-input:hover {
    border-bottom-color: #e0e0e0;
}

.ld-asgn-doc-question-input:focus {
    outline: none;
    border-bottom-color: #059669;
}

.ld-asgn-doc-question-delete {
    background: none;
    border: none;
    color: #ccc;
    font-size: 16px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    transition: color 0.15s;
    flex-shrink: 0;
    opacity: 0;
}

.ld-asgn-doc-question:hover .ld-asgn-doc-question-delete {
    opacity: 1;
}

.ld-asgn-doc-question-delete:hover {
    color: #dc2626;
}

/* Answer lines (ruled) */
.ld-asgn-doc-answer-lines {
    margin-top: 4px;
    padding-left: 32px;
}

.ld-asgn-doc-answer-line {
    height: 28px;
    border-bottom: 1px solid #d0d0d0;
}

/* Lines config */
.ld-asgn-doc-lines-config {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 32px;
    margin-top: 4px;
}

.ld-asgn-doc-lines-label {
    font-size: 11px;
    color: #999;
}

.ld-asgn-doc-lines-input {
    width: 44px;
    padding: 2px 6px;
    font-size: 11px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    text-align: center;
    color: #666;
}

.ld-asgn-doc-lines-input:focus {
    outline: none;
    border-color: #059669;
}

/* Add question button */
.ld-asgn-doc-add-question-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #059669;
    background: none;
    border: 1px dashed #a7f3d0;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    margin-top: 8px;
}

.ld-asgn-doc-add-question-btn:hover {
    background-color: #f0fdf4;
    border-color: #059669;
}

/* ===== SECTION-BASED BUILDER ===== */

/* Section card */
.ld-asgn-section {
    margin-bottom: 16px;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    background: #fff;
    transition: border-color 0.2s;
}

.ld-asgn-section:hover {
    border-color: #d0d0d0;
}

.ld-asgn-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: #fafafa;
    border-bottom: 1px solid #e8e8e8;
    border-radius: 6px 6px 0 0;
}

.ld-asgn-section-type-label {
    font-size: 11px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Spacer between left-side pills (type/Answer/AI-Human) and right-side
   move/delete buttons. Replaces the old flex:1 on the type label so the
   type label hugs its text instead of stretching. */
.ld-asgn-section-header-spacer { flex: 1; }

/* Answer reveal pill — closed = neutral, open = solid green. Sits between
   the type label and the AI/Human grading toggle. */
.ld-asgn-section-answer-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 12px;
    border: 1px solid #d1d5db;
    background: #f3f4f6;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: all 0.15s;
    font-family: inherit;
    line-height: 1.2;
}
.ld-asgn-section-answer-pill:hover {
    border-color: #9ca3af;
    background: #e5e7eb;
}
.ld-asgn-section-answer-pill.open {
    background: #059669;
    border-color: #059669;
    color: #fff;
}
.ld-asgn-section-answer-pill.open:hover {
    background: #047857;
    border-color: #047857;
}

/* Human grading toggle */
.ld-human-grade-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid #d1d5db;
    background: #f3f4f6;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    transition: all 0.2s;
    font-family: inherit;
    line-height: 1;
}
.ld-human-grade-toggle:hover {
    border-color: #9ca3af;
    background: #e5e7eb;
}
.ld-human-grade-toggle.active {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #92400e;
}
.ld-human-grade-toggle.active:hover {
    background: #fde68a;
    border-color: #d97706;
}
/* 3-state grading mode pill (2026-05-25) — same class is reused inline
   in the notebook structured editor, so these mode-suffixed classes
   override both .ld-human-grade-toggle and .nb-grade-toggle wrappers. */
.ld-human-grade-toggle.nb-grade-toggle-ai,
.nb-grade-toggle.nb-grade-toggle-ai {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #6b7280;
}
.ld-human-grade-toggle.nb-grade-toggle-ai:hover,
.nb-grade-toggle.nb-grade-toggle-ai:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
}
.ld-human-grade-toggle.nb-grade-toggle-teacher,
.nb-grade-toggle.nb-grade-toggle-teacher {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #92400e;
}
.ld-human-grade-toggle.nb-grade-toggle-teacher:hover,
.nb-grade-toggle.nb-grade-toggle-teacher:hover {
    background: #fde68a;
    border-color: #d97706;
}
.ld-human-grade-toggle.nb-grade-toggle-none,
.nb-grade-toggle.nb-grade-toggle-none {
    background: #eef2ff;
    border-color: #a5b4fc;
    color: #4338ca;
}
.ld-human-grade-toggle.nb-grade-toggle-none:hover,
.nb-grade-toggle.nb-grade-toggle-none:hover {
    background: #e0e7ff;
    border-color: #818cf8;
}
.ld-hg-icon {
    font-size: 13px;
    line-height: 1;
}
.ld-hg-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Criteria / Standards / Rubric selector — sits next to the grader toggle */
.ld-criteria-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid #d1d5db;
    background: #f3f4f6;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    transition: all 0.15s;
    font-family: inherit;
    line-height: 1;
    max-width: 260px;
}
.ld-criteria-btn:hover {
    border-color: #9ca3af;
    background: #e5e7eb;
}
.ld-criteria-btn.has-selection {
    background: #ecfdf5;
    border-color: #10b981;
    color: #065f46;
}
.ld-criteria-btn.has-selection:hover {
    background: #d1fae5;
    border-color: #059669;
}
.ld-criteria-btn-icon {
    font-size: 12px;
    line-height: 1;
}
.ld-criteria-btn-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ld-criteria-dropdown {
    /* position:fixed so the dropdown ignores any transformed/scrolled
       ancestor — earlier it was rendering correctly into the DOM but
       getting clipped by an `overflow:hidden` ancestor on the notebook
       binder layout (2026-05-25). */
    position: fixed;
    z-index: 100050;
    width: 280px;
    max-height: 380px;
    overflow: auto;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.06);
    font-size: 13px;
    color: #111827;
    box-sizing: border-box;
}
.ld-criteria-dd-header {
    padding: 10px 12px 8px;
    border-bottom: 1px solid #e5e7eb;
    background: #fafafa;
    border-radius: 8px 8px 0 0;
}
.ld-criteria-dd-title {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ld-criteria-dd-subtitle {
    display: block;
    font-size: 11px;
    color: #6b7280;
    margin-top: 2px;
}
.ld-criteria-dd-body {
    padding: 6px 0;
}
.ld-criteria-dd-empty {
    padding: 16px 12px;
    font-size: 12px;
    color: #6b7280;
    text-align: center;
    line-height: 1.5;
}
.ld-criteria-dd-source {
    padding: 6px 12px 4px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #475569;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
}
.ld-criteria-dd-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.1s;
}
.ld-criteria-dd-item:hover {
    background: #f9fafb;
}
.ld-criteria-dd-item.checked {
    background: #ecfdf5;
    border-left-color: #10b981;
}
.ld-criteria-dd-item input[type="checkbox"] {
    margin-top: 2px;
    cursor: pointer;
    accent-color: #059669;
}
.ld-criteria-dd-code {
    font-weight: 700;
    color: #065f46;
    font-size: 12px;
    min-width: 22px;
}
.ld-criteria-dd-name {
    color: #333;
    font-size: 13px;
    line-height: 1.4;
}

/* Formatting toolbar for material content */
.ld-format-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    flex-wrap: wrap;
}
.ld-format-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 26px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    transition: all 0.15s;
    padding: 0;
}
.ld-format-btn:hover {
    background: #e9ecef;
    border-color: #d0d0d0;
}
.ld-format-btn.active {
    background: #e0e7ff;
    border-color: #818cf8;
    color: #4338ca;
}
.ld-format-sep {
    width: 1px;
    height: 18px;
    background: #d0d0d0;
    margin: 0 4px;
}
.ld-format-color-btn {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.1s;
}
.ld-format-color-btn:hover {
    transform: scale(1.15);
    border-color: #999;
}
.ld-format-color-btn.active {
    border-color: #333;
}
/* Block-style picker (Paragraph / Heading / Subheading) */
.ld-format-block {
    height: 24px;
    padding: 0 6px;
    font-size: 11px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    background: #fff;
    color: #555;
    cursor: pointer;
}
.ld-format-block:hover { border-color: #818cf8; color: #333; }

/* Tables inserted via the toolbar (or rendered from AI-generated HTML
   in materials). Tight, classroom-handout look — borders + light header. */
.ld-rt-table,
.ld-mat-card-content table,
.ld-mat-content-editable table {
    border-collapse: collapse;
    margin: 8px 0;
    width: 100%;
    font-size: 13px;
}
.ld-rt-table th, .ld-rt-table td,
.ld-mat-card-content th, .ld-mat-card-content td,
.ld-mat-content-editable th, .ld-mat-content-editable td {
    border: 1px solid #d0d0d0;
    padding: 6px 10px;
    vertical-align: top;
    text-align: left;
}
.ld-rt-table thead th,
.ld-mat-card-content thead th,
.ld-mat-content-editable thead th {
    background: #f3f4f6;
    font-weight: 700;
    color: #1f2937;
}
/* Lists rendered inside material cards (not just the editor) */
.ld-mat-card-content ul,
.ld-mat-card-content ol {
    margin: 4px 0 4px 18px;
    padding: 0;
}
.ld-mat-card-content li { margin: 2px 0; }
.ld-mat-card-content h2 { font-size: 15px; margin: 8px 0 4px; }
.ld-mat-card-content h3 { font-size: 13px; margin: 6px 0 2px; font-weight: 700; }
/* Cap rendered material content so a long handout doesn't push the
   stack off screen. Teacher can click into edit to see/edit the full body. */
.ld-mat-card-content.ld-rt-content {
    max-height: 220px;
    overflow: hidden;
    position: relative;
}
.ld-mat-card-content.ld-rt-content::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 28px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
    pointer-events: none;
}

.ld-mat-content-editable {
    min-height: 180px;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 0 0 6px 6px;
    font-size: 13px;
    line-height: 1.6;
    color: #333;
    background: #fff;
    outline: none;
    overflow-y: auto;
    max-height: 400px;
    font-family: inherit;
}
.ld-mat-content-editable:focus {
    border-color: #818cf8;
}
.ld-mat-content-editable:empty::before {
    content: attr(data-placeholder);
    color: #bbb;
    font-style: italic;
}

/* 2026-05-25 — ▲▼ move-btn rules retained for safety; the buttons are no
   longer rendered (drag-drop replaces them on both notebook + modal). */
.ld-asgn-section-move-btn {
    background: none;
    border: none;
    color: #ccc;
    font-size: 10px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}

.ld-asgn-section:hover .ld-asgn-section-move-btn {
    opacity: 1;
}

.ld-asgn-section-move-btn:hover {
    color: #333;
}

/* × close — always visible (no more hover gate). Hover tints red. */
.ld-asgn-section-delete {
    background: none;
    border: none;
    color: #999;
    font-size: 16px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    opacity: 1;
    transition: color 0.15s;
}

.ld-asgn-section-delete:hover {
    color: #dc2626;
}

/* Drag handle in the section header — visible grip cue for the
   draggable card. Mirrors notebook's .nb-drag-handle look so the two
   surfaces feel identical. */
.ld-asgn-section-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    font-size: 14px;
    color: #999;
    margin-right: 2px;
    user-select: none;
    padding: 0 2px;
    transition: color 0.15s;
}
.ld-asgn-section-drag-handle:hover {
    color: #333;
}
.ld-asgn-section-drag-handle:active {
    cursor: grabbing;
}

.ld-asgn-section-body {
    padding: 12px 16px 16px;
}

/* Section inputs */
.ld-asgn-section-question-input {
    width: 100%;
    font-size: 13px;
    font-family: Arial, sans-serif;
    line-height: 1.5;
    color: #333;
    border: none;
    border-bottom: 1px solid transparent;
    background: transparent;
    padding: 4px 4px;
    margin-bottom: 10px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.ld-asgn-section-question-input:hover { border-bottom-color: #e0e0e0; }
.ld-asgn-section-question-input:focus { outline: none; border-bottom-color: #059669; }

.ld-asgn-section-question-textarea {
    width: 100%;
    min-height: 60px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    resize: vertical;
    transition: border-color 0.2s, background-color 0.2s;
    box-sizing: border-box;
    margin-bottom: 8px;
}

.ld-asgn-section-question-textarea:hover { background-color: #fafafa; border-color: #e0e0e0; }
.ld-asgn-section-question-textarea:focus { outline: none; border-color: #059669; background-color: #fff; }

.ld-asgn-section-add-sub-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #059669;
    background: none;
    border: 1px dashed #a7f3d0;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 6px;
    transition: all 0.15s;
}

.ld-asgn-section-add-sub-btn:hover {
    background-color: #f0fdf4;
    border-color: #059669;
}

.ld-asgn-section-item-delete {
    background: none;
    border: none;
    color: #ccc;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 4px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}

.ld-asgn-matching-item:hover .ld-asgn-section-item-delete,
.ld-asgn-tf-statement:hover .ld-asgn-section-item-delete {
    opacity: 1;
}

.ld-asgn-section-item-delete:hover {
    color: #dc2626;
}

/* Multiple Choice */
.ld-asgn-mc-options { margin-top: 6px; }

.ld-asgn-mc-option {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.ld-asgn-mc-circle {
    width: 24px;
    height: 24px;
    border: 2px solid #d0d0d0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #666;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.15s;
}
.ld-asgn-mc-circle:hover {
    border-color: #059669;
    color: #059669;
}
.ld-asgn-mc-circle.correct {
    background: #059669;
    border-color: #059669;
    color: white;
}
/* Closed-state MC circle: looks like the student preview — no clickable
   affordance, no hover hint. Teacher must open the Answer pill to mark
   the correct option. */
.ld-asgn-mc-circle.ld-asgn-mc-circle-inert {
    cursor: default;
}
.ld-asgn-mc-circle.ld-asgn-mc-circle-inert:hover {
    border-color: #d0d0d0;
    color: #666;
}
.ld-asgn-mc-correct {
    background: #f0fdf4;
    border-color: #bbf7d0 !important;
}

.ld-asgn-mc-option-input {
    flex: 1;
    font-size: 13px;
    font-family: Arial, sans-serif;
    border: none;
    border-bottom: 1px solid transparent;
    background: transparent;
    padding: 4px 4px;
    transition: border-color 0.2s;
}

.ld-asgn-mc-option-input:hover { border-bottom-color: #e0e0e0; }
.ld-asgn-mc-option-input:focus { outline: none; border-bottom-color: #059669; }

.ld-asgn-mc-option-delete {
    background: none;
    border: none;
    color: #ccc;
    font-size: 14px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
}

.ld-asgn-mc-option:hover .ld-asgn-mc-option-delete { opacity: 1; }
.ld-asgn-mc-option-delete:hover { color: #dc2626; }

/* True / False */
.ld-asgn-tf-statement {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.ld-asgn-tf-num {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    min-width: 20px;
}

.ld-asgn-tf-input {
    flex: 1;
    font-size: 13px;
    font-family: Arial, sans-serif;
    border: none;
    border-bottom: 1px solid transparent;
    background: transparent;
    padding: 4px;
    transition: border-color 0.2s;
}

.ld-asgn-tf-input:hover { border-bottom-color: #e0e0e0; }
.ld-asgn-tf-input:focus { outline: none; border-bottom-color: #059669; }

.ld-asgn-tf-circles { display: flex; gap: 6px; }

.ld-asgn-tf-circle {
    width: 24px;
    height: 24px;
    border: 2px solid #d0d0d0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #666;
    cursor: pointer;
    transition: all 0.15s;
}
.ld-asgn-tf-circle:hover {
    border-color: #059669;
    color: #059669;
}
.ld-asgn-tf-circle.correct {
    background: #059669;
    border-color: #059669;
    color: white;
}

/* Matching answer dropdown */
.ld-asgn-matching-answer {
    width: 40px;
    padding: 2px 4px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    background: #fff;
    color: #666;
    cursor: pointer;
    flex-shrink: 0;
    text-align: center;
}
.ld-asgn-matching-answer:focus {
    border-color: #059669;
    outline: none;
}

/* Answer key (word bank, etc.) */
.ld-asgn-answer-key {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #e0e0e0;
}
.ld-asgn-answer-key-label {
    font-size: 11px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.ld-asgn-answer-key-hint {
    font-weight: 400;
    color: #999;
    text-transform: none;
    letter-spacing: 0;
}
.ld-asgn-answer-key-textarea {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fefcf8;
    color: #333;
    box-sizing: border-box;
    resize: vertical;
    line-height: 1.5;
}

/* Matching */
.ld-asgn-matching-columns {
    display: flex;
    gap: 20px;
    margin-top: 8px;
}

.ld-asgn-matching-col { flex: 1; }

.ld-asgn-matching-col-label {
    font-size: 11px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
}

.ld-asgn-matching-item {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.ld-asgn-matching-num {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    min-width: 20px;
}

.ld-asgn-matching-letter {
    font-size: 13px;
    font-weight: 700;
    color: #059669;
    min-width: 20px;
}

.ld-asgn-matching-input {
    flex: 1;
    font-size: 13px;
    font-family: Arial, sans-serif;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    background: transparent;
    padding: 4px;
}

.ld-asgn-matching-input:focus { outline: none; border-bottom-color: #059669; }

.ld-asgn-matching-blank {
    font-size: 12px;
    color: #ccc;
    border-bottom: 1px solid #d0d0d0;
    min-width: 30px;
    text-align: center;
}

/* Word Bank */
.ld-asgn-wb-words {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ld-asgn-wb-word {
    display: flex;
    align-items: center;
    gap: 2px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 2px 4px 2px 8px;
    background: #fafafa;
}

.ld-asgn-wb-input {
    font-size: 13px;
    font-family: Arial, sans-serif;
    border: none;
    background: transparent;
    width: 80px;
    padding: 2px;
}

.ld-asgn-wb-input:focus { outline: none; }

.ld-asgn-wb-delete {
    background: none;
    border: none;
    color: #ccc;
    font-size: 12px;
    cursor: pointer;
    padding: 2px;
}

.ld-asgn-wb-delete:hover { color: #dc2626; }

/* Fill in the Blank */
.ld-asgn-fb-hint {
    font-size: 11px;
    color: #999;
    margin-bottom: 6px;
}

.ld-asgn-fb-preview {
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.8;
    color: #333;
    background: #fafafa;
    border-radius: 4px;
    margin-top: 6px;
}

/* Note */
.ld-asgn-note-body {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    background-color: #fffbeb;
    border-radius: 0 0 6px 6px;
}

.ld-asgn-note-icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 4px;
}

.ld-asgn-note-textarea {
    flex: 1;
    background-color: transparent !important;
}

/* Section toolbar */
.ld-asgn-section-toolbar {
    margin-top: 20px;
    padding: 12px 16px;
    background-color: #f8f9fa;
    border: 1px dashed #d0d0d0;
    border-radius: 6px;
}

.ld-asgn-section-toolbar-label {
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.ld-asgn-section-toolbar-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ld-asgn-section-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #555;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.ld-asgn-section-toolbar-btn:hover {
    border-color: #059669;
    color: #059669;
    background-color: #f0fdf4;
}

.ld-asgn-section-toolbar-icon {
    font-size: 13px;
}

.ld-asgn-section-toolbar-text {
    font-size: 11px;
}

/* Page break indicators */
.ld-asgn-doc-page-break {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 20px 0;
    padding: 0;
}

.ld-asgn-doc-page-break-line {
    flex: 1;
    height: 0;
    border-top: 2px dashed #ccc;
}

.ld-asgn-doc-page-break-label {
    font-size: 11px;
    color: #999;
    font-weight: 600;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: #f5f5f5;
    padding: 3px 12px;
    border-radius: 10px;
}

.ld-asgn-doc-page-break-qr {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

/* Teacher notes */
.ld-asgn-doc-teacher-notes {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px dashed #e0e0e0;
}

.ld-asgn-doc-teacher-notes-label {
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}


/* Document footer */
.ld-asgn-doc-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background-color: #f8f9fa;
    border-top: 1px solid #e8e8e8;
}

.ld-level-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}

.ld-level-badge.advanced { background-color: #d1fae5; color: #065f46; }
.ld-level-badge.proficient { background-color: #dbeafe; color: #1e40af; }
.ld-level-badge.developing { background-color: #fef3c7; color: #92400e; }

.ld-diff-banner {
    padding: 20px;
    background-color: #eef2ff;
    border: 1.5px solid #c7d2fe;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.ld-diff-icon { font-size: 28px; flex-shrink: 0; }
.ld-diff-text { flex: 1; }

.ld-diff-title {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin-bottom: 4px;
}

.ld-diff-desc {
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 12px;
}

.ld-diff-btn {
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 600;
    color: white;
    background-color: #6366f1;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.15s;
}

.ld-diff-btn:hover {
    background-color: #4f46e5;
}

.ld-diff-table-wrap {
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow-x: auto;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* Make non-split tab content fill available space */
#ld-differentiation.active,
#ld-submissions.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 12px 16px 52px;
}

#ld-analytics.active,
#ld-reflection.active {
    padding-bottom: 52px;
}

.ld-diff-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.ld-diff-table thead {
    background-color: #f8f9fa;
}

.ld-diff-table th {
    padding: 6px 6px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #666;
    letter-spacing: 0.3px;
    border: 1px solid #e0e0e0;
    border-bottom: 2px solid #ccc;
    vertical-align: top;
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #f8f9fa;
}

.ld-diff-table th.ld-diff-check-col {
    width: 30px;
}

.ld-diff-table th.ld-diff-student-col {
    width: 160px;
    min-width: 160px;
    text-align: left;
}
.ld-fullscreen .ld-diff-table th.ld-diff-student-col {
    width: 200px;
    min-width: 200px;
}

.ld-diff-table th.ld-diff-asgn-col {
    /* equal width — auto-distributed by table-layout:fixed */
}

.ld-diff-table th.ld-diff-combined-col {
    width: 100px;
    background-color: #f0fdf4;
}

/* Footer row */
.ld-diff-footer-row td {
    background-color: #f3f4f6;
    border-top: 2px solid #d1d5db;
    box-shadow: 0 -1px 3px rgba(0,0,0,0.06);
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: 8px 5px;
}

.ld-diff-footer-label {
    font-size: 11px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: center;
}

.ld-diff-footer-cell {
    text-align: center;
    vertical-align: middle;
}

.ld-diff-footer-actions {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
}

.ld-diff-footer-btn {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    background: white;
    color: #374151;
    transition: background-color 0.12s, border-color 0.12s, color 0.12s;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.ld-diff-footer-btn:hover {
    background-color: #f9fafb;
    border-color: #9ca3af;
}

.ld-diff-footer-btn.print {
    color: #1d4ed8;
    border-color: #bfdbfe;
}
.ld-diff-footer-btn.print:hover {
    background-color: #eff6ff;
    border-color: #60a5fa;
}

.ld-diff-footer-btn.push {
    color: #047857;
    border-color: #a7f3d0;
}
.ld-diff-footer-btn.push:hover {
    background-color: #ecfdf5;
    border-color: #10b981;
}
.ld-diff-footer-btn.push.pushed {
    background-color: #d1fae5;
    color: #047857;
    border-color: #6ee7b7;
    cursor: default;
}

.ld-diff-footer-btn.disabled,
.ld-diff-footer-btn:disabled {
    background-color: #f3f4f6;
    color: #9ca3af;
    border-color: #e5e7eb;
    cursor: not-allowed;
}
.ld-diff-footer-btn.push.pushed:disabled {
    background-color: #d1fae5;
    color: #047857;
    border-color: #6ee7b7;
    opacity: 1;
}

/* Combined column cell */
.ld-diff-combined-cell {
    text-align: center;
    background-color: #f0fdf4;
}

.ld-diff-table td {
    padding: 4px 5px;
    vertical-align: middle;
    border: 1px solid #e0e0e0;
}

.ld-diff-student-cell {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    white-space: normal;
    word-break: break-word;
    background-color: #f8f9fa;
    text-align: left;
}

/* Clickable student name */
.ld-diff-student-name {
    display: block;
    line-height: 1.3;
}
.ld-diff-student-name.clickable {
    color: #2563eb;
    cursor: pointer;
}
.ld-diff-student-name.clickable:hover {
    text-decoration: underline;
}

/* Notebook icon button under student name */
.ld-diff-notebook-btn {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 4px;
    font-size: 12px;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.ld-diff-notebook-btn:hover {
    opacity: 1;
}
.ld-diff-notebook-btn.disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

/* Actions row in view mode cells */
.ld-diff-cell-actions-row {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.ld-diff-cell-textarea {
    width: 100%;
    min-height: 54px;
    padding: 4px 6px;
    font-size: 12px;
    font-family: Arial, sans-serif;
    line-height: 1.4;
    color: #333;
    background-color: transparent;
    border: none;
    resize: vertical;
    box-sizing: border-box;
}

.ld-diff-cell-textarea:focus {
    outline: none;
    background-color: #fffde7;
}

.ld-diff-cell-textarea.empty-cell {
    color: #bbb;
}

/* Heat-map tints: soft background colors per cell once differentiation
   has been generated. Intensity is computed deterministically from the
   cell text (ldDiffComputeIntensity) — low = scaffolds/extensions only,
   high = drops/replacements/restructures. Tints transparent-ish so the
   embedded textarea/buttons stay readable. */
.ld-diff-cell-heat-low {
    background-color: #fef9c3; /* soft yellow */
}
.ld-diff-cell-heat-high {
    background-color: #fee2e2; /* soft red */
}
.ld-diff-cell-heat-low .ld-diff-cell-textarea:focus,
.ld-diff-cell-heat-high .ld-diff-cell-textarea:focus {
    background-color: rgba(255, 255, 255, 0.55);
}

/* Disabled column header */
.ld-diff-table th.ld-diff-col-disabled {
    color: #bbb;
}

/* Disabled cell */
.ld-diff-cell-disabled {
    background-color: #f9fafb !important;
}

.ld-diff-cell-off {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
}

.ld-diff-cell-off-text {
    font-size: 11px;
    color: #ccc;
    font-style: italic;
}

/* Checkbox column */
.ld-diff-check-col {
    width: 30px;
    min-width: 30px;
    max-width: 30px;
    text-align: center;
    border-right: 2px solid #ccc !important;
}

.ld-diff-check-cell {
    text-align: center;
    vertical-align: middle !important;
    border-right: 2px solid #ccc !important;
    background-color: #f8f9fa;
}

.ld-diff-check-col input[type="checkbox"],
.ld-diff-check-cell input[type="checkbox"] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: #059669;
}

/* Selected row highlight */
.ld-diff-row-selected td {
    background-color: #f0fdf4 !important;
}

/* Column header wrapper */
.ld-diff-col-header-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Top row: title + DIFF toggle side by side */
.ld-diff-col-top-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.ld-diff-col-title {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
    text-align: left;
}

/* DIFF toggle button */
.ld-diff-toggle-btn {
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid #d1d5db;
    cursor: pointer;
    white-space: nowrap;
    background-color: #e5e7eb;
    color: #888;
    transition: all 0.15s;
}

.ld-diff-toggle-btn:hover {
    background-color: #d1d5db;
    color: #666;
}

.ld-diff-toggle-btn.on {
    background-color: #059669;
    color: white;
    border-color: #059669;
}

.ld-diff-toggle-btn.on:hover {
    background-color: #047857;
}

/* Column action buttons — centered */
.ld-diff-col-actions {
    display: flex;
    gap: 3px;
    justify-content: center;
}

.ld-diff-col-btn {
    padding: 3px 8px;
    font-size: 9px;
    font-weight: 600;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
    background: white;
    color: #666;
    transition: all 0.15s;
}

.ld-diff-col-btn:hover:not([disabled]) {
    background-color: #f3f4f6;
}

.ld-diff-col-btn.active {
    background-color: #059669;
    color: white;
    border-color: #059669;
}

.ld-diff-col-btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Centered title for column header */
.ld-diff-col-title-centered {
    font-size: 11px;
    font-weight: 700;
    color: #666;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.3px;
    padding-bottom: 4px;
}

/* 4-button row below title */
.ld-diff-col-btn-row {
    display: flex;
    gap: 3px;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}

/* Generate button — purple for AI action */
.ld-diff-col-btn.ld-diff-btn-generate {
    background-color: #6366f1;
    color: white;
    border-color: #6366f1;
}
.ld-diff-col-btn.ld-diff-btn-generate:hover {
    background-color: #4f46e5;
}

/* Create button — green for finalize */
.ld-diff-col-btn.ld-diff-btn-create {
    background-color: #059669;
    color: white;
    border-color: #059669;
}
.ld-diff-col-btn.ld-diff-btn-create:hover:not([disabled]) {
    background-color: #047857;
}

/* View button — blue when active */
.ld-diff-col-btn.ld-diff-btn-view {
    background-color: #3b82f6;
    color: white;
    border-color: #3b82f6;
}
.ld-diff-col-btn.ld-diff-btn-view:hover {
    background-color: #2563eb;
}

/* Hyper-minimalist loading bar */
.ld-diff-loading-bar {
    width: 100%;
    height: 2px;
    background-color: #e5e7eb;
    border-radius: 1px;
    overflow: hidden;
    margin-top: 3px;
}
.ld-diff-loading-bar-fill {
    height: 100%;
    width: 40%;
    background-color: #6366f1;
    border-radius: 1px;
    animation: ldDiffLoadSlide 1.2s ease-in-out infinite;
}
@keyframes ldDiffLoadSlide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* Reset button — red, minimalist */
.ld-diff-col-btn.ld-diff-btn-reset {
    background: none;
    border: none;
    color: #dc2626;
    font-size: 8px;
    opacity: 0.7;
}
.ld-diff-col-btn.ld-diff-btn-reset:hover:not([disabled]) {
    background-color: #fef2f2;
    opacity: 1;
}
.ld-diff-col-btn.ld-diff-btn-reset[disabled] {
    color: #d1d5db;
    background: none;
    border: none;
    opacity: 0.35;
}

/* Toolbar buttons */
.ld-diff-toolbar-btn {
    padding: 7px 16px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}
.ld-diff-toolbar-btn.export {
    background-color: #6366f1;
    color: white;
    border-color: #6366f1;
}
.ld-diff-toolbar-btn.export:hover {
    background-color: #4f46e5;
}
.ld-diff-toolbar-btn.push {
    background-color: #059669;
    color: white;
    border-color: #059669;
}
.ld-diff-toolbar-btn.push:hover {
    background-color: #047857;
}

/* Action modal sections */
.ld-diff-modal-section {
    margin-bottom: 18px;
}
.ld-diff-modal-label {
    font-size: 12px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.ld-diff-modal-radio {
    display: block;
    font-size: 13px;
    color: #333;
    padding: 4px 0;
    cursor: pointer;
}
.ld-diff-modal-radio input[type="radio"] {
    margin-right: 6px;
}

/* Push modal assignment row */
.ld-diff-push-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
}
.ld-diff-push-date {
    font-size: 12px;
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    color: #333;
}

/* View mode cell content — pill buttons */
.ld-diff-cell-view {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    min-height: 36px;
    padding: 4px 0;
}

/* Minimalist text pills (View / Print / Push) used in differentiation cells */
.ld-diff-pill {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 5px 9px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #ffffff;
    color: #374151;
    cursor: pointer;
    transition: background-color 0.12s, border-color 0.12s, color 0.12s;
    letter-spacing: 0.2px;
    white-space: nowrap;
}
.ld-diff-pill:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}
.ld-diff-pill.view:hover {
    background: #eef2ff;
    border-color: #818cf8;
    color: #4338ca;
}
.ld-diff-pill.print:hover {
    background: #eff6ff;
    border-color: #60a5fa;
    color: #1d4ed8;
}
.ld-diff-pill.print.done {
    color: #6366f1;
    border-color: #c7d2fe;
}
.ld-diff-pill.push {
    color: #047857;
    border-color: #a7f3d0;
}
.ld-diff-pill.push:hover {
    background: #ecfdf5;
    border-color: #10b981;
}
.ld-diff-pill.push.pushed {
    background: #d1fae5;
    color: #047857;
    border-color: #6ee7b7;
    cursor: default;
}
.ld-diff-pill:disabled {
    cursor: not-allowed;
}
.ld-diff-pill.push.pushed:disabled {
    opacity: 1;
}

/* Finalized check */
.ld-diff-finalized {
    font-size: 12px;
    font-weight: 700;
    color: #059669;
    display: flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}

/* Status badge */
.ld-diff-status-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: center;
}

.ld-diff-status-badge.generated {
    background-color: #fef3c7;
    color: #92400e;
}

.ld-diff-status-badge.sent {
    background-color: #d1fae5;
    color: #065f46;
}

/* ===== Worksheet Preview Popup ===== */
.ld-diff-preview-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 10001;
    justify-content: center;
    align-items: center;
}

.ld-diff-preview-overlay.active {
    display: flex;
}

.ld-diff-preview-content {
    background: white;
    border-radius: 10px;
    width: 700px;
    max-width: 92vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.ld-diff-preview-header {
    padding: 16px 24px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ld-diff-preview-title {
    font-size: 16px;
    font-weight: 700;
    color: #333;
}

.ld-diff-preview-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}

.ld-diff-preview-close:hover {
    background-color: #f3f4f6;
    color: #333;
}

.ld-diff-preview-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background-color: #f3f4f6;
}

.ld-diff-preview-footer {
    padding: 14px 24px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Worksheet inside preview */
.ld-diff-worksheet {
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 32px 40px;
    max-width: 620px;
    margin: 0 auto;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ld-diff-ws-header {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 2px solid #333;
    margin-bottom: 16px;
}

.ld-diff-ws-field {
    font-size: 12px;
    color: #333;
}

.ld-diff-ws-label {
    font-weight: 700;
}

.ld-diff-ws-value {
    border-bottom: 1px solid #333;
    padding: 0 4px;
}

.ld-diff-ws-title {
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 16px;
    color: #333;
}

/* Worksheet heading layout (Name/Date/Period + QR) */
.ld-diff-ws-heading-layout {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #333;
    margin-bottom: 16px;
}

.ld-diff-ws-heading-left {
    flex: 1;
    min-width: 0;
}

.ld-diff-ws-heading-title-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.ld-diff-ws-heading-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
}

.ld-diff-ws-heading-subtitle {
    font-size: 12px;
    font-style: italic;
    color: #666;
}

.ld-diff-ws-heading-field-row {
    display: flex;
    align-items: baseline;
    margin-top: 10px;
}

.ld-diff-ws-heading-field {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.ld-diff-ws-heading-field-label {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
}

.ld-diff-ws-heading-field-value {
    font-size: 13px;
    color: #333;
    border-bottom: 1px solid #333;
    padding: 0 4px;
    min-width: 120px;
}

.ld-diff-ws-heading-field-blank {
    display: inline-block;
    border-bottom: 1px solid #333;
    min-width: 80px;
}

.ld-diff-ws-section {
    margin-bottom: 18px;
}

.ld-diff-ws-section-label {
    font-size: 11px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.ld-diff-ws-textarea {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1.6;
    color: #333;
    background-color: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    resize: vertical;
    box-sizing: border-box;
}

.ld-diff-ws-textarea:focus {
    outline: none;
    border-color: #059669;
    background-color: white;
}

.ld-diff-ws-lines {
    padding-top: 8px;
}

.ld-diff-ws-line {
    border-bottom: 1px solid #ccc;
    height: 28px;
}

/* Print-ready section styles */
.ld-print-section-divider {
    border-top: 1px solid #e0e0e0;
    margin: 16px 0;
}

.ld-print-question {
    font-size: 13px;
    line-height: 1.6;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.ld-print-directions {
    font-size: 13px;
    line-height: 1.6;
    color: #333;
    font-style: italic;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: #f9fafb;
    border-left: 3px solid #d1d5db;
    border-radius: 2px;
}

.ld-print-instructions {
    font-size: 13px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: #f9fafb;
    border-left: 3px solid #059669;
    border-radius: 2px;
}

.ld-print-note {
    font-size: 12px;
    line-height: 1.5;
    color: #666;
    font-style: italic;
    margin-bottom: 10px;
}

/* Multiple choice */
.ld-print-mc-options {
    margin: 4px 0 16px 20px;
}

.ld-print-mc-option {
    font-size: 13px;
    line-height: 1.8;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ld-print-mc-circle {
    display: inline-flex;
    width: 20px;
    height: 20px;
    border: 1.5px solid #333;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Matching */
.ld-print-matching {
    display: flex;
    gap: 32px;
    margin: 8px 0 16px;
}

.ld-print-matching-col {
    flex: 1;
}

.ld-print-matching-item {
    font-size: 13px;
    line-height: 2;
    color: #333;
}

.ld-print-matching-blank {
    margin-left: 8px;
    letter-spacing: 1px;
}

/* True/False */
.ld-print-tf-item {
    font-size: 13px;
    line-height: 2.2;
    color: #333;
}

.ld-print-tf-circles {
    margin-left: 12px;
}

.ld-print-tf-circle {
    display: inline-flex;
    width: 18px;
    height: 18px;
    border: 1.5px solid #333;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    margin: 0 2px;
}

/* Word bank */
.ld-print-word-bank {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 16px;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f9fafb;
}

.ld-print-wb-word {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    padding: 3px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: white;
}

/* Materials */
.ld-print-material {
    margin-bottom: 12px;
    padding: 10px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fafbfc;
}

.ld-print-material-title {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    margin-bottom: 4px;
}

.ld-print-material-desc {
    font-size: 12px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 6px;
}

.ld-print-material-content {
    font-size: 13px;
    line-height: 1.6;
    color: #333;
    font-family: Georgia, 'Times New Roman', serif;
}

/* Mat btn reused in preview footer */
.ld-diff-mat-btn {
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    background: white;
    color: #333;
    transition: background-color 0.15s;
}

.ld-diff-mat-btn:hover {
    background-color: #f3f4f6;
}

.ld-diff-mat-btn.send {
    background-color: #059669;
    color: white;
    border-color: #059669;
}

.ld-diff-mat-btn.send:hover {
    background-color: #047857;
}

.ld-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    text-align: center;
}

.ld-placeholder-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.ld-placeholder-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
}

.ld-placeholder-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    max-width: 420px;
}

.ld-reflection-quality {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.ld-quality-btn {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    background-color: white;
    border: 1.5px solid #e0e0e0;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.15s;
}

.ld-quality-btn:hover {
    border-color: #a7f3d0;
    background-color: #f0fdf4;
}

.ld-quality-btn.selected {
    border-color: #059669;
    background-color: #d1fae5;
    color: #065f46;
}

.ld-reflection-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}

.ld-save-row {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
    margin-top: 8px;
}

/* Collapsible dropdown sections */
.ld-dropdown-section {
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    /* Vertical rhythm is owned by the parent #ld-plan-form's flex gap;
       no per-section margin needed here. */
    margin-bottom: 0;
}

.ld-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    user-select: none;
}

.ld-dropdown-header:hover {
    color: #059669;
}

.ld-dropdown-chevron {
    font-size: 10px;
    color: #999;
    transition: transform 0.2s;
}

/* Yellow variant — matches the Batch Planner banner so Unit Plan
   Overview reads as a sibling banner. Same background, title color,
   uppercase + tracking, and chevron color as .ld-batch-notes-*. */
.ld-dropdown-section-yellow {
    background-color: #fefce8;
    border-color: #d1d5db;
}
.ld-dropdown-section-yellow .ld-dropdown-header {
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    color: #92400e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ld-dropdown-section-yellow .ld-dropdown-header:hover {
    background: #fef9c3;
    color: #92400e;
}
.ld-dropdown-section-yellow .ld-dropdown-chevron {
    color: #a16207;
}

.ld-dropdown-content {
    display: none;
    padding: 0 16px 14px 16px;
}

.ld-dropdown-content.open {
    display: block;
}

.ld-dropdown-content .ld-meta-row {
    gap: 16px;
}

.ld-dropdown-content .bg-label {
    font-size: 11px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.ld-dropdown-content .bg-value {
    font-size: 13px;
    color: #333;
    line-height: 1.5;
}

/* Apply to Lesson Plan button in chat */
.ld-apply-btn {
    display: block;
    margin-top: 10px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: white;
    background-color: #059669;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.ld-apply-btn:hover {
    background-color: #047857;
}

.ld-apply-btn.applied {
    background-color: #2563eb;
    cursor: default;
}

/* Nested dropdown sections */
.ld-dropdown-section.ld-nested {
    background-color: white;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    margin-top: 8px;
    margin-bottom: 0;
}

.ld-nested-header {
    font-size: 12px;
    color: #555;
    padding: 10px 14px;
}

.ld-dropdown-section.ld-nested .ld-dropdown-content {
    padding: 0 14px 12px 14px;
}

.ld-nested-header:hover {
    color: #059669;
}

/* Edit Curriculum button */
.ld-edit-overview-btn {
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #059669;
    background: white;
    border: 1px solid #059669;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.ld-edit-overview-btn:hover {
    background-color: #059669;
    color: white;
}

/* Microphone button */
.ld-chat-mic-btn {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 15px;
    padding: 4px 2px;
    transition: color 0.15s;
    flex-shrink: 0;
}

/* Settings gear in the chat header — opens AI Preferences (Lesson Plan
   category by default). Sits where the Admin Guidance pill used to
   live (right edge of the chat header), styled as a quiet ghost button
   so it doesn't compete visually with the assistant title. */
.ld-chat-prefs-btn {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 6px;
    color: #94a3b8;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    margin-left: 4px;
}
.ld-chat-prefs-btn:hover {
    color: #334155;
    background: #f1f5f9;
    border-color: #e2e8f0;
}
.ld-chat-prefs-btn:active { transform: translateY(0.5px); }
.ld-chat-prefs-btn svg { display: block; }

.ld-chat-mic-btn:hover { color: #059669; }

.ld-chat-mic-btn.recording {
    color: #dc2626;
    animation: ld-mic-pulse 1s ease-in-out infinite;
}

@keyframes ld-mic-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* File preview bar (above input area) */
.ld-chat-file-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid #e0e0e0;
    background-color: #f8f9fa;
    flex-shrink: 0;
}

.ld-file-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 11px;
    color: #555;
    max-width: 180px;
}

.ld-file-chip-thumb {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 3px;
}

.ld-file-chip-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.ld-file-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.ld-file-chip-remove {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 14px;
    padding: 0 2px;
    line-height: 1;
    flex-shrink: 0;
}

.ld-file-chip-remove:hover { color: #dc2626; }

/* Chat attachment display in messages */
.ld-chat-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.ld-chat-attachment {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    background: rgba(255,255,255,0.15);
    border-radius: 6px;
    font-size: 11px;
}

.ld-chat-attachment-img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
}

.ld-chat-attachment-icon {
    font-size: 20px;
}

.ld-chat-attachment-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========== SUBMISSIONS TAB ========== */

/* Student column wider to prevent name wrapping */
.ld-sub-student-col {
    width: 180px;
    min-width: 180px;
    text-align: left;
}

.ld-sub-student-cell {
    vertical-align: middle;
    padding: 6px 8px;
}

.ld-sub-student-name {
    font-size: 13px;
    font-weight: 600;
    color: #1a56db;
    cursor: pointer;
    white-space: nowrap;
}

.ld-sub-student-name:hover {
    text-decoration: underline;
}

/* Checkbox column — mirrors differentiation */
.ld-sub-check-col {
    width: 30px;
    min-width: 30px;
    max-width: 30px;
    text-align: center;
    border-right: 2px solid #ccc !important;
}

.ld-sub-check-cell {
    text-align: center;
    vertical-align: middle !important;
    border-right: 2px solid #ccc !important;
    background-color: #f8f9fa;
}

.ld-sub-check-col input[type="checkbox"],
.ld-sub-check-cell input[type="checkbox"] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: #059669;
}

.ld-sub-row-selected td {
    background-color: #f0fdf4 !important;
}

/* Assignment cell — contains 3 sub-parts stacked */
.ld-sub-cell {
    text-align: center;
    vertical-align: middle;
    padding: 6px 4px;
    border-left: 1px solid #e5e7eb;
}

.ld-sub-cell-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

/* Submitted indicator */
.ld-sub-indicator {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ld-sub-indicator-yes {
    color: #059669;
}

.ld-sub-indicator-no {
    color: #d1d5db;
}

/* Score on 0-10 scale, color-coded */
.ld-sub-score {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.ld-sub-score-high { color: #047857; }      /* 8.0-10.0 green */
.ld-sub-score-mid  { color: #d97706; }      /* 5.0-7.9 amber */
.ld-sub-score-low  { color: #dc2626; }      /* 0-4.9 red */
.ld-sub-score-none { color: #d1d5db; font-size: 12px; font-weight: 400; }

/* View button */
.ld-sub-view-btn {
    font-size: 9px;
    font-weight: 600;
    color: #6366f1;
    background: none;
    border: 1px solid #c7d2fe;
    border-radius: 3px;
    padding: 1px 6px;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ld-sub-view-btn:hover {
    background-color: #eef2ff;
    border-color: #6366f1;
}

/* Missing cell */
.ld-sub-missing {
    color: #d1d5db;
    font-size: 14px;
}

.ld-sub-missing .ld-sub-cell-inner {
    opacity: 0.5;
}

/* Memory notes column */
.ld-sub-memory-col {
    width: 50px;
    min-width: 50px;
    text-align: center;
    border-left: 2px solid #ccc !important;
}

.ld-sub-memory-cell {
    text-align: center;
    vertical-align: middle !important;
    border-left: 2px solid #ccc !important;
}

/* Detail panel */
.ld-sub-detail-row td {
    padding: 0 !important;
    background-color: #f8f9fa;
}

.ld-sub-detail {
    background: #f8f9fa;
    border-top: 2px solid #059669;
    padding: 20px 24px;
}

/* Footer row — mirrors differentiation footer */
.ld-sub-footer-row td {
    background-color: #f3f4f6;
    border-top: 2px solid #d1d5db;
    box-shadow: 0 -1px 3px rgba(0,0,0,0.06);
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: 8px 10px;
}

.ld-sub-footer-label {
    font-size: 11px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ld-sub-footer-stats {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.ld-sub-footer-stat {
    font-size: 12px;
    color: #333;
    font-weight: 600;
}

.ld-sub-footer-stat span {
    font-weight: 400;
    color: #666;
}

.ld-sub-footer-btn {
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 600;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    cursor: pointer;
    background: #059669;
    color: white;
    border-color: #059669;
    transition: all 0.15s;
    white-space: nowrap;
}

.ld-sub-footer-btn:hover {
    background: #047857;
}

.ld-sub-footer-btn.disabled,
.ld-sub-footer-btn:disabled {
    background-color: #e5e7eb;
    color: #9ca3af;
    border-color: #d1d5db;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Badge styles (kept for detail panel) */
.ld-sub-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 8px;
    border-radius: 10px;
}

.ld-sub-badge-submitted {
    background-color: #dbeafe;
    color: #1d4ed8;
}

.ld-sub-badge-graded {
    background-color: #d1fae5;
    color: #047857;
}

/* ========== ANALYTICS TAB ========== */

/* ----- Students to watch (flags for next class) ----- */
.ld-flags-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-left: 3px solid #2f6844;
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 22px;
}
.ld-flags-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}
.ld-flags-title {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}
.ld-flags-sub {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.5;
    margin-top: 4px;
    max-width: 560px;
}
.ld-flags-headact {
    display: inline-flex;
    gap: 8px;
    flex-shrink: 0;
}
.ld-flags-btn {
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1.3;
    transition: all 0.15s;
}
.ld-flags-btn-ghost {
    color: #4b5563;
    background: #fff;
    border: 1px solid #d1d5db;
}
.ld-flags-btn-ghost:hover { color: #2f6844; border-color: #2f6844; }
.ld-flags-btn-primary {
    color: #fff;
    background: #2f6844;
    border: 1px solid #2f6844;
}
.ld-flags-btn-primary:hover { background: #264f35; border-color: #264f35; }
.ld-flags-btn-primary:disabled { opacity: 0.6; cursor: default; }
.ld-flags-loading,
.ld-flags-empty {
    padding: 14px 0;
    color: #6b7280;
    font-size: 13px;
    text-align: center;
}
.ld-flags-empty strong { color: #2f6844; font-weight: 600; }
.ld-flags-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ld-flag-row {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid #f3f4f6;
}
.ld-flag-row:first-child { border-top: 0; padding-top: 4px; }
.ld-flag-sev {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
    padding-top: 4px;
}
.ld-flag-sevdot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #e5e7eb;
    cursor: pointer;
    box-shadow: 0 0 0 1px #d1d5db;
    padding: 0;
    transition: transform 0.15s, box-shadow 0.15s;
}
.ld-flag-sevdot-red    { background: #c2410c; }
.ld-flag-sevdot-yellow { background: #c98a00; }
.ld-flag-sevdot-green  { background: #2f6844; }
.ld-flag-sevdot:not(.ld-flag-sev-on) { opacity: 0.35; }
.ld-flag-sevdot:hover { transform: scale(1.1); opacity: 0.8; }
.ld-flag-sev-on {
    opacity: 1 !important;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px currentColor;
    transform: scale(1.05);
}
.ld-flag-sevdot-red.ld-flag-sev-on    { color: #c2410c; }
.ld-flag-sevdot-yellow.ld-flag-sev-on { color: #c98a00; }
.ld-flag-sevdot-green.ld-flag-sev-on  { color: #2f6844; }
.ld-flag-body {
    flex: 1;
    min-width: 0;
}
.ld-flag-rowtop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.ld-flag-name {
    font-size: 13px;
    font-weight: 600;
    color: #111;
}
.ld-flag-dismiss {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 18px;
    line-height: 1;
    padding: 2px 8px;
    cursor: pointer;
    border-radius: 4px;
}
.ld-flag-dismiss:hover { background: #fef2f2; color: #b91c1c; }
.ld-flag-reason {
    width: 100%;
    font-family: inherit;
    font-size: 12.5px;
    color: #333;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 6px 8px;
    line-height: 1.45;
    resize: vertical;
    min-height: 28px;
}
.ld-flag-reason:focus {
    outline: none;
    border-color: #2f6844;
    background: #fff;
}
.ld-flag-meta {
    font-size: 10.5px;
    color: #9ca3af;
    margin-top: 4px;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    font-weight: 600;
}
.ld-flags-add {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e5e7eb;
}
.ld-flags-add-select {
    width: 100%;
    font-family: inherit;
    font-size: 12.5px;
    padding: 6px 10px;
    border: 1px dashed #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #4b5563;
    cursor: pointer;
}
.ld-flags-add-select:hover { border-color: #2f6844; color: #2f6844; }

.ld-analytics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.ld-analytics-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.ld-analytics-card-label {
    font-size: 11px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.ld-analytics-card-value {
    font-size: 24px;
    font-weight: 700;
    color: #333;
}

.ld-analytics-card-sub {
    font-size: 11px;
    color: #999;
    margin-top: 2px;
}

.ld-analytics-breakdown-card {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 8px;
}

.ld-analytics-progress-track {
    width: 100%;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}

.ld-analytics-progress-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* ========== NOTEBOOK TAB (ld-nb-*) ========== */

/* Tab content override */
.ld-nb-tab-content { padding: 0 !important; }
.ld-nb-tab-content.active {
    display: flex !important;
    flex: 1;
    min-height: 0;
}

/* Desk background */
.ld-nb-desk {
    flex: 1;
    min-height: 0;
    background-color: #e8e0d4;
    background-image: radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.08) 0%, transparent 70%);
    padding: 20px 40px;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

/* Notebook spread */
.ld-nb-spread {
    display: flex;
    max-width: 1200px;
    width: 100%;
    min-height: 0;
    position: relative;
    perspective: 2500px;
}

/* Pages - shared */
.ld-nb-page {
    background-color: #fefcf8;
    background-image:
        repeating-linear-gradient(
            transparent, transparent 27px,
            rgba(200, 195, 185, 0.25) 27px,
            rgba(200, 195, 185, 0.25) 28px
        );
    background-position: 0 12px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
}

/* Left page */
.ld-nb-page-left {
    flex: 1;
    border-radius: 6px 0 0 6px;
    box-shadow: -3px 0 8px -4px rgba(0,0,0,0.08) inset, -4px 4px 16px rgba(0,0,0,0.10);
}
.ld-nb-page-left::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 1px;
    background-color: rgba(220, 80, 80, 0.12);
}

/* Right page */
.ld-nb-page-right {
    flex: 1;
    border-radius: 0 6px 6px 0;
    box-shadow: 3px 0 8px -4px rgba(0,0,0,0.08) inset, 4px 4px 16px rgba(0,0,0,0.10);
}

/* Spine */
.ld-nb-spine {
    width: 28px;
    flex-shrink: 0;
    background: linear-gradient(to right,
        #d6cfc4 0%, #c8bfb2 15%, #bab0a2 30%, #a89e90 50%,
        #bab0a2 70%, #c8bfb2 85%, #d6cfc4 100%);
    position: relative;
    z-index: 2;
    box-shadow: -3px 0 6px -2px rgba(0,0,0,0.2), 3px 0 6px -2px rgba(0,0,0,0.2),
                inset 0 0 8px rgba(0,0,0,0.1);
}
.ld-nb-spine::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background-image: repeating-linear-gradient(to bottom,
        transparent 0px, transparent 8px,
        rgba(0,0,0,0.15) 8px, rgba(0,0,0,0.15) 12px,
        transparent 12px, transparent 20px);
}

/* Right binder tabs */
.ld-nb-binder-tabs-right {
    position: absolute;
    top: 0;
    left: 100%;
    display: flex;
    flex-direction: column;
    z-index: 5;
    pointer-events: none;
    align-items: flex-start;
    padding-top: 20px;
    gap: 6px;
}
.ld-nb-binder-tab {
    pointer-events: all;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    padding: 16px 6px;
    background-color: #d6cfc4;
    border-radius: 0 6px 6px 0;
    border: 1px solid #c0b8ac;
    border-left: none;
    box-shadow: 2px 1px 4px rgba(0,0,0,0.08);
    transition: all 0.2s;
}
.ld-nb-binder-tab:hover { background-color: #c8bfb2; }
.ld-nb-binder-tab.active .ld-nb-binder-tab-text { color: white; }

/* Per-section tab colors */
.ld-nb-binder-tab[data-section="overview"] { background-color: #ddd6e8; }
.ld-nb-binder-tab[data-section="overview"].active { background-color: #6366f1; border-color: #4f46e5; }
.ld-nb-binder-tab[data-section="doNow"] { background-color: #dde8d6; }
.ld-nb-binder-tab[data-section="doNow"].active { background-color: #059669; border-color: #047857; }
.ld-nb-binder-tab[data-section="classNotes"] { background-color: #d6dde0; }
.ld-nb-binder-tab[data-section="classNotes"].active { background-color: #0284c7; border-color: #0369a1; }
.ld-nb-binder-tab[data-section="exitTicket"] { background-color: #e0d6da; }
.ld-nb-binder-tab[data-section="exitTicket"].active { background-color: #c2410c; border-color: #9a3412; }
.ld-nb-binder-tab[data-section="math"] { background-color: #d6d8e8; }
.ld-nb-binder-tab[data-section="math"].active { background-color: #4f46e5; border-color: #4338ca; }

/* Binder tab text */
.ld-nb-binder-tab-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
}
.ld-nb-binder-tab-icon {
    font-size: 18px;
    line-height: 1;
}

/* Page headers */
.ld-nb-left-header {
    padding: 12px 20px;
    border-bottom: 2px solid #e0e0e0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ld-nb-left-header-title { font-size: 15px; font-weight: 700; color: #333; }
.ld-nb-left-header-sep { color: #d0d0d0; font-size: 20px; }
.ld-nb-left-header-lesson { font-size: 14px; color: #555; }

.ld-nb-right-header {
    padding: 12px 20px;
    border-bottom: 2px solid #e0e0e0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ld-nb-right-header-left { display: flex; align-items: center; gap: 10px; }
.ld-nb-right-header-title { font-size: 15px; font-weight: 700; color: #333; text-transform: uppercase; letter-spacing: 0.5px; }
.ld-nb-right-header-date { font-size: 14px; font-weight: 600; color: #059669; }

/* Scrollable content areas */
.ld-nb-left-content, .ld-nb-right-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px 24px 20px;
    min-height: 0;
}
.ld-nb-left-content::-webkit-scrollbar, .ld-nb-right-content::-webkit-scrollbar { width: 5px; }
.ld-nb-left-content::-webkit-scrollbar-track, .ld-nb-right-content::-webkit-scrollbar-track { background: transparent; }
.ld-nb-left-content::-webkit-scrollbar-thumb, .ld-nb-right-content::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
.ld-nb-left-content::-webkit-scrollbar-thumb:hover, .ld-nb-right-content::-webkit-scrollbar-thumb:hover { background: #aaa; }

/* Section content styles */
.ld-nb-instructions {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    padding: 10px 14px;
    background-color: #f8f9fa;
    border-radius: 4px;
    border-left: 3px solid #e0e0e0;
    margin-bottom: 14px;
}
.ld-nb-textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background-color: #fefcf8;
    color: #333;
    resize: vertical;
    min-height: 80px;
    outline: none;
    transition: border-color 0.2s, background-color 0.2s;
    box-sizing: border-box;
}
.ld-nb-textarea:focus {
    border-color: #059669;
    background-color: #fff;
    box-shadow: 0 0 0 2px rgba(5,150,105,0.08);
}
.ld-nb-question {
    margin-bottom: 16px;
}
.ld-nb-question-label {
    font-size: 12px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.ld-nb-question-text {
    font-size: 14px;
    line-height: 1.5;
    color: #444;
    margin-bottom: 8px;
}
.ld-nb-model-label {
    font-size: 11px;
    font-weight: 700;
    color: #059669;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.ld-nb-teacher-notes-label {
    font-size: 11px;
    font-weight: 700;
    color: #6366f1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    margin-top: 16px;
}
.ld-nb-save-indicator {
    font-size: 11px;
    color: #999;
    text-align: right;
    padding: 4px 0;
}
.ld-nb-save-indicator.saving { color: #2563eb; }
.ld-nb-save-indicator.saved { color: #059669; }

/* Overview styles */
.ld-nb-overview-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 14px;
}
.ld-nb-overview-card-title {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
}
.ld-nb-section-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ld-nb-section-list li {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.15s;
    border-radius: 4px;
}
.ld-nb-section-list li:hover { background: #f8f9fa; }
.ld-nb-section-list li:last-child { border-bottom: none; }
.ld-nb-section-icon { font-size: 16px; }
.ld-nb-section-name { font-weight: 600; flex: 1; }
.ld-nb-section-arrow { color: #ccc; font-size: 14px; }

/* Diff badge */
.ld-nb-diff-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    background-color: #fef3c7;
    color: #92400e;
    cursor: pointer;
    margin-top: 8px;
}
.ld-nb-diff-badge:hover { background-color: #fde68a; }

/* Status bar */
.ld-nb-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
}
.ld-nb-status-label {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Section prompt block */
.ld-nb-prompt-block {
    padding: 12px 16px;
    border-left: 3px solid #059669;
    background-color: #f2faf7;
    border-radius: 0 6px 6px 0;
    margin-bottom: 16px;
}
.ld-nb-prompt-label {
    font-size: 12px;
    font-weight: 700;
    color: #059669;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.ld-nb-prompt-text {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
}

/* Left page tab bar */
.ld-nb-left-tabs {
    display: flex;
    gap: 4px;
    background-color: #e8e2da;
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 14px;
}
.ld-nb-left-tab {
    flex: 1;
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
    cursor: pointer;
    border: none;
    border-radius: 6px;
    transition: all 0.2s;
    background-color: transparent;
    font-family: Arial, sans-serif;
    text-align: center;
}
.ld-nb-left-tab:hover { background-color: #d6cfc4; color: #555; }
.ld-nb-left-tab.active { background-color: #059669; color: white; box-shadow: 0 1px 3px rgba(5, 150, 105, 0.3); }

/* Page flip animation */
.ld-nb-page-flip-overlay {
    position: absolute;
    top: 0;
    z-index: 20;
    transform-style: preserve-3d;
    pointer-events: none;
}
.ld-nb-page-flip-overlay.flip-forward {
    transform-origin: left center;
    animation: ldNbFlipForward 0.7s ease-in-out forwards;
}
.ld-nb-page-flip-overlay.flip-backward {
    transform-origin: right center;
    animation: ldNbFlipBackward 0.7s ease-in-out forwards;
}
.ld-nb-page-flip-face {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    backface-visibility: hidden;
    background-color: #fefcf8;
    background-image: repeating-linear-gradient(transparent, transparent 27px, rgba(200,195,185,0.25) 27px, rgba(200,195,185,0.25) 28px);
    background-position: 0 12px;
}
.ld-nb-flip-front-right { border-radius: 0 6px 6px 0; box-shadow: 2px 0 12px rgba(0,0,0,0.15); }
.ld-nb-flip-back-right { transform: rotateY(180deg); border-radius: 6px 0 0 6px; box-shadow: -2px 0 12px rgba(0,0,0,0.15); }
.ld-nb-flip-front-left { border-radius: 6px 0 0 6px; box-shadow: -2px 0 12px rgba(0,0,0,0.15); }
.ld-nb-flip-back-left { transform: rotateY(-180deg); border-radius: 0 6px 6px 0; box-shadow: 2px 0 12px rgba(0,0,0,0.15); }

@keyframes ldNbFlipForward {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(-180deg); }
}
@keyframes ldNbFlipBackward {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(180deg); }
}

.ld-nb-page.flipping {
    opacity: 0.3;
    transition: opacity 0.15s ease;
}

.ld-nb-page-content-fade {
    opacity: 0;
    transition: opacity 0.4s ease;
}
.ld-nb-page-content-fade.visible {
    opacity: 1;
}

/* Empty state */
.ld-nb-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #999;
}
.ld-nb-empty-state-icon { font-size: 40px; margin-bottom: 10px; }
.ld-nb-empty-state-title { font-size: 15px; font-weight: 700; color: #666; margin-bottom: 6px; }
.ld-nb-empty-state-text { font-size: 13px; line-height: 1.5; color: #999; }

/* Material group header */
.ld-nb-material-group {
    font-size: 12px;
    font-weight: 700;
    color: #059669;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 16px 0 8px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid #e0e0e0;
}
.ld-nb-material-group:first-child { margin-top: 0; }

/* ========== MATERIALS TAB ========== */

.ld-mat-container {
    padding: 20px 24px;
}

.ld-mat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.ld-mat-title {
    font-size: 16px;
    font-weight: 700;
    color: #333;
}

.ld-mat-count {
    font-size: 12px;
    color: #999;
    margin-left: auto;
}

.ld-mat-add-btn {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: white;
    background-color: #059669;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.ld-mat-add-btn:hover {
    background-color: #047857;
}

/* Empty state */
.ld-mat-empty {
    text-align: center;
    padding: 48px 24px;
    color: #999;
}

.ld-mat-empty-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.ld-mat-empty-title {
    font-size: 16px;
    font-weight: 700;
    color: #666;
    margin-bottom: 8px;
}

.ld-mat-empty-desc {
    font-size: 13px;
    color: #999;
    line-height: 1.6;
    max-width: 360px;
    margin: 0 auto;
}

/* Section grouping */
.ld-mat-section {
    margin-bottom: 20px;
}

.ld-mat-section-label {
    font-size: 11px;
    font-weight: 700;
    color: #059669;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e0e0e0;
}

/* Material card */
.ld-mat-card {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
    /* Clip AI-generated content (long unbroken URLs, wide tables, oversized
       images) so it can't burst out past the card border into the notebook
       binding area. The header still owns its overflow via ellipsis. */
    box-sizing: border-box;
    overflow: hidden;
    min-width: 0;
}

.ld-mat-card:hover {
    border-color: #ccc;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.ld-mat-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ld-mat-card-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.ld-mat-card-info {
    flex: 1;
    min-width: 0;
}

.ld-mat-card-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ld-mat-card-type {
    font-size: 11px;
    color: #999;
    margin-top: 2px;
}

.ld-mat-card-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}

.ld-mat-card:hover .ld-mat-card-actions {
    opacity: 1;
}

.ld-mat-card-action {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #999;
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.ld-mat-card-action:hover {
    color: #333;
    background-color: #f0f0f0;
    border-color: #e0e0e0;
}

.ld-mat-card-action.delete:hover {
    color: #dc2626;
    background-color: #fef2f2;
    border-color: #fecaca;
}

/* Labeled "Open" chip — replaces the icon-only ↗ for library-linked
   materials so the affordance reads as a clear button instead of a
   tiny glyph that competes with ✎/× for attention. */
.ld-mat-card-openext {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    font-family: inherit;
}
.ld-mat-card-openext:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
    color: #0f172a;
}
.ld-mat-card-openext-glyph {
    font-size: 13px;
    line-height: 1;
}

.ld-mat-card-content {
    font-size: 13px;
    color: #333;
    line-height: 1.6;
    margin-top: 8px;
    padding: 10px 12px;
    background: #f8f9fa;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    white-space: pre-wrap;
    /* overflow-wrap handles long URLs / unbroken strings in AI-generated
       content; max-width clamps any rogue child width:100% from spilling
       past the card border. */
    overflow-wrap: anywhere;
    word-break: break-word;
    box-sizing: border-box;
    max-width: 100%;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}
.ld-mat-card-content > *,
.ld-mat-card-content table,
.ld-mat-card-content img {
    max-width: 100%;
    box-sizing: border-box;
}
.ld-mat-card-content table {
    /* AI sometimes emits wide tables — collapse cells aggressively before
       letting them push the card past its right edge. */
    table-layout: fixed;
    width: 100%;
    word-break: break-word;
}

.ld-mat-card-desc {
    font-size: 12px;
    color: #888;
    font-style: italic;
    line-height: 1.5;
    margin-top: 6px;
}

.ld-mat-card-link {
    font-size: 12px;
    margin-top: 6px;
}

.ld-mat-card-link a {
    color: #2563eb;
    text-decoration: none;
}

.ld-mat-card-link a:hover {
    text-decoration: underline;
}

.ld-mat-card-file {
    font-size: 12px;
    color: #666;
    margin-top: 6px;
}

/* --- Rich Media Previews --- */
.ld-mat-media-preview {
    margin-top: 8px;
    border-radius: 6px;
    overflow: hidden;
}

.ld-mat-media-image img {
    width: 100%;
    max-height: 240px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e8e8e8;
    cursor: pointer;
    transition: opacity 0.15s;
}

.ld-mat-media-image img:hover {
    opacity: 0.92;
}

.ld-mat-media-youtube {
    border-radius: 6px;
    overflow: hidden;
}

.ld-mat-yt-thumb {
    position: relative;
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
}

.ld-mat-yt-thumb img {
    width: 100%;
    display: block;
    border-radius: 6px;
}

.ld-mat-yt-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 40px;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    transition: background 0.2s;
}

.ld-mat-yt-thumb:hover .ld-mat-yt-play {
    background: rgba(220, 38, 38, 0.9);
}

.ld-mat-yt-playing {
    cursor: default;
}

.ld-mat-yt-playing iframe {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 6px;
}

.ld-mat-media-video video {
    width: 100%;
    max-height: 240px;
    border-radius: 6px;
    border: 1px solid #e8e8e8;
}

.ld-mat-media-audio {
    background: #f8f9fa;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: 10px 12px;
}

.ld-mat-audio-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.ld-mat-audio-icon {
    font-size: 18px;
}

.ld-mat-audio-name {
    font-size: 12px;
    color: #666;
}

.ld-mat-media-audio audio {
    width: 100%;
    height: 36px;
}

.ld-mat-media-pdf {
    background: #fef7f0;
    border: 1px solid #f0dcc8;
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
}

.ld-mat-pdf-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.ld-mat-pdf-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.ld-mat-pdf-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ld-mat-pdf-open {
    background: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: #666;
    padding: 2px 6px;
    line-height: 1;
    transition: all 0.15s;
}

.ld-mat-pdf-open:hover {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

.ld-mat-pdf-embed {
    width: 100%;
    height: 500px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
}

.ld-mat-form-pdf-preview {
    margin: 8px 0;
}

/* AI placeholder indicator */
.ld-mat-placeholder {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 14px;
    background: #f0fdf4;
    border: 1px dashed #86efac;
    border-radius: 6px;
    font-size: 12px;
    color: #059669;
    font-style: italic;
}

.ld-mat-placeholder-icon {
    font-size: 18px;
}

/* Image lightbox */
.ld-mat-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ld-mat-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.ld-mat-lightbox-close {
    position: absolute;
    top: 16px;
    right: 24px;
    font-size: 32px;
    color: #fff;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s;
}

.ld-mat-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* --- Drop Zone (empty state) --- */
.ld-mat-dropzone {
    border: 2px dashed #d0d0d0;
    border-radius: 8px;
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    margin: 4px 0 8px;
}

.ld-mat-dropzone:hover {
    border-color: #059669;
    background: #f0fdf4;
}

.ld-mat-dropzone-icon {
    font-size: 28px;
    margin-bottom: 6px;
    opacity: 0.5;
}

.ld-mat-dropzone-text {
    font-size: 13px;
    color: #666;
}

.ld-mat-dropzone-link {
    color: #059669;
    font-weight: 600;
    cursor: pointer;
}

.ld-mat-dropzone-link:hover {
    text-decoration: underline;
}

.ld-mat-dropzone-hint {
    font-size: 11px;
    color: #aaa;
    margin-top: 4px;
}

/* Section drag-over highlight */
.ld-mat-section-dragover {
    background: #f0fdf4;
    border-radius: 8px;
    box-shadow: inset 0 0 0 2px #059669;
}

/* --- Form Drop Zone --- */
.ld-mat-form-dropzone {
    border: 2px dashed #d0d0d0;
    border-radius: 6px;
    padding: 20px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.ld-mat-form-dropzone:hover,
.ld-mat-form-dropzone-active {
    border-color: #059669;
    background: #f0fdf4;
}

.ld-mat-form-dropzone-content {
    font-size: 13px;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}

.ld-mat-form-dropzone-icon {
    font-size: 18px;
    margin-right: 4px;
}

.ld-mat-form-dropzone-browse {
    color: #059669;
    font-weight: 600;
    cursor: pointer;
}

.ld-mat-form-dropzone-browse:hover {
    text-decoration: underline;
}

/* Form image preview */
.ld-mat-form-preview {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    background: #fafafa;
}

.ld-mat-form-preview-img {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    display: block;
    cursor: pointer;
}

.ld-mat-form-preview-img:hover {
    opacity: 0.92;
}

.ld-mat-form-preview-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-top: 1px solid #e8e8e8;
    background: #fff;
}

.ld-mat-form-file-attached {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.ld-mat-form-file-remove {
    color: #dc2626 !important;
    border-color: #fecaca !important;
}

.ld-mat-form-file-remove:hover {
    background-color: #fef2f2 !important;
}

/* --- Type Picker (fixed overlay dropdown) --- */
.ld-mat-picker {
    position: fixed;
    z-index: 99999;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 6px 0;
    min-width: 240px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.ld-mat-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.1s;
}

.ld-mat-picker-item:hover {
    background: #f0fdf4;
}


.ld-mat-picker-icon {
    font-size: 18px;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.ld-mat-picker-info {
    flex: 1;
    min-width: 0;
}

.ld-mat-picker-label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.ld-mat-picker-desc {
    font-size: 11px;
    color: #999;
    line-height: 1.3;
}

/* --- Form Header with Type Badge --- */
.ld-mat-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.ld-mat-form-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ld-mat-form-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #059669;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 12px;
}

.ld-mat-form-change-type {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    background: none;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    padding: 3px 10px;
    cursor: pointer;
    transition: all 0.15s;
}

.ld-mat-form-change-type:hover {
    color: #333;
    border-color: #999;
    background: #f5f5f5;
}

/* YouTube preview in form */
.ld-mat-form-yt-preview {
    margin-bottom: 12px;
    border-radius: 6px;
    overflow: hidden;
}

.ld-mat-form-yt-preview img {
    width: 100%;
    display: block;
    border-radius: 6px;
    border: 1px solid #e8e8e8;
}

/* Audio preview in form */
.ld-mat-form-audio-preview {
    margin-bottom: 12px;
}

.ld-mat-form-audio-preview audio {
    width: 100%;
    height: 36px;
}

/* Material form (create/edit) */
.ld-mat-form {
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 12px;
}

.ld-mat-form-title {
    font-size: 14px;
    font-weight: 700;
    color: #333;
}

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

.ld-mat-form-group label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.ld-mat-form-group input[type="text"],
.ld-mat-form-group textarea {
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background-color: white;
    color: #333;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ld-mat-form-group input[type="text"]:focus,
.ld-mat-form-group textarea:focus {
    outline: none;
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
}

.ld-mat-form-group textarea {
    resize: vertical;
    line-height: 1.5;
}

.ld-mat-form-group select {
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background-color: white;
    color: #333;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
    transition: border-color 0.2s;
}

.ld-mat-form-group select:focus {
    outline: none;
    border-color: #059669;
}

.ld-mat-form-row {
    display: flex;
    gap: 12px;
}

.ld-mat-form-file-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ld-mat-form-file-name {
    font-size: 12px;
    color: #666;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ld-mat-form-file-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #333;
    background-color: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s;
}

.ld-mat-form-file-btn:hover {
    background-color: #f0f0f0;
}

.ld-mat-form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.ld-mat-form-cancel {
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    background: none;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.ld-mat-form-cancel:hover {
    background-color: #f0f0f0;
}

.ld-mat-form-save {
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    color: white;
    background-color: #059669;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.ld-mat-form-save:hover {
    background-color: #047857;
}

/* ===== Lesson Modal Footer - anchored to bottom-right over chat panel ===== */
#ld-footer {
    justify-content: flex-end;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 340px; /* matches split-right-panel width */
    border-top: none;
    background: white;
    z-index: 10;
    padding: 12px 16px;
    box-sizing: border-box;
}

/* Full-width footer bar for non-split tabs (Differentiation, Submissions, Analytics, Reflection) */
#ld-footer.ld-footer-full {
    width: 100%;
    border-top: 1px solid #e0e0e0;
}

/* Prechat row — Cancel / Skip directly to chat / ✨ Generate from AI.
   Mirrors the unit-plan modal's footer trio (.up-footer-* buttons).
   Sibling .ld-footer-right is hidden while this is on screen
   (_ldUpdateFooterMode does the swap). */
.ld-footer-prechat {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    width: 100%;
}
/* The default 340px footer width is too narrow for the three prechat
   buttons. Grow to content while prechat is on, keep min-width matched
   to the chat panel below so the bottom-right anchor still feels stable. */
#ld-footer.ld-footer-prechat-on {
    width: auto;
    min-width: 340px;
    max-width: 100%;
}

/* Right panel needs bottom padding so content doesn't hide behind footer */
.lesson-detail-modal .split-right-panel {
    padding-bottom: 52px;
}
.ld-footer-save-btn {
    padding: 10px 28px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
}
.ld-footer-save-btn:hover {
    background: #f9fafb;
    border-color: #059669;
    color: #059669;
}
.ld-footer-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Finalize Confirmation Popup */
.ld-finalize-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ld-finalize-popup {
    background: white;
    border-radius: 12px;
    padding: 28px 32px;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.ld-finalize-icon {
    font-size: 32px;
    text-align: center;
    margin-bottom: 8px;
}
.ld-finalize-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    margin: 0 0 8px;
}
.ld-finalize-desc {
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    margin: 0 0 12px;
}
.ld-finalize-list {
    margin: 0 0 20px;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.6;
    color: #333;
}
.ld-finalize-list li { margin-bottom: 6px; }
.ld-finalize-list strong { color: #1a1a1a; }
.ld-finalize-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.ld-finalize-cancel {
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: white;
    color: #333;
    cursor: pointer;
}
.ld-finalize-cancel:hover { border-color: #999; }
.ld-finalize-confirm {
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    background: #059669;
    color: white;
    cursor: pointer;
}
.ld-finalize-confirm:hover { background: #047857; }

/* Inline tab-bar checkbox — lives INSIDE the .modal-tab button for
   Activities + Differentiation, right after the label. Empty box in
   draft state, filled green with white ✓ when complete. Clickable
   separately from the tab itself (the inline element stops event
   propagation so the tab switch doesn't fire on a checkbox click). */
.lesson-detail-modal .ld-tab-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1.5px solid #b0b8b3;
    border-radius: 6px;
    background: #fff;
    margin-left: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
    vertical-align: middle;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    color: #fff;
}
.lesson-detail-modal .ld-tab-mark:hover {
    border-color: #059669;
    background: #f3faf3;
}
.lesson-detail-modal .ld-tab-mark:active {
    transform: scale(0.92);
}
.lesson-detail-modal .ld-tab-mark:focus-visible {
    outline: 2px solid #059669;
    outline-offset: 2px;
}
.lesson-detail-modal .ld-tab-mark .ld-tab-mark-check {
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.12s ease, transform 0.12s ease;
    display: block;
}
.lesson-detail-modal .ld-tab-mark.ld-tab-mark-complete {
    background: #059669;
    border-color: #059669;
    box-shadow: 0 1px 3px rgba(5,150,105,0.35);
}
.lesson-detail-modal .ld-tab-mark.ld-tab-mark-complete .ld-tab-mark-check {
    opacity: 1;
    transform: scale(1);
}
.ld-status-toggle.ld-status-checkbox:focus-visible {
    outline: 2px solid #059669;
    outline-offset: 2px;
}
.ld-status-label-sr {
    position: absolute;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.ld-status-checkbox-box {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1.5px solid #d1d5db;
    background: #fff;
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.ld-status-toggle.ld-status-checkbox:hover .ld-status-checkbox-box {
    border-color: #059669;
}
.ld-status-toggle.ld-status-checkbox:active .ld-status-checkbox-box {
    transform: scale(0.92);
}
.ld-status-toggle.ld-status-checkbox.complete .ld-status-checkbox-box {
    background: #059669;
    border-color: #059669;
    color: #fff;
}
.ld-footer-close-btn {
    padding: 10px 28px;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background-color: #fff;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.3px;
}
.ld-footer-close-btn:hover {
    background-color: #f3f4f6;
    border-color: #9ca3af;
}
.ld-footer-next-btn {
    padding: 10px 28px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    border-radius: 6px;
    background-color: #059669;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.3px;
}
.ld-footer-next-btn:hover:not(.disabled) {
    background-color: #047857;
}
.ld-footer-next-btn.disabled {
    background-color: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
}
/* Tab status badge (checkmark) — rounded green square with white SVG
   check. Visually identical to the top-of-modal "Mark complete" pill's
   .ld-status-checkbox-box (filled state) and the .ld-subtab-checkbox
   done state, so the "this tab is locked in" cue is one shape across
   the whole modal. */
.ld-tab-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: #059669;
    color: #fff;
    margin-left: 8px;
    box-shadow: 0 1px 3px rgba(5,150,105,0.35);
    vertical-align: middle;
}
.ld-tab-status-badge svg { display: block; }
/* Tab label state — when the tab is complete the LABEL itself turns
   green/bold so even if the badge fails to render, the state change
   is visible at a glance. Pairs with the .ld-tab-status-badge. */
.lesson-detail-modal .modal-tab.ld-tab-complete {
    color: #047857;
    font-weight: 700;
}
.lesson-detail-modal .modal-tab.ld-tab-complete.active {
    color: #047857;
}
/* Pulse when a badge appears (added on draft → complete) so the visual
   change is unmissable even when the auto-advance jumps tabs. */
@keyframes ldBadgePulse {
    0%   { transform: scale(0.5); opacity: 0; }
    35%  { transform: scale(1.25); opacity: 1; }
    65%  { transform: scale(0.95); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.ld-tab-status-badge.ld-tab-status-badge-fresh {
    animation: ldBadgePulse 0.65s ease-out;
}

/* ========== ACTIVITIES TAB (.ld-act-*) ========== */

.ld-act-container {
    padding: 16px;
}

.ld-act-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.ld-act-title {
    font-size: 16px;
    font-weight: 700;
    color: #333;
}

.ld-act-count {
    font-size: 12px;
    color: #666;
    margin-top: 2px;
}

.ld-act-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* + New dropdown */
.ld-act-new-dropdown-wrap {
    position: relative;
}

.ld-act-new-btn {
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 600;
    background: #059669;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.ld-act-new-btn:hover {
    background: #047857;
}

.ld-act-new-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    min-width: 260px;
    z-index: 100;
    overflow: hidden;
}

.ld-act-new-dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.ld-act-new-dropdown-item:hover {
    background: #f0fdf4;
}

.ld-act-new-dropdown-icon {
    font-size: 20px;
    line-height: 1;
    margin-top: 2px;
}

.ld-act-new-dropdown-label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.ld-act-new-dropdown-desc {
    font-size: 11px;
    color: #888;
    margin-top: 1px;
}

/* Empty state */
.ld-act-empty {
    padding: 48px 20px;
    text-align: center;
    background: #fff;
    border-radius: 8px;
    border: 1px dashed #d0d0d0;
}

.ld-act-empty-icon {
    font-size: 36px;
    margin-bottom: 8px;
}

.ld-act-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.ld-act-empty-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    max-width: 400px;
    margin: 0 auto;
}

/* Activity Group Card */
.ld-act-group {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    margin-bottom: 14px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.ld-act-group:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ld-act-group-header {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: #fafbfc;
    border-bottom: 1px solid #e8e8e8;
    cursor: pointer;
    user-select: none;
}

.ld-act-group-header-top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 6px;
}

.ld-act-group-header-bottom {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px 8px 30px;
    cursor: default;
}

/* Toggle switch for Diff / Slow Graded */
.ld-act-group-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    user-select: none;
    font-size: 0;
}

.ld-act-group-toggle-label {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ld-act-group-toggle-cb {
    display: none;
}

.ld-act-group-toggle-slider {
    position: relative;
    width: 32px;
    height: 18px;
    background: #d1d5db;
    border-radius: 9px;
    transition: background 0.2s;
    flex-shrink: 0;
}

.ld-act-group-toggle-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.ld-act-group-toggle-cb:checked + .ld-act-group-toggle-slider {
    background: #059669;
}

.ld-act-group-toggle-cb:checked + .ld-act-group-toggle-slider::after {
    transform: translateX(14px);
}

/* Assigned To dropdown in header */
.ld-act-group-assign-select {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 6px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    cursor: pointer;
    flex-shrink: 0;
}

.ld-act-group-assign-select:focus {
    outline: 2px solid #059669;
    border-color: #059669;
}

.ld-act-group-chevron {
    font-size: 10px;
    color: #999;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.ld-act-group-chevron.open {
    transform: rotate(0deg);
}

.ld-act-group.collapsed .ld-act-group-chevron {
    transform: rotate(-90deg);
}

.ld-act-group.collapsed .ld-act-group-header-bottom {
    display: none;
}

.ld-act-group-title-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    padding: 2px 4px;
    border-radius: 4px;
    min-width: 0;
}

.ld-act-group-title-input:focus {
    background: #fff;
    outline: 2px solid #059669;
}

.ld-act-group-type-select {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 6px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #f0f4ff;
    color: #3b5998;
    cursor: pointer;
    flex-shrink: 0;
}

.ld-act-group-type-select:focus {
    outline: 2px solid #059669;
    border-color: #059669;
}

.ld-act-group-section-badge {
    display: none; /* replaced by type-select */
}

.ld-act-group-badge {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 8px;
    background: #f3f4f6;
    color: #6b7280;
    font-weight: 500;
    white-space: nowrap;
}

.ld-act-group-section-select {
    display: none; /* replaced by type-select in header */
}

.ld-act-group-delete {
    font-size: 16px;
    color: #ccc;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.15s;
    flex-shrink: 0;
}

.ld-act-group-delete:hover {
    color: #ef4444;
}

/* Group body */
.ld-act-group-body {
    padding: 12px 14px;
}

/* Sub-section headers (collapsible) */
.ld-act-sub-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.ld-act-sub-header:hover {
    background: #f3f4f6;
}

.ld-act-sub-chevron {
    font-size: 9px;
    color: #999;
    transition: transform 0.2s;
    transform: rotate(-90deg);
    flex-shrink: 0;
}

.ld-act-sub-chevron.open {
    transform: rotate(0deg);
}

.ld-act-sub-label {
    font-size: 12px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex: 1;
}

.ld-act-sub-status-draft {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #fef3c7;
    color: #92400e;
    font-weight: 600;
    white-space: nowrap;
}

.ld-act-sub-status-complete {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #d1fae5;
    color: #065f46;
    font-weight: 600;
    white-space: nowrap;
}

.ld-act-sub-add-btn {
    font-size: 11px;
    font-weight: 600;
    color: #059669;
    border: 1px solid #059669;
    background: none;
    padding: 3px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.ld-act-sub-add-btn:hover {
    background: #059669;
    color: #fff;
}

.ld-act-sub-empty {
    font-size: 12px;
    color: #999;
    font-style: italic;
    padding: 8px 0;
}

/* Materials section within group */
.ld-act-materials-section {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f0f0;
}

/* Assignments section within group */
.ld-act-assignments-section {
    /* doc sheets already have their own styling */
}

.ld-act-assignments-section .ld-asgn-doc-container {
    background: none;
    padding: 0;
}

/* ============================================================
   Due-date button — mirrors .ld-cal-btn pattern. The native
   <input type="date"> overlays the button so clicking the
   styled label opens the date picker; the input itself is
   visually hidden.
   ============================================================ */
.ld-due-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: #374151;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    height: 32px;
    position: relative;
}
.ld-due-btn:hover { background: #f3f4f6; border-color: #ccc; color: #111; }
.ld-due-btn.ld-due-btn-set {
    background: #fef3c7;
    border-color: #fcd34d;
    color: #92400e;
}
.ld-due-btn-label { letter-spacing: 0.2px; }
.ld-due-btn-date {
    font-size: 11px;
    color: #92400e;
    font-weight: 700;
    padding-left: 4px;
    border-left: 1px solid rgba(146, 64, 14, 0.25);
    margin-left: 2px;
}
.ld-due-btn-date:empty { display: none; }
.ld-due-btn-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
    font-family: inherit;
    color: transparent;
}

/* Notebook contenteditable question/option inputs — render HTML inline
   (so AI-generated <b>...</b> shows as bold instead of raw tags) and
   wrap to the container width instead of overflowing horizontally. */
.nb-ce-input {
    cursor: text;
    outline: none;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    min-width: 0;
}
.nb-ce-input:empty:not(:focus)::before {
    content: attr(data-placeholder);
    color: #aaa;
    font-style: italic;
    pointer-events: none;
}
.ld-asgn-section-question-input.nb-ce-input { min-height: 22px; }
.ld-asgn-mc-option-input.nb-ce-input,
.ld-asgn-tf-input.nb-ce-input,
.ld-asgn-matching-input.nb-ce-input { min-width: 0; }
.ld-asgn-wb-input.nb-ce-input { min-width: 60px; width: auto; }

/* Multi-line variant — used for Instructions / Note / Essay prompts /
   Short Answer answer keys. Mirrors textarea sizing so the editor stays
   bounded and scrolls when long, while still rendering inline HTML. */
.nb-ce-multiline {
    min-height: 60px;
    max-height: 360px;
    overflow-y: auto;
    line-height: 1.6;
}
.ld-asgn-section-question-textarea.nb-ce-input {
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 8px 10px;
    margin-bottom: 8px;
    transition: border-color 0.2s, background-color 0.2s;
    box-sizing: border-box;
}
.ld-asgn-section-question-textarea.nb-ce-input:hover {
    background-color: #fafafa;
    border-color: #e0e0e0;
}
.ld-asgn-section-question-textarea.nb-ce-input:focus {
    border-color: #059669;
    background-color: #fff;
}

/* ===== Reset-chat corner icon (Lesson Plan + Activities chat headers) =====
   Quiet ghost button, sits to the right of the assistant title block.
   Confirm dialog before wipe lives in JS so a stray click doesn't nuke
   the conversation. */
.ld-chat-reset-btn {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 6px;
    color: #94a3b8;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    margin-left: 4px;
}
.ld-chat-reset-btn:hover {
    color: #b45309;
    background: #fef3c7;
    border-color: #fde68a;
}
.ld-chat-reset-btn:active { transform: translateY(0.5px); }
.ld-chat-reset-btn svg { display: block; }

/* ===== Activities chat front-load checklist =====
   Shows in #ld-act-chat-messages when no user message has been sent yet.
   Disappears after the first send; reappears after Reset chat. Each row
   is a button (or stack containing a button + link composer) that turns
   on the green tick when the corresponding affordance has been used. */
.ld-fl-card {
    margin: 8px 4px 12px;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    font-family: inherit;
    color: #1f2937;
    overflow: hidden;
}
.ld-fl-head {
    padding: 10px 14px 8px;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
}
.ld-fl-title {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: 0.1px;
}
.ld-fl-help {
    font-size: 11px;
    color: #64748b;
    margin-top: 3px;
    line-height: 1.4;
}
.ld-fl-list {
    display: flex;
    flex-direction: column;
    padding: 6px;
    gap: 4px;
}
.ld-fl-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
    font-family: inherit;
    color: inherit;
    width: 100%;
}
.ld-fl-item:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}
.ld-fl-item.ld-fl-item-on {
    background: #ecfdf5;
    border-color: #6ee7b7;
}
.ld-fl-item.ld-fl-item-on:hover {
    background: #d1fae5;
    border-color: #34d399;
}
.ld-fl-item.ld-fl-item-action {
    background: #f0fdf4;
    border-color: #86efac;
    border-style: dashed;
}
.ld-fl-item.ld-fl-item-action:hover {
    background: #dcfce7;
    border-color: #22c55e;
    border-style: solid;
    box-shadow: 0 1px 4px rgba(34, 197, 94, 0.16);
}
.ld-fl-item-stack {
    flex-direction: column;
    align-items: stretch;
    cursor: default;
    gap: 8px;
}
.ld-fl-item-stack:hover {
    background: #fff;
    border-color: #e2e8f0;
}
.ld-fl-item-stack.ld-fl-item-on {
    background: #ecfdf5;
    border-color: #6ee7b7;
}
.ld-fl-item-stack.ld-fl-item-on:hover {
    background: #ecfdf5;
    border-color: #6ee7b7;
}
.ld-fl-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ld-fl-tick {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1.5px solid #cbd5e1;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    transition: background 0.15s, border-color 0.15s;
}
.ld-fl-item.ld-fl-item-on .ld-fl-tick,
.ld-fl-item-stack.ld-fl-item-on .ld-fl-tick {
    background: #059669;
    border-color: #059669;
}
.ld-fl-tick-action {
    background: #f0fdf4;
    border-color: #86efac;
    color: #16a34a;
    font-size: 13px;
}
.ld-fl-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
}
.ld-fl-meta {
    flex: 1;
    min-width: 0;
}
.ld-fl-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
}
.ld-fl-sub {
    font-size: 11px;
    color: #64748b;
    margin-top: 3px;
    line-height: 1.45;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ld-fl-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 17px;
    padding: 0 6px;
    margin-left: 4px;
    border-radius: 999px;
    background: #059669;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    vertical-align: middle;
}
.ld-fl-coming {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 4px;
    background: #fef3c7;
    color: #92400e;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.ld-fl-link-row {
    display: flex;
    gap: 8px;
    margin-left: 30px; /* line up under the icon */
}
.ld-fl-link-input {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    font: inherit;
    font-size: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #1e293b;
    background: #fff;
    outline: none;
}
.ld-fl-link-input:focus {
    border-color: #34d399;
    box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.18);
}
.ld-fl-link-btn {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #1e293b;
    font: 600 12px/1.15 inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.ld-fl-link-btn:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}
.ld-fl-link-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: 30px;
}
.ld-fl-link-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px 3px 8px;
    border-radius: 999px;
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    color: #065f46;
    font-size: 11px;
    font-weight: 600;
    max-width: 280px;
}
.ld-fl-link-chip > span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ld-fl-link-chip > button {
    background: transparent;
    border: none;
    color: #047857;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
}
.ld-fl-link-chip > button:hover { color: #064e3b; }

/* ===== Lesson Plan PRECHAT LAUNCHER =====
   Replaces the chat surface on a brand-new lesson (or after Reset chat)
   so the teacher sees a clean grid of big idiot-proof actions instead of
   a greeting bubble + text box. Once the teacher clicks "Start
   brainstorming" or sends a first message, .ld-prechat is removed and
   the regular chat surface takes over.

   Layout: launcher fills the right panel; chat-header / chat-messages /
   file-preview / chat-input-area hide while .ld-prechat is on the
   parent .split-right-panel. */
.ld-launcher {
    display: none;
    flex-direction: column;
    padding: 22px 22px 18px;
    overflow-y: auto;
    height: 100%;
    box-sizing: border-box;
    background: #fafaf7;
}
.split-right-panel.ld-prechat > .ld-launcher,
.split-right-panel.up-prechat > .ld-launcher,
.batch-right.batch-prechat > .ld-launcher {
    display: flex;
}
.split-right-panel.ld-prechat > .chat-header,
.split-right-panel.ld-prechat > .chat-messages,
.split-right-panel.ld-prechat > .ld-chat-file-preview,
.split-right-panel.ld-prechat > .chat-input-area,
.split-right-panel.up-prechat > .chat-header,
.split-right-panel.up-prechat > .chat-messages,
.split-right-panel.up-prechat > .up-chat-file-preview,
.split-right-panel.up-prechat > .chat-input-area,
.split-right-panel.up-prechat > .up-gdrive-picker,
.batch-right.batch-prechat > .chat-header,
.batch-right.batch-prechat > .batch-chat-messages,
.batch-right.batch-prechat > .up-chat-file-preview,
.batch-right.batch-prechat > .chat-input-area,
.batch-right.batch-prechat > .up-gdrive-picker {
    display: none !important;
}

/* Batch launcher: number-of-lessons stepper inside its tile. */
.ld-launcher-counter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.ld-launcher-counter-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #1e293b;
    font: 700 16px/1 inherit;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.ld-launcher-counter-btn:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}
.ld-launcher-counter-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.ld-launcher-counter-value {
    min-width: 48px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: #065f46;
}
.ld-launcher-counter-suffix {
    font-size: 12.5px;
    color: #64748b;
    font-weight: 600;
}

.ld-launcher-head {
    padding-bottom: 6px;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
/* Right-side controls cluster — info icon + settings gear (Phase 8). */
.ld-launcher-head-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.ld-launcher-head-controls .tc-info-icon-summary { margin-left: 0; }
.ld-launcher-head-text {
    flex: 1 1 auto;
    min-width: 0;
}
.ld-launcher-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: #16a34a;
    text-transform: uppercase;
}
.ld-launcher-title {
    margin-top: 4px;
    font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 24px;
    color: #1f2937;
    font-weight: 500;
    line-height: 1.15;
}
.ld-launcher-sub {
    margin-top: 6px;
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.4;
}
.ld-launcher-context-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #065f46;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid #a7f3d0;
}

/* Inline brainstorm composer — textarea + mic. Replaces the old
   "Start brainstorming with AI" CTA button. Persists notes inline
   instead of opening the chat. Generate Draft folds these into the
   first AI message. */
.ld-launcher-brainstorm {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1px solid #86efac;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.08);
    margin-bottom: 14px;
}
.ld-launcher-brainstorm-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.ld-launcher-brainstorm-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #a7f3d0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.ld-launcher-brainstorm-meta { flex: 1; min-width: 0; }
.ld-launcher-brainstorm-label {
    font-size: 15px;
    font-weight: 700;
    color: #065f46;
    line-height: 1.2;
}
.ld-launcher-brainstorm-sub {
    margin-top: 2px;
    font-size: 11.5px;
    color: #047857;
    line-height: 1.4;
}
.ld-launcher-brainstorm-body {
    /* Single full-width textarea (mic moved into the head row 2026-05-11). */
}
.ld-launcher-brainstorm-input {
    display: block;
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    font-size: 13px;
    line-height: 1.45;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    color: #1e293b;
    background: #fff;
    outline: none;
    resize: vertical;
    min-height: 96px;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ld-launcher-brainstorm-input::placeholder {
    color: #94a3b8;
    font-style: italic;
}
.ld-launcher-brainstorm-input:focus {
    border-color: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
}
/* Mic lives in the head row now — compact pill that aligns with the
   brainstorm card's icon + meta block. Click streams speech into the
   full-width textarea below. */
.ld-launcher-brainstorm-mic {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
    width: 36px;
    height: 36px;
    border: 1px solid #a7f3d0;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    color: #047857;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}
.ld-launcher-brainstorm-mic:hover {
    background: #ecfdf5;
    border-color: #6ee7b7;
    transform: translateY(-1px);
}
.ld-launcher-brainstorm-mic.recording {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
    animation: tcMicPulse 1.2s ease-in-out infinite;
}
@keyframes tcMicPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50%      { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}
.ld-launcher-brainstorm-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: #65a085;
    padding: 0 2px;
}
.ld-launcher-brainstorm-count { font-weight: 600; }
.ld-launcher-brainstorm-clear {
    background: transparent;
    border: none;
    color: #b45309;
    font: 700 11px/1 inherit;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
}
.ld-launcher-brainstorm-clear:hover { background: rgba(180, 83, 9, 0.08); }

/* Primary CTA — full-width Brainstorm tile (legacy — kept for reference) */
.ld-launcher-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, #16a34a 0%, #059669 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    text-align: left;
    box-shadow: 0 6px 18px rgba(5, 150, 105, 0.18);
    transition: transform 0.12s, box-shadow 0.12s;
    margin-bottom: 14px;
    font-family: inherit;
}
.ld-launcher-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(5, 150, 105, 0.24);
}
.ld-launcher-cta-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.ld-launcher-cta-meta { flex: 1; min-width: 0; }
.ld-launcher-cta-label {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.1px;
}
.ld-launcher-cta-sub {
    margin-top: 2px;
    font-size: 12px;
    opacity: 0.9;
    line-height: 1.35;
}

/* Action grid below the CTA — 2 columns of medium-size tiles */
.ld-launcher-or {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #94a3b8;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin: 4px 0 12px;
}
.ld-launcher-or::before,
.ld-launcher-or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}
.ld-launcher-grid {
    display: grid;
    /* minmax(0, 1fr) prevents one tile's intrinsic content (e.g. a wide
       pill) from forcing its column to grow past 50% and squeezing the
       other column. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-rows: 1fr;
    gap: 10px;
    align-items: stretch;
}
.ld-launcher-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 14px 12px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    text-align: left;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: background 0.12s, border-color 0.12s, transform 0.12s, box-shadow 0.12s;
    font-family: inherit;
    color: inherit;
}
.ld-launcher-tile:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.ld-launcher-tile.is-on {
    background: #ecfdf5;
    border-color: #6ee7b7;
}
.ld-launcher-tile.is-on:hover {
    background: #d1fae5;
    border-color: #34d399;
}
.ld-launcher-tile-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.ld-launcher-tile.is-on .ld-launcher-tile-icon {
    background: #d1fae5;
}
.ld-launcher-tile-label {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ld-launcher-tile-sub {
    font-size: 11.5px;
    color: #64748b;
    line-height: 1.35;
}

/* Compact tile variant — no descriptive sub-text; the body copy
   lives inside the info-icon tooltip. Used by all AI launchers
   (lesson/unit/batch/builder) so the grid stays minimal. */
.ld-launcher-tile-compact {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}
.ld-launcher-tile-compact .ld-launcher-tile-icon {
    width: 28px;
    height: 28px;
    font-size: 16px;
    flex-shrink: 0;
}
.ld-launcher-tile-compact .ld-launcher-tile-label {
    flex: 1 1 auto;
    font-size: 12.5px;
}
/* Info icon at the right edge of the tile row (not glued to the
   label) — pushed via margin-left:auto inside the flex label. */
.ld-launcher-tile-compact .ld-launcher-tile-label .tc-info-icon {
    margin-left: auto;
}
/* Builder modal uses the tcBAP-* naming; same compact treatment. */
.tcBAP-tile-compact {
    flex-direction: row !important;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}
.tcBAP-tile-compact .tcBAP-tile-icon {
    width: 28px;
    height: 28px;
    font-size: 16px;
    flex-shrink: 0;
}
.tcBAP-tile-compact .tcBAP-tile-label {
    flex: 1 1 auto;
    font-size: 12.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tcBAP-tile-compact .tcBAP-tile-label .tc-info-icon {
    margin-left: auto;
}
/* Equal-height tiles in the Builder launcher — mirror the lesson-modal
   launcher (.ld-launcher-grid grid-auto-rows:1fr + align-items:stretch).
   Without this the Admin Guidance tile, which carries its own pill widget,
   was taller than the other three. */
.tcBAP-grid {
    grid-auto-rows: 1fr !important;
    align-items: stretch !important;
}
.tcBAP-grid > .tcBAP-tile {
    height: 100%;
    box-sizing: border-box;
}
/* Visible breathing room between the green brainstorm card and the tile
   grid — the "Set up context" divider that normally provides this is
   hidden above (see .tcBAP-or display:none). */
.tcBAP-bs {
    margin-bottom: 22px;
}

/* Launcher chrome trimmed 2026-05-24 — drop the brainstorm 💭 icon,
   the character-count + Clear footer row, and the "Set up context"
   divider so the whole launcher fits on screen without scrolling. */
.ld-launcher-brainstorm-icon,
.ld-launcher-brainstorm-foot,
.ld-launcher-or,
.tcBAP-bs-icon,
.tcBAP-bs-foot,
.tcBAP-or {
    display: none !important;
}
/* Tighter brainstorm card now that the 💭 icon + counter foot are
   gone — claws back vertical space so the whole launcher fits on
   one screen without scrolling. */
.ld-launcher-brainstorm {
    padding: 12px 14px;
    gap: 8px;
    margin-bottom: 12px;
}
.ld-launcher-brainstorm-input {
    min-height: 78px;
}
.tcBAP-bs {
    padding: 12px 14px;
    gap: 8px;
}
.tcBAP-bs-input {
    min-height: 78px;
}

/* 2026-05-24 polish — info-icon + mic placement across every AI launcher
   (lesson Plan + Activities, unit, batch, builder). The (i) icons live
   in the brainstorm head row to the right of the textarea description,
   right beside a now-smaller mic button so they cluster as one control
   group instead of trailing the label text. */
.ld-launcher-brainstorm-mic,
.tcBAP-bs-mic {
    width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
}
.ld-launcher-brainstorm-head .tc-info-icon,
.tcBAP-bs-head .tc-info-icon {
    margin-left: 0;
    align-self: center;
}
/* Reference-link head — title left, (i) far right. The (i) lives
   inside .ld-launcher-link-title; making the title a full-width flex
   row with margin-left:auto on the icon pushes it to the right edge
   of the composer header. Launchers without a (i) (e.g. batch) just
   get a full-width title block — no visual change. */
.ld-launcher-link-title {
    display: flex;
    align-items: center;
    width: 100%;
}
.ld-launcher-link-title .tc-info-icon {
    margin-left: auto;
}
/* Left-column launcher tiles flip their tooltip so it opens to the
   RIGHT instead of the left — otherwise the 280px bubble extends past
   the modal's left edge and gets clipped. Right-column tiles keep the
   default leftward opening since they have plenty of room on that
   side. Applies to every launcher grid (ld-launcher-grid + tcBAP). */
.ld-launcher-grid > :nth-child(odd) .tc-info-icon::after,
.tcBAP-grid > :nth-child(odd) .tc-info-icon::after {
    left: -4px;
    right: auto;
}

.ld-launcher-tile-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 17px;
    padding: 0 6px;
    border-radius: 999px;
    background: #059669;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
}
.ld-launcher-tile-soon {
    display: inline-block;
    padding: 0 6px;
    border-radius: 4px;
    background: #fef3c7;
    color: #92400e;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

/* Admin Guidance tile — 4th quadrant in the unit launcher grid. The
   existing #up-ag-pill widget is mounted in the pill row BELOW the sub
   text so the label and icon stay flush left like the other three
   tiles (icon → label → sub → pill). The pill itself communicates
   ON/OFF state. Tile click forwards to the pill. Same neutral chrome
   as the other tiles — red treatment was reading like an error state
   instead of a category label. */
.ld-launcher-tile-ag-pill {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: auto;  /* pin pill to bottom of tile so all four tiles align */
    padding-top: 6px;
}
.ld-launcher-tile-ag-pill .tc-ag-pill {
    margin: 0;
}

/* Reference Link composer — now lives below the 4-tile grid as a
   labeled section (was a tile pre-redesign, then a bare composer; now
   has its own heading + helper text so it reads as a distinct
   reference-link surface). */
.ld-launcher-link-composer {
    margin-top: 12px;
    padding: 12px 14px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}
.ld-launcher-link-head {
    margin-bottom: 8px;
}
.ld-launcher-link-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: 0.1px;
}
.ld-launcher-link-help {
    font-size: 11.5px;
    color: #64748b;
    line-height: 1.4;
    margin-top: 2px;
}

/* Inline link composer — input + Add button row */
.ld-launcher-link-row {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}
.ld-launcher-link-input {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    font: inherit;
    font-size: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #1e293b;
    background: #fff;
    outline: none;
}
.ld-launcher-link-input:focus {
    border-color: #34d399;
    box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.18);
}
.ld-launcher-link-btn {
    flex-shrink: 0;
    padding: 7px 12px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #1e293b;
    font: 700 12px/1.15 inherit;
    cursor: pointer;
}
.ld-launcher-link-btn:hover { background: #f1f5f9; }
.ld-launcher-link-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}
.ld-launcher-link-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px 3px 8px;
    border-radius: 999px;
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    color: #065f46;
    font-size: 11px;
    font-weight: 600;
    max-width: 100%;
}
.ld-launcher-link-chip > span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ld-launcher-link-chip > button {
    background: transparent;
    border: none;
    color: #047857;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
}

/* "Skip — open chat" link at the bottom for power users */
.ld-launcher-skip {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #e2e8f0;
    text-align: center;
    font-size: 11.5px;
    color: #94a3b8;
}
.ld-launcher-skip-btn {
    background: none;
    border: none;
    color: #16a34a;
    font: 600 11.5px/1 inherit;
    cursor: pointer;
    padding: 2px 4px;
    text-decoration: underline;
}
.ld-launcher-skip-btn:hover { color: #047857; }

/* Locked Admin Guidance launcher tile — for indie / SoloTeacher users
   who don't have school admins above them. Mirrors the rule that lives
   in class-placeholder.css so the locked tile renders correctly when
   the lesson + unit modals open from app.html (which doesn't load
   class-placeholder.css). The lesson + unit launchers reuse the same
   `.ld-launcher-tile-*` chassis already styled above. */
.ld-launcher-tile-locked {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #94a3b8;
    cursor: pointer;
    box-shadow: none;
}
.ld-launcher-tile-locked .ld-launcher-tile-icon {
    color: #94a3b8;
    filter: grayscale(0.7);
    opacity: 0.85;
}
.ld-launcher-tile-locked .ld-launcher-tile-label {
    color: #64748b;
}
.ld-launcher-tile-locked .ld-launcher-tile-sub {
    color: #94a3b8;
}
.ld-launcher-tile-locked:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transform: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* ===== Locked Admin Guidance pill (indie / SoloTeacher Enterprise teaser) =====
   Rendered into the chat-composer pill mount points (#ld-ag-pill,
   #ld-act-ag-pill, batch chat input pill) when the user has no school admin
   above them. Matches the active pill's geometry so the chat input row
   reads the same height; muted palette + 🔒 prefix + small Enterprise tag
   make it clear the feature exists but isn't available on this tier. */
.tc-ag-locked-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    line-height: 1;
    font-family: inherit;
    white-space: nowrap;
}
.tc-ag-locked-pill:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
    color: #334155;
}
.tc-ag-locked-pill-icon { font-size: 12px; }
.tc-ag-locked-pill-text { letter-spacing: 0.1px; }

/* Enterprise-only bubble anchored to a locked AG pill (or the batch
   launcher tile). Re-declared here so the rule is available on app.html
   even when class-placeholder.css isn't loaded.

   Width: fixed 320px. The composer pill lives in a chat-input row at
   the bottom of `.split-right-panel { overflow:hidden }`, so a too-tall
   below-anchor bubble used to get clipped — shared/enterprise-gate.js
   now detects both horizontal AND vertical clipping and applies the
   `-flip` variant to pop the bubble above the pill instead. */
.batch-enterprise-bubble {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    padding: 14px 38px 14px 16px;
    box-sizing: border-box;
    background: #1e293b;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.25);
    z-index: 100;
    animation: batch-enterprise-bubble-in 0.18s ease-out;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
/* Fallback anchor: bubble pops ABOVE the pill (and we keep right:0 so
   the right edge tracks the pill). Used when the JS overflow probe
   detects the default below-anchor would spill off the viewport or out
   of the nearest clip-hidden ancestor. */
.batch-enterprise-bubble.batch-enterprise-bubble-flip {
    top: auto;
    bottom: calc(100% + 8px);
    right: 0;
}
/* Portal mode: bubble is appended to <body> and positioned via inline
   top/left styles by shared/enterprise-gate.js. Position:fixed escapes
   every ancestor's overflow:hidden (e.g. the lesson modal's
   .split-right-panel), which used to clip the bubble at the panel's
   bottom or right edge when anchored inside a tight composer pill.
   z-index must out-stack the lesson modal (10001) + its fullscreen
   shell (10000) + any inner overlay (100050) — bumped to 100060. */
.batch-enterprise-bubble.batch-enterprise-bubble-portal {
    position: fixed;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 100060;
}
@keyframes batch-enterprise-bubble-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.batch-enterprise-bubble-title {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #6ee7b7;
    margin-bottom: 6px;
}
.batch-enterprise-bubble-body {
    font-size: 13px;
    line-height: 1.5;
    color: #e2e8f0;
}
.batch-enterprise-bubble-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 999px;
    transition: background 0.12s, color 0.12s;
}
.batch-enterprise-bubble-close:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}