/* ─── Reset & Layout ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { background: #fff; height: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  height: 100%;
  display: flex;
}

/* ─── Sidebar ─── */
.sidebar {
  width: 220px;
  min-width: 220px;
  background: #fafafa;
  border-right: 1px solid #eee;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
}

.sidebar__title {
  font-size: 17px;
  font-weight: 800;
  color: #111;
  letter-spacing: -0.3px;
  line-height: 1.3;
}

.sidebar__subtitle {
  font-size: 11px;
  color: #888;
  margin-top: 6px;
  line-height: 1.5;
}

.sidebar__section-label {
  font-size: 9px;
  font-weight: 700;
  color: #bbb;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 24px;
  margin-bottom: 8px;
}

.sidebar__footer {
  margin-top: auto;
  font-size: 8px;
  color: #bbb;
  padding-top: 12px;
  border-top: 1px solid #eee;
  line-height: 1.5;
}

/* ─── Toggle Bar ─── */
.toggle-bar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #f0f0f0;
  border-radius: 6px;
  padding: 3px;
}

.toggle-bar__btn {
  padding: 7px 12px;
  border: none;
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: #888;
  transition: all 0.15s ease;
  text-align: left;
}

.toggle-bar__btn--active {
  background: #fff;
  color: #333;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ─── Legend ─── */
.legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  color: #777;
}

.legend--hidden { display: none; }

.legend__item {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 2px 0;
  border-radius: 3px;
  transition: background 0.1s;
}

.legend__item:hover { background: #eee; }

.legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
  margin-right: 5px;
  flex-shrink: 0;
}

.legend__group-label {
  font-size: 8px;
  font-weight: 700;
  color: #bbb;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
  margin-top: 2px;
}

.legend__group-label + .legend__group-label { margin-top: 10px; }

/* ─── Main Content ─── */
.main {
  flex: 1;
  padding: 20px 32px 20px 24px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.charts {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ─── Per-DL Chart Block ─── */
.chart-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chart-block__name {
  font-size: 13px;
  font-weight: 700;
  color: #333;
  margin-bottom: 1px;
  flex-shrink: 0;
}

.chart-block__container {
  position: relative;
  flex: 1;
  min-height: 0;
}

.chart-block__container svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ─── SVG Elements ─── */
.grid-line { stroke: #f0f0f0; stroke-width: 0.5; }
.center-line { stroke: #e8e8e8; stroke-width: 0.5; }

.stream {
  transition: opacity 0.15s ease;
  cursor: pointer;
}

.stream-label {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  fill: rgba(255, 255, 255, 0.9);
  pointer-events: none;
}

/* Stream dimming states */
.stream-dimmed .stream { opacity: 0.25; }
.stream-dimmed .stream.stream--active { opacity: 1; }
.stream-dimmed .stream-label { opacity: 0.15; }
.stream-dimmed .stream-label.stream-label--active { opacity: 1; }

/* Legend-driven dimming (cross-chart) */
.stream.stream--legend-dim { opacity: 0.12; }
.stream.stream--legend-active { opacity: 1; }

/* Count mode blocks */
.count-block rect { transition: opacity 0.15s ease; }

/* ─── Tooltip ─── */
.tooltip {
  position: fixed;
  pointer-events: none;
  background: rgba(30, 30, 30, 0.92);
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  line-height: 1.4;
  display: none;
  z-index: 100;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.tooltip__title { font-size: 12px; font-weight: 800; }
.tooltip__detail { color: #aaa; font-weight: 500; }
.tooltip__swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}