/* CX Playground — full-viewport dark theme, 3-region layout.
   Source top-left, Output bottom-left, View (Tree/Graph) right column. */

:root {
  /* Dark base palette — One Dark-ish */
  --bg-app:       #1e2127;
  --bg-pane:      #1c1f24;
  --bg-head:      #21252b;
  --bg-toolbar:   #181a1f;
  --bg-input:     #1e2127;
  --bg-hover:     #2c313a;
  --border:       #181a1f;
  --border-soft:  #3a3f4b;
  --text:         #c8ccd4;
  --text-dim:     #6b7280;
  --text-strong:  #e5e9f0;
  --accent:       #61afef;
  --accent-hover: #82c0ff;
  --ok:           #98c379;
  --err:          #e06c75;
  --pending:      #d19a66;

  /* Syntax palette (used by highlight.js + tree view) */
  --syn-keyword:  #c678dd;   /* directives [?...] */
  --syn-string:   #98c379;
  --syn-number:   #d19a66;
  --syn-comment:  #5c6370;
  --syn-name:     #e5c07b;   /* element names */
  --syn-attr:     #56b6c2;   /* attribute keys */
  --syn-binding:  #e06c75;   /* $name */
  --syn-punct:    #abb2bf;

  --code-font:    ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg-app);
}

.cxp-body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ── Toolbar ────────────────────────────────────────────────── */
.cxp-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-toolbar);
  border-bottom: 1px solid var(--border);
}
.cxp-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text-strong);
  font-weight: 600;
  padding-right: 14px;
  border-right: 1px solid var(--border-soft);
  margin-right: 6px;
}
.cxp-brand img { display: block; filter: brightness(1.1); }
.cxp-spacer { flex: 1; }
.cxp-pick-label {
  color: var(--text-dim);
  font-size: 12px;
  margin-left: 4px;
}
#cxp-pick {
  padding: 4px 8px;
  font-size: 12.5px;
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  background: var(--bg-pane);
  color: var(--text);
  min-width: 280px;
  max-width: 440px;
  font-family: inherit;
}
.cxp-search {
  padding: 4px 8px;
  font-size: 12.5px;
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  background: var(--bg-pane);
  color: var(--text);
  width: 220px;
  font-family: inherit;
}
.cxp-search:focus { outline: none; border-color: var(--accent); }
.cxp-search::placeholder { color: var(--text-dim); }
.cxp-btn {
  padding: 4px 12px;
  font-size: 12.5px;
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  background: var(--bg-pane);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}
.cxp-btn:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--accent); }
.cxp-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cxp-btn-primary {
  background: var(--accent);
  color: #0e1116;
  border-color: var(--accent);
  font-weight: 600;
}
.cxp-btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.cxp-btn-primary.is-running {
  background: var(--pending);
  border-color: var(--pending);
}
.cxp-btn-icon {
  padding: 4px 8px;
  min-width: 0;
  font-size: 11px;
  letter-spacing: -0.02em;
}
.cxp-viz-src-toggle {
  margin-left: 12px;
  min-width: 64px;
  text-align: center;
}
.cxp-viz-src-toggle::before {
  content: '⇄  ';
  opacity: 0.6;
}
.cxp-detail-group { margin-right: auto; margin-left: 6px; }
.cxp-detail-tab {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid var(--border-soft);
  background: var(--bg-pane);
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit;
  text-transform: uppercase;
}
.cxp-detail-tab + .cxp-detail-tab { border-left: none; }
.cxp-detail-tab:first-child { border-radius: 3px 0 0 3px; }
.cxp-detail-tab:last-child  { border-radius: 0 3px 3px 0; }
.cxp-detail-tab:hover { color: var(--text); background: var(--bg-hover); }
.cxp-detail-tab.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #0e1116;
}
/* Inline-attr chip used at Compact/Full detail levels. */
.cxt-attr-chip { color: var(--syn-attr); margin-left: 6px; font-size: 0.9em; }
.cxt-attr-chip + .cxt-attr-chip { margin-left: 4px; }
.cxt-attr-chip .v { color: var(--text); }
.cxt-attr-more { color: var(--text-dim); font-style: italic; margin-left: 6px; font-size: 0.9em; }
.cxt-inline-scalar { color: var(--syn-string); margin-left: 6px; }
.cxt-inline-scalar.num { color: var(--syn-number); }
.cxt-inline-scalar.bool { color: var(--syn-keyword); }

/* ── Main 3-region grid ─────────────────────────────────────── */
/* Source + Output stack in the left 2/3; View pane takes the right 1/3.
   Dividers (3px gap with a brighter color) read clearly without dragging
   focus from the panes. */
