/* ==============================================
   Split View CSS Variables
   ============================================== */
:root {
  /* Container */
  --split-container-bg: rgba(0, 0, 0, 0.02);
  --split-container-border: rgba(0, 0, 0, 0.08);

  /* Toolbar */
  --split-toolbar-bg: rgba(0, 0, 0, 0.04);
  --split-toolbar-border: rgba(0, 0, 0, 0.08);

  /* Toggle button */
  --split-toggle-bg: rgba(79, 70, 229, 0.15);
  --split-toggle-border: rgba(79, 70, 229, 0.4);
  --split-toggle-active-bg: rgba(34, 197, 94, 0.2);
  --split-toggle-active-border: rgba(34, 197, 94, 0.5);

  /* Tabs */
  --split-tabs-bg: rgba(0, 0, 0, 0.04);

  /* Panels */
  --split-preview-panel-bg: rgba(0, 0, 0, 0.02);
  --split-preview-panel-border: rgba(0, 0, 0, 0.08);

  /* Preview content */
  --split-preview-bg: var(--md-surface, #1b1e24);
  --split-preview-text: var(--md-text, #f0f0f0);
  --split-preview-placeholder: rgba(255, 255, 255, 0.6);
  --split-preview-meta: rgba(255, 255, 255, 0.55);
  --split-preview-loading-bg: rgba(27, 30, 36, 0.85);
  --split-preview-loading-text: #f0f0f0;

  /* הצבעים של תוכן Markdown בתצוגה החיה — ציטוט, טבלה, בלוק קוד, צבעי התחביר וכפתור ההעתקה — אינם
     כאן. הם הצבעים של המסמך עצמו, מ-``md-content-colors.css``, והנייר שלהם הוא המכל במצב Markdown
     (הבלוק ``.split-preview-content[data-mode="markdown"]`` למטה). הטוקנים שכאן משמשים את המכל
     במצבים האחרים — קוד ו-HTML — ואת שורות הסטטוס. */

  /* Error */
  --split-error-bg: rgba(220, 38, 38, 0.1);
  --split-error-border: rgba(220, 38, 38, 0.35);
  --split-error-text: #b91c1c;

  /* Codehilite */
  --split-codehilite-bg: #272822;
  --split-codehilite-text: #f8f8f2;
}

/* Dark themes override */
:root[data-theme="dark"],
:root[data-theme="dim"],
:root[data-theme="nebula"] {
  --split-container-bg: rgba(255, 255, 255, 0.04);
  --split-container-border: rgba(255, 255, 255, 0.08);
  --split-toolbar-bg: rgba(0, 0, 0, 0.08);
  --split-toolbar-border: rgba(255, 255, 255, 0.08);
  --split-toggle-bg: rgba(100, 100, 255, 0.2);
  --split-toggle-border: rgba(100, 100, 255, 0.6);
  --split-toggle-active-bg: rgba(56, 176, 0, 0.25);
  --split-toggle-active-border: rgba(74, 193, 23, 0.6);
  --split-tabs-bg: rgba(255, 255, 255, 0.08);
  --split-preview-panel-bg: rgba(255, 255, 255, 0.02);
  --split-preview-panel-border: rgba(255, 255, 255, 0.08);
  --split-preview-bg: var(--md-surface);
  --split-preview-text: var(--md-text);
  --split-preview-placeholder: rgba(255, 255, 255, 0.6);
  --split-preview-meta: rgba(255, 255, 255, 0.55);
  --split-preview-loading-bg: rgba(27, 30, 36, 0.85);
  --split-preview-loading-text: #f0f0f0;
  --split-error-bg: rgba(248, 113, 113, 0.15);
  --split-error-border: rgba(248, 113, 113, 0.4);
  --split-error-text: #fca5a5;
}

/* Ocean theme override */
:root[data-theme="ocean"] {
  --split-container-bg: rgba(49, 130, 206, 0.08);
  --split-container-border: rgba(49, 130, 206, 0.25);
  --split-toolbar-bg: rgba(26, 54, 93, 0.4);
  --split-toolbar-border: rgba(49, 130, 206, 0.25);
  --split-toggle-bg: rgba(49, 130, 206, 0.25);
  --split-toggle-border: rgba(49, 130, 206, 0.5);
  --split-toggle-active-bg: rgba(104, 211, 145, 0.25);
  --split-toggle-active-border: rgba(104, 211, 145, 0.5);
  --split-tabs-bg: rgba(49, 130, 206, 0.15);
  --split-preview-panel-bg: rgba(26, 54, 93, 0.4);
  --split-preview-panel-border: rgba(49, 130, 206, 0.25);
  --split-preview-bg: var(--md-surface);
  --split-preview-text: var(--md-text);
  --split-preview-placeholder: rgba(255, 255, 255, 0.65);
  --split-preview-meta: rgba(255, 255, 255, 0.55);
  --split-preview-loading-bg: rgba(26, 54, 93, 0.9);
  --split-preview-loading-text: #ffffff;
  --split-codehilite-bg: #1a365d;
  --split-codehilite-text: #e2e8f0;
}

/* Forest theme override */
:root[data-theme="forest"] {
  --split-container-bg: rgba(72, 187, 120, 0.08);
  --split-container-border: rgba(72, 187, 120, 0.25);
  --split-toolbar-bg: rgba(20, 83, 45, 0.4);
  --split-toolbar-border: rgba(72, 187, 120, 0.25);
  --split-toggle-bg: rgba(72, 187, 120, 0.25);
  --split-toggle-border: rgba(72, 187, 120, 0.5);
  --split-toggle-active-bg: rgba(56, 189, 248, 0.25);
  --split-toggle-active-border: rgba(56, 189, 248, 0.5);
  --split-tabs-bg: rgba(72, 187, 120, 0.15);
  --split-preview-panel-bg: rgba(20, 83, 45, 0.4);
  --split-preview-panel-border: rgba(72, 187, 120, 0.25);
  --split-preview-bg: var(--md-surface);
  --split-preview-text: var(--md-text);
  --split-preview-placeholder: rgba(255, 255, 255, 0.65);
  --split-preview-meta: rgba(255, 255, 255, 0.55);
  --split-preview-loading-bg: rgba(20, 83, 45, 0.9);
  --split-preview-loading-text: #ffffff;
  --split-codehilite-bg: #14532d;
  --split-codehilite-text: #e2e8f0;
}

/* Rose Pine Dawn theme override */
:root[data-theme="rose-pine-dawn"] {
  --split-container-bg: rgba(87, 82, 121, 0.06);
  --split-container-border: rgba(87, 82, 121, 0.15);
  --split-toolbar-bg: rgba(242, 233, 225, 0.6);
  --split-toolbar-border: rgba(87, 82, 121, 0.15);
  --split-toggle-bg: rgba(144, 122, 169, 0.2);
  --split-toggle-border: rgba(144, 122, 169, 0.4);
  --split-toggle-active-bg: rgba(40, 105, 131, 0.2);
  --split-toggle-active-border: rgba(40, 105, 131, 0.4);
  --split-tabs-bg: rgba(87, 82, 121, 0.08);
  --split-preview-panel-bg: rgba(242, 233, 225, 0.5);
  --split-preview-panel-border: rgba(87, 82, 121, 0.15);
  --split-preview-bg: var(--md-surface);
  --split-preview-text: var(--md-text);
  --split-preview-placeholder: rgba(255, 255, 255, 0.6);
  --split-preview-meta: rgba(255, 255, 255, 0.55);
  --split-preview-loading-bg: rgba(27, 30, 36, 0.85);
  --split-preview-loading-text: #f0f0f0;
  --split-error-bg: rgba(180, 99, 122, 0.15);
  --split-error-border: rgba(180, 99, 122, 0.35);
  --split-error-text: #b4637a;
  --split-codehilite-bg: #1f1d2e;
  --split-codehilite-text: #e0def4;
}

/* High Contrast theme override */
:root[data-theme="high-contrast"] {
  --split-container-bg: transparent;
  --split-container-border: #ffffff;
  --split-toolbar-bg: #000000;
  --split-toolbar-border: #ffffff;
  --split-toggle-bg: transparent;
  --split-toggle-border: #ffffff;
  --split-toggle-active-bg: #ffff00;
  --split-toggle-active-border: #ffff00;
  --split-tabs-bg: transparent;
  --split-tabs-selected-bg: #ffffff;
  --split-tabs-selected-color: #000000;
  --split-preview-panel-bg: #000000;
  --split-preview-panel-border: #ffffff;
  --split-preview-bg: var(--md-surface);
  --split-preview-text: var(--md-text);
  --split-preview-placeholder: #ffffff;
  --split-preview-meta: #ffffff;
  --split-preview-loading-bg: #000000;
  --split-preview-loading-text: #ffffff;
  --split-error-bg: #330000;
  --split-error-border: #ff0000;
  --split-error-text: #ff6666;
  --split-codehilite-bg: #1a1a1a;
  --split-codehilite-text: #ffffff;
}

/* Classic theme (light) override */
:root[data-theme="classic"] {
  --split-container-bg: rgba(0, 0, 0, 0.02);
  --split-container-border: rgba(0, 0, 0, 0.08);
  --split-toolbar-bg: rgba(0, 0, 0, 0.04);
  --split-toolbar-border: rgba(0, 0, 0, 0.08);
  --split-toggle-bg: rgba(79, 70, 229, 0.15);
  --split-toggle-border: rgba(79, 70, 229, 0.4);
  --split-toggle-active-bg: rgba(34, 197, 94, 0.2);
  --split-toggle-active-border: rgba(34, 197, 94, 0.5);
  --split-tabs-bg: rgba(0, 0, 0, 0.04);
  --split-preview-panel-bg: rgba(0, 0, 0, 0.02);
  --split-preview-panel-border: rgba(0, 0, 0, 0.08);
  --split-preview-bg: var(--md-surface);
  --split-preview-text: var(--md-text);
  /* Use defaults for dark-friendly text values */
}

/* Custom/Shared theme override - uses CSS variables from the custom/shared theme */
:root[data-theme="custom"],
:root[data-theme^="shared:"] {
  --split-container-bg: color-mix(in srgb, var(--bg-tertiary, #2a2d40) 50%, transparent);
  --split-container-border: var(--glass-border, rgba(255, 255, 255, 0.1));
  --split-toolbar-bg: color-mix(in srgb, var(--bg-secondary, #1f2937) 80%, transparent);
  --split-toolbar-border: var(--glass-border, rgba(255, 255, 255, 0.1));
  --split-toggle-bg: color-mix(in srgb, var(--primary, #6366f1) 20%, transparent);
  --split-toggle-border: color-mix(in srgb, var(--primary, #6366f1) 50%, transparent);
  --split-toggle-active-bg: color-mix(in srgb, var(--success, #22c55e) 25%, transparent);
  --split-toggle-active-border: color-mix(in srgb, var(--success, #22c55e) 50%, transparent);
  --split-tabs-bg: color-mix(in srgb, var(--bg-tertiary, #2a2d40) 60%, transparent);
  --split-preview-panel-bg: color-mix(in srgb, var(--bg-secondary, #1f2937) 60%, transparent);
  --split-preview-panel-border: var(--glass-border, rgba(255, 255, 255, 0.1));
  --split-preview-bg: var(--bg-primary, var(--md-surface, #1b1e24));
  --split-preview-text: var(--text-primary, var(--md-text, #f0f0f0));
  --split-preview-placeholder: var(--text-muted, rgba(255, 255, 255, 0.6));
  --split-preview-meta: var(--text-secondary, rgba(255, 255, 255, 0.55));
  --split-preview-loading-bg: color-mix(in srgb, var(--bg-primary, #1b1e24) 85%, transparent);
  --split-preview-loading-text: var(--text-primary, #f0f0f0);
  --split-error-bg: color-mix(in srgb, var(--danger, #ef4444) 15%, transparent);
  --split-error-border: color-mix(in srgb, var(--danger, #ef4444) 40%, transparent);
  --split-error-text: var(--danger, #fca5a5);
  --split-codehilite-bg: var(--code-bg, var(--bg-secondary, #272822));
  --split-codehilite-text: var(--code-text, var(--text-primary, #f8f8f2));
}

/* ==============================================
   Split View Styles
   ============================================== */

.split-view {
  --split-transition: 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 12px;
  background: var(--split-container-bg);
  border: 1px solid var(--split-container-border);
  overflow: hidden;
  margin-top: 1rem;
  /* המסגרת אינה טקסט. כשנוגעים באזור בלי טקסט, Chrome מציב את הסמן בטקסט הקרוב ביותר לנקודה — ואם הקרוב
     הוא העורך, הסמן נכנס אליו, ובנייד המקלדת נפתחת. כך נגיעה בריפוד שמימין לעורך, או במסגרת עצמה, פתחה
     מקלדת (נמדד באמולציית מגע, בעורך הציבורי ובעמוד העריכה). העורך והתצוגה מחזירים לעצמם את הבחירה
     בכלל שלמטה. */
  -webkit-user-select: none;
  user-select: none;
}

.split-view .codemirror-container,
.split-view textarea,
.split-view .split-preview-canvas {
  -webkit-user-select: text;
  user-select: text;
}

.split-view:not(.is-active) .split-panels {
  display: block;
}

.split-view:not(.is-active) .split-panel--editor {
  width: 100%;
}

.split-view:not(.preview-enabled) .split-toolbar {
  display: none;
}

.split-view:not(.is-active) .split-panel--preview {
  display: none;
}

.split-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  background: var(--split-toolbar-bg);
  border-bottom: 1px solid var(--split-toolbar-border);
}

.split-toolbar-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.split-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  font-size: 0.95rem;
  border-radius: 8px;
  background: var(--split-toggle-bg);
  border: 1px solid var(--split-toggle-border);
  color: inherit;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

/* מצב דלוק — לפי ``is-active`` של ה-Split View ולא לפי ``aria-pressed``: בכפתור שמחליף כיתוב (העורך הציבורי) אין
   ``aria-pressed`` (``syncToggleButton`` ב-``live-preview.js``). */
.split-view.is-active .split-toggle {
  background: var(--split-toggle-active-bg);
  border-color: var(--split-toggle-active-border);
}

.split-toggle:active {
  transform: scale(0.98);
}

.split-toolbar-hint {
  font-size: 0.8rem;
  opacity: 0.7;
  font-family: var(--font-mono, 'JetBrains Mono', 'Fira Code', monospace);
  white-space: nowrap;
}

.split-tabs {
  display: none;
  gap: 0.15rem;
  background: var(--split-tabs-bg);
  border-radius: 8px;
  padding: 0.2rem;
}

/* הלשוניות "עורך" / "תצוגה חיה" (בנייד, רק כשהתצוגה החיה דלוקה). הסימון של הנבחרת לא בוחר צבע, ולכן הוא עובד בכל
   ערכה, גם מיובאת: הטקסט בצבע של שורת הכלים (``inherit``), שכל ערכה כבר קבעה כקריא על הרקע שלה; הקו התחתון באותו
   צבע, ולכן הוא נראה בכל מקום שבו הטקסט נקרא; הטקסט מודגש; והרקע הוא אותו צבע בעוצמה נמוכה — בהיר בערכה כהה, כהה
   בערכה בהירה. הלא נבחרת באותו צבע, בלי קו ובלי רקע. עד נובמבר 2026 הנבחרת קיבלה בכל ערכה את צבע הטקסט של התצוגה
   החיה (``--split-preview-text``), כמעט לבן, ובערכה בהירה כמעט נעלמה (ניגודיות 1.42 ב-Rose Pine Dawn).
   נמדד בדגימת פיקסלים, וכך נבחרו הערכים: קו ב-``--primary`` נבלע ב-Classic וב-Forest (ניגודיות 1.0 מול הרקע של
   הלשונית); לא נבחרת דהויה (``opacity``) ירדה מתחת ל-4.5 בארבע ערכות שהיו מעליו; ורקע של 16% הוריד את הטקסט של
   הנבחרת ל-3.6 ב-Classic וב-Dim — ב-10% הוא 3.98 לפחות. ערכה יכולה עדיין לקבוע ``--split-tabs-selected-bg`` /
   ``--split-tabs-selected-color`` — ניגודיות גבוהה קובעת, והכלל שלה בהמשך. */
.split-tabs button {
  border: none;
  background: transparent;
  color: inherit;
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.split-tabs button[aria-selected="true"] {
  background: var(--split-tabs-selected-bg, color-mix(in srgb, currentColor 10%, transparent));
  color: var(--split-tabs-selected-color, inherit);
  box-shadow: inset 0 -3px 0 currentColor;
  font-weight: 700;
}

/* בניגודיות גבוהה ``high-contrast.css`` צובע כל ``button`` בשחור עם מסגרת לבנה, ב-``!important`` — ולכן עד נובמבר 2026
   הלשונית הנבחרת נראתה שם בדיוק כמו השנייה. כאן היא הפוכה: הצבעים מהבלוק של הערכה למעלה (לבן, ושחור עליו). */
:root[data-theme="high-contrast"] .split-tabs button[aria-selected="true"] {
  background-color: var(--split-tabs-selected-bg) !important;
  color: var(--split-tabs-selected-color) !important;
}

.split-panels {
  display: flex;
  flex-direction: row;
  min-height: 280px;
}

.split-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* חשוב: מאפשר גלילה פנימית בתוך flex (במובייל במיוחד) */
  min-height: 0;
}

.split-panel--editor {
  max-width: 100%;
  padding: 0 0.85rem 0.85rem;
}

/* ============================================================
   גובה עמודת העורך — מקור סמכות אחד לגובה

   בעבר שני כללים נפרדים קבעו את הגובה, כל אחד לפי נוסחה אחרת של
   גובה החלון: `.cm-editor { min-height:400px; max-height:60vh }`
   מול `.split-panels { max-height: calc(100vh - 200px) }`. אף אחד
   מהם לא הכיר את מה שיושב ביניהם בתוך `#editorContainer` — התווית
   "קוד" ופס החלפת העורך (יחד כ‑106px) ו‑padding-bottom של הפאנל.
   מתחת לגובה חלון של כ‑800px הסכום חרג מהתקרה, ו‑`.split-view`
   עם `overflow: hidden` בלע את העודף בשקט: השורות האחרונות של
   הקובץ נשארו מתחת לקצה התחתון ולא היו נגישות בשום גלילה
   (נמדד: 2.2 שורות בחלון בגובה 680px, 5.4 שורות בגובה 600px).

   התיקון מסיר את הסתירה במקום להזיז מספר:

   1. כש‑Live Preview כבוי (ברירת המחדל בשני העמודים) אין בכלל צורך
      בתקרה על `.split-panels` — ל‑`.cm-editor` יש כבר max-height
      משלו, והעמוד עצמו גולל. זה בדיוק מה שקורה במובייל היום.
   2. כש‑Live Preview דלוק התקרה כן נחוצה, כדי ששני הפאנלים ייכנסו
      למסך. אז העורך *ממלא* את הגובה שנשאר לו במקום לגלוש ממנו:
      שרשרת flex עם `min-height: 0` שמאפשרת לו להתכווץ.
   3. והגובה כשהוא דלוק הוא `height` ולא `max-height`. עד אוקטובר 2026 זו
      הייתה תקרה, ולכן הגובה נקבע לפי אורך התוכן: מסמך ריק (אחרי "ניקוי",
      או מחיקה של כל הטקסט) כיווץ את שני הפאנלים ל‑280px, והעורך עצמו
      ירד ל‑89px (נמדד בעמוד העריכה; בעורך הציבורי 179px). עכשיו הגובה
      תלוי בחלון בלבד. זה הכלל היחיד שקובע את גובה `.split-panels`.
   ============================================================ */

/* רק מ‑768px ומעלה: מתחת לזה `.split-panels` ממילא בלי תקרה
   (ראו ה‑media query של המובייל למטה), ואז `flex: 1` על העורך
   היה נותן לו לגדול בלי גבול לפי אורך הקובץ. */
@media (min-width: 768px) {
  .split-view.is-active .split-panels {
    height: calc(100vh - 200px);
  }

  .split-view.is-active .split-panel--editor > #editorContainer {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  .split-view.is-active .split-panel--editor > #editorContainer > .codemirror-container,
  .split-view.is-active .split-panel--editor > #editorContainer > textarea[name="code"] {
    flex: 1 1 auto;
    min-height: 0;
  }

  .split-view.is-active .split-panel--editor > #editorContainer > .codemirror-container {
    display: flex;
    flex-direction: column;
  }

  .split-view.is-active .split-panel--editor > #editorContainer > .codemirror-container > .cm-editor {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
}

.split-panel--preview {
  /* העורך והתצוגה בחצי-חצי (``flex: 1`` של ``.split-panel``), בלי קו גרירה ביניהם. עד אוקטובר 2026 היה כאן
     ``.split-resizer``, שהזיז את החלוקה דרך ``--split-editor-ratio``. במגע הגרירה הסתיימה ב-``pointercancel`` ולא
     ב-``pointerup``, ולכן מאזין התזוזה נשאר רשום, וכל גלילה אחר כך הזיזה את החלוקה. הפיצ'ר הוסר כולו, לבקשת
     המשתמש, ולא תוקן. */
  background: var(--split-preview-panel-bg);
  border-inline-start: 1px solid var(--split-preview-panel-border);
  padding: 0.85rem;
  /* חשוב: בלי זה, התוכן יכול "להיתקע" ולהיחתך במקום לאפשר scroll */
  min-height: 0;
}

.split-preview-content {
  flex: 1;
  /* כדי שה-preview (ובעיקר iframe) יקבל גובה אמיתי ולא "חלון קטן",
     אנחנו הופכים את התוכן למבנה flex-עמודי ומעבירים את הגלילה ל-canvas. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  background: var(--split-preview-bg);
  color: var(--split-preview-text);
  border-radius: 8px;
  /* הריפוד של הנייר יושב בתוך הגולל (ה-canvas) ובשורות שמתחתיו, ולא על המכל: כך פס הגלילה של התצוגה צמוד
     לקצה הנייר, ולא צף בתוך שוליים. ``--split-preview-pad`` הוא הערך היחיד שלו, ו-``file-editor.css`` מקטין
     אותו בנייד. */
  --split-preview-pad: 1.25rem;
  padding: 0;
  position: relative;
}

/* במצב Markdown כל אזור התצוגה הוא הנייר של המסמך: אותו רקע ואותו צבע טקסט כמו ``#md-content`` בתצוגת
   המסמך (``--md-paper-bg`` / ``--md-paper-text`` ב-``md-content-colors.css``). ``data-mode`` נקבע על
   המכל ב-``setMarkdownContext`` שב-``live-preview.js``, לצד ה-``id="md-content"`` של ה-canvas.
   ההצהרה כאן, על המכל עצמו, גוברת על ``--split-preview-bg`` שמוצהר על ``:root`` — גם כשערכה מיובאת
   מזריקה אותו בבלוק ``user-custom-theme`` של ``base.html``. שורת המידע (שפה, גודל, זמן) מקבלת גוון חלש
   של טקסט הנייר, כדי שתהיה קריאה על נייר בהיר ועל נייר כהה. */
.split-preview-content[data-mode="markdown"] {
  --split-preview-bg: var(--md-paper-bg);
  --split-preview-text: var(--md-paper-text);
  --split-preview-meta: color-mix(in srgb, var(--md-paper-text) 75%, var(--md-paper-bg));
}

/* בלוקי קוד במצב קוד (Pygments מהשרת): משמאל לימין, וגופן מונו. במצב Markdown הכיוון והגופן של המסמך —
   ``.code-block`` ו-``pre.rtl-code`` ב-``md-content-layout.css``. */
.split-preview-content:not([data-mode="markdown"]) pre,
.split-preview-content:not([data-mode="markdown"]) code {
  direction: ltr;
  text-align: left;
  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
}

html[dir="rtl"] .split-preview-content:not([data-mode="markdown"]) pre,
html[dir="rtl"] .split-preview-content:not([data-mode="markdown"]) code {
  direction: ltr;
  text-align: left;
}

/* בלוקי קוד עם תוכן בעברית – יישור לימין */
.split-preview-content:not([data-mode="markdown"]) pre.rtl-code,
.split-preview-content:not([data-mode="markdown"]) pre.rtl-code code,
html[dir="rtl"] .split-preview-content:not([data-mode="markdown"]) pre.rtl-code,
html[dir="rtl"] .split-preview-content:not([data-mode="markdown"]) pre.rtl-code code {
  direction: rtl;
  text-align: right;
}

/* תוכן Markdown בתצוגה החיה — הפריסה והצבעים של המסמך עצמו: ``md-content-layout.css`` ו-``md-content-colors.css``,
   שנטענים ב-``_live_preview_styles.html`` וחלים על ה-canvas דרך ``id="md-content"``. עד שהם נוצרו, כאן ישבה שכבת
   תוכן נפרדת, והיא נסחפה מהמסמך: קוד בשורה נשבר כל כמה אותיות בטבלה, ובלוק קוד נראה כמו בדפדפן הריפו. */

.split-preview-placeholder {
  text-align: center;
  color: var(--split-preview-placeholder);
  font-size: 0.95rem;
}

.split-preview-placeholder small {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  opacity: 0.8;
}

.split-preview-content.is-loading::after {
  content: 'טוען תצוגה חיה...';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--split-preview-loading-bg);
  color: var(--split-preview-loading-text);
  font-weight: 600;
}

.split-preview-error {
  background: var(--split-error-bg);
  border: 1px solid var(--split-error-border);
  padding: 0.75rem;
  border-radius: 8px;
  color: var(--split-error-text);
}

.split-preview-canvas {
  /* ה-canvas הוא אזור התוכן/iframe – הוא צריך "לגדול" לגובה הפנוי */
  flex: 1 1 auto;
  min-height: 160px;
  padding: var(--split-preview-pad);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /* חשוב: canvas משמש גם לרינדור HTML של Markdown.
     אם הוא flex, אלמנטים (h1/p/ul/...) הופכים ל-flex items ונפרסים בשורה. */
  display: block;
}

.split-preview-content iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
  background: var(--split-preview-bg);
}

.split-preview-meta {
  margin-top: 0.75rem;
  padding-inline: var(--split-preview-pad);
  font-size: 0.75rem;
  color: var(--split-preview-meta);
}

.split-preview-status {
  padding: 0 var(--split-preview-pad) var(--split-preview-pad);
}

/* שורת המידע (שפה, גודל, זמן) וסטטוס "התצוגה מעודכנת" הם רעש מתחת לתצוגה, בכל עמודי העורך — העורך הציבורי, העריכה
   וההעלאה. הסטטוס מוצג רק בשגיאה: כשהרינדור נכשל, התצוגה ממשיכה להציג את הרינדור הקודם, ובלי ההודעה הוא היה נראה
   תקין. שאר הסטטוסים כבר נראים במקום אחר — "טוען תצוגה חיה..." בשכבה מעל התצוגה (``.is-loading``), ו"אין תוכן
   להצגה." בתוך התצוגה. עד נובמבר 2026 הכלל ישב רק בעורך הציבורי (בבלוק ה-``<style>`` של ``markdown_editor.html``).
   מכל התצוגה כולו aria-live, ולכן גם הסטטוס שמופיע מוכרז. */
.split-preview-meta,
.split-preview-status:not([data-state="error"]) {
  display: none;
}

.split-view[data-active-panel="preview"] .split-panel--editor {
  display: none;
}

@media (max-width: 767px) {
  .split-view {
    max-height: none;
  }

  .split-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .split-toolbar-controls {
    justify-content: space-between;
  }

  /* רק כשהתצוגה החיה דלוקה: כשהיא כבויה יש רק עורך, ו"תצוגה חיה" הייתה פותחת פאנל ריק. */
  .split-view.is-active .split-tabs {
    display: flex;
  }

  .split-panels {
    flex-direction: column;
    /* במובייל אין לפאנלים גובה מהחלון (הכלל של ``height`` למעלה רק מ-768px) — כדי שלא יהיה מצב של גלילה
       שלא עובדת. כאן העורך והתצוגה נשענים על ה-min-height של עצמם. */
  }

  /* במובייל: טאבים מחליפים פאנל אחד בכל פעם.
     חובה להסתיר הרמטית את הפאנל הלא פעיל כדי למנוע "כפילות" (preview מתחת לעורך). */
  .split-view[data-active-panel="editor"] .split-panel--preview {
    display: none !important;
  }

  .split-view[data-active-panel="preview"] .split-panel--editor {
    display: none !important;
  }

  .split-panel--editor,
  .split-panel--preview {
    padding: 0.65rem;
  }

  .split-preview-content {
    min-height: 220px;
  }

  .split-preview-canvas {
    /* נותן יותר מרחב צפייה במובייל, ועדיין מאפשר גלילה פנימית */
    min-height: 45vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .split-view,
  .split-toggle,
  .split-panels,
  .split-preview-content {
    transition: none !important;
  }
}

html[dir="rtl"] .split-preview-content {
  direction: rtl;
}

.codehilite {
  background: var(--split-codehilite-bg);
  color: var(--split-codehilite-text);
  padding: 1rem;
  border-radius: 8px;
  overflow: auto;
}

.codehilite pre {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}