/* Generated by scripts/build-console.mjs — tokens come from brand.css */
.cs-console {
  margin: 20px 0 4px; border: 0; border-radius: var(--cs-r-md);
  background: var(--cs-code-bg); overflow: hidden; color: var(--cs-code-fg);
  font-family: var(--cs-font-body);
}

/* Tabs */
.cs-tabs { display: flex; align-items: stretch; flex-wrap: wrap; background: var(--cs-code-bg-soft); padding: 0 6px; }
.cs-tab {
  appearance: none; border: 0; background: none; color: rgba(255,255,255,.55); cursor: pointer;
  font-family: var(--cs-font-mono); font-size: 12px; font-weight: 500; letter-spacing: .02em;
  padding: 12px 14px; border-bottom: 2px solid transparent; transition: color .12s, border-color .12s;
}
.cs-tab:hover { color: var(--cs-white); }
.cs-tab.is-active { color: var(--cs-white); border-bottom-color: var(--cs-purple-light); }
.cs-tab.cs-try { margin-left: auto; color: var(--cs-mint); font-family: var(--cs-font-body); font-weight: 600; }
.cs-tab.cs-try.is-active { color: var(--cs-white); border-bottom-color: var(--cs-mint); }
.cs-tab:focus-visible { outline: 2px solid var(--cs-purple-light); outline-offset: -2px; }

/* Panes */
.cs-pane { display: none; position: relative; }
.cs-pane.is-active { display: block; }

/* Code. SpectaQL sets `#spectaql pre code{display:block;background:#222}` (two IDs beat one),
 * so these carry #spectaql plus two classes to win the cascade. */
#spectaql .cs-console pre.cs-code {
  margin: 0; background: var(--cs-code-bg); border: 0; border-radius: 0;
  padding: 0; max-height: 30rem; overflow: auto;
}
#spectaql .cs-console pre.cs-code code {
  display: block; background: none; border: 0; border-radius: 0; margin: 0;
  padding: 18px 20px;
  font-family: var(--cs-font-mono); font-size: 12.5px; line-height: 1.7;
  color: var(--cs-code-fg); white-space: pre; tab-size: 2;
}
.cs-console pre::-webkit-scrollbar { width: 10px; height: 10px; }
.cs-console pre::-webkit-scrollbar-thumb { background: var(--cs-code-line); border-radius: var(--cs-r-tag); }
.cs-console pre::-webkit-scrollbar-track { background: transparent; }

.cs-cm { color: var(--cs-grey-dark); font-style: italic; }
.cs-st { color: var(--cs-mint); }
.cs-kw { color: var(--cs-purple-light); }
.cs-nu { color: var(--cs-coral); }
.cs-fn { color: var(--cs-white); }
.cs-vr { color: var(--cs-purple-light); }

/* Copy */
.cs-copy {
  position: absolute; top: 10px; right: 12px; z-index: 1;
  font-family: var(--cs-font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 10px; cursor: pointer; border-radius: var(--cs-r-tag);
  border: 1px solid var(--cs-code-line); background: var(--cs-code-bg-soft); color: rgba(255,255,255,.65);
  opacity: 0; transition: opacity .12s, color .12s, border-color .12s;
}
.cs-pane:hover .cs-copy, .cs-copy:focus-visible { opacity: 1; }
.cs-copy:hover { color: var(--cs-white); border-color: var(--cs-purple); }
.cs-copy.is-done { color: var(--cs-mint); border-color: var(--cs-mint); opacity: 1; }

/* Try it */
.cs-pane[data-pane="__try"] { padding: 20px; }
.cs-note { margin: 0 0 16px; font-family: var(--cs-font-body); font-size: 13px; color: var(--cs-mint); }
.cs-label {
  display: block; margin-bottom: 16px;
  font-family: var(--cs-font-body); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.cs-token, .cs-vars {
  display: block; width: 100%; box-sizing: border-box; margin-top: 8px; padding: 11px 13px;
  font-family: var(--cs-font-mono); font-size: 12.5px; line-height: 1.6; letter-spacing: normal; text-transform: none;
  border: 1px solid var(--cs-code-line); border-radius: var(--cs-r-sm); background: var(--cs-code-bg-soft); color: var(--cs-code-fg);
  resize: vertical;
}
.cs-token::placeholder { color: rgba(255,255,255,.38); }
.cs-token:focus, .cs-vars:focus { outline: 0; border-color: var(--cs-purple); box-shadow: 0 0 0 3px rgba(92,91,213,.35); }
.cs-run {
  font-family: var(--cs-font-body); font-size: 13px; font-weight: 600; letter-spacing: .01em;
  padding: 11px 22px; cursor: pointer; border: 0; border-radius: var(--cs-r-sm);
  background: var(--cs-purple); color: var(--cs-white); transition: background .12s;
}
.cs-run:hover { background: var(--cs-purple-light); color: var(--cs-purple-dark); }
#spectaql .cs-console pre.cs-result {
  margin: 18px 0 0; max-height: 24rem; overflow: auto; padding: 0;
  background: var(--cs-code-bg-soft); border: 1px solid var(--cs-code-line); border-radius: var(--cs-r-sm);
}
#spectaql .cs-console pre.cs-result code {
  display: block; background: none; border: 0; padding: 14px 16px; color: var(--cs-code-fg);
  font-family: var(--cs-font-mono); font-size: 12.5px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}