/* ============================================================
   main.css: העיצוב המשותף של כל האתר

   נטען בכל דף: צד הלקוח (app/), אזור הניהול של היועץ (admin/) ודפי
   הכניסה. דף יכול להוסיף מעליו style משלו או קובץ נוסף (platform.css,
   my-settings.css, pending-delete.css).

   צבעים: כל הצבעים כאן הם משתני CSS שמוגדרים ב :root, למשל --o-500
   לצבע המותג, --bg לרקע ו --menu-* לתפריט. הערכים שכתובים בקובץ הם
   ברירת המחדל בלבד. theme.js מחליף אותם בזמן ריצה לפי המיתוג של כל
   יועץ (צבע כפתורים, רקע, צבע תפריט, פונט וסגנון כפתורים). לכן בכללים
   עצמם לא כותבים צבע קבוע, אלא var(--שם המשתנה).

   תוכן עניינים (לחיפוש עם Ctrl+F, השמות זהים לכותרות המקטעים):
     משתנים: צבעים, רדיוסים וצללים
     ערכת התפריט (סרגל הצד, סרגל המחלקות, המגירה בטלפון)
     בסיס: שמות ישנים, hidden, גלילה, גופן וקישורים
     כפתורים
     תגיות סטטוס
     דפים כהים (התחברות / המתנה / 404)
     מעטפת האפליקציה
     שורת תפריט = שורה אחת, תמיד
     אזור ראשי
     ערימת המסגרות: המוח ומסך נפרד באותו שטח
     כרטיסים
     טפסים
     טבלה
     טאבים
     מחשבון
     באנר תצוגה מקדימה
     ריק / הודעות
     באנר התקנת אפליקציה
     רספונסיבי
     כותרת קטגוריה בתפריט הצד
     מצב פאנל (embed=1): דף בתוך חלון נשלף
     חלון קופץ כללי (אישור לקוחות ועוד)
     מתג מצב: המוח | אישי (רק אצל יועץ)
     סדר שונה בטלפון
     עיצוב התפריט: לוגו, מתג מצב וכרטיס משתמש
     סרגל המחלקות: במוח בלבד
     חלון ליד רחב יותר בתוך המוח (נטען מתוך ה-iframe)
     שדות כסף: פסיקים וסימן ₪ אחרי הסכום
     תאי סכום בתצוגה
     פריט תפריט שעוד לא נבנה
     פס "תצוגת לקוח"
     שלד טעינה: מבנה מלא מיד, נתונים אחר כך
     סרגל לשוניות תחתון (טלפון, צד הלקוח)
     מעבר בין עמודים
     באנר משפטי תחתון
     חלון אישור והודעה חולפת
     נעילת גלילה מאחורי שכבות
     מסמך בחלון קופץ
     יצירת קשר: כרטיס הפרטים של היועץ וכפתור לדיווח תקלה
     אייפון: הזום המיותר בלחיצה על שדה
     תוסף הנגישות
     YTMini: נגן יוטיוב מינימלי (assets/js/yt-mini.js)
     נגישות: טבעת מיקוד אחידה במקלדת
     נגישות: קישורים בתוך טקסט
   ============================================================ */

/* ---------- משתנים: צבעים, רדיוסים וצללים ---------- */
:root {
  /* כתום, צבע המותג */
  --o-rgb: 255, 107, 26;   /* אותו כתום כמספרים, בשביל צללים ושקיפויות */
  /* גם הגוון המשני כמספרים. כלל אחד בגיליון היה צריך אותו ככתובת
     קשיחה ולכן כל יועץ קיבל שם כתם כתום גם כשבחר צבע אחר. */
  --o-300-rgb: 255, 167, 102;
  --o-500: #FF6B1A;
  --o-400: #FF8A3D;
  --o-300: #FFA766;
  --o-600: #ED5A0A;
  --o-700: #C9450A;
  --o-soft: rgba(255, 107, 26, .12);
  --o-soft-2: rgba(255, 107, 26, .22);
  --o-glow: rgba(255, 107, 26, .55);

  /* כהים */
  --ink: #0A0A0C;
  --ink-2: #101014;
  --char: #17171C;
  --char-2: #1F1F26;
  --char-line: rgba(255, 255, 255, .09);

  /* בהירים */
  --cream: #FDF9F4;
  --cream-2: #F7F0E7;
  --cream-3: #EFE6DA;
  --line: rgba(20, 16, 12, .09);

  /* אליאסים למודולים (דפי תקציב/מטרות/מסמכים וכו׳) */
  --bg: #F7F0E7;
  --card: #FFFFFF;
  --t: #14100C;
  --brand: #FF6B1A;

  /* טקסט */
  --t-dark: #14100C;
  --t-body: #56504A;
  --t-mute: #6B635B;   /* היה #8A827A (3.3 עד 3.8 : 1). עכשיו לפחות 4.5 : 1 על כל רקע בהיר באתר */
  --t-light: #FFFFFF;
  --t-light-body: rgba(255, 255, 255, .72);
  --t-light-mute: rgba(255, 255, 255, .48);

  /* צבע המותג ומצבי הסטטוס ככתב על הדף. משטח וכתב הם שני דברים
     שונים: את הכתום המלא אפשר לצייר כרקע כפתור, אבל ככתב על קרם הוא
     3.3:1 בלבד. ברירת המחדל כאן זהה למה שהיה, הגזירה מתרחשת ב-theme.js
     ורק כשהמיתוג אינו ברירת המחדל, כדי שהמראה הקיים לא יזוז. */
  --brand-ink: #B23C06;   /* כתום ככתב. היה --o-600 (3.5 : 1). theme.js גוזר ערך משלו לכל מיתוג אחר */
  --brand-ink-2: #A63805;
  --brand-ink-strong: #A63805;   /* במקום --o-700 ככתב. מיתוג אחר: theme.js מחזיר את --o-700 שלו */   /* גרסה חזקה יותר (מספר מודגש בקופסה) */
  --ok-ink: #1D7049;
  --no-ink: #B03A27;
  --warn-ink: #806000;

  /* מצבים */
  --ok: #2E9E6B;
  --ok-soft: rgba(46, 158, 107, .12);
  --no: #C8503C;
  --no-soft: rgba(200, 80, 60, .12);
  --warn: #C98A0A;
  --warn-soft: rgba(201, 138, 10, .14);

  /* רדיוסים וצללים */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(20, 16, 12, .04), 0 4px 14px rgba(20, 16, 12, .05);
  --sh-2: 0 2px 6px rgba(20, 16, 12, .05), 0 14px 38px rgba(20, 16, 12, .08);
  --sh-cta: 0 8px 30px rgba(255, 107, 26, .32);
  --sh-cta-h: 0 12px 42px rgba(255, 107, 26, .46);
  --sh-up: 0 -6px 20px rgba(0, 0, 0, .06);   /* צל כלפי מעלה (הסרגל התחתון) */

  /* כיתוב על משטח בצבע המותג. ברירת המחדל נשארת לבן, כך המראה
     הקיים לא זז; theme.js גוזר את הערך מול שני קצות מדרון הכפתור
     בכל מיתוג אחר. */
  --on-brand: #FFFFFF;
  /* משטח של כפתור עם כיתוב (כפתור ראשי, גלולה פעילה, בחירה מסומנת). כתום כהה יותר
     מהמשטחים הקישוטיים, כדי שלבן עליו יעבור 4.5 : 1. מיתוג אחר: theme.js מחזיר
     לכאן את --o-400 ו --o-600 שלו. */
  --btn-a: #C9450A;
  --btn-b: #B23C06;
  --btn-solid: #B23C06;   /* אותו משטח, כשהיה צבע אחיד (--o-500) */
  --hdr-a: #C9450A;
  --hdr-b: #A63805;   /* פס הכותרת הכתום במסכי ההגדרות, עם כותרת לבנה */
  --ok-btn: #1D7049;   /* כפתור או סימון ירוק עם כיתוב לבן */
  --on-hdr: #FFFFFF; --on-brand-shade: rgba(0,0,0,.18);   /* כיתוב על פס הכותרת. במיתוג אחר theme.js גוזר */
  --pulled-bg: #FDE6D2; --pulled-bg-h: #FBD9BE; --pulled-line: #F6C9A3;   /* תאים "נשלף" בתקציב */
  --no-btn: #B03A27;   /* כפתור מחיקה וחסימה: לבן עליו 6 : 1, קבוע בכל מיתוג */
  --sidebar-w: 268px;
  --topbar-h: 68px;

  /* ---------- ערכת התפריט (סרגל הצד, סרגל המחלקות, המגירה בטלפון) ----------
     כאן יושבת ברירת המחדל בלבד, הפחם הכהה של האתר, בדיוק בערכים
     שהיו קודם קשיחים בתוך הכללים עצמם. כשהיועץ בוחר צבע תפריט,
     theme.js גוזר את כל הרשימה הזאת מחדש (menuVars) ודורס אותה
     ב-:root. מכאן והלאה אין בכללי התפריט אף צבע קשיח: כל rgba לבן
     היה הנחה שהתפריט כהה וזו הייתה כל התקלה. */
  --menu-1: #0A0A0C;                              /* משטח התפריט */
  --menu-2: #141419;                              /* סוף המדרון */
  --menu-grad: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 60%, #141419 100%);
  --menu-grad-bar: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);  /* סרגל המחלקות, נמוך יותר */
  --menu-ink: #FFFFFF;                            /* כתב ראשי */
  --menu-ink-body: rgba(255, 255, 255, .72);      /* כתב פריט */
  --menu-ink-mute: rgba(255, 255, 255, .48);      /* כתב משני */
  --menu-dept-ink: rgba(255, 255, 255, .62);      /* לשונית מחלקה כבויה */
  --menu-sec: #A39B92;   /* כותרת קטגוריה. היה --t-mute: אחרי שהוא הוכהה לטקסט על רקע בהיר ירד כאן ל 2.7 : 1 על התפריט הכהה. עכשיו 4.8 ומעלה */
  --menu-sec-a: .85;                              /* השקיפות ההיסטורית שלה */
  --menu-sub: var(--o-400);                       /* תת־כותרת הלוגו */
  --menu-when-a: .66;                             /* שקיפות תגית המועד ("מוסתר"). .62 נתן 4.46 : 1, .66 נותן 4.9 */
  --menu-line: rgba(255, 255, 255, .09);          /* קווי הפרדה פנימיים */
  --menu-switch-bg: rgba(255, 255, 255, .045);    /* משטח מתג המצב */
  --menu-switch-line: rgba(255, 255, 255, .07);
  --menu-edge: rgba(0, 0, 0, .06);                /* הקצה מול התוכן */
  --menu-dept-line: rgba(255, 255, 255, .08);     /* תחתית סרגל המחלקות */
  --menu-hover: rgba(255, 255, 255, .05);         /* ריחוף */
  --menu-hover-soft: rgba(255, 255, 255, .04);    /* ריחוף עדין (התנתקות) */
  --menu-hover-2: rgba(255, 255, 255, .075);      /* ריחוף בסרגל המחלקות */
  --menu-active-bg: var(--o-soft-2);              /* הפריט הפעיל */
  --menu-active-edge: transparent;               /* קו הקצה של הפריט הפעיל, נצבע רק במיתוג עם צבע תפריט */
  --menu-active-ink: var(--o-300);
  --menu-active-icon: var(--o-400);
  --menu-accent: linear-gradient(135deg, var(--btn-a), var(--btn-b));  /* גלולה מלאה */
  --menu-accent-solid: var(--btn-solid);
  --menu-accent-ink: var(--on-brand);
  /* שלושת הזוהרים סביב הגלולה נבדלים בעוצמה בלבד ולכן נשמר כאן
     הצבע כשלושה מספרים והעוצמה נשארת בכלל עצמו, כך הערכים
     ההיסטוריים (.34 / .35 / .38) לא זזים */
  --menu-accent-rgb: var(--o-rgb);
  /* עוצמת הגלולות בתפריט: 1 = הצבע המלא. theme.js מוריד את זה רק
     כשהיועץ ביקש גלולות מרוככות וגם ההילה סביבן נחלשת איתו */
  --menu-glow: 1;
  --menu-chip-bg: rgba(201, 138, 10, .18);        /* שבב "בבנייה" */
  --menu-chip-ink: var(--warn);
  --menu-chip2-bg: rgba(255, 255, 255, .09);      /* שבב "בקרוב" */
  --menu-chip2-ink: rgba(255, 255, 255, .5);
  --menu-soon: rgba(255, 255, 255, .34);          /* פריט שעוד לא נבנה */
  --menu-soon-a: .55;                             /* שקיפות האייקון שלו */
  --menu-avatar-bg: linear-gradient(135deg, var(--btn-a), var(--btn-b));
  --menu-avatar-ink: var(--on-brand);
  --menu-logout: rgba(255, 255, 255, .48);
  --menu-logout-h: var(--no);
  --menu-scroll: rgba(255, 255, 255, .18);        /* פס גלילה (פיירפוקס) */
  --menu-scroll-thumb: rgba(255, 255, 255, .16);  /* פס גלילה (כרום) */
  --menu-focus: rgba(255, 255, 255, .85);         /* טבעת מיקוד */
  --menu-fab-bg: rgba(255, 255, 255, .11);        /* כפתור התפריט בסרגל */
  --menu-fab-bg-h: rgba(255, 255, 255, .18);
  --menu-fab-line: rgba(255, 255, 255, .12);
  --menu-fab-bar-line: rgba(255, 255, 255, .16);
  --menu-fab-sh: 0 6px 20px rgba(0, 0, 0, .28);   /* הכפתור הצף בטלפון */
  --menu-fab-ink: #FFFFFF;
  /* אותו כפתור תפריט, בצורה שיושבת בתוך כותרת הדף ואותו מראה
     בדיוק כמו הצורה הצפה. עד עכשיו הצורה הזאת הייתה כתם כתום בהיר
     ואילו הצפה עיגול כהה ולכן אותו כפתור החליף צבע בין מסך למסך
     ואפילו בין טעינה לטעינה, תלוי מה הספיק להיבנות ראשון.
     theme.js כבר השווה ביניהם בכל מיתוג של יועץ; כאן זה נסגר גם
     בברירת המחדל, שבה הוא לא רץ. */
  --menu-fab-head-bg: var(--menu-1);
  --menu-fab-head-ink: var(--menu-fab-ink);
  --menu-fab-head-line: var(--menu-fab-line);
  --menu-fab-head-sh: var(--menu-fab-sh);
  /* לוח מאחורי הלוגו של "המוח", ריק בברירת המחדל, נגזר בתפריט בהיר */
  --menu-logo-bg: transparent;
  --menu-logo-pad: 0px;
  --menu-logo-r: 0px;
  --menu-sh: none;                                /* צל התפריט במחשב */
  --menu-sh-bar: none;                            /* צל סרגל המחלקות */
  --menu-drawer-sh: -20px 0 60px rgba(0, 0, 0, .35);  /* צל המגירה בטלפון */
}

