/* Shared renderer for rich-text authored with the global RTE (globalFunction/js/rich-editor.js).
 * Import this on ANY site that DISPLAYS RTE output, then wrap the content in class "rich-content"
 * (the academy site also uses its own alias ".ac-rich"). Colours come from CSS vars with safe fallbacks,
 * so it adopts each site's theme. The matching EDITOR look is injected by rich-editor.js itself. */
.rich-content, .ac-rich{ line-height:1.7; color:var(--ink,#1a1a1e); }
.rich-content p, .ac-rich p{ margin:6px 0; }
.rich-content b, .rich-content strong, .ac-rich b, .ac-rich strong{ font-weight:700; }
.rich-content u, .ac-rich u{ text-decoration:underline; }
.rich-content a, .ac-rich a{ color:var(--theme-dk,var(--theme-base,#0F766E)); }
.rich-content img, .ac-rich img{ max-width:100%; border-radius:10px; }
.rich-content h3, .ac-rich h3{ font-size:calc(var(--font-size,14px) + 5px); font-weight:700; line-height:1.35; margin:22px 0 8px; }
.rich-content h4, .ac-rich h4{ font-size:calc(var(--font-size,14px) + 2px); font-weight:700; line-height:1.4; margin:16px 0 6px; color:var(--theme-dk,var(--theme-base,#0F766E)); }
.rich-content > h3:first-child, .rich-content > h4:first-child, .ac-rich > h3:first-child, .ac-rich > h4:first-child{ margin-top:0; }
.rich-content ul, .rich-content ol, .ac-rich ul, .ac-rich ol{ margin:6px 0; padding-left:22px; }
.rich-content li, .ac-rich li{ margin-bottom:6px; }

/* Tables — clean row separators (the academy display look; keep it minimal). */
.rich-content table, .ac-rich table{ width:100%; border-collapse:collapse; margin:8px 0; }
.rich-content td, .ac-rich td{ border-top:1px solid var(--line,#e2e8f0); padding:9px 6px; vertical-align:top; }

/* Checklist (RTE checkbox) — read-only render showing the saved checked state. */
.rich-content ul.rte-check, .ac-rich ul.rte-check{ list-style:none; padding-left:2px; }
.rich-content ul.rte-check li, .ac-rich ul.rte-check li{ position:relative; padding-left:28px; margin:5px 0; }
.rich-content ul.rte-check li::before, .ac-rich ul.rte-check li::before{ content:""; position:absolute; left:0; top:2px; width:17px; height:17px; border:1.5px solid var(--line2,#cbd5e1); border-radius:4px; box-sizing:border-box; }
.rich-content ul.rte-check li.checked::before, .ac-rich ul.rte-check li.checked::before{ content:"\2713"; background:var(--theme-base,#0D9488); border-color:var(--theme-base,#0D9488); color:#fff; font-size:calc(var(--font-size) - 3px); line-height:15px; text-align:center; }
.rich-content ul.rte-check li.checked, .ac-rich ul.rte-check li.checked{ color:var(--muted,#64748b); text-decoration:line-through; }

/* Code / command blocks (the copy button is added by the host page's JS). */
.rich-content pre, .ac-rich pre{ position:relative; background:var(--card,#f0eee9); border:1px solid var(--line,#e2e8f0); border-radius:10px; padding:14px 15px; overflow-x:auto; margin:8px 0; }
.rich-content pre code, .rich-content code, .ac-rich pre code, .ac-rich code{ font:calc(var(--font-size) - 2px)/1.6 ui-monospace,Consolas,"Microsoft JhengHei",monospace; white-space:pre-wrap; word-break:break-word; color:var(--ink,#1a1a1e); }
/* Highlight (RTE toolbar) — follows the site theme colour. */
.rich-content mark, .ac-rich mark{ background:color-mix(in srgb, var(--theme-base,#0D9488) 16%, transparent); color:var(--theme-dk,var(--theme-base,#0F766E)); font-weight:700; border-radius:4px; padding:0 2px; }
.ac-cmd-copy{ position:absolute; top:8px; right:8px; background:var(--surface,#fff); border:1px solid var(--line2,#cbd5e1); color:var(--muted,#64748b); border-radius:8px; padding:5px 11px; font-family:inherit; font-weight:600; font-size:calc(var(--font-size) - 3px); line-height:1; cursor:pointer; }
.ac-cmd-copy:hover{ border-color:var(--theme-base,#0D9488); color:var(--theme-base,#0D9488); }