/* =============================================================================
 * IN-12155 brief-C — styles for <rl2-source-picker>.
 * =============================================================================
 * 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 {
    width: 100%;
    min-height: 40px;
    padding: 10px 32px 10px 12px;
    border: 1px solid var(--rl2-src-border);
    border-radius: 6px;
    background: var(--rl2-src-bg);
    color: var(--rl2-src-muted);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color 0.15s ease;
}

.rl2-src-trigger:hover {
    border-color: var(--rl2-src-border-hover);
}

.rl2-src-trigger.rl2-src-is-open {
    border-radius: 6px 6px 0 0;
    border-color: var(--rl2-src-border-hover);
}

.rl2-src-trigger.rl2-src-is-picked {
    color: var(--rl2-src-text);
}

.rl2-src-trigger-text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rl2-src-trigger-picked {
    font-weight: 600;
}

.rl2-src-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--rl2-src-muted);
    font-size: 12px;
    pointer-events: none;
}

.rl2-src-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 220px;
    overflow-y: auto;
    background: var(--rl2-src-bg);
    border: 1px solid var(--rl2-src-border);
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    /* fix1 corrected the comment that used to sit here. This 1001 does NOT
       out-rank Lotty's 1000 menus (ai-workspace.css:283) in any general sense:
       the wrapper rule above makes our section a stacking context, so this
       value is only ever compared against our own descendants. It is kept at
       1001 purely so the menu still wins locally in a browser that dropped the
       :has() rule. The cross-surface ordering is decided by the wrapper's
       z-index: 5, not by this number — change that one, not this one. */
    z-index: 1001;
}

.rl2-src-row-wrap {
    display: block;
}

.rl2-src-row-off {
    /* The wrapper is what the pointer actually hits on an ineligible row — the
       disabled button inside it takes no mouse events — so the wrapper carries
       the cursor as well as the repeated title. */
    cursor: not-allowed;
}

.rl2-src-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: var(--rl2-src-text);
    text-align: left;
    cursor: pointer;
    transition: background 0.1s ease;
}

.rl2-src-row:hover:not([disabled]) {
    background: var(--rl2-src-hover);
}

.rl2-src-row[disabled] {
    /* A real disabled button, not a row with its handler removed. The cursor
       and the muted text say so before the tooltip does. */
    color: var(--rl2-src-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

.rl2-src-row-current {
    background: var(--rl2-src-red-soft);
    font-weight: 600;
}

.rl2-src-row-title {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rl2-src-ext {
    flex: 0 0 auto;
    padding: 1px 7px;
    border: 1px solid var(--rl2-src-border);
    border-radius: 10px;
    background: var(--rl2-src-hover);
    color: var(--rl2-src-muted);
    font-size: 11px;
    line-height: 16px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.rl2-src-empty {
    padding: 10px 12px;
    color: var(--rl2-src-muted);
    font-size: 13px;
}

/* --- The "Source:" chip ---------------------------------------------------
   Shown on every mounted (and gated) surface whenever the service holds a
   selection, including on arrival from the RL2 page's Lotty button. */

.rl2-src-chip-row {
    margin-top: 8px;
}

.rl2-src-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 6px 4px 10px;
    border: 1px solid var(--rl2-src-red);
    border-radius: 14px;
    background: var(--rl2-src-red-soft);
    color: var(--rl2-src-red);
    font-size: 12px;
    line-height: 18px;
}

.rl2-src-chip-label {
    flex: 0 0 auto;
    font-weight: 700;
}

.rl2-src-chip-title {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rl2-src-chip-x {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--rl2-src-red);
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
}

.rl2-src-chip-x:hover {
    background: var(--rl2-src-red);
    color: #fff;
}