/* ---------- בסיס: שמות ישנים, hidden, גלילה, גופן וקישורים ---------- */
/* השמות הישנים ממשיכים לעבוד, אבל רק בתוך התפריט עצמו. מחוץ לו
   --char ו---t-light הם צבעי המשטחים הכהים הקבועים של האתר (כרטיס
   ההתחברות, באנר ההתקנה, פס התצוגה המקדימה) ולכן צבע תפריט בהיר
   לא צריך ולא רשאי להפוך אותם ללא קריאים. זו הייתה תקלה אמיתית:
   בחירת תפריט לבן החזירה כתב כמעט־שחור על כרטיס התחברות כהה. */
.sidebar, .topbar.topbar-depts, .menu-surface {
  --char: var(--menu-1);
  --char-2: var(--menu-2);
  --char-line: var(--menu-line);
  --t-light: var(--menu-ink);
  --t-light-body: var(--menu-ink-body);
  --t-light-mute: var(--menu-ink-mute);
}

/* hidden חייב לנצח כל display אחר. בלי זה כפתור עם .btn (display:inline-flex)
   נשאר גלוי גם כשמסתירים אותו, ככה "לוח הפלטפורמה" הופיע לכל יועץ. */
[hidden] { display: none !important; }

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

html {
  /* גלילה חלקה לעוגנים. בלי תנועה כשהמכשיר מבקש פחות תנועה או כשבווידג'ט
     הנגישות לחצו "השהיית אנימציות" (ראו "הפחתת תנועה" בסוף הקובץ) */
  scroll-behavior: smooth;
  /* שומרים מקום לפס הגלילה תמיד, אחרת כשהוא מופיע/נעלם כל הפריסה זזה
     והתפריט נראה כאילו הוא משנה רוחב בין המסכים */
  scrollbar-gutter: stable;
  overflow-y: scroll;
}
/* מסך בתוך מסגרת (תצוגת לקוח): פס גלילה רק כשבאמת יש מה לגלול.
   עם פס קבוע בכל מסגרת, תצוגת לקוח הציגה שלושה פסי גלילה זה בתוך זה
   ונראתה כמו דף בתוך דף בתוך דף.
   המעטפת של המוח כן שומרת את המקום לפס, כמו כל דף אחר: בלעדיו התפריט
   השחור זז ב 15 פיקסלים וגדל לעין בכל מעבר בין "המוח" ל"אישי" (25.9). */
html.embed { overflow-y: auto; scrollbar-gutter: auto; }
html.embed { scrollbar-width: thin; }
/* מסך בתוך מסגרת מוצג תמיד ברוחב המסגרת. גלישה לרוחב שם היא תמיד
   תקלה (למשל שורה שמתרחבת לרגע בזמן הטעינה) ולא משהו לגלול אליו
   ולכן בלי פס גלילה אופקי. טבלות רחבות נגללות בתוך המיכל שלהן. */
html.embed { overflow-x: hidden; }

/* מעבר חלק בין דפים (@view-transition), עבר ל-theme.js ומופעל רק
   בחלון העליון. כשהוא היה כאן הוא חל גם על מסך שחי בתוך מסגרת של
   המעטפת ובמחשב, שבו לדף יש פס גלילה אמיתי, כל ניווט של המסגרת
   (לחיצה על כרטיס ב"הגדרות אתר" או "חזור") הפיל את הדפדפן: "אוו, סנאפ"
   עם הפנים העצובות. בטלפון אין פס גלילה ולכן שם זה לא קרה. */

body {
  font-family: 'Heebo', 'Segoe UI', 'Arial Hebrew', system-ui, sans-serif;
  background: var(--cream);
  color: var(--t-body);
  direction: rtl;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--t-dark); font-weight: 800; line-height: 1.25; }
/* קישור הוא טקסט ולכן הוא לוקח את הגוון שנקרא על הדף ולא את גוון
   המשטח. הכתום המלא נותן 3.3:1 על קרם, קישור שלא עומד בסף. */
a { color: var(--brand-ink); text-decoration: none; }
img { max-width: 100%; }

::selection { background: var(--o-soft-2); }

/* ---------- כפתורים ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--r-pill);
  padding: 12px 26px;
  /* כשהכיתוב יורד שורה, שתי השורות ממורכזות, לא רק הבלוק */
  text-align: center;
  line-height: 1.25;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, opacity .2s;
}
/* כפתורים קצרים לא יורדים שורה בכלל */
.btn-sm, .btn-light, .btn-ghost { white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--btn-a), var(--btn-b));
  color: var(--on-brand);
  box-shadow: var(--sh-cta);
}
.btn-primary:hover { box-shadow: var(--sh-cta-h); transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: var(--t-body);
  border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--o-500); color: var(--brand-ink); }
.btn-light {
  background: var(--card);
  color: var(--t-dark);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
}
.btn-light:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }
.btn-sm { padding: 7px 16px; font-size: 13px; }
.btn-ok { background: var(--ok-btn); color: #fff; }
.btn-no { background: var(--no-btn); color: #fff; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- תגיות סטטוס ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: var(--r-pill);
  padding: 4px 12px;
}
.chip-build { background: var(--warn-soft); color: var(--warn-ink); }
.chip-ok { background: var(--ok-soft); color: var(--ok-ink); }
.chip-orange { background: var(--o-soft); color: var(--brand-ink); }
.chip-muted { background: var(--cream-3); color: var(--t-mute); }
.chip-no { background: var(--no-soft); color: var(--no-ink); }

/* ---------- דפים כהים (התחברות / המתנה / 404) ---------- */
.dark-page {
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(var(--o-rgb), .16), transparent 60%),
    radial-gradient(700px 420px at 10% 110%, rgba(var(--o-rgb), .10), transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  color: var(--t-light-body);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-card {
  width: 100%;
  max-width: 440px;
  background: linear-gradient(180deg, var(--char) 0%, var(--ink-2) 100%);
  border: 1px solid var(--char-line);
  border-radius: var(--r-xl);
  padding: 44px 36px 36px;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.auth-logo { margin-bottom: 26px; }
.auth-logo .logo-name {
  font-size: 30px;
  font-weight: 900;
  color: var(--t-light);
  letter-spacing: .5px;
}
.auth-logo .logo-sub {
  color: var(--o-400);
  font-weight: 700;
  font-size: 15px;
  margin-top: 2px;
}
.auth-card h1 { color: var(--t-light); font-size: 24px; margin-bottom: 8px; }
.auth-card .auth-sub { color: var(--t-light-body); font-size: 15px; margin-bottom: 28px; }
.auth-note {
  margin-top: 22px;
  font-size: 13px;
  color: var(--t-light-mute);
  line-height: 1.6;
}
.auth-msg {
  display: none;
  margin-top: 18px;
  background: var(--o-soft);
  border: 1px solid var(--o-soft-2);
  color: var(--o-300);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.6;
}
.auth-msg.show { display: block; }
.auth-footer { margin-top: 26px; font-size: 13px; color: var(--t-light-mute); }
.auth-footer a { color: var(--t-light-mute); }
.auth-footer a:hover { color: var(--o-300); }
.google-btn { width: 100%; padding: 13px 20px; font-size: 15.5px; }
.google-btn svg { flex: none; }

/* ---------- מעטפת האפליקציה ---------- */
/* --shell-h = מה שנשאר למעטפת אחרי הבאנר שמעליה והבאנר המשפטי שמתחתיה.
   הסקריפט מעדכן אותו; 100vh היא רשת ביטחון אם הוא לא רץ. */
.shell { display: flex; min-height: var(--shell-h, 100vh); }

/* סרגל צד */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  max-width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--menu-grad);
  border-left: 1px solid var(--menu-edge);
  box-shadow: var(--menu-sh);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  position: sticky;
  top: 0;
  height: var(--shell-h, 100vh);
  /* התפריט לא גולש מחוץ לרקע השחור, הפריטים נגללים בפנים.
     כשאין מספיק גובה (זום גבוה, מסך נמוך, הגדלת טקסט בווידג'ט) רשימת הפריטים
     הייתה נמחצת לאפס ונשארו רק הלוגו והתחתית. עכשיו הרשימה שומרת גובה מינימלי
     (nav-list למטה) והתפריט כולו נגלל. בגובה רגיל אין גלילה והמראה זהה. */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--menu-scroll) transparent;
}
.sidebar .brand { padding: 4px 10px 20px; border-bottom: 1px solid var(--menu-line); margin-bottom: 18px; }
.sidebar .brand .logo-name { color: var(--menu-ink); font-weight: 900; font-size: 21px; display: block; }
/* תת־הכותרת נשענת על ההדגשה של התפריט ולא על צבע המותג הגולמי:
   מותג בגוון קרוב לצבע התפריט פשוט נעלם כאן */
.sidebar .brand .logo-sub { color: var(--menu-sub); font-weight: 700; font-size: 12.5px; }
.nav-list {
  list-style: none; display: flex; flex-direction: column; gap: 4px;
  flex: 1 1 auto; min-height: 176px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--menu-scroll) transparent;
}
.nav-list::-webkit-scrollbar { width: 6px; }
.nav-list::-webkit-scrollbar-thumb { background: var(--menu-scroll-thumb); border-radius: 99px; }
.nav-list::-webkit-scrollbar-track { background: transparent; }
.nav-item a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-radius: var(--r-md);
  color: var(--menu-ink-body);
  font-weight: 500;
  font-size: 14.5px;
  /* קטן מגובה האייקון (19px) ולכן גובה השורה נקבע על ידי האייקון בלבד
     ולא משתנה בין תווית לתווית */
  line-height: 1.25;
  transition: background .15s, color .15s;
}
.nav-item a:hover { background: var(--menu-hover); color: var(--menu-ink); }
.nav-item a.active {
  background: var(--menu-active-bg);
  color: var(--menu-active-ink);
  font-weight: 700;
  /* הקו יושב בקצה ההתחלה של השורה (בעברית: בימין) */
  box-shadow: inset -3px 0 0 0 var(--menu-active-edge);
}
.nav-item a.active svg { color: var(--menu-active-icon); }
.nav-item svg { width: 19px; height: 19px; flex: none; opacity: .9; }
/* ---------- שורת תפריט = שורה אחת, תמיד ----------
   קודם ישב כאן overflow-wrap:anywhere על כל ילד של השורה, בעוד הרמז
   שלצד התווית היה flex:none. התוצאה: רמז ארוך (שם מפגש שהיועץ כתב
   בעצמו, למשל "פגישה 2: תוכנית כלכלית") לא ויתר על רוחב, התווית
   נשברה לשורה שנייה ולפעמים לחמש והשורה גדלה מ-41px ל-262px.
   עכשיו: התווית לוקחת את מה שנשאר ומתקצרת בשלוש נקודות, הרמז חסום
   ב-40% מרוחב השורה ומתקצר גם הוא ושום דבר לא נשבר לשורה שנייה. */
