/* ============================================================================
   רכיבים — השכבה שמביאה את כל שאר המסכים לשפה החדשה
   ============================================================================

   נכתב 2.09. נטען אחרי styles.css ולפני claim.css.

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

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

   כל ערך מגיע מ-tokens.css, ולכן הכול עובד גם במצב כהה בלי שורה נוספת.
   ============================================================================ */

/* ------------------------------------------------------------- כפתורים ---
   הכפתור הראשי זהה ל-CTA של מסכי המשימה. אחד לכל מסך; השאר משניים. */
.btn {
  min-height: var(--tap-min) !important;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  width: 100%; padding: 0 var(--s5) !important;
  border-radius: var(--r-md) !important;
  background: var(--orange-cta) !important;
  color: var(--on-orange) !important;
  border: none !important;
  font-family: var(--font) !important;
  font-size: var(--t-lg) !important;
  font-weight: var(--w-black) !important;
  box-shadow: var(--shadow-cta) !important;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px) scale(.99); filter: brightness(.96); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring) !important; }
.btn:disabled { opacity: .45; cursor: default; box-shadow: none !important; }

/* משני — מסגרת בלבד. המילוי הלבן הוסר בכל האפליקציה: על רקע הקרם הוא
   נקרא כקופסה שהודבקה, ומסגרת לבדה מספיקה כדי שייקרא ככפתור. */
.btn.secondary, .btn.ghost {
  background: none !important;
  color: var(--text) !important;
  border: 1.5px solid var(--border-strong) !important;
  box-shadow: none !important;
  font-size: var(--t-base) !important;
  font-weight: var(--w-bold) !important;
}
.btn.secondary:active, .btn.ghost:active { background: rgba(35,58,71,.06) !important; }
.btn.teal { background: var(--turquoise-ink) !important; color: #fff !important; }

.btn-row { display: flex; gap: var(--s2); }
.btn-row .btn { width: auto; flex: 1 1 0; }

/* --------------------------------------------------------------- טקסט --- */
.section-title {
  font-family: var(--font) !important;
  font-size: var(--t-xl) !important;
  font-weight: var(--w-black) !important;
  color: var(--text) !important;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s2) !important;
}
.section-sub {
  font-size: var(--t-sm) !important;
  color: var(--text-soft) !important;
  line-height: var(--lh-body) !important;
  margin: 0 0 var(--s5) !important;
}
.field-label {
  display: block;
  font-size: var(--t-xs) !important;
  font-weight: var(--w-bold) !important;
  color: var(--text-soft) !important;
  letter-spacing: .03em;
  margin: var(--s4) 0 var(--s1) !important;
}
.help-txt, .step-hint { font-size: var(--t-sm) !important; color: var(--text-soft) !important; line-height: var(--lh-body); }
.room-error-text { color: var(--danger) !important; font-size: var(--t-sm) !important; font-weight: var(--w-bold); }

/* --------------------------------------------------------------- קלט ---
   ⚠️ 16px הוא מינימום מוחלט. מתחת לזה iOS מזים את העמוד אוטומטית
   כשממקדים שדה, והמשתמש נשאר עם פריסה שבורה שהוא לא יודע לתקן. */
input[type=text], input[type=tel], input[type=number], input[type=email], select, textarea {
  width: 100%;
  min-height: var(--tap-min) !important;
  font-size: var(--t-base) !important;
  font-family: var(--font) !important;
  color: var(--text) !important;
  background: var(--surface) !important;
  padding: var(--s2) var(--s3) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  transition: border-color var(--dur-fast) var(--ease);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--orange) !important;
  box-shadow: var(--focus-ring) !important;
}
textarea { min-height: 96px !important; line-height: var(--lh-body); }

/* ------------------------------------------------------------- משטחים ---
   כל מה שהיה כרטיס בעיצוב הישן מקבל את אותו טיפול רך. */
.room-box, .totals-strip, .item-card, .summary-card, .history-card,
.friend-row, .draft-row, .manual-add-box, .help-step, .feedback-card {
  background: var(--surface) !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-1) !important;
  padding: var(--s4) !important;
  margin-bottom: var(--s2) !important;
}

/* פסי מצב — שלושה סימנים בכל אחד: צבע, אייקון וטקסט */
.ok-badge, .warn-badge {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s4) !important;
  border-radius: var(--r-md) !important;
  border: none !important;
  font-size: var(--t-sm) !important;
  font-weight: var(--w-bold) !important;
  margin-bottom: var(--s3) !important;
}
.ok-badge  { background: var(--turquoise-soft) !important; color: var(--turquoise-ink) !important; }
.warn-badge{ background: var(--yellow-soft) !important;    color: var(--yellow-ink) !important; }

.dashed { border: none !important; border-top: 1px solid var(--border) !important; margin: var(--s5) 0 !important; }

/* ------------------------------------------------------------- פתיחה ---
   הרושם הראשון. זה המסך שאורח רואה כשהוא לוחץ על קישור בוואטסאפ. */
.landing-logo { margin-bottom: var(--s3) !important; }
.landing-logo svg { width: 64px !important; height: 64px !important; }

.landing-title {
  font-family: var(--font) !important;
  font-size: var(--t-2xl) !important;
  font-weight: var(--w-black) !important;
  color: var(--text) !important;
  letter-spacing: -0.02em;
}
.landing-title span { color: var(--orange) !important; }
.landing-tagline { font-size: var(--t-base) !important; color: var(--text-soft) !important; }

/* ------------------------------------------------- מחוון שלבים ונקודות --- */
.step-dots { display: flex; gap: var(--s2); justify-content: center; margin-bottom: var(--s4); }
/* ⚠️ הנקודה הפעילה מתרחבת דרך transform, לא דרך width.
   הוק העיצוב תפס את הגרסה הראשונה: אנימציה על width מאלצת את הדפדפן
   לחשב מחדש את הפריסה בכל פריים, וזה מקרטע במכשירים חלשים — בדיוק
   הקהל שלנו, שמשתמש באפליקציה על סלולר בינוני ברשת גרועה.

   הרוחב קבוע ב-22px לכולן; נקודה לא פעילה מכווצת ל-32% ממנו, וזו
   אנימציה שרצה על ה-GPU ולא נוגעת בפריסה.

   🔴 6.09 - הבורר היה `.step-dots > *`, כלומר הוא עיצב גם את **הקו
   המפריד** (.dot-line) כגלולה זהה לנקודה. התוצאה: שני שלבים נראו כשלושה
   סימנים, ושלושה שלבים כחמישה - המשתמש ספר שלבים שאינם קיימים. עכשיו
   הכלל חל על הנקודות בלבד, והקו חוזר לצורתו ב-styles.css (18×2). */
.step-dots > .dot {
  width: 22px !important; height: 7px !important;
  border-radius: var(--r-pill) !important;
  background: var(--border-strong) !important; border: none !important;
  transform: scaleX(.32);
  transition: background var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.step-dots > .active, .step-dots > .on {
  background: var(--orange) !important;
  transform: scaleX(1);
}

/* 🔴 6.09 - שלב שהושלם נראה בדיוק כמו שלב שעוד לא הגענו אליו. הסימון
   `done` קיים בקוד מאז ומעולם (ראה renderStepDots), ו-styles.css אפילו
   צובע אותו - אבל הכלל למעלה מרוקן אותו עם `!important` על **כל** ילד.
   התוצאה: שלושה מצבים בקוד, שניים על המסך, והמשתמש לא יודע כמה עבר.
   שלושת המצבים עכשיו נבדלים בשני ערוצים ולא רק בצבע: צבע **וגודל**. */
.step-dots > .done {
  background: var(--orange) !important;
  opacity: .5;
}

/* --------------------------------------------------------- עזרה ומספור --- */
.help-step { display: flex; gap: var(--s3); align-items: flex-start; }
.help-num {
  width: 30px; height: 30px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50% !important;
  background: var(--navy) !important; color: var(--text-on-dark) !important;
  font-size: var(--t-sm) !important; font-weight: var(--w-black) !important;
}

/* ------------------------------------------------------------ נגישות ---
   טבעת מיקוד גלויה על כל דבר לחיץ. הסתרתה היא כשל נגישות ישיר. */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
  outline: none; box-shadow: var(--focus-ring);
}

/* -- תיקונים שנתפסו בצילומי המסכים, 2.09 -------------------------------- */

/* .teal היה צבע הפעולה הראשית בעיצוב הישן. הפעולה הראשית היא כתומה
   עכשיו, ולכן מחלקה זו מקבלת את אותו טיפול — אחרת "יצירת חדר חדש",
   הפעולה הכי חשובה באפליקציה, נשארת בצבע של המותג הקודם. */
.btn.teal {
  background: var(--orange-cta) !important;
  color: var(--on-orange) !important;
  box-shadow: var(--shadow-cta) !important;
}

/* הסלוגן הופיע פעמיים במסך הפתיחה — בפס העליון ובמרכז. בפס העליון הוא
   מיותר דווקא כאן, כי המסך עצמו כבר אומר אותו בגדול. */
