.dept-chart {
  margin: 0 0 22px;
}

.dept-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0 0 8px;
  padding: 0;
  color: var(--muted-foreground);
  font-size: 13px;
  line-height: 1.4;
}

.dept-chart__key {
  display: inline-flex;
  align-items: center;
}

.dept-chart__swatch {
  display: inline-block;
  width: 16px;
  height: 0;
  margin-right: 6px;
  border-bottom: 2px solid var(--foreground);
  flex: none;
}

.dept-chart__swatch--buy { border-bottom-color: var(--primary); }
.dept-chart__swatch--sell {
  border-bottom-color: var(--down);
  border-bottom-style: dashed;
}
.dept-chart__swatch--net { border-bottom-style: dotted; }

.dept-chart__plot {
  position: relative;
  overflow: hidden;
}

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

.dept-chart.is-pan .dept-chart__plot {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.dept-chart.is-pan .dept-chart__plot.is-grabbing {
  cursor: grabbing;
}

.dept-chart__grid { stroke: var(--separator); stroke-width: 1; }
.dept-chart__frame { fill: none; stroke: var(--border); stroke-width: 1; }
.dept-chart__zero {
  stroke: var(--muted-foreground);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}
.dept-chart__buy,
.dept-chart__sell,
.dept-chart__net {
  fill: none;
  stroke-width: 1.75;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.dept-chart__buy { stroke: var(--primary); }
.dept-chart__sell { stroke: var(--down); stroke-dasharray: 7 4; }
.dept-chart__net { stroke: var(--foreground); stroke-dasharray: 1.5 3; }
.dept-chart__mark--buy { fill: var(--primary); }
.dept-chart__mark--sell { fill: var(--down); }
.dept-chart__mark--net { fill: var(--foreground); }
.dept-chart__label {
  fill: var(--muted-foreground);
  font-size: 12px;
  font-family: var(--sans);
}
.dept-chart__guide {
  stroke: var(--muted-foreground);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  visibility: hidden;
  pointer-events: none;
}
.dept-chart__guide.is-on { visibility: visible; }
.dept-chart__hit { fill: transparent; }

.dept-chart__tip {
  position: absolute;
  top: 8px;
  z-index: 2;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--foreground);
  font-size: 12.5px;
  line-height: 1.45;
  pointer-events: none;
  white-space: nowrap;
  transform: translateX(8px);
}
.dept-chart__tip[hidden] { display: none; }
.dept-chart__tip--left { transform: translateX(calc(-100% - 8px)); }
.dept-chart__tip--bottom { top: auto; bottom: 8px; }
.dept-chart__tip-date {
  margin: 0 0 2px;
  color: var(--muted-foreground);
}
.dept-chart__tip-row {
  display: flex;
  align-items: center;
  margin: 0;
}
.dept-chart__tip .dept-chart__swatch { width: 14px; }
.dept-chart__tip-net--down { color: var(--down); }

.dept-chart__note {
  margin: 8px 0 0;
  color: var(--muted-foreground);
  font-size: 12.5px;
  line-height: 1.55;
}

@media print {
  .dept-chart { print-color-adjust: exact; }
  .dept-chart__plot { overflow: visible; cursor: auto; }
  .dept-chart__tip,
  .dept-chart__hit { display: none; }
  .dept-chart__guide { visibility: hidden; }
}