/* ══════════════════════════════════════════════════════════════════════════
   q-render.css — the question-card CSS, LIFTED VERBATIM from test.html by
   lift_render.py, plus the theme variables those rules depend on.
   DO NOT EDIT BY HAND — edit test.html and re-run python3 /tmp/lift_render.py
   ══════════════════════════════════════════════════════════════════════════ */


/* theme variables the lifted rules depend on (from test.html) */

:root {
  --accent: #0b5ed7;
  --body-text: #212121;
  --border-color: #e0e0e0;
  --card-border: #333333;
  --detail-item-bg: #f8fbff;
  --light-gray: #f5f7fa;
  --muted-text: #555555;
  --opt-bg: #ffffff;
  --opt-selected-bg: #eef5ff;
  --opt-text: #111111;
  --qtext-bg: #ffffff;
  --qtext-color: #111111;
}

[data-theme="dark"] {
  --body-text: #e8e8e8;
  --border-color: #3a3a3a;
  --card-border: #444444;
  --detail-item-bg: #1a2535;
  --light-gray: #1e1e1e;
  --muted-text: #999999;
  --opt-bg: #1e1e1e;
  --opt-selected-bg: #1a2a45;
  --opt-text: #e0e0e0;
  --qtext-bg: #1e1e1e;
  --qtext-color: #e0e0e0;
}


/* ── the card, exactly as test.html styles it ── */

/* Deliberately no small-screen override: the grid stays at two chips per row
   on every width so the modal fits on an Android screen without scrolling. */
/* =========================
   BOX 2: QUESTION TEXT
   ========================= */
.qtext {
  position: relative;
  padding: 6px 10px 12px 10px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--qtext-color);
  font-weight: 500;
  border-bottom: 1.25px solid var(--card-border);
  background: var(--qtext-bg);
}

/* Exam source tag (e.g. "DP CONSTABLE 30/12/2025 Shift-2") pulled from the
   trailing [ ... ] in the question string. Sits flush against the bottom-right
   corner of the question box, right above the border line into the options. */
.exam-tag {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 1px 6px;
  margin: 0;
  font-size: calc(0.5em + 1px);
  font-style: italic;
  line-height: 1.3;
  color: var(--muted-text);
  background: var(--light-gray);
  white-space: nowrap;
  pointer-events: none;
}

/* =========================
   BOX 3: OPTIONS TABLE
   ========================= */
.opt {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  border-bottom: 1.25px solid var(--card-border);
  background: var(--opt-bg);
  margin: 0;
}

.opt-text {
  padding: 6px 14px; /* increased top/bottom for more breathing room — left/right unchanged */
  font-size: 15px;
  color: var(--opt-text);
  display: block;
  line-height: 1.5;
}

/* Per-option pick-percentage pill — own grid column, vertically centered,
   so it NEVER adds height to the option cell and never overlaps wrapped
   text (text simply flows to the next line as normal in its own column).
   Green = correct option, red = user's wrong pick, grey = any other. */
.opt-pct-col {
  align-self: center;
  padding-right: 0;
  display: flex;
  align-items: center;
}

.opt-pct-col:not(:empty) {
  padding-right: 10px;
}

