/* Testbild: preview on the left, the Tweakpane panel docked on the right. The
   panel keeps Tweakpane's own look on purpose. */

:root {
  --bg: var(--labs-black, #252525);
  --pasteboard: #3a3a3a;
  --tp-bg: #28292e;          /* Tweakpane's default base background */
  --panel-w: 320px;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); color: #f0f0f0; }
body { font: 13px/1.35 var(--labs-font, system-ui, sans-serif); overflow: hidden; }

.app { display: grid; grid-template-columns: 1fr var(--panel-w); height: 100vh; height: 100dvh; }

/* ── Preview ── */
.viewport { position: relative; overflow: hidden; background: var(--pasteboard); cursor: grab; touch-action: none; }
.viewport.dragging { cursor: grabbing; }
.stage { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.stage canvas { display: block; }
.stage .view { position: absolute; top: 0; left: 0; }
.stage .view[hidden] { display: none; }
.viewport.pixelated .stage canvas,
.viewport.pixelated .stage { image-rendering: pixelated; }
.stage.transparent {
  background-color: #cfcfcf;
  background-image: conic-gradient(#9a9a9a 25%, transparent 0 50%, #9a9a9a 0 75%, transparent 0);
  background-size: 32px 32px;
}
.stage.tiled { background-image: var(--tile, none); background-size: var(--tile-size); background-repeat: repeat; }
.stage.tiled.transparent {
  background-image: var(--tile, none), conic-gradient(#9a9a9a 25%, transparent 0 50%, #9a9a9a 0 75%, transparent 0);
  background-size: var(--tile-size), 32px 32px;
}
.zoom { position: absolute; left: 12px; bottom: 10px; color: rgba(240, 240, 240, 0.6); font-size: 12px; white-space: pre; pointer-events: none; }

body.presenting .panel,
body.presenting .zoom,
body.presenting .labs-mast { display: none; }
body.presenting .app { grid-template-columns: 1fr; }
body.presenting .viewport { background: #000; cursor: none; }

/* ── Panel ── */
.panel { overflow-y: auto; overscroll-behavior: contain; background: var(--tp-bg); scrollbar-width: thin; }
.panel .tp-rotv { border-radius: 0; }
/* Hints and the status line: full width, wrapped (Tweakpane's monitors don't wrap). */
.panel .hint .tp-lblv_l { display: none; }
.panel .hint .tp-lblv_v { width: 100%; }
.panel .hint textarea { white-space: pre-wrap; overflow: hidden; }

/* Phones: preview on top, the panel scrolls below it. */
@media (max-width: 760px) {
  body { overflow: auto; }
  .app { grid-template-columns: 1fr; grid-template-rows: 58vh auto; height: auto; }
  .panel { overflow: visible; }
}