.sdof-app {
  margin: 1.5rem 0;
  border: 1px solid var(--bs-border-color, #ccc);
  border-radius: 0.5rem;
  padding: 1rem;
  background: var(--bs-body-bg, #fff);
}

.sdof-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.75rem 1.25rem;
  align-items: end;
  margin-bottom: 0.75rem;
}

.sdof-control-group {
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
}

.sdof-control-group label {
  margin-bottom: 0.25rem;
}

.sdof-control-group input[type="range"] {
  width: 100%;
}

.sdof-buttons {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.sdof-buttons button {
  padding: 0.4rem 0.9rem;
  border-radius: 0.35rem;
  border: 1px solid var(--bs-border-color, #ccc);
  background: var(--bs-tertiary-bg, #f0f0f0);
  color: var(--bs-body-color, #222);
  cursor: pointer;
  font-size: 0.9rem;
}

.sdof-buttons button:hover {
  filter: brightness(0.95);
}

.sdof-readout {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
  align-items: center;
}

.sdof-canvas3d {
  width: 100%;
  height: 380px;
  border-radius: 0.4rem;
  overflow: hidden;
  background: #dfe6ec;
}

.sdof-canvas3d canvas {
  display: block;
}

.gimbal-lock-badge {
  display: none;
  padding: 0.15rem 0.6rem;
  border-radius: 0.35rem;
  background: #c53030;
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
}

.gimbal-lock-badge.active {
  display: inline-block;
}

.gimbal-det-warn {
  color: #c53030;
  font-weight: 600;
}

/* ---- shared by the rotation-order and axis-angle simulators ---- */

.sdof-control-group select {
  width: 100%;
  padding: 0.25rem 0.3rem;
  border-radius: 0.3rem;
  border: 1px solid var(--bs-border-color, #ccc);
  background: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #222);
  font-size: 0.9rem;
}

/* Two ships side by side need more room than the single gimbal rig. */
.rot-canvas3d {
  height: 440px;
}

.rot-legend {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.rot-chip {
  font-size: 0.85rem;
  padding: 0.25rem 0.65rem;
  border-radius: 0.35rem;
  border-left: 6px solid transparent;
  background: var(--bs-tertiary-bg, #f1f3f5);
}

.rot-chip-a {
  border-left-color: #3182ce;
}

.rot-chip-b {
  border-left-color: #dd6b20;
}

.rot-status {
  font-size: 0.88rem;
  min-height: 1.35em;
  margin-bottom: 0.5rem;
  color: var(--bs-secondary-color, #555);
}

.rot-badge {
  padding: 0.15rem 0.6rem;
  border-radius: 0.35rem;
  font-weight: 600;
  font-size: 0.85rem;
  color: #fff;
}

.rot-badge-warn {
  background: #c53030;
}

.rot-badge-ok {
  background: #2f855a;
}

.rot-matrix-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-top: 0.9rem;
}

.rot-matrix-block {
  margin: 0;
}

.rot-matrix-block figcaption {
  font-size: 0.85rem;
  text-align: center;
  margin-bottom: 0.35rem;
}

.rot-matrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.15rem 0.8rem;
  justify-items: end;
  padding: 0.45rem 0.75rem;
  border-left: 2px solid var(--bs-body-color, #222);
  border-right: 2px solid var(--bs-body-color, #222);
  border-radius: 0.25rem;
  font-family: var(--bs-font-monospace, monospace);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* Shown by webgl-notice.js when the browser cannot give us a WebGL context, so
   an empty 3D panel explains itself instead of just sitting there blank. */
.webgl-notice {
  display: flex;
  height: 100%;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  padding: 1.25rem;
  color: #3d4852;
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: center;
}

.webgl-notice p {
  margin: 0;
}

.webgl-notice .webgl-notice-title {
  margin-bottom: 0.35rem;
  font-weight: 600;
}