/* core/ui.css — הגיליון המשותף
   ── סולמות ──
   תחת הפחתת תנועה כל --dur-N הוא 0s ולא 0 — משך בלי יחידה אינו ערך תקף והמאפיין נזרק בשקט.
   --tabbar-h — גובה שורת הניווט התחתונה; סוף התוכן וכל אלמנט צף מעליה נגזרים ממנו, וריווח שאינו נגזר נדבק לשורה או משאיר חור. */
:root{
--fs-1:.65rem;--fs-2:.75rem;--fs-3:.85rem;--fs-4:.95rem;--fs-5:1.2rem;--fs-6:1.7rem;--fs-7:2.8rem;
--sp-1:2px;--sp-2:4px;--sp-3:6px;--sp-4:8px;--sp-5:12px;--sp-6:16px;--sp-7:24px;
--r-1:4px;--r-2:6px;--r-3:8px;--r-4:10px;--r-5:14px;--r-6:20px;--r-7:999px;
--z-1:1;--z-2:10;--z-3:20;--z-4:30;--z-5:40;--z-6:50;--z-7:60;--z-8:70;
--dur-1:.12s;--dur-2:.15s;--dur-3:.2s;--dur-4:.3s;--dur-5:.6s;--dur-6:.7s;--ease:cubic-bezier(.2,.8,.3,1);
--op-1:.3;--op-2:.4;--op-3:.5;--op-4:.6;--op-5:.7;--op-6:.8;--op-7:.85;
--lh-1:1;--lh-2:1.3;--lh-3:1.45;--lh-4:1.6;--lh-5:1.75;--lh-6:2;
--ls-1:.3px;--ls-2:1px;--ls-3:4px;--ls-n1:-.4px;--ls-n2:-1px;
--tabbar-h:64px;
--veil:rgba(10,20,30,.5);--veil-deep:rgba(0,0,0,.75);
--alert:#B3261E;--on-alert:#FFFFFF;
--sh-1:rgba(0,0,0,.10);--sh-2:rgba(0,0,0,.22);--sh-3:rgba(0,0,0,.35);
--on-dark:#FFFFFF;--on-dark-2:rgba(255,255,255,.9);--on-dark-3:rgba(255,255,255,.65);--fill-dark:rgba(255,255,255,.15)
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-1:0s;--dur-2:0s;--dur-3:0s;--dur-4:0s;--dur-5:0s;--dur-6:0s}
}
/* ── משטח לחיץ וחלון דו-שיח ── */
button,[data-act]{-webkit-user-select:none;user-select:none}
body.locked{overflow:hidden}
.veil{position:fixed;inset:0;z-index:var(--z-4);background:var(--veil);display:none;justify-content:center}
.veil.open{display:flex}
.sheet-hd{display:flex;align-items:center;gap:var(--sp-5)}
.sheet-hd .x{background:none;border:0;cursor:pointer;flex:none;width:36px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.sheet-hd .x .ico{width:20px;height:20px}
@media (hover:hover){
  .sheet-hd .x:hover{background:var(--card-2)}
}
.sheet-ft{display:flex}
/* גוף או תחתית ריקים אינם תופסים מקום — הריווח של מיכל ריק נראה כחור בדיאלוג. */
.sheet-bd:empty,
.sheet-ft:empty{display:none}
/* ── רשימה נפתחת עם חיפוש ──
   כאן המבנה בלבד — המראה והמצבים בגיליון של האפליקציה, ואותם מצבים בכל אחת.
   הרשימה ב-body ובמיקום קבוע, והמשתנים נכתבים מהמלבן של השדה; בדרגת הדיאלוג ואחריו ב-DOM — רשימה בתוך דיאלוג צפה מעליו.
   --combo-gap המרווח מהשדה ו---combo-max הגובה המרבי — של האפליקציה. */
.combo{position:relative}
.combo-list{--combo-top:0px;--combo-left:0px;--combo-w:100%;--combo-room:100vh;--combo-gap:0px;--combo-max:240px;
  position:fixed;z-index:var(--z-4);overflow-y:auto;
  top:calc(var(--combo-top) + var(--combo-gap));left:var(--combo-left);width:var(--combo-w);
  max-height:min(var(--combo-max), calc(var(--combo-room) - var(--combo-gap)))}
.combo-list.is-up{top:calc(var(--combo-top) - var(--combo-gap))}
.combo-opt{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);width:100%;
  border:0;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer}
