/* torim — ערכת העיצוב. **מקור אחד לדף הציבורי ולפאנל.**
 *
 * ⚠️ **אסור לכתוב צבע, מידה או פונט מחוץ לקובץ הזה.** ערך שנכתב ישירות
 *    בקומפוננטה הוא הערך שיישכח כשמשנים את הערכה, והוא זה שייראה שבור.
 *
 * ⚠️ **אין כאן דומיין חיצוני ולא יהיה.** חוק ברזל 10 — יש טסט שסורק.
 *
 * ═══ למי זה מעוצב ═══════════════════════════════════════════════════
 *
 * ספר שעומד ליד הכיסא עם מכונת תספורת ביד אחת וטלפון בשנייה.
 * קוסמטיקאית עם כפפות. מעסה בחדר מוחשך בין טיפולים.
 *
 * מכאן נגזר הכל:
 *
 * ‎★ **יעד מגע 48px מינימום.** אצבע אינה סמן עכבר, ואצבע רטובה או
 *   בכפפה גרועה עוד יותר. כפתור של 32px הוא כפתור שמחטיאים.
 * ‎★ **מובייל ראשון, ולא "מותאם למובייל".** רוב ההזמנות מגיעות מטלפון,
 *   ובעל המקצוע עצמו כמעט לא פותח מחשב באמצע יום עבודה.
 * ‎★ **טיפוגרפיה גדולה.** 17px בסיס ולא 14: קריאה בהצצה, בתאורה גרועה.
 * ‎★ **הכי חשוב — הכי גדול.** השעה היא המידע. השם אחריה. השאר קטן.
 *
 * ═══ "הדף מודפס, לא מואר" ═══════════════════════════════════════════
 *
 * אין ``box-shadow``, אין ``blur`` ואין זוהר באף גיליון — יש טסט.
 * **עומק בא מקצה נייר, מקו ומרווח.** צל הוא חיקוי של אור, ומסך שמחקה
 * אור נראה כמו במה. זה לא מונע מהמערכת להיראות כמו אפליקציה: מה
 * שמייצר את התחושה הוא רדיוס, מרווח נדיב, ומשקל טיפוגרפי — לא צללים.
 */

