main {
    color: #eee;
}
#cal-wrapper {
  padding: 0 20px;
}
#timelineContainer {
  position: relative;
  width: 100%;
  height: 130px;
}
#timelineContainer, #heatCanvas {
  touch-action: pan-x; /* allow horizontal panning gestures without scrolling the page vertically */
  cursor: grab;
}
.navBtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 30, 34, 0.6);
  border: 1px solid #333;
  color: #ccc;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  z-index: 10;
  border-radius: 4px;
}
.navBtn:hover {
  background: rgba(50, 50, 56, 0.75);
  color: #fff;
}
.navBtn.left {
  left: 4px;
}
.navBtn.right {
  right: 4px;
}
#calendarWrapper {
  margin-top: 6px;
  position: relative;
  width: 100%;
}
#calendarCanvas {
  width: 100%;
  height: calc(100dvh - var(--header-h, 64px) - var(--footer-h, 40px) - 150px);
  display: block;
  border-top: 1px solid #222;
  background: #101112;
  cursor: grab;
  touch-action: none;
}
#calTitle {
  position: absolute;
  left: 16px;
  top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #9fd19f;
  font-family: system-ui, Arial, sans-serif;
  pointer-events: none;
}
.calNav {
  position: absolute;
  top: 6px;
  right: 10px;
  display: flex;
  gap: 6px;
}
.calBtn {
  background: #1f1f22;
  color: #aaa;
  border: 1px solid #333;
  padding: 2px 8px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
}
.calBtn:hover {
  color: #fff;
  background: #2a2a2e;
}
#heatCanvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.tooltip {
  position: fixed;
  pointer-events: none;
  background: rgba(20, 20, 22, 0.95);
  border: 1px solid #333;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  max-width: min(320px, 92vw);
  max-height: min(70vh, 420px);
  overflow: auto;
  line-height: 1.35;
  box-shadow: 0 4px 18px -4px rgba(0, 0, 0, 0.7);
}
.tooltip.pinned { pointer-events: auto; }
.tooltip-ep { margin-bottom: 12px; }
.tooltip-ep:last-child { margin-bottom: 0; }
.tooltip-ep-show { font-weight: 700; color: #9fd19f; margin-bottom: 4px; }
.tooltip-ep-line { color: #ddd; }
.tooltip-ep-desc { color: #b9b9b9; margin-top: 6px; font-size: 12px; line-height: 1.35; }
.yearLabel {
  position: absolute;
  top: 4px;
  font-size: 10px;
  color: #555;
  user-select: none;
  font-weight: 600;
}
canvas {
  image-rendering: crisp-edges;
}
#status {
  position: fixed;
  left: 8px;
  top: 8px;
  background: rgba(30, 30, 34, 0.85);
  padding: 6px 10px;
  border: 1px solid #333;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.25;
  max-width: 260px;
  z-index: 20;
  font-family: system-ui, Arial, sans-serif;
}
#status.ok {
  border-color: #1f5;
  color: #1f5;
}
#status.warn {
  border-color: #d90;
  color: #d90;
}
#status.err {
  border-color: #d55;
  color: #d55;
}
/* removed detailPopup styles (tooltip now handles both hover/click info) */

/* Centered container for main content */
.main-container {
  margin: 0 auto;
  padding: 0 18px;
}

.filter-bar { margin: 8px 0 6px; display: flex; gap: 8px; align-items: center; }
.filter-bar input[type="text"] {
  flex: 1 1 320px;
  max-width: 520px;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #333;
  background: #151515;
  color: #ddd;
}
.filter-clear-btn {
  background: #1f1f22;
  color: #aaa;
  border: 1px solid #333;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
}
.filter-clear-btn:hover:enabled { color: #fff; background: #2a2a2e; }
.filter-clear-btn:disabled { opacity: 0.5; cursor: default; }