/* Playground: toolbar, editor with a highlighted overlay, WGSL drawer, canvas, sliders.
   Tokens and the base look come from python-gpu.css; this file lays the page out. */

html, body { height: 100%; }
body { display: flex; flex-direction: column; overflow: hidden; }
code { font: 0.92em var(--mono); color: #e7d9a8; }

/* canvas#view is a plain stage child here, not the full-window canvas of the demos */
canvas#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
/* the offscreen test harness lays a 2D copy over the canvas; keep it on the stage */
.stage > canvas + canvas { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; pointer-events: none !important; }

/* ---- header ---- */
.top {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: #0a0c12;
}
.top .titles { min-width: 0; }
.top h1 { font-size: 17px; margin: 0; font-weight: 650; letter-spacing: 0.01em; }
.top .crumb { font-size: 12px; color: var(--dim); margin: 0; }
.top .crumb a { color: var(--dim); }
.toolbar { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; min-width: 0; }
.toolbar label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim); }
.toolbar input[type="checkbox"] { accent-color: var(--accent); margin: 0; }
.toolbar select { padding: 4px 8px; }
#fps { font: 12px var(--mono); color: var(--dim); min-width: 56px; }
#share-msg { font-size: 12px; color: var(--dim); }
.top .check { flex: 1 0 100%; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }

/* ---- split ---- */
.split { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.left { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--line); }

/* ---- editor: textarea over a highlighted pre, with a line gutter ---- */
.editor-wrap { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); background: #090b10; }
.gutter {
  margin: 0; padding: 10px 10px 10px 12px; overflow: hidden; white-space: pre; user-select: none;
  font: 13px/20px var(--mono); color: #5d6679; text-align: right;
  border-right: 1px solid var(--line); background: rgba(255, 255, 255, 0.02);
}
.code-box { position: relative; min-width: 0; overflow: hidden; }
.code-box > pre, .code-box > textarea { position: absolute; inset: 0; margin: 0; }
.code-box pre, .code-box textarea {
  box-sizing: border-box; padding: 10px 14px; border: 0; border-radius: 0;
  font: 13px/20px var(--mono); font-variant-ligatures: none; font-kerning: none; letter-spacing: 0;
  tab-size: 4; white-space: pre; overflow-wrap: normal; word-wrap: normal; text-indent: 0;
}
.code-box pre { overflow: hidden; color: #d4d9e4; background: transparent; pointer-events: none; z-index: 1; }
.code-box textarea {
  overflow: auto; resize: none; outline: none; color: transparent; background: transparent;
  caret-color: var(--ink); z-index: 2; -webkit-text-fill-color: transparent;
}
.code-box textarea::selection { background: rgba(120, 160, 255, 0.35); -webkit-text-fill-color: transparent; }
.errbar {
  position: absolute; left: 0; right: 0; height: 20px; z-index: 0; pointer-events: none;
  background: rgba(255, 90, 80, 0.22); box-shadow: inset 3px 0 0 var(--bad);
}
.errbar[hidden] { display: none; }

/* syntax colours, shared by the editor overlay and the WGSL drawer */
.hl .k { color: #ff9e64; }
.hl .n { color: #9ece6a; }
.hl .c { color: #6b7389; font-style: italic; }
.hl .d { color: #bb9af7; }

/* ---- WGSL drawer ---- */
.wgsl { flex: 0 0 40%; min-height: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.wgsl > header { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.wgsl .label { font-size: 12px; color: var(--dim); margin-right: 4px; }
#wtabs { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
#wtabs button { font: 12px var(--mono); padding: 3px 8px; }
#wgsl-out {
  flex: 1 1 auto; min-height: 0; margin: 0; padding: 10px 14px; overflow: auto;
  font: 12.5px/1.5 var(--mono); color: #d4d9e4; tab-size: 4; white-space: pre;
}
.wgsl.closed { flex: 0 0 auto; }
.wgsl.closed #wgsl-out { display: none; }

/* ---- right column: canvas, sliders, help ---- */
.right { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.stage { position: relative; flex: 1 1 auto; min-height: 220px; background: #000; overflow: hidden; }
.sliders {
  flex: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 16px;
  padding: 8px 14px; border-top: 1px solid var(--line); max-height: 28vh; overflow: auto;
}
.sliders .none { margin: 0; font-size: 12px; color: var(--dim); grid-column: 1 / -1; }
.slider { display: flex; align-items: center; gap: 8px; font: 12px var(--mono); color: var(--dim); min-width: 0; }
.slider > span { min-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slider input { flex: 1 1 auto; min-width: 60px; accent-color: var(--accent); }
.slider output { min-width: 44px; text-align: right; color: var(--ink); }
.help {
  flex: none; max-height: 34vh; overflow: auto; border-top: 1px solid var(--line);
  padding: 8px 14px 12px; font-size: 13px; color: var(--dim);
}
.help summary { cursor: pointer; color: var(--ink); font-weight: 600; margin-bottom: 6px; }
.help ul { margin: 0; padding-left: 18px; }
.help li { margin: 0 0 6px; }
.help p { margin: 8px 0 0; }

/* ---- phones: canvas first, every pane full width with a 16px gutter ---- */
@media (max-width: 820px) {
  html, body { height: auto; }
  body { overflow: auto; }
  .top { padding: 12px 16px; }
  .split { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px 16px; }
  .left, .right { gap: 12px; border: 0; }
  .right { order: -1; }
  .stage { flex: none; height: 56vh; min-height: 260px; border: 1px solid var(--line); border-radius: 10px; }
  .editor-wrap { flex: none; height: 50vh; min-height: 260px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
  .wgsl { flex: none; height: 36vh; min-height: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
  .wgsl.closed { height: auto; }
  .sliders, .help { max-height: none; border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; }
}