/* ============================================================================
   מסך החלוקה — "Sunrise Glow"
   ============================================================================

   המסך הראשון שעוצב מחדש (2.09.2026). הוא הלב של המוצר והצפוף ביותר, ולכן
   נבחר ראשון: אם הוא עובד, השאר קלים יותר.

   כל ערך כאן מגיע מ-tokens.css דרך var(). אין צבע, מרווח או רדיוס מוקלד.

   ארבע הבעיות שהמסך הזה בא לפתור (נצפו בצילומי מסך, 2.09)
   -------------------------------------------------------
   1. הצ'רום אכל שליש מהמסך והלוגו הופיע בו פעמיים
   2. "הסכום שלי" היה קבור בקופסה שחורה שנראתה כמו שדה טכני
   3. אי אפשר היה להמשיך בלי לגלול — לא היה CTA קבוע
   4. פסקת הוראות בת שלוש שורות. ממשק שצריך הסבר אינו ברור
   ============================================================================ */

/* ------------------------------------------------------------------ הדר ---
   מחליף את הלוגו והסלוגן שחזרו בכל מסך. מבט אחד עונה על שתי השאלות
   היחידות שיש למשתמש: "איפה אני" ו"כמה אני חייב". */
.c-head {
  background: var(--navy);
  color: var(--text-on-dark);
  /* ממשיך את שורת המותג שמעליו ונוגע בקצוות. הפינות המעוגלות רק למטה —
     כך הגוש קורא כהדר של אפליקציה, לא ככרטיס שמרחף על משטח. */
  margin: 0 calc(var(--s4) * -1) var(--s5);
  padding: 0 var(--s4) var(--s5);
  /* נשאר למעלה כשגוללים — כדי שתמיד יודעים באיזה שלב אנחנו (נתנאל, 3.09).
     הריפוד העליון והשוליים השליליים מבטלים זה את זה במנוחה, כך שהמיקום
     לא זז; כשהגוש נדבק לקצה, הריפוד הוא מה שמפריד את הכותרת מהמסגרת. */
  position: sticky; top: 0; z-index: var(--z-sticky);
  padding-top: var(--s3); margin-top: calc(var(--s3) * -1);
  /* בלי פינות מעוגלות. הן גרמו לגוש להיקרא כ"מסגרת" שמונחת על המסך
     במקום כהדר שהוא חלק ממנו — נתנאל הצביע על זה 2.09. פס מלא
     מקצה לקצה, בלי קצוות, נקרא כשכבת אפליקציה. */
}
.c-head-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); margin-bottom: var(--s3); flex-wrap: wrap;
}
.c-step {
  font-size: var(--t-xs); font-weight: var(--w-bold);
  letter-spacing: .02em; opacity: .75;
}
.c-room {
  font-size: var(--t-xs); font-weight: var(--w-bold);
  background: rgba(253,250,246,.13);
  padding: var(--s1) var(--s3); border-radius: var(--r-pill);
}

/* הגיבור. 44px, ספרות ברוחב אחיד כדי שהמספר לא "יקפוץ" כשמישהו אחר
   לוקח פריט וכל הסכומים מתעדכנים בזמן אמת. */
.c-mine-label { font-size: var(--t-sm); opacity: .8; margin-bottom: var(--s1); }
.c-mine-amount {
  font-size: var(--num-hero); font-weight: var(--w-black);
  line-height: var(--lh-tight); font-variant-numeric: var(--num-feat);
  display: flex; align-items: baseline; gap: var(--s2);
}
.c-mine-amount .cur { font-size: var(--t-xl); font-weight: var(--w-bold); opacity: .7; }
.c-mine-amount.is-bumping { animation: cMineBump var(--dur-slow) var(--ease-out); }
@keyframes cMineBump { 0%{transform:scale(1)} 40%{transform:scale(1.06)} 100%{transform:scale(1)} }

.c-who {
  display: flex; align-items: center; gap: var(--s2);
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid rgba(253,250,246,.15);
  font-size: var(--t-sm);
}
.c-who-dot {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size:var(--t-xs); font-weight: var(--w-black); color: #fff; flex: none;
}

/* --------------------------------------------------------------- התקדמות ---
   שני מספרים שמניעים לסיים, בלי לחץ מזויף: כמה מהחשבון כבר משויך, וכמה
   אנשים סיימו. הפס הוא משוב על מצב אמיתי — לא טיימר ולא ספירה לאחור. */
.c-prog { margin-top: var(--s4); }
.c-prog-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--t-sm); margin-bottom: var(--s2); gap: var(--s3);
}
.c-prog-row b { font-variant-numeric: var(--num-feat); }
.c-prog-track {
  /* מסלול כהה, לא בהיר. הגרסה הראשונה השתמשה בלבן שקוף והכתום בלט
     ממנו ב-2.66:1 בלבד — מתחת ל-3:1 הנדרש לאלמנט שנושא מידע. כהה
     ב-25% נותן 5.57:1. */
  height: 6px; background: rgba(0,0,0,.25);
  border-radius: var(--r-pill); overflow: hidden;
}
.c-prog-fill {
  /* גדל ב-transform ולא ב-width. אנימציה על width מאלצת חישוב פריסה
     בכל פריים; scaleX רץ על ה-GPU ולא נוגע בפריסה כלל. חשוב כאן במיוחד
     כי הפס מתעדכן בזמן אמת בכל פעם שמישהו בחדר לוקח פריט.
     ⚠️ המקור בצד ימין כי האפליקציה בעברית — הפס גדל מימין לשמאל. */
  height: 100%; background: var(--orange); border-radius: var(--r-pill);
  width: 100%; transform-origin: right;
  transition: transform var(--dur-slow) var(--ease-out), background var(--dur-base) var(--ease);
}
.c-prog-fill.is-done { background: var(--turquoise); }

/* ------------------------------------------------------------ פס מצב ---
   שלושה סימנים בכל מצב: צבע, אייקון וטקסט. צבע לבדו נכשל בעיוורון צבעים,
   בשמש חזקה, ובצילום מסך בשחור-לבן. */
/* שורה דקה מעל הרשימה במקום פס צבעוני שתופס גובה. */
.c-status {
  display: flex; align-items: center; gap: var(--s2);
  padding: 0 var(--s1) var(--s3);
  font-size: var(--t-sm); font-weight: var(--w-med);
}
.c-status.waiting { color: var(--yellow-ink); }
.c-status.done    { color: var(--turquoise-ink); }
.c-status .ico { display: inline-flex; flex: none; }


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

   עכשיו: משטח אחד רציף, ובתוכו שורות שמופרדות בקו שיער. אין מרווח מת
   בין הפריטים, המשטח נקרא כאובייקט אחד, והעין רצה למטה ברשימה במקום
   לקפוץ בין קופסאות. */
/* בלי משטח ובלי מסגרת. השורות יושבות ישירות על רקע העמוד ומופרדות
   בקו שיער בלבד. הגרסה הקודמת עטפה אותן במלבן לבן, ונתנאל תיאר את
   זה 2.09 כ"לבן ומשעמם, וגם בתוך תבנית". התוכן הוא הדבר — לא המשטח
   שמחזיק אותו. */
.c-list {
  background: none;
  margin-bottom: var(--s4);
  border-top: 1px solid var(--border);
}

.c-item {
  position: relative;
  padding: var(--s3) var(--s2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
/* קו שיער בין שורות, לא מסגרת סביב כל אחת */
.c-item + .c-item::before {
  content: ""; position: absolute; top: 0;
  inset-inline: var(--s2) 0;
  height: 1px; background: var(--border);
}
.c-item:active { background: var(--bg); }

/* "שלי" — רקע כתום רך ופס צבע בקצה ההתחלה. הפס מחליף את המסגרת: הוא
   מסמן בבירור בלי להפוך את השורה חזרה לקופסה. */
.c-item.mine {
  background: var(--orange-soft);
  padding-inline: var(--s3);
  margin-inline: calc(var(--s1) * -1);
  border-radius: var(--r-sm);
}
.c-item.mine::after {
  content: ""; position: absolute; inset-block: 0;
  inset-inline-start: 0; width: 4px; background: var(--orange);
}
.c-item.mine + .c-item::before, .c-item.mine::before { inset-inline: 0; }
.c-item.untaken .c-item-name { color: var(--text-soft); }
.c-item:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }

/* שורה 1 — שם ומחיר. המחיר אפור: הוא מידע, לא כותרת. הגיבור היחיד של
   המסך הוא הסכום בהדר, ומחיר פריט לא מתחרה בו. */
.c-item-top { display: flex; align-items: baseline; gap: var(--s3); }
.c-item-name {
  font-size: var(--t-base); font-weight: var(--w-bold); color: var(--text);
  line-height: var(--lh-tight); flex: 1 1 auto; min-width: 0;
  overflow-wrap: anywhere;
}
.c-item-price {
  font-size: var(--t-base); font-weight: var(--w-bold); color: var(--text-soft);
  font-variant-numeric: var(--num-feat); flex: none; white-space: nowrap;
}
.c-item.mine .c-item-price { color: var(--text); }
.c-item-meta { font-size: var(--t-xs); color: var(--text-soft); }
.c-item-discount { font-size: var(--t-xs); color: var(--orange-ink); font-weight: var(--w-med); }

/* שורה 2 — מי לקח, ולידו הפעולות. */
.c-item-who {
  display: flex; align-items: center; gap: var(--s2);
  margin-top: var(--s1); min-height: 30px;
}
.c-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size:var(--t-xs); font-weight: var(--w-black); color: #fff;
  flex: none;
}

.c-avatar.multi { width: auto; min-width: 24px; padding: 0 5px; border-radius: var(--r-pill); }
.c-avatar + .c-avatar { margin-inline-start: -6px; box-shadow: 0 0 0 2px var(--bg); }
.c-item.mine .c-avatar + .c-avatar, .s-row.settled .c-avatar { box-shadow: none; }
.c-take-hint { font-size: var(--t-sm); color: var(--text-soft); font-weight: var(--w-med); }
.c-split-note { font-size: var(--t-xs); color: var(--text-soft); font-weight: var(--w-med); }
.c-mine-tag {
  display: inline-flex; align-items: center; gap: var(--s1);
  color: var(--orange-ink); font-size: var(--t-xs); font-weight: var(--w-black);
}
.c-spacer { flex: 1 1 auto; }

