/* Dijkstra's shortest path — an expanding-wavefront grid pathfinder.
   On a uniform grid, Dijkstra explores in growing rings; the first time the
   wavefront reaches the goal, that path is provably shortest. Greedy and simple,
   yet optimal — the elegant solution and the correct one are the same solution.
   Vanilla JS, no deps, no build. Dark theme. Palette shared with sibling widgets:
   cyan = exploration, green = the answer (the win). No red. */

#dijkstra-pathfinder {
  --dk-frontier: #5ac8fa;              /* the exploring wavefront */
  --dk-path: #30d158;                  /* the shortest path — the win */
  --dk-wall: rgba(255,255,255,0.16);   /* obstacles */
  font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  background: var(--color-bg-elevated, #111111);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: 16px;
  padding: clamp(16px, 3vw, 26px);
  margin: 2.5rem 0;
  color: var(--color-text-primary, #ffffff);
}

.dk-title { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
.dk-explain {
  font-size: 0.9rem; line-height: 1.55; margin: 8px 0 18px;
  color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
}

/* the grid */
.dk-board {
  display: grid; gap: 2px;
  background: rgba(0,0,0,0.4); padding: 4px; border-radius: 10px;
  touch-action: none; user-select: none;
}
.dk-cell {
  position: relative; border-radius: 3px;
  background: var(--color-bg-surface, #1c1c1f);
  aspect-ratio: 1 / 1; cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
.dk-cell.is-wall { background: var(--dk-wall); cursor: pointer; }
/* exploration wavefront — cyan, alpha set inline by distance for the ring gradient */
.dk-cell.is-seen { background: var(--dk-frontier); }
/* the recovered shortest path — green, the win */
.dk-cell.is-path { background: var(--dk-path); box-shadow: 0 0 8px rgba(48,209,88,0.55); }
/* endpoints sit above the search colors */
.dk-cell.is-start, .dk-cell.is-goal { background: transparent; }
.dk-cell.is-start::after, .dk-cell.is-goal::after {
  content: ""; position: absolute; inset: 18%; border-radius: 50%;
}
.dk-cell.is-start::after { background: #fff; }
.dk-cell.is-goal::after { background: transparent; border: 2px solid var(--dk-path); inset: 16%; }
.dk-cell.is-goal.reached::after { background: var(--dk-path); }

/* legend — explains the markers at a glance */
.dk-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 0.78rem; color: var(--color-text-secondary, rgba(255,255,255,0.6)); }
.dk-leg { display: inline-flex; align-items: center; gap: 6px; }
.dk-sw { width: 14px; height: 14px; border-radius: 3px; flex: 0 0 auto; display: inline-block; }
.dk-sw--start { border-radius: 50%; background: #fff; }
.dk-sw--goal { border-radius: 50%; background: transparent; border: 2px solid var(--dk-path); }
.dk-sw--wall { background: var(--dk-wall); }
.dk-sw--seen { background: rgba(90,200,250,0.55); }
.dk-sw--path { background: var(--dk-path); }

/* readout card — full border accent on success, never a side bar */
.dk-readout {
  margin-top: 16px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--color-bg-surface, #1a1a1a);
  border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08));
  border-radius: 12px; padding: 14px 16px; transition: border-color 0.25s;
}
.dk-readout.is-solved { border-color: var(--dk-path); }
.dk-stat { font-size: 0.86rem; color: var(--color-text-secondary, rgba(255,255,255,0.6)); }
.dk-stat b { color: #fff; font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.dk-stat--path b { color: var(--dk-path); }
.dk-badge {
  margin-left: auto; display: none; align-items: center; gap: 6px;
  background: rgba(48,209,88,0.16); color: var(--dk-path);
  font-size: 0.8rem; font-weight: 650; padding: 3px 11px; border-radius: 999px;
}
.dk-readout.is-solved .dk-badge { display: inline-flex; }
@media (max-width: 520px) { .dk-badge { margin-left: 0; } }

/* controls */
.dk-controls { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.dk-btn {
  appearance: none; border: 1px solid var(--color-border, rgba(255,255,255,0.15));
  background: transparent; color: var(--color-text-primary, #fff);
  font: inherit; font-size: 0.88rem; padding: 9px 16px; border-radius: 9px; cursor: pointer;
  transition: border-color 0.18s, background 0.18s, opacity 0.18s;
}
.dk-btn:hover:not(:disabled) { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.05); }
.dk-btn:disabled { opacity: 0.45; cursor: default; }
/* primary = white fill + dark text, matching the sibling widgets */
.dk-btn--primary { background: var(--color-accent, #fff); border-color: var(--color-accent, #fff); color: #0b0b0b; font-weight: 650; }
.dk-btn--primary:hover:not(:disabled) { opacity: 0.9; background: var(--color-accent, #fff); }
.dk-hint { font-size: 0.8rem; color: var(--color-text-tertiary, rgba(255,255,255,0.42)); margin-left: 4px; }
@media (max-width: 520px) { .dk-hint { margin-left: 0; width: 100%; } }

.dk-noscript { font-size: 0.9rem; color: var(--color-text-secondary, rgba(255,255,255,0.65)); line-height: 1.6; }