/* Run page (/actions/runs/{id}): job graph, status colours and layout. Theme-independent. */
#repo-action-view .octicon-check-circle-fill { color: #079455 !important; }
#repo-action-view .octicon-x-circle-fill { color: #f04438 !important; }
#repo-action-view .octicon-meter { color: #c4620f !important; }
#repo-action-view :is(.octicon-clock, .octicon-blocked) { color: var(--color-text-light-2) !important; }
#repo-action-view :is(.octicon-skip, .octicon-stop) { color: var(--color-text-light-3) !important; }

@media (min-width: 768px) {
  #repo-action-view .action-view-left { width: 22%; min-width: 240px; max-width: 300px; }
  #repo-action-view .action-view-right { width: auto; min-width: 0; }
}
#repo-action-view .job-info-header {
  box-shadow: 0 1px 0 var(--color-console-border);
}

.fleek-graph {
  margin-top: 12px;
  padding: 20px;
  overflow-x: auto;
  border: 1px solid var(--color-secondary);
  border-radius: var(--border-radius);
  background: var(--color-box-body);
  background-image: radial-gradient(var(--color-secondary) 1px, transparent 1px);
  background-size: 16px 16px;
}
.fleek-graph-canvas { position: relative; }
.fleek-graph-edges { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.fleek-graph-edges path { fill: none; stroke: var(--color-secondary-dark-4); stroke-width: 1.5; }
.fleek-graph-edges circle { fill: var(--color-box-body); stroke: var(--color-secondary-dark-4); stroke-width: 1.5; }
.fleek-graph-node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--color-secondary);
  border-radius: 8px;
  background: var(--color-box-body);
  color: var(--color-text) !important;
  box-shadow: 0 1px 3px var(--color-shadow);
  text-decoration: none !important;
}
.fleek-graph-node:hover { border-color: var(--color-primary); }
.fleek-graph-node.selected { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-alpha-40); }
.fleek-graph-node[data-status="running"] { border-color: #c4620f; }
.fleek-graph-node[data-status="failure"] { border-color: #f04438; }
.fleek-graph-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.fleek-graph-node:is([data-status="skipped"], [data-status="cancelled"]) .fleek-graph-name { color: var(--color-text-light-2); }
.fleek-graph-duration { color: var(--color-text-light-2); font-size: 12px; font-variant-numeric: tabular-nums; }