.c-icon-btn {
  width: 40px; height: 40px; margin: -8px 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 50%;
  color: var(--text-soft); cursor: pointer; font-family: var(--font);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.c-icon-btn .ic { width: 18px; height: 18px; }
.c-icon-btn:active { background: rgba(35,58,71,.08); }
.c-icon-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.c-icon-btn.remove { color: var(--orange-ink); }
.c-icon-btn.is-open { background: rgba(35,58,71,.09); color: var(--text); }

/* ------------------------------------------------------------ CTA דביק ---
   הסכום והכפתור תמיד גלויים. זו התשובה לבעיה מספר 3: היום צריך לגלול
   כדי למצוא איך ממשיכים, ובאפליקציה שמשתמשים בה בעמידה זה מס על כל צעד. */
.c-sticky {
  position: sticky; bottom: 0; z-index: var(--z-sticky);
  /* ⚠️ המרווח השלילי חייב להיות בדיוק הריפוד האופקי של .app ב-shell.css,
     שהוא --s4. הגרסה הראשונה השתמשה ב---s5 והוציאה את הפס 4px מעבר
     לרוחב המסך — גלישה אופקית שנתפסה רק בבדיקה של מסך החלוקה עצמו.
     שינוי הריפוד ב-.app מחייב שינוי כאן. */
  margin: var(--s5) calc(var(--s4) * -1) calc(var(--s4) * -1);
  /* ⚠️ הריפוד התחתון של .app נחתך למינימום במסכים האלה (ראה shell.css).
     בלי זה, כשגוללים עד הסוף הפס "נוחת" במקומו הטבעי ומעליו נשאר
     שטח מת של כ-85px — נתנאל דיווח על זה 3.09. */
  padding: var(--s3) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom, 0px));
  display: flex; gap: var(--s3); align-items: center;

  /* צבע הרקע של העמוד, לא לבן, ובלי מסגרת. פס לבן עם גבול נקרא כמלבן
     זר שהודבק על העמוד — נתנאל הצביע על זה 2.09. עכשיו הוא מסתיר את
     התוכן שגולל מתחתיו בלי להכריז על עצמו, והמעבר הרך למעלה מרמז שיש
     עוד תוכן מתחת. */
  /* 🔴 הפס עצמו אטום, והדהייה עברה לפס דק **מעליו**.
     קודם הדהייה הייתה בתוך הפס — 38% העליונים שלו היו שקופים למחצה,
     ובדיוק שם יושבות שורות ההסבר ("הקבלה תישמר בהיסטוריה", "החלוקה
     הסתיימה"). טקסט קטן על גבי כרטיס צבעוני שגולל מתחתיו אינו קריא.
     ⚠️ צבע הדהייה היה מוקלד בערך הבהיר (rgba(241,234,221,0)) — כלומר
     במצב כהה הוא דהה לכיוון בהיר. עכשיו הוא נגזר מ---bg ונכון בשניהם. */
  background: var(--bg);
}
.c-sticky::before {
  content: ""; position: absolute; inset-inline: 0; bottom: 100%;
  height: var(--s5); pointer-events: none;
  background: linear-gradient(to top, var(--bg), rgba(0, 0, 0, 0));
}
.c-cta {
  flex: 1 1 auto; min-height: var(--tap-min);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  background: var(--orange-cta); color: var(--on-orange);
  border: none; border-radius: var(--r-md);
  font-family: var(--font); font-size: var(--t-lg); font-weight: var(--w-black);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
}
.c-cta:active { transform: translateY(1px); filter: brightness(.96); }
.c-cta:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* ⚠️ border מלא ולא border-color בלבד. הכפתור הראשי איבד את ה-border
   שלו כשהוא עבר ל---orange-cta, ואז ה-ghost נשאר בלי מסגרת בכלל —
   חץ מרחף בלי גבול. נתפס בצילום מסך 2.09. */
.c-cta.ghost {
  /* רקע העמוד, לא לבן — אחרת הוא נקרא כקופסה לבנה קטנה שצפה על הקרם.
     המסגרת לבדה מספיקה כדי שייקרא ככפתור. */
  background: none; color: var(--text);
  border: 1.5px solid var(--border-strong);
  flex: 0 0 auto; padding: 0 var(--s4); font-size: var(--t-base);
}
.c-cta:disabled { opacity: .45; cursor: default; }

/* ------------------------------------------------------- קישורים משניים --- */
.c-foot { margin-top: var(--s2); text-align: center; }
.c-foot a, .c-foot button.linkish {
  font-size: var(--t-sm); color: var(--text-soft); font-weight: var(--w-med);
  background: none; border: none; text-decoration: underline;
  cursor: pointer; font-family: var(--font);
  min-height: var(--tap-min); padding: 0 var(--s3);
}

/* ------------------------------------------------------------ מי לוחץ ---
   רק במצב מקומי (טלפון אחד שעובר בין אנשים). בחדר משותף אין בזה צורך. */
.c-who-bar { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.c-who-chip {
  min-height: var(--tap-min); display: inline-flex; align-items: center; gap: var(--s2);
  padding: 0 var(--s4); border-radius: var(--r-pill);
  background: var(--surface); border: 1.5px solid var(--border);
  font-size: var(--t-sm); font-weight: var(--w-bold); color: var(--text);
  cursor: pointer;
}
.c-who-chip.active { border-color: var(--orange); background: var(--orange-soft); }

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

   הגרסה הראשונה נראתה ישנה מסיבה מדידה: שלושת הכפתורים ירשו סגנון עם
   מסגרת מלאה ופינות קטנות, שנקרא כטופס ולא כפעולה. עכשיו הם שבבים
   מלאים בלי מסגרת, וההיררכיה ביניהם ברורה. */
.c-split {
  margin: var(--s3) calc(var(--s4) * -1) calc(var(--s3) * -1);
  padding: var(--s4);
  background: var(--surface-sunk);
  border-top: 1px solid var(--border);
}

.c-split-actions {
  display: flex; gap: var(--s2); flex-wrap: wrap;
  margin-bottom: var(--s4);
}
/* שבב פעולה — מלא, מעוגל לגמרי, בלי מסגרת. אזור מגע 40px בגובה. */
.c-mini {
  min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 0 var(--s4); border-radius: var(--r-pill);
  background: none; border: 1px solid var(--border-strong);
  color: var(--text); font-family: var(--font);
  font-size: var(--t-sm); font-weight: var(--w-bold); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.c-mini .ic { width: 16px; height: 16px; color: var(--text-soft); }
.c-mini:active { transform: scale(.97); background: rgba(35,58,71,.06); }
.c-mini:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* פעולה הרסנית — טקסט בלבד, בלי משטח. היא לא צריכה למשוך את העין. */
.c-mini.quiet { background: none; border-color: transparent; color: var(--text-soft); }

.c-split-title {
  font-size: var(--t-xs); font-weight: var(--w-black);
  color: var(--text-soft); margin-bottom: var(--s2);
}
.c-split-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); padding: var(--s2) 0;
}
.c-split-row + .c-split-row { border-top: 1px solid var(--border); }
.c-split-name { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); font-weight: var(--w-bold); }
.c-step-btns { display: flex; align-items: center; gap: var(--s2); }
.c-step-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: none; border: 1px solid var(--border-strong);
  color: var(--text); font-size: var(--t-xl); font-weight: var(--w-bold);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font); line-height: 1;
  transition: transform var(--dur-fast) var(--ease);
}
.c-step-btn:active { transform: scale(.92); }
.c-step-btn:disabled { opacity: .3; cursor: default; }
.c-step-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.c-step-count { min-width: 22px; text-align: center; font-size: var(--t-base); font-weight: var(--w-black); font-variant-numeric: var(--num-feat); }

/* ------------------------------------------------------------- עריכה --- */
.c-edit { background: var(--surface); border: 1.5px solid var(--orange); border-radius: var(--r-md); padding: var(--s4); margin-bottom: var(--s3); }
.c-edit label { display: block; font-size: var(--t-xs); font-weight: var(--w-bold); color: var(--text-soft); margin: var(--s3) 0 var(--s1); }
.c-edit label:first-child { margin-top: 0; }
.c-edit input {
  width: 100%; min-height: var(--tap-min);
  font-size: var(--t-base); /* ⚠️ מתחת ל-16px iOS מזים ושובר את הפריסה */
  font-family: var(--font); color: var(--text);
  padding: 0 var(--s3); border: 1.5px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface);
}
.c-edit input:focus-visible { outline: none; border-color: var(--orange); box-shadow: var(--focus-ring); }
.c-edit-actions { display: flex; gap: var(--s2); margin-top: var(--s4); flex-wrap: wrap; }
.c-danger {
  min-height: var(--tap-min); padding: 0 var(--s4); border-radius: var(--r-sm);
  background: var(--surface); color: var(--danger); border: 1.5px solid var(--danger);
  font-family: var(--font); font-size: var(--t-sm); font-weight: var(--w-bold); cursor: pointer;
}

.c-avatar.sm { width: 22px; height: 22px; font-size:var(--t-xs); border-width: 0; }

/* ============================================================================
   מסך הסיכום
   ============================================================================
   אותה שפה כמו מסך החלוקה: הדר נייבי מקצה לקצה, רשימה מקובצת אחת, שטוח
   בלי צללים. משתמש מחדש ב-.c-head, ב-.c-list ובכפתורים.

   ⚠️ ניווט לתשלום חייב להישאר סינכרוני בתוך אירוע הלחיצה — iOS חוסם
   bit:// ו-pbox:// אחרת, בשקט ובלי הודעת שגיאה. אין להוסיף אנימציה,
   השהיה או מעבר לפני הניווט. הכפתורים כאן הם קישורים ישירים כמו קודם.
   ============================================================================ */

.s-row { position: relative; padding: var(--s4) var(--s2); }
.s-row + .s-row::before {
  content: ""; position: absolute; top: 0;
  inset-inline: var(--s2) 0; height: 1px; background: var(--border);
}
/* שולם או משלם לבד — השורה נסגרת ויוצאת מהמוקד */
.s-row.settled { background: var(--turquoise-soft); padding-inline: var(--s4); margin-inline: calc(var(--s2) * -1); border-radius: var(--r-sm); }
.s-row.settled + .s-row::before, .s-row.settled::before { inset-inline: 0; }
.s-row.settled::after {
  content: ""; position: absolute; inset-block: 0;
  inset-inline-start: 0; width: 4px; background: var(--turquoise);
}

.s-top { display: flex; align-items: baseline; gap: var(--s3); }
.s-name {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--t-base); font-weight: var(--w-bold); color: var(--text);
  flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere;
}
.s-amount {
  font-size: var(--num-sm); font-weight: var(--w-black); color: var(--text);
  font-variant-numeric: var(--num-feat); flex: none; white-space: nowrap;
}
/* ---------- הרגע שבו מישהו מסומן "שולם" ----------
   רעיון של נתנאל, 3.09: "אלמנט אור כזה שמקיף את הכרטיסייה בהדרגה,
   וגם הקו שמוחק את הסכום יהיה בהדרגה."

   ⚠️ שתי האנימציות רצות **פעם אחת**, על .is-settling בלבד, והמחלקה
   מגיעה מ-state.settleAnimId ולא מה-DOM. זה אותו לקח שנשרף בחגיגה:
   render מחליף את ה-HTML, וכל מחלקה שנוספה ידנית לאלמנט מתה איתו
   באמצע התנועה. דגל ב-state שורד את הציור מחדש; מחלקה ב-DOM לא. */
