:root {
  color-scheme: light;
}

body {
  background: #f8f9fa;
  color: #2c3e50;
}

.chart-frame {
  position: relative;
  height: 320px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.chart-frame.tall {
  height: 360px;
}

.chart-frame canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
}

main {
  min-width: 0;
  max-width: 100%;
}

.rail-btn.is-selected {
  background: #ffffff;
  box-shadow: inset 3px 0 0 #17a2b8;
}

.live-dot {
  animation: pulse-dot 1.8s ease-out infinite;
}

@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.45); }
  100% { box-shadow: 0 0 0 8px rgba(40, 167, 69, 0); }
}

input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.55;
}