/* ============================================================================= * IN-12155 brief-C — styles for . * ============================================================================= * WHY THIS IS A SEPARATE FILE, and not a block in resource-library-2.css: * every rule in that file is scoped under .rl2-page (brief A's constraint), and * this component never renders on the RL2 page — it renders inside Lotty. A * rule written there would simply not apply here. * * It is also deliberately NOT a block in _ai-workspace/ai-workspace.css: that * file is hot for IN-12081 QA, and RL2 styling that lives in it is RL2 code * that outlives RL2's own directory. * * SCOPING RULE (brief B D8, verbatim): every class is rl2- prefixed, and * rl2-src- specifically, so loading this file globally changes exactly nothing * outside the component — and the component itself only exists where the * permission gate passed. * * TWO DELIBERATE EXCEPTIONS, both added by fix1 and both narrowed by :has() so * they can only ever match an element that CONTAINS our own component: the bare * `rl2-source-picker` element selector, and the `.ai-form-section` / * `.ai-panel-section` wrapper rule directly below. Neither can match anything * in a Lotty surface that does not already hold an RL2 mount. See fix1. * * The visual target is Lotty's own .ai-custom-dropdown (ai-workspace.css:210 * trigger / :272 menu / :287 rows) rather than the RL2 page's Cobb-red theme: * the picker sits in a Lotty form, so it should read as part of that form. The * ONE red note is the chip, which is RL2's own colour and the point of the * demo's S1 -> S2 moment. * ========================================================================== */ /* ============================================================================= * fix1 (2026-09-22) — THE STACKING FIX. Read this before touching a z-index. * ============================================================================= * DEFECT: in the Lotty config panel the open menu rendered BEHIND the "Source * Materials" dropzone that follows it — first row visible, the rest occluded. * * ROOT CAUSE, and it is not in this file: _ai-workspace/ai-workspace.css:50-54 * * .ai-config-panel .ai-form-section:nth-child(1) { animation: formFadeIn 0.4s ease-out 0.2s both; } * …through :nth-child(5) * @keyframes formFadeIn { 0% {opacity:0; transform:translateX(-10px);} 100% {opacity:1; transform:translateX(0);} } * * `both` is animation-fill-mode, so the 100% keyframe keeps applying forever * after the entrance animation ends. Its computed transform is translateX(0) — * which is NOT `none`, and any transform other than none creates a stacking * context permanently. So each of the config panel's first five form sections * is its own stacking context at z-index auto, painted in DOM order. * * Our mount is child 3 of the scroll container and Source Materials is child 4 * (ai-workspace.html:231 and :345), so both are inside that 1..5 range. The * menu's own z-index — 1001, or a million — is TRAPPED inside child 3's * context and can never out-paint child 4. z-index does not cross a stacking * context boundary. Raising the menu was never going to work; the WRAPPER has * to be raised, and only the wrapper. * * THE FIX, and the precedent for it: Lotty already hit this exact bug and fixed * it the same way. Child 1 — the Standards section, ai-workspace.html:26 — * carries `class="ai-form-section p-relative z9"`, i.e. position:relative * (style.css:70590) + z-index:9 (style.css:40350). That is this remedy applied * by hand in their markup. We apply it from here instead, because brief C-fix1 * forbids touching an existing line in the hot Lotty files. * * :has() is what makes that possible from a stylesheet — there is no other way * to select an ancestor. Support floor: Chrome 105 / Safari 15.4 / Firefox 121. * In a browser without :has() the whole selector list is invalid and dropped, * which leaves today's behaviour rather than breaking anything new. * * WHY z-index 5 AND NOT SOMETHING BIGGER. It only has to beat the sections that * FOLLOW ours, and every one of those is z-index auto (nothing after * ai-workspace.html:231 in that container declares a z-index at all). 5 also * keeps us deliberately BELOW Lotty's own z9 Standards section, so if their * standards dropdown is open and hangs over our section, theirs still wins — * which is right, since it sits above ours and opens downward into our space. * Do not raise this to "be safe": doing so takes that ordering away. * ========================================================================== */ rl2-source-picker { /* An unknown element defaults to display:inline. Every mount puts block content inside it, so make the box honest. Not the cause of the defect — an inline box creates no stacking context — but it is the kind of thing that makes the next stacking bug harder to read. */ display: block; } .ai-form-section:has(> rl2-source-picker), .ai-panel-section:has(> rl2-source-picker) { /* Covers all three mounts: ai-workspace.html:231 (.ai-form-section), ai-workspace-panel.html:122 (.ai-panel-section) and froala-lotty-modal.html:128 (.ai-form-section). The `>` keeps this from ever matching a section that merely contains one somewhere deep. Only the config panel is actually broken without this — in the side panel and the Froala modal the sections are plain in-flow blocks with no stacking context of their own. It is applied uniformly anyway so the three surfaces stack by the same rule and none of them depends on a neighbouring stylesheet staying the way it is today. */ position: relative; z-index: 5; } .rl2-src-picker { /* Declared on the component root, never on :root — the same reasoning as brief A's --rl2-* block: a :root declaration would hand these names to the whole application. */ --rl2-src-red: #a20f1f; --rl2-src-red-soft: #fbeaec; --rl2-src-border: #ddd; --rl2-src-border-hover: #bbb; --rl2-src-text: #333; --rl2-src-muted: #767676; --rl2-src-bg: #fff; --rl2-src-hover: #f5f5f5; margin-bottom: 20px; box-sizing: border-box; text-align: left; } .rl2-src-picker *, .rl2-src-picker *:before, .rl2-src-picker *:after { box-sizing: border-box; } .rl2-src-label { display: block; font-weight: 600; color: var(--rl2-src-text); margin-bottom: 10px; } .rl2-src-dropdown { position: relative; } .rl2-src-trigger { /* brief-F turned this from a
into a real