.s-row.settled .s-amount { color: var(--turquoise-ink); opacity: .75; position: relative; }
.s-row.settled .s-amount::after {
  content: ""; position: absolute; inset-inline: -1px; top: 52%;
  height: 1.5px; border-radius: 2px; background: currentColor;
  transform-origin: right center;   /* עברית — הקו נמתח מהתחלת הקריאה */
}
.s-row.settled.is-settling .s-amount::after { animation: strikeIn 480ms var(--ease-out) both; animation-delay: var(--settle-delay, 0ms); }
@keyframes strikeIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }

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

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

   ⚠️ **inset: 2px — הטבעת מצוירת *בתוך* הכרטיס ולא על גבולו.**
   השורות בסיכום נוגעות זו בזו, ולכן טבעת על הגבול נגעה בשכנות מלמעלה
   ומלמטה. זו בדיוק ההתנגשות שנתנאל דיווח עליה.

   המנגנון הוא clip-path: חלון שנפתח על גבי טבעת שלמה. הוא חותך גם את
   ההילה, ולכן האור "נוסע" עם הפס במקום לעמוד במקום.
   ⚠️ backwards ולא both — אחרת הפריים האחרון היה נשאר וממשיך לצייר
   טבעת שקופה מעל הכרטיס לנצח. */
.s-glow {
  position: absolute; inset: 2px; pointer-events: none;
  border-radius: calc(var(--r-sm) - 1px);
}
.s-glow::before, .s-glow::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid var(--turquoise);
  box-shadow: 0 0 9px rgba(95, 160, 141, .6);
  animation-duration: 1100ms;
  animation-timing-function: linear;
  /* 🔴 both ולא backwards — היוצא מן הכלל למלכודת שנשרפה פעמיים היום.
     .s-glow הוא אלמנט חד-פעמי שקיים רק בזמן התנועה, ואיש לא כותב לו
     סגנון אחריה. הבעיה כאן הפוכה: כשהאנימציה נגמרה, backwards שחרר
     אותה — והטבעת קפצה חזרה לגלויה במלואה לפריים או שניים לפני
     שהאלמנט הוסר. נתפס בהרצה חוזרת של הבדיקה (1 מ-3), לא בעין. */
  animation-fill-mode: both;
  animation-delay: var(--settle-delay, 0ms);
}
.s-glow::before { animation-name: beamTop; }
.s-glow::after  { animation-name: beamBottom; }

/* שלושת השלבים: 0-52% הפס רץ על הקצה מהמרכז החוצה · 52-72% הוא פונה
   בפינות ויורד בצלעות עד המפגש · 72-100% הכרטיס מוקף, ואז דועך. */
@keyframes beamTop {
  0%   { clip-path: inset(0 50% calc(100% - 5px) 50%); opacity: 1; }
  52%  { clip-path: inset(0 0 calc(100% - 5px) 0);     opacity: 1; }
  72%  { clip-path: inset(0 0 50% 0);                  opacity: 1; }
  82%  { clip-path: inset(0 0 50% 0);                  opacity: 1; }
  100% { clip-path: inset(0 0 50% 0);                  opacity: 0; }
}
@keyframes beamBottom {
  0%   { clip-path: inset(calc(100% - 5px) 50% 0 50%); opacity: 1; }
  52%  { clip-path: inset(calc(100% - 5px) 0 0 0);     opacity: 1; }
  72%  { clip-path: inset(50% 0 0 0);                  opacity: 1; }
  82%  { clip-path: inset(50% 0 0 0);                  opacity: 1; }
  100% { clip-path: inset(50% 0 0 0);                  opacity: 0; }
}

/* הפס הצדדי נמתח מלמעלה למטה במקום להופיע מוכן */
.s-row.settled.is-settling::after { animation: settleBar 420ms var(--ease-out) both; transform-origin: top; animation-delay: var(--settle-delay, 0ms); }
@keyframes settleBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* 🔴 --text ולא --text-soft. רשימת הפריטים יושבת על כרטיס משתתף, שרקעו
   אינו --surface אלא color-mix(--pc 12%, --bg) — משטח שונה לכל אדם.
   נמדד בדפדפן על כל חמשת צבעי הפלטה: --text-soft נותן שם 4.18-4.24,
   מתחת ל-4.5 הנדרש לטקסט רגיל. בכהה הוא כשיר (6.75-6.90), אבל צבע אחד
   לשני המצבים עדיף על שני מסלולים.
   ⚠️ scripts/check-contrast.js מודד מול --bg ומול --surface בלבד, ולכן
   לא תפס ולא יתפוס את המשטח המעורבב. מדידה כאן היא בדפדפן. */
.s-items {
  font-size: var(--t-xs); color: var(--text);
  margin-top: var(--s1); line-height: var(--lh-body);
}

/* מצב — שלושה סימנים: צבע, אייקון וטקסט */
.s-state {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-size: var(--t-xs); font-weight: var(--w-black);
  color: var(--turquoise-ink); margin-top: var(--s2);
}

/* כפתורי תשלום — לוגואים רשמיים, קומפקטיים ושטוחים. קודם היו שלושה
   בלוקים צבעוניים גדולים לכל אדם, כלומר תשעה על מסך אחד בחדר של ארבעה. */
.s-pay { display: flex; gap: var(--s2); margin-top: var(--s3); }
.s-pay a {
  flex: 1 1 0; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  background: none; border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); text-decoration: none;
  color: var(--text); font-size: var(--t-sm); font-weight: var(--w-bold);
  transition: background var(--dur-fast) var(--ease);
}
.s-pay a:active { background: rgba(35,58,71,.06); }
.s-pay a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.s-pay img { width: 18px; height: 18px; border-radius: 4px; flex: none; }

/* בורר מצב — "שולם" ו"משלם לבד". הוכרע 2.09 שהם סותרים: אי אפשר
   שהשניים יהיו דלוקים יחד. הממשק מציג רק את מה שרלוונטי, ולכן הסתירה
   לא יכולה להיווצר מלכתחילה. */
.s-choice { display: flex; gap: var(--s2); margin-top: var(--s3); flex-wrap: wrap; }
.s-check {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s3);
  border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  background: none; cursor: pointer;
  font-size: var(--t-sm); font-weight: var(--w-bold); color: var(--text);
}
.s-check input { width: 20px; height: 20px; accent-color: var(--turquoise); cursor: pointer; }
.s-check:has(input:checked) { background: var(--turquoise-soft); border-color: var(--turquoise); color: var(--turquoise-ink); }
.s-check:has(input:disabled) { opacity: .6; cursor: default; }
.s-note { font-size: var(--t-xs); color: var(--text-soft); margin-top: var(--s2); }

/* ---------- הצהרת "משלם/ת ישירות" שממתינה לאישור המארח/ת ----------
   10.09. שלושת הסימנים של מצב "ממתין" כבר קיימים באפליקציה ואין כאן
   שפה חדשה: הצבע הוא --yellow-ink על --yellow-soft (אותו זוג של
   .warn-badge ושל .c-status.waiting), האייקון הוא שעון, והטקסט אומר
   את המצב במילים. ⚠️ --yellow עצמו הוא 1.51:1 מול לבן ולעולם לא נושא
   טקסט - רק --yellow-ink. */
.s-req {
  margin-top: var(--s3);
  padding: var(--s3);
  border-radius: var(--r-sm);
  background: var(--yellow-soft);
}
.s-req-txt {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--t-sm); font-weight: var(--w-bold);
  color: var(--yellow-ink);
}
.s-req-txt svg { width: 16px; height: 16px; flex: none; }
.s-req-acts { display: flex; gap: var(--s2); margin-top: var(--s3); }
.s-req-acts .hx-btn { flex: 1 1 0; }

/* התיבה של האורח/ת בזמן ההמתנה. בלי זה היא הייתה נצבעת בטורקיז של
   .s-check:has(input:checked) - כלומר נראית סגורה בדיוק כשהיא לא. */
.s-check.is-pending:has(input:checked) {
  background: var(--yellow-soft); border-color: var(--yellow); color: var(--yellow-ink);
}
.s-check.is-pending:has(input:checked)::before { background: var(--yellow-ink); }

/* ---------- הפאנל בסיכום נפתח בתנועה ----------
   החץ כבר הסתובב 180° והבטיח תנועה — והתוכן קפץ. הבטחה שלא מתממשת
   נקראת כתקלה קטנה, גם כשלא שמים עליה את האצבע. (סקר התנועה, 3.09)

   grid-template-rows מ-0fr ל-1fr הוא הדרך היחידה לפתוח גובה לא ידוע
   ברציפות. הילד חייב overflow:hidden ו-min-height:0.
   ⚠️ animation ולא transition: render בונה את הפאנל מחדש בכל ציור, ואין
   מצב "לפני" שממנו transition יכול לרוץ. ההשהיה השלילית ממשיכה מהמקום
   שבו התנועה הייתה — אחרת כל סנכרון חדר היה מתחיל אותה מאפס. */
.s-panel {
  display: grid; grid-template-rows: 1fr;
  animation: panelOpen var(--dur-enter) var(--ease-out) backwards;
  animation-delay: var(--panel-delay, 0ms);
}
.s-panel > * { overflow: hidden; min-height: 0; }
@keyframes panelOpen {
  from { grid-template-rows: 0fr; opacity: 0; }
  to   { grid-template-rows: 1fr; opacity: 1; }
}
.s-items-wrap { margin-top: var(--s1); }

/* ---------- מישהו הצטרף לחדר ----------
   הרגע החברתי היחיד באפליקציה. ההודעה אומרת שזה קרה; התנועה מראה
   **מי** — השורה של האדם החדש היא זו שנכנסת, ולא כל הרשימה. */
