/* ---------------- Shared rich-content UI: math/table toolbar, live preview, tables, images ----------------
   Used by both the admin question editor (js/exam-manager.js) and the exam player /
   results screen (js/exam-player.js) — one stylesheet so both render $...$ math, pipe-tables,
   and question images identically instead of drifting apart. */

.rc-toolbar{display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin:6px 0 8px;}
.rc-toolbar-btn{
  border:1px solid var(--line); background:var(--card); border-radius:8px;
  padding:5px 9px; font-size:var(--fs-sm); cursor:pointer; line-height:1.2; color:var(--ink);
  min-width:34px; transition:background 150ms ease, transform 120ms ease;
}
.rc-toolbar-btn:hover{background:rgba(18,18,18,0.06);}
.rc-toolbar-btn:active{background:rgba(18,18,18,0.12); transform:scale(0.92);}
/* Divider between the insert-template buttons and the ◀ ▶ ⌫ cursor controls. */
.rc-toolbar-sep{width:1px; align-self:stretch; background:var(--line); margin:0 2px;}
/* ◀ ▶ ⌫ move/delete at the cursor rather than inserting a template — colored to read as a
   distinct "control" group from the insert buttons, same idea as the orange arrow/backspace
   keys in a calculator-style math keypad. */
.rc-toolbar-nav{color:#C9722A; font-weight:700; border-color:rgba(201,114,42,0.35);}
.rc-toolbar-nav:hover{background:rgba(201,114,42,0.08);}

/* Visual box-style editor (js/rich-content.js openBoxEditor) — a small floating popover of
   ACTUAL fill-in boxes connected by their real symbols (√▢, |▢|, ▢!, C(▢, ▢), a fraction bar,
   ...), opened by any math-toolbar button that has a genuine fill-in, so composing any of them
   looks like filling in real boxes instead of ever seeing/typing raw LaTeX text.
   Round 11: popover used to just appear at full size/opacity the instant it opened, in whatever
   position js/rich-content.js placed it (near the toolbar button that triggered it) — a quick
   scale+fade-in reads as "growing out of" that button, tying the popover visually back to what
   opened it instead of feeling like an unrelated element just blinking into existence nearby. */
.rc-slot-popover{
  position:fixed; z-index:9999; background:var(--card);
  border:1.5px solid var(--line); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,0.16);
  padding:10px 12px; display:flex; flex-direction:column; align-items:center; gap:0;
  animation:rcPopoverIn 160ms var(--ease-pop) both;
  transform-origin:top left;
}
@keyframes rcPopoverIn{ from{ opacity:0; transform:scale(0.92) translateY(-4px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .rc-slot-popover{ animation:none; } }
/* "a/b" fraction — the one item with a dedicated two-box-over-a-bar shape instead of an inline row. */
.rc-slot-popover.rc-slot-stack{ min-width:140px; }
/* Everything else — √▢, |▢|, ▢!, f(▢), C(▢, ▢), etc. — one horizontal row mixing literal
   connector glyphs (rc-slot-text) with fill-in boxes, in the exact order they read left-to-right. */
.rc-slot-popover.rc-slot-inline{ min-width:96px; max-width:280px; }
.rc-slot-row{ display:flex; align-items:center; gap:2px; flex-wrap:wrap; justify-content:center; }
.rc-slot-text{ font-size:var(--fs-md); color:var(--ink); white-space:pre; }
.rc-slot-box{
  border:1.5px solid var(--ink); border-radius:5px; width:64px; height:32px;
  padding:2px 6px; font-size:var(--fs-md); text-align:center; background:var(--card); color:var(--ink);
  outline:none; transition:border-color 150ms ease, box-shadow 150ms ease;
}
.rc-slot-box:focus{ border-color:#C9722A; box-shadow:0 0 0 2px rgba(201,114,42,0.18); }
/* xⁿ / xₙ — exponent/subscript boxes are deliberately smaller and vertically offset so the
   popover itself reads as "x" with a raised/lowered box, the same shape the finished math will
   actually have, rather than a plain same-size box sitting on the baseline next to "x". */
.rc-slot-box-sup{ width:38px; height:24px; font-size:var(--fs-sm); align-self:flex-start; margin-top:-6px; }
.rc-slot-box-sub{ width:38px; height:24px; font-size:var(--fs-sm); align-self:flex-end; margin-bottom:-6px; }
.rc-slot-bar{ width:64px; height:2px; background:var(--ink); margin:6px 0; }
.rc-slot-actions{ display:flex; gap:6px; margin-top:8px; }
/* Shown under the boxes only when the popover was opened with known question-template variable
   names (see openBoxEditor's knownVariableNames) — tells the admin they can type/pick one of
   those exact names and it'll become a working {name} automatically, no "{"/"}" typing needed. */
.rc-slot-hint{ font-size:var(--fs-2xs); color:var(--muted); text-align:center; max-width:240px; margin-top:6px; line-height:1.4; }

.rc-preview-label{font-size:var(--fs-xs); color:var(--muted); margin-top:8px; margin-bottom:4px;}
.rc-preview{
  border:1px dashed var(--line); border-radius:10px; padding:10px 12px;
  min-height:20px; font-size:var(--fs-base); line-height:1.6; background:rgba(18,18,18,0.02);
  transition:background 200ms ease;
}
.rc-preview:empty::before{content:"(ตัวอย่างจะแสดงที่นี่)"; color:var(--muted); font-size:var(--fs-sm);}

/* Markdown-style pipe tables, rendered by js/rich-content.js — shows up inside question text,
   choice text, explanations, and results, so keep it compact enough to fit a narrow choice row too. */
.rc-table{border-collapse:collapse; margin:8px 0; width:100%; font-size:var(--fs-sm);}
.rc-table th, .rc-table td{border:1px solid var(--line); padding:6px 10px; text-align:left;}
.rc-table th{background:rgba(18,18,18,0.05); font-weight:700;}

/* Admin editor: image upload control + its preview */
.rc-image-wrap{display:flex; flex-direction:column; align-items:flex-start; gap:4px;}
.rc-image-preview{max-width:100%; max-height:220px; border-radius:10px; border:1px solid var(--line); object-fit:contain;}

/* Admin question list: small thumbnail next to a question that has an image */
.rc-list-thumb{max-width:120px; max-height:80px; border-radius:8px; border:1px solid var(--line); display:block; margin-bottom:6px; object-fit:cover;}

/* Exam player + results screen: the question's own attached image */
.ep-question-image{max-width:100%; max-height:320px; border-radius:12px; border:1px solid var(--line); display:block; margin:4px 0 14px; object-fit:contain;}