.combo-empty{cursor:default}
/* ── באנר העדכון ──
   יושב במקום הטוסט בלי מרווח משלו — טוסט שמופיע בזמן שהבאנר פתוח עולה מעליו.
   צורה אחת בכל האפליקציות — רקע מלא וכפתור לבן; --upd-bg ו---upd-ink מחליפים את הרקע והדיו,
   ו---upd-btn ו---upd-btn-ink את הכפתור, באפליקציה שבחרה גוון משלה (שיעורים — שמנת וכפתור לבן). והוא מעל הנעילה, --z-8: גרסה ישנה במסך הכניסה עלולה לחסום כניסה. */
#updater{
  position:fixed;inset-inline:0;z-index:var(--z-8);
  bottom:calc(var(--toast-bottom) + env(safe-area-inset-bottom));
  display:none;justify-content:center;padding:0 var(--sp-6)}
#updater.show{display:flex}
#updater .in{
  background:var(--upd-bg,var(--brand));color:var(--upd-ink,var(--on-brand));border-radius:var(--r-5);padding:var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
  display:flex;align-items:center;gap:var(--sp-5);box-shadow:0 6px 24px var(--sh-3);
  font-size:var(--fs-3);font-weight:700;max-width:520px;width:100%
}
#updater button{
  margin-inline-start:auto;background:var(--upd-btn,var(--on-brand));color:var(--upd-btn-ink,var(--brand));border:0;border-radius:var(--r-4);
  padding:var(--sp-4) var(--sp-6);font-family:inherit;font-weight:700;cursor:pointer;font-size:var(--fs-3);flex:none
}
#updater button.x{
  margin-inline-start:0;background:none;color:var(--upd-ink,var(--on-brand));opacity:var(--op-5);padding:0;width:32px;height:32px;
  display:inline-flex;align-items:center;justify-content:center}
#updater button.x .ico{width:18px;height:18px}
/* אייקון מצב (stIcon) — בטוסט, בכותרת דיאלוג, בכפתור עסוק ובסרגל הסנכרון: בגודל הטקסט ובצבעו, ממורכז לשורה */
.st-ic{display:inline-flex;vertical-align:-.22em;margin-inline-end:.4em;flex:none}
.st-ic .ico{width:1.2em;height:1.2em}
#updater .upd-ic{display:inline-flex;flex:none}
#updater .upd-ic .ico{width:20px;height:20px}
/* ── שכבת הטוסט ──
   div לכל הודעה — אלמנט קבוע אחד נדרס בהודעה השנייה.
   המשתנה --toasts-lift הוא גובה הבאנר הפתוח ומרווח, נמדד בפתיחתו ונכתב ב-setProperty; אפס כשהוא סגור. */
#toasts{--toasts-lift:0px;position:fixed;inset-inline:0;bottom:calc(var(--toast-bottom) + env(safe-area-inset-bottom) + var(--toasts-lift));z-index:var(--z-5);display:grid;gap:var(--sp-4);justify-items:center;pointer-events:none;padding:0 var(--sp-6)}
.toast{background:var(--brand-soft);color:var(--brand-ink);border-radius:var(--r-6);padding:var(--sp-5) var(--sp-7);font-size:var(--fs-3);font-weight:600;line-height:var(--lh-3);box-shadow:0 6px 20px var(--sh-2);max-width:92vw;text-align:center;animation:toastUp var(--dur-3) ease-out}
.toast.bad{background:var(--bad);color:var(--bad-soft)}
.toast.good{background:var(--brand-fill);color:var(--on-brand)}
.toast.out{opacity:0;transition:opacity var(--dur-4)}
@keyframes toastUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* ── מצבי רכיב ──
   important! ב-.hidden בכוונה — המחלקה חייבת לגבור על כלל אחר שנותן display. */
.hidden{display:none !important}
/* html בבורר — אין להסירו: הקובץ נטען לפני app/style.css, ומצב עסוק חייב לגבור על הסמן של הרכיב. */
html .is-busy{opacity:var(--op-4);cursor:wait}
/* ── באנר כשל האחסון ──
   דרגת «נעילה» — כשל כתיבה נשאר גלוי מעל כל מסך. */
