/* ============================================================================
   GroupiApp — skeleton.css · מצב טעינה אחיד (primitive, G4 גל 2 UX, 06.09.2026)
   ----------------------------------------------------------------------------
   הביקורת: מצב הטעינה לא אחיד — חלק מהמסכים ריקים בזמן טעינה, חלק "קופצים"
   כשהתוכן נכנס. השלד (skeleton) הוא צורת התוכן הסופי מראש: אפס CLS כשהאמת
   מחליפה אותו, בלי ספינר חוסם. הקצב זהה במכוון ל-.disc-skel של feed.css
   (shimmer 1.4s, --ink 8%) כדי שכל האתר ייראה מ"צלם אחד"; כאן זה עשוי כ-
   primitive משותף שכל מסך (מפה, פרופיל, my, notifications, panel…) יכול לצרוך,
   וש-feed יכול להגר אליו בהמשך (feed.css חסום בגל הזה).

   נגישות: על מיכל הטעינה שים  aria-busy="true"  ו-aria-live="polite", והכנס
   טקסט sr-only ("טוען…") כדי שקורא-מסך יידע שתוכן בדרך; ה-shapes עצמם הם
   aria-hidden (ה-.gapp-skel מקבל את זה אוטומטית דרך pointer-events; הוסף
   aria-hidden="true" ברמת הפריט המרונדר). כשהתוכן מוכן — הסר aria-busy
   והחלף את השלד.

   שימוש (דוגמה — כרטיס-רשימה בטעינה, בצורת .gapp-card):
     <div class="gapp-skel-card" aria-hidden="true">
       <div class="gapp-skel gapp-skel-media"></div>
       <div class="gapp-skel gapp-skel-line w70"></div>
       <div class="gapp-skel gapp-skel-line w40"></div>
     </div>
   ============================================================================ */

/* הבסיס: כל צורת-שלד. הרקע --band (משטח שקוע), ומעליו נצנוץ עדין נע. */
.gapp-skel{
  position:relative; overflow:hidden;
  background:var(--band);
  border-radius:var(--radius-sm,8px);
}
.gapp-skel::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,
     transparent,
     color-mix(in srgb, var(--ink) 8%, transparent),
     transparent);
  animation:gapp-skel-shimmer 1.4s ease-in-out infinite;
}
@keyframes gapp-skel-shimmer{ 100%{ transform:translateX(100%) } }

/* שורת טקסט — גובה שורה, פינות רכות */
.gapp-skel-line{ block-size:12px; border-radius:6px }
.gapp-skel-line + .gapp-skel-line{ margin-block-start:10px }
.gapp-skel-title{ block-size:18px; border-radius:7px }

/* בלוק מדיה — יחס גובה-רוחב מוצהר = אפס קפיצה כשהתמונה נכנסת */
.gapp-skel-media{ inline-size:100%; aspect-ratio:16/10; border-radius:var(--radius,16px) }
.gapp-skel-avatar{ inline-size:44px; block-size:44px; border-radius:50% }

/* רוחבי-עזר לשורות (כדי שהשלד לא ייראה כמו בלוקים זהים) */
.gapp-skel .w40,.gapp-skel-line.w40{ inline-size:40% }
.gapp-skel .w60,.gapp-skel-line.w60{ inline-size:60% }
.gapp-skel .w70,.gapp-skel-line.w70{ inline-size:70% }
.gapp-skel .w80,.gapp-skel-line.w80{ inline-size:80% }

/* מעטפת שלד בצורת .gapp-card — אותו border/radius/padding/gap כמו הכרטיס
   האמיתי, כך שההחלפה חלקה לגמרי. משתמש בטוקני card.css אם נטען, עם fallback. */
.gapp-skel-card{
  background:var(--card-bg,var(--bg-elev));
  border:1px solid var(--card-line,var(--line));
  border-radius:var(--card-radius,var(--radius,16px));
  padding:var(--card-pad,16px);
  display:flex; flex-direction:column; gap:var(--card-gap,12px);
}
/* כרטיס-שלד שמתחיל במדיה (כמו .gapp-card--flush) — מדיה צמודה לקצה */
.gapp-skel-card--media{ padding:0; overflow:hidden }
.gapp-skel-card--media .gapp-skel-media{ border-radius:0 }
.gapp-skel-card--media > :not(.gapp-skel-media){ margin-inline:16px }
.gapp-skel-card--media > :last-child{ margin-block-end:16px }

/* reduced-motion: הצורות נשארות (הן עדיין מוסרות CLS) אבל הנצנוץ נעצר. */
@media (prefers-reduced-motion:reduce){
  .gapp-skel::after{ animation:none }
}

/* sr-only — טקסט "טוען…" שמלווה מיכל aria-busy (אם המסך לא משתמש ב-a11y.js's).
   זהה בכוונה ל-.hp/.a11y-sr הקיימים — לא מוסתר ב-display:none (קורא-מסך מדלג). */
.gapp-sr-only{
  position:absolute !important; inline-size:1px; block-size:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0;
}