body[data-screen="landing"] .brand .tag { display: none !important; }

/* מסך הפתיחה מתמרכז אנכית במקום להיצמד למעלה עם שטח מת מתחת. */
body[data-screen="landing"] .receipt {
  min-height: calc(100dvh - 190px);
  display: flex; flex-direction: column; justify-content: center;
}

/* המרווח בין הכפתורים במסך הפתיחה */
body[data-screen="landing"] .btn + .btn { margin-top: var(--s3); }

/* ------------------------------------------------------------ הטיפ ---
   🔴 באג שנתפס במצב כהה 2.09: האחוזים שלא נבחרו נעלמו.
   `.tip-opt` השתמש בטוקנים הישנים (--paper-2) שאין להם גרסה כהה, בזמן
   שהטקסט ירש את --text שכן התהפך. התוצאה: טקסט בהיר על רקע בהיר.
   **זה הסיכון של שתי מערכות טוקנים במקביל** — כל רכיב שנשאר על הישנה
   נשבר במצב כהה בשקט.

   ובאותה הזדמנות: שורת גלילה אופקית במקום ריבועים דחוסים. לחיצה אחת,
   בלי מקלדת, ואפשר להוסיף אפשרויות בלי לדחוס. */
/* ⚠️ flex-direction: row מפורש. הסגנון הישן נתן לעמודה לנצח במקרים
   מסוימים, ונתנאל ראה עמודה במקום שורת גלילה. */
.tip-options {
  display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
  gap: var(--s2) !important;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: var(--s2) !important;
  margin: 0 calc(var(--s4) * -1) var(--s4) !important;
  padding-inline: var(--s4) !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tip-options::-webkit-scrollbar { display: none; }
.tip-opt {
  flex: 0 0 auto !important;
  min-width: 68px; min-height: var(--tap-min);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--s4) !important;
  border-radius: var(--r-pill) !important;
  border: 1.5px solid var(--border-strong) !important;
  background: none !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  font-size: var(--t-lg) !important;
  font-weight: var(--w-black) !important;
  font-variant-numeric: var(--num-feat);
  scroll-snap-align: center;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.tip-opt:active { transform: scale(.96); }
.tip-opt.active {
  background: var(--orange-cta) !important;
  border-color: var(--orange-cta) !important;
  color: var(--on-orange) !important;
}

/* ------------------------------------------------------- הזמנה לחדר ---
   סדר לפי שימוש אמיתי: QR גדול ← קישור ← קוד מוסתר.
   הקוד בן 8 התווים היה קודם הדבר הבולט ביותר, והוא הדרך האיטית ביותר
   להצטרף — צריך להכתיב אותו, לשמוע נכון ולהקליד. QR עובד בשנייה. */
.room-box.invite { text-align: center; padding: var(--s5) var(--s4) !important; }
.invite-qr { margin: var(--s4) 0 var(--s3); }
.invite-qr img {
  width: 200px; height: 200px; max-width: 100%;
  background: #fff; padding: var(--s3);
  border-radius: var(--r-md); border: 1px solid var(--border);
}
.invite-qr-hint { margin-top: var(--s2); font-size: var(--t-sm); color: var(--text-soft); font-weight: var(--w-bold); }
.invite-actions { margin-bottom: var(--s3); }

.invite-code { margin-top: var(--s2); text-align: center; }
.invite-code summary {
  cursor: pointer; list-style: none;
  font-size: var(--t-sm); color: var(--text-soft); font-weight: var(--w-bold);
  min-height: var(--tap-min); display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
}
.invite-code summary::-webkit-details-marker { display: none; }
.invite-code summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.room-code-display {
  font-size: var(--num-md) !important; font-weight: var(--w-black) !important;
  letter-spacing: .14em; color: var(--text) !important;
  font-family: var(--font) !important; margin: var(--s3) 0 !important;
  background: none !important; border: none !important;
}
.invite-code input { font-size: var(--t-xs) !important; text-align: center; }
.invite-leave { margin-top: var(--s4); }
.invite-leave a { font-size: var(--t-sm); color: var(--text-soft); }

/* ============================================================================
   סבב תיקונים 2.09 — מהבדיקה של נתנאל
   ============================================================================ */

/* -- שבב "הוספה מהירה" של חבר שמור --------------------------------------
   עבד בפועל אבל לא נראה כמו כפתור, ולכן איש לא לחץ. */
.saved-chip {
  display: inline-flex; align-items: center; gap: var(--s1);
  min-height: 40px; padding: 0 var(--s4);
  margin: 0 0 var(--s2) var(--s2);
  border-radius: var(--r-pill) !important;
  background: var(--orange-soft) !important;
  border: 1.5px solid var(--orange) !important;
  color: var(--orange-ink) !important;
  font-family: var(--font); font-size: var(--t-sm); font-weight: var(--w-bold);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease);
}
.saved-chip:active { transform: scale(.96); }
.saved-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* -- "אין מצלמה? קוד להקלדה" — לא נקרא ככפתור --------------------------- */
.invite-code summary {
  border: 1.5px solid var(--border-strong) !important;
  border-radius: var(--r-pill) !important;
  padding: 0 var(--s4) !important;
  color: var(--text) !important;
  gap: var(--s2);
}
.invite-code summary::after {
  content: ""; width: 8px; height: 8px; flex: none;
  border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-base) var(--ease);
}
.invite-code[open] summary::after { transform: rotate(-135deg) translateY(-2px); }

/* -- הנקודה של חדר פעיל — פועמת -----------------------------------------
   נוכחות בזמן אמת היא הדבר שמבדיל את פאזל מגיליון אקסל. נקודה סטטית
   לא אומרת "חי"; פעימה איטית כן, בלי להסיח את הדעת. */
.room-status-dot {
  width: 9px !important; height: 9px !important; border-radius: 50% !important;
  display: inline-block; margin-inline-end: var(--s2);
  background: var(--turquoise) !important; border: none !important;
}
.room-status-dot.connected { animation: dotPulse 2.2s var(--ease) infinite; }
.room-status-dot.offline { background: var(--yellow) !important; animation: none; }
@keyframes dotPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(95,160,141,.55); }
  60%     { box-shadow: 0 0 0 7px rgba(95,160,141,0); }
}
@media (prefers-reduced-motion: reduce) { .room-status-dot.connected { animation: none; } }

/* ------------------------------------------------------- מסך הסריקה ---
   נתנאל 2.09: "2 ריבועים כאלה עם אימוג'ים — לא טוב", ו"3 אופציות ככה
   מוזר, ולא מבינים הוספה ידנית מהירה — בנוסף לסריקה או לא?"

   שני שינויים: האימוג'ים הוחלפו באייקונים, ושתי דרכי הצילום אוחדו
   לשורה אחת — הן אותה פעולה (להביא תמונה), רק ממקור אחר. וההוספה
   הידנית קיבלה כותרת שמסבירה מתי משתמשים בה. */
.upload-zone {
  display: flex; align-items: center; gap: var(--s3);
  text-align: start !important;
  padding: var(--s4) !important;
  background: var(--surface) !important;
  border: 1.5px dashed var(--border-strong) !important;
  border-radius: var(--r-md) !important;
  margin: 0 0 var(--s2) !important;
  min-height: 72px; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.upload-zone:active { background: var(--bg) !important; border-color: var(--orange) !important; }
.upload-zone.disabled { opacity: .45; cursor: default; }
.upload-zone .icon {
  width: 44px; height: 44px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); background: var(--orange-soft);
  color: var(--orange-ink); font-size: 0 !important; margin: 0 !important;
}
.upload-zone .icon .ic { width: 22px; height: 22px; }
.upload-zone .txt { font-size: var(--t-base) !important; font-weight: var(--w-bold) !important; color: var(--text) !important; }
.upload-zone .sub { font-size: var(--t-xs) !important; color: var(--text-soft) !important; margin-top: 2px; }

/* ההוספה הידנית — כותרת שמסבירה, לא תווית של שדה */
.manual-head { margin-bottom: var(--s3); }
.manual-title { display: block; font-size: var(--t-base); font-weight: var(--w-black); color: var(--text); }
.manual-note  { display: block; font-size: var(--t-xs); color: var(--text-soft); margin-top: 2px; line-height: var(--lh-body); }
.manual-add-row { display: flex; gap: var(--s2); }
.manual-add-row input { flex: 1 1 0; }
.manual-add-row input[inputmode="decimal"] { flex: 0 0 110px; }

/* -- בקשת משוב בתוך הסיכום ---------------------------------------------
   באנר שקט ולא מסך שחוסם. חמישה כוכבים, לחיצה אחת, ו-✕ ברור.
   מופיע אחת לשלוש ארוחות בלבד — בקשה שחוזרת תמיד נהפכת לרעש. */