#ls-alert{position:fixed;z-index:var(--z-7);left:0;right:0;top:0;background:var(--alert);color:var(--on-alert);
  direction:rtl;text-align:center;font-weight:700;font-size:var(--fs-3);line-height:var(--lh-4);
  padding:var(--sp-5) calc(var(--sp-7) * 2);box-shadow:0 2px 14px var(--sh-3)}
#ls-alert button{position:absolute;right:var(--sp-4);top:var(--sp-4);background:transparent;border:0;color:var(--on-alert);
  cursor:pointer;padding:0;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center}
#ls-alert button .ico{width:20px;height:20px}
/* ── שומר העלייה ──
   בצבעי offline שבתצורה, והכפתור בצבעים ההפוכים — צבע שלישי אינו בתצורה. */
#boot-fail{--boot-bg:#FFFFFF;--boot-ink:#1A1A1A;--boot-bg-dark:#121212;--boot-ink-dark:#F2F2F2;
  --boot-fg-use:var(--boot-ink);--boot-bg-use:var(--boot-bg);
  position:fixed;inset:0;z-index:var(--z-7);display:flex;align-items:center;justify-content:center;
  padding:var(--sp-7);background:var(--boot-bg-use);color:var(--boot-fg-use);
  font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
@media (prefers-color-scheme:dark){
  #boot-fail{--boot-fg-use:var(--boot-ink-dark);--boot-bg-use:var(--boot-bg-dark)}
}
.boot-fail-box{max-width:340px;text-align:center}
.boot-fail-msg{margin:0 0 var(--sp-7);font-size:var(--fs-5);font-weight:700}
.boot-fail-btn{border:0;border-radius:var(--r-5);padding:var(--sp-5) var(--sp-7);font:inherit;font-weight:700;
  cursor:pointer;user-select:none;background:var(--boot-fg-use);color:var(--boot-bg-use)}
.boot-fail-btn:focus-visible{outline:3px solid var(--boot-fg-use);outline-offset:3px}
/* ── מצב הטעינה ── */
.view-loading{min-height:60vh;display:grid;place-items:center}
.view-spin{width:28px;height:28px;border-radius:var(--r-7);border:3px solid var(--border);
  border-top-color:var(--brand);animation:view-spin .8s linear infinite}
@keyframes view-spin{to{transform:rotate(360deg)}}
/* מציין הטעינה של הדף — סמל האפליקציה, כמו מסך הפתיחה של המעטפת */
.view-logo{width:96px;height:96px;border-radius:22%;animation:view-pulse 1.6s ease-in-out infinite}
@keyframes view-pulse{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.view-spin,.view-logo{animation:none}}
/* ── הקליפה החשופה ──
   הקוד חושף את המסגרת רק יחד עם מסך שמשתמש בה — מסגרת גלויה לפני המסך הראשון מהבהבת מעליו.
   :not(#view) נושא סגוליות של מזהה — אין להחליפו במחלקה: הוא גובר על ה-display שהאפליקציה נותנת למסגרת. */
.is-bare > :not(#view){display:none}
/* ── עורך תקופות הפעילות (core/periods.js) — אחד בהנהלה ובשכר לימוד: שורה לכל תקופה — מ · עד · הסרה ── */
.per-list{display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.per-row{display:grid;grid-template-columns:1fr 1fr auto;gap:var(--sp-2);align-items:center}
.per-lbl{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-2);color:var(--text-2);min-width:0}
/* סגוליות של שתי מחלקות — גוברת על כללי השדות של האפליקציה (.frm-row select), שנטענים אחרי */
.per-row .per-lbl select{flex:1;min-width:0;width:auto;border:1.5px solid var(--border);border-radius:var(--r-4);padding:var(--sp-2) var(--sp-3);font:inherit;font-size:var(--fs-2);background:var(--card);color:var(--text)}
.per-del{border:none;background:none;color:var(--bad);cursor:pointer;width:32px;height:32px;display:grid;place-items:center;padding:0}
.per-del .ico{width:17px;height:17px}
.per-add{width:100%;font:inherit;font-size:var(--fs-3);border:1.5px dashed var(--border);background:none;color:var(--text-2);cursor:pointer;padding:var(--sp-4);border-radius:var(--r-3)}
.per-del:focus-visible,.per-add:focus-visible{outline:2px solid var(--text);outline-offset:2px}