/* ────────────────────────────────────────────────────────────────────
 * .demo-mini-builder — buyer-package layout primitive (W6.A.B).
 *
 * Demo-tier primitive (NOT an engine primitive). Lives entirely under
 * `demo/` so the engine bundle (`dist/builder.css`) doesn't carry
 * any of this when consumed by any downstream host other than the demo.
 *
 * Layout-only wrapper for hosting a Builder instance in a constrained
 * space (Phase B inline example demos · Phase C.B cookbook chrome
 * variants · in-line docs embeds). Defines the OUTER grid + sizing +
 * chrome borders; the four named mounts (`__header` / `__widgets` /
 * `__canvas` / `__settings`) are the surfaces a buyer feeds to
 * `new Builder({...})` via the matching selectors.
 *
 * With W6.A.A.1 null-tolerance, sidebar mounts can be absent and the
 * engine skips them cleanly — that's what powers `--minimal` /
 * `--canvas-only` / `--compact-2col` without forcing buyers to ship
 * hidden orphan `<div>`s.
 *
 * 8 variants:
 *   --minimal              canvas + thin top strip (no sidebars)
 *   --canvas-only          pure canvas, no chrome at all
 *   --compact-2col         canvas + right Settings (no Widgets)
 *   --compact-3col         classic 3-col, narrower sidebars
 *   --rich-3col-header     3-col + custom header actions row
 *   --sidebar-only         floating Settings panel overlaid on canvas
 *   --mobile               tab-based mobile chrome (radio-tab visibility)
 *   --card                 card-shaped (small footprint, rounded, shadowed)
 *
 * Tokens — all `--demo-*` (defined in tokens.css). The `--bjs-*` engine
 * tokens are reserved for surfaces the BuilderJS engine itself renders
 * (inside `dist/builder.css`); demo chrome (this primitive included)
 * is a separate, independent layer that must not depend on the engine
 * bundle to paint correctly. Pre-W6.F.A.0 this file mistakenly used
 * `--bjs-*` references — the design.php showcase silently rendered
 * unstyled because engine tokens weren't loaded there. Fixed in
 * W6.F.A.0: every var() now points at `--demo-*` tokens.
 *
 * Cross-references:
 *   - Design doc: docs/archived/demo/MINI_BUILDER_PRIMITIVE.md
 *   - Wave file:  docs/archived/demo/W6_EXAMPLES_BIG.md (Phase A.B + Phase B + Phase C.B)
 * ──────────────────────────────────────────────────────────────────── */

