/* demo/diagrammer.css — public d6 diagrammer demo page.
   Builds on home.css (band system, typography, tokens). This file only adds the
   full-bleed escape, the demo-mode note, the embed-frame sizing, and a couple of
   hero tweaks (the demo hero has no media column, unlike the home hero). */

/* Full-bleed escape (mirrors home.css) */
body[data-demo-diagrammer] .main-content-v3 {
    max-width: none;
    padding: 0;
    margin: 0;
}
body[data-demo-diagrammer] .main-content-v3.no-page-header {
    margin-top: 4rem; /* fixed header offset */
}

/* The demo hero has no browser-frame media column, so restore the bottom
   padding that .home-hero zeroes out for the home page's overlapping frame. */
.demo-hero {
    padding-bottom: clamp(3rem, 6vw, 5rem);
}
.demo-hero-lead {
    max-width: 44rem;
}

/* Demo-mode note callout (light-on-dark, sits in the hero) */
.demo-note {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--et-on-primary-container);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.5rem;
    padding: 0.5rem 0.875rem;
    margin: 0.25rem 0 1.5rem;
}
.demo-note .fa-circle-info {
    color: var(--et-secondary);
}

/* Live embed band + frame */
.demo-embed-band {
    padding-top: clamp(2rem, 4vw, 3rem);
}
.demo-frame-wrap {
    max-width: 92rem;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.demo-diagrammer-frame {
    display: block;
    width: 100%;
    border: 0;
    /* Viewport-fitted (vh fallback first so dvh wins where supported). */
    height: clamp(560px, calc(100vh - 220px), 960px);
    height: clamp(560px, calc(100dvh - 220px), 960px);
    background: var(--et-surface-container-low);
    border-radius: 0.75rem;
    box-shadow: var(--shadow-ambient-xl);
    overflow: hidden;
}
@media (max-width: 767.98px) {
    .demo-diagrammer-frame {
        height: clamp(420px, calc(100svh - 160px), 680px);
    }
}

/* =========================================
   EXPAND (focus mode) — port of the drill editor's Expand-to-Edit
   (drills/drill-form.css). demo/diagrammer.js owns the resize: it toggles
   .is-expanded here and echoes EXPAND_STATE to the d6 iframe; the d6 app
   re-fits via its own ResizeObserver (no resize messaging needed).
   ========================================= */

/* Toolbar above the frame, aligned to the frame's right edge (same width
   constraints as .demo-frame-wrap). */
.demo-frame-toolbar {
    display: flex;
    justify-content: flex-end;
    max-width: 92rem;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
    margin-bottom: 0.75rem;
}

/* Anchor for the floating Done button while expanded. */
#demo-d6-container {
    position: relative;
}

/* Full-viewport overlay. `inset: 0` spans the viewport exactly — we avoid
   `width: 100vw` because, once body scroll is locked and the scrollbar
   disappears, 100vw overshoots the real width and feeds a resize/strobe
   loop. height:auto lets inset:0 win over any explicit height. */
#demo-d6-container.is-expanded {
    position: fixed;
    inset: 0;
    height: auto;
    min-height: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    overflow: hidden;
    z-index: 10000;
    background: #fff;
}
/* Inline, the iframe carries the clamp height + radius + shadow; expanded it
   just fills the overlay (the single height:100% overrides both the vh
   fallback and the dvh/svh clamps at any breakpoint). */
#demo-d6-container.is-expanded .demo-diagrammer-frame {
    height: 100%;
    border-radius: 0;
    box-shadow: none;
}

/* Host close button (touch devices have no Escape key): hidden inline, floats
   top-right of the fixed overlay while expanded. */
#demo-d6-collapse-btn { display: none; }
#demo-d6-container.is-expanded #demo-d6-collapse-btn {
    display: inline-flex;
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

#demo-d6-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

/* Lock body scroll while expanded so the page behind doesn't move. */
body.demo-diagrammer-expanded { overflow: hidden; }