/* ============================================================================
   המעטפת — הרקע, ההדר והניווט שמשותפים לכל המסכים
   ============================================================================

   נכתב 2.09.2026. נטען אחרי styles.css ודורס את המעטפת הישנה.

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

   שלוש בעיות מדודות שהמעטפת הזו פותרת:
   1. הצ'רום אכל כ-40% מהמסך לפני שהתוכן התחיל
   2. הלוגו הופיע פעמיים באותו מסך — פעם בהדר ופעם בתוך הכרטיס
   3. "כרטיס בתוך כרטיס": הקבלה הייתה משטח, והתוכן בתוכה משטח נוסף

   כל ערך מגיע מ-tokens.css. אין צבע או מרווח מוקלד.
   ============================================================================ */

body {
  /* רקע שטוח וחם במקום נייר קראפט עם נקודות. --bg נבחר דווקא לא לבן טהור:
     הפלטה חמה, ולבן טהור נלחם בה — הכתום נקרא כזועק. */
  background: var(--bg) !important;
  color: var(--text);
  font-family: var(--font);
  padding: 0 !important;
  display: block !important;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}

.app {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 var(--s4) var(--s8);
}

/* ------------------------------------------------------------------ הדר ---
   פס עליון דק. הלוגו קטן, בלי סלוגן חוזר, ובלי מסגרת.
   הסלוגן מופיע רק במסך הפתיחה — שם הוא עושה עבודה. בכל מסך אחר הוא
   רעש שגוזל גובה, וזו הייתה בעיה 1. */
.brand {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) 0 var(--s3);
  margin-bottom: 0 !important;
  text-align: start !important;
  position: static !important;
}
.brand .logo {
  font-family: var(--font) !important;
  font-weight: var(--w-black) !important;
  font-size: var(--t-xl) !important;
  letter-spacing: -0.01em !important;
  color: var(--text) !important;
  display: inline-flex; align-items: center; gap: var(--s2);
  direction: ltr;
}
.brand .logo svg { width: 24px; height: 24px; }

.brand .logo span span { color: var(--orange) !important; }

.brand .tag {
  display: none;  /* מוצג רק במסך הפתיחה — ראה הכלל למטה */
}
body[data-screen="landing"] .brand .tag {
  display: block;
  font-size: var(--t-sm) !important;
  color: var(--text-soft) !important;
  margin: 0 !important; letter-spacing: 0 !important;
}

.settings-gear-btn {
  position: static !important;
  width: var(--tap-min) !important; height: var(--tap-min) !important;
  margin: calc(var(--s2) * -1) 0;
  background: none !important; border: none !important;
  color: var(--text-soft) !important;
  font-size: var(--t-xl) !important;
  border-radius: 50% !important;
}
.settings-gear-btn:hover, .settings-gear-btn:active { background: rgba(35,58,71,.07) !important; color: var(--text) !important; }
.settings-gear-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------------------------------------------------------------- ניווט ---
   בקר מקטעים במקום ארבע לשוניות בקופסה. הלשונית הפעילה נושאת את הנייבי,
   והשאר שקופות — כך העין מוצאת את המיקום בלי שהניווט יתחרה בתוכן. */
.tabbar {
  display: flex;
  background: var(--surface-sunk) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-pill) !important;
  padding: var(--s1) !important;
  gap: var(--s1) !important;
  margin: 0 0 var(--s5) !important;
}
/* ⚠️ הלשוניות הן <button> מאז 6.09 (נגישות מקלדת — ראה renderTabbar).
   ארבע השורות הראשונות כאן מנטרלות את סגנונות ברירת המחדל של הדפדפן
   לכפתור. בלעדיהן הטקסט עובר לגופן המערכת ומקבל מסגרת ורקע אפורים —
   כלומר המראה משתנה, וזה בדיוק מה שאסור היה לקרות. */
