/* mobile.css The dedicated mobile interface: app bar, bottom tab bar, bottom sheets, page transitions, and the phone-sized layout for every student page. HOW THIS FILE IS SCOPED, AND WHY IT MATTERS ------------------------------------------- Desktop must keep the existing design untouched, so every rule below is written under `html.is-mobile` and simply does not match on a laptop, a TV or a wide browser window. The class is added before first paint by the inline snippet at the top of each page's — inline rather than an external file because a network round trip before paint is exactly long enough to show the desktop layout and then swap it. The only unscoped rules are the ones directly below, which hide the mobile chrome. That markup ships in every page's HTML so the tab bar can paint on the first frame instead of being injected by script, which means desktop would otherwise render a bare unstyled nav. Every custom property is written with a fallback — `var(--primary, #e07b3c)` — because the admin pages link this file but deliberately do not link shared.css, so there is no guarantee the token has been declared. Same convention, and the same reason, as loader.css. STICKY, NOT FIXED ----------------- Only the tab bar is `position: fixed`, and it is a direct child of . Every other piece of chrome — app bars, the order screen's action bar — is `position: sticky` inside the page wrapper. That is not a style preference: the page wrapper is translated during the transition at the bottom of this file, and an ancestor with a transform becomes the containing block for its fixed descendants, so a fixed app bar would detach and jump on every navigation. Sticky is unaffected, and page chrome sliding with its own page is the behaviour we want anyway. The tab bar is global, so it stays outside the transform and never moves. */ /* ---------- Views (home.html only) ---------- home.html holds four screens — Menu, Orders, Order, Profile — that used to be four separate documents. Exactly one is ever on screen, on every device: unlike the admin dashboard's data-m-section cards (mobile-only tabs; every card stays visible at once on desktop, because that page was always meant to read as one long scroll there), these four were four genuinely distinct full-screen designs even on desktop, and merging the documents was never meant to stack Today's Menu, Your Orders and My Profile on top of each other. So this rule is unscoped — it is exactly as true on a laptop as on a phone — and home.html's own script is what decides which one has `.is-active`, through showView() / window.KMCTShowView. */ .m-view { display: none; } .m-view.is-active { display: block; /* A small settle rather than a hard cut, on entry only — matching the cross-document fade every other navigation in the app already has. Reduced motion collapses this to 0.001ms via the global rule in shared.css, same as everything else here. */ animation: m-view-in 220ms ease both; } @keyframes m-view-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ---------- Mobile-only chrome, inert everywhere else ---------- */ /* Present in the markup of every page; revealed only by the rules further down. Without this, a desktop visitor gets an unstyled list of nav links. */ .m-appbar, .m-tabbar, .m-only { display: none; } html.is-mobile .m-appbar { display: flex; } /* Scoped to the same class that already drives the tab bar's bottom-clearance padding on .m-page (below) and on the route loader — every page that carries a tab bar in its markup already sets this on , so this changes nothing for any of them. What it buys is a single flag home.html's script can toggle at runtime: its Order view is a full-screen pushed screen with no tab bar of its own (never did, back when it was its own document), and switching this one class off for that view removes the bar and the space reserved for it together, instead of needing two separately-tracked states. */ html.is-mobile body.m-has-tabs .m-tabbar { display: flex; } html.is-mobile .m-only { display: block; } /* The mirror image: parts of the desktop design that have no place in the app layout, chiefly header links the tab bar now carries. */ html.is-mobile .m-hide { display: none !important; } /* ================================================================ Tokens and base ================================================================ */ html.is-mobile { --m-tabbar-h: 60px; --m-appbar-h: 56px; --m-safe-t: env(safe-area-inset-top, 0px); --m-safe-b: env(safe-area-inset-bottom, 0px); --m-gutter: 16px; /* iOS-style deceleration. Sharper than the shared --transition, which is tuned for hover states rather than things that slide across a screen. */ --m-ease: cubic-bezier(0.32, 0.72, 0, 1); --m-card-r: 18px; --m-tint: #fdf3e7; -webkit-text-size-adjust: 100%; } html.is-mobile body { /* Every student page sets `body { padding: 20px }` (and order/profile also centre themselves with flex) in their own