.fb-nudge {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); margin-bottom: var(--s4);
  background: var(--surface); border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  animation: cRowIn var(--dur-slow) var(--ease-out) both;
}
.fb-nudge-txt { font-size: var(--t-sm); font-weight: var(--w-black); color: var(--text); flex: none; }
.fb-stars { display: flex; gap: 2px; flex: 1 1 auto; }
.fb-star {
  width: 40px; height: 40px; margin: -6px 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--border-strong);
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.fb-star .ic { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.fb-star:hover, .fb-star:active { color: var(--yellow-ink); transform: scale(1.12); }
.fb-star:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 50%; }
.fb-nudge-x {
  width: 36px; height: 36px; margin: -6px 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: var(--text-soft);
  border-radius: 50%;
}
.fb-nudge-x:active { background: rgba(35,58,71,.08); }

/* -- מסך הפתיחה: שלושת השלבים במשפט אחד --------------------------------
   הסלוגן "סוף לכאב ראש" מבטיח הקלה — אבל לא אומר ממה ולא מה עושים.
   מישהו שנוחת מקישור בוואטסאפ צריך להבין תוך שנייה מה הולך לקרות.
   שלוש מילים, מופרדות בנקודה, מתחת לסלוגן. */
.landing-how {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: var(--s2);
  margin-top: var(--s4);
  font-size: var(--t-sm); color: var(--text-soft); font-weight: var(--w-med);
}
.landing-how i {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--orange); flex: none;
}
body[data-screen="landing"] .step-anim .landing-logo svg { width: 76px !important; height: 76px !important; }

/* שדה קוד החדר — ספרות ברוחב אחיד ומרווח, בלי גופן מכונת כתיבה */
.code-input {
  text-align: center !important;
  letter-spacing: .22em !important;
  font-variant-numeric: var(--num-feat);
  font-weight: var(--w-black) !important;
  font-size: var(--t-xl) !important;
  margin-bottom: var(--s2) !important;
}

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

   שני שינויים: הכותרת המשנית ירדה (ההדר כבר אומר את זה), והתוכן עבר
   לרשימה מקובצת בסגנון מערכת ההפעלה — שורות עם קו מפריד בתוך משטח אחד,
   במקום קופסה נפרדת לכל פריט. זה הדפוס שכל משתמש טלפון כבר מכיר. */
.grp {
  background: var(--surface);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: var(--s4);
  box-shadow: var(--shadow-1);
}
.grp-row {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); min-height: var(--tap-min);
  position: relative;
}
.grp-row + .grp-row::before {
  content: ""; position: absolute; top: 0;
  inset-inline: var(--s4) 0; height: 1px; background: var(--border);
}
.grp-label { font-size: var(--t-base); font-weight: var(--w-med); color: var(--text); flex: 1 1 auto; }
.grp-value { font-size: var(--t-sm); color: var(--text-soft); font-weight: var(--w-bold); }
.grp-title {
  font-size: var(--t-xs); font-weight: var(--w-black); color: var(--text-soft);
  letter-spacing: .05em; margin: var(--s5) var(--s2) var(--s2);
}

/* השורות הקיימות מקבלות את אותו טיפול בלי לשנות מבנה */
.friend-row, .history-card, .help-step {
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  position: relative;
}
.friend-row + .friend-row::before, .history-card + .history-card::before, .help-step + .help-step::before {
  content: ""; position: absolute; top: 0;
  inset-inline: var(--s4) 0; height: 1px; background: var(--border);
}
#friendsList, #historyList, .help-list {
  background: var(--surface); border-radius: var(--r-md);
  overflow: hidden; box-shadow: var(--shadow-1); margin-bottom: var(--s4);
}

/* ------------------------------------------------------------ מצב ריק ---
   היום מי שנכנס ל"חברים" או ל"היסטוריה" בפעם הראשונה רואה מסך ריק לגמרי.
   הכלי מגדיר את זה כאנטי-דפוס: מצב ריק חייב הודעה ופעולה. */
.empty-state {
  text-align: center; padding: var(--s8) var(--s5) !important;
  background: none !important; border: none !important; box-shadow: none !important;
}
.empty-ico {
  width: 56px; height: 56px; margin: 0 auto var(--s4);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--orange-soft); color: var(--orange-ink);
}
.empty-ico .ic { width: 26px; height: 26px; }
.empty-title { font-size: var(--t-lg); font-weight: var(--w-black); color: var(--text); margin-bottom: var(--s2); }
.empty-txt { font-size: var(--t-sm); color: var(--text-soft); line-height: var(--lh-body); margin-bottom: var(--s5); }

/* ------------------------------------------------- מסך הכניסה: הרכבה ---
   נתנאל 2.09: "מסך הכניסה חייב להיראות ממש קטלני כדי שאנשים יתלהבו כבר
   מהכניסה הראשונה."

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

   🔴 תוקן 3.09: ההערה כאן טענה "רץ פעם אחת בטעינה" — וזה לא היה נכון.
   render() בונה מחדש את כל תוכן המסך, כולל ה-SVG, ולכן האנימציה רצה
   בכל ציור. זה ההבהוב במסך הבית שנתנאל דיווח עליו פעמיים. הכללים
   מצומצמים עכשיו ל-.step-anim, שנוסף רק כשהשלב באמת מתחלף. */
body[data-screen="landing"] .step-anim .landing-logo svg .pz-navy path:nth-child(1),
body[data-screen="landing"] .step-anim .landing-logo svg .pz-navy path:nth-child(2),
body[data-screen="landing"] .step-anim .landing-logo svg .pz-navy path:nth-child(3),
body[data-screen="landing"] .step-anim .landing-logo svg .pz-accent {
  animation: pzIn 620ms var(--ease-out) both;
  transform-box: fill-box;
  transform-origin: center;
}
body[data-screen="landing"] .step-anim .landing-logo svg .pz-navy path:nth-child(1){ --dx:-28px; --dy:-28px; animation-delay: 60ms; }
body[data-screen="landing"] .step-anim .landing-logo svg .pz-accent            { --dx: 28px; --dy:-28px; animation-delay: 170ms; }
body[data-screen="landing"] .step-anim .landing-logo svg .pz-navy path:nth-child(2){ --dx: 28px; --dy: 28px; animation-delay: 280ms; }
body[data-screen="landing"] .step-anim .landing-logo svg .pz-navy path:nth-child(3){ --dx:-28px; --dy: 28px; animation-delay: 390ms; }
@keyframes pzIn {
  from { opacity: 0; transform: translate(var(--dx,0), var(--dy,0)) scale(.7); }
  to   { opacity: 1; transform: none; }
}

body[data-screen="landing"] .step-anim .landing-title,
body[data-screen="landing"] .step-anim .landing-tagline,
body[data-screen="landing"] .step-anim .landing-how {
  animation: cRowIn 500ms var(--ease-out) both;
}
body[data-screen="landing"] .step-anim .landing-title   { animation-delay: 480ms; }
body[data-screen="landing"] .step-anim .landing-tagline { animation-delay: 560ms; }
body[data-screen="landing"] .step-anim .landing-how     { animation-delay: 640ms; }

@media (prefers-reduced-motion: reduce) {
  body[data-screen="landing"] .step-anim .landing-logo svg *,
  body[data-screen="landing"] .step-anim .landing-title,
  body[data-screen="landing"] .step-anim .landing-tagline,
  body[data-screen="landing"] .step-anim .landing-how { animation: none !important; }
}

/* -- הפוטר המשפטי יורד מגובה העיניים ------------------------------------
   נתנאל: "לא יודע כמה רלוונטי שם המייל והתקנון".
   ⚠️ הם חייבים להישאר נגישים — יש התחייבות משפטית והצהרת נגישות —
   אבל הם לא שייכים לרושם הראשון. שורה אחת קטנה בתחתית. */
body[data-screen="landing"] .receipt > div:last-child a,
.landing-legal a { font-size: var(--t-xs) !important; color: var(--text-soft) !important; }
.landing-legal {
  margin-top: var(--s7); text-align: center;
  font-size: var(--t-xs); color: var(--text-soft); line-height: 1.9;
}

/* ---------------------------------------------------- אישור התקנון ---
   נתנאל 2.09: "שים שצ'ק בוקס נראה טוב."
   תיבת הדפדפן נראית כמו טופס משנות ה-2000. כאן היא מוסתרת ומצוירת
   מחדש כריבוע מעוגל שמתמלא בכתום עם וי — ואזור המגע הוא כל השורה,
   לא רק הריבוע. ⚠️ זו הסכמה משפטית, ולכן היא חייבת להיות פעולה
   אקטיבית וברורה — לא משהו שנלחץ בטעות. */
.agree-box {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s4); cursor: pointer;
  background: var(--surface); border-radius: var(--r-md);
  border: 1.5px solid var(--border);
  font-size: var(--t-sm); color: var(--text); line-height: var(--lh-body);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.agree-box:has(input:checked) { border-color: var(--orange); background: var(--orange-soft); }
