/* ============================================================
   CALENDAR — MOBILE FIT (Neo's Journey)
   Goal: on phones, the whole 600px calendar shows at once — NO
   horizontal scroll, NO zoom-out needed. Desktop is untouched.
   Approach: "start zoomed out" — CSS zoom shrinks the real layout
   box (unlike transform, which leaves a leftover 600px box that
   can still overflow). Simplest possible fix, content untouched.
   EDIT-ZONE: MOBILE CALENDAR FIT — tweak only the @media rule below.
   ============================================================ */

@media (max-width: 768px) {
    /* Zoom the whole calendar down so it fits the phone width.
       zoom changes the actual layout size, so nothing overflows.
       (desktop >768px is unaffected — this rule never applies there.) */
    #calendar-scroll {
        zoom: calc((100vw - 16px) / 600);
        max-width: 100%;
        overflow-x: hidden;
    }
}