/* DCR swing-phase widget (articles/drift-control-ratio.qmd, issue #4535). */

#dcrviz-app {
  --dcrviz-additive: #2563eb;
  --dcrviz-state-dependent: #dc2626;

  font-family: system-ui, sans-serif;
  max-width: 46rem;
}

[data-theme="dark"] #dcrviz-app {
  --dcrviz-additive: #60a5fa;
  --dcrviz-state-dependent: #f87171;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #dcrviz-app {
    --dcrviz-additive: #60a5fa;
    --dcrviz-state-dependent: #f87171;
  }
}

#dcrviz-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: var(--bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.dcrviz-label {
  display: block;
  font-size: 0.82rem;
}

#dcrviz-controls input {
  width: 100%;
}

.dcrviz-phase-row {
  margin-bottom: 1rem;
}

.dcrviz-phase-row input {
  width: 100%;
}

#dcrviz-status {
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.dcrviz-chart {
  width: 100%;
  height: auto;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.dcrviz-line-additive {
  stroke: var(--dcrviz-additive);
}

.dcrviz-line-state-dependent {
  stroke: var(--dcrviz-state-dependent);
}

.dcrviz-legend {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.dcrviz-legend-additive {
  color: var(--dcrviz-additive);
}

.dcrviz-legend-state-dependent {
  color: var(--dcrviz-state-dependent);
}

.dcrviz-results,
.dcrviz-samples {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.dcrviz-results {
  font-size: 0.88rem;
}

.dcrviz-samples {
  font-size: 0.85rem;
}

.dcrviz-results th,
.dcrviz-results td,
.dcrviz-samples th,
.dcrviz-samples td {
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid var(--border-color);
  text-align: left;
}

.dcrviz-mono {
  font-family: monospace;
}