.tabbar .tab {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: none; margin: 0;
  font-family: inherit; letter-spacing: inherit;
  flex: 1; text-align: center;
  min-height: 40px; display: flex; align-items: center; justify-content: center;
  padding: 0 var(--s2) !important;
  font-size: var(--t-sm) !important; font-weight: var(--w-bold) !important;
  color: var(--text-soft);
  border-radius: var(--r-pill) !important;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tabbar .tab.active {
  background: var(--navy) !important;
  color: var(--text-on-dark) !important;
}

/* --------------------------------------------------------------- התוכן ---
   הקבלה הייתה משטח שהחזיק משטחים. עכשיו התוכן יושב ישירות על הרקע,
   והכרטיסים בתוכו הם המשטח היחיד. זו בעיה 3, והפתרון גם מחזיר רוחב. */
.receipt {
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
/* הקצוות ה"קרועים" של הקבלה — המטאפורה שיצאה */
.receipt::before, .receipt::after { display: none !important; }
.receipt-top-tear { display: none !important; }

/* מחוון השלב התחתון. כל מסך שעוצב מחדש נושא את השלב בהדר שלו, ולכן
   כאן הוא כפילות. הוא נשאר למסכים שטרם עוצבו, ו-render.js מרוקן אותו
   עבור אלה שכן. */
.step-hint {
  font-size: var(--t-xs) !important;
  color: var(--text-soft) !important;
  text-align: center;
  margin-top: var(--s5) !important;
}
.step-hint:empty { display: none; }

/* ----------------------------------------------------------- כותרות מסך ---
   הסריפי יוצא. הוא היה חלק ממטאפורת הקבלה ונקרא כעתיק. */
.section-title {
  font-family: var(--font) !important;
  font-weight: var(--w-black) !important;
  font-size: var(--t-xl) !important;
  color: var(--text);
  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;
}

/* ---------------------------------------------------------- דו-שיח אישור --- */
.confirm-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-3) !important;
  padding: var(--s6) var(--s5) !important;
}
.confirm-card .confirm-msg { font-size: var(--t-base) !important; color: var(--text) !important; }
.confirm-backdrop { background: rgba(35,58,71,0.5) !important; }

/* ======================================================================
   הלשוניות — רק בבית
   ======================================================================
   באמצע חלוקה הן סכנה ולא עזרה: לחיצה בטעות על "היסטוריה" מאבדת את
   המקום, ולמשתתף שנכנס מקישור שתיים מהן ריקות בכלל. מסך שיש בו משימה
   אחת מציג דרך אחת קדימה. */
.tabbar { display: none !important; }
body:not([data-screen="landing"]) .tabbar { margin-top: var(--s4) !important; }
body[data-screen="landing"] .tabbar,
body[data-screen="friends"] .tabbar,
body[data-screen="history"] .tabbar,
body[data-screen="help"]    .tabbar,
body[data-screen="settings"] .tabbar { display: flex !important; }

/* ======================================================================
   מסכי משימה — הדר אפליקציה אחד, מקצה לקצה
   ======================================================================
   הבעיה שזה פותר: הכול נראה כמו כרטיסים מודבקים על רקע, עם שטח מת
   ביניהם. זה דפוס ישן. הפתרון הוא לא עוד צבע — אלא להפסיק לרחף:
   שורת המותג וההדר של המסך מתאחדים לגוש נייבי אחד שנוגע בקצוות המסך,
   כמו הדר של אפליקציה אמיתית ולא ככרטיס שמונח על משטח. */
/* כל המסכים חוץ ממסך הפתיחה. שם הלוגו הוא הגיבור ואין הדר מתחתיו. */
body:not([data-screen="landing"]) .brand {
  background: var(--navy);
  margin: 0 calc(var(--s4) * -1);
  padding: var(--s3) var(--s4) var(--s2);
}
/* הלוגו והגלגל יושבים עכשיו על נייבי — הצבעים חייבים להתהפך, אחרת
   החלק הכהה של הלוגו נעלם לתוך הרקע. זה בדיוק מה שקרה 2.09: נראתה רק
   המילה "zel" הכתומה, כי "Pa" והאייקון היו נייבי על נייבי. */
body:not([data-screen="landing"]) .brand .logo { color: var(--text-on-dark) !important; }

