/* 「经纪商持股变化」那一页专用的样式 —— 页面级样式表的第二份。
 *
 * 判据和 `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__tip-gap {
  margin-left: 6px;
  font-size: 10px;
  opacity: 0.75;
}

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

/* 缩放和平移那排按钮。它和图例长的是同一个胶囊（下面那一组选择器），只是这几个装的是
 * 一个符号，所以要方一点、居中，并且**够手指点**：触屏那一档撑到 36px，同 `lookup.js`
 * 浮出来那个按钮 —— 28px 的东西手指点不准，而那台机器上本来也没有 hover 可以给。 */
.ccass-chart__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.ccass-chart__tool {
  justify-content: center;
  min-width: 32px;
}

/* 到头的那个按钮灰掉，不是撤掉：一排东西少一格，剩下的会整排挪位置，而读者的手指还停在
 * 刚才那一格上。 */
.ccass-chart__tool:disabled {
  opacity: 0.38;
  cursor: default;
}

.ccass-chart__tool:disabled:hover {
  border-color: var(--border);
}

.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,
.ccass-chart__tool {
  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,
.ccass-chart__tool: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;
  }
}

/* 触屏上那排按钮是缩放唯一的入口（滚轮、拖拽、双击在那边一个都不成立），所以它反过来要
 * 比宽屏那档更大而不是更小 —— 这是全站第二处按输入方式而不是按宽度给尺寸的地方，同
 * `lookup.js` 那个浮层。 */
@media (hover: none) {
  .ccass-chart__tool {
    min-width: 40px;
    padding: 6px 12px;
    font-size: 13px;
  }
}

/* 纸上的样子（页头那个「导出 PDF」，见 `_print.html`）。壳、折叠和表格那几条在
 * `app.css` 末尾那段里，这里只管这一页多出来的那张图。 */
@media print {
  /*
   * **图例上那个色块是 `background-color`，而浏览器默认不印背景。** 不给这一句，纸上
   * 二十来个图例全是白方块，读者没有办法把一条曲线和一个参与者对上——而屏幕上完全
   * 正常。曲线本身是 `stroke`，那个不受这条规矩管，所以只有图例会坏，也就更不容易
   * 被发现。`print-color-adjust` 是继承属性，写在这一块上就够。
   */
  .ccass-chart {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    /* 图和它的图例分到两页上就等于两样都读不成。 */
    break-inside: avoid;
  }

  /* 悬停才浮出来的那一块、那排缩放按钮，和那句「滚轮缩放、拖拽平移」：纸上三样都不成立，
   * 而按钮留着就是印在纸上的一排点不动的东西。 */
  .ccass-chart__tip,
  .ccass-chart__tools,
  .ccass-chart__hint { display: none; }
}