/* ================================================================================================= MAVEN-PHONE-DOCK-0919 · the phone Maven dock (ruling 582(146), 19 Sep 2026) WHAT THIS FILE IS FOR. REWALK-MAVEN-0919 fault N3 measured it: `fs-maven.bb673c07.css:24` carries `@media(max-width:820px){.mvn-fab{display:none!important}}`, so below 821 px there is no Maven dock at all — `page.click('[data-mvn-open]')` timed out on every page of that walk, in both schemes, and the only road to Maven on a phone was the left rail's "Meet Maven" link out to /maven-workspace. The whole continuous-thread surface — streaming, markdown, the Read-aloud pill, the thread history — was desktop-only. Ruling 582(146): build a phone dock before the beta, as a BOTTOM SHEET. THE ONE RULE THIS FILE OBEYS. Every selector below lives inside `@media (max-width: 820px)` or is this package's own new class (`.mvnph-*`). Nothing outside that query is touched, so the desktop dock at >= 821 px is byte-identical in behaviour — that is measured, not asserted: proof/func/ desktop-unchanged.json diffs the panel's computed box, class list and the twenty-one `.mvn-*` computed properties at 1280 px with this file loaded and with it removed. WHY A SHEET AND NOT A SMALLER POP-UP. At 390 px the shipped pop-up geometry (`right:24px;bottom:24px;width:392px;height:564px`) already falls back to the 480 px rule `width:calc(100vw - 16px);height:calc(100vh - 76px)` — a near-full-screen rectangle floating on an 8 px margin, with no way to dismiss it by gesture and a composer that the iOS keyboard covers. A sheet anchored to the BOTTOM of the VISUAL viewport is the only shape where the composer stays above the keyboard, and it is the shape a phone user already knows. NO ESTATE PRECEDENT TO COPY — MEASURED, NOT ASSUMED. The brief says to copy an existing bottom-sheet. A grep of the whole served tree for `translateY(100` returns three files (`public_html/index.php`, `private_html/_scx_view_calendar.php`, `_scx_view_home.php`) and all three are the hover-in action bar on a post card, not a sheet; `_task_sheet.php` and `_cjx_deck.php` carry no phone-width sheet geometry at all, and `visualViewport` appears nowhere in the served tree. So there is nothing to copy and this file is the estate's FIRST bottom sheet. What it does copy is the VOCABULARY: the dock's own `.mvn-*` surfaces, the speak pill's explicit-both-themes discipline (`.fs-dark` is a SEAT on , never prefers-color-scheme), and the shell's own 820 px breakpoint. THE HEIGHT AND THE KEYBOARD. `--mvnph-h` (the sheet's height) and `--mvnph-kb` (how far the visual viewport's bottom sits above the layout viewport's) are written by fs-maven-phone-0919.js from `window.visualViewport` on every resize and scroll. The values below are the no-JS fallbacks, and 85dvh has a plain 85vh sibling in front of it for an engine that does not know dvh. CONTRAST is measured from the RENDERED colour on the guarded rig (ruling 558), never from this stylesheet — proof/plates/contrast.json carries every reading. ============================================================================================== */ /* The scrim and the grab handle are this package's own elements. They exist in the document at every width (the JS builds them once) and are inert above the breakpoint. */ .mvnph-scrim { display: none; } .mvnph-grab { display: none; } @media (max-width: 820px) { /* ── 1 · THE LAUNCHER COMES BACK, AS A BOTTOM-RIGHT PILL ─────────────────────────────────────── `display:block` beats `fs-maven.bb673c07.css:24` on cascade order alone (this file is linked after it in `_maven.php`), and `html body` is carried through every rule in this file so the package never depends on load order to win. It is a PILL, not the desktop hexagon, because the desktop launcher's label is hover-only (`.mvn-fab:hover .lbl{max-width:124px}`) and a phone has no hover: the bare hexagon would be an unlabelled violet shape. `.mvn-dismiss` is hidden for the same reason — it is `opacity:0` until `:hover`, so on touch it is a control that can never be reached. Hiding it costs the phone nothing: the sheet's own ✕ closes it, and "hide until the next page load" has no meaning on a launcher the member has not been able to see. */ html body .mvn-fab { display: block !important; right: 14px !important; bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; z-index: 1148 !important; /* under the sheet (1150) and its scrim (1149) */ } html body .mvn-fab .mvn-open { pointer-events: auto !important; height: 52px; padding: 0 16px 0 3px; background: #ffffff; border: 1px solid #e3e1fb; border-radius: 200px; box-shadow: 0 10px 26px -12px rgba(97, 93, 250, .62), 0 1px 0 rgba(20, 18, 60, .04); } html body .mvn-fab .mvn-hex { width: 44px; height: 44px; flex: 0 0 44px; filter: drop-shadow(0 3px 9px rgba(97, 93, 250, .38)); } html body .mvn-fab .mvn-hex .mvn-ic { width: 30px; height: 30px; } html body .mvn-fab .lbl { display: flex !important; /* fs-pages.css hides it outright below 480 px */ position: static; max-width: none; opacity: 1; overflow: visible; height: auto; padding: 0 0 0 7px; background: transparent; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; transition: none; color: #3f3ab8; /* on #fff — measured, proof/plates/contrast.json */ font: 800 13.5px/1 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: -.005em; } /* 🔴 AND THE PILL HAS TO BE PUT BACK AWAY BY A RULE, NOT BY THE DOCK'S INLINE STYLE. `_maven.php`'s launcher handler hides the fab with `fab.style.display='none'` — an inline declaration with NORMAL priority, and the `display:block !important` above outranks it. So the pill stayed on screen behind the open sheet: invisible while the sheet is full height, and PLAINLY VISIBLE the moment the keyboard lifts the sheet off the bottom. MEASURED — it is in the first keyboard plate this lane took. `.mvnph-lock` is set on for exactly as long as the sheet is open (the same latch that drives the scrim and the page lock), so this hides the pill on the open state itself rather than depending on an inline style this file has already out-ranked. `:has()` would also work and is supported in both engines; a class the JS already owns needs no feature to be true. */ html.mvnph-lock body .mvn-fab { display: none !important; } html body .mvn-fab .mvn-dismiss { display: none !important; } html body .mvn-fab .mvn-badge { top: -4px; left: auto; right: -2px; } .fs-dark body .mvn-fab .mvn-open { background: #23243a; border-color: #343550; box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .7); } .fs-dark body .mvn-fab .lbl { color: #c3c0ff; } /* on #23243a — measured */ /* A pill in the lower-right corner would otherwise land on whatever the page put last. `.fs-fabclear` (the desktop clearance utility) is explicitly zeroed below 821 px because until tonight there WAS no launcher here, so no page reserves room for one. One reserve, on the one container every Mission Control page renders into, is the whole fix. */ html body .page-wrapper, html body .page-wrapper#admin-dashboard { padding-bottom: 86px !important; } html body .fs-fabclear { padding-bottom: 86px; } /* ── 2 · THE SHEET ──────────────────────────────────────────────────────────────────────────── Three class combinations are covered because `applyMode()` puts `.mvn-side` on the panel for every member whose stored mode is side (the default) and `.mvn-full` is retired-but-inert; both carry `!important` geometry of their own, so the sheet's rules are written at a higher specificity (`html body .mvn-panel.open.mvn-side` = 0,3,2) rather than hoping to win on order. */ html body .mvn-panel.open, html body .mvn-panel.open.mvn-side, html body .mvn-panel.open.mvn-full, html body .mvn-panel.open.expanded { position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: var(--mvnph-kb, 0px) !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 85vh !important; /* fallback for an engine without dvh */ height: var(--mvnph-h, 85dvh) !important; /* JS writes a px value on every frame */ max-height: var(--mvnph-h, 85dvh) !important; margin: 0 !important; border-radius: 22px 22px 0 0 !important; border-bottom: 0 !important; box-shadow: 0 -20px 60px -18px rgba(20, 18, 60, .55) !important; z-index: 1150 !important; overflow: hidden !important; transform: translateY(100%); transition: transform .26s cubic-bezier(.32, .72, .32, 1); will-change: transform; } /* `.mvnph-in` is added on the frame after `.open`, so the sheet always ANIMATES up rather than appearing — and removed before `.open` goes, so it animates back down. */ html body .mvn-panel.open.mvnph-in { transform: translateY(0); } /* While a finger is on the handle the JS writes an inline transform, which outranks both. */ html body .mvn-panel.mvnph-drag { transition: none !important; } @media (prefers-reduced-motion: reduce) { html body .mvn-panel.open { transition: none !important; } .mvnph-scrim { transition: none !important; } } /* ── 3 · THE GRAB HANDLE ────────────────────────────────────────────────────────────────────── A 22 px strip is the visual affordance; the JS gives the gesture a 44 px target by listening on the header as well. `touch-action:none` is required or the browser claims the drag as a scroll and `pointermove` never fires. */ html body .mvn-panel .mvnph-grab { display: flex !important; align-items: center; justify-content: center; flex: 0 0 22px; height: 22px; background: #ffffff; border-radius: 22px 22px 0 0; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; } html body .mvn-panel .mvnph-grab::before { content: ""; width: 40px; height: 4px; border-radius: 99px; background: #d5d5e6; transition: background .15s, width .15s; } html body .mvn-panel.mvnph-drag .mvnph-grab::before { background: #9d99ef; width: 52px; } .fs-dark body .mvn-panel .mvnph-grab { background: #1a1b26; } .fs-dark body .mvn-panel .mvnph-grab::before { background: #3b3c55; } .fs-dark body .mvn-panel.mvnph-drag .mvnph-grab::before { background: #7d79f4; } /* the handle sits where the header's own top padding used to be */ html body .mvn-panel .mvn-hd { padding-top: 6px !important; } /* ── 4 · THE SCRIM ──────────────────────────────────────────────────────────────────────────── 1149 — above the panel-less page and above the phone rail (computed z-index 50, measured by WO-MCMOBILE2-0814), below the sheet. Tapping it closes, which is the gesture a phone user reaches for before they find the ✕. */ .mvnph-scrim { display: block !important; position: fixed; inset: 0; z-index: 1149; background: rgba(12, 12, 26, .52); opacity: 0; pointer-events: none; transition: opacity .24s; } .mvnph-scrim.on { opacity: 1; pointer-events: auto; } /* The page behind a sheet must not scroll under the finger. */ html.mvnph-lock, html.mvnph-lock body { overflow: hidden !important; } /* ── 5 · THE CONTROLS A PHONE CANNOT USE ────────────────────────────────────────────────────── Layout toggle (popup <-> side is meaningless when the sheet IS the layout), pop-out (a phone has no second window), and both resize grips (`.mvn-edge` is already `display:none` under `@media(hover:none)` but an Android tablet at 800 px reports hover:hover). Drawer, New chat and Close stay — they are the three the phone genuinely needs. */ html body .mvn-panel [data-mvn-mode], html body .mvn-panel [data-mvn-popout], html body .mvn-panel .mvn-resize, html body .mvn-panel .mvn-edge { display: none !important; } /* ── 6 · THE COMPOSER ───────────────────────────────────────────────────────────────────────── `--mvnph-pb` is written by the JS: the safe-area inset while the keyboard is closed, and 10 px while it is open (the home indicator is behind the keyboard, so reserving for it would push the composer up into nothing). 16 px on the input is not a style choice — below 16 px iOS Safari zooms the whole page on focus, which on a fixed sheet leaves the member looking at a magnified corner of it. */ html body .mvn-panel.open .mvn-ft { padding-bottom: var(--mvnph-pb, calc(12px + env(safe-area-inset-bottom, 0px))) !important; } html body .mvn-panel .mvn-input { padding: 7px 7px 7px 14px; } html body .mvn-panel .mvn-input .snd { width: 40px; height: 40px; flex: 0 0 40px; } /* 🔴 THE 16 px RULE HAS TO BE IN A LAYER, AND THAT IS THE ESTATE'S TRAP, NOT A PREFERENCE. MEASURED on the guarded rig with CSS.getMatchedStylesForNode (the engine's own answer, not a guess): Mission Control loads `style-mission-control-live.css`, a Tailwind v4 build that declares `@layer properties, theme, base, …` and puts [type="text"], [type="email"], … { font-size: var(--text-sm) !important } (--text-sm: .875rem) inside `base`. For IMPORTANT declarations the cascade-layer order is REVERSED and layered beats unlayered, so an unlayered `html body .mvn-panel .mvn-input input{font-size:16px !important}` — specificity 0-2-3 against their 0-1-0 — LOSES, and the composer computed 14px with the rule sitting right there in the stylesheet, matched and not disabled. Declaring the same layer name here appends to THEIR `base` (layer order is fixed by first declaration), so the two rules are finally in the same layer and specificity decides, which this one wins. On a page that does not load that build, this file's own `base` is simply the first layer and the rule still wins — measured both ways. WHY 16 px AT ALL: below 16 px iOS Safari zooms the whole page when a text field takes focus, and on a fixed bottom sheet that leaves the member looking at a magnified corner of it. */ @layer base { html body .mvn-panel .mvn-input input { font-size: 16px !important; } } /* The tab row. MEASURED at 390 px before this rule: `.mvn-tabs` clientWidth 388, scrollWidth 402 — "Prompts" fell 14 px off the right edge and only a horizontal scrub could reach it. The row is `overflow-x:auto` so nothing was broken, but a tab you cannot see is a tab you will not use. 15 px -> 14 px and 7 px -> 5 px of side padding buys back 22 px and all four fit. */ html body .mvn-panel .mvn-tabs { padding: 0 8px; } html body .mvn-panel .mvn-tab { padding: 12px 5px 13px; font-size: 14px; gap: 5px; } /* Momentum scrolling inside the sheet, and no rubber-band handover to the page behind it. */ html body .mvn-panel .mvn-body, html body .mvn-panel .mvn-scroll, html body .mvn-panel .mvn-prlist { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } } /* Above the breakpoint nothing above applies, and the two new elements are removed from the layout outright — the desktop dock is exactly the dock MAVEN-STREAM-0918 and MC-BADGE-SPEAKS-0919 left. */ @media (min-width: 821px) { .mvnph-scrim { display: none !important; } .mvnph-grab { display: none !important; } }