/* ═══ פונטים — מקומיים, וריאביליים ══════════════════════════════════
 *
 * ‎Heebo, ולא Rubik, וזו החלטה ולא הרגל: הספרות של Heebo רוחב-אחיד
 * מלידה, ואלה של Rubik פרופורציונליות ותלויות בפיצ'ר ``tnum`` שקיים
 * רק בתת-הקבוצה הלטינית — פיצ'ר שנעדר נכשל **בשקט**. במערכת שכל מסך
 * בה הוא טור של שעות, ספרות ברוחב משתנה גורמות לעמודה לרקוד.
 *
 * ‎U+20AA (₪) בתת-הקבוצה העברית. בלעדיו כל מחיר מוצג בפונט חלופי.
 */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/heebo-hebrew.de80852899c5.woff2") format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/heebo-latin.480b1d24f2aa.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  /* ═══ צבע ═══════════════════════════════════════════════════════
   * כל צמד טקסט/רקע נמדד בטסט ש**גוזר** את הצמדים מה-CSS — לא מרשימה
   * שנכתבה ביד. רשימה ידנית מודדת נכון את מה שכתוב בה, ומה שלא נרשם
   * בה לא נמדד. הגזירה כבר מצאה כאן שני כשלים.
   */
  /* ═══ הפלטה מגיעה מהריפו של המקור ═══════════════════════════════
   * ‎``theme-tokens.css`` שם: ‎--brand-primary #0F4C81, ‎--brand-secondary
   * ‎#19B4B4, ‎--brand-bg #F4F8FB, ‎--text-primary #222, ‎--text-secondary
   * ‎#666, ‎--border-subtle #E0E0E0. הועתקו כפי שהם, עם שני תיקונים
   * ‎שמסומנים למטה — שניהם בגלל ניגודיות שנמדדת בטסט.
   */
  --paper:      #F4F8FB;   /* --brand-bg מהמקור */
  --surface:    #FFFFFF;
  --surface-2:  #EAF0F6;   /* שכבה שנייה: רצועות, מצב לא-פעיל */

  /* ⚠️ ‎--text-secondary #666 במקור נותן 5.74:1 על לבן ו-**5.32:1**
   * ‎על ‎--paper — עובר. ‎--text-muted #999 נותן **2.85:1** ונכשל, ולכן
   * ‎הוא לא הועתק: אין כאן טוקן שמותר לכתוב בו טקסט ואי אפשר לקרוא. */
  --ink:        #222222;   /* --text-primary מהמקור */
  --ink-soft:   #5A5A5A;   /* מ-#666 הוקטן קלות: 6.6:1 גם על --paper */
  /* ‎#666666 — ‎--text-secondary של המקור בדיוק. הערך הקודם (#6B6B6B)
   * ‎נתן **4.50:1** על ‎--accent-soft, כלומר בדיוק על הגבול ומתחתיו
   * ‎אחרי עיגול. טסט שנופל על 4.4999 עשה את עבודתו. */
  --ink-faint:  #666666;   /* הרצפה. **לא** #999 — ראה למעלה */

  --rule:       #D2D8DE;   /* קצה כרטיס. הועלה מ-#E0E0E0 (1.32:1) */
  --rule-strong:#C7CDD4;   /* קו מפריד לא-אינטראקטיבי */

  /* ☠️ **גבול של פקד אינו קו מפריד, והסף שלו כפול.**
   *
   *   ‎``--rule-strong`` מדד **1.60:1** על לבן, וממנו צוירו כל שדות
   *   הקלט, כפתורי ``--quiet``, וכל משבצת שעה בדף ההזמנות הציבורי.
   *   ‎WCAG 1.4.11 דורש 3:1 לגבול של פקד — כלומר כל טופס במוצר נכשל.
   *
   *   ולמה זה חמק: טסט הניגודיות גוזר צמדי **טקסט על רקע**. גבול אינו
   *   טקסט, ולכן הוא לא נמדד — "בדיקה עיוורת" מהתקן, בדיוק.
   *
   *   ‎#8A929E נותן 3.05:1 על לבן. אין צל, אין זוהר — קו כהה יותר. */
  --rule-control:#8A929E;

  --accent:     #0F4C81;   /* --brand-primary. ★ עליו — **לבן, תמיד** */
  --accent-ink: #FFFFFF;
  --accent-soft:#E4EDF5;
  --accent-dark:#0A3A5D;   /* --brand-primary-dark מהמקור */

  /* ⚠️ ‎הטורקיז ‎#19B4B4 (‎--brand-secondary) הוא **2.36:1 על לבן**.
   * ‎במקור הוא משמש גם לטקסט ולגרדיאנטים. כאן הוא מותר כ**קרקע**
   * ‎ולקווים בלבד, ולעולם לא כצבע של מילה — יש טסט שגוזר את הצמדים
   * ‎מה-CSS ויתפוס כל שימוש כזה. הגוון הכהה הוא לטקסט. */
  --teal:       #19B4B4;   /* קרקע וקו בלבד */
  --teal-ink:   #0E6E6E;   /* 4.9:1 על לבן — זה מה שמותר לכתוב בו */
  --teal-soft:  #E3F6F6;

  /* דף הנחיתה — ערכת ה-Navy Trust מהמקור */
  --navy-deep:  #0C1526;
  --navy-mid:   #1B3557;
  /* ★ טקסט **על** הנייבי. טוקנים ולא ליטרלים, כי צבע שאינו טוקן אינו
   * נמדד באף טסט — וטסט הניגודיות הגזור תפס בדיוק את זה כשדף הנחיתה
   * נכתב עם ‎#FFFFFF ו-#C9D4E2 ישירות בקומפוננטות. */
  --on-navy:      #FFFFFF;   /* 17.9:1 על --navy-deep */
  --on-navy-soft: #C9D4E2;   /* 11.6:1 על --navy-deep */

  /* ★★ הזהב — **מותר כטקסט על נייבי בלבד.**
   *
   * במקור הזהב הוא ``hsl(42 65% 58%)`` ≈ ‎#D6B15C, והוא מופיע כמילה
   * בכותרת על רקע בהיר. שם זה **2.2:1** — כלומר מילה שחלק מהקוראים
   * פשוט לא רואים, ובדיוק במקום שנועד למשוך את העין.
   *
   * הפתרון אינו לוותר על הזהב אלא להעביר אותו לרקע שעליו הוא עובד:
   * על ‎--navy-deep הוא **11.4:1**. שם הוא נשאר בדיוק כמו במקור.
   * על נייר משתמשים ב-``--gold-ink`` הכהה, או בקו.
   */
  --gold:       #D6B15C;   /* על נייבי בלבד */
  /* ★ שכבות שקופות **על** הנייבי — ריחוף, מסגרת כפתור, וקו הזהב הדק.
   *   טוקנים ולא ליטרלים: צבע שנכתב בקומפוננטה אינו נמדד באף טסט, וזה
   *   בדיוק מה שקרה בדף הנחיתה כשהוא נכתב עם #FFFFFF ישירות. */
  --on-navy-hover: rgba(255, 255, 255, 0.10);
  --on-navy-edge:  rgba(255, 255, 255, 0.35);
  --gold-hair:     rgba(214, 177, 92, 0.35);
  --gold-ink:   #7A5F28;   /* על נייר: 5.9:1 */

  /* מצבים. ★ **אסורים כקישוט** — בעל מקצוע שרואה את גוון "מאושר" על
   * כפתור "המשך" מאבד את ההבחנה היחידה שהוא צריך במבט חטוף. */
  --ok:         #14532D;
  --ok-bg:      #E7F2EA;
  --warn:       #7A4A11;
  --warn-bg:    #FBF0DF;
  --danger:     #7F1D1D;
  --danger-bg:  #FBEAEA;
  --danger-ink: #FFFFFF;

  /* ═══ מידה ══════════════════════════════════════════════════════ */
  /* ═══ סולם מרווחים ════════════════════════════════════════════════
   * ★ **המקצב הוא מה שהופך דף לנוח.** קודם היה מרווח אחד (``--gap``)
   *   בין כל שני דברים, ולכן כותרת מהסעיף שלה הייתה רחוקה בדיוק כמו
   *   סעיף מסעיף — והעין לא ידעה מה שייך למה. קיבוץ נעשה במרחק, ולא
   *   במסגרות: שני דברים קרובים נקראים כיחידה, בלי לצייר סביבם קופסה.
   *
   * ‎``--gap`` ו-``--gap-lg`` נשארים כשמות נרדפים — יש להם 900 שימושים
   * בקוד, והחלפתם בבת אחת היא עריכה שאי אפשר לבדוק. */
  --s1: 0.25rem;   /* בתוך רכיב: תווית לערך שלה */
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;      /* בין רכיבים באותו סעיף */
  --s5: 1.5rem;
  --s6: 2rem;      /* בין סעיפים */
  --s7: 3rem;      /* בין אזורים */

  --step: var(--s2);
  --gap: var(--s4);
  --gap-lg: var(--s5);
  --radius: 14px;          /* נדיב: זה מה שמייצר "אפליקציה" בלי צללים */
  --radius-sm: 10px;
  --radius-pill: 999px;
  --page-max: 60rem;
  --reading-max: 30rem;
  /* ★ הפאנל רחב יותר מדף קריאה, ובכוונה. ‎60rem הספיקו לטקסט וחנקו
   *   טבלה של שמונה עמודות ותפריט של שנים-עשר פריטים: שניהם נשברו
   *   לשתי שורות, ואז אי אפשר לסרוק אף אחד מהם בעין. */
  --app-max: 84rem;
  --rail: 15rem;   /* רוחב סרגל הצד בדסקטופ */

  /* ★ יעד המגע. **48px, ולא פחות** — ראה ההסבר בראש הקובץ. */
  --touch: 48px;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.5rem;
  /* ★ בין ``xl`` ל-``2xl``, ובכוונה: מספר באריח צריך להיות הדבר הגדול
   *   **באריח**, ולא להתחרות בכותרת המסך. באותו גודל כמו ה-h1 שני
   *   הדברים מושכים את העין באותה עוצמה, ואז אין לדף נקודת כניסה. */
  --text-num: 1.75rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;

  --font: 'Heebo', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.6;
  /* ספרות ברוחב אחיד — שעות בטור לא רוקדות. */
  font-variant-numeric: tabular-nums;
  /* ‎iPhone עם חריץ: התוכן לא נחתך מתחת לסרגל הבית. */
  padding-bottom: env(safe-area-inset-bottom);
}

