/* ══════════════════════════════════════════════════════
   Quantum Circuit Diagram — Reusable CSS Component
   Works with circuit.js for declarative circuit rendering
   Matches study.css design system (IBM Plex, warm palette)
   ══════════════════════════════════════════════════════ */

/* ── Container ── */
.qc {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.2rem 1.5rem;
  margin: 1rem 0;
  overflow-x: auto;
  display: flex;
  justify-content: center;
}

.qc svg {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
}

/* ── Wire labels (|0>, |psi>, etc.) ── */
.qc-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  fill: var(--neutral);
}

/* ── Wires ── */
.qc-wire {
  stroke: var(--text);
  stroke-width: 1.2;
  fill: none;
}

/* ── Single-qubit gate boxes ── */
.qc-gate-box {
  fill: var(--bg-card);
  stroke: var(--text);
  stroke-width: 1.2;
  rx: 4;
  ry: 4;
}

.qc-gate-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  fill: var(--text);
  text-anchor: middle;
  dominant-baseline: central;
}

/* ── Multi-qubit gate boxes (oracles) ── */
.qc-oracle-box {
  fill: var(--quantum-light);
  stroke: var(--quantum);
  stroke-width: 1.4;
  rx: 4;
  ry: 4;
}

.qc-oracle-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  fill: var(--quantum);
  text-anchor: middle;
  dominant-baseline: central;
}

/* ── Measurement symbol ── */
.qc-meter-box {
  fill: var(--bg-card);
  stroke: var(--text);
  stroke-width: 1.2;
  rx: 4;
  ry: 4;
}

.qc-meter-arc {
  fill: none;
  stroke: var(--text);
  stroke-width: 1.2;
}

.qc-meter-needle {
  stroke: var(--text);
  stroke-width: 1.2;
}

/* ── Control dots ── */
.qc-control-filled {
  fill: var(--text);
  stroke: none;
}

.qc-control-open {
  fill: var(--bg-card);
  stroke: var(--text);
  stroke-width: 1.2;
}

/* ── Control vertical line ── */
.qc-control-line {
  stroke: var(--text);
  stroke-width: 1.2;
}

/* ── CNOT target (circled plus) ── */
.qc-cnot-circle {
  fill: none;
  stroke: var(--text);
  stroke-width: 1.2;
}

.qc-cnot-plus {
  stroke: var(--text);
  stroke-width: 1.2;
}

/* ── Register brace/label ── */
.qc-brace {
  stroke: var(--neutral);
  stroke-width: 1;
  fill: none;
}

.qc-brace-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  fill: var(--neutral);
  text-anchor: end;
  dominant-baseline: central;
}

/* ── Ellipsis dots (for "n qubits" notation) ── */
.qc-dots {
  fill: var(--neutral);
}

/* ── Caption under circuit ── */
.qc-caption {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  color: var(--neutral);
  text-align: center;
  margin-top: 0.5rem;
  letter-spacing: 0.02em;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .qc {
    padding: 0.8rem 1rem;
  }
}