/* universal-layout.css - Universal Academic & Technical Publishing Studio Stylesheet
 * Supports:
 * 1. Mode 1: Academic Textbook & Notes (Single Column Pro)
 * 2. Mode 2: Scientific Research & Journal (2-Column Continuous Flow)
 * 3. Mode 3: Official Bilingual Exam Paper (CSTT 2-Column Grid)
 * 4. Mode 4: Revision Cheat Sheet & Cards (Multi-Card Grid)
 * 5. Editorial Callout Alert Boxes (Note, Tip, Important, Warning, Caution, Theorem, Example)
 * 6. Mermaid Vector Diagrams & Code Blocks
 * 7. Multi-Column Markdown Tables & MathJax mhchem
 */

:root { 
  --exam-width: 210mm;
  --exam-height: 297mm;
  --exam-left: 14mm;
  --exam-right: 12mm;
  --exam-split: 50%;
  --exam-split-frac: 0.5;

  /* Typography Colors & Font Weights */
  --color-question: #000000;
  --weight-question: 400;
  --style-question: normal;
  --color-qnum: #000000;
  --weight-qnum: 700;
  --color-option: #000000;
  --weight-option: 400;
  --style-option: normal;
  --color-math: #000000;
  --color-shared: #000000;
  --color-header-text: #000000;
  --color-footer-text: #000000;
  --color-divider: #000000;
  --font-family-hi: 'Noto Serif Devanagari', Mangal, 'Nirmala UI', serif;
  --font-family-en: Tinos, 'Times New Roman', serif;
  --font-family-code: 'Consolas', 'Fira Code', 'Courier New', monospace;

  /* Callout Theme Colors */
  --callout-note-border: #2563eb;
  --callout-note-bg: #eff6ff;
  --callout-note-text: #1e40af;
  
  --callout-tip-border: #059669;
  --callout-tip-bg: #ecfdf5;
  --callout-tip-text: #065f46;

  --callout-important-border: #7c3aed;
  --callout-important-bg: #f5f3ff;
  --callout-important-text: #5b21b6;

  --callout-warning-border: #d97706;
  --callout-warning-bg: #fffbeb;
  --callout-warning-text: #92400e;

  --callout-caution-border: #e11d48;
  --callout-caution-bg: #fff1f2;
  --callout-caution-text: #9f1239;

  --callout-theorem-border: #4338ca;
  --callout-theorem-bg: #eef2ff;
  --callout-theorem-text: #3730a3;

  --callout-example-border: #0d9488;
  --callout-example-bg: #f0fdfa;
  --callout-example-text: #115e59;
}

body.exam-layout-active #print-sheet { display: none !important; }
#exam-pages { flex: none; }

/* Physical Page Structure & Virtualization */
.exam-page {
  position: relative;
  box-sizing: border-box;
  width: var(--exam-width);
  height: var(--exam-height);
  margin: 0 auto 18px;
  background: white;
  color: #000;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  font-size: var(--font-size-base, 10pt);
  overflow: visible;
  content-visibility: auto;
  contain-intrinsic-size: 210mm 297mm;
}

