/* The Execution tab (trace.js), in studio.css's palette: green inserts,
   red retracts, orange where a run held, blue selects. */

/* The tab's dot: a run going (pulsing), failed, held, or a new trace while
   another tab was shown. */
.rs-tab .fresh { width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--blue); }
.rs-tab .fresh[data-tone="running"] { background: var(--green); animation: pulse 1.2s ease-in-out infinite; }
.rs-tab .fresh[data-tone="failed"] { background: var(--red); }
.rs-tab .fresh[data-tone="held"] { background: var(--orange); }

.execution {
  flex: 1;
  overflow: auto;
  padding: 10px 16px;
  font: 12px/1.5 var(--mono);
  outline: none;
}
.execution .note { color: var(--muted); padding-left: 0; }
.execution .plus { color: var(--green); }
.execution .minus { color: var(--red); }
.execution .support { color: var(--muted); }

.trace-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-family: var(--sans); }
.trace-head select {
  height: 24px;
  max-width: 40%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--strong);
  font: 12px var(--mono);
}
.trace-head .where { color: var(--text); font-size: 12px; }
.trace-head .warn { color: var(--orange); font-size: 12px; }

.grid-scroll { overflow-x: auto; margin-bottom: 12px; }
.grid { border-collapse: collapse; }
.grid th {
  padding: 2px 8px;
  color: var(--muted);
  font: 500 11px var(--sans);
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.grid td { padding: 3px 8px; vertical-align: top; border-bottom: 1px solid var(--border); white-space: nowrap; }
.grid .n { text-align: right; }
.grid .name { color: var(--strong); }
.grid .writes { color: var(--text); }
.grid .flavor { color: var(--blue); }
.grid .flavor[data-flavor="normal"] { color: var(--muted); }
.grid .cell { min-width: 44px; text-align: right; cursor: pointer; }
.grid .cell:empty { cursor: default; }
.grid .cell:hover:not(:empty) { background: var(--chrome); }
.grid .cell.fixpoint::before { content: "·"; color: var(--muted); }
.grid .cell.parked { box-shadow: inset 2px 0 0 var(--orange); }
.grid .cell.selected { background: rgba(38, 139, 210, 0.12); box-shadow: inset 0 0 0 1px var(--blue); }

.zset { border-top: 1px solid var(--border); padding-top: 8px; }
.zset-title { color: var(--blue); margin-bottom: 4px; }
.zset-relation { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.zset-relation .relation { color: var(--strong); font-weight: 600; }
.zset-row { display: flex; align-items: baseline; gap: 8px; padding-left: 10px; }
.zset-row .row { color: var(--strong); }
.sign { width: 1em; font-weight: 700; text-align: center; }
.sign.plus { color: var(--green); }
.sign.minus { color: var(--red); }
.kind {
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  font: 10.5px var(--sans);
}
.kind.input { color: var(--strong); }
.kind.rec { color: var(--blue); border-color: rgba(38, 139, 210, 0.4); }
.kind.premise { color: var(--yellow); }
.fired { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; }
.fired a { color: var(--blue); cursor: pointer; text-decoration: underline; }

.maintenance {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 12px;
  margin-bottom: 12px;
  padding: 6px 10px;
  border-left: 3px solid var(--blue);
  background: var(--chrome);
}
.maintenance .label { color: var(--muted); font-family: var(--sans); }

.parked-card {
  margin-bottom: 12px;
  padding: 6px 10px;
  border-left: 3px solid var(--orange);
  background: var(--orange-tint);
  color: var(--orange);
}
.parked-card .lines { margin: 6px 0 0; color: var(--strong); white-space: pre-wrap; }

/* The editor's rules that fired in the selected iteration. */
.fired-rule { background: rgba(38, 139, 210, 0.1); }
.fired-rule-margin { background: var(--blue); width: 3px !important; margin-left: 3px; }
/* the form a compile error is in */
.fired-rule.error { background: rgba(220, 50, 47, 0.13); }
.fired-rule-margin.error { background: var(--red); }

.trace-toggle { display: flex; align-items: center; gap: 4px; justify-content: flex-end; color: var(--muted); font-size: 11.5px; margin-bottom: 6px; }

.trace-head .trace-caption { color: var(--muted); font: 500 11px var(--sans); text-transform: uppercase; letter-spacing: 0.04em; }

/* ---- The run view (live.js): the latest run as it goes ------------------ */

.run-view { margin-bottom: 14px; font-family: var(--sans); transition: opacity 0.3s; }
.run-view.stale { opacity: 0.55; }
.run-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 8px; }
.run-state { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--strong); }
.run-state .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); transition: background 0.3s; }
.run-state[data-state="running"] .dot { background: var(--green); animation: run-beat 1.2s ease-in-out infinite; }
.run-state[data-state="compiling"] .dot { background: var(--blue); animation: run-beat 1.2s ease-in-out infinite; }
.run-state[data-state="done"] .dot { background: var(--green); }
.run-state[data-state="failed"] .dot { background: var(--red); }
.run-state[data-state="failed"] { color: var(--red); }
.run-state[data-state="held"] .dot { background: var(--orange); }
.run-state[data-state="held"] { color: var(--orange); }
.run-state[data-state="replay"] .dot { background: var(--blue); }
.run-command { color: var(--text); font: 12px var(--mono); }
.run-stats { display: flex; gap: 12px; margin-left: auto; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.run-stats b { color: var(--strong); font-weight: 600; }
@keyframes run-beat { 50% { transform: scale(1.5); opacity: 0.55; } }

/* the time strip: each stratum as wide as its share of the time */
.run-strip { display: flex; gap: 2px; height: 22px; margin-bottom: 10px; }
.run-strip .seg {
  flex: 0.004 1 0;
  min-width: 3px;
  overflow: hidden;
  padding: 0 6px;
  border-radius: 3px;
  background: rgba(133, 153, 0, 0.55);
  color: white;
  font: 600 11px/22px var(--mono);
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: flex-grow 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.4s;
}
.run-strip .seg[data-flavor="count"] { background: rgba(147, 161, 161, 0.7); }
.run-strip .seg[data-flavor^="maint"] { background: rgba(38, 139, 210, 0.6); }
.run-strip .seg[data-flavor="mixed"] { background: rgba(147, 161, 161, 0.5); }
.run-strip .seg.active {
  background-color: var(--green);
  background-image: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: run-sweep 1.4s linear infinite;
}
.run-strip .seg.stopped { background: var(--orange); }
.run-view[data-tone="failed"] .run-strip .seg.stopped { background: var(--red); }
.run-strip .seg.selected { box-shadow: inset 0 0 0 2px var(--strong); }
.run-strip .seg:hover { filter: brightness(1.08); }
@keyframes run-sweep { from { background-position: 150% 0; } to { background-position: -50% 0; } }

.run-main { min-width: 0; }
.run-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(200px, 1fr); gap: 14px; align-items: start; }
@media (max-width: 760px) { .run-body { grid-template-columns: minmax(0, 1fr); } }

