/* ============================================================
   שפת-התנועה של האתר (2026-09-09, בקשת המשתמש)
   שני חלקים: פידבק-לחיצה (למטה, החלק שאושר ועלה לפרוד) ותנועת-כניסה (בסוף הקובץ).
   הקובץ נטען ב-13 העמודים - הוא המקור היחיד לשניהם.

   ---- חלק א': פידבק-לחיצה ----
   "פידבק לחיצה כמו שעשינו בצ'ק ליסטים... לא צריך להגזים, פידבק כלשהו של וידוא לחיצה."

   שלוש עוצמות, לפי מה שהלחיצה **עושה** - החלוקה שהמשתמש אישר:
     1. לחיצה שמשנה משהו מיד (סימון משימה)  → שקיעה קצרה
     2. לחיצה שמנווטת (סרגל, לשונית, כרטיס) → אותה שקיעה בדיוק
     3. לחיצה ששולחת לשרת (חתימה, שמירה)    → שקיעה + מצב-עבודה עד לתשובה

   אותה תנועה בכל האתר, רק המשך שונה. הקובץ הזה הוא המקור היחיד -
   לא לכתוב פידבק-לחיצה מקומי לרכיב חדש.

   ⚠️ עוצמה 3 **לא דורשת JS חדש**: כל מסלולי-השליחה כבר עושים
   `btn.disabled = true` (checklist-app, checklist-edit, content-edit,
   escalate, task-banner, logout). עד היום זה פשוט לא נראה. כאן זה מקבל מראה.
   ============================================================ */

:root{
  --press-in: 90ms;    /* לחיצה פנימה - מהיר, כדי שירגיש מיידי */
  --press-out: 160ms;  /* שחרור - איטי יותר, מרגיש רך ולא קופצני */

  /* ---- סולם המשכים של כל האתר (נבחר 2026-09-09, בבורר-חי) ----
     המקור: IBM Carbon, מצב `productive` - המצב שנבנה במפורש לטבלאות-נתונים
     וטפסים, כלומר בדיוק האפליקציה הזו. הסולם יושב כאן ולא בקובץ נפרד כי
     press.css הוא כבר הקובץ שנטען בכל 13 העמודים - קובץ 14 שצריך לזכור
     לטעון הוא בדיוק סוג המלכודת ש-NEW-PAGE.md מזהיר מפניה.

     ⚠️ כל אנימציה חדשה לוקחת מכאן. לא להמציא ערך. */
  --motion-fast: 110ms;    /* חץ, hover, שינוי-צבע */
  --motion-base: 150ms;    /* שגיאה, טוסט, אלמנט קטן שנכנס/יוצא */
  --motion-panel: 240ms;   /* מודאל, מגירה, סרגל */
  --motion-screen: 300ms;  /* החלפת-מסך, מעבר-עמוד */

  /* העקומה היא לא סגנון - היא מה שהתנועה אומרת.
     האטה-לעצירה קוראת כ"הגיע", האצה-החוצה קוראת כ"עוזב". */
  --ease-enter: cubic-bezier(0, 0, .38, .9);
  --ease-exit:  cubic-bezier(.2, 0, 1, .9);
  --ease-move:  cubic-bezier(.2, 0, .38, .9);
}

/* ---- עוצמה 1+2: שקיעה בלחיצה ----
   נבחר לפי סמנטיקה ולא לפי שם-מחלקה: `button`, קישור-אמיתי, ו-`[data-action]`
   (האידיום של האתר לרכיב-לחיץ עם מאזין-מרכזי). כך רכיב חדש מקבל את זה בחינם. */