.agree-box:focus-within { box-shadow: var(--focus-ring); }
.agree-box input { position: absolute; opacity: 0; width: 0; height: 0; }
.agree-box::before {
  content: ""; width: 24px; height: 24px; flex: none; margin-top: 1px;
  border-radius: var(--r-sm); border: 2px solid var(--border-strong);
  background: var(--surface);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.agree-box:has(input:checked)::before {
  background: var(--orange-cta) center/15px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  border-color: var(--orange-cta);
}
.agree-box a { color: var(--orange-ink); font-weight: var(--w-bold); text-underline-offset: 3px; }
.agree-note {
  font-size: var(--t-xs); color: var(--text-soft);
  margin-top: var(--s3); text-align: center; line-height: var(--lh-body);
}

/* -- שבירת מילים על כל ערך שמגיע מבחוץ ----------------------------------
   המחקר: "אין באפליקציה ולו הוראת שבירת מילים אחת. שם ארוך בלי רווחים
   שובר את כל העמוד — וזה נכון גם לשמות שמגיעים מסריקה."
   ⚠️ min-width:0 חיוני: ילד של flex לא מתכווץ מתחת לתוכן שלו כברירת
   מחדל, ולכן overflow-wrap לבדו לא מספיק בתוך שורה. */
.c-item-name, .s-name, .grp-label, .friend-row, .history-card,
.item-name, .summary-name, .rb-title, .rb-sub, .c-who, .s-items,
.landing-title, .section-title, .section-sub, .empty-title, .empty-txt,
.cele-title, .cele-sub, .tsheet-title {
  overflow-wrap: anywhere;
  min-width: 0;
}
input, textarea { min-width: 0; }

/* אותה הגנה על כל מכולות ה-flex שמכילות שמות מהמשתמש */
.brand, .grp-row, .friend-row, .manual-add-row, .btn-row, .tsheet-head { min-width: 0; }
.grp-row > *, .friend-row > * { min-width: 0; }
.room-box, .room-box * { overflow-wrap: anywhere; min-width: 0; }

/* שורת משתתף במסך הטיפ — מכילה שם מהמשתמש ולכן חייבת לשבור */
.person-row, .person-row > * { min-width: 0; overflow-wrap: anywhere; }
.person-row { flex-wrap: wrap; gap: var(--s2); }
.person-name, .person-amount { min-width: 0; overflow-wrap: anywhere; }

/* כפתור הסרה בשורת חבר — אייקון שקוף, לא קופסה. הקופסה הבז'ית נראתה
   כמו שדה קלט נוסף ליד השם. */
.icon-btn {
  width: 44px; height: 44px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: none !important; border: none !important;
  border-radius: 50% !important;
  color: var(--text-soft) !important; font-size: var(--t-lg) !important;
  cursor: pointer;
}
.icon-btn:active { background: rgba(35,58,71,.08) !important; }
.icon-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* תיבות סימון שנשארו על העיצוב של המערכת — כחול שלא שייך לפלטה */
input[type=checkbox] {
  width: 22px; height: 22px; flex: none;
  accent-color: var(--turquoise-ink);
  cursor: pointer;
}

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

   🔴 הרקע צבעוני והמסגרת מלאה (מול המקווקוות של ההתקנה) — אבל הכפתור
   נשאר `secondary` בכוונה. במסך הזה כבר יש כתום מלא אחד, "סיום"
   ב-.c-sticky, ושני כתומים מלאים מבטלים זה את זה בדיוק כפי שמתועד
   אצל .install-go. הצבע של הכרטיס מושך את העין; הכפתור לא צריך
   להתחרות, כי הוא הכפתור היחיד בתוכו. */
.nexttime-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  margin-top: var(--s5);
  padding: var(--s4);
  background: var(--orange-soft);
  border: 1px solid var(--orange);
  border-radius: var(--r-lg);
}
.nexttime-txt {
  flex: 1 1 100%; min-width: 0;
  font-size: var(--t-xs); line-height: 1.55; color: var(--text-soft);
  overflow-wrap: anywhere;
}
.nexttime-txt b {
  display: block; margin-bottom: 2px;
  font-size: var(--t-sm); color: var(--text);
}
.nexttime-go {
  flex: 1 1 100%;
  margin: 0 !important; padding: var(--s3) var(--s4);
  font-size: var(--t-sm); min-height: var(--tap-min);
}

/* ---------- ההצעה להתקין ----------
   יושבת במסך הסיכום, מתחת לסכומים: הרגע שבו החלוקה כבר עבדה
   ומי שמסתכל יודע בשביל מה הוא מוסיף אותה למסך הבית.
   מעוצבת בכוונה שקטה יותר מהכפתור הראשי — היא הצעה, לא שלב. */
.install-card {
  position: relative;
  display: flex; align-items: center; gap: var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s5);
  padding: var(--s4);
  padding-inline-end: calc(var(--s4) + 26px);   /* מקום לכפתור הסגירה */
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
}
.install-ico { flex: none; line-height: 0; opacity: .9; }
.install-txt {
  flex: 1 1 190px; min-width: 0;                /* בלי זה טקסט ארוך שובר את השורה */
  font-size:var(--t-xs); line-height: 1.55; color: var(--text-soft);
  overflow-wrap: anywhere;
}
.install-txt b { display: block; font-size:var(--t-sm); color: var(--text); margin-bottom: 2px; }
.install-txt b:not(:first-child) { display: inline; margin: 0; font-size: inherit; }
/* הכפתור הראשי במסך הסיכום הוא "סיום" — כתום מלא. שני כתומים מלאים זה
   מתחת לזה מבטלים זה את זה, והעין כבר לא יודעת מה הפעולה האמיתית.
   ההצעה להתקין משתמשת בווריאנט `secondary` שכבר קיים במערכת, ולא
   בסגנון רביעי משלה. */
.install-go {
  flex: 1 1 100%;
  margin: 0 !important; padding: var(--s3) var(--s4);
  font-size:var(--t-sm); min-height: var(--tap-min);
}
.install-x {
  position: absolute; inset-block-start: 6px; inset-inline-end: 6px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--text-soft); opacity: .65; line-height: 0;
}
.install-x:hover { opacity: 1; }

/* תווית "לא חובה" ליד שם שדה, ושורת הסבר מתחתיו */
.field-opt {
  font-weight: 400; font-size:var(--t-xs); color: var(--text-soft);
  margin-inline-start: var(--s2);
}
.field-hint {
  margin-top: calc(var(--s2) * -1 + 2px); margin-bottom: var(--s3);
  font-size:var(--t-xs); line-height: 1.5; color: var(--text-soft);
}

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

   🔴 ההרחבה היא רק לכיוון שיש בו מקום, ולעולם לא מעבר למרווח מהשכן.
   שני אזורי לחיצה שחופפים גרועים מכפתור קטן: כפתור קטן גורם להחטאה,
   חפיפה גורמת לפעולה ההפוכה — ובסריקה השכן הוא כפתור המחיקה.
   הערכים כאן נגזרו ממדידה בפועל של המרווח לשכן הקרוב בכל מסך. */
.item-edit-icon, .c-icon-btn, .fb-star, .feedback-star, .s-chip, .s-more,
.c-mini, .c-cta, .add-friend-btn, .tsheet-grab, .icon-btn,
.invite-leave a, .settings-forget a { position: relative; }

.item-edit-icon::after, .c-icon-btn::after, .fb-star::after, .feedback-star::after, .s-chip::after,
.s-more::after, .c-mini::after, .c-cta::after, .add-friend-btn::after,
.tsheet-grab::after, .icon-btn::after {
  content: ''; position: absolute; /* שקוף לחלוטין — רק לוכד לחיצות */
}

/* 28×28, והמרווח לשכן הורחב ל-20 — לכן אפשר 10 לכל כיוון */
.item-edit-icon::after { inset: -10px; }
/* 40×40 עם 23 מרווח */
.c-icon-btn::after     { inset: -4px; }
.icon-btn::after       { inset: -6px; }
/* 38×38 והכוכבים 6 זה מזה — 3 לכל צד מגיע בדיוק לגבול בלי לחפוף */
.fb-star::after, .feedback-star::after { inset: -3px; }
/* רחבים ממילא — מרחיבים רק לגובה, כדי לא לגעת בשכן שלצידם */
.s-chip::after         { inset: -6px 0; }
.s-more::after         { inset: -2px 0; }
.c-mini::after         { inset: -4px 0; }
.c-cta::after          { inset: -4px 0; }
.add-friend-btn::after { inset: -4px 0; }
.tsheet-grab::after    { inset: -10px 0; }

/* קישורי טקסט. אלה שורות טקסט ולא כפתורים, ולכן התקן שחל עליהן הוא
   24 פיקסל ולא 44. מרחיבים לגובה עד כמה שהמרווח מאפשר. */
.invite-leave a, .settings-forget a { display: inline-block; padding: 8px 6px; }