.s-row.is-joining, .tsp-row.is-joining {
  animation: joinIn 420ms var(--ease-out) backwards;
  animation-delay: var(--join-delay, 0ms);
}
@keyframes joinIn {
  from { opacity: 0; transform: translateY(-8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .s-panel, .s-row.is-joining, .tsp-row.is-joining { animation: none !important; }
  .s-panel { grid-template-rows: 1fr !important; }
}

/* ============================================================================
   כרטיסים ותנועה — הסבב שמחזיר חיים
   ============================================================================
   נתנאל 2.09: "האפליקציה נראית לי מתה לגמרי... מרגיש שהכל מודבק ולא נראה
   כאילו נוצרה ב-2026."

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

   הכלל שנשמר: תנועה שהיא **משוב** — כן. תנועה שהיא **קישוט** — לא.
   שום דבר מעל 300ms, והכול נעצר תחת prefers-reduced-motion.
   ============================================================================ */

/* -- הכרטיס חוזר, אבל רך ------------------------------------------------
   נתנאל ביקש להחזיר כרטיסים כדי שיהיה ברור שאלה פריטים. הם חוזרים עם
   פינות נדיבות ועומק עדין — לא המסגרת הקשיחה של הגרסה הראשונה. */
.c-list { border-top: none; display: flex; flex-direction: column; gap: var(--s2); }
.c-item {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: var(--s3) var(--s4) !important;
  margin-inline: 0 !important;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              background var(--dur-base) var(--ease);
}
.c-item + .c-item::before { display: none; }
/* 🔴 6.09 - הפס היה בצד שמאל. הגרסה המקורית של הפס (.c-item.mine::after)
   השתמשה ב-inset-inline-start ונחתה נכון בימין; כשהיא הוחלפה בצל פנימי
   הצד התהפך בלי ששמו לב, כי ל-box-shadow אין מקבילה לוגית וההיסט שלו
   פיזי. בעברית תחילת השורה היא ימין, ושם צריך להיות הסימון.
   ⚠️ היסט שלילי = הצל נדחף שמאלה ולכן נחשף בקצה **הימני**. */
.c-item.mine {
  background: var(--orange-soft);
  box-shadow: var(--shadow-2), inset -4px 0 0 var(--orange);
}
.c-item.mine::after { display: none; }
.c-item.untaken { background: var(--surface); box-shadow: var(--shadow-1); }
/* לחיצה — משוב מיידי, לפני שפיירבייס בכלל שמע */
.c-item:active { transform: scale(.975); box-shadow: var(--shadow-1); }

.s-row {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: var(--s4) !important;
  margin-inline: 0 !important;
  box-shadow: var(--shadow-1);
}
.s-row + .s-row::before { display: none; }
/* היסט שלילי — הפס בקצה הימני, תחילת הקריאה בעברית. ראה .c-item.mine */
.s-row.settled {
  background: var(--turquoise-soft);
  box-shadow: var(--shadow-1), inset -4px 0 0 var(--turquoise);
}
.s-row.settled::after { display: none; }
.c-list { gap: var(--s2); }

/* -- כניסה מדורגת -------------------------------------------------------
   הרשימה נחשפת שורה-שורה במרווח קצר. זה מה שהופך טעינה מ"הופיע" ל"נבנה",
   וזו התנועה שהכי מורגשת מבלי להסב תשומת לב לעצמה. */
/* ⚠️ הכניסה מדורגת רק בכניסה אמיתית למסך, ולא בכל ציור מחדש.
   הגרסה הראשונה החילה את האנימציה גלובלית, וכל לחיצה על פריט הפעילה
   אותה מחדש על כל הרשימה — נתנאל תיאר את זה 2.09 כ"קפיצות והבהובים".
   המנגנון שמזהה מעבר מסך אמיתי כבר היה קיים ב-render.js (.step-anim);
   כאן רק תולים עליו את האנימציה. ציור רגיל לא זז בכלל. */
@keyframes cRowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.step-anim .c-item, .step-anim .s-row { animation: cRowIn var(--dur-enter) var(--ease-out) both; }
.step-anim .c-item:nth-child(1),.step-anim .s-row:nth-child(1){ animation-delay: 0ms; }
.step-anim .c-item:nth-child(2),.step-anim .s-row:nth-child(2){ animation-delay: 40ms; }
.step-anim .c-item:nth-child(3),.step-anim .s-row:nth-child(3){ animation-delay: 80ms; }
.step-anim .c-item:nth-child(4),.step-anim .s-row:nth-child(4){ animation-delay: 120ms; }
.step-anim .c-item:nth-child(5),.step-anim .s-row:nth-child(5){ animation-delay: 160ms; }
.step-anim .c-item:nth-child(n+6),.step-anim .s-row:nth-child(n+6){ animation-delay: 200ms; }

/* אותו כלל לאווטאר: הוא קופץ פנימה בכניסה למסך בלבד. בציור רגיל הוא
   פשוט שם, ולכן לחיצה על פריט לא מהבהבת את כל העיגולים במסך. */
@keyframes cPop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.step-anim .c-avatar { animation: cPop var(--dur-enter) var(--ease-out) both; }

/* -- הכפתור הראשי חי ---------------------------------------------------- */
.c-cta { box-shadow: var(--shadow-cta); }
.c-cta:active { transform: translateY(1px) scale(.99); }
.c-cta.ghost { box-shadow: none; }

/* -- הכפתור עומד לבד, והחזרה מתחתיו ------------------------------------
   הדפוס המקצועי לזרימת משימה: פעולה ראשית אחת ברוחב מלא, ופעולה משנית
   כקישור שקט מתחתיה. שני כפתורים זה לצד זה מתחרים ביניהם. */
.c-sticky { flex-direction: column; align-items: stretch; gap: var(--s2); }
/* "ביטול" ו"חזרה לסריקה" חולקים שורה אחת — שתי פעולות משניות, שורה אחת,
   ובלי בלוק נפרד מתחת לפס שהשאיר 84px של שטח מת (נתנאל, 3.09).

   🔴 4.09 — נתנאל: "הם לא במיקומים טובים." והם לא היו:
   "ביטול" ירש `flex: 1` ו-`width: 100%` מהכפתורים הרחבים שמעליו, נמתח על
   247px, והתווית שלו ריחפה במרכז השטח הריק הזה. "חזרה לסריקה" נדחק לקצה
   הנגדי. שתי פעולות שצפות בלי עוגן, עם חור ביניהן.

   התיקון: **שתיהן נצמדות לקצוות, בדיוק כמו הכפתור הראשי שמעליהן.**
   "ביטול" הוא פעולה חוזרת ולכן הוא כפתור אמיתי עם מסגרת, בתחילת הקריאה
   (מימין). "חזרה לסריקה" היא יציאה נדירה ולכן היא נשארת קישור שקט בקצה
   הנגדי. ההיררכיה נקראת מהצורה, לא רק מהגודל. */
.c-sticky-more { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
/* שורת הסבר קצרה בתוך הפס הדביק. עד 3.09 היא ישבה ב-.c-foot מתחתיו —
   ופס דביק, מעצם הגדרתו, יושב מעל מה שבא אחריו. הטקסט נבלע. */
.c-sticky-note {
  font-size: var(--t-xs); color: var(--text-soft); text-align: center;
  margin-bottom: var(--s1);
}
/* התשובה של "סיום" — יושבת בדיוק במקום שבו הכפתור היה. */
.c-sticky-done {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  font-size: var(--t-sm); font-weight: var(--w-black); color: var(--turquoise-ink);
  margin-bottom: var(--s1);
}
.c-sticky-done svg { width: 18px; height: 18px; flex: none; }
.c-sticky-more .c-cta.ghost {
  /* ⚠️ שלושתם נדרשים. `.c-sticky .c-cta` קובע `width: 100%`, `flex: 1 1 auto`
     ו-`min-height: 40px` — ודריסת אחד מהם בלבד משאירה את הכפתור מתוח או
     קטן מאזור המגע המינימלי. */
  flex: 0 0 auto !important;
  width: auto !important;
  min-height: var(--tap-min) !important;
  padding: 0 var(--s4);
  border: 1.5px solid var(--border-strong) !important;
  border-radius: var(--r-pill);
  color: var(--text) !important;
}
.c-sticky-more .c-cta.ghost:disabled { opacity: .45; }
.c-back-link {
  flex: 0 0 auto;
  background: none; border: none; cursor: pointer; font-family: var(--font);
  font-size: var(--t-sm); font-weight: var(--w-med); color: var(--text-soft);
  text-decoration: underline; min-height: var(--tap-min); padding: 0 var(--s2);
}
.c-back-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
.c-sticky .c-cta { width: 100%; }
.c-sticky .c-cta.ghost {
  border: none; min-height: 40px; font-size: var(--t-sm);
  color: var(--text-soft); font-weight: var(--w-bold);
}

/* ============================================================================
   מסך הסיכום — שפה משלו
   ============================================================================
   נבחר על ידי נתנאל 2.09 מתוך שלוש חלופות.

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

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

   מדוד: טקסט כהה על גוון של 12% נותן 8.4:1 בגרוע ביותר. לעומת זאת
   **הסכום בצבע האדם על הרקע שלו נכשל** (3.86–4.67), ולכן הטקסט נשאר
   נייבי בכל מקרה והצבע נושא רק את הזהות.
   ============================================================================ */

body[data-screen="summary"] .s-row {
  --pc: var(--navy);
  background: color-mix(in srgb, var(--pc) 12%, var(--bg));
  /* היסט שלילי — הפס בקצה הימני, תחילת הקריאה בעברית. ראה .c-item.mine */
  box-shadow: var(--shadow-1), inset -4px 0 0 var(--pc);
  border-radius: var(--r-md);
  padding: var(--s4) !important;
}
/* דפדפן ללא color-mix מקבל את המשטח הרגיל — הצבע נשאר בפס ובאווטאר */
@supports not (background: color-mix(in srgb, red 10%, blue)) {
  body[data-screen="summary"] .s-row { background: var(--surface); }
}
body[data-screen="summary"] .s-row .c-avatar {
  width: 34px; height: 34px; font-size:var(--t-sm);
  background: var(--pc) !important;
}
body[data-screen="summary"] .s-name { font-size: var(--t-lg); }
body[data-screen="summary"] .s-amount { font-size: var(--num-md); }

/* מי שסגר — טורקיז גובר על צבע האדם. המצב חשוב יותר מהזהות. */
body[data-screen="summary"] .s-row.settled {
  background: var(--turquoise-soft);
  box-shadow: var(--shadow-1), inset -4px 0 0 var(--turquoise);
}
body[data-screen="summary"] .s-row.settled .c-avatar { opacity: .55; }

/* הפעולות נפתחות רק כשצריך — המסך נשאר נקי עד שמחליטים לפעול */
.s-more {
  display: inline-flex; align-items: center; gap: var(--s1);
  margin-top: var(--s3); min-height: 40px; padding: 0 var(--s3);
  background: none; border: none; cursor: pointer; font-family: var(--font);
  font-size: var(--t-sm); font-weight: var(--w-bold); color: var(--text);
  border-radius: var(--r-pill);
}
.s-more:active { background: rgba(35,58,71,.07); }
.s-more:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.s-more .ic { transition: transform var(--dur-base) var(--ease); }
.s-more[aria-expanded="true"] .ic { transform: rotate(180deg); }
/* ⚠️ בלי אנימציית כניסה על הפאנל.
   render() מחליף את כל ה-HTML, ולכן כל אלמנט נולד מחדש בכל ציור —
   ואנימציה עליו רצה שוב ושוב. זה מקור ההבהוב שנשאר אחרי התיקון הראשון:
   לחיצה על "שיוך לכולם" ציירה מחדש, והפאנל הפתוח הבהב.

   **הכלל שנלמד כאן: רק אלמנטים בתוך .step-anim רשאים להיות מונפשים.**
   כל השאר חייב להיות סטטי, אחרת כל שינוי מצב מהבהב. */

/* -- שבב הפירוט --------------------------------------------------------
   קודם רשימת הפריטים הייתה טקסט אפור ארוך מתחת לסכום. היא גזלה שתי שורות
   בכל כרטיס ואיש לא קרא אותה. עכשיו היא שבב שאומר כמה פריטים, ונפתחת
   בלחיצה למי שרוצה לדעת מה בדיוק. */
.s-chip {
  display: inline-flex; align-items: center; gap: var(--s1);
  margin-top: var(--s2); min-height: 32px; padding: 0 var(--s3);
  background: rgba(255,255,255,.55); border: none; border-radius: var(--r-pill);
  font-family: var(--font); font-size: var(--t-xs); font-weight: var(--w-bold);
  color: var(--text); cursor: pointer;
}
.s-chip .ic { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease); }
.s-chip[aria-expanded="true"] .ic { transform: rotate(180deg); }
.s-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.s-items { margin-top: var(--s2); }

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

   מתג ולא תיבה, מהסיבה שהמיפוי נכון: תיבת סימון אומרת "בחרתי בפריט
   מרשימה"; מתג אומר "הדלקתי מצב". "שולם" הוא מצב.

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

   ה-<input> נשאר במקומו ורק מוסתר ויזואלית — הוא מה שמחזיק את המצב,
   את המקלדת ואת קורא המסך. הידית והמסילה הן פסאודו-אלמנטים של ה-label,
   כי פסאודו-אלמנטים על <input> אינם נתמכים באופן אחיד. */
.s-check { position: relative; }
.s-check input { position: absolute; opacity: 0; width: 0; height: 0; }

/* המסילה */
.s-check::before {
  content: ""; width: 42px; height: 24px; flex: none;
  border-radius: var(--r-pill);
  background: var(--border-strong); border: none;
  transition: background var(--dur-fast) var(--ease);
}
/* הידית — ממוקמת ביחס ל-label, ולכן ההיסט הוא הריפוד של ה-label ועוד 3px */
.s-check::after {
  content: ""; position: absolute;
  top: 50%; margin-top: -9px;
  inset-inline-start: calc(var(--s3) + 3px);
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(35, 58, 71, .35);
  transition: translate var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease);
}
.s-check:has(input:checked)::before { background: var(--turquoise-ink); }
.s-check:has(input:checked)::after {
  /* 42 מסילה − 18 ידית − 3 − 3 = 18px מהלך. שלילי = שמאלה, וזה הכיוון
     הנכון בעברית: הידית יוצאת מהתחלת הקריאה ונוסעת לסופה. */
  translate: -18px 0;
  background: var(--surface) center/11px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F6B58' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.s-check:has(input:focus-visible) { box-shadow: var(--focus-ring); }
/* לחיצה — משוב מיידי על ה-pointer-down, לא בשחרור */
.s-check:active::after { width: 21px; }
@media (prefers-reduced-motion: reduce) {
  .s-check::before, .s-check::after { transition: none !important; }
  .s-check:active::after { width: 18px; }
}

/* -- טיפוגרפיה עם ניגוד -------------------------------------------------
   היה: כמעט הכול באותו גודל ובאותו משקל. ניגוד טיפוגרפי הוא רוב מה
   שגורם לממשק להיראות יקר — מספר גדול ושחור מול תווית קטנה ורגילה. */
.c-mine-label { font-size: var(--t-xs); font-weight: var(--w-med); opacity: .7; letter-spacing: .04em; }
.c-mine-amount { letter-spacing: -0.02em; }
.c-step { font-size:var(--t-xs); letter-spacing: .06em; opacity: .65; font-weight: var(--w-med); }
.c-item-name { letter-spacing: -0.005em; }
.s-amount { letter-spacing: -0.02em; }
.s-name { font-weight: var(--w-black); }

/* -- מעבר בין מסכים ------------------------------------------------------
   קדימה נכנס מכיוון אחד, חזרה מהשני. --nav-dir נקבע ב-render.js לפי
   מיקום המסך ברצף. זה לא קישוט: המוח קורא כיוון כמיקום במרחב, וזה מה
   שמבדיל בין אפליקציה לבין דפים שמתחלפים. */
.step-anim {
  /* ⚠️ backwards ולא both. אנימציה על transform שנשארת "ממולאת" אחרי הסיום
     — גם כשהערך הסופי הוא none — הופכת בכרום את המעטפת למסגרת הייחוס של
     כל position:fixed שבתוכה. התוצאה: גיליון הטיפ נצמד לתחתית המסמך ולא
     לתחתית המסך, ועם רשימה ארוכה הוא נעלם מתחת לקו הגלילה. נמצא 3.09.
     backwards משחרר את האלמנט למצבו הטבעי ברגע שהאנימציה נגמרת — והמצב
     הטבעי זהה לפריים האחרון, כך שאין קפיצה. */
  animation: navIn var(--dur-slow) var(--ease-out) backwards;
}
@keyframes navIn {
  from { opacity: 0; transform: translateX(calc(var(--nav-dir, 1) * 18px)); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================================
   רגע החגיגה — חלקי פאזל עם השמות
   ============================================================================
   רץ פעם אחת בלבד, כשכל המשתתפים סגורים. הרעיון של נתנאל: כל חלק נושא
   שם של משתתף, כך שהמטאפורה של השם מתגלמת בדיוק ברגע שבו היא נכונה —
   החשבון התפרק לחתיכות, וכולן חזרו למקום.

   למה דווקא כאן: כלל השיא-והסוף אומר שחוויה נזכרת לפי איך שהיא נגמרה.
   זה הרגע היחיד באפליקציה שראוי לחגוג בו, ולכן גם היחיד. */
.cele {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s5); padding: var(--s6);
  background: rgba(35,58,71,.92);
  animation: celeIn var(--dur-slow) var(--ease-out) both;
}
@keyframes celeIn { from { opacity: 0; } to { opacity: 1; } }

.cele-svg { display: block; max-width: 100%; height: auto; }
.pzc.is-empty { opacity: .3; }

/* 🔴 כל אנימציות החגיגה תלויות ב-.is-entering, שנוסף **רק בציור הראשון**.
   בלי זה כל render() בזמן שהחגיגה על המסך — וב-3.2 השניות האלה מגיעים
   עדכונים מ-Firebase — מפעיל את האנימציה מחדש, והחתיכות מהבהבות.
   זה בדיוק הדפוס שנתפס כבר בגיליון הטיפ ובכרטיסי החלוקה. */
.cele.is-entering { animation: celeIn var(--dur-slow) var(--ease-out) both; }
.cele.is-entering .pzc {
  /* 900ms ולא 620: נתנאל ביקש תנועה איטית ומציאותית יותר (3.09).
     ⚠️ הערכים כאן חייבים להתאים ל-CELE_* ב-js/render.js — הם קובעים
     מתי הדגל שמונע הפעלה חוזרת יורד. */
  animation: celePiece 900ms cubic-bezier(.18,.9,.28,1.06) both;
  animation-delay: calc(var(--i,0) * 200ms);
  transform-origin: center;
}
/* --dx ו---dy נקבעים לכל חתיכה לפי מיקומה בפאזל, כדי שכל אחת תגיע
   מהכיוון שלה ומרחוק — ולא רק "תגדל במקום". */
/* מסלול בשלושה שלבים במקום קו ישר: החתיכה מגיעה מרחוק וגדולה יותר,
   מאטה כשהיא מתקרבת, ונוחתת עם תיקון קטן — כמו יד שמניחה חתיכה
   במקום. קו ישר עם האצה אחידה נקרא כמו מעבר CSS, לא כמו תנועה. */
@keyframes celePiece {
  from { opacity: 0;
         transform: translate(calc(var(--dx,0) * 1px), calc(var(--dy,0) * 1px)) scale(.28) rotate(var(--rot, 0deg)); }
  35%  { opacity: 1; }
  70%  { transform: translate(calc(var(--dx,0) * 0.1px), calc(var(--dy,0) * 0.1px)) scale(1.06) rotate(calc(var(--rot, 0deg) * .12)); }
  88%  { transform: scale(.985) rotate(0deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes celePieceQuiet {
  from { opacity: 0; transform: translate(calc(var(--dx,0) * 1px), calc(var(--dy,0) * 1px)) scale(.28); }
  to   { opacity: .3; transform: none; }
}
.cele.is-entering .pzc.is-empty { animation-name: celePieceQuiet; }

.cele-title {
  color: var(--text-on-dark); font-size: var(--t-2xl); font-weight: var(--w-black);
  text-align: center;
}
.cele-sub { color: rgba(253,250,246,.75); font-size: var(--t-base); text-align: center; }
.cele.is-entering .cele-title { animation: celeIn var(--dur-slow) var(--ease-out) calc(var(--cele-end, 1300ms)) both; }
.cele.is-entering .cele-sub   { animation: celeIn var(--dur-slow) var(--ease-out) calc(var(--cele-end, 1300ms) + 120ms) both; }
.cele.is-entering .cele-close { animation: celeIn var(--dur-slow) var(--ease-out) calc(var(--cele-end, 1300ms) + 240ms) both; }
.cele-close {
  min-height: var(--tap-min); padding: 0 var(--s7); border-radius: var(--r-pill);
  background: var(--orange-cta); color: #fff; border: none; cursor: pointer;
  font-family: var(--font); font-size: var(--t-lg); font-weight: var(--w-black);
}
.cele-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* מי שביקש פחות תנועה מקבל את המסך מיד, בלי הרכבה */
@media (prefers-reduced-motion: reduce) {
  .pzc, .cele-title, .cele-sub, .cele-close, .cele, .step-anim { animation: none !important; }
  .s-glow::before, .s-glow::after, .s-row.settled.is-settling::after,
  .s-row.settled.is-settling .s-amount::after { animation: none !important; }
}

/* הדר מצומצם — למסכים שאין להם מספר גיבור. אותו גוש נייבי, פחות גובה. */
/* ---------- ההדר שמתכווץ בגלילה ----------
   נתנאל 3.09: "האם החלק העליון של המסך גדול מידי?" — כן. 259px מתוך 844
   הם 31% מהמסך, והם נשארו כך לאורך כל הגלילה מאז שההדר הפך לדביק.

   מה נשאר בגלילה: שורת השלב, שם החדר, והמספר. אלה שתי השאלות שההדר
   הדביק נועד לענות עליהן — "באיזה שלב אני" ו"כמה יצא לי". כל השאר מתקפל.

   grid-template-rows מ-1fr ל-0fr הוא הדרך היחידה לקפל תוכן בגובה לא ידוע
   בצורה רציפה. הילד חייב overflow:hidden ו-min-height:0, אחרת הוא גולש
   החוצה במקום להיחתך. */
.c-head-more {
  display: grid; grid-template-rows: 1fr; opacity: 1;
  transition: grid-template-rows var(--dur-enter) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.c-head-more > * { overflow: hidden; min-height: 0; }
body[data-scrolled="1"] .c-head-more { grid-template-rows: 0fr; opacity: 0; }

/* המספר קטן מעט בגלילה — הוא עדיין הדבר הגדול בהדר, אבל לא צריך את מלוא
   הנוכחות שלו אחרי שכבר ראו אותו. */
/* 🔴 10.09 - `.78em` מחושב מגודל **ההורה** (16px) ולא מגודל המספר עצמו,
   ולכן המספר הצטמצם בגלילה מ-44px ל-12.48px במקום ל-34. עד היום זה לא
   הפריע כי המספר היה הדבר היחיד בהדר; מרגע ששורת "החלק שלך" (30px) יושבת
   מתחתיו, ההיררכיה **מתהפכת** בגלילה - הסכום הקטן נראה כמו הראשי.
   ⚠️ קיים גם במסך הסימון, ולכן הכלל מתוקן בשורש ולא רק כאן. */
body[data-scrolled="1"] .c-head .c-mine-amount { font-size: calc(var(--num-hero) * .78); }
/* ושורת "החלק שלך" מתכווצת יחד איתו, כדי שהיחס ביניהם יישמר בגלילה. */
body[data-scrolled="1"] .c-head .sum-mine-amount { font-size: calc(var(--num-md) * .78); }
body[data-scrolled="1"] .c-head .sum-mine { margin-top: var(--s2); padding-top: var(--s2); }
body[data-scrolled="1"] .c-head { padding-bottom: var(--s3); }
.c-head .c-mine-amount { transition: font-size var(--dur-enter) var(--ease-out); }
.c-head { transition: padding-bottom var(--dur-enter) var(--ease-out); }

/* מכווץ מיד, בלי תנועה — אותו מידע, בלי הזזה. */
@media (prefers-reduced-motion: reduce) {
  .c-head-more, .c-head, .c-head .c-mine-amount { transition: none !important; }
}

.c-head.compact { padding-bottom: var(--s4); }
.c-head.compact .c-head-top { margin-bottom: 0; }
.c-head-sub {
  margin-top: var(--s3); font-size: var(--t-sm);
  color: rgba(253,250,246,.78); line-height: var(--lh-body);
}
/* מסך שיש בו הדר לא צריך גם כותרת חוזרת מתחתיו */
.c-head + .section-title { display: none; }

/* ============================================================================
   גיליון הטיפ
   ============================================================================
   נתנאל 2.09: "כמו שגוללים בטלפון את השורה למעלה של ההתראות — שהגלילה
   תהיה ככפתור רחב יחסית למטה, וצריך לעלות אותו קצת, והוא כביכול מכסה
   את המסך."

   הוא מחליף את מסך הטיפ לגמרי. היתרון: **רשימת הפריטים נשארת מאחור**,
   ולכן ההקשר לא אובד — וזו בדיוק הסיבה שהמסמך המרכז פסל מסך נפרד לטיפ.
   ============================================================================ */
.tsheet-backdrop {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(35,58,71,.45);
}
.tsheet-backdrop.is-entering { animation: celeIn var(--dur-enter) var(--ease-out) backwards; }
.tsheet {
  position: fixed; inset-inline: 0; bottom: 0; z-index: calc(var(--z-overlay) + 1);
  max-width: 480px; margin: 0 auto;
  background: var(--bg);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: var(--s2) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 40px rgba(35,58,71,.22);
}
/* ⚠️ האנימציה רק בפתיחה. render() מחליף את ה-HTML, ולכן כל לחיצה על
   אחוז ציירה את הגיליון מחדש והוא עלה שוב מלמטה — זה ההבהוב שנתנאל
   דיווח עליו. is-entering מתווסף רק בציור הראשון אחרי הפתיחה. */
/* ⚠️ backwards ולא both — אותו לקח שנשרף ב-.step-anim ב-3.09.
   אנימציה עם fill:both ממשיכה "להחזיק" את המאפיינים שלה גם אחרי שהיא
   נגמרה, והיא גוברת על סגנון מוטבע. כאן זה שבר את הגרירה: הגיליון שינה
   גובה אבל לא זז, כי transform: none מהפריים האחרון ניצח את ה-transform
   שהאצבע כותבת. backwards משחרר את האלמנט ברגע שהתנועה נגמרה. */
.tsheet.is-entering { animation: tsheetUp var(--dur-enter) var(--ease-out) backwards; }
@keyframes tsheetUp { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .tsheet.is-entering, .tsheet-backdrop.is-entering { animation: none; } }

/* הידית — גם סימן שאפשר למשוך, וגם כפתור סגירה באזור מגע מלא */
.tsheet-grab {
  display: block; width: 100%; height: 28px; margin-bottom: var(--s2);
  background: var(--bg); border: none; cursor: grab;
  /* נשארת בראש הגיליון גם כשגוללים בתוכו, ומקבלת את המגע כולו — בלי
     touch-action הדפדפן היה גוזל את הגרירה כגלילה. */
  position: sticky; top: calc(var(--s2) * -1); z-index: 1;
  touch-action: none;
}
/* גרירה למעלה = הגיליון נפרש על כל המסך (נתנאל 3.09: "נראה כאילו אפשר
   לגלול אבל אי אפשר"). גרירה למטה או הקשה = סגירה, כמו קודם. */
.tsheet.is-full {
  height: calc(100dvh - var(--kb, 0px));
  max-height: calc(100dvh - var(--kb, 0px));   /* גובר על המגבלה של מצב המנוחה */
  border-radius: 0;
  /* כשהתוכן קצר מהמסך, הסכום והכפתור יורדים לתחתית במקום להשאיר
     חלל ריק מתחתיהם. */
  display: flex; flex-direction: column;
}
.tsheet.is-full .tsheet-foot { margin-top: auto; }
.tsheet-grab::before {
  content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 42px; height: 5px; border-radius: var(--r-pill); background: var(--border-strong);
}
.tsheet-grab:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

.tsheet-head { margin-bottom: var(--s4); }
.tsheet-title { font-size: var(--t-xl); font-weight: var(--w-black); color: var(--text); }
.tsheet-sub { font-size: var(--t-sm); color: var(--text-soft); margin-top: var(--s1); }

.tsheet-opts {
  display: flex; gap: var(--s2); overflow-x: auto;
  margin: 0 calc(var(--s4) * -1) var(--s4); padding: 0 var(--s4) var(--s2);
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.tsheet-opts::-webkit-scrollbar { display: none; }
.tsheet-opt {
  flex: 0 0 auto; min-width: 82px; min-height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-md); scroll-snap-align: center;
  background: none; border: 1.5px solid var(--border-strong);
  color: var(--text); font-family: var(--font);
  font-size: var(--t-lg); font-weight: var(--w-black);
  font-variant-numeric: var(--num-feat); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.tsheet-opt:active { transform: scale(.96); }
.tsheet-opt.active { background: var(--orange-cta); border-color: var(--orange-cta); color: var(--on-orange); }
.tsheet-opt:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.tsheet-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--s3) var(--s1) var(--s4);
  font-size: var(--t-base); color: var(--text-soft);
}
.tsheet-total b { font-size: var(--num-sm); color: var(--text); font-variant-numeric: var(--num-feat); }

/* שורת הפירוט מעל הסה"כ, כשמישהו בחר טיפ אישי (ראה roomTipSplit).
   שורה אחת דקה ולא שתי שורות סה"כ נוספות: תחתית הגיליון דביקה, וכל
   שורה שנוספת שם דוחפת את כפתור ההמשך מטה. */
.tsheet-parts {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s3);
  padding: var(--s2) var(--s1) 0;
  font-size: var(--t-sm); color: var(--text-soft);
}
.tsheet-parts b { color: var(--text); font-weight: var(--w-bold); font-variant-numeric: var(--num-feat); }
.tsheet-parts + .tsheet-total { padding-top: var(--s1); }

/* ------------------------------------------------------- הצגת הקבלה ---
   הרעיון של נתנאל (2.09), והוא גם ממצא רשום מהשטח: אחרי הסריקה אין דרך
   לוודא שהרשימה נכונה. התמונה נפתחת **מתחת לרשימה ולא מעליה** — כדי
   שאפשר יהיה לגלול ולהשוות שורה מול שורה, במקום לעבור הלוך ושוב.
   ⚠️ פותח גם מדידה: כמה פעמים המארח מתקן אחרי שהוא רואה את המקור. */
.receipt-btn { width: 100%; justify-content: center; margin-bottom: var(--s3); }
.rcpt {
  background: var(--surface); border-radius: var(--r-md);
  overflow: hidden; margin-bottom: var(--s4); box-shadow: var(--shadow-1);
  /* ⚠️ בלי אנימציה: הקבלה נשארת פתוחה בזמן שהחדר מסתנכרן, וכל ציור
     היה מפעיל אותה מחדש. */
}
.rcpt-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s2) var(--s3) var(--s2) var(--s2);
  font-size: var(--t-sm); font-weight: var(--w-black); color: var(--text);
  border-bottom: 1px solid var(--border);
}
.rcpt-img { max-height: 60vh; overflow: auto; background: var(--surface-sunk); }
.rcpt-img img { width: 100%; display: block; }
.rcpt-note { padding: var(--s3) var(--s4); font-size: var(--t-xs); color: var(--text-soft); line-height: var(--lh-body); }

/* -- פירוט בסיכום: חשבון + טיפ ------------------------------------------
   נתנאל 2.09: "בסיכום לא רואים כמה טיפ גם יצא."
   הוא צודק, וזו לא רק נוחות: הטיפ הוא הסכום היחיד שהמשתמשים בחרו יחד,
   ומי שמשלם צריך לראות על מה. שורה אחת מתחת לסכום הגדול. */
/* ⚠️ flex-wrap נדרש מ-7.09: כשמישהו בחר טיפ אישי יש כאן שלושה צ'יפים
   ולא שניים ("החשבון + טיפ משותף + טיפ אישי"), ובמסך של 390 פיקסל הם
   לא נכנסים לשורה אחת. בלי הגלישה זו הייתה גלישה אופקית של כל המסך. */
.c-breakdown {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2);
  margin-top: var(--s2); font-size: var(--t-sm);
  color: rgba(253,250,246,.72);
}
.c-breakdown b { color: var(--text-on-dark); font-weight: var(--w-bold); font-variant-numeric: var(--num-feat); }
.c-breakdown i { font-style: normal; opacity: .7; }
.c-bd-sep { opacity: .45; }

/* ============================================================================
   מסך הסיכום — ראש המסך והכרטיסיות (10.09)
   נתנאל: "נראה מאוד מבולגן - לא מבינים כלום", ו"לא עדיף שלמעלה יהיה
   הסך הכל של הקבלה, ובכרטיסיות - החלקים של החברים?"
   ============================================================================ */

/* -- "החלק שלך" מתחת לסכום השולחן ---------------------------------------
   🔴 יושבת **מחוץ** ל-.c-head-more, כלומר היא שורדת את הגלילה. אילו
   הייתה מתקפלת, הצופה היה נשאר עם מספר החדר בלבד — בדיוק המצב שנתנאל
   התלונן עליו חמש פעמים.
   הקו העליון הוא אותו ערך של .c-who — קרם ב-15% על הנייבי. */
/* ⚠️ 10.09 - נתנאל אמר ב-3.09 שההדר גדול מדי. הריווח כאן הודק מ---s3
   ל---s2 בשני הצירים אחרי מדידה: הבלוק הזה תפס 49px, מהם 24 ריווח בלבד. */
.sum-mine {
  display: flex; align-items: baseline; gap: var(--s3);
  margin-top: var(--s2); padding-top: var(--s2);
  border-top: 1px solid rgba(253,250,246,.15);
  min-width: 0;
}
.sum-mine > * { min-width: 0; overflow-wrap: anywhere; }
.sum-mine-label { font-size: var(--t-sm); opacity: .85; }
.sum-mine-amount {
  font-size: var(--num-md); font-weight: var(--w-black);
  line-height: var(--lh-tight); letter-spacing: -0.02em;
  font-variant-numeric: var(--num-feat);
  color: var(--text-on-dark); white-space: nowrap;
}

/* -- שורת השייכות: מי חולק את השולחן ------------------------------------ */
.sum-table {
  display: flex; align-items: center; gap: var(--s2);
  margin-top: var(--s2); font-size: var(--t-sm);
  color: rgba(253,250,246,.78); min-width: 0;
}
.sum-table > * { min-width: 0; overflow-wrap: anywhere; }
.sum-table-avas { display: inline-flex; align-items: center; flex: none; }
/* ⚠️ טבעת ההפרדה בין אווטארים חופפים נקבעה מול --bg (קרם). כאן הרקע
   נייבי, ובלי הדריסה נמתח קו קרם בהיר סביב כל אווטאר. */
.sum-table .c-avatar + .c-avatar { box-shadow: 0 0 0 2px var(--navy); }

/* -- פירוק הסכום על כרטיס של אדם ----------------------------------------
   🔴 flex של spans ולא שורת טקסט אחת: כל span סוגר בתוכו ריצת ספרות
   לטינית, וזה מה שמונע שבירת bidi כשהשורה נשברת ב-390 פיקסל.
   ⚠️ נושאת --text ולא --text-soft. רקע הכרטיס אינו --surface אלא
   color-mix(--pc 12%, --bg), כלומר משטח שונה לכל משתתף, ו---text-soft
   עליו נופל מתחת ל-4.5:1. ⚠️ אסור לעשות כאן שימוש חוזר ב-.c-breakdown:
   צבעיה בנויים לנייבי ועל כרטיס בהיר הם בלתי נראים. */
.s-parts {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2);
  margin-top: var(--s2); font-size: var(--t-xs);
  color: var(--text); min-width: 0;
}
.s-parts > * { min-width: 0; overflow-wrap: anywhere; }
.s-parts b { font-weight: var(--w-bold); font-variant-numeric: var(--num-feat); }
.s-parts i { font-style: normal; margin-inline-start: var(--s1); }
/* 🔴 גם האחוז וגם המפריד נושאים --text ולא --text-soft, במפורש כדי
   שאיש לא "יחזיר" אותם. נמדד בדפדפן על כל חמשת צבעי המשתתפים:
   --text-soft יוצא 4.18-4.24 על המשטח המעורבב — מתחת ל-4.5 הנדרש.
   ההיררכיה כאן נשענת על המשקל (הסכומים ב-<b>) ולא על הצבע. */
.s-parts i, .s-parts-sep { color: var(--text); }

/* שם ארוך לא ידחוס את התגים, והם יורדים לשורה משלהם במקום להיחתך */
.s-name { flex-wrap: wrap; row-gap: var(--s1); }
.s-mine-tag, .s-tip-tag { flex: none; }
/* 🔴 סטייה מהמפרט, ומדידה היא הסיבה. --orange-ink על **הרקע שלו**
   (--orange-soft) נותן 4.86 - וכך הוא במסך הסימון היום. על כרטיס
   המשתתף, שרקעו color-mix(--pc 12%, --bg), אותו צבע נופל ל-3.85
   ו-13px במשקל 800 אינם "טקסט גדול" ולכן 4.5 הוא הסף.
   ⚠️ הזוג --orange-ink/--orange-soft מתועד ב-tokens.css ככזה שנועד
   בדיוק לתגיות. אין כאן ערך צבע חדש - רק החזרת הצמד לשימוש המיועד לו.
   הגיאומטריה זהה ל-.micro-chip כדי ששני התגים ייקראו כאחים. */
.s-mine-tag {
  background: var(--orange-soft);
  border-radius: var(--r-sm); padding: 2px var(--s2);
  white-space: nowrap;
}

/* -- מה מרכיב את הסכום — כרטיס אצל מי שאוסף ----------------------------
   ⚠️ border בשני מצבי הצבע ולא בכהה בלבד: --shadow-1 כמעט אינו נראה
   על רקע כהה, וכרטיס בלי גבול שם נבלע ברקע. גבול אחד לשני המצבים
   שומר על אותה פריסה בדיוק. */
.sum-ledger {
  background: var(--surface); border-radius: var(--r-md);
  padding: var(--s4); box-shadow: var(--shadow-1);
  border: 1px solid var(--border); margin-bottom: var(--s4);
}
.sum-ledger-title {
  font-size: var(--t-sm); font-weight: var(--w-black);
  color: var(--text); margin: 0 0 var(--s3);
}
.sum-ledger-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); padding: var(--s2) 0;
  font-size: var(--t-sm); color: var(--text-soft); min-width: 0;
}
.sum-ledger-row > * { min-width: 0; overflow-wrap: anywhere; }
.sum-ledger-row b {
  color: var(--text); font-weight: var(--w-bold);
  font-variant-numeric: var(--num-feat); flex: none; white-space: nowrap;
}
.sum-ledger-row.is-sub { padding-top: 0; font-size: var(--t-xs); padding-inline-start: var(--s4); }
.sum-ledger-row.is-total {
  margin-top: var(--s2); padding-top: var(--s3);
  border-top: 1px solid var(--border);
  font-size: var(--t-base); color: var(--text); font-weight: var(--w-bold);
}
.sum-ledger-row.is-total b { font-size: var(--num-sm); font-weight: var(--w-black); }

