/* style.css — cookbook/8-card — `.demo-mini-builder--card`.
 *
 * Self-contained chrome variant (W6.C.B.8). Pair this file with init.js
 * (sibling) and dist/builder.css + dist/builder.js, and you have a fully-
 * working card-shaped Builder mount in 4 files. NO shared mini-builder.css.
 * NO examples.css. The `.demo-mini-builder--card` rules below ARE the
 * variant — copy them verbatim into your own stylesheet.
 *
 * ─── Buyer use case ─────────────────────────────────────────────────
 * Builder embedded as a dashboard widget tile alongside other small
 * cards (analytics widgets, status panels, quick-action buttons).
 * Fixed 360 × 420 footprint + rounded corners + drop shadow makes it
 * read as one card among many — not as the page's primary surface.
 * Pick this when:
 *
 *   - Your host app's main surface is a dashboard / cards grid where
 *     the Builder is one of N tiles, not the page-defining feature.
 *   - You need a predictable, small footprint that doesn't fight for
 *     attention with surrounding components.
 *   - Buyers preview / quick-edit a single email or page block here
 *     and "expand" elsewhere for the full editor.
 *
 * The defining property: explicit `width: 360px; height: 420px` — the
 * ONLY variant with hardcoded pixel dimensions (every other cookbook
 * variant uses `width: 100%` and a flexible height). The card's
 * dimensions are part of its identity; locked by the cookbook spec's
 * variant-defining-property gate (`card has fixed width + height`).
 *
 * ─── Constructor null-args (W6.A.A.1 null-tolerance) ────────────────
 *   new Builder({
 *       mainContainer:     '#YourCardCanvas',
 *       widgetsContainer:  null,   // ← no widgets palette
 *       settingsContainer: null,   // ← no settings sidebar
 *   });
 * The engine skips the omitted mounts cleanly — no NPE, no console
 * error, regardless of whether DOM nodes exist for them. Same pattern
 * as `cookbook/1-minimal/` and `cookbook/6-canvas-only/`.
 *
 * ─── Tokens consumed (already exposed by dist/builder.css) ──────────
 *   --bjs-bg, --bjs-bg-subtle, --bjs-border, --bjs-border-light,
 *   --bjs-radius-md, --bjs-radius-lg, --bjs-shadow,
 *   --bjs-text, --bjs-text-secondary, --bjs-primary,
 *   --bjs-fs-sm, --bjs-fs-base, --bjs-space-2, --bjs-space-3.
 */

/* ─── Base wrapper (header + canvas grid) ─────────────────────────── */
.demo-mini-builder {
    display: grid;
    border: 1px solid var(--bjs-border);
    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__header,
.demo-mini-builder__canvas {
    overflow: auto;
    min-height: 0;
    min-width: 0;
}

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

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

/* ─── Variant: --card ──── 360 × 420 dashboard tile ───────────────── *
 * Explicit pixel dimensions are the variant's defining property — the
 * cookbook spec's `card has fixed width + height` test asserts the
 * computed `width` is `360px` and `height` is `420px`. Don't change
 * these without bumping the spec; the dimensions ARE the contract.
 *
 * The 40 px header row is just enough for a tile title + a small
 * primary action (e.g. Save). Drop-shadow makes the card lift off
 * the dashboard background — same visual language as analytics tiles.
 */
.demo-mini-builder--card {
    width: 360px;
    height: 420px;
    border-radius: var(--bjs-radius-lg);
    box-shadow: 0 4px 16px var(--bjs-shadow);
    grid-template-areas:
        "header"
        "canvas";
    grid-template-rows: 40px 1fr;
}

/* ─── Card title + Save button (in-wrapper header) ─────────────────
 * Title takes the leading flex space; Save is pushed to the trailing
 * edge by `margin-left: auto`. Save uses the engine's primary-tone
 * tokens so the card reads as "primary action lives here" without
 * needing a custom palette.
 */
.demo-mini-builder--card .demo-mini-builder__header {
    padding: 0 var(--bjs-space-3);
}

.demo-mini-builder--card .demo-card-title {
    color: var(--bjs-text);
    font-weight: 600;
    font-size: var(--bjs-fs-sm);
    letter-spacing: 0.01em;
}

.demo-mini-builder--card .demo-card-save {
    appearance: none;
    -webkit-appearance: none;
    margin-left: auto;
    border: 1px solid var(--bjs-primary);
    background: var(--bjs-primary);
    color: var(--bjs-text-on-primary, #fff);
    padding: 4px 12px;
    border-radius: var(--bjs-radius-md);
    font: inherit;
    font-size: var(--bjs-fs-sm);
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.demo-mini-builder--card .demo-card-save:hover {
    filter: brightness(1.06);
}
.demo-mini-builder--card .demo-card-save:focus-visible {
    outline: 2px solid var(--bjs-primary);
    outline-offset: 2px;
}
.demo-mini-builder--card .demo-card-save:active {
    transform: translateY(1px);
}

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