.cxp-main {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: var(--col1-pct, 66.67%) 1fr;
  grid-template-rows: var(--row1-pct, 50%) 1fr;
  grid-template-areas:
    "src viz"
    "out viz";
  background: var(--border-soft);
  min-height: 0;
  overflow: hidden;
  position: relative;
  gap: 0;
}

/* ── Draggable dividers ────────────────────────────────────── */
/* Two strips overlaid on the grid: a vertical column divider
   (between left column + view pane) and a horizontal row divider
   (between source + output, spans only the left column). JS picks
   up mousedown/move and rewrites --col1-pct / --row1-pct on
   .cxp-main, which the grid template tracks live. */
.cxp-divider {
  position: absolute;
  background: var(--border-soft);
  z-index: 20;
  transition: background 0.15s ease-out;
}
.cxp-divider:hover, .cxp-divider.is-dragging {
  background: var(--accent);
}
.cxp-divider-col {
  top: 0;
  bottom: 0;
  left: calc(var(--col1-pct, 66.67%) - 2px);
  width: 5px;
  cursor: col-resize;
}
.cxp-divider-row {
  left: 0;
  width: calc(var(--col1-pct, 66.67%) - 2px);
  top: calc(var(--row1-pct, 50%) - 2px);
  height: 5px;
  cursor: row-resize;
}
body.cxp-resizing {
  user-select: none;
  cursor: inherit;
}
body.cxp-resizing.is-col { cursor: col-resize; }
body.cxp-resizing.is-row { cursor: row-resize; }

.cxp-source-pane { grid-area: src; }
.cxp-output-pane { grid-area: out; }
.cxp-viz-pane    { grid-area: viz; }

.cxp-pane {
  display: flex;
  flex-direction: column;
  background: var(--bg-pane);
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.cxp-pane-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-head);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  user-select: none;
}

/* ── Source editor — textarea over highlighted render layer ── */
.cxp-editor-wrap {
  flex: 1 1 auto;
  position: relative;
  min-height: 0;
  overflow: hidden;
}
.cxp-editor-render,
.cxp-source {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 10px 14px;
  font-family: var(--code-font);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
  background: transparent;
  tab-size: 2;
}
.cxp-editor-render {
  pointer-events: none;
  color: var(--text);
  z-index: 1;
}
.cxp-editor-render code {
  font: inherit;
  color: inherit;
  background: transparent;
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
}
.cxp-source {
  z-index: 2;
  color: transparent;
  caret-color: var(--text-strong);
  border: none;
  outline: none;
  resize: none;
  /* Transparent so the highlighted render layer underneath shows
     through; the visible bg comes from the wrap. */
  background: transparent;
}
.cxp-editor-wrap { background: var(--bg-input); }
.cxp-source::selection { background: rgba(97, 175, 239, 0.3); color: transparent; }
.cxp-source:focus { outline: none; }

/* ── Output ─────────────────────────────────────────────────── */
.cxp-tabs {
  display: inline-flex;
  gap: 1px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.cxp-tab, .cxp-viz-tab {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid var(--border-soft);
  background: var(--bg-pane);
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit;
  text-transform: uppercase;
}
.cxp-tab + .cxp-tab,
.cxp-viz-tab + .cxp-viz-tab { border-left: none; }
.cxp-tab:first-child, .cxp-viz-tab:first-child { border-radius: 3px 0 0 3px; }
.cxp-tab:last-child,  .cxp-viz-tab:last-child  { border-radius: 0 3px 3px 0; }
.cxp-tab:hover, .cxp-viz-tab:hover { color: var(--text); background: var(--bg-hover); }
.cxp-tab.is-active, .cxp-viz-tab.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #0e1116;
}

.cxp-output {
  flex: 1 1 auto;
  margin: 0;
  background: var(--bg-input);
  display: none;
  min-height: 0;
  overflow: hidden;
}
.cxp-output.is-active { display: flex; }
.cxp-output > pre {
  flex: 1 1 auto;
  margin: 0;
  padding: 10px 14px 10px 8px;
  font-family: var(--code-font);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
  min-width: 0;
}
.cxp-output code { background: transparent; color: inherit; font: inherit; }

/* ── Line-number gutter (source + outputs) ────────────────── */
/* Right-aligned monospace column, scroll-synced with the
   neighbouring textarea/pre. JS keeps the gutter content in
   step with the editor/output line count. */
.cxp-gutter {
  flex: 0 0 auto;
  width: 3.2em;
  padding: 10px 6px 10px 8px;
  font-family: var(--code-font);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-dim);
  background: var(--bg-head);
  border-right: 1px solid var(--border);
  text-align: right;
  white-space: pre;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  min-width: 0;
}
/* Source editor gutter is layered (textarea+render are absolute),
   so the gutter participates as a sibling absolute layer. */