.nav-list, .nav-item, .nav-sec, .side-foot, .mode-switch { min-width: 0; }
.nav-item .nav-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-item .mini-chip {
  margin-inline-start: auto;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--menu-chip-ink);
  background: var(--menu-chip-bg);
  border-radius: var(--r-pill);
  padding: 2px 8px;
  flex: none;
  white-space: nowrap;
}
.nav-item .nav-when {
  margin-inline-start: auto;
  font-size: 10.5px;
  font-weight: 700;
  /* opacity מעל כתב שכבר שקוף נותן יחד 4.47:1, בדיוק מתחת לסף.
     בברירת המחדל היא נשמרת כפי שהייתה; בכל צבע תפריט אחר theme.js
     מאפס אותה והצבע מגיע שלם מהערכה */
  color: var(--menu-ink-body);
  opacity: var(--menu-when-a);
  white-space: nowrap;
  flex: none;
  /* גבול עליון לרמז, כדי שהתווית תמיד תקבל את רוב השורה. מה שלא נכנס
     מתקצר בשלוש נקודות והטקסט המלא יושב ב-title */
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar .side-foot { flex: none; border-top: 1px solid var(--menu-line); padding-top: 12px; }
.sidebar .side-foot a { color: var(--menu-logout); font-size: 13px; display: flex; gap: 9px; align-items: center; padding: 8px 14px; border-radius: var(--r-md); }
.sidebar .side-foot a svg { width: 18px; height: 18px; flex: none; }
.sidebar .side-foot a:hover { color: var(--menu-logout-h); background: var(--menu-hover-soft); }

/* ---------- אזור ראשי ---------- */
.main-area { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: var(--topbar-h);
  background: rgba(253, 249, 244, .85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.content { padding: 30px 32px 60px; max-width: 1180px; width: 100%; margin: 0 auto; }
.content.content-flush { padding: 0; max-width: none; margin: 0; }
iframe.admin-app { width: 100%; height: var(--stack-h, calc(100vh - var(--topbar-h))); border: 0; display: block; background: var(--bg); }

/* ---------- ערימת המסגרות: המוח ומסך נפרד באותו שטח ----------
   הערימה היא שמחזיקה את הגובה; המסגרות ממלאות אותה במלואה. כך שתיהן
   בדיוק באותו מקום, אין גלילה כפולה (הגלילה קורית בתוך המסגרת) ואין
   פס ריק בתחתית כשמחליפים ביניהן.

   המסגרת המוסתרת מקבלת visibility ולא display:none, מסגרת שיצאה
   מהזרימה מאבדת את הרוחב שלה וכשהיא חוזרת כל מה שנמדד לפי רוחב נבנה
   מחדש. visibility שומרת על הגודל, מבטלת לחיצות ולא טוענת שום דבר שוב. */
.frame-stack { position: relative; width: 100%; height: var(--stack-h, 100vh); }
.frame-stack > iframe.admin-app,
.frame-stack > iframe.admin-page {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
}
/* אותו רקע כמו הדף שנטען בתוכה: בלי זה נראה הבזק לבן עד שהדף מוכן */
.frame-stack > iframe.admin-page { background: var(--bg); }
.frame-stack > iframe.is-off { visibility: hidden; }
/* במסך המוח המעטפת בגובה המסך בדיוק והערימה ממלאת את כל מה שנשאר
   מתחת לסרגל המחלקות, בלי חישוב. קודם הגובה של הערימה חושב בקוד וכשסרגל
   המחלקות שינה גובה אחרי המדידה, המעטפת עצמה קיבלה פס גלילה (הפס בצד ימין
   בתצוגת לקוח) והסרגל ברח למעלה. */
html:has(.frame-stack) .shell { height: var(--shell-h, 100dvh); min-height: 0; }
html:has(.frame-stack) .main-area { min-height: 0; }
html:has(.frame-stack) .content.content-flush { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
html:has(.frame-stack) .frame-stack { flex: 1 1 auto; min-height: 0; height: auto !important; }
/* המעטפת של המוח אף פעם לא נגללת: כל הגלילה קורית בתוך המסגרת. בלי
   זה הופיע פס גלילה בקצה המסך, מאחורי התפריט, מעל פס הגלילה של התוכן. */
html:has(.frame-stack), html:has(.frame-stack) body { overflow: hidden !important; }

/* ---------- כרטיסים ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: 26px;
}
.card + .card { margin-top: 20px; }
.card h2 { font-size: 19px; margin-bottom: 6px; }
.card .card-sub { color: var(--t-mute); font-size: 14px; }

.grid { display: grid; gap: 18px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.stat-card { text-align: center; padding: 22px 16px; }
.stat-card .stat-num { font-size: 34px; font-weight: 900; color: var(--t-dark); line-height: 1.1; }
.stat-card .stat-num.orange { color: var(--brand-ink); }
.stat-card .stat-label { font-size: 13px; color: var(--t-mute); font-weight: 600; margin-top: 4px; }

/* ---------- טפסים ---------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13.5px; font-weight: 700; color: var(--t-dark); }
.field input, .field select {
  font-family: inherit;
  font-size: 15px;
  color: var(--t-dark);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus {
  border-color: var(--o-400);
  box-shadow: 0 0 0 3px var(--o-soft);
  background: var(--card);
}
.field .hint { font-size: 12px; color: var(--t-mute); }

/* ---------- טבלה ---------- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th {
  text-align: right;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-mute);
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  white-space: nowrap;
}
table.data td { padding: 13px 12px; border-bottom: 1px solid var(--line); color: var(--t-body); vertical-align: middle; }
table.data tr:last-child td { border-bottom: none; }
table.data .cell-user { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--t-dark); }
table.data .cell-user .avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--btn-a), var(--btn-b));
  color: var(--on-brand); font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none;
}
table.data .cell-user .avatar img { width: 100%; height: 100%; object-fit: cover; }
.row-actions { display: flex; gap: 8px; }

/* ---------- טאבים ---------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.tab-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--t-body);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 9px 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all .15s;
}
.tab-btn:hover { border-color: var(--o-400); color: var(--brand-ink); }
.tab-btn.active {
  background: linear-gradient(135deg, var(--btn-a), var(--btn-b));
  border-color: transparent;
  color: var(--on-brand);
  box-shadow: var(--sh-cta);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---------- מחשבון ---------- */
.calc-grid { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; }
canvas#calcChart { width: 100%; height: 260px; }

/* ---------- באנר תצוגה מקדימה ---------- */
.preview-banner {
  background: linear-gradient(90deg, var(--char), var(--char-2));
  color: var(--t-light-body);
  font-size: 13px;
  text-align: center;
  padding: 9px 16px;
  border-bottom: 1px solid var(--char-line);
}
.preview-banner b { color: var(--o-300); }

/* ---------- ריק / הודעות ---------- */
.empty-state { text-align: center; padding: 40px 20px; color: var(--t-mute); font-size: 14px; line-height: 1.7; }
.page-head { margin-bottom: 24px; }
.page-head h1 { font-size: 26px; margin-bottom: 6px; }
.page-head p { color: var(--t-mute); font-size: 14.5px; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin: 30px 0 14px; }
.section-title h2 { font-size: 18px; }

/* ---------- באנר התקנת אפליקציה ---------- */
.pwa-banner {
  position: fixed;
  inset-inline: 14px;
  bottom: 14px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--char) 0%, var(--ink-2) 100%);
  border: 1px solid var(--char-line);
  border-radius: var(--r-md);
  padding: 12px 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  max-width: 440px;
  margin-inline: auto;
  transform: translateY(120%);
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
}
.pwa-banner.show { transform: translateY(0); opacity: 1; }
.pwa-banner .pwa-ico { width: 44px; height: 44px; border-radius: 12px; flex: none; }
.pwa-banner .pwa-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pwa-banner .pwa-txt b { color: var(--t-light); font-size: 14px; }
.pwa-banner .pwa-txt span { color: var(--t-light-mute); font-size: 12px; }
.pwa-banner .pwa-install {
  background: linear-gradient(135deg, var(--btn-a), var(--btn-b));
  color: var(--on-brand); border: none; border-radius: var(--r-pill);
  font-family: inherit; font-weight: 700; font-size: 13.5px;
  padding: 9px 18px; cursor: pointer; flex: none;
  box-shadow: var(--sh-cta);
}
.pwa-banner .pwa-close { background: none; border: none; color: var(--t-light-mute); font-size: 15px; cursor: pointer; padding: 4px; flex: none; }
.pwa-modal-bg { position: fixed; inset: 0; background: rgba(10, 10, 12, .6); z-index: 95; display: flex; align-items: center; justify-content: center; padding: 20px; }
.pwa-modal {
  background: linear-gradient(180deg, var(--char) 0%, var(--ink-2) 100%);
  border: 1px solid var(--char-line);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  max-width: 360px; width: 100%;
  color: var(--t-light-body);
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.pwa-modal h3 { color: var(--t-light); margin: 0 0 14px; font-size: 18px; }
.pwa-modal ol { text-align: right; margin: 0 0 18px; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.6; }
.pwa-modal b { color: var(--o-300); }
.pwa-modal .pwa-share { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--char-line); border-radius: 6px; color: var(--o-300); font-size: 14px; }
.pwa-modal .pwa-got {
  background: linear-gradient(135deg, var(--btn-a), var(--btn-b));
  color: var(--on-brand); border: none; border-radius: var(--r-pill);
  font-family: inherit; font-weight: 700; font-size: 14px;
  padding: 11px 30px; cursor: pointer;
}

/* ---------- רספונסיבי ---------- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .calc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* בטלפון אין סרגל גלילה קבוע, שומר רוחב לחינם ומזיז את התפריט */
  html { scrollbar-gutter: auto; }

  /* התפריט נפתח מאותו צד שבו הוא יושב במחשב ושבו נמצא כפתור ההמבורגר,
     בעברית זה צד ימין. inset-inline-start = ימין בעמוד מימין לשמאל. */
  .sidebar {
    position: fixed;
    top: 0;
    /* מיקום מפורש ולא לוגי: חלק מדפדפני אנדרואיד הפכו את
       inset-inline-start בעמוד מימין־לשמאל והתפריט נחת בצד הלא נכון */
    right: 0;
    left: auto;
    inset-inline-start: auto;
    inset-inline-end: auto;
    /* גובה אמיתי של המסך בטלפון, 100vh נחתך מתחת לשורת הכתובת
       ואז כרטיס המשתמש וההתנתקות נופלים מחוץ למסך */
    height: 100vh;
    height: 100dvh;
    /* לא רחב מהמסך במכשירים קטנים */
    width: min(var(--sidebar-w), 86vw);
    min-width: 0;
    max-width: 86vw;
    /* הזזה בטרנספורם, חלק בטלפון, בניגוד להנפשה של מיקום */
    transform: translateX(calc(100% + 24px));
    transition: transform .26s cubic-bezier(.32, .72, 0, 1);
    will-change: transform;
    z-index: 50;
    box-shadow: var(--menu-drawer-sh);
    /* מתחת ל"אוזן" ולפס הבית באייפון */
    padding: max(20px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
    padding-inline-start: max(14px, env(safe-area-inset-right));
  }
  body.nav-open .sidebar { transform: translateX(0); }
  /* סגורה, התוכן של המגירה גם visibility:hidden כדי שהקישורים שלה לא
     יהיו בסדר ה-Tab כשהיא מחוץ למסך. על התוכן ולא על המגירה עצמה: הצל
     שלה שנוגע בקצה המסך נשאר בדיוק כמו קודם. ההסתרה מחכה לסוף ההחלקה
     (השהיה של .26s) ולכן הסגירה נראית כמו קודם. בפתיחה גלוי מיד. */
  .sidebar > * { visibility: hidden; transition: visibility 0s linear .26s; }
  body.nav-open .sidebar > * { visibility: visible; transition: visibility 0s; }
  /* התפריט פתוח, הדף שמאחוריו לא נגלל */
  body.nav-open { overflow: hidden; }
  body.nav-open::after {
    content: '';
    position: fixed; inset: 0;
    background: rgba(10, 10, 12, .5);
    z-index: 40;
    animation: nav-scrim .2s ease;
  }
  @keyframes nav-scrim { from { opacity: 0; } to { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) {
    .sidebar { transition: none; }
    body.nav-open::after { animation: none; }
  }
  .content { padding: 22px 18px 50px; }
  .grid-4 { grid-template-columns: 1fr; }
}

/* ---------- כותרת קטגוריה בתפריט הצד ----------
   היא לקחה את --t-mute (צבע של טקסט עמום על רקע בהיר!) והחלישה אותו
   ב-opacity. עכשיו הצבע והשקיפות מגיעים שניהם מערכת התפריט: ברירת
   המחדל זהה למה שהיה וכל מיתוג אחר מקבל גוון שנגזר מהדיו בפועל. */
.nav-sec {
  list-style: none;
  padding: 16px 14px 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--menu-sec);
  opacity: var(--menu-sec-a);
}

/* ---------- מצב פאנל (embed=1): דף בתוך חלון נשלף ---------- */
html.embed .sidebar,
html.embed .topbar,
html.embed .preview-banner { display: none !important; }
html.embed .content { padding: 20px 22px 40px; max-width: none; margin: 0; }
/* הרקע נשאר של הדף עצמו. הערך שהיה כאן, var(--bg, #0B0B0D), נשא
   נפילה-לאחור כהה שנכתבה למסך כהה; במסגרת שבתוך המעטפת, שמציגה מסכי ניהול
   בהירים, כל סטייה מהרקע הרגיל נראית כמלבן זר מסביב לתוכן. */
html.embed body { background: var(--cream); }

/* ---------- חלון קופץ כללי (אישור לקוחות ועוד) ---------- */
.pmodal-backdrop {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(4, 5, 8, .66); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 9vh 16px; overflow-y: auto;
}
.pmodal {
  background: var(--card, #131318); border: 1px solid var(--line, #23232b);
  border-radius: 16px; width: 100%; max-width: 460px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.pmodal-head { padding: 18px 20px 12px; border-bottom: 1px solid var(--line, #23232b); }
.pmodal-head h3 { margin: 0; font-size: 16.5px; }
.pmodal-head p { margin: 4px 0 0; font-size: 12.5px; color: var(--t-mute, #8a8f98); }
.pmodal-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.pmodal-foot { padding: 12px 20px 18px; display: flex; gap: 8px; justify-content: flex-start; }
.pmodal label { font-size: 12.5px; font-weight: 600; color: var(--t-mute, #8a8f98); display: block; margin-bottom: 5px; }
.pmodal select, .pmodal input[type=text] {
  width: 100%; padding: 9px 11px; border-radius: 10px;
  background: var(--bg, #0B0B0D); color: var(--t, #fff);
  border: 1px solid var(--line, #23232b); font-family: inherit; font-size: 14px;
}

/* ---------- מתג מצב: המוח | אישי (רק אצל יועץ) ---------- */
.mode-switch {
  display: flex; gap: 4px; padding: 4px;
  background: var(--menu-switch-bg);
  border-radius: 12px; margin: 0 6px 16px;
}
.mode-switch a {
  flex: 1; text-align: center; padding: 8px 6px; border-radius: 9px;
  font-size: 13.5px; font-weight: 700; color: var(--menu-ink-mute);
  transition: background .18s ease, color .18s ease;
}
.mode-switch a:hover { color: var(--menu-ink); }
.mode-switch a.on { background: var(--menu-accent-solid); color: var(--menu-accent-ink); box-shadow: 0 2px 10px rgba(var(--menu-accent-rgb), calc(.35 * var(--menu-glow, 1))); }

/* ---------- סדר שונה בטלפון ---------- */
@media (max-width: 720px) {
  .mo-1  { order: 1 }  .mo-2  { order: 2 }  .mo-3  { order: 3 }
  .mo-4  { order: 4 }  .mo-5  { order: 5 }  .mo-6  { order: 6 }
  .mo-7  { order: 7 }  .mo-8  { order: 8 }  .mo-9  { order: 9 }
  .mo-10 { order: 10 } .mo-11 { order: 11 } .mo-12 { order: 12 }
}

/* ---------- עיצוב התפריט: לוגו, מתג מצב וכרטיס משתמש ----------
   הלוגו בראש התפריט, מתג המצב (המוח או אישי) וכרטיס המשתמש בתחתית.
   במוח יש גם סרגל מחלקות עליון (במקטע הבא). בדפי הלקוח ובמצב "אישי"
   אין סרגל עליון. */

/* --- לוגו בראש התפריט --- */
.sidebar .brand {
  flex: none;
  padding: 6px 8px 14px;
  border-bottom: 1px solid var(--menu-line);
  margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  /* גובה קבוע, הלוגו מתאים את עצמו, התפריט לא זז בין המצבים */
  height: 74px;
  overflow: hidden;
}
/* שני הלוגואים נכנסים לאותה מסגרת בדיוק */
.side-logo {
  display: block;
  width: auto; height: auto;
  max-width: 178px; max-height: 46px;
  object-fit: contain;
}
/* הלוגו של "המוח": תמיד בלי רקע. בתפריט בהיר theme.js מחליף לגרסה עם
   כתב שחור (logo-moach-dark.png). המשתנים נשארו ותמיד ריקים. */
.side-logo--moach {
  box-sizing: border-box;
  background: var(--menu-logo-bg);
  padding: var(--menu-logo-pad);
  border-radius: var(--menu-logo-r);
}
.side-wordmark {
  color: var(--menu-ink); font-weight: 900; font-size: 22px; line-height: 1.05;
  text-align: center; letter-spacing: .2px;
}
.side-wordmark .wm-sub {
  display: block; color: var(--menu-sub); font-weight: 700; font-size: 12px; margin-top: 3px;
}

/* --- מתג מצב: המוח | אישי --- */
.mode-switch {
  flex: none;
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  padding: 4px; margin: 0 4px 18px;
  background: var(--menu-switch-bg);
  border: 1px solid var(--menu-switch-line);
  border-radius: var(--r-pill);
}
.mode-switch .ms-pill {
  position: absolute; top: 4px; bottom: 4px; right: 4px; width: calc(50% - 4px);
  border-radius: var(--r-pill);
  background: var(--menu-accent);
  box-shadow: 0 6px 18px rgba(var(--menu-accent-rgb), calc(.38 * var(--menu-glow, 1)));
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
  transform: translateX(0);
}
/* RTL: הפריט הראשון בימין */
.mode-switch[data-on="personal"] .ms-pill { transform: translateX(-100%); }
.mode-switch a {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 4px; border-radius: var(--r-pill);
  font-size: 13.5px; font-weight: 700; color: var(--menu-ink-mute);
  transition: color .22s ease;
}
.mode-switch a svg { width: 16px; height: 16px; opacity: .9; }
.mode-switch a:hover { color: var(--menu-ink-body); }
/* הכיתוב יושב על הגלולה המלאה ולכן הוא לוקח את הדיו שלה ולא לבן קבוע */
.mode-switch a.on { color: var(--menu-accent-ink); }
.mode-switch a.on svg { opacity: 1; }

/* --- כרטיס משתמש בתחתית התפריט (במקום הסרגל העליון) --- */
.side-user {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 12px; margin-bottom: 6px;
  border-bottom: 1px solid var(--menu-line);
}
.side-user .avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--menu-avatar-bg);
  color: var(--menu-avatar-ink); font-weight: 800; font-size: 13px;
  display: grid; place-items: center; overflow: hidden;
}
.side-user .avatar img { width: 100%; height: 100%; object-fit: cover; }
.side-user .su-name { color: var(--menu-ink); font-weight: 700; font-size: 13.5px; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.side-user .su-role { color: var(--menu-ink-mute); font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.side-user > div:last-child { min-width: 0; }
.side-user .su-meta { min-width: 0; flex: 1 1 auto; }
/* גלגל השיניים ליד השם: קיצור להגדרות האישיות */
.side-user .su-gear {
  flex: none; margin-inline-start: auto;
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center;
  color: var(--menu-ink-mute); background: transparent;
  transition: background .15s ease, color .15s ease;
}
.side-user .su-gear svg { width: 18px; height: 18px; }
.side-user .su-gear:hover { color: var(--menu-ink); background: var(--menu-hover-soft); }
.side-user .su-gear:focus-visible { outline: 2px solid var(--o-500); outline-offset: 2px; }

/* --- בלי סרגל עליון (דפי הלקוח ומצב "אישי"): התוכן על כל הדף --- */
.topbar.topbar-off { display: none !important; }
.topbar-off ~ .content:not(.content-flush) { padding-top: 30px; }
iframe.admin-app { height: 100vh; }

/* ---------- סרגל המחלקות: במוח בלבד ----------
   יושב במקום ה-#topbar הכבוי, דביק למעלה, בגובה --topbar-h, לרוחב אזור
   התוכן (משמאל לסרגל הצד).

   הפריסה: חמש לשוניות ברוחב שווה שממלאות את כל השורה. זה התקן ל-5 לשוניות
   ומטה ("fixed tabs"), רוחב אחיד לפי הרחבה ביותר, בלי רווחים גדולים
   ביניהן: לפי חוק הקרבה רווח גדול מפרק את הסרגל לחמישה איים נפרדים
   ומאט את הסריקה והצמדה לקצה אחד משאירה חצי שורה ריקה.

   הסרגל כהה כמו תפריט הצד והמחלקה הפעילה היא גלולה כתומה מלאה.
   גלולה מלאה על שחור נבדלת בבהירות ולא רק בגוון ולכן נקראת מיד גם
   בלי להבחין בצבע ואין צורך בסימון שני. */
.topbar.topbar-depts {
  /* כשהסרגל צר מהמקסימום הוא ממילא ממלא את השורה; במסך רחב מאוד הוא נעצר
     ברוחב המקסימלי ואז מרכוז נראה מאוזן יותר מהצמדה לצד אחד */
  justify-content: center;
  /* הלשוניות בגובה מלא, יעד לחיצה גדול ומקום לפס התחתון בתחתית הסרגל */
  align-items: stretch;
  gap: 8px;
  padding: 0 18px;
  /* אותו מדרון בדיוק כמו החלק העליון של תפריט הצד, שני הפסים
     נקראים כמשטח אחד שעוטף את התוכן והנתונים הבהירים בולטים בתוכו */
  background: var(--menu-grad-bar);
  border-bottom-color: var(--menu-dept-line);
  box-shadow: var(--menu-sh-bar);
  /* רשת ביטחון למסך צר במיוחד, בלי פס גלילה שמכער את הסרגל */
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.topbar-depts::-webkit-scrollbar { display: none; }
.dept-list {
  list-style: none; display: flex; align-items: stretch;
  gap: 4px; margin: 0; padding: 0;
  /* גדל עם השורה עד הגבול. 1680 / 5 = 336px ללשונית, הקצה שבו לשונית עוד
     נקראת כיחידה אחת; מעבר לזה שם קצר של מחלקה מרחף בתוך שלט ריק.
     המשמעות: במסך עד ~1990px הסרגל מלא לגמרי ורק מעליו הוא נעצר */
  flex: 1 1 auto; min-width: 0; max-width: 1680px;
}
/* flex: 1 1 0 = כל הלשוניות באותו רוחב בדיוק, בלי קשר לאורך השם */
.dept-item { flex: 1 1 0; min-width: 0; display: flex; position: relative; }
.dept-item a {
  flex: 1 1 auto; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  /* הגלולה מרחפת בתוך השורה, הפס התחתון של ה-li נשאר צמוד לתחתית הסרגל */
  margin-block: 7px;
  min-height: 44px;                 /* יעד לחיצה מינימלי */
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  color: var(--menu-dept-ink); font-weight: 600; font-size: 14.5px; line-height: 1.2;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.dept-item a svg { width: 18px; height: 18px; flex: none; opacity: .75; transition: opacity .18s ease; }
.dept-txt { overflow: hidden; text-overflow: ellipsis; }
.dept-item a:hover { background: var(--menu-hover-2); color: var(--menu-ink); }
.dept-item a:hover svg { opacity: 1; }
/* המחלקה הפעילה, גלולה כתומה מלאה. על רקע שחור זה הפרש בהירות ולא
   רק בגוון ולכן נקרא מיד גם בלי להבחין בצבע; אין צורך בסימון שני. */
.dept-item a.active {
  background: var(--menu-accent);
  border-color: transparent;
  color: var(--menu-accent-ink); font-weight: 800;
  box-shadow: 0 3px 14px rgba(var(--menu-accent-rgb), calc(.34 * var(--menu-glow, 1)));
}
.dept-item a.active svg { color: var(--menu-accent-ink); opacity: 1; }
/* ניווט במקלדת, טבעת בצבע הדיו של התפריט, כי גוון המותג ליד גלולה
   באותו גוון נבלע */
.dept-item a:focus-visible { outline: 2px solid var(--menu-focus); outline-offset: 2px; }
/* המסגרות מתכווצות מתחת לסרגל, אחרת נוצרת גלילה כפולה ופס לבן */
.topbar-depts ~ .content iframe.admin-app { height: var(--stack-h, calc(100vh - var(--topbar-h))); }
.topbar-depts ~ .content .frame-stack { height: var(--stack-h, calc(100vh - var(--topbar-h))); }

/* מסך בינוני: מצמצמים ריווח וגופן לפני שמוותרים על משהו */
@media (max-width: 1000px) {
  .dept-item a { gap: 6px; padding: 6px 8px; font-size: 13.8px; }
  .dept-item a svg { width: 16px; height: 16px; }
}
/* טאבלט (סרגל צד 268px + חמש לשוניות): האייקון הוא הראשון לרדת,
   בלעדיו השמות עדיין נכנסים במלואם ליד סרגל הצד גם ב-721px */
@media (max-width: 880px) {
  .dept-item a { padding: 6px 6px; }
  .dept-item a svg { display: none; }
}

/* --- כפתור תפריט (טלפון בלבד): צף מעל התוכן. במוח: בתחילת סרגל המחלקות --- */
.menu-fab { display: none; }
@media (max-width: 720px) {
  .menu-fab {
    display: grid; place-items: center;
    position: fixed; top: 12px; right: 12px; left: auto; z-index: 90;
    width: 44px; height: 44px; border-radius: 50%;
    /* הכפתור הצף הוא התפריט עצמו ולכן הוא לובש את המשטח והדיו שלו,
       כפתור שחור על דף כהה או לבן על דף בהיר, פשוט נעלם */
    background: var(--menu-1); color: var(--menu-fab-ink);
    border: 1px solid var(--menu-fab-line);
    box-shadow: var(--menu-fab-sh); cursor: pointer;
  }
  .menu-fab svg { width: 22px; height: 22px; }
  .topbar-off ~ .content:not(.content-flush) { padding-top: 68px; }
  body.nav-open .menu-fab { opacity: 0; pointer-events: none; }
  iframe.admin-app { height: var(--stack-h, 100vh); }

  /* בתוך סרגל המחלקות הכפתור הוא חלק מהשורה, לא מרחף ולא מסתיר את הפריט הראשון */
  /* בתוך כותרת הדף: חלק מהשורה, בלי לרחף ובלי לגזול גובה */
  .content .page-head h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .menu-fab.menu-fab--head {
    position: static; flex: none; align-self: center;
    width: 38px; height: 38px;
    /* אותו משטח בדיוק כמו הצורה הצפה, ראה --menu-fab-head-* למעלה */
    box-shadow: var(--menu-fab-head-sh);
    background: var(--menu-fab-head-bg); color: var(--menu-fab-head-ink);
    border-color: var(--menu-fab-head-line);
  }
  .menu-fab.menu-fab--head svg { width: 20px; height: 20px; }
  body.fab-in-head.nav-open .menu-fab--head { opacity: 1; pointer-events: auto; }
  body.fab-in-head .topbar-off ~ .content:not(.content-flush) { padding-top: 22px; }

  .menu-fab.menu-fab--bar {
    position: static; flex: none; align-self: center;
    width: 40px; height: 40px;
    box-shadow: none;
    /* בתוך הסרגל כפתור באותו צבע נעלם, נותנים לו משטח מהדיו של
       התפריט: על סרגל כהה זה לבן שקוף, על סרגל בהיר זה כהה שקוף */
    background: var(--menu-fab-bg);
    color: var(--menu-fab-ink);
    border-color: var(--menu-fab-bar-line);
  }
  .menu-fab.menu-fab--bar:hover { background: var(--menu-fab-bg-h); }
  .menu-fab.menu-fab--bar svg { width: 20px; height: 20px; }
  .topbar.topbar-depts { padding: 0 8px; gap: 6px; }
  /* בטלפון פריסה שווה של חמש לשוניות נותנת ~62px ללשונית, קריא רק בגופן
     קטן ובריווח צפוף. המטרה שכל חמש המחלקות יהיו על המסך בלי גלילה */
  .dept-list { gap: 2px; max-width: none; }
  .dept-item a { margin-block: 6px; padding: 4px 4px; gap: 4px; font-size: 12.5px; font-weight: 700; }
  .dept-item a svg { display: none; }
  .topbar-depts ~ .content iframe.admin-app { height: var(--stack-h, calc(100vh - var(--topbar-h))); }
  .topbar-depts ~ .content .frame-stack { height: var(--stack-h, calc(100vh - var(--topbar-h))); }
}

/* מתחת ל-360px חמש לשוניות ברוחב שווה כבר חותכות שמות ("פיננ…"), שם עדיף
   רוחב טבעי וגלילה עדינה לרוחב. חובה להחזיר את היישור להתחלה: תוכן שגולש
   ממכל ממורכז נשאר מחוץ להישג יד בגלילה. */
@media (max-width: 359px) {
  .topbar.topbar-depts { justify-content: flex-start; }
  .dept-list { flex: 0 0 auto; }
  .dept-item { flex: 0 0 auto; }
  .dept-item a { padding: 4px 9px; }
}

/* ---------- חלון ליד רחב יותר בתוך המוח (נטען מתוך ה-iframe) ---------- */

/* ---------- שדות כסף: פסיקים וסימן ₪ אחרי הסכום ---------- */
/* min-width: 0, השדה הוא ילד של רשת או של שורה גמישה במקומות
   רבים וברירת המחדל (min-width: auto) אוסרת עליו להתכווץ מתחת
   לרוחב התוכן שלו. זה מה שדחף סכום ארוך החוצה מהמשבצת ומשך אחריו
   את כל השורה. */
.money-field { position: relative; display: block; width: 100%; min-width: 0; }
.money-field .money-in {
  width: 100%; min-width: 0; direction: ltr; text-align: left;
  padding-left: 30px !important; padding-right: 10px !important;
  /* ספרות ברוחב אחיד, טורים של סכומים נשארים מיושרים */
  font-variant-numeric: tabular-nums;
  /* סכום שלא נכנס נחתך בשלוש נקודות ולא באמצע ספרה, כך שרואים
     שיש המשך. הערך המלא נמצא ב-title (ראו money.js). */
  text-overflow: ellipsis;
}
/* מדרגות לפי אורך הערך (ראו syncTitle ב-money.js). קודם הגופן
   ואז המקום: בסכום ארוך מאוד סימן ה-₪ יורד והריפוד מתכווץ, כי
   שלושים פיקסלים של ריפוד שמורים לסימן הם בדיוק ההבדל בין סכום
   שנקרא לסכום שנחתך. הסימן לא חסר שם: העמודה כולה סכומים והערך
   המלא עם ₪ נמצא ב-title. */
.money-field .money-in.money-long {
  font-size: 12px; padding-left: 24px !important; padding-right: 7px !important;
}
.money-field .money-in.money-xlong {
  font-size: 11.5px; letter-spacing: -.1px;
  padding-left: 8px !important; padding-right: 6px !important;
}
.money-field .money-in.money-xlong ~ .money-sign { display: none; }
.money-field .money-sign {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--t-mute); font-size: 13.5px; font-weight: 700; pointer-events: none;
}

/* ---------- תאי סכום בתצוגה ---------- */
/* כל תא שמציג סכום מחושב: רוחב אחיד לספרות, בלי שבירת שורה
   ובלי יכולת לדחוף את השורה שסביבו. */
.money-cell {
  display: inline-block; max-width: 100%; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: bottom; font-variant-numeric: tabular-nums;
}

/* ---------- פריט תפריט שעוד לא נבנה ---------- */
/* פריט שעוד לא נבנה, עמום, אבל עדיין טקסט. rgba(255,255,255,.34)
   נותן 3.1:1 בלבד; בברירת המחדל הוא נשאר כפי שהיה ובכל מיתוג אחר
   theme.js מחזק אותו לגוון העמום של הערכה */
/* אותו ריפוד ואותו גובה שורה כמו שורה לחיצה, אחרת שורות "בקרוב"
   נמוכות בשתי נקודות מהשאר והתפריט נראה משונן */
.nav-item.soon .nav-soon {
  display: flex; align-items: center; gap: 11px; padding: 11px 14px;
  border-radius: 11px; color: var(--menu-soon); font-weight: 600;
  font-size: 14.5px; line-height: 1.25; cursor: default;
}
.nav-item.soon .nav-soon svg { width: 19px; height: 19px; flex: none; opacity: var(--menu-soon-a); }
.nav-item.soon .mini-chip {
  margin-inline-start: auto; font-size: 10px; font-weight: 800; padding: 2px 7px;
  border-radius: 99px; background: var(--menu-chip2-bg); color: var(--menu-chip2-ink);
}

/* ---------- פס "תצוגת לקוח" ---------- */
.viewas-bar {
  position: fixed; inset-inline-start: 50%; bottom: 16px; transform: translateX(50%);
  z-index: 140; display: flex; align-items: center; gap: 8px;
  background: #1B1B20; color: #fff; border-radius: 99px;
  padding: 9px 18px; font-size: 13px; font-weight: 700;
  box-shadow: 0 10px 30px rgba(0,0,0,.24);
}
.viewas-bar b { color: var(--o-300); }
.viewas-bar .va-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--o-500);
  box-shadow: 0 0 0 4px rgba(var(--o-rgb),.22);
}

/* ---------- שלד טעינה: הוצא משימוש (8.10, חלק 2) ----------
   אלעד ביקש שלא יהיו באתר מלבנים אפורים מרצדים בזמן טעינה. במקומם
   שער הטעינה (boot.js, "שער הטעינה" למטה): עיגול באמצע המסך עד שהדף
   מצויר עם הנתונים. הכללים כאן נשארו רק כרשת ביטחון לדף שעוד לא עבר:
   כל ממלא מקום של השלד (.sk, .sk-line, .sk-chip, .sk-av, .is-sk,
   .sk-card) שקוף לגמרי, בלי רקע ובלי ריצוד, והאנימציה skshim לא
   משנה כלום. גם גלולת "טוען…" (load-pill) לא מוצגת לעולם.
   הגודל של ממלא המקום נשמר (visibility ולא display), כדי שתא שעוד
   מסומן sk לרגע לא יזיז את השורה שלו. */
@keyframes skshim { 0%, 100% { opacity: 1 } }
@keyframes loadspin { to { transform: rotate(360deg) } }

.sk, .sk-line, .sk-chip, .sk-av, .is-sk, .sk-card {
  visibility: hidden !important;
  background: transparent !important; background-image: none !important;
  border-color: transparent !important; box-shadow: none !important;
  animation: none !important;
}

/* גלולת "טוען…": הוצאה משימוש, לא מוצגת גם כש body.is-loading */
.load-pill, body.is-loading .load-pill { display: none !important; }

/* עיגול קטן לפעולה שרצה (פתיחת קובץ וכדומה). לא שלד, נשאר */
.load-spin {
  width: 13px; height: 13px; border-radius: 50%; flex: none;
  border: 2px solid var(--o-soft-2); border-top-color: var(--o-500);
  animation: loadspin .7s linear infinite;
}

/* בזמן טעינה אי אפשר ללחוץ על מה שעוד לא באמת שם */
body.is-loading .lock-while-loading { pointer-events: none; opacity: .55; }

/* ---------- שער הטעינה (boot.js) ----------
   כל עוד לא ידוע מה פתוח למשתמש, ל html יש boot-wait: כל התוכן מוסתר
   ובאמצע המסך עיגול בצבע של האתר. אותו עיגול בדיוק כמו שהיה במסך
   "הגדרות אתר" (34px, .8 שנייה לסיבוב, 2.4 בהפחתת תנועה).
   visibility ולא display: הפריסה נשמרת (מדידות, גרפים, גובה המעטפת)
   והמוסתר יוצא גם מסדר ה Tab וגם מעץ הנגישות. גם הצאצאים מקבלים
   hidden עם important, כדי שאלמנט עם visibility:visible משלו לא יציץ.
   לא מוסתרים: העיגול וההודעה, אזור ההכרזות site-live, "דלג לתוכן
   הראשי", ווידג'ט הנגישות, תיבת השגיאה (fatal-box), חלונות דו שיח
   ומה שסומן data-boot-keep (רק ילד ישיר של body). */
html.boot-wait:not(.boot-content) body > :not(#boot-spin):not(#boot-msg):not(#site-live):not(#skip-main):not(#a11y-widget-host):not(#a11y-widget-root):not(#fatal-box):not([data-boot-keep]):not([role="dialog"]):not([role="alertdialog"]):not([aria-modal="true"]):not(script):not(style),
html.boot-wait:not(.boot-content) body > :not(#boot-spin):not(#boot-msg):not(#site-live):not(#skip-main):not(#a11y-widget-host):not(#a11y-widget-root):not(#fatal-box):not([data-boot-keep]):not([role="dialog"]):not([role="alertdialog"]):not([aria-modal="true"]):not(script):not(style) * {
  visibility: hidden !important;
}
/* כניסת הדף בעדינות (pageIn) מתחילה רק כשהשער נפתח ולא מאחוריו */
html.boot-wait .content { animation: none !important; }
/* מחכים רק לנתוני הדף (boot-content): התפריט, הסרגל העליון והלשוניות
   בטלפון נשארים גלויים, ורק אזור התוכן הראשי מוסתר והעיגול באמצע */
html.boot-wait.boot-content main,
html.boot-wait.boot-content main *,
html.boot-wait.boot-content [role="main"],
html.boot-wait.boot-content [role="main"] * {
  visibility: hidden !important;
}
#boot-spin, #boot-msg { display: none; }
html.boot-wait #boot-spin {
  display: block; position: fixed; left: 50%; top: 45%; z-index: 5;
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 3px solid rgba(var(--o-rgb, 255, 107, 26), .18);
  border-top-color: var(--o-500, #FF6B1A);
  animation: bootSpin .8s linear infinite;
}
@keyframes bootSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html.boot-wait #boot-spin { animation-duration: 2.4s; } }
/* "השהיית אנימציות" בווידג'ט הנגישות: העיגול עומד */
html.a11y-stop-animations #boot-spin { animation: none; }
/* אין תשובה ואין זיכרון: הודעה שקטה במקום העיגול */
html.boot-fail #boot-spin { display: none !important; }
html.boot-wait.boot-fail #boot-msg {
  display: block; position: fixed; left: 50%; top: 45%; z-index: 5;
  transform: translate(-50%, -50%); box-sizing: border-box;
  width: min(340px, calc(100vw - 32px)); padding: 20px 18px; text-align: center;
  background: var(--card, #fff); color: var(--t-body, #2A2520);
  border: 1px solid var(--line, #E8E1D8); border-radius: var(--r-md, 14px);
  box-shadow: var(--sh-1, 0 4px 18px rgba(0,0,0,.08));
}
#boot-msg p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; font-weight: 600; }

/* ---------- סרגל לשוניות תחתון (טלפון, צד הלקוח) ----------
   נבנה ב-ui.js בכל דפי /app, כדי שלא ייעלם כשעוברים דף. */
.tabbar { display: none; }
@media (max-width: 720px) {
  .tabbar {
    display: flex;
    position: fixed;
    right: 0; left: 0; bottom: 0;
    z-index: 80;
    background: var(--card);
    border-top: 1px solid var(--line);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    box-shadow: var(--sh-up);
  }
  .tabbar a {
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: 11px; font-weight: 700; color: var(--t-mute); line-height: 1.3;
    padding: 4px 0; border-radius: 12px; text-decoration: none;
  }
  /* לשונית אחת = שורה אחת. במסך צר במיוחד השם מתקצר ולא נשבר, כדי
     שכל הלשוניות יישארו באותו גובה */
  .tabbar a > span {
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* הסרגל התחתון יושב על הכרטיס ולא על התפריט ולכן הוא לוקח את
     גוון המותג שנקרא על הכרטיס, לא את הגוון המיועד למשטח */
  .tabbar a.on { color: var(--brand-ink); }
  .tabbar a svg { width: 21px; height: 21px; }
  /* מקום לסרגל, כדי שלא יכסה את סוף התוכן */
  body.has-tabbar .content { padding-bottom: 96px; }
  /* התפריט הצדדי מעל הסרגל התחתון */
  .sidebar { z-index: 50; }
  body.nav-open .tabbar { display: none; }
}

/* ---------- מעבר בין עמודים ----------
   מעבר בין עמודים. לדפדפנים שתומכים יש גם מעבר חוצה־מסמך (theme.js),
   אבל הוא לא קיים בכל מקום ובעמוד שנפתח ריק לרגע הוא לא מורגש
   בכלל. לכן התוכן עצמו נכנס בעדינות בכל עמוד, בכל דפדפן.

   רק שקיפות, בלי transform: transform על אב הופך אותו ל"עוגן" של
   אלמנטים במיקום fixed והסרגל התחתון והכפתורים הצפים היו קופצים. */
@keyframes pageIn { from { opacity: 0; } }
.content { animation: pageIn .26s ease-out both; }
@media (prefers-reduced-motion: reduce) { .content { animation: none; } }

/* ---------- באנר משפטי תחתון ---------- */
.legal-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px 10px;
  padding: 18px 16px 22px;
  font-size: 11.5px;
  color: var(--t-mute);
  background: transparent;
}
/* בתוך עמודת התוכן: נדחף לתחתית גם כשהדף קצר */
.main-area > .legal-bar { margin-top: auto; }
.legal-bar a { color: var(--t-mute); text-decoration: none; }
.legal-bar a:hover { color: var(--brand-ink); text-decoration: underline; }
.legal-bar span { opacity: .5; }
.legal-bar .site-version { opacity: 1; }
body.has-tabbar .legal-bar { padding-bottom: 26px; }
@media (max-width: 720px) {
  body.has-tabbar .legal-bar { padding-bottom: 104px; }
  body.has-tabbar .content { padding-bottom: 8px; }
  /* בטלפון הכל יושב בשורה אחת: חמישה פריטים בשתי שורות נראו כמו
     שובר של רשימה ולכן הטקסט קטן מעט, הרווחים מתהדקים והשבירה
     מבוטלת. גלילה אופקית קטנה היא רשת ביטחון למסך צר במיוחד. */
  .legal-bar {
    flex-wrap: nowrap; gap: 0 5px; font-size: 10px; white-space: nowrap;
    padding-inline: 10px; overflow-x: auto; scrollbar-width: none;
  }
  .legal-bar::-webkit-scrollbar { display: none; }
}
/* קישורי השוליים בתוך התפריט הצדדי: מוסתרים כברירת מחדל ומופיעים
   במסך המוח בלבד (מחשב וטלפון). שם התוכן נגלל בתוך מסגרת והדף עצמו
   לא ולכן הבאנר התחתון היה נשאר תקוע קבוע למטה ובמחשב גם יצר פס
   לבן מתחת לתפריט הכהה. במסך המוח הבאנר מוסתר והקישורים בתחתית התפריט. */
.side-legal { display: none; }
body.has-brain .legal-bar { display: none; }
@media all {
  body.has-brain .sidebar .side-legal {
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px;
    /* מעל שורת המשתמש, כדי שכפתור הנגישות בפינה לא יכסה אותם */
    padding: 0 14px 10px; margin-bottom: 10px;
    border-bottom: 1px solid var(--menu-line);
    font-size: 11.5px; line-height: 1.8; color: var(--menu-logout);
  }
  body.has-brain .sidebar .side-legal a {
    display: inline; padding: 0; font-size: inherit; color: inherit;
    text-decoration: underline; text-underline-offset: 2px; background: none;
  }
  body.has-brain .sidebar .side-legal a:hover { background: none; color: var(--menu-logout-h); }
}
@media (max-width: 360px) {
  .legal-bar { font-size: 9.5px; gap: 0 4px; }
}
html.embed .legal-bar { display: none !important; }

/* ---------- חלון אישור והודעה חולפת ---------- */
.ask-bg {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 10, 12, .55);
  display: grid; place-items: center; padding: 20px;
  opacity: 0; transition: opacity .16s ease;
}
.ask-bg.show { opacity: 1; }
.ask {
  width: 100%; max-width: 400px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 22px 20px 18px;
  box-shadow: var(--sh-2);
  transform: translateY(8px) scale(.98); transition: transform .18s cubic-bezier(.32,.72,0,1);
}
.ask-bg.show .ask { transform: none; }
.ask h3 { margin: 0 0 8px; font-size: 17.5px; color: var(--t-dark); }
.ask p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.65; color: var(--t-body); white-space: pre-line; }
.ask-acts { display: flex; gap: 10px; }
.ask-acts .btn { flex: 1; padding: 11px 14px; font-size: 14.5px; }
.btn-danger { background: var(--no-btn); color: #fff; }
.btn-danger:hover { filter: brightness(1.06); }
@media (prefers-reduced-motion: reduce) {
  .ask-bg, .ask { transition: none; }
}

.site-toast {
  position: fixed; bottom: 22px; inset-inline-start: 50%; transform: translateX(50%) translateY(10px);
  background: var(--ink); color: #fff;
  padding: 11px 20px; border-radius: 999px; font-size: 14px; font-weight: 600;
  box-shadow: var(--sh-2); z-index: 210;
  opacity: 0; transition: opacity .22s ease, transform .22s ease;
  max-width: calc(100vw - 32px); text-align: center;
}
.site-toast.show { opacity: 1; transform: translateX(50%) translateY(0); }
@media (max-width: 720px) { body.has-tabbar .site-toast { bottom: 104px; } }

/* ---------- נעילת גלילה מאחורי שכבות ----------
   scroll-lock.js מקבע את ה-body; כאן דואגים שהגלילה בתוך השכבה
   עצמה לא תדלוף לדף שמאחור (overscroll chaining). */
.ask-bg, .pmodal-backdrop, .pwa-modal-bg, .book-backdrop, .m-modal-bg,
.cmod-bg, .m-sheet-bd, .m-sheet, .dv-bg,
.modal-bg, .sheet-bg, .overlay-bg,
.sidebar, .nav-list, .ask, .pmodal, .book-modal {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* השכבות עצמן נגללות בתוכן, גם כשהתוכן גבוה מהמסך */
.ask-bg, .pwa-modal-bg { overflow-y: auto; }
body.scroll-locked { touch-action: pan-y; }

/* ---------- מסמך בחלון קופץ ---------- */
.doc-bg {
  position: fixed; inset: 0; z-index: 205;
  background: rgba(10, 10, 12, .58);
  display: flex; align-items: center; justify-content: center;
  padding: 4vh 14px;
  opacity: 0; transition: opacity .18s ease;
  overscroll-behavior: contain;
}
.doc-bg.show { opacity: 1; }
.doc {
  width: 100%; max-width: 640px; max-height: 92vh; max-height: 92dvh;
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-2);
  transform: translateY(10px); transition: transform .2s cubic-bezier(.32,.72,0,1);
}
.doc-bg.show .doc { transform: none; }
.doc-h {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--line); flex: none;
}
.doc-h b { font-size: 16.5px; color: var(--t-dark); }
.doc-x {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  border: 1px solid var(--line); background: var(--card); color: var(--t-body);
  cursor: pointer; font-size: 15px; line-height: 1;
}
.doc-x:hover { border-color: var(--no); color: var(--no-ink); }
.doc-b {
  padding: 16px; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  font-size: 14.5px; line-height: 1.85; color: var(--t-body);
}
.doc-b h2 { font-size: 15.5px; color: var(--t-dark); margin: 18px 0 6px; }
.doc-b h2:first-child { margin-top: 0; }
.doc-b p { margin: 0 0 10px; }
.doc-b .btn { margin-bottom: 8px; }
.doc-sep { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }

/* ---------- יצירת קשר: כרטיס הפרטים של היועץ וכפתור לדיווח תקלה ---------- */
.ct-card { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px 14px; margin: 2px 0 12px; }
.ct-name { font-size: 15px; font-weight: 900; color: var(--t-dark); }
.ct-tag { font-size: 12px; color: var(--t-mute); margin-top: 2px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* פרטי הקשר: גלולות קטנות עם אייקון, אחת ליד השנייה */
.ct-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ct-pill { display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--card); color: var(--t-body); font-size: 12.5px; font-weight: 700; }
.ct-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-pill svg { width: 14px; height: 14px; flex: none; color: var(--t-mute); }
a.ct-pill { color: var(--brand-ink); }
a.ct-pill:hover { border-color: var(--o-500); }
/* שני הכפתורים אחד ליד השני, קטנים */
.ct-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-acts .btn { margin: 0; flex: 1 1 0; min-width: 150px; }
/* חלון יצירת הקשר צר יותר מחלון מסמך רגיל: יש בו מעט תוכן */
.doc:has(#ct-adv) { max-width: 520px; }
.ct-v { flex: 1 1 auto; font-size: 13.5px; color: var(--t-body); overflow-wrap: anywhere; }
.ct-v a { color: var(--brand-ink); font-weight: 700; }
.ct-sep { height: 1px; background: var(--line); margin: 14px 0 10px; }
/* דיווח על תקלה: שורת שוליים קטנה, לא כרטיס בגודל מלא. צריך אותה
   לעתים רחוקות ולכן היא לא מתחרה עם הפרטים של היועץ ועם הכפתורים. */
.ct-bugline {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
  font-size: 12.5px; color: var(--t-mute); line-height: 1.7;
}
.ct-bug-link {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-weight: 800; color: var(--brand-ink);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.ct-bug-link:hover { color: var(--o-700, var(--o-600)); }
.ct-bug-link:disabled { color: var(--t-mute); cursor: default; text-decoration: none; }
.ct-bugbox {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  margin-top: 6px; font-size: 12.5px;
}
.ct-bugbox a { color: var(--brand-ink); font-weight: 700; overflow-wrap: anywhere; }
.ct-bughint { flex: 1 0 100%; font-size: 11.5px; color: var(--t-mute); line-height: 1.6; }
.doc-load { color: var(--t-mute); }
@media (prefers-reduced-motion: reduce) { .doc-bg, .doc { transition: none; } }
@media (max-width: 560px) {
  .doc-bg { padding: 0; align-items: flex-end; }
  .doc { max-width: 100%; max-height: 94dvh; border-radius: 18px 18px 0 0; border-bottom: 0; }
}

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

   התיקון הוא בגופן, לא בחסימת הזום: במכשיר מגע של אפל כל שדה קלט
   הוא 16px ואז לספארי אין סיבה לקרב. הזום בשתי אצבעות נשאר זמין,
   maximum-scale היה חוסם אותו וזו פגיעה בנגישות.

   למה דווקא כך: @supports (-webkit-touch-callout: none) מזהה WebKit
   של אפל, ו-(pointer: coarse) מוציא מהמשוואה את ספארי של המק. הכלל
   חייב !important כי הוא בא לגבור על גופן שהוגדר לשדה ספציפי.

   הריפוד האופקי מתכווץ מעט כדי שהשדות הצרים לא יגלשו בגלל הגופן
   הגדול יותר והגובה נשאר כמעט זהה. */
@supports (-webkit-touch-callout: none) {
  @media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]),
    select,
    textarea {
      font-size: 16px !important;
    }
  }

  /* מסך צר: הגופן הגדול יותר צריך את המקום. הריפוד מתכווץ וסימן ה-₪
     מתקרב לקצה, כך המספרים ארוכי הספרות נשארים גלויים כמו קודם. */
  @media (pointer: coarse) and (max-width: 720px) {
    .cell, .m-input, .fld, .q-in { padding-inline: 6px; }
    .money-field .money-in { padding-left: 22px !important; padding-right: 6px !important; }
    .money-field .money-sign { left: 6px; font-size: 14px; }
  }
}

/* ---------- תוסף הנגישות ---------- */
/* ACCESSIBILITY WIDGET - START
   שתי התאמות לווידג'ט הנגישות החיצוני. מחיקת הבלוק הזה מחזירה את
   הווידג'ט למראה ולמיקום שלו כברירת מחדל, בלי לשבור כלום. */
/* ההרמה מעל הבאנר נעשית דרך bottom ולא דרך transform: transform על
   העטיפה הופך אותה לעוגן של כל מה שמקובע בתוכה והתפריט של הווידג'ט
   (position: fixed) קפץ יחד עם הדף ורצד בכל גלילה. bottom מזיז רק את
   הכפתור והתפריט נשאר מעוגן למסך. */
#a11y-widget-root { bottom: var(--a11y-lift, 20px) !important; transition: bottom .12s ease-out; }
@media (prefers-reduced-motion: reduce) {
  #a11y-widget-root { transition: none; }
}
/* בתוך מסגרת (מסך בתוך המוח, תצוגת לקוח) הכפתור מוסתר: יש כבר אחד
   בחלון הראשי ובלי זה הופיעו שלושה כפתורים אחד על השני. ההגדרות
   שנבחרות בכפתור הראשי מועתקות לתוך המסגרות ב-a11y.js. */
html.a11y-framed #a11y-widget-host, html.a11y-framed #a11y-widget-root { display: none !important; }
/* ACCESSIBILITY WIDGET - END */

/* ---------- YTMini: נגן יוטיוב מינימלי (assets/js/yt-mini.js) ----------
   רק פליי גדול ופס דק למטה, בלי הכפתורים הקטנים של יוטיוב. */
.ytm {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: var(--ink);
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.ytm.ytm-plain { aspect-ratio: auto; }
.ytm.ytm-plain iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.ytm-stage { position: absolute; inset: 0; z-index: 1; }
.ytm-frame, .ytm-frame > div, .ytm-frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
  pointer-events: none;
}
/* חיתוך: ה-iframe של יוטיוב גבוה פי 2.4 מהתיבה, כך שהסרטון עצמו יושב
   באמצע והפסים של יוטיוב (כותרת, שיתוף, "צפייה ביוטיוב") נופלים מחוץ
   לתיבה ונחתכים. הכפתור האדום באמצע מכוסה על ידי העיגול שלנו. */
.ytm-frame > div, .ytm-frame iframe { height: 240%; top: -70%; }
/* התמונה מכסה את מסך הפתיחה של יוטיוב (הכפתור האדום והכותרת) */
.ytm-poster {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  width: 100%; height: 100%; object-fit: cover; display: block;
  background: var(--ink);
  transition: opacity .35s ease;
}
.ytm-scrim {
  position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.25) 100%);
  transition: opacity .25s ease;
  pointer-events: none;
}
.ytm-tap {
  position: absolute; inset: 0; z-index: 4;
  width: 100%; height: 100%;
  background: transparent; border: 0; padding: 0; margin: 0;
  cursor: pointer;
}
.ytm-big {
  position: absolute; z-index: 6;
  left: 50%; top: 50%;
  width: 58px; height: 58px;
  margin: -29px 0 0 -29px;
  border: 0; padding: 0;
  border-radius: 50%;
  background: var(--btn-solid);
  color: var(--on-brand);
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 0 rgba(255,255,255,.35);
  transition: transform .18s ease, opacity .2s ease, box-shadow .18s ease;
}
.ytm-big svg { width: 30px; height: 30px; fill: currentColor; }
.ytm-big .ytm-i-play { margin-inline-start: 3px; }
.ytm-big .ytm-i-pause { display: none; }
.ytm-mini .ytm-i-pause { display: none; }
.ytm[data-state="playing"] .ytm-mini .ytm-i-play,
.ytm[data-state="buffering"] .ytm-mini .ytm-i-play,
.ytm[data-state="resuming"] .ytm-mini .ytm-i-play { display: none; }
.ytm[data-state="playing"] .ytm-mini .ytm-i-pause,
.ytm[data-state="buffering"] .ytm-mini .ytm-i-pause,
.ytm[data-state="resuming"] .ytm-mini .ytm-i-pause { display: block; }
.ytm-big:hover { transform: scale(1.06); box-shadow: 0 12px 34px rgba(0,0,0,.4), 0 0 0 10px rgba(255,255,255,.18); }
.ytm-big:active { transform: scale(.96); }
.ytm-big:focus-visible, .ytm-again:focus-visible, .ytm-bar:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ytm-bar:focus-visible { outline-offset: -2px; }
/* סוף הסרטון */
.ytm-end {
  position: absolute; inset: 0; z-index: 6;
  display: none; place-items: center;
  background: rgba(0,0,0,.55);
}
.ytm-again {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px 12px 18px;
  border: 0; border-radius: 999px;
  background: var(--btn-solid); color: var(--on-brand);
  font: inherit; font-size: 15px; font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.ytm-again svg { width: 22px; height: 22px; fill: currentColor; }
.ytm-again:hover { background: var(--o-600); }
/* סיבוב טעינה */
.ytm-spin {
  position: absolute; z-index: 6; left: 50%; top: 50%;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.28);
  border-top-color: #fff;
  display: none;
  animation: ytm-spin .8s linear infinite;
  pointer-events: none;
}
@keyframes ytm-spin { to { transform: rotate(360deg); } }
/* הפס למטה */
/* שורת הפקדים: כפתור פליי/עצירה קטן ולידו פס ההתקדמות */
.ytm-ctrls {
  position: absolute; z-index: 7;
  left: 0; right: 0; bottom: 0;
  direction: ltr;              /* הפס רץ משמאל לימין, כמו בנגנים המוכרים */
  display: none;
  align-items: center;
  gap: 6px;
  padding: 0 8px 6px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.38) 100%);
}
.ytm-mini {
  flex: none;
  width: 34px; height: 34px;
  border: 0; padding: 0; margin: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.5); color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.ytm-mini svg { width: 18px; height: 18px; fill: currentColor; }
.ytm-mini .ytm-i-play { margin-inline-start: 2px; }
.ytm-mini:hover { background: rgba(0,0,0,.72); }
.ytm-mini:active { transform: scale(.92); }
.ytm-mini:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ytm-bar {
  position: relative;
  flex: 1 1 auto;
  height: 30px;            /* אזור נגיעה נדיב, הפס עצמו דק */
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}
.ytm-track {
  position: relative; width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.28);
  transition: height .15s ease;
}
.ytm-buf, .ytm-prog {
  position: absolute; top: 0; bottom: 0; inset-inline-start: 0;
  border-radius: 999px; width: 0;
}
.ytm-buf { background: rgba(255,255,255,.35); }
.ytm-prog { background: var(--o-500); }
.ytm-knob {
  position: absolute; top: 50%;
  inset-inline-end: -7px;      /* רוכב על קצה המילוי, זז שמאלה עם הזמן */
  width: 14px; height: 14px; margin-top: -7px;
  border-radius: 50%; background: var(--o-500);
  box-shadow: 0 0 0 3px rgba(255,255,255,.9);
  transform: scale(.85);
  transition: transform .15s ease;
  pointer-events: none;
}
.ytm-bar:hover .ytm-track, .ytm-drag .ytm-track, .ytm-bar:focus-visible .ytm-track { height: 6px; }
.ytm-bar:hover .ytm-knob, .ytm-drag .ytm-knob, .ytm-bar:focus-visible .ytm-knob { transform: scale(1); }
.ytm-tip {
  position: absolute; bottom: 24px;
  transform: translateX(-50%);
  padding: 3px 8px; border-radius: 8px;
  background: rgba(0,0,0,.75); color: #fff;
  font-size: 12px; font-weight: 700;
  white-space: nowrap; pointer-events: none;
  display: none;
}
[dir="ltr"] .ytm-tip, .ytm[dir="ltr"] .ytm-tip { transform: translateX(-50%); }
.ytm-drag .ytm-tip { display: block; }
/* כפתור מסך מלא, בקצה השני של הפס */
.ytm-fs {
  flex: none;
  width: 34px; height: 34px;
  border: 0; padding: 0; margin: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.5); color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.ytm-fs svg { width: 20px; height: 20px; fill: currentColor; }
.ytm-fs:hover { background: rgba(0,0,0,.72); }
.ytm-fs:active { transform: scale(.92); }
.ytm-fs:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ytm-fs .ytm-i-shrink { display: none; }
.ytm.ytm-is-fs .ytm-fs .ytm-i-grow { display: none; }
.ytm.ytm-is-fs .ytm-fs .ytm-i-shrink { display: block; }
/* הזמן: כמה עבר ומה האורך, מעל תחילת הפס כמו ביוטיוב בטלפון */
.ytm-time {
  position: absolute; left: 0; bottom: 100%;
  margin-bottom: 3px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(0,0,0,.5); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1.25;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; pointer-events: none;
}
.ytm-time:empty, .ytm-drag .ytm-time { display: none; }
/* כפתור כתוביות ליד המסך המלא. מופיע רק בסרטון שיש לו כתוביות ביוטיוב
   וכשהכתוביות דלוקות הוא בצבע המותג */
.ytm-cc {
  flex: none;
  width: 34px; height: 34px;
  border: 0; padding: 0; margin: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.5); color: #fff;
  display: none; place-items: center;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.ytm.ytm-has-cc .ytm-cc { display: grid; }
.ytm-cc svg { width: 20px; height: 20px; fill: currentColor; }
.ytm-cc:hover { background: rgba(0,0,0,.72); }
.ytm-cc:active { transform: scale(.92); }
.ytm-cc:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ytm.ytm-cc-on .ytm-cc { background: var(--o-500); }
.ytm.ytm-cc-on .ytm-cc:hover { background: var(--o-600); }
/* כתוביות דלוקות בזמן ניגון: יוטיוב מצייר אותן בתחתית המסגרת שלו ולכן
   המסגרת חוזרת לגודל התיבה בדיוק (בלי החיתוך) והן נראות מעל הסרטון.
   הסרטון עצמו לא זז, כי בשני המצבים הוא ממלא את התיבה בדיוק. */
.ytm.ytm-cc-show .ytm-frame > div, .ytm.ytm-cc-show .ytm-frame iframe { height: 100%; top: 0; }
/* במסך מלא: רקע שחור על כל המסך והסרטון עצמו בתיבה 16:9 באמצע.
   החיתוך של יוטיוב (240%) מחושב מול תיבה ביחס הזה ולכן גם התמונה
   והסרטון יושבים בה ולא נמתחים על כל המסך. */
.ytm.ytm-is-fs { aspect-ratio: auto; width: 100%; height: 100%; border-radius: 0; background: #000; }
.ytm.ytm-fs-on {
  position: fixed; top: 0; left: 0; right: auto; bottom: auto; z-index: 2147483000;
  width: 100vw; height: 100vh; /* הגודל האמיתי נקבע ב yt-mini.js לפי מה שרואים */
}
/* האבות של נגן במסך מלא: בלי transform/filter/contain שהופכים אותם
   למסגרת של position:fixed ובלי z-index שמשאיר אותו מתחת לתפריט */
.ytm-fs-anc { transform: none !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; perspective: none !important;
  contain: none !important; will-change: auto !important; z-index: auto !important; }
/* בזמן מסך מלא שום דבר של הדף לא יושב מעל הסרטון */
html.ytm-fs-lock .tabbar, html.ytm-fs-lock #menu-btn, html.ytm-fs-lock .legal-bar,
html.ytm-fs-lock #a11y-widget-host, html.ytm-fs-lock #a11y-widget-root { display: none !important; }
/* בזמן מסך מלא הדף לא נגלל ולא נשמר מקום לפס הגלילה שלו בצד */
html.ytm-fs-lock { overflow: hidden; scrollbar-gutter: auto; }
html.ytm-fs-lock body { overflow: hidden; }
/* ברוחב, ספארי באייפון משאיר שוליים בצדדים (ליד המצלמה) וצובע אותם
   בצבע הרקע של הדף. בזמן מסך מלא הרקע שחור כמו הנגן. */
html.ytm-fs-lock, html.ytm-fs-lock body { background: #000 !important; }
/* אייפון: עותק שני של הסרטון שנפתח בנגן של אפל על כל המסך (yt-mini.js).
   בדרך כלל הוא מוסתר מאחורי הנגן שלנו. אם הוא מתנגן בתוך הדף הוא עולה
   מעל הכל עם הכפתורים של יוטיוב. */
.ytm-native { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ytm-native > div, .ytm-native iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}
.ytm.ytm-nat-on .ytm-native { z-index: 20; pointer-events: auto; background: #000; }
/* התיבה ממורכזת בחישוב ולא ב transform: בספארי iframe בתוך תיבה עם
   transform עלול להיות מצויר לא נכון */
.ytm.ytm-is-fs .ytm-stage,
.ytm.ytm-is-fs .ytm-poster,
.ytm.ytm-is-fs .ytm-native {
  inset: auto; aspect-ratio: auto;
  width: var(--ytm-sw, 100%); height: var(--ytm-sh, 100%);
  left: calc((100% - var(--ytm-sw, 100%)) / 2);
  top: calc((100% - var(--ytm-sh, 100%)) / 2);
}
/* במסך מלא התיבה חותכת את מה שיוטיוב מצייר מעל הסרטון ומתחתיו */
.ytm.ytm-is-fs .ytm-stage { overflow: hidden; }
/* אייפון שסובב לרוחב: הכפתור פותח את הנגן של אפל ולכן נשאר סימן ההגדלה */
.ytm.ytm-is-fs.ytm-fs-apple .ytm-fs .ytm-i-grow { display: block; }
.ytm.ytm-is-fs.ytm-fs-apple .ytm-fs .ytm-i-shrink { display: none; }
.ytm.ytm-is-fs .ytm-ctrls { padding: 0 max(12px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-bottom)); }
/* סימון דילוג 5 שניות (לחיצה כפולה בצד) */
.ytm-skip {
  position: absolute; z-index: 6; top: 50%;
  width: 96px; height: 96px; margin-top: -48px;
  border-radius: 50%;
  background: rgba(0,0,0,.5); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 12.5px; font-weight: 800;
  opacity: 0; pointer-events: none;
  transform: scale(.7);
}
.ytm-skip svg { width: 30px; height: 30px; fill: currentColor; }
.ytm-skip-l { left: 14%; margin-left: -48px; }
.ytm-skip-r { right: 14%; margin-right: -48px; }
.ytm-skip.on { animation: ytm-skip .7s ease forwards; }
@keyframes ytm-skip {
  0% { opacity: 0; transform: scale(.7); }
  20% { opacity: 1; transform: scale(1); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.05); }
}
@media (max-width: 640px) {
  .ytm-skip { width: 78px; height: 78px; margin-top: -39px; font-size: 11.5px; }
  .ytm-skip svg { width: 24px; height: 24px; }
  .ytm-skip-l { margin-left: -39px; }
  .ytm-skip-r { margin-right: -39px; }
}
/* --- מצבים --- */
.ytm[data-state="idle"] .ytm-ctrls,
.ytm[data-state="loading"] .ytm-ctrls { display: none; }
.ytm[data-state="resuming"] .ytm-ctrls { display: flex; }
.ytm[data-state="playing"] .ytm-ctrls,
.ytm[data-state="paused"] .ytm-ctrls,
.ytm[data-state="buffering"] .ytm-ctrls,
.ytm[data-state="ended"] .ytm-ctrls { display: flex; }
.ytm[data-state="playing"] .ytm-poster,
.ytm[data-state="buffering"] .ytm-poster { opacity: 0; }
/* בעצירה ובסוף הסרטון התמונה חוזרת ומכסה את מה שיוטיוב מצייר באמצע:
   כפתור פליי אדום בעצירה ורשת המלצות בסוף */
.ytm[data-state="paused"] .ytm-poster,
.ytm[data-state="resuming"] .ytm-poster { opacity: 1; filter: brightness(.55); }
.ytm[data-state="ended"] .ytm-poster { opacity: 1; filter: brightness(.55); }
.ytm[data-state="playing"] .ytm-scrim { opacity: 0; }
.ytm[data-state="paused"] .ytm-scrim { opacity: 0; }
/* הכפתור הגדול באמצע משמש רק להתחלה, על תמונת הפתיחה. מרגע שהסרטון
   התחיל הפליי/עצירה עובר לכפתור הקטן שליד הפס. */
.ytm:not([data-state="idle"]) .ytm-big { opacity: 0; pointer-events: none; transform: scale(.8); }
.ytm[data-state="loading"] .ytm-spin,
.ytm[data-state="resuming"] .ytm-spin,
.ytm[data-state="buffering"] .ytm-spin { display: block; }

.ytm[data-state="ended"] .ytm-end { display: grid; }
.ytm[data-state="ended"] .ytm-tap { pointer-events: none; }
/* בזמן ניגון הפקדים נעלמים בעדינות אחרי כמה שניות ונגיעה על המסך מחזירה אותם */
.ytm[data-state="playing"].ytm-quiet .ytm-ctrls { opacity: 0; pointer-events: none; transition: opacity .4s ease; }
/* מקלדת: כשהמיקוד מהמקלדת על אחד הכפתורים של הנגן הפקדים לא נעלמים.
   :focus-visible ולא :focus-within, כדי שאחרי לחיצת עכבר על כפתור
   הפקדים ימשיכו להיעלם כמו היום. כלל נפרד: דפדפן בלי :has מדלג רק עליו */
.ytm[data-state="playing"].ytm-quiet:has(:focus-visible) .ytm-ctrls { opacity: 1; pointer-events: auto; transition: none; }
.ytm .ytm-ctrls { transition: opacity .2s ease; }
@media (max-width: 640px) {
  .ytm-big { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
  .ytm-big svg { width: 27px; height: 27px; }
  .ytm-track { height: 5px; }
  .ytm-drag .ytm-knob { transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .ytm-big, .ytm-poster, .ytm-scrim, .ytm-track, .ytm-knob { transition: none; }
}

/* ---------- נגישות: טקסט לקורא מסך בלבד ---------- */
/* sr-only: טקסט שלא רואים על המסך אבל קורא מסך מקריא (למשל "חריגה" ליד מספר אדום,
   או שם מלא לכפתור). לא משנה את המראה של שום דבר. */
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* ---------- נגישות: קישור "דלג לתוכן הראשי" ----------
   ui.js מוסיף אותו כפריט הראשון בכל דף עם המעטפת. בלתי נראה לגמרי
   (כמו sr-only) עד שמגיעים אליו במקלדת: אז הוא צף בפינה העליונה.
   לא תופס מקום בדף בשום מצב. */
.skip-link {
  position: fixed; top: 10px; right: 10px; z-index: 10000;
  padding: 10px 16px; border-radius: var(--r-md);
  background: var(--card); color: var(--t-dark);
  border: 2px solid var(--o-500); box-shadow: var(--sh-2);
  font-weight: 700; font-size: 15px; text-decoration: none;
}
.skip-link:focus { outline: 3px solid var(--t-dark); outline-offset: 2px; }
.skip-link:not(:focus) {
  width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; box-shadow: none;
}
/* היעד של הקישור (התוכן הראשי) מקבל מיקוד רק מקוד: בלי מסגרת סביב כל הדף */
main[tabindex="-1"]:focus, .content[tabindex="-1"]:focus { outline: none; }

/* ---------- נגישות: הפחתת תנועה ----------
   הווידג'ט מבטל מעברים וגלילה חלקה רק בתוך הדף (הכלל שלו חל על
   הצאצאים של html), לכן כאן גם html עצמו: גלילה לעוגן קופצת מיד.
   וגם המעבר בין דפים (theme.js, @view-transition) לא רץ, גם כשהמכשיר
   מבקש פחות תנועה וגם כשלחצו "השהיית אנימציות". */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
html.a11y-stop-animations { scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
html.a11y-stop-animations::view-transition-group(*),
html.a11y-stop-animations::view-transition-old(*),
html.a11y-stop-animations::view-transition-new(*) { animation: none !important; }

/* ---------- נגישות: מצבי הווידג'ט, השלמות ----------
   כל כלל כאן תחום תחת מחלקה של מצב שהווידג'ט שם על html (a11y-zoom-N,
   a11y-ls-N וכו') ולכן חל רק אצל מי שהפעיל את המצב. בלי מצב פעיל אף
   כלל כאן לא חל והאתר נראה בדיוק כמו קודם. השלמות שצריכות להגיע גם
   למוח (admin/app.html) יושבות ב a11y.js, כאן רק מה שקשור למעטפת שלנו. */

/* גודל טקסט: הווידג'ט מגדיל בעזרת zoom על כל ילד של body. גובה שנכתב
   ביחידות מסך (100vh, 100dvh, --shell-h) גדל גם הוא פי הזום, והמעטפת
   יצאה גבוהה מהמסך: הדף נגלל, תפריט הצד והמסגרות נחתכו בתחתית. כאן
   הגובה מחולק בגודל הזום, כך שהמעטפת חוזרת בדיוק לגובה המסך. בתוך
   מסגרת אין זום (a11y.js) ולכן לא שם. */
html.a11y-zoom-1:not(.a11y-framed) { --a11y-z: 1.25; }
html.a11y-zoom-2:not(.a11y-framed) { --a11y-z: 1.5; }
html.a11y-zoom-3:not(.a11y-framed) { --a11y-z: 1.75; }
html.a11y-zoom-4:not(.a11y-framed) { --a11y-z: 2; }
html[class*="a11y-zoom-"]:not(.a11y-framed) .shell { min-height: calc(var(--shell-h, 100vh) / var(--a11y-z, 1)); }
html[class*="a11y-zoom-"]:not(.a11y-framed):has(.frame-stack) .shell { height: calc(var(--shell-h, 100dvh) / var(--a11y-z, 1)); min-height: 0; }
html[class*="a11y-zoom-"]:not(.a11y-framed) .sidebar { height: calc(var(--shell-h, 100vh) / var(--a11y-z, 1)); }
/* המסגרות בערימה (המוח ומסך נפרד) קיבלו גובה מ --stack-h, שגם הוא ביחידות
   מסך, ולכן גלשו מתחת למסך ושליש התחתון של המוח לא נראה. כאן הן ממלאות
   את הערימה בדיוק */
html[class*="a11y-zoom-"]:not(.a11y-framed) .frame-stack > iframe { height: 100%; }
@media (max-width: 720px) {
  /* בטלפון התפריט נפתח מעל הדף בגובה המסך וברוחב של עד 86% ממנו */
  html[class*="a11y-zoom-"]:not(.a11y-framed) .sidebar {
    height: calc(100dvh / var(--a11y-z, 1));
    width: min(var(--sidebar-w), calc(86vw / var(--a11y-z, 1)));
    max-width: calc(86vw / var(--a11y-z, 1));
  }
}

/* גודל טקסט, ריווח אותיות ומילים: לשוניות המחלקות בסרגל העליון ברוחב
   שווה נחתכו לאות אחת ושלוש נקודות. במצבים האלה כל לשונית ברוחב הטבעי
   של השם שלה והסרגל נגלל לרוחב (כמו במסך צר מאוד) */
:is(html[class*="a11y-zoom-"], html[class*="a11y-ls-"], html[class*="a11y-ws-"]) .topbar.topbar-depts { justify-content: flex-start; }
:is(html[class*="a11y-zoom-"], html[class*="a11y-ls-"], html[class*="a11y-ws-"]) .dept-list { flex: 0 0 auto; }
:is(html[class*="a11y-zoom-"], html[class*="a11y-ls-"], html[class*="a11y-ws-"]) .dept-item { flex: 0 0 auto; }
:is(html[class*="a11y-zoom-"], html[class*="a11y-ls-"], html[class*="a11y-ws-"]) .dept-txt { overflow: visible; }

/* ריווח אותיות ומילים וגופן קריא: שם פריט בתפריט הצד ("מחשבון ריבית
   דריבית") נחתך בשלוש נקודות. במצבים האלה השם נשבר לשורה שנייה ונקרא
   במלואו */
:is(html[class*="a11y-ls-"], html[class*="a11y-ws-"], html.a11y-readable-font) .nav-item .nav-label { white-space: normal; overflow: visible; text-overflow: clip; }

/* ---------- נגישות: טבעת מיקוד אחידה במקלדת ----------
   טבעת אחת, באותו עובי ובאותו צבע בכל האתר, לכל מה שלוחצים עליו:
   כפתורים, קישורים, לשוניות, מתגים, תיבות סימון, רכיבים עם tabindex.
   רק :focus-visible, כלומר רק כשמגיעים במקלדת: לחיצת עכבר או מגע לא
   מציירות שום טבעת והמראה הרגיל לא זז. שדות טקסט, textarea ו select
   לא כאן, הם שומרים על סימון המיקוד שלהם.
   !important רק על שתי תכונות המסגרת, כדי לגבור על סימוני המיקוד
   הישנים של כל רכיב. הסלקטור עטוף ב :where ולכן החשיבות שלו נמוכה
   ומצבי הווידג'ט (html.a11y-focus-highlight, ניגודיות) עדיין גוברים.
   הצבע במשתנה --focus-ring: דיו כהה על משטח בהיר, לבן על משטח כהה.
   רכיב שהטבעת שלו נחתכת בגבול של מיכל גולל מקבל --focus-ring-offset
   שלילי, והטבעת נכנסת פנימה. */
:root { --focus-ring: var(--t-dark); }
/* משטחים כהים: התפריט (הצבע נגזר ב theme.js), דפי הכניסה, באנרים והנגן */
.sidebar, .topbar.topbar-depts, .menu-surface { --focus-ring: var(--menu-focus); }
.dark-page, .preview-banner, .pwa-banner, .pwa-modal, .site-toast, .ytm { --focus-ring: #fff; }
/* חלונות בהירים שנפתחים מעל דף כהה חוזרים לדיו הכהה */
.ask, .doc { --focus-ring: var(--t-dark); }
:where(button, a[href], [role="button"], [role="tab"], [role="switch"], [role="checkbox"], [role="radio"],
  [role="link"], [role="menuitem"], [role="option"], summary, [tabindex]:not([tabindex="-1"]),
  input[type="checkbox"], input[type="radio"], input[type="range"], input[type="file"]):where(:not(.sr-only, input[type="text"], input:not([type]), textarea, select, [contenteditable=""], [contenteditable="true"])):focus-visible {
  outline: 2px solid var(--focus-ring) !important;
  outline-offset: var(--focus-ring-offset, 2px) !important;
}
/* טבעת שנחתכת במיכל גולל: נכנסת פנימה */
.nav-item a, .dept-item a, .ytm-bar { --focus-ring-offset: -2px; }

/* ---------- נגישות: קישורים בתוך טקסט ----------
   קישור שיושב בתוך משפט (פסקה, רמז, הערה, תווית, תא בטבלה) נבדל מהטקסט
   סביבו רק בצבע. כאן הוא מקבל קו תחתון קבוע (6.10, ניגודיות AA: הכתום מול
   הטקסט שמסביב הוא פחות מ 3 : 1, ולכן צבע לבד לא מספיק). לא חל על כפתורים, תפריטים, לשוניות וסרגלי
   קישורים (התפריט, הסרגל התחתון, הבאנר המשפטי). */
:is(p, li, td, dd, dt, label, small, blockquote, figcaption, .hint, .note, .muted, .no-meets, .kinds-empty, .ct-v, .ct-bugbox, .doc-b)
  a[href]:not(.btn, [class*="btn"], [role="button"], :is(nav, [role="menu"], [role="menubar"], [role="tablist"], .nav-item, .dept-item, .tabbar, .mode-switch, .side-foot, .legal-bar, .auth-footer) a) { text-decoration-line: underline; }