/* Quantum Studio. Every colour and face comes from the host's design tokens
   (tokens.css standing alone; the site's own inside the site), so it follows
   the host's theme. Syntax colours are the Studio's, taken from the palette. */
.qs {
  --qs-kw: var(--accent-text, #d4a574);
  --qs-type: var(--accent-text-hover, #e0bd95);
  --qs-gate: var(--info-text, #7aa0ff);
  --qs-num: var(--warn-text, #f0a020);
  --qs-str: var(--std-text, #10b981);
  --qs-gap: 12px;
  --qs-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: var(--qs-gap);
  min-height: min(100vh, 1100px);
  color: var(--text-primary);
  background: var(--bg-base);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 14px;
}
.qs *, .qs *::before, .qs *::after { box-sizing: border-box; }
.qs h1, .qs h2 { margin: 0; text-wrap: balance; }
.qs-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--qs-radius); background: var(--bg-surface); }
.qs-brand { display: flex; align-items: baseline; gap: 8px; margin-right: auto; }
.qs-brand .qs-title { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: 0.01em; }
.qs-mark { font-family: var(--font-mono, ui-monospace, monospace); color: var(--accent-text); font-size: 14px; }
.qs-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--qs-gap); flex: 1; min-height: 0; }
.qs-side { display: flex; flex-direction: column; gap: var(--qs-gap); min-width: 0; }
.qs-pane { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border); border-radius: var(--qs-radius); background: var(--bg-surface); overflow: hidden; }
.qs-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.qs-head h2 { font-size: 11px; font-family: var(--font-mono, ui-monospace, monospace); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); }
.qs-grow { flex: 1; }
.qs-program { min-height: 520px; }
.qs-editor { flex: 1; min-height: 260px; overflow: auto; }
.qs-editor .cm-editor { height: 100%; }
.qs-editor .cm-editor.cm-focused { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: -2px; }
.qs-shows { margin: 0; padding: 0 12px; font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.qs-shows:not(:empty) { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.qs-job { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
.qs-row { display: flex; flex-wrap: wrap; gap: 8px; }
.qs-field { display: flex; flex-direction: column; gap: 3px; flex: 1 1 120px; min-width: 0; font-size: 10px; font-family: var(--font-mono, ui-monospace, monospace); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.qs-input, .qs-select { width: 100%; min-height: 32px; padding: 5px 8px; border: 1px solid var(--border-subtle); border-radius: 6px; background: var(--bg-base); color: var(--text-primary); font: 12px var(--font-mono, ui-monospace, monospace); letter-spacing: 0; text-transform: none; }
.qs-select { width: auto; }
.qs-noise summary { cursor: pointer; font: 11px var(--font-mono, ui-monospace, monospace); color: var(--text-secondary); padding: 4px 0; }
.qs-noise .qs-row { padding-top: 6px; }
.qs-btn { min-height: 32px; padding: 5px 12px; border: 1px solid var(--border-subtle); border-radius: 6px; background: var(--bg-base); color: var(--text-primary); font: 12px var(--font-mono, ui-monospace, monospace); cursor: pointer; white-space: nowrap; }
.qs-btn:hover:not(:disabled) { border-color: var(--accent); }
.qs-btn:disabled { opacity: 0.5; cursor: default; }
.qs-btn.qs-small { min-height: 26px; padding: 2px 9px; font-size: 11px; }
.qs-primary { background: var(--accent-fill, var(--accent)); border-color: var(--accent-fill, var(--accent)); color: var(--on-accent, #0c0a09); font-weight: 650; }
.qs-primary:hover:not(:disabled) { background: var(--accent-fill-hover, var(--accent)); }
.qs-where { display: inline-flex; border: 1px solid var(--border-subtle); border-radius: 6px; overflow: hidden; }
.qs-seg { min-height: 32px; padding: 5px 11px; border: 0; background: var(--bg-base); color: var(--text-secondary); font: 12px var(--font-mono, ui-monospace, monospace); cursor: pointer; }
.qs-seg + .qs-seg { border-left: 1px solid var(--border-subtle); }
.qs-seg.on { background: color-mix(in srgb, var(--accent) 18%, var(--bg-base)); color: var(--text-primary); }
.qs-seg:disabled { opacity: 0.45; cursor: default; }
.qs :focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 2px; }
.qs-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-subtle); font: 11px var(--font-mono, ui-monospace, monospace); color: var(--text-secondary); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.qs-badge.ok { color: var(--ok-text); border-color: color-mix(in srgb, var(--ok-text) 40%, transparent); }
.qs-badge.bad { color: var(--bad-text); border-color: color-mix(in srgb, var(--bad-text) 40%, transparent); }
.qs-badge.run { color: var(--info-text); border-color: color-mix(in srgb, var(--info-text) 40%, transparent); }
.qs-circuit { margin: 0; padding: 10px 12px; min-height: 120px; max-height: 320px; overflow: auto; font: 12px/1.35 var(--font-mono, ui-monospace, monospace); color: var(--text-primary); background: var(--bg-base); white-space: pre; }
.qs-circuit.stale { color: var(--bad-text); white-space: pre-wrap; }
.qs-circuit[hidden], .qs-diagram[hidden] { display: none; }
.qs-diagram { min-height: 120px; max-height: 360px; overflow: auto; padding: 6px 4px; background: var(--bg-base); }
.qs-diagram.stale .qs-note { color: var(--bad-text); padding: 6px 8px; }
.qs-legend { margin: 0; padding: 0 12px 8px; }
.qs-legend:empty { display: none; }
.qc { display: block; font-family: var(--font-mono, ui-monospace, monospace); }
.qc-wire { stroke: var(--border-subtle); stroke-width: 1.5; }
.qc-name { fill: var(--text-muted); font-size: 11px; }
.qc-join { stroke: var(--text-secondary); stroke-width: 1.5; }
.qc-box { fill: var(--bg-surface); stroke: var(--accent); stroke-width: 1.3; }
.qc-cond .qc-box { stroke-dasharray: 3 2; }
.qc-label { fill: var(--text-primary); font-size: 12px; }
.qc-sub { fill: var(--text-muted); font-size: 9px; }
.qc-dot { fill: var(--text-primary); }
.qc-ring { fill: var(--bg-surface); stroke: var(--text-primary); stroke-width: 1.5; }
.qc-stroke { stroke: var(--text-primary); stroke-width: 1.5; }
.qc-meter { fill: none; stroke: var(--info-text, var(--accent)); stroke-width: 1.4; }
.qc-item:hover .qc-box, .qc-item:hover .qc-ring { stroke-width: 2.2; }
.qs-note { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono, ui-monospace, monospace); overflow-wrap: anywhere; }
.qs-result { padding: 10px 12px; display: flex; flex-direction: column; gap: 12px; overflow: auto; }
.qs-empty { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.qs-block { display: flex; flex-direction: column; gap: 5px; }
.qs-k { font: 10px var(--font-mono, ui-monospace, monospace); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.qs-method { font-weight: 650; }
.qs-why { color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.qs-warn { margin: 4px 0 0; color: var(--warn-text); font-size: 12px; }
.qs-bars { display: flex; flex-direction: column; gap: 3px; }
.qs-bar { display: grid; grid-template-columns: minmax(3ch, max-content) 1fr auto; gap: 8px; align-items: center; font: 12px var(--font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; }
.qs-track { height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--text-muted) 15%, transparent); overflow: hidden; }
.qs-fill { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.qs-n { color: var(--text-secondary); }
.qs-table { width: 100%; border-collapse: collapse; font: 12px var(--font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; }
.qs-table th, .qs-table td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--border); vertical-align: top; overflow-wrap: anywhere; }
.qs-table th { color: var(--text-secondary); font-weight: 500; }
.qs-table thead th { color: var(--text-muted); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.qs-table .num { text-align: right; }
.qs-table .mono { color: var(--text-primary); }
.qs-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.qs-hist { max-height: 260px; }
.qs-history { list-style: none; margin: 0; padding: 4px; overflow: auto; }
.qs-hitem { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--text-primary); text-align: left; cursor: pointer; font: inherit; }
.qs-hitem:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.qs-htitle { font: 12px var(--font-mono, ui-monospace, monospace); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-history > li.qs-note { padding: 8px; }
.qs-foot { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 4px 2px; font: 11px var(--font-mono, ui-monospace, monospace); color: var(--text-muted); }
.qs-status { margin-left: auto; color: var(--text-secondary); overflow-wrap: anywhere; }
.qs-status.ok { color: var(--ok-text); }
.qs-status.bad { color: var(--bad-text); }
.qs-ai { min-height: 200px; }
.qs-ai-settings { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.qs-ai-settings[hidden] { display: none; }
.qs-ai-quick { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 12px 0; }
.qs-ai-log { list-style: none; margin: 0; padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow: auto; }
.qs-ai-log > li { font-size: 13px; line-height: 1.5; }
.qs-ai-log p { margin: 0; }
.qs-ai-user { align-self: flex-end; max-width: 85%; padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 14%, var(--bg-base)); }
.qs-ai-answer { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-base); }
.qs-ai-text { white-space: pre-wrap; }
.qs-ai-tool { font-size: 12px; color: var(--text-secondary); }
.qs-ai-tool summary { cursor: pointer; font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; color: var(--text-muted); }
.qs-ai-error { color: var(--bad-text); }
.qs-ai-unsourced { font-size: 12px; color: var(--warn-text); }
.qs-ai-code { margin: 0; padding: 8px 10px; border-radius: 6px; background: var(--bg-surface); border: 1px solid var(--border); font: 12px/1.4 var(--font-mono, ui-monospace, monospace); overflow: auto; white-space: pre; }
.qs-ai-proposal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 4px; }
.qs-ai-ask { display: flex; gap: 8px; align-items: flex-end; padding: 8px 12px 12px; border-top: 1px solid var(--border); }
.qs-ai-input { min-height: 40px; resize: vertical; font-family: var(--font-sans, system-ui, sans-serif); font-size: 13px; }
@media (max-width: 900px) {
  .qs-grid { grid-template-columns: minmax(0, 1fr); }
  .qs-program { min-height: 0; }
  .qs-editor { min-height: 240px; max-height: 60vh; }
  .qs-brand { margin-right: 0; flex-basis: 100%; }
  .qs-status { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .qs * { transition: none !important; } }