.cxp-editor-wrap > .cxp-gutter {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  z-index: 3;
}
/* Push the source textarea + render layer past the gutter. */
.cxp-editor-wrap > .cxp-editor-render,
.cxp-editor-wrap > .cxp-source {
  left: 3.2em;
}

/* ── View pane (Tree / Graph) ─────────────────────────────── */
.cxp-viz-content {
  flex: 1 1 auto;
  margin: 0;
  padding: 10px 14px;
  overflow: auto;
  display: none;
  font-family: var(--code-font);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg-input);
}
.cxp-viz-content.is-active { display: block; }
.cxp-viz-placeholder {
  color: var(--text-dim);
  font-style: italic;
  margin: 0;
}
#cxp-viz-graph code { display: block; white-space: pre-wrap; word-break: break-word; }

/* Tree view */
.cxt-node { padding-left: 1.1em; position: relative; cursor: default; }
.cxt-row {
  display: inline-block;
  padding: 1px 4px;
  border-radius: 3px;
  cursor: pointer;
}
.cxt-row:hover { background: var(--bg-hover); }
.cxt-node.is-selected > .cxt-row { background: rgba(97, 175, 239, 0.25); outline: 1px solid var(--accent); }
.cxt-toggle {
  position: absolute;
  left: 0;
  top: 0;
  width: 1em;
  text-align: center;
  cursor: pointer;
  color: var(--text-dim);
  user-select: none;
}
.cxt-toggle:hover { color: var(--accent); }
.cxt-node.is-collapsed > .cxt-children { display: none; }
.cxt-label-name    { color: var(--syn-name);    font-weight: 600; }
.cxt-label-attr    { color: var(--syn-attr); }
.cxt-label-string  { color: var(--syn-string); }
.cxt-label-number  { color: var(--syn-number); }
.cxt-label-boolean { color: var(--syn-keyword); }
.cxt-label-meta    { color: var(--text-dim); font-style: italic; }

/* Graph view: zoom toolbar pinned top-right; canvas scrolls so a
   large diagram is fully reachable via pan (drag) + zoom buttons. */
#cxp-viz-graph { position: relative; padding: 0; }
.cxp-graph-controls {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 2px;
  z-index: 5;
}
.cxp-graph-canvas {
  position: absolute;
  inset: 0;
  overflow: auto;
  padding: 30px 14px 14px;
  cursor: grab;
}
.cxp-graph-canvas:active { cursor: grabbing; }
.cxp-graph-svg { transform-origin: top left; transition: transform 0.1s ease-out; }
#cxp-viz-graph svg { max-width: none; height: auto; display: block; }
#cxp-viz-graph .cxp-viz-placeholder { color: var(--text-dim); font-style: italic; }

/* Mini button — used by the Pretty/Minified toggle and graph zoom. */
.cxp-mini-btn {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--border-soft);
  border-radius: 3px;
  background: var(--bg-pane);
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit;
}
.cxp-mini-btn:hover { background: var(--bg-hover); color: var(--text); border-color: var(--accent); }

/* ── Status bar ─────────────────────────────────────────────── */
.cxp-status {
  flex: 0 0 auto;
  padding: 6px 14px;
  background: var(--bg-toolbar);
  border-top: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
  min-height: 30px;
}
.cxp-status code {
  font-family: var(--code-font);
  background: rgba(255,255,255,0.06);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--text);
}
.cxp-status a { color: var(--accent); text-decoration: none; }
.cxp-status a:hover { text-decoration: underline; }
.cxp-status.is-ok { color: var(--ok); }
.cxp-status.is-error { color: var(--err); background: #2b1d1f; border-top-color: #5c2a2e; }
.cxp-status.is-pending { color: var(--pending); }

/* ── Syntax highlighting — class names from scripts/gen_guide/highlight/highlight.js ── */
.hl-comment   { color: var(--syn-comment); font-style: italic; }
.hl-string    { color: var(--syn-string); }
.hl-number    { color: var(--syn-number); }
.hl-literal   { color: var(--syn-keyword); }
.hl-keyword   { color: var(--syn-keyword); font-weight: 600; }
.hl-directive { color: var(--syn-keyword); font-weight: 600; }
.hl-element   { color: var(--syn-name); }
.hl-sigil     { color: var(--syn-binding); }
.hl-type      { color: var(--syn-attr); }
.hl-attr      { color: var(--syn-attr); }
.hl-fn        { color: var(--accent); }
.hl-tag       { color: var(--syn-name); }

/* ── Narrow viewport — stack everything ─────────────────────── */
@media (max-width: 900px) {
  .cxp-main {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
      "src"
      "out"
      "viz";
  }
  .cxp-divider { display: none; }
  .cxp-toolbar { flex-wrap: wrap; gap: 6px; }
  #cxp-pick { min-width: 200px; flex: 1; }
  .cxp-brand span { display: none; }
}