/* Ghostnote — docked description panel + embedded live app.
   Same shell as the Pacmanic page (arcade tokens, collapsible left panel),
   with the cabinet stage swapped for an iframe of the live app. This page
   deliberately loads no shared stylesheet — it is a standalone full-screen
   stage — so the tokens are restated here under the same names as site.css. */

:root {
    --surface: #14141f;
    --surface-2: #1d1d2c;
    --text: #f2f2f7;
    --text-muted: #9a9ab4;
    --border: #2b2b40;
    --accent: #ffd400;
    --accent-alt: #29d8ff;
    --scroll-thumb: #2b2b40;
    --scroll-thumb-hover: #3a3a55;
    --font-display: 'Press Start 2P', 'Courier New', monospace;
}

/* Press Start 2P — SIL Open Font License 1.1 */
@font-face {
    font-family: 'Press Start 2P';
    src: url('/content/fonts/press-start/press-start-2p-latin.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: #000;
}

body {
    display: flex;
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Overlay-style scrollbar: transparent track, inset thumb. */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border: 4px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--scroll-thumb-hover);
    background-clip: content-box;
}
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }

/* ---------- Description panel (docked left) ---------- */

#instructions {
    position: relative;
    flex: 0 0 390px;
    overflow-y: auto;
    background: var(--surface);
    border: 2px solid var(--border);
    padding: 1.4rem 1.6rem;
    color: var(--text);
    font: 12.5px/1.75 ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .45);
    transition: flex-basis .22s ease, padding .22s ease;
}

#btnToggle {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 2px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
}

#btnToggle:hover { border-color: var(--accent-alt); color: var(--accent-alt); }

#btnToggle svg { display: block; }
#btnToggle .ico-open { display: none; }
body.instructions-collapsed #btnToggle .ico-close { display: none; }
body.instructions-collapsed #btnToggle .ico-open { display: block; }

/* Collapsed: the panel chrome disappears, leaving only the toggle button. */
body.instructions-collapsed #instructions {
    flex-basis: 32px;
    align-self: flex-start;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    overflow: visible;
}

body.instructions-collapsed #insText { display: none; }

body.instructions-collapsed #btnToggle {
    position: static;
    font-size: 15px;
}

#instructions h1 {
    font-family: var(--font-display);
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: .95rem;
    line-height: 1.4;
    color: var(--accent);
    margin: .2rem 2.6rem .3rem 0;
}

#instructions p { margin: 0 0 .8rem; }

#instructions .lede { font-weight: 700; color: #fff; margin-bottom: 1.1rem; }

#instructions a { color: var(--accent-alt); text-decoration: none; }
#instructions a:hover { text-decoration: underline; }

#instructions .wip {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    padding: .2rem .5rem;
    display: inline-block;
    margin-bottom: 1.1rem;
}

/* Prominent "open the real thing" affordance — a live web app is better in its
   own tab (auth, Web MIDI, full width) than in a showcase frame. */
#instructions .launch {
    display: inline-block;
    margin-top: .4rem;
    padding: .55rem .9rem;
    border: 2px solid var(--accent-alt);
    color: var(--accent-alt);
    font-weight: 700;
}
#instructions .launch:hover { background: color-mix(in srgb, var(--accent-alt) 14%, transparent); text-decoration: none; }

/* ---------- Embedded app ---------- */

#frameWrap {
    flex: 1;
    min-width: 0;
    display: flex;
}

#frame {
    flex: 1;
    border: 2px solid var(--border);
    background: #0b0b12;
}

/* ---------- Small screens: stack, description first ---------- */

@media (max-width: 860px) {
    body {
        flex-direction: column;
        overflow: auto;
        height: auto;
        min-height: 100%;
    }

    #instructions { flex: none; overflow-y: visible; }
    body.instructions-collapsed #instructions { flex-basis: auto; }

    #frameWrap { min-height: 80vh; }
}