h1, h2, h3 { line-height: 1.25; font-weight: 700; margin: 0 0 var(--step); }
h1 { font-size: var(--text-xl); letter-spacing: -0.015em; }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-base); }

@media (min-width: 48rem) {
  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
}

a { color: var(--accent); text-underline-offset: 3px; }

/* ═══ מיקוד — נראה, ולא רק קיים ══════════════════════════════════ */
/* ★★ **טבעת המיקוד — טוקן שכל אזור מציב על עצמו.**
 *
 * ☠️ הגרסה הקודמת של התיקון הזה הייתה **רשימת סלקטורים**:
 *    ‎``.topbar, .hero, .cta-band, .foot, .app-bar, .rail``. היא
 *    תיקנה שישה אזורים והשאירה שלושה — ובהם ``.bottom-nav``, שהוא
 *    **הניווט הראשי במובייל**, ב-2.06:1.
 *
 *    ⚠️ וזו אותה משפחה בדיוק כמו רשימת המודלים ב-``purge.py`` שממנה
 *       נשמט ``Staff``: **רשימה ידנית מתיישנת בשקט.** האזור הכהה
 *       העשירי ייכתב מחר, ואיש לא יזכור לרשום אותו כאן.
 *
 * ★ לכן הכיוון התהפך: הטבעת קוראת ``--focus-ring``, וכל רכיב שצובע
 *   את עצמו בנייבי מציב את הטוקן **באותו כלל** שבו הוא מציב את
 *   ‎``background``. שכחה נראית מיד — הכלל נכתב במקום אחד.
 */