/* -- שדה סכום מותאם וטיפ אישי בגיליון ----------------------------------- */
.tsheet-custom { margin-bottom: var(--s3); }
.tsheet-custom .field-label { margin-top: 0 !important; }
.tsheet-personal {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  width: 100%; min-height: var(--tap-min); margin-bottom: var(--s2);
  background: none; border: none; border-radius: var(--r-sm);
  color: var(--text-soft); font-family: var(--font);
  font-size: var(--t-sm); font-weight: var(--w-bold); cursor: pointer;
}
.tsheet-personal:active { background: rgba(35,58,71,.06); }
.tsheet-personal:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* 🔴 שם ארוך בלי רווחים שבר את ההדר — הוא גלש ל-766px על מסך של 358.
   נתפס אחרי שהמחקר החיצוני הצביע על כך שאין באפליקציה ולו הוראת שבירה
   אחת. שורת ההקשר בהדר מכילה שם חדר שמגיע מהמשתמש, ולכן היא **חייבת**
   לשבור — ו-min-width:0 חיוני כי ילדי flex לא מתכווצים מתחת לתוכן שלהם. */
.c-head-top { flex-wrap: wrap; min-width: 0; }
.c-head-top > * { min-width: 0; overflow-wrap: anywhere; }
.c-room { max-width: 100%; overflow-wrap: anywhere; }
.c-step { overflow-wrap: anywhere; }
.c-who, .c-who > * { min-width: 0; overflow-wrap: anywhere; }
.c-mine-label, .c-breakdown, .c-breakdown > * { min-width: 0; overflow-wrap: anywhere; }