/* השורה שמסבירה את החלק המשוער בתוך "הסכום שלי עד עכשיו".
   בלעדיה המסך הראה סכום ומיד מתחתיו "שויכו 0", ושני מספרים נכונים
   נראו כסותרים. שקטה בכוונה — היא הערת שוליים למספר, לא מספר נוסף. */
.c-mine-note {
  margin-top: 2px;
  font-size:var(--t-xs); line-height: 1.5;
  color: rgba(253,250,246,.72);
  font-weight: var(--w-med);
}

/* ================= עזרי פריסה — מחליפים סגנון מוטבע =================
   ב‑3.09 נמדדו 93 מאפייני style= בתוך js/screens.js. כל אחד מהם היה
   מקום שבו שינוי עיצובי לא מתפשט, ומקור לגדלים ולמרווחים שחורגים
   מהסולם. הכיתות כאן הן היעד שאליו הם הועברו — **כולן בנויות אך ורק
   מטוקנים**, כדי ששינוי בסולם ישנה את כל האפליקציה במקום אחד. */
.mt-1 { margin-top: var(--s1); }  .mb-1 { margin-bottom: var(--s1); }
.mt-2 { margin-top: var(--s2); }  .mb-2 { margin-bottom: var(--s2); }
.mt-3 { margin-top: var(--s3); }  .mb-3 { margin-bottom: var(--s3); }
.mt-4 { margin-top: var(--s4); }  .mb-4 { margin-bottom: var(--s4); }
.mt-5 { margin-top: var(--s5); }
.mt-6 { margin-top: var(--s6); }
.mt-7 { margin-top: var(--s7); }
.my-4 { margin: var(--s4) 0; }

.t-center { text-align: center; }
.d-block  { display: block; }
.flex-1   { flex: 1; }
.row-mid  { display: flex; align-items: center; gap: var(--s2); }

/* טקסטים משניים — שלוש רמות בלבד, כולן מהסולם */
.t-xs   { font-size: var(--t-xs); }
.t-soft { font-size: var(--t-sm); color: var(--text-soft); }
.t-fine { font-size: var(--t-xs); color: var(--text-soft); }
.t-ok   { color: var(--turquoise-ink); }
/* 🔴 6.09 - צבע לשורה שדורשת תיקון ידני (מחיר שלא נקרא מהקבלה). אותו
   טוקן של .warn-badge ושל .c-status.waiting, ולצד האייקון והטקסט - כדי
   שהמצב מסומן בשלושה סימנים ולא רק בצבע.
   ⚠️ הבורר השני נחוץ: `.draft-row .dr-meta` ב-styles.css ספציפי יותר
   ממחלקת עזר בודדת, וקובע --text-soft. אומת בדפדפן. */
.t-warn { color: var(--yellow-ink); }
.draft-row .dr-meta.t-warn { color: var(--yellow-ink); }

.link-soft { color: var(--text-soft); text-decoration: underline; }

/* מפריד מקווקו שמפריד אזור משני בתחתית מסך */
.divider-top {
  margin-top: var(--s6); padding-top: var(--s4);
  border-top: 1px dashed var(--border); text-align: center;
}

/* כפתור ראשי מוגדל — מסך הפתיחה בלבד */
.cta-big { padding: var(--s5); font-size: var(--t-base); }

/* פעולה הרסנית */
.btn-danger {
  background: var(--danger) !important; color: #fff !important;
  border-color: var(--danger) !important;
}
.btn-danger-quiet { font-size: var(--t-xs); color: var(--danger); }

/* תג זעיר לצד שם — היה כתוב מוטבע עם גודל 10.5 שחרג מהסולם */
.micro-chip {
  font-size: var(--t-xs); color: var(--text-soft);
  background: var(--surface-sunk); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 2px var(--s2);
  flex: none; white-space: nowrap;
}
/* אווטאר קטן — הצבע נשאר מוטבע כי הוא נגזר מזהות המשתתף */
.avatar-sm { width: 24px; height: 24px; font-size: var(--t-xs); }

/* שני כרטיסי ההעלאה היו זהים במשקל, ושתי אפשרויות שוות מחייבות קריאה
   והחלטה. צילום הוא המקרה הנפוץ בהרבה — ולכן הוא נשאר ראשי, וההעלאה
   מקובץ נסוגה צעד אחורה. אותו תוכן, היררכיה אחרת. */
.upload-zone.is-secondary {
  /* !important כי כלל .upload-zone למעלה משתמש בו — בלי זה הכרטיס
     המשני נראה זהה לראשי, וזו בדיוק הבעיה שהוא נועד לפתור. */
  padding: var(--s3) var(--s4) !important;
  background: none !important;
  border-style: solid !important;
  border-color: var(--border) !important;
}
.upload-zone.is-secondary .txt { font-size: var(--t-sm) !important; font-weight: var(--w-med) !important; }
.upload-zone.is-secondary .sub { font-size: var(--t-xs) !important; }
.upload-zone.is-secondary .icon {
  transform: scale(.8); opacity: .7;
}

/* הכפתור הראשי משנה מראה ברגע שהכול מסומן — היו שתי שניות שבהן
   האפליקציה כבר ידעה שהמשתמש סיים ולא אמרה לו. */
/* 🔴 בלי אנימציה. render() מצייר את הכפתור מחדש בכל לחיצה על פריט,
   וכל ציור הפעיל את האנימציה שוב — זה ההבהוב שנתנאל דיווח עליו.
   ההדגשה נשארת, והיא סטטית ולכן שקטה. */
.c-cta.is-ready {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange-cta) 30%, transparent);
}

/* אזור פעולה בלתי הפיכה — מופרד במרחק ובקו, לא צמוד לכפתור הראשי.
   הכלל: אין פעולה שאי אפשר לבטל במרחק קטן מ-24 פיקסל מפעולה ראשית. */
.danger-zone {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px dashed var(--border);
  text-align: center;
}


/* קישור־כפתור עצמאי. עד עכשיו .linkish היה מעוצב רק בתוך .c-foot, ולכן
   בכל מקום אחר הוא קיבל את עיצוב ברירת המחדל של הדפדפן — כפתור אפור עם
   מסגרת, בדיוק מה שהוא לא אמור להיות. */
button.linkish {
  background: none; border: 0; padding: var(--s2) var(--s3);
  font-family: var(--font); font-size: var(--t-sm); font-weight: var(--w-med);
  color: var(--text-soft); text-decoration: underline; cursor: pointer;
  min-height: var(--tap-min);
}
button.linkish:active { color: var(--text); }
button.linkish:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

/* h1 בהדר המסך — נשאר בדיוק באותו גודל וצבע כמו קודם. השינוי סמנטי
   בלבד: עד 3.09 מסכי המשימה לא נשאו שום כותרת שקורא מסך יכול למצוא. */
h1.c-step {
  margin: 0; padding: 0;
  font-size: var(--t-xs); font-weight: var(--w-med);
  letter-spacing: .06em; opacity: .65;
  color: inherit;
}

/* ================= מסך הבית =================
   הוכרע 3.09: **אמין ורגוע.** רגוע = פחות אלמנטים, יותר חלל, בלי
   עיגולים כתומים צועקים. אמין = ספציפיות (ביט ופייבוקס בלוגו שלהם)
   והבטחות מדויקות. המבנה לפי המחקר: כותרת → שורה → שלושה צעדים →
   פעולה ראשית אחת. */
/* ---------- מסך הבית: שלושה אזורים שממלאים את המסך ----------
   🔴 4.09 - נתנאל: "המלל מרוכז מידי והכפתורים למעלה מידי, זה לא מחולק נכון."
   והוא צדק במספרים: כל התוכן נגמר ב-553px מתוך 844, **ומתחתיו נשארו
   291px ריקים** - שליש מהמסך. הכול היה דחוס בחלק העליון.

   התיקון: המסך מתחלק לשלושה אזורים שנפרשים על כל הגובה -
   **הזהות למעלה** (סמל, כותרת, שורה) · **ההסבר באמצע** (שלושת הצעדים) ·
   **הפעולה למטה**, שם האגודל נמצא. זו הפריסה שאפליקציה מצפים לה. */
body[data-hero="1"] .app {
  min-height: 100dvh; display: flex; flex-direction: column;
  /* ⚠️ הריפוד התחתון של המעטפת (40px) מיותר כאן ודחף את המסך לגלילה
     במכשירים נמוכים - .hero נושא ריפוד תחתון משלו, כולל האזור הבטוח. */
  padding-bottom: 0;
}
body[data-hero="1"] #screen { flex: 1 1 auto; display: flex; flex-direction: column; }
/* ⚠️ שרשרת ה-flex חייבת לעבור גם דרך העטיפה חסרת המחלקה ש-landing()
   מחזירה (`<div class="${landingAnimClass()}">` - במסך הבית הוא ריק).
   בלעדיה .hero לא נמתח, וזה בדיוק מה שקרה בניסיון הראשון. */