button,
a[href],
[data-action],
summary{
  transition: transform var(--press-out) cubic-bezier(.2,.7,.4,1);

  /* ⚠️ שתי שורות שקיימות היום רק בשלושת עמודי-הצ'ק-ליסט, ולכן רק הם מגיבים מיד למגע.
     `manipulation` מבטל את המתנת ה-double-tap-zoom של ספארי (~300ms לפני שהלחיצה
     נרשמת בכלל), ו-tap-highlight מסיר את ההבהוב האפור של iOS שמתחרה בשקיעה שלנו. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button:active,
a[href]:active,
[data-action]:active,
summary:active{
  transform: scale(.96);
  transition-duration: var(--press-in);
}

/* משטחים גדולים שוקעים פחות - כרטיס רחב שמתכווץ ב-4% נראה מתנדנד, לא נלחץ */
.card:active,
.home-card:active,
.acc-card:active,
.stats-card:active,
.progress-card:active,
.owner-sidebar-item:active,
.owner-sidebar-subitem:active{
  transform: scale(.985);
}

/* ============================================================
   אנימציות-כניסה משותפות (2026-09-09)

   ⚠️ למה אנימציה ולא `transition ... display allow-discrete`: ב-`transition`
   האלמנט היוצא **נשאר בזרימה** עד שהמעבר נגמר, כך שבמשך רבע-שנייה שני מסכים
   יושבים אחד מתחת לשני והעמוד קופץ. אנימציה-על-הנכנס-בלבד: היוצא נעלם מיד,
   הנכנס נכנס. זה גם מה שכל מערכת-עיצוב עושה בפועל.

   היציאה מיידית בכוונה - תוכן שעוזב לא צריך זמן-מסך.
   ============================================================ */
@keyframes shishi-fade-in{
  from{ opacity: 0; }
  to  { opacity: 1; }
}
@keyframes shishi-rise-in{
  from{ opacity: 0; transform: translateY(6px); }
  to  { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce){
  /* התנועה יורדת, ההצלבה נשארת - מי שביקש/ה פחות תנועה עדיין צריך/ה לראות
     שמשהו חדש הופיע. זה בדיוק מה ש-WebKit ו-MDN מנחים. */
  @keyframes shishi-rise-in{
    from{ opacity: 0; }
    to  { opacity: 1; }
  }
}

/* ============================================================
   שלד-טעינה (2026-09-09)
   המנוע ב-`shared/skeleton.js`. כאן רק המראה.

   ⚠️ הריצוד הוא `infinite` במכוון, וזה החריג היחיד לכלל "אין animation infinite":
   הוא **מחוון-טעינה**, כלומר בדיוק המקרה ש-WCAG 2.2.2 מחריג - הוא נעלם ברגע
   שהתוכן מגיע, וההמתנה עצמה חסומה ב-`shishiFetch` (30 שניות, 120 בהעלאת-תמונה).
   הוא לא יכול לרוץ לנצח. אותו נימוק בדיוק כמו `press-working` של הכפתור העסוק.
   ============================================================ */
.sk-on{ pointer-events: none; }

.sk-line,
.sk-block,
.sk-cell{
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg, #F1E7DD 25%, #FCF6F0 42%, #F1E7DD 60%);
  background-size: 300% 100%;

  /* שתי אנימציות: הריצוד, ועוד אחת שמחזיקה שקיפות-0 במשך 140ms.
     טעינה מהירה (מטמון, רשת טובה) מסתיימת לפני שהשלד בכלל נראה - כך שאין
     הבהוב-שלד מיותר על כל רינדור מהיר. */
  animation: sk-shimmer 1.5s linear infinite,
             sk-appear 1ms 140ms both;
}
@keyframes sk-shimmer{
  from{ background-position: 100% 0; }
  to  { background-position: 0% 0; }
}
@keyframes sk-appear{
  from{ opacity: 0; }
  to  { opacity: 1; }
}

.sk-row td{ vertical-align: middle; }
.sk-line{ height: 11px; width: 72%; }
/* רוחב משתנה בין העמודות - שורות בעלות אותו רוחב בדיוק קוראות כמו טבלה שבורה,
   לא כמו תוכן שנטען. */
.sk-row td:nth-child(2n) .sk-line{ width: 54%; }
.sk-row td:nth-child(3n) .sk-line{ width: 84%; }
.sk-row:nth-child(2n) td:nth-child(2n) .sk-line{ width: 66%; }

.sk-block{ height: 54px; margin-bottom: 10px; }
.sk-block:last-child{ margin-bottom: 0; }
.sk-cell{ aspect-ratio: 1; border-radius: 8px; }

/* התוכן האמיתי נכנס בהצלבה במקום לקפוץ */
.sk-ready{ animation: shishi-fade-in var(--motion-base) var(--ease-enter); }

@media (prefers-reduced-motion: reduce){
  .sk-line, .sk-block, .sk-cell{
    background: #F1E7DD;
    animation: sk-appear 1ms 140ms both;
  }
  .sk-ready{ animation: none; }
}

/* ---- מה שלא שוקע ----
   כותרת-טבלה: `transform` על תא שהוא `position:sticky` שובר את ההידבקות.
   מקבלת הבהוב-רקע במקום, אותו תפקיד בלי הנזק. */
th[data-action]:active,
th.sortable:active{
  transform: none;
  background: rgba(0,0,0,.06);
}

/* שכבות-רקע פרוסות-מסך (סגירת-תמונה, סגירת-מגירה, רקע-הסרגל) נושאות `data-action`
   כדי שלחיצה עליהן תסגור - אבל הן לא כפתורים. שקיעה של כל המסך נראית כמו תקלה. */
.photo-lightbox:active,
.sidebar-backdrop:active,
.team-drawer-backdrop:active,
[class*="backdrop"]:active,
[class*="overlay"]:active{
  transform: none;
}

/* חלונית-מודל נושאת `data-action` רק כדי שלחיצה בתוכה לא תיחשב לחיצה-על-הרקע (שסוגרת).
   בלי ההחרגה כל לחיצה בתוך החלונית - גם הקלדה בשדה - מכווצת את כל החלונית, נראה כמו תקלה. */
.modal-panel:active{
  transform: none;
}

/* קישור בתוך פסקת-טקסט הוא לא כפתור - שקיעה שם נראית כמו תקלה */
p a[href]:active,
li a[href]:active{
  transform: none;
  opacity: .65;
}

/* ---- עוצמה 3: מצב-עבודה עד שהשרת עונה ----
   הכפתור נשאר שקוע ומעומעם, ולא מקבל לחיצות נוספות - זה מה שמונע לחיצה-כפולה
   על "סיום וחתימה" כשהרשת איטית. */
button:disabled,
button[aria-busy="true"],
.is-busy{
  transform: scale(.98);
  opacity: .62;
  cursor: default;
  pointer-events: none;
  animation: press-working 1.4s ease-in-out infinite;
}

@keyframes press-working{
  0%, 100% { opacity: .62; }
  50%      { opacity: .78; }
}

/* כפתור שכובה בגלל ולידציה (לא בגלל שליחה) לא אמור "לעבוד" - רק דהוי */
button:disabled[data-idle-disabled]{
  animation: none;
}

/* ---- העדפת-נגישות ----
   מי שביקש/ה פחות תנועה עדיין צריך/ה לדעת שהלחיצה נקלטה - התנועה מוחלפת
   בשינוי-רקע, לא מבוטלת. */
@media (prefers-reduced-motion: reduce){
  button, a[href], [data-action], summary{
    transition: background-color var(--press-out) linear, opacity var(--press-out) linear;
  }
  button:active,
  a[href]:active,
  [data-action]:active,
  summary:active,
  .card:active,
  .home-card:active,
  .acc-card:active,
  .stats-card:active,
  .progress-card:active,
  .owner-sidebar-item:active,
  .owner-sidebar-subitem:active{
    transform: none;
    opacity: .7;
  }
  button:disabled,
  button[aria-busy="true"],
  .is-busy{
    transform: none;
    animation: none;
  }
}


/* ============================================================
   חלק ב': תנועת-כניסה (2026-09-09)
   "אחרי שמתחברים לאתר, אולי אפשר להוסיף אנימציות ללשוניות שנפתחות.
    לתת תחושה של לנחות באתר."

   🔴 הכלל שמחייב את כל מה שכאן: **שום דבר לא מתחיל שקוף וממתין ל-JS.**
   כל מה שכאן הוא `animation` שרץ מעצמו בטעינה ומסתיים בין אם JS רץ ובין אם לא.
   הדפוס ההפוך (opacity:0 + מחלקה ש-JS מוסיף) הופך כשל-JS לעמוד ריק לצמיתות.
   ============================================================ */

/* ---- כניסת העמוד ----
   `.app` הוא הילד הראשון של <body> בכל 12 העמודים העצמאיים - מכנה-משותף אמיתי,
   לא בחירה שרירותית. קצר בכוונה: זו תחושת-נחיתה, לא הצגה. */
@keyframes page-enter{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:none; }
}
.app{
  animation: page-enter 240ms cubic-bezier(.2,.7,.4,1) both;
}
/* ⚠️ owner-sidebar.js מעביר את `.app` למיכל חדש כשהסרגל נוחת. העברת-צומת ב-DOM
   מפעילה מחדש אנימציית-CSS, וזה היה נראה כשתי דעיכות רצופות. הכלל הזה עוצר את
   האנימציה אחרי ההעברה - אם היא כבר הסתיימה אין שינוי, ואם היא באמצע היא נסגרת
   למצב הגלוי (opacity:1 הטבעי), אז אין הבהוב בשום מקרה. */
.owner-sidebar-page-content .app{ animation:none; }

/* ---- מעבר בין לשוניות בתוך אותו עמוד ----
   ⚠️ שלושה קבצים מממשים את אותו רעיון בנפרד (owner/app.js, events/app.js, courier/app.js) -
   כולם מחליפים `.screen.active`. כלל CSS אחד כאן מכסה את שלושתם בלי לגעת באף JS,
   ומונע את המצב שבו לשונית אחת מונפשת והשתיים האחרות נשארות חיתוך-חד.

   🔴 **שקיפות בלבד, בלי `transform`.** יש חלוניות עם `position:fixed` שיושבות *בתוך*
   `.screen` (מגירת-הצוות, מגירת-תמונת-המצב, כפתור-השיבוץ הצף) - `transform` על ההורה
   שלהן הופך אותן למוצמדות-להורה במקום למסך, והן קופצות למקום הלא-נכון. */
@keyframes screen-enter{
  from{ opacity:0; }
  to  { opacity:1; }
}
.screen.active{
  animation: screen-enter 180ms ease-out both;
}

/* ---- מעבר בין עמודים ----
   הדפדפן מחזיק את העמוד הקודם על המסך בזמן שהחדש נטען, במקום להבהב בין השניים.
   נתמך באייפד מ-Safari 18.2 (דצמבר 2024) ודלוק כברירת-מחדל; בדפדפן בלי תמיכה
   זה פשוט לא קורה - ניווט רגיל, בלי שבירה. דורש same-origin, וזה כבר המצב. */
@view-transition{
  navigation: auto;
}

/* ---- העדפת-נגישות ----
   כאן התנועה כן מבוטלת לגמרי (בניגוד לפידבק-הלחיצה, ששם היא רק מוחלפת) - לתנועת-כניסה
   אין תפקיד אינפורמטיבי, היא רק תחושה. */
@media (prefers-reduced-motion: reduce){
  .app, .screen.active{ animation:none; }
  @view-transition{ navigation: none; }
}