/* ============================================================================
   assets/icr.css — גיליון העיצוב המשותף של ICR
   ============================================================================

   ── למה הוא קיים ─────────────────────────────────────────────────────────
   באתר אין גיליון סגנון משותף: כל עמוד מחזיק <style> משלו. התוצאה היא שכל
   כלל שנכון לכל האתר נכתב מחדש בכל קובץ בנפרד, ואז נשכח באחד מהם. הדוגמה
   שהובילה לקובץ הזה: הכלל שמונע זום אוטומטי בשדות ב-iOS נוסף חמש פעמים
   בנפרד (profile.php פעמיים, group_tiles.php, album.php, events.php,
   event.php) — ועדיין החמיץ את שדות ציר הזמן בעמוד הרכב.

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

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


/* ── שדות קלט: בלי זום אוטומטי בנייד ────────────────────────────────────────
   Safari ב-iOS מזים את המסך בכל פוקוס על שדה שגודל הגופן בו **קטן מ-16px**.
   זו התנהגות מובנית של המערכת ואי אפשר לכבות אותה — הדרך היחידה למנוע אותה
   היא שהגופן יהיה 16px ומעלה ברגע הפוקוס.

   **למה לא `user-scalable=no` ב-viewport:** זו הייתה ה"תשובה" הישנה, והיא
   שגויה משתי סיבות — iOS מתעלם ממנה מגרסה 10, והיא מבטלת גם את הזום היזום
   של המשתמש, שהוא צורך נגישות אמיתי. כאן הזום היזום נשאר עובד; רק הקפיצה
   האוטומטית נעצרת.

   **למה `!important`:** רוב השדות באתר מגדירים `font-size` **בסגנון מוטבע**
   על התגית עצמה (שדות ציר הזמן, למשל: `style="...font-size:13px"`). סגנון
   מוטבע גובר על גיליון, ולכן בלי `!important` הכלל הזה פשוט לא היה עושה
   כלום בדיוק בשדות שבגללם הוא נכתב.

   **`pointer:coarse` ולא `max-width`:** הבעיה היא של מכשיר מגע, לא של מסך
   צר. חלון דפדפן צר בדסקטופ אינו סובל ממנה, ואין סיבה להגדיל בו טקסט.

   הרשימה מחריגה פקדים שאינם הקלדה (תיבות סימון, בחירה, טווח, צבע, קובץ
   וכפתורים) — הגדלת הגופן בהם משנה את גודל הפקד עצמו בלי שום תועלת. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}


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

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

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

   `margin-inline-end` ולא `margin-left`: הכיוון נגזר מכיוון הכתיבה, ולכן
   אותו כלל נכון גם אם ייכנס אי-פעם טופס ב-LTR. בתוויות שהן `flex` עם
   `gap` המרווח מגיע מהמכולה ממילא, וההפרש בין השניים אינו נראה. */
.req-star {
  color: #8DC91A;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  margin-inline-end: 4px;
}

/* התג שיושב בכותרת קופסה ואומר שיש בה שדות חובה ("* חובה"). אותו ירוק,
   כי הוא מסביר את אותה כוכבית. */
.badge-req {
  font-size: 10px;
  background: rgba(141, 201, 26, 0.1);
  color: #8DC91A;
  border: 1px solid rgba(141, 201, 26, 0.2);
  border-radius: 4px;
  padding: 2px 7px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}