/* Shared by Knowledge Hub notes and the Question Bank: the rich-text editor (.he*) and how formatted content looks (.hub-rich on the Hub, .qc on questions).
   Loaded on every page from base.html. The class names (c-*, h-*, fs-*, iw-*, ia-*, ta-*) are the fixed set app/rich_html.py allows. */
.he { border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.he:focus-within { border-color: var(--primary-500); box-shadow: 0 0 0 3px rgba(59, 66, 160, .15); }
.he-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px; border-bottom: 1px solid var(--border); background: #f8fafc; }
.he-bar:first-child { border-radius: 10px 10px 0 0; }
.he-tables { background: #eef2ff; }
.he-bar button { min-width: 32px; height: 32px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: #334155; font: inherit; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.he-bar button:hover { background: #e2e8f0; }
.he-bar button[aria-pressed="true"] { background: var(--primary-50); color: var(--primary); }
.he-bar button:disabled { opacity: .5; cursor: progress; }
.he-sep { width: 1px; height: 20px; margin: 0 6px; background: #cbd5e1; }
.he-style { height: 32px; border: 1px solid var(--border); border-radius: 6px; background: #fff; font: inherit; font-size: 13.5px; padding: 0 6px; }
.he-pop { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; padding: 10px; border-bottom: 1px solid var(--border); background: #fff7ed; }
.he-pop[hidden], .he-bar[hidden] { display: none; }
.he-pop label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; color: var(--muted); }
.he-pop input[type=number] { width: 70px; }
.he-pop .he-chk { flex-direction: row; align-items: center; gap: 6px; }
.he-area { min-height: 320px; max-height: 70vh; overflow: auto; padding: 14px 16px; outline: none; resize: vertical; }
.he-area:empty::before { content: attr(data-placeholder); color: #94a3b8; }
.he-status { min-height: 18px; margin: 4px 2px 0; font-size: 12.5px; color: #64748b; }
.he-status.is-error { color: #b91c1c; }
.he.is-drop { border-color: var(--primary-500); background: var(--primary-50); }
.hub-rich, .qc { font-size: 15.5px; line-height: 1.65; color: #1e293b; overflow-wrap: anywhere; }
.hub-rich h2, .qc h2 { font-size: 1.45em; margin: 1em 0 .4em; }
.hub-rich h3, .qc h3 { font-size: 1.2em; margin: .9em 0 .35em; }
.hub-rich h4, .qc h4 { font-size: 1.05em; margin: .8em 0 .3em; }
.hub-rich h2:first-child, .qc h2:first-child, .hub-rich h3:first-child, .qc h3:first-child, .hub-rich h4:first-child, .qc h4:first-child { margin-top: 0; }
.hub-rich p, .qc p { margin: 0 0 .75em; }
.hub-rich p:last-child, .qc p:last-child { margin-bottom: 0; }
.hub-rich ul, .qc ul, .hub-rich ol, .qc ol { margin: 0 0 .75em; padding-left: 1.6em; }
.hub-rich li, .qc li { margin: .15em 0; }
.hub-rich blockquote, .qc blockquote { margin: .8em 0; padding: .4em 1em; border-left: 4px solid #c7d2fe; background: #f8fafc; color: #475569; }
.hub-rich hr, .qc hr { border: 0; border-top: 1px solid #cbd5e1; margin: 1em 0; }
.hub-rich a, .qc a { color: var(--primary); text-decoration: underline; }
.hub-rich img, .qc img { display: block; max-width: 100%; height: auto; margin: .6em 0; border-radius: 4px; }
.hub-rich table, .qc table { border-collapse: collapse; margin: .8em 0; max-width: 100%; display: block; overflow-x: auto; }
.hub-rich th, .qc th, .hub-rich td, .qc td { border: 1px solid #cbd5e1; padding: 6px 12px; text-align: left; vertical-align: top; min-width: 48px; }
.hub-rich th, .qc th { background: #f1f5f9; font-weight: 600; }
.hub-rich .ta-center, .qc .ta-center, .he-area [style*="text-align: center"] { text-align: center; }
.hub-rich .ta-right, .qc .ta-right, .he-area [style*="text-align: right"] { text-align: right; }
.hub-rich .ta-justify, .qc .ta-justify, .he-area [style*="text-align: justify"] { text-align: justify; }
.hub-rich th.ta-center, .qc th.ta-center, .hub-rich td.ta-center, .qc td.ta-center { text-align: center; }
.hub-rich th.ta-right, .qc th.ta-right, .hub-rich td.ta-right, .qc td.ta-right { text-align: right; }
.he .he-style, .hub-fl .he-style { width: 130px; flex: 0 0 auto; }
.he-bar button { flex: 0 0 auto; }
.he, .he-area, .he-pop, .he-bar { font-weight: 400; font-style: normal; text-align: left; }
.he-area b, .he-area strong, .he-area th { font-weight: 700; }
.chat-preview { margin: 6px 0 0; padding: 10px 14px; border: 1px dashed var(--border); border-radius: 8px; background: #fff; }
.chat-preview[hidden] { display: none; }
.ai-preview { padding: 10px 14px; margin: 0 0 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; min-height: 2.2em; }
.hub-rich .math, .qc .math, .he-area .math { display: inline-block; font-size: 1.12em; vertical-align: middle; }
.hub-rich math, .qc math, .he-area math { font-size: 1.05em; }
.hub-rich p.ta-center .math, .qc p.ta-center .math { font-size: 1.25em; }
.he-area .math { cursor: pointer; background: rgba(59, 66, 160, .06); border-radius: 4px; padding: 0 2px; user-select: all; }
.hub-rich .c-red, .qc .c-red { color: #dc2626; }
.hub-rich .c-orange, .qc .c-orange { color: #ea580c; }
.hub-rich .c-amber, .qc .c-amber { color: #b45309; }
.hub-rich .c-green, .qc .c-green { color: #16a34a; }
.hub-rich .c-teal, .qc .c-teal { color: #0d9488; }
.hub-rich .c-blue, .qc .c-blue { color: #2563eb; }
.hub-rich .c-purple, .qc .c-purple { color: #9333ea; }
.hub-rich .c-grey, .qc .c-grey { color: #64748b; }
.hub-rich .h-yellow, .qc .h-yellow { background: #fef08a; }
.hub-rich .h-green, .qc .h-green { background: #bbf7d0; }
.hub-rich .h-blue, .qc .h-blue { background: #bfdbfe; }
.hub-rich .h-pink, .qc .h-pink { background: #fbcfe8; }
.hub-rich .h-orange, .qc .h-orange { background: #fed7aa; }
.hub-rich .h-grey, .qc .h-grey { background: #e2e8f0; }
.hub-rich .fs-sm, .qc .fs-sm { font-size: .85em; }
.hub-rich .fs-lg, .qc .fs-lg { font-size: 1.3em; }
.hub-rich .fs-xl, .qc .fs-xl { font-size: 1.7em; }
.hub-rich img.ia-left, .qc img.ia-left { margin-left: 0; margin-right: auto; }
.hub-rich img.ia-center, .qc img.ia-center { margin-left: auto; margin-right: auto; }
.hub-rich img.ia-right, .qc img.ia-right { margin-left: auto; margin-right: 0; }
.hub-rich table table, .qc table table { margin: .3em 0; font-size: .95em; }
.hub-rich img.iw-5, .qc img.iw-5 { width: 5%; }
.hub-rich img.iw-10, .qc img.iw-10 { width: 10%; }
.hub-rich img.iw-15, .qc img.iw-15 { width: 15%; }
.hub-rich img.iw-20, .qc img.iw-20 { width: 20%; }
.hub-rich img.iw-25, .qc img.iw-25 { width: 25%; }
.hub-rich img.iw-30, .qc img.iw-30 { width: 30%; }
.hub-rich img.iw-35, .qc img.iw-35 { width: 35%; }
.hub-rich img.iw-40, .qc img.iw-40 { width: 40%; }
.hub-rich img.iw-45, .qc img.iw-45 { width: 45%; }
.hub-rich img.iw-50, .qc img.iw-50 { width: 50%; }
.hub-rich img.iw-55, .qc img.iw-55 { width: 55%; }
.hub-rich img.iw-60, .qc img.iw-60 { width: 60%; }
.hub-rich img.iw-65, .qc img.iw-65 { width: 65%; }
.hub-rich img.iw-70, .qc img.iw-70 { width: 70%; }
.hub-rich img.iw-75, .qc img.iw-75 { width: 75%; }
.hub-rich img.iw-80, .qc img.iw-80 { width: 80%; }
.hub-rich img.iw-85, .qc img.iw-85 { width: 85%; }
.hub-rich img.iw-90, .qc img.iw-90 { width: 90%; }
.hub-rich img.iw-95, .qc img.iw-95 { width: 95%; }
.hub-rich img.iw-100, .qc img.iw-100 { width: 100%; }
.he { position: relative; }
.he-a { font-weight: 700; border-bottom: 3px solid #dc2626; line-height: 1; padding: 0 1px; }
.he-hi { background: #fef08a; padding: 0 3px; border-radius: 3px; font-size: 12px; }
.he-size { width: 112px !important; }
.he-menu { position: absolute; z-index: 6; display: grid; grid-template-columns: repeat(5, 28px); gap: 4px; padding: 8px; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, .15); }
.he-menu[hidden], .he-math[hidden], .he-imgbar[hidden], .he-handle[hidden] { display: none; }
.he-sw { width: 28px; height: 28px; padding: 0 !important; min-width: 0 !important; border: 1px solid #cbd5e1 !important; border-radius: 6px !important; cursor: pointer; font-size: 12px; color: #64748b; background: #fff; }
.he-sw:hover { outline: 2px solid var(--primary-500); }
.he-math { padding: 12px; border-bottom: 1px solid var(--border); background: #f5f3ff; display: grid; gap: 8px; }
.he-snips { display: flex; flex-wrap: wrap; gap: 4px; }
.he-snip { min-width: 34px; height: 32px; padding: 0 8px; border: 1px solid #ddd6fe; border-radius: 6px; background: #fff; font-size: 15px; cursor: pointer; }
.he-snip:hover { background: #ede9fe; }
.he-tex { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
.he-math-preview { min-height: 2.6em; padding: 8px 12px; background: #fff; border: 1px solid var(--border); border-radius: 8px; font-size: 1.15em; }
.he-math-actions { display: flex; gap: 8px; }
.he-lbl { margin: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.he-hint { margin: 0; font-size: 12px; color: var(--muted); }
.he-imgbar { position: absolute; z-index: 6; display: flex; gap: 2px; padding: 4px; background: #1e293b; border-radius: 8px; box-shadow: 0 6px 18px rgba(15, 23, 42, .3); }
.he-imgbar button { min-width: 30px; height: 28px; padding: 0 6px; border: 0; border-radius: 5px; background: transparent; color: #fff; font-size: 12.5px; cursor: pointer; }
.he-imgbar button:hover { background: #475569; }
.he-handle { position: absolute; z-index: 6; width: 16px; height: 16px; background: var(--primary); border: 2px solid #fff; border-radius: 4px; cursor: nwse-resize; box-shadow: 0 0 0 1px var(--primary); }
.he-area img { cursor: pointer; }
.he-area img.is-sel { outline: 3px solid var(--primary-500); }

.he-optf { height: 34px; min-width: 34px; margin-left: 4px; border: 1px solid #ddd6fe; border-radius: 6px; background: #f5f3ff; color: #5b21b6; font-size: 16px; font-style: italic; cursor: pointer; }
.he-optf:hover { background: #ede9fe; }
.qc .math, .qb-option .math { display: inline-block; font-size: 1.12em; vertical-align: middle; }

/* answer options: a small editor whose toolbar appears while the box is in use */
.he-compact .he-bar { padding: 3px; }
.he-compact:not(:focus-within) > .he-bar { display: none; }
.he-compact .he-area { padding: 8px 10px; }
.he-compact + .he-status:empty { display: none; }
.he-optrow { display: flex; gap: 10px; align-items: flex-start; }
.he-optrow > input[type="radio"] { margin-top: 12px; flex: 0 0 auto; }
.he-optrow > .he-optbody { flex: 1 1 auto; min-width: 0; }

/* a formatted answer option shown in a list: no extra space around its paragraphs */
.opt-html > p, .opt-html > ul, .opt-html > ol { margin: 0; }
.opt-html > p + p { margin-top: 4px; }