/* בלשוניות ההדר הוא המשך של הרצועה, לא פס נפרד — ולכן בלי ריפוד עליון
   ובלי פינות. */
body[data-screen="friends"] .c-head,
body[data-screen="history"] .c-head,
body[data-screen="help"] .c-head,
body[data-screen="settings"] .c-head {
  padding-top: var(--s3);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  margin-top: 0;
}

/* ---------- יציאות ----------
   עד עכשיו גיליון הטיפ והחגיגה פשוט נעלמו בפריים אחד: `state.x=false; render()`.
   כניסה מונפשת ויציאה חטופה מרגישה כמו תקלה. היציאה קצרה מהכניסה בכוונה. */
@keyframes tsheetDown { from { transform: none; } to { transform: translateY(100%); } }
@keyframes fadeOut    { from { opacity: 1; }     to { opacity: 0; } }

.tsheet.is-leaving          { animation: tsheetDown var(--dur-exit) var(--ease) both; }
.tsheet-backdrop.is-leaving { animation: fadeOut    var(--dur-exit) var(--ease) both; }
.cele.is-leaving            { animation: fadeOut    var(--dur-exit) var(--ease) both; }
.cele.is-leaving .cele-piece { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .tsheet.is-leaving, .tsheet-backdrop.is-leaving, .cele.is-leaving { animation: none !important; }
}

