/* Layout container for charts */
.charts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* Place 3D canvas below the three axis charts */
#chart-3d {
  grid-column: 1 / -1;
}

/* Responsive canvas sizing with fixed 4:3 ratio */
canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}

@media (max-width: 640px) {
  .charts {
    grid-template-columns: 1fr;
  }

}

/* Typography for sensor selector */
label,
select {
  font-size: 1rem;
}

@media (min-width: 768px) {
  label,
  select {
    font-size: 1.25rem;
  }
}

/* Light/Dark theme */
body {
  background-color: #f9fafb;
  color: #111827;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #111827;
    color: #f9fafb;
  }
}