/* ============================================================
   mb-styles.css — Module Builder
   Extracted verbatim from Module_Builder.html <style> (lines 18-1384).
   Step 2 will split this into -typography / -components / -responsive / -rtl.
   ============================================================ */

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            min-height: 100dvh;
            padding: 20px;
            padding-top: 76px;
            padding-bottom: env(safe-area-inset-bottom, 0px);
            /* `direction: ltr` used to sit here. It overrode the dir="rtl"
               that the i18n engine sets on <html>, which is why switching
               the interface to Arabic changed the words but not the layout:
               the tabs, the headings and every flex row stayed left-to-right.
               Direction now comes from <html> and nowhere else. */
            overflow-x: hidden;
        }

        /* ── Figma-style fixed toolbar ─────────────────────────────── */
        .figma-toolbar {
            position: fixed;
            top: 0; left: 0; right: 0;
            height: 56px;
            background: #ffffff;
            border-bottom: 1px solid #e5e7eb;
            box-shadow: 0 1px 8px rgba(0,0,0,0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            z-index: 9998;
            padding: 0 24px;
            /* PHYSICAL on purpose. The notch and the home indicator are
               on physical edges of the device; they do not move when the
               text direction does, so these two must not become logical. */
            padding-left:  max(24px, env(safe-area-inset-left));
            padding-right: max(24px, env(safe-area-inset-right));
            padding-top: env(safe-area-inset-top, 0px);

            /* The bar grew from five buttons to eight. `justify-content:
               center` with no overflow rule meant the row simply
               overflowed its box: the outermost buttons were clipped by
               the viewport at BOTH ends, and neither could be scrolled
               to.

               Scrolling horizontally fixes it, but only if the content
               is allowed to start at the edge rather than being centred
               — a centred flex row overflows symmetrically and the
               scroll container cannot reach either end. So: centre
               while it fits, scroll when it does not. */
            /* NOT overflow-x on the bar itself. That was the first fix
               and it broke the language menu: its dropdown is
               position:absolute inside this element, and a scroll
               container clips absolutely positioned children — the panel
               opened and was immediately cut off at the bar's edge, so
               the button looked dead.

               The scrolling moves to an inner track instead, and the bar
               keeps `overflow: visible` so the dropdown can escape. */
            overflow: visible;
        }

        .figma-toolbar .figma-toolbar-scroll {
            display: flex;
            align-items: center;
            gap: inherit;
            min-width: 0;
            max-width: 100%;
            overflow-x: auto;
            overflow-y: visible;
            /* NOT `justify-content: center`, and not `safe center`
               either. A centred flex row that overflows spills equally
               past BOTH ends of its scroll box, and neither end can be
               scrolled to — which is why the French labels, being the
               longest, were cut off at both edges.

               Auto margins on two empty pseudo-elements do what centring
               was meant to do: they absorb the spare room when the row
               fits, and collapse to nothing when it does not, leaving a
               plain start-aligned row that scrolls properly. */
            justify-content: flex-start;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
            /* Room for the dropdown to hang out of the track without the
               scrollbar area clipping it. */
            padding-bottom: 2px;
        }
        .figma-toolbar .figma-toolbar-scroll::-webkit-scrollbar { display: none; }
        .figma-toolbar .figma-toolbar-scroll::before,
        .figma-toolbar .figma-toolbar-scroll::after {
            content: '';
            margin: auto;
            flex: 0 0 0;
        }

        /* The language menu must not live inside the scroll track, for
           the same clipping reason — it stays a direct child of the bar. */
        .figma-toolbar > .mb-lang-menu { flex: 0 0 auto; }

        /* Buttons must not be squeezed narrower than their labels; that
           is what turns "تصدير إلى Word" into a clipped stub. */
        /* Children must not be squeezed narrower than their labels —
           EXCEPT the scroll track itself, which has to shrink to the
           bar's width or it never scrolls and simply overflows past both
           ends. That single missing exception is why the French labels,
           the longest set, stayed clipped after the first fix. */
        .figma-toolbar > *,
        .figma-toolbar-scroll > * { flex: 0 0 auto; }
        .figma-toolbar > .figma-toolbar-scroll { flex: 0 1 auto; min-width: 0; }

        .figma-btn { white-space: nowrap; }

        .figma-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 14px 6px 6px;
            border-radius: 999px;
            border: 1.5px solid #e5e7eb;
            background: #f9fafb;
            cursor: pointer;
            font-size: 0.88em;
            font-weight: 600;
            color: #374151;
            transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
            white-space: nowrap;
            text-decoration: none;
        }

        .figma-btn:hover {
            background: #f3f4f6;
            border-color: #d1d5db;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }

        .figma-btn:active {
            transform: scale(0.97);
        }

        .figma-btn-icon {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1em;
            flex-shrink: 0;
        }

        .figma-btn-icon.green  { background: #dcfce7; }
        .figma-btn-icon.blue   { background: #dbeafe; }
        .figma-btn-icon.purple { background: #ede9fe; }
        .figma-btn-icon.red    { background: #fee2e2; }

        .figma-divider {
            width: 1px;
            height: 28px;
            background: #e5e7eb;
            margin: 0 4px;
        }

        /* disabled state for export btn */
        #export-btn:disabled .figma-btn-icon.purple { background: #e5e7eb; }
        #export-btn:disabled { opacity: 0.5; cursor: not-allowed; }

        /* ── App title (always visible, centered, above tabs) ───────── */
        .app-title-bar {
            text-align: center;
            margin-bottom: 24px;
            padding-bottom: 20px;
            border-bottom: 1px solid #e5e7eb;
        }

        .app-title-bar h1 {
            margin: 0 0 6px 0;
            font-size: 1.9em;
            color: #667eea;
        }

        .app-title-bar p {
            margin: 0;
            font-size: 0.93em;
            color: #6b7280;
            font-weight: 400;
        }

        /* 3.53.0: the open tab's title — one line, aligned with the
           content under it, and less room above the tabs. */
        .app-title-bar.mb-tab-title-bar {
            text-align: start;
            margin-bottom: 18px;
            padding-bottom: 12px;
            /* 3.60.0: the «?» help button at the far end of the title. */
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }
        .mb-tab-title-bar h1 {
            margin: 0;
            font-size: 1.55em;
            line-height: 1.3;
        }
        /* The tool's name and description, at the top of the Help tab. */
        .app-title-bar.mb-help-app-title {
            margin-bottom: 22px;
        }

        .container {
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            padding: 40px;
            max-width: 1200px;
            margin: 0 auto;
            overflow-x: hidden;
        }

        h1 {
            color: #667eea;
            margin-bottom: 20px;
            text-align: center;
            font-size: 2em;
        }

        .tabs-container {
            margin-bottom: 30px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .tabs-container::-webkit-scrollbar { display: none; }

        .tabs {
            display: flex;
            gap: 5px;
            border-bottom: 3px solid #667eea;
            margin-bottom: 0;
            flex-wrap: wrap;
            min-width: 0;
        }

        .tab {
            padding: 15px 30px;
            background: #e0e0e0;
            border: none;
            border-radius: 8px 8px 0 0;
            cursor: pointer;
            font-size: 1.1em;
            font-weight: 600;
            color: #666;
            transition: all 0.3s;
            white-space: nowrap;
            flex-shrink: 0;
            min-height: 44px;
        }

        .tab:hover {
            background: #d0d0d0;
        }

        .tab.active {
            background: #667eea;
            color: white;
        }

        .tab-content {
            display: none;
            animation: fadeIn 0.3s;
        }

        .tab-content.active {
            display: block;
            visibility: visible;
            opacity: 1;
            min-height: 500px;
            background: #f5f5f5;
            padding: 20px;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .btn-action {
            color: white;
            border: none;
            padding: 10px 18px;
            border-radius: 8px;
            font-size: 0.95em;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
            white-space: nowrap;
            justify-content: center;
            flex-shrink: 0;
            min-height: 40px;
        }

        .btn-action:hover {
            transform: translateY(-2px);
        }

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

        .btn-clear {
            background: #ef4444;
        }

        .btn-clear:hover {
            background: #dc2626;
            box-shadow: 0 5px 15px rgba(239, 68, 68, 0.4);
        }

        .title-section {
            margin-bottom: 30px;
            position: relative;
        }

        .btn-remove-sheet {
            background: #ef4444;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 1em;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s;
            margin-bottom: 15px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-remove-sheet:hover {
            background: #dc2626;
        }

        .title-group {
            width: 100%;
        }

        .title-input-row {
            display: flex;
            gap: 15px;
            align-items: center;
        }

        .title-input-row input[type="text"] {
            flex: 1;
        }

        .title-input-row input[type="text"]:first-child {
            flex: 0 0 100px;
        }

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

        label {
            display: block;
            margin-bottom: 10px;
            color: #333;
            font-weight: 600;
            font-size: 1em;
        }

        input[type="text"],
        input[type="number"] {
            width: 100%;
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 5px;
            font-size: 1em;
            transition: border-color 0.3s;
            text-align: start;   /* logical: follows the element's dir */
            direction: inherit;   /* was ltr — now follows the field\'s own dir attribute, set by contentLang */
        }

        input[type="text"]:focus,
        input[type="number"]:focus,
        textarea:focus {
            outline: none;
            border-color: #667eea;
        }

        textarea {
            width: 100%;
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 5px;
            font-size: 1em;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            resize: vertical;
            min-height: 80px;
            transition: border-color 0.3s;
            text-align: start;   /* logical: follows the element's dir */
            direction: inherit;   /* was ltr — now follows the field\'s own dir attribute, set by contentLang */
        }

        .example-text {
            color: #888;
            font-size: 0.9em;
            margin-top: 5px;
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .section-title {
            font-size: 1.1em;
            font-weight: 600;
            color: #333;
        }

        .btn-add {
            background: #10b981;
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 5px;
            font-size: 0.95em;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s;
        }

        .btn-add:hover {
            background: #059669;
        }

        .resource-item,
        .step-item {
            background: #f9fafb;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 15px;
            position: relative;
        }

        .step-item textarea {
            direction: inherit;   /* was ltr — now follows the field\'s own dir attribute, set by contentLang */
            text-align: start;   /* logical: follows the element's dir */
        }

        .content-section-item {
            background: #f9fafb;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 15px;
            position: relative;
        }

        .content-section-item textarea {
            direction: inherit;   /* was ltr — now follows the field\'s own dir attribute, set by contentLang */
            text-align: start;   /* logical: follows the element's dir */
            width: 100%;
            min-height: 150px;
            resize: vertical;
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 1em;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .content-section-item textarea:focus {
            outline: none;
            border-color: #667eea;
        }

        .criteria-text {
            flex: 1;
        }

        .criteria-table-container {
            background: white;
            border: 1px solid #000;
            margin-top: 20px;
        }

        .criteria-table {
            width: 100%;
            border-collapse: collapse;
        }

        .criteria-table td {
            border: 1px solid #000;
            padding: 10px;
        }

        .criteria-table input[type="text"] {
            width: 100%;
            border: none;
            padding: 5px;
            font-size: 1em;
            direction: inherit;   /* was ltr — now follows the field\'s own dir attribute, set by contentLang */
            text-align: start;   /* logical: follows the element's dir */
        }

        /* 3.61.0: a criterion grows with its text (criteria.js). */
        .criteria-table textarea.criteria-text {
            display: block;
            width: 100%;
            box-sizing: border-box;
            min-height: 34px;
            max-height: 320px;
            padding: 6px 8px;
            font: inherit;
            font-size: 1em;
            line-height: 1.5;
            text-align: start;
            resize: vertical;
            overflow-y: auto;
            overflow-wrap: anywhere;
            field-sizing: content;
        }

        .criteria-table textarea.criteria-text:focus,
        .criteria-table input[type="text"]:focus {
            outline: 1px solid #667eea;
        }

        .criteria-table .criteria-row-number {
            text-align: center;
            font-weight: 600;
            width: 8%;
        }

        /* criteria edit checkboxes removed */

        .resource-name {
            flex: 1;
            min-height: 60px;
            resize: vertical;
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 1em;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            text-align: start;   /* logical: follows the element's dir */
            direction: inherit;   /* was ltr — now follows the field\'s own dir attribute, set by contentLang */
            width: 100%;
        }

        .resource-name:focus {
            outline: none;
            border-color: #667eea;
        }

        .resource-quantity {
            width: 80px;
            height: 45px;
            text-align: center;
            padding: 8px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 1em;
            font-weight: 600;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .resource-quantity:focus {
            outline: none;
            border-color: #667eea;
        }

        /* Style the number input arrows */
        .resource-quantity::-webkit-inner-spin-button,
        .resource-quantity::-webkit-outer-spin-button {
            opacity: 1;
            height: 40px;
        }

        .btn-remove {
            background: #ef4444;
            color: white;
            border: none;
            padding: 0;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.95em;
            font-weight: 700;
            transition: background 0.2s;
            width: 28px;
            height: 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            line-height: 1;
        }

        .btn-remove:hover {
            background: #b91c1c;
        }

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

        .step-label {
            color: #667eea;
            font-weight: 600;
            font-size: 1em;
        }

        /* 3.52.0: insert below / reorder steps (src/steps.js). */
        .mb-step-title {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }
        .mb-step-handle {
            cursor: grab;
            color: #9ca3af;
            font-size: 1.15em;
            line-height: 1;
            padding: 2px 4px;
            border-radius: 4px;
            user-select: none;
            -webkit-user-select: none;
            touch-action: none;
        }
        .mb-step-handle:hover { color: #667eea; background: #eef0fd; }
        .mb-step-handle:active { cursor: grabbing; }
        .mb-step-move {
            background: #fff;
            color: #4b5563;
            border: 1px solid #d1d5db;
            border-radius: 5px;
            width: 28px;
            height: 28px;
            padding: 0;
            font-size: 0.7em;
            line-height: 1;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .mb-step-move:hover:not(:disabled) { background: #eef0fd; border-color: #667eea; color: #667eea; }
        .mb-step-move:focus-visible { outline: 2px solid #667eea; outline-offset: 1px; }
        .mb-step-move:disabled { opacity: 0.35; cursor: default; }
        .step-item.is-dragging,
        .content-section-item.is-dragging,
        .mb-att-item.is-dragging {
            opacity: 0.55;
            border: 1px dashed #667eea;
        }

        .btn-add-image {
            background: #10b981;
            color: white;
            border: none;
            padding: 6px 14px;
            border-radius: 5px;
            font-size: 0.85em;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            transition: background 0.2s;
            white-space: nowrap;
        }

        .btn-add-image:hover {
            background: #059669;
        }

        /* ── Instructional Mark Styles ────────────────────────────────── */
        .btn-add-mark {
            background: #f59e0b;
            color: white;
            border: none;
            padding: 6px 14px;
            border-radius: 5px;
            font-size: 0.85em;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            transition: background 0.2s;
            white-space: nowrap;
        }
        .btn-add-mark:hover { background: #d97706; }

        .mark-dropdown-menu {
            position: fixed;
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.15);
            z-index: 99999;
            min-width: 200px;
            padding: 6px 0;
            animation: markDropFade 0.12s ease;
            max-height: 70vh;
            overflow-y: auto;
        }
        @keyframes markDropFade {
            from { opacity: 0; transform: translateY(-6px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .mark-dropdown-item {
            padding: 9px 18px;
            cursor: pointer;
            font-size: 0.93em;
            font-weight: 500;
            color: #374151;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: background 0.1s;
        }
        .mark-dropdown-item:hover { background: #f3f4f6; }

        .mark-item {
            border-radius: 8px;
            margin-top: 10px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
        .mark-item-header {
            padding: 7px 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: 700;
            font-size: 0.9em;
        }
        .mark-item-header .mark-remove-btn {
            background: transparent;
            border: none;
            cursor: pointer;
            font-size: 1.2em;
            opacity: 0.75;
            line-height: 1;
            padding: 0 2px;
            transition: opacity 0.15s;
        }
        .mark-item-header .mark-remove-btn:hover { opacity: 1; }
        .mark-item textarea {
            width: 100%;
            border: none;
            outline: none;
            padding: 9px 12px;
            min-height: 62px;
            font-size: 0.9em;
            resize: vertical;
            box-sizing: border-box;
            font-family: inherit;
        }
        .marks-container { margin-top: 0; }

        /* ── Inline editable table widget ─────────────────────────── */
        .content-table-widget {
            margin-top: 10px;
            border: 1.5px solid #667eea;
            border-radius: 8px;
            overflow: hidden;
            background: #fff;
        }
        .content-table-toolbar {
            background: #f0f4ff;
            border-bottom: 1.5px solid #667eea;
            padding: 6px 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 6px;
        }
        .content-table-toolbar .ctb-left {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .content-table-toolbar .ctb-right {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .content-table-toolbar span {
            font-size: 0.8em;
            font-weight: 600;
            color: #4f46e5;
            margin-inline-end: 4px;
        }
        .ctb {
            border: none;
            border-radius: 5px;
            padding: 4px 10px;
            font-size: 0.78em;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 3px;
            transition: background 0.15s;
        }
        .ctb-add  { background: #10b981; color: #fff; }
        .ctb-add:hover  { background: #059669; }
        .ctb-del  { background: #ef4444; color: #fff; }
        .ctb-del:hover  { background: #b91c1c; }
        .ctb-close { background: #6b7280; color: #fff; }
        .ctb-close:hover { background: #374151; }
        .content-table-grid { overflow-x: auto; }
        .content-table-grid table { border-collapse: collapse; width: 100%; }
        .content-table-grid td {
            border: 1px solid #d1d5db;
            padding: 3px;
            min-width: 100px;
        }
        .content-table-grid td textarea {
            width: 100%;
            min-height: 48px;
            border: none;
            outline: none;
            resize: both;
            padding: 5px;
            font-size: 0.88em;
            font-family: inherit;
            background: transparent;
            box-sizing: border-box;
        }

        /* ── Multi-image gallery (Info Sheet content sections) ─────────── */
        .content-image-gallery {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }
        .content-img-thumb {
            position: relative;
            display: inline-block;
            border-radius: 6px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.12);
            background: #f3f4f6;
        }
        .content-img-thumb img {
            display: block;
            max-width: 160px;
            max-height: 120px;
            object-fit: cover;
        }
        .content-img-delete {
            position: absolute;
            top: 4px;
            right: 4px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: rgba(220,38,38,0.85);
            color: white;
            border: none;
            cursor: pointer;
            font-size: 0.95em;
            font-weight: 700;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.15s;
        }
        .content-img-delete:hover { background: #dc2626; }

        .footer {
            text-align: center;
            color: #888;
            font-size: 0.95em;
            padding: 10px 0;
            margin-top: 10px;
            border-top: 1px solid #e0e0e0;
        }

        /* 3.80.0: a floating notice. It used to sit in the page flow after
           the disclaimer, so «Module saved» appeared far below the screen
           and 💾 looked as if it had done nothing. */
        .status {
            position: fixed;
            left: 50%;
            bottom: 24px;
            transform: translateX(-50%);
            z-index: 100000;
            width: max-content;
            max-width: min(92vw, 560px);
            margin: 0;
            padding: 12px 18px;
            border-radius: 10px;
            box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
            text-align: center;
            font-weight: 600;
            overflow-wrap: anywhere;
            cursor: pointer;
            display: none;
        }

        .status.success {
            background: #d4edda;
            color: #155724;
            display: block;
        }

        .status.error {
            background: #f8d7da;
            color: #721c24;
            display: block;
        }

        .status.info {
            background: #cfe2ff;
            color: #084298;
            display: block;
        }

        .image-preview {
            margin-top: 10px;
            max-width: 300px;
        }

        .image-preview img {
            max-width: 100%;
            border-radius: 5px;
            border: 2px solid #e0e0e0;
        }

        /* Modal Styles */

        .modal-body {
            padding: 30px;
        }

        /* Objective Formatting Controls */
        .objective-wrapper {
            display: flex;
            flex-direction: column;
        }

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

        .objective-header label {
            margin: 0;
        }

        .objective-formatting-controls {
            display: flex;
            gap: 5px;
        }

        .objective-format-btn {
            background: #667eea;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 0.85em;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .objective-format-btn:hover {
            background: #5568d3;
            transform: translateY(-1px);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
        }

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

        .objective-format-btn.clear {
            background: #ef4444;
        }

        .objective-format-btn.clear:hover {
            background: #dc2626;
        }

        /* Rename, beside the clear and delete controls on a content
           card. Sized to sit level with the 28px clear square rather
           than matching the 36px icon-only buttons: it carries a word,
           so it is a small pill, not a square. The theme layer paints
           every button silver, which is where its colour comes from. */
        /* Shown only when a card container is empty. Dashed, muted and
           quiet: it is a state, not an error, and the button underneath
           it is the actual instruction. */
        /* The row label. An input, but it must still READ as a table
           label — a grid of boxed fields turns a reference table into a
           form. Borderless until hovered or focused, so the affordance
           appears exactly when the pointer says the user is looking for
           it, and the table stays a table the rest of the time. */
        /* The lead-in between «Objective:» and the list. It prints as a
           heading in the DOCX, so it is shown as one here: same blue,
           same weight. Borderless until hovered or focused, like the
           cover-table labels — it is prefilled boilerplate the author
           will usually leave alone, and a permanent input box around it
           would read as one more field waiting to be filled. */
        .objective-lead {
            width: 100%;
            margin: 0 0 8px;
            padding: 6px 8px;
            font-weight: 600;
            font-size: 0.95em;
            font-family: inherit;
            color: #0070C0;
            background: transparent;
            border: 1px solid transparent;
            border-radius: 6px;
            outline: none;
            text-align: start;
            transition: border-color 0.15s, background 0.15s;
        }
        .objective-lead::placeholder { color: #9bbfd8; font-weight: 500; }
        .objective-lead:hover { border-color: #dfe3e8; background: rgba(255,255,255,0.7); }
        .objective-lead:focus { border-color: #3b82f6; background: #ffffff; }

        .cover-label {
            font-weight: 600;
            color: #374151;
            text-align: start;
            width: 100%;
            padding: 6px 8px;
            border: 1px solid transparent;
            border-radius: 6px;
            background: transparent;
            font-size: inherit;
            font-family: inherit;
            outline: none;
            transition: border-color 0.15s, background 0.15s;
        }
        .cover-label:hover  { border-color: #dfe3e8; background: rgba(255,255,255,0.7); }
        .cover-label:focus  { border-color: #3b82f6; background: #ffffff; }

        .mb-empty-hint {
            border: 1px dashed #c9cdc7;
            border-radius: 8px;
            padding: 14px 16px;
            color: #6b7280;
            font-size: 0.9em;
            text-align: center;
            background: transparent;
        }

        .btn-rename-section {
            background: #f5f5f3;
            color: #3f4a54;
            border: 1px solid #dfe3e8;
            height: 28px;
            padding: 0 10px;
            border-radius: 7px;
            cursor: pointer;
            font-size: 0.8em;
            font-weight: 600;
            white-space: nowrap;
            flex-shrink: 0;
            transition: background 0.15s, border-color 0.15s;
            line-height: 1;
        }
        .btn-rename-section .mb-ico { width: 15px; height: 15px; }
        .btn-rename-section:hover { background: #ebebe8; }

        /* A card the author has named. The dotted underline is the only
           signal that the heading is editable text rather than the
           numbered scaffolding — enough to notice, quiet enough not to
           compete with the section titles above it. */
        .step-label.is-renamed {
            border-bottom: 1px dotted #c4c7c2;
            padding-bottom: 1px;
        }

        .btn-clear-section {
            background: #f59e0b;
            color: white;
            border: none;
            width: 28px;
            height: 28px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.8em;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: background 0.2s;
            line-height: 1;
        }
        .btn-clear-section:hover { background: #d97706; }

        /* Export info message styling */
        .export-info {
            background: #eff6ff;
            border: 2px solid #93c5fd;
            color: #1e40af;
            padding: 12px 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            display: none;
            align-items: center;
            gap: 10px;
            font-size: 0.95em;
            line-height: 1.5;
        }

        .export-info.show {
            display: flex;
        }

        .export-warning {
            background: #fef3c7;
            border: 2px solid #fbbf24;
            color: #92400e;
        }

        /* ── Responsive helpers ─────────────────────────────────────── */
        .mgmt-row {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
        }
        .mgmt-row select {
            flex: 1;
            min-width: 120px;
        }
        .mgmt-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            flex-wrap: wrap;
            gap: 10px;
        }

        /* ══════════════════════════════════════════════════════════════
           RESPONSIVE BREAKPOINTS
           Desktop  : > 900px  (current default styles)
           Tablet   : 600–900px
           Mobile   : < 600px
           Small    : < 400px
        ══════════════════════════════════════════════════════════════ */

        /* ── Tablet (600–900px) ──────────────────────────────────────── */
        @media (max-width: 900px) {
            body {
                padding: 10px;
                padding-top: 68px;
                padding-bottom: env(safe-area-inset-bottom, 0px);
            }
            .container { padding: 20px 16px; border-radius: 14px; }

            /* Toolbar */
            .figma-toolbar {
                gap: 4px;
                padding: 0 12px;
                padding-left:  max(12px, env(safe-area-inset-left));
                padding-right: max(12px, env(safe-area-inset-right));
                height: 52px;
            }
            .figma-btn { padding: 5px 10px 5px 5px; font-size: 0.82em; }

            /* Tabs */
            .tabs-container { -webkit-overflow-scrolling: touch; }
            .tab  { padding: 10px 16px; font-size: 0.88em; }

            /* App title */
            .app-title-bar h1 { font-size: 1.6em; }

            /* Module/LO management */
            .mgmt-header { flex-wrap: wrap; gap: 8px; }

            /* Cover table */
            .cover-row { grid-template-columns: 1fr 1fr auto auto !important; }

            /* Assessment */
            .assessment-form { overflow-x: auto; }
        }

        /* ── Mobile (< 600px) ───────────────────────────────────────── */
        @media (max-width: 600px) {
            body {
                padding: 0;
                padding-top: 60px;
                padding-bottom: env(safe-area-inset-bottom, 0px);
                background: #667eea;
                -webkit-tap-highlight-color: transparent;
                touch-action: pan-y;
                overscroll-behavior-y: contain;
            }
            .container {
                padding: 14px 12px 24px;
                border-radius: 0;
                box-shadow: none;
                min-height: calc(100vh - 60px);
            }

            /* ── Toolbar ── */
            .figma-toolbar {
                height: 56px;
                padding: 0 8px;
                padding-left:  max(8px, env(safe-area-inset-left));
                padding-right: max(8px, env(safe-area-inset-right));
                gap: 2px;
                justify-content: space-around;
            }
            /* Hide text labels on mobile, keep icons */
            .figma-btn span:not(.figma-btn-icon) { display: none; }
            .figma-btn {
                padding: 7px;
                border-radius: 12px;
                border: none;
                background: transparent;
                flex-direction: column;
                gap: 2px;
                min-width: 44px;
                min-height: 44px;
                justify-content: center;
            }
            .figma-btn:hover { background: #f3f4f6; }
            .figma-btn-icon { width: 34px; height: 34px; font-size: 1.15em; }
            .figma-divider { display: none; }

            /* ── App title ── */
            .app-title-bar { margin-bottom: 16px; padding-bottom: 14px; }
            .app-title-bar h1 { font-size: 1.3em; }
            .app-title-bar p  { font-size: 0.8em; }

            /* ── Tabs: horizontally scrollable pill strip ── */
            .tabs-container {
                margin-bottom: 18px;
                margin-inline: -12px;
                padding: 0 12px;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
            }
            .tabs-container::-webkit-scrollbar { display: none; }
            .tabs {
                border-bottom: none;
                flex-wrap: nowrap;
                gap: 6px;
                padding-bottom: 4px;
            }
            .tab {
                padding: 9px 14px;
                font-size: 0.78em;
                border-radius: 20px;
                white-space: nowrap;
                flex-shrink: 0;
                background: #e5e7eb;
                min-height: 36px;
            }
            .tab.active {
                background: #667eea;
                color: white;
                box-shadow: 0 2px 8px rgba(102,126,234,0.35);
            }
            /* No bottom border trick — tabs are pills */
            .tab-content.active { border-radius: 12px; }

            /* ── Form elements: full-width touch-friendly ── */
            input[type="text"],
            input[type="number"],
            input[type="date"],
            select,
            textarea {
                font-size: 16px !important; /* prevents iOS zoom */
                border-radius: 8px;
            }
            .btn-action {
                padding: 10px 14px;
                font-size: 0.88em;
                min-height: 42px;
                touch-action: manipulation;
            }
            .btn-remove-sheet {
                padding: 10px 14px;
                font-size: 0.88em;
                min-height: 42px;
                touch-action: manipulation;
            }

            /* ── Management rows ── */
            .mgmt-header { flex-direction: column; align-items: stretch; gap: 8px; }
            .mgmt-header .btn-action { width: 100%; justify-content: center; }
            .mgmt-row { flex-direction: column; align-items: stretch; gap: 8px; }
            .mgmt-row label  { margin-bottom: 2px; }
            .mgmt-row select { width: 100%; }
            .mgmt-row .btn-action { width: 100%; justify-content: center; }

            /* ── Sheet nav header (info/activity tabs) ── */
            /* LO selector row */
            [id$="-lo-selector"] { font-size: 15px !important; }
            /* Controls row: stack vertically */
            #info-tab .title-section > div:nth-child(2),
            #activity-tab .title-section > div:nth-child(2) {
                flex-direction: column;
                align-items: stretch;
            }
            #info-tab .title-section > div:nth-child(2) > div,
            #activity-tab .title-section > div:nth-child(2) > div {
                justify-content: space-between;
                width: 100%;
            }
            #info-tab .title-section > div:nth-child(2) > button,
            #activity-tab .title-section > div:nth-child(2) > button {
                width: 100%;
                justify-content: center;
            }

            /* ── Title input rows ── */
            .title-input-row { flex-wrap: wrap; gap: 8px; }
            .title-input-row input[type="text"]:first-child {
                width: 72px !important;
                flex: 0 0 72px;
            }

            /* ── Resource / step rows ── */
            .step-header   { flex-wrap: wrap; gap: 8px; }

            /* ── Scrollable tables ── */
            .criteria-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
            .assessment-form          { overflow-x: auto; -webkit-overflow-scrolling: touch; }

            /* ── Cover table: 2-column on mobile ── */
            .cover-row { grid-template-columns: 1fr auto !important; gap: 6px !important; }

            /* ── Section/objective headers ── */
            .section-header { flex-wrap: wrap; gap: 8px; }
            .objective-formatting-controls { flex-wrap: wrap; gap: 4px; }
            .objective-format-btn { padding: 4px 8px !important; font-size: 0.78em !important; }

            /* ── Modal ── */

            /* ── LO sheets summary grid: 1 column ── */
            #lo-sheets-summary > div > div { grid-template-columns: 1fr; gap: 10px; }

            /* ── Back/Front cover upload areas ── */
            #front-cover-upload-area,
            #back-cover-upload-area { padding: 16px; }

            /* ── Proceed buttons full width ── */
            [onclick^="proceedToTab"] {
                width: 100%;
                text-align: center;
                justify-content: center;
            }

            /* ── References list ── */
            .ref-entry { flex-wrap: wrap; }

            /* ── Help tab: stack cards vertically ── */
            #help-tab .form-group > div:last-child { grid-template-columns: 1fr !important; }
        }

        /* ── Small phones (< 400px) ─────────────────────────────────── */
        @media (max-width: 400px) {
            .container { padding: 10px 8px 20px; }
            .tab  { padding: 8px 11px; font-size: 0.74em; }
            .figma-btn-icon { width: 30px; height: 30px; font-size: 1em; }
            .app-title-bar h1 { font-size: 1.15em; }
            .btn-action { padding: 9px 10px; font-size: 0.82em; }
        }


/* ── Content-language switch ────────────────────────────────────────
   Visually distinct from the (future) interface-language switch on
   purpose. Users conflate the two constantly, and the cost of the
   confusion is asymmetric: picking the wrong interface language is
   noticed instantly, picking the wrong content side means typing a
   paragraph into the slot meant for the other language. */
.content-lang-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
    padding: 8px 14px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.9em;
}
.content-lang-switch .cls-label { font-weight: 600; color: #334155; }
.content-lang-switch .cls-btn {
    padding: 5px 14px;
    border: 1px solid #94a3b8;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95em;
}
.content-lang-switch .cls-btn.active {
    background: #0ea5e9;
    border-color: #0ea5e9;
    color: #fff;
    font-weight: 600;
}
.content-lang-switch .cls-hint { margin-inline-start: auto; color: #64748b; font-variant-numeric: tabular-nums; }




/* ══════════════════════════════════════════════════════════════════
   RTL INTERFACE LAYER
   Hooked to html[dir="rtl"], which the i18n engine sets, and scoped to
   INTERFACE chrome only. Editor fields are not touched here: their
   direction follows contentLang, a different setting, and the two are
   allowed to disagree — an Arabic interface editing English content is
   a normal working state, not an error.
   ═══════════════════════════════════════════════════════════════════ */

/* NO flex-direction: row-reverse anywhere in this layer.
   That was the bug behind the screenshot: `dir="rtl"` ALREADY reverses
   the main axis of a flex row, so adding row-reverse reverses it a
   second time and lands back at left-to-right — which is why the first
   tab kept sitting on the left. A flex container in an RTL document
   needs no direction rule at all; it needs to be left alone.

   The same applied to .mgmt-header, .mgmt-row and .section-header, which
   is why the Module Management and Learning Outcome Management cards
   came out mirrored while the plain tabs did not. */

/* Body copy and headings inside the tabs. */
html[dir="rtl"] .tab-content,
html[dir="rtl"] .container,
html[dir="rtl"] .section,
html[dir="rtl"] h1, html[dir="rtl"] h2,
html[dir="rtl"] h3, html[dir="rtl"] h4,
html[dir="rtl"] label            { text-align: start; }

/* Interface tables: header cells too. */
html[dir="rtl"] table th         { text-align: start; }

/* CSS Grid does not flip the way flex does: `grid-template-columns` is
   physical, so a 2fr/2fr/2fr/auto row keeps its delete button on the
   physical right in both directions. Rows built with grid therefore need
   their column order stated for RTL — unlike flex, which needs nothing. */
html[dir="rtl"] .team-member-row { direction: rtl; }

/* Interface tables. Editor tables whose CELLS hold content are handled
   by applyContentDirection instead — a table can have an Arabic header
   row and English cells. */
html[dir="rtl"] table            { direction: rtl; }
html[dir="rtl"] table th,
html[dir="rtl"] table td         { text-align: start; }

/* Logical properties do the mirroring for spacing, so no rule here has
   to be written twice. Anything still using left/right in the original
   sheet is a candidate for conversion as it is touched. */
html[dir="rtl"] .btn-action,
html[dir="rtl"] .figma-btn       { margin-inline: 0 8px; }

/* Arabic renders short at the same nominal size; Tahoma carries the
   full Arabic range on Windows, which Segoe UI does not. */
html[dir="rtl"] body             { font-family: 'Segoe UI', Tahoma, 'Traditional Arabic', sans-serif; font-size: 1.04em; }

/* Emoji and arrows inside translated labels. An arrow glyph in an RTL
   run keeps its own direction unless isolated, so "المتابعة إلى … ←"
   renders with the arrow adrift. */
html[dir="rtl"] [data-i18n]      { unicode-bidi: isolate; }

/* ── Interface-language pills ───────────────────────────────────────
   Three pills, not a <select>: a dropdown costs two taps and hides the
   active language behind a closed control. */
.mb-lang-host { display: flex; gap: 6px; align-items: center; margin: 12px 0 0; }
#mbLangWrap { display: inline-flex; gap: 4px; }
.mb-lang-btn {
    padding: 4px 12px; border: 1px solid #94a3b8; background: #fff;
    border-radius: 6px; cursor: pointer; font-size: 0.85em; font-weight: 600;
}
.mb-lang-btn.is-active { background: #334155; border-color: #334155; color: #fff; }
#mbLangWrap.is-locked .mb-lang-btn { opacity: .55; cursor: not-allowed; }

/* An earlier `body.mb-rtl` block sat here duplicating the RTL layer
   above — and its row-reverse rules were half the reason the header
   cards came out mirrored. Deleted rather than fixed: two stylesheets
   competing over the same elements is how this bug survived one round
   of fixing already. `html[dir="rtl"]` is now the only RTL hook. */


/* ── Modal dialog ───────────────────────────────────────────────────
   Replaces alert/confirm/prompt, which cannot be translated: their
   buttons follow the browser's locale, not the page's. */
.mb-dialog-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(15, 23, 42, .55);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.mb-dialog {
    background: #fff; border-radius: 12px; padding: 24px;
    max-width: 480px; width: 100%;
    box-shadow: 0 20px 50px rgba(0,0,0,.3);
    font-size: 1em;
}
/* pre-line, not pre: the messages carry meaningful \n breaks but should
   still wrap at the box width. */
.mb-dialog-msg { white-space: pre-line; line-height: 1.6; color: #1e293b; }
.mb-dialog-input {
    width: 100%; margin-top: 16px; padding: 10px;
    border: 2px solid #cbd5e1; border-radius: 8px; font-size: 1em;
}
.mb-dialog-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.mb-dialog-btn {
    padding: 9px 20px; border-radius: 8px; border: 1px solid #cbd5e1;
    background: #fff; cursor: pointer; font-size: .95em; font-weight: 600;
    min-height: 44px;
}
.mb-dialog-ok { background: #0ea5e9; border-color: #0ea5e9; color: #fff; }
.mb-dialog-ok.is-danger { background: #dc2626; border-color: #dc2626; }
.mb-dialog-cancel { color: #475569; }


/* Inline layouts that reversed wrongly under dir=rtl.
   Grid is physical — grid-template-columns keeps its order regardless of
   direction — so every grid row that ends in an action button needs its
   direction stated. Flex needs nothing; adding row-reverse to flex is
   what broke the tabs in the first round. */
html[dir="rtl"] .cover-row,
html[dir="rtl"] .team-member-row,
html[dir="rtl"] .mgmt-row        { direction: rtl; }

/* Numeric fields stay LTR in both directions: digits read
   left-to-right in Arabic too, and flipping a number input only moves
   the caret to the wrong end. */
input[type="number"],
.resource-quantity               { direction: ltr; text-align: center; }

/* Emoji + label buttons. An emoji is direction-neutral and joins the
   surrounding run, so in an RTL line "🗑️ حذف" can render with the icon
   adrift. Isolating the label keeps the pair together. */
html[dir="rtl"] button [data-i18n] { unicode-bidi: isolate; }

/* The status banner and both language switches sit above the tabs and
   read as interface, so they follow the interface direction. */
html[dir="rtl"] .status,
html[dir="rtl"] .content-lang-switch,
html[dir="rtl"] .mb-lang-host    { direction: rtl; }

/* Modal actions: cancel/confirm are ordered in the DOM, and the flex row
   mirrors on its own. Only the alignment needs stating. */
html[dir="rtl"] .mb-dialog-actions { justify-content: flex-end; }

/* ═══════════════════════════════════════════════════════════════
   SIDE NAVIGATION  (silver rail)
   ---------------------------------------------------------------
   The section switcher moved from a top strip to a fixed vertical
   rail on the inline-start edge. The markup of the buttons is
   untouched: same <button class="tab" data-act="switchTab">, same
   .active class, so tabs.js / events.js keep working exactly as
   before — only their placement and skin change.

   Everything here is scoped to (min-width: 1025px). Below that the
   original pill strip stays in force, which is the right shape for
   a phone.

   Logical properties (inset-inline-start, border-inline-start,
   padding-inline) are used throughout so the rail flips to the
   right side by itself when the i18n engine sets html[dir="rtl"].
   ═══════════════════════════════════════════════════════════════ */

:root {
    --mb-nav-w:        272px;
    --mb-silver:       #DADCDE;
    --mb-silver-light: #EFF1F2;
    --mb-silver-dark:  #C6CACE;
    --mb-silver-line:  #BFC4C9;
    --mb-nav-ink:      #3F464D;
    --mb-nav-ink-soft: #6B7379;
    --mb-accent:       #667eea;
}

@media (min-width: 1025px) {

    /* Room for the rail. Logical, so RTL needs no second rule. */
    body { padding-inline-start: calc(var(--mb-nav-w) + 20px); }

    .tabs-container {
        position: fixed;
        inset-inline-start: 0;
        top: 56px;                       /* under the figma toolbar */
        bottom: 0;
        width: var(--mb-nav-w);
        z-index: 9990;

        display: flex;
        flex-direction: column;
        gap: 16px;

        margin: 0;
        padding: 18px 14px calc(20px + env(safe-area-inset-bottom, 0px));

        background: linear-gradient(180deg,
                    var(--mb-silver-light) 0%,
                    var(--mb-silver)      55%,
                    var(--mb-silver-dark) 100%);
        border-inline-end: 1px solid var(--mb-silver-line);
        box-shadow: 0 0 18px rgba(15, 23, 42, 0.13);

        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #AEB4BA transparent;
    }
    .tabs-container::-webkit-scrollbar        { display: block; width: 8px; }
    .tabs-container::-webkit-scrollbar-thumb  { background: #AEB4BA; border-radius: 8px; }
    .tabs-container::-webkit-scrollbar-track  { background: transparent; }

    /* ── Rail header ───────────────────────────────────────────── */
    .mb-nav-head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 4px 8px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.75);
        box-shadow: 0 1px 0 var(--mb-silver-line);
        flex-shrink: 0;
    }

    .mb-nav-mark {
        width: 34px;
        height: 34px;
        flex-shrink: 0;
        border-radius: 9px;
        background: var(--mb-accent);
        color: #fff;
        font-size: 0.78em;
        font-weight: 800;
        letter-spacing: 0.5px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
        direction: ltr;                  /* the mark is always "MB" */
    }

    .mb-nav-head-text { min-width: 0; }

    .mb-nav-title {
        display: block;
        font-size: 0.86em;
        font-weight: 700;
        color: var(--mb-nav-ink);
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    /* ── The list ──────────────────────────────────────────────── */
    .tabs {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 4px;
        flex: 1 1 auto;
        border-bottom: none;
        margin: 0;
        min-width: 0;
    }

    .tabs .tab {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        text-align: start;

        padding: 11px 14px;
        min-height: 46px;
        border-radius: 10px;
        border: 1px solid transparent;
        border-inline-start: 3px solid transparent;   /* accent slot, no shift */

        background: transparent;
        color: var(--mb-nav-ink);
        font-size: 0.94em;
        font-weight: 600;
        line-height: 1.4;

        white-space: normal;             /* long Arabic labels wrap */
        overflow-wrap: anywhere;
        flex-shrink: 0;
        transition: background 0.18s, color 0.18s, border-color 0.18s;
    }

    .tabs .tab:hover {
        background: rgba(255, 255, 255, 0.72);
        border-color: rgba(255, 255, 255, 0.9);
        border-inline-start-color: var(--mb-silver-dark);
        color: #2F3439;
    }

    .tabs .tab:focus-visible {
        outline: 2px solid var(--mb-accent);
        outline-offset: 2px;
    }

    .tabs .tab.active {
        background: #FFFFFF;
        color: var(--mb-accent);
        border-color: #FFFFFF;
        border-inline-start-color: var(--mb-accent);
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
    }

    /* Help sits at the foot of the rail, where a help entry belongs. */
    .tabs .tab:last-child {
        margin-top: auto;
        color: var(--mb-nav-ink-soft);
        font-size: 0.88em;
        min-height: 40px;
    }
    .tabs .tab:last-child.active { color: var(--mb-accent); }
    /* 3.38.0: Settings opens a dialog, it is not a page — it sits at the
       foot with Help, which then follows it directly. */
    .tabs .tab.mb-nav-settings {
        margin-top: auto;
        color: var(--mb-nav-ink-soft);
        font-size: 0.88em;
        min-height: 40px;
    }
    .tabs .tab.mb-nav-settings + .tab:last-child { margin-top: 0; }

    /* The panel no longer needs the strip's clearance. */
    .tab-content.active { border-radius: 14px; }
}

/* Phones and small tablets keep the original horizontal pill strip. */
@media (max-width: 1024px) {
    .mb-nav-head { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   SIDE NAVIGATION — collapse toggle
   ---------------------------------------------------------------
   src/sidenav.js only ever adds or removes .mb-nav-collapsed on
   <body>. The transform is the one place a physical axis is
   unavoidable (translate has no logical form), so RTL gets its
   own mirrored rule rather than a second class name.
   ═══════════════════════════════════════════════════════════════ */

.figma-btn-icon.silver {
    background: var(--mb-silver, #DADCDE);
    color: #3F464D;
    font-size: 1.05em;
    line-height: 1;
}

.mb-nav-toggle { padding: 6px; }

/* Suppress the slide on first paint while the saved state is restored. */
body.mb-nav-no-anim .tabs-container { transition: none !important; }

@media (min-width: 1025px) {

    .tabs-container {
        transition: transform 0.22s ease, visibility 0.22s;
    }

    body { transition: padding-inline-start 0.22s ease; }

    body.mb-nav-collapsed { padding-inline-start: 20px; }

    body.mb-nav-collapsed .tabs-container {
        transform: translateX(-100%);
        visibility: hidden;
    }

    html[dir="rtl"] body.mb-nav-collapsed .tabs-container {
        transform: translateX(100%);
    }

    body.mb-nav-collapsed .mb-nav-toggle .figma-btn-icon.silver {
        background: #EDEEF0;
        color: #8A9198;
    }
}

/* On phones the rail is already the horizontal pill strip, which is
   the right shape there — nothing to collapse, so the button goes. */
@media (max-width: 1024px) {
    .mb-nav-toggle { display: none; }
    .mb-nav-toggle + .figma-divider { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   VISUAL IDENTITY — paper #FCFCFB, silver controls, faded red for
   destructive actions
   ---------------------------------------------------------------
   This layer sits last on purpose. Much of the original palette
   lives in inline style="" attributes in the markup, which no
   ordinary rule can outrank, so the overrides here are matched on
   the attribute text itself ([style*="#667eea"]) and carry
   !important. That is the cost of re-skinning without editing
   several hundred inline attributes by hand — and it keeps every
   data-act, id and class exactly where the scripts expect them.

   Three colours do the whole job:
     paper    #FCFCFB   every surface
     silver   #DADCDE   every control at rest, and the rail
     faded red          delete / clear / remove only

   Destructive buttons are selected by INTENT, not by class:
   [data-act^="delete"] and friends also catch the rows that the
   renderers build at runtime, which a class list would miss.
   ═══════════════════════════════════════════════════════════════ */

:root {
    --mb-paper:       #FCFCFB;
    --mb-paper-sunk:  #F4F4F2;
    --mb-line:        #E4E5E2;
    --mb-line-strong: #D3D5D1;
    --mb-ink:         #3F464D;
    --mb-ink-soft:    #6B7379;

    /* Controls at rest — the toolbar's untouched state, everywhere. */
    --mb-btn:         linear-gradient(180deg, #FBFBFA 0%, #F0F0EE 100%);
    --mb-btn-hover:   linear-gradient(180deg, #F3F3F1 0%, #E4E5E2 100%);

    /* Destructive — present, not shouting. */
    /* Faded, not pink. The first pass tinted the whole button and it
       read as a coloured control; a destructive action needs to be
       recognisable, not loud. The fill is now within a shade of the
       silver used everywhere else, and the red carries in the text
       and the hairline only. Colour returns on hover, where the
       pointer has already committed to the button. */
    --mb-red:         linear-gradient(180deg, #FCFAFA 0%, #F4EFEE 100%);
    --mb-red-hover:   linear-gradient(180deg, #FAF0EE 0%, #F1DEDB 100%);
    --mb-red-line:    #E2D2CF;
    --mb-red-ink:     #A25B54;

    /* The former purple accent, de-saturated to graphite. */
    --mb-accent:      #5E666D;
}

/* ── Surfaces ──────────────────────────────────────────────────── */
body                       { background: #E8E9E6; }
.container                 { background: var(--mb-paper);
                             box-shadow: 0 18px 50px rgba(15,23,42,0.18); }
.tab-content.active        { background: var(--mb-paper) !important; }
.mb-dialog                 { background: var(--mb-paper); }

/* Panels that were painted white or grey inline, and the boxed areas. */
.container [style*="background: white"],
.container [style*="background:white"],
.container [style*="background: #fff"],
.container [style*="background:#fff"],
.container [style*="background: #f9fafb"],
.container [style*="background:#f9fafb"],
.container [style*="background: #f8f9fa"],
.container [style*="background: #f3f4f6"],
.container [style*="background: #f0f4ff"],
.container [style*="background:#f0f4ff"] { background: var(--mb-paper) !important; }

/* ── The old purple, neutralised ───────────────────────────────── */
[style*="color:#667eea"],
[style*="color: #667eea"]  { color: var(--mb-ink) !important; }

[style*="solid #667eea"]   { border-color: var(--mb-line-strong) !important; }

/* Purple fills: banners, avatars, table headers. */
[style*="background:#667eea"],
[style*="background: #667eea"],
[style*="background:linear-gradient(135deg,#667eea"],
[style*="background: linear-gradient(135deg, #667eea"] {
    background: linear-gradient(180deg, #6E767D 0%, #5A6167 100%) !important;
    box-shadow: none !important;
}

.app-title-bar h1,
h1, .section-title,
.step-label                { color: var(--mb-ink); }
.app-title-bar p           { color: var(--mb-ink-soft); }

/* ── Every control, at rest, is the toolbar's silver ───────────── */
button:not(.tab):not(.figma-btn):not(.mark-dropdown-item),
.container a[style*="background"],
.mb-dialog-btn {
    background: var(--mb-btn) !important;
    background-color: #F5F5F3 !important;
    color: var(--mb-ink) !important;
    border: 1px solid var(--mb-line-strong) !important;
    box-shadow: none !important;
    text-shadow: none;
    transition: background 0.15s, border-color 0.15s !important;
}

button:not(.tab):not(.figma-btn):not(.mark-dropdown-item):hover,
.container a[style*="background"]:hover,
.mb-dialog-btn:hover {
    background: var(--mb-btn-hover) !important;
    border-color: #C4C7C2 !important;
}

/* The toolbar keeps its own resting state; only the trash turns red. */
.figma-btn                 { background: #F7F7F5; border-color: var(--mb-line-strong); }
.figma-btn-icon.green,
.figma-btn-icon.blue,
.figma-btn-icon.purple     { background: #E9EAE7; }

/* ── Destructive actions: delete, clear, remove, reset ─────────── */
[data-act^="delete"],
[data-act^="remove"],
[data-act^="clear"],
[data-act*="Delete"],
[data-act*="Remove"],
[data-act*="Clear"],
.btn-clear,
.btn-remove,
.btn-remove-sheet,
.btn-clear-section,
.content-img-delete,
.objective-format-btn.clear,
.mb-dialog-ok.is-danger {
    background: var(--mb-red);
    background-color: #F8F4F3 !important;
    color: var(--mb-red-ink);
    border: 1px solid var(--mb-red-line);
    box-shadow: none;
}

[data-act^="delete"]:hover,
[data-act^="remove"]:hover,
[data-act^="clear"]:hover,
[data-act*="Delete"]:hover,
[data-act*="Remove"]:hover,
[data-act*="Clear"]:hover,
.btn-clear:hover,
.btn-remove:hover,
.btn-remove-sheet:hover,
.btn-clear-section:hover,
.content-img-delete:hover,
.objective-format-btn.clear:hover,
.mb-dialog-ok.is-danger:hover {
    background: var(--mb-red-hover) !important;
    border-color: #D8BEB9 !important;
}

.figma-btn[data-act="clearAll"] {
    color: var(--mb-red-ink) !important;
}
.figma-btn[data-act="clearAll"] .figma-btn-icon.red { background: #F7E3E0; }

/* clearAndStartManual is a reset, not a delete — silver, not red. */
[data-act="clearAndStartManual"] {
    background: var(--mb-btn);
    color: var(--mb-ink);
    border: 1px solid var(--mb-line-strong);
}
[data-act="clearAndStartManual"]:hover { background: var(--mb-btn-hover) !important; }

/* ── Remaining coloured leftovers in the stylesheet itself ─────── */

.export-info               { background: var(--mb-paper-sunk); border-color: var(--mb-line); }
.mb-dialog-ok              { background: var(--mb-btn) !important; }

/* Borders and rules throughout drop to one hairline value. */
.app-title-bar             { border-bottom-color: var(--mb-line); }
table, table th, table td  { border-color: var(--mb-line-strong) !important; }

input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus             { border-color: #A9AEB3 !important; outline: none; }

/* ── The rail, re-tuned to the same three colours ──────────────── */
@media (min-width: 1025px) {
    .tabs-container        { background: linear-gradient(180deg, #EFF0EE 0%, #DADCDE 60%, #CDD0D2 100%); }
    .tabs .tab.active      { background: var(--mb-paper); color: var(--mb-ink);
                             border-color: var(--mb-paper);
                             border-inline-start-color: #6E767D; }
    .mb-nav-mark           { background: #6E767D; box-shadow: none; }
}

@media (max-width: 1024px) {
    .tab                   { background: #EDEEEB; color: var(--mb-ink); }
    .tab.active            { background: #6E767D !important; color: #fff !important;
                             box-shadow: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER IN THE HELP PANEL  +  UPDATE BANNER
   ═══════════════════════════════════════════════════════════════ */

/* The footer is now a block of the Help panel rather than the last
   thing under every tab, so it needs the panel's own separation
   instead of the page's. */
#help-tab .footer {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--mb-line);
    color: var(--mb-ink-soft);
    font-size: 0.85em;
    text-align: center;
}

#help-tab .mb-credit { color: var(--mb-ink); }

/* Belt and braces: if a stray .footer is ever rendered outside the
   Help panel again, it stays out of the working panels. */
.container > .footer { display: none; }

/* ── Update banner ─────────────────────────────────────────────
   Bottom of the viewport, above the safe-area inset, and it never
   covers the toolbar. Hidden until version.js opens it. */
.mb-update-bar {
    position: fixed;
    inset-inline: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    margin-inline: auto;
    max-width: 720px;
    z-index: 10000;

    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;

    /* 3.80.9: the same blue as the Module / Learning unit bar (.mb-ctx-bar) */
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border: 0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(2, 132, 199, 0.35);

    transform: translateY(140%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s;
}

.mb-update-bar.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.mb-update-icon  { font-size: 1.15em; flex-shrink: 0; }
.mb-update-copy  { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.mb-update-text  { font-size: 0.92em; font-weight: 700; color: #fff; line-height: 1.35; }
.mb-update-note  { font-size: 0.8em;  color: #e0f2fe; line-height: 1.35; }

.mb-update-bar button {
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.86em;
    font-weight: 600;
    cursor: pointer;
    min-height: 38px;
}

/* The primary action is white on the blue; «Later» is a quiet outline. */
.mb-update-bar .mb-update-go {
    background: #fff !important;
    color: #0369a1 !important;
    border-color: #fff !important;
}
.mb-update-bar .mb-update-go:hover { background: #e0f2fe !important; }
.mb-update-bar .mb-update-later {
    color: #fff !important;
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
}
.mb-update-bar .mb-update-later:hover { background: rgba(255, 255, 255, 0.16) !important; }

@media (max-width: 600px) {
    .mb-update-bar { flex-wrap: wrap; gap: 8px; }
    .mb-update-copy { flex-basis: 100%; }
    .mb-update-bar button { flex: 1 1 auto; }
}

/* ═══════════════════════════════════════════════════════════════
   LANGUAGE MENU IN THE TOOLBAR
   ---------------------------------------------------------------
   One list of three languages. The original switchers are still in
   the document — hidden, not deleted, because src/ renders into
   their ids and the menu clicks them. Hidden with position/clip
   rather than display:none: a display:none subtree is not laid out,
   and a click dispatched into one is far less likely to behave the
   way the original renderer expects.
   ═══════════════════════════════════════════════════════════════ */

.mb-lang-legacy {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    pointer-events: none;
}

.mb-lang-menu { position: relative; display: inline-flex; }

.mb-lang-trigger { gap: 6px; }
.mb-lang-trigger #mb-lang-current {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
    min-width: 22px;
    text-align: center;
}
.mb-lang-caret { font-size: 0.75em; color: var(--mb-ink-soft); transition: transform 0.15s; }
.mb-lang-menu.is-open .mb-lang-caret { transform: rotate(180deg); }
.mb-lang-menu.is-open .mb-lang-trigger { background: var(--mb-btn-hover) !important; border-color: #C4C7C2 !important; }

.mb-lang-panel {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    width: 210px;
    max-width: calc(100vw - 24px);
    z-index: 10001;

    background: var(--mb-paper);
    border: 1px solid var(--mb-line-strong);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    padding: 6px;

    display: flex;
    flex-direction: column;
    gap: 2px;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

.mb-lang-menu.is-open .mb-lang-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mb-lang-panel .mb-lang-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    text-align: start;
    background: transparent;
    border: 1px solid transparent;
    color: var(--mb-ink);
    min-height: 40px;
}

.mb-lang-panel .mb-lang-opt:hover {
    background: var(--mb-paper-sunk) !important;
    border-color: var(--mb-line) !important;
}

.mb-lang-panel .mb-lang-opt.is-active {
    background: #6E767D;
    border-color: #6E767D;
    color: #fff;
}

.mb-lang-opt-code {
    font-size: 0.78em;
    letter-spacing: 0.5px;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

/* Each option carries its own script direction: "Français" must read
   left-to-right even when the interface is Arabic, and vice versa. */
.mb-lang-opt[data-lang="ar"] .mb-lang-opt-name { direction: rtl; }
.mb-lang-opt[data-lang="en"] .mb-lang-opt-name,
.mb-lang-opt[data-lang="fr"] .mb-lang-opt-name { direction: ltr; }

@media (max-width: 600px) {
    .mb-lang-panel {
        position: fixed;
        top: 62px;
        inset-inline: 12px;
        width: auto;
    }
    .mb-lang-trigger #mb-lang-current { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   TYPEFACES
   ---------------------------------------------------------------
   Cairo for Arabic, the system UI stack for English and French.

   JetBrains Mono is gone. It is a code face — fixed width, tall
   ascenders, built to make `l` and `1` distinguishable in a
   terminal — and none of that helps a form full of prose.

   The Latin side needs no font file. "Segoe UI, system-ui, ..."
   is what the tool has always rendered in, and a system face has
   one advantage a hosted one cannot match: it is already on the
   machine, so it paints on the first frame with no swap and no
   request. If a specific Latin face is wanted later, it drops
   into --mb-font-latin and nothing else changes.

   Two things the wiring has to get right:

   1. The switch is keyed to <html lang>, which the i18n engine
      already sets — not a class anyone has to remember to add.

   2. Cairo stays in the Latin fallback chain. The INTERFACE
      language and the CONTENT language are still separate
      underneath: someone working in the English interface types
      Arabic into the bilingual fields, and the Latin stack has
      thin Arabic coverage at best. Without the fallback that text
      renders in whatever the browser substitutes, which is how
      one paragraph ends up in three typefaces.

   3. Form controls do not inherit font-family. They are listed
      explicitly or the inputs stay on the browser default while
      everything around them changes.
   ═══════════════════════════════════════════════════════════════ */

/* Several spellings listed on purpose. GitHub Pages is case-sensitive
   and the file may have shipped as Cairo.woff2, cairo.woff2 or with a
   -VF suffix; the browser walks this list and uses the first URL that
   resolves, so one of them being wrong costs nothing. If ALL of them
   404, the stack falls through to Segoe UI / Tahoma and the interface
   still reads correctly — check the Network tab for which name is
   actually served and the rest can be deleted. */
@font-face {
    font-family: 'Cairo';
    src: url('fonts/Cairo.woff2')         format('woff2'),
         url('fonts/cairo.woff2')         format('woff2'),
         url('fonts/Cairo-VF.woff2')      format('woff2'),
         url('fonts/Cairo-Regular.woff2') format('woff2');
    font-weight: 200 1000;              /* variable */
    font-style: normal;
    font-display: swap;
}

:root {
    --mb-font-latin:  'Segoe UI', system-ui, -apple-system, 'Helvetica Neue',
                      Arial, 'Cairo', sans-serif;
    --mb-font-arabic: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
    --mb-font:        var(--mb-font-latin);
}

html[lang^="ar"],
html[dir="rtl"] { --mb-font: var(--mb-font-arabic); }

body,
button,
input,
select,
textarea,
.figma-btn,
.tab,
.mb-dialog,
.mb-dialog-input,
.mb-update-bar,
.mb-lang-panel,
.footer { font-family: var(--mb-font) !important; }

/* Cairo carries a taller x-height than the Latin stack and reads a
   size larger at the same value; the interface was tuned for the
   latter, so the Arabic side comes back down a step. */
html[lang^="ar"] body { font-size: 1em; }

/* Version strings, counters and codes read as data, not prose. */
.mb-update-bar .mb-update-note,
#mb-credit,
.cls-hint,
.mb-lang-opt-code { font-variant-numeric: tabular-nums; }

/* ── Free text sections (intro pages + learning outcomes) ────
   Same shape in both hosts so the user learns one control once.
   Rows are built by blocks.js; this file styles them. */
.mb-blocks {
    margin-top: 30px;
    padding: 15px;
    background: var(--mb-paper-sunk, #f9fafb);
    border: 1px solid var(--mb-line, #e5e7eb);
    border-radius: 8px;
}
.mb-blocks--lo { margin-top: 15px; }

.mb-blocks-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.mb-blocks-label { font-weight: 600; color: var(--mb-ink, #374151); }
.mb-blocks-note  { font-size: 0.9em; color: var(--mb-ink-soft, #6b7280); }

.mb-block {
    background: var(--mb-paper, #fff);
    border: 1px solid var(--mb-line, #e5e7eb);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}
.mb-block-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }

.mb-block-title {
    flex: 1; min-width: 0;
    padding: 8px 10px;
    border: 2px solid var(--mb-line, #d1d5db);
    border-radius: 6px;
    font-size: 1em; font-weight: 600;
    color: var(--mb-ink, #374151);
    background: var(--mb-paper, #fff);
}
.mb-block-title:focus { outline: 2px solid #667eea; outline-offset: 1px; border-color: #667eea; }

.mb-block-remove {
    flex-shrink: 0;
    padding: 8px 10px; border: none; border-radius: 6px;
    cursor: pointer; font-size: 0.9em; line-height: 1;
}

.mb-block-body {
    width: 100%;
    padding: 10px;
    border: 2px solid var(--mb-line, #d1d5db);
    border-radius: 6px;
    font-size: 1em; font-family: inherit;
    background: var(--mb-paper, #fff);
    color: var(--mb-ink, #374151);
    resize: vertical;
}

.mb-block-add {
    background: #10b981; color: #fff;
    border: none; border-radius: 6px;
    padding: 8px 16px;
    font-weight: 600; font-size: 0.9em;
    cursor: pointer;
}
.mb-block-add:hover { filter: brightness(0.95); }
.mb-block-add:focus-visible { outline: 2px solid #065f46; outline-offset: 2px; }

/* A section whose body is empty is a draft, not a document page.
   The interface says so quietly rather than blocking the field. */
.mb-block.is-empty { border-style: dashed; opacity: 0.85; }

@media (max-width: 640px) {
    .mb-block-head { flex-wrap: wrap; }
    .mb-block-title { flex-basis: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   COLLAPSIBLE CARD  (.mb-fold)  +  FRAMEWORK CARD  (.mb-tvqf-*)
   ──────────────────────────────────────────────────────────────
   The fold is a <details>/<summary>, so everything below is
   appearance only — no state, no height animation, no aria
   attributes to keep in sync. `list-style: none` (plus the WebKit
   pseudo-element) removes the browser's own triangle so the bar
   can carry its own chevron on the far end, where the tool's
   other disclosure controls put it.
   ══════════════════════════════════════════════════════════════ */
.mb-fold {
    margin-top: 15px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    overflow: hidden;
    background: var(--mb-paper, #fff);
}

/* Silver, with dark ink. The saturated bar read as a call to action —
   it was the loudest thing on the tab, for a card that is optional and
   that most projects will never open. A neutral bar says "there is more
   here" without competing with the Proceed button below it, and it
   matches the toolbar and the icon buttons, which are the tool's other
   two neutral surfaces. */   /* Safari/Chrome */

/* margin-inline-start, not margin-left: the chevron has to sit at the
   END of the bar, which is the left edge in an Arabic interface. */

/* The note and the clear button share a row: the destructive control
   sits at the END of it, away from the fields it would empty. */

/* Divides the two halves of one card — it is a section heading, not a
   second bar. */

/* ── The field grid ─────────────────────────────────────────
   auto-fit rather than a fixed column count, so the card reflows on a
   phone without a media query of its own. */

.mb-tvqf-field { display: flex; flex-direction: column; gap: 5px; }

.mb-tvqf-label {
    font-size: 0.88em;
    font-weight: 600;
    color: var(--mb-ink, #374151);
    margin: 0;
}

.mb-tvqf-input {
    width: 100%;
    padding: 9px 11px;
    border: 2px solid var(--mb-line, #d1d5db);
    border-radius: 6px;
    font-size: 0.95em;
    font-family: inherit;
    background: var(--mb-paper, #fff);
    color: var(--mb-ink, #374151);
    text-align: start;
    margin-bottom: 0;
}
.mb-tvqf-input:focus { outline: 2px solid #667eea; outline-offset: 1px; border-color: #667eea; }
textarea.mb-tvqf-input { min-height: 0; resize: vertical; }

.mb-tvqf-hint { font-size: 0.8em; color: var(--mb-ink-soft, #9ca3af); }

/* Mirrored from the cover table — shown so the card reads as a whole
   card, greyed so it is obvious they are not edited here. */
.mb-tvqf-field--mirror .mb-tvqf-input {
    background: #f3f4f6;
    border-style: dashed;
    color: var(--mb-ink-soft, #6b7280);
    cursor: default;
}

/* ── Paste-image button & fallback paste zone ─────────────────────
   The paste button reuses .btn-add-image's geometry so the two sit as a
   pair, and only changes hue: teal reads as "same family, different
   source" where a second green would read as a duplicate button. */
.btn-paste-image {
    background: #0d9488;
}
.btn-paste-image:hover {
    background: #0f766e;
}

/* The fallback target for Ctrl+V. It is contenteditable, so it needs a
   visible edge — an invisible box that must be focused to work is a dead
   end for the user who cannot see where to press. min-height keeps it a
   comfortable target on touch; the caret is hidden because nothing typed
   here is ever kept. */
.mb-paste-zone {
    margin-top: 14px;
    min-height: 90px;
    border: 2px dashed #94a3b8;
    border-radius: 8px;
    background: #f8fafc;
    padding: 10px;
    outline: none;
    caret-color: transparent;
    overflow: hidden;
}
.mb-paste-zone:focus {
    border-color: #0d9488;
    background: #f0fdfa;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}

/* ============================================================
   Learning Guide — toggle card + read-only preview
   ============================================================ */

.lg-card {
    margin-top: 30px;
    padding: 18px 20px;
    background: #f5f3ff;
    border: 2px solid #a78bfa;
    border-radius: 10px;
}
.lg-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.lg-card-label { font-weight: 700; color: #5b21b6; font-size: 1.05em; }
.lg-card-note  { color: #6b7280; font-size: 0.85em; }
.lg-question   { margin: 6px 0 12px; color: #374151; font-weight: 600; }
.lg-choices    { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.lg-choice     { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: #374151; }
.lg-choice input { width: 17px; height: 17px; accent-color: #7c3aed; cursor: pointer; }
.lg-preview-btn {
    margin-inline-start: auto;
    padding: 8px 18px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9em;
    letter-spacing: 0.03em;
}
.lg-hint { margin: 12px 0 0; color: #6b7280; font-size: 0.85em; line-height: 1.6; }

/* Same silver-flattening rule in this theme applies to every button
   (see the `button:not(.tab)…` rule earlier in this file), so the
   preview button marks itself with colour rather than fighting a fill
   that would lose to `!important` anyway. */
button#lg-preview-btn {
    color: #5b21b6;
    border-color: #a78bfa;
    font-weight: 700;
}
button#lg-preview-btn:disabled {
    color: #9ca3af !important;
    border-color: #e5e7eb !important;
}

/* ── Preview overlay ───────────────────────────────────────── */
.lg-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(17, 24, 39, 0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.lg-modal {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    width: min(900px, 100%);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.lg-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    color: #fff;
}
.lg-modal-title { font-weight: 700; font-size: 1.05em; }
.lg-close {
    background: transparent; border: none; color: #fff;
    font-size: 1.1em; cursor: pointer; padding: 2px 6px; line-height: 1;
}
.lg-readonly-note {
    padding: 9px 20px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.85em;
    border-bottom: 1px solid #fde68a;
}
.lg-modal-body { padding: 20px; overflow-y: auto; }
.lg-modal-foot { padding: 12px 20px; border-top: 1px solid #e5e7eb; text-align: end; }
.lg-close-btn {
    background: #e5e7eb; border: none; padding: 8px 20px;
    border-radius: 7px; font-weight: 600; cursor: pointer; color: #374151;
}

.lg-block { margin-bottom: 28px; }
.lg-lo-label { font-size: 0.85em; color: #6b7280; margin-bottom: 4px; }
.lg-page-title { font-weight: 700; color: #1f2937; margin-bottom: 8px; font-size: 1.05em; }
.lg-empty { color: #6b7280; font-style: italic; }

.lg-table { width: 100%; border-collapse: collapse; font-size: 0.92em; }
.lg-table th, .lg-table td {
    border: 1px solid #9ca3af;
    padding: 8px 10px;
    vertical-align: top;
    line-height: 1.7;
}
.lg-table th { background: #ede9fe; color: #4c1d95; }
.lg-table tr.lg-head-row td { background: #f9fafb; }
.lg-instr { margin: 0; padding-inline-start: 18px; }
.lg-instr li { margin-bottom: 4px; }

/* ── Word export settings dialog (word_settings.js) ──────────
   Scoped under .ws-* so nothing here can reach the rest of the tool.
   The dialog is direction-aware via a dir attribute on the overlay
   rather than a language class, because it is opened fresh each time
   and the interface language is known at that moment. */
.ws-overlay {
    position: fixed; inset: 0; z-index: 10050;
    background: rgba(15, 23, 42, .45);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.ws-modal {
    background: #fff; border-radius: 14px;
    width: min(560px, 100%); max-height: 88vh;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    font-size: 0.95em;
}
.ws-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 700; font-size: 1.05em;
}
.ws-modal .ws-head button.ws-x {
    background: none; background-color: transparent;
    border: none; box-shadow: none; cursor: pointer;
    font-size: 1.5em; line-height: 1; color: #6b7280; padding: 0 4px;
}
.ws-modal .ws-head button.ws-x:hover { color: #111827 !important; background: none !important; }
.ws-body { padding: 18px 20px; overflow-y: auto; }
.ws-note {
    background: #f0f9ff; border: 1px solid #bae6fd; color: #075985;
    border-radius: 8px; padding: 10px 12px; margin: 0 0 16px;
    font-size: .88em; line-height: 1.55;
}
.ws-note-sm { margin: 8px 0 18px; font-size: .84em; }
.ws-group {
    margin: 18px 0 10px; font-size: .95em; font-weight: 700; color: #374151;
    border-bottom: 1px solid #f1f5f9; padding-bottom: 6px;
}
.ws-group:first-of-type { margin-top: 4px; }
.ws-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; margin-bottom: 10px; flex-wrap: wrap;
}
.ws-row > label { color: #374151; font-weight: 600; font-size: .92em; }
.ws-select {
    border: 1px solid #d1d5db; border-radius: 7px;
    padding: 6px 10px; font-size: .92em; background: #fff; cursor: pointer;
    min-width: 96px;
}
.ws-swatches { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Why these selectors are this long ──────────────────────
   `button:not(.tab):not(.figma-btn):not(.mark-dropdown-item)` above
   paints every remaining button silver with !important. Two things
   beat it, and BOTH are needed:

     1. !important — an inline `style="background:#0070C0"` loses to an
        !important declaration, which is why the first build rendered
        eight empty grey boxes.
     2. Specificity — that rule scores (0,3,1). A bare `.ws-swatch` is
        (0,1,0) and still loses even with !important on both sides.
        `.ws-modal .ws-swatches button.ws-swatch.ws-c-XXXXXX` is
        (0,4,1) and wins outright.

   The colour is a literal per-swatch class rather than a custom
   property, so it survives anywhere var() does not and can be asserted
   against a real computed style in the test suite.

   These eight rules mirror WS_PALETTE in word_settings.js. Changing one
   list means changing the other. */
.ws-modal .ws-swatches button.ws-swatch {
    width: 26px; height: 26px;
    border-radius: 6px; cursor: pointer;
    border: 2px solid transparent;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .18) inset;
    padding: 0; min-width: 0; margin: 0;
}
.ws-modal .ws-swatches button.ws-swatch.ws-c-0070C0,
.ws-modal .ws-swatches button.ws-swatch.ws-c-0070C0:hover {
    background: #0070C0 !important; background-color: #0070C0 !important;
}
.ws-modal .ws-swatches button.ws-swatch.ws-c-1F3864,
.ws-modal .ws-swatches button.ws-swatch.ws-c-1F3864:hover {
    background: #1F3864 !important; background-color: #1F3864 !important;
}
.ws-modal .ws-swatches button.ws-swatch.ws-c-375623,
.ws-modal .ws-swatches button.ws-swatch.ws-c-375623:hover {
    background: #375623 !important; background-color: #375623 !important;
}
.ws-modal .ws-swatches button.ws-swatch.ws-c-7B241C,
.ws-modal .ws-swatches button.ws-swatch.ws-c-7B241C:hover {
    background: #7B241C !important; background-color: #7B241C !important;
}
.ws-modal .ws-swatches button.ws-swatch.ws-c-5B2C6F,
.ws-modal .ws-swatches button.ws-swatch.ws-c-5B2C6F:hover {
    background: #5B2C6F !important; background-color: #5B2C6F !important;
}
.ws-modal .ws-swatches button.ws-swatch.ws-c-3F464D,
.ws-modal .ws-swatches button.ws-swatch.ws-c-3F464D:hover {
    background: #3F464D !important; background-color: #3F464D !important;
}
.ws-modal .ws-swatches button.ws-swatch.ws-c-0F6674,
.ws-modal .ws-swatches button.ws-swatch.ws-c-0F6674:hover {
    background: #0F6674 !important; background-color: #0F6674 !important;
}
.ws-modal .ws-swatches button.ws-swatch.ws-c-000000,
.ws-modal .ws-swatches button.ws-swatch.ws-c-000000:hover {
    background: #000000 !important; background-color: #000000 !important;
}
.ws-modal .ws-swatches button.ws-swatch.is-on,
.ws-modal .ws-swatches button.ws-swatch.is-on:hover {
    border-color: #111827 !important;
    box-shadow: 0 0 0 2px #fff inset, 0 0 0 3px #111827 !important;
}
.ws-preview {
    border: 1px solid #e5e7eb; border-radius: 10px;
    padding: 16px; background: #fff;
}
.ws-pv-line { margin-bottom: 8px; line-height: 1.4; }
.ws-pv-th {
    margin-top: 10px; padding: 7px 12px; border-radius: 4px;
    font-weight: 700; font-size: .92em; text-align: center;
}
.ws-foot {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px; border-top: 1px solid #e5e7eb;
}
.ws-foot-right { display: flex; gap: 10px; margin-inline-start: auto; }
.ws-msg { font-size: .84em; line-height: 1.35; flex: 1 1 auto; min-width: 0; }
.ws-msg-ok   { color: #2F6B57; font-weight: 600; }
.ws-msg-warn { color: #8A5A20; }
/* Same override problem, same fix — the footer buttons and the close
   × would otherwise all come out silver. */
.ws-modal .ws-foot button.ws-btn {
    border: 1px solid transparent; border-radius: 8px;
    padding: 9px 18px; font-weight: 600; font-size: .92em;
    cursor: pointer; box-shadow: none;
}
.ws-modal .ws-foot button.ws-btn-ghost {
    background: #f3f4f6; background-color: #f3f4f6;
    color: #374151; border-color: #e5e7eb;
}
.ws-modal .ws-foot button.ws-btn-ghost:hover {
    background: #e5e7eb !important; background-color: #e5e7eb !important;
}
.ws-modal .ws-foot button.ws-btn-primary {
    background: #4A7C6A; background-color: #4A7C6A;
    color: #fff; border-color: #4A7C6A;
}
.ws-modal .ws-foot button.ws-btn-primary:hover {
    background: #3E6A5A !important; background-color: #3E6A5A !important;
    border-color: #3E6A5A !important;
}
/* Disabled means "nothing to save" — the resting state of a dialog the
   user has only looked at. */
.ws-modal .ws-foot button.ws-btn-primary:disabled {
    background: #DCE5E1 !important; background-color: #DCE5E1 !important;
    color: #7C8B85 !important; border-color: #DCE5E1 !important;
    cursor: default;
}

/* HTML-section checkboxes in the export settings dialog. */
.ws-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 4px 14px; }
.ws-modal .ws-checks label.ws-check {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    font-size: .89em; color: #374151; padding: 3px 0;
}
.ws-modal .ws-checks input[type="checkbox"] {
    width: 16px; height: 16px; flex-shrink: 0;
    accent-color: #4A7C6A; margin: 0;
}

/* Link / QR modal (link_modal.js). Reuses the export-settings shell. */
.ws-modal .lm-stack { flex-direction: column; align-items: stretch; gap: 6px; }
.ws-modal .lm-input {
    width: 100%; border: 1px solid #d1d5db; border-radius: 8px;
    padding: 9px 11px; font: inherit; font-size: .92em; background: #fff;
}
.ws-modal .lm-radios { display: flex; gap: 22px; flex-wrap: wrap; }
.ws-modal .lm-radios .ws-check { gap: 9px; }
.ws-modal .lm-radios input[type="radio"] {
    width: 16px; height: 16px; margin: 0; accent-color: #7c3aed;
}
.lm-note {
    border-radius: 9px; padding: 10px 13px; margin: 12px 0 4px;
    font-size: .86em; line-height: 1.6;
}
.lm-note-video { background: #f3f0ff; border: 1px solid #ddd6fe; color: #4c1d95; }
.lm-note-page  { background: #f0f9ff; border: 1px solid #bae6fd; color: #075985; }
.lm-dim { color: #8b93a8; font-size: .84em; line-height: 1.55; }
.lm-auto { margin-top: 6px; }
.lm-qr { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.lm-qr img { width: 88px; height: 88px; object-fit: contain; border: 1px solid #e5e7eb; border-radius: 8px; }
.btn-link-modal.has-link { box-shadow: 0 0 0 2px #c4b5fd; }

/* Performance-criteria title bar.
   The inline `background:#667eea; color:white` was repainted grey by the
   theme layer while the text stayed white — a white label on a mid-grey
   bar, and the placeholder fainter still. Owning both colours in one
   rule is the only way to keep them in step. */
.mb-criteria-title-bar {
    background: linear-gradient(180deg, #4A5568 0%, #3C4655 100%);
    box-shadow: none;
}
.mb-criteria-title,
.criteria-table-container input.mb-criteria-title {
    background: transparent;
    border: none;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}
.mb-criteria-title::placeholder { color: rgba(255,255,255,.72) !important; opacity: 1; }

/* ════════════════════════════════════════════════════════════
   📚 Project modules panel (3.12.0) — src/module_library_ui.js
   Logical properties throughout: the panel sits at the inline END of
   the page, which is the right in English/French and the left in Arabic,
   without a second set of rules.
   ════════════════════════════════════════════════════════════ */
.mb-lib-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .28);
  z-index: 99980;
}
.mb-lib-panel {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(440px, 100vw);
  max-width: 100vw;
  box-sizing: border-box;
  background: #f8fafc;
  border-inline-start: 1px solid #e2e8f0;
  box-shadow: -12px 0 32px rgba(15, 23, 42, .18);
  z-index: 99985;
  display: flex; flex-direction: column;
  font-size: 15px;
  color: #0f172a;
}
.mb-rtl .mb-lib-panel { box-shadow: 12px 0 32px rgba(15, 23, 42, .18); }
.mb-lib-panel[hidden], .mb-lib-overlay[hidden] { display: none; }
.mb-lib-panel *, .mb-lib-panel *::before, .mb-lib-panel *::after { box-sizing: border-box; }

.mb-lib-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 16px;
  background: #0f766e; color: #fff;
}
.mb-lib-head h2 { margin: 0; font-size: 1.1em; font-weight: 700; color: #fff; }
.mb-lib-x {
  flex: none; width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff;
  font-size: 16px; cursor: pointer; padding: 0; box-shadow: none;
}
.mb-lib-x:hover { background: rgba(255,255,255,.15); transform: none; }

.mb-lib-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 16px; }
.mb-lib-foot { padding: 10px 16px; border-top: 1px solid #e2e8f0; background: #fff; }
.mb-lib-project select,
.mb-lib-sort select {
  width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px;
  background: #fff; font-size: .95em; color: #0f172a;
}
.mb-lib-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.mb-lib-btn {
  border: 1px solid #cbd5e1; background: #fff; color: #0f172a;
  padding: 7px 10px; border-radius: 8px; font-size: .85em; font-weight: 600;
  cursor: pointer; box-shadow: none; line-height: 1.2;
}
.mb-lib-btn:hover { background: #f1f5f9; transform: none; }
.mb-lib-btn.danger { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
.mb-lib-btn.primary { width: 100%; background: #0f766e; border-color: #0f766e; color: #fff; padding: 10px; font-size: .95em; }
.mb-lib-btn.primary:hover { background: #115e59; }
.mb-lib-link {
  border: none; background: none; color: #0f766e; font-weight: 600; text-decoration: underline;
  cursor: pointer; padding: 2px 4px; font-size: .9em; box-shadow: none;
}
.mb-lib-link:hover { background: none; color: #115e59; transform: none; }

.mb-lib-author {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px;
  padding: 8px 10px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
  font-size: .9em; margin-bottom: 10px;
}
.mb-lib-author em { color: #94a3b8; }

.mb-lib-storage {
  padding: 8px 10px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
  font-size: .82em; color: #475569; margin-bottom: 12px;
}
.mb-lib-st-bar { height: 6px; background: #e2e8f0; border-radius: 99px; overflow: hidden; margin-bottom: 6px; }
.mb-lib-st-bar i { display: block; height: 100%; width: 0; background: #0ea5e9; border-radius: 99px; }
.mb-lib-storage.is-high .mb-lib-st-bar i { background: #f59e0b; }
.mb-lib-st-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px; margin-top: 4px; }
.mb-lib-st-prot { color: #b45309; }
.mb-lib-st-prot.is-ok { color: #047857; }

.mb-lib-tools { display: grid; gap: 8px; margin-bottom: 8px; }
.mb-lib-search {
  width: 100%; min-width: 0; padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 8px;
  font-size: .95em; background: #fff;
}
.mb-lib-search:focus { outline: 2px solid #0f766e; outline-offset: 0; border-color: #0f766e; }
.mb-lib-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.mb-lib-filters button {
  border: 1px solid #cbd5e1; background: #fff; color: #334155; border-radius: 99px;
  padding: 5px 11px; font-size: .82em; font-weight: 600; cursor: pointer; box-shadow: none;
}
.mb-lib-filters button:hover { background: #f1f5f9; transform: none; }
.mb-lib-filters button.is-on { background: #0f766e; border-color: #0f766e; color: #fff; }
.mb-lib-sort { display: flex; align-items: center; gap: 8px; font-size: .85em; color: #475569; }
.mb-lib-sort span { white-space: nowrap; }
.mb-lib-count { font-size: .8em; color: #64748b; margin: 4px 0 8px; }

.mb-lib-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mb-lib-none { color: #64748b; text-align: center; padding: 20px 0; }
.mb-lib-item {
  display: grid; gap: 4px; width: 100%; text-align: start;
  padding: 10px 12px; background: #fff; color: #0f172a;
  border: 1px solid #e2e8f0; border-inline-start: 4px solid #cbd5e1; border-radius: 8px;
  cursor: pointer; font: inherit; box-shadow: none;
}
.mb-lib-item:hover { border-color: #94a3b8; background: #fff; transform: none; }
.mb-lib-item:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px; }
.mb-lib-item.is-open { border-color: #0f766e; border-inline-start-color: #0f766e; background: #f0fdfa; }
.mb-lib-item.is-loading { opacity: .6; cursor: progress; }
.mb-lib-line1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.mb-lib-code {
  font-weight: 700; font-size: .85em; color: #0f766e; background: #ccfbf1;
  padding: 1px 7px; border-radius: 5px; white-space: nowrap;
}
.mb-lib-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; flex: 1 1 60%; }
.mb-lib-here { font-size: .72em; font-weight: 700; color: #0f766e; text-transform: uppercase; letter-spacing: .02em; }
.mb-lib-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: .78em; color: #64748b; }
.mb-lib-line3 { display: flex; align-items: center; }
.mb-lib-prog { display: flex; align-items: center; gap: 8px; width: 100%; }
.mb-lib-bar { flex: 1; height: 6px; background: #e2e8f0; border-radius: 99px; overflow: hidden; }
.mb-lib-bar i { display: block; height: 100%; background: #10b981; border-radius: 99px; }
.mb-lib-pct { font-size: .78em; font-weight: 700; color: #047857; min-width: 3.2em; text-align: end; }
.mb-lib-badge {
  font-size: .76em; font-weight: 600; color: #6d28d9; background: #ede9fe;
  padding: 2px 8px; border-radius: 99px;
}

/* Button in the Module Management card */
.mb-lib-mgmt-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.mb-lib-mgmt-btns .btn-lib { background: #0f766e; }

@media (max-width: 720px) {
  .mb-lib-panel { width: 100vw; border-inline-start: none; }
  .mb-lib-mgmt-btns { flex-direction: column; align-items: stretch; width: 100%; }
}
@media (max-width: 400px) {
  .mb-lib-body { padding: 10px 12px; }
  .mb-lib-head { padding: 12px; }
  .mb-lib-foot { padding: 10px 12px; }
}

/* The tool's buttons are silver by a global !important rule (above).
   The panel keeps that look and overrides only what must read as a
   state: the active filter, the open module, the links, the close
   button on the teal header. */
#mb-lib-panel .mb-lib-link {
  background: transparent !important; border: none !important;
  color: #0f766e !important; padding: 2px 4px; min-height: 0;
}
#mb-lib-panel .mb-lib-link:hover { background: transparent !important; color: #115e59 !important; }
#mb-lib-panel .mb-lib-x {
  background: transparent !important; border: 1px solid rgba(255,255,255,.45) !important; color: #fff !important;
}
#mb-lib-panel .mb-lib-x:hover { background: rgba(255,255,255,.15) !important; }
#mb-lib-panel .mb-lib-filters button.is-on {
  background: #0f766e !important; border-color: #0f766e !important; color: #fff !important;
}
#mb-lib-panel .mb-lib-item { background: #fff !important; border-color: #e2e8f0 !important; border-inline-start: 4px solid #cbd5e1 !important; }
#mb-lib-panel .mb-lib-item:hover { border-color: #94a3b8 !important; }
#mb-lib-panel .mb-lib-item.is-open {
  background: #f0fdfa !important; border-color: #0f766e !important; border-inline-start-color: #0f766e !important;
}
#mb-lib-panel .mb-lib-btn.danger { color: #b91c1c !important; }

/* ════════════════════════════════════════════════════════════
   Module packages (3.13.0) — src/package_ui.js
   ════════════════════════════════════════════════════════════ */
.mb-lib-pkg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.mb-lib-pkg .mb-lib-btn { width: 100%; }
@media (max-width: 380px) { .mb-lib-pkg { grid-template-columns: 1fr; } }

.mb-pk-overlay {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(15, 23, 42, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; box-sizing: border-box;
}
.mb-pk-box {
  background: #fff; color: #0f172a; border-radius: 12px;
  width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; overflow-x: hidden;
  padding: 18px 18px 14px; box-sizing: border-box;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .3);
  font-size: 15px;
}
.mb-pk-box * { box-sizing: border-box; }
.mb-pk-title { margin: 0 0 10px; font-size: 1.05em; font-weight: 700; color: #0f172a; }
.mb-pk-msg { margin: 0 0 12px; white-space: pre-line; line-height: 1.55; color: #334155; }
.mb-pk-mod { font-weight: 700; color: #0f766e; margin-bottom: 10px; overflow-wrap: anywhere; }
.mb-pk-tablewrap { overflow-x: auto; margin-bottom: 12px; }
.mb-pk-cmp { width: 100%; border-collapse: collapse; font-size: .9em; }
.mb-pk-cmp th, .mb-pk-cmp td { padding: 7px 8px; border-bottom: 1px solid #e2e8f0; text-align: start; vertical-align: top; }
.mb-pk-cmp thead th { color: #475569; font-size: .88em; }
.mb-pk-cmp tbody th { color: #64748b; font-weight: 600; white-space: nowrap; }
.mb-pk-newer {
  display: inline-block; font-size: .78em; font-weight: 700; color: #047857; background: #d1fae5;
  padding: 1px 7px; border-radius: 99px; margin-inline-start: 4px;
}
.mb-pk-all { display: flex; align-items: center; gap: 8px; font-size: .9em; color: #334155; margin: 4px 0 12px; cursor: pointer; }
.mb-pk-all input { width: 18px; height: 18px; flex: none; }
.mb-pk-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.mb-pk-btn { padding: 9px 14px; border-radius: 8px; font-weight: 600; font-size: .92em; cursor: pointer; }
/* Specific enough to beat the global silver-button rule (0,3,1). */
.mb-pk-overlay .mb-pk-box button.mb-pk-btn.primary {
  background: #0f766e !important; border-color: #0f766e !important; color: #fff !important;
}
.mb-pk-pbar { height: 8px; background: #e2e8f0; border-radius: 99px; overflow: hidden; margin: 6px 0 10px; }
.mb-pk-pbar i { display: block; height: 100%; width: 0; background: #0f766e; border-radius: 99px; transition: width .2s; }
.mb-pk-ptext { font-size: .9em; color: #334155; min-height: 2.6em; overflow-wrap: anywhere; margin-bottom: 8px; }
@media (max-width: 420px) {
  .mb-pk-btns { flex-direction: column; align-items: stretch; }
  .mb-pk-btn { width: 100%; }
  .mb-pk-cmp tbody th { white-space: normal; }
}

.mb-pk-drophint {
  position: fixed; inset-inline: 16px; top: 72px; z-index: 99995;
  padding: 14px 16px; border: 2px dashed #0f766e; border-radius: 12px;
  background: rgba(240, 253, 250, .96); color: #0f766e; font-weight: 700; text-align: center;
  pointer-events: none; opacity: 0; transform: translateY(-6px); transition: opacity .15s, transform .15s;
}
.mb-pk-drophint.is-on { opacity: 1; transform: none; }

/* ════════════════════════════════════════════════════════════
   3.14.0 — panel views, projects list, read-only tabs, preview
   ════════════════════════════════════════════════════════════ */
.mb-lib-views { display: flex; gap: 0; padding: 0 16px; background: #0f766e; }
.mb-lib-views[hidden] { display: none; }
#mb-lib-panel .mb-lib-views button {
  flex: 1; background: transparent !important; color: rgba(255,255,255,.75) !important;
  border: none !important; border-bottom: 3px solid transparent !important; border-radius: 0;
  padding: 9px 6px; font-weight: 700; font-size: .9em; cursor: pointer;
}
#mb-lib-panel .mb-lib-views button.is-on { color: #fff !important; border-bottom-color: #fff !important; }
.mb-lib-pline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 10px;
  font-weight: 700; color: #0f172a;
}
.mb-lib-pname { min-width: 0; overflow-wrap: anywhere; }
.mb-lib-ro { font-size: .78em; font-weight: 700; color: #b45309; background: #fef3c7; padding: 2px 8px; border-radius: 99px; }
.mb-lib-warn { color: #b45309; font-weight: 600; }
.mb-lib-more { margin-bottom: 8px; }
.mb-lib-more summary {
  cursor: pointer; font-weight: 700; font-size: .9em; color: #0f766e; padding: 4px 2px; list-style-position: inside;
}
.mb-lib-more[open] summary { margin-bottom: 8px; }
.mb-lib-pkg .mb-lib-btn.wide { grid-column: 1 / -1; }

.mb-prj-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mb-prj {
  display: flex; align-items: stretch; gap: 6px;
  background: #fff; border: 1px solid #e2e8f0; border-inline-start: 4px solid #cbd5e1; border-radius: 8px; padding: 6px;
}
.mb-prj.is-open { border-color: #0f766e; border-inline-start-color: #0f766e; background: #f0fdfa; }
#mb-lib-panel .mb-prj-main {
  flex: 1; min-width: 0; display: grid; gap: 3px; text-align: start; padding: 6px 8px;
  background: transparent !important; border: none !important; cursor: pointer; font: inherit; color: #0f172a !important;
}
.mb-prj-name { font-weight: 700; overflow-wrap: anywhere; }
.mb-prj-sub { font-size: .82em; color: #475569; overflow-wrap: anywhere; }
.mb-prj-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: .78em; color: #64748b; }
.mb-prj-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.mb-prj-tags:empty { display: none; }
.mb-prj-tag { font-size: .72em; font-weight: 700; padding: 1px 8px; border-radius: 99px; }
.mb-prj-tag.is-here { color: #0f766e; background: #ccfbf1; }
.mb-prj-tag.is-busy { color: #b45309; background: #fef3c7; }
.mb-prj-acts { display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.mb-prj-acts .mb-lib-btn { padding: 5px 8px; min-width: 36px; }

/* Read-only tab */
.mb-ro-banner {
  position: fixed; z-index: 99970; inset-inline: 0; top: 56px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px;
  padding: 8px 14px; background: #fef3c7; color: #78350f; border-bottom: 1px solid #fcd34d;
  font-weight: 600; font-size: .9em; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.mb-ro-banner[hidden] { display: none; }
.mb-ro-banner.is-flash { background: #fde68a; }
.mb-ro-banner button {
  padding: 5px 12px !important; border-radius: 8px; font-weight: 700; cursor: pointer;
}
.mb-ro-banner button[data-ro="take"] { background: #b45309 !important; border-color: #b45309 !important; color: #fff !important; }
body.mb-readonly .container { padding-top: 44px; }

/* Preview */
.mb-prv-overlay { padding: 10px; }
.mb-prv-box {
  background: #fff; color: #0f172a; border-radius: 12px; width: min(1100px, 100%); height: calc(100vh - 20px);
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 50px rgba(15,23,42,.3); font-size: 15px;
}
.mb-prv-box * { box-sizing: border-box; }
.mb-prv-top { padding: 12px 16px; border-bottom: 1px solid #e2e8f0; }
.mb-prv-title { font-weight: 800; font-size: 1.05em; }
.mb-prv-sub { font-size: .85em; color: #475569; overflow-wrap: anywhere; margin-top: 2px; }
.mb-prv-note { font-size: .8em; color: #b45309; margin-top: 4px; }
.mb-prv-main { flex: 1; min-height: 0; display: flex; }
.mb-prv-list { width: 240px; flex: none; overflow-y: auto; border-inline-end: 1px solid #e2e8f0; padding: 8px; display: grid; align-content: start; gap: 6px; }
.mb-prv-box .mb-prv-mod {
  display: grid; gap: 2px; text-align: start; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: .85em;
}
.mb-prv-box .mb-prv-mod small { color: #64748b; }
.mb-prv-overlay .mb-prv-box button.mb-prv-mod.is-on { background: #f0fdfa !important; border-color: #0f766e !important; }
.mb-prv-doc { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mb-prv-head { padding: 8px 14px; border-bottom: 1px solid #f1f5f9; }
.mb-prv-mt { font-weight: 700; color: #0f766e; overflow-wrap: anywhere; }
.mb-prv-ml { font-size: .8em; color: #64748b; }
.mb-prv-status { font-size: .85em; color: #475569; padding: 0 14px; }
.mb-prv-status:empty { display: none; }
.mb-prv-frame { flex: 1; width: 100%; border: 0; background: #fff; }
.mb-prv-btns { padding: 10px 16px; border-top: 1px solid #e2e8f0; }
@media (max-width: 720px) {
  .mb-prv-main { flex-direction: column; }
  .mb-prv-list { width: auto; max-height: 30vh; border-inline-end: none; border-bottom: 1px solid #e2e8f0; }
  .mb-ro-banner { top: 50px; }
}

/* Dialogs asked from the library panel, the import or the preview must
   sit above them (panel 99985, package dialogs 100000). */
.mb-dialog-overlay { z-index: 100010 !important; }
.mb-prj-search {
  width: 100%; min-width: 0; padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 8px;
  font-size: .95em; background: #fff;
}
.mb-prj-search:focus { outline: 2px solid #0f766e; outline-offset: 0; border-color: #0f766e; }
.mb-pk-overlay .mb-prv-box button.mb-pk-btn.primary {
  background: #0f766e !important; border-color: #0f766e !important; color: #fff !important;
}

/* ════════════════════════════════════════════════════════════
   📁 Folder on this computer (3.15.0) — src/folder_sync.js
   ════════════════════════════════════════════════════════════ */
.mb-lib-folder {
  padding: 8px 10px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
  font-size: .85em; color: #334155; margin-bottom: 12px; display: grid; gap: 6px;
}
.mb-lib-folder[hidden] { display: none; }
.mb-fld-text { overflow-wrap: anywhere; line-height: 1.45; }
.mb-fld-note { color: #64748b; }
.mb-fld-status { overflow-wrap: anywhere; color: #475569; }
.mb-fld-status.is-ok { color: #047857; }
.mb-fld-status.is-warn { color: #b45309; }
/* 3.62.2: the folder permission is a toolbar button, not a bar (folder_sync.js). */
.mb-fld-chip[hidden] { display: none; }
.figma-btn.mb-fld-chip { color: #1d4ed8; border-color: #93c5fd; background: #eff6ff; font-weight: 700; }
.mb-ro-banner.mb-ro-banner button[data-ro="take"] { background: #b45309 !important; border-color: #b45309 !important; color: #fff !important; }

/* ── Context bar: Module + Learning Outcome (3.23.0) ──────────────
   One shape in the Information, Activity, Assessment and Training
   Structure Mapping tabs. Every size is fixed here (not by the text
   inside), so the bar does not move or change size when the user goes
   from one tab to another. */
.mb-ctx-bar {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border-radius: 10px; padding: 10px 14px; margin: 0 0 16px;
    min-height: 56px; box-sizing: border-box;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    box-shadow: 0 2px 8px rgba(14,165,233,0.25);
}
.mb-ctx-label { font-size: 0.82em; font-weight: 700; color: #e0f2fe; white-space: nowrap; letter-spacing: 0.03em; margin: 0; }
.mb-ctx-sep { color: rgba(255,255,255,0.6); font-size: 1.1em; font-weight: 300; flex-shrink: 0; }
.mb-ctx-bar .mb-ctx-sel {
    height: 36px; box-sizing: border-box; margin: 0;
    padding: 0 10px; border: 2px solid rgba(255,255,255,0.5); border-radius: 7px;
    font-size: 0.9em; font-weight: 600; background: white; cursor: pointer;
    min-width: 0; width: auto; text-overflow: ellipsis;
}
.mb-ctx-bar .mb-ctx-mod { flex: 0 1 260px; color: #0c4a6e; }
.mb-ctx-bar .mb-ctx-lo  { flex: 1 1 300px; color: #374151; }

/* ── 3.28.0: proposal cards edited in place; "📥 From Task Analysis" ── */
#mb-structure-proposal input.mb-item-title {
    width: 100%; box-sizing: border-box; margin: 0 0 2px; padding: 4px 8px;
    font-weight: 600; font-size: 1em; color: #1f2937;
    border: 1px solid transparent; border-radius: 6px; background: transparent;
}
#mb-structure-proposal input.mb-item-title:hover { border-color: #e5e7eb; background: #fff; }
#mb-structure-proposal input.mb-item-title:focus { border-color: #a5b4fc; background: #fff; outline: none; }
.mb-sel-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.mb-sel-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 4px 2px 9px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 999px; font-size: 0.8em; color: #374151; }
.mb-sel-chip > span { overflow-wrap: anywhere; }
.mb-sel-chip > button { width: auto; min-height: 0; margin: 0; padding: 0 6px; border: none !important;
    background: transparent !important; color: #9ca3af !important; font-size: 0.95em; line-height: 1.6; cursor: pointer; box-shadow: none !important; }
.mb-sel-chip > button:hover { color: #dc2626 !important; }
.mb-pick { margin-top: 10px; padding: 12px 14px; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 10px; }
.mb-pick-head { font-weight: 700; color: #075985; margin-bottom: 8px; }
.mb-pick-task { background: #fff; border: 1px solid #e0f2fe; border-radius: 8px; padding: 6px 10px; margin-bottom: 8px; }
.mb-pick-task > summary { cursor: pointer; font-weight: 700; color: #0369a1; font-size: 0.9em; }
.mb-pick-near { font-size: 0.82em; font-weight: 600; color: #0369a1; background: #e0f2fe; border-radius: 999px; padding: 1px 8px; }
.mb-pick-field { font-size: 0.8em; font-weight: 600; color: #4b5563; margin: 8px 0 2px; }
.mb-pick-row { display: flex; align-items: flex-start; gap: 8px; padding: 2px; margin: 0; font-weight: 400; font-size: 0.88em; color: #374151; cursor: pointer; }
.mb-pick-row input { width: auto; margin-top: 3px; flex-shrink: 0; }
.mb-pick-row.is-used { color: #9ca3af; cursor: default; }
.mb-pick-row em { font-size: 0.85em; color: #059669; font-style: normal; white-space: nowrap; }
.mb-pick-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.mb-pick-empty { color: #6b7280; font-size: 0.88em; margin: 0; }

/* ── 3.29.0: Undo / Redo buttons; guidance notes in the sheet tabs ── */
.figma-btn.mb-hist-btn.is-off { opacity: .45; }
/* 3.60.0: the guidance cards became the «?» button of the tab title
   (src/help_modal.js). */
.mb-tab-help-btn {
    flex: 0 0 auto; box-sizing: border-box; position: relative;
    width: 34px; height: 34px; min-width: 34px; max-width: 34px; min-height: 0; padding: 0;
    border-radius: 50%; border: 2px solid #6366f1; background: #eef2ff; color: #4338ca;
    font: inherit; font-size: 1.05em; font-weight: 800; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s, transform .15s;
}
.mb-tab-help-btn[hidden] { display: none; }
.mb-tab-help-btn:hover { background: #4f46e5; color: #fff; border-color: #4f46e5; transform: scale(1.08); }
.mb-tab-help-btn:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }
@media (hover: none) and (pointer: coarse) {
    .mb-tab-help-btn::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
}
.mb-hlp-overlay {
    position: fixed; inset: 0; z-index: 100020; display: flex; align-items: center; justify-content: center;
    padding: 20px; background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    animation: mbHlpFade .2s ease;
}
.mb-hlp-box {
    background: #fff; border-radius: 16px; width: 100%; max-width: 560px; max-height: 86vh;
    display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    animation: mbHlpSlide .22s ease; text-align: start;
}
.mb-hlp-box.is-wide { max-width: 720px; }
.mb-hlp-box:focus { outline: none; }
.mb-hlp-top { display: flex; align-items: center; gap: 12px; padding: 18px 22px 14px; flex-shrink: 0;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff); border-bottom: 1px solid #c7d2fe; }
.mb-hlp-ico { font-size: 1.6em; line-height: 1; }
.mb-hlp-title { margin: 0; font-size: 1.05em; font-weight: 800; color: #3730a3; }
.mb-hlp-body { padding: 14px 22px 20px; overflow-y: auto; }
.mb-hlp-head { margin: 14px 0 4px; font-size: .95em; font-weight: 800; color: #0f766e; }
.mb-hlp-head:first-child { margin-top: 4px; }
.mb-hlp-list { list-style: none; margin: 0 0 8px; padding: 0; }
.mb-hlp-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid #f1f5f9;
    font-size: .88em; line-height: 1.65; color: #334155; }
.mb-hlp-row strong { color: #1e293b; }
.mb-hlp-dot { color: #6366f1; font-weight: 800; flex-shrink: 0; }
.mb-hlp-note { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 10px 13px; margin: 6px 0 12px;
    font-size: .85em; line-height: 1.6; color: #92400e; }
.mb-hlp-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
.mb-hlp-ok { padding: 9px 22px; background: #667eea; color: #fff; border: none; border-radius: 8px; font: inherit;
    font-size: .9em; font-weight: 700; cursor: pointer; }
@keyframes mbHlpFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mbHlpSlide { from { transform: translateY(-14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ── 3.30.0: Content map (Training Structure Mapping) ─────────── */
.mb-cm { container-type: inline-size; background: #fffdf5; border: 1px solid #fde68a; border-radius: 10px; padding: 10px 14px; margin: 0 0 18px; }
.mb-cm > summary { cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; list-style: none; }
.mb-cm > summary::-webkit-details-marker { display: none; }
.mb-cm > summary::before { content: '▸'; color: #b45309; font-size: 0.9em; transition: transform .15s; }
.mb-cm[open] > summary::before { transform: rotate(90deg); }
html[dir="rtl"] .mb-cm > summary::before { content: '◂'; }
html[dir="rtl"] .mb-cm[open] > summary::before { transform: rotate(-90deg); }
.mb-cm-title { font-weight: 700; color: #92400e; margin-inline-end: 6px; }
.mb-cm-sum { font-size: 0.8em; font-weight: 600; color: #475569; background: #f1f5f9; border-radius: 999px; padding: 1px 9px; }
.mb-cm-sum.is-warn { color: #b45309; background: #fef3c7; }
.mb-cm-intro { margin: 8px 0 10px; font-size: 0.85em; color: #78350f; }
.mb-cm-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.mb-cm-bar .mb-cm-filter { width: auto; max-width: 100%; padding: 6px 8px; border: 1px solid #fcd34d; border-radius: 6px; font-size: 0.85em; background: #fff; }
.mb-cm-btn { width: auto; background: #fff; color: #92400e; border: 1px solid #fcd34d; border-radius: 6px; padding: 7px 14px; font-size: 0.85em; font-weight: 600; cursor: pointer; }
.mb-cm-btn:disabled { opacity: .5; cursor: default; }
.mb-cm-cols, .mb-cm-row { display: grid; grid-template-columns: minmax(0, 1fr) 92px 168px minmax(0, 190px); gap: 8px; align-items: center; }
.mb-cm-cols { font-size: 0.75em; font-weight: 700; color: #92400e; text-transform: uppercase; letter-spacing: .03em; padding: 0 10px 4px; }
.mb-cm-task { background: #fff; border: 1px solid #fde68a; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.mb-cm-task-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; font-weight: 700; color: #0369a1; font-size: 0.88em; margin-bottom: 4px; }
.mb-cm-tasklo { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: #475569; font-size: 0.92em; }
.mb-cm-tasklo select { width: auto; padding: 3px 6px; border: 1px solid #bae6fd; border-radius: 6px; font-size: 0.95em; }
.mb-cm-field { font-size: 0.76em; font-weight: 600; color: #6b7280; margin: 6px 0 2px; }
.mb-cm-row { padding: 4px 0; border-top: 1px dashed #f1f5f9; }
.mb-cm-row select { width: 100%; min-width: 0; padding: 3px 6px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 0.82em; background: #fff; }
.mb-cm-text { font-size: 0.87em; color: #1f2937; overflow-wrap: anywhere; }
.mb-cm-row.is-none .mb-cm-text { color: #9ca3af; }
.mb-cm-row.is-issue { background: #fffbeb; }
.mb-cm-mine { color: #b45309; font-size: 0.9em; }
.mb-cm-status { min-width: 0; }
.mb-cm-st { display: inline-block; max-width: 100%; font-size: 0.76em; font-weight: 600; border-radius: 999px; padding: 1px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.mb-cm-st.is-new { background: #e0f2fe; color: #0369a1; }
.mb-cm-st.is-done { background: #dcfce7; color: #166534; }
.mb-cm-st.is-draft { background: #ede9fe; color: #5b21b6; }
.mb-cm-st.is-none, .mb-cm-st.is-same { background: #f1f5f9; color: #64748b; }
.mb-cm-st.is-warn { background: #fef3c7; color: #b45309; }
.mb-cm-where { display: block; font-size: 0.72em; color: #92400e; margin-top: 2px; overflow-wrap: anywhere; }
.mb-cm-empty { color: #9ca3af; font-size: 0.85em; font-style: italic; }
/* Narrow map (the tab beside the sidebar, a tablet): the item on its
   own line, the two choices and the status under it. */
@container (max-width: 700px) {
    .mb-cm-cols { display: none; }
    .mb-cm-row { grid-template-columns: 92px minmax(0, 168px) minmax(0, 1fr); padding: 6px 0; }
    .mb-cm-text { grid-column: 1 / -1; }
}
@container (max-width: 430px) {
    .mb-cm-row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
    .mb-cm-status { grid-column: 1 / -1; }
}

/* ── 3.31.0: "See also" — references instead of repeated items ──── */
.mb-cm-refs { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-inline-start: 4px; vertical-align: middle; }
.mb-cm-ref { display: inline-flex; align-items: center; gap: 2px; font-size: 0.74em; font-weight: 600; color: #3730a3; background: #e0e7ff; border-radius: 999px; padding: 0 2px 0 8px; }
.mb-cm-ref > button { width: auto; min-height: 0; padding: 0 5px !important; margin: 0; font-size: 0.95em; line-height: 1.5; border: none !important; background: transparent !important; color: #6366f1 !important; cursor: pointer; box-shadow: none !important; }
.mb-cm-ref > button:hover { color: #dc2626 !important; }
.mb-cm-row select.mb-cm-refadd { width: auto; padding: 0 4px; font-size: 0.74em; border: 1px dashed #a5b4fc; border-radius: 999px; color: #4338ca; background: #fff; }
.mb-seealso { margin: 0 0 14px; padding: 8px 14px; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 10px; color: #312e81; }
.mb-seealso-head { font-weight: 700; font-size: 0.92em; }
.mb-seealso ul { margin: 6px 0 4px; padding-inline-start: 20px; font-size: 0.88em; line-height: 1.7; }
.mb-seealso-note { font-size: 0.78em; color: #4c51bf; }
.mb-cm-row select.mb-cm-refadd { opacity: .5; }
.mb-cm-row:hover select.mb-cm-refadd, .mb-cm-row select.mb-cm-refadd:focus { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════
   3.33.0 — "Suggested content" in the Information, Activity and
   Assessment tabs (src/suggest_panel.js), the Coverage view and
   Distribution settings (src/coverage_view.js). Logical properties
   only, so the layout mirrors in Arabic; wraps down to 360 px.
   ══════════════════════════════════════════════════════════════════ */
.mb-sp { container-type: inline-size; margin: 0 0 16px; padding: 10px 14px; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 12px; }
.mb-sp > summary { cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; list-style: none; }
.mb-sp > summary::-webkit-details-marker { display: none; }
.mb-sp > summary::before { content: '▸'; color: #0369a1; font-size: 0.9em; transition: transform .15s; }
.mb-sp[open] > summary::before { transform: rotate(90deg); }
html[dir="rtl"] .mb-sp > summary::before { content: '◂'; }
html[dir="rtl"] .mb-sp[open] > summary::before { transform: rotate(-90deg); }
.mb-sp-title { font-weight: 800; color: #075985; font-size: 1em; margin-inline-end: 4px; }
.mb-sp-count { font-size: 0.76em; font-weight: 700; border-radius: 999px; padding: 1px 9px; white-space: nowrap; }
.mb-sp-count.is-new { background: #fef3c7; color: #92400e; }
.mb-sp-count.is-ok { background: #dbeafe; color: #1e40af; }
.mb-sp-count.is-built { background: #dcfce7; color: #166534; }
.mb-sp-intro { margin: 8px 0 10px; font-size: 0.84em; line-height: 1.6; color: #0c4a6e; }
.mb-sp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.mb-sp-gap { flex: 1 1 auto; }
.mb-sp-compact-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }   /* 3.65.1 */
.mb-sp.is-compact .mb-sp-empty { margin: 6px 0 0; }
.mb-sp-filter { width: auto; max-width: 100%; padding: 6px 8px; border: 1px solid #93c5fd; border-radius: 8px; background: #fff; font-size: 0.85em; }
#info-tab .mb-sp-btn, #activity-tab .mb-sp-btn, #assessment-tab .mb-sp-btn, .mb-cov-overlay .mb-cov-box button.mb-sp-btn {
    width: auto; min-height: 36px; padding: 6px 12px; margin: 0; border-radius: 8px; font-size: 0.84em; font-weight: 700; cursor: pointer;
}
#info-tab .mb-sp-btn.is-main, #activity-tab .mb-sp-btn.is-main, #assessment-tab .mb-sp-btn.is-main, .mb-cov-overlay .mb-cov-box button.mb-sp-btn.is-main {
    background: #0284c7 !important; border-color: #0284c7 !important; color: #fff !important;
}
#info-tab .mb-sp-btn.is-quiet, #activity-tab .mb-sp-btn.is-quiet, #assessment-tab .mb-sp-btn.is-quiet, .mb-cov-overlay .mb-cov-box button.mb-sp-btn.is-quiet {
    background: #fff !important; border-color: #bae6fd !important; color: #075985 !important;
}
.mb-sp-btn:disabled { opacity: .45; cursor: default; }
.mb-sp-group { background: #fff; border: 1px solid #e0f2fe; border-radius: 10px; padding: 6px 10px; margin-bottom: 8px; }
.mb-sp-group-head { font-weight: 700; color: #0369a1; font-size: 0.86em; padding: 2px 0 4px; overflow-wrap: anywhere; }
.mb-sp-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: start; gap: 6px 8px; padding: 6px 0; border-top: 1px dashed #e0f2fe; }
.mb-sp-group-head + .mb-sp-row { border-top: none; }
.mb-sp-row.is-built { opacity: .78; }
.mb-sp-row.is-issue .mb-sp-text { color: #b45309; }
.mb-sp-row.is-flash { animation: mbSpFlash 2.4s ease; border-radius: 8px; }
@keyframes mbSpFlash { 0%, 60% { background: #fef9c3; box-shadow: 0 0 0 3px #fde047; } 100% { background: transparent; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .mb-sp-row.is-flash { animation: none; background: #fef9c3; } }
.mb-sp-check { width: 18px; height: 18px; margin: 3px 0 0; min-height: 0; flex-shrink: 0; }
.mb-sp-src { font-size: 1em; line-height: 1.4; cursor: help; }
.mb-sp-body { min-width: 0; }
.mb-sp-text { font-size: 0.9em; line-height: 1.55; color: #1f2937; overflow-wrap: anywhere; }
.mb-sp-note { font-size: 0.76em; color: #64748b; margin-top: 2px; overflow-wrap: anywhere; }
.mb-sp-edited { color: #7c3aed; cursor: help; }
.mb-sp-edit { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.mb-sp-edit textarea { flex: 1 1 220px; min-width: 0; min-height: 0 !important; padding: 6px 8px; border: 1px solid #93c5fd; border-radius: 8px; font-size: 0.9em; }
.mb-sp-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 6px; max-width: 460px; }
.mb-sp-st { font-size: 0.74em; font-weight: 700; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.mb-sp-st.is-new { background: #fef3c7; color: #92400e; }
.mb-sp-st.is-ok { background: #dbeafe; color: #1e40af; }
.mb-sp-st.is-built { background: #dcfce7; color: #166534; }
.mb-sp-also { font-size: 0.85em; letter-spacing: 1px; cursor: help; }
.mb-sp-acts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.mb-sp .mb-sp-row button.mb-sp-ico, .mb-sp .mb-sp-row button.mb-sp-mini {
    width: auto; min-width: 30px; min-height: 30px; height: 30px; padding: 0 8px; margin: 0;
    border-radius: 8px; font-size: 0.85em; font-weight: 700; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff !important; border: 1px solid #cbd5e1 !important; color: #334155 !important;
}
.mb-sp .mb-sp-row button.mb-sp-ico.is-on { background: #1d4ed8 !important; border-color: #1d4ed8 !important; color: #fff !important; }
.mb-sp .mb-sp-row button.mb-sp-ico.is-del:hover { color: #dc2626 !important; border-color: #fca5a5 !important; }
.mb-sp .mb-sp-row button.mb-sp-mini.is-main { background: #0284c7 !important; border-color: #0284c7 !important; color: #fff !important; }
.mb-sp-act, .mb-sp-lo { width: auto; max-width: 170px; height: 30px; padding: 0 6px; font-size: 0.78em; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: #334155; }
.mb-sp-row .mb-sp-act { max-width: 118px; }
.mb-sp-lo.is-missing { border-color: #f59e0b; background: #fffbeb; }
.mb-sp-empty { color: #64748b; font-size: 0.85em; font-style: italic; margin: 4px 0; }
/* Narrow panel (a phone, the tab beside the sidebar): the item takes
   the line, its state and actions go under it. */
@container (max-width: 640px) {
    .mb-sp-row { grid-template-columns: auto auto minmax(0, 1fr); }
    .mb-sp-side { grid-column: 1 / -1; justify-content: flex-start; max-width: none; padding-inline-start: 28px; }
}
@media (hover: none) and (pointer: coarse) {
    .mb-sp .mb-sp-row button.mb-sp-ico, .mb-sp .mb-sp-row button.mb-sp-mini, .mb-sp-act, .mb-sp-lo { min-height: 40px !important; height: 40px; min-width: 40px; }
}

/* Tab buttons: items awaiting approval in that kind of sheet. */
.tabs .tab[data-sp-count]::after {
    content: attr(data-sp-count);
    margin-inline-start: auto; padding: 0 7px; min-width: 20px; text-align: center;
    border-radius: 999px; background: #f59e0b; color: #fff; font-size: 0.74em; font-weight: 800; line-height: 1.6;
}

/* ── Coverage / Distribution settings dialogs ─────────────── */
.mb-cov-overlay { position: fixed; inset: 0; z-index: 99990; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, .55); }
.mb-cov-box { background: #fff; border-radius: 14px; width: 100%; max-width: 920px; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.mb-cov-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #0c4a6e; color: #fff; }
.mb-cov-head h3 { margin: 0; font-size: 1.05em; flex: 1 1 auto; color: #fff !important; }
.mb-cov-overlay .mb-cov-box button.mb-cov-x { width: 34px; height: 34px; min-height: 34px !important; padding: 0 !important; border-radius: 8px; background: rgba(255,255,255,.14) !important; border: none !important; color: #fff !important; cursor: pointer; flex-shrink: 0; }
.mb-cov-body { padding: 12px 16px; overflow: auto; }
.mb-cov-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px; border-top: 1px solid #e2e8f0; background: #f8fafc; }
.mb-cov-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 700; color: #0c4a6e; font-size: 0.9em; }
.mb-cov-bar { flex: 1 1 160px; height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.mb-cov-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #34d399, #059669); }
.mb-cov-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 6px; }
.mb-cov-lo { width: auto; max-width: 100%; padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 0.85em; }
.mb-cov-pending { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85em; font-weight: 600; color: #334155; margin: 0; }
.mb-cov-pending input { width: auto; margin: 0; }
.mb-cov-legend { font-size: 0.8em; color: #475569; margin: 4px 0 10px; line-height: 1.6; }
.mb-cov-task { border: 1px solid #e2e8f0; border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.mb-cov-task-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; padding: 6px 10px; background: #f1f5f9; font-weight: 700; font-size: 0.85em; color: #0f172a; }
.mb-cov-task-n { font-weight: 600; color: #475569; }
.mb-cov-row, .mb-cov-def { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 76px); align-items: center; gap: 6px; padding: 5px 10px; border-top: 1px solid #f1f5f9; }
.mb-cov-row.is-head, .mb-cov-def.is-head { border-top: none; font-size: 0.74em; font-weight: 700; color: #475569; text-align: center; padding-bottom: 2px; }
.mb-cov-row.is-head span:first-child, .mb-cov-def.is-head span:first-child { text-align: start; }
.mb-cov-row.is-none { opacity: .55; }
.mb-cov-item { min-width: 0; font-size: 0.86em; color: #1f2937; overflow-wrap: anywhere; }
.mb-cov-item small { display: block; font-size: 0.82em; color: #64748b; }
.mb-cov-cell { justify-self: center; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 30px; border-radius: 8px; font-weight: 800; font-size: 0.95em; }
.mb-cov-overlay .mb-cov-box button.mb-cov-cell { min-height: 30px !important; padding: 0 !important; cursor: pointer; }
.mb-cov-overlay .mb-cov-box button.mb-cov-cell.is-built { background: #dcfce7 !important; color: #166534 !important; border-color: #86efac !important; }
.mb-cov-overlay .mb-cov-box button.mb-cov-cell.is-ok { background: #dbeafe !important; color: #1e40af !important; border-color: #93c5fd !important; }
.mb-cov-overlay .mb-cov-box button.mb-cov-cell.is-new { background: #fffbeb !important; color: #92400e !important; border-color: #fcd34d !important; }
.mb-cov-cell.is-off { color: #cbd5e1; }
/* 3.64.0: distribution method (default / manual / AI) and pickable cells */
.mb-cov-modes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 8px; }
.mb-cov-modes-h { font-size: 0.85em; color: #0f172a; }
.mb-cov-overlay .mb-cov-box button.mb-cov-mode { min-height: 30px !important; padding: 4px 12px !important; border-radius: 999px !important; border: 1px solid #cbd5e1 !important; background: #fff !important; color: #334155 !important; font-size: 0.85em; font-weight: 700; cursor: pointer; }
.mb-cov-overlay .mb-cov-box button.mb-cov-mode.is-ai { border-color: #0284c7 !important; color: #075985 !important; }
.mb-cov-overlay .mb-cov-box button.mb-cov-mode:disabled { opacity: .6; cursor: progress; }
.mb-cov-overlay .mb-cov-box button.mb-cov-mode.is-on { background: #0c4a6e !important; color: #fff !important; border-color: #0c4a6e !important; }
.mb-cov-overlay .mb-cov-box button.mb-cov-cell.is-pick { background: #fff !important; color: #94a3b8 !important; border: 1px dashed #cbd5e1 !important; }
.mb-cov-overlay .mb-cov-box button.mb-cov-cell.is-pick.is-on { background: #fffbeb !important; color: #92400e !important; border: 1px solid #fcd34d !important; }
.mb-tab-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.mb-cov-def { grid-template-columns: minmax(0, 1fr) 170px repeat(3, 84px); }   /* 3.62.0: + the mark */
.mb-cov-def > span { text-align: center; }
.mb-cov-def > span:first-child { text-align: start; font-size: 0.88em; overflow-wrap: anywhere; }
.mb-cov-def.is-changed > span:first-child em { font-style: normal; font-size: 0.78em; font-weight: 700; color: #b45309; background: #fef3c7; border-radius: 999px; padding: 0 6px; }
.mb-cov-def input { width: 20px; height: 20px; margin: 0; }
@media (max-width: 560px) {
    .mb-cov-overlay { padding: 0; align-items: stretch; }
    .mb-cov-box { max-height: 100vh; border-radius: 0; }
    .mb-cov-row, .mb-cov-def { grid-template-columns: minmax(0, 1fr) repeat(3, 40px); gap: 4px; padding: 5px 8px; }
    .mb-cov-def { grid-template-columns: minmax(0, 1fr) 110px repeat(3, 40px); }
    .mb-cov-kl { display: none; }        /* the icons name the columns; the legend explains them */
}

/* ── 3.34.0: one language per text ───────────────────────────── */
.mb-sp-text.is-other-lang { color: #6b7280; }
.mb-sp-lang { display: inline-block; margin-inline-start: 4px; padding: 0 6px; border-radius: 6px; font-size: 0.7em; font-weight: 800; letter-spacing: .04em; color: #92400e; background: #fef3c7; border: 1px solid #fcd34d; cursor: help; vertical-align: middle; direction: ltr; }
.mb-sp-langbar { margin: 0 0 10px; padding: 8px 12px; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 10px; color: #78350f; font-size: 0.84em; line-height: 1.6; }
.mb-sp-langbar p { margin: 0 0 6px; }
.mb-sp-langbar-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.mb-sp-langbar-acts span { font-size: 0.95em; color: #92400e; }

/* 3.39.0: Settings — the selected tab (rail and Export's own tabs) has
   to read as selected; the global button rule above flattens it. */
#ws-overlay button.ws-nav-btn.is-on,
#ws-overlay button.ws-sub-btn.is-on {
    background: #e0e7ff;
    border-color: #6366f1;
    color: #3730a3;
    box-shadow: inset 0 0 0 1px #6366f1;
    font-weight: 600;
}
#ws-overlay button.ws-sub-btn { border-radius: 999px; }

/* 3.43.0 — lo_sequence.js: the «Comes after» row hides with [hidden]
   despite its inline display:flex; a computed sheet number reads as such. */
#activity-after-row[hidden] { display: none !important; }
input.mb-seq-auto { background: #f1f5f9 !important; color: #475569; cursor: default; }
.mb-block-place { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 8px; font-size: .88em; color: #475569; }
.mb-block-place select { padding: 5px 8px; border: 1.5px solid #d1d5db; border-radius: 6px; background: #fff; font: inherit; }

/* 3.45.0 — 📚 Draft from sources (src/source_ai.js) */
.mb-src-btn {
    padding: 6px 14px; font-size: 0.85em; font-weight: 600;
    background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe;
    border-radius: 6px; cursor: pointer;
}
.mb-src-btn:hover { background: #e0e7ff; }
.mb-src-btn[hidden] { display: none; }
/* 3.46.0 — the dialog's two tabs: the selected one reads as selected
   (the global button rule flattens it, as in Settings). */
#src-overlay button.src-mode { background: #f8fafc !important; color: #475569 !important; border: 1px solid #cbd5e1 !important; box-shadow: none !important; }
#src-overlay button.src-mode.is-on {
    background: #e0e7ff !important;
    border-color: #6366f1 !important;
    color: #3730a3 !important;
    box-shadow: inset 0 0 0 1px #6366f1 !important;
}

/* 3.48.0 — suggested content: what waits in the module's other outcomes */
.mb-sp-others { margin: 0 0 10px; padding: 7px 12px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; color: #9a3412; font-size: 0.86em; line-height: 1.6; }
.mb-sp-others .mb-sp-btn { margin-inline-start: 4px; padding: 3px 10px; font-size: 0.95em; }
/* 3.48.0 — the information sheet's content tools, at the top of the content */
.mb-content-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.mb-content-tools .btn-add { padding: 7px 14px; font-size: 0.88em; }
.mb-src-hint { font-size: 0.82em; color: #64748b; }
.mb-src-hint[hidden] { display: none; }
@keyframes mbFlashNew { from { box-shadow: 0 0 0 3px #a5b4fc; } to { box-shadow: 0 0 0 0 transparent; } }
.content-section-item.mb-just-added { animation: mbFlashNew 1.6s ease-out; }
/* The global button rule flattens it; the AI tool reads as its own thing. */
button.mb-src-btn { background: #eef2ff; color: #3730a3; border: 1px solid #a5b4fc; font-weight: 700; }
button.mb-src-btn:hover { background: #e0e7ff !important; }

/* 3.50.0 — assessment form: cells that grow with their text; the result
   options as they print, not clickable (assessment_results.js) */
textarea.mb-asm-cell {
    width: 100%; box-sizing: border-box; border: 1px solid #e5e7eb; padding: 6px; border-radius: 4px;
    font: inherit; font-size: 0.9em; line-height: 1.4; min-height: 34px; resize: vertical;
    field-sizing: content; max-height: 320px; overflow-y: auto; background: #fff;
}
.mb-asm-result { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.mb-asm-opts { display: flex; flex-wrap: wrap; gap: 8px 22px; color: #374151; font-weight: 600; }
.mb-asm-box { font-size: 1.15em; color: #6b7280; }
button.mb-asm-edit { padding: 6px 12px; border: 1px solid #cbd5e1; border-radius: 8px; background: #f1f5f9; color: #475569; font-weight: 600; font-size: 0.85em; cursor: pointer; }
.mb-asm-note { flex-basis: 100%; margin: 2px 0 0; font-size: 0.82em; color: #64748b; }
#asm-overlay .asm-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
#asm-overlay button.asm-preset { padding: 6px 10px !important; border: 1px solid #c7d2fe !important; background: #eef2ff !important; color: #3730a3 !important; border-radius: 999px !important; font-size: 0.85em !important; cursor: pointer; }
#asm-overlay .asm-small { font-size: 0.82em; color: #64748b; margin: 0 0 12px; }
#asm-overlay .asm-label { display: block; font-weight: 600; color: #374151; margin: 0 0 6px; }
#asm-overlay .asm-text { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1.5px solid #c7d2fe; border-radius: 8px; font: inherit; line-height: 1.6; }
/* the criteria column wide enough to read a criterion */
#assessment-forms-list tbody td:first-child { min-width: 240px; }

/* 3.51.0 — rating scale switches (src/rating_scale.js) */
.mb-scale-host, .mb-scale-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 12px 0 6px; }
.mb-scale-toggle { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #374151; cursor: pointer; }
.mb-scale-toggle input { width: 17px; height: 17px; accent-color: #6366f1; }

/* 3.54.1: the sheet's link and QR code, shown under its steps / content
   sections (src/link_modal.js, mbPaintLinkSummary). */
.mb-link-summary:empty { display: none; }
.mb-link-summary-card {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-top: 14px; padding: 12px 14px;
    background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px;
}
.mb-link-summary-card .mb-ls-qr {
    width: 96px; height: 96px; object-fit: contain; flex: 0 0 auto;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 4px;
    image-rendering: pixelated;
}
.mb-link-summary-card .mb-ls-text { flex: 1 1 200px; min-width: 0; }
.mb-link-summary-card .mb-ls-title { font-weight: 600; color: #374151; margin-bottom: 4px; overflow-wrap: anywhere; }
.mb-link-summary-card .mb-ls-url { font-size: .85em; color: #4f46e5; overflow-wrap: anywhere; text-align: start; }
.mb-link-summary-card .mb-ls-edit {
    background: #fff; color: #374151; border: 1px solid #d1d5db; border-radius: 6px;
    padding: 6px 12px; font-size: .85em; font-weight: 600; cursor: pointer;
}
.mb-link-summary-card .mb-ls-edit:hover { border-color: #7c3aed; color: #7c3aed; }

/* ── 3.56.0: attached figures and tables (src/attachments.js) ───── */
.mb-att-card {
    margin-top: 18px; padding: 14px 16px; border: 1px dashed #c7d2fe;
    border-radius: 12px; background: #f8faff;
}
.mb-att-card-head { font-weight: 700; color: #3730a3; font-size: 1.02em; }
/* 3.67.0: the title is the button that opens the card. */
.mb-att-toggle {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
    padding: 8px 16px; border: 2px dashed #a5b4fc; border-radius: 8px; background: #fff;
    cursor: pointer; font-family: inherit; text-align: start;
}
.mb-att-toggle:hover { border-color: #6366f1; background: #eef2ff; }
.mb-att-toggle:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.mb-att-card:not(.is-collapsed) .mb-att-toggle { border-style: solid; background: #eef2ff; }
.mb-att-count { font-weight: 600; color: #6366f1; }
.mb-att-chev { font-size: .85em; transition: transform .15s ease; }
.mb-att-card:not(.is-collapsed) .mb-att-chev { transform: rotate(180deg); }
.mb-att-card.is-collapsed { padding: 0; border: 0; background: none; }
.mb-att-card.is-collapsed .mb-att-card-body { display: none; }
.mb-att-card.is-collapsed:not(.has-items) .mb-att-chev { display: none; }
.mb-att-hint { margin: 6px 0 10px; font-size: .86em; color: #475569; line-height: 1.55; }
.mb-att-hint:empty { display: none; }
.mb-att-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.mb-att-item {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px;
    display: flex; flex-direction: column; gap: 8px;
}
.mb-att-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mb-att-title { font-weight: 700; color: #1e293b; font-size: .93em; flex: 1 1 auto; min-width: 0; }
.mb-att-move { display: inline-flex; gap: 5px; align-items: center; flex: 0 0 auto; }
.mb-att-choose, .mb-att-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.mb-att-choose[hidden], .mb-att-body[hidden], .mb-att-fields[hidden],
.mb-att-ref[hidden], .mb-att-warn[hidden] { display: none !important; }
.mb-att-body, .mb-att-fields { display: flex; flex-direction: column; gap: 8px; }
.mb-att-thumb img { max-width: 260px; max-height: 180px; }
.mb-att-caption, .mb-att-source {
    width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #e2e8f0;
    border-radius: 8px; font: inherit; font-size: .9em;
}
.mb-att-note { margin: 0; font-size: .82em; color: #64748b; }
.mb-att-tablebox:has(.content-table-widget) + .mb-att-addtable { display: none; }
.mb-att-place { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .88em; }
.mb-att-place label { font-weight: 600; color: #334155; margin: 0; }
.mb-att-place select {
    padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 8px; font: inherit;
    font-size: .95em; max-width: 100%; background: #fff;
}
.mb-att-ref { min-width: 200px; flex: 1 1 220px; }
.mb-att-warn { font-size: .84em; color: #b45309; background: #fffbeb; border: 1px solid #fde68a;
    border-radius: 8px; padding: 6px 10px; }
/* Pictures in steps and sections: a caption under each (3.56.0). */
.mb-img-cell { display: inline-flex; flex-direction: column; gap: 4px; width: 160px; }
.mb-img-cell .content-img-thumb { align-self: flex-start; }
.mb-img-cell input.mb-img-cap {
    width: 100% !important; box-sizing: border-box; padding: 5px 8px !important; min-height: 0 !important;
    border: 1px solid #e2e8f0; border-radius: 6px; font: inherit; font-size: .8em !important; margin: 0 !important;
}

/* ── 3.58.0: category and full title in Module Management (src/module_identity.js) ── */
.mb-mi-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
    padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #e0f2fe; }
.mb-mi-field { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; color: #0c4a6e; font-size: .92em; }
.mb-mi-field > span { white-space: nowrap; }
.mb-mi-field.mb-mi-full { flex: 1 1 100%; }
.mb-mi-field input, .mb-mi-field select {
    padding: 8px 10px; border: 1.5px solid #bae6fd; border-radius: 8px; font: inherit; font-weight: 500;
    background: #fff; margin: 0; min-height: 0; }
.mb-mi-field.mb-mi-full input { flex: 1 1 auto; width: auto; min-width: 0; }
.mb-cat-overlay { position: fixed; inset: 0; z-index: 10060; display: flex; align-items: center; justify-content: center;
    padding: 20px; background: rgba(15,23,42,.5); font-family: inherit; }
.mb-cat-box { background: #fff; border-radius: 14px; max-width: 440px; width: 100%; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.mb-cat-head { padding: 14px 18px; background: linear-gradient(135deg,#f0f9ff,#e0f2fe); border-bottom: 1px solid #bae6fd; font-weight: 800; color: #075985; }
.mb-cat-body { padding: 14px 18px; }
.mb-cat-hint { margin: 0 0 10px; font-size: .86em; color: #475569; line-height: 1.6; }
#mb-cat-lines { width: 100%; box-sizing: border-box; min-height: 130px; font: inherit; font-size: .92em; padding: 10px; border: 1.5px solid #bae6fd; border-radius: 8px; }
.mb-cat-foot { display: flex; gap: 8px; justify-content: space-between; flex-wrap: wrap; margin-top: 12px; }
.mb-cat-foot span { display: flex; gap: 8px; }
.mb-cat-foot button { padding: 8px 14px; border: 1px solid #e2e8f0; background: #fff; border-radius: 8px; cursor: pointer; font: inherit; }
.mb-cat-foot button.is-primary { background: #0284c7 !important; color: #fff !important; border-color: #0284c7; font-weight: 700; }
@media (max-width: 600px) { .mb-mi-field { flex: 1 1 100%; flex-wrap: wrap; } .mb-mi-field select { flex: 1 1 auto; } }

/* ════════════════════════════════════════════════════════════
   📐 Module template (3.59.0) — src/module_template.js
   ════════════════════════════════════════════════════════════ */
/* What belongs to one template only. Hidden, never removed. */
body.mb-tpl-learnerGuide [data-tpl-only]:not([data-tpl-only~="learnerGuide"]),
body.mb-tpl-standard [data-tpl-only]:not([data-tpl-only~="standard"]),
body.mb-tpl-lowLiteracy [data-tpl-only]:not([data-tpl-only~="lowLiteracy"]),
body:not(.mb-tpl-learnerGuide):not(.mb-tpl-lowLiteracy) [data-tpl-only]:not([data-tpl-only~="standard"]) { display: none !important; }

.mb-tpl-rail { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.mb-tpl-rail-label { font-size: .74em; font-weight: 700; letter-spacing: .3px; color: var(--mb-nav-ink-soft, #6B7379); padding: 0 8px 2px; text-transform: uppercase; }
.mb-tpl-btn {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: start;
    padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(0,0,0,.08);
    background: rgba(255,255,255,.55); color: var(--mb-nav-ink, #3F464D);
    font: inherit; font-size: .84em; font-weight: 600; cursor: pointer; line-height: 1.3;
}
.mb-tpl-btn:hover { background: #fff; }
.mb-tpl-btn:focus-visible { outline: 2px solid #667eea; outline-offset: 1px; }
.mb-tpl-btn.is-active { background: #ccfbf1; border-color: #0f766e; color: #115e59; box-shadow: inset 3px 0 0 #0f766e; font-weight: 800; }
html[dir="rtl"] .mb-tpl-btn.is-active { box-shadow: inset -3px 0 0 #0f766e !important; }
.mb-tpl-btn.is-soon { opacity: .6; }
.mb-tpl-ico { flex-shrink: 0; }
.mb-tpl-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.mb-tpl-soon { font-size: .78em; font-weight: 600; color: #92400e; background: #fef3c7; border-radius: 6px; padding: 1px 6px; flex-shrink: 0; }
@media (max-width: 1024px) {
    .mb-tpl-rail { flex-direction: row; flex-wrap: wrap; margin-bottom: 8px; }
    .mb-tpl-rail-label { width: 100%; }
    .mb-tpl-btn { width: auto; flex: 1 1 140px; }
}
.mb-tpl-settings-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 10px; }
.mb-tpl-btn-inline { width: auto; flex: 1 1 160px; background: #f8fafc; }

.mb-tpl-dialog { max-width: 820px; max-height: calc(100vh - 40px); overflow-y: auto; }
.mb-tpl-title { margin: 0 0 6px; font-size: 1.3em; color: #0f172a; }
.mb-tpl-lead { margin: 0 0 14px; color: #475569; line-height: 1.6; }
.mb-tpl-continue {
    display: block; width: 100%; text-align: start; margin-bottom: 14px; padding: 12px 14px;
    border-radius: 10px; border: 2px solid #0f766e; background: #f0fdfa; color: #0f766e;
    font: inherit; font-weight: 700; cursor: pointer;
}
.mb-tpl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.mb-tpl-card {
    display: flex; flex-direction: column; gap: 6px; text-align: start; padding: 16px;
    border-radius: 12px; border: 2px solid #e2e8f0; background: #fff; color: #1e293b;
    font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.mb-tpl-card:hover:not([disabled]), .mb-tpl-card:focus-visible { border-color: #667eea; box-shadow: 0 4px 14px rgba(102,126,234,.2); outline: none; }
.mb-tpl-card.is-current { border-color: #0f766e; }
.mb-tpl-card.is-soon { opacity: .6; cursor: not-allowed; background: #f8fafc; }
.mb-tpl-card-ico { font-size: 1.8em; }
.mb-tpl-card-name { font-weight: 800; font-size: 1.05em; }
.mb-tpl-card-desc { font-size: .88em; color: #475569; line-height: 1.55; flex: 1 1 auto; }
.mb-tpl-card-sub { font-size: .82em; font-weight: 700; color: #0f766e; }
.mb-tpl-card.is-soon .mb-tpl-card-sub { color: #92400e; }
.mb-tpl-dontshow { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .9em; color: #475569; cursor: pointer; }

/* ── Learner guide (3.59.0) — src/learner_guide.js ─────────────── */
.lg-unit, .lg-asm { margin-top: 16px; }
.lg-part { display: flex; flex-direction: column; gap: 8px; }
.lg-part-head { font-weight: 800; color: #0f766e; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lg-sub { font-size: .9em; font-weight: 600; color: #374151; }
.lg-lines { width: 64px; padding: 5px 8px; border: 1.5px solid #d1d5db; border-radius: 6px; margin-inline-start: 6px; }
.lg-check { display: flex; align-items: center; gap: 6px; cursor: pointer; }
/* 3.79.0: the learning outcomes card has its own heading, with the numbering button at its far end;
   «Each learning unit includes the following:» is a card of its own below it. */
.lg-outcomes-card, .lg-inc-card { margin-top: 14px; }
.lg-num-btn:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px; }
.lg-inc-row { display: flex; align-items: center; gap: 10px; }
.lg-inc-lbl { flex: 0 0 auto; min-width: 10.5em; font-weight: 800; color: #374151; white-space: nowrap; }
.lg-inc-row .lg-inc-input { flex: 1 1 auto; font-weight: 400; }
.lg-inc-restore { align-self: flex-start; }
@media (max-width: 640px) {
    .lg-inc-row { flex-direction: column; align-items: stretch; gap: 4px; }
    .lg-inc-lbl { white-space: normal; min-width: 0; }
}
.lg-restore { font: inherit; font-size: .8em; font-weight: 600; padding: 4px 10px; border-radius: 6px; border: 1px solid #cbd5e1; background: #fff; color: #475569; cursor: pointer; }
/* 3.67.0: the optional objectives of a knowledge sheet (Learner guide). */
.lg-obj-toggle-row { margin: 4px 0 14px; }
.lg-obj-toggle {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; cursor: pointer;
    border: 2px dashed #a5b4fc; border-radius: 8px; background: #f8faff; color: #3730a3;
    font-weight: 700; font-size: .95em; font-family: inherit;
}
.lg-obj-toggle:hover { border-color: #6366f1; background: #eef2ff; }
.lg-obj-toggle:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.lg-obj-toggle.is-on { border-style: solid; background: #eef2ff; }
.lg-obj-toggle .lg-optional { font-weight: 500; color: #64748b; font-size: .9em; }
.lg-act-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 10px 12px; background: #f0fdfa; border: 1px solid #99f6e4; border-radius: 8px; }
.lg-act-row label { margin: 0; font-weight: 600; }
.lg-act-row select, .lg-act-row .lg-input { padding: 7px 10px; border: 2px solid #d1d5db; border-radius: 6px; background: #fff; font-size: .95em; }
.lg-act-row .lg-input { flex: 1 1 200px; min-width: 0; }
.lg-preview { width: 100%; border-collapse: collapse; font-size: .9em; }
.lg-preview th, .lg-preview td { border: 1px solid #d1d5db; padding: 6px 8px; text-align: start; }
.lg-preview th { background: #f0fdfa; }
.lg-empty { color: #6b7280; font-style: italic; margin: 0; }

/* ── Marks from the Task Analysis, and the project's own (3.62.0) — src/custom_marks.js ── */
select.mb-cov-mark, select.mb-sp-mark { width: 100%; max-width: 100%; min-width: 0; padding: 4px 6px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; font: inherit; font-size: 0.82em; }
select.mb-sp-mark { width: auto; max-width: 190px; }
.mark-dropdown-item.mark-dropdown-custom { border-top: 1px solid #e5e7eb; font-weight: 700; color: #0f766e; }
.mb-cmk-dialog { max-width: 440px; }
.mb-cmk-title { margin: 0 0 12px; font-size: 1.1em; color: #0f172a; }
.mb-cmk-label { display: block; margin: 12px 0 6px; font-weight: 600; color: #374151; font-size: 0.92em; }
.mb-cmk-dialog .mb-dialog-input { margin-top: 0; }
.mb-cmk-pick { display: flex; flex-wrap: wrap; gap: 6px; }
button.mb-cmk-opt { width: 36px; height: 36px; min-height: 0; padding: 0 !important; border-radius: 8px !important; font-size: 1.15em; line-height: 1; cursor: pointer; }
button.mb-cmk-opt.is-on { outline: 3px solid #0f766e; outline-offset: 1px; }
/* Above the silver rule for every button (button:not(.tab)…, 0,3,1). */
.mb-cmk-dialog .mb-cmk-pick button.mb-cmk-opt.mb-cmk-sw { background: var(--sw) !important; background-color: var(--sw) !important; border-color: var(--sw) !important; }
.mb-cmk-preview { margin-top: 14px; border: 1.5px solid #475569; border-radius: 6px; overflow: hidden; font-size: 0.92em; }
.mb-cmk-list { list-style: none; margin: 0 0 10px; padding: 0; }
.mb-cmk-list li { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid #f1f5f9; }
.mb-cmk-chip { color: #fff; border-radius: 6px; padding: 3px 10px; font-weight: 700; font-size: 0.9em; }
.mb-cmk-gap { flex: 1 1 auto; }
.mb-cmk-empty { color: #64748b; font-style: italic; }

/* ── 3.65.0: the AI service warning (src/ai_error.js), as in DACUM Live Pro ── */
.mb-ai-err { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .55); }
.mb-ai-err-box { background: #fff; border-radius: 16px; max-width: 440px; width: 100%; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); font-family: inherit; outline: none; }
.mb-ai-err-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px; background: linear-gradient(135deg, #fff7ed, #ffedd5); border-bottom: 1px solid #fed7aa; flex-shrink: 0; }
.mb-ai-err.is-red .mb-ai-err-head { background: linear-gradient(135deg, #fef2f2, #fee2e2); border-bottom-color: #fecaca; }
.mb-ai-err-icon { font-size: 1.7em; line-height: 1; }
.mb-ai-err-head p { margin: 0; font-size: 1em; font-weight: 800; color: #9a3412; }
.mb-ai-err.is-red .mb-ai-err-head p { color: #991b1b; }
.mb-ai-err-body { padding: 16px 20px; overflow-y: auto; }
.mb-ai-err-body > p { margin: 0 0 12px; font-size: .9em; color: #374151; line-height: 1.65; }
.mb-ai-err-body > p.mb-ai-err-safe { font-size: .85em; color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 8px 10px; line-height: 1.55; }
.mb-ai-err-body > p.mb-ai-err-tips-h { margin-bottom: 4px; font-size: .82em; font-weight: 700; color: #334155; }
.mb-ai-err-body ul { margin: 0 0 12px; padding-inline-start: 18px; font-size: .82em; color: #475569; line-height: 1.8; }
.mb-ai-err-body details { font-size: .78em; color: #64748b; }
.mb-ai-err-body summary { cursor: pointer; }
.mb-ai-err-body code { display: block; margin-top: 6px; background: #f1f5f9; padding: 6px 8px; border-radius: 4px; word-break: break-all; direction: ltr; unicode-bidi: isolate; }
.mb-ai-err-foot { padding: 12px 20px; border-top: 1px solid #eef0f4; display: flex; justify-content: flex-end; flex-shrink: 0; }
#mb-ai-err button.mb-ai-err-ok { padding: 9px 22px !important; min-height: 0 !important; background: #667eea !important; color: #fff !important; border: none !important; border-radius: 8px !important; font-size: .9em; font-weight: 700; cursor: pointer; font-family: inherit; box-shadow: none !important; }
#mb-ai-err button.mb-ai-err-ok:hover { background: #5a67d8 !important; }

/* ── 3.69.0: the module overview table (Introduction Pages, src/intro_table.js) ── */
.it-card { margin-top: 20px; }
.it-table {
    width: 100%; border-collapse: collapse; table-layout: fixed;
    background: #fff; border: 2px solid #667eea; border-radius: 8px; overflow: hidden;
}
.it-table th, .it-table td { border: 1px solid #d1d5db; vertical-align: top; padding: 0; }
.it-table th {
    width: 28%; padding: 10px 12px; text-align: start; font-weight: 700;
    color: #3730a3; background: #eef2ff; font-size: .95em; line-height: 1.45;
}
.it-table textarea.it-field {
    display: block; width: 100%; box-sizing: border-box; min-height: 42px;
    padding: 10px 12px; border: 0; border-radius: 0; background: transparent;
    font: inherit; font-size: 1em; line-height: 1.5; text-align: start;
    resize: vertical; overflow-y: hidden; overflow-wrap: anywhere;
    field-sizing: content;
}
.it-table textarea.it-field:focus { outline: 2px solid #667eea; outline-offset: -2px; background: #fafaff; }
@media (max-width: 560px) {
    .it-table, .it-table tbody, .it-table tr, .it-table th, .it-table td { display: block; width: 100%; }
    .it-table th { border-bottom: 0; padding-bottom: 4px; }
}

/* ── 3.69.0: the learning unit card in Module Information, the Reflection tab ── */
.lg-unit-wrap { margin-top: 30px; }
.lg-unit-wrap .lg-unit { margin-top: 0; }
.lg-refl-empty { margin: 0; color: #6b7280; font-style: italic; }

/* ── 3.72.0: a content card's heading typed in the card, and its subheading ── */
.cs-head { gap: 8px; align-items: center; }
.cs-num {
    flex: 0 0 auto; min-width: 26px; height: 26px; padding: 0 6px; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: #eef2ff; color: #4f46e5; font-weight: 700; font-size: .85em;
}
.cs-heading, .cs-subheading {
    flex: 1 1 auto; min-width: 0; width: 100%; box-sizing: border-box;
    padding: 9px 12px; border: 2px solid #e5e7eb; border-radius: 8px; background: #fff;
    font: inherit; text-align: start; outline: none;
}
.cs-heading { font-weight: 700; font-size: 1em; color: #0070C0; }
.cs-subheading { font-weight: 700; font-size: .95em; color: #1f2937; }
.cs-heading::placeholder, .cs-subheading::placeholder { color: #9bbfd8; font-weight: 500; }
.cs-subheading::placeholder { color: #9ca3af; }
.cs-heading:focus, .cs-subheading:focus { border-color: #3b82f6; }
.cs-sub-row { margin: 0 0 8px; }
.cs-sub-row[hidden] { display: none; }
.btn-cs-sub { white-space: nowrap; }
.btn-cs-sub.is-on { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }
@media (max-width: 560px) {
    .cs-head { flex-wrap: wrap; }
    .cs-head .cs-heading { flex: 1 1 calc(100% - 40px); }
}

/* ── 3.74.0: 📝 Paste text (src/paste_text.js) ── */
.btn-paste-text {
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
    padding: 6px 12px; border: 1px solid #c7d2fe; border-radius: 6px;
    background: #eef2ff; color: #3730a3; font: inherit; font-size: .85em; font-weight: 600; cursor: pointer;
}
.btn-paste-text:hover { background: #e0e7ff; border-color: #a5b4fc; }
.btn-add-image.btn-paste-text { background: #4f46e5; color: #fff; border-color: transparent; }
.btn-add-image.btn-paste-text:hover { background: #4338ca; }
.objective-format-btn.btn-paste-text { background: #eef2ff; color: #3730a3; box-shadow: none; }
.mb-block-paste.btn-paste-text { padding: 5px 10px; }

/* ── 3.76.0: the reflection — «contributes» on the heading line, 📝 under the questions ── */
.lg-refl-contrib { font-weight: 600; font-size: .9em; color: #374151; margin: 0; cursor: pointer; }

/* ── 3.77.0: the reflection's tools on one line — Paste text, Clear, answer lines ── */
.lg-tools-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: -2px 0 4px; }
.lg-clear-btn {
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
    padding: 6px 12px; border: 1px solid #fecaca; border-radius: 6px;
    background: #fff; color: #b91c1c; font: inherit; font-size: .85em; font-weight: 600; cursor: pointer;
}
.lg-clear-btn:hover { background: #fef2f2; border-color: #fca5a5; }
.lg-lines-label { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; font-size: .9em; font-weight: 600; color: #374151; }
.lg-tools-row .lg-lines { width: 4.2em; min-width: 0; padding: 4px 6px; margin: 0; text-align: center; box-sizing: border-box; }

/* ── 3.78.0: Work Team as a table — a header row, boxes that grow with their text ── */
#work-team-container .team-member-row {
    display: grid; grid-template-columns: 2fr 2fr 2fr 40px; gap: 10px;
    align-items: start; padding: 10px 12px; border-bottom: 1px solid #e5e7eb;
}
#work-team-container .team-head-row {
    background: #eef2ff; border-bottom: 2px solid #c7d2fe; border-radius: 8px 8px 0 0; padding: 9px 12px;
}
#work-team-container .team-head { font-weight: 700; color: #3730a3; font-size: .95em; text-align: start; }
#work-team-container textarea.team-field {
    display: block; width: 100%; min-width: 0; box-sizing: border-box; min-height: 40px;
    padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff;
    font: inherit; font-size: 1em; line-height: 1.45; text-align: start;
    resize: none; overflow-y: hidden; overflow-wrap: anywhere; field-sizing: content;
}
#work-team-container textarea.team-field:focus { border-color: #3b82f6; outline: none; }
#work-team-container .team-member-row .mb-icon-btn { margin-top: 2px; }
@media (max-width: 560px) {
    #work-team-container .team-member-row { grid-template-columns: 1fr 1fr 1fr 36px; gap: 6px; padding: 8px 6px; }
    #work-team-container .team-head { font-size: .85em; }
}

/* 3.80.0: Learner guide — list box of a knowledge sheet; icon tools of the cards */
.lg-know-card { margin-top: 14px; }
.lg-card-tools { display: inline-flex; gap: 4px; align-items: center; }
.lg-know-title { flex: 1 1 200px; min-width: 0; font: inherit; font-weight: 800; color: #0f766e; border: 1px dashed transparent; background: transparent; padding: 6px 8px; border-radius: 8px; }
.lg-know-title:hover, .lg-know-title:focus { border-color: #94a3b8; background: #fff; outline: none; }
.lg-hist-btn.is-off { opacity: .45; }
.lg-clear-icon:hover { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }
.lg-know-card .lg-field { margin-top: 8px; width: 100%; }

/* ── 3.80.0: an icon on the side-navigation tabs that had none ── */
.tabs .tab[data-tab-icon]::before {
    content: attr(data-tab-icon);
    flex: 0 0 auto;
    margin-inline-end: .5em;
}

/* 3.81.0: Learner guide — material facilities on the References tab */
.fac-head { font-size: 1.2em; font-weight: 600; color: #667eea; margin-bottom: 12px; }
.fac-entry { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fac-qty { width: 104px; flex: 0 0 104px; text-align: center; }
.fac-qty, .fac-input { padding: 9px 12px; border: 2px solid #d1d5db; border-radius: 6px; font-size: 0.97em; background: #fff; }
.fac-input { flex: 1; min-width: 0; }
.fac-add { background: #10b981; color: #fff; border: none; padding: 7px 16px; border-radius: 6px; cursor: pointer; font-size: .88em; font-weight: 600; }

/* 3.82.0: the ninth swatch of WS_PALETTE */
.ws-modal .ws-swatches button.ws-swatch.ws-c-DEEBF6,
.ws-modal .ws-swatches button.ws-swatch.ws-c-DEEBF6:hover {
    background: #DEEBF6 !important; background-color: #DEEBF6 !important;
}
.fac-head-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.fac-head-row .fac-head { margin-bottom: 0; }

/* 3.83.0: Learner guide — assessment cards: Rename button like the others, tools at the end */
.lg-rename-btn { background: #f3f4f6; color: #374151; border: 1.5px solid #d1d5db; padding: 4px 12px; border-radius: 6px; cursor: pointer; font-size: .82em; font-weight: 600; transition: background .2s; }
.lg-rename-btn:hover { background: #e5e7eb; }
.lg-part-head .lg-card-tools { margin-inline-start: auto; }
.lg-asm-title.lg-gone { opacity: .55; text-decoration: line-through; }
#asm-content-label-lg { flex: 1; }
#asm-content-label-lg .lg-card-tools { margin-inline-start: auto; }
.mb-asm-lead { font-weight: 600; color: #374151; }

/* 3.84.0: Back / Proceed buttons at the foot of each tab — on opposite sides, small, light grey */
.mb-nav-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; padding: 4px 0 0; }
.mb-nav-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 7px 16px; font-size: .92em; font-weight: 600; line-height: 1.3;
    color: #3f3f46; background: linear-gradient(#ffffff, #f1f1ef);
    border: 1px solid #d4d4d0; border-radius: 8px; cursor: pointer; box-shadow: none;
}
.mb-nav-btn:hover { background: #ececea; }
.mb-nav-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.mb-nav-next { margin-inline-start: auto; }
@media (max-width: 600px) { .mb-nav-row { flex-wrap: wrap; } .mb-nav-btn { flex: 1 1 140px; } }

/* 3.79.0 — Tools & Resources tab */
.tr-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.tr-text { width: 100%; min-height: 220px; padding: 10px 12px; border: 2px solid #d1d5db; border-radius: 8px; font-size: 0.97em; line-height: 1.8; background: #fff; resize: vertical; box-sizing: border-box; }
.tr-style.is-on { background: #4338ca !important; color: #fff !important; }

/* 3.80.0 — one module: the bar is only the learning unit */
.mb-ctx-bar.mb-ctx-solo > .mb-ctx-label:first-child,
.mb-ctx-bar.mb-ctx-solo > .mb-ctx-mod,
.mb-ctx-bar.mb-ctx-solo > .mb-ctx-sep { display: none; }
#unit-tab .lg-unit-wrap { margin-top: 0; }

/* 3.80.5 — «Module Information (Optional)»: a card folded behind its title on the Module Information tab */
.mb-mi-card { margin: 0 0 20px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; }
.mb-mi-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 16px; cursor: pointer; list-style: none; font-weight: 700; color: #374151;
    border-radius: 10px; user-select: none;
}
.mb-mi-toggle::-webkit-details-marker { display: none; }
.mb-mi-toggle:hover { background: #eef2ff; }
.mb-mi-toggle:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.mb-mi-chev { font-size: .9em; transition: transform .15s ease; }
.mb-mi-card[open] > .mb-mi-toggle { border-bottom: 1px solid #e5e7eb; border-radius: 10px 10px 0 0; background: #eef2ff; }
.mb-mi-card[open] .mb-mi-chev { transform: rotate(180deg); }
.mb-mi-body { padding: 16px; }

/* 3.80.6: the learning unit's card in the Knowledge tab (src/learner_guide.js) */
.lg-unit-card { margin-top: 14px; }
.lg-unit-card .lg-ucard-row { flex-wrap: nowrap; margin-top: 10px; }
.lg-unit-card .lg-ucard-row:first-child { margin-top: 0; }
.lg-unit-card .lg-ucard-lbl { white-space: nowrap; }
.lg-unit-card .lg-ucard-row .lg-field { flex: 1 1 auto; min-width: 0; margin: 0; font-weight: 700; }
.lg-unit-card .lg-ucard-learn .lg-field { font-weight: 800; color: #0f766e; }
.lg-unit-card textarea.lg-field { margin-top: 8px; width: 100%; }
.lg-unit-card .lg-tools-row { margin-top: 6px; }
@media (max-width: 640px) { .lg-unit-card .lg-ucard-row { flex-wrap: wrap; } }

/* ── 3.80.11: the step-by-step helper (src/helper.js) ─────────────
   Docked at the end side of the window, never modal: the author keeps
   working while it is open. Logical properties throughout, so Arabic
   (RTL) mirrors without a second set of rules. */
/* 3.80.12: the chip and its × share one fixed wrapper. */
.mb-hw-chipwrap { position: fixed; inset-inline-end: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 99990; }
.mb-hw-chipwrap[hidden] { display: none !important; }
button.mb-hw-chip-x#mb-hw-chip-x {
    position: absolute; top: -8px; inset-inline-end: -6px; width: 24px; height: 24px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #c7d2fe; border-radius: 50%; cursor: pointer; font: inherit; font-size: 16px; line-height: 1; font-weight: 700;
    color: #3730a3; background: #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, .25);
}
button.mb-hw-chip-x#mb-hw-chip-x:hover { background: #eef2ff; }
button.mb-hw-chip-x#mb-hw-chip-x:focus-visible { outline: 3px solid #c7d2fe; outline-offset: 2px; }
button.mb-hw-chip-x#mb-hw-chip-x::after { content: ""; position: absolute; inset: -10px; }   /* 44px touch target */
button.mb-hw-chip-x[hidden] { display: none !important; }
button.mb-hw-chip#mb-hw-chip {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
    border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700; font-size: .92em;
    color: #fff !important; background: linear-gradient(135deg, #4f46e5, #7c3aed) !important; box-shadow: 0 8px 22px rgba(79, 70, 229, .38) !important;
    box-shadow: 0 8px 22px rgba(79, 70, 229, .38); transition: transform .15s ease, box-shadow .15s ease;
}
button.mb-hw-chip#mb-hw-chip:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(79, 70, 229, .45); }
.mb-hw-chip:focus-visible { outline: 3px solid #c7d2fe; outline-offset: 2px; }
.mb-hw-chip small { font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .22); }
.mb-hw-chip[hidden], .mb-hw[hidden] { display: none; }

.mb-hw {
    position: fixed; inset-inline-end: 18px; bottom: 18px; z-index: 99990;
    width: min(400px, calc(100vw - 24px)); max-height: min(82vh, 640px);
    display: flex; flex-direction: column; overflow: hidden; text-align: start;
    background: #fff; color: #1f2937; border: 1px solid #c7d2fe; border-radius: 16px;
    box-shadow: 0 22px 54px rgba(30, 27, 75, .30); animation: mbHwIn .2s ease;
}
@keyframes mbHwIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.mb-hw-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff); border-bottom: 1px solid #c7d2fe; color: #3730a3; }
.mb-hw-head strong { flex: 1 1 auto; font-size: 1em; }
#mb-hw button.mb-hw-x { background-image: none; border: 0 !important; background: transparent !important; box-shadow: none; cursor: pointer; font-size: 1.1em; color: #4338ca; padding: 4px 8px; border-radius: 8px; }
#mb-hw button.mb-hw-x:hover { background: rgba(67, 56, 202, .12) !important; }
.mb-hw-dots { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 14px 6px; }
#mb-hw button.mb-hw-dot { background-image: none !important; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #d1d5db; background: #f9fafb;
    cursor: pointer; font-size: .78em; line-height: 1; padding: 0; transition: transform .12s ease; }
#mb-hw button.mb-hw-dot:hover { transform: scale(1.1); }
#mb-hw button.mb-hw-dot.is-done { border-color: #16a34a; background: #dcfce7; }
#mb-hw button.mb-hw-dot.is-partial { border-color: #f59e0b; background: #fef3c7; }
#mb-hw button.mb-hw-dot.is-todo { border-color: #94a3b8; }
#mb-hw button.mb-hw-dot.is-none { border-style: dashed; }
#mb-hw button.mb-hw-dot.is-on { box-shadow: 0 0 0 3px #818cf8 !important; }
#mb-hw button.mb-hw-dot:focus-visible { outline: 3px solid #818cf8; outline-offset: 2px; }
.mb-hw-bar { height: 5px; margin: 4px 14px 0; border-radius: 99px; background: #e5e7eb; overflow: hidden; }
.mb-hw-bar i { display: block; height: 100%; background: linear-gradient(90deg, #4f46e5, #16a34a); transition: width .25s ease; }
.mb-hw-body { padding: 12px 14px 4px; overflow: auto; }
.mb-hw-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .8em; color: #6b7280; font-weight: 600; }
.mb-hw-badge { padding: 2px 10px; border-radius: 999px; font-weight: 700; }
.mb-hw-badge.is-done { background: #dcfce7; color: #166534; }
.mb-hw-badge.is-partial { background: #fef3c7; color: #92400e; }
.mb-hw-badge.is-todo { background: #e0e7ff; color: #3730a3; }
.mb-hw-badge.is-none { background: #f3f4f6; color: #4b5563; }
.mb-hw-h { margin: 8px 0 6px; font-size: 1.12em; color: #111827; }
.mb-hw-sum { margin: 0 0 8px; line-height: 1.65; font-size: .93em; }
.mb-hw-metric { margin: 0 0 8px; padding: 7px 10px; border-radius: 8px; background: #f1f5f9; font-size: .86em; font-weight: 600; color: #334155; }
.mb-hw-tip { margin: 0 0 6px; padding: 8px 10px; border-radius: 8px; background: #fffbeb; border: 1px solid #fde68a; font-size: .86em; line-height: 1.55; color: #78350f; }
.mb-hw-acts, .mb-hw-nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 14px; }
.mb-hw-nav { justify-content: space-between; padding-bottom: 10px; }
:is(#mb-hw, .mb-hw-helpcard, #mb-hw-chip) button.mb-hw-btn { background-image: none !important; box-shadow: none; border: 1px solid #c7d2fe !important; background-color: #fff !important; color: #3730a3 !important; border-radius: 10px; padding: 8px 12px;
    font: inherit; font-size: .88em; font-weight: 700; cursor: pointer; }
:is(#mb-hw, .mb-hw-helpcard, #mb-hw-chip) button.mb-hw-btn:hover:not(:disabled) { background-color: #eef2ff !important; }
:is(#mb-hw, .mb-hw-helpcard, #mb-hw-chip) button.mb-hw-btn:disabled { opacity: .45; cursor: default; }
:is(#mb-hw, .mb-hw-helpcard, #mb-hw-chip) button.mb-hw-btn.is-primary { background-color: #4f46e5 !important; border-color: #4f46e5 !important; color: #fff !important; }
:is(#mb-hw, .mb-hw-helpcard, #mb-hw-chip) button.mb-hw-btn.is-primary:hover:not(:disabled) { background-color: #4338ca !important; }
.mb-hw-btn:focus-visible, .mb-hw-hide:focus-visible { outline: 3px solid #818cf8; outline-offset: 2px; }
#mb-hw button.mb-hw-hide { background-image: none; border: 0 !important; background: transparent !important; box-shadow: none; color: #6b7280 !important; font: inherit; font-size: .78em; cursor: pointer; padding: 4px 14px 10px; text-align: start; text-decoration: underline; }
#mb-hw button.mb-hw-hide:hover { color: #374151 !important; }

/* the short spotlight when «Go to this tab» lands */
.mb-hw-spot { animation: mbHwSpot 1.1s ease-in-out 2; outline: 3px solid #818cf8; outline-offset: 3px; border-radius: 8px; }
@keyframes mbHwSpot { 0%, 100% { box-shadow: 0 0 0 0 rgba(129, 140, 248, .6); } 50% { box-shadow: 0 0 0 10px rgba(129, 140, 248, 0); } }

/* Help tab card */
.mb-hw-helpcard { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 24px; padding: 18px 20px;
    border: 1px solid #c7d2fe; border-radius: 14px; background: linear-gradient(135deg, #eef2ff, #f5f3ff); }
.mb-hw-helpcard .mb-hw-helpico { font-size: 2em; }
.mb-hw-helpcard h3 { margin: 0 0 4px; color: #3730a3; font-size: 1.1em; }
.mb-hw-helpcard p { margin: 0; color: #4b5563; font-size: .92em; line-height: 1.6; }
.mb-hw-helpcard .mb-hw-helptxt { flex: 1 1 240px; }

@media (max-width: 640px) {
    .mb-hw { inset-inline: 8px; bottom: 8px; width: auto; max-height: 70vh; }
    .mb-hw-chipwrap { inset-inline-end: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
    .mb-hw, .mb-hw-spot, .mb-hw-chip, .mb-hw-dot, .mb-hw-bar i { animation: none !important; transition: none !important; }
}

/* ============================================================
   3.81.0 — Installable app (PWA) and touch devices
   iPhone / iPad (Safari and the Home Screen app), Android phones and
   tablets, Windows touch laptops and tablets, Chromebooks.
   ============================================================ */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Notch / status bar. The Home Screen app on iOS runs under a translucent
   status bar (apple-mobile-web-app-status-bar-style), so the fixed toolbar
   must grow by the top inset instead of squeezing its buttons into it.
   The inset is 0 in an ordinary browser tab, so nothing moves there. */
.figma-toolbar { height: calc(56px + env(safe-area-inset-top, 0px)); }
body { padding-top: calc(76px + env(safe-area-inset-top, 0px)); }
@media (max-width: 900px) {
    .figma-toolbar { height: calc(52px + env(safe-area-inset-top, 0px)); }
    body { padding-top: calc(68px + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 600px) {
    .figma-toolbar { height: calc(56px + env(safe-area-inset-top, 0px)); }
    body { padding-top: calc(60px + env(safe-area-inset-top, 0px)); }
    .mb-lang-panel { top: calc(62px + env(safe-area-inset-top, 0px)); }
}
@media (min-width: 1025px) {
    .tabs-container { top: calc(56px + env(safe-area-inset-top, 0px)); }
}
.mb-pk-drophint { top: calc(72px + env(safe-area-inset-top, 0px)); }
.mb-ro-banner   { top: calc(56px + env(safe-area-inset-top, 0px)); }

/* Landscape phones and tablets with a notch: keep content off the cut-outs
   (physical edges, so not logical properties — see .figma-toolbar). */
.container {
    padding-left:  max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
}
@media (min-width: 901px) {
    .container {
        padding-left:  max(40px, env(safe-area-inset-left));
        padding-right: max(40px, env(safe-area-inset-right));
    }
}

/* Dynamic viewport: on iOS and Android the browser's own bars come and
   go, and 100vh then hides the bottom buttons of a dialog behind them. */
@supports (height: 100dvh) {
    .mb-pk-box      { max-height: calc(100dvh - 32px); }
    .mb-prv-box     { height: calc(100dvh - 20px); }
    .mb-hlp-box     { max-height: 86dvh; }
    .mb-tpl-dialog  { max-height: calc(100dvh - 40px); }
    .mb-cov-box     { max-height: 100dvh; }
}
@media (max-width: 600px) {
    @supports (height: 100dvh) {
        .container { min-height: calc(100dvh - 60px); }
    }
}

/* Touch screens (tablets, phones, touch laptops) -------------------- */
@media (pointer: coarse) {
    /* iOS zooms the page when a field under 16px gets focus, and does not
       zoom back; the old rule covered phones only (≤600px), not iPads. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
    select, textarea { font-size: max(16px, 1em); }

    /* Comfortable targets (44px, the HIG / WCAG 2.5.5 size). */
    /* Named, not every <button>: a bare `button` rule stretched the small
       fixed-size round / square buttons (colour swatches, step dots, ×)
       into ovals and tall bars. */
    .tab, .figma-btn, .mb-dialog-btn, .btn-action, .btn-remove-sheet, .mb-hw-btn,
    .mb-pwa-bar button, select,
    input[type="button"], input[type="submit"] { min-height: 44px; }
    input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }

    /* No double-tap-zoom delay on controls; pinch zoom stays available. */
    button, a, .tab, .figma-btn, select, summary, label { touch-action: manipulation; }
    * { -webkit-tap-highlight-color: rgba(102, 126, 234, .18); }

    /* Smooth, momentum scrolling inside the scrollable panels. */
    .tabs-container, .assessment-form, .mb-pk-box, .mb-hlp-box, .mb-prv-list {
        -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    }
}

/* Installed app ------------------------------------------------------ */
html.mb-standalone body { overscroll-behavior-y: none; }   /* no pull-to-refresh over unsaved work */
html.mb-standalone { -webkit-touch-callout: none; }
@media (display-mode: standalone) {
    .mb-pwa-bar { display: none; }
}

/* Install bar and offline notice ------------------------------------- */
.mb-pwa-bar {
    position: fixed; inset-inline: 16px; margin-inline: auto; max-width: 560px;
    top: calc(var(--mb-tb-h, 56px) + env(safe-area-inset-top, 0px) + 8px);
    z-index: 9999;
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    background: #fff; color: #0f172a;
    border: 1px solid #c7d2fe; border-radius: 14px;
    box-shadow: 0 10px 30px rgba(55, 48, 163, .28);
    animation: mbPwaIn .25s ease;
}
.mb-pwa-ico   { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; }
.mb-pwa-copy  { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.mb-pwa-title { font-size: .92em; line-height: 1.35; color: #3730a3; }
.mb-pwa-note  { font-size: .8em; line-height: 1.4; color: #475569; }
.mb-pwa-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }
.mb-pwa-bar button {
    min-height: 44px; padding: 8px 16px; border-radius: 10px; font: inherit; font-size: .88em; font-weight: 700;
    cursor: pointer; border: 1px solid #c7d2fe; background: #fff; color: #3730a3;
}
.mb-pwa-bar .mb-pwa-go { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.mb-pwa-bar button:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }
@media (max-width: 480px) {
    .mb-pwa-bar { flex-wrap: wrap; }
    .mb-pwa-actions { width: 100%; justify-content: flex-end; }
}
/* The install bar sits at the top (the helper button and the update bar own the bottom). */
body:has(.mb-pwa-bar) .mb-pwa-notice { top: calc(var(--mb-tb-h, 56px) + env(safe-area-inset-top, 0px) + 96px); }

.mb-pwa-notice {
    position: fixed; inset-inline: 16px; margin-inline: auto; max-width: 520px; text-align: center;
    top: calc(var(--mb-tb-h, 56px) + env(safe-area-inset-top, 0px) + 8px); z-index: 10001;
    padding: 10px 16px; border-radius: 12px; font-size: .88em; font-weight: 600; line-height: 1.4;
    color: #fff; background: #334155; box-shadow: 0 8px 24px rgba(15, 23, 42, .3);
    opacity: 0; visibility: hidden; transform: translateY(-140%);
    transition: transform .25s ease, opacity .25s ease, visibility .25s;
    pointer-events: none;
}
.mb-pwa-notice.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mb-pwa-notice.is-offline { background: #b45309; }
.mb-pwa-notice.is-online  { background: #047857; }
@keyframes mbPwaIn { from { transform: translateY(-40%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .mb-pwa-bar { animation: none; }
    .mb-pwa-notice { transition: none; }
}
@media print { .mb-pwa-bar, .mb-pwa-notice { display: none !important; } }

/* ============================================================
   3.81.1 — Side navigation as a drawer on phones and tablets
   (≤1024px), the way DACUM Live Pro does it: ☰ in the toolbar opens a
   vertical list of the sections; choosing one closes it. Desktop keeps
   its fixed rail. The strip of pills this replaces needed sideways
   swiping to find a tab.
   ============================================================ */
:root { --mb-tb-h: 56px; }
@media (max-width: 900px) { :root { --mb-tb-h: 52px; } }
@media (max-width: 600px) { :root { --mb-tb-h: 56px; } }

#mb-nav-backdrop, .mb-nav-close { display: none; }

@media (max-width: 1024px) {
    .tabs-container {
        position: fixed;
        inset-inline-start: 0;
        top: calc(var(--mb-tb-h) + env(safe-area-inset-top, 0px));
        bottom: 0;
        width: min(300px, 86vw);
        z-index: 10002;
        display: flex; flex-direction: column; gap: 16px;
        margin: 0;
        padding: 14px 12px calc(20px + env(safe-area-inset-bottom, 0px));
        padding-inline-start: max(12px, env(safe-area-inset-left));
        background: linear-gradient(180deg, var(--mb-silver-light) 0%, var(--mb-silver) 55%, var(--mb-silver-dark) 100%);
        border-inline-end: 1px solid var(--mb-silver-line);
        overflow-x: hidden; overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .22s ease, visibility .22s;
    }
    html[dir="rtl"] .tabs-container { transform: translateX(100%); }
    body.mb-nav-open .tabs-container {
        transform: none; visibility: visible;
        box-shadow: 0 0 28px rgba(15, 23, 42, .35);
    }
    body.mb-nav-open { overflow: hidden; }
    body.mb-nav-no-anim .tabs-container { transition: none !important; }

    #mb-nav-backdrop {
        display: block; position: fixed; inset: 0; z-index: 10001;
        background: rgba(15, 23, 42, .5);
        opacity: 0; visibility: hidden;
        transition: opacity .22s ease, visibility .22s;
    }
    body.mb-nav-open #mb-nav-backdrop { opacity: 1; visibility: visible; }

    /* ☰ shows on phones and tablets, and stays put while the rest of the
       toolbar is swiped sideways. */
    .mb-nav-toggle { display: inline-flex; }
    .mb-nav-toggle + .figma-divider { display: block; }
    .figma-toolbar-scroll > .mb-nav-toggle {
        position: sticky; inset-inline-start: 0; z-index: 3;
        background: #fff; box-shadow: 0 0 8px 6px #fff;
    }
    .mb-nav-toggle .figma-btn-icon.silver { width: 38px; height: 38px; font-size: 1.25em; }
    body.mb-nav-open .mb-nav-toggle .figma-btn-icon.silver { background: var(--mb-accent); color: #fff; }

    .mb-nav-close {
        display: inline-flex; align-items: center; justify-content: center;
        margin-inline-start: auto; flex-shrink: 0;
        width: 44px; height: 44px; padding: 0; border-radius: 12px;
        border: 1px solid var(--mb-silver-line); background: rgba(255, 255, 255, .7);
        color: var(--mb-nav-ink); font-size: 1.4em; line-height: 1; cursor: pointer;
    }
    html[dir="rtl"] .mb-nav-close { transform: scaleX(-1); }

    /* The helper button would float over the open list. */
    body.mb-nav-open #mb-hw-chip, body.mb-nav-open .mb-hw-chipwrap { display: none !important; }




    /* ── Rail header ───────────────────────────────────────────── */
    .mb-nav-head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 4px 8px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.75);
        box-shadow: 0 1px 0 var(--mb-silver-line);
        flex-shrink: 0;
    }

    .mb-nav-mark {
        width: 34px;
        height: 34px;
        flex-shrink: 0;
        border-radius: 9px;
        background: var(--mb-accent);
        color: #fff;
        font-size: 0.78em;
        font-weight: 800;
        letter-spacing: 0.5px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
        direction: ltr;                  /* the mark is always "MB" */
    }

    .mb-nav-head-text { min-width: 0; }

    .mb-nav-title {
        display: block;
        font-size: 0.86em;
        font-weight: 700;
        color: var(--mb-nav-ink);
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    /* ── The list ──────────────────────────────────────────────── */
    .tabs {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 4px;
        flex: 1 1 auto;
        border-bottom: none;
        margin: 0;
        min-width: 0;
    }

    .tabs .tab {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        text-align: start;

        padding: 11px 14px;
        min-height: 46px;
        border-radius: 10px;
        border: 1px solid transparent;
        border-inline-start: 3px solid transparent;   /* accent slot, no shift */

        background: transparent;
        color: var(--mb-nav-ink);
        font-size: 0.94em;
        font-weight: 600;
        line-height: 1.4;

        white-space: normal;             /* long Arabic labels wrap */
        overflow-wrap: anywhere;
        flex-shrink: 0;
        transition: background 0.18s, color 0.18s, border-color 0.18s;
    }

    .tabs .tab:hover {
        background: rgba(255, 255, 255, 0.72);
        border-color: rgba(255, 255, 255, 0.9);
        border-inline-start-color: var(--mb-silver-dark);
        color: #2F3439;
    }

    .tabs .tab:focus-visible {
        outline: 2px solid var(--mb-accent);
        outline-offset: 2px;
    }

    .tabs .tab.active {
        background: #FFFFFF;
        color: var(--mb-accent);
        border-color: #FFFFFF;
        border-inline-start-color: var(--mb-accent);
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
    }

    /* Help sits at the foot of the rail, where a help entry belongs. */
    .tabs .tab:last-child {
        margin-top: auto;
        color: var(--mb-nav-ink-soft);
        font-size: 0.88em;
        min-height: 40px;
    }
    .tabs .tab:last-child.active { color: var(--mb-accent); }
    /* 3.38.0: Settings opens a dialog, it is not a page — it sits at the
       foot with Help, which then follows it directly. */
    .tabs .tab.mb-nav-settings {
        margin-top: auto;
        color: var(--mb-nav-ink-soft);
        font-size: 0.88em;
        min-height: 40px;
    }
    .tabs .tab.mb-nav-settings + .tab:last-child { margin-top: 0; }

    /* The panel no longer needs the strip's clearance. */
    .tab-content.active { border-radius: 14px; }
}

/* 3.81.2 — small round buttons stay round on touch screens.
   The 44px minimum height (pointer: coarse) stretched the 24–34px circles
   into ovals. Their size is fixed; the touch target is an invisible
   ::after around each one instead. */
@media (pointer: coarse) {
    #mb-hw button.mb-hw-dot,
    button.mb-hw-chip-x#mb-hw-chip-x,
    .mb-tab-help-btn { min-height: 0; min-width: 0; flex: 0 0 auto; }
    #mb-hw button.mb-hw-dot { position: relative; width: 30px; height: 30px; aspect-ratio: 1; }
    #mb-hw button.mb-hw-dot::after { content: ""; position: absolute; inset: -4px; }
    .mb-hw-dots { gap: 8px; }
    .mb-tab-help-btn { aspect-ratio: 1; }
}

/* 3.81.3 — phones in portrait: nothing may run past the screen edge.
   The sheet buttons (◀ Sheet 1 of 1 ▶ ➕ Add …) sat in a row that could not
   shrink, and the trainer / learner signature table kept three columns. */
@media (max-width: 600px) {
    .mb-sheet-nav { flex-shrink: 1 !important; flex-wrap: wrap; justify-content: center; width: 100%; min-width: 0; }
    .mb-sheet-nav [data-act^="addNew"] { flex: 1 1 100%; justify-content: center; }
    .mb-sheet-nav > span { min-width: 0 !important; flex: 1 1 auto; }

    .mb-sig-grid { grid-template-columns: 1fr !important; }
    .mb-sig-grid > div { border-right: 0 !important; border-bottom: 1px solid #d1d5db; }
    .mb-sig-grid > div:last-child { border-bottom: 0; }
}

/* 3.81.4 — link to DACUM Live Pro at the foot of the side navigation
   (above Settings and Help). It is an <a>, not a section: no .active state. */
#mb-sidenav .tabs a.tab.mb-nav-ext {
    text-decoration: none; box-sizing: border-box; cursor: pointer;
    font-size: .88em; min-height: 40px;
}
@media (min-width: 1025px), (max-width: 1024px) {
    #mb-sidenav .tabs a.tab.mb-nav-ext { margin-top: auto; }
    #mb-sidenav .tabs a.tab.mb-nav-ext + .tab.mb-nav-settings { margin-top: 0; }
}
@media (max-width: 1024px) {
    #mb-sidenav .tabs a.tab.mb-nav-ext {
        display: flex; align-items: center; width: 100%; padding: 11px 14px; border-radius: 10px;
        border: 1px solid transparent; background: transparent; color: var(--mb-nav-ink-soft);
        white-space: normal; flex-shrink: 0;
    }
}

/* 3.81.5 — the language menu on phones.
   It was position:fixed with both inline insets at 12px, which a
   containing block other than the window turned into a ~60px sliver cut
   by the screen edge in the installed app. It hangs from its button like
   the desktop one, and cannot leave the screen: the button is at the
   end of the toolbar and the panel is never wider than the window. */
@media (max-width: 600px) {
    .mb-lang-panel {
        position: absolute;
        top: calc(100% + 8px);
        inset-inline-start: auto;
        inset-inline-end: 0;
        width: min(220px, calc(100vw - 24px));
    }
}

/* 3.81.6 — the Export menu (moved here from src/export_menu.js, which
   injected it at DOMContentLoaded: until then the five items showed as
   buttons in the toolbar). Same rules, now in the stylesheet that blocks
   first paint. */
.mb-exp-menu{position:relative;flex:0 0 auto;}
.mb-exp-caret{font-size:.7em;opacity:.6;margin-inline-start:2px;}
.mb-exp-panel{position:absolute;inset-inline-start:0;top:calc(100% + 6px);min-width:230px;padding:6px;border:1px solid #e2e8f0;border-radius:12px;background:#fff;box-shadow:0 12px 32px rgba(15,23,42,.16);z-index:6000;display:none;}
.mb-exp-menu.is-open .mb-exp-panel{display:block;}
.mb-exp-opt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border:none;border-radius:9px;background:transparent;font:inherit;font-size:.93em;color:#334155;text-align:start;cursor:pointer;transition:background .12s;}
.mb-exp-opt:hover,.mb-exp-opt:focus-visible{background:#eef2ff;outline:none;}
.mb-exp-opt .figma-btn-icon{flex:0 0 auto;}
@media (max-width:560px){
.mb-exp-panel{inset-inline-start:auto;inset-inline-end:0;}
}