/* ═══ ROLVY — TABLET & DESKTOP LAYOUT (≥768px) ═══════════════════════════════ Loaded with so phones never parse this file. The inner @media wrappers double-gate for safety. Mobile base: css/app.css. POSITIONING NOTE: the app is hard-coded (Hebrew). The base styles in app.css use PHYSICAL left/right. Mixing logical (inset-inline-*) with physical neutralisers in one rule makes the two fight in the cascade and resolve unpredictably, so every override here uses PURE PHYSICAL properties. The sidebar lives on the RIGHT (the inline-start side in RTL), matching the approved design. If the app ever ships an LTR locale, mirror these blocks. */ /* ── Tablet layout (768px–1023px): floating card on the right (inline-start) ── */ @media (min-width: 768px) and (max-width: 1023px) { /* #sheet base: position:fixed; bottom:0; left:0; right:0. Float it as a card on the right; specify BOTH sides so the base left:0/right:0 is fully cleared. */ #sheet { width: 380px; left: auto; right: 16px; border-radius: var(--r-xl) !important; bottom: 16px; height: calc(100vh - 32px); height: calc(100dvh - 32px); } #sheet-card { border-radius: var(--r-xl) !important; } /* #route-bottom base: position:fixed; bottom:0; left:0; right:0. Same card. */ #route-bottom { width: 380px; left: auto; right: 16px; border-radius: var(--r-xl) var(--r-xl) 0 0; } /* #fab-col base: position:fixed; left:14px. Sit it just left of the 380px card (right:16px + 380px + 16px gap = right:412px). */ #fab-col { left: auto; right: 412px; } /* #recenter-fab base: bottom:170px; left:50%; transform:translateX(-50%). Centre over the full viewport (card is floating, not full-width). */ #recenter-fab { left: 50%; right: auto; } /* #hazard-card base: top:110px; left:14px; right:14px. Centre it. */ #hazard-card { max-width: 460px; left: 50%; right: auto; transform: translateX(-50%); } /* Turn bar: constrain and centre */ #nav-screen > #turn-bar { border-radius: 0 0 var(--r-xl) var(--r-xl); max-width: 480px; margin: 0 auto; } } /* ── Desktop layout (≥1024px): full-height sidebar on the right ── */ @media (min-width: 1024px) { /* ── Sidebar: #sheet ──────────────────────────────────────────────────── */ /* Base: position:fixed; bottom:0; left:0; right:0; height:100vh; transform:translateY(...). Convert to a fixed full-height right sidebar. */ #sheet { left: auto; right: 0; top: 0; bottom: 0; width: 408px; height: 100vh; height: 100dvh; border-radius: 0 !important; transform: none !important; border-inline-start: 1px solid var(--hairline-2); /* edge facing the map */ box-shadow: -4px 0 24px rgba(31,41,55,.08); display: flex; flex-direction: column; } #sheet-card { border-radius: 0 !important; flex: 1; display: flex; flex-direction: column; overflow: hidden; } #sheet-scroll { flex: 1; overflow-y: auto; height: 0; /* let the flex child respect the parent height and scroll */ } #sheet-handle-wrap { display: none !important; } /* drag handle is mobile-only */ /* ── Route preview sidebar: #route-top / #route-bottom ───────────────── */ /* #route-top base: position:fixed; top:0; left:0; right:0. Header strip. */ #route-top { width: 408px; left: auto; right: 0; background: var(--bg); z-index: 21; } /* #route-bottom base: position:fixed; bottom:0; left:0; right:0; max-height:72vh. Full-height sidebar panel below the ~68px header, scrolls internally. */ #route-bottom { width: 408px; left: auto; right: 0; top: 68px; bottom: 0; max-height: none; height: calc(100vh - 68px); height: calc(100dvh - 68px); border-top: none; border-radius: 0; border-inline-start: 1px solid var(--hairline-2); box-shadow: -4px 0 24px rgba(31,41,55,.08); overflow-y: auto; } /* ── Panel host: .panel-sheet opens as a second column left of the sidebar ─ */ /* Base: position:fixed; bottom:0; left:0; right:0; border-radius:24px 24px 0 0; max-height:85vh. Sidebar occupies right:0..408, so panels sit at right:408. */ .panel-sheet { left: auto; right: 408px; top: 0; bottom: 0; width: 380px; max-height: none; height: 100vh; height: 100dvh; border-radius: 0 !important; border-inline-start: 1px solid var(--hairline-2); box-shadow: -4px 0 24px rgba(31,41,55,.08); } /* Lighter backdrop on desktop — less modal, more side-panel */ .panel-backdrop { background: rgba(0,0,0,.15); } @media (prefers-reduced-motion: no-preference) { .panel-sheet { animation: panel-slide-in .22s cubic-bezier(.4,0,.2,1) both; } @keyframes panel-slide-in { /* Panel sits left of the right sidebar — slide in from the map side */ from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } } } /* ── Navigation steps sidebar: #nav-steps-side ───────────────────────── */ /* During nav #idle-screen (with #sheet) is hidden, so the steps live here. */ #nav-steps-side { display: block; position: fixed; left: auto; right: 0; top: 100px; /* clear the turn-bar */ bottom: 0; width: 408px; background: var(--surface); border-inline-start: 1px solid var(--hairline-2); box-shadow: -4px 0 24px rgba(31,41,55,.08); overflow-y: auto; z-index: 20; padding: 12px 0 40px; } /* ── FABs: just left of the sidebar / over the map ───────────────────── */ /* #fab-col base: position:fixed; left:14px. Sidebar is right:0..408. */ #fab-col { left: auto; right: 424px; } /* #locate-fab lives inside #fab-col and inherits its position. */ /* #profile-fab is inline-styled top:16px left:16px (map side) — keep there. */ #profile-fab { left: 16px !important; right: auto !important; top: 16px !important; } /* #recenter-fab base: bottom:170px; left:50%; transform:translateX(-50%)... Centre over the MAP AREA (left:0 .. right:408 → width 100vw-408). */ #recenter-fab { left: calc((100vw - 408px) / 2) !important; right: auto; transform: translateX(-50%) translateY(20px); } #recenter-fab.show { transform: translateX(-50%) translateY(0); } #recenter-fab:active { transform: translateX(-50%) scale(.97); } /* ── Turn bar during nav: centre over the map area ───────────────────── */ /* Box from left:0 to right:408 (the map area); fixed width + auto margins centres the bar within it. */ #nav-screen > #turn-bar { left: 0; right: 408px; width: min(520px, calc(100vw - 408px - 32px)); margin-left: auto; margin-right: auto; border-radius: 0 0 var(--r-xl) var(--r-xl); } /* #hazard-card: centre over the map area as well. */ #hazard-card { left: 0; right: 408px; max-width: 460px; margin-left: auto; margin-right: auto; transform: none; } /* ── Ad banner: pinned to the bottom of the sidebar column ───────────── */ #ad-banner { width: 408px !important; left: auto !important; right: 0 !important; } /* ── Send-to-phone: show on desktop (hidden by default in app.css) ───── */ #send-to-phone-btn { display: inline-flex; } /* ── Top banners must not stretch over the right sidebar (base: left/right:14px) ── */ #resume-banner, #handoff-banner { right: calc(408px + 14px); } } /* ── Centred dialogs on tablet and desktop (≥768px) ──────────────────────── */ /* .modal-overlay base: position:fixed; inset:0; align-items:flex-end (bottom sheet). On ≥768px centre them as dialog cards instead. Geometry only. */ @media (min-width: 768px) { .modal-overlay { align-items: center; justify-content: center; } .modal-overlay > * { max-width: 440px; width: 100%; border-radius: 28px !important; } #emergency-contacts-modal > div { max-width: 440px; border-radius: 28px !important; } /* #safety-check-modal base: inset:0; align-items:flex-end; justify-content:center. */ #safety-check-modal { align-items: center; } #safety-check-sheet { border-radius: 28px !important; } /* #ride-summary-modal — same treatment */ #ride-summary-modal { align-items: center; } #ride-summary-sheet { border-radius: 28px !important; } /* #rep-modal base: inset:0; align-items:flex-end. Centre it. */ #rep-modal { align-items: center; justify-content: center; } #rep-sheet { max-width: 480px; width: 100%; border-radius: 28px !important; } /* Save-location (favorites) modal — centre it and cap width so it doesn't span the full viewport / overlap the sidebar. */ #fav-modal { align-items: center; justify-content: center; } #fav-sheet { max-width: 480px; border-radius: 28px !important; } } /* ── nav-steps-side: hidden below desktop ────────────────────────────────── */ #nav-steps-side { display: none; }