/* ─────────────────────────────────────────────────────────────────────────
   MOB-6 — בטלפון ה-☰ מדליק רק את הרקע, והתפריט נשאר מחוץ למסך.

   המקור ב-shell.js המרוחק (id.restorno.com, לא בריפו הזה), בתוך
   @media (max-width: 820px):

     .r-rail { transform: translateX(100%) }                    ספציפיות (0,1,0)
     :root[dir=ltr] .r-rail { transform: translateX(-100%) }    ספציפיות (0,3,0)
     body.r-drawer-open .r-rail { transform: translateX(0) }    ספציפיות (0,2,1)

   כלל ה-LTR גובר על כלל הפתיחה, אז באנגלית ה-transform נשאר -100%
   גם אחרי ש-body מקבל r-drawer-open. הרקע (.r-backdrop) כן מוצג.
   דף שה-body שלו נשאר direction:rtl מתחת ל-<html dir="ltr"> (האב,
   תיקים) מעגן את הרייל לימין ומזיז אותו שמאלה — נשארת רצועה בלי
   קישור שאפשר ללחוץ עליו.

   הסלקטורים כאן (0,4,2) גוברים על :root[dir=ltr] .r-rail.
   הם לא מסמנים עדיפות, כדי שכלל transform:none של viewport-guard.css (#74)
   יישאר הקובע אם שני הגיליונות נטענים — והמגירה עדיין נראית.
   הרייל הסגור נשאר בתוך המסך (visibility) ולא translate מחוץ לו,
   כדי שלא ירחיב את הגלילה האופקית.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  html[dir="ltr"] body.r-has-shell .r-rail { direction: ltr; }
  html[dir="rtl"] body.r-has-shell .r-rail { direction: rtl; }

  html[dir="ltr"] body.r-has-shell:not(.r-drawer-open) .r-rail,
  html[dir="rtl"] body.r-has-shell:not(.r-drawer-open) .r-rail {
    transform: none;
    visibility: hidden;
    pointer-events: none;
  }

  html[dir="ltr"] body.r-has-shell.r-drawer-open .r-rail,
  html[dir="rtl"] body.r-has-shell.r-drawer-open .r-rail {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }
}