.demo-mini-builder {
    display: grid;
    width: 100%;
    height: 480px;
    border: 1px solid var(--demo-border);
    border-radius: var(--demo-radius-lg);
    background: var(--demo-bg);
    color: var(--demo-text);
    font-size: var(--demo-fs-base);
    overflow: hidden;
    box-sizing: border-box;
    grid-template-areas: "canvas";
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.demo-mini-builder *,
.demo-mini-builder *::before,
.demo-mini-builder *::after {
    box-sizing: border-box;
}

.demo-mini-builder__header,
.demo-mini-builder__widgets,
.demo-mini-builder__canvas,
.demo-mini-builder__settings,
.demo-mini-builder__tabs,
.demo-mini-builder__tabbody {
    overflow: auto;
    min-height: 0;
    min-width: 0;
}

.demo-mini-builder__header {
    grid-area: header;
    background: var(--demo-bg-elevated);
    border-bottom: 1px solid var(--demo-border);
    padding: var(--demo-space-2) var(--demo-space-4);
    display: flex;
    align-items: center;
    gap: var(--demo-space-2);
    font-size: var(--demo-fs-sm);
    font-weight: var(--demo-fw-medium);
    color: var(--demo-text-secondary);
}

.demo-mini-builder__widgets {
    grid-area: widgets;
    background: var(--demo-bg-elevated);
    border-right: 1px solid var(--demo-border);
    padding: var(--demo-space-3);
}

.demo-mini-builder__canvas {
    grid-area: canvas;
    background: var(--demo-bg);
    position: relative;
    overflow: auto;
}

.demo-mini-builder__settings {
    grid-area: settings;
    background: var(--demo-bg-elevated);
    border-left: 1px solid var(--demo-border);
    padding: var(--demo-space-3);
}

/* ─── Variant 1: --minimal ─────────── thin top strip + canvas ────────── */
.demo-mini-builder--minimal {
    grid-template-areas:
        "header"
        "canvas";
    grid-template-rows: 36px 1fr;
}

/* ─── Variant 2: --canvas-only ─────── pure canvas, no chrome ─────────── */
.demo-mini-builder--canvas-only {
    border: none;
    border-radius: 0;
    background: transparent;
}

/* ─── Variant 3: --compact-2col ────── canvas + right Settings ────────── */
.demo-mini-builder--compact-2col {
    grid-template-areas: "canvas settings";
    grid-template-columns: 1fr 240px;
}

/* ─── Variant 4: --compact-3col ────── classic 3-col, narrow sidebars ─── */
.demo-mini-builder--compact-3col {
    grid-template-areas: "widgets canvas settings";
    /* Settings track bumped 240 → 280 so DimensionControl's full
     * "label · slider · value · unit" row fits without horizontal
     * scroll. The 220 px engine compact-mode breakpoint
     * (src/builder.css `.dimension-control @container`) is the
     * safety net — if a buyer host narrows further the slider
     * collapses. compact-3col now matches rich-3col-header on the
     * Settings dimension; widgets stays at 200 px (the 95 px tile
     * minimum lets the auto-fit grid still render 2-up). */
    grid-template-columns: 200px 1fr 280px;
}

/* ─── Variant 5: --rich-3col-header ── 3-col + header actions row ─────── */
.demo-mini-builder--rich-3col-header {
    grid-template-areas:
        "header  header  header"
        "widgets canvas  settings";
    grid-template-rows: 48px 1fr;
    grid-template-columns: 220px 1fr 280px;
}

/* ─── Variant 6: --sidebar-only ────── floating Settings overlay ──────── */
.demo-mini-builder--sidebar-only {
    position: relative;
}
.demo-mini-builder--sidebar-only .demo-mini-builder__settings {
    grid-area: unset;
    position: absolute;
    inset: var(--demo-space-3) var(--demo-space-3) auto auto;
    width: 280px;
    max-height: calc(100% - var(--demo-space-5));
    border: 1px solid var(--demo-border);
    border-radius: var(--demo-radius-md);
    box-shadow: var(--demo-shadow-md);
    background: var(--demo-bg);
    overflow: auto;
    z-index: 10;
}

/* ─── Variant 7: --mobile ──────────── tab-based mobile chrome ────────── */
.demo-mini-builder--mobile {
    grid-template-areas:
        "tabs"
        "tabbody";
    grid-template-rows: 44px 1fr;
}
.demo-mini-builder--mobile .demo-mini-builder__tabs {
    grid-area: tabs;
    display: flex;
    background: var(--demo-bg-elevated);
    border-bottom: 1px solid var(--demo-border);
}
.demo-mini-builder--mobile .demo-mini-builder__tab {
    flex: 1;
    padding: var(--demo-space-3);
    text-align: center;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--demo-text-secondary);
    font: inherit;
    border-bottom: 2px solid transparent;
}
.demo-mini-builder--mobile .demo-mini-builder__tab.is-active {
    color: var(--demo-text-strong);
    border-bottom-color: var(--demo-primary);
    background: var(--demo-bg);
}
.demo-mini-builder--mobile .demo-mini-builder__tabbody {
    grid-area: tabbody;
    position: relative;
}
.demo-mini-builder--mobile .demo-mini-builder__widgets,
.demo-mini-builder--mobile .demo-mini-builder__canvas,
.demo-mini-builder--mobile .demo-mini-builder__settings {
    grid-area: unset;
    border: none;
    position: absolute;
    inset: 0;
    display: none;
}
.demo-mini-builder--mobile[data-mobile-tab="widgets"]  .demo-mini-builder__widgets,
.demo-mini-builder--mobile[data-mobile-tab="canvas"]   .demo-mini-builder__canvas,
.demo-mini-builder--mobile[data-mobile-tab="settings"] .demo-mini-builder__settings {
    display: block;
}

/* ─── Variant 8: --card ────────────── card-shaped (small + shadowed) ─── */
.demo-mini-builder--card {
    width: 360px;
    height: 420px;
    border-radius: var(--demo-radius-lg);
    box-shadow: var(--demo-shadow-md);
    grid-template-areas:
        "header"
        "canvas";
    grid-template-rows: 40px 1fr;
}

/* ─── Multi-instance side-by-side helper (B5 multi-page demo) ────────── */
.demo-mini-builder-grid {
    display: grid;
    gap: var(--demo-space-3);
    grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
    .demo-mini-builder-grid--cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .demo-mini-builder-grid--cols-2 .demo-mini-builder {
        height: 380px;
    }
    .demo-mini-builder-grid--cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .demo-mini-builder-grid--cols-3 .demo-mini-builder {
        height: 320px;
    }
}

/* ─── Loading + error overlays ────────────────────────────────────────── */
.demo-mini-builder__loading,
.demo-mini-builder__error {
    grid-area: canvas;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--demo-text-muted);
    font-size: var(--demo-fs-sm);
    padding: var(--demo-space-4);
    text-align: center;
}
.demo-mini-builder__error { color: var(--demo-error); }

@media (prefers-reduced-motion: reduce) {
    .demo-mini-builder, .demo-mini-builder * { transition: none; }
}