/* ────────────────────────────────────────────────────────────────────
 * .demo-code-popover — copy-pasteable code chip for buyer-docs surfaces.
 *
 * Demo-tier primitive (NOT an engine primitive). Lives entirely under
 * `demo/` so the engine bundle (`dist/builder.css`) doesn't carry
 * ~5 KB of unused styles when consumed by any downstream host other
 * than the demo itself.
 *
 * Class prefix is `.demo-*` (not `.bjs-*`) — `.bjs-` is reserved for
 * surfaces the BuilderJS engine actually renders. A code chip wrapped
 * around a `<pre>` for buyer docs is purely a buyer-package concern.
 *
 * Originally lived in src/builder.css (W4); migrated here 2026-05-08
 * during W6 Phase A.B's design-confirm pass. The migration left
 * `--bjs-*` token references behind by accident — fixed in W6.F.A.0
 * (post-screenshot iteration): every var() now points at `--demo-*`
 * tokens (defined in tokens.css, always loaded), so the popover paints
 * correctly on every demo/* page WITHOUT the engine bundle.
 *
 * Anatomy:
 *   .demo-code-popover                  ← container, dark surface, radius-md
 *     .demo-code-popover__header        ← 3 grey dots · lang label · copy button
 *       .demo-code-popover__lang        ← "JavaScript" / "PHP" / "HTML" chip
 *       .demo-code-popover__copy        ← copy-to-clipboard button (right-aligned)
 *         .demo-code-popover__copy-icon ← clipboard glyph
 *         .demo-code-popover__copy-label← "Copy" / "Copied!" text
 *     .demo-code-popover__body          ← <pre><code> block, mono, scrollable
 *
 * Internal tokens (private to .demo-code-popover, scoped via :root inside
 * the element so they don't leak to the host page):
 *   --demo-code-bg / -bg-elevated / -fg / -muted / -border / -accent / -success.
 *
 * Why dark-fixed: matches GitHub README convention + Stripe / Vercel /
 * Linear docs. A code chip that flips to white-on-light loses the
 * "this is the snippet you'll paste" affordance.
 *
 * Copy state machine:
 *   1. rest    — copy button shows clipboard icon + "Copy" label
 *   2. copied  — JS adds .is-copied; icon → check, label → "Copied!"
 *   3. (auto-revert after ~1.6s — JS removes .is-copied)
 *
 * Consumed by:
 *   - demo/_partials/example.php       (W4 example chrome)
 *   - demo/_partials/features/dev.php  (W9 features page)
 *   - demo/_partials/design/components.php (W1 design system showcase)
 *   - demo/_partials/design/code-highlight.php (W6.F.A.0 palette showcase)
 *   - any cookbook entry (Phase C.B+) or future docs portal entry that
 *     needs to render a copy-pasteable code snippet.
 *
 * Loaded globally from _html-head.php since W6.F.A.0 — every demo/*
 * page gets the popover chrome + Prism syntax highlight for free.
 * ──────────────────────────────────────────────────────────────────── */

.demo-code-popover {
    /* Dark surface, fixed in both themes. */
    --demo-code-bg:           #0b1020;
    --demo-code-bg-elevated:  #131a30;
    --demo-code-fg:           #e6edf3;
    --demo-code-muted:        #8b949e;
    --demo-code-border:       rgba(255, 255, 255, 0.08);
    --demo-code-accent:       #79c0ff;
    --demo-code-success:      #56d364;

    display: inline-block;
    width: 100%;
    background: var(--demo-code-bg);
    color: var(--demo-code-fg);
    border: 1px solid var(--demo-code-border);
    border-radius: var(--demo-radius-md);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 4px 16px rgba(11, 16, 32, 0.18);
    overflow: hidden;
    font-family: var(--demo-font-mono);
    font-size: var(--demo-fs-sm);
    line-height: var(--demo-lh-body);
}

/* Header — flex row with 3 subtle grey dots on the far left, language
 * label next to them, and the Copy button pushed to the far right
 * (margin-left: auto). Dots are pure-CSS via ::before so every existing
 * .demo-code-popover instance picks them up without a markup change.
 * Visual reference: VS Code title bar, Tailwind UI code chip. */
.demo-code-popover__header {
    display: flex;
    align-items: center;
    gap: var(--demo-space-3);
    padding: var(--demo-space-2) var(--demo-space-4);
    background: var(--demo-code-bg-elevated);
    border-bottom: 1px solid var(--demo-code-border);
}
.demo-code-popover__header::before {
    /* 3 subtle grey dots: 6 px diameter, 12 px gaps. Color resolves
     * from the popover's --demo-code-muted so light-pair overrides
     * (design.php side-by-side panel) flip the dots to a darker grey
     * automatically — no separate rule needed. */
    content: '';
    flex: 0 0 36px;
    height: 6px;
    background-image:
        radial-gradient(circle at 3px 50%,  var(--demo-code-muted) 0 3px, transparent 4px),
        radial-gradient(circle at 15px 50%, var(--demo-code-muted) 0 3px, transparent 4px),
        radial-gradient(circle at 27px 50%, var(--demo-code-muted) 0 3px, transparent 4px);
    background-repeat: no-repeat;
    opacity: 0.55;
}

