/*
 * syntax.css — code blocks, architecture diagrams, and syntax highlighting
 * Imported separately from styles.css to keep the main stylesheet clean.
 */

/* ── Generic bordered code card ─────────────────────────────────────────── */

.code-block {
  background: var(--bg-code);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
}

.code-block .code-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-subtle);
  padding: 12px 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

.code-block pre {
  margin: 0;
  padding: 20px 24px;
  overflow-x: auto;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  white-space: pre;
}

.code-block code {
  font-family: inherit;
  font-size: inherit;
  background: none;
  padding: 0;
  color: inherit;
}


/* ── ExaQL code showcase (macOS window chrome) ──────────────────────────── */

.code-showcase {
  background: var(--bg-code);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
}

/* .code-showcase uses the shared .code-header below */

.code-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.code-dot.red    { background: #ff5f57; }
.code-dot.yellow { background: #febc2e; }
.code-dot.green  { background: #28c840; }

.code-title {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 8px;
}

.code-body {
  padding: 20px 24px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.8;
  overflow-x: auto;
}

.code-body pre {
  font-family: inherit;
  white-space: pre;
}

/* Shared header used by both .code-showcase and .code-block */
.code-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-subtle);
}


/* ── vqc ExaQL inline span colours (used inside .code-showcase) ─────────── */

.code-comment { color: #6a737d; }
.code-keyword { color: #ff7b72; }
.code-string  { color: #a5d6ff; }
.code-func    { color: #d2a8ff; }
.code-number  { color: #79c0ff; }
.code-ai      { color: #3fb950; font-weight: 600; }
.code-filter  { color: #ffa657; }


/* ── Syntax highlighter token colours (applied by syntax.js) ────────────── */

.sh-prompt     { color: var(--color-tcp);   font-weight: 600; }  /* green  — vqc> $ */
.sh-keyword    { color: var(--accent-text); font-weight: 500; }  /* blue   — keywords */
.sh-string     { color: var(--color-icmp);  }                    /* yellow — "strings" */
.sh-number     { color: var(--color-http);  }                    /* orange — numbers */
.sh-comment    { color: var(--text-muted);  font-style: italic; }/* grey   — // -- comments */
.sh-type       { color: #79c0ff; }                               /* soft blue — SDK types */
.sh-annotation { color: #ffa657; font-style: italic; }           /* amber  — @annotations */


/* ── Architecture / text diagrams ───────────────────────────────────────── */

.arch-diagram {
  background: var(--bg-code);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 24px 28px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-secondary);
  overflow-x: auto;
}

.arch-diagram pre        { margin: 0; font-family: inherit; white-space: pre; }
.arch-diagram .arch-highlight { color: var(--accent-text); }
.arch-diagram .arch-green     { color: var(--color-tcp); }
.arch-diagram .arch-dim       { color: var(--text-muted); }