/* שילוב — מערכת שעות לסיוע ולשילוב · © 2026 אריאל מירסקי. כל הזכויות שמורות. */
:root{
  --paper:#F4F6F8;
  --surface:#FFFFFF;
  --ink:#16233A;
  --ink-soft:#5A6A81;
  --rule:#D5DCE6;
  --rule-strong:#AEBACB;
  --accent:#2F6F62;
  --accent-soft:#E6F0ED;
  --warn:#B45309;
  --warn-soft:#FDF1DF;
  --bad:#A32B22;
  --bad-soft:#FBECEA;
  --lock:#6B4FA0;
  --lock-soft:#EFEAF8;
  --trial:#1D6FB8;
  --trial-soft:#E5F0FA;
  --radius:12px;
  --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(22,35,58,.05);
  --shadow:0 2px 8px rgba(22,35,58,.07),0 1px 2px rgba(22,35,58,.04);
  --shadow-lg:0 12px 40px rgba(22,35,58,.16),0 2px 8px rgba(22,35,58,.08);
  --focus:0 0 0 3px rgba(47,111,98,.28);
}
*{box-sizing:border-box}
/* ⚠ פס גלילה אופקי שאין מה לגלול אליו (3.13). אריאל דיווח עליו במסך
   הכניסה. לא הצלחתי לשחזר אותו באף רוחב שנבדק (375 עד 1280), ולכן
   במקום לנחש מה גרם לו — חוסמים את האפשרות. `clip` ולא `hidden`: הוא
   אינו הופך את האלמנט למכל גלילה, ולכן אינו פוגע ב-`position:sticky`
   של השורה העליונה ושל הכותרות הדבוקות.
   ⚠ זה **אינו** נוגע לגלילה של טבלת מערכת השעות: ל-`.ttwrap` יש
   `overflow-x:auto` משלה, והיא ממשיכה לעבוד כרגיל. */
html,body{margin:0;padding:0;overflow-x:clip}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Assistant","Heebo","Rubik","Segoe UI",system-ui,sans-serif;
  font-size:15.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
/* מוסתר חזותית אך נשאר נגיש לקוראי מסך — תבנית סטנדרטית, לא display:none */
.srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ⚠⚠ **מצב ניגודיות גבוהה של Windows מבטל box-shadow לגמרי.**
   כל סימוני הפוקוס כאן נשענו על box-shadow עם outline:none — כלומר
   במצב הזה למשתמשי מקלדת **לא היה שום סימן** איפה הם נמצאים.
   `outline` בצבע שקוף אינו נראה במסך רגיל, ובמצב ניגודיות גבוהה
   הדפדפן מחליף אותו בצבע המערכת — ולכן הוא מופיע בדיוק שם.
   **הכלל: סימון פוקוס לא נשען על box-shadow לבדו.** */
:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--focus);border-radius:var(--radius-sm)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus)}
/* קישור דילוג לתוכן — מוסתר עד שמגיעים אליו בניווט מקלדת (Tab ראשון בעמוד) */
.skip-link{
  position:absolute;top:-100px;inset-inline-start:12px;z-index:200;
  background:var(--accent);color:#fff;padding:10px 16px;border-radius:0 0 8px 8px;
  font-weight:700;text-decoration:none;transition:top .12s;
}
.skip-link:focus{top:0}

/* ---------- top bar ---------- */
/* השורה העליונה נשארת מוצמדת למעלה בזמן גלילה, כדי ש"חזור", "קדימה"
   ושאר הפעולות יהיו תמיד בהישג יד ולא רק בראש הדף. */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--surface);border-bottom:1px solid var(--rule);
  padding:12px 18px;z-index:45;flex-wrap:wrap;
  max-width:min(2000px,98vw);margin:0 auto;width:100%;
  position:sticky;top:0;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px}
/* ===== הסמל — שלושה הקשרים, קוד אחד (4.2) =====
   ⚠ הסמל עצמו מגיע מ-`logoMark()` ב-`utils.js`. כאן רק הקופסה:
   מה הצבע של הריבועים (`color`) ומה הרקע שקווי הטבלה נצבעים בו
   (`--logo-bg`). זו הסיבה שאותו SVG נכון גם על ירוק וגם על לבן. */
.logosvg{display:block;width:100%;height:100%}
.brand .mark{
  width:32px;height:32px;border-radius:8px;overflow:hidden;
  background:var(--accent);color:#fff;--logo-bg:var(--accent);
}
.brand small{display:block;font-weight:400;font-size:12px;color:var(--ink-soft);line-height:1}
.topactions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.savestate{font-size:12px;color:var(--ink-soft)}

/* ---------- חלון הצעה ----------
   חלון שמבקש משהו מהמשתמש (התקנה, הצטרפות) צריך להיראות כמו הצעה
   ולא כמו שגיאה: סמל, כותרת גדולה, ורשימת מה מרוויחים. */
.promo{text-align:center;padding:6px 4px 0}
.promoicon{
  width:64px;height:64px;margin:0 auto 16px;border-radius:18px;
  background:var(--accent);color:#fff;--logo-bg:var(--accent);
  box-shadow:0 8px 20px rgba(47,111,98,.28);
}
.promo h3{margin:0 0 10px;font-size:21px}
.promo p{margin:0 auto 16px;color:var(--ink-soft);font-size:15px;
  line-height:1.65;max-width:360px}
.promolist{
  list-style:none;margin:0;padding:0;text-align:start;
  max-width:320px;margin-inline:auto;
}
.promolist li{
  position:relative;padding:8px 26px 8px 0;font-size:14.5px;
  border-top:1px solid var(--rule);
}
.promolist li:first-child{border-top:none}
.promolist li::before{
  content:'✓';position:absolute;inset-inline-start:0;top:8px;
  color:var(--accent);font-weight:700;
}
.btn.big{font-size:16px;padding:12px 26px}

/* ---------- רשימת "כרטיסיות נוספות" ----------
   שורות, לא כפתורים. תיבות מעוגלות זהות נראות כמו שורת כפתורים ולא
   כמו תפריט שאפשר לסרוק בעין. */
.extrarow{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:12px 14px;border:none;border-bottom:1px solid var(--rule);
  border-radius:0;background:transparent;cursor:pointer;text-align:start;
  transition:background .12s;
}
.extrarow:last-of-type{border-bottom:none}
.extrarow:hover{background:var(--paper)}
.extrarow b{font-size:15.5px;display:block}
.extraicon{
  flex:none;width:34px;height:34px;border-radius:9px;
  background:var(--accent-soft);display:grid;place-items:center;font-size:16px;
}
.extraarrow{flex:none;color:var(--ink-soft);font-size:20px;line-height:1;opacity:.5}
.extrarow:hover .extraarrow{opacity:1;color:var(--accent)}

/* ---------- כפתורי השורה העליונה ----------
   שורה של כפתורים דומים זה לזה אינה נקראת — העין לא יודעת מה חשוב.
   כאן יש שלוש רמות ברורות:
   · "שאלה" — מלא וצבעוני. זו הדרך לקבל עזרה, והיא צריכה להיות הדבר
     הראשון שרואים.
   · "חזור" ו"קדימה" — זוג צמוד במסגרת אחת, כי הם פעולה אחת בשני כיוונים.
   · "עוד" — מסגרת דקה, נוכח בלי להתחרות.
   הגובה זהה לכולם (34 פיקסלים), כדי שהשורה תהיה ישרה. */
.topactions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.topactions .btn.sm,.topactions .theme-toggle{
  height:34px;display:inline-flex;align-items:center;justify-content:center;
  font-size:13.5px;line-height:1;
}
/* זוג הביטול — מסגרת משותפת, בלי רווח ביניהם */
#btnUndoTop,#btnRedoTop{
  border:1px solid var(--rule)!important;background:var(--surface);
  color:var(--ink-soft);padding:0 12px;border-radius:0;
}
#btnUndoTop{border-radius:0 8px 8px 0;border-inline-start:none!important}
#btnRedoTop{border-radius:8px 0 0 8px;margin-inline-end:-8px}
#btnUndoTop:hover:not(:disabled),#btnRedoTop:hover:not(:disabled){
  background:var(--paper);color:var(--ink);
}
#btnUndoTop:disabled,#btnRedoTop:disabled{opacity:.3;cursor:default;background:transparent}
/* "עוד" — נוכח ושקט */
#btnTopMore{
  border:1px solid var(--rule)!important;background:var(--surface);
  color:var(--ink-soft);border-radius:8px;padding:0 13px;
}
#btnTopMore:hover{background:var(--paper);color:var(--ink)}
/* "שאלה" — הכפתור היחיד שצבוע */
#btnAsk{
  background:var(--accent);color:#fff;
  border:1px solid var(--accent)!important;
  font-weight:700;font-size:14px;padding:0 18px;border-radius:8px;
  box-shadow:var(--shadow-sm);
}
#btnAsk:hover{filter:brightness(1.08)}
.theme-toggle{padding:0 10px!important}
@media (max-width:760px){
  .topactions{gap:6px}
  #btnAsk{padding:0 13px}
  #btnUndoTop,#btnRedoTop,#btnTopMore{padding:0 10px}
}

/* ---------- steps ---------- */
.steps{
  display:flex;gap:2px;padding:0 18px;overflow-x:auto;
  background:var(--surface);border-bottom:1px solid var(--rule);z-index:39;
  scrollbar-width:thin;
}
.step{
  display:flex;align-items:center;gap:7px;white-space:nowrap;cursor:pointer;
  border:none;background:none;
  padding:13px 14px 11px;color:var(--ink-soft);font-size:14.5px;
  border-bottom:2px solid transparent;transition:color .12s,border-color .12s;
}
.step:hover{color:var(--ink)}
.step.on{color:var(--accent);font-weight:700;border-bottom-color:var(--accent)}
.step .num{
  width:19px;height:19px;border-radius:50%;background:var(--rule);color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:700;flex:none;transition:background .12s;
}
.step.on .num,.step.done .num{background:var(--accent)}

/* ---------- layout ---------- */
main{max-width:min(2000px,98vw);margin:0 auto;padding:8px 16px 90px}
/* ===== גופן תצוגה לכותרות (2.5) =====
   ⚠⚠⚠ **אריאל: "תשנה את העיצוב שיהיה אותו עיצוב בכל התוכנה".**
   מה שמייחד את העיצוב החדש הוא **שתי משפחות**: פנים-תצוגה לכותרות
   מול פנים-גוף לטקסט. עד כאן הכול היה גופן אחד בעוביים שונים,
   וכותרת נבדלה מפסקה רק ב-3 פיקסלים ובמשקל.
   ⚠ **רק על כותרות** — לא על טבלאות, לא על לוחות, לא על שדות.
   גופן שונה משנה את רוחב הטקסט, ולוח של 5×10 משבצות אינו מקום
   לנסות בו. הכותרות עומדות לבד בשורה, ולכן הן בטוחות.
   ⚠ נפילה חזרה ל-Georgia ואז לסריף של המערכת — אם הגופן לא הגיע,
   הכותרת עדיין נבדלת מהגוף.
   **הכלל: שינוי גופן נעשה במקום שבו אין לו מה לשבור.** */
:root{--display:"Frank Ruhl Libre",Georgia,"Times New Roman",serif}
h1{font-size:22px;font-family:var(--display);margin:0;letter-spacing:-.015em;font-weight:700}
h2{font-size:19px;font-family:var(--display);margin:0 0 12px;letter-spacing:-.01em;font-weight:700}
h3{font-size:15px;font-weight:700;margin:0 0 8px}
/* מחיצה בין שני חלקים של אותו מסך (מסך שאיחד שני מסכים קודמים).
   בולטת כמו כותרת, אבל אינה כותרת מסך שנייה. */
/* ⚠ הייתה 20px — בדיוק כמו h1, כלומר מחיצה בתוך מסך נראתה חשובה
   כמו כותרת המסך עצמו. הקו העליון כבר מפריד; הגודל נשאר של h2. */
h2.sectionsplit{font-size:18px;margin:28px 0 12px;padding-top:18px;border-top:2px solid var(--rule)}
/* רשימת הנושאים בראש המדריך — 24 כותרות ב-3,381 פיקסלים של גלילה */
.helptoc{background:var(--paper);border:1px solid var(--rule);border-radius:10px;
  padding:10px 12px;margin:0 0 14px;font-size:13px}
.helptoclist{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px}
.helptoclist .btn.linky{font-size:13px}
.lead{color:var(--ink-soft);margin:2px 0 8px;max-width:78ch;font-size:13px;line-height:1.4}
/* ===== ריווח נשימה (2.4) =====
   ⚠ **אריאל: "הוסף שוליים וריווחים משמעותיים בין כרטיסיות, טפסים
   וכפתורים… כדי למנוע צפיפות."**
   ⚠ העלייה מדודה ומרוסנת: 20→24 בפאנל, 16→20 ביניהם, 12→16 בין
   שדות, 14→20 בין שתי העמודות. **לא הוכפל כלום** — התוכנה מציגה
   לוחות שבועיים של 5×10 משבצות, וריווח נדיב מדי דוחף את הלוח
   מתחת לקו המסך, וזו תקלה גרועה יותר מצפיפות.
   ⚠ `.panel .panel` — פאנל בתוך פאנל אינו צריך את אותו ריפוד פעמיים. */
.panel{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:24px;margin-bottom:20px;box-shadow:var(--shadow-sm)}
.panel .panel{padding:18px;margin-bottom:14px}
.panel > h2:first-child{margin-bottom:12px}
.row{display:flex;gap:14px;flex-wrap:wrap}
/* שורת שדות צפופה — כמה שדות קצרים זה לצד זה במקום שורה רחבה לכל אחד */
.row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px;align-items:start;margin-bottom:10px}
.row2 > .field{margin-bottom:0}
.row2 .hint{font-size:11.5px}
.grow{flex:1 1 220px}
/* שדה קצר (למשל מספר) לצד שדה ארוך באותה .row — לא צריך את אותו רוחב,
   ותופס פחות מקום לפני שהשורה נשברת לשתיים במסך צר */
.growS{flex:1 1 110px}
.split{display:grid;grid-template-columns:250px minmax(0,1fr);gap:20px;align-items:start}
/* גרסה רחבה יותר לעמודה הימנית — למסכים שבהם היא נושאת טקסט הסבר
   ולא רק רשימה קצרה (למשל "סוג הבנייה") */
.split.wide{grid-template-columns:minmax(340px,0.9fr) minmax(0,1.1fr)}
/* ⚠ מסך ריק (עדיין אין מורים/תלמידים/כיתות/חדרים): הטור השני ריק, ולכן
   העמודה הצרה נשארה לבדה עם 60% מסך לבן לידה. `solo` מוותר על הטור השני
   עד שיש מה להציג בו. `injectListToggle` מדלג על `.solo` במפורש — אין
   טעם בכפתור "כיווץ הרשימה למעלה" כשאין לצד הרשימה כלום. */
.split.solo{grid-template-columns:minmax(0,1fr)}
/* בלי התקרה הזו שדה "שם החדר" נמתח על אלף פיקסלים בשביל מילה אחת */
.split.solo > .panel{max-width:640px}
@media screen and (max-width:860px){.split,.split.wide{grid-template-columns:1fr}}

