/* 代码 + 时间线合成视图。颜色全部沿用 timeline.css 的 --tl-* 变量。 */

.cr-card { gap: 10px; }

.cr-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.cr-switch {
  font: inherit; font-size: 12.5px; padding: 2px 10px 2px 7px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--tl-rule); background: transparent; color: var(--tl-muted);
  display: inline-flex; align-items: center; gap: 5px;
}
.cr-switch-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tl-rule); }
.cr-switch.is-on { border-color: var(--tl-po); color: var(--tl-po); }
.cr-switch.is-on .cr-switch-dot { background: var(--tl-po); }
.cr-switch:focus-visible { outline: 2px solid var(--tl-po); outline-offset: 2px; }
.cr-switch[disabled] { opacity: .45; cursor: not-allowed; }

.cr-hint { font-size: 12.5px; color: var(--tl-muted); min-height: 1.5em; }

.cr-scroll { overflow-x: auto; }
.cr-body { display: grid; row-gap: 0; align-items: start; }

.cr-lane-name {
  grid-row: 1; padding: 0 0 4px 3px;
  font: 600 12.5px var(--tl-body); color: var(--tl-ink);
}

.cr-code {
  grid-row: 2; display: grid; gap: 1px; padding: 6px 8px 6px 9px;
  border-left: 2px solid var(--tl-rule); border-right: 2px solid transparent;
  min-height: 72px;
}
.cr-line {
  display: flex; gap: 9px; padding: 1px 5px; border-radius: 4px;
  font: 12.5px/1.6 var(--tl-mono); white-space: pre; cursor: default;
  transition: background-color .18s ease;
}
.cr-no { color: var(--tl-muted); opacity: .65; min-width: 1ch; text-align: right; }
.cr-card.is-dense .cr-line { font-size: 11.5px; gap: 7px; }
.cr-line.is-fence .cr-src { color: var(--tl-rf); }
.cr-line.is-active { background: color-mix(in srgb, var(--tl-po) 15%, transparent); }
.cr-line.is-active .cr-no { opacity: 1; color: var(--tl-po); }

.cr-axis {
  grid-row: 3; padding-top: 18px;
  display: grid; grid-template-rows: repeat(var(--rows), 30px); align-content: start;
}
.cr-axis > div {
  display: flex; align-items: center; justify-content: flex-end; padding-right: 5px;
  font: 10.5px var(--tl-mono); color: var(--tl-muted);
}

/* 画图区：每条通道一列，列内按指令再分列 */
.cr-plot { grid-row: 3; position: relative; display: grid; min-width: 0; }
.cr-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.cr-col { min-width: 0; }
.cr-col-no {
  height: 18px; line-height: 18px; text-align: center;
  font: 10.5px var(--tl-mono); color: var(--tl-muted); opacity: .7;
}
.cr-rail {
  position: relative; height: calc(var(--rows) * 30px);
  border-left: 1px solid color-mix(in srgb, var(--tl-rule) 55%, transparent);
}

.cr-guide {
  position: absolute; left: 0; right: 0; border-top: 1px dashed var(--tl-rule);
  opacity: .5; pointer-events: none;
}

.cr-mark {
  position: absolute; left: 50%; width: 12px; height: 12px;
  transform: translate(-50%, -50%); animation: cr-pop .26s ease-out;
}
.cr-mark svg { display: block; width: 12px; height: 12px; fill: var(--tl-ink); }
.cr-mark[data-kind="sc"] svg { fill: var(--tl-rf); }

@keyframes cr-pop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* 发出到落地：短虚线 */
.cr-fly {
  position: absolute; left: 50%; width: 1.5px; margin-left: -.75px;
  background-image: repeating-linear-gradient(to bottom, var(--tl-muted) 0 2px, transparent 2px 5.5px);
  opacity: .85;
}
/* 落地之后还可以再晚：长虚线 */
.cr-tail {
  position: absolute; left: 50%; width: 2px; margin-left: -1px;
  background-image: repeating-linear-gradient(to bottom, var(--tl-muted) 0 5px, transparent 5px 10px);
  opacity: .7;
}

.cr-val {
  position: absolute; left: calc(50% + 8px); transform: translateY(-50%);
  font: 600 10.5px var(--tl-mono); padding: 0 2px; background: var(--tl-bg); color: var(--tl-ink);
}
.cr-val.bad { color: var(--tl-bad); }
/* 每线程一条轴时，跨线程箭头从右上方进来：标签挪到记号右下，让开箭头 */
.cr-rail-lane .cr-val { transform: none; white-space: nowrap; }

/* 箭头：橙＝读到，蓝＝保序，红虚线＝来晚了，紫＝fence.sc 的先后，紫虚线＝barrier 同步 */
.cr-edge { stroke-width: 1.6; fill: none; }
.cr-e-rf { stroke: var(--tl-rf); }
.cr-e-keep { stroke: var(--tl-po); stroke-width: 2.6; }
.cr-e-rev { stroke: var(--tl-bad); stroke-dasharray: 5 4; }
.cr-e-free { stroke: var(--tl-muted); stroke-dasharray: 3 4; }
.cr-e-order { stroke: var(--tl-sync); stroke-width: 2; }
.cr-e-sync { stroke: var(--tl-sync); stroke-width: 2; stroke-dasharray: 6 3; }
.cr-head { stroke: none; }
.cr-h-rf { fill: var(--tl-rf); }
.cr-h-keep { fill: var(--tl-po); }
.cr-h-rev { fill: var(--tl-bad); }
.cr-h-free { fill: var(--tl-muted); }
.cr-h-order { fill: var(--tl-sync); }
.cr-h-sync { fill: var(--tl-sync); }

.cr-ic { width: 14px; height: 14px; fill: var(--tl-ink); }
.cr-ic text { display: none; }
.cr-ic rect { fill: var(--tl-muted); }
.cr-ic-arrow { width: 16px; }

@media (max-width: 640px) {
  .cr-line { font-size: 11px; gap: 5px; }
  .cr-code { padding-left: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .cr-mark { animation: none; }
  .cr-line { transition: none; }
}