/* show.css · the deck shell's chrome: HUD, rail, part chip, grid, help, blank, modal, demo frames, the serve warning, and print. Sized from the stage variables that stage.js publishes, with window fallbacks. */
.appframe {
        width: calc(80 * var(--sw) / 100);
        height: calc(64 * var(--sh) / 100);
        border: 1px solid var(--gold);
        border-radius: 14px;
        background: var(--void);
        display: none;
    }
.appframe.open { display: block; }
.slide.demo-open ul, .slide.demo-open .foot-note, .slide.demo-open .row, .slide.demo-open h2, .slide.demo-open .kicker,
    .slide.demo-open .concept, .slide.demo-open .promptbox, .slide.demo-open .shots, .slide.demo-open .code, .slide.demo-open .chips, .slide.demo-open .diagram { display: none; }
.slide.demo-open { padding: calc(3 * var(--sh) / 100) calc(4 * var(--sw) / 100) calc(6 * var(--sh) / 100); }
.slide.demo-open .appframe.open { width: calc(92 * var(--sw) / 100); height: calc(78 * var(--sh) / 100); }
.slide.demo-open .bookend { display: grid; }
.slide.demo-open .bookend .appframe.open { width: 100%; height: calc(74 * var(--sh) / 100); }
#servewarn {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 20;
        background: var(--red);
        color: var(--void);
        font-family: var(--mono);
        font-size: 15px;
        font-weight: 600;
        padding: 0.6em 1em;
        text-align: center;
    }
#democlose {
        position: fixed;
        top: 1rem;
        right: 1.2rem;
        z-index: 8;
        display: none;
        font-family: var(--mono);
        font-size: 0.9rem;
        color: var(--void);
        background: var(--gold);
        border: none;
        border-radius: 4px;
        padding: 0.35em 0.8em;
        cursor: pointer;
    }
#hud { position: fixed; right: 1.2rem; bottom: 1rem; font-family: var(--mono); font-size: 0.85rem; color: var(--faint); z-index: 5; }
#partchip { position: fixed; left: 1.2rem; bottom: 1rem; font-family: var(--mono); font-size: 0.8rem; color: var(--faint); z-index: 5; }
#rail { position: fixed; left: 0; bottom: 0; height: 3px; width: 0; background: var(--cyan); z-index: 6; transition: width 200ms ease-out, background 200ms; }
#grid { position: fixed; inset: 0; background: color-mix(in srgb, var(--void) 96.8627%, transparent); z-index: 10; display: none; grid-template-columns: repeat(5, 1fr); gap: 0.7rem; padding: 3rem; overflow-y: auto; align-content: start; }
#grid.on { display: grid; }
#grid button { font: inherit; font-size: 0.85rem; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 0.9rem 0.6rem; cursor: pointer; text-align: left; line-height: 1.35; }
#grid button:hover { border-color: var(--cyan); }
#grid button .n { font-family: var(--mono); color: var(--gold); display: block; font-size: 0.75rem; margin-bottom: 0.3rem; }
#grid button.part { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 0.9rem; padding: 0.6rem 0.9rem; font-size: 1rem; font-weight: 700; border-color: var(--part, var(--gold)); background: color-mix(in srgb, var(--part, var(--gold)) 9%, transparent); }
#grid button.part .n { display: inline; margin: 0; color: var(--part, var(--gold)); letter-spacing: 0.22em; text-transform: uppercase; }
#grid button.part:hover { border-color: var(--ink); }
#help { position: fixed; inset: 0; background: color-mix(in srgb, var(--void) 96.8627%, transparent); z-index: 11; display: none; align-items: center; justify-content: center; }
#help.on { display: flex; }
#help .keys { font-family: var(--mono); font-size: 1.05rem; color: var(--mut); line-height: 2; text-align: left; }
#help .keys b { color: var(--cyan); display: inline-block; min-width: 6rem; }
#blank { position: fixed; inset: 0; background: var(--void); z-index: 12; display: none; }
#blank.on { display: block; }
#modal {
        position: fixed;
        inset: calc(2 * var(--sh) / 100) calc(2 * var(--sw) / 100);
        z-index: 20;
        display: none;
        background: var(--void);
        border: 1px solid var(--gold);
        border-radius: 14px;
        overflow: hidden;
    }
#modal.on { display: block; }
#modal iframe { width: 100%; height: 100%; border: none; background: var(--void); }
#modal img { width: 100%; height: 100%; object-fit: contain; background: var(--void); }
#modal .hint { position: absolute; top: 0.6rem; right: 1rem; font-family: var(--mono); font-size: 0.8rem; color: var(--faint); }
#hud { right: calc(var(--sx, 0px) + 1.2rem); bottom: calc(var(--sy, 0px) + 1rem); }
#partchip { left: calc(var(--sx, 0px) + 1.2rem); bottom: calc(var(--sy, 0px) + 1rem); }
#rail { left: var(--sx, 0px); bottom: var(--sy, 0px); width: 0; max-width: var(--sw, 100vw); }

@media print {
        body { overflow: visible; }
        .slide { position: relative; opacity: 1 !important; visibility: visible !important; transform: none !important; inset: auto; min-height: calc(100 * var(--sh) / 100); page-break-after: always; }
        .rise { opacity: 1 !important; transform: none !important; }
        #hud, #rail, #partchip, #grid, #help, #blank, #democlose, .appframe { display: none !important; }
        .promptbox { max-height: none; overflow: visible; }
        .slide.demo-open ul, .slide.demo-open .foot-note, .slide.demo-open .row, .slide.demo-open h2, .slide.demo-open .kicker,
        .slide.demo-open .concept, .slide.demo-open .shots, .slide.demo-open .code, .slide.demo-open .chips, .slide.demo-open .diagram { display: revert !important; }
    }