/* ---------- forms ---------- */
.field{display:block;margin-bottom:16px}
.field > span{display:block;font-size:13px;color:var(--ink-soft);margin-bottom:4px}
input[type=text],input[type=number],input[type=date],input[type=email],input[type=password],input[type=search],select,textarea{
  width:100%;padding:11px 13px;border:1px solid var(--rule-strong);border-radius:var(--radius-sm);
  background:var(--surface);transition:border-color .12s,box-shadow .12s;
}
/* ⚠ שדה בטופס הוא שטח נגיעה; שדה **בתוך טבלה או לוח** הוא תא. */
input[type=text],input[type=number],input[type=date],input[type=email],input[type=password],input[type=search],select{min-height:44px}
/* ⚠⚠ **החריג הזה הוא מה שמונע מהתיקון לשבור את הלוחות.** בטבלת
   המטרות ובלוח השבועי יש שדה בכל תא; 44 פיקסלים לכל אחד היו מוסיפים
   מאות פיקסלים לגובה, והלוח כולו היה יוצא מהמסך. שם התא **הוא**
   שטח הנגיעה, והוא ממילא גדול מהשדה שבתוכו. */
table.list input,table.tt input,table.tt select,.cxgridwrap input{min-height:36px;padding:7px 9px}
textarea{min-height:88px}
input[type=text]:hover,input[type=number]:hover,input[type=search]:hover,select:hover{border-color:var(--ink-soft)}
input[type=number]{font-variant-numeric:tabular-nums;text-align:center}
.checks{display:flex;flex-wrap:wrap;gap:6px}
.checks label{
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--rule-strong);
  border-radius:999px;padding:6px 13px;font-size:13.5px;cursor:pointer;background:var(--surface);
  transition:background .12s,border-color .12s,color .12s;
}
/* ⚠ גלילה לרוחב (3.13, משוב של אריאל: "לא אוהב שצריך לגלול לרוחב").
   התווית היא inline-flex, וללא min-width:0 פריט flex אינו מתכווץ מתחת
   לרוחב התוכן שלו — ולכן תווית ארוכה ("חשבון · לא חסום (16 תלמידים
   לומדים אותו)") יצאה רחבה מהמכל ויצרה פס גלילה אופקי. זה נכון לכל
   מקום שבו .checks מסודר בעמודה, לא רק בחלון חסימת מקצוע.
   ⚠ min-width:0 על התווית עצמה הוא העיקר: פריט flex מקבל
   min-width:auto, כלומר אסור לו להצטמצם מתחת לרוחב התוכן שלו — ולכן
   הוא גלש החוצה. בלי זה overflow-x:hidden רק **חותך** את הטקסט,
   וזה גרוע מגלילה. */
/* ⚠ הגורם האמיתי לגלילה לרוחב: `.checks` הוא `flex-wrap:wrap`, וכשהוא
   מוגדר `flex-direction:column` הגלישה אינה לשורה הבאה אלא **לעמודה
   הבאה**. רשימה ארוכה מהגובה המותר נשברה לשתי עמודות שיחד רחבות
   מהחלון. כל `.checks` שמוגדר כעמודה רוצה עמודה אחת, תמיד (3.13). */
/* שם שהוא קישור לכרטיס (3.13) — במקום עמודה שלמה של כפתורי "כרטיס"
   זהים, אחד לכל תלמיד. נראה כמו טקסט; הקו התחתון מופיע בריחוף. */
.btn.linky{background:transparent;border:none;color:inherit;font:inherit;font-weight:700;
  padding:0;border-radius:4px;text-align:start;cursor:pointer}
.btn.linky:hover{background:transparent;color:var(--accent);text-decoration:underline}
.btn.linky:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* שיבוץ שאפשר לגרור אומר את זה בסמן (3.13). יש הסבר בטקסט מעל הלוח,
   אבל הסמן הוא הרמז שעובד בלי לקרוא. */
.chip[draggable="true"]{cursor:grab}
.chip[draggable="true"]:active{cursor:grabbing}
/* כותרת טבלה שלוחצים עליה (3.13) — במקום שורת כפתורים כפולה מעליה */
table.tt th.hpick{cursor:pointer;text-decoration-line:underline;text-decoration-style:dotted;
  text-underline-offset:3px}
