/* Extra CSS for TQC Documentation */

/* Custom color scheme for quantum computing theme */
:root {
  --md-primary-fg-color: #673ab7;
  --md-primary-fg-color--light: #8561c5;
  --md-primary-fg-color--dark: #512da8;
  --md-accent-fg-color: #9c27b0;
  --tqc-quantum-blue: #1976d2;
  --tqc-topological-purple: #7b1fa2;
  --tqc-braid-orange: #f57c00;
}

/* Enhanced code blocks */
.highlight {
  border-radius: 8px;
  overflow: hidden;
}

/* Mathematical expressions */
.arithmatex {
  padding: 0.25em 0.5em;
  background-color: var(--md-code-bg-color);
  border-radius: 4px;
  font-family: "Roboto Mono", monospace;
}

/* Quantum circuit diagrams */
.quantum-circuit {
  text-align: center;
  margin: 2em 0;
  padding: 1em;
  background: var(--md-default-bg-color);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Braid diagrams */
.braid-diagram {
  text-align: center;
  margin: 2em 0;
  padding: 1em;
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
  border-radius: 8px;
  border-left: 4px solid var(--tqc-braid-orange);
}

/* Anyon type cards */
.anyon-card {
  display: flex;
  flex-direction: column;
  padding: 1.5em;
  margin: 1em 0;
  background: var(--md-default-bg-color);
  border-radius: 8px;
  border: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: box-shadow 0.3s ease;
}

.anyon-card:hover {
  box-shadow: 0 4px 12px rgba(103, 58, 183, 0.15);
}

.anyon-card h3 {
  margin-top: 0;
  color: var(--tqc-topological-purple);
}

/* Performance metrics */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1em;
  margin: 2em 0;
}

.metric-card {
  padding: 1em;
  text-align: center;
  background: var(--md-default-bg-color);
  border-radius: 8px;
  border: 1px solid var(--md-default-fg-color--lightest);
}

.metric-value {
  font-size: 2em;
  font-weight: bold;
  color: var(--md-accent-fg-color);
}

/* Warning callouts for experimental features */
.experimental {
  border-left-color: var(--tqc-braid-orange) !important;
}

/* Topological protection indicators */
.protected {
  position: relative;
  padding-left: 2em;
}

.protected::before {
  content: "🛡️";
  position: absolute;
  left: 0;
  top: 0;
}

/* Quantum advantage highlights */
.quantum-advantage {
  background: linear-gradient(90deg, 
    rgba(103, 58, 183, 0.1) 0%, 
    rgba(156, 39, 176, 0.1) 100%);
  border-radius: 4px;
  padding: 0.5em;
  margin: 1em 0;
}

/* Interactive elements */
.interactive-demo {
  border: 2px solid var(--md-accent-fg-color);
  border-radius: 8px;
  padding: 1em;
  margin: 2em 0;
  background: var(--md-default-bg-color);
}

/* Responsive design improvements */
@media screen and (max-width: 768px) {
  .metrics-grid {
    grid-template-columns: 1fr;
  }
  
  .anyon-card {
    margin: 0.5em 0;
  }
}

/* Dark mode adjustments */
[data-md-color-scheme="slate"] {
  .braid-diagram {
    background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
  }
  
  .quantum-circuit {
    background: var(--md-default-bg-color);
    box-shadow: 0 2px 8px rgba(255,255,255,0.05);
  }
}

/* Animation for quantum state transitions */
@keyframes quantum-pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

.quantum-state {
  animation: quantum-pulse 2s ease-in-out infinite;
}

/* Braid crossing animations */
@keyframes braid-cross {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(90deg); }
  50% { transform: rotate(180deg); }
  75% { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}

.braid-crossing:hover {
  animation: braid-cross 1s ease-in-out;
}

/* Mathematical notation improvements */
.math-block {
  text-align: center;
  margin: 2em 0;
  padding: 1em;
  background: var(--md-code-bg-color);
  border-radius: 8px;
  border-left: 4px solid var(--md-accent-fg-color);
}

/* Compilation flow indicators */
.flow-step {
  display: inline-block;
  padding: 0.5em 1em;
  margin: 0.25em;
  background: var(--md-accent-fg-color);
  color: white;
  border-radius: 20px;
  font-size: 0.9em;
  font-weight: 500;
}

.flow-arrow::after {
  content: "→";
  margin: 0 0.5em;
  color: var(--md-accent-fg-color);
  font-weight: bold;
}