body[data-hero="1"] #screen > div { flex: 1 1 auto; display: flex; flex-direction: column; }
.hero {
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--s5); text-align: center;
  padding: var(--s5) 0 calc(var(--s4) + env(safe-area-inset-bottom, 0px));
}
.hero-top { display: flex; flex-direction: column; align-items: center; }
.hero-act { display: flex; flex-direction: column; }

/* ---------- הסמל, ופס הסריקה שעובר עליו ----------
   הסמל גדל מ-64 ל-112: במסך הפתיחה הוא הזהות, לא אייקון.

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

   ⚠️ ההשהיה השלילית (--hero-delay) היא אותו מנגנון שכבר הציל כאן שלוש
   אנימציות: render() בונה את המסך מחדש, ובלי זה כל ציור היה מתחיל את
   הסריקה מאפס. */
.hero-mark {
  position: relative; display: inline-block; line-height: 0;
  margin-bottom: var(--s5);
}
.hero-mark svg { width: 112px; height: 112px; display: block; }
/* מסך נמוך (SE וכדומה): הסמל והמרווחים מתכווצים כדי שהכול יישאר במסך
   אחד בלי גלילה. הפעולה חייבת להיות נראית בלי לגלול. */
@media (max-height: 700px) {
  .hero-mark svg { width: 84px; height: 84px; }
  .hero-mark { margin-bottom: var(--s3); }
  .hero { gap: var(--s3); padding-top: var(--s3); }
  .hero-line { font-size: 30px; }
}
/* מכשיר ישן וקטן (320x568). לא נפוץ ב-2026, אבל עדיף שיתכווץ מאשר
   שהקישור להצטרפות ייפול מתחת לקו הגלילה. */
@media (max-height: 600px) {
  .hero-mark svg { width: 64px; height: 64px; }
  .hero-mark { margin-bottom: var(--s2); }
  .hero { gap: var(--s2); padding-top: var(--s2); }
  .hero-line { font-size: 26px; }
  .hero-sub { font-size: var(--t-sm); margin-top: var(--s2); }
  .hero-steps { gap: var(--s4); margin-top: 0; }
  .hero-steps li { font-size: var(--t-sm); gap: var(--s1); }
  .hs-n { width: 24px; height: 24px; font-size: var(--t-sm); }
  .hero { padding-top: 0; }
}
.hero-scan {
  /* 🔴 4.09 - נתנאל: "האייקון במסך הבית לא נראה טוב".
     הסיבה הסבירה: בדפדפן שאינו תומך במסכות CSS, `mask` פשוט מתעלמים
     ממנו - ואז פס האור אינו קו על הלוגו אלא **מלבן לבן על כל הריבוע**,
     שמלבין חצי מהסמל. ברירת המחדל היא עכשיו מוסתר, והפס מופיע **רק**
     כשהדפדפן מצהיר שהוא יודע למסך. */
  display: none;
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  /* ⚠️ גרשיים **בודדים** בתוך ה-SVG. הניסיון הראשון השתמש בכפולים,
     והם סגרו את מחרוזת ה-CSS באמצע - המסכה פשוט לא נטענה, ופס האור
     הופיע כמלבן לבן על כל הריבוע. נתפס במדידה, לא בעין. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='14%2014%20172%20172'%3E%3Cpath%20fill='%23fff'%20d='M20,20%20L100,20%20L100,50%20A10,10%200%200%201%20100,70%20L100,100%20L70,100%20A10,10%200%200%201%2050,100%20L20,100%20L20,70%20A10,10%200%200%201%2020,50%20L20,20%20Z'/%3E%3Cpath%20fill='%23fff'%20d='M100,100%20L130,100%20A10,10%200%200%201%20150,100%20L180,100%20L180,130%20A10,10%200%200%201%20180,150%20L180,180%20L100,180%20L100,150%20A10,10%200%200%201%20100,130%20L100,100%20Z'/%3E%3Cpath%20fill='%23fff'%20d='M20,100%20L50,100%20A10,10%200%200%200%2070,100%20L100,100%20L100,130%20A10,10%200%200%200%20100,150%20L100,180%20L70,180%20A10,10%200%200%200%2050,180%20L20,180%20L20,100%20Z'/%3E%3Cpath%20fill='%23fff'%20d='M100,20%20L130,20%20A10,10%200%200%200%20150,20%20L180,20%20L180,100%20L150,100%20A10,10%200%200%200%20130,100%20L100,100%20L100,70%20A10,10%200%200%200%20100,50%20L100,20%20Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='14%2014%20172%20172'%3E%3Cpath%20fill='%23fff'%20d='M20,20%20L100,20%20L100,50%20A10,10%200%200%201%20100,70%20L100,100%20L70,100%20A10,10%200%200%201%2050,100%20L20,100%20L20,70%20A10,10%200%200%201%2020,50%20L20,20%20Z'/%3E%3Cpath%20fill='%23fff'%20d='M100,100%20L130,100%20A10,10%200%200%201%20150,100%20L180,100%20L180,130%20A10,10%200%200%201%20180,150%20L180,180%20L100,180%20L100,150%20A10,10%200%200%201%20100,130%20L100,100%20Z'/%3E%3Cpath%20fill='%23fff'%20d='M20,100%20L50,100%20A10,10%200%200%200%2070,100%20L100,100%20L100,130%20A10,10%200%200%200%20100,150%20L100,180%20L70,180%20A10,10%200%200%200%2050,180%20L20,180%20L20,100%20Z'/%3E%3Cpath%20fill='%23fff'%20d='M100,20%20L130,20%20A10,10%200%200%200%20150,20%20L180,20%20L180,100%20L150,100%20A10,10%200%200%200%20130,100%20L100,100%20L100,70%20A10,10%200%200%200%20100,50%20L100,20%20Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
@supports ((-webkit-mask-image: url("#m")) or (mask-image: url("#m"))) {
  .hero-scan { display: block; }
}
.hero-scan i {
  /* פס צר עם נפילה חדה. הגרסה הראשונה הייתה רחבה ורכה מדי - היא נראתה
     כמו הלבנה של חצי הסמל ולא כמו קו סורק. */
  position: absolute; inset-inline: -20%; top: 0; height: 24%;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.10) 34%,
    rgba(255,255,255,.70) 48%, rgba(255,255,255,.82) 50%,
    rgba(255,255,255,.70) 52%, rgba(255,255,255,.10) 66%, rgba(255,255,255,0) 100%);
  transform: translateY(-140%);
  animation: pzScan 4.8s var(--ease) infinite;
  animation-delay: var(--hero-delay, 0ms);
}
/* המחזור: 3 שניות מנוחה, ואז מעבר של קצת יותר משנייה. הפס עצמו נראה
   בערך שנייה - מספיק לקרוא אותו כסריקה, קצר מספיק כדי לא להעיק. */
@keyframes pzScan {
  0%, 62%      { transform: translateY(-140%); }
  88%          { transform: translateY(320%); }
  88.01%, 100% { transform: translateY(-140%); }
}

/* החתיכות מתאספות בהגעה. פעם אחת - ההשהיה השלילית דואגת שציור חוזר
   ימשיך מהמקום ולא יתחיל מחדש. */
.hero-mark .pz-navy path, .hero-mark .pz-accent {
  animation: pzIn 620ms var(--ease-out) both;
  animation-delay: calc(var(--hero-delay, 0ms) + var(--pz-d, 0ms));
  transform-box: fill-box; transform-origin: center;
}
.hero-mark .pz-navy path:nth-child(1) { --dx:-34px; --dy:-34px; --pz-d:  60ms; }
.hero-mark .pz-accent                 { --dx: 34px; --dy:-34px; --pz-d: 170ms; }
.hero-mark .pz-navy path:nth-child(2) { --dx: 34px; --dy: 34px; --pz-d: 280ms; }
.hero-mark .pz-navy path:nth-child(3) { --dx:-34px; --dy: 34px; --pz-d: 390ms; }

/* 🔴 במצב כהה חתיכות הלוגו מתבהרות (`--pz-navy` מקבל את צבע הטקסט),
   ולכן פס אור לבן עליהן כמעט בלתי נראה. שם הסריקה הופכת לפס **כהה** -
   אותה שפה, הפוכה. נתפס בצילום השוואה, לא בעין. */
@media (prefers-color-scheme: dark) {
  .hero-scan i {
    background: linear-gradient(to bottom,
      rgba(16,26,34,0) 0%, rgba(16,26,34,.14) 34%,
      rgba(16,26,34,.62) 48%, rgba(16,26,34,.74) 50%,
      rgba(16,26,34,.62) 52%, rgba(16,26,34,.14) 66%, rgba(16,26,34,0) 100%);
  }
}

