/*
 * Hand Video Synth — only what's specific to this tool.
 * Windows, buttons, selects, checkboxes, HUD chips, dialog and taskbar come
 * from ../../shared-studio.css. The visuals fill the screen; the panels are
 * small studio windows over it that can be dragged or minimized.
 */

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--s-ink); }

/* p5 draws the effects into a full-screen canvas */
#main-effects-canvas { position: fixed; inset: 0; }

/* ── Floating windows: starting positions ────────────────── */
.synth-win { min-height: 0; z-index: 1000; }
.synth-win.active { z-index: 1001; }
#bg-control      { top: 12px; right: 12px; width: 280px; }
#video-container { right: 12px; bottom: calc(var(--s-taskbar-h) + 12px); width: 260px; }
#instructions    { left: 12px; bottom: calc(var(--s-taskbar-h) + 12px); width: 340px; height: 360px; }

#bg-control .s-win-body { padding-bottom: 6px; }
#bg-control .s-win-body > :not(.s-section) { margin-left: 8px; margin-right: 8px; }
#bg-control .s-win-body > * + * { margin-top: 6px; }

.bg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.bg-row .s-btn { flex: 1; }
.bg-select { width: 100%; }
#bg-upload { display: none; }
.effect-toggle { justify-content: space-between; }
.effect-toggle .s-btn { flex: 0 0 auto; }

.rec-key { font-weight: bold; }
.rec-key.recording { color: #fff; background: #cc0000; }

.color-pickers { display: flex; gap: 4px; }
.color-picker {
    width: 34px; height: 22px; padding: 1px; cursor: pointer;
    background: var(--s-field); border: 2px solid; border-color: var(--s-sunken);
}

#bg-video-warning { color: #ffd97a; }

/* ── Camera window ───────────────────────────────────────── */
.camera-well { position: relative; margin: 3px; height: 180px; overflow: hidden; }
#video, #hand-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#video { object-fit: cover; }
#hand-canvas { z-index: 1; }

/* ── Hand controls window ────────────────────────────────── */
#instructions .s-term { flex: 1; margin: 3px; border: 2px solid; border-color: var(--s-sunken); }
.s-term h3::before { content: '## '; }
.hand-control { margin-bottom: 10px; }
.hand-control strong { color: var(--s-phosphor); font-weight: normal; }
.shortcut-grid { display: grid; gap: 3px; }
.shortcut-item { display: flex; align-items: center; gap: 8px; }

/* ── HUD: debug panel (D) and notifications ──────────────── */
#debug-panel { position: fixed; top: 12px; left: 12px; z-index: 1000; display: none; }
#bg-effects { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--s-ink-line); }
.synth-toast { z-index: 2000; padding: 8px 16px; font-size: 14px; text-align: center; }

/* ── Small screens ───────────────────────────────────────── */
/* Phones: panels open one at a time from the tab bar (shared-studio). */
@media (max-width: 768px) {
    #bg-control .s-win-body > :not(.s-section) { margin-left: 10px; margin-right: 10px; }
    #bg-control .s-win-body > * + * { margin-top: 8px; }
    #bg-select { width: calc(100% - 20px); }
    #bg-control input[type="color"] { width: 56px; height: 36px; }
}