/* ============================================================================ LexiCore Help Center — the contextual side panel ============================================================================ Injected on every page by middleware, so this file must assume nothing about the page under it: 122 page templates, several generations of layout, and no shared CSS reset between them. Every selector is namespaced `lxh-`, every value is explicit, and nothing here sets a style on an element the panel does not own. LAYOUT MODES ------------ Overlay is the DEFAULT and does not move the page at all — no reflow, no re-render, no lost scroll position, no reset form. Pinning is opt-in and adds padding to , which gives the true two-pane reading posture for people who want it while leaving everyone else's page untouched. Opening or closing help never navigates, so unsaved work, filters, editor state and scheduler view all survive by construction rather than by care. ============================================================================ */ :root { --lxh-blue: #1e40af; --lxh-blue-dark: #1e3a8a; --lxh-blue-soft: #eff6ff; --lxh-gold: #d97706; --lxh-ink: #0f172a; --lxh-ink-soft: #334155; --lxh-muted: #64748b; --lxh-line: #e2e8f0; --lxh-line-soft: #f1f5f9; --lxh-bg: #ffffff; --lxh-bg-soft: #f8fafc; --lxh-danger: #b91c1c; --lxh-amber-bg: #fffbeb; --lxh-amber-line: #fcd34d; --lxh-radius: 10px; --lxh-w: 420px; --lxh-z-panel: 10000; --lxh-z-launcher: 9997; --lxh-shadow: 0 10px 40px rgba(15, 23, 42, 0.18); --lxh-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* --------------------------------------------------------------------------- Launcher --------------------------------------------------------------------------- */ #lxh-launcher { position: fixed; right: 24px; bottom: 24px; z-index: var(--lxh-z-launcher); display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 1px solid var(--lxh-line); border-radius: 22px; background: var(--lxh-bg); color: var(--lxh-blue); font: 600 14px/1 var(--lxh-font); cursor: pointer; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.14); transition: transform 0.15s ease, box-shadow 0.15s ease; } /* The AI Copilot owns bottom-right on most pages. Stack above it rather than under it — two round buttons in the same 24px corner is how a product ends up with a help button nobody can click. */ #lxh-launcher.lxh-stacked { bottom: 104px; } #lxh-launcher:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(15, 23, 42, 0.2); } #lxh-launcher:focus-visible { outline: 3px solid var(--lxh-blue); outline-offset: 2px; } #lxh-launcher .lxh-launcher-key { color: var(--lxh-muted); font-weight: 500; font-size: 12px; border: 1px solid var(--lxh-line); border-radius: 4px; padding: 2px 5px; } /* --------------------------------------------------------------------------- Panel shell --------------------------------------------------------------------------- */ #lxh-panel { position: fixed; top: 0; right: 0; bottom: 0; width: var(--lxh-w); max-width: 100vw; z-index: var(--lxh-z-panel); display: flex; flex-direction: column; background: var(--lxh-bg); border-left: 1px solid var(--lxh-line); box-shadow: var(--lxh-shadow); font: 400 14px/1.55 var(--lxh-font); color: var(--lxh-ink); transform: translateX(100%); transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1); visibility: hidden; } #lxh-panel.lxh-open { transform: translateX(0); visibility: visible; } /* Respect a reader who has asked the operating system for less motion. */ @media (prefers-reduced-motion: reduce) { #lxh-panel, #lxh-launcher { transition: none; } } /* Pinned: the page makes room. Opt-in, remembered, and the only mode that touches the host page's box model. The padding goes on , NOT on . Padding a body is what a panel normally does, and it does not survive contact with this product: measured on the deployed billing page, `padding-right: 460px !important` set INLINE on body still computed to 0. Padding the root element is unaffected by whatever the page's own stylesheet says about body, and it is what actually narrows the content (body went 1272px -> 812px). Fixed-position elements are positioned against the viewport rather than this padding box, so the panel itself does not move — which is why pinning is opt-in: a page with its own fixed header will let that header run on underneath. */ html.lxh-pinned { padding-right: var(--lxh-w) !important; transition: padding-right 0.22s cubic-bezier(0.4, 0, 0.2, 1); } /* --------------------------------------------------------------------------- Resize handle --------------------------------------------------------------------------- */ #lxh-resize { position: absolute; left: -3px; top: 0; bottom: 0; width: 8px; cursor: ew-resize; background: transparent; border: none; padding: 0; } #lxh-resize:hover, #lxh-resize:focus-visible { background: rgba(30, 64, 175, 0.18); outline: none; } /* --------------------------------------------------------------------------- Header --------------------------------------------------------------------------- */ .lxh-head { flex: 0 0 auto; padding: 14px 16px 10px; border-bottom: 1px solid var(--lxh-line); background: var(--lxh-bg); } .lxh-head-row { display: flex; align-items: center; gap: 8px; } .lxh-title { flex: 1 1 auto; margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--lxh-ink); } .lxh-iconbtn { flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--lxh-muted); cursor: pointer; font-size: 14px; } .lxh-iconbtn:hover { background: var(--lxh-line-soft); color: var(--lxh-ink); } .lxh-iconbtn:focus-visible { outline: 2px solid var(--lxh-blue); outline-offset: 1px; } .lxh-iconbtn[aria-pressed='true'] { background: var(--lxh-blue-soft); border-color: #bfdbfe; color: var(--lxh-blue); } /* Search */ .lxh-searchwrap { position: relative; margin-top: 10px; } #lxh-search { width: 100%; height: 38px; padding: 0 32px 0 34px; border: 1px solid var(--lxh-line); border-radius: 8px; background: var(--lxh-bg-soft); font: 400 14px/1 var(--lxh-font); color: var(--lxh-ink); box-sizing: border-box; } #lxh-search:focus { outline: none; border-color: var(--lxh-blue); background: var(--lxh-bg); box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12); } /* Drawn, not typed: U+2315 is missing from common UI font stacks and fell back to a bare circle in Chrome. */ .lxh-searchwrap .lxh-searchicon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; color: var(--lxh-muted); pointer-events: none; display: block; } .lxh-searchwrap .lxh-searchicon svg { display: block; width: 13px; height: 13px; } #lxh-search-clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border: none; border-radius: 5px; background: transparent; color: var(--lxh-muted); cursor: pointer; } /* Breadcrumb of the resolved feature — Practice > Page > Section > Feature */ .lxh-crumb { margin-top: 8px; font-size: 11.5px; color: var(--lxh-muted); letter-spacing: 0.01em; } .lxh-crumb span + span::before { content: ' › '; color: #cbd5e1; } /* --------------------------------------------------------------------------- Tabs --------------------------------------------------------------------------- */ .lxh-tabs { flex: 0 0 auto; display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--lxh-line); background: var(--lxh-bg); overflow-x: auto; } .lxh-tab { flex: 0 0 auto; padding: 9px 10px; border: none; border-bottom: 2px solid transparent; background: transparent; color: var(--lxh-muted); font: 600 12.5px/1 var(--lxh-font); cursor: pointer; white-space: nowrap; } .lxh-tab:hover { color: var(--lxh-ink); } .lxh-tab[aria-selected='true'] { color: var(--lxh-blue); border-bottom-color: var(--lxh-blue); } .lxh-tab:focus-visible { outline: 2px solid var(--lxh-blue); outline-offset: -2px; } /* --------------------------------------------------------------------------- Body --------------------------------------------------------------------------- */ .lxh-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 14px 16px 28px; -webkit-overflow-scrolling: touch; } .lxh-pane[hidden] { display: none; } .lxh-sec { margin: 0 0 18px; } .lxh-sec-h { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--lxh-muted); } /* Result / topic card */ .lxh-card { display: block; width: 100%; text-align: left; padding: 10px 11px; margin-bottom: 6px; border: 1px solid var(--lxh-line); border-radius: var(--lxh-radius); background: var(--lxh-bg); cursor: pointer; font: inherit; color: inherit; transition: border-color 0.12s ease, background 0.12s ease; } .lxh-card:hover { border-color: #bfdbfe; background: var(--lxh-blue-soft); } .lxh-card:focus-visible { outline: 2px solid var(--lxh-blue); outline-offset: 1px; } /* Both are inside a