body:not([data-screen="landing"]) .brand .logo span span { color: var(--orange) !important; }
body:not([data-screen="landing"]) .settings-gear-btn { color: rgba(253,250,246,.75) !important; }
body:not([data-screen="landing"]) .settings-gear-btn:hover,
body:not([data-screen="landing"]) .settings-gear-btn:active { background: rgba(253,250,246,.12) !important; color: #fff !important; }

/* ======================================================================
   ההדר
   ======================================================================
   ⚠️ ב-2.09 הורדתי כאן את הלוגו ממסכי המשימה בניסיון לפתור צפיפות.
   **נתנאל לא אישר את זה ופסל אותו** — "לא אמרתי לך להוריד את הלוגו
   משם ולצמצם את המלל". הוחזר.

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

/* מסך הפתיחה — הלוגו במרכז, לא בפינה. הוא הרושם הראשון, וזה המקום
   היחיד שבו הוא הגיבור. */
body[data-screen="landing"] .brand {
  flex-direction: column; align-items: center; gap: var(--s1);
  position: relative;
  padding-top: var(--s5) !important;
}
body[data-screen="landing"] .brand .settings-gear-btn {
  position: absolute !important; top: var(--s3); inset-inline-end: 0;
}

/* ------------------------------------------------------------------ הדר ---
   הלוגו במרכז בכל מסך, וגלגל השיניים צף בצד. נתנאל ביקש 2.09.
   ⚠️ הגלגל ממוקם מוחלט ולא בתוך flex — אחרת הוא "דוחף" את הלוגו מהמרכז
   האמיתי, וזה נראה כמעט-מרכז, שגרוע ממרכז ברור. */
.brand {
  position: relative !important;
  justify-content: center !important;
}
.brand .logo { margin: 0 auto; }
.brand .settings-gear-btn {
  position: absolute !important;
  inset-inline-end: 0; top: 50%; transform: translateY(-50%);
}
body[data-screen="landing"] .brand .settings-gear-btn { top: var(--s3); transform: none; }

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

   הפתרון: הטאב-בר עצמו נכנס לתוך האזור הנייבי בלשוניות. הכול הופך
   לגוש אחד — מותג, ניווט וכותרת — והתוכן מתחיל אחריו. */
body[data-screen="friends"] .tabbar,
body[data-screen="history"] .tabbar,
body[data-screen="help"] .tabbar,
body[data-screen="settings"] .tabbar {
  /* הרצועה עצמה נייבי — לא שכבה שקופה מעל הקרם. הניסיון עם ::before
     ו-z-index:-1 נכשל כי הוא נופל מאחורי הרקע של ההורה. */
  background: var(--navy) !important;
  border: none !important;
  margin: 0 calc(var(--s4) * -1) 0 !important;
  padding: var(--s1) var(--s4) !important;
  border-radius: 0 !important;
}
body[data-screen="friends"] .tabbar .tab,
body[data-screen="history"] .tabbar .tab,
body[data-screen="help"] .tabbar .tab,
body[data-screen="settings"] .tabbar .tab { color: rgba(253,250,246,.6); }
body[data-screen="friends"] .tabbar .tab.active,
body[data-screen="history"] .tabbar .tab.active,
body[data-screen="help"] .tabbar .tab.active,
body[data-screen="settings"] .tabbar .tab.active {
  background: var(--orange-cta) !important;
  color: var(--on-orange) !important;
}
/* הרצועה הנייבית נמשכת מאחורי הטאב-בר עד לתחתית ההדר */
body[data-screen="friends"] .brand,
body[data-screen="history"] .brand,
body[data-screen="help"] .brand,
body[data-screen="settings"] .brand { padding-bottom: var(--s2) !important; }


/* הלשונית הפעילה היא הכותרת. פס נוסף עם אותו שם הוא כפילות —
   בדיוק מה שנתנאל תיאר כ"כותרת משנית שלא מתמזגת".
   הגוש הנייבי נסגר על הטאב-בר עצמו. */
body[data-screen="friends"] .tabbar,
body[data-screen="history"] .tabbar,
body[data-screen="help"] .tabbar,
body[data-screen="settings"] .tabbar {
  border-radius: 0 0 var(--r-lg) var(--r-lg) !important;
  padding-bottom: var(--s3) !important;
  margin-bottom: var(--s5) !important;
}


/* במסכים שיש בהם פס פעולות דביק, הריפוד התחתון של המעטפת הוא שטח מת:
   הפס עצמו כבר נושא ריפוד ואת האזור הבטוח של המכשיר. 40px נוספים מתחתיו
   נראים כמו חור בתחתית העמוד כשגוללים עד הסוף. */
body[data-screen="claim"] .app,
body[data-screen="summary"] .app,
body[data-screen="guestDone"] .app { padding-bottom: var(--s4); }

/* מסך הבית מיושר למעלה — הכותרת היא הדבר הראשון שנקרא, ומרכוז
   אנכי דחף אותה לאמצע והשאיר חלל מת מתחת ללשוניות. */
body[data-hero="1"] #screen {
  justify-content: flex-start !important;
  padding-top: var(--s6) !important;
}