/* שבצק בטלפון — לפי הסקיל mobile-app-ui-design (בקשת גיא: "חשוב לי שיהיה הכי מותאם לטלפון").
   רק ב-≤640px; במחשב שום דבר לא משתנה. נבדק ב-tests/mobile.js (אזור לחיצה ≥44, 4 גדלי כתב).
   1. סולם של 4 גדלי כתב: 24 כותרת · 18 כותרת חלק · 16 גוף ושדות · 13 משני
   2. כל כפתור/שדה/תג ≥ 44px
   3. הפעולה הראשית באזור האגודל — פס קבוע בתחתית המסך
   4. ריווח על רשת של 8 */
@media (max-width: 640px) {

  /* ---------- 1. סולם הכתב ---------- */
  /* ברירת מחדל: הכול 16 (גם טקסט עם גודל קשיח בקוד). :where = בלי משקל, כדי שהכללים למטה יגברו */
  :where(main, .topbar, .sidenav, .modal-bg, .um-pop, .mm-pop, .toast, .s-top, .s-wrap) :where(*:not(svg, svg *)) { font-size: 16px !important; }
  .toast { font-size: 16px !important; }
  /* 24 — כותרת המסך ומספרים גדולים */
  .bar h1, .s-wrap > h1, .dstrip b { font-size: 24px !important; }
  /* 18 — כותרת של חלק */
  h2, h3, h4, h5, .card2 h3, .box h3, .modal-h h3, .dc-top b, .s-card h2, .s-head h2, .d b, .k, .s-step b, .s-top b, .tb-brand, .week b { font-size: 18px !important; }
  /* 13 — משני: הסברים, תוויות, שעות, צ'יפים, מונים */
  .dim, .dim *, .sub2, small, label.f, .mlabel, .mlabel *, .h span, .d span, .from, .t8, .chip, .pill, .state, .p,
  .phwarn, .glwarn, .why, .sec, .t8c, .t8c *, .dc-row small, .dstrip span, .um-head span, .um-org, .crow.head span, .rrow.head span,
  .howto-ex span, .bars span, .bars span *, .mini, .mini *, .s-hint, .s-how, .s-wk, .s-lbl, .s-steps > div > span,
  .s-cell span, .s-cell small, .s-cell i, .dd, .hh, .snav .n, .n, .al .dim, .s-msg, .cellhead, .cellhead *, .tl .sub2 { font-size: 13px !important; }

  /* ---------- 2. אזור לחיצה ≥ 44 ---------- */
  .b, .b.sm, a.b, .iconbtn, .seg, .nt, .slot, .tag, .cand, .um-btn, .mm-btn, .burger, .um-pop button, .mm-pop button,
  .cnt button, .s-tabs button, .s-all, .s-step button, .s-gcal, .snav button, .tabs2 button, .tabs2 a, .add,
  input.in, select.in, .in, .s-phone { min-height: 44px; }
  .iconbtn, .mm-btn, .burger, .s-gcal, .um-btn { min-width: 44px; }
  .iconbtn, .mm-btn, .burger, .s-gcal, .um-btn { justify-content: center; }   /* אייקון במרכז הכפתור שהוגדל */
  .seg { display: inline-flex; align-items: center; } .seg > .chip { display: inline-flex; align-items: center; min-height: 44px; }
  .s-step button { width: 44px; height: 44px; }
  .s-gcal { width: 44px; height: 44px; margin: -8px -4px -8px 0; }
  .rrow .rk [data-mv] { width: 44px; height: 44px; border: 1px solid var(--rule); border-radius: 6px; background: var(--field); }  /* חיצי התור — כל אחד 44 */
  .rrow .rk > span:has([data-mv]) { gap: 4px; }
  .tgl { box-sizing: content-box; border: 6px solid transparent; background-clip: padding-box; }  /* המתג נשאר 56×32, אזור הלחיצה 68×44 */
  .tgl::after { top: 4px; right: 4px; }
  .tgl, .tgl.on { background-clip: padding-box !important; }   /* הצבע של "דלוק" מחק את החיתוך — המתג גדל כשנדלק */
  .seg button, .mini button { min-height: 44px; } .mini .dd { line-height: 44px; }   /* חלון "קבועים וצו 8" */
  /* "ככה נראה השבוע": השעה יורדת שורה אחרי המקף במקום להיחתך */
  .bars { height: auto; min-height: 48px; } .bars span { padding: 4px 2px; } .bars bdi { white-space: normal; text-align: center; }
  .howto > summary { min-height: 44px; display: flex; align-items: center; }

  /* בטלפון צר: כפתור המשתמש = אייקון בלבד, עגול 44 */
}
@media (max-width: 480px) {
  #saveState { display: none; }   /* "נשמר" נכנס לסרגל אחרי כל שמירה ודחף את כפתור המשתמש מחוץ למסך (נמצא ב-explore.js); שגיאות שמירה מופיעות בהודעה קופצת */
  .um-btn { width: 44px; height: 44px; padding: 0; border-radius: 22px; }
  .topbar .week { gap: 6px; }
}
/* מסך צר מאוד, או טלפון עם כתב מוגדל בהגדרות: אין מקום לאייקון היומן — התאריך חשוב ממנו */
@media (max-width: 360px) {
  .mags { grid-template-columns: minmax(0, 1fr) !important; }   /* מחסן התגים — עמודה אחת, אחרת גולש */
  .topbar .week .wk-ic { display: none; }
  .topbar { gap: 4px; padding-left: 8px; padding-right: 8px; } .topbar .week b { font-size: 16px !important; }   /* אחרת כפתור המשתמש נדחף מחוץ למסך */
  .s-card { padding: 12px; } .s-cell { padding-left: 2px !important; padding-right: 2px !important; }            /* השעות במשבצות החייל בשורה אחת */
}
/* רשת ביטחון: העמוד לא זז לצדדים אף פעם (גיא: "ככה זה נראה אחרי שעברתי שבוע" — הסרגל העליון גלש והזיז הכול).
   clip ולא hidden — לא יוצר אזור גלילה, ולכן לא שובר את הכפתורים הדביקים. הבדיקה עדיין תופסת רכיב שגולש. */