/* ------------------------------------------ צבעי משתתפים במצב כהה ---
   🔴 6.09 - חמשת צבעי המשתתפים נבחרו בקפידה למצב בהיר (ראה
   PERSON_COLOR_PALETTE ב-calc.js: מרחק 49° בגלגל הגוונים, כדי שיישארו
   נבדלים גם בעיוורון צבעים). אף אחד לא בדק אותם על רקע כהה.
   נמדד מול #16212A: 2.48 עד 2.90:1 - כולם מתחת ל-3:1 הנדרשים.

   ⚠️ שני מקרים שונים, ולכן שני תיקונים שונים - ולא אחד גורף:

   1. **נקודה ריקה** (.person-dot): הצבע **הוא** המידע, ואין בה טקסט.
      כאן הבהרה היא התיקון הנכון: brightness(1.45) מעלה את כל החמישה
      ל-4.55:1 ומעלה, והגוונים נשמרים - כלומר ההבחנה בעיוורון צבעים
      לא נפגעת.

   2. **עיגול עם אות** (.c-avatar, .c-who-dot): כאן **אסור** להבהיר.
      האות הלבנה בתוך העיגול נמצאת היום ב-5.42 עד 6.60:1 - מצוין -
      והבהרת הרקע שלה מפילה אותה ל-2.85:1, כלומר תיקון שיוצר כשל חדש.
      לכן במקום לשנות את המילוי, מוסיפים טבעת שמפרידה אותו מהרקע.
      outline ולא box-shadow: ל-.c-avatar + .c-avatar כבר יש box-shadow
      לחפיפה, ודריסה שלו הייתה שוברת את הערימה. */
@media (prefers-color-scheme: dark) {
  .person-dot { filter: brightness(1.45); }
  .c-avatar, .c-who-dot { outline: 1px solid var(--text-soft); outline-offset: -1px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scan { display: none; }
  .hero-mark .pz-navy path, .hero-mark .pz-accent { animation: none !important; }
}

.hero-steps {
  list-style: none; padding: 0; margin: var(--s6) 0 0;
  display: flex; justify-content: center; gap: var(--s5);
}
.hero-steps li {
  display: flex; flex-direction: column; align-items: center; gap: var(--s2);
  font-size: var(--t-base); font-weight: var(--w-bold); color: var(--text);
}
.hs-n {
  flex: none; width: 28px; height: 28px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  border: 1.5px solid var(--border-strong);
  font-size: var(--t-xs); font-weight: var(--w-bold); color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

/* ביט ופייבוקס — הלוגו האמיתי, לא שם בטקסט. זה מה שקונה אמון. */

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

/* כפתור אחד לכל המקורות. גדול, ראשי, ובלי החלטה מקדימה. */
.scan-cta {
  display: flex; align-items: center; gap: var(--s4);
  width: 100%; text-align: start;
  padding: var(--s4); margin-bottom: var(--s4);
  background: var(--surface);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-lg);
  cursor: pointer;
  min-height: 76px;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.scan-cta:active { background: var(--bg); border-color: var(--orange-cta); }
.scan-cta:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.scan-cta.disabled { opacity: .45; cursor: default; }
.sc-ico {
  flex: none; width: 46px; height: 46px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--orange-soft); color: var(--orange-cta); line-height: 0;
}
.sc-ico .ic { width: 24px; height: 24px; }
.sc-txt { display: grid; gap: 2px; min-width: 0; }
.sc-txt b { font-size: var(--t-base); font-weight: var(--w-bold); color: var(--text); }
.sc-txt i { font-style: normal; font-size: var(--t-xs); color: var(--text-soft); }

/* הקבלה והרשימה זו לצד זו — "זה מה שצילמת, זה מה שקראתי ממנה". */
.verify {
  margin-top: var(--s4);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
}
.verify-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2);
  padding: var(--s3) var(--s4);
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--border);
  font-size: var(--t-sm); color: var(--text-soft);
}
.verify-head b { font-size: var(--t-base); color: var(--text); }
.verify-split { display: grid; grid-template-columns: 96px 1fr; gap: 0; }
.verify-shot {
  position: relative;
  border-inline-end: 1px solid var(--border);
  background: var(--surface-sunk);
}
.verify-shot img {
  width: 100%; height: 100%; max-height: 340px;
  object-fit: cover; object-position: top center; display: block;
}
.verify-zoom {
  position: absolute; inset-block-end: var(--s2); inset-inline-start: var(--s2);
  width: 32px; height: 32px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--navy); color: var(--text-on-dark);
  border: 0; cursor: pointer; line-height: 0;
}
.verify-zoom .ic { width: 16px; height: 16px; }
.verify-zoom::after { content: ''; position: absolute; inset: -8px; }
.verify-list { min-width: 0; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }
.verify-list .draft-row { margin: 0; border-radius: 0; border-bottom: 1px solid var(--border); box-shadow: none; }
.verify-list .draft-row:last-child { border-bottom: 0; }

/* הקבלה בגדול — כשרוצים לבדוק פרט */
.rzoom {
  position: fixed; inset: 0; z-index: calc(var(--z-overlay) + 2);
  background: rgba(20,28,34,.92);
  display: grid; place-items: center; padding: var(--s4);
  overflow: auto;
}
.rzoom img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.rzoom-x {
  position: fixed; inset-block-start: var(--s4); inset-inline-end: var(--s4);
  width: 44px; height: 44px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--surface); color: var(--text); border: 0; cursor: pointer; line-height: 0;
}

/* הוספה ידנית — מקופלת כברירת מחדל ברגע שיש פריטים שנסרקו. */
.manual-fold { margin-top: var(--s5); }
.manual-fold > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s4);
  min-height: var(--tap-min); box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md);
  font-size: var(--t-sm); font-weight: var(--w-bold); color: var(--text-soft);
}
.manual-fold > summary::-webkit-details-marker { display: none; }
.manual-fold > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.manual-fold[open] > summary { border-radius: var(--r-md) var(--r-md) 0 0; border-bottom: 0; }
.manual-fold .manual-add-box {
  margin: 0 !important;
  border-radius: 0 0 var(--r-md) var(--r-md) !important;
  border-top: 0 !important;
}
.manual-fold .manual-note { font-size: var(--t-xs); color: var(--text-soft); margin-bottom: var(--s3); }

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

/* h1 עם עיצוב .section-title — במסכי הכניסה הכותרת הזו **היא** כותרת
   המסך, ולא הייתה שם h1 בכלל. השינוי סמנטי בלבד; המראה זהה. */
h1.section-title { margin: 0 0 var(--s1); }

/* מה עומד לקרות — במסך ההמתנה של האורח.
   נוסף 3.09 אחרי שהביקורת מצאה שהמסך הזה, שהוא **הפגישה הראשונה של
   האורח עם המוצר**, היה ריק ב-80% ולא אמר לו מה צפוי. */
.wait-steps {
  list-style: none; margin: var(--s6) 0 0; padding: 0;
  display: grid; gap: var(--s4);
}
.wait-steps li {
  display: flex; align-items: center; gap: var(--s3);
  font-size: var(--t-sm); color: var(--text-soft);
  min-width: 0; overflow-wrap: anywhere;
}
.ws-i {
  flex: none; width: 34px; height: 34px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--surface-sunk); color: var(--text-soft); line-height: 0;
}
.ws-i .ic { width: 17px; height: 17px; }


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

   ⚠️ פתיחה בלבד. סגירה של <details> מסירה את התוכן מיד, ואי אפשר להנפיש
   אותה בלי JS שמעכב את הסרת המאפיין — מורכבות שלא שווה את הרווח כאן.
   ============================================================================ */
.invite-code[open] > *:not(summary),
.manual-fold[open] > *:not(summary) {
  animation: foldOpen var(--dur-enter) var(--ease-out) backwards;
}
@keyframes foldOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .invite-code[open] > *:not(summary),
  .manual-fold[open] > *:not(summary) { animation: none !important; }
}

/* ============================================================================
   המתג גם בהיסטוריה
   ============================================================================
   אותה פעולה בדיוק — "שולם" — הופיעה בשני מראות שונים: מתג בסיכום,
   תיבת סימון ישנה בהיסטוריה. שני מראות לאותה פעולה נקראים כשתי פעולות.
   ============================================================================ */
