/* ========================================================================== vryno-platform.css — the platform layer. ========================================================================== Everything here is NEW surface: the scrollable app strip, the command palette, global search results, toasts, skeletons, empty states, the AI panel, the related-records panel and the Needs-you card. Nothing in this file restyles an existing component, so it cannot regress a page. RULES THIS FILE FOLLOWS (they are the ones the audit asked for) 1. No hex literal for anything themeable. Every colour resolves from a token already defined in style.css, with a hard fallback so this file still renders if a token is missing. 2. Dark mode is expressed the way this app already expresses it -- [data-bs-theme="dark"] on -- not prefers-color-scheme. Matching the existing mechanism is what stops dark-theme-fixes.css from growing. 3. Layout uses flex/grid + gap. No per-element margins that collapse. 4. Every interactive element gets a visible :focus-visible ring. 5. Anything wide scrolls inside its own container. The page body never scrolls sideways. ========================================================================== */ :root { --vp-radius: 10px; --vp-radius-lg: 14px; --vp-radius-pill: 999px; --vp-surface: var(--white, #fff); --vp-surface-2: var(--light-100, #f7f7fb); --vp-ink: var(--heading-color, #1a1535); --vp-ink-soft: var(--gray-600, #5c5875); --vp-ink-faint: var(--gray-400, #9b95c9); --vp-line: var(--border-color, #e6e3f3); --vp-accent: var(--primary, #5235ef); --vp-accent-soft: var(--primary-transparent, #ece7fb); --vp-shadow: 0 1px 2px rgba(20, 18, 48, .06), 0 10px 30px -18px rgba(20, 18, 48, .28); --vp-shadow-lg: 0 24px 70px -24px rgba(20, 18, 48, .45); --vp-strip-h: 52px; --vp-z-strip: 9; --vp-z-panel: 1085; --vp-z-overlay: 1090; --vp-z-toast: 1100; } [data-bs-theme="dark"] { /* Map onto the app's OWN dark tokens rather than inventing a second dark palette. dark-theme-fixes.css already defines --dtf-*; reusing them is what keeps this file from becoming another override layer, and it is why a card here sits on the same violet-black as the page instead of drifting grey. */ --vp-surface: var(--dtf-surface, #0d0d26); --vp-surface-2: var(--dtf-surface-2, #13132e); --vp-ink: var(--dtf-heading, #e8eaff); --vp-ink-soft: var(--dtf-text, #a9b1c7); --vp-ink-faint: var(--dtf-muted, #7f869e); --vp-line: var(--dtf-border, #26264f); --vp-accent-soft: rgba(103, 76, 226, .26); --vp-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px -18px rgba(0, 0, 0, .85); --vp-shadow-lg: 0 24px 70px -24px rgba(0, 0, 0, .92); } .vp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Keyboard users could not see where they were anywhere in the app. */ /* .vp-scope :focus-visible, .vp-btn:focus-visible, .vp-strip-arrow:focus-visible, .vp-result:focus-visible, .vp-cmd-row:focus-visible { outline: 2px solid var(--vp-accent); outline-offset: 2px; border-radius: 6px; } */ /* Skip link — there was no way to bypass the topbar with a keyboard. */ .vp-skip { position: fixed; top: -60px; left: 12px; z-index: 2000; background: var(--vp-accent); color: #fff; padding: 10px 16px; border-radius: var(--vp-radius); font-size: 13px; font-weight: 600; text-decoration: none; transition: top .15s ease; } .vp-skip:focus { top: 12px; color: #fff; } /* ========================================================================== 1. BOTTOM APP STRIP — scrollable, three fixed zones ========================================================================== The strip was `position:fixed; bottom:-14px; overflow-x:auto` with the Add Apps button `position:absolute; right:0` INSIDE that scrolling box -- so the button drifted with the scroll and overlapped the tabs, and there was no affordance telling the user more apps existed off-screen. New structure, built at runtime by vryno-platform.js so no page markup changes: APPS ONLY. Workspace destinations (Home, My Work, Search, Calendar, Files, Activity) live at the top of the sidebar, and every settings destination is in the profile dropdown. Nothing but apps goes in this bar. .vr-module-strip grid: [scroller] [add] .vp-strip-scroll-wrap the scrolling region .vp-strip-scroll the original