/* Airplane only: the panels' canvases, force labels and the air-direction
   note in the wing section. Shared panel and label styles come from
   sim-runtime.css. */

#forces-chart {
  display: block;
  width: 100%;
  height: 128px;
}

#pressure-chart {
  display: block;
  width: 100%;
  height: 140px;
}

#polar-chart {
  display: block;
  width: 100%;
  height: 150px;
}

/* Force labels carry their arrow's colour as a left edge. */
.ap-force {
  border-left: 3px solid var(--force);
}

/* On a phone-sized stage the force pills would cover the fuselage. */
@media (max-width: 500px) {
  .ap-force {
    padding: 1px 5px;
    font-size: 11px;
  }
}

.ap-note {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 1;
  pointer-events: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgb(10 10 10 / 0.7);
  color: var(--sim-fg);
  font: 500 12px/1.3 var(--sim-font);
  white-space: nowrap;
}