.analysis-graphs {
  border: 1px solid #e9ecef;
  background-color: var(--card-bg, #f8f9fa);
  padding: 1rem;
  margin-top: 1rem;
}
.analysis-graphs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.analysis-graphs-title { font-size: 1.1rem; font-weight: 600; }
.graph-toggles{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center}
.graph-legend{display:inline-flex;align-items:center;gap:.4rem;font-weight:500;background:transparent;border:0;padding:2px 0;cursor:pointer}
.graph-legend:focus{outline:2px solid rgba(43,124,255,.35);outline-offset:2px}
.graph-legend.off{opacity:.45}
.toggle-swatch{display:inline-block;width:14px;height:14px;border:1px solid rgba(0,0,0,.15);border-radius:0}
.dark-mode .toggle-swatch{border-color:rgba(255,255,255,.25)}
.analysis-graphs-canvas-wrap{position:relative;width:100%;height:300px;overflow:hidden}
.analysis-graphs-canvas-wrap canvas{position:absolute;top:0;left:0;width:100%;height:300px;display:block}
#score-timeline-static{z-index:1;pointer-events:none}
#score-timeline-series{z-index:2}

/* --- Dark mode overrides for analysis graph --- */
.dark-mode { --card-bg: #333333; }
.dark-mode .analysis-graphs {
  background-color: var(--card-bg, #1f1f1f);
  border-color: #444444;
}
.dark-mode .analysis-graphs-title { color: #eaeaea; }
.dark-mode .graph-legend { color: #e0e0e0; }
.dark-mode .graph-legend.off { opacity: .5; }
.dark-mode .analysis-graphs-canvas-wrap { background: transparent; }
.dark-mode .toggle-swatch { border-color: rgba(255,255,255,.25); }

/* Contest timeline */
.analysis-timeline { border: 1px solid #e9ecef; background-color: var(--card-bg, #f8f9fa); padding: 1rem; margin-top: 1rem; }
.timeline-canvas-wrap{ position:relative; width:100%; height:80px; overflow:hidden }
.timeline-canvas-wrap canvas{ position:absolute; top:0; left:0; width:100%; height:80px; display:block }
/* Refined timeline tooltip */
.timeline-tooltip{
  position:fixed; pointer-events:none;
  --tt-bg: rgba(20,20,20,0.92);
  background: var(--tt-bg);
  color:#fff; font-size:13px; line-height:1.35;
  padding:8px 10px; border-radius:4px; /* subtle, nearly square */
  border:1px solid rgba(255,255,255,0.10);
  box-shadow: 0 4px 12px rgba(0,0,0,.20); /* lighter shadow */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity:0; transform: translateY(2px);
  transition: opacity 120ms ease, transform 120ms ease;
  will-change: opacity, transform; z-index: 9999; max-width:280px;
}
.timeline-tooltip.visible{ opacity:1; transform: translateY(0) scale(1); }

.timeline-tooltip .tip-head{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.timeline-tooltip .tip-accent{ width:8px; height:8px; border-radius:50%; background:var(--accent, #888); box-shadow:0 0 0 1px rgba(255,255,255,.12) inset; }
.timeline-tooltip .tip-title{ font-weight:700; font-size:13.5px; letter-spacing:.2px; margin:0; }
.timeline-tooltip .tip-grid{ display:grid; grid-template-columns:auto 1fr; column-gap:12px; row-gap:2px; align-items:center; }
.timeline-tooltip .tip-grid span:first-child{ opacity:.72; }
.timeline-tooltip .tip-grid span:last-child{ font-weight:600; }

/* No caret for minimal style */
.timeline-tooltip::after{ content:none; }

/* Dark mode */
.dark-mode .analysis-timeline{ background-color:#333333; border-color:#444444; }

.dark-mode .timeline-tooltip{
  --tt-bg: #1e1e1e; /* match site dark bg */
  color:#f3f3f3;
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 4px 12px rgba(0,0,0,.30);
}


/* Light theme variant */
body:not(.dark-mode) .timeline-tooltip{ --tt-bg: rgba(255,255,255,0.98); color:#1e1e1e; border-color: rgba(0,0,0,0.10); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
body:not(.dark-mode) .timeline-tooltip .tip-accent{ box-shadow:0 0 0 1px rgba(0,0,0,.06) inset; }

/* Activity intensity mini chart */
.analysis-activity{ border:1px solid #e9ecef; background-color: var(--card-bg, #f8f9fa); padding:1rem; margin-top:1rem; }
.activity-canvas-wrap{ position:relative; width:100%; height:48px; overflow:hidden }
.activity-canvas-wrap canvas{ position:absolute; top:0; left:0; width:100%; height:48px; display:block }
.dark-mode .analysis-activity{ background-color:#333333; border-color:#444444; }
/* Timeline heatmap strip (blocky) */
.timeline-heatmap-wrap{ position:relative; width:100%; height:18px; margin-top:6px; overflow:hidden }
.timeline-heatmap-wrap canvas{ position:absolute; top:0; left:0; width:100%; height:18px; display:block }


.analysis-empty{ opacity:.9 }
.analysis-empty-note{ font-size:.95rem; color:#6c757d; padding:.5rem 0 0 }
.dark-mode .analysis-empty-note{ color:#c6c8ca }