<!--
    Display Picker Lightbox — Lumenworks studio-console shell.

    Channel: cyan (sources / screen). Re-uses the .lightbox shell tokens
    in modal.css; .lightbox-bracket-br paints the second silkscreen
    corner (top-left bracket comes from .lightbox-content::after).

    The header rack (eyebrow + display title) and the optional foot key
    hint are scoped to .display-picker-content so the image lightbox
    keeps its minimal, image-first layout.

    Title is split into a static lead word ("Select") and a channel-tinted
    accent ("Display" / "Device"); displays.ts swaps the accent + eyebrow
    channel label depending on whether we are picking a monitor or an
    engine-owned device (camera, scrcpy).
-->
<div id="display-picker-lightbox" class="lightbox" data-ch="cyan" onclick="closeDisplayPicker(event)">
    <div class="lightbox-content display-picker-content">
        <span class="lightbox-bracket-br" aria-hidden="true"></span>
        <button class="lightbox-close" type="button" onclick="closeDisplayPicker()" title="Close" data-i18n-aria-label="aria.close">&#x2715;</button>

        <header class="display-picker-head">
            <div class="display-picker-lede">
                <div class="display-picker-eyebrow" aria-hidden="true">
                    <span class="display-picker-eyebrow__dot"></span>
                    <span data-role="label" data-i18n="displays.picker.eyebrow.label">Source</span>
                    <span class="display-picker-eyebrow__sep"></span>
                    <span class="display-picker-eyebrow__channel" data-i18n="displays.picker.eyebrow.channel">Display · Map</span>
                </div>
                <h2 class="display-picker-title" id="display-picker-title">
                    <span data-role="lead" data-i18n="displays.picker.title.lead">Select</span>
                    <em class="display-picker-title__accent" data-i18n="displays.picker.title.accent">Display</em>
                </h2>
            </div>
        </header>

        <div id="display-picker-canvas" class="display-picker-canvas">
            <div class="loading-spinner"></div>
        </div>

        <footer class="display-picker-foot" aria-hidden="true">
            <span><kbd>esc</kbd><span data-i18n="displays.picker.foot.dismiss">dismiss</span></span>
            <span><kbd>click</kbd><span data-role="select" data-i18n="displays.picker.foot.select">select monitor</span></span>
        </footer>
    </div>
</div>
