:root {
  --bg-main: #eef2f9;
  --card-bg: #ffffff;
  --text-main: #1f2a3d;
  --text-muted: #5b6b82;

  --blue-deep: #1b3a6b;
  --blue-primary: #2e5fa3;
  --blue-soft: #dce7f7;

  --green-success: #2e9e5b;
  --green-soft: #dff3e6;

  --red-error: #d14343;
  --red-soft: #fbe1e1;

  --border-subtle: #dbe3ee;
  --radius-lg: 20px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-card: 0 8px 24px rgba(27, 58, 107, 0.07);

  --font-family: 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-main);
  color: var(--text-main);
  min-height: 100vh;
  direction: rtl;
  text-align: right;
  line-height: 1.5;
}

/* בידוד כיווניות עבור מתמטיקה */
.math-ltr {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  display: inline-block;
}

/* כל נוסחת KaTeX מבודדת אוטומטית כ-LTR, גם כשהיא משובצת בתוך משפט עברי */
.katex {
  direction: ltr;
  unicode-bidi: isolate;
  max-width: 100%;
}

/* מונע מנוסחאות ארוכות לגלוש מחוץ לכרטיסים במסכים צרים - גלילה אופקית מקומית במקום חריגה.
   direction:ltr כאן הוא לא קוסמטי - הוא התיקון בפועל: .katex-display יורש
   direction:rtl מ-body (העמוד כולו RTL), אבל תוכן המתמטיקה בתוכו (.katex)
   הוא LTR. אי-ההתאמה הזו בין כיוון הקונטיינר הגולל (RTL) לכיוון התוכן שלו
   (LTR) גורמת לכרום לחשב scrollWidth שגוי - הוא מדווח שאין גלישה כלל (equal
   ל-clientWidth) גם כשהנוסחה בפועל רחבה בהרבה מהקונטיינר, כך שנוסחאות ארוכות
   "מצטמצמות" בלי גלילה במקום לגלוש ולהיגלל כמתוכנן. once .katex-display עצמו
   מוגדר גם הוא LTR (תואם לתוכן שבתוכו), הדפדפן מחשב scrollWidth נכון. */
.katex-display {
  direction: ltr;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* רשת ביטחון גלובלית עבור נוסחאות KaTeX: כל לומדה בונה את שורות הנוסחה
   שלה בסגנון מעט שונה (.derivation-line / .dist-line / .formula-display
   וכו', כל אחת עם ה-CSS המקומי שלה) - ולכן במקום להסתמך על ש-27 קבצי
   הלומדות יגדירו בעצמם עם overflow-x:auto בכל מקום, התיקון הזה תופס כל
   <p> שמכיל ביטוי KaTeX כלשהו (ישיר או עטוף ב-strong/em וכדומה) ומבטיח
   לו גלילה אופקית בטוחה. כך גם אם קונטיינר-אב כלשהו (כמו .lesson-card
   במסכים צרים, למטה) מגדיר overflow-x:hidden כרשת ביטחון כללית משלו,
   נוסחה ארוכה תמיד תישאר ניתנת לגלילה בתוך השורה שלה ולא תיחתך בשקט. */
.katex,
p:has(.katex) {
  max-width: 100%;
}
p:has(.katex) {
  /* direction:ltr הוא חובה כאן, לא קוסמטי: בלעדיו ה-<p> עצמו נשאר
     direction:rtl (יורש מ-body) בעוד התוכן שלו (.katex) הוא LTR - אותה
     אי-התאמה שגורמת ל-Chrome לחשב scrollWidth שגוי (ר' ההערה ליד
     .katex-display למעלה). התוצאה בפועל: overflow-x:auto לא "נדלק" כי
     הדפדפן חושב שאין גלישה, והנוסחה פשוט נחתכת בשקט מעבר לגבול הכרטיס
     במקום לקבל פס גלילה. אושר ריפרודוקציה: shp-04.html, שורת "שלב 1 -
     שיפוע הבסיס BC" בתוך #triReadout, שקטע את חלק המסקנה של השבר.
     direction:ltr כאן מתקן את חישוב ה-scrollWidth ומאפשר גלילה אמיתית. */
  direction: ltr;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Math formulas get a touch smaller under 600px so long KaTeX expressions
   are less likely to force horizontal scrolling on phones. Kept as its own
   query (rather than folded into the 480px one below) since it targets a
   wider range than the layout-padding tweak does. */
@media (max-width: 600px) {
  .katex {
    font-size: 0.9em;
  }
}

/* מרכוז נוסף: מספר קבצי לומדה (shp-02/03/05) מגדירים מקומית מחלקת-עטיפה
   בשם .dist-line-wrap סביב פסקת נוסחה (עבור distanceSubstitutionHTML) עם
   overflow-x:auto משלה - אבל בלי direction:ltr, מה שגורם לאותה תקלת
   scrollWidth בדיוק כמו למעלה (ה-div נשאר RTL בעוד תוכנו LTR). קבע כאן
   פעם אחת כדי שכל קובץ עתידי שמשתמש בשם המחלקה הזה יקבל את ההתנהגות
   הנכונה אוטומטית, גם אם הוא (בטעות) יגדיר מחדש עותק מקומי בלי
   direction:ltr - התנאי `:has(.katex)` שומר את זה מכוון רק לעטיפות
   שבאמת מכילות נוסחה, לא לכל div עם השם הזה במקרה. */
.dist-line-wrap:has(.katex) {
  direction: ltr;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

@media (max-width: 480px) {
  .lesson-card {
    padding: 14px 10px;
    /* Deliberately NOT overflow-x:hidden here (used to be): every KaTeX-bearing
       <p> now gets its own overflow-x:auto (rule above), and .katex-display
       already had it too, so this card-level clip was never needed for
       formulas - it only risked silently truncating anything that *wasn't*
       already self-scrolling (e.g. a future coordinate-header line with no
       local overflow rule) instead of letting it scroll. Confirmed via an
       automated audit (drag-stress + static, all 27 lessons, 375px) that
       removing it introduces zero horizontal page-scroll regressions. */
  }
}

/* תג מזהה מודול פנימי (למשל tri-m2) - לצורך התייחסות מנהלית מול מבדקים/גיליונות, לא לתלמידים */
.module-id-badge {
  display: inline-block;
  font-family: 'Courier New', Consolas, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  background: #f1f4f9;
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 2px 10px;
  direction: ltr;
  unicode-bidi: isolate;
  letter-spacing: 0.02em;
  margin-inline-start: 10px;
  vertical-align: middle;
  text-transform: uppercase;
}

/* שורת תגיות עליונה בכרטיס לומדה בפורטל - תג זמינות בצד אחד, מזהה מודול בצד השני */
.card-badges-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.card-badges-row .module-id-badge {
  margin-inline-start: 0;
}

/* גלוי-שקוף, גדול מהנקודה הנראית - מבטיח שטח מגע נוח לאצבע (~40-44px גם
   במסכי מובייל צרים) בלי לשנות את הגודל החזותי הקטן והמדויק של הנקודה עצמה.
   הנקודה הנראית מקבלת pointer-events:none כדי שהאזור הגדול הזה יהיה
   היעד היחיד והחד-משמעי לאירועי מצביע/מגע. */
.drag-hit-area {
  fill: transparent;
  touch-action: none;
  cursor: grab;
}