/* v63.9.101 — iPhone mark-detail polish (Brett bug screenshot 25 Apr). Three fixes, all gated to mobile so iPad/desktop are untouched: 1) Title cut off: action button cluster (close, share, log catch, bite forecast) at top-right of #detail overlapped

. Reserve right padding on .card-head h2 + meta on mobile so they wrap before the buttons. 2) Floating buttons cover content: when #detail is open on mobile, hide MIC pill (#vw30MicFab), gear (#vw33GearBtn), Photo (#bcCaptureFab) and Brett's Report (.vw36-fab + label). They come back the moment detail closes. 3) Safe-area / status-bar bleed: body background was #05101c (near-black) and viewport didn't request `cover`. Paint the safe-area inset region in app navy so iOS reads navy under the status bar. Viewport meta gets viewport-fit=cover via index.html. */ /* --- 0. Action buttons (×, share, log catch, bite forecast) clear the iOS safe-area inset so they don't overlap the clock when the detail card is full-screen on mobile. -------------------- */ @media (max-width: 740px) { body.v27-mobile #detail #closeDetail, body.v27-mobile #detail #detailShare, body.v27-mobile #detail #detailLogCatch, body.v27-mobile #detail #detailBiteForecast { top: calc(env(safe-area-inset-top, 0px) + 12px) !important; } } /* --- 1. Title room on mobile -------------------------------------- */ @media (max-width: 740px) { body.v27-mobile #detail .card-head h2, body.v27-mobile #detail .card-head .meta, body.v27-mobile #detail .card-head .card-badge { padding-right: 168px; box-sizing: border-box; } /* badge is inline-block so padding-right would just push the chip; swap to max-width so the chip itself stays compact */ body.v27-mobile #detail .card-head .card-badge { padding-right: 9px; max-width: calc(100% - 168px); } /* allow long names to wrap rather than overflow */ body.v27-mobile #detail .card-head h2 { overflow-wrap: anywhere; word-break: break-word; line-height: 1.2; } } /* --- 2. Hide floating buttons while a mark is open OR any takeover sheet is open (covers desktop + iPad + iPhone). The :has() selectors catch every current sheet (vw11l winds, vw11k fishing-info, vw11i info, v27 mobile sheet, etc.) and any future *-sheet.open + the mark detail. ---------------- */ /* iPhone-only: hide FABs when mark detail is open OR auth modal is open. Specificity has to beat v63_9_22-mobile-fixes.css which has `html body.v27-mobile #bcCaptureFab { display:flex !important }` (specificity 0,1,2,2). We use html.v27-mobile-pre body.v27-mobile + .detail-open or :has(.bc-auth-modal) to hit (0,1,3,2). */ @media (max-width: 740px) { html.v27-mobile-pre body.v27-mobile.detail-open #vw30MicFab, html.v27-mobile-pre body.v27-mobile.detail-open #vw33GearBtn, html.v27-mobile-pre body.v27-mobile.detail-open #bcCaptureFab, html.v27-mobile-pre body.v27-mobile.detail-open #bcCaptureFab-label, html.v27-mobile-pre body.v27-mobile.detail-open .vw36-fab, html.v27-mobile-pre body.v27-mobile.detail-open .vw36-fab-label, html.v27-mobile-pre body.v27-mobile.detail-open #brettReportBtn, html body.v27-mobile.detail-open #vw30MicFab, html body.v27-mobile.detail-open #vw33GearBtn, html body.v27-mobile.detail-open #bcCaptureFab, html body.v27-mobile.detail-open #bcCaptureFab-label, html body.v27-mobile.detail-open .vw36-fab, html body.v27-mobile.detail-open .vw36-fab-label, html body.v27-mobile.detail-open #brettReportBtn, /* Generic overlay-open hide on iPhone — covers auth modal, any panel, sheet, modal, drawer, and the mark detail. High-specificity selector beats v63_9_22-mobile-fixes.css `html body.v27-mobile #bcCaptureFab { display: flex !important }`. Same explicit class list as the all-viewports block below — keep them in sync. */ html.v27-mobile-pre body.v27-mobile:has(.mm-panel.open, .vw11k-panel.open, .sqm-panel.open, .v63-panel.open, .vw11i-sheet.open, .vw11k-sheet.open, .vw11l-sheet.open, .vw8-sheet.open, .v27-sheet.v27-sheet-open, .vw36-modal.open, .v38-modal.open, .v63fc-modal.open, .vw29-drawer.open, .day-drawer.open, .bc-auth-modal, #detail:not(.hidden)) #vw30MicFab, html.v27-mobile-pre body.v27-mobile:has(.mm-panel.open, .vw11k-panel.open, .sqm-panel.open, .v63-panel.open, .vw11i-sheet.open, .vw11k-sheet.open, .vw11l-sheet.open, .vw8-sheet.open, .v27-sheet.v27-sheet-open, .vw36-modal.open, .v38-modal.open, .v63fc-modal.open, .vw29-drawer.open, .day-drawer.open, .bc-auth-modal, #detail:not(.hidden)) #vw33GearBtn, html.v27-mobile-pre body.v27-mobile:has(.mm-panel.open, .vw11k-panel.open, .sqm-panel.open, .v63-panel.open, .vw11i-sheet.open, .vw11k-sheet.open, .vw11l-sheet.open, .vw8-sheet.open, .v27-sheet.v27-sheet-open, .vw36-modal.open, .v38-modal.open, .v63fc-modal.open, .vw29-drawer.open, .day-drawer.open, .bc-auth-modal, #detail:not(.hidden)) #bcCaptureFab, html.v27-mobile-pre body.v27-mobile:has(.mm-panel.open, .vw11k-panel.open, .sqm-panel.open, .v63-panel.open, .vw11i-sheet.open, .vw11k-sheet.open, .vw11l-sheet.open, .vw8-sheet.open, .v27-sheet.v27-sheet-open, .vw36-modal.open, .v38-modal.open, .v63fc-modal.open, .vw29-drawer.open, .day-drawer.open, .bc-auth-modal, #detail:not(.hidden)) #bcCaptureFab-label, html.v27-mobile-pre body.v27-mobile:has(.mm-panel.open, .vw11k-panel.open, .sqm-panel.open, .v63-panel.open, .vw11i-sheet.open, .vw11k-sheet.open, .vw11l-sheet.open, .vw8-sheet.open, .v27-sheet.v27-sheet-open, .vw36-modal.open, .v38-modal.open, .v63fc-modal.open, .vw29-drawer.open, .day-drawer.open, .bc-auth-modal, #detail:not(.hidden)) .vw36-fab, html.v27-mobile-pre body.v27-mobile:has(.mm-panel.open, .vw11k-panel.open, .sqm-panel.open, .v63-panel.open, .vw11i-sheet.open, .vw11k-sheet.open, .vw11l-sheet.open, .vw8-sheet.open, .v27-sheet.v27-sheet-open, .vw36-modal.open, .v38-modal.open, .v63fc-modal.open, .vw29-drawer.open, .day-drawer.open, .bc-auth-modal, #detail:not(.hidden)) .vw36-fab-label, html.v27-mobile-pre body.v27-mobile:has(.mm-panel.open, .vw11k-panel.open, .sqm-panel.open, .v63-panel.open, .vw11i-sheet.open, .vw11k-sheet.open, .vw11l-sheet.open, .vw8-sheet.open, .v27-sheet.v27-sheet-open, .vw36-modal.open, .v38-modal.open, .v63fc-modal.open, .vw29-drawer.open, .day-drawer.open, .bc-auth-modal, #detail:not(.hidden)) #brettReportBtn { display: none !important; } } /* Shared overlay-open selector list — update both copies if you add a new panel/sheet/modal class. CSS attribute selectors can't match class-token suffixes (e.g. [class$="-panel"] fails for class "mm-panel open" because the whole attr value ends with "open"), so we list each class explicitly. */ /* All viewports: hide MIC + Settings + Brett's Report + Camera FAB whenever ANY known panel/sheet/modal/drawer is open, the iPhone full-screen mark detail is open, OR the auth/login modal is mounted. */ html body:has(.mm-panel.open, .vw11k-panel.open, .sqm-panel.open, .v63-panel.open, .vw11i-sheet.open, .vw11k-sheet.open, .vw11l-sheet.open, .vw8-sheet.open, .v27-sheet.v27-sheet-open, .vw36-modal.open, .v38-modal.open, .v63fc-modal.open, .vw29-drawer.open, .day-drawer.open, .bc-auth-modal, #detail:not(.hidden)) #vw30MicFab, html body:has(.mm-panel.open, .vw11k-panel.open, .sqm-panel.open, .v63-panel.open, .vw11i-sheet.open, .vw11k-sheet.open, .vw11l-sheet.open, .vw8-sheet.open, .v27-sheet.v27-sheet-open, .vw36-modal.open, .v38-modal.open, .v63fc-modal.open, .vw29-drawer.open, .day-drawer.open, .bc-auth-modal, #detail:not(.hidden)) #vw33GearBtn, html body:has(.mm-panel.open, .vw11k-panel.open, .sqm-panel.open, .v63-panel.open, .vw11i-sheet.open, .vw11k-sheet.open, .vw11l-sheet.open, .vw8-sheet.open, .v27-sheet.v27-sheet-open, .vw36-modal.open, .v38-modal.open, .v63fc-modal.open, .vw29-drawer.open, .day-drawer.open, .bc-auth-modal, #detail:not(.hidden)) #bcCaptureFab, html body:has(.mm-panel.open, .vw11k-panel.open, .sqm-panel.open, .v63-panel.open, .vw11i-sheet.open, .vw11k-sheet.open, .vw11l-sheet.open, .vw8-sheet.open, .v27-sheet.v27-sheet-open, .vw36-modal.open, .v38-modal.open, .v63fc-modal.open, .vw29-drawer.open, .day-drawer.open, .bc-auth-modal, #detail:not(.hidden)) .vw36-fab, html body:has(.mm-panel.open, .vw11k-panel.open, .sqm-panel.open, .v63-panel.open, .vw11i-sheet.open, .vw11k-sheet.open, .vw11l-sheet.open, .vw8-sheet.open, .v27-sheet.v27-sheet-open, .vw36-modal.open, .v38-modal.open, .v63fc-modal.open, .vw29-drawer.open, .day-drawer.open, .bc-auth-modal, #detail:not(.hidden)) .vw36-fab-label, html body:has(.mm-panel.open, .vw11k-panel.open, .sqm-panel.open, .v63-panel.open, .vw11i-sheet.open, .vw11k-sheet.open, .vw11l-sheet.open, .vw8-sheet.open, .v27-sheet.v27-sheet-open, .vw36-modal.open, .v38-modal.open, .v63fc-modal.open, .vw29-drawer.open, .day-drawer.open, .bc-auth-modal, #detail:not(.hidden)) #brettReportBtn { display: none !important; } /* --- 3. Status-bar / safe-area paints app navy -------------------- */ /* Safari paints the area above the safe-area-inset using the html element's background. Setting both html + body to #0a1526 makes the iOS status bar region read navy instead of light blue. */ html, body { background-color: #0a1526 !important; }