/* style.css — cookbook/7-mobile — `.demo-mini-builder--mobile`.
 *
 * Self-contained chrome variant (W6.C.B.7). Pair this file with init.js
 * (sibling) and dist/builder.css + dist/builder.js, and you have a fully-
 * working mobile-first Builder mount in 4 files. NO shared mini-builder.css.
 * NO examples.css. The `.demo-mini-builder--mobile` rules below ARE the
 * variant — copy them verbatim into your own stylesheet.
 *
 * ─── Buyer use case ─────────────────────────────────────────────────
 * Mobile-first integration where canvas + sidebars don't fit side-by-side
 * at narrow viewports (375 px – 600 px). The wrapper renders THREE
 * sub-systems (widgets / canvas / settings) but only ONE is visible at
 * a time — buyers tap a tab in the top strip to swap which sub-system
 * fills the body. Pick this when:
 *
 *   - Your host app needs to ship a working Builder on a phone-sized
 *     viewport (in-app email composer, mobile CMS).
 *   - Your buyers are non-technical and prefer a tap-one-at-a-time flow
 *     over juggling 3 columns at once.
 *   - You want a chrome that scales: the same tab-based pattern reads
 *     the same at 375 px, 600 px, or 1024 px (no media queries needed).
 *
 * The defining property: only ONE sub-system slot has `display: block`
 * at any time — driven by the wrapper's `data-mobile-tab` attribute.
 * Tab clicks flip the attribute (see init.js's `wireTabSwitcher()`); the
 * CSS selectors below pick which slot becomes visible.
 *
 * ─── Constructor (no null args — all 3 wired) ──────────────────────
 *   new Builder({
 *       mainContainer:     '#YourCanvas',
 *       widgetsContainer:  '#YourWidgets',
 *       settingsContainer: '#YourSettings',
 *   });
 *
 * The W6.A.A.1 null-tolerance contract isn't needed here — every
 * sub-system is mounted to a real DOM id. Mobile chrome shows them
 * one-at-a-time visually but they're all live in the DOM, so the
 * engine fires events / renders settings / accepts drags as normal.
 *
 * ─── 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-text, --bjs-text-secondary,
 *   --bjs-fs-sm, --bjs-fs-base, --bjs-space-2, --bjs-space-3,
 *   --bjs-primary.
 */

/* ─── Base wrapper (single-column grid; tabs strip + tabbody) ───────
 * The mobile variant uses two extra slots (`__tabs` + `__tabbody`)
 * unique to this variant — the tabs strip is always-visible across the
 * top, the tabbody hosts widgets/canvas/settings stacked absolutely
 * with only one visible at a time. Height stays explicit because the
 * engine's iframe needs a sized host — `100%` would collapse to 0
 * inside an auto-sized parent.
 */
.demo-mini-builder {
    display: grid;
    width: 100%;
    height: 520px;
    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__tabs,
.demo-mini-builder__tabbody,
.demo-mini-builder__widgets,
.demo-mini-builder__canvas,
.demo-mini-builder__settings {
    overflow: auto;
    min-height: 0;
    min-width: 0;
}

/* ─── Variant: --mobile ── tab strip + stacked sub-systems ──────────
 * The variant's defining property: ONE sub-system visible at a time,
 * driven by `data-mobile-tab`. Any of `widgets` / `canvas` / `settings`
 * can be the active value — the matching `[data-mobile-tab="…"]`
 * descendant selector flips its `display` to `block` while the others
 * stay `display: none`. The active tab button gets `.is-active` +
 * `aria-selected="true"` for the underline + screen-reader cue.
 *
 * This is the rule that distinguishes `--mobile` from every other
 * variant — locked by the cookbook spec's variant-defining-property
 * gate (`mobile tab switcher flips data-mobile-tab + slot visibility`).
 */
.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(--bjs-bg-subtle);
    border-bottom: 1px solid var(--bjs-border-light);
}
.demo-mini-builder--mobile .demo-mini-builder__tab {
    flex: 1;
    padding: var(--bjs-space-3);
    text-align: center;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--bjs-text-secondary);
    font: inherit;
    font-size: var(--bjs-fs-sm);
    border-bottom: 2px solid transparent;
    transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.demo-mini-builder--mobile .demo-mini-builder__tab:hover {
    color: var(--bjs-text);
    background: var(--bjs-bg);
}
.demo-mini-builder--mobile .demo-mini-builder__tab:focus-visible {
    outline: 2px solid var(--bjs-primary);
    outline-offset: -4px;
}
.demo-mini-builder--mobile .demo-mini-builder__tab.is-active {
    color: var(--bjs-text);
    border-bottom-color: var(--bjs-primary);
    background: var(--bjs-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 .demo-mini-builder__widgets {
    background: var(--bjs-bg-subtle);
    padding: var(--bjs-space-2);
}
.demo-mini-builder--mobile .demo-mini-builder__canvas {
    background: var(--bjs-bg);
}
.demo-mini-builder--mobile .demo-mini-builder__settings {
    background: var(--bjs-bg-subtle);
    padding: var(--bjs-space-2);
}
.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;
}

/* ─── Host toolbar (lives OUTSIDE the wrapper) ──────────────────────
 * The mobile variant has no `__header` slot, so Save lives in a host
 * toolbar above the wrapper. Same structural convention as
 * `2-compact-2col`, `3-compact-3col`, `5-sidebar-only`, `6-canvas-only`.
 *
 * In a real mobile-first integration you'd typically push this into
 * the canvas tab (or onto the bottom of the device chrome) — host
 * apps differ on where the primary action lives. The toolbar here
 * teaches the wiring; geometry is up to you.
 */
.demo-host-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    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; }
}