/* Brandlevate CBT — math rendering, editor toolbar, student keypad (v2.5.7) */

/* Rendered math inside exam content */
.katex { font-size: 1.08em; }
.katex-display { margin: .7em 0; overflow-x: auto; overflow-y: hidden; padding: 2px 0; max-width: 100%; }
.blv2-option-text .katex-display { margin: .3em 0; }
.blv2-option-text .katex { white-space: nowrap; }

/* Student answer keypad */
.blv2-keypad { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.blv2-key {
    min-width: 40px; height: 38px; padding: 0 10px; border-radius: 8px; cursor: pointer;
    border: 1px solid #d1d5db; background: #f9fafb; color: #111827; font-size: 16px; line-height: 1;
    touch-action: manipulation; font-family: "Cambria Math", "STIX Two Math", "Segoe UI Symbol", serif;
}
.blv2-key:hover { background: #eef2ff; border-color: #818cf8; }
.blv2-key:focus { background: #eef2ff; border-color: #818cf8; outline: none; }
.blv2-key:active { transform: translateY(1px); }

/* Question editor toolbar + live preview */
.blv-math-editor {
    border: 1px solid #d1d5db; border-radius: 10px; background: #f9fafb;
    padding: 12px; margin: 0 0 16px; font-size: 13px;
}
.blv-me-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.blv-me-hint { color: #6b7280; font-size: 12px; line-height: 1.4; }
.blv-me-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.blv-me-tab {
    border: 1px solid #d1d5db; background: #fff; border-radius: 999px; padding: 4px 12px;
    font-size: 12px; cursor: pointer; color: #374151;
}
.blv-me-tab.active { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.blv-me-panel { display: none; flex-wrap: wrap; gap: 6px; }
.blv-me-panel.active { display: flex; }
.blv-me-btn {
    min-width: 38px; height: 34px; padding: 0 9px; border: 1px solid #d1d5db; border-radius: 7px;
    background: #fff; cursor: pointer; font-size: 14px; color: #111827;
    font-family: "Cambria Math", "STIX Two Math", "Segoe UI Symbol", serif;
}
.blv-me-btn:hover { background: #eef2ff; border-color: #818cf8; }
.blv-me-preview-wrap { margin-top: 10px; }
.blv-me-preview-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; margin-bottom: 4px; }
.blv-me-preview {
    min-height: 38px; padding: 8px 10px; background: #fff; border: 1px dashed #c7d2fe;
    border-radius: 8px; white-space: pre-wrap; word-break: break-word; font-size: 15px;
}

/* ── v2.5.8: question images & diagrams ───────────────────────── */
.blv2-q-image, #blv2-q-text img, .blv2-corr-q img, .blv-q-img {
    display: block; max-width: 100%; height: auto; margin: 10px 0; border-radius: 8px;
    cursor: zoom-in; background: #fff;
}
#blv2-q-text img { max-height: 55vh; width: auto; object-fit: contain; }
.blv2-option-text img, .blv2-opt-img { display: block; max-width: 100%; max-height: 180px; width: auto; height: auto; margin: 4px 0; border-radius: 6px; cursor: zoom-in; }
.blv-rv-img { display: block; max-width: 100%; max-height: 320px; height: auto; margin: 6px 0; border-radius: 6px; }
.blv-rv-qtext img, .blv-rv-opts img { max-width: 100%; height: auto; }
.blv2-lightbox {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483000; background: rgba(0,0,0,.86);
    display: flex; align-items: center; justify-content: center; padding: 16px; cursor: zoom-out;
}
.blv2-lightbox img { max-width: 100%; max-height: 100%; background: #fff; border-radius: 6px; }
.blv2-lightbox-x {
    position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%;
    border: 0; background: #fff; color: #111; font-size: 18px; cursor: pointer;
}

/* editor: image field + toolbar button + preview */
.blv-qimg-box { border: 1px dashed #c7d2fe; border-radius: 10px; padding: 10px; background: #f9fafb; }
.blv-qimg-preview { margin-bottom: 8px; }
.blv-qimg-preview img { max-width: 100%; max-height: 180px; border-radius: 6px; border: 1px solid #e5e7eb; background: #fff; }
.blv-qimg-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.blv-qimg-status, .blv-me-imgstatus { font-size: 12px; color: #047857; }
.blv-qimg-status.err, .blv-me-imgstatus.err { color: #b91c1c; }
.blv-qimg-help { margin: 8px 0 0; font-size: 12px; color: #6b7280; line-height: 1.4; }
.blv-me-imgrow { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.blv-me-imgbtn {
    border: 1px solid #4f46e5; background: #fff; color: #4f46e5; border-radius: 7px;
    padding: 5px 12px; font-size: 13px; cursor: pointer;
}
.blv-me-imgbtn:hover { background: #eef2ff; }
.blv-me-pimg { max-width: 100%; max-height: 160px; vertical-align: middle; border-radius: 4px; }

/* ── Legacy-browser layout fallbacks (auto-generated) ───────── */
@supports not (inset: 0) {
.blv2-keypad > * { margin-right: 6px; margin-bottom: 6px; }
.blv-me-head > * { margin-bottom: 4px; }
.blv-me-tabs > * { margin-right: 4px; margin-bottom: 4px; }
.blv-qimg-actions > * { margin-right: 8px; margin-bottom: 8px; }
.blv-me-imgrow > * { margin-right: 10px; }
}

/* ═════════════ v2.6.0 — geometric figures (blv-shapes.js) ═════════════ */
.blv-shapes-wrap { margin: 12px 0; }
.blv-shapes { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 -6px; }
.blv-shape { margin: 6px; text-align: center; max-width: 100%; }
.blv-shape svg { display: block; margin: 0 auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; max-width: 100%; height: auto; }
.blv-shape figcaption { margin-top: 4px; font-size: 12px; color: #4b5563; }
@supports (gap: 1px) { .blv-shapes { gap: 6px; margin: 0; } .blv-shape { margin: 0; } }

/* Builder inside the question editors */
.blv-shp { margin-bottom: 16px; }
.blv-shp-box { border: 1px dashed #c7d2fe; border-radius: 10px; padding: 10px; background: #f9fafb; }
.blv-shp-actions { margin-top: 6px; }
.blv-shp-actions > * { margin-right: 8px; margin-bottom: 6px; }
.blv-shp-count { font-size: 12px; color: #6b7280; }
.blv-shp-help { margin: 6px 0 0; font-size: 12px; color: #6b7280; line-height: 1.4; }
.blv-shp-item { display: flex; flex-wrap: wrap; align-items: center; padding: 8px; margin-bottom: 8px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; }
.blv-shp-item.open { border-color: #6366f1; }
.blv-shp-thumb { width: 110px; margin-right: 12px; }
.blv-shp-thumb figure { margin: 0; }
.blv-shp-thumb svg { border: 0; }
.blv-shp-thumb figcaption { display: none; }
.blv-shp-meta { flex: 1 1 140px; min-width: 120px; }
.blv-shp-meta strong { display: block; font-size: 13px; }
.blv-shp-meta span { font-size: 12px; color: #6b7280; }
.blv-shp-btns > * { margin-left: 4px; }
.blv-shp-palette { margin-top: 8px; padding: 10px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; max-height: 380px; overflow-y: auto; }
.blv-shp-group h5 { margin: 10px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; }
.blv-shp-grid { display: flex; flex-wrap: wrap; }
.blv-shp-card { width: 104px; margin: 0 8px 8px 0; padding: 4px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; text-align: center; font: inherit; }
.blv-shp-card:hover, .blv-shp-card:focus { border-color: #6366f1; outline: none; background: #eef2ff; }
.blv-shp-card-fig { display: block; }
.blv-shp-card-fig figure { margin: 0; }
.blv-shp-card-fig svg { border: 0; }
.blv-shp-card-fig figcaption { display: none; }
.blv-shp-card-name { display: block; font-size: 11px; line-height: 1.25; color: #374151; }
.blv-shp-editor { display: flex; flex-wrap: wrap; margin: -2px 0 10px; padding: 10px; background: #fff; border: 1px solid #6366f1; border-radius: 8px; }
.blv-shp-form { flex: 1 1 280px; min-width: 240px; margin-right: 12px; }
.blv-shp-form h5 { margin: 10px 0 6px; font-size: 12px; font-weight: 700; }
.blv-shp-form h5 small { font-weight: 400; color: #6b7280; }
.blv-shp-preview { flex: 0 1 300px; }
.blv-shp-dims, .blv-shp-labels { display: flex; flex-wrap: wrap; }
.blv-shp-field { display: block; width: 46%; min-width: 130px; margin: 0 8px 6px 0; font-size: 12px; }
.blv-shp-field span { display: block; margin-bottom: 2px; color: #4b5563; }
.blv-shp-field .blv-input { width: 100%; box-sizing: border-box; }
.blv-shp-check { display: block; margin: 3px 0; font-size: 13px; }
.blv-shp-done { margin-top: 10px; }

/* Theory answer area + tally (v2.6.0) */
.blv-tally { margin: 0 0 12px; padding: 10px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; font-size: 13px; }
.blv-tally-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.blv-tally-head strong { font-size: 13px; }
.blv-tally-row { display: flex; align-items: center; padding: 3px 0; }
.blv-tally-type { width: 110px; flex: 0 0 110px; color: #374151; }
.blv-tally-marks { flex: 1 1 auto; min-width: 0; font-family: "Courier New", monospace; font-size: 16px; letter-spacing: 1px; color: #1f2937; word-break: break-all; }
.blv-tally-num { flex: 0 0 auto; margin-left: 8px; color: #4b5563; white-space: nowrap; }
.blv-tally-bar { height: 8px; margin: 6px 0 4px; background: #e5e7eb; border-radius: 6px; overflow: hidden; }
.blv-tally-bar > span { display: block; height: 100%; background: #10b981; }
.blv-tally-bar.over > span { background: #ef4444; }
.blv-tally-note { font-size: 12px; color: #4b5563; }
.blv-tally-note.warn { color: #b45309; }
.blv-tally-note.bad { color: #b91c1c; }
.blv-tally-next { margin: 0 0 10px; font-size: 12px; color: #4b5563; }
.blv-theory-opts { margin: 0 0 8px; }
.blv-tally-five { position: relative; display: inline-block; }
.blv-tally-five:after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; border-top: 2px solid #ef4444; -webkit-transform: rotate(-22deg); transform: rotate(-22deg); }
.blv-tally-more { color: #6b7280; }

/* ═════════════ v2.6.1 — text formatting toolbar + rendering ═════════════ */
.blv-me-fmt { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 8px; padding: 6px 8px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; }
.blv-me-fmt > * { margin-right: 6px; }
.blv-me-fmtlabel { font-size: 12px; font-weight: 700; color: #374151; }
.blv-me-fmthint { font-size: 11px; color: #6b7280; }
.blv-me-fmtbtn { min-width: 34px; margin: 2px 6px 2px 0; padding: 4px 8px; background: #f9fafb; border: 1px solid #d1d5db; border-radius: 6px; cursor: pointer; font: inherit; font-size: 13px; line-height: 1.2; color: #111827; }
.blv-me-fmtbtn:hover, .blv-me-fmtbtn:focus { background: #eef2ff; border-color: #818cf8; outline: none; }
.blv-me-fmtbtn[data-fmt="b"] { font-weight: 700; }
.blv-me-fmtbtn[data-fmt="i"] { font-style: italic; font-family: Georgia, "Times New Roman", serif; }
.blv-me-fmtbtn[data-fmt="u"] { text-decoration: underline; }

/* Enter in the editor is a new line wherever the text is shown; lists get indent. */
.blv-me-preview, #blv2-question-text, .blv2-corr-q, .blv2-corr-exp, .blv-rv-qtext { white-space: pre-line; }
.blv-me-preview ul, .blv-me-preview ol, #blv2-question-text ul, #blv2-question-text ol,
.blv2-corr-q ul, .blv2-corr-q ol, .blv-rv-qtext ul, .blv-rv-qtext ol,
.blv2-option-text ul, .blv2-option-text ol { margin: 6px 0 6px 22px; padding: 0; white-space: normal; }
.blv-me-preview ul, #blv2-question-text ul, .blv2-corr-q ul, .blv-rv-qtext ul, .blv2-option-text ul { list-style: disc; }
.blv-me-preview ol, #blv2-question-text ol, .blv2-corr-q ol, .blv-rv-qtext ol, .blv2-option-text ol { list-style: decimal; }
.blv-me-preview li, #blv2-question-text li, .blv2-corr-q li, .blv-rv-qtext li, .blv2-option-text li { margin: 2px 0; }
#blv2-question-text u, .blv-me-preview u, .blv2-option-text u { text-decoration: underline; }

/* ═════════════ v2.6.2 — tally marks inside question / option text ═════════════ */
.blv-tally-inline { display: inline-block; vertical-align: middle; line-height: 0; margin: 2px 0; }
.blv-tally-g { display: inline-block; margin-right: 8px; vertical-align: middle; }
.blv-tally-g:last-child { margin-right: 0; }