/* Running Header */
.exam-running-header {
  position: absolute;
  top: 12mm;
  left: var(--exam-left);
  right: var(--exam-right);
  height: 5.5mm;
  border-bottom: 0.75pt solid black;
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 4mm;
  font: 700 8pt var(--font-family-en, Tinos, 'Times New Roman', serif);
  color: var(--color-header-text, #000);
}
.exam-running-header span { max-width: 65%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Running Footer */
.exam-footer {
  position: absolute;
  bottom: 14.5mm;
  left: var(--exam-left);
  right: var(--exam-right);
  height: 5.5mm;
  border-top: 0.75pt solid var(--color-footer-text, black);
  padding-top: 1.2mm;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  gap: 3mm;
  font: 8pt var(--font-family-en, Tinos, 'Times New Roman', serif);
  color: var(--color-footer-text, #000);
}

/* Page Body Container - Strict Overflow Shield & Spacing */
.exam-page-body {
  position: absolute;
  top: 19mm;
  bottom: 21mm;
  left: var(--exam-left);
  right: var(--exam-right);
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  box-sizing: border-box;
}

/* Direct child elements inside page body and measurement container must not have stray bottom margins */
.exam-page-body > *,
#exam-measure > * {
  margin-bottom: 0 !important;
}

/* Central Divider (Bilingual Exam Mode) */
.exam-divider {
  position: absolute;
  top: 19mm;
  bottom: 21mm;
  left: calc(var(--exam-left) + (var(--exam-width) - var(--exam-left) - var(--exam-right)) * var(--exam-split-frac, .5));
  border-left: var(--divider-style, 1px solid var(--color-divider, black));
  pointer-events: none;
  z-index: 1;
}

/* Hide divider in Single Column and Journal modes */
[data-layout-mode="academic-notes"] .exam-divider,
[data-layout-mode="journal-2col"] .exam-divider,
[data-layout-mode="revision-cards"] .exam-divider {
  display: none !important;
}

/* =========================================================
 * LAYOUT MODES
 * ========================================================= */

/* Mode 1: Academic Textbook & Notes (Single Column) */
[data-layout-mode="academic-notes"] .exam-question {
  grid-template-columns: 1fr !important;
  background: #fafafa;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 2.5mm 3.5mm;
}
[data-layout-mode="academic-notes"] .exam-lang {
  padding: 0 !important;
}
[data-layout-mode="academic-notes"] .exam-lang + .exam-lang {
  display: none; /* In textbook mode, show primary language */
}

/* Mode 2: Scientific Research & Journal (2-Column Flow) */
[data-layout-mode="journal-2col"] .exam-page-body {
  display: block;
  column-count: 2;
  column-gap: 6mm;
  column-rule: 0.5pt solid #e2e8f0;
}
[data-layout-mode="journal-2col"] .universal-block {
  break-inside: avoid;
  margin-bottom: 3mm;
}

/* Mode 3: Official Bilingual Exam Paper (Default CSTT) */
.exam-question {
  display: grid;
  grid-template-columns: var(--exam-split) minmax(0, 1fr);
  align-items: start;
  break-inside: avoid;
  width: 100%;
  position: relative;
}
.exam-lang {
  min-width: 0;
  padding: 0 3.5mm 0 0;
  font-weight: 400;
  line-height: 1.36;
  text-align: justify;
  overflow-wrap: break-word;
}
.exam-lang + .exam-lang { padding: 0 0 0 3.5mm; }
.exam-lang[data-lang="hi"] { font-family: var(--font-family-hi, 'Noto Serif Devanagari', Mangal, 'Nirmala UI', serif); }
.exam-lang[data-lang="en"] { font-family: var(--font-family-en, Tinos, 'Times New Roman', serif); }

/* Mode 4: Revision Cheat Sheet & Cards */
[data-layout-mode="revision-cards"] .exam-page-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3mm;
}
[data-layout-mode="revision-cards"] .universal-block {
  break-inside: avoid;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 2mm 2.5mm;
  font-size: 8.5pt;
}

/* =========================================================
 * UNIVERSAL THEORY & ACADEMIC ELEMENTS
 * ========================================================= */

/* Headings */
.universal-heading {
  margin: 2mm 0 1.5mm;
  color: var(--color-shared, #0f172a);
  font-family: var(--font-family-en, Tinos), var(--font-family-hi, 'Noto Serif Devanagari'), serif;
  break-after: avoid;
  break-inside: avoid;
}
.universal-heading[data-level="1"] {
  font-size: calc(var(--font-size-base, 10pt) * 1.5);
  font-weight: 700;
  border-bottom: 1.5pt solid var(--color-shared, #0f172a);
  padding-bottom: 1mm;
  margin-top: 1mm;
  color: var(--color-shared, #0f172a);
}
.universal-heading[data-level="2"] {
  font-size: calc(var(--font-size-base, 10pt) * 1.25);
  font-weight: 700;
  border-bottom: 0.75pt solid var(--color-divider, #cbd5e1);
  padding-bottom: 0.8mm;
  margin-top: 2.5mm;
  color: var(--color-shared, #0f172a);
}
.universal-heading[data-level="3"] {
  font-size: calc(var(--font-size-base, 10pt) * 1.1);
  font-weight: 700;
  color: var(--color-shared, #1e293b);
  margin-top: 2mm;
}
.universal-heading[data-level="4"],
.universal-heading[data-level="5"],
.universal-heading[data-level="6"] {
  font-size: var(--font-size-base, 10pt);
  font-weight: 700;
  color: var(--color-shared, #334155);
}

/* Paragraphs */
.universal-para {
  margin: 0 0 1.8mm;
  line-height: 1.42;
  text-align: justify;
  color: var(--color-question, #1e293b);
  font-weight: var(--weight-question, 400);
  font-style: var(--style-question, normal);
  font-size: var(--font-size-base, 10pt);
  font-family: var(--font-family-hi), var(--font-family-en), serif;
  overflow-wrap: break-word;
}

/* Lists */
.universal-list {
  margin: 1mm 0 2mm 5.5mm;
  padding: 0;
  line-height: 1.4;
  color: var(--color-option, #1e293b);
  font-weight: var(--weight-option, 400);
  font-style: var(--style-option, normal);
  font-size: var(--font-size-base, 10pt);
}
.universal-list li {
  margin-bottom: 0.8mm;
  padding-left: 1mm;
}

/* Dividers */
.universal-divider {
  border: none;
  border-top: 0.75pt solid var(--color-divider, #cbd5e1);
  margin: 2.5mm 0;
  width: 100%;
}

/* =========================================================
 * CALLOUT ALERT BOXES
 * ========================================================= */
.universal-callout {
  box-sizing: border-box;
  width: 100%;
  margin: 2mm 0;
  padding: 2.2mm 3.2mm;
  border-radius: 4px;
  border-left-width: 4px;
  border-left-style: solid;
  break-inside: avoid;
  font-family: var(--font-family-hi), var(--font-family-en), serif;
}

.callout-header {
  display: flex;
  align-items: center;
  gap: 2mm;
  font-weight: 700;
  font-size: 9.5pt;
  margin-bottom: 1.2mm;
}

.callout-icon {
  font-size: 11pt;
  line-height: 1;
}

.callout-title {
  font-weight: 700;
}

.callout-body {
  font-size: 9pt;
  line-height: 1.38;
  color: #1e293b;
  text-align: justify;
}

/* Callout Variants */
.universal-callout[data-type="NOTE"],
.universal-callout[data-type="QUOTE"] {
  border-left-color: var(--callout-note-border);
  background-color: var(--callout-note-bg);
  color: var(--callout-note-text);
}
.universal-callout[data-type="TIP"] {
  border-left-color: var(--callout-tip-border);
  background-color: var(--callout-tip-bg);
  color: var(--callout-tip-text);
}
.universal-callout[data-type="IMPORTANT"],
.universal-callout[data-type="KEY CONCEPT"] {
  border-left-color: var(--callout-important-border);
  background-color: var(--callout-important-bg);
  color: var(--callout-important-text);
}
.universal-callout[data-type="WARNING"],
.universal-callout[data-type="PITFALL"] {
  border-left-color: var(--callout-warning-border);
  background-color: var(--callout-warning-bg);
  color: var(--callout-warning-text);
}
.universal-callout[data-type="CAUTION"] {
  border-left-color: var(--callout-caution-border);
  background-color: var(--callout-caution-bg);
  color: var(--callout-caution-text);
}
.universal-callout[data-type="THEOREM"],
.universal-callout[data-type="FORMULA"],
.universal-callout[data-type="PROOF"] {
  border-left-color: var(--callout-theorem-border);
  background-color: var(--callout-theorem-bg);
  color: var(--callout-theorem-text);
}
.universal-callout[data-type="EXAMPLE"] {
  border-left-color: var(--callout-example-border);
  background-color: var(--callout-example-bg);
  color: var(--callout-example-text);
}

/* =========================================================
 * MERMAID VECTOR DIAGRAMS
 * ========================================================= */
.universal-diagram-wrap {
  width: 100%;
  margin: 2.5mm 0;
  text-align: center;
  break-inside: avoid;
  background: white;
  padding: 1.5mm;
  box-sizing: border-box;
}

.universal-diagram-wrap svg {
  max-width: 100% !important;
  height: auto !important;
  display: inline-block;
  vector-effect: non-scaling-stroke;
}

.diagram-caption {
  font-size: 8pt;
  font-style: italic;
  color: #64748b;
  margin-top: 1.5mm;
}

/* =========================================================
 * CODE SNIPPETS
 * ========================================================= */
.universal-code-wrap {
  box-sizing: border-box;
  width: 100%;
  margin: 2.2mm 0;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #f8fafc;
  overflow: hidden;
  break-inside: avoid;
}

.code-header {
  background: #f1f5f9;
  padding: 1mm 3mm;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e2e8f0;
  font-family: var(--font-family-code);
  font-size: 7.5pt;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
}

.code-body {
  margin: 0;
  padding: 2.2mm 3mm;
  font-family: var(--font-family-code);
  font-size: 8.5pt;
  line-height: 1.35;
  color: #0f172a;
  overflow-x: auto;
  white-space: pre-wrap;
  tab-size: 4;
}

/* =========================================================
 * MULTI-COLUMN MARKDOWN DATA TABLES
 * ========================================================= */
.universal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 2mm 0;
  table-layout: auto;
  break-inside: avoid;
  font-size: 8.5pt;
}

.universal-table th {
  background: #f1f5f9;
  font-weight: 700;
  padding: 1.2mm 2mm;
  border: 0.75pt solid #475569;
  color: #0f172a;
}

.universal-table td {
  padding: 1mm 2mm;
  border: 0.5pt solid #cbd5e1;
  line-height: 1.32;
  overflow-wrap: break-word;
}

.universal-table tr:nth-child(even) td {
  background: #f8fafc;
}

/* Alignments */
.universal-table th[data-align="left"], .universal-table td[data-align="left"] { text-align: left; }
.universal-table th[data-align="center"], .universal-table td[data-align="center"] { text-align: center; }
.universal-table th[data-align="right"], .universal-table td[data-align="right"] { text-align: right; }

/* =========================================================
 * ASSESSMENT ITEMS & QUESTIONS
 * ========================================================= */
.exam-statement {
  margin: 0 0 1.2mm;
  color: var(--color-question, #000);
  font-weight: var(--weight-question, 400);
  font-style: var(--style-question, normal);
}
.exam-statement.numbered {
  padding-left: 5.5mm;
  text-indent: -5.5mm;
}
.exam-statement.numbered .exam-number {
  display: inline-block;
  width: 5.5mm;
  font-weight: var(--weight-qnum, 700);
  text-indent: 0;
  color: var(--color-qnum, var(--color-question, #000));
}
.exam-statement.sub-statement {
  padding-left: 5.5mm;
  text-indent: -5.5mm;
  margin: 0.6mm 0 0.6mm 3.5mm;
}
.exam-options {
  display: grid;
  gap: var(--opt-pad-stacked, 1.5px) 3mm;
  margin-left: 5.5mm;
}
.exam-option {
  min-width: 0;
  padding-left: 4.8mm;
  text-indent: -4.8mm;
  break-inside: avoid;
  line-height: 1.32;
  color: var(--color-option, #000);
  font-weight: var(--weight-option, 400);
  font-style: var(--style-option, normal);
}
.exam-options[data-layout="2x2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 6mm;
}
.exam-options[data-layout="1row"][data-count="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 3mm;
}
.exam-options[data-layout="1row"]:not([data-count="4"]) {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 3mm;
}
.exam-options:not([data-layout="stacked"]) .exam-option:nth-child(5) {
  grid-column: 1 / -1;
}
.exam-shared {
  grid-column: 1 / -1;
  background: white;
  position: relative;
  padding: 1.5mm 0;
  font-family: var(--font-family-en, Tinos), var(--font-family-hi, 'Noto Serif Devanagari'), serif;
  line-height: 1.4;
  text-align: center;
  font-weight: 700;
  color: var(--color-shared, #000);
}

/* MathJax Overflows & Scaling */
.exam-page mjx-container {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  max-width: 100% !important;
  font-size: 100% !important;
  color: var(--color-math, inherit) !important;
  vertical-align: middle;
}
.exam-page mjx-container svg {
  max-width: 100% !important;
  height: auto !important;
  fill: var(--color-math, currentColor) !important;
}
.exam-page mjx-container[display="true"] {
  display: block !important;
  margin: 0.3em 0 !important;
  text-align: left !important;
  max-width: 100% !important;
}
.exam-page mjx-math { max-width: 100% !important; }

/* Images & Tables inside exam pages */
.exam-page img { max-width: 100%; height: auto; object-fit: contain; }
.exam-page .exam-img-wrap { break-inside: avoid; margin: 1.5mm 0; }
.exam-page table:not(.universal-table) { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 1.5mm 0; }
.exam-page td:not(.universal-table td), .exam-page th:not(.universal-table th) { padding: 0.8mm 1.2mm; border: 0.5pt solid black; overflow-wrap: anywhere; font-size: 9pt; }
.exam-page th:not(.universal-table th) { background: #f8fafc; font-weight: 700; text-align: center; }

.exam-continuation { font-size: 8pt; font-style: italic; margin-bottom: 2mm; grid-column: 1 / -1; background: white; }
.exam-intro { background: white; position: relative; margin-bottom: 5mm; }
.exam-rough {
  box-sizing: border-box;
  width: 100%;
  border: 1px dashed #333;
  margin-top: auto;
  text-align: center;
  font: 700 8.5pt 'Times New Roman', 'Noto Serif Devanagari', serif;
  padding-top: 2.5mm;
  background: white;
  position: relative;
  z-index: 2;
  break-inside: avoid;
}
.exam-watermark {
  position: absolute;
  top: 46%;
  left: 8%;
  width: 84%;
  text-align: center;
  transform: rotate(-35deg);
  opacity: .07;
  font: 700 48pt sans-serif;
  pointer-events: none;
}

#exam-layout-status {
  box-sizing: border-box;
  padding: 10px;
  margin: 10px 0;
  font-size: 12px;
  line-height: 1.55;
  border: 1px solid #94a3b8;
  border-radius: 6px;
  background: #fff;
  color: #172033;
}
#exam-layout-status[data-level="error"] { border-color: #b91c1c; color: #991b1b; }
#exam-layout-status details { margin-top: 5px; }
#exam-measure { position: absolute; left: -20000px; top: 0; visibility: hidden; pointer-events: none; }

/* Print Styles */
@media print {
  @page { size: A4; margin: 0; }
  html, body { margin: 0 !important; padding: 0 !important; height: auto !important; overflow: visible !important; background: white !important; }
  #preview-viewport { padding: 0 !important; margin: 0 !important; display: block !important; overflow: visible !important; transform: none !important; }
  #exam-pages { margin: 0 !important; padding: 0 !important; }
  .exam-page { content-visibility: visible !important; margin: 0 !important; box-shadow: none; break-inside: avoid; break-after: page; page-break-after: always; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .exam-page:last-child { break-after: auto; page-break-after: auto; }
  .exam-page mjx-container { overflow: visible !important; }
  .exam-page mjx-container svg { max-width: 100% !important; height: auto !important; }
  #exam-measure, #exam-layout-status, .exam-screen-only, .no-print { display: none !important; }
  body[data-print-scope="blank-omr-only"] #exam-pages, body[data-print-scope="key-sol-only"] #exam-pages { display: none !important; }
  #rpsc-cover-sheet { box-sizing: border-box; width: var(--exam-width) !important; min-height: var(--exam-height) !important; height: var(--exam-height) !important; padding: 14mm !important; margin: 0 !important; break-after: page; }
  #omr-blank-section, #omr-key-section { padding: 0 !important; margin: 0 !important; break-inside: auto !important; page-break-inside: auto !important; }
  #omr-blank-section[style*="display: flex"], #omr-key-section[style*="display: flex"] { display: block !important; }
  .a4-omr { width: var(--exam-width) !important; height: var(--exam-height) !important; min-height: 0 !important; max-height: none !important; padding: 14mm !important; overflow: visible !important; }
  .a4-omr:last-child { break-after: auto !important; page-break-after: auto !important; }
  .omr-outer-box { max-height: none !important; }
  #solutions-section { padding: 14mm !important; box-sizing: border-box; }
}

/* Interactive Hyperlinks & YouTube Timestamp Badges */
.exam-web-link {
  color: rgb(29, 78, 216) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  font-weight: 600;
  transition: color 0.15s ease;
  word-break: break-all;
}
.exam-web-link:hover {
  color: #1e40af !important;
}

.yt-timestamp-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #fee2e2;
  color: #b91c1c !important;
  border: 1px solid #f87171;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 8pt;
  font-weight: 700;
  font-family: system-ui, sans-serif;
  text-decoration: none !important;
  cursor: pointer;
  vertical-align: baseline;
  transition: all 0.15s ease;
}
.yt-timestamp-pill:hover {
  background: #fecaca;
  color: #991b1b !important;
  box-shadow: 0 1px 4px rgba(239, 68, 68, 0.3);
}

/* Mobile & Android Touch Responsiveness */
@media screen and (max-width: 900px) {
  #preview-viewport {
    padding: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .exam-page {
    transform-origin: top center;
    margin: 8px auto !important;
    max-width: 100% !important;
  }
}