.paid-row { position: relative; gap: var(--s2) !important; min-height: 44px; }
.paid-row input[type=checkbox] {
  appearance: none; -webkit-appearance: none;
  width: 42px !important; height: 24px !important; flex: none;
  border-radius: var(--r-pill); background: var(--border-strong);
  border: none; margin: 0; cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.paid-row input[type=checkbox]:checked { background: var(--turquoise-ink); }
.paid-row input[type=checkbox]:disabled { opacity: .5; cursor: default; }
.paid-row input[type=checkbox]:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* הידית — על ה-label, כי פסאודו-אלמנטים על <input> אינם נתמכים אחיד */
.paid-row::before {
  content: ""; position: absolute; inset-inline-start: 3px; top: 50%; margin-top: -9px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 1px 3px rgba(35, 58, 71, .35);
  pointer-events: none;
  transition: translate var(--dur-fast) var(--ease-out);
}
.paid-row:has(input:checked)::before {
  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");
}
.paid-row:has(input:disabled)::before { opacity: .5; }

/* 🔴 ו**גם ברשימת ההיסטוריה עצמה**, לא רק בתוך קבלה בודדת.
   נתנאל 3.09: "במסך הראשי בהיסטוריה אין מתג, רק כשנכנסים לקבלה."
   זו אותה פעולה בדיוק — לסמן שמישהו שילם — ואותו מראה. */
.history-person-label {
  position: relative; min-height: 44px;
  gap: var(--s2) !important;
  font-size: var(--t-sm); font-weight: var(--w-bold);
}
.history-person-label input[type=checkbox] {
  appearance: none; -webkit-appearance: none;
  width: 42px; height: 24px; flex: none;
  border-radius: var(--r-pill); background: var(--border-strong);
  border: none; margin: 0; cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.history-person-label input[type=checkbox]:checked { background: var(--turquoise-ink); }
.history-person-label input[type=checkbox]:disabled { opacity: .5; cursor: default; }
.history-person-label input[type=checkbox]:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.history-person-label::before {
  content: ""; position: absolute; inset-inline-start: 3px; top: 50%; margin-top: -9px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 1px 3px rgba(35, 58, 71, .35);
  pointer-events: none;
  transition: translate var(--dur-fast) var(--ease-out);
}
.history-person-label:has(input:checked)::before {
  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");
}
.history-person-label:has(input:disabled)::before { opacity: .5; }
@media (prefers-reduced-motion: reduce) {
  .history-person-label input[type=checkbox], .history-person-label::before { transition: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .paid-row input[type=checkbox], .paid-row::before { transition: none !important; }
}

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

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


/* ---------- חברים ---------- */
.fr-list { display: flex; flex-direction: column; gap: var(--s2); }
.fr-card {
  display: flex; align-items: center; gap: var(--s3);
  background: var(--surface); border-radius: var(--r-md);
  padding: var(--s3) var(--s4); box-shadow: var(--shadow-1);
}
.fr-ava {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: var(--w-black); font-size: var(--t-base);
}
.fr-mid { flex: 1 1 auto; min-width: 0; }
.fr-name { font-size: var(--t-base); font-weight: var(--w-bold); color: var(--text); overflow-wrap: anywhere; }
/* משפט, לא מספרים. הסכום הפתוח מודגש בתוך המשפט - כך הוא נקרא כחלק
   ממה שנאמר ולא כנתון מרחף. */
.fr-meta { font-size: var(--t-sm); color: var(--text-soft); margin-top: 2px; line-height: 1.45; }
.fr-meta b { color: var(--orange-ink); font-weight: var(--w-black); }
.fr-card.is-open .fr-ava { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--orange); }
.fr-x {
  flex: none; background: none; border: none; cursor: pointer; color: var(--text-soft);
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; position: relative;
}
.fr-x::after { content: ""; position: absolute; inset: -6px; }   /* אזור מגע 44 */
.fr-x svg { width: 16px; height: 16px; }
.fr-x:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* שורת פתיחה - משפט אחד, לא לוח מחוונים */
.tab-line {
  font-size: var(--t-sm); color: var(--text-soft);
  margin-bottom: var(--s4); line-height: 1.5;
}
.tab-line b { color: var(--text); font-weight: var(--w-black); }
.tl-open { color: var(--orange-ink); font-weight: var(--w-bold); }

/* ---------- היסטוריה ---------- */
.hx-card {
  background: var(--surface); border-radius: var(--r-md);
  padding: var(--s4); margin-bottom: var(--s3); box-shadow: var(--shadow-1);
  /* ⚠️ היה כאן פס צבע עבה בצד הכרטיס. הוק העיצוב סימן אותו, ובצדק -
     אבל הסיבה האמיתית חזקה יותר: **הדפוס הזה כבר בוטל בפאזל** בסבב
     קודם (`.c-item.mine::after` ו-`.s-row.settled::after` שניהם
     `display:none`). כלומר החזרתי משהו שנזנח בכוונה.
     ומעבר לזה הוא היה מיותר: התווית, פס ההתקדמות ושורת הפרצופים כבר
     אומרים את המצב, ושלושתם אומרים אותו טוב יותר. */
}
.hx-top { display: flex; align-items: flex-start; gap: var(--s3); }
.hx-id { flex: 1 1 auto; min-width: 0; }
.hx-name { font-size: var(--t-base); font-weight: var(--w-black); color: var(--text); overflow-wrap: anywhere; }
.hx-date { font-size: var(--t-xs); color: var(--text-soft); margin-top: 2px; }
.hx-sum {
  flex: none; font-size: var(--num-sm); font-weight: var(--w-black); color: var(--text);
  font-variant-numeric: var(--num-feat); letter-spacing: -.02em; line-height: 1;
}
.hx-sum span { font-size: var(--t-sm); font-weight: var(--w-bold); color: var(--text-soft); }

/* המשפט שאומר מה מצב החלוקה - במילים, עם שמות, כמו במסך הסיכום */
.hx-say {
  display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap;
  font-size: var(--t-sm); font-weight: var(--w-bold);
  margin-top: var(--s3);
}
.hx-say svg { width: 15px; height: 15px; flex: none; }
.hx-say b { font-variant-numeric: var(--num-feat); }
.hx-say.ok   { color: var(--turquoise-ink); }
.hx-say.wait { color: var(--text-soft); }
.hx-say.wait b { color: var(--orange-ink); font-weight: var(--w-black); }

.hx-track { height: 5px; background: var(--surface-sunk); border-radius: var(--r-pill); overflow: hidden; margin-top: var(--s2); }
.hx-fill {
  height: 100%; width: 100%; background: var(--orange); border-radius: var(--r-pill);
  transform-origin: right;   /* עברית - גדל מימין לשמאל */
  transition: transform var(--dur-slow) var(--ease-out), background var(--dur-base) var(--ease);
}
.hx-fill.is-done { background: var(--turquoise); }


.hx-acts { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s4); }
.hx-btn {
  min-height: var(--tap-min); padding: 0 var(--s4);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  border-radius: var(--r-md); cursor: pointer; font-family: var(--font);
  font-size: var(--t-sm); font-weight: var(--w-bold);
  background: none; border: 1.5px solid var(--border-strong); color: var(--text);
}
.hx-btn.primary { flex: 1 1 auto; background: var(--navy); border-color: var(--navy); color: var(--text-on-dark); }
.hx-btn.quiet { flex: none; border: none; color: var(--text-soft); padding: 0 var(--s2); }
.hx-btn svg { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease); }
.hx-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.hx-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.hx-btn:active { transform: translateY(1px); }

.hx-card .history-people-list { margin-top: var(--s3); }
@media (prefers-reduced-motion: reduce) {
  .hx-fill, .hx-btn svg, .hx-btn:active { transition: none !important; transform: none; }
}

/* ההסבר של הזיהוי לפער בקבלה - שורה משלו בתוך האזהרה, כדי שהוא ייקרא
   כמסקנה ולא כהמשך המשפט. */
.wb-note {
  display: block; margin-top: var(--s2);
  font-weight: var(--w-black); font-size: var(--t-sm);
}

/* קוד החדר - גלוי, לא מקופל. עד 6.09 הוא ישב בתוך <details> שכותרתו
   שאלה ("אין מצלמה?"), ומי שהיה צריך אותו לא ידע שהוא שם. */
.code-box {
  background: var(--surface-sunk); border-radius: var(--r-md);
  padding: var(--s3) var(--s4); margin-top: var(--s3); text-align: center;
}
.cb-label { font-size: var(--t-xs); color: var(--text-soft); }
.cb-code {
  font-size: var(--num-sm); font-weight: var(--w-black); color: var(--text);
  letter-spacing: .14em; margin: var(--s1) 0; direction: ltr;
  font-variant-numeric: var(--num-feat);
}
.cb-hint {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-size: var(--t-xs); color: var(--text-soft);
}
.cb-hint svg { width: 13px; height: 13px; }

/* קבלה מההיסטוריה - שלוש רמות: סה"כ, החלק שלי, ואז השאר */
.rcp-head {
  background: var(--navy); color: var(--text-on-dark);
  border-radius: var(--r-md); padding: var(--s4); text-align: center;
  margin-bottom: var(--s4);
}
.rcp-total-label { font-size: var(--t-xs); opacity: .75; }
.rcp-total {
  font-size: var(--num-md); font-weight: var(--w-black); line-height: 1.05;
  letter-spacing: -.02em; font-variant-numeric: var(--num-feat); margin-top: 2px;
}
.rcp-total span { font-size: var(--t-lg); opacity: .8; }
.rcp-mine {
  display: flex; align-items: baseline; justify-content: center; gap: var(--s2);
  margin-top: var(--s3); padding-top: var(--s3);
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: var(--t-sm); opacity: .9;
}
.rcp-mine b { font-size: var(--num-sm); font-weight: var(--w-black); font-variant-numeric: var(--num-feat); }
/* שאר החברים - קטן יותר, כי הם רקע ולא הנתון המרכזי */
.summary-card .summary-amount { font-size: var(--t-lg); }