/* ---------- הגיליון מול המקלדת ----------
   --kb הוא הגובה שהמקלדת מסתירה בפועל (ראה trackKeyboardInset).
   הגיליון עולה מעליה במקום להיקבר מתחתיה, וגובהו מוגבל למה שנשאר גלוי
   כדי שהתוכן יגלול בתוכו ולא ייחתך. */
.tsheet {
  bottom: var(--kb, 0px);
  max-height: calc(100dvh - var(--kb, 0px) - var(--s5));
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* סכום הטיפ וכפתור ההמשך נשארים מודבקים לתחתית הגיליון גם כשגוללים
   בתוכו — הם התוצאה והאישור, ואסור להם להיעלם בזמן שמקלידים סכום. */
.tsheet-foot {
  position: sticky;
  bottom: 0;
  background: var(--bg);
  padding-bottom: var(--s1);
}
/* .c-cta נבנה לשבת בשורת פעולות ולכן הוא inline-flex שמתכווץ לרוחב
   הטקסט. בגיליון הוא הפעולה הראשית היחידה, ולכן הוא נפרש על כל הרוחב. */
.tsheet-foot .c-cta { display: flex; width: 100%; }

/* ---------- כרטיס המשוב בתוך הסיכום ----------
   הוכרע 3.09: זהו **המשוב היחיד**. קודם היו שניים — כרטיס כאן ומסך מלא
   שנפתח רק ב"סיום" — ומי שיצא מהסיכום בלי ללחוץ "סיום" לא נשאל בכלל.
   שני שלבים בכרטיס אחד: כוכבים, ואחריהם שדה חופשי. */
/* בשלב הכוכבים הכרטיס הוא שורה אחת. ברגע שנפתח שדה הטקסט הוא חייב
   להפוך לעמודה — אחרת שלושת האלמנטים נדחסים לשורה אחת שאינה נשברת,
   והכרטיס גולש אל מחוץ למסך. */
.fb-nudge.is-open {
  flex-direction: column;
  align-items: stretch;
  flex-wrap: wrap;
}
.fb-nudge.is-open .fb-stars { justify-content: center; margin: var(--s2) 0 0; }
.fb-nudge.is-open .fb-nudge-txt { text-align: center; }
.fb-nudge textarea {
  /* box-sizing כדי שהריפוד לא יידחוף את השדה מעבר לרוחב הכרטיס —
     בלעדיו נוצרה גלישה אופקית ברגע שהשדה נפתח. */
  width: 100%; box-sizing: border-box; max-width: 100%; min-width: 0;
  margin-top: var(--s3);
  font-family: var(--font); font-size:var(--t-base);   /* 16 ומעלה — פחות מזה מזים ב-iOS */
  line-height: 1.5; color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  padding: var(--s3); resize: vertical;
}
.fb-nudge textarea:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* משני ולא ראשי: "סיום" הוא הפעולה הראשית של מסך הסיכום, ושני כפתורים
   כתומים מלאים במרחק קטן זה מזה מבטלים זה את זה. אותו שיקול כמו בכרטיס
   ההתקנה. */
.fb-nudge-send {
  width: 100%; margin-top: var(--s3);
  min-height: var(--tap-min); font-size: var(--t-base);
}
.fb-star.filled { color: var(--orange-cta); }

/* שורת הסטטוס נושאת שמות מאז 3.09. בלי אלה, שם ארוך דוחף את השורה
   ואיתה את כל המסך הצידה — flex לא מכווץ ילד מתחת לתוכן שלו בלי
   min-width: 0 מפורש. */
.c-prog-row { min-width: 0; }
.c-prog-row > span, .c-prog-row > b {
  min-width: 0; overflow-wrap: anywhere;
}

/* ההודעה שמחליפה את ההעפה מהחדר. מי שהגיע לסיכום נשאר בו — ההודעה
   רק מסבירה שהמספרים קפאו. שקטה בכוונה: זו לא שגיאה, זה סוף תקין. */
.closed-notice {
  display: flex; align-items: flex-start; gap: var(--s3);
  margin-top: var(--s5); padding: var(--s4);
  background: var(--turquoise-soft);
  border: 1px solid var(--turquoise);
  border-radius: var(--r-lg);
  font-size: var(--t-xs); line-height: 1.55; color: var(--text);
}
.closed-notice b { display: block; font-size: var(--t-sm); margin-bottom: 2px; }
.cn-ico { flex: none; line-height: 0; color: var(--turquoise-ink); }

/* שתי וריאציות טון לאותו רכיב, 7.09. הבסיס הטורקיזי אומר "נגמר בטוב",
   ולא כל סוף הוא כזה:
     is-alert — הוסרת מהחדר. לא שגיאה, אבל בהחלט לא הצלחה.
     is-note  — רשומת היסטוריה שקפאה. הודעה עניינית, בלי צבע מצב.
   הטקסט נשאר --text בשתיהן, ולכן הניגודיות שלו לא משתנה. */
.closed-notice.is-alert { background: var(--yellow-soft); border-color: var(--yellow); }
.closed-notice.is-alert .cn-ico { color: var(--yellow-ink); }
.closed-notice.is-note { background: var(--surface-sunk); border-color: var(--border-strong); }
.closed-notice.is-note .cn-ico { color: var(--text-soft); }

/* ---------- הגיליון במצב אורח ----------
   האורח אינו קובע את הטיפ אלא מאשר אותו או בוחר לעצמו (הוכרע 3.09). */
.tsheet-chosen {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--s3) var(--s1) var(--s4);
  font-size: var(--t-sm); color: var(--text-soft);
}
.tsheet-chosen b { font-size: var(--num-sm); color: var(--text); font-variant-numeric: var(--num-feat); }
.tsheet-state {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  font-size: var(--t-sm); font-weight: var(--w-med);
}
.tsheet-state.ok { background: var(--turquoise-soft); color: var(--turquoise-ink); }
/* מי אנחנו מחכים לו — שמות ולא מונה, כמו בשאר האפליקציה */
.tsheet-waiting {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s1);
  font-size: var(--t-xs); color: var(--text-soft);
}