html, body { overflow-x: clip; }
@media (max-width: 640px) {
  /* ---------- 3. הפעולה הראשית באזור האגודל ---------- */
  /* דנה: כפתור הסטטוס (שבץ / פרסום / חזרה לעריכה) — פס קבוע בתחתית */
  .bar > .b.main { position: fixed; z-index: 45; bottom: calc(12px + env(safe-area-inset-bottom)); left: 12px; right: 12px;
    min-height: 52px; justify-content: center; font-size: 16px !important; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
  main:has(.bar > .b.main) { padding-bottom: 84px; }
  .toast { bottom: calc(76px + env(safe-area-inset-bottom)); left: 12px; right: 12px; }
  /* החייל: "סיימתי, לשלוח" דבוק לתחתית המסך כל עוד הטופס פתוח */
  .s-card .s-acts { position: sticky; bottom: 0; z-index: 5; margin: 16px -16px -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--panel); border-top: 1px solid var(--rule); box-shadow: 0 -6px 16px rgba(0,0,0,.08); border-radius: 0 0 6px 6px; }
  .s-acts .b { min-height: 48px; }

  /* הלוח השבועי והסבב: העמודה מתכווצת לרוחב המסך (בלי זה היא נשארה ברוחב התוכן וגלשה החוצה — "ככה זה נראה אחרי שעברתי שבוע") */
  .wrap { grid-template-columns: minmax(0, 1fr) !important; } .wrap > *, .gridwrap, .grid, .grid > * { min-width: 0; }
  .tag .nm, .mlabel { min-width: 0; overflow-wrap: break-word; }

  /* תפריטים נפתחים (⋮ ותפריט המשתמש): בטלפון — גיליון בתחתית המסך, ברוחב מלא ובהישג האגודל.
     קודם הם נפתחו מהכפתור והחצי שלהם יצא מהמסך (גיא: צילום של ⋮ בסבב הסופ"שים) */
  .um-pop, .mm-pop { position: fixed; top: auto; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; z-index: 80;
    max-height: 70vh; overflow-y: auto; box-shadow: 0 -8px 30px rgba(0,0,0,.3); }

  /* ---------- 4. ריווח על רשת של 8 ---------- */
  .card2, .box, .dcard, .s-card { padding: 16px; }
  .cfg, .dashwrap { gap: 16px; }
  .bar { gap: 8px; padding-top: 16px; padding-bottom: 8px; }
}