.opt-percent {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  background: var(--light-gray, #eee);
  color: var(--muted-text);
}

.opt-percent.opt-percent-correct { background: #198754; color: #ffffff; }

.opt-percent.opt-percent-wrong { background: #dc3545; color: #ffffff; }

/* Selected radio */
.opt.selected .custom-radio::before {
  border-color: var(--accent);
  
}

/* Radio container MUST be positioning context */
.custom-radio {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1.25px solid var(--card-border);
  cursor: pointer;
  width: 100%;
  height: 100%;
  min-height: 30px;
  border-radius: 0;
}

/* Outer circle */
.custom-radio::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 2px solid #757575;
  border-radius: 50%;
}

/* Selected inner dot */
.opt.selected .custom-radio::after {
  content: "";
  position: absolute;   /* now relative to .custom-radio */
  width: 10px;
  height: 10px;
  background: var(--accent);
  border-radius: 50%;
}

.opt.selected {
  background: var(--opt-selected-bg);
}

/* Solution Explanation Box */
.explanation {
  background: var(--detail-item-bg);
  border-left: 1.25px solid var(--accent);
  padding: 15px;
  margin-top: 20px;
  border-radius: 4px;
  display: none;
  font-size: 16px;
  line-height: 1.5;
  color: var(--body-text);
}

/* =========================
   SOLUTION MODE – STRONGER COLORS
   ========================= */

/* Correct answer */
body.mode-solution .opt.correct {
  background: #dff5e7;
}

body.mode-solution .opt.correct .opt-text {
  color: #0a3d1f !important;
}

body.mode-solution .opt.correct .custom-radio::before {
  border-color: #198754;
  background: #198754;
}

/* Wrong selected answer */
body.mode-solution .opt.wrong {
  background: #fde2e2;
}

body.mode-solution .opt.wrong .opt-text {
  color: #5c0a0a !important;
}

body.mode-solution .opt.wrong .custom-radio::before {
  border-color: #dc3545;
  background: #dc3545;
}

/* Dark mode overrides for solution options */
[data-theme="dark"] body.mode-solution .opt.correct,
[data-theme="dark"].mode-solution .opt.correct {
  background: #0d3320 !important;
}

[data-theme="dark"] body.mode-solution .opt.correct .opt-text,
[data-theme="dark"].mode-solution .opt.correct .opt-text {
  color: #6ee89a !important;
}

[data-theme="dark"] body.mode-solution .opt.wrong,
[data-theme="dark"].mode-solution .opt.wrong {
  background: #3d0d0d !important;
}

[data-theme="dark"] body.mode-solution .opt.wrong .opt-text,
[data-theme="dark"].mode-solution .opt.wrong .opt-text {
  color: #f08080 !important;
}

/* Selected option in quiz mode — dark mode */
[data-theme="dark"] .opt.selected {
  background: #1a2a45 !important;
}

[data-theme="dark"] .opt.selected .opt-text {
  color: #a8c8ff !important;
}

.qtext, #qtext, .opt-text, .explanation {
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

/* Caps an <img> only if it would otherwise be wider than its container
   (e.g. a math-as-image or handwritten-solution photo injected via JSON
   text). max-width never enlarges a smaller image, and height:auto only
   applies once max-width has actually reduced the width, so images that
   already fit are completely unaffected — no display/margin/alignment
   changes, nothing else touched. */
.qtext img,
#qtext img,
.opt-text img,
.explanation img {
  max-width: 100%;
  height: auto;
}

/* Specific Styling for Solution Images */
.sol-img-styled {
  width: auto;           /* Image stays natural size if small */
  max-width: 100%;       /* Image shrinks to fit card if large */
  height: auto;          /* Maintains correct aspect ratio */
  max-height: 600px;
  display: block;
  margin: 15px 0;        /* Align to Left (removed 'auto' margin) */
  border-radius: 6px;
  object-fit: contain;   /* Zoom-in effect without cropping */
  cursor: zoom-in;       /* Indicates it can be zoomed/viewed */
}

/* Container for left alignment */
.sol-img-container {
  width: 100%;
  display: flex;
  justify-content: flex-start; /* Ensure left-to-right alignment */
  padding: 0;
}

/* ===== GLOBAL DARK MODE SAFETY NET =====
   Catches any remaining hardcoded dark colors that may still be in
   dynamically generated HTML or inline styles not yet converted */
[data-theme="dark"] .qtext,
[data-theme="dark"] .qtext *,
[data-theme="dark"] .opt-text,
[data-theme="dark"] .opt-text *,
[data-theme="dark"] .explanation,
[data-theme="dark"] .explanation * {
  color: var(--qtext-color) !important;
}

.mmh-card .qtext,
.mmh-card .opt-text,
.mmh-card .explanation {
  font-size: inherit !important;
}

.qtext table,
#qtext table,
.opt-text table,
.explanation table {
  width: 100% !important;
  table-layout: auto !important;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.qtext table colgroup col,
#qtext table colgroup col,
.opt-text table colgroup col,
.explanation table colgroup col {
  width: auto !important;
}

.qtext table td,
.qtext table th,
#qtext table td,
#qtext table th,
.opt-text table td,
.opt-text table th,
.explanation table td,
.explanation table th {
  white-space: normal;
}

/* ===============================
   READING COMPREHENSION BLOCK
   (only shown when q.comprehension is a non-empty string)
   =============================== */
.comprehension-box {
  display: none;
  margin: 0 0 2.4em 0;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--border-color);
  color: var(--body-text);
  line-height: 1.6;
  font-size: 14.5px;
}

.mmh-card .qtext,
.mmh-card .opt-text,
.mmh-card .explanation {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* size follows #quizCard base (integer px → no blur) */
}

/* Saved selection/focus polish */
.opt.selected{border-color:var(--primary)!important;background:var(--primary-soft)!important;box-shadow:0 0 0 2px rgba(61,90,254,.22);}
.opt.selected .custom-radio{border-color:var(--primary)!important;background:var(--primary)!important;}
.opt.selected .custom-radio::after{background:#fff!important;}