/* Engine-only styles: the stage background, the cycle dial, the cylinder
   chips and the p-V canvas. Shared panel styles come from sim-runtime.css. */

:root {
  --intake: #4da3ff;
  --compression: #a58bff;
  --power: #ff8a3d;
  --exhaust: #a3adb8;
}

#sim-stage {
  background: radial-gradient(120% 90% at 55% 38%, #1e2a36 0%, #0e1319 72%);
}

.stroke-head {
  display: flex;
  gap: 14px;
  align-items: center;
}
#dial {
  width: 104px;
  height: 104px;
  flex: none;
}
#dial .seg-arc {
  fill: none;
  stroke-width: 9;
  opacity: 0.38;
  transition: opacity 0.2s;
}
#dial .seg-arc.on {
  opacity: 1;
  stroke-width: 12;
}
#dial text {
  font: 500 8.5px var(--sim-mono);
  fill: var(--sim-muted);
}
#dial .deg {
  font: 500 16px var(--sim-font);
  fill: var(--sim-strong);
}
#dial .hub {
  fill: var(--sim-fg);
}
#needle {
  stroke: var(--sim-fg);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.valves {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--sim-muted);
}
.valves b {
  font-weight: 500;
  color: var(--sim-fg);
}
.chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 6px;
}
.chip {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 6px 6px;
  border: 1px solid var(--sim-line);
  border-radius: 6px;
}
.chip .n {
  font: 500 11px/1 var(--sim-mono);
  color: var(--sim-muted);
}
.chip .s {
  font: 500 13px/1.1 var(--sim-font);
}
.chip .bar {
  height: 3px;
  border-radius: 2px;
  background: currentColor;
}
.pv-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
}
.pv-head .sim-mono {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--sim-muted);
}
.pv-head b {
  font-weight: 500;
  color: var(--sim-fg);
}
#pv {
  display: block;
  width: 100%;
  height: 150px;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.03);
}