.demo-code-popover__lang {
    display: inline-flex;
    align-items: center;
    gap: var(--demo-space-1);
    font-family: var(--demo-font-sans);
    font-size: var(--demo-fs-xs);
    font-weight: var(--demo-fw-semibold);
    letter-spacing: var(--demo-ls-caps);
    text-transform: uppercase;
    color: var(--demo-code-muted);
}

.demo-code-popover__copy {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--demo-space-1);
    height: 28px;
    padding: 0 var(--demo-space-3);
    background: transparent;
    border: 1px solid var(--demo-code-border);
    border-radius: var(--demo-radius-sm);
    color: var(--demo-code-fg);
    font-family: var(--demo-font-sans);
    font-size: var(--demo-fs-xs);
    font-weight: var(--demo-fw-semibold);
    line-height: 1;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.demo-code-popover__copy:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
}
.demo-code-popover__copy:active {
    background: rgba(255, 255, 255, 0.10);
}
.demo-code-popover__copy:focus-visible {
    outline: 2px solid var(--demo-code-accent);
    outline-offset: 2px;
}

.demo-code-popover__copy-icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.demo-code-popover__copy-icon::before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'/></svg>") center / contain no-repeat;
}
.demo-code-popover.is-copied .demo-code-popover__copy-icon::before {
    /* Check glyph swaps in when JS toggles `.is-copied`. */
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>") center / contain no-repeat;
}
.demo-code-popover.is-copied .demo-code-popover__copy {
    color: var(--demo-code-success);
    border-color: var(--demo-code-success);
}

.demo-code-popover__body {
    margin: 0;
    padding: var(--demo-space-4) var(--demo-space-5);
    background: var(--demo-code-bg);
    color: var(--demo-code-fg);
    overflow-x: auto;
    /* Pre preserves whitespace; consumers can wrap-soft via .demo-code-popover--wrap. */
    white-space: pre;
}
.demo-code-popover__body code {
    background: transparent;
    color: inherit;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
.demo-code-popover--wrap .demo-code-popover__body { white-space: pre-wrap; }
.demo-code-popover--inline {
    display: inline-block;
    width: auto;
    max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .demo-code-popover__copy { transition: none; }
}

/* ============================================================================
 * .demo-code-tabs — multi-variant code popover (PHP / Pure HTML toggle).
 *
 * Used by examples that ship a pure-HTML sibling next to the canonical PHP
 * snippet (1-quickstart, 2-hello-world, 4-dark-mode — see BUILDER.md RULE I).
 * Single-variant blocks render via the plain .demo-code-popover above; this
 * primitive only kicks in when `$block['variants']` is set (see
 * demo/_partials/example.php → $renderCodeBlock).
 *
 * The body popover inside a .demo-code-tabs__panel is the same primitive
 * as a stand-alone .demo-code-popover — copy button, language pill, etc.
 * all just work.
 * ============================================================================ */
.demo-code-tabs {
    margin: var(--demo-space-2) 0 var(--demo-space-4);
}
.demo-code-tabs__strip {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--demo-border);
    padding: 0 0 0 2px;
}
.demo-code-tabs__btn {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: var(--demo-space-2) var(--demo-space-4);
    font: inherit;
    font-size: var(--demo-fs-sm);
    font-weight: var(--demo-fw-semibold);
    color: var(--demo-text-muted);
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease;
    margin-bottom: -1px;
    border-radius: var(--demo-radius-sm) var(--demo-radius-sm) 0 0;
}
.demo-code-tabs__btn:hover {
    color: var(--demo-text);
    background: var(--demo-bg-elevated);
}
.demo-code-tabs__btn.is-active {
    color: var(--demo-accent);
    border-bottom-color: var(--demo-accent);
}
.demo-code-tabs__btn:focus-visible {
    outline: 2px solid var(--demo-accent);
    outline-offset: 2px;
}
.demo-code-tabs__panel {
    padding-top: var(--demo-space-3);
}
.demo-code-tabs__note {
    margin: 0 0 var(--demo-space-2) 0;
    font-size: var(--demo-fs-xs);
    color: var(--demo-text-muted);
    line-height: 1.5;
}
.demo-code-tabs__note code {
    font-family: var(--demo-font-mono);
    font-size: 0.92em;
    background: var(--demo-bg-elevated);
    padding: 1px 5px;
    border-radius: 3px;
}