/* ---------- המשוב כשכבה על המסך ----------
   עד 3.09 הוא היה שורה בתוך הזרימה, ועבר בקלות בלי שאיש שם לב.
   עכשיו הוא כרטיס ממורכז מעל רקע מעומעם — נראה, אבל נסגר בלחיצה
   אחת ולעולם לא חוסם. */
.fb-backdrop {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(35,58,71,.42);
  animation: celeIn var(--dur-enter) var(--ease-out) both;
}
.fb-nudge {
  position: fixed;
  inset-inline: var(--s4);
  top: 50%; transform: translateY(-50%);
  z-index: calc(var(--z-overlay) + 1);
  max-width: 420px; margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: var(--s5) var(--s4) var(--s4);
  animation: fbIn var(--dur-enter) var(--ease-out) both;
}
@keyframes fbIn {
  from { opacity: 0; transform: translateY(calc(-50% + 14px)) scale(.96); }
  to   { opacity: 1; transform: translateY(-50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .fb-backdrop, .fb-nudge { animation: none; }
}
.fb-backdrop.is-leaving { animation: fadeOut var(--dur-exit) var(--ease) both; }
.fb-nudge.is-leaving    { animation: fadeOut var(--dur-exit) var(--ease) both; }

/* רשימת המשתתפים בגיליון — מי אישר ומי עוד לא. נגללת בתוך עצמה כדי
   שחדר גדול לא ידחוף את כפתור ההמשך אל מחוץ למסך. */
.tsheet-people {
  max-height: 132px; overflow-y: auto; overscroll-behavior: contain;
  margin: var(--s2) 0 var(--s3);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-sunk);
}
.tsp-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: var(--s2) var(--s3);
  font-size: var(--t-xs);
  border-bottom: 1px solid var(--border);
}
.tsp-row:last-child { border-bottom: 0; }
.tsp-row > span:first-child { display: flex; align-items: center; gap: var(--s2); min-width: 0; overflow-wrap: anywhere; }
.tsp-wait { color: var(--text-soft); flex: none; }
.tsheet-people .t-ok { display: flex; align-items: center; gap: 4px; flex: none; }

/* טופס הטיפ האישי — נפתח בתוך הגיליון (הוכרע 3.09), לא במסך נפרד. */
.tsheet-own {
  margin-top: var(--s2); padding: var(--s3);
  background: var(--surface-sunk);
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.tsheet-own .field-label { margin-top: 0 !important; }
.tsheet-own .tsheet-opts { margin-bottom: var(--s2); }
.tsheet-personal[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }
.tsheet-personal svg:last-child { transition: transform var(--dur-fast) var(--ease); }

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

/* 1. הרשימה מגיעה אצל האורח - הפריטים נכנסים בזה אחר זה.
      הוא חיכה מול מסך ריק; זה הרגע שבו המוצר מתעורר מבחינתו. */
.c-list.is-arriving .c-item {
  animation: cRowIn var(--dur-enter) var(--ease-out) both;
  animation-delay: calc(var(--arrive-delay, 0ms) + var(--i, 0) * 55ms);
}
.c-list.is-arriving .c-item:nth-child(1){ --i:0 } .c-list.is-arriving .c-item:nth-child(2){ --i:1 }
.c-list.is-arriving .c-item:nth-child(3){ --i:2 } .c-list.is-arriving .c-item:nth-child(4){ --i:3 }
.c-list.is-arriving .c-item:nth-child(5){ --i:4 } .c-list.is-arriving .c-item:nth-child(6){ --i:5 }
.c-list.is-arriving .c-item:nth-child(7){ --i:6 } .c-list.is-arriving .c-item:nth-child(8){ --i:7 }
.c-list.is-arriving .c-item:nth-child(9){ --i:8 } .c-list.is-arriving .c-item:nth-child(10){ --i:9 }
.c-list.is-arriving .c-item:nth-child(n+11){ --i:10 }

/* 2. סימון פריט - האווטאר של מי שסימן הרגע קופץ פנימה */
.c-avatar.is-pop {
  animation: cPop var(--dur-enter) var(--ease-out) both;
  animation-delay: var(--pop-delay, 0ms);
}

/* 3. פס הסריקה - דופק עדין. פס שנעצר ב-90% מרגיש תקוע; דופק אומר
      "אני עובד". רק על אטימות - בלי לגעת בפריסה. */
.scan-progress-bar.is-live {
  animation: scanPulse 1.6s var(--ease) infinite;
  animation-delay: var(--scan-delay, 0ms);
}
@keyframes scanPulse { 0%,100% { opacity: 1 } 50% { opacity: .62 } }

/* 5. אישור ויזואלי בכפתור: פעימה קצרה, לא רק החלפת טקסט */
.flash-ok  { animation: flashOk 900ms var(--ease-out) both; }
.flash-bad { animation: flashBad 900ms var(--ease-out) both; }
@keyframes flashOk {
  0%   { background: var(--turquoise-soft); border-color: var(--turquoise); color: var(--turquoise-ink); transform: scale(1); }
  22%  { transform: scale(1.03); }
  100% { background: var(--turquoise-soft); border-color: var(--turquoise); color: var(--turquoise-ink); transform: scale(1); }
}
@keyframes flashBad {
  0%,100% { background: var(--orange-soft); border-color: var(--orange); color: var(--orange-ink); }
}

@media (prefers-reduced-motion: reduce) {
  .c-list.is-arriving .c-item, .c-avatar.is-pop,
  .scan-progress-bar.is-live, .flash-ok, .flash-bad { animation: none !important; }
}