/* robot-pathfinder: small-cell overrides on top of robot-builder.css, the
   A* overlay, the workflow tree and the stats panel. */

.pathfinder .world .cell { transition: background 0.15s, box-shadow 0.15s; }
.pathfinder .cell-wall { border-radius: 3px; box-shadow: inset 0 0 0 1px #334155, inset 0 -2px 0 rgba(0,0,0,.25); }
.pathfinder .cell-goal::after { inset: 5px; }

/* A* overlay */
.cell.open   { background: rgba(96,165,250,.30); border-radius: 6px; }
.cell.closed { background: rgba(99,102,241,.16); }
.cell.path   { background: rgba(245,158,11,.10); }
.cell.path::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 8px rgba(245,158,11,.7);
}
.cell.cell-wall.surprise {
  background: linear-gradient(135deg, #7f1d1d, #451a1a);
  box-shadow: inset 0 0 0 1px #ef4444, 0 0 12px rgba(239,68,68,.6);
  animation: drop 0.35s ease-out;
}

@keyframes drop {
  from { transform: scale(1.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* small robot */
.pathfinder .box.robot {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}

.pathfinder .robot-arrow::before {
  top: 3px;
  left: calc(50% - 4px);
  border-width: 0 4px 6px;
}

/* controls */
.control-inline { flex-direction: row; align-items: center; gap: 6px; }
.control-inline input[type="checkbox"] { accent-color: #6366f1; }
.seed-row { display: flex; align-items: center; gap: 2px; }
.seed-input { width: 6.5rem; font-family: 'Courier New', monospace; }

/* lower area: tree | (stats + runs) */
.pathfinder-lower { grid-template-columns: 1.15fr 1fr; }
.side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* workflow tree */
.plan-tree { font-size: 0.7rem; }
.tree-wf-name {
  font-family: 'Courier New', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: #475569;
  margin-bottom: 3px;
}
.tree-wf.taken > .tree-wf-name { color: #a5b4fc; }

.tree-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tree-step {
  border: 1px solid #1e293b;
  border-left: 3px solid #334155;
  border-radius: 7px;
  background: #0f1117;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.tree-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 4px 7px;
}

.tree-name { font-family: 'Courier New', monospace; color: #a5b4fc; }
.tree-badge { font-size: 0.58rem; color: #475569; }
.tree-count { margin-left: auto; font-family: 'Courier New', monospace; font-size: 0.62rem; color: #60a5fa; }

.tree-branch {
  margin: 0 6px 6px 12px;
  padding-left: 8px;
  border-left: 1px dashed #1e293b;
}

.tree-branch-label {
  display: block;
  margin: 2px 0 3px;
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #475569;
}

.tree-fn { font-family: 'Courier New', monospace; font-size: 0.64rem; color: #64748b; }

.tree-step.running { border-color: #6366f1; box-shadow: 0 0 14px rgba(99,102,241,.35); }
.tree-step.running > .tree-head { background: rgba(99,102,241,.14); }
.tree-step.done { border-left-color: #34d399; }
.tree-step.failed { border-color: #ef4444; box-shadow: 0 0 12px rgba(239,68,68,.35); }

/* stats */
.stats {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 10px;
  font-size: 0.72rem;
}

.stats dt { color: #64748b; }
.stats dd { font-family: 'Courier New', monospace; color: #a5b4fc; text-align: right; }

.legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 0.7rem;
  font-size: 0.62rem;
  color: #64748b;
}

.legend li { display: flex; align-items: center; gap: 5px; }
.swatch { width: 10px; height: 10px; border-radius: 3px; }
.swatch.open { background: rgba(96,165,250,.45); }
.swatch.closed { background: rgba(99,102,241,.35); }
.swatch.path { background: #f59e0b; border-radius: 50%; }
.swatch.surprise { background: #ef4444; }

.pathfinder .runs { max-height: 180px; }

@media (max-width: 700px) {
  .pathfinder-lower { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .cell.cell-wall.surprise { animation: none; }
  .pathfinder .world .cell, .tree-step { transition: none; }
}