table.tt th.hpick:hover{background:var(--accent-soft);color:var(--accent)}
table.tt th.hpick:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.checks[style*="flex-direction:column"]{flex-wrap:nowrap}
.checks label{max-width:100%;min-width:0}
.checks label>span{min-width:0;overflow-wrap:anywhere}
.checks label:hover{border-color:var(--ink-soft)}
.checks label:has(input:checked){background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
.checks input{accent-color:var(--accent)}
.hint{font-size:12.5px;color:var(--ink-soft);margin:4px 0 0}

/* ---------- buttons ---------- */
/* ===== שטח נגיעה והיררכיה (2.4) =====
   ⚠⚠⚠ **אריאל: "הפוך פעולות מרכזיות לכפתורים בולטים בצבע מלא,
   ופעולות משניות לכפתורי טקסט חיוורים יותר או מסגרת עדינה בלבד."**
   ⚠ **נמדד: כפתור רגיל 36 פיקסלים גובה, `.btn.sm` — 26.** התקן
   לשטח נגיעה הוא 44, ו-`.btn.sm` הוא **הכפתור הנפוץ ביותר בתוכנה**
   (טבלאות, כרטיסים, שורות). אצבע על טאבלט מפספסת אותו.
   ⚠ `inline-flex` ולא `inline-block`: `min-height` על כפתור עם
   `display:inline-block` **אינו ממרכז** את הטקסט, והוא נדבק למעלה.
   ⚠ שלוש הרמות: מלא (`.btn`) · מסגרת עדינה (`.btn.ghost`) · טקסט
   (`.btn.linky`). ה-`ghost` קיבל מסגרת חלשה יותר (`--rule` במקום
   `--rule-strong`), כדי שהמלא יהיה הדבר היחיד שהעין נתפסת בו.
   **הכלל: פעולה ראשית אחת במסך, והיא היחידה שצבועה.** */
.btn{
  border:1px solid var(--accent);background:var(--accent);color:#fff;
  padding:10px 18px;border-radius:var(--radius-sm);cursor:pointer;font-weight:600;
  min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  box-shadow:var(--shadow-sm);transition:filter .12s,transform .06s,box-shadow .12s;
}
.btn:hover{filter:brightness(1.09);box-shadow:var(--shadow)}
.btn:active{transform:translateY(1px);box-shadow:var(--shadow-sm)}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--rule);font-weight:500;box-shadow:none}
.btn.ghost:hover{background:#F0F3F7}
.btn.danger{background:var(--surface);color:var(--bad);border-color:#E3B9B5}
.btn.big{font-size:17px;padding:14px 32px;border-radius:9px;min-height:54px}
.btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;filter:none}
.btn:disabled:hover{filter:none;transform:none}
.btn.sm{padding:6px 13px;font-size:13px;font-weight:500;min-height:34px}
/* ⚠ בטלפון גם הקטן מגיע לתקן — שם אין עכבר להתכוון איתו */
@media (pointer:coarse){.btn.sm{min-height:40px;padding:8px 15px}.btn{min-height:46px}}
.filebtn{display:inline-block}
.filebtn > span{display:inline-block;border:1px solid var(--rule-strong);background:var(--surface);padding:8px 16px;border-radius:7px;cursor:pointer}

/* ---------- lists ---------- */
table.list{width:100%;border-collapse:collapse}
table.list th{text-align:start;font-size:12.5px;color:var(--ink-soft);font-weight:600;padding:8px 9px;
  border-bottom:1.5px solid var(--rule);letter-spacing:.01em}
table.list td{padding:9px 9px;border-bottom:1px solid var(--rule)}
table.list tr:hover td{background:#F7F9FB}
table.list tr.on td{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
table.list tr{transition:background .1s}
.empty{border:1.5px dashed var(--rule-strong);border-radius:var(--radius);padding:30px 24px;text-align:center;
  color:var(--ink-soft);background:linear-gradient(#FCFDFE,#F8FAFC)}

/* ---------- timetable ---------- */
.ttwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ttwrap table.tt{min-width:540px}
table.tt{border-collapse:collapse;width:100%;background:var(--surface);table-layout:fixed}
table.tt th,table.tt td{border:1px solid var(--rule);padding:3px;vertical-align:top}
table.tt thead th{background:linear-gradient(#F8FAFC,#EDF1F5);font-size:13px;padding:9px 4px;font-weight:700;letter-spacing:-.01em}
table.tt th.hcol{width:78px;background:#F7F9FB;font-size:12px;font-weight:600;color:var(--ink-soft);text-align:center;vertical-align:middle}
table.tt td{height:48px;font-size:12.5px;transition:background .1s}
table.tt td.pick{cursor:pointer}

/* רצועת מצב הטיוטה. אלמנט רגיל בראש התוכן ולא צף — אלמנט צף בשורה
   העליונה כבר הסתיר כאן כפתורים בעבר. הצבע שונה מכל הודעה אחרת
   באתר, כדי שיהיה ברור במבט אחד שהמצב הנוכחי אינו הרגיל. */
.draftbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--lock-soft);border:1px solid var(--lock);
  border-inline-start:5px solid var(--lock);
  border-radius:var(--radius);padding:12px 16px;margin-bottom:16px;
}
.draftbar b{color:var(--lock)}

/* רצועת תמיכה מרחוק (3.21). בכוונה position:fixed בתחתית המסך, בניגוד
   ל-.draftbar ול-.trialbar שלמעלה: שתיהן נשארות בזרימת העמוד כדי לא
   לכסות תוכן, אבל כאן סעיף 2.2 במפורש דורש רצועה "שלא ניתן להסתיר" —
   מרווח תחתון קבוע (body.remoteSupportOn) שומר שהיא לא תכסה שום דבר. */
/* ⚠ 3.31: היה פס ברוחב מלא בתחתית המסך. אריאל: "לא צריך כזה פס גדול,
   אפשר משהו יותר קטן בצד שלא מפריע" — עכשיו תגית קומפקטית בפינה.
   היא עדיין position:fixed ולא ניתנת להסתרה, ו"סיום" עדיין תמיד לחיץ
   ומעל שכבת הנעילה (z-index 75 > 70) — אלה דרישות הגנה, לא עיצוב. */
.remotebar{
  position:fixed;inset-inline-start:14px;bottom:14px;z-index:75;
  display:inline-flex;align-items:center;gap:9px;
  background:var(--warn-soft);border:1.5px solid var(--warn);
  border-radius:999px;box-shadow:var(--shadow);
  padding:6px 8px 6px 14px;font-size:12.5px;color:var(--ink);
  max-width:calc(100vw - 28px);
}
.remotebar b{color:var(--warn)}
.remotebar code{font-family:monospace;font-size:14px;letter-spacing:.04em;
  background:rgba(0,0,0,.06);padding:2px 8px;border-radius:6px}
.remotebar button{flex:none}
@media print{.remotebar{display:none}}
/* מצב ניסיון (2.2): "הרצועה הופכת לכחולה" — אותה רצועה, קלאס נוסף */
.remotebar.trial{background:var(--trial-soft);border-color:var(--trial)}
.remotebar.trial b{color:var(--trial)}
.remotebar.locked{background:var(--lock-soft);border-color:var(--lock)}
.remotebar.locked b{color:var(--lock)}
body.remoteSupportOn .applayout{padding-bottom:64px}

/* שלב 4: נעילה (2.6), "סמן לו" (2.5), וסמן העכבר של המפתח (3.4).
   סדר השכבות (z-index) חשוב: .remotebar (75) חייב להישאר מעל הנעילה
   כדי שכפתור "סיום" יישאר לחיץ תמיד, גם כשנעול. */
/* ⚠ 3.31: הייתה שכבה אפורה שכיסתה את המסך. היא חוסמת לחיצות — וזו
   המטרה — אבל היא גם הסתירה את מה שאני עושה, וזה בדיוק מה שהם צריכים
   לראות. עכשיו שקופה: חוסמת בדיוק כמו קודם, מראה הכול. החיווי
   "אריאל עובד כרגע" עבר לתגית .remotebar. */
.remotelock{
  position:fixed;inset:0;z-index:70;
  background:transparent;cursor:not-allowed;
}
@media print{.remotelock{display:none}}
/* pointer-events:none בכוונה — זו רק הדגשה, "התוכנה לא לוחצת במקומם".
   ה-box-shadow הענק מעמעם את שאר המסך סביב האלמנט המודגש. */
.remotemark{
  position:fixed;z-index:72;pointer-events:none;
  border:3px solid var(--warn);border-radius:6px;
  box-shadow:0 0 0 3000px rgba(0,0,0,.08);
  animation:remoteMarkPulse 1s ease-in-out infinite;
}
.remotemark span{
  position:absolute;top:-30px;right:0;
  background:var(--warn);color:#fff;font-size:12px;font-weight:700;
  padding:3px 9px;border-radius:6px;white-space:nowrap;
}
@keyframes remoteMarkPulse{0%,100%{opacity:1}50%{opacity:.4}}
@media print{.remotemark{display:none}}
/* ⚠⚠ **נקודת הייחוס.** נקודה עגולה ממורכזת על הקואורדינטה, אבל חץ
   מצביע מהקצה העליון-שמאלי שלו — בדיוק כמו סמן אמיתי. `translate`
   הוסר, ולכן קצה החץ נוחת על הנקודה שאריאל מצביע עליה. */
/* ⚠ הסמן המהבהב של השדה דק בפיקסל אחד, מהבהב, ובלשונית שאינה בחזית
   אינו מצויר כלל — כלומר אינו שורד את השיתוף. זה התחליף שלו: עבה,
   ובכוונה **לא מהבהב**. הוא מסמן **לאן התו הבא ייכנס**, ואינו העכבר
   — ולכן הוא נשאר גם אחרי שהחץ הרודף ירד. */
.remotecaret{
  position:fixed;width:3px;z-index:75;pointer-events:none;
  background:var(--warn);border-radius:2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.9),0 1px 4px rgba(0,0,0,.35);
}
@media print{.remotecaret{display:none}}
/* ⚠ החץ הרודף הוסר ב-3.56 — ראו `remoteClickPulse`. מה שנשאר הוא
   טבעת קצרה במקום שנלחץ: בית הספר רואה איפה נגעו, ואין חץ שני
   שרודף אחרי העכבר של אריאל וחוזר אליו בווידאו. */
.remotepulse{position:fixed;z-index:2147483000;width:34px;height:34px;margin:-17px 0 0 -17px;
  border-radius:50%;border:3px solid var(--warn);background:rgba(217,119,6,.18);
  pointer-events:none;animation:rspulse .9s ease-out forwards}
@keyframes rspulse{
  0%{transform:scale(.35);opacity:0}
  25%{transform:scale(1);opacity:1}
  100%{transform:scale(1.5);opacity:0}
}
@media (prefers-reduced-motion:reduce){.remotepulse{animation:none;opacity:.9}}
@media print{.remotepulse{display:none}}
/* ===== מסך מלא לתצוגת התמיכה =====
   ⚠⚠ **3.32–3.33: רק תיבת התמונה עברה למסך מלא.** התוצאה הייתה
   שכל הכפתורים — גלילה, Enter, Escape, סימון, נעילה, ההקלדה — וגם
   שורת הזמן והחיווי נשארו מחוץ למסך. אריאל: "שזה יופיע לי גם כשאני
   במסך מלא בשיתוף". מסך מלא בלי שליטה הוא צפייה, לא תמיכה.
   מ-3.34 האלמנט שעובר למסך מלא הוא `#rsFullBox`, שמכיל את שלושתם:
   שורת מצב למעלה · התמונה באמצע · השליטה למטה. */
/* ⚠⚠ **הכול חייב להיכנס לחלון אחד.** נמדד לפני התיקון: מסך התמיכה
   היה גבוה מהחלון ב-525px עם תיבה ריקה, וכ-800px עם תמונה 16:9
   ברוחב מלא. אריאל גלל למטה כדי לראות את המסך שלהם — והכפתורים,
   שדה ההקלדה ושורת המצב נשארו מחוץ לחלון. משם באו שלוש התלונות:
   *"לא רואים כל מה שכתוב"*, *"אני גם לא יכול להקליד"*,
   *"גם גלילה לא עובדת"*.
   ⚠ הניסיון הראשון היה קבוע: `100vh` פחות 330px משוערים. הוא החטיא
   ב-122px — שורת ההודעה נשארה מתחת לקו. **קבוע כזה שוגה בכל שינוי
   של ניסוח, גופן או רוחב חלון.** במקומו: העטיפה היא עמודת flex
   שגובהה נמדד ב-`rsFitHeight()`, והתיבה לוקחת בדיוק את מה שנשאר.
   הפקדים תמיד על המסך, בכל גודל חלון. */
#rsFullBox{display:flex;flex-direction:column;gap:8px}
#rsFullBox>*{flex:0 0 auto;margin:0}
/* ⚠ `min-height:0` חובה — בלי זה פריט flex לא מתכווץ מתחת לתוכנו,
   והתמונה הייתה דוחפת את הכפתורים אל מחוץ למסך. */
#rsFullBox #rsStage{flex:1 1 auto;min-height:140px}
/* ⚠⚠ אחוזים ב-`max-height` של הילד אינם נפתרים מול הורה בלי גובה
   מוגדר — הכלל מתבטל בשקט. נמדד: התיבה 438px והתמונה 528px, חורגת.
   כפריט flex עם גובה שנקבע בפריסה, `max-height:100%` כן נפתר. */
/* ⚠⚠ **"לא תיקנת את כל השחור".** נמדד על הצילום של אריאל: הזרם
   ביחס 2.07, התיבה ביחס 2.49 — ולכן 320px שחור משני הצדדים. זו
   גאומטריה, לא באג: תמונה שומרת יחס. הדרך היחידה לצמצם אותו היא
   **לתת לתמונה יותר גובה**, ובמסך מלא 259px מתוך 1021 הלכו לשורת
   המצב ולכפתורים.
   לכן במסך מלא הם **צפים מעל** התמונה במקום לגזול ממנה: התיבה
   מקבלת את כל 100vh, ולפי אותן מידות הווידאו גדל מ-1580x762
   ל-1900x918 — כלומר כמעט כל הרוחב.
   הם חצי-שקופים ומתמלאים במגע, כדי שלא יסתירו תוכן כשלא צריך. */
#rsFullBox:fullscreen{
  background:#000;position:relative;
  width:100vw;height:100vh;padding:0;gap:0;display:block;
}
#rsFullBox:fullscreen #rsStage{
  /* ⚠ המיקום המדויק נקבע ב-rsFitHeight לפי הגובה האמיתי של
     הפקדים הצפים — ראו ההערה שם. כאן רק ברירת המחדל. */
  position:absolute;top:44px;bottom:56px;left:10px;right:10px;
  border:none;border-radius:8px;background:#000;margin:0;
}
#rsFullBox:fullscreen>.hint,
#rsFullBox:fullscreen #rsCtl{
  position:absolute;left:0;right:0;z-index:3;margin:0;
  padding:4px 12px;background:rgba(255,255,255,.72);
  backdrop-filter:blur(8px);opacity:.55;transition:opacity .15s;
}
#rsFullBox:fullscreen>.hint{top:0}
#rsFullBox:fullscreen #rsCtl{bottom:0}
#rsFullBox:fullscreen>.hint:hover,
#rsFullBox:fullscreen #rsCtl:hover{opacity:1}
/* ⚠ הריפוד של השורות בתוך העטיפה הצפה כבר נספר למעלה */
#rsFullBox:fullscreen #rsCtl .row{margin-top:4px}
/* ⚠ במסך מלא נשארים רק גודל · סמן לו · ביטול פעולה. הגלילה עובדת
   בגלגל ו-Enter/Escape במקלדת, ולכן הכפתורים שלהם הם גיבוי בלבד. */
#rsFullBox:fullscreen .rssec{display:none}
#rsFullBox:fullscreen #rsShot,
/* הווידאו החי (3.33) מקבל בדיוק את אותו טיפול — ראו rsRelPos
   ב-admin.js: המיפוי כבר מחשב את תיבת התוכן, ולכן object-fit בטוח כאן. */
#rsFullBox:fullscreen #rsVideo{
  width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;
}
/* ⚠ במצב רגיל הרקע השחור מסביב לתמונה הוא עצמו "שטח מבוזבז" שאריאל
   רואה. רקע הדף במקומו — מה שנשאר קורא כפריסה, לא כחור. */
#rsFullBox #rsStage{background:var(--bg)}
#rsFullBox:fullscreen #rsStage{background:#000}
/* ⚠⚠ סימון השדה שאליו ההקלדה תיכנס — גם המזכירה רואה במה נוגעים. */
.remoteTypeHere{
  outline:2px solid var(--warn)!important;outline-offset:1px;
  box-shadow:0 0 0 4px rgba(217,119,6,.18)!important;
}


/* ===================== הארת זמנים משותפים =====================
   כשנבחר תלמיד במסך השיבוץ הידני, הלוח מתחלק לשניים: מואר איפה שאפשר
   לשבץ אותו, ומעומעם בשאר. העמעום הוא הסימן העיקרי — הוא עובד גם למי
   שאינו מבחין בין גוונים — והמסגרת הירוקה מוסיפה עליו. */
/* ===== למה לא שקיפות =====
   עד 2.40 משבצת חסומה קיבלה opacity:.28, והשקיפות החווירה גם את הרקע
   האדום עצמו — התוצאה הייתה לוח אפור שבו הצבע פשוט לא נראה, למרות
   שהקוד "צבע" אותו. כאן הצבע הוא רקע ממשי, והעמעום נעשה על הטקסט
   בלבד. הסימן (👤 ✕ 🔒) נשאר בעוצמה מלאה, כי הוא נושא את המידע. */
table.tt td.ov-ok{
  background:var(--accent-soft)!important;
  box-shadow:inset 0 0 0 2px var(--accent);
}
table.tt td.ov-no{
  background:var(--bad-soft)!important;
  position:relative;
}
table.tt td.ov-no .chip,table.tt td.ov-no > span:not(.pin){opacity:.45}
table.tt td.ov-no:hover{background:rgba(163,43,34,0.18)!important}
table.tt td.ov-no:hover{background:color-mix(in srgb,var(--bad) 18%,transparent)!important}
table.tt td.ov-no:hover .chip{opacity:.8}
/* הסימן מציג איזה סוג חסימה זו — מורה תפוס, תלמיד תפוס, שעה אסורה —
   כדי שאפשר יהיה לקרוא את מפת החסימות במבט אחד. */
table.tt td.ov-no[data-ovicon]::after{
  content:attr(data-ovicon);
  position:absolute;inset-inline-end:3px;top:2px;
  font-size:11px;line-height:1;opacity:.9;pointer-events:none;
}

/* ===================== חיווי בזמן גרירה =====================
   בזמן שגוררים שיבוץ, הלוח נצבע: ירוק במשבצות שבהן ההנחה תעבוד, אדום
   בשאר. קודם הגרירה הייתה עיוורת לחלוטין — רק אחרי השחרור התברר אם
   המשבצת חסומה, ולמה.
   הצבע אינו הסימן היחיד: למשבצת חסומה יש גם קווים אלכסוניים, ולמשבצת
   פנויה מסגרת מודגשת, כדי שגם מי שאינו מבחין בין אדום לירוק יראה את
   ההבדל. הסיבה המדויקת מופיעה בריחוף. */
table.tt td.drop-ok{
  background:var(--accent-soft);
  box-shadow:inset 0 0 0 2px var(--accent);
}
table.tt td.drop-no{
  background:var(--bad-soft);
  background-image:repeating-linear-gradient(45deg,
    transparent 0 5px, rgba(163,43,34,.13) 5px 10px);
  cursor:not-allowed;
}
/* משבצת שההנחה עליה **פותחת שאלה** ולא מבצעת — שורה של תלמיד אחר
   שיש לו שם שיעור. אינה ירוקה (ההחלפה עשויה לשבור מגבלה) ואינה
   אדומה (אין כאן איסור): מסגרת מודגשת בלי מילוי, והסיבה בריחוף. */
table.tt td.drop-swap{
  background:var(--paper);
  box-shadow:inset 0 0 0 2px var(--accent);
  background-image:repeating-linear-gradient(-45deg,
    transparent 0 6px, rgba(21,94,79,.10) 6px 12px);
}
/* המשבצת שממנה גוררים — לא מותר ולא אסור, פשוט המקום הנוכחי.
   נשען על משתני הערכה כדי שיעבוד גם במצב כהה. */
table.tt td.drop-from{
  background:var(--paper);
  box-shadow:inset 0 0 0 2px var(--rule-strong);
  opacity:.7;
}
@media (prefers-reduced-motion:reduce){
  table.tt td{transition:none}
}
table.tt td.pick:hover{background:#F0F6F4;box-shadow:inset 0 0 0 2px var(--accent)}
/* סמן פוקוס לניווט מקלדת בלבד — לא מופיע בלחיצת עכבר או מגע */
table.tt td.pick:focus{outline:none}
table.tt td.pick:focus-visible{outline:2px solid transparent;outline-offset:-2px;box-shadow:inset 0 0 0 3px var(--accent)}
.chip:focus{outline:none}
.chip:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 3px var(--accent)}
td.off{background:repeating-linear-gradient(45deg,#F1F3F6,#F1F3F6 5px,#E7EAEF 5px,#E7EAEF 10px)}
td.blocked{background:var(--bad-soft)}
td.free{background:var(--surface)}
.subj{display:block;font-size:11px;color:var(--ink-soft);text-align:center;padding-top:2px}
.chip{
  display:block;border-radius:6px;padding:4px 7px;margin-bottom:3px;font-size:12.5px;
  border-inline-start:3px solid rgba(0,0,0,.25);line-height:1.3;
  word-break:break-word;max-width:100%;transition:transform .08s,box-shadow .08s;
}
/* ⚠ באג שאריאל צילם: בשורה שבה משבצת אחת מחזיקה שני שיבוצים, כל שאר
   המשבצות באותה שורה נמתחות לאותו גובה — ובמשבצת עם שיבוץ אחד נשאר שטח
   לבן מתחתיו. לחיצה עליו נראית כמו לחיצה על משבצת ריקה. **נמדד: 24
   פיקסלים לבנים מתחת לשיבוץ בודד; אחרי התיקון 7, שהם הריפוד של התא
   עצמו.** (נמדד במסך "יום שלם", שיבוץ בודד בתא שנמתח בגלל שכן בשורה.) */
table.tt td > .chip:only-child{height:100%;box-sizing:border-box;margin-bottom:0}
.chip:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.chip b{display:block;font-weight:700;overflow:hidden;text-overflow:ellipsis}
.chip em{font-style:normal;font-size:11px;opacity:.8}
/* בכרטיס של המורה כל פרט יושב בשורה משלו, אחרת הטקסטים נדבקים זה לזה */
.chip.chiplines em{display:block;margin-top:2px;line-height:1.35}
.chip .goaladd{opacity:.55;font-size:10.5px}
/* ⚠ הסימנים היו 11 פיקסלים בלי שטח נגיעה — ריחוף מדויק במחשב,
   ובמסך מגע בלתי אפשרי. הריפוד מגדיל את השטח בלי לשנות את הגודל
   הנראה, ו-cursor:help אומר שיש כאן הסבר. */
.chip .pin{float:inline-start;font-size:11px;padding:2px 3px;margin:-2px -1px;cursor:help}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-soft);margin-top:8px}
.legend i{display:inline-block;width:14px;height:14px;border:1px solid var(--rule-strong);border-radius:3px;vertical-align:-2px;margin-inline-end:5px}

/* ---------- metrics & alerts ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:16px 18px;
  box-shadow:var(--shadow-sm);transition:transform .12s,box-shadow .12s}
.card:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.card b{display:block;font-size:30px;line-height:1.15;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* ===== .card נועד לכרטיס מספר, ושימשו בו גם כרטיסי החלופות (3.20) =====
   ⚠ אריאל צירף צילום: "ההבדל מחלופה א:" מודפס בענק, ומתחתיו ההבדל עצמו
   בזעיר. הסיבה אינה ב-HTML — שם נכתב `font-size:12.5px` על העוטף — אלא
   כאן: הכלל שמעליי הופך **כל** `<b>` בתוך `.card` למספר של 30 פיקסלים,
   והוא חל על האלמנט עצמו ולכן גובר על גודל הגופן של ההורה.
   כרטיס חלופה אינו כרטיס מספר. `.altcard` מחזיר בתוכו את ה-`<b>` להיות
   מה שהוא — הדגשה בתוך משפט.
   **הכלל: כלל שנכתב לרכיב אחד חל על כל מי שמשתמש בשם שלו.** */
.altcard b{display:inline;font-size:inherit;line-height:inherit;letter-spacing:normal}
.card span{font-size:13px;color:var(--ink-soft);display:block;margin-top:2px}
.card.good b{color:var(--accent)}
.card.bad b{color:var(--bad)}
.alert{border-inline-start:4px solid var(--rule-strong);background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:9px;font-size:14px;line-height:1.55}
.alert.err{border-inline-start-color:var(--bad);background:var(--bad-soft)}
.alert.warn{border-inline-start-color:var(--warn);background:var(--warn-soft)}
.alert.ok{border-inline-start-color:var(--accent);background:var(--accent-soft)}
.bar{height:8px;background:var(--rule);border-radius:99px;overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:var(--accent)}
.bar i.over{background:var(--bad)}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tab{border:1px solid var(--rule-strong);background:var(--surface);border-radius:999px;padding:6px 15px;cursor:pointer;font-size:14px}
.tab.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- modal & toast ---------- */
.mask{position:fixed;inset:0;background:rgba(22,35,58,.5);display:grid;place-items:center;z-index:60;padding:16px;
  backdrop-filter:blur(2px);animation:fade .14s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{position:relative;background:var(--surface);border-radius:16px;max-width:620px;width:100%;max-height:86vh;overflow:auto;padding:24px;
  box-shadow:var(--shadow-lg);animation:pop .16s ease-out}
.modal:focus{outline:none}
@keyframes pop{from{opacity:0;transform:scale(.97) translateY(8px)}to{opacity:1;transform:none}}
.modal h3{margin-top:0;padding-inline-end:34px}   /* מקום ל-✕ — ראו `.modalx` */
/* ===== ✕ בכל חלון (2.0) =====
   ⚠⚠⚠ **אריאל: "למה אין לי איך לסגור את זה?"** ראו ההערה המלאה
   ב-`modal()` ב-utils.js. כאן רק המראה.
   ⚠ **בצד ה-inline-end — כלומר משמאל בעברית**, כי הכותרת יושבת
   מימין. `position:absolute` בתוך חלון שגולל (`overflow:auto`)
   אומר שה-✕ נשאר בראש **התוכן** ולא בראש המסך — וזה הנכון: הוא
   ליד הכותרת, שם מחפשים אותו.
   ⚠ 34×34 ולא 22 — זהו שטח נגיעה לאצבע, ראו "תיבות הסימון בטלפון". */
.modalx{position:absolute;top:10px;inset-inline-end:10px;width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:10px;background:transparent;color:var(--ink-soft);
  font-size:18px;line-height:1;cursor:pointer;padding:0;z-index:2}
.modalx:hover{background:var(--line);color:var(--ink)}
.modalx:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* שורת הפעולות: קו מפריד ורקע קל, כדי שהעין תדע איפה נגמר התוכן
   ומתחילה ההחלטה. הכפתור הראשי ראשון ובולט — הוא מה שרוב האנשים
   רוצים ללחוץ. */
/* ===== שורת הפעולות נדבקת לתחתית החלון (3.20) =====
   ⚠ אריאל צירף צילום של חלון "שיבוץ מורה כאן" וכתב "שלא יצטרכו לגלגל
   למטה — הכי מצד שמאל, בגדול". החלון גולל (`max-height:86vh;overflow:auto`)
   ושורת הפעולות גללה איתו, ולכן בחלון עם שישה מורים ושלושה הסברים
   כפתור "סגירה" יצא מהמסך — וחלון בלי דרך גלויה החוצה הוא מלכודת.
   `position:sticky` עם `bottom:0` משאיר אותה במקום בלי לשנות שום דבר
   אחר: היא עדיין חלק מהזרימה, ובחלון קצר היא יושבת בדיוק איפה שישבה.
   **הכלל: הדרך החוצה מחלון נראית תמיד, בלי גלילה.** */
.modal .foot{
  display:flex;gap:8px;justify-content:flex-start;flex-wrap:wrap;
  position:sticky;bottom:-24px;z-index:2;
  margin:20px -24px -24px;padding:16px 24px;
  border-top:1px solid var(--rule);background:var(--paper);
  border-radius:0 0 16px 16px;
}
.modal h3{font-size:19px;line-height:1.35;margin:0 0 12px}
.modal .alert:last-of-type{margin-bottom:0}
/* חלון אישור להרס: הכפתור המאשר אדום, כדי שלא ילחצו בטעות */
.modal .btn.danger{
  background:var(--bad);color:#fff;border-color:var(--bad);font-weight:600;
}
.modal .btn.danger:hover{filter:brightness(1.08)}
.opt{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--rule);border-radius:8px;padding:8px 10px;margin-bottom:6px}
.opt.no{background:#FAFAFB;color:var(--ink-soft)}
/* אותה תקלה כמו ב-.checks label: בלי min-width:0 פריט flex אינו מתכווץ
   מתחת לרוחב התוכן, ושם ארוך יוצר גלילה לרוחב בחלון השיבוץ (3.13) */
.opt>span{min-width:0;overflow-wrap:anywhere}
.prpick label{max-width:100%;overflow-wrap:anywhere}
/* ⚠ אותה תקלה כמו ב-details ו-.wcard.done: רקע לבן קבוע בלי מקבילה
   כהה. `.opt.no` היא השורה של מורה חסום **בחלון השיבוץ הידני**, ולכן
   במצב כהה כל מורה שאי אפשר לשבץ אצלו הופיע כקופסה לבנה עם טקסט בהיר
   (ניגודיות ~2.1) — בדיוק החלון שבו צריך לקרוא את הסיבה (3.13). */
[data-theme="dark"] .opt.no{background:#161F2B}
.opt .why{font-size:12px}
/* ⚠ שורת הנעילה המכווצת. `details` הרגיל הוא קופסה ברוחב מלא עם
   מסגרת וריפוד — כאן צריך בדיוק ההפך: כפתור קטן שיושב בשורה.
   ⚠ `list-style:none` **וגם** הכלל של webkit — בלי שניהם נשאר משולש
   ברירת המחדל בתוך הכפתור. */
.lockbar{display:block;border:none;background:none;padding:0;margin:0 0 10px}
.lockbar:hover{border-color:transparent}
.lockbar>summary{display:inline-flex;align-items:center;gap:6px;width:auto;list-style:none}
.lockbar>summary::-webkit-details-marker{display:none}
.lockbar>summary::marker{content:''}
.lockbar>summary .hint{font-size:12px}
#toast{position:fixed;bottom:20px;inset-inline-start:20px;z-index:80;display:flex;flex-direction:column;gap:8px}
.toastmsg{background:var(--ink);color:#fff;padding:12px 18px;border-radius:10px;font-size:14px;
  box-shadow:var(--shadow-lg);animation:slideup .2s ease-out}
@keyframes slideup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- guide ---------- */
ol.guide{counter-reset:g;list-style:none;padding:0;margin:0}
ol.guide li{counter-increment:g;position:relative;padding:0 44px 16px 0;border-inline-start:none}
ol.guide li::before{
  content:counter(g);position:absolute;inset-inline-start:auto;right:0;top:0;
  width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:14px;
}
ol.guide li b{display:block}
ol.guide li p{margin:2px 0 0;color:var(--ink-soft);font-size:14px}

/* ⚠ הרקע של אקורדיון **סגור** היה קבוע ‎#FBFCFD‎ — לבן — בעוד שהמצב
   הפתוח קיבל var(--surface). במצב כהה כל אקורדיון סגור בתוכנה צויר
   כקופסה לבנה עם טקסט בהיר עליה: יחס ניגודיות 2.16, כלומר טקסט שקשה
   לקרוא. בכרטיס התלמיד לבדו יש שישה כאלה. מישהו צבע את המצב הפתוח
   ושכח את הסגור (3.13). מ-3.13 האקורדיון הוא גם הכלי המרכזי לצמצום
   העומס, ולכן זה נגע בכל התוכנה. */
/* ⚠⚠⚠ **(2.5) זו השורה שבעיצוב** — "שורה אחת לכל הגדרה, עם הערך
   הנוכחי כתוב בתוכה, שנפתחת בלחיצה". ב-`<details>` התוכנה כבר
   משתמשת בעשרות מקומות, ולכן שינוי כאן **מחיל את העיצוב על כל
   התוכנה בבת אחת** ולא על מסך אחד.
   ⚠ הריפוד עבר ל-`summary` ולא נשאר על `details`: כך שורת ההגדרה
   היא שטח הנגיעה כולו (56 פיקסלים), ולא רק המילים שבתוכה. התוכן
   שמתחת מקבל את הריפוד שלו בנפרד.
   ⚠ `list-style:none` + חץ משלנו: המשולש של הדפדפן יושב בצד
   השגוי ב-RTL בחלק מהדפדפנים, ולא ניתן לעיצוב.
   ⚠ `.lockbar>summary`, `.fsrow>summary` ו-`.planfold>summary`
   גוברים על הכללים כאן (מחלקה + אלמנט), וממשיכים כמו שהיו. */
details{border:1px solid var(--rule);border-radius:12px;padding:0;margin-bottom:14px;
  background:var(--surface);transition:border-color .12s,box-shadow .12s}
details:hover{border-color:var(--rule-strong);box-shadow:var(--shadow-sm)}
details[open]{background:var(--surface)}
details[open]>summary{border-bottom:1px solid var(--rule)}
details>summary{padding:16px 18px;min-height:56px;box-sizing:border-box}
details>*:not(summary){padding:0 18px}
details>*:last-child:not(summary){padding-bottom:16px}
/* ‎#FBFCFD‎ יושב בין ‎--paper‎ (‎#F4F6F8‎) ל‎--surface‎ (לבן) — אקורדיון סגור
   מעט כהה מהפתוח. ‎#141C27‎ הוא אותו יחס בדיוק במצב הכהה, בין ‎#0B121C‎
   ל‎#1C2836‎. בלי השורה הזאת המצב הכהה ירש את הלבן. */
[data-theme="dark"] details{background:#141C27}
summary{cursor:pointer;font-weight:700;color:var(--ink);user-select:none;padding:2px 0;
  display:flex;align-items:center;gap:10px;list-style:none;font-size:15px}
summary::-webkit-details-marker{display:none}
summary::marker{content:""}
/* ⚠ השורה הזאת היא מה שהופך אותה לשורה: הטקסט נדחף שמאלה והחץ
   מקבל את הקצה, בדיוק כמו כפתור "שינוי" בעיצוב. */
summary::after{content:"";margin-inline-start:auto;width:9px;height:9px;flex:none;
  border-inline-start:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);
  transform:rotate(45deg);transition:transform .15s}
details[open]>summary::after{transform:rotate(-135deg)}
summary:hover{color:var(--accent)}
summary:hover::after{border-color:var(--accent)}
/* ⚠ שורת מצב אפורה — הצורה נשארת, הצבע והמשקל של "ערך נוכחי" */
summary.hint{font-weight:600;color:var(--ink-soft);font-size:13.5px}
details > *:first-child + *{margin-top:14px}
.wizard{display:flex;flex-direction:column;gap:14px}
.wcard{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:20px;
  position:relative;box-shadow:var(--shadow-sm);transition:box-shadow .15s,border-color .15s}
.wcard.done{border-color:var(--accent);background:#FBFDFC}
/* אותה תקלה כמו ב-details: ‎#FBFDFC‎ הוא לבן עם גוון ירקרק, והוא נשאר
   לבן גם במצב כהה — כלומר כל צעד שהושלם ב"התחלה מהירה" הפך לקופסה
   לבנה עם טקסט בהיר (ניגודיות 2.17). ‎#16251F‎ הוא אותו גוון ירקרק
   על כהה (3.13). */
[data-theme="dark"] .wcard.done{background:#16251F}
.wcard.now{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,111,98,.1),var(--shadow)}
.wcard h2{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.wnum{width:28px;height:28px;border-radius:50%;background:var(--rule);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700;flex:none}
.wcard.done .wnum,.wcard.now .wnum{background:var(--accent)}
/* במצב כהה var(--accent) הוא ירוק בהיר (‎#4FB89C‎), ולבן עליו נותן
   ניגודיות 2.42 — הספרה בעיגול כמעט נבלעת. דיו כהה עליו נותן ~7 (3.13). */
[data-theme="dark"] .wcard.done .wnum,[data-theme="dark"] .wcard.now .wnum{color:#0B121C}
.wcard.done .wnum::after{content:'✓'}
.wcard.done .wnum span{display:none}
.wsub{color:var(--ink-soft);font-size:14px;margin:0 0 12px}
.pill{display:inline-block;background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:2px 10px;font-size:13px;margin:0 0 4px 4px}
/* שבב שהוא כפתור (3.20): אותו מראה בדיוק, בלי המסגרת והגופן שהדפדפן
   נותן ל-button. הסמן והמסגרת בפוקוס הם ההבדל היחיד — ומי שמנווט
   במקלדת חייב אותם. */
button.pill{border:none;font-family:inherit;font-size:13px;cursor:pointer;line-height:inherit}
button.pill:hover{background:var(--accent);color:#fff}
button.pill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.optional{font-size:12px;color:var(--ink-soft);font-weight:400}
progress{width:100%;height:10px;border-radius:999px;overflow:hidden;border:none;background:var(--rule)}
progress::-webkit-progress-bar{background:var(--rule);border-radius:999px}
progress::-webkit-progress-value{background:var(--accent);border-radius:999px;transition:width .2s}
progress::-moz-progress-bar{background:var(--accent);border-radius:999px}
.mono{font-variant-numeric:tabular-nums}
.log{background:#0F1A2B;color:#CFE3DC;border-radius:8px;padding:12px;font-size:12.5px;max-height:180px;overflow:auto;white-space:pre-wrap;direction:rtl}

#printArea{display:none}
/* ברירת מחדל: A4 לרוחב עם שוליים של 10 מ"מ (שטח מודפס 277×190 מ"מ).
   מסכים שמתאימים יותר לאורך — דוח סיכום ותמונת מצב — מחליפים את הכלל
   הזה דרך תגית סגנון שמוזרקת רגע לפני ההדפסה. */
@page{size:A4 landscape;margin:10mm}
@media print{
  #printArea{display:block}
  #printArea h1{font-size:19px;margin:0 0 10px}
  #printArea h2{font-size:16px;margin:0 0 2px}
  #printArea .prsub{font-size:12px;color:#5A6A81;margin:0 0 8px}
  main,#toast,#modalRoot{display:none !important}
  .topbar,.steps,.noprint{display:none !important}
  body{background:#fff}
  main{max-width:none;padding:0}
  .panel{border:none;padding:0;break-inside:auto}
  table.tt{page-break-inside:auto;width:100%}
  table.tt tr{page-break-inside:avoid}
  h2{page-break-after:avoid}
  /* גובה: במסך לכל משבצת יש גובה מינימלי של 48 פיקסלים כדי שיהיה נוח
     ללחוץ. על הנייר זה רק בזבוז — שורות ריקות תפסו מקום ודחפו את
     המערכת לעמוד שני. על הנייר הגובה נקבע לפי התוכן בלבד. */
  #printArea table.tt td,#printArea table.tt th{height:auto;padding:2px 3px}
  #printArea table.tt td{font-size:11.5px}
  #printArea .chip{margin:1px 0;padding:2px 5px}
  #printArea .chip em{font-size:10px}
  /* הכותרת לא נשארת לבדה בתחתית עמוד, מנותקת מהטבלה שלה */
  #printArea .prpage h2,#printArea .prsub{page-break-after:avoid}
  /* ההדפסה יוצאת בשחור-לבן, אבל עם כל הפרטים שמופיעים במסך:
     שם התלמיד, המקצוע שממנו הוא יוצא, "לא זמין", וסימוני הנעילה. */
  #printArea .ttwrap{overflow:visible;border:none}
  #printArea *{color:#000 !important;box-shadow:none !important}
  /* ⚠⚠ **(1.2) מצב כהה + הדפסה = ריבועים שחורים.**
     השורה שמעל כופה **טקסט** שחור, אבל לא נגעה ברקע. עשרות כללים של
     מצב כהה קובעים רקע בצבע **קשיח** ולא דרך משתנה —
     `[data-theme="dark"] .opt.no{background:#161F2B}` ודומיו — ולכן
     הם שורדים את ההדפסה. התוצאה: דיו שחור על רקע כחול־אפור כהה,
     כלומר ריבוע לא קריא, ודיו מבוזבז.
     ⚠ הטבלאות כבר היו מכוסות (שלוש שורות למטה). מה שלא היה מכוסה זה
     **כל השאר**: כרטיסים, תגיות, פתקים, שורות רשימה.
     ⚠ `background` המלא ולא `background-color`: כמה מהכללים הכהים הם
     `linear-gradient`/`repeating-linear-gradient`, ורקע-תמונה אינו
     נמחק על ידי צבע.
     ⚠ הכלל חל רק על `#printArea` — מה שמוצג במסך אינו מושפע. */
  #printArea,#printArea *{background:#fff !important}
  /* ⚠ מסגרות הן המידע שנשאר אחרי שהרקע הולבן — בלעדיהן הטבלה
     מתמוססת לרשימת מילים. הן נקבעות בשורות שלמטה. */
  #printArea table.tt{background:#fff;min-width:0;width:100%;table-layout:fixed}
  #printArea table.tt td,#printArea table.tt th{word-break:break-word}
  #printArea .chip{display:block;width:auto}
  #printArea table.tt th,#printArea table.tt td{border:1px solid #666 !important;background:#fff !important}
  #printArea table.tt thead th,#printArea table.tt th.hcol{background:#fff !important;font-weight:700}
  #printArea td.off{background:#fff !important}
  #printArea .chip{
    background:#fff !important;border:1px solid #999 !important;
    border-inline-start:3px solid #333 !important;border-radius:3px;
  }
  #printArea .chip em,#printArea .subj{color:#333 !important}
  #printArea .prsub{color:#333 !important}
  /* טבלאות רשימה בהדפסה (תמונת מצב, סיכומים) — קווים דקים, בלי צבע */
  #printArea .panel{border:none;padding:0;margin-bottom:14px}
  #printArea table.list{width:100%;border-collapse:collapse;font-size:12px}
  #printArea table.list th{border-bottom:1.5px solid #333;padding:5px 6px;text-align:start}
  #printArea table.list td{border-bottom:1px solid #999;padding:5px 6px;vertical-align:top}
  #printArea table.list tr{page-break-inside:avoid}
  /* כותרת "לפי מורה" לא נשארת לבדה בסוף עמוד */
  #printArea .panel h2{page-break-after:avoid}
  /* שורה של תלמיד עם הרבה מורים לא נחתכת באמצע בין שני עמודים */
  #printArea table.list td{page-break-inside:avoid}
  #printArea .cards{display:none}
  /* כל מורה וכל תלמיד בעמוד נפרד */
  #printArea .prpage{page-break-after:always;break-after:page}
  #printArea .prpage:last-child{page-break-after:auto;break-after:auto}
  /* הכפתורים שמוטמעים בתוך המשבצות אינם רלוונטיים על הנייר */
  #printArea .repdot,#printArea .pin{display:none}
}
/* ---------- תפריט צד (מסכים רחבים בלבד) ----------
   מעל 1100px הניווט עובר לרשימה אנכית בצד ימין, מקובצת לפי נושא.
   מתחת לזה — נשארת שורת הלשוניות האופקית הרגילה, שעובדת טוב בצר ובטלפון. */
.sidenav{display:none}
/* ⚠ כפתור מת: `.navshow` עוצב **רק בתוך** `@media(min-width:1101px)`, ושם
   גם `display:none`. מתחת ל-1101 לא חל עליו שום כלל — ולכן הוא הופיע
   ככפתור ברירת מחדל של הדפדפן (נמדד: 79×27 בטלפון), והלחיצה עליו לא
   עשתה כלום, כי היא רק מסירה `navcollapsed` ותפריט הצד מוסתר ממילא.
   הוא שייך אך ורק למסך שיש בו תפריט צד. */
.navshow{display:none}
.navbackdrop{display:none}
/* ===== מגירת הניווט בטלפון (3.16, באישור אריאל) =====
   הרצועה האופקית הייתה 1,873 פיקסלים בחלון של 375 — 16 פריטים בגלילה
   לרוחב, בלי קיבוץ. עכשיו כפתור אחד שנושא את שם המסך הנוכחי, ופותח את
   **אותה רשימה מקובצת** שיש במחשב. אין כאן ניווט שני: `renderSideNav()`
   בונה את שניהם. */
@media (max-width:1100px){
  /* רק למנהל המערכת — לשאר התפקידים אין תפריט צד, ואצלם הרצועה נשארת */
  body:not(.nosidenav):not(.gated) .steps{display:none}
  body:not(.nosidenav):not(.gated) .navshow{
    display:flex;align-items:center;gap:7px;width:calc(100% - 20px);margin:0 10px 8px;
    border:1px solid var(--rule-strong);background:var(--surface);cursor:pointer;
    font-family:inherit;font-size:14px;font-weight:700;color:var(--ink);
    padding:10px 12px;border-radius:9px;text-align:start;
  }
  body.navopen .navbackdrop{
    display:block;position:fixed;inset:0;z-index:58;background:rgba(15,23,35,.45);
  }
  body.navopen .sidenav{
    /* ⚠ נפתחת מהצד שבו יושב הכפתור — הצד הימני. **`inset-inline-start`
       נתן כאן שמאל בשתי הגרסאות** (אלמנט `fixed` נשען על אזור התצוגה,
       וה-direction לא הגיע אליו כמצופה), ולכן `right` פיזי: התוכנה
       עברית בלבד, ואין כאן אי-בהירות. */
    display:block;position:fixed;z-index:59;top:0;bottom:0;right:0;left:auto;
    width:min(278px,80vw);overflow-y:auto;background:var(--surface);
    border-left:1px solid var(--rule);box-shadow:0 0 28px rgba(15,23,35,.28);
    padding:14px 12px;
  }
  /* ⚠ **כל עיצוב פריטי התפריט האנכי מוגדר רק בתוך `@media(min-width:1101px)`.**
     בלי הכללים האלה הפריטים במגירה קיבלו את עיצוב הרצועה האופקית ונראו
     כשורת תגיות עטופה — נמדד בצילום. אותם ערכים בדיוק כמו במסך הרחב. */
  body.navopen .navgroup{margin-bottom:9px}
  body.navopen .navtitle{display:block;font-size:11.5px;font-weight:700;color:var(--ink-soft);
    letter-spacing:.03em;padding:7px 10px 4px}
  body.navopen .sidenav .navitem{
    display:flex;align-items:center;gap:8px;width:100%;text-align:start;
    border:none;background:none;cursor:pointer;font-family:inherit;
    padding:11px 10px;border-radius:8px;color:var(--ink);font-size:15px;line-height:1.3;
  }
  body.navopen .sidenav .navitem.on{background:var(--accent-soft);color:var(--accent);
    font-weight:700;box-shadow:inset 3px 0 0 var(--accent)}
  body.navopen .sidenav .navitem .navnum{
    width:19px;height:19px;border-radius:50%;background:var(--rule);color:#fff;flex:none;
    display:grid;place-items:center;font-size:11px;font-weight:700}
  body.navopen .sidenav .navitem.on .navnum{background:var(--accent)}
  body.navopen .sidenav .navitem .navcount{margin-inline-start:auto;font-size:12px;
    color:var(--ink-soft);font-weight:400}
  /* הכפתור "הסתרת התפריט" שייך למסך רחב בלבד */
  body.navopen .navcollapse{display:none}
}
/* ---------- מסכים בלי תפריט צד ----------
   רק המסך המלא של המנהל משתמש בתפריט הצד. בכל השאר הוא ריק, ובלי הכללים
   האלה נשארה במסך רחב רצועה לבנה ריקה בצד ימין, והתוכן לא היה ממורכז. */
body.nosidenav .sidenav{display:none}
body.nosidenav .navshow{display:none}
body.nosidenav .applayout{grid-template-columns:minmax(0,1fr)}
body.nosidenav .steps{display:flex}
/* מסך שער — כניסה, בחירת בית ספר, סיסמה או השהיית שירות:
   הכרטיס עומד לבדו, בלי לשוניות ובלי כפתורי עריכה בראש המסך */
body.gated .steps{display:none}
body.gated .topactions > :not(#btnTheme){display:none}
/* במסכי הכניסה השורה העליונה הוסתרה לגמרי, משתי סיבות: היא הציגה את שם
   בית הספר שכבר מופיע בתוך הכרטיס, ובעיקר — היא תפסה גובה מעל אזור
   שדורש 100% מגובה המסך, וכך נוצרה גלילה של בדיוק גובה השורה בכל מסך.
   כפתור המצב הכהה מועבר לפינה כדי שלא ייעלם איתה. */
body.gated .topbar{display:none}
/* ⚠ פס גלילה אנכי שאין מתחתיו כלום (3.14, אריאל צירף צילום).
   `.loginwrap` קיבל `min-height:100vh` — גובה מסך מלא — אבל `.applayout`
   שעוטף אותו מוסיף `padding:8px … 90px`. **נמדד: מסך של 900 פיקסלים,
   מסמך של 998.** 98 פיקסלים של גלילה אל תוך כלום, בדיוק במסך הראשון
   שכל מנהלת רואה. במסך שער אין תפריט ואין שורת כפתורים תחתונה, ולכן
   הריפוד הזה מיותר שם. */
body.gated .loginwrap{min-height:100vh}
body.gated .applayout{padding-top:0;padding-bottom:0}
/* ⚠ ובטלפון הריפוד יושב על `main` ולא על `.applayout` (שורה 782:
   `main{padding:16px 12px 70px}`), ולכן התיקון למעלה לא נגע בו בכלל.
   **נמדד ב-375×812: מסמך של 898** — 16 + 812 + 70 בדיוק. */
body.gated .applayout > main{padding-top:0;padding-bottom:0}
body.gated #btnTheme{
  position:fixed;top:10px;inset-inline-end:10px;z-index:60;
  display:inline-flex !important;
}
@media(min-width:1101px){
  .steps{display:none}
  .applayout{max-width:min(2000px,98vw);margin:0 auto;display:grid;grid-template-columns:208px minmax(0,1fr);gap:16px;
    padding:8px 16px 90px;align-items:start}
  /* מצב מקופל: תפריט הצד נעלם לגמרי והתוכן מקבל את כל הרוחב */
  body.navcollapsed .applayout{grid-template-columns:minmax(0,1fr)}
  body.navcollapsed .sidenav{display:none}
  .applayout > main{max-width:none;margin:0;padding:0}
  /* ===== גלילה משלו לתפריט (3.20) =====
     ⚠ אריאל: "שיהיה גלגלת גם לתפריט ולא רק לכל הדף". התפריט `sticky`
     ובלי גובה מרבי, ולכן במסך נמוך — או כשמצטברים בו פריטים (קבוצות,
     חדרים, מילוי מקום, כרטיסיות נוספות) — התחתית שלו פשוט יוצאת מהמסך,
     ואי אפשר להגיע אליה: גלילת הדף מזיזה את התוכן והתפריט נשאר דבוק.
     גובה מרבי + `overflow-y:auto` נותנים לו גלגלת משלו.
     `88px` = 72 של הכותרת הדביקה ועוד 16 נשימה למטה. */
  .sidenav{display:block;position:sticky;top:72px;background:var(--surface);border:1px solid var(--rule);
    border-radius:var(--radius);padding:10px 8px;box-shadow:var(--shadow-sm);
    max-height:calc(100vh - 88px);overflow-y:auto;overscroll-behavior:contain}
  .navgroup{margin-bottom:9px}
  .navgroup:last-child{margin-bottom:0}
  .navtitle{font-size:11.5px;font-weight:700;color:var(--ink-soft);letter-spacing:.03em;
    padding:7px 10px 4px}
  .navitem{
    display:flex;align-items:center;gap:8px;width:100%;text-align:start;
    border:none;background:none;cursor:pointer;font-family:inherit;
    padding:8px 10px;border-radius:8px;color:var(--ink);font-size:14.5px;line-height:1.3;
    transition:background .12s,color .12s;
  }
  .navitem:hover{background:#F0F3F7}
  .navitem.on{background:var(--accent-soft);color:var(--accent);font-weight:700;
    box-shadow:inset 3px 0 0 var(--accent)}
  .navitem .navnum{
    width:19px;height:19px;border-radius:50%;background:var(--rule);color:#fff;flex:none;
    display:grid;place-items:center;font-size:11px;font-weight:700;
  }
  .navitem.on .navnum{background:var(--accent)}
  .navitem .navcount{margin-inline-start:auto;font-size:12px;color:var(--ink-soft);font-weight:400}
  .navitem.on .navcount{color:var(--accent)}
  /* נקודה אדומה: משהו השתנה וצריך לטפל בו. שונה מ-navcount, שהוא מספר
     ניטרלי — זו קריאה לפעולה, ולכן היא פועמת ולא סטטית. */
  .navitem .navdot{
    color:var(--bad);font-size:12px;line-height:1;margin-inline-start:auto;
    animation:navpulse 2.4s ease-in-out infinite;
  }
  .navitem .navdot + .navcount{margin-inline-start:6px}
  .navcollapse{
    display:block;width:100%;border:1px solid var(--rule-strong);background:var(--surface);cursor:pointer;
    font-family:inherit;font-size:12px;color:var(--ink-soft);padding:5px;border-radius:7px;margin-bottom:8px;
  }
  .navcollapse:hover{background:#F0F3F7;color:var(--ink)}
  .navshow{
    display:none;position:fixed;top:78px;inset-inline-start:10px;z-index:45;
    border:1px solid var(--rule-strong);background:var(--surface);cursor:pointer;font-family:inherit;
    font-size:12.5px;color:var(--ink);padding:8px 12px;border-radius:8px;box-shadow:var(--shadow);
  }
  .navshow:hover{background:#F0F3F7}
  body.navcollapsed .navshow{display:block}
  /* הכפתור צף מעל התוכן — בלי המרווח הזה הוא מכסה את הכותרת והשורה
     הראשונה של המסך. המרווח נוסף רק כשהכפתור באמת מוצג. */
  body.navcollapsed .applayout > main{padding-top:46px}
}

/* שורת "גישה זמנית" — נדבקת לראש העמוד כשיש מגבלת זמן פעילה */
#noticeBars .noticebar+.noticebar{border-top:1px solid rgba(255,255,255,.25)}
.noticebar{
  display:flex;align-items:center;gap:12px;justify-content:center;text-align:center;
  background:var(--accent);color:#fff;font-size:14px;font-weight:600;
  padding:9px 14px;text-align:center;line-height:1.4;
}
/* ⚠ אריאל: *"לא בצבע כחול כי זה לא רואים טוב"*. קישור `tel:` יורש את
   כחול ברירת המחדל של הדפדפן, וכחול על ירוק כהה הוא בדיוק הצירוף
   שאי אפשר לקרוא. כאן הוא לבן כמו שאר השורה, ומסומן בקו תחתון —
   הקו הוא מה שאומר "קישור", לא הצבע.
   **הכלל: קישור על רקע צבעוני יורש את צבע הטקסט, לא את של הדפדפן.** */
.noticebar a{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:700}
.noticebar a:hover{text-decoration-thickness:2px}
.noticebar button{
  border:1px solid rgba(255,255,255,.5);background:none;color:#fff;cursor:pointer;
  font-family:inherit;font-size:13px;line-height:1;padding:3px 8px;border-radius:6px;flex:none;
}
.noticebar button:hover{background:rgba(255,255,255,.15)}
/* תגית קטנה בפינה במקום פס רוחב מלא: המידע נשאר זמין, בלי לגזול שורה
   שלמה מהמסך ובלי להרגיש כמו אזהרה כשנותר עוד חודש. */
.trialbar{
  /* יושבת *בתוך* שורת הכפתורים העליונה ולא צפה מעליה. כשהיא הייתה
     position:fixed היא כיסתה כפתורים; עכשיו היא חלק מהפריסה, נדחפת
     יחד עם השאר, ולעולם לא מסתירה כלום. */
  display:inline-flex;align-items:center;
  color:#fff;padding:5px 12px;border-radius:999px;
  font-size:12.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap;
  order:-1;   /* ראשונה בשורה, לפני שאר הכפתורים */
}
@media(max-width:700px){.trialbar{font-size:11px;padding:4px 9px}}
@media print{.trialbar{display:none}}

/* ---------- שם בית הספר וכפתור המשתמש בשורה העליונה ---------- */
.schoolname{
  border:none;background:none;padding:0;margin:0;cursor:pointer;
  color:var(--accent);font-weight:700;font-size:12px;font-family:inherit;
  border-bottom:1px dashed rgba(47,111,98,.45);line-height:1.2;
  transition:color .12s,border-color .12s;
}
.schoolname:hover{color:#1E463C;border-bottom-color:#1E463C}
.userbtn{
  display:inline-flex;flex-direction:column;align-items:center;gap:1px;line-height:1.15;
  padding:7px 16px;border-radius:10px;
}
.userbtn .uname{font-weight:700;font-size:14px}
.userbtn .uout{font-size:11px;opacity:.82;font-weight:500}

/* ---------- כניסה — בחירת בית ספר / התחברות ----------
   הכרטיס מקבל כניסה אחת מתוזמנת בטעינה — בלי אנימציות נוספות בכל
   מקום אחר בכרטיס, כדי שהתשומת לב תישאר על הפעולה עצמה. */
/* ⚠⚠ **אריאל ביקש שהמסך הזה ייראה מקצועי ויפה.** זה המסך הראשון
   שרואים — של מזכירה שנכנסת בפעם הראשונה, ושל כל כניסה מכל מכשיר.
   ארבעה שינויים, כל אחד מסיבה. */

/* 1. **הרקע.** אפור שטוח נראה כמו דף שלא נטען. ⚠⚠ וההדרגתיות יושבת
      על שכבה **קבועה שמכסה את כל אזור התצוגה**, לא על העטיפה עצמה:
      נמדד — כשהיא הייתה על `.loginwrap` היא נעצרה בגובה שלו (82vh)
      ונראה **תפר מלבני** ברור באמצע המסך. */
.loginwrap{
  min-height:82vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:20px;position:relative;isolation:isolate;
}
.loginwrap::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  /* ⚠⚠ **(1.1) נפילה לאחור ל-Chrome 109** — Windows 7/8 תקועים עליו,
     והוא נפוץ בבתי ספר. `color-mix` אינו קיים שם, ההצהרה כולה נזרקת,
     ומסך הכניסה נשאר בלי רקע ובלי מסגרת. ההצהרה הרגילה **קודמת**;
     דפדפן שמכיר `color-mix` דורס אותה, וזה מנגנון ה-CSS עצמו.
     ⚠ הערך הקבוע נגזר מ-`--accent` של המצב הבהיר. במצב כהה הוא אינו
     מתעדכן — אבל בדפדפן שבו זה רלוונטי ממילא אין `color-mix`. */
  background:
    radial-gradient(90% 55% at 50% -8%,rgba(47,111,98,0.14),transparent 68%),
    radial-gradient(65% 45% at 100% 100%,rgba(47,111,98,0.08),transparent 70%),
    #F4F6F8;
  background:
    radial-gradient(90% 55% at 50% -8%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 68%),
    radial-gradient(65% 45% at 100% 100%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 70%),
    var(--paper);
}
/* 2. **הכרטיס.** צל בשתי שכבות — קרוב וצמוד לקצה, ורחוק ומפוזר.
      צל אחד נראה שטוח; שניים נותנים תחושה שהכרטיס מרחף. */
.logincard{
  width:min(420px,94vw);background:var(--surface);border-radius:24px;overflow:hidden;
  border:1px solid rgba(213,220,230,0.7);
  border:1px solid color-mix(in srgb,var(--rule) 70%,transparent);
  box-shadow:
    0 1px 2px rgba(22,35,58,.06),
    0 8px 20px -6px rgba(22,35,58,.12),
    0 30px 60px -20px rgba(22,35,58,.22);
  animation:loginIn .5s cubic-bezier(.16,1,.3,1);
}
@keyframes loginIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
/* 3. **הכותרת.** הייתה מלבן ירוק שטוח. שלוש שכבות אור — הדרגתיות
      אלכסונית, זוהר רך מלמעלה, וקו הפרדה בהיר בתחתית; בלי הקו המעבר
      לגוף הכרטיס נראה כמו חיתוך. */
.loginhead{
  position:relative;color:#fff;padding:38px 26px 30px;text-align:center;overflow:hidden;
  /* ⚠ אותה נפילה לאחור — ראו ההערה ב-.loginwrap::after */
  background:linear-gradient(155deg,#357464 0%,#2F6F62 45%,#1C4034 100%);
  background:linear-gradient(155deg,
    color-mix(in srgb,var(--accent) 88%,#4E9C88) 0%,
    var(--accent) 45%,
    #1C4034 100%);
}
.loginhead::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(130% 80% at 18% -20%,rgba(255,255,255,.22),transparent 62%),
    radial-gradient(90% 70% at 92% 8%,rgba(255,255,255,.10),transparent 60%);
}
.loginhead::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
}
/* ⚠ ראש כרטיס הכניסה הוא מדרג ירוק כהה. הריבועים לבנים, וקווי
   הטבלה נצבעים בגוון הכהה של המדרג — לא בלבן — אחרת הטבלה נעלמת. */
.logomark{
  position:relative;width:52px;height:52px;margin:0 auto 16px;border-radius:15px;
  background:rgba(255,255,255,.18);color:#fff;--logo-bg:#2A6455;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 16px -6px rgba(0,0,0,.4);
}
.logotype{position:relative;font-size:32px;font-weight:800;letter-spacing:-.035em;line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.14)}
.logosub{position:relative;font-size:13px;opacity:.82;margin-top:9px;letter-spacing:.02em}
.loginbody{padding:30px 28px 26px}
/* 4. **השדה והכפתור.** במסך שכולו שדה אחד, השדה צריך להיות הדבר שהעין
      נוחתת עליו. טבעת מיקוד רכה במקום מסגרת חדה, וכפתור בגובה מלא. */
.loginbody input[type=text],.loginbody input[type=password],.loginbody input[type=email]{
  padding:14px 15px;border-radius:12px;font-size:16px;
  background:#f9fafb;
  background:color-mix(in srgb,var(--paper) 55%,var(--surface));
  border:1px solid var(--rule);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.loginbody input[type=text]:focus,.loginbody input[type=password]:focus,
.loginbody input[type=email]:focus{
  background:var(--surface);border-color:var(--accent);outline:none;
  box-shadow:0 0 0 4px rgba(47,111,98,0.16);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent);
}
.loginbody .btn.big{
  width:100%;border-radius:12px;padding:15px 22px;font-size:17px;font-weight:700;
  background:linear-gradient(180deg,#407b6f 0%,#2F6F62 100%);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 92%,#fff) 0%,var(--accent) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 6px 16px -6px rgba(47,111,98,0.6);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 6px 16px -6px color-mix(in srgb,var(--accent) 60%,transparent);
  transition:transform .12s,box-shadow .15s,filter .15s;
}
.loginbody .btn.big:hover{filter:brightness(1.06);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 10px 22px -8px rgba(47,111,98,0.7);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 10px 22px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
.loginbody .btn.big:active{transform:translateY(1px)}

/* ===================== מסך כניסה במסך נמוך =====================
   הכרטיס נבנה למסך גבוה. על מסך נייד או על מחשב נייד עם שורת משימות
   ושורת סימניות, ארבעת השדות של ההגדרה הראשונה נדחפו אל מתחת לקצה
   והמשתמש נאלץ לגלול כדי להגיע לכפתור — במסך שכל תפקידו הוא ללחוץ עליו.
   כאן הכול מתכווץ לפי גובה החלון בפועל, בלי להסתיר שום שדה.
   ⚠ **עודכן:** שלושה ספים (860 · 760 · 700) ולא שניים — ראו ההסבר
   אצל כל אחד. הסף האמצעי נוסף אחרי שאריאל שלח צילום שבו "מעבר
   לבית ספר אחר" נחתך בתחתית המסך. */
@media screen and (max-height:860px){
  .loginwrap{min-height:100vh;padding:10px;justify-content:flex-start}
  .logincard{margin:auto 0}
  .loginhead{padding:20px 24px 16px}
  .logomark{width:38px;height:38px;margin-bottom:10px;border-radius:11px}
  .logotype{font-size:26px}
  .logosub{margin-top:5px;font-size:12.5px}
  .loginbody{padding:18px 22px 18px}
  .loginbody .field{margin-bottom:9px}
  .loginbody h3{font-size:16px}
  .loginbody .hint{font-size:12.5px;line-height:1.45}
  .loginfoot{margin-top:12px;padding-top:10px}
}
/* ⚠ **הסף היה 680 — ונשאר חור.** בין 680 ל-860 פעלו רק הכללים
   הרכים, והכרטיס נשאר 715 פיקסלים. כלומר כל חלון בגובה 690-760 —
   מחשב נייד רגיל עם שורת סימניות — עדיין גלל, דווקא במסך ההקמה
   הראשונה שהוא הארוך מכולם (ארבעה שדות, שתי פסקאות וכפתור יציאה).
   **נמדד:** בגובה 700 הכרטיס היה 715 וגלש ב-41 פיקסלים.
   הסף עלה ל-760, וכך הכללים ההדוקים תופסים בדיוק במקום שבו הם
   נחוצים. **נמדד אחרי:** 700 → 637, בלי גלילה. */
@media screen and (max-height:760px){
  .loginhead{padding:14px 20px 12px}
  .logomark{display:none}
  .logotype{font-size:22px}
  .loginbody{padding:14px 20px 14px}
  .loginbody .field{margin-bottom:7px}
}
/* ⚠ הצעד האחרון, למסכים באמת נמוכים (נטבוק קטן, חלון מוקטן).
   נמדד: בגובה 660 הכרטיס היה 637 והריפוד של העוטף הוסיף 20 —
   גלישה של 5 פיקסלים. כאן הריפוד יורד והשדות מתהדקים עוד. */
@media screen and (max-height:700px){
  .loginwrap{padding:6px}
  .loginhead{padding:10px 20px 9px}
  .logotype{font-size:20px}
  .logosub{margin-top:3px;font-size:12px}
  .loginbody{padding:12px 18px 12px}
  .loginbody .field{margin-bottom:5px}
  .loginbody h3{font-size:15px;margin-bottom:4px}
  .loginbody .hint{font-size:12px;line-height:1.35}
}
/* ⚠ הצעד האחרון. נמדד: בגובה 600 הכרטיס היה 604 וגלש ב-26.
   כאן גם השדות עצמם מתהדקים — עדיין נוחים ללחיצה, ועדיין
   **בלי להסתיר שום שדה**. נמדד אחרי: 600 → 540, בלי גלילה. */
@media screen and (max-height:620px){
  .loginwrap{padding:4px}
  .loginhead{padding:8px 18px 7px}
  .logotype{font-size:19px}
  .loginbody{padding:10px 16px 10px}
  .loginbody .field{margin-bottom:3px}
  .loginbody .field>span{margin-bottom:2px}
  .loginbody input[type=text],.loginbody input[type=password],.loginbody input[type=email]{padding:9px 12px}
  .loginbody .btn.big{padding:11px 18px}
  .loginbody .hint{margin-top:6px!important;margin-bottom:6px!important}
}
/* ⚠ קו הפרדה קצר וממורכז במקום קו מלא ברוחב — כדי שזה ייראה כמו
   חתימה ולא כמו סוף טופס. */
.loginfoot{
  text-align:center;color:var(--ink-soft);font-size:12px;margin-top:18px;
  padding-top:14px;position:relative;letter-spacing:.02em;
}
.loginfoot::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:64px;height:1px;background:var(--rule);
}
@media screen and (max-width:760px){
  .loginwrap{min-height:78vh}
  /* בטלפון שורת הכפתורים העליונה נשברת לשתי שורות, ולכן ההצמדה לראש המסך מיותרת */
  .topbar{position:static;padding:8px 12px;gap:8px}
  :root{--cardtop:0px}
  .steps{padding:8px 10px 0;gap:2px}
  .step{padding:11px 11px 9px;font-size:13.5px}
  .cards{gap:8px}
  .card{padding:12px 14px}
  .card b{font-size:24px}
  main{padding:16px 12px 70px}
  h1{font-size:21px}
  h2{font-size:17px}
  .panel{padding:14px}
  .brand{font-size:15px}
  .lead{font-size:15px}
  .cards{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
  /* גודל 16 מונע מהאייפון להגדיל את המסך בכל לחיצה על שדה */
  input[type=text],input[type=number],input[type=date],input[type=email],input[type=password],input[type=search],select,textarea{font-size:16px;padding:10px}
  .btn{padding:10px 16px}
  .btn.sm{padding:7px 12px;font-size:13.5px}
  .btn.big{width:100%;text-align:center}
  .topactions .btn{padding:6px 10px;font-size:12.5px}
  .checks label{padding:8px 13px;font-size:14px}
  .tab{padding:8px 14px}
  /* עמודת השעות נשארת במקום כשגוללים את הטבלה הצידה */
  .ttwrap{border:1px solid var(--rule);border-radius:8px}
  .ttwrap table.tt{min-width:620px}
  table.tt th.hcol{position:sticky;inset-inline-start:0;z-index:2;box-shadow:1px 0 0 var(--rule)}
  table.tt td{height:54px}
  .chip{padding:8px;font-size:13px;min-height:40px}
  /* חלונות נפתחים מלמטה, כמו באפליקציה */
  .mask{align-items:flex-end;padding:0}
  .modal{max-height:92vh;border-radius:14px 14px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom))}
  .modal .foot .btn{flex:1 1 140px;text-align:center}
  /* בנייד הריפוד התחתון שונה, ולכן גם ההיצמדות */
  .modal .foot{bottom:calc(-18px - env(safe-area-inset-bottom))}
  .opt{padding:11px 12px}
  #toast{inset-inline:12px;bottom:12px}
  .split{gap:12px}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  /* כלל הכוכבית אמור לכסות הכול, אבל אנימציות עם שם מפורש על אלמנט
     יכולות לגבור עליו — לכן מבטלים אותן גם בשמן. */
  .logincard,.modal,.gatecard{animation:none !important}
}

/* ---------- פריסת "רשימה למעלה" ----------
   ברירת המחדל היא רשימה בעמודה צדדית. במצב הזה הרשימה עוברת לרצועה
   דקה מעל התוכן, והכרטיס עצמו — שהוא העיקר — מקבל את כל רוחב המסך. */
body.listtop .split{grid-template-columns:minmax(0,1fr)}
body.listtop .split > .panel:first-child{
  max-height:340px;overflow:auto;padding:12px 14px;resize:vertical;
}
/* כותרת כרטיס נדבקת: בכרטיס מורה או תלמיד יש טבלאות ארוכות, וברגע
   שגוללים לתוכן לא נשאר שום סימן של מי הכרטיס. --cardtop הוא הגובה
   שמתחת לשורה העליונה הדבוקה; בטלפון השורה העליונה אינה דבוקה, ולכן
   הערך שם הוא 0. */
:root{--cardtop:64px}
.cardhead{
  position:sticky;top:var(--cardtop);z-index:20;background:var(--surface);
  margin:-20px -20px 14px;padding:14px 20px 11px;
  border-bottom:1px solid var(--rule);border-radius:var(--radius) var(--radius) 0 0;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.cardhead.out{
  margin:0 0 12px;border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:0 2px 6px rgba(22,35,58,.06);
}
.cardhead h2{margin:0;font-size:19px;font-family:var(--display)}
/* ⚠ שם האדם הוא הכותרת האמיתית של המסך — ראו העיצוב. */
.cardhead .who{font-family:var(--display);font-weight:700;color:var(--accent);font-size:22px}
.cardhead .sub{color:var(--ink-soft);font-size:13px;font-weight:400}

/* הכותרת (ובתוכה כפתור הקיפול) נשארת גלויה גם כשגוללים בתוך הרשימה */
body.listtop .split > .panel:first-child > h2{
  position:sticky;top:-12px;background:var(--surface);z-index:2;
  margin:-12px -14px 8px;padding:12px 14px 8px;border-bottom:1px solid var(--rule);
}
body.listtop .split > .panel:first-child table.list td{padding:6px 8px}
body.listtop .split > .panel:first-child h2{font-size:15px;margin-bottom:8px}

/* כפתור קטן לקיפול רשימת התלמידים/מורים מתוך הפאנל עצמו */
.listtoggle{
  border:1px solid var(--rule-strong);background:var(--surface);cursor:pointer;font-family:inherit;
  font-size:12px;color:var(--ink-soft);padding:3px 9px;border-radius:6px;margin-inline-start:auto;
}
.listtoggle:hover{background:#F0F3F7;color:var(--ink)}
.split > .panel:first-child > h2{display:flex;align-items:center;gap:8px}

/* ---------- חיווי ניתוק מהאינטרנט ---------- */
.offlinebar{
  position:sticky;top:0;z-index:55;text-align:center;background:var(--bad);color:#fff;
  padding:8px 14px;font-size:13.5px;font-weight:700;letter-spacing:.01em;
}

/* ---------- תצוגת כרטיסיות במובייל ----------
   בטלפון, טבלה רחבה דורשת גלילה הצידה — לא נוח. מתחת ל-768px שני סוגי
   הטבלאות באתר (table.tt — מערכת שבועית, table.list — כל טבלת רשימה)
   הופכות לכרטיסים אנכיים. מעל 768px שום כלל כאן לא חל — הטבלאות
   נשארות בדיוק כפי שהן.
   חשוב: screen בלבד! רוחב עמוד A4 מודפס הוא כ-718 פיקסלים, כלומר מתחת
   ל-768 — ובלי המילה הזו כל ההדפסות היו יוצאות ככרטיסים במקום כטבלה. */
@media screen and (max-width:768px){
  /* ---- table.tt — מערכת שבועית ---- */
  .ttwrap{overflow:visible;border:none}
  .ttwrap table.tt,table.tt{min-width:0;display:block;background:none}
  table.tt thead{display:none}
  table.tt tbody{display:block}
  table.tt tr{
    display:block;background:var(--surface);border:1px solid var(--rule);
    border-radius:10px;margin-bottom:10px;padding:10px 12px;box-shadow:var(--shadow-sm);
  }
  table.tt th.hcol{
    display:block;width:auto;position:static;text-align:start;border:none;background:none;
    font-size:15px;font-weight:700;color:var(--ink);padding:0 0 6px;box-shadow:none;
  }
  table.tt td{
    display:block;border:none;border-top:1px solid var(--rule);height:auto;min-height:0;
    padding:8px 0 6px;background:none !important;
  }
  /* שעה ריקה לגמרי, או משבצת חופשית שאין בה אפילו שיבוץ אחד — נעלמת.
     משבצת חסומה כן נשארת (זה בדיוק המידע שרוצים לראות), וכל משבצת
     עם שיבוץ אמיתי (יש בה .chip) תמיד נשארת גם היא. */
  table.tt td:empty{display:none}
  table.tt td.off{display:none}
  /* שעה פנויה בטלפון לא נעלמת לגמרי — אחרת המשתמש לא רואה שיש חלון
     פנוי במערכת. היא מוצגת כשורה דקה ומעומעמת. */
  table.tt td.free:not(:has(.chip))::after{content:'פנוי';font-size:10.5px;opacity:.4}
  table.tt td.free:not(:has(.chip)){padding:2px 10px;min-height:0;opacity:.75}
  table.tt td::before{
    content:attr(data-label);display:block;font-size:11.5px;color:var(--ink-soft);
    font-weight:700;margin-bottom:3px;
  }
  table.tt td.pick:hover{box-shadow:none}
  table.tt td .subj{text-align:start}
  table.tt .chip{min-height:0}

  /* ---- table.list — כל טבלת רשימה (מורים, תלמידים, משתמשים, היסטוריה וכו') ---- */
  table.list{border:none}
  table.list thead{display:none}
  table.list tbody{display:block}
  table.list tr{
    display:block;background:var(--surface);border:1px solid var(--rule);
    border-radius:10px;margin-bottom:10px;padding:4px 12px;box-shadow:var(--shadow-sm);
  }
  table.list tr.on{box-shadow:var(--shadow-sm),inset 3px 0 0 var(--accent)}
  table.list td{
    display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
    border:none;border-top:1px solid var(--rule);padding:9px 0;text-align:start;
  }
  table.list td:first-child{border-top:none}
  table.list td::before{
    content:attr(data-label);flex:none;font-size:11.5px;font-weight:700;color:var(--ink-soft);
    padding-top:2px;min-width:64px;
  }
  table.list td:empty,table.list td:not([data-label]){display:none}
  /* עמודות פעולה (כפתורי עריכה/מחיקה) לרוב אין להן כותרת עמודה משל עצמן —
     מוצגות בשורה נפרדת בתחתית הכרטיס, בלי תווית, מיושרות לשני הצדדים */
  table.list td:not([data-label]):has(button),
  table.list td:not([data-label]):has(a){
    display:flex;gap:8px;flex-wrap:wrap;padding-top:10px;
  }
}

/* ---------- מצב כהה ----------
   כמעט כל האתר בנוי על משתני צבע (var(--...)), אז דריסה שלהם כאן
   מספיקה כדי להפוך הכול. מה שנשאר: כמה גוני hover אפורים בהירים
   שהיו כתובים ישירות (לא כמשתנה), שנדרסים כאן בנפרד לפי הסלקטור שלהם. */
[data-theme="dark"]{
  --paper:#0B121C;
  --surface:#1C2836;
  --ink:#EDF1F6;
  --ink-soft:#9FB0C4;
  --rule:#324457;
  --rule-strong:#4A6078;
  --accent:#4FB89C;
  --accent-soft:#15332C;
  --warn:#E5A94C;
  --warn-soft:#3D2C11;
  /* (3.64) היה #E2574A — ניגודיות 4.05 על כרטיס כהה, מתחת לתקן (4.5).
     אותו גוון, מעט בהיר יותר: 4.72 על כרטיס, 5.94 על הרקע. */
  --bad:#E66B60;
  --bad-soft:#3D211C;
  --lock:#AD93E8;
  --lock-soft:#291F42;
  --trial:#5CA6E6;
  --trial-soft:#122B42;
  --shadow-sm:0 1px 2px rgba(0,0,0,.45);
  --shadow:0 2px 10px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4);
  --shadow-lg:0 14px 44px rgba(0,0,0,.65),0 2px 10px rgba(0,0,0,.45);
}
/* במצב כהה הקווים האלכסוניים צריכים להיות בהירים כדי להיראות על רקע כהה */
[data-theme="dark"] table.tt td.drop-no{
  background-image:repeating-linear-gradient(45deg,
    transparent 0 5px, rgba(226,87,74,.22) 5px 10px);
}
[data-theme="dark"] table.list tr:hover td{background:#243244}
[data-theme="dark"] .btn.ghost:hover,
[data-theme="dark"] .navitem:hover,
[data-theme="dark"] .navcollapse:hover,
[data-theme="dark"] .navshow:hover,
[data-theme="dark"] .listtoggle:hover{background:#2A3B4F;color:var(--ink)}
[data-theme="dark"] table.tt thead th{background:linear-gradient(#22303F,#1A2531)}
/* ⚠ היה כאן `[data-theme="dark"] th.hcol` — **פחות ספציפי** מכלל הבסיס
   `table.tt th.hcol` (0,2,1 מול 0,2,2), ולכן מעולם לא ניצח. התוצאה:
   עמודת השעות/השמות נשארה **לבנה בוהקת** בכל טבלת שעות בתוכנה במצב
   כהה — מורים, תלמידים, תוצאות. **נמדד: rgb(247,249,251) על רקע כהה.**
   ⚠ **הכלל: כלל מצב כהה חייב להיות ספציפי לפחות כמו כלל הבסיס שהוא
   דורס. אין דרך לראות את זה בקוד — רק במדידה בדפדפן.** */
[data-theme="dark"] table.tt th.hcol{background:#1A2531}
[data-theme="dark"] td.off{background:repeating-linear-gradient(45deg,#202D3D,#202D3D 5px,#182230 5px,#182230 10px)}
[data-theme="dark"] .empty{background:linear-gradient(#1A2531,#141C27)}
[data-theme="dark"] table.tt td.pick:hover{background:#20362F}
[data-theme="dark"] .log{background:#060B12}
[data-theme="dark"] .theme-toggle{background:var(--surface);border-color:var(--rule-strong)}
[data-theme="dark"] .card{box-shadow:var(--shadow-sm),inset 0 0 0 1px rgba(255,255,255,.03)}
/* בהדפסה תמיד נשארים עם צבעים בהירים, לא משנה מה מוצג על המסך */
@media print{
  [data-theme="dark"]{
    --paper:#F4F6F8 !important;--surface:#FFFFFF !important;--ink:#16233A !important;
    --ink-soft:#5A6A81 !important;--rule:#D5DCE6 !important;--rule-strong:#AEBACB !important;
    --accent:#2F6F62 !important;--accent-soft:#E6F0ED !important;
  }
}

/* ---------- כפתור החלפת מצב ---------- */
.theme-toggle{
  border:1px solid var(--rule-strong);background:#fff;cursor:pointer;font-family:inherit;
  font-size:15px;line-height:1;padding:7px 10px;border-radius:8px;
}
.theme-toggle:hover{background:#F0F3F7}

.repdot{
  border:none;background:none;cursor:pointer;font-family:inherit;font-weight:800;
  font-size:14px;line-height:1;padding:0 3px 0 0;flex:none;
}
.repdot:hover{transform:scale(1.25)}

/* רשימת סימון להדפסה נבחרת — מורים או תלמידים */
.prpick{
  max-height:190px;overflow:auto;border:1px solid var(--rule-strong);border-radius:9px;
  padding:6px 8px;background:var(--surface);
}
.prpick label{display:flex;align-items:center;gap:8px;padding:5px 4px;cursor:pointer;font-size:14px}
.prpick label:hover{background:#F0F3F7;border-radius:6px}
[data-theme="dark"] .prpick label:hover{background:#22303F}

/* ---------- חלון ההודעה מאזור הניהול ----------
   כרטיס לבן ונקי. פס ירוק דק בראש וסמל קטן — מספיק כדי שיהיה ברור
   שזו הודעה רשמית, בלי גוש צבע כבד שמשתלט על החלון. */
.noticecard{margin:-24px;border-radius:16px;overflow:hidden}
#modalRoot .modal:has(.noticecard){max-width:420px}
.noticecard::before{content:'';display:block;height:4px;background:var(--accent)}
.noticemark{
  width:38px;height:38px;margin:0 auto 12px;border-radius:11px;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px;padding:6px;
  background:var(--accent);
}
.noticemark i{background:#fff;border-radius:3px;display:block}
.noticetitle{
  font-size:13px;font-weight:700;color:var(--accent);letter-spacing:.04em;
  text-align:center;margin-bottom:10px;
}
.noticebody{padding:26px 28px 24px;text-align:center}
.noticebody p{
  white-space:pre-line;font-size:18px;line-height:1.7;color:var(--ink);
  margin:0 0 22px;font-weight:600;
}
.noticebody .btn{width:100%}
@media screen and (max-width:520px){
  .noticebody{padding:22px 18px 20px}
  .noticebody p{font-size:16.5px}
}

@keyframes navpulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.navitem .navdot{animation:none}}

/* שעה פנויה שלא נוצלה, אצל מי שחסרות לו שעות (2.93) */
table.tt td.unused{background:#FFF7DC}
.legend i.unusedSw{background:#FFF7DC;border:1px solid #E8D9A8}
[data-theme="dark"] table.tt td.unused{background:#3A3420}
[data-theme="dark"] .legend i.unusedSw{background:#3A3420;border-color:#5A5030}
table.tt td.unused.pick:hover{background:#F0F6F4}
[data-theme="dark"] table.tt td.unused.pick:hover{background:#20362F}

/* שורות "פעולות נוספות" בתוך .checks — הכלל של .checks label דרס אותן
   (רוחב 100% + ריפוד + מסגרת בלי box-sizing), והשורה נחתכה בצד (3.02) */
.checks .extrarow,.extrarow{
  box-sizing:border-box;display:flex;border:none;border-bottom:1px solid var(--rule);
  border-radius:0;padding:12px 14px;min-width:0;white-space:normal;font-size:inherit;
}
.extrarow .grow{min-width:0;overflow-wrap:anywhere}

/* כפתורי הכרטיס — בראש הכרטיס, קטנים, בקצה (3.04) */
.cardhead .cardacts{margin-inline-start:auto;display:inline-flex;gap:6px;align-self:center}
.cardhead .cardacts .btn{padding:3px 10px;font-size:12.5px}

/* ===== חסימות והעדפות — שורה לכל אדם (3.07 → 3.55) =====
   ⚠ הכרטיסים (.cxlist / .cxcard / .cxhead / .cxbtns / .cxsec / .cxlbl /
   .cxedit / .cxgroup / .cxtog) ירדו: הטבלה החליפה אותם ב-3.47, והעריכה
   בתוך השורה ב-3.55. כלל CSS לסלקטור שאיש כבר לא פולט הוא בדיוק סוג
   המלכודת שתיאר CLAUDE.md — מישהו יראה אותו ויחשוב שהמסך עדיין בנוי כך. */
.cxname{background:none;border:none;padding:0;font:inherit;font-weight:800;font-size:16px;color:var(--ink);cursor:pointer;text-align:start}
.cxname:hover{color:var(--accent);text-decoration:underline}
.cxchips{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.cxchip{display:inline-flex;align-items:center;gap:2px;border-radius:999px;padding:2px 4px 2px 10px;font-size:12.5px;
  background:var(--accent-soft);color:var(--accent);line-height:1.5}
.cxchip button{border:none;background:transparent;color:inherit;opacity:.55;cursor:pointer;font-size:15px;line-height:1;padding:0 4px;border-radius:50%}
/* ===== טקסט התג הוא כפתור שמוביל לעריכה — ועכשיו גם נראה כך (3.20) =====
   ⚠ אריאל: "איך אני עורך? לא רק מוחק". הכפתור קיים מ-3.13, אבל הוא נראה
   בדיוק כמו טקסט: הקו התחתון הופיע רק בריחוף, ובמסך מגע אין ריחוף
   בכלל — כלומר האפשרות הייתה בלתי נראית לחלוטין לכל מי שעובד בטאבלט,
   ורוב המשתמשות כאן עובדות בטאבלט.
   הקו התחתון המקווקו קבוע עכשיו: הוא קורא "אפשר ללחוץ" בלי להוסיף
   רעש, וה-× לידו ממשיך לעשות את שלו.
   **הכלל: פעולה שקיימת רק בריחוף אינה קיימת במסך מגע.** */
.cxchip .cxchiplbl{opacity:1;font:inherit;font-size:inherit;padding:0;border-radius:4px;
  color:inherit;text-align:start;max-width:100%;overflow-wrap:anywhere;
  cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:currentColor}
.cxchip .cxchiplbl:hover,.cxchip .cxchiplbl:focus-visible{text-decoration:underline solid;background:transparent}
.cxchip button:hover{opacity:1;background:rgba(0,0,0,.08)}
.cxchip.bad{background:var(--bad-soft);color:var(--bad)}
.cxchip.warnc{background:#FFF1DC;color:#A0620A}
.cxchip.lim{background:#EEF1F6;color:#34445C}
.cxchip.who{background:#E6F0FB;color:#1F5A94}
[data-theme="dark"] .cxchip.warnc{background:#3A2E18;color:#F0B85A}
[data-theme="dark"] .cxchip.lim{background:#243044;color:#C9D3E3}
[data-theme="dark"] .cxchip.who{background:#1D3350;color:#9CC5F0}
/* ===== שטח נגיעה לאצבע (3.13) =====
   נמדד בטלפון (375 פיקסלים): כפתור ה-× שמבטל חסימה היה **15 פיקסלים
   גובה**, וכמה כאלה צמודים זה לזה. זו פעולה שמשנה נתונים — מי שמפספס
   מבטל חסימה של מישהו אחר בלי לשים לב. גם "🗑 מחיקה" בראש הכרטיס היה
   24 פיקסלים. במסך עם עכבר הגודל נשאר כשהיה; רק במגע הוא גדל. */
.cxchip button{min-width:22px;min-height:22px;display:inline-flex;align-items:center;justify-content:center}
/* ===== גודל תיבות הסימון (2.0) =====
   ⚠⚠⚠ **אריאל: "שהמרובעים יהיו גדולים יותר"** — על הטבלה "לשבץ
   אצלו / קשיח" בכרטיס התלמיד. **נמדד: 13×13 פיקסלים**, ברירת
   המחדל של הדפדפן שאיש לא קבע.
   ⚠ ב-3.57 זה תוקן **רק ל-`pointer:coarse`** (ראו מיד למטה) —
   כלומר בטלפון בלבד. אריאל עובד גם במחשב, שם הן נשארו 13.
   ⚠ `accent-color` צובע את הסימון עצמו בצבע התוכנה במקום בכחול
   של המערכת; בלעדיו תיבה גדולה יותר בולטת כלחצן זר.
   **הכלל: תיקון נגישות שנעשה למכשיר אחד לא נעשה.** */
input[type="checkbox"],input[type="radio"]{width:18px;height:18px;accent-color:var(--accent)}

/* ===== תיבות הסימון בטלפון (3.57) =====
   ⚠⚠ **נמדד ב-375 פיקסלים: תיבת הסימון עצמה 13×13, והתווית שסביבה
   23 פיקסלים גובה.** זו ברירת המחדל של הדפדפן, ואיש לא קבע אותה.
   המקום שבו זה הכי כואב הוא **שלב 1 של ההקמה** — "מתי לומדים":
   שש תוויות ימים צמודות, והאצבע נוחתת על היום השכן.
   באותו סבב כבר הוגדלו ה-× של החסימות; אלה פשוט לא נספרו אז.
   **הכלל: שטח נגיעה נמדד על המכשיר, לא נגזר מהמראה במסך רחב.** */
@media (pointer:coarse){
  .cxchip{padding-block:4px;gap:4px}
  .cxchip button{min-width:32px;min-height:32px;font-size:18px}
  .cardhead .cardacts .btn{padding:8px 14px;font-size:13.5px}
  summary{padding:8px 0}
  .checks label{min-height:40px;padding-block:9px}
  .checks input[type="checkbox"],.checks input[type="radio"]{width:22px;height:22px}
  /* אותה בעיה בכל תיבת סימון, לא רק ב-.checks */
  .field input[type="checkbox"],.field input[type="radio"]{width:22px;height:22px}
  /* ⚠ כרטיסי הימים בהקמה הם `.daycard .dayname`, ולא `.checks` —
     והם בדיוק המקום הראשון שנוגעים בו בתוכנה. */
  .daycard .dayname{min-height:40px}
  .daycard .dayname input[type="checkbox"]{width:22px;height:22px}
}
/* ===== "איפה משנים" — ההדגשה שאחרי הקפיצה (3.66) =====
   ⚠ דעיכה אחת, לא הבהוב: הבהוב מהיר הוא סיכון למי שרגיש לאור, וגם
   פחות קריא. `prefers-reduced-motion` מקבל מסגרת קבועה בלי אנימציה. */
.jumphi{border-radius:10px;animation:jumphi 4s ease-out 1}
@keyframes jumphi{
  0%{box-shadow:0 0 0 4px var(--accent),0 0 0 12px rgba(47,111,98,0.3);
     box-shadow:0 0 0 4px var(--accent),0 0 0 12px color-mix(in srgb,var(--accent) 30%,transparent);
     background:var(--accent-soft)}
  65%{box-shadow:0 0 0 4px var(--accent),0 0 0 12px transparent;background:var(--accent-soft)}
  100%{box-shadow:0 0 0 0 transparent;background:transparent}
}
@media (prefers-reduced-motion:reduce){
  .jumphi{animation:none;box-shadow:0 0 0 3px var(--accent);background:var(--accent-soft)}
}
.segs{display:inline-flex;gap:4px}

/* הדפסה — בלי סימני עבודה ובלי כפתורים, גם כשמדפיסים את המסך עצמו (3.08) */
@media print{
  .chip .pin{display:none!important}
  .chip{outline:none!important}
  .alert .btn,.cxchip button{display:none!important}
}

/* מספרים לפני הבנייה (3.09) */
.numrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.numbox{border:1px solid var(--rule);border-radius:12px;padding:12px;text-align:center;background:var(--surface)}
.numbox b{display:block;font-size:30px;line-height:1.1;color:var(--ink)}
.numbox span{display:block;font-size:13px;color:var(--ink-soft);margin-top:4px}
.numbox small{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:4px}
.numbox.good{border-color:var(--accent);background:var(--accent-soft)}.numbox.good b{color:var(--accent)}
.numbox.bad{border-color:var(--bad);background:var(--bad-soft)}.numbox.bad b{color:var(--bad)}
@media (max-width:600px){.numrow{grid-template-columns:1fr}}

/* שעות פנויות אצל המורים (3.10) */
.fsrow{border:1px solid var(--rule);border-radius:12px;padding:8px 12px;margin-bottom:8px;background:var(--surface)}
.fsrow > summary{cursor:pointer;padding:2px 0}
.fsslot{border-top:1px dashed var(--rule);padding:8px 0}
.fshead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fswhy{margin:4px 0 0;padding-inline-start:18px;font-size:13px}
.fswhy li{margin:3px 0}
.fsbtns .btn{margin:2px 0}

/* תוכנית מקופלת (3.11) */
.planfold{margin-top:4px}
.planfold > summary{cursor:pointer;font-size:13px;color:var(--accent);font-weight:600}
.fsbest{margin-top:4px}

/* ---------- "הצגת סיסמה" ----------
   העין יושבת בתוך השדה בקצה הלוגי, ולכן היא עובדת נכון גם ב-RTL וגם
   כששדה הסיסמה עצמו הוא dir="ltr" (כמו בהקמת מנהל). */
.pwwrap{position:relative;display:block}
/* ⚠ הריפוד חייב את אותה ספציפיות כמו `.loginbody input[type=password]`,
   אחרת הקיצור `padding` שם גובר והטקסט רץ מתחת לעין. נמדד: 13px
   במקום 40, והסיסמה נכנסה מתחת לאייקון. */
.pwwrap input[type="password"],.pwwrap input[type="text"]{width:100%;padding-inline-end:40px}
.pweye{
  position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);
  border:none;background:none;cursor:pointer;font-family:inherit;font-size:15px;
  line-height:1;padding:6px;border-radius:8px;opacity:.65;
}
/* ⚠ שדה סיסמה עם `dir="ltr"` (הקמת מנהל) יושב בתוך עמוד RTL, ולכן
   `inset-inline-end` על העוטף נפתר לשמאל — בדיוק לצד שבו מתחיל
   הטקסט. בשדות כאלה העין נקבעת פיזית לימין. */
.pwwrap input[dir="ltr"]+.pweye{inset-inline-end:auto;right:6px;left:auto}
.pweye:hover{opacity:1;background:var(--paper)}
.pweye:focus-visible{outline:2px solid transparent;box-shadow:var(--focus);opacity:1}
@media (pointer:coarse){.pweye{padding:10px}}

/* ---------- רשימות הסימון בחלון ההדפסה ----------
   גובה הגלילה הועלה, כי עכשיו יש חיפוש שמצמצם ממילא — וכותרת הכיתה
   נדבקת למעלה כדי שידעו באיזו כיתה גוללים. */
.prfind{display:block;width:100%}
.prpick{max-height:260px}
.prgrp{border-top:1px solid var(--rule);padding-top:4px;margin-top:4px}
.prgrp:first-child{border-top:none;margin-top:0}
.prgrphead{
  position:sticky;top:0;z-index:1;background:var(--surface);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:4px 2px;font-size:13px;
}

/* ===================== חסימות והעדפות — טבלה (3.47) =====================
   ⚠⚠ אריאל: *"המסך היום הוא כרטיס לכל אדם שנפתח ונסגר. זה לא עובד:
   אני רוצה לסרוק מגבלות של כל התלמידים מהר בלי להיכנס לכל אחד."*
   נמדד על המסך הישן: 240 כרטיסים, 20,796 פיקסלים — 23 מסכים של גלילה,
   וכדי לראות לוח של מישהו צריך ללחוץ, לסגור, וללחוץ על הבא.
   **מחשב = טבלה. טלפון = רשימה.** ההחלפה כאן ב-CSS ולא בשני מסלולי
   קוד — שני מסלולים היו מתפצלים בהתנהגות ברגע שנוגעים באחד מהם. */
/* ===== חסימות והעדפות — רשימה + פאנל (3.56) =====
   ⚠⚠ **שתי גרסאות נדחו לפני זו.** כרטיסים שנפתחים (3.07) — "אני רוצה
   לסרוק בלי להיכנס לכל אחד"; טבלה עם לוח של 9 פיקסלים (3.47/3.55) —
   *"זה לא עוזר לי לראות את המערכת שעות הקטנה הזו. תשנה לגמרי את כל
   העיצוב, שיהיה פשוט לנהל משם את הכל."*
   המבנה הזה מפריד בין שתי השאלות: הרשימה עונה "במי לטפל", והפאנל
   נותן את הכול על מי שנבחר — לוח בגודל אמיתי ולא ריבועים.
   **הכלל: מסך שמנסה גם לסרוק וגם לערוך באותו רוחב — נכשל בשניהם.** */
.cxsplit{display:grid;grid-template-columns:262px minmax(0,1fr);gap:14px;margin-top:12px;align-items:start}
.cxlistcol{max-height:calc(100vh - 220px);overflow-y:auto;border:1px solid var(--rule);
  border-radius:12px;background:var(--surface);padding:6px;position:sticky;top:12px}
.cxitem{display:grid;grid-template-columns:1fr auto;gap:0 8px;width:100%;text-align:start;
  border:none;background:transparent;font:inherit;color:var(--ink);cursor:pointer;
  padding:8px 10px;border-radius:9px;margin-bottom:2px}
.cxitem:hover{background:var(--accent-soft)}
.cxitem.on{background:var(--accent);color:#fff}
.cxitem.on .hint,.cxitem.on .cxisub,.cxitem.on .cxihrs{color:#fff;opacity:.9}
.cxiname{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cxihrs{font-variant-numeric:tabular-nums;font-size:13px;color:var(--ink-soft)}
.cxisub{grid-column:1;font-size:12px;color:var(--ink-soft)}
/* ⚠ מי שחסרות לו שעות בולט — זו הסיבה שסורקים את הרשימה */
.cxibad{grid-column:2;font-size:11px;color:var(--warn);font-weight:700;white-space:nowrap}
.cxitem.on .cxibad{color:#FFE2B8}
.cxilim{display:none}
.cxdetail{min-width:0}
.cxphead{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;justify-content:space-between;
  margin-bottom:10px}
.cxphead h2{margin:0;font-size:22px}
.cxbox{background:var(--surface);border:1px solid var(--rule);border-radius:14px;
  padding:14px 16px;margin-bottom:12px}
.cxbox h3{margin:0 0 8px;font-size:15px}
/* ⚠ הפאנל רחב, ולכן השדות הם `.field` רגילים ולא תוויות זעירות מעל
   תיבה של 5 תווים — זה מה שנכשל בטבלה. */
.cxfields{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.cxfields .field{margin:0}
.cxtog{border:1px solid var(--rule-strong);background:var(--surface);border-radius:999px;
  padding:5px 13px;font:inherit;font-size:13px;cursor:pointer;color:var(--ink)}
.cxtog:hover{border-color:var(--accent);color:var(--accent)}
.cxtog.hard{background:var(--bad-soft);border-color:var(--bad);color:var(--bad);font-weight:600}
.cxtog.soft{background:#FFF1DC;border-color:#E0A040;color:#A0620A;font-weight:600}
[data-theme="dark"] .cxtog.soft{background:#3A2E18;border-color:#8A6A2A;color:#F0B85A}
.cxpaint{margin-bottom:8px;display:flex;flex-wrap:wrap;gap:6px}
/* שעה מועדפת מסומנת בתוך אותו לוח של החסימות — לא בלוח שני */
.cxpref{display:block;font-size:11px;font-weight:700;color:var(--accent)}
table.tt td.prefer{box-shadow:inset 0 0 0 2px var(--accent)}
.cxgridwrap{margin-top:4px}
@media (max-width:980px){
  /* ⚠ בטלפון אין מקום לשתי עמודות. הרשימה נעשית שורה נמוכה שנגללת,
     והפאנל מתחתיה — כדי שהבחירה תישאר גלויה בזמן העריכה. */
  .cxsplit{grid-template-columns:1fr}
  .cxlistcol{position:static;max-height:172px}
  .cxfields{grid-template-columns:1fr 1fr}
}
@media print{
  .cxlistcol,.cxpaint,.cxphead .btn{display:none!important}
  .cxsplit{display:block}
  .cxbox{break-inside:avoid;border-color:#999}
}


/* ⚠ במצב כהה ההדרגתיות הבהירה של מסך הכניסה נראתה כמו כתם. אותו
   רעיון, בעוצמה שמתאימה לרקע כהה. */
:root[data-theme="dark"] .loginwrap::after{
  background:
    radial-gradient(90% 55% at 50% -8%,rgba(47,111,98,0.24),transparent 68%),
    var(--paper);
  background:
    radial-gradient(90% 55% at 50% -8%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 68%),
    var(--paper);
}
:root[data-theme="dark"] .logincard{
  box-shadow:0 1px 2px rgba(0,0,0,.4),0 10px 24px -8px rgba(0,0,0,.5),0 34px 64px -24px rgba(0,0,0,.6);
}


/* ⚠⚠ **ימי פעילות — שורה במקום טבלה (3.50).** נמדד: הטבלה הייתה
   208px רחבה בתוך אזור של 998 (790 ריקים) ו-412px גבוהה. שישה ימים
   קצרים נכנסים בשורה אחת ואינם גדלים לעולם. */
.daysrow{display:flex;flex-wrap:wrap;gap:10px}
.daycard{
  flex:1 1 130px;max-width:190px;border:1px solid var(--rule);border-radius:12px;
  padding:10px 12px;background:var(--surface);transition:border-color .12s,background .12s;
}
/* ⚠ יום פעיל בולט — זו ההחלטה העיקרית בכרטיס. */
.daycard.on{border-color:rgba(47,111,98,0.45);background:#f0f6f4}
.daycard.on{border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  background:color-mix(in srgb,var(--accent-soft) 60%,var(--surface))}
.daycard .dayname{display:flex;align-items:center;gap:8px;cursor:pointer;
  font-weight:700;font-size:14.5px;margin:0}
.daycard .dayhours{display:flex;align-items:center;gap:8px;margin:8px 0 0}
.daycard .dayhours span{font-size:12px;color:var(--ink-soft)}
.daycard .dayhours input{width:64px;padding:6px 8px;border-radius:8px}
.daycard .dayhours input:disabled{opacity:.45}
@media(max-width:620px){.daycard{flex:1 1 calc(50% - 10px);max-width:none}}


/* ⚠⚠ **שרשור פניות (3.51).** עד כאן פנייה החזיקה תשובה אחת ויחידה,
   ולבית הספר לא הייתה דרך לענות בחזרה — כלומר כל המשך שיחה עבר
   לטלפון וההקשר אבד. בועות בשני צדדים, כמו כל שיחה שאנשים מכירים. */
.fbthread{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.fbmsg{max-width:86%;border-radius:12px;padding:8px 11px;font-size:14px;line-height:1.5}
.fbmsg p{margin:2px 0 0;white-space:pre-line}
.fbwho{display:block;font-size:11px;opacity:.72;font-weight:700}
/* בית הספר מימין (זה "אנחנו" במסך שלהם), אריאל משמאל */
.fbmsg.sch{align-self:flex-start;background:var(--paper);border:1px solid var(--rule)}
.fbmsg.dev{align-self:flex-end;background:var(--accent-soft);
  border:1px solid rgba(47,111,98,0.3);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}


/* ⚠ המקרא והלוח הקומפקטי (3.54) ירדו ב-3.56 יחד עם הטבלה:
   אריאל — "זה לא עוזר לי לראות את המערכת שעות הקטנה הזו". במקומם
   יש לוח בגודל מלא בפאנל, שמילים כתובות בו ולא רק צבע. */
@media print{
  /* שורה בפאנל לא נחתכת בין שני עמודים */
  #printArea .cxbox{page-break-inside:avoid}
}