/* style.css — cookbook/2-compact-2col — `.demo-mini-builder--compact-2col`.
 *
 * Self-contained chrome variant (W6.C.B.2). Pair this file with init.js
 * (sibling) and dist/builder.css + dist/builder.js, and you have a fully-
 * working Builder mount in 4 files. NO shared mini-builder.css. NO
 * examples.css. The `.demo-mini-builder--compact-2col` rules below ARE
 * the variant — copy them verbatim into your own stylesheet.
 *
 * ─── Buyer use case ─────────────────────────────────────────────────
 * Read-mostly editor where users edit text + colours via the right-side
 * Settings panel only — no widgets palette. Pick this when content is
 * AUTHORED elsewhere (CMS export, AI generation, copy-team handoff) and
 * the buyer's job is just polish: tweak headlines, swap brand colours,
 * fix typos. Saves vertical real-estate by dropping the header strip.
 *
 * ─── Constructor null-args (W6.A.A.1 null-tolerance) ────────────────
 *   new Builder({
 *       mainContainer:     '#YourCanvas',
 *       settingsContainer: '#YourSettings',
 *       widgetsContainer:  null,   // ← no widgets palette
 *   });
 * The engine skips the omitted `widgetsContainer` mount cleanly — no
 * NPE, no console error, regardless of whether a DOM node exists for
 * it. `settingsContainer` IS supplied (single null-arg pattern), so
 * the right-hand panel still renders the per-element Settings UI.
 *
 * ─── Tokens consumed (already exposed by dist/builder.css) ──────────
 *   --bjs-bg, --bjs-bg-subtle, --bjs-border, --bjs-border-light,
 *   --bjs-radius-lg, --bjs-radius-md, --bjs-text, --bjs-text-secondary,
 *   --bjs-fs-sm, --bjs-fs-base, --bjs-space-2, --bjs-space-3,
 *   --bjs-primary.
 */

/* ─── Base wrapper (4-slot grid; canvas-only fallback) ─────────────── */
.demo-mini-builder {
    display: grid;
    width: 100%;
    height: 480px;
    border: 1px solid var(--bjs-border);
    border-radius: var(--bjs-radius-lg);
    background: var(--bjs-bg);
    color: var(--bjs-text);
    font-size: var(--bjs-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__canvas,
.demo-mini-builder__settings {
    overflow: auto;
    min-height: 0;
    min-width: 0;
}

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

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

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

/* ─── Host toolbar ───────────────────────────────────────────────────
 * The `--compact-2col` variant has NO header slot — the wrapper is just
 * canvas + settings. So the buyer's Save button (and any other host
 * chrome: title, breadcrumb, mode toggle) lives OUTSIDE the wrapper, in
 * the host page's own toolbar. The class below is a tiny convention so
 * the cookbook's example renders a sensible bar without leaning on
 * `examples.css`. Buyers can drop this rule and use their host app's
 * existing header / nav / tab bar instead — the Builder mount doesn't
 * care where the click handler lives.
 */
.demo-host-toolbar {
    display: flex;
    align-items: center;
    gap: var(--bjs-space-2);
    margin-bottom: var(--bjs-space-3);
    font-size: var(--bjs-fs-sm);
    color: var(--bjs-text-secondary);
}

.demo-host-toolbar__title {
    margin-right: auto;
    font-weight: 600;
    color: var(--bjs-text);
    font-size: var(--bjs-fs-base);
}

.demo-host-toolbar button {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--bjs-border-light);
    background: var(--bjs-bg);
    color: var(--bjs-text);
    padding: 4px 10px;
    border-radius: var(--bjs-radius-md);
    font: inherit;
    font-size: var(--bjs-fs-sm);
    line-height: 1.2;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.demo-host-toolbar button:hover {
    background: var(--bjs-bg-subtle);
    border-color: var(--bjs-border);
}
.demo-host-toolbar button:focus-visible {
    outline: 2px solid var(--bjs-primary);
    outline-offset: 2px;
}
.demo-host-toolbar button:active {
    transform: translateY(1px);
}
.demo-host-toolbar button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

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