/* the strata, as they start and settle */
.st-row {
  display: grid;
  grid-template-columns: 10px minmax(60px, 1fr) auto 52px 84px 62px 80px;
  align-items: center;
  gap: 8px;
  padding: 3px 6px;
  border-radius: 4px;
  font: 12px var(--mono);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.3s;
}
.st-row:hover { background: var(--chrome); }
.st-row.selected { background: rgba(38, 139, 210, 0.1); box-shadow: inset 2px 0 0 var(--blue); }
.st-row.entering { animation: run-enter 0.35s ease-out; }
.st-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); opacity: 0.6; transition: opacity 0.4s; }
.st-row.active .st-dot { opacity: 1; animation: run-beat 1.2s ease-in-out infinite; }
.st-name { overflow: hidden; color: var(--strong); text-overflow: ellipsis; white-space: nowrap; }
.st-row.active .st-name, .st-row.stopped .st-name { font-weight: 600; }
.st-row.stopped .st-dot { background: var(--orange); opacity: 1; }
.run-view[data-tone="failed"] .st-row.stopped .st-dot { background: var(--red); }
.st-flavor { color: var(--blue); font: 10.5px var(--sans); }
.st-n { color: var(--text); text-align: right; white-space: nowrap; }
.st-n.time { color: var(--muted); }
.st-spark { width: 80px; height: 18px; overflow: visible; }
.st-spark path { fill: none; stroke: var(--green); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.st-spark circle { fill: var(--green); }
.st-row.active .st-spark circle { animation: run-beat 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.st-folded { padding: 3px 6px 3px 24px; color: var(--muted); font-size: 11.5px; }
@keyframes run-enter { from { opacity: 0; transform: translateY(-4px); } }

.run-caption { margin: 2px 0 4px; color: var(--muted); font: 500 11px var(--sans); text-transform: uppercase; letter-spacing: 0.04em; }

/* a growth bar per relation */
.bar { display: grid; grid-template-columns: minmax(50px, 0.9fr) minmax(40px, 1.4fr) 64px; align-items: center; gap: 8px; padding: 1px 0; font: 12px var(--mono); }
.bar.entering { animation: run-enter 0.35s ease-out; }
.bar-name { overflow: hidden; color: var(--strong); text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 8px; border-radius: 4px; background: var(--chrome); overflow: hidden; }
.bar-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--green);
  opacity: 0.7;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.bar.growing .bar-fill { opacity: 1; }
.bar.selected .bar-name { color: var(--blue); }
.bar.zero .bar-name, .bar.zero .bar-size { color: var(--muted); }
.bar-size { color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.bar-more { padding-top: 2px; color: var(--muted); font-size: 11.5px; }

/* the flow of relations from stratum to stratum */
.run-main .run-caption { margin-top: 12px; }
.run-flow { display: block; width: 100%; margin-top: 4px; overflow: visible; }
.flow-edge { fill: none; stroke: var(--border-strong); stroke-width: 1.5; transition: stroke 0.3s; }
.flow-edge.selected { stroke: var(--blue); }
.flow-edge.drawing { stroke-dasharray: 400; stroke-dashoffset: 400; animation: run-draw 0.6s ease-out forwards; }
.flow-node { fill: var(--surface); stroke: var(--green); stroke-width: 2; cursor: pointer; }
.flow-node[data-flavor^="maint"] { stroke: var(--blue); }
.flow-node[data-flavor="count"] { stroke: var(--muted); }
.flow-node.active { fill: var(--green); animation: run-beat 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.flow-node.stopped { fill: var(--orange); stroke: var(--orange); }
.run-view[data-tone="failed"] .flow-node.stopped { fill: var(--red); stroke: var(--red); }
.flow-node.selected { stroke: var(--strong); }
.flow-label { fill: var(--text); font: 10.5px var(--mono); text-anchor: middle; }
@keyframes run-draw { to { stroke-dashoffset: 0; } }

.run-empty { margin-top: 8px; color: var(--muted); font-size: 11.5px; }

/* where and why a run failed or holds */
.run-card { display: none; }
.run-card.compile, .run-card.runtime, .run-card.error, .run-card.held, .run-card.aborted {
  display: block;
  margin-bottom: 10px;
  padding: 8px 12px;
  border-left: 3px solid var(--red);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--red-tint);
  animation: run-enter 0.35s ease-out;
}
.run-card.held { border-color: var(--orange); background: var(--orange-tint); }
.run-card.aborted { border-color: var(--muted); background: var(--chrome); }
.card-title { color: var(--strong); font-weight: 600; }
.run-card.compile .card-title, .run-card.runtime .card-title, .run-card.error .card-title { color: var(--red); }
.run-card.held .card-title { color: var(--orange); }
.card-message { margin: 6px 0 0; color: var(--strong); font: 12px/1.5 var(--mono); white-space: pre-wrap; }
.card-note { margin-top: 6px; color: var(--text); font-size: 12px; }
.card-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.card-actions:empty { display: none; }
.card-link { color: var(--blue); font: 12px var(--mono); text-decoration: underline; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .run-view *, .rs-tab .fresh { animation: none !important; transition: none !important; }
}