:root { --focus-ring: var(--accent); }   /* על נייר */

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

.page { max-width: var(--page-max); margin: 0 auto; padding: var(--gap); }
.narrow { max-width: var(--reading-max); }
.stack > * + * { margin-top: var(--gap); }
/* ★ מקצב הסעיפים. ``--s6`` בין סעיפים מול ``--s4`` בתוכם הוא ההפרש
 *   שבזכותו העין מקבצת לבד, בלי שנצייר מסגרת סביב כל דבר. */
.stack--sections > * + * { margin-top: var(--s6); }
.stack--tight > * + * { margin-top: var(--s2); }
.row { display: flex; flex-wrap: wrap; gap: var(--step); align-items: center; }
.spread { display: flex; flex-wrap: wrap; gap: var(--gap); justify-content: space-between;
          align-items: center; }
.grow { flex: 1; }

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s5);
}
.card--flush { padding: 0; overflow: hidden; }
/* ‎``--plain`` הוא סעיף בלי קופסה. **לא כל דבר צריך מסגרת** — כשכל
 * סעיף בדף עטוף בכרטיס לבן זהה, אף אחד מהם אינו בולט, והדף נראה כמו
 * רשימת קבלות. */
.card--plain { background: transparent; border: 0; padding: 0; }

/* כותרת בתוך כרטיס — צמודה לתוכן שלה, ורחוקה ממה שמעליה. */
.card > h2:first-child,
.card > h3:first-child { margin-top: 0; margin-bottom: var(--s3); }
.card > :last-child { margin-bottom: 0; }

/* ═══ כותרת סעיף — הטיפוגרפיה שעושה את ההיררכיה ══════════════════
 * ★ כותרת סעיף אינה h2 רגיל: היא קטנה, במרווח אותיות, ובצבע רך.
 *   כותרת גדולה לכל סעיף גורמת לכל הסעיפים לצעוק באותו קול, ואז
 *   הכותרת הראשית של המסך כבר לא מובילה כלום. */
.eyebrow {
  font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.06em;
  color: var(--ink-soft); text-transform: none; margin: 0 0 var(--s2);
}

.muted { color: var(--ink-soft); }
.tiny { font-size: var(--text-sm); color: var(--ink-soft); }
.micro { font-size: var(--text-xs); color: var(--ink-faint); }
.strong { font-weight: 700; }
.nowrap { white-space: nowrap; }

/* ═══ כפתורים ═══════════════════════════════════════════════════
 * ‎``min-height: var(--touch)`` על **כל** כפתור. חריג יחיד: ``--small``,
 * שמשמש רק בשורות טבלה בדסקטופ. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: var(--touch); padding: 0.6rem 1.25rem;
  font: inherit; font-weight: 700; line-height: 1.2;
  border-radius: var(--radius-pill); border: 1.5px solid var(--accent);
  background: var(--accent); color: var(--accent-ink);
  text-decoration: none; cursor: pointer; text-align: center;
}
.btn:hover { background: #0C1F3A; }
.btn--block { display: flex; width: 100%; }
.btn--ghost { background: transparent; color: var(--accent); }
.btn--ghost:hover { background: var(--accent-soft); }
.btn--quiet {
  background: var(--surface); color: var(--ink-soft); border-color: var(--rule-control);
}
.btn--quiet:hover { background: var(--surface-2); color: var(--ink); }
.btn--danger { background: var(--danger); border-color: var(--danger); color: var(--danger-ink); }
.btn--small { min-height: 40px; padding: 0.35rem 0.85rem; font-size: var(--text-sm); }
.btn[disabled], .btn--disabled { opacity: 0.5; cursor: not-allowed; }

/* ═══ טפסים ═════════════════════════════════════════════════════ */
label { display: block; font-weight: 700; font-size: var(--text-sm); margin-bottom: 0.3rem; }
.field {
  width: 100%; font: inherit; min-height: var(--touch);
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--rule-control); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
}
/* ‎16px מינימום במובייל: מתחת לזה ספארי **מזום את כל הדף** בפוקוס,
 * והמשתמש נשאר עם דף מוגדל שאינו יודע לצאת ממנו. */
