/* =====================================================================
   QUESTION RENDER — Self-contained styles for all question type rendering
   Text render, MC options, answer indicators, split pane layouts
   Used by: Questionbank (shared), Teacher Portal, Student Portal, Exams
   Token prefix: --qr-* (question-render)
   Falls back to --vp-* if main-portal-theme.css is loaded, otherwise uses defaults.
   ===================================================================== */

/* ─── Light Mode Tokens ─────────────────────────────────────────────── */
:root {
    /* Accent */
    --qr-primary:            var(--vp-primary, #3B82F6);
    --qr-primary-subtle:     var(--vp-primary-subtle, #EFF6FF);
    --qr-primary-rgb:        var(--vp-primary-rgb, 59, 130, 246);
    --qr-success:            var(--vp-success, #22C55E);
    --qr-success-subtle:     var(--vp-success-subtle, #F0FDF4);
    --qr-success-rgb:        var(--vp-success-rgb, 34, 197, 94);
    --qr-danger:             var(--vp-danger, #EF4444);
    --qr-danger-subtle:      var(--vp-danger-subtle, #FEF2F2);
    --qr-danger-rgb:         var(--vp-danger-rgb, 239, 68, 68);

    /* Maroon (option circle label accent) */
    --qr-maroon:             #5b2333;
    --qr-maroon-text:        #fff;

    /* Surfaces */
    --qr-surface-1:          var(--vp-surface-1, #FFFFFF);
    --qr-surface-2:          var(--vp-surface-2, #F8FAFC);
    --qr-surface-3:          var(--vp-surface-3, #F1F5F9);

    /* Text */
    --qr-text:               var(--vp-text, #1E293B);
    --qr-text-secondary:     var(--vp-text-secondary, #64748B);
    --qr-text-muted:         var(--vp-text-muted, #94A3B8);

    /* Borders */
    --qr-border:             var(--vp-border, #E2E8F0);
    --qr-border-strong:      var(--vp-border-strong, #CBD5E1);

    /* Shadows */
    --qr-shadow-sm:          var(--vp-shadow-sm, 0 1px 2px rgba(0,0,0,.05));
    --qr-shadow-md:          var(--vp-shadow-md, 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05));

    /* Design tokens */
    --qr-radius-md:          var(--vp-radius-md, .5rem);
    --qr-radius-full:        var(--vp-radius-full, 9999px);
    --qr-transition-fast:    var(--vp-transition-fast, 150ms ease);

    /* State-specific (derived, for dark mode override) */
    --qr-correct-circle:     var(--qr-success);
    --qr-wrong-circle:       var(--qr-danger);
    --qr-table-stripe:       var(--qr-surface-2);
    --qr-opt-hover-bg:       var(--qr-surface-2);
}

/* AP FRQ Rubric shown under teacher answer reveal */
.qb-frq-rubric-shell {
    margin-top: 1rem;
}

.qb-frq-rubric-card,
.qb-frq-rubric-empty,
.qb-frq-rubric-loading {
    border: 1px solid var(--qr-border);
    border-radius: var(--qr-radius-md);
    background: var(--qr-surface-1);
    color: var(--qr-text);
}

.qb-frq-rubric-loading,
.qb-frq-rubric-empty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    color: var(--qr-text-secondary);
}

.qb-frq-rubric-error {
    border-color: var(--qr-danger);
    background: var(--qr-danger-subtle);
    color: var(--qr-danger);
}

.qb-frq-rubric-card {
    overflow: hidden;
}

.qb-frq-rubric-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--qr-border);
    background: var(--qr-surface-2);
    font-weight: 700;
}

.qb-frq-rubric-title > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.qb-frq-rubric-total,
.qb-frq-rubric-points {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    border-radius: var(--qr-radius-full);
    background: var(--qr-primary-subtle);
    color: var(--qr-primary);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.25rem 0.625rem;
}

.qb-frq-rubric-subtitle,
.qb-frq-rubric-context,
.qb-frq-rubric-note-main {
    margin: 0.875rem 1rem 0;
}

.qb-frq-rubric-subtitle {
    font-weight: 650;
}

.qb-frq-rubric-context {
    color: var(--qr-text-secondary);
}

.qb-frq-rubric-part {
    margin: 1rem;
    border: 1px solid var(--qr-border);
    border-radius: var(--qr-radius-md);
    background: var(--qr-surface-2);
    overflow: hidden;
}

.qb-frq-rubric-part-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid var(--qr-border);
    background: var(--qr-surface-3);
}

.qb-frq-rubric-part-title {
    font-weight: 700;
}

.qb-frq-rubric-part-text,
.qb-frq-rubric-note,
.qb-frq-rubric-empty-line {
    padding: 0.75rem 0.875rem;
    color: var(--qr-text-secondary);
}

.qb-frq-rubric-note {
    border-top: 1px solid var(--qr-border);
}

.qb-frq-rubric-criteria {
    display: grid;
    gap: 0.75rem;
    padding: 0.875rem;
}

.qb-frq-rubric-criterion {
    border: 1px solid var(--qr-border);
    border-radius: var(--qr-radius-md);
    background: var(--qr-surface-1);
    overflow: hidden;
}

.qb-frq-rubric-criterion-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--qr-border);
}

.qb-frq-rubric-criterion-index {
    color: var(--qr-text-secondary);
    font-size: 0.85rem;
    font-weight: 700;
}

.qb-frq-rubric-criterion-text {
    padding: 0.75rem;
    line-height: 1.55;
}

@media (max-width: 768px) {
    .qb-frq-rubric-title,
    .qb-frq-rubric-part-head,
    .qb-frq-rubric-criterion-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ─── Dark Mode Tokens ──────────────────────────────────────────────── */
body.dark-mode,
html[data-theme="dark"] {
    /* Accent */
    --qr-primary:            var(--vp-primary, #60A5FA);
    --qr-primary-subtle:     var(--vp-primary-subtle, rgba(59,130,246,.12));
    --qr-primary-rgb:        var(--vp-primary-rgb, 96, 165, 250);
    --qr-success:            var(--vp-success, #4ADE80);
    --qr-success-subtle:     var(--vp-success-subtle, rgba(34,197,94,.12));
    --qr-success-rgb:        var(--vp-success-rgb, 74, 222, 128);
    --qr-danger:             var(--vp-danger, #F87171);
    --qr-danger-subtle:      var(--vp-danger-subtle, rgba(239,68,68,.12));
    --qr-danger-rgb:         var(--vp-danger-rgb, 248, 113, 113);

    /* Maroon */
    --qr-maroon:             #8b3a4a;

    /* Surfaces */
    --qr-surface-1:          var(--vp-surface-1, #1E293B);
    --qr-surface-2:          var(--vp-surface-2, #283548);
    --qr-surface-3:          var(--vp-surface-3, #0F172A);

    /* Text */
    --qr-text:               var(--vp-text, #F1F5F9);
    --qr-text-secondary:     var(--vp-text-secondary, #94A3B8);
    --qr-text-muted:         var(--vp-text-muted, #64748B);

    /* Borders */
    --qr-border:             var(--vp-border, #334155);
    --qr-border-strong:      var(--vp-border-strong, #475569);

    /* Shadows */
    --qr-shadow-sm:          var(--vp-shadow-sm, 0 1px 2px rgba(0,0,0,.2));
    --qr-shadow-md:          var(--vp-shadow-md, 0 4px 6px -1px rgba(0,0,0,.3), 0 2px 4px -2px rgba(0,0,0,.2));

    /* State-specific */
    --qr-correct-circle:     var(--vp-btn-success-bg, #16A34A);
    --qr-wrong-circle:       var(--vp-btn-danger-bg, #DC2626);
    --qr-table-stripe:       rgba(255, 255, 255, 0.03);
    --qr-opt-hover-bg:       rgba(255, 255, 255, 0.06);
}

/* ─── Text Content Wrapper ──────────────────────────────────────────── */

.text-render-content {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--qr-text);
    word-break: break-word;
}

/* Dark-mode SVG: invert luminance, preserve hue. Works regardless of
   the SVG's internal fill/stroke colors. Raster images are unaffected.
   KaTeX SVG'leri (radical, etc.) zaten currentColor ile tema-uyumlu render edilir;
   `:not(.katex svg)` ile filtreden hariç tutulur — aksi halde invert sembolu kaybeder. */
[data-theme="dark"] .text-render-content svg:not(.katex svg) {
    filter: invert(1) hue-rotate(180deg);
}

/* ─── Paragraph (blue callout, full width above the question) ────────── */

.text-render-paragraph {
    font-size: 1rem;
    line-height: 1.8;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--qr-text);
    letter-spacing: 0.01em;
    /* Blue callout — same accent treatment as .text-render-question so they form a pair */
    margin-bottom: 1rem;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--qr-primary);
    background: var(--qr-surface-2);
    border-radius: .5rem;
}

/* Responsive media inside the paragraph (and any other text-render content):
   plain inline images shrink to fit. Excludes .text-render-cropped-img and
   .text-render-cropped-inline which have their own dedicated sizing rules. */
.text-render-content img:not(.text-render-cropped-img):not(.text-render-cropped-inline),
.text-render-paragraph img:not(.text-render-cropped-img):not(.text-render-cropped-inline) {
    max-width: 100%;
    height: auto;
    display: block;
}

.text-render-content ul,
.text-render-content ol,
.text-render-paragraph ul,
.text-render-paragraph ol {
    padding-left: 1.5rem;
    margin: .5rem 0;
}

/* Wrap wide tables horizontally on tablet/mobile so they don't blow out the layout */
.text-render-content table,
.text-render-paragraph table {
    max-width: 100%;
}
@media (max-width: 991.98px) {
    .text-render-content table,
    .text-render-paragraph table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

/* ─── Question Text (callout — blue left accent, like exam) ─────────── */

.text-render-question {
    font-size: 1.05rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    white-space: pre-wrap;
    word-break: break-word;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--qr-primary);
    background: var(--qr-surface-2);
    border-radius: .5rem;
    color: var(--qr-text);
}

/* ─── HTML Table (inside text content) ──────────────────────────────── */

.text-render-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 1rem;
    font-size: 0.925rem;
    border: 1px solid var(--qr-border);
    border-radius: var(--qr-radius-md);
    overflow: hidden;
}

.text-render-content table th,
.text-render-content table td {
    border-bottom: 1px solid var(--qr-border);
    border-right: 1px solid var(--qr-border);
    padding: 0.5rem 0.875rem;
    text-align: left;
}

.text-render-content table th:last-child,
.text-render-content table td:last-child {
    border-right: none;
}

.text-render-content table tr:last-child td {
    border-bottom: none;
}

.text-render-content table th {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--qr-text-secondary);
    background: var(--qr-surface-3);
}

.text-render-content table tbody tr:nth-child(even) {
    background: var(--qr-table-stripe);
}

/* ─── Split Pane Layout (Split.js — paragraph left, question+options right) */

.text-render-split {
    display: flex;
    flex-direction: row;
    min-height: 200px;
}

.text-render-split-left,
.text-render-split-right {
    overflow-y: auto;
    padding: 1rem 1.5rem;
}

.text-render-split-left {
    max-height: 600px;
    overflow-y: auto;
}

.text-render-split-left::-webkit-scrollbar { width: 5px; }
.text-render-split-left::-webkit-scrollbar-track { background: transparent; }
.text-render-split-left::-webkit-scrollbar-thumb {
    background: var(--qr-border);
    border-radius: var(--qr-radius-full);
}
.text-render-split-left::-webkit-scrollbar-thumb:hover {
    background: var(--qr-border-strong);
}

/* Split.js gutter — drag handle with center lines */
.text-render-split > .gutter {
    background: var(--qr-surface-3);
    border-left: 1px solid var(--qr-border);
    border-right: 1px solid var(--qr-border);
    cursor: col-resize;
    position: relative;
    flex-shrink: 0;
}

.text-render-split > .gutter::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 32px;
    border-left: 1px solid var(--qr-text-muted);
    border-right: 1px solid var(--qr-text-muted);
    opacity: 0.4;
}

.text-render-split > .gutter:hover::after {
    opacity: 0.8;
    border-color: var(--qr-primary);
}

/* ─── MC Options (2×2 grid, maroon callout cards — exam style) ───────── */

.text-render-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* Inside split pane (paragraph + question side-by-side): the right column is
   already narrow, so choices always stack to a single column regardless of viewport. */
.text-render-split-right .text-render-options {
    grid-template-columns: 1fr;
}

/* Long options: when at least one option's raw text exceeds the renderer's
   character threshold (90 chars — see question-renderer.js _buildOptions),
   the renderer adds this class so the 2-col grid collapses to a single column
   on desktop too — short options stay in the default 2-col grid. */
.text-render-options.text-render-options-stacked {
    grid-template-columns: 1fr;
}

/* Tablet and below (≤991.98px), no split pane: choices stack one-per-row for readability. */
@media (max-width: 991.98px) {
    .text-render-options {
        grid-template-columns: 1fr;
    }
}


.text-render-opt {
    padding: 0.65rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 2px solid transparent;
    border-left: 4px solid var(--qr-maroon);
    border-top-color: var(--qr-border);
    border-right-color: var(--qr-border);
    border-bottom-color: var(--qr-border);
    border-radius: var(--qr-radius-md);
    background: var(--qr-surface-2);
    cursor: default;
    transition: border-color var(--qr-transition-fast),
                background-color var(--qr-transition-fast),
                box-shadow var(--qr-transition-fast),
                transform var(--qr-transition-fast);
}

.text-render-opt:hover:not(:has(img:hover)) {
    background: var(--qr-opt-hover-bg);
    transform: translateX(2px);
}

/* Solvable options — interactive cursor */
.text-render-opt[data-choice] { cursor: pointer; }

/* Read-only (solved/submitted) — disabled inputs, no interaction */
.text-render-opt:has(input:disabled) {
    cursor: default;
    pointer-events: none;
}

/* Eliminate icon stays clickable even when option is disabled (for restore) */
.text-render-opt:has(input:disabled) .text-render-eliminate-icon {
    pointer-events: auto;
    cursor: pointer;
}

/* Eliminate icon — top-right circle × button */
.text-render-opt { position: relative; }

.text-render-eliminate-icon {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--qr-surface-3);
    border: 1px solid var(--qr-border);
    color: var(--qr-text-muted);
    font-size: 0.625rem;
    opacity: 0;
    transition: opacity var(--qr-transition-fast);
    cursor: pointer;
    z-index: 1;
}

.text-render-opt:hover .text-render-eliminate-icon { opacity: 1; }
.text-render-eliminate-icon:hover {
    background: var(--qr-danger-subtle);
    color: var(--qr-danger);
    border-color: var(--qr-danger);
}

/* Eliminated state — dashed border, faded, line-through */
.text-render-opt-eliminated {
    opacity: 0.35;
    border: 2px dashed var(--qr-text-muted);
    border-left-width: 4px;
    background: transparent;
}

.text-render-opt-eliminated .text-render-opt-text {
    text-decoration: line-through;
}

.text-render-opt-eliminated .text-render-eliminate-icon {
    opacity: 1;
    background: var(--qr-danger-subtle);
    color: var(--qr-danger);
    border-color: var(--qr-danger);
}

.text-render-opt-eliminated:hover {
    transform: none;
    background: transparent;
}

/* Cropped images — block mode (question/paragraph) */
.text-render-cropped-block {
    display: flex; justify-content: center;
    margin: .75rem 0;
}
.text-render-cropped-img {
    max-width: 500px; width: 100%; height: auto;
    border-radius: var(--qr-radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.text-render-cropped-img:hover {
    border-color: var(--qr-primary);
    box-shadow: 0 0 0 3px var(--qr-primary-subtle, rgba(59, 130, 246, .15));
    transform: scale(1.02);
}

/* Cropped images — inline mode (inside MC options) */
.text-render-cropped-inline {
    display: inline-block; vertical-align: middle;
    max-width: 120px; max-height: 80px;
    height: auto;
    border-radius: var(--qr-radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    margin: 0 .25rem;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.text-render-cropped-inline:hover {
    border-color: var(--qr-primary);
    box-shadow: 0 0 0 3px var(--qr-primary-subtle, rgba(59, 130, 246, .15));
    transform: scale(1.05);
}

/* Circle label for option letters (A, B, C, D, E) — Maroon accent */
.text-render-opt-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: var(--qr-maroon);
    color: var(--qr-maroon-text);
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 1px;
    transition: background var(--qr-transition-fast);
}

.text-render-opt-text {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.6;
    word-break: break-word;
    padding-top: 3px;
    color: var(--qr-text);
    /* Bootstrap .btn on the parent label sets text-align: center; force left so
       multi-line option text reads naturally instead of being centered. */
    text-align: left;
}

.text-render-opt-text > p:last-child {
    margin-bottom: 0;
}

/* Hidden radio inside label — visually hidden but clickable */
.text-render-opt input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Selected (solvable — native radio checked) */
.text-render-opt:has(input:checked) {
    border-color: var(--qr-primary);
    background: var(--qr-primary-subtle);
}

.text-render-opt:has(input:checked) .text-render-opt-label {
    background: var(--qr-primary);
}

/* Correct answer — green border wraps entire card */
.text-render-opt-correct {
    border-color: var(--qr-success);
    background: var(--qr-success-subtle);
}

.text-render-opt-correct:hover {
    background: var(--qr-success-subtle);
    transform: none;
}

.text-render-opt-correct .text-render-opt-label {
    background: var(--qr-correct-circle);
}

/* Wrong answer — red border wraps entire card */
.text-render-opt-wrong {
    border-color: var(--qr-danger);
    background: var(--qr-danger-subtle);
}

.text-render-opt-wrong:hover {
    background: var(--qr-danger-subtle);
    transform: none;
}

.text-render-opt-wrong .text-render-opt-label {
    background: var(--qr-wrong-circle);
}

/* ─── Answer Indicator Bar ──────────────────────────────────────────── */

.text-render-answer-indicator {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: fit-content;
    margin: 0.75rem auto 0;
    padding: 0.5rem 0.75rem;
    border-radius: var(--qr-radius-md);
    background: var(--qr-surface-2);
    border: 1px solid var(--qr-border);
    font-size: 0.85rem;
    color: var(--qr-text-secondary);
}

body.dark-mode .text-render-answer-indicator,
html[data-theme="dark"] .text-render-answer-indicator {
    background: var(--qr-surface-3);
}

.text-render-indicator-item {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.text-render-indicator-item strong {
    color: var(--qr-text);
}

.text-render-indicator-correct {
    color: var(--qr-success);
}

.text-render-indicator-wrong {
    color: var(--qr-danger);
}

.text-render-indicator-sep {
    width: 1px;
    height: 14px;
    background: var(--qr-border-strong);
    flex-shrink: 0;
}

/* ─── Inline Image ──────────────────────────────────────────────────── */

.text-render-inline-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--qr-radius-md);
    margin: 0.5rem 0;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    transition: opacity var(--qr-transition-fast);
    border: 1px solid var(--qr-border);
}

.text-render-inline-image:hover {
    opacity: 0.88;
    box-shadow: var(--qr-shadow-md);
}

/* ─── Math Formula (inline KaTeX) ───────────────────────────────────── */

.math-formula {
    display: inline;
    font-size: 1.1em;
}

/* =====================================================================
   DARK MODE — component overrides (token-only where possible)
   ===================================================================== */

body.dark-mode .text-render-opt,
html[data-theme="dark"] .text-render-opt {
    background: var(--qr-surface-2);
    border-top-color: var(--qr-border);
    border-right-color: var(--qr-border);
    border-bottom-color: var(--qr-border);
}

body.dark-mode .text-render-opt-correct,
html[data-theme="dark"] .text-render-opt-correct {
    border-color: var(--qr-success);
    background: rgba(var(--qr-success-rgb), 0.1);
}

body.dark-mode .text-render-opt-wrong,
html[data-theme="dark"] .text-render-opt-wrong {
    border-color: var(--qr-danger);
    background: rgba(var(--qr-danger-rgb), 0.1);
}

body.dark-mode .text-render-opt:has(input:checked),
html[data-theme="dark"] .text-render-opt:has(input:checked) {
    border-color: var(--qr-primary);
    background: rgba(var(--qr-primary-rgb), 0.12);
}

body.dark-mode .text-render-opt-eliminated,
html[data-theme="dark"] .text-render-opt-eliminated {
    border-color: var(--qr-border-strong);
    background: transparent;
}

body.dark-mode .text-render-eliminate-icon,
html[data-theme="dark"] .text-render-eliminate-icon {
    background: var(--qr-surface-3);
    border-color: var(--qr-border-strong);
}

/* =====================================================================
   RESPONSIVE (768px breakpoint)
   ===================================================================== */

@media (max-width: 768px) {
    .text-render-split {
        flex-direction: column;
    }

    .text-render-split-left {
        width: 100% !important;
        max-height: 300px;
        border-bottom: 2px solid var(--qr-border-strong);
        padding-bottom: 0.75rem;
    }

    .text-render-split > .gutter {
        display: none;
    }

    .text-render-split-right {
        width: 100% !important;
        padding-left: 0;
        padding-top: 0.75rem;
    }

    .text-render-paragraph {
        padding: 0.75rem 1rem;
    }

    .text-render-question {
        padding: 0.75rem 1rem;
    }

    .text-render-options {
        grid-template-columns: 1fr;
    }

    .text-render-opt {
        padding: 0.5rem 0.75rem;
        min-height: 44px;
    }

    /* Eliminate icon always visible on mobile */
    .text-render-eliminate-icon { opacity: .6; }

    /* Cropped images responsive on mobile */
    .text-render-cropped-img { max-width: 100%; }
    .text-render-cropped-inline { max-width: 80px; max-height: 60px; }

    .text-render-content table {
        font-size: 0.85rem;
    }

    .text-render-content table th,
    .text-render-content table td {
        padding: 0.375rem 0.625rem;
    }
}