/* n-queens page */

.nq-stage {
  padding: 24px 28px 32px;
  display: flex; flex-direction: column; gap: 18px;
}

.board-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  display: inline-flex;
}
.board {
  display: grid;
  border: 2px solid var(--ink-soft);
}
.cell {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'system-ui', monospace;
  font-size: 24px;
  position: relative;
  transition: background 0.15s, transform 0.15s;
}
.cell.dark { background: oklch(0.84 0.012 80); }
.cell.light { background: oklch(0.97 0.005 80); }
.cell.attacked.dark { background: oklch(0.78 0.04 25); }
.cell.attacked.light { background: oklch(0.92 0.05 25); }
.cell.trying { box-shadow: inset 0 0 0 3px var(--cool); }
.cell.conflict { box-shadow: inset 0 0 0 3px oklch(0.55 0.18 25); }
.cell.placed { box-shadow: inset 0 0 0 3px var(--good); }
.cell.solution { box-shadow: inset 0 0 0 3px var(--good); background: var(--good-soft) !important; }
.cell .queen {
  color: var(--ink); font-size: 30px; line-height: 1;
}
.cell.solution .queen { color: oklch(0.32 0.1 145); }
.cell .row-label, .cell .col-label {
  position: absolute;
  font-size: 9px; color: var(--ink-soft);
}
.cell .row-label { left: 3px; top: 2px; }
.cell .col-label { right: 3px; bottom: 2px; }

.coords {
  display: grid; gap: 0;
}
.coord-label {
  display: flex; align-items: center; justify-content: center;
  font-family: 'system-ui', monospace;
  font-size: 11px; color: var(--muted);
  height: 18px; width: 48px;
}

/* Recursion depth indicator */
.depth-bar {
  display: flex;
  gap: 3px;
  font-family: 'system-ui', monospace;
}
.depth-cell {
  width: 32px; height: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--muted);
}
.depth-cell.filled {
  background: var(--good-soft);
  border-color: var(--good);
  color: oklch(0.32 0.1 145);
  font-weight: 600;
}
.depth-cell.current {
  background: var(--cool);
  border-color: var(--cool);
  color: white;
}

.solution-list {
  display: flex; flex-direction: column; gap: 4px;
  font-family: 'system-ui', monospace;
  font-size: 11.5px;
  max-height: 200px; overflow-y: auto;
}
.solution-list .sol {
  padding: 4px 8px; background: var(--good-soft);
  border: 1px solid var(--good); border-radius: 5px;
}