/*
 * Turn 流程实验页的页内专用样式。共用部分在 study-lab-shell.css。
 */

.trace-dot {
  fill: color-mix(in srgb, var(--surface-strong) 92%, transparent);
  stroke: var(--line-strong);
  stroke-width: 2;
  transition: r var(--dur-fast) var(--ease);
}

/* 三档状态各自有独立的形状线索：进模型请求是实心，写日志是加粗描边，
 * 拒绝和失败额外换描边色并在表格里带文字，所以状态不靠颜色单独承载。 */
.trace-dot.is-logged { stroke: var(--brand); }
.trace-dot.is-visible { fill: var(--brand); stroke: var(--brand); }
.trace-dot.is-visible.is-logged { fill: var(--brand); stroke: var(--brand); stroke-width: 3; }
.trace-dot.is-denied { stroke: var(--deny); stroke-dasharray: 3 2; }
.trace-dot.is-failed { stroke: var(--signal); stroke-dasharray: 3 2; }
.trace-dot:hover { r: 11; }

/* 连线是关系而不是数值，所以用虚线，且不参与任何长度比较。
 * 流动动画：stroke-dashoffset 递增让虚线沿路径方向"行进"，
 * 直观表达数据从日志事件流向模型请求。 */
.pair-link {
  fill: none;
  stroke: color-mix(in srgb, var(--allow) 62%, transparent);
  stroke-dasharray: 5 4;
  stroke-width: 2;
}

@media (prefers-reduced-motion: no-preference) {
  .pair-link {
    animation: pair-flow 1.2s linear infinite;
  }
}
@keyframes pair-flow {
  to { stroke-dashoffset: -18; } /* 5+4=9, 走两个周期回到原点 */
}

/* 活跃步骤的圆点脉冲环：当前推进到的步骤有呼吸感 */
.trace-dot.is-current-step {
  animation: dot-pulse-ring 1.5s ease-out infinite;
}
@keyframes dot-pulse-ring {
  0% { stroke-width: 3; r: 10; opacity: 1; }
  100% { stroke-width: 0; r: 16; opacity: 0; }
}

tbody tr[data-state="orphan"] td { color: var(--deny-ink); font-weight: 700; }
tbody tr[data-state="denied"] td:nth-child(3) { color: var(--deny-ink); }
tbody tr[data-state="failed"] td:nth-child(3) { color: var(--signal-ink); }

@media (prefers-reduced-motion: reduce) {
  .trace-dot { transition: none; }
  .pair-link { animation: none !important; }
  .trace-dot.is-current-step { animation: none !important; }
}

/*
 * 沙盒区：五个旋钮排成两列网格，窄屏折成单列；
 * 红色中止线是本区唯一的新图形元素，配色复用 --deny-ink。
 */
.sb-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px 22px;
  align-items: start;
}

.sb-controls .sb-check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.abort-line {
  stroke: var(--deny-ink, #c62828);
  stroke-width: 2;
  stroke-dasharray: 6 4;
}

/* 中止点之后的步骤尚未发生：整点淡显，拖动红线时它们是可抓的目标。 */
.trace-dot.is-future { opacity: 0.25; }
.axis.is-future-label { opacity: 0.4; }

.abort-label {
  fill: var(--deny-ink, #c62828);
  font-size: 12px;
  font-weight: 700;
}

.trace-dot.is-user-input { stroke-width: 3; }

.sb-oracle-details { margin-top: 12px; }
.sb-oracle-details summary { cursor: pointer; color: var(--ink-soft, #57606a); }