/* 「经纪商持股变化」那一页专用的样式 —— 页面级样式表的第二份。
 *
 * 判据和 `search.css` 一字不差（这段代码对别的页面有没有用），账也是同一笔：`app.css`
 * 的内容哈希写在**每一份** HTML 的 `<link>` 里，所以这两百多行留在共用样式表里，改一个
 * padding 就是四个站三万多个产物文件的 diff。见 AGENTS.md 的「样式」。
 *
 * 图的取色也在这里，不在脚本里：`ccass-chart.js` 只读下面这几个变量（`--chart-*`），
 * 所以换配色是改这一份文件的事，不用碰那段画图的代码。
 */

.ccass-chart {
  /* 色相由脚本按黄金角算，这里只定「多饱和、多亮」—— 那两件事是版面的事。 */
  --chart-sat: 62%;
  --chart-lum: 42%;
  /* 价格挂在右轴上，是这张图的第二主角，所以给它前景色加一档更粗的线。别用 `--primary`：
   * 那个红落在黄金角那圈色相里，会和某一条持股曲线撞上。 */
  --chart-price: var(--foreground);
  --chart-axis: var(--muted-foreground);
  --chart-grid: var(--border);

  margin-top: 12px;
}

.ccass-chart__status {
  margin: 0;
  padding: 24px 0;
  color: var(--muted-foreground);
  font-size: 13px;
}

.ccass-chart__plot {
  position: relative;
  width: 100%;
  /* 没缩放时是十字准星，缩放之后可以拖 —— 光标是这里唯一告诉读者「现在能拖」的东西。 */
  cursor: crosshair;
}

.ccass-chart__plot--grabbing {
  cursor: grabbing;
}

.ccass-chart__plot svg {
  display: block;
  width: 100%;
  /* 图上的文字不该被选中：读者在这一块上按住拖的是视野，不是一段文本。 */
  user-select: none;
}

/* 悬停时那一小块。绝对定位在 plot 里，`left` 由脚本按十字线的位置给百分比。
 * `pointer-events: none` 不能少 —— 它浮在图上，接得住鼠标的话十字线会在它下面卡住。 */
.ccass-chart__tip {
  position: absolute;
  top: 0;
  z-index: 2;
  transform: translateX(12px);
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.14);
  font-size: 11px;
  line-height: 1.55;
  white-space: nowrap;
  pointer-events: none;
}

/* 十字线走到右边一大半时翻到左侧去，否则这一块被图自己的右边界裁掉。 */
.ccass-chart__tip--left {
  transform: translateX(calc(-100% - 12px));
}

.ccass-chart__tip-day {
  margin-bottom: 3px;
  color: var(--muted-foreground);
}

.ccass-chart__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 2px;
  vertical-align: baseline;
}

.ccass-chart__hint {
  margin: 6px 0 0;
  color: var(--muted-foreground);
  font-size: 12px;
}

.ccass-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.ccass-chart__key {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--secondary-foreground);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
}

.ccass-chart__key:hover {
  border-color: var(--muted-foreground);
}

/* 关掉的那一条整块淡下去，**色块本身不变色** —— 读者要点回来的时候还得靠它认出是哪条。 */
.ccass-chart__key--off {
  opacity: 0.42;
  text-decoration: line-through;
}

@media (max-width: 768px) {
  .ccass-chart__legend {
    gap: 5px;
  }

  .ccass-chart__key {
    padding: 2px 7px;
    font-size: 11px;
  }

  /* 手机上没有滚轮也拖不动（那一层手势归页面滚动），所以那句提示只说得着的部分。
   * 收窄的是文案不是功能：横屏接上鼠标照样能用。 */
  .ccass-chart__tip {
    font-size: 10px;
  }
}