@media (max-width: 47.99rem) { .field { font-size: 1rem; } }
/* ‎``border-color`` בלבד: הכלל "אין אפקטי אור" חל גם על מצב פוקוס,
 * וטסט חוק ברזל 11 סורק את המילה עצמה. המיקוד הנראה מגיע מ-
 * ‎``:focus-visible`` שמצייר outline. */
.field:focus { border-color: var(--accent); }
.form-row + .form-row { margin-top: var(--gap); }
.help { font-size: var(--text-xs); color: var(--ink-faint); margin: 0.25rem 0 0; }
.errorlist {
  list-style: none; margin: 0.4rem 0 0; padding: 0.6rem 0.8rem;
  background: var(--danger-bg); color: var(--danger);
  border-inline-start: 4px solid var(--danger); border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: 600;
}

/* ═══ הודעות ════════════════════════════════════════════════════ */
.notice {
  padding: 0.8rem 1rem; border-radius: var(--radius-sm);
  border-inline-start: 4px solid var(--accent); background: var(--accent-soft);
  font-size: var(--text-sm);
}
.notice--success, .notice--ok { background: var(--ok-bg); border-color: var(--ok); }
.notice--warning, .notice--warn { background: var(--warn-bg); border-color: var(--warn); }
.notice--error { background: var(--danger-bg); border-color: var(--danger); }

/* ═══ תגים ══════════════════════════════════════════════════════ */
.tag {
  display: inline-block; font-size: var(--text-xs); font-weight: 700;
  padding: 0.15rem 0.6rem; border-radius: var(--radius-pill); border: 1px solid currentColor;
  white-space: nowrap;
}
.tag--ok { color: var(--ok); background: var(--ok-bg); }
.tag--warn { color: var(--warn); background: var(--warn-bg); }
.tag--danger { color: var(--danger); background: var(--danger-bg); }
.tag--quiet { color: var(--ink-soft); background: var(--surface-2); }

/* ═══ עיגול ראשי-תיבות ══════════════════════════════════════════
 * במקום תמונת פרופיל שאין. ריבוע אפור נראה כמו תקלה; אות נראית
 * כמו החלטה. */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; flex: 0 0 auto;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  font-weight: 800; font-size: var(--text-base);
}

/* ═══ טבלאות — דסקטופ ═══════════════════════════════════════════
 * ‎``overflow-x`` על העוטף בלבד: הדף עצמו לעולם אינו גולש לרוחב. */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: start; padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--rule); }
th { font-size: var(--text-sm); color: var(--ink-soft); font-weight: 700; }

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--gap-lg) 0; }
img { max-width: 100%; height: auto; }

/* ═══ מצב ריק — מלמד, לא מתנצל ══════════════════════════════════
 * ★ **מצב ריק אינו שורה בטבלה.** טבלה עם שמונה כותרות עמודה ושורה
 *   אחת שאומרת "אין נתונים" מציגה שלד של משהו שאינו קיים, ומי שרואה
 *   אותה חושב שמשהו נכשל בטעינה. המסך הריק צריך לומר מה חסר, למה,
 *   ומה הפעולה הבאה — ואז הוא מלמד במקום להתנצל. */
.empty {
  border: 2px dashed var(--rule-strong); border-radius: var(--radius);
  padding: var(--s7) var(--s5); text-align: center; color: var(--ink-soft);
}
.empty__title { font-weight: 700; color: var(--ink); font-size: var(--text-lg);
                margin-bottom: var(--s1); }
.empty__body { max-width: 28rem; margin-inline: auto; }
.empty > * + * { margin-top: var(--s3); }

.skip-link {
  position: absolute; inset-inline-start: -9999px;
  /* ★ "דילוג לתוכן" הוא הקישור **הראשון** שמשתמש מקלדת פוגש, והוא
   *   נראה רק במיקוד. טבעת בלתי-נראית עליו היא קישור שלא קיים. */
  --focus-ring: var(--paper);
  background: var(--accent); color: var(--accent-ink); padding: 0.7rem 1rem;
}
.skip-link:focus { inset-inline-start: 0; top: 0; z-index: 50; }

/* ═══ אייקונים ══════════════════════════════════════════════════════
 * ‎``currentColor`` יורש מהטקסט שלידו, ולכן אותו אייקון עובד על נייבי
 * ועל נייר בלי שני עותקים. ``vertical-align`` מיישר אותו לקו הבסיס
 * של המילה — בלעדיו הוא "צף" חצי שורה מעליה. */
.icon { display: inline-block; vertical-align: -0.18em; flex: 0 0 auto; }